/* ============================================================================
   POLICLINICA MASTER, UNIDADE ITAIPUACU  —  FOLHA COMPARTILHADA
   Toda pagina do site carrega este arquivo. O que mora aqui e o que as tres
   paginas dividem: a paleta do kit, a fonte da marca, o cabecalho, o rodape, o
   campo de luz, o botao, o cartao e a revelacao por scroll.

   O que NAO mora aqui: o que e de uma pagina so. Cada pagina guarda o proprio
   <style> depois deste <link>, e por isso a ordem importa — esta folha inteira
   vem ANTES. Regra de mesma especificidade que trocasse de ordem trocaria de
   vencedor, entao nada aqui foi reordenado: as faixas sairam do index.html na
   ordem original e estao anotadas com a linha de origem.

   ⚠️ Caminho relativo aqui resolve contra site/marca/, nao contra site/. Por
   isso a fonte e `pt-sans-narrow-bold.woff2` e nao `marca/pt-sans-narrow-bold
   .woff2`. Trocar este arquivo de pasta quebra a fonte e o logotipo em silencio.
   ========================================================================= */

/* direcao visual (index.html 62-77) */
/* ============================================================================
   POLICLÍNICA MASTER — UNIDADE ITAIPUAÇU
   Direção: a página é uma CHEGADA. Uma clínica de 2016, em Itaipu, acendeu um
   ponto novo em Itaipuaçu. Todo o sistema visual sai daí — um campo de luz com
   anéis irradiando de um foco, e o SÍMBOLO DA MARCA (o coração que forma o "M"
   de Master) como a matéria dessa luz no hero.

   Não existe foto da unidade nova, e banco de imagem passando por foto de
   clínica é falsificação. Então a página fica cara por MARCA e por DESENHO:
   kit oficial vetorizado, a fonte de que o logotipo foi desenhado, profundidade
   em camadas, escala tipográfica e ritmo de temperatura.

   O dispositivo gráfico que costura tudo é o FILETE DE TERRACOTA — a mesma
   régua curta que a arte oficial de compartilhamento usa sobre o verde. Ele
   abre cada prova do cartão e cada ressalva. É elemento de marca, não enfeite.
   ========================================================================= */

/* fonte da marca (index.html 79-89) */
/* A fonte da marca: PT Sans Narrow Bold, a face de que o logotipo foi
   desenhado, em subset de 114 caracteres pt-BR (32.536 bytes, arquivo próprio).
   Um peso só — e ele é 700. Toda regra que a usa declara font-weight:700.
   `swap` é obrigatório: sem ele o título do hero, que é o LCP, fica invisível
   durante o carregamento. Voz de display; o corpo do texto continua na pilha do
   sistema, que é o que dá leitura confortável em tela pequena. */
