/* Modelo dentista 2 — "palco escuro": preto puro, tipografia enorme e leve, uma cor de ação e uma de destaque.
   Cada clínica troca --acento (botão, marca), --destaque (rótulos, links) e --terceira (partículas). */
:root {
  --vazio: #000000;
  --branco: #ffffff;
  --cinza: #9a9a9a;
  --prata: #bdbdbd;
  --linha: rgba(255,255,255,.14);
  --acento: #8052ff;
  --destaque: #ffb829;
  --terceira: #15846e;

  --fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 104px;
  --titulo: 72px;
  --titulo-sm: 42px;
  --secao: 132px;
  --raio: 24px;
  --largura: 1280px;
  --gutter: 48px;
}
@media (max-width: 1080px) { :root { --display: 76px; --titulo: 56px; } }
@media (max-width: 734px) { :root { --display: 48px; --titulo: 38px; --titulo-sm: 30px; --secao: 80px; --gutter: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--vazio); }
body {
  margin: 0; background: var(--vazio); color: var(--branco);
  font: 200 18px/1.5 var(--fonte); font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--branco); text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.04em; color: var(--branco); }
b, strong { font-weight: 400; }
.envelope { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--acento); color: #fff; }

.rotulo { display: block; font: 600 13px/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--destaque); margin-bottom: 24px; }
.link { color: var(--destaque); font-weight: 400; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link:hover { color: var(--branco); }

/* faixa de demonstração */
.demo-faixa { background: #141414; color: var(--prata); font: 400 12px/1.4 var(--fonte); text-align: center; padding: 8px 16px; }
.demo-faixa a { color: var(--destaque); }

/* botões: um preenchido por tela, o resto é texto */
.botao { display: inline-flex; align-items: center; gap: 10px; background: var(--acento); color: #fff; border-radius: 24px; padding: 15px 22px; font: 600 14px/1 var(--fonte); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: filter .2s, transform .2s; }
.botao:hover { filter: brightness(1.12); }
.botao:active { transform: scale(.98); }
.fantasma { font: 400 14px/1 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); white-space: nowrap; }
.fantasma:hover { color: var(--branco); }

/* navegação */
.nav { position: absolute; top: auto; left: 0; right: 0; z-index: 20; }
.nav .envelope { display: flex; align-items: center; gap: 40px; height: 88px; }
.marca { display: flex; align-items: center; gap: 12px; font: 400 17px/1 var(--fonte); letter-spacing: -0.01em; color: var(--branco); white-space: nowrap; }
.marca small { display: block; font: 400 11px/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin-top: 5px; }
.marca svg { flex: none; }
.marca > span { min-width: 0; }
.marca small { overflow: hidden; text-overflow: ellipsis; }
.nav .marca { min-width: 0; flex: 1 1 auto; }
@media (max-width: 734px) { .nav .marca small { white-space: normal; line-height: 1.35; } }
.nav-links { display: flex; gap: 32px; margin-left: auto; }
.nav-links a { font: 600 13px/1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); transition: color .2s; }
.nav-links a:hover { color: var(--branco); }
.menu-botao { display: none; margin-left: auto; background: none; border: 0; color: var(--branco); padding: 8px; }
.nav-fixa { position: fixed; top: 16px; left: 50%; z-index: 35; transform: translate(-50%, -140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); display: flex; align-items: center; gap: 18px; background: rgba(18,18,18,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--linha); border-radius: 24px; padding: 8px 8px 8px 20px; }
.nav-fixa.visivel { transform: translate(-50%, 0); }
.nav-fixa .marca { font-size: 15px; }
.nav-fixa .botao { padding: 11px 16px; font-size: 12px; }
.nav-fixa .menu-botao { margin-left: 0; padding: 4px; }
@media (max-width: 900px) {
  .nav-links { display: none; position: fixed; inset: 0; z-index: 30; background: var(--vazio); flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 var(--gutter); gap: 8px; }
  .nav-links.aberto { display: flex; }
  .nav-links a { font: 400 40px/1.25 var(--fonte); letter-spacing: -0.04em; text-transform: none; color: var(--branco); }
  .menu-botao { display: block; position: relative; z-index: 31; }
  .nav .botao { display: none; }
  .nav-fixa { left: 16px; right: 16px; transform: translateY(-140%); justify-content: space-between; }
  .nav-fixa.visivel { transform: none; }
  .nav-fixa .botao { display: none; }   /* no celular o WhatsApp já fica fixo embaixo */
}

/* hero: título enorme à esquerda, constelação à direita */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 64px; overflow: hidden; }
.hero .grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; width: 100%; }
.hero h1 { font-size: clamp(44px, 7.4vw, var(--display)); line-height: .95; letter-spacing: -0.045em; max-width: 11ch; }
.hero .linha { margin-top: 36px; max-width: 30em; color: var(--branco); }
.hero .acoes { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 44px; }
.ceu { position: relative; }
.hero .ceu { aspect-ratio: 1; width: 100%; }
.hero canvas, .ceu canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .base { position: absolute; left: 0; right: 0; bottom: 28px; }
.hero .base .envelope { display: flex; justify-content: space-between; gap: 24px; font: 400 12px/1.5 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 112px; display: block; }
  .hero .grade { grid-template-columns: 1fr; }
  .hero .ceu { order: -1; width: 78%; margin: -8px auto -24px; }
  .hero .base { position: static; margin-top: 56px; }
}

