/* =========================================================================
   Dr. Fernando Versiani — Landing Page
   Folha única: fontes, tokens, reset, grid, casca global, seções editoriais,
   comparador Antes/Depois, accordion do FAQ, motion editorial e reduced motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fontes auto-hospedadas
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Paleta Marfim Mineral */
  --c-canvas:        #F4F1EA;
  --c-superficie:    #FAF9F6;
  --c-pedra:         #E7E1D7;
  --c-texto:         #1F211F;
  --c-texto-2:       #646861;
  --c-hairline:      #D2CCC1;
  --c-acento:        #3F4A43;
  --c-carvao:        #242825;

  /* Tokens contextuais de contraste (technical-plan.md §8) */
  --c-sobre-carvao:      #FAF9F6;  /* 14,19:1 */
  --c-sobre-carvao-2:    #AFB0AD;  /* 6,86:1  */
  --c-sobre-pedra-2:     #5A5D57;  /* 5,15:1  */
  --c-foco:              #3F4A43;  /* claro: 8,19:1 / 7,11:1 */
  --c-foco-escuro:       #FAF9F6;  /* escuro: 14,19:1 */

  /* Tipografia */
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:    clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
  --fs-h2:      clamp(1.875rem, 1.25rem + 2.6vw, 3rem);
  --fs-h3:      clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;
  --fs-num:     clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* Escala de espaçamento */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px;  --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px;  --s-64: 64px;
  --s-80: 80px; --s-96: 96px; --s-128: 128px; --s-160: 160px; --s-192: 192px;

  /* Grid e container */
  --container-max: 1320px;
  --margem: 20px;
  --colunas: 4;
  --gutter: 16px;

  /* Radius */
  --r-0: 0;
  --r-8: 8px;
  --r-12: 12px;

  /* Motion — Ritmo Responsivo Contido */
  --t-hover: 170ms;
  --t-ui: 250ms;
  --t-editorial: 450ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Header */
  --header-h: 64px;

  scroll-behavior: smooth;
}

@media (min-width: 480px)  { :root { --margem: 24px; } }
@media (min-width: 768px)  { :root { --margem: 32px; --colunas: 8;  --gutter: 24px; } }
@media (min-width: 1024px) { :root { --margem: 48px; --colunas: 12; --gutter: 24px; --header-h: 84px; } }
@media (min-width: 1280px) { :root { --margem: 64px; } }

/* -------------------------------------------------------------------------
   3. Reset mínimo
   ------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-texto);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:target { scroll-margin-top: calc(var(--header-h) + var(--s-24)); }

/* -------------------------------------------------------------------------
   4. Foco e utilitários
   ------------------------------------------------------------------------- */

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

.resultados :focus-visible,
.cta-final :focus-visible {
  outline-color: var(--c-foco-escuro);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-8);
  left: var(--s-8);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--c-texto);
  color: var(--c-canvas);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-8);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* -------------------------------------------------------------------------
   5. Container e grid
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  gap: var(--gutter);
}

/* -------------------------------------------------------------------------
   6. Tipografia base
   ------------------------------------------------------------------------- */

.hero__title,
.contexto__title,
.tecnica__title,
.comparacao__title,
.resultados__title,
.doutor__title,
.localizacao__title,
.faq__title,
.cta-final__title,
.legal__title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-12) var(--s-32);
  border-radius: var(--r-8);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}

.btn--dark { background: var(--c-texto); color: var(--c-canvas); }
.btn--dark:hover { background: var(--c-acento); }

.btn--invertido { background: var(--c-canvas); color: var(--c-texto); }
.btn--invertido:hover { background: var(--c-superficie); }

@media (min-width: 1024px) { .btn { min-height: 52px; } }

a:not(.btn):not(.skip-link):not(.site-header__name):not(.localizacao__mapa-link) {
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-hairline);
}
a:not(.btn):not(.skip-link):not(.localizacao__mapa-link):hover {
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
   8. Header
   ------------------------------------------------------------------------- */

/* Sentinela do estado reduzido do Header. Sem altura visual e sem afetar o fluxo. */
.header-sentinela {
  position: absolute;
  top: 24px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) var(--ease);
}

