/* ==========================================================================
   X-MO · tema · portada (hero de A, resto de B)
   Va después de base.css. El tema pone class="pagina-a" en el <body> de todas las páginas y,
   en la portada, también "pagina-b". Decisión de Dani del 07.10.2026 (docs/decisiones.md): la
   primera pantalla (cabecera, hero y tarjeta On now) es la de la maqueta A "Revista" y todo lo
   de debajo es la portada B "Guía" (bloque "Resto de la portada", más abajo).
   Historia de las fotos: invitación (hero), panorámica de Tonight, tu noche en casa (Where to
   watch), cercanía (How to subscribe y cierre de la página en móvil).
   Ajuste del 27.09.2026 (pedido por Dani): la cabecera tapa la línea clara del escalado de Windows.
   06.10.2026 (fase 2): sin estudio aprobado la línea de estudio va oculta y el punto no sale; y la franja
   de edad de las páginas legales (apartado 10).
   ========================================================================== */

/* Línea clara entre la cabecera y una sección oscura (27.09.2026, vista por Dani en What you
   get): al llegar por un ancla la sección queda a una fracción de píxel de la cabecera (80,16 px
   a 1520x690; la fracción la arrastran los altos de las secciones de encima) y con el escalado
   de Windows al 125 % esa fila de píxeles mezcla el blanco de la sección anterior. El negro de
   la cabecera baja 1 px y la tapa; sobre blanco no se nota. Solo en A y B: C no cambia. */
.pagina-a .cabecera { box-shadow: 0 1px 0 var(--negro); }

/* --------------------------------------------------------------------------
   Ritmo: el aire entre secciones es el de base.css (40, 56 y 64 px); el solape de la tarjeta
   On now sobre el hero es de la primera pantalla (A)
   -------------------------------------------------------------------------- */
.pagina-a { --a-solape: 1.5rem; }   /* cuánto se monta la tarjeta On now sobre el hero */
@media (min-width: 64em) {
  .pagina-a { --a-solape: 3rem; }
}

/* --------------------------------------------------------------------------
   1. Hero: vídeo a sangre (foto fija en móvil), velo oscuro neutro abajo
   Móvil: cabecera + hero = 70 % del alto. Ordenador: 16:9 limitado al 80 %.
   -------------------------------------------------------------------------- */
.a-hero {
  min-height: calc(70vh - var(--cabecera-alto));
  min-height: calc(70svh - var(--cabecera-alto));
}
.a-hero .hero__contenido { padding-block: 2.5rem calc(var(--a-solape) + 2rem); }
.a-hero .hero__contenido > * + * { margin-top: 1rem; }
.a-hero .hero__contenido > .boton { margin-top: 1.5rem; }
.a-hero .entradilla { max-width: 30rem; }

/* Velo negro neutro (no es el degradado de marca) */
.a-hero .hero__media::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.82) 68%,
    rgba(0, 0, 0, 0.9) 100%);
}
.a-hero .hero__media > .foto__pie { padding-top: 1.5rem; }

/* Móvil (hasta 767 px): foto arriba y texto debajo sobre negro, sin superponer.
   El sujeto va en el centro del máster y así nada le tapa la cara.
   Cabecera + foto = 70 % del alto como mucho; 4:5 si cabe. */
@media (max-width: 47.99875em) {
  /* El botón, entero en la primera pantalla (26.09.2026; a 360x740 solo se veían 7 px):
     la foto descuenta además el bloque de texto hasta el botón y 8 px de aire
     (--a-texto-movil, calculado con la entradilla en 3 líneas, la de 360 px). Nunca baja
     de 180 px; si el texto no cabe (zoom), el hero crece y no se corta nada. */
  .a-hero { display: block; min-height: 0; --a-texto-movil: 17.75rem; }
  .a-hero .hero__media {
    position: relative;
    inset: auto;
    height: max(11.25rem, min(125vw, calc(70vh - var(--cabecera-alto)), calc(100vh - var(--cabecera-alto) - var(--a-texto-movil))));
    height: max(11.25rem, min(125vw, calc(70svh - var(--cabecera-alto)), calc(100svh - var(--cabecera-alto) - var(--a-texto-movil))));
  }
  /* Solo un fundido suave al negro en el borde de abajo */
  .a-hero .hero__media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.6) 100%);
  }
  .a-hero .hero__media > .foto__pie { justify-content: center; padding: 1rem 1.5rem; }
  .a-hero .hero__contenido { padding-top: 1.75rem; }
  /* A4 (08.10.2026): en la primera visita, mientras la tarjeta de cookies está a la vista (xmo.js pone html.cookies-barra-abierta y
     --cookies-barra-alto, que ya incluye 16 px de aire), la foto cede su altura y el botón queda por encima de la tarjeta. Al
     contestar, la clase se quita y la foto vuelve al tamaño de arriba. */
  html.cookies-barra-abierta .a-hero .hero__media {
    height: max(11.25rem, min(125vw, calc(70vh - var(--cabecera-alto)), calc(100vh - var(--cabecera-alto) - var(--a-texto-movil) - var(--cookies-barra-alto, 0px))));
    height: max(11.25rem, min(125vw, calc(70svh - var(--cabecera-alto)), calc(100svh - var(--cabecera-alto) - var(--a-texto-movil) - var(--cookies-barra-alto, 0px))));
  }
}

/* De 768 a 1023 px el texto ocupa todo el ancho: una banda negra pegada al texto
   (no al alto del hero) asegura el contraste con cualquier foto, también con la
   caja gris. El hero recorta lo que sobra. */
@media (min-width: 48em) and (max-width: 63.99875em) {
  .a-hero .hero__contenido::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4rem;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.55) 4rem, rgba(0, 0, 0, 0.75) 100%);
  }
}

/* Botón de pausa arriba a la derecha: abajo lo taparía la tarjeta On now */
.a-hero .foto__control {
  z-index: 4;   /* 08.10.2026: por encima de .hero__contenido (z-index 3, va después en el HTML); en ventanas bajas lo tapaba y el clic no llegaba */
  top: 1rem;
  bottom: auto;
  right: max(var(--margen), calc((100% - var(--contenedor)) / 2));
}

@media (min-width: 48em) {
  .a-hero { min-height: min(56.25vw, 80vh); }
  /* El velo lateral se apaga antes del 60 % del ancho: el sujeto (centro o algo a la
     derecha) queda limpio en pantallas anchas; el texto sigue sobre el velo de abajo. */
  .a-hero .hero__media::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 58%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.85) 100%);
  }
}
@media (min-width: 64em) {
  .a-hero .hero__contenido { padding-block: 4rem calc(var(--a-solape) + 3.5rem); }
  .a-hero .foto__control { top: 1.5rem; }
}
/* Primera pantalla en ordenador (pantallas, base.css 5b): .a-entrada llena el alto útil y
   el hero, su primer hijo, crece o encoge para que la tarjeta On now y la zona horaria
   se vean enteras y Tonight empiece justo en el borde (antes, a 1520x690, la zona
   horaria acababa en 717). Es encuadre: no cambia nada más del hero. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
  .a-hero { min-height: 0; }
}

/* --------------------------------------------------------------------------
   2. On now / Up next: tarjeta blanca montada sobre el borde del hero.
   Móvil: apilada. Ordenador: una sola fila.
   -------------------------------------------------------------------------- */
.a-directo {
  position: relative;
  z-index: 5;
}
.a-directo__tarjeta {
  position: relative;
  margin-top: calc(-1 * var(--a-solape));
  padding: 1.25rem;
  border-radius: var(--radio-grande);
  background: var(--blanco);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
}
.a-directo .ahora > * + * { margin-top: 0.25rem; }
.a-directo .ahora__titulo { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); overflow-wrap: anywhere; }
.a-directo .progreso { margin-top: 0.875rem; }
.a-directo__hasta {
  color: var(--gris-texto);
  font-size: var(--texto-pequeno);
  text-align: right;
}
.a-directo__siguiente {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--gris-linea);
}
.a-directo__ahora[hidden] + .a-directo__siguiente { margin-top: 0; padding-top: 0; border-top: 0; }
.a-directo__zona { margin-top: 1rem; }

@media (min-width: 64em) {
  .a-directo__tarjeta {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: calc(2 * var(--a-solape));
    padding: 1.25rem 2rem;
  }
  .a-directo__ahora {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .a-directo .ahora > * + * { margin-top: 0; }
  .a-directo .ahora__etiqueta { flex: none; }
  .a-directo .ahora__titulo { flex: 0 1 auto; min-width: 0; max-width: 20rem; font-size: 1.25rem; }
  .a-directo .ahora__meta { flex: 0 1 auto; min-width: 0; }
  .a-directo .progreso { flex: 1 1 8.75rem; min-width: 6.25rem; margin-top: 0; }
  .a-directo__hasta { flex: none; text-align: left; }
  .a-directo__siguiente {
    flex: 0 1 auto;
    align-self: stretch;
    align-content: center;
    margin-top: 0;
    padding: 0 0 0 2rem;
    border-top: 0;
    border-left: 1px solid var(--gris-linea);
  }
  .a-directo__ahora[hidden] + .a-directo__siguiente { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Resto de la portada (portada B, de prototipo/assets/b.css)
   Decisión de Dani del 07.10.2026: la primera pantalla (cabecera, hero y tarjeta On now) es la de A;
   desde Tonight es la portada B tal cual: Tonight con la línea de tiempo y la foto panorámica, Where
   to watch sobre blanco con la foto a la izquierda, How to subscribe negro con los tres círculos y la
   línea de tiempo, What you get en cuatro filas y el pie base. Lenguaje de la página: la línea de
   tiempo (línea gris fina con puntos o círculos). El tema pone class="pagina-b" en el <body> de la
   portada. De b.css no se trae la banda ni la tarjeta (las sustituye el hero de A): solo estas
   secciones, con retoques medidos (el separador de la línea de datos, el final de la línea de tiempo
   de How to subscribe cuando el segundo enlace baja de fila y, si se hace, el arreglo de la pantalla
   de Where to watch: ver sus comentarios).
   ========================================================================== */

.pagina-b {
  --b-linea: #D6D6D6;       /* línea de tiempo */
  --b-punto: #A6A6A6;       /* puntos grises de la línea */
  --b-punto-tam: 0.875rem;
  --b-hueco: 2rem;          /* hueco entre columnas */
}
@media (min-width: 64em) {
  .pagina-b { --b-hueco: 4rem; }
}
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .pagina-b { --b-hueco: 3rem; }
}

/* --------------------------------------------------------------------------
   B1. Tonight: línea de tiempo (vertical en móvil, horizontal desde 768 px)
   -------------------------------------------------------------------------- */
.b-noche { padding-top: 6rem; }        /* al menos 96 px entre la tarjeta y la sección */
.b-noche[id] { scroll-margin-top: -6rem; }   /* ancla: el título a 32 px de la cabecera (base.css) */
.b-noche > .contenedor > .programacion-error { margin-bottom: 1.5rem; }

.b-linea {
  /* 07.10.2026 (pedido por Dani: la línea de horas más compacta y la panorámica más alta): 45,6 px a 1440, 58,3 a 1920 y
     77,7 a 2560 (antes clamp(2rem, 1.5rem + 2vw, 3.25rem): 52, 63,8 y 85,1). La hora sigue siendo lo segundo más grande
     de la sección, justo por encima del título (44 px). */
  --b-hora: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --b-hueco-linea: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--b-hueco-linea);
}
.b-linea .noche__hora { font-size: var(--b-hora); line-height: 1; }   /* las tres, mismo tamaño */
.b-linea__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--b-punto-tam) minmax(0, 1fr);
  column-gap: 1.125rem;
  row-gap: 0.75rem;
  align-items: center;
  align-content: start;   /* si la fila de la lista estira el item, las filas internas no se estiran */
}
.b-linea__item > .noche__hora { grid-column: 2; grid-row: 1; }
.b-linea__marca {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: var(--b-punto-tam);
  height: var(--b-punto-tam);
  border-radius: 50%;
  background: var(--b-punto);
}
.b-linea__cuerpo { grid-column: 2; grid-row: 2; }
.b-linea__cuerpo > * + * { margin-top: 0.375rem; }

