/* Dr. Vinícius Implantes Dentários: ver IDENTIDADE.md */

:root {
  --verde: #0E4B3B;
  --verde-escuro: #0A3A2D;
  --verde-v: #2F9A4E;
  --ouro: #C9A23F;
  --ouro-claro: #E2C57A;
  --esmalte: #F3F6F3;
  --branco: #FFFFFF;
  --madeira: #9A6B47;
  --tinta: #15231E;
  --tinta-suave: #44544D;
  --linha: #D5DED8;

  --serif: "Young Serif", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-corpo: 1.125rem;      /* 18px */
  --t-pequeno: 1rem;
  --t-h3: 1.5rem;
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-h1: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem);

  --largura: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --respiro: clamp(4.5rem, 3rem + 6vw, 8rem);

  --raio: 6px;
  --raio-foto: 18px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
section[id] { scroll-margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--esmalte);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }

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

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--verde); color: var(--branco); padding: .75rem 1rem; border-radius: var(--raio);
}
.pular:focus { top: 1rem; }

/* ---------- Botões e links ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.5rem;
  background: var(--verde); color: var(--branco);
  font: 600 1.0625rem/1.2 var(--sans); text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s ease, transform .2s ease;
}
.botao:hover { background: var(--verde-escuro); }
.botao:active { transform: translateY(1px); }
.botao--pequeno { min-height: 44px; padding: .55rem 1.1rem; font-size: 1rem; }
.botao--ouro { background: var(--ouro); color: var(--tinta); }
.botao--ouro:hover { background: var(--ouro-claro); }
.icone { width: 1.15em; height: 1.15em; flex: none; }

.link-forte {
  display: inline-block; padding: .35rem 0;
  font-weight: 600; color: var(--verde);
  text-decoration: underline; text-decoration-color: var(--ouro);
  text-decoration-thickness: 2px; text-underline-offset: .3em;
  transition: text-decoration-color .2s ease;
}
.link-forte:hover { text-decoration-color: currentColor; }
.link-forte--claro { color: var(--branco); }

/* ---------- Topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--esmalte) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__dentro {
  max-width: var(--largura); margin: 0 auto; padding: .65rem var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--verde); }
.marca__v { width: 2.25rem; height: 2.25rem; color: var(--verde-v); }
.marca__nome { font-family: var(--serif); font-size: 1.25rem; line-height: 1.05; display: flex; flex-direction: column; }
.marca__nome small { font-family: var(--sans); font-size: .8125rem; color: var(--tinta-suave); letter-spacing: .01em; margin-top: .15rem; }
.menu { display: flex; gap: 1.75rem; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; color: var(--tinta-suave); padding: .5rem 0; }
.menu a:hover { color: var(--verde); }
@media (max-width: 760px) {
  .menu { display: none; }
  .topo__dentro { justify-content: space-between; }
}

/* ---------- Abertura ---------- */

.abertura {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) var(--respiro);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  isolation: isolate;
}
.abertura__texto { position: relative; }
.abertura__titulo { font-size: var(--t-h1); color: var(--verde); letter-spacing: -.01em; position: relative; z-index: 1; max-width: 18ch; }
.abertura__traco {
  display: block; width: min(100%, 24rem); height: auto; aspect-ratio: 600 / 140;
  margin: .25rem 0 1.25rem -.25rem; overflow: visible;
}
.abertura__traco path {
  fill: none; stroke: var(--ouro); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 760; stroke-dashoffset: 760;
  animation: tracar 1.4s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
@keyframes tracar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .abertura__traco path { animation: none; stroke-dashoffset: 0; }
}
.abertura__apoio { font-size: 1.25rem; color: var(--tinta-suave); max-width: 34ch; }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.nota-google { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.nota-google strong { color: var(--tinta); font-weight: 600; }
.estrelas { color: var(--ouro); letter-spacing: .1em; font-size: 1.1rem; }
/* Comparador de antes e depois */
.comparar { position: relative; margin: 0; }
.comparar::before {
  content: ""; position: absolute; z-index: -1;
  top: -2.5rem; bottom: -2.5rem; left: 24%; right: -50vw;
  background:
    radial-gradient(70% 60% at 30% 0%, rgba(201, 162, 63, .18), transparent 60%),
    var(--verde);
  border-radius: 32px 0 0 32px;
}
.comparar__quadro {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 22px; background: var(--verde-escuro);
  box-shadow: 0 30px 60px -30px rgba(10, 58, 45, .55);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.comparar__quadro:has(.comparar__controle:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 4px; }
.comparar__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparar__antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparar__alca {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%);
  background: var(--branco); box-shadow: 0 0 12px rgba(0, 0, 0, .25); pointer-events: none;
}
.comparar__alca::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--branco) no-repeat center / 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4B3B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  border: 3px solid var(--ouro); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.comparar__rotulo {
  position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 999px;
  background: rgba(10, 58, 45, .78); backdrop-filter: blur(6px);
  color: var(--branco); font-size: .875rem; font-weight: 600; pointer-events: none;
}
.comparar__rotulo--antes { left: 1rem; }
.comparar__rotulo--depois { right: 1rem; }
.comparar__controle {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.comparar__rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-top: 1.5rem; padding-left: calc(24% + 1.5rem); color: var(--branco);
}
.comparar__titulo { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; }
.comparar__casos { display: flex; gap: .5rem; }
.comparar__caso {
  width: 64px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--verde-escuro); opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.comparar__caso img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comparar__caso:hover { opacity: .9; }
