/*
Theme Name: Ana Carolina Leal Psi
Theme URI: https://www.anacarolinalealpsi.com.br/
Description: Tema one page para o site de Ana Carolina Leal, psicóloga (parentalidade consciente). Identidade visual Terracota/Musgo, tipografia Zodiak + Switzer. Produzido pela Casa Nexo Inteligência Comercial.
Author: Casa Nexo Inteligência Comercial
Author URI: https://casanexo.com.br/
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietária
Text Domain: acl-psi
*/

/* ==========================================================================
   FONTES — Zodiak (serifada, títulos e assinatura) + Switzer (sans, texto).
   Ambas da Fontshare, gratuitas para uso comercial. Self-hosted em
   /fonts/, com font-display: swap. Nenhuma CDN: a meta continua sendo
   primeira dobra em menos de 2,5s no celular.

   São 6 arquivos, 136KB no total. Duas famílias cobrindo três papéis:
   Zodiak normal nos títulos, Zodiak itálico na assinatura, Switzer em
   todo o texto.
   ========================================================================== */
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Zodiak";
  src:url("fonts/zodiak-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Switzer";
  src:url("fonts/switzer-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Switzer";
  src:url("fonts/switzer-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Switzer";
  src:url("fonts/switzer-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root{
  /* cores */
  --terracota:#9B4821;
  --terracota-hover:#7C3A1A;
  --musgo:#3A381B;
  --marrom:#61422F;
  --linho:#F6F0E7;
  --creme:#E4D6C6;
  --borda-suave:rgba(97,66,47,.15);

  /* tipografia */
  --titulo:"Zodiak",Georgia,"Times New Roman",serif;
  --assinatura:"Zodiak",Georgia,"Times New Roman",serif; /* usada em itálico */
  --texto:"Switzer","Segoe UI",system-ui,-apple-system,sans-serif;

  /* espaçamento: 4 . 8 . 12 . 16 . 24 . 32 . 48 . 64 . 96 */
  --sp-4:4px;  --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px;

  /* estrutura */
  --max-conteudo:1080px;
  --max-texto:62ch;
  --margem:20px;

  /* estética */
  --raio-controle:12px;
  --raio-superficie:14px;
  --raio-bloco:16px;
  /* Todo o volume da página sai destes dois valores; para calibrar, mexa
     só neles. Sempre em Musgo, nunca preto puro, e sempre sombra única:
     sombra dupla e glow colorido seguem fora do sistema. */
  --sombra:0 8px 24px rgba(58,56,27,.28);
  --sombra-elevada:0 16px 40px rgba(58,56,27,.34);
  /* barra de largura total pede sombra mais leve: a mesma opacidade de
     um card pequeno vira uma faixa suja quando esticada na tela toda */
  --sombra-cabecalho:0 4px 16px rgba(58,56,27,.16);
  --transicao:150ms ease;

  --barra-fixa:calc(56px + env(safe-area-inset-bottom,0px));
  --altura-cabecalho:72px;
}

/* ==========================================================================
   02. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

/* O Linho fica no <html> para que a textura de papel possa viver atrás
   de todo o conteúdo, sem escurecer o texto por cima. */
html{background:var(--linho)}

body{
  margin:0;
  background:transparent;
  color:var(--musgo);
  font-family:var(--texto);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  padding-bottom:var(--barra-fixa);
  -webkit-font-smoothing:antialiased;
}

/* Zodiak tem 400 e 700. O H1 é grande o bastante para o Regular sustentar
   sozinho; os títulos menores usam Bold para não perderem autoridade. */
h1,h2,h3{
  font-family:var(--titulo);
  color:var(--musgo);
  font-weight:700;
  margin:0;
  text-transform:none;
}

h1{
  font-size:clamp(40px,5.2vw,56px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(26px,3.1vw,32px);
  line-height:1.16;
}

h3{
  font-size:clamp(18px,2vw,20px);
  line-height:1.3;
}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

strong{font-weight:700;color:var(--musgo)}

em{
  font-style:normal;
  font-weight:600;
  color:var(--terracota);
}

a{color:var(--terracota)}

svg{display:block;flex:none}

:focus-visible{
  outline:2px solid var(--musgo);
  outline-offset:2px;
  border-radius:2px;
}

/* ==========================================================================
   03. LAYOUT
   ========================================================================== */
.wrap{
  position:relative;
  width:100%;
  max-width:var(--max-conteudo);
  margin-inline:auto;
  padding-inline:var(--margem);
}

/* TEXTURA DE PAPEL — a página inteira. Com SVG embutido são menos de 400
   bytes e nenhuma requisição. Fica atrás do conteúdo (z-index -1), nunca
   por cima, para não comer contraste. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='0.14'/%3E%3C/svg%3E");
}

/* Granulado mais marcado nos blocos escuros. */
.secao--musgo,
.rodape{position:relative}

.secao--musgo::before,
.rodape::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Filete curto acima de cada título de seção. Onde existe rótulo,
   o filete migra para dentro dele. */
main h2::before{
  content:"";
  display:block;
  width:32px;
  height:2px;
  background:var(--terracota);
  margin-bottom:var(--sp-16);
}

/* Rótulo de seção: nomeia o bloco e dá o ponto de entrada da leitura.
   Só entra onde orienta de verdade, nunca só para decorar. */
.rotulo{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  margin-bottom:var(--sp-12);
  font-family:var(--texto);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--terracota);
}

.rotulo::before{
  content:"";
  flex:none;
  width:24px;
  height:2px;
  background:var(--terracota);
}

.rotulo + h2::before{display:none}

.secao{
  padding-block:var(--sp-64);
  /* o cabeçalho é fixo: a âncora do anúncio não pode parar embaixo dele */
  scroll-margin-top:calc(var(--altura-cabecalho) + var(--sp-16));
}

/* transparente de propósito: deixa a textura de papel do fundo aparecer */
.secao--linho{background:transparent}
.secao--musgo{background:var(--musgo);color:var(--creme)}
.secao--musgo h2{color:var(--creme)}

/* Os blocos Creme viram painéis arredondados sobre o Linho, em vez de
   faixas de largura total. No desktop a medida interna do painel bate
   com a das seções claras, então a coluna de texto não desalinha. */
.secao--creme{
  background:transparent;
  padding-block:var(--sp-32);
}

/* ESCALA DE ELEVAÇÃO — três níveis, cada um com um papel:
   0  a página (Linho + textura de papel), sempre plana
   1  superfície de seção: painel Creme e card de passo — sombra padrão
   2  o que flutua de verdade: nota do hero, cabeçalho ao rolar,
      barra fixa de WhatsApp — sombra elevada
   Raio diferente por nível (16 painel / 14 card) para a profundidade
   não virar decoração repetida. */
.secao--creme > .wrap{
  width:calc(100% - var(--margem) * 2);
  background:var(--creme);
  border-radius:var(--raio-bloco);
  padding-block:var(--sp-48);
  box-shadow:var(--sombra);
}

.secao--curta{padding-block:var(--sp-48)}

.texto{
  max-width:var(--max-texto);
}

.texto > * + *{margin-top:var(--sp-16)}

/* mais espaço entre grupos do que dentro de um grupo */
h2 + .texto{margin-top:var(--sp-24)}

.secundario{
  font-size:14px;
  line-height:1.6;
  color:var(--marrom);
}

.divisor{
  border:0;
  border-top:1px solid var(--borda-suave);
  margin:0;
}

/* ==========================================================================
   04. BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 26px;
  border-radius:var(--raio-controle);
  font-family:var(--texto);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  text-transform:none;
  transition:background-color var(--transicao),color var(--transicao),border-color var(--transicao);
}

.btn--primario{
  background:var(--terracota);
  color:var(--creme);
  border:0;
}
.btn--primario:hover{background:var(--terracota-hover)}

.btn--secundario{
  background:transparent;
  color:var(--terracota);
  border:1.5px solid var(--terracota);
  padding:12.5px 24.5px;
}
.btn--secundario:hover{background:var(--creme)}

.secao--musgo .btn--primario:hover{background:var(--terracota-hover)}

.secao--musgo :focus-visible{outline-color:var(--creme)}

/* ==========================================================================
   05. CABEÇALHO
   ========================================================================== */
.pular{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--creme);
  color:var(--musgo);
  padding:var(--sp-12) var(--sp-16);
  border-radius:var(--raio-controle);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  z-index:20;
}
.pular:focus{left:var(--margem);top:var(--sp-12)}

/* Fixo no topo: a mãe pode agendar de qualquer altura da página, e a
   assinatura com o CRP fica sempre visível, como pede o Conselho. */
.cabecalho{
  position:sticky;
  top:0;
  z-index:12;
  background:var(--linho);
  padding-block:var(--sp-16);
  border-bottom:1px solid transparent;
  transition:border-color var(--transicao);
}

/* ao rolar, o cabeçalho sobe um nível. Sombra OU borda, nunca as duas. */
.cabecalho[data-rolagem]{
  border-bottom-color:transparent;
  box-shadow:var(--sombra-cabecalho);
}

.marca{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  text-decoration:none;
}

/* O itálico da Zodiak ficou reservado para dois momentos: o nome dela no
   bloco 05 e o mote do bloco 10. Aqui a assinatura usa o romano. */
.marca__nome{
  font-family:var(--titulo);
  font-size:24px;
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--terracota);
}

.marca__registro{
  font-family:var(--texto);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--marrom);
  line-height:1.4;
}

