/* Las guías. Una sola estructura de lectura, la del informe impreso: un eje fijo, los títulos de cada
   sección a su izquierda y el texto colgando a su derecha, el bloque del producto como una página entera
   de color y las preguntas grandes con su respuesta al lado. Cuatro pieles, una por marca, que solo
   cambian los tokens: Al Paso (el ticket fucsia), MesaPulso (el salón y su grafito), MOVA (la noche y el
   papel) y el Plan Esencial (el amarillo). Campos planos, sin degradados ni sombras. */


/* Lo común: el ritmo, el eje y las cinco medidas de letra. */
:root {
  --m: clamp(20px, 4vw, 56px);
  --ancho: 1320px;
  --columnas: minmax(0, 5fr) minmax(0, 7fr);
  --hueco: clamp(24px, 4vw, 72px);
  --seccion: clamp(64px, 7vw, 120px);
  --t-chica: 0.9375rem;
  --t-texto: 1.125rem;
  --t-entrada: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  --t-h1: clamp(1.875rem, 0.9rem + 4.3vw, 4.75rem);
  --sale: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* Las pieles. Cada una dice su fondo, su tinta, su campo de color, su acción y sus letras. */
[data-marca="alpaso"] {
  --fondo: #ffffff; --tono: #f3edf0; --tinta: #1d171b; --tinta-2: #5f5459;
  --campo: #b3136b; --sobre-campo: #ffffff; --sobre-campo-2: #fde4f0;
  --accion: #b3136b; --sobre-accion: #ffffff; --accion-campo: #ffffff; --sobre-accion-campo: #8f0f56;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif; --texto: "Sofia Sans", system-ui, sans-serif;
  --titulo-peso: 900; --titulo-caja: uppercase; --titulo-interlinea: 0.95; --titulo-escala: 1.18; --radio: 0;
  --perforado: #d9cdd3;
}
[data-marca="mesapulso"] {
  --fondo: #f6f7f7; --tono: #e9ebec; --tinta: #1f1a17; --tinta-2: #5c544e;
  --campo: #1f1a17; --sobre-campo: #f3f4f4; --sobre-campo-2: #c2c4c6;
  --accion: #b8442e; --sobre-accion: #ffffff; --accion-campo: #b8442e; --sobre-accion-campo: #ffffff;
  --display: "Gloock", Georgia, serif; --texto: "Schibsted Grotesk", system-ui, sans-serif;
  --titulo-peso: 400; --titulo-caja: none; --titulo-interlinea: 1.08; --titulo-escala: 1; --radio: 0;
}
[data-marca="mova"] {
  --fondo: #eef1f6; --tono: #dfe4ec; --tinta: #07090f; --tinta-2: #2d3445;
  --campo: #07090f; --sobre-campo: #eef1f6; --sobre-campo-2: #c9d0db;
  --accion: #07090f; --sobre-accion: #eef1f6; --accion-campo: #19c9c9; --sobre-accion-campo: #07090f;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --texto: "Geist", "Helvetica Neue", Arial, sans-serif;
  --titulo-peso: 800; --titulo-caja: none; --titulo-interlinea: 1.02; --titulo-escala: 1; --radio: 999px;
}
[data-marca="esencial"] {
  --fondo: #fff8ef; --tono: #ffe4d4; --tinta: #073466; --tinta-2: #304766;
  --campo: #ffd84a; --sobre-campo: #073466; --sobre-campo-2: #304766;
  --accion: #073466; --sobre-accion: #ffffff; --accion-campo: #073466; --sobre-accion-campo: #ffffff;
  --display: "League Spartan", "Arial Black", sans-serif; --texto: "DM Sans", system-ui, sans-serif;
  --titulo-peso: 800; --titulo-caja: none; --titulo-interlinea: 1; --titulo-escala: 1; --radio: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-texto)/1.6 var(--texto); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--campo); color: var(--sobre-campo); }
input { caret-color: var(--accion); accent-color: var(--accion); }
h1, h2, h3 { font-family: var(--display); font-weight: var(--titulo-peso); line-height: var(--titulo-interlinea); letter-spacing: -0.015em; text-wrap: balance; }
h1, h2 { text-transform: var(--titulo-caja); }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sin-js { font-size: var(--t-chica); color: var(--tinta-2); }
.js .sin-js { display: none; }

