/* ================================================
   animations.css — Galaxy Effects Layer v3
   Efectos intensos tipo galaxia para todos los .html
   ================================================ */

/* ─────────────────────────────────────────────
   CUSTOM CURSOR
   ───────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  a, button, [onclick], label, .cat-card { cursor: pointer; }
}
.cursor-dot {
  width: 8px; height: 8px;
  background: #5B8DEF;
  border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 10000;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease-spring), height 0.2s var(--ease-spring),
              background 0.2s, opacity 0.3s, transform 0.15s;
  will-change: left, top;
  box-shadow: 0 0 10px rgba(91,141,239,0.85);
}
.cursor-ring {
  width: 42px; height: 42px;
  border: 1.5px solid rgba(47,98,212,0.65);
  border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9999;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition:
    width  0.40s cubic-bezier(0.22,1,0.36,1),
    height 0.40s cubic-bezier(0.22,1,0.36,1),
    border-color 0.25s, background 0.25s, opacity 0.3s;
  will-change: left, top;
  box-shadow: 0 0 16px rgba(47,98,212,0.28);
}
body.cursor-hover .cursor-dot {
  width: 5px; height: 5px;
  background: #7BA5F5;
  box-shadow: 0 0 14px rgba(123,165,245,0.90);
}
body.cursor-hover .cursor-ring {
  width: 62px; height: 62px;
  border-color: rgba(47,98,212,0.55);
  background: rgba(47,98,212,0.06);
  box-shadow: 0 0 24px rgba(47,98,212,0.20);
}
body.cursor-click .cursor-dot  { transform: translate(-50%,-50%) scale(0.5); }
body.cursor-click .cursor-ring { transform: translate(-50%,-50%) scale(0.80); }
body.cursor-text  .cursor-dot  { display: none; }
body.cursor-text  .cursor-ring { display: none; }

/* ─────────────────────────────────────────────
   HERO NOISE TEXTURE — premium grain
   ───────────────────────────────────────────── */
.hero-noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ─────────────────────────────────────────────
   SHOOTING STARS — via hero-noise pseudo-elements
   (funciona en todos los heros)
   ───────────────────────────────────────────── */
.hero-noise::before {
  content: '';
  position: absolute;
  top: 16%; left: 0;
  width: 220px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(91,141,239,0.90) 50%, rgba(255,255,255,0.75) 80%, transparent 100%);
  box-shadow: 0 0 14px 2px rgba(47,98,212,0.55), 0 0 4px 1px rgba(255,255,255,0.40);
  border-radius: 99px;
  animation: shootingStarA 15s linear 1.5s infinite;
  pointer-events: none; z-index: 3;
  transform: translate(-240px, 0) rotate(-10deg);
}
@keyframes shootingStarA {
  0%    { transform: translate(-240px, 0) rotate(-10deg); opacity: 0; }
  2%    { opacity: 1; }
  28%   { transform: translate(110vw, 55px) rotate(-10deg); opacity: 0; }
  28.1% { transform: translate(-240px, 0) rotate(-10deg); opacity: 0; }
  100%  { transform: translate(-240px, 0) rotate(-10deg); opacity: 0; }
}

.hero-noise::after {
  content: '';
  position: absolute;
  top: 62%; left: 0;
  width: 170px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(30,71,160,0.90) 45%, rgba(255,255,255,0.70) 80%, transparent 100%);
  box-shadow: 0 0 12px 2px rgba(30,71,160,0.55), 0 0 4px 1px rgba(255,255,255,0.35);
  border-radius: 99px;
  animation: shootingStarB 22s linear 8s infinite;
  pointer-events: none; z-index: 3;
  transform: translate(-200px, 0) rotate(-6deg);
}
@keyframes shootingStarB {
  0%    { transform: translate(-200px, 0) rotate(-6deg); opacity: 0; }
  3%    { opacity: 1; }
  26%   { transform: translate(110vw, -40px) rotate(-6deg); opacity: 0; }
  26.1% { transform: translate(-200px, 0) rotate(-6deg); opacity: 0; }
  100%  { transform: translate(-200px, 0) rotate(-6deg); opacity: 0; }
}

/* ─────────────────────────────────────────────
   THIRD SHOOTING STAR — on hero-stars-2
   ───────────────────────────────────────────── */
