/* WeekIn — landing pública.
 *
 * Mismo sistema que la app ("tinta y papel cuadriculado", ver DESIGN.md en la
 * raíz del repo): papel tibio, tinta de bolígrafo, y el marigold reservado con
 * avaricia. Aquí la regla del marigold se lleva al extremo: en toda la página
 * solo lo llevan los DOS botones de "Probar la demo". El cuadrante terminado se
 * marca en salvia, que en este sistema significa "cobertura completa" — es el
 * semántico correcto, no una decoración.
 *
 * La página entera es una hoja cuadriculada: la trama de 24 px del fondo es la
 * misma retícula sobre la que se apoyan las secciones.
 */

:root {
  --papel: #fbfaf8;
  --hoja: #ffffff;
  --tinta: #1c2230;
  --muted: #666e7a;
  --linea: #e6e9ef;
  --marigold: #e8a33d;
  --salvia: #4c9a6f;
  /* La salvia en versión oscura, para TEXTO sobre fondo claro: la pura se queda
     en 3,2:1 y no llega a AA. Es la variante `justo-ink` de la app. */
  --salvia-ink: #286242;
  /* Y la clara, para lo mismo pero sobre la sección en negativo: ahí la oscura
     no se ve y la pura se queda corta. */
  --salvia-claro: #6fbf92;

  /* La sección en negativo: la tinta de siempre como fondo, un gris de papel
     apagado para el texto secundario y sus propias líneas (las claras
     desaparecen sobre oscuro). */
  --tinta-panel: #232a3a;
  --papel-muted: #a8b0be;
  --linea-oscura: #333c50;

  /* Colores de tienda: la misma paleta que el cuadrante de la app
     (TURNO_HUES en frontend/src/lib/store-colors.ts). */
  --tienda-0: 200 36% 50%;
  --tienda-1: 146 30% 40%;
  --tienda-2: 268 30% 52%;

  --ancho: 1120px;
  --celda: 26px; /* ancho de una franja de 30 min */
  --fila: 22px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--papel);
  /* La trama del papel: 24 px, igual que la utilidad .paper-grid de la app. */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--tinta);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 4.4px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--tinta);
  color: var(--papel);
  padding: 12px 20px;
  z-index: 20;
}
.saltar:focus {
  left: 0;
}

