/* ==========================================================================
   Laura & Cris — COMPONENTES
   Os valores do sistema (cor, escalas, traço, movimento) vivem em
   css/tokens.css, que precisa ser carregado ANTES deste arquivo.
   Aqui só existem componentes, e todo número sai de um token.
   ========================================================================== */

@import url('fontes.css?v=27e3649c');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--branco); color:var(--preto);
  font-family:var(--serif); font-size:var(--t-4); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- utilitários tipográficos ---------- */
.kicker{
  font-family:var(--sans); font-weight:300;
  font-size:var(--t-1); letter-spacing:var(--ls-3); text-transform:uppercase;
  color:var(--cinza); margin:0 0 var(--e-4);
}
h1,h2,h3,h4{font-weight:300;margin:0;letter-spacing:-.005em}
h1{font-size:var(--t-h1);line-height:1.02}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-6);line-height:1.25}
p{margin:0 0 1.1em}
.lead{font-size:var(--t-5);line-height:1.75;color:var(--grafite);max-width:38ch}
.prosa{color:var(--grafite);max-width:var(--leitura)}
.prosa p{font-size:var(--t-4);line-height:1.85}
.meta{font-family:var(--sans);font-weight:300;font-size:var(--t-1);letter-spacing:var(--ls-1);text-transform:uppercase;color:var(--cinza)}

/* ---------- botões: três níveis, sem cor ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:var(--t-1); letter-spacing:var(--ls-2); text-transform:uppercase;
  padding:var(--e-4) var(--e-6); text-decoration:none;
  border:var(--borda) solid transparent;
  transition:background var(--transicao), color var(--transicao),
             border-color var(--transicao);
}
.btn--primario{background:var(--preto);color:var(--branco)}
.btn--primario:hover{background:var(--grafite)}
.btn--secundario{background:transparent;color:var(--preto);border-color:var(--preto)}
.btn--secundario:hover{background:var(--preto);color:var(--branco)}
.btn--texto{
  padding:var(--e-2) 0; border-bottom:var(--borda) solid var(--cinza-claro);
  color:var(--cinza); letter-spacing:var(--ls-1);
}
.btn--texto:hover{color:var(--preto);border-color:var(--preto)}

/* ---------- navegação ---------- */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:40; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
}
.nav--solida{position:relative;border-bottom:var(--borda) solid var(--linha);background:var(--branco)}
.nav__marca{font-family:var(--sans);font-weight:400;font-size:var(--t-2);letter-spacing:var(--ls-4);text-transform:uppercase;text-decoration:none}
.nav__links{display:flex;gap:var(--e-6);list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--sans);font-weight:300;font-size:var(--t-1);letter-spacing:var(--ls-2);
  text-transform:uppercase;text-decoration:none;padding:var(--e-2) 0;
  border-bottom:var(--borda) solid transparent;
}
.nav__links a:hover,.nav__links a[aria-current=page]{border-color:currentColor}

/* O botao do menu so existe no celular; no desktop os links cabem na barra. */
.nav__abre{display:none;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.nav__sentinela{position:absolute;top:0;left:0;width:1px;height:80px;pointer-events:none}
/* No desktop o layout E deixa a foto só à esquerda: a marca fica sobre a foto
   (branca) e os links caem sobre o painel branco, então precisam ser escuros.
   No mobile a foto ocupa a tela inteira e tudo volta a ser branco. */
.nav--sobre-foto .nav__marca{color:var(--branco);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav--sobre-foto .nav__links a{color:var(--preto)}
@media (max-width:750px){
  .nav--sobre-foto .nav__links a{color:var(--branco)}
}

/* ==========================================================================
   REGIME A — split com imagem fixa (Início, Terapeutas, Agendamentos, Grupos)
   ========================================================================== */
.split{display:flex;align-items:flex-start;min-height:100vh}
.split__media{
  position:sticky; top:0; flex:0 0 var(--media-w);
  height:100vh; overflow:hidden; background:var(--preto);
}
.split__media img{
  width:100%;height:100%;object-fit:cover;object-position:52% 26%;
  filter:grayscale(1);
}
.split__body{flex:1 1 auto;min-width:0;padding:calc(var(--nav-h) + var(--e-7)) var(--gutter) var(--e-9)}

/* ---------- blocos de conteúdo ---------- */
.bloco{padding:var(--e-7) 0;border-top:var(--borda) solid var(--linha)}
.bloco:first-of-type{border-top:0;padding-top:0}
.tabela-preco{margin:var(--e-5) 0 0;max-width:34rem}
.tabela-preco__linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-4);
  padding:var(--e-4) 0;border-bottom:var(--borda) solid var(--linha);
}
.tabela-preco__nome{font-family:var(--sans);font-weight:300;font-size:var(--t-2);letter-spacing:var(--ls-1);text-transform:uppercase}
.tabela-preco__valor{font-size:var(--t-6)}

