/* ============================================================================
 * Five Solutions — fs-motion-pro.css v71.8.0
 *
 * MOTION 2.0 — capa ADITIVA sobre fs-premium.css.
 *
 * Sube el volumen de animaciones premium sin caer en lo barato.
 * Principios:
 *   - Cero white-flash. Solo glow naranja y gradient sweeps de marca.
 *   - Cada animación tiene un propósito visual: profundidad, jerarquía o
 *     dirección de mirada.
 *   - Performance: solo transform, opacity, filter. Nada de animar layout.
 *   - Respeta prefers-reduced-motion.
 *
 * Capas que añade:
 *   1) Hero más vivo: title con gradient sweep, badge con halo respiratorio,
 *      particles flotantes, mouse parallax MÁS marcado.
 *   2) Section headings con shimmer al revelar.
 *   3) Scroll-driven: blobs que se mueven con el scroll, section dividers
 *      con líneas que se dibujan.
 *   4) CTAs con pulse rings continuos (3 anillos saliendo, color marca).
 *   5) Cards: tilt 3D + sombra dinámica + border-glow naranja al hover.
 *   6) Stats: counter pulse con scale spring.
 *   7) Floating decorative micro-particles globales.
 *   8) Animated background mesh (sutil, 30s loop).
 * ========================================================================== */


/* ============================================================================
 * 1) HERO — title con gradient sweep + badge con halo respiratorio
 * ========================================================================== */

/* v72.3.0 — Gradient ESTÁTICO sin loops infinitos (estilo Linear/Vercel)
   Solo navy + naranja, sin amarillo. Drop-shadow sutil estática. */
.hero h1 .gr,
.prop-h1 .num{
  background-image: 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;
  filter: drop-shadow(0 0 24px rgba(255,90,52,.28));
  display: inline-block;
}
/* Animaciones de loop infinito eliminadas - reemplazadas por estados estáticos
   @keyframes fs-mp-gradient-sweep / fs-mp-text-pulse — REMOVED v72.3.0 */

/* Hero badge con halo naranja respiratorio detrás */
.hero-badge{
  position: relative;
  isolation: isolate;
}
.hero-badge::before{
  content: '';
  position: absolute;
  inset: -8px -12px;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255,90,52,.22), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: none; /* v72.3.0 — badge breath removido (era ruido visual) */
  pointer-events: none;
}
@keyframes fs-mp-badge-breath{
  0%, 100% { opacity: .5; transform: scale(.96); }
  50%      { opacity: 1;  transform: scale(1.04); }
}

/* Hero showcase: float más amplio + sutil tilt continuo */
.hero-showcase{
  animation:
    fs-mp-showcase-float 7s ease-in-out infinite,
    fs-mp-showcase-tilt 11s ease-in-out infinite !important;
  transform-style: preserve-3d;
}
@keyframes fs-mp-showcase-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes fs-mp-showcase-tilt{
  0%, 100% { rotate: 0deg; }
  33%      { rotate: .6deg; }
  66%      { rotate: -.5deg; }
}

/* Hero mouse-parallax: los blobs MÁS visibles */
.hero .fs-bg-blob,
.prod-hero .fs-bg-blob{
  opacity: .7 !important;
  filter: blur(70px) !important;
}
.hero .fs-bg-blob-1{ background: rgba(255,90,52,.34) !important; }
.hero .fs-bg-blob-2{ background: rgba(13,58,118,.55) !important; }
.hero .fs-bg-blob-3{ background: rgba(255,184,0,.16) !important; }


/* ============================================================================
 * 2) SECTION HEADINGS — texto blanco sólido (v72.6.0)
 * Eliminado el gradient shimmer porque dejaba el texto invisible/marrón cuando
 * la animación no disparaba (causa raíz del bug reportado por Aldair).
 * ========================================================================== */
