/* ============================================================================
 * fs-premium-v2.css — v72.7.14
 * 
 * REFINAMIENTO VISUAL (Fase B del rediseño)
 * Aplica:
 *   1. Dot grid pattern estilo Vercel (sutil, estático, en BG fijo)
 *   2. Spacing system 8pt estricto (variables CSS)
 *   3. Paleta refinada — SOLO navy + naranja, sin amarillo
 *   4. Motion curve unificada
 *   5. Eliminar urgency strip falsa ("X personas vieron este producto")
 *
 * Se carga DESPUÉS de fs-premium.css y fs-motion-pro.css para sobreescribir.
 * ========================================================================== */

/* === Spacing system 8pt (escala consistente Linear/Stripe) === */
:root{
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* Motion curve unificada (Linear-style) */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --ease-snap: cubic-bezier(.5, 1.25, .75, 1.25);
  
  /* Override del gradient warm — eliminar amarillo, solo naranja */
  --accent-gradient: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
}

/* === DOT GRID BACKGROUND (estilo Vercel) ===
   Patrón sutil de puntos blancos al 4% sobre el navy.
   Estático, no animado. Pointer-events:none para no interferir. */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, .04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(
    ellipse at center top,
    black 0%,
    black 50%,
    transparent 90%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center top,
    black 0%,
    black 50%,
    transparent 90%
  );
}

/* Asegurar que el contenido esté por encima del grid */
body > * {
  position: relative;
  z-index: 1;
}

/* === Eliminar urgency strip falsa ("X personas vieron este producto hoy") ===
   Era anti-pattern: números random fake daña credibilidad */
.urgency-strip,
#urgencyStrip{
  display: none !important;
}

/* === Eliminar live notifications (toasts) si quedaron residuales === */
.fs-live-toast,
.fs-sparkles,
.fs-mp-particle-layer{
  display: none !important;
}

/* === Hero h1 — refinamiento estilo Linear ===
   Sin pulsos, sin loops. Glow sutil estático detrás. */
.hero h1{
  position: relative;
}
.hero h1::after{
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 90, 52, .12) 0%,
    transparent 60%
  );
  z-index: -1;
  pointer-events: none;
}

/* === Botones — micro-interaction unificada === */
button, .btn, .ck-cta-main, .pc-cta, .p-cta{
  transition: transform .18s var(--ease-out),
              box-shadow .18s var(--ease-out),
              background .18s var(--ease-out) !important;
}
button:hover, .btn:hover, .ck-cta-main:hover, .pc-cta:hover, .p-cta:hover{
  transform: translateY(-1px);
}
button:active, .btn:active, .ck-cta-main:active, .pc-cta:active, .p-cta:active{
  transform: translateY(0);
  transition-duration: .08s !important;
}

/* === Cards — hover state refinado === */
.cat-card, .p-card, .price-card, .wc-card{
  transition: transform .22s var(--ease-out),
              border-color .22s var(--ease-out),
              box-shadow .22s var(--ease-out) !important;
}

/* === Trust strip más limpio (no muchos rebotes) === */
.trust-strip .trust-item,
.trust-item.anim{
  transition: opacity .3s var(--ease-out);
}

/* === Limpieza de gradients con amarillo en fs-motion-pro.css residuales === */
.hero-badge::before{
  /* El badge breath ya está removido del animation, ahora el ::before queda estático */
  animation: none !important;
}

/* === Eliminar el shimmer infinito que pudo quedar en títulos === */
.sec-title,
.vs-title,
.wc-title{
  animation: none !important;
}
.sec-title.vis,
.vs-title.vis,
.wc-title.vis{
  /* El IntersectionObserver agrega .vis, pero ya no disparamos shimmer infinito */
  opacity: 1;
}

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

/* === Focus states accesibles (faltaban) === */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--accent, #FF5A34);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =============================================================================
   FASE C — REFINAMIENTO DE SECCIONES (estilo Stripe/Linear/Vercel)
   ============================================================================= */

