/* ==========================================================================
   PLANO CAR JA CLUBE CAR — Design System
   Propel X · planocar.com.br
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Paleta obrigatória (7 valores) */
  --verde-escuro:   #1A3D1A;
  --verde-vibrante: #3DB83D;
  --verde-medio:    #2A5C2A;
  --branco:         #FFFFFF;
  --cinza-claro:    #F5F5F5;
  --preto:          #0D0D0D;
  --verde-whatsapp: #25D366;

  /* Derivados funcionais (mesma família verde/neutro) */
  --verde-profundo: #122B12;
  --verde-lima:     #6FD933;
  --grad-marca: linear-gradient(135deg, var(--verde-vibrante), var(--verde-lima));
  --verde-vibrante-hover: #34A534;
  --verde-dim:      rgba(61, 184, 61, .12);
  --verde-dim-forte: rgba(61, 184, 61, .18);
  --borda-dark:     rgba(255, 255, 255, .10);
  --borda-dark-forte: rgba(255, 255, 255, .18);
  --texto-dim-dark: rgba(255, 255, 255, .72);
  --texto-dim-dark-fraco: rgba(255, 255, 255, .52);
  --borda-light:    rgba(13, 13, 13, .10);
  --texto-dim-light: rgba(13, 13, 13, .64);
  --texto-dim-light-fraco: rgba(13, 13, 13, .46);
  --vermelho-erro:  #C0392B;
  --vermelho-erro-bg: rgba(192, 57, 43, .08);

  /* Neutro quente do hero — casa com o ciclorama do render exploded-view
     (fundo do vídeo ~#C9C6BC). Não é cor nova de marca: é o branco/cinza
     da paleta puxado pro quente pra não brigar com o vídeo. */
  --hero-bg:        #E9E6DF;

  /* Tipografia — Outfit no lugar de Inter (mais caráter, geométrica, sem
     ser a fonte-padrão-de-IA); Barlow Condensed reservada pro display
     (hero) e números — deixou de ser aplicada em bloco a todo h1/h2/h3,
     que agora usam peso/tamanho pra hierarquia em vez de caixa alta. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display: clamp(3.25rem, 9vw + 1rem, 7.25rem);
  --fs-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2:      clamp(2rem, 4.4vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-price:   clamp(2.75rem, 6vw, 3.75rem);
  --fs-price-sm: clamp(1.75rem, 3vw, 2.25rem);
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-caption: .75rem;

  /* Espaçamento — escala 4px */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px; --sp-10: 96px; --sp-11: 128px;

  --section-py: var(--sp-8);
  --container-max: 1200px;
  --container-pad: 20px;

  /* Raios */
  --r-btn:   999px;
  --r-card:  16px;
  --r-card-sm: 12px;
  --r-input: 10px;
  --r-badge: 999px;
  --r-media: 20px;

  /* Sombras — tingidas na família verde/neutra em vez de preto puro, pra
     ficarem "da mesma luz" da marca em vez de genéricas. */
  --sh-card:       0 1px 2px rgba(10,20,10,.06), 0 8px 24px rgba(10,26,10,.09);
  --sh-card-hover: 0 2px 4px rgba(10,20,10,.07), 0 20px 44px rgba(10,26,10,.16);
  --sh-dark:       0 16px 40px rgba(4,12,4,.45);
  --sh-cta:        0 8px 24px rgba(61,184,61,.32);
  --sh-cta-hover:  0 12px 32px rgba(61,184,61,.45);
  --focus-ring:    0 0 0 3px rgba(61,184,61,.45);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* raio do glow que segue o cursor nos cards (spotlight hover) */
  --spot-size: 480px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --section-py: var(--sp-10);
  }
}

@media (min-width: 1280px) {
  :root {
    --section-py: var(--sp-11);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-body);
  background: var(--branco);
  color: var(--preto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
p { text-wrap: pretty; }

input, select, textarea {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--verde-vibrante); color: var(--preto); }

/* Grão sutil nas superfícies escuras — quebra a flatness digital que
   entrega design genérico. Um único SVG de ruído, tileável, baixíssima
   opacidade, sem custo de rede (data URI). z-index calibrado pra nunca
   ficar por cima do conteúdo real de cada seção. */
.section--dark::after,
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--dark > .container,
.footer > .container { position: relative; z-index: 1; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > .container { position: relative; z-index: 1; }
.hero__scroll-cue { z-index: 1; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--branco);
  color: var(--preto);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-input);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus {
  top: var(--sp-4);
  box-shadow: var(--sh-card-hover);
}

/* Focus visível global */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-input);
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA UTILITÁRIA
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: .92;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* h1/h2 usam Outfit (não mais o condensado em caixa alta em bloco) —
   peso e tamanho fazem a hierarquia, não o grito. O condensado fica
   reservado pro .display do hero e pra números (.stat__num, preços). */
.h1, .h2 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }

.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.body-lg { font-size: var(--fs-body-lg); line-height: 1.65; }
.body-sm { font-size: var(--fs-small); line-height: 1.55; }
.caption {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.text-dim-dark { color: var(--texto-dim-dark); }
.text-dim-light { color: var(--texto-dim-light); }

.text-grad {
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-py);
  position: relative;
}

.section--dark  { background: var(--verde-escuro); color: var(--branco); }
.section--light { background: var(--branco); color: var(--preto); }
.section--alt   { background: var(--cinza-claro); color: var(--preto); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-8);
}
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--verde-vibrante);
}
.kicker::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--verde-vibrante);
  flex-shrink: 0;
}
.section-head--center .kicker { justify-content: center; }

.section-head .sub {
  margin-top: var(--sp-4);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .grid { gap: var(--sp-6); }
}

.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

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

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 52px;
  padding-inline: var(--sp-6);
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  border: 1.5px solid transparent;
}
@media (min-width: 768px) {
  .btn { height: 56px; padding-inline: var(--sp-7); }
}

