/* ═══════════════════════════════════════════════════════════════════════════════════
   Experiencia Compensar · estilos

   Un solo código, tres composiciones. La caja la fija <html data-formato>; la composición
   la decide la PROPORCIÓN REAL de la caja con container queries:
     vertical   < 0.85   (tótem, tablet en vertical, celular)
     cuadrada   0.85–1.35 (muro 2×2, ventanas a media pantalla)
     horizontal > 1.35   (pantalla o TV apaisada)
   Los tamaños de texto son TOKENS que se redefinen por composición, y cada uno está
   acotado por el ancho Y por el alto de la caja para que nada se salga.
   ═══════════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Montserrat'; src: url(fuentes/montserrat.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url(fuentes/montserrat-alternates.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* Paleta oficial (Guía de uso 2026) */
  --naranja: #FF6600; --naranja-claro: #FFA300; --naranja-oscuro: #AC451F;
  --turquesa: #00E1D9; --verde-oscuro: #077762; --azul: #07406B; --crema: #F0EEE9;
  --blanco: #FFFFFF; --tinta: #000000; --gris: #DADADA;
  /* Derivados */
  --fondo-1: #00506E; --fondo-2: #004C61; --fondo-3: #007678;   /* muestreados del diseño 2026-09-12 */
  --texto: var(--blanco); --texto-suave: rgba(240, 238, 233, .84); --texto-tenue: rgba(240, 238, 233, .62);
  --boton-1: var(--naranja-claro); --boton-2: var(--naranja); --boton-3: var(--naranja-oscuro);
  --vidrio: rgba(255, 255, 255, .12); --vidrio-borde: rgba(255, 255, 255, .28);
  --radio: 999px;
  --alcance-top: 20; --alcance-bottom: 65;
  --escala: 1;
  --fuente: 'Montserrat', system-ui, -apple-system, sans-serif;
}
html[data-led] { --escala: 1.1; --vidrio: rgba(255, 255, 255, .16); --vidrio-borde: rgba(255, 255, 255, .5); --naranja: #F26A16; --boton-2: #F26A16; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--fuente); color: var(--texto); background: #041F2E; display: grid; place-items: center; -webkit-user-select: none; user-select: none; }
/* Táctil y sensor: el navegador no interpreta el contacto como zoom por doble toque (ni espera 300 ms a
   ver si viene el segundo). En la pantalla del stand, que nunca hace scroll, tampoco como arrastre: con
   un sensor el punto se corre unos píxeles entre tocar y soltar, y si el navegador lo toma por un
   desplazamiento cancela el clic. `touch-action` no se hereda: por eso va en todos los elementos. */
.app, .app * { touch-action: manipulation; }
html[data-pantalla-fija] .app, html[data-pantalla-fija] .app * { touch-action: none; }
body { -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; }
button, input, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* ── La caja ─────────────────────────────────────────────────────────────────────── */
.app {
  position: relative; overflow: hidden; container: app / size;
  background: linear-gradient(158deg, var(--fondo-1) 0%, var(--fondo-2) 38%, var(--fondo-medio, #005C6A) 68%, var(--fondo-3) 100%);
  box-shadow: 0 0 80px rgba(0, 0, 0, .5);
}
html[data-formato="9x16"] .app { width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); }
html[data-formato="1x1"]  .app { width: min(100vw, 100dvh); height: min(100dvh, 100vw); }
html[data-formato="16x9"] .app { width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); }
html[data-formato="auto"] .app { width: 100vw; height: 100dvh; box-shadow: none; }

/* `--ajuste` (1 por defecto) lo baja app.js cuando el texto real de una pantalla no cabe: ver `autoajustar`. */
/* ── Tokens por composición (viven en los hijos de la caja: las unidades cq se miden
      contra el contenedor más cercano, y la caja se mide a sí misma) ───────────────── */
.app > * {
  --cab: min(13cqmin, 11cqh);                 /* alto de la cabecera */
  --gutter: 6cqmin;                            /* margen lateral */
  --radio-tarjeta: 4cqmin;
  /* En el celular los valores en cqmin daban 11,7 px de texto y 9,8 px de notas (revisión del cliente
     2026-09-14): cada tamaño tiene un mínimo en px. El 2026-09-16 el cliente pidió otra vez letra más
     grande en mobile: los mínimos subieron unos 2 px. En el tótem (1080 px de ancho) mandan los cqmin. */
  --t-xl:   calc(max(30px, calc(min(7.6cqmin, 5cqh)   * var(--escala))) * var(--ajuste, 1));
  --t-1:    calc(max(25px, calc(min(5.6cqmin, 3.6cqh) * var(--escala))) * var(--ajuste, 1));
  --t-2:    calc(max(22px, calc(min(4.4cqmin, 3cqh)   * var(--escala))) * var(--ajuste, 1));
  --t-3:    calc(max(19px, calc(min(3.6cqmin, 2.5cqh) * var(--escala))) * var(--ajuste, 1));
  --t-base: calc(max(17px, calc(min(3cqmin, 2.1cqh)   * var(--escala))) * var(--ajuste, 1));
  --t-sm:   calc(max(15px, calc(min(2.5cqmin, 1.8cqh) * var(--escala))) * var(--ajuste, 1));
  --t-btn:  calc(max(18px, calc(min(3.6cqmin, 2.5cqh) * var(--escala))) * var(--ajuste, 1));
  --alto-btn:   calc(min(11cqmin, 7.5cqh) * var(--escala));
  --alto-campo: calc(min(8.4cqmin, 5.6cqh) * var(--escala));
  --medida: 34em;                              /* ancho máximo de lectura */
  --u: 1cqmin;                                 /* unidad de espaciado */
  --piso: 32cqh;                               /* franja libre bajo el contenido en el muro (ver más abajo) */
  font-size: var(--t-base);
}
/* Celulares bajos (menos de 700 px de alto): mínimos un punto menores, o el registro, los módulos y la
   ficha de la solución ya no caben sin desplazamiento. */
@container app (aspect-ratio < 0.85) and (max-height: 700px) {
  .app > * {
    --t-xl: calc(max(25px, calc(min(7.6cqmin, 5cqh) * var(--escala))) * var(--ajuste, 1)); --t-1: calc(max(21px, calc(min(5.6cqmin, 3.6cqh) * var(--escala))) * var(--ajuste, 1));
    --t-2: calc(max(18px, calc(min(4.4cqmin, 3cqh) * var(--escala))) * var(--ajuste, 1)); --t-3: calc(max(16.5px, calc(min(3.6cqmin, 2.5cqh) * var(--escala))) * var(--ajuste, 1));
    --t-base: calc(max(14.5px, calc(min(3cqmin, 2.1cqh) * var(--escala))) * var(--ajuste, 1)); --t-sm: calc(max(13px, calc(min(2.5cqmin, 1.8cqh) * var(--escala))) * var(--ajuste, 1));
    --t-btn: calc(max(16px, calc(min(3.6cqmin, 2.5cqh) * var(--escala))) * var(--ajuste, 1));
  }
}
@container app (aspect-ratio >= 0.85) {
  .app > * {
    --cab: min(12cqmin, 11cqh); --gutter: 5cqmin;
    --t-xl: calc(6cqmin * var(--escala) * var(--ajuste, 1)); --t-1: calc(4.6cqmin * var(--escala) * var(--ajuste, 1)); --t-2: calc(3.8cqmin * var(--escala) * var(--ajuste, 1)); --t-3: calc(3.2cqmin * var(--escala) * var(--ajuste, 1));
    --t-base: calc(2.7cqmin * var(--escala) * var(--ajuste, 1)); --t-sm: calc(2.25cqmin * var(--escala) * var(--ajuste, 1)); --t-btn: calc(3.2cqmin * var(--escala) * var(--ajuste, 1));
    --alto-btn: calc(9.6cqmin * var(--escala)); --alto-campo: calc(7.4cqmin * var(--escala));
  }
}
@container app (aspect-ratio >= 1.35) {
  .app > * {
    --t-xl: calc(7cqmin * var(--escala) * var(--ajuste, 1)); --t-1: calc(5cqmin * var(--escala) * var(--ajuste, 1)); --t-2: calc(4cqmin * var(--escala) * var(--ajuste, 1)); --t-3: calc(3.4cqmin * var(--escala) * var(--ajuste, 1));
    --t-base: calc(2.9cqmin * var(--escala) * var(--ajuste, 1)); --t-sm: calc(2.4cqmin * var(--escala) * var(--ajuste, 1)); --t-btn: calc(3.4cqmin * var(--escala) * var(--ajuste, 1));
    --alto-btn: calc(10cqmin * var(--escala)); --alto-campo: calc(7.6cqmin * var(--escala));
  }
}

/* El arte del fondo es el SVG que entregó la diseñadora (vectorial, lienzo 1:1, 27 KB comprimido:
   el mapa de puntos, las esferas y la trama van dentro). Se pinta en `.decor-a` a tamaño `cover`.
   El degradado base de `.app` sigue debajo por si el SVG aún no cargó.
   `--fondo-img` la pone app.js cuando el admin subió otro arte (Contenido → Portada); si no, vale el de fábrica. */
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Las piezas del fondo del diseño nuevo, de arriba abajo:
   1. la esfera naranja que asoma por el borde de arriba, 2. el azul vivo de la esquina superior
   izquierda, 3. dos discos turquesa muy suaves a los lados, 4. la esfera grande naranja-verde de
   abajo a la derecha y 5. el círculo turquesa del pie. Todo con degradados: pesan cero, escalan a
   cualquier formato y el muro LED no tiene que renderizar desenfoques. */
.decor-a { background-image: var(--fondo-img, url(img/fondo.svg)); background-size: cover; background-position: center center; background-repeat: no-repeat; }
/* El arte está dibujado en 1:1. Estirado con `cover` a 9:16 se perdía el mapa de puntos (se recorta
   por los lados) y la esfera de arriba quedaba enorme. En vez de eso, la mitad de arriba del arte se
   pega arriba y la de abajo, abajo, las dos a su tamaño real; el hueco del medio es el degradado
   base, que es justo lo que el arte tiene en el centro. En horizontal, lo mismo con izquierda y
   derecha. Así cada esquina del diseño queda donde la dibujó la diseñadora, en cualquier formato. */
@container app (aspect-ratio < 0.85) {
  .decor-a { background-image: none; }
  .decor-a::before, .decor-a::after { content: ''; position: absolute; left: 0; right: 0; height: 50cqw;
    background-image: var(--fondo-img, url(img/fondo.svg)); background-repeat: no-repeat; background-size: 100cqw 100cqw; }
  /* El borde interior de cada mitad se funde con el degradado base: sin costura visible. */
  .decor-a::before { top: 0; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
  .decor-a::after { bottom: 0; background-position: center bottom; -webkit-mask-image: linear-gradient(to top, #000 58%, transparent); mask-image: linear-gradient(to top, #000 58%, transparent); }
}
@container app (aspect-ratio >= 1.35) {
  .decor-a { background-image: none; }
  .decor-a::before, .decor-a::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50cqh;
    background-image: var(--fondo-img, url(img/fondo.svg)); background-repeat: no-repeat; background-size: 100cqh 100cqh; }
  .decor-a::before { left: 0; background-position: left center; -webkit-mask-image: linear-gradient(to right, #000 58%, transparent); mask-image: linear-gradient(to right, #000 58%, transparent); }
  .decor-a::after { right: 0; background-position: right center; -webkit-mask-image: linear-gradient(to left, #000 58%, transparent); mask-image: linear-gradient(to left, #000 58%, transparent); }
}


/* ── Cabecera ────────────────────────────────────────────────────────────────────── */
.cabecera { position: absolute; top: 0; left: 0; right: 0; height: var(--cab); z-index: 20;
  display: flex; align-items: flex-start; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.pildora { background: var(--naranja); border-radius: 0 0 var(--radio) var(--radio); padding: calc(var(--cab) * .16) calc(var(--cab) * .5) calc(var(--cab) * .19); display: inline-flex; align-items: center;
  box-shadow: 0 .6cqmin 2cqmin rgba(0, 0, 0, .25); }
.pildora img { height: calc(var(--cab) * .38); width: auto; }
.app[data-pantalla="inicio"] .cabecera, .app[data-pantalla="bienvenida"] .cabecera, .app[data-pantalla="cargando"] .cabecera { display: none; }
.progreso { position: absolute; right: var(--gutter); top: calc(var(--cab) * .3); display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); letter-spacing: .04em; white-space: nowrap; }
.progreso .pasos { display: flex; gap: calc(var(--u) * 1); }
.progreso i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: rgba(255, 255, 255, .3); }
.progreso i.hecho { background: var(--turquesa); }
.progreso i.ahora { background: var(--naranja); box-shadow: 0 0 0 .6cqmin rgba(255, 102, 0, .35); }

/* Sello legal obligatorio de las cajas de compensación (escudo + "Vigilado Supersubsidio"
   vertical). Venía dentro del SVG del fondo; se sacó a su propio archivo porque en 9:16 y 16:9 el
   fondo se recorta por el centro y el sello quedaba fuera. Medidas del diseño en el lienzo de 2000:
   14 % de alto, a 7 % del borde derecho y del de abajo. */
.vigilado { position: absolute; right: 6.9cqmin; bottom: 7cqmin; height: 14cqmin; width: auto; z-index: 15; pointer-events: none; user-select: none; }

/* ── La escena: regiones ─────────────────────────────────────────────────────────── */
.escena { position: absolute; inset: 0; z-index: 2; display: grid;
  grid-template-areas: "medio" "cuerpo" "acciones"; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--cab) var(--gutter) calc(var(--u) * 4); gap: calc(var(--u) * 2); animation: aparecer .38s ease both; }
.escena.saliendo { animation: desaparecer .22s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(1.5cqmin); } to { opacity: 1; transform: none; } }
@keyframes desaparecer { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .escena, .escena.saliendo { animation: none; } }
.medio { grid-area: medio; }
.cuerpo { grid-area: cuerpo; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; }
.cuerpo::-webkit-scrollbar { display: none; }
.cuerpo.centrado { justify-content: safe center; align-items: center; text-align: center; gap: calc(var(--u) * 4); }
.cuerpo.centrado > * { flex-shrink: 0; }
.acciones { grid-area: acciones; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.escena:not(:has(.medio)) { grid-template-areas: "cuerpo" "acciones"; grid-template-rows: minmax(0, 1fr) auto; }

/* ── Fotos con curva (vertical) ────────────────────────────────────────────────── */
.medio.foto { position: relative; margin: calc(-1 * var(--cab)) calc(-1 * var(--gutter)) 0; height: min(46cqh, 80cqw); overflow: hidden; background: linear-gradient(135deg, var(--azul), var(--verde-oscuro)); }
.medio.foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.medio.foto.sin-foto img { display: none; }
.medio.foto::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -9cqmin; height: 18cqmin; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--fondo-2); }
.medio.foto + .cuerpo { position: relative; z-index: 2; margin-top: calc(var(--u) * -3); }

/* Cuadrada y horizontal: las pantallas CON FOTO van a dos columnas (panel de foto con el texto
   apoyado en su base a la izquierda; acciones a la derecha, en la banda de alcance). */
@container app (aspect-ratio >= 0.85) {
  .escena:has(.medio.foto) { grid-template-areas: "medio acciones"; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter); }
  .escena:has(.medio.foto):has(.acciones > .btn:only-child) { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .escena:has(.medio.foto) .acciones { align-self: start; justify-content: safe center;
    margin-top: max(0cqmin, calc(var(--alcance-top) * 1cqh - var(--cab)));
    min-height: calc((var(--alcance-bottom) - var(--alcance-top)) * 1cqh);
    max-height: calc(100cqh - max(var(--cab), var(--alcance-top) * 1cqh) - var(--u) * 4); overflow-y: auto; scrollbar-width: none; }
  .escena:has(.medio.foto) .acciones::-webkit-scrollbar { display: none; }
  .acciones > * { flex-shrink: 0; }
  .cuerpo { justify-content: safe center; }
  .medio.foto { grid-area: medio; margin: 0; height: auto; min-height: 0; align-self: stretch; border-radius: var(--radio-tarjeta); overflow: hidden; }
  .medio.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center 30%; }
  .medio.foto::after { display: block; content: ''; position: absolute; inset: 0; bottom: 0; left: 0; right: 0; height: auto; border-radius: 0;
    background: linear-gradient(180deg, rgba(6, 58, 96, 0) 18%, rgba(6, 58, 96, .5) 42%, rgba(8, 88, 92, .97) 72%); }
  .medio.foto.sin-foto::after { background: linear-gradient(160deg, rgba(7, 64, 107, .35), rgba(7, 119, 98, .35)); }
  .medio.foto + .cuerpo { grid-area: medio; z-index: 2; align-self: end; justify-content: safe flex-end; margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4.5); max-height: 100%; text-align: left; }
  .medio.foto + .cuerpo .centro { text-align: left; }
  .medio.foto + .cuerpo .badge-wrap { justify-content: flex-start; }
  .medio.foto + .cuerpo .texto { color: rgba(255, 255, 255, .92); }
  html[data-led] .medio.foto img { display: none; }
}
/* Cuadrada (muro 2×2): UNA columna centrada; el contenido se centra en el espacio libre, el botón
   principal queda abajo y la navegación al pie. Así el ancho no se parte en dos columnas vacías. */
@container app (0.85 <= aspect-ratio < 1.35) {
  /* Formulario a dos columnas: con el relleno de siempre, "NIT de la empresa" y "DV" se recortaban. */
  .app[data-pantalla="registro"] .campo { padding-inline: calc(var(--u) * 2.6); }
  .app[data-pantalla="registro"] .fila { gap: calc(var(--u) * 1.2); }
  .escena:not(:has(.medio.foto)) .cuerpo { align-items: center; text-align: center; }
  .escena:not(:has(.medio.foto)) .acciones { align-items: center; }
  .escena:not(:has(.medio.foto)) .acciones .btn { width: min(56%, 22em); }
  .escena:not(:has(.medio.foto)) .acciones .lista, .escena:not(:has(.medio.foto)) .acciones .pista { width: 100%; }
  .escena:not(:has(.medio.foto)) .acciones .formulario { width: min(100%, 30em); }
  .escena:not(:has(.medio.foto)) .cuerpo .formulario { width: min(100%, 46em); }
}
/* Horizontal (TV, pantalla apaisada): dos columnas; las acciones viven en la banda de alcance */
@container app (aspect-ratio >= 1.35) {
  .escena { grid-template-areas: "medio cuerpo acciones"; grid-template-columns: minmax(0, 26fr) minmax(0, 40fr) minmax(0, 34fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter); }
  .escena:not(:has(.medio)) { grid-template-areas: "cuerpo acciones"; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: minmax(0, 1fr); }
  .escena:has(.acciones > .btn:only-child) { grid-template-columns: minmax(0, 26fr) minmax(0, 48fr) minmax(0, 26fr); }
  .escena:not(:has(.medio)):has(.acciones > .btn:only-child) { grid-template-columns: minmax(0, 70fr) minmax(0, 30fr); }
  .escena:has(.medio.foto) { grid-template-areas: "medio acciones"; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); grid-template-rows: minmax(0, 1fr); }
  .escena:has(.medio.foto):has(.acciones > .btn:only-child) { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); }
  .acciones { align-self: start; justify-content: safe center;
    margin-top: max(0cqmin, calc(var(--alcance-top) * 1cqh - var(--cab)));
    min-height: calc((var(--alcance-bottom) - var(--alcance-top)) * 1cqh);
    max-height: calc(100cqh - max(var(--cab), var(--alcance-top) * 1cqh) - var(--u) * 4); overflow-y: auto; scrollbar-width: none; }
  .acciones::-webkit-scrollbar { display: none; }
  .cuerpo:not(.centrado) { text-align: left; }
  .cuerpo:not(.centrado) .centro { text-align: left; }
  .cuerpo:not(.centrado) .badge-wrap { justify-content: flex-start; }
  .medio.foto + .cuerpo { padding: calc(var(--u) * 4) calc(var(--u) * 5); }
  .medio.foto + .cuerpo .texto { max-width: 30em; }
  .app[data-pantalla="detalle"] .capacidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * .8) calc(var(--u) * 1.6); margin-top: calc(var(--u) * 2); }
  .app[data-pantalla="detalle"] .cap { padding: calc(var(--u) * .9) calc(var(--u) * 3); }
  .app[data-pantalla="detalle"] .tarjeta { padding: calc(var(--u) * 1.8) calc(var(--u) * 3); }
  .app[data-pantalla="detalle"] .tarjetas { margin-top: calc(var(--u) * 2); }
  .app[data-pantalla="detalle"] .cuerpo > .nota { margin-top: calc(var(--u) * 1.5); }
}

