/* Jost: geometrica, mesma familia visual das letras do letreiro da clinica.
   Bodoni Moda: so nos titulos grandes, contraponto editorial.
   Subconjunto latin, que cobre todos os acentos do portugues. */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/fonts/bodoni-moda-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/jost-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Clínica ÉLA — Bonito/MS
   O dourado vem das letras de latão da fachada e do letreiro da recepção.
   O preto é esverdeado, puxado das plantas das fotos do espaço.
   Jost é geométrica como as letras físicas do letreiro; Bodoni Moda entra
   só nos títulos grandes, como contraponto editorial. */

:root{
  --noite:#141A19;
  --carvao:#1E2624;
  --noite-linha:#2C3634;
  --ouro:#C9A227;
  --ouro-claro:#E8D79A;
  --areia:#F3EFE7;
  --areia-funda:#E9E2D5;
  --tinta:#1A2220;
  --tinta-media:#5C6663;
  --tinta-fraca:#8A938F;
  --claro-forte:#F0EDE6;
  --claro-medio:#B6BFBB;
  --larg:1180px;
  --serif:"Bodoni Moda",Georgia,serif;
  --sans:"Jost","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;background:var(--areia);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}

.env{width:min(100% - 2.5rem,var(--larg));margin-inline:auto}

/* ---------- tipografia ---------- */
.rotulo{
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ouro);
  margin:0 0 1.2rem;
}
.titulo{
  font-family:var(--serif);font-weight:400;line-height:1.08;
  letter-spacing:-.01em;text-wrap:balance;margin:0;
  font-size:clamp(2.3rem,5.5vw,4rem);
}
.titulo--heroi{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1.02}
.titulo em{font-style:italic;color:var(--ouro)}
.subtitulo{
  font-size:1.07rem;color:var(--tinta-media);max-width:52ch;
  margin:1.4rem 0 0;
}

/* ---------- cabeçalho ---------- */
/* Cabeçalho fixo. Nas páginas internas ele já nasce sólido; na home flutua
   sobre a foto do herói e só ganha fundo depois que a página rola.
   O menu fica numa linha só e rola na horizontal no celular — com 5 itens
   empilhados em duas linhas, a segunda caía por cima do título do herói. */
.topo{position:sticky;top:0;z-index:50;background:var(--noite);
  padding:.85rem 0;border-bottom:1px solid var(--noite-linha)}

/* O padrão é o cabeçalho SÓLIDO, e o JavaScript só o deixa transparente
   enquanto a página está no alto do herói. Invertido de propósito: se o
   script não rodar, o menu continua legível sobre as seções claras — o
   contrário deixaria o texto invisível. */
.topo--sobreposto{position:fixed;left:0;right:0;background:rgba(20,26,25,.96);
  transition:background .3s,border-color .3s,padding .3s}
@supports (backdrop-filter:blur(1px)){
  .topo--sobreposto{background:rgba(20,26,25,.80);backdrop-filter:blur(12px)}
}
.topo--sobreposto.topo--no-alto{background:transparent;border-bottom-color:transparent}
@supports (backdrop-filter:blur(1px)){
  .topo--sobreposto.topo--no-alto{backdrop-filter:none}
}

@media (min-width:900px){
  .topo{padding:1.2rem 0}
  .topo--sobreposto{padding:.95rem 0}
  .topo--sobreposto.topo--no-alto{padding:1.6rem 0}
}

.topo__int{display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap}
.marca{
  font-family:var(--sans);font-weight:600;font-size:1.6rem;
  letter-spacing:.18em;color:var(--ouro);text-decoration:none;
  line-height:1;
}
.navegacao{display:flex;gap:1.15rem;margin:0;padding:0;list-style:none;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch}
.navegacao::-webkit-scrollbar{display:none}
.navegacao li{flex:none}
/* No celular os 5 itens não cabem na largura da tela, então o menu rola na
   horizontal. O esmaecimento na borda direita é a pista de que há mais. */
@media (max-width:899px){
  .navegacao{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
             mask-image:linear-gradient(90deg,#000 86%,transparent)}
}
@media (min-width:900px){.navegacao{gap:1.8rem;margin:0 auto 0 1rem;overflow:visible}}
.navegacao a{
  font-size:.78rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--claro-medio);text-decoration:none;padding-block:.3rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.navegacao a:hover{color:var(--ouro-claro);border-bottom-color:var(--ouro)}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 2rem;text-decoration:none;border:1px solid var(--ouro);
  transition:background .22s,color .22s;
}
.botao--ouro{background:var(--ouro);color:var(--noite)}
.botao--ouro:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.botao--contorno{background:transparent;color:var(--ouro)}
.botao--contorno:hover{background:var(--ouro);color:var(--noite)}
.botao--escuro{background:var(--noite);color:var(--areia);border-color:var(--noite)}
.botao--escuro:hover{background:var(--carvao);border-color:var(--carvao)}

/* ---------- herói ---------- */
.heroi{position:relative;min-height:72vh;display:grid;align-items:end;
  background:var(--noite);overflow:hidden}
@media (min-width:900px){.heroi{min-height:88vh}}
.heroi__foto{position:absolute;inset:0}
.heroi__foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* dois véus: o vertical dá o fecho escuro embaixo; o horizontal escurece o
   lado do texto, porque o letreiro da própria fachada disputava com o título */
.heroi__veu{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(20,26,25,.90) 0%,rgba(20,26,25,.62) 42%,rgba(20,26,25,.18) 72%),
    linear-gradient(180deg,rgba(20,26,25,.55) 0%,rgba(20,26,25,.10) 40%,rgba(20,26,25,.92) 100%)}
