/* ===========================================================
   Grávida Informada e Parto Preparado — design
   Base: wireframe aprovado (04-wireframe/gravida-informada).
   Tokens e sombras do design system, iguais aos do Guia.
   O que o design acrescenta ao wireframe está na secção
   DESIGN, no fim — as caixas tracejadas dão lugar a
   fotografia, e entram os estados de interação.
   =========================================================== */

:root{
  --peso-titulo:400;

  --branco:#FFFFFF; --creme:#FDF9F5; --bege:#F5EDE4; --bege-fundo:#EFE3D8;
  --rosa-pastel:#FBE3EC; --lilas-pastel:#EFE6F7; --lavanda:#D6C9EC;
  --rosa-neon:#FF2E8B; --rosa-acao:#E01271; --rosa-acao-hover:#B80E5C;
  --rosa-velho:#B56B84; --enfase:#8E4E64;
  --tinta:#2E2230; --tinta-media:#5C4C5E;
  --raio-md:16px; --raio-lg:24px; --raio-xl:32px; --pill:999px;
  --sombra-sm:0 1px 2px rgba(46,34,48,.06);
  --sombra-md:0 4px 16px rgba(46,34,48,.08);
  --sombra-lg:0 12px 32px rgba(46,34,48,.10);
  --sombra-cta:0 6px 20px rgba(224,18,113,.28);

  /* Grid definido antes de começar, como no registo de ajustes:
     frame 1440 · conteúdo 1216 · margens (1440-1216)/2 = 112 */
  --largura:1216px;
  --gutter:clamp(20px,7.8vw,112px);
  --ritmo:80px; --ritmo-junto:120px;
  --texto:680px;
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinta);
  font:400 16px/1.6 'DM Sans',system-ui,sans-serif;overflow-x:clip}
img{max-width:100%;display:block}

h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo);
  margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:32px;max-width:15ch;line-height:1.1}
h2{font-size:24px;max-width:26ch}
h3{font-size:24px}
p{margin:0}
/* pretty evita viúvas — a última linha nunca fica com uma só palavra */
p,li,span,summary,.lead,.legenda,figcaption{text-wrap:pretty}
.lead{font-size:16px;color:var(--tinta-media)}
.peq{font-size:12px}
i{font-style:italic;color:var(--enfase)}
.escuro i,.remate i{color:var(--rosa-neon)}
/* Ênfase a 600, como no Guia — o <b> herda 700 do browser, que não existe
   na escala usada nas páginas. */
b,strong{font-weight:600}

.faixa{padding:var(--ritmo) var(--gutter)}
.interior{max-width:var(--largura);margin:0 auto}
.centro{text-align:center;margin-left:auto;margin-right:auto}
.medida-c{max-width:var(--texto);margin:0 auto}
.creme{background:var(--creme)}
.bege{background:var(--bege)}
.bege-fundo{background:var(--bege-fundo)}
.pastel{background:var(--rosa-pastel)}
.escuro{background:var(--tinta);color:var(--branco)}
.escuro .lead{color:#CFC3D1}

.etq{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--enfase);background:rgba(142,78,100,.09);
  padding:9px 18px;border-radius:var(--pill);margin:0 0 16px}
.escuro .etq{color:var(--lavanda);background:rgba(255,255,255,.1)}
.sub{margin-top:12px;max-width:48ch;margin-left:auto;margin-right:auto}

.cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  padding:16px 32px;border:none;border-radius:var(--pill);background:var(--rosa-acao);
  color:var(--branco);font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:var(--sombra-cta);cursor:pointer;margin-top:32px;
  transition:background .18s,transform .18s}
.cta:hover{background:var(--rosa-acao-hover);transform:translateY(-1px)}
.cta--largo{width:100%}

/* ─── blocos de imagem: no wireframe são caixas vazias com etiqueta ───────
   Nunca a fotografia real. A imagem entra no design, depois de isto ser
   aprovado. Ver a regra em CLAUDE.md. */
.img{background:var(--bege-fundo);border:1.5px dashed var(--rosa-velho);
  border-radius:var(--raio-lg);display:grid;place-items:center;text-align:center;
  color:var(--enfase);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:16px;min-height:120px}

