/*
  peliculas.es — pe.css (rediseno fase 1)
  Hoja unica para cabecera, pie, listados, hubs, blog, portada (index.html) y ficha (film-detail.html).
  Se sirve con huella de contenido (/css/pe-<md5>.css): ver application.properties.
  Contrastes AA verificados para cada pareja texto/fondo de los tokens.
  --linea-f (bordes de controles) >= 3:1 sobre --fondo, --sup y --sup-2 (WCAG 1.4.11).
  Color de accion = verde de marca #7AB800 solo como RELLENO, con texto #17211A
  (6,84:1) en claro y #101612 (7,58:1) en oscuro; hover #8BC81A (8,18:1 y 9,06:1).
  Nunca como color de texto sobre fondo claro (2,4:1): los enlaces usan --enlace.
  Foco: anillo de 3 px separado 2 px, medido contra el fondo: #17211A en claro
  (15,3:1; 6,8:1 frente al verde) y #A6DB3C en oscuro (11,2:1).
*/

/* ── Fuente propia: Inter (OFL 1.1), subconjunto latin, servida desde /fonts ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/inter-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Titulos grandes: "Peliculas Titular", version modificada de Playfair Display 700
   (SIL OFL 1.1, licencia en /fonts/OFL-PlayfairDisplay.txt): instancia 700 de la fuente
   variable de google/fonts, subconjunto latin, en WOFF. Al ser una Modified Version no
   puede llevar el nombre reservado "Playfair Display" (OFL, condicion 3): se renombra. */
@font-face { font-family: 'Peliculas Titular'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/titular-latin-700.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens ── */
:root {
  --fondo: #F5F7F2;  --sup: #FFFFFF;  --sup-2: #EEF1EA;
  --tinta: #17211A;  --tinta-2: #4A5650;
  --linea: #D9DFD4;  --linea-f: #78837C;
  --accion: #7AB800; --accion-hover: #8BC81A; --accion-tinta: #17211A;
  --enlace: #3B6A00; --enlace-hover: #2E5300;
  --marca: #7AB800;
  --inc-f: #E6F2CF;  --inc-t: #2E5300;
  --baja-f: #FBE9E7; --baja-t: #8E1B1B;
  --info-f: #E6F1FB; --info-t: #185FA5;
  --aviso-f: #FAEEDA; --aviso-t: #854F0B;
  --gratis-f: #DDF1EC; --gratis-t: #0D5E4C;
  --nuevo-f: #DDF1EC;  --nuevo-t: #0D5E4C;
  --gratis-relleno: #0D5E4C; --gratis-relleno-t: #FFFFFF;
  --foco: #17211A;
  --f-titulo: 'Peliculas Titular', Georgia, 'Times New Roman', serif;
  --r-etq: 6px; --r-ctl: 10px; --r-bloque: 14px;
  --ancho: 1120px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101612;  --sup: #18201B;  --sup-2: #222B25;
    --tinta: #E7ECE4;  --tinta-2: #A9B4AC;
    --linea: #2C362F;  --linea-f: #77847C;
    --accion: #7AB800; --accion-hover: #8BC81A; --accion-tinta: #101612;
    --enlace: #A6DB3C; --enlace-hover: #C0EC6A;
    --inc-f: #24361A;  --inc-t: #C5EC86;
    --baja-f: #3A1A18; --baja-t: #F4B4AC;
    --info-f: #16263A; --info-t: #9CC6F0;
    --aviso-f: #33260F; --aviso-t: #F0C987;
    --gratis-f: #123029; --gratis-t: #8FE0CB;
    --nuevo-f: #123029;  --nuevo-t: #8FE0CB;
    --gratis-relleno: #8FE0CB; --gratis-relleno-t: #0B1F1A;
    --foco: #A6DB3C;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.55; background: var(--fondo); color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
img { max-width: 100%; }
:where(a) { color: var(--enlace); text-underline-offset: 3px; }
:where(a):hover { color: var(--enlace-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 300; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--tinta); color: var(--fondo); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 20px 16px 40px; }
.contenedor-estrecho { max-width: 760px; }
@media (min-width: 720px) { .contenedor { padding: 32px 32px 56px; } }

/* ── Cabecera: una sola barra (marca + buscador visible + menu en movil) ── */
.cab { background: var(--sup); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 100; }
.cab-fila { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; min-height: 60px; }
.cab-marca { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; flex-shrink: 0; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.cab-marca img { width: 28px; height: 28px; display: block; }
.cab-marca-t span { color: var(--tinta-2); font-weight: 600; }
.cab-busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 48px; max-width: 460px; padding: 0 0 0 12px; border: 1.5px solid var(--linea-f); border-radius: var(--r-ctl); background: var(--fondo); }
.cab-busca:focus-within { border-color: var(--foco); box-shadow: 0 0 0 2px var(--foco); }
.cab-busca input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; outline: none; padding: 0; align-self: stretch; }
.cab-busca input::placeholder { color: var(--tinta-2); opacity: 1; }
.cab-busca button { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--tinta); cursor: pointer; }
.cab-busca button:hover { background: var(--sup-2); }
.cab-busca svg, .btn-icono svg { width: 20px; height: 20px; }
.btn-icono { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--tinta); cursor: pointer; flex-shrink: 0; }
.btn-icono:hover { background: var(--sup-2); }
.cab-nav { display: none; gap: 2px; margin-left: auto; }
.cab-nav a, .cab-menu a { display: flex; align-items: center; min-height: 44px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 600; white-space: nowrap; }
.cab-nav a { padding: 0 12px; font-size: 15px; }
.cab-nav a:hover, .cab-menu a:hover { background: var(--sup-2); }
.cab-menu { display: flex; flex-direction: column; padding: 4px 8px 8px; border-top: 1px solid var(--linea); }
.cab-menu[hidden] { display: none; }
.cab-menu a { padding: 0 8px; font-size: 16px; }
@media (max-width: 359px) { .cab-marca-t { display: none; } }
@media (min-width: 860px) {
  .cab-fila { gap: 24px; padding: 0 32px; min-height: 68px; }
  .cab-nav { display: flex; }
  .cab-menu-btn, .cab-menu, .cab-menu[hidden] { display: none; }
}

