/* ============================================================
   ODONTO PRIME — Dra. Thatiany Lorena
   Folha de estilo única. Escrita para ser lida de cima para baixo,
   na mesma ordem das seções do index.html.

   A paleta não foi escolhida no chute: ela foi tirada da parede da
   recepção, que é concreto claro salpicado com o nome dela gravado em
   dourado espelhado. Por isso o branco daqui é quente (puxa areia) e o
   dourado tem três tons — o escuro para texto, o médio para os fios, o
   claro para o brilho que passa por cima.
   ============================================================ */

:root{
  /* --- os dourados --- */
  --ouro-escuro:#8A6A24;   /* texto sobre branco: contraste de verdade */
  --ouro:#B58B3C;          /* o tom da marca gravada */
  --ouro-claro:#E4C77E;    /* o reflexo */
  --ouro-luz:#F7E9C4;      /* o brilho que passa por cima */

  /* --- os brancos --- */
  --areia:#FBF7EF;         /* fundo da página */
  --areia-2:#F4EDE0;       /* fundo alternado das seções */
  --branco:#FFFFFF;

  /* --- a tinta --- */
  --tinta:#2B2318;
  --tinta-media:#5D5344;
  --tinta-fraca:#8B8174;

  /* --- o escuro ---
     Dourado sobre creme não fica caro: fica apagado, porque os dois têm
     quase a mesma luminosidade e o contraste some. Dourado só brilha
     sobre escuro. Por isso o topo e o fecho da página são noite, e o
     meio é claro — a página inteira vira um sanduíche de contraste em
     vez de um degradê de bege. */
  --noite:#0F0B06;
  --noite-2:#1C1409;
  --marfim:#F7F1E6;

  --zap:#1FA855;
  --zap-escuro:#12823F;

  --fio:1px solid rgba(181,139,60,.26);
  --sombra-baixa:0 2px 10px rgba(80,58,16,.06);
  --sombra-alta:0 26px 60px -28px rgba(80,58,16,.45);

  --env:min(1160px, calc(100% - 2.5rem));
  --curva:cubic-bezier(.16,.84,.34,1);

  /* A fonte dos títulos mora aqui por um motivo concreto, e não por
     capricho de organização.

     O site nasceu com Cormorant Garamond. Na prova de tela, "Brazlândia"
     e "Urgência" apareceram com DOIS circunflexos empilhados — e
     "Brazlândia" é palavra de título e corre também dentro da faixa
     dourada. Testei a família inteira (Cormorant 300/400/600): todas
     erram o acento. Georgia, EB Garamond, Playfair, Prata, Marcellus e
     Gilda desenham certo. Ficou EB Garamond, que é a mais parecida com
     a Cormorant e tem itálico — que o site usa nas palavras douradas.

     É defeito da fonte, não do texto: os bytes do HTML são "â" (U+00E2)
     e "ê" (U+00EA), um caractere só, conferidos. */
  --fonte-titulo:"EB Garamond", Georgia, "Times New Roman", serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:300;
  font-size:clamp(1rem, .96rem + .28vw, 1.1rem);
  line-height:1.65;
  /* clip e não hidden: hidden aqui mata o position:sticky lá dentro.
     É o que segura a página quando uma animação entra deslocando de
     lado — sem isto, no celular nasce uma barra de rolagem horizontal
     que ninguém consegue achar de onde veio. */
  overflow-x:clip;
}

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

h1,h2,h3{
  font-family:var(--fonte-titulo);
  font-weight:400;
  line-height:1.08;
  margin:0;
  letter-spacing:-.005em;
}

a{ color:inherit; }

.env{ width:var(--env); margin-inline:auto; }
.env--centro{ text-align:center; }