.pessoas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--e-5);margin-top:var(--e-5)}
.pessoa__foto{aspect-ratio:3/4;overflow:hidden;background:var(--offwhite)}
.pessoa__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1)}
/* recorte mais fechado: tira o fundo urbano da foto de celular da Cris */
.pessoa__foto--fechado img{object-position:50% 16%;transform:scale(1.22)}

.pessoa__nome{margin:var(--e-3) 0 var(--e-1);font-size:var(--t-5)}
.pessoa__texto{font-size:var(--t-3);line-height:1.7;color:var(--grafite);margin:0}

/* a ÚNICA página com cor: Terapeutas. Sem filtro: a cor é a original. */
.em-cor img{filter:none !important}

/* ---------- depoimentos ---------- */
.depo{
  display:grid; grid-template-columns:1fr 190px;
  grid-template-rows:auto 1fr; gap:var(--e-1) var(--e-6); align-items:start;
  padding:var(--e-6) 0; border-bottom:var(--borda) solid var(--linha);
}
.depo:first-child{padding-top:0}
.depo:last-child{border-bottom:0}
/* o depoimento manda; o print é selo discreto na coluna da direita */
.depo__texto{grid-column:1;grid-row:1}
.depo__fonte{grid-column:1;grid-row:2;align-self:start}
.depo__print{grid-column:2;grid-row:1 / span 2}
.depo__texto{
  margin:0; font-size:var(--t-5); line-height:1.78; color:var(--preto);
  text-indent:-.42em;  /* a aspa de abertura fica fora da caixa de texto */
}
.depo__texto::before{content:'\201C'}
.depo__texto::after{content:'\201D'}
.depo__fonte{
  font-family:var(--sans); font-weight:300; font-size:var(--t-2); letter-spacing:var(--ls-1);
  text-transform:uppercase; color:var(--cinza); margin:var(--e-4) 0 0;
}
/* o print entra como selo de autenticidade, em preto e branco e sem nome */
.depo__print{margin:0}
.depo__print img{
  width:100%; border:var(--borda) solid var(--linha); filter:grayscale(1) contrast(1.04);
}
@media (max-width:900px){
  .depo{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:var(--e-3)}
  .depo__texto{grid-column:1;grid-row:1;font-size:var(--t-4)}
  .depo__fonte{grid-column:1;grid-row:2}
  .depo__print{grid-column:1;grid-row:3;max-width:210px}
}

/* ==========================================================================
   REGIME B — imagem se despede (Blog, Post)
   ========================================================================== */
.capa{position:relative;height:62vh;min-height:360px;overflow:hidden;background:var(--preto)}
.capa img{width:100%;height:100%;object-fit:cover;object-position:56% 24%;filter:grayscale(1) brightness(.62)}
.capa__texto{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--e-7);color:var(--branco)}
.capa__texto .kicker{color:rgba(255,255,255,.75)}
.leitura{max-width:var(--leitura);margin:0 auto;padding:var(--e-8) var(--gutter) var(--e-9)}

/* o padding vertical vivia inline no blog.html — é da lista, não da página */
.lista-posts{max-width:var(--leitura);margin:0 auto;padding:var(--e-8) var(--gutter) var(--e-9)}
.lista-posts__intro{margin:0 0 var(--e-3)}
.post-item{display:block;text-decoration:none;padding:var(--e-6) 0;border-bottom:var(--borda) solid var(--linha)}
.post-item h3{margin:var(--e-2) 0 var(--e-2);transition:opacity var(--transicao)}
.post-item:hover h3{opacity:.62}
.post-item p{color:var(--grafite);font-size:var(--t-4);margin:0}

/* ==========================================================================
   REGIME C — coluna única, sem imagem (páginas legais)
   ========================================================================== */
