/* ============================================
   DRA. ISABELA LOBO — LANDING PAGE
   Modelagem da LP de referência. Mobile-first. CSS vanilla, sem framework.
   Paleta LOUP: quase-preto + dourado + rosé sobre creme editorial.
   ============================================ */

/* === DESIGN TOKENS === */
:root {
  /* BRAND */
  --brand-primary:      #262523;
  --brand-secondary:    #B28075;
  --brand-accent:       #B78E3C;

  /* DOURADO — escada por limiar de contraste */
  --accent-gold:        #B78E3C;  /* decorativo puro: linhas, dots, bordas */
  --accent-gold-soft:   #D4B071;  /* texto/números sobre escuro      7.47 */
  --accent-gold-em:     #A87F33;  /* itálico >=24px sobre claro      3.41 */
  --accent-gold-deep:   #8C6928;  /* eyebrow, labels sobre claro     4.71 */
  --accent-gold-bg:     #F6EFDE;

  /* ROSÉ — cor de marca */
  --accent-rose:        #B28075;
  --accent-rose-soft:   #C9A08F;
  --accent-rose-deep:   #95644F;

  /* BACKGROUNDS */
  --bg-primary:         #FFFFFF;
  --bg-warm-light:      #FAF7EE;
  --bg-warm:            #F5EFDC;
  --bg-dark:            #262523;
  --bg-darker:          #171614;
  --bg-card:            #FFFFFF;
  --bg-overlay:         rgba(23,22,20,0.65);

  /* TEXT */
  --text-primary:       #262523;  /* 14.30 sobre --bg-warm-light */
  --text-secondary:     #4A4642;  /*  8.73 */
  --text-muted:         #6E6A66;  /*  5.01 */
  --text-on-dark:       #EDEEF0;  /* 13.19 / 15.58 */
  --text-accent:        #8C6928;

  /* BORDER */
  --border-light:       #E2DCCE;
  --border-warm:        #D8CDB6;
  --border-subtle:      rgba(38,37,35,0.08);
  --border-accent:      rgba(183,142,60,0.40);

  /* CTA */
  --cta-primary:        #075E54;  /* branco sobre ele: 7.67 (AAA) */
  --cta-hover:          #0A7A6C;  /* branco sobre ele: 5.23 (AA)  */
  --cta-text:           #FFFFFF;
  --cta-shadow:         0 6px 24px rgba(7,94,84,0.28);
  --cta-shadow-hover:   0 10px 32px rgba(7,94,84,0.38);
  --wa-green:           #25D366;  /* auxiliar. Nunca recebe texto branco */

  /* TIPOGRAFIA */
  --font-display:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Outfit', system-ui, -apple-system, sans-serif;

  /* SPACING */
  --space-xs:           0.5rem;
  --space-sm:           1rem;
  --space-md:           1.5rem;
  --space-lg:           2.5rem;
  --space-xl:           4rem;
  --space-2xl:          6rem;
  --space-section:      clamp(4rem, 8vw, 8rem);
  --container-max:      1200px;
  --container-narrow:   800px;
  --container-padding:  clamp(1.25rem, 4vw, 3rem);

  /* RADIUS */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-pill:        999px;

  /* SHADOW */
  --shadow-soft:        0 2px 20px rgba(38,37,35,0.08);
  --shadow-medium:      0 4px 30px rgba(38,37,35,0.12);
  --shadow-card:        0 10px 50px rgba(38,37,35,0.13);
  --shadow-float:       0 20px 60px rgba(23,22,20,0.22);

  /* MOTION */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:      200ms;
  --duration-normal:    400ms;
  --duration-slow:      600ms;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.7;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100vw;
  background: var(--bg-primary);
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; }

h1, h2, .section-title, .hero__headline { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* === CONTAINER === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* === EYEBROW === */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold-deep);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: 2.25rem;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1.75rem;
  height: 1px;
  background: var(--accent-gold);
}

