/* =========================================================
   ESPAÇO BELLESIS — v1
   Paleta extraída da identidade da marca (logotipo + cartões)

   Duas famílias de cor, e a diferença importa:

   LITERAIS (--creme, --tinta, --sage, --ouro…) nunca mudam.
   São a marca. Servem os blocos que são escuros de propósito
   nos dois temas — paramédica, passos, rodapé — e os botões.

   SEMÂNTICAS (--pagina, --cartao, --texto, --titulo…) viram
   no tema escuro. São a superfície do site, não a marca.
   ========================================================= */

:root{
  /* --- literais da marca --- */
  --sage-claro:#DCE1D3;
  --sage:#C3CBB6;
  --sage-medio:#A8B196;
  --taupe:#8B8C7E;
  --taupe-escuro:#6E6F63;
  /* O bloco do cartao da profissional. O taupe da arte da clinica
     da 3.16:1 com o creme por cima - passa no papel e reprova na tela.
     Este tom mantem a familia e sobe para 7.68:1. */
  --bloco-perfil:#4E4F45;
  --ouro:#B08D4F;
  --ouro-claro:#D8BE8C;
  --tinta:#1C1C1A;
  --creme:#F7F6F2;

  /* --- semânticas: superfície clara --- */
  --pagina:#F7F6F2;
  --pagina-alt:#EFEDE6;
  --cartao:#FFFFFF;
  --titulo:#1C1C1A;
  --titulo-em:#8B8C7E;
  --texto:#33332F;
  --apoio:#5A5B51;
  --rotulo:#8B8C7E;
  --linha:rgba(139,140,126,.16);
  --realce-fundo:#DCE1D3;
  --realce-borda:#A8B196;
  --selo-fundo:#C3CBB6;
  --selo-texto:#1C1C1A;
  --sombra:rgba(28,28,26,.09);

  /* --- tipografia e medidas --- */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, 'Segoe UI', sans-serif;
  --largura:1180px;
  --respiro:clamp(72px, 9vw, 130px);
  --curva:cubic-bezier(.22,.61,.36,1);
}

:root[data-tema="escuro"]{
  --pagina:#131312;
  --pagina-alt:#1A1A18;
  --cartao:#1F1F1D;
  --titulo:#F0EEE8;
  --titulo-em:#A8B196;
  --texto:#CFCDC4;
  --apoio:#ADAB9F;
  --rotulo:#A8B196;
  --linha:rgba(195,203,182,.14);
  --realce-fundo:#242720;
  --realce-borda:#4A4D40;
  --selo-fundo:#3A3D33;
  --selo-texto:#F0EEE8;
  --sombra:rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px}

body{
  margin:0;
  font-family:var(--sans);
  /* Jost 400 no corpo. O 300 (light) desaparecia no paragrafo,
     principalmente no tema escuro e nos textos de apoio. */
  font-weight:400;
  font-size:17px;
  line-height:1.75;
  color:var(--texto);
  background:var(--pagina);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--curva), color .5s var(--curva);
}

img{max-width:100%; display:block}

a{color:inherit}

h1,h2,h3{
  font-family:var(--serif);
  /* 500, nao 400: a Cormorant Garamond e uma serifada de traco
     naturalmente fino, e em corpo grande ela afina ainda mais.
     No 400 o subtitulo ficava dificil de ler sobre o creme. */
  font-weight:500;
  color:var(--titulo);
  line-height:1.12;
  margin:0;
  letter-spacing:.005em;
}

h1{font-size:clamp(2.6rem, 6.2vw, 4.6rem)}
h2{font-size:clamp(2rem, 4.2vw, 3.2rem)}
h3{font-size:1.35rem; line-height:1.3}

h1 em, h2 em{font-style:italic; color:var(--titulo-em)}

p{margin:0 0 1.1em}

.container{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:0 24px;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--creme); padding:12px 20px;
}
.pular:focus{left:0}

/* ---------- elementos recorrentes ---------- */

/* Rótulos em maiúscula espaçada — Jost.
   Peso 400 em vez de 300: no corpo pequeno e com letter-spacing
   largo, o peso light some contra o fundo. */
.sobretitulo{
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--rotulo);
  font-weight:500;
  margin:0 0 20px;
}
.sobretitulo--claro{color:var(--ouro-claro)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 32px;
  background:var(--tinta);
  color:var(--creme);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--tinta);
  border-radius:2px;
  transition:background .4s var(--curva), color .4s var(--curva),
             border-color .4s var(--curva), transform .4s var(--curva);
}
.btn:hover{background:var(--taupe); border-color:var(--taupe); transform:translateY(-2px)}

.btn--vazado{background:transparent; color:var(--titulo); border-color:var(--titulo)}
.btn--vazado:hover{background:var(--titulo); color:var(--pagina)}

.btn--claro{background:var(--creme); color:var(--tinta); border-color:var(--creme)}
.btn--claro:hover{background:var(--ouro-claro); border-color:var(--ouro-claro); color:var(--tinta)}

.btn--pequeno{padding:11px 24px; font-size:.76rem}

/* No tema escuro o botão sólido inverte: claro sobre fundo escuro. */
[data-tema="escuro"] .btn{background:var(--creme); color:var(--tinta); border-color:var(--creme)}
[data-tema="escuro"] .btn:hover{background:var(--ouro-claro); border-color:var(--ouro-claro)}
[data-tema="escuro"] .btn--vazado{background:transparent; color:var(--titulo); border-color:var(--realce-borda)}
[data-tema="escuro"] .btn--vazado:hover{background:var(--creme); color:var(--tinta); border-color:var(--creme)}

.secao-cabecalho{max-width:640px; margin:0 0 clamp(44px,5vw,68px)}
.secao-cabecalho__linha{color:var(--apoio); margin-top:20px}
.secao-cabecalho--claro h2{color:var(--creme)}
.secao-cabecalho--claro h2 em{color:var(--ouro-claro)}

.lista-marcada{list-style:none; padding:0; margin:26px 0 0}
.lista-marcada li{
  position:relative; padding-left:26px; margin-bottom:11px;
  font-size:.95rem; color:var(--apoio);
}
.lista-marcada li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%;
  background:var(--realce-borda);
}

/* =========================================================
   CABEÇALHO
   ========================================================= */

.cabecalho{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:padding .45s var(--curva), background .45s var(--curva), box-shadow .45s var(--curva);
}
.cabecalho.encolhido,
.cabecalho.solido{
  padding:10px 0;
  background:var(--pagina);
  box-shadow:0 1px 0 var(--linha);
}

.cabecalho__interno{
  width:100%; max-width:var(--largura); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:20px;
}

.marca{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; flex-shrink:0;
}
.marca img{width:46px; height:46px; border-radius:50%; object-fit:cover}
.marca__texto{
  font-family:var(--serif); font-size:1.02rem; line-height:1.08;
  letter-spacing:.14em; text-transform:uppercase; color:var(--creme);
  transition:color .45s var(--curva);
}
.marca__texto em{font-style:normal; font-weight:600}
.cabecalho.encolhido .marca__texto,
.cabecalho.solido .marca__texto{color:var(--titulo)}

