/* ══════════════════════════════════════════════════════════════
   DON MICHULE v2 — PIEL ILUSTRADA de la app del cliente
   (pedidos.html y estado.html; el panel NO la carga)

   Decisión de Sofi (29/09/2026): la app sigue la estética del menú
   impreso ilustrado (Flyers/menu-estilos/8-ilustrado-marca). Nació como
   prueba en direcciones/ilustrado/ y pasó a la v2.

   Va DESPUÉS de marca.css y del <style> de la página (último <link> del
   <head>): cambia letra y adornos sin tocar componentes ni ganchos de JS.
   La letra (DM Sans 800–900), el ladrillo y el nude tostado ya son tokens
   de marca.css: los comparte el panel. Acá queda solo lo del cliente:

   · Papel cálido con grano muy suave (SVG de ruido, ~0,5 KB).
   · Pinceladas de acuarela detrás de los títulos y un dibujito de línea
     por sección (dibujos/*.svg, sacados tal cual del menú).
   · Bajadas y rótulos en cursiva ladrillo (DM Sans Italic 700).
   · Combos en un recuadro dibujado sobre papel (sin bloque de tinta).
   · Docena en un círculo a mano; «2 sanguches» con resaltador.
     «¡Todas a $X!» lo escribe buildMenu() con el precio de la config.
   · Divisores punteados; rayas a mano donde había filetes dobles.
   · SIN FOTOS. Los dibujos son decorativos (fondos y pseudo-elementos:
     no están en el árbol de accesibilidad).

   Contrastes medidos (peor píxel del papel con textura, WCAG 2.2):
   direcciones/ilustrado/README.md → «Contraste».
   ══════════════════════════════════════════════════════════════ */

/* Jueces cliente-ilustrado r2 (CLS 0,217: 0,175 era el cambio a DM Sans que corría la carta):
   mientras baja DM Sans se usa una Arial ajustada a sus medidas (mismo alto de renglón y ancho
   parecido), así el cambio de letra casi no mueve nada. Mismas cifras que usa next/font. */
