/* =====================================================================
   style.css — tonstone.com.br (v2 — identidade oficial Ton)
   Referência-mãe: ton.com.br ao vivo (jul/2026). Base BRANCA, blocos
   verde-limão #88FF00, texto #1B221F, botão escuro #203D00, radius 20px.
   Títulos: Anton (aprox. da "Ton Condensed" oficial). Corpo: Inter.
   Tokens em site/CONTRATOS.md — zero hex solto fora daqui.
   ===================================================================== */

/* ============ 0. FONTES SELF-HOSTED (Fase 4 — sem Google Fonts em runtime) ============ */
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ============ 1. TOKENS ============ */
:root {
  /* Cores base (extraídas do site oficial) */
  --bg-0: #FFFFFF;
  --bg-soft: #F4F8F4;          /* seções alternadas / cinza-esverdeado */
  --lime: #88FF00;             /* verde-limão oficial (blocos + CTA) */
  --lime-soft: rgba(0, 163, 52, 0.10);  /* pill dos badges "72% OFF" */
  --ink: #1B221F;              /* texto principal (preto-esverdeado oficial) */
  --ink-body: #20252A;         /* corpo de texto */
  --ink-mid: #55645B;          /* texto secundário (≥4.5:1 no branco) */
  --ink-low: #7A877F;          /* legendas (só texto grande) */
  --green-deep: #203D00;       /* botão escuro oficial ("Peça já...") */
  --brand-ton: #003D1C;        /* verde do WORDMARK oficial (fill do SVG logo-ton-rebranding) */
  --green-dark: #2A5200;       /* destaque de texto sobre lime */
  --green-brand: #00A334;      /* verde médio (ícones, positivos) */
  --green-emph: #6CBD32;       /* L5: verde do título "Parabéns! Você ganhou" (DiscountModal oficial) */
  --machine: #0FBE3D;          /* verde vivo do hardware (arte SVG) */
  --machine-key: #0CA032;
  --machine-deep: #088A2B;
  --key-red: #E5484D;
  --key-yellow: #F0B429;
  --blue: #2B52E8;             /* selo azul oficial "A partir de 0,57%" */
  --yellow: #FFD100;           /* faixa de promoção */
  --warn: #F76D18;             /* laranja — SÓ gráficos de urgência (barra de estoque) */
  --warn-text: #B84A00;        /* v2.3 aditivo: laranja de TEXTO (≥4,5:1 no branco — AA) */
  --danger: #E5484D;
  --wa: #25D366;
  --border: rgba(27, 34, 31, 0.12);
  --border-soft: rgba(27, 34, 31, 0.08);

  /* Superfícies escuras (cabeçalho premium — aditivo v2.4; NÃO altera o tema claro) */
  --dark-0: #0B0F0C;           /* fundo do #topo (preto levemente esverdeado) */
  --dark-1: #141B14;           /* superfície de pílula/card sobre o escuro */
  --dark-2: #1C251C;           /* superfície elevada / hover */
  --on-dark: #F3F7F3;          /* texto principal sobre escuro (~18:1) */
  --on-dark-mid: #A7B2A7;      /* secundário sobre escuro (≥7:1 no --dark-0/1) */
  --dark-line: rgba(136, 255, 0, 0.16);      /* hairline verde sutil */
  --dark-line-soft: rgba(243, 247, 243, 0.10);

  /* v2.5 aditivo (15/07) — faixa infinita OFICIAL (gradiente e badge medidos
     ao vivo em ton.com.br/oferta-ton) + altura do menu flutuante sobreposto */
  --faixa-a: #D2F961;          /* início do gradiente da faixa oficial */
  --faixa-b: #6DFFB9;          /* fim do gradiente da faixa oficial */
  --badge-gray: #E6ECF2;       /* pill "Novidade" da faixa oficial */
  --hdr-overlap: 80px;         /* altura de fluxo REAL do menu flutuante (8 pad + 72 card) */

  --shadow-sm: 0 2px 8px rgba(27, 34, 31, 0.08);
  --shadow-md: 0 6px 20px rgba(27, 34, 31, 0.10);
  --shadow-lg: 0 16px 44px rgba(27, 34, 31, 0.16);
  --shadow-card: 0 1px 2px rgba(27, 34, 31, 0.05), 0 8px 24px rgba(27, 34, 31, 0.10);
  --shadow-float: 0 2px 6px rgba(27, 34, 31, 0.08), 0 20px 48px rgba(27, 34, 31, 0.18);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --r-pill: 20px;              /* radius oficial dos botões Ton */
  --r-full: 9999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --d-fast: 150ms; --d-base: 300ms; --d-slow: 500ms; --d-slower: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-header: 100; --z-fab: 200; --z-popup: 300; --z-modal: 500; --z-cookie: 600;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Anton', 'Inter', system-ui, sans-serif;
}

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

/* Smooth só como fallback: com Lenis ativo (classe .lenis no html) o CSS não pode competir */
html { -webkit-text-size-adjust: 100%; --z: 1; }
html:not(.lenis) { scroll-behavior: smooth; }

/* L7 (20/10): SEM zoom nas telas largas — o oficial não amplia: acima de 1440px o conteúdo
   fica em 1360px centralizado, com as mesmas letras do 1440 (o zoom deixava tudo 33–78% maior).
   --z continua existindo (= 1) para o pop-up de taxas e as âncoras do animations.js. */

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--bg-0);
  overflow-x: hidden;
  /* L10 (Trava 14): sem min-width — o dobrável fechado de 280 px entra na matriz (antes o body travava em 320) */
}

img, svg, canvas { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

:focus-visible {
  outline: 3px solid var(--green-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

section { scroll-margin-top: 96px; }   /* header flutuante ≈ 88px de viewport + folga */

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

.skip-link {
  position: fixed; top: var(--s-4); left: var(--s-4);
  background: var(--ink); color: var(--bg-0);
  font-weight: 700; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill); z-index: 1000;
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============ 3. UTILITÁRIOS ============ */
.container {
  max-width: 1440px;                /* L7: 1360 úteis + 2×40, igual ao oficial (antes 1200) */
  margin-inline: auto;
  padding-inline: var(--s-10);
}
.container--narrow { max-width: 780px; }

h1, h2, .pix-display, .prova-num, .t-box, .parc-val, .modelo-nome {
  font-family: var(--font-display);
  font-weight: 400;               /* Anton só tem 400 (pesada por natureza) */
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(42px, 6.2vw, 72px); line-height: 1.06; color: var(--ink); text-wrap: balance; }
@media (max-width: 360px) { h1 { font-size: 38px; } }   /* L6: em 320–360px o 42px alargava a coluna do hero */
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--ink); }

.sec-head { max-width: 680px; margin-bottom: var(--s-10); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-sub {
  font-size: 18px; color: var(--ink-mid);
  margin-top: var(--s-4);
  text-wrap: pretty;
}

.ic { width: 20px; height: 20px; flex: none; }
.ic-lg { width: 28px; height: 28px; }

/* ============ 4. BOTÕES (pill oficial, radius 20px) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-6);
  font-weight: 600; font-size: 16px;
  border-radius: var(--r-pill);
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--d-fast) var(--ease-spring),
    box-shadow var(--d-base) var(--ease-out),
    background-color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:hover { transform: translateY(-2px); }

.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { box-shadow: 0 6px 18px rgba(136, 255, 0, 0.5); }

.btn-dark { background: var(--green-deep); color: #FCFDFC; }
.btn-dark:hover { box-shadow: 0 10px 26px rgba(32, 61, 0, 0.30); }

.btn-white {
  background: var(--bg-0); color: var(--ink);
  border: 1.5px solid rgba(27, 34, 31, 0.18);
}
.btn-white:hover { border-color: var(--ink); }

.btn-sm { min-height: 44px; padding: 0 var(--s-5); font-size: 15px; }
.btn-lg { min-height: 56px; padding: 0 var(--s-8); font-size: 17px; }
.btn-xl { min-height: 64px; padding: 0 var(--s-12); font-size: 19px; font-weight: 700; }

/* ============ 5. TOPO (cabeçalho premium escuro — v2.4) ============ */
#topo {
  position: relative;
  background:
    radial-gradient(72% 105% at 97% -8%, rgba(136, 255, 0, 0.17), transparent 60%),
    radial-gradient(66% 96% at 2% 106%, rgba(136, 255, 0, 0.11), transparent 58%),
    var(--dark-0);
}

/* 5a. Faixa de promoção — L10 (A2): redesenhada; regras no bloco "L10" no fim deste arquivo */

/* 5b. Barra escura do cronômetro */
.urgency-bar { padding: var(--s-6) 0 var(--s-8); }
.count-inner {
  max-width: 1480px;                              /* preenche telas largas (antes 1200 = 37% vazio) */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.count-pill {
  display: inline-flex; align-items: center; gap: var(--s-4);
  flex: 1 1 300px; min-width: 260px; max-width: 420px;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, var(--dark-2), var(--dark-1));
  border: 1px solid var(--dark-line);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.count-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-md);
  background: rgba(136, 255, 0, 0.10);
  border: 1px solid var(--dark-line);
  color: var(--lime);
}
.count-ic .ic { width: 22px; height: 22px; }
.count-pill-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.count-pill-tx strong { font-size: 14.5px; font-weight: 700; color: var(--on-dark); }
.count-pill-tx span { font-size: 12.5px; line-height: 1.4; color: var(--on-dark-mid); }

.count-card {
  flex: none; text-align: center;
  padding: var(--s-5) var(--s-12) var(--s-6);
  border: 1px solid rgba(136, 255, 0, 0.24);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(136, 255, 0, 0.12), transparent 60%),
    rgba(136, 255, 0, 0.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
.count-titulo {
  font-size: 13px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lime);
  margin-bottom: var(--s-3);
}
.count-clock { display: inline-flex; align-items: flex-start; gap: var(--s-3); }
.t-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.t-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;   /* L6: 10,5 → 11 (legível no celular) */
  text-transform: uppercase; color: var(--on-dark-mid);
}
.count-clock .t-sep { align-self: flex-start; margin-top: 8px; }
/* L6: 901–1180 os 3 blocos não cabiam lado a lado → um selo descia sozinho (faixa de 380px).
   Agora os selos dividem o espaço que sobra e o cartão do relógio fica mais justo. */
@media (max-width: 1180px) {
  .count-inner { flex-wrap: nowrap; gap: var(--s-4); }
  .count-pill { flex: 1 1 0; min-width: 0; padding: var(--s-4); gap: var(--s-3); }
  .count-card { padding-inline: var(--s-6); }
}

/* Base compartilhada do relógio em caixas (topo + #cta-final) */
.urgency-clock { display: inline-flex; align-items: center; gap: var(--s-2); }
.t-box {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 66px; padding: var(--s-2) var(--s-3);
  background: rgba(136, 255, 0, 0.10);
  border: 1px solid rgba(136, 255, 0, 0.28);
  border-radius: var(--r-md);
  font-size: 38px; line-height: 1.2;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.t-sep {
  font-family: var(--font-display);
  font-size: 30px; color: rgba(136, 255, 0, 0.45);
}

/* 5c. Menu flutuante — vive FORA do #topo (bugfix 15/07): sticky no body
   acompanha a rolagem da página INTEIRA (antes morria na borda do hero).
   O margin-bottom negativo faz o card flutuar SOBRE o topo do hero. */
.header-bar {
  position: sticky; top: var(--s-2); z-index: var(--z-header);
  padding: var(--s-2) var(--s-4) 0;
  height: var(--hdr-overlap);   /* L11: altura = o que ela puxa pra cima (sem sobra = sem linha branca sob a faixa) */
  margin-bottom: calc(-1 * var(--hdr-overlap));
  /* A barra é só um trilho transparente: quem recebe clique é o CARD.
     Sem isso, a faixa invisível bloquearia cliques no conteúdo que passa
     por baixo dela durante a rolagem. */
  pointer-events: none;
}
.header-bar .header-card { pointer-events: auto; }
.header-card {
  display: flex; align-items: center; gap: var(--s-6);
  max-width: 1480px; margin-inline: auto;
  min-height: 72px; padding-inline: var(--s-8);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--d-base) var(--ease-out);
}
body.is-scrolled .header-card { box-shadow: var(--shadow-lg); }

/* L4: menu do oficial — "Maquininhas ▾" e "Planos e Taxas" à esquerda,
   "Atendimento ▾" encostado no cronômetro/CTA (como no ton.com.br). */
.header-nav { display: flex; align-items: center; gap: var(--s-2); flex: 1; }
.header-nav > a, .nav-drop-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  padding: var(--s-3) var(--s-2);
  transition: color var(--d-fast) var(--ease-out);
}
.header-nav > a:hover, .nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { color: var(--green-dark); }
.nav-drop-btn .ic { width: 16px; height: 16px; transition: transform var(--d-fast) var(--ease-out); }
.nav-drop.is-open .nav-drop-btn .ic { transform: rotate(180deg); }

.nav-drop { position: relative; }
.nav-drop--fim { margin-left: auto; }
/* Painel suspenso (branco, cantos grandes, sombra — padrão do oficial) */
.nav-drop-panel {
  position: absolute; top: calc(100% + var(--s-4)); left: 0;
  display: flex; gap: var(--s-6);
  min-width: 280px;
  padding: var(--s-6);
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), visibility 0s linear var(--d-fast);
}
.nav-drop--fim .nav-drop-panel { left: auto; right: 0; }
/* ponte invisível entre o botão e o painel (o hover não "cai" no vão) */
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--s-4)); height: var(--s-4); }
.nav-drop.is-open .nav-drop-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
@media (hover: hover) {
  .nav-drop:hover .nav-drop-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
  }
  .nav-drop:hover .nav-drop-btn { color: var(--green-dark); }
  .nav-drop.is-fechado .nav-drop-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); }
}
.nav-drop-list { display: flex; flex-direction: column; min-width: 232px; }
.nav-drop-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: 16px; font-weight: 500; color: var(--ink);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-out);
}
.nav-drop-list a:last-child { border-bottom: 0; }
.nav-drop-list a:hover { color: var(--green-dark); }
.nav-drop-list .ic { width: 18px; height: 18px; transform: rotate(-90deg); color: var(--green-dark); }
/* Cartão "Compare todas as maquininhas Ton" com a arte oficial */
.nav-drop-promo {
  display: flex; flex-direction: column; gap: var(--s-1);
  width: 232px; padding: var(--s-4);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  transition: background-color var(--d-fast) var(--ease-out);
}
.nav-drop-promo:hover { background: var(--lime-soft); }
.nav-drop-promo img { width: 160px; height: 160px; align-self: center; margin-bottom: var(--s-2); }
.nav-drop-promo strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.nav-drop-promo span { font-size: 14px; color: var(--ink-mid); }

.header-timer {
  display: none;
  font-weight: 700; font-size: 14px;
  color: var(--green-deep);
  background: var(--lime-soft);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
body.is-scrolled .header-timer { display: inline-block; }

/* Logo: paths do SVG OFICIAL da Ton + "parceiro" na caixa exata do "stone" (sobre o N) */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo-svg { overflow: visible; color: var(--brand-ton); }
.logo-parceiro {
  font: 700 5.6px var(--font);
  fill: currentColor;
}

/* ============ 6. HERO (bloco verde-limão — estrutura da IMAGEM 1) ============ */
#hero {
  /* Luz de palco sutil: clareia atrás da foto, aterra a base (deltas ≤6%) */
  background:
    radial-gradient(120% 90% at 76% 28%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%),
    radial-gradient(150% 120% at 12% 112%, rgba(27, 34, 31, 0.05), rgba(27, 34, 31, 0) 52%),
    var(--lime);
  /* compensa o menu flutuante sobreposto (--hdr-overlap) */
  padding: calc(var(--s-16) + var(--hdr-overlap)) 0 var(--s-16);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: var(--s-12);
  align-items: center;
}
/* Badge acima do H1 (IMAGEM 1): pill branca com estrela */
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 34, 31, 0.08);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-card);
  padding: 7px 14px;
  margin-bottom: var(--s-5);
}
.hero-badge .ic { width: 15px; height: 15px; color: var(--green-brand); }
.hero-badge b { font-weight: 800; }
.hero-copy h1 em {
  /* destaque em verde-escuro oficial: AA sobre lime (7:1), token dedicado --green-dark */
  font-style: normal; color: var(--green-dark);
}
.hero-sub {
  font-size: 18px; color: var(--ink);
  margin-top: var(--s-6); max-width: 520px;
  text-wrap: pretty;
}
.hero-ctas {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-8);
}
/* Selo de confiança AFP: pill branca discreta (O1 respondida com presença) */
.hero-trust {
  display: inline-flex; align-items: flex-start; gap: var(--s-2);
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 34, 31, 0.10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 8px 14px;
  margin-top: var(--s-5); max-width: 460px;
}
.hero-trust .ic { width: 16px; height: 16px; color: var(--green-deep); margin-top: 2px; }
.ic-star { width: 16px; height: 16px; color: var(--green-deep); }

/* Cena: FOTO OFICIAL do produto (720×1080) + selo + notificações */
.hero-scene-wrap { display: flex; justify-content: center; }
.hero-scene {
  position: relative;
  width: 100%; max-width: 480px;
}
.hero-scene::before {
  /* Glow de palco atrás da maquininha */
  content: ""; position: absolute; inset: -6% -10%;
  background: radial-gradient(50% 45% at 50% 44%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 70%);
  z-index: 0; pointer-events: none;
}
.hero-foto {
  position: relative; z-index: 1;
  width: min(78%, 375px); height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 30px 48px rgba(27, 34, 31, 0.34));
  animation: hero-float 7s var(--ease-in-out) infinite;
}
@keyframes hero-float {
  50% { transform: translateY(-10px) rotate(0.4deg); }
}

/* L10 (A3): selo preto "72% no link" e notificações flutuantes removidos do hero (regras apagadas) */

/* ---- Parte de baixo do hero (IMAGEM 1 + home oficial) ---- */
.hero-below { margin-top: var(--s-16); }

/* Cards de taxas no padrão da home oficial (número Anton verde-escuro em card branco r20) */
.hero-taxas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 880px;
  margin-inline: auto;
}
.taxa-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-0);
  border: 1px solid rgba(27, 34, 31, 0.05);
  border-radius: var(--r-pill);
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--shadow-card);
}
.taxa-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.taxa-label { font-size: 15px; font-weight: 600; color: var(--ink); }

.hero-taxas-nota {
  text-align: center;
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-top: var(--s-5);
  text-wrap: balance;
}
.taxas-detalhes {
  display: inline-block;
  font-weight: 800; font-size: 15px;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--s-3) var(--s-1);   /* L6: alvo de toque ≥44px sem quebrar a linha */
  margin-block: calc(-1 * var(--s-3));   /* …e sem abrir vão entre as 2 linhas da frase no celular */
  touch-action: manipulation;
}
.taxas-detalhes:hover { color: var(--green-deep); }