/* === TYPOGRAPHY === */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  line-height: 1.12;
  color: var(--text-primary);
  letter-spacing: -0.012em;
  margin-bottom: var(--space-md);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-gold-em);
}
.section-title--center { text-align: center; }
.section-title--center::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--accent-gold);
  margin: var(--space-md) auto 0;
  opacity: 0.6;
}
.section-title--light { color: var(--text-on-dark); }
.section-title--light em { color: var(--accent-gold-soft); }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
  min-height: 44px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn__wa-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; margin-right: 0.55rem; }
.btn--whatsapp {
  background: var(--cta-primary);
  color: var(--cta-text);
  font-weight: 600;
  box-shadow: var(--cta-shadow);
}
.btn--whatsapp:hover {
  background: var(--cta-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-2px);
}
/* Sobre fundo escuro o #075E54 não delimita (2.00). O verde auxiliar contorna. */
.btn--whatsapp.btn--on-dark { border: 1.5px solid var(--wa-green); }
/* O modelo usa 40px aqui, abaixo do alvo de toque mínimo de 44px. */
.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.8125rem; min-height: 44px; }
.btn--lg { padding: 1.05rem 2.6rem; font-size: 1.0625rem; }
.btn--full { width: 100%; }

/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
/* Véu claro no topo: sem ele o texto do header some sobre a foto do hero.
   Desaparece quando a navbar ganha fundo sólido na rolagem. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(250,247,238,0.92), rgba(250,247,238,0.55) 55%, rgba(250,247,238,0));
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.navbar.is-scrolled::before { opacity: 0; }
.navbar.is-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 14px rgba(38,37,35,0.10);
}
.navbar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem var(--container-padding);
}
/* flex + min-height garantem 44px de alvo mesmo quando a logo encolhe. */
.navbar__logo { display: flex; align-items: center; min-height: 44px; }
.navbar__logo-img {
  height: 46px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.navbar__right { display: flex; align-items: center; gap: var(--space-sm); }
.navbar__proof {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  color: var(--text-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}
/* Dourado sobre a foto do hero não passa contraste; o quase-preto translúcido
   lê em qualquer fundo. Só depois do scroll o dourado entra. */
.navbar__proof span:last-child { color: rgba(38,37,35,0.72); }
.navbar.is-scrolled .navbar__proof span:last-child { color: var(--accent-gold-deep); }

/* === HERO ===
   Composição editorial assimétrica. A divisão copy/foto não é uma coluna
   contra a outra: a fotografia sangra na borda direita, invade o centro, e o
   proof rail atravessa a costura entre as duas metades unindo a composição.
   Asset: reconstrução aprovada. Ver docs/decisao-asset-hero.md. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-warm-light);
  /* Abaixo de 1024 a foto é uma faixa no topo da pilha. A tira de creme acima
     dela existe para a navbar não cair sobre a testa da Dra. Isabela. */
  padding-top: clamp(58px, 8.5vh, 78px);
}
.hero__media { position: relative; width: 100%; }
.hero__media picture { display: block; }
.hero__media img {
  width: 100%;
  /* 2026-09-17: a foto de celular passou a ser retrato, com fundo no mesmo creme
     da pagina. A proporcao bate com o arquivo, entao nao ha corte lateral. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Mobile: só a base da foto dissolve no creme, para a faixa não terminar num
   corte reto. O rosto e o sorriso ficam intocados. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(250,247,238,0)    64%,
    rgba(250,247,238,0.35) 82%,
    rgba(250,247,238,0.92) 95%,
    var(--bg-warm-light)   100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 3.5vh, 2rem) var(--container-padding) clamp(2.5rem, 7vh, 3.5rem);
}
.hero__eyebrow {
  display: inline-block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold-deep);
  margin-bottom: 0.75rem;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 7.4vw, 2.7rem);
  line-height: 1.08;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.hero__headline em { font-style: italic; font-weight: 500; color: var(--accent-gold-em); }
.hero__sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: var(--space-md);
  line-height: 1.55;
}
.hero__micro {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* === HERO PROOF RAIL ===
   Um único objeto, não três cards soltos: um contêiner translúcido escuro com
   blur, borda dourada de 1px e divisores internos. Sem sombra por célula, sem
   raio por célula. O sistema é o contêiner. */
.hero__proof-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  background: rgba(23,22,20,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(183,142,60,0.30);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hero__proof {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  padding: 0.95rem 0.7rem;
}
/* Divisor vertical entre células vizinhas da mesma linha. */
.hero__proof + .hero__proof::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(183,142,60,0.26);
}
/* Mobile: a terceira prova ocupa a linha inteira e troca o divisor vertical
   por um horizontal, conforme a direção de composição. */
.hero__proof-rail > li:nth-child(3) { grid-column: 1 / -1; }
.hero__proof-rail > li:nth-child(3)::before {
  left: 12%;
  right: 12%;
  top: 0;
  bottom: auto;
  width: auto;
  height: 1px;
}
.hero__proof-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent-gold-soft);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__proof-label {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--text-on-dark);
  opacity: 0.88;
  text-wrap: balance;
}

