/* =========================================================
   Farma Baby — landing de captação para o grupo do WhatsApp
   Direção: editorial de vitrine (etiqueta de preço + camadas)
   Tipografia: Fraunces (display) + Poppins (marca e interface)
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* marca, usada em cheio nas superfícies decorativas */
  --azul:        #1678C7;
  --azul-fundo:  #0F63A8;
  --rosa:        #EB5D9B;
  --noite:       #123D68;
  --nevoa-azul:  #EAF4FD;
  --nevoa-rosa:  #FFF0F6;
  --lilas:       #7184D3;

  /* versões calibradas para texto e ação: todas passam em WCAG AA */
  --rosa-texto:  #C22A69;   /* 5.5:1 no branco, 5.0:1 nas névoas */

  /* Verde do WhatsApp. O #25D366 icônico dá 2:1 com texto branco e reprovaria,
     então o degradê percorre o mesmo caminho de matiz do logo (verde → teal)
     numa faixa que passa em AA: 4.70:1 no topo e 5.29:1 na base. */
  /* Matiz travada no verde (142°) e no teal (173°) do WhatsApp, com 92% de
     saturação. É o par mais vivo que ainda deixa TEXTO BRANCO passar em AA:
     4.70:1 no topo e 5.10:1 na base. Clarear mais derruba a legibilidade. */
  --wa-topo:     #068635;
  --wa-base:     #057C6E;
  --wa-topo-h:   #046B2A;
  --wa-base-h:   #046257;
  --wa-texto:    #057C6E;   /* 5.1:1 no branco, para o botão claro do CTA */
  --wa-vivo:     #25D366;   /* verde icônico, só fora do botão: brilho e sinalizador */

  /* superfícies e texto */
  --papel:       #F6FAFE;
  --branco:      #FFFFFF;
  --tinta:       var(--noite);
  --tinta-suave: #4E6C8A;
  --tinta-fraca: #57708A;
  --borda:       #D3E5F5;

  /* sombras coloridas, nunca cinza */
  --sombra-sm: 0 2px 6px rgba(18,61,104,.06), 0 8px 18px -10px rgba(18,61,104,.18);
  --sombra-md: 0 4px 10px rgba(18,61,104,.05), 0 22px 44px -22px rgba(18,61,104,.30);
  --sombra-lg: 0 8px 20px rgba(18,61,104,.06), 0 44px 80px -34px rgba(18,61,104,.42);
  --sombra-cta:  0 24px 56px -26px rgba(6,134,53,.60);

  /* tipografia */
  --fonte-ui:   'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-disp: 'Fraunces', Georgia, 'Times New Roman', serif;

  --fs-display: clamp(2.3rem, 1.42rem + 4.1vw, 4.6rem);
  --fs-h2:      clamp(1.85rem, 1.32rem + 2.4vw, 3.1rem);
  --fs-h3:      clamp(1.28rem, 1.14rem + .6vw, 1.6rem);
  --fs-body:    clamp(1rem, .965rem + .16vw, 1.115rem);
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  /* ritmo */
  --shell:      min(100% - 2.5rem, 76rem);
  --sec-y:      clamp(3.75rem, 2.4rem + 6.2vw, 7.5rem);
  --r-sm: 12px;  --r-md: 18px;  --r-lg: 28px;  --r-xl: 36px;

  /* motion */
  --t-rapido: 160ms;
  --t-normal: 320ms;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,ol,figure,figcaption,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
s{ text-decoration-thickness:1.5px; }

body{
  font-family:var(--fonte-ui);
  font-weight:500;
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--tinta);
  /* Grão como camada do próprio fundo: dá textura sem custo de imagem e sem
     uma camada fixa por cima, que criava costura visível nas bordas. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E") repeat,
    var(--nevoa-azul);
  -webkit-font-smoothing:antialiased;
}
/* O corte fica na própria seção (.hero), não no documento: assim nada de
   position:fixed, como a barra de ação no rodapé, fica preso num contexto de clip. */

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.shell{ width:var(--shell); margin-inline:auto; }

.skip-link{
  position:absolute; left:1rem; top:-6rem; z-index:99;
  background:var(--noite); color:#fff;
  padding:.75rem 1.15rem; border-radius:var(--r-sm);
  font-weight:600; text-decoration:none;
  transition:top var(--t-rapido) var(--ease);
}
.skip-link:focus-visible{ top:1rem; }