/* seções */
.secao { padding: var(--secao) 0; position: relative; }
.secao + .secao { border-top: 1px solid var(--linha); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.dupla.centro { align-items: center; }
.dupla h2 { font-size: var(--titulo); line-height: 1; }
.dupla .texto { display: grid; gap: 22px; color: var(--prata); max-width: 34em; }
.dupla .texto p:first-child { color: var(--branco); }
.dupla.inverte > :first-child { order: 2; }
@media (max-width: 900px) { .dupla { grid-template-columns: 1fr; gap: 36px; } .dupla.inverte > :first-child { order: 0; } }

.titulo-secao { font-size: var(--titulo); line-height: 1; max-width: 12ch; }
.cabeca { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 72px; }
.cabeca p { color: var(--prata); max-width: 30em; }
@media (max-width: 900px) { .cabeca { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } }

/* tratamentos: lista tipográfica, sem cartões */
.lista-trat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); counter-reset: trat; }
.lista-trat li { border-bottom: 1px solid var(--linha); }
.lista-trat .item { display: grid; grid-template-columns: 72px 1.1fr 1fr 40px; gap: 24px; align-items: baseline; padding: 34px 0; color: var(--branco); transition: padding .3s cubic-bezier(.2,.7,.2,1); }
.lista-trat .item::before { counter-increment: trat; content: counter(trat, decimal-leading-zero); font: 400 14px/1 var(--fonte); color: var(--cinza); font-variant-numeric: tabular-nums; }
.lista-trat h3 { font-size: 40px; line-height: 1.05; letter-spacing: -0.035em; }
.lista-trat p { color: var(--prata); font-size: 17px; }
.lista-trat .seta { justify-self: end; color: var(--cinza); font-size: 22px; transition: transform .3s, color .3s; }
.lista-trat a.item:hover { padding-left: 14px; }
.lista-trat a.item:hover .seta { color: var(--destaque); transform: translateX(6px); }
.lista-trat a.item:hover h3 { color: var(--destaque); }
@media (max-width: 900px) {
  .lista-trat .item { grid-template-columns: 40px 1fr 24px; gap: 12px 16px; padding: 26px 0; }
  .lista-trat h3 { font-size: 28px; }
  .lista-trat p { grid-column: 2 / 4; }
  .lista-trat .seta { grid-row: 1; grid-column: 3; }
}

/* foto em moldura arredondada sobre o preto */
.moldura { border-radius: var(--raio); overflow: hidden; background: #111; aspect-ratio: 4 / 5; }
.moldura img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.moldura.larga { aspect-ratio: 16 / 10; }
.ceu.pequeno { aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }

/* passos: números enormes em coluna, sem caixas */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: passo; }
.passos li::before { counter-increment: passo; content: counter(passo); display: block; font: 200 96px/1 var(--fonte); letter-spacing: -0.05em; color: var(--acento); margin-bottom: 22px; }
.passos h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 10px; }
.passos p { color: var(--prata); font-size: 16px; }
@media (max-width: 1000px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; gap: 36px; } .passos li::before { font-size: 72px; } }

/* equipe */
.equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.pessoa .moldura { aspect-ratio: 4 / 5; margin-bottom: 22px; }
.pessoa .cargo { font: 400 12px/1.4 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-claro, var(--acento)); }
.pessoa h3 { font-size: 30px; letter-spacing: -0.03em; margin: 8px 0 10px; }
.pessoa p { color: var(--prata); font-size: 16px; }
.pessoa .cro { margin-top: 12px; font: 400 12px/1.4 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }

/* números grandes (fatos) */
.fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.fatos div { border-top: 1px solid var(--linha); padding-top: 22px; }
.fatos b { display: block; font: 400 44px/1 var(--fonte); letter-spacing: -0.04em; margin-bottom: 10px; }
.fatos span { color: var(--cinza); font-size: 15px; }
@media (max-width: 734px) { .fatos { grid-template-columns: 1fr; gap: 28px; } }

/* listas lado a lado (antes de vir etc.) */
.listas { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.listas h3 { font-size: 30px; letter-spacing: -0.03em; margin-bottom: 22px; }
.listas ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.listas li { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--linha); color: var(--branco); font-weight: 400; font-size: 17px; }
.listas li span { color: var(--cinza); font-weight: 200; text-align: right; }
.listas .nota { margin-top: 18px; color: var(--cinza); font-size: 15px; }
@media (max-width: 900px) { .listas { grid-template-columns: 1fr; gap: 48px; } }