.site-header[data-reduzido="true"] { border-bottom-color: var(--c-hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  min-height: var(--header-h);
  transition: min-height var(--t-ui) var(--ease);
}

@media (min-width: 1024px) {
  .site-header[data-reduzido="true"] .site-header__inner { min-height: 68px; }
}

.site-header__name {
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  gap: clamp(var(--s-16), 1.6vw, var(--s-32));
}

.site-nav__list a {
  display: inline-block;
  padding: var(--s-12) 0;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--c-texto-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.site-nav__list a:hover { color: var(--c-texto); }

/* Item ativo: não depende só de cor — recebe underline e peso */
.site-nav__list a[aria-current="true"] {
  color: var(--c-texto);
  font-weight: 500;
  border-bottom-color: var(--c-texto);
}

.site-header__cta { display: none; }

.site-header__menu-btn {
  min-height: 44px;
  padding: var(--s-8) var(--s-12);
  margin-right: calc(var(--s-12) * -1);
  font-weight: 500;
  font-size: var(--fs-small);
}

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header__menu-btn { display: none; }

  /* Header e flutuante nunca coexistem.

     A ocultação era por `display: none`, que tirava o CTA do fluxo e fazia o
     nome e a navegação saltarem de posição a cada alternância. Agora o elemento
     permanece no fluxo — reservando o espaço horizontal de forma estável — e
     apenas desaparece: opacidade, deslocamento vertical discreto e visibility.

     `visibility: hidden` tira o link da ordem de tabulação e do leitor de tela;
     `pointer-events: none` impede o clique durante a saída. Quando volta,
     interação e foco são restaurados integralmente. */
  .site-header__cta {
    transition: opacity var(--t-ui) var(--ease),
                transform var(--t-ui) var(--ease),
                visibility 0s linear 0s,
                background-color var(--t-hover) var(--ease);
  }

  .site-header[data-cta-oculto="true"] .site-header__cta {
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    /* visibility espera a transição terminar para não cortar o fade */
    transition: opacity var(--t-ui) var(--ease),
                transform var(--t-ui) var(--ease),
                visibility 0s linear var(--t-ui);
  }
}

/* Com movimento reduzido a troca é imediata, mas o espaço continua reservado:
   nenhum reflow da navegação em nenhum dos dois estados. */
@media (prefers-reduced-motion: reduce) {
  .site-header__cta,
  .site-header[data-cta-oculto="true"] .site-header__cta {
    transition: none;
  }
  .site-header[data-cta-oculto="true"] .site-header__cta { transform: none; }
}

/* -------------------------------------------------------------------------
   9. Menu mobile
   ------------------------------------------------------------------------- */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-superficie);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-panel[hidden] { display: none; }

.menu-panel__inner {
  min-height: 100%;
  padding: var(--s-24) var(--margem) calc(var(--s-48) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}

.menu-panel__close {
  align-self: flex-end;
  min-height: 44px;
  padding: var(--s-8) var(--s-12);
  font-weight: 500;
  font-size: var(--fs-small);
}

.menu-panel__list { display: flex; flex-direction: column; }

.menu-panel__list a {
  display: block;
  padding: var(--s-16) 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2rem);
  text-decoration: none;
  border-bottom: 1px solid var(--c-hairline);
}

.menu-panel__cta { margin-top: auto; }

body[data-menu-aberto="true"] { overflow: hidden; }

@media (min-width: 1024px) { .menu-panel { display: none; } }

/* -------------------------------------------------------------------------
   10. Seções — base estrutural
   ------------------------------------------------------------------------- */

section { scroll-margin-top: calc(var(--header-h) + var(--s-16)); }

.contexto, .tecnica, .comparacao, .resultados,
.doutor, .localizacao, .faq, .cta-final {
  padding-block: clamp(var(--s-80), 9vw, var(--s-160));
}