.visivelmente-escondido{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* o atalho de teclado: fica escondido até receber foco */
.pular{
  position:absolute; left:.6rem; top:-4rem; z-index:99;
  background:var(--tinta); color:var(--areia);
  padding:.6rem 1rem; border-radius:.4rem; text-decoration:none;
  transition:top .2s;
}
.pular:focus-visible{ top:.6rem; }

:focus-visible{ outline:2px solid var(--ouro-escuro); outline-offset:3px; }


/* ============================================================
   BOTÕES
   ============================================================ */
/* VERDE. O Samuel pediu de volta e a chamada é dele.
   Eu tinha trocado para ouro com um argumento razoável (verde-néon no
   meio de uma paleta de dourado e creme vira mancha) — mas o argumento
   dele é melhor: verde é a cor do WhatsApp, e o site inteiro existe
   para levar a pessoa ao WhatsApp. Botão que parece com o aplicativo
   que ele abre é reconhecido antes de ser lido.

   O que eu fiz para ele não brigar com o ouro: não é o verde chapado
   #25D366 do ícone. É um verde mais fundo, com um degradê que escurece
   nas pontas, e o contorno é um fio DOURADO em vez de branco. É o fio
   que costura o botão de volta na paleta da página. */
.botao{
  --fundo:linear-gradient(135deg, #0E7A3C 0%, #22B45C 46%, #0B6531 100%);
  --ink:#FFFFFF;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem;
  border-radius:999px;
  background:var(--fundo);
  color:var(--ink);
  font-weight:500; font-size:1.02rem; letter-spacing:.015em;
  text-decoration:none;
  border:1px solid rgba(228,199,126,.55);
  box-shadow:0 14px 30px -14px rgba(7,70,34,.8), inset 0 1px 0 rgba(255,255,255,.28);
  position:relative; overflow:hidden;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva);
}
.botao::after{
  /* o rastro de luz que atravessa o botão quando o mouse encosta */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .75s var(--curva);
}
.botao:hover, .botao:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 22px 44px -16px rgba(7,70,34,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
.botao:hover::after, .botao:focus-visible::after{ transform:translateX(120%); }
.botao:active{ transform:translateY(0); }

/* "Abrir no mapa" continua de contorno e sem verde de propósito: não é
   conversa no WhatsApp, é outra coisa. Se tudo for verde, nada é. */
.botao--linha{
  --fundo:transparent; color:var(--ouro-escuro);
  border-color:rgba(181,139,60,.5); box-shadow:none;
}
.botao--linha::after{ display:none; }
.botao--linha:hover{ background:rgba(181,139,60,.09); }
.botao--grande{
  padding:1.25rem 2.6rem; font-size:1.14rem;
  letter-spacing:.03em;
}
.botao__zap{ width:1.4em; height:1.4em; flex:none; }


/* ============================================================
   1 · TOPO
   ============================================================ */
.topo{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(4rem,9vh,6rem) 0 clamp(5rem,12vh,7rem);
  overflow:hidden;
  isolation:isolate;
  background:var(--noite);
  color:var(--marfim);
}

/* A parede da recepção, de verdade. No escuro ela deixa de ser "um
   fundo claro qualquer" e vira o que é: concreto salpicado pegando luz
   rasante. Continua desfocada de propósito — sem isso a marca gravada
   aparece legível atrás do nome dela e as duas leituras brigam. */
.topo__fundo{
  position:absolute; inset:-8%; z-index:-3;
  background:url("../img/marca.webp") center/cover no-repeat;
  filter:blur(14px) saturate(.5) brightness(.42) contrast(1.15);
  opacity:.5;
  transform:scale(1.06);
  animation:respira 30s ease-in-out infinite alternate;
}
@keyframes respira{ to{ transform:scale(1.14) translate3d(-1.5%, -1%, 0); } }

/* A aura: o clarão dourado que nasce atrás dela e morre nas bordas.
   É esta camada que faz o retrato parecer iluminado por um refletor em
   vez de recortado e colado. */
.topo__aura{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(46% 42% at 50% 40%, rgba(214,169,86,.42) 0%, rgba(214,169,86,0) 68%),
    radial-gradient(90% 70% at 50% 108%, rgba(247,233,196,.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(15,11,6,.72) 0%, rgba(15,11,6,.35) 38%, var(--noite) 94%);
}

/* Grão. Uma película de ruído por cima de tudo, quase invisível.
   Superfície perfeitamente lisa é a assinatura de fundo gerado por
   computador; o grão é o que dá sensação de papel impresso. */
.topo__grao{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topo__meio{ text-align:center; width:var(--env); position:relative; }

/* a linha de cima, com um fio dourado de cada lado — detalhe de
   convite, não de site */
.topo__linhafina{
  margin:0 0 clamp(1.6rem,4.5vh,2.8rem);
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  font-size:.72rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--ouro-claro); font-weight:400;
}
.topo__linhafina i{
  height:1px; width:clamp(1.5rem,7vw,4.5rem);
  background:linear-gradient(90deg, transparent, rgba(228,199,126,.65));
}
.topo__linhafina i:last-child{ background:linear-gradient(90deg, rgba(228,199,126,.65), transparent); }
/* Em tela estreita a frase quebrava em duas linhas e os dois fiozinhos
   ficavam pendurados só na primeira — parecia defeito. Aperta o
   espaçamento e encolhe o fio até caber numa linha só. */
@media (max-width:430px){
  .topo__linhafina{ font-size:.64rem; letter-spacing:.2em; gap:.55rem; white-space:nowrap; }
  .topo__linhafina i{ width:1.4rem; }
}

/* --- o retrato ---
   display:block, e não inline-block. Com inline-block o <figure>
   encolhe até o tamanho do conteúdo e o botão que vem depois sobe para
   a mesma linha, ficando ao LADO do nome dela em vez de embaixo. O
   pedido era explícito: o botão fica abaixo. */
.retrato{ margin:0 0 clamp(1.8rem,4vh,2.6rem); position:relative; display:block; }

.retrato__caixa{
  position:relative;
  width:min(74vw, 23.5rem); aspect-ratio:4/5;
  margin-inline:auto;
  /* arco inteiro em cima, canto vivo embaixo: a foto não termina num
     retângulo, ela termina dissolvida no véu */
  border-radius:999px 999px .4rem .4rem;
  overflow:hidden;
  background:linear-gradient(160deg, var(--branco) 0%, var(--areia-2) 100%);
  box-shadow:
    0 0 0 1px rgba(228,199,126,.55),
    0 0 0 9px rgba(228,199,126,.07),
    0 50px 90px -40px rgba(0,0,0,.9);
}
.retrato__foto{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }

/* O véu: o pé da foto escurece até virar exatamente o fundo da página.
   Sem ele a foto acaba numa linha reta e o conjunto vira adesivo. */
.retrato__veu{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, rgba(15,11,6,0) 0%, rgba(15,11,6,.55) 55%, var(--noite) 100%);
  pointer-events:none;
}
.retrato__caixa--marca .retrato__veu{ display:none; }

/* O monograma só entra em cena se a foto não carregar. O onerror no
   HTML põe esta classe. Não é um "placeholder vazio": é a marca dela,
   a mesma que está gravada na parede. */
.retrato__marca{ display:none; }
.retrato__caixa--marca .retrato__marca{
  display:block; width:100%; height:100%;
  color:var(--ouro);
  padding:12% 10% 16%;
}
.retrato__caixa--marca{
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(247,233,196,.55), transparent 70%),
    linear-gradient(160deg, var(--branco) 0%, var(--areia-2) 100%);
}
.retrato__t, .retrato__l{
  font-family:var(--fonte-titulo);
  fill:currentColor;
}
.retrato__t{ font-size:62px; }
.retrato__l{ font-size:62px; opacity:.9; }
.retrato__coracao{ opacity:.8; }

/* O nome sobe por cima do pé da foto. Esse encaixe é o que separa uma
   página composta de uma pilha de blocos centralizados: o texto e a
   imagem ocupam o mesmo espaço em vez de esperar a vez. */
.retrato__nome{ margin:clamp(-3.2rem,-6vw,-1.8rem) 0 0; position:relative; }
.retrato__nome1{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:clamp(2.6rem, 1.1rem + 6.4vw, 5.4rem);
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--marfim);
  text-shadow:0 14px 40px rgba(0,0,0,.75);
}
.retrato__nome2{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin-top:.9rem;
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ouro-claro); font-weight:400;
}
.retrato__nome2 i{
  height:1px; width:clamp(1.2rem,5vw,3rem);
  background:linear-gradient(90deg, transparent, rgba(228,199,126,.6));
}
.retrato__nome2 i:last-child{ background:linear-gradient(90deg, rgba(228,199,126,.6), transparent); }

