/* ==========================================================================
   ODONTO SPECIAL TERESINA — LANDING PAGE
   CSS vanilla, mobile-first, sem framework.
   Identidade: manual de marca Odonto Special (teal #17B3B2 + grafite #363432).
   Tokens e justificativas: docs/design-tokens.md
   ========================================================================== */

/* === DESIGN TOKENS === */
:root {
  /* MARCA — valores literais do manual */
  --brand-teal:       #17B3B2;   /* Pantone 1837. Decorativo. Não carrega texto. */
  --brand-graphite:   #363432;   /* Pantone Black 7 CP */
  --brand-yellow:     #E2E738;   /* Pantone 3955C. Uso restrito, ver tokens doc. */

  /* ESCADA DE TEAL — derivada por limiar de contraste */
  --teal-cta:         #0E7A79;   /* branco sobre ele: 5.15 (AA) */
  --teal-deep:        #0A6463;   /* 6.96 sobre branco. Hover e texto de apoio. */
  --teal-soft:        #5FCFCE;   /* 6.67 sobre grafite. Texto em fundo escuro. */
  --teal-wash:        #E8F4F4;
  --teal-tint:        #F4FAFA;

  /* TEXTO */
  --text-primary:     #363432;   /* 12.40 sobre branco */
  --text-secondary:   #5A5754;   /*  7.18 */
  --text-muted:       #7A7671;   /*  4.51 (AA) */
  --text-on-dark:     #F2F4F4;
  --text-accent:      #0A6463;

  /* FUNDOS */
  --bg-primary:       #FFFFFF;
  --bg-tint:          #F4FAFA;
  --bg-wash:          #E8F4F4;
  --bg-dark:          #363432;
  --bg-darker:        #232220;
  --bg-card:          #FFFFFF;

  /* BORDAS */
  --border-light:     #E4EDED;
  --border-teal:      rgba(23,179,178,0.35);
  --border-subtle:    rgba(54,52,50,0.10);

  /* CTA */
  --cta-bg:           var(--teal-cta);
  --cta-bg-hover:     var(--teal-deep);
  --cta-text:         #FFFFFF;
  --cta-shadow:       0 6px 22px rgba(14,122,121,0.26);
  --cta-shadow-hover: 0 10px 30px rgba(10,100,99,0.34);

  /* TIPOGRAFIA — BRAND_FONT_FILE_PENDING (manual pede Gotham) */
  --font-display:     'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:        'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-eyebrow:       0.8125rem;
  --fs-body:          clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --fs-h1:            clamp(2.15rem, 1.55rem + 2.6vw, 4.05rem);
  --fs-h2:            clamp(1.75rem, 1.35rem + 1.7vw, 2.85rem);

  /* ESPAÇO */
  --space-xs:         0.5rem;
  --space-sm:         1rem;
  --space-md:         1.5rem;
  --space-lg:         2.5rem;
  --space-xl:         4rem;
  --space-2xl:        6rem;
  --space-section:    clamp(3.5rem, 7vw, 7rem);
  --container-max:    1200px;
  --container-narrow: 780px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* RAIO — sistema redondo, acompanha o traço do símbolo */
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        22px;
  --radius-xl:        32px;
  --radius-pill:      999px;

  /* SOMBRA */
  --shadow-soft:      0 2px 18px rgba(54,52,50,0.07);
  --shadow-medium:    0 6px 28px rgba(54,52,50,0.11);
  --shadow-card:      0 14px 46px rgba(54,52,50,0.13);

  /* MOVIMENTO */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    180ms;
  --duration-normal:  380ms;

  /* MÉTRICA DA NAVBAR — usada pelo hero para calcular altura útil */
  --navbar-h:         64px;
}

@media (min-width: 900px) {
  :root { --navbar-h: 84px; }
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--navbar-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, select, textarea { font: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--teal-cta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* === UTILITÁRIOS === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 0.75rem 1.25rem;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-display);
  font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

/* Arco de marca: quarto-de-círculo do manual, usado como elemento de fundo. */
.brand-arc {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-teal);
  pointer-events: none;
  z-index: 0;
}

/* === BOTÃO === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  box-shadow: var(--cta-shadow);
  transition:
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform  var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--cta-bg-hover); box-shadow: var(--cta-shadow-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon { width: 20px; height: 20px; flex: none; }

.btn--lg   { padding: 1.1rem 2.2rem; min-height: 58px; font-size: 1.0625rem; }
.btn--sm   { padding: 0.55rem 1.1rem; min-height: 42px; font-size: 0.75rem; letter-spacing: 0.04em; gap: 0.45rem; }
.btn--sm .btn__icon { width: 17px; height: 17px; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

/* Estado de topo: só um véu, sem barra. A foto do hero sangra até a borda
   superior sem uma faixa translúcida cortando a composição. */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(244, 250, 250, 0.94) 0%,
    rgba(244, 250, 250, 0.66) 58%,
    rgba(244, 250, 250, 0) 100%);
  transition: opacity var(--duration-normal) var(--ease-out);
}

.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--border-light);
  box-shadow: 0 1px 16px rgba(54, 52, 50, 0.08);
}
.navbar.is-scrolled::before { opacity: 0; }

.navbar__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.navbar__left { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }

/* Reserva do logo (manual p.4: mínimo 20% da largura do logo ao redor).
   Logo renderizado a 28px de altura = ~66px de largura -> reserva mínima 13px.
   O padding lateral do container (>=20px) e o gap do flex superam isso. */
/* Padding vertical leva o alvo de toque a 44px sem mudar o tamanho aparente
   do logo nem comer a reserva de marca. */
.navbar__logo { display: flex; align-items: center; flex: none; padding-block: 8px; }
.navbar__logo-img { height: 28px; width: auto; }

.navbar__right { display: flex; align-items: center; gap: var(--space-sm); }