/* ── Tipografía ─────────────────────────────────────────────────────────────────── */
.titulo-xl { font-weight: 800; font-size: var(--t-xl); line-height: 1.05; letter-spacing: -.015em; }
.titulo    { font-weight: 700; font-size: var(--t-1); line-height: 1.1; letter-spacing: -.01em; }
.titulo-md { font-weight: 700; font-size: var(--t-2); line-height: 1.15; }
.titulo-sm { font-weight: 700; font-size: var(--t-3); line-height: 1.2; }
.titulo-xl, .titulo, .titulo-md, .titulo-sm { hyphens: manual; overflow-wrap: anywhere; max-width: 100%; }
/* El nombre del evento (saludo y entrada): `autoajustar` le baja `--evento` cuando el que escribió el cliente no cabe. */
.titulo-xl .evento { display: block; font-size: calc(1em * var(--evento, 1)); }
.texto { font-size: var(--t-base); line-height: 1.5; color: var(--texto-suave); max-width: var(--medida); }
.texto-sm { font-size: var(--t-sm); line-height: 1.45; color: var(--texto-tenue); max-width: var(--medida); }
.centro { text-align: center; } .centro .texto, .centro .texto-sm, .cuerpo.centrado .texto, .cuerpo.centrado .texto-sm { margin-inline: auto; }
.nota { font-style: italic; }
.mt-1 { margin-top: calc(var(--u) * 1.5); } .mt-2 { margin-top: calc(var(--u) * 3); } .mt-3 { margin-top: calc(var(--u) * 4.5); } .mt-4 { margin-top: calc(var(--u) * 6); }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--u) * 1.4) calc(var(--u) * 5); border-radius: var(--radio);
  border: .3cqmin solid rgba(255, 255, 255, .55); font-size: var(--t-sm); font-weight: 700; color: var(--blanco); background: rgba(0, 0, 0, .12); max-width: 100%; text-align: center; }
.badge-wrap { display: flex; justify-content: center; }
.solucion-nombre { font-size: var(--t-base); font-weight: 700; color: var(--naranja-claro); text-transform: uppercase; letter-spacing: .08em; }

/* ── Botones ─────────────────────────────────────────────────────────────────────── */
.btn { width: 100%; min-height: var(--alto-btn); border: 0; cursor: pointer; border-radius: var(--radio);
  font-weight: 600; font-size: var(--t-btn); color: var(--blanco); padding: calc(var(--u) * 2) calc(var(--u) * 6); line-height: 1.15;
  background: linear-gradient(180deg, var(--boton-1) 0%, var(--boton-2) 55%, var(--boton-3) 100%);
  box-shadow: inset 0 .3cqmin 0 rgba(255, 255, 255, .35), 0 .8cqmin 0 var(--boton-3), 0 1.2cqmin 3cqmin rgba(0, 0, 0, .35);
  transition: transform .1s, box-shadow .1s, filter .18s, opacity .18s; }
.btn:active:not([aria-disabled="true"]) { transform: translateY(.8cqmin); box-shadow: inset 0 .3cqmin 0 rgba(255, 255, 255, .25), 0 .1cqmin 0 var(--boton-3), 0 .4cqmin 1.2cqmin rgba(0, 0, 0, .3); }
.btn[aria-disabled="true"] { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .3cqmin rgba(255, 255, 255, .25); cursor: not-allowed; }
.btn.secundario { background: var(--vidrio); box-shadow: inset 0 0 0 .3cqmin var(--vidrio-borde); }
.btn.sacudir { animation: sacudir .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes sacudir { 10%, 90% { transform: translateX(-.4cqmin); } 30%, 70% { transform: translateX(.8cqmin); } 50% { transform: translateX(-.8cqmin); } }
.pista { text-align: center; font-size: var(--t-sm); color: var(--naranja-claro); min-height: 1.4em; opacity: 0; transition: opacity .2s; }
.pista.on { opacity: 1; }
.acciones .btn { flex-shrink: 0; }

/* ── Listas de opciones (menú y decisiones) ─────────────────────────────────────── */
.lista { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.opcion { display: flex; align-items: center; gap: calc(var(--u) * 3); width: 100%; min-width: 0; text-align: left; cursor: pointer;
  min-height: var(--alto-btn); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: var(--radio);
  background: var(--vidrio); border: .3cqmin solid var(--vidrio-borde); color: var(--blanco); transition: background .15s, border-color .15s, transform .1s; }
.opcion:active { transform: scale(.985); }
.opcion.on { background: linear-gradient(180deg, var(--boton-1), var(--boton-2)); border-color: transparent; box-shadow: 0 .8cqmin 2.4cqmin rgba(0, 0, 0, .3); }
.opcion .letra { flex: 0 0 auto; width: calc(var(--alto-btn) * .58); height: calc(var(--alto-btn) * .58); border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); font-weight: 800; font-size: var(--t-base); }
.opcion.on .letra { background: rgba(0, 0, 0, .18); }
.opcion .textos { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.opcion .principal { font-weight: 700; font-size: var(--t-3); line-height: 1.2; hyphens: manual; overflow-wrap: anywhere; }
.opcion .secundario { font-size: var(--t-sm); line-height: 1.3; color: var(--texto-suave); }
.opcion.on .secundario { color: rgba(255, 255, 255, .9); }
/* Menú de módulos */
/* Menú de módulos. En VERTICAL (tótem) la lista de 7 se comía el cuerpo y el título del cliente
   quedaba en 0 px de alto: el cuerpo pasa a medir lo suyo y la lista se queda con el resto. */
.app[data-pantalla="menu"] .escena { grid-template-rows: auto minmax(0, 1fr); }
.app[data-pantalla="menu"] .cuerpo { flex: 0 0 auto; }
.app[data-pantalla="menu"] .acciones { min-height: 0; }
.lista.modulos { gap: calc(var(--u) * 1.1); }
.app[data-pantalla="menu"] .opcion.modulo { padding: calc(var(--u) * 1.2) calc(var(--u) * 2.2); gap: calc(var(--u) * 2); }
.app[data-pantalla="menu"] .opcion.modulo .principal { font-size: calc(var(--t-base) * .95); }
.app[data-pantalla="menu"] .opcion.modulo .secundario { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.opcion.modulo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 2.5); padding: calc(var(--u) * 2) calc(var(--u) * 3); }
.opcion.modulo .num { font-size: var(--t-sm); font-weight: 800; color: rgba(255, 255, 255, .6); }
.opcion.modulo .unidad { font-size: calc(var(--t-sm) * .9); font-weight: 600; color: var(--naranja); text-transform: uppercase; letter-spacing: .04em; }
.opcion.modulo .principal { font-size: var(--t-base); margin-top: .1em; }
.opcion.modulo .secundario { font-size: calc(var(--t-sm) * .92); line-height: 1.25; color: var(--texto-suave); }
.opcion.modulo.on .secundario { color: rgba(255, 255, 255, .92); }
.opcion.modulo .estado { font-size: calc(var(--t-sm) * .85); font-weight: 600; color: rgba(255, 255, 255, .5); text-transform: uppercase; white-space: nowrap; }
.opcion.modulo.on .estado { color: rgba(255, 255, 255, .95); }
.opcion.modulo.done { opacity: .5; cursor: not-allowed; }
.opcion.modulo.done .estado { color: rgba(255, 255, 255, .4); }

@container app (aspect-ratio >= 0.85) {
  .opcion .principal { font-size: var(--t-base); }
  .opcion .letra { width: calc(var(--alto-btn) * .5); height: calc(var(--alto-btn) * .5); font-size: var(--t-sm); }
  .lista.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista.rejilla .opcion { border-radius: var(--radio-tarjeta); flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); }
  .lista.rejilla .principal { font-size: calc(var(--t-base) * .95); }
  .lista.rejilla .secundario { font-size: calc(var(--t-sm) * .9); }
  .tarjeta { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); } .tarjeta h3 { font-size: var(--t-base); } .tarjeta .texto { font-size: var(--t-sm); }
}