/* Os 4 blocos (IMAGEM 1): container branco translúcido com divisórias */
.hero-beneficios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(27, 34, 31, 0.06);
  border-radius: var(--r-xl);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
  margin-top: var(--s-10);
  max-width: 1120px;
  margin-inline: auto;
}
.benef-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
}
.benef-item + .benef-item { border-left: 1px solid rgba(27, 34, 31, 0.08); }
.benef-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(136, 255, 0, 0.30));
  border: 1px solid rgba(27, 34, 31, 0.06);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
}
.benef-ic .ic { width: 22px; height: 22px; }
.benef-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.benef-tx strong { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.benef-tx span { font-size: 12.5px; line-height: 1.4; color: rgba(27, 34, 31, 0.78); }

/* Prova social do hero (IMAGEM 1): linha central com avatares */
.hero-social {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); flex-wrap: wrap;
  font-size: 14px; color: var(--ink);
  margin-top: var(--s-8);
}
.hero-social b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hero-social .dot { opacity: 0.45; margin: 0 var(--s-2); }
.hero-avatars { display: inline-flex; margin-right: var(--s-2); }
.hero-avatar {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, #FFFFFF, rgba(136, 255, 0, 0.55));
  border: 1.5px solid #FFFFFF;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--green-deep);
}
.hero-avatar + .hero-avatar { margin-left: -8px; }

/* ============ 6b. FAIXA INFINITA (réplica oficial: 48px, gradiente, 35s) ============ */
.faixa {
  display: block;
  height: 48px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--faixa-a), var(--faixa-b));
  cursor: pointer;
}
.faixa-inner {
  display: flex; align-items: center;
  width: max-content; height: 100%;
  animation: mq 35s linear infinite;   /* mesmo keyframe do marquee: translateX(-50%) */
}
@media (hover: hover) and (pointer: fine) { .faixa:hover .faixa-inner { animation-play-state: paused; } }
.faixa:focus-visible .faixa-inner { animation-play-state: paused; }
.faixa-track {
  display: flex; align-items: center;
  gap: var(--s-4);
  padding-right: var(--s-4); padding-left: var(--s-4);
}
.faixa-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--badge-gray);
  color: var(--ink-body);
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap;
}
.faixa-item {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.faixa-img { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* ============ 7. ARTE DAS MAQUININHAS (SVG) ============ */
.ma-body { fill: var(--machine); }
.ma-deep { fill: var(--machine-deep); }
.ma-key { fill: var(--machine-key); }
.ma-red { fill: var(--key-red); }
.ma-yellow { fill: var(--key-yellow); }
.ma-ok { fill: var(--green-deep); }
.ma-screen { fill: #F6FFF7; }
.ma-qr { fill: #FFFFFF; stroke: #1B221F; stroke-width: 1.5; }
.ma-txt {
  font: 700 9px/1 var(--font);
  letter-spacing: 0.2em;
  fill: var(--green-brand); text-anchor: middle;
}
.ma-logo {
  font: 800 18px/1 var(--font);
  letter-spacing: -0.03em;
  fill: var(--green-deep); text-anchor: middle;
}
.ma-logo--sm { font-size: 13px; }
.ma-logo--body { fill: #0B5E20; }

/* ============ 8. PROVA SOCIAL ============ */
#prova-social {
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-soft);
  /* v2.6 (15/07): estava curta demais (s-10) — a faixa branca ganhou respiro */
  padding: var(--s-16) 0;
}
.prova-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-8);
  max-width: 1080px;
  margin-inline: auto;
}
.prova-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-2);
}
.prova-num {
  font-size: 36px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prova-item > span { font-size: 13.5px; color: var(--ink-mid); max-width: 180px; }
.prova-stone { color: var(--green-brand); display: inline-flex; }
.prova-stone .ic { width: 30px; height: 30px; }

/* Selos REAIS (assets oficiais: Reclame Aqui, Google Play, App Store, StoneCo) */
.prova-selo { height: 24px; width: auto; margin-top: var(--s-1); }
.prova-selo--stone { height: 26px; margin-top: 0; filter: brightness(0); opacity: 0.82; }

/* ============ 9. RITMO DAS SEÇÕES ============ */
#simulador, #b2b, #depoimentos, #faq, #vantagens, #comparar {
  padding: var(--s-20) 0;
}

/* ============ 10. MODELOS (bloco verde-limão, cards oficiais) ============ */
#modelos {
  /* mesma luz de palco sutil do hero (assinatura premium, deltas ≤6%) */
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
    radial-gradient(150% 120% at 88% 112%, rgba(27, 34, 31, 0.05), rgba(27, 34, 31, 0) 52%),
    var(--lime);
  padding: var(--s-20) 0 var(--s-24);
}
#modelos .sec-sub { color: var(--green-dark); }

/* L3 (20/10): medidas do card do catálogo oficial — 4 cards de 308px com vão
   de 16px (1280px), card branco plano com borda #E6ECF2 e raio 16px, foto
   536x400 em 200px de altura vazando 104px acima do card. */
#modelos .container { max-width: 1344px; }   /* 1280 + 2×32 de respiro */
.modelos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 308px));
  justify-content: center;
  gap: var(--s-4);
  /* stretch: cards com a MESMA altura na linha (alinhamento do conjunto) */
}
.modelo-card {
  display: flex; flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-top: 104px;                /* espaço pra maquininha vazar pro alto */
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.modelo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.modelo-art {
  height: 200px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: -124px 0 var(--s-4);      /* arte vaza 104px acima do card (padrão oficial) */
}
/* Foto REAL do produto (showcase oficial 536x400) — altura fixa = zero CLS */
.modelo-art .modelo-img { height: 200px; width: auto; object-fit: contain; }

/* Tag da escada (B6/B20): "Mais completa" / "Mais vendida" / etc. */
.modelo-tag {
  align-self: center;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green-deep);
  background: var(--lime-soft);
  border-radius: var(--r-full);
  padding: 4px 12px;
  margin-bottom: var(--s-2);
}
/* Destaque oficial do catálogo (T3 Smart, destaque:true — não mover) */
.modelo-card--destaque {
  border: 2px solid var(--lime);
  box-shadow: var(--shadow-md);
}
.modelo-card--destaque .modelo-tag { background: var(--lime); color: var(--ink); }

.modelo-nome { font-size: 34px; line-height: 1.1; text-align: center; color: var(--ink); }
.modelo-desc {
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-align: center;
  margin-top: var(--s-1);
  min-height: 36px;                 /* 2 linhas: alinha selos e preços entre os cards */
}

/* Selos do card oficial: "71% OFF" + "CUPOM 20% OFF", dividindo a largura;
   o T1 (sem cupom) tem 1 selo só, ocupando a linha inteira. */
.modelo-badges {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-4);
  min-height: 26px;
  flex-wrap: nowrap;                /* nunca quebra: senão desalinha o resto do card */
}
.badge-off, .badge-cupom {
  flex: 1 1 0;
  text-align: center;
  font-size: 14px; font-weight: 700; line-height: 18px;
  border-radius: var(--s-1);        /* 4px = raio oficial do selo */
  padding: var(--s-1) var(--s-2);
  white-space: nowrap;
}
.badge-off { color: var(--green-deep); background: var(--lime-soft); }
.badge-mais { font-size: 14px; font-weight: 700; color: var(--blue); flex: none; }
.badge-cupom { color: var(--blue); background: rgba(43, 82, 232, 0.08); }
.badge-mais:empty, .badge-cupom:empty, .badge-off:empty { display: none; }

.modelo-preco {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font-variant-numeric: tabular-nums;
}
.preco-vista { display: flex; flex-direction: column; }
.preco-de {
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: line-through;
  min-height: 18px;
}
.preco-por { font-size: 16px; font-weight: 700; color: var(--green-dark); }
.preco-vista-label { font-size: 16px; font-weight: 500; color: var(--ink); }

.preco-parc { display: flex; align-items: center; gap: var(--s-1); }
.parc-x {
  display: flex; flex-direction: column;   /* "12x" sobre "R$" */
  font-size: 16px; font-weight: 500; line-height: 21px; color: var(--ink);
}
.parc-rs { font-weight: 600; color: var(--green-dark); }
.parc-val {
  display: flex; align-items: flex-start;  /* centavos alinhados no topo */
  font-size: 64px; line-height: 0.83;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.parc-cent { font-size: 24px; line-height: 1.2; }  /* centavos menores, padrão do card oficial */

.modelo-frete {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: 16px; font-weight: 500; color: var(--ink);
  margin-top: var(--s-4);
}
.modelo-frete .ic { width: 24px; height: 24px; color: var(--green-dark); }

.modelo-estoque { margin-top: var(--s-4); min-height: 34px; }
.estoque-bar {
  height: 6px; border-radius: var(--r-full);
  background: rgba(27, 34, 31, 0.08);
  overflow: hidden;
}
.estoque-fill {
  display: block; height: 100%; width: 100%;
  border-radius: var(--r-full);
  background: var(--green-brand);
  transform-origin: left center;
  transition: transform var(--d-slower) var(--ease-out), background-color var(--d-base);
}
.estoque-txt {
  display: block;
  font-size: 12px; color: var(--ink-mid);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.modelo-estoque.is-low .estoque-fill { background: var(--warn); }
.modelo-estoque.is-low .estoque-txt { color: var(--warn-text); font-weight: 700; }

.modelo-cta { margin-top: var(--s-4); width: 100%; min-height: 56px; font-size: 14px; }

.modelo-specs { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.modelo-specs li {
  font-size: 14px; color: var(--ink-mid);
  display: flex; align-items: center; gap: var(--s-2);
}
.ic-spec { width: 24px; height: 24px; flex: none; color: var(--green-dark); }

/* Telas entre 1025 e 1279px: os 4 cards ficam mais estreitos que 308px —
   selos e 12x encolhem um pouco pra caber numa linha. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .badge-off, .badge-cupom, .badge-mais { font-size: 12px; }
  .badge-off, .badge-cupom { padding-inline: var(--s-1); }
  .parc-val { font-size: 52px; }
  .preco-vista-label { font-size: 14px; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .modelo-card { padding: var(--s-4); }
  .modelo-badges { gap: var(--s-1); }
  .badge-off, .badge-cupom, .badge-mais { font-size: 11px; }
  .parc-val { font-size: 44px; }
  .preco-por { font-size: 15px; }
  .preco-vista-label, .parc-x { font-size: 13px; }
}

/* ============ 11. TAXAS ============ */
.taxas-promo {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--lime-soft);
  border: 1px solid rgba(0, 163, 52, 0.2);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin: 0 auto var(--s-8);
  color: var(--ink); font-weight: 600; font-size: 15px;
  max-width: 720px;
}
.taxas-promo .ic { color: var(--green-brand); margin-top: 2px; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 720px;
  margin-inline: auto;
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
.taxas-table {
  width: 100%; border-collapse: collapse;
  min-width: 420px;
  font-variant-numeric: tabular-nums;
}
.taxas-table th, .taxas-table td {
  text-align: left;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
}
.taxas-table thead th {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-mid);
  background: var(--bg-soft);
}
.taxas-table tbody tr:last-child th,
.taxas-table tbody tr:last-child td { border-bottom: 0; }
.taxas-table tbody th { font-weight: 600; color: var(--ink-mid); }
.taxas-table td { font-weight: 800; color: var(--ink); }
.taxas-table td.tx-hi { color: var(--green-dark); }

.taxas-nota {
  font-size: 13px; color: var(--ink-mid);
  margin-top: var(--s-4); text-align: center;
}

/* ============ 13. PIX (bloco verde-limão) ============ */
#pix {
  padding: var(--s-20) 0;
  background:
    radial-gradient(90% 100% at 50% 45%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
    var(--lime);
  text-align: center;
}
.pix-inner { display: flex; flex-direction: column; align-items: center; }
.pix-eyebrow {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--green-dark);
  margin-bottom: var(--s-2);
}
.pix-inner .sec-sub { max-width: 460px; color: var(--ink); }
.pix-display {
  font-size: clamp(64px, 13vw, 150px);
  line-height: 1;
  margin: var(--s-2) 0 var(--s-4);
  color: var(--ink);
}
.pix-display em {
  font-style: normal; color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
/* Marca oficial do Pix (extraída do manual BCB) — indica aceite, cores oficiais */
.pix-marca { height: 34px; width: auto; margin-top: var(--s-8); }
/* Condição oficial do 0% (mesma do pop-up) — claim nunca fica sem ela visível */
.pix-condicao {
  font-size: 12.5px; color: var(--green-dark);
  max-width: 520px; margin-top: var(--s-5);
  text-wrap: pretty;
}

/* ============ 14. DE GRAÇA — Promoção de Adesão (réplica 1:1 do oficial, v2.6 15/07) ============ */
/* Desktop-first (convenção do arquivo): imagem à ESQUERDA, texto+botões à direita */
#b2b { padding: var(--s-10) 0; background: var(--bg-0); }
.b2b-card {
  display: flex; flex-direction: row; align-items: stretch;
  overflow: hidden;
  background: var(--lime);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
/* Ilustração oficial (baixada do CDN da Ton) */
.b2b-art {
  position: relative;
  order: 1; width: 240px; flex: none;
  overflow: hidden;
}
.b2b-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.b2b-body {
  order: 2; flex: 1;
  display: flex; flex-direction: row; align-items: center; gap: var(--s-10);
  padding: var(--s-10);
}
.b2b-copy { flex: 1; max-width: 560px; }
.b2b-copy h2 { margin-bottom: var(--s-2); }
.b2b-copy h2 em { font-style: normal; color: var(--green-dark); }
.b2b-copy p { color: var(--ink); font-size: 17px; font-weight: 500; }
.b2b-ctas { flex: none; width: auto; min-width: 220px; display: flex; flex-direction: column; gap: var(--s-2); }
.b2b-ctas .btn { width: 100%; }

/* "Mais detalhes": botão fantasma — mesma caixa do sólido, sem preenchimento
   (medido ao vivo no oficial: bg transparente, texto --ink, sem borda) */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;   /* L6: ícone na MESMA linha do texto */
  min-height: 44px; white-space: nowrap;
  background: transparent; color: var(--ink);
  gap: var(--s-2);
}
.btn-ghost:hover { color: var(--green-deep); }
.btn-ghost .ic { width: 18px; height: 18px; }

/* ≤900: coluna estreita vira 140px (mesmo tier "md" do oficial) */
@media (max-width: 900px) {
  .b2b-art { width: 140px; }
}

/* ≤767 (breakpoint do oficial): empilha — imagem some pro FIM do card,
   texto e botões acima, largura total */
@media (max-width: 767px) {
  .b2b-card { flex-direction: column; }
  .b2b-art { order: 2; width: 100%; height: 120px; }
  .b2b-body { order: 1; flex-direction: column; align-items: stretch; gap: var(--s-6); padding: var(--s-6); }
  .b2b-copy { max-width: none; }
  .b2b-ctas { width: 100%; min-width: 0; }
}

/* ============ 15. BANDEIRAS ============ */
#bandeiras { padding: var(--s-12) 0; border-block: 1px solid var(--border-soft); }
.bandeiras-label {
  text-align: center;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mid);
  margin-bottom: var(--s-6);
}
.bandeiras-nota {
  text-align: center;
  font-size: 12px; color: var(--ink-mid);
  margin-top: var(--s-5);
  padding-inline: var(--s-4);
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-inner {
  display: flex; width: max-content;
  animation: mq 46s linear infinite;
}
.marquee-inner { will-change: transform; }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-inner { animation-play-state: paused; } }
.marquee:focus-within .marquee-inner,
.marquee.is-paused .marquee-inner,
.marquee.is-fora .marquee-inner { animation-play-state: paused; }   /* L11: fora da tela = parada */
.marquee-track { display: flex; gap: var(--s-4); padding-right: var(--s-4); }
.marquee-track li {
  font-size: 14px; font-weight: 600; color: var(--ink-mid);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--s-2) var(--s-5);
  white-space: nowrap;
}
/* Bandeiras com LOGOS OFICIAIS (SVGs baixados do próprio ton.com.br) */
.marquee-track--logos { gap: var(--s-8); padding-right: var(--s-8); align-items: center; }
.marquee-track--logos li { border: 0; border-radius: 0; padding: 0; display: flex; align-items: center; }
.marquee-track--logos img { height: 34px; width: auto; }
@keyframes mq { to { transform: translateX(-50%); } }
/* L11 (P2 do dono = A): celular e tablet = grade PARADA, como no oficial (pílulas 64×38, centradas);
   o 2º trilho (cópia pro laço) some. O animations.js não enche o trilho ≤ 900. PC continua andando. */
@media (max-width: 900px) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; padding-inline: var(--s-4); }
  .marquee-inner { animation: none; width: auto; will-change: auto; }
  .marquee-track + .marquee-track { display: none; }
  .marquee-track, .marquee-track--logos { flex-wrap: wrap; justify-content: center; gap: var(--s-3); padding: 0; }
  .marquee-track--logos li {
    width: 64px; height: 38px; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-0);
  }
  .marquee-track--logos img { height: auto; max-height: 22px; max-width: 48px; object-fit: contain; }
}

/* ============ 16. DEPOIMENTOS ============ */
.depo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5);
}
.depo-card {
  display: flex; flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.depo-head { display: flex; align-items: center; gap: var(--s-3); }
/* Avatar de iniciais premium (reserva quando o depoimento não tem foto; L10: o dono liberou retrato ilustrativo de IA — img.depo-foto) */
.depo-avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, var(--lime), rgba(136, 255, 0, 0.45));
  border: 1px solid rgba(27, 34, 31, 0.08);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 400; letter-spacing: 0.04em;
}
.depo-foto {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid rgba(27, 34, 31, 0.08);
  box-shadow: var(--shadow-sm);
}
.depo-nome { font-size: 15px; font-weight: 700; color: var(--ink); }
.depo-meta { font-size: 12.5px; color: var(--ink-mid); }
.depo-texto {
  font-size: 15px; color: var(--ink-body);
  margin: var(--s-4) 0 var(--s-5);
  flex: 1;
}
.depo-metrica {
  align-self: flex-start;
  font-size: 12.5px; font-weight: 700;
  color: var(--green-deep);
  background: var(--lime-soft);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

.depo-cta-wrap { text-align: center; margin-top: var(--s-10); }

/* Rótulo de compliance dos depoimentos (guardrail: placeholders rotulados) */
.depo-rotulo { font-size: 12.5px; color: var(--ink-mid); margin-top: var(--s-2); }

/* ============ 17. FAQ ============ */
.faq-list { display: grid; gap: var(--s-3); }
.faq-item {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out);
}
.faq-item[open] { border-color: var(--green-brand); box-shadow: var(--shadow-card); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 700; font-size: 16px; color: var(--ink);
  touch-action: manipulation;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
  width: 20px; height: 20px; flex: none;
  color: var(--green-brand);
  transition: transform var(--d-base) var(--ease-out);
}
.faq-item[open] .faq-chev { transform: rotate(45deg); }
.faq-a {
  padding: 0 var(--s-6) var(--s-4);
  color: var(--ink-mid); font-size: 15px;
  max-width: 640px;
}
.faq-cta {
  display: inline-block;
  margin: 0 var(--s-6) var(--s-5);
  font-size: 14px; font-weight: 700;
  color: var(--green-dark);
  min-height: 44px; line-height: 44px;
}
.faq-cta:hover { color: var(--green-deep); }

