/* =================================================================
   ZZZ LATAM — "New Eridu Broadcast" · TEMA CLARO
   Inspirado en la referencia editorial-retro (FOLLOW US / Bernkastel):
   base cream/blanco-azulado, texto casi-negro, acento azul índigo,
   acento secundario naranja, badges/cintas negras.
   Tipografía: Anton (display condensada) + Archivo (cuerpo).
   ================================================================= */

:root{
  /* Paleta OSCURA/GRIS — texto claro, acentos AMARILLO ZZZ */
  --bg:        #1B1C20;   /* gris oscuro */
  --panel:     #25272D;   /* panel un poco más claro */
  --panel-2:   #2E3037;
  --ink:       #ECEAE0;   /* texto claro */
  --ink-dim:   #A6A69B;
  --ink-faint: #6E6F68;

  /* Hairlines */
  --line:        rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);

  /* Acento: amarillo ZZZ (legible como texto sobre oscuro) */
  --acc:        #FFDE17;   /* amarillo ZZZ */
  --acc-deep:   #F2CE2A;   /* amarillo (sobre oscuro) */
  --acc-glow:   rgba(255,222,23,.45);
  --orange:     #FFDE17;   /* alias a amarillo */
  --orange-deep:#F2CE2A;

  /* Negro real (badges/sombras más oscuras que el panel) */
  --black:     #0E0F0E;

  /* Métricas */
  --gap: 22px;
  --rail-l: 244px;
  --rail-r: 252px;
  --maxw: 1360px;
  --radius: 4px;

  --ff-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --ff-body:    'Archivo', system-ui, sans-serif;
  --ff-mono:    'Archivo Mono', ui-monospace, monospace;

  color-scheme: dark;
}

/* ----------------------------- Reset ----------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background-color:var(--bg);
  background-image:url('assets/bg-pattern.jpg?v=3');
  background-size:cover;          /* extendido */
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;     /* inmóvil */
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(15px,1vw + 12px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Grano CRT global, muy leve. SVG turbulence inline. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Accesibilidad: foco visible y skip-link */
:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px}
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:100;
  background:var(--acc);color:#111;padding:10px 16px;
  font-family:var(--ff-mono);font-size:13px;border-radius:var(--radius);
}
.skip-link:focus{left:8px}

/* ============================ HEADER ============================= */
.masthead{max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--gap) 0}

/* Banner real: banner.html embebido en iframe (aislado, sin colisiones). */
.banner-frame-wrap{
  border:2px solid var(--black);
  border-radius:6px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:8px 8px 0 var(--black);
}
.banner-frame{
  display:block;width:100%;border:0;
  /* Altura proporcional robusta: no depende de aspect-ratio en iframe,
     así nunca colapsa a 300x150. */
  height:clamp(280px, 36vw, 520px);
}

.masthead__bar{
  display:flex;align-items:center;gap:16px;
  padding:14px 4px 0;flex-wrap:wrap;
}
.wordmark{display:flex;align-items:baseline;gap:7px;line-height:1}
.wordmark__zzz{
  font-family:var(--ff-display);font-size:34px;letter-spacing:.06em;
  color:var(--black);background:var(--acc);padding:4px 10px 1px;border-radius:3px;
}
.wordmark__latam{font-family:var(--ff-display);font-size:34px;letter-spacing:.14em;color:var(--ink)}

.topnav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.topnav a{
  font-size:14px;color:var(--ink-dim);padding:4px 0;position:relative;transition:color .18s;
}
.topnav a:hover{color:var(--ink)}
.topnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--ink);transition:right .22s ease;
}
.topnav a:hover::after{right:0}

.btn-ghost{
  font-family:var(--ff-body);font-weight:800;font-size:13px;letter-spacing:.08em;
  padding:10px 18px;background:var(--black);color:#fff;
  border:1px solid var(--black);border-radius:3px;text-transform:uppercase;
  transition:transform .15s, box-shadow .2s;
  box-shadow:3px 3px 0 var(--orange);
}
.btn-ghost:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--orange)}