/* Decisión: la situación (contexto) pesa más que la pregunta, pedido del cliente. */
.app[data-pantalla="decision"] .situacion { color: var(--blanco); }
.app[data-pantalla="decision"] .pregunta { color: var(--texto-suave); font-weight: 600; }

/* Perfil: descripción con más presencia (pedido del cliente). */
.perfil-desc { font-size: var(--t-3); color: var(--blanco); font-weight: 500; line-height: 1.35; }

@container app (aspect-ratio >= 0.85) {
  /* Toda la ficha en UNA pantalla: tres columnas, texto compacto y sin la banda de alcance (que en
     horizontal le robaba tres cuartos del alto a la ficha). */
  .app[data-pantalla="solucionDetalle"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .app[data-pantalla="solucionDetalle"] .acciones { min-height: 0; max-height: none; margin-top: 0; align-self: stretch; align-items: center; }
  .app[data-pantalla="solucionDetalle"] .cuerpo { justify-content: safe center; text-align: center; align-items: center; }
  .app[data-pantalla="solucionDetalle"] .btn { width: min(40%, 20em); }
  .app[data-pantalla="solucionDetalle"] .titulo { font-size: var(--t-2); }
  .app[data-pantalla="solucionDetalle"] .cuerpo { gap: calc(var(--u) * .8); }
  /* Menú: con 7 módulos y su pregunta, las tarjetas van al mínimo cómodo. */
  .app[data-pantalla="menu"] .opcion.modulo { padding: calc(var(--u) * .8) calc(var(--u) * 1.8); column-gap: calc(var(--u) * 1.4); }
  /* Siete tarjetas en dos columnas: el título ocupa tres líneas como mucho (el del escenario 7 tiene 67
     caracteres desde el 2026-09-22 y con dos se cortaba) y la pregunta una. */
  .app[data-pantalla="menu"] .opcion.modulo .principal { font-size: calc(var(--t-base) * .86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .app[data-pantalla="menu"] .opcion.modulo .secundario { font-size: calc(var(--t-sm) * .78); }
  .app[data-pantalla="menu"] .opcion.modulo .unidad, .app[data-pantalla="menu"] .opcion.modulo .estado { font-size: calc(var(--t-sm) * .72); }
  .app[data-pantalla="menu"] .lista.modulos { gap: calc(var(--u) * .9); }
  /* Cierre: el QR y el sello comparten espacio con el aviso del premio y la cuenta atrás. */
  .app[data-pantalla="cierre"] .cuerpo { gap: calc(var(--u) * 1.6); }
  .app[data-pantalla="cierre"] .sello { width: min(15cqmin, 14cqh); height: min(15cqmin, 14cqh); }
  .app[data-pantalla="cierre"] .qr-informe img { width: min(19cqmin, 17cqh); height: min(19cqmin, 17cqh); }
}
@container app (0.85 <= aspect-ratio < 1.35) {
  /* ACCESIBILIDAD DEL MURO (pedido del cliente 2026-09-11, tras probar el 2×2 en sitio): el panel se
     apoya en el piso, así que el pie de la pantalla queda a la altura de las rodillas y alcanzar los
     botones allí era incómodo. El contenido —texto, botones y la barra Atrás/Adelante— sube y deja
     libre la franja `--piso` (32 % del alto, o sea los 64 cm de abajo en un muro de 2 m;
     `?piso=30` la agranda). Para caber en menos alto, el cuadrado baja la escala del texto y del
     espaciado, y la cabecera se encoge. */
  .escena { padding-bottom: var(--piso); }
  .app > * { --escala: .8; --u: .84cqmin; --cab: min(10cqmin, 8.5cqh); }
  /* Cuadrado (muro): siete módulos en dos columnas no dejan sitio para la pregunta; en el muro basta
     la unidad y el título. La pregunta sigue en vertical (tótem y celular) y en horizontal. */
  .app[data-pantalla="menu"] .opcion.modulo { min-height: 0; }
  .app[data-pantalla="menu"] .opcion.modulo .secundario { display: none; }
}
/* Muro LED (escala 1.1): las mismas pantallas necesitan un punto más de holgura. */
@container app (0.85 <= aspect-ratio < 1.35) {
  html[data-led] .app[data-pantalla="detalle"] .capacidades { margin-top: calc(var(--u) * 1.2); }
  html[data-led] .app[data-pantalla="detalle"] .tarjetas { margin-top: calc(var(--u) * 1.2); gap: calc(var(--u) * 1.4); }
  html[data-led] .app[data-pantalla="ruleta"] .rueda-wrap { width: min(40cqmin, 100%, 38cqh); margin-top: 0; }
  html[data-led] .app[data-pantalla="premio"] .cuerpo, html[data-led] .app[data-pantalla="hola"] .cuerpo { gap: calc(var(--u) * 2); }
  html[data-led] .app[data-pantalla="premio"] .codigo { font-size: var(--t-2); }
  html[data-led] .app[data-pantalla="registro"] .formulario { gap: calc(var(--u) * 1.1); }
  html[data-led] .app[data-pantalla="identificar"] .acciones { gap: calc(var(--u) * 1.4); }
  html[data-led] .sello { width: min(16cqmin, 14cqh); height: min(16cqmin, 14cqh); }
  html[data-led] .app[data-pantalla="premio"] .premio-titulo { font-size: var(--t-2); }
  html[data-led] .app[data-pantalla="premio"] .cuerpo, html[data-led] .app[data-pantalla="cierre"] .cuerpo { gap: calc(var(--u) * 1.2); }
  html[data-led] .app[data-pantalla="cierre"] .qr-informe img { width: min(16cqmin, 15cqh); height: min(16cqmin, 15cqh); }
  html[data-led] .app[data-pantalla="registro"] .campo { min-height: calc(var(--alto-campo) * .88); }
  html[data-led] .app[data-pantalla="hola"] .cuerpo .texto { font-size: calc(var(--t-base) * .92); }
  html[data-led] .app[data-pantalla="identificar"] .teclado-num .tecla { height: calc(var(--alto-btn) * .52); }
  html[data-led] .app[data-pantalla="cierre"] .qr-informe { padding: calc(var(--u) * 1) calc(var(--u) * 1.8); }
  html[data-led] .app[data-pantalla="cierre"] .cuerpo { gap: calc(var(--u) * 1); }
  html[data-led] .app[data-pantalla="cierre"] .titulo { font-size: var(--t-2); }
  html[data-led] .app[data-pantalla="registro"] .formulario { gap: calc(var(--u) * .8); }
  html[data-led] .app[data-pantalla="registro"] .check { font-size: calc(var(--t-sm) * .85); padding: 0; }
  html[data-led] .app[data-pantalla="registro"] .leyenda { display: none; }
}

/* ── Formulario ─────────────────────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
/* Campos con el borde naranja de la marca en vez de cajas blancas sueltas (pedido del cliente
   2026-09-10; queda por afinar cuando llegue el Figma). El relleno se mantiene claro: sobre naranja
   pleno el texto que la persona escribe pierde legibilidad. */
.campo { width: 100%; min-height: var(--alto-campo); padding: 0 calc(var(--u) * 4.5); border-radius: var(--radio); border: .45cqmin solid var(--naranja);
  background: #FFF7F2; color: var(--tinta); font-size: var(--t-base); font-weight: 500; outline: 0; -webkit-appearance: none; appearance: none; }
.campo::placeholder { color: #7a6a60; font-weight: 500; }
.campo:focus { border-color: var(--naranja); background: var(--blanco); box-shadow: 0 0 0 .5cqmin rgba(255, 102, 0, .35); }
.campo.error { border-color: var(--naranja-claro); background: #FFE2CC; }
.fila { display: flex; gap: calc(var(--u) * 1.6); } .fila .grupo:last-child { flex: 0 0 28%; } .fila .grupo { flex: 1 1 auto; }
.grupo { display: flex; flex-direction: column; gap: calc(var(--u) * .5); min-width: 0; }
.grupo .ayuda { display: none; font-size: calc(var(--t-sm) * .92); line-height: 1.2; color: var(--naranja-claro); font-weight: 600; padding-left: calc(var(--u) * 2); }
.grupo.error .ayuda { display: block; }
.grupo.error .campo { border-color: var(--naranja-claro); background: #FFE2CC; box-shadow: 0 0 0 .4cqmin rgba(255, 163, 0, .55); }
.check.error .caja { border-color: var(--naranja-claro); box-shadow: 0 0 0 .3em rgba(255, 163, 0, .35); }
.check.error > span:last-child { color: var(--naranja-claro); }
.leyenda { margin: 0; text-align: right; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: calc(var(--u) * 5); top: 50%; width: .7em; height: .7em; border-right: .18em solid var(--naranja); border-bottom: .18em solid var(--naranja); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select.campo { padding-right: calc(var(--u) * 10); }
select.campo:invalid, select.campo.vacio { color: #6b6b6b; }
.check { display: flex; gap: calc(var(--u) * 2.4); align-items: flex-start; cursor: pointer; font-size: var(--t-sm); line-height: 1.35; color: var(--texto-suave); padding: calc(var(--u) * 1) 0; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .caja { flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: .45em; border: .12em solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); display: grid; place-items: center; margin-top: .05em; }
.check .caja svg { width: 70%; height: 70%; stroke: var(--blanco); stroke-width: 3; fill: none; opacity: 0; }
.check input:checked + .caja { background: var(--naranja); border-color: var(--naranja); } .check input:checked + .caja svg { opacity: 1; }
/* Enlaces del kiosco (política de datos en hola, registro y casillas): blancos, en negrita y con subrayado
   blanco. Sin esto el de "hola" salía azul o morado (color por defecto del navegador, también al visitarlo),
   ilegible sobre el fondo (revisión 2026-09-15). */
.escena a, .escena a:visited { color: var(--blanco); font-weight: 700; text-decoration: underline; text-decoration-color: var(--blanco); text-decoration-thickness: .1em; text-underline-offset: .18em; }
.escena a:active { color: var(--naranja-claro); text-decoration-color: var(--naranja-claro); }
@container app (aspect-ratio >= 0.85) {
  .formulario.doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--u) * 1.6); }
  .formulario.doble .check, .formulario.doble .titulo-md, .formulario.doble .leyenda { grid-column: 1 / -1; }
}

/* Registro corto: un campo por paso */
.paso-corto .campo { text-align: center; font-size: var(--t-3); min-height: calc(var(--alto-campo) * 1.15); }
/* Teclado propio (bandera `teclado=propio`) */
.teclado { display: flex; flex-direction: column; gap: calc(var(--u) * .9); margin-top: calc(var(--u) * 1); }
.teclado .fila-t { display: flex; gap: calc(var(--u) * .9); justify-content: center; }
.tecla { flex: 1 1 0; min-width: 0; height: calc(var(--alto-btn) * .7); border: 0; border-radius: .4em; background: rgba(255, 255, 255, .92); color: var(--tinta);
  font-weight: 600; font-size: var(--t-base); cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.tecla:active { background: var(--naranja-claro); }
.tecla.ancha { flex-grow: 2.4; } .tecla.media { flex-grow: 1.6; } .tecla.accion { background: rgba(255, 255, 255, .25); color: var(--blanco); }
.tecla.ancha, .tecla.media, .tecla.listo { font-size: var(--t-sm); }
.tecla.on { background: var(--naranja); color: var(--blanco); }
.tecla.listo { background: linear-gradient(180deg, var(--boton-1), var(--boton-2)); color: var(--blanco); flex-grow: 2; }

/* ── Bienvenida: una sola columna en todos los formatos; toda la pantalla es tocable ── */
.bienvenida { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 4); height: 100%; cursor: pointer; }
.sello { width: min(34cqmin, 22cqh); height: min(34cqmin, 22cqh); border-radius: 50%; background: var(--naranja); display: grid; place-items: center; box-shadow: 0 1.5cqmin 5cqmin rgba(0, 0, 0, .35); flex-shrink: 0; }
.sello img { width: 46%; }
/* Bienvenida: el círculo lleva el símbolo con el logotipo debajo (pieza del cliente 2026-09-11). */
.sello.marca { grid-auto-flow: row; gap: 6%; align-content: center; }
.sello.marca img { width: 40%; }
.sello.marca .palabra { width: 58%; }
/* Saludo: la marca, el título y el botón son un solo bloque centrado, como en la pieza del cliente. */
.app[data-pantalla="inicio"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; row-gap: calc(var(--u) * 5); }
.app[data-pantalla="inicio"] .cuerpo.centrado { gap: calc(var(--u) * 5); overflow: visible; padding-block-end: calc(var(--u) * .6); }
/* En horizontal las acciones viven en la banda de alcance con un alto mínimo; aquí solo hay un botón. */
.app[data-pantalla="inicio"] .acciones { align-items: center; align-self: center; margin-top: 0; min-height: 0; max-height: none; }
.app[data-pantalla="inicio"] .acciones .btn { width: min(72%, 20em); }
.app[data-pantalla="bienvenida"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.app[data-pantalla="bienvenida"] .cuerpo { overflow: visible; }
.app[data-pantalla="bienvenida"] .titulo-xl { max-width: 12em; }
.app[data-pantalla="bienvenida"] .acciones { align-items: center; margin-top: 0; min-height: 0; max-height: none; }
.app[data-pantalla="bienvenida"] .btn { width: min(72%, 24em); }
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="bienvenida"] .acciones { align-self: end; margin-bottom: max(0cqmin, calc((100 - var(--alcance-bottom)) * 1cqh - var(--u) * 4)); }
  .app[data-pantalla="bienvenida"] .btn { width: min(50%, 20em); }
  .app[data-pantalla="bienvenida"] .sello { width: min(18cqmin, 20cqh); height: min(18cqmin, 20cqh); }
  .app[data-pantalla="bienvenida"] .titulo-xl { font-size: var(--t-1); max-width: 16em; }
  .app[data-pantalla="bienvenida"] .bienvenida { gap: calc(var(--u) * 3); }
}

/* ── Menú de escenarios: una columna, rejilla en la banda ───────────────────────── */
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="menu"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .app[data-pantalla="menu"] .cuerpo { overflow: visible; text-align: center; align-items: center; }
  .app[data-pantalla="menu"] .cuerpo .centro { text-align: center; }
  .app[data-pantalla="menu"] .titulo-md { max-width: 24em; }
  .app[data-pantalla="menu"] .acciones { margin-top: calc(var(--u) * 1); align-items: center; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  /* Siete módulos en una columna no caben sin scroll: rejilla de 2 (cuadrado) o 3 (horizontal) columnas. */
  .app[data-pantalla="menu"] .lista.modulos { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
  /* En la rejilla el estado sube a la línea de la unidad y el título ocupa todo el ancho: menos saltos de línea. */
  .app[data-pantalla="menu"] .opcion.modulo { grid-template-columns: auto 1fr auto; grid-template-areas: "num unidad estado" "num principal principal" "num secundario secundario"; column-gap: calc(var(--u) * 1.8); row-gap: 0; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.2); }
  .app[data-pantalla="menu"] .opcion.modulo .secundario { grid-area: secundario; font-size: calc(var(--t-sm) * .85); margin-top: .15em; }
  .app[data-pantalla="menu"] .opcion.modulo .textos { display: contents; }
  .app[data-pantalla="menu"] .opcion.modulo .num { grid-area: num; }
  .app[data-pantalla="menu"] .opcion.modulo .unidad { grid-area: unidad; align-self: end; }
  .app[data-pantalla="menu"] .opcion.modulo .estado { grid-area: estado; align-self: end; }
  .app[data-pantalla="menu"] .opcion.modulo .principal { grid-area: principal; font-size: calc(var(--t-base) * .92); }
  /* Muro LED (escala 1.1): la rejilla de cuatro filas roza el borde a 768×768; tarjetas un poco más bajas. */
  html[data-led] .app[data-pantalla="menu"] .opcion.modulo { padding: calc(var(--u) * 1.15) calc(var(--u) * 2); }
  html[data-led] .app[data-pantalla="menu"] .opcion.modulo .principal { font-size: calc(var(--t-base) * .88); }
  html[data-led] .app[data-pantalla="menu"] .lista.modulos { gap: calc(var(--u) * 1.2); }
  .app[data-pantalla="menu"] .btn { width: min(50%, 22em); }
}
@container app (aspect-ratio >= 1.35) {
  .app[data-pantalla="menu"] .titulo-md { font-size: var(--t-3); }
  .app[data-pantalla="menu"] .texto { display: none; }
  .app[data-pantalla="menu"] .lista.modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app[data-pantalla="menu"] .opcion.modulo:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ── Decisión: la pregunta se apoya sobre las opciones (vertical) ───────────────── */
/* `safe`: si la situación no cabe, se pega arriba en vez de desbordarse hacia arriba bajo la cabecera, donde
   ni se ve ni se alcanza (bug de calidad 2026-09-15 con la decisión 1 del escenario 4, 181 caracteres). */
.app[data-pantalla="decision"] .cuerpo { justify-content: safe flex-end; }
@container app (aspect-ratio >= 1.35) { .app[data-pantalla="decision"] .cuerpo { justify-content: safe center; } }
/* La nota "Todas las opciones son válidas…" la pidió el cliente en toda pantalla: en el muro se
   achica, pero no se oculta. */
@container app (aspect-ratio >= 0.85) { html[data-led] .app[data-pantalla="decision"] .nota { font-size: calc(var(--t-sm) * .85); } }
/* Cuadrado: la pregunta arriba, las tres opciones en fila (tarjetas), confirmar y navegación abajo */
@container app (0.85 <= aspect-ratio < 1.35) {
  .app[data-pantalla="decision"] .lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
  .app[data-pantalla="decision"] .opcion { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); border-radius: var(--radio-tarjeta); }
  .app[data-pantalla="decision"] .opcion .principal { font-size: var(--t-base); }
  .app[data-pantalla="decision"] .cuerpo .texto { max-width: 40em; }
}

/* ── Anillo de capacidades ─────────────────────────────────────────────────────── */
/* Anillo con el porcentaje junto a cada arco, y al lado la lista (nombre y porcentaje) con la leyenda de
   colores. Revisión del cliente 2026-09-14: los nombres dentro del SVG salían diminutos y pisaban los
   arcos, y no se sabía qué color era bueno. Todo el texto va en HTML con la tipografía del kiosco. */
.mapa-wrap { --mapa: min(46cqmin, 27cqh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1) 0; flex-shrink: 0; min-width: 0; }
/* Mapa del impacto de las decisiones (ajustes del cliente 2026-09-16): sin porcentajes ni escalas. Las
   etiquetas van en HTML fuera de la caja, así que la caja deja margen a los lados para "Sostenibilidad". */
.mapa-caja { position: relative; flex: none; width: var(--mapa); aspect-ratio: 1; font-size: var(--t-sm); margin: 1.4em 7em .2em; line-height: 1.15; }
.mapa { display: block; width: 100%; height: 100%; overflow: visible; }
.mapa .orbita { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: .8; }
.mapa .orbita.punteada { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 2 3; }
.mapa .halo { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.mapa .centro { fill: #F7F6F2; }
.mapa .enlace-cap { stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; }
.mapa .punto-cap { fill: rgba(255, 255, 255, .55); }
.mapa .punto-cap.movilizada { fill: var(--naranja); }
.mapa .punto-cap.complementaria { fill: var(--turquesa); }
.mapa .nodo > circle { stroke-width: 1.6; }
.mapa .nodo.movilizada > circle { fill: var(--naranja); stroke: rgba(255, 163, 0, .55); stroke-width: 5; paint-order: stroke; }
.mapa .nodo.complementaria > circle { fill: #00B8B1; stroke: rgba(0, 225, 217, .45); stroke-width: 5; paint-order: stroke; }
.mapa .nodo.oportunidad > circle { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .7); stroke-dasharray: 3 2.4; }
.mapa .icono { fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapa .nodo.oportunidad .icono { stroke: rgba(255, 255, 255, .8); }
.mapa .nodo { transform-box: fill-box; transform-origin: center; animation: nodo-aparece .5s cubic-bezier(.2, .7, .2, 1.2) both; animation-delay: calc(var(--i) * 160ms + 200ms); }
@keyframes nodo-aparece { from { opacity: 0; transform: scale(.4); } }
.mapa-etq { position: absolute; font-weight: 700; white-space: nowrap; color: var(--texto-suave); pointer-events: none; }
.mapa-etq.movilizada { color: var(--blanco); }
.mapa-etq.der { transform: translate(.25em, -50%); }
.mapa-etq.izq { transform: translate(calc(-100% - .25em), -50%); }
.mapa-etq.arriba { transform: translate(-50%, calc(-100% - .1em)); }
.mapa-centro { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); display: grid; place-content: center; text-align: center; font-size: max(5px, calc(var(--mapa) * .04)); font-weight: 800; letter-spacing: 0; line-height: 1.12; text-transform: uppercase; color: var(--azul); }
.mapa-leyenda { list-style: none; display: grid; gap: calc(var(--u) * 1.1); min-width: 0; text-align: left; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-radius: var(--radio-tarjeta); background: var(--vidrio); box-shadow: inset 0 0 0 .2cqmin var(--vidrio-borde); }
.mapa-leyenda li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6em; align-items: start; font-size: var(--t-sm); line-height: 1.2; }
.mapa-leyenda b { display: block; color: var(--blanco); font-weight: 700; }
.mapa-leyenda span { display: block; font-size: .86em; color: var(--texto-tenue); }
.mapa-leyenda i { width: 1em; height: 1em; margin-top: .1em; border-radius: 50%; }
.mapa-leyenda .movilizada i { background: var(--naranja); box-shadow: 0 0 0 .18em rgba(255, 163, 0, .45); }
.mapa-leyenda .complementaria i { background: #00B8B1; box-shadow: 0 0 0 .18em rgba(0, 225, 217, .4); }
.mapa-leyenda .oportunidad i { border: .12em dashed rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); }
@container app (aspect-ratio >= 1.35) { .mapa-wrap { --mapa: min(30cqmin, 30cqh); flex-direction: row; gap: calc(var(--u) * 1); } .mapa-leyenda { max-width: 17em; } .app[data-pantalla="perfil"] .cuerpo { align-items: center; text-align: center; } .app[data-pantalla="perfil"] .cuerpo .centro { text-align: center; } }
/* Cuadrado: el nombre del perfil sigue al título y debajo va el anillo con su lista, todo centrado. */
@container app (0.85 <= aspect-ratio < 1.35) {
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "badge" "titulo" "texto" "anillo"; justify-items: center; align-content: safe center; row-gap: calc(var(--u) * 1.2); width: 100%; margin-inline: auto; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo > .badge-wrap { grid-area: badge; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo > .titulo-md { grid-area: titulo; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-wrap { grid-area: anillo; --mapa: min(25cqmin, 22cqh); flex-direction: row; gap: calc(var(--u) * 1); padding-block: 0; }
  /* Con las descripciones largas de E2, E3, E4, E6 y E7 el cuadrado se pasaba 13-37 px: mapa más chico y
     leyenda más ancha y baja (medido con TODO_EL_CONTENIDO=1). */
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-caja { margin-block: 1.2em 0; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-leyenda { max-width: 20em; gap: calc(var(--u) * .5); padding: calc(var(--u) * .9) calc(var(--u) * 1.4); }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-leyenda li { line-height: 1.12; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo > div.centro { grid-area: texto; text-align: center; }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo > div.centro .texto { margin-inline: auto; max-width: 40em; }
}

/* ── Detalle del perfil ────────────────────────────────────────────────────────── */
/* Las capacidades ya se vieron en el anillo: aquí van compactas en fila; el peso lo llevan gana/cuesta (pedido del cliente). */
.capacidades { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 2.4); }
.cap { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .9) calc(var(--u) * 2); border-radius: var(--radio); background: rgba(255, 255, 255, .1); font-size: calc(var(--t-sm) * .88); }
.cap .peso { display: none; }
/* Mismo código que el mapa del perfil: naranja = movilizadas, turquesa = complementaria, punteado = oportunidades. */
.cap .punto { width: .9em; height: .9em; border-radius: 50%; flex: 0 0 auto; }
.cap.movilizada .punto { background: var(--naranja); box-shadow: 0 0 0 .25em rgba(255, 102, 0, .3); }
.cap.complementaria .punto { background: #00B8B1; box-shadow: 0 0 0 .25em rgba(0, 225, 217, .3); }
.cap.oportunidad .punto { border: .12em dashed rgba(255, 255, 255, .8); }
.cap .nombre { flex: 1; font-weight: 600; } .cap.movilizada .nombre { color: var(--naranja-claro); }
.cap .peso { font-size: .9em; color: var(--texto-tenue); white-space: nowrap; } .cap.clave .peso { color: var(--naranja-claro); font-weight: 700; }
.tarjeta { background: var(--vidrio); border: .3cqmin solid var(--vidrio-borde); border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.tarjeta h3 { font-size: var(--t-2); font-weight: 700; margin-bottom: .3em; }
.app[data-pantalla="detalle"] .tarjeta .texto { font-size: var(--t-3); color: var(--blanco); line-height: 1.4; }
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="detalle"] .tarjeta .texto { font-size: calc(var(--t-base) * .95); }
  .app[data-pantalla="detalle"] .tarjeta h3 { font-size: var(--t-3); }
  .app[data-pantalla="detalle"] .capacidades { margin-top: calc(var(--u) * 1.6); }
  .app[data-pantalla="detalle"] .tarjetas { margin-top: calc(var(--u) * 1.8); }
}
.tarjeta.cuesta h3 { color: var(--naranja-claro); }
.tarjetas { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }
/* Lectura «Valor / Tensión» tras cada elección: las dos tarjetas van bajo la opción elegida, con el texto a la
   izquierda aunque la pantalla sea centrada. El hueco lo pone el `gap` de `.cuerpo.centrado`. */
.app[data-pantalla="feedback"] .tarjetas { width: 100%; margin-top: 0; text-align: left; }
.app[data-pantalla="feedback"] .tarjeta .texto { font-size: var(--t-3); color: var(--blanco); line-height: 1.4; max-width: none; margin-inline: 0; }
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="feedback"] .tarjeta .texto { font-size: calc(var(--t-base) * .95); }
  .app[data-pantalla="feedback"] .tarjeta h3 { font-size: var(--t-3); }
}
@container app (aspect-ratio >= 0.85) {
  .tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capacidades { gap: calc(var(--u) * .8); }
  html[data-led] .app[data-pantalla="detalle"] .nota { display: none; }
}
@container app (0.85 <= aspect-ratio < 1.35) {
  .app[data-pantalla="detalle"] .cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "badge badge" "titulo caps" "texto caps" "tarjetas tarjetas" "nota nota"; column-gap: calc(var(--u) * 5); align-content: safe center; text-align: left; width: min(100%, 60em); margin-inline: auto; }
  .app[data-pantalla="detalle"] .cuerpo > .badge { grid-area: badge; justify-self: center; }
  .app[data-pantalla="detalle"] .cuerpo > .titulo { grid-area: titulo; align-self: end; }
  .app[data-pantalla="detalle"] .cuerpo > .texto { grid-area: texto; align-self: start; margin-inline: 0; }
  .app[data-pantalla="detalle"] .capacidades { grid-area: caps; margin-top: 0; align-self: center; }
  .app[data-pantalla="detalle"] .tarjetas { grid-area: tarjetas; }
  .app[data-pantalla="detalle"] .cuerpo > .nota { grid-area: nota; text-align: center; }
}
@container app (0.85 <= aspect-ratio < 1.35) {
  .app[data-pantalla="menu"] .titulo-md { font-size: var(--t-3); max-width: 28em; }
  .app[data-pantalla="menu"] .texto { display: none; }
  .app[data-pantalla="menu"] .opcion.modulo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Gracias: calificación e intención ─────────────────────────────────────────── */
.estrellas { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); max-width: 30em; }
.estrella { flex: 1; aspect-ratio: 1; max-width: calc(var(--alto-btn) * 1.15); border-radius: 50%; border: 0; cursor: pointer; font-weight: 800; font-size: var(--t-2); color: var(--blanco);
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .3cqmin var(--vidrio-borde); transition: background .15s, transform .1s; }
.estrella.on { background: linear-gradient(180deg, var(--boton-1), var(--boton-2)); box-shadow: 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .3); }
.estrella:active { transform: scale(.94); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); max-width: 30em; }
.chip { min-height: calc(var(--alto-btn) * .75); border-radius: var(--radio); border: .3cqmin solid var(--vidrio-borde); background: var(--vidrio); color: var(--blanco); cursor: pointer; font-weight: 600; font-size: var(--t-sm); padding: .4em 1em; line-height: 1.2; }
.chip.on { background: linear-gradient(180deg, var(--boton-1), var(--boton-2)); border-color: transparent; }
.gracias-bloque { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.acciones .gracias-bloque { text-align: left; }
.app[data-pantalla="gracias"] .acciones { gap: calc(var(--u) * 3); }

/* ── Ruleta ─────────────────────────────────────────────────────────────────────── */
.rueda-wrap { position: relative; width: min(80cqmin, 100%, 52cqh); aspect-ratio: 1; margin: calc(var(--u) * 2) auto 0; flex-shrink: 0; }
.rueda { width: 100%; height: 100%; filter: drop-shadow(0 1.5cqmin 3cqmin rgba(0, 0, 0, .4)); }
.rueda .giro { transform-origin: 100px 100px; transition: transform 4.4s cubic-bezier(.15, .75, .1, 1); }
.rueda .sector-t { fill: var(--blanco); font-weight: 800; font-size: 8.5px; text-anchor: middle; dominant-baseline: middle; font-family: var(--fuente); }
.rueda .sector-t.chico { font-size: 6.6px; letter-spacing: .02em; }
/* Marcador de dónde cae el premio: arriba al centro, que es donde `anguloParaSector` deja el sector
   ganador. Blanco con borde azul para que se lea sobre los sectores naranja y los azules. */
.puntero { position: absolute; top: -7%; left: 50%; transform: translateX(-50%); width: 13%; z-index: 3; pointer-events: none; }
.puntero svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .5cqmin .6cqmin rgba(0, 0, 0, .35)); }
html[data-led] .puntero svg { filter: none; }
.eje { position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, var(--naranja-claro), var(--naranja-oscuro)); box-shadow: 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .4); z-index: 3; }
@container app (aspect-ratio >= 0.85) { .rueda-wrap { width: min(60cqmin, 100%, 58cqh); } .app[data-pantalla="ruleta"] .cuerpo { align-items: center; text-align: center; } .app[data-pantalla="ruleta"] .cuerpo .centro { text-align: center; } }
@container app (0.85 <= aspect-ratio < 1.35) { .rueda-wrap { width: min(44cqmin, 100%, 42cqh); } }
.premio-titulo { font-size: var(--t-xl); font-weight: 800; line-height: 1.05; color: var(--naranja-claro); hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
.codigo { display: inline-block; font-size: var(--t-1); font-weight: 800; letter-spacing: .1em; padding: .35em 1em; border-radius: .5em; background: var(--blanco); color: var(--tinta); white-space: nowrap; }

/* ── Cierre: QR del informe para abrirlo en el celular ─────────────────────────── */
.qr-informe { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); background: var(--vidrio); box-shadow: inset 0 0 0 .3cqmin var(--vidrio-borde); color: var(--texto); border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 2) calc(var(--u) * 3); width: min(70%, 20em); }
.qr-informe img { width: min(34cqmin, 24cqh); height: min(34cqmin, 24cqh); border-radius: .6em; box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .25); }
.qr-informe .texto-sm { color: var(--texto-suave); text-align: center; max-width: 16em; line-height: 1.25; }
.qr-informe.sin-qr img { visibility: hidden; } /* mientras carga o se reintenta: nunca el ícono de imagen rota */
@container app (aspect-ratio >= 0.85) { .qr-informe img { width: min(26cqmin, 22cqh); height: min(26cqmin, 22cqh); } .qr-informe { width: min(60%, 18em); } }

