/* ══════════════════════════════════════════════════════════════════════
   LOS FILTROS DE /tienda — hoja de una sola página
   ─────────────────────────────────────────────────────────────────────
   Va aparte y no dentro de estilo.css a propósito: esa hoja la están
   reescribiendo otros procesos a la vez, y estas reglas sólo valen en una
   página. base.html la carga la última (bloque `hoja_pagina`), así que a
   igualdad de peso gana ésta, que es la que conoce el marcado nuevo.

   Aquí NO se toca la tarjeta de producto: ni su caja, ni su suelo, ni los
   puntos de color. Eso lo está cambiando otro flujo. Lo único que se añade
   de la tarjeta es la línea «También en …», que es navegación y no color.

   Todo usa las variables de tema.css, así que las dos caras —clara y
   oscura— salen solas y el interruptor de la cabecera las cambia sin que
   esta hoja se entere.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. la cabecera de la tienda ───────────────────────────────────── */
.encabezado--tienda{max-width:66ch}
.encabezado--tienda .lede{margin-bottom:10px}
/* El tipo y la fecha del estreno, debajo del titular: es el dato que
   contesta «¿ya ha salido o me da tiempo?», y no cabe dentro del <h1>. */
.ft-sub{margin:-4px 0 12px; font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--luz-3)}
/* EL AVISO DE «NO OFICIAL». No es letra chica escondida: es el texto que
   sostiene poder nombrar películas ajenas (art. 37 Ley 17/2001, uso
   referencial), y vive donde vive el filtro. Contraste de cuerpo, no de
   pie de página. */
.ft-aviso{font-size:.82rem; line-height:1.55; color:var(--luz-3);
  border-left:2px solid var(--borde-vivo); padding-left:12px; margin:0}
.ft-aviso a{color:var(--haz); text-decoration:underline;
  text-underline-offset:2px}

/* ── 2. los ejes ───────────────────────────────────────────────────── */
.ft{margin:clamp(20px,3vw,30px) 0 0; display:block}
.ft-eje{margin-bottom:14px}
.ft-rot{display:flex; align-items:baseline; gap:10px; margin:0 0 8px;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--luz-3)}
.ft-rot span{color:var(--luz-2); font-weight:600}
.ft-rot i{font-style:normal; opacity:.7}

/* LA TIRA. Se desliza con el dedo y no envuelve: 31 estrenos envueltos en
   un móvil de 390 px son ocho filas de fichas, o sea el mismo problema que
   los cuatro desplegables de antes con otra forma. `scroll-snap` hace que
   cada ficha quede pegada al borde, que es lo que enseña que hay más a la
   derecha sin necesidad de una flecha. */
