/* CULTURA21 — streaming tv & radio */
:root{
  --ink:#140908;        /* fondo: negro con fondo bordó */
  --ink-2:#1e0f0c;      /* superficies */
  --paper:#efe6d6;      /* texto */
  --dim:#b2a493;        /* texto secundario */
  --red:#ff201f;        /* rojo del logo */
  --brass:#c4a36c;      /* detalles del dial */
  --hair:rgba(239,230,214,.16);
  --nav-h:68px;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --display:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
  --tv-ar:1.3333;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(20,9,8,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav__inner{
  max-width:1240px;margin:0 auto;height:var(--nav-h);
  padding:0 clamp(16px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand img{height:40px;width:auto}
.nav__links{display:flex;gap:clamp(16px,3vw,36px);font-size:16px}
.nav__links a{color:var(--dim);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav__links a:hover{color:var(--paper);border-color:var(--red)}

/* ---------------- TELEVISIÓN ---------------- */
.tvsec{position:relative;isolation:isolate;overflow:hidden;padding:20px 0 32px}
.tvsec__bg{
  position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center;opacity:.35;
}
.tvsec__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(20,9,8,.75) 40%,rgba(20,9,8,.55) 100%),
             linear-gradient(180deg,rgba(20,9,8,0) 60%,var(--ink) 100%);
}
.tvsec__inner{
  margin:0 auto;padding:0 20px;width:max-content;max-width:100%;
  display:grid;grid-template-columns:240px auto;gap:28px;align-items:center;
}
.tvsec__logo{width:100%}
.tvsec__channel{display:flex;align-items:center;gap:16px;margin:28px 0 18px;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.tvsec__channel img{width:64px;flex:none}
.tvsec__channel p{margin:0;display:flex;flex-direction:column;line-height:1.35}
.tvsec__channel em{font-family:var(--display);font-style:normal;font-size:24px}
.tvsec__text{margin:0;color:var(--dim);max-width:30ch;font-style:italic}

.onair{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--paper)}
.onair i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* the set */
.tv{
  margin:0;
  /* tamaño: llena la columna, pero nunca más alto que la pantalla */
  /* lo más grande posible: ancho libre menos la columna de 240px, alto de la pantalla */
  width:min(calc(100vw - 340px), calc((100vh - var(--nav-h) - 110px) * var(--tv-ar)));
  background:#0b0605;
  border:1px solid var(--hair);
  border-radius:6px;
  padding:6px 6px 0;
  box-shadow:0 40px 90px -30px #000;
}
.tv__screen{position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:2px}
.tv__frame{
  position:relative;width:100%;aspect-ratio:var(--tv-ar);overflow:hidden;background:#000;
}
@supports not (aspect-ratio:1){ .tv__frame{height:0;padding-top:75%} }
/* recorte de las franjas negras que trae la señal */
.tv__frame video{
  position:absolute;top:0;height:100%;
  width:calc(100% / var(--vis,1));
  left:calc(-100% * var(--cl,0) / var(--vis,1));
  object-fit:fill;background:#000;
}
.tv__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* reproductor de respaldo (ssh101): se estira para que la imagen no quede aplastada */
.tv.is-fallback .tv__screen{aspect-ratio:var(--tv-ar)}
.tv.is-fallback .tv__screen iframe{inset:0 auto 0 calc(-100% * var(--cl,0) / var(--vis,1));width:calc(100% * var(--fb-iw,1));transform:scaleX(var(--fb-k,1));transform-origin:0 0}
[hidden]{display:none!important}

/* pantalla completa: el cuadro se centra conservando la proporción */
.tv__screen:fullscreen{width:100vw;height:100vh}
.tv__screen:fullscreen .tv__frame{width:min(100vw,calc(100vh * var(--tv-ar)))}
.tv__screen:-webkit-full-screen{width:100vw;height:100vh}
.tv__screen:-webkit-full-screen .tv__frame{width:min(100vw,calc(100vh * var(--tv-ar)))}

.tv__unmute{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  background:rgba(20,9,8,.82);border:1px solid rgba(239,230,214,.35);border-radius:3px;
  font-size:15px;cursor:pointer;color:var(--paper);
}
.tv__unmute svg{width:20px;height:20px;fill:currentColor}
.tv__unmute:hover{background:var(--ink)}
.tv:not(.is-muted) .tv__unmute{display:none}
.tv__msg{position:absolute;inset:auto 16px 16px;padding:10px 14px;background:rgba(20,9,8,.9);font-size:14px;color:var(--dim);text-align:center}

.tv__bar{display:flex;align-items:center;gap:6px;height:46px;padding:0 2px}
.tbtn{flex:none;width:38px;height:38px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--paper);opacity:.85;border-radius:3px}
.tbtn:hover{opacity:1;background:rgba(239,230,214,.07)}
.tbtn svg{width:22px;height:22px;fill:currentColor}
.tv .i-play,.tv .i-muted{display:none}
.tv.is-paused .i-play{display:block}.tv.is-paused .i-pause{display:none}
.tv.is-muted .i-muted{display:block}.tv.is-muted .i-vol{display:none}
.tv__live{margin-left:auto;margin-right:6px;font-size:14px;font-style:italic;color:var(--dim);display:flex;align-items:center;gap:7px}
.tv__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.tv.is-fallback .tv__bar{display:none}
.tv.is-fallback{padding-bottom:6px}

/* slider (TV y radio) */
.slider{
  -webkit-appearance:none;appearance:none;width:110px;height:2px;margin:0 6px;
  background:linear-gradient(90deg,var(--paper) var(--p,80%),rgba(239,230,214,.22) var(--p,80%));
  cursor:pointer;
}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--paper);border:0}
.slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--paper);border:0}

