/* ============================================================
   Humanize SST — Landing Page v2
   Identidade: dourado #C9A24F · creme #F0EBDF · verdes #0F2118
   Type: Space Grotesk + JetBrains Mono
   Navegação alterna TOPO (padrão) / LATERAL via [data-nav] (tweak)
   ============================================================ */

:root {
  --gold: #ECC94A;
  --gold-soft: #F4DA70;
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --cream: #F0EBDF;
  --cream-deep: #E8E1D1;
  --ink: #0F2118;
  --green-dark: #142E1D;
  --forest: #1F4A2F;
  --green-mid: #2C6A42;
  --green-light: #66A06E;
  --hairline: rgba(15, 33, 24, 0.14);
  --hairline-light: rgba(240, 235, 223, 0.16);
  --nav-side-w: 280px;
  --nav-top-h: 70px;
  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--ink); }

/* ===== Fundo de gradiente animado (JS-driven — ver humanize-v2-app.js) ===== */
.bg-anim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #F0EBDF 0%, #D4C9A8 100%);
  will-change: background;
}

img { max-width: 100%; display: block; }

/* seções numeradas removidas por opção de design */

.mono-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-head {
  display: none;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 52px;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--green-mid);
  white-space: nowrap;
}
.section-head .rule { flex: 1; height: 1px; background: var(--hairline); align-self: center; }
.dark .section-head .num { color: var(--green-light); }
.dark .section-head .rule { background: var(--hairline-light); }

h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: scale(0.98); }
.btn-gold { background: var(--accent); color: var(--ink); }
.btn-gold:hover { background: var(--accent-soft); box-shadow: 0 10px 28px rgba(201,162,79,0.35); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(15,33,24,0.3); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(15,33,24,0.05); transform: translateY(-2px); }
.dark .btn-ghost { color: var(--cream); border-color: rgba(240,235,223,0.35); }
.dark .btn-ghost:hover { border-color: var(--cream); background: rgba(240,235,223,0.08); }

.btn small { font-weight: 400; opacity: 0.7; font-size: 12.5px; }

/* ============================================================
   NAVEGAÇÃO  (estrutura única, dois layouts)
   ============================================================ */

.nav {
  position: fixed;
  z-index: 60;
  background: var(--ink);
  color: var(--cream);
  display: flex;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: var(--cream);
  flex: none;
}
.nav-brand .bn {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-brand .leaf { width: 12px; height: 12px; border-radius: 12px 0 12px 0; background: var(--accent); flex: none; }
.nav-brand small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green-light);
}

.nav-links { display: flex; }
.nav-links a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: rgba(240, 235, 223, 0.6);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a .idx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(102, 160, 110, 0.75);
  font-style: normal;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a.active { color: var(--cream); }
.nav-links a.active .idx { color: var(--accent); }

.nav-foot { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-norms { display: flex; gap: 7px; }
.nav-norms span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green-light);
  border: 1px solid rgba(102, 160, 110, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- LATERAL ---------- */
[data-nav="side"] .nav {
  inset: 0 auto 0 0;
  width: var(--nav-side-w);
  flex-direction: column;
  padding: 34px 0 26px;
}
[data-nav="side"] .nav-brand { padding: 0 30px 26px; border-bottom: 1px solid var(--hairline-light); }
[data-nav="side"] .nav-links {
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 22px 0;
}
[data-nav="side"] .nav-links a { padding: 10px 30px; font-size: 14.5px; }
[data-nav="side"] .nav-links a .idx { width: 20px; flex: none; }
[data-nav="side"] .nav-links a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px; height: 22px;
  background: var(--accent);
  transition: transform 0.25s ease;
}
[data-nav="side"] .nav-links a:hover { background: rgba(240,235,223,0.04); }
[data-nav="side"] .nav-links a.active::before { transform: translateY(-50%) scaleY(1); }
[data-nav="side"] .nav-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-light);
}
[data-nav="side"] .nav-foot .nav-norms { justify-content: flex-start; }
[data-nav="side"] .nav-cta { width: 100%; font-size: 14px; padding: 13px 18px; }
[data-nav="side"] .main { margin-left: var(--nav-side-w); }