.ft-tira{display:flex; gap:8px; list-style:none; margin:0;
  padding:2px 4px 12px 0; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:thin; overscroll-behavior-x:contain;
  /* El degradado del borde derecho dice «sigue»: sin él, en un móvil sin
     barra de desplazamiento visible, la fila parece terminada. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.ft-tira::-webkit-scrollbar{height:4px}
.ft-tira::-webkit-scrollbar-thumb{background:var(--borde-vivo); border-radius:2px}
.ft-tira li{flex:0 0 auto; scroll-snap-align:start}
/* La fila de prendas es corta (cinco opciones): ahí sí se envuelve, que en
   escritorio queda mejor que una barra de desplazamiento de tres píxeles. */
.ft-tira--corta{flex-wrap:wrap; overflow:visible; padding-bottom:2px;
  -webkit-mask-image:none; mask-image:none}

.ft-chip{display:flex; flex-direction:column; gap:2px; padding:8px 13px;
  border:1px solid var(--borde); background:var(--sala-2); color:var(--luz-2);
  text-decoration:none; transition:border-color .15s, background .15s, color .15s;
  max-width:16rem}
.ft-chip b{font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  font-weight:600; letter-spacing:.02em; line-height:1.25; color:var(--luz);
  /* Dos líneas como mucho: «Los Juegos del Hambre: Amanecer en la cosecha»
     es un título de 45 caracteres y no puede estirar la fila entera. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.ft-chip i{font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--luz-3); white-space:nowrap}
.ft-chip:hover{border-color:var(--haz); color:var(--haz)}
.ft-chip:hover b{color:var(--haz)}
.ft-chip.ft-on{background:var(--campo); border-color:var(--campo)}
.ft-chip.ft-on b{color:var(--campo-tinta)}
.ft-chip.ft-on i{color:var(--campo-apunte)}

/* La opción simple (las prendas): una sola línea, con el número dentro.
   EL NÚMERO ES EL FILTRO. Un filtro sin número es una apuesta: lo que hacía
   el desplegable viejo, que ofrecía «Bolsas» y «Accesorios» y las dos
   llevaban a una página vacía. Lo que da cero ya no se pinta siquiera. */
.ft-chip--simple{flex-direction:row; align-items:baseline; gap:7px;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 14px}
.ft-chip--simple em{font-style:normal; font-size:.92em; opacity:.62;
  font-variant-numeric:tabular-nums}
.ft-chip--simple.ft-on{color:var(--campo-tinta)}
.ft-chip--simple.ft-on em{opacity:.8}

/* ── 3. la barra: cuenta, lo puesto y el cajón ─────────────────────── */
/* ── POR QUÉ HAY UNA LÍNEA SOBRE `body` EN LA HOJA DE UNA PÁGINA ──────
   Porque `position:sticky` estaba MUERTO en toda la web y no se veía.
   estilo.css declara `.cabecera{position:sticky; top:0}` y hasta tiene una
   animación —`body.rodando .cabecera-int{min-height:56px}`— para cuando se
   queda pegada. Medido aquí con Playwright: al bajar 2.000 px la cabecera
   estaba en top=-2000, o sea que nunca se pega y esa animación no la ve
   nadie.
   La causa es `body{overflow-x:hidden}` (estilo.css, bloque `body`). Poner
   overflow-x a `hidden` obliga al navegador a calcular overflow-y como
   `auto`, y eso convierte al <body> en un contenedor de desplazamiento
   propio. Como el body no se desplaza —lo que se desplaza es el <html>—, su
   «scrollport» nunca se mueve y ningún hijo pegajoso llega a pegarse jamás.
   `clip` recorta igual el desbordamiento horizontal pero NO crea contenedor
   de desplazamiento, que es exactamente la diferencia que hace falta.
   Va aquí y no en estilo.css a propósito: esa hoja la está reescribiendo
   otro proceso, y esta línea sólo viaja en /tienda. Si algún día se arregla
   en el sitio entero, esta se puede borrar sin tocar nada más.
   En un Safari anterior al 16 el valor no se entiende, se descarta la
   declaración, y queda el `hidden` de siempre: la barra no se pega y ya
   está. Nada se rompe. */
body{overflow-x:clip}

.ft-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde); margin-bottom:clamp(20px,3vw,32px);
  /* Debajo de la cabecera, no encima: 57 px es lo que mide encogida
     (`body.rodando`), que es como está cuando esto se pega. */
  position:sticky; top:57px; z-index:40; background:var(--sala)}
.ft-barra .ft-cuenta{margin:0; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--luz-2); white-space:nowrap}

/* LO QUE HAY PUESTO, CON SU «×». Antes no había forma de quitar un filtro
   salvo volver a poner el desplegable en «Todas», o sea acordarse de qué
   había tocado. Cada ficha vuelve al estado SIN ELLA, no a la tienda
   entera: quitar la película de «Cronos + Tazas» deja «Tazas». */
.ft-puestos{display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:0;
  padding:0; flex:1 1 auto; min-width:0}
.ft-puesto{display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
  border:1px solid var(--borde-vivo); background:var(--sala-3);
  color:var(--luz-2); text-decoration:none;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; max-width:15rem}