.navbar__local {
  display: none;
  position: relative;
  padding-left: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Sem `text-transform`: a copy escreve "Invisalign em TERESINA-PI" em caixa
     mista de propósito. Forçar maiúsculas mudaria o texto que o leitor vê. */
  color: var(--text-muted);
  white-space: nowrap;
}
.navbar__local::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: var(--border-teal);
}
.navbar__local strong { color: var(--text-accent); font-weight: 700; }

/* O rótulo do CTA é o da copy aprovada, inteiro, em toda largura de tela.
   Abaixo de 600px ele cabe reduzindo corpo e respiro — encurtar para "AGENDAR"
   seria reescrever a copy. */
.navbar .btn--sm {
  font-size: 0.6875rem;
  padding-inline: 0.9rem;
  gap: 0.35rem;
}
.navbar .btn--sm .btn__icon { width: 15px; height: 15px; }

@media (min-width: 600px) {
  .navbar__logo-img { height: 32px; }
  .navbar .btn--sm { font-size: 0.75rem; padding-inline: 1.1rem; gap: 0.45rem; }
  .navbar .btn--sm .btn__icon { width: 17px; height: 17px; }
}

@media (min-width: 760px) {
  .navbar__local { display: block; }
}

@media (min-width: 900px) {
  .navbar__logo-img { height: 36px; }
  .navbar__right { gap: var(--space-md); }
}

/* ==========================================================================
   HERO
   Mobile: copy primeiro, foto em faixa full-bleed abaixo.
   Desktop (>=900): split assimétrico, foto sangrando na borda direita.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: var(--navbar-h);
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg-primary) 100%);
  overflow: clip;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.hero__content {
  padding: clamp(1.75rem, 6vw, 3rem) var(--container-padding) clamp(1.5rem, 5vw, 2.5rem);
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  /* Mesma razão da navbar: a caixa vem da copy, não do CSS. */
  color: var(--text-accent);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-md);
}

.hero__headline {
  font-size: var(--fs-h1);
  letter-spacing: -0.022em;
  color: var(--text-primary);
  max-width: 15ch;
}

/* O "DE VERDADE" da copy é o pico da headline: recebe a cor de marca legível
   e um sublinhado teal, sem virar outra fonte nem outro peso.
   `nowrap` mantém a expressão inteira numa linha só — quebrada ao meio, o
   sublinhado partia em dois e o pico da headline se perdia. */
.hero__headline em {
  font-style: normal;
  white-space: nowrap;
  color: var(--teal-deep);
  background-image: linear-gradient(var(--brand-teal), var(--brand-teal));
  background-repeat: no-repeat;
  background-size: 100% 0.14em;
  background-position: 0 92%;
  padding-bottom: 0.04em;
}

.hero__sub {
  margin-top: var(--space-md);
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
}

.hero .btn--lg { margin-top: var(--space-lg); }

.hero__micro {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.hero__micro span { white-space: nowrap; }

/* --- Mídia --- */
/* Sem `max-height` aqui: combinado com `aspect-ratio`, ele encolhia a LARGURA
   da faixa (em 360px a foto ficava com 317px e abria sobra branca à direita).
   A proporção sozinha resolve, e o corte da faixa fica com a altura da tela. */
.hero__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-wash);
}
/* A imagem é posicionada em absoluto para que o tamanho intrínseco do arquivo
   nunca dite a altura do slot. Sem isso, no desktop a foto (1000x1361) forçava
   a linha do grid a 1021px e estourava o `min-height: 100svh` do hero. */
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Véu: costura a base da foto com o fundo da seção seguinte no mobile
   e a borda esquerda com a coluna de copy no desktop. */
.hero__media-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, 0.85) 100%);
}

/* --- Arco de marca ---
   Citação do quarto-de-círculo que o manual usa no canto das páginas.
   Opacidade baixa de propósito: é textura de fundo, não um elemento a ser
   lido. Acima de 0.06 ele vira uma bolha solta e disputa com a headline. */
.brand-arc--hero {
  width: 78vw;
  height: 78vw;
  max-width: 420px;
  max-height: 420px;
  top: calc(var(--navbar-h) - 48vw);
  right: -36vw;
  opacity: 0.06;
}

/* ---------- CELULAR ESTREITO ---------- */
@media (max-width: 400px) {
  /* Em 360px o rótulo do CTA quebrava em duas linhas e o botão ia a 76px. */
  .btn--lg { font-size: 1rem; padding-inline: 1.5rem; }
}

