/* ==========================================================================
   tema.css — piezas que sólo existen en la versión WordPress.
   Se carga después de styles.css para no tocar el sistema de diseño.
   ========================================================================== */

/* --- Imágenes con proporción reservada ------------------------------------ */
.ctv-img{
  width:100%;height:100%;object-fit:cover;display:block;
  background:linear-gradient(140deg,rgba(155,107,255,.25),rgba(38,184,243,.18));
}
.ctv-img--vacia{
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(255,61,139,.22),rgba(38,184,243,.18));
}
.ctv-img--vacia span{
  font-family:var(--fuente-display);font-size:2.4rem;
  color:rgba(255,255,255,.35);text-transform:uppercase;
}

/* --- Avisos de contenido vacío -------------------------------------------- */
.aviso-vacio{
  padding:var(--e-5);text-align:center;color:var(--texto-tenue);
  border:1px dashed var(--borde-fuerte);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
}

/* --- Paginación ------------------------------------------------------------ */
.paginacion{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-top:var(--e-6);
}
.paginacion__item{
  min-width:42px;height:42px;padding:0 .8rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);border:1px solid var(--borde-fuerte);
  font-weight:700;font-size:var(--t-sm);color:var(--texto-tenue);
  transition:var(--transicion);
}
.paginacion__item:hover{color:var(--texto);border-color:var(--amarillo);}
.paginacion__item.current{
  background:var(--amarillo);border-color:transparent;color:var(--tinta);
}

/* --- Mapa del portal ------------------------------------------------------- */
.mapa__grupo{display:flex;flex-direction:column;gap:.6rem;}
.mapa__titulo{
  font-family:var(--fuente-display);font-size:var(--t-base);
  text-transform:uppercase;letter-spacing:.02em;
  padding-bottom:.45rem;border-bottom:2px solid var(--magenta);
}
.mapa__titulo a{color:var(--texto);}
.mapa__lista{list-style:none;display:flex;flex-direction:column;gap:.35rem;}
.mapa__lista a{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-sm);color:var(--texto-tenue);
  transition:var(--transicion);
}
.mapa__lista a:hover{color:var(--amarillo);}
.mapa__cuenta{
  margin-left:auto;font-size:.68rem;font-weight:700;
  color:var(--texto-tenue);opacity:.7;
}

/* --- Nota ------------------------------------------------------------------ */
.nota__cab{padding-block:clamp(2rem,5vw,3.4rem) var(--e-4);}
.nota__cab-interno{max-width:900px;}
.nota__titulo{
  font-size:var(--t-4xl);line-height:1.02;margin-top:var(--e-3);
  text-wrap:balance;
}
.nota__entradilla{
  font-size:var(--t-lg);color:var(--texto-tenue);
  margin-top:var(--e-4);line-height:1.45;
}
.nota__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:var(--e-4);font-size:var(--t-sm);color:var(--texto-tenue);
}
.nota__portada{margin-block:var(--e-5);}
.nota__portada img{
  width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid var(--borde-fuerte);
}
.nota__portada figcaption{
  margin-top:.6rem;font-size:var(--t-xs);color:var(--texto-tenue);
}
.nota__cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;
}
.nota__lateral{position:sticky;top:calc(var(--header-h) + 1.5rem);}
.nota__paso{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);
  margin-top:var(--e-6);padding-top:var(--e-5);
  border-top:1px dashed var(--borde);
}
.nota__paso-item{
  display:flex;flex-direction:column;gap:.25rem;
  padding:var(--e-4);border-radius:var(--r-md);
  border:1px solid var(--borde-fuerte);transition:var(--transicion);
}
.nota__paso-item:hover{border-color:var(--amarillo);}
.nota__paso-item span{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-tenue);font-weight:700;
}
.nota__paso-item strong{color:var(--texto);font-size:var(--t-sm);line-height:1.3;}
.nota__paso-item--der{text-align:right;}
.nota__comentarios{margin-top:var(--e-6);}