.ft-puesto span:first-child{overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.ft-puesto i{font-style:normal; font-size:1.05rem; line-height:1; opacity:.6;
  margin-top:-2px}
.ft-puesto:hover{border-color:var(--haz); color:var(--haz)}
.ft-puesto:hover i{opacity:1}
.ft-puesto--todos{background:transparent; border-style:dashed}

/* ── 4. el cajón (fuente y orden) ──────────────────────────────────────
   Es un <details>: abre y cierra sin JavaScript, con ratón y con teclado.
   Dentro no hay un solo `onchange="this.form.submit()"`, que es lo que
   hacía que cada toque recargase 605 KB en un móvil. Se elige lo que se
   quiera y se aplica UNA vez, con el botón que además dice cuántos
   diseños van a salir. */
.ft-cajon{margin-left:auto; position:relative}
.ft-cajon>summary{list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--borde-vivo); background:var(--sala-2);
  color:var(--luz); font-family:"IBM Plex Mono",monospace; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.ft-cajon>summary::-webkit-details-marker{display:none}
.ft-cajon>summary::after{content:"▾"; font-size:.8em; opacity:.6}
.ft-cajon[open]>summary::after{content:"▴"}
.ft-cajon>summary:hover{border-color:var(--haz); color:var(--haz)}
/* El punto que avisa de que hay algo puesto ahí dentro, sin abrirlo. */
.ft-cajon>summary em{font-style:normal; color:var(--campo); font-size:1.1em;
  line-height:0}

.ft-cajon-caja{position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  width:min(22rem,86vw); background:var(--sala); border:1px solid var(--borde-vivo);
  box-shadow:var(--sombra-2); padding:16px}
.ft-cajon-cab{display:none}
.ft-cajon-cuerpo{display:contents}
.ft-cajon-grupo{border:0; padding:0; margin:0 0 14px}
.ft-cajon-grupo legend{padding:0; margin-bottom:7px;
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--luz-3)}
.ft-opcion{display:flex; align-items:center; gap:9px; padding:7px 6px;
  cursor:pointer; border-radius:2px; line-height:1.3}
.ft-opcion:hover{background:var(--filete-suave)}
.ft-opcion input{flex:none; accent-color:var(--campo); width:15px; height:15px}
.ft-opcion span{flex:1 1 auto; font-size:.86rem; color:var(--luz-2)}
.ft-opcion em{font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:.66rem; color:var(--luz-3); font-variant-numeric:tabular-nums}
.ft-cajon-pie{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--borde); padding-top:12px}
.ft-cajon-pie .boton{flex:1 1 auto; text-align:center}
.ft-cajon-limpiar{font-family:"IBM Plex Mono",monospace; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--luz-3)}
.ft-cajon-limpiar:hover{color:var(--haz)}

/* ── 5. la tarjeta: sólo la línea nueva ────────────────────────────── */
/* «También en taza, sudadera y lámina». Existe porque la tarjeta pasó a ser
   el DISEÑO y no el SKU: sin esta línea, quien ve la camiseta no sabe que
   el mismo dibujo va en taza, y antes lo sabía porque la tienda le servía
   las seis piezas seguidas (y 374 tarjetas para 21 dibujos). */
.ft-tambien{margin:2px 0 0; font-family:"IBM Plex Mono",monospace;
  font-size:.6rem; letter-spacing:.06em; color:var(--luz-3); line-height:1.4}

/* ── 6. el pie legal de la tienda ──────────────────────────────────── */
.ft-legal{max-width:70ch; margin:clamp(34px,5vw,56px) 0 0;
  padding-top:16px; border-top:1px solid var(--borde);
  font-size:.76rem; line-height:1.6; color:var(--luz-3)}