/* ── Titulares de pagina ── */
.titular { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.titular h1 { font-family: var(--f-titulo); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; }
.titular h1 em, .titular h1 span { font-style: normal; }
.titular p { font-size: 16px; color: var(--tinta-2); max-width: 40em; }
@media (max-width: 359px) { .titular h1, .articulo-titulo, .error-404 h1 { font-size: 27px; } }
@media (min-width: 720px) { .titular h1 { font-size: 42px; line-height: 1.12; } }
.h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.migas { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 16px; font-size: 14px; color: var(--tinta-2); }
.migas a { color: var(--tinta-2); min-height: 44px; display: inline-flex; align-items: center; }

/* ── Filas de titulo (listados) ── */
.filas { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.fila-t { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px 4px; border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.fila-t:hover .fila-t-titulo { text-decoration: underline; }
.poster { width: 56px; height: 84px; flex-shrink: 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--linea);
  background: repeating-linear-gradient(135deg, var(--sup-2) 0 10px, var(--fondo) 10px 20px); }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fila-t-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fila-t-titulo { font-size: 16px; font-weight: 600; line-height: 1.3; }
.anio { color: var(--tinta-2); font-weight: 400; }
.etqs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etq { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: var(--r-etq); font-size: 13px; font-weight: 600; background: var(--sup-2); color: var(--tinta); }
.etq-borde { background: transparent; border: 1px solid var(--linea-f); }
.etq-nueva { background: var(--inc-f); color: var(--inc-t); }
.etq-baja { background: var(--baja-f); color: var(--baja-t); }
.etq-info { background: var(--info-f); color: var(--info-t); }
.etq-aviso { background: var(--aviso-f); color: var(--aviso-t); }
.etq-gratis { background: var(--gratis-f); color: var(--gratis-t); }
.vacio { padding: 48px 0; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.vacio h2 { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; max-width: 100%; }
.vacio .filas { align-self: stretch; text-align: left; }
.vacio p { color: var(--tinta-2); }

/* ── Paginacion (mantiene el marcado page-item/page-link) ── */
.pag { display: flex; justify-content: center; padding: 24px 0 8px; }
.pag ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pag .page-link { min-width: 44px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--tinta); border: 1.5px solid transparent; }
.pag a.page-link:hover { background: var(--sup-2); }
.pag .page-item.active .page-link { background: var(--tinta); color: var(--fondo); }
.pag .page-item.disabled .page-link { color: var(--tinta-2); opacity: .55; }
.pag .page-item:first-child a.page-link, .pag .page-item:last-child a.page-link { border-color: var(--linea-f); }

/* ── Chips de navegacion e indices ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-nav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--sup); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; cursor: pointer; }
.chip-nav:hover { border-color: var(--linea-f); }
.chip-nav.active, .chip-nav[aria-current] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.rejilla-plat { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.tarjeta-plat { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: var(--r-bloque); border: 1px solid var(--linea); background: var(--sup); color: var(--tinta); text-decoration: none; }
.tarjeta-plat:hover { border-color: var(--linea-f); }
.tarjeta-plat:hover .tarjeta-plat-nombre { text-decoration: underline; }
.ini { width: 40px; height: 40px; border-radius: var(--r-ctl); background: var(--sup-2); border: 1px solid var(--linea); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--tinta-2); flex-shrink: 0; }
.tarjeta-plat-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-plat-nombre { font-weight: 600; font-size: 16px; }
.tarjeta-plat-dato { font-size: 14px; color: var(--tinta-2); }
#alphabetical-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
#alphabetical-index a { height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--sup); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; }
#alphabetical-index a:hover { border-color: var(--linea-f); }
.bloque-az { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 12px; }

/* ── Buscador y filtros (/buscar y /peliculas/{letra}) ── */
.bus-diseno { display: flex; flex-direction: column; gap: 20px; }
.bus-filtros { display: flex; flex-direction: column; gap: 16px; }
.bus-grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bus-grupo legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.bus-grupo-tipo .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bus-grupo-tipo .chips::-webkit-scrollbar { display: none; }
.bus-grupo-tipo .chip-nav { flex-shrink: 0; }
.bus-grupo-plat, .bus-grupo-dur, .bus-aplicar { display: none; }
.bus-opcion { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 15px; color: var(--tinta); cursor: pointer; }
.bus-opcion:hover { background: var(--sup-2); }
.bus-opcion.active { font-weight: 700; background: var(--sup-2); box-shadow: inset 3px 0 0 var(--tinta); }
.pdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.btn-prim { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-ctl); background: var(--accion); color: var(--accion-tinta); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn-prim:hover { background: var(--accion-hover); }
.btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--linea-f); background: var(--sup); color: var(--tinta); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; min-width: 44px; }
.btn-sec:hover { background: var(--sup-2); }
.insignia { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-size: 12px; font-weight: 700; }
.hoja-fondo { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); align-items: flex-end; }
.hoja-fondo.open { display: flex; }
.hoja { width: 100%; max-height: 85vh; overflow-y: auto; padding: 8px 16px 24px; border-radius: 16px 16px 0 0; background: var(--sup); display: flex; flex-direction: column; gap: 16px; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--linea); }
.hoja-cab h2 { font-size: 18px; font-weight: 800; }
@media (min-width: 760px) {
  .bus-diseno { flex-direction: row; align-items: flex-start; gap: 32px; }
  .bus-filtros { width: 220px; flex-shrink: 0; position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .bus-grupo-tipo .chips { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 0; }
  .bus-grupo-tipo .chip-nav { border: 0; border-radius: 8px; min-height: 44px; padding: 0 8px; font-size: 15px; background: transparent; }
  .bus-grupo-tipo .chip-nav:hover { background: var(--sup-2); }
  .bus-grupo-tipo .chip-nav.active { background: var(--sup-2); color: var(--tinta); font-weight: 700; box-shadow: inset 3px 0 0 var(--tinta); }
  .bus-grupo-plat, .bus-grupo-dur, .bus-aplicar { display: flex; }
  .bus-movil { display: none; }
  .bus-resultados { flex: 1; min-width: 0; }
}

/* ── Novedades y bajas ── */
.pestanas { display: flex; gap: 8px; margin-bottom: 24px; }
.dia { margin: 28px 0 4px; font-size: 18px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; }
.dia:first-of-type { margin-top: 0; }
.dia span { font-size: 14px; font-weight: 400; color: var(--tinta-2); }

/* ── Blog: Sala de estar ── */
.post-lista { list-style: none; padding: 0; display: flex; flex-direction: column; }
.post-item { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; border-top: 1px solid var(--linea); }
.post-item:first-child { border-top: 0; padding-top: 0; }
.post-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-ctl); background: var(--sup-2); }
.post-item h2 { font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.post-item h2 a { color: var(--tinta); text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; }
.post-item p { color: var(--tinta-2); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--tinta-2); }
@media (min-width: 640px) { .post-item { flex-direction: row; gap: 20px; } .post-item img { width: 200px; height: 125px; flex-shrink: 0; aspect-ratio: auto; } .post-item-cuerpo { flex: 1; min-width: 0; } }
.post-item-cuerpo { display: flex; flex-direction: column; gap: 8px; }
.pag-blog { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 24px; }
.pag-blog a { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 1.5px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; }
.pag-blog a:hover { border-color: var(--linea-f); }
.pag-blog a.active { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.articulo-titulo { font-family: var(--f-titulo); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: 0; margin: 8px 0 12px; text-wrap: balance; overflow-wrap: break-word; }
@media (min-width: 720px) { .articulo-titulo { font-size: 42px; line-height: 1.12; } }
.articulo-portada { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-bloque); margin: 8px 0 24px; }
.prosa { font-size: 17px; line-height: 1.7; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin-top: 1.8em; }
.prosa h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin-top: 1.5em; }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li + li { margin-top: .4em; }
.prosa a { color: var(--enlace); font-weight: 600; }
.prosa img { height: auto; border-radius: var(--r-ctl); }
.prosa blockquote { margin-left: 0; padding-left: 16px; border-left: 3px solid var(--linea-f); color: var(--tinta-2); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prosa th, .prosa td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; }
.compartir { margin: 40px 0 24px; padding: 20px; border-radius: var(--r-bloque); background: var(--sup); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 12px; }
.compartir p { font-weight: 700; }
.relacionados { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 16px; }
.relacionados ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.relacionado { display: flex; flex-direction: column; gap: 8px; }
.relacionado img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-ctl); background: var(--sup-2); }
.relacionado a { font-weight: 700; color: var(--tinta); text-decoration: none; line-height: 1.3; }
.relacionado a:hover { text-decoration: underline; }
.relacionado span { font-size: 14px; color: var(--tinta-2); }