.hero-stars-2::before {
  content: '';
  position: absolute;
  top: 38%; left: 0;
  width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(123,165,245,0.90) 45%, rgba(255,255,255,0.65) 80%, transparent 100%);
  box-shadow: 0 0 10px 1px rgba(47,98,212,0.55);
  border-radius: 99px;
  animation: shootingStarC 30s linear 18s infinite;
  pointer-events: none; z-index: 3;
  transform: translate(-160px, 0) rotate(-14deg);
}
@keyframes shootingStarC {
  0%    { transform: translate(-160px, 0) rotate(-14deg); opacity: 0; }
  4%    { opacity: 0.90; }
  22%   { transform: translate(110vw, 70px) rotate(-14deg); opacity: 0; }
  22.1% { transform: translate(-160px, 0) rotate(-14deg); opacity: 0; }
  100%  { transform: translate(-160px, 0) rotate(-14deg); opacity: 0; }
}

/* ─────────────────────────────────────────────
   HERO SVG RINGS — animated
   ───────────────────────────────────────────── */
.hero-svg-deco {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.hero-svg-deco svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.deco-ring-1 { animation: decoSpin 32s linear infinite; transform-box: fill-box; transform-origin: center; }
.deco-ring-2 { animation: decoSpin 46s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
.deco-ring-3 { animation: decoPulse 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.deco-ring-4 { animation: decoSpin 22s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes decoSpin  { to { transform: rotate(360deg); } }
@keyframes decoPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50%     { transform: scale(1.10); opacity: 1; }
}

/* ─────────────────────────────────────────────
   HERO LINE REVEAL — clip-mask slide up
   ───────────────────────────────────────────── */
.hero-line {
  display: block;
  overflow: hidden;
  line-height: 1.15;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero-line-inner {
  display: block;
  animation: lineSlideUp 0.72s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes lineSlideUp {
  from { transform: translateY(105%) skewX(-2deg); opacity: 0; }
  to   { transform: translateY(0)    skewX(0);     opacity: 1; }
}

/* ─────────────────────────────────────────────
   HERO CONTENT — parallax wrapper
   ───────────────────────────────────────────── */
.hero-tag, .hero h1, .hero p, .hero-btns, .hero-stats {
  will-change: transform;
}

/* ─────────────────────────────────────────────
   GLASSMORPHISM — step cards
   ───────────────────────────────────────────── */
.how-step {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s;
}
.how-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(15,23,42,0.08), 0 0 0 1px rgba(47,98,212,0.22);
}

/* ─────────────────────────────────────────────
   GLASSMORPHISM — category section bg
   ───────────────────────────────────────────── */
.cat-card {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
.cat-card:hover {
  box-shadow: 0 20px 60px rgba(15,23,42,0.08), 0 0 80px rgba(47,98,212,0.10) !important;
}

/* ─────────────────────────────────────────────
   HERO SCROLL FADE
   ───────────────────────────────────────────── */
.hero-content-fade {
  opacity: var(--hero-opacity, 1);
  transition: opacity 0.05s linear;
}

/* ─────────────────────────────────────────────
   TEXT HIGHLIGHT UNDERLINE
   ───────────────────────────────────────────── */
.cat-strip .sub,
.how-sub {
  position: relative;
  display: inline-block;
}

/* ─────────────────────────────────────────────
   STAT NUMBERS — pulsing glow on count
   ───────────────────────────────────────────── */
.stat .num { transition: color 0.5s, text-shadow 0.5s; }
.stat.counting .num {
  color: #5B8DEF !important;
  text-shadow: 0 0 20px rgba(91,141,239,0.65);
}

/* ─────────────────────────────────────────────
   HERO BUTTON RIPPLE
   ───────────────────────────────────────────── */
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.30);
  transform: scale(0); pointer-events: none;
  animation: rippleOut 0.6s ease-out forwards;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}
.hero .btn-primary { position: relative; overflow: hidden; }
.hero .btn-secondary { position: relative; overflow: hidden; }
.cta-wa-btn { position: relative; overflow: hidden; }

/* ─────────────────────────────────────────────
   SCROLL PROGRESS BAR
   ───────────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200;
  background: linear-gradient(90deg, #5B8DEF 0%, #2F62D4 50%, #1E47A0 100%);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(47,98,212,0.60);
}

/* ─────────────────────────────────────────────
   PAGE ENTRANCE CURTAIN
   ───────────────────────────────────────────── */
#page-curtain {
  position: fixed; inset: 0; z-index: 9998;
  background: linear-gradient(160deg, #0B1220 0%, #0F1A30 60%, #0B1220 100%);
  transform-origin: top;
  animation: curtainLift 0.75s cubic-bezier(0.76, 0, 0.24, 1) 0.05s both;
  pointer-events: none;
}
#page-curtain::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #5B8DEF, #2F62D4, #1E47A0);
  box-shadow: 0 0 20px rgba(47,98,212,0.65);
}
@keyframes curtainLift {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ─────────────────────────────────────────────
   HERO FLOATING ORBS — GALAXY INTENSITY
   ───────────────────────────────────────────── */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(70px);
  will-change: transform;
}
.hero-orb-1 {
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(47,98,212,0.52) 0%, rgba(47,98,212,0.24) 38%, transparent 70%);
  left: -230px; top: 8%;
  animation: orbDrift1 22s ease-in-out infinite;
}
.hero-orb-2 {
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(30,71,160,0.48) 0%, rgba(30,71,160,0.22) 38%, transparent 70%);
  right: -170px; top: -10%;
  animation: orbDrift2 28s ease-in-out infinite;
  animation-delay: -10s;
}
.hero-orb-3 {
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(91,141,239,0.42) 0%, rgba(47,98,212,0.18) 38%, transparent 70%);
  left: 38%; bottom: 5%;
  animation: orbDrift3 35s ease-in-out infinite;
  animation-delay: -18s;
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(65px,-95px) scale(1.10); }
  66%     { transform: translate(-50px,60px) scale(0.91); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-75px,55px) scale(1.09); }
  70%     { transform: translate(55px,-80px) scale(0.92); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-65px,-55px) scale(1.14); }
}