/* ============ 18. CTA FINAL (bloco escuro de urgência) ============ */
#cta-final {
  padding: var(--s-24) 0 var(--s-16);   /* L4: emenda no rodapé escuro (linha fina logo abaixo, como no oficial) */
  /* glow lime sutil descendo do topo: profundidade sem espetáculo */
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(136, 255, 0, 0.10), rgba(136, 255, 0, 0) 60%),
    var(--ink);
  text-align: center;
}
.ctafinal-inner { display: flex; flex-direction: column; align-items: center; }
.ctafinal-inner h2 { max-width: 640px; color: #FCFDFC; }
.urgency-clock--final { margin: var(--s-8) 0 var(--s-8); }
.ctafinal-proof {
  font-size: 14px; color: rgba(252, 253, 252, 0.75);
  margin-bottom: var(--s-5);
}
.ctafinal-proof b { color: var(--lime); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ctafinal-proof { padding-right: var(--s-16); } }   /* L11: livre da bolinha do WhatsApp */
.urgency-clock--final .t-box {
  min-width: clamp(72px, 12vw, 110px);
  font-size: clamp(44px, 8vw, 72px);
  padding: var(--s-2) var(--s-3);
}
.urgency-clock--final .t-sep { font-size: clamp(34px, 6vw, 52px); }
.ctafinal-micro { font-size: 13px; color: rgba(252, 253, 252, 0.6); margin-top: var(--s-5); }

/* ============ 18b. POP-UP DE TAXAS (réplica 1:1 do "Ver detalhes" oficial) ============ */
.txm {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.txm[hidden] { display: none; }
.txm-overlay {
  position: absolute; inset: 0;
  background: rgba(27, 34, 31, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.txm-card {
  position: relative;
  width: 100%; max-width: 768px;
  background: var(--bg-0);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-lg);
}
/* Variante compacta (pop-up "Mais detalhes" — só 1 bloco, sem grid de 2 colunas) */
.txm-card--sm { max-width: 460px; }
.txm-scroll { overflow-y: auto; max-height: calc(88dvh / var(--z)); }   /* ÷ zoom das telas largas (L6) */
.txm-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.txm-titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.2;
  color: var(--ink);
}
.txm-close {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mid);
  border-radius: var(--r-md);
  touch-action: manipulation;
}
.txm-close:hover { color: var(--ink); }
.txm-close .ic { width: 22px; height: 22px; }

/* Abas do mobile (como no oficial: somem no desktop 2 colunas) */
.txm-abas {
  display: none;
  grid-template-columns: 1fr 1fr; gap: var(--s-2);
  background: var(--bg-soft);
  border-radius: var(--r-full);
  padding: 4px;
  margin-bottom: var(--s-4);
}
.txm-abas a {
  text-align: center;
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 600;
  color: var(--ink-mid);
  touch-action: manipulation;
}
.txm-abas a.is-ativa {
  background: var(--bg-0);
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

.txm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.txm-col { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.txm-bloco h3 {
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin-bottom: var(--s-2);
}
.txm-bloco-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.txm-bloco-head h3 { margin-bottom: var(--s-2); }
.txm-reg {
  font-size: 14px; font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
  touch-action: manipulation;
}
.txm-reg:hover { color: var(--green-deep); }
.txm-box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.txm-texto p { font-size: 14px; line-height: 1.6; color: var(--ink-body); }
.txm-texto p + p { margin-top: var(--s-3); }

.txm-lista { display: grid; gap: var(--s-3); }
.txm-lista li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--s-3);
}
.txm-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.txm-item-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--ink-body);
}
.txm-item-valor { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }

/* Tooltip (i) — igual ao oficial: ícone info com balão no hover/foco */
.txm-tip { position: relative; display: inline-flex; }
.txm-tip-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mid);
  border-radius: var(--r-full);
  cursor: help;
  touch-action: manipulation;
}
.txm-tip-btn .ic { width: 19px; height: 19px; }
.txm-tip-text {
  position: absolute; bottom: calc(100% + 8px); right: -12px;
  width: 250px;
  background: var(--ink); color: #FFFFFF;
  font-size: 12.5px; font-weight: 400; line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-fast) var(--ease-out);
  pointer-events: none;
  z-index: 5;
}
.txm-tip:hover .txm-tip-text,
.txm-tip:focus-within .txm-tip-text { opacity: 1; visibility: visible; }

/* Seletores com rótulo flutuante (Vendas mensais / Bandeiras / Recebimento) */
.txm-box--taxas { padding: 0; overflow: hidden; }
.txm-selects {
  display: grid; gap: var(--s-3);
  background: var(--bg-soft);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
}
.txm-select { position: relative; display: block; }
.txm-select select {
  width: 100%; min-height: 56px;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-0);
  padding: 22px var(--s-10) 6px var(--s-3);
  font: 600 15px var(--font);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out);
}
.txm-select select:hover,
.txm-select select:focus { border-color: var(--green-brand); outline: none; }
.txm-select select:focus-visible { outline: 3px solid var(--green-brand); outline-offset: 2px; }
.txm-select-label {
  position: absolute; top: 8px; left: var(--s-3);
  font-size: 11.5px; font-weight: 600; color: var(--ink-mid);
  pointer-events: none;
}
.txm-chev {
  position: absolute; right: var(--s-3); top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink);
}

/* Tabela de taxas (Débito à vista, Crédito à vista, Parcelado 2..21) */
.txm-tabela {
  max-height: 384px; overflow-y: auto;
  padding: var(--s-2) var(--s-5) var(--s-4);
  /* barra SEMPRE visível e clicável (pedido do dono: a fina "quase invisível" não servia) */
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: rgba(27, 34, 31, 0.38) var(--bg-soft);
  overscroll-behavior: contain;                       /* a rodinha não "vaza" pro site */
}
.txm-tabela li {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.txm-tabela li:last-child { border-bottom: 0; }
.txm-tx-nome { color: var(--ink-body); }
.txm-tx-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.txm-tabela::-webkit-scrollbar { width: 10px; }
.txm-tabela::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: var(--r-full); }
.txm-tabela::-webkit-scrollbar-thumb {
  background: rgba(27, 34, 31, 0.38);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-soft);   /* respiro: o polegar fica gordinho e fácil de pegar */
}
.txm-tabela::-webkit-scrollbar-thumb:hover { background: rgba(27, 34, 31, 0.6); }

.txm-scroll { scrollbar-width: thin; scrollbar-color: rgba(27, 34, 31, 0.3) transparent; overscroll-behavior: contain; }
.txm-scroll::-webkit-scrollbar { width: 10px; }
.txm-scroll::-webkit-scrollbar-thumb { background: rgba(27, 34, 31, 0.3); border-radius: var(--r-full); }

/* Trava o scroll do fundo com o pop-up aberto (html E body: quem rola a página é o html) */
html.txm-aberto, body.txm-aberto { overflow: hidden; }

@media (max-width: 767px) {
  .txm { align-items: flex-end; padding: 0; }
  .txm-card { border-radius: var(--r-xl) var(--r-xl) 0 0; max-width: none; }
  .txm-scroll { max-height: 92dvh; }
  .txm-abas { display: grid; }
  .txm-grid { grid-template-columns: 1fr; }
  .txm-tip-text { width: 210px; }
}

/* ============ 19. FOOTER ============ */
/* L4: rodapé do oficial — fundo #1B221F (--ink) emendado no #cta-final (que
   faz o papel da faixa "Junte-se aos…" do oficial), linha fina, 4 colunas com
   título apagado em caixa-alta e links brancos 16px, texto legal + logo. */
footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-bottom: var(--s-10);
}
.footer-wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--s-10); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-10);
  padding: var(--s-12) 0;
  border-top: 1px solid var(--dark-line-soft);
}
.footer-grid h3 {
  font-size: 14px; font-weight: 500;
  text-transform: uppercase;
  color: var(--on-dark-mid);       /* oficial = branco 40 %; aqui ≥7:1 (AA) */
  margin-bottom: var(--s-3);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 560px) { .footer-col { gap: var(--s-3); } }   /* L11: links de 2–3 linhas não colam um no outro */
.footer-col a {
  font-size: 16px; color: var(--on-dark);
  padding: var(--s-1) 0;
  transition: color var(--d-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--lime); }
@media (pointer: coarse) {
  .footer-col a { padding: var(--s-3) 0; }   /* alvo de toque ≥44px (contrato §6) */
}
.footer-col p { font-size: 14px; color: var(--on-dark-mid); padding: var(--s-1) 0; }

.footer-base {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-10);
  padding-top: var(--s-10);
  border-top: 1px solid var(--dark-line-soft);
}
.footer-legal-txt { max-width: 960px; }
.footer-disclaimer {
  /* disclaimer é linha vermelha AFP: precisa de AA — --on-dark-mid (≥7:1 no --ink) */
  font-size: 16px; color: var(--on-dark-mid);
  line-height: 1.6;
}
.footer-endereco { font-size: 14px; color: var(--on-dark-mid); margin-top: var(--s-2); }
.footer-endereco:empty { display: none; }
/* L11 (P4 do dono): linha do fornecedor (Stone), igual ao rodapé do ton.com.br; vazio = some */
.footer-fornecedor { font-size: 12px; line-height: 1.5; color: var(--on-dark-mid); margin-top: var(--s-1); }
.footer-fornecedor:empty, .footer-col p:empty { display: none; }
.footer-copy { font-size: 14px; color: var(--on-dark-mid); margin-top: var(--s-3); }
.footer-logo { flex: none; }
.footer-logo .logo-svg { color: var(--on-dark); }
@media (max-width: 640px) {
  .footer-wrap { padding-inline: var(--s-4); }
  .footer-grid { gap: var(--s-8) var(--s-4); padding: var(--s-10) 0; }
  .footer-base { flex-direction: column-reverse; align-items: flex-start; gap: var(--s-6); }
  .footer-disclaimer { font-size: 14px; }
  .footer-logo .logo-svg { width: 92px; height: 70px; }
}

/* ============ 20. RESPONSIVO ============ */
@media (max-width: 1080px) {
  /* nav some mais cedo: entre 901–1080 não cabia logo + 4 links + chip do
     timer + CTA sem quebrar em 2 linhas (salto de layout no scroll) */
  .header-nav { display: none; }
  .header-card { justify-content: space-between; }
  .header-timer { margin-left: auto; }
}

@media (max-width: 1024px) {
  .container { padding-inline: var(--s-6); }
  .prova-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-8); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .modelos-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-beneficios { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .benef-item + .benef-item { border-left: 0; }
}

@media (max-width: 900px) {
  section { scroll-margin-top: 84px; }

  #hero { padding: calc(var(--s-8) + var(--hdr-overlap)) 0 var(--s-12); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .hero-scene { max-width: 400px; }
  .hero-foto { width: min(72%, 320px); }
  .hero-below { margin-top: var(--s-12); }

  #simulador, #taxas, #b2b, #depoimentos, #faq { padding: var(--s-16) 0; }
  #modelos, #pix { padding: var(--s-16) 0 var(--s-20); }

  /* tablet/mobile: só o cronômetro central (as pílulas de reforço são secundárias) */
  .count-pill { display: none; }
  .count-inner { justify-content: center; }
}

@media (max-width: 700px) {
  .hero-taxas { grid-template-columns: repeat(2, 1fr); }
}

/* L6: no celular os cards viram CARROSSEL de deslizar (padrão do catálogo oficial:
   card de 308px, o próximo aparecendo na borda). A faixa encosta nas bordas da tela
   (margem negativa = respiro do .container) e cada card "trava" no lugar. */
@media (max-width: 640px) {
  .modelos-grid {
    display: flex; gap: var(--s-3); justify-content: flex-start;   /* center cortaria o 1º card */
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-6);
    margin-inline: calc(-1 * var(--s-6)); padding: 0 var(--s-6) var(--s-4);
    scrollbar-width: none;
  }
  .modelos-grid::-webkit-scrollbar { display: none; }
  .modelo-card { flex: 0 0 min(308px, calc(100% - var(--s-10))); scroll-snap-align: center; }   /* L12: no meio */
  .modelo-card:hover { transform: none; }
  /* Depoimentos: mesmo carrossel (6 cartões empilhados davam ~2.000px de rolagem) */
  .depo-grid {
    display: flex; gap: var(--s-3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-6);
    margin-inline: calc(-1 * var(--s-6)); padding: var(--s-1) var(--s-6) var(--s-4);
    scrollbar-width: none;
  }
  .depo-grid::-webkit-scrollbar { display: none; }
  .depo-card { flex: 0 0 min(308px, calc(100% - var(--s-10))); scroll-snap-align: start; }
}

@media (max-width: 560px) {
  :root { --hdr-overlap: 68px; }   /* 8 pad + card 60 */
  .container { padding-inline: var(--s-4); }
  .modelos-grid, .depo-grid { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); }
  .prova-grid { grid-template-columns: repeat(2, 1fr); }
  .prova-item--stone { grid-column: 1 / -1; }
  .prova-num { font-size: 26px; }

  .hero-ctas .btn { width: 100%; }
  .hero-scene { max-width: 330px; }
  .hero-foto { width: min(70%, 250px); }
  .hero-badge { font-size: 11px; letter-spacing: 0.07em; }
  .taxa-num { font-size: 26px; }
  .taxa-label { font-size: 13.5px; }
  .hero-taxas-nota { font-size: 14px; }
  .taxas-detalhes { font-size: 14px; }
  .hero-beneficios { grid-template-columns: 1fr; padding: var(--s-3); }
  .benef-item { padding: var(--s-2) var(--s-2); }
  .faixa-item { font-size: 14px; }

  .count-inner { flex-direction: column; gap: var(--s-3); }
  .count-pill { display: none; }         /* compacto no mobile: só o cronômetro (reforços vão no hero) */
  .count-card { width: 100%; max-width: 380px; padding-inline: var(--s-4); }
  .count-clock { gap: var(--s-2); }
  .t-box { min-width: 52px; font-size: 28px; }

  .btn-xl { width: 100%; min-height: 60px; font-size: 17px; padding: 0 var(--s-6); }

  /* Header no scroll: logo + chip do timer + CTA precisam caber em 375 (D17) */
  .header-card { gap: var(--s-2); min-height: 60px; padding-inline: var(--s-4); }
  .logo-svg { width: 74px; height: 56px; }
  /* "parceiro" legível também no mobile (linha AFP): compensa a escala menor */
  .logo-parceiro { font-size: 7px; }
  .header-timer { font-size: 11.5px; padding: 4px 7px; }
  .header-cta { font-size: 13.5px; padding: 0 var(--s-3); }
}

/* ============ 21. MOVIMENTO REDUZIDO ============ */
/* ============ L1 (20/10) — seções no molde /maquininhas ============ */
/* Hero com a arte principal do site oficial: mesmo degradê lima → quase branco do banner
   (cores medidas nas bordas do arquivo oficial) e a pessoa recortada, com as bordas
   esmaecidas por máscara para fundir no degradê sem "caixa". */
#hero {
  background: linear-gradient(100deg, #C2FA66 0%, #CBFB7B 30%, #D9FC9E 55%, #F2FEDC 100%);
}
.hero-scene { max-width: 620px; }
.hero-scene::before { display: none; }
.hero-foto--oficial {
  width: 100%; max-width: none; height: auto;
  filter: none; animation: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* Faixas de taxa (#tiers): cards brancos 240×236, linha com scroll-snap */
#tiers { padding: var(--s-16) 0 var(--s-12); background: var(--bg-soft); }
.tiers-toggle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2); margin-bottom: var(--s-8);
}
.tiers-toggle-rot { font-weight: 700; color: var(--ink); margin-right: var(--s-2); }
.tiers-opt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--bg-0); color: var(--ink);
  font: 600 15px/1 var(--font); cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.tiers-opt .ic { width: 18px; height: 18px; }
.tiers-opt.is-on { background: var(--green-deep); border-color: var(--green-deep); color: #FCFDFC; }
.tiers-track {
  display: flex; gap: var(--s-4); justify-content: safe center;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-1) var(--s-1) var(--s-4);
}
.tier-card {
  flex: 1 1 0; min-width: 210px; max-width: 240px; min-height: 236px; scroll-snap-align: start;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: 16px;
  padding: var(--s-5); box-shadow: var(--shadow-card);
}
.tier-rot { font-size: 13px; color: var(--ink-mid); }
.tier-faixa { font-weight: 800; color: var(--ink); margin-bottom: var(--s-3); }
.tier-linhas > div {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-2) 0; border-top: 1px solid var(--border-soft);
}
.tier-linhas dt { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); }
.tier-linhas dd { font: 400 22px/1 var(--font-display); color: var(--green-dark); }
.tier-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--lime); color: var(--ink); font: 700 12px/1.4 var(--font);
}
.tier-dica {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px;
  border-radius: 50%; border: 1px solid var(--ink-low); font: 700 10px/1 var(--font);
  color: var(--ink-mid); cursor: help; text-transform: none;
}
.tiers-mais { text-align: center; margin-top: var(--s-4); }

/* Simulador = calculadora oficial ("Simule as taxas das suas vendas"): card de 912px, raio 40,
   arte 3D à esquerda e formulário à direita; empilha no celular */
