/* ============================================================
   DESTRAVA-LÍNGUA - IDENTIDADE VISUAL PEDAGÓGICA PREMIUM
   Inspirada no design de alta conversão do site de referência:
   - Azul-marinho nobre (#101D38) para títulos com Poppins ExtraBold
   - Azul vibrante (#2563EB) e Laranja quente (#F97316) para destaques pontuais
   - Fundo principal (#FFFCF7) com pontinhos discretos azuis
   - Fundo alternado bege/creme suave (#FFF8F0 e #FFF5E8) sem azul pálido
   - Cards brancos com cantos arredondados, bordas sutis e sombras profundas
   ============================================================ */

:root {
  /* ============================================================
     NOVA PALETA DE CORES — IDENTIDADE DE REFERÊNCIA
     ============================================================ */
  --navy-dark: #101D38;          /* Azul-marinho forte para títulos principais */
  --blue-vibrant: #2563EB;       /* Azul vibrante para palavras de ênfase */
  --orange-accent: #F97316;      /* Laranja forte para destaques comerciais e urgência */
  --orange-light: #FFEDD5;       /* Fundo suave laranja */
  
  --bg-warm-white: #FFFCF7;      /* Branco quente base */
  --bg-cream-soft: #FFF8F0;      /* Creme/bege suave para seções alternadas */
  --bg-cream-warm: #FFF5E8;      /* Bege muito suave e aconchegante */
  --surface: #FFFFFF;            /* Branco puro para cards */
  --surface-warm: #FFFEFC;       /* Variação quente de surface */
  --gold-badge: #FFD45A;         /* Amarelo-dourado para etiquetas e selos */
  --gold-light: #FEF3C7;         /* Fundo suave dourado */

  /* Tipografia & Contrastes */
  --ink: #101D38;               /* Azul-marinho escuro elegante para títulos */
  --ink-soft: #526581;          /* Azul acinzentado de referência para textos secundários */
  --ink-muted: #64748B;         /* Cinza discreto para microtextos e apoios */

  /* Cores de Apoio Pedagógicas */
  --teal-title: #0F5B5C;        /* Verde-petróleo elegante */
  --purple-soft: #6366F1;       /* Índigo equilibrado */
  --purple-light: #EEF2FF;      /* Fundo suave índigo */
  --yellow-soft: #F59E0B;       /* Dourado quente */
  --green-soft: #10B981;        /* Esmeralda suave */
  --green-light: #ECFDF5;       /* Fundo suave esmeralda */
  --blue-soft: #0284C7;         /* Azul educativo sereno */
  --blue-light: #F0F9FF;        /* Fundo suave azul */
  --pink-soft: #E11D48;         /* Rosa/coral educacional */
  --pink-light: #FFF1F2;        /* Fundo suave rosa */

  /* Cor Oficial de Compra / CTA (Verde padrão profissional) */
  --cta: #16A34A;               /* Verde profissional */
  --cta-hover: #15803D;         /* Verde escuro no hover */
  --cta-shadow: rgba(22, 163, 74, 0.28);

  /* Bordas e Sombras Sutis */
  --border-card: #E5E9F0;       /* Borda fina e moderna em cinza claro */
  --border-focus: #CBD5E1;      /* Borda no hover */
  --shadow-sm: 0 2px 8px rgba(16, 29, 56, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 29, 56, 0.06);
  --shadow-lg: 0 12px 28px rgba(16, 29, 56, 0.08);
  --shadow-hover: 0 10px 26px rgba(16, 29, 56, 0.1);

  /* Tipografia */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1120px;
  --section-pad-desktop: 90px;
  --section-pad-mobile: 60px;

  /* Transições Suaves */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background-color: var(--bg);
  overflow-x: hidden;
  position: relative;
}

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

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

button, a {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}

/* Tipografia Profissional */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--font-family);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

h3 {
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  font-weight: 700;
}

.teal-accent {
  color: var(--teal-title);
  font-weight: 700;
}

/* ============================================================
   TOPO DA SEÇÃO DE BÔNUS (Ícones, Pílula, Título e Marca-texto)
   ============================================================ */
.bonus-header-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.bonus-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(16, 29, 56, 0.12);
  transition: transform 0.2s ease, z-index 0.2s ease;
  cursor: default;
  position: relative;
  opacity: 0;
  transform: scale(0.6);
}

.bonus-avatar:first-child {
  margin-left: 0;
}

.bonus-avatar:hover {
  transform: scale(1.15) translateY(-2px);
  z-index: 10;
}

.bonus-avatar.avatar-blue   { background-color: #E0F2FE; color: #0284C7; z-index: 3; }
.bonus-avatar.avatar-yellow { background-color: #FEF3C7; color: #D97706; z-index: 2; }
.bonus-avatar.avatar-purple { background-color: #EDE9FE; color: #7C3AED; z-index: 1; }

/* Animação Stagger de 80ms dos 3 ícones */
.section-header.bonus-header.revealed .bonus-avatar {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-header.bonus-header.revealed .bonus-avatar:nth-child(1) { transition-delay: 0.08s; }
.section-header.bonus-header.revealed .bonus-avatar:nth-child(2) { transition-delay: 0.16s; }
.section-header.bonus-header.revealed .bonus-avatar:nth-child(3) { transition-delay: 0.24s; }

.bonus-header-pill {
  padding: 5px 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.bonus-section-title {
  font-family: var(--font-family);
  font-size: clamp(1.65rem, 3.8vw, 2.35rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.3;
  text-align: center;
  margin-bottom: 12px;
}

.bonus-title-line1 {
  display: block;
}

.bonus-title-line2 {
  display: inline-block;
  margin-top: 6px;
  text-align: center;
}

/* Marca-texto "turma inteira" (fundo #FFD45C, borda 2px, rotação -1°, animação da esq p/ dir) */
.bonus-highlight-box {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 10px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  margin: 0 2px;
}

.bonus-highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.bonus-header.revealed .bonus-highlight-box::before {
  width: 100%;
  transition-delay: 0.35s;
}

.section-header .bonus-subtitle,
.bonus-subtitle {
  font-family: var(--font-family) !important;
  font-size: 11.5px !important;
  color: #64748B !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

@media (max-width: 600px) {
  .bonus-section-title {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem);
    line-height: 1.28;
  }
  .section-header .bonus-subtitle,
  .bonus-subtitle {
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 280px !important;
  }
}

@media (max-width: 390px) {
  .section-header .bonus-subtitle,
  .bonus-subtitle {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    max-width: 260px !important;
  }
}

@media (max-width: 360px) {
  .section-header .bonus-subtitle,
  .bonus-subtitle {
    font-size: 10px !important;
    line-height: 1.28 !important;
    max-width: 240px !important;
  }
}

p {
  color: var(--ink-soft);
}

b, strong {
  color: var(--ink);
  font-weight: 700;
}

/* Layout Utilitários */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

section {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  position: relative;
}

@media (max-width: 768px) {
  body {
    font-size: 15.5px;
  }
  section {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }
}

/* Divisórias entre seções (removidas conforme solicitado) */
.section-divider {
  display: none !important;
  height: 0;
  border: none;
  margin: 0;
}

/* ============================================================
   COMPONENTES DE DESIGN PEDAGÓGICO MODERNO
   ============================================================ */

/* 1. .card (Cards elegantes, fundo branco, borda cinza fina e sombra suave) */
.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-focus);
}

/* Cores de apoio elegantes e sutis nos cards */
.shadow-blue, .shadow-green, .shadow-orange, .shadow-pink, .shadow-purple {
  box-shadow: var(--shadow-sm);
}

.shadow-blue:hover {
  border-color: #BAE6FD;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.08);
}
.shadow-green:hover {
  border-color: #A7F3D0;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08);
}
.shadow-orange:hover {
  border-color: #FED7AA;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.08);
}
.shadow-pink:hover {
  border-color: #FECDD3;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.08);
}
.shadow-gold {
  box-shadow: var(--shadow-sm);
  border-color: #E2E8F0;
}
.shadow-gold:hover {
  border-color: #FDE68A;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.08);
}
.shadow-purple:hover {
  border-color: #C7D2FE;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.08);
}

/* 2. .pill (Etiquetas discretas, estilo pill moderno e acolhedor) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.25;
}

/* ============================================================
   ETIQUETAS & PILLS PEDAGÓGICAS COM CORES VIVAS E ALTO CONTRASTE
   (Fundo suave da página preservado, etiquetas destacadas e nítidas)
   ============================================================ */
.pill-purple {
  background-color: #EEF2FF;
  color: #4338CA;
  border: 1.5px solid #A5B4FC;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

.pill-green {
  background-color: #DCFCE7;
  color: #15803D;
  border: 1.5px solid #86EFAC;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12);
}

.pill-yellow {
  background-color: #FEF08A;
  color: #854D0E;
  border: 1.5px solid #FACC15;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.14);
}

.pill-pink {
  background-color: #FFE4E6;
  color: #BE123C;
  border: 1.5px solid #FDA4AF;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.12);
}

.pill-blue {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1.5px solid #7DD3FC;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.pill-orange {
  background-color: #FFEDD5;
  color: #C2410C;
  border: 1.5px solid #FDBA74;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.12);
}

.pill-white {
  background-color: #FFFFFF;
  color: var(--navy-dark);
  border: 1.5px solid #CBD5E1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 29, 56, 0.05);
}

.pill-sm {
  font-size: 11px;
  padding: 3px 10px;
  letter-spacing: 0.5px;
  font-weight: 800;
}

/* 3. BOTÕES (.btn-cta e .btn-outline) */
.btn-cta, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* BOTÃO PRINCIPAL DE COMPRA (.btn-cta) - VERDE PADRÃO PROFISSIONAL COM DEGRADÊ DISCRETO */
.btn-cta {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  color: #FFFFFF !important;
  border: 1px solid #16A34A;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
  z-index: 1;
}

/* Borda elegante com degradê verde suave animado */
.btn-cta::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #34D399, #16A34A, #059669, #4ADE80, #16A34A);
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0.55;
  animation: subtleBorderShift 4s ease infinite;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@keyframes subtleBorderShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Hover: Zoom suave (scale 1.05) com duração de 0.3s com ease sem deslocar layout */
.btn-cta {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center center;
}

.btn-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.42);
}

.btn-cta:hover::after {
  opacity: 0.9;
}

.btn-cta:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
  transition: transform 0.12s ease;
}

/* BOTÃO DO PLANO BÁSICO (.btn-outline / .btn-plan-basic) - AZUL BONITO, FIRME E FIXO (SEM ZOOM) */
.btn-outline,
.btn-plan-basic {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #2563EB !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25) !important;
  font-family: var(--font-family);
  font-weight: 800;
  text-transform: uppercase;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  transform: none !important; /* Totalmente fixo, sem zoom */
}

.btn-outline svg,
.btn-plan-basic svg {
  color: #FFFFFF !important;
}

.btn-outline:hover,
.btn-plan-basic:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35) !important;
  color: #FFFFFF !important;
  transform: none !important; /* Sem efeito de zoom */
}

.btn-outline:active,
.btn-plan-basic:active {
  background: #1E3A8A !important;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.2) !important;
  transform: none !important; /* Sem efeito de zoom */
}

/* Botão pequeno (mobile sticky bar) */
.btn-sm {
  padding: 10px 20px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.28);
}
.btn-sm:hover {
  transform: scale(1.04);
}
.btn-sm:active {
  transform: scale(0.98);
}

/* Pulsação sutil do botão hero */
@keyframes heroPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.42);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32);
  }
}

.btn-pulse {
  animation: heroPulse 3.5s ease-in-out infinite;
}
.btn-pulse:hover {
  animation: none;
}

/* 4. Destaques de Palavras Inspirados no Site de Referência */
.highlight {
  display: inline-block;
  background-color: #FEF3C7;
  color: #92400E;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #FDE68A;
  font-weight: 800;
}

.hl-blue {
  color: var(--blue-vibrant);
  position: relative;
  font-weight: 800;
}

.hl-orange {
  color: var(--orange-accent);
  position: relative;
  font-weight: 800;
}

.hl-mark-yellow {
  background: linear-gradient(180deg, transparent 60%, rgba(254, 240, 138, 0.55) 60%);
  padding: 0 4px;
  border-radius: 4px;
}