.nav{margin-left:auto; display:flex; gap:26px}
.nav a{
  position:relative;
  font-size:.8rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--creme); padding:6px 0;
  transition:color .45s var(--curva);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--curva);
}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}
.cabecalho.encolhido .nav a,
.cabecalho.solido .nav a{color:var(--texto)}

.cabecalho .btn--pequeno{
  background:transparent; color:var(--creme); border-color:rgba(247,246,242,.5);
}
.cabecalho .btn--pequeno:hover{background:var(--creme); color:var(--tinta); border-color:var(--creme)}
.cabecalho.encolhido .btn--pequeno,
.cabecalho.solido .btn--pequeno{background:var(--titulo); color:var(--pagina); border-color:var(--titulo)}
.cabecalho.encolhido .btn--pequeno:hover,
.cabecalho.solido .btn--pequeno:hover{background:var(--taupe); border-color:var(--taupe); color:var(--creme)}

/* ---------- alternador de tema ---------- */

.tema{
  flex-shrink:0;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer;
  color:var(--creme);
  border:1px solid rgba(247,246,242,.35);
  border-radius:50%;
  transition:color .45s var(--curva), border-color .45s var(--curva),
             background .35s var(--curva);
}
/* Só o fundo no hover, sem giro: o ícone diz qual tema está ativo, e
   um ícone que gira enquanto informa estado chama atenção para o
   movimento em vez de para a informação. */
.tema:hover{background:rgba(247,246,242,.12)}
.cabecalho.encolhido .tema,
.cabecalho.solido .tema{color:var(--titulo); border-color:var(--linha)}
.cabecalho.encolhido .tema:hover,
.cabecalho.solido .tema:hover{background:var(--pagina-alt)}

/* O icone mostra o tema ATIVO, nao o destino do clique: sol aceso no claro,
   lua acesa no escuro. O contrario faz o botao parecer um atalho para o outro tema. */
.tema__sol{display:block}
.tema__lua{display:none}
[data-tema="escuro"] .tema__sol{display:none}
[data-tema="escuro"] .tema__lua{display:block}

.hamburguer{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
}
.hamburguer span{
  display:block; width:26px; height:1.5px; background:var(--creme);
  transition:transform .4s var(--curva), opacity .3s, background .45s var(--curva);
}
.cabecalho.encolhido .hamburguer span,
.cabecalho.solido .hamburguer span, .cabecalho.menu-aberto .hamburguer span{background:var(--titulo)}
.cabecalho.menu-aberto .hamburguer span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.cabecalho.menu-aberto .hamburguer span:nth-child(2){opacity:0}
.cabecalho.menu-aberto .hamburguer span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding:150px 0 100px;
}

.hero__fundo{position:absolute; inset:-12% 0 -12% 0; will-change:transform}
.hero__fundo img{width:100%; height:100%; object-fit:cover; object-position:center 38%}

.hero__veu{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,20,18,.88) 0%, rgba(20,20,18,.68) 42%, rgba(20,20,18,.34) 100%),
    linear-gradient(to top, rgba(20,20,18,.6), transparent 45%);
}
[data-tema="escuro"] .hero__veu{
  background:
    linear-gradient(100deg, rgba(10,10,9,.94) 0%, rgba(10,10,9,.8) 42%, rgba(10,10,9,.5) 100%),
    linear-gradient(to top, rgba(10,10,9,.75), transparent 45%);
}

.hero__conteudo{position:relative; z-index:2; max-width:860px}
.hero h1{color:var(--creme)}
.hero h1 em{color:var(--ouro-claro)}

.hero__linha{
  max-width:520px; margin-top:28px;
  color:rgba(247,246,242,.82); font-size:1.05rem;
}

.hero__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.hero .btn{background:var(--creme); color:var(--tinta); border-color:var(--creme)}
.hero .btn:hover{background:var(--ouro-claro); border-color:var(--ouro-claro)}
.hero .btn--vazado{background:transparent; color:var(--creme); border-color:rgba(247,246,242,.45)}
.hero .btn--vazado:hover{background:var(--creme); color:var(--tinta)}

.hero__horario{margin-top:34px}
.hero__horario span{
  display:inline-block;
  font-size:.8rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro-claro);
  border-top:1px solid rgba(216,190,140,.4);
  padding-top:14px;
}

.hero__rolar{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:rgba(247,246,242,.24); overflow:hidden; z-index:2;
}
.hero__rolar span{
  display:block; width:100%; height:18px; background:var(--ouro-claro);
  animation:desce 2.4s var(--curva) infinite;
}
@keyframes desce{
  0%{transform:translateY(-20px)}
  100%{transform:translateY(52px)}
}

/* =========================================================
   PILARES
   ========================================================= */

.pilares{background:var(--pagina-alt); padding:var(--respiro) 0; transition:background .5s var(--curva)}
.pilares__grade{display:grid; grid-template-columns:repeat(4,1fr); gap:44px}

.pilar__num{
  display:block; font-family:var(--serif); font-size:1.5rem;
  color:var(--realce-borda); margin-bottom:16px;
}
.pilar h3{margin-bottom:12px}
.pilar p{font-size:.94rem; color:var(--apoio); margin:0}

/* =========================================================
   A CLÍNICA
   ========================================================= */

.clinica{padding:var(--respiro) 0}
.clinica__grade{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,88px); align-items:center;
}

.clinica__imagem{position:relative}
.clinica__imagem img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px;
}
.clinica__selo{
  position:absolute; right:-18px; bottom:38px;
  background:var(--selo-fundo); color:var(--selo-texto);
  padding:20px 26px; text-align:center; border-radius:2px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.5;
}
.clinica__selo strong{
  display:block; font-family:var(--serif); font-size:1.6rem;
  letter-spacing:.05em; font-weight:500;
}

/* =========================================================
   PARAMÉDICA — escura nos dois temas, de propósito
   ========================================================= */

.paramedica{
  position:relative; overflow:hidden;
  background:var(--tinta);
  padding:var(--respiro) 0;
  color:rgba(247,246,242,.78);
}
[data-tema="escuro"] .paramedica{background:#0B0B0A}

.paramedica__fundo{
  position:absolute; inset:-15% -10%;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(176,141,79,.16), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(195,203,182,.1), transparent 55%);
  will-change:transform;
}
.paramedica__grade{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.paramedica h2{color:var(--creme)}
.paramedica h2 em{color:var(--ouro-claro)}
.paramedica__abre{
  font-family:var(--serif); font-size:1.4rem; font-style:italic;
  line-height:1.5; color:var(--creme); margin-top:26px;
}

.paramedica__itens{display:flex; flex-wrap:wrap; gap:10px; margin:30px 0}
.paramedica__itens span{
  border:1px solid rgba(216,190,140,.32);
  padding:8px 16px; border-radius:2px;
  font-size:.78rem; letter-spacing:.06em; color:var(--ouro-claro);
}

.paramedica__assinatura{font-size:.92rem; color:rgba(247,246,242,.6)}
.paramedica__assinatura strong{color:var(--creme); font-weight:400}

.paramedica .btn--claro{background:var(--creme); color:var(--tinta); border-color:var(--creme)}

.paramedica__imagem img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px;
  filter:saturate(.9);
}

/* =========================================================
   TRATAMENTOS
   ========================================================= */