/* ---------- TABLET ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__content { padding-bottom: var(--space-lg); }

  /* A foto de origem é vertical. Em faixa larga de 768px ela precisaria de um
     corte panorâmico que descarta ou o rosto ou o alinhador — as duas coisas
     que a imagem existe para mostrar. Em vez de forçar, o retrato vira um
     bloco contido e centrado. O slot continua sendo o mesmo elemento. */
  /* AJUSTE DE INTEGRAÇÃO (slice 3) — o respiro abaixo da foto era
     `margin-bottom` na figura. `.hero` usa `overflow: clip`, que no Chromium
     NÃO estabelece um BFC, e a seção não tem padding inferior: a margem
     escapava da caixa da seção e abria 64px entre `.hero` e a seção seguinte.
     Invisível enquanto o hero era o último elemento e enquanto a faixa de baixo
     era branca; passaria a ser um corte de fundo visível na primeira seção
     tingida que viesse depois. O mesmo respiro agora é `padding-bottom` da
     seção. Resultado visual idêntico, medida correta. */
  .hero { padding-bottom: var(--space-xl); }

  .hero__media {
    width: min(400px, 58vw);
    margin-inline: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .hero__media img { object-position: 50% 12%; }
  .hero__media-veil { display: none; }

  .brand-arc--hero { max-width: 380px; max-height: 380px; right: -14vw; top: -6vw; }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 900px) {
  .hero {
    padding-top: 0;
    background: var(--bg-tint);
  }

  .hero__inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
    min-height: 100svh;
  }

  .hero__content {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* `flex-start` é obrigatório: com o `stretch` padrão, a pílula do eyebrow e
       o botão do CTA esticavam até a largura inteira da coluna (546px). */
    align-items: flex-start;
    padding: calc(var(--navbar-h) + var(--space-lg)) var(--space-xl) var(--space-xl)
             max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
    z-index: 2;
  }

  .hero__headline { max-width: 13ch; }
  .hero__sub { max-width: 40ch; }

  .hero__media {
    grid-column: 2;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
    min-height: 0;
    /* Avança sob a coluna de copy: o véu resolve a emenda. */
    margin-left: -4rem;
    width: calc(100% + 4rem);
    background: var(--bg-wash);
  }
  .hero__media img { object-position: 50% 16%; }

  /* Só o suficiente para dissolver a emenda com a coluna de copy. Alcance maior
     lavava o terço esquerdo da foto e apagava o ombro da profissional. */
  .hero__media-veil {
    background: linear-gradient(90deg,
      var(--bg-tint) 0%,
      rgba(244, 250, 250, 0.70) 13%,
      rgba(244, 250, 250, 0) 36%);
  }

  .brand-arc--hero {
    width: 620px; height: 620px;
    max-width: none; max-height: none;
    top: -240px;
    left: -260px;
    right: auto;
    opacity: 0.07;
  }
}

@media (min-width: 1280px) {
  .hero__media { margin-left: -5.5rem; width: calc(100% + 5.5rem); }
}

/* ==========================================================================
   PARA QUEM O INVISALIGN É IDEAL?
   Primeira seção depois do hero. Fundo branco: o hero termina em `--bg-tint`
   (desktop) ou no véu branco da foto (mobile), então o branco aqui é o degrau
   tonal que fecha a promessa e abre o aprofundamento, sem trocar a paleta.

   Esta seção e "A solução" usam o `.container` padrão (1200px) porque ele cai
   exatamente na coluna de texto do hero: em >=900px o recuo do `.hero__content`
   resolve para `(100vw - 1200) / 2 + padding`, o mesmo x onde o container
   começa. Estreitar as faixas desalinharia a headline do hero da headline
   seguinte. A medida de leitura é controlada dentro de cada bloco, não pela
   largura da faixa.
   ========================================================================== */
.perfil {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-primary);
}

.perfil__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.perfil__titulo {
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  /* Sem `text-transform`: a copy aprovada já está em caixa alta. Forçar aqui
     esconderia uma eventual mudança de caixa na fonte de verdade. */
  max-width: 20ch;
}

/* Régua de marca: o único uso de `--brand-teal` puro nesta seção — elemento
   gráfico, nunca texto (ver escada de teal em docs/design-tokens.md). */
.perfil__regua {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--brand-teal);
}

.perfil__grid {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  display: grid;
  gap: clamp(0.875rem, 2.2vw, 1.5rem);
}

/* Card leve: preenchimento tingido sobre a seção branca e fio de 1px. Sem
   sombra — quatro cartões com sombra viram quatro caixas flutuando e a seção
   perde o respiro que a composição de referência tem aqui. */
.perfil__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(0.85rem, 3vw, 1.25rem);
  padding: clamp(1.15rem, 4vw, 1.65rem) clamp(1.15rem, 4vw, 1.75rem);
  background: var(--bg-tint);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
/* Realce de hover puramente decorativo: nenhum conteúdo depende dele. */
@media (hover: hover) {
  .perfil__card:hover { border-color: var(--border-teal); background: var(--bg-wash); }
}

/* Numeração editorial. A hierarquia vem de escala + matiz, não de peso extra:
   o número é grande e teal escuro, a frase é menor e grafite. O teal usado é
   `--text-accent` (#0A6463) porque aqui ele é texto: 6.60 sobre o fundo tingido
   do card, medido por `tests/layout_qa.py`. */
.perfil__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
  /* Alinha a base do número com a primeira linha da frase em vez de com o topo
     da caixa — sem isso o número flutua acima do texto em telas estreitas. */
  margin-top: -0.06em;
}

.perfil__texto {
  font-size: clamp(0.9688rem, 0.93rem + 0.18vw, 1.0625rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-primary);
}

/* Duas colunas a partir de 760px. Não é estética: em coluna única a partir daí
   a frase do card chega a ~75 caracteres por linha, longe demais para um bloco
   de quatro linhas. Divididas, as metades ficam entre ~30 e ~47 caracteres. */
@media (min-width: 760px) {
  .perfil__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .perfil__card { padding: 1.9rem 2rem; }
}

/* ==========================================================================
   A SOLUÇÃO
   Faixa tingida depois do branco: o alternado tint -> branco -> tint dá o ritmo
   da página sem introduzir cor nova. Texto primeiro em toda largura de tela.
   ========================================================================== */
.solucao {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section);
  background: var(--bg-tint);
  overflow: clip;
}

.solucao__inner {
  position: relative;
  z-index: 1;
}

/* Mesma pílula do `.hero__eyebrow`. Duplicada de propósito: unificar as duas
   num seletor comum exigiria reescrever uma regra do Slice 1, e o Slice 2 não
   toca no que já foi aprovado. Quando o Slice 3 pedir a terceira, vira token. */
.solucao__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
}

.solucao__masthead {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
}

.solucao__titulo {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 17ch;
}

.solucao__corpo {
  max-width: 58ch;
  color: var(--text-secondary);
  line-height: 1.7;
}

.solucao__beneficios {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid;
  gap: clamp(0.75rem, 2vw, 1rem);
}

