:root{
  --papel:      oklch(0.980 0.005 210);
  --papel-2:    oklch(0.949 0.010 200);
  --tinta:      oklch(0.238 0.030 178);
  --tinta-2:    oklch(0.448 0.021 195);
  --escuro:     oklch(0.232 0.034 176);
  --escuro-2:   oklch(0.310 0.030 176);
  --brasa:      oklch(0.520 0.140 34);
  --brasa-viva: oklch(0.735 0.125 52);
  --linha:      oklch(0.876 0.013 195);
  --linha-esc:  oklch(0.400 0.028 176);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 60px);
  --barra: 46px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:clamp(16px,0.6vw + 15px,17.5px);
  line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-bottom:var(--barra);
}
img{ max-width:100%; display:block }
a{ color:inherit }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0;
  /* 1.06 e não menos: "ã", "ç" e "É" precisam de folga em português */
  line-height:1.06; letter-spacing:-0.012em; }
p{ margin:0 }
:focus-visible{ outline:2.5px solid var(--brasa); outline-offset:3px; border-radius:2px }

.env{ width:min(1180px, 100% - var(--gutter)*2); margin-inline:auto }
.sec{ padding:clamp(66px,9vw,124px) 0 }

/* ── cabeçalho ─────────────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--papel) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s;
}
.topo.rolou{ border-bottom-color:var(--linha) }
.topo__in{ display:flex; align-items:center; gap:22px; min-height:70px }
.marca{ font-family:var(--serif); font-size:1.32rem; letter-spacing:-0.02em;
  text-decoration:none; margin-right:auto; white-space:nowrap }
.nav{ display:flex; gap:26px }
.nav a{ text-decoration:none; font-size:0.9rem; color:var(--tinta-2);
  padding-block:6px; transition:color .18s }
.nav a:hover{ color:var(--brasa) }

/* ── botões ────────────────────────────────────────────────────────── */
.bt{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font:inherit; font-size:0.94rem; font-weight:500; letter-spacing:.005em;
  padding:.82em 1.5em; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .16s, background .18s;
}
.bt:active{ transform:translateY(1px) }
.bt--cheio{ background:var(--brasa); color:oklch(0.99 0 0) }
.bt--cheio:hover{ background:color-mix(in oklab, var(--brasa) 88%, black) }
.bt--linha{ border-color:var(--linha); color:var(--tinta) }
.bt--linha:hover{ border-color:var(--tinta); background:color-mix(in oklab,var(--tinta) 5%,transparent) }
.bt--claro{ background:oklch(0.99 0 0); color:var(--escuro) }
.bt--claro:hover{ background:oklch(0.94 0.01 200) }

/* ── herói ─────────────────────────────────────────────────────────── */
.heroi{ padding:clamp(46px,6vw,80px) 0 clamp(56px,7vw,96px) }
.heroi__in{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center }
.heroi h1{ font-size:clamp(2.5rem,5.4vw,4.35rem); max-width:14ch }
.heroi h1 em{ font-style:italic; color:var(--brasa) }
.heroi__lede{ margin-top:1.35rem; font-size:clamp(1.02rem,0.5vw + .92rem,1.16rem);
  color:var(--tinta-2); max-width:46ch }
.heroi__bts{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:12px }
.heroi__selo{ margin-top:2.3rem; padding-top:1.3rem; border-top:1px solid var(--linha);
  display:flex; flex-wrap:wrap; gap:8px 26px; font-size:.85rem; color:var(--tinta-2) }
.heroi__selo b{ font-weight:600; color:var(--tinta) }
.heroi__foto{ position:relative }
.heroi__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px }
.cartao{
  position:absolute; left:-26px; bottom:30px; background:var(--papel);
  border:1px solid var(--linha); border-radius:3px; padding:16px 20px;
  max-width:260px; box-shadow:0 18px 40px -28px oklch(0.24 0.03 178 / .55);
}
.cartao__r{ font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--tinta-2) }
.cartao__v{ font-family:var(--serif); font-size:1.06rem; margin-top:3px; line-height:1.3 }