.btn--primary {
  background: var(--verde-vibrante);
  color: var(--verde-profundo);
  box-shadow: var(--sh-cta);
}
.btn--primary:hover {
  background: var(--verde-vibrante-hover);
  transform: translateY(-2px);
  box-shadow: var(--sh-cta-hover);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost-dark {
  background: transparent;
  color: var(--branco);
  border-color: var(--borda-dark-forte);
}
.btn--ghost-dark:hover {
  border-color: var(--branco);
  background: rgba(255,255,255,.06);
}

.btn--ghost-light {
  background: transparent;
  color: var(--preto);
  border-color: var(--borda-light);
}
.btn--ghost-light:hover {
  border-color: var(--preto);
  background: rgba(13,13,13,.04);
}

.btn--whatsapp {
  background: var(--verde-whatsapp);
  color: var(--branco);
  box-shadow: 0 8px 24px rgba(37,211,102,.32);
}
.btn--whatsapp:hover {
  background: #1fb959;
  transform: translateY(-2px);
}

.btn--block { width: 100%; }
.btn--sm { height: 44px; padding-inline: var(--sp-5); font-size: 13px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn .icon { width: 18px; height: 18px; flex-shrink: 0; }

.btn--loading .btn__label { visibility: hidden; }
.btn--loading { position: relative; }
.btn--loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5b. SPOTLIGHT HOVER — glow que segue o cursor (main.js atualiza --mx/--my)
   -------------------------------------------------------------------------- */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: radial-gradient(var(--spot-size) circle at var(--mx, 50%) var(--my, 50%), rgba(61,184,61,.14), transparent 70%);
  pointer-events: none;
}
.spotlight:hover::before,
.spotlight:focus-within::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .spotlight::before { transition: none; }
}

/* --------------------------------------------------------------------------
   6. BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-badge);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.badge--vibrante { background: var(--verde-vibrante); color: var(--verde-profundo); }
.badge--outline-dark {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--borda-dark-forte);
  color: var(--branco);
}
.badge--dim { background: var(--verde-dim); color: var(--verde-escuro); }
.badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* --------------------------------------------------------------------------
   7. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  background: rgba(26, 61, 26, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.navbar.is-scrolled {
  background: rgba(20, 48, 20, .94);
  border-bottom-color: var(--borda-dark);
}

/* Enquanto o hero (claro) está na tela, a navbar inverte pro tema claro.
   A classe é aplicada por js/hero.js — o is-scrolled do main.js sozinho
   não serve, porque ele dispara a 24px e o hero ocupa 3 viewports de
   scroll, o que deixaria uma barra verde-escura sólida sobre fundo claro
   durante todo o scrubbing. */
.navbar.is-over-hero { background: transparent; }
.navbar.is-over-hero.is-scrolled {
  background: rgba(233, 230, 223, .88);
  border-bottom-color: rgba(13, 13, 13, .10);
}
.navbar.is-over-hero .navbar__logo-text { color: var(--verde-escuro); }
.navbar.is-over-hero .navbar__links a,
.navbar.is-over-hero .navbar__phone { color: var(--texto-dim-light); }
.navbar.is-over-hero .navbar__links a:hover,
.navbar.is-over-hero .navbar__links a.is-active { color: var(--verde-escuro); }
.navbar.is-over-hero .navbar__toggle span { background: var(--verde-escuro); }

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--sp-5);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  /* sem isto o flexbox comprime a <img> e deforma o SVG: em 390px sobram
     ~68px para um lockup que precisa de 182px */
  flex-shrink: 0;
}
.navbar__logo img { width: auto; }
.navbar__logo-img { transition: opacity var(--dur) var(--ease-out); }

.navbar__logo-img--icone { height: 42px; }
/* escala com o viewport para nunca exceder a folga da navbar: em 900px os
   links e o telefone entram e o espaço para o logo cai para ~185px */
.navbar__logo-img--claro,
.navbar__logo-img--escuro { height: clamp(38px, 3.6vw, 46px); }

.navbar__logo-img--claro,
.navbar__logo-img--escuro { display: none; }
@media (min-width: 560px) {
  .navbar__logo-img--icone { display: none; }
  .navbar__logo-img--claro { display: block; }
  .navbar__logo-img--escuro { display: block; }
}

.navbar__logo-img--escuro {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  opacity: 0;
}
.navbar.is-over-hero .navbar__logo-img--claro { opacity: 0; }
.navbar.is-over-hero .navbar__logo-img--escuro { opacity: 1; }
.navbar__logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--branco);
  line-height: 1;
}
.navbar__logo-text span { color: var(--verde-vibrante); }

.navbar__links {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}
.navbar__links a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--texto-dim-dark);
  transition: color var(--dur-fast);
  position: relative;
  padding-block: var(--sp-2);
}
.navbar__links a:hover,
.navbar__links a.is-active { color: var(--branco); }
.navbar__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--verde-vibrante);
  border-radius: 2px;
}

.navbar__actions { display: flex; align-items: center; gap: var(--sp-5); }
.navbar__phone {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--texto-dim-dark);
}
.navbar__phone .icon { width: 16px; height: 16px; color: var(--verde-vibrante); }

.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
}
.navbar__toggle span {
  width: 22px; height: 2px;
  background: var(--branco);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .navbar__links { display: flex; }
  .navbar__phone { display: flex; }
  .navbar__toggle { display: none; }
}

/* Drawer mobile */
.navbar__drawer {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--verde-escuro);
  z-index: 490;
  padding: var(--sp-7) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
}
.navbar__drawer.is-open { transform: translateX(0); }
.navbar__drawer a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
}
.navbar__drawer .navbar__phone { display: flex; color: var(--branco); font-size: var(--fs-body-lg); }

@media (min-width: 900px) {
  .navbar__drawer { display: none; }
}

body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. HERO — vídeo exploded-view com scrubbing por scroll

   O render aprovado é um filme de produto sobre ciclorama de estúdio claro
   (fundo ~#C9C6BC). Por isso o hero deixou de ser verde-escuro: sobrepor
   esse vídeo a um fundo escuro exigiria um scrim pesado que destruiria o
   render. A paleta segue a mesma — branco/cinza no fundo, verde-escuro no
   texto, verde-vibrante no CTA.

   Estrutura: .hero-scroll é a "trilha" de scroll (300vh) e .hero fica
   sticky dentro dela. A fração percorrida da trilha vira currentTime do
   vídeo (js/hero.js). No mobile a trilha colapsa e o vídeo toca em loop,
   porque seek em <video> no iOS Safari é lento demais pra scrubbing.
   -------------------------------------------------------------------------- */
.hero-scroll {
  position: relative;
  background: var(--hero-bg);
}

.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--verde-escuro);
  overflow: hidden;
  isolation: isolate;
}

/* -------- Palco do vídeo -------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%;
  /* o render nasce um pouco lavado; um toque de contraste devolve a
     definição das peças sem alterar a cor do fundo */
  filter: contrast(1.04) saturate(.96);
}