@font-face {
    font-family: "DM Sans fallback";
    src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica");
    size-adjust: 104.5%; ascent-override: 94.9%; descent-override: 29.7%; line-gap-override: 0%;
}
:root {
    --f-display: "DM Sans", "DM Sans fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --f-texto:   "DM Sans", "DM Sans fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Letra grande (WCAG 1.4.4, persona «clienta-mayor»): en el cliente la escala va en rem, así
   sigue al tamaño de letra que eligió la persona en el navegador. A 16 px (lo normal) son
   exactamente los mismos px de marca.css: el diseño no cambia. El panel no carga esta hoja. */
:root {
    --t-hero: clamp(3.5rem, 16vw, 5rem);
    --t-talon: 5rem;      --t-d1: 2.75rem;      --t-d4: 1.5rem;
    --t-cifra: 2.25rem;   --t-cifra-chica: 1.75rem;   --t-total: 1.625rem;
    --t-titulo: 1.25rem;  --t-item: 1.0625rem;  --t-texto: 1rem;  --t-chico: .875rem;  --t-min: .75rem;
    --t-cocina-titulo: 1.375rem;  --t-cocina-linea: 1.125rem;
    /* escala v1 (componentes heredados) */
    --t-cap: .6875rem;  --t-lbl: .75rem;  --t-sm: .84375rem;  --t-btn: .875rem;  --t-body: .9375rem;
    --t-sec: .9375rem;  --t-input: 1rem;  --t-h2: 1.375rem;   --t-display: 1.6875rem;  --t-num: 1.875rem;
}
:root {
    --t-d2: clamp(1.75rem, 8.6vw, 2.125rem);   /* rubro: «Pastel de papa» entra en un renglón a 360 px */
    --t-d3: 1.875rem;

    /* Colores propios de la piel ilustrada (jueces r1, DISENO §6 regla 15: nada suelto) */
    --lavado-oro: rgba(212, 160, 85, .10);     /* fondo del recuadro de Combos (el lavado del menú) */
    --guia-papel: #8C7B6B;                     /* guía de puntos del ex-invertido, ahora sobre papel */
    --borde-promo: rgba(26, 26, 26, .55);      /* borde de la franja de la docena / 2 sanguches */
    --fondo-promo: rgba(255, 253, 250, .75);   /* papel claro translúcido de esa franja */
    --cinta: rgba(212, 160, 85, .55);          /* la cinta de papel del talón y del seguimiento */
    --cinta-borde: rgba(255, 255, 255, .55);   /* sus bordes serruchados */

    /* Textura del papel: grano fino de ruido fractal teñido de ladrillo.
       Alfa = 0,18·ruido − 0,06 → entre 0 y ~0,085 (el píxel más oscuro es el que se
       usa para medir el contraste). */
    --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .54 0 0 0 0 .40 0 0 0 0 .13 0 0 0 .18 -.06'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════════════════════════
   1. PAPEL
   ══════════════════════════════════════════════════════════════ */
body,
.splash, #overlay-procesando, #modal-confirmar, .hoja, .secciones {
    background-color: var(--papel);
    background-image: var(--textura);
    background-size: 220px 220px;
}
::selection { background: var(--acuarela); color: var(--tinta); }


/* ══════════════════════════════════════════════════════════════
   2. LETRA: títulos en DM Sans 800–900, bajadas en cursiva ladrillo
   ══════════════════════════════════════════════════════════════ */
:is(.display, .titulo-pantalla, .rubro, .folio, .hora, .hoja-cab :is(h2, h3), .vacio :is(h2, h3),
    .splash .vacio h2, .cierre .fila-carta .monto, .talon-num, .confirmacion .talon.sin-respuesta .titulo-talon) {
    font-family: var(--f-display);
    font-weight: var(--peso-titulo);
    letter-spacing: -.02em;
}
.portada-titulo {
    font-family: var(--f-display);
    font-weight: var(--peso-hero);
    letter-spacing: -.035em;
}
.talon-num, .cierre .fila-carta .monto { font-weight: var(--peso-hero); }

/* Bajadas: la voz en cursiva del menú */
.rubro-nota, .portada-bajada, .marca .bajada {
    font-style: italic; font-weight: 700;
    text-transform: none; letter-spacing: 0;
    color: var(--ladrillo);
}
.rubro-nota { font-size: 1rem; line-height: 1.25; text-align: left; }
.portada-bajada { font-size: .875rem; line-height: 1.35; }
.portada-bajada .fecha { color: var(--tinta); font-style: normal; font-weight: 800; }
/* Centrada, como el encabezado de arriba (perro y nombre centrados desde el 02/10) */
.portada-bajada { justify-content: center; text-align: center; column-gap: var(--e-4); }
.marca .bajada { font-size: .875rem; margin-top: 0; }

/* La marca como en el menú: «Don Michule» en 800, sin versalitas espaciadas */
.marca .wordmark {
    font-size: 1.3125rem; font-weight: 800; letter-spacing: -.015em; text-transform: none; line-height: 1.05;
}
/* El perro sobre su mancha de acuarela (el PNG es transparente). La mancha entra entera en la caja
   de la imagen (nunca más del 100 % de ancho) y el SVG le deja aire alrededor: si se pasaba, la caja
   la recortaba y se veía un rectángulo de bordes rectos detrás del perro (Sofi, 02/10) */
.marca-logo {
    background: url(dibujos/mancha-perro.svg) 50% 66% / 100% 62% no-repeat;
}
.marca-logo.grande { background-size: 100% 64%; }

/* Rótulos en versalitas → cursiva ladrillo (como «WhatsApp» / «Instagram» del menú) */
.barra-datos .cap, .paso-cab .cap, .datos-cliente .paso-cab .cap {
    font-style: italic; font-weight: 700; font-size: .8125rem;
    text-transform: none; letter-spacing: 0; color: var(--ladrillo);
}
.barra-datos .estado { color: var(--color-estado, var(--ladrillo)); }


/* ══════════════════════════════════════════════════════════════
   3. PINCELADAS detrás de los títulos
   El dibujo va en un ::before detrás del texto (z-index -1 dentro de
   su propio contexto: nunca tapa ni se corre con el foco).
   ══════════════════════════════════════════════════════════════ */
:is(.rubro, .portada-titulo, .titulo-pantalla) {
    position: relative; isolation: isolate;
    width: fit-content; max-width: 100%;
}
:is(.rubro, .portada-titulo, .titulo-pantalla)::before {
    /* 02/10 (pedido de Sofi): un resaltador parejo que pasa por el MEDIO de la palabra, en vez
       de una pincelada despareja que quedaba abajo y se leía como subrayado */
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -.12em; right: -.12em; top: .3em; bottom: .06em;
    background: url(dibujos/resaltado.svg) 0 0 / 100% 100% no-repeat;
}

/* Título de la hoja del combo: SIN pincelada. Es largo («Docena de empanadas + gaseosa
   2,25L»): estirada a dos renglones la pincelada queda finita, a media altura, y se lee
   como un TACHADO (y el tachado ya quiere decir «tildado en cocina»). Va en 800 sobre la raya. */
.hoja-cab :is(h2, h3) { line-height: 1.15; }


/* ══════════════════════════════════════════════════════════════
   4. PORTADA
   ══════════════════════════════════════════════════════════════ */
/* Portada: el perro arriba y «Don Michule» abajo, centrados, sin la bajada de rubros
   (pedido de Sofi, 02/10: el perro al costado del nombre no le gustaba) */
.portada-hero { flex-direction: column; align-items: center; text-align: center; gap: var(--e-1); margin-bottom: var(--e-4); }
/* El perro con sus proporciones (es vertical) y alto, centrado en una caja más ancha que él: así la
   mancha de acuarela entra entera, como una mancha suelta y no un rectángulo recortado */
.portada-hero .portada-logo { width: 210px; height: 156px; aspect-ratio: auto; object-fit: contain; margin: 0; background-size: 100% 60%; background-position: 50% 82%; }
.portada-hero .portada-marca { width: 100%; }
.portada-hero .portada-titulo { font-size: clamp(2.5rem, 13vw, 3.5rem); line-height: 1; margin: 0 auto; }
/* La barra de datos entre rayas rectas (dibujos/raya-*.svg; eran a mano alzada hasta el 02/10) */
.barra-datos {
    border-block: 0; padding: 12px 0;
    background:
        url(dibujos/raya-h-fuerte.svg) 0 0 / 100% 6px no-repeat,
        url(dibujos/raya-h-fuerte.svg) 0 100% / 100% 6px no-repeat;
}
.barra-datos > li + li { border-left: 0; background: url(dibujos/raya-v.svg) 0 50% / 4px 100% no-repeat; }
.barra-datos b { font-size: .9375rem; font-weight: 800; }


/* ══════════════════════════════════════════════════════════════
   5. BARRA DE SECCIONES: raya a mano abajo, subrayado dibujado en la activa
   ══════════════════════════════════════════════════════════════ */
.secciones {
    border-bottom: 0;
    background-image: url(dibujos/raya-h-fuerte.svg), var(--textura);
    background-position: 0 100%, 0 0;
    background-size: 100% 6px, 220px 220px;
    background-repeat: no-repeat, repeat;
}
.secciones a { border-bottom: 0; font-size: .9375rem; }
/* Jueces cliente-ilustrado r2: la última pestaña se cortaba en seco («Sang»): los últimos 24 px
   se funden en el papel (avisa que hay más) y la activa nunca queda pegada al borde */
@media (max-width: 599px) {
    .secciones ul {
        padding-right: 28px; scroll-padding-inline: 24px;
        -webkit-mask-image: linear-gradient(to right, var(--tinta) calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, var(--tinta) calc(100% - 28px), transparent);
    }
}
.secciones a[aria-current="true"], .secciones a[aria-current="location"] {
    color: var(--tinta); font-weight: 800;
    background: url(dibujos/subrayado.svg) 50% calc(100% - 3px) / calc(100% - 14px) 9px no-repeat;
}


/* ══════════════════════════════════════════════════════════════
   6. CABECERA DE SECCIÓN: título con pincelada + dibujito a la derecha,
      bajada en cursiva debajo y, si todas cuestan lo mismo, «¡Todas a $X!»
   ══════════════════════════════════════════════════════════════ */
.rubro-cab {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titulo dibujo" "nota nota";
    align-items: end; column-gap: var(--e-3); row-gap: 6px;
    padding: 40px 0 var(--e-3); border-bottom: 0;
}
.rubro-cab > .rubro { grid-area: titulo; justify-self: start; line-height: 1.05; }
.rubro-cab > .rubro-nota { grid-area: nota; }
.rubro-cab:has(> .todas-a) { grid-template-areas: "titulo dibujo" "nota todas"; }
.rubro-cab::after {
    content: ""; grid-area: dibujo; align-self: end; justify-self: end;
    width: 0; height: 46px;
    background: 50% 100% / contain no-repeat;
}
#sec-empanadas .rubro-cab::after    { width: 68px; background-image: url(dibujos/empanada.svg); }
#sec-sanguches .rubro-cab::after    { width: 72px; background-image: url(dibujos/sanguche.svg); }
#sec-pastel .rubro-cab::after       { width: 72px; background-image: url(dibujos/pastel.svg); }
#sec-guarniciones .rubro-cab::after { width: 44px; height: 48px; background-image: url(dibujos/papas.svg); }
#sec-bebidas .rubro-cab::after      { width: 20px; height: 50px; background-image: url(dibujos/botella.svg); margin-right: 6px; }
#sec-combos .rubro-cab::after {
    width: 72px; height: 42px;
    background-image: url(dibujos/empanada.svg), url(dibujos/botella.svg);
    background-position: 0 100%, 100% 100%;
    background-size: 50px auto, 16px auto;
}

