/* ==========================================================================
   Ex Alto, sistema de conversão para clínicas de estética
   Segue o design system da Ex Alto: marfim, verde da marca, dourado como joia
   (filetes, números de destaque), Inter com tracking negativo nos títulos e
   uma única palavra em Cormorant itálico por página. Temas claro e escuro.
   Movimento: curvas fortes, durações curtas; só transform, opacity e
   clip-path/stroke; cada animação tem um motivo (ver comentários).
   ========================================================================== */

/* --- Fontes (hospedadas no site, subconjunto latino) --------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
}

/* --- Tokens do design system (tema claro) ------------------------------- */
:root {
  color-scheme: light;

  --surface: #FAF8F3;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2EEE4;
  --line: #E4DED0;
  --control-line: #8C948F;      /* bordas de campos: 3:1 sobre surface-raised */
  --ink: #0F1F18;
  --ink-muted: #56615B;
  --verde: #134E3A;
  --verde-hover: #0E3D2D;
  --verde-soft: #E3EEE8;
  --on-verde: #FFFFFF;
  --on-verde-muted: rgba(255, 255, 255, 0.8);
  --dourado: #B08D4C;
  --dourado-ink: #7A5C24;
  --dourado-soft: #F4ECDC;
  --danger: #B3261E;
  --nav-bg: rgba(250, 248, 243, 0.8);

  --shadow-soft: 0 1px 2px rgba(15, 31, 24, 0.04), 0 8px 24px rgba(15, 31, 24, 0.06);
  --shadow-float: 0 1px 2px rgba(15, 31, 24, 0.05), 0 24px 48px -12px rgba(15, 31, 24, 0.18);

  /* WhatsApp (claro) */
  --wa-topo: #008069;
  --wa-topo-ink: #FFFFFF;
  --wa-fundo: #EFEAE2;
  --wa-ponto: rgba(84, 101, 111, 0.09);
  --wa-entrada: #D9FDD3;
  --wa-saida: #FFFFFF;
  --wa-ink: #111B21;
  --wa-meta: #667781;
  --wa-dia: #FFFFFF;
  --wa-campo: #FFFFFF;
  --wa-tique: #8696A0;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --wa: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shell: min(1120px, 100% - 3rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  interpolate-size: allow-keywords;
}

/* --- Tema escuro: verde quase preto, verde e dourado clareados ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0E1512;
    --surface-raised: #17221D;
    --surface-sunken: #0A0F0D;
    --line: #26332C;
    --control-line: #6F7A74;
    --ink: #F3EFE6;
    --ink-muted: #A3ADA7;
    --verde: #6CC49C;
    --verde-hover: #85D2AE;
    --verde-soft: #12281F;
    --on-verde: #07130E;
    --on-verde-muted: rgba(7, 19, 14, 0.78);
    --dourado: #C9A55E;
    --dourado-ink: #D9B872;
    --dourado-soft: #2A2416;
    --danger: #F2B8B5;
    --nav-bg: rgba(14, 21, 18, 0.78);
    --shadow-soft: none;
    --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
    --wa-topo: #202C33;
    --wa-topo-ink: #E9EDEF;
    --wa-fundo: #0B141A;
    --wa-ponto: rgba(233, 237, 239, 0.05);
    --wa-entrada: #005C4B;
    --wa-saida: #202C33;
    --wa-ink: #E9EDEF;
    --wa-meta: #8696A0;
    --wa-dia: #182229;
    --wa-campo: #2A3942;
    --wa-tique: #8696A0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0E1512;
  --surface-raised: #17221D;
  --surface-sunken: #0A0F0D;
  --line: #26332C;
  --control-line: #6F7A74;
  --ink: #F3EFE6;
  --ink-muted: #A3ADA7;
  --verde: #6CC49C;
  --verde-hover: #85D2AE;
  --verde-soft: #12281F;
  --on-verde: #07130E;
  --on-verde-muted: rgba(7, 19, 14, 0.78);
  --dourado: #C9A55E;
  --dourado-ink: #D9B872;
  --dourado-soft: #2A2416;
  --danger: #F2B8B5;
  --nav-bg: rgba(14, 21, 18, 0.78);
  --shadow-soft: none;
  --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
  --wa-topo: #202C33;
  --wa-topo-ink: #E9EDEF;
  --wa-fundo: #0B141A;
  --wa-ponto: rgba(233, 237, 239, 0.05);
  --wa-entrada: #005C4B;
  --wa-saida: #202C33;
  --wa-ink: #E9EDEF;
  --wa-meta: #8696A0;
  --wa-dia: #182229;
  --wa-campo: #2A3942;
  --wa-tique: #8696A0;
}

@media (max-width: 640px) {
  :root { --shell: calc(100% - 2 * var(--space-4)); --space-24: 64px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--verde);
  scrollbar-color: var(--control-line) var(--surface);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/26px var(--sans);   /* body do design system */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Superfícies do navegador também seguem a marca */