.columna {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Barra superior ─────────────────────────────────────────────────────── */

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

.barra-interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 14px 24px;
  transition: padding 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.barra-enlace,
.pie-enlace {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.barra-enlace:hover,
.pie-enlace:hover {
  border-bottom-color: var(--tinta);
}

/* La barra, cuando la portada ya no está en pantalla: se aprieta y saca el
   botón de la demo. La página mide cinco pantallas y el botón vivía solo en la
   primera y en la última; en medio están las tres secciones que convencen.
   Sale con `max-width` (y no apareciendo de golpe) para que el hueco se abra
   empujando a "Entrar", que es lo que hace que se note sin dar un salto. */
.barra-acciones {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Con el nombre de la barra delante a propósito: .cta va más abajo en el
   fichero y, a igualdad de peso, ganaría ella. */
.barra .cta-barra {
  font-size: 0.8125rem;
  padding-block: 9px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  /* Sin esto no se cierra del todo: un elemento flex no baja de su ancho de
     contenido aunque le pongas max-width. */
  min-width: 0;
  max-width: 0;
  padding-inline: 0;
  margin-left: 0;
  opacity: 0;
  transition:
    max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    padding-inline 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease,
    background-color 0.2s ease;
}

.barra-compacta .cta-barra {
  max-width: 12rem;
  padding-inline: 18px;
  margin-left: 20px;
  opacity: 1;
}

.barra-compacta .barra-interior {
  padding-block: 9px;
}

.barra-compacta .barra {
  box-shadow: 0 10px 24px -22px rgb(28 34 48 / 0.5);
}

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

.portada {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 72px 24px 88px;
  display: grid;
  gap: 48px;
}

/* El botón de calcular vive en portada-texto pero se traslada, con un
   transform, hasta encima de la hoja de más abajo (otro hijo del mismo
   grid): sin esto pintaría DEBAJO de ella, que va después en el DOM. */
.portada-texto {
  z-index: 1;
}

.titular {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 18ch;
}

/* El subrayado a mano bajo "hecho": un trazo, como quien marca la palabra en la
   hoja. Va en SALVIA y no en marigold por dos motivos que apuntan al mismo
   sitio: el marigold está reservado a los dos botones de "Probar la demo" (una
   acción, un acento), y en este sistema la salvia significa exactamente
   "hecho / cobertura completa" — que es lo que dice la palabra que subraya. */
.titular em {
  font-style: normal;
  position: relative;
  display: inline-block;
}

/* El trazo se DIBUJA, de izquierda a derecha, justo después de que la línea
   termine de subir: es el gesto de marcar la palabra en la hoja. `pathLength=1`
   normaliza el camino, así que no hace falta medirlo con JavaScript. */
.trazo {
  position: absolute;
  left: -2%;
  bottom: -0.1em;
  width: 104%;
  height: 0.28em;
  overflow: visible;
}

.trazo path {
  fill: none;
  stroke: color-mix(in srgb, var(--salvia) 65%, transparent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazar 0.7s ease-out 0.85s forwards;
}

/* Cada línea del titular sube desde debajo de su propia línea base. El recorte
   lo hace la línea, no el texto: por eso hacen falta los dos <span>. */
.linea {
  display: block;
  overflow: hidden;
}

.linea > span {
  display: block;
  animation: subir 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.linea:nth-child(2) > span {
  animation-delay: 0.12s;
}

@keyframes subir {
  from {
    transform: translateY(105%);
  }
}

@keyframes trazar {
  to {
    stroke-dashoffset: 0;
  }
}

.entradilla {
  font-size: 1.125rem;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 56ch;
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

/* Los dos "Probar la demo" son ENLACES a demo.{dominio} (antes eran botones que
   no llevaban a ninguna parte), así que la clase trae lo que un <a> necesita
   para verse como un botón: sin subrayado y como caja, o el relleno vertical no
   empujaría la línea. `.cta-barra` ya lo arrastraba por su cuenta. */
.cta {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  background-color: var(--marigold);
  border: none;
  border-radius: 4.4px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}
.cta:hover {
  background-color: color-mix(in srgb, var(--marigold) 90%, var(--tinta));
}
.cta:active {
  transform: scale(0.98);
}

.cta-nota {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}

/* ── La hoja del cuadrante ──────────────────────────────────────────────── */

.hoja {
  margin: 0;
  background-color: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}

.hoja-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea);
}

/* Los seis días. Apagados mientras no hay cuadrante que mirar; el de la vista
   va en tinta llena, como iba el rótulo único que había antes. */
.dias {
  display: flex;
  gap: 2px;
}

.dia {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4.4px;
  padding: 4px 9px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.dia:hover:not(:disabled):not(.dia-activo) {
  background-color: var(--papel);
  border-color: var(--linea);
}
.dia:disabled {
  cursor: default;
  opacity: 0.45;
}

.dia-activo {
  background-color: var(--tinta);
  color: var(--papel);
}
.dia-activo:disabled {
  opacity: 1;
}

.hoja-semana {
  font-size: 0.875rem;
  color: var(--muted);
}

.hoja-reloj {
  margin-left: auto;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.progreso {
  height: 2px;
  background-color: var(--linea);
}

/* Crece con scaleX, no con width: así va por el compositor y no rehace el
   layout de la hoja en cada día que se completa. */
.progreso-barra {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--tinta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El velo va sobre ESTE contenedor y no sobre .rejilla-caja: la caja lleva
   scroll horizontal, y ahí dentro el botón se iría de viaje con el scroll. */
.lienzo {
  position: relative;
}

.rejilla-caja {
  overflow-x: auto;
  padding: 16px 18px 8px;
  transition:
    opacity 0.4s ease,
    filter 0.4s ease;
}

/* Antes de calcular se ve el cuadrante, pero apagado: dice "aquí va a salir
   esto" sin enseñarlo del todo. */
.lienzo:has(.velo:not([hidden])) .rejilla-caja {
  opacity: 0.3;
  filter: blur(1.5px);
}

.velo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--hoja) 92%, transparent) 45%,
    color-mix(in srgb, var(--hoja) 35%, transparent) 100%
  );
}
.velo[hidden] {
  display: none;
}

/* En tinta y no en marigold a propósito: el marigold es de "Probar la demo",
   que es la acción que vale dinero. Esta enciende el juguete. */
.calcular {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--papel);
  background-color: var(--tinta);
  border: none;
  border-radius: 4.4px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(28 34 48 / 0.18);
  transition: background-color 0.2s ease;
  /* Late para que apetezca tocarlo: es el único botón de la portada que no
     espera a que lo encuentres, sale a tu encuentro. Se para solo con
     :active y con :hover (el gesto de la persona manda sobre el suyo). */
  animation: latido 2.1s ease-in-out infinite;
}
.calcular:hover,
.calcular:active {
  animation-play-state: paused;
}
.calcular:hover {
  background-color: color-mix(in srgb, var(--tinta) 88%, var(--papel));
}
.calcular:active {
  transform: scale(0.98);
}
/* Se deshabilita en cuanto se pulsa (no hay segunda vuelta) y con ella se
   para el latido: ya no es una invitación, es un estado. */
.calcular:disabled {
  cursor: default;
  animation: none;
}

/* Mientras dura el cálculo: mismo color, sin invitar más al toque. */
.calcular-calculando {
  opacity: 0.75;
}

/* Al terminar se queda para siempre, pero deja de parecer un botón que hace
   algo: en papel y con borde, como un dato ya cerrado y no una acción. */
.calcular-hecho {
  background-color: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  box-shadow: none;
  opacity: 1;
}

@keyframes latido {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgb(28 34 48 / 0.18);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 6px 22px rgb(28 34 48 / 0.3);
  }
}

.velo-nota {
  margin: 0;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.rejilla {
  display: grid;
  /* Nombre + 23 franjas de media hora + horas. Lo fija el script. */
  gap: 0;
  min-width: max-content;
}

.hora {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--muted);
  text-align: left;
  padding-bottom: 6px;
  border-left: 1px solid var(--linea);
  padding-left: 3px;
}

.hora-media {
  border-left: 1px solid transparent;
}

.nombre {
  font-size: 0.8125rem;
  padding-right: 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: var(--fila);
  color: var(--tinta);
}

.horas {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-left: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--fila);
  white-space: nowrap;
}

