/* ============================================================
   TSS — IDENTIDAD VISUAL
   Cargar ÚLTIMA, después de hero.css.

   Criterio: periodismo de investigación, no producto SaaS.
   · Negro, hueso, rojo. Nada más.
   · Cookconthic solo en titulares. Plex Sans para leer.
     Plex Mono para todo lo que sea dato de archivo.
   · Sin degradados, sin glows, sin animaciones decorativas.
   ============================================================ */

:root{
  /* ── Tipografías ── */
  --ff-ui:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --ff-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;

  /* ── Paleta ── */
  --ink:#0b0b0b;
  --ink2:#111111;
  --ink3:#161616;
  --surface:#161616;
  --surface2:#1e1e1e;

  --border:rgba(236,233,227,.10);
  --border2:rgba(236,233,227,.19);

  /* Texto en hueso: menos clínico que el blanco puro */
  --t1:#ece9e3;
  --t2:#8f8b84;
  --t3:#57534d;

  /* Rojo como único acento. El turquesa queda fuera. */
  --cyan:#d92b2b;
  --violet:#b02020;
  --rose:#d92b2b;
  --gold:#c9a227;
  --cyan-dim:rgba(217,43,43,.12);
  --cyan-glow:rgba(217,43,43,.28);
  --violet-dim:rgba(176,32,32,.10);

  --r-sm:3px;
  --r-md:4px;
}

/* ── Fondo: sin manchas de color ── */
.glow-bg{display:none}
body::before{opacity:.028}

body{
  background:var(--ink);
  font-family:var(--ff-ui);
  font-size:16px;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

input, textarea, select, button,
.nlnk, .mtab, .fld label, .fld input, .fld select, .fld textarea,
.form-submit, .sbtn, .btn-cta, .yt-filter-btn, .yt-search-field,
.modal-divider, .modal-terms, .sec-sub, .umitem,
.btn-load-more, .pc-prog{
  font-family:var(--ff-ui);
}

/* ── Titulares ── */
.sec-heading, .th-title, .news-masthead h2, .exp-title, h1, h2, h3{
  font-family:var(--ff-display);
}
.sec-heading{
  font-size:44px;font-weight:800;letter-spacing:-.015em;
  color:var(--t1);margin-bottom:8px;
}

/* El acento de color en titulares se va: queda tipografía, no arcoíris */
.neon-text{
  background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;
  animation:none;color:var(--t1);
}

/* ── Eyebrow: dato de archivo, en monoespaciada ── */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:11.5px;font-weight:500;letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:10px;
}
/* Línea corta antes del eyebrow, como marca de sección */
.eyebrow::before{
  content:'';display:inline-block;
  width:22px;height:1px;background:var(--rose);
  vertical-align:middle;margin-right:10px;
  transform:translateY(-1px);
}

.sec-sub{
  font-family:var(--ff-ui);
  font-size:15.5px;font-weight:400;color:var(--t2);
  line-height:1.65;max-width:64ch;margin-bottom:30px;
}

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.topnav{
  background:rgba(11,11,11,.97);
  border-bottom:1px solid var(--border);
}
.nav-logo img{height:28px}
@media(max-width:860px){.nav-logo img{height:25px}}

.topnav .nlnk{
  font-family:var(--ff-ui);
  font-size:13px;font-weight:500;letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--t2);
}
.topnav .nlnk:hover{color:var(--t1)}
.topnav .nlnk.active{color:var(--t1)}
.topnav .nlnk::after{background:var(--rose);height:2px;bottom:-4px}

/* Botón de cuenta: icono */
.topnav .btn-cta{
  width:36px;height:36px;padding:0;font-size:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--t1);
  box-shadow:none;
}
.topnav .btn-cta::before{
  content:'';width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--icon-user) center/contain no-repeat;
  mask:var(--icon-user) center/contain no-repeat;
}
.topnav .btn-cta:hover{background:rgba(236,233,227,.07);border-color:var(--t2);transform:none}

:root{
  --icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.nav-avatar{
  background:var(--surface2);color:var(--t1);
  font-family:var(--ff-mono);font-size:13px;font-weight:600;
  border:1px solid var(--border2);
}
.nav-avatar:hover{border-color:var(--rose)}

/* ══════════════════════════════════════════
   FILTROS Y BÚSQUEDA
   ══════════════════════════════════════════ */
.yt-filter-bar{gap:0;border-bottom:1px solid var(--border);padding-bottom:0}

/* Filtros como pestañas de archivo, no como pastillas */
.yt-filter-btn{
  height:38px;padding:0 16px;
  border:none;border-bottom:2px solid transparent;
  border-radius:0;background:none;
  font-family:var(--ff-ui);
  font-size:13.5px;font-weight:500;letter-spacing:.2px;
  color:var(--t2);
  margin-bottom:-1px;
}
.yt-filter-btn:hover{color:var(--t1);background:none}
.yt-filter-btn.active{
  background:none;color:var(--t1);font-weight:600;
  border-bottom-color:var(--rose);
}

.yt-search-field{
  height:34px;border-radius:var(--r-sm);
  font-size:13.5px;width:230px;
  background:transparent;border:1px solid var(--border);
  padding-left:32px;margin-bottom:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;background-size:14px;
}
.yt-search-field:focus{border-color:var(--border2);box-shadow:none}

/* ══════════════════════════════════════════
   CARDS DE VIDEO
   ══════════════════════════════════════════ */

/* Duración y fecha: dato, no texto */


.btn-load-more{
  font-family:var(--ff-ui);
  font-size:13.5px;font-weight:500;letter-spacing:.3px;
  border-radius:var(--r-sm);
  border:1px solid var(--border2);background:transparent;color:var(--t1);
  box-shadow:none;padding:11px 26px;
}
.btn-load-more:hover{background:rgba(236,233,227,.06);border-color:var(--t3);transform:none}

/* ══════════════════════════════════════════
   MODAL DE CUENTA
   ══════════════════════════════════════════ */
.modal-box{
  border-radius:var(--r-md);
  padding:30px 28px 26px;max-width:380px;
  border-color:var(--border2);
  box-shadow:0 28px 70px rgba(0,0,0,.75);
}


.modal-close{
  top:16px;right:16px;width:28px;height:28px;
  border-radius:var(--r-sm);background:transparent;color:var(--t3);font-size:0;
}
.modal-close::before{
  content:'';display:block;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--icon-x) center/contain no-repeat;
  mask:var(--icon-x) center/contain no-repeat;
}
.modal-close:hover{background:transparent;color:var(--t1)}


/* ── Piezas internas del modal ──
   Se perdieron en la limpieza de CSS del 19/09/2026: en ese momento
   el modal no estaba en el HTML —el login de visitantes se había
   sacado con Firebase— así que el análisis las dio por muertas.
   Reescritas acá. */

.modal-logo-row{
  display:flex;align-items:center;
  margin-bottom:22px;
}

.modal-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}

.mtab{
  flex:1;
  appearance:none;-webkit-appearance:none;
  background:none;border:0;
  border-bottom:2px solid transparent;
  padding:11px 6px;
  font-family:var(--ff-ui);
  font-size:14px;font-weight:500;
  color:var(--t3);
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.mtab:hover{color:var(--t2)}
.mtab.active{background:none;color:var(--t1);font-weight:600;border-bottom-color:var(--rose)}

.modal-terms{
  margin-top:16px;
  font-size:12px;line-height:1.55;
  color:var(--t3);text-align:center;
}
.modal-terms a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.modal-terms a:hover{color:var(--t1)}


/* El botón principal necesitaba aire respecto del último campo */
.modal-box .form-submit{margin-top:6px}

/* Labels en monoespaciada: aire de formulario de archivo */
.fld{margin-bottom:17px}
.fld label{
  font-family:var(--ff-mono);
  font-size:11px;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--t2);margin-bottom:7px;
}
.fld input,.fld select,.fld textarea{
  border-radius:var(--r-sm);padding:11px 13px;
  font-family:var(--ff-ui);font-size:14.5px;
  background:transparent;border:1px solid var(--border2);color:var(--t1);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--rose);box-shadow:none;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--t3);font-size:14.5px}

.form-submit{
  padding:13px;border-radius:var(--r-sm);
  font-family:var(--ff-ui);
  font-size:14px;font-weight:600;letter-spacing:.3px;
  background:var(--rose);color:#fff;
  box-shadow:none;margin-top:12px;
}
.form-submit:hover{background:#b02020;transform:none}


/* ══════════════════════════════════════════
   VOTACIÓN / PARTICIPACIÓN
   ══════════════════════════════════════════ */
.votacion-section .config-card,
#votacion .empty-state{border-radius:var(--r-md);border-color:var(--border)}

/* ══════════════════════════════════════════
   EQUIPO
   ══════════════════════════════════════════ */
.team-card{border-radius:var(--r-md);border-color:var(--border)}
.team-card img{border-radius:var(--r-md);border:1px solid var(--border2)}
.team-name{font-family:var(--ff-ui);font-size:15px;font-weight:600;color:var(--t1)}
.team-role{
  font-family:var(--ff-mono);
  font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--t2);
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer h4,.foot-col-title{
  font-family:var(--ff-mono);
  font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--t2);
}


/* ══════════════════════════════════════════
   HERO — alinear con la identidad
   ══════════════════════════════════════════ */
.th-slide{border-radius:var(--r-md)}
.th-kicker{
  font-family:var(--ff-mono);
  font-size:11px;font-weight:500;letter-spacing:2.2px;
  color:var(--t1);
}
.th-kicker.is-live{color:var(--rose)}
.th-title{font-size:clamp(17px,1.5vw,26px);font-weight:700;letter-spacing:-.01em}
.th-play{background:rgba(0,0,0,.5);border-color:rgba(236,233,227,.35)}
.th-slide.is-active:hover .th-play{background:var(--rose);border-color:var(--rose)}
.th-dot.is-active{background:var(--rose)}
.th-nav{border-radius:var(--r-sm);background:rgba(11,11,11,.8)}