::selection { background: var(--verde-soft); color: var(--ink); }
input, select, textarea { caret-color: var(--verde); }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.14; letter-spacing: -0.025em; } /* title-1 */
h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }                      /* headline */

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
strong { font-weight: 600; }

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

button, .btn, .btn-mini, summary, .barra-cta, .nav a {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.shell { width: var(--shell); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 200;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink);
}
.skip:focus { top: var(--space-4); }

/* Eyebrow do design system: caixa alta, espaçada, dourado legível.
   Usada em no máximo 3 seções da página. */
.eyebrow {
  margin-bottom: var(--space-3);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dourado-ink);
}

/* Acento editorial: uma palavra por página, em Cormorant itálico */
.acento {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.14em; letter-spacing: 0; color: var(--verde);
}

/* --- Botões ------------------------------------------------------------- */
/* Pill, altura mínima 44px. Toque: encolhe 3%. Cor: ease. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 16px/1.2 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--cheio { width: 100%; }
.btn--verde { background: var(--verde); color: var(--on-verde); }
.btn--contorno { border-color: var(--control-line); color: var(--ink); background: transparent; }

.btn__rotulo { transition: filter 200ms ease, opacity 200ms ease; }
.btn__rotulo.is-trocando { filter: blur(2px); opacity: 0; }

.btn-mini {
  padding: 6px 14px; border: 1px solid var(--control-line); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font: 600 13px/18px var(--sans); cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out);
}
.btn-mini:active { transform: scale(0.96); }
.btn-mini.is-oculto { opacity: 0; visibility: hidden; transition: opacity 150ms var(--ease-out), visibility 0s linear 150ms; }

@media (hover: hover) and (pointer: fine) {
  .btn--verde:hover { background: var(--verde-hover); }
  .btn--contorno:hover { background: var(--surface-sunken); }
  .btn-mini:hover { background: var(--surface-sunken); }
}

/* --- Navegação: material translúcido sobre o conteúdo ------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo { background: var(--surface); }
}
.topo__barra { position: relative; display: flex; align-items: center; gap: var(--space-8); min-height: 64px; }

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 19px/1 var(--sans); letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.marca__simbolo { width: 26px; height: 16px; flex: none; color: var(--verde); } /* proporção da logo: 452 × 282 */

.nav { display: flex; gap: var(--space-6); margin-left: auto; }
.nav a { font-size: 15px; color: var(--ink-muted); text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); }
}

.topo__menu { display: none; }

