/* ============================ 02 · HERO ============================ */
#inicio.hr{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(112px,14vh,150px) 0 clamp(64px,9vh,110px);overflow-x:clip;isolation:isolate}
/* luz de estudio detrás de la laptop, muy tenue */
#inicio.hr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 42% at 74% 48%,rgba(46,123,255,.30),transparent 70%),radial-gradient(70% 60% at 78% 60%,rgba(11,46,107,.55),transparent 75%),linear-gradient(180deg,transparent 70%,var(--void))}
#inicio .hr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:center}

/* ---------- texto ---------- */
#inicio h1{font-size:clamp(2.2rem,4.9vw,4.1rem);line-height:1.02;margin-top:22px;max-width:15ch}
/* un solo azul para las palabras destacadas del titular (identidad consistente) */
#inicio .hr-gris{color:var(--azul-titular)}
#inicio .hr-sub{font-size:clamp(1rem,1.3vw,1.14rem);color:var(--mist);margin-top:24px;max-width:46ch;line-height:1.7}
#inicio .hr-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
#inicio .hr-datos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-size:.84rem;color:var(--mist-2)}
#inicio .hr-datos li{position:relative;line-height:1.4}
#inicio .hr-datos li + li::before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--mist-2);transform:translateY(-50%)}
#inicio .hr-datos b{color:var(--silver);font-weight:500}

/* ---------- secuencia por pasos (02-hero.js agrega .p2 … .p6 a #inicio) ---------- */
.js #inicio .hr-paso{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js #inicio.p2 [data-paso="2"],.js #inicio.p3 [data-paso="3"],.js #inicio.p4 [data-paso="4"],.js #inicio.p5 [data-paso="5"]{opacity:1;transform:none}
/* el titular entra renglón por renglón */
#inicio h1 .hr-linea{display:block}
.js #inicio h1.hr-paso{opacity:1;transform:none}
.js #inicio h1 .hr-linea{opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js #inicio.p3 h1 .hr-linea{opacity:1;transform:none;filter:none}
.js #inicio.p3 h1 .hr-linea + .hr-linea{transition-delay:.16s}
/* sin intro (visita repetida, movimiento reducido o equipo lento): todo aparece ya */
#inicio.sin-intro .hr-paso,#inicio.sin-intro h1 .hr-linea{transition-duration:.5s!important;transition-delay:0s!important}

/* marca sobre el titular */
#inicio .hr-marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#inicio .hr-marca .logo-argo{--logo:19px}
#inicio .hr-marca-txt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);padding-left:14px;border-left:1px solid var(--line-2);line-height:1.5}

/* ---------- escena 3D ---------- */
#inicio .hr-escena{position:relative;perspective:2200px;perspective-origin:50% 30%}
/* luz de estudio azul detrás del equipo */
#inicio .hr-escena::before{content:"";position:absolute;left:50%;top:44%;width:86%;height:64%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(46,123,255,.45),rgba(19,72,184,.18) 45%,transparent 72%);filter:blur(28px);
  opacity:calc(1 - var(--sy,0) * .35)}
.js #inicio .hr-escena{opacity:0;visibility:hidden}
.js #inicio.p6 .hr-escena{visibility:visible;animation:hr-aparece 1.2s var(--ease) .1s forwards}
@keyframes hr-aparece{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
/* parallax de scroll */
#inicio .hr-flota{transform:translate3d(0,calc(var(--sy,0) * -48px),0);will-change:transform}
/* inclinación: base + cursor + scroll. Lento a propósito. */
#inicio .hr-laptop{position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(9deg - var(--sy,0) * 7deg + var(--my,0) * -4deg)) rotateY(calc(-15deg + var(--mx,0) * 7deg)) rotateZ(.6deg);
  transition:transform 1.4s cubic-bezier(.16,.84,.24,1)}

