/* ============================================================================
 * Five Solutions — fs-premium.css v71.7.0
 * Sistema de animaciones PREMIUM (reemplaza el "shine" blanco barato del v71.5).
 *
 * Principios:
 *   1) Nada de white-flash translúcido (ese es el look de afiliado de Hotmart).
 *   2) Solo glow de marca: rgba(255,90,52,*) y rgba(255,184,0,*).
 *   3) Easings cinematográficos: cubic-bezier(.16,1,.3,1).
 *   4) Transform y opacity primero. Filter blur solo donde aporta lujo.
 *   5) Respeta prefers-reduced-motion.
 *
 * Aplica a TODAS las páginas públicas (index, productos, checkout, gracias,
 * términos, privacidad). NO al admin (admin no carga shared.css ni este file).
 * ========================================================================== */


/* ===========================================================================
 * 0) TOKENS DE MOTION PREMIUM
 * ========================================================================= */
:root{
  /* Easings */
  --fs-pm-ease-out:      cubic-bezier(.16,1,.3,1);          /* expo-out, cinematográfico */
  --fs-pm-ease-in-out:   cubic-bezier(.65,.05,.36,1);       /* suave acelerar-desacelerar */
  --fs-pm-ease-spring:   cubic-bezier(.34,1.45,.55,1.05);   /* spring contenido (no caricaturesco) */
  --fs-pm-ease-glide:    cubic-bezier(.4,.0,.2,1);

  /* Glow de marca (en vez de white-flash) */
  --fs-pm-glow-orange:   0 0 0 1px rgba(255,90,52,.32), 0 8px 28px rgba(255,90,52,.28);
  --fs-pm-glow-orange-strong: 0 0 0 1px rgba(255,90,52,.55), 0 14px 42px rgba(255,90,52,.45);
  --fs-pm-glow-warm:     0 0 24px rgba(255,184,0,.22);

  /* Durations */
  --fs-pm-d-quick: .22s;
  --fs-pm-d-base:  .42s;
  --fs-pm-d-slow:  .82s;
}


/* ===========================================================================
 * 1) MATAR EL WHITE-FLASH BARATO
 *    El v71.5 metía un gradient blanco translúcido que cruzaba los CTAs cada 5s.
 *    Eso se ve "tipo página de revendedor". Lo apagamos.
 * ========================================================================= */

/* Anular el auto-shine del v71.5 */
.hero-cta::after,
.cta-big::after,
.nav-cta::after,
.vs-cta::after,
.forensic-cta-btn::after,
.hw-cta-mini::after{
  content:none !important;
  animation:none !important;
  background:transparent !important;
}

/* Anular los ::before con shine blanco */
.nav-cta::before,
.cta-big::before,
.ck-btn-g::before,
.wa-link::before{
  content:none !important;
  background:transparent !important;
}

/* Anular el shine del .fs-cta-primary que carga fs-enhancements.css */
.fs-cta-primary::after{
  content:none !important;
  animation:none !important;
  background:transparent !important;
}


/* ===========================================================================
 * 2) NAV LINKS — underline premium con gradient
 *    Reemplaza el tap-highlight blanco que se ve detrás de "Testimonios".
 * ========================================================================= */

/* Quitar TODO highlight de fondo translúcido en links del nav (esto era el "reflejo blanco") */
.nav-l a:not(.nav-cta){
  position:relative;
  background:transparent !important;
  transition:color .35s var(--fs-pm-ease-out);
}