@media (max-width: 860px) {
  .topo__barra { gap: var(--space-3); }
  .topo__cta { margin-left: auto; }
  /* As duas linhas viram um X. Linhas = 2º e 3º filho (o 1º é o texto "Menu"). */
  .topo__menu {
    display: grid; place-content: center; gap: 6px; flex: none;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--line); border-radius: 50%;
    color: var(--ink); cursor: pointer;
    transition: transform 160ms var(--ease-out);
  }
  .topo__menu:active { transform: scale(0.94); }
  .topo__menu-linha {
    display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform 200ms var(--ease-in-out);
  }
  .topo__menu[aria-expanded="true"] .topo__menu-linha:nth-child(2) { transform: translateY(3.75px) rotate(45deg); }
  .topo__menu[aria-expanded="true"] .topo__menu-linha:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }

  /* Painel sólido que nasce do botão e some mais rápido do que aparece */
  .nav {
    position: absolute; top: calc(100% + var(--space-2)); right: 0;
    width: min(17rem, 100%); margin: 0;
    flex-direction: column; gap: 0; padding: var(--space-2);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    transform-origin: top right;
    opacity: 0; transform: translateY(-6px) scale(0.97);
    visibility: hidden; pointer-events: none;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  .nav.is-aberto {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  .nav a { padding: var(--space-3) var(--space-4); font-size: 17px; color: var(--ink); border-radius: var(--radius-md); }
  .nav a:active { background: var(--surface-sunken); }
}
@media (max-width: 520px) {
  .topo__cta { display: none; }
  .topo__menu { margin-left: auto; }
}

/* --- Hero --------------------------------------------------------------- */
/* Título em largura total; embaixo, texto e ação à esquerda e o WhatsApp à
   direita. O aviso de agendamento chega na coluna da esquerda. */
.hero { padding: var(--space-12) 0 var(--space-24); }
.hero h1 {
  font-size: clamp(40px, 5.2vw, 64px); line-height: 1.07; letter-spacing: -0.03em; /* display */
}

.hero__grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 318px;
  grid-template-areas: "texto celular" "aviso celular" "rodape celular";
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-12);
}
.hero__texto { grid-area: texto; }
.hero__sub { max-width: 30em; margin-top: var(--space-6); font-size: 21px; line-height: 31px; letter-spacing: -0.01em; color: var(--ink-muted); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.vitrine { display: contents; }
.celular { grid-area: celular; }
.aviso { grid-area: aviso; align-self: end; }
.vitrine__rodape { grid-area: rodape; }

.vitrine__rodape {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted);
}

/* Aviso: cartão elevado com o resultado da conversa */
.aviso {
  display: flex; align-items: center; gap: var(--space-4); max-width: 26rem;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.aviso strong { display: block; font-size: 17px; line-height: 24px; }
.aviso small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.aviso__icone {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--verde); color: var(--on-verde);
}
.aviso__icone svg { width: 22px; height: 22px; }

/* --- Celular com WhatsApp ----------------------------------------------- */
.celular {
  position: relative; margin: 0; width: 318px; padding: 10px; border-radius: 52px;
  background: linear-gradient(150deg, #4A504D 0%, #1C1F1E 45%, #101211 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 1px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(15, 31, 24, 0.35),
    0 40px 80px -30px rgba(15, 31, 24, 0.45);
}
.celular__tela {
  display: flex; flex-direction: column; height: 736px; overflow: hidden;
  border-radius: 42px; background: var(--wa-fundo); color: var(--wa-ink);
  font-family: var(--wa); line-height: 1.3; letter-spacing: 0;
}

.wa-sistema {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 22px 0 26px; background: var(--wa-topo); color: var(--wa-topo-ink);
  font-size: 13px; font-weight: 600;
}
.wa-sistema__ilha {
  position: absolute; left: 50%; top: 9px; width: 86px; height: 24px; margin-left: -43px;
  border-radius: 999px; background: #050606;
}
.wa-sistema__icones { display: inline-flex; align-items: center; gap: 5px; }
.wa-sistema__icones svg:first-child { width: 16px; height: 11px; }
.wa-sistema__icones svg:last-child { width: 24px; height: 11px; }

.wa-topo {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px 6px;
  background: var(--wa-topo); color: var(--wa-topo-ink);
}
.wa-topo__voltar { width: 22px; height: 22px; flex: none; }
.wa-topo__avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #F4ECDC; color: #134E3A; font: 600 16px/1 var(--sans);
}
.wa-topo__nome { flex: 1; min-width: 0; }
.wa-topo__nome strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.wa-topo__nome small { display: block; font-size: 12.5px; line-height: 1.3; opacity: 0.85; }
.wa-topo__icone { width: 21px; height: 21px; flex: none; margin-left: 10px; }

