/* ===========================================================
   Pulso de fibra — mejora visual del hero (solo home / index.html)
   Base: styles.css (vars --blue #2f6fd0, --sky #8fc4f0, --ease).
   Reglas: solo transform/opacity. Elementos decorativos =>
   aria-hidden + pointer-events:none. Nunca se fija opacity:0
   ESTÁTICO en el contenido (solo en el from{} de cada keyframe),
   por lo que con reduced-motion / sin JS / sin soporte de
   animaciones el contenido queda visible. styles.css ya aplica
   *{animation:none!important} bajo prefers-reduced-motion.
   =========================================================== */

.hero{--hp-rise:36px;--hp-rise2:20px}

/* ---------- 1) Entrada del título por líneas (un solo <h1>) ---------- */
.hero-title{line-height:1.1;margin:0}
.hero-title .ht-line{display:block}
.hero-title .ht-inner{
  display:inline-block;
  animation:hpRise .82s cubic-bezier(.16,1,.3,1) both;
  will-change:transform,opacity;
}
.hero-title .ht-line:nth-child(1) .ht-inner{animation-delay:0ms}
.hero-title .ht-line:nth-child(2) .ht-inner{animation-delay:110ms}
.hero-title .ht-line:nth-child(3) .ht-inner{animation-delay:220ms}
@keyframes hpRise{from{opacity:0;transform:translateY(var(--hp-rise))}to{opacity:1;transform:none}}

/* ---------- 3) Descripción + CTA + stats + pill + visual ---------- */
.hero .pill{animation:hpFade .6s cubic-bezier(.16,1,.3,1) both}
.hero .lead{animation:hpRise2 .68s cubic-bezier(.16,1,.3,1) both;animation-delay:.48s;will-change:transform,opacity}
.hero .hero-cta{animation:hpRise2 .68s cubic-bezier(.16,1,.3,1) both;animation-delay:.62s;will-change:transform,opacity}
.hero .hero-stats li{animation:hpRise2 .6s cubic-bezier(.16,1,.3,1) both}
.hero .hero-stats li:nth-child(1){animation-delay:.76s}
.hero .hero-stats li:nth-child(2){animation-delay:.84s}
.hero .hero-stats li:nth-child(3){animation-delay:.92s}
/* visual: solo opacidad (no transform) para no chocar con el parallax */
.hero .hero-visual{animation:hpFade .8s ease both;animation-delay:.2s}
@keyframes hpRise2{from{opacity:0;transform:translateY(var(--hp-rise2))}to{opacity:1;transform:none}}
@keyframes hpFade{from{opacity:0}to{opacity:1}}

/* limpiar will-change cuando termina la intro (clase la pone el JS) */
.hero.hp-intro-done .ht-inner,
.hero.hp-intro-done .lead,
.hero.hp-intro-done .hero-cta{will-change:auto}

/* ---------- 2) Destello sobre palabras azules (fibra / óptica) ---------- */
.flash-word{
  color:#ffce3a;                                 /* fallback si el navegador no soporta clip:text */
  -webkit-text-fill-color:transparent;           /* el relleno lo dan las capas recortadas al texto */
  -webkit-text-stroke:.6px rgba(255,206,58,.95); /* el "vaso": contorno dorado siempre visible */
  text-stroke:.6px rgba(255,206,58,.95);
  /* capa 1 = reflejo (glint) que cruza; capa 2 = agua dorada que sube */
  background-image:
    linear-gradient(100deg,transparent 44%,rgba(255,248,220,.75) 50%,transparent 56%),
    linear-gradient(to top,#ffce3a 48%,rgba(255,206,58,.92) 50%,transparent 52%);
  background-repeat:no-repeat,no-repeat;
  background-size:250% 100%,100% 200%;            /* agua: doble alto => el borde duro es el nivel */
  background-position:200% 0,0 100%;             /* base (reduced-motion): reflejo fuera, agua llena */
  -webkit-background-clip:text;background-clip:text;
  animation:hpFill 5.5s ease-in-out infinite;
}
.flash-word--2{animation-delay:.5s}              /* óptica se llena un pelín después que fibra */
@keyframes hpFill{
  0%,12%{background-position:200% 0,0 0%}    /* reflejo fuera; vaso vacío unos instantes */
  40%   {background-position:200% 0,0 100%}  /* el dorado sube como agua hasta llenar */
  46%   {background-position:200% 0,0 93%}   /* A) menisco: el nivel baja un pelín... */
  52%   {background-position:200% 0,0 100%}  /* ...y se asienta lleno (rebote suave) */
  62%   {background-position:200% 0,0 100%}  /* mantiene lleno */
  74%   {background-position:-150% 0,0 100%} /* B) el reflejo cruza una vez (~0.65s) */
  90%   {background-position:-150% 0,0 100%} /* reposa lleno, reflejo ya fuera */
  100%  {background-position:-150% 0,0 0%}   /* se vacía; reflejo queda fuera (reset invisible) */
}

/* ---------- 4) Haz de fibra óptica (línea fina detrás del texto) ---------- */
.fiber-beam{
  position:absolute;left:0;top:44%;width:42%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(143,196,240,.55) 30%,rgba(255,255,255,.9) 50%,rgba(47,111,208,.55) 70%,transparent);
  box-shadow:0 0 8px rgba(143,196,240,.5);   /* glow estático (no se anima) */
  opacity:0;transform:translateX(-100%);
  pointer-events:none;
  animation:hpBeam 7s linear infinite;
}
@keyframes hpBeam{
  0%{opacity:0;transform:translateX(-100%)}
  2%{opacity:.7}
  18%{opacity:.7}                    /* recorrido ~1.4s (2%->20% de 7s) */
  20%{opacity:0;transform:translateX(250%)}
  100%{opacity:0;transform:translateX(250%)}
}

/* ---------- 6) Nodos de conexión (posiciones fijas, discretos) ---------- */
.fiber-node{position:absolute;width:5px;height:5px;border-radius:50%;
  background:rgba(143,196,240,.7);pointer-events:none;opacity:.5}
.fiber-node::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(143,196,240,.55);transform:scale(1);opacity:.55;
  animation:hpNode 3.4s ease-out infinite}
.fiber-node.n1{left:16%;top:34%}
.fiber-node.n2{left:38%;top:60%}
.fiber-node.n3{left:60%;top:26%}
.fiber-node.n4{left:72%;top:54%}
.fiber-node.n5{left:50%;top:44%}
.fiber-node.n2::after{animation-delay:.7s}
.fiber-node.n3::after{animation-delay:1.4s}
.fiber-node.n4::after{animation-delay:2.1s}
.fiber-node.n5::after{animation-delay:2.8s}
@keyframes hpNode{0%{transform:scale(.6);opacity:.55}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}

/* ---------- 5) Parallax multicapa (vars --hpx/--hpy las pone el JS; sin JS => 0) ---------- */
.hero .grid-lines{transform:translate3d(calc(var(--hpx,0)*6px),calc(var(--hpy,0)*6px),0);transition:transform .18s ease-out}
.hero .glow-a{transform:translate3d(calc(var(--hpx,0)*14px),calc(var(--hpy,0)*14px),0);transition:transform .25s ease-out}
.hero .glow-b{transform:translate3d(calc(var(--hpx,0)*-14px),calc(var(--hpy,0)*-14px),0);transition:transform .25s ease-out}
.hero .hero-mascota-stage{transform:translate3d(calc(var(--hpx,0)*11px),calc(var(--hpy,0)*11px),0);transition:transform .2s ease-out}

/* ---------- 8) Salida vinculada al scroll (var --hp-exit 0..1 la pone el JS) ---------- */
.hero .hero-copy{transform:translateY(calc(var(--hp-exit,0)*-20px));opacity:calc(1 - var(--hp-exit,0)*.3)}
.hero .hero-bg{transform:scale(calc(1 + var(--hp-exit,0)*.03));transform-origin:center}
.hero .hero-visual{transform:translateY(calc(var(--hp-exit,0)*-10px))}   /* más lento que el copy */

/* will-change solo mientras el hero es visible (lo retira el IO al salir) */
.hero.hp-visible .hero-bg{will-change:transform}
.hero.hp-visible .hero-copy{will-change:transform,opacity}
.hero.hp-visible .fiber-beam{will-change:transform,opacity}

/* pausar ambientales cuando el hero no está en viewport (clase la pone el IO) */
.hero.hp-paused .fiber-beam,
.hero.hp-paused .fiber-node::after,
.hero.hp-paused .flash-word{animation-play-state:paused}

/* ---------- 7) Botón magnético — foco accesible ---------- */
.hero-cta .btn-primary{transition:transform .2s var(--ease),box-shadow .25s var(--ease)}
.hero-cta .btn-primary:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .hero{--hp-rise:22px;--hp-rise2:14px}       /* desplazamientos de entrada menores */
  .fiber-node.n4,.fiber-node.n5{display:none} /* menos nodos en móvil (3) */
  .fiber-beam{top:40%}
}

/* ---------- Movimiento reducido: ocultar decorativos que quedarían estáticos ---------- */
@media (prefers-reduced-motion:reduce){
  .fiber-beam{display:none}
  .fiber-node{display:none}   /* oculta punto + anillo: sin nodos en movimiento reducido */
  /* el contenido queda visible: *{animation:none} + sin opacity:0 estático */
}