.saltar { position: absolute; left: var(--m); top: -4rem; z-index: 20; padding: 0.75rem 1rem; background: var(--tinta); color: var(--fondo); }
.saltar:focus { top: 0.75rem; }

/* La acción: un bloque macizo con la forma de cada marca. Cede al presionarlo. */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--radio); background: var(--accion); color: var(--sobre-accion); font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: transform 160ms var(--sale), background-color 160ms ease-out; }
.boton:active { transform: scale(0.97); }
.boton-claro { background: var(--tinta); color: var(--fondo); }
.enlace { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .boton:hover { transform: translateY(-1px); } .enlace:hover { text-decoration-thickness: 3px; } }

/* Las columnas del eje: lo de la izquierda empieza en el margen; lo de la derecha, en el eje. */
.cabecera, .entrada, .seccion, .guias-lista, .pie-columnas { display: grid; grid-template-columns: var(--columnas); column-gap: var(--hueco); padding-inline: max(var(--m), (100% - var(--ancho)) / 2); }

/* La barra: la marca, el índice de guías y la acción. */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding: 1rem max(var(--m), (100% - var(--ancho)) / 2); }
.marca { display: inline-flex; align-items: center; gap: 0.625rem; font: var(--titulo-peso) 1.375rem/1 var(--display); text-transform: var(--titulo-caja); text-decoration: none; }
.marca img { width: 36px; height: 36px; }
.marca-logos { display: inline-flex; }
.marca-logos img { width: 32px; height: 32px; }
.marca-logos img + img { margin-left: -6px; }
.barra-enlaces { margin-left: auto; }
.barra-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-chica); font-weight: 600; }
.boton-barra { min-height: 44px; padding: 0.5rem 1.125rem; font-size: var(--t-chica); }
@media (max-width: 639px) { .boton-barra { display: none; } }

.migas { padding: 0.5rem max(var(--m), (100% - var(--ancho)) / 2) 0; font-size: var(--t-chica); color: var(--tinta-2); }
.migas ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; list-style: none; }
.migas li + li::before { content: "›"; margin-right: 0.5rem; }
.migas a { display: inline-flex; align-items: center; min-height: 32px; }

/* La cabecera: el H1 a todo lo ancho; debajo, la columna angosta con el resumen y la acción, y la figura en el eje. */
.cabecera { row-gap: clamp(28px, 3vw, 48px); padding-block: clamp(32px, 4vw, 64px) var(--seccion); }
.cabecera h1 { grid-column: 1 / -1; max-width: 24ch; font-size: calc(var(--t-h1) * var(--titulo-escala)); }
.cabecera-lado { display: grid; align-content: start; gap: 1.25rem; }
.resumen { font-size: var(--t-entrada); line-height: 1.45; }
.meta { font-size: var(--t-chica); color: var(--tinta-2); }
.cabecera-figura { min-width: 0; }
.cabecera-indice .cabecera-lado { grid-column: 1 / -1; max-width: 40rem; }