/* Tramo de línea de este punto al siguiente */
.b-linea__item::before {
  content: "";
  position: absolute;
  left: calc(var(--b-punto-tam) / 2 - 0.0625rem);
  top: calc(var(--b-hora) / 2);
  width: 0.125rem;
  height: calc(100% + var(--b-hueco-linea));
  background: var(--b-linea);
}
.b-linea__item:last-child::before,
.b-linea__item:not(:has(~ .b-linea__item:not([hidden])))::before { display: none; }

/* Metadatos separados por puntos: el punto solo sale entre datos que se ven (sin estudio aprobado, o sin título aprobado
   en el tipo, la línea va oculta y no queda un punto suelto delante; 06.10.2026, fase 2) */
.b-meta > span:not([hidden]) + span::before { content: "·"; content: "·" / ""; margin: 0 0.5em 0 0.2em; }

.b-noche__enlace { margin-top: 1.5rem; }

@media (min-width: 48em) {
  .b-linea {
    --b-hueco-linea: 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .b-linea__item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 0;
  }
  .b-linea__item > .noche__hora { grid-column: 1; grid-row: 1; }
  .b-linea__marca { grid-column: 1; grid-row: 2; margin-block: 1rem 1.125rem; }   /* 07.10.2026: antes 1,25 / 1,375 rem */
  .b-linea__cuerpo { grid-column: 1; grid-row: 3; }
  /* Si algún programa lleva "Premiere", los demás guardan su hueco: los tres títulos en la
     misma línea (!important porque base.css oculta [hidden] con display: none !important) */
  .b-linea:has(.etiqueta:not([hidden])) .b-linea__cuerpo > .etiqueta[hidden] {
    display: inline-flex !important;
    visibility: hidden;
  }
  /* Línea horizontal continua: de cada punto hasta el siguiente; la última llega al final de su columna */
  .b-linea__item::before,
  .b-linea__item:last-child::before,
  .b-linea__item:not(:has(~ .b-linea__item:not([hidden])))::before {
    display: block;
    left: 0;
    right: calc(-1 * var(--b-hueco-linea));
    top: calc(var(--b-hora) + 1rem + var(--b-punto-tam) / 2 - 0.0625rem);   /* por el centro del punto (su margen de arriba, 1 rem) */
    width: auto;
    height: 0.125rem;
  }
  .b-linea__item:last-child::before,
  .b-linea__item:not(:has(~ .b-linea__item:not([hidden])))::before { right: 0; }
  .b-noche__enlace { margin-top: 2rem; }
}

/* Foto panorámica a sangre bajo Tonight */
.b-panoramica {
  margin-top: 4rem;
  --foto-proporcion: 16 / 9;
}
@media (min-width: 64em) {
  /* 21:9 dentro del contenedor (1200x514 como mucho): a sangre, en pantallas anchas
     pasaba de 3,5:1 y el máster perdía frente y hombros. */
  .b-panoramica {
    margin-top: 6rem;
    margin-inline: auto;
    width: min(calc(100% - 2 * var(--margen)), var(--contenedor));
    --foto-proporcion: 21 / 9;   /* esquinas rectas, como el resto de fotos de A, B y C */
  }
}

/* Pantallas, vida del 26.09.2026 (pedido por Dani: "quizá agregar una foto tipo barra"). La
   "foto tipo barra" es la panorámica que B ya tenía: sube a la pantalla de Tonight, justo bajo
   la línea de tiempo, al ancho del contenedor y con esquinas rectas, y llena el alto que sobra:
   de barra de cine en el portátil (unos 6,4:1) a 12:5 como mucho (el recorte que ya pide la
   ficha para B en ordenador); lo que quede cuando llega al tope, abajo. Para ganar alto,
   "See the whole week" pasa a la fila del título, a la derecha. La línea de tiempo sigue siendo
   la protagonista (gris, sin degradado: el de B está en On now). */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
  main > .b-noche.pantalla { padding-bottom: var(--aire-abajo); }
  .b-noche.pantalla > .contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cabeza enlace" "error error" "linea linea";
    align-items: start;
  }
  .b-noche.pantalla .seccion__cabeza { grid-area: cabeza; }
  .b-noche.pantalla .contenedor > .programacion-error { grid-area: error; }
  .b-noche.pantalla .b-linea { grid-area: linea; }
  .b-noche.pantalla .b-noche__enlace { grid-area: enlace; margin: 0.25rem 0 0; }
  .b-noche.pantalla > .b-panoramica {
    flex: 1000 1 auto;
    aspect-ratio: auto;
    min-height: 9.375rem;
    max-height: calc(min(100vw - 2 * var(--margen), var(--contenedor)) * 5 / 12);
    margin-top: 2.5rem;
    margin-bottom: 0;
  }
}
/* Paso compacto (ventanas de menos de 800 px de alto, el mismo corte que el resto de reglas de "ventanas bajas"; antes 760).
   07.10.2026, pedido por Dani sobre su portátil de 1443x695: la línea de horas un poco más pequeña y compacta y la panorámica
   más alta (antes 1200x249, 4,82:1, "una franja finísima"). Hora de 40 px (antes 52), punto con 10 / 12 px de margen (antes
   14 / 16), título del programa de 20 px (antes 24), duración con interlineado 1,35 (antes 1,6), 4 px entre las piezas del
   cuerpo (antes 6), 24 px del título a la línea y de la línea a la panorámica (antes 28 y 32). La línea pasa de 193 a 160 px y
   la panorámica a 1200x294 (4,08:1) a 1443x695; la sección sigue midiendo el alto útil. "Premiere" (15 px) y la duración (17 px)
   no bajan: son los mínimos. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-noche.pantalla .seccion__cabeza { margin-bottom: 1.5rem; }
  .b-noche.pantalla .b-linea { --b-hora: 2.5rem; }
  .b-noche.pantalla .b-linea__marca { margin-block: 0.625rem 0.75rem; }
  .b-noche.pantalla .b-linea__item::before { top: calc(var(--b-hora) + 0.625rem + var(--b-punto-tam) / 2 - 0.0625rem); }
  .b-noche.pantalla .b-linea__cuerpo > * + * { margin-top: 0.25rem; }
  .b-noche.pantalla .noche__titulo { font-size: 1.25rem; }
  .b-noche.pantalla .noche__meta { line-height: 1.35; }
  .b-noche.pantalla > .b-panoramica { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   B2. Dónde ver: filas separadas por líneas finas; foto a la izquierda desde 768 px
   -------------------------------------------------------------------------- */
.b-donde__rejilla { display: grid; gap: 3rem; }
.b-donde__foto { --foto-proporcion: 1 / 1; }

