/* Estruturas do acervo português. Tipografia e paleta do design system. Sem fotografia. */
:root{
  /* peso dos títulos (Fraunces): 300 Light · 400 Regular · 600 SemiBold */
  --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);
  --gutter:clamp(20px,5vw,48px); --ritmo:80px; --ritmo-junto:120px;
  /* altura da faixa do hero. Travada em cima e em baixo: a 78vh puro passava
     dos 860px e o CTA caía no limite do ecrã. */
  --hero-alt:clamp(690px,78vh,780px);
  --largura:1120px; --texto:680px;
  /* quanto o portátil entra na faixa seguinte. A faixa recua o mesmo,
     por isso o vão até ao título fica sempre nos 80px do ritmo. */
  --sangra:200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--creme);color:var(--tinta);
  font-family:'DM Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
:focus-visible{outline:2px solid var(--rosa-neon);outline-offset:3px;border-radius:8px}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);line-height:1.22;
  margin:0;letter-spacing:0;overflow-wrap:break-word;
  text-wrap:balance;-webkit-hyphens:none;hyphens:none}
h1{font-size:clamp(32px,4.2vw,48px);max-width:15ch;line-height:1.1}
h2{font-size:clamp(24px,2.6vw,32px);max-width:26ch}
h3{font-size:24px}
.centro h1,.centro h2,h1.centro,h2.centro{margin-left:auto;margin-right:auto}
p{text-wrap:pretty}
i,.it{font-style:italic;color:var(--enfase)}
p{margin:0}
.lead{font-size:16px;color:var(--tinta-media)}
.peq{font-size:12px} .legenda{font-size:12px;color:var(--tinta-media)}
.medida{max-width:var(--texto)} .medida-c{max-width:var(--texto);margin:0 auto}
.centro{text-align:center}
.faixa{padding:var(--ritmo) var(--gutter)}
/* duas faixas seguidas da mesma cor: sem quebra cromática a separar,
   o respiro sobe de 80 para 120 de cada lado da junta */
.hero + .faixa{padding-top:var(--ritmo)}
.hero + .bege{padding-top:var(--ritmo-junto)}
.creme + .creme, .bege + .bege, .bege-fundo + .bege-fundo,
.pastel + .pastel, .escuro + .escuro{padding-top:var(--ritmo-junto)}
.creme:has(+ .creme), .bege:has(+ .bege), .bege-fundo:has(+ .bege-fundo),
.pastel:has(+ .pastel), .escuro:has(+ .escuro){padding-bottom:var(--ritmo-junto)}
/* Entre o CTA das dúvidas e a tag "Depois do guia": 60px de cada faixa. */
.hero + .creme{padding-bottom:60px}
.hero + .creme + .creme{padding-top:60px}
.interior{max-width:var(--largura);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:var(--lavanda)} .escuro i{color:var(--rosa-neon)}
.etq{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--enfase);margin-bottom:28px;display:block;width:fit-content;
  background:rgba(142,78,100,.09);border-radius:var(--pill);padding:9px 18px}
.etq{font-size:12px}
.logo{display:block;height:auto;max-width:100%}
.logo--hero{height:72px;width:auto;margin-bottom:24px}
.logo--card{height:80px;width:auto;margin:0 auto 20px}
.logo--rodape{height:56px;width:auto}
/* subhead cola-se ao título: o par lê-se como um bloco, separado da tag */
.sub{margin-top:10px;max-width:48ch;margin-left:auto;margin-right:auto;text-wrap:balance}
.etq.centro{margin-left:auto;margin-right:auto}
.escuro .etq{color:var(--lavanda);background:rgba(255,255,255,.10)}
.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;transition:background .18s,transform .18s}
/* Hover de gradiente deslizante. O pseudo-elemento entra pela esquerda por
   cima do fundo do botão e por baixo do texto — daí o <span class="cta__t">,
   sem ele o gradiente tapava as letras. */
