/* ─────────────────────────────────────────────────────────────────────────────
   pitchmi.css — el sistema visual de la web. Único fichero de estilo.

   Es el mismo sistema que `lib/theme.tsx` en la app: papel, tinta y UN SOLO
   acento. Los tokens de abajo son literalmente los de la app, y los contrastes
   están medidos contra el fondo real sobre el que se pinta cada uno, no
   supuestos (ver `herramientas/medir-web.py`).

   Tres cosas que ordenan esta hoja y conviene no deshacer:

   · **No hay tarjetas.** `superficie` da 1,11 sobre `papel`, así que una caja
     blanca sobre el fondo no dibuja su propio canto. Lo que ordena la página
     son el filete y el aire, igual que en la app.
   · **Lo único saturado son las fotos de los planes.** La interfaz va en gris
     y lila; la app trata de lo que hay fuera, no de sí misma.
   · **Nada de degradados, sombras blandas, halos ni grano.** Se retiraron en
     agosto de 2026 y no vuelven por la puerta de atrás de la web.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Los tokens de `lib/theme.tsx`, LIGHT. */
  --papel: #f2f3f4;
  --superficie: #ffffff;
  --tinta: #16181f;
  --tinta-suave: #565a66;
  --apoyo: #8b8f9a;      /* 2,91 sobre papel: SÓLO decorativo */
  --lila: #65559c;
  --sobre-lila: #ffffff;
  --lila-claro: #e9e5f3;
  --hueco: #dbd8e6;
  --trazo: #8e87b2;
  --borde: #d8dade;

  /* La serif de la casa: marca, titulares y subtítulos. Nada más. */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  /* La sans neutra: cuerpo y apoyos. Nada más. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* La escala de la app: marca 30 · titular 38/46 · subtítulo 24 · cuerpo
     18/26 · apoyo 15. En pantalla grande el titular respira más. */
  --ancho: 68rem;
  --aire: clamp(3.5rem, 7vw, 6.5rem);

  color-scheme: light dark;
}

/* La noche. Mismas claves, valores de `DARK`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #14161c;
    --superficie: #1e212a;
    --tinta: #edeef1;
    --tinta-suave: #9aa0ae;
    --apoyo: #767c8a;
    --lila: #b9aee0;
    --sobre-lila: #14161c;   /* encima de un lila claro, el texto va OSCURO */
    --lila-claro: #2a2740;
    --hueco: #332e4a;
    --trazo: #7e76a8;
    --borde: #2e323c;
  }
}

/* Y el interruptor de la esquina, que gana sobre el sistema. Existe porque en
   la app el modo es una decisión de la persona, no del móvil. */
:root[data-tema="noche"] {
  --papel: #14161c;
  --superficie: #1e212a;
  --tinta: #edeef1;
  --tinta-suave: #9aa0ae;
  --apoyo: #767c8a;
  --lila: #b9aee0;
  --sobre-lila: #14161c;
  --lila-claro: #2a2740;
  --hueco: #332e4a;
  --trazo: #7e76a8;
  --borde: #2e323c;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.125rem;      /* 18 */
  line-height: 1.45;        /* 26 */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--lila-claro); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--lila);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lo que sólo tiene que oír un lector de pantalla. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--lila);
  color: var(--sobre-lila);
  text-decoration: none;
  transition: top .15s;
}
.saltar:focus { top: 1rem; }

/* ── La marca ──────────────────────────────────────────────────────────── */
/*
   El símbolo y el nombre van juntos y siempre igual. El nombre en versales con
   tracking amplio, que es lo que pide el sistema nuevo; la bajada, en cursiva.
   El tracking sólo se permite aquí y a este cuerpo: por debajo de 15 px
   mayúsculas espaciadas son el patrón prohibido.
*/
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  text-decoration: none;
  color: var(--tinta);
}

.marca svg {
  width: 1.55em; height: 1.55em;
  color: var(--lila);
  flex: none;
}

.marca b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-indent: .18em;        /* devuelve el tracking que sobra a la derecha */
  line-height: 1.2;
}

.bajada {
  font-family: var(--serif);
  font-style: italic;
  color: var(--tinta-suave);
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */

.tira {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera .tira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
}

.cabecera nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: .95rem;
}

.cabecera nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding: .35rem 0;
}
.cabecera nav a:hover { color: var(--tinta); }

@media (max-width: 46rem) {
  .cabecera nav a.esconde { display: none; }
}

/* El interruptor de modo: 44 de alto, sin caja de color. */
.modo {
  appearance: none;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tinta-suave);
  border-radius: 999px;
  width: 44px; height: 34px;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.modo:hover { color: var(--tinta); border-color: var(--trazo); }