/* ---------------- RADIO ---------------- */
.radiosec{
  border-top:1px solid var(--hair);
  background:
    radial-gradient(60% 70% at 50% 0%,rgba(255,32,31,.08),transparent 70%),
    var(--ink);
  padding:clamp(48px,7vw,96px) 0;
}
.radiosec__inner{max-width:860px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.radiosec__logo{width:clamp(220px,32vw,320px);margin:0 auto clamp(28px,4vw,44px)}

.tuner{
  background:linear-gradient(180deg,#24120e,#170a08);
  border:1px solid rgba(196,163,108,.35);
  border-radius:6px;
  padding:clamp(16px,3vw,26px);
  box-shadow:inset 0 1px 0 rgba(239,230,214,.06),0 30px 70px -30px #000;
}
.dial{
  position:relative;height:96px;
  background:linear-gradient(180deg,#0e0605,#1a0d0a);
  border:1px solid rgba(196,163,108,.28);border-radius:3px;
  overflow:hidden;
}
.dial__scale{position:absolute;inset:0 30px}
.dial__tick{position:absolute;top:0;width:1px;height:12px;background:rgba(196,163,108,.45)}
.dial__tick--big{height:22px;background:var(--brass)}
.dial__num{position:absolute;top:28px;transform:translateX(-50%);font-family:var(--display);font-size:20px;color:var(--brass);font-style:italic}
.dial__unit{position:absolute;right:-22px;bottom:8px;font-size:13px;font-style:italic;color:rgba(196,163,108,.7)}
.dial__needle{
  position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
  left:calc(30px + (100% - 60px) * .06);
  background:var(--red);
  transition:left 1.4s cubic-bezier(.3,.7,.2,1);
}
.tuner[data-state="playing"] .dial__needle,
.tuner[data-state="loading"] .dial__needle{left:calc(30px + (100% - 60px) * .7)}
.tuner[data-state="playing"] .dial__needle{box-shadow:0 0 12px 1px rgba(255,32,31,.7)}

.tuner__row{display:flex;align-items:center;gap:clamp(14px,3vw,28px);margin-top:clamp(16px,2.6vw,22px);flex-wrap:wrap}
.listen{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 22px 12px 16px;border:0;border-radius:3px;cursor:pointer;
  background:var(--paper);color:var(--ink);font-size:18px;font-weight:700;
  transition:background .2s;
}
.listen:hover{background:#fff}
.listen__icon{position:relative;width:22px;height:22px;display:grid;place-items:center}
.listen__icon svg{width:22px;height:22px;fill:currentColor}
.listen .i-pause,.listen .spin{display:none}
.tuner[data-state="playing"] .listen .i-play{display:none}
.tuner[data-state="playing"] .listen .i-pause{display:block}
.tuner[data-state="loading"] .listen .i-play{display:none}
.tuner[data-state="loading"] .listen .spin{display:block}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(20,9,8,.25);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tuner__status{margin:0;display:flex;align-items:center;gap:10px;font-style:italic;color:var(--dim);flex:1;min-width:180px}
.lamp{width:10px;height:10px;border-radius:50%;background:#4a2420;flex:none;transition:background .3s,box-shadow .3s}
.tuner[data-state="playing"] .lamp{background:var(--red);box-shadow:0 0 12px var(--red)}
.tuner[data-state="playing"] .tuner__status{color:var(--paper)}

.tuner__vol{display:flex;align-items:center;gap:6px;color:var(--dim)}
.tuner__vol svg{width:20px;height:20px;fill:currentColor}

.tuner__hint{margin:16px 0 0;font-size:15px;font-style:italic;color:var(--dim);text-align:center}
/* Twitch real, invisible, exactamente debajo del botón */
.listen-wrap{position:relative;flex:none}
/* opacidad .45 + "screen": el navegador lo considera visible, pero sobre el botón claro no se nota */
.tw-catch{position:absolute;inset:0;overflow:hidden;opacity:.45;mix-blend-mode:screen;z-index:2;cursor:pointer;border-radius:3px}
.tw-catch__player{position:absolute;width:400px;height:300px;left:calc(50% - 200px);top:calc(50% - 150px)}
.tw-catch__player #twitch-embed,.tw-catch__player iframe{width:100%;height:100%;border:0}
.listen-wrap:hover .listen{background:#fff}
/* si Twitch no arrancó: se muestra el reproductor real debajo del botón */
.tuner{position:relative}
.tuner.is-revealed .listen-wrap{position:static}
.tuner.is-revealed .tw-catch{
  inset:auto;left:50%;top:calc(100% + 16px);width:min(400px,calc(100vw - 32px));height:300px;
  margin-left:calc(min(400px,calc(100vw - 32px)) / -2);
  opacity:1;mix-blend-mode:normal;z-index:20;pointer-events:auto!important;border:1px solid var(--hair);background:#000;
}
.tuner.is-revealed .tw-catch__player{left:0;top:0;width:100%;height:100%}
.tuner.is-revealed{margin-bottom:340px}


/* ---------------- FOOTER ---------------- */
.foot{border-top:1px solid var(--hair)}
.foot__inner{
  max-width:1240px;margin:0 auto;
  padding:36px clamp(16px,4vw,40px) calc(36px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:24px 40px;flex-wrap:wrap;
}
.foot__logo{width:150px}
.foot__links{display:flex;gap:24px;flex-wrap:wrap;color:var(--dim);font-size:15px}
.foot__links a:hover{color:var(--paper)}
.foot__copy{margin:0 0 0 auto;color:var(--dim);font-size:14px;font-style:italic}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .tvsec__inner{grid-template-columns:1fr}
  .tvsec__info{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 24px}
  .tvsec__logo{grid-row:span 2;width:clamp(180px,34vw,260px)}
  .tvsec__channel{margin:0;border:0;padding:0}
  .tvsec__text{grid-column:2}
  .tvsec__inner{width:auto}
  .tvsec__logo{width:clamp(180px,34vw,260px)}
  .tv{width:min(100%,calc((100vh - var(--nav-h) - 170px) * var(--tv-ar)));margin:0 auto}
}
@media (max-width:600px){
  :root{--nav-h:92px}
  body{font-size:16px}
  .nav__inner{height:auto;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding-top:10px;padding-bottom:10px}
  .nav__brand img{height:30px}
  .nav__links{gap:14px;font-size:13px;flex-wrap:wrap;justify-content:center}
  .tvsec__info{display:block;text-align:center}
  .tvsec__logo{margin:0 auto}
  .tvsec__channel{justify-content:center;margin:18px 0 6px}
  .tvsec__channel img{width:48px}
  .tvsec__channel em{font-size:20px}
  .tvsec__text{margin:0 auto 4px}
  .tvsec__inner{padding:0 10px}
  .tv{width:100%;padding:6px 6px 0}
  .tv__bar{height:46px}
  .slider{width:80px}
  .dial{height:84px}
  .dial__num{font-size:17px}
  .dial__num--minor{display:none}
  .tuner__row{justify-content:center;text-align:center}
  .tuner__status{justify-content:center;order:-1;flex-basis:100%}
  .foot__inner{flex-direction:column;text-align:center}
  .foot__links{justify-content:center}
  .foot__copy{margin:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}