@font-face{
  font-family:'PT Sans Narrow';
  src:url('pt-sans-narrow-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* paleta e tokens (index.html 91-133) */
:root{
  /* KIT OFICIAL DE MARCA. Substitui a paleta que eu tinha derivado contando
     pixel do PNG antigo. O verde manda nas superfícies; a terracota pontua.
     TERRACOTA NUNCA É COR DE TEXTO: 4,14:1 sobre a areia, 4,41:1 sobre o branco
     e 2,58:1 sobre o verde escuro — reprova nas três. Aqui ela é só filete e
     marca gráfica. */
  --verde:#056A43;          /* principal */
  --verde-claro:#E6F1EC;    /* fundo de seção e de cartão */
  --terracota:#C1593A;      /* acento */
  --tinta:#23302B;          /* corpo de texto — 12,87:1 sobre a areia */
  --fundo:#FAF7F4;          /* areia, o fundo neutro */
  --branco:#FFFFFF;
  /* Do mesmo kit, com papel declarado. */
  --verde-fundo:#04432B;    /* cabeçalho sólido, fundo do hero e rodapé */
  --terracota-alt:#D9744F;  /* hover, e o filete sobre o verde escuro, onde a
                               terracota cheia cai para 2,58:1 e some */
  /* Ponto médio exato dos dois verdes oficiais (#056A43 e #04432B). Existe para
     o gradiente ter volume sem inventar um sétimo verde. */
  --verde-meio:#055737;

  --tinta-2:#55655E;              /* texto secundário — 5,77:1 sobre a areia */
  --linha:#D8E4DE;                /* divisória no claro */
  --vidro:rgba(255,255,255,.13);  /* superfície de vidro sobre o escuro */
  --borda-vidro:rgba(255,255,255,.18);

  /* RAIO — regra única e documentada, para não virar sistema misto:
     caixa e botão = 16px · cartão de provas (o único elemento sobreposto) =
     24px · 999px SÓ no que flutua (botão fixo) ou rotula (pílula, filete). */
  --r:16px; --r-g:24px;

  /* Sombra tintada no verde do kit — sombra preta sobre superfície colorida é o
     que faz cartão branco parecer recortado de outra página. */
  --sombra-s:0 1px 2px rgba(4,67,43,.05),0 6px 16px -8px rgba(4,67,43,.10);
  --sombra-m:0 2px 4px rgba(4,67,43,.04),0 14px 30px -14px rgba(4,67,43,.16);
  --sombra-g:0 2px 6px rgba(4,67,43,.05),0 30px 64px -26px rgba(4,67,43,.34);

  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'PT Sans Narrow',var(--fonte);
  --saida:cubic-bezier(.16,1,.3,1);
  --zona-flutuante:88px;
  --h-topo:56px;            /* altura da barra fixa */
  /* ⚠️ 132px -> 124px em 28/08, quando a navegação entrou na barra. Medido em
     320px, a menor largura real: com 132 o lockup e o menu somavam exatamente
     os 280px de conteúdo, zero de folga, e qualquer variação de rótulo
     estouraria a barra sem aviso. Com 124 sobram 8px. A assinatura recortada
     cai de 28,8 para 27,0px de altura, o que continua legível. */
  --logo-l:124px;           /* largura do lockup recortado na barra */
}

/* box-sizing (index.html 135-135) */
*,*::before,*::after{box-sizing:border-box}

/* superficies do navegador (index.html 137-159) */
/* --- superfícies do navegador ---------------------------------------------
   Barra de rolagem, seleção, cursor de texto e sublinhado vêm com o padrão do
   sistema, que não pertence a design nenhum. Vestir isso é barato e é o que
   separa página construída de página montada. */
html{scrollbar-color:var(--verde) var(--fundo)}
::selection{background:var(--verde);color:var(--branco)}
body{margin:0;font-family:var(--fonte);color:var(--tinta);background:var(--fundo);
  -webkit-text-size-adjust:100%;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit;text-underline-offset:.18em}
input{font:inherit;caret-color:var(--verde)}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.escuro :focus-visible,.topo :focus-visible{outline-color:var(--branco)}
.topo.solido :focus-visible{outline-color:var(--verde)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.env{width:min(100% - 40px,1140px);margin-inline:auto}

/* tipografia (index.html 161-186) */
/* --- TIPOGRAFIA -----------------------------------------------------------
   Duas vozes, com papéis separados. DISPLAY: PT Sans Narrow Bold, a face do
   logotipo — títulos, os números do cartão de provas e os rótulos em caixa
   alta. CORPO: a pilha do sistema, que lê melhor em 14–16px num Android
   barato. Ênfase dentro do título é peso/traço da mesma família, nunca uma
   terceira fonte.

   ⚠️ O subset tem 114 glifos. Só entra na voz de display texto cujos caracteres
   estejam nele — o que vale para todo título, número e rótulo desta página
   (conferido caractere a caractere). Nome de especialidade, que é lista aberta,
   fica no corpo de propósito. */
/* ⚠️ `display:flex` não é enfeite: as bandas usam margem NEGATIVA, e margem de
   item de flex não colapsa com a vizinha. Em fluxo normal as duas viravam
   uma só e as linhas encostavam. */
h1{display:flex;flex-direction:column;
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.55rem,11.4vw,5.6rem);line-height:.95;letter-spacing:-.006em;
  text-wrap:balance;overflow-wrap:break-word}
h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.95rem,6vw,3.4rem);line-height:1;letter-spacing:-.006em;
  color:var(--verde);text-wrap:balance;max-width:20ch}
.escuro h2{color:var(--branco)}
h3{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--verde)}
.escuro h3{color:rgba(255,255,255,.84)}
p{overflow-wrap:break-word}

