/* =====================================================================
   Mariana Hermann — Psicóloga | style.css

   Identidade visual extraída do logo fornecido pela cliente.
   Mobile-first. Todos os tokens ficam em :root — para trocar uma cor
   em toda a página, basta alterar aqui.

   Decisão de design registrada: esta página é lida por um público que
   inclui pessoas autistas, com TDAH e com altas habilidades. Por isso
   o corpo do texto é grande (18px), o entrelinhas é generoso (1.75),
   a medida da linha é curta (66 caracteres), nada é justificado e
   nenhum movimento começa sozinho de forma chamativa. Isso não é
   preciosismo: é o que mantém a página legível para quem ela busca.
===================================================================== */

/* =====================================================================
   TOKENS — paleta semântica da marca

   Esta é a fonte da verdade das cores. Os nomes em português mais abaixo
   são apenas apelidos que apontam para cá, para que as regras antigas
   continuem funcionando: trocar uma cor aqui muda a página inteira.

   Todos os pares texto/fundo desta paleta foram medidos. As três notas
   de contraste marcadas com ⚠ registram onde a paleta, aplicada ao pé
   da letra, ficaria abaixo do mínimo de 4,5:1 — e como isso foi
   resolvido sem sair da paleta.
===================================================================== */
:root{
  /* ---- paleta semântica (valores da identidade) ---- */
  --color-background:     #F8F1EB;   /* creme claro — fundo predominante */
  --color-surface:        #FFFFFF;   /* branco — cards e superfícies */
  --color-primary:        #05647A;   /* petróleo — títulos, texto, botão primário */
  --color-secondary:      #208A9A;   /* teal — ícones e detalhes gráficos */
  --color-accent:         #D68D7C;   /* terracota — destaques, ação secundária */
  --color-accent-soft:    #EAB2B2;   /* rosa queimado claro — decoração */
  --color-info-soft:      #E2EAF2;   /* azul acinzentado — seções de apoio */
  --color-highlight-soft: #FFE8E6;   /* rosa muito claro — seções acolhedoras */
  --color-text:           #05647A;   /* 6,04:1 sobre o creme */
  --color-text-inverse:   #FFFFFF;   /* 6,75:1 sobre o petróleo */
  --color-border:         #E2EAF2;

  /* ---- derivados necessários para a paleta funcionar em texto ---- */

  /* ⚠ #208A9A dá 3,64:1 sobre o creme e 4,07:1 sobre o branco — abaixo
     do mínimo para texto. Por isso o teal fica nos ÍCONES e detalhes
     gráficos (onde 3:1 basta) e o texto de link usa esta versão
     escurecida do mesmo tom, com 5,13:1. */
  --color-secondary-text: #19707E;

  /* ⚠ A paleta não traz um tom para texto secundário. Este é o próprio
     petróleo clareado, escolhido para passar nos QUATRO fundos da paleta:
     creme 5,67 · branco 6,34 · azul acinzentado 5,22 · rosa claro 5,42.
     Um tom mais claro reprovava justamente sobre os dois fundos tingidos. */
  --color-text-soft:      #256874;

  --color-primary-dark:   #044A5A;   /* hover do botão primário */

  /* ⚠ Nenhum tom quente da paleta carrega texto pequeno: o terracota
     #D68D7C dá 2,36:1 e o rosa #EAB2B2 dá 1,8:1 sobre o creme. Este é o
     terracota escurecido, 5,45:1 — usado nos rótulos (eyebrow) para que
     o acento quente da marca não suma do texto. */
  --color-accent-text:    #9C4A35;

  /* ⚠ Texto sobre #EAB2B2 fica em 3,7:1 e reprova. Onde havia rosa com
     texto por cima (a numeração dos passos), o fundo passou a ser o rosa
     muito claro #FFE8E6, que leva o petróleo a 5,77:1. */

  /* =====================================================================
     APELIDOS — mantidos para as regras já escritas continuarem valendo
  ===================================================================== */
  --petroleo:      var(--color-primary);
  --petroleo-d:    var(--color-primary-dark);
  --petroleo-esc:  var(--color-primary);   /* seções escuras usam o próprio petróleo */
  --coral:         var(--color-accent);
  --coral-texto:   var(--color-accent-text);
  --rosa:          var(--color-accent-soft);

  --fundo:         var(--color-background);
  --fundo-alt:     var(--color-info-soft);
  --tinta:         var(--color-text);
  --tinta-suave:   var(--color-text-soft);
  --borda:         var(--color-border);
  --branco:        var(--color-surface);

  /* ---- cor de ação: botões de WhatsApp ----------------------------
     A paleta define #05647A como cor de "botões primários" e #D68D7C
     como "botões secundários / ação complementar". O botão de WhatsApp
     é o botão primário da página, então passou a ser petróleo.

     HISTÓRICO: até 31/08/2026 este botão era terracota #D38273 com texto
     branco (2,9:1), escolha explícita da Mariana. A paleta nova reverte
     isso pela sua própria regra — e, de quebra, leva o contraste do
     rótulo de 2,9:1 para 6,75:1.
     Para voltar ao terracota: --acao:#D68D7C e --acao-tinta:#35190F
     (6,1:1). Não use branco sobre o terracota: dá 2,6:1. */
  --acao:          var(--color-primary);
  --acao-d:        var(--color-primary-dark);
  --acao-tinta:    var(--color-text-inverse);   /* 6,75:1 */
  --acao-borda:    transparent;

  --fonte-display: "Lora", Georgia, "Times New Roman", serif;
  --fonte-corpo:   "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio:      18px;
  --raio-sm:   12px;
  --maxw:      1160px;
  --medida:    66ch;          /* medida máxima de leitura confortável */
  --sombra:    0 6px 20px rgba(5,100,122,.07);
  --sombra-lg: 0 16px 40px rgba(5,100,122,.12);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  font-family:var(--fonte-corpo);
  font-size:18px;
  line-height:1.75;
  text-align:left;            /* nunca justificado */
  color:var(--tinta);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3{
  margin:0;font-family:var(--fonte-display);font-weight:600;
  line-height:1.22;color:var(--petroleo);
  text-wrap:balance;   /* distribui as linhas do título; navegador antigo ignora */
}
h1{font-size:clamp(27px,4.1vw,40px);line-height:1.18;letter-spacing:-.01em;}
h2{font-size:clamp(25px,3.4vw,35px);}
h3{font-size:20px;line-height:1.35;}
p{margin:0;}
em{font-style:italic;}
button,input{font-family:inherit;font-size:inherit;}

:focus-visible{outline:3px solid var(--petroleo);outline-offset:3px;border-radius:6px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.centro{text-align:center;margin-top:38px;}
/* Frase de apoio abaixo de um CTA. Usa os mesmos tokens de cor e tamanho
   da .hero-nota, para não introduzir estilo novo na página. */
.cta-apoio{margin-top:14px;font-size:15px;color:var(--tinta-suave);}
/* Parágrafo centralizado antes de um CTA: só limita a medida de leitura,
   para o texto não atravessar os 1160px do container. Sem estilo novo. */
.centro .sec-sub{max-width:60ch;margin:0 auto 26px;}
.skip-link{
  position:absolute;left:14px;top:-70px;z-index:1000;
  background:var(--petroleo);color:#fff;padding:14px 20px;border-radius:10px;
  font-weight:700;transition:top .2s;
}
.skip-link:focus{top:14px;}
/* Esconde visualmente, mas mantém para leitor de tela. Usado no botão do
   header quando a tela é estreita demais para o rótulo aparecer escrito. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Cada <symbol> traz o próprio fill/stroke; aqui só o tamanho.
   A cor vem de `color` por herança, via currentColor. */
.icon{width:1em;height:1em;flex-shrink:0;}
.icon-card{font-size:30px;color:var(--color-secondary);margin-bottom:12px;}

/* ---------- EYEBROW / SELOS ---------- */
.eyebrow{
  display:inline-block;font-family:var(--fonte-corpo);font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-texto);margin-bottom:12px;line-height:1.4;
}
.eyebrow.on-dark{color:var(--color-highlight-soft);}   /* 5,77:1 sobre o petróleo */

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 24px;
  border:2px solid transparent;border-radius:999px;
  font-family:var(--fonte-corpo);font-weight:700;font-size:16px;line-height:1.3;
  text-align:center;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn .icon{font-size:20px;}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px;}