/* Qué es cada cosa en «Lo que pediste» (seguimiento y confirmación): el nombre de la sección arriba
   de sus renglones, en la cursiva del menú y con el dibujo de la carta (pedido de Sofi, 02/10:
   «3× Carne a cuchillo» no decía si era empanada o pastel). La imagen del panel dibuja lo mismo. */
.grupo-sec {
    display: flex; align-items: flex-end; gap: var(--e-2);
    font-size: 1.0625rem; font-style: italic; font-weight: 700; line-height: 1.2; letter-spacing: 0;
    text-transform: none; color: var(--ladrillo);
}
.grupo-sec::before { content: none; flex: none; height: 26px; background: 50% 100% / contain no-repeat; }
.grupo-sec.g-empanada::before { content: ""; width: 38px; background-image: url(dibujos/empanada.svg); }
.grupo-sec.g-pastel::before   { content: ""; width: 40px; background-image: url(dibujos/pastel.svg); }
.grupo-sec.g-sanguche::before { content: ""; width: 40px; background-image: url(dibujos/sanguche.svg); }
.grupo-sec.g-papas::before    { content: ""; width: 24px; height: 27px; background-image: url(dibujos/papas.svg); }
.grupo-sec.g-botella::before  { content: ""; width: 12px; height: 30px; background-image: url(dibujos/botella.svg); }
.grupo-sec.g-combos::before {
    content: ""; width: 44px; background-image: url(dibujos/empanada.svg), url(dibujos/botella.svg);
    background-position: 0 100%, 100% 100%; background-size: 31px auto, 10px auto;
}