/* No celular quem carrega o topo é a primeira dobra; a barra fixa cobre a ação.
   O botão do cabeçalho só entra no desktop, onde não existe barra fixa. */
.cabecalho__acao{display:none}

/* ==========================================================================
   06. BLOCO 01 — PRIMEIRA DOBRA
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:var(--sp-48);
  padding-bottom:var(--sp-64);
}

/* TRAÇADO ORGÂNICO — só na primeira dobra. Linhas finas em Marrom,
   ancoradas à direita, onde não há texto. Vetor embutido: nada de imagem
   de terceiro e nada de requisição. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background-repeat:no-repeat;
  background-position:right -120px center;
  background-size:auto 118%;
  /* o traçado se apaga sobre a coluna de texto: no celular, onde o texto
     ocupa a largura toda, sobra só um respiro de linha na borda direita */
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 64%,#000 94%);
  mask-image:linear-gradient(to right,transparent 0,transparent 64%,#000 94%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 1280' fill='none' stroke='%2361422F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M262 -30 C262 90 300 152 402 152 C520 152 638 122 700 58'/%3E%3Cpath d='M334 -30 C334 62 362 112 470 112 C598 112 690 152 722 246'/%3E%3Cpath d='M-30 372 C58 468 130 560 190 700 C250 842 232 1078 212 1310'/%3E%3Cpath d='M-30 632 C42 656 96 700 100 780 C105 880 40 980 -12 1042'/%3E%3Cpath d='M742 872 C660 884 638 948 644 1030 C650 1120 700 1180 762 1198'/%3E%3Cpath d='M420 188 C520 262 610 330 660 432 C712 540 700 700 680 822'/%3E%3C/svg%3E");
}