.hero__watermark { display: none; }

/* === RESPONSIVE: TABLET (768px) === */
@media (min-width: 768px) {
  .navbar__proof { display: flex; }
  .navbar__logo-img { height: 52px; }

  .hero__media img { aspect-ratio: 16 / 9; object-position: 50% 15%; }
  .hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-top: clamp(1.75rem, 4vh, 2.5rem);
  }
  .hero__eyebrow, .hero__headline, .hero__sub, .hero__micro { max-width: 600px; }
  .hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.16em; margin-bottom: var(--space-sm); }
  .hero__headline { font-size: clamp(2.4rem, 5.2vw, 3.2rem); margin-bottom: var(--space-md); }
  .hero__sub { font-size: 1.0625rem; line-height: 1.6; margin-bottom: var(--space-lg); }
  .hero__micro { margin-top: var(--space-md); }

  .hero__proof-rail { grid-template-columns: repeat(2, 1fr); max-width: 34rem; }
  .hero__proof-rail > li:nth-child(3) { grid-column: auto; }
  .hero__proof-rail > li:nth-child(3)::before {
    left: 0; right: auto; top: 22%; bottom: 22%; width: 1px; height: auto;
  }
  .hero__proof { padding: 1.05rem 0.85rem; }
  .hero__proof-value { font-size: 1.3125rem; }
}

/* === RESPONSIVE: DESKTOP (1024px) — COMPOSIÇÃO EDITORIAL === */
@media (min-width: 1024px) {
  .hero {
    padding-top: 0;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
  }
  /* 2026-09-17: a foto passou a ser paisagem, com a Dra. à direita e a parede
     vazia à esquerda. Por isso ela cobre a viewport inteira em vez de ocupar só
     o painel da direita — o espaço do texto já vem embutido na própria imagem. */
  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100%;
    z-index: 0;
  }
  .hero__media picture { display: block; height: 100%; }
  .hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* Ancorado à direita: quem sobra no corte é a parede vazia da esquerda,
       nunca a Dra. nem o alinhador. */
    object-position: 100% 35%;
  }
  /* Duas camadas: o fade horizontal dissolve a borda esquerda da foto no creme
     (a costura deixa de existir) e o véu escuro na base assenta o proof rail. */
  .hero__scrim {
    background:
      linear-gradient(90deg,
        var(--bg-warm-light)   0%,
        rgba(250,247,238,0.94) 9%,
        rgba(250,247,238,0.52) 21%,
        rgba(250,247,238,0.14) 31%,
        rgba(250,247,238,0)    40%),
      linear-gradient(to top,
        rgba(38,37,35,0.26) 0%,
        rgba(38,37,35,0)    32%);
  }
  .hero__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: clamp(6.5rem, 13vh, 9rem) var(--container-padding) clamp(3rem, 8vh, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero__content { max-width: 30rem; }
  .hero__eyebrow, .hero__headline, .hero__sub, .hero__micro { max-width: none; }
  .hero__eyebrow { letter-spacing: 0.2em; }
  .hero__headline { font-size: clamp(2.3rem, 4.4vw, 3rem); line-height: 1.04; }
  .hero__sub { font-size: 1.0625rem; line-height: 1.65; max-width: 27rem; }
  .hero__micro { color: var(--text-muted); }

  /* O rail começa na margem da copy e atravessa a costura, entrando na
     fotografia. É ele que costura os dois lados da composição. */
  /* Duas células desde a remoção do contador de sorrisos. A largura ainda
     atravessa a costura com a fotografia, que é a função do rail. */
  .hero__proof-rail {
    margin-top: clamp(2.5rem, 7vh, 4.5rem);
    max-width: 38rem;
  }
  .hero__proof { padding: 1.1rem 1rem; }
  .hero__proof-value { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
  .hero__proof-label { font-size: 0.5625rem; letter-spacing: 0.09em; }

  .hero__watermark {
    display: block;
    position: absolute;
    z-index: 0;
    left: -6rem;
    bottom: -8rem;
    width: clamp(24rem, 30vw, 38rem);
    height: auto;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
  }
}

/* === RESPONSIVE: 1280 === */
@media (min-width: 1280px) {
  .hero__media { left: 49%; }
  .hero__content { max-width: 34rem; }
  .hero__headline { font-size: clamp(2.8rem, 4.6vw, 3.9rem); }
  .hero__sub { max-width: 30rem; }
}

/* === RESPONSIVE: WIDE (1440px) === */
@media (min-width: 1440px) {
  .hero__media { left: 47%; }
  .hero__content { max-width: 38rem; }
  .hero__headline { font-size: 4.15rem; }
  .hero__proof-rail { max-width: 40rem; }
}

/* === MOBILE (<768px) === */
@media (max-width: 767px) {
  .navbar__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 0.4rem; }
  .navbar__logo-img { width: 132px; height: auto; }
  .navbar__right { gap: 0.45rem; }
  /* A prova cobria a logo em telas estreitas. O CTA do header vira um botão
     verde igual ao flutuante do Slice 5, então sai daqui: o CTA do hero fica
     visível logo abaixo. */
  .navbar__proof { display: none; }
  .navbar__right .btn--sm { display: none; }
}