/* Fallback de vídeo com falha — ocupa exatamente o mesmo espaço do
   <video> (mesmo position/object-fit do .hero__media pai, absoluto pra
   funcionar tanto no full-bleed do desktop quanto no card do mobile),
   então a altura do card nunca colapsa. Escondida por padrão; js/hero.js
   alterna .is-video-erro na trilha quando o vídeo dispara "error". */
.hero__poster-fallback {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 50%;
}
.hero-scroll.is-video-erro .hero__video { display: none; }
.hero-scroll.is-video-erro .hero__poster-fallback { display: block; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* -------- Conteúdo -------- */
.hero__content {
  position: relative;
  z-index: 1;
}

/* larguras por elemento, não uma coluna única: o título pode ser largo
   (tipografia como elemento gráfico) enquanto texto de leitura e CTAs
   ficam na faixa esquerda, longe das peças do render */
.hero__copy { max-width: none; }

.hero .badge { margin-bottom: var(--sp-5); }

.hero__title {
  margin-bottom: var(--sp-5);
  color: var(--verde-escuro);
  /* menor que --fs-display: em 116px o título quebrava em 4/5 linhas e
     estourava a altura do hero. Aqui fecha nas 2 linhas do briefing. */
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  max-width: 560px;
}
.hero__title .line2 { display: block; }
/* o gradiente padrão da marca (vibrante -> lima) perde contraste em fundo
   claro; no hero ele escurece pra manter legibilidade */
.hero__title .text-grad {
  background: linear-gradient(135deg, var(--verde-medio), var(--verde-vibrante));
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__sub {
  margin-bottom: var(--sp-7);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--texto-dim-light);
  max-width: 34ch;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: stretch;
}

/* o CTA secundário é transparente por padrão e ficava ilegível quando o
   render passa por trás dele — um véu leve resolve sem virar botão sólido
   e sem competir com o CTA primário */
.hero__ctas .btn--ghost-light {
  background: rgba(233, 230, 223, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(13, 13, 13, .18);
}
.hero__ctas .btn--ghost-light:hover {
  background: rgba(233, 230, 223, .92);
  border-color: var(--preto);
}
.hero__ctas .btn { width: 100%; }
@media (min-width: 560px) {
  .hero__ctas { flex-direction: row; align-items: center; }
  .hero__ctas .btn { width: auto; }
}

/* -------- Barra de números -------- */
.hero__numeros {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(13, 13, 13, .12);
  background: linear-gradient(to top, rgba(240, 238, 232, .92), rgba(240, 238, 232, .68));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__numeros-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}
@media (min-width: 720px) {
  .hero__numeros-inner { gap: var(--sp-8); padding-block: var(--sp-6); }
}

.num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
/* filete separando as colunas — some na primeira */
.num + .num { padding-left: var(--sp-4); }
.num + .num::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(13, 13, 13, .14);
}
@media (min-width: 720px) {
  .num + .num { padding-left: var(--sp-8); }
}

.num__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--verde-escuro);
  display: flex;
  align-items: baseline;
  gap: .06em;
}

.num__afixo {
  font-size: .48em;
  font-weight: 700;
  color: var(--verde-vibrante);
  letter-spacing: 0;
}
.num__afixo--pre {
  font-family: var(--font-body);
  font-size: .32em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-dim-light);
  align-self: center;
  margin-right: .18em;
}

.num__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  /* 3,10:1 com --texto-dim-light-fraco sobre o fundo da barra; abaixo do
     minimo de 4,5:1 para 12-14px */
  color: var(--texto-dim-light);
  text-wrap: balance;
}
@media (min-width: 720px) {
  .num__label { font-size: var(--fs-small); }
}

/* ==========================================================================
   MOBILE (< 900px) — empilhado, sem sticky e sem scrubbing.
   O vídeo fica num container 16/9 próprio, então o exploded view nunca é
   cortado pelo recorte de um viewport retrato.
   ========================================================================== */
@media (max-width: 899px) {
  .hero {
    padding-top: 96px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  /* o <video> vem antes no DOM (é o pano de fundo no desktop); aqui a
     ordem visual inverte pra o título e os CTAs virem primeiro */
  .hero__content { order: 1; }
  .hero__media   { order: 2; }
  .hero__numeros { order: 3; }
  .hero__content { padding-block: var(--sp-7) var(--sp-6); }
  .hero__copy { max-width: none; }

  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    margin: 0 var(--container-pad) var(--sp-8);
    aspect-ratio: 16 / 9;
    border-radius: var(--r-media);
    overflow: hidden;
    box-shadow: var(--sh-card);
  }
  .hero__video { object-fit: cover; object-position: center; }
  .hero__poster-fallback { object-position: center; }
  .hero__scrim { display: none; }
}

/* ==========================================================================
   [scroll-scrubbing em mobile/tablet — pedido do José em 2026-09-01,
   validado num iPhone real em 2026-09-01: suave, mantém.]
   Sobrescreve só o essencial do bloco acima pra ligar o mesmo mecanismo
   sticky + trilha de 300vh do desktop nesses breakpoints (currentTime
   segue o scroll). A primeira versão deste bloco também tornava o vídeo
   fundo full-bleed com o texto sobreposto — o José pediu de volta a
   apresentação em card (igual ao bloco original acima), só que agora
   pinado durante o scrub em vez de rolar em fluxo normal. Vídeo e texto
   cabem juntos dentro de 100svh: ver medição de altura no relatório.
   ========================================================================== */
@media (max-width: 899px) {
  .hero-scroll { height: 300vh; }
  .hero {
    position: sticky;
    top: 0;
    height: 100svh;
    justify-content: flex-start;
  }
  /* vídeo ACIMA do texto (ordem invertida do bloco original), card
     contido — não fundo. Mesmas propriedades do card original, com
     ritmo vertical mais compacto pra caber vídeo+texto+números juntos
     dentro de 100svh (ver nota de rodapé de viewport curto abaixo). */
  .hero__media   { order: 1; flex-shrink: 0; }
  .hero__content { order: 2; flex: 0 0 auto; }
  .hero__numeros { margin-top: auto; }

  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    /* 12px, não --sp-4 (16px) — sobrava 3px por causa do arredondamento
       de svh entre motores; medido e fechado. */
    margin: 0 var(--container-pad) 12px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-media);
    overflow: hidden;
    box-shadow: var(--sh-card);
  }
  .hero__video { object-fit: cover; object-position: center; }
  .hero__poster-fallback { object-position: center; }
  .hero__scrim { display: none; }

  /* ritmo mais compacto que o padrão do site — com vídeo full-width acima
     do texto, sobra menos altura útil dentro do svh do que no layout
     empilhado sem pin de antes. Ajusta só aqui, não nas regras base
     (essas continuam servindo o desktop sem mudança). */
  .hero__content { padding-block: var(--sp-6) var(--sp-5); }
  .hero .badge { margin-bottom: var(--sp-4); }
  .hero__title { margin-bottom: var(--sp-4); }
  .hero__sub { margin-bottom: var(--sp-6); }
}

