/* ============================================================================
   fx-mobile.css — Optimización móvil agresiva
   ---------------------------------------------------------------------------
   Target: 70% del tráfico es móvil, ~50% tiene conexión no ideal.
   Objetivo:
     - Tipografía GRANDE y legible (min 17px, touch targets 56px+)
     - Contraste alto (WCAG AA mínimo)
     - Animaciones optimizadas (menos pesadas en móvil)
     - CTAs enormes, visibles, tappables con el pulgar
     - Sections con padding justo (ni mucho ni poco)
     - Zero layout shift
   ============================================================================ */

/* ==========================================================================
   FIX 1: Imagen del hero descuadrada
   ========================================================================== */
.hero__bg-img {
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.15 !important;
  filter: saturate(1.15) contrast(1.08) brightness(0.9) !important;
}
@media (max-width: 899px) {
  .hero__bg-img {
    opacity: 0.08 !important; /* casi invisible en móvil — deja respirar al contenido */
    object-position: 50% 20% !important; /* evita cortar las caras */
  }
}

.hero__overlay {
  background: linear-gradient(180deg,
    rgba(11, 30, 63, 0.55) 0%,
    rgba(11, 30, 63, 0.85) 50%,
    rgba(11, 30, 63, 0.97) 100%) !important;
}

/* ==========================================================================
   TIPOGRAFÍA MOBILE-FIRST GRANDE
   ========================================================================== */