/* tapa (se abre al cargar) */
#inicio .hr-tapa{position:relative;padding:1.6%;border-radius:2.2% 2.2% .6% .6% / 3.4% 3.4% .9% .9%;transform-origin:50% 100%;
  background:linear-gradient(165deg,#2A2D33 0%,#131519 38%,#0A0B0D 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.16),0 2px 0 -1px #000}
.js #inicio .hr-tapa{transform:rotateX(-62deg)}
.js #inicio.p6 .hr-tapa{animation:hr-abre 1.1s cubic-bezier(.2,.75,.2,1) 0s both}
@keyframes hr-abre{from{transform:rotateX(-62deg)}to{transform:rotateX(0)}}
#inicio .hr-camara{position:absolute;top:.62%;left:50%;width:.7%;aspect-ratio:1;border-radius:50%;background:#1E2126;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transform:translateX(-50%)}
#inicio .hr-pant{position:relative;aspect-ratio:16/10;border-radius:.5%;overflow:hidden;background:#07080A;container-type:inline-size;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9)}
/* reflejo del cristal: se desplaza con el cursor y el scroll */
#inicio .hr-reflejo{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.085) 40%,rgba(255,255,255,.025) 50%,transparent 62%);
  background-size:260% 100%;background-position:calc(30% + var(--mx,0) * 30% + var(--sy,0) * 60%) 0;
  transition:background-position 1.4s cubic-bezier(.16,.84,.24,1)}
#inicio .hr-pant::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%)}

/* base de aluminio */
#inicio .hr-base{position:relative;height:0;padding-bottom:3.1%;margin:0 -7.5%;border-radius:0 0 18px 18px / 0 0 60% 60%;
  background:linear-gradient(180deg,#4A4E56 0%,#2A2D33 22%,#16181C 60%,#0A0B0D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 50px -26px rgba(0,0,0,.95)}
#inicio .hr-muesca{position:absolute;top:0;left:50%;width:15%;height:38%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#15171B,#24272D)}
/* sombra de contacto sobre el piso */
#inicio .hr-piso{height:46px;margin:-14px 2% 0;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.92),transparent 72%),radial-gradient(60% 80% at 50% 0%,rgba(46,123,255,.35),transparent 70%);filter:blur(7px);
  transform:scaleX(calc(1 - var(--sy,0) * .06));opacity:calc(1 - var(--sy,0) * .4)}
#inicio .hr-leyenda{margin-top:6px;text-align:center;font-size:.76rem;letter-spacing:.06em;color:var(--mist-2);min-height:1.4em;transition:opacity .5s var(--ease)}
#inicio .hr-leyenda b{color:var(--silver);font-weight:500}
#inicio .hr-leyenda.cambia{opacity:0}

/* ---------- sitio dentro de la pantalla ---------- */
#inicio .hr-sitio{position:absolute;inset:0;display:flex;flex-direction:column;font-size:1.55cqw;background:var(--mf);color:var(--mt);opacity:0;transition:opacity .8s var(--ease)}
#inicio .hr-sitio.on{opacity:1;z-index:2}
#inicio .hr-url{flex:none;display:flex;align-items:center;gap:.5em;padding:.62em 1em;background:rgba(0,0,0,.72);color:#9aa1ab}
#inicio .hr-url i{width:.62em;height:.62em;border-radius:50%;background:rgba(255,255,255,.18)}
#inicio .hr-url span{margin-left:.8em;flex:1;max-width:48%;padding:.28em .9em;border-radius:.5em;background:rgba(255,255,255,.07);font-size:.78em;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inicio .hr-vista{position:relative;flex:1;overflow:hidden}
#inicio .hr-pagina{position:absolute;left:0;right:0;top:0}
#inicio .hr-sitio.on .hr-pagina{animation:hr-baja 13s cubic-bezier(.45,0,.2,1) .9s infinite alternate}
@keyframes hr-baja{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(-44%)}}