/* Viewports baixos (iPhone SE e similares, <700px de altura): mesmo com o
   ritmo compactado acima, vídeo(197px)+texto+números ainda não cabem
   juntos em ~667px de svh — testado e medido. Aperta mais um degrau só
   aqui, sem mexer no breakpoint principal (que já está bom em 844px+). */
@media (max-width: 899px) and (max-height: 700px) {
  .hero { padding-top: 80px; }
  .hero__media { margin-bottom: var(--sp-3); max-height: 20vh; }
  .hero__content { padding-block: var(--sp-4) var(--sp-3); }
  .hero .badge { margin-bottom: var(--sp-3); }
  .hero__title { margin-bottom: var(--sp-3); font-size: clamp(1.85rem, 4.8vw, 4rem); }
  .hero__sub { margin-bottom: var(--sp-4); }
  .hero__numeros-inner { padding-block: var(--sp-2); }
}

/* ==========================================================================
   DESKTOP (>= 900px) — trilha de scroll + hero sticky + vídeo full-bleed.
   ========================================================================== */
@media (min-width: 900px) {
  .hero-scroll { height: 300vh; }

  .hero {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero__content {
    flex: 0 0 auto;
    padding-top: 128px;
  }

  /* desloca o palco pra direita: sem isso o carro invade a coluna de
     texto, e object-position sozinho só tem ~175px de curso (o recorte
     do cover), insuficiente pra abrir a coluna */
  .hero__media {
    left: 20%;
    right: -4%;
  }

  /* a barra de números encosta no rodapé do hero */
  .hero__numeros { margin-top: auto; }

  /* clareia a faixa esquerda pra o texto não disputar com as peças do
     render, sem escurecer nem lavar o vídeo inteiro */
  .hero__scrim {
    background:
      linear-gradient(96deg,
        var(--hero-bg) 0%,
        var(--hero-bg) 30%,
        rgba(233, 230, 223, .72) 44%,
        rgba(233, 230, 223, .28) 56%,
        rgba(233, 230, 223, 0) 66%),
      linear-gradient(to top, rgba(233, 230, 223, .5), transparent 20%);
  }
}

@media (min-width: 1200px) {
  .hero__title { max-width: 640px; }
}

/* -------- Indicador de scroll -------- */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-11) + var(--sp-5));
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(13, 13, 13, .22);
  border-radius: 999px;
  display: none;
  z-index: 1;
  pointer-events: none;
}
.hero__scroll-cue::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--verde-medio);
  animation: scroll-cue 2.2s var(--ease-out) infinite;
}
@keyframes scroll-cue {
  0%      { opacity: 0; transform: translateY(0); }
  35%     { opacity: 1; }
  70%,100%{ opacity: 0; transform: translateY(14px); }
}
@media (min-width: 900px) {
  .hero__scroll-cue { display: block; }
}
/* uma vez que o scrubbing começou, o indicador já cumpriu o papel */
.hero-scroll.is-scrubbing .hero__scroll-cue { opacity: 0; transition: opacity .4s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto !important; }
  .hero { position: relative !important; height: auto !important; }
  .hero__scroll-cue::before { animation: none; }
}

/* --------------------------------------------------------------------------
   8.5 CREDIBILIDADE — faixa de assinatura logo abaixo do hero

   Banda em branco puro entre o hero (#E9E6DF) e a secao Dor (#F5F5F5): o
   degrau de tom da presenca propria a faixa sem precisar de moldura.
   O tratamento e' tipografico (monograma + nome, filetes finos), nao
   cartao — os cards com monograma circular seguem existindo em S7, e
   repetir o mesmo desenho faria a faixa ler como secao duplicada.
   -------------------------------------------------------------------------- */
.credibilidade {
  background: var(--branco);
  color: var(--preto);
  border-block: 1px solid var(--borda-light);
  padding-block: var(--sp-6);
}

.credibilidade__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
@media (min-width: 1000px) {
  .credibilidade__inner {
    flex-direction: row;
    /* stretch (e nao center) para o filete da coluna de pagamento ocupar
       a altura inteira da faixa — centralizado ele saia do tamanho do
       paragrafo, lendo como um traco solto */
    align-items: stretch;
    justify-content: space-between;
    gap: var(--sp-8);
  }
}

.credibilidade__rotulo {
  /* --texto-dim-light-fraco rende 3,19:1 sobre branco, abaixo do minimo
     de 4,5:1 para 12px */
  color: var(--texto-dim-light);
  margin-bottom: var(--sp-4);
}

.empresas-linha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) 0;
}
@media (min-width: 640px) {
  .empresas-linha { grid-template-columns: repeat(4, minmax(0, auto)); }
}

.empresa-linha {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-inline: var(--sp-5);
  position: relative;
}
.empresa-linha:first-child { padding-inline-start: 0; }
/* filete separando — some no primeiro item de cada linha do grid */
.empresa-linha::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--borda-light);
}
.empresa-linha:first-child::before { content: none; }
@media (max-width: 639px) {
  /* no grid de 2 colunas, o filete some tambem no 3o item */
  .empresa-linha:nth-child(3)::before { content: none; }
  .empresa-linha:nth-child(odd) { padding-inline-start: 0; }
}

.empresa-linha__mono {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--verde-escuro);
  flex-shrink: 0;
}
.empresa-linha__nome {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.25;
  color: var(--texto-dim-light);
}

.credibilidade__pagamento {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--texto-dim-light);
  flex-shrink: 0;
}
.credibilidade__pagamento .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* --verde-vibrante da 2,55:1 sobre branco, abaixo do minimo de 3:1
     para elemento grafico; o verde-medio resolve sem sair da paleta */
  color: var(--verde-medio);
}
@media (min-width: 1000px) {
  .credibilidade__pagamento {
    align-items: center;
    padding-inline-start: var(--sp-8);
    border-inline-start: 1px solid var(--borda-light);
  }
}