.legal{max-width:var(--leitura);margin:0 auto;padding:var(--e-8) var(--gutter) var(--e-9)}
/* h1 de página legal e da 404: um degrau abaixo do título de página normal */
.titulo-legal{font-size:var(--t-h1-legal);margin:0 0 var(--e-6)}
/* aviso emoldurado dentro de texto legal (falta revisão de advogado) */
.aviso{border:var(--borda) solid var(--linha);padding:var(--e-3) var(--e-4)}
.legal h2{margin:var(--e-7) 0 var(--e-3);font-size:var(--t-7)}
.legal h2:first-of-type{margin-top:var(--e-6)}
.legal ul{padding-left:var(--e-5);color:var(--grafite)}
.legal li{margin-bottom:var(--e-2);line-height:1.8}

/* ---------- rodapé ---------- */
.rodape{background:var(--preto);color:var(--branco);padding:var(--e-8) var(--gutter) var(--e-6)}
.rodape a{color:var(--branco)}
.rodape__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e-6);max-width:1100px}
.rodape__t{font-family:var(--sans);font-weight:300;font-size:var(--t-1);letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--cinza-claro);margin:0 0 var(--e-3)}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:var(--e-2)}
.rodape li a{font-size:var(--t-3);text-decoration:none;border-bottom:var(--borda) solid transparent}
.rodape li a:hover{border-color:var(--cinza-medio)}
.rodape__base{
  margin-top:var(--e-7);padding-top:var(--e-5);
  border-top:var(--borda) solid var(--linha-escura);
  font-family:var(--sans);font-weight:300;font-size:var(--t-1);letter-spacing:var(--ls-1);
  color:var(--cinza-medio);   /* 5.78:1 sobre o preto do rodapé */
  display:flex;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap;
}

/* ==========================================================================
   MOBILE — abaixo de 750px: "foto fixa atrás" (Mobile 2)
   A foto fica parada no fundo; o painel branco desliza por cima.
   ========================================================================== */