.celda {
  height: var(--fila);
  border-left: 1px solid var(--linea);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 45%, transparent);
}

.celda-media {
  border-left: 1px solid color-mix(in srgb, var(--linea) 40%, transparent);
}

/* La barra de turno. Cae en su sitio: entra desde arriba y crece desde su
   borde de entrada, que es el gesto de "colocar a alguien en ese hueco".
   Solo se animan transform y opacity, así que va sobre el compositor. */
.turno {
  height: calc(var(--fila) - 6px);
  align-self: center;
  border-radius: 2.4px;
  background-color: hsl(var(--tono) / 0.85);
  transform-origin: left center;
  opacity: 0;
  transform: translateY(-9px) scaleX(0.15);
  transition:
    opacity 0.28s ease-out,
    transform 0.42s cubic-bezier(0.18, 1.1, 0.35, 1);
}

.turno-puesto {
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

/* Quien no trabaja ese día LIBRA, y hay que decirlo: sin esto la fila se lee
   como "aquí no hay nadie" justo debajo de un titular que promete lo
   contrario. Entra igual que los turnos, pero sin gesto: solo aparece. */
.libra {
  align-self: center;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Con las dos clases, no solo con .turno-puesto: esta regla va DESPUÉS y a
   igual peso gana la última, así que .libra se quedaba invisible para siempre. */
.libra.turno-puesto {
  opacity: 1;
}

.hoja-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--linea);
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.leyenda-punto {
  width: 10px;
  height: 10px;
  border-radius: 2.4px;
  background-color: hsl(var(--tono) / 0.85);
}

.hoja-estado {
  margin: 0 0 0 auto;
  font-size: 0.8125rem;
  color: var(--muted);
}

.hoja-estado-hecho {
  color: var(--salvia-ink);
  font-weight: 600;
}

/* ── Lo que entra al llegar a pantalla ──────────────────────────────────────
 *
 * Un solo par de clases para toda la página: el bloque está puesto pero
 * apartado, y movimiento.js le añade `.rev-dentro` cuando cruza el borde. El
 * escalonado entre hermanos lo calcula el script, no se escribe aquí.
 */

.rev {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.rev-dentro {
  opacity: 1;
  transform: none;
}

/* ── El botón de calcular, de la rejilla a su sitio ──────────────────────────
 *
 * Vive en el DOM junto a "Probar la demo" (esa es su fila de siempre), pero
 * EMPIEZA sobre la rejilla vacía: al cargar, cuadrante.js lo desplaza hasta
 * ahí con un transform sin transición (colocarServirEnRejilla), así que se ve
 * puesto en el centro desde el primer fotograma, latiendo para que apetezca
 * tocarlo. Al pulsarlo, quitar ese transform lo trae de vuelta a su sitio
 * junto al botón marigold, animado: la misma idea que un FLIP, con la "F"
 * calculada una sola vez al cargar en vez de en cada clic.
 *
 * La taza viaja con el botón y se sirve mientras se calcula: cae el chorro,
 * sube el nivel y el chorro se corta al terminar. Lo orquesta cuadrante.js
 * con las clases `sirviendo`, `taza-llena` y `parando`, y la duración se la
 * pasa en `--llenado`.
 */

.servir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.taza {
  --w: 52px;
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 0.87);
}

.taza-cuerpo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--w) * 0.74);
  height: calc(var(--w) * 0.71);
  border: 2px solid var(--tinta);
  border-radius: 4px 4px 16px 16px;
  overflow: hidden;
  background-color: var(--hoja);
}

.taza-liquido {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#6b4b2a, #3e2a15);
  transform: translateY(100%);
  transition: transform var(--llenado, 4s) linear;
}
.taza-llena .taza-liquido {
  transform: translateY(22%);
}

/* El café tiene superficie: ondula mientras sube. Es lo que lo hace líquido y
   no una barra de progreso vertical. */
.taza-liquido::before {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  top: -7px;
  height: 14px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, #6b4b2a 60%, transparent 61%) repeat-x;
  background-size: 22px 14px;
  animation: vaiven 1.6s linear infinite;
}
@keyframes vaiven {
  to {
    transform: translateX(22px);
  }
}