.tecnica { background: var(--c-superficie); }
.resultados { background: var(--c-carvao); color: var(--c-sobre-carvao); }
.localizacao { background: var(--c-pedra); }
.cta-final { background: var(--c-carvao); color: var(--c-sobre-carvao); }

/* Hero */
.hero { padding-block: clamp(var(--s-48), 6vw, var(--s-96)) clamp(var(--s-80), 9vw, var(--s-128)); }

.hero__grid { display: grid; gap: clamp(var(--s-32), 4vw, var(--s-64)); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-24);
  max-width: 15ch;
}
.hero__sub {
  font-size: var(--fs-lead);
  color: var(--c-texto-2);
  max-width: 42ch;
  margin-bottom: var(--s-32);
  text-wrap: pretty;
}
/* Sem filtro, overlay, zoom ou hover: a fotografia é apresentada como está. */
.hero__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-0); }

@media (min-width: 1024px) {
  /* Tensão assimétrica: texto em ~5 colunas, fotografia dominante em ~6.
     Evita deliberadamente a divisão 50/50.
     A altura da fotografia é limitada para que o CTA da Hero permaneça acima
     da dobra em telas de laptop. Sem o limite, a imagem 3:4 cresce junto com a
     coluna e empurra o CTA para fora da viewport, o que também fazia o CTA
     flutuante aparecer já no topo da página.
     object-position mantém cabeça e rosto dentro do corte. */
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(var(--s-48), 4vw, var(--s-80));
  }
  .hero__title { margin-bottom: var(--s-32); }
  .hero__figure img {
    max-height: min(74vh, 780px);
    object-position: center 28%;
  }
}

/* Contexto */
.contexto__grid { display: grid; gap: clamp(var(--s-24), 3vw, var(--s-48)); }
.contexto__title { font-size: var(--fs-h2); line-height: var(--lh-snug); max-width: 18ch; }
.contexto__text { display: grid; gap: var(--s-24); max-width: 58ch; color: var(--c-texto-2); }

@media (min-width: 1024px) {
  /* Sem fotografia: a assimetria e o respiro são o recurso da seção.
     O corpo de texto desce um pouco em relação à headline. */
  .contexto__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(var(--s-64), 7vw, var(--s-128)); align-items: start; }
  .contexto__text { padding-top: var(--s-16); }
}

/* Técnica */
.tecnica__intro { display: grid; gap: clamp(var(--s-24), 3vw, var(--s-48)); margin-bottom: clamp(var(--s-48), 6vw, var(--s-96)); }
.tecnica__title { font-size: var(--fs-h2); line-height: var(--lh-snug); max-width: 20ch; }
.tecnica__text { display: grid; gap: var(--s-24); max-width: 58ch; color: var(--c-texto-2); }

@media (min-width: 1024px) {
  .tecnica__intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-96); align-items: start; }
}

.tecnica__media { display: grid; gap: var(--gutter); margin-bottom: clamp(var(--s-48), 6vw, var(--s-96)); }
.tecnica__fig--portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tecnica__fig--landscape img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 768px) {
  .tecnica__media { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: end; }
}

/* Fluxo de quatro etapas — composição tipográfica.
   Os quatro desenhos vetoriais foram removidos na revisão visual. A etapa se
   apoia em numeração editorial, hairline, espaço e hierarquia: nada de ícone,
   imagem ou ornamento no lugar deles.

   A hairline é contínua em ambas as direções: vertical no mobile, por uma linha
   única atrás dos blocos; horizontal a partir de 768px, zerando o column-gap para
   que as bordas dos campos se encontrem sem interrupção. */
.fluxo {
  position: relative;
  display: grid;
  gap: clamp(var(--s-32), 4vw, var(--s-48));
}

.fluxo::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-8);
  bottom: var(--s-8);
  width: 1px;
  background: var(--c-hairline);
}