.hero > .wrap{z-index:1}

.hero__titulo{max-width:15ch}

/* segunda metade do título na cor de ação, como na referência:
   a frase inteira continua sendo um <h1> só */
.hero__titulo .destaque{color:var(--terracota)}

.hero__linha{
  margin-top:var(--sp-24);
  max-width:var(--max-texto);
}

.hero__linha + .hero__linha{margin-top:var(--sp-16)}

.hero__acao{margin-top:var(--sp-32)}

.hero__nota{
  margin-top:var(--sp-16);
  max-width:52ch;
}

/* ==========================================================================
   07. BLOCO 02 — ACOLHIMENTO
   ========================================================================== */
.acolhimento h2{max-width:26ch}
.acolhimento .texto{margin-top:var(--sp-24)}

/* ==========================================================================
   08. BLOCO 04 — A ROTINA
   ========================================================================== */
.rotina__lista{
  margin-top:var(--sp-32);
  display:grid;
  gap:0;
}

/* sem card: quem separa as cenas é o filete */
.rotina__item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-12);
  max-width:var(--max-texto);
  padding-block:var(--sp-16);
  border-top:1px solid var(--borda-suave);
}

.rotina__item:last-child{border-bottom:1px solid var(--borda-suave)}

.rotina__icone{
  width:22px;
  height:22px;
  margin-top:6px;
  color:var(--marrom);
}