/* ---------- TOPO ---------- */
[data-nav="top"] .nav {
  inset: 0 0 auto 0;
  height: var(--nav-top-h);
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--hairline-light);
}
[data-nav="top"] .nav-brand { flex-direction: row; align-items: center; gap: 12px; }
[data-nav="top"] .nav-brand .bn { font-size: 18px; }
[data-nav="top"] .nav-brand small {
  border-left: 1px solid var(--hairline-light);
  padding-left: 12px;
  font-size: 9px;
}
[data-nav="top"] .nav-links {
  flex-direction: row;
  flex: 1;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
  scroll-padding-inline: 40px;
}
[data-nav="top"] .nav-links::-webkit-scrollbar { display: none; }
[data-nav="top"] .nav-links a {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
[data-nav="top"] .nav-links a:hover { background: rgba(240,235,223,0.06); }
[data-nav="top"] .nav-links a.active { background: rgba(240,235,223,0.08); }
[data-nav="top"] .nav-foot { gap: 12px; }
[data-nav="top"] .nav-foot .nav-norms { display: none; }
[data-nav="top"] .nav-cta { font-size: 13.5px; padding: 11px 20px; }
[data-nav="top"] .main { margin-top: var(--nav-top-h); }

@media (min-width: 1280px) {
  [data-nav="top"] .nav-foot .nav-norms { display: flex; }
}

/* hamburger só no mobile */
.nav-burger { display: none; }

/* ============================================================
   MOBILE — sempre barra superior compacta + overlay
   ============================================================ */
@media (max-width: 1024px) {
  .nav {
    inset: 0 0 auto 0 !important;
    width: auto !important;
    height: 58px !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--hairline-light);
  }
  .nav-brand { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 0 !important; border: 0 !important; }
  .nav-brand .bn { font-size: 17px !important; }
  .nav-brand small { display: none; }
  .nav-links { display: none !important; }
  .nav-foot { display: none !important; }
  .nav-burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(240,235,223,0.3);
    border-radius: 999px;
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 9px 15px;
    cursor: pointer;
  }
  .main { margin: 58px 0 0 0 !important; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--ink);
  color: var(--cream);
  padding: 84px 26px 36px;
  display: none;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--cream);
  text-decoration: none;
  font-size: 21px;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-light);
}
.mobile-menu a .idx { font-family: var(--font-mono); font-size: 11px; color: var(--green-light); }
.mobile-menu .mm-cta { margin-top: 22px; }

/* ============================================================
   LAYOUT GERAL
   ============================================================ */
section[data-section] { padding: 104px clamp(26px, 6vw, 92px); position: relative; }
.inner { max-width: 1080px; margin: 0 auto; }

.dark { background: rgba(15,33,24,0.88); color: var(--cream); }