/* El chorro existía para caer al empezar y cortarse al acabar, pero se quitó:
   ahora solo se ve subir el nivel. El elemento se queda en el HTML (lo orquesta
   cuadrante.js) pero oculto siempre. */
.chorro {
  display: none;
}

.taza-asa {
  position: absolute;
  left: calc(var(--w) * 0.69);
  top: calc(var(--w) * 0.19);
  width: calc(var(--w) * 0.24);
  height: calc(var(--w) * 0.32);
  border: 2px solid var(--tinta);
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.vapor {
  position: absolute;
  top: -10px;
  width: 3px;
  height: 12px;
  border-radius: 99px;
  background-color: color-mix(in srgb, var(--muted) 45%, transparent);
  opacity: 0;
}
.vapor:nth-of-type(1) { left: 16%; }
.vapor:nth-of-type(2) { left: 34%; }
.vapor:nth-of-type(3) { left: 52%; }

.taza-llena .vapor {
  animation: humo 2.6s ease-in-out infinite;
}
.taza-llena .vapor:nth-of-type(2) { animation-delay: 0.6s; }
.taza-llena .vapor:nth-of-type(3) { animation-delay: 1.2s; }

@keyframes humo {
  0% { opacity: 0; transform: translateY(6px) scaleY(0.6); }
  40% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-12px) scaleY(1.2); }
}

.cafe-texto {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 28ch;
}
.cafe-texto b {
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Secciones de texto ─────────────────────────────────────────────────── */

.franja {
  padding: 72px 0;
  border-top: 1px solid var(--linea);
}

/* ── Las secciones en negativo ──────────────────────────────────────────────
 *
 * Dos, y alternando con las claras: el problema (que tiene que doler) y el
 * documento (donde la hoja blanca y el mensaje se leen como papel y móvil de
 * verdad al estar sobre oscuro). No es decoración: cinco secciones seguidas con
 * el mismo papel y la misma forma se leen como una sola. El marigold NO entra
 * aquí: sigue siendo de los dos botones de "Probar la demo" y de nadie más.
 */

.franja-tinta {
  background-color: var(--tinta);
  color: var(--papel);
  border-top-color: var(--tinta);
  /* La misma trama de 24 px, pero en negativo: es la misma hoja. */
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 88px 0;
}

.franja-tinta .parrafo {
  color: var(--papel-muted);
}

.franja-tinta .cuentas {
  background-color: var(--linea-oscura);
  border-color: var(--linea-oscura);
}

.franja-tinta .cuenta {
  background-color: var(--tinta-panel);
}

.franja-tinta .cuenta-texto {
  color: var(--papel-muted);
}

.franja-tinta .cuenta:last-child .cuenta-cifra {
  color: var(--salvia-claro);
}

.remate {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 40px 0 0;
  max-width: 30ch;
}

/* Las dos barras van a la MISMA escala: 130 h contra 4,7 min. La de abajo mide
   medio píxel, y por eso lleva un mínimo de 3 px: sin él no se distingue de una
   barra que no ha cargado, y el argumento se lee como un fallo. */
.escala {
  margin-top: 36px;
  max-width: 62ch;
}

.escala-fila {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
}

.escala-rotulo {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel-muted);
}

.escala-barra {
  display: block;
  height: 12px;
  border-radius: 99px;
  background-color: color-mix(in srgb, var(--tinta-panel) 90%, var(--papel));
  overflow: hidden;
}

