/* =============================================================
   carousel-factory.css — efeitos signature da LP Carousel Factory
   -------------------------------------------------------------
   Extraído de public/n-carousel-factory-0001.html (Phase 2-3).
   Mantém os mesmos nomes de classe do markup legacy — Phase 4
   refatora o HTML e substitui .section-bg-* por data-theme.
   Gold literal trocado por rgba(var(--brand-500-rgb), X).
   Todos os efeitos com movimento respeitam prefers-reduced-motion.
   ============================================================= */

/* =============================================
   GLOW EFFECTS — page-local
   -------------------------------------------------------------
   .glow-teal foi removido (Phase 4.2.3) — markup migrado para
   .glow-soft (DS canônico em animations.css).
   ============================================= */
.logo-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-hover:hover {
  transform: rotate(-5deg) scale(1.1);
}

/* =============================================
   KEYFRAMES
   ============================================= */
.animate-glow {
  animation: kfGlow 2s ease-in-out infinite alternate;
}

@keyframes kfGlow {
  from {
    box-shadow:
      0 0 20px rgba(var(--brand-500-rgb), 0.30),
      0 0 40px rgba(var(--brand-500-rgb), 0.10);
  }
  to {
    box-shadow:
      0 0 30px rgba(var(--brand-500-rgb), 0.50),
      0 0 60px rgba(var(--brand-500-rgb), 0.20);
  }
}

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

@keyframes kfFloatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%      { transform: translateY(-8px) rotate(0.5deg); }
  66%      { transform: translateY(-4px) rotate(-0.5deg); }
}

@keyframes kfAmbient1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(100px, -60px) scale(1.1); }
}

@keyframes kfAmbient2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-80px, 70px) scale(0.88); }
}

@keyframes kfShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes kfPulseRing {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* =============================================
   AMBIENT LIGHTING — page-local override
   -------------------------------------------------------------
   Renomeado em Phase 4.2.3 de .ambient-light / .ambient-light-2
   para .ambient-light--cf / .ambient-light--cf-alt — evita colisão
   com .ambient-light / .ambient-light--alt do DS (animations.css),
   que têm sizing menor (300/400 vs. 500/600 aqui).
   ============================================= */
.ambient-light--cf {
  position: fixed;
  top: 10%;
  left: 0%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--brand-500-rgb), 0.11) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  animation: kfAmbient1 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.ambient-light--cf-alt {
  position: fixed;
  bottom: 10%;
  right: 0%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(194, 155, 66, 0.07) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: kfAmbient2 15s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* =============================================
   SCROLL REVEAL — transition-based
   ============================================= */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Animation stagger delays */
.d-0   { transition-delay: 0ms; }
.d-100 { transition-delay: 100ms; }
.d-150 { transition-delay: 150ms; }
.d-200 { transition-delay: 200ms; }
.d-300 { transition-delay: 300ms; }
.d-350 { transition-delay: 350ms; }
.d-400 { transition-delay: 400ms; }
.d-450 { transition-delay: 450ms; }
.d-500 { transition-delay: 500ms; }
.d-600 { transition-delay: 600ms; }
.d-700 { transition-delay: 700ms; }
.d-800 { transition-delay: 800ms; }

/* Hero: CSS-animation reveal (sem dependência de JS) */
@keyframes kfHeroUp {
  from { opacity: 0.01; transform: translateY(28px); }
  to   { opacity: 1;    transform: translateY(0); }
}
@keyframes kfHeroFade {
  from { opacity: 0.01; }
  to   { opacity: 1; }
}
@keyframes kfHeroRight {
  from { opacity: 0.01; transform: translateX(36px); }
  to   { opacity: 1;    transform: translateX(0); }
}
@keyframes kfHeroScale {
  from { opacity: 0.01; transform: scale(0.93); }
  to   { opacity: 1;    transform: scale(1); }
}

#hero .reveal-up    { animation: kfHeroUp    0.75s cubic-bezier(0.4, 0, 0.2, 1) both; }
#hero .reveal-fade  { animation: kfHeroFade  0.75s cubic-bezier(0.4, 0, 0.2, 1) both; }
#hero .reveal-right { animation: kfHeroRight 0.85s cubic-bezier(0.4, 0, 0.2, 1) both; }
#hero .reveal-scale { animation: kfHeroScale 0.65s cubic-bezier(0.4, 0, 0.2, 1) both; }

#hero .d-0   { animation-delay: 0ms; }
#hero .d-100 { animation-delay: 100ms; }
#hero .d-150 { animation-delay: 150ms; }
#hero .d-200 { animation-delay: 200ms; }
#hero .d-300 { animation-delay: 300ms; }
#hero .d-350 { animation-delay: 350ms; }
#hero .d-400 { animation-delay: 400ms; }
#hero .d-450 { animation-delay: 450ms; }
#hero .d-500 { animation-delay: 500ms; }
#hero .d-600 { animation-delay: 600ms; }
#hero .d-700 { animation-delay: 700ms; }
#hero .d-800 { animation-delay: 800ms; }

/* CSS-only reveal para subheadline LCP */
@keyframes kfLcpRevealUp {
  from { opacity: 0.01; transform: translateY(28px); }
  to   { opacity: 1;    transform: translateY(0); }
}
.lcp-reveal {
  animation: kfLcpRevealUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 400ms both;
}

/* =============================================
   NAVBAR
   ============================================= */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-nav.scrolled {
  padding: 0.625rem 0;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(244, 244, 244, 0.94);
  border-bottom: 1px solid rgba(var(--brand-500-rgb), 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
}

/* Desktop nav links */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(1, 14, 34, 0.65);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: #010E22;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* Nav CTA */
.nav-cta {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--brand-500-rgb), 0.45);
  background: rgba(var(--brand-500-rgb), 0.08);
  color: #010E22;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover {
  background: rgba(var(--brand-500-rgb), 0.18);
  border-color: rgba(var(--brand-500-rgb), 0.75);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--brand-500-rgb), 0.18);
}