:where(a,button,summary,video,details):focus-visible{
  outline:3px solid var(--noite);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- 3. TIPOGRAFIA DE APOIO ---------- */
/* Kicker editorial: rótulo com filete, no lugar da pílula de landing genérica */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-fundo);
  max-width:26rem;
}
.eyebrow::after{
  content:''; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--borda), transparent);
}
.eyebrow__dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--wa-vivo);
  box-shadow:0 0 0 3px rgba(37,211,102,.24);
}

.sec-head{ max-width:34ch; margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.25rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-kicker{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rosa-texto); margin-bottom:.7rem;
}
.sec-title{
  font-family:var(--fonte-disp);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
  font-variation-settings:'opsz' 96;
  text-wrap:balance;
}

/* destaque manuscrito nos títulos: traço baixo, não bloco de marca-texto */
h1 em, h2 em{
  font-style:italic;
  color:var(--rosa-texto);
  padding-inline:.04em;
  background-image:linear-gradient(rgba(235,93,155,.18), rgba(235,93,155,.18));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:100% .22em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 4. BOTÕES ---------- */
.btn{
  --btn-grad:linear-gradient(155deg, var(--wa-topo) 0%, var(--wa-base) 100%);
  --btn-bg:var(--wa-base);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3rem; padding:.8rem 1.35rem;
  font-weight:700; font-size:.97rem; line-height:1.2;
  letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap;
  color:var(--btn-fg);
  background-color:var(--btn-bg);
  background-image:var(--btn-grad);
  border:0; border-radius:999px;
  box-shadow:var(--sombra-cta), inset 0 1px 0 rgba(255,255,255,.26);
  /* O hover escurece por filtro em vez de trocar o degradê: background-image não
     é animável, e escurecer só aumenta o contraste, nunca derruba o AA. */
  transition:transform var(--t-rapido) var(--ease),
             box-shadow var(--t-rapido) var(--ease),
             filter var(--t-rapido) var(--ease);
}
/* Qualquer clareado atrás do texto derruba o contraste do branco sobre o verde,
   então o volume vem só de escurecer a base e de um fio de luz de 1px na aresta
   superior, onde texto nenhum encosta. */
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(0,0,0,.13) 100%);
  pointer-events:none;
}
.btn .ico-wa{ width:1.3em; height:1.3em; fill:currentColor; flex:none; }

@media (hover:hover){
  .btn:hover{
    filter:brightness(.9) saturate(1.08);
    transform:translateY(-2px);
    box-shadow:0 30px 62px -26px rgba(6,134,53,.72), inset 0 1px 0 rgba(255,255,255,.26);
  }
}
.btn:active{ transform:translateY(0) scale(.985); }

.btn--lg{ min-height:3.75rem; padding:1rem 1.9rem; font-size:1.06rem; width:100%; }
.btn--sm{ min-height:2.6rem; padding:.55rem 1.05rem; font-size:.875rem; }