/* ── fatos ─────────────────────────────────────────────────────────── */
.fatos{ border-block:1px solid var(--linha); padding:clamp(30px,4vw,48px) 0 }
.fatos__in{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px) }
/* colunas propositalmente desiguais: a primeira puxa o olho */
.fato:first-child .fato__n{ font-size:clamp(2rem,3vw,2.8rem) }
.fato__n{ font-family:var(--serif); font-size:clamp(1.65rem,2.3vw,2.15rem);
  color:var(--brasa); line-height:1.1 }
.fato__d{ margin-top:.45rem; font-size:.93rem; color:var(--tinta-2); max-width:30ch }

/* ── procedimentos ─────────────────────────────────────────────────── */
.proc__in{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(32px,5vw,76px);
  align-items:start }
.proc__col-foto{ position:sticky; top:100px }
.proc__col-foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px }
.tit{ font-size:clamp(1.85rem,3.1vw,2.7rem); max-width:18ch }
.tit + .sub{ margin-top:.9rem; color:var(--tinta-2); max-width:52ch }
.aviso-ilus{ margin-top:1rem; font-size:.85rem; color:var(--tinta-2);
  border-left:2px solid var(--brasa-viva); padding-left:12px; max-width:52ch }
.lista{ margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--linha) }
.item{ border-bottom:1px solid var(--linha); padding:clamp(18px,2.2vw,26px) 0;
  display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(14px,2.5vw,40px) }
.item__n{ font-family:var(--serif); font-size:clamp(1.15rem,1.5vw,1.42rem); line-height:1.2 }
.item__d{ color:var(--tinta-2); font-size:.95rem }

/* ── consulta (passos) ─────────────────────────────────────────────── */
.consulta{ background:var(--papel-2) }
.passos{ margin-top:clamp(32px,4vw,52px); display:grid;
  grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,34px) }
.passo{ position:relative; padding-top:26px }
.passo::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--linha) }
.passo::after{ content:""; position:absolute; top:-4px; left:0; width:9px; height:9px;
  border-radius:50%; background:var(--brasa) }
.passo h3{ font-size:1.16rem; margin-bottom:.5rem }
.passo p{ font-size:.93rem; color:var(--tinta-2) }

/* ── sobre ─────────────────────────────────────────────────────────── */
.sobre__in{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,72px);
  align-items:center }
.sobre__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px }
.sobre__texto p + p{ margin-top:1.05rem; color:var(--tinta-2) }
.credencial{ margin-top:1.9rem; padding:16px 20px; border:1px solid var(--linha);
  border-radius:3px; background:var(--papel-2); font-size:.9rem }
.credencial dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--tinta-2) }
.credencial dd{ margin:2px 0 0; font-family:var(--serif); font-size:1.05rem }
.credencial dd + dt{ margin-top:.85rem }
.vago{ color:var(--brasa); font-family:var(--sans); font-size:.9rem }
/* o mesmo rótulo aparece no rodapé escuro: lá o tijolo não tem contraste */
.escuro .vago, .rodape .vago{ color:var(--brasa-viva) }

/* ── galeria assimétrica ───────────────────────────────────────────── */
.galeria{ margin-top:clamp(30px,4vw,50px); display:grid;
  grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(2,1fr);
  gap:clamp(12px,1.6vw,20px); }
.galeria img{ width:100%; height:100%; object-fit:cover; border-radius:3px }
.galeria > :first-child{ grid-row:span 2; aspect-ratio:auto }
.galeria > :first-child img{ min-height:clamp(300px,42vw,540px) }
.galeria > :not(:first-child) img{ aspect-ratio:16/10 }

/* ── perguntas ─────────────────────────────────────────────────────── */
.faq{ margin-top:clamp(28px,3.5vw,44px); max-width:70ch; border-top:1px solid var(--linha) }
.faq details{ border-bottom:1px solid var(--linha) }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 40px 1.15rem 0;
  position:relative; font-family:var(--serif); font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.35 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:6px; top:1.55rem;
  width:11px; height:11px; border-right:1.5px solid var(--tinta-2);
  border-bottom:1.5px solid var(--tinta-2); transform:rotate(45deg);
  transition:transform .22s }
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.75rem }
.faq p{ padding:0 40px 1.3rem 0; color:var(--tinta-2); font-size:.96rem; max-width:62ch }