/* Cartões brancos sobre a faixa tingida: separam os quatro atributos do
   parágrafo corrido e dão quatro pontos de parada para a leitura em diagonal. */
.solucao__beneficio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.75rem;
  padding: clamp(0.9rem, 3vw, 1.15rem) clamp(1rem, 3.5vw, 1.35rem);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.solucao__beneficio p {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0313rem);
  line-height: 1.5;
  color: var(--text-secondary);
}
.solucao__beneficio strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

/* Ícone decorativo (aria-hidden): a informação inteira está no texto. Mesmo
   assim usa `--teal-cta` (5.15) e não o teal puro, para não depender da
   isenção de contraste de elemento decorativo. */
.solucao__marca {
  width: 22px;
  height: 22px;
  color: var(--teal-cta);
  /* Centra o ícone na primeira linha do texto ao lado. */
  margin-top: 0.12em;
}

/* Mídia da solução: componente da seção, não banner. Largura travada em 560px
   no desktop — a versão anterior ocupava a faixa inteira e lia como uma seção
   nova. Proporção 3:2 fixa em toda largura, e o fundo preto da própria
   fotografia é o que separa a imagem do fundo claro da seção: nenhum card,
   nenhuma borda, só o raio e uma sombra fraca. */
.solucao__media {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-darker);
  box-shadow: var(--shadow-medium);
}
.solucao__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arco de marca, o mesmo elemento do hero, no canto oposto: repete o vocabulário
   gráfico para a página ler como um sistema, não como blocos empilhados. */
.brand-arc--solucao {
  width: 70vw;
  height: 70vw;
  max-width: 460px;
  max-height: 460px;
  right: -30vw;
  bottom: -22vw;
  opacity: 0.05;
}

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

@media (min-width: 900px) {
  /* Headline à esquerda, parágrafo à direita, os dois começando na mesma linha.
     O `padding-top` no parágrafo é alinhamento óptico: iguala a primeira linha
     de corpo com a primeira linha da headline, que tem corpo muito maior. */
  .solucao__masthead {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .solucao__corpo { padding-top: 0.55rem; }

  .brand-arc--solucao {
    width: 560px; height: 560px;
    max-width: none; max-height: none;
    right: -180px; bottom: -200px;
    opacity: 0.06;
  }
}

/* ==========================================================================
   COMPONENTE — CTA de texto
   Botão que se comporta como link: para CTAs que vivem dentro de um card, onde
   uma pílula sólida competiria com o CTA principal da página.
   É <button>, e não <a>, porque a ação é abrir o modal de conversão — o mesmo
   mecanismo do hero e da navbar, sem destino próprio.
   ========================================================================== */
.btn-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: var(--border-teal);
  text-underline-offset: 0.32em;
  text-decoration-thickness: 2px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-texto:hover { color: var(--teal-deep); text-decoration-color: var(--brand-teal); }
.btn-texto__seta { width: 17px; height: 17px; }

/* ==========================================================================
   AUTORIDADE
   Faixa escura: maior contraste tonal da paleta, sem cor nova. É a virada da
   página entre "o que é o tratamento" e "como funciona na prática".
   ========================================================================== */
.autoridade {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: clip;
}

.autoridade__inner { position: relative; z-index: 1; }

.autoridade__provas {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.autoridade__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  /* `--teal-soft` é o degrau da escada feito para fundo escuro: 6.67 sobre
     `--bg-dark`. O teal do manual sobre grafite não chegaria a 4.5. */
  color: var(--teal-soft);
  text-wrap: balance;
}

/* Sem `opacity` no elemento: ela alteraria a cor efetiva sem aparecer em
   `getComputedStyle().color`, e o contraste medido passaria a mentir. A
   hierarquia entre prova e detalhe já vem do corpo e do peso. */
.autoridade__detalhe {
  margin-top: var(--space-xs);
  max-width: 42ch;
  color: var(--text-on-dark);
  line-height: 1.55;
}

/* Slot do selo — EMERALD_SEAL_ASSET_PENDING. `hidden` não ocupa espaço. */
.autoridade__selo {
  margin: var(--space-md) 0 0;
  max-width: 180px;
}

.brand-arc--autoridade {
  width: 70vw;
  height: 70vw;
  max-width: 520px;
  max-height: 520px;
  top: -26vw;
  right: -30vw;
  opacity: 0.13;
}

@media (min-width: 760px) {
  .autoridade__provas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (min-width: 900px) {
  .brand-arc--autoridade {
    width: 620px; height: 620px;
    max-width: none; max-height: none;
    top: -260px; right: -200px;
  }
}

/* ==========================================================================
   PASSO A PASSO
   Timeline de três etapas. Vertical no mobile, horizontal a partir de 900px.
   O conector é desenhado por item (o `::after` de todo item que não é o último)
   e não como uma régua única atrás da lista: assim ele começa e termina no
   centro de cada marcador, sem depender de medida fixa.
   ========================================================================== */
.passos {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-primary);
  /* Lidos pelo conector e pelo grid. */
  --passo-gap: 2.25rem;
  --passo-marcador: 52px;
}

.passos__cabecalho { text-align: center; }

.passos__titulo {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 22ch;
  margin-inline: auto;
}

.passos__lista {
  list-style: none;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  display: grid;
}

.passos__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--passo-marcador) minmax(0, 1fr);
  column-gap: clamp(1rem, 3.5vw, 1.5rem);
  padding-bottom: var(--passo-gap);
}
.passos__item:last-child { padding-bottom: 0; }

/* Conector vertical: do fim do marcador até o marcador do item seguinte. */
.passos__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--passo-marcador);
  bottom: 0;
  left: calc(var(--passo-marcador) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--border-teal), var(--border-light));
}

