/* ==========================================================================
   Dr. Andre Sobierajski dos Santos · Neurologista e Neurofisiologista Clinico
   Design system em tokens derivados do logo (2 cores oficiais, ver logo.svg).
   Fontes self-hosted, subset latin. Nenhum elemento do site WordPress antigo.
   Fontes, tokens, reset, utilitarios, botoes, header e hero moram aqui.
   Os componentes de conteudo (Split, Citacao, Cards,
   Trajetoria, Sinais, Consulta, Localizacao, FAQ, CTA final, Rodape,
   Reveal) moram em componentes.css, carregado logo depois deste no HTML
   (precisa vir depois: usa os tokens do :root definidos aqui). Mesmo motor
   da LP da Dra. Nilza Perin (dranilza.msims.app): estrutura de tokens,
   header e hero adaptados aqui, so os valores de cor e as medidas
   proprias deste cliente (logo, fotos) mudaram.
   ========================================================================== */

/* --- Fontes (self-hosted, subset latin) --------------------------------- */
@font-face{font-family:'Figtree';src:url('../fonts/figtree-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* --- Tokens --------------------------------------------------------------
   As cores de marca saem do logo dele (logo-original.svg, 2 cores solidas:
   azul petroleo e ciano). Nada inventado alem dos tons de tinta derivados
   (documentado abaixo). Ver docs/RELATORIO.md para a medicao completa.    */
:root{
  /* cores do logo */
  --tinta-marca:#04384D;   /* petroleo: nome no logo, texto escuro principal. 12,51:1 sobre branco */
  --ciano:#1AB2C7;         /* especialidade e CRM/RQE no logo. Superficie e traco, NUNCA texto: 2,55:1, reprova WCAG */

  /* TOM DE TINTA: o ciano do logo e para BLOCO e traco, nao para TEXTO sobre
     fundo claro (2,55:1, reprova). Mesmo matiz, escurecido ate passar 4,5:1.
     A cor original segue intacta para superficie e traco (--ciano acima).
     Ver docs/RELATORIO.md, secao de contraste. */
  --ciano-tinta:#0A5F6E;   /* 7,30:1 sobre branco */

  /* --tinta-marca escurecido: 2 variantes solidas pra dar profundidade a
     faixa de numeros do hero e ao rodape (mesmo hue, mais escuro em cada
     etapa), igual ao esquema de 3 tons da Dra. Nilza -- so que aqui as 3
     variantes nascem do MESMO petroleo, porque a marca so tem 1 tom escuro
     (nao 2 como la, azul+navy). */
  --marca-fundo:#043144;   /* faixa solida de numeros do hero */
  --marca-rodape:#032A3A;  /* rodape, a mais escura das 3 */

  /* superficies */
  --creme:#FBF8F3;
  /* mesma cor de --creme, em tripla R,G,B: rgba() nao le var() em hex pra
     variar so o alpha. Usado no veu do hero (gradiente com opacidade
     variavel). Se --creme mudar, mudar aqui tambem -- as duas descrevem a
     mesma cor, nao cores diferentes. */
  --creme-rgb:251,248,243;
  --papel:#F5F2EC;
  --branco:#FFFFFF;
  --ciano-suave:#E8F7F9;   /* tint claro do ciano, fundo de secao */

  /* tinta (neutra, nao vem do logo -- e o cinza-azulado padrao do motor) */
  --tinta:#20303C;
  --tinta-media:#46586A;
  --tinta-suave:#5A6B7A;
  --sobre-marca:#F1FAFC;
  --sobre-marca-suave:#AFE4EB;

  /* acao */
  --acao:#04384D;
  --acao-escuro:#032E3F;

  /* tipografia */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --t-display:clamp(2.35rem,1.5rem + 3.6vw,4.35rem);
  --t-h2:clamp(2rem,1.3rem + 3vw,3.6rem);
  --t-h3:clamp(1.15rem,1.02rem + 0.55vw,1.4rem);
  --t-lead:clamp(1.05rem,0.98rem + 0.4vw,1.25rem);
  --t-corpo:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  --t-mini:0.78rem;

  /* ritmo */
  --secao-y:clamp(4.5rem,3rem + 6vw,8.5rem);
  --gutter:clamp(1.25rem,0.6rem + 2.6vw,2.75rem);
  --max:1200px;
  --max-texto:66ch;
  /* altura TOTAL do header fixo (o .topo__linha mais o 1px de borda que o
     .topo desenha por fora dela). Fonte unica: o header usa este token pra
     definir a propria altura, e o hero usa o mesmo token pra saber onde o
     header termina. */
  --h-topo:clamp(79px,71px + 1.6vw,99px);

  --linha:1px solid color-mix(in srgb,var(--tinta-marca) 14%,transparent);
  --linha-clara:1px solid color-mix(in srgb,#FFF 18%,transparent);
  --transicao:280ms cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--creme);color:var(--tinta);
  font-family:var(--sans);font-size:var(--t-corpo);font-weight:400;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--ciano-tinta);outline-offset:3px;border-radius:2px}

/* --- Icones: sprite <symbol> + <use>. Fonte: Iconify/Lucide ------------- */
.ico{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:middle}

/* --- Utilitarios --------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao-y)}
/* header fixo nao pode cobrir o titulo ao pular por ancora */
section[id]{scroll-margin-top:clamp(72px,66px + 1.4vw,96px)}
.secao--papel{background:var(--papel)}
.secao--azul{background:var(--ciano-suave)}
.secao--solido{background:var(--tinta-marca);color:var(--sobre-marca)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* link "pular para o conteudo": invisivel ate ganhar foco por teclado, entao
   fica por cima de tudo, legivel, no canto superior esquerdo */
.sr:focus-visible{
  position:fixed;top:.75rem;left:.75rem;z-index:100;
  width:auto;height:auto;padding:.75rem 1.25rem;margin:0;
  overflow:visible;clip:auto;white-space:normal;
  border-radius:8px;background:var(--tinta-marca);color:#FFF;
  font-weight:600;font-size:.9rem;
}
/* impede quebra no meio de um token composto (ex: "CRM-SC 4371") em telas estreitas */
.nowrap{white-space:nowrap}

.rotulo{
  font-size:var(--t-mini);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ciano-tinta);
  display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1.25rem;
  text-wrap:balance;
}
.rotulo::before{content:'';width:2rem;height:1px;background:currentColor;flex:none;margin-top:.62em}
.secao--solido .rotulo{color:var(--ciano-suave)}
/* mesma rede de seguranca da Dra. Nilza: rotulo e o texto mais longo em
   caixa alta da pagina, entao e o primeiro a quebrar feio em telas bem
   estreitas. Reduzir o letter-spacing abaixo de 418px da mais folga pra
   fechar em 2 linhas balanceadas, sem alterar a leitura em nenhuma largura
   maior (0,22em ja fecha bem a partir dali). Confirmado por screenshot
   real em 390px nesta rodada (ver docs/screenshots/). */
@media(max-width:417px){.rotulo{letter-spacing:.07em}}

.titulo{
  font-family:var(--sans);font-weight:800;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.032em;color:var(--tinta-marca);
  max-width:19ch;text-wrap:balance;
}
.titulo em{font-style:normal;color:var(--ciano-tinta)}
.secao--solido .titulo{color:#FFF}
.lead{
  font-size:var(--t-lead);line-height:1.62;color:var(--tinta-media);
  max-width:var(--max-texto);margin-top:1.5rem;
}
.secao--solido .lead{color:var(--sobre-marca-suave)}

.cabeca-secao{margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem)}
.cabeca-secao--centro{text-align:center;display:flex;flex-direction:column;align-items:center}
.cabeca-secao--centro .rotulo{justify-content:center}
.cabeca-secao--centro .titulo{max-width:24ch}
.cabeca-secao--centro .lead{margin-inline:auto;text-align:center}

/* --- Botoes -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
  letter-spacing:.01em;transition:var(--transicao);white-space:nowrap;
}
.btn--acao{background:var(--acao);color:#FFF}
.btn--acao:hover{background:var(--acao-escuro);color:#FFF;transform:translateY(-2px)}
.btn--linha{border:1px solid color-mix(in srgb,var(--tinta-marca) 30%,transparent);color:var(--tinta-marca)}
.btn--linha:hover{background:var(--tinta-marca);color:#FFF;border-color:var(--tinta-marca)}
.secao--solido .btn--linha{border-color:color-mix(in srgb,#FFF 35%,transparent);color:#FFF}
.secao--solido .btn--linha:hover{background:#FFF;color:var(--tinta-marca)}
.btn--peq{padding:.62rem 1.15rem;font-size:.85rem}

/* --- Header ---------------------------------------------------------------
   O hero e claro (creme), entao o header nao precisa trocar versao de logo. */
.topo{position:fixed;inset:0 0 auto;z-index:60;background:color-mix(in srgb,var(--creme) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:box-shadow var(--transicao),border-color var(--transicao)}
.topo.sticky{border-bottom-color:color-mix(in srgb,var(--tinta-marca) 12%,transparent);box-shadow:0 2px 20px rgba(4,56,77,.06)}
.topo__linha{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:calc(var(--h-topo) - 1px)}
.topo__marca{position:relative;display:block}
/* logo deste cliente tem razao 1600x367 (4,36:1), bem mais horizontal que o
   da Dra. Nilza (logo com simbolo, 1,32:1): e 3 linhas de texto lado a lado
   por altura, sem simbolo. Medido: em 38px de altura a largura fica ~166px,
   cabendo com folga dentro do topo__linha. altura reduzida (contra os 76px
   da referencia) porque um wordmark de 3 linhas em 76px de altura ficaria
   largo demais e empurraria a nav pra fora em telas de notebook. */
.topo__marca img{height:clamp(34px,29px + 1vw,42px);width:auto}
.topo__nav{display:none;gap:clamp(1.1rem,.4rem + 1.3vw,2rem);font-size:.88rem;font-weight:500}
.topo__nav a{color:var(--tinta-media);transition:color var(--transicao);position:relative;padding-block:.35rem}
.topo__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ciano);transition:right var(--transicao)}
.topo__nav a:hover{color:var(--tinta-marca)}
.topo__nav a:hover::after{right:0}
/* telefone e o UNICO CTA da pagina (nao ha WhatsApp nem formulario), e e no
   celular que "tel:" funciona de verdade -- escondido no mobile, a pagina
   perdia a conversao onde ela e mais facil. Fica visivel em toda largura;
   min-height garante o alvo de toque minimo da Apple (44px). */