/* === HERO refinado: jerarquía + respiración === */
.hero{
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}
.hero h1{
  font-size: clamp(2.1rem, 5vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
  text-wrap: balance;
}
.hero-desc{
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.55 !important;
  color: rgba(184, 197, 214, 0.92) !important;
  max-width: 560px;
}

/* Eliminar los blobs animados (eran "ruido natural" que no se ve natural) */
.fs-bg-blob{
  display: none !important;
}

/* === Hero badge más sutil === */
.hero-badge{
  background: rgba(255, 90, 52, .06) !important;
  border: 1px solid rgba(255, 90, 52, .18) !important;
  backdrop-filter: blur(8px) !important;
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
}

/* === VS-BAND como bento asimétrico === */
.vs-band{
  padding: clamp(60px, 8vw, 100px) 0 !important;
}
.vs-grid{
  gap: 20px !important;
  position: relative;
}
.vs-col{
  padding: 32px 28px !important;
  border-radius: 24px !important;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out) !important;
}
.vs-col:hover{
  transform: translateY(-4px) !important;
}
.vs-col-ours{
  /* Más prominencia visual */
  box-shadow: 
    0 28px 60px rgba(255, 90, 52, .22),
    0 0 0 1px rgba(255, 90, 52, .25),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.vs-col-ours::after{
  /* Glow naranja sutil detrás de la card */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: radial-gradient(ellipse at top, rgba(255, 90, 52, .15), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* === Divisor "VS" más limpio === */
.vs-divider-circle{
  background: linear-gradient(135deg, var(--navy-700), var(--navy-800)) !important;
  border: 1px solid rgba(255, 90, 52, .25) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* === Sec headers — más respiración === */
.sec-hdr{
  margin-bottom: clamp(32px, 5vw, 56px) !important;
}
.sec-title,
.vs-title,
.wc-title{
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}
.sec-sub,
.vs-sub,
.wc-sub{
  font-size: clamp(0.94rem, 1.15vw, 1.05rem) !important;
  line-height: 1.6 !important;
  color: rgba(184, 197, 214, 0.85) !important;
  max-width: 600px;
  margin: 0 auto !important;
}

/* === Cards (cat-card, wc-card, bon-card) — sombras más profundas y bordes más sutiles === */
.cat-card,
.wc-card,
.bon-card,
.forensic-stat{
  border: 1px solid rgba(255, 255, 255, .06) !important;
  background: linear-gradient(165deg, rgba(15, 35, 71, 0.6), rgba(8, 20, 47, 0.7)) !important;
  backdrop-filter: blur(20px) !important;
}
.cat-card:hover,
.wc-card:hover,
.bon-card:hover{
  border-color: rgba(255, 90, 52, .25) !important;
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(255, 90, 52, .12) !important;
}

/* === CTA principal — más prominente, estilo Linear === */
.hero-cta,
.cta-big,
.vs-cta,
.forensic-cta-btn{
  background: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
  box-shadow: 
    0 8px 24px rgba(255, 90, 52, .32),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out) !important;
}
.hero-cta:hover,
.cta-big:hover,
.vs-cta:hover,
.forensic-cta-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 
    0 12px 32px rgba(255, 90, 52, .45),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

/* === Navbar más limpio en scroll === */
#nav.scrolled{
  background: rgba(5, 22, 52, .85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

/* === Saving-band ticker — pausarlo on hover, hacerlo más sutil === */
.savings-band{
  background: linear-gradient(90deg, rgba(255, 90, 52, .03), rgba(255, 90, 52, .03)) !important;
  border-top: 1px solid rgba(255, 90, 52, .06) !important;
  border-bottom: 1px solid rgba(255, 90, 52, .06) !important;
}
.savings-band-track{
  animation-duration: 60s !important;  /* Más lento = menos distractor */
}

/* === FAQ — más respiración entre items === */
.faq-grid{
  gap: 12px !important;
}
.faq-i{
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .02) !important;
  backdrop-filter: blur(8px);
}

/* === Trust strip footer — separación clara === */
.cta-final{
  padding: clamp(64px, 8vw, 96px) 0 !important;
}
.trust-block{
  margin-bottom: 48px !important;
  padding: 32px !important;
  background: linear-gradient(165deg, rgba(15, 35, 71, 0.5), rgba(8, 20, 47, 0.6)) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px);
}

/* === Footer más limpio === */
footer{
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  padding-top: 32px !important;
}

/* === Image renderings más nítidos === */
img{
  image-rendering: -webkit-optimize-contrast;
}

/* === Selección de texto con color de marca === */
::selection{
  background: rgba(255, 90, 52, .35);
  color: #fff;
}

/* === Mobile fixes === */
@media (max-width: 720px){
  .hero h1{
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }
  .vs-col{
    padding: 24px 20px !important;
  }
  .trust-block{
    padding: 24px 20px !important;
  }
}


/* === Eliminar ticker "Último pedido hace X min" === */
/* Era anti-pattern: números random fake daña credibilidad */
.fs-ticker,
#fsTicker{
  display: none !important;
}


/* =============================================================================
   v72.5.0 — Mobile performance override
   Desactivar backdrop-filter en mobile (causa principal de lag)
   ============================================================================= */
@media (max-width: 768px) {
  .cat-card,
  .wc-card,
  .bon-card,
  .forensic-stat,
  .faq-i,
  .trust-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  body::before {
    /* Dot grid menos costoso en mobile */
    background-size: 32px 32px !important;
  }
}


/* =============================================================================
   v72.6.0 — Fixes adicionales
   ============================================================================= */

/* === wc-tag amarillo → naranja (consistencia de marca) === */
.wc-tag{
  background: rgba(255, 90, 52, .1) !important;
  border-color: rgba(255, 90, 52, .22) !important;
  color: #FF7A5C !important;
}

/* === Asegurar #fsTicker oculto SIEMPRE (aunque bindTicker lo intente mostrar) === */
#fsTicker,
.fs-ticker,
[data-fs-bind="ticker"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* === Doble verificación: títulos blanco sólido === */
.sec-title,
.vs-title,
.wc-title{
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}


/* =============================================================================
   v72.7.0 — Eliminación TOTAL del amarillo + Fix logos
   ============================================================================= */

/* === Hero card title "completo" — gradient SIN amarillo === */
.cat-card.hero .hero-title strong{
  background: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* === Border-top de cat-card.adobe — solo naranja, sin rojo ni amarillo === */
.cat-card.adobe::before{
  background: linear-gradient(90deg, #FF7A5C, #FF5A34) !important;
  height: 3px !important;
}

/* === Border-tops de otras cat-cards: mantener pero unificar a naranja === */
.cat-card.autodesk::before,
.cat-card.office::before,
.cat-card.capcut::before,
.cat-card.canva::before{
  background: linear-gradient(90deg, rgba(255, 90, 52, .6), rgba(255, 90, 52, .3)) !important;
}

/* === Badge "PRODUCTO ESTRELLA" — solo naranja === */
.cat-card.hero .cat-badge.popular,
.cat-badge.popular{
  background: linear-gradient(135deg, #FF7A5C, #FF5A34) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(255, 90, 52, .35) !important;
}

/* === Badge "NUEVO" — naranja en lugar de amarillo === */
.cat-badge.new{
  background: rgba(255, 90, 52, .12) !important;
  color: #FF7A5C !important;
  border: 1px solid rgba(255, 90, 52, .25) !important;
}

/* === Hero showcase widget — badge "ESTRELLA" === */
.hw-row-badge,
.hw-row .hw-row-badge{
  background: linear-gradient(135deg, #FF7A5C, #FF5A34) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}

/* === Precios verdes ($15, $20, $35, $10) — unificar a naranja para coherencia === */
/* Solo en el hero-showcase widget, NO en el catálogo principal */
.hw-row .hw-row-price{
  color: #FF7A5C !important;
}
.hw-row .hw-row-price.orange{
  color: #FF7A5C !important;
}

/* === Fix logos del hero-showcase: aseguramos que img llene contenedor === */
.hw-row-icon.logo{
  background: linear-gradient(135deg, rgba(15, 35, 71, 0.8), rgba(8, 20, 47, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}
.hw-row-icon.logo img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  padding: 6px;
  display: block;
}

/* === Fallback emojis grandes y centrados (cuando onerror dispara) === */
.hw-row-icon.adobe:not(.logo)::before { content: '🎨'; }
.hw-row-icon.office:not(.logo)::before { content: '📊'; }
.hw-row-icon.autodesk:not(.logo)::before { content: '🏗️'; }
.hw-row-icon.capcut:not(.logo)::before { content: '🎬'; }
.hw-row-icon.canva:not(.logo)::before { content: '✨'; }
.hw-row-icon:not(.logo){
  font-size: 1.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(15, 35, 71, 0.8), rgba(8, 20, 47, 0.9)) !important;
}

/* === Bullet point del "Entrega inmediata / Soporte incluido" — naranja sin glow === */
.cat-micro span::before{
  background: #FF5A34 !important;
  box-shadow: none !important;
}

/* === Eliminar TODO indicio del fs-live-toast (defensa CSS) === */
.fs-live-toast,
.lt-flag,
.lt-content,
.lt-prod,
.lt-time,
.lt-close{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

/* === Línea decorativa superior de la cat-card.hero — solo naranja === */
.cat-card.hero{
  background: linear-gradient(135deg, rgba(255, 90, 52, .06) 0%, var(--navy-700) 35%, var(--navy-800) 100%) !important;
  border: 1px solid rgba(255, 90, 52, .18) !important;
}
.cat-card.hero:hover{
  border-color: rgba(255, 90, 52, .35) !important;
}

/* =============================================================================
   v72.7.0b — Anular variables globales con amarillo
   Estas variables están heredadas en muchos lugares del CSS legacy.
   Redefinirlas garantiza que cualquier gradient que use var(--accent-warm) 
   o var(--accent-gradient) ya no muestre amarillo.
   ============================================================================= */
:root{
  --accent-warm: #FF7A5C !important;
  --accent-gradient: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
}
html:root,
html[lang="es"]:root{
  --accent-warm: #FF7A5C !important;
  --accent-gradient: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
}


/* =============================================================================
   v72.7.2 — FIX MENÚ MÓVIL (CRÍTICO)
   El backdrop-filter del menú está fallando en mobile y dejando texto plano.
   Aplicamos un fix robusto que NO depende de backdrop-filter.
   ============================================================================= */
@media (max-width: 768px) {
  
  /* Estado cerrado: forzar oculto */
  .nav-l:not(.open) {
    display: none !important;
  }
  
  /* Estado abierto: overlay sólido (sin blur, sin transparencias) */
  .nav-l.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #051634 !important;  /* Sólido, sin transparencia */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 32px 24px !important;
    gap: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  }
  
  .nav-l.open li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .nav-l.open a {
    display: block !important;
    padding: 16px 18px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #F1F5F9 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: background 0.18s ease !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-bottom: 6px !important;
  }
  
  .nav-l.open a:hover,
  .nav-l.open a:active {
    background: rgba(255, 90, 52, 0.12) !important;
    border-color: rgba(255, 90, 52, 0.25) !important;
    color: #FF7A5C !important;
  }
  
  .nav-l.open .nav-cta {
    background: linear-gradient(135deg, #FF7A5C, #FF5A34) !important;
    color: #fff !important;
    border: none !important;
    margin-top: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(255, 90, 52, 0.3) !important;
  }
  
  /* v72.7.3 — REMOVIDO: body:has(.nav-l.open) overflow:hidden
     Causaba que el body quedara con scroll bloqueado si el menú
     no se cerraba correctamente. El control del overflow ahora
     lo maneja exclusivamente el JS del menú móvil. */
  
  /* Botón hamburguesa: mejorar UX */
  .mob-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .mob-btn span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #F1F5F9 !important;
    border-radius: 2px !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
  }
}


/* =============================================================================
   v72.7.4 — GARANTÍA DE SCROLL (regla defensiva final reforzada)
   Cualquier override previo que haya bloqueado scroll queda anulado aquí.
   Triple capa: regla base + regla mobile + nuclear option en :where()
   ============================================================================= */

/* CAPA 1: Regla base con !important */
html,
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  position: static !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

/* CAPA 2: Excepción explícita SOLO si data-locked="true" */
html[data-locked="true"],
body[data-locked="true"] {
  overflow: hidden !important;
}

/* CAPA 3: Nuclear option para mobile — máxima especificidad */
@media (max-width: 768px) {
  html:not([data-locked="true"]),
  body:not([data-locked="true"]) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: static !important;
  }
  
  /* Asegurar que ningún contenedor "atrape" el scroll */
  main, section, .ctn, .hero-grid {
    overflow-y: visible !important;
    max-height: none !important;
  }
  
  /* Si por alguna razón un fixed cubre toda la pantalla sin modal abierto, lo desactivamos */
  body > .nav-l:not(.open) {
    pointer-events: none !important;
  }
}


/* =============================================================================
   v72.7.5 — TANDA A
   1. Eliminar amarillo residual en H1 hero y .steps::before (alineado a v72.7.0)
   2. Spacing rhythm unificado entre secciones (.sec / .vs-band / .why-cheaper)
   3. Deduplicar "RUC SUNAT" en hero sidebar (estaba 3 veces en first-fold)
   ============================================================================= */

/* === 1a. H1 hero: gradient solo naranja, sin amarillo === */
.hero h1 .gr,
.prop-h1 .num {
  background: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* === 1b. Steps connector line: naranja unificado === */
.steps::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 90, 52, .35) 20%,
    rgba(255, 90, 52, .35) 80%,
    transparent
  ) !important;
  opacity: 1 !important;
}

/* === 2. Spacing rhythm consistente (desktop + tablet ancho) === */
.sec,
.vs-band,
.why-cheaper {
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(64px, 8vw, 96px) !important;
}

/* === 2b. Mobile: padding más compacto pero consistente === */
/* body-prefix para ganar specificity sobre fs-mobile-perf.css */
@media (max-width: 768px) {
  body .sec,
  body .vs-band,
  body .why-cheaper {
    padding-top: clamp(48px, 6vw, 64px) !important;
    padding-bottom: clamp(48px, 6vw, 64px) !important;
  }
}

/* === 3. Deduplicar RUC SUNAT del hero sidebar === */
/* El badge superior ("RUC SUNAT verificado") y la trust-pill ("Boleta/Factura SUNAT")
   ya comunican empresa registrada. El primer item del fs-trust-stack repetía
   "Grupo Five Solutions S.A.C. - RUC registrado en SUNAT". Se oculta para limpiar
   first-fold; la info legal completa permanece en el footer (RUC + link SUNAT). */
.hero-side-support .fs-trust-stack .fs-trust-item:first-child {
  display: none !important;
}


/* =============================================================================
   v72.7.6 — TANDA B (hero refinement + button system unification)
   1. Hero min-height fix: usar 100dvh donde soportado, auto en mobile
   2. Hero overload: precio en blanco (era verde), reducir focal points
   3. Sistema de botones unificado (CTAs principales)
   4. Hero showcase: pausar float animation en mobile (ahorro de batería + GPU)
   ============================================================================= */

/* === 1. Hero min-height responsive ===
   Antes: min-height:100vh causaba que el hero excediera el viewport en mobile
   por la URL bar de Chrome/Safari. Ahora: auto en mobile (contenido manda),
   100dvh en desktop con fallback a 100vh para browsers sin soporte. */
.hero {
  min-height: auto !important;
}
@media (min-width: 769px) {
  .hero {
    min-height: 100vh; /* fallback */
  }
}
@supports (height: 100dvh) {
  @media (min-width: 769px) {
    .hero {
      min-height: 100dvh !important;
    }
  }
}

/* === 2a. Precio del hero-anchor: de verde a blanco (Linear/Stripe-style) ===
   Antes: $9/mes en verde #10B981 rompía la coherencia de un hero naranja.
   Después: blanco sólido con peso 900 — el precio es el dato, el color es contexto. */
.hero-price-value span {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}
.hero-price-value s {
  color: rgba(248, 113, 113, 0.55) !important;
}

/* === 2b. Eliminar línea decorativa extra del price anchor === */
.hero-price-anchor::before {
  display: none !important;
}

/* === 2c. Trust-pills sidebar: secundarias visualmente sin perder info === */
.hero-side-support .trust-pills span {
  font-size: 0.72rem !important;
  opacity: 0.7 !important;
}
.hero-side-support .trust-pills span::before {
  width: 4px !important;
  height: 4px !important;
  box-shadow: none !important;
}

/* === 3. Sistema de botones unificado (CTAs principales) ===
   Antes: cada CTA tenía gradient/sombra/curva/hover distintos (fragmentado).
   Después: 1 sistema — mismo gradient naranja, misma curva ease-out,
   mismo hover delta (-2px), mismo padding feel, sin shimmer blanco.
   NO se tocan: .p-cta-* (catálogo de planes con diferenciación gold/orange
   intencional), .hw-cta-mini (mini-CTA del widget), .nav-cta (contexto nav),
   .fb-btn (azul de marca Facebook). */
.hero-cta,
.cta-big,
.vs-cta,
.forensic-cta-btn,
.cat-card.hero .hero-cta {
  background: linear-gradient(135deg, #FF7A5C 0%, #FF5A34 100%) !important;
  box-shadow:
    0 8px 24px rgba(255, 90, 52, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  transition:
    transform .2s cubic-bezier(.16, 1, .3, 1),
    box-shadow .2s cubic-bezier(.16, 1, .3, 1) !important;
  position: relative;
  overflow: hidden !important;
}

.hero-cta:hover,
.cta-big:hover,
.vs-cta:hover,
.forensic-cta-btn:hover,
.cat-card.hero .hero-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 14px 36px rgba(255, 90, 52, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.hero-cta:active,
.cta-big:active,
.vs-cta:active,
.forensic-cta-btn:active,
.cat-card.hero .hero-cta:active {
  transform: translateY(0) !important;
  transition-duration: .08s !important;
}

/* Eliminar shimmer blanco residual (Linear/Stripe no usan shimmer) */
.hero-cta::before,
.cta-big::before,
.cat-card.hero .hero-cta::before {
  display: none !important;
}

/* === 4. Hero showcase: pausar float animation en mobile === */
@media (max-width: 768px) {
  .hero-showcase {
    animation: none !important;
  }
}


/* =============================================================================
   v72.7.7 — TANDA C (social proof + comparativa + cards refinement)
   1. Comparativa Adobe vs FS: contraste fuerte entre columnas ("perdedor" vs "ganador")
   2. Testimonios Facebook: grid 3 columnas en desktop (no scroll horizontal)
   3. Cards de productos: hover más natural + tap feedback mobile + badge reposicionado
   4. WhatsApp cards: balanceo en breakpoint tablet (≤1024px)
   ============================================================================= */

/* === 1a. Comparativa: columna OFICIAL desaturada (el "perdedor visual") === */
/* Antes: solo opacity .94, casi imperceptible. Ahora: filter desatura + colores
   apagados en precio, ✗ rojo más mute, ✓ verde apagado. */
.vs-col-official {
  opacity: 1 !important;
  filter: saturate(0.55) !important;
  background: linear-gradient(165deg, rgba(18, 31, 56, 0.55), rgba(10, 20, 37, 0.5)) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.vs-col-official .vs-col-price-main {
  color: #94a3b8 !important;
}
.vs-col-official .vs-col-price-main strong {
  color: #cbd5e1 !important;
  font-weight: 800 !important;
}
.vs-col-official .vs-col-yearly {
  color: #64748b !important;
}
.vs-col-official .vs-col-badge {
  background: rgba(148, 163, 184, 0.08) !important;
  color: #64748b !important;
}
.vs-col-official .vs-no {
  color: rgba(248, 113, 113, 0.6) !important;
}
.vs-col-official .vs-yes {
  color: #64748b !important;  /* ✓ apagados, no le quitamos pero los desinflamos */
}
.vs-col-official .vs-col-list li {
  color: rgba(148, 163, 184, 0.75) !important;
}

/* === 1b. Comparativa: columna FS (el "ganador visual") === */
.vs-col-ours {
  filter: none !important;
  background: linear-gradient(165deg, rgba(255, 90, 52, 0.18), rgba(255, 90, 52, 0.08)) !important;
  border: 1.5px solid rgba(255, 90, 52, 0.4) !important;
  box-shadow:
    0 32px 64px rgba(255, 90, 52, 0.24),
    0 0 0 1px rgba(255, 90, 52, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: scale(1.025) !important;
}
.vs-col-ours .vs-col-price-main {
  font-size: 1.85rem !important;
}
.vs-col-ours .vs-col-price-main strong {
  color: #FF5A34 !important;
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}
.vs-col-ours .vs-col-yearly {
  color: #FF7A5C !important;
  font-weight: 600 !important;
}
.vs-col-ours .vs-yes {
  color: #FF7A5C !important;
  font-weight: 800 !important;
}
.vs-col-ours .vs-best-badge {
  background: linear-gradient(135deg, #FF7A5C, #FF5A34) !important;
  box-shadow:
    0 8px 24px rgba(255, 90, 52, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  font-weight: 900 !important;
  padding: 7px 16px !important;
}
.vs-col-ours .vs-col-badge-green {
  background: rgba(255, 90, 52, 0.22) !important;
  color: #FF7A5C !important;
  font-weight: 800 !important;
}
.vs-col-ours .vs-col-list li {
  color: #E8EDF5 !important;
}

/* Mobile: bajar el scale para evitar overflow visual */
@media (max-width: 860px) {
  .vs-col-ours {
    transform: none !important;
  }
}

/* === 2. Testimonios Facebook: grid 3 col en desktop === */
/* Antes: overflow-x:auto con scroll horizontal — se veía como carrusel barato.
   Ahora: grid 3 columnas para >720px, mobile mantiene scroll-snap. */
@media (min-width: 721px) {
  .fb-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 8px 0 18px !important;
    margin: 0 0 24px !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .fb-row::-webkit-scrollbar {
    display: none !important;
  }
  .fb-row-card {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* === 3a. Cards de productos: hover refinado (desktop) === */
/* Sombra más natural, transform más sutil, transición más rápida */
.cat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 90, 52, 0.15) !important;
  border-color: rgba(255, 90, 52, 0.22) !important;
  transition-duration: 0.22s !important;
}

/* === 3b. Cards: tap feedback en mobile (no hay :hover real) === */
@media (max-width: 768px) {
  .cat-card:active,
  .wc-card:active,
  .bon-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.08s ease-out !important;
  }
}

/* === 3c. Badge "Producto estrella" reposicionado para no solapar con logo Adobe en mobile === */
@media (max-width: 880px) {
  .cat-card.hero .cat-badge.popular {
    top: 10px !important;
    right: 10px !important;
    font-size: 0.58rem !important;
    padding: 3px 9px !important;
    letter-spacing: 0.04em !important;
  }
  /* Dar más espacio arriba al logo Adobe para que respire del badge */
  .cat-card.hero .cat-logo {
    padding-top: 18px !important;
  }
}

/* === 4. WhatsApp chats: balanceo en tablet (≤1024px) === */
/* Antes: la 3era card quedaba sola debajo, centrada a 480px = desbalanceada.
   Ahora: full-width spanning las 2 columnas, sin max-width restrictivo. */
@media (max-width: 1024px) and (min-width: 721px) {
  .wa-chat:nth-child(3) {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
}


/* =============================================================================
   v72.7.9 — HOTFIX MENÚ MÓVIL (CRÍTICO — reportado por user en Honor + iOS)
   
   Bug A: hamburguesa con span del medio cortado/colapsado.
     Causa: shared.css:131 da `margin: 5px 0` al span. Con .mob-btn flex
     direction:column + gap:5px + altura 44px + padding:0, el contenido real
     mide 46px y supera el contenedor 44px. Algunos browsers (Honor) colapsan
     el span del medio. Fix: anular el margin (el gap del flex ya separa).
   
   Bug B: menú "se abre a la mitad" en Android y iOS.
     Causa: #nav recibe `transform: translateZ(0)` para GPU promotion
     (fs-mobile-perf.css:301-308). Cualquier transform crea un containing
     block, lo cual hace que `position:fixed` se calcule respecto al #nav
     (≈64px) en lugar del viewport. El .nav-l.open queda atrapado dentro
     del nav y solo se ve la parte superior.
     Fix: anular transform/will-change del #nav en mobile. El nav es sticky,
     no se anima — la GPU promotion no es crítica.
   ============================================================================= */
@media (max-width: 768px) {
  
  /* === Bug A: hamburguesa con 3 líneas correctas === */
  .mob-btn span {
    margin: 0 !important;
  }
  
  /* === Bug B: liberar #nav del containing block para que .nav-l.open
     con position:fixed escape al viewport completo === */
  #nav {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }
}


/* =============================================================================
   v72.7.10 — MENÚ MÓVIL BULLETPROOF (background sólido garantizado)
   
   Bug reportado tras v72.7.9: el menú ahora se abre completo pero SIN background
   sólido — se ve el hero detrás. Los items del menú flotan superpuestos al
   contenido del hero.
   
   Causa probable: alguna regla CSS o estilo inline está sobrescribiendo el
   background del .nav-l.open, posiblemente por order de cascada o un script.
   
   Fix: usar máxima specificity con `body nav#nav ul.nav-l.open` (3 IDs/clases)
   + forzar TODAS las propiedades del overlay. Combinado con el script
   bulletproof v729 que setea inline styles directamente (ver index.html).
   ============================================================================= */
@media (max-width: 768px) {
  
  /* === Menú cerrado: ocultar GARANTIZADO === */
  body nav#nav ul.nav-l:not(.open),
  body ul#navL:not(.open) {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* === Menú abierto: overlay sólido GARANTIZADO === */
  body nav#nav ul.nav-l.open,
  body ul#navL.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 64px) !important;
    background: #051634 !important;
    background-color: #051634 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 32px 24px !important;
    margin: 0 !important;
    gap: 4px !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
    isolation: isolate !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* =============================================================================
   v72.7.14 — Bloqueo de scroll del body cuando el menú móvil está abierto
   
   Por qué clase y no inline style:
   - fs-scroll-guardian.js (archivo protegido) verifica `body.style.overflow`
     y lo limpia si no detecta modal abierto. Esto causaba race conditions.
   - Usando una clase CSS, evitamos completamente esa interacción.
   - El guardian solo verifica inline styles, no classList del body.
   ============================================================================= */
@media (max-width: 768px) {
  body.fs-menu-open {
    overflow: hidden !important;
    /* Prevenir scroll también en iOS Safari */
    touch-action: none !important;
  }
  /* Permitir scroll dentro del menú overlay */
  body.fs-menu-open ul.nav-l.open {
    touch-action: pan-y !important;
  }
}