/* ═══════════════════════════════════════════════════════════
   EFFECTS.CSS — Ultra-Premium Visual Experience Layer
   Loaded AFTER redesign.css · Cinematic grade animations
   ═══════════════════════════════════════════════════════════ */


/* ── KEYFRAMES ─────────────────────────────────────────── */

@keyframes fx-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(0.5deg); }
  75% { transform: translateY(4px) rotate(-0.5deg); }
}

@keyframes fx-pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes fx-glow-breathe {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.75; transform: translateX(-50%) scale(1.08); }
}

@keyframes fx-glow-breathe-center {
  0%, 100% { opacity: 0.3; filter: blur(40px); }
  50% { opacity: 0.65; filter: blur(50px); }
}

@keyframes fx-shimmer-slide {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

@keyframes fx-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fx-badge-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}

@keyframes fx-counter-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 24px rgba(26,127,75,0.40); }
}

@keyframes fx-reveal-up {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fx-reveal-scale {
  from { opacity: 0; transform: scale(0.88); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes fx-hero-text-reveal {
  from { opacity: 0; transform: translateY(32px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes fx-cta-attention {
  0%, 88%, 100% { box-shadow: 0 4px 16px rgba(26,127,75,0.25); }
  94% { box-shadow: 0 4px 40px rgba(26,127,75,0.55), 0 0 80px rgba(26,127,75,0.18); }
}

@keyframes fx-sticky-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes fx-price-pop {
  0%   { transform: scale(0.5); opacity: 0; filter: blur(8px); }
  50%  { transform: scale(1.12); filter: blur(0); }
  75%  { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fx-particle-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.8; }
  92%  { opacity: 0.8; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

@keyframes fx-noise-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-1.5%, -0.8%) scale(1.02); }
  66%  { transform: translate(0.8%, -1.2%) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes fx-stagger-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fx-aurora-shift {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  33%  { transform: translate(-48%, -52%) rotate(120deg) scale(1.1); }
  66%  { transform: translate(-52%, -48%) rotate(240deg) scale(0.9); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes fx-grid-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fx-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes fx-spotlight {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes fx-text-glow-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(74,222,128,0.0); }
  50% { text-shadow: 0 0 40px rgba(74,222,128,0.3), 0 0 80px rgba(74,222,128,0.1); }
}

@keyframes fx-line-expand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes fx-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

@keyframes fx-card-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,127,75,0); }
  50% { box-shadow: 0 0 30px 0 rgba(26,127,75,0.08); }
}

@keyframes fx-rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fx-slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fx-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fx-morph-blob {
  0%   { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  25%  { border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%; }
  50%  { border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%; }
  75%  { border-radius: 60% 40% 40% 60% / 50% 50% 30% 70%; }
  100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
}


/* ── HERO — Cinematic Premium Entrance ─────────────────── */

/* Deep layered gradient background */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(26,127,75,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 40%, #1a4d32 0%, #0e2a1c 40%, #0B1D14 100%) !important;
  overflow: hidden;
}

/* Animated noise texture */
.hero::before {
  animation: fx-noise-drift 12s ease-in-out infinite;
  opacity: 0.035;
}

/* Aurora gradient orb behind hero content */
.hero::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26,127,75,0.14) 0%, rgba(74,222,128,0.04) 40%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  animation: fx-glow-breathe 8s ease-in-out infinite;
}

/* Dot grid pattern overlay on hero */
.hero .container {
  position: relative;
  z-index: 1;
}

/* Hero content — premium cinematic stagger with blur */
.hero__logo {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.badge--live {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero__headline {
  animation: fx-hero-text-reveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both !important;
}
.hero__sub {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}
.hero__social-proof {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}
.hero__cta {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}
.hero__chips {
  animation: fx-hero-text-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.35s both;
}

/* Headline accent line — animated gradient text */
.headline-line--accent {
  background: linear-gradient(90deg, #4ade80, #22c55e, #4ade80, #16a34a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-gradient-shift 6s ease-in-out infinite;
}

/* Mockup — cinematic float with subtle 3D */
.hero__visual {
  animation: fx-reveal-scale 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.mockup-img {
  animation: fx-float-slow 6s ease-in-out infinite;
  animation-delay: 1.8s;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}

/* Mockup glow — premium breathing with morph */
.mockup-glow {
  animation: fx-glow-breathe-center 5s ease-in-out infinite !important;
  opacity: 0.6 !important;
}

/* Hero social proof stars — golden glow */
.hero__stars .st-icons {
  text-shadow: 0 0 12px rgba(251,191,36,0.4);
  transition: text-shadow 0.5s ease;
}
.hero__social-proof:hover .st-icons {
  text-shadow: 0 0 20px rgba(251,191,36,0.6), 0 0 40px rgba(251,191,36,0.2);
}

/* Hero chips — glass morphism hover */
.chip {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
.chip:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
  transform: translateY(-2px);
}

/* Hero value bar — enhanced */
.hero-value-bar {
  position: relative;
}
.vb-new strong {
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.hero-value-bar:hover .vb-new strong {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74,222,128,0.4);
}


/* ── CTA BUTTONS — Premium Glow & Interaction ──────────── */

.btn-primary {
  position: relative;
  overflow: hidden;
  transition: background 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              transform 0.3s var(--ease-out) !important;
}

/* Shimmer sweep on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.btn-primary:hover::after {
  animation: fx-shimmer-slide 0.7s ease-out;
}

/* Attention pulse on hero CTA */
.hero__cta .btn-primary {
  animation: fx-hero-text-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both,
             fx-cta-attention 6s ease-in-out 4s infinite;
}

/* Hero CTA glow halo */
.hero__cta .btn-primary::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--r-btn) + 5px);
  background: linear-gradient(135deg, rgba(26,127,75,0.35), rgba(74,222,128,0.15), rgba(26,127,75,0.35));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  animation: fx-gradient-shift 3s ease-in-out infinite;
}
.hero__cta .btn-primary:hover::before {
  opacity: 1;
}


/* ── STICKY BAR — Glass slide entrance ─────────────────── */

.sticky-cta.is-visible {
  animation: fx-sticky-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sticky-cta__btn {
  position: relative;
  overflow: hidden;
}
.sticky-cta__btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.sticky-cta__btn:hover::after {
  animation: fx-shimmer-slide 0.6s ease-out;
}


/* ── SCROLL REVEAL — Enhanced transitions ──────────────── */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
  filter: blur(2px);
}
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-animate="fade-down"] {
  transform: translateY(-20px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.65s ease;
  filter: blur(1px);
}
[data-animate="fade-down"].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-animate="scale-in"] {
  transform: scale(0.90);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
  filter: blur(3px);
}
[data-animate="scale-in"].is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

[data-animate="slide-left"] {
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animate="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="slide-right"] {
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animate="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay support */
[data-delay="80"]  { transition-delay: 80ms; }
[data-delay="120"] { transition-delay: 120ms; }
[data-delay="140"] { transition-delay: 140ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="280"] { transition-delay: 280ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="360"] { transition-delay: 360ms; }
[data-delay="380"] { transition-delay: 380ms; }
[data-delay="440"] { transition-delay: 440ms; }
[data-delay="520"] { transition-delay: 520ms; }


/* ── SECTION HEADERS — Premium reveal ──────────────────── */

.section-header .overline {
  position: relative;
  display: inline-block;
}

/* Animated underline on overlines when visible */
.section-header.is-visible .overline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform-origin: left;
  animation: fx-line-expand 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Section title em — pulsing glow on dark sections */
.section-title--on-green em {
  animation: fx-text-glow-pulse 4s ease-in-out infinite;
}


/* ── BENEFIT CARDS — Glass Lift & Icon Animation ─────── */

.benefit-card {
  transition: box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out) !important;
  transform: translateY(0) !important;
  transform-style: flat !important;
}
.benefit-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.10), 0 0 0 1px rgba(26,127,75,0.12) !important;
  border-color: rgba(26,127,75,0.25) !important;
}

/* Benefit icon — animate on card visibility */
.benefit-card.is-visible .benefit-icon svg {
  animation: fx-badge-bounce 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Benefit number — fade in with delay */
.benefit-card.is-visible .benefit-num {
  animation: fx-hero-text-reveal 0.5s ease 0.1s both;
}

/* Animated green border-left on hover */
.benefit-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), rgba(74,222,128,0.3));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 0.4s var(--ease-out);
}
.benefit-card:hover::before {
  height: 60%;
}

/* Benefit result tag — slide in */
.benefit-card.is-visible .benefit-result {
  animation: fx-slide-in-left 0.5s ease 0.4s both;
}


/* ── PARA QUIEN — Enhanced card animation ──────────────── */

.pq-col {
  transition: box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out) !important;
}
.pq-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(26,127,75,0.10) !important;
  border-color: rgba(26,127,75,0.22);
}

/* pq-cta-link — shimmer + glow */
.pq-cta-link {
  position: relative;
  overflow: hidden;
}
.pq-cta-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.pq-cta-link:hover::after {
  animation: fx-shimmer-slide 0.6s ease-out;
}

/* VS divider — enhanced */
.pq-vs {
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.pq-divider:hover .pq-vs {
  transform: scale(1.1);
  text-shadow: 0 0 20px rgba(26,127,75,0.3);
}


/* ── BONOS SECTION — Container for decorative elements ── */

.bonos {
  position: relative;
  overflow: hidden;
}
.bonos > .container {
  position: relative;
  z-index: 1;
}

/* ── OFERTA SECTION — Container for decorative elements ── */

.oferta {
  position: relative;
  overflow: hidden;
}
.oferta > .container {
  position: relative;
  z-index: 1;
}

/* ── GALERIA SECTION — Container for decorative elements ── */

.galeria-videos {
  position: relative;
  overflow: hidden;
}
.galeria-videos > .container {
  position: relative;
  z-index: 1;
}


/* ── BONO CARDS — Premium Holographic Hover ──────────── */

.bono-card {
  transition: border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
}
.bono-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.30),
    0 0 50px rgba(26,127,75,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border-color: rgba(26,127,75,0.40);
}

/* Holographic shimmer line */
.bono-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), rgba(74,222,128,0.03), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 10;
}
.bono-card:hover::after {
  animation: fx-shimmer-slide 1s ease-out;
}

/* Bono ribbon — scale on hover */
.bono-ribbon {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
}
.bono-card:hover .bono-ribbon {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(26,127,75,0.3);
}

/* Bono sticker "GRATIS" — glow + scale */
.sticker-free {
  transition: text-shadow 0.4s ease, transform 0.4s ease;
}
.bono-card:hover .sticker-free {
  text-shadow: 0 0 16px rgba(74,222,128,0.6), 0 0 32px rgba(74,222,128,0.2);
  transform: scale(1.05);
}

/* Bono glow — enhanced breathing */
.bono-glow {
  animation: fx-glow-breathe-center 5s ease-in-out infinite !important;
}


/* ── PRECIO / OFERTA — Dramatic Price Reveal ─────────── */

/* Price number — dramatic pop animation */
.precio-numero.is-visible {
  animation: fx-price-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Counter glow pulse on price */
.precio-numero {
  transition: text-shadow 0.5s ease, transform 0.3s ease;
}
.precio-numero:hover {
  text-shadow: 0 0 30px rgba(26,127,75,0.45), 0 0 60px rgba(26,127,75,0.15) !important;
  transform: scale(1.05);
}

/* Price block — premium hover */
.precio-bloque {
  transition: box-shadow 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
  position: relative;
}
.precio-bloque:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(26,127,75,0.08);
}

/* Animated gradient border on precio */
.precio-bloque::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-card) + 1px);
  background: linear-gradient(135deg, rgba(26,127,75,0.20), transparent, rgba(74,222,128,0.15), transparent);
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: fx-gradient-shift 4s ease-in-out infinite;
}
.precio-bloque:hover::before {
  opacity: 1;
}

/* Oferta CTA button — enhanced glow ring */
.oferta-cta-btn {
  position: relative;
}
.oferta-cta-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--r-btn) + 4px);
  background: linear-gradient(135deg, rgba(26,127,75,0.35), rgba(74,222,128,0.18), rgba(26,127,75,0.35));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  animation: fx-gradient-shift 3s ease-in-out infinite;
}
.oferta-cta-btn:hover::before {
  opacity: 1;
}

/* Live badge pulse — enhanced ring */
.oferta-live-dot {
  animation: fx-pulse-ring 1.8s ease infinite !important;
}

/* Include chips — hover lift */
.include-chip {
  transition: border-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              transform 0.35s var(--ease-out);
}
.include-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border-color: rgba(26,127,75,0.20);
}

/* Savings tag — enhanced bounce */
.oferta-savings__tag {
  animation: fx-badge-bounce 2.5s ease-in-out 1.5s infinite;
}

/* Valor rows — stagger animation */
.valor-row {
  transition: background 0.3s ease;
}
.valor-row:hover {
  background: rgba(26,127,75,0.03);
}

/* Guarantee badge — trust hover */
.garantia-badge {
  transition: box-shadow 0.35s var(--ease-out),
              transform 0.35s var(--ease-out);
}
.garantia-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(26,127,75,0.15);
}


/* ── AUTORIDAD / ABOUT — Premium Photo & Brands ─────── */

.photo-frame {
  transition: box-shadow 0.5s var(--ease-out),
              transform 0.5s var(--ease-out) !important;
}
.photo-frame:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 0 0 4px var(--accent-light), 0 24px 60px rgba(26,127,75,0.15) !important;
}

/* Brand logos — enhanced fade + scale */
.brand-logo-svg {
  transition: opacity 0.5s var(--ease-out),
              transform 0.4s var(--ease-out),
              filter 0.4s ease !important;
}
.brand-logo-svg:hover {
  transform: scale(1.12);
  filter: brightness(1.2);
}

/* Play button — pulse ring on hover */
.play-btn-circle {
  position: relative;
  transition: transform 0.4s var(--ease-out),
              box-shadow 0.4s ease;
}


/* ── FAQ — Smooth Animated Accordion ──────────────────── */

.faq-answer {
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease;
}

.faq-question {
  transition: color 0.3s var(--ease-out),
              background 0.3s ease,
              padding-left 0.3s ease;
}
.faq-question:hover {
  background: rgba(26,127,75,0.03);
  padding-left: 4px;
}

.faq-icon {
  transition: transform 0.4s var(--ease-out),
              color 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
  color: var(--accent);
}

/* FAQ item — subtle left border on open */
.faq-item {
  transition: border-color 0.3s ease;
  border-left: 3px solid transparent;
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-left-color: var(--accent);
}


/* ── CLOSING CTA — Cinematic Atmosphere ────────────────── */

.section--green-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(26,127,75,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, #1a4d32 0%, #0e2a1c 50%, #0B1D14 100%) !important;
}

/* Ambient morphing blob */
.section--green-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(26,127,75,0.12) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: fx-morph-blob 15s ease-in-out infinite, fx-glow-breathe 6s ease-in-out infinite;
}
.section--green-cta .container {
  position: relative;
  z-index: 1;
}

/* CTA final headline — gradient text on em */
.cta-final__headline em {
  background: linear-gradient(90deg, #4ade80, #22c55e, #4ade80);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-gradient-shift 5s ease-in-out infinite;
}

/* CTA final button — premium glow */
.cta-final .btn-primary {
  animation: fx-cta-attention 5s ease-in-out 2s infinite !important;
}
.cta-final .btn-primary:hover {
  box-shadow: 0 8px 40px rgba(26,127,75,0.50), 0 0 80px rgba(26,127,75,0.15) !important;
}


/* ── TESTIMONIAL CARDS — Premium Hover ───────────────── */

.testi-card {
  transition: border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out),
              transform 0.45s var(--ease-out) !important;
}
.testi-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(26,127,75,0.30) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,127,75,0.10) !important;
}

/* Star rating golden glow on hover */
.testi-card:hover .st-icons {
  text-shadow: 0 0 12px rgba(251,191,36,0.5), 0 0 24px rgba(251,191,36,0.2);
}


/* ── FOOTER — Subtle premium interactions ──────────────── */

.social-link {
  transition: color 0.3s var(--ease-out),
              transform 0.3s var(--ease-out) !important;
}
.social-link:hover {
  transform: translateY(-3px);
}

.footer__links a {
  position: relative;
}
.footer__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.30);
  transition: width 0.3s var(--ease-out);
}
.footer__links a:hover::after {
  width: 100%;
}


/* ── SCROLL PROGRESS BAR ─────────────────────────────── */

.fx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #4ade80, var(--accent));
  background-size: 200% 100%;
  z-index: 10000;
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
  pointer-events: none;
  animation: fx-gradient-shift 3s ease-in-out infinite;
}


/* ── CURSOR GLOW (desktop only) ──────────────────────── */

.fx-cursor-glow {
  position: fixed;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,127,75,0.07) 0%, rgba(26,127,75,0.02) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  will-change: left, top;
  mix-blend-mode: screen;
}


/* ── SECTION DIVIDERS — Animated gradient lines ────────── */

.section--white + .section--green::before,
.section--green + .section--white::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(26,127,75,0.18) 50%, transparent 95%);
}


/* ── SECTION ENTRANCE ─────────────────────────────────── */

.section {
  transition: opacity 0.6s ease;
}
.section.fx-section-entered {
  opacity: 1;
}


/* ── GEAR STRIP — Enhanced marquee ───────────────────── */

.fpv-gear-strip {
  opacity: 0.6;
  transition: opacity 0.6s ease;
}
.fpv-gear-strip:hover {
  opacity: 1;
}


/* ── INTRO OVERLAY — Enhanced entrance ───────────────── */

.intro-logo-img {
  filter: drop-shadow(0 0 20px rgba(26,127,75,0.3));
}


/* ── GLOBAL MICRO-INTERACTIONS ─────────────────────────── */

/* All cards get subtle glow animation when visible */
.benefit-card.is-visible,
.bono-card.is-visible,
.pq-col.is-visible {
  animation: fx-card-glow 4s ease-in-out 1s infinite;
}

/* Animated counting numbers */
.precio-numero.is-counting {
  animation: fx-counter-glow 1.2s ease-in-out;
}

/* Section entered — subtle fade */
.fx-section-entered {
  opacity: 1 !important;
}


/* ── 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;
  }
  .fx-cursor-glow,
  .fx-scroll-progress {
    display: none !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ── MOBILE OPTIMIZATIONS ────────────────────────────── */

@media (max-width: 768px) {
  /* Disable cursor glow on mobile */
  .fx-cursor-glow { display: none !important; }

  /* Reduce hero stagger delays for speed */
  .hero__logo       { animation-delay: 0.05s; }
  .badge--live      { animation-delay: 0.15s; }
  .hero__headline   { animation-delay: 0.25s !important; }
  .hero__sub        { animation-delay: 0.35s; }
  .hero__social-proof { animation-delay: 0.45s; }
  .hero__cta        { animation-delay: 0.55s; }
  .hero__chips      { animation-delay: 0.65s; }

  /* Reduce hover transforms on mobile */
  .benefit-card:hover,
  .bono-card:hover,
  .testi-card:hover,
  .video-card:hover,
  .pq-col:hover { transform: none !important; }

  /* Hide ambient glow orbs on mobile (performance) */
  .hero::after,
  .section--green-cta::after {
    display: none;
  }

  /* Simplify blur on reveals for performance */
  [data-animate="fade-up"],
  [data-animate="scale-in"] {
    filter: none;
  }

  /* Remove card glow animation on mobile */
  .benefit-card.is-visible,
  .bono-card.is-visible,
  .pq-col.is-visible {
    animation: none;
  }

  /* Benefit card left border on mobile */
  .benefit-card::before {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Even faster hero entrance on small screens */
  .hero__logo       { animation-delay: 0s; }
  .badge--live      { animation-delay: 0.1s; }
  .hero__headline   { animation-delay: 0.15s !important; }
  .hero__sub        { animation-delay: 0.25s; }
  .hero__social-proof { animation-delay: 0.3s; }
  .hero__cta        { animation-delay: 0.4s; }
  .hero__chips      { animation-delay: 0.45s; }
}


/* ═══════════════════════════════════════════════════════════
   DECORATIVE HTML ELEMENTS — Visual Enhancement Layer
   Dot grids · Gradient orbs · Section dividers · Noise
   ═══════════════════════════════════════════════════════════ */


/* ── DOT GRID PATTERN — Tech/premium background texture ── */

.fx-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(74,222,128,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;
  animation: fx-grid-fade 1.8s ease 1.2s forwards;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

.fx-hero-grid--cta {
  background-size: 28px 28px;
  background-image: radial-gradient(circle, rgba(74,222,128,0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 10%, transparent 65%);
  animation: fx-grid-fade 1.5s ease 0.5s forwards;
}


/* ── AMBIENT GRADIENT ORBS — Floating atmosphere ───────── */

.fx-ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  will-change: transform;
}

/* Hero orbs */
.fx-ambient-orb--hero-1 {
  top: 10%;
  left: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(26,127,75,0.10) 0%, transparent 70%);
  animation: fx-float-slow 18s ease-in-out infinite, fx-glow-breathe-center 8s ease-in-out infinite;
}
.fx-ambient-orb--hero-2 {
  bottom: -5%;
  right: -5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(74,222,128,0.07) 0%, transparent 65%);
  animation: fx-float-slow 22s ease-in-out 3s infinite, fx-glow-breathe-center 10s ease-in-out 2s infinite;
}

/* Bonos orbs */
.fx-ambient-orb--bonos-1 {
  top: -10%;
  right: -12%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(26,127,75,0.10) 0%, rgba(74,222,128,0.03) 40%, transparent 70%);
  animation: fx-float-slow 20s ease-in-out infinite, fx-glow-breathe-center 9s ease-in-out infinite;
}
.fx-ambient-orb--bonos-2 {
  bottom: -15%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 65%);
  animation: fx-float-slow 25s ease-in-out 5s infinite;
}

/* Oferta orb (light section — very subtle) */
.fx-ambient-orb--oferta {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(26,127,75,0.04) 0%, transparent 65%);
  filter: blur(80px);
  animation: fx-glow-breathe-center 12s ease-in-out infinite;
}

/* Galeria orbs */
.fx-ambient-orb--galeria-1 {
  top: 5%;
  left: -8%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(26,127,75,0.08) 0%, transparent 65%);
  animation: fx-float-slow 18s ease-in-out 2s infinite, fx-glow-breathe-center 9s ease-in-out infinite;
}
.fx-ambient-orb--galeria-2 {
  bottom: 0;
  right: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 60%);
  animation: fx-float-slow 22s ease-in-out 4s infinite;
}

/* CTA Final orbs */
.fx-ambient-orb--cta-1 {
  top: -20%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(26,127,75,0.12) 0%, rgba(74,222,128,0.04) 40%, transparent 70%);
  animation: fx-float-slow 16s ease-in-out infinite, fx-morph-blob 20s ease-in-out infinite, fx-glow-breathe-center 7s ease-in-out infinite;
}
.fx-ambient-orb--cta-2 {
  bottom: -25%;
  right: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 60%);
  animation: fx-float-slow 20s ease-in-out 6s infinite, fx-morph-blob 18s ease-in-out 3s infinite;
}


/* ── SECTION DIVIDERS — Animated gradient separators ──── */

.fx-section-divider {
  position: relative;
  height: 1px;
  overflow: visible;
  z-index: 2;
}