/* ---------- 01 · Hero ---------- */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-left: clamp(55px, 4vw, 65px) !important;
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 520px at 90% -10%, rgba(102,160,110,0.14), transparent 60%);
}
.hero .inner { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head split" "foot split"; gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; z-index: 1; }
.hero-head { grid-area: head; display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; }
.hero-foot { grid-area: foot; display: flex; flex-direction: column; justify-content: flex-start; align-self: stretch; }
.hero .split { grid-area: split; }
.hero-norms-watermark {
  position: absolute;
  bottom: -0.32em;
  left: clamp(24px, 4vw, 60px);
  right: auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(60px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(15,33,24,0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero h1 { font-size: clamp(34px, 3.9vw, 56px); margin: 20px 0 22px; }
.hero h1 em { font-style: normal; color: var(--forest); background: linear-gradient(transparent 85%, rgba(201,162,79,0.42) 85%); }
.hero .sub { font-size: 18px; color: rgba(15,33,24,0.78); margin-bottom: 32px; max-width: 52ch; }
.hero-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero .btn-gold { font-size: 17px; font-weight: 700; white-space: nowrap; }

/* ── Hero text offset: centraliza o bloco de texto entre a dot-nav (esq.) e o container
      de fotos (dir.) em telas grandes, sem tocar no tamanho/posição do split.
      Fórmula: margin-left = 314px - 25vw
      ≈ 0 em 1260px · ≈ -46px em 1440px · ≈ -166px em 1920px · cap de -200px em 2240px+ ── */
@media (min-width: 1260px) {
  .hero-head,
  .hero-foot {
    margin-left: max(-200px, calc(314px - 25vw));
  }
}

/* split antes/depois — empilhado, texto na esquerda */
.split {
  --bleed: max(clamp(26px, 6vw, 92px), (100vw - 1080px) / 2);
  border-radius: 22px 0 0 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: calc(100% + var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  box-shadow: -4px 0 60px rgba(0,0,0,0.22), 0 0 0 0 transparent;
  align-self: stretch;
}
.split-half {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 260px;
  display: flex;
  align-items: center;
}
.split-half + .split-half { border-top: 1px solid rgba(255,255,255,0.08); }
/* hero: mostrar o frame 16:9 inteiro da imagem (revela o tucano no topo e o sapo embaixo) */
.hero .split-half { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
.split-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.split-overlay {
  position: relative;
  z-index: 1;
  padding: 20px 28px;
  width: 58%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.split-exposed .split-img { filter: grayscale(0.25) brightness(0.8); object-position: center 30%; }
.split-exposed .split-overlay {
  background: linear-gradient(to right, rgba(22,6,3,0.9) 0%, rgba(22,6,3,0.7) 55%, transparent 100%);
  color: #f3d9cf;
}
.split-exposed .tag { color: #e9a08a; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.split-exposed li b { color: #e9a08a; }

.split-protected .split-overlay {
  background: linear-gradient(to right, rgba(3,14,7,0.92) 0%, rgba(3,14,7,0.7) 55%, transparent 100%);
  color: var(--cream);
}
.split-protected .tag { color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.split-protected li b { color: var(--accent); }

.split-half h4 { font-size: 16px; margin: 0; font-weight: 700; }
.split-half ul { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; margin: 0; padding: 0; }
.split-half li { display: flex; gap: 8px; align-items: baseline; }
.split-half li b { font-family: var(--font-mono); font-size: 11px; flex: none; }

/* ---------- 02 · Gancho ---------- */
.hook .inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.hook .inner > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.hook h2 { font-size: clamp(30px, 3.5vw, 50px); max-width: 15ch; line-height: 1.12; }
.hook h2 em { font-style: normal; color: oklch(46% 0.20 82); }
.h1-nr-highlight { color: oklch(46% 0.20 82); font-style: normal; }
.impact-card {
  background: var(--ink);
  color: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.impact-img-wrap {
  flex: 0 0 62%;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.impact-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.impact-text-overlay {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 32px 28px;
  background: rgba(10,24,15,0.82);
}
.impact-card .q { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: #fff; margin: 0; }
.q-highlight { color: oklch(85% 0.18 88); }
.impact-card .scn { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-light); }

/* ---------- 03 · Risco + Calculadora (dark, ênfase) ---------- */
.risk { background: linear-gradient(180deg, rgba(15,33,24,0.92), rgba(20,46,29,0.92)); }
.risk .kicker { font-size: clamp(24px, 2.8vw, 36px); max-width: 20ch; margin-bottom: 20px; }
.risk .kicker em { font-style: normal; color: var(--accent); }
.risk .lead { font-size: 17px; color: rgba(240,235,223,0.8); max-width: 60ch; margin-bottom: 36px; }

.symptom-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 56px; }
.symptom {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(240,235,223,0.05);
  border: 1px solid var(--hairline-light);
  border-radius: 14px;
  padding: 18px 18px;
}
.symptom .ic { width: 30px; height: 30px; flex: none; color: var(--green-light); }
.symptom .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.symptom p { font-size: 14.5px; color: rgba(240,235,223,0.85); }

/* calculadora — card grande em destaque */
.calc-wrap { position: relative; }
.calc {
  background: var(--cream);
  color: var(--ink);
  border-radius: 26px;
  padding: clamp(30px, 4vw, 52px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.42);
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  scroll-margin-top: 90px;
}
.calc.pulse { animation: calcpulse 1.1s ease 2; }
@keyframes calcpulse {
  0%, 100% { border-color: transparent; box-shadow: 0 40px 100px rgba(0,0,0,0.42); }
  50% { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(201,162,79,0.28), 0 40px 100px rgba(0,0,0,0.42); }
}
.calc .calc-badge {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--accent); border-radius: 999px; padding: 6px 13px; display: inline-block; margin-bottom: 10px;
}
.calc h3 { font-size: clamp(22px, 2.8vw, 34px); margin: 8px 0 6px; }
.calc .calc-sub { font-size: 14px; color: rgba(15,33,24,0.62); margin-bottom: 20px; }

/* Passo 1 — slider de funcionários */
.calc-emp-row { display: flex; align-items: center; gap: 14px; }
.calc-emp-row input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; background: rgba(15,33,24,0.15); outline: none; cursor: pointer;
}
.calc-emp-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--cream);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22); cursor: pointer;
}
.calc-emp-row input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--cream); cursor: pointer;
}
.calc-emp-row input[type="number"] {
  width: 82px; flex: none;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1.5px solid var(--hairline); border-radius: 12px;
  padding: 8px 10px; text-align: center; -moz-appearance: textfield;
}
.calc-emp-row input[type="number"]::-webkit-inner-spin-button,
.calc-emp-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-emp-row input[type="number"]:focus,
.calc-emp-row input[type="range"]:focus { outline: 2px solid var(--green-mid); }

.calc-field { margin-bottom: 20px; }
.calc-field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 10px; }
.calc-emp-row input[type="number"]:focus { outline: 2px solid var(--green-mid); }

/* Checkboxes */
.calc-checks { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 22px; }
.calc-check {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border: 1.5px solid var(--hairline);
  border-radius: 14px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.calc-check:hover { border-color: var(--green-mid); background: rgba(44,106,66,0.04); }
.calc-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--forest); cursor: pointer; }
.calc-check span { font-size: 15px; line-height: 1.45; color: var(--ink); }
.calc-check span em { font-style: normal; color: var(--green-mid); font-weight: 600; }
.calc-check:has(input:checked) { border-color: var(--forest); background: rgba(31,74,47,0.06); }
.calc-error { font-size: 13px; color: #c0392b; margin-bottom: 12px; }

/* Passo 2 — resultado */
.calc-step { display: flex; flex-direction: column; }
.calc-step[hidden] { display: none; }
.calc-result-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 8px; }
.calc-big-number {
  font-size: clamp(44px, 7vw, 78px); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.calc-result-sub { font-size: 15px; color: rgba(15,33,24,0.65); margin-bottom: 24px; }

.calc-warn {
  margin-top: 26px; display: flex; gap: 12px; align-items: flex-start;
  background: rgba(201,162,79,0.12); border: 1px solid rgba(201,162,79,0.4);
  border-radius: 14px; padding: 16px 18px;
}
.calc-warn .wic { font-size: 20px; line-height: 1; flex: none; }
.calc-warn p { font-size: 14.5px; font-weight: 600; color: var(--forest); }
.calc-disclaimer { margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: rgba(15,33,24,0.5); }

.risk-transition { margin-top: 56px; text-align: center; }
.risk-transition p { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--cream); }
.risk-transition .arrow { display: inline-block; margin-top: 14px; font-size: 26px; color: var(--accent); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- 04 · Como Funciona (ícones + linha animada) ---------- */
.how { background: rgba(236,201,74,0.88); }
.how h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 12px; }
.how .how-sub { color: rgba(15,33,24,0.72); margin-bottom: 60px; max-width: 50ch; }
.how-flow { position: relative; }
.how-line { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 0; height: 108px; display: flex; align-items: center; z-index: 0; pointer-events: none; }
.how-line svg { width: 100%; height: 4px; overflow: visible; }
.how-line .track { stroke: rgba(255,255,255,0.35); stroke-width: 2; fill: none; }
.how-line .dash { stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 14 16; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce) { .how-line .dash { animation: none; } }

.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); position: relative; z-index: 1; }
.how-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-ic {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--cream); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; box-shadow: 0 10px 30px rgba(31,74,47,0.12);
}
.how-ic svg { width: 46px; height: 46px; fill: none; stroke: var(--forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.how-step .stp { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--green-mid); margin-bottom: 8px; }
.how-step h3 { font-size: 22px; margin-bottom: 10px; color: var(--forest); }
.how-step p { font-size: 15px; color: rgba(15,33,24,0.75); max-width: 26ch; }

/* ---------- 05 · Benefícios ---------- */
.benefits { background: rgba(232,225,209,0.4); }
.benefits h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 48px; }
.benefit-list { display: flex; flex-direction: column; max-width: 880px; }
.benefit {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 4px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
}
.benefit:last-child { border-bottom: 1px solid var(--hairline); }
.benefit .ck {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--forest); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.benefit .ck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.benefit strong { font-weight: 600; }