/* --------------------------------------------------------------------------
   9. DOR — layout editorial (título grande à esquerda + lista à direita,
   em vez de 3 cards iguais em linha).

   Refino redesign 2.0: a pergunta do H2 vira o elemento gráfico da seção
   (Barlow Condensed grande, escopado só a .dor__lede — NÃO altera o .h2
   global usado em Benefícios/Planos/Depoimentos/etc.). A lista ganha
   numeração 01/02/03 na mesma lógica tipográfica do .empresa-linha__mono
   (credibilidade), reforçando o vocabulário do site em vez de introduzir
   um padrão novo. Numeral é aria-hidden (a ordem já é dada pela lista/
   heading) mas mantém cor sólida com contraste real — decorativo pra
   leitor de tela não é desculpa pra ilegível pra quem enxerga.
   -------------------------------------------------------------------------- */
.dor__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 900px) {
  .dor__grid {
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: var(--sp-10);
    /* center, não start: o título grande fica bem mais alto que a lista
       (6 linhas em Barlow Condensed 80px vs. 3 itens compactos) — start
       deixava ~235px de vazio solto embaixo da lista. Center distribui
       a diferença como respiro em vez de sobra. */
    align-items: center;
  }
}

.dor__lede { max-width: 480px; }
.dor__lede .h2 {
  /* Sobrescreve só aqui — .h2 continua Outfit em todo o resto do site.
     Condensada + grande faz a pergunta carregar a seção sozinha. */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  line-height: .96;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-5);
}
.dor__lede p { color: var(--texto-dim-light); font-size: var(--fs-body-lg); }

.dor__list {
  display: flex;
  flex-direction: column;
}
.card-dor {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--borda-light);
  transition: padding-left var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.dor__list .card-dor:first-child { padding-top: 0; }
.dor__list .card-dor:last-child { border-bottom: none; padding-bottom: 0; }
.card-dor:hover { padding-left: var(--sp-3); background: rgba(26,61,26,.025); }
.card-dor__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--verde-medio);
  flex-shrink: 0;
  align-self: center;
}
/* numeral e ícone centralizados um contra o outro (mesmo align-self) —
   sem isso, o numeral centralizava contra a altura da linha inteira
   (título + texto) enquanto o ícone ficava no topo, e como o título
   varia entre 1 e 2 linhas por item, o desalinhamento mudava de card
   pra card. */
.card-dor .icon-circle { margin-bottom: 0; flex-shrink: 0; align-self: center; }
.card-dor__body h3 { margin-bottom: var(--sp-2); }
.card-dor__body p { color: var(--texto-dim-light); font-size: var(--fs-body); }

.icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle--light { background: var(--verde-dim); color: var(--verde-escuro); }
.icon-circle--dark { background: transparent; border: 2px solid var(--branco); color: var(--branco); }
.icon-circle .icon { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   10. CARDS — BENEFÍCIOS

   Refino redesign 2.0: eram 4 cards idênticos em grid 2x2 — o clichê mais
   comum de seção "features" de template. O conteúdo já sinalizava
   prioridade (.card-beneficio--destaque, badge "Garantia", borda gradiente)
   mas com o mesmo tamanho das outras 3, o sinal quase não se via. Virou
   3 cards iguais em linha + a Crédito Fidelidade como faixa larga
   horizontal (grid-column:1/-1), ícone maior, composição lado a lado em
   vez de empilhada — não inventei uma prioridade nova, só dei peso visual
   à que já existia no código.
   -------------------------------------------------------------------------- */
.beneficios-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .beneficios-grid { grid-template-columns: repeat(3, 1fr); }
}

.card-beneficio {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--borda-dark);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.card-beneficio:hover {
  transform: translateY(-4px);
  border-color: var(--borda-dark-forte);
  background: rgba(255,255,255,.07);
}
.card-beneficio .icon-circle { margin-bottom: var(--sp-5); }
.card-beneficio h3 { color: var(--branco); margin-bottom: var(--sp-3); }
.card-beneficio p { color: var(--texto-dim-dark); font-size: var(--fs-small); }

.card-beneficio--destaque {
  position: relative;
  background: linear-gradient(160deg, rgba(61,184,61,.14), rgba(61,184,61,.04));
  border: 1.5px solid transparent;
  background-clip: padding-box;
}
.card-beneficio--destaque::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  padding: 1.5px;
  background: var(--grad-marca);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-beneficio--destaque .badge { margin-bottom: var(--sp-4); }

@media (min-width: 768px) {
  .beneficios-grid .card-beneficio--destaque {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    text-align: left;
  }
  .card-beneficio--destaque .icon-circle {
    width: 88px;
    height: 88px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .card-beneficio--destaque .icon-circle .icon { width: 40px; height: 40px; }
  .card-beneficio--destaque .card-beneficio__body { min-width: 0; }
}

/* --------------------------------------------------------------------------
   11. STEPS — COMO FUNCIONA

   Refino redesign 2.0: o círculo com borda + linha pontilhada conectando os
   três é o clichê mais reconhecível de "how it works" de template — nenhuma
   das referências do José (Linear/Stripe/Apple/Vercel) usa esse recurso.
   Trocado por numeral grande sem moldura (mesma família tipográfica do
   .card-dor__num na seção Dor, mas sem ícone ao lado — pode ir maior) e por
   um filete vertical entre colunas no desktop, reaproveitando o MESMO
   dispositivo do .empresa-linha::before da credibilidade — um fio que já
   existe no sistema, em vez de um terceiro padrão novo. A borda verde-
   vibrante do círculo antigo rendia 2,59:1 contra branco, abaixo do mínimo
   de 3:1 pra objeto gráfico — some junto com o círculo, não é mais um item
   pra lista de pendências.
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

.step { position: relative; }
@media (min-width: 768px) {
  .step { padding-inline-start: var(--sp-7); }
  .step:first-child { padding-inline-start: 0; }
  /* mesmo filete da credibilidade (.empresa-linha::before) — reaproveita
     o dispositivo em vez de inventar um separador novo */
  .step::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 2px; bottom: 2px;
    width: 1px;
    background: var(--borda-light);
  }
  .step:first-child::before { content: none; }
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--verde-escuro);
  margin-bottom: var(--sp-4);
}

.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--texto-dim-light); font-size: var(--fs-small); }

.steps-cta { text-align: center; }

/* --------------------------------------------------------------------------
   12. PLANOS
   -------------------------------------------------------------------------- */
.planos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  max-width: 920px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .planos-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

.plano-card {
  border-radius: var(--r-card);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  position: relative;
}