.fx-section-divider__line {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(26,127,75,0.20) 30%, rgba(74,222,128,0.12) 50%, rgba(26,127,75,0.20) 70%, transparent 95%);
  background-size: 200% 100%;
  animation: fx-gradient-shift 6s ease-in-out infinite;
}

/* Glow effect on dark→light or light→dark transitions */
.fx-section-divider__glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(26,127,75,0.08) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(10px);
}

/* Dark section transitions — more prominent */
.fx-section-divider--to-dark .fx-section-divider__line {
  background: linear-gradient(90deg, transparent 3%, rgba(26,127,75,0.30) 30%, rgba(74,222,128,0.18) 50%, rgba(26,127,75,0.30) 70%, transparent 97%);
  background-size: 200% 100%;
}
.fx-section-divider--to-dark .fx-section-divider__glow {
  width: 400px;
  height: 50px;
  background: radial-gradient(ellipse, rgba(26,127,75,0.12) 0%, transparent 70%);
  top: -25px;
}

.fx-section-divider--from-dark .fx-section-divider__line {
  background: linear-gradient(90deg, transparent 3%, rgba(26,127,75,0.25) 30%, rgba(74,222,128,0.15) 50%, rgba(26,127,75,0.25) 70%, transparent 97%);
  background-size: 200% 100%;
}
.fx-section-divider--from-dark .fx-section-divider__glow {
  width: 400px;
  height: 50px;
  background: radial-gradient(ellipse, rgba(26,127,75,0.10) 0%, transparent 70%);
  top: -25px;
}


/* ── NOISE TEXTURE OVERLAY — Grain for dark sections ──── */

.fx-noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: fx-noise-drift 14s ease-in-out infinite;
  mix-blend-mode: overlay;
}


/* ── DECORATIVE ELEMENTS — Responsive ──────────────────── */

@media (max-width: 768px) {
  /* Reduce orb sizes on mobile for performance */
  .fx-ambient-orb { filter: blur(40px); }
  .fx-ambient-orb--hero-1,
  .fx-ambient-orb--hero-2 { display: none; }
  .fx-ambient-orb--bonos-1 { width: 300px; height: 300px; }
  .fx-ambient-orb--bonos-2 { display: none; }
  .fx-ambient-orb--galeria-1 { width: 280px; height: 280px; }
  .fx-ambient-orb--galeria-2 { display: none; }
  .fx-ambient-orb--cta-1 { width: 300px; height: 300px; }
  .fx-ambient-orb--cta-2 { display: none; }
  .fx-ambient-orb--oferta { width: 350px; height: 250px; }

  /* Simplify dot grid on mobile */
  .fx-hero-grid { background-size: 40px 40px; }
  .fx-hero-grid--cta { display: none; }

  /* Simplify dividers on mobile */
  .fx-section-divider__glow { display: none; }

  /* Reduce noise intensity on mobile */
  .fx-noise-overlay { opacity: 0.02; }
}

@media (max-width: 480px) {
  /* Hide all orbs on very small screens */
  .fx-ambient-orb { display: none; }
  .fx-hero-grid { display: none; }
  .fx-noise-overlay { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   ENHANCED SECTIONS — Apple/Tesla-grade visual layer
   Unified scroll reveal · VSL · Beneficios · Para-Quien · Oferta · Autoridad
   ═══════════════════════════════════════════════════════════ */


/* ── UNIFIED SCROLL REVEAL — Apple/Tesla signature ───────
   ONE elegant effect: fade + gentle lift + subtle blur clear
   Applied via [data-reveal] attribute, smooth cubic-bezier */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Smooth page scroll behavior (Apple-style) */
html {
  scroll-behavior: smooth;
}

/* Reduced motion compliance */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════
   VSL SECTION — Video Sales Letter placeholder
   ═══════════════════════════════════════════════════════════ */

@keyframes fx-vsl-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 0.9; }
}
@keyframes fx-vsl-ring-wave {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes fx-vsl-drone-fly {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25%      { transform: translate(-8px, -4px) rotate(1deg); }
  50%      { transform: translate(6px, -8px) rotate(-1deg); }
  75%      { transform: translate(-4px, 4px) rotate(2deg); }
}
@keyframes fx-vsl-rec-blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0.3; }
}
@keyframes fx-vsl-border-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.vsl-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(26,127,75,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #0B1D14 0%, #0e2a1c 50%, #0B1D14 100%);
}
.vsl-section > .vsl-container {
  position: relative;
  z-index: 2;
}
.fx-ambient-orb--vsl-1 {
  top: -10%;
  left: -8%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(26,127,75,0.12) 0%, transparent 65%);
  animation: fx-float-slow 20s ease-in-out infinite, fx-glow-breathe-center 9s ease-in-out infinite;
}
.fx-ambient-orb--vsl-2 {
  bottom: -15%;
  right: -8%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 60%);
  animation: fx-float-slow 24s ease-in-out 3s infinite;
}

.vsl-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.vsl-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.vsl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  padding: 0.5rem 0.95rem;
  background: rgba(26,127,75,0.15);
  border: 1px solid rgba(26,127,75,0.28);
  border-radius: 999px;
  margin-bottom: 1.15rem;
}
.vsl-eyebrow__dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(74,222,128,0.8);
  animation: fx-vsl-rec-blink 1.6s ease-in-out infinite;
}
.vsl-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
  margin: 0;
}
.vsl-title em {
  background: linear-gradient(90deg, #4ade80, #22c55e, #4ade80);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-gradient-shift 5s ease-in-out infinite;
  font-style: normal;
}

.vsl-wrap {
  position: relative;
}

/* Glow behind video */
.vsl-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(26,127,75,0.25) 0%, rgba(74,222,128,0.10) 40%, transparent 75%);
  filter: blur(40px);
  z-index: 0;
  animation: fx-glow-breathe-center 6s ease-in-out infinite;
}

/* Animated border ring */
.vsl-ring {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: conic-gradient(from 0deg, rgba(26,127,75,0.5), rgba(74,222,128,0.25), rgba(26,127,75,0.5), transparent 50%, rgba(26,127,75,0.5));
  animation: fx-vsl-border-rotate 8s linear infinite;
  z-index: 1;
  opacity: 0.6;
}
.vsl-ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #0B1D14;
  border-radius: 18px;
}

/* Video player (placeholder) */
.vsl-player {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow:
    0 25px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease;
}
.vsl-player:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    0 35px 100px rgba(0,0,0,0.6),
    0 0 0 1px rgba(74,222,128,0.20),
    0 0 80px rgba(26,127,75,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Cinematic scene as poster */
.vsl-poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.vsl-scene {
  position: absolute;
  inset: 0;
}
.vsl-scene__sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      #0c1c2e 0%,
      #1e3a5f 20%,
      #c7551f 55%,
      #f4b77a 75%,
      #2a4a3a 95%,
      #0d2a1c 100%);
}
.vsl-scene__sun {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, #ffe5a8 0%, #ff9a4b 40%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(2px);
  box-shadow: 0 0 80px rgba(255,154,75,0.6);
}
.vsl-scene__mountain {
  position: absolute;
  bottom: 0;
  width: 60%;
  height: 45%;
  background: linear-gradient(180deg, #1a3d2a 0%, #0d2a1c 100%);
  clip-path: polygon(0 100%, 50% 15%, 100% 100%);
}
.vsl-scene__mountain--1 {
  left: -10%;
  height: 55%;
  opacity: 0.95;
  filter: brightness(0.85);
}
.vsl-scene__mountain--2 {
  left: 25%;
  height: 60%;
  width: 55%;
  opacity: 1;
  z-index: 2;
}
.vsl-scene__mountain--3 {
  right: -15%;
  height: 50%;
  opacity: 0.9;
  filter: brightness(0.75);
}
.vsl-scene__drone {
  position: absolute;
  top: 30%;
  right: 30%;
  z-index: 3;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  animation: fx-vsl-drone-fly 6s ease-in-out infinite;
}

/* HUD cinematic corners */
.vsl-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.vsl-hud__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.8);
}
.vsl-hud__corner--tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.vsl-hud__corner--tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.vsl-hud__corner--bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.vsl-hud__corner--br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.vsl-hud__rec {
  position: absolute;
  top: 20px;
  right: 56px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.9);
  font-family: 'Courier New', Courier, monospace;
}
.vsl-hud__rec-dot {
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,68,68,0.8);
  animation: fx-vsl-rec-blink 1.2s ease-in-out infinite;
}
.vsl-hud__timecode {
  position: absolute;
  bottom: 24px;
  left: 56px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
  font-family: 'Courier New', Courier, monospace;
  background: rgba(0,0,0,0.35);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Noise grain */
.vsl-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Play button with ripple rings */
.vsl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
.vsl-play__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: fx-vsl-ring-wave 2.4s ease-out infinite;
}
.vsl-play__ring--2 { animation-delay: 0.8s; }
.vsl-play__ring--3 { animation-delay: 1.6s; }
.vsl-play__btn {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0B1D14;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.3),
    inset 0 2px 0 rgba(255,255,255,0.9);
  animation: fx-vsl-ring-pulse 3s ease-in-out infinite;
  backdrop-filter: blur(8px);
}
.vsl-play__btn svg { margin-left: 4px; }
.vsl-player:hover .vsl-play__btn {
  transform: scale(1.1);
  background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.9));
  box-shadow:
    0 15px 50px rgba(0,0,0,0.5),
    0 0 0 1px rgba(74,222,128,0.4),
    0 0 40px rgba(74,222,128,0.3),
    inset 0 2px 0 rgba(255,255,255,1);
}

/* Duration badge */
.vsl-duration {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 6;
}

.vsl-caption {
  margin-top: 1.25rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}
.vsl-caption svg { color: rgba(74,222,128,0.7); }


/* ═══════════════════════════════════════════════════════════
   BENEFICIOS — Enhanced visuals
   ═══════════════════════════════════════════════════════════ */

.beneficios {
  position: relative;
  overflow: hidden;
}
.beneficios > .container { position: relative; z-index: 2; }

.beneficios-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.beneficios-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
}
.beneficios-shape--1 {
  top: 10%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(26,127,75,0.09) 0%, transparent 70%);
  animation: fx-float-slow 22s ease-in-out infinite;
}
.beneficios-shape--2 {
  bottom: 15%;
  right: -12%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(74,222,128,0.07) 0%, transparent 65%);
  animation: fx-float-slow 28s ease-in-out 5s infinite;
}
.beneficios-shape--3 {
  top: 50%;
  left: 40%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(26,127,75,0.05) 0%, transparent 60%);
  animation: fx-glow-breathe-center 14s ease-in-out infinite;
}
.beneficios-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,127,75,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,127,75,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 75%);
  opacity: 0.5;
}

.beneficios-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(26,127,75,0.06);
  border: 1px solid rgba(26,127,75,0.15);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(26,127,75,0.9);
}
.beneficios-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.beneficios-meta__dot {
  width: 4px;
  height: 4px;
  background: rgba(26,127,75,0.4);
  border-radius: 50%;
}

/* Enhanced benefit cards */
.benefit-grid--enhanced {
  position: relative;
}
.benefit-card--enhanced {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Animated gradient glow on card hover */
.benefit-card--enhanced::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg), transparent 0deg, rgba(26,127,75,0.4) 90deg, transparent 180deg);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
  animation: fx-vsl-border-rotate 4s linear infinite;
}
.benefit-card--enhanced:hover::after { opacity: 0.8; }
/* Number badge enhanced */
.benefit-card--enhanced .benefit-num {
  background: linear-gradient(135deg, rgba(26,127,75,0.12), rgba(74,222,128,0.05));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3.5rem !important;
  font-weight: 900;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease;
}
.benefit-card--enhanced:hover .benefit-num {
  transform: scale(1.1) rotate(-3deg);
  filter: drop-shadow(0 4px 16px rgba(26,127,75,0.35));
}
/* Icon container enhanced */
.benefit-card--enhanced .benefit-icon {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.benefit-card--enhanced .benefit-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(26,127,75,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 50%;
}
.benefit-card--enhanced:hover .benefit-icon::before { opacity: 1; }
.benefit-card--enhanced:hover .benefit-icon { transform: scale(1.12) translateY(-2px); }


/* ═══════════════════════════════════════════════════════════
   PARA-QUIEN — Enhanced dual-column visual comparison
   ═══════════════════════════════════════════════════════════ */

@keyframes fx-pq-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.4); opacity: 0.3; }
}
@keyframes fx-pq-check-in {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.para-quien--enhanced {
  position: relative;
  overflow: hidden;
}
.para-quien--enhanced > .container { position: relative; z-index: 2; }

.pq-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.pq-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.pq-shape--yes {
  top: 30%;
  left: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(26,127,75,0.10) 0%, transparent 65%);
  animation: fx-float-slow 24s ease-in-out infinite;
}
.pq-shape--no {
  top: 30%;
  right: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(239,68,68,0.04) 0%, transparent 65%);
  animation: fx-float-slow 26s ease-in-out 3s infinite;
}
.pq-connector-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,127,75,0.20) 25%,
    rgba(26,127,75,0.30) 50%,
    rgba(239,68,68,0.20) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: fx-gradient-shift 8s ease-in-out infinite;
  opacity: 0.5;
}

.pq-grid--enhanced {
  position: relative;
  z-index: 1;
}
.pq-col--enhanced {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)) !important;
  backdrop-filter: blur(12px);
  border-radius: 18px !important;
  padding: 2rem !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.04),
    0 0 0 1px rgba(0,0,0,0.04) !important;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease, border-color 0.5s ease !important;
}
.pq-col--enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--pq-accent, #1A7F4B), transparent);
  opacity: 0.7;
}
.pq-col--yes.pq-col--enhanced { --pq-accent: #1A7F4B; }
.pq-col--no.pq-col--enhanced { --pq-accent: rgba(100,116,139,0.5); }
.pq-col--enhanced:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.08),
    0 0 0 1px rgba(26,127,75,0.15) !important;
}

.pq-col__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pq-col__icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}
.pq-col__icon--yes {
  background: linear-gradient(135deg, #1A7F4B 0%, #22c55e 100%);
  box-shadow: 0 4px 14px rgba(26,127,75,0.35);
}
.pq-col__icon--no {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 14px rgba(100,116,139,0.25);
}
.pq-col__icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 2px solid rgba(26,127,75,0.4);
  animation: fx-pq-pulse 2.2s ease-in-out infinite;
}
.pq-col__icon-ring--no {
  border-color: rgba(100,116,139,0.3);
}
.pq-col__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A7F4B;
  margin-bottom: 0.2rem;
}
.pq-col__label--no { color: #64748b; }
.pq-col__title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: rgba(0,0,0,0.85) !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.pq-list--enhanced {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem !important;
}
.pq-list--enhanced li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0 !important;
  border: none !important;
  line-height: 1.5;
  color: rgba(0,0,0,0.75);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.pq-col--enhanced.is-revealed .pq-list--enhanced li {
  opacity: 1;
  transform: translateX(0);
}
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(1) { transition-delay: 0.1s; }
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(2) { transition-delay: 0.18s; }
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(3) { transition-delay: 0.26s; }
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(4) { transition-delay: 0.34s; }
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(5) { transition-delay: 0.42s; }
.pq-col--enhanced.is-revealed .pq-list--enhanced li:nth-child(6) { transition-delay: 0.50s; }

.pq-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  color: white;
}
.pq-item-icon--yes {
  background: linear-gradient(135deg, #1A7F4B, #22c55e);
  box-shadow: 0 2px 6px rgba(26,127,75,0.3);
}
.pq-item-icon--no {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: 0 2px 6px rgba(100,116,139,0.2);
}

.pq-col__footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(26,127,75,0.10), rgba(74,222,128,0.05));
  color: #1A7F4B;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pq-col__footer--no {
  background: linear-gradient(135deg, rgba(100,116,139,0.10), rgba(148,163,184,0.05));
  color: #64748b;
}

.pq-divider--enhanced {
  position: relative;
  align-self: center;
}
.pq-vs--enhanced {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(15,23,42,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.pq-divider__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: 2px solid rgba(15,23,42,0.2);
  border-radius: 50%;
  animation: fx-pq-pulse 2.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════
   OFERTA — Enhanced background (not flat white)
   ═══════════════════════════════════════════════════════════ */

@keyframes fx-oferta-blob {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 42% 58% 70% 30% / 45% 30% 70% 55%; }
  33%      { transform: translate(-10px, -15px) scale(1.08) rotate(120deg); border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
  66%      { transform: translate(12px, -5px) scale(0.95) rotate(240deg); border-radius: 30% 70% 40% 60% / 60% 40% 60% 40%; }
}
@keyframes fx-oferta-shape-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(8deg); }
}
@keyframes fx-oferta-dot-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

.oferta--enhanced {
  position: relative;
  /* Override flat white with layered gradients */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(26,127,75,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 90%, rgba(74,222,128,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(26,127,75,0.03) 0%, transparent 70%),
    linear-gradient(180deg, #fafbfa 0%, #f4f7f5 50%, #fafbfa 100%) !important;
}

.oferta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.oferta-bg__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(26,127,75,0.025) 0%, transparent 60%);
}
.oferta-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,127,75,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,127,75,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 25%, transparent 75%);
  opacity: 0.7;
}

.oferta-shape {
  position: absolute;
  pointer-events: none;
}
/* Large morphing blob — top left */
.oferta-shape--blob-1 {
  top: 8%;
  left: -8%;
  width: 340px;
  height: 340px;
  background: linear-gradient(135deg, rgba(26,127,75,0.08), rgba(74,222,128,0.04));
  filter: blur(40px);
  animation: fx-oferta-blob 20s ease-in-out infinite;
}
/* Second blob — bottom right */
.oferta-shape--blob-2 {
  bottom: 5%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(26,127,75,0.04));
  filter: blur(50px);
  animation: fx-oferta-blob 26s ease-in-out 4s infinite;
}
/* Outlined ring — top right */
.oferta-shape--ring {
  top: 12%;
  right: 8%;
  width: 140px;
  height: 140px;
  border: 2px solid rgba(26,127,75,0.12);
  border-radius: 50%;
  animation: fx-oferta-shape-float 12s ease-in-out infinite, fx-rotate-slow 40s linear infinite;
}
.oferta-shape--ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(26,127,75,0.18);
  border-radius: 50%;
}
/* Rotated square — mid left */
.oferta-shape--square {
  top: 55%;
  left: 5%;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(26,127,75,0.15);
  border-radius: 14px;
  transform: rotate(25deg);
  animation: fx-oferta-shape-float 10s ease-in-out 2s infinite;
}
.oferta-shape--square::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: rgba(26,127,75,0.04);
  border-radius: 8px;
}
/* Triangle — bottom left */
.oferta-shape--triangle {
  bottom: 20%;
  left: 10%;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, rgba(26,127,75,0.1), rgba(74,222,128,0.05));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: fx-oferta-shape-float 14s ease-in-out 1s infinite;
}
/* Diagonal gradient accent line */
.oferta-bg__diagonal {
  position: absolute;
  top: 20%;
  right: -5%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,127,75,0.25), transparent);
  transform: rotate(-18deg);
  filter: blur(0.5px);
}
/* Constellation dots */
.oferta-dots {
  position: absolute;
  inset: 0;
}
.oferta-dots span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #1A7F4B;
  border-radius: 50%;
  opacity: 0.3;
  animation: fx-oferta-dot-twinkle 3s ease-in-out infinite;
}
.oferta-dots span:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.oferta-dots span:nth-child(2) { top: 25%; left: 75%; animation-delay: 0.4s; width: 3px; height: 3px; }
.oferta-dots span:nth-child(3) { top: 45%; left: 15%; animation-delay: 0.8s; width: 5px; height: 5px; }
.oferta-dots span:nth-child(4) { top: 60%; left: 85%; animation-delay: 1.2s; }
.oferta-dots span:nth-child(5) { top: 80%; left: 30%; animation-delay: 1.6s; width: 3px; height: 3px; }
.oferta-dots span:nth-child(6) { top: 10%; left: 55%; animation-delay: 2.0s; }
.oferta-dots span:nth-child(7) { top: 70%; left: 60%; animation-delay: 2.4s; width: 5px; height: 5px; }
.oferta-dots span:nth-child(8) { top: 35%; left: 45%; animation-delay: 0.2s; width: 3px; height: 3px; }
.oferta-dots span:nth-child(9) { top: 90%; left: 70%; animation-delay: 0.6s; }
.oferta-dots span:nth-child(10) { top: 50%; left: 92%; animation-delay: 1.0s; width: 3px; height: 3px; }
.oferta-dots span:nth-child(11) { top: 85%; left: 10%; animation-delay: 1.4s; }
.oferta-dots span:nth-child(12) { top: 20%; left: 8%; animation-delay: 1.8s; width: 5px; height: 5px; }


/* ═══════════════════════════════════════════════════════════
   AUTORIDAD — Enhanced photo frame (larger, rectangular, cinematic)
   ═══════════════════════════════════════════════════════════ */

@keyframes fx-photo-accent-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

.autoridad-layout--hero {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) 1.1fr !important;
  gap: 4rem !important;
  align-items: center;
}

.autoridad__photo--large {
  position: relative;
}

/* Corner accents */
.photo-accent {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid #1A7F4B;
  z-index: 3;
  pointer-events: none;
  animation: fx-photo-accent-pulse 3s ease-in-out infinite;
}
.photo-accent--tl {
  top: -14px;
  left: -14px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 12px;
}
.photo-accent--br {
  bottom: -14px;
  right: -14px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 12px;
  animation-delay: 1.5s;
}