.th-choice{border-radius:var(--r-md)}
.th-choice-title{font-family:var(--ff-display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.th-btn{
  font-family:var(--ff-ui);
  height:44px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;letter-spacing:.2px;
}
.th-btn-main{background:var(--rose)}
.th-btn-main:hover{background:#b02020}
.th-player-frame{border-radius:var(--r-md)}
.th-player-title{font-family:var(--ff-ui);font-size:15px;font-weight:500}
.th-player-yt{border-radius:var(--r-sm);font-size:13px;font-weight:500}
.th-modal-close{border-radius:var(--r-sm)}

/* ══════════════════════════════════════════
   BARRA DE DONACIÓN — sin dorado de casino
   ══════════════════════════════════════════ */
#exclusivo > div,.donation-bar{
  border-radius:var(--r-md)!important;
  border-color:var(--border)!important;
  background:var(--surface)!important;
}

/* ══════════════════════════════════════════
   MÓVIL
   ══════════════════════════════════════════ */
@media(max-width:860px){
  .sec-heading{font-size:33px}
  .sec-sub{font-size:14.5px;margin-bottom:22px}
  .eyebrow{font-size:10.5px;letter-spacing:2px}
  .yt-filter-bar{overflow-x:auto;scrollbar-width:none}
  .yt-filter-bar::-webkit-scrollbar{display:none}
  .yt-search-field{width:100%;margin-left:0;margin-top:10px}
}

/* ══════════════════════════════════════════
   CINTA SUPERIOR — horario de emisión
   ══════════════════════════════════════════ */
:root{ --tk-h:32px; }

.tss-ticker{
  position:fixed;top:0;left:0;right:0;z-index:520;
  height:var(--tk-h);
  background:#5a1620;                 /* bordo */
  border-bottom:1px solid rgba(236,233,227,.09);
  overflow:hidden;
  display:flex;align-items:center;
}
.tk-track{
  display:flex;flex-shrink:0;
  animation:tkScroll 42s linear infinite;
  will-change:transform;
}
.tss-ticker:hover .tk-track{animation-play-state:paused}

.tk-set{display:flex;align-items:center;flex-shrink:0;white-space:nowrap}

.tk-set span{
  font-family:var(--ff-mono);
  font-size:11px;font-weight:400;letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  padding:0 26px;
}
.tk-set .tk-sep{
  color:rgba(255,255,255,.3);
  padding:0;letter-spacing:0;
}

@keyframes tkScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .tk-track{animation:none}
}

/* ══════════════════════════════════════════
   HEADER — reubicado bajo la cinta
   ══════════════════════════════════════════ */
:root{ --nav-h:88px; }

.topnav{
  top:var(--tk-h);
  height:var(--nav-h);
  padding:0 46px;
  border-bottom:none;                 /* fuera la línea contra el banner */
  background:var(--ink);
}
.page{padding-top:calc(var(--nav-h) + var(--tk-h))}
.read-progress{top:calc(var(--nav-h) + var(--tk-h))}

.topnav .nav-logo{display:flex;align-items:center;height:100%}
.nav-logo img{height:30px;display:block}

/* Icono de cuenta */
.topnav .btn-cta{
  width:38px;height:38px;padding:0;font-size:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--t1);
  box-shadow:none;
}
.topnav .btn-cta::before{content:none}
.topnav .btn-cta svg{width:19px;height:19px;display:block}
.topnav .btn-cta:hover{background:rgba(236,233,227,.07);border-color:var(--t2);transform:none}

/* El hero arranca pegado al header */
#tssHero{padding-top:0}

@media(max-width:860px){
  :root{ --tk-h:28px; --nav-h:64px; }
  .topnav{padding:0 16px}
  .tk-set span{font-size:10px;letter-spacing:1.8px;padding:0 18px}
  .tk-track{animation-duration:30s}
  .nav-logo img{height:25px}
}

/* ══════════════════════════════════════════
   CLIPS — aire entre encabezado, filtros y grilla
   ══════════════════════════════════════════ */
#videos .section-wrap{padding-top:64px;padding-bottom:64px}
.sec-sub{margin-bottom:38px}

.yt-filter-bar{margin-bottom:0;padding-bottom:0}
.videos-grid{margin-top:38px}

/* Tipografía un punto más grande en la sección */
#videos .sec-heading{font-size:53px}

/* "El expediente" es el título del archivo investigativo: la sección
   con más peso editorial del sitio. Va un escalón por encima. */
#expedientes .sec-heading{font-size:60px;line-height:1.05}
#videos .sec-sub{font-size:16.5px;line-height:1.65}
.yt-filter-btn{font-size:14.5px}
.yt-search-field{font-size:14.5px;height:36px}


/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--ink);
  padding:56px 0 24px;
}
.foot-inner{max-width:1400px;margin:0 auto;padding:0 46px}

/* Columnas más parejas: la marca deja de comerse media pantalla */
.foot-top{
  grid-template-columns:1.4fr .8fr .8fr .8fr;
  gap:48px;
  margin-bottom:44px;
}

.foot-brand img{height:34px;border-radius:0}
.foot-brand p{
  font-family:var(--ff-ui);
  font-size:14px;line-height:1.6;color:var(--t2);
  margin-top:16px;max-width:240px;
}

/* Redes: solo el glifo, sin cajita */
.foot-socs{gap:18px;margin-top:20px}
.fsoc{
  width:auto;height:auto;
  border:none;background:none;border-radius:0;
  color:var(--t3);
}
.fsoc:hover{color:var(--t1);background:none;border:none}
.fsoc svg{width:17px;height:17px}

/* Encabezados de columna: dato de archivo */
.foot-col h5{
  font-family:var(--ff-mono);
  font-size:10.5px;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);
  margin-bottom:16px;
}
.foot-col ul{gap:11px}
.foot-col li,.foot-col a{
  font-family:var(--ff-ui);
  font-size:14px;font-weight:400;color:var(--t2);
  transition:color .18s ease;
}
.foot-col li:hover,.foot-col a:hover{color:var(--t1)}

.foot-bottom{
  border-top:1px solid var(--border);
  padding-top:20px;
  font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.8px;
  color:var(--t3);
}

/* El botón de volver arriba ya no se monta sobre el copyright */
.scroll-top{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border2);
  right:22px;bottom:22px;
}
.scroll-top:hover{background:var(--surface2);border-color:var(--t3)}

@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr;gap:34px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:860px){
  #videos .section-wrap{padding-top:40px;padding-bottom:44px}
  #videos .sec-heading{font-size:34px}
  #expedientes .sec-heading{font-size:37px}
  #videos .sec-sub{font-size:15px}
  .videos-grid{margin-top:26px}
  .foot-inner{padding:0 18px}
  .foot-top{grid-template-columns:1fr;gap:30px;margin-bottom:32px}
  .foot-brand{text-align:left}
  .foot-brand p{max-width:100%}
  .site-footer{padding:40px 0 20px}
}

/* ══════════════════════════════════════════
   AJUSTES — sección vacía, filtros, equipo
   ══════════════════════════════════════════ */

/* La sección de donación quedó vacía: no debe ocupar espacio */
#exclusivo{display:none}

/* Filtros: sin línea divisoria contra la grilla */
.yt-filter-bar{border-bottom:none;padding-bottom:0;margin-bottom:0}
.yt-filter-btn{border-bottom-width:2px}
.videos-grid{margin-top:56px}
#videos .sec-sub{margin-bottom:44px}

/* ══════════════════════════════════════════
   EQUIPO — fichas con retrato, no avatares
   ══════════════════════════════════════════ */
#equipo .section-wrap{padding-top:64px;padding-bottom:70px}
#equipo .sec-sub{margin-bottom:42px}

.team-grid{gap:18px;padding-bottom:10px}

.team-card{
  flex:0 0 272px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:0;                       /* el retrato va a sangre */
  overflow:hidden;
  text-align:left;
  position:relative;
  transition:border-color .22s ease, transform .22s ease;
}
.team-card:hover{
  border-color:rgba(217,43,43,.45);
  transform:translateY(-3px);
}

/* Retrato vertical, blanco y negro hasta el hover */
.team-portrait{
  position:relative;
  width:100%;aspect-ratio:3/4;
  background:var(--ink3);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:46px;font-weight:800;color:var(--t3);
  border-radius:0;border:none;margin:0;
}
.team-portrait img{
  width:100%;height:100%;object-fit:cover;border-radius:0;
  filter:grayscale(1) contrast(1.06);
  transition:filter .35s ease, transform .5s ease;
}
.team-card:hover .team-portrait img{
  filter:grayscale(0) contrast(1);
  transform:scale(1.03);
}
/* Degradado para asentar la ficha */
.team-portrait::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(22,22,22,.9) 100%);
}

/* Barra roja que crece en el hover: marca de expediente */
.team-card::before{
  content:'';position:absolute;left:0;top:0;z-index:4;
  width:3px;height:0;background:var(--rose);
  transition:height .3s ease;
}
.team-card:hover::before{height:100%}

.team-info{
  padding:16px 18px 18px;
  border-top:1px solid var(--border);
}
.team-name{
  font-family:var(--ff-display);
  font-size:20px;font-weight:700;letter-spacing:-.005em;
  color:var(--t1);margin-bottom:6px;
}
.team-role{
  font-family:var(--ff-mono);
  font-size:10.5px;font-weight:500;letter-spacing:1.9px;
  text-transform:uppercase;color:var(--t2);
  margin-bottom:0;
}

/* El avatar circular viejo queda anulado */
.team-avatar{
  width:100%;height:100%;border-radius:0;margin:0;
  background:var(--ink3);border:none;
}


@media(max-width:860px){
  #equipo .section-wrap{padding-top:40px;padding-bottom:46px}
  .team-card{flex:0 0 212px;min-width:212px}
  .team-name{font-size:17px}
  .team-role{font-size:9.5px;letter-spacing:1.6px}
  .team-info{padding:13px 14px 15px}
  .videos-grid{margin-top:34px}
  #videos .sec-sub{margin-bottom:30px}
}

/* ══════════════════════════════════════════
   CORRECCIONES
   ══════════════════════════════════════════ */

/* Sección de donación vacía: fuera, sin discusión */
#exclusivo{display:none!important}

/* Filtros: ninguna línea divisoria, y aire real contra la grilla */
.yt-filter-bar{
  border-bottom:none!important;
  box-shadow:none!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
.videos-grid{margin-top:72px!important}
#videos .sec-sub{margin-bottom:48px!important}

/* ══════════════════════════════════════════
   EQUIPO — grilla compacta, no carrusel gigante
   ══════════════════════════════════════════ */
.team-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  overflow:visible!important;
  width:auto!important;max-width:none!important;
  margin:0!important;padding:0!important;
}

.team-card{
  flex:none!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:0;overflow:hidden;text-align:left;
  position:relative;
  transition:border-color .2s ease,background .2s ease;
}
.team-card:hover{
  border-color:rgba(217,43,43,.4);
  background:var(--surface2);
  transform:none;
}

.team-portrait{
  position:relative;
  width:100%;aspect-ratio:1/1;
  height:auto!important;
  background:var(--ink3);
  overflow:hidden;
  display:block;
  border-radius:0;border:none;margin:0;
}
.team-portrait img,
.team-portrait .team-avatar img{
  position:absolute;inset:0;
  width:100%!important;height:100%!important;
  object-fit:cover;object-position:center 22%;
  border-radius:0!important;
  filter:grayscale(1) contrast(1.05);
  transition:filter .3s ease;
}
.team-card:hover .team-portrait img{filter:grayscale(0)}
.team-portrait::after{content:none}

/* Anula por completo el avatar circular anterior */
.team-avatar{
  position:absolute!important;inset:0;
  width:100%!important;height:100%!important;
  border-radius:0!important;margin:0!important;
  background:var(--ink3)!important;border:none!important;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:30px;color:var(--t3);
}

.team-info{
  padding:11px 12px 13px;
  border-top:1px solid var(--border);
}
.team-name{
  font-family:var(--ff-ui);
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  color:var(--t1);margin-bottom:4px;line-height:1.3;
}
.team-role{
  font-family:var(--ff-mono);
  font-size:9.5px;font-weight:400;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--t2);
  margin-bottom:0;line-height:1.4;
}

.team-dots{display:none!important}