/* cabecalho fixo (index.html 188-216) */
/* ========================= CABEÇALHO FIXO =================================
   Sobre o hero nasce transparente com o lockup branco; ao rolar vira barra de
   areia com o lockup colorido. A troca é de opacidade entre dois planos do
   MESMO tamanho — nenhum reflow, nenhum salto.

   O recorte: o arquivo tem viewBox 1000×328 e a assinatura (POLICLÍNICA ♥aster)
   ocupa as 218 primeiras unidades. Com `background-size:100% auto` e altura de
   21,8% da largura, aparece exatamente essa faixa — matemática do próprio
   viewBox, não recorte no olho. */
.topo{position:fixed;inset:0 0 auto;z-index:20;
  transition:background .32s var(--saida),box-shadow .32s var(--saida)}
.topo.solido{background:var(--fundo);box-shadow:0 1px 0 var(--linha),var(--sombra-s)}
.topo-i{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--h-topo)}
/* O logotipo é o link da página inicial. Não é enfeite de convenção: é o que
   faz a navegação caber em 320px. Com "Início" escrito por extenso na barra,
   os três rótulos mais o lockup estouravam a menor largura real; o logotipo
   carrega esse destino de graça, e sobram dois rótulos. */
.marca-topo{position:relative;flex:0 0 auto;display:block;text-decoration:none;
  width:var(--logo-l);height:calc(var(--logo-l) * .218)}
/* ⚠️ A caixa do lockup tem 28,8px de altura no celular (132px de largura x
   0,218 do viewBox), e virou ALVO DE TOQUE quando o logotipo passou a ser o
   link da home. 28,8 é menos que os 44 mínimos. Crescer a caixa não serve: os
   dois planos do lockup são `inset:0` e cresceriam junto, distorcendo a marca.
   Então quem cresce é só a área sensível, num pseudo-elemento invisível.
   Medido depois: 46,8px no celular e 52,4px no desktop. */
.marca-topo::after{content:"";position:absolute;inset:-9px -8px}
/* ⚠️ Longhands, nunca o atalho `background`: `.marca-topo i` tem especificidade
   (0,1,1) e `.m-branco` (0,1,0). O atalho zera `background-image` e venceria a
   regra que põe o arquivo — o logotipo simplesmente não aparecia. */
.marca-topo i{position:absolute;inset:0;background-position:0 0;
  background-size:100% auto;background-repeat:no-repeat;
  transition:opacity .32s var(--saida)}
.m-branco{background-image:url(logo-itaipuacu-branco.svg)}
.m-cor{background-image:url(logo-itaipuacu.svg);opacity:0}
.topo.solido .m-branco{opacity:0}
.topo.solido .m-cor{opacity:1}
/* No celular a barra é só a marca e a navegação: quem carrega a ação lá é o
   botão flutuante, e dois botões iguais na mesma tela é ruído, não insistência. */
.topo-cta{display:none}

/* ============================== NAVEGAÇÃO =================================
   O site passou a ter três páginas em 28/08. A navegação mora no cabeçalho
   fixo, que já existia e já está sempre à vista.

   ⚠️ NO CELULAR ELA NÃO DISPUTA COM O BOTÃO FLUTUANTE, porque as duas coisas
   ocupam superfícies diferentes e dizem coisas diferentes: o flutuante fica no
   canto de baixo e carrega a AÇÃO (falar no WhatsApp); a navegação fica na
   barra de cima e carrega o DESLOCAMENTO. Nunca se tocam, e no celular o
   cabeçalho não tem CTA nenhum (`.topo-cta` só aparece a partir de 900px,
   exatamente onde o flutuante some). Continua valendo um só CTA persistente
   por breakpoint.

   Por isso ela também não virou menu sanduíche: um sanduíche para dois links
   custa JS, inventa um estado a mais e esconde o que já cabe.

   O alvo de toque é a barra inteira: 14px de respiro em cima e embaixo de uma
   linha de ~19px dão 47px de altura, acima do mínimo de 44. O filete de
   terracota sob a página atual é o mesmo dispositivo da ressalva e do cartão
   de provas, na mesma espessura. */
.navega{display:flex;align-items:center;gap:18px;margin-left:auto;min-width:0;
  font-size:12.5px;font-weight:600;letter-spacing:.005em}
.navega a{position:relative;padding:14px 1px;text-decoration:none;
  color:rgba(255,255,255,.86);white-space:nowrap;
  transition:color .28s var(--saida)}
.navega a[aria-current="page"]{color:var(--branco)}
.navega a[aria-current="page"]::after{content:"";position:absolute;
  left:0;right:0;bottom:9px;height:2px;border-radius:99px;
  background:var(--terracota-alt)}
