/* EJE · «El mostrador a las 22:05» — piel de marca (spec eje.md §1, portafolio §3.4).
   Territorio exclusivo de EJE: claro de tiquete con bloques planos de azul y el cierre en tinta,
   radio 12 px, anillo y tiquete dentado, movimiento por toque con sobrepaso y cifras que ruedan.
   No se usa ninguna forma, color, tipografía ni movimiento de otra marca. */

/* ---------- Fuentes autoalojadas (subconjunto latino U+0000-00FF + puntuación) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700 800;
  font-stretch: 100%; font-display: swap;
  src: url('fuentes/bricolage-grotesque-700-800-opsz96.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fuentes/figtree-400-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fuentes/jetbrains-mono-400-700.woff2') format('woff2');
}
/* Del kit: IBM Plex Sans se usa SOLO en el endoso «UN SISTEMA ZIMPLE» del pie (portafolio §4.1) */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fuentes/ibm-plex-sans-500.woff2') format('woff2');
}
/* Respaldos con métricas ajustadas: si la fuente tarda, el texto no salta (CLS ≤ 0,02) */
@font-face {
  font-family: 'Titular respaldo'; src: local('Arial Black'), local('Impact'), local('Helvetica');
  size-adjust: 104%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Cuerpo respaldo'; src: local('Arial'), local('Helvetica');
  size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Datos respaldo'; src: local('Consolas'), local('Courier New'), local('monospace');
  size-adjust: 104%; ascent-override: 91%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- Contrato de tokens (portafolio §6.1, valores de EJE spec §1.1) ---------- */
:root {
  --fondo: #FFFFFF;
  --fondo-alt: #F4F4F3;          /* tiquetes y paneles */
  --fondo-azul: #EEF3FB;         /* realce plano */
  --tinta: #141414;              /* 18,42:1 sobre blanco · 16,74:1 sobre superficie */
  --apoyo: #6A7078;              /* 5,00:1 sobre blanco · 4,54:1 sobre superficie */
  --filete: rgba(20, 20, 20, .14);
  --borde-control: #6A7078;
  --acento-grafico: #FF6B1A;     /* 2,85:1 sobre blanco: NUNCA lleva texto */
  --acento-texto: #1359C9;       /* 6,36:1 sobre blanco */
  --bloque: #1B6FF0;             /* con texto blanco: 4,59:1 */
  --bloque-menor: #1359C9;       /* con texto blanco pequeño: 6,36:1 */
  --foco: #1359C9;

  --radio: 12px;
  --dur-corta: 140ms;
  --dur-media: 260ms;
  --dur-cierre: 600ms;
  --curva: cubic-bezier(.34, 1.3, .64, 1);   /* con sobrepaso: exclusiva de EJE */

  --fuente-titular: 'Bricolage Grotesque', 'Titular respaldo', 'Arial Black', sans-serif;
  --fuente-cuerpo: 'Figtree', 'Cuerpo respaldo', Arial, sans-serif;
  --fuente-datos: 'JetBrains Mono', 'Datos respaldo', Consolas, monospace;

  /* módulo de 8 px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 40px; --e8: 56px; --e9: 80px; --e10: 112px;
  --lateral: 88px;
}
@media (max-width: 1100px) { :root { --lateral: 40px; } }
@media (max-width: 720px)  { :root { --lateral: 20px; } }

body { background: var(--fondo); color: var(--tinta); }
::selection { background: var(--acento-texto); color: #FFFFFF; }

.env {
  max-width: calc(1248px + var(--lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--lateral);
}

/* ---------- Tipografía (§1.2) ---------- */
.t-portada {
  font-family: var(--fuente-titular); font-weight: 800;
  font-size: clamp(2.375rem, 1.3rem + 3.3vw, 4.25rem);
  line-height: .94; letter-spacing: -.03em;
}
.t-hora {
  font-family: var(--fuente-titular); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: .98; letter-spacing: -.025em;
}
.t-sub {
  font-family: var(--fuente-titular); font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.08; letter-spacing: -.02em;
}
.t-portada em, .t-hora em { font-style: normal; color: var(--acento-texto); }
.punto { color: var(--acento-grafico); }          /* punto final naranja: solo gráfico */
.t-bajada { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.45; max-width: 46ch; }
.t-lectura { max-width: 60ch; }
.t-menor { font-size: .9375rem; line-height: 1.45; color: var(--apoyo); }
.rotulo, .dato, .t-dato {
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums;
}
.rotulo { font-size: .75rem; letter-spacing: .04em; color: var(--apoyo); }
.dato { font-size: .875rem; }
.t-cifra {
  font-family: var(--fuente-datos); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; color: var(--tinta);
  letter-spacing: -.02em;
}
.t-precio {
  font-family: var(--fuente-datos); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.4rem + .9vw, 2.125rem); line-height: 1; letter-spacing: -.03em;
}
strong, b { font-weight: 600; }

/* ---------- Rótulo de hora: la línea de tiempo del día (§1.4) ---------- */
.hora__rot {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--fuente-datos); font-size: .8125rem; letter-spacing: .02em;
  color: var(--apoyo);
}
.hora__rot b { font-weight: 700; color: var(--tinta); font-size: .9375rem; }
.hora__rot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento-grafico); flex: 0 0 8px;
}
.hora__rot::after { content: ''; width: 40px; height: 2px; background: var(--filete); }

/* ---------- Retícula de ocho columnas ordenadas por horas (§1.4) ---------- */
.hora { padding-block: var(--e7); position: relative; scroll-margin-top: 76px; }
.hora + .hora { border-top: 1px solid var(--filete); }
.hora__reticula {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--e5) var(--e6); align-items: start;
}
.col-lectura { grid-column: 1 / 5; display: grid; gap: var(--e3); align-content: start; }
.col-escena  { grid-column: 5 / 9; }
.col-ancha   { grid-column: 1 / 9; }
.col-mitad-a { grid-column: 1 / 5; }
.col-mitad-b { grid-column: 5 / 9; }
.col-ancho-a { grid-column: 1 / 6; }
.col-ancho-b { grid-column: 6 / 9; }
@media (max-width: 1000px) {
  .hora { padding-block: var(--e6); }
  .hora__reticula { grid-template-columns: 1fr; gap: var(--e4); }
  .col-lectura, .col-escena, .col-ancha, .col-mitad-a, .col-mitad-b,
  .col-ancho-a, .col-ancho-b { grid-column: 1; }
  /* La línea de tiempo pasa a vertical, a la izquierda (§1.4) */
  .hora { padding-left: var(--e5); }
  .hora::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--filete);
  }
  .hora__rot::after { width: 24px; }
}

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: var(--fondo); border-bottom: 1px solid var(--filete);
  transition: border-color var(--dur-corta) var(--curva);
}
.barra[data-pegada="si"] { border-bottom-color: rgba(20, 20, 20, .3); }
.barra__fila { height: 64px; display: flex; align-items: center; gap: var(--e5); }
.barra__logo { display: flex; align-items: center; }
.barra__logo img { height: 26px; width: auto; }
.barra__menu { display: flex; align-items: center; gap: var(--e5); margin-left: auto; }
.barra__menu a, .barra__menu button { color: var(--tinta); text-decoration: none; font-size: .9375rem; }
.barra__menu a:hover, .barra__menu button:hover { color: var(--acento-texto); }
/* El botón de la barra manda sobre la regla del menú (lección de FARO) */
.barra__menu a.boton--primario, .barra__menu a.boton--primario:hover { color: #FFFFFF; }
.barra__movil { display: none; margin-left: auto; }
.barra__movil button { color: var(--tinta); font-weight: 600; }
@media (max-width: 1000px) {
  .barra__menu { display: none; }
  .barra__movil { display: flex; gap: var(--e3); align-items: center; }
  .panel-menu:not([hidden]) + .barra__movil { display: flex; }
}
.panel-menu {
  position: absolute; left: 0; right: 0; top: 64px; z-index: 49;
  background: var(--fondo); border-bottom: 1px solid var(--filete);
}
.panel-menu__cols { display: grid; gap: var(--e3); padding-block: var(--e5); }
.panel-menu a { display: block; padding: var(--e3) 0; border-top: 1px solid var(--filete); color: var(--tinta); text-decoration: none; }
.panel-menu a:first-child { border-top: 0; }

/* ---------- Botones (radio 12, nunca píldora) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  height: 48px; padding-inline: var(--e5); border-radius: var(--radio);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent;
  transition: background-color var(--dur-media) var(--curva),
              border-color var(--dur-media) var(--curva),
              color var(--dur-media) var(--curva),
              transform var(--dur-corta) var(--curva);
}
.boton--primario { background: var(--bloque); color: #FFFFFF; }      /* 4,59:1 */
.boton--primario:hover { background: var(--bloque-menor); }          /* 6,36:1 */
.boton--primario:active { transform: translateY(1px); }
.boton--secundario { background: transparent; color: var(--acento-texto); border-color: var(--acento-texto); }
.boton--secundario:hover { background: var(--fondo-azul); }
.boton--menor { height: 40px; font-size: .9375rem; padding-inline: var(--e4); }
@media (max-width: 720px) { .boton { height: 50px; width: 100%; } .boton--menor { width: auto; } }

a.enlace { color: var(--acento-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.enlace:hover { text-decoration-thickness: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- Tiquete: forma madre 2, con borde dentado (§1.3) ---------- */
.tiquete {
  background: var(--fondo-alt); border: 1px solid var(--filete);
  border-radius: var(--radio) var(--radio) 0 0;
  padding: var(--e5) var(--e5) var(--e6);
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums;
  font-size: .875rem; line-height: 1.5;
  border-bottom: 0;
  /* zigzag de 10 px SOLO en tiquetes (atajo `mask`: el tamaño y la repetición son suyos) */
  --diente-a: linear-gradient(#000 0 0);
  --diente-b: conic-gradient(from -45deg at bottom, #0000 25%, #000 0);
  -webkit-mask: var(--diente-a) top/100% calc(100% - 10px) no-repeat,
                var(--diente-b) bottom/20px 10px repeat-x;
  mask: var(--diente-a) top/100% calc(100% - 10px) no-repeat,
        var(--diente-b) bottom/20px 10px repeat-x;
}
.tiquete__cab { display: flex; justify-content: space-between; gap: var(--e3); font-weight: 700; }
.tiquete__sello { color: var(--apoyo); font-weight: 400; }
.tiquete__regla { border-top: 1px dashed rgba(20, 20, 20, .3); margin-block: var(--e3); }
.tiquete__lin {
  display: flex; justify-content: space-between; gap: var(--e4); padding-block: 3px;
}
.tiquete__lin span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiquete__lin--total { font-weight: 700; font-size: 1.0625rem; padding-top: var(--e2); }
.tiquete__lin--total .punto-ganancia {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento-grafico); margin-right: var(--e2);
}
/* eje-tiquete: las líneas se imprimen de arriba abajo, una vez */
.tiquete__lin[data-imp="no"] { opacity: 0; }
.tiquete__lin[data-imp="si"] { animation: eje-tiquete var(--dur-corta) var(--curva) both; }
@keyframes eje-tiquete {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0); }
}

/* ---------- Fichas de tipo de negocio: círculos de 64 px (§1.5) ---------- */
.fichas { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); }
.ficha {
  display: grid; justify-items: center; gap: var(--e2); width: 76px;
  background: none; border: 0; color: var(--tinta); cursor: pointer;
  font-size: .8125rem; line-height: 1.2; text-align: center;
}
.ficha__disco {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px;
  display: grid; place-items: center;
  background: var(--fondo-alt); border: 1px solid var(--filete);
  box-shadow: 0 0 0 0 var(--acento-texto);
  transition: box-shadow var(--dur-media) var(--curva), background-color var(--dur-media) var(--curva);
}
.ficha__disco svg { width: 28px; height: 28px; stroke: var(--tinta); }
.ficha[aria-pressed="true"] .ficha__disco {
  background: var(--fondo-azul); box-shadow: 0 0 0 3px var(--acento-texto);
}
.ficha[aria-pressed="true"] { font-weight: 600; }
.ficha:hover .ficha__disco { background: var(--fondo-azul); }

/* ---------- Fila de cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cifras > div { padding-inline: var(--e5); border-left: 1px solid var(--filete); }
.cifras > div:first-child { border-left: 0; padding-left: 0; }
.cifras p { color: var(--apoyo); font-size: .9375rem; margin-top: var(--e2); }
.cifras details { margin-top: var(--e2); }
.cifras summary {
  font-family: var(--fuente-datos); font-size: .75rem; color: var(--acento-texto);
  cursor: pointer; list-style: none;
}
.cifras summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .cifras { grid-template-columns: 1fr 1fr; gap: var(--e5) 0; }
  .cifras > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Firma «El anillo del cierre» (§1.6, §3.2) ---------- */
.anillo-escena {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--e3) var(--e5); align-items: start;
}
.anillo-lado { display: grid; gap: var(--e3); align-content: start; }
.anillo-escena > .sr-only, .anillo-escena > .marco__rotulo,
.anillo-escena > .reparto, .anillo-escena > #wa-firma { grid-column: 1 / -1; }
@media (max-width: 1000px) { .anillo-escena { grid-template-columns: 1fr; } }
.anillo-caja { position: relative; width: 100%; max-width: 236px; margin-inline: auto; }
.anillo { display: block; width: 100%; height: auto; overflow: visible; }
.anillo__pista { fill: none; stroke: var(--filete); stroke-width: 16; }
.anillo__arco {
  fill: none; stroke-width: 16; stroke-linecap: butt;
  transition: stroke-dasharray var(--dur-media) var(--curva), opacity var(--dur-media) var(--curva);
}
.anillo__marca {
  fill: none; stroke: var(--acento-grafico); stroke-width: 4; stroke-linecap: round;
  transform-origin: 110px 110px;
  transition: transform var(--dur-media) var(--curva);
}
.anillo__centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.anillo__pregunta { font-size: .8125rem; color: var(--apoyo); font-family: var(--fuente-cuerpo); }
.anillo__cifra {
  font-family: var(--fuente-datos); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 1.375rem; letter-spacing: -.03em; line-height: 1;
}
.anillo__pie { font-size: .75rem; color: var(--apoyo); font-family: var(--fuente-datos); }
/* eje-registradora: los dígitos ruedan una vez (exclusivo de EJE) */
.rueda { display: inline-block; }
.rueda.gira { animation: eje-registradora 400ms var(--curva) 1; }
@keyframes eje-registradora {
  0%   { transform: translateY(.45em); opacity: 0; }
  60%  { transform: translateY(-.06em); opacity: 1; }
  100% { transform: translateY(0); }
}
/* eje-cierre: el anillo completa 360° */
.anillo-caja.cerrando .anillo__marca { animation: eje-cierre var(--dur-cierre) var(--curva) 1; }
@keyframes eje-cierre { to { transform: rotate(360deg); } }

.partes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.parte {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 36px; padding-inline: var(--e3); border-radius: var(--radio);
  border: 1px solid var(--filete); background: var(--fondo);
  font-size: .875rem; font-weight: 600; color: var(--tinta); cursor: pointer;
  transition: background-color var(--dur-media) var(--curva), border-color var(--dur-media) var(--curva);
}
.parte i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.parte[aria-selected="true"] { background: var(--fondo-azul); border-color: var(--acento-texto); }
.parte:hover { background: var(--fondo-azul); }

.productos { display: grid; gap: var(--e2); }
.producto {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  width: 100%; min-height: 44px; padding: var(--e2) var(--e3);
  border: 1px solid var(--filete); border-radius: var(--radio); background: var(--fondo);
  text-align: left; font-size: .9375rem; cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva), transform var(--dur-corta) var(--curva);
}
.producto:hover { background: var(--fondo-azul); }
.producto:active { transform: scale(.985); }
.producto span:last-child { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

.panel {
  border: 1px solid var(--filete); border-radius: var(--radio); padding: var(--e5);
  background: var(--fondo); display: grid; gap: var(--e3);
}
.panel__disp {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2);
  border-top: 1px solid var(--filete); padding-top: var(--e3);
}
.panel__disp div { font-size: .8125rem; color: var(--apoyo); }
.panel__disp b { display: block; font-family: var(--fuente-datos); font-size: .75rem; color: var(--tinta); }
.vinetas { display: grid; gap: var(--e2); }
.vinetas li { position: relative; padding-left: var(--e5); font-size: .9375rem; }
.vinetas li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 14px; height: 2px; border-radius: 2px; background: var(--acento-texto);
}