/* ============================ CONSOLA ============================ */
.console{
  max-width:var(--maxw);margin:0 auto;padding:var(--gap);
  display:grid;grid-template-columns:1fr;gap:var(--gap);
}
@media (min-width:1080px){
  .console{
    grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
    align-items:start;
  }
  .rail{position:sticky;top:var(--gap);max-height:calc(100vh - var(--gap)*2);overflow:auto}
  .rail::-webkit-scrollbar{width:6px}
  .rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
}

/* ----------------------------- Paneles --------------------------- */
.panel{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7);
  padding:16px;
  /* esquina recortada: detalle de carátula, rompe el "card idéntica" */
  position:relative;
}
.panel + .panel{margin-top:12px}
.panel__kicker{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--ink-faint);margin-bottom:8px;text-transform:uppercase;
}

.rail--left .channel{font-family:var(--ff-display);font-size:40px;line-height:.9;letter-spacing:.04em}
.channel__sub{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);margin-top:4px}

/* ON AIR */
.onair{display:flex;align-items:center;gap:11px}
.onair__icon{
  width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;
  box-shadow:0 0 0 0 rgba(209,30,84,.55);
  animation:ykpulse 1.9s ease-out infinite;
}
@keyframes ykpulse{
  0%{box-shadow:0 0 0 0 rgba(209,30,84,.55)}
  70%{box-shadow:0 0 0 13px rgba(209,30,84,0)}
  100%{box-shadow:0 0 0 0 rgba(209,30,84,0)}
}
.onair__label{font-family:var(--ff-mono);font-size:14px;letter-spacing:.16em;color:#D11E54;font-weight:700}

/* Stats */
.stat__num{font-family:var(--ff-display);font-size:48px;line-height:.85;letter-spacing:.02em}
.stat__num .plus{color:var(--acc-deep);font-size:.6em;vertical-align:top}
.stat__label{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-dim);margin-top:6px;text-transform:uppercase}
[data-live]{font-variant-numeric:tabular-nums}

/* Nav del riel */
.railnav{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.railnav a{
  display:flex;align-items:baseline;gap:10px;padding:8px 4px;
  color:var(--ink-dim);font-size:14px;border-left:2px solid transparent;transition:.18s;
}
.railnav a:hover{color:var(--ink);border-left-color:var(--acc-deep);padding-left:10px;background:rgba(255,255,255,.02)}
.railnav__n{font-family:var(--ff-mono);font-size:11px;color:var(--ink-faint)}

/* ============================ FEED =============================== */
.feed{min-width:0}

.block{padding:48px 0;border-bottom:1px solid var(--line)}
.block:first-child{padding-top:0}
.block__index{
  display:inline-block;font-family:var(--ff-display);font-size:18px;letter-spacing:.12em;
  color:#fff;background:var(--black);padding:3px 13px 1px;border-radius:3px;
  margin-bottom:14px;box-shadow:3px 3px 0 var(--orange);
}
.block__title{
  font-family:var(--ff-display);font-size:clamp(34px,5vw,58px);
  line-height:.92;letter-spacing:.02em;margin-bottom:18px;font-weight:400;
}
.block__text{max-width:60ch;color:var(--ink);font-size:1.05rem}

/* ----------------------------- HERO ------------------------------ */
.screen{
  position:relative;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:radial-gradient(120% 140% at 50% 0%, #31333B 0%, #1E2025 70%);
  padding:clamp(42px,5vw,58px) clamp(26px,4vw,52px) clamp(26px,4vw,52px);overflow:hidden;
}
.screen::after{ /* halftone editorial muy sutil */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:radial-gradient(circle, var(--ink) 0.6px, transparent 1.4px);
  background-size:6px 6px;
}
.screen::before{ /* halo cálido */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -80px 120px -60px rgba(244,165,38,.18);
}
.screen__overlay{
  position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--ink-dim);
}
.rec{display:flex;align-items:center;gap:7px;color:var(--acc-deep)}
.rec__dot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.timecode{font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--ff-mono);font-size:clamp(11px,1.4vw,13px);letter-spacing:.22em;
  color:var(--ink-dim);text-transform:uppercase;margin-bottom:18px;
}
.hero__title{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(54px,11vw,128px);line-height:1.04;letter-spacing:.01em;
  text-transform:uppercase;
}
.hero__title-accent{display:block;color:var(--acc)}
.hero__lead{max-width:46ch;margin:22px 0 30px;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink)}