/* «¡Todas a $4.100!» a mano, con su flechita (lo escribe buildMenu() desde la config) */
.todas-a {
    grid-area: todas; justify-self: end; position: relative;
    margin: 0 2px 0 0;
    font-size: 1.3125rem; font-style: italic; font-weight: 700; line-height: 1.1;
    color: var(--ladrillo); white-space: nowrap; transform: rotate(-3deg); transform-origin: 100% 50%;
}
/* (Llevaba una flechita a la izquierda: Sofi, 06/10, «no manda a ningún lado». Se sacó.) */
/* En 360 no entran los dos en un renglón: la bajada partía en «Fritas o al / horno».
   La bajada queda entera y el cartel baja un renglón, a la derecha. */
@media (max-width: 379px) {
    .rubro-cab:has(> .todas-a) { grid-template-areas: "titulo dibujo" "nota nota" "todas todas"; }
    .todas-a { margin-top: -2px; }
}
/* Con el precio único arriba, el renglón no lo repite (el lector sí lo sigue leyendo) */
.precio-unico .carta > li.gusto .fila-carta > :is(.guia, .precio) {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ══════════════════════════════════════════════════════════════
   7. RENGLONES: divisores punteados, hojita, «solo al horno»
   ══════════════════════════════════════════════════════════════ */
.carta > li, .desglose > li { border-bottom: 0; position: relative; }
.carta > li:not(:last-child)::after, .desglose > li:not(:last-child)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: radial-gradient(circle, var(--punteo) 1px, transparent 1.35px) 0 50% / 7px 3px repeat-x;
}
.carta > li.gusto:not(:last-child)::after { left: var(--e-2); right: var(--e-2); }
.fila-carta > .guia {
    background-image: radial-gradient(circle, var(--guia) .95px, transparent 1.2px);
    background-size: 5px 2px;
}
.producto { font-weight: 700; letter-spacing: -.005em; }

/* VEG → la hojita del menú (la palabra sigue en el DOM para el lector) */
sup.tag {
    display: inline-block; width: 17px; height: 17px; margin-left: 6px; vertical-align: -1px;
    background: url(dibujos/hojita.svg) 50% 50% / contain no-repeat;
    color: transparent; overflow: hidden; text-indent: 40px; white-space: nowrap; line-height: 17px;
}
/* «Solo al horno»: píldora de contorno en cursiva, como en el menú */
.coccion .grupo:only-child > .rotulo {
    display: inline-block; padding: 1px 10px 2px; margin-bottom: 3px;
    font-size: .8125rem; font-style: italic; font-weight: 700; color: var(--ladrillo);
    border: 1.5px solid var(--ladrillo); border-radius: var(--r-pill);
}
/* «Elegí el aderezo *», «Variedad», «Salsa»: de versalitas a la cursiva ladrillo del menú
   («Aderezo a elección»). El asterisco de obligatorio sigue en rojo. */
.chips-filtro > legend {
    font-size: .9375rem; font-style: italic; font-weight: 700;
    letter-spacing: 0; text-transform: none; color: var(--ladrillo);
}
/* Jueces r1: los grupos de la hoja del combo hablan igual que la carta («Elegí el aderezo *»
   en cursiva ladrillo, con el asterisco de obligatorio en rojo) */
.hoja .opciones > legend {
    font-size: .9375rem; font-style: italic; font-weight: 700;
    letter-spacing: 0; text-transform: none; color: var(--ladrillo);
}
/* Jueces r1: «Frita» / «Al horno» centrados sobre su «− 0 +» (no sobre el «+») */
.carta .coccion .grupo:not(:only-child) { display: grid; justify-content: end; justify-items: center; align-content: end; row-gap: 2px; }
/* Portada a 360: «Empanadas · Sanguches» / «Pastel de papa» sin el punto colgando (jueces r2) */
@media (max-width: 379px) { .portada-tag .sep-ult { display: none; } .portada-tag .ult { display: block; } }
/* Jueces 4d (DECISIONES 28/09, «en gris con Agotado por hoy»): el combo agotado va en gris como
   el pastel o el sanguche agotados; antes nombre y precio seguían en tinta y se leía disponible */
li.combo-fila.agotado :is(.producto, .precio, .desc, .complemento) { color: var(--agotado); }
/* «↳ Con osobuco al vino tinto: +$3.500» del menú impreso, a lo ancho del renglón del combo */
.combos-lista > .combo-fila > .cg-recargo { margin: 2px 0 0; }
/* «Ahorrás $1.000…» con la flechita «↳» de las condiciones del menú */
.cg-ahorro { color: var(--ladrillo); font-style: italic; font-weight: 700; font-size: .8125rem; }
.cg-ahorro::before {
    content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: 0;
    background: url(dibujos/mini.svg) 0 0 / contain no-repeat;
}
/* v2 (jueces 4c): el recargo («Con osobuco al vino tinto: +$3.500») no habla con la voz del
   ahorro: sin flechita ni cursiva, en marrón y con el signo adelante, como un dato del precio */