/* ─────────────────────────────────────────────
   HERO GALAXY STARS — layer 1 (bright, varied sizes)
   ───────────────────────────────────────────── */
.hero-stars {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    45px  85px 0 2px rgba(91,141,239,0.95),
    185px 40px  0 1px rgba(255,248,220,0.88),
    310px 120px 0 3px rgba(47,98,212,0.82),
    470px 65px  0 1px rgba(255,248,220,0.90),
    615px 140px 0 2px rgba(123,165,245,0.90),
    755px 30px  0 1px rgba(91,141,239,0.92),
    890px 115px 0 2px rgba(255,248,220,0.85),
    1050px 80px  0 3px rgba(47,98,212,0.84),
    1195px 145px 0 1px rgba(91,141,239,0.92),
    1360px 50px  0 2px rgba(30,71,160,0.88),
    120px 240px  0 1px rgba(47,98,212,0.90),
    265px 195px  0 2px rgba(255,248,220,0.82),
    405px 280px  0 1px rgba(91,141,239,0.92),
    560px 215px  0 3px rgba(30,71,160,0.80),
    700px 285px  0 1px rgba(255,248,220,0.88),
    840px 210px  0 2px rgba(47,98,212,0.90),
    990px 270px  0 1px rgba(91,141,239,0.90),
    1130px 195px 0 2px rgba(255,248,220,0.84),
    1280px 260px 0 1px rgba(123,165,245,0.88),
    1420px 225px 0 3px rgba(47,98,212,0.80),
    80px  395px  0 2px rgba(255,248,220,0.86),
    230px 340px  0 1px rgba(91,141,239,0.93),
    375px 460px  0 2px rgba(47,98,212,0.90),
    520px 380px  0 1px rgba(123,165,245,0.88),
    665px 430px  0 3px rgba(255,248,220,0.78),
    810px 355px  0 1px rgba(91,141,239,0.92),
    955px 415px  0 2px rgba(47,98,212,0.84),
    1100px 360px 0 1px rgba(30,71,160,0.90),
    1245px 445px 0 2px rgba(91,141,239,0.88),
    1390px 385px 0 1px rgba(255,248,220,0.92),
    55px  555px  0 1px rgba(47,98,212,0.90),
    200px 630px  0 2px rgba(123,165,245,0.88),
    345px 510px  0 1px rgba(91,141,239,0.92),
    490px 580px  0 3px rgba(255,248,220,0.80),
    635px 640px  0 1px rgba(47,98,212,0.90),
    780px 525px  0 2px rgba(91,141,239,0.88),
    925px 590px  0 1px rgba(30,71,160,0.92),
    1070px 655px 0 2px rgba(255,248,220,0.84),
    1215px 530px 0 1px rgba(47,98,212,0.90),
    1375px 605px 0 3px rgba(91,141,239,0.82),
    140px 720px  0 1px rgba(123,165,245,0.88),
    290px 760px  0 2px rgba(255,248,220,0.82),
    445px 695px  0 1px rgba(91,141,239,0.92),
    590px 745px  0 2px rgba(47,98,212,0.88),
    740px 710px  0 1px rgba(30,71,160,0.90),
    885px 770px  0 3px rgba(255,248,220,0.80),
    1035px 720px 0 1px rgba(91,141,239,0.90),
    1185px 760px 0 2px rgba(47,98,212,0.84),
    1340px 695px 0 1px rgba(123,165,245,0.88),
    30px  305px  0 2px rgba(91,141,239,0.90),
    720px 485px  0 1px rgba(255,248,220,0.86),
    1440px 440px 0 2px rgba(47,98,212,0.86);
  animation: starTwinkle1 4s ease-in-out infinite alternate;
}