@media(max-width:1200px){.team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .team-name{font-size:12.5px}
  .team-role{font-size:9px;letter-spacing:1px}
  .team-info{padding:9px 10px 11px}
  .videos-grid{margin-top:40px!important}
}
@media(max-width:520px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══════════════════════════════════════════
   EQUIPO — riel deslizable, una sola fila
   ══════════════════════════════════════════ */
.team-grid{
  display:flex!important;
  grid-template-columns:none!important;
  gap:18px!important;
  overflow-x:auto!important;
  overflow-y:visible;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px!important;
  /* deja que la última card respire contra el borde */
  padding-right:46px!important;
}
.team-grid::-webkit-scrollbar{display:none}

.team-card{
  flex:0 0 380px!important;
  width:380px!important;
  scroll-snap-align:start;
}

.team-info{padding:14px 15px 16px}
.team-name{font-size:16.5px;margin-bottom:5px}
.team-role{font-size:11px;letter-spacing:1.5px}

@media(max-width:1200px){
  .team-card{flex:0 0 330px!important;width:330px!important}
}
@media(max-width:860px){
  .team-grid{gap:12px!important;padding-right:18px!important}
  .team-card{flex:0 0 250px!important;width:250px!important}
  .team-name{font-size:14.5px}
  .team-role{font-size:10px;letter-spacing:1.2px}
  .team-info{padding:11px 12px 13px}
}
@media(max-width:520px){
  .team-card{flex:0 0 78vw!important;width:78vw!important}
}

/* ══════════════════════════════════════════
   VOTACIÓN — rediseño
   ══════════════════════════════════════════ */
.votacion-section{border-top:1px solid var(--border)}


/* Estado vacío: nota de archivo, no ilustración */


/* Formulario: columna sobria, sin caja flotante */

.vote-add-input{
  width:100%;
  height:44px;padding:0 14px;
  background:transparent;
  border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--t1);
  font-family:var(--ff-ui);font-size:14.5px;
  outline:none;margin-bottom:10px;
  transition:border-color .18s ease;
}


.vote-add-btn{
  width:100%;height:44px;
  background:transparent;
  border:1px solid var(--t2);border-radius:var(--r-sm);
  color:var(--t1);
  font-family:var(--ff-ui);font-size:14px;font-weight:600;letter-spacing:.3px;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease;
}
.vote-add-btn:hover{background:var(--rose);border-color:var(--rose);color:#fff;transform:none}


/* ══════════════════════════════════════════
   EQUIPO — flechas del riel
   ══════════════════════════════════════════ */
.team-rail-wrap{position:relative}

.team-nav{
  position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:9;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,11,11,.9);
  border:1px solid var(--border2);
  color:var(--t1);
  backdrop-filter:blur(8px);
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.team-nav:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.team-nav[disabled]{opacity:0;pointer-events:none}
.team-nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.team-nav-prev{left:-14px}
.team-nav-next{right:-14px}

@media(max-width:860px){.team-nav{display:none}}

/* ══════════════════════════════════════════
   EXPEDIENTES — foto a color en el hover
   ══════════════════════════════════════════ */
.exp-card-photo{
  filter:grayscale(1) contrast(1.15) brightness(.92);
  transition:filter .35s ease;
}
.exp-card:hover .exp-card-photo{filter:grayscale(0) contrast(1) brightness(1)}


/* Encuadre: la cara queda en el tercio superior */
.exp-card-photo img,.exp-mugshot img{object-position:center 30%}

/* ══════════════════════════════════════════
   EXPEDIENTE — página de detalle
   ══════════════════════════════════════════ */

/* El header fijo ocupa cinta + nav, igual que en la home */
.exp-page{
  padding-top:calc(var(--nav-h) + var(--tk-h) + 34px)!important;
  max-width:1060px;
}
body:has(.exp-page) main{padding-top:0!important}

/* El logo del nav a tamaño correcto, sin escalar de más */
.topnav .nav-logo img{height:28px;image-rendering:auto}


/* § Quién es */


/* § Pasos */


/* § Pruebas */
.exp-ev-text{padding:20px 24px;font-size:15.5px;line-height:1.7}

/* § Situación */
.exp-status-body{padding:28px;gap:16px}


/* ══════════════════════════════════════════
   EXPEDIENTE — ficha del carrusel, más aire
   ══════════════════════════════════════════ */
.exp-card{flex:0 0 372px;border-radius:var(--r-md)}
.exp-card-head{padding:18px 20px 16px}
/* El alto de .exp-card-photo se define SOLO en expedientes.css.
   Tener la misma propiedad en dos archivos hacía que el resultado
   dependiera de cuál de los dos se hubiera subido al servidor. */
.exp-card-body{padding:20px;gap:14px}
.exp-card-name{font-size:19px;line-height:1.28;letter-spacing:.3px}
.exp-meta{gap:9px}
.exp-meta-row{font-size:13.5px;line-height:1.55}
.exp-card-sum{font-size:13.5px;line-height:1.7;padding-left:14px;margin-top:2px}
.exp-card-cta{
  padding:14px 16px;font-size:13px;letter-spacing:1.2px;
  border-radius:var(--r-sm);margin-top:6px;
}

.exp-rail{gap:22px;padding-bottom:26px}
#expedientes .section-wrap{padding-top:64px;padding-bottom:70px}

@media(max-width:900px){
  .exp-page{padding-top:calc(var(--nav-h) + var(--tk-h) + 20px)!important}


  .exp-card{flex:0 0 86vw}
}

/* ══════════════════════════════════════════
   EXPEDIENTE — actualizaciones del caso
   ══════════════════════════════════════════ */
.exp-updates{list-style:none;margin:0;padding:0;position:relative}
.exp-updates::before{
  content:'';position:absolute;left:7px;top:6px;bottom:6px;
  width:1px;background:var(--border2);
}

.exp-up{
  position:relative;
  display:grid;grid-template-columns:120px 1fr;gap:22px;
  padding:0 0 26px 30px;
}
.exp-up:last-child{padding-bottom:0}
.exp-up::before{
  content:'';position:absolute;left:3px;top:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--ink2);border:2px solid var(--rose);
}
.exp-up:first-child::before{background:var(--rose)}

.exp-up-date{
  font-family:var(--ff-mono);
  font-size:12.5px;font-weight:500;letter-spacing:1px;
  color:var(--rose);padding-top:2px;
}
.exp-up-title{
  font-family:var(--ff-ui);
  font-size:16px;font-weight:600;color:var(--t1);
  margin-bottom:6px;line-height:1.35;
}
.exp-up-body p{
  font-family:var(--ff-ui);
  font-size:15px;color:var(--t2);line-height:1.7;margin:0;
}

.exp-media-cap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.exp-media-date{
  font-family:var(--ff-mono);
  font-size:11.5px;letter-spacing:.6px;color:var(--t3);flex-shrink:0;
}

@media(max-width:700px){
  .exp-up{grid-template-columns:1fr;gap:6px;padding-left:26px;padding-bottom:22px}
  .exp-up-date{font-size:11.5px}
  .exp-up-title{font-size:15px}
  .exp-up-body p{font-size:14px}
}

/* ══════════════════════════════════════════
   LOGOS — un solo criterio en todo el sitio
   ══════════════════════════════════════════ */
.nav-logo img{height:36px}           /* home: +20% */
@media(max-width:860px){.nav-logo img{height:30px}}

/* Expediente: la marca dentro de la carpeta, legible */


/* ══════════════════════════════════════════
   VOTACIÓN — versión corregida
   ══════════════════════════════════════════ */


/* Estado vacío: bloque sólido, no un recuadro punteado hueco */


/* Formulario: tarjeta contenida, con peso propio */

