/* LA WEB, MÁS CORTA.
   ==========================================================================
   Tenía diez secciones y ahora tiene seis. Lo que se quitó no era relleno malo
   —cada trozo estaba bien hecho— sino que contaba lo mismo cuatro veces: había
   un párrafo sobre vídeo, cinco cromos animados, tres trozos de calle y unas
   frases sueltas para explicar UNA cosa: qué pasa cuando entras.

   Una web de un juego de tres euros se decide en el primer pantallazo y se
   confirma en el segundo. A partir del cuarto, cada sección más es una
   oportunidad más de cerrar la pestaña. Menos scroll no es un ajuste de móvil:
   es lo que hace que se llegue al precio.

   Las tres piezas nuevas:

     · LOS DOS AGENTES en el encabezado, uno a cada canto. Son lo mejor que
       tiene este proyecto en cuanto a dibujo y estaban sin usar. Sujetan el
       encuadre a los lados y dejan el centro entero para el nombre y el botón.
     · LA NOCHE en una sola pantalla: el vídeo a un lado, los cuatro pasos al
       otro.
     · LOS CATORCE en una fila que se arrastra, con sangrado hasta el canto.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   LOS DOS AGENTES DEL ENCABEZADO
   Van sobre su propio fondo negro (no se pueden recortar: van vestidos de negro
   y al vaciar el negro salen agujereados). Se funden con la casa con una
   máscara en degradado, que es lo que hace que el canto de la lámina desaparezca
   sin haber borrado un píxel.
-------------------------------------------------------------------------------- */
.hero-agentes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-agente {
  position: absolute;
  bottom: -2%;
  height: min(82%, 640px);
  width: auto;
  opacity: .92;
  /* Se desvanece por abajo y por el lado de dentro: por abajo para que no
     parezca una pegatina apoyada en el canto, y por dentro para que no le corte
     el paso al texto. */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, #000 22%),
    linear-gradient(to var(--hacia, right), #000 55%, transparent 100%);
  mask-image:
    linear-gradient(to top, transparent 0%, #000 22%),
    linear-gradient(to var(--hacia, right), #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, .8));
}
.hero-agente--el { left: -1%; --hacia: left; transform: scaleX(-1); }
.hero-agente--ella { right: -1%; --hacia: right; }

/* Por debajo de 1100 px no hay sitio a los lados: el bloque de texto pasaría
   por encima de ellos y no se leería ni una cosa ni la otra. */
@media (max-width: 1100px) {
  .hero-agentes { display: none; }
}

/* -----------------------------------------------------------------------------
   LA NOCHE: vídeo y pasos, en una pantalla
-------------------------------------------------------------------------------- */
.noche2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

.noche2-texto .titulo { margin-bottom: 18px; }
.noche2-texto .parrafo { max-width: 46ch; }

/* Los cuatro pasos: numerados por CSS, sin una caja cada uno. Cuatro tarjetas
   iguales con icono y título son la estructura perezosa; una lista numerada se
   lee de arriba abajo en el orden en que pasan las cosas, que es justo lo que
   hay que contar aquí. */
.pasos2 {
  counter-reset: paso;
  display: grid;
  gap: 14px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}
.pasos2 li {
  position: relative;
  padding-left: 46px;
  font-family: var(--face-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.pasos2 li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 16px;
}
.pasos2 li b { color: #fff; font-weight: 700; }

.noche2-video {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #06040f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(180, 150, 255, .2);
}
.noche2-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.noche2-video figcaption {
  padding: 11px 16px;
  font-family: var(--face-mano), cursive;
  font-size: 18px;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 900px) {
  /* El vídeo primero: es lo que explica esto en dos segundos. */
  .noche2 { grid-template-columns: 1fr; gap: 26px; }
  .noche2-video { order: -1; }
  .noche2-texto .parrafo { max-width: none; }
}

/* -----------------------------------------------------------------------------
   LOS CATORCE: catorce nombres, y cada uno abre su carta

   Estuvieron en rejilla, en libreta y en fila que se arrastra, y las tres
   fallaban por lo mismo: enseñaban los catorce EXPEDIENTES a la vez, y catorce
   expedientes juntos son un muro de texto que no lee nadie.

   Los catorce NOMBRES, en cambio, caben en media pantalla y ya cuentan lo que
   hay que contar: que ahí dentro puede haber catorce cosas distintas. El
   expediente está a un clic, para el que lo quiera.
-------------------------------------------------------------------------------- */
.bichos-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 18px;
}

.bicho-chapa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(180, 150, 255, .18);
  color: var(--ink);
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.bicho-chapa:hover {
  background: color-mix(in srgb, var(--tono) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--tono);
  transform: translateY(-2px);
}
.bicho-chapa:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.bicho-chapa-cara {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tono);
  flex: none;
}
.bicho-chapa-cara svg { display: block; }
.bicho-chapa-n { white-space: nowrap; }

.parrafo--pie { font-size: 14px; opacity: .7; }

/* -----------------------------------------------------------------------------
   LA CARTA de un fantasma
   Es una carta y no una ficha, con todo lo que eso trae: color propio, marco,
   la cara en grande y las tres pruebas como si fueran los ataques. La gracia de
   una carta es que apetece verlas todas.
-------------------------------------------------------------------------------- */
.carta-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  background: rgba(6, 4, 14, .8);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  animation: carta-entra .18s ease-out;
}
@keyframes carta-entra { from { opacity: 0 } to { opacity: 1 } }

.carta {
  position: relative;
  width: min(360px, 100%);
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  /* El borde de la carta lleva SU color, que es lo que hace que catorce cartas
     no parezcan la misma. */
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tono) 22%, transparent), transparent 70%),
    #191131;
  box-shadow:
    inset 0 0 0 2px var(--tono),
    inset 0 0 0 9px rgba(255, 255, 255, .05),
    0 26px 70px rgba(0, 0, 0, .6);
  animation: carta-sube .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes carta-sube {
  from { transform: translateY(16px) scale(.97) }
  to { transform: none }
}