.plano-card--mensal {
  background: var(--branco);
  border: 1.5px solid var(--borda-light);
  order: 2;
}
.plano-card--anual {
  background: var(--verde-escuro);
  color: var(--branco);
  box-shadow: var(--sh-dark);
  order: 1;
  position: relative;
  /* sobrescreve overflow:hidden de .spotlight (mesma especificidade, essa
     regra vem depois) — era essa a origem real do corte do badge, não o
     ::after de ruído. .spotlight::before ganhou border-radius:inherit
     acima, então o brilho do hover continua clipado nos cantos redondos
     mesmo sem overflow:hidden aqui. */
  overflow: visible;
}
.plano-card--anual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  /* border-radius próprio (em vez de overflow:hidden no card) — isso
     clipava o badge "Mais Econômico", que fica de propósito meio pra
     fora do topo do card (top:-14px) */
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plano-card--anual > * { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .plano-card--mensal { order: 1; }
  .plano-card--anual { order: 2; }
}

.plano-card__badge {
  position: absolute;
  top: -14px; left: var(--sp-6);
}

.plano-card__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.plano-card--mensal .plano-card__eyebrow { color: var(--texto-dim-light); }
.plano-card--anual .plano-card__eyebrow { color: var(--texto-dim-dark); }

.plano-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-price);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.plano-card__price small { font-size: 1.125rem; font-weight: 600; font-family: var(--font-body); }

/* Refino redesign 2.0: o valor equivalente por mês dá número concreto pro
   badge "Mais Econômico" — sem isso, a economia fica só afirmada, não
   demonstrada. Cálculo real: R$ 598,00 / 12 = R$ 49,83, direto contra o
   R$ 66,13/mês do plano mensal ao lado. */
.plano-card__equivale {
  font-size: var(--fs-small);
  color: var(--texto-dim-dark);
}
.plano-card__equivale .tnum { font-weight: 700; color: var(--branco); }
.plano-card__equivale small { font-size: .85em; }

.plano-card__name {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--borda-light);
}
.plano-card--anual .plano-card__name { border-bottom-color: var(--borda-dark); }

.plano-card__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  flex-grow: 1;
}
.plano-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 500;
}
.plano-card__checklist .icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--verde-vibrante);
  margin-top: 1px;
}
.plano-card__checklist li.is-forte { font-weight: 700; }

.planos-nota {
  text-align: center;
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--texto-dim-light);
  margin-top: var(--sp-7);
  max-width: 560px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   13. PROVA SOCIAL — economia real (recibos) + depoimento em destaque

   Refino redesign 2.0: bloco novo .economia-real, ANTES do carrossel de
   depoimentos (prova concreta primeiro, opinião depois — o H2 da seção já
   promete "economiza de verdade"). Recibos fornecidos pelo José, recortados
   pra mostrar só o total impresso (sem os stickers/legendas do story
   original do Instagram — pedido dele foi "os R$ são o que importa").
   Valor economizado usa o mesmo .plano-card__price (Barlow Condensed,
   --fs-price-sm, branco em fundo escuro — mesma convenção do card anual
   de Planos) e o badge --vibrante já existente pro percentual, nada novo
   inventado. Filete vertical entre os dois casos reaproveita o dispositivo
   da credibilidade/steps.
   -------------------------------------------------------------------------- */
.economia-real {
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--borda-dark);
}
.economia-real__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-9);
}
@media (min-width: 800px) {
  .economia-real__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
}

.economia-caso { position: relative; }
@media (min-width: 800px) {
  .economia-caso:nth-child(2)::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--sp-8) / -2);
    top: 0; bottom: 0;
    width: 1px;
    background: var(--borda-dark);
  }
}

.economia-caso__nome {
  color: var(--texto-dim-dark);
  margin-bottom: var(--sp-5);
}

.economia-caso__recibos {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.economia-caso__recibo { flex: 1 1 0; min-width: 0; }
.economia-caso__recibo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card-sm);
  /* fade suave na base — acabamento intencional (bleed editorial em vez
     de borda dura de screenshot), não correção de recorte: o recorte do
     recibo "com plano" da Gabriela foi refeito pra já excluir a legenda
     verde residual do story original antes de chegar aqui */
  mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
}
.economia-caso__legenda {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 600;
}
.economia-caso__legenda--sem { color: var(--texto-dim-dark-fraco); }
/* --verde-vibrante rende 4,7:1 sobre --verde-escuro — passa o mínimo de
   4,5:1 pra texto pequeno (fs-small = 14px, bem na fronteira do teto de
   "texto pequeno") */
.economia-caso__legenda--com { color: var(--verde-vibrante); }

.economia-caso__resultado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.economia-caso__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-price-sm);
  color: var(--branco);
  line-height: 1;
}
.economia-caso__label {
  font-size: var(--fs-small);
  color: var(--texto-dim-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.depoimentos {
  max-width: 760px;
  margin-inline: auto;
}

.depoimento-painel {
  position: relative;
  min-height: 210px;
}
@media (min-width: 640px) {
  .depoimento-painel { min-height: 160px; }
}

.card-depoimento {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.card-depoimento.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.card-depoimento__quote {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  color: var(--branco);
  line-height: 1.55;
  text-wrap: balance;
}
.card-depoimento__quote::before { content: '“'; color: var(--verde-vibrante); }
.card-depoimento__quote::after { content: '”'; color: var(--verde-vibrante); }

.card-depoimento__byline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.card-depoimento__avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--verde-medio);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.card-depoimento__name { font-weight: 700; color: var(--branco); font-size: var(--fs-small); }
.card-depoimento__meta { font-size: 12px; color: var(--texto-dim-dark-fraco); margin-top: 1px; }

.depoimentos__nav {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--borda-dark);
}
.depoimento-dot {
  flex: 1;
  padding-block: var(--sp-3);
  text-align: left;
  border-top: 2px solid var(--borda-dark);
  margin-top: -1px;
  transition: border-color var(--dur) var(--ease-out);
}
.depoimento-dot__name { display: block; font-size: 12px; font-weight: 700; color: var(--texto-dim-dark-fraco); transition: color var(--dur) var(--ease-out); }
.depoimento-dot:hover .depoimento-dot__name { color: var(--texto-dim-dark); }
.depoimento-dot.is-active { border-top-color: var(--verde-vibrante); }
.depoimento-dot.is-active .depoimento-dot__name { color: var(--branco); }

@media (prefers-reduced-motion: reduce) {
  .card-depoimento { transition: none; }
}

/* --------------------------------------------------------------------------
   14. SOBRE / NÚMEROS
   -------------------------------------------------------------------------- */
.sobre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 900px) {
  .sobre__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
}

.sobre__text p { color: var(--texto-dim-light); font-size: var(--fs-body-lg); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--verde-vibrante);
  line-height: 1;
}
.stat__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--texto-dim-light);
}