.wa-fio {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  list-style: none; margin: 0; padding: 10px 10px 8px; overflow: hidden;
  background-color: var(--wa-fundo);
  background-image: radial-gradient(var(--wa-ponto) 1px, transparent 1.4px), radial-gradient(var(--wa-ponto) 1px, transparent 1.4px);
  background-size: 18px 18px, 18px 18px;
  background-position: 0 0, 9px 9px;
}
.wa-dia { align-self: center; margin-bottom: 8px; }
.wa-dia span {
  display: block; padding: 4px 10px; border-radius: 8px; background: var(--wa-dia);
  font-size: 11.5px; color: var(--wa-meta); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.wa-fio > .msg { position: relative; display: flex; }
.msg--lead { justify-content: flex-end; }
.msg--lead + .msg--clinica, .msg--clinica + .msg--lead { margin-top: 5px; }

.msg .bolha {
  position: relative; display: block; max-width: 82%;
  padding: 6px 8px 7px 9px; border-radius: 8px;
  font-size: 13.6px; line-height: 1.36; color: var(--wa-ink);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.msg .bolha::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.msg--lead .bolha { background: var(--wa-entrada); border-top-right-radius: 0; transform-origin: top right; }
.msg--lead .bolha::before { right: -8px; background: var(--wa-entrada); clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg--clinica .bolha { background: var(--wa-saida); border-top-left-radius: 0; transform-origin: top left; }
.msg--clinica .bolha::before { left: -8px; background: var(--wa-saida); clip-path: polygon(0 0, 100% 0, 100% 100%); }

.wa-meta {
  float: right; display: inline-flex; align-items: center; gap: 3px;
  margin: 7px 0 -4px 10px; font-size: 10.5px; line-height: 1; color: var(--wa-meta);
}
.wa-tique { width: 16px; height: 11px; color: var(--wa-tique); transition: color 200ms ease; }
.wa-tique.is-lido { color: #53BDEB; }

.wa-entrada { display: flex; align-items: center; gap: 6px; padding: 6px 8px 12px; background: var(--wa-fundo); }
.wa-entrada__campo {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px;
  border-radius: 999px; background: var(--wa-campo); color: var(--wa-tique);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-entrada__campo span { flex: 1; font-size: 15px; }
.wa-entrada__campo svg { width: 22px; height: 22px; }
.wa-entrada__mic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #00A884; color: #fff; }
.wa-entrada__mic svg { width: 20px; height: 20px; }

/* Sequência (só com JS): cada bolha já reserva o espaço dela e surge do
   canto do rabinho, nunca do nada */
.wa-fio.is-animando .msg .bolha {
  opacity: 0; transform: translateY(6px) scale(0.96);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.wa-fio.is-animando .msg.is-visivel .bolha {
  opacity: 1; transform: none;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}

.digitando {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 8px; border-top-left-radius: 0;
  background: var(--wa-saida); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  transform-origin: top left; opacity: 0; transform: scale(0.96);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), filter 150ms ease;
}
.digitando.is-visivel { opacity: 1; transform: none; transition-duration: 200ms; }
.digitando.is-saindo { opacity: 0; filter: blur(2px); }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-tique); animation: pisca 1s linear infinite; }
.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pisca { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* O aviso chega como uma notificação (uma vez por visita), com o visto se desenhando */
.vitrine.is-animando .aviso {
  opacity: 0; transform: translateY(10px) scale(0.97);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.vitrine.is-animando .aviso.is-visivel {
  opacity: 1; transform: none;
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.vitrine.is-animando .aviso path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.vitrine.is-animando .aviso.is-visivel path { stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--ease-out) 200ms; }

@media (max-width: 900px) {
  .hero { padding-top: var(--space-12); }
  .hero__grade {
    grid-template-columns: 1fr; grid-template-rows: auto;
    grid-template-areas: "texto" "celular" "aviso" "rodape";
    row-gap: 0;
  }
  .hero__sub { font-size: 19px; line-height: 28px; }
  .celular { justify-self: center; margin-top: var(--space-12); }
  /* O aviso sobe sobre a borda de baixo do aparelho */
  .aviso { justify-self: center; position: relative; z-index: 2; margin-top: -52px; width: min(22rem, 100%); }
  .vitrine__rodape { justify-content: center; }
}
@media (max-width: 380px) {
  .celular { width: 100%; max-width: 318px; }
}

/* --- Faixa de compromissos --------------------------------------------- */
.faixa { border-block: 1px solid var(--line); }
.faixa__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faixa__grade p {
  padding: var(--space-6) var(--space-8); font-size: 15px; line-height: 22px; color: var(--ink-muted);
}
.faixa__grade p:first-child { padding-left: 0; }
.faixa__grade p + p { border-left: 1px solid var(--line); }
.faixa__grade strong { color: var(--ink); }
@media (max-width: 760px) {
  .faixa__grade { grid-template-columns: 1fr; }
  .faixa__grade p { padding: var(--space-4) 0; }
  .faixa__grade p + p { border-left: 0; border-top: 1px solid var(--line); }
}

/* --- Seções ------------------------------------------------------------- */
.secao { padding: var(--space-24) 0; }
.secao--afundada { background: var(--surface-sunken); }
.secao--sem-topo { padding-top: 0; }
.secao__apoio { max-width: 38em; margin-top: var(--space-4); color: var(--ink-muted); }

/* Problema: título e texto empilhados; perdas em lista de duas colunas */
.problema h2 { max-width: 18em; }
.problema__texto { max-width: 38em; margin-top: var(--space-6); color: var(--ink-muted); }

.perdas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12);
  margin-top: var(--space-24);
}
.perdas h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }   /* title-2 */
.perdas__lista { list-style: none; }
.perdas__lista li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-4) 0; color: var(--ink-muted);
}
.perdas__lista li + li { border-top: 1px solid var(--line); }
.perdas__hora { font-weight: 600; color: var(--ink); }