.topo__nota{
  margin:1.1rem 0 0; font-size:.88rem; letter-spacing:.04em;
  color:rgba(247,241,230,.5);
}

/* a setinha no rodapé do topo */
.topo__seta{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(228,199,126,.4);
  color:var(--ouro-claro); text-decoration:none;
}
.topo__seta span{
  width:.55rem; height:.55rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  animation:desce 2.4s ease-in-out infinite;
}
@keyframes desce{ 0%,100%{ transform:translateY(-3px) rotate(45deg); opacity:.5 } 50%{ transform:translateY(2px) rotate(45deg); opacity:1 } }


/* ============================================================
   2 · A FAIXA QUE CORRE

   Terceira e última versão. As duas primeiras eram as fitas cruzadas
   em X na diagonal; o Samuel reprovou as duas e depois foi direto:
   uma só, na horizontal, no molde da Nova Ótica. Então saiu daqui
   tudo que era do X — .xis, .xis__palco, as rotações de -19° e 19°,
   o esmaecido das pontas, a sombra do cruzamento e o @keyframes
   lustro. O que ficou é uma tira deitada de ponta a ponta.

   A mecânica é a mesma da Nova Ótica e vale anotar por que ela não
   tem emenda: o trilho tem o conteúdo DUAS vezes e anda exatamente
   meia largura. Quando termina, a segunda cópia está no pixel onde a
   primeira começou, e o salto de volta é invisível. Quantas cópias
   cabem em cada metade é o site.js que decide, medindo a tela.

   A cor é o que muda em relação à referência: lá é azul com letra
   branca, aqui é ouro com letra escura. E a faixa tem trabalho a
   fazer nesta página — ela entra entre o topo escuro e a seção clara,
   então precisa ser a parte mais luminosa da tela, senão vira só mais
   um pedaço de fundo.
   ============================================================ */