.btn-lg{min-height:56px;padding:16px 30px;font-size:17px;}

.btn-wa{background:var(--acao);color:var(--acao-tinta);border-color:var(--acao-borda);font-weight:800;}
.btn-wa:hover{background:var(--acao-d);border-color:var(--acao-borda);}
.btn-outline{background:transparent;color:var(--petroleo);border-color:var(--borda);}
.btn-outline:hover{border-color:var(--petroleo);background:rgba(5,100,122,.06);}
.btn-outline-white{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.6);}
.btn-outline-white:hover{background:rgba(255,255,255,.14);}

/* Com a paleta nova o botão primário virou petróleo — a mesma cor do fundo
   das seções escuras, onde ele simplesmente desaparecia. Ali ele inverte:
   superfície branca com texto petróleo, 6,75:1, exatamente o par que a
   paleta define para fundo escuro. */
.bg-escura .btn-wa{background:var(--color-surface);color:var(--color-primary);}
.bg-escura .btn-wa:hover{background:var(--color-highlight-soft);color:var(--color-primary-dark);}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,250,247,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}
.nav{display:flex;align-items:center;gap:18px;min-height:74px;}
.logo-link{display:inline-flex;align-items:center;min-height:46px;}
.logo-img{height:46px;width:auto;max-width:190px;object-fit:contain;}
.links{display:none;gap:22px;margin-left:auto;font-size:15.5px;font-weight:600;}
/* min-height de 44px: em tablet no modo paisagem o menu de desktop é
   operado por toque, e alvos menores que isso erram o clique. */
