/* ==========================================================================
X-MO · tema · base común
Mobile first. Puntos de corte de ancho: 480, 768 y 1024 px (el aviso de edad añade 360, 900
y 1100).
Medidas en rem (28.09.2026): N px = N/16 rem, así que con la raíz a 16 px todo mide lo de
siempre y los px que citan los comentarios son a raíz 16. Solo siguen en px 0px, 999px y las
líneas de 1 px. Los @media van en em (N px = N/16 em; los "hasta" terminan en .99875 em, que
es N,98 px): en los @media, 1 em es la letra que el visitante eligió en el navegador y no la
raíz, así que con 16 px cortan donde siempre y con 20 px la maqueta y los cortes crecen juntos.
En monitores grandes la raíz crece (assets/js/escala.js, sección 3).
Viene de prototipo/assets/base.css, recortado: fuera lo que solo usaban el panel P, la página de entrada, las portadas C y D
y las variantes 1 y 3 del aviso de edad (la web lleva la 2, la de velo; desde el 07.10.2026 la portada es el hero de A y el
resto de B).
Documentación de clases y atributos: prototipo/COMPONENTES.md
========================================================================== */
/* --------------------------------------------------------------------------
1. Tipografía: Montserrat autoalojada (400, 700, 800 y 900, licencia OFL en assets/fonts/OFL-montserrat.txt) en tres
subconjuntos: latin (inglés, neerlandés, francés, español, alemán), latin-ext (checo: Č, š, ř, ž, ů, ě...) y cyrillic
(búlgaro). Salen del paquete npm @fontsource/montserrat 5.3.0 (los archivos latin son idénticos a los de antes, mismo
md5) y cada @font-face lleva su unicode-range: el navegador solo baja un subconjunto si la página tiene algún carácter suyo,
así que una página en inglés sin nombres de idioma en otros alfabetos no pide más que las 4 de siempre (07.10.2026).
Sustituye a Gotham hasta que haya licencia web.
No hay cara de 600 a propósito: font-weight 600 usa la de 700 y no se sintetiza.
-------------------------------------------------------------------------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/montserrat-cyrillic-400-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/montserrat-cyrillic-700-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
src: url('../fonts/montserrat-cyrillic-800-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap;
src: url('../fonts/montserrat-cyrillic-900-normal.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
src: url('../fonts/montserrat-latin-ext-800-normal.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap;
src: url('../fonts/montserrat-latin-ext-900-normal.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/montserrat-latin-400-normal.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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/montserrat-latin-700-normal.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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
src: url('../fonts/montserrat-latin-800-normal.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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap;
src: url('../fonts/montserrat-latin-900-normal.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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Reserva con las medidas de Montserrat (Arial del sistema, ajustada): mientras llega la
fuente el texto ocupa casi lo mismo y no se recoloca al cambiar. Las páginas además
precargan las 4 caras ( en a, b y c; el tema, además, las 4 de latin-ext en checo y las 4 de cirílico en búlgaro). */
@font-face { font-family: 'Montserrat Reserva'; font-weight: 400; src: local('Arial'), local('ArialMT');
size-adjust: 112.8%; ascent-override: 85.8%; descent-override: 22.3%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Reserva'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT');
size-adjust: 110.7%; ascent-override: 87.4%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Reserva'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT');
size-adjust: 112.7%; ascent-override: 85.9%; descent-override: 22.3%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat Reserva'; font-weight: 900; src: local('Arial Bold'), local('Arial-BoldMT');
size-adjust: 114.8%; ascent-override: 84.3%; descent-override: 21.9%; line-gap-override: 0%; }
/* --------------------------------------------------------------------------
2. Variables
-------------------------------------------------------------------------- */
:root {
/* Marca */
--negro: #000000;
--blanco: #ffffff;
--rosa: #D8126F; /* SOLO botón principal y punto de directo (4,96:1 con blanco) */
--rosa-hover: #B50E5C;
--morado: #7C368C; /* enlaces sobre fondo claro (7,6:1). Nunca texto sobre negro */
--degradado: linear-gradient(180deg, #6D2778 0%, #E72371 72%, #E72371 100%); /* vertical, como el logo */
--degradado-h: linear-gradient(90deg, #6D2778 0%, #E72371 72%, #E72371 100%); /* solo para barras finas */
/* Recursos del kit para superficies oscuras (26.09.2026, pedido por Dani): la trama de puntos
(blancos al 20 %, cada 18 px, la de la bienvenida de C) y el corte a 45°. Solo sobre negro:
nunca sobre el cuerpo blanco ni sobre el degradado. */
--trama: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0.08125rem, transparent 0.10625rem);
--trama-paso: 1.125rem;
--corte: 6rem;
/* Grises */
--gris-texto: #555555; /* el más claro permitido para texto sobre blanco */
--gris-oscuro-texto: #BDBDBD; /* texto secundario sobre negro */
--gris-apagado-texto: #808080; /* lo muy secundario sobre negro (la línea final del pie): 5,32:1, el mínimo es 4,5 (08.10.2026) */
--gris-hueco: #D9D9D9; /* huecos de foto sin archivo */
--gris-suave: #F4F4F4; /* fondo de tarjetas */
--gris-linea: #E2E2E2;
--gris-pista: #D0D0D0; /* pista de las barras de progreso */
/* Cierre A (14.10.2026, vista previa aprobada por Dani): los grises del bloque sobre negro (tema.css, "Conversion v2 P2 A") */
--cierre-tarjeta: #0F0F0F; /* fondo del bloque */
--cierre-linea: #2B2B2B; /* borde del bloque y del mensaje */
--cierre-borde: #5A5A5A; /* borde de botones, tarjetas y barra */
--cierre-caja: #191919; /* fondo del mensaje y de la barra */
--cierre-hueco: #2A2A2A; /* hueco de la foto sin archivo */
--cierre-activa: #2C2C2C; /* opcion marcada de la lista */
/* Texto */
--fuente: 'Montserrat', 'Montserrat Reserva', 'Segoe UI', Arial, sans-serif;
--texto-base: 1.0625rem; /* 17 px */
--texto-pequeno: 0.9375rem; /* 15 px, lo más pequeño que usamos */
--titulo-1: clamp(2rem, 1.2rem + 4vw, 4.5rem);
--titulo-2: clamp(1.625rem, 1.2rem + 2vw, 2.75rem);
--titulo-3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
--entradilla: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
/* Espacios y medidas */
--contenedor: 75rem;
--margen: 1rem;
--espacio-seccion: 2.5rem; /* 26.09.2026: antes 64/96; entre secciones unos 80 px en móvil (diseno.md pide unos 64) */
--espacio-titulo: 2rem;
--cabecera-alto: 4rem;
--radio: 0.375rem;
--radio-grande: 0.75rem;
--toque: 2.75rem; /* alto mínimo de todo lo pulsable */
/* Pantallas (sección 5b): alto útil bajo la cabecera, aire de cada pantalla y alto del pie
(xmo.js mide el pie y pone su alto real en --pie-alto; 365 px es lo medido desde 768) */
--alto-util: calc(100vh - var(--cabecera-alto));
--aire-arriba: 2rem;
--aire-abajo: clamp(2rem, 6vh, 4rem);
--pie-alto: 22.8125rem;
/* Foco */
--color-foco: #7C368C;
}
/* svh: el alto con las barras del navegador a la vista, así nada salta al esconderlas
(dvh sí saltaría). El respaldo en vh va aparte: en variables no sirve declararlo dos veces. */
@supports (height: 100svh) {
:root {
--alto-util: calc(100svh - var(--cabecera-alto));
--aire-abajo: clamp(2rem, 6svh, 4rem);
}
}
@media (min-width: 48em) {
:root { --margen: 1.5rem; --espacio-seccion: 3.5rem; }
}
@media (min-width: 64em) {
:root {
--margen: 2rem;
--espacio-seccion: 4rem; /* solo donde no hay pantallas: tableta en vertical y pantallas bajas */
--espacio-titulo: 2.75rem;
--cabecera-alto: 5rem;
}
}
/* --------------------------------------------------------------------------
3. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Anclas y foco: 32 px de aire bajo la cabecera (las secciones descuentan su padding con
scroll-margin-top, sección 5) y 16 px por abajo para que el anillo de foco se vea entero */
scroll-padding-top: calc(var(--cabecera-alto) + 2rem);
scroll-padding-bottom: 1rem;
}
/* Escala en monitores grandes (28.09.2026, pedido por Dani: en el portátil se ve bien y en un
monitor grande todo se ve pequeño). Todas las medidas van en rem, así que la página entera
sigue a la raíz, y la raíz la pone assets/escala.js (en el , antes del primer pintado):
hasta 1536 x 880 px de ventana es la del navegador y nada se mueve; por encima crece con la
ventana sin contar el zoom, así Strg + sigue agrandando (con la letra de 16, entero hasta el
150 %; el resto, en escala.js). Sin JavaScript la página se ve
como en el portátil. Antes se hacía aquí con vw y vh, pero así el zoom encoge la ventana y la
fórmula se comía casi todo el efecto de Strg + (a 200 %, 1,35 veces en vez de 2).
Con la raíz escalada las medidas caen en fracciones de píxel y, al llegar por un ancla, la
sección puede quedar hasta medio píxel por debajo de la cabecera: en C a 2560 x 1440 se veía
una fila blanca entre la cabecera y How to subscribe. El negro de la cabecera baja 1 px y la
tapa, como ya hacen A y B (a.css, b.css). */
html[data-escala] .cabecera { box-shadow: 0 1px 0 var(--negro); }
body {
margin: 0;
min-height: 100vh;
font-family: var(--fuente);
font-size: var(--texto-base);
font-weight: 400;
line-height: 1.6;
color: var(--negro);
background: var(--blanco);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, video, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }
a { color: var(--morado); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 0.125rem; }
:focus-visible {
outline: 0.1875rem solid var(--color-foco);
outline-offset: 0.1875rem;
}
/* --------------------------------------------------------------------------
4. Tipografía
-------------------------------------------------------------------------- */
h1, .titulo-1 {
font-size: var(--titulo-1);
font-weight: 900;
line-height: 1.04;
letter-spacing: -0.015em;
}
h2, .titulo-2 {
font-size: var(--titulo-2);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.01em;
}
h3, .titulo-3 {
font-size: var(--titulo-3);
font-weight: 800;
line-height: 1.25;
}
.entradilla { font-size: var(--entradilla); line-height: 1.5; }
.texto-pequeno, small { font-size: var(--texto-pequeno); }
.texto-secundario { color: var(--gris-texto); }
.oscuro .texto-secundario { color: var(--gris-oscuro-texto); }
/* Sin una palabra sola en la última línea: títulos con las líneas igualadas y textos
cortos con el corte cuidado (text-wrap; donde no lo entiende, se ve como antes).
Los nombres de operador van aparte (tarjetas en rediseño). */
h1, h2, h3:not(.operador__nombre) { text-wrap: balance; }
.entradilla, .paso__texto, .b-paso__texto, .ventaja__texto, .b-ventaja__texto,
.zona-horaria, .siguiente { text-wrap: pretty; }
/* Titular en 2 líneas exactas: cada es una línea (máx. ~12 caracteres por línea) */
.titular-2l > span { display: block; }
.apilar > * + * { margin-top: 1rem; }
.apilar-grande > * + * { margin-top: 1.5rem; }
/* --------------------------------------------------------------------------
5. Utilidades
-------------------------------------------------------------------------- */
.contenedor {
width: 100%;
max-width: calc(var(--contenedor) + 2 * var(--margen));
margin-inline: auto;
padding-inline: var(--margen);
}
.seccion { padding-block: var(--espacio-seccion); }
/* Al llegar desde el menú, el título (y no el borde de la sección) queda a 32 px de la
cabecera y no asoma nada de la sección anterior: el margen negativo descuenta el aire
de arriba. Si una página cambia ese aire, cambia también este margen (a.css, b.css). */
.seccion[id] { scroll-margin-top: calc(-1 * var(--espacio-seccion)); }
.seccion__cabeza { margin-bottom: var(--espacio-titulo); }
.seccion__cabeza > * + * { margin-top: 0.75rem; }
.seccion--gris { background: var(--gris-suave); }
/* --------------------------------------------------------------------------
5b. Pantallas: una sección por pantalla (pedido por Dani, 26.09.2026)
Al llegar a una sección, desde el menú o bajando, no asoma la siguiente: cada
sección mide al menos el alto útil (ventana menos cabecera). Solo en ordenador y
tableta en horizontal (1024 px de ancho o más, apaisado, 500 px de alto o más); en
móvil y en tableta en vertical sigue el ritmo normal (--espacio-seccion), porque allí
quedarían de 400 a 1150 px de blanco por sección y ver el principio de la siguiente
es la pista para seguir bajando.
.pantalla sección de una pantalla como mínimo (min-height, nunca height:
con zoom o traducciones crece y no se corta)
.pantalla--entrada la primera pantalla (hero y tarjeta On now): justo el alto útil;
su primer hijo crece hasta cerrarla
.pantalla--final la última: ella y el pie ocupan juntos una pantalla, así su título
también sube a 32 px y no queda hueco blanco sobre el pie. Esta
actúa en todos los tamaños.
Título a 32 px, como estaba decidido: con un ancla, el borde de la sección queda pegado
a la cabecera y el título 32 px por debajo; el blanco que sobra queda abajo (::after).
(Revisión del 26.09.2026: la versión "centrado con tope" dejaba el título entre 32 y
128 px. Si Dani la prefiere, basta con volver a poner
main > .pantalla::before { content: ""; flex: 1 1 0; max-height: 96px; } y lo mismo
en .b-noche.pantalla > .contenedor::before de b.css.)
Sin scroll-snap y sin tope de alto (con tope vuelve a asomar la siguiente).
-------------------------------------------------------------------------- */
.pantalla--final {
/* El título de la última sección queda a 32 px de la cabecera con el ancla: ella y el pie
llenan lo que hay por debajo (--final-arriba es su aire de arriba si no es el normal) */
min-height: max(0px, calc(var(--alto-util) - 2rem + var(--final-arriba, var(--espacio-seccion)) - var(--pie-alto)));
}
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
:root { --pantalla: var(--alto-util); }
main > .pantalla {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: var(--pantalla);
padding-block: var(--aire-arriba) var(--aire-abajo);
}
/* Blanco sobrante: todo abajo (el título se queda a 32 px) */
main > .pantalla::after { content: ""; flex: 1 1 0; }
/* Ancla: html ya deja cabecera + 32 px; con -32 el borde de la sección toca la cabecera */
main > .pantalla[id] { scroll-margin-top: calc(-1 * var(--aire-arriba)); }
main > .pantalla--final { min-height: max(0px, calc(var(--pantalla) - var(--pie-alto))); }
main > .pantalla--entrada {
display: flex;
flex-direction: column;
min-height: var(--pantalla);
padding-bottom: var(--aire-abajo);
}
main > .pantalla--entrada > :first-child { flex: 1 0 auto; }
}
.oscuro {
--color-foco: #ffffff;
background: var(--negro);
color: var(--blanco);
}
.oscuro a:not(.boton) { color: var(--blanco); }
.visualmente-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: 1rem; top: -6.25rem;
z-index: 200;
display: inline-flex; align-items: center;
min-height: var(--toque);
padding: 0 1rem;
background: var(--blanco); color: var(--negro);
font-weight: 700;
border-radius: var(--radio);
}
.saltar:focus { top: 0.5rem; }
/* A8 (13.10.2026): el anillo blanco se separa de la cabecera negra con otro contorno oscuro. */
.saltar:focus-visible {
z-index: 201;
outline: 0.1875rem solid var(--blanco);
outline-offset: 0.1875rem;
box-shadow: 0 0 0 0.375rem var(--negro);
}
.sin-partir { white-space: nowrap; }
/* La marca X-MO no se parte nunca entre "X-" y "MO" (07.10.2026). La envuelven xmo_marca_html() (PHP, inc/marca.php) y
conMarca() (xmo.js) al pintar los textos; los textos guardados no cambian. */
.marca-xmo { white-space: nowrap; }
/* Todo texto con la marca va dentro de UN solo en línea: en un contenedor flex o grid (el menú de la cabecera,
los botones) cuenta como un único elemento y no se pierde el espacio entre las palabras y la marca. */
.con-marca { display: inline; }
@media (max-width: 47.99875em) { .solo-ordenador { display: none !important; } }
@media (min-width: 48em) { .solo-movil { display: none !important; } }
/* --------------------------------------------------------------------------
6. Botones, enlaces, chips, etiquetas y tarjetas
-------------------------------------------------------------------------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
padding: 0.625rem 1.5rem;
border: 0.125rem solid transparent;
border-radius: var(--radio);
font-family: var(--fuente);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.boton svg { flex: none; width: 1.25rem; height: 1.25rem; }
.boton--principal { background: var(--rosa); color: var(--blanco); }
.boton--principal:hover { background: var(--rosa-hover); }
.boton--secundario { background: transparent; color: var(--negro); border-color: currentColor; }
.boton--secundario:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.oscuro .boton--secundario { color: var(--blanco); }
.oscuro .boton--secundario:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.boton--negro { background: var(--negro); color: var(--blanco); }
.boton--negro:hover { background: #333; }
.boton--bloque { display: flex; width: 100%; }
.boton--grande { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.0625rem; }
/* Enlace de texto con flecha, en morado */
.enlace {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: var(--toque);
font-weight: 700;
color: var(--morado);
}
.enlace svg { width: 1.125rem; height: 1.125rem; flex: none; }
.oscuro .enlace { color: var(--blanco); }
/* Chips (elegir país, día...) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
display: inline-flex;
align-items: center;
min-height: var(--toque);
padding: 0 1.125rem;
border: 0;
border-radius: 999px;
background: var(--gris-suave);
color: var(--negro);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.chip:hover { background: #E6E6E6; }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip[aria-selected="true"] {
background: var(--negro);
color: var(--blanco);
}
/* A9 (13.10.2026): los colores dejan de distinguir los chips en alto contraste. El borde y el
subrayado conservan el estado elegido; el punto y la barra no dejan que Windows suprima su color. */
@media (forced-colors: active) {
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip[aria-selected="true"] {
border: 0.1875rem solid ButtonText;
text-decoration: underline 0.125rem ButtonText;
text-underline-offset: 0.18em;
}
.punto-directo, .progreso__relleno { forced-color-adjust: none; }
}
/* Etiqueta (por ejemplo "Premiere") */
.etiqueta {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 0.25rem;
background: var(--negro);
color: var(--blanco);
font-size: var(--texto-pequeno);
font-weight: 700;
line-height: 1.3;
}
.oscuro .etiqueta { background: var(--blanco); color: var(--negro); }
/* Tarjeta sin borde */
.tarjeta {
background: var(--gris-suave);
border-radius: var(--radio-grande);
padding: 1.5rem;
}
.tarjeta > * + * { margin-top: 0.75rem; }
/* --------------------------------------------------------------------------
7. Cabecera
-------------------------------------------------------------------------- */
.cabecera {
position: sticky;
top: 0;
z-index: 100;
background: var(--negro);
color: var(--blanco);
--color-foco: #ffffff;
}
.cabecera__interior {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
min-height: var(--cabecera-alto);
}
.cabecera__logo {
display: inline-flex;
align-items: center;
min-height: var(--toque);
flex: none;
}
.cabecera__logo img { height: 2.5rem; width: auto; }
.cabecera__boton { margin-left: auto; padding-inline: 1rem; min-height: var(--toque); }
.cabecera__menu-boton {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toque);
height: var(--toque);
flex: none;
padding: 0;
border: 0;
border-radius: var(--radio);
background: transparent;
color: var(--blanco);
}
.cabecera__menu-boton svg { width: 1.625rem; height: 1.625rem; }
.cabecera__menu-boton .icono-cerrar { display: none; }
.cabecera--abierta .cabecera__menu-boton .icono-menu { display: none; }
.cabecera--abierta .cabecera__menu-boton .icono-cerrar { display: block; }
/* Menú: en móvil es un panel que baja bajo la cabecera */
.cabecera__nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--negro);
border-top: 1px solid #222;
padding: 0.5rem var(--margen) 1.5rem;
/* Con poco alto (zoom al 400 %) el panel se desplaza por dentro: se llega al último enlace */
max-height: calc(100vh - var(--cabecera-alto));
max-height: calc(100svh - var(--cabecera-alto));
overflow-y: auto;
overscroll-behavior: contain;
}
.cabecera--abierta .cabecera__nav { display: block; }
.cabecera__lista { list-style: none; margin: 0; padding: 0; }
.cabecera__lista a {
display: flex;
align-items: center;
min-height: 3.25rem;
color: var(--blanco);
font-size: 1.125rem;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid #1c1c1c;
}
.cabecera__lista a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.cabecera__lista a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 64em) {
.cabecera__logo img { height: 3rem; }
.cabecera__boton { padding-inline: 1.25rem; }
}
/* Cabecera de escritorio (enlaces en línea, selector desplegable, sin hamburguesa) desde 1280 px (07.10.2026; antes 1024). Medido:
de 1024 a 1279 el contenedor mide de 960 a 1199 px y con los 5 enlaces (Tonight, Schedule, Where to watch, How to subscribe,
About X-MO), el selector de idioma y el botón largo no cabe ningún idioma (el inglés necesita 1036 px; el alemán 1176); ya con 4
enlaces iban en dos líneas a 1024 en 6 de los 7 idiomas. De 1024 a 1279 se queda la cabecera de móvil: logo, botón largo y
hamburguesa con el panel. escala.js conoce el corte (CORTES) para que con zoom la página ampliada caiga siempre en una maqueta que
existe. Hueco de 1,5 rem entre enlaces (antes 1,75): en inglés la cabecera ocupa 1060 de los 1200 px del contenedor (medido). En
alemán y en búlgaro, los dos idiomas con el botón más largo ("Hol dir X-MO auf deinen Fernseher", 334 px; "Гледай X-MO на телевизора
си", 316), 0,75 rem: medido el 07.10.2026 con 1,5 rem el búlgaro cabía por 0,17 px y el alemán se pasaba 2,6 px (los enlaces y el botón
partían en dos líneas); con 0,75 rem sobran 48 px en búlgaro y 7 en alemán, que con el relleno del botón de 1 rem (en vez de 1,25)
pasan a 15. Un botón alemán más corto devolvería el hueco y el relleno normales (duda al revisor). */
@media (min-width: 80em) {
.cabecera__menu-boton { display: none; }
.cabecera__nav {
display: block;
position: static;
margin-left: auto;
padding: 0;
border: 0;
background: none;
max-height: none;
overflow: visible; /* sin recortar el anillo de foco de los enlaces */
}
.cabecera__lista { display: flex; gap: 1.5rem; }
html:lang(de) .cabecera__lista,
html:lang(bg) .cabecera__lista { gap: 0.75rem; }
html:lang(de) .cabecera__boton { padding-inline: 1rem; } /* 8 px más de margen en alemán (de 7 a 15 px a 1440) */
.cabecera__lista a {
min-height: var(--toque);
font-size: 0.9375rem;
border: 0;
}
.cabecera__boton { margin-left: 1rem; }
}
/* --------------------------------------------------------------------------
8. Pie
-------------------------------------------------------------------------- */
.pie {
background: var(--negro);
color: var(--blanco);
--color-foco: #ffffff;
/* 08.10.2026, Dani: las filas del pie (enlaces de X-MO y Legal, correo y teléfono de Contact y el enlace de DB-IP) miden 44 px en
táctil y 32 px en un ordenador con ratón ("interlineado a la mitad": el hueco entre líneas baja de unos 24 a unos 12 px). Solo con
ratón fino y hover de verdad; en móvil, tableta o cualquier pantalla táctil se quedan los 44 px (público de 50+). */
--toque-pie: var(--toque);
}
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
.pie { --toque-pie: 2rem; }
}
.pie a { color: var(--blanco); }
.pie__interior {
display: grid;
gap: 2rem;
padding-block: 3rem 1.25rem; /* 08.10.2026, Dani: menos aire bajo la línea final (antes 2rem) */
}
/* A5 (08.10.2026): enlace en bloque en línea, como el logo de la cabecera (inline-flex); con el enlace en línea y la imagen en bloque Chrome no dibuja el anillo de foco. */
.pie__logo { display: inline-block; vertical-align: top; } /* top: sin esto el pie crece 8 px (hueco de la línea de texto bajo la imagen) */
.pie__logo img { height: 2.75rem; width: auto; }
/* 08.10.2026, Dani (referencia: un pie con titulares en mayúsculas y enlaces finos): más jerarquía sin cambiar la composición.
Titular de columna blanco, en mayúsculas y extranegrita; los enlaces, en peso normal. */
.pie__titulo {
margin-bottom: 0.25rem;
font-size: var(--texto-pequeno);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--blanco);
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista a,
.pie__dato {
display: inline-flex;
align-items: center;
min-height: var(--toque-pie); /* 44 px en táctil, 32 px con ratón (ver .pie) */
font-size: var(--texto-pequeno); /* 08.10.2026, Dani: un poco más pequeña que el texto (antes 17 px) para que el pie pese menos */
font-weight: 400; /* 08.10.2026, Dani: antes 600; el peso queda para los titulares de columna */
text-decoration: none;
overflow-wrap: anywhere; /* 08.10.2026: un correo largo (hasta los 80 caracteres del panel) se parte en vez de dar scroll lateral en 320 y 390 px */
}
.pie__lista a:hover { text-decoration: underline; }
/* Bloque Contact (08.10.2026, Dani): el correo y el teléfono, editables; sin datos reales son texto entre corchetes (.pie__dato), con
la misma fila y la misma letra que los enlaces, así nada se mueve cuando Marc dé los datos y pasen a ser enlaces. */
.pie__contacto { font-style: normal; }
/* Línea final (08.10.2026, Dani: "todo lo nuestro debe brillar, lo secundario muy sutil"): 12 px, un gris más apagado que el del párrafo 18+
(--gris-apagado-texto, 5,32:1 sobre negro; WCAG AA pide 4,5) y menos aire arriba y abajo (antes 1,5rem arriba, 15 px y --gris-oscuro-texto). */
.pie__final {
grid-column: 1 / -1;
padding-top: 0.75rem;
border-top: 1px solid #222;
font-size: 0.75rem;
color: var(--gris-apagado-texto);
overflow-wrap: anywhere;
}
@media (min-width: 48em) {
/* Tres columnas como siempre (logo y sello 18+ | X-MO | Legal); desde el 08.10.2026 el bloque Contact va bajo el logo y el sello, en el hueco
que quedaba en la primera columna (las columnas X-MO y Legal ocupan las dos filas): el pie no crece en ordenador. El marcado va en el
orden visual de las columnas (logo y sello, Contact, X-MO, Legal, línea final), que es el del Tab en ordenador y, de arriba abajo, el de
móvil (08.10.2026, pedido por Dani: antes Contact iba después de Legal y el Tab llegaba a él tras Legal). */
.pie__interior {
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"marca xmo legal"
"contacto xmo legal"
"final final final";
column-gap: 3rem;
}
.pie__marca { grid-area: marca; }
.pie__nav { grid-area: xmo; }
.pie__legal { grid-area: legal; }
.pie__contacto { grid-area: contacto; align-self: start; }
.pie__final { grid-area: final; }
}
/* Sello 18+ (sin frase desde el 19.10.2026) */
.sello-18 {
display: flex;
align-items: flex-start;
gap: 0.75rem;
max-width: 34rem;
font-size: var(--texto-pequeno);
line-height: 1.5;
}
.sello-18__icono {
flex: none;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 0.125rem solid currentColor;
border-radius: 50%;
font-size: 0.9375rem;
font-weight: 800;
line-height: 1;
}
/* --------------------------------------------------------------------------
9. Foto ancla
-------------------------------------------------------------------------- */
/* Foto ancla (Dani, 26.09.2026): con la foto al lado del texto, el título y la entradilla
son la cabecera de la sección y van en su propia fila, y el contenido (chips y operadores,
pasos, horas...) en la de abajo. La foto ocupa las filas que le dé la rejilla y comparte sus
bordes: arriba, a la altura del primer elemento; abajo, a la del último. Desde el 07.10.2026
(pedido por Dani) la foto de Where to watch y la de How to subscribe ocupan las dos filas,
del título al final de la lista (tema.css B2 y B3); antes iban solo en la fila del contenido.
La foto no ocupa sitio (position: absolute): el alto del bloque lo pone el contenido y
la foto lo copia, con dos límites:
mínimo --foto-min (320 px): si el contenido es más bajo, la foto sobresale lo mismo
por arriba que por abajo, sin llegar al título;
máximo, el alto útil de la ventana menos 64 px y, en columnas estrechas (tableta en
vertical), 1,5 veces su ancho (2:3 como mucho; antes llegaba a 280x730): si el
contenido es más alto, la foto queda centrada con él (26.09.2026; antes empezaba
arriba y en C "What's on" acababa 116 px antes que la lista).
La lista de operadores reserva el alto de la más larga (xmo.js, --lista-reservada),
así que al cambiar de país la foto no se mueve ni cambia de tamaño.
Sin position: sticky: la foto que baja con el texto salta en pantalla al cambiar de país.
Actúa desde 768 px (C lo anula hasta 1024, donde apila); en móvil la foto va en su
sitio, encima o debajo del texto. El encuadre por foco lo recalcula xmo.js.
--foto-alto lo usan también los adornos que van con la foto (chevron de A). */
@media (min-width: 48em) {
.foto-ancla {
--foto-min: 20rem;
--foto-alto: min(clamp(var(--foto-min), 100%, calc(var(--alto-util) - 4rem)), 150cqi);
position: relative;
align-self: stretch;
container-type: inline-size; /* 150cqi = 1,5 veces el ancho de la columna de la foto */
}
.foto-ancla > .foto {
position: absolute;
top: calc((100% - var(--foto-alto)) / 2);
left: 0;
width: 100%;
height: var(--foto-alto);
aspect-ratio: auto;
}
[data-donde-ver-lista] { min-height: var(--lista-reservada, 0px); }
}
/* La X de la marca, translúcida y difuminada, detrás de una foto (27.09.2026, pedido por Dani:
"la X de XMO difuminada, que se vea elegante, y encima la foto"). La usa How to subscribe (portada B, 07.10.2026).
Marcado: como PRIMER hijo de la .foto-ancla,
solo sobre negro (sección .oscuro o panel negro). Queda centrada detrás de la foto y crece con
ella: lado de 1,7 veces la media de su ancho (100cqi, la columna) y su alto (--foto-alto), así
no se dispara con las fotos 2:3 de los monitores altos. Se lee como una luz blanca que sale por
detrás de la foto, más clara junto a sus esquinas y apagándose hacia las puntas, sin cantos.
assets/img/marca-x-difusa.svg (686 bytes) es el polígono de la X de la marca ya
desenfocado dentro del propio SVG (feGaussianBlur) con una caída radial: el navegador lo pinta
una vez. Nada de filter: blur(), will-change ni animación aquí (con will-change el repintado se
disparaba: 454 ms frente a 171 en 40 repintados a 1520x690, Chrome sin ventana).
Quien la usa:
- la recorta con overflow: clip en la sección (la X es más grande que la foto);
- pone el contenido de al lado por encima (position: relative; z-index: 1): la .foto-ancla es
un contexto de apilamiento (container) y sin eso la X se pintaría sobre el texto;
- puede cambiar --marca-x-opacidad (0,13 por defecto; la usa How to subscribe) y --marca-x-escala.
Siempre en blanco.
Desde 768 px, cuando la foto va al lado del texto; en móvil no se pinta ni se descarga. */
.marca-x { display: none; }
@media (min-width: 48em) {
.foto-ancla > .marca-x {
--marca-x-escala: 1.7;
--marca-x-opacidad: 0.13;
display: block;
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
/* 1,24: el viewBox del SVG (124 de lado para una X de 100) deja sitio al desenfoque */
height: calc((var(--foto-alto) + 100cqi) / 2 * var(--marca-x-escala) * 1.24);
aspect-ratio: 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
.foto-ancla > .marca-x::after {
content: "";
position: absolute;
inset: 0;
background: url("../img/marca-x-difusa.svg") center / 100% 100% no-repeat;
opacity: var(--marca-x-opacidad);
}
.foto-ancla > .marca-x ~ .foto { z-index: 1; }
}
/* --------------------------------------------------------------------------
10. Foto con pie (hueco) y vídeo
-------------------------------------------------------------------------- */
.foto {
position: relative;
overflow: hidden;
margin: 0;
background: var(--gris-hueco);
aspect-ratio: var(--foto-proporcion, 3 / 2);
}
/* Fase 9: la foto llega dentro de un (fuente AVIF y respaldo WebP); el no pinta caja propia y su ![]()
se coloca como antes */
.foto > picture { display: contents; }
.foto > img,
.foto > picture > img,
.foto > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--foto-posicion, center); /* xmo.js lo recalcula con el foco de cada toma (FOCOS) */
}
.foto__pie {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
color: #2b2b2b;
font-size: var(--texto-pequeno);
font-weight: 600;
line-height: 1.45;
text-align: center;
}
.foto__pie > span { display: block; max-width: 30rem; }
.foto--cargada > .foto__pie { display: none; }
.foto--4x5 { --foto-proporcion: 4 / 5; }
/* Botón de pausa del vídeo de fondo */
.foto__control {
position: absolute;
right: 1rem;
bottom: 1rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toque);
height: var(--toque);
padding: 0;
border: 0.125rem solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: var(--blanco);
--color-foco: #ffffff;
}
.foto__control svg { width: 1.125rem; height: 1.125rem; }
/* A8 (13.10.2026): sobre vídeo o foto, el segundo contorno negro separa el anillo blanco del fondo. */
.foto__control:focus-visible { box-shadow: 0 0 0 0.1875rem var(--negro); }
/* Chevron: media X de la marca, forma sólida con el degradado.
Cuenta como EL degradado de la pantalla. */
.chevron {
display: block;
background: var(--degradado);
clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%, 60% 50%);
}
/* --------------------------------------------------------------------------
11. Hero (foto o vídeo a todo el ancho con titular)
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: 62vh;
min-height: max(62svh, 28.75rem);
background: var(--negro);
color: var(--blanco);
overflow: hidden;
--color-foco: #ffffff;
}
.hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
.hero__media::after {
/* sombra para que el texto blanco se lea sobre cualquier foto */
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 75%);
}
.hero__media > .foto__pie { align-items: center; justify-content: flex-start; padding-top: 2rem; }
.hero__contenido {
position: relative;
z-index: 3;
width: 100%;
padding-block: 3rem 2.5rem;
}
.hero__contenido > * + * { margin-top: 1.25rem; }
.hero .entradilla { max-width: 34rem; }
@media (min-width: 64em) {
.hero { min-height: min(78vh, 51.25rem); }
.hero__contenido { padding-block: 6rem 5rem; }
}
/* --------------------------------------------------------------------------
12. Programación: On now, Up next, Tonight y zona horaria
-------------------------------------------------------------------------- */
.punto-directo {
flex: none;
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: var(--rosa);
box-shadow: 0 0 0 0 rgba(216, 18, 111, 0.55);
animation: latido 1.8s ease-out infinite;
}
@keyframes latido {
0% { box-shadow: 0 0 0 0 rgba(216, 18, 111, 0.55); }
70% { box-shadow: 0 0 0 0.625rem rgba(216, 18, 111, 0); }
100% { box-shadow: 0 0 0 0 rgba(216, 18, 111, 0); }
}
.ahora > * + * { margin-top: 0.5rem; }
.ahora__etiqueta {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 1rem;
font-weight: 800;
color: var(--negro);
}
.oscuro .ahora__etiqueta { color: var(--blanco); }
.ahora__titulo {
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
font-weight: 900;
line-height: 1.15;
}
.ahora__meta { color: var(--gris-texto); font-size: 1rem; }
.oscuro .ahora__meta { color: var(--gris-oscuro-texto); }
.ahora__meta > span + span::before { content: "·"; margin: 0 0.5em; }
.progreso {
position: relative;
height: 0.375rem;
margin-top: 1rem;
border-radius: 999px;
background: var(--gris-pista);
overflow: hidden;
}
.progreso__relleno {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--negro);
transition: width 0.6s ease;
}
.oscuro .progreso { background: #4a4a4a; }
.oscuro .progreso__relleno { background: var(--blanco); }
.siguiente { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.siguiente__etiqueta { font-weight: 800; }
.siguiente__hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.siguiente__titulo { font-weight: 600; }
.siguiente__meta { color: var(--gris-texto); }
.oscuro .siguiente__meta { color: var(--gris-oscuro-texto); }
/* Tonight: las tres horas del mismo tamaño */
.noche { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.noche__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1.25rem;
align-items: baseline;
}
.noche__hora {
font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
font-weight: 900;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.noche__cuerpo > * + * { margin-top: 0.375rem; }
.noche__titulo { font-size: var(--titulo-3); font-weight: 800; line-height: 1.25; }
.noche__meta { color: var(--gris-texto); }
.oscuro .noche__meta { color: var(--gris-oscuro-texto); }
.zona-horaria {
display: flex;
align-items: flex-start;
gap: 0.5rem;
color: var(--gris-texto);
font-size: var(--texto-pequeno);
}
.zona-horaria svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15em; }
.oscuro .zona-horaria { color: var(--gris-oscuro-texto); }
.programacion-error {
padding: 1rem 1.25rem;
border-radius: var(--radio);
background: var(--gris-suave);
color: var(--negro);
font-weight: 600;
}
/* --------------------------------------------------------------------------
13. Dónde ver: chips de país y operadores
Tarjetas en "Lista limpia" (Dani, 26.09.2026; comparador en tarjetas.html):
filas sobre blanco, línea de 1 px solo entre filas, sin cajas y sin rosa.
Cambian según el ancho de la columna (container query "operadores"), no de la pantalla:
menos de 480 px arriba el logo a la izquierda y el botón a la derecha;
debajo, nombre y datos a todo el ancho
desde 480 px logo | texto | botón, hueco de logo de 112 x 56
desde 600 px hueco de logo de 168 x 72
El resumen ("Netherlands: 4 TV providers") no se ve: va con .visualmente-oculto.
-------------------------------------------------------------------------- */
.donde-ver { container: operadores / inline-size; }
.donde-ver > * + * { margin-top: 1.5rem; }
.xmo-js .operadores-servidor { display: none; }
.operadores-pais + .operadores-pais { margin-top: 2.5rem; }
.operadores-pais__titulo { font-size: var(--titulo-3); font-weight: 800; line-height: 1.25; }
.operadores {
container: lista-operadores / inline-size; /* el número de canal grande mira el ancho de la lista */
--operador-caja-ancho: 9rem;
--operador-caja-alto: 3.5rem;
--operador-logo-base: 3.375rem;
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
}
.operador {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "logo enlace" "cuerpo cuerpo";
column-gap: 1rem;
row-gap: 0.5rem;
align-items: center;
padding-block: 1rem;
}
.operador:first-child { padding-top: var(--fila-extra, 0px); } /* 0 salvo en monitores altos */
.operador:last-child { padding-bottom: var(--fila-extra, 0px); }
.operador + .operador { border-top: 1px solid var(--gris-linea); }
/* Hueco fijo del logo, invisible (los PNG traen fondo blanco). Tamaño óptico:
ancho = base x raíz(ancho/alto), con tope en el hueco y en el tamaño natural del PNG
(xmo.js pone --operador-logo-raiz y --operador-logo-max con logoAncho y logoAlto).
28.09.2026: el tope del tamaño natural va en rem y crece con la raíz en monitores grandes
(el PNG se amplía un poco; con el tope en px, los logos pequeños se quedaban cortos). */
.operador__logo {
grid-area: logo;
display: flex;
align-items: center;
justify-content: flex-start; /* móvil: alineado con el texto de debajo */
width: var(--operador-caja-ancho);
max-width: 100%;
height: var(--operador-caja-alto);
}
.operador__logo img {
width: min(calc(var(--operador-logo-base) * var(--operador-logo-raiz, 1.5)), var(--operador-logo-max, 100%), 100%);
height: auto;
max-height: 100%;
object-fit: contain;
}
/* Sin logo, o si no carga: el nombre del operador como marca de texto en el hueco */
.operador__marca {
max-width: 100%;
font-size: 1.125rem;
font-weight: 800;
line-height: 1.15;
text-align: left;
text-wrap: balance;
overflow-wrap: break-word;
}
.operador__cuerpo {
grid-area: cuerpo;
min-width: 0;
overflow: hidden;
overflow: clip; /* esconde el punto separador del principio de cada línea */
}
.operador__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.operador__nombre { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
/* "To be confirmed": para operadores en estado probable (sin confirmar por Marc) */
.operador__etiqueta {
display: inline-flex;
align-items: center;
min-height: 1.625rem;
padding: 0 0.625rem;
border-radius: 999px;
background: var(--gris-suave);
color: var(--gris-texto);
font-size: var(--texto-pequeno);
font-weight: 700;
line-height: 1.2;
}
.operador__titulo + .operador__datos { margin-top: 0.25rem; }
/* Paquete · Channel 797 · horario. Cada dato lleva delante su punto; la línea se desplaza
1,25em a la izquierda y el cuerpo recorta el punto del principio de cada línea. */
.operador__datos {
display: flex;
flex-wrap: wrap;
align-items: baseline; /* con el número de canal a más de 24 px (monitores altos), el resto no se descuelga */
margin-inline-start: -1.25em;
font-size: var(--texto-pequeno);
line-height: 1.5;
color: var(--gris-texto);
}
.operador__datos > span::before {
content: "\00B7";
content: "\00B7" / "";
display: inline-block;
width: 1.25em;
text-align: center;
}
.operador__paquete { color: var(--negro); font-weight: 700; }
.operador__numero { color: var(--negro); font-weight: 700; font-variant-numeric: tabular-nums; }
/* "Get X-MO" (+ "from {Provider}" solo para lectores de pantalla): contorno de 1 px,
del tamaño de su texto. Sin dirección real no hay botón. */
.operador__enlace {
grid-area: enlace;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: var(--toque);
padding: 0 1rem;
border: 1px solid var(--negro);
border-radius: var(--radio);
background: transparent;
color: var(--negro);
font-size: var(--texto-pequeno);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.operador__enlace svg { flex: none; width: 1rem; height: 1rem; }
.operador__enlace:hover { background: var(--negro); color: var(--blanco); }
.operador__enlace:active { background: #333333; border-color: #333333; color: var(--blanco); }
.operador__sin-enlace { display: none; }
@container operadores (min-width: 30rem) {
/* Hueco de 112 x 56 hasta 600 px, para dejar más ancho al texto. Medido el 26.09.2026:
a 1024 px de pantalla (columna de 504 a 514 px en A y B) solo Ziggo tiene "paquete · canal"
en una línea; en KPN, DELTA y Budget Thuis el canal baja a la segunda (igual que en tarjetas.html). */
.operadores {
--operador-caja-ancho: 7rem;
--operador-caja-alto: calc(3.5rem + var(--logo-extra));
--operador-logo-base: calc(3.125rem + var(--logo-extra));
margin-top: 2rem;
}
.operador {
grid-template-columns: var(--operador-caja-ancho) minmax(10rem, 1fr) minmax(8.5rem, auto);
grid-template-areas: "logo cuerpo enlace";
column-gap: 1rem;
padding-block: calc(1.25rem + var(--fila-extra));
}
.operador__logo { justify-content: center; }
.operador__marca { text-align: center; }
/* Los botones forman una columna del mismo ancho; si el traductor alarga el texto, se parte */
.operador__enlace { justify-self: stretch; max-width: 12rem; white-space: normal; text-wrap: balance; }
.operador__sin-enlace { display: block; grid-area: enlace; }
}
@container operadores (min-width: 37.5rem) {
.operadores {
--operador-caja-ancho: 10.5rem;
--operador-caja-alto: calc(4.5rem + var(--logo-extra));
--operador-logo-base: calc(4.25rem + var(--logo-extra));
}
.operador { column-gap: 1.5rem; }
}
/* Monitores altos (revisión del 26.09.2026): en pantallas, "Where to watch" dejaba de 240 a
420 px de blanco bajo la lista (C a 1440x900 y 1920x1080; A y B, 291 a 1920x1080). La lista
crece con el alto de la ventana hasta que bajo ella queda solo el aire de abajo de la
pantalla: --fila-crece es ese crecimiento total (0 en portátiles, tope 260 px; 300 en C) y se
reparte entre el logo (hasta 24 px más de hueco, 32 en C; así los logos también crecen) y
el aire de arriba y de abajo de cada fila, también la primera y la última (cada operador
queda centrado en su franja). --filas (xmo.js) es el número de filas del país más largo, así la reserva
de alto y el 0 px de salto al cambiar de país siguen igual. Cada portada pone en
--donde-base el alto de su pantalla con las filas normales (medido: A y B 709 px, C 580).
El número de canal crece con ellas (de 24 a 32 px como mucho). Sin textos, colores ni
recursos nuevos: son las mismas filas de la Lista limpia, más altas. */
.operadores {
--logo-extra: min(var(--logo-extra-max, 1.5rem), var(--fila-crece, 0px) * 0.2);
--fila-extra: calc((var(--fila-crece, 0px) - var(--filas, 4) * var(--logo-extra)) / (2 * var(--filas, 4)));
}
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
.donde-ver {
--fila-crece: clamp(0px, var(--alto-util) - var(--aire-abajo) - var(--donde-base, 100vh), var(--fila-crece-max, 16.25rem));
}
}
/* Número de canal protagonista (26.09.2026, pedido por Dani): Montserrat 900 a 24 px en la misma
línea base que "Channel", que sigue pequeño. Es lo que el visitante teclea en el mando.
line-height 0.65: la caja del número no pasa de la línea de 15 px (sus cifras suben lo mismo
que ella), así la fila no crece. Solo con la lista de 600 px de ancho o más (medido con listas
de 558 a 757 px en A, B y C: las filas miden lo mismo que con el número pequeño; a 1024x768, con la
lista de 513 px en A y B y de 597 en C, y a 390x844, "paquete · Channel · horario" partía en
una línea más en Netherlands, también a 20 px, y la lista reservada crecía de 1 a 62 px).
"Channel [number]" (sin confirmar) no lleva .operador__numero y sigue pequeño. */
@container lista-operadores (min-width: 37.5rem) {
.operador__numero {
font-size: calc(1.5rem + min(0.5rem, var(--fila-crece, 0px) / 30)); /* monitores altos: hasta 32 px */
font-weight: 900;
line-height: 0.65;
letter-spacing: -0.01em;
}
}
/* --------------------------------------------------------------------------
14. Cómo suscribirse (3 pasos) y ventajas (2 × 2 en móvil)
-------------------------------------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
.paso { counter-increment: paso; display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; }
.paso::before {
content: counter(paso);
grid-row: span 2;
font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
font-weight: 900;
line-height: 0.9;
}
.paso__titulo { font-size: var(--titulo-3); font-weight: 800; line-height: 1.25; }
.paso__texto { margin-top: 0.375rem; color: var(--gris-texto); }
.ventajas {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.25rem;
}
.ventaja > * + * { margin-top: 0.5rem; }
.ventaja__icono { width: 2rem; height: 2rem; }
.ventaja__titulo { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.ventaja__texto { color: var(--gris-texto); font-size: var(--texto-pequeno); }
@media (min-width: 64em) {
.ventajas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.ventaja__titulo { font-size: 1.25rem; }
}
/* --------------------------------------------------------------------------
15. Aviso de edad (la variante de velo, 07.10.2026; antes la clara)
-------------------------------------------------------------------------- */
html.aviso-abierto, html.aviso-abierto body { overflow: hidden; }
/* Velo previo (26.09.2026): el script corto del pone .aviso-pendiente
en html si hay que enseñar el aviso, y esta capa tapa la página desde el primer
pintado hasta que xmo.js abre el aviso (antes se llegaba a ver la página unos
125 ms). No oculta main: el texto sigue en el DOM debajo de la capa. Negra, como el aviso de velo
(07.10.2026; antes blanca, con el aviso claro). */
html.aviso-pendiente body::after {
content: "";
position: fixed;
inset: 0;
z-index: 999;
background: var(--negro);
}
/* Marco del aviso (28.09.2026): mide lo mismo que la ventana y es el contenedor "aviso". Las
reglas del aviso que miran el alto (y la de 1100 px de ancho) van en @container aviso, en rem:
en una container query, 1 rem es la raíz, que escala.js agranda en monitores grandes. Con un
@media (1 em = la letra del navegador) no la seguían: con Strg + al 150 % en un monitor de
2560 x 1440 la ventana medía 960 px CSS de alto, no entraba "Portátiles bajos" y el aviso,
con la letra x1,636, se salía de la pantalla. Con la raíz sin escalar, rem y em valen lo
mismo y todo queda como antes. El aviso sigue siendo el que desplaza su contenido. */
.aviso-marco {
position: fixed;
inset: 0;
z-index: 1000;
container: aviso / size;
}
.aviso {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scroll-padding-block: 1.5rem; /* con Tab, el anillo de foco de los enlaces de abajo se ve entero */
}
.aviso__columna {
position: relative;
z-index: 2;
width: 100%;
max-width: 28.75rem;
}
.aviso__columna > * + * { margin-top: 1.25rem; }
.aviso__logo img { width: 9.375rem; height: auto; }
.aviso__titulo {
font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
font-weight: 900;
line-height: 1.05;
}
.aviso__titulo:focus { outline: none; }
.aviso__texto { font-size: 1.0625rem; line-height: 1.55; }
.aviso__compromisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.aviso__columna > .aviso__compromisos { margin-top: 1.75rem; }
.aviso__columna > .aviso__botones { margin-top: 1.75rem; }
.aviso__compromisos li { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 600; }
.aviso__compromisos svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.1em; }
.aviso__botones { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding-top: 0.25rem; }
.aviso__botones .boton { width: 100%; min-height: 3.25rem; padding-inline: 1rem; }
/* Uno al lado del otro, cada uno en una sola línea: si no caben los dos, Leave baja a
otra fila en vez de partir "I'm 18 or older, enter" (con 1fr 1fr se partía en 2 líneas) */
@media (min-width: 30em) {
.aviso__botones { display: flex; flex-wrap: wrap; }
.aviso__botones .boton { flex: 1 1 0; width: auto; min-width: max-content; }
}
.aviso__jusprog { display: grid; gap: 0.625rem; font-size: var(--texto-pequeno); line-height: 1.5; }
.aviso__sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.aviso__nota { font-size: var(--texto-pequeno); }
.aviso__enlaces { display: flex; flex-wrap: wrap; gap: 0 1.5rem; font-size: var(--texto-pequeno); }
.aviso__enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }
/* Elección de cookies (05.10.2026; revisada el 06.10.2026 dos veces, pedido por Dani: primero
"grandes y estrambóticos", luego "no tan obvio, más pequeño, sin el cuadro y un poco más
claro, los botones en fucsia"). No carga analítica: solo guarda la preferencia en este
dispositivo.
Tarjeta (.cookies-barra): pequeña y discreta abajo a la izquierda, blanca casi opaca con un
filete gris muy suave y una sombra ligera, así se lee igual sobre el hero oscuro y sobre las
secciones blancas (ya no lleva .oscuro ni la caja negra). Texto de 15 px en 400 con "Customize"
dentro de la frase como enlace morado (el de los enlaces sobre claro, con 32 px de alto pulsable)
y, debajo, "Accept all" y "Only necessary": el mismo botón rosa (.boton--principal, el fucsia
de la marca, aquí en los dos a petición de Dani; por ley han de ser igual de visibles) de 36 px
en dos columnas iguales. 21 rem de ancho; en móvil (menos de 480 px) es una franja baja y fina a
todo el ancho. No tapa la pantalla: unos 336 x 112 px en escritorio.
Panel (.cookies): el mismo diálogo, más pequeño y claro: 27 rem de ancho, título de 18 px,
cierre con la X, dos categorías con interruptor (Necessary bloqueada, Statistics apagada) y los
tres botones iguales, rosas y de 36 px en una fila (en móvil, apilados); ninguno destaca, el
foco se ve como anillo (:focus-visible) y nunca como relleno distinto. Velo al 45 %. */
.cookies {
position: fixed;
inset: 0;
z-index: 1100;
display: grid;
place-items: center;
overflow-y: auto;
padding: 1.5rem var(--margen);
background: rgba(0, 0, 0, 0.45);
color: var(--negro);
}
.cookies__panel {
position: relative;
width: min(100%, 27rem);
padding: 1.125rem 1.25rem 1.25rem;
border-radius: var(--radio-grande);
background: var(--blanco);
box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.25);
}
.cookies__titulo { padding-right: 3rem; font-size: 1.125rem; line-height: 1.3; font-weight: 800; }
.cookies__titulo:focus { outline: none; }
.cookies__cerrar {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toque);
height: var(--toque);
padding: 0;
border: 0;
border-radius: var(--radio);
background: transparent;
color: var(--negro);
cursor: pointer;
}
.cookies__cerrar:hover { background: var(--gris-suave); }
.cookies__cerrar svg { width: 1.25rem; height: 1.25rem; }
.cookies__categoria { padding-block: 0.75rem; border-top: 0.0625rem solid var(--gris-linea); }
.cookies__titulo + .cookies__categoria { margin-top: 0.75rem; }
.cookies__categoria-cabeza { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; }
.cookies__categoria-controles { display: flex; align-items: center; justify-content: end; gap: 0.5rem; }
.cookies__categoria h3 { font-size: 1rem; font-weight: 800; }
.cookies__categoria p { margin-top: 0.125rem; color: var(--gris-texto); font-size: var(--texto-pequeno); line-height: 1.45; }
.cookies__estado { font-size: var(--texto-pequeno); font-weight: 700; color: var(--gris-texto); }
.cookies__interruptor { display: inline-flex; align-items: center; justify-content: center; min-width: var(--toque); min-height: var(--toque); }
.cookies__interruptor input { position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem; opacity: 0; }
.cookies__interruptor span {
position: relative;
display: block;
width: 2.75rem;
height: 1.5rem;
border: 0.125rem solid var(--negro);
border-radius: 1.5rem;
background: var(--blanco);
}
.cookies__interruptor span::after {
content: "";
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 0.875rem;
height: 0.875rem;
border-radius: 50%;
background: var(--negro);
transition: transform 0.15s ease, background-color 0.15s ease;
}
.cookies__interruptor input:checked + span { background: var(--negro); }
.cookies__interruptor input:checked + span::after { transform: translateX(1.25rem); background: var(--blanco); }
.cookies__interruptor input:disabled + span { opacity: 0.6; }
.cookies__interruptor input:focus-visible + span { outline: 0.1875rem solid var(--color-foco); outline-offset: 0.1875rem; }
.cookies__botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; padding-top: 0.75rem; border-top: 0.0625rem solid var(--gris-linea); }
/* Botones pequeños de las cookies (tarjeta y panel): 36 px de alto, letra de 15 px, en una línea */
.cookies__botones .boton,
.cookies-barra__acciones .boton { width: 100%; min-height: 2.25rem; min-width: 0; padding: 0.375rem 0.125rem; font-size: var(--texto-pequeno); white-space: nowrap; }
.cookies-barra {
position: fixed;
left: max(var(--margen), env(safe-area-inset-left));
bottom: max(var(--margen), env(safe-area-inset-bottom));
z-index: 900;
display: grid;
gap: 0.5rem;
width: min(21rem, 100% - 2 * var(--margen));
padding: 0.75rem;
border: 0.0625rem solid rgba(0, 0, 0, 0.08);
border-radius: var(--radio-grande);
background: rgba(255, 255, 255, 0.96);
color: var(--negro);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
}
@supports (backdrop-filter: blur(1px)) {
.cookies-barra { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(0.75rem); }
}
.cookies-barra p { font-size: var(--texto-pequeno); font-weight: 400; line-height: 1.45; text-wrap: balance; }
/* "Customize" va dentro de la frase: enlace morado como los demás enlaces sobre claro, con el
padding en negativo compensado para que la línea no crezca y el área pulsable llegue a 32 px */
.cookies-barra__enlace {
display: inline;
margin: -0.1875rem 0;
padding: 0.1875rem 0;
border: 0;
background: transparent;
color: var(--morado);
font: inherit;
font-weight: 700;
line-height: inherit;
text-decoration: underline;
text-decoration-thickness: 0.0625rem;
text-underline-offset: 0.18em;
cursor: pointer;
}
.cookies-barra__enlace:hover { text-decoration-thickness: 0.125rem; }
.cookies-barra__enlace:focus-visible { outline-offset: 0; }
.cookies-barra__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
/* Mientras la barra está abierta el pie deja sitio debajo, así "© [Publisher]" y la columna de la
izquierda no quedan tapados al llegar al final (xmo.js mide la barra) */
html.cookies-barra-abierta { scroll-padding-bottom: calc(var(--cookies-barra-alto, 8rem) + 1rem); }
html.cookies-barra-abierta .pie { padding-bottom: var(--cookies-barra-alto, 8rem); }
@media (max-width: 29.99875em) {
.cookies { align-items: end; padding: 0; }
.cookies__panel { border-radius: var(--radio-grande) var(--radio-grande) 0 0; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.cookies__botones { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
/* Franja baja y fina a todo el ancho: unos 108 px a 390 de ancho */
.cookies-barra {
left: 0;
right: 0;
bottom: 0;
width: auto;
padding: 0.625rem var(--margen) max(0.625rem, env(safe-area-inset-bottom));
border-width: 0.0625rem 0 0;
border-radius: 0;
box-shadow: 0 -0.25rem 1.5rem rgba(0, 0, 0, 0.12);
}
}
/* La foto del aviso: el velo va dentro de la foto y el pie del hueco por encima */
.aviso__foto { aspect-ratio: auto; }
.aviso__foto::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* AV2 "Velo": la cara a pantalla completa bajo un velo negro, tarjeta negra */
.aviso--velo {
background: var(--negro);
color: var(--blanco);
align-items: flex-start; /* nunca flex-end: con poco alto el contenido se saldría por arriba sin poder hacer scroll */
justify-content: center;
padding: 30vh 0 0;
padding-top: 30svh;
}
.aviso--velo .aviso__fondo { position: fixed; inset: 0; z-index: 0; }
/* En móvil la foto mide lo mismo que la franja libre sobre la tarjeta (30 % del alto
y un poco por debajo): así object-fit centra la cara donde se ve, no bajo la tarjeta. */
.aviso--velo .aviso__foto {
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(30vh + 1.5rem);
height: calc(30svh + 1.5rem);
-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.aviso--velo .aviso__foto::after { background: rgba(0, 0, 0, 0.65); }
.aviso--velo .aviso__foto .foto__pie { justify-content: center; padding: 0.5rem 1.5rem 2rem; color: #ffffff; }
.aviso--velo .aviso__columna {
margin-top: 0;
max-width: 32.5rem;
padding: 1.75rem var(--margen) 2rem;
border-radius: 1rem 1rem 0 0;
background: rgba(0, 0, 0, 0.85);
}
/* A17 (13.10.2026): JavaScript coloca este degradado fijo sobre el borde inferior de la columna
solo cuando el aviso desborda. Es una pista visual y no participa en el flujo, así que Enter no se mueve. */
.aviso__indicador-desplazamiento {
position: fixed;
z-index: 1001;
height: 2rem;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
}
/* A10 (13.10.2026): con una letra raíz de unos 20 px o más, el botón corto deja sitio al menú.
A la letra normal no alcanza ni los 320 px, por lo que la cabecera aprobada no cambia. */
@media (max-width: 19.99875em) {
.cabecera__boton { display: none; }
.cabecera__menu-boton { margin-left: auto; } /* sin el botón corto, Menu sigue en el borde derecho */
}
.aviso--velo .aviso__nota { color: var(--gris-oscuro-texto); }
@media (min-width: 56.25em) {
.aviso--velo { justify-content: flex-end; padding: 2.5rem 6vw; }
.aviso--velo .aviso__foto {
top: 0;
bottom: 0;
right: auto;
width: 64%;
height: 100%;
-webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}
.aviso--velo .aviso__foto .foto__pie { justify-content: center; padding-top: 1rem; padding-right: 20%; }
.aviso--velo .aviso__columna { margin-block: auto; padding: 2.5rem; border-radius: 1rem; }
}
/* Portátiles bajos (1366 x 680, 1280 x 800): el aviso cabe sin desplazar, con los enlaces
legales a la vista. La tarjeta del velo, más ancha (texto en 2 líneas) y menos aire. */
@container aviso (min-width: 68.75rem) {
.aviso--velo .aviso__columna { max-width: 35rem; padding: 2rem; }
}
@container aviso (min-width: 48rem) and (max-height: 47.5rem) {
.aviso__columna > * + * { margin-top: 1rem; }
.aviso__columna > .aviso__compromisos,
.aviso__columna > .aviso__botones { margin-top: 1.25rem; }
.aviso__logo img { width: 7.5rem; }
}
@container aviso (min-width: 56.25rem) and (max-height: 47.5rem) {
.aviso--velo { padding-block: 1rem; }
.aviso--velo .aviso__columna { padding: 1.5rem 2rem; }
}
/* Móviles bajos (375x667, 360x640, 320x568, 360x740 y, desde el 14.10.2026, 390x844 para que los idiomas de títulos largos enseñen el botón de salir): los dos botones se ven sin hacer
scroll. Franja de foto de 120 px, menos aire y los botones uno al lado del otro.
Revisión del 26.09.2026: hasta 760 px de alto (antes 700); a 360x740 "Leave" quedaba
debajo de la pantalla en AV2 y AV3 (751-803 y 738-790 px con 740 de alto). */
@container aviso (max-width: 47.99875rem) and (max-height: 53rem) {
.aviso__columna > * + * { margin-top: 0.75rem; }
.aviso__columna > .aviso__compromisos,
.aviso__columna > .aviso__botones { margin-top: 1rem; }
.aviso__logo img { width: 7.25rem; }
.aviso__titulo { font-size: 1.875rem; }
.aviso__compromisos { gap: 0.25rem; }
/* El principal con todo el ancho que sobra: en una línea también a 320 px */
.aviso__botones { grid-template-columns: 1fr auto; gap: 0.625rem; }
.aviso--velo { padding-top: 7.5rem; }
.aviso--velo .aviso__foto { height: 9rem; }
.aviso--velo .aviso__columna { padding-top: 1.25rem; }
}
@container aviso (max-width: 47.99875rem) and (max-height: 37.5rem) {
.aviso--velo { padding-top: 6rem; }
.aviso--velo .aviso__foto { height: 7.5rem; }
}
@container aviso (max-width: 22.49875rem) and (max-height: 43.75rem) {
.aviso__botones .boton { padding-inline: 0.75rem; font-size: var(--texto-pequeno); }
}
/* Móvil en horizontal (844 x 390): "I'm 18 or older, enter" se ve sin desplazar.
Logo y aire más pequeños y, donde la foto va en franja arriba (AV2 y AV3 por debajo
de 900 px), sin la franja: con 390 px de alto no cabían las dos cosas. */
@container aviso (orientation: landscape) and (max-height: 31.25rem) {
.aviso__columna > * + * { margin-top: 0.625rem; }
.aviso__columna > .aviso__compromisos,
.aviso__columna > .aviso__botones { margin-top: 0.875rem; }
.aviso__logo img { width: 5.25rem; }
.aviso__titulo { font-size: 1.75rem; }
.aviso__compromisos { gap: 0.125rem; }
}
@container aviso (orientation: landscape) and (max-height: 31.25rem) and (max-width: 56.24875rem) {
.aviso--velo { padding-top: 0; }
.aviso--velo .aviso__fondo { display: none; }
.aviso--velo .aviso__columna { padding-top: 0.875rem; border-radius: 0; }
}
/* Aviso de edad en movil vertical (por debajo de 768 px): "Velo a pantalla completa". Dani vio en su Pixel 10 Pro (15.10.2026) que
de la foto solo asomaba una franja de unos 110 px con la cara cortada a la altura de los ojos y que el final de la tarjeta (bajo el
sello 18+) quedaba cortado por el borde de la pantalla. Eligio esta variante (la B de las dos de prueba) y, vista en su teléfono, la
dio por buena el 16.10.2026: es el aviso de siempre en movil vertical, sin parametro (la variante A y ?aviso-movil ya no existen).
La foto llena la pantalla con un velo del 25 % y la tarjeta, abajo, es el velo: negra al 68 % con un desenfoque suave detrás.
Encima queda la cara sin la tarjeta delante (nunca menos de 5 rem: si la tarjeta no cabe, ese hueco cede antes de que la tarjeta se
salga por abajo); el resto de la cara se ve a través (la toma cabe entera de alto y solo se recorta de ancho, centrada).
Tarjeta compacta: letra de 16 px o más (también el sello 18+), botones de 44 px uno al lado del otro y el sello al lado de su frase;
cabe entera, con los enlaces legales, de 360x780 a 412x915 en los 7 idiomas. Contraste en el peor punto de la foto (un blanco):
255 x 0,75 x 0,32 = 61, es decir, 10,9:1 con el texto blanco y 5,8:1 con el gris #BDBDBD (AA pide 4,5:1; sin desenfoque, en un
navegador que no lo tenga, es el mismo). Escritorio, tableta y el movil en horizontal no pasan por aquí. */
@container aviso (max-width: 47.99875rem) and (orientation: portrait) {
.aviso--velo { flex-direction: column; align-items: center; justify-content: flex-start; padding: 5rem 0 0; }
.aviso--velo .aviso__foto { inset: 0; width: auto; height: auto; -webkit-mask-image: none; mask-image: none; }
.aviso--velo .aviso__foto::after { background: rgba(0, 0, 0, 0.25); }
.aviso--velo .aviso__columna { flex: none; margin-top: auto; padding: 1rem var(--margen) 1.25rem; background: rgba(0, 0, 0, 0.68); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); }
.aviso--velo .aviso__columna > * + * { margin-top: 0.625rem; }
.aviso--velo .aviso__columna > :is(.aviso__compromisos, .aviso__botones) { margin-top: 0.875rem; }
.aviso--velo .aviso__logo img { width: 5.5rem; }
.aviso--velo .aviso__titulo { font-size: 1.75rem; }
.aviso--velo .aviso__texto { font-size: 1rem; line-height: 1.45; }
.aviso--velo .aviso__compromisos { gap: 0.25rem; }
.aviso--velo .aviso__compromisos li { gap: 0.5rem; font-size: 1rem; line-height: 1.35; }
.aviso--velo .aviso__compromisos svg { width: 1.125rem; height: 1.125rem; margin-top: 0.05em; }
.aviso--velo .aviso__botones { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; padding-top: 0; }
.aviso--velo .aviso__botones .boton { width: 100%; min-width: 0; min-height: var(--toque); padding: 0.5rem 0.875rem; font-size: 1rem; }
.aviso--velo .aviso__jusprog { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; line-height: 1.4; }
.aviso--velo .aviso__jusprog .sello-18__icono { font-size: 1rem; }
.aviso--velo .aviso__nota { font-size: 1rem; line-height: 1.4; }
.aviso--velo .aviso__enlaces { font-size: 1rem; }
}
/* --------------------------------------------------------------------------
18. Movimiento reducido
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.punto-directo { animation: none; }
}
/* Portátiles bajos (29.09.2026): por debajo de 800 px de alto, la cabecera conserva los
32 px del ancla y se aprieta solo el cuerpo. Las cuatro filas reservadas siguen siendo la
caja que mide xmo.js: al cambiar de país no se desplaza ni la lista ni la foto. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
:root { --aire-abajo: 2rem; --espacio-titulo: 2rem; }
.foto-ancla { --foto-min: 0rem; }
.donde-ver > * + * { margin-top: 1rem; }
/* Chips de país apretados (06.10.2026: a 15 px, --texto-pequeno, lo más pequeño que usamos;
antes 14 px). Con 10 px de relleno y 4 px de hueco la fila mide lo mismo que antes (el borde
derecho queda 1 px más a la izquierda) de 1280 a 1443 de ancho y a 1366x768. */
.donde-ver > .chips { gap: 0.25rem; }
.donde-ver > .chips .chip {
padding-inline: 0.625rem;
font-size: var(--texto-pequeno);
white-space: nowrap;
}
.operadores {
--operador-caja-ancho: 8rem;
--operador-caja-alto: 3rem;
--operador-logo-base: 2.75rem;
margin-top: 1rem;
}
.operador {
column-gap: 0.75rem;
padding-block: 0.25rem;
}
.operador__titulo + .operador__datos { margin-top: 0.125rem; }
}
/* Los chips en una sola fila solo desde 1280 px de ancho, donde caben (medido: el último acaba
en 675 px con la columna en 693 a 1280x720; 757 frente a 775 a 1443x695). Entre 1024 y 1279
(iPad Pro apaisado) la fila no cabía: a 1024x768 "Bulgaria" llegaba a 667 px con la columna
en 545 y pisaba la foto (625). Ahí los chips parten en dos filas (509 frente a 545 a 1024x768;
577 frente a 590 a 1100x700) y la lista sigue cabiendo en la pantalla (39 y 57 px de blanco
debajo); la reserva de alto de la lista no cambia porque mide solo las filas de operadores. */
@media (min-width: 80em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
.donde-ver > .chips { flex-wrap: nowrap; }
}