@media (max-width: 47.99875em) {
  /* En móvil la foto va después de la lista y a sangre. El bloque de texto ocupa al menos
     una pantalla para que la foto anterior y esta nunca se vean a la vez (aunque el país
     elegido tenga un solo operador). */
  .b-donde__contenido { min-height: calc(100vh - 6.5rem); }
  .b-donde__foto { margin-inline: calc(-1 * var(--margen)); }
}
@media (min-width: 48em) {
  /* La cabecera en su fila y la lista en la de abajo; la foto ocupa las dos filas y comparte los bordes del
     bloque entero (.foto-ancla en base.css): arriba el del título "Where to watch", abajo el de la lista de
     operadores. Si no puede ser tan alta (tope 2:3 de su columna, o el alto útil menos 64 px) queda centrada
     respecto a ese bloque. 07.10.2026, pedido por Dani: antes iba solo en la fila de la lista (". cabeza") y
     empezaba 125 a 224 px por debajo del título, "más baja que el texto". .b-donde__contenido se deshace para
     que cabecera y lista vayan cada una a su fila. */
  .b-donde__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "media cabeza" "media contenido";
    column-gap: var(--b-hueco);
    row-gap: 0;
    align-items: start;
  }
  .b-donde__contenido { display: contents; }
  /* Monitores altos: la lista crece hasta llenar la pantalla (base.css 13, --fila-crece); 709 px
     es el alto de esta pantalla con las filas normales. La foto crece con ella (hasta 2:3). */
  .b-donde { --donde-base: 48.375rem; }   /* 44,3125 rem + 4,0625 rem de la salida de P1 (61 px + 4 px de margen medido, 14.10.2026) */
  .b-donde__contenido > .seccion__cabeza { grid-area: cabeza; }
  .b-donde__contenido > .donde-ver { grid-area: contenido; min-width: 0; }
  .b-donde__media { grid-area: media; }
}
/* Ventanas bajas (07.10.2026): el mismo arreglo que Dani pidió el 06.10.2026 para la portada A, medido otra vez para esta columna (la lista de B es la de 7fr con
   hueco de 4 rem, la de A tenía hueco de 5 rem, así que no valen los números de A). Con las filas compactas de base.css (menos de 800 px de alto) la lista medía 222 px
   y a 1443x695 quedaban unos 176 px sin cubrir bajo ella y la foto (134 de blanco más el aire de abajo). --donde-base es lo que mide la pantalla desde su borde de arriba
   hasta el final de la lista y la foto con --fila-crece: 0 (medido con la web, anchos de 1024 a 1536, altos de 600 a 799): 438,77 px (27,42 rem) desde 1250 de ancho (también
   a 1265, el ancho de una ventana de 1280 con barra de scroll) y hasta 1920; 460,67 a 1235; 483,31 a 1220 y 482,98 a 1205; 530,42 a 1180 (los chips envuelven hasta 1204 px);
   560,14 a 1100 y 580,44 (36,28 rem) a 1024, donde la lista es más estrecha y las filas parten en dos líneas. Con ese alto --fila-crece (base.css 13) devuelve a las filas lo que
   sobra y la lista cierra la pantalla con el blanco justo de --aire-abajo. Se usa un poco más (nunca menos) de lo medido: si sobra, sobra blanco, nunca se pasa de la pantalla;
   dos tramos: hasta 1263 el de 1205 y desde 1264 (el contenedor llega a su ancho máximo, 1200 más los márgenes) el de 1250; a 1250 de ancho
   la lista crecida parte alguna fila y la sección pasaba unos 3 px de la pantalla, así que ese ancho se queda en el tramo anterior (sobran unos 75 px de blanco). En las filas compactas el hueco del logo (3 rem) no llevaba el crecimiento --logo-extra de las filas
   normales, así que el hueco y el logo crecen también (hasta 24 px más), como en las filas normales. Con la lista crece la foto (copia su alto).
   08.10.2026 (pendiente que dejó la ronda anterior: a 1024x600 la sección medía 612 px, 92 más que la pantalla de 520, y a 1100x600, 592): de 1024 a 1208 px la columna de
   texto medía de 532 a 637 px y ahí la entradilla iba en dos líneas (necesita 600), los seis chips de país en dos filas (necesitan 635 a 15 px) y dos filas de operador
   partían sus datos. La columna de texto no baja ahora de 40 rem (640 px: minmax(40rem, 7fr)) y la foto se queda con lo demás (272 px a 1024, 348 a 1100, 452 a 1204;
   desde 1209 los 7fr ya pasan de 640 y no cambia nada): entradilla y chips en una línea, la lista de 267 px y la sección en 515 px a 1024x600 (5 de blanco de más, que
   --fila-crece devuelve a las filas). Con la columna de 640 el tramo de 1024 a 1204 mide lo mismo que el de 1205 (483 px a 1204; 478 a 1024, donde el título es más pequeño),
   así que los dos tramos de abajo se funden en uno de 30,25 rem. La foto de esta pantalla y la de How to subscribe (misma regla) quedan en 2:3 de su columna (272x408 a 1024). */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-donde { --donde-base: 34.0625rem; }   /* 30,25 rem + 3,8125 rem de la salida de P1 */
  .b-donde__rejilla { grid-template-columns: minmax(0, 5fr) minmax(40rem, 7fr); }
  .b-donde .operadores {
    --operador-caja-alto: calc(3rem + var(--logo-extra));
    --operador-logo-base: calc(2.75rem + var(--logo-extra));
  }
  .b-donde .operador { padding-block: calc(0.25rem + var(--fila-extra, 0px)); }
  /* la primera y la última fila siguen como en base.css 13: sin el aire fijo de 4 px, solo con el que crece */
  .b-donde .operador:first-child { padding-top: var(--fila-extra, 0px); }
  .b-donde .operador:last-child { padding-bottom: var(--fila-extra, 0px); }
}
@media (min-width: 79em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-donde { --donde-base: 31.3125rem; }   /* 27,5 rem + 3,8125 rem de la salida de P1 */
}

/* --------------------------------------------------------------------------
   B3. Cómo suscribirse: 3 círculos numerados unidos por la línea; foto a la derecha
   -------------------------------------------------------------------------- */
.b-pasos__rejilla { display: grid; gap: 3rem; }
.b-pasos__media { display: none; }       /* en móvil cercania va al final, tras "Why X-MO" (.b-cierre__foto) */
.b-pasos__foto { --foto-proporcion: 4 / 5; }

@media (min-width: 48em) {
  /* Como en Where to watch: la cabecera en su fila, los pasos debajo y la foto en las dos filas, con los bordes
     del bloque entero (arriba el título "How to subscribe", abajo "Find your TV provider"); si no puede ser tan
     alta (2:3 de su columna, alto útil menos 64 px) queda centrada en ese bloque. 07.10.2026, pedido por Dani:
     antes iba solo en la fila de los pasos ("cabeza .") y empezaba a la altura del círculo 1. */
  .b-pasos__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "cabeza media" "lista media";
    column-gap: var(--b-hueco);
    row-gap: 0;
    align-items: start;
  }
  .b-pasos__texto { display: contents; }
  .b-pasos__texto > .seccion__cabeza { grid-area: cabeza; }
  .b-pasos__lista { grid-area: lista; }
  .b-pasos__media { display: block; grid-area: media; }
}

.b-pasos__lista {
  --b-circulo: 3rem;
  --b-hueco-pasos: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--b-hueco-pasos);
}
.b-paso {
  position: relative;
  display: grid;
  grid-template-columns: var(--b-circulo) minmax(0, 1fr);
  column-gap: 1.25rem;
}
.b-paso__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--b-circulo);
  height: var(--b-circulo);
  border: 0.125rem solid var(--negro);
  border-radius: 50%;
  background: var(--blanco);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
.b-paso__titulo {
  padding-top: 0.625rem;
  font-size: var(--titulo-3);
  font-weight: 800;
  line-height: 1.25;
}
.b-paso__texto { margin-top: 0.375rem; color: var(--gris-texto); }
/* Vida del 26.09.2026 (pedido por Dani). La línea de tiempo acaba en la acción: una sola línea
   del primer círculo a un punto negro (el mismo que marca el ahora en On now) junto a
   "Find your TV provider". Sin botón rosa: la cabecera ya lo enseña siempre. */
.b-pasos__cuerpo { position: relative; }
@media (min-width: 48em) {
  .b-pasos__cuerpo { grid-area: lista; }
  .b-pasos__cuerpo > .b-pasos__lista { grid-area: auto; }   /* el área "lista" es ahora el envoltorio */
}
/* Retoque del 07.10.2026 (en b.css la línea llegaba hasta el centro de la ÚLTIMA fila de la acción, y con el enlace "Read the FAQ" debajo, en 390 px, el
   punto, centrado entre las dos filas, quedaba 22 px por encima del final de la línea): la línea baja en dos tramos, el de la lista (hasta su borde de
   abajo) y el de la acción (del borde de la lista hasta el centro del punto, que va siempre en la primera fila). Con una sola fila es el mismo dibujo. */
.b-pasos__lista { position: relative; }
.b-pasos__lista::before {
  content: "";
  position: absolute;
  left: calc(var(--b-circulo, 3rem) / 2 - 0.0625rem);
  top: calc(var(--b-circulo, 3rem) / 2);
  bottom: 0;
  width: 0.125rem;
  background: var(--b-linea);
}
.b-pasos__accion {
  --b-hueco-accion: 1.5rem;    /* aire entre el último paso y la acción; el tramo de línea de la acción lo cruza */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--b-circulo, 3rem) auto;
  column-gap: 1.25rem;
  align-items: start;
  justify-content: start;
  margin-top: var(--b-hueco-accion);
}
.b-pasos__accion::before {
  content: "";
  position: absolute;
  left: calc(var(--b-circulo, 3rem) / 2 - 0.0625rem);
  top: calc(-1 * var(--b-hueco-accion));
  height: calc(var(--b-hueco-accion) + var(--toque) / 2);
  width: 0.125rem;
  background: var(--b-linea);
}
.b-pasos__marca {
  justify-self: center;
  margin-top: calc((var(--toque) - 1rem) / 2);   /* en la primera fila de la acción, centrado con su enlace */
  width: 1rem;
  height: 1rem;
  border: 0.1875rem solid var(--blanco);
  border-radius: 50%;
  background: var(--negro);
  box-shadow: 0 0 0 1px var(--negro);
}

/* La sección entera en negro (27.09.2026, pedido por Dani: "todo negro aquí", como el How to
   subscribe de C, y sin el cuadro con la esquina de arriba cortada, que "no se ve bonito"). La
   trama de puntos del kit va detrás de los pasos y se apaga hacia la foto (la de C en espejo: en
   B la foto va a la derecha), y la X de la marca difuminada detrás de la foto (.marca-x,
   base.css, al 13 %). La línea de tiempo de B se queda: solo cambia a colores sobre negro
   (círculos con borde y número blancos, punto final blanco con aro negro, enlace blanco). Sin
   degradado en esta pantalla (el de B está en la barra de On now). En móvil no hay foto aquí
   (cercania cierra la página) ni X. Delante y detrás van secciones blancas: nunca dos pantallas
   oscuras seguidas. */
.b-pasos.oscuro {
  --b-linea: #474747;             /* línea de tiempo sobre negro (sobre blanco, #D6D6D6) */
  position: relative;
  isolation: isolate;
  overflow: clip;                 /* recorta la X; sin alto fijo, así nada se corta */
}
.b-pasos.oscuro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--trama);
  background-size: var(--trama-paso) var(--trama-paso);
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 20% 45%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 75% at 20% 45%, #000 20%, transparent 72%);
}
.b-pasos.oscuro .b-paso__numero {
  border-color: var(--blanco);
  background: var(--negro);       /* tapa la línea que pasa por detrás */
  color: var(--blanco);
}
.b-pasos.oscuro .b-paso__texto { color: var(--gris-oscuro-texto); }
.b-pasos.oscuro .b-pasos__marca {
  border-color: var(--negro);
  background: var(--blanco);
  box-shadow: 0 0 0 1px var(--blanco);
}
@media (min-width: 48em) {
  /* El texto, por encima de la X (la .foto-ancla se pintaría encima) */
  .b-pasos .seccion__cabeza,
  .b-pasos__cuerpo { position: relative; z-index: 1; }
}