.faixa{
  position:relative;
  overflow:hidden;
  padding:clamp(.9rem, 2.2vw, 1.25rem) 0;
  /* o ouro não é chapado: escurece nas duas pontas e acende no meio.
     Chapado ele fica com cara de retângulo preenchido no editor; com
     o degradê ele lê como metal pegando luz. */
  background:linear-gradient(90deg,
    #8A6A24 0%, #B58B3C 24%, #E8CE8A 50%, #B58B3C 76%, #8A6A24 100%);
  border-block:1px solid rgba(255,248,228,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,251,238,.55),
    inset 0 -1px 0 rgba(58,40,8,.34),
    0 20px 50px -28px rgba(138,106,36,.9);
}
/* o brilho que atravessa a faixa de tempos em tempos. É o detalhe que
   separa "barra amarela" de "metal": metal tem um ponto de luz que
   anda. */
.faixa::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,253,244,.5) 50%, transparent 60%);
  transform:translateX(-130%);
  animation:lustro 8s ease-in-out infinite;
}
@keyframes lustro{
  0%, 66%{ transform:translateX(-130%); }
  100%   { transform:translateX(130%); }
}

.faixa__trilho{
  display:flex; width:max-content;
  will-change:transform;
  animation:corre 26s linear infinite;
}
/* de -50% para 0: o texto anda da esquerda para a direita, no mesmo
   sentido do carrossel logo abaixo. Os dois puxando para o mesmo lado
   dão à página um sentido de leitura; em sentidos opostos brigariam. */
@keyframes corre{
  from{ transform:translate3d(-50%,0,0); }
  to  { transform:translate3d(0,0,0); }
}

.faixa__grupo{ display:flex; align-items:center; }
.faixa__item{
  display:inline-flex; align-items:center;
  gap:clamp(1rem, 2.6vw, 1.7rem);
  padding-right:clamp(1rem, 2.6vw, 1.7rem);
  white-space:nowrap;
  /* sem serifa e em caixa alta. Serifa grande e espaçada em faixa fica
     ilegível de longe, e foi metade do problema da versão reprovada. */
  font-family:"Jost", system-ui, sans-serif;
  font-weight:600;
  font-size:clamp(.8rem, .64rem + .6vw, 1.06rem);
  letter-spacing:.2em; text-transform:uppercase;
  line-height:1.1;
  /* marrom bem escuro, não preto: preto sobre ouro fica duro, o marrom
     parece gravado na própria chapa */
  color:#2A1E06;
  text-shadow:0 1px 0 rgba(255,248,226,.5);
}
.faixa__item i{
  font-style:normal;
  color:rgba(42,30,6,.36);
  font-size:1.2em; line-height:0;
}


/* ============================================================
   SEÇÕES — moldura comum
   ============================================================ */
.secao{ padding:clamp(4.5rem, 11vw, 8rem) 0; position:relative; }

.secao__olho{
  margin:0 0 .9rem;
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ouro-escuro); font-weight:500;
}
.secao__titulo{
  font-size:clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem);
  margin:0 0 1.2rem;
}
.secao__titulo--menor{ font-size:clamp(2rem, 1.1rem + 3.4vw, 3.4rem); }
.secao__titulo em{ font-style:italic; color:var(--ouro); }
.secao__sub{
  max-width:44ch; margin:0; color:var(--tinta-media);
}

/* cada palavra do título sobe sozinha, com um atraso a mais que a
   anterior. É o que dá a sensação de a frase se montando. */
.palavra{
  display:inline-block;
  transform:translateY(.7em) rotate(1.5deg);
  opacity:0;
  transition:transform .85s var(--curva), opacity .7s ease;
}
.is-in .palavra{ transform:none; opacity:1; }
.is-in .palavra:nth-child(1){ transition-delay:.02s }
.is-in .palavra:nth-child(2){ transition-delay:.10s }
.is-in .palavra:nth-child(3){ transition-delay:.18s }
.is-in .palavra:nth-child(4){ transition-delay:.26s }
.is-in .palavra:nth-child(5){ transition-delay:.34s }


/* ============================================================
   3 · ESPECIALIDADES
   ============================================================ */