/* ── Capa (PIN, inactividad) ───────────────────────────────────────────────────── */
.capa { position: absolute; inset: 0; z-index: 50; background: rgba(4, 31, 46, .88); display: grid; place-items: center; padding: var(--gutter); animation: aparecer .25s ease both; }
.capa .caja-capa { width: 100%; max-width: min(70cqmin, 26em); background: var(--fondo-2); border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 5); text-align: center; box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.pin { display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.pin i { width: 1.4em; height: 1.4em; border-radius: 50%; border: .15em solid var(--blanco); } .pin i.on { background: var(--blanco); }
.teclado-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.teclado-num .tecla { height: var(--alto-btn); font-size: var(--t-2); }
.contador { font-size: var(--t-xl); font-weight: 800; color: var(--naranja-claro); line-height: 1; }

/* ── Cargando ───────────────────────────────────────────────────────────────────── */
.cargando { height: 100%; display: grid; place-items: center; color: var(--texto-tenue); }

/* ── Bienvenida con tres entradas: QR del puesto, documento, registro ─────────────── */
.app[data-pantalla="bienvenida"] .bienvenida { cursor: default; }
.acciones.entradas { gap: calc(var(--u) * 2.4); }
/* Tarjeta de vidrio como los botones: el QR trae su propio cuadro crema con la marca (azul, ojos naranja, sello al centro). */
.qr-puesto { display: flex; align-items: center; gap: calc(var(--u) * 3); background: var(--vidrio); box-shadow: inset 0 0 0 .3cqmin var(--vidrio-borde); color: var(--texto); border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 2) calc(var(--u) * 3); width: min(88%, 30em); text-align: left; }
.qr-puesto img { width: min(26cqmin, 16cqh); height: min(26cqmin, 16cqh); flex-shrink: 0; border-radius: .6em; box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, .25); }
.qr-puesto .titulo-sm { color: var(--texto); }
.qr-puesto .texto-sm { color: var(--texto-suave); line-height: 1.25; }
.qr-puesto.sin-qr { display: none; }
.qr-puesto.conflicto { box-shadow: inset 0 0 0 .4cqmin var(--naranja); } /* otra pantalla tiene este puesto: aviso para el staff en lugar del QR */
.lector, .puesto { opacity: .72; }
@container app (aspect-ratio >= 0.85) {
  /* Dos columnas: identidad a la izquierda; QR y botones a la derecha, dentro de la banda de alcance. */
  .app[data-pantalla="bienvenida"] .escena { grid-template-areas: "cuerpo acciones"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .app[data-pantalla="bienvenida"] .acciones.entradas { flex-direction: column; justify-content: safe center; align-self: stretch; margin: 0; padding-top: max(var(--u) * 2, calc(var(--alcance-top) * 1cqh - var(--cab))); padding-bottom: calc((100 - var(--alcance-bottom)) * 1cqh); gap: calc(var(--u) * 2); overflow: hidden; }
  .app[data-pantalla="bienvenida"] .qr-puesto { width: min(92%, 30em); max-width: none; }
  .app[data-pantalla="bienvenida"] .qr-puesto img { width: min(22cqh, 18cqw); height: min(22cqh, 18cqw); }
  .app[data-pantalla="bienvenida"] .acciones.entradas .btn { width: min(80%, 22em); }
  .app[data-pantalla="bienvenida"] .puesto { text-align: center; }
  .app[data-pantalla="bienvenida"] .sello { width: min(24cqmin, 26cqh); height: min(24cqmin, 26cqh); }
}

/* ── Documento: campo grande + teclado numérico en el tótem ─────────────────────── */
.identificar { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 3); height: 100%; }
.campo.documento { text-align: center; font-size: var(--t-2); letter-spacing: .08em; max-width: 14em; min-height: calc(var(--alto-campo) * 1.15); }
/* El espaciado es para los dígitos que se escriben: el texto guía va sin él y más chico, o se cortaba ("Número de docume…"). */
.campo.documento::placeholder { letter-spacing: normal; font-size: .8em; }
/* "Ingresar con mi documento": el campo siempre se ve activo (pedido del cliente 2026-09-16). Tiene el foco
   todo el tiempo, pero el aspecto no depende de eso: en la transición de entrada o en el tótem (solo
   lectura, sin cursor del sistema) igual se ve señalado. El error conserva su color. */