.cta{position:relative;overflow:hidden;isolation:isolate}
.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}
}
.cta--largo{width:100%}
.falta{display:inline-block;font-size:12px;color:var(--enfase);background:var(--lilas-pastel);
  border:1.5px dashed var(--rosa-velho);border-radius:8px;padding:10px 14px}

/* Hero split — Filipa Silva */
.hero{position:relative;padding:clamp(40px,4.5vw,64px) var(--gutter) 0;background:var(--bege);
  overflow:hidden;min-height:var(--hero-alt);display:grid;align-items:stretch}
/* Campo por trás dela. Nas referências do acervo a especialista nunca assenta em
   cor lisa: há sempre um arco, uma marca-d'água ou um fundo esbatido a ancorá-la. */
.hero::before{content:"";position:absolute;inset:0 0 0 auto;width:min(66%,980px);
  background:radial-gradient(58% 62% at 66% 76%, var(--bege-fundo), rgba(239,227,216,0) 76%);
  pointer-events:none}
.hero::after{content:"";position:absolute;right:4%;bottom:-22%;width:min(40vw,560px);aspect-ratio:1;
  border-radius:50%;background:var(--bege-fundo);opacity:.38;pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero__g{width:100%;max-width:var(--largura);margin:0 auto;display:grid;
  gap:clamp(24px,4vw,48px);align-items:stretch}
@media(min-width:900px){.hero__g{grid-template-columns:1fr 1.18fr}}
.hero__txt{align-self:center;padding-bottom:clamp(32px,5vw,64px)}
.micro{font-size:12px;color:var(--tinta-media);margin-top:16px;letter-spacing:.02em}

/* Ladainha no hero — corpo corrido, só o TU. destacado */
.lad{font-size:14px;line-height:1.75;color:var(--tinta-media);max-width:42ch;margin:20px 0 22px}
.lad .mas{font-style:italic}
.lad .tu{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);
  font-size:24px;line-height:1;color:var(--enfase);white-space:nowrap}

/* Faixa de factos por baixo do CTA */
.factos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0}
.factos li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tinta-media)}


/* Ladainha em cartões empilhados — Vera Stories */
.ladainha{max-width:640px;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:10px}
.ladainha li{list-style:none;background:var(--branco);border-radius:var(--raio-lg);
  padding:18px 24px;text-align:center;font-family:'DM Sans',system-ui,sans-serif;font-weight:500;
  font-size:16px;line-height:1.5;text-wrap:balance;box-shadow:var(--sombra-sm)}
.ladainha .mas{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);
  font-size:24px;font-style:italic;color:var(--enfase);background:transparent;box-shadow:none;
  padding:10px 24px}
.ladainha .tu{background:var(--rosa-acao);color:var(--branco);
  font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);
  font-size:clamp(24px,4vw,40px);box-shadow:var(--sombra-cta)}

/* Grelha de dores 3x2 — Sandra LP (Magnet Biz) */
.dores{display:grid;gap:16px;margin-top:40px;padding:0}
@media(min-width:700px){.dores{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dores{grid-template-columns:repeat(3,1fr)}}
.dores li{list-style:none;background:var(--branco);border-radius:var(--raio-lg);padding:26px;
  /* sobre creme o branco quase desaparece: a sombra sobe e entra uma borda ténue */
  box-shadow:var(--sombra-md);border:1px solid rgba(214,201,236,.5);
  font-size:16px;line-height:1.5;display:grid;gap:14px;
  text-wrap:balance;hyphens:none}
.dores .mk{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);font-size:24px;color:var(--rosa-velho)}

/* Promessas numeradas — Andreia */
.promessas{max-width:820px;margin:40px auto 0;padding:0;display:grid;gap:0;border-top:1px solid var(--lavanda)}
.promessas li{list-style:none;display:grid;grid-template-columns:64px 1fr;gap:20px;
  align-items:center;padding:24px 0;border-bottom:1px solid var(--lavanda)}