/* ---------- Marco de captura, con marcadores naranja numerados (§1.7) ---------- */
.marco { display: grid; gap: var(--e2); }
.marco__caja {
  border: 1px solid var(--filete); border-radius: var(--radio); overflow: hidden;
  background: var(--fondo-alt); position: relative;
}
.marco__caja img { width: 100%; display: block; }
.marco--vacio .marco__caja {
  display: grid; place-items: center; align-content: center; gap: var(--e2);
  min-height: 240px; padding: var(--e5); text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(20, 20, 20, .045) 0 10px, transparent 10px 20px),
    var(--fondo-alt);
}
.marco__codigo {
  font-family: var(--fuente-datos); font-weight: 700; font-size: .875rem;
  color: #FFFFFF; background: var(--bloque-menor);           /* 6,36:1 */
  border-radius: var(--radio); padding: 4px 10px;
}
.marco__que { font-size: .875rem; color: var(--tinta); max-width: 44ch; }
.marco__rotulo { font-family: var(--fuente-datos); font-size: .75rem; color: var(--apoyo); }
.marcador {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento-grafico); color: var(--tinta);   /* 6,47:1 invertido: cifra sobre naranja */
  display: inline-grid; place-items: center;
  font-family: var(--fuente-datos); font-weight: 700; font-size: .75rem;
}
.marcadores { display: grid; gap: var(--e2); }
.marcadores li { display: grid; grid-template-columns: 22px 1fr; gap: var(--e3); align-items: start; font-size: .875rem; }

/* ---------- Un sábado: lista de horas + marco pegajoso ---------- */
.sabado { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: start; }
.sabado__lista { display: grid; }
.sabado__hora {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--e4);
  width: 100%; text-align: left; padding-block: var(--e4);
  border-top: 1px solid var(--filete); background: none; cursor: pointer;
  transition: background-color var(--dur-media) var(--curva);
}
.sabado__hora:first-child { border-top: 0; }
.sabado__hora time { font-family: var(--fuente-datos); font-weight: 700; font-size: .9375rem; color: var(--acento-texto); }
.sabado__hora p { font-size: .9375rem; }
.sabado__hora[aria-current="true"] { background: var(--fondo-azul); }
.sabado__hora[aria-current="true"] time { color: var(--tinta); }
.sabado__marco { position: sticky; top: 88px; }
@media (max-width: 1000px) {
  .sabado { grid-template-columns: 1fr; gap: var(--e5); }
  .sabado__marco { position: static; }
}

/* ---------- Bloque plano de azul a sangre (único de EJE) ---------- */
.bloque {
  background: var(--bloque); color: #FFFFFF; border-radius: var(--radio);
  padding: var(--e6); display: grid; gap: var(--e4);
}
.bloque h2, .bloque h3 { color: #FFFFFF; }
.bloque p, .bloque li { font-size: 1.125rem; line-height: 1.45; }  /* 18 px o más: 4,59:1 */
.bloque .dato { color: #FFFFFF; font-weight: 700; }
.bloque__dos { display: grid; grid-template-columns: 1fr 320px; gap: var(--e6); align-items: start; }
.bloque__menor {
  background: var(--bloque-menor); border-radius: var(--radio); padding: var(--e3) var(--e4);
  font-size: .9375rem; line-height: 1.4;                          /* texto menor: 6,36:1 */
}
.bloque a { color: #FFFFFF; text-decoration: underline; }
/* Variante para bloques con texto menor de 18 px: fondo #1359C9 (6,36:1 con blanco) */
.bloque--denso { background: var(--bloque-menor); padding: var(--e4) var(--e5); gap: var(--e2); }
.bloque--denso .sello, .bloque--denso .sello b, .bloque--denso h3 { color: #FFFFFF; }
.bloque--denso .sello { border-top-color: rgba(255, 255, 255, .32); font-size: .9375rem; }
.bloque--denso .sello b { font-size: 1.0625rem; }
/* El tiquete es papel: dentro del bloque azul conserva su fondo claro Y su tinta.
   (La lección de FARO: superficie clara + texto heredado claro = texto invisible.) */
.bloque .tiquete { background: #FFFFFF; color: #141414; border-color: rgba(20,20,20,.16); }
.bloque .tiquete .tiquete__sello { color: #6A7078; }
.bloque .tiquete__regla { border-top-color: rgba(20,20,20,.3); }
.bloque { padding: var(--e5); }
@media (max-width: 900px) { .bloque__dos { grid-template-columns: 1fr; gap: var(--e4); } }
@media (max-width: 720px) { .bloque__dos > .tiquete { display: none; } }

/* ---------- Precio ---------- */
.periodo { display: inline-flex; border: 1px solid var(--borde-control); border-radius: var(--radio); overflow: hidden; }
.periodo button { height: 40px; padding-inline: var(--e4); font-size: .9375rem; color: var(--tinta); }
.periodo button + button { border-left: 1px solid var(--borde-control); }
.periodo button[aria-pressed="true"] { background: var(--bloque); color: #FFFFFF; font-weight: 600; }

.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.plan {
  border: 1px solid var(--filete); border-radius: var(--radio); padding: var(--e4);
  display: grid; gap: var(--e1); align-content: start;
  transition: border-color var(--dur-media) var(--curva);
}
.plan[data-elegido="si"] { border: 2px solid var(--acento-texto); padding: calc(var(--e4) - 1px); }
.plan__marca {
  font-family: var(--fuente-datos); font-size: .75rem; color: #FFFFFF;
  background: var(--bloque-menor); border-radius: var(--radio); padding: 2px 8px; justify-self: start;
  line-height: 1.4;
}
.plan__marca--vacia { visibility: hidden; }
.plan__cupos { font-family: var(--fuente-datos); font-size: .8125rem; color: var(--apoyo); line-height: 1.5; }
.plan ul { display: grid; gap: var(--e1); margin-top: var(--e2); }
.plan li { position: relative; padding-left: var(--e4); font-size: .875rem; line-height: 1.35; }
.plan li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--acento-texto); }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; } }

.no-cobra { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.no-cobra li {
  font-size: .875rem; color: var(--tinta);
  background: var(--fondo-azul); border-radius: var(--radio); padding: 6px var(--e3);
}

/* Desplegables: la página arranca compacta y el dato sigue publicado */
.desple { border-top: 1px solid var(--filete); }
.desple > summary {
  cursor: pointer; list-style: none; padding-block: var(--e3);
  font-weight: 600; font-size: .9375rem; display: flex; justify-content: space-between; gap: var(--e4);
}
.desple > summary::-webkit-details-marker { display: none; }
.desple > summary::after { content: 'Ver'; font-family: var(--fuente-datos); color: var(--acento-texto); font-weight: 400; }
.desple[open] > summary::after { content: 'Cerrar'; }
.desple > :not(summary) { padding-bottom: var(--e4); }

.tabla { width: 100%; font-size: .875rem; }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-top: 1px solid var(--filete); vertical-align: top; }
.tabla thead th { border-top: 0; font-weight: 700; }
.tabla td.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-env { overflow-x: auto; }

/* Calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e5); align-items: start; }
.calc__controles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3) var(--e5); align-content: start; }
.calc__controles .calc__casillas { grid-column: 1 / -1; }
@media (max-width: 640px) { .calc__controles { grid-template-columns: 1fr; } }
.calc__controles > label { display: grid; gap: var(--e2); grid-template-rows: 2.7em auto; align-content: start; }
@media (max-width: 640px) { .calc__controles > label { grid-template-rows: auto auto; } }
.calc__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); font-size: .9375rem; }
.calc__fila output { font-family: var(--fuente-datos); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__casillas { display: grid; gap: var(--e3); }
.calc__casillas label { display: grid; grid-template-columns: 20px 1fr; gap: var(--e3); align-items: center; font-size: .9375rem; }
input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; border: 1px solid var(--borde-control);
  border-radius: 4px; background: var(--fondo); cursor: pointer;
}
input[type="checkbox"]:checked { background: var(--bloque); border-color: var(--bloque); box-shadow: inset 0 0 0 3px #FFFFFF; }
.calc__salida {
  background: var(--fondo-alt); border: 1px solid var(--filete); border-radius: var(--radio);
  padding: var(--e4); display: grid; gap: var(--e1);
}
.desglose { display: grid; gap: var(--e1); margin-top: var(--e3); }
.desglose li { display: flex; justify-content: space-between; gap: var(--e4); font-size: .875rem; border-top: 1px solid var(--filete); padding-top: var(--e2); }
.desglose li span:last-child { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1000px) { .calc { grid-template-columns: 1fr; gap: var(--e5); } }

/* Deslizador: pista de 2 px, pulgar redondo azul (radio propio: el círculo no es píldora) */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--borde-control); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--borde-control); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%;
  background: var(--bloque); border: 2px solid var(--fondo);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--bloque); border: 2px solid var(--fondo);
}

/* ---------- Sellos de condición ---------- */
.sellos { display: grid; gap: var(--e2); }
.sello {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--e4); align-items: baseline;
  padding-block: var(--e3); border-top: 1px solid var(--filete); font-size: .9375rem;
}
.sello:first-child { border-top: 0; }
.sello b { font-family: var(--fuente-datos); font-weight: 700; font-size: 1.0625rem; color: var(--tinta); }
@media (max-width: 720px) { .sello { grid-template-columns: 1fr; gap: var(--e1); } }

/* ---------- Preguntas ---------- */
.zt-faq summary {
  font-family: var(--fuente-titular); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
  display: flex; justify-content: space-between; gap: var(--e4); padding-block: var(--e3);
}
.zt-faq summary::after { content: '+'; font-family: var(--fuente-datos); color: var(--acento-texto); }
.zt-faq details[open] summary::after { content: '−'; }
.zt-faq details > :not(summary) { padding-bottom: var(--e3); font-size: .9375rem; }

/* ---------- Cierre en tinta: la única sección oscura (§1.1) ---------- */
.cierre {
  --fondo: #141414;
  --fondo-alt: #1E1E1E;
  --fondo-azul: #1B2333;
  --tinta: #F4F4F3;
  --apoyo: #A9B2BF;
  --filete: rgba(244, 244, 243, .22);
  --borde-control: #A9B2BF;
  --acento-texto: #5A96F5;
  --foco: #5A96F5;
  background: var(--fondo); color: var(--tinta);
}
.cierre .boton--secundario { color: var(--acento-texto); border-color: var(--acento-texto); }
.cierre .boton--secundario:hover { background: rgba(90, 150, 245, .14); }
.cierre .tiquete { background: var(--fondo-alt); border-color: var(--filete); color: var(--tinta); }
.cierre .panel, .cierre .plan { background: var(--fondo-alt); border-color: var(--filete); }