/* ============================================
   SLICE 2 — PARA QUEM É · SOLUÇÃO · AUTORIDADE
   ============================================ */

/* === PARA QUEM É === */
.dor {
  background: var(--bg-primary);
  padding: var(--space-section) 0;
}
.dor__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.dor__card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-warm);
  border: 1px solid transparent;
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
/* É aqui que o rosé entra na página. Único ponto do Slice 2. */
.dor__card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-3px);
  border-color: rgba(178,128,117,0.35);
}
.dor__card-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent-gold);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.dor__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text-primary);
}

/* === SOLUÇÃO === */
.solucao {
  background: var(--bg-warm-light);
  padding: var(--space-section) 0;
}
.solucao__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.solucao__desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}
.solucao__list { margin-bottom: var(--space-md); }
.solucao__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}
.solucao__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 2px;
  height: 16px;
  background: var(--accent-gold);
}
.solucao__list strong { color: var(--text-primary); font-weight: 500; }
/* Imagem única de apoio. Sem par antes/depois, sem tag de caso: o asset não
   documenta resultado clínico. Delta registrado em layout.md. */
.solucao__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--bg-warm);
}
.solucao__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}
.solucao__caption {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 1rem;
  border-left: 2px solid var(--accent-gold);
}

/* === AUTORIDADE === */
.autoridade {
  background: var(--bg-darker);
  padding: var(--space-section) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.autoridade::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(183,142,60,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.autoridade .container { position: relative; z-index: 2; }
/* Um contador só, ao lado da foto do reconhecimento. */
.autoridade__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}
.autoridade__figure {
  margin: 0;
  width: min(100%, 18rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* Contorno dourado tênue: sobre o quase-preto a foto precisa de borda
     para não parecer recortada no vazio. */
  border: 1px solid rgba(183,142,60,0.28);
}
.autoridade__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.autoridade__stat { text-align: center; }
.autoridade__stat-label { max-width: 18rem; margin-left: auto; margin-right: auto; }
.autoridade__stat-figure { line-height: 1; margin: 0; }
.autoridade__stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--accent-gold-soft);
  line-height: 1;
  display: inline;
}
.autoridade__stat-plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--accent-gold-soft);
  opacity: 0.8;
}
.autoridade__stat-label {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-on-dark);
  opacity: 0.7;
}
/* === SLICE 2 — TABLET (768px) === */
@media (min-width: 768px) {
  .dor__grid { grid-template-columns: repeat(2, 1fr); }
  .autoridade__grid {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .autoridade__figure { width: clamp(15rem, 26vw, 20rem); flex: 0 0 auto; }
  .solucao__grid { flex-direction: row; align-items: center; }
  .solucao__col { flex: 1; min-width: 0; }
  .solucao__col--media { flex: 0 0 42%; }
}

/* === SLICE 2 — DESKTOP (1024px) === */
@media (min-width: 1024px) {
  .solucao__grid { gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ============================================
   SLICE 3 — PROCESSO · iTERO · QUEM TE ATENDE
   ============================================ */

/* === LINK DE AÇÃO INLINE === */
.inline-modal-link {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
  text-underline-offset: 0.2em;
  padding: 0.25rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.inline-modal-link:hover { color: var(--accent-gold-deep); }

/* === PROCESSO ===
   Respiro depois do bloco escuro da Autoridade: fundo claro, muito ar, nenhuma
   caixa. As etapas são eixo + nó + número, não cards. */
.processo {
  background: var(--bg-warm);
  padding: var(--space-section) 0;
}
/* Mobile e tablet: sequência vertical com eixo à esquerda. */
.processo__flow {
  position: relative;
  margin-top: var(--space-xl);
  padding-left: 2rem;
  /* O reset zera marcador de ul, não de ol. Sem isto o browser desenha
     "1. 2. 3." ao lado dos números editoriais 01/02/03. */
  list-style: none;
}
.processo__flow::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--border-warm);
}
.processo__step { position: relative; padding-bottom: var(--space-xl); }
.processo__step:last-child { padding-bottom: 0; }
/* Nó dourado sobre o eixo. O anel na cor do fundo abre o respiro da linha. */
.processo__step::before {
  content: '';
  position: absolute;
  left: -1.625rem;
  top: 0.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 3px solid var(--bg-warm);
  box-shadow: 0 0 0 1px var(--accent-gold);
  z-index: 2;
}
.processo__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.5rem);
  line-height: 1;
  color: var(--accent-gold);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.processo__label {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* --accent-gold-deep foi calibrado contra --bg-warm-light e dá 4.38 sobre o
     --bg-warm desta seção: reprova em texto pequeno. Um passo mais fechado
     devolve 4.85. */
  color: #856223;
  margin-bottom: 0.375rem;
}
.processo__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.processo__text { font-size: 0.9375rem; color: var(--text-secondary); max-width: 380px; }

/* === iTERO ===
   Uma fotografia dominante com uma segunda em sobreposição no desktop. Sem
   mosaico, sem card de tecnologia. */
.itero {
  background: var(--bg-warm-light);
  padding: var(--space-section) 0;
}
.itero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.itero__text { flex: 1; }
.itero__lead { color: var(--text-secondary); margin-bottom: var(--space-md); }
.itero__lead em { font-style: italic; color: var(--text-primary); }
.itero__note {
  color: var(--text-muted);
  font-size: 0.8125rem;
  border-left: 2px solid var(--accent-gold);
  padding-left: var(--space-sm);
}
.itero__gallery { position: relative; flex: 1; }
.itero__main,
.itero__aside {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--bg-warm);
}
.itero__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
/* Abaixo de 1024 a segunda imagem fica embaixo, em largura cheia: no celular
   ela precisa continuar legível, não virar miniatura. */