/* Pantallas: los pasos se reparten el alto que sobra (huecos iguales, la línea de por medio) con un tope de
   680 px para el cuerpo, y la foto cercania (.foto-ancla) ocupa el bloque entero, del título al enlace, con
   su tope 2:3 (07.10.2026: el tope de 680 px ya no se aplica a la columna de la foto, que si no se quedaba
   corta y no podía centrarse en el bloque de 734 px de 1440x900). Círculos de 56 px en portátiles de 760 px
   de alto o menos, 64 hasta 879 y 72 desde 880. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
  .b-pasos__cuerpo,
  .b-pasos__cuerpo > .b-pasos__lista { --b-circulo: 4rem; }
  .b-paso__numero { font-size: 1.75rem; }
  .b-paso__titulo { padding-top: 1rem; }

  main > .b-pasos.pantalla::after { flex-grow: 0; }
  .b-pasos > .contenedor { flex: 1 0 auto; }
  .b-pasos__rejilla { grid-template-rows: auto 1fr; }
  .b-pasos__cuerpo,
  .b-pasos__media { align-self: stretch; }
  .b-pasos__cuerpo { max-height: 42.5rem; display: flex; flex-direction: column; }
  .b-pasos__cuerpo > .b-pasos__lista {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
  }
  /* Con el ::after vacío, el hueco del paso 3 al enlace es igual que los otros */
  .b-pasos__cuerpo > .b-pasos__lista::after { content: ""; }
  .b-pasos__accion { --b-hueco-accion: 0rem; }
}
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 47.5em) {
  .b-pasos .seccion__cabeza { margin-bottom: 2rem; }
  .b-pasos__cuerpo,
  .b-pasos__cuerpo > .b-pasos__lista { --b-circulo: 3.5rem; }
  /* 08.10.2026: 1,25 rem (antes 1,5) es el hueco MÍNIMO entre pasos; con más alto los pasos se reparten (space-between) y no se nota.
     A 600 px de alto la sección medía 530 px (10 más que la pantalla de 520) de 1264 a 1443 de ancho: con 3 huecos de 20 px queda en 518. */
  .b-pasos__cuerpo > .b-pasos__lista { gap: 1.25rem; }
  .b-paso__numero { font-size: 1.5rem; }
  .b-paso__titulo { padding-top: 0.75rem; }
}
/* Ventanas bajas y estrechas (08.10.2026, el mismo arreglo que Where to watch): de 1024 a 1208 px la columna de los pasos medía de 532 a
   637 px y los textos de los pasos 1 y 3 iban en dos líneas (necesitan 516 y 532 px de texto; la columna da su ancho menos círculo y
   hueco, 76 px): a 1024x600 la sección medía 576 px, 56 más que la pantalla. La columna de texto no baja de 40 rem (564 de texto) y la
   foto se queda con lo demás (272 px a 1024, en 2:3: 272x408). Medido: 513 px a 1024x600, 515 a 1100x600, 517 a 1204x600. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-pasos__rejilla { grid-template-columns: minmax(40rem, 7fr) minmax(0, 5fr); }
}
@media (min-width: 64em) and (orientation: landscape) and (min-height: 55em) {
  .b-pasos__cuerpo,
  .b-pasos__cuerpo > .b-pasos__lista { --b-circulo: 4.5rem; }
  .b-paso__numero { font-size: 2rem; }
  .b-paso__titulo { padding-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   B4. Ventajas: lista de 4 filas con icono pequeño (2 × 2 desde 768 px), sin foto
   -------------------------------------------------------------------------- */
.b-ventajas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--gris-linea);
}
.b-ventaja {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--gris-linea);
}
.b-ventaja__icono { width: 1.75rem; height: 1.75rem; margin-top: 0.0625rem; }
.b-ventaja__titulo { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.b-ventaja__texto { margin-top: 0.25rem; color: var(--gris-texto); }

/* Solo móvil: cercania como imagen de cierre, a sangre, antes del pie */
.b-cierre__foto {
  margin-top: var(--espacio-seccion);
  margin-bottom: calc(-1 * var(--espacio-seccion));
  --foto-proporcion: 4 / 5;
}

@media (min-width: 48em) {
  .b-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--b-hueco); }
  .b-ventaja { padding-block: 1.75rem; }
  .b-ventaja__titulo { font-size: 1.25rem; }
}
/* Vida del 26.09.2026: los iconos en los mismos círculos de 48 px de la línea de tiempo, y en
   pantallas el alto de cada fila crece con la ventana (la lista se acerca al pie). Sin foto ni
   botón: B sigue terminando distinto de C. */
.b-ventaja { grid-template-columns: 3rem minmax(0, 1fr); align-items: start; }
.b-ventaja__icono {
  width: 3rem;
  height: 3rem;
  margin-top: 0;
  padding: 0.6875rem;
  border: 0.125rem solid var(--negro);
  border-radius: 50%;
}
.b-ventaja > div { padding-top: 0.625rem; }
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) {
  .b-ventaja { padding-block: clamp(1.5rem, 4.5svh, 3.5rem); }
}

/* --------------------------------------------------------------------------
   B5. Móvil en horizontal (844 x 390): ninguna foto más alta que la pantalla
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 31.25em) {
  .b-panoramica { max-height: calc(var(--alto-util) - 2rem); }
}

/* Portátiles bajos (29.09.2026): la panorámica no baja de 120 px y las filas de What you get se aprietan.
   El contenido, no una altura fija, sigue mandando si se traduce. */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-noche.pantalla > .b-panoramica { min-height: 7.5rem; }
  .b-ventaja { padding-block: 1.25rem; }
}

/* 01.10.2026: de 1024 a 1204 px de ancho los seis países no cabían en una fila dentro de la columna: envuelven en vez de salirse (desde 1205 px caben en una fila).
   08.10.2026: con la columna de texto de 40 rem como mínimo (B2, ventanas bajas) caben en una fila también de 1024 a 1204 (635 px de 640 en inglés); la regla se queda
   por si una traducción los alarga: envuelven, nunca se salen. */
@media (min-width: 64em) and (max-width: 75.25em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .b-donde .donde-ver > .chips { flex-wrap: wrap; }
}

/* Los títulos y textos de los pasos y de las ventajas van en columnas de minmax(0, 1fr): una palabra traducida más ancha que su
   columna ("денонощието," en búlgaro en pantallas de 320 a 390 px) se salía de la caja y daba scroll lateral. Con anywhere parte
   esa palabra solo si no cabe; si cabe (inglés y los demás idiomas medidos), no cambia nada. */
.b-ventaja__titulo,
.b-ventaja__texto,
.b-paso__titulo,
.b-paso__texto,
.b-pasos__enlaces a { overflow-wrap: anywhere; }

/* 14.10.2026: el enlace de texto a Schedule dentro de la frase de What you get llega a 44 px de alto sin mover las líneas (relleno y margen negativo iguales). */
.b-ventaja__texto a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }

/* How to subscribe: junto al enlace "Find your TV provider", el de "Read the FAQ" (solo si hay preguntas que enseñar). Los dos en
   una fila y, si no caben, el segundo debajo. */
.b-pasos__enlaces { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.75rem; }

/* ==========================================================================
   Bloques nuevos del tema X-MO (van al final de tema.css, después del contenido de a.css).
   Solo variables de base.css: ningún color nuevo y nada de rosa fuera del boton principal y el punto de directo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. Pie: la lista legal en dos columnas desde 1024 px
   Cinco enlaces con el alto de cuatro: el pie mide lo mismo que en la maqueta A (medido el 06.10.2026).
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .pie__lista--doble {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.5rem;
    justify-content: start;
  }
}

/* --------------------------------------------------------------------------
   8. Páginas interiores (Schedule, legales, 404)
   En A el pie llena la pantalla bajo "What you get" (a.css 6, --final-alto). En una página interior no hay
   esa banda: el pie mide lo que su contenido y la página se estira para que el pie quede abajo.
   -------------------------------------------------------------------------- */
.pagina-interior .pie { min-height: 0; }
.pagina-interior .pie__interior { align-content: normal; }
.interior {
  padding-block: 2.5rem 4rem;
  min-height: max(0px, calc(var(--alto-util) - var(--pie-alto)));
}
@media (min-width: 64em) {
  .interior { padding-block: 4rem 5rem; }
}
/* 15.10.2026: Schedule acaba en el cierre (negro y a todo el ancho). Sin el relleno de abajo de .interior, que dejaba una franja
   blanca de 64 px (80 en ordenador) entre el cierre y el pie negro. Las demás interiores no llevan cierre y siguen igual. */
.interior:has(> .b-cierre) { padding-bottom: 0; }
.interior__cabeza { margin-bottom: 2rem; }
.interior__cabeza > * + * { margin-top: 0.75rem; }
.interior__titulo {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  hyphens: auto;   /* 14.10.2026: 'Datenschutzerklärung' y similares no caben a 390 px */
  overflow-wrap: break-word;
}
.interior__texto > * + * { margin-top: 1rem; }

/* Textos legales (contenido de la página) */
.legal { max-width: 46rem; }
.legal > * + * { margin-top: 1rem; }
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; line-height: 1.25; }
.legal h2 + * { margin-top: 0.75rem; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.375rem; }
.legal code { overflow-wrap: anywhere; }
.legal__tabla { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--texto-pequeno); }
.legal th, .legal td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--gris-linea); text-align: left; vertical-align: top; }
.legal th { font-weight: 800; }
.legal__borrador {
  padding: 0.875rem 1rem;
  border-left: 0.25rem solid var(--negro);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--gris-suave);
}

/* --------------------------------------------------------------------------
   9. Schedule: chips de día y lista del día elegido; desde 1280 px, una foto a la derecha de la lista
   07.10.2026 (pedido por Dani: la página "se ve vacía"; a 1440 quedaban 368 px en blanco a la derecha de la lista de 832):
   rejilla de dos columnas desde 80em, a la izquierda las pestañas y la lista y a la derecha el hueco de la toma "schedule", que
   empieza en el borde de arriba de las pestañas y acaba en el de abajo de la lista; con una lista larga se queda en 2:3 y se pega
   bajo la cabecera (sticky, a 112 px) al bajar; con una lista corta no baja de 1:1 (100cqi: nunca más ancha que alta). Por debajo
   de 1280 (de 1024 a 1279 quedarían de 80 a 319 px) y en móvil no hay hueco: display none y la imagen perezosa no se pide. Sin
   programación (chips vacíos) tampoco se enseña. Mientras la toma no esté en el manifiesto, la caja gris "[Photo: Schedule]".
   08.10.2026 (pedido por Dani sobre su captura): la foto más ancha, hacia la caja que dibujó (de x 880 a 1320 a 1440x900, un 36 %
   del contenedor; Stitch sugería un 35 %) y con las ESQUINAS RECTAS como todas las fotos del sitio. La foto puede llegar a 27.5 rem
   (440 px de 1280 a 1535, la caja de Dani; 540 a 1920 y 720 a 2560 con la raíz escalada), pero MANDAN LOS 7 CHIPS DE DÍA EN UNA FILA:
   los chips no envuelven (flex-wrap: nowrap) y la columna de la lista tiene mínimo "auto" (minmax(auto, 1fr)), así que crece hasta
   lo que miden los 7 chips de esa semana y la foto se queda con el resto, hasta los 27.5 rem. Los rótulos los escribe Intl y cambian
   cada día ("Wed 30 Sept" es el más largo del año en inglés), por eso no vale una columna fija: con una de 26 rem (lista de 736 px)
   los chips en inglés saltaban a dos filas 262 días del año (medido con los rótulos de los 365 días de 2026 sobre la web de pruebas,
   08.10.2026). Con esta regla, los 365 días van en una fila en en, nl, cs, es, bg y de. Ancho de la foto a 1440 y 1443 según la
   semana (de 1200 - 48 - chips): en 339 a 440 (mediana 403; esta semana 401, con la hora fija del medidor 429), de 355 a 440
   (mediana 414), es 389 a 440, nl 426 a 440, cs y bg 440 siempre. En francés los rótulos miden de 756 a 874 px (la foto quedaría en
   278): ahí los chips SÍ envuelven en dos filas enteras (html:lang(fr)) y la foto se queda con los 440. Chips con 10 px de relleno y 6
   de hueco (16 px de letra, 44 de alto, white-space: nowrap: ninguno parte su texto). El hueco va de 1:1 (lista corta) a 2:3 (lista
   larga): con 429 de ancho, 429x429 y 429x644 (2:3 = 150cqi) a 1440x900 y 429x551 (alto útil menos 64) a 1443x695.
   -------------------------------------------------------------------------- */