/* Underline animado: gradient naranja que se dibuja de izquierda a derecha */
.nav-l a:not(.nav-cta)::after{
  content:'';
  position:absolute;
  left:6px;
  right:6px;
  bottom:2px;
  height:2px;
  background:linear-gradient(90deg, #FFB800 0%, #FF5A34 60%, #FF7A1C 100%) !important;
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s var(--fs-pm-ease-out);
  box-shadow:0 2px 8px rgba(255,90,52,.45);
}
.nav-l a:not(.nav-cta):hover::after,
.nav-l a:not(.nav-cta):focus-visible::after{
  transform:scaleX(1);
}

/* Hover: solo cambio de color limpio (sin fondo translúcido) */
.nav-l a:not(.nav-cta):hover{
  color:#fff !important;
  background:transparent !important;
}

/* Focus visible: outline limpio, sin tap-highlight blanco */
.nav-l a:focus,
.nav-l a:focus-visible{
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
  background:transparent !important;
}

/* Anular el focus-visible barato con outline naranja sólido */
.nav-l a:focus-visible{
  box-shadow:0 0 0 2px rgba(255,90,52,.45);
  border-radius:6px;
}


/* ===========================================================================
 * 3) NAV CTA (botón "Hablar con ventas") — glow premium
 * ========================================================================= */
.nav-cta{
  position:relative;
  overflow:visible !important;
  background:var(--accent-gradient) !important;
  transition:
    transform .35s var(--fs-pm-ease-spring),
    box-shadow .42s var(--fs-pm-ease-out),
    filter .42s var(--fs-pm-ease-out) !important;
}

/* Glow halo naranja detrás del botón (en vez del flash blanco) */
.nav-cta::after{
  content:'' !important;
  position:absolute;
  inset:-6px;
  border-radius:18px;
  background:radial-gradient(60% 80% at 50% 50%, rgba(255,90,52,.45), transparent 70%);
  opacity:0;
  filter:blur(12px);
  z-index:-1;
  transition:opacity .45s var(--fs-pm-ease-out);
  pointer-events:none;
  animation:none !important;
}
.nav-cta:hover::after{ opacity:1; }
.nav-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 38px rgba(255,90,52,.55), inset 0 1px 0 rgba(255,255,255,.22) !important;
  filter:brightness(1.06);
}
.nav-cta:active{ transform:translateY(0) scale(.98); transition-duration:.1s; }


/* ===========================================================================
 * 4) HERO CTA + CTA-BIG — glow respiratorio (en vez de flash blanco)
 * ========================================================================= */
.hero-cta,
.fs-cta-primary,
.cta-big,
.vs-cta,
.forensic-cta-btn,
.hw-cta-mini,
.pc-cta{
  position:relative;
  isolation:isolate;
  overflow:visible !important;
  transition:
    transform .38s var(--fs-pm-ease-spring),
    box-shadow .42s var(--fs-pm-ease-out),
    filter .42s var(--fs-pm-ease-out) !important;
}

/* Halo de glow naranja respirando */
.hero-cta::before,
.fs-cta-primary::before,
.cta-big::before,
.vs-cta::before,
.forensic-cta-btn::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  background:radial-gradient(60% 80% at 50% 50%, rgba(255,90,52,.55), transparent 72%);
  opacity:.35;
  filter:blur(16px);
  z-index:-1;
  pointer-events:none;
  animation:fs-pm-breathe 4s ease-in-out infinite;
  background-size:auto !important;
  left:auto !important;
  width:auto !important;
  top:auto !important;
  transition:opacity .45s var(--fs-pm-ease-out);
}
.hero-cta:hover::before,
.fs-cta-primary:hover::before,
.cta-big:hover::before,
.vs-cta:hover::before,
.forensic-cta-btn:hover::before{
  opacity:.9;
}

@keyframes fs-pm-breathe{
  0%,100%{ opacity:.32; transform:scale(.96); }
  50%   { opacity:.55; transform:scale(1.04); }
}

/* Hover spring */
.hero-cta:hover,
.fs-cta-primary:hover,
.cta-big:hover,
.vs-cta:hover,
.forensic-cta-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.05);
}
.hero-cta:active,
.fs-cta-primary:active,
.cta-big:active{
  transform:translateY(-1px) scale(.99);
  transition-duration:.12s;
}


/* ===========================================================================
 * 5) LOGO — micro-spin + glow al hover (en lugar del breathe constante chillón)
 * ========================================================================= */