.promessas .n{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);font-size:24px;color:var(--rosa-velho)}
.promessas .t{font-size:16px;font-weight:500}

/* Três cartões iguais */
.bento{display:grid;gap:16px;margin-top:40px;padding:0}
@media(min-width:860px){.bento{grid-template-columns:repeat(3,1fr)}}
.bento > div{background:var(--branco);border-radius:var(--raio-lg);padding:24px;
  box-shadow:var(--sombra-md);display:grid;gap:20px;align-content:start}

/* Bento de 7 — "para quem é". 4 colunas x 3 filas:
   [1 1][2][3] / [1 1][4 4] / [5][6][7 7] */
.bento7{display:grid;gap:16px;margin-top:40px;padding:0}
/* No mobile o cartão da especialista é um cartão normal: ícone e frase, como
   os outros seis. A fotografia só entra a partir dos 980px — ver o bloco do
   desktop mais abaixo, onde o cartão passa a suporte da imagem. */
.bento7__foto picture{display:none}
.bento7__foto__t{display:grid;gap:16px;align-content:start}
.bento7{--pad-cartao:24px}
.bento7 > div{background:var(--branco);border-radius:var(--raio-lg);
  padding:26px var(--pad-cartao) var(--pad-cartao);
  box-shadow:var(--sombra-sm);display:grid;gap:16px;align-content:start}
.bento7__col{display:contents}
.bento7__col > div{background:var(--branco);border-radius:var(--raio-lg);
  padding:26px var(--pad-cartao) var(--pad-cartao);
  box-shadow:var(--sombra-sm);display:grid;gap:16px;align-content:start}
@media(min-width:640px){.bento7{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){
  /* fila fixa. Com fila automática a proporção intrínseca das imagens (os
     atributos width/height) puxava a célula larga para ~370px e a célula 1,
     que ocupa duas filas, ficava três vezes mais alta que as vizinhas. */
  /* três colunas de texto + a coluna da fotografia, que atravessa as duas
     filas. São sete frases de copy para seis células, por isso a última
     coluna de texto leva três cartões mais baixos. */
  .bento7{grid-template-columns:repeat(3,1fr) .92fr}
  /* Referência Arco: 3 colunas de texto x 2 filas, mais a coluna da
     fotografia inteira à direita. O cartão da especialista vive dentro do
     cartão da fotografia, por isso são seis frases para seis células. */
  .bento7{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}
  /* em ecrã largo volta a ser o cartão a mandar: a <picture> sobe o vazamento
     e a proporção da caixa iguala a do ficheiro, por isso o fill não distorce */
  /* Só aqui a fotografia entra. O cartão deixa de ser um cartão branco e
     passa a suporte da imagem, que vaza 29px por cima do bordo superior. */
  .bento7{--vazar:29px}
  .bento7 > .bento7__foto{display:flex;align-items:flex-end;aspect-ratio:auto;
    padding:0;background:none;box-shadow:none;overflow:visible;position:relative}
  .bento7 > .bento7__foto picture{display:block;position:absolute;
    left:0;right:0;bottom:0;top:calc(-1 * var(--vazar));z-index:0}
  .bento7 > .bento7__foto picture img{width:100%;height:100%;object-fit:fill;display:block}
  .bento7__foto__t{position:relative;z-index:1;width:100%;align-content:end;
    padding:56px var(--pad-cartao) var(--pad-cartao);gap:14px}
  .bento7 > .bento7__foto{grid-column:4;grid-row:1 / span 2}}
.trio__t{font-size:14px;line-height:1.55;font-weight:400;color:var(--tinta)}
.bento7 .trio__t{font-size:16px;line-height:1.5}
/* a parte que decide se a frase é sobre ti fica em ênfase */
.trio__t strong{font-weight:600;color:var(--enfase)}

/* Cartões de critério — Frame 1 (Atração Digital) */
.criterios{display:grid;gap:14px;margin-top:40px;padding:0}
@media(min-width:760px){.criterios{grid-template-columns:repeat(2,1fr)}}
.criterios li{list-style:none;background:var(--branco);border-radius:var(--raio-lg);padding:22px 24px;
  box-shadow:var(--sombra-sm);display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:14px}
.criterios .mk{color:var(--rosa-acao);font-weight:700}

/* Checklist — Página Barbara */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:14px;line-height:1.55}
.checks .mk{flex:none;color:var(--rosa-acao);margin-top:1px}
.escuro .checks .mk{color:var(--rosa-neon)}
.pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:40px}
.pills > span{display:flex;align-items:center;gap:10px;background:var(--lilas-pastel);
  border-radius:var(--pill);padding:10px 16px;font-size:12px;line-height:1.35}
