/* ============================================================
   AIXR · HERO DINÁMICO — slides con crossfade + controles
   Reutiliza los estilos existentes de .kicker / .hero h1 / .sub / .eqn.
   ============================================================ */

#heroDyn{position:relative}

/* ---- capas de fondo (crossfade entre slides) ---- */
.hero-media .hlayer{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease-out,cubic-bezier(.2,.7,.3,1));z-index:0}
.hero-media .hlayer.on{opacity:1}
.hero-media .hlayer video,.hero-media .hlayer img{width:100%;height:100%;object-fit:cover}
/* el overlay y la opacidad de video del hero-feature ya viven en styles.css */

/* ---- fondo a sangre completa: full-bleed, sube tras el nav y bordes difuminados ----
   Solo aplica al hero dinámico del inicio (data-dynamic); no afecta otras páginas.
   #heroDyn pasa a static para que el fondo se ancle al <header>, no al texto:
   así sube hasta el tope (detrás del nav, que tiene blur → vidrio esmerilado). */
.hero[data-dynamic]{overflow:visible}
.hero[data-dynamic] #heroDyn{position:static}
/* el contenido (stage/controles) queda sobre el fondo por su z-index natural (media va en -2) */
.hero[data-dynamic] .hero-stage,.hero[data-dynamic] .hero-ctrl{position:relative;z-index:2}
.hero[data-dynamic] .hero-media{
  left:50%;width:100vw;right:auto;transform:translateX(-50%);
  top:calc(-1 * var(--navh,84px));bottom:auto;height:clamp(520px,78vh,880px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
                     linear-gradient(to bottom,transparent,#000 24%,#000 70%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
             linear-gradient(to bottom,transparent,#000 24%,#000 70%,transparent);
  mask-composite:intersect;
}
/* en móvil el ancho ya es casi el del viewport: quita el difuminado lateral, conserva arriba/abajo */
@media(max-width:880px){
  .hero[data-dynamic] .hero-media{
    height:clamp(460px,72vh,760px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 74%,transparent);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 74%,transparent);
    mask-composite:add;
  }
}

/* ---- video más visible: más opacidad + capa oscura más ligera (solo home dinámico) ----
   El texto sigue legible por la capa de gradiente y un leve text-shadow. */
.hero[data-dynamic] .hero-media.hero-feature video,
.hero[data-dynamic] .hero-media.hero-feature img{opacity:.72}
.hero[data-dynamic] .hero-media.hero-feature::after{
  background:linear-gradient(180deg,rgba(10,7,16,.18) 0%,rgba(10,7,16,.42) 52%,var(--black) 100%)}
@media(max-width:880px){
  .hero[data-dynamic] .hero-media.hero-feature video,
  .hero[data-dynamic] .hero-media.hero-feature img{opacity:.55}
}
.hero[data-dynamic] .hero-stage h1{text-shadow:0 2px 24px rgba(10,7,16,.45)}
.hero[data-dynamic] .hero-stage .sub{text-shadow:0 1px 14px rgba(10,7,16,.55)}

/* ---- escenario de texto: estabiliza altura para evitar saltos al cambiar ---- */
.hero-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  min-height:clamp(230px,33vh,330px);justify-content:flex-start}
.hero-stage .kicker{margin-bottom:24px}
.hero-stage h1{margin:0 auto}
.hero-stage .sub{margin:26px auto 0}
.hero-stage .eqn{margin-top:30px}

/* ---- controles: flechas + puntos con barra de progreso ---- */
.hero-ctrl{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.hero-arrow{width:34px;height:40px;border:0;background:none;color:var(--ink-mute);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.25s var(--ease-out,ease)}
.hero-arrow:hover{color:#fff;transform:scale(1.15)}
.hero-arrow:active{transform:scale(1)}

.hero-dots{display:flex;align-items:center;gap:9px}
.hero-dot{width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.22);position:relative;overflow:hidden;transition:width .4s var(--ease-out,ease),background .3s}
.hero-dot:hover{background:rgba(255,255,255,.4)}
.hero-dot.on{width:38px;background:rgba(255,255,255,.16)}
.hero-dot span{position:absolute;inset:0;border-radius:inherit;opacity:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(95deg,var(--magenta),var(--xr))}
.hero-dot.on span{opacity:1;animation:heroFill var(--dur,6500ms) linear forwards}
.hero-paused .hero-dot.on span{animation-play-state:paused}
@keyframes heroFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:560px){
  .hero-ctrl{gap:12px;margin-top:26px}
  .hero-arrow{width:36px;height:36px}
}

/* ---- accesibilidad: sin movimiento, sin barra animada ni autoplay ---- */
@media(prefers-reduced-motion:reduce){
  .hero-media .hlayer{transition:none}
  .hero-dot.on span{animation:none;transform:scaleX(1)}
}