/* Diseño «Pantalla» (elegido el 2026-09-30): como una app de streaming, en línea con la app de Animekiu.
   Carrusel arriba, noticias en rejilla vertical y la nota como la ficha de un anime. Sin las tarjetas de Facebook. */
body.pantalla { --fondo: #07070a; --superficie: #121217; --borde: #22222a; background: var(--fondo); }
:root.claro body.pantalla { --fondo: #f5f5f7; --superficie: #ffffff; --borde: #e2e2e8; }
.pantalla .t-oficial { background: var(--oficial); color: #fff; }
.pantalla .t-rumor, .pantalla .t-filtracion { background: var(--ambar); color: #1a1406; }

/* Cabecera encima del carrusel; se vuelve solida al bajar */
.con-carrusel .cabecera { position: fixed; left: 0; right: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .75), transparent); border-bottom-color: transparent; backdrop-filter: none; color: #fff; transition: background .25s; }
.con-carrusel .cabecera .menu a { color: rgb(255 255 255 / .78); }
.con-carrusel .cabecera .menu a:hover, .con-carrusel .cabecera .menu a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.con-carrusel.bajado .cabecera { background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(12px); color: var(--texto); border-bottom-color: var(--borde); }
.con-carrusel.bajado .cabecera .menu a { color: var(--suave); }
.con-carrusel.bajado .cabecera .menu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--texto); }
/* Tema claro: en notas y series la cabecera va clara (el carrusel de la portada siempre es oscuro). */
:root.claro .con-carrusel:not(.es-inicio) .cabecera { background: linear-gradient(to bottom, rgb(245 245 247 / .92), rgb(245 245 247 / 0)); color: var(--texto); }
:root.claro .con-carrusel:not(.es-inicio) .cabecera .menu a { color: var(--suave); }
:root.claro .con-carrusel:not(.es-inicio) .cabecera .menu a:hover, :root.claro .con-carrusel:not(.es-inicio) .cabecera .menu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--texto); }