.topo__acao{min-height:44px}
@media(min-width:900px){.topo__nav{display:flex}}

/* --- Hero full-bleed --------------------------------------------------------
   Excecao documentada a regra "nada de texto sobre foto": essa regra nasceu
   numa LP de outro medico, com retratos verticais de rosto centralizado, sem
   zona livre. Aqui as fotos foram produzidas com o terco esquerdo livre de
   ELEMENTOS (mas nao de luminancia -- medido nesta foto: 0,526 de mediana
   na zona de texto, min 0,193/max 0,586, ver docs/RELATORIO.md). Por isso o
   veu creme abaixo, nao a foto crua, sustenta o texto. A excecao vale so pro
   desktop (>=960px), onde o texto realmente fica sobre a foto: no mobile,
   foto e texto ficam EMPILHADOS (ver bloco abaixo), sem sobreposicao
   nenhuma. Splits continuam sem texto sobre foto em qualquer largura.
   Criterio de medicao: contraste conferido so DENTRO das caixas de texto
   renderizadas (getBoundingClientRect de rotulo, H1, subheadline e
   registro), nunca na metade esquerda inteira da tela. Fora da caixa de
   texto nao existe texto, entao nao existe requisito de contraste ali -- e
   essa faixa livre e exatamente onde a foto precisa aparecer sem veu pesado
   por cima. Zero pixel abaixo de 4,5:1 dentro das 4 caixas, nas larguras
   360, 390, 768, 1440 e 1600 (ver docs/RELATORIO.md).                     */