#inicio .hp-nav{display:flex;align-items:center;gap:1.4em;padding:1.1em 2em}
#inicio .hp-nav b{font-family:var(--display);font-weight:700;font-size:1.05em;color:var(--ma);letter-spacing:.02em;margin-right:auto;white-space:nowrap}
#inicio .hp-nav s{width:3em;height:.34em;border-radius:.2em;background:currentColor;opacity:.28}
#inicio .hp-nav em{font-style:normal;font-size:.72em;font-weight:600;padding:.5em 1.1em;border-radius:2em;background:var(--ma);color:var(--mf)}
#inicio .hp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2em;align-items:center;padding:1.6em 2em 2.4em}
#inicio .hp-hero small{display:block;font-size:.6em;letter-spacing:.24em;text-transform:uppercase;color:var(--ma);font-weight:600}
#inicio .hp-hero h4{font-family:var(--display);font-size:2.55em;line-height:1.02;letter-spacing:-.035em;color:inherit;margin-top:.45em;font-weight:700}
#inicio .hp-lin{display:block;height:.36em;border-radius:.2em;background:currentColor;opacity:.2;margin-top:.8em}
#inicio .hp-btns{display:flex;gap:.6em;margin-top:1.6em}
#inicio .hp-btns i{display:block;width:6.4em;height:2em;border-radius:2em;background:var(--ma)}
#inicio .hp-btns i + i{background:transparent;box-shadow:inset 0 0 0 1px currentColor;opacity:.4}
#inicio .hp-foto{aspect-ratio:4/4.6;border-radius:1em;overflow:hidden;background:rgba(127,127,127,.2);box-shadow:0 1.6em 3em -1.6em rgba(0,0,0,.55)}
#inicio .hp-foto img{width:100%;height:100%;object-fit:cover}
#inicio .hp-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;padding:0 2em 2.2em}
#inicio .hp-cifras div{padding:1.2em;border-radius:.9em;background:color-mix(in srgb,var(--mt) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mt) 10%,transparent)}
#inicio .hp-cifras i{display:block;width:1.8em;height:1.8em;border-radius:.5em;background:var(--ma);opacity:.9}
#inicio .hp-cifras u{display:block;height:.34em;width:80%;border-radius:.2em;background:currentColor;opacity:.22;margin-top:1em;text-decoration:none}
#inicio .hp-cifras u + u{width:55%;margin-top:.55em}
#inicio .hp-banda{margin:0 2em 2em;height:13em;border-radius:1em;overflow:hidden;position:relative}
#inicio .hp-banda img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:saturate(.9)}
#inicio .hp-banda::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 70%)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  #inicio.hr{min-height:0;padding-top:118px}
  #inicio .hr-grid{grid-template-columns:1fr;gap:40px}
  #inicio .hr-escenario{order:-1}
  #inicio h1{max-width:18ch}
  #inicio .hr-escena{width:min(100%,640px);margin-inline:auto}
  #inicio .hr-laptop{transform:rotateX(calc(12deg - var(--sy,0) * 10deg)) rotateY(0deg)}
  #inicio .hr-base{margin:0 -5%}
}
@media (max-width:560px){
  #inicio.hr{padding-top:104px;padding-bottom:56px}
  #inicio h1{font-size:clamp(2.05rem,9.4vw,2.5rem);margin-top:18px}
  #inicio .hr-sub{margin-top:18px;font-size:1rem}
  #inicio .hr-cta{margin-top:28px;flex-direction:column}
  #inicio .hr-cta .btn{width:100%}
  #inicio .hr-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  #inicio .hr-datos li{padding:12px 8px;text-align:center;font-size:.72rem;line-height:1.35}
  #inicio .hr-datos li + li{border-left:1px solid var(--line)}
  #inicio .hr-datos li + li::before{display:none}
  #inicio .hr-datos b{display:block;font-size:.84rem}
  #inicio .hr-grid{gap:30px}
  #inicio .hr-escena{padding-inline:3%}
  #inicio .hr-sitio{font-size:1.75cqw}
  #inicio .hr-piso{height:30px;margin-top:-8px}
}
/* (movimiento reducido: desactivado a pedido del dueño) */