.sim-card {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); align-items: center;
  max-width: 912px; margin: 0 auto; padding: var(--s-8);
  background: var(--bg-0); border: 1px solid var(--border); border-radius: 40px; box-shadow: var(--shadow-card);
}
.sim-arte img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.sim-titulo { font: 400 34px/1 var(--font-display); text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-5); }
.sim-campos { display: grid; gap: var(--s-3); }
.sim-campo { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-mid); }
.sim-campo select, .sim-campo input {
  min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-0); font: 600 16px/1 var(--font); color: var(--ink);
}
.sim-faixa { width: 100%; height: 32px; accent-color: var(--green-deep); cursor: pointer; }   /* L6: área de toque maior, trilho igual */
.sim-res { list-style: none; margin: var(--s-6) 0 var(--s-4); padding: 0; border-top: 1px solid var(--border-soft); }
.sim-res li {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "nome tx valor" "rot tx valor";
  align-items: center; column-gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-soft);
}
.sim-res-nome { grid-area: nome; font-weight: 800; color: var(--ink); }
.sim-res-nome select { border: 0; background: transparent; padding: 0; min-height: 44px; font: 800 16px/1.2 var(--font); color: var(--ink); cursor: pointer; }   /* L6: toque ≥44px */
.sim-res-rot { grid-area: rot; font-size: 12.5px; color: var(--ink-mid); }
.sim-res b { grid-area: tx; font: 600 14px/1 var(--font); color: var(--ink-mid); }
.sim-res strong { grid-area: valor; font: 400 26px/1 var(--font-display); color: var(--green-dark); }
.sim-mais { font-size: 15px; }
.sim-cta { text-align: center; margin-top: var(--s-8); }
/* L6: no tablet (768–900) continua lado a lado, só com a arte menor — empilhar dava 1.500px de rolagem */
@media (max-width: 900px) {
  .sim-card { grid-template-columns: 0.7fr 1.3fr; gap: var(--s-6); border-radius: 28px; padding: var(--s-6); }
}
@media (max-width: 767px) {
  .sim-card { grid-template-columns: 1fr; }
  .sim-arte img { max-height: 300px; margin: 0 auto; }
}

/* Vantagens (bento oficial): 1ª linha card largo verde-escuro + card lima; 2ª linha 3 cards lima */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.bento-card {
  position: relative; overflow: hidden; min-height: 480px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--lime); color: var(--ink); border-radius: 24px; padding: var(--s-8);
}
.bento-card--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: var(--s-6); }
.bento-card--dark { background: var(--brand-ton); color: #FCFDFC; }
.bento-txt h3 { font: 400 34px/1.05 var(--font-display); text-transform: uppercase; margin-bottom: var(--s-3); }
.bento-txt p { font-size: 17px; line-height: 1.45; max-width: 34ch; }
.bento-card--dark .bento-txt h3 { color: #FCFDFC; }
.bento-card--dark .bento-txt p { color: rgba(252, 253, 252, 0.85); }
.bento-img { width: 100%; max-width: 300px; height: auto; align-self: center; margin-top: var(--s-6); }
.bento-card--wide .bento-img { max-width: 380px; margin-top: 0; }
.bento-card--wide .bento-txt { flex: 1 1 0; min-width: 0; }
/* L6: 901–1180 a arte do card largo espremia o texto em 4–5 linhas estreitas */
@media (max-width: 1180px) {
  .bento-card--wide .bento-img { max-width: 300px; }
  .bento-txt h3 { font-size: 30px; }
}

/* Compare as maquininhas: 5 colunas fixas, rolagem horizontal no celular */
.cmp-wrap { overflow-x: auto; border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-card); background: var(--bg-0); }
.cmp { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; }
.cmp th, .cmp td { padding: var(--s-4); text-align: center; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.cmp thead th { vertical-align: bottom; background: var(--bg-soft); }
.cmp-canto { text-align: left !important; font: 400 26px/1 var(--font-display); color: var(--ink); }
.cmp-img { display: block; height: 130px; width: auto; margin: 0 auto var(--s-2); object-fit: contain; }
.cmp-nome { display: block; font-weight: 800; color: var(--ink); }
.cmp-parc { display: block; font-size: 14px; color: var(--ink-mid); margin: 2px 0 var(--s-3); }
.cmp-parc b { color: var(--green-dark); }
.cmp tbody th { text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); }
.cmp td { font-size: 14px; color: var(--ink-body); }
.cmp td .ic { display: block; width: 22px; height: 22px; margin: 0 auto 4px; }
.cmp-sim .ic { color: var(--green-brand); }
.cmp-nao .ic { color: var(--danger); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
/* L6: no celular a coluna dos nomes fica PRESA à esquerda enquanto a tabela desliza
   (até 900: no tablet 768 os 700px cabem inteiros, sem barra de rolagem) */
@media (max-width: 900px) {
  .cmp { min-width: 700px; border-collapse: separate; border-spacing: 0; }   /* "collapse" deixa fresta na coluna presa */
  .cmp th:first-child, .cmp td:first-child { width: 128px; }
  .cmp th, .cmp td { padding: var(--s-3); }
  .cmp tbody th, .cmp-canto {
    position: sticky; left: 0; z-index: 1;
    box-shadow: 1px 0 0 var(--border-soft), 6px 0 10px -6px rgba(27, 34, 31, 0.18);
  }
  .cmp tbody th { background: var(--bg-0); font-size: 14px; }
  .cmp-canto { background: var(--bg-soft); font-size: 22px; }
  .cmp-img { height: 104px; }
}

/* Depoimentos: título à esquerda, notas das lojas à direita (oficial) */
header.depo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-10); flex-wrap: wrap; }
header.depo-head h2 { max-width: 620px; }
.depo-notas { display: flex; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
.depo-notas li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.depo-notas strong { font: 400 34px/1 var(--font-display); color: var(--ink); }
.depo-notas small { font: 600 14px/1 var(--font); color: var(--ink-mid); margin-left: 2px; }
.depo-notas img { height: 22px; width: auto; max-width: none; object-fit: contain; }   /* L6: não achata no 320px */

/* FAQ: 2 colunas, fundo cinza-esverdeado, título fixo à esquerda */
#faq { background: #EEF1F0; }
.faq-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--s-12); align-items: start; }
.faq-aside { position: sticky; top: 96px; }

/* Chamada final no padrão "JUNTE-SE AOS 4.680.875 EMPREENDEDORES" */
.ctafinal-kicker { font: 700 15px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: var(--s-2); }
.ctafinal-inner h2 { text-transform: uppercase; }
.ctafinal-num { color: var(--lime); font-variant-numeric: tabular-nums; }
.ctafinal-sub { color: rgba(252, 253, 252, 0.8); font-size: 18px; margin-top: var(--s-2); }

/* L6: tablet = card largo em cima + 2×2 lima (uma coluna só dava 2.600px de rolagem); celular empilha */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .bento-card { min-height: 360px; padding: var(--s-6); }
  .bento-card--wide { grid-column: 1 / -1; }
  .bento-txt h3 { font-size: 26px; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .faq-aside { position: static; }
  .tiers-track { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card--wide { flex-direction: column; }
  /* L6: ritmo vertical do celular — seções brancas seguidas somavam 128–160px de vão;
     agora 48 + 48 = 96px entre elas (as de fundo próprio mantêm o respiro maior) */
  #b2b, #simulador, #vantagens, #comparar, #depoimentos { padding-block: var(--s-12); }
}
@media (max-width: 560px) {
  .tier-card { flex-basis: 200px; min-height: 200px; padding: var(--s-4); }
  .depo-notas { gap: var(--s-4) var(--s-5); flex-wrap: wrap; }   /* L6: no 320px as notas descem em vez de espremer */
  .depo-notas strong { font-size: 28px; }
  .cmp { min-width: 700px; }
}

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

/* =====================================================================
   L7 (20/10) — PROPORÇÕES DO OFICIAL. Pedido do dono: "a maioria das coisas
   está muito grande; base na estrutura do oficial, proporções nos mínimos
   detalhes". Régua medida AO VIVO no ton.com.br/maquininhas em 375/768/1440/1920.
   O oficial usa "Ton Condensed" 700; a Anton é ~13% maior no olho (altura da
   maiúscula 86 × 75 em 100px), então: oficial 48px = 42 aqui · 38 = 33 ·
   34 = 30 · 24 = 21. Botões: 56px de altura, Inter 14px 600, raio 20.
   ===================================================================== */

/* --- Títulos: oficial 38px até o tablet e 48px no computador --- */
h1, h2 { font-size: 33px; line-height: 1.1; }
@media (min-width: 1024px) { h1, h2 { font-size: 42px; } }
@media (max-width: 360px) { h1, h2 { font-size: 30px; } }
.sec-head { margin-bottom: var(--s-8); }
.sec-sub { font-size: 16px; margin-top: var(--s-3); }
@media (min-width: 1024px) { .sec-sub { font-size: 18px; } }

/* --- Botões (oficial: 56px, 14px 600) --- */
.btn-lg { font-size: 14px; padding-inline: var(--s-6); }
.btn-xl { min-height: 56px; font-size: 15px; padding-inline: var(--s-10); }

/* --- Seções: respiro do oficial (64 no computador, 48 no tablet/celular) --- */
#simulador, #b2b, #depoimentos, #faq, #vantagens, #comparar { padding: var(--s-16) 0; }
#modelos { padding: var(--s-12) 0 var(--s-16); }
@media (max-width: 900px) {
  #simulador, #depoimentos, #faq, #vantagens, #comparar { padding: var(--s-12) 0; }
  #b2b { padding: var(--s-10) 0; }
  #modelos { padding: var(--s-10) 0 var(--s-12); }
}

/* --- Faixa do cronômetro: mais baixa (era 222px no computador) --- */
.urgency-bar { padding: var(--s-4) 0 var(--s-5); }
.count-card { padding-block: var(--s-3) var(--s-4); }
.count-titulo { margin-bottom: var(--s-2); }

/* --- Hero: compacto como o do oficial --- */
#hero { padding: calc(var(--s-10) + var(--hdr-overlap)) 0 var(--s-10); }
.hero-grid { gap: var(--s-10); }
.hero-badge { margin-bottom: var(--s-4); padding: 6px 12px; font-size: 12px; }
.hero-sub { font-size: 16px; margin-top: var(--s-4); max-width: 480px; }
@media (min-width: 1024px) { .hero-sub { font-size: 18px; } }
.hero-ctas { margin-top: var(--s-6); gap: var(--s-3); }
.hero-trust { margin-top: var(--s-4); font-size: 12.5px; padding: 6px 12px; }
.hero-scene { max-width: 460px; }
.hero-below { margin-top: var(--s-10); }
/* As 4 taxas = o cartão verde-escuro do oficial (740×138 no computador, 335×122 no celular, raio 16) */
.hero-taxas {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  max-width: 740px; padding: var(--s-4) var(--s-2);
  background: var(--brand-ton); border-radius: 16px; box-shadow: var(--shadow-card);
}
.taxa-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: var(--s-1); gap: var(--s-1); }
.taxa-num { font-size: 29px; line-height: 1.1; color: #FCFDFC; }
.taxa-label { font-size: 13px; font-weight: 600; color: rgba(252, 253, 252, 0.85); }
.hero-taxas-nota { font-size: 14px; margin-top: var(--s-4); }
.taxas-detalhes { font-size: 14px; }
.hero-beneficios { margin-top: var(--s-8); padding: var(--s-3); }
.benef-ic { width: 40px; height: 40px; }
.benef-ic .ic { width: 20px; height: 20px; }
.benef-tx strong { font-size: 14px; }
.benef-tx span { font-size: 12px; }
.hero-social { margin-top: var(--s-6); font-size: 13px; }
@media (max-width: 900px) {
  #hero { padding: calc(var(--s-6) + var(--hdr-overlap)) 0 var(--s-10); }
  .hero-grid { gap: var(--s-8); }
  .hero-scene { max-width: 360px; }
}
/* Tablet (768–900): texto e foto lado a lado, como no computador (empilhado dava 1.240px de topo) */
@media (min-width: 768px) and (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6); }
  .hero-scene { max-width: 320px; }
}
@media (max-width: 700px) {
  .hero-taxas { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--s-4) var(--s-1); }
  .taxa-num { font-size: 21px; }
  .taxa-label { font-size: 12px; }
}
@media (max-width: 560px) {
  .hero-scene { max-width: 300px; }
  .taxa-num { font-size: 21px; }
  .taxa-label { font-size: 12px; }
  .hero-taxas-nota { font-size: 14px; }
  .hero-beneficios { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); padding: var(--s-2); }
  .benef-item { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-2); }
  .benef-item + .benef-item { border-left: 0; }
}

/* --- Faixas de taxa (#tiers): cartão oficial 240×236 (200×200 no celular), letra Inter pequena --- */
#tiers { padding: var(--s-12) 0 var(--s-10); }
#tiers .sec-head { margin-bottom: var(--s-5); }
/* no oficial esta frase é uma linha em Inter negrito (não um título grande) */
#tiers h2 { font: 700 16px/1.35 var(--font); }
@media (min-width: 1024px) { #tiers h2 { font-size: 20px; } }
.tiers-toggle { margin-bottom: var(--s-6); }
@media (max-width: 560px) { .tiers-toggle-rot { flex-basis: 100%; text-align: center; margin: 0 0 var(--s-1); } }
.tiers-toggle-rot { font-size: 14px; }
.tiers-opt { min-height: 36px; padding: 0 var(--s-4); font-size: 14px; }
@media (pointer: coarse) { .tiers-opt { min-height: 44px; } }
.tier-card { flex: 0 0 240px; min-width: 0; max-width: none; min-height: 236px; padding: var(--s-4); }
.tier-rot { font-size: 14px; font-weight: 500; }
.tier-faixa { font-size: 14px; font-weight: 700; margin-bottom: var(--s-2); }
.tier-linhas dt { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.tier-linhas dd { font: 600 14px/1 var(--font); }
.tiers-mais { margin-top: var(--s-2); }
@media (max-width: 560px) {
  .tier-card { flex-basis: 200px; min-height: 200px; }
  .tier-linhas dd { font-size: 12px; }
}

/* --- Maquininhas: nome 34px oficial = 30 aqui; carrossel até o tablet (como o oficial) --- */
.modelo-nome { font-size: 30px; }
@media (max-width: 1024px) {
  .modelos-grid {
    display: flex; gap: var(--s-4); justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-6);
    margin-inline: calc(-1 * var(--s-6)); padding: 0 var(--s-6) var(--s-4);
    scrollbar-width: none;
  }
  .modelos-grid::-webkit-scrollbar { display: none; }
  /* L12 (dono, 22/10): o card trava NO MEIO — o anterior e o próximo aparecem nas bordas, e a pessoa vê
     que dá pra voltar (com "start" o anterior sumia inteiro). O 1º e o último encostam na borda sozinhos. */
  .modelo-card { flex: 0 0 308px; scroll-snap-align: center; }
  .modelo-card:hover { transform: none; }
}
@media (max-width: 640px) {
  .modelo-card { flex-basis: min(308px, calc(100% - var(--s-10))); }
}
@media (max-width: 560px) {
  .modelos-grid { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); }
}

/* --- Simulador (oficial: título 34/38, valores 24/34, campos 38px 14px) --- */
.sim-titulo { font-size: 30px; text-transform: none; margin-bottom: var(--s-4); }
.sim-res strong { font-size: 21px; }
.sim-campo select, .sim-campo input { min-height: 40px; font-size: 14px; font-weight: 700; }
@media (pointer: coarse) { .sim-campo select, .sim-campo input { min-height: 44px; font-size: 16px; } }   /* 16px: o iPhone não dá zoom ao tocar */
@media (min-width: 1024px) {
  .sim-titulo { font-size: 33px; }
  .sim-res strong { font-size: 29px; }
}

/* --- Vantagens (bento oficial: raio 40, respiro 40, 480px de altura; 3 colunas até o tablet) --- */
.bento { gap: var(--s-5); }
.bento-card { min-height: 480px; padding: var(--s-10); border-radius: 40px; }
.bento-txt h3 { font-size: 30px; line-height: 1.1; text-transform: none; }
.bento-txt p { font-size: 16px; }
.bento-card--wide .bento-img { max-width: 320px; }   /* arte 497×624: 320 de largura = 400 de altura → card de 480 como o oficial */
@media (max-width: 1180px) { .bento-txt h3 { font-size: 26px; } .bento-card--wide .bento-img { max-width: 280px; } }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .bento-card { min-height: 400px; padding: var(--s-6); border-radius: 32px; }
  .bento-card--wide { grid-column: span 2; }
  .bento-txt h3 { font-size: 21px; }
  .bento-txt p { font-size: 14px; }
  .bento-img { max-width: 200px; }
  .bento-card--wide .bento-img { max-width: 240px; }
}
/* L11 (C10): o cartão da lei saiu da grade (fica logo abaixo, linha inteira, com botão) */
.bento ~ .bento-card--lei { margin-top: var(--s-5); }
@media (max-width: 1023px) { .bento ~ .bento-card--lei { margin-top: var(--s-4); } }
.bento-dots { display: none; }
/* L11 (C10) · celular (< 768): as 5 vantagens viram CARROSSEL deitado (ordem do oficial), cartões de 340 px,
   arte embaixo à direita, pontinhos embaixo. Antes: ~2.500 px de rolagem em pé. */
@media (max-width: 767px) {
  .bento {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3);
    padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); margin-inline: calc(-1 * var(--s-4));
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento-card, .bento-card--wide {
    flex: 0 0 82%; max-width: 320px; height: 340px; min-height: 0;
    grid-column: auto; flex-direction: column; justify-content: flex-start; gap: 0;
    padding: var(--s-5); border-radius: var(--r-xl);
    scroll-snap-align: start; box-shadow: var(--shadow-card);
  }
  .bento-txt h3 { font-size: 21px; }
  .bento-txt p { font-size: 14px; }   /* texto inteiro (o do cartão escuro vai a 4 linhas e cabe nos 340) */
  .bento-img, .bento-card--wide .bento-img {
    width: auto; max-width: 100%; max-height: 150px; margin-top: auto; align-self: flex-end;
  }
  .bento-card--wide .bento-img { max-height: 160px; }
  .bento-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-3); }
  .bento-dots i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--badge-gray); transition: width var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
  .bento-dots i.is-on { width: 18px; background: var(--lime); }
  .bento-card--lei { flex: none; max-width: none; height: auto; border-radius: var(--r-xl); box-shadow: none; scroll-snap-align: none; }
  .bento-card--lei .btn { align-self: stretch; }
}

/* --- Depoimentos: carrossel até o tablet (o oficial é carrossel em todos os tamanhos) --- */
.depo-notas strong { font-size: 30px; }
@media (max-width: 1024px) {
  .depo-grid {
    display: flex; gap: var(--s-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-6);
    margin-inline: calc(-1 * var(--s-6)); padding: var(--s-1) var(--s-6) var(--s-4);
    scrollbar-width: none;
  }
  .depo-grid::-webkit-scrollbar { display: none; }
  .depo-card { flex: 0 0 308px; scroll-snap-align: start; }
}
@media (max-width: 640px) { .depo-card { flex-basis: min(308px, calc(100% - var(--s-10))); } }
@media (max-width: 560px) {
  .depo-grid { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); }
  .depo-notas strong { font-size: 26px; }
}