.carta-cab { display: grid; gap: 2px; text-align: center; }
.carta-num {
  font-family: var(--face-ui);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.carta-n {
  margin: 0;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
}

.carta-cara {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tono) 40%, transparent), transparent 68%),
    #0e0920;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.carta-cara svg { display: block; }
/* La lámina de verdad, cuando la hay. Se ajusta al hueco sin recortarse: estos
   dibujos son retratos, y un retrato recortado por la barbilla no vale. */
.carta-lamina {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: contain;
}

.carta-c {
  margin: 0;
  font-family: var(--face-ui);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  text-align: center;
}

.carta-lab {
  font-family: var(--face-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tono);
}
.carta-pruebas, .carta-mania { display: grid; gap: 6px; }
.carta-tira { display: flex; flex-wrap: wrap; gap: 5px; }
.carta-prueba {
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-family: var(--face-ui);
  font-size: 12.5px;
  color: var(--ink);
}
.carta-mania p {
  margin: 0;
  font-family: var(--face-mano), cursive;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink-dim);
}

.carta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.carta-flecha, .carta-x {
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: var(--ink);
  font-family: var(--face-ui);
  cursor: pointer;
  transition: background .15s ease;
}
.carta-flecha { width: 42px; height: 38px; font-size: 20px; line-height: 1; }
.carta-x { flex: 1; height: 38px; font-size: 14px; font-weight: 600; }
.carta-flecha:hover, .carta-x:hover { background: var(--tono); color: #12091f; }

/* -----------------------------------------------------------------------------
   EL MATERIAL: los dieciocho a la vez
   Con el dibujo y el nombre caben todos de un vistazo, y lo que hay que enseñar
   aquí es LA CANTIDAD de trastos que se llevan. Lo que hace cada uno se lee al
   pasar por encima; lo demás se descubre jugando.
-------------------------------------------------------------------------------- */
.trastos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.trasto {
  /* En columna y no en rejilla, para poder empujar la barra al fondo con un
     margen automático: los nombres ocupan una línea o dos, y con la barra
     pegada al nombre quedaba a media altura en unas fichas y abajo en otras,
     que es lo que hace que una fila de barras deje de leerse como una fila. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(180, 150, 255, .16);
  transition: background .16s ease, transform .16s ease;
}
.trasto:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.trasto img, .trasto canvas { image-rendering: pixelated; }
.trasto-n {
  font-family: var(--face-ui);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-dim);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   AJUSTES DE LO QUE SE QUEDÓ
-------------------------------------------------------------------------------- */
/* Los párrafos de entradilla centrados, con medida corta: una línea de noventa
   caracteres centrada es de las cosas que peor se leen que existen. */
.parrafo--corto { max-width: 60ch; margin-inline: auto; }

/* Las secciones traían el aire de una web de diez pantallazos. Con seis, ese
   aire es scroll vacío entre cosas que ya se entendieron. */
.acto { padding-block: clamp(54px, 8vh, 86px); }

@media (max-width: 700px) {
  .acto { padding-block: clamp(38px, 6vh, 56px); }
  /* Tres columnas en vez de dos: dieciocho trastos de dos en dos son nueve
     filas, y nueve filas empujan el precio una pantalla y media más abajo. */
  .trastos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Apretadas: la barra de cuánto se usa le añadió una línea a cada ficha, y en
     tres columnas eso son siete filas — media pantalla de scroll que se le come
     al precio, que es lo que de verdad hay que alcanzar pronto. */
  .trasto { padding: 10px 4px 8px; gap: 4px; }
  .trasto-n { font-size: 11.5px; }
  .trasto-uso { gap: 3px; }
  .uso-n { font-size: 8.5px; letter-spacing: .06em; }
  .uso-paso { height: 4px; }
  .bichos-lista { gap: 7px; margin: 22px 0 14px; }
  .bicho-chapa { padding: 5px 13px 5px 5px; font-size: 15px; gap: 8px; }
  .bicho-chapa-cara { width: 32px; height: 32px; }
}

/* -----------------------------------------------------------------------------
   LA PORTADA PARA QUIEN YA ES DE LA CASA
   Mismo sitio, otra cara: su nombre arriba, sus números donde se explicaba la
   noche y un gracias donde estaba el precio.
-------------------------------------------------------------------------------- */
.mis-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  margin: 26px 0 28px;
}
.mi-dato {
  display: grid;
  gap: 2px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(180, 150, 255, .18);
}
.mi-dato strong {
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  /* Cifras de ancho fijo: si no, cada tarjeta baila cuando cambia un número. */
  font-variant-numeric: tabular-nums;
}
.mi-dato small {
  font-family: var(--face-ui);
  font-size: 12px;
  color: var(--ink-faint);
}
.mi-nota {
  margin: -12px 0 24px;
  font-family: var(--face-mano), cursive;
  font-size: 20px;
  color: var(--lime);
}

/* --- El gracias -------------------------------------------------------------
   Va sobre el papel, como el tique al que sustituye, y con la letra algo más
   grande de lo normal: es lo único que se lee en esta sección y no compite con
   nada. Un agradecimiento en cuerpo de nota al pie no es un agradecimiento. */
.gracias {
  max-width: 58ch;
  margin: 26px auto 0;
  display: grid;
  gap: 16px;
}
.gracias-p {
  margin: 0;
  font-family: var(--face-ui);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(26, 21, 8, .82);
  text-align: center;
}
.gracias-p--fuerte {
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(26, 21, 8, .06);
  font-weight: 600;
  color: var(--tinta);
}
.gracias-firma {
  margin: 4px 0 0;
  font-family: var(--face-mano), cursive;
  font-size: 26px;
  color: rgba(26, 21, 8, .7);
  text-align: center;
  transform: rotate(-1.2deg);
}
.gracias-chapa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  font-family: var(--face-ui);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(26, 21, 8, .45);
}