/* ---------- 06 · CTA intermediário (faixa dourada) ---------- */
.cta-gold { background: rgba(236,201,74,0.88); color: var(--ink); text-align: center; }
.cta-gold h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 28px; max-width: 22ch; margin-inline: auto; }
.cta-gold .btn { background: var(--ink); color: var(--cream); }
.cta-gold .btn:hover { background: var(--green-dark); box-shadow: 0 12px 30px rgba(15,33,24,0.3); }

/* Equipe + Incluso + FAQ: banda unificada sem costuras */
.seamless-band {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.seamless-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.seamless-band .team,
.seamless-band .incl,
.seamless-band .faq { background: transparent !important; }
html[data-theme="dark"] .seamless-band .team,
html[data-theme="dark"] .seamless-band .incl,
html[data-theme="dark"] .seamless-band .faq { background: transparent !important; }

/* ---------- 07 · Equipe ---------- */
.team h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 14px; }
.team .team-lead { color: rgba(15,33,24,0.75); max-width: 60ch; margin-bottom: 12px; }
.team .team-norms { display: flex; gap: 8px; margin-bottom: 48px; }
.team .team-norms span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--cream); background: var(--forest); border-radius: 999px; padding: 7px 15px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.team-card { display: flex; flex-direction: column; gap: 14px; }
.ph {
  border-radius: 18px;
  background: repeating-linear-gradient(-45deg, rgba(44,106,66,0.08), rgba(44,106,66,0.08) 10px, rgba(44,106,66,0.03) 10px, rgba(44,106,66,0.03) 20px);
  border: 1px dashed rgba(44,106,66,0.4);
  display: flex; align-items: center; justify-content: center;
}
.ph span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-mid); text-align: center; padding: 6px; }
.team-card .ph { aspect-ratio: 4/5; }
.team-card h4 { font-size: 17px; font-weight: 600; }
.team-card p { font-size: 13.5px; color: rgba(15,33,24,0.62); margin-top: 2px; }
.team-card .bio { font-size: 12.5px; color: rgba(15,33,24,0.55); margin-top: 7px; line-height: 1.45; }

/* Foto real no card — remove o placeholder quando há uma <img> dentro do .ph */
.ph:has(img) {
  background: none;
  border: none;
  overflow: visible;                  /* clip-path cuida do recorte, não overflow */
  clip-path: inset(0 round 18px);     /* AA correto via GPU shape renderer */
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: none;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ---------- 08 · O Que Está Incluso ---------- */
.incl { background: rgba(232,225,209,0.4); }
.incl .inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }
.incl h2 { font-size: clamp(26px, 2.8vw, 38px); margin-bottom: 30px; }
.incl-card { background: var(--forest); color: var(--cream); border-radius: 22px; padding: 40px 38px; }
.incl-card ul { list-style: none; display: flex; flex-direction: column; }
.incl-card li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid var(--hairline-light); font-size: clamp(18px, 2vw, 22px); font-weight: 600; }
.incl-card li:first-child { border-top: 0; }
.incl-card .ck { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.incl-card .ck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.incl-note { font-size: 17px; color: rgba(15,33,24,0.8); margin-bottom: 28px; }
.incl-note b { color: var(--forest); }

/* ---------- 09 · Antes Que Você Pergunte (flip cards) ---------- */
.faq h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 12px; }
.faq .faq-sub { color: rgba(15,33,24,0.7); margin-bottom: 48px; max-width: 50ch; }
.flip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.flip {
  perspective: 1400px;
  cursor: pointer;
  min-height: 210px;
}
.flip-inner {
  position: relative;
  width: 100%; height: 100%; min-height: 210px;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px;
  padding: 30px 28px;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
}
.flip-front { background: #fff; align-items: flex-start; justify-content: space-between; }
.flip-front .qmark {
  font-size: 56px; font-weight: 700; line-height: 0.8; color: var(--accent);
  font-family: var(--font-display);
}
.flip-front .q { font-size: 18px; font-weight: 600; color: var(--ink); }
.flip-front .hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-mid); margin-top: 14px; }
.flip-back {
  background: var(--forest); color: var(--cream);
  transform: rotateY(180deg);
  justify-content: center; gap: 12px;
}
.flip-back .ba { font-size: 16px; line-height: 1.5; }
.flip-back .qsmall { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-light); }