/* --- Perguntas: oficial 20px no computador, 16px no celular (Inter 600) --- */
.faq-item summary { font-weight: 600; padding: var(--s-4) var(--s-5); }
@media (min-width: 1024px) { .faq-item summary { font-size: 18px; } }

/* --- Chamada final --- */
#cta-final { padding: var(--s-16) 0 var(--s-12); }
.ctafinal-kicker { font-size: 13px; }
.ctafinal-sub { font-size: 16px; }

/* =====================================================================
   L8 (21/10) — CONVERSÃO. Blocos novos da home (estratégia KIT/estrategia,
   itens 1–40). Só ACRESCENTA regras: as medidas do L7 (régua do oficial)
   continuam valendo. Celular = até 900px; computador = acima.
   ===================================================================== */
:root {
  --buybar-h: 64px;              /* L8 aditivo: altura da barra fixa de compra do celular (systems.js) */
}

/* Promoção de Adesão vencida: systems.js põe [hidden] no bloco e nos links */
[data-adesao][hidden] { display: none !important; }
/* L11: botões de WhatsApp somem enquanto o número real não entra no data.js (systems.js põe [hidden]) */
[data-cta^="whatsapp"][hidden], li[hidden] { display: none !important; }

/* --- Faixa de promoção (item 17): substituída no L10 (A2) — ver bloco L10 no fim --- */

/* --- Cronômetro do topo COMPACTO no celular (item 24): mesma informação, 1 linha --- */
@media (max-width: 560px) {
  .urgency-bar { padding: var(--s-2) 0; }
  .count-inner { flex-direction: row; justify-content: center; }
  .count-card {
    display: flex; align-items: center; justify-content: center; gap: var(--s-3);
    width: auto; max-width: none;
    padding: var(--s-1) var(--s-4);
    border-radius: var(--r-full);
    box-shadow: none;
  }
  .count-titulo { margin: 0; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; }
  .count-clock { align-items: center; gap: var(--s-1); }
  .count-clock .t-unit { flex-direction: row; gap: 0; }
  .count-clock .t-label { display: none; }
  .count-clock .t-box { min-width: 34px; padding: 2px var(--s-1); font-size: 20px; line-height: 1.2; border-radius: var(--r-sm); }
  .count-clock .t-sep { margin-top: 0; align-self: center; font-size: 16px; }
}

/* --- Chip de preço do hero (item 3) --- */
.hero-preco { margin-top: var(--s-5); }
.hero-preco-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  max-width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(27, 34, 31, 0.10);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-card);
  font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.hero-preco-link:hover { background: var(--bg-0); border-color: rgba(27, 34, 31, 0.24); }
.hero-preco-link .ic { width: 18px; height: 18px; color: var(--green-dark); }
.hero-preco-link b { font-weight: 800; color: var(--green-dark); white-space: nowrap; }
.hero-preco + .hero-ctas { margin-top: var(--s-4); }
.hero-preco-frete[hidden] { display: none; }
/* H1 de variante (?k=) é frase longa: um degrau abaixo pra não empurrar o botão */
h1.h1-variante { font-size: 30px; }
@media (min-width: 1024px) { h1.h1-variante { font-size: 38px; } }
@media (max-width: 360px) { h1.h1-variante { font-size: 27px; } }

/* --- Condição das taxas (item 10): 1 linha no computador, 2 no celular --- */
.nota-cond { display: block; font-weight: 600; }
@media (min-width: 901px) { .hero-taxas-nota { max-width: 1120px; margin-inline: auto; } }

/* --- "Como funciona o pedido" (item 5) --- */
.passos-wrap {
  max-width: 1120px; margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--s-6);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 34, 31, 0.06);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.passos-titulo {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-deep); text-align: center;
  margin-bottom: var(--s-4);
}
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; }
.passo { display: flex; align-items: center; gap: var(--s-3); }
.passo-ic {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--lime); color: var(--green-deep);
  border: 1px solid rgba(27, 34, 31, 0.08);
}
.passo-ic .ic { width: 20px; height: 20px; }
.passo-n {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 var(--s-1);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--green-deep); color: #FCFDFC;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.passo-tx { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.passo-tx strong { font-weight: 800; }
/* No computador mora sob os cards (#modelos); no celular logo depois do hero */
.passos-wrap--cel { display: none; }
@media (max-width: 900px) {
  .passos-wrap--pc { display: none; }
  .passos-wrap--cel { display: block; margin-top: var(--s-8); padding: var(--s-4); }
  .passos { grid-template-columns: 1fr; gap: var(--s-3); }
  .passo-tx { font-size: 14px; }
}
@media (max-width: 560px) {
  .passos-wrap--cel { margin-inline: var(--s-4); }
}

/* --- Cards de modelo: "para quem é" (item 6), microcopy (item 11) e link da página --- */
.modelo-para {
  font-size: 13px; line-height: 1.4; color: var(--ink-mid);
  text-align: center;
  margin-top: var(--s-2);
  min-height: 36px;              /* 2 linhas em todos os cards: selos e preços seguem alinhados */
}
.modelo-para-rot { font-weight: 700; color: var(--green-dark); }
.modelo-micro {
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  text-align: center;
  margin-top: var(--s-3);
}
.modelo-seguro {
  display: flex; align-items: center; justify-content: center; gap: var(--s-1);
  font-size: 12.5px; color: var(--ink-mid);
  margin-top: var(--s-1);
}
.modelo-seguro .ic { width: 16px; height: 16px; color: var(--green-dark); }
.modelo-detalhe {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  align-self: center;
  min-height: 44px;
  margin-top: auto; padding-top: var(--s-4);
  font-size: 14px; font-weight: 600; color: var(--green-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.modelo-detalhe:hover { color: var(--green-deep); }
.modelo-detalhe .ic { width: 16px; height: 16px; transform: rotate(-90deg); }

/* --- Selos reais sob os cards (item 20) + data da conferência (item 23) --- */
.selos-l8 {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  list-style: none;
  margin: var(--s-8) auto 0; padding: 0;
}
.selos-l8 li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex: none;
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-full);
}
.selos-l8 img { height: 20px; width: auto; max-width: none; object-fit: contain; }
.selos-l8 strong { font: 400 22px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.selos-l8 small { font: 600 12px/1 var(--font); color: var(--ink-mid); margin-left: 2px; }
.selos-l8-total strong { font-size: 20px; color: var(--green-dark); }
.selos-l8-total span { font-size: 13px; font-weight: 600; color: var(--ink); }
.precos-conferidos {
  text-align: center;
  font-size: 13px; font-weight: 500; color: var(--green-dark);
  margin-top: var(--s-3);
}
.precos-conferidos time { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Celular/tablet: linha rolável de selos (encosta nas bordas, como o carrossel) */
@media (max-width: 1024px) {
  .selos-l8 {
    justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--s-6)); padding: 0 var(--s-6) var(--s-1);
    margin-top: var(--s-6);
  }
  .selos-l8::-webkit-scrollbar { display: none; }
}
@media (min-width: 641px) and (max-width: 1024px) { .selos-l8 { justify-content: center; } }
@media (max-width: 560px) {
  .selos-l8 { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); gap: var(--s-2); }
  .selos-l8 li { padding: var(--s-2) var(--s-3); }
  /* L11: no celular os selos quebram em linhas centradas (nada cortado na borda) e o total fica sozinho embaixo */
  .selos-l8 { flex-wrap: wrap; justify-content: center; overflow: visible; }
  .selos-l8-total { flex-basis: 100%; justify-content: center; }
}

/* --- Promoção de Adesão: prazo real (item 16) --- */
.b2b-copy .b2b-prazo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background: var(--green-deep); color: #FCFDFC;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.b2b-prazo .ic { width: 16px; height: 16px; color: var(--lime); }
.b2b-prazo span { font-variant-numeric: tabular-nums; }

/* --- Rodapé: disclaimer literal + linha da marca com link (item 38) --- */
.footer-marca { margin-top: var(--s-2); }
.footer-marca a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-marca a:hover { color: var(--lime); }

/* --- 1ª tela do celular (item 24): H1 + chip + botão + selo cabem em 360×640 --- */
@media (max-width: 560px) {
  #hero { padding-top: calc(var(--s-4) + var(--hdr-overlap)); }
  .hero-badge { margin-bottom: var(--s-3); }
  .hero-sub { font-size: 15px; margin-top: var(--s-3); }
  .hero-preco { margin-top: var(--s-4); }
  .hero-preco-link { display: flex; width: 100%; font-size: 14px; padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); }
  .hero-preco + .hero-ctas { margin-top: var(--s-3); }
  .hero-ctas { gap: var(--s-2); }
  .hero-trust { margin-top: var(--s-3); }
}
@media (max-width: 400px) {
  .hero-preco-frete { display: none; }   /* o frete grátis já está na faixa do topo */
}
/* Celular: o botão branco ("Ver quanto vou economizar") desce para DEPOIS do selo de
   confiança — a 1ª tela fica H1 → preço → botão de compra → selo (medido em 360×640) */
@media (max-width: 560px) {
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy > * { align-self: stretch; }
  .hero-copy .hero-badge, .hero-copy .hero-trust { align-self: flex-start; }
  .hero-ctas { display: contents; }
  .hero-ctas .btn-dark { margin-top: var(--s-3); }
  .hero-trust { order: 1; }
  .hero-ctas .btn-white { order: 2; margin-top: var(--s-3); }
}
/* Telas estreitas (até 420px): o selo "4,6 milhões" sai do topo (ele aparece logo abaixo, na
   prova social e nos selos dos cards) e o chip fica numa linha */
@media (max-width: 420px) {
  .hero-badge { display: none; }
  .hero-preco-link { font-size: 13px; gap: var(--s-1); padding-inline: var(--s-2); }
  .hero-preco-link .ic { width: 16px; height: 16px; }
}
.modelo-micro span { white-space: nowrap; }
/* 320–360px: faixa e cronômetro compacto cabem sem encostar nas bordas */
@media (max-width: 360px) {
  .count-card { gap: var(--s-2); padding-inline: var(--s-3); }
  .count-clock .t-box { min-width: 30px; font-size: 18px; }
  .count-clock .t-sep { font-size: 14px; }
}

/* --- Rodada de correções 21/10: fonte mínima de 12px e alvos de toque de 44px no celular (sem mudar o desenho) --- */
@media (max-width: 560px) { .header-timer { font-size: 12px; } }   /* era 11,5px (L6) */
/* (i) do pop-up de taxas: o círculo continua 32px; a área de toque cresce para 44px por fora */
.txm-tip-btn { position: relative; }
.txm-tip-btn::after { content: ""; position: absolute; inset: -6px; border-radius: var(--r-full); }
/* Régua do simulador: o trilho fica igual; a caixa de toque passa a 44px */
.sim-faixa { height: 44px; margin-block: -6px; }   /* -6px em cima e embaixo: o espaço da seção não muda */
/* L12: arraste para o lado fica com a régua (simulator.js move o valor pelo dedo); para cima/baixo rola a página */
.sim-faixa { touch-action: pan-y; }
/* Abaixo de 375px, com a página rolada (logo + cronômetro + botão), o menu passava da tela (+22px de rolagem
   lateral em 320). O botão do menu quebra em 2 linhas ("Pedir com / 72% OFF") só nessa situação. */
@media (max-width: 374px) {
  body.is-scrolled .header-cta { white-space: normal; line-height: 1.15; text-align: center; max-width: 96px; padding: 0 var(--s-3); }
}

/* =====================================================================
   L9 (21/10) — "SALTO": fotos REAIS na home + acabamento premium.
   Só ACRESCENTA regras (a régua do L7 continua valendo). Tudo aqui é da
   HOME: as páginas por modelo não usam .passos-wrap--foto, .depo-head--cena,
   .ctafinal--cena nem .modelo-card (conferido nelas a 375 e 1360).
   ===================================================================== */
:root {
  --cena-zoom: 1.08;                                   /* L9: as cenas oficiais vêm com cantos arredondados embutidos — 8% de zoom some com eles */
  --shadow-elev: 0 2px 4px rgba(27, 34, 31, 0.04), 0 22px 44px -14px rgba(27, 34, 31, 0.26);   /* L9: card que sobe no hover */
  --sombra-contato: rgba(27, 34, 31, 0.32);            /* L9: miolo da sombra de contato sob a maquininha */
  --sombra-contato-suave: rgba(27, 34, 31, 0.13);      /* L9: halo da mesma sombra */
}

/* --- Cena = moldura que corta + foto que preenche (sem CLS: quem manda no tamanho é a moldura) --- */
.cena { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-soft); }
.cena-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transform: scale(var(--cena-zoom));
}

/* --- "Como funciona o pedido" com foto (T2 + QR do Pix) --- */
.passos-wrap.passos-wrap--foto { padding: 0; overflow: hidden; isolation: isolate; }
.passos-grade { display: grid; align-items: stretch; }
.passos-corpo { min-width: 0; align-self: center; }
.passos-wrap--foto .passos-titulo { text-align: left; }
.passos-cena { min-height: 100%; }
/* Celular/tablet: texto à esquerda, faixa estreita da foto à direita (a altura do bloco quase não muda) */
.passos-wrap--cel .passos-grade { grid-template-columns: minmax(0, 1fr) clamp(80px, 28%, 220px); }
.passos-wrap--cel .passos-corpo { padding: var(--s-4); }
.passos-wrap--cel .cena-img { object-position: 14% 50%; }
@media (min-width: 561px) and (max-width: 900px) {
  .passos-wrap--cel { margin-inline: var(--s-6); }   /* tablet: o cartão encostava nas bordas da tela */
}
/* Computador: foto na ponta esquerda do cartão, os 3 passos lado a lado com divisória fina */
.passos-wrap--pc .passos-grade { grid-template-columns: clamp(220px, 28%, 320px) minmax(0, 1fr); min-height: 148px; }
.passos-wrap--pc .passos-corpo { padding: var(--s-6) var(--s-8); }
.passos-wrap--pc .cena-img { object-position: 90% 50%; }
.passos-wrap--pc.passos-wrap--foto .passo + .passo { border-left: 1px solid var(--border-soft); padding-left: var(--s-4); }
@media (max-width: 1180px) {
  /* 901–1180: foto um pouco mais estreita para os 3 passos não irem a 4 linhas */
  .passos-wrap--pc .passos-grade { grid-template-columns: clamp(200px, 24%, 280px) minmax(0, 1fr); }
  .passos-wrap--pc .passos-corpo { padding: var(--s-5) var(--s-6); }
  .passos-wrap--pc .passos { gap: var(--s-3); }
  .passos-wrap--pc .passo-tx { font-size: 14px; }
  .passos-wrap--pc.passos-wrap--foto .passo + .passo { padding-left: var(--s-3); }
}
@media (max-width: 360px) {
  .passos-wrap--cel .passos-grade { grid-template-columns: minmax(0, 1fr) 72px; }
  .passos-wrap--cel .passos-corpo { padding: var(--s-3); }
  .passos-wrap--cel .passos-titulo { font-size: 12px; letter-spacing: 0.04em; }
  .passos-wrap--cel .passo { gap: var(--s-2); }
}

/* --- Depoimentos: cena real do ramo no cabeçalho (ambiente — nunca o rosto de um depoente) --- */
header.depo-head.depo-head--cena {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "tx cena" "notas cena";
  column-gap: var(--s-12); row-gap: var(--s-6);
}
.depo-head--cena .depo-head-tx { grid-area: tx; align-self: end; }
.depo-head--cena .depo-notas { grid-area: notas; align-self: start; }
.depo-head--cena .depo-cena { grid-area: cena; aspect-ratio: 13 / 5; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.depo-head--cena .depo-cena .cena-img { object-position: 62% 40%; }
@media (max-width: 1024px) {
  header.depo-head.depo-head--cena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cena" "tx" "notas"; row-gap: var(--s-5); }
  .depo-head--cena .depo-cena { aspect-ratio: 16 / 5; }
}
@media (max-width: 767px) {
  /* celular: recorte da foto em pé (feirante + tela da maquininha) */
  .depo-head--cena .depo-cena { aspect-ratio: 3 / 2; }
  .depo-head--cena .depo-cena .cena-img { object-position: 50% 14%; }
}

/* --- Chamada final: cena real ao lado (computador) / por cima (celular) --- */
.ctafinal--cena .ctafinal-grade {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 640px);
  justify-content: center; align-items: center;
  gap: var(--s-16);
}
.ctafinal-cena {
  aspect-ratio: 858 / 780;
  border-radius: var(--r-xl);
  border: 1px solid var(--dark-line-soft);
  background: var(--dark-1);
}
.ctafinal-cena .cena-img { object-position: 50% 40%; }
@media (min-width: 901px) and (max-width: 1180px) {
  .ctafinal--cena .ctafinal-grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-10); }
}
@media (max-width: 900px) {
  .ctafinal--cena .ctafinal-grade { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .ctafinal-cena { width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 3 / 2; }
  .ctafinal-cena .cena-img { object-position: 50% 55%; }
}

/* --- Cards de #modelos: sombra de contato realista + elevação sóbria --- */
.modelo-art { position: relative; }
.modelo-art picture { position: relative; z-index: 1; }
.modelo-art .modelo-img { object-position: 50% 100%; }   /* aparelho sempre "pisando" na base, mesmo quando a foto encolhe */
.modelo-art::before, .modelo-art::after {
  content: ""; position: absolute; left: 48%; bottom: 0; z-index: 0;
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, 50%);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.modelo-art::before { width: 46%; height: 22px; background: radial-gradient(closest-side, var(--sombra-contato-suave), rgba(27, 34, 31, 0)); }
.modelo-art::after { width: 24%; height: 7px; background: radial-gradient(closest-side, var(--sombra-contato), rgba(27, 34, 31, 0)); }
@media (hover: hover) and (min-width: 1025px) {
  .modelo-card { transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out); }
  .modelo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elev); }
  .modelo-art .modelo-img { transition: transform var(--d-slow) var(--ease-out); }
  .modelo-card:hover .modelo-img { transform: translateY(-6px); }
  .modelo-card:hover .modelo-art::before { opacity: 0.7; transform: translate(-50%, 50%) scale(0.9, 0.8); }
  .modelo-card:hover .modelo-art::after { opacity: 0.45; transform: translate(-50%, 50%) scale(0.8); }
}