.sec-title,
.vs-title,
.wc-title{
  position: relative;
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
/* Compatibilidad: aunque IntersectionObserver agregue .vis, no aplica animation */
.sec-hdr.vis .sec-title,
.vs-hdr.vis .vs-title,
.wc-hdr.vis .wc-title,
.sec-title.vis,
.vs-title.vis,
.wc-title.vis,
.sec-title.fs-mp-shimmer-done,
.vs-title.fs-mp-shimmer-done,
.wc-title.fs-mp-shimmer-done{
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  color: #F1F5F9 !important;
}


/* ============================================================================
 * 3) SCROLL-DRIVEN — blobs reactivos al scroll + section dividers animados
 * ========================================================================== */

/* Section divider — línea gradient que se dibuja al revelar */
.sec-hdr.vis::after,
.vs-hdr.vis::after,
.wc-hdr.vis::after{
  content: '';
  display: block;
  height: 2px;
  width: 80px;
  max-width: 30vw;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, #FF5A34 30%, #FFB800 50%, #FF5A34 70%, transparent);
  background-size: 200% 100%;
  animation: fs-mp-divider-draw .8s var(--fs-ease-out) .3s both; /* v72.3.0 — flow infinite removido */
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
}
@keyframes fs-mp-divider-draw{
  0%   { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes fs-mp-divider-flow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}


/* ============================================================================
 * 4) CTAs — pulse rings continuos en el botón principal
 * ========================================================================== */
.hero-cta,
.fs-cta-primary,
.cta-big{
  position: relative;
}

/* 3 anillos naranjas saliendo del CTA en loop */
.hero-cta::before,
.fs-cta-primary::before,
.cta-big::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  border: 2px solid rgba(255,90,52,.6) !important;
  pointer-events: none;
  filter: none !important;
  animation: fs-mp-cta-ring 2.6s ease-out 1 !important; /* v72.3.0 — solo 1 vez */
  opacity: 0;
  z-index: -1;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}
@keyframes fs-mp-cta-ring{
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.35); }
}

/* Halo radial respiratorio adicional (esto SÍ va detrás como antes pero estiramos) */
.hero-cta,
.fs-cta-primary,
.cta-big{
  box-shadow:
    0 10px 32px rgba(255,90,52,.4),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.hero-cta:hover,
.fs-cta-primary:hover,
.cta-big:hover{
  box-shadow:
    0 18px 50px rgba(255,90,52,.55),
    0 0 0 6px rgba(255,90,52,.08),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  filter: brightness(1.08);
}


/* ============================================================================
 * 5) CARDS — border-glow naranja al hover (v71.8.1: técnica simple y robusta)
 *
 * NOTA: El conic-gradient + mask-composite del v71.8.0 producía artifacts
 * visuales (líneas diagonales atravesando las cards) en algunos browsers
 * cuando la mask fallaba. Reemplazado por box-shadow inset + outer glow.
 * ========================================================================== */
.cat-card:not(.hero),
.wc-card,
.bon-card,
.forensic-stat{
  position: relative;
  isolation: isolate;
}

/* Border-glow naranja que aparece al hover, fade-in suave */
.cat-card:not(.hero),
.wc-card,
.bon-card{
  transition:
    transform .45s var(--fs-ease-out),
    box-shadow .55s var(--fs-ease-out),
    border-color .35s ease !important;
}
.cat-card:not(.hero):hover,
.wc-card:hover,
.bon-card:hover{
  box-shadow:
    0 0 0 1px rgba(255,90,52,.45) inset,
    0 0 32px rgba(255,90,52,.18) inset,
    0 22px 48px rgba(0,0,0,.35),
    0 0 28px rgba(255,90,52,.22) !important;
  border-color: rgba(255,90,52,.4) !important;
}

/* (El conic-gradient orbit fue removido — causaba artifacts) */



/* ============================================================================
 * 6) STATS — counter pulse con scale spring (refuerzo de fs-premium)
 * ========================================================================== */
.hw-bottom-stat strong,
.vs-savings-num{
  position: relative;
  display: inline-block;
  transition: transform .35s var(--fs-ease-spring);
}
.hw-bottom-stat strong::after,
.vs-savings-num::after{
  content: '';
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255,90,52,.25), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  opacity: 0;
  animation: none; /* v72.3.0 — stat glow removido */
  pointer-events: none;
}
@keyframes fs-mp-stat-glow{
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}


/* ============================================================================
 * 7) GLOBAL MICRO-PARTICLES — sparkles que flotan en background
 * ========================================================================== */