@media (max-width:750px){
  /* ---- menu do celular ----
     Ate aqui os links eram escondidos e ponto: quem abria o site no celular
     so chegava nas outras paginas pelo rodape. Agora eles viram um painel
     que o botao de tres tracos abre. */
  /* A barra sai do fluxo por margem negativa: sticky a coloca no fluxo, e sem
     isso ela empurraria o hero de tela cheia --nav-h para baixo. */
  .nav{position:sticky;top:0;margin-bottom:calc(var(--nav-h) * -1);transition:background-color .25s ease}
  /* Sobre a foto do hero a barra e transparente e so ganha fundo depois de
     rolar, para nao cobrir a capa o tempo todo. Quem liga isso e o
     IntersectionObserver do menu.js. Nas paginas de fundo branco
     (.nav--solida) nao ha o que revelar: la a barra ja e opaca. */
  .nav--sobre-foto.nav--rolada{background:var(--preto)}
  .nav--sobre-foto.nav--rolada .nav__marca{text-shadow:none}
  /* Com o painel aberto a barra faz parte dele: preta, marca branca. */
  .nav--aberta{background:var(--preto)}
  .nav--aberta .nav__marca{color:var(--branco);text-shadow:none}

  .nav__abre{
    display:flex;align-items:center;justify-content:center;
    width:var(--toque);height:var(--toque);
    margin-right:calc(var(--gutter) * -.5);  /* alinha o traco, nao a caixa */
    color:var(--preto);
  }
  .nav--sobre-foto .nav__abre,.nav--aberta .nav__abre{color:var(--branco)}

  /* Os tres tracos sao um elemento so mais dois pseudos: o do meio some e os
     de fora giram para formar o X quando o painel abre. */
  .nav__abre__traco,
  .nav__abre__traco::before,
  .nav__abre__traco::after{
    content:'';display:block;width:22px;height:1px;background:currentColor;
    transition:transform .25s ease,opacity .2s ease;
  }
  .nav__abre__traco{position:relative}
  .nav__abre__traco::before{position:absolute;top:-7px;left:0}
  .nav__abre__traco::after{position:absolute;top:7px;left:0}
  .nav--aberta .nav__abre__traco{background:transparent}
  .nav--aberta .nav__abre__traco::before{transform:translateY(7px) rotate(45deg)}
  .nav--aberta .nav__abre__traco::after{transform:translateY(-7px) rotate(-45deg)}

  .nav__links{
    position:fixed;inset:0;
    display:flex;flex-direction:column;justify-content:center;
    gap:var(--e-6);padding:var(--nav-h) var(--gutter) var(--e-9);
    background:var(--preto);
    /* fechado: invisivel e fora do alcance do dedo e do leitor de tela */
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
    /* A .nav e sticky com z-index, entao ela abre um contexto de
       empilhamento proprio: este z-index disputa com a marca e o botao, que
       sao irmaos aqui dentro, e nao com o resto da pagina. O painel precisa
       ficar ABAIXO deles, senao cobre o X que o fecha. */
    z-index:0;
  }
  .nav__marca,.nav__abre{position:relative;z-index:1}
  .nav--aberta .nav__links{opacity:1;visibility:visible}
  /* inline-flex, e nao block: a regra de :hover/[aria-current] sublinha o
     link com border-bottom, e em block a linha atravessaria a tela inteira.
     O alvo de toque de 44px e garantido aqui mesmo, por isso este seletor
     saiu da lista do item 2 la embaixo. */
  .nav--sobre-foto .nav__links a,.nav__links a{
    color:var(--branco);font-size:var(--t-4);letter-spacing:var(--ls-4);
    display:inline-flex;align-items:center;min-height:var(--toque);
    padding:var(--e-2) 0;
  }
  .nav__links li{list-style:none}

  .split{display:block;position:relative}
  .split__media{
    position:sticky; top:0; height:100vh; width:100%; flex:none;
  }
  /* o título é branco sobre a foto: sem escurecer a imagem ele desaparece nas
     áreas claras (ombro, flores). Medido em 390x844 — o texto precisa de 4.5:1
     contra o pixel mais claro atrás dele, não contra a média da foto. */
  .split__media img{object-position:52% 22%;filter:grayscale(1) brightness(.68)}
  .split__media::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 20%,
      rgba(0,0,0,.46) 44%, rgba(0,0,0,.52) 62%, rgba(0,0,0,.72) 100%);
  }
  .split__body{
    position:relative; z-index:2; background:var(--branco);
    margin-top:-34vh;                 /* o painel sobe por cima da foto */
    border-radius:var(--raio) var(--raio) 0 0;
    box-shadow:0 -18px 44px rgba(0,0,0,.26);
    padding:var(--e-6) var(--gutter) var(--e-8);
  }
  /* o título por cima da foto, antes do painel subir */
  .espia{
    position:absolute; left:var(--gutter); right:var(--gutter); top:32vh;
    z-index:1; color:var(--branco); text-shadow:0 2px 22px rgba(0,0,0,.55);
  }
  .espia .kicker{color:rgba(255,255,255,.82)}
  .espia__titulo{font-size:var(--t-h1-foto);font-family:var(--serif);font-weight:300;
                 line-height:1.02;letter-spacing:-.01em;margin:0}

  /* O título já apareceu sobre a foto: dentro do painel ele não se repete PARA
     OS OLHOS. Para o leitor de tela ele continua existindo, porque é o h1 da
     página e some-lo deixaria o documento sem título principal.

     Por isso não é display:none. A cópia visível sobre a foto é um parágrafo
     com aria-hidden, e o h1 é este, escondido só da vista. Antes era o
     contrário, e no desktop, onde o "espia" inteiro some, a página ficava sem
     h1 nenhum na árvore de acessibilidade. */
  .bloco--titulo .kicker{display:none}
  .bloco--titulo h1{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .bloco--titulo{padding-top:0}

  .capa{height:56vh}
  .pessoas{grid-template-columns:1fr;gap:var(--e-6)}
  .btn{display:block;text-align:center}
  .btn--texto{display:inline-block}
}

/* no desktop o "espia" não existe — o título vive no painel */
@media (min-width:751px){ .espia{display:none} }

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  .split__media{position:relative;height:70vh}
}
:where(a,button,.btn):focus-visible{outline:2px solid var(--preto);outline-offset:3px}

/* --- espacos de bloco que viviam inline no HTML --------------------------
   Eram 38 style= espalhados por 14 paginas, com dez valores diferentes para
   duas intencoes so: respirar depois de um paragrafo, e abrir espaco antes de
   uma acao. Agora sao duas classes. */
.apos-texto{margin-top:var(--e-5)}
.antes-acao{margin:var(--e-7) 0 0}  /* casa com o padding-bottom do .bloco.
   Duas correcoes numa linha so. O topo era --e-6 (32px) contra os 48px que o
   bloco abre embaixo, e o botao ficava visivelmente colado na linha de cima.
   A margem de baixo e zerada porque e um <p>: os 17.6px que o navegador da de
   grace somavam aos 48px do bloco e desequilibravam o outro lado. Nada depende
   dela — nos posts quem abre o espaco seguinte e o .compartilhar, que tem o
   seu proprio --e-7. */