/* --- Depoimentos no computador: 6 cartões em 3 + 3 (o auto-fit dava 4 + 2, linha de baixo "manca") --- */
@media (min-width: 1025px) {
  .depo-grid[data-depo-mount] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Etiqueta da escada ("Mais completa"…): 11,5 → 12px, piso de letra do celular (rodada de 21/10) */
.modelo-tag { font-size: 12px; }

/* =====================================================================
   CONSERTOS L9 (21/10, KIT/L9_conferencia.md) — só acrescenta regras.
   ===================================================================== */
/* Item 2 · selos: o arquivo oficial do Reclame Aqui tem 86×15 e o da App Store 78×21 (não existe versão maior no
   ton.com.br). Exibidos a 20–22px de altura eles eram esticados até 1,5× e borravam: agora nunca passam do natural. */
.selos-l8 img.selo-ra, .depo-notas img.selo-ra { height: 15px; }
.depo-notas img.selo-as { height: 21px; }

/* Item 7 · letra mínima de 12px */
.hero-avatar { font-size: 12px; letter-spacing: 0; }
.tier-dica { width: 18px; height: 18px; font-size: 12px; }
.t-label { font-size: 12px; }

/* Item 6 · tablet e celular (até 1023px): alvos de toque de 44px mesmo sem "pointer: coarse"
   (o computador mantém as medidas da régua do L7) */
@media (max-width: 1023px) {
  .tiers-opt { min-height: 44px; }
  .sim-campo select, .sim-campo input { min-height: 44px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* Item 12 · 320–374px com a página rolada: botão do menu numa linha só ("Pedir 72% OFF") */
@media (max-width: 374px) {
  body.is-scrolled .header-card { padding-inline: var(--s-3); }
  body.is-scrolled .header-cta-com { display: none; }
  body.is-scrolled .header-cta { white-space: nowrap; max-width: none; font-size: 12.5px; padding: 0 var(--s-2); }
}

/* Item 18 · faixa de bandeiras: o título não encosta nas bordas no celular */
.bandeiras-label { padding-inline: var(--s-4); }

/* =====================================================================
   L10 (21/10) — pedido do dono: faixa de promoção nova (A2), hero sem os
   cartões flutuantes (A3), "sem juros" no preço (A6), seta no "Confira todas
   as condições do plano" (A8) e benefícios em destaque (A11).
   Só ACRESCENTA regras (a régua do L7 continua valendo).
   ===================================================================== */
:root {
  --promo-ticket-tx: rgba(27, 34, 31, 0.74);     /* L10: legenda do cupom sobre o lime (≥7:1) */
  --promo-ticket-picote: rgba(27, 34, 31, 0.34); /* L10: picote tracejado do cupom */
  --promo-brilho: rgba(255, 255, 255, 0.55);     /* L10: reflexo que passa no cupom */
}

/* ---------- A2 · Faixa de promoção: "até 72% da Ton  +  20% extra do link  +  frete grátis" ---------- */
.promo-strip {
  position: relative;
  padding: var(--s-3) var(--s-6);
  color: var(--on-dark);
  background: radial-gradient(60% 140% at 50% 0%, rgba(136, 255, 0, 0.09), rgba(136, 255, 0, 0) 70%);
  border-bottom: 1px solid var(--dark-line-soft);
}
.promo-conta {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5);
  max-width: 1360px; margin-inline: auto;
}
.promo-bloco { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.promo-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.15; text-align: left; }
.promo-tx strong { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.promo-cap { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--on-dark-mid); }
.promo-num {
  display: inline-flex; align-items: baseline; gap: var(--s-1);
  font-family: var(--font-display); font-size: 32px; line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.promo-ate {
  font-family: var(--font); font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark);
}
.promo-mais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-full);
  border: 1px solid var(--dark-line);
  background: var(--dark-1);
  color: var(--lime); font-size: 16px; font-weight: 700; line-height: 1;
}
.promo-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-md);
  background: rgba(136, 255, 0, 0.10);
  border: 1px solid var(--dark-line);
  color: var(--lime);
}
.promo-ic .ic { width: 20px; height: 20px; }
/* O cupom extra é um "ticket": lime, cantos mordidos e picote — o olho entende "cupom" antes de ler */
.promo-cupom {
  position: relative; overflow: hidden;
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4);
  background: var(--lime); color: var(--ink);
  border-radius: var(--r-sm);
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 7px at 0 50%, transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 96%, #000) right / 51% 100% no-repeat;
}
.promo-cupom .promo-num { color: var(--green-deep); }
.promo-cupom .promo-tx { padding-left: var(--s-3); border-left: 1.5px dashed var(--promo-ticket-picote); }
.promo-cupom .promo-cap { color: var(--promo-ticket-tx); font-weight: 600; }
.promo-cupom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, var(--promo-brilho) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: promo-brilho 7s var(--ease-in-out) 1.8s infinite;
}
@keyframes promo-brilho {
  0% { transform: translateX(-130%); }
  16%, 100% { transform: translateX(130%); }
}
.promo-so-cel, .promo-cap-exceto { display: none; }
[data-promo-cupom][hidden] { display: none !important; }

/* L10 · Bloco C (Estratégia 1.1): o responsivo da faixa (tablet 1 linha, celular 2 linhas, tela baixa 1 linha curta)
   foi REESCRITO no bloco "L10 · BLOCO C" no fim deste arquivo. */
@media (prefers-reduced-motion: reduce) {
  .promo-cupom::after { animation: none; display: none; }
}

/* ---------- A6 · "sem juros" junto da parcela (só aparece se 12 × parcela ≤ à vista — trava no systems.js) ---------- */
.preco-parc {
  display: grid; grid-template-columns: auto auto;
  align-items: center; justify-content: end;
  column-gap: var(--s-1); row-gap: 6px;
}
.parc-sj {
  grid-column: 1 / -1; justify-self: end;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--lime-soft);
  color: var(--green-deep);
  font-size: 12px; font-weight: 800; line-height: 1.35;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.parc-sj[hidden], .hero-preco-sj[hidden] { display: none; }
.sys-buybar-tx .bb-sj { font-weight: 600; color: var(--green-dark); }
@media (max-width: 359px) {
  .sys-buybar-tx .bb-sj { display: none; }   /* 320px: nome + parcela + botão; o "sem juros" fica nos cards */
}

/* ---------- A8 · "Confira todas as condições do plano" ganha a mesma seta do "Confira detalhes das taxas" ---------- */
.sim-mais::after {
  content: ""; flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15l6-5.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15l6-5.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- A11 · Benefícios ---------- */
/* L11: todos os ícones iguais (a garantia não tem mais ícone escuro). Celular/tablet: a barra grande sai
   (o "Vem junto" do hero assume). */
@media (max-width: 900px) { .hero-beneficios { display: none; } }
/* Cards de maquininha: a linha "Garantia vitalícia" da lista ganha peso (mesma altura, mesmo ícone) */
.modelo-specs li.spec-destaque, .mdl-specs li.spec-destaque { font-weight: 700; color: var(--green-deep); }
/* Chip do hero com "sem juros": se precisar de 2 linhas, quebra ANTES do "ou R$ … à vista" (nunca "à / vista") */
.hero-preco-avista, .hero-preco-sj { white-space: nowrap; }
/* Telas estreitas: o "Confira todas as condições do plano" + seta pode ir a 2 linhas (não alarga o simulador) */
@media (max-width: 400px) {
  .sim-mais { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
}

/* =====================================================================
   L10 (21/10) — FOTOS DE PESSOAS (A4 + A10, KIT/L10_imagens/_LEIA.md)
   ===================================================================== */
/* A4 · "bolinhas" da prova social do hero: rostos dos retratos ilustrativos dos depoimentos (96/192 px,
   já recortados na cabeça) num círculo de 32 px, anel branco por cima do vizinho, como na versão de iniciais */
img.hero-avatar {
  display: block; flex: none;
  width: 32px; height: 32px;
  object-fit: cover;
  background: var(--bg-soft);
  border: 2px solid var(--bg-0);
}
img.hero-avatar + img.hero-avatar { margin-left: -9px; }

/* A10 · depoimentos: retrato redondo no lugar das iniciais (56 px — um pouco maior que os 48 das
   iniciais), separado do cartão por um anel branco e contornado por um fio fino no verde da marca */
img.depo-foto {
  width: 56px; height: 56px;
  object-fit: cover; object-position: 50% 35%;
  background: var(--bg-soft);
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 1.5px var(--green-brand), var(--shadow-sm);
}
.depo-card .depo-head { gap: var(--s-4); }

/* =====================================================================
   L10 · BLOCO C (Estratégia, 21/10 noite) — KIT/L10_ESTRATEGIA/PLANO.md Parte 1 (1.1–1.28)
   Só ACRESCENTA/sobrepõe (a régua do L7 continua valendo). Classes de tela do plano:
   A = celular em pé (≤ 560 aqui) · B = tela BAIXA (altura ≤ 540: celular deitado e dobrável aberto deitado, 717×512) · C = 561–1023 ·
   D = 1024–1439 · E = 1440–1919 · F = ≥ 1920 (conteúdo travado no container, nada esticado).
   Animações: o animations.js (Bloco F) liga SÓ pelas classes listadas em CONTRATOS.md §L10-C;
   sem JS / reduced-motion = estado final visível.
   ===================================================================== */
:root {
  --recibo-font: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;  /* L10-C: dígitos do comprovante (SÓ ali) */
  --z-folha: 400;                /* L10-C: folha de saída do celular (systems.js usa var(--z-folha, 400)) — entre popup (300) e modal (500) */
  --vidro-62: rgba(255, 255, 255, 0.62);   /* L11: cartão "Vem junto" do hero (vidro claro sobre o verde) */
  --ic-fundo: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(136, 255, 0, 0.30));   /* L11: bolinha dos ícones */
  --ic-borda: rgba(27, 34, 31, 0.06);       /* L11: borda finíssima do cartão e das bolinhas */
  --z-exit: 650;                 /* L11: pop-up de saída do PC — acima do aviso de cookies (600), que não o bloqueia mais */
  --d-toque: 120ms;              /* L10-C: feedback de toque (régua: 120 ms, escala 0,98 + 6% mais escuro) */
  --d-abre: 250ms;               /* L10-C: abrir recolhível / resposta do roteador */
  --risco-dur: 350ms;            /* L10-C: o preço "de" se risca (Bloco F liga) */
  --selo-atraso: 500ms;          /* L10-C: o selo % OFF entra 150 ms depois do risco (350 + 150) */
  --picote: 8px;                 /* L10-C: profundidade dos dentes do comprovante */
  --leader: rgba(27, 34, 31, 0.28);   /* L10-C: pontilhado "....." do comprovante (alpha do --ink) */
  --ic-check-circ: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.5 15.5-5-5 1.4-1.4 3.6 3.6 6.6-6.6 1.4 1.4z'/%3E%3C/svg%3E");
  --ic-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.5h13v11h-13zM14.5 9.5h4.5l3 4v3h-7.5z'/%3E%3Ccircle cx='6' cy='18.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.8'/%3E%3C/svg%3E");
  --ic-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Régua: toque 120 ms (escala 0,98 + 6% mais escuro) em TODO botão ---------- */
.btn {
  transition:
    transform var(--d-toque) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out),
    background-color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    filter var(--d-toque) var(--ease-out);
}
.btn:active { transform: scale(0.98); filter: brightness(0.94); }
/* Algo que aparece depois de hidratar (✓ da faixa, frase da 2ª visita): fade de 200 ms, sem deslocar nada */
@keyframes c-aparece { from { opacity: 0; } to { opacity: 1; } }

/* =============== 1.1 · FAIXA DO TOPO (escura do A2 — aprovada — com o texto e as alturas do plano) =============== */
.promo-strip {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px;
  padding: 6px var(--s-6);
}
.promo-conta { gap: var(--s-4); }
.promo-num { font-size: 28px; }
.promo-bloco { gap: var(--s-2); }
.promo-tx { gap: 2px; }
.promo-cupom { padding: 6px var(--s-4) 6px var(--s-3); }
.promo-cupom .promo-num { font-size: 26px; }
.promo-ic { width: 32px; height: 32px; }
.promo-ic .ic { width: 18px; height: 18px; }
/* ✓ "Tudo já aplicado no carrinho": lugar RESERVADO (não empurra nada quando o systems.js tira o hidden) */
.promo-ok { flex: none; min-width: 218px; margin: 0; }
.promo-ok > span { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--on-dark); white-space: nowrap; }
.promo-ok > span::before, .promo-linha2 > [data-topo]::before {
  content: ""; flex: none;
  width: 18px; height: 18px;
  background: var(--lime);
  -webkit-mask: var(--ic-check-circ) center / contain no-repeat;
  mask: var(--ic-check-circ) center / contain no-repeat;
}
[data-topo]:not([hidden]), [data-retorno]:not([hidden]) { animation: c-aparece 200ms var(--ease-out) both; }
/* 2ª visita: "Que bom te ver de novo — seu cupom de 20% continua valendo." (1ª frase da faixa) */
.promo-retorno { margin: 0 0 2px; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--lime); }
/* 2ª linha do celular e linha curta da tela baixa: escondidas fora da tela delas */
.promo-linha2, .promo-baixa { display: none; margin: 0; }
.promo-linha2 > span, .promo-baixa > span { display: inline-flex; align-items: center; gap: 6px; }

/* Abaixo de 1100: 1 linha, sem legendas (C/D) */
@media (max-width: 1099px) {
  .promo-cap { display: none; }
  .promo-tx { flex-direction: row; align-items: baseline; gap: 5px; }
  .promo-ok { min-width: 0; }
}
@media (max-width: 919px) { .promo-ok { display: none; } }
@media (max-width: 759px) {
  .promo-conta { gap: var(--s-3); }
  .promo-num { font-size: 24px; }
  .promo-cupom .promo-num { font-size: 22px; }
  .promo-tx strong { font-size: 12px; letter-spacing: 0.04em; }
}
/* A · celular em pé: 2 linhas ≤ 60 px — pílulas "ATÉ 72% OFF" + "20% CUPOM EXTRA" em cima; "frete grátis · tudo já
   aplicado no carrinho" embaixo (altura reservada desde o 1º paint: nada pula quando o texto chega) */
@media (max-width: 560px) {
  .promo-strip { min-height: 58px; padding: 5px var(--s-3); gap: 3px; }
  .promo-retorno, .promo-frete, .promo-mais--frete { display: none; }
  .promo-conta { flex-wrap: nowrap; gap: 6px; }
  .promo-bloco--ton {
    padding: 3px 10px;
    border: 1px solid var(--dark-line);
    border-radius: var(--r-full);
    background: var(--dark-1);
  }
  .promo-bloco--ton .promo-num { font-size: 22px; gap: 3px; }
  .promo-bloco--ton strong { font-size: 13px; }
  .promo-ate { font-size: 12px; letter-spacing: 0.04em; }
  .promo-mais { width: 20px; height: 20px; font-size: 13px; }
  .promo-cupom { padding: 3px var(--s-3) 3px 10px; gap: 6px; }
  .promo-cupom .promo-num { font-size: 20px; gap: 1px; }
  .promo-cupom .promo-tx { padding-left: var(--s-2); }
  .promo-cupom .promo-tx strong { font-size: 12px; letter-spacing: 0.03em; }
  .promo-linha2 {
    display: flex; justify-content: center; align-items: center;
    min-height: 17px;
    font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--on-dark);
    text-align: center;
  }
  .promo-linha2 > [data-topo]::before {
    width: 15px; height: 15px;
    -webkit-mask-image: var(--ic-truck); mask-image: var(--ic-truck);
  }
  .promo-retorno-cel { color: var(--lime); font-weight: 600; letter-spacing: -0.015em; }
  body.is-retorno .promo-linha2 > [data-topo] { display: none !important; }
}
@media (max-width: 369px) {
  .promo-cupom-rot { display: none; }
  .promo-strip { padding-inline: var(--s-2); }
}
@media (max-width: 340px) {
  .promo-conta { gap: var(--s-1); }
  .promo-bloco--ton { padding-inline: 7px; }
  .promo-bloco--ton .promo-num { font-size: 19px; }
  .promo-bloco--ton strong { font-size: 12px; }
  .promo-ate { letter-spacing: 0; }
  .promo-mais { width: 16px; height: 16px; font-size: 12px; border: 0; background: none; }
  .promo-cupom { padding-inline: var(--s-2) 11px; }   /* 11 = picote de 7px + folga: com 7 o picote comia o "A" de EXTRA (280) */
  .promo-cupom .promo-num { font-size: 18px; }
  .promo-linha2 { letter-spacing: -0.01em; }
}
/* B · tela baixa (celular deitado): 1 linha curta de 36 px */
@media (max-height: 540px) {
  .promo-strip { min-height: 36px; padding-block: 4px; }
  .promo-conta, .promo-linha2, .promo-retorno { display: none; }
  .promo-baixa {
    display: flex; justify-content: center; align-items: center;
    min-height: 26px;
    font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--on-dark);
  }
  .promo-baixa > span::before {
    content: ""; flex: none; width: 16px; height: 16px; background: var(--lime);
    -webkit-mask: var(--ic-check-circ) center / contain no-repeat; mask: var(--ic-check-circ) center / contain no-repeat;
  }
}