.fs-mp-particle-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.fs-mp-particle{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF5A34;
  box-shadow: 0 0 10px rgba(255,90,52,.7), 0 0 4px rgba(255,184,0,.5);
  opacity: 0;
  animation: none; /* v72.3.0 — particles eliminadas */
}
.fs-mp-particle:nth-child(2n){ background: #FFB800; box-shadow: 0 0 10px rgba(255,184,0,.7); }
.fs-mp-particle:nth-child(3n){ background: #FF7A5C; }
@keyframes fs-mp-particle-float{
  0%   { opacity: 0; transform: translate3d(0, 100vh, 0) scale(.3); }
  10%  { opacity: .7; }
  90%  { opacity: .7; }
  100% { opacity: 0; transform: translate3d(60px, -10vh, 0) scale(1.2); }
}


/* ============================================================================
 * 8) ANIMATED GRADIENT MESH (sutil, hero only)
 * ========================================================================== */
.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 10% 20%, rgba(255,90,52,.08), transparent 50%),
    radial-gradient(700px 600px at 90% 80%, rgba(255,184,0,.06), transparent 50%),
    radial-gradient(900px 700px at 50% 50%, rgba(22,74,147,.12), transparent 60%);
  background-size: 200% 200%;
  animation: none; /* v72.3.0 — mesh flow removido */
  pointer-events: none;
  z-index: 0;
}
.hero > *{ position: relative; z-index: 1; }
@keyframes fs-mp-mesh-flow{
  0%, 100% { background-position: 0% 0%; }
  33%      { background-position: 100% 50%; }
  66%      { background-position: 50% 100%; }
}


/* ============================================================================
 * 9) HOVER RIPPLE — chispa que sale del cursor en cards
 *    (controlado por JS, este es el CSS que escucha la clase)
 * ========================================================================== */
.fs-mp-ripple{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,52,.55), transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: fs-mp-ripple-grow .65s var(--fs-ease-out) forwards;
  z-index: 2;
}
@keyframes fs-mp-ripple-grow{
  to { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}


/* ============================================================================
 * 10) PRODUCT LOGOS — flotación suave en el hero showcase
 * ========================================================================== */
.hw-row-icon{
  animation: none; /* v72.3.0 — icon bob removido */
}
.hw-row:nth-child(1) .hw-row-icon{ animation-delay: 0s; }
.hw-row:nth-child(2) .hw-row-icon{ animation-delay: .5s; }
.hw-row:nth-child(3) .hw-row-icon{ animation-delay: 1s; }
.hw-row:nth-child(4) .hw-row-icon{ animation-delay: 1.5s; }
.hw-row:nth-child(5) .hw-row-icon{ animation-delay: 2s; }
@keyframes fs-mp-icon-bob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}


/* ============================================================================
 * 11) NAV — scrolled state con gradient bar inferior animado
 * ========================================================================== */
nav.scrolled{
  position: relative;
}
nav.scrolled::after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FF5A34 40%, #FFB800 50%, #FF5A34 60%, transparent);
  background-size: 200% 100%;
  animation: none; /* v72.3.0 — nav flow removido */
}
@keyframes fs-mp-nav-flow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}


/* ============================================================================
 * 12) SAVE-PILL — pulse de glow más visible
 * ========================================================================== */
.save-pill,
.hero-price-anchor .save-pill{
  position: relative;
  isolation: isolate;
  animation: fs-mp-save-pulse 2.5s ease-in-out 3; /* v72.3.0 — solo 3 pulsos */
}
.save-pill::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255,90,52,.45), transparent 70%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
@keyframes fs-mp-save-pulse{
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(255,90,52,.32); }
  50%      { transform: scale(1.08); box-shadow: 0 6px 26px rgba(255,90,52,.6); }
}


/* ============================================================================
 * 13) FAQ — flecha + abre con un wiggle micro
 * ========================================================================== */
.faq-i.open{
  animation: fs-mp-faq-open .55s var(--fs-ease-spring);
}
@keyframes fs-mp-faq-open{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.012) translateY(-1px); }
  100% { transform: scale(1); }
}


/* ============================================================================
 * 14) FORENSIC SHOT — glow halo + scan line animada
 * ========================================================================== */
.forensic-shot{
  position: relative;
  overflow: hidden;
}
.forensic-shot::after{
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,90,52,.18) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: none; /* v72.3.0 — scan removido */
  animation-delay: 2s;
}
@keyframes fs-mp-scan{
  0%, 90%, 100% { top: -100%; opacity: 0; }
  10%           { opacity: 1; }
  70%           { top: 100%; opacity: 1; }
}


/* ============================================================================
 * 15) WHATSAPP CHATS — entrada escalonada de mensajes al revelar
 * ========================================================================== */
.wa-chat.vis .wa-msg{
  animation: fs-mp-msg-in .5s var(--fs-ease-out) both;
}
.wa-chat.vis .wa-msg:nth-child(1){ animation-delay: .1s; }
.wa-chat.vis .wa-msg:nth-child(2){ animation-delay: .25s; }
.wa-chat.vis .wa-msg:nth-child(3){ animation-delay: .4s; }
.wa-chat.vis .wa-msg:nth-child(4){ animation-delay: .55s; }
.wa-chat.vis .wa-msg:nth-child(5){ animation-delay: .7s; }
.wa-chat.vis .wa-msg:nth-child(6){ animation-delay: .85s; }
@keyframes fs-mp-msg-in{
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================================
 * 16) SAVINGS BAND (marquee) — más rápido y con glow al hover
 * ========================================================================== */
