/* Rod Streams · estilos de la landing
   Layout: "lo que ves y lo que no ves". Abre con la transmisión tal como sale al aire (video real con gráficas de TV).
   Al bajar, la imagen al aire se achica hasta ser el monitor PGM de la sala de control y aparece todo lo de atrás.
   Después, el recorrido de la señal en cuatro paradas con fotos y video a pantalla completa y parallax,
   una pared de monitores con lo que cubrimos y el contacto. Oscura a propósito: es el mundo de la sala de control. */
:root{
  --negro:#05070B; --panel:#0B1018; --tinta:#F7F4F0; --gris:rgba(247,244,240,.72); --tenue:rgba(247,244,240,.46); --linea:rgba(247,244,240,.16);
  --naranja:#FF6A13; --naranja-hi:#FF9A3D; --azul:#2E6FB7; --azul-osc:#16365C; --rojo:#FF2D3A; --verde:#2BD47D;
  --display:"Archivo","Arial Black",Impact,sans-serif; --texto:"Barlow",system-ui,sans-serif; --datos:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--negro)}
body{background:var(--negro);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.5;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--negro)}
h1,h2,h3,p{margin:0}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--naranja-hi);outline-offset:3px}

/* Accesibilidad */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--naranja);color:#05070A;font:700 15px/1 var(--texto);text-decoration:none;transition:top .2s}
.saltar:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dato{font:600 12px/1.2 var(--datos);letter-spacing:.2em;text-transform:uppercase}
.naranja{color:var(--naranja)}

/* Cabecera */
.cabecera{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.cabecera > *{pointer-events:auto}
.marca{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:999px;background:rgba(5,7,11,.6);border:1px solid var(--linea);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none}
.marca svg{width:30px;height:30px}
.marca b{white-space:nowrap;font:900 13px/1 var(--display);font-stretch:125%;letter-spacing:.06em}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;background:linear-gradient(135deg,var(--naranja-hi),var(--naranja));color:#05070A;font:700 15px/1 var(--texto);text-decoration:none;border:0;cursor:pointer;transition:box-shadow .3s,transform .3s}
.boton:hover{box-shadow:0 0 0 7px rgba(255,106,19,.16),0 0 36px rgba(255,106,19,.5);transform:translateY(-2px)}
.boton svg{width:18px;height:18px;flex:none}
.boton.linea{background:rgba(5,7,11,.45);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea)}
.boton.linea:hover{box-shadow:inset 0 0 0 1px var(--tinta)}
.boton.chico{padding:11px 16px;font-size:14px}
.cabecera .lado{display:flex;align-items:center;gap:8px}
.pausa{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--linea);background:rgba(5,7,11,.6);color:var(--tinta);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pausa:hover{border-color:var(--tinta)}
.pausa svg{width:16px;height:16px}
.pausa .ico-play{display:none}
.pausa[aria-pressed="true"] .ico-play{display:block}
.pausa[aria-pressed="true"] .ico-pausa{display:none}