.links a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:6px 2px;border-bottom:2px solid transparent;
  color:var(--tinta);white-space:nowrap;
}
.links a:hover{border-color:var(--coral);color:var(--petroleo);}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.cta-full{display:none;}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:transparent;border:1px solid var(--borda);
  border-radius:var(--raio-sm);color:var(--petroleo);cursor:pointer;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;padding:92px 0 112px;
  background:linear-gradient(175deg,#FBF5F0 0%,var(--color-background) 55%,#FDF7F2 100%);
}

/* ---------- FUNDO DECORATIVO DO HERO ----------
   Quatro peças da identidade visual, uma por canto. Todas sangram para
   fora da seção (offsets negativos) para que nenhuma forme retângulo ou
   moldura — o conjunto precisa ler como um fundo só, não como imagens
   coladas. Ficam atrás de tudo e não capturam clique.

   REGRA QUE NÃO PODE SER QUEBRADA: a massa opaca das formas petróleo
   (topo-esquerdo e base-direita) não pode ficar atrás de texto nem do
   logo. Petróleo sobre petróleo desaparece; petróleo sob a headline
   derruba o contraste. Os tamanhos abaixo foram medidos com esse fim. */
.hero-fundo{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.hf{
  position:absolute;display:block;
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.hf-topo-esq{
  top:-46px;left:-58px;width:196px;height:133px;
  background-image:url("assets/hero-forma-topo-esq.webp");
}
.hf-base-dir{
  bottom:-92px;right:-72px;width:222px;height:200px;
  background-image:url("assets/hero-forma-base-dir.webp");
}
.hf-arvore-dir{
  top:-16px;right:-30px;width:210px;height:168px;opacity:.75;
  background-image:url("assets/hero-arvore-topo-dir.webp");
}
.hf-arvore-esq{
  bottom:-24px;left:-34px;width:198px;height:158px;opacity:.65;
  background-image:url("assets/hero-arvore-base-esq.webp");
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;}
.hero-texto{max-width:var(--medida);}
.hero .sub{font-size:19.5px;color:var(--tinta-suave);margin-top:16px;}
.hero-bullets{display:grid;gap:11px;margin:26px 0;font-weight:600;font-size:16.5px;}
.hero-bullets li{display:flex;align-items:flex-start;gap:11px;line-height:1.5;}
.hero-bullets .icon{font-size:23px;color:var(--color-secondary);margin-top:2px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;}
.hero-nota{margin-top:18px;font-size:15px;color:var(--tinta-suave);max-width:46ch;}
/* O logo é parte do fundo: sem cartão, sem borda, sem sombra.
   Lockup empilhado (selo em cima, assinatura embaixo), proporção 1,59:1. */
.hero-visual{display:flex;justify-content:center;}
.hero-visual img{width:100%;max-width:340px;height:auto;}

/* ---------- FAIXA DE IDENTIFICAÇÃO ---------- */
.faixa{background:var(--petroleo);color:var(--branco);padding:20px 0;}
.faixa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.selo{display:flex;align-items:center;gap:11px;font-size:15.5px;line-height:1.45;}
.selo .icon{font-size:23px;opacity:.95;}
.selo-id strong{font-weight:700;}

/* ---------- SEÇÕES ---------- */
.section{padding:64px 0;}
.bg-alt{background:var(--color-info-soft);}
.bg-suave{background:var(--color-highlight-soft);}
.bg-escura{background:var(--petroleo-esc);color:rgba(255,255,255,.9);}
.bg-escura h2,.bg-escura h3{color:var(--branco);}
.sec-head{max-width:var(--medida);margin-bottom:38px;}
.sec-sub{color:var(--tinta-suave);margin-top:14px;font-size:17.5px;}
.bg-escura .sec-sub{color:rgba(255,255,255,.8);}
.texto-duplo{display:grid;gap:16px;max-width:var(--medida);margin-bottom:38px;font-size:17.5px;}
.texto-duplo strong{color:var(--petroleo);}

/* ---------- GRIDS E CARDS ---------- */
.grid-2,.grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
.card{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:28px;box-shadow:var(--sombra);
}
.card h3{margin-bottom:10px;}
.card p{color:var(--tinta-suave);font-size:16.5px;}
/* Cards com mais de um parágrafo: sem esta margem eles colam e viram um
   bloco só. `p{margin:0}` é global, então o respiro precisa vir daqui. */
.card p + p{margin-top:12px;}
.card-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none;}
.card-dark p{color:rgba(255,255,255,.85);}
.card-dark a{color:var(--color-highlight-soft);text-decoration:underline;text-underline-offset:3px;}
.card-servico{display:flex;flex-direction:column;border-top:5px solid var(--coral);}
/* Rodapé dos cards de atendimento.
   Ocupa o espaço dos três botões de WhatsApp removidos em 31/08/2026 — a
   seção passou a ter um CTA só, no fim. Não é interativo de propósito: o
   que fica aqui é a resposta de "quem entra na sessão", dúvida que aparece
   antes de escolher o formato. `margin-top:auto` mantém os três rodapés
   alinhados na base mesmo com textos de tamanhos diferentes, para não
   sobrar buraco em nenhum card.
   Seletor com duas classes porque `.card p + p` (0,1,2) venceria `.card-quem`. */
.card .card-quem{
  display:flex;align-items:center;gap:13px;
  margin-top:auto;padding-top:20px;
  border-top:1px solid var(--borda);
  font-size:15.5px;line-height:1.5;color:var(--tinta-suave);
}
.quem-chip{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--color-highlight-soft);color:var(--color-primary);  /* mesmo par de .passo-num */
}
.quem-chip .icon{font-size:22px;}
.card-pratica{background:var(--branco);}
.lista-check{display:grid;gap:9px;margin:16px 0 22px;font-size:15.5px;color:var(--tinta-suave);}
.lista-check li{display:flex;align-items:flex-start;gap:9px;line-height:1.5;}
.lista-check .icon{color:var(--color-secondary);font-size:19px;margin-top:3px;}