.vote-add-input{
  height:46px;
  background:var(--ink2);
  border-color:var(--border2);
  margin-bottom:11px;
}
.vote-add-btn{
  height:46px;
  background:var(--rose);border-color:var(--rose);color:#fff;
  font-weight:600;
}
.vote-add-btn:hover{background:#b02020;border-color:#b02020}


/* ══════════════════════════════════════════
   EXPEDIENTE — esqueleto de carga
   ══════════════════════════════════════════ */
.exp-boot{
  background:var(--ink2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:44px 46px 38px;
}
.exp-boot > *,.exp-boot span{
  background:linear-gradient(90deg,var(--ink3) 25%,var(--surface) 50%,var(--ink3) 75%);
  background-size:200% 100%;
  animation:expBoot 1.3s linear infinite;
  border-radius:3px;display:block;
}
.exp-boot-head{height:40px;width:52%;margin-bottom:14px}
.exp-boot-meta{height:14px;width:76%;margin-bottom:40px}
.exp-boot-who{display:grid;grid-template-columns:262px 1fr;gap:38px;background:none;animation:none}
.exp-boot-photo{aspect-ratio:3/4;border-radius:var(--r-sm)}
.exp-boot-lines{background:none;animation:none;display:flex;flex-direction:column;gap:16px;padding-top:6px}
.exp-boot-lines span:nth-child(1){height:30px;width:70%}
.exp-boot-lines span:nth-child(2){height:15px;width:88%}
.exp-boot-lines span:nth-child(3){height:15px;width:62%}
@keyframes expBoot{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:900px){
  .exp-boot{padding:24px 20px}
  .exp-boot-who{grid-template-columns:1fr;gap:20px}
  .exp-boot-photo{max-width:230px}
}

/* ══════════════════════════════════════════
   HERO — sin flechas laterales
   ══════════════════════════════════════════ */
.th-nav{display:none!important}

/* El círculo rojo avanza al siguiente banner */
.th-play{
  background:var(--rose);
  border:none;
  width:58px;height:58px;
  border-radius:50%;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.th-play:hover{background:#b02020;transform:scale(1.06)}
.th-play svg{width:22px;height:22px;stroke:#fff;fill:none;margin-left:2px}
.th-slide.is-active:hover .th-play{background:var(--rose)}
.th-slide.is-active:hover .th-play:hover{background:#b02020}

@media(max-width:900px){
  .th-play{width:46px;height:46px}
  .th-play svg{width:18px;height:18px}
}
@media(max-width:560px){
  .th-play{width:40px;height:40px}
  .th-play svg{width:16px;height:16px}
}

/* Banners: esquinas redondeadas */
.th-slide{border-radius:18px}
.th-skel{border-radius:18px}
@media(max-width:900px){.th-slide,.th-skel{border-radius:15px}}
@media(max-width:560px){.th-slide,.th-skel{border-radius:12px}}

/* Logo del header: +25%.
   Ojo: la regla .topnav .nav-logo img (línea ~936) le gana por especificidad
   a cualquier .nav-logo img posterior, así que el tamaño real se define acá. */
.topnav .nav-logo img{height:35px}
@media(max-width:860px){.topnav .nav-logo img{height:31px}}

/* ══════════════════════════════════════════
   RITMO ENTRE SECCIONES
   Estaban en 64/70px arriba y abajo: entre el final de una y el
   título de la siguiente quedaban ~130px de nada.
   ══════════════════════════════════════════ */
#videos .section-wrap{padding-top:56px;padding-bottom:44px}
#expedientes .section-wrap{padding-top:46px;padding-bottom:52px}
#equipo .section-wrap{padding-top:48px;padding-bottom:54px}
.sec-sub{margin-bottom:30px}
@media(max-width:860px){
  #videos .section-wrap{padding-top:34px;padding-bottom:28px}
  #expedientes .section-wrap{padding-top:30px;padding-bottom:34px}
  #equipo .section-wrap{padding-top:32px;padding-bottom:36px}
  .sec-sub{margin-bottom:22px}
}

/* ══════════════════════════════════════════
   EL EXPEDIENTE — fondo de hoja de archivo
   Cuadrícula finísima, margen rojo a la izquierda como una hoja
   rayada y la palabra CONFIDENCIAL en vertical al costado.
   Sin degradados de color ni glows: solo líneas.
   ══════════════════════════════════════════ */
#expedientes{position:relative;z-index:1;background:#0e0e0e;isolation:isolate}
#expedientes::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    /* Retícula mayor cada 180px: las líneas gruesas de la hoja */
    repeating-linear-gradient(0deg,  rgba(236,233,227,.10) 0 1px, transparent 1px 180px),
    repeating-linear-gradient(90deg, rgba(236,233,227,.10) 0 1px, transparent 1px 180px),
    /* Retícula fina cada 36px */
    repeating-linear-gradient(0deg,  rgba(236,233,227,.062) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(236,233,227,.062) 0 1px, transparent 1px 36px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 95%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 95%,transparent 100%);
}
#expedientes .section-wrap{position:relative;z-index:1}
/* Margen rojo, alineado con el contenido */
#expedientes .section-wrap::before{
  content:'';position:absolute;left:0;top:34px;bottom:34px;width:2px;
  background:rgba(224,43,43,.55);
}
/* Sello vertical al costado derecho */
#expedientes .section-wrap::after{
  content:'Confidencial · Archivo TSS';
  position:absolute;right:6px;top:52px;
  writing-mode:vertical-rl;
  font-family:var(--ff-mono,'IBM Plex Mono',monospace);
  font-size:10.5px;font-weight:600;letter-spacing:5px;text-transform:uppercase;
  color:rgba(236,233,227,.13);pointer-events:none;user-select:none;
}
@media(max-width:1100px){
  #expedientes .section-wrap::after{display:none}
}
@media(max-width:860px){
  #expedientes::before{
    background-image:
      repeating-linear-gradient(0deg,  rgba(236,233,227,.11) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(90deg, rgba(236,233,227,.11) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(0deg,  rgba(236,233,227,.062) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, rgba(236,233,227,.062) 0 1px, transparent 1px 24px);
  }
  #expedientes .section-wrap::before{top:22px;bottom:22px}
}

/* ══════════════════════════════════════════
   VIDEOS — la sección quedó fuera del rediseño
   El sistema visual escribía .vid-card / .vid-title / .vid-dur,
   pero el HTML usa .vcard / .vcard-title / .vcard-dur. Ninguna de
   esas reglas llegaba nunca: por eso los videos seguían con
   Cookconthic, radios de 11px y hover turquesa.
   ══════════════════════════════════════════ */
.vcard{
  border-radius:var(--r-md);
  border-color:var(--border);
  background:var(--ink2);
  display:flex;flex-direction:column;      /* alturas parejas en la grilla */
  transition:border-color .2s ease,transform .2s ease;
  box-shadow:none;
}
.vcard:hover{
  border-color:rgba(224,43,43,.45);
  transform:translateY(-2px);
  box-shadow:none;                          /* el sistema no usa sombras */
}
.vcard-thumb{border-radius:0}
.vcard:hover .vcard-thumb img{transform:scale(1.03)}
.vcard-ov{transition:background .2s ease}
.vcard:hover .vcard-ov{background:rgba(224,43,43,.14)}

/* Título: para leer, no para titular */
.vcard-title{
  font-family:var(--ff-ui);
  font-size:15px;font-weight:600;line-height:1.42;letter-spacing:-.005em;
  color:var(--t1);margin-bottom:10px;
}

/* Duración, fecha y vistas son datos de archivo → mono */
.vcard-dur,.vcard-date,.vcard-views{
  font-family:var(--ff-mono);
  font-size:11.5px;font-weight:500;letter-spacing:.4px;color:var(--t2);
}
.vcard-dur{
  bottom:8px;right:8px;
  border-radius:2px;background:rgba(0,0,0,.86);
  padding:3px 7px;color:#fff;
}
.vcard-date,.vcard-views{color:var(--t3)}

/* El contador de vistas sin número dejaba un ojito solo en la esquina */
.vcard-views:empty,
.vcard-date:empty{display:none}
.vcard-views svg{width:13px;height:13px;opacity:.7}

.vcard-body{
  padding:14px 15px 15px;
  flex:1;display:flex;flex-direction:column;
}
.vcard-meta{margin-top:auto;gap:10px}

/* Badges y botón de compartir con el mismo radio que el resto */
.vcard-reel-badge{
  border-radius:2px;background:rgba(0,0,0,.78);
  font-family:var(--ff-mono);font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  padding:4px 8px;
}
.vcard-share{border-radius:2px;background:rgba(0,0,0,.78)}

@media(max-width:860px){
  .vcard-title{font-size:14px;line-height:1.38}
  .vcard-body{padding:12px 13px 13px}
  .vcard-dur,.vcard-date,.vcard-views{font-size:10.5px}
}

/* ══════════════════════════════════════════════════════════════
   PASE MÓVIL
   Sube al final a propósito: cierra lo que quedó suelto en los
   breakpoints anteriores sin tener que desarmarlos.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Nada se sale de ancho ────────────────────────────────
   Un solo elemento más ancho que la pantalla hace que TODA la
   página scrollee de costado. Es la falla móvil número uno. */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg,table,pre{max-width:100%}
*{min-width:0}

/* ── 2 · Notch y barra inferior del iPhone ──────────────────── */
@media(max-width:860px){
  .tss-ticker,.topnav{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .site-footer,footer{padding-bottom:max(24px, env(safe-area-inset-bottom))}
}

/* ── 3 · El nav de expediente.html ────────────────────────────
   Esa página no tiene menú hamburguesa: los cinco links se
   amontonaban contra el logo. En móvil queda solo INICIO. */
@media(max-width:900px){
  .is-exp-page .nav-links .nlnk{display:none}
  .is-exp-page .nav-links .nlnk:first-child{
    display:inline-flex;align-items:center;
    font-size:12px;letter-spacing:1.6px;color:var(--t1);
  }
}

/* ── 4 · Zonas de toque de 44px ───────────────────────────────
   Los controles estaban dimensionados para el mouse. */
@media(hover:none){
  .th-dot{width:12px;height:12px;margin:0 3px}
  .th-dot.is-active{width:30px}
  .th-dots{padding:14px 0 4px}
  .nav-hamburger{padding:10px;margin:-10px}
  .mobile-drawer .nlnk{padding:14px 16px;font-size:16px}
  .mobile-drawer-close{width:44px;height:44px;top:10px;right:10px}
  .xp-jump-link{padding:11px 15px}
  .xp-foot-top{padding:13px 22px}
  .exp-card-cta{padding:15px 16px}
  .btn-load-more{padding:14px 30px}

}

/* ── 5 · Lo que solo aparecía en hover no existe en el celular ── */
@media(hover:none){
  .vcard-share{opacity:1;background:rgba(0,0,0,.6)}
  .th-slide{opacity:.55}
  .th-slide.is-active{opacity:1}
}
/* Los retratos quedan en blanco y negro también en el celular.
   El hover que los pasa a color no existe ahí, pero el B&W es la
   identidad de la sección, no un estado de reposo. */

/* ── 6 · Formularios: 16px o iOS hace zoom al enfocar ───────── */
@media(max-width:860px){
  input,select,textarea{font-size:16px!important}
}

/* ── 7 · Teléfono chico: 390px y abajo ─────────────────────── */
@media(max-width:430px){
  :root{ --tk-h:26px; }   /* --nav-h lo fija el bloque del header móvil */

  .sec-heading{font-size:29px;line-height:1.1}
  .sec-sub{font-size:14px;margin-bottom:18px}
  .eyebrow{font-size:10px;letter-spacing:1.8px}
  .section-wrap{padding-left:16px;padding-right:16px}

  /* Hero de banners */
  :root{--th-w:88vw;--th-gap:10px}
  .th-title{font-size:14px}
  .th-kicker{font-size:10px;letter-spacing:1.2px}
  .th-body{padding:12px 14px;gap:10px}

  /* Fichas del expediente en la home */
  .exp-card{flex:0 0 88vw}
  .exp-skel{flex:0 0 88vw}
  .exp-card-photo{max-height:210px}
  .exp-card-head{padding:14px 16px 12px;min-height:0}
  .exp-card-body{padding:16px}
  .exp-card-name{font-size:17px}
  .exp-card-head .exp-stamp{font-size:10px;padding:5px 9px;max-width:120px}

  /* Videos */
  .vcard-body{padding:11px 12px 12px}
  .vcard-title{font-size:13.5px}

  /* Página de expediente */
  .xp-name{font-size:22px}
  .xp-lead{font-size:15px}
  .xp-bar{padding:12px 15px}
  .xp-hero-grid{padding:18px 15px}
  .xp-hero-photo{max-width:100%}
  .xp-strip{grid-template-columns:1fr;gap:12px;padding:14px 15px}
  .xp-sec{margin-top:32px}
  .xp-dato{padding:14px 16px}
  .xp-cita{padding:16px 18px}
  .xp-cita p{font-size:15px}
}

/* ── 8 · El índice pegajoso no se come media pantalla ───────── */
@media(max-width:860px) and (max-height:760px){
  .xp-jump{position:static;margin:0;padding:14px 0;background:none;backdrop-filter:none}
  .xp-sec{scroll-margin-top:calc(var(--nav-h) + var(--tk-h, 0px) + 12px)}
}

/* ── 9 · Menos trabajo de pintado en el celular ─────────────── */
@media(max-width:860px){
  .glow-bg{display:none}          /* tres blur() de 130px a pantalla completa */
  body::before{opacity:.015}
}

/* ── 10 · Respetar "reducir movimiento" ─────────────────────── */
@media(prefers-reduced-motion:reduce){
  .tk-track{animation:none}
  .th-rail{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   1 · SPLASH — el logo ya no queda solo en el medio del negro
   logo-nav.png es chico: estirarlo a 140px lo pixelaba, y el
   drop-shadow animado acentuaba el borde blando. Va a tamaño
   contenido, sin glow, sobre la trama de archivo del proyecto.
   ══════════════════════════════════════════════════════════════ */
#splashScreen{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:#0a0a0a!important;
  align-items:center;justify-content:center;
}
#splashScreen::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(236,233,227,.035) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(236,233,227,.035) 0 1px, transparent 1px 38px);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 10%, transparent 72%);
          mask-image:radial-gradient(ellipse at center, #000 10%, transparent 72%);
}
/* Grano, igual que el resto del sitio */
#splashScreen::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px;
}
/* El posicionamiento vive en la regla de arriba, no en un style= en
   el HTML: antes había ahí un padding-bottom:18vh que descentraba
   el logo. El display lo maneja el script, que es quien decide si
   el splash se muestra. */

/* ── Composición ──
   Un solo grupo que se encoge al contenido: su ancho queda definido
   por la línea de texto más larga, y el logo se dimensiona como un
   porcentaje de ese ancho. Si mañana cambia la frase, el logo se
   ajusta solo en vez de quedar desproporcionado.
   Todo entra a la vez: antes el logo aparecía primero y el resto
   medio segundo después, y se notaba el salto. */
#splashScreen{
  flex-direction:column;
}

.splash-grupo{
  position:relative;z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;
  gap:22px;
  max-width:calc(100vw - 48px);
  opacity:0;
  animation:splashEntra .85s cubic-bezier(.16,1,.3,1) .12s forwards;
}
@keyframes splashEntra{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:none}
}

/* Solo el monograma. La bajada "TODO SE SABE" sale sobrando acá:
   el texto de abajo ya dice el nombre. */
/* El ancho del grupo lo marca la línea más larga ("JUEVES 20:30 ·
   EN VIVO POR YOUTUBE"), así que el logo va a un tercio de eso: al
   52% quedaba dominando la pantalla. */
.splash-logo{
  width:30%;height:auto;display:block;
  margin-bottom:6px;
}

/* La frase. Es la que manda el ancho del grupo. */
.splash-estado{
  font-family:var(--ff-mono);
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--t2);
  text-align:center;line-height:1.9;
  white-space:nowrap;
}
.splash-estado em{
  display:block;font-style:normal;
  color:var(--t1);font-weight:500;
}
.splash-estado b{
  color:var(--rose);font-weight:400;
  animation:splashCursor 1s steps(1) infinite;
}
@keyframes splashCursor{50%{opacity:0}}

/* La barra ocupaba el ancho completo del grupo y se comía la
   composición. A menos de la mitad acompaña al texto en vez de
   competir con él. */
.splash-bloques{
  display:flex;gap:3px;
  width:44%;
}
.splash-bloques i{
  flex:1;height:5px;
  background:rgba(236,233,227,.09);
  transition:background .25s ease;
}
.splash-bloques i.on{background:var(--rose)}

/* La linea del horario se quito: el sitio ya lo dice en la franja
   superior, y aca alargaba el grupo sin aportar. */

/* En pantallas angostas la nota no entra en una línea: ahí sí se
   permite que corte, si no desborda el grupo. */
@media(max-width:380px){
  .splash-estado{white-space:normal}
  .splash-logo{width:34%}
}

@media(prefers-reduced-motion:reduce){
  .splash-grupo{animation:none;opacity:1}
  .splash-estado b{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   2 · FILTROS DE CLIPS — una sola fila, deslizable
   Los botones viven en #filterScroll, que es el único que
   scrollea. El buscador quedó afuera como hermano: cuando estaba
   adentro de la fila la reventaba y las etiquetas se recortaban.
   ══════════════════════════════════════════════════════════════ */
.yt-filter-scroll{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  min-width:0;
}

@media(max-width:860px){
  .yt-filter-bar{
    display:block;overflow:visible;
    margin:0;padding:0;
    -webkit-mask-image:none;mask-image:none;
  }

  /* Buscador arriba, a lo ancho */
  .yt-search-field{
    display:block;width:100%;margin:0 0 14px;height:42px;
  }

  /* La fila de categorías: nowrap + scroll propio */
  .yt-filter-scroll{
    flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    /* sangra el margen de la sección para que el riel llegue al borde */
    margin:0 -16px;
    padding:2px 16px 10px;
  }
  .yt-filter-scroll::-webkit-scrollbar{display:none}

  .yt-filter-btn{
    flex:0 0 auto;scroll-snap-align:start;
    height:36px;padding:0 15px;font-size:13.5px;
    white-space:nowrap;
  }
}

/* Aviso de que el riel sigue: un degradado encima, NO una máscara
   sobre el contenedor (la máscara recortaba el texto). */
@media(max-width:860px){
  .yt-filter-bar{position:relative}
  .yt-filter-bar::after{
    content:'';position:absolute;right:-16px;bottom:10px;
    width:34px;height:36px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--ink,#0a0a0a) 70%);
  }
}

@media(max-width:430px){
  .yt-filter-scroll{gap:7px;margin:0 -16px;padding:2px 16px 10px}
  .yt-filter-btn{height:34px;padding:0 13px;font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════════
   3 · PIE — la bajada en dos líneas, no en tres con una huérfana
   ══════════════════════════════════════════════════════════════ */
/* Sin margin auto: centraba el párrafo dentro de la columna mientras
   el logo y las redes quedaban a la izquierda. Todo alineado igual. */
.foot-tagline,.site-footer .foot-desc,.foot-brand p{
  max-width:34ch;margin-left:0;margin-right:0;
  text-align:left;text-wrap:balance;
}
.foot-brand{text-align:left}
.foot-brand img{height:38px;width:auto;object-fit:contain;display:block;margin:0}
.foot-socs{justify-content:flex-start}

@media(max-width:860px){
  .foot-tagline,.site-footer .foot-desc,.foot-brand p{
    max-width:30ch;font-size:14.5px;line-height:1.55;
    margin-left:0;margin-right:0;text-align:left;
  }
  .foot-brand{text-align:left}
  .foot-brand img{height:34px;margin:0}
}

/* ══════════════════════════════════════════════════════════════
   4 · HEADER MÓVIL — menú · logo · cuenta
   Grid de tres columnas: el logo queda centrado respecto de la
   pantalla, no del hueco que dejan los botones de los costados.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  :root{ --nav-h:72px; }

  .topnav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    height:var(--nav-h);
    gap:10px;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }

  .topnav .nav-hamburger{
    grid-column:1;grid-row:1;justify-self:start;
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;margin-left:-8px;padding:0;
  }
  .topnav .nav-hamburger svg{width:26px;height:26px}

  .topnav .nav-logo{grid-column:2;grid-row:1;justify-self:center}
  .topnav .nav-logo img{height:34px}

  .topnav .nav-auth,
  .topnav #navUser{grid-column:3;grid-row:1;justify-self:end}
  .nav-auth .btn-cta,.nav-avatar{width:40px;height:40px}

  .topnav .nav-links,
  .topnav .nav-spacer{display:none}
  .topnav .nlnk::after,.topnav .nlnk.active::after{display:none}
}


/* ══════════════════════════════════════════════════════════════
   5 · EYEBROWS — fuera en el celular
   "— CANAL OFICIAL" y compañía son un rótulo de apoyo: en pantalla
   angosta solo suman altura antes de un título que ya dice lo mismo.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  .eyebrow{display:none}
  .sec-heading{margin-top:0}
}

/* ══════════════════════════════════════════════════════════════
   6 · BANNERS EN EL CELULAR — miniatura limpia
   En una pantalla angosta el título de dos o tres líneas tapaba
   media imagen. Queda solo la portada y el botón de siguiente.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  /* .th-play es hijo de .th-body: ocultar el bloque entero se llevaba
     puesto el botón. Se oculta solo el texto. */
  .th-body{
    display:flex;justify-content:flex-end;align-items:flex-end;
    padding:0 14px 14px;background:none;
  }
  .th-titles{display:none}
  .th-slide::after{opacity:.35}          /* menos velo: no hay texto que leer */

  /* Sin hover, el círculo va rojo desde el arranque */
  .th-play{
    width:50px;height:50px;
    background:var(--rose);
    border-color:var(--rose);
    backdrop-filter:none;
    box-shadow:0 2px 14px rgba(0,0,0,.45);
  }
  .th-play svg{width:22px;height:22px}
  .th-slide:not(.is-active) .th-play{opacity:0;pointer-events:none}
}

/* ══════════════════════════════════════════════════════════════
   7 · MENÚ DESPLEGABLE
   Venía con 19px de texto, 4px de separación y ancho fijo de
   270px: los links largos se pisaban entre sí. Se rehace entero.
   ══════════════════════════════════════════════════════════════ */
.mobile-drawer{
  width:min(84vw, 320px);
  right:calc(-1 * min(84vw, 320px));
  height:100dvh;
  background:#0e0e0e;
  border-left:1px solid var(--border);
  padding:0;
  display:flex;flex-direction:column;gap:0;
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:max(20px, env(safe-area-inset-bottom));
}
.mobile-drawer.open{right:0}

/* Encabezado propio, así el botón de cerrar deja de flotar sobre
   el primer link */
.mobile-drawer::before{
  content:'Menú';
  display:block;flex:0 0 auto;
  padding:26px 22px 14px;
  font-family:var(--ff-mono);
  font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t3);
  border-bottom:1px solid var(--border);
  margin-bottom:10px;
}
.mobile-drawer-close{
  position:absolute;top:14px;right:12px;
  width:44px;height:44px;
  display:grid;place-items:center;
  background:none;border:none;color:var(--t2);
  font-size:22px;line-height:1;
}

.mobile-drawer .nlnk{
  display:flex;align-items:center;
  min-height:50px;padding:12px 22px;
  margin:0;border-radius:0;
  font-family:var(--ff-ui);
  font-size:15.5px;font-weight:600;letter-spacing:.2px;line-height:1.3;
  color:var(--t1);text-decoration:none;
  border-left:2px solid transparent;
}
.mobile-drawer .nlnk.is-accent{color:var(--rose)}
.mobile-drawer .nlnk:hover,
.mobile-drawer .nlnk:active{
  background:rgba(255,255,255,.045);
  color:#fff;border-left-color:var(--rose);
}
.mobile-drawer-divider{height:1px;background:var(--border);margin:12px 22px}

#drawerAuth{padding:8px 22px 0!important}
.mobile-drawer .btn-cta{
  width:100%;height:50px;
  display:flex;align-items:center;justify-content:center;
  background:var(--rose);color:#fff;
  border:none;border-radius:4px;
  font-family:var(--ff-ui);
  font-size:15px;font-weight:600;letter-spacing:.3px;
  text-transform:none;
}
.mobile-drawer .btn-cta:hover,
.mobile-drawer .btn-cta:active{background:#c42424}

/* ══════════════════════════════════════════════════════════════
   8 · FICHA DEL EQUIPO — se había quedado fuera del rediseño
   Traía el avatar circular con degradado turquesa-violeta, rol en
   cian y radios de 16px: toda paleta y medidas anteriores.
   Ahora el retrato manda, como en las tarjetas de la sección.
   ══════════════════════════════════════════════════════════════ */
.team-modal-overlay{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(3px);
  padding:24px;
}
.team-modal{
  max-width:400px;
  padding:0;                       /* el retrato va a sangre */
  overflow:hidden;
  background:var(--ink2);
  border:1px solid var(--border);
  border-radius:6px;
  text-align:left;
}

/* Retrato grande, a lo ancho del modal */
.team-modal-avatar{
  width:100%;height:auto;
  aspect-ratio:4/5;
  margin:0;border:none;border-radius:0;
  background:var(--ink3);
  display:grid;place-items:center;
  font-family:var(--ff-display);font-size:64px;font-weight:800;
  color:var(--t3);
  overflow:hidden;
}
.team-modal-avatar img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  border-radius:0;
}

/* Botón de cerrar sobre la foto */
.team-modal-close{
  top:10px;right:10px;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:4px;
  background:rgba(0,0,0,.55);
  color:#fff;font-size:18px;line-height:1;
  z-index:2;
}
.team-modal-close:hover{background:var(--rose);color:#fff}

/* Texto */
.team-modal-name{
  font-family:var(--ff-display);
  font-size:27px;font-weight:800;line-height:1.1;
  color:var(--t1);
  margin:0;padding:22px 24px 0;
}
.team-modal-role{
  font-family:var(--ff-mono);
  font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--rose);
  margin:0;padding:8px 24px 0;
}
.team-modal-bio{
  font-family:var(--ff-ui);
  font-size:15.5px;line-height:1.62;color:var(--t2);
  margin:0;padding:14px 24px 0;
}
.team-modal-bio:empty{display:none}

/* Redes: cuadradas, del sistema, no círculos turquesa */
.team-modal-socials{
  justify-content:flex-start;gap:8px;
  margin:0;padding:20px 24px 24px;
  border-top:1px solid var(--border);margin-top:20px;
}
.team-modal-socials a{
  width:40px;height:40px;border-radius:4px;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--t2);
}
.team-modal-socials a:hover{
  background:transparent;
  border-color:var(--rose);color:var(--rose);
}
.team-modal-socials a svg{width:17px;height:17px}

@media(max-width:560px){
  .team-modal-overlay{padding:16px}
  .team-modal{max-width:340px}
  .team-modal-avatar{aspect-ratio:1/1}
  .team-modal-name{font-size:23px;padding:18px 20px 0}
  .team-modal-role{padding:7px 20px 0}
  .team-modal-bio{font-size:15px;padding:12px 20px 0}
  .team-modal-socials{padding:16px 20px 20px;margin-top:16px}
}

/* ══════════════════════════════════════════════════════════════
   9 · FICHA DE VIDEO — solo escritorio
   Al hacer click en un clip se abre a pantalla completa con la
   miniatura del propio video de fondo. "Ver ahora" reemplaza esa
   miniatura por el reproductor, sin cambiar de página.
   ══════════════════════════════════════════════════════════════ */
.vdetail{
  position:fixed;inset:0;z-index:950;
  display:none;
  background:var(--ink);
  overflow:hidden;
}
.vdetail.open{display:block;animation:vdIn .28s ease}
@keyframes vdIn{from{opacity:0}to{opacity:1}}

/* Fondo: la miniatura del clip */
.vd-bg{
  position:absolute;inset:0;
  background-position:center 28%;
  background-size:cover;background-repeat:no-repeat;
  transform:scale(1.04);
  filter:saturate(.9);
  transition:opacity .35s ease;
}
/* Dos velos: uno vertical para el pie, uno horizontal para el texto */
.vd-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,11,11,.92) 34%, rgba(11,11,11,.35) 62%, rgba(11,11,11,.15) 100%),
    linear-gradient(0deg,  var(--ink) 0%, rgba(11,11,11,.25) 42%, transparent 72%);
}