/* La entrada: el índice en la columna angosta y el primer párrafo, grande, en el eje. */
.entrada { row-gap: 2rem; padding-block: 0 var(--seccion); }
.toc { align-self: start; padding: 1.5rem; background: var(--tono); }
.toc-titulo { font-weight: 700; }
.toc ol { margin-top: 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.toc a { display: block; padding-block: 0.25rem; }
.entrada-texto p { font-size: var(--t-entrada); line-height: 1.5; }

/* Cada sección: su título en la columna angosta, quieto mientras se lee; el texto en el eje. */
.seccion { row-gap: 1.5rem; padding-block: 0 var(--seccion); }
.seccion h2 { font-size: var(--t-h2); align-self: start; }
.seccion-texto { display: grid; gap: 1.25rem; min-width: 0; }
.seccion-texto ul, .seccion-texto ol { display: grid; gap: 0.75rem; padding-left: 1.5rem; }
.seccion-texto li::marker { color: var(--accion); font-weight: 800; }
.seccion-texto ol > li { padding-left: 0.375rem; }
.seccion-texto h3 { font-size: var(--t-entrada); margin-top: 0.5rem; }
.nota { padding: 1.25rem 1.5rem; background: var(--tono); font-size: var(--t-entrada); line-height: 1.45; }
@media (min-width: 900px) { .seccion h2 { position: sticky; top: 1.5rem; } }
/* Una sección que es sobre todo una figura usa todo el ancho, con su título arriba. */
.seccion.ancha { grid-template-columns: minmax(0, 1fr); }
.seccion.ancha h2 { position: static; }
.seccion.ancha .seccion-texto { max-width: none; }

/* El producto: una página entera en el color de la marca. */
.seccion.producto { padding-block: var(--seccion); margin-bottom: var(--seccion); background: var(--campo); color: var(--sobre-campo); }
.seccion.producto li::marker { color: var(--sobre-campo); }
.accion { display: grid; gap: 1rem; margin-top: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--fondo); color: var(--tinta); border-radius: min(var(--radio), 18px); }
.accion-texto { font: var(--titulo-peso) var(--t-entrada)/1.2 var(--display); text-transform: var(--titulo-caja); }
.accion-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.descarga { margin-top: 0.5rem; }

/* Las preguntas: grandes a la izquierda, la respuesta al lado. Todas abiertas. */
.preguntas { row-gap: clamp(24px, 3vw, 48px); }
.preguntas h2 { color: var(--tinta-2); position: static; }
.preguntas-lista { grid-column: 1 / -1; display: grid; gap: clamp(40px, 5vw, 72px); }
.par { display: grid; grid-template-columns: var(--columnas); column-gap: var(--hueco); row-gap: 0.75rem; }
.par h3 { font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); text-transform: none; }
.respuesta { display: grid; gap: 0.75rem; }

.fuentes { font-size: var(--t-chica); }
.fuentes a, .seccion-texto a { overflow-wrap: anywhere; }
.seccion-texto, .entrada-texto, .respuesta, .guia-fila, .cabecera, .toc { overflow-wrap: break-word; hyphens: auto; }
.fuentes h2 { font-size: var(--t-entrada); }
.fuentes .seccion-texto { gap: 0.5rem; }

/* El índice de guías: cada guía es una fila, el título a la izquierda y de qué trata al lado. */
.guias-lista { margin: 0; padding-block: 0 var(--seccion); list-style: none; row-gap: 0; }
.guia-fila { grid-column: 1 / -1; display: grid; grid-template-columns: var(--columnas); column-gap: var(--hueco); row-gap: 0.75rem; padding-block: clamp(28px, 3vw, 44px); }
.guia-fila:nth-child(odd) { background: var(--tono); margin-inline: calc(clamp(16px, 2vw, 28px) * -1); padding-inline: clamp(16px, 2vw, 28px); }
.guia-fila h2 { font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); }
.guia-fila h2 a { text-decoration: none; }
.guia-fila h2 a:hover { text-decoration: underline; }
.guia-fila p { min-width: 0; }

/* El pie: la marca en grande, al revés de la página. */
.pie { padding: var(--seccion) 0 2rem; background: var(--tinta); color: var(--fondo); }
.pie-columnas { row-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie-columnas nav { display: grid; align-content: start; gap: 0.375rem; }
.pie-columnas a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; opacity: 0.86; }
.pie-columnas a:hover { opacity: 1; text-decoration: underline; }
.pie-titulo { font-weight: 700; }
.pie-marca { margin-top: clamp(48px, 8vw, 120px); padding-inline: max(var(--m), (100% - var(--ancho)) / 2); font: var(--titulo-peso) clamp(3.5rem, 15vw, 13rem)/0.85 var(--display); text-transform: var(--titulo-caja); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; }
.pie-final { margin-top: 1.5rem; padding-inline: max(var(--m), (100% - var(--ancho)) / 2); font-size: var(--t-chica); opacity: 0.86; }