.itero__aside { margin-top: 0.65rem; }
/* O derivado já é 1:1 e composto (rosto + caixa): exibir quadrado significa
   zero recorte em qualquer breakpoint. Em 3:2 o mobile cortava a testa. */
.itero__aside img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }

/* === QUEM TE ATENDE === */
.sobre {
  background: var(--bg-primary);
  padding: var(--space-section) 0;
}
.sobre__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}
.sobre__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 15%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.sobre__text-col p { color: var(--text-secondary); margin-bottom: var(--space-sm); }
.sobre__signature {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-warm);
}
.sobre__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--text-primary);
}
.sobre__cro {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* === SLICE 3 — TABLET (768px) === */
@media (min-width: 768px) {
  .itero__grid { flex-direction: row; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .itero__text { flex: 0 0 42%; }

  .sobre__wrapper { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .sobre__photo-col { flex: 0 0 40%; }
  .sobre__text-col { flex: 1; min-width: 0; }
}

/* === SLICE 3 — DESKTOP (1024px) === */
@media (min-width: 1024px) {
  /* PROCESSO vira fluxo horizontal: eixo atravessa as três etapas, cada nó
     ancora um número. Divergência consciente da timeline vertical da referência,
     pedida na direção do Slice 3. */
  .processo__flow {
    --flow-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--flow-gap);
    padding-left: 0;
    margin-top: var(--space-2xl);
  }
  .processo__flow::before { display: none; }
  .processo__step { padding-bottom: 0; padding-top: 2.5rem; }
  .processo__step::before { left: 0; top: 0; }
  /* Conector até o nó seguinte. Não existe depois da última etapa. */
  .processo__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.5rem;
    right: calc(-1 * var(--flow-gap) + 0.75rem);
    top: 8px;
    height: 1px;
    background: var(--border-warm);
  }
  .processo__num { font-size: clamp(2.5rem, 3.4vw, 3.25rem); margin-bottom: 0.75rem; }
  .processo__title { font-size: 1.375rem; }

  /* iTERO: segunda imagem sobreposta, avançando sobre o vão entre as colunas.
     A galeria NÃO reserva margem para o transbordo do aside: os 48px cabem
     dentro da padding inferior da seção, e a margem só criava faixa morta. */
  .itero__gallery { margin-bottom: 0; }
  /* 4:5 dava 710px de galeria contra 380px de texto: a diferença virava vão
     vazio dos dois lados. Em 1:1 as colunas encostam e a padding volta a ler
     como padding. */
  .itero__main img { aspect-ratio: 1 / 1; object-position: 50% 42%; }
  .itero__aside {
    position: absolute;
    left: -2rem;
    bottom: -3.25rem;
    /* 50% cobria o arco 3D na tela do scanner, que é o assunto da seção.
       46% deixa o modelo visível e o inset continua com presença. */
    width: 46%;
    margin-top: 0;
    border: 6px solid var(--bg-warm-light);
    box-shadow: var(--shadow-card);
  }

  /* QUEM TE ATENDE: overlap controlado. O retrato avança sobre o card.
     `stretch` no lugar de `center`: centralizado, o retrato (618px) ficava
     100px abaixo do topo do card (819px) e deixava um vão claro à esquerda
     que se somava ao da seção anterior. */
  .sobre__wrapper { gap: 0; align-items: stretch; }
  .sobre__photo-col {
    flex: 0 0 42%;
    position: relative;
    z-index: 2;
    margin-right: -3rem;
    display: flex;
  }
  .sobre__photo { height: 100%; aspect-ratio: auto; }
  .sobre__text-col {
    background: var(--bg-warm);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl) var(--space-2xl) calc(3rem + var(--space-xl));
  }
}