.semana__media { display: none; }
@media (min-width: 80em) {
  .semana__rejilla {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) minmax(0, 27.5rem);   /* la lista nunca es más estrecha que sus 7 chips en una fila; la foto, el resto hasta 440 px */
    column-gap: 3rem;
    align-items: start;
  }
  .semana__media {
    display: block;
    align-self: stretch;
    position: relative;
    container-type: inline-size;   /* 150cqi = 1,5 veces el ancho de la columna: tope 2:3; 100cqi, el suelo 1:1 */
  }
  .semana__rejilla:has([data-semana-dias]:empty) .semana__media { display: none; }
  .semana__foto {
    position: sticky;
    top: calc(var(--cabecera-alto) + 2rem);
    height: min(100%, calc(var(--alto-util) - 4rem), 150cqi);
    min-height: 100cqi;
    aspect-ratio: auto;
    border-radius: 0;              /* esquinas rectas, como todas las fotos del sitio (Dani, 08.10.2026) */
  }
  /* Los 7 chips de día en UNA fila, sin envolver: su ancho es el mínimo de la columna de la lista (ver arriba). 10 px de relleno y 6 de
     hueco (con el relleno normal de 18 px medirían 835 px esta semana en inglés); siguen midiendo 44 px de alto y 16 px de letra, el
     mismo relleno que los chips de país del paso compacto. white-space: nowrap y flex: none: ninguno parte su texto ni se encoge. */
  .semana__dias { gap: 0.375rem; flex-wrap: nowrap; }
  .semana__dias .chip { padding-inline: 0.625rem; white-space: nowrap; flex: none; }
  /* Francés: los rótulos de Intl ("jeu. 8 oct.") miden de 756 a 874 px en el año; en una fila dejarían la foto en 278 px, así que
     aquí envuelven en dos filas de chips enteros y la foto se queda con los 27.5 rem. */
  html:lang(fr) .semana__dias { flex-wrap: wrap; }
}
.semana__dias { margin-bottom: 1.5rem; }
.semana__titulo { margin-bottom: 0.5rem; font-size: var(--titulo-3); font-weight: 800; line-height: 1.25; }
.semana__lista { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.semana__fila {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding-block: 1rem;
  border-top: 1px solid var(--gris-linea);
}
.semana__hora { font-size: 1.25rem; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
.semana__cuerpo > * + * { margin-top: 0.375rem; }
.semana__fila--ahora { border-top-color: var(--negro); }
.semana__fila--ahora .progreso { margin-top: 0.75rem; max-width: 20rem; }
.semana__meta > span:not([hidden]) + span::before { content: "·"; content: "·" / ""; margin: 0 0.45em 0 0.2em; }

/* A2 (08.10.2026): esqueleto de Schedule. Lo pinta page-schedule.php y xmo.js lo quita al pintar la lista (o al fallar el archivo). Reserva el
   sitio de 7 chips y 10 filas (102 px cada una a 1440, 96 en móvil: lo que miden las reales) para que el pie no salte unos 1200 px cuando
   llega la lista (CLS de 0,29 a 1440x900). Estático, sin animación. Sin JavaScript no se pinta: ahí sale el aviso del noscript. */
.chip--esqueleto { min-width: 6.25rem; pointer-events: none; }
.chip--esqueleto:hover { background: var(--gris-suave); }
.esqueleto-barra { display: block; border-radius: 0.25rem; background: var(--gris-suave); }
.esqueleto-titulo { width: 14rem; max-width: 70%; height: 1.75rem; margin-bottom: 0.5rem; }
.semana__esqueleto .semana__fila { min-height: 6.375rem; align-items: start; }
.esqueleto-hora { width: 3.25rem; height: 1.5rem; }
.esqueleto-linea { width: 60%; height: 1.5rem; }
.esqueleto-linea--corta { width: 35%; height: 1rem; margin-top: 0.5rem; }
@media (max-width: 47.99875em) {
  .semana__esqueleto .semana__fila { min-height: 6rem; }
}
@media (scripting: none) {
  .chip--esqueleto, .semana__esqueleto { display: none; }
}

/* --------------------------------------------------------------------------
   10. Franja de edad (las cuatro páginas legales)
   06.10.2026 (pedido por Dani): en las legales el aviso de edad es una franja fija arriba, "Are you 18 or
   older?" con Enter y Leave, y el texto legal se lee debajo. No tapa ni bloquea nada. La cabecera, que
   también es pegajosa, baja lo que mide la franja (xmo.js pone --franja-alto con lo medido). Sin JavaScript
   se ve siempre. Todo en rem, sin colores nuevos. Por encima de la cabecera (100) y por debajo del enlace
   de saltar (200).
   -------------------------------------------------------------------------- */
.franja-edad {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.375rem var(--margen);
  background: var(--blanco);
  color: var(--negro);
  border-bottom: 0.125rem solid var(--negro);
}
.franja-edad__texto { margin: 0; font-size: var(--texto-base); font-weight: 800; line-height: 1.25; }
.franja-edad__botones { display: flex; gap: 0.5rem; }
.franja-edad .boton { min-height: var(--toque); padding-inline: 1.25rem; }
@media (max-width: 47.99875em) {
  .franja-edad__texto { font-size: var(--texto-pequeno); }
  .franja-edad .boton { padding-inline: 0.75rem; }
}
/* Aceptado (el script del <head> y xmo.js lo ponen en <html>): fuera la franja y la cabecera vuelve arriba */
html.franja-aceptada .franja-edad { display: none; }
.franja-edad ~ .cabecera { top: var(--franja-alto, 3.625rem); }
html.franja-aceptada .franja-edad ~ .cabecera { top: 0; }
/* Con Tab, que un enlace no quede tapado por la franja y la cabecera */
html.franja-pagina:not(.franja-aceptada) { scroll-padding-top: calc(var(--cabecera-alto) + var(--franja-alto, 3.625rem) + 2rem); }

/* --------------------------------------------------------------------------
   11. País por IP (fase 4): atribución de DB-IP en el pie
   Solo sale con "Country by IP" encendido en el panel y, desde el 08.10.2026, solo en las páginas que usan el dato del país
   (la portada, con Where to watch; inc/datos.php, xmo_pais_ip_atribucion_visible). Va en la línea del © y el enlace mide lo
   que una fila del pie (44 px en táctil, 32 px con ratón: --toque-pie, base.css 8). Todo en rem, sin colores nuevos.
   -------------------------------------------------------------------------- */
.pie__atribucion { margin-inline-start: 1.25rem; }
/* Discreta (Dani, 07.10.2026): el gris y el tamaño del ©, subrayado solo al pasar el ratón o con el foco */
.pie__atribucion a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-pie);
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.pie__atribucion a:hover,
.pie__atribucion a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Selector de idioma (frente de idiomas, 06.10.2026)
   Solo sale con dos idiomas visibles o más (inc/idiomas.php, xmo_selector_idioma). Dos sitios: un desplegable <details> en
   la cabecera de escritorio (desde 1280 px, como el resto de la cabecera de escritorio) y la lista dentro del menú de móvil
   (hasta 1279 px). La lista del pie se quitó el 07.10.2026 (Dani: basta con el selector de arriba). Enlaces normales de 44 px
   de alto. Todo en rem y con los colores de siempre (blanco sobre negro, gris oscuro para el rótulo "borrador").
   -------------------------------------------------------------------------- */
.idiomas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.idiomas__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--blanco);
  font-weight: 600;
  text-decoration: none;
}
.idiomas__enlace:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.idiomas__enlace[aria-current="true"] { font-weight: 800; text-decoration: underline; text-underline-offset: 0.3em; }
.idiomas__borrador { margin-inline-start: 0.375rem; color: var(--gris-oscuro-texto); font-weight: 400; }

/* Menú de móvil: debajo de los enlaces del menú; en escritorio se ve el desplegable de la cabecera */
.idiomas--menu { padding-top: 0.75rem; }
.idiomas--menu .idiomas__enlace { font-size: 1.0625rem; }

/* Cabecera de escritorio: botón con el código del idioma y una lista que cuelga debajo */
.idioma-menu { display: none; position: relative; }
.idioma-menu__boton {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--toque);
  padding-inline: 0.75rem;
  border-radius: var(--radio);
  color: var(--blanco);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  cursor: pointer;
}
.idioma-menu__boton::-webkit-details-marker { display: none; }
.idioma-menu__boton svg { width: 1.375rem; height: 1.375rem; }
.idioma-menu__boton::after {
  content: '';
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
}
.idioma-menu[open] .idioma-menu__boton::after { transform: translateY(0.0625rem) rotate(-135deg); }
.idioma-menu__boton:hover { text-decoration: underline; text-underline-offset: 0.3em; }
/* ul.: base.css pone padding 0 a todo ul[class] (más específico que una sola clase) */
ul.idioma-menu__lista {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 12rem;
  padding: 0.5rem 1rem;
  background: var(--negro);
  border: 0.0625rem solid var(--gris-oscuro-texto);
  border-radius: var(--radio);
}
/* Desde 1280 px (80em, el corte de la cabecera de escritorio desde el 07.10.2026; antes 64em). Márgenes de 0,75 y 0,5 rem (antes 1 y
   0,75): con el enlace "Tonight" los 5 enlaces, el selector y el botón tienen que caber en los 1200 px del contenedor en los 7 idiomas
   (base.css 7). A la vista quedan 24 px entre el último enlace y el código del idioma (12 más los 12 de relleno del botón) y 20 entre
   el selector y el botón rosa. */