.comparar__caso[aria-pressed="true"] { opacity: 1; border-color: var(--ouro); }

@media (max-width: 860px) {
  .abertura { grid-template-columns: 1fr; }
  .comparar::before {
    top: 30%; bottom: -2.5rem;
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); border-radius: 0;
  }
  .comparar__rodape { padding-left: 0; }
  .comparar__caso { width: 56px; }
}

/* ---------- Fotos ---------- */

.foto {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: var(--raio-foto);
  background: var(--verde);
}
.foto--retrato { aspect-ratio: 4 / 5; }

/* ---------- Seções ---------- */

.secao { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) var(--gutter); }
.secao__cabeca { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.secao__cabeca h2 { font-size: var(--t-h2); color: var(--verde); }
.secao__cabeca p { margin-top: 1rem; color: var(--tinta-suave); }

/* Crença */
.crenca { background: var(--verde); color: var(--branco); }
.crenca__dentro {
  max-width: 50rem; margin: 0 auto; padding: var(--respiro) var(--gutter);
  text-align: center;
}
.crenca__flor { width: 2.25rem; height: 2.25rem; color: var(--ouro); margin: 0 auto 1.5rem; display: block; }
.crenca__frase { font-size: var(--t-h2); color: var(--branco); }
.crenca p { margin: 1.5rem auto 0; max-width: 38rem; color: rgba(255, 255, 255, .84); }

/* Tratamentos: vitrine com abas */
.trat-vitrine {
  display: grid; grid-template-columns: minmax(17.5rem, 1fr) minmax(0, 2.6fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 28px;
  padding: clamp(.75rem, 1.5vw, 1rem);
  box-shadow: 0 30px 60px -40px rgba(10, 58, 45, .35);
}
.trat-abas {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem; background: var(--esmalte); border-radius: 20px;
  grid-row: 1 / span 6; align-self: start;
}
.trat-aba {
  display: flex; align-items: center; gap: .75rem;
  min-height: 56px; padding: .75rem 1rem; width: 100%;
  border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  font: 400 1.125rem/1.2 var(--serif); color: var(--tinta-suave); text-align: left; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.trat-aba::before {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background: currentColor; opacity: .25;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 22 L20 38 L39 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 22 L20 38 L39 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: opacity .2s ease;
}
.trat-aba:hover { background: rgba(14, 75, 59, .07); color: var(--verde); }
.trat-aba[aria-selected="true"] { background: var(--verde); color: var(--branco); }
.trat-aba[aria-selected="true"]::before { background: var(--ouro); opacity: 1; }

.trat-painel {
  grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
  padding-right: clamp(0rem, 2vw, 1.5rem);
}
.trat-painel[hidden] { display: none; }
.trat-painel:not([hidden]) { animation: surgir .35s ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .trat-painel:not([hidden]) { animation: none; } }

.trat-painel__foto { margin: 0; position: relative; }
.trat-painel__foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 20px; background: var(--verde);
}
.trat-painel__foto figcaption {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem; width: fit-content;
  padding: .45rem .8rem; border-radius: 10px;
  background: rgba(10, 58, 45, .82); backdrop-filter: blur(6px);
  color: var(--branco); font-size: .875rem; line-height: 1.35;
}
.trat-painel__texto h3 { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem); color: var(--verde); }
.trat-painel__texto > p { margin-top: 1rem; color: var(--tinta-suave); }
.trat-painel__rotulo { margin-top: 1.75rem; font-weight: 600; color: var(--tinta); }
.trat-painel__texto .botao { margin-top: 2rem; }

.lista-v { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.lista-v li { display: flex; gap: .7rem; align-items: baseline; }
.lista-v li::before {
  content: ""; flex: none; width: 1rem; height: 1rem; transform: translateY(.15em);
  background: var(--verde-v);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 22 L20 38 L39 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 22 L20 38 L39 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 980px) {
  .trat-vitrine { grid-template-columns: 1fr; padding: .75rem; border-radius: 22px; }
  .trat-abas {
    grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: .4rem;
    background: transparent; padding: .25rem;
  }
  .trat-aba {
    width: auto; min-height: 44px; padding: .5rem .85rem; font-size: .9375rem;
    border-radius: 999px; background: var(--esmalte); white-space: normal;
  }
  .trat-aba::before { display: none; }
  .trat-painel { grid-column: 1; grid-template-columns: 1fr; padding: 0 .5rem .75rem; }
  .trat-painel__foto img { aspect-ratio: 1; }
}

/* Histórias */
.historias { padding-top: 0; }
.historia {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.historia--invertida .foto { order: 2; }
.historia h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); color: var(--tinta); }
.historia p { margin-top: 1.1rem; color: var(--tinta-suave); max-width: 34rem; }
.historia__texto { border-left: 3px solid var(--ouro); padding-left: clamp(1.25rem, 3vw, 2rem); }
.historias__mais { margin-top: 0; }
@media (max-width: 760px) {
  .historia { grid-template-columns: 1fr; }
  .historia--invertida .foto { order: 0; }
}

/* Galeria de resultados */
.resultados { margin: clamp(1rem, 3vw, 2rem) 0 2.5rem; }
.resultados__titulo { font-size: 1.75rem; color: var(--verde); margin-bottom: 1.5rem; }
.resultados__grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.resultados__grade img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--verde); }
@media (max-width: 760px) { .resultados__grade { grid-template-columns: repeat(2, 1fr); } }