/* Reproductor: ocupa el lugar del fondo */
.vd-player{
  position:absolute;inset:0;z-index:3;
  display:none;background:#000;
}
.vd-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vdetail.is-playing .vd-player{display:block}
.vdetail.is-playing .vd-bg,
.vdetail.is-playing .vd-scrim,
.vdetail.is-playing .vd-info{opacity:0;pointer-events:none}
.vd-info{transition:opacity .3s ease}

/* Volver */
.vd-back{
  position:absolute;top:26px;left:34px;z-index:6;
  display:flex;align-items:center;gap:9px;
  padding:10px 16px 10px 13px;
  border:1px solid var(--border2);border-radius:var(--r-sm);
  background:rgba(11,11,11,.6);backdrop-filter:blur(8px);
  color:var(--t1);
  font-family:var(--ff-mono);
  font-size:11.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  transition:border-color .18s ease,background .18s ease;
}
.vd-back:hover{border-color:var(--rose);background:rgba(11,11,11,.85)}
.vd-back svg{width:16px;height:16px}

/* Bloque de información */
.vd-info{
  position:absolute;z-index:4;
  left:0;bottom:0;
  width:min(46%, 620px);min-width:420px;
  padding:0 0 clamp(50px,9vh,90px) clamp(34px,5vw,80px);
}
.vd-eyebrow{
  font-family:var(--ff-mono);
  font-size:11px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--rose);margin-bottom:14px;
}
.vd-eyebrow::before{
  content:'';display:inline-block;
  width:22px;height:1px;background:var(--rose);
  vertical-align:middle;margin-right:10px;transform:translateY(-1px);
}
.vd-title{
  font-family:var(--ff-display);
  font-size:clamp(34px,3.4vw,56px);font-weight:800;letter-spacing:-.015em;
  line-height:1.05;color:var(--t1);
  margin:0 0 16px;text-wrap:balance;
}
.vd-meta{
  font-family:var(--ff-mono);
  font-size:12.5px;letter-spacing:1.2px;color:var(--t2);
  margin-bottom:18px;
}
.vd-desc{
  font-family:var(--ff-ui);
  font-size:16px;line-height:1.62;color:var(--t2);
  margin:0 0 28px;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* Acciones */
.vd-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 26px;
  border-radius:var(--r-sm);
  font-family:var(--ff-ui);
  font-size:14.5px;font-weight:600;letter-spacing:.2px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.vd-btn svg{width:19px;height:19px;flex:0 0 auto}
.vd-btn-play{background:var(--rose);color:#fff;border:1px solid var(--rose)}
.vd-btn-play:hover{background:#b02020;border-color:#b02020}
.vd-btn-ghost{
  background:rgba(236,233,227,.07);
  border:1px solid var(--border2);
  color:var(--t1);
}
.vd-btn-ghost:hover{background:rgba(236,233,227,.13);border-color:var(--t2)}
.vd-btn-ghost.is-on{border-color:var(--rose);color:var(--rose)}
.vd-btn-ghost.is-on svg{transform:rotate(45deg)}   /* el + pasa a ✕ */
.vd-actions .vd-btn:last-child{padding:0 16px}

/* En pantallas medianas el bloque ocupa más ancho */
@media(max-width:1280px){
  .vd-info{width:min(58%, 560px);min-width:0}
  .vd-scrim{
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(11,11,11,.9) 46%, rgba(11,11,11,.2) 100%),
      linear-gradient(0deg,  var(--ink) 0%, rgba(11,11,11,.3) 46%, transparent 74%);
  }
}

/* Abajo de 900px no existe: el celular sigue reproduciendo en la ficha */
@media(max-width:900px){
  .vdetail,.vdetail.open{display:none!important}
}

/* ══════════════════════════════════════════════════════════════
   10 · AVISOS (toast)
   Venía a 19px con un emoji de 22px: ocupaba más que el mensaje.
   Queda una barra chica con una marca roja al costado.
   ══════════════════════════════════════════════════════════════ */
.toast{
  bottom:22px;right:22px;
  background:var(--ink2);
  border:1px solid var(--border2);
  border-left:3px solid var(--rose);
  border-radius:var(--r-sm);
  padding:11px 16px;gap:0;
  font-family:var(--ff-ui);
  font-size:13.5px;font-weight:500;letter-spacing:.1px;
  color:var(--t1);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  max-width:300px;
}
.toast-icon{display:none}          /* fuera el emoji */

@media(max-width:860px){
  .toast{bottom:14px;right:14px;left:14px;max-width:none;font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════════
   11 · TODOS LOS CLIPS — portadas verticales
   Las miniaturas vienen en 16:9 de YouTube y Mediastream; acá se
   recortan a 2:3 con el encuadre corrido hacia arriba para no
   cortar caras. El título va sobre la portada, como en un afiche.
   Solo escritorio: en el celular el 16:9 se mantiene.
   ══════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .videos-grid{
    /* 4 por fila en 1400px, como la referencia. auto-fill los
       reacomoda solo al achicar la ventana. */
    grid-template-columns:repeat(auto-fill,minmax(286px,1fr))!important;
    gap:38px 24px;
  }

  .vcard{
    position:relative;
    background:none;border:none;border-radius:0;overflow:visible;
    transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .vcard:hover{transform:translateY(-6px) scale(1.04);border:none;box-shadow:none}

  /* Los vecinos se apagan para que resalte el que mirás */
  .videos-grid:hover .vcard{opacity:.55;transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1)}
  .videos-grid:hover .vcard:hover{opacity:1}

  /* La portada: 2:3, recortada desde el 16:9 original */
  .vcard-thumb{
    aspect-ratio:2/3;
    border-radius:12px;overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 10px 32px rgba(0,0,0,.55);
    transition:border-color .26s ease,box-shadow .26s ease;
  }
  .vcard-thumb img{
    width:100%;height:100%;object-fit:cover;
    object-position:center 26%;      /* la cara queda en el tercio superior */
  }
  .vcard:hover .vcard-thumb{
    border-color:rgba(236,233,227,.45);
    box-shadow:0 18px 44px rgba(0,0,0,.72);
  }
  .vcard:hover .vcard-thumb img{transform:scale(1.05)}

  /* Velo inferior para que el título se lea sobre cualquier imagen */
  .vcard-thumb::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.93) 100%);
  }

  /* Título y datos, sobre la portada */
  .vcard-body{
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    padding:0 20px 20px;
    background:none;border-top:none;
  }
  .vcard-title{
    font-size:17px;font-weight:600;line-height:1.3;
    color:#fff;margin-bottom:8px;
    text-shadow:0 2px 10px rgba(0,0,0,.8);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .vcard-meta{
    gap:8px;align-items:center;margin-top:0;
    font-family:var(--ff-mono);
    font-size:11.5px;letter-spacing:.6px;
    color:rgba(236,233,227,.72);
  }

  /* Duración arriba, para no pelear con el título */
  .vcard-dur{
    top:12px;right:12px;bottom:auto;
    background:rgba(0,0,0,.8);backdrop-filter:blur(3px);
    padding:4px 9px;border-radius:3px;font-size:11.5px;
  }
  .vcard-share{top:12px;left:12px;right:auto;z-index:5}   /* por encima del velo */

  /* El play centrado estorba sobre una portada */
  .vcard-ov .vplay{opacity:0;transition:opacity .22s ease}
  .vcard:hover .vcard-ov .vplay{opacity:1}
  .vcard:hover .vcard-ov{background:rgba(0,0,0,.18)}

  /* Pantallas medianas: portadas un punto más chicas */
  @media(max-width:1200px){
    .videos-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;gap:32px 20px}
    .vcard-title{font-size:15.5px}
    .vcard-body{padding:0 16px 16px}
  }

  /* Los verticales de Mediastream ya venían así: no recortar dos veces */
  .vcard.is-reel .vcard-thumb img{object-fit:cover;position:static;transform:none;width:100%;max-width:none;left:auto}
  .vcard.is-reel:hover .vcard-thumb img{transform:scale(1.05)}
}