.app[data-pantalla="identificar"] .campo.documento { border-color: var(--naranja); background: var(--blanco); box-shadow: 0 0 0 .5cqmin rgba(255, 102, 0, .35); caret-color: var(--naranja); }
.app[data-pantalla="identificar"] .campo.documento.error { border-color: var(--naranja-claro); background: #FFE2CC; box-shadow: 0 0 0 .5cqmin rgba(255, 163, 0, .55); }
.app[data-pantalla="identificar"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.app[data-pantalla="identificar"] .cuerpo { overflow: visible; }
.app[data-pantalla="identificar"] .acciones { align-items: center; margin-top: 0; min-height: 0; max-height: none; }
.app[data-pantalla="identificar"] .teclado-num { width: min(88%, 22em); }
/* El envoltorio solo existe para cambiar de teclado sin repintar la pantalla: no debe formar caja. */
.teclado-doc { display: contents; }
/* ABC / 123 al lado del campo: cambia el teclado del tótem sin robarle alto a la pantalla. */
.fila-doc { display: flex; align-items: stretch; justify-content: center; gap: calc(var(--u) * 1.2); width: 100%; }
.cambia-teclado { flex: 0 0 auto; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .25); color: var(--blanco);
  font: inherit; font-size: var(--t-sm); font-weight: 800; letter-spacing: .05em; padding: 0 calc(var(--u) * 2); cursor: pointer; }
.cambia-teclado:active { background: var(--naranja); }
/* Teclado con letras (pasaporte, DNI extranjero, carné diplomático): mismas teclas, más ancho. */
.app[data-pantalla="identificar"] .teclado { width: min(96%, 78cqmin); margin-top: 0; }
.app[data-pantalla="identificar"] .teclado .tecla { height: calc(var(--alto-btn) * .62); }
.app[data-pantalla="identificar"] .btn { width: min(72%, 24em); }
/* Acción discreta: el enlace de siempre, sin caja de botón (cambiar de teclado, descargar el informe). */
.enlace { background: none; border: 0; padding: 0; color: var(--blanco); font: inherit; font-size: var(--t-sm); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--blanco); text-decoration-thickness: .08em; text-underline-offset: .18em; opacity: .82; cursor: pointer; }
.enlace:active { color: var(--naranja-claro); text-decoration-color: var(--naranja-claro); opacity: 1; }
.acciones .enlace { align-self: center; text-align: center; }
@container app (aspect-ratio >= 1.35) {
  /* Horizontal, dos columnas como la bienvenida: pregunta a la izquierda, teclado y botones en la banda. */
  .app[data-pantalla="identificar"] .escena { grid-template-areas: "cuerpo acciones"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .app[data-pantalla="identificar"] .acciones { align-self: stretch; justify-content: safe center; margin: 0; padding: calc(var(--u) * 2) 0; min-height: 0; max-height: none; overflow: hidden; gap: calc(var(--u) * 1.6); }
  .app[data-pantalla="identificar"] .teclado-num { width: min(70%, 18em); gap: calc(var(--u) * 1.2); }
  .app[data-pantalla="identificar"] .teclado-num .tecla { height: calc(var(--alto-btn) * .66); }
  .app[data-pantalla="identificar"] .teclado { width: min(96%, 46cqw); }
  .app[data-pantalla="identificar"] .teclado .tecla { height: calc(var(--alto-btn) * .5); }
  .app[data-pantalla="identificar"] .btn { width: min(80%, 20em); }
}
/* Cuadrado: identidad arriba y las tres entradas (QR, documento, registro) en UNA FILA abajo. */
@container app (0.85 <= aspect-ratio < 1.35) {
  .app[data-pantalla="bienvenida"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .app[data-pantalla="bienvenida"] .acciones.entradas { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-self: auto; margin: 0 0 calc(var(--u) * 1); padding: 0; gap: calc(var(--u) * 2.4); overflow: visible; }
  .app[data-pantalla="bienvenida"] .qr-puesto { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; text-align: center; width: auto; max-width: none; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.5); align-self: stretch; }
  .app[data-pantalla="bienvenida"] .qr-puesto > div { min-width: 0; }
  .app[data-pantalla="bienvenida"] .qr-puesto img { width: min(13cqh, 13cqw); height: min(13cqh, 13cqw); }
  .app[data-pantalla="bienvenida"] .qr-puesto .titulo-sm { font-size: var(--t-base); line-height: 1.15; }
  .app[data-pantalla="bienvenida"] .qr-puesto .texto-sm { display: none; }
  .app[data-pantalla="bienvenida"] .acciones.entradas .btn { flex: 1 1 0; min-width: 0; width: auto; padding-inline: calc(var(--u) * 2); }
  .app[data-pantalla="bienvenida"] .cuerpo.bienvenida { gap: calc(var(--u) * 2.5); }
  .app[data-pantalla="bienvenida"] .titulo-xl { font-size: var(--t-1); }
  /* Pantallas con sello (hola, elección, enviado, cierre): sello más chico y menos aire para que todo quepa */
  .sello { width: min(20cqmin, 17cqh); height: min(20cqmin, 17cqh); }
  .bienvenida, .cuerpo.centrado { gap: calc(var(--u) * 2.5); }
  .hola .texto { max-width: 44em; }
  .app[data-pantalla="premio"] .premio-titulo { font-size: var(--t-1); }
  .app[data-pantalla="premio"] .codigo { font-size: var(--t-2); }
  .app[data-pantalla="premio"] .cuerpo.centrado { gap: calc(var(--u) * 1.8); }
  .app[data-pantalla="detalle"] .cap { padding: calc(var(--u) * 1) calc(var(--u) * 3.6); }
  .app[data-pantalla="detalle"] .tarjeta { padding: calc(var(--u) * 2) calc(var(--u) * 3); }
  .app[data-pantalla="detalle"] .tarjetas { margin-top: calc(var(--u) * 2); }
  .app[data-pantalla="identificar"] .teclado-num .tecla { height: calc(var(--alto-btn) * .56); font-size: var(--t-3); }
  .app[data-pantalla="identificar"] .teclado-num { width: min(46%, 15em); gap: calc(var(--u) * 1.1); }
  .app[data-pantalla="identificar"] .teclado { width: min(92%, 66cqmin); gap: calc(var(--u) * .5); margin-top: 0; }
  .app[data-pantalla="identificar"] .teclado .fila-t { gap: calc(var(--u) * .5); }
  .app[data-pantalla="identificar"] .teclado .tecla { height: calc(var(--alto-btn) * .46); font-size: var(--t-sm); }
  .app[data-pantalla="identificar"] .btn { width: min(50%, 20em); }
  .app[data-pantalla="identificar"] .cuerpo { flex: 0 0 auto; }
  .app[data-pantalla="identificar"] .escena { grid-template-rows: auto minmax(0, 1fr); }
  .app[data-pantalla="identificar"] .acciones { justify-content: safe center; gap: calc(var(--u) * 2); }
  .app[data-pantalla="menu"] .opcion.modulo { padding: calc(var(--u) * 1.4) calc(var(--u) * 2); }
  .app[data-pantalla="menu"] .lista.modulos { gap: calc(var(--u) * 1.3); }
  .app[data-pantalla="menu"] .acciones { gap: calc(var(--u) * 1.4); }
  .qr-informe img { width: min(22cqmin, 19cqh); height: min(22cqmin, 19cqh); }
  .qr-informe { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); gap: calc(var(--u) * .8); }
  .app[data-pantalla="bienvenida"] .puesto { flex-basis: 100%; max-width: none; text-align: center; margin-top: calc(var(--u) * -1); } /* max-width: none, o el 34em de .texto-sm lo deja en la misma fila */
  .app[data-pantalla="bienvenida"] .sello { width: min(24cqmin, 24cqh); height: min(24cqmin, 24cqh); }
}
/* Registro en cuadrado y horizontal: todo a la vista, sin desplazamiento (el kiosco no tiene scroll);
   el mensaje de error flota bajo el campo sin empujar nada. */
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="registro"] .grupo { position: relative; }
  .app[data-pantalla="registro"] .grupo .ayuda { position: absolute; left: calc(var(--u) * 3); right: 0; top: 100%; padding: .04em 0 0 0; line-height: 1; font-size: calc(var(--t-sm) * .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* El hueco entre filas tiene que dar para la línea del error que flota bajo el campo, sin que el
     formulario deje de caber en la pantalla. */
  .app[data-pantalla="registro"] .formulario.doble { row-gap: calc(var(--u) * 2.4); }
  .app[data-pantalla="registro"] .check { padding: 0; font-size: calc(var(--t-sm) * .9); }
  .app[data-pantalla="registro"] .titulo-md { font-size: var(--t-base); max-width: none; margin-bottom: calc(var(--u) * -1); }
  .app[data-pantalla="registro"] .leyenda { display: none; }
  .app[data-pantalla="registro"] .campo { min-height: calc(var(--alto-campo) * .8); }
  .app[data-pantalla="registro"] .cuerpo { gap: 0; }
}

/* ── Volver: una flecha sola arriba a la izquierda ──────────────────────────────────
   Vive en la cabecera, fuera de la escena: así no compite con el botón principal (en 9:16 la barra
   de antes se montaba encima del botón de enviar) ni deja una fila muerta al pie. Avanzar es
   siempre el botón grande de la pantalla, de modo que no hace falta un "Adelante". */
.atras { position: absolute; left: var(--gutter); top: calc(var(--cab) * .16); z-index: 21; pointer-events: auto;
  width: calc(var(--alto-btn) * .82); height: calc(var(--alto-btn) * .82); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vidrio); border: .3cqmin solid var(--vidrio-borde); color: var(--blanco); cursor: pointer; }