/* Hero: al aire */
.aire{position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.aire video,.aire .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.aire::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,0) 26%,rgba(5,7,11,.05) 50%,rgba(5,7,11,.92) 100%)}
.graficas{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.vivo{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;background:var(--rojo);color:#fff;font:700 12px/1 var(--datos);letter-spacing:.16em;border-radius:3px}
.vivo i{width:8px;height:8px;border-radius:50%;background:#fff;animation:titila 1.2s steps(2,end) infinite}
@keyframes titila{50%{opacity:0}}
.tc{display:inline-flex;gap:10px;align-items:center;padding:7px 11px;background:rgba(5,7,11,.62);border:1px solid var(--linea);font:600 12px/1 var(--datos);letter-spacing:.08em;font-variant-numeric:tabular-nums;border-radius:3px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tc span{color:var(--tenue)}
.aire-contenido > *{min-width:0}
.aire-contenido{display:grid;gap:22px;padding-block:0 clamp(28px,6vh,64px);max-width:1180px;width:100%;margin:0 auto}
.zocalo{display:flex;justify-self:start;align-items:stretch;max-width:100%;font:700 13px/1 var(--datos);letter-spacing:.14em;text-transform:uppercase}
.zocalo b{white-space:nowrap;background:var(--naranja);color:#05070A;padding:9px 12px;font-weight:700}
.zocalo span{background:rgba(247,244,240,.94);color:#05070A;padding:9px 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aire h1{font:900 clamp(52px,10.5vw,148px)/.86 var(--display);font-stretch:112%;letter-spacing:-.025em;text-transform:uppercase}
.aire h1 em{font-style:italic;color:var(--naranja)}
.aire p.bajada{max-width:600px;font-size:clamp(17px,1.6vw,20px);color:var(--gris)}
.aire .acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.flecha{display:inline-flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;font:600 13px/1 var(--datos);letter-spacing:.14em;text-transform:uppercase;padding:12px 4px}
.flecha svg{width:16px;height:16px;animation:baja 1.8s ease-in-out infinite}
@keyframes baja{50%{transform:translateY(5px)}}

/* El corte: lo que no ves */
.corte{position:relative;height:260vh}
.corte-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.detras{position:absolute;inset:-6% 0;z-index:-2}
.detras img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.62)}
.corte-pin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,7,11,.9) 0%,rgba(5,7,11,.35) 55%,rgba(5,7,11,.15) 100%)}
.pgm{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:#000;outline:0 solid var(--rojo);overflow:hidden}
.pgm video,.pgm img{width:100%;height:100%;object-fit:cover}
.pgm .etiqueta{position:absolute;left:0;bottom:0;background:var(--rojo);color:#fff;padding:6px 10px;font:700 12px/1 var(--datos);letter-spacing:.12em;opacity:var(--et,0)}
.corte-texto{position:absolute;left:0;right:0;bottom:0;padding-block:0 clamp(32px,8vh,90px);z-index:2}
.corte-texto .caja{max-width:1180px;margin:0 auto;display:grid;gap:18px}
.corte-texto h2{font:900 clamp(44px,8vw,112px)/.88 var(--display);font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase;max-width:9ch}
.corte-texto p{max-width:520px;color:var(--gris);font-size:clamp(17px,1.5vw,19px)}
.corte-texto .anim{opacity:var(--txt,1);transform:translateY(calc((1 - var(--txt,1)) * 30px))}

/* Recorrido de la señal */
.recorrido{position:relative}
.cadena{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:20;height:0}
.cadena ol{list-style:none;margin:0 auto;padding:9px 12px;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);background:rgba(5,7,11,.7);border:1px solid var(--linea);border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.cadena li{display:flex;align-items:center;gap:6px;font:600 11px/1 var(--datos);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;transition:color .3s}
.cadena li + li::before{content:"";width:18px;height:1px;background:var(--linea);transition:background .3s}
.cadena li.hecho,.cadena li.activo{color:var(--tinta)}
.cadena li.hecho + li::before,.cadena li.activo::before{background:var(--naranja)}
.cadena li.activo b{color:var(--naranja)}
.cadena li b{font-weight:700}
.parada{position:relative;min-height:112svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-block:140px clamp(40px,9vh,100px)}
.parada .fondo{position:absolute;left:0;right:0;top:-12%;height:124%;z-index:-2;will-change:transform}
.parada .fondo > *{width:100%;height:100%;object-fit:cover}
.parada::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,7,11,1) 0%,rgba(5,7,11,.15) 22%,rgba(5,7,11,.2) 55%,rgba(5,7,11,.94) 100%)}
.parada .caja{max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:end}
.parada .num{font:900 clamp(15px,1.3vw,17px)/1 var(--datos);color:var(--naranja);letter-spacing:.18em}
.parada .h-parada{font:900 clamp(46px,7.6vw,108px)/.88 var(--display);font-stretch:108%;letter-spacing:-.02em;text-transform:uppercase;margin-top:14px}
.parada .h-parada small{display:block;font:italic 800 clamp(20px,2.4vw,32px)/1.1 var(--display);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--naranja-hi);margin-top:12px}
.parada p{color:var(--gris);max-width:520px;margin-top:18px}
.ficha{display:grid;gap:12px;align-self:end}
.ficha .ventana{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:4px;overflow:hidden;border:1px solid var(--linea);background:#000;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.ficha .ventana > *{width:100%;height:100%;object-fit:cover}
.ficha .ventana span{position:absolute;left:8px;top:8px;width:auto;height:auto;padding:5px 8px;background:rgba(5,7,11,.75);font:600 11px/1 var(--datos);letter-spacing:.14em}
.ficha dl{margin:0;display:grid;gap:0;border-top:1px solid var(--linea)}
.ficha dl > div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:15px}
.ficha dt{color:var(--tenue);font:600 11px/1.6 var(--datos);letter-spacing:.14em;text-transform:uppercase}
.ficha dd{margin:0;text-align:right}