.tratamentos{padding:var(--respiro) 0; background:var(--pagina-alt); transition:background .5s var(--curva)}

.cartoes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}

.cartao{
  background:var(--cartao);
  border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva), background .5s var(--curva);
}
.cartao:hover{transform:translateY(-6px); box-shadow:0 18px 40px var(--sombra)}

.cartao__foto{overflow:hidden; aspect-ratio:4/3}
.cartao__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--curva);
}
.cartao:hover .cartao__foto img{transform:scale(1.06)}

.cartao__corpo{padding:30px 28px 32px; flex:1; display:flex; flex-direction:column}
.cartao__corpo > p{font-size:.94rem; color:var(--apoio); margin:12px 0 20px}
.cartao__corpo ul{list-style:none; padding:0; margin:0 0 auto}
.cartao__corpo li{
  font-size:.88rem; padding:7px 0;
  border-bottom:1px solid var(--linha);
  color:var(--texto);
}
.cartao__corpo li:last-child{border-bottom:0}

.cartao__link{
  display:inline-block; margin-top:22px;
  font-size:.8rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:3px;
  align-self:flex-start;
}
[data-tema="escuro"] .cartao__link{color:var(--ouro-claro)}

.cartao--destaque{
  background:var(--realce-fundo);
  outline:1px solid var(--realce-borda);
}

/* =========================================================
   PASSOS — escura nos dois temas
   ========================================================= */

.passos{background:var(--taupe); padding:var(--respiro) 0; color:rgba(247,246,242,.8)}
[data-tema="escuro"] .passos{background:#2E302A}

.passos__lista{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px;
}
/* A faixa termina ANTES do número, em vez de passar por baixo dele.
   Era border-top de largura total, e o algarismo ficava colado
   na linha. */
.passo{position:relative; padding-top:36px}
.passo::before{
  content:''; position:absolute; top:0; left:0;
  width:calc(100% - 58px); height:1px;
  background:rgba(247,246,242,.28);
}
.passo__num{
  position:absolute; top:-.44em; right:0;
  font-family:var(--serif); font-size:3.2rem; line-height:1;
  color:rgba(247,246,242,.32);
}
.passo h3{color:var(--creme); margin-bottom:12px}
.passo p{font-size:.92rem; margin:0}

/* =========================================================
   EQUIPE
   ========================================================= */

/* =========================================================
   EQUIPE — o cartão da profissional, remontado

   A clínica tem a arte das profissionais como JPEG de
   Instagram: foto, nome e especialidades achatados numa
   imagem só. Aqui a composição é refeita — bloco sólido de
   cor, a foto recortada por cima quebrando a borda de baixo,
   e o resto como texto de verdade. Ganha busca, ganha tela
   grande e ganha tema escuro; a imagem não daria nenhum dos três.
   ========================================================= */

.equipe{padding:var(--respiro) 0}
.equipe__grade{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
.equipe__rodape{margin:52px 0 0; text-align:center}

.pessoa{display:flex}
.pessoa__bloco{
  display:flex; flex-direction:column; width:100%;
  background:var(--bloco-perfil); color:var(--creme);
  border-radius:3px; padding:0 26px 30px;
  text-decoration:none;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
}
.pessoa__bloco:hover{transform:translateY(-6px); box-shadow:0 18px 40px var(--sombra)}

/* A foto entra recuada dos lados e estourando o topo do bloco —
   é o gesto da arte original, onde o retrato se apoia sobre a cor. */
.pessoa__foto{
  aspect-ratio:9/16; overflow:hidden; border-radius:3px;
  background:var(--taupe);
  margin:-22px -6px 22px; box-shadow:0 10px 26px rgba(28,28,26,.22);
}
.pessoa__foto img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 1.1s var(--curva);
}
.pessoa__bloco:hover .pessoa__foto img{transform:scale(1.05)}

.pessoa__prazer{
  font-family:var(--serif); font-style:italic; font-size:1.5rem;
  color:var(--ouro-claro); margin:0 0 2px; line-height:1;
}
.pessoa h3{
  font-family:var(--serif); font-size:1.34rem; line-height:1.18;
  color:var(--creme); margin:0 0 10px;
}
.pessoa__area{
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-claro); margin:0 0 18px;
}
.pessoa ul{list-style:none; padding:0; margin:0 0 auto}
.pessoa li{
  font-size:.85rem; color:rgba(247,246,242,.82);
  padding:5px 0 5px 18px; position:relative;
}
.pessoa li::before{
  content:''; position:absolute; left:0; top:1.05em;
  width:7px; height:1px; background:var(--ouro-claro);
}
.pessoa__mais{
  display:inline-block; margin-top:24px;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme); border-bottom:1px solid rgba(247,246,242,.4);
  padding-bottom:4px;
}
.pessoa__bloco:hover .pessoa__mais{border-bottom-color:var(--ouro-claro); color:var(--ouro-claro)}

@media (max-width:1024px){ .equipe__grade{grid-template-columns:repeat(2,1fr); gap:34px} }
@media (max-width:560px){ .equipe__grade{grid-template-columns:1fr} }

/* =========================================================
   GALERIA
   ========================================================= */

.galeria{padding:var(--respiro) 0 0}
.galeria__faixa{
  display:flex; gap:14px; overflow-x:auto;
  padding:8px 24px calc(var(--respiro) - 20px);
  scroll-snap-type:x mandatory;
}
.galeria__faixa figure{
  margin:0; flex:0 0 clamp(230px, 26vw, 320px);
  scroll-snap-align:center;
}
.galeria__faixa img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px;
  transition:filter .6s var(--curva);
  filter:saturate(.92);
}
.galeria__faixa figure:hover img{filter:saturate(1.05)}

/* =========================================================
   CHAMADA
   ========================================================= */

.chamada{
  background:var(--sage-medio);
  padding:clamp(64px,7vw,96px) 0;
  text-align:center;
}
[data-tema="escuro"] .chamada{background:#3D4136}
.chamada h2{color:var(--tinta); margin-bottom:34px}
.chamada h2 em{color:var(--creme)}
[data-tema="escuro"] .chamada h2{color:var(--creme)}
[data-tema="escuro"] .chamada h2 em{color:var(--ouro-claro)}
.chamada .sobretitulo--claro{color:var(--creme)}
.chamada .btn--claro{background:var(--tinta); color:var(--creme); border-color:var(--tinta)}
.chamada .btn--claro:hover{background:var(--creme); color:var(--tinta); border-color:var(--creme)}

/* =========================================================
   CONTATO
   ========================================================= */

.contato{padding:var(--respiro) 0}
.contato__grade{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(40px,6vw,72px); align-items:start;
}
.contato__bloco{margin-top:30px}
.contato__bloco h3{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rotulo);
  margin-bottom:10px;
}
.contato__bloco p{margin:0; color:var(--texto)}
.contato__bloco a{text-decoration:none; border-bottom:1px solid var(--realce-borda)}
.contato__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

.contato__mapa{
  height:100%; min-height:440px; border-radius:3px; overflow:hidden;
  background:var(--pagina-alt);
}
.contato__mapa iframe{width:100%; height:100%; min-height:440px; border:0; display:block}

/* =========================================================
   RODAPÉ — escuro nos dois temas
   ========================================================= */