.atras svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.atras:active { background: rgba(255, 255, 255, .28); transform: scale(.94); }

/* Bienvenida en horizontal: el QR, el botón y el rótulo del puesto tienen que caber juntos dentro de
   la banda de alcance (a 1280×720 se pasaban por unos pocos píxeles). Va al final del archivo porque
   las reglas de la bienvenida para `aspect-ratio >= 0.85` están más abajo que el bloque del muro. */
@container app (aspect-ratio >= 1.35) {
  .app[data-pantalla="bienvenida"] .qr-puesto img { width: min(17cqh, 14cqw); height: min(17cqh, 14cqw); }
  .app[data-pantalla="bienvenida"] .qr-puesto { padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); }
  .app[data-pantalla="bienvenida"] .qr-puesto .texto-sm { font-size: calc(var(--t-sm) * .9); }
  .app[data-pantalla="bienvenida"] .acciones.entradas { gap: calc(var(--u) * 1.4); }
}

/* Celulares chicos (360×640): las siete tarjetas del menú necesitan un punto menos de aire para
   caber sin desplazar. */
@media (max-height: 700px) {
  .app[data-pantalla="menu"] .opcion.modulo { padding-block: calc(var(--u) * .7); }
  .app[data-pantalla="menu"] .lista.modulos { gap: calc(var(--u) * .8); }
}

/* Muro: con la franja libre del piso hay menos alto útil, así que las piezas grandes (sello, anillo,
   rueda, QR del informe) se ajustan a lo que queda. Va al final porque los bloques del cuadrado que
   están más arriba fijan esos mismos tamaños. */
/* El prefijo `:is(html, html[data-led])` iguala la especificidad de las reglas del perfil LED que
   están más arriba; sin él, el muro seguiría con los tamaños antiguos. */