/* Carrusel */
.carrusel { position: relative; height: min(86vh, 780px); min-height: 600px; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.slide.activa { opacity: 1; visibility: visible; }
.slide-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s linear; }
.slide.activa .slide-fondo { transform: scale(1); }
.slide-vertical .slide-fondo, .slide-vertical.activa .slide-fondo { filter: blur(34px) brightness(.55) saturate(1.2); transform: scale(1.2); }
.slide-cartel { position: absolute; z-index: 1; top: 88px; bottom: 124px; right: max(20px, calc((100% - 1240px) / 2)); height: calc(100% - 212px);
  width: auto; max-width: 42%; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.slide-vertical .slide-texto h2 { max-width: 15ch; }
.slide-vertical .slide-bajada { max-width: 46ch; }
.slide::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(7 7 10 / .92) 0%, rgb(7 7 10 / .6) 38%, transparent 70%), linear-gradient(to top, #07070a 0%, transparent 38%); }
.slide-texto { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-top: 96px; padding-bottom: 150px; color: #fff; }
/* Un titulo largo nunca sube hasta el menu: como mucho 4 lineas y la bajada 2. */
.slide-texto > * { flex-shrink: 0; }
.slide-texto h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.slide-bajada { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.slide-texto h2 { max-width: 18ch; margin: 0; font: 900 clamp(28px, min(4.4vw, 6.2vh), 60px)/1.03 var(--titulares); font-stretch: 85%; letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 2px 30px rgb(0 0 0 / .5); }
.slide-bajada { max-width: 56ch; margin: 16px 0 0; color: rgb(255 255 255 / .82); font-size: 18px; }
.slide-acciones { display: flex; align-items: center; gap: 18px; margin: 24px 0 0; color: rgb(255 255 255 / .7); font-size: 14px; }
.boton-leer { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; background: #fff; color: #0b0b0d; font-weight: 700; }
.boton-leer::before { content: ""; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.boton-leer:hover { background: #e4e4e7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chips > * { padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .14); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chips > .t-oficial { background: var(--oficial); }
.chips > .t-rumor, .chips > .t-filtracion { background: var(--ambar); color: #1a1406; }

.carrusel-miniaturas { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; }
.miniatura { position: relative; width: 132px; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #000; opacity: .55; transition: opacity .2s, border-color .2s; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: .9; }
.miniatura.activa { opacity: 1; border-color: #fff; }
.miniatura i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; }

/* Barra de carga: cuando se llena, pasa a la siguiente noticia */
.carrusel-avance { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 14px; height: 74px; pointer-events: none; }
.carrusel-avance .contador { color: rgb(255 255 255 / .6); font: 600 14px var(--texto-fuente); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.carrusel-avance .contador b { color: #fff; font-weight: 800; }
.carrusel-avance .barra { position: relative; width: min(280px, 26vw); height: 3px; border-radius: 3px; background: rgb(255 255 255 / .22); overflow: hidden; }
.carrusel-avance .barra i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #fff; transition: width 50ms linear; }
.miniatura i { transition: width 50ms linear; }

/* Rejilla vertical de noticias */
.feed { padding-top: 40px; }
.feed-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.feed-cabeza h2 { margin: 0; font: 800 26px/1.2 var(--titulares); }
.filtros { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.feed-cabeza > * { min-width: 0; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a { padding: 8px 15px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); color: var(--suave); font-size: 14px; font-weight: 600; white-space: nowrap; }
.filtros a:hover { color: var(--texto); border-color: var(--suave); }
.filtros a[aria-current="page"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.feed-lista .filtros { margin-bottom: 26px; }

.rejilla-fichas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 24px; }
.ficha { grid-column: span 2; }
.ficha-grande { grid-column: span 3; }
.ficha a { display: block; }
.ficha-imagen { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: var(--superficie); }
.ficha-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ficha a:hover .ficha-imagen img { transform: scale(1.05); }
.ficha-imagen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.ficha-sello, .ficha-nuevo { position: absolute; top: 10px; padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ficha-sello { left: 10px; }
.ficha-nuevo { display: none; right: 10px; background: #fff; color: #0b0b0d; }
.ficha.es-nuevo .ficha-nuevo { display: block; }
.ficha-meta { display: block; margin: 12px 0 5px; color: var(--tenue); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ficha b { display: block; font: 700 18px/1.3 var(--titulares); text-wrap: balance; }
.ficha a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ficha-grande b { font-size: 24px; line-height: 1.2; font-weight: 800; }
.ficha-bajada { display: block; margin-top: 8px; color: var(--suave); font-size: 15px; }
.pantalla .ver-mas a { background: var(--superficie); }

/* Nota: ficha como la de un anime en la app, sobre la imagen desenfocada */
.p-cabeza { position: relative; overflow: hidden; padding: 116px 0 56px; color: #fff; background: #000; }
.p-fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(38px) saturate(1.3); opacity: .6; }
.p-cabeza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--fondo), rgb(7 7 10 / .35) 60%, rgb(7 7 10 / .6)); }
.p-cabeza-fila { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.p-info h1 { margin: 0; font: 900 clamp(30px, 3.8vw, 50px)/1.05 var(--titulares); font-stretch: 88%; letter-spacing: -.015em; text-wrap: balance; }
.p-info .chips a:hover { background: rgb(255 255 255 / .28); }
.p-bajada { margin: 16px 0 0; color: rgb(255 255 255 / .82); font-size: 19px; }
.p-datos { margin: 18px 0 0; color: rgb(255 255 255 / .6); font-size: 14px; }
.p-temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.p-temas a { padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); font-size: 13px; font-weight: 600; }
.p-temas a:hover { background: #fff; color: #000; }
.p-imagen { margin: 0; }
.p-imagen img { width: 100%; border-radius: 16px; box-shadow: 0 30px 80px rgb(0 0 0 / .55); }
.p-imagen.vertical img { width: auto; max-width: 100%; max-height: min(74vh, 620px); margin-inline: auto; }
:root.claro .p-cabeza { color: var(--texto); }
:root.claro .p-cabeza::after { background: linear-gradient(to top, var(--fondo), rgb(245 245 247 / .5) 60%, rgb(245 245 247 / .75)); }
:root.claro .p-bajada, :root.claro .p-datos { color: var(--suave); }
:root.claro .p-temas a { border-color: var(--borde); }
:root.claro .p-info .chips > span:not([class]), :root.claro .p-info .chips > a { background: rgb(0 0 0 / .08); color: var(--texto); }

.p-hoja { width: min(740px, 100% - 40px); margin: 16px auto 0; padding-bottom: 10px; }

/* Laterales de la nota (solo en pantallas anchas): compartir + avance a la izquierda, lo ultimo a la derecha */
.p-cuerpo { display: block; }
.p-izq, .p-der { display: none; }
@media (min-width: 1200px) {
  .p-cuerpo { display: grid; grid-template-columns: 64px minmax(0, 720px) 320px; justify-content: space-between; gap: 40px; margin-top: 16px; }
  .p-cuerpo .p-hoja { width: auto; margin: 0; }
  .p-izq, .p-der { display: block; }
  .p-compartir-abajo { display: none; }
}
.p-izq-fija, .p-der-fija { position: sticky; top: 96px; }
.p-izq-fija { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avance { position: relative; width: 3px; height: 140px; margin-bottom: 8px; border-radius: 3px; background: var(--borde); overflow: hidden; }
.avance i { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--avance, 0) * 100%); border-radius: inherit; background: var(--texto); transition: height .1s linear; }
.redondo { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--texto); }
.redondo svg { width: 19px; height: 19px; }
.redondo .lleno { fill: currentColor; stroke: none; }
.redondo:hover { border-color: var(--texto); }
.redondo.copiado { background: var(--texto); color: var(--fondo); }
.p-der h2 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); font: 800 18px var(--titulares); }
.indice { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.indice a { display: block; margin-left: -2px; padding: 9px 0 9px 16px; border-left: 2px solid transparent; color: var(--tenue); font: 600 15px/1.35 var(--texto-fuente); transition: color .15s, border-color .15s; }
.indice a:hover { color: var(--texto); }
.indice a.actual { color: var(--texto); border-left-color: var(--texto); font-weight: 700; }
.p-der-datos { display: flex; gap: 14px; margin: 18px 0 0; color: var(--tenue); font-size: 13px; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
.lateral-lista { list-style: none; margin: 0; padding: 0; }
.lateral-lista a { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lateral-lista img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--superficie); }
.lateral-lista span { font: 700 14px/1.3 var(--titulares); }
.lateral-lista small { display: block; margin-bottom: 4px; color: var(--tenue); font: 700 11px var(--texto-fuente); letter-spacing: .05em; text-transform: uppercase; }
.lateral-lista a:hover span { text-decoration: underline; }
.anuncio-lateral { margin-top: 24px; min-height: 600px; }

/* Portada y secciones: lista vertical + columna lateral (como un diario ordenado, no un mosaico). */
.con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.con-lateral > * { min-width: 0; }
.lateral { padding-top: 40px; }
.lateral-fijo { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 28px; }
.filas { display: flex; flex-direction: column; }
.fila a { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--borde); }
.filas .fila:first-child a { padding-top: 4px; }
.fila-imagen { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: var(--superficie); }
.fila-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fila a:hover .fila-imagen img { transform: scale(1.05); }
.fila.es-nuevo .ficha-nuevo { display: block; }
.fila-texto { display: flex; flex-direction: column; min-width: 0; }
.fila-texto .ficha-meta { margin: 2px 0 6px; }
.fila-texto em { padding: 1px 6px; border-radius: 4px; font-style: normal; }
.fila b { font: 800 21px/1.25 var(--titulares); text-wrap: balance; }
.fila a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fila-bajada { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--suave); font-size: 15px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fila-hora { margin-top: auto; padding-top: 10px; color: var(--tenue); font-size: 13px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--borde); }
.tres .ficha, .tres .ficha-grande { grid-column: auto; }
.tres .ficha b { font-size: 16px; }

.bloque-lateral h2, .ficha-serie-rotulo { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); font: 800 17px var(--titulares); }
.bloque-fuente { margin: 10px 0 0; color: var(--tenue); font-size: 11.5px; }
.bloque-fuente a { text-decoration: underline; }
.emision { list-style: none; margin: 0; padding: 0; }
.emision li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px 0; }
.emision img { width: 48px; height: 68px; object-fit: cover; border-radius: 6px; background: var(--superficie); }
.emision b { display: block; font: 700 14px/1.3 var(--titulares); }
.emision small { display: block; margin-top: 3px; color: var(--tenue); font-size: 12.5px; }
.emision time { color: var(--suave); font-weight: 600; text-transform: capitalize; }
.secciones-lista { list-style: none; margin: 0; padding: 0; }
.secciones-lista a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin: 0 -12px; border-radius: 8px; color: var(--suave); font-weight: 600; }
.secciones-lista a:hover { background: var(--superficie); color: var(--texto); }
.secciones-lista small { color: var(--tenue); font-variant-numeric: tabular-nums; }
.lista-pagina .feed { padding-top: 34px; }

/* Ficha de la serie (lateral de la nota) */
.ficha-serie { padding: 18px; border: 1px solid var(--borde); border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-serie) 22%, var(--superficie)), var(--superficie) 55%); }
.ficha-serie-rotulo { border: 0; padding: 0; margin-bottom: 14px; color: var(--tenue); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ficha-serie-cabeza { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.ficha-serie-cabeza img { width: 96px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.ficha-serie h2 { margin: 0; font: 800 19px/1.2 var(--titulares); text-wrap: balance; }
.ficha-serie-original { margin: 4px 0 0; color: var(--tenue); font-size: 13px; }
.ficha-serie-generos { margin: 10px 0 0; color: var(--suave); font-size: 13px; font-weight: 600; }
.ficha-serie-datos { margin: 16px 0 0; }
.ficha-serie-datos div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.ficha-serie-datos dt { color: var(--tenue); }
.ficha-serie-datos dd { margin: 0; text-align: right; font-weight: 600; }
.ficha-serie-datos time { text-transform: capitalize; }
.ficha-serie-subrotulo { margin: 16px 0 8px; color: var(--tenue); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ficha-serie-donde { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ficha-serie-donde span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--fondo); font-size: 13px; font-weight: 700; }

.ficha-serie-mas { margin: 14px 0 0; font-size: 13.5px; font-weight: 700; }
.ficha-serie-mas a:hover { text-decoration: underline; }
.emision a, .emision-item { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.emision li { display: block; }
.emision a:hover b { text-decoration: underline; }

/* Horarios: calendario de la semana, una columna por dia */
.horarios { padding-top: 34px; }
.horarios-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 30px; margin-bottom: 22px; }
.horarios-cabeza .nota-meta { margin-bottom: 6px; }
.horarios-intro { max-width: 46ch; margin: 0; color: var(--suave); }
.cal-pestanas { display: none; }
.calendario { display: grid; grid-template-columns: repeat(var(--dias, 7), minmax(0, 1fr)); gap: 10px; align-items: start; }
.cal-dia { min-width: 0; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); }
.cal-dia h2 { position: sticky; top: 64px; z-index: 2; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 12px 10px;
  border-bottom: 1px solid var(--borde); border-radius: 12px 12px 0 0; background: var(--superficie); font: 800 16px var(--titulares); }
.cal-dia h2 small { color: var(--tenue); font: 600 12px var(--texto-fuente); }
.cal-dia.es-hoy { border-color: var(--texto); }
.cal-dia.es-hoy h2 { background: var(--texto); color: var(--fondo); }
.cal-dia.es-hoy h2 small { color: var(--fondo); opacity: .75; }
.cal-dia ol { list-style: none; margin: 0; padding: 6px; }
.cal-dia li + li { border-top: 1px solid var(--borde); }
.cal-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 6px; border-radius: 8px; }
a.cal-item:hover { background: var(--fondo); }
.cal-item img, .cal-sin { width: 38px; height: 54px; object-fit: cover; border-radius: 5px; background: var(--borde); }
.cal-texto { display: flex; flex-direction: column; min-width: 0; }
.cal-texto time { color: var(--texto); font: 800 13px var(--texto-fuente); font-variant-numeric: tabular-nums; }
.cal-texto b { display: -webkit-box; margin-top: 2px; overflow: hidden; font: 700 13px/1.25 var(--titulares); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-texto small { margin-top: 3px; color: var(--tenue); font-size: 11.5px; }
[data-estado]:not(:empty)::before { content: "· "; }
.ahora [data-estado] { color: #ff5c5c; font-weight: 700; }
.ya-salio { opacity: .45; }

/* Pantallas medianas y chicas: un dia a la vez, con pestañas */
@media (max-width: 1099px) {
  .cal-pestanas { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
  .cal-pestanas::-webkit-scrollbar { display: none; }
  .cal-pestanas button { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 12px; border: 1px solid var(--borde);
    border-radius: 12px; background: var(--superficie); color: var(--suave); font-weight: 700; }
  .cal-pestanas button small { color: var(--tenue); font-weight: 600; font-size: 12px; }
  .cal-pestanas button[aria-selected="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
  .cal-pestanas button[aria-selected="true"] small { color: var(--fondo); }
  .con-js .calendario { display: block; }
  .con-js .cal-dia { display: none; }
  .con-js .cal-dia.activo { display: block; }
  .con-js .cal-dia h2 { display: none; }
  .calendario:not(.con-js *) { grid-template-columns: 1fr; }
  .cal-dia ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .cal-dia li + li { border-top: 0; }
  .cal-dia li { border-bottom: 1px solid var(--borde); }
  .cal-item { grid-template-columns: 44px minmax(0, 1fr); }
  .cal-item img, .cal-sin { width: 44px; height: 62px; }
  .cal-texto b { font-size: 14px; }
}
@media (max-width: 759px) {
  .cal-dia ol { grid-template-columns: 1fr; }
}

/* Pagina de serie */
.serie-cabeza { padding-bottom: 44px; }
.serie-banner { filter: blur(6px) saturate(1.2); opacity: .5; }
.serie-cabeza-fila { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: end; }
.serie-poster { width: 220px; height: auto; border-radius: 14px; box-shadow: 0 30px 70px rgb(0 0 0 / .6); }
.serie-original { margin: 10px 0 0; color: rgb(255 255 255 / .65); font-size: 15px; }
.serie-proximo { margin: 16px 0 0; font-size: 15px; }
.serie-proximo time { text-transform: capitalize; font-weight: 700; }
.serie-donde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.serie-donde-rotulo { margin-right: 4px; color: rgb(255 255 255 / .6); font-size: 13px; font-weight: 700; }
.serie-donde span:not(.serie-donde-rotulo) { padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .14); font-size: 13px; font-weight: 700; }
:root.claro .serie-original, :root.claro .serie-donde-rotulo { color: var(--tenue); }
:root.claro .serie-donde span:not(.serie-donde-rotulo) { background: rgb(0 0 0 / .08); }
.serie-bloque { padding-top: 34px; }
.serie-bloque h2 { margin: 0 0 14px; font: 800 22px var(--titulares); }
.serie-sinopsis { width: auto; font-size: 17px; }
.proximos { list-style: none; margin: 0; padding: 0; }
.proximos li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.proximos time { color: var(--suave); }
.reparto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.reparto li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; background: var(--superficie); }
.reparto img, .reparto-sin { width: 64px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--borde); }
.reparto b { display: block; font: 700 15px/1.3 var(--titulares); }
.reparto small { display: block; margin-top: 3px; color: var(--tenue); font-size: 13px; }
.serie-cuerpo .lateral { padding-top: 34px; }

@media (max-width: 1099px) {
  .con-lateral { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lateral-fijo { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .rejilla-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha, .ficha-grande { grid-column: span 1; }
  .p-cabeza-fila { grid-template-columns: 1fr; gap: 28px; }
  .p-imagen { order: -1; }
}
@media (max-width: 759px) {
  .carrusel { height: 82vh; min-height: 480px; }
  .slide::after { background: linear-gradient(to top, #07070a 5%, rgb(7 7 10 / .7) 45%, transparent 80%); }
  .slide-texto { padding-bottom: 88px; }
  .slide-bajada { display: none; }
  .slide-texto h2 { -webkit-line-clamp: 6; }
  /* Movil: la pantalla ya es vertical, asi que la portada vertical la llena entera (nada de cartel
     chico sobre el desenfoque, que es para PC). Se usa la misma imagen del cartel: no se baja otra. */
  .slide-vertical .slide-fondo { display: none; }
  .slide-cartel { z-index: auto; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none;
    transform: scale(1.06); transition: transform 9s linear; }
  .slide.activa .slide-cartel { transform: scale(1); }
  .carrusel-miniaturas { display: none; }
  .carrusel-avance { bottom: 22px; height: auto; }
  .carrusel-avance .barra { flex: 1; width: auto; }
  .feed-cabeza { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .filtros { max-width: none; margin-inline: -16px; padding-inline: 16px; }
  .rejilla-fichas { grid-template-columns: 1fr; gap: 28px; }
  .fila a { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .serie-cabeza-fila { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .serie-poster { width: 110px; }
  .reparto { grid-template-columns: 1fr; }
  .fila b { font-size: 16px; }
  .fila-bajada { display: none; }
  .fila-hora { padding-top: 6px; font-size: 12px; }
  .fila .ficha-nuevo { display: none !important; }
  .tres { grid-template-columns: 1fr; }
  .lateral-fijo { grid-template-columns: 1fr; }
  .ficha-grande b { font-size: 21px; }
  .p-cabeza { padding-top: 76px; }
  .p-imagen { margin-inline: -16px; }
  .p-imagen img { border-radius: 0; }
  /* La imagen vertical de la nota, a todo el ancho y desde arriba (bajo la cabecera). */
  .p-cabeza:has(.p-imagen.vertical) { padding-top: 0; }
  .p-imagen.vertical { margin-inline: -16px; }
  .p-imagen.vertical img { width: 100%; max-width: none; max-height: 82vh; object-fit: cover; border-radius: 0; box-shadow: none; }
  .p-hoja { width: calc(100% - 32px); }
}
/* Boton de cuenta en la cabecera */
.boton-cuenta { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-right: 6px; padding: 0 14px; border-radius: 999px;
  background: #fff; color: #0b0b0d; font-size: 14px; font-weight: 700; white-space: nowrap; }
.boton-cuenta:hover { background: #e4e4e7; }
:root.claro .con-carrusel:not(.es-inicio) .boton-cuenta, :root.claro .con-carrusel.bajado .boton-cuenta, :root.claro body:not(.con-carrusel) .boton-cuenta { background: var(--texto); color: var(--fondo); }
.boton-cuenta:has(.avatar-mini) { padding: 0 12px 0 3px; background: rgb(255 255 255 / .12); color: inherit; }
.avatar-mini, .c-avatar { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #3f3f46; color: #fff; font-weight: 800; }
.avatar-mini { width: 30px; height: 30px; font-size: 13px; }
.avatar-mini img, .c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.boton-cuenta-nombre { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Pagina de cuenta */
.cuenta { display: grid; place-items: start center; min-height: 60vh; padding-block: 48px 20px; }
.cuenta-caja { width: min(440px, 100%); padding: 30px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); }
.cuenta h1 { margin: 0; font: 800 28px var(--titulares); }
.cuenta-sub { margin: 6px 0 22px; color: var(--suave); font-size: 15px; }
.cuenta-sociales { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cuenta-sociales [data-google] { display: flex; justify-content: center; min-height: 44px; overflow: hidden; border-radius: 999px;
  /* El boton de Google va en un iframe: con color-scheme oscuro el navegador le pinta un fondo blanco. */
  color-scheme: light; }
.cuenta-sociales [data-google] iframe { color-scheme: light; }
.cuenta-sociales [data-google][hidden], .boton-discord[hidden], .cuenta-sociales[hidden], .cuenta-separador[hidden] { display: none; }
.boton-discord { height: 44px; border: 0; border-radius: 999px; background: #5865f2; color: #fff; font-weight: 700; }
.boton-discord:hover { background: #4752c4; }
.cuenta-separador { position: relative; margin: 22px 0 16px; color: var(--tenue); font-size: 13px; text-align: center; }
.cuenta-separador::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--borde); }
.cuenta-separador span { position: relative; padding: 0 10px; background: var(--superficie); }
.cuenta-form { display: flex; flex-direction: column; gap: 14px; }
.cuenta-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.cuenta-form input:not([type=checkbox]) { height: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--texto); font: 500 15px var(--texto-fuente); }
.cuenta-form input:focus { outline: 2px solid var(--texto); outline-offset: 1px; }
.cuenta-form small { color: var(--tenue); font-weight: 500; font-size: 12.5px; }
.cuenta-form .casilla { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
.cuenta-form .casilla input { margin-top: 3px; }
.cuenta-form a { text-decoration: underline; }
.cuenta-antibots:empty { display: none; }
.boton-primario { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--texto); color: var(--fondo); font-weight: 700; }
.boton-primario:disabled { opacity: .5; }
.boton-secundario { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border: 1px solid var(--borde);
  border-radius: 999px; background: var(--superficie); color: var(--texto); font-weight: 700; cursor: pointer; }
.boton-secundario:hover { border-color: var(--tenue); }
.boton-secundario[hidden] { display: none; }
.cuenta-cambio { margin: 18px 0 0; color: var(--suave); font-size: 14px; text-align: center; }
.cuenta-cambio button, .cuenta-cambio a { padding: 0; border: 0; background: none; color: var(--texto); font-weight: 700; text-decoration: underline; }
.cuenta-aviso { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--fondo); font-size: 14px; }
.cuenta-aviso.error { background: rgb(255 80 80 / .14); color: #ff8080; }
.cuenta-aviso.ok { background: rgb(27 158 82 / .16); color: #4ade80; }
:root.claro .cuenta-aviso.error { color: #b42318; }
:root.claro .cuenta-aviso.ok { color: #13803f; }
.cuenta-alerta { margin: 0 0 16px; padding: 14px; border-radius: 10px; background: var(--fondo); font-size: 14px; }
.cuenta-alerta p { margin: 0 0 10px; }
.cuenta-alerta button, .boton-salir { height: 38px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 999px; background: none; font-weight: 700; }
.boton-salir { width: 100%; margin-top: 16px; }

/* Comentarios */
.comentarios { padding-top: 40px; }
.comentarios-caja { width: min(760px, 100%); }
.comentarios-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.comentarios-cabeza h2 { margin: 0; font: 800 24px var(--titulares); }
.comentarios-cabeza h2 span { color: var(--tenue); font-weight: 600; }
.comentarios-orden { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); }
.comentarios-orden button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--suave); font-size: 13px; font-weight: 700; }
.comentarios-orden button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.c-invita { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--borde); border-radius: 12px; color: var(--suave); }
.c-invita span { flex: 1; min-width: 180px; }
.c-crear { font-weight: 700; text-decoration: underline; }
.c-form { display: flex; flex-direction: column; gap: 8px; }
.c-form textarea { width: 100%; resize: vertical; min-height: 64px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); font: 400 15px/1.5 var(--texto-fuente); }
.c-form textarea:focus { outline: 2px solid var(--texto); outline-offset: 1px; }
.c-form-pie { display: flex; align-items: center; gap: 12px; }
.c-spoiler-casilla { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13.5px; font-weight: 600; }
.c-cuenta { margin-left: auto; color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.c-aviso { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--superficie); font-size: 14px; }
.c-lista, .c-respuestas { list-style: none; margin: 0; padding: 0; }
.c-lista { margin-top: 18px; }
.c-item { padding: 16px 0; border-top: 1px solid var(--borde); }
.c-cab { display: flex; align-items: center; gap: 10px; }
.c-avatar { flex: none; width: 34px; height: 34px; font-size: 14px; }
.c-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.c-quien b { font-size: 14.5px; }
.c-quien small, .c-cuando { color: var(--tenue); font-size: 12.5px; }
.c-cuando { margin-left: auto; white-space: nowrap; }
.c-pendiente { margin: 8px 0 0 44px; color: var(--ambar); font-size: 12.5px; font-weight: 700; }
:root.claro .c-pendiente { color: #9a6a00; }
.c-cuerpo { position: relative; margin: 6px 0 0 44px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.c-cuerpo p { margin: 0 0 .5em; }
.c-con-spoiler p { filter: blur(6px); user-select: none; }
.c-velo { position: absolute; inset: 0; border: 0; border-radius: 8px; background: rgb(0 0 0 / .35); color: #fff; font-size: 13px; font-weight: 700; }
.c-acciones { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 38px; }
.c-acciones button { padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--tenue); font-size: 13px; font-weight: 700; }
.c-acciones button:hover { background: var(--superficie); color: var(--texto); }
.c-like.activo { color: #ff5c7a; }
.c-hueco-respuesta { margin: 10px 0 0 44px; }
.c-reporte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 44px; padding: 10px; border-radius: 10px; background: var(--superficie); font-size: 13px; }
.c-reporte span { width: 100%; color: var(--suave); font-weight: 700; }
.c-reporte button { padding: 5px 10px; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); font-size: 12.5px; }
.c-vacio { padding: 22px 0; color: var(--tenue); text-align: center; }
.comentarios-normas { margin: 16px 0 0; color: var(--tenue); font-size: 12.5px; }
.comentarios-normas a { text-decoration: underline; }

/* Comentarios como en la web de anime (2026-10-20): hilos como en Reddit, reacciones, una imagen
   por comentario, nivel e insignia de moderación. Una línea baja del avatar de quien comentó y se
   curva hacia el avatar de cada respuesta; tocarla pliega el hilo. --sangria: cuánto entra cada
   nivel; --pt: relleno de arriba del comentario. */
.comentarios { --sangria: 34px; --linea: var(--borde); --hover: rgb(255 255 255 / .06); }
:root.claro .comentarios { --hover: rgb(0 0 0 / .05); }
.c-item { position: relative; --pt: 16px; }
.c-respuestas { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding-left: var(--sangria); }
.c-respuesta { --pt: 10px; padding: 10px 0 4px; border-top: 0; }
.c-respuesta::before { content: ""; position: absolute; left: calc(16px - var(--sangria)); top: 0; width: calc(var(--sangria) - 18px); height: calc(var(--pt) + 17px);
  border-left: 2px solid var(--linea); border-bottom: 2px solid var(--linea); border-bottom-left-radius: 12px; }
.c-respuestas > .c-respuesta:last-child::after { content: ""; position: absolute; left: calc(15px - var(--sangria)); top: calc(var(--pt) + 17px); bottom: -14px; width: 4px; background: var(--fondo); }
.c-linea { position: absolute; left: 10px; top: calc(var(--pt) + 38px); bottom: 0; width: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.c-linea::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--linea); }
.c-linea:hover::before { background: var(--tenue); }
.c-item:has(> .c-linea:hover) > .c-respuestas > .c-respuesta::before { --linea: var(--tenue); }
.plegado > .c-linea, .plegado > .c-respuestas { display: none; }
.c-plegar { display: inline-flex; margin: 4px 0 0 36px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--tenue); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.c-plegar:hover { color: var(--texto); background: var(--hover); }
.c-item:not(.plegado) > .c-plegar { display: none; }
.c-responde { margin: 2px 0 0 44px; font-size: 12.5px; color: var(--tenue); }
.c-responde b { color: var(--texto); font-weight: 700; }
.c-destacado { animation: c-destacar 2.4s ease-out; border-radius: 12px; }
@keyframes c-destacar { 0%, 30% { background: var(--hover); box-shadow: 0 0 0 6px var(--hover); } 100% { background: transparent; box-shadow: none; } }
.c-escribe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.c-escribe > .c-avatar { width: 40px; height: 40px; font-size: 17px; margin-top: 4px; }
.c-avatar { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--superficie); color: var(--suave); font-weight: 800; }
.c-form-pie { flex-wrap: wrap; gap: 8px 10px; }
.c-cancelar { padding: 7px 12px; border: 1px solid var(--borde); border-radius: 999px; background: none; color: var(--suave); font-size: 13px; font-weight: 700; cursor: pointer; }
.c-btn-img { display: inline-flex; align-items: center; gap: 6px; }
.c-adjunto { position: relative; width: max-content; max-width: 220px; }
.c-adjunto[hidden] { display: none; }
.c-adjunto img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--borde); }
.c-quitar-img { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #000b; color: #fff; font-weight: 800; cursor: pointer; }
.c-img { display: block; width: max-content; max-width: min(100%, 420px); margin: 6px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); }
.c-img img { display: block; max-width: 100%; height: auto; background: var(--superficie); }
.c-rol { font: 800 10.5px/1 var(--texto-fuente); letter-spacing: .06em; padding: 3px 6px; border-radius: 6px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.c-nivel { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nv) 50%, transparent); background: color-mix(in srgb, var(--nv) 12%, transparent); color: var(--texto); font: 700 11.5px/1 var(--texto-fuente); cursor: default; }
.c-nivel b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--nv); color: #14161a; font: 800 11px/1 var(--texto-fuente); }
.c-acciones { align-items: center; }
.c-acciones button { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.c-reac { position: relative; }
.c-reac-boton.activo { color: var(--texto); background: var(--superficie); }
.c-reac-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--borde); box-shadow: 0 14px 30px -12px #000a; }
.c-reac-menu[hidden] { display: none; }
.c-acciones .c-reac-menu button { font-size: 21px; line-height: 1; padding: 5px 6px; border-radius: 50%; transition: transform .15s, background-color .15s; }
.c-acciones .c-reac-menu button:hover { transform: scale(1.25) translateY(-2px); background: var(--hover); }
.c-acciones .c-reac-menu button.on { background: var(--hover); }
.c-reac-resumen { font-size: 13px; font-weight: 700; color: var(--tenue); padding: 0 6px; cursor: default; }
.c-reac-resumen:empty { display: none; }

/* Aviso corto abajo de la pantalla ("Subiste al nivel 3", "Tu foto quedó lista") */
.ak-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 999px;
  background: var(--texto); color: var(--fondo); font-weight: 700; font-size: 14px; transition: opacity .3s, transform .3s; pointer-events: none; }
.ak-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Perfil: foto con lápiz para cambiarla, catálogo de avatares, nivel y datos */
.perfil-cab { display: flex; align-items: center; gap: 16px; }
.perfil-cab h1 { margin: 0; }
.perfil-cab .cuenta-sub { margin: 4px 0 0; word-break: break-all; }
.avatar-grande { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; flex: none; font: 800 30px var(--titulares); }
.avatar-grande [data-foto-perfil] { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.cambiar-foto { position: relative; border: 0; padding: 0; cursor: pointer; background: var(--superficie); color: var(--texto); }
.cambiar-foto .lapiz { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); }
.cambiar-foto:hover .lapiz { border-color: var(--tenue); }
.elegir-foto { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); }
.elegir-foto[hidden] { display: none; }
.ef-cab h2 { margin: 0; font: 800 18px var(--titulares); }
.ef-cab p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.ef-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.ef-grilla { display: grid; grid-template-columns: repeat(auto-fill, 64px); grid-auto-rows: 64px; justify-content: space-between; gap: 12px; max-height: 300px; overflow: auto; padding: 4px; }
.ef-grilla[hidden] { display: none; }
.ef-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--fondo); cursor: pointer; transition: transform .15s, border-color .15s; }
.ef-av img { width: 100%; height: 100%; object-fit: cover; }
.ef-av:hover { transform: scale(1.06); }
.ef-av.on { border-color: var(--texto); }
.ef-confirmar[hidden] { display: none; }
.ef-confirmar p { margin: 0 0 10px; font-weight: 600; }
.ef-confirmar div { display: flex; gap: 10px; }
.nivel-caja[hidden] { display: none; }
.nivel-caja { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); }
.nv-cab { display: flex; align-items: center; gap: 14px; }
.nv-num { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nv); color: #14161a; font: 800 24px/1 var(--titulares); }
.nv-cab small { font-weight: 800; font-size: 11px; letter-spacing: .08em; color: var(--tenue); }
.nv-cab h2 { margin: 3px 0 2px; font: 800 22px/1.05 var(--titulares); }
.nv-cab p { margin: 0; color: var(--suave); font-size: 13.5px; }
.nv-barra { height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.nv-barra i { display: block; height: 100%; border-radius: inherit; background: var(--nv); min-width: 4px; transition: width .6s; }
.nv-como summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.nv-como ul { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.nv-como li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.nv-como li b { font-weight: 800; }
.nv-como li.menos b, .nv-como li.menos span, .nv-como li small { color: var(--tenue); }
.nv-como li small { font-size: 12px; white-space: nowrap; }
.nv-nota { margin: 10px 0 0; color: var(--tenue); font-size: 13px; }
.nv-rangos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nv-rangos span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--borde); font-size: 12.5px; font-weight: 700; color: var(--tenue); opacity: .6; }
.nv-rangos span.on { color: var(--texto); opacity: 1; border-color: color-mix(in srgb, var(--nv) 55%, transparent); }
.nv-rangos i { width: 9px; height: 9px; border-radius: 50%; background: var(--nv); }
.nv-rangos small { font-weight: 600; color: var(--tenue); }
.cuenta-form.en-linea { flex-direction: row; align-items: flex-end; gap: 10px; margin-top: 10px; }
.cuenta-form.en-linea label { flex: 1; }

/* Editor para recortar la foto de perfil */
.recorte-fondo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: #000b; }
.recorte { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 20px;
  background: var(--superficie); border: 1px solid var(--borde); text-align: center; }
.recorte h2 { margin: 0; font: 800 22px var(--titulares); }
.recorte p { margin: -6px 0 0; color: var(--suave); font-size: 14px; }
.recorte-lienzo { width: 300px; max-width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; background: #000; cursor: grab; touch-action: none; }
.recorte-lienzo:active { cursor: grabbing; }
.recorte-zoom { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--suave); font-size: 13px; font-weight: 700; }
.recorte-zoom input { flex: 1; accent-color: var(--texto); }
.recorte-botones { display: flex; gap: 10px; width: 100%; }
.recorte-botones button { flex: 1; }

@media (max-width: 759px) {
  .boton-cuenta-nombre { display: none; }
  .boton-cuenta { padding: 0 12px; }
  .boton-cuenta:has(.avatar-mini) { padding: 0 3px; }
  .c-cuerpo, .c-pendiente, .c-hueco-respuesta, .c-reporte { margin-left: 0; }
  .c-acciones { margin-left: -6px; }
  .comentarios { --sangria: 24px; }
  .c-responde, .c-plegar { margin-left: 0; }
  .c-nivel { padding: 2px; }
  .c-nivel > span { display: none; }
  .c-escribe { grid-template-columns: minmax(0, 1fr); }
  .c-escribe > .c-avatar { display: none; }
  .cuenta-form.en-linea { flex-direction: column; align-items: stretch; }
  .cuenta-caja { padding: 22px; }
}

@media (min-width: 1200px) { .comentarios-caja { margin-left: 104px; } }

/* Temporada (/temporada/otono-2026/) */
.temporada { padding-top: 34px; }
.temporada-otras { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.temporada-otras a { padding: 7px 14px; border: 1px solid var(--borde); border-radius: 999px; color: var(--suave); font: 700 13px var(--texto-fuente); }
.temporada-otras a:hover { color: var(--texto); border-color: var(--texto); }
.temporada-otras a[aria-current="page"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.temporada-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.temporada-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; height: 100%; padding: 10px;
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); }
a.temporada-item:hover { border-color: var(--texto); }
.temporada-item img, .temporada-item .cal-sin { width: 72px; height: 102px; object-fit: cover; border-radius: 7px; background: var(--borde); }
.temporada-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.temporada-texto b { font: 700 15px/1.25 var(--titulares); }
.temporada-texto small { color: var(--tenue); font-size: 12.5px; }
.temporada-generos { color: var(--suave) !important; }
.horarios-temporadas { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }

.con-sesion [data-vista="entrar"] { display: none; }
.c-spoiler-boton { padding: 6px 12px; border: 1px solid var(--borde); border-radius: 999px; background: none; color: var(--suave);
  font: 700 13px var(--texto-fuente); cursor: pointer; }
.c-spoiler-boton:hover { color: var(--texto); border-color: var(--texto); }
/* ||spoiler||: una barra del color del texto que tapa solo esa parte; al tocarla se ve */
.c-spoiler { padding: 0 3px; border-radius: 4px; background: var(--texto); color: transparent; cursor: pointer; user-select: none;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .15s, color .15s; }
.c-spoiler.visto { background: var(--borde); color: inherit; cursor: auto; user-select: text; }
.c-spoiler:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* Perfil del lector */
.cuenta-caja.es-perfil { width: min(860px, 100%); }
.perfil-bloque { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--borde); }
.perfil-bloque h2 { margin: 0; font: 800 19px var(--titulares); }
.perfil-bloque h2 span { color: var(--tenue); font-weight: 600; }
.perfil-nota, .perfil-vacio { margin: 4px 0 14px; color: var(--tenue); font-size: 13.5px; }
.perfil-vacio a { color: var(--texto); text-decoration: underline; }
.perfil-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.perfil-serie { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; background: var(--fondo); }
a.perfil-serie:hover { outline: 1px solid var(--texto); }
.perfil-serie img { width: 44px; height: 62px; object-fit: cover; border-radius: 6px; background: var(--borde); }
.perfil-serie span { overflow: hidden; font: 700 14px/1.25 var(--titulares); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.perfil-semana, .perfil-comentarios { list-style: none; margin: 0; padding: 0; }
.perfil-semana li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.perfil-semana time { color: var(--suave); font-weight: 700; font-variant-numeric: tabular-nums; text-transform: capitalize; }
.perfil-semana a { font-weight: 700; }
.perfil-comentarios li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--borde); }
.perfil-comentarios a { font-size: 14.5px; }
.perfil-comentarios a:hover { text-decoration: underline; }
.perfil-comentarios small { color: var(--tenue); font-size: 12.5px; }
.perfil-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--borde); }
.perfil-pie a { font-weight: 700; text-decoration: underline; }
/* Seguir una serie desde su ficha */
.serie-seguir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; }
.serie-seguir small { color: var(--suave); font-size: 13px; }
.boton-seguir { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--texto); color: var(--fondo); font: 800 14px var(--texto-fuente); cursor: pointer; }
.boton-seguir.siguiendo { background: none; border: 1px solid var(--borde); color: var(--texto); cursor: default; }
.boton-seguir.siguiendo::before { content: "✓ "; }
.boton-seguir[hidden] { display: none; }
.perfil-pie .boton-salir { width: auto; margin-top: 0; }