/* Floating badges around photo */
.photo-badge {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  background: white;
  border-radius: 18px;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  padding: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
}
.photo-badge:hover {
  transform: translateY(-4px) scale(1.05);
}
.photo-badge__num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #1A7F4B;
  line-height: 1;
  letter-spacing: -0.02em;
}
.photo-badge__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin-top: 0.2rem;
  text-align: center;
}
.photo-badge--years {
  top: -18px;
  right: -22px;
  animation: fx-float-slow 7s ease-in-out infinite;
}
.photo-badge--brands {
  bottom: -18px;
  left: -22px;
  animation: fx-float-slow 7s ease-in-out 2s infinite;
  background: linear-gradient(135deg, #1A7F4B 0%, #22c55e 100%);
  box-shadow: 0 14px 36px rgba(26,127,75,0.3);
}
.photo-badge--brands .photo-badge__num { color: white; }
.photo-badge--brands .photo-badge__label { color: rgba(255,255,255,0.8); }

/* Rectangular photo frame */
.photo-frame--rect {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 3 / 4;
  border-radius: 20px !important;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26,127,75,0.08), rgba(74,222,128,0.04));
  box-shadow:
    0 30px 80px rgba(0,0,0,0.15),
    0 0 0 1px rgba(26,127,75,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), box-shadow 0.7s ease !important;
}
.photo-frame--rect:hover {
  transform: scale(1.02) translateY(-6px) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.18),
    0 0 0 1px rgba(26,127,75,0.15) !important;
}
.photo-frame--rect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: 20px !important;
  transition: transform 1s cubic-bezier(0.22,1,0.36,1);
}
.photo-frame--rect:hover img {
  transform: scale(1.06);
}
.photo-placeholder--rect {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(26,127,75,0.08), rgba(74,222,128,0.04));
}
.photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.photo-caption {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
  z-index: 2;
  color: white;
}
.photo-caption__name {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.photo-caption__role {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — New sections
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .autoridad-layout--hero {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .photo-frame--rect {
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
  }
  .pq-grid--enhanced {
    grid-template-columns: 1fr !important;
  }
  .pq-connector-line { display: none; }
}

@media (max-width: 768px) {
  .vsl-section { padding: 3rem 0 2.5rem; }
  .vsl-title { font-size: 1.35rem; }
  .vsl-play__btn { width: 70px; height: 70px; }
  .vsl-play__ring { width: 70px; height: 70px; }
  .vsl-hud__corner { width: 20px; height: 20px; }
  .vsl-hud__rec { top: 12px; right: 40px; font-size: 0.6rem; }
  .vsl-hud__timecode { bottom: 14px; left: 40px; font-size: 0.6rem; }
  .vsl-hud__corner--tl, .vsl-hud__corner--tr { top: 10px; }
  .vsl-hud__corner--bl, .vsl-hud__corner--br { bottom: 10px; }
  .vsl-hud__corner--tl, .vsl-hud__corner--bl { left: 10px; }
  .vsl-hud__corner--tr, .vsl-hud__corner--br { right: 10px; }

  .photo-badge { width: 70px; height: 70px; }
  .photo-badge__num { font-size: 1.3rem; }
  .photo-badge__label { font-size: 0.55rem; }
  .photo-badge--years { top: -14px; right: -12px; }
  .photo-badge--brands { bottom: -14px; left: -12px; }
  .photo-accent { width: 44px; height: 44px; }

  .beneficios-shape--3 { display: none; }
  .beneficios-grid-bg { opacity: 0.3; }

  .oferta-shape--ring,
  .oferta-shape--square,
  .oferta-shape--triangle { display: none; }
  .oferta-bg__grid { opacity: 0.4; }

  .pq-col__header { gap: 0.75rem; }
  .pq-col__icon { width: 40px; height: 40px; border-radius: 12px; }
  .pq-col__title { font-size: 1.15rem !important; }

  [data-reveal] {
    transform: translateY(24px);
    filter: blur(6px);
    transition-duration: 0.9s;
  }
}

@media (max-width: 480px) {
  .beneficios-shape { display: none; }
  .pq-shape { display: none; }
  .oferta-shape { display: none; }
  .oferta-dots { display: none; }
  .photo-badge { width: 60px; height: 60px; }
  .photo-badge__num { font-size: 1.1rem; }
  .vsl-eyebrow { font-size: 0.65rem; padding: 0.4rem 0.75rem; }
}


/* ═══════════════════════════════════════════════════════════
   FINAL POLISH — overrides for legacy animations + cleanup
   ═══════════════════════════════════════════════════════════ */

/* When using data-reveal, hide old data-animate conflicts */
[data-animate][data-reveal] { opacity: 0; }

/* Keep legacy data-animate working for non-migrated elements */
/* (The CSS rules already exist above, nothing breaks) */

/* Enhanced sections need clean background fade to avoid color-banding */
.para-quien--enhanced {
  background: linear-gradient(180deg, #ffffff 0%, #fafcfb 100%) !important;
}

/* Cleaner padding for enhanced para-quien grid on desktop */
.pq-grid--enhanced {
  grid-template-columns: 1fr auto 1fr !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

/* Ensure VSL section connects smoothly with hero above */
.hero + .vsl-section {
  margin-top: -2px;
}

/* Smooth typography weight pop on reveal for section titles */
[data-reveal] .section-title {
  transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-revealed .section-title {
  letter-spacing: -0.025em;
}


/* ═══════════════════════════════════════════════════════════
   HERO REORG — Promise (top) → VSL (middle) → Conversion (bottom)
═══════════════════════════════════════════════════════════ */

/* Legacy compat (in case .hero__content--centered still exists elsewhere) */
.hero__content--centered {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 2.2rem;
}
.hero__content--centered .hero__headline,
.hero__content--centered .hero__sub {
  text-align: center;
}
.hero__content--centered .hero__social-proof,
.hero__content--centered .hero__cta,
.hero__content--centered .hero__chips {
  justify-content: center;
}
.hero__content--centered .hero-value-bar {
  justify-content: center;
}
.hero__content--centered .hero__chips {
  flex-wrap: wrap;
}

/* ── PROMISE block (headline + subheadline ABOVE the VSL) ── */
.hero__promise {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 2.4rem;
  padding-bottom: 0.4rem;
  text-align: center;
  position: relative;
  z-index: 4;
}
.hero__promise .badge {
  margin: 0 auto 1.2rem;
}
.hero__promise .hero__headline {
  text-align: center;
  margin: 0 auto 1.1rem;
  max-width: 860px;
}
.hero__promise .hero__sub {
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
}

/* ── CONVERSION block (social proof + CTA + chips BELOW the VSL) ── */
.hero__conversion {
  max-width: 820px;
  margin: 2rem auto 0;
  padding-top: 0.6rem;
  text-align: center;
  position: relative;
  z-index: 3;
}
.hero__conversion .hero__social-proof,
.hero__conversion .hero__cta,
.hero__conversion .hero__chips {
  justify-content: center;
}
.hero__conversion .hero-value-bar {
  justify-content: center;
}
.hero__conversion .hero__chips {
  flex-wrap: wrap;
}
.hero__conversion .hero__cta {
  align-items: center;
}

/* Hero inner — make sure stacking works vertically in the new layout */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.hero__inner > .hero__promise,
.hero__inner > .hero-vsl,
.hero__inner > .hero__conversion {
  width: 100%;
}

/* ── Tighter spacing between blocks ── */
.hero__promise + .hero-vsl {
  margin-top: 1.6rem;
}
.hero-vsl + .hero__conversion {
  margin-top: 1.8rem;
}

/* ── HERO VSL container (clean Vimeo embed) ── */
.hero-vsl {
  position: relative;
  margin: 1.6rem auto 0;
  max-width: 960px;
  width: 100%;
  z-index: 3;
}

.hero-vsl__header {
  text-align: center;
  margin-bottom: 1.1rem;
}

.hero-vsl__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-vsl__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 10px rgba(255, 90, 90, 0.9);
  animation: fx-hero-vsl-rec 1.4s ease-in-out infinite;
}

@keyframes fx-hero-vsl-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ── Player wrap ── */
.hero-vsl__wrap {
  position: relative;
}

/* ── Iframe frame (clean, no animations behind) ── */
.hero-vsl__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.48),
    0 12px 30px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hero-vsl__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Botón "Activar sonido" (overlay central) ── */
.hero-vsl__unmute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.5rem 0.95rem 1.15rem;
  background: rgba(17, 24, 20, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  z-index: 3;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(74, 222, 128, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
  animation: fx-vsl-unmute-pulse 2.4s ease-in-out infinite;
}
.hero-vsl__unmute:hover {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(26, 127, 75, 0.9);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.6),
    0 0 0 8px rgba(74, 222, 128, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hero-vsl__unmute.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  animation: none;
}
.hero-vsl__unmute-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #1A7F4B 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(26, 127, 75, 0.45);
}
.hero-vsl__unmute-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}
.hero-vsl__unmute-text strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-vsl__unmute-text span {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

@keyframes fx-vsl-unmute-pulse {
  0%, 100% {
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.55),
      0 0 0 6px rgba(74, 222, 128, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.55),
      0 0 0 14px rgba(74, 222, 128, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* ── Barra de progreso personalizada (abajo del frame) ── */
.hero-vsl__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem 0.75rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}
.hero-vsl__progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hero-vsl__progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #22c55e 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.6);
  transition: width 0.22s linear;
  animation: fx-vsl-progress-shine 3.2s linear infinite;
}
.hero-vsl__progress-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes fx-vsl-progress-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Responsive: botón más pequeño en móvil */
@media (max-width: 560px) {
  .hero-vsl__unmute {
    padding: 0.78rem 1.2rem 0.78rem 0.9rem;
    gap: 0.65rem;
  }
  .hero-vsl__unmute-icon {
    width: 36px;
    height: 36px;
  }
  .hero-vsl__unmute-icon svg {
    width: 22px;
    height: 22px;
  }
  .hero-vsl__unmute-text strong {
    font-size: 0.88rem;
  }
  .hero-vsl__unmute-text span {
    font-size: 0.66rem;
  }
  .hero-vsl__progress {
    padding: 0.7rem 0.85rem 0.6rem;
    gap: 0.65rem;
  }
  .hero-vsl__progress-time {
    font-size: 0.72rem;
    min-width: 40px;
  }
}

/* Accesibilidad: menos motion */
@media (prefers-reduced-motion: reduce) {
  .hero-vsl__unmute,
  .hero-vsl__progress-fill {
    animation: none !important;
  }
}

/* .hero-vsl__caption CSS eliminado — el elemento HTML ya no existe */


/* ═══════════════════════════════════════════════════════════
   BENEFICIOS — MOCKUP FEATURE SLOT
═══════════════════════════════════════════════════════════ */

.beneficios-mockup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
  padding: 3.5rem 3rem;
  margin: 3rem auto 4rem;
  max-width: 1100px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
}

/* Mockup minimal: SIN glow, dots, badges, viewfinder ni rotación */

/* Visual left column (limpia) */
.beneficios-mockup__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.mockup-wrap--feature {
  width: 100%;
  max-width: 320px;
  position: relative;
  transform: none;
  transition: transform 0.4s ease;
}
.beneficios-mockup:hover .mockup-wrap--feature {
  transform: translateY(-4px);
}

/* Sombra única bajo el libro, sin tinte verde */
.mockup-img--feature {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.45));
}

/* Info right column */
.beneficios-mockup__info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.beneficios-mockup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  background: rgba(26, 127, 75, 0.08);
  border: 1px solid rgba(26, 127, 75, 0.2);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1A7F4B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beneficios-mockup__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1A7F4B;
  box-shadow: 0 0 8px rgba(26, 127, 75, 0.6);
  animation: fx-hero-vsl-rec 1.6s ease-in-out infinite;
}

.beneficios-mockup__title {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
}
.beneficios-mockup__title em {
  font-style: normal;
  color: #4ade80;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
}