.modo svg { width: 17px; height: 17px; }

/* ── Secciones: el filete y el aire ────────────────────────────────────── */

section { padding-block: var(--aire); }

section + section { border-top: 1px solid var(--borde); }

/* El rótulo de sección. NO va en mayúsculas diminutas espaciadas: eso está
   prohibido en toda la casa. Va en la serif, en cursiva, a 19. */
.rotulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1875rem;      /* 19 */
  line-height: 1.35;
  color: var(--tinta-suave);
  margin: 0 0 2rem;
  display: flex;
  align-items: baseline;
  gap: .9rem;
}

.rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 6vw, 3.75rem);   /* 38 → 60 */
  line-height: 1.14;
  letter-spacing: -.01em;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem); /* 28 → 38 */
  line-height: 1.2;
}

h3 {
  font-size: 1.3125rem;                        /* 21 */
  line-height: 1.3;
}

p { margin: 0 0 1.1rem; max-width: 38em; }

/* Un titular y su párrafo no van pegados: el aire entre los dos es lo que los
   separa, porque aquí no hay cajas que lo hagan. */
h1 + p { margin-top: 1.5rem; }
h2 + p { margin-top: 1.1rem; }

.suave { color: var(--tinta-suave); }

/* La letra pequeña: aclaraciones, avisos, el copyright.
   **Va en `tinta-suave`, no en `apoyo`.** `apoyo` da 2,91 sobre el papel claro
   y 4,32 sobre el nocturno: no llega a 4,5:1 ni en uno ni en otro, así que sólo
   valdría para metadatos que se pueden perder de vista. Se midió la web entera
   y resultó que **las cuatro cosas escritas en pequeño eran información
   necesaria** —«el horario es el del sitio, no el tuyo», dónde está el botón de
   apuntarse—, así que en esta web `apoyo` no lo usa nadie. El token se queda
   declarado porque es parte del sistema de la app, no porque haga falta aquí. */
.menor { color: var(--tinta-suave); font-size: .9375rem; }

/* ── Portada ───────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(3rem, 8vw, 5.5rem); }

/* El titular a la izquierda y la muestra de horarios a la derecha. Por debajo
   de 62rem se apilan: la muestra es un apoyo, no compite con el titular. */
/* La entrada guarda su medida de lectura.
   44rem es exactamente lo que ocupaba antes como columna izquierda de la
   rejilla de dos (68rem de tira menos las 19rem del lateral y el hueco), así
   que el titular y el párrafo no cambian de sitio: lo único que se ha ido de
   ahí es la cuenta atrás. */
.entrada { max-width: 44rem; }

/* La muestra: cuatro sitios reales con su horario. Sin caja: la sostienen el
   filete de arriba y las líneas entre filas, como todo lo demás. */
.muestra { border-top: 1px solid var(--borde); padding-top: 1.1rem; }

.muestra .rotulo { font-size: 1rem; margin-bottom: .4rem; }

.muestra a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--borde);
  text-decoration: none;
}
.muestra a:hover b { color: var(--lila); }

.muestra b {
  display: block;
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.3;
}

.muestra .linea {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;      /* 13 */
  color: var(--tinta-suave);
  /* Un horario partido puede ocupar cuatro líneas; aquí caben dos y el resto
     se resume con puntos suspensivos. El horario entero está en la ficha. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muestra .estado {
  display: inline-block;
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--lila);
}
.muestra .estado[data-cerrado] { color: var(--tinta-suave); font-weight: 400; }
.muestra .estado::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .4rem;
  vertical-align: .1em;
}

.hero .bajada {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);   /* 20 → 24 */
  display: block;
  margin-bottom: 1.4rem;
}

.hero p { font-size: 1.1875rem; }

/* La línea de datos concretos. Es información, así que va en tinta suave y no
   en `apoyo`, que no llega a 4,5:1 en claro. */
.datos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* Sin puntos de separación entre datos: cuando la lista se parte en dos líneas
   —y en un móvil se parte siempre— el punto se queda huérfano al principio de
   la segunda. Los separa el aire, que es lo que separa todo aquí. */
.datos li { display: flex; align-items: baseline; }

/* Las descargas. Botón de 46 como máximo, sin mayúsculas, ajustado al texto. */
.descargas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.2rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 46px;
  padding-inline: 1.6rem;
  border-radius: 999px;
  background: var(--lila);
  color: var(--sobre-lila);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: .9375rem;      /* 15 */
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: color-mix(in srgb, var(--lila) 88%, var(--tinta)); }