/* ---------- 10 · Urgência (faixa dark curta) ---------- */
.urgency { background: rgba(15,33,24,0.88); }
.urgency .inner { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.urgency-media {
  width: 100%; max-width: 300px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  justify-self: center;
}
.urgency-media video {
  position: absolute; inset: -10% -20%;
  width: 140%; height: 120%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.urgency-media::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
}
.urgency-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.urgency h2 { font-size: clamp(24px, 2.8vw, 36px); color: var(--cream); max-width: 22ch; margin: 0; }
.urgency h2 em { font-style: normal; color: var(--accent); }

/* ---------- 11 · CTA Final + Form (dark) ---------- */
.final { background: linear-gradient(180deg, rgba(20,46,29,0.92), rgba(15,33,24,0.92)); }
.final .inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: start; }
.final h2 { font-size: clamp(30px, 3.4vw, 46px); color: var(--cream); margin-bottom: 22px; }
.final .ps { margin-top: 30px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.55; color: rgba(240,235,223,0.72); border-left: 2px solid var(--accent); padding-left: 18px; }
.final .ps b { color: var(--cream); font-weight: 600; }

.final-form { background: var(--cream); border-radius: 22px; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.final-form label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-mid); display: flex; flex-direction: column; gap: 8px; }
.final-form input { font-family: var(--font-display); font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; }
.final-form input:focus { outline: 2px solid var(--green-mid); }
.knew { gap: 8px !important; }
.knew-opts { display: flex; gap: 10px; }
.knew-opts label { flex: 1; flex-direction: row; align-items: center; gap: 10px; justify-content: center; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 13px; cursor: pointer; color: var(--ink); font-family: var(--font-display); font-size: 15px; letter-spacing: 0; text-transform: none; transition: border-color 0.15s ease, background 0.15s ease; }
.knew-opts label:has(input:checked) { border-color: var(--forest); background: rgba(44,106,66,0.08); }
.knew-opts input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--green-mid); border-radius: 50%; flex: none; position: relative; }
.knew-opts input:checked { border-color: var(--forest); }
.knew-opts input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--forest); }
.final-form .btn { margin-top: 6px; }
.form-success { display: none; background: rgba(44,106,66,0.12); border: 1px solid var(--green-mid); color: var(--forest); border-radius: 14px; padding: 18px 18px; font-size: 15px; line-height: 1.5; font-weight: 500; }
.form-success.show { display: block; animation: rise 0.4s ease both; }
.success-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap;
}
.success-wa { display: flex; align-items: center; gap: 8px; }
.wa-link {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  font-weight: 700; color: #fff; text-decoration: none;
  background: #25D366; border: none;
  border-radius: 999px; padding: 10px 20px; font-size: 14px;
  box-shadow: 0 0 12px rgba(37,211,102,0.4);
  transition: background 0.18s, box-shadow 0.18s;
}
.wa-link:hover { background: #1ebe5a; box-shadow: 0 0 18px rgba(37,211,102,0.6); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(240,235,223,0.6); padding: 34px clamp(26px, 6vw, 92px); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
footer .f-brand { display: flex; align-items: center; gap: 10px; color: var(--cream); font-weight: 700; font-size: 17px; }
footer .leaf { width: 11px; height: 11px; border-radius: 11px 0 11px 0; background: var(--accent); }
footer .norm-badges { display: flex; gap: 8px; }
footer .norm-badges span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--green-light); background: var(--green-dark); border-radius: 999px; padding: 6px 12px; }