/* =============================================================================
   EL MENÚ DE IDIOMAS
   Cuelga del botón de la barra. Los nombres van escritos EN SU PROPIO IDIOMA:
   «Français» lo encuentra un francés aunque la página esté en chino, y
   «Francés» no.
============================================================================= */
.barra-fin { position: relative; }

.lang-lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 178px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(14, 10, 26, .97);
  box-shadow:
    inset 0 0 0 1px rgba(157, 107, 255, .28),
    0 18px 44px rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
}

.lang-op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(226, 220, 250, .8);
  font: 600 14px/1.2 var(--face-ui, system-ui), system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.lang-op:hover { background: rgba(157, 107, 255, .16); color: #fff; }
.lang-op.on { color: var(--lime, #a8f425); }
.lang-op-corto {
  opacity: .45;
  font-size: 11px;
  letter-spacing: .08em;
}

/* El chino y el japonés piden algo más de cuerpo: a catorce píxeles, un kanji
   tiene los mismos trazos que a veinte y la mitad de sitio para ponerlos. */
:root[data-idioma='zh'] .lang-op-propio,
:root[data-idioma='ja'] .lang-op-propio { font-size: 15px; }


/* =============================================================================
   LA PLAZA RESERVADA
   Lo que ve quien ha pagado antes de que la casa abra. Va por encima de todo y
   se lee de arriba abajo en este orden: tu plaza es tuya · cuándo abre · cuánto
   falta. El orden importa: quien paga y no puede entrar piensa lo peor, y lo
   piensa en el primer segundo.
============================================================================= */
.reserva {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 4, 14, .88);
  backdrop-filter: blur(6px);
}

.reserva-caja {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(560px, 100%);
  padding: 34px 30px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 20, 56, .96), rgba(14, 10, 26, .96));
  box-shadow:
    inset 0 0 0 1px rgba(157, 107, 255, .32),
    0 30px 90px rgba(0, 0, 0, .7);
  text-align: center;
}