.escala-barra i {
  display: block;
  height: 100%;
  min-width: 3px;
  width: calc(var(--parte) * 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.escala-mano i {
  background-image: repeating-linear-gradient(
    45deg,
    #5c6478,
    #5c6478 6px,
    #454d61 6px,
    #454d61 12px
  );
}

.escala-weekin i {
  background-color: var(--salvia-claro);
}

.escala-medida .escala-barra i {
  transform: scaleX(1);
}

.escala-nota {
  margin: 0;
  font-size: 0.875rem;
  color: var(--papel-muted);
}

.titulo {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 24ch;
}

.parrafo {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 60ch;
}

.parrafo-ancho {
  max-width: 68ch;
}

/* Las tres cifras. Misma caja que .reglas (la línea de 1px que se ve por los
   huecos es el fondo de la lista), para que la página no invente una segunda
   forma de agrupar cosas. */
.cuentas {
  list-style: none;
  margin: 40px 0 32px;
  padding: 0;
  display: grid;
  gap: 1px;
  background-color: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}

.cuenta {
  background-color: var(--hoja);
  padding: 24px;
}

.cuenta-cifra {
  display: block;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

/* La última cifra es la nuestra, y es la única que cambia de bando: en salvia,
   que en este sistema significa "hecho". */
.cuenta:last-child .cuenta-cifra {
  color: var(--salvia-ink);
}

.cuenta-texto {
  display: block;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ── Las reglas, enseñadas sobre un cuadrante ───────────────────────────────
 *
 * El cuadrante se queda pegado a media altura mientras las reglas pasan por al
 * lado. Quien decide qué regla manda es movimiento.js, mirando cuál cruza la
 * banda central de la pantalla; aquí solo está la forma. En estrecho no hay dos
 * columnas: el cuadrante se pega arriba y las reglas pasan por debajo.
 */

.pin {
  margin-top: 40px;
}

/* En estrecho el cuadrante se pega arriba y las reglas pasan por debajo; en
   ancho (más abajo) pasa a ser una caja alta con la hoja centrada dentro, que
   es lo que la deja a la altura de la regla que se está leyendo. */
.pin-lienzo {
  /* En estrecho esto es un bloque normal, así que la hoja va primero en el
     HTML y se pega arriba mientras las reglas pasan por debajo. En ancho se
     coloca a mano en la segunda columna (más abajo): el orden del documento no
     es el de la pantalla. */
  position: sticky;
  top: 56px;
  z-index: 2;
  padding: 10px 0 16px;
  background-color: var(--papel);
}

.paso {
  padding: 10vh 0;
  max-width: 46ch;
}

.paso-titulo {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.paso-texto {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  transition: opacity 0.3s ease;
}

/* La regla que no toca no se esconde, se aparta: sigue leyéndose si alguien
   quiere leerla, pero deja de competir con la que el cuadrante está enseñando. */
.paso:not(.paso-activo) .paso-titulo {
  color: color-mix(in srgb, var(--tinta) 38%, var(--papel));
}
.paso:not(.paso-activo) .paso-texto {
  opacity: 0.45;
}

.mini {
  margin: 0;
  background-color: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px -34px rgb(28 34 48 / 0.5);
}

.mini-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}

.mini-dia {
  font-size: 0.875rem;
  font-weight: 600;
}

.mini-estado {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--salvia-ink);
}

.mini-rejilla {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px 12px;
  align-items: center;
}

.mini-nombre {
  font-size: 0.8125rem;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

.mini-nombre-apagado {
  opacity: 0.45;
}

.mini-horas {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  transition: color 0.35s ease;
}

/* La columna de horas solo se enciende en la regla del saldo, que es la única
   que va de horas. El resto del tiempo es un dato más. */
.mini-rejilla-horas .mini-horas {
  color: var(--tinta);
}
.mini-horas-cambiada {
  color: var(--salvia-ink);
  font-weight: 600;
}

/* La pista es la jornada de la tienda, con su línea por hora: la misma
   cuadrícula del cuadrante de la portada, sin los rótulos que aquí no caben. */
.mini-pista {
  position: relative;
  height: 20px;
  border-radius: 3px;
  background-image: linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

/* La fila de la que va la regla: se enmarca en lugar de apagar a las demás, que
   se leerían como "esta semana pasa algo raro con el resto". */
.mini-pista-foco {
  background-color: color-mix(in srgb, var(--salvia) 9%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--salvia) 45%, transparent);
}

.mini-turno {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2.4px;
  background-color: hsl(var(--tono) / 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: mini-entra 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lo que va escrito dentro de la barra: el nombre de la tienda en la regla de
   las dos tiendas (ahí hay que ver DÓNDE, no solo cuándo) y el del puesto en la
   de los puestos. */
.mini-turno b {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}

.mini-libra {
  position: absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
}

/* El día y el pie entran de nuevo cada vez que cambia la regla: es lo que dice
   que la hoja está enseñando otra cosa. Lo enciende movimiento.js. */
.mini-cambia .mini-dia,
.mini-cambia .mini-pie {
  animation: mini-texto 0.5s ease-out;
}

@keyframes mini-texto {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes mini-entra {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleX(0.4);
  }
}

.mini-pie {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 0.8125rem;
  color: var(--muted);
  min-height: 3.4em;
}

/* ── La hoja de ejemplo del PDF ─────────────────────────────────────────── */

.muestra {
  display: grid;
  gap: 32px;
  align-items: start;
}

.muestra-texto {
  display: grid;
  gap: 20px;
}

/* La hoja sale deslizándose al llegar a pantalla y, un momento después, aparece
   el mensaje ya enviado: el recorrido entero del documento —del cuadrante al
   móvil de cada persona— sin una palabra más. Lo dispara la clase `rev-dentro`
   que le pone movimiento.js al bloque, así que aquí no hay JS propio. */
.envio {
  position: relative;
}

.papel-cae {
  transform: translateY(38px) rotate(-1.4deg);
  opacity: 0;
  transition:
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}
.rev-dentro .papel-cae {
  transform: none;
  opacity: 1;
}

/* El mensaje asoma por debajo de la hoja y sobresale un poco por la derecha:
   es otra cosa, en otro sitio, no otra caja de la página. */
.mensaje {
  position: relative;
  z-index: 2;
  width: min(300px, 92%);
  margin: -16px -12px 0 auto;
  display: grid;
  gap: 7px;
  background-color: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 14px 14px 4px 14px;
  padding: 11px 13px 8px;
  box-shadow: 0 12px 26px -18px rgb(28 34 48 / 0.45);
  font-size: 0.8125rem;
  /* Su tinta, no la de la sección: el mensaje es papel blanco sobre el negativo
     y hereda el color claro si no se le dice lo contrario. */
  color: var(--tinta);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
    opacity 0.4s ease 0.5s;
}
.rev-dentro .mensaje {
  opacity: 1;
  transform: none;
}

.mensaje-adjunto {
  display: flex;
  align-items: center;
  gap: 9px;
  background-color: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 7px 9px;
}

.mensaje-icono {
  flex: none;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #b4442f;
  border: 1px solid color-mix(in srgb, #b4442f 35%, transparent);
  border-radius: 3px;
  padding: 3px 4px;
}

.mensaje-fichero {
  display: grid;
  min-width: 0;
}
.mensaje-fichero b {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mensaje-fichero i {
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--muted);
}

.mensaje-texto {
  line-height: 1.45;
}

.mensaje-pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Los dos ticks quieren decir aquí lo mismo que en la app: hecho. */
.mensaje-ticks {
  width: 17px;
  height: 9px;
  fill: none;
  stroke: var(--salvia);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Papel de verdad: sin la trama del fondo y con una sombra corta, para que se
   lea como una hoja apoyada encima de la página y no como otra caja más. */
.papel {
  margin: 0;
  background-color: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 22px 22px 16px;
  box-shadow:
    0 1px 2px rgb(28 34 48 / 0.06),
    0 12px 28px -18px rgb(28 34 48 / 0.35);
  font-size: 0.8125rem;
  color: var(--tinta);
}

.papel-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.papel-tienda {
  font-weight: 700;
  font-size: 0.9375rem;
}

.papel-semana,
.papel-pie {
  font-size: 0.6875rem;
  color: var(--muted);
}

.papel-persona {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tinta);
}

.papel-nombre {
  font-weight: 700;
  font-size: 1.0625rem;
}

.papel-total,
.papel-horas,
.papel-libra {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.papel-dias {
  list-style: none;
  margin: 0;
  padding: 0;
}

.papel-dia {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
}

.papel-libra {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.papel-pie {
  margin-top: 14px;
}

/* ── Las preguntas de siempre ───────────────────────────────────────────────
 *
 * `<details>` a pelo: se abre sin JavaScript, se busca con Ctrl+F aunque esté
 * cerrado y el buscador lo lee igual. Lo único que se le quita es el triangulito
 * del navegador, que cambia de forma en cada uno.
 *
 * La caja es la MISMA que .cuentas y .reglas (línea de 1px por los huecos, borde
 * y 12 px de radio): la página no inventa una tercera forma de agrupar cosas. Y
 * sin marigold, que aquí sigue siendo de los dos "Probar la demo" y del anillo
 * de foco.
 */

.preguntas {
  margin: 40px 0 0;
  display: grid;
  gap: 1px;
  background-color: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}

.pregunta {
  background-color: var(--hoja);
}

.pregunta summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* El triángulo por defecto, fuera: lo sustituye el signo de abajo. */
  list-style: none;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}

/* El signo: un más que se queda en menos al abrir. Son dos capas de fondo en
   vez de dos elementos, así que no añade nada al HTML de cada pregunta, y lo
   que se anima es la barra vertical encogiendo hasta cero. Girarlo NO valía:
   rotar un más deja la barra que queda en diagonal, no en horizontal. */
.pregunta summary::after {
  content: "";
  flex: none;
  position: relative;
  top: 4px;
  width: 13px;
  height: 13px;
  background-image:
    linear-gradient(var(--muted), var(--muted)),
    linear-gradient(var(--muted), var(--muted));
  background-size: 13px 1.5px, 1.5px 13px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}
.pregunta[open] summary::after {
  background-size: 13px 1.5px, 1.5px 0;
}

.pregunta summary:hover {
  background-color: color-mix(in srgb, var(--papel) 70%, var(--hoja));
}

/* El anillo global sale a 3px por fuera y aquí se comería la línea de la caja:
   la fila entera es el objetivo, así que el foco se marca por dentro. */
.pregunta summary:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: -3px;
  border-radius: 0;
}

.pregunta p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

.cierre {
  padding: 88px 0 96px;
  border-top: 1px solid var(--linea);
  text-align: center;
}

.titulo-cierre {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.cierre .parrafo {
  margin-inline: auto;
  margin-bottom: 32px;
}

.cierre .cta-nota {
  margin-inline: auto;
  margin-top: 14px;
}

.pie {
  border-top: 1px solid var(--linea);
  padding: 28px 0;
}

.pie-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca-pie {
  font-size: 1rem;
}

/* Los enlaces del pie: los legales y el de entrar, en un solo grupo a la
   derecha. Envuelven en móvil en vez de apretarse. */
.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 20px;
}

/* ── Pantallas anchas ───────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .portada {
    padding-top: 96px;
  }
  .cuentas {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Aquí sí caben las dos columnas: las reglas por la izquierda y el cuadrante
     quieto a la derecha, que es donde la sección funciona de verdad. */
  .pin {
    display: grid;
    grid-template-columns: 1fr minmax(390px, 470px);
    gap: 56px;
    align-items: stretch;
  }
  .pin-pasos {
    grid-area: 1 / 1;
  }
  /* Una caja alta pegada a la pantalla con la hoja centrada dentro: así el
     cuadrante queda SIEMPRE a la altura de la regla que cruza la mitad de la
     pantalla, que es la que manda. Centrarlo con un translate lo descoloca al
     llegar al final de la sección. */
  .pin-lienzo {
    grid-area: 1 / 2;
    top: 20vh;
    height: 60vh;
    display: flex;
    align-items: center;
    padding: 0;
    background-color: transparent;
  }
  /* El recorrido está repartido para que TODOS los cambios de regla pasen con
     la hoja ya pegada. La hoja se pega cuando la sección llega a 20vh y la
     línea de lectura está en su centro, a 50vh. La primera regla necesita por
     delante lo que va de una cosa a la otra: con menos de ~26vh de hueco se
     lee la primera con la hoja todavía subiendo, y para cuando se pega ya
     manda la segunda. La última lleva otro tanto por detrás, si no cambia
     cuando la hoja ya se está yendo. */
  .paso {
    padding: 8vh 0;
  }
  .paso:first-child {
    padding-top: 26vh;
    padding-bottom: 12vh;
  }
  .paso:last-child {
    padding-bottom: 36vh;
  }
  /* La hoja algo más estrecha que el texto: es una muestra, no la mitad de la
     sección. El texto es corto y el envío (hoja + mensaje) es alto, así que
     alineados arriba dejaban un hueco enorme bajo el texto y otro encima del
     envío: se sube para repartir mejor esa diferencia de alto. */
  .muestra {
    grid-template-columns: 1fr minmax(320px, 400px);
    gap: 48px;
  }
  .envio {
    margin-top: -44px;
  }
}

@media (min-width: 1200px) {
  :root {
    --celda: 30px;
    --fila: 24px;
  }
}

/* ── Teléfono ───────────────────────────────────────────────────────────────
 *
 * La página se escribió de estrecho hacia ancho, pero dos piezas nacieron
 * pensando en pantalla grande y en el móvil se notaban: la rejilla de la
 * portada pedía arrastrar a la derecha para llegar al final del día, y en las
 * reglas el texto de la que estaba activa se leía DETRÁS de la hoja pegada
 * arriba — lo que quedaba a la vista era siempre la siguiente, apagada.
 */

@media (max-width: 899px) {
  /* Las reglas, al revés que en ancho: la hoja se pega ABAJO y las reglas
     pasan por encima de ella. Pegada arriba, la regla se activaba justo al
     asomar y acto seguido se metía debajo de la hoja, así que nunca se leían
     a la vez la regla y lo que la hoja estaba enseñando. La hoja va la última
     del flujo (`order`) porque para agarrarse abajo tiene que tener por
     delante el recorrido entero de la sección. */
  .pin {
    display: flex;
    flex-direction: column;
  }
  .pin-lienzo {
    order: 2;
    top: auto;
    bottom: 0;
    padding: 26px 0 14px;
    /* La banda de papel que tapa lo que pasa por detrás, esfumada: con el corte
       en seco la regla que viene se partía por la mitad justo en el borde de la
       hoja y parecía un fallo de pintado. */
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgb(251 250 248 / 0), var(--papel) 26px);
  }
  /* Papel POR DEBAJO de la hoja, sin ocupar sitio. En el iPhone el borde de
     abajo de la ventana no es el borde de lo que se ve —queda una franja detrás
     de la barra del navegador— y por ahí asomaba la regla siguiente, que viene
     subiendo por detrás de la hoja. Va en un `::after` y no en relleno para no
     empujar la hoja hacia arriba y comerse la franja donde se lee la regla. */
  .pin-lienzo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 22vh;
    background-color: var(--papel);
  }
  /* Y la sección de después manda sobre ese papel: al acabar las reglas, la
     hoja vuelve a su sitio y ese `::after` cae ya encima de ella. */
  .franja-tinta {
    position: relative;
    z-index: 3;
  }
  /* Y la hoja, más baja: pegada abajo se come pantalla, y lo que tiene que
     caber por encima es la regla que se está leyendo. */
  .mini {
    padding: 12px 14px;
  }
  .mini-cabecera {
    padding-bottom: 9px;
    margin-bottom: 9px;
  }
  .mini-rejilla {
    gap: 5px 9px;
  }
  .mini-pista {
    height: 17px;
  }
  .mini-pie {
    margin-top: 10px;
    padding-top: 9px;
    /* Más sitio reservado que en ancho: el pie ocupa más líneas en una columna
       estrecha, y sin reservarlo la hoja pega un salto en cada regla. */
    min-height: 4.6em;
  }
  /* El aire justo para que el relevo se VEA. Con media pantalla entre regla y
     regla solo había una en pantalla, sí, pero el cambio pasaba en el hueco: la
     anterior se había ido por arriba antes de que asomara la siguiente, y el
     relevo no se notaba. Así caben dos, y se ve a una apagarse mientras la otra
     se enciende, que es lo que cuenta que ha cambiado. Quién manda no depende de
     cuántas se vean: es la que tiene el texto más centrado en la franja. */
  .paso {
    padding: 8vh 0;
  }
  .paso:first-child {
    padding-top: 4vh;
  }
  /* Más apagadas que en ancho: aquí llegan a verse dos a la vez y la viva tiene
     que ganar sin que haya que compararlas. */
  .paso:not(.paso-activo) .paso-titulo {
    color: color-mix(in srgb, var(--tinta) 26%, var(--papel));
  }
  .paso:not(.paso-activo) .paso-texto {
    opacity: 0.3;
  }
  /* La última no necesita el hueco de detrás —no hay regla que venga a
     quitarle el mando— y con él la hoja se quedaba sola media pantalla al
     terminar la sección. */
  .paso:last-child {
    padding-bottom: 14vh;
  }

  /* La semana entera sin arrastrar, también en tableta: `--celda` solo se usa
     en el `repeat()` de la plantilla de la rejilla, así que en lugar de una
     medida fija puede ser una pista flexible y las 23 franjas se reparten el
     ancho que haya. Hasta 899 px, porque a 768 la medida fija seguía sin caber. */
  :root {
    --celda: minmax(0, 1fr);
  }
  .rejilla {
    min-width: 0;
  }

  /* Los seis días son el mando del cuadrante, y con el dedo 26 px no se
     aciertan (aquí y en tableta: las dos se tocan). */
  .dia {
    padding: 9px 10px;
  }
  /* Y que envuelvan: por debajo de 340 px los seis no caben en una fila y se
     salían de la hoja. */
  .dias {
    flex-wrap: wrap;
  }
}

@media (max-width: 719px) {
  .rejilla-caja {
    padding-inline: 12px;
  }
  /* A este ancho la franja mide unos 9 px: una línea cada media hora es una
     trama, no una cuadrícula. Se queda la de la hora en punto. */
  .celda-media {
    border-left-color: transparent;
  }
  /* Y un rótulo cada dos horas: uno por hora tampoco cabe ("09" pide 17 px).
     Se apaga el texto, no la celda: la línea de la hora se queda. */
  .hora {
    font-size: 0.625rem;
    padding-left: 2px;
  }
  .rejilla > .hora:not(:nth-child(4n + 2)) {
    color: transparent;
  }
  .nombre {
    font-size: 0.75rem;
    padding-right: 8px;
  }
  .horas {
    font-size: 0.6875rem;
    padding-left: 8px;
  }
  /* La taza al lado del botón y no encima: juntos pasan del ancho de la
     pantalla y el flex los partía en dos líneas, con la taza sola colgando. */
  .servir {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .calcular {
    flex: 1;
    padding-inline: 14px;
  }
  /* El pie, apilado: en fila los enlaces se apretaban contra el borde derecho
     en tres líneas cortas. */
  .pie-interior {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .pie-enlaces {
    justify-content: flex-start;
  }

  /* El mensaje deja de asomar por la derecha y la hoja de caer torcida: los dos
     gestos se salían del ancho de la pantalla en los móviles estrechos, y un
     dedo de más por la derecha es media página moviéndose de lado. */
  .mensaje {
    margin-right: 0;
  }
  .papel-cae {
    transform: translateY(38px);
  }
  /* Y que la hoja pueda encogerse: las horas de cada día van en una sola línea
     y, siendo la hoja una celda de rejilla, ese ancho mínimo empujaba la
     columna entera fuera de la pantalla en los móviles estrechos. */
  .muestra {
    grid-template-columns: minmax(0, 1fr);
  }
  .papel-dia {
    flex-wrap: wrap;
  }
}

/* ── Sin movimiento ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .turno,
  .libra,
  .rejilla-caja {
    transition: none;
  }
  .progreso-barra {
    transition: none;
  }
  /* Todo lo que entra, ya está dentro; todo lo que crece, ya ha crecido. La
     página se lee igual, solo que quieta. */
  .rev {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .linea > span,
  .trazo path,
  .mini-cambia .mini-dia,
  .mini-cambia .mini-pie {
    animation: none;
  }
  .trazo path {
    stroke-dashoffset: 0;
  }
  .escala-barra i {
    transform: scaleX(1);
    transition: none;
  }
  .papel-cae,
  .mensaje {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-barra {
    transition: none;
  }
  .chorro,
  .taza-liquido::before,
  .mini-turno,
  .mini-pista,
  .taza-liquido,
  .paso-titulo,
  .paso-texto {
    animation: none;
    transition: none;
  }
  .taza-llena .vapor {
    animation: none;
  }
  .calcular {
    animation: none;
  }
  .servir {
    transition: none;
  }
}