.fluxo__item {
  display: grid;
  gap: var(--s-8);
  justify-items: start;
  align-content: start;
  padding-left: var(--s-24);
}

/* Sem o desenho, o número passa a ser o peso visual da etapa. */
.fluxo__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  line-height: 1;
  color: var(--c-texto-2);
}

.fluxo__nome {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  max-width: 22ch;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .fluxo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: var(--s-64);
  }
  .fluxo::before { content: none; }
  .fluxo__item {
    padding-left: 0;
    padding-right: var(--gutter);
    padding-top: var(--s-24);
    padding-bottom: var(--s-16);
    border-top: 1px solid var(--c-hairline);
  }
}

@media (min-width: 1024px) {
  /* Quatro colunas de mesma medida: sem a área vetorial, o alinhamento das
     hairlines superiores e a altura comum sustentam o ritmo da sequência. */
  .fluxo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fluxo__item {
    padding-right: var(--s-32);
    padding-top: var(--s-32);
    min-height: 172px;
  }
  .fluxo__nome { max-width: 18ch; }
}

/* Comparação — Díptico Editorial (base) */
.comparacao__title { font-size: var(--fs-h2); line-height: var(--lh-snug); max-width: 22ch; margin-bottom: var(--s-32); }
/* Introdução alinhada ao mesmo eixo inicial da headline e do container em todos
   os breakpoints. O deslocamento assimétrico de 33,333% em telas largas foi
   removido na revisão visual: lia-se como desalinhamento, não como composição. */
.comparacao__intro { max-width: 54ch; color: var(--c-texto-2); margin-bottom: clamp(var(--s-48), 6vw, var(--s-80)); }

.diptico { display: grid; gap: var(--s-48); }

.diptico__campo {
  display: grid;
  gap: var(--s-12);
  align-content: start;
  padding-top: var(--s-32);
  border-top: 1px solid var(--c-hairline);
}

.diptico__num { font-family: var(--f-display); font-size: var(--fs-num); line-height: 1; color: var(--c-texto-2); }
.diptico__nome { font-size: var(--fs-h3); font-weight: 500; }
.diptico__texto { color: var(--c-texto-2); max-width: 46ch; }

/* A partir de tablet os dois campos ficam lado a lado, separados apenas por
   espaço editorial. O divisor vertical foi removido na revisão visual — lia-se
   como bug de renderização — e com ele o padding assimétrico do segundo campo,
   que quebrava a igualdade de peso entre os dois lados. A hairline horizontal
   superior de cada campo permanece. */
@media (min-width: 768px) {
  .diptico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-48), 6vw, var(--s-96)); }
}

.comparacao__fecho {
  display: grid;
  gap: var(--s-32);
  margin-top: clamp(var(--s-48), 6vw, var(--s-96));
}
.comparacao__fecho-texto { max-width: 52ch; color: var(--c-texto-2); }
.comparacao__cta { justify-self: start; }

@media (min-width: 1024px) {
  .comparacao__fecho { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: var(--s-64); }
  .comparacao__cta { justify-self: end; }
}

/* Resultados — base sem sobreposição, usada como fallback sem JavaScript */
.resultados__title { font-size: var(--fs-h2); line-height: var(--lh-snug); max-width: 20ch; margin-bottom: var(--s-24); }
.resultados__aviso {
  color: var(--c-sobre-carvao);
  max-width: 62ch;
  margin-bottom: clamp(var(--s-48), 6vw, var(--s-80));
}

.casos { display: grid; gap: clamp(var(--s-48), 6vw, var(--s-96)); }
.caso__titulo {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-sobre-carvao-2);
  margin-bottom: var(--s-16);
}

/* Estado base = fallback sem JavaScript: Antes e Depois lado a lado. */
.caso__midia { display: grid; gap: var(--gutter); }
.caso__lado { margin: 0; }
.caso__lado img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-8); }
.caso__label {
  margin-top: var(--s-8);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-sobre-carvao-2);
}