.btn--light{
  --btn-grad:none;
  --btn-bg:#fff;
  --btn-fg:var(--wa-texto);
  box-shadow:0 24px 54px -24px rgba(4,32,60,.7);
}
@media (hover:hover){ .btn--light:hover{ background:#fff; color:var(--noite); } }

/* ---------- 5. TOPBAR ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  padding-block:.7rem;
  background:rgba(234,244,253,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-normal) var(--ease), background-color var(--t-normal) var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--borda); background:rgba(246,250,254,.92); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar__cta{ display:none; }

.logo{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; padding-block:.15rem; min-height:2.75rem; }
.logo__mark{ width:2.5rem; height:2.5rem; flex:none; }
.logo__type{ display:flex; flex-direction:column; }
.logo__word{
  font-family:var(--fonte-ui);
  font-weight:800; font-size:1.28rem; line-height:1;
  letter-spacing:-.045em; color:var(--noite);
}
.logo__word em{ font-style:normal; color:var(--rosa); }
.logo__tag{
  font-size:.69rem; font-weight:600; line-height:1.4;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--tinta-fraca); margin-top:.18rem;
}

/* ---------- 6. HERO ---------- */
.hero{ position:relative; overflow:clip; padding-block:clamp(2.25rem,1rem + 5vw,4.5rem) var(--sec-y); }
/* Atmosfera do hero: gradientes radiais já morrem suaves, então nada de blur
   nem de sangrar para fora, o que criaria costura visível no clip da seção. */
.hero__glow{
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 42% at 88% 2%,  rgba(235,93,155,.32), rgba(235,93,155,0) 70%),
    radial-gradient(64% 46% at -6% 28%, rgba(22,120,199,.26), rgba(22,120,199,0) 68%),
    radial-gradient(52% 38% at 56% 96%, rgba(113,132,211,.24), rgba(113,132,211,0) 72%);
}
.hero__grid{ display:grid; gap:clamp(2.5rem,1.5rem + 5vw,4rem); }
.hero__copy > * + *{ margin-top:1.35rem; }

.hero__title{
  font-family:var(--fonte-disp);
  font-size:var(--fs-display);
  font-weight:700; line-height:1.02;
  letter-spacing:-.028em;
  font-variation-settings:'opsz' 144;
  text-wrap:balance;
  max-width:15ch;
}
.hero__lead{
  font-size:clamp(1.05rem,1rem + .35vw,1.28rem);
  color:var(--tinta-suave);
  max-width:44ch;
}
.hero__actions{ max-width:26rem; }
.hero__micro{
  margin-top:.85rem; text-align:center;
  font-size:var(--fs-sm); color:var(--tinta-fraca);
}

.trust{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; }
.trust__item{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-sm); font-weight:600; color:var(--tinta-suave);
}
.trust__ico{
  display:grid; place-items:center;
  width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--nevoa-rosa); color:var(--rosa-texto);
  font-size:.72rem; font-weight:800; line-height:1;
}

/* --- celular com o vídeo --- */
.hero__media{ display:flex; justify-content:center; }
.phone{
  position:relative;
  width:min(100%, 19.5rem);
  margin:0;
}
.phone::before{ /* etiqueta gráfica atrás do aparelho, cria camada */
  content:''; position:absolute;
  inset:auto -6% -4% 12%; height:62%;
  background:linear-gradient(150deg, var(--rosa) 0%, var(--lilas) 58%, var(--azul) 100%);
  border-radius:var(--r-xl);
  transform:rotate(4deg);
  opacity:.9; z-index:0;
}
.phone__frame{
  position:relative; z-index:1;
  aspect-ratio:9/16;
  border-radius:2rem;
  padding:.5rem;
  background:linear-gradient(165deg,#1B4E7F,#0C2E4F);
  box-shadow:var(--sombra-lg), inset 0 1px 0 rgba(255,255,255,.28);
  overflow:hidden;
}
.phone__video{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:1.6rem;
  background:var(--noite) url('../img/poster-video.webp') center/cover no-repeat;
}
.phone__sound{
  position:absolute; right:.95rem; bottom:.95rem;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:2.75rem; padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px; cursor:pointer;
  color:#fff; font-size:.8rem; font-weight:600;
  background:rgba(11,38,64,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background-color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
@media (hover:hover){ .phone__sound:hover{ background:rgba(11,38,64,.78); transform:translateY(-1px); } }
.phone__sound-ico{ display:block; width:1.05rem; height:1.05rem; }
.phone__sound-ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; }
.phone__sound-ico .ico-sound{ display:none; }
.phone__sound[aria-pressed="true"] .ico-mute{ display:none; }
.phone__sound[aria-pressed="true"] .ico-sound{ display:block; }

/* etiquetas de preço flutuando */
.tag{
  position:absolute; z-index:2;
  display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .85rem;
  background:var(--branco);
  border-radius:var(--r-md);
  box-shadow:var(--sombra-md);
  animation:flutua 6s var(--ease) infinite;
}
.tag--a{ left:-.6rem; bottom:15%;  --gir:-4deg; animation-delay:-1.2s; }
.tag--b{ right:-.6rem; top:4.5%;   --gir:4deg;  animation-delay:-3.4s; }
.tag{ transform:rotate(var(--gir,0deg)); }
.tag__label{
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--tinta-fraca);
  max-width:11.5rem; text-wrap:nowrap;
}
.tag__price{ font-size:.9rem; font-weight:600; color:var(--tinta-suave); }
.tag__price s{ color:var(--tinta-fraca); font-size:.78rem; }
.tag__price b{ color:var(--rosa-texto); font-weight:800; font-size:1.02rem; }

@keyframes flutua{
  0%,100%{ transform:rotate(var(--gir,0deg)) translateY(0); }
  50%    { transform:rotate(var(--gir,0deg)) translateY(-7px); }
}

/* ---------- 7. PROVA / MARQUEE DE OFERTAS ---------- */
.proof{ padding-block:var(--sec-y); background:var(--papel); border-block:1px solid var(--borda); }
.proof__head{ max-width:44rem; margin-bottom:clamp(1.75rem,1rem + 2vw,2.75rem); }
.proof__title{
  font-family:var(--fonte-disp); font-size:var(--fs-h2);
  font-weight:700; line-height:1.08; letter-spacing:-.015em;
  font-variation-settings:'opsz' 96; text-wrap:balance;
}
.proof__note{ margin-top:.9rem; color:var(--tinta-suave); font-size:var(--fs-sm); max-width:50ch; }

.marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex; gap:1rem; width:max-content;
  padding-block:.6rem;
  animation:desliza 42s linear infinite;
}
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
@media (hover:hover){ .marquee:hover .marquee__track{ animation-play-state:paused; } }
@keyframes desliza{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }

/* No toque, quem manda no ritmo é o dedo: vira carrossel arrastável, sem auto-play */
@media (pointer:coarse){
  .marquee{
    overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    -webkit-mask-image:none; mask-image:none;   /* sem fade quando o dedo controla */
  }
  .marquee::-webkit-scrollbar{ display:none; }
  .marquee__track{ animation:none; padding-inline:1.25rem; }
  .deal{ scroll-snap-align:center; }
}

.deal{
  flex:none; width:16.5rem;
  padding:1.1rem 1.2rem 1.25rem;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:.5rem;
}
.deal__cat{
  align-self:flex-start;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul-fundo); background:var(--nevoa-azul);
  padding:.28rem .6rem; border-radius:999px;
}
.deal__name{ font-size:.9rem; font-weight:600; line-height:1.4; color:var(--tinta); flex:1; }
.deal__price{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.deal__price s{ color:var(--tinta-fraca); font-size:.85rem; }
.deal__price b{ font-family:var(--fonte-disp); font-variation-settings:'opsz' 96;
  font-size:1.45rem; font-weight:700; color:var(--rosa-texto); letter-spacing:-.02em; }
.deal__price small{ font-size:.72rem; color:var(--tinta-fraca); font-weight:600; }

/* ---------- 8. BENTO DE BENEFÍCIOS ---------- */
.bento-sec{ padding-block:var(--sec-y); }
.bento{ display:grid; gap:1rem; }

.card{
  position:relative; overflow:hidden;
  padding:1.6rem 1.4rem 1.7rem;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-lg);
  transition:transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}
@media (hover:hover){ .card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-md); } }
.card__num{
  position:absolute; top:.35rem; right:.9rem;
  font-family:var(--fonte-disp); font-variation-settings:'opsz' 144;
  font-size:4.25rem; font-weight:700; line-height:1;
  color:var(--nevoa-azul);
  pointer-events:none; user-select:none;
}
.card__title{
  position:relative;
  font-family:var(--fonte-disp); font-variation-settings:'opsz' 60;
  font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em;
  margin-bottom:.55rem;
}
.card__text{ position:relative; color:var(--tinta-suave); font-size:.965rem; }