.rodape{background:var(--tinta); color:rgba(247,246,242,.62); padding:clamp(60px,6vw,84px) 0 0}
[data-tema="escuro"] .rodape{background:#0B0B0A}

.rodape__grade{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:44px; padding-bottom:56px;
}
.rodape__marca img{border-radius:50%; margin-bottom:20px}
.rodape__marca p{font-size:.92rem; margin:0}

.rodape__coluna h3{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ouro-claro);
  margin-bottom:18px;
}
.rodape__coluna a{
  display:block; text-decoration:none; font-size:.9rem;
  padding:4px 0; transition:color .35s var(--curva);
}
.rodape__coluna a:hover{color:var(--creme)}
.rodape__coluna p{font-size:.9rem; margin:0 0 12px}
/* Os logos das redes. O alvo tem 40px de lado — abaixo disso o dedo
   erra no celular, e dois ícones lado a lado erram um no outro. */
.rodape__redes{display:flex; gap:10px; margin-top:18px}
.rodape__redes a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; padding:0;
  color:rgba(247,246,242,.72);
  border-radius:3px;
  transition:color .3s var(--curva), background-color .3s var(--curva);
}
.rodape__redes a:hover{color:var(--ouro-claro); background:rgba(247,246,242,.07)}
.rodape__redes svg{display:block}

.rodape__base{border-top:1px solid rgba(247,246,242,.1); padding:24px 0}
.rodape__base .container{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.rodape__base p{margin:0; font-size:.78rem; color:rgba(247,246,242,.4)}

/* =========================================================
   BOTÕES FLUTUANTES
   WhatsApp à direita, voltar ao topo à esquerda.
   ========================================================= */

.zap{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px var(--sombra);
  transition:transform .4s var(--curva);
}
.zap:hover{transform:scale(1.08)}

.topo{
  position:fixed; left:22px; bottom:22px; z-index:90;
  width:48px; height:48px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background:var(--cartao); color:var(--titulo);
  border:1px solid var(--linha);
  box-shadow:0 4px 18px var(--sombra);
  /* nasce escondido: só aparece depois que há de onde voltar */
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--curva), transform .4s var(--curva),
             visibility .4s var(--curva), background .4s var(--curva);
}
.topo.visivel{opacity:1; visibility:visible; transform:none}
.topo:hover{background:var(--pagina-alt); transform:translateY(-3px)}

/* =========================================================
   ANIMAÇÃO DE ENTRADA
   ========================================================= */

/* Sem JS o conteúdo aparece normalmente — nunca fica invisível. */
.com-js .reveal{
  opacity:0;
  transform:translateY(26px);
}
.reveal{
  transition:opacity .9s var(--curva), transform .9s var(--curva);
}
.reveal.visivel{opacity:1; transform:none}
.reveal[data-atraso="1"]{transition-delay:.1s}
.reveal[data-atraso="2"]{transition-delay:.2s}
.reveal[data-atraso="3"]{transition-delay:.3s}
.reveal[data-atraso="4"]{transition-delay:.4s}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:1100px){
  .nav{gap:18px}
  .nav a{font-size:.72rem}
}

@media (max-width:1024px){
  .pilares__grade{grid-template-columns:repeat(2,1fr); gap:38px}
  .passos__lista{grid-template-columns:repeat(2,1fr)}
  .rodape__grade{grid-template-columns:1fr 1fr; gap:38px}
  .paramedica__grade{grid-template-columns:1fr}
  .paramedica__imagem{max-width:420px}
}

@media (max-width:860px){
  html{scroll-padding-top:74px}

  .hamburguer{display:flex}
  .cabecalho__interno{gap:12px}
  .cabecalho .btn--pequeno{display:none}

  /* o alternador de tema continua visível no celular */
  .tema{margin-left:auto}

  .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(320px, 84vw);
    background:var(--pagina);
    flex-direction:column; justify-content:center;
    gap:6px; padding:40px;
    margin-left:0;
    transform:translateX(101%);
    visibility:hidden;
    transition:transform .5s var(--curva), visibility .5s var(--curva);
    box-shadow:-8px 0 40px var(--sombra);
  }
  .cabecalho.menu-aberto .nav{transform:translateX(0); visibility:visible}
  .nav a{color:var(--texto); font-size:.86rem; padding:14px 0}

  .clinica__grade, .contato__grade{grid-template-columns:1fr}
  .clinica__selo{right:16px; bottom:16px}
  .contato__mapa{min-height:320px}
  .contato__mapa iframe{min-height:320px}

  .hero{min-height:auto; padding:130px 0 90px}
  .hero__rolar{display:none}
}

@media (max-width:560px){
  body{font-size:16px}
  .pilares__grade, .passos__lista{grid-template-columns:1fr; gap:32px}
  .rodape__grade{grid-template-columns:1fr}
  .hero__acoes .btn{width:100%}
  .zap{width:52px; height:52px; right:16px; bottom:16px}
  .topo{width:44px; height:44px; left:16px; bottom:16px}
}