/* Hamburger button */
/* Hamburger — variante LIGHT do DS (bg #010E22 + spans gold) */
.hamburger {
  width: 38px;
  height: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #010E22;
  border: none;
  padding: 0;
  border-radius: 10px;
  transition: filter 0.2s ease;
}

.hamburger:hover {
  filter: brightness(1.15);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--brand-500);
  border-radius: 9999px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding-top: 72px;
  background: rgba(244, 244, 244, 0.97);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(var(--brand-500-rgb), 0.15);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #010E22;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: rgba(var(--brand-500-rgb), 0.1);
  color: #C29B42;
}

.mobile-nav-link .link-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
}

.mobile-menu-divider {
  height: 1px;
  background: rgba(1, 14, 34, 0.08);
  margin: 0.5rem 0;
}

.mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  color: #010E22;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-top: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(var(--brand-500-rgb), 0.35);
}

.mobile-cta:hover {
  transform: translateY(-2px);
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: #010E22;
  padding: 2.5rem 0 2rem;
  border-top: 1px solid rgba(var(--brand-500-rgb), 0.1);
}

.footer-disclaimer {
  display: inline-block;
  background: rgba(var(--brand-500-rgb), 0.07);
  border: 1px solid rgba(var(--brand-500-rgb), 0.15);
  border-radius: 0.625rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  color: rgba(246, 246, 246, 0.75);
  line-height: 1.6;
  text-align: center;
}

.footer-link {
  color: rgba(246, 246, 246, 0.75);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: rgba(var(--brand-500-rgb), 0.8);
}

/* =============================================
   HERO — EYEBROW TAG
   ============================================= */
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--brand-500-rgb), 0.4);
  background: rgba(var(--brand-500-rgb), 0.08);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #010E22;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.eyebrow-tag:hover {
  border-color: rgba(var(--brand-500-rgb), 0.7);
  background: rgba(var(--brand-500-rgb), 0.14);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--brand-500-rgb), 0.2);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 8px rgba(var(--brand-500-rgb), 0.7);
  animation: kfGlow 1.5s ease-in-out infinite alternate;
}

/* =============================================
   HERO — HEADLINE GRADIENT
   ============================================= */