/* ============================================
   SLICE 4 — FAQ · CTA FINAL · FOOTER
   Localização omitida: LOCALIZACAO_BLOCKED_BY_ADDRESS.
   ============================================ */

/* === FAQ ===
   Sem card, sem fundo, sem sombra: só a régua de 1px entre as perguntas.
   Divergência do modelo: a referência usa --bg-primary aqui, mas na nossa ordem
   o FAQ vem logo depois do Quem te atende, que também é branco. Duas seções
   brancas coladas fazem as duas paddings virarem faixa morta — o mesmo defeito
   corrigido no refino do Slice 3. O creme devolve a alternância. */
.faq {
  background: var(--bg-warm-light);
  padding: var(--space-section) 0;
}
.faq__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.faq__title { margin-bottom: 0; }
.faq__item { border-bottom: 1px solid var(--border-warm); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 1.25rem 0;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }
.faq__question:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sinal + / − em duas barras. Ao abrir, a vertical gira e some. */
.faq__icon { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--accent-gold-deep);
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after  { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
details[open] .faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq__answer { padding-bottom: 1.25rem; }
.faq__answer p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }

/* === CTA FINAL === */
.cta-final {
  background: var(--bg-dark);
  padding: var(--space-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-final::before {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(183,142,60,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Símbolo LOUP como marca d'água, discreto o bastante para não competir. */
.cta-final__watermark {
  position: absolute;
  z-index: 0;
  left: -5rem;
  bottom: -6rem;
  width: clamp(16rem, 26vw, 28rem);
  height: auto;
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.cta-final .container { position: relative; z-index: 2; }
.cta-final__headline { margin-bottom: var(--space-sm); }
.cta-final__sub {
  color: var(--text-on-dark);
  opacity: 0.88;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
}
.cta-final__micro {
  color: var(--text-on-dark);
  opacity: 0.65;
  font-size: 0.8125rem;
  margin-top: var(--space-md);
}

/* === LOCALIZAÇÃO ===
   Desbloqueada em 31/08/2026: endereço, horário e link do Google vieram do
   briefing oficial. Entre o CTA final (--bg-dark) e o footer (--bg-darker),
   o --bg-warm devolve o respiro claro sem repetir fundo em nenhum vizinho. */
.localizacao {
  background: var(--bg-warm);
  padding: var(--space-section) 0;
}
.localizacao__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.localizacao__info { flex: 1; min-width: 0; }
.localizacao__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-top: var(--space-sm);
}
.localizacao__endereco {
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 0.35rem;
}
.localizacao__hours {
  margin-top: var(--space-md);
  padding-left: 1rem;
  border-left: 2px solid var(--accent-gold);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.localizacao__cta { margin-top: var(--space-lg); }
.btn__pin-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-right: 0.55rem; }
/* Contorno em vez de sólido: o CTA de rota não pode competir com o CTA final
   verde, que é a ação principal da página. */
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-warm);
  font-weight: 500;
}
.btn--outline:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-deep);
  transform: translateY(-2px);
}
.localizacao__mapa {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--bg-warm-light);
}
.localizacao__mapa iframe {
  display: block;
  width: 100%;
  min-height: 320px;
  height: 100%;
  border: 0;
}