.virada {
  margin-top: var(--space-24); padding: var(--space-12);
  background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.virada__frase { max-width: 30em; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.015em; }

.comparativo { margin-top: var(--space-12); }
.comparativo__linha {
  display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: var(--space-6);
  padding: var(--space-4) 0; font-size: 15px; line-height: 22px;
}
.comparativo__linha + .comparativo__linha { border-top: 1px solid var(--line); }
.comparativo__linha > span:first-child { font-weight: 600; }
.comparativo__linha > span:nth-child(2) { color: var(--ink-muted); }
.comparativo__linha--topo { padding-top: 0; font-size: 13px; font-weight: 600; }
.comparativo__linha--topo > span:nth-child(2) { color: var(--ink-muted); }
.comparativo__linha--topo > span:nth-child(3) { color: var(--verde); }

@media (max-width: 820px) {
  .perdas { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); }
  .perdas__lista li { grid-template-columns: 1fr; gap: var(--space-1); }
  .virada { padding: var(--space-6); margin-top: var(--space-12); }
  .virada__frase { font-size: 22px; line-height: 30px; }
  .comparativo__linha { grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4); }
  .comparativo__linha > span:first-child { grid-column: 1 / -1; }
  .comparativo__linha--topo > span:first-child { display: none; }
}

/* --- Etapas: trilha -------------------------------------------------- */
/* A linha liga os quatro pontos e se desenha uma vez quando a seção
   aparece, explicando a ordem. Sem JS, aparece completa. */