.rotina__fecho{margin-top:var(--sp-32);max-width:var(--max-texto)}

/* ==========================================================================
   09. BLOCO 05 — O GUIA
   ========================================================================== */
.guia__nome{
  font-family:var(--assinatura);
  font-style:italic;
  font-weight:400;
  font-size:clamp(36px,4.6vw,44px);
  line-height:1.05;
  color:var(--terracota);
  display:block;
  margin-bottom:var(--sp-4);
}

.guia .texto{margin-top:var(--sp-24)}

/* Espaço da foto já construído: enquanto a <figure> não existe no HTML,
   o bloco fica em coluna única. Quando ela entrar, vira duas colunas
   sozinho — sem placeholder falso e sem retrabalho de layout. */
.guia__grade,
.diferenca__grade{display:grid;gap:var(--sp-32)}

.guia__foto,
.diferenca__foto{margin:0}

.guia__foto img,
.diferenca__foto img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--raio-superficie);
}

/* ==========================================================================
   10. BLOCO 06 — DIFERENCIAÇÃO
   ========================================================================== */
.diferenca h2{max-width:18ch}

/* ==========================================================================
   BLOCO 10 — SUCESSO (o mote da página)
   ========================================================================== */
/* Única aparição da cursiva na página. É o mote que a Ana reaproveita
   na bio do Instagram e no perfil do Google. */
.sucesso h2{
  font-family:var(--assinatura);
  font-style:italic;
  font-weight:400;
  font-size:clamp(32px,4.6vw,44px);
  line-height:1.15;
  color:var(--terracota);
  max-width:20ch;
}

.sucesso h2::before{display:none}

/* Na versão anterior este painel subia e entrava na faixa escura do bloco
   "o que está em jogo". Com aquele bloco removido a pedido da cliente, a
   sobreposição perdeu o fundo contra o qual funcionava: o mote agora
   respira sobre o Linho, entre o painel Creme dos neurodivergentes e a
   faixa Musgo do fechamento. Sem sobreposição e sem card. */
.sucesso{
  position:relative;
  z-index:1;
}

/* ==========================================================================
   11. BLOCO 07 — O PLANO
   ========================================================================== */
.plano__passos{
  margin-top:var(--sp-32);
  display:grid;
  gap:var(--sp-16);
  counter-reset:passo;
}

.plano__passo{
  position:relative;
  background:var(--creme);
  border-radius:var(--raio-superficie);
  padding:20px 56px 20px 20px;
  box-shadow:var(--sombra);
}

/* numeração no canto, sem círculo e sem badge */
.plano__passo::before{
  counter-increment:passo;
  content:counter(passo);
  position:absolute;
  top:20px;
  right:20px;
  font-family:var(--titulo);
  font-size:28px;
  line-height:1;
  color:var(--terracota);
  opacity:.5;
}

/* ==========================================================================
   12. BLOCO 08 — NEURODIVERGENTES
   ========================================================================== */
.neuro__acao{margin-top:var(--sp-32)}

/* ==========================================================================
   13. BLOCO 10 — SUCESSO sobre fundo claro
   O bloco "o que está em jogo" saiu a pedido da cliente. O mote agora
   sobe sobre a faixa Musgo do bloco de diferenciação inferior.
   ========================================================================== */

/* ==========================================================================
   14. BLOCO 11 — FAQ
   ========================================================================== */