/* Sobre a barra de areia a cor vira a do texto secundário, e a página atual
   ganha o verde da marca. 5,77:1 e 6,49:1 sobre a areia. */
.topo.solido .navega a{color:var(--tinta-2)}
.topo.solido .navega a[aria-current="page"]{color:var(--verde)}
.topo.solido .navega a[aria-current="page"]::after{background:var(--terracota)}
/* Abaixo de 360px o lockup e os dois rótulos não cabem com os respiros de
   projeto. Medido em 320px: 124px de lockup + 16 de respiro + 151,5 de menu =
   291,5 contra 280 de conteúdo. A barra não estourava porque a navegação
   ENCOLHIA (é item de flex) e os rótulos se espremiam dentro dela, o que uma
   medida da caixa do menu não enxerga: a caixa cabia, o conteúdo não.
   A saída aperta os respiros só nesta faixa, em vez de encolher a marca no
   aparelho de todo mundo por causa do aparelho de 2016. Medido depois: 5,5px
   de folga em 320px, 28,5 em 360. */
@media (max-width:359px){
  .topo-i{gap:10px}
  .navega{gap:13px;font-size:12px}
}

/* campo de luz (index.html 218-245) */
/* ============================ CAMPO DE LUZ =================================
   O sistema gráfico da página, usado em três lugares e em três escalas.
   `--ax/--ay` é o foco; `--ap` o passo dos anéis. Anel em CSS puro
   (repeating-radial-gradient) em vez de SVG: é responsivo de graça, escala com
   o elemento e custa ~300 bytes. A máscara faz os anéis desvanecerem com a
   distância — anel uniforme até a borda fica mecânico.
   As luzes são o VERDE-CLARO do kit e o branco: nenhum verde novo foi criado
   para o brilho. */