.pills .ic{flex:none;color:var(--enfase)}

/* ── Fotografia ──────────────────────────────────────────────────────── */
img{max-width:100%;height:auto}
picture{display:block}
/* invólucro só para servir WebP: não gera caixa, o estilo fica no <img>.
   O <source> precisa de display:none — com display:contents no pai ele
   passava a ocupar uma célula da grelha e empurrava a imagem para outra. */
.env{display:contents}
source{display:none}

/* Hero: recorte sem caixa. Ela assenta no fundo da faixa, com um halo claro
   por trás para separar do bege sem desenhar uma borda. */
.hero__foto{align-self:stretch;min-height:0;
  display:flex;align-items:flex-end;justify-content:center}
/* a altura manda: a imagem é muito vertical e sem este travão transbordava a faixa */
.hero__foto picture{display:flex;align-items:flex-end;justify-content:center;
  width:100%;height:100%}
.hero__foto img{max-height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 22px 36px rgba(46,34,48,.13))}
/* Acima dos 900 sobe até ao topo da faixa e sangra pela direita. A dissolução do
   fundo está no próprio ficheiro: a fotografia não tem pés e o corte tinha de se ler. */
@media(min-width:900px){
  /* retrato fechado: a altura da faixa tornava-a enorme, manda a largura */
  /* o recuo fica no contentor, não no <picture>: os crachás posicionam-se
     contra a caixa de padding e assim acompanham-na quando ela recua */
  /* recupera o padding do topo (deixando 18px de folga para a cabeça): a altura
     da coluna era o que travava o tamanho dela, não a largura */
  .hero__foto{margin-top:calc(-1 * clamp(40px,4.5vw,64px) + 18px);
    margin-right:calc(-1 * var(--gutter));padding-right:clamp(48px,7vw,110px)}
  /* recuada da margem: encostada à direita ficava um vão grande entre o
     texto e ela. E um pouco maior, para ocupar esse vão. */
  .hero__foto picture{justify-content:flex-end}
  /* A altura sai da largura. A margem negativa encurta a faixa e deixa-a sair
     por baixo, onde o overflow da secção a corta — sem isto a faixa crescia
     para a acomodar e o corte dava zero. */
  .hero__foto img{max-height:none;width:auto;max-width:min(100%,620px);margin-bottom:-70px}
}

/* ── Cenário do hero ─────────────────────────────────────────────────────
   As referências do acervo constroem o hero por camadas: um fantasma da
   própria fotografia ao fundo, um grafismo grande em contorno, crachás
   flutuantes e um selo circular. Sem isso a especialista lê-se como
   autocolante colado em cor lisa. */