/* === LOCALIZAÇÃO — TABLET (768px) === */
@media (min-width: 768px) {
  .localizacao__grid {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-xl);
  }
  .localizacao__mapa iframe { min-height: 400px; }
}

/* === FOOTER === */
.footer {
  background: var(--bg-darker);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  color: var(--text-on-dark);
}
/* O derivado já tem alpha correto: sobre o #171614 não há retângulo nem halo. */
.footer__logo {
  height: 52px;
  width: auto;
  margin: 0 auto var(--space-lg);
  display: block;
  opacity: 0.95;
}
.footer__info { margin-bottom: var(--space-lg); }
.footer__info p { font-size: 0.8125rem; opacity: 0.65; line-height: 1.8; }
.footer__links {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.footer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--accent-gold-soft);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.footer__links a:hover { opacity: 1; }
.footer__bottom {
  border-top: 1px solid rgba(237,238,240,0.10);
  padding-top: var(--space-md);
}
.footer__bottom p { font-size: 0.75rem; opacity: 0.5; }

/* === SLICE 4 — MOBILE (<768px) === */
@media (max-width: 767px) {
  /* "AGENDAR AVALIAÇÃO AGORA" com o padding do .btn--lg mede 361px e estoura
     os 335px úteis do 375. Full-width com padding menor resolve sem encolher
     a fonte, e é o comportamento pedido para o CTA de fechamento no mobile. */
  .cta-final .btn--lg {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    white-space: normal;
  }
}

/* === SLICE 4 — TABLET (768px) === */
@media (min-width: 768px) {
  .faq__question { font-size: 1.125rem; }
}

/* === SLICE 4 — DESKTOP (1024px) === */
@media (min-width: 1024px) {
  .faq__grid { flex-direction: row; align-items: flex-start; gap: var(--space-xl); }
  /* O título acompanha a rolagem das perguntas. `top` folga a navbar fixa. */
  .faq__title { flex: 0 0 280px; position: sticky; top: 6rem; }
  .faq__list { flex: 1; min-width: 0; }
}