/* El v71.5 hacía un glow-pulse cada 3s en el logo. Eso es ruido visual.
   Lo reemplazamos por respiración MUY sutil + spin cinematográfico al hover. */
.logo img{
  animation:fs-pm-logo-rest 6s ease-in-out infinite !important;
  transition:transform .55s var(--fs-pm-ease-spring), filter .35s ease !important;
}
@keyframes fs-pm-logo-rest{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(255,90,52,.18)); }
  50%   { filter:drop-shadow(0 0 14px rgba(255,90,52,.32)); }
}
.logo:hover img{
  transform:scale(1.06) rotate(-6deg);
  filter:drop-shadow(0 0 22px rgba(255,90,52,.6)) !important;
}


/* ===========================================================================
 * 6) CARDS — border-glow al hover (premium "magic edge")
 *    Aplica a cat-card, wc-card, vs-col, faq-i, forensic-stat, bon-card.
 * ========================================================================= */
.cat-card,
.wc-card,
.vs-col,
.faq-i,
.forensic-stat,
.bon-card,
.wa-chat,
.trust-item{
  position:relative;
  isolation:isolate;
  transition:
    transform .45s var(--fs-pm-ease-out),
    border-color .35s ease,
    box-shadow .45s var(--fs-pm-ease-out) !important;
}

/* Glow naranja sutil que aparece al hover (border interno) */
.cat-card::after,
.wc-card::after,
.vs-col::after,
.forensic-stat::after,
.bon-card::after,
.wa-chat::after,
.trust-item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 1px transparent inset, 0 0 30px transparent;
  transition:box-shadow .55s var(--fs-pm-ease-out);
  z-index:1;
}
.cat-card:hover::after,
.wc-card:hover::after,
.vs-col:hover::after,
.forensic-stat:hover::after,
.bon-card:hover::after,
.wa-chat:hover::after,
.trust-item:hover::after{
  box-shadow:
    0 0 0 1px rgba(255,90,52,.35) inset,
    0 0 28px rgba(255,90,52,.18) inset,
    0 18px 46px rgba(0,0,0,.32);
}

/* Lift refinado (más pequeño y más rápido que el actual) */
.cat-card:hover:not(.hero){
  transform:translateY(-6px);
}
.wc-card:hover,
.bon-card:hover,
.forensic-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(255,90,52,.28) !important;
}


/* ===========================================================================
 * 7) hw-row (catálogo del hero) — slide refinado
 * ========================================================================= */
.hw-row{
  transition:
    transform .35s var(--fs-pm-ease-out),
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease !important;
  position:relative;
}
.hw-row:hover{
  transform:translateX(6px) !important;
  background:rgba(255,90,52,.05) !important;
  border-color:rgba(255,90,52,.18) !important;
  box-shadow:-4px 0 0 0 #FF5A34 inset, 0 8px 24px rgba(0,0,0,.22) !important;
}


/* ===========================================================================
 * 8) STEPS (1 2 3 4) — número pulsante suave + hover refinado
 * ========================================================================= */
.step-n{
  transition:
    transform .42s var(--fs-pm-ease-spring),
    background .35s ease,
    color .35s ease,
    box-shadow .42s var(--fs-pm-ease-out) !important;
}
.step:hover .step-n{
  animation:none !important;
  transform:scale(1.1) translateY(-2px);
  box-shadow:0 12px 32px rgba(255,90,52,.42), inset 0 1px 0 rgba(255,255,255,.2) !important;
}


/* ===========================================================================
 * 9) SCROLL REVEALS — cinematográfico (blur out + slide + opacity)
 * ========================================================================= */
.anim,
.anim-left,
.anim-right,
.anim-zoom{
  opacity:0;
  filter:blur(8px);
  transition:
    opacity .85s var(--fs-pm-ease-out),
    transform .85s var(--fs-pm-ease-out),
    filter .85s var(--fs-pm-ease-out) !important;
}
.anim{ transform:translateY(28px); }
.anim-left{ transform:translateX(-36px); }
.anim-right{ transform:translateX(36px); }
.anim-zoom{ transform:scale(.93); }