.etapas {
  --gap: var(--space-8);
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--space-12);
}
.etapas::before,
.etapas::after {
  content: ""; position: absolute; top: 7px; height: 2px; margin-top: -1px;
  left: 7px; right: calc((100% - 3 * var(--gap)) / 4 - 7px);
}
.etapas::before { background: var(--line); }
.etapas::after { background: var(--verde); clip-path: inset(0 0 0 0); }
.etapas.is-pendente::after { clip-path: inset(0 100% 0 0); }
.etapas.is-desenhando::after { transition: clip-path 1200ms linear; }

.etapa__ponto {
  position: relative; z-index: 1; display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 4px var(--surface-sunken);
  transition: background-color 250ms ease, box-shadow 250ms ease, transform 250ms var(--ease-out);
}
.etapas.is-pendente .etapa__ponto {
  background: var(--surface-sunken); transform: scale(0.85);
  box-shadow: 0 0 0 4px var(--surface-sunken), inset 0 0 0 2px var(--control-line);
}
.etapas.is-desenhando .etapa:nth-child(2) .etapa__ponto { transition-delay: 400ms; }
.etapas.is-desenhando .etapa:nth-child(3) .etapa__ponto { transition-delay: 800ms; }
.etapas.is-desenhando .etapa:nth-child(4) .etapa__ponto { transition-delay: 1200ms; }

.etapa h3 { margin-top: var(--space-6); font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }
.etapa > p { margin-top: var(--space-2); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.etapa > .etapa__resumo { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.etapa > .etapa__ganho {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line);
  font-weight: 600; color: var(--verde);
}

@media (max-width: 960px) {
  .etapas { grid-template-columns: 1fr 1fr; row-gap: var(--space-12); }
  .etapas::before, .etapas::after { display: none; }
  .etapas.is-desenhando .etapa:nth-child(2) .etapa__ponto { transition-delay: 60ms; }
  .etapas.is-desenhando .etapa:nth-child(3) .etapa__ponto { transition-delay: 120ms; }
  .etapas.is-desenhando .etapa:nth-child(4) .etapa__ponto { transition-delay: 180ms; }
}
@media (max-width: 560px) {
  .etapas { grid-template-columns: 1fr; row-gap: var(--space-8); }
}

/* --- Serviços: grade de blocos com tamanhos diferentes ----------------- */
.blocos {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4);
  margin-top: var(--space-12);
}
.bloco { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-lg); }
.bloco h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }
.bloco__desc { color: var(--ink-muted); }
.bloco__lista { list-style: none; display: grid; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.bloco__lista li { position: relative; padding-left: 26px; }
.bloco__lista li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px; border-left: 1.5px solid var(--verde); border-bottom: 1.5px solid var(--verde);
  transform: rotate(-45deg);
}
.bloco__ideal { margin-top: auto; padding-top: var(--space-4); font-size: 15px; line-height: 22px; }

/* O único bloco verde da página: o serviço que mais converte */
.bloco--verde { grid-column: span 7; grid-row: span 2; background: var(--verde); color: var(--on-verde); }
.bloco--verde .bloco__desc,
.bloco--verde .bloco__ideal { color: var(--on-verde-muted); }
.bloco--verde .bloco__ideal { border-top: 1px solid color-mix(in srgb, var(--on-verde) 20%, transparent); }
.bloco--verde .bloco__lista li::before { border-color: var(--on-verde); }
.bloco--verde h3 { font-size: 36px; line-height: 42px; letter-spacing: -0.02em; }
.bloco--verde .bloco__lista { gap: var(--space-3); font-size: 17px; line-height: 26px; }
.bloco--verde .bloco__desc { font-size: 19px; line-height: 28px; }

.bloco--branco { grid-column: span 5; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.bloco--suave { grid-column: span 5; background: var(--verde-soft); }

/* Sistema completo: selo premium sobre dourado-soft, filete dourado */
.bloco--completo {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8);
  background: var(--dourado-soft); border: 1px solid color-mix(in srgb, var(--dourado) 50%, transparent);
}
.bloco--completo .bloco__desc { max-width: 40em; margin-top: var(--space-2); }