.hero{background:var(--creme);color:var(--tinta);overflow:hidden}
/* agrupa so foto+conteudo (o full-bleed com veu). .hero__stats fica FORA
   deste wrapper, como irmao dele: se .hero__conteudo virasse absolute
   ancorado no .hero inteiro (foto + barra de numeros), sua caixa cresceria
   ate cobrir as duas secoes juntas e o texto centralizado verticalmente
   desceria demais, invadindo a barra de numeros. */
.hero__topo{
  position:relative;
  /* empurra a faixa de foto (e o texto empilhado embaixo dela) pra comecar
     so depois do header fixo. So no mobile -- no desktop a foto continua
     full-bleed embaixo do header translucido (excecao ja documentada
     acima), resetado logo abaixo. */
  margin-top:var(--h-topo);
}

/* --- Mobile (<960px): foto e texto EMPILHADOS, nao sobrepostos -------------
   `.hero__foto` tem ALTURA PROPRIA, independente do texto, e
   `.hero__conteudo` e um IRMAO dela no HTML (nao um filho absolute por
   cima), entao ele flui NORMALMENTE logo depois, em fundo solido --creme.
   Isso torna o contraste do texto trivial (cor solida, nao foto por tras). */
.hero__foto{
  position:relative;overflow:hidden;
  /* faixa alta o bastante pra mostrar o rosto bem enquadrado, baixa o
     bastante pra nao repetir a foto full-bleed antiga. */
  height:clamp(300px,78vw,380px);
}
.hero__foto>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* medido no screenshot real desta faixa: o rosto dele fica mais a
     direita nesta foto (maos entrelacadas sobre a bancada) que na
     composicao da Dra. Nilza -- 62% horizontal enquadra cabeca e maos
     sem cortar nenhuma das duas em telas mobile. */
  object-position:62% 22%;
}
/* transicao de ~60px entre foto e texto, so pra nao cortar seco. Sobreposta
   nos ultimos px da PROPRIA altura da foto (nao soma altura nova): comeca
   transparente (mostra a foto) e fecha em --creme solido, emendando sem
   costura com o fundo solido de .hero__conteudo logo abaixo. */