/* ── Entre bastidores: diario ── */
.diario { list-style: none; padding: 0 0 0 24px; position: relative; display: flex; flex-direction: column; gap: 32px; }
.diario::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 0; width: 2px; background: var(--linea); }
.entry { position: relative; display: flex; flex-direction: column; gap: 6px; }
.entry .dot { position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-2); box-shadow: 0 0 0 3px var(--fondo); }
.entry .dot.teal { background: var(--nuevo-t); }
.entry .dot.gray { background: var(--linea-f); }
.entry-date { font-size: 14px; color: var(--tinta-2); }
.entry .tag { align-self: flex-start; display: inline-flex; padding: 2px 8px; border-radius: var(--r-etq); font-size: 13px; font-weight: 700; }
.tag-new { background: var(--nuevo-f); color: var(--nuevo-t); }
.tag-mejora { background: var(--info-f); color: var(--info-t); }
.tag-fix { background: var(--aviso-f); color: var(--aviso-t); }
.entry-title { font-size: 18px; line-height: 1.3; font-weight: 700; }
.entry-body { font-size: 16px; line-height: 1.65; color: var(--tinta); }
.entry-body a { font-weight: 600; }

/* ── En directo: canales gratuitos en continuo ── */
.directo-seccion { padding-top: 24px; }
.directo-seccion-t { font-family: var(--f-titulo); font-size: 26px; line-height: 1.2; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.directo-grupo { margin-top: 20px; }
.directo-grupo-t { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.canales { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.canal { display: flex; align-items: center; gap: 12px; min-height: 64px; height: 100%; padding: 12px 14px; border-radius: var(--r-bloque); border: 1px solid var(--linea); background: var(--sup); color: var(--tinta); text-decoration: none; }
.canal:hover { border-color: var(--linea-f); }
.canal:hover .canal-nombre { text-decoration: underline; }
.canal-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.canal-nombre { font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.canal-editor { font-size: 14px; color: var(--tinta-2); }
.canal-ext { width: 18px; height: 18px; flex-shrink: 0; color: var(--tinta-2); }
.directo-pie { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tinta-2); }
@media (min-width: 720px) { .directo-seccion-t { font-size: 30px; } }

/* ── Error 404 ── */
.error-404 { max-width: 560px; margin: 0 auto; padding: 48px 16px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.error-404 h1 { font-family: var(--f-titulo); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: 0; }
.error-404 .cita { color: var(--tinta-2); font-size: 17px; }
.busca-grande { display: flex; align-items: center; gap: 8px; width: 100%; height: 56px; padding: 0 6px 0 16px; border: 2px solid var(--tinta); border-radius: var(--r-bloque); background: var(--sup); }
.busca-grande:focus-within { box-shadow: 0 0 0 2px var(--foco); }
.busca-grande input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; outline: none; align-self: stretch; }
.busca-grande input::placeholder { color: var(--tinta-2); opacity: 1; }
.busca-grande button { min-height: 44px; }

/* ── Ficha de pelicula (film-detail.html; maqueta de 2 columnas, 13 nov 2026) ──
   Movil: una columna (cabecera, disponibilidad, resto, aviso). Desde 960 px:
   izquierda ancha y, a la derecha, «Disponible en» y «Avisame». Sin fijado al bajar:
   la cabecera es fija y la columna puede ser mas alta que la pantalla (revision 13 nov).
   Las filas gratuitas (ads, free, loan) llevan --gratis-relleno: 7,7:1 en claro. */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ficha-lateral { display: contents; }
.ficha-cab { order: 1; } .ficha-dispo { order: 2; } .ficha-resto { order: 3; } .ficha-aviso { order: 4; } .mas-de { order: 5; } .tmdb-nota { order: 6; }
.ficha-cab, .ficha-resto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ficha-resto { gap: 32px; }
.ficha-cab-fila { display: flex; gap: 16px; align-items: flex-start; }
.ficha-cab-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ficha-poster { width: 96px; height: 144px; flex-shrink: 0; order: 2; border-radius: 8px; overflow: hidden; border: 1px solid var(--linea); background: var(--sup-2); display: flex; align-items: flex-end; padding: 8px; color: var(--tinta-2); font-size: 12px; }
.ficha-poster img { width: calc(100% + 16px); height: calc(100% + 16px); margin: -8px; object-fit: cover; display: block; flex-shrink: 0; max-width: none; }
/* Separadores que no quedan colgando al partir la linea: cada dato lleva su borde y el primero se recorta. */
.ficha-meta { display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 14px; color: var(--tinta-2); font-weight: 500; margin-left: -11px; clip-path: inset(0 0 0 11px); }
.ficha-meta span { padding: 0 10px; border-left: 1px solid var(--linea-f); }
.ficha-h1 { font-family: var(--f-titulo); font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; }
.ficha-original { font-size: 14px; color: var(--tinta-2); font-style: italic; }
.ficha-dir { font-size: 15px; color: var(--tinta-2); }
.ficha-dir strong { color: var(--tinta); font-weight: 600; }
.respuesta { font-size: 17px; line-height: 1.5; font-weight: 500; max-width: 38em; text-wrap: pretty; }
.sellos, .etqs-gen { display: flex; flex-wrap: wrap; gap: 8px; }
.sello { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-etq); border: 1px solid var(--linea-f); }
.etq-gen { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--sup-2); color: var(--tinta); text-decoration: none; font-size: 14px; font-weight: 500; }
.etq-gen:hover { background: var(--linea); }
.dispo { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-bloque); overflow: hidden; }
.dispo-cab { padding: 16px 16px 4px; }
.cta { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; border-bottom: 1px solid var(--linea); }
.cta-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cta-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cta-plat { font-size: 22px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.afil { font-size: 13px; color: var(--tinta-2); text-decoration: underline; text-decoration-style: dotted; }
.btn-ver { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-ctl); background: var(--accion); color: var(--accion-tinta); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.btn-ver:hover { background: var(--accion-hover); color: var(--accion-tinta); }
.btn-ver svg { width: 16px; height: 16px; }
.lista-tit { padding: 12px 16px 4px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.lista-plat { list-style: none; margin: 0; padding: 4px 0; }
.fila-plat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 16px; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--linea); }
.lista-plat li:first-child .fila-plat { border-top: 0; }
.fila-plat:focus-visible { outline-offset: -3px; }
a.fila-plat:hover { background: var(--fondo); }
.fila-nom { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.fila-nom-t { display: flex; flex-direction: column; min-width: 0; }
.fila-nom small { font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.logo-plat { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--linea); }
.ini-plat { width: 32px; height: 32px; border-radius: 8px; background: var(--sup-2); border: 1px solid var(--linea); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--tinta-2); flex-shrink: 0; text-transform: uppercase; }
.acc { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-etq); white-space: nowrap; flex-shrink: 0; }
.acc-inc { background: var(--inc-f); color: var(--inc-t); }
.acc-alq { color: var(--tinta); border: 1.5px solid var(--linea-f); }
.acc-com { color: var(--tinta); border: 1.5px dashed var(--linea-f); }
.acc-gratis { background: var(--gratis-relleno); color: var(--gratis-relleno-t); }
.dispo-aviso { font-size: 14px; color: var(--tinta-2); padding: 12px 16px; background: var(--sup-2); }
.dispo-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linea); }
.btn-sec svg { width: 18px; height: 18px; }
.compartir-panel { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.compartir-panel[hidden] { display: none; }
.texto { line-height: 1.65; max-width: 40em; }
.ficha-seccion { display: flex; flex-direction: column; gap: 10px; }
.ficha-caja { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-bloque); border: 1px solid var(--linea); background: var(--sup); }
.dl-ficha { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 15px; }
.dl-ficha dt { color: var(--tinta-2); padding: 10px 16px 10px 0; border-top: 1px solid var(--linea); }
.dl-ficha dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--linea); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dl-ficha dt:first-of-type, .dl-ficha dt:first-of-type + dd { border-top: 0; }
.dl-ficha small { font-weight: 400; color: var(--tinta-2); }
/* Calificacion por edades: mismos colores que la ficha anterior, oscurecidos para
   texto blanco >= 5:1 (antes +16, +7 y TP no llegaban a 4,5:1). Igual en claro y oscuro. */