.hero__cenario{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Cena de consulta ao fundo, encostada à esquerda — atrás do texto, como na
   referência 1. No meio competia com ela e lia-se como segunda pessoa. */
.hero__cena{position:absolute;left:-8%;bottom:-8%;height:172%;width:auto;max-width:none;
  opacity:.085;filter:grayscale(.45) contrast(.9)}
/* Segunda cena, à direita e por trás dela: a grávida liga o hero ao resto da
   página. Mais apagada que a da esquerda, porque compete com o recorte. */
.hero__cena--dir{left:auto;right:-1%;bottom:14%;height:98%;opacity:.11;
  filter:grayscale(.2) contrast(1)}

/* Selo circular sobre a fotografia */
.hero__foto{position:relative}
.selo{position:absolute;left:-6%;top:36%;width:clamp(76px,8vw,104px);aspect-ratio:1;z-index:3;
  display:grid;place-items:center}
.selo svg{position:absolute;inset:0;width:100%;height:100%;
  fill:var(--enfase);font-family:'DM Sans',system-ui,sans-serif;font-size:9.4px;
  font-weight:600;letter-spacing:.1em;animation:gira 34s linear infinite}
.selo__c{width:34%;aspect-ratio:1;border-radius:50%;background:var(--rosa-acao);
  box-shadow:var(--sombra-cta)}
@keyframes gira{to{rotate:360deg}}

/* Crachás: só factos que já estão na copy */
.cracha{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--pill);font-size:12px;font-weight:500;
  color:var(--tinta);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(46,34,48,.12);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);white-space:nowrap}
.cracha svg{flex:none;color:var(--rosa-acao)}
.cracha--a{right:7%;top:46%}
.cracha--b{left:7%;bottom:24%}

@media(max-width:899px){
  .hero__cena{left:-14%;top:-6%;bottom:auto;width:88vw;height:auto;opacity:.075}
  .hero__cena--dir{left:auto;right:-10%;top:auto;bottom:16%;width:auto;height:80%;opacity:.085}
  .selo{left:3%;right:auto;top:42%;bottom:auto;width:80px}
  .cracha--a{right:0;top:42%}
  .cracha--b{left:0;bottom:14%}
}
@media (prefers-reduced-motion:reduce){.selo svg{animation:none}}

/* Fotografia dentro de cartões */
.vis{overflow:hidden;border-radius:var(--raio-md);background:var(--bege-fundo)}
/* enviesar para cima: quando a faixa visível é baixa, é aí que estão as caras */
.vis img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.bento .vis{height:200px}
@media(max-width:767px){


}
@media(min-width:980px){
  /* ícone encostado ao topo */
  .bento7 > div{align-content:start;justify-items:start}
  /* no destaque a fotografia ocupa o resto da altura */
  .bento7 .destaque{grid-template-rows:auto auto 1fr;justify-items:stretch}
}

/* Fotografia de secção */
.foto-sec{overflow:hidden;border-radius:var(--raio-lg);background:var(--bege-fundo);box-shadow:var(--sombra-md)}
.foto-sec img{width:100%;object-fit:cover;aspect-ratio:3/2}
.foto-sec--alta img{aspect-ratio:3/4}
/* Secção "Quem sou?": a fotografia tinha proporção fixa e sobrava por cima e
   por baixo do texto. Passa a acompanhar a altura da coluna ao lado. */
@media(min-width:900px){
  /* a imagem em absoluto deixa de contar para o cálculo da fila: quem manda na
     altura passa a ser o texto, e a fotografia preenche o que sobra.
     Vale para as duas secções em duas colunas — autoridade e "quem sou?". */
  .sobre .foto-sec{align-self:stretch;position:relative;overflow:hidden}
  .sobre .foto-sec img{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;object-position:50% 22%}
}


/* Prova social — Sandra Santos */
.prova{margin-top:40px;width:100vw;margin-left:calc(50% - 50vw);padding:0;
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px max(var(--gutter),calc(50vw - 560px)) 16px;
  scrollbar-width:thin;scrollbar-color:var(--lavanda) transparent}
.prova .img{flex:0 0 clamp(200px,22vw,280px);aspect-ratio:3/4;
  border-radius:var(--raio-md);scroll-snap-align:start}