/* ----------------- BOTÓN GRANDE (entrar al server) --------------- */
.join{
  display:inline-grid;grid-template-columns:auto auto;align-items:center;
  gap:0 18px;padding:18px 28px;
  background:var(--black);color:#fff;border-radius:6px;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:6px 6px 0 var(--orange);
  transition:transform .16s ease, box-shadow .2s ease;
}
.join__tag{
  grid-row:1 / span 2;font-family:var(--ff-body);font-weight:800;font-size:13px;
  letter-spacing:.1em;padding:8px 12px;border:1.5px solid rgba(255,255,255,.4);border-radius:3px;
  color:var(--orange);
}
.join__label{
  font-family:var(--ff-display);font-size:clamp(30px,4vw,46px);line-height:1;
  letter-spacing:.04em;align-self:end;text-transform:uppercase;
}
.join__url{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.05em;opacity:.7;align-self:start;color:#fff;
}
.join::before{ /* barrido "power-on" al hover */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 0 40%,rgba(255,255,255,.16) 50%,transparent 60% 100%);
  transform:translateX(-110%);
}
.join:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--orange)}
.join:hover::before{animation:sweep .6s ease}
@keyframes sweep{to{transform:translateX(110%)}}
.join:active{transform:translate(0,0);box-shadow:3px 3px 0 var(--orange)}

.hero__readout{
  margin-top:22px;display:flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink-dim);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex:none}
.dot--idle{background:var(--ink-faint)}
.dot--live{background:var(--acc);box-shadow:0 0 10px var(--acc-glow)}

/* ----------------- Cards (grid asimétrico, NO idénticas) --------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.card{
  border:1.5px solid var(--ink);border-radius:6px;padding:20px;
  background:var(--panel);box-shadow:5px 5px 0 rgba(0,0,0,.5);
  transition:transform .18s, box-shadow .2s;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.card__title{font-family:var(--ff-display);font-size:26px;letter-spacing:.02em;font-weight:400;margin-bottom:8px}
.card__text{color:var(--ink-dim);font-size:.98rem}
.card__tag{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;color:var(--acc-deep);
  text-transform:uppercase;margin-bottom:8px;
}
/* feature ocupa toda la fila y "enciende" en acento */
.card--feature{
  grid-column:1 / -1;
  background:linear-gradient(135deg, #2F2C22, #25272D);
  border-color:var(--orange);
  box-shadow:6px 6px 0 var(--black);
}
.card--feature .card__title{font-size:clamp(30px,4vw,44px)}
.card--wide{grid-column:1 / -1}

/* Premios */
.prizes{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.prizes li{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;
  padding:9px 14px;border:1px solid var(--line-strong);border-radius:2px;color:var(--ink);
}
.prizes li::before{content:"◆ ";color:var(--acc-deep)}

/* Rack de fanart (slots vacíos diegéticos, tipo cintas) */
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.rack__slot{
  aspect-ratio:3 / 4;border:1px dashed var(--line-strong);border-radius:var(--radius);
  display:grid;place-items:center;background:repeating-linear-gradient(45deg,#2B2D33 0 10px,#24262B 10px 20px);
}
.rack__slot span{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-faint)}
.rack__note{font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-faint);margin-top:14px;letter-spacing:.04em}

/* FAQ */
.faq{margin-top:8px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 2px;
  font-family:var(--ff-body);font-weight:600;font-size:1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ff-mono);color:var(--acc-deep);font-size:1.4rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acc-deep)}