.boton.segundo {
  background: transparent;
  color: var(--tinta);
  border-color: var(--borde);
}
.boton.segundo:hover { border-color: var(--trazo); background: transparent; }

/* Aquí había `.boton svg`, que dimensionaba la manzana y el triángulo de Play
   dibujados a mano dentro de los botones de descarga. Los dos se retiraron
   —Apple y Google prohíben sus logos redibujados— y ningún botón lleva ya
   icono. Ver el comentario largo en `plantillas/portada.mjs`. */

/* ── El símbolo, contado ───────────────────────────────────────────────── */
/*
   La historia se cuenta siempre igual, en la web y en la tienda: nadie deduce
   esto mirando la forma, así que si no se escribe no existe.
*/
.simbolo {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.simbolo figure { margin: 0; color: var(--lila); }
.simbolo svg { width: 100%; height: auto; }

.simbolo blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.34;
  text-wrap: pretty;
}

@media (max-width: 40rem) {
  .simbolo { grid-template-columns: 1fr; }
  .simbolo figure { width: 8rem; }
}

/* ── Lo que hace la app: filas separadas por filete ────────────────────── */

.filas { border-top: 1px solid var(--borde); }

.fila {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--borde);
  align-items: start;
}

.fila h3 { margin: 0; }
.fila p { margin: 0; color: var(--tinta-suave); }

@media (max-width: 44rem) {
  .fila { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
}

/* ── La rejilla de planes ──────────────────────────────────────────────── */
/*
   Es la del portfolio de la app, y con la misma razón: las alturas se repiten
   cada cuatro (168 · 116 · 132 · 152) para que el ritmo se reconozca en vez de
   parecer un error, y la foto se recorta por el centro. La armonía viene de que
   unas tarjetas sean altas y otras bajas, NO de que cada foto se vea entera —
   eso ya se probó tres veces en la app y las tres quedó peor.
*/
.rejilla {
  columns: 3;
  column-gap: 1.15rem;
}

@media (max-width: 60rem) { .rejilla { columns: 2; } }
@media (max-width: 30rem) { .rejilla { columns: 1; } }

.plan {
  break-inside: avoid;
  margin-bottom: 1.9rem;
  display: block;
  text-decoration: none;
  color: inherit;
}

.plan .foto {
  position: relative;
  background: var(--hueco);      /* lo que todavía no se ve: masa, no vacío */
  border-radius: 14px;
  overflow: hidden;
}

.plan .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan:nth-child(4n + 1) .foto { height: 210px; }
.plan:nth-child(4n + 2) .foto { height: 145px; }
.plan:nth-child(4n + 3) .foto { height: 165px; }
.plan:nth-child(4n + 4) .foto { height: 190px; }

.plan h3 {
  font-size: 1.0625rem;      /* 17 */
  line-height: 1.3;
  margin: .7rem 0 .2rem;
}
.plan:hover h3 { color: var(--lila); }

/* Una sola línea por tarjeta: el horario, el precio o la categoría. Lo demás
   espera a la ficha, igual que en la app. */
.plan .linea {
  font-size: .9375rem;
  color: var(--tinta-suave);
  margin: 0;
  /* Una sola línea por tarjeta, como en la app. Un horario partido de siete
     días ocupa cuatro y convierte la galería en un listado; el horario entero
     está a un toque, en la ficha. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «ABIERTO AHORA»: el único sitio, con el botón, donde se usa el acento. */
.abierto {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: var(--lila);
  font-weight: 600;
}
.abierto::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── El símbolo como cuenta atrás ──────────────────────────────────────── */
/*
   Las dos masas no son aquí un logotipo, son un dato: lo que queda arriba y lo
   que ya ha caído. `vacio` es el relleno de lo que todavía no se ve y `lleno`
   es la tinta; los dos están medidos —`hueco` da 1,26 sobre el papel, que es lo
   que hace que se lea como masa y no como un fantasma—.
*/
.cuenta-atras {
  border-top: 1px solid var(--borde);
  padding-top: 1.1rem;
  /* Es una banda debajo de la entrada, no un lateral. Ver el comentario en
     `plantillas/portada.mjs`. */
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.cuenta-atras .rotulo { font-size: 1rem; margin-bottom: 1.2rem; }
.cuenta-atras .menor { margin: 1.2rem 0 0; }

/* El tope es lo que impide que la banda empeore al ensancharse.
   Sin él, en una tira de 68rem cada cuenco tendría un hueco de 258 px: cuatro
   figuras pequeñas y separadísimas, que es peor que el lateral de antes. Con
   28rem cada una se dibuja a ~99 px —contra los 65 que medía en escritorio y
   los 77 del móvil— y la fila se lee como una secuencia sin volverse el sujeto
   de la página: con 34rem salían a 125 y ya pesaban más que el titular. */
.momentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  max-width: 28rem;
}

.momentos figure { margin: 0; text-align: center; }

.momentos figcaption {
  margin-top: .55rem;
  font-size: .75rem;
  line-height: 1.25;
  color: var(--tinta-suave);
}

.reloj { width: 100%; height: auto; display: block; }
.reloj .vacio { fill: var(--hueco); }
.reloj .lleno { fill: var(--lila); }

/* ── Los ejemplos de cada prueba ───────────────────────────────────────── */
/*
   Van en la serif y en cursiva, no en `apoyo`: son ejemplos de verdad —«el
   cielo desde tu ventana»— y lo que hacen es explicar la fila de al lado, así
   que tienen que leerse. `apoyo` no llega a 4,5:1 en ninguno de los dos modos.
*/
.ejemplos {
  font-family: var(--serif);
  font-style: italic;
  color: var(--tinta-suave);
  margin: .5rem 0 0;
}

/* ── La tira de portadas ───────────────────────────────────────────────── */
/*
   Va a sangre: `width: 100vw` con el margen negativo que la saca de `.tira`.
   `100vw` y no `100%` porque el padre está centrado con un ancho máximo, así
   que un 100 % se quedaría en la columna.

   **El alto es fijo y el ancho lo pone la foto**, no al revés: en la app una
   portada se ve entera (`lib/proporcion.ts`) y aquí pasa lo mismo. Cortarlas a
   un cuadrado sería más ordenado y diría algo falso de la app.

   `gap: 3px` y no cero: pegadas, dos fotos con el mismo cielo se leen como
   una sola. Y no lleva pie ni titular — no explica nada, es el color.
*/
.portadas {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--hueco);
}
.portadas::-webkit-scrollbar { display: none; }

.portadas img {
  flex: 0 0 auto;
  height: clamp(150px, 20vw, 240px);
  width: auto;
  display: block;
}

/* ── Las pantallas de la app ───────────────────────────────────────────── */
/*
   Son reconstrucciones dibujadas con los tokens de `lib/theme.tsx`
   (`herramientas/web-imagenes.py`), no fotos de un móvil: así el modo claro y
   el oscuro de la web y de la app dicen lo mismo, y una captura no envejece en
   silencio cuando se toca una pantalla.

   El canto va en `borde` y no en `trazo`: la pantalla la dibuja su propio
   contenido, no un contorno, y un canto a 3:1 alrededor de cinco láminas
   pesaría más que lo de dentro. Es la misma decisión que las tarjetas del
   perfil.
*/
.con-pantalla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.pantalla { margin: 0; }

.pantalla img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--borde);
  border-radius: 22px;
}