/* só o necessário para a fotografia entrar na caixa que já existia */
.prova .img{overflow:hidden;background:var(--branco);box-shadow:var(--sombra-sm)}
.prova .img img{width:100%;height:100%;object-fit:cover}
/* Setas: no telemóvel o cartão seguinte mal se vê, e sem elas ninguém percebe
   que há mais seis. Só aparecem onde fazem falta. */
.prova__nav{display:none}
@media(max-width:767px){
  .prova__nav{display:flex;justify-content:center;gap:12px;margin-top:22px}
  .prova__seta{width:48px;height:48px;flex:none;border-radius:var(--pill);
    border:1.5px solid var(--rosa-acao);background:transparent;color:var(--rosa-acao);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .18s ease,opacity .18s ease}
  .prova__seta:hover{background:var(--rosa-pastel)}
  .prova__seta:disabled{opacity:.3;cursor:default}
}

/* Caixa de preço — Frame 11 (Pó Cerâmico) */
.caixa-preco{max-width:640px;margin:0 auto;background:var(--branco);border-radius:var(--raio-xl);
  padding:clamp(32px,5vw,56px);text-align:center;box-shadow:var(--sombra-lg)}
.caixa-preco .valor{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);
  font-size:clamp(40px,6.5vw,64px);line-height:1;color:var(--enfase);display:block;margin:16px 0}

/* Três eixos escuros — Vera Enchanté */
.eixos{display:grid;gap:16px;margin-top:40px}
@media(min-width:860px){.eixos{grid-template-columns:repeat(3,1fr)}}
.eixos>div{background:rgba(255,255,255,.07);border:1px solid rgba(214,201,236,.25);
  border-radius:var(--raio-lg);padding:28px;
  position:relative;z-index:2;                       /* acima do mockup */
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%)}
.eixos dt{font-family:'Fraunces',Georgia,serif;font-weight:var(--peso-titulo,400);font-size:18px;margin-bottom:10px}
/* O ícone vive dentro do <dt> — é o que mantém o <dl> bem formado para
   leitores de ecrã: um <span> solto entre <div> e <dt> quebrava a árvore.
   Em bloco, para continuar por cima do título como estava. */
.eixos dt .ic-caixa{display:flex;margin-bottom:20px}
/* Mockup: sai da coluna, sobe até ao cartão de cima e desce para a secção seguinte */
.mockup{display:block;height:auto;max-width:none;width:130%;
  margin:-56px 0 -70px -12%;top:35px;
  transform:rotate(5deg) scale(1.15);transform-origin:50% 50%;
  position:relative;z-index:1;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.42))}
.sec-mockup{position:relative}   /* sem z-index: só o mockup sobe, o texto nunca */
@media(max-width:1439px){
  /* Abaixo de 1100px não há largura para o sangramento: o portátil ficava
     cortado à direita e atravessava a secção seguinte. Aqui fica contido,
     sem z-index a pintar por cima do que vem a seguir. */
  .mockup{width:104%;max-width:none;margin:24px 0 0 -2%;top:0;z-index:auto;
    transform:rotate(2.5deg) scale(1);
    filter:drop-shadow(0 14px 26px rgba(0,0,0,.38))}
  .sec-mockup{z-index:auto}
  .eixos>div{z-index:auto}
}

/* Caixa comum: o coração ocupa 19,6 das 24 unidades e o boneco 11, por isso
   soltos liam-se com pesos diferentes. Dentro da caixa ficam alinhados. */
/* caixa maior nos cartões, onde o ícone é o elemento principal */
.ic-caixa--g{width:54px;height:54px;border-radius:16px;margin-bottom:16px}
.ic-caixa{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:20px;border-radius:14px;
  background:rgba(255,46,139,.11);border:1px solid rgba(255,46,139,.22);
  color:var(--rosa-neon)}