.empresas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-9);
}
@media (min-width: 768px) {
  .empresas-grid { grid-template-columns: repeat(4, 1fr); }
}
.card-empresa {
  background: var(--cinza-claro);
  /* estava sem borda, sem sombra, sem hover — a única família de card do
     site que ficou parada enquanto todo o resto ganhou profundidade
     (card-beneficio, plano-card, card-dor). Borda tingida de verde em vez
     de cinza genérico: são 4 empresas do grupo, não um card qualquer. */
  border: 1px solid transparent;
  border-radius: var(--r-card-sm);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card-empresa:hover {
  transform: translateY(-4px);
  border-color: var(--verde-dim-forte);
  box-shadow: var(--sh-card);
}
.card-empresa__mono {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--verde-escuro);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
}
.card-empresa__name { font-size: var(--fs-small); font-weight: 700; }

/* --------------------------------------------------------------------------
   15. FAQ — lista lado a lado (2 colunas), sempre visível, sem accordion
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--sp-9);
  row-gap: var(--sp-7);
}
@media (min-width: 768px) {
  .faq-list { grid-template-columns: 1fr 1fr; }
}

.faq-item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--borda-light);
}
.faq-item__q {
  font-weight: 600;
  font-size: var(--fs-body-lg);
  margin-bottom: var(--sp-3);
  letter-spacing: -.01em;
}
.faq-item__a { color: var(--texto-dim-light); font-size: var(--fs-small); line-height: 1.65; }

.faq-cta {
  text-align: center;
  margin-top: var(--sp-9);
  /* mesmo filete de topo dos .faq-item — o CTA vira "mais uma linha" da
     lista (a resposta é "fala com a gente") em vez de flutuar solto
     depois dela. Único ajuste desta seção: o padrão lado a lado sem
     accordion já estava certo, não mexi na estrutura. */
  max-width: 560px;
  margin-inline: auto;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--borda-light);
}
.faq-cta p { color: var(--texto-dim-light); margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   16. CTA FINAL + FOOTER

   .cta-final__bg/__lines: achado numa auditoria em 2026-09-02 — o HTML
   ainda referenciava .hero__bg/.hero__lines (do hero ANTIGO), classes cujo
   CSS foi removido quando o hero virou vídeo. Ficaram duas divs mortas
   aqui: fundo liso, sem o gradiente "respirando" nem a textura de linhas
   do design original. Restaurado com classes próprias (nunca mais dependem
   do que o hero faz) — mesma receita visual de antes, só renomeada.
   -------------------------------------------------------------------------- */
.cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 22% 18%, rgba(61,184,61,.28), transparent 62%),
    radial-gradient(55% 50% at 82% 78%, rgba(18,43,18,.9), transparent 65%),
    linear-gradient(160deg, var(--verde-profundo), var(--verde-escuro) 55%, var(--verde-medio));
  animation: cta-final-breathe 60s ease-in-out infinite alternate;
}
@keyframes cta-final-breathe {
  0%   { transform: scale(1) translate(0, 0); opacity: 1; }
  50%  { transform: scale(1.12) translate(-2%, 2%); opacity: .92; }
  100% { transform: scale(1.05) translate(2%, -1%); opacity: 1; }
}

.cta-final__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    transparent 1px,
    transparent 64px
  );
  opacity: .5;
}

.cta-final {
  text-align: center;
  padding-block: var(--sp-11);
}
.cta-final__sub {
  max-width: 560px;
  margin: var(--sp-5) auto var(--sp-7);
  color: var(--texto-dim-dark);
  font-size: var(--fs-body-lg);
}
.cta-final__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 560px) {
  .cta-final__ctas { flex-direction: row; justify-content: center; }
}
.cta-final__ctas .btn { width: 100%; }
@media (min-width: 560px) { .cta-final__ctas .btn { width: auto; } }

.footer {
  background: var(--verde-profundo);
  color: var(--texto-dim-dark);
  padding-block: var(--sp-8);
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--borda-dark);
}
@media (min-width: 768px) {
  .footer__top { flex-direction: row; justify-content: space-between; }
}
.footer__brand { display: flex; align-items: center; gap: var(--sp-3); }
.footer__brand img { height: 34px; width: auto; }
.footer__contact { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-small); }
.footer__contact a:hover { color: var(--branco); }
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  color: var(--texto-dim-dark);
}
.footer__social:hover { color: var(--branco); }
.footer__social .icon { width: 18px; height: 18px; }

.footer__bottom {
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: 13px;
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer__legal { display: flex; gap: var(--sp-5); }
.footer__legal a:hover { color: var(--branco); }

/* --------------------------------------------------------------------------
   17. WHATSAPP FLUTUANTE
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 600;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.08); }

/* escondido enquanto o hero (que já tem seu próprio CTA de WhatsApp) está
   visível — evita colidir com os botões do hero em telas curtas */
.whatsapp-float.is-hidden {
  opacity: 0;
  transform: scale(.75);
  pointer-events: none;
}
.whatsapp-float .icon { width: 30px; height: 30px; color: var(--branco); }
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; }
}

/* --------------------------------------------------------------------------
   18. CHECKOUT — STEPPER
   -------------------------------------------------------------------------- */
.checkout-main {
  padding-top: calc(72px + var(--sp-8));
  padding-bottom: var(--sp-10);
  background: var(--cinza-claro);
  min-height: 100vh;
}

.checkout-wrap {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.stepper {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-8);
}
.stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  position: relative;
}
.stepper__circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  border: 2px solid var(--borda-light);
  background: var(--branco);
  color: var(--texto-dim-light-fraco);
  transition: all var(--dur) var(--ease-out);
  z-index: 1;
}
.stepper__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-dim-light-fraco);
}
.stepper__item::before {
  content: '';
  position: absolute;
  top: 17px; left: -50%; right: 50%;
  height: 2px;
  background: var(--borda-light);
  z-index: 0;
}
.stepper__item:first-child::before { display: none; }

.stepper__item.is-active .stepper__circle {
  border-color: var(--verde-vibrante);
  color: var(--verde-escuro);
  box-shadow: 0 0 0 4px var(--verde-dim);
}
.stepper__item.is-active .stepper__label { color: var(--verde-escuro); }

.stepper__item.is-done .stepper__circle {
  background: var(--verde-vibrante);
  border-color: var(--verde-vibrante);
  color: var(--verde-profundo);
}
.stepper__item.is-done .stepper__label { color: var(--preto); }
.stepper__item.is-done::before { background: var(--verde-vibrante); }