/* parallax é desligado no toque — custo alto, ganho baixo */
@media (hover:none), (max-width:860px){
  [data-parallax]{transform:none !important}
  .hero__fundo{inset:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* =========================================================
   COMPONENTES DAS PÁGINAS INTERNAS
   Só existem no site gerado — a v1 de página única não os usa.
   ========================================================= */

/* ---------- marcação de dado provisório ----------
   Pinta na tela o que ainda vai mudar. A conferência de
   lançamento vira uma busca por esta classe, e não um
   exercício de memória. No lançamento: trocar o texto E
   remover a classe — as duas coisas, sempre. */
.dado-provisorio{
  color:#C0392B;
  background:rgba(192,57,43,.1);
  padding:1px 6px; border-radius:2px;
  font-weight:400;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
[data-tema="escuro"] .dado-provisorio{color:#FF8A7A; background:rgba(255,138,122,.12)}

.img-provisoria{position:relative; display:block}
.img-provisoria::after{
  content:'IMAGEM PROVISORIA';
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  background:rgba(192,57,43,.85); color:#fff;
  font-size:.72rem; font-weight:500; letter-spacing:.18em;
  text-align:center; padding:8px 4px;
}

/* ---------- trilha de navegação ---------- */
.trilha{
  padding:104px 0 0;
  font-size:.82rem; color:var(--apoio);
}
.trilha .container{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.trilha a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s var(--curva)}
.trilha a:hover{border-bottom-color:var(--realce-borda)}
.trilha__sep{opacity:.4}
.trilha [aria-current]{color:var(--titulo)}

/* ---------- topo das páginas internas ---------- */
.pagina-topo{padding:44px 0 clamp(40px,5vw,64px)}
.pagina-topo__linha{
  max-width:640px; margin-top:24px;
  font-size:1.05rem; color:var(--apoio);
}
.pagina-topo--centro{text-align:center; padding-top:160px}
.pagina-topo--centro .pagina-topo__linha{margin-left:auto; margin-right:auto}
.pagina-topo--centro .servico-topo__acoes{justify-content:center}

/* ---------- topo da página de serviço ---------- */
.servico-topo{padding:44px 0 clamp(48px,6vw,80px)}
.servico-topo__grade{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.servico-topo__linha{margin-top:26px; font-size:1.05rem; color:var(--apoio)}
.servico-topo__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.servico-topo__imagem img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px;
}
.servico__profissional{
  margin-top:30px; padding-top:22px;
  border-top:1px solid var(--linha);
  font-size:.94rem; color:var(--apoio);
}
.servico__profissional strong{color:var(--titulo); font-weight:400}
.servico__profissional a{color:var(--ouro)}
[data-tema="escuro"] .servico__profissional a{color:var(--ouro-claro)}

/* ---------- corpo de texto ---------- */
.corpo-texto{padding-bottom:var(--respiro)}
.corpo-texto--estreito{max-width:760px}
.bloco{max-width:760px; margin:0 0 clamp(36px,4vw,52px)}
.bloco h2{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:16px}
.bloco p{margin:0 0 18px; font-size:1.02rem}
.bloco p:last-child{margin-bottom:0}

/* ---------- o post como narrativa, não como FAQ ----------

   Título curto seguido de UM parágrafo curto lê como pergunta e
   resposta mesmo quando o título não é uma pergunta: a forma
   denuncia antes do conteúdo. Por isso a seção do post ganhou
   vários parágrafos, uma abertura em corpo maior e a nota, que é
   onde entra a curiosidade que segura a leitura.  */

.post__lead{max-width:760px; margin:0 0 clamp(34px,4vw,48px)}
.post__lead p{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,2.1vw,1.5rem);
  line-height:1.5; color:var(--titulo); margin:0 0 16px;
}
.post__lead p:last-child{margin-bottom:0}

.nota{
  margin:26px 0 0; padding:22px 26px;
  background:var(--realce-fundo); border-left:3px solid var(--realce-borda);
  border-radius:2px;
}
.nota__rotulo{
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rotulo); margin:0 0 8px !important;
}
.nota p{font-size:.96rem; color:var(--texto)}

.post__fecho{
  border-top:1px solid var(--linha); padding-top:clamp(30px,3.4vw,42px);
}
.post__fecho p{color:var(--apoio)}

/* ---------- perguntas ---------- */
.perguntas{padding:var(--respiro) 0; background:var(--pagina-alt); transition:background .5s var(--curva)}
.perguntas__lista{max-width:820px}
.perguntas__lista--larga{max-width:900px; margin:0 auto}

.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{
  cursor:pointer; list-style:none;
  padding:22px 44px 22px 0; position:relative;
  /* 500, como todo título serifado do site desde 26/08. Aqui pesa
     mais que nos outros: a pergunta fica sobre fundo claro e é o que
     a pessoa varre com o olho antes de decidir o que abrir. */
  font-family:var(--serif); font-weight:500; font-size:1.24rem;
  color:var(--titulo);
  transition:color .3s var(--curva);
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--rotulo);
  border-bottom:1.5px solid var(--rotulo);
  transform:rotate(45deg);
  transition:transform .35s var(--curva);
}
.pergunta[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.pergunta summary:hover{color:var(--titulo-em)}
.pergunta p{
  margin:0; padding:0 44px 24px 0;
  font-size:.98rem; color:var(--texto);
}

/* ---------- cartões de hub ---------- */
.cartao__capa{display:block; overflow:hidden; aspect-ratio:4/3}
.cartao__capa img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--curva);
}
.cartao:hover .cartao__capa img{transform:scale(1.06)}
.cartao__corpo h3 a{text-decoration:none}
.cartao__corpo h3 a:hover{color:var(--titulo-em)}
.tratamentos--hub{background:transparent; padding-top:0}

/* ---------- tratamentos relacionados ---------- */
.vizinhos{padding:var(--respiro) 0; background:var(--pagina-alt); transition:background .5s var(--curva)}
.vizinhos__grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px;
}
.vizinho{
  display:block; text-decoration:none;
  background:var(--cartao); border-radius:3px; overflow:hidden;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
}
.vizinho:hover{transform:translateY(-5px); box-shadow:0 16px 34px var(--sombra)}
.vizinho img{width:100%; aspect-ratio:4/3; object-fit:cover}
.vizinho span{
  display:block; padding:20px 22px;
  font-family:var(--serif); font-size:1.2rem; color:var(--titulo);
}

/* ---------- blog ---------- */
.cluster{margin-bottom:clamp(48px,6vw,76px)}
.cluster h2{max-width:none}
.cluster h2{margin-bottom:28px}
/* Com um post por cluster, auto-fit dava a linha inteira ao card
   e a foto virava um cartaz. Colunas fixas por faixa resolvem:
   o card tem largura de card, tenha 1 ou 6 posts no grupo. */
.post-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media (max-width:900px){ .post-grade{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .post-grade{grid-template-columns:1fr} }
.post-cartao{
  background:var(--cartao); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
}
.post-cartao:hover{transform:translateY(-5px); box-shadow:0 16px 34px var(--sombra)}
.post-cartao__capa{display:block; aspect-ratio:3/2; overflow:hidden}
.post-cartao__capa img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--curva)}
.post-cartao:hover .post-cartao__capa img{transform:scale(1.05)}
.post-cartao__corpo{padding:26px 24px 28px}
.post-cartao__corpo h3{font-size:1.24rem; margin-bottom:12px}
.post-cartao__corpo h3 a{text-decoration:none}
.post-cartao__corpo p{font-size:.94rem; color:var(--apoio); margin-bottom:16px}

.post__capa{padding-bottom:clamp(36px,4vw,56px)}
.post__capa img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px}

/* O link do post para a página de serviço que ele alimenta.
   É o link que converte: a pessoa chegou por uma dúvida e
   sai numa página que vende. */
.puxador{
  max-width:760px; margin-top:clamp(40px,5vw,60px);
  background:var(--realce-fundo); border-left:3px solid var(--realce-borda);
  padding:32px 34px;
}
.puxador h2{font-size:1.5rem; margin-bottom:12px}
.puxador p{color:var(--apoio); margin-bottom:22px}

/* ---------- chamada com linha de apoio ---------- */
.chamada__linha{
  max-width:520px; margin:0 auto 30px;
  color:rgba(28,28,26,.72);
}
[data-tema="escuro"] .chamada__linha{color:rgba(247,246,242,.72)}

/* ---------- itens da paramédica viram links ---------- */
.paramedica__itens a{
  display:inline-block;
  border:1px solid rgba(216,190,140,.32);
  padding:8px 16px; border-radius:2px;
  font-size:.84rem; letter-spacing:.04em; color:var(--ouro-claro);
  text-decoration:none;
  transition:background .35s var(--curva), border-color .35s var(--curva);
}
.paramedica__itens a:hover{background:rgba(216,190,140,.14); border-color:rgba(216,190,140,.6)}

/* ---------- rótulos do rodapé ---------- */
.rodape__rotulo{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ouro-claro);
  margin-bottom:18px;
}
.rodape__base a{text-decoration:none; border-bottom:1px solid rgba(216,190,140,.3)}

/* ---------- aviso de cookies ----------
   Recusar é tão visível quanto aceitar, de propósito. */
.cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:95;
  max-width:640px; margin:0 auto;
  background:var(--cartao); color:var(--texto);
  border:1px solid var(--linha); border-radius:4px;
  padding:22px 24px;
  box-shadow:0 12px 40px var(--sombra);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between;
}
.cookies[hidden]{display:none}
.cookies p{margin:0; font-size:.9rem; flex:1 1 280px}
.cookies a{color:var(--ouro)}
[data-tema="escuro"] .cookies a{color:var(--ouro-claro)}
.cookies__acoes{display:flex; gap:10px}

/* ---------- responsivo das internas ---------- */
@media (max-width:860px){
  .trilha{padding-top:92px}
  .servico-topo__grade{grid-template-columns:1fr}
  .servico-topo__imagem{max-width:440px}
  .pagina-topo--centro{padding-top:130px}
  .cookies{flex-direction:column; align-items:stretch}
  .cookies__acoes .btn{flex:1}
  .topo{bottom:96px}
}

/* Parte 11 do blueprint: quando o estilo define proporção fixa,
   a altura precisa ficar livre. Com width e height no HTML (que
   existem para a página não pular ao carregar), o atributo vence
   o aspect-ratio e a imagem deforma — foi o que esticou a foto
   da clínica para 1250px numa coluna de 526px. */
.clinica__imagem img,
.paramedica__imagem img,
.servico-topo__imagem img,
.post__capa img,
.vizinho img,
.galeria__faixa img{height:auto}

/* =========================================================
   CARTÃO DO BLOG — eyebrow, título, prévia e botão
   Substitui o link de texto solto por um alvo de clique de
   verdade, e alinha o botão na base de todos os cards da
   linha, independente do tamanho do título.
   ========================================================= */

.post-cartao{
  border:1px solid var(--linha);
}

.post-cartao__capa{
  aspect-ratio:16/10;
  background:var(--pagina-alt);
}

.post-cartao__corpo{
  padding:26px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.post-cartao__eyebrow{
  font-size:.76rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--rotulo);
  margin:0 0 12px;
}

.post-cartao__corpo h3{
  font-size:1.3rem; line-height:1.24;
  margin:0 0 14px;
}
.post-cartao__corpo h3 a{
  text-decoration:none;
  transition:color .35s var(--curva);
}
.post-cartao__corpo h3 a:hover{color:var(--titulo-em)}

/* O resumo empurra o botão para baixo: com margin-bottom auto,
   todos os botões da linha ficam na mesma altura mesmo quando
   os títulos têm número de linhas diferente. */
.post-cartao__resumo{
  font-size:.95rem;
  color:var(--apoio);
  margin:0 0 24px;
}

.post-cartao__botao{
  align-self:stretch;
  margin-top:auto;
}

/* O card inteiro reage ao passar o mouse, não só o botão. */
.post-cartao:hover .post-cartao__botao{
  background:var(--titulo);
  color:var(--pagina);
  border-color:var(--titulo);
}
[data-tema="escuro"] .post-cartao:hover .post-cartao__botao{
  background:var(--creme);
  color:var(--tinta);
  border-color:var(--creme);
}

/* =========================================================
   FOTO AGUARDANDO
   Serviço sem foto real não recebe foto aproximada: recebe
   um marcador visível. Mesmo princípio do dado provisório —
   o que falta aparece na tela, em vez de virar item de lista
   que ninguém relê.
   ========================================================= */

.capa-vazia{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(-45deg,
      var(--pagina-alt) 0 14px,
      var(--realce-fundo) 14px 28px);
  border:1px dashed var(--realce-borda);
  border-radius:3px;
  text-align:center;
}
.capa-vazia--alta{aspect-ratio:3/4}

.capa-vazia span{
  font-family:var(--sans);
  font-size:.86rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--apoio);
  line-height:1.9;
  padding:0 18px;
}
.capa-vazia small{
  display:block;
  font-size:.74rem; font-weight:400;
  letter-spacing:.1em; text-transform:none;
  color:var(--rotulo);
}

/* =========================================================
   SEÇÕES DA HOME — ordem do blueprint
   Serviços primeiro, sobre a empresa depois, depoimentos,
   caminho para o blog, e o NAP no rodapé.
   ========================================================= */

/* ---------- sobre a empresa, na home ---------- */
.sobre-home{padding:var(--respiro) 0; background:var(--pagina-alt); transition:background .5s var(--curva)}
.sobre-home__grade{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,72px); align-items:start;
}
.sobre-home__texto p{color:var(--apoio); margin:24px 0 30px}
.sobre-home__pilares{gap:32px}

/* ---------- depoimentos ---------- */
.depoimentos{padding:var(--respiro) 0}
.depoimentos__grade{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.depoimento{
  margin:0; padding:32px 30px;
  background:var(--cartao);
  border:1px solid var(--linha); border-radius:3px;
  display:flex; flex-direction:column;
}
.depoimento blockquote{margin:0 0 auto; padding:0}
.depoimento blockquote p{
  font-family:var(--serif); font-size:1.22rem; font-style:italic;
  line-height:1.5; color:var(--titulo); margin:0;
}
.depoimento blockquote::before{
  content:'\201C';
  display:block; font-family:var(--serif); font-size:3rem; line-height:.6;
  color:var(--realce-borda); margin-bottom:12px;
}
.depoimento figcaption{
  margin-top:26px; padding-top:18px;
  border-top:1px solid var(--linha);
  font-size:.82rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--titulo);
}
.depoimento figcaption span{
  display:block; margin-top:5px;
  font-weight:400; letter-spacing:.1em;
  text-transform:none; color:var(--apoio);
}

/* ---------- caminho para o blog ---------- */
.blog-home{padding:var(--respiro) 0; background:var(--pagina-alt); transition:background .5s var(--curva)}
.blog-home__acao{margin-top:clamp(36px,4vw,48px)}

@media (max-width:1024px){
  .sobre-home__grade{grid-template-columns:1fr}
  .depoimentos__grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .depoimentos__grade{grid-template-columns:1fr}
}

/* =========================================================
   NÚMEROS — a faixa de dados da página A clínica

   Quatro números que a clínica já tem e nunca usou. Não é
   enfeite: é a resposta rápida a "quem são vocês" para quem
   não vai ler três parágrafos.
   ========================================================= */

.numeros{background:var(--pagina-alt); padding:clamp(48px,6vw,74px) 0; transition:background .5s var(--curva)}
.numeros__grade{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.numero{text-align:center; border-left:1px solid var(--linha); padding:0 14px}
.numero:first-child{border-left:0}
.numero strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1; color:var(--titulo-em);
  margin-bottom:12px;
}
.numero span{font-size:.86rem; color:var(--apoio); line-height:1.5; display:block}

@media (max-width:760px){
  .numeros__grade{grid-template-columns:repeat(2,1fr); gap:36px 20px}
  .numero:nth-child(3){border-left:0}
}

/* =========================================================
   DESTAQUE — o bloco escuro da paramédica

   Cores literais nos dois temas: é um bloco que nasce escuro
   de propósito, como os passos e o rodapé.
   ========================================================= */