.passos__num {
  display: grid;
  place-items: center;
  width: var(--passo-marcador);
  height: var(--passo-marcador);
  border-radius: var(--radius-pill);
  background: var(--bg-wash);
  border: 1px solid var(--border-teal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

.passos__etapa {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  /* Centra o título na altura do marcador ao lado. */
  padding-top: calc((var(--passo-marcador) - 1.35em) / 2);
}

.passos__texto {
  margin-top: var(--space-xs);
  max-width: 52ch;
  color: var(--text-secondary);
  line-height: 1.6;
}

.passos__conteudo .btn-texto { margin-top: var(--space-xs); }

@media (min-width: 900px) {
  .passos { --passo-gap: clamp(1.5rem, 3vw, 2.5rem); }

  .passos__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--passo-gap);
  }

  .passos__item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-bottom: 0;
  }

  /* Conector horizontal, do marcador deste item ao do próximo. As colunas são
     iguais, então o centro do marcador seguinte fica a `100% + gap` daqui —
     daí o `-50%` no `right`. */
  .passos__item:not(:last-child)::after {
    top: calc(var(--passo-marcador) / 2 - 1px);
    bottom: auto;
    left: calc(50% + var(--passo-marcador) / 2 + 0.75rem);
    right: calc(-50% - var(--passo-gap) + var(--passo-marcador) / 2 + 0.75rem);
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--border-teal), var(--border-light));
  }

  .passos__etapa { padding-top: var(--space-md); }
  .passos__texto { margin-inline: auto; max-width: 32ch; }
}

/* ==========================================================================
   TECNOLOGIA / ITERO
   Flex, e não grid de duas colunas: enquanto o slot de mídia estiver `hidden` o
   texto recebe a linha inteira, sem coluna vazia aberta. Quando a imagem
   chegar, basta remover o `hidden` — o flex divide a linha sozinho.
   ========================================================================== */
.itero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section);
  background: var(--bg-tint);
  overflow: clip;
}

.itero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* A base de `30rem` mantém o texto em linha própria no mobile e o deixa dividir
   a linha com a mídia a partir do ponto em que os dois cabem lado a lado. */
.itero__texto { flex: 1 1 min(100%, 30rem); }

.itero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
}

.itero__titulo {
  margin-top: var(--space-md);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 20ch;
}
/* O itálico vem do markdown da copy (`*antes*`) e é mantido como itálico. */
.itero__titulo em { font-style: italic; color: var(--text-accent); }

.itero__corpo {
  margin-top: var(--space-md);
  max-width: 62ch;
  color: var(--text-secondary);
  line-height: 1.7;
}
.itero__corpo em { font-style: italic; color: var(--text-accent); font-weight: 500; }

/* `--text-muted` foi calibrado sobre branco (4.51) e cai para 4.27 sobre a
   faixa `--bg-tint` desta seção. A nota usa `--text-secondary`: a hierarquia
   dela vem do corpo menor, não de uma cor que reprova em contraste. */
.itero__nota {
  margin-top: var(--space-md);
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* O iTero tem transparência. A base clara, o halo e a sombra o integram à
   seção como peça editorial, sem transformá-lo em um PNG solto. */
.itero__media {
  flex: 1 1 min(100%, 22rem);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 4 / 5;
  min-height: 25rem;
  overflow: hidden;
  border: 1px solid rgba(23, 179, 178, 0.16);
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 58% 32%, rgba(119, 213, 211, 0.28), transparent 31%),
    linear-gradient(145deg, #ffffff 0%, #e8f6f5 100%);
  box-shadow: 0 1.25rem 3rem rgba(25, 69, 72, 0.11);
}
.itero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(23, 179, 178, 0.10);
  transform: translate(8%, -4%);
}
.itero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 10%;
  width: 68%;
  height: 8%;
  border-radius: 50%;
  background: rgba(36, 68, 69, 0.16);
  filter: blur(0.7rem);
}
.itero__media img {
  position: relative;
  z-index: 1;
  width: min(100%, 29rem);
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1rem 0.8rem rgba(25, 69, 72, 0.14));
}

.brand-arc--itero {
  width: 70vw;
  height: 70vw;
  max-width: 440px;
  max-height: 440px;
  left: -32vw;
  bottom: -24vw;
  opacity: 0.05;
}

@media (min-width: 900px) {
  .brand-arc--itero {
    width: 540px; height: 540px;
    max-width: none; max-height: none;
    left: -220px; bottom: -220px;
    opacity: 0.06;
  }
}

/* ==========================================================================
   QUEM TE ATENDE
   Duas fotografias pequenas + texto humano + credencial da clínica. Voltada a
   humanizar, não a virar galeria: as fotos ficam contidas e o texto domina.
   ========================================================================== */
.equipe {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-primary);
}

.equipe__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Par de retratos. Duas colunas em qualquer largura: lado a lado eles leem
   como "equipe"; empilhados virariam duas fotos avulsas. */
.equipe__midia {
  flex: 1 1 min(100%, 22rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  align-items: start;
}

.equipe__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-wash);
  box-shadow: var(--shadow-medium);
}
.equipe__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Deslocamento do segundo retrato: quebra o alinhamento de contact sheet sem
   custo de layout, porque o `margin-top` vive dentro da própria coluna. */
.equipe__foto--deslocada { margin-top: clamp(1.25rem, 4vw, 2.5rem); }

.equipe__texto { flex: 1 1 min(100%, 26rem); }

.equipe__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
}

.equipe__titulo {
  margin-top: var(--space-md);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
/* O itálico é o da copy (`*é a nossa equipe.*`) e continua itálico. */
.equipe__titulo em { font-style: italic; color: var(--text-accent); }

.equipe__corpo {
  margin-top: var(--space-md);
  max-width: 54ch;
  color: var(--text-secondary);
  line-height: 1.7;
}

.equipe__assinatura {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.equipe__assinatura strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}
.equipe__assinatura span { color: var(--text-secondary); }

/* ==========================================================================
   FAQ
   Conteúdo, não mosaico: linhas divisórias, sem card e sem sombra.
   <details>/<summary> nativo — teclado, foco e estado de expansão vêm do
   navegador, sem JavaScript e sem ARIA manual.
   ========================================================================== */
.faq {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-tint);
}