.luz{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.brilho,.aneis,.grao{position:absolute;inset:0}
/* A 1ª camada é um SLOT: `--quente` nasce vazio e só o hero preenche, senão o
   calor cairia nos exames, onde o contraste aperta. */
.brilho{
  background:
    var(--quente,none),
    radial-gradient(58% 46% at var(--ax) var(--ay),rgba(230,241,236,.30),transparent 68%),
    radial-gradient(46% 40% at calc(var(--ax) + 14%) calc(var(--ay) - 6%),rgba(230,241,236,.17),transparent 62%),
    radial-gradient(64% 50% at 2% 4%,rgba(255,255,255,.07),transparent 62%);
  will-change:transform}
.aneis{
  background:repeating-radial-gradient(circle at var(--ax) var(--ay),
    transparent 0 var(--ap),rgba(255,255,255,.13) var(--ap) calc(var(--ap) + 1.4px));
  -webkit-mask-image:radial-gradient(circle at var(--ax) var(--ay),#000 4%,transparent 78%);
  mask-image:radial-gradient(circle at var(--ax) var(--ay),#000 4%,transparent 78%)}
/* Grão. É o detalhe que separa superfície chapada de superfície com matéria.
   O ruído é gerado uma vez num tile de 180px e repetido por <pattern>: o filtro
   roda em 32 mil pixels em vez de na tela inteira. */
.grao{width:100%;height:100%;opacity:.06;mix-blend-mode:overlay}

/* botao (index.html 322-328) */
.botao{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:26px;padding:17px 26px;min-height:58px;border-radius:var(--r);
  background:var(--branco);color:var(--verde);font-size:16.5px;font-weight:700;
  text-decoration:none;letter-spacing:-.012em;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -8px rgba(4,67,43,.5);
  transition:transform .14s ease-out,box-shadow .28s var(--saida)}
.botao .ico{font-size:20px}

/* secoes e ressalva (index.html 358-386) */
/* ============================== SEÇÕES ==================================== */
section{padding:56px 0}
.claro{background:var(--fundo)}
/* Inversão de temperatura: o bloco de exames volta ao verde profundo do hero.
   É o único respiro escuro no miolo da página, e não é alternância aleatória —
   é a cor da marca reaparecendo no meio do percurso, com o mesmo campo de luz
   do hero em escala menor. */
.escuro{position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  /* Foco FORA do quadro (x>100%, y<0): dentro da seção entra só a queda da luz.
     Medido: com o foco dentro, o pico de luminância do fundo sob "Tipos de
     exame" e sob a ressalva chegava a 0,146–0,183, e o texto secundário caía
     para 3,1:1. O que conserta é o FUNDO, não empurrar o texto para o branco —
     com aquele fundo, nem branco puro alcançava 4,5:1. */
  --ax:98%; --ay:-6%; --ap:52px;
  background:linear-gradient(180deg,var(--verde-fundo),var(--verde-meio) 62%,var(--verde-fundo))}
.escuro .brilho{opacity:.62}
.escuro .env{position:relative;z-index:1}
.escuro p{color:rgba(255,255,255,.82)}

/* ================================ CAPA ====================================
   A faixa escura que abre as páginas internas. NÃO é um hero: não tem CTA, não
   ocupa a tela e não tenta converter. Existe por duas razões estruturais.

   Continuidade. A home abre em verde profundo com o campo de luz; uma página
   interna que abrisse em fundo claro leria como outro site. Mesmo gradiente,
   mesmo campo, mesma matéria, em escala de faixa.

   O cabeçalho. Ele nasce transparente com o lockup BRANCO e só vira barra de
   areia ao rolar. Sem fundo escuro no topo da página, o lockup branco cairia
   sobre a areia e sumiria antes do primeiro gesto de rolagem.

   ⚠️ O título aqui é `display:block`, não a coluna de bandas da home: as bandas
   com margem negativa existem para o gesto de subida do hero, que é um momento
   autoral daquela página. Repetir o gesto em toda página o esvazia. */
.capa{position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  --ax:74%; --ay:100%; --ap:44px;
  /* A mesma luz quente do hero, em dose menor: aqui não há um título de 90px
     para proteger, mas também não há motivo para a faixa ser fria. */
  --quente:radial-gradient(120% 90% at calc(var(--ax) - 10%) 100%,
    rgba(217,116,79,.30),transparent 76%);
  background:linear-gradient(168deg,var(--verde) 0%,var(--verde-meio) 46%,var(--verde-fundo) 100%);
  padding:calc(var(--h-topo) + 38px) 0 46px}
.capa .env{position:relative;z-index:1}
/* ⚠️ A medida do título é em `em`, NUNCA em `ch`. A fonte da marca é
   condensada: o "0" dela é estreito, então `1ch` vale bem menos que numa fonte
   normal e uma caixa de 19ch saiu com 240px dentro de um container de 350px.
   O título quebrava cedo e sobrava um "A" órfão no fim da primeira linha. */
.capa h1{display:block;margin:0;
  font-size:clamp(1.95rem,6.6vw,3.35rem);line-height:1.04;
  letter-spacing:-.01em;max-width:14em}
/* Cada frase do título é um bloco: assim uma nunca invade a linha da outra,
   que é o que produz palavra órfã em fim de linha. */
.capa h1 span{display:block}
/* O pino cobre a capa inteira: a barra solidifica no instante em que o fundo
   escuro termina de passar por baixo dela. Na home o pino tem altura fixa
   porque lá o hero passa da dobra e a troca precisa acontecer antes do fim. */
.pino-capa{height:100%}

/* A ressalva é o que torna a página verdadeira: as duas listas são da unidade
   de Itaipu. Abre com o filete da marca — o mesmo dispositivo das provas — em
   vez da barra colorida de "caixa de aviso": o visitante tem que LER, não tem
   que se assustar. */
.ressalva{position:relative;margin-top:18px;padding-top:15px;
  font-size:14.5px;line-height:1.5;max-width:58ch;color:var(--tinta-2)}
.ressalva::before{content:"";position:absolute;top:0;left:0;
  width:30px;height:2px;border-radius:99px;background:var(--terracota)}
.escuro .ressalva{color:rgba(255,255,255,.86)}
.escuro .ressalva::before{background:var(--terracota-alt)}

/* botao secundario (index.html 452-452) */
.botao.secundario{margin-top:22px;background:var(--branco);color:var(--verde)}

/* cartao e mapa (index.html 463-479) */
.cartao{display:flex;gap:14px;padding:20px 18px;background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra-s)}
.cartao>.ico{font-size:22px;color:var(--verde);margin-top:1px}
.cartao p{font-size:15px}
.cartao .rot{font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-2)}
.cartao .rot + p{margin-top:3px;font-weight:600}
.cartao .rot ~ .rot{margin-top:16px}
.cartao a{color:var(--verde);font-weight:700}
/* "Abrir no Google Maps" é a única ação real desta seção além do WhatsApp —
   então tem forma e alvo de ação, não de link solto no meio do parágrafo. */
.mapa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:11px 16px;min-height:46px;border:1.5px solid var(--verde);
  border-radius:var(--r);font-size:14.5px;font-weight:700;color:var(--verde);
  text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s var(--saida)}
.mapa .seta{transition:transform .2s var(--saida)}

/* rodape (index.html 491-501) */
.rodape{position:relative;z-index:1;background:var(--verde-fundo);color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.12);
  padding:30px 0 max(var(--zona-flutuante),env(safe-area-inset-bottom));
  font-size:13.5px;line-height:1.65}