.heroi__conteudo{position:relative;padding:5.5rem 0 3.5rem}
@media (min-width:900px){.heroi__conteudo{padding:9rem 0 4.5rem}}
.heroi .titulo{color:var(--claro-forte);max-width:16ch}
.heroi__sub{color:var(--claro-medio);font-size:1.08rem;max-width:46ch;margin:1.6rem 0 0}
.heroi__acoes{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
.heroi__fita{
  display:flex;gap:.7rem;align-items:center;margin-top:3.2rem;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--claro-medio);
}
.heroi__fita span{width:46px;height:1px;background:var(--ouro);flex:none}

/* ---------- seções ---------- */
.secao{padding:clamp(4rem,9vw,7rem) 0}
.secao--escura{background:var(--noite);color:var(--claro-forte)}
.secao--escura .titulo{color:var(--claro-forte)}
.secao--escura .subtitulo{color:var(--claro-medio)}
.secao--funda{background:var(--areia-funda)}

/* ---------- sobre ---------- */
.sobre{display:grid;gap:clamp(2.5rem,6vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.sobre{grid-template-columns:1fr 1fr}}
.sobre__foto{position:relative}
.sobre__foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sobre__foto::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--ouro);z-index:-1;
}
.assinatura{
  font-family:var(--serif);font-style:italic;font-size:1.25rem;
  color:var(--tinta);margin:2rem 0 0;
}
.assinatura small{
  display:block;font-family:var(--sans);font-style:normal;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca);margin-top:.5rem;
}

/* ---------- tratamentos: linhas editoriais, sem foto falsa ---------- */
.tratamentos{margin-top:3.5rem;border-top:1px solid var(--areia-funda)}
.secao--funda .tratamentos{border-top-color:#d8cfbd}
.tratamento{
  display:grid;grid-template-columns:1fr;gap:.4rem 2.5rem;
  padding:1.9rem 0;border-bottom:1px solid var(--areia-funda);
}
.secao--funda .tratamento{border-bottom-color:#d8cfbd}
@media (min-width:760px){
  .tratamento{grid-template-columns:minmax(0,15rem) 1fr;align-items:baseline}
}
.tratamento__nome{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0;line-height:1.2;
}
.tratamento__texto{margin:0;color:var(--tinta-media);font-size:1rem}

/* ---------- o espaço: a sequência da chegada ---------- */
.chegada{display:grid;gap:1.6rem;margin-top:3.5rem;grid-template-columns:1fr}
@media (min-width:700px){.chegada{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.chegada{grid-template-columns:repeat(4,1fr)}}
.parada figure{margin:0}
.parada img{width:100%;aspect-ratio:3/4;object-fit:cover}
.parada figcaption{
  display:flex;align-items:baseline;gap:.7rem;margin-top:.9rem;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--claro-medio);
}
.parada b{color:var(--ouro);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- contato ---------- */
.contato{display:grid;gap:2.5rem;margin-top:3.5rem;grid-template-columns:1fr}
@media (min-width:760px){.contato{grid-template-columns:repeat(3,1fr)}}
.contato h3{
  font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ouro);margin:0 0 1rem;
}
.contato p{margin:0 0 .4rem;color:var(--claro-medio);font-size:1rem}
.contato a{color:var(--claro-forte);text-decoration:none;border-bottom:1px solid var(--ouro)}
.contato a:hover{color:var(--ouro-claro)}

/* ---------- mapa ---------- */
/* O iframe é carregado só quando chega perto da tela: ele é de terceiro e
   fica no fim da página, então não precisa pesar no carregamento inicial. */
.mapa{margin-top:3rem}
.mapa__moldura{border:1px solid var(--ouro);padding:8px;background:var(--carvao)}
.mapa iframe{display:block;width:100%;border:0;
  height:clamp(240px,34vw,400px)}
.mapa__acoes{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.mapa__nota{margin:1.1rem 0 0;font-size:.82rem;color:var(--claro-medio)}

/* ---------- chamada final ---------- */
.chamada{text-align:center}
.chamada .subtitulo{margin-inline:auto}
.chamada .botao{margin-top:2.6rem}

/* ---------- equipe ---------- */
.equipe{display:grid;gap:2.5rem;margin-top:3.5rem;grid-template-columns:1fr;max-width:860px}
@media (min-width:760px){.equipe{grid-template-columns:repeat(2,1fr)}}
.pessoa img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%}
.pessoa__nome{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin:1.3rem 0 .3rem}
.pessoa__papel{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro);margin:0}
.pessoa__registro{font-size:.8rem;color:var(--tinta-fraca);margin:.3rem 0 0;font-variant-numeric:tabular-nums}
.pessoa__bio{color:var(--tinta-media);font-size:1rem;margin:1.1rem 0 1.6rem}

/* ---------- rodapé ---------- */
.rodape{background:var(--noite);color:var(--claro-medio);
  padding:4rem 0 2.2rem;font-size:.92rem;border-top:1px solid var(--noite-linha)}
.rodape__grade{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:700px){.rodape__grade{grid-template-columns:1.4fr 1fr 1fr}}
.rodape h4{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 1rem}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.rodape a{color:var(--claro-medio);text-decoration:none}
.rodape a:hover{color:var(--ouro-claro)}
.rodape__fim{border-top:1px solid var(--noite-linha);margin-top:3rem;padding-top:1.5rem;
  display:grid;gap:.45rem;font-size:.82rem;color:#7D8783}
.rodape__crm{color:var(--claro-medio)}

/* ---------- 404 ---------- */
.erro{text-align:center;padding:clamp(5rem,14vw,9rem) 0}