.cert { display: inline-block; padding: 2px 8px; border-radius: var(--r-etq); font-size: 13px; font-weight: 700; color: #FFFFFF; background: #0F7565; }
.cert-18 { background: #B0332A; } .cert-16 { background: #B35400; } .cert-12 { background: #1F6FA3; } .cert-7 { background: #1E7E45; } .cert-tp { background: #0F7565; }
.cert-fuente { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-2); }
.plegable { border: 1px solid var(--linea); border-radius: var(--r-ctl); background: var(--sup); }
.plegable summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary svg { width: 18px; height: 18px; transition: transform .15s; }
.plegable[open] summary svg { transform: rotate(180deg); }
.plegable-cuerpo { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.premio { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linea); }
.premio:first-child { border-top: 0; }
.premio span:first-child { color: var(--tinta-2); }
.premio strong { color: var(--tinta); font-weight: 600; }
.mas-de { display: flex; flex-direction: column; gap: 14px; padding-top: 32px; border-top: 1px solid var(--linea); }
.mas-de .tarjetas + .h2 { margin-top: 20px; }
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.tarjeta { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tinta); }
.tarjeta-p { aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--linea); background: repeating-linear-gradient(135deg, var(--sup-2) 0 10px, var(--fondo) 10px 20px); }
.tarjeta-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-t { font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.tarjeta-a { color: var(--tinta-2); font-weight: 500; }
.tarjeta:hover .tarjeta-t { text-decoration: underline; }
.tmdb-nota { font-size: 13px; color: var(--tinta-2); }
.alerta-campos { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.campo input, .campo select { height: 48px; border: 1.5px solid var(--linea-f); border-radius: var(--r-ctl); padding: 0 12px; font: inherit; font-size: 16px; background: var(--sup); color: var(--tinta); }
.alerta-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.alerta-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accion); }
.alerta-cta-btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.alerta-cta-btn:disabled { background: var(--sup-2); color: var(--tinta-2); cursor: not-allowed; }
.alerta-cta-feedback { font-size: 14px; margin: 0; display: none; }
.alerta-cta-feedback.show { display: block; }
.alerta-cta-feedback.ok { color: var(--inc-t); }
.alerta-cta-feedback.info { color: var(--info-t); }
.alerta-cta-feedback.err { color: var(--baja-t); }
/* Movil: "Ver ahora" en la primera pantalla (decision de Jorge, 13 nov). Migas en una
   linea (mismos enlaces, recortadas) y etiquetas de genero ocultas (siguen en migas y
   ficha tecnica). */