.destaque{background:var(--tinta); color:rgba(247,246,242,.82); padding:var(--respiro) 0}
.destaque__grade{max-width:820px}
.destaque__texto h2{color:var(--creme); margin-bottom:26px}
.destaque__texto h2 em{color:var(--ouro-claro)}
.destaque__texto p{margin:0 0 18px}
.destaque__links{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.destaque__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.08em;
  color:var(--creme); text-decoration:none;
  border:1px solid rgba(247,246,242,.28); border-radius:2px;
  padding:11px 18px; transition:border-color .3s var(--curva), color .3s var(--curva);
}
.destaque__links a:hover{border-color:var(--ouro-claro); color:var(--ouro-claro)}

/* =========================================================
   FAIXA-NOTA — a passagem entre uma seção e outra
   ========================================================= */

.faixa-nota{padding:clamp(40px,5vw,62px) 0; border-top:1px solid var(--linha)}
.faixa-nota .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.faixa-nota p{margin:0; max-width:640px; color:var(--apoio)}

/* =========================================================
   PERFIL — a página de cada profissional

   O cartão da esquerda repete o gesto da arte da clínica; o
   texto da direita é o que a busca lê.
   ========================================================= */

.perfil{padding:clamp(40px,5vw,64px) 0 var(--respiro)}
.perfil__grade{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,68px); align-items:start}

.perfil__cartao{
  background:var(--bloco-perfil); color:var(--creme);
  border-radius:3px; padding:0 28px 32px;
}
.perfil__foto{
  aspect-ratio:9/16; overflow:hidden; border-radius:3px;
  background:var(--taupe);
  margin:-22px -6px 22px; box-shadow:0 12px 30px rgba(28,28,26,.24);
}
.perfil__foto img{width:100%; height:100%; object-fit:cover; object-position:center top}
.perfil__nome{
  font-family:var(--serif); font-size:1.5rem; line-height:1.16;
  color:var(--creme); margin:0 0 10px;
}
.perfil__cartao .pessoa__area{margin-bottom:18px}
.perfil__cartao ul{list-style:none; padding:0; margin:0}
.perfil__cartao li{
  font-size:.86rem; color:rgba(247,246,242,.82);
  padding:6px 0 6px 18px; position:relative;
}
.perfil__cartao li::before{
  content:''; position:absolute; left:0; top:1.1em;
  width:7px; height:1px; background:var(--ouro-claro);
}

.perfil__texto h1{margin:14px 0 20px}
/* O nome desceu do H1 para cá quando o título virou a especialidade.
   Ele não é decoração: quem chega pelo serviço quer saber quem faz.
   Por isso ele fica logo abaixo do H1, e não no fim da página. */
.perfil__assina{
  font-family:var(--serif); font-size:1.35rem; font-weight:500;
  color:var(--titulo); margin:0 0 6px; letter-spacing:.01em;
}

.perfil__linha{
  font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,1.6rem);
  font-style:italic; line-height:1.4; color:var(--titulo-em);
  margin:0 0 24px;
}
.perfil__texto > p{margin:0 0 20px}
/* A bio da profissional ocupa o mesmo corpo de texto do paragrafo de cima:
   ela deixou de ser um dado seco de formacao e virou a apresentacao dela.
   Os filhos precisam da margem porque .perfil__texto > p nao os alcanca. */
.perfil__formacao > p{margin:0 0 20px}
.perfil__formacao > ul{margin:0 0 20px; padding-left:20px; list-style:disc}
.perfil__formacao > ul li{margin:0 0 6px}
.perfil__texto .btn{margin-top:14px}

.perfil-blocos{background:var(--pagina-alt); padding:var(--respiro) 0; transition:background .5s var(--curva)}
.perfil-blocos__grade{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,50px)}
.perfil-bloco h2{font-size:clamp(1.2rem,1.9vw,1.5rem); margin-bottom:14px}
.perfil-bloco p{margin:0; color:var(--apoio); font-size:.95rem}

.pessoa-servicos{padding:var(--respiro) 0}
/* Colunas fixas, nunca auto-fit: com um cartão só, o auto-fit
   estica ele na linha inteira — foi o que quebrou o blog. */