.beneficios-mockup__desc {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.beneficios-mockup__list {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.beneficios-mockup__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.beneficios-mockup__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #4ade80);
  color: #052e14;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.4);
  margin-top: 1px;
}

.beneficios-mockup__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.beneficios-mockup__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.beneficios-mockup__meta-item svg {
  color: #4ade80;
}

.beneficios-mockup__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* Eyebrow más profesional sobre fondo oscuro */
.beneficios-mockup__eyebrow {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}
.beneficios-mockup__eyebrow-dot {
  background: #4ade80 !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6) !important;
  animation: none !important; /* sin animación REC, queda más minimalista */
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .hero-vsl {
    max-width: 100%;
  }
  .hero__content--centered {
    padding-top: 1.8rem;
  }
  .hero__promise {
    padding-top: 1.8rem;
  }
  .hero__conversion {
    margin-top: 1.4rem;
  }
  .hero__promise + .hero-vsl {
    margin-top: 1.2rem;
  }
  .hero-vsl + .hero__conversion {
    margin-top: 1.4rem;
  }
  .beneficios-mockup {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 2rem;
  }
  .beneficios-mockup__visual {
    min-height: 340px;
  }
  .beneficios-mockup__info {
    text-align: center;
    align-items: center;
  }
  .beneficios-mockup__list {
    text-align: left;
    max-width: 420px;
  }
  .beneficios-mockup__meta {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-vsl {
    margin-top: 1rem;
  }
  .hero__promise {
    padding-top: 1.4rem;
  }
  .hero__promise .hero__headline {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .hero__promise .hero__sub {
    font-size: 0.98rem;
  }
  .hero__conversion {
    margin-top: 1.1rem;
  }
  .hero__promise + .hero-vsl {
    margin-top: 1rem;
  }
  .hero-vsl + .hero__conversion {
    margin-top: 1.2rem;
  }
  .hero-vsl__header {
    margin-bottom: 0.8rem;
  }
  .hero-vsl__eyebrow {
    font-size: 0.65rem;
    padding: 0.35rem 0.75rem;
  }
  .hero-vsl__frame {
    border-radius: 16px;
  }
  .beneficios-mockup {
    padding: 2rem 1.3rem;
    margin: 2rem auto 3rem;
    border-radius: 22px;
  }
  .beneficios-mockup__visual {
    min-height: 280px;
  }
  .mockup-wrap--feature {
    max-width: 260px;
  }
  .beneficios-mockup__badge--pages {
    padding: 0.5rem 0.75rem;
  }
  .beneficios-mockup__badge--pages strong {
    font-size: 0.95rem;
  }
  .beneficios-mockup__badge--pdf {
    padding: 0.45rem 0.7rem;
  }
  .beneficios-mockup__badge--pdf span {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .hero-vsl__frame {
    border-radius: 14px;
  }
  .beneficios-mockup__dots { display: none; }
  .beneficios-mockup__badge--pages,
  .beneficios-mockup__badge--pdf {
    transform: scale(0.85);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-vsl__eyebrow-dot,
  .beneficios-mockup__glow,
  .beneficios-mockup__dots span,
  .beneficios-mockup__badge,
  .beneficios-mockup__eyebrow-dot {
    animation: none !important;
  }
  .mockup-wrap--feature {
    transform: rotate(0deg);
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE-FIRST OPTIMIZATION (95% of users on mobile)
   Safe-area insets, bigger touch targets, readability
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent horizontal overflow on any edge case */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* Ensure no element pushes past viewport */
  img, video, iframe, svg, picture {
    max-width: 100%;
    height: auto;
  }

  /* Safe-area insets for iPhone notch / home indicator */
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* Sticky CTA — lift above iOS home indicator + safer padding */
  .sticky-cta {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .sticky-cta__btn {
    min-height: 48px;
    padding: 0.85rem 1.35rem;
    font-size: 0.95rem;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Touch targets: min 44x44 (Apple HIG / WCAG 2.5.5) */
  a, button, .btn, .oferta-cta-btn, .cta-final__btn, .faq-question {
    min-height: 44px;
  }

  /* Primary CTAs: tap-friendly full width */
  .oferta-cta-btn,
  .cta-final__btn,
  .hero__cta .btn {
    width: 100%;
    min-height: 52px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
  }

  /* Hero: tighten without cropping */
  .hero {
    padding-top: 0.75rem;
  }

  .hero-vsl__frame {
    border-radius: 14px;
    overflow: hidden;
  }

  /* Ensure VSL video fills width edge-to-edge feel */
  .hero-vsl__wrap {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .hero-vsl__unmute {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
  }

  .hero-vsl__unmute-text strong {
    font-size: 0.9rem;
  }

  /* Badge: avoid overflow when text is long */
  .badge--live {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  /* Photo badge (autoridad): reposition so single badge stays elegant */
  .photo-badge--years {
    right: 8%;
    top: auto;
    bottom: 12px;
  }

  /* Autoridad photo: full width on mobile, no cropping */
  .autoridad__photo--large {
    max-width: 100%;
  }
  .photo-frame--rect {
    aspect-ratio: 3/4;
    width: 100%;
    height: auto;
  }

  /* Video gallery: single column for better viewing */
  .videos-gallery--flat {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* FAQs: bigger tap area */
  .faq-question {
    padding: 1rem 0.25rem;
    min-height: 48px;
  }

  /* Form inputs — prevent iOS zoom on focus (16px minimum) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Smooth momentum scrolling inside any scrollable region */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Body add small padding-bottom so sticky CTA doesn't overlap last content */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }

  /* Make sure inline brand logos don't wrap weirdly */
  .autoridad-brands__logos {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Tighten social proof row */
  .hero__social-proof {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  /* Include-chip: better readability */
  .include-chip {
    align-items: flex-start;
  }
  .include-chip__text {
    min-width: 0;
  }

  /* Section titles: avoid hyphenation/awkward breaks */
  .section-title,
  .hero__headline,
  .cta-final__headline {
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }
}

/* Very small screens (≤360px) — squeeze a little more */
@media (max-width: 360px) {
  .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .hero__headline {
    font-size: 1.65rem;
  }
  .section-title {
    font-size: 1.4rem;
  }
  .oferta-cta-btn,
  .cta-final__btn {
    font-size: 0.92rem;
    padding: 0.9rem 1rem;
  }
  .sticky-cta__btn {
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Conversion polish layer (added 2026-05-18)
   ═══════════════════════════════════════════════════════════ */

/* Tighten section padding across the landing */
.section {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 !important;
}
.section-header {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem) !important;
}

/* Hero — give the simplified conversion block room to breathe */
.hero__conversion--simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.hero__cta--mega {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

/* Mega CTA button — single irresistible action */
.btn--mega {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(2rem, 4vw, 3.25rem);
  border-radius: 999px;
  min-width: min(440px, 92vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
  box-shadow:
    0 18px 40px -12px rgba(36, 184, 90, 0.55),
    0 6px 18px -6px rgba(36, 184, 90, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn--mega::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: btn-mega-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-mega-shine {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
.btn--mega:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06);
  box-shadow:
    0 26px 54px -14px rgba(36, 184, 90, 0.7),
    0 10px 24px -6px rgba(36, 184, 90, 0.45);
}
.btn--mega .btn-arrow {
  transition: transform .25s ease;
}
.btn--mega:hover .btn-arrow {
  transform: translateX(4px);
}

.microcopy--mega {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
  margin: 0;
}

/* ── Brand logos (real assets) ───────────────────────────── */
.autoridad-brands__logos--real {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.25rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-top: 0.75rem;
}
.autoridad-brands__logos--real span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-logo-real {
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.55) contrast(1.1);
  opacity: 0.78;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.brand-logo-real:hover {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
  transform: translateY(-2px);
}

/* ── Hero subtitle — improved readability ───────────────── */
.hero__sub {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.hero__sub strong {
  color: #24B85A;
  font-weight: 700;
}

/* ── Trust strip below hero CTA ─────────────────────────── */
.hero__trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero__trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.hero__trust-row .tr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #24B85A;
  box-shadow: 0 0 8px rgba(36, 184, 90, 0.6);
}

/* ── Scarcity bar ─────────────────────────────────────── */
.scarcity-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(90deg, #FF6B35 0%, #FF8C42 100%);
  color: #fff;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
}
.scarcity-bar__icon {
  display: inline-flex;
  animation: scarcity-pulse 1.4s ease-in-out infinite;
}
@keyframes scarcity-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ── Inline testimonials strip ─────────────────────────── */
.testimonials-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 780px) {
  .testimonials-strip { grid-template-columns: 1fr; }
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.1rem;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  backdrop-filter: blur(6px);
}
.testimonial-card__stars {
  color: #FFC83D;
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
  letter-spacing: 0.15em;
}
.testimonial-card__quote {
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.85rem;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}
.testimonial-card__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
}
.testimonial-card__name strong { color: #fff; display: block; font-size: 0.9rem; }
.testimonial-card__name span { font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* ── Hide redundant elements ─────────────────────────── */
.fpv-gear-strip { display: none !important; }

/* Section dividers between same-color sections: simpler */
.fx-section-divider {
  margin: 0 !important;
}

/* ── Mobile tweaks for mega CTA ──────────────────────── */
@media (max-width: 600px) {
  .btn--mega {
    width: 100%;
    min-width: 0;
    font-size: 1.02rem;
    padding: 1rem 1.25rem;
  }
  .microcopy--mega { font-size: 0.82rem; }
  .autoridad-brands__logos--real { gap: 1rem 1.5rem; }
  .brand-logo-real { height: 26px; }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Round 2 polish (added 2026-05-18)
   - Bigger Manu photo
   - Colorful brand logos
   - Dark + 3D "Para Quien"
   - Spectacular Oferta with 3D animations
   ═══════════════════════════════════════════════════════════ */

/* ── 1. MANU PHOTO — Vertical portrait, cinematic ─────── */
.autoridad-layout--hero {
  grid-template-columns: minmax(360px, 0.9fr) 1fr !important;
  gap: 4.5rem !important;
  align-items: center !important;
}
.autoridad__photo--large {
  position: relative;
  transform: translateZ(0);
  max-width: 520px;
  margin-inline: auto;
}
.photo-frame--rect {
  max-width: 520px !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 28px !important;
  box-shadow:
    0 50px 120px -20px rgba(0,0,0,0.32),
    0 24px 50px -16px rgba(26,127,75,0.32),
    0 0 0 1px rgba(26,127,75,0.10),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.photo-frame--rect img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 28px !important;
}
.photo-accent {
  width: 96px !important;
  height: 96px !important;
  border-width: 4px !important;
}
.photo-accent--tl { top: -18px !important; left: -18px !important; border-top-left-radius: 18px !important; }
.photo-accent--br { bottom: -18px !important; right: -18px !important; border-bottom-right-radius: 18px !important; }

.photo-badge {
  width: 110px !important;
  height: 110px !important;
  border-radius: 24px !important;
  z-index: 5;
}
.photo-badge__num { font-size: 2rem !important; }
.photo-badge__label { font-size: 0.7rem !important; }
.photo-badge--years { top: -24px !important; right: -28px !important; }

@media (max-width: 980px) {
  .autoridad-layout--hero {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .photo-frame--rect {
    aspect-ratio: 3 / 4 !important;
    max-width: 420px !important;
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .photo-badge {
    width: 80px !important;
    height: 80px !important;
  }
  .photo-badge__num { font-size: 1.4rem !important; }
  .photo-accent {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ── 2. BRAND LOGOS — FULL COLOR ─────────────────────── */
.brand-logo-real {
  filter: none !important;
  opacity: 1 !important;
  height: clamp(34px, 4vw, 56px) !important;
  max-width: 150px !important;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), filter .35s ease !important;
}
.brand-logo-real:hover {
  transform: translateY(-4px) scale(1.06) !important;
  filter: drop-shadow(0 8px 14px rgba(26,127,75,0.18)) !important;
}
.autoridad-brands__logos--real {
  gap: clamp(1.5rem, 3.5vw, 3rem) !important;
  padding: 1.5rem 1rem !important;
}

/* ── 3. PARA QUIEN — DARK + 3D SPECTACULAR ───────────── */
.para-quien--dark {
  background: linear-gradient(170deg, #07150E 0%, #0E2B1A 45%, #14532D 100%) !important;
  position: relative;
  overflow: hidden;
}
.para-quien--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px circle at 18% 22%, rgba(36,184,90,0.22), transparent 50%),
    radial-gradient(600px circle at 82% 78%, rgba(255,107,53,0.10), transparent 55%);
  pointer-events: none;
  animation: pq-aurora 14s ease-in-out infinite alternate;
}
.para-quien--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 88%);
  pointer-events: none;
  opacity: 0.55;
}
@keyframes pq-aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50%      { transform: translate3d(20px, -30px, 0) scale(1.08); opacity: 1; }
}

.para-quien--dark .container { position: relative; z-index: 2; }
.para-quien--dark .overline { color: #4ADE80 !important; }
.para-quien--dark .section-title { color: #fff !important; }
.para-quien--dark .section-title em {
  background: linear-gradient(90deg, #24B85A 0%, #4ADE80 50%, #FFC83D 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.para-quien--dark .section-subtitle { color: rgba(255,255,255,0.75) !important; }

/* 3D card stack with perspective */
.para-quien--dark .pq-grid--enhanced {
  perspective: 1800px;
  transform-style: preserve-3d;
}

.para-quien--dark .pq-col--enhanced {
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 24px !important;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.55),
    0 8px 24px -10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transform: rotateY(0deg) rotateX(0deg) translateZ(0);
  transition: transform .8s cubic-bezier(0.22,1,0.36,1), box-shadow .6s ease !important;
  position: relative;
  overflow: hidden;
}
.para-quien--dark .pq-col--yes {
  transform: perspective(1400px) rotateY(8deg) rotateX(-2deg);
}
.para-quien--dark .pq-col--no {
  transform: perspective(1400px) rotateY(-8deg) rotateX(-2deg);
}
.para-quien--dark .pq-col--enhanced:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.015) !important;
  box-shadow:
    0 50px 120px -20px rgba(36,184,90,0.35),
    0 20px 40px -10px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.para-quien--dark .pq-col--yes::before,
.para-quien--dark .pq-col--no::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(36,184,90,0.6) 0%, transparent 40%, transparent 60%, rgba(74,222,128,0.5) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity .5s ease;
  filter: blur(12px);
}
.para-quien--dark .pq-col--no::before {
  background: linear-gradient(135deg, rgba(239,68,68,0.45) 0%, transparent 40%, transparent 60%, rgba(255,107,53,0.4) 100%);
}
.para-quien--dark .pq-col--enhanced:hover::before { opacity: 1; }

/* Inner top shine */
.para-quien--dark .pq-col--enhanced::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  pointer-events: none;
}

.para-quien--dark .pq-col__label {
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
}
.para-quien--dark .pq-col__title {
  color: #fff !important;
}
.para-quien--dark .pq-list li {
  color: rgba(255,255,255,0.88) !important;
}
.para-quien--dark .pq-list--yes li {
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
.para-quien--dark .pq-list--no li {
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

.para-quien--dark .pq-item-icon--yes {
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(36,184,90,0.45);
}
.para-quien--dark .pq-item-icon--no {
  background: linear-gradient(135deg, rgba(239,68,68,0.95) 0%, rgba(220,38,38,0.95) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239,68,68,0.35);
}

.para-quien--dark .pq-col__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  box-shadow:
    0 14px 30px -8px rgba(36,184,90,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.para-quien--dark .pq-col__icon--yes {
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
}
.para-quien--dark .pq-col__icon--no {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -8px rgba(239,68,68,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

.para-quien--dark .pq-vs--enhanced {
  background: linear-gradient(135deg, #FFC83D 0%, #FF6B35 100%) !important;
  color: #0B1D14 !important;
  font-weight: 900;
  box-shadow:
    0 20px 40px -10px rgba(255,107,53,0.6),
    inset 0 2px 0 rgba(255,255,255,0.4) !important;
  animation: pq-vs-rotate 6s ease-in-out infinite;
}
@keyframes pq-vs-rotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.08); }
}

.para-quien--dark .pq-col__footer {
  background: rgba(36,184,90,0.18) !important;
  color: #4ADE80 !important;
  border: 1px solid rgba(36,184,90,0.3);
  border-radius: 12px;
  font-weight: 700;
}
.para-quien--dark .pq-col__footer--no {
  background: rgba(239,68,68,0.18) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239,68,68,0.3);
}

.para-quien--dark .pq-cierre {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.15rem;
}
.para-quien--dark .pq-cierre strong {
  background: linear-gradient(90deg, #24B85A, #4ADE80);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.para-quien--dark .pq-cta-link {
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
  padding: 1rem 2rem !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow:
    0 20px 40px -12px rgba(36,184,90,0.55),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.para-quien--dark .pq-cta-link:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow:
    0 28px 56px -14px rgba(36,184,90,0.75),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Floating 3D orbs in para-quien */
.para-quien--dark .pq-shapes::before,
.para-quien--dark .pq-shapes::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: pq-orb-float 12s ease-in-out infinite;
}
.para-quien--dark .pq-shapes::before {
  width: 320px; height: 320px;
  top: 10%; left: -100px;
  background: radial-gradient(circle, rgba(36,184,90,0.4), transparent 70%);
}
.para-quien--dark .pq-shapes::after {
  width: 380px; height: 380px;
  bottom: 5%; right: -120px;
  background: radial-gradient(circle, rgba(255,200,61,0.18), transparent 70%);
  animation-delay: -6s;
}
@keyframes pq-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.15); }
}

/* Hide gear icons in para-quien (cleaner dark look) */
.para-quien--dark .fpv-floats { opacity: 0.18; }

/* ── 4. OFERTA — Spectacular 3D upgrades ───────────────── */
.oferta--enhanced {
  position: relative;
  background: linear-gradient(180deg, #FAFAF9 0%, #F0F7F3 50%, #FAFAF9 100%) !important;
  overflow: hidden;
}
.oferta--enhanced::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px circle at 50% 0%, rgba(36,184,90,0.10), transparent 50%),
    radial-gradient(600px circle at 10% 90%, rgba(255,200,61,0.08), transparent 55%),
    radial-gradient(700px circle at 90% 60%, rgba(36,184,90,0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.oferta--enhanced .container { position: relative; z-index: 2; }

/* Spectacular section header */
.oferta--enhanced .section-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem) !important;
  letter-spacing: -0.045em !important;
}
.oferta--enhanced .section-title em {
  background: linear-gradient(90deg, #24B85A 0%, #1A7F4B 50%, #24B85A 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: oferta-gradient-shift 4s ease-in-out infinite;
}
@keyframes oferta-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Animated savings callout */
.oferta-savings {
  background: linear-gradient(135deg, rgba(36,184,90,0.10) 0%, rgba(74,222,128,0.04) 100%);
  border: 1px solid rgba(36,184,90,0.2);
  padding: 0.85rem 1.5rem !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px -10px rgba(36,184,90,0.25);
}
.oferta-savings__old {
  font-size: 1.3rem !important;
  color: #888 !important;
  text-decoration: line-through;
}
.oferta-savings__new {
  font-size: 2rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #24B85A, #1A7F4B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oferta-savings__tag {
  background: linear-gradient(135deg, #FF6B35, #DC2626) !important;
  color: #fff !important;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-weight: 900 !important;
  font-size: 0.85rem;
  box-shadow: 0 8px 18px -4px rgba(239,68,68,0.5);
  animation: oferta-tag-pulse 1.8s ease-in-out infinite;
}
@keyframes oferta-tag-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Layout — single centered column for tight composition */
.oferta-layout {
  display: flex !important;
  flex-direction: column !important;
  perspective: 2000px !important;
  transform-style: preserve-3d;
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.oferta-layout > .includes-chips {
  width: 100%;
  max-width: 640px;
}
.oferta-layout > .precio-bloque {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* Include chips — 3D floating cards */
.includes-chips {
  display: grid !important;
  gap: 0.9rem !important;
}
.include-chip {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #FAFAF9 100%) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 18px !important;
  padding: 1.1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.10),
    0 2px 6px -2px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transform: translateZ(0) rotateY(-1deg);
  transition: transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s ease !important;
  overflow: hidden;
}
.include-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #24B85A 0%, #1A7F4B 100%);
  border-radius: 4px 0 0 4px;
}
.include-chip:hover {
  transform: translateY(-4px) rotateY(2deg) scale(1.015) !important;
  box-shadow:
    0 22px 50px -16px rgba(36,184,90,0.30),
    0 6px 16px -6px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.include-chip__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(36,184,90,0.15) 0%, rgba(74,222,128,0.06) 100%);
  color: #1A7F4B;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.include-chip__text strong {
  font-size: 1rem;
  display: block;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.include-chip__text span {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.45;
}
.include-chip__value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1A7F4B;
  background: rgba(36,184,90,0.10);
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  text-decoration: line-through;
  flex-shrink: 0;
}
.include-chip--guarantee {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  border-color: rgba(255,200,61,0.4) !important;
}
.include-chip--guarantee::before {
  background: linear-gradient(180deg, #FFC83D 0%, #FF6B35 100%) !important;
}
.include-chip--guarantee .include-chip__icon {
  background: linear-gradient(135deg, rgba(255,200,61,0.25), rgba(255,107,53,0.10));
  color: #B45309;
}

/* Precio bloque — Hero 3D card */
.precio-bloque {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #F5FBF7 100%) !important;
  border-radius: 32px !important;
  padding: clamp(1.75rem, 3vw, 2.75rem) !important;
  box-shadow:
    0 60px 140px -30px rgba(26,127,75,0.35),
    0 30px 60px -20px rgba(0,0,0,0.15),
    0 0 0 1px rgba(36,184,90,0.10),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateZ(0);
  transition: transform .9s cubic-bezier(0.22,1,0.36,1), box-shadow .6s ease !important;
  overflow: visible;
}
.precio-bloque:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 80px 180px -30px rgba(26,127,75,0.45),
    0 40px 80px -20px rgba(0,0,0,0.18),
    0 0 0 1px rgba(36,184,90,0.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Animated gradient border (rotating) */
.precio-bloque__border {
  position: absolute;
  inset: -2px;
  border-radius: 34px;
  background: conic-gradient(
    from var(--rotate, 0deg),
    #24B85A 0%,
    #4ADE80 25%,
    #FFC83D 50%,
    #24B85A 75%,
    #1A7F4B 100%
  );
  z-index: -1;
  opacity: 0.85;
  filter: blur(2px);
  animation: precio-border-rotate 6s linear infinite;
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes precio-border-rotate {
  to { --rotate: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .precio-bloque__border {
    background: linear-gradient(135deg, #24B85A, #FFC83D, #1A7F4B);
  }
}

.precio-bloque__popular {
  position: absolute !important;
  top: -16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #FFC83D 0%, #FF6B35 100%) !important;
  color: #0B1D14 !important;
  font-weight: 900 !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 999px !important;
  box-shadow:
    0 14px 30px -10px rgba(255,107,53,0.55),
    0 4px 12px -2px rgba(255,200,61,0.4),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  z-index: 4;
  white-space: nowrap;
}
.precio-bloque__popular::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFC83D, #FF6B35);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.45;
}
@keyframes precio-popular-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Valor stack — rows */
.valor-stack { margin: 0.5rem 0 1.5rem; }
.valor-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0.7rem 0 !important;
  border-bottom: 1px dashed rgba(0,0,0,0.08) !important;
  font-size: 0.95rem;
}
.valor-row span { color: #333; }
.valor-row s { color: #999; font-weight: 600; }
.valor-row--total {
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  padding-top: 1rem !important;
  border-bottom: none !important;
  border-top: 2px solid rgba(0,0,0,0.08) !important;
  margin-top: 0.5rem !important;
}
.valor-row--total s { color: #DC2626 !important; font-size: 1.15rem; }

/* Price reveal — HUGE 3D */
.precio-real {
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
}
.precio-hoy {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.precio-numero {
  font-size: clamp(4rem, 11vw, 6.5rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 50%, #24B85A 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 30px 60px rgba(36,184,90,0.15);
  animation: precio-num-shift 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes precio-num-shift {
  0%, 100% { background-position: 0% 50%; transform: scale(1); }
  50%      { background-position: 100% 50%; transform: scale(1.03); }
}
.precio-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(36,184,90,0.35), transparent 70%);
  filter: blur(30px);
  border-radius: 50%;
  animation: precio-glow-pulse 3s ease-in-out infinite;
  z-index: 1;
}
@keyframes precio-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
.precio-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 260px;
  border: 2px dashed rgba(36,184,90,0.30);
  border-radius: 50%;
  animation: precio-ring-rotate 18s linear infinite;
  z-index: 1;
}
@keyframes precio-ring-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.oferta-arrow-down {
  display: flex;
  justify-content: center;
  color: #1A7F4B;
  margin: 1rem 0;
  animation: arrow-bounce 1.5s ease-in-out infinite;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.garantia-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(36,184,90,0.10), rgba(74,222,128,0.05));
  border: 1px solid rgba(36,184,90,0.20);
  color: #1A7F4B;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.5rem auto 1rem;
}

/* Mega CTA in oferta */
.oferta-cta-btn {
  width: 100%;
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  font-weight: 800 !important;
  padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1.5rem, 3vw, 2.5rem) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
  box-shadow:
    0 24px 50px -14px rgba(36,184,90,0.55),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease !important;
}
.oferta-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: btn-mega-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.oferta-cta-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 34px 70px -16px rgba(36,184,90,0.70),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  filter: brightness(1.06);
}

.oferta-cta-wrap {
  position: relative;
  margin: 0.75rem 0;
}
.oferta-cta-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse at center, rgba(36,184,90,0.35) 0%, transparent 70%);
  filter: blur(20px);
  border-radius: 999px;
  z-index: -1;
  animation: precio-glow-pulse 2.5s ease-in-out infinite;
}

/* Urgency strip */
/* Urgency strip — three clean horizontal pills (no marquee) */
.precio-bloque .urgency-strip,
.urgency-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  background: transparent !important;
  color: inherit;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0.9rem !important;
  overflow: visible !important;
  position: relative;
}
.urgency-strip__dot { display: none !important; }
.precio-bloque .urgency-strip__text,
.urgency-strip__text {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  gap: 0.4rem !important;
  white-space: normal !important;
  animation: none !important;
  text-align: center !important;
  width: 100%;
  justify-content: stretch;
}
.precio-bloque .urgency-strip__text > span,
.urgency-strip__text > span {
  flex: 1 1 0;
  background: linear-gradient(135deg, rgba(36,184,90,0.12) 0%, rgba(36,184,90,0.06) 100%);
  border: 1px solid rgba(36,184,90,0.22);
  color: #1A7F4B;
  padding: 0.5rem 0.45rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
}
.precio-bloque .urgency-strip__text > span::before,
.urgency-strip__text > span::before {
  display: none !important;
}
@media (max-width: 480px) {
  .precio-bloque .urgency-strip__text > span,
  .urgency-strip__text > span {
    font-size: 0.66rem;
    padding: 0.45rem 0.3rem;
  }
}

/* Sparkles */
.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: #FFC83D;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,200,61,0.8);
  animation: sparkle-twinkle 2.5s ease-in-out infinite;
}
.sparkle--1 { top: 12%; left: 8%; animation-delay: 0s; }
.sparkle--2 { top: 22%; right: 10%; animation-delay: 0.4s; }
.sparkle--3 { bottom: 20%; left: 12%; animation-delay: 0.8s; }
.sparkle--4 { bottom: 30%; right: 14%; animation-delay: 1.2s; }
.sparkle--5 { top: 50%; left: 4%; animation-delay: 1.6s; }
.sparkle--6 { top: 60%; right: 6%; animation-delay: 2s; }
.sparkle--star {
  width: auto; height: auto;
  background: transparent;
  color: #FFC83D;
  font-size: 1.2rem;
  box-shadow: none;
  text-shadow: 0 0 8px rgba(255,200,61,0.8);
}
.sparkle--star-1 { top: 8%; right: 22%; animation-delay: 0.3s; }
.sparkle--star-2 { bottom: 12%; left: 22%; animation-delay: 1.4s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Oferta badge — animated rings */
.oferta-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6B35 0%, #DC2626 100%);
  color: #fff;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  box-shadow: 0 16px 36px -8px rgba(239,68,68,0.55);
  margin-bottom: 1rem;
}
.oferta-badge__ring {
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255,107,53,0.5);
  border-radius: 999px;
  animation: oferta-ring 2s ease-out infinite;
}
.oferta-badge__ring--2 { animation-delay: 1s; }
@keyframes oferta-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.oferta-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(36,184,90,0.10);
  color: #1A7F4B;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.oferta-live-dot {
  width: 8px; height: 8px;
  background: #24B85A;
  border-radius: 50%;
  box-shadow: 0 0 12px #24B85A;
  animation: scarcity-pulse 1.2s ease-in-out infinite;
}

/* Mobile tweaks for oferta */
@media (max-width: 980px) {
  .oferta-layout {
    grid-template-columns: 1fr !important;
  }
  .precio-bloque,
  .include-chip {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — RESPONSIVE POLISH (final pass)
   Ensures every new element looks proportional on:
   - Mobile (≤480px)
   - Phablet (481–640px)
   - Tablet (641–960px)
   - Laptop  (961–1199px)
   - Desktop (≥1200px)
   ═══════════════════════════════════════════════════════════ */

/* ── Scarcity bar — wraps gracefully ─────────────────────── */
.scarcity-bar {
  line-height: 1.3;
  padding: 0.55rem 0.9rem;
}
.scarcity-bar > span:last-child { max-width: 100%; }

/* ── Hero — readable on every viewport ──────────────────── */
.hero__headline {
  text-wrap: balance;
}
.headline-line--main,
.headline-line--accent,
.headline-line--sub {
  display: block;
}
.hero__sub {
  text-wrap: balance;
}

/* ── Para-quien dark — keep 3D ONLY on desktop ──────────── */
@media (max-width: 960px) {
  .para-quien--dark .pq-col--yes,
  .para-quien--dark .pq-col--no {
    transform: none !important;
  }
  .para-quien--dark .pq-col--enhanced:hover {
    transform: translateY(-4px) scale(1.01) !important;
  }
}

/* ── Include chips — flat on mobile ─────────────────────── */
@media (max-width: 900px) {
  .include-chip {
    transform: none !important;
  }
  .include-chip:hover {
    transform: translateY(-2px) !important;
  }
}

/* ── Oferta floating SVG props — hide on narrow screens ── */
@media (max-width: 900px) {
  .fpv-floats--oferta,
  .fpv-floats--paraquien,
  .fpv-floats--benefits {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — ≤ 640px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Top scarcity bar */
  .scarcity-bar {
    font-size: 0.74rem;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }

  /* Hero promise block */
  .hero__headline {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
  }
  .hero__sub {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0 0.25rem;
  }
  /* Remove the desktop-only <br/> in subtitle */
  .hero__sub br { display: none; }

  .badge--live {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.7rem !important;
  }

  /* Mega CTA */
  .btn--mega {
    width: 100%;
    min-width: 0;
    font-size: 1rem;
    padding: 1rem 1.1rem;
    letter-spacing: -0.005em;
  }
  .microcopy--mega {
    font-size: 0.78rem;
    text-align: center;
    padding: 0 0.5rem;
  }
  .hero__trust-row {
    gap: 0.5rem 0.9rem;
    font-size: 0.74rem;
  }

  /* VSL — keep aspect, reduce vertical padding */
  .hero-vsl { margin-top: 1.25rem; }

  /* Section padding — tighter on mobile */
  .section {
    padding: 2.25rem 0 !important;
  }
  .section-header {
    margin-bottom: 1.5rem !important;
  }
  .section-title {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .section-subtitle {
    font-size: 0.92rem !important;
  }

  /* Para-quien — single column flow */
  .para-quien--dark .pq-grid--enhanced {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .para-quien--dark .pq-col--enhanced {
    padding: 1.25rem !important;
  }
  .para-quien--dark .pq-divider--enhanced {
    display: none !important;
  }
  .para-quien--dark .pq-col__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  .para-quien--dark .pq-cta-link {
    padding: 0.85rem 1.4rem !important;
    font-size: 0.92rem !important;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .para-quien--dark .pq-cierre {
    font-size: 0.98rem !important;
  }

  /* Oferta — tighten everything */
  .oferta--enhanced .section-title {
    font-size: clamp(1.7rem, 7vw, 2.1rem) !important;
  }
  .oferta-badge {
    font-size: 0.78rem;
    padding: 0.45rem 1rem;
  }
  .oferta-savings {
    padding: 0.65rem 1rem !important;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .oferta-savings__old { font-size: 1.05rem !important; }
  .oferta-savings__new { font-size: 1.5rem !important; }
  .oferta-savings__tag { font-size: 0.72rem; padding: 0.25rem 0.55rem; }

  .precio-bloque {
    padding: 1.5rem 1.1rem !important;
    border-radius: 22px !important;
  }
  .precio-bloque__popular {
    right: 14px;
    font-size: 0.68rem !important;
    padding: 0.35rem 0.65rem !important;
  }
  .precio-numero {
    font-size: clamp(3.2rem, 18vw, 4.5rem) !important;
  }
  .precio-glow { width: 140px !important; height: 140px !important; }
  .precio-ring { width: 180px !important; height: 180px !important; }

  .valor-row { font-size: 0.85rem; padding: 0.55rem 0 !important; }
  .valor-row--total { font-size: 0.98rem !important; }

  .include-chip {
    padding: 0.85rem 1rem !important;
    gap: 0.7rem !important;
    border-radius: 14px !important;
  }
  .include-chip__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
  }
  .include-chip__text strong { font-size: 0.92rem; }
  .include-chip__text span { font-size: 0.78rem; }
  .include-chip__value { font-size: 0.88rem; padding: 0.25rem 0.5rem; }

  .oferta-cta-btn {
    font-size: 0.98rem !important;
    padding: 0.95rem 1.1rem !important;
  }
  .urgency-strip { font-size: 0.74rem; padding: 0.5rem 0.75rem; }

  /* Bonos cards — tighter */
  .bonos-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .bono-card { padding: 1.5rem 1.25rem !important; }
  .bono-card h3 { font-size: 1.05rem !important; }

  /* Autoridad photo — keep aspect proportional */
  .autoridad-layout--hero {
    gap: 1.75rem !important;
  }
  .photo-frame--rect {
    aspect-ratio: 3 / 4 !important;
    max-width: 340px !important;
    margin-inline: auto;
    border-radius: 18px !important;
  }
  .photo-frame--rect img {
    border-radius: 18px !important;
    object-position: center 15% !important;
  }
  .photo-accent {
    width: 50px !important;
    height: 50px !important;
    border-width: 3px !important;
  }
  .photo-accent--tl { top: -10px !important; left: -10px !important; }
  .photo-accent--br { bottom: -10px !important; right: -10px !important; }
  .photo-badge {
    width: 68px !important;
    height: 68px !important;
    border-radius: 14px !important;
  }
  .photo-badge__num { font-size: 1.1rem !important; }
  .photo-badge__label { font-size: 0.55rem !important; }
  .photo-badge--years { top: -10px !important; right: -10px !important; }

  /* Autoridad text — left/right margins */
  .autoridad__text {
    padding: 0 0.25rem;
  }
  .autoridad__text p {
    font-size: 0.92rem !important;
  }

  /* Brand logos */
  .autoridad-brands__logos--real {
    gap: 1.1rem 1.4rem !important;
    padding: 1rem 0.5rem !important;
  }
  .brand-logo-real {
    height: 28px !important;
    max-width: 90px !important;
  }

  /* Testimonials */
  .testimonials-strip {
    margin-top: 1.5rem !important;
    gap: 0.85rem !important;
  }
  .testimonial-card { padding: 1rem 1.1rem !important; }
  .testimonial-card__quote { font-size: 0.9rem; }

  /* CTA Final */
  .cta-final__headline {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
  }
  .cta-final__body {
    font-size: 0.95rem !important;
    line-height: 1.5;
  }
  .cta-final__body br { display: none; }

  /* Sticky CTA at the bottom — tighter */
  .sticky-cta {
    padding: 0.55rem 0.75rem !important;
    gap: 0.5rem !important;
  }
  .sticky-cta__info { display: none; }
  .sticky-cta__btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHABLET — 481px to 768px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .hero__headline {
    font-size: clamp(2rem, 6vw, 2.6rem) !important;
  }
  .precio-numero {
    font-size: clamp(4rem, 14vw, 5.5rem) !important;
  }
  .bonos-grid {
    grid-template-columns: 1fr !important;
  }
  .testimonials-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET — 769px to 960px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 960px) {
  .autoridad-layout--hero {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    max-width: 720px;
    margin-inline: auto;
  }
  .photo-frame--rect {
    max-width: 400px !important;
    margin-inline: auto;
    aspect-ratio: 3 / 4 !important;
  }
  .oferta-layout {
    grid-template-columns: 1fr !important;
    max-width: 640px;
  }
  .testimonials-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bonos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LAPTOP — 961px to 1199px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 961px) and (max-width: 1199px) {
  .autoridad-layout--hero {
    grid-template-columns: minmax(340px, 0.85fr) 1fr !important;
    gap: 3rem !important;
  }
  .photo-frame--rect {
    max-width: 460px !important;
    aspect-ratio: 3 / 4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — ≥ 1200px (large screens, max polish)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .autoridad-layout--hero {
    max-width: 1180px;
    margin-inline: auto;
  }
  .oferta-layout {
    max-width: 1100px;
  }
  .container {
    max-width: 1200px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-NARROW — ≤ 360px (iPhone SE 1st gen, foldables)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .scarcity-bar { font-size: 0.68rem; }
  .hero__headline {
    font-size: 1.55rem !important;
  }
  .btn--mega { font-size: 0.92rem; padding: 0.9rem 1rem; }
  .precio-numero { font-size: 3rem !important; }
  .include-chip__value { display: none; }
  .photo-badge { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE PHONES — small height
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding: 2rem 0 !important; }
  .hero__headline { font-size: 1.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — accessibility
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .precio-bloque__border,
  .precio-ring,
  .precio-numero,
  .pq-vs--enhanced,
  .scarcity-bar__icon,
  .oferta-tag-pulse,
  .urgency-strip__text,
  .btn--mega::before,
  .oferta-cta-btn::before,
  .sparkle,
  .precio-glow,
  .oferta-cta-glow,
  .precio-popular-float,
  .pq-orb-float,
  .pq-aurora,
  .oferta-arrow-down {
    animation: none !important;
  }
  .para-quien--dark .pq-col--yes,
  .para-quien--dark .pq-col--no,
  .precio-bloque,
  .include-chip {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — BONOS SPECTACULAR (final pass 2026-05-20)
   3D cards with rotating gradient ring, parallax tilt,
   glassmorphism, animated value sticker, ribbon bow
   ═══════════════════════════════════════════════════════════ */

/* Section enhancement — deeper background */
.bonos {
  background:
    radial-gradient(900px circle at 50% -10%, rgba(36,184,90,0.20), transparent 55%),
    radial-gradient(700px circle at 10% 100%, rgba(255,200,61,0.10), transparent 55%),
    linear-gradient(170deg, #07150E 0%, #0E2B1A 50%, #14532D 100%) !important;
  position: relative;
  overflow: hidden;
}
.bonos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 88%);
  pointer-events: none;
  z-index: 0;
}
.bonos > .container { position: relative; z-index: 2; }

/* Title spectacular */
.bonos .section-title em {
  background: linear-gradient(90deg, #FFC83D 0%, #24B85A 50%, #4ADE80 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bonos-title-shift 4s ease-in-out infinite;
}
@keyframes bonos-title-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* GRID — 3 cards desktop, 1 mobile */
.bonos-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  perspective: 2200px;
}

/* BONO CARD — spectacular 3D glass */
.bono-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 26px !important;
  padding: 1.75rem 1.5rem 1.5rem !important;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0deg) rotateX(0deg);
  transition: transform .8s cubic-bezier(0.22,1,0.36,1),
              box-shadow .6s ease,
              border-color .4s ease !important;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.55),
    0 12px 30px -10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem;
  min-height: 540px;
}

/* First card slightly forward, third slightly back — 3D stack */
.bonos-grid .bono-card:nth-child(1) {
  transform: translateZ(0) translateY(0) rotateY(2deg);
}
.bonos-grid .bono-card:nth-child(2) {
  transform: translateZ(20px) translateY(-12px) rotateY(0deg);
  z-index: 2;
}
.bonos-grid .bono-card:nth-child(2) {
  background: linear-gradient(160deg, rgba(36,184,90,0.18) 0%, rgba(36,184,90,0.04) 100%) !important;
  border-color: rgba(36,184,90,0.35) !important;
  box-shadow:
    0 50px 100px -20px rgba(36,184,90,0.45),
    0 20px 40px -10px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.bonos-grid .bono-card:nth-child(3) {
  transform: translateZ(0) translateY(0) rotateY(-2deg);
}
.bono-card:hover {
  transform: translateZ(30px) translateY(-10px) rotateY(0deg) rotateX(0deg) scale(1.02) !important;
  border-color: rgba(36,184,90,0.45) !important;
  box-shadow:
    0 60px 130px -20px rgba(36,184,90,0.50),
    0 30px 60px -10px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Rotating gradient ring around card on hover */
.bono-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  background: conic-gradient(
    from var(--bono-angle, 0deg),
    transparent 0%,
    #24B85A 12%,
    #FFC83D 25%,
    transparent 40%,
    transparent 60%,
    #4ADE80 75%,
    transparent 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
  filter: blur(8px);
  animation: bono-angle-rotate 6s linear infinite;
}
.bono-card:hover::before { opacity: 1; }
@property --bono-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes bono-angle-rotate {
  to { --bono-angle: 360deg; }
}

/* Top shine line */
.bono-card::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none;
}

/* Floating bono number 01/02/03 — huge translucent */
.bono-card .bono-price-bg {
  position: absolute !important;
  top: -10px;
  right: -10px;
  font-size: 7rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(36,184,90,0.20));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 0.85;
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-6deg);
  user-select: none;
}

/* Top header with num + value */
.bono-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 2;
}
.bono-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%);
  color: #fff !important;
  font-weight: 900;
  font-size: 1rem;
  box-shadow:
    0 12px 24px -8px rgba(36,184,90,0.50),
    inset 0 1px 0 rgba(255,255,255,0.25);
  letter-spacing: -0.01em;
}
.bono-value {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0.3rem 0.7rem !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-decoration: line-through;
}

/* Hide ribbon (redundant with bono-top value) */
.bono-card .bono-ribbon {
  display: none !important;
}

/* Visual block — show the mock asset */
.bono-visual {
  position: relative;
  background: linear-gradient(160deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.15) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px !important;
  padding: 1.1rem 1rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  z-index: 1;
}
.bono-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(36,184,90,0.15), transparent 60%);
  pointer-events: none;
}
.bono-visual svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.30));
}

/* Format tag (VIDEO / PDF / LIVE 1:1) */
.bono-format-tag {
  position: absolute !important;
  top: 10px; left: 10px;
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.25rem 0.55rem !important;
  border-radius: 6px !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 3;
  backdrop-filter: blur(8px);
}

/* "GRATIS" sticker — animated */
.bono-sticker {
  position: absolute !important;
  top: -14px; right: -14px;
  width: 88px; height: 88px;
  background: linear-gradient(135deg, #FFC83D 0%, #FF6B35 100%) !important;
  border: 3px solid #FFF !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0B1D14 !important;
  z-index: 4;
  box-shadow:
    0 16px 32px -8px rgba(255,107,53,0.55),
    inset 0 2px 0 rgba(255,255,255,0.55);
  animation: bono-sticker-wobble 2.4s ease-in-out infinite;
  transform-origin: center;
}
.bono-sticker .sticker-was {
  font-size: 0.62rem !important;
  text-decoration: line-through;
  opacity: 0.7;
}
.bono-sticker .sticker-free {
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
}
@keyframes bono-sticker-wobble {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.08); }
}

/* Icon under visual */
.bono-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(36,184,90,0.30) 0%, rgba(36,184,90,0.10) 100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #4ADE80 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 20px -8px rgba(36,184,90,0.35);
  margin-top: 0.25rem;
}
.bono-icon svg { width: 24px; height: 24px; }

/* Title */
.bono-card h3 {
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Body text */
.bono-card p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.92rem !important;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* "Incluido" pill */
.bono-card .badge--included {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(36,184,90,0.20), rgba(36,184,90,0.08)) !important;
  border: 1px solid rgba(36,184,90,0.35) !important;
  color: #4ADE80 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  width: fit-content;
  margin-top: auto;
  position: relative;
}
.bono-card .badge--included::before {
  content: "✓";
  font-weight: 900;
  color: #24B85A;
  font-size: 0.85rem;
}

/* RESPONSIVE — bonos */
@media (max-width: 1100px) {
  .bonos-grid .bono-card:nth-child(1),
  .bonos-grid .bono-card:nth-child(2),
  .bonos-grid .bono-card:nth-child(3) {
    transform: none !important;
  }
}
@media (max-width: 900px) {
  .bonos-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .bono-card {
    min-height: auto !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
  }
  .bono-card .bono-price-bg {
    font-size: 5rem !important;
  }
  .bono-sticker {
    width: 70px; height: 70px;
    top: -10px; right: -10px;
  }
  .bono-sticker .sticker-free { font-size: 0.82rem !important; }
}
@media (max-width: 480px) {
  .bono-visual {
    aspect-ratio: 16 / 10;
  }
  .bono-card h3 { font-size: 1.05rem !important; }
  .bono-card p { font-size: 0.88rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   HERO HEADLINE — Mobile-first polish (95% mobile traffic)
   ═══════════════════════════════════════════════════════════ */
.headline-line--main {
  font-weight: 800;
  letter-spacing: -0.035em;
}
.headline-line--accent {
  background: linear-gradient(90deg, #24B85A 0%, #4ADE80 50%, #FFC83D 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: -0.035em;
  animation: bonos-title-shift 5s ease-in-out infinite;
}
.headline-line--sub {
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  letter-spacing: -0.025em;
}

@media (max-width: 640px) {
  .hero__headline {
    text-wrap: balance;
    font-size: clamp(1.85rem, 8.5vw, 2.35rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    max-width: 360px;
    margin-inline: auto;
  }
  .hero__sub {
    font-size: 0.95rem !important;
    line-height: 1.5;
    max-width: 360px;
    margin-inline: auto;
    padding: 0 0.5rem;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero__headline {
    font-size: clamp(2.2rem, 5.5vw, 2.85rem) !important;
    max-width: 600px;
    margin-inline: auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Final pass 2026-05-20
   - Bigger Manu photo
   - Kill green blob bleed in oferta
   - Single-column oferta polish
   - Maximum mobile aesthetics
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PHOTO — MOBILE-FIRST (no minmax overflow) ─────── */
/* Base mobile: stack vertical, foto contenida */
.autoridad-layout--hero {
  grid-template-columns: 1fr !important;
  gap: 1.75rem !important;
  align-items: center !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
.autoridad__photo--large {
  max-width: min(86vw, 360px) !important;
  margin-inline: auto !important;
}
.photo-frame--rect {
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
}
.photo-badge {
  width: auto !important;
  height: auto !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 10px !important;
}
.photo-badge__num { font-size: 1.05rem !important; }
.photo-badge__label { font-size: 0.55rem !important; }
.photo-badge--years { top: 0.65rem !important; right: 0.65rem !important; left: auto !important; }
.photo-accent {
  width: 22px !important;
  height: 22px !important;
  border-width: 2px !important;
}

/* Tablet & desktop: foto a la izquierda + texto a la derecha */
@media (min-width: 900px) {
  .autoridad-layout--hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
    max-width: 1180px !important;
  }
  .autoridad__photo--large { max-width: 520px !important; }
  .photo-badge { padding: 0.85rem 1.1rem !important; border-radius: 16px !important; }
  .photo-badge__num   { font-size: 1.55rem !important; }
  .photo-badge__label { font-size: 0.65rem !important; }
  .photo-badge--years { top: 1.5rem !important; right: -1rem !important; }
  .photo-accent { width: 28px !important; height: 28px !important; }
  .photo-accent--tl { top: -8px !important; left: -8px !important; }
  .photo-accent--br { bottom: -8px !important; right: -8px !important; }
}
@media (min-width: 1200px) {
  .autoridad-layout--hero { max-width: 1180px !important; gap: 5rem !important; }
  .autoridad__photo--large { max-width: 560px !important; }
}

/* ── 2. OFERTA — KILL GREEN BLOB BLEED ────────────────── */
/* Tame all decorative shapes so they don't bleed into empty space */
.oferta--enhanced .oferta-shape,
.oferta--enhanced .oferta-bg__diagonal,
.oferta--enhanced .oferta-dots {
  display: none !important;
}
.oferta--enhanced .fx-ambient-orb--oferta {
  width: 460px !important;
  height: 280px !important;
  opacity: 0.4;
  background: radial-gradient(ellipse, rgba(26,127,75,0.06) 0%, transparent 70%) !important;
}
.oferta--enhanced .oferta-bg__wash {
  opacity: 0.5 !important;
}
.oferta--enhanced .oferta-bg__grid {
  opacity: 0.35 !important;
}
/* Hide the small precio-glow circular halo that was overflowing */
.oferta--enhanced .precio-glow,
.oferta--enhanced .precio-ring {
  opacity: 0.6 !important;
}
/* Soften the precio-bloque border ring so it doesn't spill light */
.oferta--enhanced .precio-bloque__border {
  filter: blur(1px) !important;
  opacity: 0.55 !important;
}

/* ── 3. OFERTA single-column — make it premium ─────────── */
.oferta--enhanced .includes-chips {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.85rem !important;
}
.oferta--enhanced .include-chip {
  transform: none !important;
}
.oferta--enhanced .include-chip:hover {
  transform: translateY(-3px) !important;
}
/* The guarantee chip spans both columns at the bottom */
.oferta--enhanced .include-chip--guarantee {
  grid-column: 1 / -1 !important;
}

@media (max-width: 720px) {
  .oferta--enhanced .includes-chips {
    grid-template-columns: 1fr !important;
  }
}

/* Precio block — make it the visual hero */
.precio-bloque {
  width: 100% !important;
  max-width: 640px !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — MAX OPTIMIZATION (95% of traffic)
   ═══════════════════════════════════════════════════════════ */

/* Tighter section padding on mobile to reduce scroll friction */
@media (max-width: 640px) {
  .section { padding: 2rem 0 !important; }
  .container { padding-inline: 1rem !important; }

  /* Scarcity bar — micro */
  .scarcity-bar {
    font-size: 0.72rem;
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
    line-height: 1.25;
  }

  /* Hero — top alignment */
  .hero__inner { padding-top: 1rem !important; }
  .hero__logo { margin-bottom: 1rem; }
  .badge--live {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.65rem !important;
  }

  /* Headline — perfectly distributed */
  .hero__headline {
    font-size: clamp(1.8rem, 8vw, 2.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
    max-width: 340px;
    margin-inline: auto;
    margin-bottom: 0.85rem !important;
  }
  .hero__headline strong {
    background: linear-gradient(90deg, #24B85A 0%, #FFC83D 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
  }
  .hero__sub {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    max-width: 340px;
    margin-inline: auto;
    padding: 0 0.5rem;
  }
  .hero__sub strong {
    color: #4ADE80;
    font-weight: 700;
  }

  /* VSL — give breathing room */
  .hero__vsl { margin-top: 1rem; }

  /* Mega CTA */
  .btn--mega {
    font-size: 1rem !important;
    padding: 0.95rem 1rem !important;
    width: 100%;
    min-width: 0;
  }
  .hero__trust-row {
    font-size: 0.7rem;
    gap: 0.4rem 0.85rem;
  }

  /* Section title polish */
  .section-title {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    text-wrap: balance;
  }
  .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5;
    max-width: 380px;
    margin-inline: auto;
  }

  /* Oferta on mobile — tight */
  .oferta--enhanced { padding-block: 2.25rem !important; }
  .oferta-badge {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.85rem !important;
  }
  .oferta-savings {
    flex-wrap: wrap;
    gap: 0.4rem !important;
    padding: 0.55rem 0.85rem !important;
  }
  .oferta-savings__old { font-size: 1rem !important; }
  .oferta-savings__new { font-size: 1.5rem !important; }
  .oferta-live-badge {
    font-size: 0.72rem;
    padding: 0.3rem 0.65rem;
  }

  .precio-bloque {
    padding: 1.5rem 1.1rem !important;
    border-radius: 22px !important;
  }
  .precio-bloque__popular {
    font-size: 0.66rem !important;
    padding: 0.4rem 0.85rem !important;
  }
  .valor-stack { margin: 0.25rem 0 1rem !important; }
  .valor-row { font-size: 0.85rem !important; padding: 0.5rem 0 !important; }
  .valor-row--total { font-size: 0.98rem !important; padding-top: 0.85rem !important; }
  .precio-hoy { font-size: 0.88rem !important; }
  .precio-numero {
    font-size: clamp(3.5rem, 16vw, 4.5rem) !important;
    margin: 0.3rem 0 !important;
  }
  .precio-glow { width: 140px !important; height: 140px !important; }
  .precio-ring { width: 170px !important; height: 170px !important; }
  .oferta-arrow-down svg { width: 18px; height: 24px; }
  .garantia-badge { font-size: 0.78rem !important; padding: 0.4rem 0.8rem !important; }
  .oferta-cta-btn {
    font-size: 0.98rem !important;
    padding: 0.95rem 1rem !important;
  }
  .urgency-note { font-size: 0.78rem !important; }
  .payment-trust { font-size: 0.7rem; gap: 0.5rem !important; }

  /* Bonos cards — tight on mobile */
  .bono-card {
    min-height: auto !important;
    padding: 1.5rem 1.2rem 1.25rem !important;
  }
  .bono-card h3 { font-size: 1.05rem !important; }
  .bono-card p { font-size: 0.88rem !important; }
  .bono-card .bono-price-bg { font-size: 4.5rem !important; }
  .bono-sticker {
    width: 64px !important; height: 64px !important;
    top: -8px !important; right: -8px !important;
    border-width: 2px !important;
  }
  .bono-sticker .sticker-free { font-size: 0.8rem !important; }
  .bono-sticker .sticker-was { font-size: 0.55rem !important; }

  /* Para Quien cards — flat & tight */
  .para-quien--dark .pq-grid--enhanced {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .para-quien--dark .pq-divider--enhanced { display: none !important; }
  .para-quien--dark .pq-col__title { font-size: 1.05rem !important; }
  .para-quien--dark .pq-list li {
    font-size: 0.92rem !important;
    padding: 0.7rem 0 !important;
  }

  /* Testimonials */
  .testimonials-strip { gap: 0.85rem !important; }
  .testimonial-card { padding: 1rem 1.1rem !important; }
  .testimonial-card__quote { font-size: 0.9rem !important; }
  .testimonial-card__author { font-size: 0.78rem !important; }

  /* CTA Final */
  .cta-final__headline {
    font-size: clamp(1.55rem, 7vw, 2.05rem) !important;
    text-wrap: balance;
    margin-bottom: 0.85rem;
  }
  .cta-final__body { font-size: 0.92rem !important; line-height: 1.5; }
  .cta-final__body br { display: none; }

  /* Footer — micro */
  .footer { padding: 1.5rem 0 !important; }

  /* Sticky CTA bottom — slimmer */
  .sticky-cta { padding: 0.5rem 0.75rem !important; }
  .sticky-cta__info { display: none !important; }
  .sticky-cta__btn {
    flex: 1;
    justify-content: center;
    font-size: 0.92rem !important;
    padding: 0.6rem 0.9rem !important;
  }

  /* Brands — compact */
  .autoridad-brands__logos--real {
    gap: 1rem 1.2rem !important;
    padding: 0.85rem 0.5rem !important;
  }
  .brand-logo-real {
    height: 24px !important;
    max-width: 78px !important;
  }
}

/* Ultra narrow */
@media (max-width: 360px) {
  .hero__headline {
    font-size: 1.55rem !important;
    max-width: 290px;
  }
  .hero__sub {
    font-size: 0.88rem !important;
    max-width: 290px;
  }
  .precio-numero { font-size: 3rem !important; }
  .scarcity-bar { font-size: 0.66rem; padding: 0.35rem 0.55rem; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP polish (≥1200px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .container { max-width: 1240px !important; }
  .hero__headline { max-width: 920px; margin-inline: auto; }
  .hero__sub { max-width: 680px; margin-inline: auto; }
  .autoridad-layout--hero {
    max-width: 1180px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   COUNTDOWN TIMER — urgency multiplier
   ═══════════════════════════════════════════════════════════ */
.oferta-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, rgba(239,68,68,0.10) 0%, rgba(255,107,53,0.05) 100%);
  border: 1px solid rgba(239,68,68,0.22);
  padding: 0.85rem 1.5rem;
  border-radius: 16px;
  margin: 0.85rem auto 1rem;
  box-shadow: 0 16px 36px -12px rgba(239,68,68,0.18);
}
.oferta-countdown__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #DC2626;
  text-transform: uppercase;
}
.oferta-countdown__clock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.cd-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #FF6B35 0%, #DC2626 100%);
  color: #fff;
  padding: 0.5rem 0.7rem;
  min-width: 56px;
  border-radius: 10px;
  box-shadow:
    0 8px 20px -6px rgba(239,68,68,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
  line-height: 1;
}
.cd-num {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  margin-top: 0.2rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cd-sep {
  color: #DC2626;
  font-size: 1.3rem;
  font-weight: 900;
  animation: cd-blink 1s ease-in-out infinite;
}
@keyframes cd-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@media (max-width: 640px) {
  .oferta-countdown {
    padding: 0.7rem 1rem;
    gap: 0.45rem;
  }
  .oferta-countdown__label { font-size: 0.7rem; }
  .cd-unit {
    min-width: 46px;
    padding: 0.4rem 0.5rem;
  }
  .cd-num { font-size: 1.15rem; }
  .cd-lbl { font-size: 0.55rem; }
  .cd-sep { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL — Tame green orbs/blobs across entire page
   (Prevents bleed into empty space on wide layouts)
   ═══════════════════════════════════════════════════════════ */
.fx-ambient-orb {
  opacity: 0.55;
}
.fx-ambient-orb--oferta {
  opacity: 0.35 !important;
}
.oferta-shape,
.oferta-bg__diagonal,
.oferta-dots {
  display: none !important;
}
/* Beneficios shapes - tighter to viewport */
.beneficios-shape {
  opacity: 0.6 !important;
}

/* Sticky CTA bottom — make it stronger on mobile */
.sticky-cta {
  background: rgba(11, 29, 20, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(36,184,90,0.25) !important;
}
.sticky-cta__name { color: #fff !important; }
.sticky-cta__sub { color: rgba(255,255,255,0.65) !important; }
.sticky-cta__btn {
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 0.65rem 1.1rem !important;
  border-radius: 999px !important;
  box-shadow:
    0 14px 28px -8px rgba(36,184,90,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Pass 4 (2026-05-20)
   - Centered oferta header
   - Clean precio-bloque (no clutter)
   - KILL green spot/glow bleed
   - Photo proportional desktop/mobile
   - Hero promise — more striking
   ═══════════════════════════════════════════════════════════ */

/* ── 1. OFERTA HEADER — center stack ───────────────────── */
.oferta-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.1rem !important;
  text-align: center !important;
  max-width: 720px;
  margin-inline: auto;
}
.oferta-header > * {
  margin-left: auto !important;
  margin-right: auto !important;
}
.oferta-header .oferta-badge,
.oferta-header .oferta-countdown {
  display: inline-flex !important;
}
.oferta-header .section-title {
  margin: 0 auto !important;
}

/* ── 2. KILL GREEN SPOT / GLOW BLEED ───────────────────── */
/* Remove the radial glow halos that bleed outside the bloque */
.precio-glow,
.precio-ring,
.oferta-cta-glow,
.precio-bloque__shimmer,
.precio-bloque__border {
  display: none !important;
}
.sparkle { display: none !important; }
/* Soften shadow so it doesn't paint the whole left side */
.precio-bloque,
.precio-bloque--clean {
  box-shadow:
    0 24px 60px -22px rgba(26,127,75,0.20),
    0 12px 28px -12px rgba(0,0,0,0.10),
    0 0 0 1px rgba(36,184,90,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.precio-bloque:hover,
.precio-bloque--clean:hover {
  box-shadow:
    0 36px 80px -22px rgba(26,127,75,0.28),
    0 16px 36px -12px rgba(0,0,0,0.12),
    0 0 0 1px rgba(36,184,90,0.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Remove the heavy section-level orb that was bleeding into the empty area */
.oferta--enhanced .fx-ambient-orb--oferta { display: none !important; }
.oferta--enhanced::before {
  background:
    radial-gradient(700px circle at 50% 0%, rgba(36,184,90,0.05), transparent 50%) !important;
}
.oferta--enhanced .oferta-bg__wash { display: none !important; }

/* ── 3. PRECIO BLOQUE CLEAN — focused layout ───────────── */
.precio-bloque--clean {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem) !important;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.precio-valor-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(36,184,90,0.06);
  border: 1px solid rgba(36,184,90,0.16);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1A7F4B;
}
.precio-valor-line__label {
  color: #555;
  font-weight: 600;
  font-size: 0.82rem;
}
.precio-valor-line__old {
  text-decoration: line-through;
  color: #999;
  font-weight: 700;
}
.precio-valor-line__arrow {
  color: #1A7F4B;
  font-weight: 900;
}
.precio-valor-line__tag {
  background: linear-gradient(135deg, #FF6B35 0%, #DC2626 100%);
  color: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 14px -4px rgba(239,68,68,0.4);
}

.precio-real {
  text-align: center;
  margin: 0;
}
.precio-hoy {
  font-size: 0.95rem;
  color: #666;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.precio-numero {
  font-size: clamp(4.5rem, 13vw, 7rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #24B85A 0%, #1A7F4B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  animation: none !important;
}
.precio-currency {
  font-size: 0.55em;
  font-weight: 800;
  margin-left: 0.06em;
  letter-spacing: -0.04em;
}
.precio-sub {
  display: block;
  font-size: 0.85rem;
  color: #777;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
}

/* CTA — full width inside bloque */
.precio-bloque--clean .oferta-cta-wrap {
  width: 100%;
  margin: 0.25rem 0 0;
}
.precio-bloque--clean .oferta-cta-btn {
  width: 100%;
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1.5rem, 3vw, 2.5rem) !important;
}

.precio-bloque--clean .garantia-badge {
  margin: 0;
  background: linear-gradient(135deg, rgba(36,184,90,0.10), rgba(74,222,128,0.04));
  border: 1px solid rgba(36,184,90,0.22);
  color: #1A7F4B;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Payment trust strip */
.precio-bloque--clean .payment-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #888;
}
.precio-bloque--clean .payment-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── 4. PHOTO — proportional both ends ──────────────────── */
/* Desktop bigger, mobile reasonable */
@media (min-width: 961px) {
  .autoridad-layout--hero {
    grid-template-columns: 1.05fr 1fr !important;
    gap: 4rem !important;
    max-width: 1200px !important;
    align-items: center !important;
  }
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 560px !important;
  }
}
@media (min-width: 1280px) {
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 600px !important;
  }
}
@media (max-width: 960px) {
  .autoridad-layout--hero {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    text-align: center;
  }
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 420px !important;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 300px !important;
    width: 100% !important;
  }
  .photo-badge {
    width: 78px !important;
    height: 78px !important;
    border-radius: 18px !important;
  }
  .photo-badge__num { font-size: 1.25rem !important; }
  .photo-badge__label { font-size: 0.55rem !important; }
  .photo-badge--years { top: -14px !important; right: -14px !important; }
  .photo-accent { width: 54px !important; height: 54px !important; border-width: 3px !important; }
  .photo-accent--tl { top: -10px !important; left: -10px !important; }
  .photo-accent--br { bottom: -10px !important; right: -10px !important; }
}

/* ── 5. HERO PROMISE — more striking ────────────────────── */
.hero__headline {
  text-wrap: balance;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
}
.headline-line--main {
  opacity: 1 !important;
  font-size: 1em !important;
  color: rgba(255,255,255,0.96) !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
.headline-line--main strong {
  background: linear-gradient(90deg, #FFC83D 0%, #24B85A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  position: relative;
}
.headline-line--accent {
  font-size: 1.18em !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, #24B85A 0%, #4ADE80 35%, #FFC83D 70%, #24B85A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.045em !important;
  filter: drop-shadow(0 8px 28px rgba(36,184,90,0.35));
  animation: hero-accent-shift 5s ease-in-out infinite;
  display: block;
  text-shadow: none !important;
}
@keyframes hero-accent-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.headline-line--sub {
  font-size: 0.78em !important;
  font-style: normal !important;
  opacity: 1 !important;
  color: rgba(255,255,255,0.78) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.25rem;
}

.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.55 !important;
  text-wrap: balance;
}
.hero__sub strong {
  color: #4ADE80;
  font-weight: 700;
}

/* Glow ring behind headline on desktop */
@media (min-width: 961px) {
  .hero__headline {
    position: relative;
    z-index: 2;
  }
  .hero__headline::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(36,184,90,0.20), transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
  }
}

/* Mobile — most attention */
@media (max-width: 640px) {
  .hero__headline {
    font-size: clamp(1.95rem, 9vw, 2.4rem) !important;
    line-height: 1.05 !important;
    max-width: 340px;
    margin-inline: auto;
    margin-bottom: 1rem !important;
  }
  .headline-line--accent {
    font-size: 1.22em !important;
  }
  .hero__sub {
    font-size: 0.95rem !important;
    max-width: 340px;
    margin-inline: auto;
  }
  .hero__inner { padding-top: 0.75rem !important; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .hero__headline {
    font-size: clamp(2.4rem, 5.5vw, 3rem) !important;
    max-width: 620px;
    margin-inline: auto;
  }
}
@media (min-width: 961px) {
  .hero__headline {
    font-size: clamp(3rem, 4.5vw, 4rem) !important;
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Hide para-quien 3D rotations on left-align fix */
.para-quien--dark .section-header,
.para-quien--dark .pq-grid--enhanced {
  text-align: center !important;
}
.para-quien--dark .pq-cierre-wrap {
  text-align: center !important;
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Pass 5: COMPACT DESKTOP HERO
   Goal: Promesa + VSL visibles juntas sin scroll excesivo
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 961px) {
  /* Less vertical padding on the hero section */
  .hero {
    padding-top: clamp(1rem, 1.5vw, 1.5rem) !important;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
  }

  /* Smaller logo gap */
  .hero__logo {
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }

  /* Promise block — tighter top padding */
  .hero__promise {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 1100px !important;
  }

  /* Badge — small gap */
  .hero__promise .badge {
    margin: 0 auto 0.6rem !important;
  }

  /* Headline — compact desktop scale */
  .hero__promise .hero__headline,
  .hero__headline {
    font-size: clamp(2.2rem, 3.2vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    margin: 0 auto 0.55rem !important;
    max-width: 1080px !important;
  }
  .headline-line--main {
    font-size: 0.95em !important;
  }
  .headline-line--accent {
    font-size: 1.05em !important;
    letter-spacing: -0.045em !important;
  }
  .headline-line--sub {
    font-size: 0.72em !important;
    margin-top: 0.15rem !important;
  }

  /* Subtitle — smaller and tighter */
  .hero__promise .hero__sub,
  .hero__sub {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
    line-height: 1.4 !important;
    max-width: 640px !important;
    margin: 0 auto !important;
  }

  /* Bring VSL closer to the promise */
  .hero__promise + .hero-vsl,
  .hero-vsl {
    margin-top: 1rem !important;
  }

  /* Keep glow ring smaller so it doesn't add visual height */
  .hero__headline::before {
    width: 65% !important;
    height: 60% !important;
    filter: blur(28px) !important;
  }

  /* Hero VSL — slightly smaller max-width to fit comfortably */
  .hero-vsl {
    max-width: 880px !important;
  }
  .hero-vsl__header {
    margin-bottom: 0.55rem !important;
  }
  .hero-vsl__eyebrow {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.7rem !important;
  }
}

/* Larger screens — keep compact but slightly more breathing room */
@media (min-width: 1400px) {
  .hero {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero__promise .hero__headline,
  .hero__headline {
    font-size: clamp(2.6rem, 3vw, 3.2rem) !important;
    max-width: 1120px !important;
  }
  .hero-vsl { max-width: 920px !important; }
}


/* ═══════════════════════════════════════════════════════════
   LT1 ADV — Pass 6: Fix italic text clipping + bigger photo
   ═══════════════════════════════════════════════════════════ */

/* ── FIX: italic gradient text gets right edge clipped ─────
   Italic glyphs overshoot their box. background-clip:text + overflow
   hidden causes last letter to disappear. Add right padding + spacing. */
.section-title em,
.headline-line--accent,
.headline-line--main strong {
  display: inline-block;
  padding-right: 0.18em !important;
  padding-bottom: 0.06em !important;
  margin-right: -0.04em;
  overflow: visible;
}

/* Even more breathing room specifically for headline accent (largest italic) */
.headline-line--accent {
  padding-right: 0.22em !important;
}

/* ── PHOTO: bigger desktop / proportional everywhere ─── */
@media (min-width: 961px) {
  .autoridad-layout--hero {
    grid-template-columns: 1.15fr 1fr !important;
    gap: 4rem !important;
    max-width: 1240px !important;
    align-items: center !important;
  }
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 720px !important;
    width: 100% !important;
  }
}
@media (min-width: 1200px) {
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 760px !important;
  }
  .photo-badge {
    width: 150px !important;
    height: 150px !important;
    border-radius: 32px !important;
  }
  .photo-badge__num { font-size: 2.7rem !important; }
  .photo-badge__label { font-size: 0.82rem !important; }
  .photo-badge--years {
    top: -32px !important;
    right: -32px !important;
  }
}
@media (min-width: 1400px) {
  .autoridad__photo--large,
  .photo-frame--rect {
    max-width: 800px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 ADV — FINAL MOBILE-FIRST SOURCE OF TRUTH ═══════════════════════
   95% del tráfico es mobile-ads. Este bloque es la última palabra de la
   cascada e invalida overrides duplicados anteriores donde sea necesario.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. HERO — Mobile impeccable
   ──────────────────────────────────────────────────────────────── */

/* Reduce shimmer/duplicate animations en mobile sobre la línea accent */
@media (max-width: 960px) {
  .headline-line--accent {
    animation: none !important;
    filter: none !important;
  }
}

@media (max-width: 640px) {
  /* Hero respira sin saturar */
  .hero {
    padding-top: 1rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero__inner { padding-top: 0 !important; }
  .hero__logo  { margin-bottom: 1.2rem !important; }
  .hero__promise { margin-bottom: 1.1rem !important; padding-top: 0.5rem !important; }

  /* Badge LIVE más compacto */
  .badge--live {
    font-size: 0.72rem !important;
    padding: 0.32rem 0.7rem !important;
  }

  /* Headline: una única declaración autoritativa */
  .hero__headline {
    font-size: clamp(2rem, 8.4vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    max-width: min(380px, 94vw) !important;
    margin: 0 auto 0.9rem auto !important;
    text-wrap: balance;
  }
  .headline-line--main   { font-size: 0.85em !important; opacity: 0.92; }
  .headline-line--accent { font-size: 1em !important;    font-weight: 900; }
  .headline-line--sub    { font-size: 0.78em !important; opacity: 0.85; margin-top: 0.15em; }

  /* Sub-headline: ancho cómodo para no romper en 6 líneas */
  .hero__sub {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: min(440px, 94vw) !important;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.86) !important;
  }
  .hero__sub strong { color: #fff !important; }

  /* VSL: respiro y sin scroll horizontal */
  .hero-vsl { margin-top: 1.5rem !important; }
  .hero-vsl__wrap { margin: 0 !important; }
  .hero-vsl__eyebrow {
    font-size: 0.66rem !important;
    padding: 0.3rem 0.7rem !important;
    letter-spacing: 0.06em !important;
  }

  /* CTA mega: legible y con altura touch correcta */
  .hero__cta--mega { margin-top: 1.5rem !important; }
  .btn--mega {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    font-size: 1.02rem !important;
    padding: 1.05rem 1.25rem !important;
    min-height: 56px !important;
  }

  /* Trust row: 3 chips compactos sin solapar */
  .hero__trust-row {
    gap: 0.45rem 0.85rem !important;
    font-size: 0.72rem !important;
    margin-top: 0.85rem !important;
  }
  .microcopy--mega {
    font-size: 0.78rem !important;
    margin-top: 0.65rem !important;
  }
}

/* Sub-mobile (iPhone SE / Android XS 360-375px) */
@media (max-width: 380px) {
  .hero__headline {
    font-size: clamp(1.78rem, 9vw, 2.15rem) !important;
  }
  .hero__sub { font-size: 0.94rem !important; }
  .btn--mega {
    font-size: 0.96rem !important;
    padding: 0.95rem 1rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   2. PARA QUIÉN — Mobile centering fix
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .pq-grid,
  .pq-grid.pq-grid--enhanced {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  .pq-col,
  .pq-col.pq-col--enhanced {
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: left;
  }
  .pq-col__footer { justify-content: center !important; }
  .pq-divider { display: none !important; } /* en mobile el VS visual estorba */
}

@media (max-width: 480px) {
  .pq-col,
  .pq-col.pq-col--enhanced {
    max-width: 100% !important;
    padding: 1.25rem 1.1rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   3. BENEFIT CARDS — Mobile más compactas (acorta la sección)
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .benefit-grid.benefit-grid--enhanced {
    gap: 0.85rem !important;
  }
  /* Card mobile: layout horizontal compacto (icono + título a la izquierda) */
  .benefit-card.benefit-card--enhanced {
    padding: 1.1rem 1.15rem 1rem !important;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.85rem;
    row-gap: 0.4rem;
  }
  .benefit-card.benefit-card--enhanced::before {
    font-size: 4.2rem !important;
    top: -8px !important;
    right: -6px !important;
  }
  .benefit-card.benefit-card--enhanced .benefit-num {
    grid-column: 1 / -1;
    margin-bottom: 0.3rem !important;
    font-size: 0.65rem !important;
    padding: 0.18rem 0.5rem !important;
    align-self: start;
    justify-self: start;
  }
  .benefit-card.benefit-card--enhanced .benefit-icon {
    grid-column: 1;
    grid-row: 2;
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    margin-bottom: 0 !important;
    align-self: start;
  }
  .benefit-card.benefit-card--enhanced h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.98rem !important;
    margin-bottom: 0 !important;
    align-self: center;
    line-height: 1.25 !important;
  }
  .benefit-card.benefit-card--enhanced p {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 0.83rem !important;
    line-height: 1.45 !important;
    margin-top: 0.2rem;
  }
  .benefit-card.benefit-card--enhanced .benefit-result {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0.7rem !important;
    padding: 0.45rem 0.7rem !important;
    font-size: 0.68rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   4. AUTORIDAD (Manu) — Mobile typography + foto + jerarquía
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Layout mobile centrado y respirando */
  .autoridad-layout,
  .autoridad-layout.autoridad-layout--hero {
    gap: 2.2rem !important;
    text-align: left !important;
  }
  /* Foto MÁS grande y presente */
  .autoridad__photo,
  .autoridad__photo--large {
    max-width: min(88vw, 380px) !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .photo-frame--rect {
    aspect-ratio: 3 / 4;
  }
  .photo-badge--years {
    top: 0.85rem !important;
    right: 0.5rem !important;
    padding: 0.55rem 0.75rem !important;
  }
  .photo-badge__num   { font-size: 1.15rem !important; }
  .photo-badge__label { font-size: 0.58rem !important; }

  /* Overline + título cohesivos */
  .autoridad__text .overline,
  .section--soft .autoridad__text .overline {
    font-size: 0.78rem !important;
    margin-bottom: 0.7rem !important;
    text-align: left !important;
    display: block;
  }
  .autoridad__text .section-title,
  .section--soft .autoridad__text .section-title {
    font-size: clamp(1.9rem, 7.5vw, 2.3rem) !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
  }
  /* Párrafos legibles */
  .autoridad__text,
  .section--soft .autoridad__text {
    text-align: left !important;
  }
  .autoridad__text p,
  .section--soft .autoridad__text p {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1rem !important;
    color: var(--text-secondary, #475569) !important;
  }
  /* Último párrafo = pull quote sutil */
  .autoridad__text p:last-of-type {
    margin-bottom: 0 !important;
    padding-top: 1rem !important;
    border-top: 1px dashed rgba(34, 197, 94, 0.25) !important;
    font-size: 1.08rem !important;
    font-weight: 500 !important;
    color: var(--text, #0f172a) !important;
  }
  .autoridad__text p:last-of-type strong {
    color: var(--green-700, #15803d) !important;
  }
  /* Brands: card sutil */
  .autoridad-brands {
    margin-top: 1.5rem !important;
    padding-top: 1.4rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .autoridad-brands__label {
    font-size: 0.78rem !important;
    margin-bottom: 0.9rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   5. OFERTA — Fondo PREMIUM (mesh gradient + noise + halo precio)
   ──────────────────────────────────────────────────────────────── */

.section.oferta.oferta--enhanced {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(34, 197, 94, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 90% 30%, rgba(255, 200, 60, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(34, 197, 94, 0.07) 0%, transparent 60%),
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 1) 0%, rgba(247, 250, 248, 1) 60%, rgba(240, 247, 243, 1) 100%) !important;
  overflow: hidden;
  isolation: isolate;
}

/* Noise/grain texture sutil (sin imagen externa, via SVG inline) */
.section.oferta.oferta--enhanced::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Blob suaves visibles (rescatamos los "killed") */
.section.oferta.oferta--enhanced .oferta-bg__wash,
.section.oferta.oferta--enhanced .oferta-bg__grid,
.section.oferta.oferta--enhanced .oferta-bg__diagonal {
  display: block !important;
  opacity: 0.5 !important;
}
.section.oferta.oferta--enhanced .oferta-shape--blob-1 {
  display: block !important;
  position: absolute;
  width: 380px; height: 380px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.22) 0%, transparent 70%);
  filter: blur(70px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ofertaBlobFloat 16s ease-in-out infinite;
}
.section.oferta.oferta--enhanced .oferta-shape--blob-2 {
  display: block !important;
  position: absolute;
  width: 320px; height: 320px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, rgba(255, 200, 60, 0.18) 0%, transparent 70%);
  filter: blur(75px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ofertaBlobFloat 18s ease-in-out infinite reverse;
}
.section.oferta.oferta--enhanced .oferta-shape--ring,
.section.oferta.oferta--enhanced .oferta-shape--square,
.section.oferta.oferta--enhanced .oferta-shape--triangle {
  display: none !important; /* low-budget shapes */
}
.section.oferta.oferta--enhanced .oferta-dots {
  display: block !important;
  opacity: 0.4 !important;
}
.section.oferta.oferta--enhanced .fx-ambient-orb--oferta {
  display: block !important;
  opacity: 0.6 !important;
}

@keyframes ofertaBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, 30px) scale(1.08); }
}

/* Container por encima del fondo decorativo */
.section.oferta.oferta--enhanced .container { position: relative; z-index: 2; }

/* Bloque de precio con glass-effect premium */
.section.oferta.oferta--enhanced .precio-bloque,
.section.oferta.oferta--enhanced .precio-bloque--clean {
  position: relative;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
  box-shadow:
    0 30px 70px -25px rgba(34, 197, 94, 0.30),
    0 12px 28px -10px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

/* Halo verde animado detrás del precio */
.section.oferta.oferta--enhanced .precio-bloque::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0.08) 35%, transparent 65%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
  animation: precioHaloBreathe 6s ease-in-out infinite;
}
@keyframes precioHaloBreathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* Mobile oferta: simplificar la atmósfera para no saturar */
@media (max-width: 640px) {
  .section.oferta.oferta--enhanced .oferta-shape--blob-1,
  .section.oferta.oferta--enhanced .oferta-shape--blob-2 {
    width: 220px !important;
    height: 220px !important;
    filter: blur(50px) !important;
  }
  .section.oferta.oferta--enhanced .precio-bloque::after {
    width: 240px;
    height: 240px;
    filter: blur(38px);
  }
}

/* Mobile videos: removidas (eran source del problema) */

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 ADV — QA FIXES (post review adversarial) ═══════════════════════
   Resuelve los 3 HIGH y los MEDIUM/LOW del review automatizado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* FIX HIGH #1 removido: counter 01/06 deshabilitado (era source del problema) */

/* ── FIX HIGH #2: Performance — desactivar animaciones blur pesadas en mobile ──── */
@media (max-width: 720px) {
  .section.oferta.oferta--enhanced .oferta-shape--blob-1,
  .section.oferta.oferta--enhanced .oferta-shape--blob-2,
  .section.oferta.oferta--enhanced .precio-bloque::after,
  .beneficios-shape--1,
  .beneficios-shape--2,
  .beneficios-shape--3 {
    animation: none !important;
  }
  /* Reducir blur en mobile (era 70-80px, bajamos a 35-45px) */
  .section.oferta.oferta--enhanced .oferta-shape--blob-1,
  .section.oferta.oferta--enhanced .oferta-shape--blob-2 {
    filter: blur(38px) !important;
  }
  .beneficios-shape--1,
  .beneficios-shape--2,
  .beneficios-shape--3 {
    filter: blur(40px) !important;
  }
}

/* ── FIX HIGH #3: Halo verde detrás del precio era tapado por el card.
   El card tenía transform: translateZ(0) creando su propio stacking context,
   metiendo el ::after con z-index:-1 detrás de su fondo blanco. Solución:
   resetear transform/isolation para que el halo viva en el contexto de la sección. */
.section.oferta.oferta--enhanced .precio-bloque,
.section.oferta.oferta--enhanced .precio-bloque--clean {
  transform: none !important;
  isolation: auto !important;
}
/* Para reforzar visualmente: glow wrap-around en el card */
.section.oferta.oferta--enhanced .precio-bloque,
.section.oferta.oferta--enhanced .precio-bloque--clean {
  box-shadow:
    0 30px 70px -25px rgba(34, 197, 94, 0.30),
    0 0 90px -12px rgba(34, 197, 94, 0.28),
    0 12px 28px -10px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

/* ── FIX MEDIUM: brand-logo-real cascade conflict — single source of truth ── */
.brand-logo-real {
  height: 26px !important;
  width: auto !important;
  max-width: 110px !important;
}
@media (max-width: 600px) {
  .brand-logo-real {
    height: 22px !important;
    max-width: 90px !important;
  }
}

/* ── FIX MEDIUM: sticky-cta__btn touch target mobile ── */
@media (max-width: 767px) {
  .sticky-cta__btn {
    min-height: 48px !important;
    padding: 0.85rem 1.35rem !important;
  }
}

/* ── FIX MEDIUM: reforzar OFERTA — más profundidad cromática + ruido más visible ── */
.section.oferta.oferta--enhanced {
  background:
    radial-gradient(ellipse 75% 55% at 15% 20%, rgba(34, 197, 94, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 90% 30%, rgba(255, 200, 60, 0.11) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 50% 100%, rgba(34, 197, 94, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 75%, rgba(34, 197, 94, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 1) 0%, rgba(247, 250, 248, 1) 60%, rgba(238, 245, 240, 1) 100%) !important;
}
.section.oferta.oferta--enhanced::before {
  opacity: 0.10 !important;
  mix-blend-mode: overlay !important;
}
@media (max-width: 640px) {
  .section.oferta.oferta--enhanced::before {
    opacity: 0.06 !important;
  }
}
.section.oferta.oferta--enhanced .oferta-shape--blob-1 {
  width: 540px !important;
  height: 540px !important;
}
.section.oferta.oferta--enhanced .oferta-shape--blob-2 {
  width: 480px !important;
  height: 480px !important;
}

/* ── FIX LOW: padding-right huérfano de italic en headline accent ── */
.headline-line--accent {
  padding-right: 0.05em !important;
}
.headline-line--main strong {
  padding-right: 0 !important;
}

/* ── FIX LOW: countdown blink desactivado en mobile (menos cognitive load) ── */
@media (max-width: 640px) {
  .cd-sep { animation: none !important; opacity: 0.7 !important; }
}

/* ── FIX LOW: will-change marquee solo desktop ── */
@media (max-width: 720px) {
  .brands-marquee__track { will-change: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 ADV — FIX BATCH FINAL ════════════════════════════════════════════
   Mockup nuevo · Videos fix · Bio mobile · Animaciones rotativas off
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. MOCKUP MINIMALISTA NUEVO — Manual card con branding Academia ── */
.beneficios-mockup__visual { min-height: auto !important; }

/* Wrapper con perspectiva 3D */
.beneficios-mockup__visual {
  perspective: 1200px;
  perspective-origin: 50% 35%;
}

.manual-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  padding: 1.5rem 1.4rem 1.4rem;
  padding-left: 1.7rem; /* extra para que respire el lomo */
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(34, 197, 94, 0.18) 0%, transparent 60%),
    linear-gradient(155deg, #0d1f17 0%, #0a1612 50%, #06100b 100%);
  border-radius: 4px 16px 16px 4px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  /* Sombras multi-capa para sensación de objeto físico flotando */
  box-shadow:
    /* Sombra principal (objeto + suelo) */
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 2px 2px rgba(0, 0, 0, 0.22),
    0 4px 4px rgba(0, 0, 0, 0.20),
    0 8px 8px rgba(0, 0, 0, 0.18),
    0 16px 16px rgba(0, 0, 0, 0.16),
    0 32px 32px rgba(0, 0, 0, 0.14),
    /* Halo verde sutil */
    0 30px 80px -20px rgba(34, 197, 94, 0.35),
    /* Highlight superior interno */
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    /* Highlight inferior interno (papel) */
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  /* Rotación 3D sutil que da relieve sin parecer un "tarjeta inclinada" */
  transform: rotateY(-6deg) rotateX(2deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.6s ease;
}
.manual-card:hover {
  transform: rotateY(-2deg) rotateX(1deg) translateY(-6px);
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.28),
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 8px 8px rgba(0, 0, 0, 0.22),
    0 16px 16px rgba(0, 0, 0, 0.20),
    0 32px 32px rgba(0, 0, 0, 0.18),
    0 48px 60px rgba(0, 0, 0, 0.16),
    0 40px 100px -20px rgba(34, 197, 94, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Lomo del libro 3D — capa lateral con profundidad */
.manual-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(34, 197, 94, 0.35) 35%,
      rgba(34, 197, 94, 0.5) 60%,
      rgba(0, 0, 0, 0.4) 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -2px 0 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
}

/* Líneas de páginas (efecto de libro abierto desde el lateral) */
.manual-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Highlight diagonal sutil (luz reflejándose) */
    linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 55%, transparent 70%),
    /* Líneas de páginas verticales en el borde izquierdo */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 1px,
      rgba(255, 255, 255, 0.04) 1px,
      rgba(255, 255, 255, 0.04) 2px) left / 14px 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}

.manual-card__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}
.manual-card__logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  object-fit: contain;
}
.manual-card__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.manual-card__brand-name {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.manual-card__brand-by {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.manual-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
}
.manual-card__eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4ade80;
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
}
.manual-card__title {
  font-size: clamp(1.65rem, 4.5vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}
.manual-card__title em {
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manual-card__divider {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #22c55e 0%, transparent 100%);
  border-radius: 2px;
  margin-top: 0.2rem;
}
.manual-card__tagline {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin: 0;
  max-width: 18ch;
}

.manual-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}
.manual-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}
.manual-card__chip svg { color: rgba(255, 255, 255, 0.55); }
.manual-card__chip--accent {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

/* Mobile mockup ajustado */
@media (max-width: 720px) {
  .manual-card {
    max-width: 280px;
    padding: 1.25rem 1.15rem;
  }
  .manual-card__title { font-size: 1.55rem; }
  .manual-card__brand-name { font-size: 0.72rem; }
}

/* ── C. FIX BIOGRAFÍA MOBILE — Foto contenida correctamente, sin overflow ── */
@media (max-width: 640px) {
  /* La layout es una columna apilada */
  .autoridad-layout--hero,
  .autoridad-layout.autoridad-layout--hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1.75rem !important;
    text-align: left !important;
    padding-inline: 0 !important;
  }
  /* Wrapper de la foto: ancho controlado, centrado, SIN overflow */
  .autoridad__photo,
  .autoridad__photo--large {
    width: 100% !important;
    max-width: min(86vw, 360px) !important;
    margin: 0 auto !important;
    position: relative;
  }
  /* La foto INTERNA debe ocupar el wrapper, no excederlo */
  .photo-frame--rect {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }
  /* Esquinas decorativas mucho más pequeñas (eran 110px gigantes) */
  .photo-accent,
  .photo-accent--tl,
  .photo-accent--br {
    width: 22px !important;
    height: 22px !important;
    border-width: 2px !important;
  }
  .photo-accent--tl { top: -4px !important; left: -4px !important; }
  .photo-accent--br { bottom: -4px !important; right: -4px !important; }
  /* Badge "5+ años": INSIDE de la foto, no asomando fuera */
  .photo-badge,
  .photo-badge--years {
    top: 0.65rem !important;
    right: 0.65rem !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0.45rem 0.6rem !important;
    border-radius: 10px !important;
  }
  .photo-badge__num { font-size: 1.05rem !important; }
  .photo-badge__label { font-size: 0.55rem !important; }
  /* Caption dentro de la foto, no fuera */
  .photo-caption {
    left: 0.9rem !important;
    right: 0.9rem !important;
    bottom: 0.85rem !important;
  }
  .photo-caption__name { font-size: 0.95rem !important; }
  .photo-caption__role { font-size: 0.68rem !important; }
  /* Texto biografía: centrado mobile */
  .autoridad__text,
  .section--soft .autoridad__text {
    text-align: left !important;
  }
}

/* ── D. KILL rotating green line animations ── */
.vsl-ring,
.precio-bloque__border,
.precio-ring,
.pq-vs::before,
.pq-vs::after,
.pq-vs--enhanced::before,
.pq-vs--enhanced::after {
  animation: none !important;
}
/* Por si acaso, ocultamos el border rotativo del precio (era más distractor que útil) */
.precio-bloque__border { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ NUCLEAR RESET — Autoridad + Galería vídeos ════════════════════════════
   Usa #IDs para máxima especificidad. Sobrescribe TODO lo anterior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── #autoridad (Quién hay detrás) ───── */

/* Layout: mobile-first single column, NUNCA minmax que pueda desbordar */
#autoridad .autoridad-layout,
#autoridad .autoridad-layout--hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.75rem !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Foto: contenida, centrada, max 320px en mobile */
#autoridad .autoridad__photo,
#autoridad .autoridad__photo--large {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

#autoridad .photo-frame,
#autoridad .photo-frame--rect {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  background: #1a2520 !important;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
}
#autoridad .photo-frame img,
#autoridad .photo-frame--rect img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Overlay sutil para legibilidad de la caption */
#autoridad .photo-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%) !important;
  pointer-events: none !important;
}

/* Caption simple sobre la foto */
#autoridad .photo-caption {
  position: absolute !important;
  left: 1rem !important;
  right: 1rem !important;
  bottom: 0.85rem !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
  color: #fff !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#autoridad .photo-caption__name {
  font-size: 1rem !important;
  font-weight: 800 !important;
}
#autoridad .photo-caption__role {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Badge "5+ años" DENTRO de la foto, top-right */
#autoridad .photo-badge,
#autoridad .photo-badge--years {
  position: absolute !important;
  top: 0.7rem !important;
  right: 0.7rem !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0.4rem 0.6rem !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1 !important;
  gap: 0.1rem !important;
}
#autoridad .photo-badge__num {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #16a34a !important;
  letter-spacing: -0.03em !important;
}
#autoridad .photo-badge__label {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Accents: ELIMINADOS en mobile (eran 110px gigantes desbordando) */
#autoridad .photo-accent,
#autoridad .photo-accent--tl,
#autoridad .photo-accent--br {
  display: none !important;
}

/* Texto biografía */
#autoridad .autoridad__text {
  width: 100% !important;
  text-align: left !important;
}
#autoridad .autoridad__text .overline {
  text-align: left !important;
  display: inline-block !important;
}
#autoridad .autoridad__text .section-title {
  text-align: left !important;
}

/* Desktop: 2 columnas */
@media (min-width: 960px) {
  #autoridad .autoridad-layout,
  #autoridad .autoridad-layout--hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    align-items: center !important;
    gap: 4rem !important;
    max-width: 1180px !important;
    flex-direction: row !important;
  }
  #autoridad .autoridad__photo,
  #autoridad .autoridad__photo--large {
    max-width: 480px !important;
  }
  /* Restaurar accents decorativos en desktop */
  #autoridad .photo-accent { display: block !important; width: 28px !important; height: 28px !important; }
  #autoridad .photo-accent--tl { top: -8px !important; left: -8px !important; }
  #autoridad .photo-accent--br { bottom: -8px !important; right: -8px !important; }
  #autoridad .photo-badge,
  #autoridad .photo-badge--years {
    top: 1rem !important;
    right: -0.75rem !important;
    padding: 0.85rem 1.1rem !important;
  }
  #autoridad .photo-badge__num   { font-size: 1.45rem !important; }
  #autoridad .photo-badge__label { font-size: 0.62rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — FINAL POLISH ═══════════════════════════════════════════════════
   1. Hero compacto · 2. Subtítulo más grande · 3. Mockup 3D más relieve
   4. Fondos continuos · 5. Galería vídeos con min-height de respaldo
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. HERO — compactar texto para que la VSL no quede tan abajo
   ───────────────────────────────────────────────────────────── */
.hero .hero__inner {
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
}
.hero .hero__logo { margin-bottom: 0.85rem !important; }

.hero .hero__promise {
  padding-top: 0.25rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.5rem !important;
}
.hero .badge--live { margin-bottom: 0.6rem !important; }

.hero .hero__headline {
  line-height: 1.05 !important;
  margin: 0 auto 0.7rem auto !important;
}
.hero .headline-line { display: block !important; line-height: 1.05 !important; }
.hero .headline-line--main   { margin-bottom: 0.1em !important; }
.hero .headline-line--accent { margin-bottom: 0.1em !important; }
.hero .headline-line--sub    { margin-bottom: 0 !important; }

.hero .hero__sub {
  margin: 0 auto 0 auto !important;
}

/* VSL más cerca del headline */
.hero .hero-vsl,
.hero .hero__vsl {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.hero .hero-vsl__header { margin-bottom: 0.65rem !important; }

/* ─────────────────────────────────────────────────────────────
   2. SUBTÍTULO HERO — más grande y legible
   ───────────────────────────────────────────────────────────── */
.hero .hero__sub {
  font-size: 1.12rem !important;
  line-height: 1.5 !important;
  max-width: min(480px, 94vw) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.hero .hero__sub strong { color: #ffffff !important; font-weight: 700 !important; }

@media (min-width: 720px) {
  .hero .hero__sub {
    font-size: 1.2rem !important;
    max-width: 580px !important;
  }
}
@media (min-width: 1024px) {
  .hero .hero__sub {
    font-size: 1.25rem !important;
    max-width: 640px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. MOCKUP — Más relieve y profundidad 3D
   ───────────────────────────────────────────────────────────── */
.beneficios-mockup__visual {
  perspective: 1400px !important;
  perspective-origin: 30% 50% !important;
}

.beneficios-mockup__visual .manual-card {
  /* transform eliminado para que mockupShowcase animation gane */
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  /* Sombras MULTI-CAPA simulando objeto físico flotando */
  box-shadow:
    /* Sombra interna del lomo */
    inset 16px 0 24px -16px rgba(0, 0, 0, 0.6),
    /* Sombra base proyectada al suelo (gradiente progresivo) */
    0 2px 1px rgba(0, 0, 0, 0.3),
    0 4px 3px rgba(0, 0, 0, 0.28),
    0 8px 6px rgba(0, 0, 0, 0.25),
    0 12px 10px rgba(0, 0, 0, 0.22),
    0 18px 16px rgba(0, 0, 0, 0.20),
    0 28px 28px rgba(0, 0, 0, 0.18),
    0 42px 44px rgba(0, 0, 0, 0.16),
    /* Halo verde envolvente */
    0 50px 100px -20px rgba(34, 197, 94, 0.45),
    0 0 60px -10px rgba(34, 197, 94, 0.3),
    /* Brillo superior del papel */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.6s ease !important;
}

.beneficios-mockup__visual .manual-card:hover {
  /* transform eliminado - el hover ahora solo pausa la animación, queda donde esté */
  box-shadow:
    inset 14px 0 22px -14px rgba(0, 0, 0, 0.55),
    0 3px 2px rgba(0, 0, 0, 0.32),
    0 6px 4px rgba(0, 0, 0, 0.3),
    0 12px 8px rgba(0, 0, 0, 0.28),
    0 20px 16px rgba(0, 0, 0, 0.25),
    0 32px 28px rgba(0, 0, 0, 0.22),
    0 48px 44px rgba(0, 0, 0, 0.2),
    0 64px 64px rgba(0, 0, 0, 0.18),
    0 80px 120px -22px rgba(34, 197, 94, 0.55),
    0 0 90px -8px rgba(34, 197, 94, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

/* Lomo del libro: MÁS pronunciado con páginas visibles */
.beneficios-mockup__visual .manual-card::before {
  width: 18px !important;
  background:
    /* Sombra interna lado derecho del lomo */
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(34, 197, 94, 0.4) 30%,
      rgba(34, 197, 94, 0.55) 55%,
      rgba(0, 0, 0, 0.5) 100%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -3px 0 6px rgba(0, 0, 0, 0.6) !important;
}

/* "Páginas" del libro visibles desde el lateral derecho (3D feel) */
.beneficios-mockup__visual .manual-card::after {
  background:
    /* Reflejo de luz diagonal */
    linear-gradient(125deg, transparent 28%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.025) 55%, transparent 68%),
    /* Borde derecho con páginas internas (líneas claras horizontales muy finas) */
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 3px) right / 6px 100% no-repeat,
    /* Líneas del lomo izquierdo */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 1px,
      rgba(255, 255, 255, 0.04) 1px,
      rgba(255, 255, 255, 0.04) 2px) left / 18px 100% no-repeat !important;
}

/* En móvil, reducimos la rotación para que no recorte */
@media (max-width: 720px) {
  .beneficios-mockup__visual .manual-card {
    /* transform mobile eliminado - lo controla mockupShowcase */
  }
  .beneficios-mockup__visual .manual-card:hover {
    /* hover transform eliminado para no bloquear la animación */
  }
}

/* ─────────────────────────────────────────────────────────────
   4. FONDOS CONTINUOS — secciones del mismo color se funden
   Eliminamos bordes/transiciones visibles entre secciones
   contiguas del mismo color family (dark↔dark, light↔light)
   ───────────────────────────────────────────────────────────── */

/* Quitar bordes y separadores entre secciones */
.section + .section,
section + section { border-top: 0 !important; }

/* Variables de color por sección (para unificar) */
:root {
  --bg-dark-base: #0a1410;
  --bg-dark-strong: #06100b;
  --bg-light-base: #ffffff;
  --bg-light-soft: #f7fbf8;
}

/* DARK FAMILY — Beneficios + Para Quien + Bonos + Galería + CTA Final */
.section.beneficios,
.section.para-quien.para-quien--dark,
.section.section--green.bonos,
.section.galeria-videos,
.section--green-cta {
  background-color: var(--bg-dark-base) !important;
}
/* Las que tienen overlay decorativo ya gradient se mantienen, pero el color base
   es ahora unificado. Eliminamos solo el escalón visible al cambiar. */

/* Beneficios → Para Quien: continuo (ambos dark) */
.section.beneficios { padding-bottom: 3rem !important; }
.section.para-quien.para-quien--dark { padding-top: 3rem !important; }

/* Para Quien → Oferta: cambio de color (dark → light), MANTIENE separación natural */

/* Oferta → Bonos: cambio de color (light → dark), MANTIENE separación natural */

/* Bonos → Autoridad: cambio de color (dark → soft white), MANTIENE separación natural */

/* Autoridad → Galería: cambio de color (soft → dark), MANTIENE separación natural */

/* Galería → FAQs: cambio de color (dark → white), MANTIENE separación natural */

/* FAQs → CTA Final: cambio de color (white → dark), MANTIENE separación natural */

/* LIGHT FAMILY — Oferta y Autoridad (en caso de quedar adyacentes) */
.section.section--white,
.section.section--soft {
  background-color: var(--bg-light-base) !important;
}
/* Oferta tiene su propio gradient atmosférico mantenido — no lo tocamos */
.section.oferta.oferta--enhanced { background-color: transparent !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — HERO TYPOGRAPHY POLISH ═════════════════════════════════════════
   Reescribe la tipografía del headline con jerarquía marcada y texto en
   máximo 2-3 líneas visualmente equilibradas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container del headline: ancho cómodo para que cada línea respire */
.hero .hero__headline {
  max-width: min(680px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 1.1rem !important;
  text-wrap: balance;
}

/* Línea 1 — "Convierte el FPV en una" — más sutil, peso medio, blanco apagado */
.hero .headline-line {
  display: block !important;
  line-height: 1.08 !important;
}
.hero .headline-line--main {
  font-size: clamp(1.1rem, 4.2vw, 1.5rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing: 0.005em !important;
  margin-bottom: 0.25rem !important;
  text-transform: none !important;
}
.hero .headline-line--main strong {
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 0.02em 0.18em !important;
  background: rgba(34, 197, 94, 0.18) !important;
  border-radius: 4px !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Línea 2 — "habilidad por la que te paguen" — PROTAGONISTA con gradiente */
.hero .headline-line--accent {
  font-size: clamp(1.85rem, 7.5vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 35%, #86efac 60%, #4ade80 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.035em !important;
  padding: 0.05em 0 0.12em 0 !important;
  margin: 0 !important;
  filter: drop-shadow(0 4px 20px rgba(74, 222, 128, 0.25)) !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Línea 3 — "empezando bien desde el día 1" — sutil con micro-acento */
.hero .headline-line--sub {
  position: relative !important;
  font-size: clamp(1rem, 3.8vw, 1.3rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.015em !important;
  margin-top: 0.4rem !important;
  font-style: normal !important;
}
.hero .headline-line--sub::before {
  content: '— ' !important;
  color: #4ade80 !important;
  font-weight: 700 !important;
  margin-right: 0.1em !important;
}

/* Resto del texto sub (debajo del headline) bien proporcionado */
.hero .hero__sub {
  text-align: center !important;
}

/* Mobile ultra-pequeño (320-360px) */
@media (max-width: 380px) {
  .hero .hero__headline {
    max-width: 94vw !important;
    margin-bottom: 0.9rem !important;
  }
  .hero .headline-line--main { font-size: 1rem !important; }
  .hero .headline-line--accent { font-size: clamp(1.65rem, 9vw, 2rem) !important; letter-spacing: -0.03em !important; }
  .hero .headline-line--sub { font-size: 0.95rem !important; }
}

/* Tablet+ : máximo brillo */
@media (min-width: 720px) {
  .hero .hero__headline {
    max-width: 720px !important;
  }
  .hero .headline-line--main { font-size: 1.35rem !important; }
  .hero .headline-line--accent {
    font-size: 2.6rem !important;
    filter: drop-shadow(0 6px 28px rgba(74, 222, 128, 0.3)) !important;
  }
  .hero .headline-line--sub { font-size: 1.2rem !important; }
}

/* Desktop grande */
@media (min-width: 1024px) {
  .hero .headline-line--main { font-size: 1.5rem !important; }
  .hero .headline-line--accent { font-size: 3.1rem !important; }
  .hero .headline-line--sub { font-size: 1.3rem !important; }
}

/* ── HERO — Texto más brillante (sin grises tenues) ──────────────────────── */

.hero .headline-line--main {
  color: rgba(255, 255, 255, 0.96) !important; /* casi blanco puro */
  font-weight: 700 !important;
  opacity: 1 !important;
}
.hero .headline-line--main strong {
  color: #ffffff !important;
  background: rgba(34, 197, 94, 0.28) !important;
  padding: 0.04em 0.22em !important;
  border-radius: 5px !important;
}

.hero .headline-line--sub {
  color: rgba(255, 255, 255, 0.92) !important; /* claramente legible */
  font-weight: 600 !important;
  opacity: 1 !important;
}
.hero .headline-line--sub::before {
  color: #4ade80 !important;
  font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — ESCALA TIPOGRÁFICA UNIFICADA + FOTO VERTICAL DESKTOP ═══════════
   1 type-scale claro y consistente en TODA la landing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ESCALA BASE (variables) ──────────────────────────────────────── */
:root {
  --fs-display-mobile: 2.2rem;   /* Hero accent / display extra-grande */
  --fs-display-desk:   3.2rem;
  --fs-h2-mobile: 1.65rem;       /* Section titles (Esto es lo que harás, etc) */
  --fs-h2-desk:   2.15rem;
  --fs-h3-mobile: 1.1rem;        /* Card titles (benefit, bono, video) */
  --fs-h3-desk:   1.2rem;
  --fs-lead-mobile: 1.05rem;     /* Subtítulos, párrafos lead */
  --fs-lead-desk:   1.15rem;
  --fs-body-mobile: 0.95rem;     /* Cuerpo regular */
  --fs-body-desk:   1rem;
  --fs-small: 0.85rem;           /* Texto secundario */
  --fs-overline: 0.75rem;        /* Overlines / eyebrows */
}

/* ─────────── SECTION TITLES (H2) ─────────── */
.section-title,
.section--white .section-title,
.section--soft .section-title,
.section--green .section-title,
.section .section-title {
  font-size: var(--fs-h2-mobile) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}
@media (min-width: 720px) {
  .section .section-title { font-size: var(--fs-h2-desk) !important; }
}
@media (min-width: 1024px) {
  .section .section-title { font-size: calc(var(--fs-h2-desk) + 0.15rem) !important; }
}

/* ─────────── SECTION SUBTITLES / LEADS ─────────── */
.section-subtitle,
.section .section-subtitle {
  font-size: var(--fs-lead-mobile) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  max-width: 620px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .section .section-subtitle { font-size: var(--fs-lead-desk) !important; }
}

/* ─────────── OVERLINES / EYEBROWS ─────────── */
.overline,
.section .overline {
  font-size: var(--fs-overline) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* ─────────── CARD TITLES (H3) ─────────── */
.benefit-card h3,
.bono-card h3,
.pq-col__title,
.benefit-card.benefit-card--enhanced h3 {
  font-size: var(--fs-h3-mobile) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
@media (min-width: 720px) {
  .benefit-card h3,
  .bono-card h3,
  .pq-col__title,
  .benefit-card.benefit-card--enhanced h3 { font-size: var(--fs-h3-desk) !important; }
}

/* ─────────── CARD BODY / PARAGRAPHS ─────────── */
.benefit-card p,
.bono-card p,
.pq-list li,
.benefit-card.benefit-card--enhanced p {
  font-size: var(--fs-body-mobile) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}
@media (min-width: 720px) {
  .benefit-card p,
  .bono-card p,
  .pq-list li,
  .benefit-card.benefit-card--enhanced p { font-size: var(--fs-body-desk) !important; }
}

/* ─────────── AUTORIDAD TEXT ─────────── */
#autoridad .autoridad__text p {
  font-size: var(--fs-lead-mobile) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
@media (min-width: 720px) {
  #autoridad .autoridad__text p { font-size: var(--fs-lead-desk) !important; }
}

/* ─────────── FAQ ─────────── */
.faq-question {
  font-size: var(--fs-lead-mobile) !important;
  font-weight: 700 !important;
}
.faq-answer p,
.faq-inner p {
  font-size: var(--fs-body-mobile) !important;
  line-height: 1.6 !important;
}
@media (min-width: 720px) {
  .faq-question { font-size: var(--fs-lead-desk) !important; }
  .faq-answer p, .faq-inner p { font-size: var(--fs-body-desk) !important; }
}

/* ─────────── MICROCOPY ─────────── */
.microcopy,
.cta-final__guarantee,
.galeria-bottom p,
.checkout-summary__sub,
.hero-vsl__eyebrow {
  font-size: var(--fs-small) !important;
  line-height: 1.5 !important;
}

/* ─────────── CTA FINAL ─────────── */
.cta-final__headline {
  font-size: var(--fs-h2-mobile) !important;
  line-height: 1.15 !important;
}
@media (min-width: 720px) {
  .cta-final__headline { font-size: calc(var(--fs-h2-desk) + 0.4rem) !important; }
}
.cta-final__body {
  font-size: var(--fs-lead-mobile) !important;
  line-height: 1.6 !important;
}
@media (min-width: 720px) {
  .cta-final__body { font-size: var(--fs-lead-desk) !important; }
}

/* ─────────── VIDEO INFO ─────────── */
.video-category {
  font-size: var(--fs-small) !important;
  font-weight: 700 !important;
}
.video-title-text {
  font-size: var(--fs-body-mobile) !important;
  line-height: 1.4 !important;
}
@media (min-width: 720px) {
  .video-title-text { font-size: var(--fs-body-desk) !important; }
}

/* ─────────── BONOS ─────────── */
.bono-card h3 {
  font-size: var(--fs-h3-mobile) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
@media (min-width: 720px) {
  .bono-card h3 { font-size: var(--fs-h3-desk) !important; }
}

/* ─────────── FOOTER ─────────── */
.footer p,
.footer a,
.footer span {
  font-size: var(--fs-small) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOTO MANU — Más vertical y prominente en DESKTOP también
   ═══════════════════════════════════════════════════════════════════════════ */

/* En mobile ya está vertical (3:4). En desktop la hacemos MÁS estrecha y alta */
@media (min-width: 960px) {
  #autoridad .autoridad__photo,
  #autoridad .autoridad__photo--large {
    max-width: 420px !important;  /* más estrecho (era 480) */
    width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  #autoridad .photo-frame,
  #autoridad .photo-frame--rect {
    aspect-ratio: 2 / 3 !important; /* ratio MÁS vertical (era 3/4) */
    border-radius: 18px !important;
  }
  /* La grid layout: ajustamos columnas para que la foto sea proporcional */
  #autoridad .autoridad-layout,
  #autoridad .autoridad-layout--hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
    gap: 5rem !important;
    align-items: center !important;
  }
}
@media (min-width: 1200px) {
  #autoridad .autoridad__photo,
  #autoridad .autoridad__photo--large {
    max-width: 460px !important;
  }
}

/* ── FIX foto vertical desktop: anular height: 300px del wrapper ───────── */
@media (min-width: 960px) {
  #autoridad .autoridad__photo,
  #autoridad .autoridad__photo--large {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
  }
  #autoridad .photo-frame,
  #autoridad .photo-frame--rect {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
  }
  #autoridad .photo-frame img,
  #autoridad .photo-frame--rect img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — KILL ICON BOUNCE + MOCKUP SPECTACULAR ANIMATION ════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KILL animación bounce de los cuadraditos icono beneficios ─────────── */
.benefit-card.is-visible .benefit-icon svg,
.benefit-card .benefit-icon svg,
.benefit-card.benefit-card--enhanced .benefit-icon svg {
  animation: none !important;
}
/* También quitar el reveal del número (para coherencia) */
.benefit-card.is-visible .benefit-num {
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   MOCKUP — Animación espectacular: 3D showcase + shimmer + float
   El libro se exhibe como un producto en una vitrina giratoria,
   con luz reflejándose periódicamente sobre la portada.
   ════════════════════════════════════════════════════════════════════════ */

/* Wrapper con perspectiva profunda */
.beneficios-mockup__visual {
  perspective: 1600px !important;
  perspective-origin: 50% 50% !important;
  padding: 2rem 1rem !important; /* espacio para que rote sin recortar */
}

/* La animación principal: rotación 3D continua + float */
.beneficios-mockup__visual .manual-card {
  animation: mockupShowcase 8s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  position: relative;
}

@keyframes mockupShowcase {
  0% {
    transform: perspective(1600px) rotateY(-12deg) rotateX(3deg) translateY(0) translateZ(0);
  }
  25% {
    transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) translateY(-12px) translateZ(20px);
  }
  50% {
    transform: perspective(1600px) rotateY(12deg) rotateX(-2deg) translateY(0) translateZ(0);
  }
  75% {
    transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) translateY(-8px) translateZ(15px);
  }
  100% {
    transform: perspective(1600px) rotateY(-12deg) rotateX(3deg) translateY(0) translateZ(0);
  }
}

/* Pausar al pasar el cursor para que el usuario pueda leer */
.beneficios-mockup__visual:hover .manual-card {
  animation-play-state: paused !important;
  transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-6px) translateZ(40px) !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

/* SHIMMER: luz que recorre la portada diagonalmente */
.beneficios-mockup__visual .manual-card .manual-card__main::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 55%,
    transparent 62%
  );
  pointer-events: none;
  animation: mockupShimmer 6s ease-in-out infinite;
  animation-delay: 1s;
  z-index: 3;
}

@keyframes mockupShimmer {
  0%   { transform: translate(-80%, -80%) rotate(0deg); opacity: 0; }
  20%  { opacity: 0.4; }
  50%  { transform: translate(0%, 0%) rotate(0deg); opacity: 0.6; }
  80%  { opacity: 0.2; }
  100% { transform: translate(80%, 80%) rotate(0deg); opacity: 0; }
}

/* SOMBRA bajo el libro que también respira con la animación */
.beneficios-mockup__visual .manual-card::before {
  /* El lomo del libro - mejora con la perspectiva */
  width: 22px !important;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(34, 197, 94, 0.5) 30%,
      rgba(34, 197, 94, 0.65) 60%,
      rgba(0, 0, 0, 0.55) 100%) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -4px 0 10px rgba(0, 0, 0, 0.7) !important;
  animation: mockupSpineGlow 8s ease-in-out infinite !important;
}

@keyframes mockupSpineGlow {
  0%, 100% { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08), inset -4px 0 10px rgba(0, 0, 0, 0.7); }
  50%      { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.15), inset -4px 0 14px rgba(0, 0, 0, 0.85), 0 0 20px rgba(34, 197, 94, 0.3); }
}

/* HALO de fondo que pulsa siguiendo la rotación */
.beneficios-mockup__visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34, 197, 94, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  animation: mockupHaloBreathe 8s ease-in-out infinite;
  z-index: 0;
}
.beneficios-mockup__visual { position: relative; }

@keyframes mockupHaloBreathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
}

/* Sombra proyectada al "suelo" debajo del libro - también animada */
.beneficios-mockup__visual::after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 70%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  animation: mockupShadow 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes mockupShadow {
  0%, 100% { transform: translate(-50%, 0) scaleX(1); opacity: 0.5; }
  25%      { transform: translate(-50%, 8px) scaleX(0.85); opacity: 0.35; }
  50%      { transform: translate(-50%, 0) scaleX(1); opacity: 0.5; }
  75%      { transform: translate(-50%, 6px) scaleX(0.9); opacity: 0.4; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .beneficios-mockup__visual .manual-card,
  .beneficios-mockup__visual::before,
  .beneficios-mockup__visual::after,
  .beneficios-mockup__visual .manual-card::before,
  .beneficios-mockup__visual .manual-card .manual-card__main::before {
    animation: none !important;
  }
  .beneficios-mockup__visual .manual-card {
    transform: perspective(1600px) rotateY(-8deg) rotateX(2deg) !important;
  }
}

/* Mobile: reducir intensidad de rotación para no romper layout */
@media (max-width: 720px) {
  @keyframes mockupShowcase {
    0% { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) translateY(0) translateZ(0); }
    50% { transform: perspective(1600px) rotateY(7deg) rotateX(-1deg) translateY(-6px) translateZ(10px); }
    100% { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) translateY(0) translateZ(0); }
  }
  .beneficios-mockup__visual { padding: 1rem 0.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — FIX FINAL: kill ::after rotate + unlock mockup animation ═══════
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. KILL animación rotativa en pseudo-elementos benefit cards ─────── */
.benefit-card::after,
.benefit-card.benefit-card--enhanced::after,
.benefit-card::before,
.benefit-card.benefit-card--enhanced::before,
.benefit-card .benefit-icon,
.benefit-card .benefit-icon::before,
.benefit-card .benefit-icon::after,
.benefit-card .benefit-icon svg,
.benefit-card .benefit-num {
  animation: none !important;
}

/* También cualquier rotate genérico que afecte el ::after */
.benefit-card.benefit-card--enhanced::after {
  animation: none !important;
  transform: scaleX(0.3) !important;
  background: linear-gradient(90deg, transparent, var(--green-500, #22c55e), transparent) !important;
}
.benefit-card.benefit-card--enhanced:hover::after {
  transform: scaleX(1) !important;
}

/* ── 2. DESBLOQUEAR animación del mockup ─────────────────────────────────
   Eliminamos los transform: !important previos para que mi @keyframes
   mockupShowcase pueda controlar el transform. */

.beneficios-mockup__visual .manual-card {
  /* Quito el transform: !important estático para dejar a la animación trabajar */
  transform: none;
  animation: mockupShowcase 8s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

/* Forzar la animación a controlar el transform usando keyframes que ganen */
@keyframes mockupShowcase {
  0%   { transform: perspective(1600px) rotateY(-12deg) rotateX(3deg) translateY(0px) translateZ(0px); }
  25%  { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) translateY(-12px) translateZ(20px); }
  50%  { transform: perspective(1600px) rotateY(12deg) rotateX(-2deg) translateY(0px) translateZ(0px); }
  75%  { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) translateY(-8px) translateZ(15px); }
  100% { transform: perspective(1600px) rotateY(-12deg) rotateX(3deg) translateY(0px) translateZ(0px); }
}

/* Hover: pausa y centrado */
.beneficios-mockup__visual:hover .manual-card {
  animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — HERO BIGGER + MOCKUP MOBILE FIX + REAL REVIEWS ═════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO — Agrandar líneas 1 y 3, quitar dash verde ─────────────────── */

/* Eliminar el "—" verde del inicio de la línea sub */
.hero .headline-line--sub::before {
  content: '' !important;
  display: none !important;
}

/* Línea 1 — más grande y prominente */
.hero .headline-line--main {
  font-size: clamp(1.55rem, 5.5vw, 1.95rem) !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  margin-bottom: 0.45em !important;
  text-align: center !important;
}
.hero .headline-line--main strong {
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.28), rgba(34, 197, 94, 0.32)) !important;
  color: #ffffff !important;
  padding: 0.04em 0.28em !important;
  border-radius: 6px !important;
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25) !important;
}

/* Línea 3 — más grande, sin dash, más elegante */
.hero .headline-line--sub {
  font-size: clamp(1.35rem, 4.8vw, 1.7rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  margin-top: 0.5em !important;
  font-style: normal !important;
  text-align: center !important;
}

/* Líneas 1 y 3 más grandes en tablet/desktop */
@media (min-width: 720px) {
  .hero .headline-line--main { font-size: 2.15rem !important; }
  .hero .headline-line--sub  { font-size: 1.85rem !important; }
}
@media (min-width: 1024px) {
  .hero .headline-line--main { font-size: 2.4rem !important; }
  .hero .headline-line--sub  { font-size: 2rem !important; }
}

/* ── 2. MOCKUP MOBILE — más respiración interna ─────────────────────────── */

@media (max-width: 720px) {
  .beneficios-mockup__visual .manual-card {
    max-width: 300px !important;
    padding: 1.55rem 1.45rem 1.4rem 1.65rem !important;
  }
  .beneficios-mockup__visual .manual-card::before {
    width: 14px !important; /* lomo más fino para que el contenido respire */
  }
  .manual-card__brand {
    padding-bottom: 0.95rem !important;
    gap: 0.65rem !important;
  }
  .manual-card__logo {
    width: 28px !important;
    height: 28px !important;
  }
  .manual-card__brand-name {
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }
  .manual-card__brand-by {
    font-size: 0.62rem !important;
  }
  .manual-card__main {
    padding: 0.7rem 0 0.5rem !important;
    gap: 0.65rem !important;
  }
  .manual-card__eyebrow {
    font-size: 0.58rem !important;
    padding: 0.22rem 0.55rem !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
  }
  .manual-card__title {
    font-size: 1.7rem !important;
    line-height: 1.05 !important;
    margin: 0.2rem 0 !important;
  }
  .manual-card__divider {
    width: 32px !important;
    margin-top: 0.35rem !important;
  }
  .manual-card__tagline {
    font-size: 0.74rem !important;
    line-height: 1.45 !important;
    margin-top: 0.3rem !important;
    max-width: 19ch !important;
  }
  .manual-card__footer {
    padding-top: 1rem !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
  }
  .manual-card__chip {
    font-size: 0.6rem !important;
    padding: 0.22rem 0.5rem !important;
  }
}

/* ── 3. REVIEWS — Diseño realista profesional con fotos ────────────────── */

.reviews-section {
  margin-top: 3rem !important;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

/* Header con rating global + badge verificadas */
.reviews-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.reviews-rating {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.reviews-rating__stars {
  font-size: 1.4rem;
  color: #fbbf24;
  letter-spacing: 0.12em;
  filter: drop-shadow(0 2px 6px rgba(251, 191, 36, 0.5));
}
.reviews-rating__score {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.reviews-rating__score strong {
  font-size: 1.65rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.reviews-rating__score span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.reviews-rating__score em {
  font-style: normal;
  color: #86efac;
  font-weight: 700;
}
.reviews-rating__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #86efac;
}

/* Grid de reseñas */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 720px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }
}

/* Card individual */
.review-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  overflow: hidden;
}
.review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  border-color: rgba(74, 222, 128, 0.35);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(34, 197, 94, 0.12);
}
.review-card:hover::before { opacity: 1; }

/* Head: avatar + nombre + fecha */
.review-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(74, 222, 128, 0.35);
  background: #1a2520;
  flex-shrink: 0;
}
.review-card__author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.review-card__author strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.review-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #86efac;
  letter-spacing: 0.01em;
}
.review-card__meta svg { color: #4ade80; flex-shrink: 0; }
.review-card__date {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  white-space: nowrap;
  align-self: flex-start;
}

/* Stars */
.review-card__stars {
  font-size: 0.95rem;
  color: #fbbf24;
  letter-spacing: 0.1em;
  filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.4));
}

/* Quote */
.review-card__quote {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.review-card__quote strong {
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, transparent 60%, rgba(74, 222, 128, 0.18) 60%);
  padding: 0 0.05em;
}

/* Tag categoria */
.review-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.01em;
  margin-top: 0.2rem;
}

@media (max-width: 600px) {
  .reviews-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-align: center;
  }
  .review-card { padding: 1.3rem 1.15rem 1.15rem; }
  .review-card__quote { font-size: 0.88rem; }
  .review-card__avatar { width: 40px; height: 40px; }
  .review-card__date { font-size: 0.65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — HERO TIGHTEN: líneas más pegadas y condensadas ════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reducir margenes entre las 3 líneas del headline */
.hero .hero__headline {
  margin-bottom: 0.7rem !important;
}

.hero .headline-line {
  margin: 0 !important;
  padding: 0 !important;
}

.hero .headline-line--main {
  margin-bottom: 0.1em !important; /* casi pegado al accent */
  line-height: 1.05 !important;
}

.hero .headline-line--accent {
  line-height: 0.92 !important; /* accent compacto */
  margin: 0 !important;
  padding: 0.02em 0 !important; /* ajuste minimo para descenders */
}

.hero .headline-line--sub {
  margin-top: 0.15em !important; /* casi pegado al accent */
  line-height: 1.1 !important;
}

/* Reducir gap entre headline y subtítulo (hero__sub) */
.hero .hero__sub {
  margin-top: 0.85rem !important;
}

/* Reducir gap entre badge y headline */
.hero .badge--live {
  margin-bottom: 0.65rem !important;
}

/* Compactar todo el bloque promise */
.hero .hero__promise {
  padding-top: 0.5rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.85rem !important;
}

/* ── FIX: descender de la "g" en accent line se cortaba en mobile ──── */
.hero .headline-line--accent {
  line-height: 1 !important; /* antes 0.92, ahora 1 para que "g/p/y" no se corten */
  padding-bottom: 0.08em !important; /* margen extra para descenders */
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — REVIEWS REDISEÑO: cards visibles con buen contraste ════════════
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header rating: legibilidad sobre dark green */
.reviews-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

/* Cards de reseñas — fondo sólido visible + texto bien alineado */
.review-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 10px 28px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  text-align: left !important;
  align-items: stretch !important;
}

.review-card:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  border-color: rgba(74, 222, 128, 0.5) !important;
  box-shadow:
    0 20px 50px -15px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(34, 197, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Forzar alineación izquierda en todos los elementos internos */
.review-card * {
  text-align: left !important;
}

.review-card__head {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 0.75rem !important;
  align-items: center !important;
  margin-bottom: 0.4rem;
}

/* Avatar con tamaño y border más visible */
.review-card__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(74, 222, 128, 0.55) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Author info bien contrastado */
.review-card__author {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}
.review-card__author strong {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.review-card__meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #86efac !important;
}
.review-card__meta svg {
  color: #4ade80 !important;
  flex-shrink: 0 !important;
}

/* Date visible */
.review-card__date {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
  text-align: right !important;
}

/* Stars con buen brillo */
.review-card__stars {
  font-size: 1rem !important;
  color: #fbbf24 !important;
  letter-spacing: 0.12em !important;
  margin: 0.1rem 0 0.2rem !important;
  text-align: left !important;
}

/* Quote claramente legible */
.review-card__quote {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 0 0.3rem 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}
.review-card__quote strong {
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, transparent 62%, rgba(74, 222, 128, 0.32) 62%) !important;
  padding: 0 0.05em !important;
}

/* Tag categoría más visible */
.review-card__tag {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  padding: 0.35rem 0.75rem !important;
  background: rgba(34, 197, 94, 0.18) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #86efac !important;
  margin-top: 0.25rem !important;
  text-align: left !important;
  width: fit-content !important;
}

/* Rating header: stars y números bien visibles */
.reviews-rating__stars {
  font-size: 1.5rem !important;
  color: #fbbf24 !important;
  letter-spacing: 0.12em !important;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6)) !important;
}
.reviews-rating__score strong {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}
.reviews-rating__score span {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
}
.reviews-rating__score em {
  font-style: normal !important;
  color: #86efac !important;
  font-weight: 700 !important;
}
.reviews-rating__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.95rem !important;
  background: rgba(34, 197, 94, 0.22) !important;
  border: 1px solid rgba(74, 222, 128, 0.5) !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.reviews-rating__badge svg { color: #4ade80; }

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ LT1 — REVIEWS TRUSTPILOT STYLE: cards BLANCAS sobre dark green ════════
   Style real de plataforma de reviews. Máximo contraste, máxima credibilidad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header rating — pill blanco con sombra premium */
.reviews-header {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
  border-radius: 20px !important;
  padding: 1.25rem 1.75rem !important;
}
.reviews-rating__stars {
  font-size: 1.55rem !important;
  color: #fbbf24 !important;
  letter-spacing: 0.1em !important;
  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.4)) !important;
}
.reviews-rating__score strong {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
}
.reviews-rating__score span {
  font-size: 0.78rem !important;
  color: #475569 !important;
  font-weight: 600 !important;
}
.reviews-rating__score em {
  color: #15803d !important;
  font-weight: 800 !important;
  font-style: normal !important;
}
.reviews-rating__badge {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
  padding: 0.5rem 1rem !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  border-radius: 999px !important;
}
.reviews-rating__badge svg { color: #16a34a !important; }

/* Cards BLANCAS con sombra premium — estilo Trustpilot/Google Reviews */
.review-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.25rem 1.2rem !important;
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.25) !important;
  color: #0f172a !important;
  text-align: left !important;
  gap: 0.7rem !important;
}

.review-card:hover {
  background: #ffffff !important;
  border-color: #86efac !important;
  box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
  transform: translateY(-3px) !important;
}

.review-card::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, transparent 60%) !important;
}

/* Avatar con borde verde más fino */
.review-card__avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 2px solid #dcfce7 !important;
  background: #f3f4f6 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

/* Author con texto oscuro */
.review-card__author strong {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.review-card__meta {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
}
.review-card__meta svg {
  color: #22c55e !important;
}

/* Date discreta a la derecha */
.review-card__date {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Stars amarillas con brillo */
.review-card__stars {
  font-size: 1.05rem !important;
  color: #fbbf24 !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3)) !important;
}

/* Quote texto oscuro legible */
.review-card__quote {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
.review-card__quote strong {
  font-weight: 700 !important;
  color: #0f172a !important;
  background: linear-gradient(180deg, transparent 62%, #fef08a 62%, #fde047 100%) !important;
  padding: 0 0.1em !important;
}

/* Tag categoría sobre fondo verde claro */
.review-card__tag {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  padding: 0.32rem 0.7rem !important;
  border-radius: 8px !important;
  margin-top: 0.15rem !important;
  width: fit-content !important;
}

/* Mobile más compacto */
@media (max-width: 600px) {
  .reviews-header {
    flex-direction: column !important;
    gap: 0.85rem !important;
    padding: 1rem 1.25rem !important;
  }
  .review-card { padding: 1.1rem 1rem 1rem !important; }
}