/* --- Prosa: el contenido que escribe el cliente ---------------------------- */
.prosa{font-size:1.05rem;line-height:1.72;color:var(--texto);}
.prosa > * + *{margin-top:1.15em;}
.prosa h2,.prosa h3,.prosa h4{
  font-family:var(--fuente-display);text-transform:uppercase;
  line-height:1.08;margin-top:1.8em;
}
.prosa h2{font-size:var(--t-2xl);}
.prosa h3{font-size:var(--t-xl);}
.prosa a{color:var(--amarillo);text-decoration:underline;text-underline-offset:3px;}
.prosa strong{color:#fff;}
.prosa ul,.prosa ol{padding-left:1.35rem;display:flex;flex-direction:column;gap:.45rem;}
.prosa li::marker{color:var(--amarillo);}
.prosa blockquote{
  border-left:3px solid var(--magenta);
  padding:.4rem 0 .4rem 1.2rem;
  font-size:1.18rem;font-style:italic;color:var(--texto);
}
.prosa figure{margin-block:1.6em;}
.prosa img,.prosa iframe{max-width:100%;height:auto;border-radius:var(--r-md);}
.prosa figcaption{
  margin-top:.5rem;font-size:var(--t-xs);
  color:var(--texto-tenue);text-align:center;
}
.prosa code{
  background:rgba(255,255,255,.08);padding:.15em .4em;
  border-radius:6px;font-size:.9em;
}
.prosa table{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.prosa th,.prosa td{
  padding:.6rem .7rem;border-bottom:1px solid var(--borde);text-align:left;
}
.prosa th{color:var(--amarillo);font-size:var(--t-xs);text-transform:uppercase;}

/* --- Carrusel de estrenos --------------------------------------------------- */
.tarjeta--carrusel{flex:0 0 clamp(240px,26vw,320px);}
.carrusel__puntos{
  display:flex;gap:.4rem;justify-content:center;margin-top:var(--e-4);
}
.carrusel__puntos button{
  width:8px;height:8px;border-radius:50%;
  background:var(--borde-fuerte);transition:var(--transicion);
}
.carrusel__puntos button[aria-selected="true"]{
  background:var(--amarillo);width:22px;border-radius:99px;
}

/* --- Piezas del pie y la cabecera ------------------------------------------- */
.footer__lista{list-style:none;display:flex;flex-direction:column;gap:.35rem;}
.footer__lista a{font-size:var(--t-sm);color:var(--texto-tenue);}
.footer__lista a:hover{color:var(--amarillo);}
.footer__direccion{
  display:flex;align-items:center;gap:.5rem;margin-top:.7rem;
  font-size:var(--t-sm);color:var(--texto-tenue);
}
.footer__direccion svg{width:16px;height:16px;color:var(--turquesa);flex-shrink:0;}
.topbar__menu{display:flex;gap:.9rem;list-style:none;}
.topbar__menu a{font-size:var(--t-xs);color:var(--texto-tenue);}
.topbar__menu a:hover{color:var(--amarillo);}
.buscador__ancho{max-width:560px;margin-bottom:var(--e-5);}
.pastilla--senas{white-space:nowrap;}

/* --- Lista de «lo más leído» como <ol> -------------------------------------- */
.masleido__lista{list-style:none;counter-reset:none;}
.masleido__enlace{display:flex;align-items:flex-start;gap:.7rem;width:100%;}

/* --- Ajustes de móvil propios del tema -------------------------------------- */
@media (max-width:900px){
  .nota__cuerpo{grid-template-columns:minmax(0,1fr);}
  .nota__lateral{position:static;}
  .nota__titulo{font-size:var(--t-2xl);}
  .nota__paso{grid-template-columns:1fr;}
  .nota__paso-item--der{text-align:left;}
  .mapa__grupo{margin-bottom:var(--e-4);}
}

/* --- Comentarios ------------------------------------------------------------ */
.comentarios{margin-top:var(--e-6);padding-top:var(--e-5);border-top:1px dashed var(--borde);}
.comentarios__titulo{
  font-family:var(--fuente-display);font-size:var(--t-xl);
  text-transform:uppercase;margin-bottom:var(--e-4);
}
.comentarios__lista{list-style:none;display:flex;flex-direction:column;gap:var(--e-4);}
.comentarios__lista .comment-body{
  background:rgba(255,255,255,.04);border:1px solid var(--borde);
  border-radius:var(--r-md);padding:var(--e-4);
}
.comentarios__lista .children{list-style:none;margin-top:var(--e-3);padding-left:var(--e-5);}
.comentarios__lista .comment-meta{font-size:var(--t-xs);color:var(--texto-tenue);margin-bottom:.5rem;}
.comentarios__lista .comment-author img{border-radius:50%;margin-right:.5rem;vertical-align:middle;}
.comentarios__lista .comment-author b{color:var(--texto);}
.comentarios__nota{font-size:var(--t-xs);color:var(--texto-tenue);margin-bottom:var(--e-3);}
.comment-form{display:flex;flex-direction:column;gap:var(--e-3);margin-top:var(--e-4);}
.comment-form label{display:block;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-tenue);margin-bottom:.35rem;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;padding:.8rem 1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid var(--borde-fuerte);color:var(--texto);
}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--amarillo);outline-offset:2px;}
.comment-form .submit{padding-top:0;}

/* ==========================================================================
   Piezas compuestas para WordPress que no existían en el prototipo.
   Usan los mismos tokens del sistema de diseño.
   ========================================================================== */