.gradient-text {
  background: linear-gradient(135deg, #EDB852 0%, #C29B42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================
   HERO — BULLET LIST
   ============================================= */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.check-item:hover {
  transform: translateX(5px);
}

.check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 10px rgba(var(--brand-500-rgb), 0.35);
}

/* =============================================
   HERO — PRIMARY CTA BUTTON
   ============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 2.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #EDB852 0%, #C29B42 100%);
  color: #010E22;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.015em;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(194, 155, 66, 0.5),
    0 4px 20px rgba(var(--brand-500-rgb), 0.4),
    0 8px 60px rgba(var(--brand-500-rgb), 0.18);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: none;
  pointer-events: none;
}

.btn-primary:hover::before {
  animation: kfShimmer 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(194, 155, 66, 0.6),
    0 8px 30px rgba(var(--brand-500-rgb), 0.55),
    0 16px 80px rgba(var(--brand-500-rgb), 0.25);
}

.btn-primary:active {
  transform: translateY(-1px) scale(1.01);
}

.btn-pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(var(--brand-500-rgb), 0.5);
  animation: kfPulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

/* =============================================
   HERO — MOCKUP WRAPPER
   ============================================= */
.mockup-float {
  animation: kfFloatSlow 8s ease-in-out infinite;
}

.mockup-glow-ring {
  position: absolute;
  inset: -2px;
  border-radius: 1.25rem;
  background: linear-gradient(135deg,
    rgba(var(--brand-500-rgb), 0.25),
    rgba(194, 155, 66, 0.1),
    rgba(var(--brand-500-rgb), 0.25));
  filter: blur(6px);
  z-index: 0;
  animation: kfGlow 3s ease-in-out infinite alternate;
}

/* =============================================
   SECTIONS — SHARED WRAPPERS (theme-aware)
   -------------------------------------------------------------
   Phase 4.2.3: removidos .section-bg-white / .section-bg-dark
   e variantes -dark de tag/h2/sub. Inversão de cor agora vem
   automaticamente de [data-theme] via tokens do theme.css:
     light → --text-primary = #010E22 ; --text-secondary translúcido
     dark  → --text-primary = #F6F6F6 ; --text-secondary translúcido
   ============================================= */
.section-wrap {
  padding: 5rem 0;
  position: relative;
  background: var(--bg-base);
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .section-wrap {
    padding: 6rem 0;
  }
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--brand-500-rgb), 0.45);
  background: rgba(var(--brand-500-rgb), 0.08);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.section-h2 {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .section-h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .section-h2 { font-size: 2.75rem; }
}

.section-sub {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (min-width: 640px) {
  .section-sub { font-size: 1.125rem; }
}

.section-divider {
  width: 48px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #EDB852, #C29B42);
}

/* =============================================
   DOBRA 2 — VSL
   ============================================= */
.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(1, 14, 34, 0.04);
  border: 1px solid rgba(var(--brand-500-rgb), 0.2);
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(var(--brand-500-rgb), 0.08);
}

.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.play-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 12px rgba(var(--brand-500-rgb), 0.15),
    0 8px 32px rgba(var(--brand-500-rgb), 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-circle:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 0 20px rgba(var(--brand-500-rgb), 0.12),
    0 12px 48px rgba(var(--brand-500-rgb), 0.5);
}

.vsl-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(1, 14, 34, 0.6);
}

.vsl-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.2), rgba(194, 155, 66, 0.1));
  border: 1px solid rgba(var(--brand-500-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #C29B42;
}

/* =============================================
   DOBRA 3 — PROBLEMA
   ============================================= */
.pain-card {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(1, 14, 34, 0.07);
  padding: 2.5rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(1, 14, 34, 0.06);
  transition: all 0.25s ease;
}

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

.pain-item:hover {
  transform: translateX(4px);
}

.pain-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.insight-block {
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.08), rgba(194, 155, 66, 0.04));
  border: 1px solid rgba(var(--brand-500-rgb), 0.25);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

/* =============================================
   DOBRA 4 — SOLUÇÃO
   ============================================= */
.solution-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0;
}

.solution-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
  color: #010E22;
  box-shadow: 0 4px 12px rgba(var(--brand-500-rgb), 0.3);
}

/* =============================================
   DOBRA 5 — COMO FUNCIONA
   ============================================= */