/* Ícones de linha do programa: rosa antigo, acento neon e base pastel. */
.ic{display:block;background:var(--rosa-pastel);
  border:1px solid rgba(181,107,132,.24);box-sizing:border-box;
  border-radius:12px;width:44px;height:44px;flex:none;min-height:0;padding:9px;
  aspect-ratio:1;object-fit:contain}
.escuro .img{background:rgba(255,255,255,.06);border-color:var(--lavanda);
  color:var(--lavanda)}

/* 01 · Hero ─────────────────────────────────────────────────────────────── */
/* A fotografia é o fundo da faixa: a Daniela ocupa a direita da imagem e o
   texto assenta no espaço claro da esquerda. Por isso o conteúdo ocupa só
   metade da largura em ecrã grande. */
/* Fotografia de fundo, com a figura à direita e a zona clara à esquerda
   para o texto. `auto 100%` em vez de `cover`: a imagem cabe sempre na
   altura toda e ancora-se à direita, por isso a cabeça nunca é cortada em
   ecrãs largos. O que sobra à esquerda continua num gradiente que copia a
   coluna esquerda da fotografia — sem emenda visível. */
/* Três camadas: o vulto da Daniela colado à esquerda, a figura com a bola
   colada à direita e, entre as duas, o degradê do fundo da própria fotografia.
   Assim o vulto fica sempre no canto e não boia a meio em ecrã largo — que é
   o que acontecia quando a faixa era uma imagem só, ancorada à direita. As
   peças dissolvem-se em alpha nas bordas viradas para o meio. */