/* galeria */
.galeria { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.galeria figure { margin: 0; }
.galeria figure:first-child { grid-row: span 2; }
.galeria .moldura { aspect-ratio: auto; height: 100%; min-height: 260px; }
.galeria figcaption { margin-top: 12px; font: 400 12px/1.4 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.galeria figure:first-child .moldura { min-height: 560px; }
@media (max-width: 734px) { .galeria { grid-template-columns: 1fr; } .galeria figure:first-child { grid-row: auto; } .galeria figure:first-child .moldura, .galeria .moldura { min-height: 0; aspect-ratio: 4 / 3; } }

/* perguntas */
.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 28px 0; font: 400 26px/1.2 var(--fonte); letter-spacing: -0.025em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 200; font-size: 32px; line-height: .8; color: var(--destaque); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 30px; color: var(--prata); max-width: 44em; }
@media (max-width: 734px) { .faq summary { font-size: 20px; padding: 22px 0; } }

/* visita */
.visita { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; }
.visita .dados { display: grid; gap: 40px; align-content: start; }
.visita .dados h3 { font: 600 13px/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--destaque); margin-bottom: 12px; }
.visita .dados p { color: var(--branco); }
.horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horarios td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.horarios td:last-child { text-align: right; color: var(--cinza); }
.horarios tr.hoje td { color: var(--branco); font-weight: 400; }
.horarios tr.hoje td:first-child::after { content: " · hoje"; color: var(--destaque); }
.mapa { border-radius: var(--raio); overflow: hidden; min-height: 460px; background: #111; }
.mapa iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; filter: invert(.92) hue-rotate(180deg) grayscale(.6) contrast(.9); }
@media (max-width: 900px) { .visita { grid-template-columns: 1fr; gap: 48px; } .mapa, .mapa iframe { min-height: 340px; } }

/* chamada final */
.chamada { text-align: left; overflow: hidden; }
.chamada h2 { font-size: var(--display); line-height: .95; letter-spacing: -0.045em; max-width: 11ch; }
.chamada p { margin-top: 32px; color: var(--prata); max-width: 30em; }
.chamada .acoes { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 44px; }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 56px 0 36px; color: var(--cinza); font-size: 14px; line-height: 1.6; }
.rodape .grade { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.rodape h4 { margin: 0 0 14px; font: 600 12px/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--branco); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: var(--prata); }
.rodape a:hover { color: var(--branco); }
.rodape .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 12px; }
@media (max-width: 734px) { .rodape .grade { grid-template-columns: 1fr; } }

/* WhatsApp no celular */
.zap-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: none; align-items: center; gap: 8px; background: var(--acento); color: #fff; border-radius: 24px; padding: 14px 18px; font: 600 13px/1 var(--fonte); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) { .zap-flutuante { display: inline-flex; } }

/* cookies */
.cookies { position: fixed; left: 16px; bottom: 16px; z-index: 40; max-width: 440px; background: #121212; border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; display: grid; gap: 16px; font-size: 15px; color: var(--prata); }
.cookies[hidden] { display: none; }
.cookies a { color: var(--destaque); }
.cookies .botoes { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cookies button { font: 600 12px/1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 0; background: none; color: var(--cinza); padding: 12px 0; }
.cookies button.aceitar { background: var(--branco); color: #000; border-radius: 24px; padding: 12px 18px; }
@media (max-width: 734px) { .cookies { right: 16px; max-width: none; } }

/* página de tratamento */
.trat-hero { padding: 168px 0 96px; position: relative; overflow: hidden; }
.migalha { font: 400 12px/1.4 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); margin-bottom: 40px; }
.migalha a { color: var(--cinza); }
.migalha a:hover { color: var(--branco); }
.trat-hero h1 { font-size: var(--display); line-height: .95; letter-spacing: -0.045em; max-width: 10ch; }
.trat-hero .linha { margin-top: 32px; max-width: 32em; }
.trat-hero .acoes { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.texto-longo { display: grid; gap: 64px; }
.texto-longo section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; }
.texto-longo h2 { font-size: var(--titulo-sm); line-height: 1.05; }
.texto-longo .paragrafos { display: grid; gap: 18px; color: var(--prata); }
.texto-longo .paragrafos p:first-child { color: var(--branco); }
.aviso-cfo { font-size: 14px; color: var(--cinza); border-left: 2px solid var(--acento); padding-left: 16px; max-width: 46em; }
@media (max-width: 900px) { .texto-longo section { grid-template-columns: 1fr; gap: 18px; } .trat-hero { padding-top: 132px; } }

/* privacidade */
.legal-pagina { max-width: 760px; padding: 168px 0 var(--secao); }
.legal-pagina h1 { font-size: var(--titulo); line-height: 1; }
.legal-pagina h2 { font-size: 26px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.legal-pagina p { color: var(--prata); }
.legal-pagina p + p { margin-top: 12px; }
.legal-pagina .data { color: var(--cinza); font-size: 14px; margin-top: 18px; }

/* aparição ao rolar */
.revela { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.revela.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }