/*
 * shuntflow.com
 *
 * Concepto: el tablero LED ámbar de las salidas, el de las estaciones
 * británicas y el de los corredores del hipódromo. "Salida" vale para el
 * tren y para la carrera. El tablero es lo único que brilla; el resto de la
 * página es la piedra del vestíbulo, quieta. Ver docs/SITIO.md.
 *
 * Sin estilos en línea ni atributos style=: la CSP solo admite esta hoja.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Doto";
  src: url("../fonts/doto-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --piedra: #DEDDD6;
  --placa: #E9E8E2;
  --tinta: #1A2433;
  --suave: #4E5865;
  --linea: #B4B6AE;
  --esmalte: #23408E;
  --esmalte-hover: #1A3170;
  --sobre-esmalte: #FFFFFF;
  --foco: #23408E;

  --caja: #24272A;
  --cara: #0C0D0B;
  --led: #FFA41B;
  --led-tenue: #B9761A;
  --led-apagado: #3A2A10;
  --brillo: 0 0 3px rgba(255, 164, 27, .75), 0 0 12px rgba(255, 140, 0, .35);
  --papel: #F6F5EF;

  --banda: #23408E;
  --banda-tinta: #F3F2EC;
  --banda-suave: #C9D3F0;
  --pie-fondo: #1A2433;
  --pie-tinta: #D9DBD5;
  --noche: #1A2433;
  --noche-tinta: #ECEBE5;
  --noche-suave: #B9BEC4;

  --t-portada: clamp(2.4rem, 1.2rem + 3.9vw, 4.6rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-grande: clamp(2.6rem, 1rem + 5.6vw, 5.75rem);
  --ancho: 1200px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --piedra: #16191D;
    --placa: #1E2227;
    --tinta: #E4E2DA;
    --suave: #A7AEB6;
    --linea: #3A4047;
    --esmalte: #A3B7F2;
    --esmalte-hover: #C2D0F7;
    --sobre-esmalte: #0E1A33;
    --foco: #A3B7F2;
    --caja: #2B2F33;
    --papel: #E2DFD4;
    --banda: #1C2C5C;
    --banda-tinta: #ECEAE2;
    --banda-suave: #B7C3E6;
    --pie-fondo: #0E1114;
    --pie-tinta: #BFC3C8;
    --noche: #232A35;
    --noche-tinta: #ECEAE2;
    --noche-suave: #B4BAC2;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--piedra);
  color: var(--tinta);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  font-weight: 400;
}

h1, h2, h3 {
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--t-portada); font-stretch: 112%; }
h2 { font-size: var(--t-h2); font-stretch: 115%; max-width: 22ch; }
h3 { font-size: 1.3125rem; font-stretch: 106%; font-weight: 700; line-height: 1.2; letter-spacing: 0; }

p { margin: 0 0 1em; }

a { color: var(--esmalte); text-underline-offset: .18em; }
a:hover { color: var(--esmalte-hover); }

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

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) { .envoltura { padding: 0 28px; } }
@media (min-width: 960px) { .envoltura { padding: 0 40px; } }

.entrada {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 60ch;
}

.nota { color: var(--suave); font-size: .9375rem; max-width: 64ch; }

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--piedra);
  font-weight: 700;
  border-radius: 6px;
}
.saltar:focus { top: 12px; color: var(--piedra); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--esmalte);
  color: var(--sobre-esmalte);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--esmalte-hover); color: var(--sobre-esmalte); }
.boton:disabled { cursor: default; opacity: .75; }

.boton-grande { padding: 16px 26px; font-size: 1.0625rem; }
.boton-chico { padding: 9px 14px; font-size: .9375rem; }

.enlace-fuerte {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- Cabecera ---------- */

.cabecera { border-bottom: 1px solid var(--linea); }

.cabecera-dentro {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 12px 16px;
}

@media (min-width: 640px) { .cabecera-dentro { padding: 14px 28px; } }
@media (min-width: 960px) { .cabecera-dentro { padding: 16px 40px; } }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.marca::before {
  content: "";
  width: 26px;
  height: 26px;
  background: url("/favicon.svg") center / contain no-repeat;
}
.marca:hover { color: var(--tinta); }

.menu { display: none; }

@media (min-width: 1040px) {
  .menu { display: flex; gap: 24px; }
  .menu a {
    color: var(--tinta);
    font-weight: 500;
    text-decoration: none;
  }
  .menu a:hover { text-decoration: underline; }
}

.cabecera-fin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.idiomas { display: flex; gap: 2px; }
.idiomas a {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--suave);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.idiomas a:hover { color: var(--tinta); }
.idiomas a[aria-current] {
  background: var(--placa);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--tinta);
}

.edad {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 479px) {
  .cabecera .boton-chico { display: none; }
}

/* ---------- Portada ---------- */

.portada { padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }

.portada-texto h1 { max-width: 21ch; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 28px 0 14px;
}

.fechas { color: var(--suave); font-size: .9375rem; margin: 0; }

@media (min-width: 1040px) {
  .portada-texto {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: end;
  }
  .portada-texto h1 { grid-column: 1 / -1; margin-bottom: 30px; }
  .portada-texto .entrada { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .portada-texto .acciones { grid-column: 2; grid-row: 2; margin: 0 0 12px; }
  .portada-texto .fechas { grid-column: 2; grid-row: 3; }
}

/* ---------- Estación: tablero, regla y avisos ---------- */

.estacion {
  display: grid;
  gap: 28px;
  margin-top: clamp(32px, 5vw, 56px);
}

@media (min-width: 1040px) {
  .estacion { grid-template-columns: minmax(0, 1fr) 270px; align-items: start; }
}

.tablero {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2E3236, #1F2225);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 26px 50px -30px rgba(10, 16, 26, .6);
}

/* Cuatro tornillos en las esquinas de la caja */
.tablero::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    radial-gradient(circle, #6A7076 0 1.6px, #3A3F44 2.2px, transparent 2.8px) left top / 8px 8px no-repeat,
    radial-gradient(circle, #6A7076 0 1.6px, #3A3F44 2.2px, transparent 2.8px) right top / 8px 8px no-repeat,
    radial-gradient(circle, #6A7076 0 1.6px, #3A3F44 2.2px, transparent 2.8px) left bottom / 8px 8px no-repeat,
    radial-gradient(circle, #6A7076 0 1.6px, #3A3F44 2.2px, transparent 2.8px) right bottom / 8px 8px no-repeat;
}

.cara {
  padding: 14px 16px 16px;
  border-radius: 6px;
  background-color: var(--cara);
  background-image: radial-gradient(rgba(255, 170, 40, .085) .8px, transparent 1.15px);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 1px #000, inset 0 3px 14px rgba(0, 0, 0, .85);
  color: var(--led);
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 800;
  font-variation-settings: "ROND" 100;
  overflow: hidden;
}

.cara-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 164, 27, .22);
  font-size: clamp(1.05rem, .8rem + .8vw, 1.45rem);
  text-shadow: var(--brillo);
}
.cara-marca { color: var(--led-tenue); text-shadow: none; }

.filas {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(.8rem, .62rem + .45vw, 1rem);
  line-height: 1.25;
}

.filas th {
  padding: 4px 6px 8px;
  color: var(--led-tenue);
  font-weight: 700;
  font-size: .8em;
  text-align: left;
  opacity: .8;
}

.filas td {
  padding: 6px 6px;
  overflow: hidden;
  color: var(--led-tenue);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .25s, text-shadow .25s;
}

.filas th:nth-child(1) { width: 5.6em; }
.filas th:nth-child(2) { width: 27%; }
.filas th:nth-child(3) { width: 22%; }
.filas th:nth-child(5) { width: 5em; text-align: right; }
.filas th:nth-child(6) { width: 1.8em; }

.filas .t-cuota { text-align: right; }
.filas .t-luz { text-align: center; }

.filas tr.cumple td {
  color: var(--led);
  text-shadow: var(--brillo);
}

.t-luz::before {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--led-apagado);
  box-shadow: inset 0 0 2px #000;
  vertical-align: middle;
  transition: background .2s, box-shadow .2s;
}
.filas tr.cumple .t-luz::before {
  background: var(--led);
  box-shadow: 0 0 5px 1px rgba(255, 164, 27, .85), 0 0 16px rgba(255, 140, 0, .5);
}

.t-cuota [data-mov]::before {
  content: "";
  display: inline-block;
  margin-right: .35em;
  border-left: .3em solid transparent;
  border-right: .3em solid transparent;
  vertical-align: .12em;
}
.t-cuota [data-mov="sube"]::before { border-bottom: .42em solid currentColor; }
.t-cuota [data-mov="baja"]::before { border-top: .42em solid currentColor; }

.t-cuota .cambia { animation: refresco .24s steps(3, end) both; }

@keyframes refresco {
  from { opacity: .08; }
  to { opacity: 1; }
}

@media (max-width: 719px) {
  .tablero { padding: 10px; border-radius: 10px; }
  .cara { padding: 10px 10px 12px; }
  .filas thead { display: none; }
  .filas, .filas tbody { display: block; }
  .filas tr {
    display: grid;
    grid-template-columns: 4.4em minmax(0, 1fr) minmax(0, 1fr) 3.9em 1.1em;
    grid-template-areas:
      "hora evento evento cuota luz"
      ". mercado sel cuota luz";
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 164, 27, .12);
  }
  .filas tr:last-child { border-bottom: 0; }
  .filas td { padding: 1px 3px; }
  .t-hora { grid-area: hora; }
  .t-evento { grid-area: evento; }
  .t-mercado { grid-area: mercado; font-size: .86em; }
  .t-sel { grid-area: sel; font-size: .86em; }
  .t-cuota { grid-area: cuota; font-size: 1.12em; }
  .t-luz { grid-area: luz; }
  .t-cuota [data-mov]::before { display: none; }
}

.regla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--placa);
  font-weight: 500;
}

.regla-control { display: inline-flex; align-items: center; gap: 6px; }

.regla-valor {
  min-width: 4.4ch;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--cara);
  color: var(--led);
  font-family: "Doto", ui-monospace, monospace;
  font-size: 1.4rem;
  font-weight: 800;
  font-variation-settings: "ROND" 100;
  line-height: 1.1;
  text-align: center;
  text-shadow: var(--brillo);
}

.regla-boton {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--esmalte);
  border-radius: 8px;
  background: transparent;
  color: var(--esmalte);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.regla-boton:hover { background: var(--esmalte); color: var(--sobre-esmalte); }
.regla-boton:active { transform: translateY(1px); }
.regla-boton:disabled { opacity: .35; cursor: default; background: transparent; color: var(--esmalte); }
.regla-boton[hidden] { display: none; }

.estacion-nota { margin: 10px 0 0; color: var(--suave); font-size: .875rem; }

/* Los avisos salen impresos, como el billete de una máquina */

.avisos { display: flex; flex-direction: column; }

.avisos-titulo {
  margin: 0 0 10px;
  font-weight: 700;
  font-stretch: 110%;
}

.ranura {
  position: relative;
  z-index: 1;
  height: 14px;
  border-radius: 7px;
  background: var(--caja);
  box-shadow: inset 0 4px 5px rgba(0, 0, 0, .75);
}

.avisos-vacio {
  margin: 14px 12px 0;
  color: var(--suave);
  font-size: .9375rem;
}