.ft-legal a{color:var(--haz); text-decoration:underline;
  text-underline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL — pensado a 390 px, que es donde estaba roto
   ─────────────────────────────────────────────────────────────────────
   Lo de antes: cuatro <select> apilados que se comían ~600 px y dejaban la
   primera pieza por debajo de la pantalla y media. Lo de ahora: dos filas
   que se deslizan y una barra, y la primera pieza entra en la primera
   pantalla.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ft-eje{margin-bottom:10px}
  /* Que la tira sangre hasta el borde: cortar una ficha por la mitad en el
     borde derecho es lo que dice «esto se arrastra». */
  .ft-tira{margin-right:calc(-1 * var(--margen,16px)); padding-right:16px}
  .ft-chip{max-width:13.5rem}

  /* En móvil la cabecera lleva el buscador en su propia fila y no encoge:
     120 px medidos a 390 px de ancho. */
  .ft-barra{gap:8px; top:120px}
  .ft-barra .ft-cuenta{order:1}
  .ft-cajon{order:2; margin-left:auto}
  .ft-puestos{order:3; flex:1 0 100%}

  /* EL CAJÓN COMO HOJA INFERIOR. En una pantalla de 390 px un cajón
     colgando de un botón tapa justo lo que se está filtrando; una hoja que
     sube desde abajo deja el pulgar donde ya está. Sigue sin JavaScript:
     es el mismo <details>, con otra caja. */
  .ft-cajon[open]{position:static}
  /* EL VELO TIENE QUE TAPAR TAMBIÉN LA CABECERA, y por eso hay que subir la
     BARRA y no sólo el velo: `.ft-barra` es pegajosa con z-index 40, o sea
     que crea contexto de apilamiento propio, y todo lo que hay dentro —el
     cajón incluido— se ordena DENTRO de ese 40. Por muchos 110 que se le
     pongan al velo, contra la cabecera (z-index 100 en el contexto raíz)
     compite el 40 de la barra y pierde. Se veía clavado: la marquesina se
     oscurecía y el buscador se quedaba encendido encima de la hoja.
     `:has()` sólo sube la barra mientras el cajón está abierto; donde no se
     entienda, el velo se queda debajo de la cabecera y ya está. */
  .ft-barra:has(.ft-cajon[open]){z-index:130}
  .ft-cajon[open]::before{content:""; position:fixed; inset:0; z-index:110;
    background:rgba(0,0,0,.45)}
  /* LA HOJA, EN TRES PIEZAS QUE NO SE PISAN: cabecera quieta, opciones que
     se desplazan, botón quieto abajo. Antes la caja entera se desplazaba y
     el botón iba `sticky`; a mitad de recorrido el botón se comía la última
     opción de «Orden» y no había manera de tocarla. */
  .ft-cajon-caja{position:fixed; inset:auto 0 0 0; top:auto; z-index:120;
    width:100%; max-height:82vh; display:flex; flex-direction:column;
    border:0; border-top:1px solid var(--borde-vivo);
    padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .ft-cajon-cuerpo{display:block; flex:1 1 auto; overflow-y:auto;
    overscroll-behavior:contain; min-height:0; margin:0 -4px; padding:0 4px}
  .ft-cajon-cab{display:block; margin-bottom:10px}
  /* El botón de aplicar, pegado abajo y siempre visible, con el número
     dentro: es lo que contesta «¿y esto cuántos deja?» antes de tocar. */
  .ft-cajon-pie{flex:none; background:var(--sala);
    margin:0 -16px calc(-14px - env(safe-area-inset-bottom));
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .ft-opcion{padding:11px 6px}          /* 44 px de alto real para el dedo */
  .ft-legal{font-size:.72rem}
}

/* Quien haya pedido menos movimiento no tiene por qué sufrir el arrastre
   suave de la tira. */
@media (prefers-reduced-motion:reduce){
  .ft-tira{scroll-behavior:auto}
  .ft-chip{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   LOS BLOQUES POR PELÍCULA — PELÍCULA A LA IZQUIERDA, PRODUCTOS EN FILA
   ─────────────────────────────────────────────────────────────────────
   Con las tarjetas apiladas la tienda medía 69 pantallas en escritorio y 132
   en un móvil de 390 px (522 tarjetas). En fila, el alto de la página deja de
   depender de cuántos productos tenga cada película: son 32 filas, y punto.
   Carrusel PROPIO, no el `.carrusel-pista` de la portada: aquél es una fila
   suelta con scroll-snap y flechas de 40 px; éste va pegado a una columna de
   película y hay treinta y dos en la misma página.
   ══════════════════════════════════════════════════════════════════════ */
.bo{display:grid; grid-template-columns:224px minmax(0,1fr); gap:24px;
  align-items:start; margin:0 0 calc(var(--paso)*.75);
  padding-top:calc(var(--paso)*.5); border-top:1px solid var(--filete)}
.bo:first-of-type{border-top:0; padding-top:0}

.bo-cab{position:sticky; top:0; min-width:0}
/* La tira se desplaza DENTRO de la columna de la película; si creciera, la
   rejilla de dos columnas se ensancharía y arrastraría la página. */
.bo-cab .tdis, .bo-cab .tdis-tira{max-width:100%; min-width:0}
.bo-cartel{display:block; line-height:0; border-radius:.5rem; overflow:hidden;
  background:var(--banda); box-shadow:0 1px 2px rgba(40,34,20,.12);
  margin-bottom:.6rem}
.bo-cartel img{display:block; width:100%; height:auto; aspect-ratio:2/3;
  object-fit:cover}
.bo-cartel--falta{display:flex; align-items:center; justify-content:center;
  aspect-ratio:2/3; padding:14px; text-align:center; text-decoration:none;
  background:linear-gradient(160deg,var(--banda),var(--hueso,var(--banda)));
  border:1px solid var(--filete)}
.bo-cartel--falta span{font-size:.9rem; line-height:1.25; font-weight:600;
  color:var(--luz-2); opacity:.75}
.bo-tipo{margin:0 0 .2rem; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--haz)}
.bo-tit{margin:0; font-size:1.15rem; line-height:1.15; letter-spacing:-.01em}
.bo-tit a{color:inherit; text-decoration:none}
.bo-tit a:hover{text-decoration:underline; text-underline-offset:3px}
.bo-n{margin:.3rem 0 0; font-size:.8rem; opacity:.7}
.bo-mas{display:inline-block; margin-top:.45rem; font-size:.85rem;
  font-weight:600; color:var(--haz); text-decoration:none}
.bo-mas:hover{text-decoration:underline}

/* LA PISTA. `overflow-x:auto` y nada más: con dedo, rueda y teclado se
   desplaza sin una línea de JavaScript. `overscroll-behavior-x:contain` evita
   que al llegar al final del carrusel el gesto se lleve la página entera —o,
   en un trackpad de Mac, dispare el «atrás» del navegador. */
/* EL ANCHO DE TARJETA, MEDIDO CONTRA ECLIPSEANDO Y NO A OJO. Sus tarjetas de
   tienda miden ~330 px a 1440 px de ventana (4 columnas), y las de aquí
   estaban a 236: la MISMA foto, con el mismo encuadre —medido: camiseta 95 %
   de alto y 91 % de ancho del lienzo, contra su 89 % y 92 %—, se veía un 40 %
   más pequeña en pantalla. Eso es lo que hacía que «se marcara» menos: no el
   marco ni el fondo, el tamaño. */
.bo-pista{display:grid; grid-auto-flow:column; grid-auto-columns:318px;
  gap:14px; list-style:none; margin:0; padding:0 2px 6px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin}
.bo-pista > *{scroll-snap-align:start}
.bo-pista::-webkit-scrollbar{height:8px}
.bo-pista::-webkit-scrollbar-thumb{background:var(--filete-fuerte);
  border-radius:4px}
.bo-pista::-webkit-scrollbar-track{background:transparent}

/* Las flechas SON UNA COMODIDAD DE RATÓN: nacen `hidden` y sólo las enciende
   el guion. Sin JavaScript no queda un botón muerto en la página, y la pista
   se sigue desplazando igual. */
.bo-flechas{display:flex; gap:6px; margin-top:.7rem}
.bo-flechas button{width:34px; height:34px; display:grid; place-items:center;
  cursor:pointer; background:transparent; border:1px solid var(--borde-vivo);
  color:var(--luz-2); font-size:.9rem; border-radius:.3rem; transition:.16s}
.bo-flechas button:hover:not(:disabled){border-color:var(--haz); color:var(--haz)}
.bo-flechas button:disabled{opacity:.25; cursor:default}

@media (max-width:899.98px){
  /* La película pasa a banda horizontal encima de su fila: con 210 px de
     columna fija más una pista, por debajo de 900 px no queda ancho para que
     se vea una tarjeta entera. */
  .bo{grid-template-columns:minmax(0,1fr); gap:.8rem}
  .bo-cab{position:static; display:grid;
    grid-template-columns:64px minmax(0,1fr) auto; gap:.7rem;
    align-items:center}
  .bo-cartel{grid-row:1 / span 4; margin-bottom:0}
  .bo-tipo{grid-column:2; align-self:end; margin:0}
  .bo-tit{grid-column:2; font-size:1.05rem}
  .bo-n{grid-column:2; margin:.15rem 0 0; font-size:.76rem}
  .bo-mas{grid-column:2; align-self:start; margin-top:.2rem; font-size:.8rem}
  .bo-flechas{grid-column:3; grid-row:1 / span 4; margin:0}
  /* LA FILA DE DISEÑOS, A TODO EL ANCHO Y EN SU PROPIA LÍNEA.
     Sin esto no tenía columna asignada en la rejilla de la cabecera, se
     colocaba automáticamente en una COLUMNA NUEVA y ensanchaba el bloque
     entero: la tienda se desplazaba en horizontal en un móvil de 360 px.
     Lo cazó la prueba nº 9 de la batería; a ojo no se ve, porque las
     tarjetas ya se desplazan solas dentro de su carrusel. */
  .bo-cab .tdis{grid-column:1 / -1; grid-row:5; margin-top:.4rem; min-width:0}
  .bo-pista{grid-auto-columns:min(74vw,318px)}
}
@media (max-width:599.98px){
  .bo-flechas{display:none}     /* con el dedo sobran */
  .bo-pista{grid-auto-columns:min(76vw,300px)}
}

/* ══════════════════════════════════════════════════════════════════════
   LOS TRES EJES, EN DESPLEGABLES
   ─────────────────────────────────────────────────────────────────────
   Iban abiertos y el del estreno enseñaba los 31 títulos seguidos: media
   pantalla de lista antes de la primera camiseta. Ahora son tres botones
   en una fila y la lista vive dentro.
   SIN JAVASCRIPT: son <details>, y dentro cada opción es un enlace con su
   dirección. Mismo lenguaje visual que el cajón de «Fuente y orden», que
   ya estaba resuelto y probado con teclado.
   ══════════════════════════════════════════════════════════════════════ */
.ft-ejes{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.ft-des{position:relative}

.ft-des>summary{list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:baseline; gap:8px; padding:9px 14px;
  border:1px solid var(--borde-vivo); background:var(--sala-2);
  color:var(--luz); white-space:nowrap; max-width:min(20rem,86vw)}
.ft-des>summary::-webkit-details-marker{display:none}
.ft-des>summary::after{content:"▾"; font-size:.75em; opacity:.6;
  margin-left:auto; padding-left:2px}
.ft-des[open]>summary::after{content:"▴"}
.ft-des>summary:hover{border-color:var(--haz)}
/* El rótulo del eje, pequeño; el VALOR PUESTO, legible. Un desplegable
   cerrado que sólo pone «Qué» obliga a abrirlo para saber si filtra. */
.ft-des-rot{font-family:"IBM Plex Mono",monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--luz-3);
  flex:none}
.ft-des>summary b{font-weight:600; font-size:.9rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
/* Con filtro puesto el botón se marca, para que se vea desde lejos cuál de
   los tres está tocado sin leer los tres. */
.ft-des:has(.ft-on:not([href$="/tienda"]))>summary{border-color:var(--campo)}

.ft-des-caja{position:absolute; left:0; top:calc(100% + 8px); z-index:60;
  width:min(24rem,90vw); background:var(--sala);
  border:1px solid var(--borde-vivo); box-shadow:var(--sombra-2); padding:8px}
.ft-des--ancho .ft-des-caja{width:min(30rem,92vw)}
.ft-lista{list-style:none; margin:0; padding:0}
/* La lista de 31 estrenos se desplaza DENTRO del desplegable en vez de
   estirar la página: el desplegable abierto no puede volver a ser el muro
   que se acaba de quitar. */
.ft-lista--larga{max-height:min(26rem,60vh); overflow-y:auto;
  overscroll-behavior:contain}
.ft-op{display:flex; align-items:center; gap:10px; padding:9px 10px;
  text-decoration:none; color:var(--luz-2); font-size:.88rem;
  border-radius:.3rem}
.ft-op:hover{background:var(--filete-suave); color:var(--luz)}
.ft-op.ft-on{background:var(--campo); color:var(--campo-tinta); font-weight:600}
.ft-op>span{flex:1 1 auto; min-width:0}
.ft-op i{display:block; font-style:normal; font-size:.72rem; opacity:.65;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.04em}
.ft-op em{flex:none; font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:.7rem; opacity:.6}
.ft-op.ft-on em, .ft-op.ft-on i{opacity:.8}

@media (max-width:599.98px){
  .ft-ejes{gap:6px}
  /* Tres botones en 390 px: el del estreno se lleva la fila entera porque
     es el que lleva el título largo dentro. */
  .ft-des{flex:1 1 auto}
  .ft-des--ancho{flex:1 0 100%}
  .ft-des>summary{width:100%; padding:10px 12px}
  .ft-des-caja{width:min(24rem,94vw)}
}

/* El hueco del cartel que aún no ha llegado: papel viejo con el título
   compuesto encima. Tiene la misma proporción 2:3 que un cartel real, así que
   la fila no baila cuando una película lo tiene y la de al lado no. */
.bo-cartel--falta{display:flex; align-items:center; justify-content:center;
  aspect-ratio:2/3; padding:14px; text-align:center; text-decoration:none;
  background:linear-gradient(160deg,var(--banda),var(--hueso,var(--banda)));
  border:1px solid var(--filete)}
.bo-cartel--falta span{font-size:.9rem; line-height:1.25; font-weight:600;
  color:var(--luz-2); opacity:.75}
@media (max-width:599.98px){ .bo-cartel--falta{padding:6px}
  .bo-cartel--falta span{font-size:.6rem} }

/* ══════════════════════════════════════════════════════════════════════
   NO SE PINTA LO QUE NO SE VE
   ─────────────────────────────────────────────────────────────────────
   MEDIDO en un móvil de gama media (CPU × 4): /tienda monta 7.631 nodos y
   tarda 2.149 ms en cargar. Son 32 bloques de película y en pantalla caben
   uno o dos: el navegador estaba calculando el diseño y pintando los otros
   treinta para nada.

   `content-visibility:auto` le dice que se salte el trabajo de los bloques
   que están fuera de la pantalla y lo haga cuando lleguen. `contain-
   intrinsic-size` es la altura que debe SUPONER mientras tanto —sin ella la
   barra de desplazamiento saltaría al ir bajando—, y sale de medir un bloque
   real: 560 px en escritorio, 720 en móvil, donde la cabecera va en banda.

   El primero NO se salta: es el que se ve al abrir, y aplicarle esto sería
   retrasar justo lo único que hay que pintar ya.
   ══════════════════════════════════════════════════════════════════════ */
.bo{content-visibility:auto; contain-intrinsic-size:auto 560px}
.bo:first-of-type{content-visibility:visible}
@media (max-width:899.98px){ .bo{contain-intrinsic-size:auto 720px} }

/* La navegación de páginas de la tienda. Paginación de verdad y no scroll
   infinito: el enlace tiene dirección, se comparte y vuelve con el botón de
   atrás — y el rastreador puede seguirlo, que con scroll infinito no. */
.paginas-tienda{display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap; margin:calc(var(--paso)*.8) 0}
.paginas-cuenta{font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  letter-spacing:.08em; color:var(--luz-3)}

/* ══════════════════════════════════════════════════════════════════════
   EL DESPLEGABLE DE FILTRO, EN TABLETA
   ─────────────────────────────────────────────────────────────────────
   MEDIDO a 768 px: el panel de «En qué» abre en x=436 y mide 24 rem, así que
   acababa en 820 y se salía 52 px de la pantalla. Se veía cortado por la
   derecha y las opciones de ese borde no se podían pulsar.
   En tableta y móvil el panel deja de colgar de SU botón y pasa a ocupar el
   ancho de la fila de filtros: es lo que hace cualquier tienda en pantalla
   estrecha y elimina el problema de raíz en vez de empujar el panel.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .ft-ejes{position:relative}
  .ft-des{position:static}
  .ft-des-caja, .ft-des--ancho .ft-des-caja{
    left:0; right:0; width:auto; max-width:none}
}

/* ── PAGO RÁPIDO EN EL CARRITO ──────────────────────────────────────────────
   Va destacado y por encima de «rellenar los datos yo», porque salta ocho
   campos de formulario y lleva directo a donde están Bizum y Apple Pay. */
.pago-rapido { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }
.pago-rapido__pais select { width: 100%; }
.boton--rapido { font-weight: 700; }
.pago-rapido__nota { opacity: .78; margin: 0; }
.o-bien { text-align: center; opacity: .55; margin: .8rem 0 .4rem;
          text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.boton--secundario { background: transparent; border: 1px solid currentColor; }

/* ── PAGO DE UN TOQUE EN LA FICHA ───────────────────────────────────────────
   Va encima de los botones normales. Nace oculto y sólo aparece si el
   navegador tiene un monedero de verdad. */
.pago-toque { margin: 0 0 .9rem; }
.pago-toque__titulo { text-align: center; font-weight: 600; font-size: .92rem;
                      margin: 0 0 .55rem; }
.pago-toque__o { text-align: center; opacity: .5; margin: .7rem 0 .1rem;
                 text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }
#pago-rapido-botones { min-height: 0; }

/* Los iconos de pago: dicen en medio segundo lo que el párrafo dice en dos
   líneas. Sin logotipos de marca para no meter ficheros ajenos en la web. */
.pago-metodos { list-style: none; display: flex; flex-wrap: wrap; gap: .32rem;
                padding: 0; margin: .5rem 0 0; justify-content: center; }
.pago-metodos li { font-size: .63rem; letter-spacing: .04em; padding: .2rem .42rem;
                   border: 1px solid currentColor; border-radius: 3px; opacity: .5; }

/* PISTA SIN CABECERA = REJILLA, NO CARRUSEL.
   `.bo` reserva 224px para el cartel de la película y deja el resto al
   carrusel. Pero la cabecera se pinta con `{% if g.obra %}{% elif grupos|length
   > 1 %}`, y una vista filtrada a una obra de marca viva falla LAS DOS: sin
   título (va al grupo sin nombre) y con un solo grupo. Entonces la pista es
   hija única, cae en la columna de 224px y desborda 2.226px de tarjetas
   recortadas —el corte vertical que se veía—. Y como las flechas viven DENTRO
   de `.bo-cab`, tampoco había mando para salir de ahí.

   Un carrusel sin mando es la pieza equivocada para un catálogo filtrado: eso
   es una rejilla. `:only-child` lo detecta sin `:has()`, así que funciona
   también donde `:has()` no llega. */
.bo > .bo-pista:only-child{
  grid-column:1 / -1;
  grid-auto-flow:row; grid-auto-columns:auto;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));
  gap:26px 14px;
  overflow-x:visible; scroll-snap-type:none; padding-bottom:0}