@media (min-width: 600px) { .caso__midia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Largura do comparador a partir do desktop.

   O quadro é 4:5, então a altura é sempre 1,25x a largura. Limitar só por
   largura fazia o quadro de 900px render 1125px de altura e ocupar mais que a
   viewport inteira em monitores 16:9, encostando no Header e nas bordas.

   A largura passa a ser limitada também pela altura disponível: 57.6svh × 1,25
   = 72svh de altura de quadro, que deixa respiro acima, abaixo e nas laterais
   em 16:9 sem encolher o comparador em telas altas. O teto de 900px preserva a
   medida aprovada em monitores muito altos e `100%` respeita o container.

   Mobile e tablet não entram aqui: continuam usando toda a largura disponível.

   A mesma medida governa a navegação de casos, para os dois eixos coincidirem. */
@media (min-width: 1024px) {
  .resultados {
    --comparador-largura: min(900px, 100%, 57.6vh);
  }
  .casos,
  .casos__nav {
    max-width: var(--comparador-largura);
    margin-inline: auto;
  }
}

@supports (height: 100svh) {
  @media (min-width: 1024px) {
    .resultados { --comparador-largura: min(900px, 100%, 57.6svh); }
  }
}

/* -------------------------------------------------------------------------
   11.1 Comparador Antes/Depois — apenas com enhancement
   A mesma marcação do fallback é reposicionada: as duas figuras passam a
   ocupar o mesmo quadro 4:5 e a de "antes" é recortada pelo valor do range.
   ------------------------------------------------------------------------- */

[data-resultados-enhanced] .caso__midia {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-8);
  overflow: hidden;
  --pos: 50;
}

/* Camadas, de baixo para cima:
     1. imagem "antes"      — sem recorte, preenche o quadro
     2. imagem "depois"     — recortada pela esquerda, revelando "antes"
     3. labels e divisor    — sempre acima das duas fotografias
     4. .caso__controle     — o range nativo, acima de tudo

   O recorte é aplicado à camada de CIMA e somente à imagem. Isso resolve três
   problemas de uma vez: nenhuma figura precisa de z-index (e portanto não cria
   contexto de empilhamento que aprisionaria as labels), as labels nunca são
   recortadas junto com a fotografia, e nada fotográfico fica acima do controle. */

[data-resultados-enhanced] .caso__lado {
  position: absolute;
  inset: 0;
}

[data-resultados-enhanced] .caso__lado img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* "depois" vem depois no DOM e portanto pinta por cima. Recortá-la pela
   esquerda revela "antes" por baixo. --pos continua sendo a fração de "antes"
   visível a partir da borda esquerda. Acompanha o input, sem transição. */
[data-resultados-enhanced] .caso__lado--depois img {
  clip-path: inset(0 0 0 calc(var(--pos) * 1%));
}

/* Labels acima das duas fotografias, sempre visíveis em qualquer posição. */
[data-resultados-enhanced] .caso__label {
  position: absolute;
  z-index: 3;
  bottom: var(--s-16);
  margin-top: 0;
  padding: var(--s-4) var(--s-12);
  color: var(--c-sobre-carvao);
  background: rgba(36, 40, 37, 0.55);
  border-radius: var(--r-8);
}
[data-resultados-enhanced] .caso__lado--antes .caso__label { left: var(--s-16); }
[data-resultados-enhanced] .caso__lado--depois .caso__label { right: var(--s-16); }

/* Divisor: linha fina off-white atravessando o quadro na posição do range. */
[data-resultados-enhanced] .caso__midia::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 1px;
  background: var(--c-sobre-carvao);
  transform: translateX(-0.5px);
  pointer-events: none;
}

/* O range nativo cobre o quadro inteiro e fica acima de todas as camadas
   fotográficas: clique reposiciona em qualquer ponto, o arraste é nativo e as
   setas ajustam por teclado. Continua sendo o único controle real. */
.caso__controle { position: absolute; inset: 0; z-index: 4; }
.caso__controle[hidden] { display: none; }