.migas-ficha { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-bottom: 12px; }
.migas-ficha a { min-height: 32px; flex-shrink: 0; }
.migas-ficha [aria-current] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 959px) {
  .etqs-gen { display: none; }
  /* Migas en movil: Inicio > primer genero > titulo (los demas generos siguen en el HTML). */
  .migas-ficha a:nth-of-type(n+3), .migas-ficha .migas-punto { display: none; }
  .migas-ficha { margin-bottom: 8px; }
  .ficha { gap: 20px; }
  .ficha-cab { gap: 12px; }
}
@media (min-width: 960px) {
  .migas-ficha { flex-wrap: wrap; white-space: normal; overflow: visible; margin-bottom: 16px; }
  .migas-ficha a { min-height: 44px; }
  .ficha { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px 56px; align-items: start; }
  .ficha-cab { grid-column: 1; grid-row: 1; }
  .ficha-resto { grid-column: 1; grid-row: 2; padding-top: 32px; border-top: 1px solid var(--linea); }
  .ficha-lateral { display: flex; flex-direction: column; gap: 16px; grid-column: 2; grid-row: 1 / span 2; }
  .ficha-poster { width: 160px; height: 240px; order: 0; }
  .ficha-cab-fila { gap: 24px; }
  .ficha-h1 { font-size: 48px; line-height: 1.1; }
  .respuesta { font-size: 20px; }
  .mas-de, .tmdb-nota { grid-column: 1 / -1; }
  .tarjetas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
  .tarjeta-t { font-size: 15px; }
}