/* ─────────────────────────────────────────────
   HERO GALAXY STARS — layer 2 (secondary fill)
   ───────────────────────────────────────────── */
.hero-stars-2 {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    100px 170px 0 1px rgba(255,248,220,0.68),
    250px 95px  0 2px rgba(91,141,239,0.72),
    395px 155px 0 1px rgba(47,98,212,0.70),
    545px 85px  0 1px rgba(123,165,245,0.74),
    685px 160px 0 2px rgba(255,248,220,0.68),
    835px 90px  0 1px rgba(91,141,239,0.72),
    980px 165px 0 1px rgba(47,98,212,0.70),
    1125px 80px 0 2px rgba(30,71,160,0.68),
    1270px 155px 0 1px rgba(255,248,220,0.74),
    1415px 100px 0 1px rgba(91,141,239,0.72),
    170px 325px 0 1px rgba(47,98,212,0.70),
    320px 265px 0 2px rgba(123,165,245,0.68),
    465px 310px 0 1px rgba(91,141,239,0.74),
    615px 250px 0 1px rgba(255,248,220,0.70),
    760px 305px 0 2px rgba(47,98,212,0.68),
    905px 240px 0 1px rgba(91,141,239,0.72),
    1050px 310px 0 1px rgba(30,71,160,0.70),
    1200px 255px 0 2px rgba(255,248,220,0.68),
    1345px 305px 0 1px rgba(47,98,212,0.72),
    95px  480px  0 2px rgba(123,165,245,0.70),
    240px 415px  0 1px rgba(255,248,220,0.72),
    385px 470px  0 1px rgba(91,141,239,0.70),
    530px 420px  0 2px rgba(47,98,212,0.68),
    680px 480px  0 1px rgba(30,71,160,0.72),
    825px 430px  0 1px rgba(91,141,239,0.70),
    975px 475px  0 2px rgba(255,248,220,0.68),
    1120px 415px 0 1px rgba(47,98,212,0.72),
    1265px 465px 0 1px rgba(123,165,245,0.70),
    1410px 425px 0 2px rgba(91,141,239,0.68),
    155px 580px  0 1px rgba(47,98,212,0.72),
    305px 645px  0 2px rgba(255,248,220,0.68),
    455px 590px  0 1px rgba(91,141,239,0.70),
    600px 655px  0 1px rgba(30,71,160,0.72),
    745px 585px  0 2px rgba(47,98,212,0.68),
    895px 640px  0 1px rgba(91,141,239,0.72),
    1040px 580px 0 1px rgba(255,248,220,0.70),
    1185px 650px 0 2px rgba(123,165,245,0.68),
    1330px 590px 0 1px rgba(47,98,212,0.72),
    75px  740px  0 1px rgba(30,71,160,0.70),
    220px 695px  0 2px rgba(91,141,239,0.68),
    365px 755px  0 1px rgba(255,248,220,0.72),
    515px 720px  0 1px rgba(47,98,212,0.70),
    660px 760px  0 2px rgba(91,141,239,0.68),
    805px 700px  0 1px rgba(123,165,245,0.72),
    955px 750px  0 1px rgba(255,248,220,0.68),
    1100px 720px 0 2px rgba(47,98,212,0.70),
    1245px 760px 0 1px rgba(91,141,239,0.72),
    1390px 710px 0 1px rgba(30,71,160,0.68);
  animation: starTwinkle1 6s ease-in-out infinite alternate-reverse;
}

@keyframes starTwinkle1 {
  0%   { opacity: 0.06; }
  100% { opacity: 1.00; }
}

/* ─────────────────────────────────────────────
   HERO TAG — spinning gradient border
   ───────────────────────────────────────────── */