.faq__lista{
  margin-top:var(--sp-32);
  display:grid;
  gap:var(--sp-12);
}

.faq__item{
  background:var(--creme);
  border-radius:var(--raio-superficie);
  padding:var(--sp-4) 20px;
}

.faq__pergunta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-16);
  min-height:52px;
  padding-block:var(--sp-12);
  cursor:pointer;
  list-style:none;
}

.faq__pergunta::-webkit-details-marker{display:none}

.faq__pergunta h3{
  font-size:18px;
  line-height:1.3;
  transition:color var(--transicao);
}

.faq__pergunta:hover h3{color:var(--terracota)}

.faq__chevron{
  width:20px;
  height:20px;
  color:var(--marrom);
  transition:transform var(--transicao);
}

.faq__item[open] .faq__chevron{transform:rotate(180deg)}

/* a pergunta aberta sobe um nível: a profundidade marca estado,
   não é enfeite aplicado em todo card igual */
.faq__item[open]{box-shadow:var(--sombra)}

.faq__resposta{
  padding-bottom:var(--sp-16);
  font-size:16px;
  line-height:1.7;
  color:var(--marrom);
  max-width:var(--max-texto);
}

/* ==========================================================================
   15. BLOCO 12 — FECHAMENTO E RODAPÉ
   ========================================================================== */
.fechamento__grade{display:grid;gap:var(--sp-32);justify-items:start}
.fechamento h2{color:var(--creme);max-width:22ch}
.fechamento p{margin-top:var(--sp-24);max-width:var(--max-texto)}
.fechamento .btn{white-space:nowrap}

.rodape{
  background:var(--musgo);
  color:var(--creme);
  padding-block:var(--sp-32) var(--sp-48);
}

.rodape__linha{
  border-top:1px solid rgba(228,214,198,.18);
  padding-top:var(--sp-32);
  display:grid;
  gap:var(--sp-24);
}

.rodape__nome{
  font-family:var(--texto);
  font-size:17px;
  font-weight:700;
  color:var(--creme);
}

.rodape__dados{
  font-size:14px;
  line-height:1.8;
  color:var(--creme);
}

.rodape a{
  color:var(--creme);
  text-decoration:underline;
  text-underline-offset:3px;
  display:inline-flex;
  align-items:center;
  min-height:44px; /* área de toque no celular */
  transition:color var(--transicao);
}
.rodape a:hover{color:#D9C4A9}

.rodape__meta{
  font-size:14px;
  color:rgba(228,214,198,.75);
}

/* ==========================================================================
   16. BARRA FIXA DE WHATSAPP (mobile)
   ========================================================================== */
.barra-fixa{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:15;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-8);
  height:calc(56px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--terracota);
  color:var(--creme);
  font-family:var(--texto);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:var(--sombra-elevada);
  transition:background-color var(--transicao);
}
.barra-fixa:hover{background:var(--terracota-hover)}
.barra-fixa:focus-visible{outline-color:var(--creme);outline-offset:-4px}
.barra-fixa svg{width:22px;height:22px}

/* ==========================================================================
   17. PÁGINA INTERNA (política de privacidade e afins)
   ========================================================================== */
.pagina{
  padding-block:var(--sp-64) var(--sp-96);
}

.pagina__titulo{
  max-width:24ch;
  margin-bottom:var(--sp-32);
}

.pagina__conteudo{
  max-width:var(--max-texto);
}

.pagina__conteudo > * + *{margin-top:var(--sp-16)}

.pagina__conteudo h2{
  margin-top:var(--sp-48);
  font-size:clamp(22px,2.6vw,26px);
}

.pagina__conteudo h3{
  margin-top:var(--sp-32);
  font-size:18px;
}

.pagina__conteudo ul{
  list-style:disc;
  padding-left:1.25em;
}

.pagina__conteudo ul li + li{margin-top:var(--sp-8)}

.pagina__conteudo a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.pagina__voltar{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  margin-top:var(--sp-48);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}
.pagina__voltar:hover{text-decoration:underline}