/* Havia aqui um degradê escuro no topo desta seção. Ele existia porque
   a faixa em X era um bloco NOTURNO, e emendar preto com creme sem
   nada no meio dá uma linha reta de corte.
   A faixa agora é dourada e clara, então aquele degradê virou uma
   sujeira cinzenta logo abaixo do ouro. Saiu. Quem faz a emenda agora
   é a própria faixa, com a sombra quente que ela projeta para baixo. */
.especialidades{
  background:var(--areia);
  position:relative;
}

/* ---- O CARROSSEL ----
   A rolagem é do próprio navegador (overflow-x:auto). Isso não é
   preguiça: é o que faz o arrastar com o dedo funcionar exatamente
   como a pessoa espera, com inércia e tudo, sem uma linha de script.
   O JavaScript só acrescenta duas coisas por cima — o passeio
   automático da esquerda para a direita e o arrastar com o mouse. Com
   o script desligado, o carrossel continua lá e continua arrastável. */
.carrossel{
  position:relative;
  margin:clamp(2.5rem,6vw,3.6rem) 0 clamp(2rem,5vw,3rem);
}
/* as pontas se apagam no creme do fundo: é o sinal visual de que tem
   mais coisa para o lado */
.carrossel::before, .carrossel::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(1.5rem,6vw,5rem);
  z-index:2; pointer-events:none;
}
.carrossel::before{ left:0;  background:linear-gradient(90deg, var(--areia), rgba(251,247,239,0)); }
.carrossel::after { right:0; background:linear-gradient(270deg, var(--areia), rgba(251,247,239,0)); }

.carrossel__pista{
  list-style:none; margin:0;
  display:flex; align-items:stretch;
  gap:clamp(.8rem,1.8vw,1.2rem);
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  /* SEM scroll-snap, e isto não é esquecimento.
     Tinha aqui um scroll-snap-type:x proximity. Medi na tela e o
     carrossel não andava um pixel: ficava travado em 2022px para
     sempre. O Chrome (e o Edge) re-encaixam a rolagem TODA vez que o
     scrollLeft é escrito por script, inclusive no proximity — então
     cada passo de 0,35px do passeio era desfeito no quadro seguinte.
     Encaixe e passeio automático não convivem. Entre os dois, quem o
     Samuel pediu foi o passeio. */
  /* o primeiro cartão começa alinhado com o texto da seção, não colado
     na borda da tela */
  padding:.6rem max(1.25rem, calc((100vw - 1160px) / 2)) 1.4rem;
  scrollbar-width:none;
  cursor:grab;
}
.carrossel__pista::-webkit-scrollbar{ display:none; }
.carrossel__pista.arrastando{ cursor:grabbing; }

.cartao{
  position:relative; overflow:hidden;
  flex:0 0 clamp(15.5rem, 76vw, 20.5rem);
  border-radius:1.1rem;
  border:var(--fio);
  /* branco puro chapado é o que faz um cartão parecer caixa de
     formulário. O degradê quase imperceptível dá volume sem virar
     enfeite. */
  background:linear-gradient(165deg, #FFFFFF 0%, #FBF6EC 100%);
  box-shadow:var(--sombra-baixa);
  padding:clamp(2rem,3.6vw,2.6rem) clamp(1.5rem,2.6vw,2rem) clamp(2.2rem,3.6vw,2.6rem);
  transition:box-shadow .5s var(--curva), transform .5s var(--curva);
}
.cartao:hover, .cartao:focus-within{
  transform:translateY(-3px);
  box-shadow:0 22px 44px -22px rgba(80,58,16,.45);
}
/* o dourado que sobe de baixo no cartão apontado */
.cartao::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(0deg, rgba(247,233,196,.55), transparent);
  transition:height .55s var(--curva);
  pointer-events:none;
}
.cartao:hover::before, .cartao:focus-within::before{ height:100%; }
/* fio de ouro que corre no topo */
.cartao::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--ouro), var(--ouro-luz));
  transition:width .6s var(--curva);
}
.cartao:hover::after, .cartao:focus-within::after{ width:100%; }

/* O número é marca d'água: grande, meio para fora do cartão, atrás do
   texto. No canto de cima ele encostava no título e o título tinha de
   andar espremido para caber. */
.cartao__n{
  position:absolute; right:-.3rem; bottom:-1.4rem;
  font-family:var(--fonte-titulo);
  font-size:clamp(4.5rem,3rem + 4vw,6.5rem); line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(181,139,60,.3);
  transition:-webkit-text-stroke-color .6s ease, transform .6s var(--curva);
  pointer-events:none; user-select:none;
}
.cartao:hover .cartao__n, .cartao:focus-within .cartao__n{
  -webkit-text-stroke-color:rgba(181,139,60,.6);
  transform:translateY(-.35rem);
}