@property --badge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero-tag {
  background:
    linear-gradient(rgba(11,18,32,0.92), rgba(11,18,32,0.92)) padding-box,
    conic-gradient(from var(--badge-angle),
      #5B8DEF 0%, #2F62D4 33%, #1E47A0 66%, #5B8DEF 100%
    ) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 0 24px rgba(47,98,212,0.32) !important;
  animation:
    fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.10s both,
    tagFloat 3.5s ease-in-out 1.2s infinite,
    badgeBorder 2.5s linear infinite !important;
}
@keyframes badgeBorder { to { --badge-angle: 360deg; } }
@keyframes tagFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-7px) scale(1.01); }
}

/* ─────────────────────────────────────────────
   HERO CTA BUTTON — pulsing glow
   ───────────────────────────────────────────── */
@keyframes heroBtnPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(47,98,212,0.42); }
  50%       { box-shadow: 0 12px 60px rgba(47,98,212,0.68), 0 0 0 10px rgba(47,98,212,0.09); }
}
.hero .btn-primary:not(:hover):not(:active) {
  animation: none;
}

/* ─────────────────────────────────────────────
   CAT CARDS — shimmer sweep on hover
   ───────────────────────────────────────────── */
.cat-card::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.08) 50%,
    transparent 65%
  );
  transform: skewX(-15deg);
  pointer-events: none; opacity: 0;
  transition: none;
}
.cat-card:hover::after {
  animation: shimmerSweep 0.68s ease-out forwards;
}
@keyframes shimmerSweep {
  0%   { left: -80%; opacity: 1; }
  100% { left: 145%; opacity: 1; }
}

/* ─────────────────────────────────────────────
   SECTION TITLES — animated gradient underline
   ───────────────────────────────────────────── */
.cat-strip h2,
.how-inner h2 {
  display: inline-block; position: relative;
}
.cat-strip h2::after {
  content: '';
  display: block; margin: 10px auto 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #5B8DEF, #2F62D4, #1E47A0);
  border-radius: 99px;
  transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.2s;
  box-shadow: 0 0 10px rgba(47,98,212,0.40);
}
.cat-strip.revealed h2::after { width: 90px; }

.how-inner h2::after {
  content: '';
  display: block; margin: 10px auto 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #5B8DEF, #2F62D4);
  border-radius: 99px;
  transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.4s;
  box-shadow: 0 0 10px rgba(47,98,212,0.40);
}
.how-section.revealed .how-inner h2::after { width: 60px; }

/* ─────────────────────────────────────────────
   HOW-IT-WORKS CONNECTORS — animated draw
   ───────────────────────────────────────────── */
.how-connector {
  position: relative; overflow: hidden;
}
.how-connector::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #5B8DEF 0%, #2F62D4 50%, #1E47A0 100%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 8px rgba(47,98,212,0.45);
}
.how-section.revealed .how-connector:nth-child(2)::after  { transform: scaleX(1); transition-delay: 0.50s; }
.how-section.revealed .how-connector:nth-child(4)::after  { transform: scaleX(1); transition-delay: 0.80s; }
.how-section.revealed .how-connector:nth-child(6)::after  { transform: scaleX(1); transition-delay: 1.10s; }

/* ─────────────────────────────────────────────
   HOW-IT-WORKS STEP ICONS — ring expand on reveal
   ───────────────────────────────────────────── */