/* Handle decorativo: centralizado verticalmente e acompanhando --pos no eixo
   horizontal. É apenas visual — não intercepta ponteiro. O thumb nativo fica
   transparente, mas preserva a área de toque de 48px. */
.caso__controle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--pos) * 1%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(36, 40, 37, 0.5);
  border: 1px solid var(--c-sobre-carvao);
  pointer-events: none;
}

.caso__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.caso__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.caso__range::-moz-range-track { background: transparent; border: 0; }

.caso__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.caso__range::-moz-range-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}

/* Troca de caso: apenas opacidade, entre 250 e 350ms. */
[data-resultados-enhanced] .caso { transition: opacity 300ms var(--ease); }
[data-resultados-enhanced] .caso[hidden] { display: none; }
[data-resultados-enhanced] .caso[data-entrando="true"] { opacity: 0; }

/* Navegação entre os cinco casos.
   Mobile: números em uma linha estável logo abaixo do quadro; Anterior e
   Próximo em uma segunda linha, em lados opostos.
   A partir de 600px: uma única linha, com os números à esquerda e os dois
   controles à direita. A ordem visual acompanha a ordem do DOM nos dois casos. */
.casos__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "tabs tabs"
    "prev next";
  align-items: center;
  gap: var(--s-12) var(--s-16);
  margin-top: clamp(var(--s-24), 3vw, var(--s-48));
}
.casos__nav[hidden] { display: none; }

.casos__tabs {
  grid-area: tabs;
  display: flex;
  gap: var(--s-4);
}
.casos__seta--prev { grid-area: prev; justify-self: start; }
.casos__seta--next { grid-area: next; justify-self: end; }

@media (min-width: 600px) {
  .casos__nav {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "tabs prev next";
  }
  .casos__seta--prev { justify-self: end; }
}


.casos__tab {
  min-width: 48px;
  min-height: 48px;
  padding: var(--s-8) var(--s-4);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--c-sobre-carvao-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.casos__tab:hover { color: var(--c-sobre-carvao); }

/* Estado ativo não depende só de cor: ganha peso e underline. */
.casos__tab[aria-selected="true"] {
  color: var(--c-sobre-carvao);
  font-weight: 500;
  border-bottom-color: var(--c-sobre-carvao);
}

.casos__seta {
  min-height: 48px;
  padding: var(--s-8) var(--s-12);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sobre-carvao-2);
  transition: color var(--t-hover) var(--ease);
}
.casos__seta:hover { color: var(--c-sobre-carvao); }

/* Dr. Fernando */
.doutor__grid { display: grid; gap: clamp(var(--s-32), 4vw, var(--s-64)); }
/* A headline está dentro de .doutor__texto e herdaria o cinza secundário.
   O grafite principal é declarado explicitamente para manter a hierarquia. */
.doutor__title { font-size: var(--fs-h2); line-height: var(--lh-snug); margin-bottom: var(--s-24); max-width: 20ch; color: var(--c-texto); }
.doutor__texto { display: grid; gap: var(--s-24); align-content: center; color: var(--c-texto-2); }
.doutor__id { color: var(--c-texto); }
.doutor__retrato img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.doutor__apoio img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 1024px) {
  /* Retrato à esquerda, texto à direita e imagem de apoio deslocada abaixo:
     seção curta e assimétrica, sem virar card biográfico. */
  .doutor__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: clamp(var(--s-48), 5vw, var(--s-96));
  }
  /* Largura definida em vez de max-width com margin-left:auto. A margem
     automática desligava o stretch do item de grid e deixava a largura
     indeterminada, fazendo a imagem transbordar a linha e invadir a seção
     seguinte. Com width explícito, altura e linha do grid resolvem certo. */
  .doutor__apoio {
    grid-column: 1 / -1;
    justify-self: end;
    width: 58%;
    margin-top: clamp(var(--s-24), 3vw, var(--s-64));
  }
}