/* O lockup completo cabe aqui, com a linha "UNIDADE ITAIPUAÇU" legível: 236px
   de largura dão ~7px de altura de letra nela. É o único lugar da página com
   espaço para a assinatura inteira, e é o lugar certo — assinatura fecha. */
.marca-rodape{width:236px;max-width:66%;height:auto;margin-bottom:22px;opacity:.94}
.rodape b{font-family:var(--display);display:block;color:var(--branco);
  font-size:17px;letter-spacing:.01em;margin-bottom:10px}
.rodape p + p{margin-top:5px}

/* usado pelo botao flutuante aqui e pelo brilho do hero no index */
@keyframes nasce{from{opacity:0}}

/* botao flutuante (index.html 503-522) */
.flutuante{position:fixed;z-index:9;right:14px;
  bottom:max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:9px;padding:14px 19px;
  background:var(--verde);color:var(--branco);border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  font-size:14.5px;font-weight:700;text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(4,67,43,.55);
  /* O botão CHEGA, não desliza: a curva passa de 1 e volta (~6% de excesso).
     Nos 130% da entrada isso é a pancada que dá presença ao botão; nos -2px do
     hover o excesso é de 0,12 px, invisível — a mesma curva serve aos dois sem
     precisar de uma segunda regra. */
  transition:transform .44s cubic-bezier(.34,1.42,.64,1),opacity .28s var(--saida)}
.flutuante .ico{font-size:19px}
/* Nasce visível: sem JS o botão tem que existir. O JS o recolhe enquanto o CTA
   do hero está na tela, para não haver dois botões empilhados.
   ⚠️ Mas o observador só responde DEPOIS do 1º paint (a transição começa em
   998 ms, medido) e o botão escorregava sobre o ato do escuro. Opacidade 0 até
   1,5 s some com a saída; sem JS ele entra ali. */
.flutuante{animation:nasce .5s var(--saida) 1.5s backwards}
.flutuante.recolhido{transform:translateY(130%);opacity:0;pointer-events:none}

/* revelacao por scroll (index.html 687-720) */
/* Revelação por scroll. `.rev` no container faz TODOS os filhos diretos
   entrarem em cascata — sem um atributo por elemento. */
[data-anima].pre .rev>*{opacity:0;transform:translateY(22px)}
[data-anima].pre .tick{transform:scaleX(0)}

/* O CARTÃO DE PROVAS CHEGA. Ele é o elemento mais desenhado da página — o
   único que atravessa a fronteira entre o hero e o conteúdo. Até aqui só o
   conteúdo dele entrava; a caixa já estava posta. Agora ela sobe 30 px e se
   encaixa por cima da borda do hero enquanto as quatro provas sobem 22 px
   DENTRO dela. Duas velocidades é o que produz profundidade; uma só seria um
   bloco deslizando. */
[data-anima].pre .provas{transform:translateY(30px)}
[data-anima].vis .provas{transform:none;transition:transform .78s var(--saida)}

/* A LUZ DA SEÇÃO ESCURA ACENDE. O bloco de exames é a cor da marca voltando no
   meio do percurso, então ele não entra com o mesmo fade dos outros: o campo
   de luz acende com o MESMO gesto do hero (`acende`) enquanto o texto sobe por
   cima. Acontece uma vez só na página — `.luz` só é filha de um [data-anima]
   aqui; no bloco final ela é IRMÃ do `.final`, não filha. Um momento
   autoral, não um efeito espalhado por toda seção. */
[data-anima].pre .luz{opacity:0;transform:scale(1.12)}
[data-anima].vis .luz{opacity:1;transform:none;
  transition:opacity .9s var(--saida),transform 1.25s var(--saida)}