.pessoa__papel{margin:var(--e-1) 0 var(--e-3)}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gutter);top:var(--e-2);z-index:99;background:var(--branco);padding:var(--e-2) var(--e-4)}

/* ---------- compartilhamento de post ---------- */
.compartilhar{margin-top:var(--e-7);padding-top:var(--e-5);border-top:var(--borda) solid var(--linha)}
.compartilhar__t{
  font-family:var(--sans);font-weight:300;font-size:var(--t-1);letter-spacing:var(--ls-3);
  text-transform:uppercase;color:var(--cinza);margin:0 0 var(--e-4);
}
.compartilhar__acoes{display:flex;gap:var(--e-3);flex-wrap:wrap}
.compartilhar__acoes .btn{font-size:var(--t-1);padding:var(--e-3) var(--e-5);cursor:pointer;font-family:var(--sans)}
.compartilhar__nota{
  font-family:var(--sans);font-weight:300;font-size:var(--t-2);line-height:1.7;
  color:var(--cinza);margin:var(--e-4) 0 0;max-width:46ch;
}
@media (max-width:750px){
  .compartilhar__acoes{flex-direction:column}
  .compartilhar__acoes .btn{display:block;text-align:center;width:100%}
}

/* ---------- posts do blog ---------- */
.subtitulo-post{
  font-size:var(--t-5);line-height:1.6;color:var(--cinza);margin:0 0 var(--e-6);
  padding-bottom:var(--e-5);border-bottom:var(--borda) solid var(--linha);
}
.citacao{
  margin:var(--e-6) 0;padding:0 0 0 var(--e-5);border-left:2px solid var(--preto);
  font-size:var(--t-6);line-height:1.62;color:var(--preto);
}
.citacao::before{content:'\201C'}
.citacao::after{content:'\201D'}
.infografico{margin:var(--e-7) 0 var(--e-6)}
.infografico img{width:100%;border:var(--borda) solid var(--linha)}
.infografico figcaption{
  font-family:var(--sans);font-weight:300;font-size:var(--t-2);line-height:1.7;
  color:var(--cinza);margin-top:var(--e-3);
}
.nota-legal{
  font-family:var(--sans);font-weight:300;font-size:var(--t-2);line-height:1.75;
  color:var(--grafite);background:var(--offwhite);border-left:2px solid var(--cinza-medio);
  padding:var(--e-4);margin:var(--e-6) 0 var(--e-4);
}
.referencia{
  font-family:var(--sans);font-weight:300;font-size:var(--t-2);line-height:1.75;
  color:var(--cinza);margin:0;padding-top:var(--e-4);border-top:var(--borda) solid var(--linha);
}
/* a foto de estúdio é mais aberta que a de celular: aproxima para as duas
   terapeutas aparecerem no mesmo enquadramento, lado a lado */
.pessoa__foto--retrato img{object-position:50% 22%;transform:scale(1.5)}

/* ---------- capa para foto vertical ----------
   Retrato vertical em faixa horizontal vira close desconfortável. Aqui a foto
   fica confinada a uma coluna à direita e o texto ocupa o resto.
   Mantive o texto em position:absolute, como nas outras capas: as tentativas
   com flex e com grid deixaram o bloco medindo certo e renderizando invisível. */
.capa--retrato{height:auto;min-height:58vh}
.capa--retrato .capa__foto{
  position:absolute; top:0; right:0; bottom:0; width:38%; overflow:hidden;
}
.capa--retrato .capa__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  filter:grayscale(1) brightness(.86);
}
.capa--retrato .capa__texto{right:44%}
@media (max-width:750px){
  .capa--retrato{min-height:0;height:auto;padding-bottom:0}
  .capa--retrato .capa__foto{position:relative;width:100%;height:44vh}
  .capa--retrato .capa__texto{position:relative;right:auto;left:auto;bottom:auto;
    padding:28px var(--gutter) 34px;background:var(--preto)}
}
/* foto de corpo inteiro: o rosto fica no alto do quadro, então a miniatura
   3:4 precisa subir o recorte para não cortar a cabeça */
.pessoa__foto--alto img{object-position:50% 6%}

/* ==========================================================================
   Correções da auditoria de acessibilidade (19/09/2026)
   Rodei o protótipo em 360, 390, 768 e 1440 e apareceram três problemas.
   ========================================================================== */