.hero__veu{
  position:absolute;left:0;right:0;bottom:0;height:60px;
  background:linear-gradient(to bottom,rgba(var(--creme-rgb),0),rgba(var(--creme-rgb),1));
}
.hero__conteudo{
  position:relative;background:var(--creme);
  padding-inline:var(--gutter);
  padding-block:2.25rem clamp(2.25rem,1.75rem + 1.5vw,3rem);
}
.hero__caixa{max-width:30rem}

/* --- Desktop (>=960px): volta o full-bleed com texto sobre veu ------------- */
@media(min-width:960px){
  .hero__topo{
    /* usado pelo padding-left de .hero__conteudo E pelo --fim-texto do veu
       logo abaixo: os dois tem que concordar sobre onde a coluna de texto
       comeca, entao e uma variavel so, nao dois calculos que podem divergir. */
    --hero-pad-esq:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));
    /* desfaz o empurrao do mobile: aqui a foto volta a ser full-bleed por
       baixo do header translucido (excecao ja documentada no bloco acima).
       So o TEXTO precisa desviar do header, feito em .hero__conteudo. */
    margin-top:0;
    /* PISO de altura, nao teto: se o texto precisar de mais espaco que
       isso, o wrapper cresce pra caber o texto inteiro e a foto (absolute,
       inset:0 logo abaixo) acompanha o tamanho novo. */
    min-height:min(94svh,780px);
  }
  .hero__foto{
    /* preenche TODO .hero__topo, seja o piso (min-height acima) ou o que o
       texto precisar. height:auto e obrigatorio: a regra mobile fixa
       height:clamp(300px,78vw,380px), e `inset:0` sozinho NAO reseta height
       (o shorthand cobre so top/right/bottom/left). */
    position:absolute;inset:0;height:auto;overflow:visible;
  }
  .hero__foto>img{object-position:66% 32%}
  .hero__veu{
    /* height:auto e obrigatorio aqui: a regra mobile acima fixa
       height:60px (a faixa de transicao), e `inset:0` sozinho NAO reseta
       height (o shorthand cobre so top/right/bottom/left). Sem este reset o
       veu desktop ficava esticado so nos 60px do topo da secao, com a foto
       crua exposta atras de quase todo o texto. */
    position:absolute;inset:0;height:auto;
    /* fim real da coluna de texto: mesma conta do padding-left abaixo, mais
       34rem (a max-width de .hero__caixa duas regras abaixo -- os dois tem
       que mudar juntos, e o mesmo numero descrevendo o fim do texto).
       Ancorar em --fim-texto elimina folga: o veu acompanha a coluna de
       texto sozinho, em qualquer largura, sem tabela de paradas por px.
       A queda so comeca DEPOIS de --fim-texto (nunca antes): a ponta
       direita do titulo encosta exatamente em --fim-texto, entao o patamar
       alto vai ate 0,97 e so comeca a cair depois de --fim-texto + 50px.
       420px depois disso ja esta praticamente nula, sobrando foto visivel
       de verdade do lado direito. Herdado sem alteracao da Dra. Nilza:
       medido nesta rodada (foto com mediana MAIS clara, 0,526 vs 0,455) que
       a mesma curva ainda fecha zero pixel abaixo de 4,5:1 nas 5 larguras
       testadas (ver docs/RELATORIO.md). */
    --fim-texto:calc(var(--hero-pad-esq) + 34rem);
    background:linear-gradient(to right,
      rgba(var(--creme-rgb),.985) 0px,
      rgba(var(--creme-rgb),.97) calc(var(--fim-texto) + 50px),
      rgba(var(--creme-rgb),.5)  calc(var(--fim-texto) + 160px),
      rgba(var(--creme-rgb),.1)  calc(var(--fim-texto) + 300px),
      rgba(var(--creme-rgb),0)   calc(var(--fim-texto) + 420px));
  }
  .hero__conteudo{
    /* relative, EM FLUXO (nao mais absolute): e o unico filho em fluxo de
       .hero__topo (foto e veu sao absolute, fora do fluxo), entao e ele
       quem decide a altura real do wrapper quando o texto precisar de mais
       espaco que o piso de min-height acima. */
    position:relative;background:none;
    padding-left:var(--hero-pad-esq);
    padding-right:clamp(2.5rem,1rem + 3.5vw,4.5rem);
    /* o inicio do texto e um numero so, derivado do MESMO token que define
       a altura do header (--h-topo), entao os dois nunca saem de sincronia.
       +2,5rem de folga pra nao colar o rotulo na borda. */
    padding-top:calc(var(--h-topo) + 2.5rem);
    padding-bottom:2.5rem;
  }
  .hero__caixa{max-width:34rem}
}
.hero__nome{font-family:var(--sans);font-weight:800;font-size:var(--t-display);line-height:1.02;letter-spacing:-.035em;color:var(--tinta-marca);margin-bottom:1.5rem;text-wrap:balance}
.hero__sub{font-size:var(--t-lead);color:var(--tinta-media);max-width:40rem;line-height:1.58}
.hero__sub strong{color:var(--tinta-marca);font-weight:600}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}
.hero__registro{margin-top:1.5rem;font-size:var(--t-mini);letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-suave);font-weight:500;text-wrap:balance}