@container app (0.85 <= aspect-ratio < 1.35) {
  :is(html, html[data-led]) .sello { width: min(15cqmin, 13cqh); height: min(15cqmin, 13cqh); }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(34cqmin, 100%, 30cqh); margin-top: 0; }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .qr-informe img { width: min(14cqmin, 13cqh); height: min(14cqmin, 13cqh); }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .cuerpo.bienvenida,
  :is(html, html[data-led]) .app[data-pantalla="hola"] .cuerpo,
  :is(html, html[data-led]) .app[data-pantalla="premio"] .cuerpo,
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .cuerpo,
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .cuerpo,
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .cuerpo { gap: calc(var(--u) * 1.4); }
  :is(html, html[data-led]) .app[data-pantalla="premio"] .premio-titulo,
  :is(html, html[data-led]) .app[data-pantalla="premio"] .codigo { font-size: var(--t-2); }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .titulo { font-size: var(--t-2); }
  /* Las pantallas con sello grande o anillo necesitan su propio recorte: sus reglas del cuadrado son
     más específicas que las de arriba. */
  /* El sello de la bienvenida lleva el logotipo dentro: en el muro necesita tamaño para leerse. */
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .sello { width: min(19cqmin, 18cqh); height: min(19cqmin, 18cqh); }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .titulo-xl { font-size: var(--t-1); }
  :is(html, html[data-led]) .app[data-pantalla="hola"] .titulo-xl { font-size: var(--t-1); }
  :is(html, html[data-led]) .app[data-pantalla="premio"] .cuerpo { gap: calc(var(--u) * 1); }
  :is(html, html[data-led]) .app[data-pantalla="premio"] .texto { font-size: var(--t-sm); }
  :is(html, html[data-led]) .app[data-pantalla="premio"] .texto-sm.nota { font-size: calc(var(--t-sm) * .85); }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(32cqmin, 100%, 27cqh); }
  :is(html, html[data-led]) .app[data-pantalla="hola"] .cuerpo .texto { font-size: var(--t-sm); }
  /* El cierre es la pantalla más cargada: sello, QR del informe, aviso del correo, recordatorio del
     premio y cuenta atrás pueden coincidir. */
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .sello { width: min(11cqmin, 10cqh); height: min(11cqmin, 10cqh); }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .qr-informe img { width: min(12cqmin, 11cqh); height: min(12cqmin, 11cqh); }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .cuerpo { gap: calc(var(--u) * 1); }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .texto-sm { font-size: calc(var(--t-sm) * .85); }
  :is(html, html[data-led]) .app[data-pantalla="cierre"] .titulo { font-size: var(--t-3); }
  :is(html, html[data-led]) .app[data-pantalla="hola"] .sello { width: min(10cqmin, 9cqh); height: min(10cqmin, 9cqh); }
  /* Lo que antes solo apretaba el perfil LED ahora vale para todo el cuadrado: la franja del piso
     deja el mismo alto útil con muro o sin él. */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo { padding-block: calc(var(--u) * .9); }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .lista.modulos { gap: calc(var(--u) * .9); }
  /* Sin la fila de navegación al pie sobraba alto y las siete tarjetas quedaban apretadas arriba con
     un hueco debajo: la lista se estira y reparte lo que sobra entre sus filas. */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .lista.modulos { flex: 1 1 auto; align-content: stretch; }
  /* Diseño 2026-09-12: los siete módulos y el botón forman UNA rejilla de dos columnas, con
     "Empezar" en la octava celda, al lado del módulo 07. La lista usa `display: contents` para que
     sus tarjetas sean hijas de la misma rejilla que el botón. */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .acciones:has(.lista) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); align-content: stretch; }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .lista.modulos { display: contents; }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .acciones:has(.lista) > .btn { width: 100%; grid-column: 2; margin: 0; }
  /* Con el botón dentro de la rejilla, el módulo 07 ya no se estira a las dos columnas. */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo:last-child:nth-child(odd) { grid-column: auto; }
  /* Relleno vertical justo: con 1,6 las cuatro filas no alcanzaban y la tarjeta 02 asomaba por encima de la
     rejilla, que la cortaba (visto el 2026-09-22 con el título de tres líneas del escenario 7). */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo { padding: calc(var(--u) * 1.05) calc(var(--u) * 2.2); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .capacidades { margin-top: calc(var(--u) * 1.2); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .tarjetas { margin-top: calc(var(--u) * 1.2); gap: calc(var(--u) * 1.2); }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .formulario { gap: calc(var(--u) * .9); }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .check { font-size: calc(var(--t-sm) * .85); padding: 0; }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo .principal { font-size: calc(var(--t-base) * .82); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .cap { padding-block: calc(var(--u) * .7); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .tarjeta { padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .tarjeta h3 { font-size: var(--t-base); }
  :is(html, html[data-led]) .app[data-pantalla="detalle"] .tarjeta .texto { font-size: calc(var(--t-base) * .88); }
}

/* Saludo en cuadrado (muro): con tan poco contenido, la marca y el título pueden ir grandes —como en
   la pieza del cliente— y el botón queda a media pantalla, dentro de la banda de alcance. */
@container app (0.85 <= aspect-ratio < 1.35) {
  .app[data-pantalla="inicio"] .sello { width: min(23cqmin, 22cqh); height: min(23cqmin, 22cqh); }
  .app[data-pantalla="inicio"] .titulo-xl { font-size: calc(var(--t-xl) * 1.3); max-width: 15em; }
  .app[data-pantalla="inicio"] .cuerpo.centrado { gap: calc(var(--u) * 3.5); }
  .app[data-pantalla="inicio"] .escena { row-gap: calc(var(--u) * 3.5); }
  .app[data-pantalla="inicio"] .acciones .btn { width: min(56%, 18em); }
}


/* Diseño 2026-09-12, páginas 8, 9 y 11 del PDF: en el muro, la introducción y el contexto del módulo
   son UNA tarjeta —degradado turquesa a azul de izquierda a derecha, muestreado del PDF, sin foto—
   con el texto arriba. Dónde va el botón se elige con `boton` (config.js, ajuste del servidor o
   `?boton=`):
     abajo     páginas 9 y 11: tarjeta ancha y el botón DEBAJO, alineado a su borde derecho (por defecto)
     lado      página 8: tarjeta de medio ancho y el botón a su DERECHA, alineado a su pie
     centro    la tarjeta ancha con el botón centrado debajo
     anterior  la foto a dos columnas de antes, que es también lo que sigue en vertical y horizontal
   Los selectores repiten la cadena `:has()` de las reglas de dos columnas del cuadrado para poder
   ganarles. */
@container app (0.85 <= aspect-ratio < 1.35) {
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto):has(.acciones > .btn:only-child) {
    grid-template-areas: "medio" "acciones"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: center; row-gap: calc(var(--u) * 2.6); }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto {
    align-self: stretch; height: auto; min-height: 0; margin: 0; border-radius: var(--radio-tarjeta);
    background: linear-gradient(90deg, rgba(0, 124, 124, .92) 0%, rgba(0, 98, 110, .9) 45%, rgba(0, 62, 90, .92) 100%); }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto img,
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto::after { display: none; }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo {
    align-self: start; justify-content: flex-start; min-height: 29cqh; max-height: none;
    padding: 4.4cqmin 4.6cqmin 4cqmin; gap: calc(var(--u) * 1.6); }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .titulo { font-size: var(--t-1); line-height: 1.12; max-width: 17em; }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .texto { font-size: var(--t-base); color: var(--blanco); line-height: 1.45; }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .badge { align-self: flex-start; font-size: var(--t-3); }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .acciones {
    grid-area: acciones; justify-self: end; align-self: start; width: 48%; margin: 0; min-height: 0; max-height: none; overflow: visible; }
  :is(html, html[data-led]):not([data-boton="anterior"]) .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .acciones .btn { width: 100%; }
  /* ?boton=centro: el mismo diseño de tarjeta, con el botón centrado debajo. */
  :is(html, html[data-led])[data-boton="centro"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .acciones { justify-self: center; }
  /* ?boton=lado: medidas de la página 8 sobre su lienzo de 2000 (1 cqmin = 20): tarjeta de 1020 de ancho
     y 730 de alto, botón de 623 × 144 a 79 de ella, título de 64, texto de 42 y botón de 52. Van en
     cqmin y sin la escala del LED, porque con ella el título ya no cabe en media tarjeta. */
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto):has(.acciones > .btn:only-child) {
    grid-template-areas: "medio acciones"; grid-template-columns: 51cqmin 31.2cqmin; grid-template-rows: auto;
    column-gap: 4cqmin; justify-content: center; align-items: end;
    padding-top: 21cqh; align-content: safe center; } /* la tarjeta de la intro cae a 26 % del alto, como en el PDF; un contexto largo crece hacia los dos lados */
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo { min-height: 36.5cqmin; padding: 5.6cqmin 1.6cqmin 3cqmin 2.6cqmin; gap: 0; }
  /* El alto mínimo fija la tarjeta corta; el relleno inferior solo cuenta en los contextos largos (E3 y E4, 350 caracteres), que así no pisan la franja libre. Y el derecho es corto porque Montserrat web sale un 3 % más ancha que la del PDF: con más, el título parte en tres líneas. */
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .titulo { font-size: 3.2cqmin; line-height: 1.01; max-width: none; }
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .texto { font-size: 2.1cqmin; line-height: 1.29; margin-top: 1.4cqmin; max-width: 43.5cqmin; }
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .nota { font-size: 2.1cqmin; line-height: 1.29; margin-top: 2.2cqmin; color: var(--blanco); }
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .medio.foto + .cuerpo .badge { font-size: 2.6cqmin; }
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .acciones { justify-self: stretch; align-self: end; width: 100%; margin-bottom: .8cqmin; }
  :is(html, html[data-led])[data-boton="lado"] .app:is([data-pantalla="intro"], [data-pantalla="contexto"]) .escena:has(.medio.foto) .acciones .btn { min-height: 7.2cqmin; font-size: 2.6cqmin; padding: 1.4cqmin 2cqmin; }
}

/* "Ya hiciste tu diagnóstico" (menú sin lista): sello, título y Terminar como un bloque centrado en el
   alto útil, en vez de pegados arriba con el vacío debajo. */
@container app (0.85 <= aspect-ratio < 1.35) {
  :is(html, html[data-led]) .app[data-pantalla="menu"] .escena:not(:has(.lista)) { grid-template-rows: auto auto; align-content: center; row-gap: calc(var(--u) * 4); }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .escena:not(:has(.lista)) .acciones { align-items: center; }
}

/* Encuesta (gracias) en el muro: las acciones de las pantallas con foto llevaban `overflow-y: auto`
   y recortaban el relieve inferior y la sombra de "Obtén un descuento". El kiosco no hace scroll
   (lo vigila `pnpm --filter kiosco medir`), así que ese overflow solo estorbaba. */
@container app (aspect-ratio >= 0.85) {
  .app[data-pantalla="gracias"] .escena:has(.medio.foto) .acciones { overflow: visible; padding-bottom: calc(var(--u) * 1.2); padding-inline: calc(var(--u) * .6); }
}

/* ?sensor=1 — diagnóstico del sensor (app.js, iniciarDiagnosticoSensor). Por encima de todo y sin
   capturar toques. Naranja: tocó; azul: soltó; blanco: rastro; verde: hubo clic; rojo punteado: el
   navegador canceló el gesto o el botón no recibió el clic. */
.sensor-capa { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.sensor-marca { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; animation: sensor-desvanecer 1.6s ease-out forwards; }
.sensor-marca.abajo { background: rgba(255, 102, 0, .85); }
.sensor-marca.arriba { border: 3px solid #4FC3F7; }
.sensor-marca.rastro { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: rgba(255, 255, 255, .75); }
.sensor-marca.clic { width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid #2ECC71; }
.sensor-marca.perdido { width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px dashed #FF3B30; }
@keyframes sensor-desvanecer { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.3); } }
.sensor-panel { position: fixed; left: 8px; bottom: 8px; z-index: 9999; pointer-events: none; max-width: min(96vw, 680px); padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .75); color: #fff; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; user-select: none; }

/* ── Muro con las medidas del diseño (PDF "NUEVA PANTALLA", lienzo 1:1) ────────────────────────────
   Revisión del cliente 2026-09-14: "el texto está muy pequeño". Para caber sobre la franja del piso el
   cuadrado bajaba toda la tipografía al 80 % (botones de 2,56 frente a 2,63 del PDF; notas y casillas
   de 1,5 frente a 1,9–2,1). Ahora los tamaños salen del PDF: 1 cqmin = 20 del lienzo de 2000 y la
   fuente es el alto de la caja del texto / 1,219. Saludo y bienvenida van calcados de las páginas 1 y 2. */
@container app (0.85 <= aspect-ratio < 1.35) {
  .app > * {
    --escala: 1;
    --t-xl: calc(5.15cqmin * var(--ajuste, 1)); --t-1: calc(3.18cqmin * var(--ajuste, 1)); --t-2: calc(2.82cqmin * var(--ajuste, 1)); --t-3: calc(2.63cqmin * var(--ajuste, 1));
    --t-base: calc(2.4cqmin * var(--ajuste, 1)); --t-sm: calc(2.05cqmin * var(--ajuste, 1)); --t-btn: calc(2.63cqmin * var(--ajuste, 1));
    --alto-btn: 7.3cqmin; --alto-campo: 5.4cqmin;
  }
  :is(html, html[data-led]) .btn { font-weight: 700; padding-inline: calc(var(--u) * 3); } /* con 6 de relleno, "En la pantalla del stand" partía en dos líneas */

  /* Página 1 — saludo: sello de 21,3 a 12,6 % del alto, título de 5,15 y botón de 49,6 × 8,6 con letra de 5,15. */
  :is(html, html[data-led]) .app[data-pantalla="inicio"] .escena { align-content: start; padding-top: 12.6cqh; row-gap: 4.4cqh; }
  :is(html, html[data-led]) .app[data-pantalla="inicio"] .cuerpo.centrado { gap: 3.2cqh; }
  :is(html, html[data-led]) .app[data-pantalla="inicio"] .sello { width: 21.3cqmin; height: 21.3cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="inicio"] .titulo-xl { font-size: 5.15cqmin; line-height: 1; max-width: 13em; }
  :is(html, html[data-led]) .app[data-pantalla="inicio"] .escena .acciones .btn { width: 49.6cqmin; min-height: 8.6cqmin; font-size: 5.15cqmin; padding-block: 0; }

  /* Página 2 — bienvenida: sello de 13,1; título 3,18; guía 2,11; tarjeta del QR vertical de 24,7 × 25,7
     con el QR de 18,7 y su texto de 1,76; botón de 41,2 × 7,2 con letra de 2,84 en dos líneas. */
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena { align-content: start; grid-template-rows: auto auto; padding-top: 12.6cqh; row-gap: 3.4cqh; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .cuerpo.bienvenida { height: auto; justify-content: flex-start; gap: 1.5cqh; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .sello { width: 13.1cqmin; height: 13.1cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .titulo-xl { font-size: 3.18cqmin; line-height: 1.02; max-width: 12em; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .lector { font-size: 2.11cqmin; color: var(--blanco); }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .acciones.entradas { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.9cqmin; margin: 0; padding: 0 0 0 4.4cqmin; align-self: start; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto { flex: 0 0 24.7cqmin; width: 24.7cqmin; min-height: 25.7cqmin; align-self: auto; flex-direction: column; justify-content: center; gap: 1.1cqmin; padding: 2.4cqmin 1.2cqmin 1.8cqmin; border-radius: 3cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto img { width: 16.2cqmin; height: 16.2cqmin; border-radius: 1.3cqmin; } /* 18,7 en el PDF; baja para darle sitio a la cuenta del código */
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto .qr-cuenta { font-size: 1.6cqmin; margin-top: .2em; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto .titulo-sm { font-size: 1.76cqmin; font-weight: 700; line-height: 1.15; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto .texto-sm { display: none; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .qr-puesto.conflicto .texto-sm { display: block; font-size: 1.5cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .acciones.entradas .btn { flex: 0 0 41.2cqmin; width: 41.2cqmin; min-height: 7.2cqmin; font-size: 2.84cqmin; line-height: 1.05; padding: .8cqmin 9.5cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="bienvenida"] .escena .puesto { display: none; } /* el PDF no lo trae; el staff lo ve en el admin (mapa de actividad) */

  /* Página 3 — documento: título 3,18 en dos líneas; campo de 40,7 × 5,3 con guía de 2,63; teclado de
     teclas 9,6 × 4 con dígitos de 3,47; Volver de 41,4 × 7,4. */
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .escena { align-content: start; grid-template-rows: auto auto; padding-top: 15.8cqh; row-gap: 1cqh; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .cuerpo.identificar { height: auto; justify-content: flex-start; gap: 3.2cqh; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .escena .acciones { gap: 3.2cqh; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .titulo-md { font-size: 3.18cqmin; line-height: 1.02; max-width: 11em; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .campo.documento { width: 40.7cqmin; max-width: none; min-height: 5.3cqmin; font-size: 3cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .campo.documento::placeholder { font-size: 2.63cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .escena .teclado-num { width: 29.6cqmin; gap: .45cqmin .4cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .escena .teclado-num .tecla { height: 4cqmin; font-size: 3.47cqmin; font-weight: 700; border-radius: .7cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="identificar"] .escena .acciones .btn { width: 41.4cqmin; min-height: 7.4cqmin; }

  /* Páginas 4, 6 y 7 — hola, elección y enviado: título 3,18, texto 2,11 (hola) o 2,63, casilla 1,94. */
  :is(html, html[data-led]) .app:is([data-pantalla="hola"], [data-pantalla="eleccion"], [data-pantalla="enviado"]) .titulo-xl { font-size: 3.18cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="hola"] .cuerpo .texto { font-size: 2.11cqmin; max-width: 38em; }
  :is(html, html[data-led]) .app:is([data-pantalla="eleccion"], [data-pantalla="enviado"]) .cuerpo .texto { font-size: 2.63cqmin; }
  :is(html, html[data-led]) .app:is([data-pantalla="hola"], [data-pantalla="eleccion"], [data-pantalla="enviado"]) .escena .acciones .btn { width: 41.3cqmin; }
  :is(html, html[data-led]) .app:is([data-pantalla="hola"], [data-pantalla="registro"]) .check { font-size: 1.94cqmin; }

  /* Página 5 — registro: título 2,63, campos con guía de 2,15, casillas de 1,94. */
  :is(html, html[data-led]) .app[data-pantalla="registro"] .titulo-md { font-size: 2.63cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .campo { font-size: 2.15cqmin; }
  /* El aviso de error va montado sobre el borde inferior del campo: entre filas solo hay 1,1 de aire. */
  :is(html, html[data-led]) .app[data-pantalla="registro"] .grupo .ayuda { top: auto; bottom: -.62em; left: 1.6em; right: auto; max-width: calc(100% - 2.4em); padding: .12em .55em; border-radius: .6em; background: #0B4A5E; font-size: 1.4cqmin; z-index: 1; }

  /* Página 10 — módulos: título 2,63, nombre del módulo 2,81, Empezar 2,63. Página 12 — decisión:
     situación y opciones 2,63, nota 2,10. */
  :is(html, html[data-led]) .app[data-pantalla="menu"] .titulo-md { font-size: 2.63cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo .principal { font-size: 2.3cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="decision"] .opcion { font-size: 2.4cqmin; }
  :is(html, html[data-led]) .app[data-pantalla="decision"] .nota { font-size: 2.1cqmin; }
  /* Ficha de la solución: las tarjetas bajaban a 1,5–1,6. */
}

/* Celulares bajos con los mínimos de letra nuevos: los módulos se quedan con unidad y título (como en el
   muro) y el registro aprieta sus filas, para seguir sin desplazamiento a 360 × 640. */
@container app (aspect-ratio < 0.85) and (max-height: 700px) {
  :is(html, html[data-led]) .app[data-pantalla="menu"] .opcion.modulo .secundario { display: none; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .leyenda { display: none; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .formulario { gap: calc(var(--u) * 1.3); }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .campo { min-height: 36px; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .grupo { position: relative; gap: 0; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .grupo .ayuda { position: absolute; bottom: -.6em; left: 1.4em; max-width: calc(100% - 2em); padding: .1em .5em; border-radius: .6em; background: #0B4A5E; font-size: 10.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .check { line-height: 1.22; }
  :is(html, html[data-led]) .app[data-pantalla="registro"] .formulario.mt-3 { margin-top: calc(var(--u) * 2); }
}

/* Celular (vertical y angosto): con la letra mínima nueva, el anillo y su lista ya no caben lado a lado
   y "Decisión 2 de 3" se montaba sobre la píldora del logo; el anillo va encima de la lista y del
   progreso quedan los puntos. */
@container app (aspect-ratio < 0.85) and (max-width: 520px) {
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-wrap { gap: calc(var(--u) * 1.6); }
  /* El ancho lo fija lo que sobra tras las etiquetas de los lados ("Productividad" y "Sostenibilidad"). */
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-caja { --mapa: min(calc(100cqw - 2 * var(--gutter) - 14.4em), 25cqh); margin-inline: 7em; }
  /* Más pequeño que antes (Ajustes 3 del cliente, 2026-09-22): con el mínimo de 9 px, en el celular "DECISIONES" se salía del círculo. */
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-centro { font-size: max(5px, calc(var(--mapa) * .04)); }
  :is(html, html[data-led]) .app[data-pantalla="perfil"] .mapa-leyenda { width: 100%; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); }
  .progreso .texto { display: none; }
}

/* Modo revisión: franja fija para que nadie confunda la prueba con la experiencia real. No captura
   toques y va por encima de la escena, en la esquina superior derecha (lejos de la flecha y del logo). */
.cinta-revision { position: absolute; top: calc(var(--cab) * .28); right: var(--gutter); z-index: 30; pointer-events: none;
  padding: .45em .9em; border-radius: var(--radio); background: #FFD400; color: #1A1A1A; font-weight: 800; font-size: max(11px, calc(var(--t-sm) * .85));
  letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 .6cqmin 2cqmin rgba(0, 0, 0, .35); white-space: nowrap; }
.cinta-revision .largo { display: none; }
.app:is([data-pantalla="inicio"], [data-pantalla="bienvenida"]) .cinta-revision .largo { display: inline; }
.app:is([data-pantalla="inicio"], [data-pantalla="bienvenida"]) .cinta-revision .corto { display: none; }
.app:is([data-pantalla="decision"], [data-pantalla="feedback"]) .cinta-revision { top: calc(var(--cab) * .28 + 2.6em); } /* debajo del progreso de la decisión */
.badge.ruta-revision { border-color: #FFD400; color: #FFD400; } /* en revisión, la etiqueta del perfil dice escenario y ruta, para ubicarla en el consolidado */

/* Situaciones largas (más de 140 caracteres: E3-D1, E3-D3 y las tres del E4, hasta 196) — revisión de
   calidad 2026-09-15: en el muro la etiqueta del escenario quedaba bajo el logo. La situación baja un
   punto y las tarjetas de opción se compactan; el resto del contenido no cambia. */
@container app (0.85 <= aspect-ratio < 1.35) {
  :is(html, html[data-led]) .app[data-pantalla="decision"] .situacion.larga { font-size: 2.4cqmin; line-height: 1.18; margin-top: calc(var(--u) * 1.2); }
  :is(html, html[data-led]) .app[data-pantalla="decision"] .escena:has(.situacion.larga) .opcion { gap: calc(var(--u) * .8); padding-block: calc(var(--u) * 1.5); }
}
@container app (aspect-ratio < 0.85) {
  .app[data-pantalla="decision"] .situacion.larga { font-size: calc(var(--t-2) * .9); line-height: 1.2; }
}

/* ── Solución con la composición del portafolio (ajustes del cliente 2026-09-16) ─────────────
   Nombre y lema arriba; el reto y cómo lo asumimos en una tarjeta de vidrio; lo que proponemos, con más
   peso, en una tarjeta crema con sus líneas de solución y un ícono por línea. En vertical se apilan; desde
   el cuadrado van lado a lado. Reemplaza las tres tarjetas verticales de antes. */
:is(html, html[data-led]) .app[data-pantalla="solucionDetalle"] .cuerpo.sol-ed { align-items: stretch; text-align: left; justify-content: safe center; gap: calc(var(--u) * 1.4); width: 100%; }
.sol-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .5); }
:is(html, html[data-led]) .app[data-pantalla="solucionDetalle"] .sol-cab .titulo { font-size: var(--t-2); line-height: 1.1; }
.sol-lema { font-size: var(--t-sm); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--naranja-claro); line-height: 1.2; }
.sol-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.4); min-height: 0; }
.sol-reto, .sol-propuesta { border-radius: var(--radio-tarjeta); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4); display: flex; flex-direction: column; min-width: 0; }
.sol-reto { background: var(--vidrio); box-shadow: inset 0 0 0 .2cqmin var(--vidrio-borde); gap: .25em; }
.sol-reto h3 { font-size: var(--t-sm); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--naranja-claro); line-height: 1.2; }
.sol-reto p { font-size: var(--t-sm); line-height: 1.35; color: var(--texto); }
.sol-reto p + h3 { margin-top: .7em; }
.sol-propuesta { background: var(--vidrio); box-shadow: inset 0 0 0 .2cqmin var(--vidrio-borde); color: var(--texto); gap: calc(var(--u) * 1); }
/* Ajuste del cliente 2026-09-16: la tarjeta crema con la píldora naranja "impactaba" demasiado; queda de
   vidrio, como la del reto, con el texto en blanco. */
.sol-propuesta h3 { font-size: var(--t-sm); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; color: var(--naranja-claro); }
.sol-propuesta-texto { font-size: var(--t-sm); line-height: 1.35; font-weight: 600; color: var(--texto); }
.sol-lineas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1) calc(var(--u) * 1.6); }
.sol-lineas li { display: flex; align-items: center; gap: .6em; font-size: var(--t-sm); font-weight: 700; line-height: 1.2; color: var(--blanco); min-width: 0; }
.sol-icono { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: #00938D; }
.sol-lineas li:nth-child(4n+1) .sol-icono, .sol-lineas li:nth-child(4n+4) .sol-icono { background: var(--naranja); }
.sol-icono svg { width: 58%; height: 58%; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@container app (aspect-ratio >= 0.85) {
  :is(html, html[data-led]) .app[data-pantalla="solucionDetalle"] .escena { grid-template-columns: minmax(0, 1fr); }
  :is(html, html[data-led]) .app[data-pantalla="solucionDetalle"] .btn { width: min(60%, 24em); white-space: nowrap; }
  .sol-cuerpo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
  .sol-propuesta { justify-content: center; }
  .sol-lineas { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.1); }
}

/* Pantalla 1: las cinco capacidades siguen a la vista (ajustes del cliente 2026-09-16). */
.capacidades-intro { font-size: var(--t-sm); font-weight: 700; color: var(--naranja-claro); line-height: 1.35; }
.capacidades-intro i { font-style: normal; color: var(--texto-tenue); }

/* Vertical con los mínimos de letra de mobile (2026-09-16): el registro, con los errores a la vista, se
   pasaba por 5 px a 540 × 960; las filas del formulario se acercan un poco. */
@container app (aspect-ratio < 0.85) {
  :is(html, html[data-led]) .app[data-pantalla="registro"] .formulario { gap: calc(var(--u) * 1.1); }
}

/* ── Ruleta sin botón (pedido del cliente 2026-09-16) ──────────────────────────────────────
   La rueda ocupa desde el título hacia abajo y se gira tocando el centro ("Presione") o la rueda.
   `container-type` en la rueda: el texto del centro se mide contra el tamaño de la rueda (cqi). */
.rueda-wrap { container-type: inline-size; cursor: pointer; }
.eje { width: 30%; height: 30%; display: grid; place-items: center; border: .9cqi solid var(--blanco); color: var(--blanco); font: inherit; font-size: 4.6cqi; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; animation: eje-latido 1.6s ease-in-out infinite; }
.eje:active { background: radial-gradient(circle at 35% 30%, var(--naranja), var(--naranja-oscuro)); }
.eje.girando { animation: none; pointer-events: none; opacity: .9; }
.rueda-wrap.girando { cursor: default; }
@keyframes eje-latido { 50% { transform: translate(-50%, -50%) scale(1.06); } }
:is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(92%, 88cqmin, 58cqh); margin: 9% auto 0; } /* el 9 % deja sitio al marcador, que sobresale por arriba */
:is(html, html[data-led]) .app[data-pantalla="ruleta"] .cuerpo { justify-content: safe center; }
:is(html, html[data-led]) .app[data-pantalla="ruleta"] .acciones { min-height: 0; margin-top: 0; }
@container app (aspect-ratio >= 0.85) {
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .escena { grid-template-areas: "cuerpo" "acciones"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .cuerpo { align-items: center; justify-content: safe center; }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(64cqmin, 100%, 62cqh); }
}
@container app (0.85 <= aspect-ratio < 1.35) {
  /* En el muro la rueda baja hasta el pie (pedido del cliente): aquí no se reserva la franja del piso,
     porque lo que se toca es el centro de la rueda, que queda a media altura. */
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .escena { padding-bottom: calc(var(--u) * 2); }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(72cqmin, 100%, 63cqh); }
}

@container app (aspect-ratio >= 1.35) {
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .escena { padding-bottom: calc(var(--u) * 2); }
  :is(html, html[data-led]) .app[data-pantalla="ruleta"] .rueda-wrap { width: min(60cqmin, 100%, 54cqh); margin-top: 5%; }
}

/* QR del puesto: cuenta regresiva hasta el código nuevo (cada 20 s). */
.qr-cuenta { margin-top: .35em; font-size: calc(var(--t-sm) * .9); font-weight: 700; color: var(--naranja-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Opciones largas (escenario 6 del Excel del 2026-09-22: 80–120 caracteres) ─────────────
   En el celular y el tótem las opciones son píldoras; con cinco o seis líneas el texto tocaba la curva del
   borde. Las que pasan de 70 caracteres (`.larga`, en app.js) van como tarjeta de esquinas redondeadas. */
.app[data-pantalla="decision"] .opcion.larga { border-radius: var(--radio-tarjeta); }