/* --------------------------------------------------------------------------
   19. CHECKOUT — CARD / STEP PANELS
   -------------------------------------------------------------------------- */
.checkout-card {
  background: var(--branco);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--sh-card);
}
@media (min-width: 640px) {
  .checkout-card { padding: var(--sp-7); }
}

.checkout-step { display: none; }
.checkout-step.is-active {
  display: block;
  animation: step-in var(--dur-slow) var(--ease-out);
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-step.is-active { animation: none; }
}

.checkout-step h1 {
  margin-bottom: var(--sp-6);
}

/* Radio cards (plano / pagamento) */
.radio-card {
  display: block;
  position: relative;
  border: 1.5px solid var(--borda-light);
  border-radius: var(--r-card-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.radio-card:has(input:checked) {
  border-color: var(--verde-vibrante);
  background: var(--verde-dim);
}
.radio-card input { position: absolute; opacity: 0; }

.radio-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.radio-card__radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--borda-light);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--dur-fast);
}
.radio-card:has(input:checked) .radio-card__radio {
  border-color: var(--verde-vibrante);
}
.radio-card:has(input:checked) .radio-card__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--verde-vibrante);
}

.radio-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-price-sm);
  line-height: 1;
}
.radio-card__price small { font-size: .9rem; font-family: var(--font-body); font-weight: 600; }
.radio-card__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texto-dim-light-fraco); margin-bottom: var(--sp-1); }
.radio-card__note { font-size: var(--fs-small); color: var(--texto-dim-light); margin-top: var(--sp-2); }
.radio-card__badge { margin-bottom: var(--sp-3); }

.radio-card ul {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borda-light);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.radio-card ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}
.radio-card ul .icon { width: 16px; height: 16px; color: var(--verde-vibrante); flex-shrink: 0; margin-top: 2px; }

.radio-card--pagamento { margin-bottom: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.radio-card--pagamento .radio-card__head { gap: var(--sp-3); }
.radio-card--pagamento .icon { width: 22px; height: 22px; color: var(--verde-escuro); }
.radio-card--pagamento .radio-card__title { font-weight: 700; font-size: var(--fs-small); flex-grow: 1; }

/* --------------------------------------------------------------------------
   20. CHECKOUT — FORM
   -------------------------------------------------------------------------- */
.form-section {
  margin-bottom: var(--sp-7);
}
.form-section__title {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-dim-light-fraco);
  margin-bottom: var(--sp-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (min-width: 520px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: 1.5fr 1fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-small);
  font-weight: 600;
}
.field label .req { color: var(--verde-vibrante); }

.field input,
.field select {
  height: 52px;
  padding-inline: var(--sp-4);
  border: 1.5px solid var(--borda-light);
  border-radius: var(--r-input);
  background: var(--branco);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--verde-vibrante);
  box-shadow: 0 0 0 3px var(--verde-dim);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.field.has-error input,
.field.has-error select { border-color: var(--vermelho-erro); background: var(--vermelho-erro-bg); }
.field__error {
  font-size: 13px;
  color: var(--vermelho-erro);
  display: none;
  font-weight: 600;
}
.field.has-error .field__error { display: block; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--texto-dim-light);
  line-height: 1.55;
}
.field-check input {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--verde-vibrante);
  flex-shrink: 0;
}
.field-check a { color: var(--verde-escuro); font-weight: 700; text-decoration: underline; }

.checkout-nav {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.checkout-nav .btn { flex: 1; }

.form-alert {
  display: none;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--vermelho-erro-bg);
  border: 1px solid rgba(192,57,43,.25);
  border-radius: var(--r-input);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--vermelho-erro);
  font-weight: 600;
}
.form-alert.is-visible { display: flex; }
.form-alert .icon { width: 20px; height: 20px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   21. CHECKOUT — RESUMO / SUCESSO
   -------------------------------------------------------------------------- */
.summary-box {
  border: 1px solid var(--borda-light);
  border-radius: var(--r-card-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.summary-box__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--borda-light);
}
.summary-box__row:last-child { border-bottom: none; }
.summary-box__row dt { color: var(--texto-dim-light); }
.summary-box__row dd { font-weight: 700; text-align: right; }
.summary-box__row.is-total { padding-top: var(--sp-4); }
.summary-box__row.is-total dt,
.summary-box__row.is-total dd { font-size: var(--fs-price-sm); font-family: var(--font-display); font-weight: 800; }

.summary-edit {
  font-size: 13px;
  font-weight: 700;
  color: var(--verde-escuro);
  text-decoration: underline;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--texto-dim-light-fraco);
  margin-top: var(--sp-5);
}
.secure-note .icon { width: 16px; height: 16px; }

.success-view { display: none; text-align: center; padding-block: var(--sp-6); }
.success-view.is-active { display: block; }
.success-view__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--verde-dim);
  color: var(--verde-vibrante);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-6);
}
.success-view__icon .icon { width: 36px; height: 36px; }
.success-view h1 { margin-bottom: var(--sp-4); }
.success-view p { color: var(--texto-dim-light); margin-bottom: var(--sp-6); }

.pix-box {
  background: var(--cinza-claro);
  border-radius: var(--r-card-sm);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.pix-box img { width: 200px; height: 200px; margin-inline: auto; border-radius: var(--r-input); background: var(--branco); }
.pix-box__code {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.pix-box__code input {
  flex-grow: 1;
  height: 48px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-input);
  border: 1.5px solid var(--borda-light);
  background: var(--branco);
  font-size: 13px;
  color: var(--texto-dim-light);
}

/* --------------------------------------------------------------------------
   22. PÁGINAS LEGAIS
   -------------------------------------------------------------------------- */
.legal-main {
  padding-top: calc(72px + var(--sp-8));
  padding-bottom: var(--sp-10);
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.legal-main h1 { margin-bottom: var(--sp-3); }
.legal-main .updated { color: var(--texto-dim-light-fraco); font-size: var(--fs-small); margin-bottom: var(--sp-8); }
.legal-main h2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 1.375rem;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--borda-light);
}
.legal-main p, .legal-main li { color: var(--texto-dim-light); margin-bottom: var(--sp-4); }
.legal-main ul { padding-left: var(--sp-5); }
.legal-main li { list-style: disc; margin-bottom: var(--sp-2); }
.legal-main a { color: var(--verde-escuro); font-weight: 700; text-decoration: underline; }
.legal-main strong { color: var(--preto); }

/* --------------------------------------------------------------------------
   23. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}