.savings-band{
  position: relative;
  overflow: hidden;
}
.savings-band::before,
.savings-band::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.savings-band::before{
  left: 0;
  background: linear-gradient(90deg, var(--navy-800), transparent);
}
.savings-band::after{
  right: 0;
  background: linear-gradient(90deg, transparent, var(--navy-800));
}
.savings-band-track{ animation-duration: 24s !important; }


/* ============================================================================
 * 17) PRICE NUMBERS — pulse warm cuando entran al viewport
 * ========================================================================== */
.hero-price-value span,
.cat-price .amount,
.hero-price .amount,
.vs-col-price-main strong{
  display: inline-block;
  transition: transform .35s var(--fs-ease-spring);
}

/* Cuando se hace hover en el contenedor del precio, el número crece sutilmente */
.hero-price-anchor:hover .hero-price-value span,
.cat-price:hover .amount{
  transform: scale(1.06);
}


/* ============================================================================
 * 18) BG GRID DOTS — patrón de puntos sutil que aparece debajo del hero
 * ========================================================================== */
.tbar{
  position: relative;
  overflow: hidden;
}
.tbar::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,90,52,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
  animation: none; /* v72.3.0 — grid drift removido */
  pointer-events: none;
}
@keyframes fs-mp-grid-drift{
  from { background-position: 0 0; }
  to   { background-position: 24px 24px; }
}


/* ============================================================================
 * 19) CTA-FINAL section — glow rotating behind h2
 * ========================================================================== */
.cta-final h2{
  position: relative;
  isolation: isolate;
}
.cta-final h2::before{
  content: '';
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(
    60% 100% at 50% 50%,
    rgba(255,90,52,.16),
    rgba(255,184,0,.06) 50%,
    transparent 75%
  );
  filter: blur(24px);
  z-index: -1;
  animation: fs-mp-cta-final-pulse 6s ease-in-out 2; /* v72.3.0 — 2 ciclos */
  pointer-events: none;
  opacity: .8;
}
@keyframes fs-mp-cta-final-pulse{
  0%, 100% { transform: scale(.95); opacity: .6; }
  50%      { transform: scale(1.08); opacity: .9; }
}


/* ============================================================================
 * 20) MOBILE — reducir intensidad de animaciones pesadas
 * ========================================================================== */
@media (max-width: 768px){
  .fs-mp-particle-layer{ display: none; }  /* sin partículas en mobile */
  .hero::before{ animation-duration: 40s; }
  .hero-showcase{ animation: none !important; /* v72.3.0 — showcase float removido */ }
}


/* ============================================================================
 * 21) TOUCH DEVICES — hover-glow se desactiva (no hay hover)
 * ========================================================================== */
@media (hover:none) and (pointer:coarse){
  .cat-card:not(.hero):hover,
  .wc-card:hover,
  .bon-card:hover{
    box-shadow: none !important;
  }
}


/* ============================================================================
 * 22) REDUCED MOTION — todo apagado
 * ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero h1 .gr,
  .prop-h1 .num,
  .hero-badge::before,
  .hero-showcase,
  .hero::before,
  .sec-hdr.vis::after,
  .vs-hdr.vis::after,
  .wc-hdr.vis::after,
  .hero-cta::before,
  .fs-cta-primary::before,
  .cta-big::before,
  .hw-bottom-stat strong::after,
  .vs-savings-num::after,
  .fs-mp-particle,
  .hw-row-icon,
  nav.scrolled::after,
  .save-pill,
  .save-pill::after,
  .forensic-shot::after,
  .savings-band-track,
  .tbar::before,
  .cta-final h2::before{
    animation: none !important;
    transition: none !important;
  }
  .fs-mp-particle-layer{ display: none !important; }
  .hero h1 .gr{
    background: none !important;
    -webkit-text-fill-color: #FF5A34 !important;
    color: #FF5A34 !important;
  }
  .sec-title, .vs-title, .wc-title{
    background: none !important;
    -webkit-text-fill-color: #F1F5F9 !important;
    color: #F1F5F9 !important;
  }
}

/* === END fs-motion-pro.css ================================================*/