.cartao__tit{
  position:relative;
  font-size:clamp(1.4rem,1.1rem + .8vw,1.8rem);
  line-height:1.12;
  margin:0 0 .9rem;
}
/* fio curto sob o título. É o detalhe que separa "cartão" de "verbete":
   dá um ponto de apoio para o olho antes do texto começar. */
.cartao__tit::after{
  content:""; display:block; width:2.2rem; height:2px; margin-top:.8rem;
  background:linear-gradient(90deg, var(--ouro), rgba(181,139,60,0));
  transition:width .6s var(--curva);
}
.cartao:hover .cartao__tit::after,
.cartao:focus-within .cartao__tit::after{ width:4.4rem; }

.cartao__txt{
  position:relative; margin:0; color:var(--tinta-media);
  font-size:.96rem;
}

/* o aviso de que dá para arrastar. Some no computador, onde a pessoa
   tem o mouse e o cartão já reage ao passar por cima. */
.carrossel__dica{
  margin:0; text-align:center;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-fraca);
}
@media (hover:hover) and (pointer:fine){
  .carrossel__dica{ display:none; }
}


/* ============================================================
   4 · O CONSULTÓRIO — mosaico
   ============================================================ */
/* Esta seção virou noite, e a razão é a matéria-prima: as fotos saíram do
   celular com luz de teto — cinza-azuladas, frias. Sobre creme elas
   ficavam com cara de foto de vistoria; o creme é quente, a foto é fria,
   e uma denuncia a outra. Sobre escuro, com um grade quente por cima, a
   mesma foto vira cena. E de quebra a página ganha ritmo: escuro no
   topo, claro nas especialidades, escuro aqui, claro na visita. */
.consultorio{
  background:var(--noite-2);
  color:var(--marfim);
  position:relative; overflow:hidden;
}
.consultorio::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 78% 12%, rgba(214,169,86,.16) 0%, transparent 65%);
}
.consultorio > *{ position:relative; }
.consultorio .secao__titulo{ color:var(--marfim); }
.consultorio .secao__olho{ color:var(--ouro-claro); }
.consultorio .secao__sub{ color:rgba(247,241,230,.66); }

/* Duas colunas de larguras diferentes, e o motivo é aritmética e não
   gosto. A foto em pé tem proporção 0,54 (620x1153) e as duas deitadas
   têm 1,42 e 2,01. Numa coluna de largura u, a pilha das duas deitadas
   mede u/1,42 + u/2,01 ≈ 1,20u. A foto em pé, na MESMA largura, mediria
   1,86u — sobrariam dois palmos de coluna vazia ao lado, ou eu teria de
   cortar um terço dela. Estreitando a coluna dela para 0,86 e alargando
   a outra para 1,14, as duas alturas encostam em 1,38u contra 1,58u: o
   corte que sobra é de um dedo, não de um terço. */
.mosaico{
  width:var(--env); margin:clamp(2.5rem,6vw,4rem) auto 0;
  display:grid; gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:.86fr 1.14fr;
  align-items:start;
}
.mosaico__peca{
  margin:0; position:relative;
  border-radius:1rem; overflow:hidden;
  background:#120D06;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  /* o fio de ouro em volta. Um pixel só — é o que faz a foto parecer
     emoldurada em vez de recortada e colada. */
  outline:1px solid rgba(228,199,126,.22); outline-offset:-1px;
}
.mosaico__peca img{
  width:100%; height:100%; object-fit:cover;
  /* o grade quente: tira o azul da luz de teto e puxa o dourado que já
     existe na parede e na torneira do consultório. */
  filter:saturate(.82) sepia(.16) contrast(1.06) brightness(.95);
  transition:transform 1.1s var(--curva), filter .8s ease;
}
.mosaico__peca:hover img, .mosaico__peca:focus-within img{
  transform:scale(1.045);
  filter:saturate(.95) sepia(.08) contrast(1.04) brightness(1.02);
}
/* véu escuro nas bordas, para a foto não terminar em aresta dura contra
   o fundo da seção */
.mosaico__peca::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,11,6,.28) 0%, rgba(15,11,6,0) 32%, rgba(15,11,6,.42) 100%);
}

/* cada peça guarda a proporção do arquivo que ela mostra. Assim o
   recorte que o ffmpeg já fez é o recorte que aparece na tela, e o
   object-fit:cover não precisa cortar nada de novo. */
.mosaico__peca--marca{ aspect-ratio:1100/776; }   /* a parede com o nome */
.mosaico__peca--larga{ aspect-ratio:1100/546; }   /* a sala de atendimento */
/* a peça em pé não tem proporção fixa: ela estica até a altura das duas
   da direita somadas. Com proporção fixa sobrava uma faixa vazia
   embaixo dela e o mosaico ficava torto. */