.anim.vis,
.anim-left.vis,
.anim-right.vis,
.anim-zoom.vis{
  opacity:1;
  filter:blur(0);
  transform:translateY(0) translateX(0) scale(1);
}


/* ===========================================================================
 * 10) HERO ENTRANCE — stagger más refinado
 * ========================================================================= */
.fs-anim-in > *{
  opacity:0;
  filter:blur(6px);
  animation:fs-pm-hero-in .9s var(--fs-pm-ease-out) forwards;
}
@keyframes fs-pm-hero-in{
  from{ opacity:0; transform:translateY(22px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}


/* ===========================================================================
 * 11) BLOBS DEL HERO — drift más lento y con seguimiento del mouse
 *     (mouse-parallax se aplica via JS, esto es el reposo)
 * ========================================================================= */
.fs-bg-blob{
  transition:transform .9s var(--fs-pm-ease-out);
  will-change:transform;
}


/* ===========================================================================
 * 12) STATS (números grandes) — pulse muy sutil, sin cambio de color berrinche
 *     El v71.5 hacía scale + cambio de color amarillo brillante. Demasiado.
 * ========================================================================= */
.hw-bottom-stat:nth-of-type(1) strong,
.hw-bottom-stat:nth-of-type(3) strong,
.hw-bottom-stat:nth-of-type(5) strong,
.vs-savings-num{
  animation:fs-pm-stat 5s ease-in-out infinite !important;
}
@keyframes fs-pm-stat{
  0%,100%{ transform:scale(1); text-shadow:0 0 0 transparent; }
  50%   { transform:scale(1.04); text-shadow:0 0 18px rgba(255,90,52,.42); }
}


/* ===========================================================================
 * 13) BADGES (★ Estrella, popular, save pill) — glow suave
 *     El v71.5 hacía pulse fuerte. Lo bajamos a algo respirable.
 * ========================================================================= */
.hw-row-badge,
.cat-badge.popular,
.save-pill,
.pc-badge-save,
.prop-row-badge{
  animation:fs-pm-badge 3s ease-in-out infinite !important;
}
@keyframes fs-pm-badge{
  0%,100%{ box-shadow:0 4px 12px rgba(255,90,52,.28); }
  50%   { box-shadow:0 4px 22px rgba(255,90,52,.55); }
}


/* ===========================================================================
 * 14) FB-CARDS y testimonios — zoom premium al hover
 * ========================================================================= */
.fb-row-card,
.test-card{
  transition:
    transform .5s var(--fs-pm-ease-out),
    box-shadow .5s var(--fs-pm-ease-out),
    border-color .5s ease !important;
}
.fb-row-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 24px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(255,90,52,.32);
}
.fb-row-card img{ transition:transform .9s var(--fs-pm-ease-out) !important; }
.fb-row-card:hover img{ transform:scale(1.06); }


/* ===========================================================================
 * 15) FORENSIC SHOT — la captura WhatsApp se ve premium al hover
 * ========================================================================= */
.forensic-shot{
  transition:transform .55s var(--fs-pm-ease-out), box-shadow .55s var(--fs-pm-ease-out) !important;
}
.forensic-shot:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:
    0 32px 72px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,90,52,.45),
    0 0 48px rgba(255,90,52,.18) !important;
}


/* ===========================================================================
 * 16) VIDEO THUMB — premium play button breath
 * ========================================================================= */
.video-thumb{
  transition:transform .5s var(--fs-pm-ease-out), box-shadow .5s var(--fs-pm-ease-out) !important;
}
.video-thumb:hover{
  transform:translateY(-4px);
  box-shadow:
    0 40px 88px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,107,107,.4) !important;
}
.video-thumb-play{
  animation:fs-pm-play-breath 2.5s ease-in-out infinite;
  transition:transform .35s var(--fs-pm-ease-spring), box-shadow .35s ease !important;
}
@keyframes fs-pm-play-breath{
  0%,100%{ box-shadow:0 12px 32px rgba(255,0,0,.5); }
  50%   { box-shadow:0 12px 32px rgba(255,0,0,.5), 0 0 0 14px rgba(255,0,0,.12); }
}