.billetes {
  display: grid;
  gap: 10px;
  margin: -6px 12px 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.billete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 16px 14px 18px;
  background: var(--papel);
  color: #1A2433;
  font-size: .9rem;
  line-height: 1.35;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .55);
  -webkit-mask: radial-gradient(circle 3.5px at 5px 100%, transparent 96%, #000) 0 0 / 10px 100% repeat-x;
  mask: radial-gradient(circle 3.5px at 5px 100%, transparent 96%, #000) 0 0 / 10px 100% repeat-x;
}

.billete-evento { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billete-hora { color: #4E5865; }
.billete-sel { grid-column: 1 / -1; }
.billete-cuota {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-family: "Doto", ui-monospace, monospace;
  font-size: 1.55rem;
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  line-height: 1.1;
}
.billete-regla {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px dashed #A9ABA3;
  color: #4E5865;
  font-size: .8rem;
}

.billete.nuevo { animation: sale .55s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes sale {
  from { transform: translateY(-110%); }
  to { transform: none; }
}

@media (min-width: 640px) and (max-width: 1039px) {
  .billetes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- Secciones ---------- */

.seccion { padding: clamp(64px, 9vw, 120px) 0; }

/* El segundo lema, en una banda oscura justo después del tablero */

.metodo {
  --foco: var(--led);
  background: var(--noche);
  color: var(--noche-tinta);
}

.metodo h2 {
  max-width: none;
  margin-bottom: .6em;
  font-size: var(--t-grande);
  font-stretch: 125%;
}
.metodo h2 span { display: block; }

.metodo .texto { color: var(--noche-suave); font-size: 1.125rem; }
.metodo .texto p { max-width: 54ch; }

@media (min-width: 900px) {
  .metodo .texto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }
}

/* Cómo funciona: una línea con cuatro paradas, en orden */

.funciona { background: var(--placa); }

.linea {
  position: relative;
  display: grid;
  gap: 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.linea::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 20px;
  width: 4px;
  border-radius: 2px;
  background: var(--tinta);
}

.parada { position: relative; padding-left: 64px; }

.parada-num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background: var(--placa);
  font-weight: 800;
  font-stretch: 110%;
}

.parada h3 { margin: 8px 0 8px; }
.parada p { margin: 0; color: var(--suave); }

@media (min-width: 900px) {
  .linea { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .linea::before { top: 20px; bottom: auto; left: 22px; right: 22px; width: auto; height: 4px; }
  .parada { padding: 64px 0 0; }
  .parada h3 { margin-top: 0; }
}

/* Mercados: como un horario, deporte a la izquierda */

.horario { margin: 44px 0 20px; }

.horario-fila {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-top: 2px solid var(--tinta);
}
.horario-fila:last-child { border-bottom: 2px solid var(--tinta); }

.horario dt {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  font-stretch: 120%;
  line-height: 1.1;
}
.horario dd { margin: 0; max-width: 64ch; }

@media (min-width: 760px) {
  .horario-fila { grid-template-columns: minmax(200px, 1fr) minmax(0, 2.3fr); column-gap: 32px; }
}

/* Medir: CLV */

.medir { background: var(--placa); }

@media (min-width: 1040px) {
  .medir-dentro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 56px;
    align-items: center;
  }
}

.medir .texto { max-width: 58ch; }

.clv {
  margin: 32px 0 0;
  padding: 18px 12px 8px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--piedra);
}

.clv-grafico { display: block; width: 100%; height: auto; font-family: "Archivo", sans-serif; }
.clv-rejilla { stroke: var(--linea); stroke-width: 1; }
.clv-eje { fill: var(--suave); font-size: 12px; }
.clv-linea { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.clv-cierre { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 5 5; }
.clv-nivel { stroke: var(--esmalte); stroke-width: 1.5; stroke-dasharray: 5 5; }
.clv-tramo { fill: none; stroke: var(--esmalte); stroke-width: 2.5; }
.clv-apuesta { fill: var(--led); stroke: var(--tinta); stroke-width: 2.5; }
.clv-fin { fill: var(--tinta); }
.clv-rotulo { fill: var(--tinta); font-size: 13px; font-weight: 600; }
.clv-valor { fill: var(--esmalte); font-size: 16px; font-weight: 800; }

@media (max-width: 639px) {
  .clv-eje { font-size: 16px; }
  .clv-rotulo { font-size: 18px; }
  .clv-valor { font-size: 19px; }
}

/* Hecho para dejarlo encendido */

.ventajas {
  display: grid;
  gap: 8px 48px;
  margin: 40px 0 0;
}

.ventajas > div { padding: 18px 0 14px; border-top: 2px solid var(--tinta); }
.ventajas dt { font-size: 1.25rem; font-weight: 700; font-stretch: 106%; }
.ventajas dd { margin: 6px 0 0; color: var(--suave); max-width: 52ch; }

@media (min-width: 760px) {
  .ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Precios: tabla de tarifas ---------- */

.precios { border-top: 1px solid var(--linea); }

.tarifas {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  text-align: left;
}

.tarifas thead th {
  padding: 0 20px 10px 0;
  border-bottom: 2px solid var(--tinta);
  color: var(--suave);
  font-size: .875rem;
  font-weight: 600;
}

.tarifas tbody th,
.tarifas tbody td {
  padding: 24px 20px 24px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tarifas tbody th { width: 40%; font-weight: 400; }

.plan-nombre {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}

.plan-incluye {
  display: block;
  max-width: 46ch;
  margin-top: 10px;
  color: var(--suave);
  font-size: .9375rem;
  line-height: 1.5;
}

.precio {
  display: block;
  font-size: 2.3rem;
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.precio-menor { font-size: 1.6rem; }

.precio-nota {
  display: block;
  max-width: 22ch;
  margin-top: 6px;
  color: var(--suave);
  font-size: .875rem;
  line-height: 1.4;
}

.col-movil { display: none; }

@media (max-width: 759px) {
  .tarifas thead { display: none; }
  .tarifas, .tarifas tbody, .tarifas tr, .tarifas th { display: block; }
  .tarifas tr { padding-top: 6px; border-top: 2px solid var(--tinta); }
  .tarifas tr + tr { margin-top: 28px; }
  .tarifas tbody th { width: auto; padding: 16px 0 12px; border-bottom: 0; }
  .tarifas tbody td {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--linea);
  }
  .tarifas tbody td:last-child { border-bottom: 0; }
  .col-movil { display: block; grid-row: span 2; color: var(--suave); font-size: .875rem; padding-top: .4em; }
  .precio { font-size: 1.9rem; }
  .precio-menor { font-size: 1.5rem; }
}

.precios-pie {
  display: grid;
  gap: 32px 56px;
  margin-top: 44px;
}

@media (min-width: 960px) {
  .precios-pie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.fundador {
  padding: 24px 24px 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2E3236, #1F2225);
  color: #E8E6DE;
}
.fundador h3 { color: #FFFFFF; }
.fundador p { color: #C9CCC6; }
.fundador p:last-child { margin: 0; }

.fundador-led { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 18px; }

.led-precio {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 6px;
  background-color: var(--cara);
  background-image: radial-gradient(rgba(255, 170, 40, .085) .8px, transparent 1.15px);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 1px #000;
  color: var(--led);
  font-family: "Doto", ui-monospace, monospace;
  font-size: 1.6rem;
  font-weight: 900;
  font-variation-settings: "ROND" 100;
  line-height: 1;
  text-shadow: var(--brillo);
}
.led-precio span:first-child { color: var(--led-tenue); font-size: .7em; text-shadow: none; }

.mantenimiento p { max-width: 58ch; color: var(--suave); }

/* ---------- Lista de espera ---------- */

.lista {
  --foco: var(--led);
  background: var(--banda);
  color: var(--banda-tinta);
}
.lista a { color: var(--banda-tinta); }

@media (min-width: 1040px) {
  .lista-dentro {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 64px;
    align-items: start;
  }
}

.lista .entrada { color: var(--banda-suave); }

.formulario { display: grid; gap: 22px; margin-top: 28px; }

@media (min-width: 1040px) { .formulario { margin-top: 0; } }

.campo { margin: 0; padding: 0; border: 0; min-width: 0; }

.campo > label,
.campo legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
}

.opcional { color: var(--banda-suave); font-weight: 400; }

.formulario input[type="email"],
.formulario textarea {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1A2433;
  font: inherit;
}
.formulario textarea { resize: vertical; min-height: 3.2em; }
.formulario ::placeholder { color: #6B7480; }

.opciones { display: flex; flex-wrap: wrap; gap: 10px; }

.opcion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.opcion:hover { border-color: #FFFFFF; }
.opcion:has(input:checked) { border-color: #FFFFFF; background: rgba(255, 255, 255, .14); }

.formulario input[type="checkbox"],
.formulario input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--led);
  flex: none;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.casilla input { margin-top: 4px !important; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

.lista .boton { background: var(--led); color: #1A2433; }
.lista .boton:hover { background: #FFB84D; color: #1A2433; }

.mensaje { margin: 0; font-weight: 600; min-height: 1.5em; }
.mensaje:empty { display: none; }
.mensaje[data-tipo="error"],
.mensaje[data-tipo="ok"] { padding-left: 12px; border-left: 4px solid var(--led); }

.formulario [aria-invalid="true"] { outline: 3px solid var(--led); outline-offset: 2px; }

.lista-cerrada {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--led);
  background: rgba(255, 255, 255, .1);
  font-weight: 600;
}
.formulario:has(.lista-cerrada:not([hidden])) .campo,
.formulario:has(.lista-cerrada:not([hidden])) .casilla,
.formulario:has(.lista-cerrada:not([hidden])) .enviar { opacity: .55; }

/* ---------- Preguntas ---------- */

@media (min-width: 1040px) {
  .preguntas-dentro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 56px;
  }
}

.preguntas-lista { margin-top: 12px; border-bottom: 1px solid var(--linea); }

.preguntas details { border-top: 1px solid var(--linea); }

.preguntas summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  color: var(--esmalte);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}
.preguntas details[open] summary::after { content: "\2212"; }
.preguntas details p { max-width: 64ch; margin: 0 0 22px; color: var(--suave); }

/* ---------- Pie ---------- */

.pie {
  padding: 44px 0 52px;
  background: var(--pie-fondo);
  color: var(--pie-tinta);
  font-size: .9375rem;
}
.pie a { color: #FFFFFF; }
.pie p { max-width: 80ch; }

.pie-juego { display: flex; gap: 14px; align-items: flex-start; }
.pie-juego span:last-child { padding-top: .45em; }
.edad-pie { width: 38px; height: 38px; color: #FFFFFF; }

.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }
.pie-enlaces span { color: #8D949C; }

/* ---------- Páginas legales y de aviso ---------- */

.legal-dentro { max-width: calc(72ch + 80px); padding-top: 56px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); max-width: 18ch; }
.legal h2 { margin-top: 2em; font-size: 1.5rem; font-stretch: 108%; max-width: none; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal-fecha { color: var(--suave); }
.legal-pendiente {
  padding: 14px 18px;
  border-left: 4px solid var(--linea);
  background: var(--placa);
}

.legal-datos {
  display: grid;
  grid-template-columns: minmax(8em, max-content) minmax(0, 1fr);
  gap: 8px 24px;
  margin: 0 0 1em;
}
.legal-datos dt { color: var(--suave); }
.legal-datos dd { margin: 0; font-weight: 600; }

.gracias { padding: clamp(64px, 12vw, 140px) 0; }
.gracias h1 { margin-bottom: .4em; }

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .billete.nuevo,
  .t-cuota .cambia { animation: none; }
  .filas td, .t-luz::before { transition: none; }
}