.mosaico__peca--alta{ grid-row:span 2; aspect-ratio:auto; align-self:stretch; }
/* o que interessa nessa foto são as argolas, que estão no meio para
   baixo. Centralizado, o corte comeria a argola de baixo. */
.mosaico__peca--alta img{ object-position:center 42%; }

.mosaico__peca figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.6rem .95rem .85rem;
  font-size:.86rem; color:#fff;
  background:linear-gradient(0deg, rgba(20,15,6,.78), transparent);
  transform:translateY(.5rem); opacity:0;
  transition:transform .5s var(--curva), opacity .4s ease;
}
.mosaico__peca:hover figcaption,
.mosaico__peca:focus-within figcaption{ transform:none; opacity:1; }

@media (max-width:640px){
  .mosaico{ grid-template-columns:1fr; }
  /* na coluna única a foto em pé mediria quase duas telas de altura.
     Aqui ela vira um retrato 4:5, que é o que cabe numa mão. */
  .mosaico__peca--alta{ grid-row:auto; aspect-ratio:4/5; align-self:auto; }
  /* no celular a legenda fica sempre visível: não existe passar o
     mouse por cima, e sem ela a foto vira um enfeite sem explicação */
  .mosaico__peca figcaption{ transform:none; opacity:1; }
}


/* ============================================================
   5 · VISITA
   ============================================================ */
.visita{ background:var(--areia); position:relative; }
.visita::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(4rem,9vw,7rem);
  background:linear-gradient(180deg, rgba(15,11,6,.16) 0%, rgba(15,11,6,0) 100%);
  pointer-events:none;
}
/* Isto aqui era uma grade de duas colunas: texto à esquerda, mapa do
   Google à direita. O mapa saiu a pedido do Samuel, e uma grade de
   duas colunas com um filho só não fica "quase certa" — fica torta: o
   conteúdo se espreme na metade esquerda e a direita fica um buraco
   de 580px. Então a grade virou coluna única.
   Com coluna única, o texto esticado até os 1160px do envelope ficaria
   com linhas largas demais para ler. O max-width segura a largura, e o
   bloco vai para o meio da página — que é onde ele tem de estar, já
   que agora é a única coisa da seção. */
.visita__grade{
  display:block;
  max-width:34rem;
  margin-inline:auto;
  text-align:center;
}

/* sem max-width próprio: com 28rem a primeira linha do endereço
   quebrava e sobrava "à Rodoviária" sozinha embaixo. Aqui ele usa a
   largura inteira do bloco (34rem), que é o bastante para a linha
   caber de uma vez no computador. */
.visita__end{ margin:0 auto 1.8rem; color:var(--tinta-media); }

.horario{
  /* a tabela continua com dia à esquerda e hora à direita: centralizar
     as duas colunas faria os horários flutuarem no meio e a leitura
     "segunda a sexta → 09:00" se perderia. O que é centralizado é a
     tabela inteira dentro do bloco. */
  width:100%; max-width:26rem;
  border-collapse:collapse; margin:0 auto 1.8rem;
  font-size:.98rem;
}
.horario th, .horario td{
  text-align:left; padding:.62rem 0;
  border-bottom:1px solid rgba(181,139,60,.2);
  font-weight:400;
}
.horario th{ color:var(--tinta); }
.horario td{ text-align:right; color:var(--ouro-escuro); font-weight:500; }
.horario--fechado td{ color:var(--tinta-fraca); font-weight:300; }

.visita__fone{ margin:0 0 1.8rem; }
.visita__fone a{
  font-family:var(--fonte-titulo);
  font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);
  color:var(--tinta); text-decoration:none;
  border-bottom:1px solid rgba(181,139,60,.45);
}
.visita__botoes{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* Aqui moravam .mapa e .mapa iframe — a moldura do Google Maps
   embutido. O Samuel mandou tirar o mapa, então as regras saíram
   junto: CSS de elemento que não existe mais é pegadinha para quem
   ler isto depois. */


/* ============================================================
   6 · CHAMADA FINAL
   ============================================================ */
.final{
  position:relative; color:var(--marfim);
  background:var(--noite);
  isolation:isolate; overflow:hidden;
}
.final__fundo{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(214,169,86,.34), transparent 68%),
    linear-gradient(180deg, var(--noite-2) 0%, var(--noite) 100%);
}
.final__tit{
  font-size:clamp(2.2rem,1.3rem + 3.6vw,3.9rem);
  margin:0 0 1.2rem;
}
.final__txt{
  max-width:52ch; margin:0 auto 2.2rem;
  color:rgba(255,255,255,.76);
}