/* ══════════════════════════════════════════════════════════════
   12 · PÁGINA DE EXPEDIENTE — más ancho, más cuerpo, más contraste
   Va en polish.css y no en expedientes.css porque este archivo
   carga después: si no, .exp-page{max-width:1060px} de la línea
   ~960 se comía el ancho nuevo.
   ══════════════════════════════════════════════════════════════ */

/* ── Fondo de hoja de archivo, igual que la sección de la home ── */
.is-exp-page{background:#0e0e0e}
.is-exp-page::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(236,233,227,.10) 0 1px, transparent 1px 180px),
    repeating-linear-gradient(90deg, rgba(236,233,227,.10) 0 1px, transparent 1px 180px),
    repeating-linear-gradient(0deg,  rgba(236,233,227,.062) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(236,233,227,.062) 0 1px, transparent 1px 36px);
}
/* OJO: acá NO se toca `position`. La cinta, el nav y el visor son
   position:fixed; ponerles relative los saca del viewport y los
   manda al flujo del documento — de ahí salía la franja de
   cuadriculado entre la cinta y el menú. Ya traen su z-index. */
.is-exp-page main{position:relative;z-index:1}

/* ── Más ancho ─────────────────────────────────────────────── */
.exp-page{
  max-width:1560px!important;
  padding-left:52px;padding-right:52px;
  background:var(--ink);                 /* negro sólido detrás del expediente */
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}
/* El índice pegajoso sangra justo el padding de la página, ni un px
   de más: antes se le escapaba un rectángulo negro por el costado. */
