/* DeListado — hoja común de delistado.com. Una sola para la portada, la guía y los legales: así el diseño no se desincroniza entre páginas. */ @font-face { font-family:'Poppins'; /* WOFF2 primero: 7 KB frente a los 156 del TTF, recortado a los caracteres que esta web puede necesitar. El TTF queda de respaldo para navegadores viejos, pero no lo descarga nadie. */ src:url('/marca/Poppins-Regular.woff2') format('woff2'), url('/marca/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'Poppins'; src:url('/marca/Poppins-Bold.woff2') format('woff2'), url('/marca/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } /* Paleta del kit de marca. Los dos verdes no son un capricho: el contraste sobre fondo oscuro y sobre claro necesita valores distintos para cumplir WCAG AA. El gris secundario lo demuestra: --ink-3 era #6B7280 en los DOS modos y no llegaba a 4,5:1 en ninguno (4,44 sobre el crema, 3,85 sobre la tinta). Ahora cada modo tiene el suyo, medido: 4,95 en oscuro y 5,16 en claro. Los valores del modo claro se volvieron a ajustar al añadir la banda crema; el porqué está en el bloque de «prefers-color-scheme: light». */ :root { --bg:#111317; --surface:#191C21; --line:#2E333B; --ink:#F7F5F0; --ink-2:#B6BDC8; --ink-3:#7C8494; --verde:#2BD9AB; /* ── Los tonos del ritmo visual ───────────────────────────────────────── La página dejó de ser un solo fondo de arriba abajo. «crema-2» es la banda alterna —un paso de temperatura, no un color nuevo— y «tinta» es la banda oscura de contraste, que es la MISMA en modo claro y en oscuro a propósito: su trabajo es romper el ritmo, y un fondo que cambia con el tema no rompe nada en uno de los dos. */ --crema-2:#15181D; --tinta:#0D1014; --tinta-ink:#F7F5F0; --tinta-ink-2:#B6BDC8; --tinta-line:#282E37; /* Las mismas que la aplicación. Las de antes eran las barras del isotipo y tenían tres problemas medidos el 20/08/2026: el cine llevaba el rojo de error, los libros el VERDE DE LA MARCA y series/cómics eran casi el mismo color con daltonismo. La aplicación las cambió ese día; esta hoja se quedó con las viejas cinco meses. Los nueve medios llevan color desde el rediseño de agosto: antes solo había cinco y las categorías nuevas salían en gris. */ --cine:#e66767; --serie:#3987e5; --libro:#c98500; --extra:#d95926; --musica:#9085e9; --comic:#d55181; --juego:#199e70; --mesa:#35c0dc; --directo:#d95926; --cartas:#d89ad0; /* El ancho de la columna. Lo fija la envoltura y lo lee «.dentro», que es lo que permite que una banda ocupe la pantalla entera y su contenido siga alineado con el resto de la página. */ --ancho:680px; } @media (prefers-color-scheme: light) { /* ── El verde y el gris se oscurecieron al añadir la banda crema ──────── Medido el 22/08/2026, y por eso están así: La página dejó de tener un solo fondo. Sobre el crema de siempre (#F7F5F0) el verde #087F67 daba 4,54:1 y el gris #656C77 daba 4,86 —los dos justos—. Sobre la banda nueva (#EFEBE1), que es un pelín más oscura, caían a 4,16 y 4,45: por debajo del mínimo. La tentación era aclarar la banda. Aclararla hasta que cumpliera la deja indistinguible del fondo, o sea sin banda. Así que se oscurecen los DOS colores hasta que cumplen en el sitio más exigente, y de paso cumplen con holgura en el resto: verde #077865 → 4,54 en la banda · 4,96 sobre el crema · 5,41 en blanco gris #616873 → 4,72 en la banda · 5,16 sobre el crema · 5,62 en blanco */ :root { --bg:#F7F5F0; --surface:#FFFFFF; --line:#DCDFE4; --ink:#111317; --ink-2:#4B5563; --ink-3:#616873; --verde:#077865; --crema-2:#EFEBE1; } } * { box-sizing:border-box; } html { scroll-behavior:smooth; /* La cabecera es fija: sin esto, un enlace «#invitacion» deja el titular de la sección escondido debajo de ella. */ scroll-padding-top:76px; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; } /* ── Estructura: envoltura, columna y bandas ─────────────────────────────── La envoltura ya no recorta: solo declara cuánto mide la columna. Recortar es trabajo de «.dentro», y así una banda de color puede llegar de borde a borde con su contenido alineado con el resto. */ /* El recorte horizontal va AQUÍ y no en el body, y es importante. En el body no funciona: cuando tiene «overflow: visible» —lo normal— el navegador se lleva el overflow del body al viewport entero. El resultado medido en Chrome: la página deja de desplazarse y la cabecera fija se va bajando sola por la pantalla. Con la regla en un div de por medio no hay propagación que valga. Y «clip» en vez de «hidden» porque «hidden» crea un contenedor de scroll, y eso sí rompe «position: sticky» de la cabecera. Los dos recortan igual; solo uno tiene efectos secundarios. */ /* El recorte horizontal va AQUÍ y no en el body, y no es un detalle. En el body no funciona: cuando tiene «overflow: visible» —lo normal— el navegador se lleva el overflow del body al viewport entero, y la página deja de desplazarse bien. Con un div de por medio no hay propagación. Y «clip» en vez de «hidden» porque «hidden» crea un contenedor de scroll, y eso rompe «position: sticky» de la cabecera. Los dos recortan igual; solo uno tiene efectos secundarios. Comprobado con la cabecera puesta. */ .envoltura { margin:0; padding:0; overflow-x:clip; } .envoltura-ancha { --ancho:1180px; } /* Las páginas de tarea de la guía: algo más anchas porque llevan el índice al lado. El texto sigue en columna corta; lo que se ensancha es la página. */ .envoltura-guia { --ancho:920px; } .dentro { max-width:var(--ancho); margin:0 auto; padding-left:22px; padding-right:22px; } .dentro-ancho { --ancho:1280px; } /* Las páginas de texto —guía y legales— siguen leyéndose en columna estrecha: una línea de 110 caracteres no se lee, se recorre. */ .pagina { padding-top:34px; padding-bottom:76px; } /* 60 px y no 76. Con el aire de antes la página salía un 6 % MÁS LARGA que la que se venía a acortar: el texto había bajado un 22 %, pero las piezas visuales nuevas —la línea, las capturas grandes, el panel de privacidad— ocupan sitio. Recortar el respiro entre bandas devuelve esos 400 px sin quitar nada de lo que se ve. */ .franja { padding:60px 0; } .franja-apretada { padding:40px 0; } .franja-crema { background:var(--crema-2); } .franja-tinta { background:var(--tinta); color:var(--tinta-ink); } .franja-borde { border-top:1px solid var(--line); } .franja-tinta p, .franja-tinta li { color:var(--tinta-ink-2); } .franja-tinta strong, .franja-tinta h2, .franja-tinta h3 { color:var(--tinta-ink); } .franja-tinta a { color:#2BD9AB; } .franja-tinta .entradilla { color:#A7AFBC; } /* Un botón dentro de la franja oscura sigue siendo un botón. La regla de arriba pinta de verde TODOS los enlaces de la franja, y pesa más que «.btn-principal» —dos partes contra una—. El día que la caja de alta pasó de llevar un