/* ==========================================================================
   Dra. Nilza Perin · Gastropediatra
   Design system em tokens derivados do logo (4 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, Tratamentos,
   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). Separado
   nesta rodada (Rodada 4) porque este arquivo sozinho passou do teto de
   500 linhas; nenhum componente foi alterado, so movido de arquivo.
   ========================================================================== */

/* --- 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 --------------------------------------------------------------
   Todas as cores saem do logo dela (logo.svg, 4 cores). Nada inventado.     */
:root{
  /* cores do logo */
  --azul:#0081BA;        /* metade esquerda do coracao + wordmark */
  --verde:#00A651;       /* metade direita do coracao */
  --limao:#8DC63F;       /* a espiral do aparelho digestivo + "Gastropediatra" */

  /* 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;
  --azul-suave:#E7F1F7;
  --azul-fundo:#004E7E;  /* faixa solida: escurecido do --azul ate segurar texto branco */
  --azul-rodape:#003D63;

  /* tinta */
  --tinta:#20303C;
  --tinta-media:#46586A;
  --tinta-suave:#5A6B7A;
  --sobre-azul:#EAF3F8;
  --sobre-azul-suave:#B9D3E4;

  /* TONS DE TINTA: as cores do logo sao para BLOCO e traco, nao para TEXTO
     sobre fundo claro. Medido: --limao da 2.04:1 e --verde 3.19:1 sobre
     branco, os dois REPROVANDO em WCAG AA. Estes sao os mesmos matizes
     escurecidos ate passar 4.5:1. As cores originais seguem intactas para
     superficie e traco.
     Ver feedback_paleta_de_manual_reprova_como_texto_derivar_tom_de_tinta. */
  --azul-tinta:#00578D;   /* 7.64:1 sobre branco. Nao foi inventado: e a cor da
                             cabeca da crianca no proprio logo */
  --verde-tinta:#006B3F;  /* 6.61:1 sobre branco. O --verde escurecido no matiz */

  /* acao */
  --acao:#00578D;
  --acao-escuro:#00426B;

  /* 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. Antes deste token os dois eram numeros digitados em
     lugares diferentes e podiam sair de sincronia sem aviso -- foi
     exatamente esse o bug que gerou a sobreposicao (rotulo do hero
     comecando 1,1px antes do fim do header, ver relatorio Rodada 4). */
  --h-topo:clamp(79px,71px + 1.6vw,99px);

  --linha:1px solid color-mix(in srgb,var(--azul-tinta) 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(--verde-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(--azul-suave)}
.secao--solido{background:var(--azul-tinta);color:var(--sobre-azul)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* impede quebra no meio de um token composto (ex: "CRM-SC 5517") em telas estreitas */
.nowrap{white-space:nowrap}

.rotulo{
  font-size:var(--t-mini);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--verde-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(--azul-suave)}

.titulo{
  font-family:var(--sans);font-weight:800;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.032em;color:var(--azul-tinta);
  max-width:19ch;text-wrap:balance;
}
.titulo em{font-style:normal;color:var(--verde-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-azul-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(--azul-tinta) 30%,transparent);color:var(--azul-tinta)}
.btn--linha:hover{background:var(--azul-tinta);color:#FFF;border-color:var(--azul-tinta)}
.secao--solido .btn--linha{border-color:color-mix(in srgb,#FFF 35%,transparent);color:#FFF}
.secao--solido .btn--linha:hover{background:#FFF;color:var(--azul-tinta)}
/* botao claro sobre foto escura, par do CTA de acao */
.btn--fantasma{background:rgba(255,255,255,.92);color:var(--azul-tinta)}
.btn--fantasma:hover{background:#FFF;transform:translateY(-2px)}
.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(--azul-tinta) 12%,transparent);box-shadow:0 2px 20px rgba(0,78,126,.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 desta cliente tem razao 1268x963 (1,317:1), bem mais vertical que a
   referencia de onde a regra original veio (58px de altura virava so 76px
   de largura e o wordmark sumia). Medido: em 76px de altura a largura da
   logo fica 100px, ainda cabendo com folga dentro do topo__linha acima. */
.topo__marca img{height:clamp(56px,46px + 2vw,76px);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(--verde);transition:right var(--transicao)}
.topo__nav a:hover{color:var(--azul-tinta)}
.topo__nav a:hover::after{right:0}
.topo__acao{display:none}
@media(min-width:900px){.topo__nav{display:flex}.topo__acao{display:inline-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: v1 fica em 0,455 de mediana na
   zona de texto). 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 (rodada 3, o que mudou): 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 relatorio da Task 3, Rodada 3).  */
.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 azul -- bug real, pego medindo
   (o registro tinha pixel batendo exato com --azul-fundo, a cor da barra). */
.hero__topo{
  position:relative;
  /* empurra a faixa de foto (e o texto empilhado embaixo dela) pra comecar
     so depois do header fixo. Sem isso os primeiros --h-topo px da faixa
     ficam atras do header: e onde o topo da cabeca dela caia (rosto
     aparecendo so do nariz pra baixo, ver relatorio Rodada 4). 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 -------------
   Antes desta rodada o mobile usava o mesmo esquema do desktop (foto
   full-bleed atras do texto inteiro, veu vertical cobrindo so a faixa de
   baixo). Duas falhas nasceram dai: (1) a altura da faixa de foto dependia
   da altura do BLOCO DE TEXTO (padding-top gigante empurrando o conteudo),
   entao o object-position tinha que fugir do rosto pra ele nao cair atras do
   H1 -- e a foto que sobrava era so parede e persiana desfocadas, sem a
   medica; (2) o veu vertical fechava cedo (400px), cortando ainda mais a
   foto. A correcao e estrutural, nao so cosmetica: `.hero__foto` agora tem
   ALTURA PROPRIA, independente do texto (fixada abaixo, nao derivada de
   padding), 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) e devolve o rosto dela ao hero: sem precisar fugir do texto, o
   object-position pode mirar o enquadramento certo de novo. */
.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. Medido com o
     screenshot real (nao estimado): entre 300 e 380px o rosto cabe inteiro,
     sem cortar testa nem queixo, em qualquer largura mobile testada
     (360, 390, 768). */
  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 (nao a mesma conta do desktop por
     coincidencia, conferida): com a caixa baixa e larga, o corte e quase
     todo horizontal (a foto e mais larga que a caixa), entao o eixo Y quase
     nao se move; 28% deixa a cabeca com folga no topo sem sobrar queixo. */
  object-position:70% 28%;
}
/* 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 (rotulo + folga do header + H1 +
       sub + botoes + registro) 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. Nunca o contrario -- um teto fixo
       aqui cortaria o registro em telas de notebook mais baixas (medido:
       com min-height sozinho, sem este piso, 700px de altura de viewport
       já sobra so 6px de folga abaixo do registro antes de cortar; com
       height fixo em vez de min-height, o registro cortava de verdade). */
    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), mesmo caso ja documentado
       no .hero__veu logo abaixo. */
    position:absolute;inset:0;height:auto;overflow:visible;
  }
  .hero__foto>img{object-position:70% 30%}
  .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 -- bug real, pego medindo
       (a cor de fundo batia igual a cor da propria foto, sem nenhum creme
       misturado). */
    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, nao
       dois numeros por coincidencia iguais). Antes esta rodada usava paradas
       em PX FIXO por breakpoint (tabela medida a mao em 960/1024/.../1600px);
       funcionava pro criterio antigo (metade esquerda inteira) mas folgava
       demais: o teto ficava a mais de 100px depois do fim do texto real em
       1440px, entao o veu quase opaco (0,92) ainda cobria a foto ate 850px e
       so zerava em 1380px, sobrando uns 60px de foto visivel numa tela de
       1440px. Ancorar em --fim-texto elimina a folga: o veu acompanha a
       coluna de texto sozinho, em qualquer largura, sem tabela.
       A queda so comeca DEPOIS de --fim-texto (nunca antes): a primeira
       tentativa desta rodada comecava a esmaecer 60px ANTES do fim da caixa,
       e a ponta direita do H1 (que encosta exatamente em --fim-texto) caia
       pra 0,83 de opacidade ali, furando 4,5:1 contra a persiana clara atras
       -- medido pixel a pixel, corrigido depois. Uma segunda rodada de
       medicao (registro, o par mais apertado mesmo contra creme solido: so
       5,19:1 contra --tinta-suave, ver test/contraste.py) ainda pegava pior
       pixel 4,59:1 em 1600px, folga curta demais pra sobreviver a variacao
       de renderizacao entre navegadores. Por isso o patamar alto vai ate
       0,97 (nao 0,94) e so comeca a cair depois de --fim-texto + 50px, nao
       + 20px: mais folga onde o texto realmente encosta. 420px depois disso
       ja esta praticamente nula, sobrando foto visivel de verdade do lado
       direito (ver medicao no relatorio da Task 3, Rodada 3). */
    --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 -- por isso "flex;align-items"
       tambem saiu daqui, nao faz falta mais: sem eles o bloco ja cai
       flush-left dentro do padding, bloco normal. */
    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 mais saem de
       sincronia (antes, com o texto centralizado, o inicio dependia da
       propria altura do bloco e so por coincidencia ficava perto do fim do
       header: 92,9px medido contra 94,0px do header, sobrepondo 1,1px).
       +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(--azul-tinta);margin-bottom:1.5rem;text-wrap:balance}
.hero__nome em{font-style:normal;color:var(--verde-tinta)}
.hero__sub{font-size:var(--t-lead);color:var(--tinta-media);max-width:40rem;line-height:1.58}
.hero__sub strong{color:var(--azul-tinta);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}

/* barra de numeros: faixa azul solida atravessando a largura toda */
.hero__stats{background:var(--azul-fundo);color:var(--sobre-azul);padding-block:clamp(2rem,1.4rem + 1.6vw,2.75rem)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem}
@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-azul-suave);margin-left:.15em}
.stat__txt{font-size:.84rem;line-height:1.45;color:var(--sobre-azul-suave)}

/* --- 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-azul-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(--azul-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(--azul-fundo)}

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