/* ============================================
   SLICE 5 — MODAL · FORM · WHATSAPP FLOAT · STICKY CTA
   ============================================ */

/* === WHATSAPP FLUTUANTE === */
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #0B3B2E;
  box-shadow: 0 8px 26px rgba(23,22,20,0.28);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(23,22,20,0.34); }
/* Abaixo de 768 a sticky bar ocupa a base: o float sobe para não cobri-la. */
@media (max-width: 767px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* === STICKY CTA MOBILE === */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.7rem var(--container-padding);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250,247,238,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 16px rgba(38,37,35,0.12);
  transform: translateY(110%);
  transition: transform var(--duration-normal) var(--ease-out);
}
.sticky-bar.is-visible { transform: translateY(0); }
/* Reserva de espaço só quando a barra está visível: evita layout shift na carga. */
body.has-sticky-bar { padding-bottom: 4.5rem; }
@media (min-width: 768px) {
  .sticky-bar { display: none; }
  body.has-sticky-bar { padding-bottom: 0; }
}

/* === MODAL === */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--bg-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 44rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  transform: translateY(12px);
  transition: transform var(--duration-normal) var(--ease-out);
}
.modal-overlay.is-open .modal-content { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.modal-close svg { width: 20px; height: 20px; }
.modal-close:hover { color: var(--text-primary); background: var(--bg-warm); }

.modal-eyebrow {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold-deep);
  margin-bottom: 0.5rem;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.modal-sub {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.modal-icon {
  width: 44px;
  height: 44px;
  color: var(--cta-primary);
  margin-bottom: var(--space-sm);
}
.modal-retry {
  display: block;
  margin: var(--space-md) auto 0;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-warm);
  text-underline-offset: 0.2em;
}
.modal-retry:hover { color: var(--text-primary); }

/* === FORM === */
.form-group { margin-bottom: var(--space-md); }
.form-fieldset { border: 0; }
.form-label {
  display: block;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  padding: 0;
}
.form-input {
  width: 100%;
  min-height: 48px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-size: 1rem; /* <16px faz o iOS dar zoom no foco */
  font-weight: 400;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(183,142,60,0.18);
}
.form-input[aria-invalid="true"] { border-color: var(--accent-rose-deep); }
.form-error {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--accent-rose-deep);
}
.form-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.form-option input { margin-top: 0.2rem; accent-color: var(--cta-primary); flex: 0 0 auto; }
.form-option:hover { border-color: var(--border-warm); background: var(--bg-warm-light); }
.form-option:has(input:checked) {
  border-color: var(--cta-primary);
  background: var(--bg-warm-light);
  color: var(--text-primary);
}
.form-option:has(input:focus-visible) {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
/* Honeypot: fora da tela, fora do fluxo, fora do tab. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Estado de envio: o botão trava e perde o afeto de hover. */
.modal-content[data-state="submitting"] #lead-submit { opacity: 0.7; pointer-events: none; }
.modal-content[data-state="submitting"] .modal-form { pointer-events: none; }

/* === MODAL — MOBILE (<768px) ===
   Sheet ancorada na base: o polegar alcança o CTA e o teclado não o cobre. */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-content {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg) var(--container-padding) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .modal-title { font-size: 1.5rem; }
}

/* Trava o scroll do fundo sem perder a posição da página. */
body.modal-open { overflow: hidden; }

/* === ACESSIBILIDADE === */
/* Primeiro Tab pula direto pro conteúdo. Invisível até receber foco. */
.pular-para-conteudo {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.pular-para-conteudo:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Números em fonte proporcional dançam quando animam. Tabulares travam a
   largura de cada dígito. A Cormorant entrega old-style por padrão, e um 01
   com zero rebaixado lê como OI: lining devolve altura de caixa alta. */
.hero__proof-value,
.dor__card-number,
.processo__num,
.autoridade__stat-number,
.autoridade__stat-plus,
[data-count],
[data-counter] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}