@media (max-width: 899px) {
  :root {
    --fs-xs:   13px;  /* antes 12 */
    --fs-sm:   15px;  /* antes 14 */
    --fs-base: 17px;  /* antes 16 — subimos todo */
    --fs-md:   19px;
    --fs-lg:   23px;
    --fs-xl:   30px;
    --fs-2xl:  38px;
    --fs-3xl:  48px;
    --s-4: 18px;
    --s-5: 26px;
    --s-6: 36px;
    --s-7: 52px;
    --s-8: 68px;
    --s-9: 88px;
  }

  body {
    font-size: 17px;
    line-height: 1.65;
  }

  .hero__h1 {
    font-size: clamp(36px, 9vw, 52px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: var(--s-3);
  }

  .hero__sub {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .section__title {
    font-size: clamp(30px, 7.5vw, 44px) !important;
    line-height: 1.1 !important;
  }

  .section__lead {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  h1, h2, h3 {
    word-break: normal;
    overflow-wrap: break-word;
  }

  p {
    line-height: 1.7 !important;
    color: #e6e8ef !important; /* contraste más alto que gray-1 */
  }
}

/* ==========================================================================
   TOUCH TARGETS GRANDES (mínimo 56px, ideal 64px)
   Cumple WCAG 2.5.5 Target Size (min 24×24, pero Apple/Google piden 48+)
   ========================================================================== */
@media (hover: none), (max-width: 899px) {
  .btn {
    min-height: 60px !important;
    padding: 18px 28px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
  }

  .btn--lg {
    min-height: 68px !important;
    padding: 22px 32px !important;
    font-size: 19px !important;
  }

  .btn--block {
    width: 100% !important;
  }

  /* CTAs del hero más grandes */
  .hero__cta-row {
    gap: var(--s-3) !important;
  }
  .hero__cta-row .btn {
    width: 100% !important;
    justify-content: center;
  }

  /* Sticky bottom bar CTAs */
  .sticky-bar {
    padding: 14px 14px calc(env(safe-area-inset-bottom, 0) + 14px) !important;
    gap: 12px !important;
    background: rgba(11, 30, 63, 0.98) !important;
    border-top: 2px solid rgba(232, 200, 106, 0.4) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  }
  .sticky-bar .btn {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  /* Links en FAQ más grandes */
  .faq-item summary {
    padding: 22px 20px !important;
    font-size: 17px !important;
    min-height: 60px !important;
  }
  .faq-item > div {
    padding: 0 20px 22px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* Cards enteras tappables */
  .card--demo,
  .card {
    padding: 24px 20px !important;
    min-height: 160px !important;
  }
  .card__title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  .card__text {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   CONTRASTE ALTO
   ========================================================================== */
@media (max-width: 899px) {
  .t-muted,
  .hero__trust {
    color: #b8bcc9 !important; /* más claro que gray-2 para legibilidad */
  }

  .plan__features li {
    color: #e6e8ef !important;
    font-size: 15px !important;
    padding: 12px 0 !important;
  }

  .faq-item summary {
    color: #fff !important;
    font-weight: 700;
  }

  .section__eyebrow {
    font-size: 12px !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
  }
}

/* ==========================================================================
   SECTION SPACING MOBILE (ni mucho ni poco)
   ========================================================================== */
@media (max-width: 899px) {
  .section,
  .mega-section,
  .ai-section,
  .offer-banner {
    padding: 56px 0 !important;
  }
  .section--compact {
    padding: 36px 0 !important;
  }
  .hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: 80px 0 60px !important;
  }
  .container {
    padding: 0 18px !important;
  }
}

/* ==========================================================================
   PERFORMANCE: reducir/desactivar animaciones pesadas en móvil
   ========================================================================== */
@media (max-width: 899px) {
  /* Morph blobs: fuera (pesado y no aporta en mobile) */
  .morph-blob {
    display: none !important;
  }

  /* Parallax: fuera (chips en scroll mobile) */
  [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }

  /* Tilt 3D: fuera en touch */
  [data-tilt] {
    transform: none !important;
  }

  /* Cursor trail: fuera (touch device) */
  .cursor-dot, .cursor-ring, .cursor-trail-canvas {
    display: none !important;
  }

  /* Canvas IA con menos CPU */
  .ai-canvas {
    opacity: 0.8;
  }

  /* Gradient animations más lentas */
  .mega-number,
  .ai-text h2,
  .text-gradient-gold {
    animation-duration: 8s !important;
  }
}

/* ==========================================================================
   MEGA NUMBER responsive (el 60%)
   ========================================================================== */
@media (max-width: 899px) {
  .mega-number {
    font-size: clamp(110px, 32vw, 200px) !important;
  }
  .mega-sub {
    font-size: 20px !important;
    line-height: 1.3 !important;
    padding: 0 12px;
  }
  .mega-caption {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }
}

/* ==========================================================================
   OFFER BANNER mobile (grande y legible)
   ========================================================================== */
@media (max-width: 899px) {
  .offer-banner__inner {
    padding: 44px 20px !important;
  }
  .offer-banner__headline {
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: 1 !important;
  }
  .offer-banner__new {
    font-size: clamp(54px, 14vw, 80px) !important;
  }
  .offer-banner__old {
    font-size: 20px !important;
  }
  .offer-timer {
    padding: 18px 16px !important;
    gap: 10px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .offer-timer__block {
    min-width: 56px !important;
  }
  .offer-timer__num {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  .offer-timer__sep {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
  .offer-spots {
    padding: 14px 20px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    flex-wrap: wrap;
  }
  .offer-banner__urgency {
    font-size: 14px !important;
    padding: 0 8px;
  }
}

/* ==========================================================================
   WINNER CARDS mobile (más grandes)
   ========================================================================== */
@media (max-width: 899px) {
  .winner-card {
    width: 240px !important;
    padding: 48px 20px 20px !important;
  }
  .winner-card__photo {
    width: 120px !important;
    height: 120px !important;
  }
  .winner-card__name {
    font-size: 16px !important;
  }
  .winner-card__rank {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
  .medal-wrap {
    width: 82px !important;
    height: 108px !important;
    top: -46px !important;
  }
  .crown-wrap {
    width: 58px !important;
    height: 42px !important;
    top: -64px !important;
  }
}

/* ==========================================================================
   ADVISORS mobile
   ========================================================================== */
@media (max-width: 899px) {
  .advisor__photo {
    width: 120px !important;
    height: 120px !important;
  }
  .advisor__name {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .advisor__rank {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   TOP BAR mobile — CENTRADO + logo/texto más grandes (2026-04-17 David feedback)
   ========================================================================== */
@media (max-width: 899px) {
  .topbar__inner {
    padding: 10px 18px !important;
    min-height: 76px !important;
    justify-content: center !important; /* logo al centro */
  }
  .topbar__logo {
    gap: 12px !important;
  }
  .topbar__logo img {
    width: 64px !important;
    height: 64px !important;
  }
  .topbar__logo span {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
  }
  .topbar__nav {
    display: none !important;
  }

  /* Compactar hero: menos espacio entre header y badge "Primeros puestos" */
  .hero {
    padding-top: 24px !important;
  }
  html body .hero__badge {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
}

/* ==========================================================================
   PLANS mobile — COMPACTO (2026-04-17 David: que entre en 1 pantalla)
   ========================================================================== */
@media (max-width: 899px) {
  .pricing {
    gap: 16px !important;
  }
  .plan {
    padding: 20px 18px !important;
    border-width: 2px !important;
  }
  .plan--featured {
    transform: scale(1) !important;
    border-width: 3px !important;
  }
  .plan__badge {
    margin-bottom: 10px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
  .plan__name {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .plan__price {
    font-size: 38px !important;
    margin: 4px 0 6px !important;
    line-height: 1.05 !important;
  }
  .plan__price-old {
    font-size: 18px !important;
  }
  .plan__discount-note {
    margin: 2px 0 10px !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
  }
  .plan__features {
    margin: 10px 0 14px !important;
  }
  .plan__features li {
    padding: 8px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .plan .btn {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   TIMELINE FASES mobile (stack vertical)
   ========================================================================== */
@media (max-width: 899px) {
  .timeline {
    gap: 18px !important;
    grid-template-columns: 1fr !important;
  }
  .timeline::before {
    display: none !important;
  }
  .timeline__phase {
    padding: 24px 20px !important;
  }
  .timeline__phase::after {
    display: none !important;
  }
  .timeline__phase .timeline__num {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
  .timeline__phase .timeline__title {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   5 ÁREAS mobile (grid 2 col + full width)
   ========================================================================== */
@media (max-width: 767px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .grid-5 .area:last-child {
    grid-column: 1 / -1;
  }
  .area {
    padding: 24px 16px !important;
    min-height: 130px !important;
  }
  .area__icon {
    font-size: 42px !important;
  }
  .area__name {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   RAZONES / VENTAJAS mobile (full width + padding generoso)
   ========================================================================== */
@media (max-width: 899px) {
  .razones,
  .ventajas {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .razon,
  .ventaja {
    padding: 32px 22px !important;
    border-radius: 24px !important;
  }
  .razon__icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
  }
  .razon__number {
    font-size: 28px !important;
  }
  .razon__title,
  .ventaja__title {
    font-size: 20px !important;
  }
  .razon__list li {
    padding: 14px !important;
    padding-left: var(--s-6) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .ventaja__badge {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }
  .ventaja__text {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .ventaja__bgnum {
    font-size: 180px !important;
  }
}

/* ==========================================================================
   HORARIO TABLE mobile (scroll horizontal con indicador)
   ========================================================================== */
@media (max-width: 899px) {
  .schedule {
    padding: 16px !important;
    position: relative;
  }
  .schedule::after {
    content: "→ desliza para ver";
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(232, 200, 106, 0.6);
    margin-top: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .schedule table {
    font-size: 12px !important;
    min-width: 560px !important;
  }
  .schedule th, .schedule td {
    padding: 10px 8px !important;
    min-height: 44px;
  }
}

/* ==========================================================================
   FAQ mobile (acordeón táctil)
   ========================================================================== */
@media (max-width: 899px) {
  .faq-item {
    border-radius: 20px !important;
    margin-bottom: 14px !important;
  }
}

/* ==========================================================================
   HAPTIC feedback visual (ripple en tap)
   ========================================================================== */
.tap-feedback {
  position: relative;
}
.tap-feedback-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(232, 200, 106, 0.4);
  transform: scale(0);
  animation: tapRipple 0.6s ease-out;
  pointer-events: none;
  z-index: 10;
}
@keyframes tapRipple {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

/* ==========================================================================
   TOOLBAR audio/tema mobile (más grande + accesible)
   ========================================================================== */
@media (max-width: 899px) {
  .fx-toolbar {
    bottom: calc(env(safe-area-inset-bottom, 0) + 94px) !important;
    left: 14px !important;
  }
  .fx-toggle {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }
}

/* ==========================================================================
   WhatsApp flotante mobile (más visible)
   ========================================================================== */
@media (max-width: 1023px) {
  .wa-float {
    bottom: calc(env(safe-area-inset-bottom, 0) + 94px) !important;
    right: 14px !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 30px !important;
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
}

/* ==========================================================================
   Reduce motion for reduce-motion + battery-saver
   ========================================================================== */
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  .hero-web,
  .ai-canvas {
    opacity: 0.5 !important;
  }
}

/* ==========================================================================
   iOS: evitar zoom en inputs
   ========================================================================== */
@media (max-width: 899px) {
  input, textarea, select, button {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   Smooth scroll mobile
   ========================================================================== */
@media (max-width: 899px) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  body {
    overscroll-behavior-y: none;
  }
}

/* ==========================================================================
   Dark mode status bar iOS
   ========================================================================== */
@supports (padding: max(0px)) {
  .topbar {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }
}

/* ============================================================================
   FIXES V2 — basado en feedback de screenshots reales del celular
   ============================================================================ */

/* --- 1. Ocultar clutter inferior en móvil: toggles y WhatsApp flotante --- */
@media (max-width: 1023px) {
  /* Toggles audio/tema: fuera. El audio se activa automáticamente al primer tap */
  .fx-toolbar {
    display: none !important;
  }
  /* WhatsApp flotante: fuera. Ya está en el sticky bar de abajo */
  .wa-float {
    display: none !important;
  }
  /* Sticky bar más compacto para no tapar tanto contenido */
  .sticky-bar {
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0) + 10px) !important;
    gap: 10px !important;
    background: rgba(11, 30, 63, 0.98) !important;
    border-top: 2px solid rgba(232, 200, 106, 0.5) !important;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.6) !important;
  }
  .sticky-bar .btn {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  /* Body padding-bottom para que el sticky bar no tape el footer */
  body {
    padding-bottom: 78px !important;
  }
}

/* --- 2. Countdown grid 2x2 en móvil — los 4 bloques nunca se rompen --- */
@media (max-width: 640px) {
  .offer-timer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    max-width: 280px;
    margin: 24px auto !important;
  }
  .offer-timer__sep {
    display: none !important;
  }
  .offer-timer__block {
    background: rgba(0, 0, 0, 0.55) !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 57, 70, 0.4) !important;
    min-width: auto !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .offer-timer__num {
    font-size: 34px !important;
    line-height: 1 !important;
  }
  .offer-timer__lbl {
    font-size: 10px !important;
    margin-top: 6px !important;
  }
}

/* --- 3. Headline "20% DE DESCUENTO" legible en móvil --- */
@media (max-width: 899px) {
  .offer-banner__headline {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #f4d882 !important;
    color: #f4d882 !important;
    text-shadow:
      0 2px 0 rgba(90, 61, 0, 0.9),
      0 4px 16px rgba(0, 0, 0, 0.6),
      0 0 36px rgba(232, 200, 106, 0.55) !important;
    animation: none !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 8px 0 !important;
  }
  /* Quitar el conic gradient rotante que interfiere con legibilidad */
  .offer-banner__inner::before {
    display: none !important;
  }
  .offer-banner__inner {
    animation: none !important;
  }
  /* Asegurar overflow: hidden para que nada del banner se escape al footer */
  .offer-banner {
    overflow: hidden !important;
  }
  .offer-banner__inner {
    overflow: hidden !important;
  }
}

/* --- 4. Medallas y coronas proporcionadas (sin cortes) en mobile --- */
@media (max-width: 899px) {
  .winner-card {
    width: 240px !important;
    padding: 68px 20px 24px !important;
    margin-top: 58px !important;
    overflow: visible !important;
  }
  .winner-card.has-crown {
    padding-top: 72px !important;
    margin-top: 72px !important;
  }
  .medal-wrap {
    width: 68px !important;
    height: 90px !important;
    top: -38px !important;
  }
  .crown-wrap {
    width: 48px !important;
    height: 34px !important;
    top: -54px !important;
  }
  .winner-card.has-crown .medal-wrap {
    top: -28px !important;
  }
  .winner-card__photo {
    width: 110px !important;
    height: 110px !important;
    margin: 8px auto var(--s-3) !important;
  }
  .winner-card__name {
    font-size: 15px !important;
    min-height: 36px !important;
  }
  .winner-card__rank {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  .winner-card__year {
    font-size: 10px !important;
  }

  /* Carrusel padding extra para que las medallas no se corten por arriba */
  .carousel-cards {
    padding: 74px 0 32px !important;
  }
}

/* --- 5. Marquee inferior con padding para evitar superposición con sticky bar --- */
@media (max-width: 1023px) {
  .marquee {
    padding-bottom: calc(var(--s-4) + 20px) !important;
  }
}

/* --- 6. Scroll progress bar más visible en móvil --- */
@media (max-width: 899px) {
  .scroll-progress {
    height: 4px !important;
  }
}
/* ============================================================================
   fx-mobile-v2.css — Fixes críticos V2 + consistencia de colores con desktop
   ---------------------------------------------------------------------------
   Archivo nuevo (evita caché del celular). Carga al final.
   ============================================================================ */

/* ============================================================================
   COLORES: gradients simplificados que se ven brillantes en móvil
   (mantiene el look del desktop pero sin perder legibilidad)
   ============================================================================ */
@media (max-width: 899px) {
  /* Mega number 60% — gradient brillante sin marrón oscuro */
  html body .mega-number {
    background: linear-gradient(135deg, #fff8d6 0%, #f4d882 35%, #ffd85c 65%, #E8C86A 100%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(232, 200, 106, 0.5)) !important;
    font-size: clamp(140px, 40vw, 220px) !important;
    animation: none !important;
  }

  /* Headline 20% DESCUENTO — gradient brillante */
  html body .offer-banner__headline {
    background: linear-gradient(135deg, #fff8d6 0%, #f4d882 35%, #ffd85c 65%, #E8C86A 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(232, 200, 106, 0.4)) !important;
    animation: none !important;
    font-weight: 900 !important;
  }
  html body .offer-banner__inner::before {
    display: none !important;
  }
  html body .offer-banner__inner {
    animation: none !important;
  }

  /* Hero H1 highlight — gradient brillante consistente */
  html body .hero__h1 .highlight,
  html body .text-gradient-gold {
    background: linear-gradient(135deg, #fff8d6 0%, #f4d882 50%, #ffd85c 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
    animation: none !important;
  }
}

/* ============================================================================
   FIX 1: TEXTO DEL HERO — asegurar visibilidad total
   ============================================================================ */
html body .hero .hero__content,
html body .hero .hero__content *,
html body .hero .hero__badge,
html body .hero .hero__h1,
html body .hero .hero__h1 *,
html body .hero .hero__sub,
html body .hero .hero__cta-row,
html body .hero .hero__cta-row *,
html body .hero .hero__trust {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html body .split-word,
html body [data-split] .split-word {
  opacity: 1 !important;
  transform: none !important;
  display: inline-block !important;
  visibility: visible !important;
}
html body .hero [data-reveal],
html body .hero [data-reveal] * {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================================
   FIX 2: HERO MÓVIL REDISEÑADO — más impactante, menos cargado
   ============================================================================ */
@media (max-width: 899px) {
  html body .hero {
    min-height: 94vh !important;
    min-height: 94svh !important;
    padding: 96px 0 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 0 4px;
  }

  /* Badge prominente */
  html body .hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(232, 200, 106, 0.25), rgba(232, 200, 106, 0.1)) !important;
    border: 1.5px solid #E8C86A !important;
    color: #f4d882 !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 24px rgba(232, 200, 106, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  /* H1 impactante */
  html body .hero__h1 {
    font-size: clamp(36px, 9.5vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    margin: 0 !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  }

  /* Subtitle corto */
  html body .hero__sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #e6e8ef !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  html body .hero__sub strong {
    color: #f4d882 !important;
    font-weight: 800 !important;
  }

  /* CTAs full width grandes */
  html body .hero__cta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  html body .hero__cta-row .btn {
    width: 100% !important;
    min-height: 62px !important;
    font-size: 16px !important;
    padding: 18px 20px !important;
    justify-content: center !important;
  }

  /* Trust line simple centrada */
  html body .hero__trust {
    font-size: 11px !important;
    color: #a3a8b8 !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 8px !important;
    letter-spacing: 0.04em !important;
    display: block !important;
  }
  html body .hero__trust::before {
    display: none !important;
  }

  /* Hero overlay: menos denso para que se vea fondo + texto */
  html body .hero__overlay {
    background: linear-gradient(180deg,
      rgba(11, 30, 63, 0.5) 0%,
      rgba(11, 30, 63, 0.85) 50%,
      rgba(11, 30, 63, 0.96) 100%) !important;
  }
  html body .hero__bg-img {
    opacity: 0.05 !important;
  }
}

/* ============================================================================
   FIX 3: PAS BLOCKS — layout vertical limpio en móvil
   ============================================================================ */
@media (max-width: 767px) {
  html body .pas__block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 32px 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .pas__icon-wrap {
    flex: 0 0 auto !important;
    margin: 0 auto !important;
  }
  html body .pas__block h3 {
    text-align: center !important;
    width: 100% !important;
    font-size: 20px !important;
    color: var(--c-gold) !important;
    margin: 0 !important;
  }
  html body .pas__block p {
    text-align: center !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #e6e8ef !important;
    margin: 0 !important;
  }
}

/* ============================================================================
   FIX 4: OCULTAR toggles y WhatsApp flotante en móvil DEFINITIVAMENTE
   ============================================================================ */
@media (max-width: 1023px) {
  html body .fx-toolbar,
  html body div.fx-toolbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  html body .wa-float,
  html body a.wa-float {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
  }
}

/* ============================================================================
   FIX 5: CAJONES CUADRADOS — razones, ventajas, cards con gaps consistentes
   ============================================================================ */
@media (max-width: 899px) {
  /* Contenedor sections con padding consistente */
  html body .container {
    padding: 0 20px !important;
  }

  /* Grid de razones 1 columna con gap uniforme */
  html body .razones {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body .razon {
    padding: 28px 22px !important;
    border-radius: 22px !important;
  }
  html body .razon__head {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  html body .razon__icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
  }
  html body .razon__number {
    font-size: 24px !important;
  }
  html body .razon__title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  html body .razon__list {
    gap: 10px !important;
  }
  html body .razon__list li {
    padding: 14px 14px 14px 42px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    border-radius: 10px !important;
  }
  html body .razon__list li::before {
    left: 12px !important;
    top: 14px !important;
    font-size: 11px !important;
  }

  /* Grid de ventajas 1 columna */
  html body .ventajas {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body .ventaja {
    padding: 32px 24px !important;
    min-height: auto !important;
    border-radius: 28px !important;
  }
  html body .ventaja__bgnum {
    font-size: 160px !important;
    top: -24px !important;
    right: -10px !important;
  }
  html body .ventaja__badge {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  html body .ventaja__title {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  html body .ventaja__text {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================================================
   FIX 6: Section spacing mobile consistente
   ============================================================================ */
@media (max-width: 899px) {
  html body .section,
  html body .mega-section,
  html body .ai-section,
  html body .offer-banner {
    padding: 56px 0 !important;
  }
  html body .section__title,
  html body .section__title--center {
    color: #ffffff !important;
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }
  html body .section__lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 32px !important;
    padding: 0 4px;
  }
  html body .section__eyebrow {
    font-size: 11px !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
  }
}

/* ============================================================================
   FIX 7: Body padding sin toolbar/wa-float
   ============================================================================ */
@media (max-width: 1023px) {
  html body {
    padding-bottom: 82px !important;
  }
}

/* ============================================================================
   FIX 8: 5 áreas grid 2 col en móvil
   ============================================================================ */
@media (max-width: 767px) {
  html body .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  html body .grid-5 .area:last-child {
    grid-column: 1 / -1 !important;
    max-width: 50% !important;
    margin: 0 auto !important;
  }
  html body .area {
    padding: 26px 16px !important;
    min-height: 140px !important;
    border-radius: 20px !important;
  }
  html body .area__icon {
    font-size: 44px !important;
    margin-bottom: 10px !important;
  }
  html body .area__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
}

/* ============================================================================
   FIX 9: Fases timeline stack vertical limpio
   ============================================================================ */
@media (max-width: 899px) {
  html body .timeline {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html body .timeline::before {
    display: none !important;
  }
  html body .timeline__phase {
    padding: 28px 22px !important;
    border-radius: 22px !important;
    text-align: center !important;
  }
  html body .timeline__phase::after {
    display: none !important;
  }
  html body .timeline__phase .timeline__num {
    width: 60px !important;
    height: 60px !important;
    font-size: 26px !important;
    margin: 0 auto 14px !important;
  }
  html body .timeline__phase .timeline__title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  html body .timeline__text {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================================
   FIX 10: Countdown grid 2x2 en móvil
   ============================================================================ */
@media (max-width: 640px) {
  html body .offer-timer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
    max-width: 300px !important;
    margin: 24px auto !important;
  }
  html body .offer-timer__sep {
    display: none !important;
  }
  html body .offer-timer__block {
    background: rgba(0, 0, 0, 0.55) !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 57, 70, 0.4) !important;
    min-width: auto !important;
  }
  html body .offer-timer__num {
    font-size: 34px !important;
    line-height: 1 !important;
  }
  html body .offer-timer__lbl {
    font-size: 10px !important;
    margin-top: 6px !important;
  }
}

/* ============================================================================
   FIX 11: Winner cards medallas sin cortes
   ============================================================================ */
@media (max-width: 899px) {
  html body .carousel-cards {
    padding: 74px 0 30px !important;
  }
  html body .winner-card {
    width: 240px !important;
    padding: 62px 20px 22px !important;
    margin-top: 52px !important;
    border-radius: 28px !important;
  }
  html body .winner-card.has-crown {
    padding-top: 70px !important;
    margin-top: 70px !important;
  }
  html body .medal-wrap {
    width: 68px !important;
    height: 90px !important;
    top: -36px !important;
  }
  html body .crown-wrap {
    width: 48px !important;
    height: 34px !important;
    top: -54px !important;
  }
  html body .winner-card.has-crown .medal-wrap {
    top: -26px !important;
  }
  html body .winner-card__photo {
    width: 110px !important;
    height: 110px !important;
    margin: 8px auto var(--s-3) !important;
  }
}

/* ============================================================================
   FIX 12: Sticky bar compacto
   ============================================================================ */
@media (max-width: 1023px) {
  html body .sticky-bar {
    z-index: 30 !important;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0) + 10px) !important;
    gap: 10px !important;
    background: rgba(11, 30, 63, 0.98) !important;
    border-top: 2px solid rgba(232, 200, 106, 0.5) !important;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.6) !important;
  }
  html body .sticky-bar .btn {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
}
/* ============================================================================
   fx-mobile-v3.css — Pulido final móvil
   ---------------------------------------------------------------------------
   Target: 70% tráfico mobile. Foco en:
     1. Dorado metálico que BRILLE como oro real en pantallas móviles
     2. Contraste alto (WCAG AAA donde es posible)
     3. Encuadres perfectos con gaps/padding consistentes
     4. Font rendering optimizado (antialiased, optimizeLegibility)
     5. Botones con look metal líquido brillante
     6. Performance GPU-accelerated donde importa
   ============================================================================ */

/* ============================================================================
   VARIABLES: nueva paleta de oro brillante para móvil
   ============================================================================ */
@media (max-width: 899px) {
  html body {
    --gold-shine-0: #FFFDE7;    /* crema casi blanco */
    --gold-shine-1: #FFF59D;    /* limón suave brillante */
    --gold-shine-2: #FFE082;    /* dorado medio */
    --gold-shine-3: #FFD54F;    /* amber medio */
    --gold-shine-4: #FFC107;    /* amber brillante (MD) */
    --gold-shine-5: #FFA000;    /* amber oscuro */
    --gold-shine-6: #FF8F00;    /* dorado profundo */
    --gold-emboss: #8d6610;     /* sombra de relieve oscuro */
    --gold-deep: #3a2400;       /* oscuro metal */
  }
}

/* ============================================================================
   FONT RENDERING optimizado para móvil
   ============================================================================ */
@media (max-width: 899px) {
  html body,
  html body * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }
  html body h1,
  html body h2,
  html body h3,
  html body .section__title,
  html body .hero__h1,
  html body .mega-number,
  html body .offer-banner__headline {
    text-rendering: optimizeLegibility !important;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased !important;
  }
  /* GPU acceleration para elementos críticos */
  html body .btn--primary,
  html body .winner-card,
  html body .plan--featured,
  html body .offer-banner__inner,
  html body .mega-number {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ============================================================================
   DORADO METÁLICO BRILLANTE · Mega number 60%
   Usando gradient amarillo saturado + múltiples drop-shadows tipo metal líquido
   ============================================================================ */
@media (max-width: 899px) {
  html body .mega-number {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 15%,
      #FFE082 35%,
      #FFD54F 55%,
      #FFC107 80%,
      #FFA000 100%) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 3px 0 #8d6610)
      drop-shadow(0 6px 2px rgba(90, 61, 0, 0.3))
      drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6))
      drop-shadow(0 0 40px rgba(255, 193, 7, 0.55)) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    font-size: clamp(150px, 42vw, 240px) !important;
    line-height: 0.9 !important;
    animation: none !important;
  }
}

/* ============================================================================
   DORADO METÁLICO · Headline "20% DESCUENTO"
   ============================================================================ */
@media (max-width: 899px) {
  html body .offer-banner__headline {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 20%,
      #FFE082 40%,
      #FFD54F 60%,
      #FFC107 85%,
      #FFA000 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 3px 0 #8d6610)
      drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 30px rgba(255, 193, 7, 0.6)) !important;
    font-weight: 900 !important;
    animation: none !important;
    letter-spacing: -0.02em !important;
  }
}

/* ============================================================================
   DORADO METÁLICO · Precio nuevo S/ 519
   ============================================================================ */
@media (max-width: 899px) {
  html body .offer-banner__new {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 25%,
      #FFE082 50%,
      #FFC107 80%,
      #FFA000 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 3px 0 #8d6610)
      drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 24px rgba(255, 193, 7, 0.6)) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }
}

/* ============================================================================
   DORADO BRILLANTE · Hero H1 highlights ("60%" y "¿Serás el próximo?")
   ============================================================================ */
@media (max-width: 899px) {
  html body .hero__h1 .highlight,
  html body .text-gradient-gold {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 25%,
      #FFE082 55%,
      #FFC107 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 2px 0 rgba(90, 61, 0, 0.7))
      drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 16px rgba(255, 193, 7, 0.5)) !important;
    animation: none !important;
    font-weight: 900 !important;
  }
}

/* ============================================================================
   CONTRASTE ALTO · Fondos más oscuros y texto blanco puro
   ============================================================================ */
@media (max-width: 899px) {
  html body {
    background: radial-gradient(ellipse at 50% 0%, #0f2750 0%, #0a1930 50%, #050d1c 100%) fixed !important;
    color: #ffffff !important;
  }

  /* Texto principal blanco puro */
  html body .hero__h1,
  html body .section__title,
  html body h2,
  html body h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  }

  /* Párrafos con mejor contraste */
  html body p,
  html body .hero__sub,
  html body .section__lead,
  html body .card__text,
  html body .ventaja__text {
    color: #f0f2fa !important; /* cerca del blanco puro */
    line-height: 1.65 !important;
  }

  /* Text secundario con mejor contraste */
  html body .t-muted,
  html body .hero__trust,
  html body .footer,
  html body .footer p {
    color: #c4c8d4 !important;
  }

  /* Strong elements con dorado brillante */
  html body strong,
  html body b {
    color: #FFE082 !important;
    font-weight: 800 !important;
  }

  /* Em italic destacado dorado */
  html body em {
    color: #FFC107 !important;
    font-style: normal !important;
    font-weight: 700 !important;
  }
}

/* ============================================================================
   CARDS · Bordes 2px + shadow pronunciada para definición
   ============================================================================ */
@media (max-width: 899px) {
  html body .card,
  html body .razon,
  html body .ventaja,
  html body .plan,
  html body .timeline__phase,
  html body .winner-card,
  html body .advisor,
  html body .area,
  html body .pas__block,
  html body .faq-item {
    border-width: 2px !important;
    background: linear-gradient(180deg,
      rgba(22, 50, 90, 0.85) 0%,
      rgba(11, 30, 63, 0.75) 100%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow:
      0 12px 40px 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.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  }

  /* Plan featured con glow dorado pronunciado */
  html body .plan--featured {
    border: 3px solid #FFC107 !important;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.6),
      0 0 50px rgba(255, 193, 7, 0.4),
      0 0 0 1px rgba(255, 193, 7, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
}

/* ============================================================================
   BOTONES METÁLICOS LÍQUIDOS · el primary como oro pulido
   ============================================================================ */
@media (max-width: 899px) {
  html body .btn--primary {
    background: linear-gradient(180deg,
      #FFF59D 0%,
      #FFE082 15%,
      #FFD54F 40%,
      #FFC107 70%,
      #FFA000 100%) !important;
    color: #3a2400 !important;
    border: none !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.02em !important;
    box-shadow:
      0 10px 28px rgba(255, 193, 7, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.7),
      inset 0 -3px 0 rgba(138, 80, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s ease !important;
  }
  html body .btn--primary:active {
    transform: translateY(2px) scale(0.98) !important;
    box-shadow:
      0 4px 14px rgba(255, 193, 7, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(138, 80, 0, 0.4) !important;
  }

  /* Botón WhatsApp — verde oficial #25D366 SÓLIDO (no gradient) para que
     coincida exactamente con el color de la app WhatsApp. 2026-04-17 David */
  html body .btn--wa {
    background: #25D366 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow:
      0 6px 18px rgba(37, 211, 102, 0.35),
      0 2px 6px rgba(0, 0, 0, 0.25) !important;
    text-shadow: none !important;
    gap: 10px !important;
  }
  html body .btn--wa:hover,
  html body .btn--wa:active {
    background: #1ebe58 !important;
  }

  /* Botón ghost con border dorado */
  html body .btn--ghost {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 193, 7, 0.5) !important;
    color: #FFE082 !important;
    font-weight: 800 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.4) !important;
  }
}

/* ============================================================================
   SECTION EYEBROWS con glow dorado
   ============================================================================ */
@media (max-width: 899px) {
  html body .section__eyebrow {
    background: linear-gradient(135deg,
      rgba(255, 193, 7, 0.25),
      rgba(255, 225, 130, 0.12)) !important;
    border: 1.5px solid #FFC107 !important;
    color: #FFE082 !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6) !important;
    box-shadow:
      0 4px 12px rgba(255, 193, 7, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    font-weight: 900 !important;
    padding: 10px 20px !important;
    letter-spacing: 0.12em !important;
  }
}

/* ============================================================================
   WINNER CARD PHOTOS con borde dorado brillante intenso
   ============================================================================ */
@media (max-width: 899px) {
  html body .winner-card__photo {
    background-image:
      linear-gradient(135deg, #142e5f 0%, #0a1930 100%),
      linear-gradient(135deg,
        #FFFDE7 0%,
        #FFE082 25%,
        #FFD54F 50%,
        #FFC107 75%,
        #FFA000 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.6),
      0 0 0 4px rgba(255, 193, 7, 0.1),
      0 0 36px rgba(255, 193, 7, 0.35),
      inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    border-width: 4px !important;
  }
}

/* ============================================================================
   MEDALLAS con glow dorado intensificado
   ============================================================================ */
@media (max-width: 899px) {
  html body .medal-wrap {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 24px rgba(255, 193, 7, 0.7))
      drop-shadow(0 0 6px rgba(255, 253, 231, 0.9)) !important;
  }
  html body .crown-wrap {
    filter:
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 18px rgba(255, 193, 7, 0.8))
      drop-shadow(0 0 4px #FFFDE7) !important;
  }
}

/* ============================================================================
   ENCUADRES PERFECTOS · gaps + padding consistentes
   ============================================================================ */
@media (max-width: 899px) {
  /* Container uniforme */
  html body .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  /* Section padding consistente */
  html body .section,
  html body .mega-section,
  html body .ai-section,
  html body .offer-banner {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Grids con gap uniforme de 18px */
  html body .razones,
  html body .ventajas,
  html body .pricing,
  html body .timeline,
  html body .grid-3,
  html body .grid-4 {
    gap: 18px !important;
  }
  html body .grid-5 {
    gap: 14px !important;
  }

  /* Cards con padding interno uniforme 28px */
  html body .razon,
  html body .ventaja,
  html body .plan,
  html body .card--demo,
  html body .timeline__phase,
  html body .pas__block {
    padding: 28px 22px !important;
  }

  /* Stack > * + * con margin uniforme */
  html body .stack > * + * {
    margin-top: 18px !important;
  }
  html body .stack-lg > * + * {
    margin-top: 28px !important;
  }

  /* Botones con padding interno cómodo */
  html body .btn {
    padding: 16px 24px !important;
  }
  html body .btn--lg {
    padding: 20px 28px !important;
  }

  /* Alineación perfecta centered por default en mobile */
  html body .section__eyebrow,
  html body .section__title,
  html body .section__lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================================
   OFFER TIMER con colores más brillantes
   ============================================================================ */
@media (max-width: 640px) {
  html body .offer-timer {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.55) 100%) !important;
    border: 2px solid #E63946 !important;
    box-shadow:
      0 8px 32px rgba(230, 57, 70, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
  html body .offer-timer__block {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 107, 122, 0.4) !important;
  }
  html body .offer-timer__num {
    color: #ffffff !important;
    text-shadow:
      0 2px 0 rgba(230, 57, 70, 0.8),
      0 0 16px rgba(230, 57, 70, 0.7),
      0 0 4px #ffffff !important;
    font-weight: 900 !important;
  }
  html body .offer-timer__lbl {
    color: #ff8f99 !important;
    font-weight: 800 !important;
  }
}

/* ============================================================================
   BADGE HERO con glow metal
   ============================================================================ */
@media (max-width: 899px) {
  html body .hero__badge {
    background: linear-gradient(135deg,
      rgba(255, 193, 7, 0.3),
      rgba(255, 193, 7, 0.15)) !important;
    border: 2px solid #FFC107 !important;
    color: #FFE082 !important;
    font-weight: 900 !important;
    padding: 13px 22px !important;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow:
      0 10px 28px rgba(255, 193, 7, 0.3),
      0 0 40px rgba(255, 193, 7, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 0.08em !important;
  }
}

/* ============================================================================
   OFFER SPOTS CHIP más vivo
   ============================================================================ */
@media (max-width: 899px) {
  html body .offer-spots {
    background: linear-gradient(135deg,
      rgba(230, 57, 70, 0.25),
      rgba(230, 57, 70, 0.1)) !important;
    border: 2px solid rgba(230, 57, 70, 0.6) !important;
    box-shadow:
      0 10px 28px rgba(230, 57, 70, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    font-size: 15px !important;
    padding: 16px 22px !important;
  }
  html body .offer-spots strong {
    color: #ff8f99 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 12px rgba(230, 57, 70, 0.8) !important;
  }
}

/* ============================================================================
   PAS BLOCK colores distintivos por tipo
   ============================================================================ */
@media (max-width: 899px) {
  html body .pas__block:nth-child(1),
  html body .pas__block:nth-child(2) {
    border-left: 4px solid #E63946 !important;
  }
  html body .pas__block--solution {
    border-left: 4px solid #FFC107 !important;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(255, 193, 7, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }
  html body .pas__block h3 {
    color: #FFE082 !important;
    font-size: 22px !important;
    text-shadow: 0 0 12px rgba(255, 193, 7, 0.4) !important;
  }
  html body .pas__block--solution h3 {
    color: #FFC107 !important;
    text-shadow: 0 0 14px rgba(255, 193, 7, 0.6) !important;
  }
}

/* ============================================================================
   ÁREAS 5 con borders superiores más gruesos y contrastados
   ============================================================================ */
@media (max-width: 899px) {
  html body .area {
    border-top-width: 5px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg,
      rgba(22, 50, 90, 0.9) 0%,
      rgba(11, 30, 63, 0.75) 100%) !important;
  }
  html body .area__icon {
    filter: drop-shadow(0 4px 12px rgba(255, 193, 7, 0.5)) !important;
  }
  html body .area__name {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ============================================================================
   FAQ items con mejor contraste
   ============================================================================ */
@media (max-width: 899px) {
  html body .faq-item {
    border: 2px solid rgba(255, 193, 7, 0.2) !important;
  }
  html body .faq-item[open] {
    border-color: rgba(255, 193, 7, 0.5) !important;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(255, 193, 7, 0.15) !important;
  }
  html body .faq-item summary {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }
  html body .faq-item summary::after {
    color: #FFC107 !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6) !important;
  }
  html body .faq-item[open] summary::after {
    color: #FFE082 !important;
  }
}

/* ============================================================================
   STICKY BAR con glow dorado en los botones
   ============================================================================ */
@media (max-width: 1023px) {
  html body .sticky-bar {
    background: linear-gradient(180deg,
      rgba(11, 30, 63, 0.98) 0%,
      rgba(5, 13, 28, 1) 100%) !important;
    border-top: 3px solid #FFC107 !important;
    box-shadow:
      0 -18px 50px rgba(0, 0, 0, 0.7),
      0 -2px 16px rgba(255, 193, 7, 0.3) !important;
  }
}

/* ============================================================================
   TOPBAR con logo bien destacado
   ============================================================================ */
@media (max-width: 899px) {
  html body .topbar {
    background: rgba(5, 13, 28, 0.96) !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.2) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
  }
  html body .topbar__logo img {
    filter:
      drop-shadow(0 4px 12px rgba(255, 193, 7, 0.6))
      drop-shadow(0 0 20px rgba(255, 193, 7, 0.3)) !important;
  }
  html body .topbar__logo span {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  }
  html body .topbar__logo .t-gold {
    color: #FFE082 !important;
    text-shadow: 0 0 12px rgba(255, 193, 7, 0.6) !important;
  }
}

/* ============================================================================
   SCROLL PROGRESS BAR más vistosa
   ============================================================================ */
@media (max-width: 899px) {
  html body .scroll-progress {
    height: 4px !important;
    background: linear-gradient(90deg, #FFE082, #FFC107, #FFA000) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.6) !important;
  }
}

/* ============================================================================
   MARQUEE inferior con dorado brillante
   ============================================================================ */
@media (max-width: 899px) {
  html body .marquee__item--gold {
    color: #FFE082 !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.5) !important;
    font-weight: 800 !important;
  }
  html body .marquee__item {
    color: #f0f2fa !important;
    font-weight: 700 !important;
  }
}

/* ============================================================================
   FOOTER con más contraste
   ============================================================================ */
@media (max-width: 899px) {
  html body .footer {
    background: #030915 !important;
    border-top: 1px solid rgba(255, 193, 7, 0.2) !important;
  }
  html body .footer__heading {
    color: #FFE082 !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4) !important;
    font-weight: 900 !important;
  }
  html body .footer a {
    color: #d4d8e4 !important;
  }
}

/* ============================================================================
   TRANSITIONS SUAVES en móvil
   ============================================================================ */
@media (max-width: 899px) {
  html body .btn,
  html body .card,
  html body .razon,
  html body .ventaja {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.3s ease !important;
  }
  html body .btn:active,
  html body .card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }
}

/* ============================================================================
   PERFORMANCE: reducir animaciones pesadas
   ============================================================================ */
@media (max-width: 480px) {
  /* Canvas hero-web con opacity más baja para que el texto brille más */
  html body .hero-web {
    opacity: 0.55 !important;
  }
}
/* ============================================================================
   fx-mobile-v4.css — Dorado claro brillante + colores temáticos
   ---------------------------------------------------------------------------
   Fix: dorados se veían como "oro oxidado antiguo".
   Solución: paleta mucho más clara, SIN marrón, con glow solo amarillo puro.
   Bonus: cada ventaja y razón con su color temático vivo.
   ============================================================================ */

/* ============================================================================
   DORADO BRILLANTE REAL (sin marrón oxidado)
   Clave: quitar drop-shadow(0 3px 0 #8d6610) que daba el relieve oxidado.
   Usar solo shadows oscuros neutros + glow amarillo saturado.
   ============================================================================ */

@media (max-width: 899px) {
  /* Mega number 60% — oro pulido brillante */
  html body .mega-number {
    background: linear-gradient(180deg,
      #FFFEF7 0%,
      #FFF9C4 18%,
      #FFEF8A 38%,
      #FFE066 62%,
      #FFD740 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3))
      drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 50px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 12px rgba(255, 249, 196, 0.7)) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    font-size: clamp(150px, 42vw, 240px) !important;
  }

  /* Headline "20% DESCUENTO" */
  html body .offer-banner__headline {
    background: linear-gradient(180deg,
      #FFFEF7 0%,
      #FFF9C4 20%,
      #FFEF8A 45%,
      #FFE066 75%,
      #FFD740 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3))
      drop-shadow(0 5px 14px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 36px rgba(255, 215, 0, 0.85))
      drop-shadow(0 0 10px rgba(255, 249, 196, 0.6)) !important;
    font-weight: 900 !important;
  }

  /* Precio nuevo S/ 519 */
  html body .offer-banner__new {
    background: linear-gradient(180deg,
      #FFFEF7 0%,
      #FFF9C4 25%,
      #FFEF8A 55%,
      #FFE066 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4))
      drop-shadow(0 5px 14px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 30px rgba(255, 215, 0, 0.85)) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  /* Hero H1 highlights */
  html body .hero__h1 .highlight,
  html body .text-gradient-gold {
    background: linear-gradient(180deg,
      #FFFEF7 0%,
      #FFF9C4 25%,
      #FFEF8A 55%,
      #FFE066 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.7)) !important;
    font-weight: 900 !important;
    animation: none !important;
  }

  /* Texto con strong ya NO dorado oscuro, ahora claro */
  html body strong,
  html body b {
    color: #FFEF8A !important;
    font-weight: 800 !important;
  }

  /* Em italic también más claro */
  html body em {
    color: #FFD740 !important;
    font-style: normal !important;
    font-weight: 700 !important;
  }

  /* Badges y eyebrows con dorado brillante */
  html body .section__eyebrow {
    background: linear-gradient(135deg,
      rgba(255, 239, 138, 0.3),
      rgba(255, 224, 102, 0.15)) !important;
    border: 1.5px solid #FFE066 !important;
    color: #FFF9C4 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
    box-shadow:
      0 4px 14px rgba(255, 215, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  html body .hero__badge {
    background: linear-gradient(135deg,
      rgba(255, 239, 138, 0.35),
      rgba(255, 224, 102, 0.18)) !important;
    border: 2px solid #FFE066 !important;
    color: #FFF9C4 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow:
      0 10px 30px rgba(255, 215, 0, 0.35),
      0 0 40px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
}

/* ============================================================================
   BOTONES METÁLICOS CLAROS (oro brillante real, no oxidado)
   ============================================================================ */
@media (max-width: 899px) {
  html body .btn--primary {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 20%,
      #FFEF8A 45%,
      #FFE066 75%,
      #FFD740 100%) !important;
    color: #3a2400 !important;
    border: none !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    letter-spacing: 0.015em !important;
    box-shadow:
      0 12px 32px rgba(255, 215, 0, 0.55),
      0 4px 14px rgba(0, 0, 0, 0.35),
      inset 0 2px 0 rgba(255, 255, 255, 0.85),
      inset 0 -2px 0 rgba(200, 140, 0, 0.25),
      inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.2s ease !important;
  }
  html body .btn--primary:active {
    transform: translateY(2px) scale(0.98) !important;
    box-shadow:
      0 4px 14px rgba(255, 215, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      inset 0 -2px 0 rgba(200, 140, 0, 0.3) !important;
  }

  html body .btn--ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 2px solid #FFE066 !important;
    color: #FFF9C4 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5) !important;
  }
}

/* ============================================================================
   MEDALLAS con glow dorado CLARO (sin oscuro)
   ============================================================================ */
@media (max-width: 899px) {
  html body .medal-wrap {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 26px rgba(255, 215, 0, 0.85))
      drop-shadow(0 0 8px rgba(255, 253, 231, 1)) !important;
  }
  html body .crown-wrap {
    filter:
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 20px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 6px #FFFDE7) !important;
  }
}

/* ============================================================================
   WINNER CARD photos borde dorado brillante claro
   ============================================================================ */
@media (max-width: 899px) {
  html body .winner-card__photo {
    background-image:
      linear-gradient(135deg, #142e5f 0%, #0a1930 100%),
      linear-gradient(135deg,
        #FFFEF7 0%,
        #FFF9C4 25%,
        #FFEF8A 50%,
        #FFE066 75%,
        #FFD740 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-width: 4px !important;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.6),
      0 0 0 4px rgba(255, 215, 0, 0.1),
      0 0 40px rgba(255, 215, 0, 0.4),
      inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ============================================================================
   OCULTAR el número gigante de fondo en VENTAJAS (evita duplicación del 1)
   ============================================================================ */
@media (max-width: 1023px) {
  html body .ventaja__bgnum {
    display: none !important;
  }
}

/* ============================================================================
   VENTAJAS con COLORES TEMÁTICOS VIVOS (6 colores distintos)
   ============================================================================ */
@media (max-width: 1023px) {
  /* Variables por ventaja */
  html body .ventajas .ventaja:nth-child(1) {
    --v-color: #FFD740;
    --v-color-soft: rgba(255, 215, 64, 0.18);
    --v-color-glow: rgba(255, 215, 64, 0.5);
  }
  html body .ventajas .ventaja:nth-child(2) {
    --v-color: #4FC3F7;
    --v-color-soft: rgba(79, 195, 247, 0.18);
    --v-color-glow: rgba(79, 195, 247, 0.5);
  }
  html body .ventajas .ventaja:nth-child(3) {
    --v-color: #66BB6A;
    --v-color-soft: rgba(102, 187, 106, 0.18);
    --v-color-glow: rgba(102, 187, 106, 0.5);
  }
  html body .ventajas .ventaja:nth-child(4) {
    --v-color: #FFA726;
    --v-color-soft: rgba(255, 167, 38, 0.18);
    --v-color-glow: rgba(255, 167, 38, 0.5);
  }
  html body .ventajas .ventaja:nth-child(5) {
    --v-color: #BA68C8;
    --v-color-soft: rgba(186, 104, 200, 0.18);
    --v-color-glow: rgba(186, 104, 200, 0.5);
  }
  html body .ventajas .ventaja:nth-child(6) {
    --v-color: #FF6B9D;
    --v-color-soft: rgba(255, 107, 157, 0.18);
    --v-color-glow: rgba(255, 107, 157, 0.5);
  }

  /* Card base con gradient del color temático */
  html body .ventajas .ventaja {
    background: linear-gradient(165deg,
      var(--v-color-soft, rgba(255, 215, 64, 0.18)) 0%,
      rgba(11, 30, 63, 0.85) 60%,
      rgba(5, 13, 28, 0.9) 100%) !important;
    border: 2px solid var(--v-color, #FFE066) !important;
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.5),
      0 0 40px var(--v-color-glow, rgba(255, 215, 64, 0.4)),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    padding: 32px 24px !important;
    border-radius: 26px !important;
  }

  /* Badge circular del color temático */
  html body .ventajas .ventaja__badge {
    background: linear-gradient(135deg,
      #ffffff 0%,
      var(--v-color, #FFE066) 100%) !important;
    color: #0B1E3F !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    box-shadow:
      0 8px 24px var(--v-color-glow, rgba(255, 215, 64, 0.5)),
      0 4px 12px rgba(0, 0, 0, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.7),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important;
    margin-bottom: 18px !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }

  /* Título del color temático */
  html body .ventajas .ventaja__title {
    color: var(--v-color, #FFE066) !important;
    text-shadow: 0 0 14px var(--v-color-glow, rgba(255, 215, 64, 0.5)) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  /* Text con mejor contraste */
  html body .ventajas .ventaja__text {
    color: #f0f2fa !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  html body .ventajas .ventaja__text strong {
    color: var(--v-color, #FFE066) !important;
  }
}

/* ============================================================================
   RAZONES con COLORES TEMÁTICOS (5 colores)
   ============================================================================ */
@media (max-width: 1023px) {
  html body .razones .razon:nth-child(1) {
    --r-color: #FFD740;
    --r-color-soft: rgba(255, 215, 64, 0.15);
  }
  html body .razones .razon:nth-child(2) {
    --r-color: #4FC3F7;
    --r-color-soft: rgba(79, 195, 247, 0.15);
  }
  html body .razones .razon:nth-child(3) {
    --r-color: #66BB6A;
    --r-color-soft: rgba(102, 187, 106, 0.15);
  }
  html body .razones .razon:nth-child(4) {
    --r-color: #BA68C8;
    --r-color-soft: rgba(186, 104, 200, 0.15);
  }
  html body .razones .razon:nth-child(5) {
    --r-color: #FFA726;
    --r-color-soft: rgba(255, 167, 38, 0.15);
  }

  html body .razones .razon {
    background: linear-gradient(165deg,
      var(--r-color-soft, rgba(255, 215, 64, 0.15)) 0%,
      rgba(11, 30, 63, 0.85) 60%,
      rgba(5, 13, 28, 0.9) 100%) !important;
    border: 2px solid var(--r-color, #FFE066) !important;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 0 36px color-mix(in srgb, var(--r-color, #FFE066) 18%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    padding: 28px 22px !important;
  }

  html body .razones .razon::before {
    background: linear-gradient(90deg,
      var(--r-color, #FFE066),
      color-mix(in srgb, var(--r-color, #FFE066) 50%, white),
      transparent) !important;
    height: 5px !important;
  }

  html body .razones .razon__icon {
    background: linear-gradient(135deg,
      #ffffff,
      var(--r-color, #FFE066)) !important;
    border: 2px solid var(--r-color, #FFE066) !important;
    box-shadow:
      0 6px 18px color-mix(in srgb, var(--r-color, #FFE066) 40%, transparent),
      inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
  }

  html body .razones .razon__number {
    color: var(--r-color, #FFE066) !important;
    text-shadow: 0 0 14px color-mix(in srgb, var(--r-color, #FFE066) 50%, transparent) !important;
  }

  html body .razones .razon__title {
    color: var(--r-color, #FFE066) !important;
    text-shadow: 0 0 12px color-mix(in srgb, var(--r-color, #FFE066) 40%, transparent) !important;
  }

  html body .razones .razon__list li {
    border-left: 3px solid var(--r-color, #FFE066) !important;
    background: rgba(0, 0, 0, 0.3) !important;
  }

  html body .razones .razon__list li::before {
    color: var(--r-color, #FFE066) !important;
  }

  html body .razones .razon__list li strong {
    color: color-mix(in srgb, var(--r-color, #FFE066) 80%, white) !important;
  }
}

/* ============================================================================
   FASES timeline con más brillo en los números
   ============================================================================ */
@media (max-width: 899px) {
  html body .timeline__phase .timeline__num {
    text-shadow: 0 0 14px currentColor, 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ============================================================================
   5 áreas con background del color y glow intenso
   ============================================================================ */
@media (max-width: 899px) {
  html body .area:nth-child(1) {
    background: linear-gradient(180deg,
      rgba(230, 57, 70, 0.15),
      rgba(11, 30, 63, 0.85)) !important;
  }
  html body .area:nth-child(2) {
    background: linear-gradient(180deg,
      rgba(255, 167, 38, 0.15),
      rgba(11, 30, 63, 0.85)) !important;
  }
  html body .area:nth-child(3) {
    background: linear-gradient(180deg,
      rgba(255, 215, 64, 0.15),
      rgba(11, 30, 63, 0.85)) !important;
  }
  html body .area:nth-child(4) {
    background: linear-gradient(180deg,
      rgba(102, 187, 106, 0.15),
      rgba(11, 30, 63, 0.85)) !important;
  }
  html body .area:nth-child(5) {
    background: linear-gradient(180deg,
      rgba(79, 195, 247, 0.15),
      rgba(11, 30, 63, 0.85)) !important;
  }
  html body .area__icon {
    filter: drop-shadow(0 0 16px currentColor) !important;
  }
}

/* ============================================================================
   PAS BLOCKS con color más brillante en los títulos
   ============================================================================ */
@media (max-width: 899px) {
  html body .pas__block:nth-child(1) h3,
  html body .pas__block:nth-child(2) h3 {
    color: #ff8f99 !important;
    text-shadow: 0 0 14px rgba(230, 57, 70, 0.6) !important;
  }
  html body .pas__block--solution h3 {
    color: #FFEF8A !important;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.7) !important;
  }
}

/* ============================================================================
   COUNTDOWN números con mejor brillo
   ============================================================================ */
@media (max-width: 640px) {
  html body .offer-timer__num {
    color: #ffffff !important;
    text-shadow:
      0 2px 0 rgba(230, 57, 70, 0.9),
      0 0 20px rgba(230, 57, 70, 0.8),
      0 0 6px rgba(255, 255, 255, 0.8) !important;
  }
}

/* ============================================================================
   TRUST line con mejor contraste
   ============================================================================ */
@media (max-width: 899px) {
  html body .hero__trust {
    color: #a6aabb !important;
    font-weight: 600 !important;
  }
}
/* ============================================================================
   fx-mobile-v5.css — Oro brillante REAL con color sólido #FFE066
   ---------------------------------------------------------------------------
   Problema v4: background-clip: text con gradient multi-stop se ve apagado en
   móvil porque el ojo percibe el promedio, no los stops brillantes. El
   gradient cream-to-amber pierde brillo en el render de Chrome/Safari mobile.

   Solución v5: usar COLOR SÓLIDO #FFE066 (el mismo dorado del border del
   ghost button que al usuario le gusta) + text-shadow saturado múltiple para
   simular metal brillante. Sin gradients clipped. Máxima legibilidad + brillo.
   ============================================================================ */

/* ============================================================================
   HERO BACKGROUND SIN IMAGEN — gradient limpio con partículas + red
   La imagen .hero__bg-img está oculta con style="display:none" en el HTML.
   El fondo ahora es puramente el gradient del body + el canvas hero-web.
   ============================================================================ */
html body .hero__bg-img {
  display: none !important;
}
html body .hero {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #1a3a6f 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 30% 100%, rgba(76, 155, 230, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 70% 100%, rgba(232, 200, 106, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #0f2750 0%, #0a1930 60%, #050d1c 100%) !important;
}
html body .hero__bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(232, 200, 106, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(76, 155, 230, 0.08) 0%, transparent 70%) !important;
}
html body .hero__overlay {
  background: linear-gradient(180deg,
    rgba(11, 30, 63, 0.2) 0%,
    rgba(11, 30, 63, 0.5) 60%,
    rgba(5, 13, 28, 0.85) 100%) !important;
}

@media (max-width: 899px) {

  /* ========================================================================
     MEGA NUMBER "60%" — sólido brillante con halo dorado
     ======================================================================== */
  html body .mega-number {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFE066 !important;
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 14px #FFE066,
      0 0 30px rgba(255, 215, 0, 0.9),
      0 0 50px rgba(255, 215, 0, 0.55),
      0 6px 18px rgba(0, 0, 0, 0.6) !important;
    filter: none !important;
    font-weight: 900 !important;
    font-size: clamp(150px, 42vw, 240px) !important;
    letter-spacing: -0.03em !important;
    animation: none !important;
  }
  html body .mega-number::after {
    color: #FFE066 !important;
    -webkit-text-fill-color: #FFE066 !important;
  }

  /* ========================================================================
     HEADLINE "20% DE DESCUENTO"
     ======================================================================== */
  html body .offer-banner__headline {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFE066 !important;
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 12px #FFE066,
      0 0 26px rgba(255, 215, 0, 0.85),
      0 0 44px rgba(255, 215, 0, 0.5),
      0 5px 14px rgba(0, 0, 0, 0.55) !important;
    filter: none !important;
    font-weight: 900 !important;
    animation: none !important;
  }

  /* ========================================================================
     PRECIO NUEVO "S/ 519"
     ======================================================================== */
  html body .offer-banner__new {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFE066 !important;
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 10px #FFE066,
      0 0 22px rgba(255, 215, 0, 0.85),
      0 0 38px rgba(255, 215, 0, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.55) !important;
    filter: none !important;
    font-weight: 900 !important;
  }

  /* ========================================================================
     HERO H1 HIGHLIGHTS — "60%" y "¿Serás el próximo?"
     ======================================================================== */
  html body .hero__h1 .highlight,
  html body .text-gradient-gold {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFE066 !important;
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 10px #FFE066,
      0 0 20px rgba(255, 215, 0, 0.8),
      0 0 32px rgba(255, 215, 0, 0.45),
      0 3px 10px rgba(0, 0, 0, 0.5) !important;
    filter: none !important;
    font-weight: 900 !important;
    animation: none !important;
  }

  /* ========================================================================
     BOTÓN PRIMARY — dorado saturado brillante real
     Quitamos los cream stops (#FFFDE7, #FFF59D) que apagaban el color.
     Usamos amarillos saturados Material Design.
     ======================================================================== */
  html body .btn--primary {
    background: linear-gradient(180deg,
      #FFF176 0%,      /* amarillo claro saturado */
      #FFEB3B 28%,     /* amarillo Material 500 */
      #FFD740 65%,     /* amber A200 */
      #FFC400 100%)    /* amber A400 */ !important;
    color: #1a0f00 !important;
    border: 2px solid #FFD740 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.015em !important;
    box-shadow:
      0 12px 34px rgba(255, 215, 0, 0.65),
      0 6px 16px rgba(0, 0, 0, 0.35),
      inset 0 2px 0 rgba(255, 255, 255, 0.9),
      inset 0 -2px 0 rgba(200, 150, 0, 0.25),
      inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.2s ease !important;
  }
  html body .btn--primary:active {
    transform: translateY(2px) scale(0.98) !important;
    box-shadow:
      0 4px 14px rgba(255, 215, 0, 0.5),
      inset 0 2px 0 rgba(255, 255, 255, 0.7),
      inset 0 -2px 0 rgba(200, 150, 0, 0.3) !important;
  }

  /* ========================================================================
     STRONG y EM — también color sólido brillante
     ======================================================================== */
  html body strong,
  html body b {
    color: #FFE066 !important;
    text-shadow: 0 0 8px rgba(255, 224, 102, 0.6) !important;
    font-weight: 800 !important;
  }
  html body em {
    color: #FFE066 !important;
    text-shadow: 0 0 8px rgba(255, 224, 102, 0.5) !important;
    font-style: normal !important;
    font-weight: 700 !important;
  }

  /* ========================================================================
     HERO BADGE — más brillante
     ======================================================================== */
  html body .hero__badge {
    background: linear-gradient(135deg,
      rgba(255, 224, 102, 0.35),
      rgba(255, 215, 64, 0.15)) !important;
    border: 2px solid #FFE066 !important;
    color: #FFE066 !important;
    font-weight: 900 !important;
    text-shadow:
      0 0 10px #FFE066,
      0 0 18px rgba(255, 215, 0, 0.6),
      0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow:
      0 10px 30px rgba(255, 215, 0, 0.35),
      0 0 40px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }

  /* ========================================================================
     SECTION EYEBROWS
     ======================================================================== */
  html body .section__eyebrow {
    background: linear-gradient(135deg,
      rgba(255, 224, 102, 0.3),
      rgba(255, 215, 64, 0.12)) !important;
    border: 1.5px solid #FFE066 !important;
    color: #FFE066 !important;
    text-shadow:
      0 0 8px rgba(255, 224, 102, 0.8),
      0 0 14px rgba(255, 215, 0, 0.5) !important;
    box-shadow:
      0 4px 14px rgba(255, 215, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  /* ========================================================================
     RANK PILL en winner cards (1° NACIONAL, etc.)
     ======================================================================== */
  html body .winner-card__rank {
    background: linear-gradient(180deg,
      #FFF176 0%,
      #FFE066 50%,
      #FFD740 100%) !important;
    color: #1a0f00 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    box-shadow:
      0 4px 14px rgba(255, 215, 0, 0.5),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1.5px 0 rgba(180, 140, 0, 0.3) !important;
  }

  /* ========================================================================
     MEDAL GLOW — ajustar halos
     ======================================================================== */
  html body .medal-wrap {
    filter:
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 22px rgba(255, 224, 102, 0.95))
      drop-shadow(0 0 6px #FFFDE7) !important;
  }
  html body .crown-wrap {
    filter:
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 18px rgba(255, 224, 102, 1))
      drop-shadow(0 0 4px #FFFDE7) !important;
  }

  /* ========================================================================
     WINNER CARD PHOTOS — borde dorado saturado
     ======================================================================== */
  html body .winner-card__photo {
    background-image:
      linear-gradient(135deg, #142e5f 0%, #0a1930 100%),
      linear-gradient(135deg,
        #FFF176 0%,
        #FFE066 40%,
        #FFD740 75%,
        #FFC400 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-width: 4px !important;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.6),
      0 0 0 4px rgba(255, 215, 0, 0.1),
      0 0 36px rgba(255, 215, 0, 0.4),
      inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }

  /* ========================================================================
     ADVISORS photos — mismo look dorado brillante
     ======================================================================== */
  html body .advisor__photo {
    border: 3px solid #FFE066 !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.5),
      0 0 0 4px rgba(255, 215, 0, 0.1),
      0 0 30px rgba(255, 215, 0, 0.35),
      inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  /* ========================================================================
     Title del hero más blanco puro
     ======================================================================== */
  html body .hero__h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
  }

  /* ========================================================================
     Footer logo con glow
     ======================================================================== */
  html body .footer img {
    filter: drop-shadow(0 4px 16px rgba(255, 215, 0, 0.4)) !important;
  }

  /* ========================================================================
     Marquee items gold con más saturación
     ======================================================================== */
  html body .marquee__item--gold {
    color: #FFE066 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
    font-weight: 900 !important;
  }

  /* ========================================================================
     Footer heading dorado brillante
     ======================================================================== */
  html body .footer__heading {
    color: #FFE066 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    font-weight: 900 !important;
  }

  /* ========================================================================
     Topbar logo title color
     ======================================================================== */
  html body .topbar__logo .t-gold {
    color: #FFE066 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.7) !important;
  }

  /* ========================================================================
     Plan Pro badge "El más elegido"
     ======================================================================== */
  html body .plan__badge {
    background: linear-gradient(180deg,
      #FFF176 0%,
      #FFE066 50%,
      #FFD740 100%) !important;
    color: #1a0f00 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    box-shadow:
      0 6px 20px rgba(255, 215, 0, 0.5),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.85) !important;
    font-weight: 900 !important;
  }

  /* ========================================================================
     Plan Pro precio
     ======================================================================== */
  html body .plan__price {
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 10px rgba(255, 224, 102, 0.8),
      0 0 22px rgba(255, 215, 0, 0.6),
      0 4px 10px rgba(0, 0, 0, 0.5) !important;
  }
  html body .plan__price small {
    color: #c4c8d4 !important;
    text-shadow: none !important;
  }
  html body .plan__price-old {
    color: #6b7085 !important;
    text-shadow: none !important;
  }

  /* ========================================================================
     Invest price "S/ 649 total"
     ======================================================================== */
  html body .invest__price {
    color: #FFE066 !important;
    text-shadow:
      0 0 2px #FFFDE7,
      0 0 12px rgba(255, 224, 102, 0.9),
      0 0 24px rgba(255, 215, 0, 0.6),
      0 4px 12px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ============================================================================
   HORARIO RESPONSIVE · Cards verticales en móvil, tabla en desktop
   ============================================================================ */

/* Por defecto (desktop): cards ocultas, tabla visible */
.schedule-mobile {
  display: none;
}

/* Móvil: cards visibles, tabla oculta */
@media (max-width: 899px) {
  html body .schedule {
    display: none !important;
  }
  html body .schedule-mobile {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }
}

/* Tablet: 2 columnas */
@media (min-width: 640px) and (max-width: 899px) {
  html body .schedule-mobile {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Card base */
.sched-card {
  display: flex;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(165deg,
    var(--sc-color-soft, rgba(255, 224, 102, 0.15)) 0%,
    rgba(11, 30, 63, 0.88) 55%,
    rgba(5, 13, 28, 0.9) 100%);
  border: 2px solid var(--sc-color, #FFE066);
  border-left-width: 6px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 36px var(--sc-color-glow, rgba(255, 224, 102, 0.25)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Colores por tipo */
.sched-card--async {
  --sc-color: #BA68C8;
  --sc-color-soft: rgba(186, 104, 200, 0.15);
  --sc-color-glow: rgba(186, 104, 200, 0.35);
}
.sched-card--open {
  --sc-color: #66BB6A;
  --sc-color-soft: rgba(102, 187, 106, 0.15);
  --sc-color-glow: rgba(102, 187, 106, 0.35);
}
.sched-card--live {
  --sc-color: #FFE066;
  --sc-color-soft: rgba(255, 224, 102, 0.15);
  --sc-color-glow: rgba(255, 215, 0, 0.4);
}
.sched-card--quiz {
  --sc-color: #FF6B7A;
  --sc-color-soft: rgba(255, 107, 122, 0.15);
  --sc-color-glow: rgba(255, 107, 122, 0.35);
}
.sched-card--tutor {
  --sc-color: #4FC3F7;
  --sc-color-soft: rgba(79, 195, 247, 0.15);
  --sc-color-glow: rgba(79, 195, 247, 0.35);
}
.sched-card--close {
  --sc-color: #90A4AE;
  --sc-color-soft: rgba(144, 164, 174, 0.15);
  --sc-color-glow: rgba(144, 164, 174, 0.3);
}
.sched-card--async {
  /* Plataforma 24/7 = morado distintivo */
  --sc-color: #BA68C8;
  --sc-color-soft: rgba(186, 104, 200, 0.15);
  --sc-color-glow: rgba(186, 104, 200, 0.35);
}

.sched-card__icon {
  font-size: 46px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px var(--sc-color)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  align-self: flex-start;
  margin-top: 4px;
}

.sched-card__body {
  flex: 1;
  min-width: 0;
}

.sched-card__label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--sc-color-soft, rgba(255, 224, 102, 0.2));
  border: 1.5px solid var(--sc-color, #FFE066);
  color: var(--sc-color, #FFE066);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 999px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px color-mix(in srgb, var(--sc-color, #FFE066) 50%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sc-color, #FFE066) 20%, transparent);
}

.sched-card__title {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.sched-card__time {
  font-size: 16px;
  font-weight: 800;
  color: var(--sc-color, #FFE066);
  margin-bottom: 10px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--sc-color, #FFE066) 45%, transparent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sched-card__time::before {
  content: "🕐";
  font-size: 14px;
  filter: grayscale(1) brightness(1.5);
}

.sched-card__desc {
  font-size: 14px !important;
  color: #e6e8ef !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Hover/active state */
.sched-card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .sched-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.55),
      0 0 50px var(--sc-color-glow, rgba(255, 224, 102, 0.4));
  }
}

/* Badge "en vivo" parpadeante para cards live */
.sched-card--live::before {
  content: "LIVE";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  background: #FF3B47;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 59, 71, 0.7);
  animation: liveBlink 1.5s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px rgba(255, 59, 71, 0.7); }
  50%      { opacity: 0.6; box-shadow: 0 0 24px rgba(255, 59, 71, 1); }
}

/* Card async con banner 24/7 */
.sched-card--async::before {
  content: "24/7";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #BA68C8, #9C27B0);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(186, 104, 200, 0.6);
}

/* Card quiz con banner DURACIÓN */
.sched-card--quiz::before {
  content: "57h";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #FF6B7A, #E63946);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 107, 122, 0.6);
}

/* Ajustes mobile pequeño */
@media (max-width: 480px) {
  .sched-card {
    padding: 18px 16px;
    gap: 14px;
  }
  .sched-card__icon {
    font-size: 38px;
  }
  .sched-card__title {
    font-size: 17px !important;
  }
  .sched-card__time {
    font-size: 15px;
  }
  .sched-card__desc {
    font-size: 13px !important;
  }
}

/* ============================================================================
   MOBILE GOLD FIX · Abril 2026
   ----------------------------------------------------------------------------
   Problema reportado: en mobile los dorados se ven "oxidados" / oscuros,
   pierden el brillo.  Causa: muchos breakpoints estaban en max-width: 899px,
   quedando fuera tablets en portrait y phones XL landscape (900-1024 px). En
   esos devices gana la paleta metálica de fx-max.css (que tiene b88f2f al
   final, dorado muy oscuro).

   Fix: re-declarar paleta brillante y reglas críticas para max-width: 1023px
   con alta specificity + !important.  Aplica también como backstop cuando
   "@supports not" de background-clip text (browsers viejos).
   ============================================================================ */
@media (max-width: 1023px) {
  html body {
    --gold-shine-0: #FFFDE7;
    --gold-shine-1: #FFF59D;
    --gold-shine-2: #FFE082;
    --gold-shine-3: #FFD54F;
    --gold-shine-4: #FFC107;
    --gold-shine-5: #FFA000;
    --gold-shine-6: #FF8F00;
  }

  /* Mega number (60%): paleta brillante sin tonos oscuros */
  html body .mega-number {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 18%,
      #FFE082 38%,
      #FFD54F 58%,
      #FFC107 80%,
      #FFA000 100%) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important; /* sin mega-shift que rompe el render */
  }

  /* text-gradient-gold (hero, titulares): igual paleta brillante */
  html body .text-gradient-gold {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 22%,
      #FFE082 45%,
      #FFD54F 65%,
      #FFC107 85%,
      #FFA000 100%) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* Offer banner headline ("20% DESCUENTO"): mismo brillo */
  html body .offer-banner__headline {
    background: linear-gradient(180deg,
      #FFFDE7 0%,
      #FFF59D 22%,
      #FFE082 45%,
      #FFD54F 65%,
      #FFC107 85%,
      #FFA000 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
}

/* Fallback: browsers sin background-clip:text (Safari muy viejo, algunos WebViews)
   usan color sólido amber brillante para que al menos se vea dorado, no negro/transparente. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mega-number,
  .text-gradient-gold,
  .offer-banner__headline {
    color: #FFC107 !important;
    background: none !important;
  }
}

/* ============================================================================
   HORARIO MOBILE · Grouped by modality (David iteración Abr 16)
   Todas las cards de una modalidad comparten color. Group header sobre cada grupo.
   ============================================================================ */
.sched-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sched-group-header:first-child { margin-top: 0; }
.sched-group-header__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px currentColor;
  opacity: .35;
}
/* 2026-04-17 David: ASYNC = CELESTE · SYNC = ROJO (live) — clara diferenciación */
.sched-group-header--async {
  background: linear-gradient(90deg, rgba(79,195,247,.22) 0%, rgba(79,195,247,.05) 100%);
  border-left: 4px solid #4FC3F7;
  color: #BAE6FD;
}
.sched-group-header--async .sched-group-header__dot { color: #4FC3F7; }
.sched-group-header--sync {
  background: linear-gradient(90deg, rgba(239,68,68,.22) 0%, rgba(239,68,68,.05) 100%);
  border-left: 4px solid #EF4444;
  color: #FECACA;
}
.sched-group-header--sync .sched-group-header__dot {
  color: #EF4444;
  animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; box-shadow: 0 0 0 3px currentColor, 0 0 16px currentColor; }
}

/* 2026-04-17 David (iteración 3): volver a UNIFICAR por modalidad.
   Toda la línea de una modalidad = mismo color. Cards de ASYNC = CELESTE,
   cards de SYNC = ROJO (live). Los tipos internos ya no varían color. */
.sched-card[data-modality="async"] {
  --sc-color: #4FC3F7 !important;
  --sc-color-soft: rgba(79, 195, 247, .15) !important;
  --sc-color-glow: rgba(79, 195, 247, .4) !important;
}
.sched-card[data-modality="sync"] {
  --sc-color: #EF4444 !important;
  --sc-color-soft: rgba(239, 68, 68, .15) !important;
  --sc-color-glow: rgba(239, 68, 68, .5) !important;
}

/* LIVE dot pulsante en cards sync (reemplazo del badge LIVE viejo) */
.sched-card[data-modality="sync"]::before {
  content: "● LIVE";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  animation: sync-live-blink 1.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes sync-live-blink {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); box-shadow: 0 0 20px rgba(239, 68, 68, 1); }
}
/* Bloquear el badge LIVE viejo del tipo específico (ya no se usa) */
.sched-card--live::before {
  content: none !important;
}

/* ==========================================================================
   MOBILE PERF + POLISH — 2026-04-17
   Problema observado: en celular se ve pesado/lento y algunos CTAs overflow.
   Fix 1: ocultar decoraciones heavy (canvases, blobs) bajo 768px para que
          no consuman GPU en devices humildes. Antes solo se ocultaban en
          modo "lite" (saveData), pero las animaciones de particles+hero-web
          son excesivas en móvil regardless de la conexión.
   Fix 2: btn--stats con texto largo se desbordaba (476px en viewport 335px).
          Ahora wrap natural + centrado.
   Fix 3: plan__discount-note del plan Pro con mejor presencia en móvil.
   ========================================================================== */
@media (max-width: 767px) {
  /* Fix 1: matar decoraciones pesadas en móvil */
  .only-full,
  canvas.fx-particles,
  canvas.hero-web,
  canvas.ai-canvas,
  .morph-blob,
  .cursor-trail-canvas {
    display: none !important;
  }

  /* Fix 2: btn--stats se desbordaba — ahora wrap + centrado */
  .btn.btn--stats {
    white-space: normal !important;
    text-align: center;
    line-height: 1.35;
    padding: 16px 20px !important;
    max-width: 100%;
  }

  /* Fix 3: plan Pro discount note — separar del precio, más visible */
  .plan__discount-note {
    margin: 6px 0 12px !important;
    font-size: 14px !important;
    padding: 6px 12px;
    background: rgba(232, 200, 106, .12);
    border-radius: 999px;
    display: inline-block;
  }

  /* Fix 4: reducir padding vertical de secciones — menos scroll total */
  section.section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Fix 5: ai-canvas-wrap estaba consumiendo altura vacía (canvas oculto) */
  .ai-canvas-wrap,
  .ai-svg-wrap {
    min-height: 0 !important;
    display: none !important;
  }
  /* Compactar espacio entre Demo y Tecnología disruptiva */
  section.cv-auto + section.ai-section,
  section#demo + section {
    padding-top: 24px !important;
  }
  section#demo {
    padding-bottom: 24px !important;
  }

  /* Fix 7 (2026-04-17): carrusel "Rostros reales" NO avanzaba en móvil.
     Causa: en modo "full" aplicaba marquee CSS (animation) + overflow:hidden
     bloqueando touch swipe. Fix: en <=767px forzar scroll manual con snap. */
  html body .carousel-cards {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  html body .carousel-cards::-webkit-scrollbar { display: none; }
  html body .carousel-cards__track {
    animation: none !important;
    width: max-content !important;
    padding: 0 var(--s-3) !important;
  }
  html body .winner-card {
    scroll-snap-align: center !important;
  }

  /* Fix 8 (2026-04-17): fase-step labels no se deben cortar en móvil */
  html body .fases-stepper {
    gap: 6px !important;
    grid-template-columns: repeat(5, 1fr) !important;
    overflow: visible !important;
  }
  html body .fase-step {
    padding: 10px 4px 12px !important;
    min-width: 0 !important;
  }
  html body .fase-step__label {
    font-size: 11px !important;
    line-height: 1.15 !important;
    hyphens: auto;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
  }
  html body .fase-step__dur {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }
  html body .fase-step__num {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  html body .fase-step:not(:last-child)::after {
    width: 20px !important;
    height: 20px !important;
    right: -13px !important;
    top: 8px !important;
  }

  /* ========================================================================
     Fix 6 (2026-04-17): BAJAR LA LUZ DEL DORADO — quejas de "se ve borroso"
     Los drop-shadow de 30-40px + gradiente hacen los textos dorados con aura
     suave que en pantallas pequeñas se lee como "borroso/desenfocado".
     Reducimos el glow a casi cero. El color sigue siendo dorado, pero NÍTIDO.
     ======================================================================== */

  /* Mega-number 60%: sin glow gigante, solo sombra sutil para profundidad.
     El text-shadow multi-stack de hasta 50px blur hacía el texto borroso. */
  html body .mega-number {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  }

  /* Offer banner headline 20% descuento: sin aura amarilla */
  html body .offer-banner__headline {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  }

  /* Hero highlight + text-gradient-gold: SIN drop-shadow (texto con gradiente
     + filter sub-pixel = blur percibido). Solo sombra de profundidad mínima. */
  html body .hero__h1 .highlight,
  html body .text-gradient-gold {
    filter: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  }

  /* Medallas / coronas con glow pulsante — reducir intensidad en móvil */
  html body .medal-wrap,
  html body .crown-wrap {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)) !important;
    animation: none !important;
  }

  /* Cualquier residuo de glow en botones primarios dorados */
  html body .btn--primary,
  html body .btn.btn--primary {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  /* Cualquier elemento con texto dorado: sin halos extendidos */
  html body [class*="gold"],
  html body .highlight,
  html body .mega-caption,
  html body .text-gradient-gold {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  }
}