/* --- Colores de acento que faltaban en la paleta de utilidades -------------- */
.kicker--turquesa{color:var(--turquesa);}
.btn--turquesa{background:var(--turquesa);color:var(--tinta);}
.btn--turquesa:hover{background:#25c4b0;}

/* --- Bloque de señal en vivo ------------------------------------------------
   El fondo, el velo y el grano los define styles.css. Aquí estuvo una regla
   con un degradado que reiniciaba el «cover» de la foto: la imagen salía
   estirada y sin recorte, mucho más clara que en la propuesta. */

/* --- Secciones: titular suelto ---------------------------------------------- */
.seccion__titulo{
  font-family:var(--fuente-display);text-transform:uppercase;
  font-size:var(--t-2xl);line-height:1.05;
}

/* --- Nota: cuerpo ------------------------------------------------------------ */
.nota__prosa{max-width:760px;}

/* --- Galería virtual --------------------------------------------------------- */
.galeria{display:flex;flex-direction:column;gap:var(--e-5);}
.galeria__pista{
  display:flex;gap:var(--e-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:var(--e-4);
}
.galeria__pista::-webkit-scrollbar{display:none;}
.galeria__obra{
  flex:0 0 min(560px,86%);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:var(--e-4);
}
.galeria__marco{
  border:1px solid var(--borde-fuerte);border-radius:var(--r-lg);
  overflow:hidden;background:var(--noche-900);aspect-ratio:4/3;
}
.galeria__marco img{width:100%;height:100%;object-fit:cover;display:block;}
.galeria__ficha{display:flex;flex-direction:column;gap:.3rem;}
.galeria__titulo{font-family:var(--fuente-display);font-size:var(--t-xl);text-transform:uppercase;line-height:1.05;}
.galeria__artista{color:var(--amarillo);font-weight:700;}
.galeria__datos,.galeria__texto{color:var(--texto-tenue);font-size:var(--t-sm);}
.galeria__ctrl{display:flex;align-items:center;justify-content:center;gap:var(--e-4);}
.galeria__cuenta{font-size:var(--t-sm);font-weight:700;color:var(--texto-tenue);}
.carrusel__btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--borde-fuerte);color:var(--texto);transition:var(--transicion);
}
.carrusel__btn:hover{background:var(--amarillo);color:var(--tinta);border-color:transparent;}
.carrusel__btn svg{width:18px;height:18px;}

/* --- Diccionario ------------------------------------------------------------- */
.diccionario{
  margin-top:var(--e-6);padding:clamp(1.4rem,3.5vw,2.4rem);
  border-radius:var(--r-lg);border:1px solid var(--borde-fuerte);
  background:linear-gradient(160deg,rgba(46,217,195,.1),rgba(18,14,46,.9));
}
.diccionario__cab{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e-4);margin-bottom:var(--e-5);
}
.diccionario__titulo{font-family:var(--fuente-display);font-size:var(--t-2xl);text-transform:uppercase;line-height:1.04;}
.diccionario__bajada{color:var(--texto-tenue);font-size:var(--t-sm);margin-top:.3rem;}
.diccionario__buscar{
  display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:var(--e-5);
}
.diccionario__buscar input{
  flex:1;min-width:220px;padding:.85rem 1.2rem;border-radius:var(--r-full);
  background:rgba(255,255,255,.07);border:1px solid var(--borde-fuerte);color:var(--texto);
}
.diccionario__buscar input:focus{outline:2px solid var(--turquesa);outline-offset:2px;}

/* --- Señal en vivo: página --------------------------------------------------- */
/* --- Ventana emergente de video ---------------------------------------------- */
/* Ojo: «hidden» del HTML se anula si la regla fija «display». Por eso el
   modal se muestra sólo cuando NO lleva el atributo. */
/* El modal del reproductor vive en styles.css: aquí sólo se ajusta lo propio. */
.modal__caja{
  position:relative;z-index:2;width:min(1000px,100%);
  background:var(--noche-800);border:1px solid var(--borde-fuerte);
  border-radius:var(--r-lg);overflow:hidden;
}
.modal__video{aspect-ratio:16/9;background:#000;}
.modal__titulo{padding:var(--e-4);font-size:var(--t-base);}
.modal__cerrar{
  position:absolute;right:.6rem;top:.6rem;z-index:3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.6);color:#fff;
}
.modal__cerrar svg{width:16px;height:16px;}

@media (max-width:900px){
    .diccionario__cab{flex-direction:column;align-items:flex-start;}
  .galeria__obra{flex-basis:90%;}
}

/* --- Interior de la lista «lo más leído» ------------------------------------ */
.masleido__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.masleido__titulo{font-weight:600;line-height:1.28;color:var(--texto);}
.masleido__cat{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-tenue);font-weight:700;
}
.masleido__enlace:hover .masleido__titulo{color:var(--amarillo);}
/* Ganchos estructurales sin estilo propio, igual que en el prototipo. */
.mainnav__item,.radio__texto{min-width:0;}

/* --- Pie del modal del reproductor ------------------------------------------ */
.modal__pie{
  padding:var(--e-4) var(--e-5);
  display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--borde);
}
.modal__nota{
  font-size:var(--t-sm);color:var(--texto-tenue);
  flex:1;min-width:240px;margin:0;line-height:1.5;
}
@media (max-width:560px){
  .modal__pie{flex-direction:column;align-items:stretch;}
  .modal__pie .btn{justify-content:center;}
}

/* La flecha de los accesos rápidos: en el prototipo el tamaño iba en línea
   sobre el propio SVG; aquí se fija por CSS para que no se escape. */
.acceso__flecha svg{width:20px;height:20px;}