.step-card {
  /* override do DS components.css (que faz grid auto 1fr BEM) —
     esta LP usa classes legadas (.step-icon-wrap, .step-number, h3, p) */
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: white;
  border-radius: 1.25rem;
  border: 1px solid rgba(1, 14, 34, 0.07);
  padding: 1.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #EDB852, #C29B42);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.09),
    0 0 40px rgba(var(--brand-500-rgb), 0.1);
  border-color: rgba(var(--brand-500-rgb), 0.3);
}

.step-card:hover::before {
  opacity: 1;
}

.step-number {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.3), rgba(194, 155, 66, 0.15));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
}

.step-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.15), rgba(194, 155, 66, 0.08));
  border: 1px solid rgba(var(--brand-500-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* =============================================
   DOBRA 6 — ENTREGÁVEIS
   ============================================= */
.deliverable-block {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(1, 14, 34, 0.07);
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.deliverable-block:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.08),
    0 0 30px rgba(var(--brand-500-rgb), 0.08);
  border-color: rgba(var(--brand-500-rgb), 0.25);
}

.deliverable-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  font-size: 0.75rem;
  font-weight: 800;
  color: #010E22;
}

.img-placeholder {
  width: 100%;
  border-radius: 0.875rem;
  background: rgba(1, 14, 34, 0.04);
  border: 1px dashed rgba(1, 14, 34, 0.12);
}

/* =============================================
   DOBRA 7 — BENEFÍCIOS
   ============================================= */
.benefit-card {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(1, 14, 34, 0.07);
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.benefit-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #EDB852, #C29B42);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(var(--brand-500-rgb), 0.1);
  border-color: rgba(var(--brand-500-rgb), 0.3);
}

.benefit-card:hover::after {
  transform: scaleX(1);
}

.benefit-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.15), rgba(194, 155, 66, 0.08));
  border: 1px solid rgba(var(--brand-500-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon-wrap {
  background: linear-gradient(135deg, rgba(var(--brand-500-rgb), 0.25), rgba(194, 155, 66, 0.15));
  box-shadow: 0 4px 20px rgba(var(--brand-500-rgb), 0.25);
}

/* =============================================
   DOBRA 8 — OFERTA
   ============================================= */
.offer-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(var(--brand-500-rgb), 0.25);
  border-radius: 2rem;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(var(--brand-500-rgb), 0.1),
    0 32px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(var(--brand-500-rgb), 0.15);
}

@media (min-width: 640px) {
  .offer-card { padding: 3.5rem; }
}

.offer-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(var(--brand-500-rgb), 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.offer-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.offer-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EDB852, #C29B42);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.price-tag {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #EDB852, #F6D794, #C29B42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 640px) {
  .price-tag { font-size: 5rem; }
}

.btn-offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1.125rem 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #EDB852 0%, #C29B42 100%);
  color: #010E22;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(194, 155, 66, 0.5),
    0 8px 30px rgba(var(--brand-500-rgb), 0.45);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-offer:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(194, 155, 66, 0.7),
    0 12px 50px rgba(var(--brand-500-rgb), 0.6);
}

.badge-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(246, 246, 246, 0.6);
}

/* =============================================
   DOBRA 9 — FAQ
   ============================================= */
.faq-item {
  border-bottom: 1px solid rgba(1, 14, 34, 0.08);
}

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

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #010E22;
  transition: color 0.2s ease;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: #C29B42;
}