/* ===========================================================================
 * 17) FAQ — apertura más fluida
 * ========================================================================= */
.faq-i{
  transition:border-color .35s ease, box-shadow .45s var(--fs-pm-ease-out) !important;
}
.faq-q{
  transition:color .3s ease, background-color .3s ease !important;
}
.faq-q:hover{
  background:rgba(255,90,52,.03);
}
.faq-q .faq-ic,
.faq-q .faq-t{
  transition:transform .42s var(--fs-pm-ease-spring), background .35s ease, color .35s ease !important;
}
.faq-a{
  transition:max-height .55s var(--fs-pm-ease-out), padding .55s var(--fs-pm-ease-out) !important;
}


/* ===========================================================================
 * 18) MAGNETIC PULL DATA-HOOK
 *     JS pondrá --fs-mx, --fs-my en transformaciones de los CTAs.
 *     Aquí declaramos las reglas que el JS va a aprovechar.
 * ========================================================================= */
[data-fs-magnetic]{
  --fs-mx:0; --fs-my:0;
  transition:transform .25s var(--fs-pm-ease-out) !important;
}


/* ===========================================================================
 * 19) BOTONES Y CHECKOUT
 * ========================================================================= */

/* Checkout: botón verde principal */
.ck-btn-g,
.boleta-coupon-btn,
.ck-coupon-btn{
  position:relative;
  transition:
    background .3s ease,
    transform .3s var(--fs-pm-ease-spring),
    box-shadow .35s var(--fs-pm-ease-out) !important;
}
.ck-btn-g:hover,
.boleta-coupon-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(255,90,52,.45) !important;
  filter:brightness(1.08);
}