.faq__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.faq__titulo {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.faq__titulo em { font-style: italic; color: var(--text-accent); }

.faq__lista {
  border-top: 1px solid var(--border-light);
}

.faq__item { border-bottom: 1px solid var(--border-light); }

.faq__pergunta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: clamp(1rem, 3vw, 1.25rem) 0;
  min-height: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9688rem, 0.93rem + 0.2vw, 1.0625rem);
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;              /* Firefox */
  transition: color var(--duration-fast) var(--ease-out);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--text-accent); }

/* O foco vem do <summary>, que já é focável por padrão. O outline global do
   :focus-visible se aplica sem nada a mais. */

/* Sinal de estado próprio, já que o marcador nativo foi removido. É "+" que
   vira "−" por rotação — a informação de aberto/fechado continua exposta pelo
   próprio <details>, então isto é só a parte visual. */
.faq__pergunta::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--text-accent), var(--text-accent)) center/100% 2px no-repeat,
    linear-gradient(var(--text-accent), var(--text-accent)) center/2px 100% no-repeat;
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq__item[open] .faq__pergunta::after { transform: rotate(45deg); }

.faq__resposta { padding: 0 0 clamp(1.1rem, 3vw, 1.4rem); }
.faq__resposta p {
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (min-width: 900px) {
  /* Título em uma coluna, perguntas na outra. O título acompanha a rolagem
     porque a lista é bem mais alta que ele; o `top` desconta a navbar fixa. */
  .faq__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .faq__cabecalho {
    position: sticky;
    top: calc(var(--navbar-h) + var(--space-lg));
  }
  .faq__resposta { padding-right: var(--space-lg); }
}

/* ==========================================================================
   VARIANTES DE BOTÃO — SLICE 5
   ========================================================================== */

/* Sobre `--bg-dark`, o `--teal-cta` do botão padrão fica a ~1.5 de contraste
   com o fundo: o botão continua legível por dentro, mas some da faixa. Esta
   variante usa `--teal-soft`, o degrau da escada feito para fundo escuro, com
   texto grafite por cima (6.67). Mesma família de matiz, nenhuma cor nova. */
.btn--claro {
  background: var(--teal-soft);
  color: var(--brand-graphite);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.btn--claro:hover {
  background: #7ADAD9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.btn--bloco { width: 100%; }

/* ==========================================================================
   CTA DE FECHAMENTO
   ========================================================================== */
.fechamento {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: clip;
}

.fechamento__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fechamento__titulo {
  font-size: var(--fs-h1);
  letter-spacing: -0.022em;
  color: var(--text-on-dark);
  max-width: 16ch;
}
.fechamento__titulo em { font-style: italic; color: var(--teal-soft); }

.fechamento__sub {
  margin-top: var(--space-md);
  max-width: 46ch;
  color: var(--text-on-dark);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
}

.fechamento .btn--lg { margin-top: var(--space-lg); }

.fechamento__micro {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--teal-soft);
}

.brand-arc--fechamento {
  width: 78vw;
  height: 78vw;
  max-width: 520px;
  max-height: 520px;
  top: -30vw;
  left: -28vw;
  opacity: 0.12;
}
@media (min-width: 900px) {
  .brand-arc--fechamento {
    width: 640px; height: 640px;
    max-width: none; max-height: none;
    top: -280px; left: -220px;
  }
}

/* ==========================================================================
   LOCALIZAÇÃO
   ========================================================================== */
.local {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-primary);
}

.local__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.local__texto { flex: 1 1 min(100%, 24rem); }

.local__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
}

.local__titulo {
  margin-top: var(--space-md);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.local__titulo em { font-style: italic; color: var(--text-accent); }

.local__dados {
  margin-top: var(--space-lg);
  font-style: normal;                /* <address> vem em itálico por padrão */
  color: var(--text-secondary);
  line-height: 1.7;
}
.local__nome {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

.local__horario {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  line-height: 1.7;
}
.local__horario span { display: block; }

.local__texto .btn-texto { margin-top: var(--space-md); }

/* Coluna visual: fachada e mapa empilhados. */
.local__visual {
  flex: 1 1 min(100%, 20rem);
  display: grid;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  /* Teto de 420px renderizados. A fachada tem 510px de origem — é tudo que o
     cliente enviou (IMAGE_RESOLUTION_INSUFFICIENT). Acima disso a imagem passa
     a ser ampliada, e ampliar não cria detalhe que não foi fotografado. */
  max-width: 420px;
}

.local__mapa {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--bg-wash);
}
.local__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 900px) {
  .local__visual { margin-left: auto; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.rodape {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  /* Espaço extra embaixo para o botão flutuante nunca repousar sobre a última
     linha de texto quando a página está no fim. */
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 4.5rem);
  background: var(--bg-darker);
  color: var(--text-on-dark);
}

.rodape__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.rodape__logo { height: 34px; width: auto; }

.rodape__linhas p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-on-dark);
}

.rodape__legal {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(242, 244, 244, 0.14);
  width: 100%;
  font-size: 0.8125rem;
  color: var(--text-on-dark);
}