/* ================= v9 · fondo, escenario e intro del logotipo ================= */
/* fondo: rejilla en perspectiva muy tenue + luz, con parallax de scroll */
#inicio .hr-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--void)}
/* ola de partículas dibujada en canvas (02-fondo.js): siempre en movimiento,
   sin depender de que el navegador pueda reproducir video */
#inicio .hr-lienzo{position:absolute;inset:0;width:100%;height:100%;opacity:1;pointer-events:none}
#inicio .hr-fondo::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(4,7,14,.88),rgba(4,7,14,.3) 42%,transparent 62%),radial-gradient(85% 70% at 62% 45%,transparent,rgba(4,7,14,.25) 72%,rgba(4,7,14,.8)),linear-gradient(180deg,rgba(4,7,14,.35),transparent 30%,rgba(4,7,14,.82))}
#inicio .hr-rejilla{position:absolute;left:-10%;right:-10%;bottom:-10%;height:70%;
  background-image:linear-gradient(rgba(120,165,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,165,255,.07) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(600px) rotateX(58deg) translateY(calc(var(--sy,0) * 60px));transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 100%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 80% at 50% 100%,#000 20%,transparent 75%);
  animation:hr-rejilla 24s linear infinite}
@keyframes hr-rejilla{to{background-position:0 64px,0 0}}
#inicio .hr-escenario{position:relative;display:grid}
#inicio .hr-marca .logo-hero{--logo-h:44px}
@media (max-width:980px){ #inicio .hr-marca-txt{display:none} }
/* (movimiento reducido: desactivado a pedido del dueño) */

/* ---------- INTRO (#ai-splash, vive al inicio del body) ----------
   Línea de tiempo en CSS desde que carga la página (no depende de que llegue el JS):
   0.2 s luz · 0.8 s se traza el chevron · 1.0 s se dibujan R, G, O · 1.7 s se llena de azul + destello
   · 1.9 s WEBSITES se cierra · 2.3 s barrido de luz, reflejo y lema · ~3.3 s el JS lo lleva al menú. */
.ai-splash{position:fixed!important;inset:0;z-index:1000!important;display:grid;place-items:center;overflow:hidden;pointer-events:auto;cursor:pointer;
  animation:ai-respaldo .7s var(--ease) 6s forwards}
html:not(.js) .ai-splash,.sin-splash .ai-splash,.ai-splash[hidden]{display:none!important}
@keyframes ai-respaldo{to{opacity:0;visibility:hidden}}
.ai-fondo{position:absolute;inset:0;background:#02040A;transition:opacity 1s var(--ease)}
.ai-aura{position:absolute;left:50%;top:48%;width:min(120vw,1200px);aspect-ratio:1.6;transform:translate(-50%,-50%) scale(.6);border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(46,123,255,.34),rgba(19,72,184,.14) 55%,transparent);animation:ai-aura 2.6s var(--ease) .2s forwards}
@keyframes ai-aura{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ai-rejilla{position:absolute;left:-20%;right:-20%;bottom:-6%;height:52%;opacity:0;
  background-image:linear-gradient(rgba(120,165,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,165,255,.10) 1px,transparent 1px);background-size:70px 70px;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(60% 90% at 50% 100%,#000 10%,transparent 72%);mask-image:radial-gradient(60% 90% at 50% 100%,#000 10%,transparent 72%);
  animation:ai-aparece 1.6s var(--ease) .4s forwards,hr-rejilla 14s linear infinite}
@keyframes ai-aparece{to{opacity:1}}
.ai-particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.ai-centro{position:relative;display:flex;flex-direction:column;align-items:center;width:min(76vw,620px);transition:opacity .8s var(--ease)}
.ai-logo{position:relative;width:100%;transform-origin:50% 50%;will-change:transform}
.ai-svg{display:block;width:100%;height:auto;overflow:visible;position:relative;z-index:1}
.ai-destello{position:absolute;left:12%;top:36%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(230,246,255,.95),rgba(95,208,255,.55) 20%,rgba(46,123,255,.22) 45%,transparent 70%);mix-blend-mode:screen;
  animation:ai-destello 1.4s var(--ease) 1.6s forwards}
@keyframes ai-destello{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}

/* chevron: trazo de luz → relleno azul */
.ai-a-trazo{stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #5FD0FF);animation:ai-traza 1.1s cubic-bezier(.65,0,.35,1) .8s forwards,ai-apaga .8s var(--ease) 2.3s forwards}
.ai-a-relleno{opacity:0;animation:ai-llena 1s var(--ease) 1.65s forwards;filter:drop-shadow(0 0 18px rgba(46,123,255,.8))}
@keyframes ai-traza{to{stroke-dashoffset:0}}
@keyframes ai-apaga{to{opacity:0}}
@keyframes ai-llena{0%{opacity:0;filter:drop-shadow(0 0 0 rgba(46,123,255,0)) brightness(2)}60%{opacity:1;filter:drop-shadow(0 0 30px rgba(95,208,255,.95)) brightness(1.5)}100%{opacity:1;filter:drop-shadow(0 0 16px rgba(46,123,255,.55)) brightness(1)}}
/* R, G, O: se escriben con un trazo continuo */
.ai-l{stroke-dasharray:1.02 1;stroke-dashoffset:1.02;animation:ai-traza .95s cubic-bezier(.65,0,.35,1) forwards}
.ai-l1{animation-delay:1s}.ai-l2{animation-delay:1.14s}.ai-l3{animation-delay:1.28s}
.ai-rgo{filter:drop-shadow(0 0 10px rgba(160,210,255,.35))}
/* WEBSITES: entra abierto y se cierra a su medida */
.ai-web{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(1.18);letter-spacing:0;animation:ai-web 1.3s var(--ease) 1.9s forwards}
@keyframes ai-web{0%{opacity:0;transform:scaleX(1.18);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
/* barrido de luz por todo el logotipo */
.ai-brillo{transform:translateX(-80px) skewX(-18deg);animation:ai-barre 1.2s cubic-bezier(.5,0,.3,1) 2.35s forwards;opacity:.9}
@keyframes ai-barre{to{transform:translateX(620px) skewX(-18deg)}}
/* reflejo en el piso */
.ai-reflejo{position:absolute;left:0;top:100%;width:100%;height:auto;transform:scaleY(-1);transform-origin:50% 50%;margin-top:4%;opacity:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);mask-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);filter:blur(1.5px);
  animation:ai-refleja 1.4s var(--ease) 2.2s forwards}
@keyframes ai-refleja{to{opacity:.4}}
.ai-horizonte{display:block;width:100%;height:1px;margin-top:5.5%;opacity:0;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(95,208,255,.9) 50%,transparent);box-shadow:0 0 18px rgba(95,208,255,.7);animation:ai-horizonte 1.4s var(--ease) 1.9s forwards}
@keyframes ai-horizonte{to{opacity:.55;transform:none}}
.ai-lema{margin:22px 0 0;font-size:clamp(.62rem,1.3vw,.78rem);letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--mist);opacity:0;animation:ai-aparece 1s var(--ease) 2.5s forwards;text-align:center}
.ai-saltar{position:absolute;right:max(16px,calc((100vw - var(--maxw))/2));bottom:max(22px,env(safe-area-inset-bottom));min-height:44px;padding:0 18px;border-radius:999px;
  font-size:.74rem;letter-spacing:.08em;color:var(--mist);border:1px solid var(--line);background:rgba(4,7,14,.5);opacity:0;animation:ai-aparece .6s var(--ease) .9s forwards;cursor:pointer}
.ai-saltar:hover,.ai-saltar:focus-visible{color:var(--white);border-color:var(--line-2)}

/* salida: el fondo se apaga y el logotipo vuela a su lugar en el menú (el JS pone la transformación) */
.ai-splash.sale{pointer-events:none;cursor:default}
.ai-splash.sale .ai-fondo,.ai-splash.sale .ai-particulas{opacity:0}
.ai-splash.sale .ai-lema,.ai-splash.sale .ai-horizonte,.ai-splash.sale .ai-reflejo,.ai-splash.sale .ai-saltar,.ai-splash.sale .ai-aura,.ai-splash.sale .ai-rejilla{animation:none;opacity:0;transition:opacity .45s var(--ease)}
.ai-splash.sale .ai-logo{transition:transform 1.05s cubic-bezier(.7,0,.2,1),opacity .4s var(--ease) .95s}
.ai-splash.rapido .ai-centro,.ai-splash.rapido .ai-fondo{transition-duration:.4s;opacity:0}
/* mientras corre la intro el logotipo del menú espera (lo reemplaza el que vuela) */
.intro-activa #top .logo-nav{opacity:0}
#top .logo-nav{transition:opacity .35s var(--ease)}
@media (max-width:560px){ .ai-centro{width:84vw} .ai-lema{letter-spacing:.28em;margin-right:-.28em} }

/* respaldo sin JS a tiempo: a los 6.4 s todo el hero queda visible (la secuencia normal termina antes) */
.js #inicio:not(.p6) .hr-paso,.js #inicio:not(.p6) h1 .hr-linea{animation:hr-respaldo .8s var(--ease) 6.4s forwards}
.js #inicio:not(.p6) .hr-escena{animation:hr-respaldo .8s var(--ease) 6.6s forwards}
.js #inicio:not(.p6) .hr-tapa{animation:hr-respaldo-tapa 1.2s var(--ease) 6.6s forwards}
@keyframes hr-respaldo{to{opacity:1;transform:none;filter:none;visibility:visible}}
@keyframes hr-respaldo-tapa{to{transform:none}}

/* showreel en la pantalla: completo (contain) sobre el negro del propio video */
#inicio .hr-pant{position:relative}
#inicio .hr-showreel{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0c0b10;z-index:5;border-radius:inherit}
#inicio .hr-reflejo{z-index:6}
#inicio .hr-leyenda{visibility:hidden}

/* ---- entrada estilo "masked line rise" (v22) ---- */
#inicio{--e-reveal:cubic-bezier(.16,1,.3,1);--e-soft:cubic-bezier(.25,.8,.3,1)}
#inicio h1 .hr-ln-i{display:block}
@media (prefers-reduced-motion:no-preference){
  .js #inicio h1 .hr-linea{overflow:hidden;padding-top:.14em;margin-top:-.14em;padding-bottom:.08em;margin-bottom:-.08em;opacity:1;filter:none;transform:none;transition:none}
  .js #inicio h1 .hr-ln-i{transform:translateY(110%);transition:transform 1.05s var(--e-reveal)}
  .js #inicio.p3 h1 .hr-ln-i{transform:none}
  .js #inicio.p3 h1 .hr-linea + .hr-linea .hr-ln-i{transition-delay:.1s}
  .js #inicio .hr-sub{filter:blur(4px);transition:opacity .85s var(--e-reveal),transform .85s var(--e-reveal),filter .85s var(--e-reveal)}
  .js #inicio.p4 .hr-sub{filter:blur(0)}
  .js #inicio .hr-cta .btn{opacity:0;transform:translateY(8px) scale(.972);transition:opacity .7s var(--e-reveal),transform .7s var(--e-reveal)}
  .js #inicio.p5 .hr-cta .btn{opacity:1;transform:none}
  .js #inicio.p5 .hr-cta .btn + .btn{transition-delay:.07s}
  .js #inicio:not(.p6) h1 .hr-ln-i{animation:hr-respaldo-linea .8s var(--e-reveal) 6.4s forwards}
}
@keyframes hr-respaldo-linea{to{transform:none}}
@media (max-width:552px){.js #inicio h1 .hr-ln-i{transition-duration:.92s}}