/* ---------- PROCESSO ---------- */
.passos{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;counter-reset:passo;}
.passo{
  position:relative;background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--raio);padding:28px 26px 26px;
}
.passo-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;margin-bottom:14px;
  background:var(--color-highlight-soft);color:var(--color-primary);   /* 5,77:1 — sobre o rosa #EAB2B2 seria 3,7:1 */
  font-family:var(--fonte-display);font-size:20px;font-weight:600;
}
.passo h3{margin-bottom:8px;}
.passo p{color:var(--tinta-suave);font-size:16.5px;}

/* ---------- SOBRE ---------- */
.sobre-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center;}
.sobre-grid p{margin-bottom:16px;color:var(--tinta-suave);max-width:var(--medida);}
.sobre-grid .hero-ctas{margin-top:26px;}
/* Retrato da Mariana. O bloco rosa deslocado atrás ecoa o círculo do
   logo e dá alguma presença de marca à foto sem invadi-la. */
.foto-sobre{position:relative;margin:0;max-width:430px;}
.foto-sobre::before{
  content:"";position:absolute;inset:22px -20px -22px 22px;
  background:var(--rosa);border-radius:var(--raio);opacity:.5;
}
.foto-sobre img{
  position:relative;width:100%;height:auto;
  border-radius:var(--raio);box-shadow:var(--sombra-lg);
}
@media (max-width:899px){
  .foto-sobre{margin:0 auto;}
  .foto-sobre::before{inset:18px -14px -18px 18px;}
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px;}
.faq details{
  background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--raio-sm);padding:2px 20px;
}
.faq details[open]{border-color:var(--coral);}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;min-height:48px;
  font-family:var(--fonte-display);font-size:18px;font-weight:600;color:var(--petroleo);
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{font-size:26px;line-height:1;color:var(--color-secondary);transition:transform .2s ease;}
.faq details[open] .plus{transform:rotate(45deg);}
.faq details p{padding:0 0 20px;color:var(--tinta-suave);font-size:16.5px;max-width:var(--medida);}