/* Tabs de pago (Yape / PayPal) */
.pay-tab{
  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .35s var(--fs-pm-ease-out),
    box-shadow .35s var(--fs-pm-ease-out) !important;
}
.pay-tab:hover{
  transform:translateY(-2px);
}
.pay-tab.active{
  box-shadow:0 8px 28px rgba(255,90,52,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Inputs del checkout — focus glow suave naranja */
.ck-in:focus{
  outline:0 !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(255,90,52,.14), 0 0 18px rgba(255,90,52,.18) !important;
  transition:all .28s var(--fs-pm-ease-out) !important;
}


/* ===========================================================================
 * 20) FB-BTN, WA-LINK, SOC-LINK — micro-lift
 * ========================================================================= */
.fb-btn,
.wa-link,
.soc-link,
.cta-sub a{
  transition:
    transform .32s var(--fs-pm-ease-spring),
    box-shadow .35s var(--fs-pm-ease-out),
    background .3s ease !important;
}


/* ===========================================================================
 * 21) SCROLL PROGRESS BAR — más fino y elegante
 * ========================================================================= */
.fs-scroll-progress{
  height:2px !important;
  background:linear-gradient(90deg, #FFB800 0%, #FF5A34 50%, #FF7A1C 100%) !important;
  box-shadow:0 0 18px rgba(255,90,52,.65), 0 0 4px rgba(255,184,0,.45) !important;
}


/* ===========================================================================
 * 22) URGENCY BAR & TICKER — keep them, just refine the shine
 * ========================================================================= */
.fs-urgency{
  background-size:200% 100%;
  animation:fs-pm-urgency-flow 8s linear infinite !important;
}
@keyframes fs-pm-urgency-flow{
  0%  { background-position:200% 0; }
  100%{ background-position:-200% 0; }
}


/* ===========================================================================
 * 23) LIVE TOAST — entrada más cinematográfica
 * ========================================================================= */
.fs-live-toast{
  transition:
    left .65s var(--fs-pm-ease-out),
    opacity .5s ease,
    transform .65s var(--fs-pm-ease-out) !important;
  transform:translateY(8px);
}
.fs-live-toast.show{ transform:translateY(0); }


/* ===========================================================================
 * 24) SAVE PILL en hero-price — pulse contenido
 * ========================================================================= */
.save-pill{
  transition:transform .35s var(--fs-pm-ease-spring) !important;
}
.save-pill:hover{
  transform:scale(1.06);
}


/* ===========================================================================
 * 25) CART WIDGET — entrada suave
 * ========================================================================= */
#cartWidget{
  transition:transform .45s var(--fs-pm-ease-out), opacity .35s ease !important;
}


/* ===========================================================================
 * 26) PRODUCT PAGES — plan cards si existen
 * ========================================================================= */
.plan-card,
.plan-tier,
.pc-card{
  transition:
    transform .42s var(--fs-pm-ease-out),
    border-color .35s ease,
    box-shadow .42s var(--fs-pm-ease-out) !important;
}
.plan-card:hover,
.plan-tier:hover,
.pc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 52px rgba(0,0,0,.35), 0 0 0 1px rgba(255,90,52,.28) !important;
}


/* ===========================================================================
 * 27) ANULAR EFECTOS BARATOS RESIDUALES
 *     Por si alguna otra hoja inyecta white-shine.
 * ========================================================================= */
button[class*="cta"]::before:not(.fs-cta-primary):not(.cta-big):not(.nav-cta):not(.hero-cta),
a[class*="cta"]::before:not(.fs-cta-primary):not(.cta-big):not(.nav-cta):not(.hero-cta){
  /* No tocar nada agresivamente: solo prevenir shines residuales */
}

/* Eliminar cualquier ::after que use rgba(255,255,255,...) animado en CTAs */
.hero-cta::after,
.cta-big::after,
.nav-cta::after,
.fs-cta-primary::after{
  background:transparent !important;
}


/* ===========================================================================
 * 28) MOBILE — animaciones más rápidas, menos costo
 * ========================================================================= */
@media (max-width:768px){
  .anim, .anim-left, .anim-right, .anim-zoom{
    transition-duration:.6s !important;
    filter:blur(4px);
  }
  .anim.vis, .anim-left.vis, .anim-right.vis, .anim-zoom.vis{
    filter:blur(0);
  }
  .hero-cta::before,
  .fs-cta-primary::before,
  .cta-big::before{
    animation-duration:5s;
    opacity:.25;
    filter:blur(10px);
  }
  /* Sin tilt 3D en mobile */
  .cat-card:hover:not(.hero){
    transform:translateY(-3px);
  }
}


/* ===========================================================================
 * 29) TOUCH DEVICES — desactivar hovers que se quedan "stuck"
 * ========================================================================= */
@media (hover:none) and (pointer:coarse){
  .nav-cta:hover,
  .hero-cta:hover,
  .fs-cta-primary:hover,
  .cta-big:hover{
    transform:none;
    filter:none;
  }
  .nav-cta:active,
  .hero-cta:active,
  .fs-cta-primary:active,
  .cta-big:active{
    transform:scale(.97);
    transition-duration:.12s;
  }
  .cat-card:active{ transform:scale(.99); }
}


/* ===========================================================================
 * 30) REDUCED MOTION — respetar accesibilidad
 * ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-cta::before,
  .fs-cta-primary::before,
  .cta-big::before,
  .vs-cta::before,
  .forensic-cta-btn::before,
  .nav-cta::after,
  .logo img,
  .hw-bottom-stat strong,
  .vs-savings-num,
  .hw-row-badge,
  .cat-badge.popular,
  .save-pill,
  .pc-badge-save,
  .prop-row-badge,
  .video-thumb-play,
  .fs-urgency{
    animation:none !important;
    transition:none !important;
  }
  .anim, .anim-left, .anim-right, .anim-zoom{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  .fs-anim-in > *{
    opacity:1 !important;
    filter:none !important;
    animation:none !important;
  }
}

/* === END fs-premium.css ===================================================*/