.xp-jump{
  margin:0 -52px;padding:16px 52px;
  background:var(--ink);backdrop-filter:none;
}

/* El retrato y la columna de datos acompañan el ancho nuevo */
.xp-hero-grid{grid-template-columns:250px 1fr;gap:42px;padding:38px 44px}
.xp-bar,.xp-strip{padding:22px 48px}

/* ── Cuerpo de texto más grande y en hueso, no en gris ─────── */
.xp-lead{font-size:21.5px;line-height:1.58;color:var(--t1);max-width:64ch}
.xp-step-text{font-size:20.5px;line-height:1.62;color:var(--t1)}
.xp-ev-text{font-size:19.5px;line-height:1.6;color:var(--t1)}
.xp-status-body p{font-size:20.5px;line-height:1.62;color:var(--t1)}
.xp-libre-texto p{font-size:20.5px;line-height:1.62;color:var(--t1);max-width:80ch}
.exp-up-body p{font-size:19.5px;line-height:1.62;color:var(--t1)}
.xp-cita p{font-size:22px}
.xp-wip{font-size:18.5px;color:var(--t2);max-width:72ch}

/* Datos de la ficha */
.xp-fact dd{font-size:18.5px}
.xp-fact dt{font-size:11.5px;color:var(--t2)}
.xp-name{font-size:52px}
.xp-dato dd{font-size:25px}
.xp-kv b{font-size:16px}

/* Encabezados de sección y del índice, un punto más */
.xp-sec-title{font-size:25px}
.xp-jump-link{font-size:14px}
.exp-up-title{font-size:20px;color:var(--t1)}

/* Las etiquetas quedan en gris a propósito: son rótulos, no texto */
.xp-sec-meta,.xp-eyebrow,.xp-file,.xp-kv span,.xp-foot,.xp-foot-meta{color:var(--t3)}