/* En el móvil la pantalla va debajo y sin estirarse a todo el ancho: a 390 px
   una lámina de 780 se leería como un móvil dentro de un móvil. */
@media (max-width: 52rem) {
  .con-pantalla { grid-template-columns: 1fr; }
  .con-pantalla .pantalla { max-width: 17rem; margin-inline: auto; }
}

/* `al-reves` sólo cambia el orden en escritorio; apilada, el texto va siempre
   primero — quien baja leyendo no puede encontrarse la imagen sin su frase. */
@media (min-width: 52.0625rem) {
  .al-reves .pantalla { order: -1; }
}

/* ── El buscador (queda por si vuelve un listado) ──────────────────────── */

.buscador { margin: 2rem 0 0; max-width: 30rem; }

.buscador input {
  width: 100%;
  height: 46px;
  padding: 0 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:focus { border-color: var(--lila); }

.buscador .cuenta { margin: .6rem 0 0; min-height: 1.4em; }

/* Una tarjeta escondida por el filtro no puede seguir ocupando su hueco en la
   columna: sin esto, `hidden` deja el aire y la rejilla queda con agujeros. */
.plan[hidden] { display: none; }

/* ── Categorías ────────────────────────────────────────────────────────── */

.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0; margin: 0;
  list-style: none;
}

.categorias a {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  height: 44px;
  padding-inline: 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  text-decoration: none;
  color: var(--tinta);
  font-size: .9375rem;
  line-height: 42px;
}
.categorias a:hover { border-color: var(--trazo); }
.categorias b { color: var(--tinta-suave); font-weight: 400; }

/* ── La ficha de un plan ───────────────────────────────────────────────── */