@keyframes iconRingExpand {
  0%   { box-shadow: var(--shadow), 0 0 0 0 rgba(47,98,212,0.60), 0 0 30px rgba(47,98,212,0.12); }
  100% { box-shadow: var(--shadow), 0 0 0 28px rgba(47,98,212,0), 0 0 60px rgba(47,98,212,0.28); }
}
@keyframes iconSlideIn {
  0%   { transform: scale(0.5) translateY(20px); opacity: 0; filter: blur(4px); }
  70%  { transform: scale(1.12) translateY(-4px); opacity: 1; filter: none; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.how-step.revealed .how-icon {
  animation: iconSlideIn 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
}
.how-step.reveal-d1.revealed .how-icon { animation-delay: 0.12s; }
.how-step.reveal-d2.revealed .how-icon { animation-delay: 0.26s; }
.how-step.reveal-d3.revealed .how-icon { animation-delay: 0.40s; }
.how-step.reveal-d4.revealed .how-icon { animation-delay: 0.54s; }

.how-step.revealed .how-icon::after {
  animation: iconRingExpand 0.9s ease-out both;
}
.how-step.reveal-d1.revealed .how-icon::after { animation-delay: 0.55s; }
.how-step.reveal-d2.revealed .how-icon::after { animation-delay: 0.70s; }
.how-step.reveal-d3.revealed .how-icon::after { animation-delay: 0.85s; }
.how-step.reveal-d4.revealed .how-icon::after { animation-delay: 1.00s; }

.how-icon {
  position: relative;
}
.how-icon::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   STEP NUMBERS — glow entrance
   ───────────────────────────────────────────── */
@keyframes numReveal {
  0%   { opacity: 0; transform: translateX(-10px); letter-spacing: 5px; }
  100% { opacity: 1; transform: none; letter-spacing: 2.5px; }
}
.how-step.revealed .how-num {
  animation: numReveal 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.how-step.reveal-d1.revealed .how-num { animation-delay: 0.10s; }
.how-step.reveal-d2.revealed .how-num { animation-delay: 0.24s; }
.how-step.reveal-d3.revealed .how-num { animation-delay: 0.38s; }
.how-step.reveal-d4.revealed .how-num { animation-delay: 0.52s; }

/* ─────────────────────────────────────────────
   BENEFIT ICONS — bounce in on reveal
   ───────────────────────────────────────────── */
@keyframes iconBounceIn {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.22) rotate(6deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.benefits-strip.revealed .benefit-item:nth-child(1) .benefit-icon { animation: iconBounceIn 0.58s cubic-bezier(0.34,1.56,0.64,1) 0.05s both; }
.benefits-strip.revealed .benefit-item:nth-child(2) .benefit-icon { animation: iconBounceIn 0.58s cubic-bezier(0.34,1.56,0.64,1) 0.16s both; }
.benefits-strip.revealed .benefit-item:nth-child(3) .benefit-icon { animation: iconBounceIn 0.58s cubic-bezier(0.34,1.56,0.64,1) 0.27s both; }
.benefits-strip.revealed .benefit-item:nth-child(4) .benefit-icon { animation: iconBounceIn 0.58s cubic-bezier(0.34,1.56,0.64,1) 0.38s both; }

/* ─────────────────────────────────────────────
   HERO STATS — staggered entrance
   ───────────────────────────────────────────── */
@keyframes statReveal {
  0%   { opacity: 0; transform: translateY(18px) scale(0.82); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.hero-stats.anim-ready .stat:nth-child(1) { animation: statReveal 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.00s both; }
.hero-stats.anim-ready .stat:nth-child(2) { animation: statReveal 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.14s both; }
.hero-stats.anim-ready .stat:nth-child(3) { animation: statReveal 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.28s both; }

/* ─────────────────────────────────────────────
   SCAN LINE — hero top border pulse
   ───────────────────────────────────────────── */
.hero::before {
  background: linear-gradient(90deg, transparent, #5B8DEF 20%, #2F62D4 50%, #1E47A0 75%, transparent) !important;
  box-shadow: 0 0 20px rgba(47,98,212,0.55);
}
@keyframes topLinePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ─────────────────────────────────────────────
   WHATSAPP BUTTON — light sweep on hover
   ───────────────────────────────────────────── */
.cta-wa-btn {
  position: relative; overflow: hidden;
}
.cta-wa-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.cta-wa-btn:hover::before {
  transition: transform 0.45s ease;
  transform: translateX(120%);
}

/* ─────────────────────────────────────────────
   CTA SECTION SPARKLES
   ───────────────────────────────────────────── */
.cta-sparkle {
  position: absolute; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  animation: sparklePop var(--dur, 3.5s) ease-in-out var(--delay, 0s) infinite;
  opacity: 0;
  box-shadow: 0 0 8px 2px currentColor;
}
@keyframes sparklePop {
  0%   { opacity: 0; transform: scale(0) translate(0, 0); }
  15%  { opacity: 1; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: scale(2.2) translate(var(--tx,20px), var(--ty,-50px)); }
}

/* ─────────────────────────────────────────────
   CURSOR SPOTLIGHT
   ───────────────────────────────────────────── */
#cursor-spotlight {
  position: fixed; pointer-events: none; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,98,212,0.06) 0%, rgba(30,71,160,0.04) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  top: -300px; left: -300px;
  will-change: left, top;
  transition: opacity 0.5s;
}

/* ─────────────────────────────────────────────
   CAT CARD — enhanced hover
   ───────────────────────────────────────────── */
.cat-card.tilt-active {
  transition: transform 0.06s linear, border-color 0.35s, background 0.35s, box-shadow 0.35s !important;
}

/* ─────────────────────────────────────────────
   GENERAL STAGGER REVEAL
   ───────────────────────────────────────────── */
.reveal-stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.revealed > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0.00s; }
.reveal-stagger.revealed > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.08s; }
.reveal-stagger.revealed > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.16s; }
.reveal-stagger.revealed > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.24s; }

/* ─────────────────────────────────────────────
   NAV — active link underline entrance
   ───────────────────────────────────────────── */
.nav-links a.active::after {
  animation: navUnderlineIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
  transform-origin: left;
}
@keyframes navUnderlineIn {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

/* ─────────────────────────────────────────────
   FOOTER LINKS — hover accent
   ───────────────────────────────────────────── */
.footer-link {
  position: relative; overflow: hidden;
}

/* ─────────────────────────────────────────────
   SECTION ENTRY — reveal base
   ───────────────────────────────────────────── */
.benefits-strip.reveal,
.cat-strip.reveal,
.how-section.reveal,
.cta-final.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.80s cubic-bezier(0.22,1,0.36,1), transform 0.80s cubic-bezier(0.22,1,0.36,1);
}
.benefits-strip.revealed,
.cat-strip.revealed,
.how-section.revealed,
.cta-final.revealed {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────
   CAT CARD ICONS — hover glow scale
   ───────────────────────────────────────────── */
.cat-card:hover .icon .material-icons {
  filter: drop-shadow(0 0 10px currentColor);
  transition: filter 0.3s;
}

/* ─────────────────────────────────────────────
   BENEFITS STRIP — top accent line
   ───────────────────────────────────────────── */
.benefits-strip {
  position: relative;
}
.benefits-strip::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #5B8DEF 25%, #2F62D4 75%, transparent);
  opacity: 0;
  transition: opacity 0.6s 0.3s;
  box-shadow: 0 0 12px rgba(47,98,212,0.35);
}
.benefits-strip.revealed::before { opacity: 0.7; }

/* ─────────────────────────────────────────────
   BENEFITS ITEMS — slide-in from sides
   ───────────────────────────────────────────── */
.benefit-item {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1), background 0.25s, border-radius 0.25s;
}
.benefit-item:nth-child(odd)  { transform: translateX(-18px); }
.benefit-item:nth-child(even) { transform: translateX(18px); }
.benefits-strip.revealed .benefit-item:nth-child(1) { opacity:1; transform:none; transition-delay: 0.08s; }
.benefits-strip.revealed .benefit-item:nth-child(2) { opacity:1; transform:none; transition-delay: 0.18s; }
.benefits-strip.revealed .benefit-item:nth-child(3) { opacity:1; transform:none; transition-delay: 0.28s; }
.benefits-strip.revealed .benefit-item:nth-child(4) { opacity:1; transform:none; transition-delay: 0.38s; }