.cg-ahorro.cg-recargo { color: var(--marron); font-style: normal; font-weight: 700; }
.cg-ahorro.cg-recargo::before { content: none; }


/* ══════════════════════════════════════════════════════════════
   8. COMBOS: recuadro dibujado sobre papel (sin bloque de tinta)
   ══════════════════════════════════════════════════════════════ */
.rubro-sec > .combos-caja {
    margin-top: var(--e-5);
    /* El trazo del recuadro como border-image: las esquinas quedan como en el papel y los
       lados se estiran solo a lo largo. El lavado dorado del menú (16 %) va plano adentro:
       estirado a 1000 px de alto el de acuarela hacía vetas. */
    border: 4px solid transparent;
    border-image: url(dibujos/caja-trazo.svg) 34 / 24px / 0 stretch;
    border-radius: 12px;
    background: var(--lavado-oro) padding-box;
}
.combos-caja > .invertido { padding: var(--e-2) var(--e-4) var(--e-1); }
.combos-caja > .combos-lista { padding: 0 var(--e-4) var(--e-3); }
.combos-caja > .combos-cab .combos-bajada { color: var(--marron); }
.combos-caja .rubro-cab { padding-top: var(--e-2); }
/* El bloque invertido pasa a papel: vuelven los colores de siempre */
:is(.combos-caja > .invertido, .cierre.invertido) {
    background-color: transparent; color: var(--tinta);
    --foco-color: var(--tinta); --filete: var(--tinta); --guia: var(--guia-papel);
}
:is(.combos-caja > .invertido, .cierre.invertido) :is(.producto, .precio, .monto, .rubro) { color: var(--tinta); }
:is(.combos-caja > .invertido, .cierre.invertido) :is(.desc, .nota-pie, .ayuda, .motivo, .variante, .guardado, .sello-agotado) { color: var(--marron); }
:is(.combos-caja > .invertido, .cierre.invertido) :is(.cap, .oro, .rubro-nota, .docena-texto .falta, .desglose .promo) { color: var(--ladrillo); }
:is(.combos-caja > .invertido, .cierre.invertido) :is(.resta, .req, .error, .falta-msg) { color: var(--rojo); }
:is(.combos-caja > .invertido, .cierre.invertido) .cg-ahorro { color: var(--ladrillo); }
:is(.combos-caja > .invertido, .cierre.invertido) .btn-texto { color: var(--tinta); }
:is(.combos-caja > .invertido, .cierre.invertido) .btn-borde { color: var(--tinta); border-color: var(--tinta); }
:is(.combos-caja > .invertido, .cierre.invertido) .en-tu-pedido {
    background: var(--papel-nude); border: 0; box-shadow: inset 3px 0 0 var(--tinta); color: var(--tinta);
}
/* El «Armar» del primer combo era dorado sobre tinta: sobre papel es la primaria de tinta */
:is(.combos-caja > .invertido, .cierre.invertido) .btn-oro {
    background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}
/* Jueces r1: el complemento del combo («+ gaseosa 600ml») en regular y más chico, como en el
   menú; no se parte y la guía toma lo que sobra */
.combo-fila .complemento { font-weight: 400; font-size: .9375rem; letter-spacing: 0; color: var(--marron); white-space: nowrap; }
/* Jueces cliente-ilustrado r2: el complemento se mueve entero al renglón de abajo si no entra y,
   solo si no entra ni así (espaciado de texto de WCAG 1.4.12), se parte: antes se montaba sobre
   el precio («+ 2 gaseosas 600m$36.000»). «+ 2 gaseosas» y «600 ml» siguen pegados (&nbsp;). */
.combo-fila .fila-carta .complemento { display: inline-block; white-space: normal; }
/* Jueces r1: renglón de combo compacto (~169 → ~120 px): «Armar» a la derecha, en la misma
   fila del «↳ Ahorrás…». Con el combo ya en el pedido (se ve «En tu pedido») vuelve el armado
   de siempre, con «Cambiar lo elegido» a la izquierda. */
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-3); align-items: center;
}
.combos-lista > .combo-fila > * { grid-column: 1 / -1; }
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) > .cg-ahorro { grid-column: 1; margin-top: var(--e-1); }
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) > .acciones-fila { grid-column: 2; margin-top: var(--e-1); }
/* Jueces cliente-ilustrado r2 (Combos arriba por la config de Sofi, pero más compactos): el «↳»
   del recargo va a lo ancho debajo del nombre (como en el menú) y la bajada con el ahorro, a la
   izquierda de «Armar» (antes el ahorro iba solo al lado del botón y la bajada en otro renglón) */
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) > .cg-cuerpo { grid-column: 1; }
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) > .cg-recargo { grid-column: 1 / -1; }
.combos-lista > .combo-fila:not(:has(> .en-tu-pedido:not([hidden]))) > .acciones-fila { align-self: center; }
.combo-fila > .cg-cuerpo > .desc { margin-top: 2px; }
.combo-fila > .cg-cuerpo > .cg-ahorro { margin: var(--e-1) 0 0; }
.combos-caja > .invertido .carta > li { border-bottom: 0; }
.combos-caja > .invertido .carta > li::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: radial-gradient(circle, var(--punteo) 1px, transparent 1.35px) 0 50% / 7px 3px repeat-x;
}