.eixos .ic{display:block}
.eixos dd{margin:0;color:var(--lavanda)}

/* Índice em duas colunas — Vera Enchanté (cronograma) */
.indice{margin:40px 0 0;padding:0;counter-reset:v}
@media(min-width:820px){
  .indice{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;column-gap:48px}
  .indice--8{grid-template-rows:repeat(4,1fr)}
  .indice--11{grid-template-rows:repeat(6,1fr)}
}
.indice li{counter-increment:v;list-style:none;display:grid;grid-template-columns:44px 1fr;
  gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--lavanda);
  font-size:14px}
.indice li::before{content:counter(v,decimal-leading-zero);font-family:'Fraunces',Georgia,serif;
  font-weight:600;font-size:14px;color:var(--rosa-velho)}

/* Sobre — Cátia */
.sobre{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:900px){.sobre{grid-template-columns:.9fr 1.1fr}}
/* FAQ — Cátia */
/* Expansão suave: a grelha anima de 0fr para 1fr, sem precisar de saber a altura */
.expansivel{height:0;overflow:hidden;opacity:0}
.expansivel__i{min-height:0}
.expansivel.aberto .expansivel__i{min-height:0}
.verMais{margin-top:24px;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--enfase);text-decoration:underline;
  text-underline-offset:4px;padding:14px 8px;min-height:48px;transition:color .18s ease}
.verMais:hover{color:var(--rosa-acao)}

/* Fecho emocional — Método SV */
.fecho{text-align:center}
.fecho .remate{font-size:24px;line-height:1.45;max-width:44ch;margin:0 auto 40px;text-wrap:balance}
.fecho .etq,.fecho h2{margin-left:auto;margin-right:auto}

/* Checkout — Vera Enchanté */
.form{max-width:520px;margin:0 auto;background:var(--branco);border-radius:var(--raio-xl);
  padding:clamp(24px,4vw,40px);box-shadow:var(--sombra-lg)}
.form label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--enfase);margin-bottom:10px}
.form input{width:100%;height:56px;border-radius:var(--raio-md);border:1.5px solid var(--lavanda);
  padding:0 18px;font-family:inherit;font-size:14px;color:var(--tinta)}
.form input:focus-visible{border-color:var(--rosa-neon)}

/* CTA de conversa — Conteúdo que Vende */
.conversa{text-align:center}
.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)}
.rodape{padding-top:32px;padding-bottom:32px}
.escuro:has(+ .rodape){padding-bottom:48px}
/* .legenda fixa tinta-media; sobre o rodapé escuro dava 1,9:1 e era ilegível */
.escuro .legenda{color:var(--lavanda)}
.rodape a{text-decoration:none}
.rodape a:hover{text-decoration:underline;text-underline-offset:4px}
.rodape__g{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}