.reserva-sello {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(168, 244, 37, .14);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .4);
  color: var(--lime, #a8f425);
  font: 700 11px/1 var(--face-ui), system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reserva-t {
  margin: 0;
  font: 800 clamp(24px, 4vw, 34px)/1.1 var(--face-titulo, var(--face-ui)), system-ui, sans-serif;
  color: #fff;
}
.reserva-p, .reserva-mientras {
  margin: 0;
  max-width: 44ch;
  color: rgba(226, 220, 250, .72);
  font: 400 15px/1.55 var(--face-ui), system-ui, sans-serif;
}
.reserva-mientras { font-size: 13.5px; opacity: .75; }

.reserva-cuando {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  font-family: var(--face-ui), system-ui, sans-serif;
}
.reserva-cuando span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(198, 188, 236, .5);
}
.reserva-cuando strong { font-size: 17px; color: var(--violet, #b18cff); }

/* Las cuatro cifras. En una fila y con la etiqueta debajo: es la forma que
   tiene una cuenta atrás desde siempre y no hay razón para inventar otra. */
.reserva-reloj {
  display: flex;
  gap: 10px;
  margin: 4px 0 2px;
}
.reserva-cifra {
  display: grid;
  gap: 3px;
  min-width: 66px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.reserva-cifra strong {
  font: 800 26px/1 var(--face-ui), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.reserva-cifra small {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(198, 188, 236, .5);
}
.reserva-ya {
  margin: 0;
  color: var(--lime, #a8f425);
  font: 700 17px/1.4 var(--face-ui), system-ui, sans-serif;
}

.reserva-resguardo {
  margin: 0;
  font: 600 11.5px/1 var(--face-ui), system-ui, sans-serif;
  letter-spacing: .08em;
  color: rgba(198, 188, 236, .4);
}

@media (max-width: 520px) {
  .reserva-cifra { min-width: 0; flex: 1; }
  .reserva-reloj { width: 100%; gap: 6px; }
}

/* Debajo del botón de reservar, mientras la casa no haya abierto. Que se cobra
   hoy y se juega el 23 tiene que leerse ANTES de pagar, no después. */
.precio-cuando {
  margin: 8px 0 0;
  font: 600 12.5px/1.4 var(--face-ui), system-ui, sans-serif;
  color: rgba(40, 30, 20, .62);
  text-align: center;
}

/* SALIR, al lado de JUGAR. Mismo papel rasgado y mismo tamaño —es el mismo tipo
   de botón— pero en rojo: es la única cosa de la barra que deshace algo, y tiene
   que distinguirse del que entra sin necesidad de leerla. */
.papel--salir {
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
  background: #ff5566;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.papel--salir:hover { background: #ff3d51; }


/* =============================================================================
   ELEGIR IDIOMA, LA PRIMERA VEZ
   Sin título ni explicación: cualquier frase estaría en un idioma, y quien la
   lea en el que no entiende se queda igual. Cinco nombres escritos en su propio
   idioma se entienden sin ayuda de ninguno.
============================================================================= */
.eli {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #07050f;
}
.eli-caja {
  display: grid;
  justify-items: center;
  gap: 26px;
  width: min(460px, 100%);
}
.eli-logo { width: min(280px, 70%); height: auto; }

.eli-lista { display: grid; gap: 8px; width: 100%; }

.eli-op {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(157, 107, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .24);
  color: rgba(226, 220, 250, .88);
  font-family: var(--face-ui), system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.eli-op:hover, .eli-op:focus-visible {
  background: rgba(157, 107, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .5);
  color: #fff;
  outline: 0;
  transform: translateX(2px);
}
/* El que trae el navegador, marcado. Casi siempre acierta: quien pulse Intro sin
   leer nada acierta también. */
.eli-op--suyo {
  background: rgba(168, 244, 37, .1);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .42);
}
.eli-op--suyo:hover, .eli-op--suyo:focus-visible {
  background: rgba(168, 244, 37, .18);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .7);
}

.eli-bandera {
  font-size: 26px;
  line-height: 1;
  /* Las banderas son emoji y en Windows salen como dos letras («ES»). Esta
     fuente las dibuja; si no está, las dos letras siguen identificando el
     idioma, así que no se pierde nada. */
  font-family: 'Twemoji Country Flags', 'Segoe UI Emoji', 'Apple Color Emoji',
               'Noto Color Emoji', sans-serif;
}
.eli-nombre { font-size: 17px; font-weight: 600; }

@media (max-width: 420px) {
  .eli-op { padding: 12px 14px; }
  .eli-nombre { font-size: 15.5px; }
}

/* -----------------------------------------------------------------------------
   CUÁNTO SE USA CADA CACHARRO: la barra de al lado
   Dieciocho fichas iguales no dicen si te llevas dieciocho cosas necesarias o
   dos y dieciséis de adorno. Cuatro bloques y una palabra debajo lo dicen sin
   que haya que abrir nada — que era lo otro que se probó, y movía la rejilla
   entera de sitio con cada toque.
-------------------------------------------------------------------------------- */
.trasto-uso {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  margin-top: auto;   /* al fondo de la ficha, todas a la misma altura */
  padding-top: 2px;
}
.uso-barra {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 74px;
}
.uso-paso {
  flex: 1;
  height: 5px;
  border-radius: 2px;
  /* El vacío se ve, no se adivina: un peldaño apagado que no se viera dejaría
     una barra de tres bloques y una de cuatro pareciendo lo mismo de larga. */
  background: rgba(255, 255, 255, .12);
}
.uso-paso.on { background: var(--lime); }
/* Y el que se lleva siempre, con su color: el cuatro es el único escalón que
   dice «este no se queda en el camión», y merece leerse desde lejos. */
.uso-paso.on:nth-child(4) { background: var(--amber); }
.uso-n {
  font-family: var(--face-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-faint);
}

/* -----------------------------------------------------------------------------
   LAS SIETE PRUEBAS
   Van antes que los catorce nombres porque son a lo que se juega: sacarle tres
   a algo que no se deja. Al señalar un fantasma se encienden las suyas, y de
   paso se ve la regla —ninguna pareja se repite— sin escribirla.
-------------------------------------------------------------------------------- */
.pruebas-tira {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px auto 6px;
  max-width: 640px;
}
.prueba-chapa {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(180, 150, 255, .2);
  font-family: var(--face-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
/* Con un fantasma señalado, las que NO son suyas se apagan: encender tres sin
   apagar las otras cuatro no señala nada. */
.pruebas-tira.mirando .prueba-chapa { opacity: .32; }
.pruebas-tira .prueba-chapa.on {
  opacity: 1;
  background: rgba(168, 244, 37, .16);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .55);
  color: var(--lime);
}


/* =============================================================================
   LO QUE VIENE — la sección del plan, y el correo de quien quiere enterarse

   ESTA SECCIÓN VA DESPUÉS DEL PRECIO Y NO ES CASUALIDAD. Quien ha llegado aquí
   ya sabe lo que cuesta y sigue leyendo: la única pregunta que le queda es «¿y
   esto va a crecer, o me lo compro y se queda como está?». Todo lo de abajo
   contesta eso, y por eso termina con lo único que se le pide: su correo.

   POR QUÉ ES LA MÁS OSCURA DE LA PÁGINA. El resto de la web es morada de
   ambiente; aquí el fondo baja a negro con grano y un barrido lento por encima.
   No es decorar por decorar: es la sección que habla del futuro y conviene que
   se note que se ha entrado en otro sitio — un plan contado sobre el mismo fondo
   que lo anterior se lee como una sección más de relleno.

   EL GLITCH ESTÁ MEDIDO. Dos copias del título desplazadas en rojo y cian que
   solo saltan un instante cada varios segundos. Un glitch continuo marea, se
   come el texto y a los tres segundos deja de dar miedo para dar pereza; uno que
   salta cuando no lo esperas hace justo lo contrario. Y con
   `prefers-reduced-motion` no salta ninguna vez.
============================================================================= */
.acto--senal {
  position: relative;
  overflow: hidden;
  background: #05040a;
}
/* El grano. Un ruido finísimo tramado con dos degradados cruzados: pesa cero,
   no pide una imagen y se ve como la textura de un vídeo mal grabado. */
.acto--senal::before {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(157, 107, 255, .02) 0 1px, transparent 1px 4px);
  animation: senal-grano 5.5s steps(6) infinite;
}
/* Y el barrido: una franja clarísima que baja muy despacio, como la de un tubo
   viejo. Va por detrás del contenido, nunca por delante del texto. */
.acto--senal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(157, 107, 255, .07) 45%, transparent);
  animation: senal-barrido 9s linear infinite;
}
.acto--senal > * { position: relative; z-index: 1; }
@keyframes senal-grano {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
@keyframes senal-barrido {
  from { top: -40%; }
  to { top: 110%; }
}

/* --- El título que se corta --------------------------------------------------- */
.glitch { position: relative; }
/* Las dos copias salen del atributo `data-glitch`, así que el texto no se
   repite en el HTML ni lo lee dos veces un lector de pantalla. */
.glitch::before,
.glitch::after {
  content: attr(data-glitch);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.glitch::before { color: #ff2e63; animation: glitch-rojo 7s infinite; }
.glitch::after { color: #2ee6ff; animation: glitch-cian 7s infinite; }
@keyframes glitch-rojo {
  0%, 92%, 100% { opacity: 0; transform: none; }
  93% { opacity: .85; transform: translate(-.09em, .02em); }
  95% { opacity: .5; transform: translate(.06em, -.03em); }
  97% { opacity: .8; transform: translate(-.04em, 0); }
}
@keyframes glitch-cian {
  0%, 92%, 100% { opacity: 0; transform: none; }
  93% { opacity: .8; transform: translate(.08em, -.02em); }
  95% { opacity: .45; transform: translate(-.05em, .03em); }
  97% { opacity: .7; transform: translate(.03em, 0); }
}

/* --- Las entradas del plan ---------------------------------------------------- */
.diario {
  display: grid;
  gap: 2px;
  margin-top: 34px;
  /* Una raya arriba y otra abajo, y entre entradas solo el hueco: la lista se
     lee como un listado impreso y no como seis fichas sueltas. */
  border-block: 1px solid rgba(157, 107, 255, .22);
  padding-block: 2px;
}
.dia {
  position: relative;
  padding: 20px 22px 20px 84px;
  background: rgba(255, 255, 255, .025);
  transition: background 200ms ease;
}
/* EL NÚMERO, EN GRANDE Y HUECO. Es lo que convierte seis párrafos en «seis
   cosas», y esa cuenta se queda aunque no se lea ni una entera. */
.dia::before {
  content: attr(data-n);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(157, 107, 255, .5);
  transition: color 200ms ease, -webkit-text-stroke-color 200ms ease;
}
.dia:hover { background: rgba(157, 107, 255, .09); }
.dia:hover::before { color: rgba(168, 244, 37, .18); -webkit-text-stroke-color: var(--lime); }
.dia-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px; }
/* El número, escrito también en el texto: el de `::before` no lo lee ningún
   lector de pantalla, y quien no ve la página también va contando. */
.dia-n {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.dia-t {
  margin: 0;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
}
.dia-p {
  margin: 0;
  max-width: 62ch;
  font-family: var(--face-ui);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-dim);
}

/* --- El aviso por correo ------------------------------------------------------ */
.avisos {
  margin-top: 40px;
  padding: 26px clamp(18px, 4vw, 34px) 24px;
  border-radius: 16px;
  background: rgba(157, 107, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .3);
  text-align: center;
}
.avisos-t {
  margin: 0 0 8px;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
}
.avisos-p {
  margin: 0 auto 20px;
  max-width: 52ch;
  font-family: var(--face-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.avisos-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
  max-width: 480px;
}
.avisos-mail {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 1px rgba(180, 150, 255, .28);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: 15.5px;
}
.avisos-mail::placeholder { color: var(--ink-faint); }
.avisos-mail:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--lime); }
.avisos-btn {
  flex: none;
  padding: 13px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--lime);
  color: #12200a;
  font-family: var(--face-gorda), var(--face-ui);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}
.avisos-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.avisos-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Mientras va, el botón no se deja pulsar otra vez: dos pulsaciones seguidas son
   dos altas del mismo correo camino del servidor. */
.avisos.yendo .avisos-btn { pointer-events: none; opacity: .6; }

/* La línea de respuesta. Reserva su alto SIEMPRE, aunque esté vacía: si
   apareciera de la nada, todo lo de debajo daría un salto al contestar. */
.avisos-dicho {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-family: var(--face-ui);
  font-size: 14px;
  color: var(--ink-faint);
}
.avisos-dicho--bien { color: var(--lime); }
.avisos-dicho--mal { color: #ff8fae; }
.avisos-letra {
  margin: 10px 0 0;
  font-family: var(--face-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  opacity: .8;
}

/* La etiqueta del campo existe para quien navega a ciegas; en pantalla la dice
   el propio hueco del campo. */
.a-ciegas {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* DE TABLET PARA ARRIBA, DOS COLUMNAS. Seis entradas apiladas hacían de esta
   sección la más alta de la web —más que el precio— y una lista de lo que
   viene no puede pesar más que lo que se vende. En dos columnas se ve entera
   de un vistazo, que además es como se lee un plan: no de arriba abajo, sino
   pasando la vista por encima para ver cuántas cosas hay. */
@media (min-width: 860px) {
  .diario { grid-template-columns: 1fr 1fr; gap: 2px; }
  .dia { padding: 18px 18px 18px 74px; }
  .dia::before { left: 14px; font-size: 34px; }
}

@media (max-width: 700px) {
  .dia { padding: 16px 14px 16px 62px; }
  .dia::before { left: 12px; font-size: 32px; }
  .dia-t { font-size: 18px; }
  .dia-p { font-size: 14.5px; }
  .avisos-fila { max-width: none; }
  .avisos-btn { flex: 1 1 100%; }
}

/* Quien ha pedido que las cosas no se muevan no quiere que se muevan: ni el
   grano, ni el barrido, ni el título. */
@media (prefers-reduced-motion: reduce) {
  .acto--senal::before,
  .acto--senal::after,
  .glitch::before,
  .glitch::after { animation: none; }
  .acto--senal::after { display: none; }
}