[data-anima].vis .rev>*{opacity:1;transform:none;
  transition:opacity .6s var(--saida),transform .6s var(--saida)}
[data-anima].vis .tick{transform:scaleX(1);
  transition:transform .55s var(--saida);transition-delay:inherit}
[data-anima].vis .rev>*:nth-child(2){transition-delay:.07s}
[data-anima].vis .rev>*:nth-child(3){transition-delay:.14s}
[data-anima].vis .rev>*:nth-child(4){transition-delay:.21s}
[data-anima].vis .rev>*:nth-child(5){transition-delay:.28s}
[data-anima].vis .rev>*:nth-child(6){transition-delay:.35s}
[data-anima].vis .rev>*:nth-child(7){transition-delay:.42s}
[data-anima].vis .rev>*:nth-child(n+8){transition-delay:.49s}

/* Hover só onde existe ponteiro de verdade: no toque, `:hover` gruda depois do
   clique e o cartão fica preso no estado ativo. */
@media (hover:hover){
  .botao:hover{transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 38px -10px rgba(4,67,43,.55)}
  .mapa:hover{background:var(--verde);color:var(--branco)}
  .mapa:hover .seta{transform:translateX(3px)}
  .flutuante:hover{transform:translateY(-2px)}
  .topo-cta:hover{transform:translateY(-1px)}
}

/* RESPOSTA AO DEDO. `:hover` nunca dispara no celular, que é o caso principal:
   sem isto o cartão não devolve nada ao toque — a única resposta é o WhatsApp
   abrindo, meio segundo depois. A volta usa a curva lenta da casa; só a
   PRESSÃO é curta, senão o afundar chega depois de o dedo já ter saído.

   ⚠️ Escrito DEPOIS do bloco de hover de propósito. `.chip:active` e
   `.chip:hover` têm a mesma especificidade (0,2,0), então quem estiver por
   último vence. Com a pressão declarada antes, apertar um cartão no desktop
   mantinha o levantar do hover e o afundar nunca acontecia — medido por
   `CSS.forcePseudoState`: com hover+active o transform continuava
   translateY(-3px). Valia igual para o CTA principal, desde antes desta
   rodada. No celular nada disso aparecia, porque lá `:hover` não existe. */
.botao:active{transform:scale(.985)}
.mapa:active{transform:scale(.975);transition-duration:.09s}
.flutuante:active{transform:scale(.96);transition-duration:.09s}

@media (min-width:900px){
  :root{--h-topo:66px; --logo-l:158px}
  section{padding:84px 0}
  /* No desktop o botão para de esticar: um CTA de 760px de largura não lê como
     botão, lê como faixa. Só o CTA final continua largo, porque ali ele é o
     único elemento e a centralização é a composição. */
  .botao{align-self:flex-start;display:inline-flex;padding:18px 32px}
  /* No desktop a ação mora no cabeçalho, que está sempre à vista, e o botão
     flutuante sai de cena: um só CTA persistente por breakpoint. */
  .topo-cta{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
    padding:11px 20px;min-height:44px;border-radius:var(--r);
    background:var(--branco);color:var(--verde);
    font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:-.01em;
    box-shadow:0 6px 18px -8px rgba(4,67,43,.5);
    transition:transform .18s var(--saida),background .32s var(--saida),color .32s var(--saida)}
  .topo-cta .ico{font-size:18px}
  .topo.solido .topo-cta{background:var(--verde);color:var(--branco);
    box-shadow:0 6px 18px -8px rgba(4,67,43,.35)}
  .flutuante{display:none}
  .rodape{padding-bottom:38px}
}

@media (prefers-reduced-motion:reduce){
  /* Desliga tudo COM O ESTADO FINAL CORRETO: como todo padrão do CSS já é o
     estado final, basta remover animação e transição — nada precisa ser
     desfeito à mão. */
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-anima].pre .rev>*{opacity:1!important;transform:none!important}
  [data-anima].pre .tick{transform:none!important}
}

/* Alvo de toque. Os links de telefone e WhatsApp do cartão tinham 18px de altura;
   o mínimo acessível é 44. Um deles é o WhatsApp, que é o destino de conversão do
   site inteiro. Apontado pelo @nanami como defeito pré-existente. */
.cartao a{display:inline-block;padding:11px 0;min-height:44px}