/* ---------- CTA FINAL ---------- */
.final-cta{padding:70px 0;text-align:center;}
.final-cta h2{max-width:18ch;margin:0 auto;}
.final-cta p{margin:16px auto 30px;max-width:56ch;color:rgba(255,255,255,.85);}
.final-cta-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------- RODAPÉ ---------- */
footer{background:var(--color-primary);color:rgba(255,255,255,.85);padding:54px 0 26px;font-size:16px;border-top:1px solid rgba(255,255,255,.14);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;}
.foot-logo{height:52px;width:auto;max-width:210px;object-fit:contain;margin-bottom:16px;}
.foot-col p{max-width:42ch;font-size:15.5px;}
.foot-titulo{color:var(--branco);margin-bottom:14px;font-size:17px;font-family:var(--fonte-display);}
.foot-col li{margin-bottom:6px;line-height:1.5;}
/* Links do rodapé com 44px de altura de toque — no celular eles ficam
   próximos uns dos outros e é onde mais se erra o dedo. */
.foot-col a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:3px;
}
.foot-col a:hover{color:var(--branco);}
.foot-identificacao{
  margin-top:36px;padding:16px 20px;border-radius:var(--raio-sm);
  background:rgba(255,255,255,.08);color:var(--branco);font-size:16px;
}
.foot-aviso{
  margin-top:14px;padding:16px 20px;border-radius:var(--raio-sm);
  border:1px solid rgba(234,178,179,.5);
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.88);
}
.foot-bottom{
  margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;opacity:.75;
}

/* ---------- BOTÃO FIXO DE WHATSAPP (MOBILE) ---------- */
.sticky-wa{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:14px 20px;border-radius:999px;
  background:var(--acao);color:var(--acao-tinta);font-weight:800;font-size:16.5px;
  /* O anel branco existe porque este botão é fixo: ele passa por cima de
     seções claras E das seções escuras (#05647A). Sem o anel, o botão
     desaparece dentro da faixa CFP, do bloco de privacidade, do CTA final
     e do rodapé — todos na mesma cor dele. */
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 10px 28px rgba(5,100,122,.30);
}
.sticky-wa .icon{font-size:23px;}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;}
}

/* =====================================================================
   BREAKPOINTS
===================================================================== */
@media (min-width:640px){
  .faixa-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cta-full{display:inline;}
  .cta-short{display:none;}
}

@media (min-width:900px){
  .links{display:flex;}
  .burger{display:none;}
  .nav-actions{margin-left:0;}
  .hero{padding:104px 0 92px;}   /* encurtado para o CTA caber acima da dobra em 1366x768 */
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:52px;}
  .hero-visual img{max-width:440px;}
  .hf-topo-esq{top:-96px;left:-112px;width:352px;height:238px;}
  .hf-base-dir{bottom:-126px;right:-112px;width:452px;height:408px;}
  .hf-arvore-dir{top:-34px;right:-52px;width:366px;height:293px;}
  .hf-arvore-esq{bottom:-44px;left:-58px;width:346px;height:276px;}
  .section{padding:92px 0;}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .passos{grid-template-columns:repeat(4,minmax(0,1fr));}
  .sobre-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;}
  .foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));}
  .sticky-wa{display:none;}   /* no desktop os CTAs da página já bastam */
}

/* ---------- TELAS ESTREITAS (até 479px) ----------
   Em 360px o header não comporta logo + rótulo + hambúrguer sem empurrar
   a página para o lado. Aqui o logo encolhe e, abaixo de 400px, o botão
   fica só com o ícone — o rótulo continua existindo para leitor de tela.
   O CTA do WhatsApp não some: o hero e a barra fixa continuam a um toque. */
@media (max-width:479px){
  .logo-link{min-height:44px;}
  .logo-img{height:40px;max-width:148px;}
  .nav{gap:10px;min-height:66px;}
  .nav-actions{gap:8px;}
  .btn-sm{padding:10px 15px;}
}
@media (max-width:399px){
  .btn-sm .cta-short{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .nav-actions .btn-wa{padding:10px 13px;}
  .logo-img{max-width:132px;}
}

/* ---------- MENU MOBILE ---------- */
@media (max-width:899px){
  .nav-actions .btn-outline{display:none;}
  .links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--fundo);border-bottom:1px solid var(--borda);
    padding:8px 22px 18px;box-shadow:var(--sombra-lg);
  }
  .links.open{display:flex;}
  .links a{padding:14px 0;border-bottom:1px solid var(--borda);min-height:48px;}
  .nav{position:relative;}
  body{padding-bottom:90px;}   /* espaço para o botão fixo */
}