@media (min-width: 760px) {
  .rodape { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
}

/* Uma regra de classe com `display` vence o `[hidden] { display: none }` da
   folha do navegador, que é seletor de atributo — e o atributo simplesmente
   para de esconder. Foi o que aconteceu com `.zap { display: grid }`: o botão
   flutuante nascia visível sobre o hero apesar do `hidden` no HTML.
   Esta linha devolve a garantia para o documento inteiro. */
[hidden] { display: none !important; }

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.zap {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 90;                       /* abaixo da navbar (100) */
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--cta-shadow);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.zap:hover { background: var(--cta-bg-hover); transform: translateY(-2px); box-shadow: var(--cta-shadow-hover); }
.zap__icon { width: 28px; height: 28px; }

/* ==========================================================================
   MODAL DE CONVERSÃO
   <dialog> aberto por showModal(): prisão de foco, ESC, fundo inerte e retorno
   de foco ao elemento que abriu vêm do navegador. O CSS abaixo é só aparência.
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  box-sizing: border-box;
  display: none;
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: clamp(0.875rem, 4vw, 2rem);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  overflow: auto;
}
.modal[open] {
  display: grid;
  place-items: center;
}
.modal::backdrop {
  background: rgba(35, 34, 32, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal__caixa {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 520px);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  box-shadow: 0 30px 80px rgba(35, 34, 32, 0.35);
}

.modal__fechar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.modal__fechar:hover { background: var(--bg-wash); color: var(--text-primary); }
.modal__fechar svg { width: 20px; height: 20px; }

.modal__titulo {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem);
  letter-spacing: -0.02em;
  padding-right: 2.5rem;
}

.modal__sub {
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.modal__form { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }

.campo { display: grid; gap: 0.4rem; border: 0; padding: 0; min-width: 0; }

.campo__rotulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  padding: 0;
}

.campo__entrada {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;                   /* < 16px faz o iOS dar zoom no foco */
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.campo__entrada::placeholder { color: var(--text-muted); }
.campo__entrada:focus-visible { border-color: var(--teal-cta); }
.campo__entrada[aria-invalid="true"] { border-color: #B3261E; }

.campo__opcoes { display: grid; gap: 0.4rem; }

.opcao {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.opcao:hover { border-color: var(--border-teal); }
.opcao input { width: 18px; height: 18px; flex: none; accent-color: var(--teal-cta); }
.opcao:has(input:checked) { border-color: var(--teal-cta); background: var(--bg-tint); color: var(--text-primary); }

/* Mensagem de erro: vazia não ocupa linha, e some do fluxo por completo. */
.campo__erro:empty { display: none; }
.campo__erro {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #B3261E;
}

.modal__nota {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-tint);
  border: 1px solid var(--border-teal);
  font-size: 0.875rem;
  color: var(--text-accent);
  font-weight: 500;
}

/* --- Sucesso --- */
.modal__conteudo--sucesso { text-align: center; padding-block: var(--space-md); }

.modal__marca-ok {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--bg-wash);
  color: var(--teal-cta);
}
.modal__marca-ok svg { width: 30px; height: 30px; }

.modal__sucesso {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.modal__conteudo--sucesso .btn { margin-top: var(--space-lg); }
.modal__conteudo--sucesso .btn:disabled {
  background: var(--border-light);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   HERO MOBILE — VISUAL PASS 01
   A foto deixa de ser uma faixa depois da copy e passa a ser camada da própria
   composição. Três decisões carregam isso:

   1. o hero ocupa a tela inteira e vira coluna flex; a foto é o item elástico,
      então ela toma a altura que sobra em vez de impor a sua;
   2. margem negativa encaixa a foto POR BAIXO do fim da copy — a sobreposição
      cai na parte do gradiente de máscara que já está transparente, então nada
      de texto fica sobre pixel opaco;
   3. a máscara é um radial ancorado na profissional: a imagem nasce do fundo,
      fica sólida onde ela está e volta a sumir nas bordas. Sem retângulo, sem
      raio, sem sombra, sem borda — não é card.
   ========================================================================== */
@media (max-width: 599px) {
  .hero {
    display: flex;
    min-height: 100svh;
    padding-bottom: 0;
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* z-index acima da foto: a copy é o que precisa ser lido primeiro. */
  .hero__content {
    position: relative;
    z-index: 2;
    flex: none;
    padding-bottom: 0;
  }

  .hero__media {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    /* Piso de altura para a profissional entrar na primeira dobra mesmo em
       telas curtas, onde a copy sozinha quase preenche a tela. */
    min-height: 46svh;
    aspect-ratio: auto;
    width: 100%;
    margin-top: -2.75rem;
    background: none;
    box-shadow: none;
    border-radius: 0;

    /* Desvanecimento vertical: some no topo, onde a foto passa por baixo do fim
       da copy, e some de novo embaixo, onde o hero encontra a seção seguinte. */
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%, rgba(0, 0, 0, 0.14) 11%, #000 29%, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg,
        transparent 0%, rgba(0, 0, 0, 0.14) 11%, #000 29%, #000 84%, transparent 100%);
  }

  /* Desvanecimento horizontal numa CAMADA SEPARADA. Dois eixos numa máscara só
     exigiriam `mask-composite`, que ainda não é universal; duas máscaras em
     elementos aninhados são compostas pela própria renderização e funcionam em
     qualquer navegador que entenda `mask-image`.
     Só a borda esquerda dissolve: é onde ficam a luminária e a parede. A
     direita sangra inteira, porque é onde a profissional está — cortá-la com
     gradiente deixaria o braço dela desaparecendo no meio do nada. */
  .hero__media picture {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%, rgba(0, 0, 0, 0.22) 9%, #000 32%, #000 100%);
            mask-image: linear-gradient(90deg,
        transparent 0%, rgba(0, 0, 0, 0.22) 9%, #000 32%, #000 100%);
  }

  /* Enquadramento: mais pessoa, menos consultório. O deslocamento horizontal
     leva a profissional para o centro-direita e deixa a borda esquerda, que é
     onde a máscara mais dissolve, com o fundo da sala em vez do rosto. */
  .hero__media img { object-position: 64% 3%; }

  /* O véu existia para costurar a base da faixa com a seção seguinte. A
     máscara já faz isso, e melhor: dissolve nos quatro lados, não só embaixo. */
  .hero__media-veil { display: none; }
}

/* ==========================================================================
   VISUAL PASS 01 — sobrescritas pontuais
   Cada bloco abaixo corrige a INTEGRAÇÃO de uma imagem. Nenhuma copy,
   tipografia, paleta ou hierarquia foi tocada.
   ========================================================================== */

/* --- A SOLUÇÃO: de banner para visual de produto -------------------------
   A imagem passa a apoiar a seção em vez de fechá-la com peso de faixa.
   Continua centrada, mas numa medida que não compete com a grade de
   benefícios logo acima. */
.solucao__media {
  max-width: min(76%, 300px);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 900px) {
  .solucao__media { max-width: 440px; }
}

/* --- QUEM TE ATENDE: três retratos ---------------------------------------
   Mobile: duas em cima, a terceira centrada embaixo com a MESMA largura das
   outras — `grid-column: 1 / -1` sozinho deixaria a terceira com o dobro da
   largura e a transformaria na principal, que é exatamente o que não pode
   acontecer. Daí o cálculo que devolve a largura de uma coluna. */
.equipe__midia {
  flex: 1 1 min(100%, 26rem);
  --equipe-gap: clamp(0.75rem, 2.5vw, 1.25rem);
  gap: var(--equipe-gap);
}

.equipe__foto:nth-child(3) {
  grid-column: 1 / -1;
  width: calc(50% - var(--equipe-gap) / 2);
  margin-inline: auto;
}

/* A partir de 900px as três dividem a linha, com larguras idênticas. */
@media (min-width: 900px) {
  .equipe__midia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipe__foto:nth-child(3) {
    grid-column: auto;
    width: auto;
    margin-inline: 0;
    /* Mesmo deslocamento do segundo retrato, em sentido oposto: ritmo de
       composição sem diferença de tamanho entre as três. */
    margin-top: clamp(0.6rem, 2vw, 1.25rem);
  }
  .equipe__texto { flex: 1 1 min(100%, 23rem); }
}

/* --- AUTORIDADE: entra a fachada -----------------------------------------
   As duas provas passam a ocupar uma coluna e a fotografia a outra. A frase
   que fechava a seção foi removida a pedido do cliente. */
.autoridade__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.autoridade__provas {
  flex: 1 1 min(100%, 24rem);
  grid-template-columns: minmax(0, 1fr);
}

/* Teto de 420px renderizados: o arquivo tem 510px de origem e é tudo que
   existe. Sem full-bleed e sem upscale. */
.autoridade__fachada {
  flex: 0 1 min(100%, 420px);
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-darker);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.autoridade__fachada img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 760px) {
  /* Anula a grade de duas colunas do Slice 3: as provas agora empilham dentro
     da própria coluna, ao lado da fotografia. */
  .autoridade__provas {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }
}

@media (min-width: 900px) {
  .autoridade__fachada { margin-left: auto; }
}

/* --- LOCALIZAÇÃO: o mapa vira o visual da seção -------------------------- */
.local__visual {
  max-width: 100%;
  /* Sem a fachada, não há pilha: o mapa é o único elemento e pode ocupar a
     coluna inteira, o que também o torna utilizável de fato. */
  display: block;
}

.local__mapa { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .local__visual { flex: 1 1 min(100%, 26rem); }
  .local__mapa { aspect-ratio: 1 / 1; }
}

/* ===========================================================================
   VISUAL PASS 02 — hero mobile e equipe
   Sobrescritas locais que substituem a exploração anterior por uma leitura
   simples: CTA e rosto em sequência; quatro profissionais no mesmo grid.
   ========================================================================== */
@media (max-width: 599px) {
  .hero {
    display: block;
    min-height: 0;
    padding-bottom: var(--space-md);
  }
  .hero__inner { display: block; }
  .hero__content {
    padding: 1.125rem var(--container-padding) 0;
  }
  .hero__eyebrow { margin-bottom: 0.75rem; }
  .hero__sub { margin-top: 0.75rem; line-height: 1.5; }
  .hero .btn--lg { margin-top: 1.125rem; }
  .hero__micro { margin-top: 0.5rem; font-size: 0.75rem; }
  .hero__media {
    width: calc(100% - (var(--container-padding) * 2));
    height: clamp(13.5rem, 56vw, 15.5rem);
    min-height: 0;
    margin: 1rem auto 0;
    border-radius: var(--radius-lg);
    background: var(--bg-wash);
    box-shadow: var(--shadow-soft);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__media picture {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__media img { object-position: 58% 12%; }
  .hero__media-veil { display: none; }
}

/* Grade 2×2 em todos os tamanhos: leitura inequívoca de equipe, sem uma foto
   central ou deslocada. A largura útil do mobile mantém cada retrato legível. */
.equipe__midia {
  flex: 1 1 min(100%, 30rem);
  --equipe-gap: clamp(0.75rem, 2.5vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--equipe-gap);
  align-items: stretch;
}
.equipe__foto,
.equipe__foto:nth-child(3) {
  width: auto;
  margin: 0;
  grid-column: auto;
  aspect-ratio: 1 / 1.12;
}
.equipe__foto--deslocada { margin-top: 0; }
.equipe__foto img { object-position: center 28%; }
@media (min-width: 900px) {
  .equipe__midia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipe__texto { flex: 1 1 min(100%, 25rem); }
}

/* HERO MOBILE — retrato no alto da composição, antes da copy. */
@media (max-width: 599px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
  }
  .hero__media {
    order: 1;
    height: clamp(11.75rem, 52vw, 14rem);
    margin: 0.75rem auto 0;
  }
  .hero__content {
    order: 2;
    padding-top: 1rem;
  }
  .hero__media img { object-position: 58% 10%; }
}