/* Pared de monitores */
.pared{padding-block:clamp(80px,12vh,140px);background:var(--negro)}
.pared .cabeza{max-width:1180px;margin:0 auto 34px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.pared h2{font:900 clamp(40px,6vw,84px)/.9 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;max-width:12ch}
.pared .cabeza p{max-width:420px;color:var(--gris)}
.monitores{list-style:none;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,220px);gap:6px;padding:6px;background:#000;border:1px solid var(--linea);border-radius:6px}
.mon{position:relative;overflow:hidden;background:var(--panel)}
.mon > img,.mon > video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .4s}
.mon:hover > img,.mon:hover > video{transform:scale(1.05)}
.mon .rot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));font:600 11px/1.2 var(--datos);letter-spacing:.1em;text-transform:uppercase}
.mon > img.foco-arriba{object-position:50% 30%}
.mon .rot em{font-style:normal;color:var(--tenue)}
.mon .vu{position:absolute;right:8px;top:8px;display:flex;gap:2px;align-items:flex-end;height:26px}
.mon .vu i{width:3px;background:var(--verde);animation:vu 0.9s ease-in-out infinite alternate}
.mon .vu i:nth-child(2){animation-delay:-.3s}.mon .vu i:nth-child(3){animation-delay:-.6s}
@keyframes vu{from{height:20%}to{height:100%}}
.mon.pgm-t{grid-column:span 2;grid-row:span 2;outline:3px solid var(--rojo);outline-offset:-3px}
.mon.pvw-t{outline:3px solid var(--verde);outline-offset:-3px}
.mon .tally{position:absolute;left:8px;top:8px;padding:4px 7px;font:700 11px/1 var(--datos);letter-spacing:.14em;color:#fff}
.mon.pgm-t .tally{background:var(--rojo)} .mon.pvw-t .tally{background:#0E7A45}

/* Servicios */
.servicios{padding-block:clamp(70px,10vh,120px);border-top:1px solid var(--linea)}
.servicios .caja{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
.servicios h2{font:900 clamp(34px,4.4vw,60px)/.92 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em}
.servicios ol{list-style:none;margin:0;padding:0;counter-reset:s}
.servicios li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;padding:22px 0;border-bottom:1px solid var(--linea)}
.servicios li:first-child{border-top:1px solid var(--linea)}
.servicios li span{font:600 12px/1.9 var(--datos);color:var(--naranja);letter-spacing:.14em;grid-row:span 2}
.servicios li h3{font:800 clamp(21px,2vw,26px)/1.15 var(--display);font-stretch:105%}
.servicios li p{color:var(--gris);font-size:16px}

/* Contacto */
.contacto{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(110px,18vh,200px)}
.contacto .fondo{position:absolute;left:0;right:0;top:-15%;height:130%;z-index:-2;will-change:transform}
.contacto .fondo img{width:100%;height:100%;object-fit:cover}
.contacto::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 60%,rgba(5,7,11,.55),rgba(5,7,11,.92))}
.contacto .caja{max-width:1180px;margin:0 auto;display:grid;gap:26px}
.contacto h2{font:900 clamp(48px,8.4vw,124px)/.86 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.025em;max-width:11ch}
.contacto h2 em{color:var(--naranja);font-style:italic}
.contacto p{max-width:540px;color:var(--gris);font-size:19px}
.contacto .vivo{width:max-content}
.contacto .acciones{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.tel{font:600 15px/1 var(--datos);letter-spacing:.06em;color:var(--gris);user-select:all}
footer{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea);font-size:13px;color:var(--tenue)}
footer .caja{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer a{color:var(--gris)}

@media (max-width:820px){
  .parada .caja,.servicios .caja{grid-template-columns:minmax(0,1fr)}
  .ficha .ventana{display:none}
  .monitores{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,30vw,200px)}
  .cadena li:not(.activo) b{display:none}
  .cadena li + li::before{width:10px}
  .tc .solo-ancho{display:none}
}
@media (max-width:480px){
  .marca{padding-right:7px}
  .marca b{display:none}
  .cadena ol{padding:8px 10px;gap:4px}
  .cadena li{font-size:10px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .parada .fondo,.contacto .fondo{transform:none!important}
}