.faq details p{padding:0 2px 20px;color:var(--ink-dim);max-width:60ch}

/* Cierre */
.closing{border-bottom:none;text-align:center;padding-top:56px}
.closing__title{
  display:inline-block;font-family:var(--ff-display);
  font-size:clamp(34px,7vw,76px);line-height:1;letter-spacing:.03em;margin-bottom:26px;
  text-transform:uppercase;color:#fff;background:var(--black);
  padding:.16em .55em .1em;border-radius:6px;box-shadow:7px 7px 0 var(--orange);
}
.join--final{margin:0 auto}

/* ====================== RIEL DERECHO ============================= */
.prog__title{font-family:var(--ff-display);font-size:30px;letter-spacing:.03em;font-weight:400;margin-bottom:6px}
.prog__text{color:var(--ink-dim);font-size:.95rem;margin-bottom:12px}
.prog__chips li,.tags li{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-dim);
}
.prog__chips{display:flex;flex-direction:column;gap:7px}
.prog__chips li::before{content:"▸ ";color:var(--acc-deep)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 10px;border:1px solid var(--line);border-radius:2px;color:var(--ink)}
.tags li::before{content:"#";color:var(--ink-faint)}

.btn-side{
  display:block;text-align:center;margin-top:12px;padding:16px;
  background:var(--orange);border:2px solid var(--black);color:var(--black);
  border-radius:6px;text-transform:uppercase;
  font-family:var(--ff-display);font-size:24px;letter-spacing:.08em;
  box-shadow:4px 4px 0 var(--black);
  transition:transform .15s, box-shadow .2s;
}
.btn-side:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--black)}

/* ============================ FOOTER ============================= */
.foot{
  max-width:var(--maxw);margin:0 auto;padding:36px var(--gap) 56px;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;
}
.foot__brand{font-family:var(--ff-display);font-size:24px;letter-spacing:.06em}
.foot__brand span{color:var(--ink-dim)}
.foot__legal{font-size:12.5px;color:var(--ink-faint);max-width:70ch;line-height:1.55}
.foot__credit{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint)}

/* ============================ REVEALS ============================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rec__dot,.onair__icon{animation:none}
  .join::before{display:none}
  .join:hover{transform:none}
}

/* ============================ RESPONSIVE ========================= */
@media (max-width:1079px){
  /* Rieles apilados; el izquierdo se vuelve tira horizontal de estado */
  .rail--left{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .rail--left .panel{margin-top:0}
  .rail--left .railnav{grid-column:1 / -1}
  .railnav{display:flex;flex-wrap:wrap;gap:4px}
  .railnav a{border-left:none;border-top:2px solid transparent}
  .railnav a:hover{padding-left:4px;border-top-color:var(--acc-deep)}
}
@media (max-width:620px){
  :root{--gap:14px}
  .cards{grid-template-columns:1fr}
  .card--feature,.card--wide{grid-column:auto}
  .rack{grid-template-columns:repeat(2,1fr)}
  .rail--left{grid-template-columns:1fr}
  .masthead__bar{gap:12px}
  .topnav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:10px}
  .join{grid-template-columns:1fr;gap:6px;justify-items:start}
  .join__tag{grid-row:auto}
}

/* ===================================================================
   REFINAMIENTO DE COMPOSICIÓN — centrar la columna central
   Centra focos (hero, encabezados, cierre) y mide el texto; mantiene
   tarjetas y FAQ alineadas a la izquierda por legibilidad.
   =================================================================== */
.hero{text-align:center}
.hero .eyebrow{margin-inline:auto}
.hero__title{font-size:clamp(32px,6vw,66px);max-width:18ch;margin-inline:auto}
.hero__lead{margin-inline:auto}
.hero__readout{justify-content:center}
/* el overlay REC/timecode permanece en las esquinas */
.screen__overlay{text-align:left}

.block{text-align:center}
.block__text{margin-inline:auto}
.cards{text-align:left}
.prizes{justify-content:center}
.rack__note{text-align:center}
.faq{text-align:left}