/* ---------- sticky "Calcular multa" ---------- */
.sticky-calc {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(140%);
  z-index: 75;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(201,162,79,0.5);
  border-radius: 999px;
  padding: 11px 12px 11px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.32);
  transition: transform 0.4s cubic-bezier(.4,.2,.2,1);
}
.sticky-calc.show { transform: translateX(-50%) translateY(0); }
.sticky-calc .sc-txt { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.sticky-calc .sc-txt .warn { color: var(--accent); }
.sticky-calc .sc-btn { background: var(--accent); color: var(--ink); border: none; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; }
.sticky-calc .sc-btn:hover { background: var(--accent-soft); }
@media (max-width: 560px) {
  .sticky-calc { left: 14px; right: 14px; transform: translateY(140%); justify-content: space-between; padding-left: 18px; }
  .sticky-calc.show { transform: translateY(0); }
  .sticky-calc .sc-txt { font-size: 13px; }
}

/* ---------- whatsapp ---------- */
.wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 85px; height: 85px; border-radius: 999px; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,0.4); text-decoration: none; transition: transform 0.18s ease; }
.wa-fab:hover { transform: scale(1.07); }
.wa-fab svg { width: 45px; height: 45px; fill: #fff; }

/* ============================================================
   DARK MODE — html[data-theme="dark"]
   Fundo verde-escuro em vez de creme; accent dourado permanece
   ============================================================ */

html[data-theme="dark"] body {
  background: transparent;
  color: #EDE7D9;
}
html[data-theme="dark"] .bg-anim { background: linear-gradient(135deg, #07100A 0%, #1F4A2F 100%); }

/* seções com fundo claro → verde muito escuro */
html[data-theme="dark"] .hero {
  background: radial-gradient(1100px 520px at 90% -10%, rgba(236,201,74,0.07), transparent 60%);
}
html[data-theme="dark"] .hero-norms-watermark { color: rgba(240,235,223,0.05); }
html[data-theme="dark"] .hook,
html[data-theme="dark"] .how,
html[data-theme="dark"] .team,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .benefits,
html[data-theme="dark"] .incl {
  background: transparent;
}

/* seções já-escuras → mais fundas ainda */
html[data-theme="dark"] .dark { background: rgba(3,8,5,0.90); }
html[data-theme="dark"] .risk { background: linear-gradient(180deg, rgba(3,8,5,0.92), rgba(5,13,7,0.92)); }
html[data-theme="dark"] .urgency { background: rgba(3,8,5,0.90); }
html[data-theme="dark"] .final { background: linear-gradient(180deg, rgba(5,13,7,0.92), rgba(3,8,5,0.90)); }
html[data-theme="dark"] .cta-gold { background: var(--accent); }

/* texto muted (rgba ink) → cream */
html[data-theme="dark"] .hero .sub,
html[data-theme="dark"] .how .how-sub,
html[data-theme="dark"] .how-step p,
html[data-theme="dark"] .incl-note,
html[data-theme="dark"] .faq .faq-sub,
html[data-theme="dark"] .team-card p {
  color: rgba(237,231,217,0.68);
}
html[data-theme="dark"] .team-card h4 { color: #EDE7D9; }

/* equipe — textos e badges que sumiam no fundo escuro */
html[data-theme="dark"] .team .team-lead { color: rgba(237,231,217,0.72); }
html[data-theme="dark"] .team .team-norms span {
  background: rgba(102,160,110,0.1);
  border-color: rgba(102,160,110,0.4);
  color: var(--green-light);
}

/* section-head */
html[data-theme="dark"] .section-head .num  { color: var(--green-light); }
html[data-theme="dark"] .section-head .rule { background: rgba(237,231,217,0.12); }

/* kicker / hero em seções já-escuras: sem alteração (continuam iguais) */
html[data-theme="dark"] .hero .mono-tag { color: var(--green-light); }

/* ênfases em → dourado (evita sumir no fundo escuro) */
html[data-theme="dark"] .hero h1 em { color: var(--accent); background: linear-gradient(transparent 85%, rgba(236,201,74,0.18) 85%); }
html[data-theme="dark"] .hook h2 em { color: var(--accent); }

/* split */
html[data-theme="dark"] .split { border-color: rgba(237,231,217,0.1); background: #1C3D26; }

/* gancho — impact card: creme sobre fundo escuro */
html[data-theme="dark"] .impact-card {
  background: var(--cream);
  color: var(--ink);
}
html[data-theme="dark"] .impact-card .q { color: var(--ink); }
html[data-theme="dark"] .impact-card .scn { color: rgba(15,33,24,0.5); }
html[data-theme="dark"] .impact-text-overlay { background: linear-gradient(to right, rgba(5,15,8,0.92) 0%, rgba(5,15,8,0.75) 60%, transparent 100%); }

/* how */
html[data-theme="dark"] .how-ic  { background: #1C3D26; border-color: var(--accent); }
html[data-theme="dark"] .how-ic svg { stroke: #EDE7D9; }
html[data-theme="dark"] .how-step h3 { color: var(--accent); }
html[data-theme="dark"] .how-step .stp { color: var(--green-light); }
html[data-theme="dark"] .how-line .track { stroke: rgba(237,231,217,0.1); }

/* benefits */
html[data-theme="dark"] .benefit { border-color: rgba(237,231,217,0.12); }
html[data-theme="dark"] .benefit .ck { background: var(--accent); color: var(--ink); }

/* flip cards */
html[data-theme="dark"] .flip-front {
  background: #1C3D26;
  border-color: rgba(237,231,217,0.1);
  color: #EDE7D9;
}
html[data-theme="dark"] .flip-front .q    { color: #EDE7D9; }
html[data-theme="dark"] .flip-front .hint { color: var(--green-light); }

/* calculadora — card creme (igual ao modo claro, destaca-se da seção escura) */
html[data-theme="dark"] .calc {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
}
html[data-theme="dark"] .calc h3        { color: var(--ink); }
html[data-theme="dark"] .calc .calc-sub  { color: rgba(15,33,24,0.62); }
html[data-theme="dark"] .calc-field label { color: var(--green-mid); }
html[data-theme="dark"] .calc-field input[type="number"] {
  background: var(--cream);
  color: var(--ink);
  border-color: rgba(15,33,24,0.2);
}
html[data-theme="dark"] .calc-check { border-color: rgba(15,33,24,0.18); }
html[data-theme="dark"] .calc-big-number { color: var(--ink); }
html[data-theme="dark"] .calc-result-label { color: var(--green-mid); }
html[data-theme="dark"] .calc-result-sub { color: rgba(15,33,24,0.65); }
html[data-theme="dark"] .calc-warn {
  background: rgba(201,162,79,0.12);
  border-color: rgba(201,162,79,0.4);
}
html[data-theme="dark"] .calc-warn p     { color: var(--forest); }
html[data-theme="dark"] .calc-disclaimer { color: rgba(15,33,24,0.5); }

/* incluso */
html[data-theme="dark"] .incl-note b { color: var(--accent); }

/* incluso — card: creme para sair do fundo escuro */
html[data-theme="dark"] .incl-card {
  background: var(--cream);
  color: var(--ink);
}
html[data-theme="dark"] .incl-card li { border-color: rgba(15,33,24,0.1); color: var(--ink); }
html[data-theme="dark"] .incl-card .ck { background: var(--accent); color: var(--ink); }

/* formulário final */
html[data-theme="dark"] .final-form {
  background: #1C3D26;
  color: #EDE7D9;
}
html[data-theme="dark"] .final-form > label {
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
}
html[data-theme="dark"] .final-form input {
  background: var(--cream);
  color: var(--ink);
  border-color: rgba(15,33,24,0.2);
}
html[data-theme="dark"] .final-form input::placeholder { color: rgba(15,33,24,0.38); }
html[data-theme="dark"] .knew-opts label {
  background: var(--cream);
  color: var(--ink);
  border-color: rgba(15,33,24,0.2);
}
html[data-theme="dark"] .knew-opts label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(201,162,79,0.12);
}

/* btn-ghost em seções claras (agora escuras) */
html[data-theme="dark"] .btn-ghost {
  color: #EDE7D9;
  border-color: rgba(237,231,217,0.3);
}
html[data-theme="dark"] .btn-ghost:hover {
  border-color: #EDE7D9;
  background: rgba(237,231,217,0.07);
}

/* sticky bar */
html[data-theme="dark"] .sticky-calc {
  background: #1C3D26;
  border-color: rgba(236,201,74,0.45);
  color: #EDE7D9;
}

/* footer: já é escuro — sem alteração necessária */

/* ---------- reveal (fail-safe: só esconde quando JS confirma o observer) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.io .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  html.io .reveal.in { opacity: 1; transform: translateY(0); }
}

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .hook .inner, .incl .inner, .final .inner { grid-template-columns: 1fr; }
  .hero .inner { grid-template-columns: 1fr; grid-template-areas: "head" "split" "foot"; }
  .calc-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; gap: 40px; }
  .how-line { display: none; }
  .split { min-height: 320px; }
  .urgency .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .urgency-copy { align-items: center; }
  .urgency h2 { max-width: 32ch; }
}
@media (max-width: 900px) {
  section[data-section] { padding: 76px clamp(22px, 6vw, 40px); }
  .hero { min-height: auto; padding-top: 90px; }
  .section-head { margin-bottom: 34px; }
  body { font-size: 16px; }
  .wa-fab { bottom: 88px; }
}

/* ============================================================
   MOBILE COMPLETO — tablet ≤768px / phone ≤480px
   ============================================================ */
@media (max-width: 768px) {
  /* hero — padding simétrico no mobile, sem overflow */
  .hero {
    padding-left: clamp(16px, 5vw, 28px) !important;
    padding-right: clamp(16px, 5vw, 28px) !important;
    padding-top: 72px;
    overflow: visible;
  }
  .hero .inner { gap: 24px; }
  .hero-head { justify-content: flex-start; }
  .hero-foot { align-items: stretch; }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); line-height: 1.12; margin: 12px 0 0; word-break: break-word; }
  .hero .sub { font-size: 16px; line-height: 1.5; margin-bottom: 20px; max-width: 100%; }
  .hero-cta-row { align-items: stretch; }
  /* botão CTA: texto pode quebrar */
  .hero .btn-gold { white-space: normal !important; }
  .hero .btn-gold small { display: block; font-size: 11px; opacity: 0.8; margin-top: 2px; }

  /* split overlay: mais largo no mobile para não cortar texto */
  .split-overlay { width: 90%; }
  .hero .split { --bleed: 0px !important; width: 100% !important; margin-right: 0 !important; border-radius: 16px; min-height: 0; }
  .split { display: flex; flex-direction: column; min-height: 0; }
  .split-half { aspect-ratio: 16 / 10; min-height: 220px; }

  /* impact card (gancho) empilha */
  .impact-card { flex-direction: column; }
  .impact-img-wrap { flex: none; width: 100%; min-height: 240px; }
  .impact-text-overlay { flex: none; }

  /* incl + final 1 coluna */
  .incl .inner > div:first-child, .final .inner > div:first-child { margin-bottom: 12px; }

  /* calc-check: manter padding horizontal + checkbox alinhado */
  .calc-check { padding: 12px 14px; }
  .calc-check input[type="checkbox"] { width: 24px; height: 24px; min-width: 24px; flex: none; margin-top: 1px; }
  .calc-emp-row input[type="number"] { min-height: 48px; font-size: 16px; }
  .calc-emp-row input[type="range"] { min-height: 44px; }
  .calc-big-number { font-size: clamp(38px, 12vw, 60px); word-break: break-word; }

  /* flip cards 1 coluna */
  .flip-grid { grid-template-columns: 1fr; }

  /* botões largura total, altura mínima */
  .btn { width: 100%; justify-content: center; min-height: 48px; text-align: center; }
  .hero-cta-row .btn, .urgency .btn, .incl .btn, .cta-gold .btn { width: 100%; }
  .calc .btn, .final-form .btn { width: 100%; }

  /* formulário largura total */
  .final-form label { width: 100%; }
  .final-form input[type="email"], .final-form input[type="tel"] { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; }
  .knew-opts { gap: 18px; }

  /* team grid 1 coluna */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* CTA "Calcular multa" fixo como barra inferior */
  .calc-cta-fixed {
    display: flex !important; justify-content: center; align-items: center;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; border-radius: 0 !important;
    font-size: 16px !important; font-weight: 700 !important;
    padding: 16px 24px !important; min-height: 56px;
    letter-spacing: 0 !important; z-index: 75;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.22) !important;
  }
  /* WhatsApp acima da barra fixa */
  .wa-fab { width: 56px; height: 56px; bottom: 70px; right: 16px; z-index: 80; }
  .wa-fab svg { width: 30px; height: 30px; }

  /* sticky-calc desativado no mobile (CTA fixo cobre o papel) */
  .sticky-calc { display: none !important; }

  /* espaçamento mínimo entre seções + padding inferior pra não colar na barra fixa */
  section[data-section] { padding: 52px clamp(16px, 5vw, 28px); }
  .final { padding-bottom: 90px; }
  footer { padding-bottom: 84px; }

  /* vídeo ampulheta: máx 80% da largura, centralizado */
  .urgency-media { max-width: 80%; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(26px, 8vw, 32px); }
  .team-grid { grid-template-columns: 1fr; }
  .split-half { aspect-ratio: 4 / 3; }
  h2 { word-wrap: break-word; }
  .section-head .num { font-size: 10px; }
}

/* sombra interna em TODAS as imagens (consistência visual) */
.split-half, .impact-img-wrap, .team-card .ph {
  position: relative;
}
.split-half::after,
.impact-img-wrap::after,
.team-card .ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.32);
  border-radius: inherit;
  z-index: 1;
}

/* ============================================================
   TOP BAR + DOT NAV + CTA FLUTUANTE
   ============================================================ */

/* Override side-nav margin — data-nav is now 'none' so old rules don't fire */
.main { margin-left: 0 !important; margin-top: 0 !important; }

/* Top bar */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 52px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(15,33,24,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(240,235,223,0.07);
}
.top-bar-brand {
  display: flex; align-items: center; text-decoration: none; color: var(--cream);
}
.top-bar-brand .bn {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.top-bar-brand .leaf { width: 10px; height: 10px; border-radius: 10px 0 10px 0; background: var(--accent); flex: none; }
.top-bar-brand small {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(240,235,223,0.48);
  border-left: 1px solid rgba(240,235,223,0.14); padding-left: 10px; margin-left: 4px;
}
.top-bar .nav-burger { display: none; }

/* Dot nav — número + nome sempre visíveis */
.dot-nav {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.dot-nav a.dot {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; padding: 5px 10px 5px 6px;
  border-radius: 999px;
  transition: all 0.18s ease;
  opacity: 0.55;
}
.dot-nav a.dot i {
  font-style: normal;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--ink); background: rgba(20,46,29,0.12);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none; font-weight: 600; transition: all 0.18s ease;
}
.dot-nav a.dot span {
  font-size: 11.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; letter-spacing: 0.01em;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-shadow: 0 1px 6px rgba(240,235,223,0.8);
}
.dot-nav a.dot:hover,
.dot-nav a.dot.active {
  opacity: 1;
}
.dot-nav a.dot:hover span,
.dot-nav a.dot.active span {
  opacity: 1; transform: translateX(0);
}
.dot-nav a.dot.active i {
  background: var(--accent); color: #fff;
  width: 26px; height: 26px; font-size: 10.5px;
  box-shadow: 0 0 0 4px rgba(201,162,79,0.2);
}
.dot-nav a.dot.active span {
  color: var(--forest); font-weight: 600;
}
.dot-nav a.dot:hover:not(.active) i {
  background: rgba(20,46,29,0.25);
}

/* dot-nav sobre seções escuras — inverte para tons claros */
.dot-nav.on-dark a.dot i {
  color: var(--cream); background: rgba(240,235,223,0.16);
}
.dot-nav.on-dark a.dot span {
  color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.dot-nav.on-dark a.dot:hover:not(.active) i {
  background: rgba(240,235,223,0.3);
}
.dot-nav.on-dark a.dot.active i {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 4px rgba(201,162,79,0.28);
}
.dot-nav.on-dark a.dot.active span {
  color: var(--accent); font-weight: 600;
}

/* CTA flutuante bottom-left */
.calc-cta-fixed {
  position: fixed; bottom: 24px; left: 22px; z-index: 70;
  font-size: 12.5px !important; padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(201,162,79,0.38) !important;
}

/* Mobile: hide dots + cta, show burger */
@media (max-width: 1024px) {
  .top-bar .nav-burger { display: inline-flex; }
  .dot-nav { display: none; }
  .calc-cta-fixed { display: none; }
}