.hero{padding:var(--ritmo) var(--gutter);min-height:680px;display:grid;
  align-items:center;background-color:#FDF1EA;background-repeat:no-repeat;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,100% 100%;
  background-image:url(../assets/img/bg-prog-esq.v1.jpg),url(../assets/img/bg-prog-dir.v1.jpg),linear-gradient(#FCF1EA,#FDF2EB 30%,#FDF1EA 60%,#FDEFE9);
  background-image:url(../assets/img/bg-prog-esq.v1.webp),url(../assets/img/bg-prog-dir.v1.webp),linear-gradient(#FCF1EA,#FDF2EB 30%,#FDF1EA 60%,#FDEFE9);
  background-image:-webkit-image-set(url(../assets/img/bg-prog-esq.v1.webp) 1x, url(../assets/img/bg-prog-esq.v1@2x.webp) 2x),
    -webkit-image-set(url(../assets/img/bg-prog-dir.v1.webp) 1x, url(../assets/img/bg-prog-dir.v1@2x.webp) 2x),linear-gradient(#FCF1EA,#FDF2EB 30%,#FDF1EA 60%,#FDEFE9);
  background-image:image-set(url(../assets/img/bg-prog-esq.v1.webp) 1x, url(../assets/img/bg-prog-esq.v1@2x.webp) 2x),
    image-set(url(../assets/img/bg-prog-dir.v1.webp) 1x, url(../assets/img/bg-prog-dir.v1@2x.webp) 2x),linear-gradient(#FCF1EA,#FDF2EB 30%,#FDF1EA 60%,#FDEFE9)}
.hero__g{max-width:var(--largura);margin:0 auto;display:grid;gap:40px;
  align-items:center}
/* A bola começa a cerca de 744px da margem direita, e o texto tem de parar
   antes dela: 92.2vw-790px cobre a faixa em que a goteira ainda cresce com o
   ecrã, 50vw-175px a faixa em que o contentor já está centrado, e os 48%
   travam a medida de leitura quando há largura de sobra. Abaixo de 1360 o
   texto fica tão estreito que ganha linhas, o hero cresce em altura, a imagem
   alarga com ela e a bola avança ainda mais — daí o véu. */
@media(min-width:1360px){
  .hero__g > div{max-width:min(48%,calc(92.2vw - 790px),calc(50vw - 175px))}
  .hero h1{max-width:none}
}
.hero .lead{margin-top:16px}

/* 01b · Faixa deslizante ────────────────────────────────────────────────
   Técnica da referência G4: uma pista com o texto repetido e animação de
   translação de -50%. Metade do conteúdo é duplicado, por isso o salto no
   fim do ciclo é invisível. */
.faixa-desliza{background:var(--rosa-velho);overflow:hidden;padding:14px 0;
  display:flex;user-select:none}
.desliza__pista{display:flex;flex:none;gap:0;align-items:center;
  animation:desliza 38s linear infinite}
.desliza__pista span{display:inline-flex;align-items:center;white-space:nowrap;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--branco)}
.desliza__item{gap:9px}
.desliza__ico{display:block;width:18px;height:18px;flex:none;
  filter:brightness(0) invert(1);opacity:.9}
.desliza__pista b{color:var(--rosa-neon);font-weight:600;margin:0 4px}
.desliza__sep{color:var(--rosa-pastel);margin:0 22px;opacity:.7}
@keyframes desliza{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.desliza__pista{animation:none}}

/* 02 · Dores ──────────────────────────────────────────────────────────────
   Padrão da Cátia (acervo Portugal): título à esquerda, lista à direita em
   barras. Resolve o cartão órfão da grelha 2x2 com 5 itens, e o título deixa
   de competir com os cartões pelo centro da atenção. */
.dores__g{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media(min-width:900px){.dores__g{grid-template-columns:.85fr 1fr}}
.dores{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:d}
.dores li{counter-increment:d;background:var(--branco);border-radius:var(--raio-md);
  box-shadow:var(--sombra-sm);padding:20px 24px;display:grid;
  grid-template-columns:auto 1fr;gap:16px;align-items:center}
.dores li::before{content:counter(d,decimal-leading-zero);
  font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--rosa-velho);
  line-height:1}
.dores__t{position:sticky;top:40px}
.dores__foto{display:block;margin-top:32px;width:100%;max-width:487px}
.dores__foto img{display:block;width:100%;height:auto;border-radius:var(--raio-md);
  /* sombra em camadas, medida no Figma: cresce em x e y, luz do canto superior esquerdo */
  box-shadow:4px 5px 14px rgba(0,0,0,.06),
             15px 20px 25px rgba(0,0,0,.05),
             35px 45px 34px rgba(0,0,0,.03),
             62px 80px 40px rgba(0,0,0,.01)}
@media(max-width:899px){.dores__foto{display:none}}
.remate{margin:48px auto 0;background:var(--bege-fundo);
  border-radius:var(--raio-xl);padding:36px clamp(24px,4vw,48px);
  text-align:center;max-width:820px}
.remate b{color:var(--enfase)}

/* 03 · Promessas ────────────────────────────────────────────────────────── */
.promessas{list-style:none;padding:0;margin:32px auto 0;display:grid;gap:12px;
  max-width:var(--texto)}
.promessas li{display:grid;grid-template-columns:auto 1fr;
  gap:18px;align-items:start;padding:24px 0;line-height:1.6;
  border-bottom:1px solid rgba(46,34,48,.1)}
.promessas .ic{width:36px;height:36px;border-radius:10px;margin-top:-5px;padding:7px}
/* num item de várias linhas o ícone ao topo lê-se desalinhado — centra-se */
.promessas li:has(span:not(.ic)):nth-child(2){align-items:center}
.promessas li:nth-child(2) .ic{margin-top:0}

/* 04 · O que inclui ─────────────────────────────────────────────────────── */
.inclui{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:16px}
@media(min-width:900px){.inclui{grid-template-columns:repeat(3,1fr)}}
.inclui li{background:var(--branco);border-radius:var(--raio-lg);
  box-shadow:var(--sombra-sm);padding:26px 24px 24px}
.inclui .ic{margin-bottom:16px}
.inclui h3{font-size:18px;margin-bottom:10px}
.kit h3{font-size:24px}
.inclui--larga{grid-column:1/-1}
.kit{display:grid;gap:32px;align-items:center}
@media(min-width:760px){.kit{grid-template-columns:1fr 1fr}}

/* lista dos 19 vídeos */
.videos__g{display:grid;column-gap:clamp(24px,4vw,48px);row-gap:18px;
  align-items:start}
.videos__g > *{align-self:start}
@media(min-width:900px){.videos__g{grid-template-columns:.8fr 1fr}}
/* o título fica preso enquanto a lista rola — pedido do Gabriel */
.videos__t{position:sticky;top:40px}
.videos__t h3{font-size:24px}
.videos{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:8px;counter-reset:v}
/* fechada mostra 8; o botão liberta as 19 */
.videos:not(.aberta) li:nth-child(n+5){display:none}
/* fundos alternados, tons claros — dá ritmo sem pesar */
.videos li{background:var(--creme);box-shadow:none;
  border:1px solid rgba(46,34,48,.07)}
.videos li:nth-child(even){background:transparent}
.videos li{counter-increment:v;display:grid;grid-template-columns:auto 1fr;
  gap:14px;font-size:14px;color:var(--tinta-media);
  padding:14px 18px;border-radius:10px;align-items:center}
.videos li::before{content:counter(v,decimal-leading-zero);
  color:var(--rosa-velho);font-weight:600;font-size:12px;padding-top:2px}
.verMais{margin:0;display:block;grid-column:2;justify-self:start;align-self:start;
  background:none;border:0;
  color:var(--enfase);font:inherit;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;cursor:pointer;padding:0}
.videos__t .ic{margin-bottom:16px}

/* Investimento em duas colunas: preço à esquerda, garantia à direita.
   Empilha abaixo dos 900px. */
.investimento__g{display:grid;gap:24px;margin-top:32px;align-items:start;
  max-width:1000px;margin-left:auto;margin-right:auto}
@media(min-width:900px){.investimento__g{grid-template-columns:1.05fr .95fr}}

/* Garantia — coluna da direita: selo por cima, texto por baixo, tudo centrado. */
.garantia{display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;background:var(--bege-fundo);border-radius:var(--raio-xl);
  padding:40px 32px}
.garantia__selo{width:160px;height:160px;flex:none;display:block;object-fit:contain}
.garantia__t h3{font-size:24px;margin-bottom:12px}
.garantia__t p{font-size:16px;line-height:1.6;color:var(--tinta-media)}

/* 06 · Investimento — igual à caixa-preco do Guia: só a logo no topo,
   sem mockup a sangrar por cima. */
.preco{background:var(--branco);border-radius:var(--raio-xl);
  box-shadow:var(--sombra-lg);padding:clamp(32px,5vw,56px);text-align:center;
  max-width:none;margin:0}
.preco .logo--card{margin:0 auto 24px}
.preco__v{font-family:'Fraunces',serif;font-size:48px;
  line-height:1;color:var(--tinta);margin:8px 0}
.preco__d{font-size:14px;color:var(--tinta-media)}
.preco .preco__lista{text-align:left;margin:32px 0 0;padding:32px 0 32px;
  border-top:1px solid rgba(46,34,48,.1);
  border-bottom:1px solid rgba(46,34,48,.1);gap:14px}
.preco__depois{margin-top:28px;font-size:14px;color:var(--tinta-media)}
.preco .cta{margin-top:32px}

/* 07 · Prova social — carrossel horizontal, como no Guia ──────────────────
   Molduras de proporção fixa: os prints têm tamanhos díspares (1,04 · 1,52 ·
   3,15 · 1,16) e não se cortam nem se esticam. Cada um assenta na sua caixa,
   com fundo tirado da cor do próprio print. Ver CLAUDE.md. */
.prova{display:flex;gap:16px;margin-top:32px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 0 16px;
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
  padding-left:var(--gutter);padding-right:var(--gutter)}
.prova .img{flex:0 0 280px;aspect-ratio:3/4;min-height:0;scroll-snap-align:start}
.prova__nav{display:flex;justify-content:center;gap:12px;margin-top:22px}
.prova__seta{width:44px;height:44px;border-radius:50%;border:1px solid rgba(46,34,48,.16);
  background:var(--branco);color:var(--tinta);font-family:inherit;font-size:18px;
  cursor:pointer;display:grid;place-items:center;transition:background .18s,opacity .18s}
.prova__seta:hover:not(:disabled){background:var(--rosa-pastel)}
.prova__seta:disabled{opacity:.3;cursor:default}

/* 08 · Quem sou ────────────────────────────────────────────────────────── */
.sobre{display:grid;gap:clamp(24px,4vw,56px);align-items:stretch}
@media(min-width:900px){
  /* a fotografia acompanha a altura do texto, em vez de impor a sua */
  .sobre .foto-sec{height:100%}
  .sobre .foto-sec img{height:100%;aspect-ratio:auto}
}
@media(min-width:900px){.sobre{grid-template-columns:.9fr 1.1fr}}
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:14px;line-height:1.55}
.check-icon{display:block;width:26px;height:26px;box-sizing:border-box;padding:5px;
  border-radius:8px;background:var(--rosa-pastel);
  border:1px solid rgba(181,107,132,.24);margin-top:-2px}
.preco__lista .check-icon{width:24px;height:24px;border-radius:7px;padding:5px}
.sobre p+p{margin-top:16px}

/* 09 · FAQ ─────────────────────────────────────────────────────────────── */
.faq{margin-top:32px}
.faq p{color:var(--tinta-media);margin:0}
.faq p a{color:var(--enfase);text-underline-offset:3px}

/* 10 · Fecho ───────────────────────────────────────────────────────────── */
.fecho h2{margin:0 auto;max-width:22ch}
.fecho .lead{margin-top:16px}
.fecho__p{font-family:'Fraunces',serif;font-size:24px;margin-top:24px;
  color:var(--rosa-neon)}

.rodape{padding-top:32px;padding-bottom:32px}
.rodape__g{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center}
.rodape a{text-decoration:none;color:var(--lavanda)}
.rodape a:hover{text-decoration:underline;text-underline-offset:4px}
.legenda{font-size:12px;color:#CFC3D1}
@media(min-width:900px){
  h1{font-size:48px}
  h2{font-size:32px}
  .preco__v{font-size:64px}
}
@media(max-width:759px){
  .rodape__g{flex-direction:column;align-items:center;text-align:center;gap:8px}
}

@media(min-width:900px){
  h1{font-size:48px}
  h2{font-size:32px}
  .preco__v{font-size:64px}
}
@media(max-width:759px){
  :root{--ritmo:56px;--ritmo-junto:72px}

  /* hero: 24px do topo, como no Guia, e tudo centrado */
  .hero{padding-top:24px}
  .hero__g{text-align:center;justify-items:center}
  .logo--hero{margin-left:auto;margin-right:auto}
  .hero h1,.hero .lead{text-align:center}
  .hero h1{max-width:none;margin-left:auto;margin-right:auto}
  .hero .lead{margin-left:auto;margin-right:auto}

  /* dores: cabeçalho centrado */
  .dores__t{text-align:center;position:static}
  .dores__t .etq{margin-left:auto;margin-right:auto}
  .dores__t h2{margin-left:auto;margin-right:auto}

  /* vídeos: segue o mesmo eixo esquerdo dos três cartões anteriores */
  .inclui--larga{padding:22px 20px}
  .videos__g{grid-template-columns:1fr;row-gap:14px}
  .videos__t{position:static;text-align:left}
  .videos__t .ic{margin:0 0 12px}
  /* no telemóvel os blocos largos acompanham os 18px dos cartões */
  .videos__t h3,.kit h3{font-size:18px;margin-left:0;margin-right:0}
  .videos__t h3{margin-bottom:8px}
  .videos li{padding:12px 14px;gap:12px}
  .verMais{grid-column:1;justify-self:start;margin-top:2px}

  /* kit: a fotografia vem primeiro */
  .kit{grid-template-columns:1fr}
  .kit > .img{order:-1}

  /* promessas: ícone por cima e texto centrado, como as outras secções */
  .promessas li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .promessas li:nth-child(2){align-items:center}


  /* preço e garantia ficam próximos do título, sem a margem da versão antiga */
  .investimento__g{margin-top:24px;gap:16px}
  .preco{margin-top:0}
  .preco__kit{width:160px}

  /* o símbolo acompanha o centro óptico de textos com uma ou mais linhas */
  .checks li{align-items:center}
  .check-icon{margin-top:0}
  /* Em ecrã estreito a imagem é cortada ao centro e a Daniela fica por baixo
     do texto. Um véu que esbate em cima — onde assenta o texto — e abre em
     baixo mantém a fotografia sem sacrificar a leitura. */
  .hero{min-height:0}
}

/* ── Hero: cada fotografia na gama de larguras para que foi desenhada ──────
   Até 640 entra a versão vertical, com a Daniela em cima e o texto por baixo.
   A imagem termina no mesmo bege da faixa, por isso onde ela acaba a cor
   continua sem emenda; o padding do topo desce o conteúdo para logo abaixo
   da figura, que ocupa 87% da altura da imagem (0,87 × 1,287 ≈ 1,12 × largura). */
@media(max-width:640px){
  /* Fotografia vertical própria: a figura ocupa o topo e o texto assenta na
     zona lisa por baixo. A base da imagem é exactamente o --bege da faixa,
     por isso onde ela acaba a cor continua sem emenda. A imagem mede 0,96 ×
     a largura e a figura ocupa 85% dela — daí os 81vw de padding. */
  .hero{background-color:var(--bege);background-position:center top;
    background-size:100% auto;padding-top:81vw;padding-bottom:36px;
    background-image:url(../assets/img/bg-prog-mob.v1.jpg);
    background-image:url(../assets/img/bg-prog-mob.v1.webp);
    background-image:-webkit-image-set(
      url(../assets/img/bg-prog-mob.v1.webp) 1x, url(../assets/img/bg-prog-mob.v1@2x.webp) 2x);
    background-image:image-set(
      url(../assets/img/bg-prog-mob.v1.webp) 1x, url(../assets/img/bg-prog-mob.v1@2x.webp) 2x)}
  .hero__g{justify-items:center}

  /* ritmo mais curto no hero */
  .hero .logo--hero{height:62px;margin-bottom:10px}
  /* a etiqueta do hero cabe numa linha: o texto tem 36 caracteres e a
     esse tamanho pedia 365px, quando o ecrã mais estreito só dá 304 */
  .hero .etq{margin-bottom:2px;font-size:11px;letter-spacing:.1em;
    padding:8px 14px;white-space:nowrap}
  .hero h1{margin-top:10px}
  .hero .lead{margin-top:12px}
  .hero .cta{margin-top:22px}
}

/* Entre 641 e 1359 a vertical ficaria enorme e a horizontal ainda não tem
   largura para o texto ao lado da figura: horizontal com um véu que garante
   leitura, e a medida travada em 720px para as linhas não esticarem. */
@media(min-width:641px) and (max-width:1359px){
  /* width:100% porque o margin:0 auto do .hero__g, sendo ele grid item,
     desliga o stretch e encolhe-o até ao conteúdo, centrando-o */
  .hero__g{width:100%}
  .hero__g > div{max-width:720px}
  .hero{background-position:62% center;background-size:cover;
    background-image:linear-gradient(to bottom,
      rgba(246,234,226,.95) 0%, rgba(246,234,226,.9) 52%, rgba(246,234,226,.45) 100%),
      url(../assets/img/bg-prog.v1.webp);
    background-image:linear-gradient(to bottom,
      rgba(246,234,226,.95) 0%, rgba(246,234,226,.9) 52%, rgba(246,234,226,.45) 100%),
      image-set(url(../assets/img/bg-prog.v1.webp) 1x,
                url(../assets/img/bg-prog.v1@2x.webp) 2x)}
}

/* ── Entrada do hero ──────────────────────────────────────────────────────
   Cascata ao carregar: cada elemento sobe e aparece, com um ligeiro
   overshoot no fim — a mesma sensação do back.out que o Guia usa nos
   reveals de scroll, mas em CSS, porque isto corre uma vez e não justifica
   carregar uma biblioteca. A imagem entra depois do texto, um pouco mais
   lenta e com escala, para o olhar assentar primeiro na promessa. */
@keyframes heroSobe{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.hero__g > div > *{animation:heroSobe .75s cubic-bezier(.34,1.26,.64,1) both}
.hero__g > div > *:nth-child(1){animation-delay:.08s}
.hero__g > div > *:nth-child(2){animation-delay:.18s}
.hero__g > div > *:nth-child(3){animation-delay:.26s}
.hero__g > div > *:nth-child(4){animation-delay:.34s}
.hero__g > div > *:nth-child(5){animation-delay:.42s}
.hero__g > div > *:nth-child(6){animation-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .hero__g > div > *{animation:none}
}

section{position:relative}

/* ===========================================================
   DESIGN — o que separa isto do wireframe
   =========================================================== */

/* --- fotografia no lugar das caixas tracejadas --- */
.img{border:0;background:var(--bege-fundo);overflow:hidden;position:relative;
  color:transparent;font-size:0;padding:0;display:block}
/* .vazia repõe o padding e o display:grid próprios, para centrar o texto do placeholder */
.img picture{display:block;width:100%;height:100%}
.img img{width:100%;height:100%;object-fit:cover;display:block}
.img.vazia{border:1px dashed var(--rosa-velho);color:var(--enfase);
  font:600 12px/1.6 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  display:grid;place-items:center;text-align:center;padding:20px}


/* --- fotografia de secção, igual ao Guia: sem moldura, sombra suave --- */
.foto-sec{display:block;overflow:hidden;border-radius:var(--raio-lg);
  background:var(--bege-fundo);box-shadow:var(--sombra-md)}
.foto-sec img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/2;display:block}
.foto-sec--alta img{aspect-ratio:3/4}

/* --- logótipo --- */
.env{display:contents}
/* dentro de um flex, o <source> de um <picture display:contents> conta como
   item e rouba um slot ao space-between — daí o rodapé sair desalinhado */
.env > source{display:none}
/* kit de materiais: a foto já vem sem fundo (alfa=0) — mostra-se tal como
   está, sem a caixa bege nem o raio que as outras fotos usam. */
.kit-foto{background:none;border-radius:0;box-shadow:none}

/* --- logótipo: mesmas proporções do Guia --- */
.logo{display:block;height:auto;max-width:100%}
.logo--hero{height:88px;width:auto;margin-bottom:24px}
.logo--card{height:80px;width:auto;margin:0 auto 20px}
.logo--rodape{height:56px;width:auto}
@media(max-width:759px){
  .logo--hero{height:72px;margin:0 auto 12px}
  .logo--card{height:68px}
  .logo--rodape{height:40px}
}

/* --- botões: estado de interação --- */
/* hover do CTA: gradiente que desliza da esquerda, igual ao Guia.
   O pseudo-elemento fica por cima do fundo e por baixo do texto — daí o
   <span class="cta__t">, sem ele o gradiente tapava as letras. */
.cta{box-shadow:var(--sombra-cta);position:relative;overflow:hidden;isolation:isolate;
  transition:background .18s,transform .18s}
.cta::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  border-radius:inherit;background:linear-gradient(to left,var(--rosa-neon),var(--rosa-acao-hover));
  transition:left .3s cubic-bezier(.4,0,.2,1)}
.cta__t{position:relative;z-index:1}
.cta:hover::before,.cta:focus-visible::before{left:0}
.cta:hover{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){
  .cta{transition:none}
  .cta::before{transition:none}
  .cta:hover{transform:none}
}

/* --- cartões ganham profundidade --- */
.inclui > li,.dores li,.preco{box-shadow:var(--sombra-sm)}
.preco{box-shadow:var(--sombra-lg)}
.inclui > li{transition:transform .2s ease,box-shadow .2s ease}
.inclui > li:hover{transform:translateY(-3px);box-shadow:var(--sombra-md)}

/* --- prova social: os prints são quase brancos, como o fundo da faixa
   creme por trás; sem contorno ficam a fundir-se. --- */
.prova__print{border:1px solid rgba(46,34,48,.08)}

/* --- FAQ: mesma estrutura do Guia — botão acessível e "+" que vira "−" --- */
.faq__item{background:var(--branco);border-radius:var(--raio-md);margin-bottom:10px;
  box-shadow:var(--sombra-sm);overflow:hidden}
.faq__b{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16px;font-weight:600;color:inherit}
.faq__c{height:0;overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1)}
.faq__i{overflow:hidden}
.faq__i p{padding:0 24px 22px;color:var(--tinta-media);margin:0}

/* o "+" são duas barras: ao abrir, a vertical roda 90° e sobrepõe-se à outra,
   ficando um "−". Trocar o content não era animável. */
.faq__mais{position:relative;flex:none;width:16px;height:16px}
.faq__mais::before,.faq__mais::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:2px;border-radius:2px;background:var(--rosa-acao);
  translate:-50% -50%;transition:rotate .42s cubic-bezier(.4,0,.2,1)}
.faq__mais::after{rotate:90deg}
.faq__item.aberto .faq__mais::after{rotate:0deg}
.faq__b:hover .faq__mais::before,.faq__b:hover .faq__mais::after{background:var(--rosa-acao-hover)}

/* --- entradas no scroll: o mesmo ritmo visual da página do Guia --- */
.js .faixa .etq,
.js .faixa h2,
.js .faixa .sub,
.js .faixa .lead,
.js .sobre > div > p,
.js .fecho > .interior > p,
.js .faixa > .interior > .centro > .cta,
.js .verMais,
.js .remate{opacity:.001;transform:translateY(96px)}
.js .dores > *,
.js .promessas > *,
.js .inclui > *,
.js .prova > *,
.js .faq > *,
.js .checks > *{opacity:.001;transform:translateY(78px)}
.js .inclui .lead{opacity:1;transform:none}
.js .videos__t .ic,
.js .videos__t h3,
.js .videos__t .lead,
.js .videos > *,
.js .videos__g > .verMais{opacity:.001;transform:translateY(34px)}
.js .foto-sec{clip-path:inset(100% 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .js .faixa .etq,.js .faixa h2,.js .faixa .sub,.js .faixa .lead,
  .js .sobre > div > p,.js .fecho > .interior > p,
  .js .faixa > .interior > .centro > .cta,.js .verMais,.js .remate,
  .js .dores > *,.js .promessas > *,.js .inclui > *,.js .prova > *,
  .js .faq > *,.js .checks > *,.js .videos__t .ic,.js .videos__t h3,
  .js .videos__t .lead,.js .videos > *,.js .videos__g > .verMais,
  .js .foto-sec{
    opacity:1;transform:none;clip-path:none
  }
}

/* Lenis substitui apenas o comportamento do scroll; sem a biblioteca, o
   comportamento nativo continua intacto. */
html.lenis{height:auto;scroll-behavior:auto!important}
html.lenis [data-lenis-prevent]{overscroll-behavior:contain}
html.lenis.lenis-stopped{overflow:clip}
html.lenis iframe{pointer-events:none}

/* --- acessibilidade --- */
:focus-visible{outline:2px solid var(--rosa-neon);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── Consentimento de cookies (RGPD) ──────────────────────────────────
   Só existe na entrega: no build a página nunca recebe tráfego real. */
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:var(--largura);
  margin:0 auto;background:var(--branco);border:1.5px solid var(--lavanda);border-radius:var(--raio-lg);
  padding:20px;box-shadow:var(--sombra-lg);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between}
.cookies[hidden]{display:none}
.btn-sec{min-height:44px;padding:12px 20px;border-radius:var(--pill);border:1.5px solid var(--rosa-acao);
  background:transparent;color:var(--rosa-acao);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn-sec:hover{background:var(--rosa-pastel)}
/* O Recusar e o Aceitar têm de ter a mesma caixa. O .cta já é inline-flex;
   o .btn-sec era um button normal e, como item de um pai flex sem
   align-items, esticava-se à altura da barra: 76px contra 44px. Isto
   fica FORA da media query de propósito — a regra equivalente lá dentro
   só valia até 640px, e o problema aparecia era no ecrã grande. */
.cookies .btn-sec,.cookies .cta{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:44px}
@media(max-width:640px){
  /* O CTA do hero está a 836px numa dobra de 844: a barra a 192px cobria-o
     por inteiro. Compactada, deixa-o visível pela metade — e desaparece ao
     primeiro toque, para não voltar. */
  .cookies{left:8px;right:8px;bottom:8px;padding:14px;gap:10px}
  .cookies .legenda{font-size:12px;line-height:1.45;flex:1 1 100%}
  .cookies .btn-sec,.cookies .cta{min-height:44px;padding:10px 18px;font-size:13px}
  .cookies > div{width:100%;justify-content:flex-end}
}
@media(max-width:640px){.so-largo{display:none}}