/* ══════════════════════════════════════════════════════════════
   9. PROMOS DE SECCIÓN: docena en círculo, «2 sanguches» con resaltador
   ══════════════════════════════════════════════════════════════ */
/* Jueces cliente-ilustrado r2: la docena y los «2 sanguches» con el mismo trazo a mano que el
   recuadro de Combos (antes, borde recto de 1 px: dos lenguajes de caja en la misma carta). Con
   algo sumado pasa al «elegido» de siempre (borde de 2 px en tinta, §6.9). */
.promo-docena {
    border: 4px solid transparent;
    border-image: url(dibujos/caja-trazo.svg) 34 / 20px / 0 stretch;
    border-radius: var(--r-mano);
    background: var(--fondo-promo) padding-box;
}
/* (el borde sigue midiendo 4 px: si pasaba a 2, al sumar la primera empanada la carta saltaba 4 px) */
.rubro-sec .promo-docena.tiene { border: 4px solid transparent; border-image: none; box-shadow: inset 0 0 0 2px var(--tinta); }
.promo-docena .fila-carta .precio { position: relative; isolation: isolate; padding: 0 2px; }
#sec-empanadas .promo-docena .fila-carta .precio::after {
    content: ""; position: absolute; pointer-events: none;
    left: -12px; right: -13px; top: -9px; bottom: -8px;
    background: url(dibujos/circulo.svg) 0 0 / 100% 100% no-repeat;
}
#sec-empanadas .promo-docena .fila-carta { padding-right: 12px; }
#sec-sanguches .promo-docena .fila-carta .precio::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -.12em; right: -.12em; top: .3em; bottom: .06em;   /* resaltador parejo, centrado (02/10) */
    background: url(dibujos/resaltado.svg) 0 0 / 100% 100% no-repeat;
}
.docena-segmentos { gap: 4px; }
.docena-segmentos > i { border-radius: 2px; }


/* «↳ Con osobuco al vino tinto: +$3.500 por sanguche» debajo del precio (jueces r1) */
.promo-docena .promo-recargo { margin: 2px 0 var(--e-1); }


/* ══════════════════════════════════════════════════════════════
   10. CONTROLES: el mismo tamaño (44 px), esquinas parejas
   ══════════════════════════════════════════════════════════════ */
.btn:not(.btn-texto) { border-radius: var(--r-mano); }
.stepper button { border-radius: var(--r-mano-chico); }
/* Jueces cliente-ilustrado r2: en reposo (0 en el pedido) el «+» de la carta va liviano, en
   ladrillo de 1,5 px (5,65:1 sobre papel), sin fondo: ~30 cuadrados de tinta pesaban más que
   los nombres. El área de toque sigue en 44 px; con algo sumado vuelve el borde de tinta. */
.carta .stepper.en-cero .mas { border: var(--borde-fino) solid var(--ladrillo); background: transparent; color: var(--ladrillo); }
.carta .stepper.en-cero .mas:hover { border-color: var(--tinta); color: var(--tinta); }
.btn-pedido { border-radius: var(--r-mano); }
.opcion { border-radius: var(--r-mano); }
.campo > :is(input, select, textarea) { border-radius: var(--r-mano-chico); }


/* ══════════════════════════════════════════════════════════════
   11. LO FIJO: barra del pedido, detalle, hojas (raya a mano en vez de doble filete)
   ══════════════════════════════════════════════════════════════ */
.barra-pedido, .carrito {
    border-top: 0; padding-top: calc(var(--e-2) + 5px);
    background: url(dibujos/raya-h-fuerte.svg) 0 0 / 100% 6px no-repeat, var(--papel-claro);
}
.barra-pedido.es-vacia { padding-top: 5px; }
.barra-pedido.es-vacia .btn-pedido {
    font-size: .875rem; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ladrillo); font-weight: 700;
}
.barra-promo { font-style: italic; }
.hoja-cab {
    border-bottom: 0; padding-bottom: calc(var(--e-3) + 4px);
    background: url(dibujos/raya-h-fuerte.svg) 0 100% / 100% 6px no-repeat;
}
.hoja-pie {
    border-top: 0; padding-top: calc(var(--e-3) + 4px);
    background: url(dibujos/raya-h.svg) 0 0 / 100% 6px no-repeat, var(--papel-claro);
}


/* ══════════════════════════════════════════════════════════════
   12. REVISÁ TU PEDIDO: pasos con raya a mano y cierre sobre papel
   ══════════════════════════════════════════════════════════════ */
.paso-cab {
    border-bottom: 0; padding-bottom: calc(var(--e-2) + 5px);
    background: url(dibujos/raya-h-fuerte.svg) 0 100% / 100% 6px no-repeat;
}
.paso-cab .folio {
    font-size: 1.625rem; font-style: italic; font-weight: 700; color: var(--ladrillo);
}
.checkout > .titulo-pantalla { margin-top: var(--e-3); }
.checkout .cierre.invertido {
    background: url(dibujos/raya-h-fuerte.svg) 0 0 / 100% 6px no-repeat, var(--papel-claro);
    padding-top: calc(var(--e-2) + 6px);
}
.checkout .cierre > .fila-carta .nombre { color: var(--marron); font-style: italic; letter-spacing: 0; text-transform: none; font-size: .875rem; }
.checkout .cierre > .aviso-cierre { color: var(--marron); }
.checkout .cierre > .aviso-cierre b { color: var(--tinta); }