/* ── Pie (fragments/footer-v2) ── */
.pie { margin-top: auto; background: var(--sup); border-top: 1px solid var(--linea); font-size: 15px; }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; padding: 32px 16px 40px; }
@media (min-width: 720px) { .pie-dentro { padding: 40px 32px; } }
.pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.pie h2 { font-size: 14px; font-weight: 700; color: var(--tinta-2); margin-bottom: 8px; }
.pie ul { list-style: none; padding: 0; }
.pie li a { display: flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 14px; color: var(--tinta-2); }
.pie-legal a { color: var(--tinta-2); display: inline-flex; align-items: center; min-height: 44px; }
/* Enlace a la app de Android (solo con el interruptor; oculto dentro de la propia app) */
.pie-app { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pie-app a { display: inline-block; }
.pie-app img { display: block; height: 48px; width: auto; }
.pie-app span { color: var(--tinta-2); font-size: 14px; }
@media (display-mode: standalone), (display-mode: fullscreen) { .insignia-play { display: none !important; } }
html.en-app .insignia-play { display: none !important; }

/* ── Portada (index.html) ── */
.portada { display: flex; flex-direction: column; gap: 40px; padding-top: 32px; }
.portada-hero { display: flex; flex-direction: column; gap: 16px; }
.portada-hero h1 { font-family: var(--f-titulo); font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: 0; }
.portada-hero h1 em { font-style: normal; }
.portada-lema { font-size: 18px; color: var(--tinta-2); }
.portada-busca { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.portada-busca .busca-grande button { padding: 0 16px; }
@media (max-width: 420px) { .portada-busca .busca-grande button { font-size: 0; gap: 0; padding: 0 14px; } }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sup-2); max-width: 480px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; min-height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--tinta-2); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
@media (max-width: 400px) { .seg button { font-size: 14px; padding: 0 6px; } }
.seg button.active { background: var(--sup); color: var(--tinta); box-shadow: inset 0 -3px 0 var(--tinta); }
.cifras { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 4px; }
.cifras div { display: flex; flex-direction: column-reverse; }
.cifras dt { font-size: 14px; color: var(--tinta-2); }
.cifras dd { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.portada-app { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; color: var(--tinta-2); }
.portada-app a { display: inline-block; }
.portada-app img { display: block; height: 60px; width: auto; }
@media (min-width: 720px) {
  .portada { padding-top: 64px; gap: 56px; }
  .portada-hero h1 { font-size: 68px; line-height: 1.04; }
  .portada-lema { font-size: 21px; }
}
.portada-generos { display: flex; flex-direction: column; gap: 14px; }
.mb { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
/* Portada centrada (decision de Jorge, 13 nov): el bloque principal y los generos, al centro;
   el buscador y la tira conservan la alineacion de su contenido. */
.portada-hero { align-items: center; text-align: center; }
.portada-hero h1 { text-wrap: balance; }
.portada-busca { width: 100%; text-align: left; }
.portada-busca .seg { align-self: center; width: 100%; }
.portada-hero .mb { width: 100%; text-align: left; }
.cifras { justify-content: center; }
.portada-app { justify-content: center; }
.portada-generos { align-items: center; text-align: center; }
.portada-generos .chips { justify-content: center; }
.mb-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.mb-tira { list-style: none; padding: 0 0 4px; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; }
.mb-tira li { scroll-snap-align: start; }
.mb-item { display: flex; flex-direction: column; gap: 6px; color: var(--tinta); text-decoration: none; }
.mb-item:hover .mb-titulo { text-decoration: underline; }
.mb-poster { display: block; width: 112px; height: 168px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea);
  background: repeating-linear-gradient(135deg, var(--sup-2) 0 10px, var(--fondo) 10px 20px); }
.mb-titulo { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mb-mas { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 720px) { .mb-tira { grid-auto-flow: row; grid-template-columns: repeat(5, 112px); overflow: visible; } }