/* A13 Content · Home: hero con tres monitores, animación de scroll y slider de clientes */

/* ===== Hero: monitores sobre suelo reflectante (texto a la izquierda, escena a la derecha) ===== */
/* Móvil y tablet (<56rem): el texto arranca justo debajo de los monitores. 49vw es la altura aproximada de la escena, que escala con el ancho de pantalla;
   1.5rem es el hueco que se deja. En escritorio (>=56rem) align-items y padding se redefinen más abajo, así que no le afecta. */
.hero{position:relative;display:flex;align-items:flex-start;min-height:calc(100svh - 4rem);padding:calc(49vw + 1.5rem) 0 3.5rem;overflow:clip;isolation:isolate}
@media(max-width:55.99rem){.hero{min-height:0}}
.hero__bg{position:absolute;inset:-10%;z-index:-4;background:radial-gradient(48% 42% at 78% 30%,rgba(22,217,214,.28),transparent 70%),radial-gradient(52% 46% at 8% 92%,rgba(255,90,0,.28),transparent 72%),radial-gradient(60% 50% at 50% 40%,#12384d,transparent 80%),var(--ink-950)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Escena: tres monitores. Delante el principal (con el vídeo); detrás, dos con textura */
.stage{position:absolute;z-index:0;top:.25rem;left:50%;translate:-50% 0;width:118vw;aspect-ratio:16/9.6;perspective:1400px}
.mon{position:absolute;aspect-ratio:16/9;border:clamp(4px,.8vw,11px) solid #04111a;border-radius:var(--r);background:#04111a;box-shadow:0 0 0 1px rgba(242,241,236,.16),0 0 90px -12px rgba(22,217,214,.3),0 30px 60px -24px rgba(0,0,0,.8);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mon--main{z-index:3;left:20%;top:12%;width:58%;box-shadow:0 0 0 1px rgba(242,241,236,.2),0 0 120px -10px rgba(22,217,214,.4),0 40px 70px -26px rgba(0,0,0,.85);transform:rotateY(-9deg) translateZ(80px)}
.mon--l{z-index:1;left:0;top:14%;width:42%;aspect-ratio:4/3;transform:rotateY(24deg) translateZ(-60px);transform-origin:0 50%}
.mon--r{z-index:1;left:70%;top:15%;width:42%;aspect-ratio:4/3;transform:rotateY(-24deg) translateZ(-60px);transform-origin:100% 50%}
.mon--l,.mon--r{border:0;background:none;box-shadow:0 0 0 1px rgba(242,241,236,.1),0 30px 60px -26px rgba(0,0,0,.8)}
.mon--l .scr,.mon--r .scr{border-radius:var(--r)}
.scr{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:2px;background:#061a25}
.scr img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
/* Capa azul oscura + líneas de escaneo en las tres pantallas */
.scr::after{content:"";position:absolute;z-index:2;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),linear-gradient(rgba(10,32,45,.28),rgba(10,32,45,.28))}

/* Pantalla principal: foto fija y, encima, el vídeo cuando esté disponible */
.screen--main::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),linear-gradient(rgba(10,32,45,.14),rgba(10,32,45,.14))}
.screen--main video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.screen--main.is-playing video{opacity:1}

/* Visor y cintas en CSS: opcionales. Se activan con data-hud="on" en .screen--main si el vídeo final NO trae su propio REC y cintas */
.screen--main[data-hud="on"].is-playing .vf,.screen--main[data-hud="on"].is-playing .tape{opacity:1}
.tape{position:absolute;z-index:5;pointer-events:none;height:clamp(.5rem,1.5vw,1.3rem);background:rgba(242,241,236,.24);border:1px solid rgba(242,241,236,.2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .8s ease}
.tape--1{top:5%;right:0;width:26%}
.tape--2{top:12%;right:0;width:13%;background:var(--orange);border-color:transparent}
.tape--3{bottom:14%;left:0;width:20%;background:var(--orange);border-color:transparent}
.tape--4{bottom:5%;right:0;width:15%}

/* Lista de canales sobre el monitor derecho */
.chan{position:absolute;z-index:3;right:7%;bottom:12%;display:grid;gap:.5em;margin:0;font-size:clamp(.5rem,.95vw,.8rem);font-weight:600;text-align:right;color:var(--warm)}
.chan::before{content:"";justify-self:end;margin-bottom:.8em;border-style:solid;border-width:.55em 0 .55em .95em;border-color:transparent transparent transparent var(--warm)}

/* Capa azul oscura (overlight): protege la lectura del H1 */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(6,23,33,.97) 0,rgba(6,23,33,.9) 40%,rgba(6,23,33,.45) 58%,rgba(6,23,33,.1) 78%),rgba(10,32,45,.18)}