.wa {
  background: var(--fondo-alt); border: 1px solid var(--filete);
  border-radius: var(--radio) var(--radio) var(--radio) 2px;
  padding: var(--e4); max-width: 420px; display: grid; gap: var(--e2);
}
.wa__cab { display: flex; justify-content: space-between; gap: var(--e3); font-family: var(--fuente-datos); font-size: .75rem; color: var(--apoyo); }
.wa__cuerpo { font-size: .9375rem; line-height: 1.5; }
.wa__cuerpo b { color: var(--tinta); }
.wa__cifra { font-family: var(--fuente-datos); font-weight: 700; font-variant-numeric: tabular-nums; }

.sistema { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.sistema > div { border-top: 2px solid var(--acento-grafico); padding-top: var(--e3); }
.sistema h3 { font-size: 1rem; }
.sistema p { font-size: .875rem; color: var(--apoyo); margin-top: var(--e1); }
@media (max-width: 900px) { .sistema { grid-template-columns: 1fr 1fr; } }

.marcas { display: grid; }
.marcas a, .marcas div.marcas__fila {
  display: grid; grid-template-columns: 1fr 180px; gap: var(--e4);
  padding-block: var(--e3); border-top: 1px solid var(--filete);
  text-decoration: none; color: inherit; font-size: .9375rem;
}
.marcas > :first-child { border-top: 0; }
.marcas b { font-family: var(--fuente-titular); font-weight: 700; }
.marcas span { font-family: var(--fuente-datos); font-size: .8125rem; color: var(--apoyo); text-align: right; }
@media (max-width: 720px) {
  .marcas a, .marcas div.marcas__fila { grid-template-columns: 1fr; gap: var(--e1); }
  .marcas span { text-align: left; }
}

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: var(--e3); }
.formulario label { font-weight: 600; font-size: .875rem; }
.formulario input, .formulario select, .formulario textarea {
  height: 46px; width: 100%; background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--borde-control); border-radius: var(--radio);
  padding-inline: var(--e3); font-family: var(--fuente-cuerpo);
}
.formulario textarea { height: auto; min-height: 78px; padding: var(--e3); }
.formulario .dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 720px) { .formulario .dos { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie { background: #141414; color: #F4F4F3; padding-block: var(--e7); }
.pie img { height: 30px; width: auto; }
.pie .endoso {
  font-family: 'IBM Plex Sans', 'Cuerpo respaldo', Arial, sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: .75rem;
  color: #8A8A8E; margin-top: var(--e3);                    /* 5,36:1 sobre tinta */
}
.pie a { color: #F4F4F3; text-decoration: none; }
.pie a:hover { color: #5A96F5; }
.pie p { font-size: .875rem; color: #A9B2BF; }

/* CTA fijo en móvil */
.cta-movil {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  padding: var(--e2) var(--lateral) calc(var(--e2) + env(safe-area-inset-bottom));
  background: #FFFFFF; border-top: 1px solid rgba(20, 20, 20, .14);
}
@media (max-width: 1000px) { .cta-movil[data-visible="si"] { display: block; } }

/* Aviso de consentimiento: toma los colores de la página (clara) */
.zt-consent { --fondo: #FFFFFF; --tinta: #141414; }

/* ---------- Movimiento reducido: estado final, nada en curso (§1.6) ---------- */
@media (prefers-reduced-motion: reduce) {
  .tiquete__lin, .tiquete__lin[data-imp="no"] { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  .rueda, .rueda.gira { animation: none !important; transform: none !important; opacity: 1 !important; }
  .anillo-caja.cerrando .anillo__marca { animation: none !important; }
  .anillo__arco, .anillo__marca { transition: none !important; }
  .boton, .producto, .ficha__disco, .parte { transition: none !important; }
}


/* ---------- Compactación medida (spec §6.4: 6.200 px a 1440, 12.000 a 390) ---------- */
@media (max-width: 1000px) {
  .sabado__hora { padding-block: var(--e3); grid-template-columns: 56px 1fr; gap: var(--e3); }
  .zt-faq summary { padding-block: var(--e2); font-size: 1rem; }
  .zt-faq details > :not(summary) { padding-bottom: var(--e2); }
  .sellos .sello { padding-block: var(--e2); }
  .cifras { gap: var(--e4) 0; }
  .sistema { gap: var(--e3); }
  .sistema p { font-size: .8125rem; }
  .marcas a, .marcas div.marcas__fila { padding-block: var(--e2); }
  .formulario { gap: var(--e2); }
  .no-cobra { gap: var(--e1) var(--e2); }
  .plan li { font-size: .875rem; }
  .marco--vacio .marco__caja { min-height: 180px; }
}

/* A 720 px y menos, la página se aprieta sin perder una sola línea publicada:
   menos aire, tipos de dato más pequeños y la tarjeta de plan compacta (spec §6.4). */
@media (max-width: 720px) {
  .hora { padding-block: var(--e5); }
  .fichas { gap: var(--e3) 12px; }
  .plan { padding: var(--e3); }
  .plan[data-elegido="si"] { padding: calc(var(--e3) - 1px); }
  .plan ul { gap: 2px; margin-top: var(--e1); }
  .plan li { font-size: .8125rem; line-height: 1.3; padding-left: var(--e3); }
  .plan__cupos { font-size: .75rem; line-height: 1.4; }
  .planes { gap: var(--e3); }
  .bloque { padding: var(--e4); gap: var(--e3); }
  .bloque p, .bloque li { line-height: 1.35; }
  .calc__salida { padding: var(--e3); }
  .calc { gap: var(--e4); }
  .wa { padding: var(--e3); }
  .marco--vacio .marco__caja { min-height: 150px; }
  .no-cobra li { font-size: .8125rem; padding: 4px var(--e2); }
  /* Las cuatro fichas del bloque común, en filas de dos líneas */
  .sistema { grid-template-columns: 1fr; gap: var(--e2); }
  .sistema > div { padding-top: var(--e2); border-top-width: 1px; border-top-color: var(--filete); }
  .sistema > div:first-child { border-top: 2px solid var(--acento-grafico); }
  .sistema h3 { font-size: .9375rem; }
  .cifras details { margin-top: var(--e1); }
  .t-bajada { line-height: 1.35; }
}
@media (max-width: 720px) {
  .hora__reticula { gap: var(--e3); }
  .sabado__hora { padding-block: var(--e2); }
  .desple > summary { padding-block: var(--e2); }
  .marcas a, .marcas div.marcas__fila { padding-block: var(--e1); }
  .formulario input, .formulario select { height: 44px; }
  .anillo-escena { gap: var(--e2); }
  .productos { gap: var(--e1); }
}


/* Leyenda del reparto: qué significa cada arco, con su importe (spec §3.2) */
.reparto { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: .8125rem; }
.reparto li { display: inline-flex; align-items: baseline; gap: 6px; }
.reparto i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.reparto b { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-weight: 700; }

/* G, H · a 720 px la fila de fichas cabe en dos líneas y el rótulo de hora se parte solo */
@media (max-width: 720px) {
  .ficha { width: 70px; font-size: .75rem; }
  .ficha__disco { width: 56px; height: 56px; flex: 0 0 56px; }
  .ficha__disco svg { width: 24px; height: 24px; }
  .fichas { gap: var(--e3) 10px; }
  .hora__rot { flex-wrap: wrap; }
  .hora__rot::after { display: none; }
  .reparto { gap: var(--e1) var(--e3); font-size: .75rem; }
}