.processo { margin-top: var(--space-24); }
.processo h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }
.processo ol {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8);
  margin-top: var(--space-6);
}
.processo li { padding-top: var(--space-4); border-top: 1px solid var(--ink); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.processo li strong { display: block; margin-bottom: var(--space-1); font-size: 17px; line-height: 24px; color: var(--ink); }

@media (max-width: 960px) {
  .bloco--verde { grid-column: 1 / -1; grid-row: auto; }
  .bloco--branco, .bloco--suave { grid-column: span 6; }
  .processo ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bloco { padding: var(--space-6); }
  .bloco--branco, .bloco--suave { grid-column: 1 / -1; }
  .bloco--completo { flex-direction: column; align-items: stretch; }
  .bloco--verde h3 { font-size: 28px; line-height: 34px; }
  .processo ol { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Simulador ---------------------------------------------------------- */
.simulador {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-12); align-items: center;
}
.simulador__aviso { max-width: 34em; margin-top: var(--space-6); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6);
  padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.calc__campo { display: grid; gap: var(--space-2); align-content: end; }
.calc__campo--largo { grid-column: 1 / -1; }
.calc label { font-size: 15px; line-height: 22px; font-weight: 500; }
.calc output { font-weight: 600; color: var(--verde); font-variant-numeric: tabular-nums; }

.calc input[type="number"],
.form input,
.form select {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--control-line); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink);
  font: 400 17px/1.3 var(--sans);            /* ≥16px: o iPhone não dá zoom */
  font-variant-numeric: tabular-nums;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.calc input[type="number"] { font-weight: 600; }
.calc input:focus-visible, .form input:focus-visible, .form select:focus-visible {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-soft), 0 0 0 1px var(--verde);
}

/* Controle deslizante: trilho preenchido; o polegar cresce enquanto é arrastado */
.calc input[type="range"] {
  --pct: 31%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--verde) var(--pct), var(--line) var(--pct));
}
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--verde); }
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 31, 24, 0.12), 0 3px 8px rgba(15, 31, 24, 0.22);
  transition: transform 160ms var(--ease-out);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 31, 24, 0.12), 0 3px 8px rgba(15, 31, 24, 0.22);
  transition: transform 160ms var(--ease-out);
}
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--verde); }
.calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--verde); }

.calc__resultado {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--space-4); align-items: stretch;
  margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line);
}
.calc__resultado > div { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); }
.calc__resultado span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.calc__resultado strong {
  display: block; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.calc__resultado number-flow { font-variant-numeric: tabular-nums; }
/* Número de destaque em dourado legível, sobre dourado-soft */
.calc__ano { padding: var(--space-4); border-radius: var(--radius-md); background: var(--dourado-soft); border: 1px solid color-mix(in srgb, var(--dourado) 50%, transparent); }
.calc__resultado .calc__ano span { color: var(--dourado-ink); }
.calc__resultado .calc__ano strong { color: var(--dourado-ink); }

@media (max-width: 900px) {
  .simulador { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .calc { grid-template-columns: 1fr; padding: var(--space-6); }
  .calc__resultado { grid-template-columns: 1fr 1fr; }
  .calc__ano { grid-column: 1 / -1; }
}

/* --- Diferenciais ------------------------------------------------------- */
.diferenciais { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12); align-items: start; }
.diferenciais h2, .duvidas h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.17; }
.difs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-12); }
.difs dt { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.difs dd { margin-top: var(--space-2); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .diferenciais { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 600px) {
  .difs { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --- Dúvidas ------------------------------------------------------------ */
.duvidas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 44px; padding: var(--space-6) 0; cursor: pointer; list-style: none;
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* Sinal de mais que vira "x" ao abrir (mudança de estado) */
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--ink-muted);
  transition: transform 200ms var(--ease-in-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-6); max-width: 38em; color: var(--ink-muted); }
.faq details::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size 200ms var(--ease-out), opacity 200ms var(--ease-out), content-visibility 200ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
@media (max-width: 900px) {
  .duvidas { grid-template-columns: 1fr; gap: var(--space-6); }
  .faq summary { font-size: 17px; line-height: 24px; padding: var(--space-4) 0; }
}

/* --- Fechamento --------------------------------------------------------- */
.fechamento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--space-12); align-items: center; }
.fechamento__itens { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.fechamento__itens li { position: relative; padding-left: 28px; }
.fechamento__itens li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 12px; height: 6px; border-left: 1.5px solid var(--verde); border-bottom: 1.5px solid var(--verde);
  transform: rotate(-45deg);
}