.ficha { padding-top: clamp(2rem, 5vw, 3.5rem); }

.ficha .migas {
  font-size: .9375rem;
  color: var(--tinta-suave);
  margin-bottom: 1.4rem;
}
.ficha .migas a { text-decoration: none; }
.ficha .migas a:hover { text-decoration: underline; }

.ficha h1 { font-size: clamp(2rem, 4.6vw, 2.875rem); }

.portada {
  margin: 2rem 0 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--hueco);
  /* 16/9 y no 3/2: a todo el ancho de la columna, 3/2 son 725 px de foto y el
     resto de la ficha se cae por debajo del pliegue. */
  aspect-ratio: 16 / 9;
}
.portada img { width: 100%; height: 100%; object-fit: cover; }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .7rem;
  margin-top: .7rem;
}
.galeria img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: var(--hueco);
}

/* Los datos del plan, en filas con filete: sin cajas y sin cápsulas de color. */
.datos-plan {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--borde);
}

.datos-plan > div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: .3rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--borde);
}

.datos-plan dt {
  color: var(--tinta-suave);
  font-size: .9375rem;
}
.datos-plan dd { margin: 0; }

@media (max-width: 34rem) {
  .datos-plan > div { grid-template-columns: 1fr; }
}

/* El horario semanal. La fila de hoy va en tinta plena; las demás, suaves.
   Y la columna se estrecha a propósito: con el día pegado al margen izquierdo y
   la hora al derecho de una tira de 1088 px, el ojo pierde el renglón. */
.horario { margin: 0; max-width: 34rem; }
.horario div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .28rem 0;
  color: var(--tinta-suave);
}
.horario div.hoy { color: var(--tinta); }
.horario dt { font-variant-numeric: tabular-nums; }
.horario dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* El enlace al sitio: subrayado además del color, y sin caja. Quien no perciba
   el tono tiene que saber igual que se puede pulsar. */
.enlace-web {
  color: var(--lila);
  text-decoration: underline;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}

.descripcion {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  white-space: pre-line;
  max-width: 38em;
}

/* ── Legales: texto largo y poco más ───────────────────────────────────── */

.texto { max-width: 42rem; padding-block: var(--aire); }
.texto h2 { margin-top: 2.8rem; font-size: 1.625rem; }
.texto h3 { margin-top: 1.8rem; }
.texto ul { padding-left: 1.2rem; color: var(--tinta-suave); }
.texto li { margin-bottom: .5rem; }
.texto a { color: var(--lila); text-decoration: underline; text-underline-offset: .18em; }

/* ── La ficha de un reto ───────────────────────────────────────────────── */

.ficha-reto { padding-top: clamp(2rem, 5vw, 3.5rem); }

.ficha-reto .migas {
  font-size: .9375rem;
  color: var(--tinta-suave);
  margin: 0 0 1.6rem;
}
.ficha-reto .migas a { text-decoration: none; color: var(--lila); }
.ficha-reto .migas a:hover { text-decoration: underline; }

.ficha-reto h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  /* La columna se estrecha para el titular y no para la foto: un título de
     ocho palabras a 68rem se lee de una punta a la otra de la pantalla. */
  max-width: 22ch;
}

.ficha-reto .cuando {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  color: var(--tinta-suave);
}

/* La portada, entera. `width` con `height: auto` y nada más: cualquier
   `aspect-ratio` aquí sería recortar, que es lo que la app no hace. El tope de
   alto es para una foto muy vertical —9:16 es lo que sale de un móvil— que si
   no ocuparía dos pantallas ella sola. */
.portada-reto {
  margin: 2rem 0 0;
  max-width: 45rem;
}
.portada-reto img {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
  object-position: left top;
  display: block;
  border-radius: 18px;
  background: var(--hueco);
}

.ficha-reto .detalle { margin-top: 1.6rem; max-width: 42rem; }

/* La regla de la clase: lo que hay que saber antes de apuntarse. Va tras un
   filete y no dentro de una caja — lo que ordena esta página es la línea y el
   aire, como en la app. */
.ficha-reto .regla {
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
  max-width: 42rem;
  color: var(--tinta-suave);
}

.ficha-reto .menor { margin-top: 1.2rem; max-width: 38rem; }

.que-es-esto p { max-width: 42rem; }
.que-es-esto a { color: var(--lila); }

/* ── Pie ───────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--borde);
  padding-block: 3rem 4rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

.pie .tira {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie .marca b { font-size: .95rem; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.perdida {
  min-height: 60vh;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding-block: var(--aire);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}