.card--accent{
  background:linear-gradient(155deg,var(--noite),#0A2A49 70%);
  border-color:transparent; color:#EAF4FD;
}
.card--accent .card__num{ color:rgba(255,255,255,.09); }
.card--accent .card__title{ color:#fff; }
.card--accent .card__text{ color:rgba(234,244,253,.82); }

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.05rem; position:relative; }
.chip{
  font-size:.74rem; font-weight:700; letter-spacing:.03em;
  padding:.4rem .8rem; border-radius:999px;
}
.chip--blue{ background:var(--nevoa-azul); color:var(--azul-fundo); }
.chip--pink{ background:var(--nevoa-rosa); color:var(--rosa-texto); }
.chip--lilac{ background:#EFF0FB; color:#4B57A8; }

/* ---------- 9. PASSOS ---------- */
.steps-sec{ padding-block:var(--sec-y); background:var(--papel); border-block:1px solid var(--borda); }
.steps{ display:grid; gap:1rem; counter-reset:passo; }
.step{
  position:relative;
  padding:1.5rem 1.4rem 1.6rem 4.4rem;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-lg);
}
.step__n{
  position:absolute; left:1.25rem; top:1.25rem;
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:linear-gradient(150deg,var(--azul),var(--lilas));
  color:#fff;
  font-family:var(--fonte-disp); font-variation-settings:'opsz' 40;
  font-size:1.15rem; font-weight:700; line-height:1;
  box-shadow:0 10px 22px -10px rgba(22,120,199,.85);
}
.step:nth-child(2) .step__n{ background:linear-gradient(150deg,var(--lilas),var(--rosa)); box-shadow:0 10px 22px -10px rgba(113,132,211,.85); }
.step:nth-child(3) .step__n{ background:linear-gradient(150deg,var(--rosa),var(--rosa-texto)); box-shadow:0 10px 22px -10px rgba(235,93,155,.85); }
.step__title{
  font-family:var(--fonte-disp); font-variation-settings:'opsz' 60;
  font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em; margin-bottom:.4rem;
}
.step__text{ color:var(--tinta-suave); font-size:.965rem; }

/* ---------- 10. FAQ ---------- */
/* Vizinha do CTA e no mesmo fundo: o padding cheio dos dois lados abria um
   vão morto de 130px no celular. Cada uma entra com metade. */
.faq-sec{ padding-block:var(--sec-y) calc(var(--sec-y) * .5); }
.faq__grid{ display:grid; gap:clamp(1.75rem,1rem + 3vw,3.5rem); }
.faq__aside{ margin-top:1rem; color:var(--tinta-suave); font-size:.95rem; }
.link-ig{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.8rem; padding:.7rem 1.05rem; min-height:2.75rem;
  font-size:.875rem; font-weight:700; text-decoration:none;
  color:var(--rosa-texto); background:var(--nevoa-rosa);
  border-radius:999px;
  transition:background-color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
@media (hover:hover){ .link-ig:hover{ background:#FFE1EE; transform:translateY(-1px); } }
.ico-ig{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.8; }

.faq{ display:grid; gap:.7rem; }
.qa{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--t-rapido) var(--ease);
}
.qa[open]{ border-color:#C9DFF3; }
.qa__q{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:3.4rem; padding:1rem 1.15rem;
  font-weight:600; font-size:1rem; line-height:1.4;
  cursor:pointer; list-style:none;
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__ico{ position:relative; flex:none; width:1.1rem; height:1.1rem; }
.qa__ico::before,.qa__ico::after{
  content:''; position:absolute; inset:50% 0 auto 0;
  height:2px; border-radius:2px; background:var(--rosa);
  transition:transform var(--t-normal) var(--ease);
}
.qa__ico::after{ transform:rotate(90deg); }
.qa[open] .qa__ico::after{ transform:rotate(0deg); }
.qa__a{ padding:0 1.15rem 1.15rem; color:var(--tinta-suave); font-size:.95rem; }
@media (hover:hover){ .qa__q:hover{ color:var(--rosa-texto); } }

/* ---------- 11. CTA FINAL ---------- */
.cta{ padding-block:calc(var(--sec-y) * .5) var(--sec-y); }
.cta__box{
  position:relative; overflow:hidden;
  padding:clamp(2.5rem,1.6rem + 3.5vw,4rem) clamp(1.75rem,1.1rem + 2.6vw,3.5rem) clamp(2.75rem,1.7rem + 3.5vw,4rem);
  text-align:center;
  color:#fff;
  background:linear-gradient(158deg,#164E80 0%,#123D68 46%,#0B2942 100%);
  border-radius:var(--r-xl);
  box-shadow:var(--sombra-lg);
}
.cta__glow{
  position:absolute; inset:-40% -10% auto -10%; height:150%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 84% 12%, rgba(235,93,155,.55), rgba(235,93,155,0) 68%),
    radial-gradient(42% 46% at 8% 86%, rgba(22,120,199,.55), rgba(22,120,199,0) 70%);
}
.cta__box > *:not(.cta__glow){ position:relative; z-index:1; }
.cta__kicker{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#FFC2DC; margin-bottom:.8rem;
}
.cta__title{
  font-family:var(--fonte-disp); font-variation-settings:'opsz' 144;
  font-size:var(--fs-h2); font-weight:700; line-height:1.05; letter-spacing:-.022em;
  text-wrap:balance; max-width:20ch; margin-inline:auto;
}
.cta__title em{ color:#FFB4D3; background-image:linear-gradient(transparent 62%, rgba(255,180,211,.26) 62%); }
.cta__lead{
  margin:1.05rem auto 1.9rem;
  max-width:42ch; color:rgba(234,244,253,.84);
  font-size:1.02rem;
}
.cta .btn--lg{ max-width:26rem; margin-inline:auto; }
.cta__micro{ margin-top:1rem; font-size:var(--fs-sm); color:rgba(234,244,253,.66); }

/* ---------- 12. RODAPÉ ---------- */
.foot{ padding:clamp(2.5rem,1.5rem + 3vw,4rem) 0 calc(6.5rem + env(safe-area-inset-bottom)); background:var(--papel); border-top:1px solid var(--borda); }
.foot__inner{ display:grid; gap:1.4rem; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; margin-inline:-.55rem; }
.foot__nav a{
  display:inline-flex; align-items:center; min-height:2.75rem; padding-inline:.55rem;
  font-size:.9rem; font-weight:600; color:var(--tinta-suave); text-decoration:none;
  transition:color var(--t-rapido) var(--ease);
}
@media (hover:hover){ .foot__nav a:hover{ color:var(--rosa-texto); } }
.foot__legal{ font-size:.8rem; line-height:1.65; color:var(--tinta-fraca); max-width:62ch; }
.foot__copy{ font-size:.8rem; color:var(--tinta-fraca); }

/* ---------- 13. DOCK MOBILE ---------- */
.dock{
  position:fixed; z-index:45;
  left:0; right:0; bottom:0;
  padding:.7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(234,244,253,.98) 62%, rgba(234,244,253,0));
  transform:translateY(130%);
  transition:transform var(--t-normal) var(--ease);
}
.dock.is-on{ transform:translateY(0); }
.dock.is-off{ transform:translateY(130%); }
.btn--dock{ width:100%; min-height:3.4rem; font-size:1rem; }

/* ---------- 14. REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay:var(--atraso,0ms);
}

/* ---------- 15. BREAKPOINTS ---------- */
@media (min-width:600px){
  .btn--lg{ width:auto; }
  .hero__micro{ text-align:left; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card--wide{ grid-column:1 / -1; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .step{ padding:4.6rem 1.4rem 1.6rem; }
  .step__n{ width:2.9rem; height:2.9rem; font-size:1.3rem; top:1.5rem; left:1.4rem; }
  .deal{ width:18rem; }
}

@media (min-width:900px){
  :root{ --shell:min(100% - 4rem, 76rem); }
  .topbar__cta{ display:inline-flex; }
  .dock{ display:none; }
  .foot{ padding-bottom:clamp(2.5rem,1.5rem + 3vw,4rem); }

  .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr); align-items:center; }
  .hero__actions{ display:flex; align-items:center; gap:1.15rem; max-width:none; }
  .hero__micro{ margin-top:0; max-width:14rem; }
  .phone{ width:min(100%,21rem); }
  .tag--a{ left:-2.75rem; }
  .tag--b{ right:-2.75rem; }

  .bento{ grid-template-columns:repeat(3,1fr); }
  .card--wide{ grid-column:span 2; grid-row:span 1; }
  .card{ padding:1.9rem 1.7rem 2rem; }

  .faq__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }
  .faq-sec .sec-head{ position:sticky; top:6rem; margin-bottom:0; }
}

@media (min-width:1200px){
  .card--wide{ grid-column:span 2; }
}

/* ---------- 16. MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; overflow-x:auto; }
  .marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---------- 17. IMPRESSÃO ---------- */
@media print{
  .dock,.topbar,.phone__sound,.marquee{ display:none !important; }
  body{ background:#fff; }
}