/* 5. .icon-box (Caixas de ícone suaves com cantos moderados) */
.icon-box {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box svg {
  width: 24px;
  height: 24px;
}

.icon-box-purple { background-color: #EEF2FF; color: #4F46E5; }
.icon-box-orange { background-color: #FEF3C7; color: #D97706; }
.icon-box-green  { background-color: #ECFDF5; color: #059669; }
.icon-box-pink   { background-color: #FFF1F2; color: #E11D48; }
.icon-box-blue   { background-color: #F0F9FF; color: #0284C7; }
.icon-box-yellow { background-color: #FEF9C3; color: #CA8A04; }

/* 6. LOGO "Destrava-Língua" */
.logo {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.5px;
  display: inline-flex;
}

.logo span {
  display: inline-block;
  color: #FFFFFF;
}

/* ============================================================
   FAIXA DE OFERTA NO TOPO (TOP BANNER - MODELO DE REFERÊNCIA)
   Fundo azul-marinho escuro sólido (#1E293B) + raio amarelo +
   texto branco em negrito + data em etiqueta laranja arredondada (#F97316)
   ============================================================ */
/* ============================================================
   FAIXA DE OFERTA NO TOPO (Medidas Fluidas e 100% Responsivas)
   ============================================================ */
.top-banner-offer {
  width: 100%;
  background: #1B2235;
  color: #FFFFFF;
  position: relative;
  z-index: 950;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  height: 70px; /* 70px no desktop */
  box-sizing: border-box;
}

/* Faixa de luz sutil animada que atravessa da esquerda para a direita a cada 6s */
.top-banner-offer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(242, 154, 0, 0.15) 35%, rgba(232, 80, 94, 0.18) 65%, transparent 100%);
  transform: skewX(-20deg);
  animation: bannerLightSweep 6s infinite linear;
  pointer-events: none;
}

@keyframes bannerLightSweep {
  0% {
    left: -100%;
  }
  40%, 100% {
    left: 150%;
  }
}

.top-banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 4px);
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.top-banner-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.top-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(6px, 2vw, 12px);
  width: 100%;
  max-width: 1200px;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

/* Ícone de cadeado aberto com balanço sutil a cada 4s */
.top-banner-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform-origin: center bottom;
  animation: lockWobble 4s infinite ease-in-out;
}

.top-banner-lock-icon svg {
  width: clamp(18px, 5vw, 24px);
  height: clamp(18px, 5vw, 24px);
}

@keyframes lockWobble {
  0%, 75%, 100% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  85% {
    transform: rotate(10deg);
  }
  90% {
    transform: rotate(-6deg);
  }
  95% {
    transform: rotate(6deg);
  }
}

/* Rótulo de texto fluido */
.top-banner-text-label {
  font-family: var(--font-family);
  font-size: clamp(14px, 4.2vw, 19px);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.top-banner-text-label .text-short,
.top-banner-text-label .text-tiny {
  display: none;
}

/* Cronômetro Compacto com Medidas Fluidas */
.top-banner-countdown {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 1vw, 6px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Blocos: clamp(32px, 9vw, 42px) */
.top-countdown-box {
  width: clamp(32px, 9vw, 42px);
  height: clamp(32px, 9vw, 42px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: clamp(6px, 1.8vw, 9px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Nas últimas 24h: blocos com fundo coral */
.top-banner-offer.urgent .top-countdown-box {
  background: #E8505E;
  border-color: #FFA5AE;
}

/* Número: clamp(15px, 4.6vw, 20px) */
.top-cd-val {
  font-family: var(--font-family);
  font-size: clamp(15px, 4.6vw, 20px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  display: block;
  letter-spacing: -0.3px;
}

/* Letra embaixo: clamp(9px, 2.4vw, 11px) */
.top-cd-unit {
  font-family: var(--font-family);
  font-size: clamp(9px, 2.4vw, 11px);
  font-weight: 600;
  color: #E2E8F0;
  line-height: 1;
  display: block;
  margin-top: 1px;
}

/* Separadores ":" em laranja: clamp(14px, 4vw, 20px) com margem lateral de 2px */
.top-cd-sep {
  font-family: var(--font-family);
  font-size: clamp(14px, 4vw, 20px);
  font-weight: 800;
  color: #F29A00;
  line-height: 1;
  margin: 0 2px;
  user-select: none;
  flex-shrink: 0;
}

/* Flip nos segundos */
.cd-flip-anim {
  animation: cdFlipTick 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes cdFlipTick {
  0% {
    transform: translateY(-4px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Link Ver oferta: aparece só a partir de 768px */
.top-banner-cta-link {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: #FFD45C;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 8px;
  white-space: nowrap;
  display: none;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

@media (min-width: 768px) {
  .top-banner-cta-link {
    display: inline-block;
  }
}

.top-banner-link:hover .top-banner-cta-link {
  color: #FFE699;
}

/* Linha inferior de 4px com as 5 cores do material em segmentos iguais */
.top-banner-color-bar {
  display: flex;
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.top-banner-color-bar .color-seg {
  flex: 1;
  height: 100%;
}

.color-seg.seg-blue { background-color: #1FA2CC; }
.color-seg.seg-green { background-color: #34B36B; }
.color-seg.seg-orange { background-color: #F29A00; }
.color-seg.seg-coral { background-color: #E8505E; }
.color-seg.seg-purple { background-color: #7B5CD6; }

/* Responsividade Mobile: altura 60px no celular */
@media (max-width: 768px) {
  .top-banner-offer {
    height: 60px;
  }
  .top-banner-link {
    height: calc(100% - 4px);
    padding: 0 10px;
  }
}

/* Regra para telas abaixo de 420px de largura */
@media (max-width: 419px) {
  .top-banner-lock-icon {
    display: none !important; /* Esconde o ícone do cadeado */
  }
  .top-banner-text-label .text-long {
    display: none !important;
  }
  .top-banner-text-label .text-short {
    display: inline !important; /* Texto curto: Oferta termina em */
  }
  .top-banner-text-label .text-tiny {
    display: none !important;
  }
}

/* Regra para telas abaixo de 360px de largura */
@media (max-width: 359px) {
  .top-banner-text-label .text-long,
  .top-banner-text-label .text-short {
    display: none !important;
  }
  .top-banner-text-label .text-tiny {
    display: inline !important; /* Texto ultra-curto: Termina em */
  }
  .top-banner-content {
    gap: 4px;
  }
  .top-banner-countdown {
    gap: 2px;
  }
  .top-cd-sep {
    margin: 0 1px;
  }
}

/* Acessibilidade: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .top-banner-offer::before {
    display: none !important;
    animation: none !important;
  }
  .top-banner-lock-icon {
    animation: none !important;
    transform: none !important;
  }
  .cd-flip-anim {
    animation: none !important;
    transform: none !important;
  }
}

/* Acessibilidade: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .top-banner-offer::before {
    display: none !important;
    animation: none !important;
  }
  .top-banner-lock-icon {
    animation: none !important;
    transform: none !important;
  }
  .cd-flip-anim {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   SEÇÃO 1: HERO (Fundo Branco Quente com Pontinhos Azuis Discretos)
   Estilo idêntico à imagem 1 de referência:
   - Fundo base off-white/branco quente (#FFFCF7)
   - Pontinhos azuis sutis (#2563EB a 8% de opacidade) via radial-gradient
   - Suave degradê lateral quente
   ============================================================ */
.hero-section {
  padding-top: 56px;
  padding-bottom: 44px; /* Reduzido para aproximar as seções */
  background-color: var(--bg-warm-white);
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.16) 1.1px, transparent 1.1px),
    linear-gradient(180deg, #FFFFFF 0%, #FFFCF8 60%, #FFF5E8 100%);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

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

.hero-pill {
  margin-bottom: 16px;
  white-space: nowrap;
  max-width: 100%;
  font-size: 13px;
  padding: 7px 20px;
  letter-spacing: 0.8px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12);
  border: 1.5px solid #DEDEFE;
}

/* 1. MARCA COMO SELO */
.hero-brand-badge {
  background: #FFFFFF;
  border: 2px solid #E2DDD5;
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 6px 20px rgba(16, 29, 56, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px; /* espaçamento harmonioso até o título */
  max-width: 100%;
}

.hero-brand-logo {
  font-family: var(--font-family);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  display: inline-flex;
}

/* Letras coloridas na paleta da marca: azul, verde, laranja, coral, roxo */
.hero-brand-logo .letter-c1 { color: #1FA2CC; } /* Azul */
.hero-brand-logo .letter-c2 { color: #34B36B; } /* Verde */
.hero-brand-logo .letter-c3 { color: #F29A00; } /* Laranja */
.hero-brand-logo .letter-c4 { color: #E8505E; } /* Coral */
.hero-brand-logo .letter-c5 { color: #7B5CD6; } /* Roxo */

.hero-brand-dot {
  color: #CBD5E1;
  font-size: 16px;
  line-height: 1;
}

.hero-brand-tag {
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
}

/* 2. TÍTULO PRINCIPAL (H1) */
.hero-main-h1 {
  font-family: var(--font-family);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.25;
  letter-spacing: -0.8px;
  text-align: center;
  margin: 0 0 14px 0; /* 14px até o subtítulo */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-h1-line1 {
  display: block;
  white-space: nowrap;
}

.hero-h1-line2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
}

.hero-text-o,
.hero-text-pelo,
.hero-text-question {
  display: inline-block;
  vertical-align: middle;
}

.swap-letters-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  vertical-align: middle;
}

/* Peças de letra estilo jogo */
.letter-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.18em;
  height: 1.18em;
  border-radius: 12px;
  border: 2px solid var(--navy-dark);
  box-shadow: 3px 3px 0px var(--navy-dark);
  position: relative;
  z-index: 2;
  will-change: transform;
}

.letter-tile .tile-inner {
  font-family: var(--font-family);
  font-size: 0.85em;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  display: block;
}

.letter-tile-p {
  background-color: #1FA2CC;
  transform: rotate(-4deg);
}

.letter-tile-b {
  background-color: #F29A00;
  transform: rotate(4deg);
}

/* Seta curva animada entre as peças */
.tile-swap-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #94A3B8;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.3s ease;
}

.tile-swap-arrow.active {
  opacity: 1;
}

/* Animação pop de entrada das peças */
.tile-pop-in {
  animation: tilePopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tilePopIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 3. SUBTÍTULO */
.hero-main-subtitle {
  font-family: var(--font-family);
  font-size: clamp(14px, 1.8vw, 15.5px);
  font-weight: 400;
  color: #475569;
  max-width: 480px;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 16px auto; /* espaçamento harmonioso até as pílulas */
}

/* 4. NÚMEROS EM PÍLULAS */
.hero-stats-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-stat-pill {
  background: #FFFFFF;
  border: 1.5px solid #E5E1D8;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-dark);
  box-shadow: 0 2px 8px rgba(16, 29, 56, 0.04);
}

.hero-stat-pill.pill-blue svg { color: #1FA2CC; }
.hero-stat-pill.pill-green svg { color: #34B36B; }
.hero-stat-pill.pill-orange svg { color: #F29A00; }
.hero-stat-pill.pill-coral svg { color: #E8505E; }

/* Desktop específico: alinhamento à esquerda harmonioso quando em grid amplo */
@media (min-width: 992px) {
  .hero-main-h1 {
    font-size: clamp(34px, 4vw, 50px);
  }
}

/* Celular: ajuste da marca e quebra das pílulas em 2x2 */
@media (max-width: 600px) {
  .hero-brand-badge {
    flex-direction: column;
    border-radius: 20px;
    padding: 10px 18px;
    gap: 4px;
    margin-bottom: 14px;
    border-width: 2px;
  }
  .hero-brand-dot {
    display: none;
  }
  .hero-brand-logo {
    font-size: 18px;
  }
  .hero-brand-tag {
    font-size: 12.5px;
  }
  .hero-main-h1 {
    font-size: clamp(26px, 7.8vw, 34px);
    margin-bottom: 12px;
  }
  .hero-h1-line1,
  .hero-h1-line2 {
    white-space: normal;
  }
  .hero-main-subtitle {
    font-size: 13.5px;
    max-width: 330px;
    line-height: 1.45;
    margin-bottom: 14px;
  }
  .hero-stats-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 330px;
    margin-bottom: 18px;
  }
  .hero-stat-pill {
    justify-content: center;
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .hero-main-h1 {
    font-size: 24px;
  }
  .letter-tile {
    width: 1.1em;
    height: 1.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-tile,
  .tile-swap-arrow {
    animation: none !important;
    transition: none !important;
  }
}

.hero-sub-desc {
  display: block;
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 680px;
}

/* Texto posicionado entre o mockup principal e o botão CTA */
.hero-middle-text {
  font-size: clamp(1.05rem, 2.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 16px auto 26px auto;
  text-align: center;
  font-weight: 400;
}

@media (max-width: 600px) {
  .hero-section {
    padding-top: 26px;
    padding-bottom: 20px;
    background-size: 16px 16px, 100% 100%;
  }
  .hero-pill {
    font-size: 11.5px;
    padding: 6px 14px;
    margin-bottom: 12px;
  }
  .hero-showcase {
    margin: 4px auto 34px auto;
  }
  .hero-middle-text {
    font-size: 14px;
    line-height: 1.48;
    margin: 12px auto 18px auto;
    padding: 0 8px;
  }
}

/* Vitrine do Mockup Retangular (1280x720 / proporção 16:9 widescreen) */
.hero-showcase {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 820px; /* Largura retangular ampla para valorizar os 1280x720 */
  width: 100%;
  aspect-ratio: 16 / 9; /* Garante proporção nativa 1280x720 sem achatar nem cortar */
  margin: 6px auto 32px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Wrapper do vídeo do Hero */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 3px solid #16182B;
  box-shadow: 8px 8px 0px #16182B;
  overflow: hidden;
  background-color: #16182B;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.mockup-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  background: #16182B;
  border: none;
  outline: none;
  pointer-events: auto;
}

/* Fallback / Mockup img */
.mockup-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #16182B;
  box-shadow: 8px 8px 0px #16182B;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Ícone de Play central semitransparente ao pausar */
.hero-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(22, 24, 43, 0.75);
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px; /* Centraliza a ponta do triângulo */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s ease;
  z-index: 10;
}

.hero-video-wrapper.is-paused .hero-video-play-overlay {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Botão de Som no canto inferior direito */
.hero-sound-toggle-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(22, 24, 43, 0.75);
  color: #FFFFFF;
  border: 1.5px solid #FFFFFF;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.hero-sound-toggle-btn:hover {
  background: rgba(22, 24, 43, 0.9);
  transform: scale(1.03);
}

.hero-sound-toggle-btn:active {
  transform: scale(0.96);
}

/* Animação pulsante enquanto estiver MUDO (mais suave, escala até 1.04) */
.hero-sound-toggle-btn.is-muted {
  animation: heroSoundPulse 2.2s infinite ease-in-out;
}

@keyframes heroSoundPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(255, 255, 255, 0.12);
  }
}

/* Alternância dos ícones de som */
.hero-sound-toggle-btn .sound-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hero-sound-toggle-btn .sound-icon svg {
  width: 14px;
  height: 14px;
}

.hero-sound-toggle-btn.is-muted .icon-unmuted {
  display: none;
}

.hero-sound-toggle-btn:not(.is-muted) .icon-muted {
  display: none;
}

.hero-sound-toggle-btn:not(.is-muted) {
  animation: none;
  background: rgba(22, 24, 43, 0.85);
}

/* Etiqueta selo horizontal com EFEITO 3D (metade em cima do mockup, metade para fora) */
.mockup-badge-tag {
  position: absolute;
  bottom: -16px; /* Metade sobre a imagem e metade para fora no canto inferior */
  right: 28px;   /* Bem alinhada ao canto direito com projeção visual */
  background: #FFD45A;
  color: #422006;
  border: 2px solid #FFFFFF; /* Contorno branco nítido de destaque 3D */
  border-radius: 999px;
  padding: 8px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.1px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18), 0 3px 8px rgba(245, 158, 11, 0.35);
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
}

.mockup-badge-tag svg {
  color: #78350F;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero-showcase {
    max-width: 100%;
    margin-bottom: 26px;
  }
  .hero-video-wrapper,
  .mockup-img {
    border-radius: 16px;
    border-width: 2.5px;
    box-shadow: 6px 6px 0px #16182B;
  }
  /* No celular (até 768px): mostra só o ícone (sem texto) em círculo de 36px com área de toque mínima de 40px */
  .hero-sound-toggle-btn {
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  /* Área de toque expandida para no mínimo 42px usando pseudo-elemento invisível */
  .hero-sound-toggle-btn::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    min-width: 44px;
    min-height: 44px;
  }
  .hero-sound-toggle-btn .sound-btn-text {
    display: none !important;
  }
  .hero-sound-toggle-btn .sound-icon svg {
    width: 15px;
    height: 15px;
  }
  .hero-video-play-overlay {
    width: 60px;
    height: 60px;
  }
  .hero-video-play-overlay svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .hero-showcase {
    margin-bottom: 24px;
  }
  .hero-video-wrapper,
  .mockup-img {
    border-radius: 14px;
    border-width: 2px;
    box-shadow: 5px 5px 0px #16182B;
  }
  .hero-sound-toggle-btn {
    bottom: 10px;
    right: 10px;
  }
  .hero-video-play-overlay {
    width: 52px;
    height: 52px;
  }
  .hero-video-play-overlay svg {
    width: 26px;
    height: 26px;
  }
}

.hero-cta {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

/* ============================================================
   CLASSE UNIFICADA: BOTÃO CTA PRINCIPAL
   (Usado na Seção Hero e no Cartão do Plano Completo)
   ============================================================ */
.btn-cta-principal {
  background: linear-gradient(135deg, #2FA463 0%, #1F8A50 100%);
  color: #FFFFFF !important;
  font-family: var(--font-family);
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid var(--navy-dark);
  box-shadow: 4px 4px 0px var(--navy-dark);
  border-radius: 999px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  animation: upgPulse 2.5s infinite ease-in-out;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Reflexo de luz passando a cada 2.5s */
.btn-cta-principal::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  animation: upgShine 2.5s infinite ease-in-out;
  pointer-events: none;
}

/* Hover: zoom scale(1.05) e sombra sólida 6px */
.btn-cta-principal:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 0px var(--navy-dark);
}

/* Clique / Toque: translate(3px, 3px) e sombra 1px */
.btn-cta-principal:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0px var(--navy-dark) !important;
}

/* Ícone de seta */
.btn-cta-principal .btn-arrow-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-cta-principal:hover .btn-arrow-icon {
  transform: translateX(4px);
}

/* Customização para o botão Hero */
.btn-hero-cta {
  padding: 12px 36px;
  min-width: min(520px, 94vw);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 16px;
}

.btn-hero-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}

.btn-hero-cta .btn-cta-line1 {
  font-size: clamp(14px, 2.1vw, 17px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-hero-cta .btn-cta-line2 {
  font-size: clamp(13.5px, 2.0vw, 16.5px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Customização para o botão do Plano Completo */
.btn-plan-complete-premium {
  width: 100%;
  font-size: 16px;
  padding: 0 20px;
}

.hero-trust-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 10px;
  margin-bottom: 22px;
}

.trust-row-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap; /* Sempre em 1 linha, no mobile e desktop */
  white-space: nowrap;
}

.trust-row-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap; /* Sempre em 1 linha */
  white-space: nowrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.trust-item svg {
  color: var(--cta);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: 36px;
    padding-bottom: 24px; /* Reduzido de 64px para 24px eliminando o espaço excessivo no mobile */
  }
  .hero-pill {
    font-size: clamp(11.5px, 3.2vw, 13px);
    padding: 7px 18px;
    letter-spacing: 0.6px;
    white-space: nowrap;
    margin-bottom: 20px;
  }
  .hero-showcase {
    padding: 0;
    margin-bottom: 20px;
  }
  .mockup-img {
    max-height: 320px;
  }
  .hero-trust-bar {
    gap: 6px;
    font-size: clamp(11.5px, 3.4vw, 13px);
    margin-top: 8px;
    margin-bottom: 18px;
  }
  .trust-row-1,
  .trust-row-2 {
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
  }
  .trust-item {
    gap: 5px;
    font-size: clamp(11px, 3.3vw, 12.5px);
  }
  .trust-item svg {
    width: 15px;
    height: 15px;
  }
  .btn-hero-cta {
    padding: 12px 18px;
    min-width: min(390px, 92vw);
    width: auto;
    gap: 8px;
  }
  .btn-hero-cta .btn-cta-line1 {
    font-size: clamp(12.5px, 3.6vw, 14.5px);
  }
  .btn-hero-cta .btn-cta-line2 {
    font-size: clamp(12px, 3.4vw, 14px);
  }
  .btn-cta, .btn-outline {
    font-size: 14px;
    padding: 12px 22px;
  }
}

@media (max-width: 420px) {
  .btn-cta, .btn-outline {
    font-size: 13px;
    padding: 11px 18px;
    letter-spacing: 0.2px;
  }
}

@media (max-width: 360px) {
  .hero-pill {
    font-size: 10.5px;
    padding: 6px 14px;
    letter-spacing: 0.4px;
  }
}

/* ============================================================
   SEÇÃO 2: O PROBLEMA
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header .pill {
  margin-bottom: 16px;
}

.section-header h2 {
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SEÇÃO 2: O PROBLEMA (Autodiagnóstico Interativo)
   ============================================================ */
.section-problem {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4.5vw, 52px);
  background-color: var(--bg-cream-warm);
}

.problem-header {
  margin-bottom: 24px;
  text-align: center;
}

.problem-main-title {
  font-family: var(--font-family);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.25;
  margin: 10px auto 8px auto;
  text-align: center;
}

/* Marca-texto "sua turma" animado */
.problem-highlight-box {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 10px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  margin: 0 2px;
}

.problem-highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.problem-header.revealed .problem-highlight-box::before {
  width: 100%;
  transition-delay: 0.3s;
}

.problem-subtitle {
  font-family: var(--font-family);
  font-size: clamp(16px, 2.4vw, 18.5px);
  font-weight: 500;
  color: #475569;
  text-align: center;
  margin: 0 auto;
}

/* 2. Grid de Cartões de Autodiagnóstico */
.problem-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.problem-check-card {
  background: #FFFFFF;
  border: 1.5px solid #E5E1D8;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: none;
  font-family: var(--font-family);
  user-select: none;
}

.problem-check-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
}

/* Estado Marcado */
.problem-check-card.checked {
  background-color: #F3FBF6 !important;
  border: 1.5px solid transparent;
  background-image: linear-gradient(#F3FBF6, #F3FBF6), linear-gradient(135deg, #34B36B, #1FA2CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 14px rgba(52, 179, 107, 0.12);
}

/* Caixinha de Seleção Redonda */
.problem-check-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 2px solid #C9C5BC;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.problem-check-box svg {
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.problem-check-card.checked .problem-check-box {
  background-color: #34B36B;
  border-color: #34B36B;
  animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.problem-check-card.checked .problem-check-box svg {
  opacity: 1;
  transform: scale(1);
}

@keyframes checkPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Informações do Cartão */
.problem-check-info {
  flex: 1;
}

.problem-check-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.problem-check-desc {
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}

/* Exemplo de Caderno (Mini-papel pautado) */
.notebook-sample-paper {
  background: #FFFDF5;
  border-radius: 8px;
  border: 1px solid #EBE4D5;
  padding: 8px 14px;
  min-height: 40px;
  position: relative;
  transform: rotate(2deg);
  min-width: 125px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  overflow: hidden;
  margin-left: 12px;
}

.notebook-ruled-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(31, 162, 204, 0.22);
  pointer-events: none;
}
.notebook-ruled-line.line-1 { top: 35%; }
.notebook-ruled-line.line-2 { top: 72%; }

.notebook-words-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espaço de 10px entre a errada e a certa */
  position: relative;
  z-index: 1;
  font-family: 'Caveat', cursive, sans-serif;
  font-size: clamp(18px, 4.6vw, 20px);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.nb-word-wrong {
  color: #D93A3A;
  position: relative;
  display: inline-block;
  font-weight: 700;
}

/* Linha riscada vermelha de 2px de espessura desenhada da esquerda para a direita */
.nb-word-wrong::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #D93A3A;
  transform: translateY(-50%) rotate(-3deg);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.problem-check-card.revealed .nb-word-wrong::after {
  width: 106%;
}

.nb-word-right {
  color: #1E8A4C;
  font-weight: 700;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.4s ease 0.45s, transform 0.4s ease 0.45s;
}

.problem-check-card.revealed .nb-word-right {
  opacity: 1;
  transform: translateY(0);
}

/* Dupla mais longa (bicicreta bicicleta): redução específica para não quebrar */
@media (max-width: 400px) {
  .notebook-words-wrap.wrap-long {
    font-size: 16px;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .notebook-words-wrap {
    font-size: 17px;
    gap: 8px;
  }
  .notebook-words-wrap.wrap-long {
    font-size: 15px;
    gap: 6px;
  }
  .notebook-sample-paper {
    padding: 6px 10px;
    min-height: 38px;
    min-width: 110px;
  }
}

/* 3. Fechamento Dinâmico */
.problem-dynamic-summary {
  max-width: 760px;
  margin: 10px auto 26px auto;
  background: #FFF8E8;
  border: 2px solid transparent;
  background-image: linear-gradient(#FFF8E8, #FFF8E8), linear-gradient(135deg, #FFD45C, #F29A00);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  font-family: var(--font-family);
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.summary-text-active {
  font-size: 14.5px;
  color: #1E293B;
  font-weight: 500;
}

.summary-text-active b {
  color: #C2410C;
  font-weight: 800;
}

.summary-goto-link {
  display: inline-block;
  margin-left: 6px;
  color: #1FA2CC;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.summary-goto-link:hover {
  color: #0284C7;
}

@media (max-width: 768px) {
  .problem-checklist-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .problem-check-card {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .problem-check-info {
    min-width: 180px;
  }
  .notebook-sample-paper {
    margin-left: auto;
    margin-top: 4px;
  }
}

/* ============================================================
   NOVO CARD DE DEPOIMENTO DE PROFESSORA (MODERNO E ACOLHEDOR)
   ============================================================ */
.problem-testimonial-card {
  background: linear-gradient(135deg, #FFFDF8 0%, #FEF3C7 100%);
  border: 1.5px solid #FDE68A;
  border-radius: 18px;
  padding: 16px 22px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  text-align: left;
}

.testimonial-teacher-avatar-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-avatar-img {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #F59E0B;
  box-shadow: 0 4px 10px rgba(120, 53, 15, 0.15);
  display: block;
}

.testimonial-teacher-content {
  flex: 1;
  position: relative;
}

.testimonial-header-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.testimonial-person-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.testimonial-person-name {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--navy-dark);
  line-height: 1.2;
}

.testimonial-post-date {
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 500;
  color: #92400E;
  opacity: 0.85;
}

.testimonial-quote-icon {
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 0.8;
  color: #F59E0B;
  opacity: 0.6;
  user-select: none;
}

.testimonial-teacher-quote {
  font-size: 13.5px;
  color: #78350F;
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 6px 0;
  font-weight: 500;
}

.testimonial-teacher-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #92400E;
}

.testimonial-teacher-author .author-role {
  font-weight: 800;
  color: #78350F;
  letter-spacing: 0.2px;
}

@media (max-width: 768px) {
  .section-problem .section-header {
    margin-bottom: 24px;
  }
  .section-problem .problem-subtitle {
    font-size: clamp(15px, 4.2vw, 16.5px);
  }
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .problem-item {
    padding: 14px 16px;
    gap: 12px;
  }
  .problem-item .icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 9px;
  }
  .problem-item .icon-box svg {
    width: 18px;
    height: 18px;
  }
  .problem-content h3 {
    font-size: 0.98rem;
    margin-bottom: 2px;
  }
  .problem-content p {
    font-size: 13px;
    line-height: 1.4;
  }
  .problem-testimonial-card {
    padding: 14px 16px;
    border-radius: 14px;
    gap: 14px;
    align-items: flex-start;
  }
  .teacher-avatar-img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-width: 1.5px;
  }
  .testimonial-quote-icon {
    font-size: 26px;
  }
  .testimonial-teacher-quote {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 5px;
  }
  .testimonial-teacher-author {
    font-size: 11px;
    gap: 5px;
  }
}

@media (max-width: 360px) {
  .section-problem .problem-subtitle {
    font-size: 14px;
  }
  .problem-testimonial-card {
    padding: 12px 14px;
    gap: 12px;
  }
  .teacher-avatar-img {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .testimonial-teacher-quote {
    font-size: 12px;
  }
}

/* ============================================================
   SEÇÃO 3: O MECANISMO ("POR QUE ACONTECE" - Trilha Conectada)
   ============================================================ */
.mechanism-section {
  padding-top: clamp(32px, 4.5vw, 52px);
  padding-bottom: clamp(36px, 5vw, 56px);
  background-color: var(--bg-cream-soft);
}

.mechanism-container {
  max-width: 980px;
}

.mechanism-header {
  text-align: center;
  margin-bottom: 28px;
}

.mechanism-main-title {
  font-family: var(--font-family);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.25;
  margin: 10px auto 8px auto;
}

.mechanism-highlight-box {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 10px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  margin: 2px 0;
}

.mechanism-highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.mechanism-header.revealed .mechanism-highlight-box::before {
  width: 100%;
  transition-delay: 0.3s;
}

.mechanism-desc {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.55;
  color: #475569;
  max-width: 520px;
  margin: 0 auto;
}

/* 2. Trilha "Como o Trava-Língua Ajuda" (Horizontal Desktop / Vertical Mobile) */
.mechanism-trail-wrap {
  position: relative;
  margin: 24px auto 28px auto;
  max-width: 920px;
}

.mechanism-trail-track {
  position: absolute;
  top: 24px;
  left: 50px;
  right: 50px;
  height: 2px;
  z-index: 1;
}

.trail-line-dotted {
  width: 100%;
  height: 100%;
  border-top: 2px dashed #CBD5E1;
}

.trail-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #1FA2CC, #F29A00, #34B36B, #E8505E);
  transition: width 1.4s ease-in-out;
}

.mechanism-trail-wrap.revealed .trail-line-fill {
  width: 100%;
}

.mechanism-steps-trail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}

.trail-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Círculo do Ícone */
.trail-step-icon-wrap {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(16, 29, 56, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background-color 0.3s ease;
}

.step-blue .trail-step-icon-wrap { border-color: #1FA2CC; background: #EDF8FC; color: #1FA2CC; }
.step-orange .trail-step-icon-wrap { border-color: #F29A00; background: #FFF7EC; color: #F29A00; }
.step-green .trail-step-icon-wrap { border-color: #34B36B; background: #EEFBF3; color: #34B36B; }
.step-coral .trail-step-icon-wrap { border-color: #E8505E; background: #FDF1F2; color: #E8505E; }

.trail-step-item.revealed .trail-step-icon-wrap {
  animation: stepPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes stepPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Equalizador animado em "Ouvir" */
.sound-equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.eq-bar {
  width: 3px;
  background-color: #1FA2CC;
  border-radius: 2px;
  animation: eqBounce 1s infinite ease-in-out alternate;
}
.eq-bar.bar-1 { height: 6px; animation-delay: 0.1s; }
.eq-bar.bar-2 { height: 16px; animation-delay: 0.3s; }
.eq-bar.bar-3 { height: 11px; animation-delay: 0.2s; }
.eq-bar.bar-4 { height: 14px; animation-delay: 0.4s; }

@keyframes eqBounce {
  0% { height: 4px; }
  100% { height: 18px; }
}

/* Conteúdo da Etapa */
.trail-step-num {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 2px;
  opacity: 0.8;
}
.step-blue .trail-step-num { color: #1FA2CC; }
.step-orange .trail-step-num { color: #F29A00; }
.step-green .trail-step-num { color: #34B36B; }
.step-coral .trail-step-num { color: #E8505E; }

.trail-step-title {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.trail-step-desc {
  font-family: var(--font-family);
  font-size: 13px;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
  max-width: 170px;
}

/* Seta entre etapas no Desktop */
.trail-step-arrow {
  position: absolute;
  top: 15px;
  right: -10px;
  color: #94A3B8;
  font-size: 15px;
  font-weight: 800;
  user-select: none;
}

/* 3. Boa Notícia (Cartão Compacto) */
.mechanism-good-news-card {
  background: #F3FBF6;
  border: 2px solid transparent;
  background-image: linear-gradient(#F3FBF6, #F3FBF6), linear-gradient(135deg, #34B36B, #1FA2CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 16px;
  padding: 14px 20px;
  max-width: 760px;
  margin: 20px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}

.good-news-icon-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.good-news-text {
  font-family: var(--font-family);
  font-size: 14.5px;
  line-height: 1.45;
  color: #1E293B;
  margin: 0;
}

.good-news-text b {
  color: #15803D;
  font-weight: 800;
}

/* Responsividade Mobile Trilha Vertical */
@media (max-width: 768px) {
  .mechanism-trail-track {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: calc(100% - 48px);
  }
  .trail-line-dotted {
    border-top: none;
    border-left: 2px dashed #CBD5E1;
  }
  .trail-line-fill {
    width: 2px;
    height: 0;
    transition: height 1.4s ease-in-out;
  }
  .mechanism-trail-wrap.revealed .trail-line-fill {
    height: 100%;
    width: 2px;
  }
  .mechanism-steps-trail {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 10px;
  }
  .trail-step-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
  }
  .trail-step-icon-wrap {
    margin-bottom: 0;
  }
  .trail-step-desc {
    max-width: 100%;
  }
  .trail-step-arrow {
    display: none;
  }
  .mechanism-good-news-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .good-news-text {
    font-size: 13.5px;
  }
}

.step-card p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .mechanism-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mechanism-card {
    padding: 28px 18px;
  }
}
@media (max-width: 420px) {
  .mechanism-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .step-card {
    padding: 12px 8px;
  }
  .step-card .icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-bottom: 8px;
  }
  .step-card .icon-box svg {
    width: 18px;
    height: 18px;
  }
  .step-card h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .step-card p {
    font-size: 11.5px;
    line-height: 1.35;
  }
}

/* ============================================================
   SEÇÃO 4: O MATERIAL (Fundo Branco com Detalhes Sutis)
   ============================================================ */
.section-material {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF7 50%, #FFF8F0 100%);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* Fileira de 3 ícones lineares redondos e sobrepostos */
.material-header-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.material-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(16, 29, 56, 0.12);
  transition: transform 0.2s ease, z-index 0.2s ease;
  cursor: default;
  position: relative;
  opacity: 0;
  transform: scale(0.6);
}

.material-avatar:first-child {
  margin-left: 0;
}

.material-avatar:hover {
  transform: scale(1.15) translateY(-2px);
  z-index: 10;
}

.material-avatar.avatar-blue   { background-color: #E0F2FE; color: #0284C7; z-index: 3; }
.material-avatar.avatar-green  { background-color: #DCFCE7; color: #16A34A; z-index: 2; }
.material-avatar.avatar-orange { background-color: #FFEDD5; color: #EA580C; z-index: 1; }

/* Animação Stagger de 80ms dos 3 ícones */
.section-header.material-header.revealed .material-avatar {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-header.material-header.revealed .material-avatar:nth-child(1) { transition-delay: 0.08s; }
.section-header.material-header.revealed .material-avatar:nth-child(2) { transition-delay: 0.16s; }
.section-header.material-header.revealed .material-avatar:nth-child(3) { transition-delay: 0.24s; }

.material-header-pill {
  padding: 5px 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.section-material .section-header h2.material-title {
  font-family: var(--font-family);
  font-size: clamp(2.4rem, 5.2vw, 3.4rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.25;
  margin-top: 6px;
  margin-bottom: 12px;
  text-align: center;
}

.material-title-line1 {
  display: block;
}

.material-title-line2 {
  display: inline-block;
  margin-top: 6px;
}

/* Marca-texto "por dentro": mesmo estilo do hero e bônus, do tamanho da palavra */
.material-highlight-box {
  display: inline-block;
  position: relative;
  color: var(--navy-dark); /* NÃO marrom, cor escura padrão */
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 2px 14px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  box-shadow: none;
}

.material-highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C; /* Fundo amarelo marca-texto padrão */
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.material-header.revealed .material-highlight-box::before {
  width: 100%;
  transition-delay: 0.35s;
}

.section-material .section-subtitle.material-subtitle {
  font-family: var(--font-family);
  font-size: 16px; /* 16px no desktop */
  font-weight: 400;
  color: #475569;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 600px) {
  .section-material .section-header h2.material-title {
    font-size: clamp(2rem, 7.8vw, 2.5rem);
    line-height: 1.22;
    margin-bottom: 10px;
  }
  .material-highlight-box {
    padding: 1px 10px;
  }
  .section-material .section-subtitle.material-subtitle {
    font-size: 15px; /* 15px no celular */
    line-height: 1.45;
    max-width: 360px;
  }
}

/* ============================================================
   FAIXA DE NÚMEROS DE DESTAQUE (4 CARTÕES COM BORDA E SOMBRA SÓLIDA)
   ============================================================ */
.material-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 28px auto 36px auto;
}

.stat-card {
  background: #FFFFFF;
  border: 2px solid var(--navy-dark);
  border-radius: 18px;
  padding: 16px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 4px 4px 0px var(--navy-dark);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px var(--navy-dark);
}

.stat-number {
  font-family: var(--font-family);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  line-height: 1.25;
}

/* Cores específicas dos 4 números */
.stat-blue .stat-number {
  color: #2563EB; /* Azul */
}
.stat-green .stat-number {
  color: #16A34A; /* Verde */
}
.stat-orange .stat-number {
  color: #EA580C; /* Laranja */
}
.stat-pink .stat-number {
  color: #E11D48; /* Rosa */
}

/* ============================================================
   ETIQUETA E AVISO DE AMOSTRA (id="material")
   ============================================================ */
.sample-badge-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 16px;
}

.sample-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFFFFF;
  border: 1.5px solid #D9D6CF;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sample-badge-pill svg {
  color: #64748B;
  flex-shrink: 0;
}

.sample-disclaimer-note {
  font-family: var(--font-family);
  font-size: 13px;
  font-style: italic;
  color: #64748B;
  text-align: center;
  max-width: 580px;
  margin: -24px auto 32px auto;
  line-height: 1.5;
  padding: 0 16px;
}

/* ============================================================
   GRANDE CARTÃO DA VITRINE DO CARROSSEL (COMPACTO E SUAVE)
   ============================================================ */
.material-showcase-box {
  background: linear-gradient(135deg, #F4FAFD 0%, #F7F3FF 100%);
  border: 1.5px solid var(--navy-dark);
  border-radius: 28px;
  box-shadow: 4px 4px 0px var(--navy-dark);
  padding: 30px 20px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showcase-coverflow-wrap {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Setas Discretas (Círculo de 40px no desktop e 36px no celular) */
.showcase-nav-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  color: #3A3A48;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.showcase-prev {
  left: 18px;
}

.showcase-next {
  right: 18px;
}

.showcase-nav-btn:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.showcase-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

/* Stage do Coverflow */
.showcase-stage {
  width: 100%;
  max-width: 860px;
  height: 480px;
  position: relative;
  overflow: visible;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y pinch-zoom;
}

.showcase-track {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Slide Coverflow 3D (No máx 420px de largura no desktop) */
.showcase-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  max-width: 420px;
  aspect-ratio: 1 / 1.414; /* Proporção folha A4 */
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  user-select: none;
}

.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Selo de Toque / Clique para Ampliar (Mais discreto e com fade suave) */
.showcase-zoom-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(35, 34, 46, 0.75);
  color: #FFFFFF;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 5;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity: 1;
  visibility: visible;
}

.showcase-zoom-badge.faded-out {
  opacity: 0;
  visibility: hidden;
}

.showcase-zoom-badge svg {
  color: #FFFFFF;
  width: 12px;
  height: 12px;
}

/* Cartão Neutro com Logo em Caso de Erro de Imagem */
.showcase-error-card {
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.showcase-error-card .logo-symbol {
  font-size: 32px;
}

.showcase-error-card span {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
}

.showcase-thumbnails-wrap {
  width: 100%;
  max-width: 800px;
  margin: 18px auto 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 6px 4px;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
  -webkit-overflow-scrolling: touch;
}

.showcase-thumbnails-wrap::-webkit-scrollbar {
  height: 5px;
}
.showcase-thumbnails-wrap::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}

.showcase-thumbnails-track {
  display: flex;
  gap: 8px;
  align-items: center;
  width: max-content;
  margin: 0 auto;
}

.thumb-item {
  width: 48px;
  height: 66px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-item:hover {
  transform: translateY(-2px);
  border-color: #94A3B8;
}

.thumb-item.active {
  border: 2.5px solid #16A34A;
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  z-index: 2;
}

/* ============================================================
   5. FECHAMENTO DA SEÇÃO (3 ITENS COM CHECK VERDE + BOTÃO)
   ============================================================ */
.material-footer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: 24px;
  margin-bottom: 48px;
}

.material-check-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

.check-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy-dark);
}

.check-feature-item .feature-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  border: 1.5px solid #86EFAC;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}

.material-cta-wrap {
  display: flex;
  justify-content: center;
}

.btn-material-plans {
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

/* ============================================================
   LIGHTBOX MODAL EM TELA CHEIA (ZOOM COM PINÇA / NAVEGAÇÃO)
   ============================================================ */
.page-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 29, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  touch-action: none;
}

.page-lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: transform 0.2s ease, background 0.2s ease;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: transform 0.2s ease, background 0.2s ease;
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-content-box {
  max-width: 86%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: none;
}

.lightbox-main-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease-out;
  transform-origin: center center;
  will-change: transform;
}

.lightbox-caption {
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================
   RESPONSIVIDADE: CELULAR E TABLETS
   ============================================================ */
@media (max-width: 900px) {
  .material-showcase-box {
    padding: 24px 12px;
    border-radius: 22px;
  }

  .showcase-coverflow-wrap {
    min-height: 420px;
  }

  .showcase-stage {
    height: 420px;
  }

  .showcase-slide {
    width: 260px;
    max-width: 78%;
  }

  .showcase-thumbnails-wrap {
    display: none;
  }

  .showcase-nav-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(255, 255, 255, 0.70);
    opacity: 0.7;
  }

  .showcase-nav-btn:hover,
  .showcase-nav-btn:active {
    opacity: 1;
    background: #FFFFFF;
  }

  .showcase-prev {
    left: 8px;
  }

  .showcase-next {
    right: 8px;
  }
}

@media (max-width: 600px) {
  .material-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 22px auto 24px auto;
  }

  .stat-card {
    padding: 14px 10px;
    border-radius: 14px;
  }

  .stat-number {
    font-size: 2.2rem;
  }

  .stat-label {
    font-size: 11.5px;
  }

  .material-showcase-box {
    padding: 20px 8px;
    box-shadow: 4px 4px 0px var(--navy-dark);
    border-radius: 20px;
  }

  .showcase-coverflow-wrap {
    min-height: 380px;
  }

  .showcase-stage {
    height: 380px;
  }

  .showcase-slide {
    width: 78%; /* No máximo 78% da largura do card no celular */
    max-width: 78%;
  }

  .showcase-nav-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.70);
  }

  .showcase-nav-btn:active {
    opacity: 1;
    background: #FFFFFF;
    transform: translateY(-50%) scale(0.95);
  }

  .showcase-prev {
    left: 6px;
  }

  .showcase-next {
    right: 6px;
  }

  .sample-disclaimer-note {
    font-size: 12px;
    margin: -18px auto 26px auto;
  }

  .material-check-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px;
  }

  .check-feature-item {
    font-size: 13px;
  }

  .btn-material-plans {
    padding: 14px 24px;
    font-size: 14.5px;
    width: 100%;
    max-width: 320px;
  }

  .lightbox-nav-btn {
    width: 42px;
    height: 42px;
  }

  .lightbox-prev {
    left: 4px;
  }

  .lightbox-next {
    right: 4px;
  }
}

/* ============================================================
   SUMÁRIO COMPACTO - OS 9 MÓDULOS (2 Painéis com Acordeão)
   ============================================================ */
.modules-summary-wrapper {
  margin-top: 36px;
  margin-bottom: 24px; /* Margem inferior de 24px onde entrará a prova social */
  position: relative;
}

.modules-summary-header {
  margin-bottom: 20px; /* 20px entre trilha e painéis */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modules-summary-title {
  font-family: var(--font-family);
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.22;
  text-align: center;
}

.modules-title-highlight {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 8px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  box-shadow: none;
}

.modules-title-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modules-summary-header.revealed .modules-title-highlight::before {
  width: 100%;
  transition-delay: 0.3s;
}

.modules-summary-subtitle {
  font-family: var(--font-family);
  font-size: 15px; /* 15px no desktop */
  color: #64748B;
  font-weight: 400;
  line-height: 1.5;
  max-width: 460px;
  margin: 0 auto 18px auto; /* 18px entre subtítulo e trilha */
}

/* ============================================================
   3. TRILHA DE PROGRESSO HORIZONTAL (9 MÓDULOS)
   ============================================================ */
.modules-progress-trail {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  padding: 16px 10px 0 10px;
  height: 58px;
  box-sizing: border-box;
}

/* Linha de base cinza-claro de 4px */
.trail-track-base {
  position: absolute;
  top: 25px;
  left: 20px;
  right: 20px;
  height: 4px;
  background-color: #E5E1D8;
  border-radius: 999px;
  overflow: hidden;
  z-index: 1;
}

/* Linha de preenchimento em degradê (azul -> verde -> laranja) */
.trail-track-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #1FA2CC 0%, #34B36B 50%, #F29A00 100%);
  border-radius: 999px;
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modules-summary-header.revealed .trail-track-fill {
  width: 100%;
}

/* Grupo dos 9 pontos */
.trail-dots-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  width: 100%;
}

/* Cada ponto circular de 22px */
.trail-dot {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 2px solid;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.trail-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.trail-dot.dot-basic {
  border-color: #1FA2CC;
  color: #1FA2CC;
}

.trail-dot.dot-complete {
  border-color: #F29A00;
  color: #F29A00;
}

.dot-num {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}

/* Acendimento e pop dos pontos ao revelar */
.modules-summary-header.revealed .trail-dot.dot-basic.is-lit {
  background-color: #1FA2CC;
  border-color: #1FA2CC;
  color: #FFFFFF;
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(31, 162, 204, 0.35);
}

.modules-summary-header.revealed .trail-dot.dot-complete.is-lit {
  background-color: #F29A00;
  border-color: #F29A00;
  color: #FFFFFF;
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(242, 154, 0, 0.35);
}

.trail-dot:hover {
  transform: scale(1.18) !important;
}

/* Mini troféu laranja acima do ponto 9 */
.trail-trophy-icon {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trail-trophy-icon.trophy-jump {
  animation: trophyJump 0.5s ease;
}

@keyframes trophyJump {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* Rótulos pequenos embaixo das pontas */
.trail-labels-row {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 2px;
}

.trail-label-start,
.trail-label-end {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  line-height: 1;
}

/* Responsividade Mobile e Acessibilidade */
@media (max-width: 767px) {
  .modules-summary-subtitle {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .modules-progress-trail {
    padding-left: 4px;
    padding-right: 4px;
  }
  .trail-track-base {
    left: 14px;
    right: 14px;
  }
  .trail-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }
  .dot-num {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trail-track-fill {
    width: 100% !important;
    transition: none !important;
  }
  .trail-dot.dot-basic {
    background-color: #1FA2CC !important;
    color: #FFFFFF !important;
  }
  .trail-dot.dot-complete {
    background-color: #F29A00 !important;
    color: #FFFFFF !important;
  }
  .trail-trophy-icon {
    animation: none !important;
  }
}

/* Estrutura: 2 colunas lado a lado no desktop (espaço de 16px entre os dois painéis) */
.modules-summary-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

/* ============================================================
   WRAPPERS DOS PAINÉIS COM BORDA DEGRADÊ 2px E GLOW SUAVE
   ============================================================ */
.module-panel-wrapper {
  position: relative;
  padding: 2px; /* Borda de 2px */
  border-radius: 20px;
  display: flex;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Borda em degradê fixa por painel */
.panel-wrapper-basic {
  background: linear-gradient(135deg, #1FA2CC 0%, #34B36B 100%);
}

.panel-wrapper-complete {
  background: linear-gradient(135deg, #FFD45C 0%, #F29A00 45%, #E8505E 100%);
}

/* 2. BRILHO SUAVE (GLOW) */
.module-panel-wrapper::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  filter: blur(22px);
  z-index: -1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.panel-wrapper-basic::before {
  background: linear-gradient(135deg, #1FA2CC 0%, #34B36B 100%);
  opacity: 0.22;
}

.panel-wrapper-complete::before {
  background: linear-gradient(135deg, #FFD45C 0%, #F29A00 45%, #E8505E 100%);
  opacity: 0.35;
}

/* Hover no Desktop: o painel sobe 2px e o glow aumenta levemente (+0.1 de opacity) */
@media (hover: hover) {
  .module-panel-wrapper:hover {
    transform: translateY(-2px);
  }

  .panel-wrapper-basic:hover::before {
    opacity: 0.32;
  }

  .panel-wrapper-complete:hover::before {
    opacity: 0.45;
  }
}

/* 3. REFLEXO DE LUZ (SÓ NO PLANO COMPLETO - A CADA 4s) */
.panel-wrapper-complete::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: -150% 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderShineLoop 4s linear infinite;
  z-index: 2;
}

@keyframes borderShineLoop {
  0% {
    background-position: -150% 0;
  }
  30% {
    background-position: 150% 0; /* Atravessa em 1.2s (30% de 4s) */
  }
  100% {
    background-position: 150% 0; /* Espera 2.8s até recomeçar */
  }
}

/* Cada painel interno: fundo branco, radius 18px, overflow hidden, SEM borda e SEM sombra sólida */
.module-summary-panel {
  background: #FFFFFF;
  border: none;
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Cabeçalho do Painel com linha divisória de 1px suave (25% opacidade) */
.panel-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-header-basic {
  background-color: #EAF6FB;
  border-bottom: 1px solid rgba(31, 162, 204, 0.25);
}

.panel-header-complete {
  background-color: #FFF4D6;
  border-bottom: 1px solid rgba(242, 154, 0, 0.25);
}

.panel-header-complete {
  background-color: #FFF4D6;
}

.panel-badge {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panel-badge-basic {
  color: var(--navy-dark);
}

.panel-badge-complete {
  color: #B35C00;
}

.panel-info {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  white-space: nowrap;
}

/* Lista de Acordeão */
.panel-accordion-list {
  display: flex;
  flex-direction: column;
}

.module-accordion-item {
  border-bottom: 1px solid #EFECE6;
  background: #FFFFFF;
  transition: background-color 0.2s ease;
}

.module-accordion-item:last-child {
  border-bottom: none;
}

/* Linha do módulo */
.module-accordion-trigger {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  transition: background-color 0.18s ease;
}

.module-accordion-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Hover desktop: fundo #FAF8F4 */
@media (hover: hover) {
  .module-accordion-trigger:hover {
    background-color: #FAF8F4;
  }
}

.module-accordion-item.is-open .module-accordion-trigger {
  background-color: #FAF8F4;
}

/* Número em círculo de 26px */
.module-acc-num {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.num-blue   { background-color: #E0F2FE; color: #0284C7; }
.num-green  { background-color: #DCFCE7; color: #16A34A; }
.num-yellow { background-color: #FEF3C7; color: #D97706; }
.num-pink   { background-color: #FFE4E6; color: #E11D48; }
.num-purple { background-color: #EEF2FF; color: #6366F1; }
.num-orange { background-color: #FFEDD5; color: #EA580C; }

/* Nome do módulo */
.module-acc-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.35;
}

/* Seta chevron cinza à direita */
.module-acc-chevron {
  color: #94A3B8;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.module-accordion-item.is-open .module-acc-chevron {
  transform: rotate(180deg);
  color: var(--navy-dark);
}

/* Área retrátil do acordeão */
.module-accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #FAF8F4;
}

.module-accordion-body {
  padding: 4px 16px 12px 54px; /* Alinhado com o texto do nome */
}

/* Pílulas de sons cinza-claras */
.sound-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sound-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  background-color: #EFECE6;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}

/* Rodapé: frase centralizada em uma linha única */
.modules-summary-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 22px;
  text-align: center;
  padding: 0 10px;
}

.modules-footer-text {
  font-family: var(--font-family);
  font-size: 13.5px;
  color: #64748B;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
}

/* Card de Prova Social dos Módulos (Mãe) */
.modules-testimonial-card {
  background: linear-gradient(135deg, #FFFDF8 0%, #FEF3C7 100%);
  border: 1.5px solid #FDE68A;
  border-radius: 18px;
  padding: 16px 22px;
  max-width: 760px;
  margin: 0 auto 10px auto;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .panel-wrapper-complete::after {
    animation: none !important;
    display: none !important;
  }
}

/* ============================================================
   RESPONSIVIDADE: CELULAR (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .modules-summary-wrapper {
    margin-top: 28px;
    margin-bottom: 24px;
  }

  .modules-summary-header {
    margin-bottom: 16px;
  }

  .modules-summary-title {
    font-size: 30px; /* Aumentado no celular */
    margin-bottom: 8px;
    line-height: 1.25;
  }

  .modules-summary-subtitle {
    font-size: 13.5px;
    line-height: 1.4;
  }

  /* Painéis empilhados no celular, com 14px entre eles */
  .modules-summary-panels {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .module-panel-wrapper {
    border-radius: 18px;
    padding: 2px;
  }

  .module-summary-panel {
    border-radius: 16px;
  }

  .panel-header {
    padding: 10px 14px;
  }

  .panel-badge {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .panel-info {
    font-size: 11.5px;
  }

  .module-accordion-trigger {
    min-height: 46px;
    padding: 9px 14px;
    gap: 10px;
  }

  .module-acc-name {
    font-size: 14px;
  }

  .module-accordion-body {
    padding: 2px 14px 10px 50px;
  }

  .sound-pill {
    font-size: 10.5px;
    padding: 2px 7px;
  }

  .modules-summary-footer {
    margin-top: 16px;
    margin-bottom: 18px;
    padding: 0 4px;
  }

  .modules-footer-text {
    font-size: clamp(11.2px, 3.2vw, 12.8px);
    white-space: nowrap;
    letter-spacing: -0.15px;
  }

  .modules-testimonial-card {
    padding: 14px 16px;
    gap: 14px;
    border-radius: 16px;
  }
}

@media (max-width: 380px) {
  .module-accordion-body {
    padding-left: 14px; /* Menor recuo em telas minúsculas para mais espaço nas pílulas */
  }
}
  .pill-exclusive {
    font-size: 8.5px;
    padding: 1.5px 5px;
  }
}

@media (max-width: 900px) {
  .modules-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .material-pills-row {
    gap: 7px;
    margin-bottom: 14px;
  }
}

@media (max-width: 600px) {
}
  }
}

/* ============================================================
   SEÇÃO 5: COMO APLICAR (Fundo Bege Suave)
   ============================================================ */
.section-bg-steps {
  background: linear-gradient(180deg, #FFF8F0 0%, #FFF5E8 50%, #FFF8F0 100%);
  padding-top: clamp(48px, 6vw, 68px);
  padding-bottom: clamp(48px, 6vw, 68px);
}

.steps-3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.step-apply-card {
  padding: 24px 20px 22px 20px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid rgba(229, 233, 240, 0.9);
  box-shadow: 0 4px 14px rgba(16, 29, 56, 0.04);
  transition: transform var(--transition-normal);
}

.step-apply-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16, 29, 56, 0.08);
}

.step-badge-top {
  display: none;
}

.step-apply-card .icon-box {
  margin-bottom: 12px;
  width: 48px;
  height: 48px;
}

.step-apply-card .icon-box svg {
  width: 24px;
  height: 24px;
}

.step-apply-card h3 {
  font-size: 1.15rem;
  color: var(--navy-dark);
  margin-bottom: 6px;
  font-weight: 700;
}

.step-apply-card p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

.gold-tip-card {
  background-color: #FEF3C7;
  border: 1.5px solid #FDE68A;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
  border-radius: 14px;
  padding: 14px 22px;
  text-align: center;
  font-size: 14.5px;
  color: #78350F;
  max-width: 820px;
  margin: 0 auto 24px auto;
}

.cta-center {
  display: flex;
  justify-content: center;
}

@media (max-width: 860px) {
  .steps-3-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 18px;
  }
  
  .step-apply-card {
    padding: 16px 16px;
    border-radius: 14px;
  }

  .step-apply-card .icon-box {
    margin-bottom: 8px;
    width: 44px;
    height: 44px;
  }

  .step-apply-card h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .step-apply-card p {
    font-size: 13.5px;
  }
}

/* ============================================================
   SEÇÃO 6: PARA QUEM É (Fundo Creme com Cards Brancos)
   ============================================================ */
.section-audience {
  background-color: #FFFFFF;
  padding-top: clamp(48px, 6vw, 68px);
  padding-bottom: clamp(24px, 3.5vw, 40px); /* Reduzido de 48px-68px para aproximar da seção de bônus */
}

/* Fileira de 5 avatares redondos sobrepostos */
.audience-profiles-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.profile-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(16, 29, 56, 0.12);
  transition: transform 0.2s ease, z-index 0.2s ease;
  cursor: default;
  position: relative;
  opacity: 0;
  transform: scale(0.6);
}

.profile-avatar:first-child {
  margin-left: 0;
}

.profile-avatar:hover {
  transform: scale(1.15) translateY(-2px);
  z-index: 10;
}

.avatar-blue   { background-color: #E0F2FE; color: #0284C7; z-index: 5; }
.avatar-green  { background-color: #DCFCE7; color: #16A34A; z-index: 4; }
.avatar-orange { background-color: #FFEDD5; color: #EA580C; z-index: 3; }
.avatar-pink   { background-color: #FFE4E6; color: #E11D48; z-index: 2; }
.avatar-purple { background-color: #EEF2FF; color: #6366F1; z-index: 1; }

/* Animação dos avatares ao revelar */
.section-header.audience-header.revealed .profile-avatar {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-header.audience-header.revealed .profile-avatar:nth-child(1) { transition-delay: 0.05s; }
.section-header.audience-header.revealed .profile-avatar:nth-child(2) { transition-delay: 0.13s; }
.section-header.audience-header.revealed .profile-avatar:nth-child(3) { transition-delay: 0.21s; }
.section-header.audience-header.revealed .profile-avatar:nth-child(4) { transition-delay: 0.29s; }
.section-header.audience-header.revealed .profile-avatar:nth-child(5) { transition-delay: 0.37s; }

/* Título H2 com Poppins 800 */
.section-audience .audience-title {
  font-family: var(--font-family);
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.25;
  margin-top: 10px;
  margin-bottom: 12px;
}

/* Marca-texto amarelo #FFD45C com borda 2px, leve rotação e animação de pintura */
.highlight-learn {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 10px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
}

.highlight-learn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quando revelado, o fundo amarelo 'pinta' da esquerda para a direita */
.section-header.audience-header.revealed .highlight-learn::before {
  width: 100%;
  transition-delay: 0.35s;
}

/* Subtítulo centralizado */
.section-audience .audience-subtitle {
  font-family: var(--font-family);
  font-size: clamp(13.5px, 1.8vw, 15px);
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  text-align: center;
}

.section-audience .section-header h2,
.section-audience .section-header h2 strong {
  font-weight: 800;
}

/* 1. CARTÕES COMPACTOS (Grade 2 cols no celular e 3 cols no desktop) */
.audience-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.audience-card-modern {
  background: #FFFFFF;
  border: 1.5px solid #E5E1D8;
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(16, 29, 56, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .audience-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 29, 56, 0.08);
  }
  .card-prof:hover { border-color: #7B5CD6; }
  .card-pais:hover { border-color: #E8505E; }
  .card-reforco:hover { border-color: #1FA2CC; }
  .card-psico:hover { border-color: #F29A00; }
  .card-fono:hover { border-color: #34B36B; }
  .card-aee:hover { border-color: #0E9F6E; }
}

.audience-icon-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.bg-purple-pastel { background-color: #F3EEFE; }
.bg-coral-pastel { background-color: #FDF1F2; }
.bg-blue-pastel { background-color: #EDF8FC; }
.bg-orange-pastel { background-color: #FFF7EC; }
.bg-green-pastel { background-color: #EEFBF3; }
.bg-teal-pastel { background-color: #E6F7F3; }

.audience-card-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.audience-card-desc {
  font-family: var(--font-family);
  font-size: 12px;
  color: #64748B;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 2. "COMO COMEÇAR" COMO SELETOR DE SÉRIE */
.how-to-start-selector-box {
  background: #F6F3FF;
  border: 2px solid transparent;
  background-image: linear-gradient(#F6F3FF, #F6F3FF), linear-gradient(135deg, #7B5CD6, #1FA2CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 18px;
  padding: 18px 22px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 16px rgba(123, 92, 214, 0.08);
}

.start-selector-title {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 12px 0;
}

.start-series-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.series-btn {
  background: #FFFFFF;
  border: 1.5px solid #DDD6FE;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 700;
  color: #5B21B6;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.series-btn:hover {
  background: #EDE9FE;
}

.series-btn.active {
  background: #7B5CD6;
  color: #FFFFFF;
  border-color: #7B5CD6;
  box-shadow: 0 3px 10px rgba(123, 92, 214, 0.35);
}

/* Container e Parágrafo Único da Recomendação */
.start-recommendation-wrap {
  display: block;
  min-height: 68px; /* Reserva 3 linhas para não pular de tamanho */
}

.serie-recomendacao {
  display: block;
  text-align: center;
  margin: 12px auto 0;
  max-width: 420px;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.55;
  color: #5B5E6B;
  transition: opacity 0.2s ease;
}

.serie-recomendacao strong {
  display: inline;
  color: #7B5CD6;
  font-weight: 800;
}

/* Responsividade de Para Quem É (2 colunas no celular!) */
@media (max-width: 768px) {
  .audience-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .audience-card-modern {
    padding: 12px 8px;
  }
  .audience-card-title {
    font-size: 13px;
  }
  .audience-card-desc {
    font-size: 11.5px;
  }
  .how-to-start-selector-box {
    padding: 14px 12px;
  }
  .start-series-buttons {
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .series-btn {
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .start-recommendation-wrap {
    min-height: 72px;
  }
  .serie-recomendacao {
    font-size: 13.5px;
    line-height: 1.5;
    margin-top: 10px;
  }
}

/* ============================================================
   SEÇÃO 7: BÔNUS (Design Moderno & Compacto com Borda em Degradê Giratória)
   ============================================================ */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.section-bg-bonus {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-yellow-light) 40%, #FFF8D6 75%, #FFFFFF 100%);
  padding-top: clamp(28px, 3.8vw, 44px);
  padding-bottom: clamp(48px, 5.5vw, 68px);
  position: relative;
  overflow: hidden; /* Evita qualquer rolagem horizontal causada pelo glow */
}

/* Espaço reservado para o card de prova social */
#prova-social-bonus {
  margin-top: 24px;
  margin-bottom: 24px;
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
  margin-bottom: 26px;
  align-items: stretch;
}

/* Wrapper da borda em degradê animada */
.bonus-card-wrapper {
  position: relative;
  border-radius: 20px;
  padding: 2.5px; /* Espessura exata da borda em degradê */
  display: flex;
  background-color: transparent;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: --angle;
}

/* Cores do degradê por bônus (com fallback estático) */
.bonus-wrapper-1 {
  background: linear-gradient(135deg, #1FA2CC, #34B36B, #FFD45C, #1FA2CC);
}
.bonus-wrapper-2 {
  background: linear-gradient(135deg, #F29A00, #E8505E, #FFD45C, #F29A00);
}
.bonus-wrapper-3 {
  background: linear-gradient(135deg, #7B5CD6, #C9B8FF, #23222E, #7B5CD6);
}

/* Suporte à rotação contínua @property */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  .bonus-wrapper-1 {
    background: conic-gradient(from var(--angle), #1FA2CC, #34B36B, #FFD45C, #1FA2CC);
    animation: rotateBonusGradient 6s linear infinite;
  }
  .bonus-wrapper-2 {
    background: conic-gradient(from var(--angle), #F29A00, #E8505E, #FFD45C, #F29A00);
    animation: rotateBonusGradient 6s linear infinite;
  }
  .bonus-wrapper-3 {
    background: conic-gradient(from var(--angle), #7B5CD6, #C9B8FF, #23222E, #7B5CD6);
    animation: rotateBonusGradient 6s linear infinite;
  }
}

/* 2. BRILHO SUAVE (GLOW) */
.bonus-card-wrapper::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  filter: blur(18px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bonus-wrapper-1::before {
  background: linear-gradient(135deg, #1FA2CC, #34B36B, #FFD45C, #1FA2CC);
}
.bonus-wrapper-2::before {
  background: linear-gradient(135deg, #F29A00, #E8505E, #FFD45C, #F29A00);
}
.bonus-wrapper-3::before {
  background: linear-gradient(135deg, #7B5CD6, #C9B8FF, #23222E, #7B5CD6);
}

@supports (background: conic-gradient(from 0deg, red, blue)) {
  .bonus-wrapper-1::before {
    background: conic-gradient(from var(--angle), #1FA2CC, #34B36B, #FFD45C, #1FA2CC);
    animation: rotateBonusGradient 6s linear infinite;
  }
  .bonus-wrapper-2::before {
    background: conic-gradient(from var(--angle), #F29A00, #E8505E, #FFD45C, #F29A00);
    animation: rotateBonusGradient 6s linear infinite;
  }
  .bonus-wrapper-3::before {
    background: conic-gradient(from var(--angle), #7B5CD6, #C9B8FF, #23222E, #7B5CD6);
    animation: rotateBonusGradient 6s linear infinite;
  }
}

@keyframes rotateBonusGradient {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}

/* Hover no Desktop: sobe 4px e glow mais forte (opacity 0.6) */
@media (hover: hover) {
  .bonus-card-wrapper:hover {
    transform: translateY(-4px);
  }

  .bonus-card-wrapper:hover::before {
    opacity: 0.6;
  }

  .bonus-card-wrapper:hover .bonus-card-media img {
    transform: scale(1.03);
  }
}

/* Cartão Interno Branco (sem a borda cinza anterior) */
.bonus-card-compact {
  background: #FFFFFF;
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Imagem no topo ocupando toda a largura, sem padding nem bordas internas */
.bonus-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #F8FAFC;
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.bonus-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Corpo com padding de 14px 16px e 3 linhas */
.bonus-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Linha 1: nome do bônus (Poppins 800, 17px) */
.bonus-card-name {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.3;
  margin-bottom: 6px;
  text-align: left;
}

/* Linha 2: uma frase curta (14px, cinza, máx 2 linhas no celular) */
.bonus-card-desc {
  font-family: var(--font-family);
  font-size: 14px;
  color: #64748B;
  line-height: 1.45;
  margin-bottom: 12px;
  text-align: left;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Linha 3: à esquerda valor riscado, à direita pílula verde "GRÁTIS" */
.bonus-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #F1ECE1;
}

.bonus-card-strikethrough {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: line-through;
}

.bonus-card-pill-free {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #15803D;
  background-color: #DCFCE7;
  border: 1px solid #86EFAC;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.2;
}

/* Pausar animação quando fora da tela (via JS) ou quando reduzida */
.bonus-card-wrapper.is-paused,
.bonus-card-wrapper.is-paused::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .bonus-card-wrapper,
  .bonus-card-wrapper::before {
    animation: none !important;
  }
}

/* 4. Resumo do Valor (Faixa Enxuta) */
.bonus-summary-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
}

.bonus-summary-bar {
  width: 100%;
  background-color: #FFF4D6;
  border: 1.5px solid #F2C14E;
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
  font-family: var(--font-family);
  font-size: 15px;
  color: #78350F;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

.bonus-summary-bar s {
  color: #94A3B8;
  font-weight: 600;
  margin-right: 4px;
}

.bonus-summary-bar b {
  color: #78350F;
  font-weight: 800;
}

.bonus-summary-link {
  font-family: var(--font-family);
  font-size: 16.5px;
  font-weight: 800;
  color: #16A34A;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bonus-summary-link:hover {
  color: #15803D;
  transform: translateX(2px);
}

/* Responsividade Mobile: Celular empilhado com 14px de espaçamento */
@media (max-width: 820px) {
  .bonus-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bonus-card-compact {
    border-radius: 16px;
  }

  .bonus-card-body {
    padding: 12px 14px;
  }

  .bonus-card-name {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .bonus-card-desc {
    font-size: 13.5px;
    margin-bottom: 10px;
  }

  .bonus-summary-bar {
    font-size: 14px;
    padding: 11px 14px;
  }
}

/* ============================================================
   SEÇÃO 8: DEPOIMENTOS (Fundo Bege Suave com Cards Brancos)
   ============================================================ */
.section-testimonials {
  padding-top: 56px;
  padding-bottom: 34px; /* Reduzido de 68px para diminuir o vazio inferior */
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 50%, #FFFCF7 100%);
}

.feedback-header-pill {
  gap: 7px;
  padding: 5px 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1.5px solid #7DD3FC;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1);
}

.feedback-header-pill svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.testimonials-main-title {
  font-family: var(--font-family);
  font-size: clamp(1.85rem, 4.2vw, 2.65rem);
  font-weight: 800;
  color: var(--navy-dark);
  margin-top: 10px;
  margin-bottom: 12px;
  line-height: 1.25;
  text-align: center;
}

.testimonials-title-line1 {
  display: inline-block;
  white-space: nowrap;
}

.testimonials-title-line2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .testimonials-main-title {
    font-size: clamp(1.5rem, 6.2vw, 1.85rem);
    line-height: 1.2;
  }
  .testimonials-chat-bubble svg {
    width: 24px;
    height: 24px;
  }
}

.testimonials-chat-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-dark);
}

.testimonials-subtitle {
  font-size: 16px;
  color: #64748B;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
  font-weight: 400;
}

/* ============================================================
   SEÇÃO 8: DEPOIMENTOS (ESTEIRA / CARROSSEL INFINITO CONTÍNUO)
   ============================================================ */
.section-testimonials {
  padding-top: 56px;
  padding-bottom: 34px;
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 50%, #FFFCF7 100%);
  overflow: hidden;
  width: 100%;
}

.feedback-marquee-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 32px 0 0 0;
  overflow: hidden;
  padding: 10px 0 20px 0;
  display: flex;
}

/* Sombra de desvanecimento sutil nas bordas laterais */
.feedback-marquee-container::before,
.feedback-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 5vw, 70px);
  z-index: 3;
  pointer-events: none;
}

.feedback-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #FFFFFF, transparent);
}

.feedback-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #FFFFFF, transparent);
}

.feedback-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  will-change: transform;
  animation: feedbackMarqueeLoop 36s linear infinite;
}

.feedback-marquee-container:hover .feedback-marquee-track {
  animation-play-state: paused;
}

.feedback-item {
  flex: 0 0 auto;
  width: 290px;
  max-width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-item img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(16, 29, 56, 0.08), 0 4px 10px rgba(16, 29, 56, 0.04);
  border: 1.5px solid rgba(229, 233, 240, 0.95);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feedback-item:hover img {
  box-shadow: 0 14px 34px rgba(16, 29, 56, 0.12);
  transform: translateY(-2px);
}

/* Animação Contínua 100% Fluida sem saltos */
/* Como a faixa tem 12 itens (6 originais + 6 clones idênticos) com gap: 20px,
   deslocar exatamente calc(-50% - 10px) faz o 1º clone assumir a posição exata do 1º original */
@keyframes feedbackMarqueeLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-50% - 10px), 0, 0);
  }
}

@media (max-width: 640px) {
  .section-testimonials {
    padding-top: 36px;
    padding-bottom: 24px;
  }

  .feedback-marquee-container {
    margin-top: 24px;
    padding: 6px 0 16px 0;
  }

  .feedback-marquee-track {
    gap: 14px;
    animation-duration: 28s;
  }

  .feedback-item {
    width: 265px;
    max-width: 265px;
  }

  .feedback-item img {
    border-radius: 18px;
    max-height: 420px;
  }

  @keyframes feedbackMarqueeLoop {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(calc(-50% - 7px), 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-marquee-track {
    animation: none;
    overflow-x: auto;
    width: 100%;
    scroll-snap-type: x mandatory;
  }
  .feedback-item {
    scroll-snap-align: center;
  }
}

/* ============================================================
   SEÇÃO 9: PLANOS (Fundo Off-White Quente & Cabeçalho Laranja no Completo)
   ============================================================ */
.section-plans {
  background: linear-gradient(180deg, #FFFCF7 0%, #FFF5E8 50%, #FFFCF7 100%);
  padding-top: clamp(32px, 4.5vw, 48px); /* Reduzido de 68px aproximando da seção anterior */
  padding-bottom: clamp(48px, 6vw, 68px);
}

/* ============================================================
   SEÇÃO 9: PLANOS (Cadeado Animado, Título, Pílulas de Confiança e Cronômetro)
   ============================================================ */
.section-plans {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(52px, 6.5vw, 84px);
  position: relative;
}

.section-plans .plans-header {
  margin-bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 1. Cadeado Animado */
.plans-lock-wrapper {
  margin-bottom: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans-lock-circle {
  width: 64px;
  height: 64px;
  background-color: #FFF4D6;
  border: 2px solid var(--navy-dark);
  box-shadow: 3px 3px 0px var(--navy-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s ease;
}

.plans-lock-svg {
  width: 32px;
  height: 32px;
  color: #64748B; /* Cinza inicial */
  transform-origin: center bottom;
  overflow: visible;
  transition: color 0.4s ease;
}

.plans-lock-shackle {
  transform-origin: 11px 15px; /* Pivô no ponto esquerdo da haste */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plans-lock-body {
  transition: stroke 0.4s ease;
}

/* Partículas coloridas do cadeado */
.lock-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.lock-particle.p1 { background: #0284C7; top: 12px; left: 14px; }
.lock-particle.p2 { background: #EA580C; top: 8px; right: 14px; }
.lock-particle.p3 { background: #16A34A; bottom: 12px; left: 10px; }
.lock-particle.p4 { background: #E11D48; bottom: 10px; right: 12px; }
.lock-particle.p5 { background: #FACC15; top: 2px; left: 30px; }
.lock-particle.p6 { background: #7C3AED; bottom: 4px; left: 28px; }

/* Animação Stagger do Cadeado ao revelar a seção */
.section-plans .plans-header.revealed .plans-lock-circle {
  animation: lockShake 0.4s ease forwards;
}

.section-plans .plans-header.revealed .plans-lock-svg {
  color: #2FA463;
  transition-delay: 0.4s;
}

.section-plans .plans-header.revealed .plans-lock-shackle {
  transform: translateY(-6px) rotate(25deg);
  transition-delay: 0.4s;
}

.section-plans .plans-header.revealed .lock-particle {
  animation: burstParticles 0.6s ease-out forwards;
  animation-delay: 0.45s;
}

@keyframes lockShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes burstParticles {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 14px), var(--ty, -14px)) scale(1.3);
    opacity: 0;
  }
}

.lock-particle.p1 { --tx: -18px; --ty: -18px; }
.lock-particle.p2 { --tx: 18px; --ty: -20px; }
.lock-particle.p3 { --tx: -20px; --ty: 16px; }
.lock-particle.p4 { --tx: 20px; --ty: 16px; }
.lock-particle.p5 { --tx: 2px; --ty: -24px; }
.lock-particle.p6 { --tx: -2px; --ty: 24px; }

/* 2. Pílula */
.plans-header-pill {
  gap: 7px;
  padding: 5px 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  background-color: #FEF08A;
  color: #854D0E;
  border: 1.5px solid #FACC15;
  box-shadow: 0 2px 6px rgba(202, 138, 4, 0.12);
}

.plans-header-pill svg {
  color: #D97706;
}

/* 3. Título H2 com Marca-texto */
.plans-main-title {
  font-family: var(--font-family);
  font-size: clamp(2.4rem, 5.2vw, 3.4rem);
  font-weight: 800;
  color: var(--navy-dark);
  margin-top: 6px;
  margin-bottom: 12px;
  letter-spacing: -0.6px;
  line-height: 1.25;
}

.plans-title-line1 {
  display: block;
}

.plans-title-line2 {
  display: inline-block;
  margin-top: 4px;
}

.plans-highlight-box {
  display: inline-block;
  position: relative;
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 10px;
  padding: 0 10px;
  transform: rotate(-1deg);
  z-index: 1;
  background-color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  box-shadow: none;
}

.plans-highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: #FFD45C;
  z-index: -1;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-plans .plans-header.revealed .plans-highlight-box::before {
  width: 100%;
  transition-delay: 0.65s; /* Pinta logo depois que o cadeado abre */
}

/* 4. Subtítulo */
.plans-subtitle {
  font-family: var(--font-family);
  font-size: 16px;
  color: #64748B;
  max-width: 520px;
  margin: 0 auto 18px auto;
  line-height: 1.55;
  font-weight: 400;
}

/* 5. Faixa de Confiança (4 mini-selos) */
.plans-trust-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.trust-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1.5px solid #E5E1D8;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.trust-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.trust-icon.icon-green  { color: #16A34A; }
.trust-icon.icon-blue   { color: #0284C7; }
.trust-icon.icon-gray   { color: #64748B; }
.trust-icon.icon-orange { color: #EA580C; }

/* 6. Contagem Regressiva Real (Compacta) */
.plans-countdown-box {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.plans-countdown-label {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  margin: 0;
}

.plans-countdown-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.countdown-unit {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: #FFFFFF;
  border: 2px solid var(--navy-dark);
  box-shadow: 3px 3px 0px var(--navy-dark);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.countdown-num {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1;
  margin-bottom: 2px;
}

.countdown-text {
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
  line-height: 1;
  letter-spacing: 0.4px;
}

/* Responsividade Mobile e Acessibilidade */
@media (max-width: 600px) {
  .plans-lock-circle {
    width: 52px;
    height: 52px;
  }
  .plans-lock-svg {
    width: 26px;
    height: 26px;
  }
  .plans-main-title {
    font-size: clamp(1.95rem, 7.5vw, 2.5rem);
    line-height: 1.22;
  }
  .plans-subtitle {
    font-size: 14.5px;
    line-height: 1.45;
  }
  .plans-trust-pills {
    max-width: 340px;
    gap: 8px;
  }
  .trust-pill-item {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  .countdown-unit {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  .countdown-num {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plans-lock-circle,
  .lock-particle {
    animation: none !important;
  }
  .plans-lock-svg {
    color: #2FA463 !important;
  }
  .plans-lock-shackle {
    transform: translateY(-6px) rotate(25deg) !important;
    transition: none !important;
  }
  .plans-highlight-box::before {
    width: 100% !important;
    transition: none !important;
  }
}

.plans-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 24px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto 24px auto;
}

.plan-card {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(16, 29, 56, 0.05);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.plan-card-basic {
  border: 2px solid #E5E9F0;
  box-shadow: 0 6px 20px rgba(16, 29, 56, 0.04);
}

/* Selos de confiança centralizados abaixo dos cartões da seção de planos */
.plans-bottom-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .plans-bottom-trust-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
    gap: 8px;
  }
  .plans-bottom-trust-strip .trust-pill-item {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 11.5px;
    white-space: nowrap;
  }
}

/* Plano Completo redesenhado: Wrapper com degradê 2px, glow suave e reflexo de luz */
.plan-card-complete-wrapper {
  position: relative;
  background: linear-gradient(135deg, #FFD45C 0%, #F29A00 45%, #E8505E 100%);
  padding: 2px;
  border-radius: 24px;
  display: flex;
  transform: scale(1.04);
  transform-origin: center center;
  align-self: center;
  z-index: 5;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Glow difuso por trás (blur 24px, opacity 0.35) */
.plan-card-complete-wrapper::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 30px;
  background: linear-gradient(135deg, #FFD45C 0%, #F29A00 45%, #E8505E 100%);
  filter: blur(24px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Reflexo de luz passando pela borda a cada 4s */
.plan-card-complete-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: -150% 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderShineLoop 4s linear infinite;
  z-index: 3;
}

@media (hover: hover) {
  .plan-card-complete-wrapper:hover {
    transform: scale(1.04) translateY(-3px);
  }
  .plan-card-complete-wrapper:hover::before {
    opacity: 0.48;
  }
}

/* Cartão Interno do Plano Completo */
.plan-card-complete {
  width: 100%;
  background: #FFFFFF !important;
  border-radius: 22px !important;
  padding: 28px !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

/* Pílula flutuando metade para fora da borda superior */
.plan-badge-top-pulse {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F29A00 0%, #E8505E 100%);
  color: #FFFFFF;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(232, 80, 94, 0.4), 0 0 0 2px #FFFFFF;
  z-index: 10;
  white-space: nowrap;
  animation: badgeGlowPulse 3s infinite ease-in-out;
}

@keyframes badgeGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(232, 80, 94, 0.4), 0 0 0 2px #FFFFFF;
    transform: translateX(-50%) scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(232, 80, 94, 0.75), 0 0 0 2px #FFFFFF;
    transform: translateX(-50%) scale(1.03);
  }
}

/* 2. Topo do Plano Completo */
.plan-complete-top {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 14px;
}

.plan-complete-title {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.plan-complete-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.plan-mini-pill {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: #8C5800;
  background-color: #FFF4D6;
  border: 1px solid #F2C14E;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.2;
}

/* 3. Imagem com inclinação suave e flutuação lenta */
.plan-complete-image-wrap {
  text-align: center;
  margin: 2px 0 16px 0;
  perspective: 800px;
}

.plan-complete-img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 16px;
  border: none;
  transform: rotate(-1.5deg);
  box-shadow: 0 14px 30px rgba(242, 154, 0, 0.25);
  animation: planFloatSlow 6s ease-in-out infinite alternate;
  display: block;
  margin: 0 auto;
}

@keyframes planFloatSlow {
  0% {
    transform: rotate(-1.5deg) translateY(0);
  }
  100% {
    transform: rotate(-1.5deg) translateY(-6px);
  }
}

/* 4. Bloco de Preço Centralizado e Compacto */
.plan-complete-price-box {
  text-align: center;
  margin-bottom: 16px;
}

.plan-complete-old-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}

.plan-complete-old-price {
  font-size: 13px;
  color: #64748B;
  font-weight: 600;
}

.plan-complete-discount-pill {
  background: #FEE2E2;
  color: #E8505E;
  border: 1px solid #FECACA;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1;
}

.plan-complete-current-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  margin: 2px 0 4px 0;
}

.plan-complete-currency {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-dark);
}

.plan-complete-amount {
  font-family: var(--font-family);
  font-size: clamp(46px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #F29A00 0%, #E8505E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.plan-complete-price-per-page {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  margin-top: 4px;
}

/* 5. Botão Quero o Completo Estilo Pop-up */
.plan-complete-cta-wrap {
  width: 100%;
  margin-bottom: 20px;
}

.plan-complete-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  margin-top: 8px;
  flex-wrap: wrap;
}

.plan-complete-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plan-complete-trust-line svg {
  color: #2FA463;
}

/* 6. O QUE ESTÁ INCLUSO (Grade de módulos) */
.plan-complete-section-block {
  margin-bottom: 18px;
  text-align: left;
}

.plan-complete-block-label {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.plan-complete-basic-banner {
  background-color: #EAF8F0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #14532D;
  margin-bottom: 8px;
}

.plan-complete-basic-banner svg {
  color: #16A34A;
  flex-shrink: 0;
}

.plan-complete-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.plan-mod-item {
  background-color: #FAF8F4;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.plan-mod-circle {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
}

.plan-mod-circle.num-purple { background-color: #7B5CD6; }
.plan-mod-circle.num-teal { background-color: #0E9F6E; }
.plan-mod-circle.num-blue { background-color: #1FA2CC; }
.plan-mod-circle.num-green { background-color: #34B36B; }
.plan-mod-circle.num-orange { background-color: #F29A00; }
.plan-mod-circle.num-star { background-color: #E8505E; font-size: 12px; }

.plan-mod-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-dark);
  line-height: 1.25;
}

/* 7. BÔNUS (Mini-cartões 3 colunas) */
.plan-complete-bonus-block {
  text-align: left;
}

.plan-complete-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.plan-bonus-mini-card {
  background-color: #FAF8F4;
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.plan-bonus-mini-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  background-color: #E2E8F0;
}

.plan-bonus-mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-bonus-mini-name {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.plan-bonus-mini-tag {
  background-color: #DCFCE7;
  color: #15803D;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  line-height: 1;
}

.plan-complete-economy-line {
  text-align: center;
  font-size: 12px;
  color: #475569;
  margin-top: 4px;
}

.plan-complete-economy-line b {
  color: #15803D;
}

/* Responsividade do Plano Completo */
@media (max-width: 860px) {
  .plan-card-complete-wrapper {
    order: 1;
    transform: none !important;
    align-self: stretch;
    margin-top: 14px;
  }
  .plan-card-complete {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
  .plan-complete-img {
    max-height: 180px;
    object-fit: contain;
  }
}

@media (max-width: 380px) {
  .plan-complete-modules-grid {
    grid-template-columns: 1fr;
  }
  .plan-complete-bonus-grid {
    gap: 5px;
  }
  .plan-bonus-mini-card {
    padding: 6px 4px;
  }
  .plan-bonus-mini-name {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card-complete-wrapper::after,
  .plan-badge-top-pulse,
  .plan-complete-img,
  .btn-cta-principal,
  .btn-cta-principal::after {
    animation: none !important;
    transform: none !important;
  }
}
  position: relative;
  border: none;
  box-shadow: none;
}

.plan-featured-title {
  font-family: var(--font-family);
  font-size: clamp(0.98rem, 1.45vw, 1.15rem);
  font-weight: 800; /* Poppins ExtraBold */
  color: #FFFFFF !important;
  margin: 0;
  letter-spacing: 0.3px;
  line-height: 1.25;
  text-align: center;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-transform: uppercase;
}

.plan-featured-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.94) !important;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.plan-header {
  text-align: center;
  margin-bottom: 14px;
}

.plan-header h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 4px;
}

.plan-header p {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.4;
}

/* Mockup interno do Plano Completo - Aumentado ~8-10% (345px), bem centralizado */
.plan-mockup-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 14px 0;
  background: transparent;
}

.plan-mockup-img {
  max-width: 345px; /* Aumentado 9% em relação a 316px */
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  display: block;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 20px rgba(16, 29, 56, 0.08);
  transition: transform var(--transition-normal);
}

.plan-mockup-wrap:hover .plan-mockup-img {
  transform: scale(1.02);
}

/* Área de Preço e Botão dos Planos (Visual limpo, sem card/caixa em volta) */
.plan-price-box {
  text-align: center;
  background: transparent;
  border-radius: 0;
  padding: 4px 0 16px 0;
  margin-bottom: 16px;
  border: none;
  box-shadow: none;
}

/* Área de Preço e Botão do Plano Completo */
.plan-card-complete .plan-price-box {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 16px 0;
  margin-bottom: 18px;
}

.plan-tagline-top {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}

.plan-old-price {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 2px;
}

.plan-old-price s {
  color: #94A3B8;
  font-weight: 700;
  text-decoration: line-through;
}

.plan-current-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.05;
  margin: 2px 0;
  letter-spacing: -0.5px;
}

.plan-card-complete .plan-current-price.cta-color {
  color: #EA580C;
  font-size: 3.1rem; /* Grande, imponente e vibrante como na referência */
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0;
  line-height: 1;
}

.price-currency {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--navy-dark); /* R$ em cor escura contrastante com o 19,90 laranja */
}

/* Frase verde "Todos os 9 Módulos + 3 Bônus Inclusos" */
.plan-included-badge-green {
  font-size: 13.5px;
  font-weight: 800;
  color: #16A34A;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* Texto de Pagamento Minimalista e Discreto */
.plan-payment-type {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  opacity: 0.88;
  margin-top: 2px;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

/* Área do botão Quero o Completo e Quero o Básico dentro da caixa de valor */
.plan-cta-in-price {
  margin-top: 10px; /* Espaço equilibrado e enxuto em relação ao preço */
  width: 100%;
}

.btn-plan-complete {
  width: 100%;
  padding: 14px 22px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28), 0 0 0 1px rgba(34, 197, 94, 0.35);
  position: relative;
}

.btn-plan-complete:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.45), 0 0 18px rgba(74, 222, 128, 0.55);
}

.btn-plan-complete:active {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.btn-plan-basic {
  width: 100%;
  padding: 13px 20px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Destaque Verde para 'Tudo do Plano Básico incluso' */
.feature-basic-included {
  color: #16A34A !important;
}

.feature-basic-included span,
.feature-basic-included b {
  color: #16A34A !important;
}

.feature-basic-included svg {
  color: #16A34A !important;
}

/* Texto de pagamento minimalista no rodapé dos cards */
.card-footer-payment {
  margin-top: auto;
  padding-top: 14px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  opacity: 0.88;
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
  letter-spacing: 0.2px;
}

/* Caixa interna amarela de bônus exclusivos no Plano Completo */
.plan-bonus-highlight-box {
  background: #FEF3C7;
  border: 1.5px solid #FCD34D;
  border-radius: 14px;
  padding: 12px 14px; /* Mais compacto */
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

.bonus-box-title {
  font-size: 12px;
  font-weight: 800;
  color: #78350F;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: center;
}

.bonus-box-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Espaçamento mais enxuto */
}

.bonus-box-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #451A03;
}

.bonus-box-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.2;
}

.bonus-cut {
  color: #94A3B8;
  text-decoration: line-through;
  margin: 0 3px;
}

.bonus-box-sub {
  font-size: 11.5px;
  font-weight: 700;
  color: #15803D;
  text-align: center;
  background: #DCFCE7;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #BBF7D0;
}

.plan-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex-grow: 1;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.42;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
}

.feature-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.feature-item svg {
  min-width: 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.feature-item.checked svg {
  color: #16A34A;
}

.feature-item.highlight-item {
  background: #F0FDF4;
  padding: 6px 10px;
  border-radius: 8px;
  border-bottom: none;
  color: #15803D;
  font-weight: 600;
}

.feature-item.crossed {
  color: #94A3B8;
  text-decoration: line-through;
}

.feature-item.crossed svg {
  color: #CBD5E1;
}

.plan-footer-notes {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  width: 100%;
}

.payment-badges-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.payment-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--navy-dark);
  box-shadow: var(--shadow-sm);
}

.plan-footer-notes p {
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .plan-card-complete-wrapper {
    order: 1;
    transform: none !important;
    align-self: stretch;
    margin-top: 14px;
  }
  .plan-card-basic {
    order: 2;
  }
  .plan-card {
    padding: 24px 16px;
    border-radius: 18px;
  }
}

/* ============================================================
   SEÇÃO 10: GARANTIA (Design Limpo, Moderno e Minimalista)
   ============================================================ */
.section-guarantee {
  background-color: var(--bg-cream-warm);
  padding: 40px 0;
}

.guarantee-box-clean {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1.5px solid #BBF7D0;
  border-radius: 999px;
  padding: 16px 28px;
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.08);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.guarantee-box-clean:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(22, 163, 74, 0.12);
}

.guarantee-shield-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #86EFAC;
  flex-shrink: 0;
}

.guarantee-text-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.guarantee-title {
  font-weight: 800;
  color: #15803D;
  font-size: 16.5px;
}

.guarantee-desc {
  font-weight: 500;
  color: var(--navy-dark);
}

@media (max-width: 768px) {
  .section-guarantee {
    padding: 30px 0;
  }
  .guarantee-box-clean {
    border-radius: 18px;
    padding: 16px 18px;
    gap: 12px;
    flex-direction: column;
    text-align: center;
  }
  .guarantee-shield-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  .guarantee-shield-icon svg {
    width: 22px;
    height: 22px;
  }
  .guarantee-text-block {
    flex-direction: column;
    gap: 3px;
    font-size: 14.5px;
  }
  .guarantee-title {
    font-size: 15.5px;
  }
}

/* ============================================================
   SEÇÃO 11: PERGUNTAS FREQUENTES (FAQ - Fundo Claro e Neutro)
   ============================================================ */
.faq-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF7 60%, #FFF8F0 100%);
  padding: 68px 0;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto 44px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-card {
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid rgba(229, 233, 240, 0.9);
  box-shadow: 0 4px 14px rgba(16, 29, 56, 0.03);
  transition: box-shadow var(--transition-normal);
}

.faq-card:hover {
  box-shadow: 0 6px 18px rgba(16, 29, 56, 0.06);
}

.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy-dark);
  cursor: pointer;
}

.faq-trigger span {
  flex-grow: 1;
}

.faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-card);
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-dark);
}

.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background-color: var(--cta);
  color: #FFFFFF;
  border-color: var(--cta);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-body-content {
  padding: 0 24px 20px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 1px solid var(--border-card);
  margin-top: 2px;
  padding-top: 14px;
}

@media (max-width: 768px) {
  .faq-section {
    padding: 44px 0;
  }
  .faq-trigger {
    padding: 16px 18px;
    font-size: 15px;
  }
  .faq-body-content {
    padding: 0 18px 18px 18px;
  }
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer {
  background-color: #0F172A;
  color: #FFFFFF;
  padding-top: 60px;
  padding-bottom: 44px;
  border-top: 1px solid #1E293B;
}

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

.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
}

.footer-logo {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 0;
}

.footer-tagline {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #94A3B8;
  text-transform: uppercase;
}

.footer-info {
  font-size: 14.5px;
  color: #94A3B8;
  margin-bottom: 22px;
}

.btn-whatsapp-footer {
  background-color: #10B981;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 28px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-whatsapp-footer:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.footer-legal {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 14px;
}

.footer-links {
  display: flex;
  gap: 20px;
  font-size: 13px;
}

.footer-links a {
  color: #94A3B8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  color: #FFFFFF;
}

/* ============================================================
   CONVERSÃO E EXTRAS
   ============================================================ */

/* 1. Botão flutuante do WhatsApp */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25D366;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  z-index: 999;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.floating-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55);
}

.floating-whatsapp:active {
  transform: scale(0.96);
}

/* 2. Barra fixa mobile */
.mobile-sticky-bar {
  display: none;
}

@media (max-width: 860px) {
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid var(--border-card);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 850;
    transform: translateY(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-sticky-bar.visible {
    transform: translateY(0);
  }

  .sticky-bar-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 1;
    line-height: 1.25;
  }

  .sticky-bar-info div {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-bar-info span {
    font-size: 11.5px;
    color: var(--ink-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-sticky-bar .btn-cta {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    min-height: 40px;
    white-space: nowrap;
  }

  .floating-whatsapp {
    bottom: 20px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
}

/* ============================================================
   POP-UP DE UPGRADE (AO CLICAR EM "QUERO O BÁSICO")
   CABE INTEIRO NA TELA DO CELULAR, SEM BARRA DE ROLAGEM
   ============================================================ */
.upgrade-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.upgrade-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Wrapper com borda em degradê animada giratória (laranja, rosa, amarelo em 4s) */
.upgrade-modal-wrapper {
  position: relative;
  width: min(92vw, 440px);
  max-height: min(92dvh, 92vh);
  padding: 2.5px;
  border-radius: 26px;
  background: linear-gradient(135deg, #FF7A1A, #E8505E, #FFD45C, #FF7A1A);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transform: translateY(40px) scale(0.92);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: --angle, transform;
  display: flex;
}

@supports (background: conic-gradient(from 0deg, red, blue)) {
  .upgrade-modal-wrapper {
    background: conic-gradient(from var(--angle), #FF7A1A, #E8505E, #FFD45C, #FF7A1A);
    animation: rotateUpgradeGradient 4s linear infinite;
  }
}

@keyframes rotateUpgradeGradient {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

.upgrade-modal-overlay.active .upgrade-modal-wrapper {
  transform: translateY(0) scale(1);
}

/* Cartão Interno Branco com sombra sólida laranja var(--cta) */
.upgrade-modal-card {
  background: #FFFFFF;
  border-radius: 24px;
  border: 2px solid var(--navy-dark);
  box-shadow: 6px 6px 0px var(--cta);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* A) FAIXA DE TOPO (altura exata de 44px) */
.upgrade-top-bar {
  height: 44px;
  min-height: 44px;
  background: linear-gradient(90deg, #FF7A1A 0%, #E8505E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 40px 0 16px;
  text-align: center;
}

.upgrade-top-bar-text {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.upgrade-close-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.upgrade-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

/* CONTEÚDO PRINCIPAL (Flexível, ajustado para caber sem rolagem) */
.upgrade-modal-content {
  padding: clamp(8px, 1.8vh, 14px) clamp(12px, 3.5vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-height: 0;
  overflow: hidden; /* Garante que nada transborde */
}

/* B) GANCHO: CADEADO ANIMADO + TÍTULO */
.upgrade-hook-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  text-align: left;
  width: 100%;
}

.upgrade-lock-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: #FFF4D6;
  border: 2px solid var(--navy-dark);
  box-shadow: 2px 2px 0px var(--navy-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.upgrade-lock-svg {
  width: 22px;
  height: 22px;
  color: #2FA463;
  overflow: visible;
}

.upgrade-lock-shackle {
  transform-origin: 11px 15px;
  transform: translateY(-4px) rotate(22deg);
}

/* Confetes saindo do cadeado */
.upg-confetti {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}
.upg-confetti.c1 { background: #0284C7; top: 6px; left: 6px; --tx: -14px; --ty: -14px; }
.upg-confetti.c2 { background: #EA580C; top: 6px; right: 6px; --tx: 14px; --ty: -14px; }
.upg-confetti.c3 { background: #E11D48; bottom: 6px; left: 6px; --tx: -14px; --ty: 12px; }
.upg-confetti.c4 { background: #FACC15; bottom: 6px; right: 6px; --tx: 14px; --ty: 12px; }

.upgrade-modal-overlay.active .upgrade-lock-circle {
  animation: lockShake 0.4s ease 0.1s;
}
.upgrade-modal-overlay.active .upg-confetti {
  animation: burstParticles 0.6s ease-out 0.25s forwards;
}

.upgrade-title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: clamp(19px, 4.4vw, 22px);
  color: var(--navy-dark);
  line-height: 1.22;
  margin: 0;
  flex: 1;
}

.upgrade-diff-highlight {
  display: inline-block;
  background-color: #FFD45C;
  border: 1.5px solid var(--navy-dark);
  border-radius: 8px;
  padding: 0 6px;
  color: var(--navy-dark);
}

/* C) IMAGEM (com flutuação suave, cantos arredondados, some em telas baixas) */
.upgrade-image-wrap {
  width: 100%;
  max-height: 18vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  border-radius: 16px;
  overflow: hidden;
}

.upgrade-product-img {
  max-height: 18vh;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  animation: upgFloat 3.5s ease-in-out infinite;
}

@keyframes upgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* D) COMPARAÇÃO: TABELA COMPACTA (3 Colunas x 4 Linhas) */
.upgrade-comparison-table {
  width: 100%;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  display: flex;
  flex-direction: column;
}

.upg-table-header,
.upg-table-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  align-items: center;
  padding: clamp(2px, 0.5vh, 4px) 8px;
  font-family: var(--font-family);
  font-size: clamp(11.5px, 2.8vw, 13px);
  border-bottom: 1px solid #EFECE6;
}

.upg-table-row:last-child {
  border-bottom: none;
}

.upg-col-feature {
  text-align: left;
  font-weight: 600;
  color: #475569;
}

.upg-col-basic {
  color: #94A3B8;
  opacity: 0.65;
  font-weight: 600;
}

.upg-col-complete {
  position: relative;
  background-color: #EAF8F0;
  border: 2px solid #22C55E;
  border-radius: 12px;
  color: #15803D;
  font-weight: 800;
  padding: 2px 4px;
}

.upg-pill-complete {
  display: inline-block;
  background-color: #DCFCE7;
  color: #16A34A;
  border: 1px solid #86EFAC;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.upg-num {
  font-weight: 800;
  color: #15803D;
}

/* E) BÔNUS (Uma linha só com mini-ícones de 30px) */
.upgrade-bonus-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  width: 100%;
}

.upgrade-bonus-icons {
  display: flex;
  align-items: center;
  margin-left: 4px;
}

.upg-icon-circle {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transform: scale(0.6);
  opacity: 0;
}

.upg-icon-circle:first-child {
  margin-left: 0;
}

.upg-icon-circle.icon-c1 { background: #E0F2FE; color: #0284C7; }
.upg-icon-circle.icon-c2 { background: #FEF3C7; color: #D97706; }
.upg-icon-circle.icon-c3 { background: #EDE9FE; color: #7C3AED; }

.upgrade-modal-overlay.active .upg-icon-circle {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.upgrade-modal-overlay.active .upg-icon-circle:nth-child(1) { animation-delay: 0.3s; }
.upgrade-modal-overlay.active .upg-icon-circle:nth-child(2) { animation-delay: 0.4s; }
.upgrade-modal-overlay.active .upg-icon-circle:nth-child(3) { animation-delay: 0.5s; }

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.upgrade-bonus-text {
  font-family: var(--font-family);
  font-size: clamp(10.5px, 2.6vw, 12px);
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
}

/* F) PREÇO (Uma Linha Centralizada) */
.upgrade-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}

.upgrade-old-price {
  font-family: var(--font-family);
  font-size: 14px;
  color: #94A3B8;
  font-weight: 600;
}

.upgrade-current-price {
  font-family: var(--font-family);
  font-size: clamp(32px, 7.5vw, 38px);
  font-weight: 800;
  color: var(--cta);
  line-height: 1;
  letter-spacing: -0.5px;
}

.upgrade-pill-special {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  background-color: #E8505E;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.upgrade-price-subtext {
  font-family: var(--font-family);
  font-size: 12px;
  color: #64748B;
  margin-bottom: clamp(6px, 1.2vh, 10px);
  text-align: center;
}

/* G) BOTÃO PRINCIPAL COM REFLEXO E PULSAÇÃO */
.upgrade-cta-wrap {
  width: 100%;
  margin-bottom: clamp(4px, 1vh, 8px);
}

.upgrade-btn-primary {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #2FA463 0%, #1F8A50 100%);
  color: #FFFFFF;
  border: 2px solid var(--navy-dark);
  box-shadow: 4px 4px 0px var(--navy-dark);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: clamp(14px, 3.7vw, 16.5px);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: upgPulse 2.5s infinite ease-in-out;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@keyframes upgPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* Faixa de reflexo de luz diagonal */
.upgrade-btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  animation: upgShine 2.5s infinite ease-in-out;
}

@keyframes upgShine {
  0% { left: -60%; }
  35%, 100% { left: 140%; }
}

.upgrade-btn-primary:active {
  transform: scale(0.97) !important;
  box-shadow: 2px 2px 0px var(--navy-dark);
}

/* H) GARANTIA (Uma linha) */
.upgrade-guarantee-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-family);
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  margin-bottom: clamp(2px, 0.6vh, 4px);
}

.upgrade-guarantee-line svg {
  color: #EA580C;
}

/* I) LINK DE SAÍDA */
.upgrade-decline-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.upgrade-decline-link {
  font-family: var(--font-family);
  font-size: clamp(11.5px, 2.8vw, 13px);
  color: #64748B;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  transition: color 0.2s ease;
}

.upgrade-decline-link:hover {
  color: var(--navy-dark);
}

/* ============================================================
   REGRAS DE ALTURA DA TELA (GARANTIA TOTAL SEM BARRA DE ROLAGEM)
   ============================================================ */
@media (max-height: 700px) {
  .upgrade-image-wrap {
    display: none !important;
  }
}

@media (max-height: 600px) {
  .upgrade-bonus-line {
    display: none !important;
  }
  .upgrade-modal-content {
    padding: clamp(4px, 1.2vh, 8px) clamp(8px, 2.5vw, 12px);
  }
  .upgrade-hook-row {
    margin-bottom: clamp(3px, 0.8vh, 6px);
  }
  .upgrade-comparison-table {
    margin-bottom: clamp(3px, 0.8vh, 6px);
  }
  .upg-table-header,
  .upg-table-row {
    padding: clamp(1px, 0.3vh, 2px) 6px;
  }
  .upgrade-price-row {
    margin-bottom: 2px;
  }
  .upgrade-price-subtext {
    margin-bottom: 4px;
    font-size: 11px;
  }
  .upgrade-btn-primary {
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-modal-wrapper {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .upgrade-lock-circle,
  .upg-confetti,
  .upg-icon-circle,
  .upgrade-product-img,
  .upgrade-btn-primary,
  .upgrade-btn-primary::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 360px) {
  .mobile-sticky-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  .sticky-bar-info div {
    font-size: 13.5px;
  }
  .sticky-bar-info span {
    font-size: 10.5px;
  }
  .mobile-sticky-bar .btn-cta {
    padding: 8px 14px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .mobile-sticky-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  .sticky-bar-info div {
    font-size: 13.5px;
  }
  .sticky-bar-info span {
    font-size: 10.5px;
  }
  .mobile-sticky-bar .btn-cta {
    padding: 8px 14px;
    font-size: 11.5px;
  }
}