/* En el teléfono el eje se pliega al margen: todo en una columna. */
@media (max-width: 899px) {
  .cabecera, .entrada, .seccion, .par, .guia-fila { grid-template-columns: minmax(0, 1fr); }
  .cabecera-figura { order: 3; }
  .par h3 { font-size: var(--t-entrada); }
}

/* ===== Las figuras: el objeto impreso de cada guía. ===== */
.figura { display: grid; gap: 0.75rem; }
.figura figcaption, .calculadora-ayuda { font-size: var(--t-chica); color: var(--tinta-2); }

/* El ticket de Al Paso: talón fucsia con su corte perforado y la rutina para marcar. */
.ticket-cuerpo { --muesca: 16px; --pad: clamp(20px, 2.6vw, 36px); position: relative; padding: var(--pad); background: var(--campo); color: var(--sobre-campo); }
.ticket-cabeza { font: 900 clamp(2.5rem, 1.5rem + 3vw, 4.25rem)/0.9 "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.ticket-monto { margin-top: 0.5rem; font-weight: 700; color: var(--sobre-campo-2); }
.corte { position: relative; display: block; height: 0; margin: 1.25rem calc(var(--pad) * -1); border-top: 3px dotted rgba(255, 255, 255, 0.55); }
.corte::before, .corte::after { content: ""; position: absolute; top: calc(var(--muesca) * -1 - 1.5px); width: calc(var(--muesca) * 2); height: calc(var(--muesca) * 2); border-radius: 50%; background: var(--fondo); }
.corte::before { left: calc(var(--muesca) * -1); }
.corte::after { right: calc(var(--muesca) * -1); }
.rutina { display: grid; gap: 0.25rem; padding: 0; border: 0; }
.rutina legend { margin-bottom: 0.5rem; font-weight: 800; }
.rutina label { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; cursor: pointer; }
.rutina input { flex: none; width: 1.375rem; height: 1.375rem; accent-color: var(--sobre-campo); }
.ticket-estado { margin-top: 1rem; padding: 0.625rem 0.875rem; background: var(--fondo); color: var(--tinta); font-weight: 800; }
.ticket-estado.listo { background: #ddf3e4; color: #11652f; }

/* La hoja de cierre de MesaPulso. */
.hoja-cuerpo { padding: clamp(20px, 2.6vw, 36px); background: var(--campo); color: var(--sobre-campo); }
.hoja-titulo { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1.1 var(--display); }
.hoja-tabla { width: 100%; margin-top: 1rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hoja-tabla th, .hoja-tabla td { padding: 0.5rem 0; border-bottom: 1px solid rgba(243, 244, 244, 0.2); text-align: left; font-weight: 400; }
.hoja-tabla td { text-align: right; }
.hoja-suma th, .hoja-suma td, .hoja-diferencia th, .hoja-diferencia td { font-weight: 700; }
.hoja-diferencia td { color: #fdf2d6; }
.hoja-nota { margin-top: 0.75rem; color: var(--sobre-campo-2); }

/* La calculadora del arqueo: un formulario de verdad, con sus campos. */
.calculadora { gap: 1.25rem; padding: clamp(20px, 2.6vw, 36px); background: var(--tono); }
.calculadora-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.5rem; }
.calculadora fieldset { display: grid; gap: 0.5rem; padding: 0; border: 0; }
.calculadora legend { margin-bottom: 0.5rem; font-weight: 700; }
.calculadora label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; font-size: var(--t-chica); }
.calculadora input { width: min(6.5rem, 100%); min-height: 44px; padding: 0.375rem 0.5rem; border: 1px solid #8a8580; background: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.calculadora-resultado { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--fondo); font-variant-numeric: tabular-nums; }
.calculadora-diferencia { margin-top: 0.5rem; font-weight: 700; font-size: var(--t-entrada); }

/* El pedido de cotización: una hoja de papel con la plantilla para copiar. */
.documento-cuerpo { display: grid; gap: 0.75rem; padding: clamp(20px, 2.6vw, 36px); background: #ffffff; color: #07090f; }
.documento-titulo { font: 800 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)/1.05 var(--display); }
.documento-pide { padding-top: 0.75rem; background: none; }
.documento-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.copiado { font-size: var(--t-chica); font-weight: 700; }

/* La carta en el celular, con su QR. */
.celular { grid-template-columns: minmax(0, 18rem) auto; align-items: end; gap: 1.5rem; }
.celular figcaption { grid-column: 1 / -1; }
@media (max-width: 479px) { .celular { grid-template-columns: minmax(0, 1fr); } }
.celular-pantalla { padding: 1rem; border: 10px solid var(--tinta); border-radius: 28px; background: #ffffff; color: #1f1a17; font-family: inherit; }
.celular-local { font-weight: 700; }
.celular-categorias { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.875rem; }
.celular-categorias span { padding: 0.25rem 0.625rem; border-radius: 999px; background: #eceef0; }
.celular-categorias .activa { background: #1f1a17; color: #ffffff; }
.celular-platos { display: grid; gap: 0.75rem; margin-top: 1rem; padding: 0; list-style: none; }
.celular-platos li { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; }
.celular-platos small { grid-column: 1 / -1; color: #5c544e; font-size: 0.875rem; }
.celular-platos span { font-variant-numeric: tabular-nums; font-weight: 700; }
.qr { width: clamp(88px, 10vw, 128px); padding: 10px; background: #ffffff; fill: var(--tinta); }

/* La pantalla de turnos de Al Paso. */
.turnos-pantalla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); background: #2b2125; color: #ffffff; border: 8px solid var(--tinta); }
.turnos-col { padding: clamp(16px, 2vw, 28px); }
.turnos-listos { background: #157939; }
.turnos-titulo { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--t-chica); }
.turnos-numeros { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.turnos-numeros span { min-width: 2.2em; padding: 0.25rem 0.5rem; background: rgba(255, 255, 255, 0.14); font: 900 clamp(2.5rem, 1.5rem + 3vw, 4.5rem)/1 "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif; text-align: center; font-variant-numeric: tabular-nums; }

/* La hoja de cálculo con sus versiones. */
.excel-ventana { background: #ffffff; color: #1f2937; font-family: inherit; font-size: 0.9375rem; overflow: hidden; }
.excel-archivos { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; background: #d9dee7; }
.excel-archivos span { padding: 0.375rem 0.625rem; background: #c7ced9; overflow-wrap: anywhere; }
.excel-archivos .activa { background: #ffffff; font-weight: 600; }
.excel-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.excel-tabla th, .excel-tabla td { padding: 0.5rem 0.625rem; border: 1px solid #d9dee7; text-align: left; }
.excel-tabla th { background: #f1f3f7; font-weight: 600; }
.excel-error { color: #b42318; font-weight: 700; }

/* Las listas que se marcan. */
[data-lista].marcable { list-style: none; padding-left: 0; }
[data-lista].marcable label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
[data-lista].marcable input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.2em; accent-color: var(--accion); }
.lista-resultado { padding: 1rem 1.25rem; background: var(--campo); color: var(--sobre-campo); font-weight: 700; }

/* Entradas: cada bloque entra una vez. La clase la pone el script; sin él, todo queda a la vista. */
.revela [data-entra]:not(.visto) > * { opacity: 0; transform: translateY(18px); }
.revela [data-entra] > * { transition: opacity 420ms ease-out, transform 560ms var(--sale); transition-delay: calc(var(--n, 0) * 70ms); }
.js .cabecera h1 { animation: sube 720ms var(--sale) both; }
.js .cabecera-lado { animation: sube 720ms var(--sale) 90ms both; }
.js .cabecera-figura { animation: sube 720ms var(--sale) 180ms both; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .revela [data-entra]:not(.visto) > * { opacity: 1; transform: none; }
}

/* Para imprimir: solo la guía. */
@media print {
  .barra, .migas, .pie, .cabecera-accion, .accion, .toc, .saltar, .documento-accion, .calculadora, .ticket, .descarga { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion.producto { background: none; color: #000; }
  .cabecera, .entrada, .seccion { display: block; padding: 0 0 1.5rem; }
}

/* En el teléfono la miga de la página actual sobra: el H1 ya dice dónde estás. */
@media (max-width: 639px) { .migas li[aria-current] { display: none; } }