/* Foto da unidade */
.unidade__foto {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; margin-bottom: 1.5rem; background: var(--verde);
}

/* Avaliações */
.avaliacoes { background: var(--verde-escuro); color: var(--branco); }
.avaliacoes__dentro { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) var(--gutter); }
.avaliacoes__cabeca {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.avaliacoes__cabeca h2 { font-size: var(--t-h2); max-width: 18ch; }
.avaliacoes__nota { color: rgba(255, 255, 255, .78); display: flex; align-items: baseline; gap: .6rem; }
.avaliacoes__numero { font-family: var(--serif); font-size: 3.5rem; line-height: 1; color: var(--ouro); }
.avaliacoes__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 2.5rem; }
.depo { margin: 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.depo p { font-size: 1.125rem; line-height: 1.65; }
.depo p::before { content: "“"; } .depo p::after { content: "”"; }
.depo footer { margin-top: 1rem; font-weight: 600; color: var(--ouro-claro); }
@media (max-width: 900px) { .avaliacoes__lista { grid-template-columns: 1fr; } }

/* Passos (sequência real) */
.passos__lista {
  list-style: none; margin: 0; padding: 0; counter-reset: passo;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.passos__lista li { counter-increment: passo; }
.passos__lista li::before {
  content: counter(passo); display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem;
  border: 2px solid var(--verde); border-radius: 50%;
  font-family: var(--serif); font-size: 1.25rem; color: var(--verde);
}
.passos__lista h3 { font-size: 1.375rem; color: var(--tinta); }
.passos__lista p { margin-top: .5rem; color: var(--tinta-suave); }
@media (max-width: 900px) { .passos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .passos__lista { grid-template-columns: 1fr; } }

/* Unidades */
.unidades { padding-top: 0; }
.status { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 600; color: var(--tinta); }
.status::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-suave); }
.status--aberto::before { background: var(--verde-v); box-shadow: 0 0 0 4px rgba(47, 154, 78, .2); }
.unidades__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.unidade {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-foto);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.unidade h3 { font-size: 1.75rem; color: var(--verde); }
.unidade address { font-style: normal; margin: 1rem 0 1.25rem; color: var(--tinta-suave); }
.unidade__obs { color: var(--tinta-suave); margin-bottom: 1.25rem; }
.horario { border-collapse: collapse; width: 100%; margin-bottom: 1.25rem; font-size: var(--t-pequeno); }
.horario caption { text-align: left; font-weight: 600; margin-bottom: .4rem; }
.horario th, .horario td { text-align: left; padding: .45rem 0; border-top: 1px solid var(--linha); vertical-align: top; }
.horario th { font-weight: 500; padding-right: 1rem; }
.horario td { color: var(--tinta-suave); }
@media (max-width: 760px) { .unidades__grade { grid-template-columns: 1fr; } }

/* Chamada final */
.final {
  background: var(--verde); color: var(--branco); text-align: center;
  padding: var(--respiro) var(--gutter);
}
.final h2 { font-size: var(--t-h2); }
.final p { margin: 1rem auto 2rem; color: rgba(255, 255, 255, .84); }

/* Rodapé */
.rodape { background: var(--verde-escuro); color: rgba(255, 255, 255, .72); font-size: .9375rem; }
.rodape__dentro {
  max-width: var(--largura); margin: 0 auto; padding: 2.5rem var(--gutter) 3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline;
}
.rodape__marca { font-family: var(--serif); font-size: 1.125rem; color: var(--branco); flex-basis: 100%; }
.rodape a { color: var(--ouro-claro); }
.rodape__ano { margin-left: auto; }