/* ═══════════════════════════════════════════════════
   NUTRIBABY v3 — Paleta viva: roxo profundo + magenta
   + azul elétrico + amarelo limão. Energia de criança.
   ═══════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* ─ Cores principais ─ */
  --purple:      #5c00d3;
  --purple-mid:  #7b2ff7;
  --purple-dark: #3a0085;
  --magenta:     #fc04bc;
  --magenta-dark:#c900970;
  --electric:    #00d4ff;
  --yellow:      #ffe135;
  --green:       #00e676;
  --white:       #ffffff;
  --off-white:   #f5f0ff;

  /* ─ Textos ─ */
  --text-dark:   #1a0040;
  --text-mid:    #3d0080;
  --text-muted:  #7a55aa;

  /* ─ Gradients ─ */
  --grad-main:   linear-gradient(135deg, #5c00d3 0%, #9b00e8 50%, #fc04bc 100%);
  --grad-card:   linear-gradient(160deg, #3a0085 0%, #6500c9 100%);
  --grad-bonus:  linear-gradient(135deg, #280054 0%, #440060 100%);
  --grad-offer:  linear-gradient(160deg, #14041c 0%, #2a0055 60%, #14041c 100%);
  --grad-faq:    linear-gradient(135deg, #f0e8ff 0%, #e8d5ff 100%);

  /* ─ Sombras ─ */
  --shadow-purple: 0 8px 32px rgba(92,0,211,.35);
  --shadow-magenta:0 8px 32px rgba(252,4,188,.4);
  --shadow-card:   0 12px 48px rgba(92,0,211,.25);

  /* ─ Fontes ─ */
  --font: 'Nunito', 'Nunito Sans', system-ui, sans-serif;

  /* ─ Raios ─ */
  --r-sm:  10px;
  --r-md:  20px;
  --r-lg:  32px;
  --r-xl:  50px;
}

body {
  font-family: var(--font);
  background: var(--off-white);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }

.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal].visible { opacity: 1; transform: none; }

/* ── CHIPS ── */
.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.chip--purple  { background: rgba(92,0,211,.12);  color: var(--purple); }
.chip--pink    { background: rgba(252,4,188,.12); color: var(--magenta); }
.chip--blue    { background: rgba(0,212,255,.15); color: #007aad; }
.chip--yellow  { background: rgba(255,225,53,.2); color: #7a5c00; }

/* ── SECTION HEAD ── */
.section-head {
  text-align: center;
  margin-bottom: 52px;
}
.section-head h2 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text-dark);
}
.section-head h2 em {
  font-style: normal;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ════════════════════════════════════
   URGENCY BAR
   ════════════════════════════════════ */
.urgency-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #14041c;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  letter-spacing: .2px;
}
.urgency-bar strong {
  color: var(--yellow);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  display: inline-block;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  flex-shrink: 0;
  animation: pulseDot 1s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.6); }
}

/* ════════════════════════════════════
   HERO
   ════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  /* BACKGROUND DO SITE ORIGINAL */
  background-image: url('https://nutribabyapp.com.br/wp-content/uploads/2025/12/site-mobile.webp');
  background-size: cover;
  background-position: center center;
}

/* Overlay gradiente que harmoniza o BG com nossa paleta */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(28, 0, 80, 0.88)  0%,
    rgba(60, 0, 140, 0.80) 40%,
    rgba(100, 0, 160, 0.60) 70%,
    rgba(252, 4, 188, 0.35) 100%
  );
  z-index: 0;
}

/* Efeito de brilho extra no topo */
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252,4,188,.25) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
  padding: 80px 24px;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
}

/* Hero copy */
.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}

.hero-copy h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 22px;
}
.hero-copy h1 .highlight {
  background: linear-gradient(90deg, var(--yellow), var(--magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--yellow);
  -webkit-text-fill-color: var(--yellow);
}

.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.82);
  max-width: 480px;
  margin-bottom: 28px;
  line-height: 1.7;
}
.hero-sub strong { color: var(--yellow); }

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.hero-pills span {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font);
  font-weight: 900;
  font-size: 18px;
  padding: 20px 44px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-magenta), 0 0 0 4px rgba(252,4,188,.2);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .5px;
  animation: btnPulse 2.2s ease-in-out infinite;
}
.btn-hero:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 48px rgba(252,4,188,.6), 0 0 0 6px rgba(252,4,188,.2);
}
.btn-hero svg { flex-shrink: 0; transition: transform .2s; }
.btn-hero:hover svg { transform: translateX(5px); }
@keyframes btnPulse {
  0%,100% { box-shadow: var(--shadow-magenta), 0 0 0 4px rgba(252,4,188,.2); }
  50%      { box-shadow: 0 12px 48px rgba(252,4,188,.7), 0 0 0 8px rgba(252,4,188,.15); }
}

.hero-lock {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-top: 14px;
}

/* Hero visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-mockup {
  width: 100%;
  max-width: 360px;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
  animation: mockupFloat 4s ease-in-out infinite alternate;
}
@keyframes mockupFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}

/* Bubbles flutuantes */
.hero-bubble {
  position: absolute;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  padding: 10px 10px;
  text-align: center;
  animation: bubbleFloat 3s ease-in-out infinite alternate;
}
.hero-bubble--top  { top: 10%; right: -20px; animation-delay: .3s; }
.hero-bubble--bottom { bottom: 2%; left: -40px; animation-delay: 1s; }
@keyframes bubbleFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.bubble-num {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
}
.bubble-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ════════════════════════════════════
   SECTION: O QUE VOCÊ RECEBE
   ════════════════════════════════════ */
.section-receives {
  padding: 96px 0;
  background: var(--off-white);
}

.ebooks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.ebook-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 2px solid rgba(92,0,211,.08);
  transition: transform .3s, box-shadow .3s;
}
.ebook-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 64px rgba(92,0,211,.3);
}

.ebook-media {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #e8d5ff;
}
.ebook-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.ebook-card:hover .ebook-media img { transform: scale(1.05); }

.ebook-ribbon {
  position: absolute;
  top: 16px;
  right: -8px;
  background: var(--grad-main);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 20px 6px 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
  box-shadow: -2px 2px 8px rgba(0,0,0,.2);
}

.ebook-body {
  padding: 28px;
}
.ebook-body h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.ebook-body p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.7;
}
.ebook-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ebook-body li {
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-mid);
  padding-left: 22px;
  position: relative;
}
.ebook-body li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--magenta);
}

/* ════════════════════════════════════
   SECTION: BÔNUS
   ════════════════════════════════════ */
.section-bonus {
  padding: 96px 0;
  background: linear-gradient(160deg, #1e0045 0%, #360070 50%, #1e0045 100%);
}
.section-bonus .section-head h2 { color: #fff; }
.section-bonus .section-head h2 em {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--yellow), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
}

.bonus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.bonus-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform .3s, box-shadow .3s;
  position: relative;
}
.bonus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(252,4,188,.3);
}

.bonus-free-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green);
  color: #003020;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,230,118,.4);
}

.bonus-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  opacity: .9;
  transition: opacity .3s;
}
.bonus-card:hover img { opacity: 1; }

.bonus-body {
  padding: 22px;
}
.bonus-body h3 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.bonus-body p {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 12px;
}
.bonus-price {
  font-size: 14px;
  color: rgba(255,255,255,.5);
}
.bonus-price s { text-decoration: line-through; }
.bonus-price strong { color: var(--green); font-size: 16px; }

/* ════════════════════════════════════
   SECTION: DEPOIMENTOS
   ════════════════════════════════════ */
.section-social {
  padding: 96px 0;
  background: var(--off-white);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonials-grid img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: transform .3s, box-shadow .3s;
}
.testimonials-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 52px rgba(92,0,211,.25);
}

/* ════════════════════════════════════
   SECTION: OFERTA
   ════════════════════════════════════ */
.section-offer {
  padding: 96px 0;
  background: var(--grad-offer);
  position: relative;
  overflow: hidden;
}
.offer-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(123,47,247,.3) 0%, transparent 70%);
  pointer-events: none;
}

.section-offer .section-head h2 { color: #fff; }

.offer-card {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  padding: 52px 56px;
  text-align: center;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 100px rgba(123,47,247,.25), 0 32px 80px rgba(0,0,0,.4);
  position: relative;
}

.offer-top-badge {
  display: inline-block;
  background: var(--yellow);
  color: #1a0040;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.offer-name {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.offer-desc {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin-bottom: 32px;
}

.offer-items {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
  text-align: left;
}
.offer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  color: rgba(255,255,255,.8);
}
.offer-item:last-child { border-bottom: none; }
.offer-item--bonus { color: rgba(255,255,255,.5); }
.oi-icon { font-size: 18px; flex-shrink: 0; }
.oi-name { flex: 1; }
.oi-price {
  font-size: 13px;
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
  flex-shrink: 0;
}

.offer-sep {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 0 0 20px;
}

.offer-total-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ot-label {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ot-was {
  font-size: 14px;
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
}

.offer-price-block {
  margin-bottom: 32px;
}
.op-prefix {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.45);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.op-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 10px;
}
.op-currency {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin-top: 12px;
}
.op-amount {
  font-size: 88px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.op-cents {
  font-size: 28px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  margin-top: 12px;
}
.op-saving {
  display: inline-block;
  background: rgba(0,230,118,.15);
  border: 1px solid rgba(0,230,118,.3);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 50px;
}

.btn-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: var(--grad-main);
  color: #fff;
  font-family: var(--font);
  font-weight: 900;
  font-size: 18px;
  padding: 22px 40px;
  border-radius: var(--r-xl);
  box-shadow: 0 10px 40px rgba(252,4,188,.5);
  transition: transform .2s, box-shadow .2s, filter .2s;
  letter-spacing: .4px;
  margin-bottom: 24px;
}
.btn-offer:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 18px 56px rgba(252,4,188,.65);
}
.btn-offer svg { transition: transform .2s; flex-shrink: 0; }
.btn-offer:hover svg { transform: translateX(5px); }

.offer-trust {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}

/* ════════════════════════════════════
   SECTION: FAQ
   ════════════════════════════════════ */
.section-faq {
  padding: 96px 0;
  background: var(--grad-faq);
}

.faq-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

details {
  background: var(--white);
  border-radius: var(--r-md);
  border: 2px solid rgba(92,0,211,.1);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(92,0,211,.08);
  transition: box-shadow .25s, border-color .25s;
}
details[open] {
  box-shadow: 0 8px 32px rgba(92,0,211,.18);
  border-color: rgba(92,0,211,.3);
}

summary {
  list-style: none;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  transition: color .2s;
}
summary:hover { color: var(--purple); }
summary::-webkit-details-marker { display: none; }

.summary-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-main);
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s;
  line-height: 1;
}
details[open] .summary-icon { transform: rotate(45deg); }

.faq-body {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ════════════════════════════════════
   FOOTER
   ════════════════════════════════════ */
.footer {
  background: #0d0020;
  padding: 36px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-logo {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}
.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.btn-footer {
  display: inline-flex;
  align-items: center;
  background: var(--magenta);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 50px;
  transition: filter .2s, transform .2s;
}
.btn-footer:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 72px 24px 56px;
    text-align: center;
  }
  .hero-sub  { margin-left: auto; margin-right: auto; }
  .hero-pills { justify-content: center; }
  .hero-visual { order: 1; max-width: 320px; margin: 0 auto; }
  .hero-bubble--top  { right: 0; }
  .hero-bubble--bottom { left: 0; }

  .ebooks-grid,
  .bonus-grid { grid-template-columns: 1fr; }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .offer-card { padding: 36px 24px; }
  .op-amount { font-size: 68px; }

  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .hero-copy h1 { font-size: 32px; }
  .btn-hero { font-size: 16px; padding: 17px 32px; }
  .section-receives,
  .section-bonus,
  .section-social,
  .section-offer,
  .section-faq { padding: 72px 0; }
  .section-head { margin-bottom: 36px; }
  .offer-trust { gap: 14px; }
  summary { font-size: 14px; padding: 17px 18px; }
  .faq-body { padding: 0 18px 16px; }
}