@media (min-width: 80em) {
  .idioma-menu { display: block; margin-left: 0.75rem; }
  .idioma-menu + .cabecera__boton { margin-left: 0.5rem; }
  .idiomas--menu { display: none; }
}

/* Los botones de la tarjeta y del panel de cookies son de una sola línea (base.css 36 px de alto); con un texto traducido más largo
   ("Alleen noodzakelijke", "Selectie opslaan") parten la línea en vez de salirse del botón. En inglés caben en una y no cambia nada. */
.cookies__botones .boton,
.cookies-barra__acciones .boton { white-space: normal; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   13. FAQ (preguntas frecuentes, 07.10.2026)
   Un acordeón de <details> y <summary>, todo cerrado: se ven las preguntas de un vistazo y cada una abre su respuesta. Sin JavaScript;
   Tab, Intro y Espacio funcionan en el navegador. La fila entera es pulsable (alto mínimo de 4 rem, más que los 44 px) y el icono
   cambia de más a menos. Líneas finas entre preguntas, como las filas de Schedule; la abierta lleva la línea negra. El texto en
   negro sobre blanco y los enlaces en morado, como en las legales. Todo en rem y con los colores de siempre.
   -------------------------------------------------------------------------- */
.faq__lista { max-width: 46rem; border-bottom: 0.0625rem solid var(--gris-linea); }
.faq__item { border-top: 0.0625rem solid var(--gris-linea); }
.faq__item[open] { border-top-color: var(--negro); }
.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4rem;
  padding-block: 0.875rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--titulo-3);
  font-weight: 800;
  line-height: 1.3;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__texto { min-width: 0; overflow-wrap: break-word; }
.faq__pregunta:hover .faq__texto { text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.2em; }
.faq__icono { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.faq__icono::before,
.faq__icono::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.1875rem;
  margin-top: -0.09375rem;
  border-radius: 0.125rem;
  background: currentColor;
  transition: transform 0.15s ease;
}
.faq__icono::after { transform: rotate(90deg); }
.faq__item[open] .faq__icono::after { transform: rotate(0deg); }
.faq__respuesta { padding: 0 1.5rem 1.5rem 0; }
@media (min-width: 48em) { .faq__respuesta { padding-right: 3.25rem; } }
.faq__respuesta > * + * { margin-top: 0.875rem; }
.faq__respuesta p { max-width: 40rem; text-wrap: pretty; }
.faq__cierre { margin-top: 2rem; }
.faq__vacio { color: var(--gris-texto); }

/* El enlace "FAQ" del pie es corto: sin esto medía 37,6 px de ancho y los pulsables miden 44 px como mínimo en las dos medidas. Los demás
   enlaces del pie ya pasan de 44 px de ancho, así que no cambian. */
.pie__lista a { min-width: var(--toque); }

/* Tarjeta A ligera (13.10.2026): informa dentro de Where to watch y deja que las filas hagan
   la accion. Su minimo reserva el alto antes de que asistente.js quite hidden; el brazo "sin"
   se pone en html desde la cabecera para que nunca llegue a pintarse. */