/* ── visita / rodapé escuro ────────────────────────────────────────── */
.escuro{ background:var(--escuro); color:oklch(0.955 0.008 200) }
.escuro h2{ color:oklch(0.975 0.006 200) }
/* :not(.bt) é obrigatório — sem isso este seletor (0,1,1) vence .bt--claro
   (0,1,0) e o botão fica com texto branco sobre fundo branco. */
.escuro a:not(.bt){ color:inherit }
.visita__in{ display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,70px); align-items:start }
.dados{ margin-top:clamp(24px,3vw,36px); display:grid; gap:1.35rem }
.dados dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:oklch(0.760 0.020 195) }
.dados dd{ margin:4px 0 0; font-family:var(--serif); font-size:1.16rem; line-height:1.4 }
.chamada{ text-align:center; padding:clamp(70px,9vw,120px) 0 }
.chamada h2{ font-size:clamp(2rem,4vw,3.4rem); max-width:20ch; margin-inline:auto }
.chamada p{ margin:1.2rem auto 0; color:oklch(0.800 0.014 195); max-width:52ch }
.chamada .bt{ margin-top:2.2rem }

.rodape{ background:var(--escuro); color:oklch(0.800 0.014 195);
  border-top:1px solid var(--linha-esc); padding:clamp(40px,5vw,64px) 0;
  font-size:.87rem }
.rodape__in{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(26px,4vw,48px) }
.rodape h4{ font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.11em; color:oklch(0.700 0.020 195); margin:0 0 .7rem; font-weight:500 }
.rodape a{ text-decoration:none }
.rodape a:hover{ text-decoration:underline }
.legal{ margin-top:clamp(30px,4vw,46px); padding-top:22px;
  border-top:1px solid var(--linha-esc); font-size:.79rem;
  color:oklch(0.665 0.018 195); max-width:80ch }
.legal p + p{ margin-top:.6rem }

/* ── barra de demonstração ─────────────────────────────────────────── */
.demo{
  position:fixed; inset:auto 0 0 0; z-index:60; min-height:var(--barra);
  background:var(--brasa); color:oklch(0.995 0 0);
  display:flex; align-items:center; justify-content:center; gap:8px 16px;
  flex-wrap:wrap; padding:9px var(--gutter); font-size:.83rem; text-align:center;
}
.demo a{ color:inherit; font-weight:600 }
.demo strong{ font-weight:600 }

/* Não existe fade-in por scroll aqui, de propósito: se o observador falhar
   (aba em segundo plano, navegador antigo, JS bloqueado), o conteúdo some.
   O site tem que aparecer inteiro mesmo sem uma linha de JS rodar. */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ── responsivo ────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .heroi__in,.proc__in,.sobre__in,.visita__in{ grid-template-columns:1fr }
  .proc__col-foto{ position:static }
  .proc__col-foto img{ aspect-ratio:16/9 }
  .sobre__foto img{ aspect-ratio:16/10 }
  .cartao{ left:auto; right:14px; bottom:14px }
  .passos{ grid-template-columns:repeat(2,1fr) }
  .rodape__in{ grid-template-columns:1fr 1fr }
}
@media (max-width:720px){
  .nav{ display:none }
  /* "Cuidar Odontologia e Estética" com nowrap estourava a largura da tela */
  .marca{ white-space:normal; font-size:1.1rem; line-height:1.18; min-width:0 }
  .topo__in .bt{ padding:.7em 1.05em; font-size:.86rem; flex:none }
  .heroi__in{ gap:34px }
  .heroi__foto{ order:-1 }
  .heroi__foto img{ aspect-ratio:5/4 }
  .fatos__in{ grid-template-columns:1fr; gap:22px }
  .fato:first-child .fato__n{ font-size:1.9rem }
  .item{ grid-template-columns:1fr; gap:.4rem }
  .passos{ grid-template-columns:1fr; gap:26px }
  .galeria{ grid-template-columns:1fr; grid-template-rows:none }
  .galeria > :first-child{ grid-row:auto }
  .galeria > :first-child img{ min-height:0; aspect-ratio:16/10 }
  .rodape__in{ grid-template-columns:1fr; gap:26px }
  .cartao{ position:static; max-width:none; margin-top:14px }
}