/* Telemóvel: laterais 20, verticais 48, mesma cor 64 */
@media(max-width:767px){
  :root{--gutter:20px; --ritmo:48px; --ritmo-junto:64px}

  /* hero centrado, com menos ar por cima */
  .hero{padding-top:32px}
  .hero__txt{text-align:center;padding-bottom:40px}
  .hero__txt h1,.hero__txt p,.lad{margin-left:auto;margin-right:auto}
  .logo--hero{height:60px;margin:0 auto 12px}
  .logo--card{height:68px}
  .logo--rodape{height:40px}

  /* parágrafos ocupam a largura toda; títulos continuam equilibrados */
  .sub,.lead{text-wrap:pretty;max-width:none}
  h1,h2{text-wrap:balance}
  h2{font-size:28px;max-width:none}
  .caixa-preco .valor{font-size:56px}

  /* etiquetas: 10px, duas linhas equilibradas e centradas */
  .etq{font-size:10px;padding:8px 14px;text-wrap:balance;text-align:center;
       max-width:100%;margin-bottom:12px}

  /* rodapé centrado e encostado ao fecho */
  .escuro:has(+ .rodape){padding-bottom:24px}
  .rodape{padding-top:16px;padding-bottom:16px}
  .rodape__g{flex-direction:column;align-items:center;text-align:center;gap:8px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ── Portátil que abre ao entrar no ecrã ─────────────────────────────────
   Duas camadas sobre a mesma tela de 1428x1102, por isso alinham sozinhas.
   A dobradiça está a 80,1% da altura: é onde o recorte do ecrã acaba (y=887)
   e o da base começa (y=878). */
/* Sangramento numa variável: a faixa seguinte recua exactamente o mesmo,
   e assim o vão entre o portátil e o título de baixo fica sempre nos 80px
   do padding-bottom desta secção — 80 − sangra + sangra = 80. */
.portatil{position:relative;z-index:2;width:min(100%,900px);
  margin:56px auto calc(-1 * var(--sangra));
  perspective:2400px;perspective-origin:50% 78%}
/* atravessa para a faixa seguinte: z-index positivo num elemento posicionado
   pinta acima do fundo da secção que vem a seguir */
.faixa:has(.portatil) + .faixa{padding-top:var(--sangra)}
.portatil img{display:block;width:100%;height:auto}
.portatil__base{position:relative;z-index:1;
  filter:drop-shadow(0 18px 28px rgba(46,34,48,.16))}
.portatil__tela{position:absolute;inset:0;z-index:2;
  transform-origin:50% 80.1%;transform:rotateX(-92deg);
  backface-visibility:hidden;will-change:transform}
/* sem JS ou com movimento reduzido, o portátil aparece aberto */
.portatil--aberto .portatil__tela{transform:rotateX(0deg)}
@media (prefers-reduced-motion:reduce){.portatil__tela{transform:rotateX(0deg)}}
@media(max-width:767px){
  :root{--sangra:150px}
  .portatil{margin:40px auto calc(-1 * var(--sangra));perspective:1200px}
}

/* ── Revelações ao scroll ────────────────────────────────────────────────
   Padrão do acervo da Cíntia Graner: texto sobe com desfoque a dissipar-se,
   grupos entram escalonados, fotografia abre em cortina. A classe .js entra
   no <head>, antes da primeira pintura. */
.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 .bento > *, .js .bento7 > *,
.js .prova > *, .js .faq > *, .js .eixos > *, .js .checks > *,
.js .pills > *, .js .indice > *,
.js .caixa-preco > *{opacity:.001;transform:translateY(78px)}
.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 .remate,
  .js .sobre > div > p,.js .fecho > .interior > p,.js .verMais,
  .js .faixa > .interior > .centro > .cta,
  .js .dores > *,.js .promessas > *,.js .bento > *,.js .bento7 > *,
  .js .prova > *,.js .faq > *,.js .eixos > *,.js .checks > *,
  .js .pills > *,.js .indice > *,.js .caixa-preco > *,
  .js .foto-sec{opacity:1;transform:none;filter:none;clip-path:none}
}

/* ── Lenis ───────────────────────────────────────────────────────────────
   Sem isto o scroll fica aos solavancos: o scroll-behavior:smooth nativo e o
   Lenis disputam a mesma posição a cada frame. A classe .lenis entra por JS,
   portanto sem a biblioteca o comportamento nativo mantém-se 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}

/* ── FAQ que abre e fecha ────────────────────────────────────────────────
   O <details> nativo aparece de golpe. A grelha anima de 0fr para 1fr, sem
   ser preciso saber a altura — a mesma técnica do "Ver mais" do índice.
   O JS segura o atributo [open] até a transição de fecho terminar. */
.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}
.faq__i{overflow:hidden}
.faq__i p{padding:0 24px 22px;color:var(--tinta-media)}

/* 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)}
@media (prefers-reduced-motion:reduce){
  .faq__mais::before,.faq__mais::after{transition:none}
}