@media(max-width:1660px){
  .exp-page{max-width:100%!important;padding-left:30px;padding-right:30px;border:none}
  .xp-jump{margin:0 -30px;padding:15px 30px}
}
@media(max-width:860px){
  .exp-page{padding-left:16px;padding-right:16px}
  .xp-jump{margin:0 -16px;padding:12px 16px}
  .xp-hero-grid{grid-template-columns:1fr;gap:20px;padding:22px 18px}
  .xp-bar,.xp-strip{padding:14px 18px}
  .xp-lead{font-size:16px}
  .xp-step-text,.xp-status-body p,.xp-libre-texto p{font-size:16px}
  .xp-ev-text{font-size:15.5px}
  .exp-up-body p{font-size:15.5px}
  .xp-name{font-size:26px}
  .xp-sec-title{font-size:16px}
  .is-exp-page::after{
    background-image:
      repeating-linear-gradient(0deg,  rgba(236,233,227,.11) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(90deg, rgba(236,233,227,.11) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(0deg,  rgba(236,233,227,.062) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, rgba(236,233,227,.062) 0 1px, transparent 1px 24px);
  }
}


/* El ancho mayor deja lugar para un retrato más grande */
@media(min-width:1200px){
  .xp-hero-grid{grid-template-columns:275px 1fr;gap:48px;padding:42px 48px}
  .xp-bar,.xp-strip{padding:20px 42px}
  .xp-step{grid-template-columns:120px 1fr;gap:32px;padding:26px 4px}
  .xp-step-num{font-size:36px}
}


/* Los números de sección y del índice, en blanco sobre el rojo.
   Iban en #0a0a0a y sobre el rojo quedaban casi negros. */
.xp-sec-num{color:#fff}
.xp-jump-num{color:#fff}
.xp-jump-link.is-current .xp-jump-num{color:#fff}
.xp-chip{color:#fff;background:var(--rose)}
.xp-up-flag{color:#fff}

/* ══════════════════════════════════════════════════════════════
   13 · ESQUELETO DE LA GRILLA DE CLIPS
   El catálogo se arma con YouTube + Mediastream. Mientras llegan
   las dos, se muestran estos huecos en vez de pintar una grilla
   provisoria que después se reemplaza sola.
   ══════════════════════════════════════════════════════════════ */
.vcard-skel{
  border-radius:12px;overflow:hidden;
}
.vcard-skel-thumb,
.vcard-skel-l1,
.vcard-skel-l2{
  background:linear-gradient(90deg,var(--ink2) 25%,var(--surface) 50%,var(--ink2) 75%);
  background-size:200% 100%;
  animation:skelPulso 1.4s linear infinite;
  border-radius:6px;
}
.vcard-skel-thumb{aspect-ratio:2/3;border-radius:12px;margin-bottom:12px}
.vcard-skel-l1{height:14px;width:88%;margin-bottom:8px}
.vcard-skel-l2{height:14px;width:58%}
@keyframes skelPulso{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  .vcard-skel-thumb,.vcard-skel-l1,.vcard-skel-l2{animation:none}
}
@media(max-width:900px){
  .vcard-skel-thumb{aspect-ratio:16/9}
}

/* ══════════════════════════════════════════════════════════════
   14 · REPRODUCTOR A TODO EL ANCHO
   Se quitó la columna de comunidad (chat, reacciones, encuesta y
   preguntas) el 19/09/2026: el chat vive en YouTube. La grilla de
   dos columnas queda en una sola.
   ══════════════════════════════════════════════════════════════ */
.hero-live{
  grid-template-columns:1fr!important;
  border-bottom:none;
}
.hero-live .player-col{max-width:100%}
.hero-live .yt-wrap{aspect-ratio:16/9;width:100%}

/* ── Esqueleto de la primera pintura ──
   Este es el que está escrito en el HTML y se ve antes de que corra
   app.js. Sus reglas también cayeron en la limpieza del 19/09/2026.
   No es el mismo que .vcard-skel, que se pinta por JS cuando el
   catálogo todavía no llegó. */
.skel-card{border-radius:12px;overflow:hidden}
.skel-thumb,
.skel-line{
  background:linear-gradient(90deg,var(--ink2) 25%,var(--surface) 50%,var(--ink2) 75%);
  background-size:200% 100%;
  animation:skelPulso 1.4s linear infinite;
  border-radius:6px;
}
.skel-thumb{aspect-ratio:2/3;border-radius:12px}
.skel-body{padding:12px 2px 0}
.skel-line{height:14px;margin-bottom:8px}
.skel-line.short{width:58%}
.skel-line.xshort{width:34%}
@media(prefers-reduced-motion:reduce){
  .skel-thumb,.skel-line{animation:none}
}
@media(max-width:900px){
  .skel-thumb{aspect-ratio:16/9}
}


/* ══════════════════════════════════════════════════════════════
   NACHO EN VIVO — las emisiones del domingo
   ══════════════════════════════════════════════════════════════
   Vertical y en fila. La tarjeta es 9:16 porque así se filma; una
   grilla de verticales hace scroll infinito y no deja comparar. */
#nacho-en-vivo[hidden]{display:none}
.nv-rail-wrap{position:relative;margin-top:26px}
.nv-rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nv-rail::-webkit-scrollbar{display:none}

.nv-card{
  flex:0 0 clamp(168px,22vw,230px);scroll-snap-align:start;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;
}
.nv-thumb{
  position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  border-radius:12px;background:#000;border:1px solid var(--border,#242424);
  transition:border-color .25s ease,transform .25s ease;
}
.nv-card:hover .nv-thumb,
.nv-card:focus-visible .nv-thumb{border-color:var(--rose,#d92b2b);transform:translateY(-3px)}
.nv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nv-thumb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.65) 100%);
}
.nv-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(217,43,43,.92);color:#fff;opacity:0;transition:all .25s ease;z-index:2;
}
.nv-play svg{width:20px;height:20px;margin-left:2px}
.nv-card:hover .nv-play,
.nv-card:focus-visible .nv-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.nv-dur{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;font-family:var(--ff-mono,monospace);
  font-size:11px;padding:2px 7px;border-radius:4px;
}
.nv-title{
  font-size:14px;line-height:1.35;margin:10px 0 4px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nv-fecha{font-family:var(--ff-mono,monospace);font-size:11.5px;color:var(--t3,#8a8a8a)}

/* Las flechas solo en escritorio: en celular se arrastra con el dedo. */
.nv-nav{
  position:absolute;top:calc(50% - 40px);transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border,#242424);
  background:rgba(10,10,10,.85);color:#fff;cursor:pointer;display:grid;place-items:center;
}
.nv-nav:hover{border-color:var(--rose,#d92b2b)}
.nv-nav[hidden]{display:none}
.nv-nav::before{content:'';width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.nv-prev{left:-12px}
.nv-prev::before{transform:rotate(-135deg);margin-left:3px}
.nv-next{right:-12px}
.nv-next::before{transform:rotate(45deg);margin-right:3px}

@media (max-width:900px){
  .nv-nav{display:none}
  .nv-card{flex-basis:44vw}
}

/* ══════════════════════════════════════════════════════════════
   CUENTA REGRESIVA — franja entre el nav y el carrusel
   ══════════════════════════════════════════════════════════════ */
.tss-countdown{
  background:linear-gradient(90deg,#0b0b0b 0%,#1a0a0a 50%,#0b0b0b 100%);
  border-bottom:1px solid rgba(217,43,43,.3);
  padding:10px 20px;text-align:center;
}
.cd-inner{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
}
.cd-label{
  font-family:var(--ff-display,inherit);font-size:14px;font-weight:800;
  letter-spacing:.18em;color:var(--rose,#d92b2b);
}
.cd-sep{color:rgba(255,255,255,.2);font-size:13px}
.cd-texto{
  font-family:var(--ff-mono,monospace);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t2,#aaa);
}
.cd-reloj{
  font-family:var(--ff-mono,monospace);font-size:18px;font-weight:700;
  letter-spacing:.08em;color:#fff;min-width:80px;
}
@media(max-width:600px){
  .cd-inner{gap:8px}
  .cd-sep{display:none}
  .cd-reloj{font-size:16px}
}

/* ══════════════════════════════════════════════════════════════
   NACHONLINE — banners de emisiones de Mediastream
   ══════════════════════════════════════════════════════════════ */
.no-sec{overflow:hidden}
.no-fondo{
  position:relative;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.015) 3px, rgba(255,255,255,.015) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,.008) 40px, rgba(255,255,255,.008) 41px),
    radial-gradient(ellipse 50% 80% at 10% 90%, rgba(77,168,218,.06), transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 10%, rgba(77,168,218,.04), transparent 50%),
    linear-gradient(180deg, #0a0a0c 0%, #0c0c10 50%, #0a0a0c 100%);
  padding:12px 0 32px;
  border-top:1px solid rgba(77,168,218,.10);
  border-bottom:1px solid rgba(77,168,218,.10);
}
/* Textura de escáner / papel periódico */
.no-fondo::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px;
  opacity:.8;pointer-events:none;mix-blend-mode:overlay;
}

.no-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:14px;position:relative;
}
/* El PNG del logo trae aire transparente: a la izquierda un 16,6% de
   su alto antes del trazo, y abajo un 19%. La bajada usa esas mismas
   proporciones para arrancar justo donde arranca "NACHONLINE". */
.no-head{--no-logo-h:clamp(75px,12vw,120px)}
.no-logo{
  height:var(--no-logo-h);width:auto;display:block;
  filter:drop-shadow(2px 3px 8px rgba(0,0,0,.5));
  margin-bottom:6px;
}

.no-tagline{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:clamp(13px,1.2vw,15px);letter-spacing:.01em;
  color:rgba(236,233,227,.6);
  margin:calc(var(--no-logo-h) * -0.19) 0 4px calc(var(--no-logo-h) * 0.166);
}

/* ── Cuerpo: destacada + columna ───────────────────────────────
   v10 (01/10/2026). Reemplaza al carrusel: con una sola emisión
   quedaba una tarjeta suelta y el resto del ancho vacío. */
.no-body{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);
  gap:20px;align-items:stretch;
}
.no-body.sin-feat{grid-template-columns:1fr}
.no-body.sin-feat .no-aside{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding-left:0;border-left:0}
.no-body.sin-feat .no-sched + .no-blurb,.no-body.sin-feat .no-sched + .no-prevs{border-top:0;padding-top:4px}

/* Destacada */
.no-feat{
  position:relative;border-radius:16px;overflow:hidden;cursor:pointer;
  background:#0b0b0b;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* Alto mínimo 16:9 por el ancho (el ::before), y si la columna de al
   lado es más alta, la tarjeta se estira con ella: el grid la estira y
   la imagen cubre todo. Sin aspect-ratio a propósito: combinado con el
   estiramiento del grid, cada navegador lo resuelve distinto. */
.no-feat::before{content:'';display:block;padding-top:56.25%}
.no-feat-media{position:absolute;inset:0}
.no-feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.no-feat:hover .no-feat-media img{transform:scale(1.03)}
.no-feat-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(6,8,12,.95) 0%, rgba(6,8,12,.55) 32%, transparent 62%),
    linear-gradient(90deg, rgba(6,8,12,.45) 0%, transparent 45%);
}
.no-feat-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:0;
  background:rgba(217,43,43,.92);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 10px rgba(217,43,43,.18),0 10px 30px rgba(0,0,0,.5);
  transition:transform .2s ease,box-shadow .2s ease;
}
.no-feat-play svg{width:30px;height:30px;margin-left:4px}
.no-feat:hover .no-feat-play{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 14px rgba(217,43,43,.14),0 10px 30px rgba(0,0,0,.5)}
.no-feat-info{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,32px)}
.no-feat-title{
  font-family:var(--ff-display);
  font-size:clamp(22px,2.6vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.01em;
  color:#fff;margin:0 0 8px;text-wrap:balance;max-width:24ch;
}
.no-feat .no-dur{top:14px;right:14px;bottom:auto}
.no-feat.is-playing{cursor:default}
.no-feat.is-playing:hover .no-feat-media img{transform:none}
.no-feat-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

.no-badge{
  font-family:'Barlow Condensed','IBM Plex Sans',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#ff5a5a;margin-bottom:6px;
}
.no-date{font-family:var(--ff-mono,monospace);font-size:11.5px;letter-spacing:.06em;color:rgba(236,233,227,.6)}
.no-dur{
  position:absolute;bottom:6px;right:6px;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;font-size:11px;
  padding:2px 7px;border-radius:4px;font-family:var(--ff-mono,monospace);letter-spacing:.04em;
}

/* Columna — v11: sin tarjetas. Bloques de texto separados por
   filetes, como una grilla de programación impresa. */
.no-aside{
  display:flex;flex-direction:column;min-width:0;
  padding-left:clamp(20px,2.4vw,34px);
  border-left:1px solid rgba(255,255,255,.1);
}
.no-sched,.no-blurb,.no-prevs{padding:4px 0 26px}
.no-sched + .no-blurb,.no-sched + .no-prevs{border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
.no-sched{display:block;color:inherit;text-decoration:none}

.no-kicker{
  font-family:'Barlow Condensed','IBM Plex Sans',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#4aa8f0;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.no-sched-date{
  font-family:'Barlow Condensed','IBM Plex Sans',sans-serif;
  font-size:clamp(30px,2.7vw,40px);font-weight:700;line-height:1;color:#fff;
  letter-spacing:-.005em;
}
.no-sched-meta{font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:rgba(236,233,227,.6);margin-top:8px}

.no-count{display:flex;align-items:baseline;gap:12px;margin:22px 0 20px}
.no-count-lbl{
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:rgba(236,233,227,.5);
}
.no-count-val{
  font-family:'Barlow Condensed','IBM Plex Sans',sans-serif;
  font-size:clamp(34px,3.2vw,46px);font-weight:600;line-height:1;color:#fff;
}
.no-count-val small{font-size:.55em;font-weight:500;color:rgba(236,233,227,.7)}
.no-tab{font-variant-numeric:tabular-nums;letter-spacing:.01em}

.no-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;font-weight:500;
  color:rgba(236,233,227,.9);text-decoration:underline;text-decoration-color:rgba(74,168,240,.55);
  text-underline-offset:5px;text-decoration-thickness:1px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.no-link svg{width:15px;height:15px;transition:transform .15s ease}
.no-link:hover{color:#fff;text-decoration-color:#4aa8f0}
.no-link:hover svg{transform:translate(2px,-2px)}

/* Al aire */
.no-sched.is-live .no-kicker{color:#ff5a5a}
.no-dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;animation:noPulso 1.6s infinite}
@keyframes noPulso{0%{box-shadow:0 0 0 0 rgba(255,59,59,.6)}70%{box-shadow:0 0 0 9px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
.no-live-btn{
  display:inline-block;margin-top:20px;padding:12px 20px;border-radius:6px;
  background:var(--rose,#e02b2b);color:#fff;
  font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;font-weight:600;
  transition:background .15s ease;
}
.no-sched.is-live:hover .no-live-btn{background:#b02020}

/* El ciclo */
.no-blurb p{
  font-family:'IBM Plex Sans',sans-serif;font-size:16px;line-height:1.6;
  color:rgba(236,233,227,.75);margin:0;max-width:44ch;
}

/* Anteriores */
.no-prevs{display:flex;flex-direction:column;min-height:0;flex:1}
.no-rows{display:flex;flex-direction:column;overflow-y:auto;max-height:290px;scrollbar-width:thin}
.no-row{
  display:flex;gap:14px;align-items:center;text-align:left;width:100%;
  padding:10px 0;border:0;border-top:1px solid rgba(255,255,255,.07);background:none;color:inherit;cursor:pointer;
}
.no-row:first-child{border-top:0;padding-top:2px}
.no-row-thumb{position:relative;flex:none;width:108px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#111}
.no-row-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s ease}
.no-row:hover .no-row-thumb img{opacity:.8}
.no-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.no-row-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(236,233,227,.45)}
.no-row-title{font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:500;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.no-row:hover .no-row-title{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.no-row.is-on .no-row-title{color:#4aa8f0}

/* Táctil: sin efectos de hover */
@media(hover:none){
  .no-feat:hover .no-feat-media img{transform:none}
  .no-feat:hover .no-feat-play{transform:translate(-50%,-50%)}
}

/* Tablet y celular: todo en una columna */
@media(max-width:900px){
  .no-body,.no-body.sin-feat .no-aside{grid-template-columns:1fr;display:grid}
  .no-feat-play{width:62px;height:62px}
  .no-feat-play svg{width:24px;height:24px}
  .no-aside{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
  .no-rows{max-height:none;overflow:visible}
}
@media(max-width:600px){
  .no-feat{border-radius:12px}
  .no-feat-title{font-size:21px;margin-bottom:4px}
  .no-feat-info{padding:14px 16px}
  /* El play sube para no pisar el título en la tarjeta baja del celular */
  .no-feat-play{top:36%;width:54px;height:54px;box-shadow:0 0 0 7px rgba(217,43,43,.18),0 8px 22px rgba(0,0,0,.5)}
  .no-feat-play svg{width:22px;height:22px}
  .no-feat .no-badge{margin-bottom:4px}
  .no-tagline .no-tag-extra{display:none}
  .no-row-thumb{width:96px}
}

/* Leyenda bajo la miniatura: solo en celular (ver abajo) */
.no-feat-cap{display:none}

/* ── NACHONLINE en celular (v12) ───────────────────────────────
   · La miniatura va limpia: sin título, fecha, duración ni velo. El
     arte de Mediastream ya trae la marca y el texto encima la pisaba.
     Los datos pasan a una leyenda debajo.
   · Próxima emisión en una sola banda: fecha a la izquierda, cuánto
     falta a la derecha, y "Agendar" como fila tocable de ancho total.
   · Menos aire vertical: antes la sección ocupaba dos pantallas. */
@media(max-width:900px){
  .no-feat{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .no-feat-info,.no-feat-scrim,.no-feat .no-dur{display:none}
  /* La miniatura deja de ser absoluta para que la leyenda quede debajo y no tapada */
  .no-feat::before{display:none}
  .no-feat-media{position:relative;inset:auto;aspect-ratio:16/9}
  .no-feat-play{top:50%;width:58px;height:58px;box-shadow:0 0 0 8px rgba(217,43,43,.2),0 8px 22px rgba(0,0,0,.5)}
  .no-feat-play svg{width:22px;height:22px}
  .no-feat-cap{
    display:flex;flex-direction:column;gap:4px;
    padding:12px 14px 14px;background:#0d0f13;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .no-feat-cap-meta{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;color:rgba(236,233,227,.5)}
  .no-feat-cap-title{
    font-family:'Barlow Condensed','IBM Plex Sans',sans-serif;
    font-size:21px;font-weight:700;line-height:1.15;color:#fff;
  }

  .no-aside{border-top:0;padding-top:6px}
  .no-sched,.no-blurb,.no-prevs{padding:16px 0}
  .no-sched + .no-blurb,.no-sched + .no-prevs{border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
  .no-kicker{font-size:13.5px;margin-bottom:8px}

  .no-sched-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
  .no-sched-when{min-width:0}
  .no-sched-date{font-size:27px}
  .no-sched-meta{font-size:13.5px;margin-top:6px}
  .no-count{flex-direction:column;align-items:flex-end;gap:2px;margin:0;flex:none;text-align:right}
  .no-count-lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
  .no-count-val{font-size:30px;white-space:nowrap}
  .no-count-val small{display:none}          /* "y 2 horas" no entra al costado */

  .no-link{
    display:flex;justify-content:space-between;align-items:center;width:100%;
    margin-top:16px;padding:13px 0 0;border-top:1px solid rgba(255,255,255,.08);
    text-decoration:none;font-size:15px;color:#fff;
  }
  .no-link svg{width:17px;height:17px;color:#4aa8f0}

  /* "El ciclo" no va en celular: la sección queda en miniatura +
     próxima emisión. Si hay emisiones anteriores, esas sí se ven. */
  .no-blurb{display:none}
  .no-fondo{padding-bottom:4px}

  .no-live-btn{display:block;text-align:center;margin-top:16px}
}

/* Esqueleto: misma forma que el contenido final, sin salto al cargar */
.no-skel{border-radius:16px;background:#16181c;animation:noShimmer 1.5s ease-in-out infinite}
.no-skel-feat{aspect-ratio:16/9}
.no-skel-aside{display:flex;flex-direction:column;gap:16px}
.no-skel-aside .no-skel{flex:1;min-height:150px}
@keyframes noShimmer{0%,100%{opacity:.5}50%{opacity:.2}}
@media(max-width:900px){.no-skel-aside .no-skel:last-child{display:none}}