/* «Tu pedido» (título corto): lleva su pincelada, como los rubros */
.carrito-cab > :is(h2, h3) { position: relative; isolation: isolate; font-size: 1.5rem; letter-spacing: -.02em; }
.carrito-cab > :is(h2, h3)::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -.12em; right: -.12em; top: .3em; bottom: .06em;
    background: url(dibujos/resaltado.svg) 0 0 / 100% 100% no-repeat;
}


/* ══════════════════════════════════════════════════════════════
   13. CONFIRMACIÓN: el talón es una nota de papel pegada con cinta
   ══════════════════════════════════════════════════════════════ */
.confirmacion .talon {
    position: relative; margin-top: var(--e-5);
    background: var(--papel-claro); color: var(--tinta); --foco-color: var(--tinta);
    box-shadow: none;
    border: 10px solid transparent;
    border-image: url(dibujos/caja-trazo.svg) 34 / 24px / 0 stretch;
    border-radius: 14px;
    padding: var(--e-3) var(--e-4) var(--e-3);
}
.confirmacion .talon::before {   /* la cinta de papel del QR del menú */
    content: ""; position: absolute; left: 50%; top: -22px; width: 64px; height: 20px; margin-left: -32px;
    background: var(--cinta); transform: rotate(-3deg);
    border-inline: 2px dashed var(--cinta-borde);
}
.talon .cap, .confirmacion .talon-der .cap { color: var(--ladrillo); font-style: italic; letter-spacing: 0; text-transform: none; font-size: .875rem; }
.confirmacion .talon-der { color: var(--marron); }
.talon .ayuda, .confirmacion .talon .ayuda { color: var(--marron); }
.confirmacion .talon .ayuda svg.ic { color: var(--ladrillo); }
.confirmacion .talon .titulo-talon { color: var(--tinta); }
.talon-num { color: var(--tinta); }
.confirmacion .talon-izq .talon-num {
    display: inline-block; padding: 0 .12em 0 .08em; margin-left: -.08em;
    background: url(dibujos/resaltado.svg) 0 62% / 100% 58% no-repeat;
}
.pasos-conf { border-top: 0; background: url(dibujos/raya-h-fuerte.svg) 0 0 / 100% 6px no-repeat; padding-top: 4px; }
.pasos-conf > li { border-bottom: 0; position: relative; }
.pasos-conf > li:not(:last-child)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: radial-gradient(circle, var(--punteo) 1px, transparent 1.35px) 0 50% / 7px 3px repeat-x;
}
.pasos-conf > li > .folio { font-size: 1.625rem; font-style: italic; font-weight: 700; color: var(--ladrillo); }
.pasos-conf > li.hecho > .folio { color: var(--st-ok-tx); }
.confirmacion .secundarias { border-top: 0; background: url(dibujos/raya-h.svg) 0 0 / 100% 6px no-repeat; }


/* ══════════════════════════════════════════════════════════════
   13b. ESPERAS Y SELLOS (jueces r1)
   ══════════════════════════════════════════════════════════════ */
/* «Guardando tu pedido…» con la marca, como pausa y cerrado; con movimiento reducido no
   queda sin nada: un renglón de puntos quieto en lugar de la ruedita */
#overlay-procesando .marca-logo { margin: 0 auto var(--e-3); }
@media (prefers-reduced-motion: reduce) {
    #overlay-procesando .girando {
        display: block !important; width: 46px; height: 8px; margin: 0 auto var(--e-4);
        border: 0; border-radius: 0; animation: none;
        background: radial-gradient(circle, var(--ladrillo) 3px, transparent 3.5px) 0 50% / 16px 8px repeat-x;
    }
}
.splash .vacio h2, .titulo-estado { text-wrap: balance; }
/* Sellos del cliente en la voz de la carta: cursiva 700, sin versalitas, píldora
   (como «Solo al horno»). «Listo» del seguimiento sigue siendo el único macizo. */