/* ─────────────────────────────────────────────
   MARQUEE STRIP
   ───────────────────────────────────────────── */
/* marquee-strip styles live in pages.css — these rules intentionally left blank to avoid duplication */


/* ─────────────────────────────────────────────
   CURSOR BLOB — gran orb gradiente que sigue el cursor
   ───────────────────────────────────────────── */
.cursor-blob {
  position: fixed; pointer-events: none;
  z-index: 0;
  width: 920px; height: 920px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(47,98,212,0.18) 0%,
    rgba(30,71,160,0.11) 35%,
    rgba(91,141,239,0.06) 55%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  filter: blur(42px);
  will-change: left, top;
  opacity: 0;
  transition: opacity 1s ease;
}

/* ─────────────────────────────────────────────
   SECTION WATERMARKS — números gigantes de fondo
   ───────────────────────────────────────────── */
.section-watermark {
  position: absolute;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 16vw, 200px);
  line-height: 1;
  letter-spacing: -6px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

/* ─────────────────────────────────────────────
   CAT CARDS — shimmer gradient en hover
   ───────────────────────────────────────────── */
.cat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(47,98,212,0) 0%,
    rgba(47,98,212,0.06) 50%,
    rgba(30,71,160,0.05) 100%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none; z-index: 0;
}
.cat-card:hover::before { opacity: 1; }
.cat-card > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────
   CURSOR TRAIL — 7 ghost dots
   ───────────────────────────────────────────── */