/* 1. Uma tag h1 por página, e ela precisa existir nos dois layouts.
   O título aparece duas vezes: sobre a foto, no celular, e no painel, no
   desktop. Uma das duas tinha que ser o h1 e a outra uma cópia visual.

   A primeira versão escolheu a de cima. Funcionava no celular e falhava no
   desktop, onde o "espia" inteiro é display:none: a página ficava SEM h1 na
   árvore de acessibilidade, e quem navega por títulos não achava o começo.

   Agora o h1 é o do painel, que existe nos dois layouts. No celular ele fica
   escondido só da vista, nunca com display:none, e a cópia sobre a foto é um
   parágrafo com aria-hidden. */
.titulo-painel{
  font-family:var(--serif); font-weight:300;
  font-size:var(--t-h1); line-height:1.02; letter-spacing:-.005em;
  margin:0;
}

/* 2. Alvo de toque no celular.
   Doze links ficavam abaixo de 40px de altura. O mínimo recomendado é 44px,
   porque dedo não tem a precisão de um mouse. */
@media (max-width:750px){
  .rodape li a,
  /* .nav__links a sai daqui: o painel do menu resolve o alvo de toque com
     inline-flex, porque block esticaria o sublinhado do link ativo. */
  .post-item{
    display:block;
    min-height:var(--toque);
    padding-top:var(--e-2);
    padding-bottom:var(--e-2);
  }
  .btn--texto{min-height:var(--toque);display:inline-flex;align-items:center}
  .rodape li{margin-bottom:var(--e-1)}
}

/* 3. Alvo de toque nos dois links que ficam fora do fluxo das listas. */
.nav__marca{display:inline-flex;align-items:center;min-height:var(--toque)}
/* O "pular para o conteudo" vive a 9999px fora da tela e so aparece na
   navegacao por teclado. A altura vale sempre, e nao so no foco, para ele
   nunca aparecer pequeno. */
.pular{min-height:var(--toque);display:inline-flex;align-items:center}

/* As tres rodadas de correcao de TAMANHO de texto que existiam aqui sumiram:
   viraram o piso --t-1 da escala. Elas corrigiam por seletor o que agora e
   impossivel de errar — nenhum tamanho do sistema fica abaixo de 12px. De
   quebra, dois casos que os remendos nao pegavam foram corrigidos junto: os
   links da navegacao (11.5px) e os botoes de compartilhar (11px). */

/* ==========================================================================
   Botão flutuante de WhatsApp
   O site tem um canal de conversão só, e antes disto quem estava lendo um
   post precisava rolar até achar um link. O alvo usa --toque com folga,
   porque 44px é o mínimo, não o confortável.
   ========================================================================== */

.zap {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 40;
  display: grid;
  place-items: center;
  width: calc(var(--toque) + var(--e-3));
  height: calc(var(--toque) + var(--e-3));
  border-radius: 50%;
  background: var(--preto);
  color: var(--branco);
  transition: transform var(--transicao) ease, background var(--transicao) ease;
}

.zap:hover,
.zap:focus-visible {
  background: var(--grafite);
  transform: translateY(calc(var(--e-1) * -1));
}

.zap__icone {
  width: var(--e-5);
  height: var(--e-5);
  fill: currentColor;
}

/* No celular o botão divide a borda inferior com o polegar: encosta menos. */
@media (max-width: 720px) {
  .zap {
    right: var(--e-4);
    bottom: var(--e-4);
  }
}

/* Quem pediu menos movimento não recebe o deslocamento no hover. */
@media (prefers-reduced-motion: reduce) {
  .zap {
    transition: none;
  }
  .zap:hover,
  .zap:focus-visible {
    transform: none;
  }
}

/* Selo de 18+ no rodapé: sinaliza sem bloquear a entrada. */
.selo-idade {
  display: inline-block;
  margin-right: var(--e-2);
  padding: 0 var(--e-2);
  border: var(--borda) solid var(--linha-escura);
  font-size: var(--t-1);
  letter-spacing: var(--ls-1);
}

/* O botão só entra depois da primeira dobra: no celular ele cobria o CTA
   "Agendar", que é o único caminho de conversão do site. Sem JavaScript a
   classe --controlado nunca é aplicada e o botão fica visível. */
.zap--controlado {
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--e-3));
  transition: opacity var(--transicao) ease, transform var(--transicao) ease,
    visibility var(--transicao);
}

.zap--controlado.zap--visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .zap--controlado {
    transition: none;
  }
}