.checkout .est.sello-no-disp, .no-disponible .est {
    font-style: italic; font-weight: 700; letter-spacing: 0; text-transform: none;
    border-radius: var(--r-pill);
}
.seg-talon .sello { font-style: italic; font-weight: 800; letter-spacing: 0; text-transform: none; font-size: 1.0625rem; }
.seg-talon .sello.es-listo { font-size: 1.25rem; }
@media (max-width: 379px) { .seg-talon .sello { font-size: .9375rem; } .seg-talon .sello.es-listo { font-size: 1.0625rem; } }
/* En apaisado la cabecera de la hoja (título y X) queda pegada arriba (jueces r1) */
@media (orientation: landscape) and (max-height: 500px) {
    .hoja-cab {
        position: sticky; top: 0; z-index: 3;
        background: url(dibujos/raya-h-fuerte.svg) 0 100% / 100% 6px no-repeat, var(--textura) 0 0 / 220px 220px, var(--papel);
    }
    .hoja-cab :is(h2, h3) { font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Jueces cliente-ilustrado r2: la cuenta «9 de 12» ya no queda pegada (la dice el motivo del
       pie): entre la cabecera y el pie quedaban ~170 px para elegir */
    .hoja .comp-combo .docena { position: static; margin-inline: 0; padding-inline: 0; border-bottom: 0; }
    .hoja { scroll-padding: 72px 0 84px; }
}


/* ══════════════════════════════════════════════════════════════
   14. TUS DATOS
   ══════════════════════════════════════════════════════════════ */
.datos-cliente .paso-cab :is(h2, h3) { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }


/* ══════════════════════════════════════════════════════════════
   14b. PAUSA Y CIERRE: la misma voz del menú (v2, jueces 4c)
   El título lleva un subrayado a mano abajo (no una pincelada detrás: en dos
   renglones se leería como tachado) y la bajada va en la cursiva ladrillo.
   ══════════════════════════════════════════════════════════════ */
.splash .vacio > h2 { position: relative; padding-bottom: 16px; }
.splash .vacio > h2::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: min(70%, 230px); height: 10px;
    transform: translateX(-50%); pointer-events: none;
    background: url(dibujos/subrayado.svg) 50% 50% / 100% 100% no-repeat;
}
.splash .vacio > p:not(:empty) { font-style: italic; font-weight: 700; color: var(--ladrillo); text-wrap: pretty; }


/* ══════════════════════════════════════════════════════════════
   15. ALTO CONTRASTE DE WINDOWS: sin dibujos ni pinceladas
   ══════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    :is(.rubro, .portada-titulo, .titulo-pantalla, .carrito-cab > h2)::before, .rubro-cab::after, .splash .vacio > h2::after,
    .promo-docena .precio::after, .promo-docena .precio::before, .confirmacion .talon::before { display: none; }
    .rubro-sec > .combos-caja, .confirmacion .talon { border-image: none; border: 2px solid CanvasText; }
    .grupo-sec::before { display: none; }
    sup.tag { color: CanvasText; text-indent: 0; width: auto; background: none; }
}
@media print {
    body { background-image: none; }
}

/* Jueces cliente-ilustrado r2: «Sumale salsa» en la voz de la carta (era la única versalita del cliente) */
.salsas-head .cap.salsas-rotulo { font-size: .9375rem; font-style: italic; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ladrillo); }

/* Jueces cliente-ilustrado r2 (§6.9, un solo lenguaje de «elegido»): el aderezo / la variedad / la
   salsa de la carta llevan el mismo punto de radio que las tarjetas de la hoja del combo: aro
   vacío en reposo y, al elegir, aro de tinta con el punto adentro (más el borde de 2 px y el nude
   de siempre). Reemplaza el puntito de la esquina del chip. */
.opciones-prod .opciones-grupo .chip { justify-content: flex-start; text-align: left; gap: 6px; padding-inline: 7px; }
.opciones-prod .opciones-grupo .chip:has(input:checked) { padding-inline: 6.5px; }
.opciones-prod .opciones-grupo .chip::before,
.opciones-prod .opciones-grupo .chip:has(input:checked)::before {
    content: ""; position: static; flex: none; box-sizing: border-box; width: 16px; height: 16px;
    border: 2px solid var(--tinta); border-radius: 50%; background: var(--papel-claro);
}
.opciones-prod .opciones-grupo .chip:has(input:checked)::before {
    background: radial-gradient(circle, var(--tinta) 0 3.5px, var(--papel-claro) 4px);
}
.opciones-prod .opciones-grupo .chip:has(input:disabled)::before { border-color: var(--agotado); }

/* Jueces cliente-ilustrado r2: en Bebidas (renglones sin bajada) el «− 0 +» va en el mismo
   renglón que el nombre desde 390 px, como en el menú impreso: cada bebida pasa de ~100 a ~60 px.
   La cuenta («2 × $2.500 = $5.000») baja a su renglón, a la derecha. */
@media (min-width: 390px) {
    #sec-bebidas li.product-row:not(:has(> .desc)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-2); align-items: center; }
    /* el número del medio, un poco más angosto (los «−» y «+» siguen de 44 px): «Gaseosa 600 ml» entra en un renglón */
    #sec-bebidas li.product-row:not(:has(> .desc)) .stepper input { width: 34px; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > .fila-carta > .guia { flex-basis: 8px; min-width: 8px; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > * { grid-column: 1 / -1; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > .fila-carta { grid-column: 1; grid-row: 1; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > .fila-pedir { display: contents; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > .fila-pedir > :is(.stepper, .sello-agotado) { grid-column: 2; grid-row: 1; }
    #sec-bebidas li.product-row:not(:has(> .desc)) > .fila-pedir > .nota-fila { grid-column: 1 / -1; text-align: right; }
    #sec-bebidas li.product-row.uno:not(:has(> .desc)) > .fila-pedir > .nota-fila { display: none; }
}