/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  background:#0A0704; color:rgba(247,241,230,.55);
  border-top:1px solid rgba(228,199,126,.14);
  padding:2.6rem 0 5.5rem;   /* folga embaixo por causa do botão que flutua */
  font-size:.9rem; text-align:center;
}
.rodape__marca{ margin:0 0 .4rem; color:var(--ouro-claro); letter-spacing:.06em; }
.rodape__linha{ margin:0 0 .4rem; }
.rodape__cro{ margin:0; font-size:.84rem; color:rgba(255,255,255,.42); letter-spacing:.08em; }


/* ============================================================
   O BOTÃO QUE ACOMPANHA A ROLAGEM
   ============================================================ */
.flutua{
  position:fixed; right:1rem; bottom:1rem; z-index:40;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.25rem;
  border-radius:999px;
  /* verde, igual aos outros, com o mesmo fio dourado em volta. Este é
     o botão que fica visível o tempo todo enquanto a pessoa lê — é
     justamente o que mais precisa ser reconhecido de canto de olho. */
  background:linear-gradient(140deg, #0E7A3C 0%, #0B6531 100%);
  border:1px solid rgba(228,199,126,.5);
  color:#FFFFFF; text-decoration:none; font-weight:400; font-size:.95rem;
  letter-spacing:.03em;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.55), 0 6px 18px -8px rgba(11,101,49,.6);
  /* nasce escondido; o script mostra depois que o topo sai da tela */
  transform:translateY(160%); opacity:0; pointer-events:none;
  transition:transform .55s var(--curva), opacity .35s ease;
}
.flutua.is-in{ transform:none; opacity:1; pointer-events:auto; }
.flutua svg{ width:1.4em; height:1.4em; flex:none; }
@media (max-width:420px){
  /* em tela estreita o texto some e fica só o ícone, senão ele cobre
     meia largura da tela e atrapalha a leitura */
  .flutua span{ display:none; }
  .flutua{ padding:.9rem; }
}


/* ============================================================
   AS ENTRADAS — o que faz o conteúdo "aparecer" conforme desce

   Regra geral: o elemento nasce deslocado e transparente; o script põe
   a classe .is-in quando ele cruza a borda de baixo da tela, e a
   transição faz o resto. Quem estiver com JavaScript desligado vê tudo
   normalmente (ver a regra .sem-js lá embaixo).
   ============================================================ */
[data-reveal]{
  transition:transform .95s var(--curva), opacity .7s ease, clip-path 1.1s var(--curva);
  transition-delay:var(--d, 0s);
  will-change:transform, opacity;
}
[data-reveal="aparece"]{ opacity:0; }
[data-reveal="sobe"]{ opacity:0; transform:translateY(2.2rem); }
[data-reveal="cartao"]{
  opacity:0;
  transform:translateY(3rem) scale(.965);
}
[data-reveal="cortina"]{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translateY(1.5rem);
}
[data-reveal].is-in{ opacity:1; transform:none; }
/* O clip-path só volta ao normal em quem usa cortina. Ele estava em
   TODO mundo que tinha .is-in, e isso deixava um clip-path:inset(0)
   grudado nos botões. Botão aqui é pílula com border-radius:999px e
   overflow:hidden; com clip-path por cima, o recorte passa a ser o
   RETÂNGULO da caixa, e o brilho branco que corre por dentro do botão
   vazava nos quatro cantos — de longe parecia uma mancha clara atrás do
   verde. Apareceu na foto do celular, na seção dos tratamentos. */
[data-reveal="cortina"].is-in{ clip-path:inset(0 0 0 0); }

/* Os cartões do carrossel não entram em cascata: eles não têm
   data-reveal nenhum. O pedido do Samuel foi que o carrossel carregasse
   rápido ao entrar no site, e esperar animação de entrada para ver o
   primeiro cartão é o oposto disso. */

/* Sem JavaScript ninguém põe .is-in, e a página ficaria em branco. Esta
   classe é tirada do <html> pelo próprio script no primeiro instante;
   se ele não rodar, ela fica e desliga todas as entradas. */
.sem-js [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
.sem-js .palavra{ opacity:1; transform:none; }


/* ============================================================
   QUEM PEDIU MENOS MOVIMENTO
   Não é só "desligar animação": é entregar a mesma página, parada.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal], .palavra{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .flutua{ transform:none; opacity:1; pointer-events:auto; }
  /* a faixa para, mas continua legível: o texto fica onde está */
  .faixa__trilho{ animation:none; }
  .faixa::before{ animation:none; opacity:0; }
  .topo__fundo{ animation:none; }
  /* o carrossel continua arrastável; quem para o passeio sozinho é o
     script, que lê a mesma preferência */
  .carrossel__pista{ scroll-behavior:auto; }
}