.cartoes--tres{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){
  .perfil__grade{grid-template-columns:1fr; gap:38px}
  .perfil__cartao{max-width:420px}
  .perfil-blocos__grade{grid-template-columns:1fr}
  .cartoes--tres{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cartoes--tres{grid-template-columns:1fr}
}

/* =========================================================
   PALAVRA-CHAVE MARCADA — ferramenta de conferência

   Vermelho e negrito em cima de cada ocorrência, e o painel
   flutuante com a contagem da página. Nasce e morre com a
   constante EM_CONSTRUCAO do gerar.js: nada disso é escrito
   quando o site sai da prévia, então não existe o risco de
   ir ao ar com o texto pintado.

   Vermelho diferente do dado provisório de propósito — os
   dois convivem na mesma tela e significam coisas opostas:
   o provisório é o que FALTA, a chave é o que ESTÁ certo.
   ========================================================= */

mark.chave{
  color:#B3261E;
  background:rgba(179,38,30,.12);
  font-weight:600;
  padding:0 3px; border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
[data-tema="escuro"] mark.chave{color:#FF9A8F; background:rgba(255,154,143,.14)}

.chaves-painel{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; max-width:min(92vw, 420px);
  background:var(--tinta); color:var(--creme);
  border:1px solid rgba(247,246,242,.2); border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  font-family:var(--sans);
}
.chaves-painel__topo{
  display:block; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  color:var(--creme); font:inherit;
  font-size:.78rem; letter-spacing:.06em;
  padding:11px 18px;
}
.chaves-painel__topo strong{
  color:#FF9A8F; font-weight:600; font-size:.95rem; margin-right:6px;
}
.chaves-painel__lista{
  list-style:none; margin:0; padding:4px 18px 14px;
  border-top:1px solid rgba(247,246,242,.16);
  max-height:40vh; overflow-y:auto;
}
.chaves-painel__lista li{
  font-size:.76rem; color:rgba(247,246,242,.82);
  padding:4px 0; display:flex; gap:10px; align-items:baseline;
}
.chaves-painel__lista span{
  color:#FF9A8F; font-weight:600; min-width:16px;
}

/* Na largura do celular o painel divide a barra de baixo com o
   botão de topo e o do WhatsApp — encolhe e sobe um pouco. */
@media (max-width:560px){
  .chaves-painel{left:12px; right:12px; bottom:78px; transform:none; max-width:none}
}

@media print{ .chaves-painel{display:none} }


/* ---------- caixa de resumo e lista dentro do texto ----------

   As duas peças vieram da comparação com a referência que o
   fundador trouxe: um artigo de 4.500 palavras com caixa de
   lições no topo e quinze listas no corpo.

   A caixa fica DEPOIS da abertura, nunca antes — o primeiro
   parágrafo é o que decide se a pessoa continua lendo, e um
   quadro de tópicos no lugar dele mata a narrativa que o texto
   inteiro existe para ter.  */

.post__resumo{
  max-width:760px; margin:0 0 clamp(36px,4vw,52px);
  background:var(--pagina-alt); border:1px solid var(--linha);
  border-radius:2px; padding:26px 30px 28px;
}
.post__resumo__rotulo{
  font-family:var(--sans);
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rotulo); margin:0 0 16px;
}
.post__resumo ul{list-style:none; padding:0; margin:0}
.post__resumo li{
  font-size:.96rem; color:var(--texto);
  padding:7px 0 7px 20px; position:relative;
}
.post__resumo li::before{
  content:''; position:absolute; left:0; top:1.05em;
  width:9px; height:1px; background:var(--realce-borda);
}

.lista-texto{list-style:none; padding:0; margin:0 0 18px}
.lista-texto li{
  font-size:1.02rem; color:var(--texto);
  padding:7px 0 7px 22px; position:relative;
}
.lista-texto li::before{
  content:''; position:absolute; left:2px; top:1.05em;
  width:9px; height:1px; background:var(--realce-borda);
}

/* Link dentro da prosa do post: sublinhado discreto que fica
   evidente no hover. Link que não parece link não é clicado. */
.bloco p a, .lista-texto a{
  color:var(--titulo); text-decoration:underline;
  text-decoration-color:var(--realce-borda); text-underline-offset:3px;
}
.bloco p a:hover, .lista-texto a:hover{text-decoration-color:var(--ouro)}

/* Três níveis de palavra-chave, três tons. O olho separa sem
   precisar abrir o painel: a principal salta, a secundária
   acompanha, a da marca fica discreta. */
/* Duas cores, e só duas. Vermelho é SEO — principal, secundária e
   marca são o mesmo tipo de coisa para quem olha a tela: palavra
   que disputa a busca curta. Azul é a frase de conversa.

   O nível continua distinguido no painel, por texto. Cor demais
   vira decoração e para de informar: com quatro tons a pessoa
   passa a decodificar a legenda em vez de ler a página. */
mark.chave--principal,
mark.chave--secundaria,
mark.chave--institucional{color:#B3261E; background:rgba(179,38,30,.13)}
[data-tema="escuro"] mark.chave--principal,
[data-tema="escuro"] mark.chave--secundaria,
[data-tema="escuro"] mark.chave--institucional{color:#FF9A8F; background:rgba(255,154,143,.16)}

.chaves-painel__lista li em{
  font-style:normal; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(247,246,242,.42); margin-left:auto; padding-left:10px;
}
.chaves-painel__lista li.n-principal span,
.chaves-painel__lista li.n-secundaria span,
.chaves-painel__lista li.n-institucional span{color:#FF9A8F}

/* ---------- o quarto nível: busca por IA, em azul ----------

   Os três primeiros níveis são SEO clássico: disputam posição na
   lista de resultados do Google. O azul é outra coisa — busca em
   linguagem natural, a pergunta como a pessoa faria a um
   assistente. Por isso o painel tem dois quadros e não um.

   Registro do que a documentação oficial diz, para ninguém
   confundir a ferramenta com uma promessa: o Google afirma que
   NÃO existe otimização especial para AI Overviews ou AI Mode
   (developers.google.com/search/docs/appearance/ai-features,
   atualizado em 10/12/2025). O ganho aqui é de redação — a página
   conter a pergunta escrita e a resposta logo abaixo —, não de
   truque técnico.  */

mark.chave--ia{color:#1A5FB4; background:rgba(26,95,180,.12)}
[data-tema="escuro"] mark.chave--ia{color:#8FB8F0; background:rgba(143,184,240,.16)}

.chaves-painel{display:flex; gap:10px; background:none; border:0; box-shadow:none}
.chaves-painel__quadro{
  background:var(--tinta); color:var(--creme);
  border:1px solid rgba(247,246,242,.2); border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  max-width:320px;
}
.chaves-painel__quadro--ia{border-color:rgba(143,184,240,.4)}
.chaves-painel__quadro--ia .chaves-painel__topo strong{color:#8FB8F0}
.chaves-painel__quadro--ia .chaves-painel__lista span{color:#8FB8F0}
.chaves-painel__lista li.n-ia span{color:#8FB8F0}

@media (max-width:560px){
  .chaves-painel{flex-direction:column; gap:6px}
  .chaves-painel__quadro{max-width:none}
}

/* O botão que abre e fecha os dois quadros de uma vez. Fica à
   esquerda do par, discreto — é atalho, não é informação. */
.chaves-painel__ambos{
  align-self:flex-start;
  background:var(--tinta); color:rgba(247,246,242,.72);
  border:1px solid rgba(247,246,242,.2); border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  cursor:pointer; font:inherit;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 13px; line-height:1.2; max-width:86px;
  transition:color .3s var(--curva), border-color .3s var(--curva);
}
.chaves-painel__ambos:hover{color:var(--creme); border-color:rgba(247,246,242,.45)}
.chaves-painel__ambos[aria-pressed="true"]{color:var(--ouro-claro); border-color:rgba(216,190,140,.5)}

@media (max-width:560px){
  .chaves-painel__ambos{align-self:stretch; max-width:none; text-align:center; padding:9px 12px}
}

/* ---------- a cópia de conferência ----------

   Estas regras só têm efeito em /_chaves/, onde o HTML sai com
   data-chaves na raiz. A página do cliente não tem marca dentro
   para colorir.

   Foi assim que o problema acabou: enquanto a decisão morava no
   navegador, qualquer cache ou estado de aba devolvia a tinta na
   tela errada. Três correções seguidas trataram sintomas do mesmo
   defeito de desenho — informação interna não viaja dentro do
   arquivo do cliente.  */

/* O padrão continua sendo invisível, como rede de segurança: se um
   dia uma marca escapar para a página do cliente, ela sai apagada e
   o painel não aparece. Mas a garantia de verdade não é esta — é o
   build, que não escreve marca nenhuma na versão limpa. */
mark.chave{color:inherit; background:none; font-weight:inherit; padding:0}
.chaves-painel{display:none}

:root[data-chaves] mark.chave--principal,
:root[data-chaves] mark.chave--secundaria,
:root[data-chaves] mark.chave--institucional{
  color:#B3261E; background:rgba(179,38,30,.13); font-weight:600; padding:0 3px;
}
:root[data-chaves] mark.chave--ia{
  color:#1A5FB4; background:rgba(26,95,180,.12); font-weight:600; padding:0 3px;
}
:root[data-tema="escuro"][data-chaves] mark.chave--principal,
:root[data-tema="escuro"][data-chaves] mark.chave--secundaria,
:root[data-tema="escuro"][data-chaves] mark.chave--institucional{color:#FF9A8F; background:rgba(255,154,143,.16)}
:root[data-tema="escuro"][data-chaves] mark.chave--ia{color:#8FB8F0; background:rgba(143,184,240,.16)}

:root[data-chaves] .chaves-painel{display:flex}

/* O selo da avaliação do Google, no cabeçalho dos depoimentos.
   Leva para a ficha, que é onde as 47 avaliações estão inteiras —
   a página mostra três, e quem quiser conferir vai à fonte. */
.selo-google{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:22px; padding:10px 16px;
  border:1px solid var(--linha); border-radius:3px;
  background:var(--cartao);
  text-decoration:none; transition:border-color .3s var(--curva);
}
.selo-google:hover{border-color:var(--realce-borda)}
.selo-google__nota{font-family:var(--serif); font-size:1.5rem; color:var(--titulo); line-height:1}
.selo-google__estrelas{color:#E8A33D; font-size:.95rem; letter-spacing:.06em}
.selo-google__texto{font-size:.82rem; color:var(--apoio)}

@media (max-width:420px){
  .selo-google{flex-wrap:wrap; gap:6px 10px}
}