.form {
  display: grid; gap: var(--space-4); padding: var(--space-8);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.form__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form__campo { display: grid; gap: var(--space-2); }
.form label { font-size: 15px; line-height: 22px; font-weight: 500; }
.form input::placeholder { color: var(--ink-muted); }
.form input[aria-invalid="true"] { border-color: var(--danger); }
.form__erro { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--danger); }
.form .btn { margin-top: var(--space-2); }
.form__nota { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
.form__nota.is-erro { color: var(--danger); font-weight: 500; }

@media (max-width: 900px) {
  .fechamento { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form { padding: var(--space-6); }
  .form__duplo { grid-template-columns: 1fr; }
}

/* --- Rodapé ------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); color: var(--ink-muted); }
.rodape__grade { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); padding: var(--space-8) 0; font-size: 13px; line-height: 18px; }
.rodape__copy { margin-left: auto; }
/* Versículo: linha própria, discreta, separada por um filete */
.rodape__versiculo {
  flex-basis: 100%; padding-top: var(--space-4); border-top: 1px solid var(--line);
  font-size: 12px; line-height: 18px; font-style: italic; color: var(--ink-muted); opacity: 0.85;
}
.rodape__versiculo cite { font-style: normal; font-weight: 500; white-space: nowrap; }

/* --- Barra de CTA no celular ------------------------------------------- */
/* Sobe da borda de baixo e volta pelo mesmo caminho; sai mais rápido do que
   entra. Deslocamento em "translate" e toque em "scale", sem conflito. */
.barra-cta { display: none; }
@media (max-width: 720px) {
  .barra-cta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 60;
    min-height: 52px; border-radius: var(--radius-pill);
    background: var(--verde); color: var(--on-verde); font-weight: 600; text-decoration: none;
    box-shadow: var(--shadow-float);
    translate: 0 calc(100% + var(--space-4) + env(safe-area-inset-bottom, 0px));
    transition: translate 200ms var(--ease-out), scale 160ms var(--ease-out);
  }
  .barra-cta.is-visivel { translate: 0 0; transition: translate 300ms var(--ease-drawer), scale 160ms var(--ease-out); }
  .barra-cta:active { scale: 0.97; }
  .rodape { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Transparência reduzida -------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .topo { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- Movimento reduzido ------------------------------------------------- */
/* Menos e mais suave, não zero: ficam fades e trocas de cor; saem
   deslocamento, escala e desenho. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .btn-mini:active, .topo__menu:active { transform: none; }
  .barra-cta:active { scale: none; }
  .nav, .nav.is-aberto { transform: none; }
  .barra-cta { translate: 0 0; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .barra-cta.is-visivel { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
  .etapas.is-pendente::after, .etapas.is-desenhando::after { clip-path: inset(0 0 0 0); transition: none; }
  .etapas.is-pendente .etapa__ponto { transform: none; }
  .etapas.is-desenhando .etapa__ponto { transition-delay: 0ms !important; }
  .faq details::details-content { transition: opacity 200ms ease, content-visibility 200ms allow-discrete; }
  .faq summary::after { transition: none; }
  .calc input[type="range"]:active::-webkit-slider-thumb { transform: none; }
  .calc input[type="range"]:active::-moz-range-thumb { transform: none; }
}