/* barra de numeros: faixa solida atravessando a largura toda */
.hero__stats{background:var(--marca-fundo);color:var(--sobre-marca);padding-block:clamp(2rem,1.4rem + 1.6vw,2.75rem)}
/* 1 coluna abaixo de 600px: em 2 colunas o item mais longo quebra em varias
   linhas e desequilibra a grade. Mesmo breakpoint medido da Dra. Nilza,
   reaproveitado porque o texto dos 3 itens tem comprimento comparavel. */
.stats{display:grid;grid-template-columns:1fr;gap:1.75rem 1rem}
@media(min-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.stats{grid-template-columns:repeat(3,1fr);gap:2rem}}
.stat__num{display:block;font-family:var(--sans);font-weight:800;color:#fff;font-size:clamp(1.85rem,1.2rem + 2vw,2.9rem);line-height:1;letter-spacing:-.035em;margin-bottom:.55rem}
.stat__num small{font-size:.42em;font-weight:700;letter-spacing:0;color:var(--sobre-marca-suave);margin-left:.15em}
/* display:block necessario pro text-wrap:balance funcionar de verdade em
   Chromium (medido no motor original, comportamento herdado sem alteracao). */
.stat__txt{display:block;font-size:.84rem;line-height:1.45;color:var(--sobre-marca-suave);text-wrap:balance}

/* --- Telefone: link no mobile, copiar no desktop ------------------------- */
.tel{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.6rem,1.25rem + 1.4vw,2.35rem);color:#FFF}
.tel svg{width:1.4rem;height:1.4rem;stroke:var(--sobre-marca-suave);fill:none}
.tel-copiar{display:none;align-items:center;gap:.5rem;margin-top:1rem;padding:.62rem 1.15rem;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid color-mix(in srgb,#FFF 35%,transparent);color:#FFF;transition:var(--transicao)}
.tel-copiar:hover{background:#FFF;color:var(--marca-fundo)}
.tel-copiar svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none}
/* so aparece onde tel: nao resolve */
@media(min-width:900px){.tel-copiar{display:inline-flex}}
.tel-copiar[data-copiado="1"]{background:#FFF;color:var(--marca-fundo)}

/* Split, Citacao, Cards, Trajetoria, Sinais, Consulta,
   Localizacao, FAQ, CTA final, Rodape e Reveal ficam em componentes.css
   (ver nota no topo deste arquivo). */