/* Botón de pausa del vídeo */

/* Texto */
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.2rem,8.6vw,3.8rem);max-width:16ch}
.hero .lead{margin-top:0;max-width:50ch}
/* Escritorio estrecho (<80rem): la bajada no pasa por debajo del monitor principal */
@media(min-width:56rem) and (max-width:79.99rem){.hero .lead{max-width:min(50ch,calc(52.5vw - 3.5rem))}}
@media(max-width:47.99rem){.hero .cta{order:3;width:100%;flex-direction:column;align-items:stretch;justify-content:center}.hero .cta .btn{width:100%;text-align:center}.hero .lead{order:4}}
@media(min-width:56rem){
  .hero{align-items:center;padding:5rem 0}
  .hero h1{font-size:clamp(2.6rem,4.4vw,3.8rem)}
  .stage{left:auto;right:-5%;top:50%;translate:0 -37%;width:min(64vw,62rem);aspect-ratio:16/10}
  .vpause{top:auto;bottom:1.5rem;right:1.5rem}
  .hero__veil{background:linear-gradient(90deg,rgba(6,23,33,.94) 0,rgba(6,23,33,.88) 28%,rgba(6,23,33,.5) 42%,rgba(6,23,33,0) 58%),linear-gradient(to top,rgba(6,23,33,.85),transparent 30%),rgba(10,32,45,.1)}
}



/* Scroll: los monitores se acercan a distinta velocidad; el principal, en primer plano, se mueve más */
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.hero__bg{animation:bg linear both;animation-timeline:scroll(root);animation-range:0 100vh}
.mon--main{animation:main linear both;animation-timeline:scroll(root);animation-range:0 100vh}
.mon--l{animation:monL linear both;animation-timeline:scroll(root);animation-range:0 100vh}
.mon--r{animation:monR linear both;animation-timeline:scroll(root);animation-range:0 100vh}
.hero__copy{animation:out linear both;animation-timeline:scroll(root);animation-range:38vh 95vh}
}}
@keyframes bg{to{transform:scale(1.25) translateY(-6%)}}
@keyframes main{from{transform:rotateY(-9deg) translateZ(80px)}to{transform:rotateY(-3deg) translate3d(-2vw,-5vh,240px) scale(1.06)}}
@keyframes monL{from{transform:rotateY(24deg) translateZ(-60px)}to{transform:rotateY(14deg) translate3d(-4vw,-3vh,-20px)}}
@keyframes monR{from{transform:rotateY(-24deg) translateZ(-60px)}to{transform:rotateY(-14deg) translate3d(4vw,-6vh,-20px)}}
@keyframes out{to{opacity:0;transform:translateY(-9vh)}}

/* ===== Clientes ===== */
.mq{margin-top:3rem;overflow:hidden;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq:hover .mq__track,.mq.is-paused .mq__track{animation-play-state:paused}
.mq__g{display:flex;flex:none}
.mq__g li{display:grid;place-items:center;min-height:6rem;padding:0 clamp(2rem,5vw,4rem)}
.mq__g img{display:block;width:auto;height:calc(var(--h)*.8);max-width:none;opacity:.72;transition:opacity .2s}
@media(min-width:48rem){.mq__g img{height:var(--h)}}
.mq__g li:hover img{opacity:1}
.mq__pause{display:block;margin:.9rem 0 0 auto;padding:.3rem 0;border:0;background:none;color:var(--mute);font:500 .82rem/1.2 var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mq__pause:hover{color:var(--teal)}
@keyframes mq{to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.mq{-webkit-mask-image:none;mask-image:none;overflow-x:auto}.mq__track{animation:none}.mq__g[aria-hidden]{display:none}.mq__pause{display:none}}