.cursor-trail {
  position: fixed; pointer-events: none; z-index: 9997;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #5B8DEF;
  will-change: left, top;
  transition: opacity 0.35s ease;
}

/* ─────────────────────────────────────────────
   CARD SPOTLIGHT — radial glow follows mouse
   ───────────────────────────────────────────── */
.card-spotlight {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(47,98,212,0.16) 0%,
    rgba(30,71,160,0.09) 38%,
    transparent 62%
  );
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.how-step .card-spotlight {
  background: radial-gradient(circle,
    rgba(47,98,212,0.14) 0%,
    rgba(30,71,160,0.08) 40%,
    transparent 65%
  );
}

/* ─────────────────────────────────────────────
   CLICK BURST — micro-explosion on click
   ───────────────────────────────────────────── */
.click-burst-dot {
  position: fixed; pointer-events: none; z-index: 9990;
  border-radius: 50%;
  animation: burstFly 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes burstFly {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1.4); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) translate(var(--bx,0px), var(--by,-55px)) scale(0); opacity: 0; }
}

/* ─────────────────────────────────────────────
   HERO PARTICLES — ambient dots float upward
   ───────────────────────────────────────────── */
.hero-particle {
  position: absolute; pointer-events: none; z-index: 1;
  border-radius: 50%; opacity: 0;
  animation: heroParticle var(--pd,8s) var(--pp,0s) ease-in-out infinite;
}
@keyframes heroParticle {
  0%   { opacity: 0; transform: translate(0,0) scale(0); }
  18%  { opacity: var(--po,0.5); transform: translate(var(--px,10px), var(--py,-25px)) scale(1); }
  82%  { opacity: calc(var(--po,0.5)*0.3); transform: translate(calc(var(--px,10px)*2.2), calc(var(--py,-25px)*2.8)) scale(0.55); }
  100% { opacity: 0; transform: translate(calc(var(--px,10px)*3), calc(var(--py,-25px)*3.8)) scale(0); }
}

/* ─────────────────────────────────────────────
   SECTION HEADINGS — animated gradient sweep
   ───────────────────────────────────────────── */
.cat-strip h2, .how-inner h2 {
  color: #0F172A;
}

/* ─────────────────────────────────────────────
   HOW-STEP — gradient border on hover
   ───────────────────────────────────────────── */
@property --hw-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.how-step {
  border: 1px solid transparent;
  transition: border-color 0s;
}
.how-step:hover {
  border-color: rgba(47,98,212,0.30);
  box-shadow: 0 16px 50px rgba(15,23,42,0.08);
}

/* ─────────────────────────────────────────────
   PAGE CURTAIN — enhanced brand reveal
   ───────────────────────────────────────────── */
#page-curtain::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(47,98,212,0.20) 0%, rgba(30,71,160,0.12) 35%, transparent 65%
  );
  animation: curtainGlow 0.6s ease-out both;
}
@keyframes curtainGlow {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────
   ABOUT-HERO & SECTION-HERO — nebula boost
   ───────────────────────────────────────────── */
.about-hero::after {
  position: absolute; inset: 0; height: auto;
  background:
    radial-gradient(ellipse 75% 85% at 50% 50%, rgba(47,98,212,0.12) 0%, transparent 62%),
    radial-gradient(ellipse 45% 60% at 12% 28%, rgba(30,71,160,0.10) 0%, transparent 58%),
    radial-gradient(ellipse 40% 55% at 88% 72%, rgba(91,141,239,0.10) 0%, transparent 58%),
    linear-gradient(90deg, transparent, rgba(47,98,212,0.05), transparent);
  pointer-events: none; z-index: 0;
}

.section-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(47,98,212,0.12) 0%, transparent 62%),
    radial-gradient(ellipse 42% 58% at 18% 30%, rgba(30,71,160,0.10) 0%, transparent 58%),
    radial-gradient(ellipse 38% 50% at 82% 68%, rgba(91,141,239,0.10) 0%, transparent 58%);
  pointer-events: none; z-index: 0;
}

/* ─────────────────────────────────────────────
   CATALOG-HERO — nebula boost
   ───────────────────────────────────────────── */
.catalog-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 65% 75% at 60% 40%, rgba(47,98,212,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 48% 60% at 20% 70%, rgba(30,71,160,0.14) 0%, transparent 58%),
    radial-gradient(ellipse 38% 45% at 85% 18%, rgba(91,141,239,0.12) 0%, transparent 56%),
    linear-gradient(rgba(47,98,212,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,98,212,0.030) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
}