/* Localização */
.localizacao__grid { display: grid; gap: clamp(var(--s-32), 4vw, var(--s-64)); }
.localizacao__title { font-size: var(--fs-h2); line-height: var(--lh-snug); margin-bottom: var(--s-24); max-width: 16ch; }
.localizacao__endereco { font-size: var(--fs-lead); margin-bottom: var(--s-32); }
.localizacao__cta { justify-self: start; }
.localizacao__mapa-link { display: block; border-radius: var(--r-8); }
.localizacao__mapa-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-8); }
.localizacao__mapa-secundario {
  display: inline-block;
  margin-top: var(--s-16);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-sobre-pedra-2);
}

@media (min-width: 1024px) {
  .localizacao__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-64); align-items: center; }
  .localizacao__texto { align-self: center; }
}

/* FAQ — base acessível; o accordion vale apenas com enhancement */
.faq__grid { display: grid; gap: clamp(var(--s-32), 4vw, var(--s-64)); }
.faq__title { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.faq__lista { display: grid; }

.faq__item { border-top: 1px solid var(--c-hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--c-hairline); }

.faq__pergunta-wrap { margin: 0; }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  width: 100%;
  min-height: 44px;
  padding: var(--s-24) 0;
  text-align: left;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  transition: color var(--t-hover) var(--ease);
}
.faq__pergunta:hover { color: var(--c-acento); }

/* Indicador + / − desenhado por CSS, dirigido por aria-expanded */
.faq__ind {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.faq__ind::before,
.faq__ind::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--c-texto-2);
}
.faq__ind::after { transform: rotate(90deg); }
.faq__pergunta[aria-expanded="true"] .faq__ind::after { transform: rotate(0deg); }

.faq__painel { padding-bottom: var(--s-24); }
.faq__painel p { max-width: 62ch; color: var(--c-texto-2); }

/* Accordion apenas com enhancement. Sem JavaScript os oito painéis
   permanecem visíveis e nenhuma resposta fica inacessível. */
[data-faq-enhanced] .faq__painel {
  overflow: hidden;
  transition: height var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
[data-faq-enhanced] .faq__painel[hidden] { display: none; }

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-64); align-items: start; }
}

/* CTA final */
/* Headline dominante; texto e botão com peso contido. Sem fotografia,
   card ou efeito contínuo. */
.cta-final__inner { display: grid; gap: var(--s-24); justify-items: start; }
.cta-final__title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  line-height: var(--lh-tight);
  max-width: 18ch;
  margin-bottom: var(--s-8);
}
.cta-final__texto { color: var(--c-sobre-carvao-2); max-width: 48ch; }
.cta-final__cta { margin-top: var(--s-16); }

@media (min-width: 1024px) { .cta-final__title { max-width: 20ch; } }

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--c-canvas);
  border-top: 1px solid var(--c-hairline);
  padding-block: clamp(var(--s-48), 6vw, var(--s-80));
}

.site-footer__grid { display: grid; gap: var(--s-32); }
.site-footer__grupo { display: grid; gap: var(--s-4); align-content: start; }
.site-footer__nome { font-weight: 500; }
.site-footer__crm,
.site-footer__grupo p { color: var(--c-texto-2); font-size: var(--fs-small); }
.site-footer__nome { font-size: var(--fs-body); color: var(--c-texto); }

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}

/* -------------------------------------------------------------------------
   12. CTA flutuante
   ------------------------------------------------------------------------- */

.cta-flutuante {
  position: fixed;
  right: var(--s-24);
  bottom: calc(var(--s-24) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-12) var(--s-24);
  border-radius: var(--r-8);
  background: var(--c-texto);
  color: var(--c-canvas);
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), background-color var(--t-hover) var(--ease);
}
.cta-flutuante[hidden] { display: none; }
.cta-flutuante[data-visivel="true"] { opacity: 1; transform: translateY(0); }
.cta-flutuante:hover { background: var(--c-acento); }