/* =============== 1.2 · CRONÔMETRO (≤ 88 px no computador · 44 no celular · 36 na tela baixa) =============== */
.urgency-bar { padding: 6px 0; }
.count-inner { flex-wrap: nowrap; gap: var(--s-4); }
.count-pill { padding: var(--s-2) var(--s-4); gap: var(--s-3); border-radius: var(--r-lg); box-shadow: none; }
.count-ic { width: 36px; height: 36px; }
.count-ic .ic { width: 20px; height: 20px; }
.count-pill-tx strong { font-size: 14px; }
.count-pill-tx span { font-size: 12.5px; }
.count-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 6px var(--s-5);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.count-titulo {
  max-width: 150px;
  margin: 0;
  font-size: 13px; font-weight: 800; line-height: 1.25; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: right;
  color: var(--lime);
}
.count-tt--cel, .count-tt--baixa { display: none; }
.count-clock { gap: var(--s-2); }
.count-clock .t-box { min-width: 52px; padding: 4px var(--s-2); font-size: 30px; line-height: 1.2; }
.count-clock .t-unit { gap: 3px; }
.count-clock .t-sep { margin-top: 6px; font-size: 26px; }
/* < 10 min (body[data-timer-pouco], systems.js): caixas em laranja PARADO — nada pisca */
body[data-timer-pouco] .t-box { color: var(--warn); border-color: rgba(247, 109, 24, 0.45); background: rgba(247, 109, 24, 0.10); }
body[data-timer-pouco] .t-sep { color: rgba(247, 109, 24, 0.55); }
body[data-timer-pouco] .header-timer { color: var(--warn-text); background: rgba(247, 109, 24, 0.10); }
/* C (tablet): só a pílula da direita (pagamento seguro) */
@media (max-width: 1023px) {
  .count-inner { justify-content: center; }
  .count-pill--desc { display: none; }
  .count-pill--seguro { display: inline-flex; flex: 0 1 300px; }
}
/* A (celular em pé): 1 linha de 44 px — "HOJE TERMINA EM  00 : 45 : 20" */
@media (max-width: 560px) {
  .urgency-bar { padding: 5px 0; }
  .count-pill--seguro { display: none; }
  .count-card { gap: var(--s-3); padding: 2px var(--s-2) 2px var(--s-4); border-radius: var(--r-full); }
  .count-titulo { max-width: none; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; text-align: left; }
  .count-tt--pc { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .count-tt--cel { display: inline; }
  .count-clock .t-box { min-width: 34px; padding: 2px var(--s-1); font-size: 20px; line-height: 1.2; }
  .count-clock .t-sep { font-size: 16px; margin-top: 0; }
}
@media (max-width: 340px) {
  .count-card { gap: var(--s-2); padding-left: var(--s-3); }
  .count-titulo { letter-spacing: 0.02em; }
  .count-clock .t-box { min-width: 30px; font-size: 18px; }
}
/* B (tela baixa): 36 px, uma linha "TERMINA EM 01:58:42" */
@media (max-height: 540px) {
  .urgency-bar { padding: 3px 0; }
  .count-pill { display: none !important; }
  .count-card { flex-direction: row; gap: var(--s-3); padding: 1px var(--s-2) 1px var(--s-4); border-radius: var(--r-full); }
  .count-titulo { max-width: none; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; text-align: left; }
  .count-tt--pc, .count-tt--cel { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .count-tt--baixa { display: inline; }
  .count-clock { align-items: center; gap: var(--s-1); }
  .count-clock .t-unit { flex-direction: row; gap: 0; }
  .count-clock .t-label { display: none; }
  .count-clock .t-box { min-width: 30px; padding: 1px var(--s-1); font-size: 17px; line-height: 1.2; border-radius: var(--r-sm); }
  .count-clock .t-sep { font-size: 14px; margin-top: 0; align-self: center; }
}

/* =============== 1.3 · MENU (home: botão SECUNDÁRIO branco "Ver as maquininhas" → #modelos) =============== */
.header-cta.btn-white { border-color: rgba(27, 34, 31, 0.22); }
.header-cta-curto { display: none; }
@media (max-width: 560px) {
  :root { --hdr-overlap: 58px; }            /* 4 de respiro + cartão de 54 (52 + 2 de borda) — L11: 56 deixava 2 px de linha branca */
  .header-bar { padding-top: var(--s-1); }
  .header-card { min-height: 52px; }
  .logo-svg { width: 68px; height: 52px; }
  .header-cta { min-height: 40px; padding: 0 var(--s-4); font-size: 13.5px; }
  .header-cta-tx { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-cta-curto { display: inline; }
}
@media (max-width: 374px) {
  body.is-scrolled .header-cta { white-space: nowrap; max-width: none; line-height: 1; padding: 0 var(--s-3); font-size: 13px; }
}
@media (max-width: 300px) {
  .header-bar { padding-inline: var(--s-2); }
  .header-card, body.is-scrolled .header-card { padding-inline: 10px; gap: 6px; }
  .logo-svg { width: 60px; height: 46px; }
  .logo-parceiro { font-size: 7.4px; }
  body.is-scrolled .header-cta { padding: 0 var(--s-2); font-size: 12.5px; }
  .header-timer { padding-inline: 5px; }
}
/* B: menu baixo (52 px) também no celular deitado */
@media (max-height: 540px) {
  :root { --hdr-overlap: 58px; }            /* 4 de respiro + cartão de 54 (52 + 2 de borda) */
  .header-bar { padding-top: var(--s-1); }
  .header-card { min-height: 52px; }
  .logo-svg { width: 68px; height: 52px; }
  .logo-parceiro { font-size: 7px; }
  .header-cta { min-height: 40px; }
}

/* =============== 1.4–1.11 · HERO =============== */
.pg-home .hero-badge b { font-variant-numeric: tabular-nums; }
.pg-home .hero-sub b { font-weight: 800; }
/* chip de preço: 2ª visita ("Você estava vendo a T2 · 12x de R$ 2,82 sem juros  Continuar →") */
.hero-preco-tx { min-width: 0; }
.hero-preco-ret { font-weight: 700; color: var(--ink); }
.hero-preco-ret::after { content: " · "; font-weight: 500; }
.hero-preco-link:has(.hero-preco-ret:not([hidden])) .hero-preco-nome,
.hero-preco-link:has(.hero-preco-ret:not([hidden])) .hero-preco-avista,
.hero-preco-link:has(.hero-preco-ret:not([hidden])) .hero-preco-frete { display: none; }
.hero-preco-cont {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  margin-left: var(--s-1);
  padding: 3px var(--s-2) 3px 10px;
  border-radius: var(--r-full);
  background: var(--lime); color: var(--ink);
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.hero-preco-cont::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ic-seta) center / contain no-repeat;
  mask: var(--ic-seta) center / contain no-repeat;
}
/* botão escuro: "Ver as maquininhas com até 72% OFF" (abaixo de 360 px só "Ver as maquininhas") */
@media (max-width: 359px) { .hero-cta-mais { display: none; } }
/* tablet deitado / notebook pequeno (coluna do texto estreita): os 2 botões numa linha só — o "72% OFF" já está no
   selo, no subtítulo e no chip logo acima (assim o cadeado entra na 1ª tela de 1024×768) */
@media (min-width: 768px) and (max-width: 1180px) { .hero-cta-mais { display: none; } }
/* cadeado = pagamento seguro; 1 linha no celular */
.hero-trust .ic { color: var(--green-deep); }
@media (max-width: 560px) {
  .pg-home .hero-trust { font-size: 12px; padding: 6px 10px; gap: 6px; }
  .pg-home .hero-trust .ic { width: 15px; height: 15px; margin-top: 1px; }
}
/* "Vem junto, sem pagar nada a mais" — pacote DO MODELO (slot vemjunto; celular e tablet).
   L11: vira um CARTÃO (vidro claro, borda fina, sombra do card), lista em 2 colunas com bolinhas iguais;
   item sozinho na última linha ocupa a linha toda. 14 px de respiro = exceção medida (não há token de 14). */
.hero-vemjunto {
  margin-top: var(--s-3);
  padding: var(--s-3) 14px 14px;
  background: var(--vidro-62);
  border: 1px solid var(--ic-borda);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.hero-vemjunto .slot-vj-tit {
  margin: 0 0 var(--s-3);
  font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-deep);
  text-wrap: balance;
}
.hero-vemjunto .slot-vj-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); list-style: none; }
.hero-vemjunto .slot-vj-item {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 28px;
  font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink);
  white-space: normal;
}
.hero-vemjunto .slot-vj-item .ic {
  flex: none; width: 28px; height: 28px; padding: 6px;
  border-radius: var(--r-full);
  background: var(--ic-fundo);
  border: 1px solid var(--ic-borda);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
}
.hero-vemjunto .slot-vj-item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (min-width: 901px) { .hero-vemjunto { display: none; } }
@media (max-width: 560px) {
  /* ordem no celular: chip → botão de compra → cadeado → "vem junto" → botão branco */
  .hero-vemjunto { order: 2; }
  .hero-ctas .btn-white { order: 3; }
}
@media (max-width: 374px) { .hero-vemjunto .slot-vj-item { font-size: 13px; } }
/* L11: cadeado curto no celular/tablet ("Pagamento seguro · suporte 24h"; frete e garantia já estão no cartão) */
@media (max-width: 900px) { .trust-pc { display: none; } }
/* L11 (C4) · tablet em pé: mesma ordem do celular (chip → botão escuro → cadeado → "Vem junto" → botão
   branco), botões com largura cheia até 400 px */
@media (min-width: 561px) and (max-width: 900px) {
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy > * { align-self: stretch; }
  .hero-copy .hero-badge, .hero-copy .hero-trust { align-self: flex-start; }
  .hero-ctas { display: contents; }
  .hero-ctas .btn { width: 100%; max-width: 400px; }
  .hero-ctas .btn-dark { margin-top: var(--s-4); }
  .hero-trust { order: 1; }
  .hero-vemjunto { order: 2; max-width: 520px; }
  .hero-ctas .btn-white { order: 3; margin-top: var(--s-3); }
}
/* selo do topo: celular sem "A maquininha de" */
@media (max-width: 560px), (min-width: 768px) and (max-width: 900px) { .hero-badge-pre { display: none; } }
@media (max-width: 420px) { .pg-home .hero-badge { display: inline-flex; } }   /* volta (o L8 escondia): agora é curto */
@media (max-width: 359px) { .pg-home .hero-badge { display: none; } }           /* 280–359: a 1ª tela precisa do espaço */
/* H1 em 2 linhas até 280 px (a 360 "Seu dinheiro na hora." cabe numa linha) */
@media (max-width: 374px) { .pg-home h1:not(.h1-variante) { font-size: clamp(25px, 9.1vw, 33px); } }
/* nota das taxas: condição colada + "Depois…" em destaque + "Ver as faixas ▾" */
.pg-home .hero-taxas-nota { font-weight: 500; }
.nota-cond { font-weight: 500; }
.nota-cond b { font-weight: 800; }
.nota-depois { display: block; margin-top: 2px; font-weight: 700; color: var(--ink); }
.pg-home .taxas-detalhes { display: inline-flex; align-items: center; gap: 2px; }
.pg-home .taxas-detalhes .ic { width: 16px; height: 16px; }
/* barra de benefícios (computador): 4 itens até 1279, 5 (com a bobina) a partir de 1280 */
.benef-item--bobina { display: none; }
@media (min-width: 1280px) {
  .hero-beneficios { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1280px; }
  .benef-item--bobina { display: flex; }
  .benef-item { padding-inline: var(--s-3); }
}
/* B · tela baixa: H1 numa linha, sem sub/foto/cadeado/lista; chip numa linha; 2 botões lado a lado (48 px) */
@media (max-height: 540px) {
  .pg-home #hero { padding-top: calc(var(--s-3) + var(--hdr-overlap)); padding-bottom: var(--s-8); }
  .pg-home .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-home .hero-scene-wrap, .pg-home .hero-sub, .pg-home .hero-trust, .pg-home .hero-vemjunto { display: none !important; }
  .pg-home .hero-badge { margin-bottom: var(--s-2); }
  .pg-home #hero h1:not(.h1-variante) { font-size: 28px; }
  .pg-home #hero h1 br { display: none; }
  .pg-home .hero-preco { margin-top: var(--s-3); }
  .pg-home .hero-preco-avista, .pg-home .hero-preco-frete { display: none; }
  .pg-home .hero-preco-link { display: inline-flex; width: auto; }
  .pg-home .hero-ctas { display: flex !important; flex-wrap: nowrap; gap: var(--s-2); margin-top: var(--s-3); }
  .pg-home .hero-ctas .btn { width: auto; min-height: 48px; margin-top: 0 !important; order: 0 !important; }
  .pg-home .hero-below { margin-top: var(--s-6); }
  .pg-home .taxa-num { font-size: 20px; }
  .pg-home .hero-taxas-nota { font-size: 12.5px; }
  .pg-home .hero-beneficios { display: none; }
}

/* =============== passos ("Como funciona o pedido"): barra de progresso + ✓ do passo 1 =============== */
.passos { position: relative; padding-top: var(--s-4); }
.passos::before, .passos::after {
  content: ""; position: absolute; top: 0; left: 0;
  height: 4px; border-radius: var(--r-full);
}
.passos::before { right: 0; background: rgba(27, 34, 31, 0.08); }
.passos::after {
  width: calc(100% * var(--passos-feitos, 1) / var(--passos-total, 3));
  background: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(32, 61, 0, 0.22);
}
.passos:empty { padding-top: 0; }
.passos:empty::before, .passos:empty::after { display: none; }
.passo.is-feito .passo-ic { background: var(--green-deep); border-color: var(--green-deep); color: var(--lime); }
.passo.is-feito .passo-n { background: var(--lime); color: var(--green-deep); }
.passo.is-feito .passo-tx { color: var(--green-deep); }

/* =============== 1.12 · #tiers (recolhível < 1024) =============== */
.tiers-sub {
  max-width: 680px; margin: var(--s-3) auto 0;
  font-size: 15px; line-height: 1.5; color: var(--ink-mid);
  text-wrap: pretty;
}
.tiers-sub b { color: var(--green-dark); font-weight: 800; }
.tiers-nota-hora { margin: calc(-1 * var(--s-3)) 0 var(--s-5); text-align: center; font-size: 13px; color: var(--ink-mid); }
.tier-card.is-voce { border-color: var(--green-brand); box-shadow: 0 0 0 2px var(--green-brand), var(--shadow-card); outline: 0; }
.tier-voce {
  display: inline-flex; align-items: center;
  margin-bottom: var(--s-2); padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--lime); color: var(--ink);
  font: 700 12px/1.4 var(--font);
  animation: c-voce 300ms var(--ease-out) both;
}
@keyframes c-voce { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* =============== Recolhíveis (#tiers e #comparar): celular/tablet entram fechados; conteúdo sempre no HTML =============== */
.recolhivel-btn { display: none; }
[data-recolhivel-modo="recolhe"] .recolhivel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; margin-top: var(--s-4); padding: 0 var(--s-5);
  border: 1.5px solid rgba(27, 34, 31, 0.18); border-radius: var(--r-pill);
  background: var(--bg-0); color: var(--ink);
  font-size: 14px; font-weight: 700;
  touch-action: manipulation;
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-toque) var(--ease-out);
}
[data-recolhivel-modo="recolhe"] .recolhivel-btn:hover { border-color: var(--ink); }
[data-recolhivel-modo="recolhe"] .recolhivel-btn:active { transform: scale(0.98); }
.recolhivel-btn .ic { width: 18px; height: 18px; transition: transform var(--d-abre) var(--ease-out); }
.is-aberto .recolhivel-btn .ic { transform: rotate(180deg); }
[data-recolhivel-modo="recolhe"] .recolhivel-corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-abre) var(--ease-out);
}
[data-recolhivel-modo="recolhe"].is-aberto .recolhivel-corpo { grid-template-rows: 1fr; }
[data-recolhivel-modo="recolhe"] .recolhivel-miolo {
  min-height: 0; overflow: hidden;
  /* respiro para as sombras dos cards não serem cortadas */
  margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
  padding: 0 var(--s-4) var(--s-6);
}
[data-recolhivel-modo="recolhe"].is-aberto .recolhivel-miolo { padding-top: var(--s-6); }
[data-recolhivel-modo="recolhe"]:not(.is-aberto) .recolhivel-miolo { visibility: hidden; transition: visibility 0s linear var(--d-abre); }
#tiers[data-recolhivel-modo="recolhe"]:not(.is-aberto) { padding-bottom: var(--s-10); }
#tiers[data-recolhivel-modo="recolhe"]:not(.is-aberto) .sec-head,
#comparar[data-recolhivel-modo="recolhe"]:not(.is-aberto) .sec-head { margin-bottom: 0; }

/* =============== Ordem por aparelho (Trava 8: MESMO HTML; só CSS order) — celular/tablet: hero → maquininhas →
   Adesão → faixas de taxa → faixa infinita → simulador…; computador: a ordem do oficial (a do HTML) =============== */
@media (max-width: 1023px) {
  main.pg-home { display: flex; flex-direction: column; }
  main.pg-home > * { order: 2; }
  main.pg-home > #hero, main.pg-home > #modelos, main.pg-home > #b2b { order: 0; }
  main.pg-home > #tiers, main.pg-home > .faixa { order: 1; }
}

/* =============== 1.13 · FAIXA INFINITA (não é mais link) =============== */
.faixa { cursor: default; }
@media (max-width: 560px) { .faixa { height: 40px; } .faixa-img { width: 32px; height: 32px; } }
@media (max-height: 540px) { .faixa { display: none; } }

/* =============== 1.14 · #modelos — cabeçalho =============== */
#modelos .sec-sub b { color: var(--ink); font-weight: 800; }
.quiz-abrir { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--s-2); }
.quiz-abrir-mais { font-weight: 800; }
@media (max-width: 374px) { .quiz-abrir-mais { display: block; } }

/* =============== 1.15 · CARD do modelo =============== */
.modelo-card { position: relative; }
/* etiqueta: pílula verde-escura, SEMPRE no mesmo lugar nos 4 (centrada logo abaixo da foto). Decisão: no canto
   superior esquerdo ela cobria a lateral da maquininha (as fotos ocupam o meio do card) — fica no lugar de sempre. */
.modelo-tag, .modelo-card--destaque .modelo-tag {
  background: var(--green-deep); color: var(--lime);
  font-size: 12px; letter-spacing: 0.05em;
  padding: 4px 12px;
}
.modelo-para { margin-top: var(--s-2); }
/* preço "de" riscado por uma linha própria (o Bloco F faz ela "se riscar" da esquerda pra direita) */
.preco-de { position: relative; align-self: flex-start; text-decoration: none; color: var(--ink-mid); }
.preco-de::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 52%;
  height: 1.5px; border-radius: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform var(--risco-dur) var(--ease-out);
}
.preco-de:empty::after { display: none; }
.badge-off, .badge-cupom, .badge-mais {
  transition: opacity var(--d-base) var(--ease-out) var(--selo-atraso), transform var(--d-base) var(--ease-spring) var(--selo-atraso);
}
/* estado "antes" (o Bloco F põe .anim-risco no card antes de ele entrar na tela e tira ao entrar; sem F = já riscado) */
.modelo-card.anim-risco .preco-de::after { transform: scaleX(0); transition: none; }
.modelo-card.anim-risco .badge-off,
.modelo-card.anim-risco .badge-cupom,
.modelo-card.anim-risco .badge-mais { opacity: 0; transform: scale(0.9); transition: none; }
/* economia + preço por dia (calculados no systems.js) */
.modelo-ganho { margin-top: var(--s-3); text-align: center; }
.modelo-economia, .modelo-dia { margin: 0; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.modelo-economia { color: var(--green-dark); font-weight: 600; }
.modelo-economia b { font-weight: 800; }
.modelo-dia { color: var(--ink-mid); }
.modelo-dia b { color: var(--green-dark); font-weight: 800; }
/* cashback em reais ([data-adesao]: some sozinho no fim da promoção, sem buraco) */
.modelo-cashback {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--lime-soft);
  border: 1px solid rgba(0, 163, 52, 0.18);
  border-radius: var(--r-md);
  font-size: 12px; line-height: 1.45; color: var(--ink);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.modelo-cashback .sys-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--green-dark); }