html[data-xmo-brazo="sin"] .asistente { display: none !important; }
.asistente { display: grid; gap: 0.375rem; min-height: 12rem; padding: 1rem; border: 0.0625rem solid var(--negro); border-radius: var(--radio); font-size: 1.0625rem; line-height: 1.45; }
.asistente[hidden] { display: none; }
/* Con JavaScript la tarjeta reserva su sitio desde la carga (sin saltos); sin JavaScript no ocupa nada */
.xmo-js .asistente[hidden] { display: grid; visibility: hidden; }
.asistente__pais { min-height: 1.2em; color: var(--gris-texto); font-size: var(--texto-pequeno); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.asistente__resultado { font-weight: 800; }
.asistente__detalle { min-height: 1.45em; color: var(--gris-texto); }
.asistente__enlace { min-height: var(--toque); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.operador__info { margin-top: 0.25rem; color: var(--gris-texto); font-size: 1.0625rem; line-height: 1.45; }
.operador--elegido .operador__enlace { border-color: var(--rosa); background: var(--rosa); color: var(--blanco); }
.operador--elegido .operador__enlace:hover { border-color: var(--rosa-hover); background: var(--rosa-hover); }
.asistente__opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.asistente__opciones[hidden] { display: none; }
.asistente__opcion { min-height: var(--toque); padding: 0 1rem; border: 0.0625rem solid var(--negro); border-radius: var(--radio); background: var(--blanco); color: var(--negro); font: inherit; font-size: var(--texto-pequeno); font-weight: 700; cursor: pointer; }
.asistente__opcion[aria-pressed="true"] { background: var(--negro); color: var(--blanco); }
@media (max-width: 29.99875em) { .asistente { min-height: 15rem; } }

/* Conversion v2 P1: salida visible en el flujo, sin capas flotantes ni segundo boton rosa.
   "Not on the list?" es una capsula (16.10.2026, Dani): pildora como las fichas de pais (radio de la mitad de sus 44 px; si el texto
   partiera en dos lineas queda un rectangulo redondeado, no un ovalo) pero sin relleno, con contorno de 2 px en el rosa
   de la marca (el rosa relleno es solo el boton principal de la cabecera), texto en negro (21:1 sobre el blanco de la seccion; contorno e
   icono, 4,96:1, pasan los 3:1 de AA de un control) y un "+" en un circulo a la izquierda que pasa a "-" con P1 abierto (el estado abierto
   lo anuncia el propio summary). Raton encima: el contorno se oscurece (--rosa-hover) y engorda 1 px por dentro; teclado: el anillo de
   siempre (:focus-visible de base.css). Encima, el aire de antes mas el grueso de la linea gris que ya no esta (0,0625 rem): el bloque
   sigue midiendo 61 px (16 + 1 + 44), asi --donde-base de B2 no cambia (a 2560x1440, con la raiz escalada, 0,64 px mas: medido). */
.salida { margin-top: 1.0625rem; }
.salida > summary { display: flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; min-height: var(--toque); padding: 0.3125rem 1.125rem 0.3125rem 0.75rem; border: 0.125rem solid var(--rosa); border-radius: 1.375rem; background: var(--blanco); color: var(--negro); cursor: pointer; font-size: 1rem; font-weight: 700; line-height: 1.2; list-style: none; }
.salida > summary::-webkit-details-marker { display: none; }
.salida > summary:hover { border-color: var(--rosa-hover); box-shadow: inset 0 0 0 0.0625rem var(--rosa-hover); }
.salida__icono { flex: none; width: 1.375rem; height: 1.375rem; color: var(--rosa); }
.salida > summary:hover .salida__icono { color: var(--rosa-hover); }
.salida__icono-vertical { transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease; }
.salida[open] > summary .salida__icono-vertical { transform: scaleY(0); }
/* P1 como tarjeta (16.10.2026, Dani, docs/decisiones.md "P1 sin hueco blanco"): al abrir la capsula, las tarjetas de operadores se
   ocultan (xmo.js, hidden) y P1 ocupa su sitio. Un recuadro con las esquinas de 6 px del tema (--radio) y el gris suave de sus tarjetas
   (#F4F4F4, --gris-suave) sobre el blanco de la seccion, sin borde: los campos blancos con su linea negra destacan dentro. Empieza donde
   empezaba la lista (su mismo margen de arriba, que cambia con el ancho del bloque y en los portatiles bajos) y, en ordenador (desde
   48 em), mide como minimo el alto que la lista reserva (--lista-reservada, xmo.js): abrir y cerrar no mueve nada y no queda blanco
   debajo, porque el contenido va centrado en vertical. Columna de 36 rem como mucho, centrada (con 32 rem la frase de Turquia partia en
   tres lineas y la tarjeta crecia 67 px a 1440x900); relleno igual en los cuatro lados, 5cqi del bloque entre 20 y 32 px (32 a 1440, 20
   en un movil de 412). Jerarquia: titulo de 20 px (800), frase de ayuda en gris de 16 px, etiquetas de 15 px (700) y campos de 44 px; en
   el mensaje, Back, el titular (como el titulo), el mensaje (lo que mide su texto, desde dos lineas) y los botones.
   Sin JavaScript el respaldo lleva el mismo recuadro. Entra en 0,25 s (solo opacidad) y la lista vuelve igual al cerrar. */
.salida__tarjeta, .salida__respaldo { display: grid; align-content: center; gap: 1rem; margin-top: 1.5rem; padding: clamp(1.25rem, 5cqi, 2rem); border-radius: var(--radio); background: var(--gris-suave); }
@container operadores (min-width: 30rem) { .salida__tarjeta, .salida__respaldo { margin-top: 2rem; } }
@media (min-width: 48em) { .salida__tarjeta { min-height: var(--lista-reservada, 0rem); } }
.salida__tarjeta > *, .salida__respaldo > * { width: 100%; max-width: 36rem; margin-inline: auto; }
.salida__cabeza { display: grid; gap: 0.375rem; margin-bottom: 0.5rem; }
.salida__titulo { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.salida__respaldo p, .salida__texto { margin: 0; color: var(--gris-texto); font-size: 1rem; line-height: 1.5; }
.salida__campo { display: grid; gap: 0.5rem; }
.salida__etiqueta { font-size: var(--texto-pequeno); font-weight: 700; line-height: 1.35; }
/* El mensaje es texto para copiar, no un campo que rellenar (16.10.2026, revision de diseno): blanco sobre el gris de la tarjeta con la
   linea gris clara del tema, no la negra de los campos de pais y proveedor (como .b-cierre__mensaje en el cierre). */
.salida__mensaje { width: 100%; min-height: 7.5rem; padding: 0.75rem; border: 0.0625rem solid var(--gris-linea); border-radius: var(--radio); background: var(--blanco); color: var(--negro); font: inherit; font-size: 1rem; line-height: 1.5; resize: none; field-sizing: content; }
/* Desde 30 rem de bloque el mensaje cabe en dos lineas: 4,75 rem son esas dos lineas con su relleno (76 px); donde el navegador sabe
   medir el texto (field-sizing) crece si hace falta una tercera */
@container operadores (min-width: 30rem) { .salida__mensaje { min-height: 4.75rem; } }
.salida__copiar { justify-self: start; min-height: var(--toque); }
/* P1 por pasos (16.10.2026, como el cierre P2 pero sobre claro): la pregunta del proveedor es la etiqueta de su barra y recibe el foco al
   volver con Back; en el mensaje, el titular hace de titulo de la tarjeta. Back mide 44 px de alto (--toque) y la letra no baja de 15 px. */
.salida__paso { display: grid; align-content: start; gap: 1rem; }
.salida__pregunta { margin: 0; font-size: var(--texto-pequeno); font-weight: 700; line-height: 1.35; }
.salida__pregunta.salida__titulo { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.salida__volver { justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--toque); padding: 0; border: 0; background: transparent; color: var(--gris-texto); font: inherit; font-size: var(--texto-pequeno); cursor: pointer; }
.salida__volver:hover { color: var(--negro); }
/* Back pegado a su titular: sus 44 px pulsables ocupan 8 px del hueco de debajo, que es aire (no hay nada que pulsar ahi) */
.salida__tarjeta .salida__volver { margin-bottom: -0.5rem; }
.salida__opciones { width: 100%; }
.salida__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* El anillo de foco solo con teclado (16.10.2026, captura de Dani: el anillo morado alrededor de la capsula tras pulsarla con el raton):
   xmo.js pone .salida--puntero al pulsar con raton o dedo y la quita con Tab, Intro, Esc o las flechas */
.salida--puntero > summary:focus-visible, .salida--puntero .salida__titulo:focus-visible, .salida--puntero .salida__pregunta:focus-visible { outline: none; }
/* Con la tarjeta abierta tampoco se ve la tarjeta A (asistente.js), que habla de la lista */
.donde-ver--salida > [data-asistente] { display: none !important; }
@keyframes salida-entra { from { opacity: 0; } }
.salida[open] > .salida__tarjeta, .operadores--vuelve { animation: salida-entra 0.25s ease-out; }
/* Portatiles bajos (los de base.css 18, donde la lista se aprieta): la lista empieza a 16 px y la tarjeta tambien; relleno de 20 px y
   huecos de 12 px para que la pregunta y el mensaje quepan en el alto reservado (medido: 267 px a 1024x600, 301 a 1443x695, 326 a
   1280x720, 337 a 1024x768, 376 a 1366x768) */
@media (min-width: 64em) and (orientation: landscape) and (min-height: 31.25em) and (max-height: 49.99875em) {
  .salida__tarjeta { gap: 0.75rem; margin-top: 1rem; padding: 1.25rem; }
  .salida__paso { gap: 0.75rem; }
  .salida__cabeza { margin-bottom: 0; }
  /* La etiqueta del mensaje de Turquia y Other (xmo.js) solo para el lector de pantalla: aqui no cabe sin pasar del alto de la lista */
  .salida__etiqueta--mensaje { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* Barra con sugerencias (P1 y cierre A, 14.10.2026): la lista es propia, pegada al campo y con su mismo ancho, borde y fondo; siempre hacia abajo. */
.barra-proveedor { position: relative; width: 100%; }
.barra-proveedor > input { width: 100%; min-height: var(--toque); padding: 0 3rem 0 0.75rem; border: 0.0625rem solid var(--negro); border-radius: var(--radio); background: var(--blanco); color: var(--negro); font: inherit; font-size: 1rem; }
.barra-proveedor > input[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.barra-proveedor__abrir { position: absolute; inset: 0 0 auto auto; display: grid; place-items: center; width: var(--toque); height: var(--toque); border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.barra-proveedor > input:focus-visible + .barra-proveedor__abrir { color: inherit; }
.barra-proveedor__lista { position: absolute; z-index: 5; top: calc(100% - 0.0625rem); left: 0; width: 100%; max-height: 13.75rem; margin: 0; padding: 0; overflow-y: auto; border: 0.0625rem solid var(--negro); border-top-color: var(--gris-linea); border-radius: 0 0 var(--radio) var(--radio); background: var(--blanco); color: var(--negro); list-style: none; }
.barra-proveedor__lista[hidden] { display: none; }
.barra-proveedor__lista li { padding: 0.6875rem 0.75rem; cursor: pointer; overflow-wrap: anywhere; }
.barra-proveedor__lista li[aria-selected="true"], .barra-proveedor__lista li[role="option"]:hover { background: var(--gris-suave); }
.barra-proveedor__otro { border-top: 0.0625rem solid var(--gris-linea); color: var(--gris-texto); }
.barra-proveedor__lista .barra-proveedor__aviso { color: var(--gris-texto); cursor: default; }
/* Contacto del proveedor primero (16.10.2026, decision de Dani; xmo.js, crearAvisoCopia): con el contacto del proveedor elegido,
   "Contact {provider}" es el boton principal del paso, un boton lleno (negro con letra blanca en la tarjeta clara de P1, 21:1; blanco
   con letra negra sobre el cierre) de 48 px de alto como .boton, con la flecha de "se abre aparte" y nada rosa (el rosa relleno es solo de
   la cabecera). Rectangulo de esquinas de 6 px (--radio) como todos los botones de accion de la web (.boton, el Get X-MO de las fichas, el
   de la cabecera); las pildoras son para elegir (fichas de pais y dia) y la capsula (16.10.2026, revision de diseno: dentro de la tarjeta
   convivian campos de 6 px y dos pildoras redondas). "Copy message" queda detras y mas discreto: el mismo boton sin relleno, con un
   contorno fino de 1 px (gris #555 sobre el #F4F4F4 de la tarjeta, 6,9:1; gris #808080 sobre la tarjeta del cierre, 4,85:1) y la misma
   letra (16 px, 700). Sin contacto, Copy message es el principal: en P1 el mismo boton negro (.salida__copiar--principal) y en el cierre
   el boton de contorno blanco de siempre. Raton encima (solo donde hay raton): el negro aclara al #333 de .boton--negro (con color-mix;
   sin color-mix no cambia), el blanco pasa al gris de linea y el de contorno se llena de blanco (P1) o aclara su contorno (cierre). El
   borde transparente del boton lleno se ve en colores forzados.
   Bajo los dos, el aviso de la copia (.aviso-copia): en ordenador su hueco esta siempre reservado (1,5 rem); en movil, desde la primera
   copia (ver abajo). Entra en 0,2 s bajando 4 px y se va en 0,3 s (sin movimiento con movimiento reducido). */
.salida__enlace, .salida__copiar--principal, .b-cierre__contacto { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.625rem 1.375rem 0.625rem 1.5rem; border: 0.125rem solid transparent; border-radius: var(--radio); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background-color 0.15s ease, color 0.15s ease; }
.salida__enlace, .salida__copiar--principal { background: var(--negro); color: var(--blanco); }
.salida__copiar--principal { padding-inline: 1.5rem; }
.salida__enlace-flecha, .b-cierre__contacto-flecha { flex: none; width: 1.125rem; height: 1.125rem; }
.salida__copiar--secundario, .b-cierre__copiar--secundario { min-height: 3rem; padding-inline: 1.375rem; border: 0.0625rem solid; border-radius: var(--radio); background: transparent; font-weight: 700; }
.salida__copiar--secundario { border-color: var(--gris-texto); color: var(--negro); }
/* El raton encima solo donde hay raton: en un movil el toque dejaba la pildora en el color de "encima" al volver de la otra pestana */
@media (hover: hover) {
  .salida__enlace:hover, .salida__copiar--principal:hover { background: color-mix(in srgb, var(--negro) 80%, var(--blanco)); color: var(--blanco); }
  .salida__copiar--secundario:hover { border-color: var(--negro); background: var(--blanco); }
}
.aviso-copia { flex-basis: 100%; display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; margin: 0; color: var(--negro); font-size: var(--texto-pequeno); font-weight: 600; line-height: 1.35; opacity: 0; transform: translateY(-0.25rem); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.aviso-copia--visible { opacity: 1; transform: none; transition-duration: 0.2s; transition-timing-function: ease-out; }
.aviso-copia__icono { flex: none; width: 1.125rem; height: 1.125rem; padding: 0.1875rem; border-radius: 50%; background: var(--negro); color: var(--blanco); }
.aviso-copia--fallo .aviso-copia__icono { display: none; }

/* Conversion v2 P2, cierre A (14.10.2026; vista previa aprobada por Dani): un bloque de 63 rem (1008 px) con la foto de 36 rem (576 px)
   a la izquierda y, a la derecha, el titulo fijo y una pregunta cada vez. El alto lo reserva xmo.js (el del paso mas alto) y en
   ordenador nunca baja de 30 rem (480 px): la foto no cambia de tamano al pasar de un paso a otro. En movil la foto va arriba, a todo
   el ancho y con 16,25 rem (260 px) de alto. Los grises son las variables --cierre-* de base.css. */
.b-cierre { --color-foco: var(--blanco); padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--negro); color: var(--blanco); }
.b-cierre__bloque { display: grid; grid-template-columns: 36rem minmax(0, 1fr); max-width: 63rem; margin-inline: auto; border: 0.0625rem solid var(--cierre-linea); background: var(--cierre-tarjeta); }
.b-cierre__media { position: relative; min-height: 30rem; overflow: hidden; background: var(--cierre-hueco); }
.b-cierre__media > .foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.b-cierre__media > .foto--vacia { background: var(--cierre-hueco); }
.b-cierre__media > .foto--vacia .foto__pie { color: var(--gris-oscuro-texto); }
.b-cierre__contenido { display: grid; align-content: start; gap: 1.125rem; min-width: 0; padding: 1.875rem 1.875rem 1.625rem; font-size: 0.9375rem; line-height: 1.5; }
.b-cierre h2 { margin: 0 0 0.25rem; color: inherit; font-size: 1.6875rem; font-weight: 900; line-height: 1.18; letter-spacing: 0.05em; text-transform: uppercase; }
.b-cierre__paso { display: grid; align-content: start; gap: 0.875rem; }
.b-cierre__pregunta { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.b-cierre__pregunta:focus { outline: none; }
.b-cierre__pregunta:focus-visible { outline: 0.125rem solid var(--blanco); outline-offset: 0.25rem; }
.b-cierre__texto { margin: 0; color: var(--gris-oscuro-texto); }
.b-cierre__paises { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.b-cierre .chip { min-height: var(--toque); padding: 0.5rem 0.8125rem; border: 0.0625rem solid var(--cierre-borde); border-radius: 0; background: transparent; color: var(--blanco); font-size: 0.875rem; }
.b-cierre .chip:hover { border-color: var(--blanco); background: transparent; }
.b-cierre .chip[aria-pressed="true"] { border-color: var(--rosa); background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 0.0625rem var(--rosa); }
.b-cierre__operadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
/* La tarjeta lleva tambien .operador__enlace (el gancho de medicion.js): aqui se quita lo de aquel boton (area de rejilla, alineado, pildora) */
.b-cierre .b-cierre__operador { grid-area: auto; justify-self: stretch; display: block; min-height: 0; max-width: none; padding: 0.75rem 0.875rem; border: 0.0625rem solid var(--cierre-borde); border-radius: 0; background: transparent; color: var(--blanco); font-size: inherit; font-weight: 400; line-height: 1.4; text-align: left; text-decoration: none; white-space: normal; }
.b-cierre a.b-cierre__operador:hover, .b-cierre a.b-cierre__operador:active { border-color: var(--blanco); background: transparent; color: var(--blanco); }
.b-cierre__operador b { display: block; font-size: 1rem; }
.b-cierre__operador > span { display: block; margin-top: 0.1875rem; color: var(--gris-oscuro-texto); font-size: 0.875rem; }
.b-cierre__operador em { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: 0.8125rem; font-style: normal; font-weight: 700; }
.b-cierre__operador em svg { width: 0.875rem; height: 0.875rem; }
.b-cierre__secundario, .b-cierre__volver, .b-cierre__enlace { justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--blanco); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
/* Back a 15 px (16.10.2026, revision de diseno): la vista previa lo tenia a 13, por debajo de lo mas pequeno del tema (--texto-pequeno)
   y del Back de P1 */
.b-cierre__volver { color: var(--gris-oscuro-texto); font-size: var(--texto-pequeno); text-decoration: none; }
.b-cierre__volver:hover { color: var(--blanco); }
.b-cierre__mensaje { margin: 0; padding: 0.75rem 0.875rem; border: 0.0625rem solid var(--cierre-linea); background: var(--cierre-caja); color: var(--blanco); }
.b-cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* Contacto primero (16.10.2026): el boton blanco principal y Copy message en contorno fino (ver .salida__enlace, arriba), uno debajo
   de otro y del mismo ancho, el del mas ancho: en los 372 px de texto del cierre en ordenador no caben juntos ni con un nombre corto
   (Contact Odido, 197 + 168 px medidos) y partidos en dos filas de ancho distinto se veian desordenados. Los botones van en la primera
   columna (la de su ancho) y el aviso de la copia ocupa las dos, asi tiene todo el ancho del texto y no ensancha los botones al aparecer.
   En movil, una sola columna y los dos a todo el ancho. Letra de 16 px como Copy message sin contacto (.boton) y como en P1. */
.b-cierre__acciones--contacto { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.b-cierre__acciones--contacto > a, .b-cierre__acciones--contacto > button { grid-column: 1; }
.b-cierre__acciones--contacto > .aviso-copia { grid-column: 1 / -1; }
.b-cierre .b-cierre__contacto { padding-inline: 1.25rem 1.125rem; background: var(--blanco); color: var(--negro); font-size: 1rem; }
.b-cierre__copiar--secundario { padding-inline: 1.25rem; border-color: var(--gris-apagado-texto); color: var(--blanco); font-size: 1rem; }
@media (hover: hover) {
  .b-cierre .b-cierre__contacto:hover { background: var(--gris-linea); color: var(--negro); }
  .b-cierre__copiar--secundario:hover { border-color: var(--blanco); }
}
.b-cierre .aviso-copia { color: var(--blanco); }
.b-cierre .aviso-copia__icono { background: var(--blanco); color: var(--negro); }
.b-cierre__aviso { flex-basis: 100%; color: var(--gris-oscuro-texto); font-size: 0.8125rem; }
.b-cierre .barra-proveedor { max-width: 23.125rem; }
.b-cierre .barra-proveedor > input { border-color: var(--cierre-borde); border-radius: 0; background: var(--cierre-caja); color: var(--blanco); font-size: 0.9375rem; }
.b-cierre .barra-proveedor > input::placeholder { color: var(--gris-oscuro-texto); opacity: 1; }
.b-cierre .barra-proveedor > input[aria-expanded="true"] { border-color: var(--blanco); }
.b-cierre .barra-proveedor__lista { border-color: var(--blanco); border-top-color: var(--cierre-linea); border-radius: 0; background: var(--cierre-caja); color: var(--blanco); }
.b-cierre .barra-proveedor__lista li[aria-selected="true"], .b-cierre .barra-proveedor__lista li[role="option"]:hover { background: var(--cierre-activa); }
.b-cierre .barra-proveedor__otro { border-top-color: var(--cierre-linea); color: var(--gris-oscuro-texto); }
.b-cierre .barra-proveedor__lista .barra-proveedor__aviso { color: var(--gris-oscuro-texto); }

/* Boton flotante "Watch X-MO on your TV" (14.10.2026; tarjeta B de _material/entregas/boton-nudge/vista-previa.html, aprobada por Dani,
   con el pulso de la A): tarjeta negra de 320 px a 24 px del borde derecho y 110 px sobre el inferior (en movil, de 12 a 12 px y 90 px
   sobre el borde). Sin colores nuevos: el borde gris (#333 en la vista previa) es el del cierre oscuro (--cierre-linea, #2B2B2B) y la
   sombra, el negro del tema al 45 % (color-mix; un navegador sin color-mix la omite y la tarjeta se ve igual, sin sombra). Entra
   subiendo 24 px en 0,5 s y un anillo rosa de 3 px se abre y se desvanece dos veces y se para; si se esconde (Where to watch o el
   cierre a la vista) y vuelve, solo entra, sin anillo (nudge.js pone .xmo-nudge--vuelve). Mientras se ve, el pie gana debajo lo que
   ocupa la tarjeta (nudge.js mide --xmo-nudge-hueco) para no tapar sus enlaces. */
.xmo-nudge { position: fixed; z-index: 40; right: max(1.5rem, env(safe-area-inset-right)); bottom: calc(6.875rem + env(safe-area-inset-bottom)); width: 20rem; max-width: calc(100vw - 3rem); padding: 1.125rem 1.125rem 1rem; border: 0.0625rem solid var(--cierre-linea); border-radius: 1rem; background: var(--negro); color: var(--blanco); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--negro) 45%, transparent); animation: xmo-nudge-entrar 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.xmo-nudge::after { content: ""; position: absolute; inset: -0.4375rem; z-index: -1; border: 0.1875rem solid var(--rosa); border-radius: 1.375rem; opacity: 0; animation: xmo-nudge-pulso 1.6s ease-out 0.6s 2; pointer-events: none; }
.xmo-nudge--vuelve::after { animation: none; }
.xmo-nudge__fila { display: flex; gap: 0.875rem; align-items: flex-start; }
.xmo-nudge__icono { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; place-items: center; border-radius: 0.75rem; background: var(--rosa); }
.xmo-nudge__icono svg { width: 1.625rem; height: 1.625rem; }
.xmo-nudge__contenido { min-width: 0; }
.xmo-nudge__titulo { margin: 0.125rem 2.25rem 0.25rem 0; font-size: 1.125rem; line-height: 1.2; font-weight: 800; }
.xmo-nudge__texto { margin: 0; color: var(--gris-oscuro-texto); font-size: 0.875rem; line-height: 1.45; }
.xmo-nudge__ir { display: inline-flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; margin-top: 0.875rem; border: 0; border-radius: 1.5rem; background: var(--rosa); color: var(--blanco); font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; }
.xmo-nudge__ir:hover { background: var(--rosa-hover); }
.xmo-nudge__cerrar { position: absolute; top: 0.375rem; right: 0.375rem; display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.xmo-nudge__cerrar svg { width: 1.5rem; height: 1.5rem; }
.xmo-nudge__ir:focus-visible, .xmo-nudge__cerrar:focus-visible { outline: 0.125rem solid var(--blanco); outline-offset: 0.125rem; }
@keyframes xmo-nudge-entrar { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes xmo-nudge-pulso { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
html.xmo-nudge-visible .pie { padding-bottom: var(--xmo-nudge-hueco, 18rem); }
.boton--claro { border-color: var(--blanco); background: transparent; color: var(--blanco); }
.boton--claro:hover { border-color: var(--blanco); background: var(--blanco); color: var(--negro); }

@media (max-width: 47.99875em) {
  .salida__copiar, .b-cierre__acciones > .boton, .salida__enlace, .b-cierre__contacto { width: 100%; justify-content: center; }
  .b-cierre__acciones--contacto { grid-template-columns: minmax(0, 1fr); }
  /* El aviso de la copia sin hueco hasta la primera copia (xmo.js, crearAvisoCopia; 16.10.2026, revision de diseno): bajo los botones
     quedaban 56 px de blanco frente a los 20 del relleno de arriba. Al pulsar el contacto la tarjeta crece hacia abajo y ya no encoge. */
  .aviso-copia--sin-usar { display: none; }
  .b-cierre__bloque { grid-template-columns: 1fr; }
  .b-cierre__media { min-height: 0; height: 16.25rem; }
  .b-cierre h2 { font-size: 1.375rem; }
  .b-cierre__contenido { gap: 1rem; padding: 1.5rem 1.25rem 1.375rem; }
  .b-cierre .chip { padding: 0.375rem 0.6875rem; font-size: 0.8125rem; }
  .b-cierre__secundario, .b-cierre__volver, .b-cierre__enlace { min-height: var(--toque); }
  .b-cierre__operadores { grid-template-columns: 1fr; }
  .b-cierre .barra-proveedor { max-width: none; }
  .xmo-nudge { right: max(0.75rem, env(safe-area-inset-right)); bottom: calc(5.625rem + env(safe-area-inset-bottom)); left: max(0.75rem, env(safe-area-inset-left)); width: auto; max-width: none; }
}
/* Cierre en tableta (16.10.2026): con la foto de 576 px al lado, a 768 px de ancho la columna del texto se quedaba en unos 68 px y el
   titulo salia de la pantalla (medido: 787 px de pagina a 768). Hasta 64 em el bloque va en una columna como en movil, centrado y de
   40 rem como mucho, con la foto arriba a todo su ancho y 20 rem de alto; la letra y los botones siguen como en ordenador.
   Desde 64 em (1024 px, 322 px de texto) vuelven las dos columnas de la vista previa. */
@media (min-width: 48em) and (max-width: 63.99875em) {
  .b-cierre__bloque { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .b-cierre__media { min-height: 0; height: 20rem; }
}
/* Pantallas bajas (un movil girado, unos 390 de alto): la tarjeta baja a 1 rem del borde para no quedar pegada a la cabecera */
@media (max-height: 30em) {
  .xmo-nudge { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .salida__icono-vertical { transition: none; }
  .xmo-nudge, .xmo-nudge::after { animation: none; }
  .aviso-copia, .aviso-copia--visible { transform: none; transition: none; }
  .salida[open] > .salida__tarjeta, .operadores--vuelve { animation: none; }
}