.faq-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--brand-500-rgb), 0.1);
  border: 1px solid rgba(var(--brand-500-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Não herda a cor gold do summary (hover/open) — chevron sempre escuro p/ contraste */
  color: #010E22;
}

.faq-item details[open] .faq-chevron {
  background: linear-gradient(135deg, #EDB852, #C29B42);
  border-color: transparent;
  transform: rotate(180deg);
  color: #010E22;
}

.faq-item details[open] summary {
  color: #C29B42;
}

.faq-answer {
  padding: 0 0 1.375rem 0;
  font-size: 0.9375rem;
  color: rgba(1, 14, 34, 0.6);
  line-height: 1.7;
}

.faq-answer p + p {
  margin-top: 0.625rem;
}

.faq-answer ol {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* =============================================
   REDUCED MOTION — kill all moving signature
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .ambient-light--cf,
  .ambient-light--cf-alt,
  .mockup-float,
  .mockup-glow-ring,
  .btn-pulse,
  .animate-glow,
  .eyebrow-dot {
    animation: none !important;
  }

  .lcp-reveal {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #hero .reveal-up,
  #hero .reveal-fade,
  #hero .reveal-right,
  #hero .reveal-scale {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .reveal-up,
  .reveal-fade,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-primary:hover::before {
    animation: none !important;
  }

  .logo-hover,
  .check-item,
  .pain-item,
  .step-card,
  .deliverable-block,
  .benefit-card,
  .play-circle,
  .nav-cta,
  .eyebrow-tag,
  .btn-primary,
  .btn-offer,
  .mobile-cta {
    transition: none !important;
  }

  .logo-hover:hover,
  .check-item:hover,
  .pain-item:hover,
  .step-card:hover,
  .benefit-card:hover,
  .play-circle:hover,
  .nav-cta:hover,
  .eyebrow-tag:hover,
  .btn-primary:hover,
  .btn-offer:hover,
  .mobile-cta:hover {
    transform: none !important;
  }
}

/* =============================================================
   PAGE-LOCAL UTILITIES (Phase 4 — replaces Tailwind v4)
   -------------------------------------------------------------
   Classes used inline no markup desta LP. Mantidos os nomes
   originais (max-w-6xl, text-[#010E22]/60, sm:text-lg, etc.)
   para evitar refactor massivo do HTML. Mobile-first.
   ============================================================= */

/* ---- Body / global ---- */
.cf-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  color: #010E22;
  background: linear-gradient(135deg, #F4F4F4 0%, #EBEBEB 100%);
}

/* ---- Layout / display ---- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.left-0   { left: 0; }
.z-10     { z-index: 10; }

.pointer-events-none { pointer-events: none; }
.overflow-hidden     { overflow: hidden; }
.overflow-x-hidden   { overflow-x: hidden; }
.min-h-screen        { min-height: 100vh; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Flex / order ---- */
.flex-shrink-0 { flex-shrink: 0; }
.self-start    { align-self: flex-start; }
.order-1       { order: 1; }
.order-2       { order: 2; }

/* ---- Sizing ---- */
.w-8  { width: 2rem; }
.h-8  { height: 2rem; }
.w-auto    { width: auto; }
.h-auto    { height: auto; }
.h-full    { height: 100%; }

/* max-width — preset */
.max-w-2xl  { max-width: 672px; }
.max-w-3xl  { max-width: 768px; }
.max-w-4xl  { max-width: 896px; }
.max-w-6xl  { max-width: 1152px; }
.max-w-full { max-width: 100%; }

/* arbitrary max-widths */
.max-w-\[460px\] { max-width: 460px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[540px\] { max-width: 540px; }

/* ---- Spacing scale (Tailwind: 1 = 0.25rem) ---- */
.gap-0    { gap: 0; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-6    { margin-top: 1.5rem; }

.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-7  { margin-bottom: 1.75rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.pt-24 { padding-top: 6rem; }
.pb-5  { padding-bottom: 1.25rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-20 { padding-bottom: 5rem; }
.pl-1  { padding-left: 0.25rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.p-\[6px\] { padding: 6px; }

/* ---- Display / flex (DS já tem, mas garantir aqui também) ---- */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.block        { display: block; }
.hidden       { display: none; }
.flex-col     { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.text-center   { text-align: center; }

/* ---- Grid ---- */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Typography ---- */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }

.text-\[0\.9rem\]      { font-size: 0.9rem; }
.text-\[0\.9375rem\]   { font-size: 0.9375rem; }
.text-\[2rem\]         { font-size: 2rem; line-height: 1.1; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

.tracking-tight   { letter-spacing: -0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }

.uppercase    { text-transform: uppercase; }
.italic       { font-style: italic; }
.line-through { text-decoration: line-through; }

.opacity-70 { opacity: 0.7; }

/* ---- Colors (literais usados no markup) ---- */
.text-\[\#010E22\]      { color: #010E22; }
.text-\[\#010E22\]\/40  { color: rgba(1, 14, 34, 0.40); }
.text-\[\#010E22\]\/50  { color: rgba(1, 14, 34, 0.50); }
.text-\[\#010E22\]\/55  { color: rgba(1, 14, 34, 0.55); }
.text-\[\#010E22\]\/60  { color: rgba(1, 14, 34, 0.60); }
.text-\[\#010E22\]\/65  { color: rgba(1, 14, 34, 0.65); }
.text-\[\#010E22\]\/70  { color: rgba(1, 14, 34, 0.70); }
.text-\[\#010E22\]\/75  { color: rgba(1, 14, 34, 0.75); }
.text-\[\#010E22\]\/80  { color: rgba(1, 14, 34, 0.80); }

.text-\[\#F6F6F6\]      { color: #F6F6F6; }
.text-\[\#F6F6F6\]\/35  { color: rgba(246, 246, 246, 0.35); }
.text-\[\#F6F6F6\]\/40  { color: rgba(246, 246, 246, 0.40); }
.text-\[\#F6F6F6\]\/50  { color: rgba(246, 246, 246, 0.50); }
.text-\[\#F6F6F6\]\/55  { color: rgba(246, 246, 246, 0.55); }
.text-\[\#F6F6F6\]\/80  { color: rgba(246, 246, 246, 0.80); }

.bg-\[\#010E22\] { background-color: #010E22; }
.bg-white        { background-color: #ffffff; }

/* ---- Border / radius / shadow ---- */
.border         { border: 1px solid rgba(1, 14, 34, 0.07); }
.shadow-sm      { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.rounded        { border-radius: 0.25rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-2xl    { border-radius: 1rem; }
.rounded-\[9px\]  { border-radius: 9px; }
.rounded-\[20px\] { border-radius: 20px; }

/* ---- Brand gradient on logo ---- */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--cf-grad-from, #EDB852e6), var(--cf-grad-to, #D89830e6));
}
.from-\[\#EDB852\]\/90 { --cf-grad-from: rgba(237, 184, 82, 0.9); }
.to-\[\#D89830\]\/90   { --cf-grad-to:   rgba(216, 152, 48, 0.9); }
.from-\[\#F4F4F4\]     { --cf-grad-from: #F4F4F4; }
.to-\[\#EBEBEB\]       { --cf-grad-to:   #EBEBEB; }

/* ---- Object fit ---- */
.object-cover { object-fit: cover; }

/* ---- Hero responsivo: text-[XXrem] arbitrários ---- */
.text-\[2\.4rem\]  { font-size: 2.4rem; line-height: 1.1; }
.text-\[2\.2rem\]  { font-size: 2.2rem; line-height: 1.1; }
.text-\[2\.8rem\]  { font-size: 2.8rem; line-height: 1.1; }
.text-\[3\.1rem\]  { font-size: 3.1rem; line-height: 1.1; }

/* ---- Group hover (logo span) ---- */
.group:hover .group-hover\:opacity-70 { opacity: 0.7; }
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms; }

/* =============================================
   RESPONSIVE — sm: 640px, md: 768px, lg: 1024px, xl: 1280px
   ============================================= */
@media (min-width: 640px) {
  .sm\:px-8     { padding-left: 2rem; padding-right: 2rem; }
  .sm\:pt-28    { padding-top: 7rem; }
  .sm\:pb-24    { padding-bottom: 6rem; }
  .sm\:gap-4    { gap: 1rem; }
  .sm\:w-auto   { width: auto; }
  .sm\:block    { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-\[0\.9375rem\] { font-size: 0.9375rem; }
  .sm\:text-\[2\.4rem\]    { font-size: 2.4rem; line-height: 1.1; }
}

@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:hidden      { display: none; }
  .md\:inline-flex { display: inline-flex; }
  .md\:order-1     { order: 1; }
  .md\:order-2     { order: 2; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:max-w-full  { max-width: 100%; }
  .md\:text-2xl    { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-\[2\.2rem\] { font-size: 2.2rem; line-height: 1.1; }
}

@media (min-width: 1024px) {
  .lg\:gap-16 { gap: 4rem; }
  .lg\:gap-20 { gap: 5rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-\[2\.8rem\] { font-size: 2.8rem; line-height: 1.1; }
}

@media (min-width: 1280px) {
  .xl\:gap-20 { gap: 5rem; }
  .xl\:text-\[3\.1rem\] { font-size: 3.1rem; line-height: 1.1; }
}