.slot-cb-tx b { font-weight: 800; color: var(--green-deep); }
.slot-cb-regras {
  display: inline; position: relative;
  padding: 0; margin: 0;
  font-size: 12px; font-weight: 700; color: var(--green-dark);
  text-decoration: underline; text-underline-offset: 2px;
}
.slot-cb-regras::after { content: ""; position: absolute; inset: -14px -8px; }   /* alvo de toque ≥ 44 px sem crescer a linha */
.slot-cb-regras:hover { color: var(--green-deep); }
.modelo-card .modelo-frete { font-size: 15px; }
/* "Vem com:" (vazio até a Ton publicar a lista — data.js > landing.caixa) */
.modelo-caixa { margin-top: var(--s-2); text-align: center; font-size: 13px; line-height: 1.4; color: var(--ink-mid); }
.slot-caixa-rot { font-weight: 700; color: var(--ink); }
/* upgrade pela diferença de parcela (T3 e T2) → card vizinho */
.modelo-upgrade { margin-top: var(--s-4); }
.slot-upgrade {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: 13px; line-height: 1.35; color: var(--ink);
  text-align: left;
  transition: background-color var(--d-fast) var(--ease-out);
}
.slot-upgrade b { color: var(--green-dark); font-weight: 800; white-space: nowrap; }
.slot-upgrade .sys-ic { width: 16px; height: 16px; flex: none; color: var(--green-dark); transition: transform var(--d-fast) var(--ease-out); }
.slot-upgrade:hover { background: var(--lime-soft); }
.slot-upgrade:hover .sys-ic { transform: translateX(2px); }
/* "Ver detalhes" + "Mandar no WhatsApp" no pé do card */
.modelo-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: var(--s-4);
  margin-top: auto; padding-top: var(--s-3);
}
.modelo-links .modelo-detalhe { margin-top: 0; padding-top: 0; }
.modelo-share { margin: 0; }
.slot-share {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--ink-mid);
  transition: color var(--d-fast) var(--ease-out);
}
.slot-share .sys-ic { width: 16px; height: 16px; color: var(--wa); }
.slot-share:hover { color: var(--green-dark); }
/* carrossel do celular: o card seguinte aparece ~8% (sinal de que há mais) — Trava 14: cabe em 280 */
@media (max-width: 640px) {
  .modelo-card { flex-basis: min(308px, calc(92.6% + 4px)); }
}
@media (max-width: 340px) {
  .modelo-card { padding: var(--s-4); }
  .parc-val { font-size: 52px; }
  .parc-cent { font-size: 20px; }
  .preco-vista-label, .parc-x { font-size: 14px; }
}

/* =============== 1.16 · selos + data =============== */
.selos-l8-total strong { font-size: 18px; }

/* =============== 1.18 · Promoção de Adesão =============== */
.b2b-copy .b2b-prazo > span { font-variant-numeric: tabular-nums; }
.b2b-copy .b2b-curto { display: none; margin: 0 0 var(--s-1); font-size: 17px; font-weight: 800; color: var(--green-deep); }
.b2b-copy .b2b-sub b { font-weight: 800; }
@media (max-width: 767px) { .b2b-copy .b2b-curto { display: block; } }

/* =============== 1.22 · Vantagens — 6º card "7 dias pra desistir, pela lei" (linha inteira fecha a grade) =============== */
.bento-card--lei {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: var(--s-6);
  padding: var(--s-8) var(--s-10);
  background: var(--bg-0); color: var(--ink);
  border: 1px solid var(--badge-gray);
}
.bento-lei-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--lime); color: var(--green-deep);
}
.bento-lei-ic .ic { width: 30px; height: 30px; }
.bento-card--lei .bento-txt h3 { margin-bottom: var(--s-2); }
.bento-card--lei .bento-txt p { max-width: 70ch; color: var(--ink-mid); }
.bento-card--lei .bento-txt { flex: 1 1 0; min-width: 0; }
.bento-card--lei .btn { flex: none; }   /* L11: botão à direita no PC; embaixo no celular (coluna) */
@media (max-width: 1023px) { .bento-card--lei { grid-column: 1 / -1; padding: var(--s-6); } }
@media (max-width: 767px) {
  .bento-card--lei { flex-direction: column; align-items: flex-start; min-height: 0; gap: var(--s-4); border-radius: 32px; }
  .bento-lei-ic { width: 52px; height: 52px; }
  .bento-lei-ic .ic { width: 26px; height: 26px; }
}

/* =============== 1.23 · Compare: botões com o nome do modelo =============== */
.cmp-btn { white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 900px) { .cmp-btn { font-size: 13px; padding-inline: 10px; } }

/* =============== 1.24 · Depoimentos: rótulo no pé de CADA card =============== */
.depo-card-rotulo {
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--border-soft);
  font-size: 12px; line-height: 1.4; color: var(--ink-mid);
}
@media (max-height: 540px) {
  header.depo-head.depo-head--cena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tx" "notas"; }
  .depo-head--cena .depo-cena { display: none; }
}

/* =============== 1.25 · Roteador "O que falta pra você pedir hoje?" (#falta) =============== */
#falta { padding: var(--s-16) 0; background: var(--bg-0); }
#falta:has(.falta:empty) { display: none; }   /* sem JS não há pílulas: a seção não aparece vazia */
.falta-card {
  max-width: 880px; margin-inline: auto;
  padding: var(--s-8);
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.falta { margin-top: var(--s-6); }
.falta-pilulas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.falta-pilula {
  min-height: 44px; padding: 0 var(--s-5);
  border: 1.5px solid rgba(27, 34, 31, 0.18); border-radius: var(--r-pill);
  background: var(--bg-0); color: var(--ink);
  font-size: 15px; font-weight: 700;
  touch-action: manipulation;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out), transform var(--d-toque) var(--ease-out);
}
.falta-pilula:hover { border-color: var(--ink); }
.falta-pilula:active { transform: scale(0.98); }
.falta-pilula[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--bg-0); }
.falta-resp { max-width: 640px; margin: var(--s-5) auto 0; }
.falta-resp.is-aberto { animation: c-falta var(--d-abre) var(--ease-out) both; }
@keyframes c-falta { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.falta-texto { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.falta-texto b { font-weight: 800; }
.falta-adesao { margin: var(--s-2) 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--green-dark); }
.falta-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }
.falta-btn { min-height: 48px; gap: var(--s-2); }
/* L11: "O preço" na home = escadinha dos 4 modelos (cada linha vai pro checkout do modelo) */
.falta-escada { list-style: none; display: grid; gap: var(--s-1); margin: var(--s-3) 0; padding: 0; text-align: left; }
.falta-escada-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; font-size: 15px;
}
.falta-escada-linha b { font-weight: 800; white-space: nowrap; }
.falta-escada-nome { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 6px; }
.falta-escada-nome .modelo-tag { font-size: 10.5px; padding: 2px var(--s-2); line-height: 1.2; white-space: nowrap; }
.falta-escada-preco { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 420px) {
  .falta-escada-linha { font-size: 14px; }
  .falta-escada-nome .modelo-tag { font-size: 10px; letter-spacing: .02em; }
  .falta-escada-preco { text-wrap: balance; }
}
.falta-escada-linha:hover { border-color: var(--ink); }
.falta-escada-linha[aria-current] { border-color: var(--lime); background: var(--lime-soft); }
.falta-fecho { margin-top: var(--s-2); }
.falta-btn--wa .sys-ic { width: 20px; height: 20px; color: var(--wa); }
@media (max-width: 900px) { #falta { padding: var(--s-12) 0; } }
@media (max-width: 560px) {
  .falta-card { padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); }
  .falta-pilulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .falta-pilula { padding: 0 var(--s-2); font-size: 14px; }
  .falta-texto { font-size: 15px; }
  .falta-btn { width: 100%; }
}

/* =============== 1.26 · FAQ: a 1ª pergunta convida (chevron em lime) =============== */
.faq-item:first-child .faq-chev {
  width: 26px; height: 26px; padding: 3px;
  border-radius: var(--r-full);
  background: var(--lime); color: var(--green-deep);
}

/* =============== 1.27 · CTA FINAL — o "comprovante" (pico-fim) =============== */
.ctafinal-topo { display: flex; flex-direction: column; align-items: center; }
.ctafinal-recibo {
  width: 100%; max-width: 360px;
  margin: var(--s-6) auto 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.ctafinal-recibo:empty { display: none; }
.ctafinal-acao { display: flex; flex-direction: column; align-items: center; }
.pg-home .urgency-clock--final { margin: var(--s-6) 0 var(--s-5); }
.pg-home .urgency-clock--final .t-box { min-width: clamp(60px, 9vw, 92px); font-size: clamp(36px, 6vw, 56px); }
.pg-home .urgency-clock--final .t-sep { font-size: clamp(28px, 4.5vw, 42px); }
.pg-home .ctafinal-proof { margin-bottom: var(--s-5); }
.pg-home .ctafinal-proof b { font-variant-numeric: tabular-nums; }
.ctafinal-todas {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--s-1);
  font-size: 14px; font-weight: 600; color: var(--on-dark);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease-out);
}
.ctafinal-todas:hover { color: var(--lime); }
.pg-home .ctafinal-micro { margin-top: var(--s-2); max-width: 520px; line-height: 1.5; }
/* o comprovante (marcação do systems.js > renderComprovante) */
.comp {
  position: relative;
  padding: calc(var(--picote) + var(--s-4)) var(--s-5) calc(var(--picote) + var(--s-4));
  background: var(--bg-0); color: var(--ink);
  text-align: left;
  font-family: var(--recibo-font);
  font-size: 13.5px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  /* picote: dentes em cima e embaixo (o papel do recibo) */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--picote)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--picote)) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--picote)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--picote)) 51% repeat-x;
}
.comp-lista { margin: 0; }
.comp-linha { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.comp-linha dt { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
.comp-linha dt::after {
  content: ""; flex: 1 1 auto; min-width: var(--s-3);
  border-bottom: 1.5px dotted var(--leader);
  transform: translateY(-4px);
}
.comp-linha dd { flex: none; margin: 0; font-weight: 700; white-space: nowrap; }
.comp-linha--modelo {
  flex-wrap: wrap;
  margin-bottom: var(--s-1); padding-bottom: var(--s-2);
  border-bottom: 1.5px dashed var(--border);
  font-weight: 800;
}
.comp-linha--modelo dt { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.01em; }
.comp-linha--modelo dd { margin-left: auto; color: var(--green-dark); font-weight: 800; }
.comp-status {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1.5px dashed var(--border);
}
.comp-aprovado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: var(--r-full);
  background: var(--green-deep); color: var(--lime);
  font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
}
.comp-check { width: 18px; height: 18px; flex: none; }
.comp-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }   /* o Bloco F anima 1 → 0 (desenha); sem F = desenhado */
.comp-selo {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--green-dark);
}
.comp-selo .sys-ic { width: 16px; height: 16px; }
.comp-nota { margin: var(--s-2) 0 0; font-family: var(--font); font-size: 12px; line-height: 1.4; color: var(--ink-mid); }
@media (max-width: 374px) {
  .comp { padding-inline: var(--s-4); font-size: 12.5px; }
  .comp-linha--modelo dt { font-size: 18px; }
}
/* A · celular em pé: sem a cena, comprovante na largura toda */
@media (max-width: 560px) {
  .ctafinal-cena { display: none; }
  .ctafinal-recibo { max-width: none; }
}
/* B · tela baixa: sem a cena; comprovante à esquerda e a ação à direita */
@media (max-height: 540px) {
  .ctafinal--cena .ctafinal-grade { grid-template-columns: minmax(0, 1fr); }
  .ctafinal-cena { display: none; }
  .pg-home .ctafinal-inner {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    grid-template-areas: "topo topo" "recibo acao";
    align-items: center; column-gap: var(--s-8);
  }
  .ctafinal-topo { grid-area: topo; }
  .ctafinal-recibo { grid-area: recibo; margin-top: var(--s-4); }
  .ctafinal-acao { grid-area: acao; }
  .pg-home .urgency-clock--final { margin-top: var(--s-4); }
  .pg-home .urgency-clock--final .t-box { min-width: 56px; font-size: 32px; }
  .pg-home .urgency-clock--final .t-sep { font-size: 24px; }
}

/* =============== 1.28 · Rodapé: link da marca (catálogo com referrer, nova aba) =============== */
.footer-marca a[data-cta] { white-space: nowrap; }

/* ---------- Bloco C · ajuste fino do celular (medido a 375×667: 1º card em < 2 telas) ---------- */
.modelo-seguro { font-size: 12px; }
.modelo-seguro-tx { white-space: nowrap; }
.modelo-cashback { line-height: 1.4; padding: var(--s-2) 10px; }
/* Dobrável fechado (280) — conferência na matriz 22/10: a linha "Pagamento seguro · desconto já aplicado" sem quebra
   alargava o card para 290px e cortava o texto à direita. Abaixo de 340: o card nunca passa do trilho, a linha
   quebra em 2 ao lado do cadeado e os 2 selos encolhem (como nos cards estreitos do computador). */
@media (max-width: 340px) {
  .modelo-card { min-width: 0; }
  .modelo-seguro-tx { white-space: normal; text-wrap: balance; }
  .modelo-badges { gap: var(--s-1); }
  .badge-off, .badge-cupom, .badge-mais { font-size: 12px; }
  .badge-off, .badge-cupom { padding-inline: var(--s-1); }
}
@media (max-width: 640px) {
  .modelo-specs { gap: var(--s-3); }
}
@media (max-width: 560px) {
  .pg-home .hero-taxas-nota { font-size: 13px; line-height: 1.5; }
  .hero-scene { max-width: 270px; }
  .hero-social { margin-top: var(--s-5); }
  .passos-wrap--cel .passos { gap: var(--s-2); }
  .passos-wrap--cel .passo-ic { width: 40px; height: 40px; }
  .passos-wrap--cel .passos-titulo { margin-bottom: var(--s-3); }
  .quiz-abrir { font-size: 14px; padding-inline: var(--s-4); }
}
@media (max-width: 560px) {
  .promo-bloco--ton { padding-block: 2px; }
  .promo-cupom { padding-block: 2px; }
  .count-clock .t-box { padding-block: 1px; }
}
/* cartão do cashback: ícone à esquerda e o texto + "regras" correndo juntos (o "regras" fica no fim da frase) */
.modelo-cashback { display: block; position: relative; padding-left: calc(10px + 18px + var(--s-2)); }
.modelo-cashback .sys-ic { position: absolute; left: 10px; top: calc(var(--s-2) + 1px); margin: 0; }
.slot-cb-tx { display: inline; }
/* #tiers no notebook (1024–1300): os 5 cards encolhem até caber (antes sobrava barra de rolagem lateral a 1280) */
@media (min-width: 1024px) {
  .tier-card { flex: 1 1 0; min-width: 200px; max-width: 240px; }
  .tiers-track { justify-content: center; }
}
/* cronômetro do computador ≤ 88 px */
@media (min-width: 561px) {
  .count-card { padding-block: 4px; }
  .count-clock .t-box { padding-block: 3px; }
}
.count-clock .t-label { line-height: 1.15; }
/* 280–300 (dobrável fechado): o cartão do cronômetro cabe com respiro */
@media (max-width: 300px) {
  .count-card { gap: 6px; padding-inline: 10px 4px; }
  .count-titulo { letter-spacing: 0; }
  .count-clock { gap: 2px; }
  .count-clock .t-box { min-width: 28px; font-size: 17px; }
  .count-clock .t-sep { font-size: 13px; }
}
/* notebook (1025–1439: cards de 284–300 px): frete e "por dia" numa linha só */
@media (min-width: 1025px) and (max-width: 1439px) {
  .modelo-card .modelo-frete { font-size: 14px; gap: 6px; }
  .modelo-card .modelo-frete .ic { width: 20px; height: 20px; }
  .modelo-economia, .modelo-dia { font-size: 12px; }
}

/* B (tela baixa) por último: vence os ajustes gerais acima (cronômetro de 36 px) */
@media (max-height: 540px) {
  .count-card { padding-block: 1px; }
  .count-clock .t-box { padding-block: 1px; }
}

/* Compatibilidade: páginas por modelo geradas ANTES do Bloco C (marcação antiga do topo) — some quando o D regerar */
.count-title {
  max-width: 150px; margin: 0;
  font-size: 13px; font-weight: 800; line-height: 1.25; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: right; color: var(--lime);
}
@media (max-width: 1099px) { .promo-so-pc { display: none; } }
@media (max-width: 560px), (max-height: 540px) {
  .count-title { max-width: none; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; text-align: left; }
}

/* ---------- Bloco C · fechamento ---------- */
/* 1.3: o chip do cronômetro no menu entra com fade de 200 ms quando o topo sai da tela */
body.is-scrolled .header-timer { animation: c-aparece 200ms var(--ease-out) both; }
/* 1.22 → L11 (C10): de 561 a 767 as vantagens também viram o carrossel do celular (a grade de 2 colunas saiu) */
/* 1.21: bandeiras mais baixas em tela baixa */
@media (max-height: 540px) {
  .pg-home #bandeiras { padding-block: var(--s-6); }
  .pg-home .bandeiras-label { margin-bottom: var(--s-3); }
}

/* L12 · Entrada do hero no CSS (auditoria A2): começa na 1ª pintura e nunca esconde o texto grande nem a foto
   (só transform). Mesmos atrasos e durações do antigo timeline do GSAP. Com "reduzir movimento" nada anima. */
@keyframes hero-sobe { from { transform: translateY(var(--hero-dy, 20px)); } }
@keyframes hero-sobe-some { from { opacity: 0; transform: translateY(var(--hero-dy, 20px)); } }
@keyframes hero-cena { from { transform: scale(0.94); } }
@media (prefers-reduced-motion: no-preference) {
  #hero .hero-badge { --hero-dy: 16px; animation: hero-sobe-some 0.5s var(--ease-out) 0.05s backwards; }
  #hero h1          { --hero-dy: 36px; animation: hero-sobe 0.8s var(--ease-out) 0.12s backwards; }
  #hero .hero-sub   { --hero-dy: 26px; animation: hero-sobe 0.7s var(--ease-out) 0.42s backwards; }
  #hero .hero-preco { --hero-dy: 16px; animation: hero-sobe-some 0.5s var(--ease-out) 0.62s backwards; }
  #hero .hero-ctas  { --hero-dy: 20px; animation: hero-sobe-some 0.6s var(--ease-out) 0.67s backwards; }
  #hero .hero-trust { --hero-dy: 12px; animation: hero-sobe-some 0.5s var(--ease-out) 0.92s backwards; }
  #hero .hero-scene { animation: hero-cena 0.9s var(--ease-out) 0.25s backwards; }
}