@media (min-width: 1024px) {
  .cta-flutuante { right: var(--s-32); bottom: var(--s-32); min-height: 52px; padding: var(--s-16) var(--s-32); font-size: var(--fs-body); }
}

/* -------------------------------------------------------------------------
   13. Página de Política de Privacidade
   ------------------------------------------------------------------------- */

.site-header--reduzido { position: static; border-bottom: 1px solid var(--c-hairline); }
.site-header--reduzido .site-header__inner { min-height: 64px; }

.legal { padding-block: clamp(var(--s-48), 6vw, var(--s-96)); }
.legal__coluna > * { max-width: 68ch; }
.legal__title { font-size: var(--fs-h2); line-height: var(--lh-snug); margin-bottom: var(--s-12); }
.legal__data { color: var(--c-texto-2); font-size: var(--fs-small); margin-bottom: var(--s-32); }

.legal__aviso {
  padding: var(--s-16) var(--s-24);
  border-left: 2px solid var(--c-acento);
  background: var(--c-superficie);
  font-weight: 500;
  margin-bottom: var(--s-32);
}

.legal__coluna h2 { font-size: var(--fs-h3); font-weight: 500; margin-top: var(--s-48); margin-bottom: var(--s-16); }
.legal__coluna p { margin-bottom: var(--s-16); color: var(--c-texto-2); }
.legal__coluna ul { display: grid; gap: var(--s-8); margin-bottom: var(--s-16); color: var(--c-texto-2); }
.legal__coluna li { padding-left: var(--s-16); position: relative; }
.legal__coluna li::before { content: "—"; position: absolute; left: 0; color: var(--c-hairline); }
.legal__voltar { margin-top: var(--s-48); }

/* -------------------------------------------------------------------------
   14. Enhancement e reduced motion
   ------------------------------------------------------------------------- */

/* Sem JavaScript o CTA flutuante nunca aparece: o atributo hidden permanece,
   e o CTA persistente do Header nunca é ocultado.

   Fallback do menu: sem JS o painel não pode ser aberto, então a navegação e o
   CTA aparecem direto no Header, e o botão "Menu" é removido. Nenhuma âncora
   fica inalcançável se o script falhar. */
html:not([data-js="on"]) .site-header__menu-btn { display: none; }

html:not([data-js="on"]) .site-header__inner {
  flex-wrap: wrap;
  row-gap: var(--s-12);
  padding-block: var(--s-12);
}

html:not([data-js="on"]) .site-nav {
  display: block;
  order: 3;
  width: 100%;
}

html:not([data-js="on"]) .site-nav__list {
  flex-wrap: wrap;
  gap: var(--s-16);
}

html:not([data-js="on"]) .site-header__cta {
  display: inline-flex;
  min-height: 44px;
  padding-inline: var(--s-24);
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cta-flutuante { transform: none; }
}

/* -------------------------------------------------------------------------
   15. Motion editorial — revelação única

   Todo o estado oculto depende de data-motion="on" no elemento raiz, marca que
   só é aplicada pelo módulo de revelação depois de validar os elementos. Sem
   JavaScript, sem IntersectionObserver, com o módulo em falha ou com
   prefers-reduced-motion ativo, nenhuma regra desta seção se aplica e o
   conteúdo permanece integralmente no estado final.

   Somente opacidade e transform: a entrada não desloca vizinhos, não altera o
   layout final e não produz CLS. Sem parallax, bounce, glow, blur, escala ou
   zoom automático em fotografia.
   ------------------------------------------------------------------------- */

html[data-motion="on"] [data-reveal] {
  transition: opacity var(--t-editorial) var(--ease),
              transform var(--t-editorial) var(--ease);
}

html[data-motion="on"] [data-reveal="pendente"] {
  opacity: 0;
  transform: translateY(14px);
}

/* Rede de segurança: se a preferência mudar antes de o módulo reagir, nada
   pode permanecer invisível nem por um frame. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"] [data-reveal="pendente"] {
    opacity: 1;
    transform: none;
  }
}