/* ==========================================================================
   18. AVISO DE COOKIES (LGPD) — slot reservado para a fase de traqueamento.
   Fica oculto enquanto não houver nenhuma tag instalada: sem cookie de
   medição, não há o que consentir, e um banner vazio só atrapalha.
   ========================================================================== */
.consentimento{
  position:fixed;
  left:var(--margem);
  right:var(--margem);
  bottom:calc(var(--barra-fixa) + var(--sp-12));
  z-index:16;
  display:none;
  gap:var(--sp-16);
  align-items:center;
  flex-wrap:wrap;
  max-width:560px;
  margin-inline:auto;
  padding:var(--sp-16) var(--sp-24);
  background:var(--creme);
  border-radius:var(--raio-bloco);
  box-shadow:var(--sombra-elevada);
  font-size:14px;
  line-height:1.6;
  color:var(--marrom);
}

.consentimento[data-visivel]{display:flex}

.consentimento p{flex:1 1 240px;margin:0}

.consentimento__acoes{
  display:flex;
  gap:var(--sp-8);
  flex:0 0 auto;
}

.consentimento .btn{min-height:40px;padding:10px 18px;font-size:14px}

/* ==========================================================================
   19. TABLET — a partir de 768px
   ========================================================================== */
@media (min-width:768px){
  :root{--margem:32px;--barra-fixa:0px}

  body{font-size:18px}

  .secao{padding-block:var(--sp-96)}
  .secao--curta{padding-block:var(--sp-64)}

  .hero{padding-top:var(--sp-48);padding-bottom:var(--sp-96)}

  .marca__nome{font-size:26px}

  .secao--creme{padding-block:var(--sp-48)}
  .secao--creme > .wrap{padding-block:var(--sp-64)}


  .cabecalho .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-24);
  }
  .cabecalho__acao{display:inline-flex}

  /* coluna única também no desktop: a lista vira uma tabela de cenas,
     e o filete faz o papel que o card faria */
  .rotina__item{padding-block:var(--sp-24)}

  .plano__passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24)}
  .plano__passo{padding:24px}

  .diferenca__grade{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:var(--sp-48);
    align-items:start;
  }

  /* faixa de fechamento: mensagem à esquerda, ação à direita */
  .fechamento__grade{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--sp-48);
  }

  .rodape__linha{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--sp-48);
  }

  .barra-fixa{display:none}

  .consentimento{bottom:var(--sp-24)}
}

/* ==========================================================================
   20. DESKTOP — a partir de 1024px
   ========================================================================== */
@media (min-width:1024px){
  :root{--altura-cabecalho:88px}

  .cabecalho{padding-block:var(--sp-24)}

  /* Primeira dobra em coluna única: quem ocupa a metade direita é o
     traçado, não um card. O texto para antes dele. */
  .hero__texto{max-width:620px}
  .hero__titulo{max-width:none}

  /* no desktop a coluna direita está livre: o traçado pode aparecer mais */
  .hero::before{
    opacity:.55;
    background-position:right -40px center;
    background-size:auto 165%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 44%,#000 78%);
    mask-image:linear-gradient(to right,transparent 0,transparent 44%,#000 78%);
  }

  /* só vira duas colunas quando a foto real existir no HTML */
  .guia__grade:has(.guia__foto){
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:var(--sp-48);
    align-items:start;
  }

  .faq__lista{max-width:820px}

  .faq__item{padding-inline:24px}
}

/* ==========================================================================
   21. MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ==========================================================================
   22. IMPRESSÃO
   ========================================================================== */
@media print{
  .barra-fixa,.cabecalho__acao,.consentimento,.pular{display:none !important}
  html{background:#fff}
  body{padding-bottom:0;color:#000}
  body::before,.secao--musgo::before,.rodape::before,.hero::before{display:none}
  .secao--musgo,.rodape{background:#fff;color:#000}
  .secao--musgo h2,.fechamento h2,.rodape__nome,.rodape__dados{color:#000}
}