/* ============================================================
   GastroSquad — Portada pública
   Dirección visual: "Apetito digital"

   La paleta no es la del SaaS genérico (morado/índigo): es la de una
   cocina — crema, carbón, ámbar de sofrito, rojo de especia, verde de
   albahaca. La idea es que un dueño de restaurante sienta que esto es
   de su oficio, no una herramienta de oficina que le tocó usar.

   Tipografía autohospedada, no de CDN: la portada es lo primero que ve
   alguien que no nos conoce, y esa impresión no puede depender de que
   responda un tercero. Mismo criterio que se usó con driver.js en la
   consola.
   ============================================================ */

/* ---------- Tipografías ---------- */

/* La letra de marca —Clash Display— la declara `cimientos.css`, que se carga
   antes que esta hoja. Aquí van sólo las dos que le acompañan.

   SE SIGUEN AUTOHOSPEDANDO, y por la misma razón de siempre: la portada es
   lo primero que ve alguien que no nos conoce, y esa impresión no puede
   depender de que responda un tercero. */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Fichas de color ----------

   Todas las fichas se definen en `:root` pelado, con la paleta clara
   completa. Los bloques de tema solo REDEFINEN — nunca estrenan una
   ficha ahí dentro, porque entonces el tema contrario se quedaría sin
   ella.
*/

:root {
    color-scheme: light dark;

    /* ── LA PALETA DEL SITIO, SOBRE LOS CIMIENTOS ─────────────────────────
     *
     * Aquí no se decide ningún color: se le ponen a la portada los nombres que
     * ya usa —`--masa`, `--tinta`, `--ambar`— apuntando a la paleta de
     * `cimientos.css`, que se carga antes y es la misma de la consola.
     *
     * ── QUÉ SE PIERDE, PORQUE VALE LA PENA DECIRLO ───────────────────────
     *
     * La dirección anterior se llamaba «apetito digital» y estaba razonada:
     * crema de masa, ámbar de sofrito, rojo de pimentón, verde de albahaca —
     * «que un dueño de restaurante sienta que esto es de su oficio, no una
     * herramienta de oficina que le tocó usar». Era una buena idea y funcionaba.
     *
     * Se cambia porque el equipo de diseño entregó UN solo sistema para todo, y
     * dos direcciones opuestas entre la portada y el producto es peor que
     * cualquiera de las dos: quien entra por la web y luego usa la aplicación
     * siente que son dos empresas. Los nombres cálidos se conservan a propósito,
     * para que se lea de dónde viene esto.
     *
     * ── Y LOS 700 USOS DE ABAJO NO SE TOCAN ──────────────────────────────
     *
     * Las 1.900 líneas de esta hoja piden sus colores por estos nombres. Cambiar
     * a qué apuntan cambia la portada entera sin editar una sola regla, que es
     * exactamente lo que se hizo en la consola.
     */

    /* Superficies */
    --masa:        var(--fondo);           /* era crema de masa cruda */
    --masa-2:      var(--superficie-hundida);
    --papel:       var(--superficie);
    --borde:       var(--filete);
    --borde-fuerte: var(--filete-medio);

    /* Tinta.
     *
     * `--tinta` NO se redefine aquí, y es el único caso: los cimientos ya la
     * traen y significa exactamente lo mismo —el color de un titular—. Ponerla
     * otra vez la dejaría diciendo `--tinta: var(--tinta)`, que es una
     * definición circular: el navegador la descarta sin avisar, la variable
     * queda vacía y los titulares de la portada se quedan sin color.
     *
     * Ya pasó una vez hoy, en el propio archivo de la paleta. Dos veces sería
     * no haber aprendido. */
    --tinta-2:     var(--tinta-cuerpo);
    --tinta-3:     var(--tinta-tenue);

    /* Acentos. El ámbar era el principal y ahora lo es el COBALTO, porque en
       este sistema el cobalto es lo que hace la persona — y una portada es,
       entera, una invitación a hacer algo. El ámbar sobrevive como aviso. */
    --ambar:       var(--accion);
    --ambar-hondo: var(--accion-pulsa);
    --especia:     var(--mal);
    --albahaca:    var(--bien);
    --dorado:      var(--ojo);

    /* Tintes translúcidos */
    --ambar-velo:  var(--accion-suave);
    --albahaca-velo: var(--bien-suave);
    --especia-velo: var(--mal-suave);

    /* Sombra: era cálida a propósito, «el gris frío sobre crema ensucia el
       papel». Ya no hay crema, así que vuelven a las del sistema. */
    --sombra-baja: var(--sombra-1);
    --sombra-media: var(--sombra-2);
    --sombra-alta: var(--sombra-4);

    /* Medidas */
    --ancho: 1200px;
    --ancho-texto: 62ch;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-full: 999px;
}

/* Oscuro por preferencia del sistema — salvo que la persona haya
   elegido claro a mano. */
/* ── EL TEMA OSCURO YA NO SE DEFINE AQUÍ ──────────────────────────────────
 *
 * `cimientos.css` redefine `--fondo`, `--superficie`, `--tinta-titular` y
 * compañía según el tema, y los nombres de arriba apuntan a ellos. Así que la
 * portada cambia de tema sola, sin repetir una segunda paleta.
 *
 * Repetirla era justo el riesgo: dos listas de colores para lo mismo se
 * separan, y la que se queda vieja no falla — sólo se ve un poco peor en uno de
 * los dos temas, que es donde nadie mira.
 */

/* El interruptor tampoco define colores: lo hace `cimientos.css`, que ya
   distingue `[data-theme="dark"]` y `[data-theme="light"]`. Aquí sólo queda
   lo que es de esta hoja. */

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

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--letra-cuerpo);
    font-size: 17px;
    line-height: 1.65;
    color: var(--tinta-2);
    background: var(--masa);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--letra-titulo);
    color: var(--tinta);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 0.5em;
    /* Aquí había tres ejes variables de Fraunces —`SOFT` para redondear las
       terminaciones, `WONK` para las formas caprichosas— que le daban el aire
       artesanal de la dirección anterior. Clash Display no los tiene y no los
       necesita: su carácter está en la geometría, no en el adorno. */
    letter-spacing: var(--track-display);
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ambar-hondo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--especia); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Foco visible y consistente. Sin esto, quien navega con teclado se
   pierde en una página de este largo. */
:where(a, button, summary, input, [tabindex]):focus-visible {
    outline: 3px solid var(--ambar);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--masa);
    padding: 12px 20px;
    z-index: 200;
    border-radius: 0 0 var(--r-md) 0;
}
.salto-contenido:focus { left: 0; }

/* ---------- Rejilla ---------- */

.marco {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 24px;
}

.seccion { padding-block: clamp(64px, 9vw, 112px); }
.seccion--tono { background: var(--masa-2); }

.encabezado-seccion {
    max-width: 46rem;
    margin: 0 auto clamp(40px, 5vw, 64px);
    text-align: center;
}
.encabezado-seccion p {
    font-size: 1.1rem;
    color: var(--tinta-3);
    max-width: 40rem;
    margin-inline: auto;
}

/* ---------- Piezas sueltas ---------- */

.sobrenombre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ambar-hondo);
    background: var(--ambar-velo);
    border: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent);
    padding: 7px 15px;
    border-radius: var(--r-full);
    margin-bottom: 22px;
}
.sobrenombre::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ambar);
    flex: none;
}

.resalte {
    /* Subrayado grueso en ámbar: marca la promesa sin recurrir al
       degradado sobre texto, que se lee lavado y no sobrevive al modo
       de alto contraste.

       Se hace con `text-decoration` y no con un fondo, aunque el fondo
       parezca más vistoso: cuando el titular parte en dos renglones, un
       fondo pinta también el espacio sobrante al final de la línea y
       queda un bloque de color colgando al lado de la última palabra.
       El subrayado sigue al texto y nada más. */
    text-decoration: underline;
    text-decoration-color: var(--ambar);
    text-decoration-thickness: 0.085em;
    text-underline-offset: 0.13em;
    text-decoration-skip-ink: none;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 15px 26px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--primario {
    background: var(--ambar);
    color: #2A1503;
    box-shadow: var(--sombra-media);
}
.boton--primario:hover { background: color-mix(in srgb, var(--ambar) 88%, #FFF); color: #2A1503; }

.boton--fantasma {
    background: transparent;
    color: var(--tinta);
    border-color: var(--borde-fuerte);
}
.boton--fantasma:hover { background: var(--papel); border-color: var(--ambar); color: var(--tinta); }

.boton--tinta {
    background: var(--tinta);
    color: var(--masa);
}
.boton--tinta:hover { background: color-mix(in srgb, var(--tinta) 85%, var(--ambar)); color: var(--masa); }

.boton--grande { padding: 18px 34px; font-size: 1.06rem; }

/* ---------- Barra superior ---------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--masa) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.barra[data-desplazada="si"] {
    border-bottom-color: var(--borde);
    box-shadow: var(--sombra-baja);
}
.barra__interior {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 72px;
}

/*  EL LOGOTIPO: «Gastro» + las tres cabezas + «Squad».
    Las medidas salen del `SquadLockup` del sistema de diseño y por eso van en
    `em` y no en píxeles: el emblema mide 1,55 veces la letra y la separación
    0,04, así que el conjunto crece y encoge de una pieza sin que nadie tenga
    que recalcular tres números.  */
.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.04em;
    font-family: var(--letra-marca);
    font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.55rem);
    font-weight: 700;
    color: var(--tinta);
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1;
    flex: none;
}
.marca:hover { color: var(--tinta); }
/*  El tono de identidad NO se ajusta al fondo: es el mismo cobalto en claro y
    en oscuro. Por eso va el color crudo y no `--accion-texto`, que sí se aclara
    sobre oscuro para poder leerse como enlace. Aquí no es un enlace: es el
    nombre de la casa.  */
.marca__squad { color: var(--cobalto-500); }
.marca__sello { width: 1.55em; height: 1.55em; flex: none; }

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.menu a {
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: var(--r-full);
    /*  UNA ENTRADA DE MENÚ NO SE PARTE EN DOS LÍNEAS.
        «Cómo funciona» se rompía en cuanto la cabecera se estrechaba —el
        logotipo entero ocupa más que el emblema suelto— y una entrada partida
        se lee como dos entradas. La barra ya sabe encogerse por otro lado. */
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.menu a:hover { background: var(--ambar-velo); color: var(--tinta); }

.barra__acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.barra__acciones .boton { padding: 11px 20px; font-size: 0.94rem; }

.interruptor-tema {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    border: 1px solid var(--borde);
    background: transparent;
    color: var(--tinta-2);
    cursor: pointer;
    flex: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.interruptor-tema:hover { background: var(--ambar-velo); color: var(--tinta); border-color: var(--ambar); }
.interruptor-tema .icono-luna { display: none; }
:root[data-theme="dark"] .interruptor-tema .icono-luna { display: block; }
:root[data-theme="dark"] .interruptor-tema .icono-sol { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .interruptor-tema .icono-luna { display: block; }
    :root:not([data-theme="light"]) .interruptor-tema .icono-sol { display: none; }
}

.boton-menu {
    display: none;
    width: 42px; height: 42px;
    place-items: center;
    border: 1px solid var(--borde);
    background: transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--tinta);
}

.menu-movil {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px 26px;
    border-bottom: 1px solid var(--borde);
    background: var(--masa);
}
.menu-movil[data-abierto="si"] { display: flex; }
.menu-movil a {
    color: var(--tinta-2);
    text-decoration: none;
    font-weight: 500;
    padding: 12px 4px;
    border-bottom: 1px solid var(--borde);
}
.menu-movil .boton { margin-top: 12px; border-bottom: 0; }

@media (max-width: 960px) {
    .menu { display: none; }
    .barra__acciones .boton--fantasma { display: none; }
    .boton-menu { display: grid; margin-left: auto; }
    .barra__acciones { margin-left: 0; }
}
@media (max-width: 560px) {
    .barra__acciones .boton--primario { display: none; }
}

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

.portada {
    position: relative;
    padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px);
    overflow: hidden;
}

/* Vapor de cocina: dos manchas cálidas muy difusas. Es el único adorno
   de fondo de la página — el resto del color lo pone el contenido. */
.portada::before,
.portada::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.portada::before {
    width: 520px; height: 520px;
    background: var(--ambar-velo);
    top: -180px; right: -120px;
}
.portada::after {
    width: 420px; height: 420px;
    background: var(--especia-velo);
    bottom: -200px; left: -140px;
}

.portada__reja {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.portada h1 { margin-bottom: 20px; }
.portada__entrada {
    font-size: clamp(1.08rem, 1.5vw, 1.22rem);
    color: var(--tinta-2);
    max-width: 34rem;
    margin-bottom: 32px;
}

.portada__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.portada__sellos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 0.92rem;
    color: var(--tinta-3);
}
.portada__sellos li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portada__sellos svg { color: var(--albahaca); flex: none; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }

/* ---------- Escena de la portada (teléfono + panel) ---------- */

.escena {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 520px;
}

.escena__panel {
    position: relative;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--papel);
    box-shadow: var(--sombra-alta);
    transform: perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
}

.escena__telefono {
    position: absolute;
    right: -6%;
    bottom: -7%;
    width: 40%;
    max-width: 250px;
    min-width: 178px;
    border-radius: 30px;
    overflow: hidden;
    border: 7px solid var(--tinta);
    background: var(--tinta);
    box-shadow: var(--sombra-alta);
    z-index: 2;
}
.escena__telefono img { border-radius: 22px; }

@media (max-width: 900px) {
    .portada__reja { grid-template-columns: 1fr; }
    .escena { min-height: 0; margin-top: 16px; }
    .escena__panel { transform: none; }
    .escena__telefono { position: static; width: 62%; margin: -14% auto 0; max-width: 240px; }
}

/* ---------- Franja de confianza ---------- */

.confianza {
    border-block: 1px solid var(--borde);
    background: var(--masa-2);
    padding-block: 30px 34px;
    /* La banda de dentro se sale del marco a propósito, así que la franja no
       puede recortarla por los lados. */
    overflow: hidden;
}
.confianza__titulo {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 22px;
}
/* `.confianza__fila` se retiró con los logos que no existían. La franja ahora
   lleva la banda del escuadrón, que trae su propia maquetación. */

/* Dentro de la franja la banda no necesita volver a salirse: la franja YA
   ocupa el ancho de la pantalla. Sin esto se sale el doble y descuadra. */
.confianza .banda {
    width: auto;
    margin-left: 0;
    margin-bottom: 0;
}

/* ---------- Tarjetas genéricas ---------- */

.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 30px;
    box-shadow: var(--sombra-baja);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-media);
    border-color: var(--borde-fuerte);
}
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-3); font-size: 0.97rem; margin: 0; }

.simbolo {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--ambar-velo);
    color: var(--ambar-hondo);
    margin-bottom: 18px;
}
.simbolo--especia { background: var(--especia-velo); color: var(--especia); }
.simbolo--albahaca { background: var(--albahaca-velo); color: var(--albahaca); }

.reja {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
.reja--2 { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }

/* ---------- Lo que se pierde (el problema) ---------- */

.perdida {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.perdida .tarjeta { border-left: 3px solid var(--especia); }
.perdida__cifra {
    font-family: var(--letra-titulo);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--especia);
    line-height: 1;
    margin-bottom: 12px;
    display: block;
}

/* ---------- Empleados digitales ---------- */

.empleado {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--sombra-baja);
}
.empleado__simbolo {
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--ambar-velo);
    color: var(--ambar-hondo);
    border: 1px solid color-mix(in srgb, var(--ambar) 26%, transparent);
    flex: none;
}
/* La columna de texto tiene que poder encogerse: en una rejilla, `1fr` no
   baja del ancho mínimo de su contenido, y bastaba una palabra larga para que
   la tarjeta empujara la página entera hacia un lado en un teléfono de 390px. */
/* EL RETRATO, EN LUGAR DEL SÍMBOLO.
   Cada empleado tiene su foto propia en el catálogo. Un icono genérico decía
   «esto es software»; una cara dice «esto es alguien que trabaja para ti», que
   es exactamente lo que la sección promete en su titular. */
/* ── EL RETRATO ES LO QUE CONVENCE ────────────────────────────────────────
 *
 * Estaba en 72 píxeles, del tamaño de un avatar de comentario. A ese tamaño no
 * se ve nada de lo que tienen dentro —el acero cepillado, las juntas, los
 * cables del cuello, el objeto de oficio que sostiene cada uno— y era lo único
 * que esta sección tenía para sostener su propio titular.
 *
 * A 132 la cara se lee y el objeto se distingue. Y `object-position: top`
 * porque los ocho están encuadrados de busto: centrado dejaría medio torso.
 */
.empleado__retrato {
    width: 132px; height: 132px; flex: none;
    border-radius: var(--r-md, 12px);
    object-fit: cover;
    object-position: center top;
    background: var(--masa-2);
    border: 1px solid var(--borde);
}
/* Sin foto, la inicial. Un hueco gris diría que esto está a medias. */
.empleado__retrato--letra {
    display: grid; place-items: center;
    font-family: var(--letra-titulo);
    font-size: 3.2rem; color: var(--tinta-3);
}

/* Y en un teléfono la tarjeta se pone en columna: 132 píxeles al lado del
   texto dejarían el nombre en dos letras por línea. */
@media (max-width: 560px) {
    .empleado { grid-template-columns: 1fr; gap: 16px; }
    .empleado__retrato { width: 100%; height: 200px; }
}

.empleado > div { min-width: 0; }
.empleado h3 { margin-bottom: 4px; overflow-wrap: anywhere; }
.empleado__cargo {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ambar-hondo);
    margin-bottom: 10px;
}
.empleado p { font-size: 0.96rem; color: var(--tinta-3); margin: 0; }
.empleado__nota {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.83rem;
    color: var(--tinta-3);
    background: var(--masa-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    padding: 4px 12px;
}

/* ---------- Pasos ---------- */

.pasos { display: grid; gap: clamp(48px, 7vw, 86px); }

.paso {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.paso:nth-child(even) .paso__texto { order: 2; }

.paso__numero {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--masa);
    font-family: var(--letra-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 18px;
}
.paso__texto h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.paso__texto p { color: var(--tinta-3); max-width: 34rem; }

.paso__detalle {
    margin-top: 18px;
    display: grid;
    gap: 9px;
}
.paso__detalle li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--tinta-2);
}
.paso__detalle svg { color: var(--albahaca); flex: none; margin-top: 4px; }

.lienzo {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--papel);
    box-shadow: var(--sombra-media);
}

@media (max-width: 880px) {
    .paso { grid-template-columns: 1fr; }
    .paso:nth-child(even) .paso__texto { order: 0; }
}

/* ---------- Demostración en vivo ---------- */

.demo {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }

.demo__marco {
    justify-self: center;
    width: 100%;
    max-width: 400px;
    border: 9px solid var(--tinta);
    border-radius: 34px;
    overflow: hidden;
    background: var(--tinta);
    box-shadow: var(--sombra-alta);
}
.demo__marco iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    background: var(--papel);
    border-radius: 25px;
}

.demo__sugerencias { display: grid; gap: 10px; margin-top: 20px; }
.demo__sugerencias li {
    background: var(--papel);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-md);
    padding: 11px 16px;
    font-size: 0.94rem;
    color: var(--tinta-2);
    font-style: italic;
}

.aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--albahaca-velo);
    border: 1px solid color-mix(in srgb, var(--albahaca) 34%, transparent);
    border-radius: var(--r-md);
    padding: 14px 18px;
    font-size: 0.92rem;
    color: var(--tinta-2);
    margin-top: 22px;
}
.aviso svg { color: var(--albahaca); flex: none; margin-top: 3px; }

/* ---------- Capacidades ---------- */

.capacidades {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(276px, 100%), 1fr));
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.capacidad {
    background: var(--papel);
    padding: 28px 26px;
    transition: background-color 0.18s ease;
}
.capacidad:hover { background: var(--masa-2); }
.capacidad h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tinta);
    margin-bottom: 8px;
}
.capacidad h4 svg { color: var(--ambar-hondo); flex: none; }
.capacidad p { font-size: 0.93rem; color: var(--tinta-3); margin: 0; }

/* ---------- El salón (POS) ----------

   Tres tarjetas de aparato y una rejilla de detalles. Las tarjetas llevan un
   filo de color arriba porque son tres cosas del mismo sistema: sin ese hilo
   común se leerían como tres productos sueltos. */

.salon-pantallas {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    margin-bottom: clamp(32px, 4vw, 52px);
}
/* En columna con `margin-top: auto` en el remate: las tres tarjetas no tienen
   el mismo largo de texto, y sin esto la línea de abajo quedaba a tres alturas
   distintas — que es lo que hace que tres tarjetas parezcan tres cosas. */
.salon-pantalla {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 30px 26px 26px;
    box-shadow: var(--sombra-baja);
    overflow: hidden;
}
.salon-pantalla::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ambar), var(--dorado));
}
.salon-pantalla__simbolo {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--ambar-velo);
    color: var(--ambar-hondo);
    border: 1px solid color-mix(in srgb, var(--ambar) 26%, transparent);
    margin-bottom: 16px;
}
.salon-pantalla__donde {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 4px;
}
.salon-pantalla h3 { margin-bottom: 10px; }
.salon-pantalla p { font-size: 0.95rem; color: var(--tinta-3); margin: 0; }
.salon-pantalla__clave {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto !important;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    font-size: 0.88rem !important;
    font-weight: 600;
    color: var(--albahaca) !important;
}
.salon-pantalla__clave svg { flex: none; }
/* El texto sí crece; el remate se queda abajo. */
.salon-pantalla > p:not(.salon-pantalla__clave) { margin-bottom: 18px; }

.salon-detalles {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    background: var(--borde);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.salon-detalle {
    background: var(--papel);
    padding: 26px 24px;
    transition: background-color 0.18s ease;
}
.salon-detalle:hover { background: var(--masa-2); }
.salon-detalle h4 { color: var(--tinta); margin-bottom: 8px; }
.salon-detalle p { font-size: 0.93rem; color: var(--tinta-3); margin: 0; }

/* ---------- Precios ---------- */

.planes {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    /* TODAS AL ALTO DE LA MÁS ALTA.
       Con `align-items: start` cada tarjeta medía lo que medía su contenido, y
       como los lemas tienen dos o tres líneas según el plan, los botones
       quedaban a alturas distintas: la fila se leía torcida y el ojo lo nota
       antes que la cabeza. `stretch` las iguala, y el `margin-top: auto` del
       botón lo empuja al fondo de todas por igual. */
    align-items: stretch;
}

.plan {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-baja);
}
.plan--destacado {
    border-color: var(--ambar);
    border-width: 2px;
    box-shadow: var(--sombra-alta);
}
.plan__cinta {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ambar);
    color: #2A1503;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: var(--r-full);
    white-space: nowrap;
}
.plan__nombre {
    font-family: var(--letra-titulo);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 4px;
}
.plan__lema { font-size: 0.94rem; color: var(--tinta-3); min-height: 3em; margin-bottom: 20px; }

.plan__precio {
    display: flex;
    align-items: baseline;
    min-height: 3.1rem;
    gap: 7px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--borde);
    flex-wrap: wrap;
}
.plan__monto {
    font-family: var(--letra-titulo);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1;
}
.plan__periodo { font-size: 0.92rem; color: var(--tinta-3); }

/* Hueco de precio sin definir: se ve claramente como un hueco, no como
   un cero. Un precio inventado es peor que un precio pendiente. */
.plan__monto--pendiente {
    color: var(--tinta-3);
    background: repeating-linear-gradient(-45deg, var(--masa-2), var(--masa-2) 7px, var(--papel) 7px, var(--papel) 14px);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-sm);
    padding: 2px 16px;
    font-size: 1.9rem;
}

.plan__incluye {
    display: grid;
    gap: 11px;
    margin: 0 0 26px;
    flex: 1;
    /* Los puntos, juntos arriba. Con las tarjetas igualadas al alto de la más
       alta, la que tiene menos puntos repartía el aire ENTRE ellos y su lista
       se leía suelta, como si le faltara algo. El aire sobrante va abajo, que
       es donde no molesta. */
    align-content: start;
}
.plan__incluye li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--tinta-2);
}
.plan__incluye svg { color: var(--albahaca); flex: none; margin-top: 4px; }
.plan__incluye strong { color: var(--tinta); font-weight: 600; }
.plan .boton { width: 100%; margin-top: auto; }

/* LA SEXTA TARJETA: cuando ninguno alcanza.
   Estaba en un bloque aparte debajo de la reja, y en un monitor dejaba un
   hueco al lado de los cinco planes. Puesta en la reja, la fila cierra y la
   sección se lee como una sola cosa. Va con borde punteado y sin precio
   porque no es un plan de tabla: es una conversación. */
.plan--medida {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}
.plan--medida .plan__lema { margin-bottom: auto; }

/* Explicación de los Créditos */
/* Cuando ninguno de los tres planes alcanza.
   Va DESPUÉS de los planes y antes de la letra de los Créditos: quien llega
   hasta aquí ya comparó los tres y está pensando "ninguno me sirve". */
.a-medida {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem 2.5rem; flex-wrap: wrap;
    margin: 2.5rem 0 0;
    padding: 1.75rem 2rem;
    border: 1px dashed var(--borde);
    border-radius: 20px;
    background: var(--papel);
}
.a-medida > div { flex: 1 1 420px; min-width: 0; }
.a-medida h3 { margin: .35rem 0 .6rem; font-size: 1.35rem; }
.a-medida p { margin: 0; max-width: 62ch; }
.a-medida .boton { flex: 0 0 auto; }
@media (max-width: 640px) { .a-medida { padding: 1.5rem 1.25rem; } .a-medida .boton { width: 100%; } }

.creditos {
    margin-top: clamp(40px, 5vw, 60px);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 44px);
}
.creditos__reja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}
@media (max-width: 820px) { .creditos__reja { grid-template-columns: 1fr; } }

.tabla-consumo { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tabla-consumo caption {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding-bottom: 12px;
}
.tabla-consumo th, .tabla-consumo td {
    text-align: left;
    padding: 11px 8px;
    border-bottom: 1px solid var(--borde);
}
.tabla-consumo th { font-weight: 600; color: var(--tinta-3); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tabla-consumo td:last-child, .tabla-consumo th:last-child { text-align: right; white-space: nowrap; }
.tabla-consumo td:last-child { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.envoltura-tabla { overflow-x: auto; }

/* ---------- Restaurantes ---------- */

.testimonio {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-baja);
}
.testimonio--hueco {
    border-style: dashed;
    border-color: var(--borde-fuerte);
    background: transparent;
    box-shadow: none;
}
.testimonio__cita {
    font-family: var(--letra-titulo);
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--tinta);
    margin-bottom: 24px;
    flex: 1;
}
.testimonio--hueco .testimonio__cita { color: var(--tinta-3); font-style: italic; }
.testimonio__firma { display: flex; align-items: center; gap: 13px; }
.testimonio__retrato {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--masa-2);
    border: 1px solid var(--borde);
    flex: none;
}
.testimonio__nombre { font-weight: 600; color: var(--tinta); font-size: 0.96rem; }
.testimonio__lugar { font-size: 0.86rem; color: var(--tinta-3); }

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

.preguntas { max-width: 50rem; margin-inline: auto; display: grid; gap: 12px; }

.pregunta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    overflow: hidden;
}
.pregunta[open] { border-color: var(--borde-fuerte); box-shadow: var(--sombra-baja); }
.pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    color: var(--tinta);
    list-style: none;
    font-size: 1.02rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
    content: '';
    width: 11px; height: 11px;
    border-right: 2px solid var(--ambar-hondo);
    border-bottom: 2px solid var(--ambar-hondo);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s ease;
    flex: none;
}
.pregunta[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.pregunta__cuerpo { padding: 0 24px 22px; color: var(--tinta-3); font-size: 0.97rem; }
.pregunta__cuerpo p { max-width: var(--ancho-texto); }

/* ---------- Llamado final ---------- */

.remate {
    position: relative;
    background: var(--tinta);
    color: var(--masa);
    border-radius: var(--r-xl);
    padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px);
    text-align: center;
    overflow: hidden;
}
.remate::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(224, 122, 31, 0.25), transparent 62%);
    pointer-events: none;
}
.remate > * { position: relative; }
.remate h2 { color: var(--masa); margin-bottom: 16px; }
.remate p { color: color-mix(in srgb, var(--masa) 76%, transparent); max-width: 40rem; margin-inline: auto; font-size: 1.08rem; }
.remate__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 32px;
}
.remate .boton--fantasma {
    color: var(--masa);
    border-color: color-mix(in srgb, var(--masa) 34%, transparent);
}
.remate .boton--fantasma:hover {
    background: color-mix(in srgb, var(--masa) 12%, transparent);
    color: var(--masa);
    border-color: var(--masa);
}
.remate__pie {
    margin-top: 22px;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--masa) 60%, transparent);
}

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

.pie {
    border-top: 1px solid var(--borde);
    background: var(--masa-2);
    padding-block: clamp(48px, 6vw, 72px) 32px;
}
.pie__reja {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 44px;
}
@media (max-width: 800px) { .pie__reja { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .pie__reja { grid-template-columns: 1fr; } }

.pie__lema { color: var(--tinta-3); font-size: 0.94rem; max-width: 26rem; margin-top: 16px; }
.pie h4 {
    font-family: var(--letra-cuerpo);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 16px;
}
.pie__enlaces { display: grid; gap: 11px; }
.pie__enlaces a {
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 0.94rem;
}
.pie__enlaces a:hover { color: var(--ambar-hondo); text-decoration: underline; }

.pie__cierre {
    border-top: 1px solid var(--borde);
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: var(--tinta-3);
}

/* ---------- Aparición al desplazar ---------- */

.aparece {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.aparece[data-visible="si"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .aparece { opacity: 1; transform: none; }
}

/* ============================================================
   Conversación de demostración

   Es una REPRODUCCIÓN, no el canal real. Ver la nota en index.html:
   embeber el canal público de un restaurante que está trabajando
   significaría que cada visitante le mete pedidos falsos a su cocina y
   le gasta los Créditos.

   Los platos y los precios sí son reales — son los del Mesón Paisa.
   ============================================================ */

.chat-demo {
    display: flex;
    flex-direction: column;
    height: 560px;
    background: var(--masa);
    border-radius: 25px;
    overflow: hidden;
}

.chat-demo__cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    flex: none;
}
.chat-demo__retrato {
    width: 42px; height: 42px;
    border-radius: 13px;
    background: var(--ambar-velo);
    color: var(--ambar-hondo);
    display: grid;
    place-items: center;
    font-family: var(--letra-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    flex: none;
}
.chat-demo__quien { min-width: 0; }
.chat-demo__nombre { font-weight: 600; color: var(--tinta); font-size: 0.97rem; line-height: 1.2; }
.chat-demo__lugar {
    font-size: 0.78rem;
    color: var(--tinta-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-demo__pulso {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--albahaca);
    flex: none;
}
.chat-demo__pulso::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--albahaca);
}

.chat-demo__cuerpo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.burbuja {
    max-width: 84%;
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 0.93rem;
    line-height: 1.5;
    animation: burbuja-entra 0.32s ease both;
}
@keyframes burbuja-entra {
    from { opacity: 0; transform: translateY(9px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.burbuja--mesero {
    align-self: flex-start;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-bottom-left-radius: 6px;
    color: var(--tinta-2);
}
.burbuja--comensal {
    align-self: flex-end;
    background: var(--ambar);
    color: #2A1503;
    border-bottom-right-radius: 6px;
    font-weight: 500;
}

.burbuja--escribiendo { display: flex; gap: 5px; padding: 15px 17px; }
.burbuja--escribiendo span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tinta-3);
    animation: pestanea 1.3s infinite ease-in-out;
}
.burbuja--escribiendo span:nth-child(2) { animation-delay: 0.18s; }
.burbuja--escribiendo span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pestanea {
    0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Tarjetas de plato que el Mesero manda dentro de la conversación */
.platos {
    align-self: flex-start;
    max-width: 92%;
    display: grid;
    gap: 7px;
    animation: burbuja-entra 0.32s ease both;
}
.plato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 13px;
    padding: 11px 14px;
    font-size: 0.9rem;
}
.plato__nombre { color: var(--tinta); font-weight: 500; }
.plato__precio {
    color: var(--ambar-hondo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tarjeta de pedido creado */
.pedido {
    align-self: flex-start;
    max-width: 92%;
    background: var(--albahaca-velo);
    border: 1px solid color-mix(in srgb, var(--albahaca) 38%, transparent);
    border-radius: 15px;
    padding: 15px 17px;
    animation: burbuja-entra 0.32s ease both;
}
.pedido__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--albahaca);
    font-size: 0.87rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.pedido__renglon {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.9rem;
    color: var(--tinta-2);
    padding: 3px 0;
}
.pedido__total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--albahaca) 30%, transparent);
    font-weight: 700;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.chat-demo__pie {
    flex: none;
    padding: 12px 14px;
    background: var(--papel);
    border-top: 1px solid var(--borde);
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-demo__campo {
    flex: 1;
    background: var(--masa-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    padding: 10px 16px;
    color: var(--tinta-3);
    font-size: 0.9rem;
}
.chat-demo__repetir {
    width: 40px; height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    background: var(--ambar);
    color: #2A1503;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.chat-demo__repetir:hover { transform: rotate(-40deg); background: color-mix(in srgb, var(--ambar) 88%, #FFF); }

/* ============================================================
   El recorrido de un pedido — diagrama de carriles animado

   Una fila por actor (comensal, mesero digital, tu equipo, cocina,
   domicilio) y una columna por paso. Las fichas son HTML de verdad —
   texto seleccionable, no un SVG con tipografía trazada— y encima va una
   capa SVG que solo lleva las líneas.

   Esa capa está vacía en el documento a propósito: las líneas las dibuja
   `recorrido.js` midiendo dónde quedó cada ficha. Coordenadas escritas a
   mano dejan de ser ciertas en cuanto cambia una palabra o el ancho de
   la pantalla.

   El color no es decoración: cada carril tiene el suyo (`--actor`) y el
   punto que viaja es siempre ámbar, porque el punto ámbar ES el pedido.
   Si el punto cambiara de color en cada tramo, dejaría de leerse como
   una sola cosa que se mueve.
   ============================================================ */

.recorrido {
    /* La línea apagada se saca de la tinta de apoyo y no de `--borde`:
       sobre crema, un borde de tarjeta es demasiado tenue para leerse
       como un cable, y en oscuro desaparece del todo. */
    --linea: color-mix(in srgb, var(--tinta-3) 52%, transparent);
    --linea-viva: var(--ambar);
    --w-carril: clamp(88px, 9vw, 118px);
    --alto-carril: 104px;

    background: var(--masa-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: clamp(18px, 2.4vw, 30px);
    box-shadow: var(--sombra-baja);
}

/* Fichas de color por actor. */
[data-carril="comensal"]  { --actor: var(--tinta-2); }
[data-carril="mesero"]    { --actor: var(--ambar); }
[data-carril="equipo"]    { --actor: var(--albahaca); }
[data-carril="cocina"]    { --actor: var(--especia); }
[data-carril="domicilio"] { --actor: var(--dorado); }

.recorrido__lienzo {
    position: relative;
}

.recorrido__lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;   /* las líneas no se interponen entre el dedo y la ficha */
    z-index: 0;
}

.recorrido__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--w-carril) repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(var(--alto-carril), auto));
    column-gap: clamp(8px, 1.1vw, 16px);
}

/* ---------- Los carriles ---------- */

.banda {
    grid-column: 1 / -1;
    grid-row: var(--fila);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--tinta) 3.5%, transparent);
}
/* A rayas, no todas pintadas: con las cinco del mismo tono no se
   distingue dónde acaba un carril y empieza el siguiente. */
.banda[data-carril="mesero"], .banda[data-carril="cocina"] { background: transparent; }

.carril {
    grid-column: 1;
    grid-row: var(--fila);
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px 8px;
    color: var(--actor);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1.25;
}
.carril svg { width: 19px; height: 19px; flex: none; }

/* ---------- Las fichas ---------- */

.nodo {
    grid-column: var(--col);
    grid-row: var(--fila);
    align-self: center;
    position: relative;
    display: grid;
    gap: 5px;
    /* Sin esto, una columna de la rejilla puede quedarse en 130px y la ficha
       salirse igual: por omisión un hijo de rejilla no se encoge por debajo de
       su contenido mínimo, y basta una palabra larga para reventar el ancho. */
    min-width: 0;
    padding: 11px 12px 12px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-baja);
    transition: opacity 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, transform 0.4s ease;
}

.nodo__num {
    width: 21px; height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--actor) 14%, transparent);
    color: var(--actor);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.nodo__num--rama svg { width: 13px; height: 13px; }

/* En pantalla ancha el carril ya dice de quién es la ficha; repetirlo
   sería ruido. Sigue en el documento para el teléfono —donde no hay
   carriles— y para quien lo escucha en vez de verlo. */
.nodo__actor {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nodo__titulo {
    font-family: var(--letra-titulo);
    font-size: clamp(0.82rem, 0.95vw, 0.95rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--tinta);
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* El estado técnico del pedido, el mismo que guarda la base. Va en
   minúscula y pequeño: es una nota al pie, no un titular. */
.nodo__estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tinta-3);
}
.nodo__estado::before {
    content: '';
    width: 5px; height: 5px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

/* La rama: lo que puede pasar, no lo que siempre pasa. */
.nodo--rama {
    border-style: dashed;
    background: color-mix(in srgb, var(--papel) 60%, transparent);
    box-shadow: none;
}

/* ---------- Los tres estados de una ficha ---------- */

.nodo[data-estado="espera"] { opacity: 0.42; }

.nodo[data-estado="activo"] {
    opacity: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--linea-viva) 65%, transparent);
    box-shadow: var(--sombra-media),
                0 0 0 3px color-mix(in srgb, var(--linea-viva) 18%, transparent);
}
.nodo[data-estado="activo"] .nodo__num {
    background: var(--linea-viva);
    color: #2A1503;   /* el mismo carbón del botón primario: ámbar sobre ámbar no se lee */
}
.nodo[data-estado="activo"] .nodo__estado { color: var(--ambar-hondo); }

.nodo[data-estado="hecho"] {
    opacity: 1;
    border-color: color-mix(in srgb, var(--linea-viva) 30%, transparent);
}

/* El anillo que sale cuando llega el pedido. Es un pseudoelemento y no un
   nodo más: se enciende y se apaga solo, sin tocar el documento. */
.nodo::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid var(--linea-viva);
    opacity: 0;
    pointer-events: none;
}
.nodo[data-golpe="si"]::after { animation: recorrido-anillo 0.75s ease-out; }

@keyframes recorrido-anillo {
    0%   { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.16); }
}

/* ---------- Las líneas ---------- */

.recorrido-linea {
    fill: none;
    stroke: var(--linea);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.recorrido-linea--rama { stroke-dasharray: 5 5; }

/* La misma línea, encima y en ámbar. Se descubre con `stroke-dashoffset`
   al mismo ritmo que avanza el punto, así que el trazo va quedando
   pintado detrás de él. */
.recorrido-linea-viva {
    fill: none;
    stroke: var(--linea-viva);
    stroke-width: 2.1;
    stroke-linecap: round;
}

.recorrido-punto {
    fill: var(--linea-viva);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--linea-viva) 75%, transparent));
}
.recorrido-halo {
    fill: color-mix(in srgb, var(--linea-viva) 22%, transparent);
}

/* ---------- El relato de abajo ---------- */

.narrador {
    list-style: none;
    margin: clamp(18px, 2.2vw, 26px) 0 0;
    padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
}

.narrador__paso {
    display: grid;
    /* Ancho fijo para el nombre del actor, no `auto`: con `auto` la columna
       mide lo que mide la palabra, y el párrafo daba un salto lateral cada vez
       que el relato pasaba de "COMENSAL" a "MESERO DIGITAL". */
    grid-template-columns: 8.4rem 1fr;
    gap: 4px 14px;
    align-items: baseline;
    /* Todos los pasos comparten celda, así que la caja mide lo que el más
       largo. Sin esto, los cortos reparten el sobrante entre sus dos filas y
       el nombre del actor queda flotando lejos del texto. */
    align-content: start;
}
.narrador__paso + .narrador__paso { margin-top: 12px; }

.narrador__quien {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--actor);
    white-space: nowrap;
}
.narrador__paso p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--tinta-2);
    max-width: 66ch;
}
.narrador__paso strong { color: var(--tinta); }

/* Con JavaScript, un paso a la vez. La clase la pone el guion: si no
   corre, arriba queda la lista entera y se lee igual de bien.

   Los pasos ocultos siguen ocupando la misma celda de la rejilla y se
   apagan con `opacity`, no con `display:none`: así la caja no pega
   saltos de alto al cambiar de paso, y quien escucha la página oye la
   historia completa en vez de una frase suelta. */
.narrador[data-guiado="si"] {
    display: grid;
    min-height: 5.4em;
}
.narrador[data-guiado="si"] .narrador__paso {
    grid-area: 1 / 1;
    margin-top: 0;
    opacity: 0;
    transform: translateY(6px);
    /* El que se va se apaga rápido... */
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.narrador[data-guiado="si"] .narrador__paso[data-activo="si"] {
    opacity: 1;
    transform: none;
    /* ...y el que llega espera a que termine. Comparten celda: si se cruzaran,
       durante un instante se leerían las dos frases una encima de la otra. */
    transition: opacity 0.3s ease 0.16s, transform 0.3s ease 0.16s;
}

/* ---------- En el teléfono: los carriles se ponen de pie ----------

   No hay columnas ni bandas; las fichas caen en el orden en que están
   escritas, que es el orden del recorrido, y las líneas se vuelven a
   medir solas — el guion decide si el trazo va de lado o hacia abajo
   según dónde quedaron las cajas, no según un `matchMedia`. Así no hay
   dos verdades que mantener de acuerdo. */

@media (max-width: 1024px) {
    .recorrido__rejilla {
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding-left: 4px;
    }
    .banda, .carril { display: none; }

    .nodo {
        grid-column: auto;
        grid-row: auto;
        width: min(100%, 400px);
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'num actor'
            'num titulo'
            'num estado';
        column-gap: 12px;
        padding: 13px 16px 14px;
    }
    .nodo__num    { grid-area: num; align-self: center; }
    .nodo__actor  {
        grid-area: actor;
        position: static;
        width: auto; height: auto;
        clip-path: none;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--actor);
    }
    .nodo__titulo { grid-area: titulo; font-size: 1rem; }
    .nodo__estado { grid-area: estado; }

    /* La rama se corre a la derecha y se hace más angosta: se ve que es un
       desvío y no un escalón más de la escalera, y le deja el pasillo libre
       al camino directo, que baja por la izquierda.

       `width: auto` en vez del `min(100%, 400px)` de las demás: con un ancho
       del 100% más un margen, la ficha se saldría del cajón por la derecha. */
    .nodo--rama {
        margin-left: min(36%, 150px);
        width: auto;
        max-width: 400px;
    }

    .narrador[data-guiado="si"] { min-height: 7.5em; }
}

@media (max-width: 520px) {
    .recorrido { padding: 16px 14px; }
    .narrador__paso { grid-template-columns: 1fr; gap: 3px; }
    .narrador[data-guiado="si"] { min-height: 9.5em; }
}

/* ---------- Sin animación ----------

   Quien pidió que la pantalla se esté quieta ve el recorrido ya
   recorrido: todas las fichas encendidas, todas las líneas pintadas y el
   relato completo. Lo que se pierde es el movimiento, no la información. */

@media (prefers-reduced-motion: reduce) {
    .nodo, .narrador[data-guiado="si"] .narrador__paso { transition: none; }
    .nodo[data-golpe="si"]::after { animation: none; }
}


/* ---------- Los que todavía no se pueden contratar ----------
   No son un hueco que tapar: son la respuesta a «¿y esto hasta dónde llega?»,
   que es una razón para quedarse. Van más pequeños y más callados que los seis
   de arriba —no se venden todavía— y SIN FECHA: una fecha que se incumple
   cuesta más de lo que suma. */
.porvenir-lote { margin-top: 2.5rem; }
.porvenir__titulo {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--tinta-3); margin: 0 0 1rem;
}
.porvenir-reja {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.porvenir {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
    padding: 14px 16px;
    border: 1px dashed var(--borde);
    border-radius: var(--r-lg);
}
.porvenir .empleado__retrato { width: 44px; height: 44px; opacity: .75; }
.porvenir .empleado__retrato--letra { font-size: 1.2rem; }
.porvenir h4 { margin: 0; font-size: 1rem; }
.porvenir p { margin: 2px 0 0; font-size: 0.86rem; color: var(--tinta-3); }


/* ══════════════════════════════════════════════════════════════════════════
   EL EMBLEMA, SEGÚN EL FONDO
   Dos archivos que sólo se diferencian en el contorno. Se alternan aquí y no
   con un guion: así el logotipo llega ya puesto y no parpadea al cargar.
   ══════════════════════════════════════════════════════════════════════════ */
.marca__sello { display: block; }
.marca__sello--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marca__sello--claro  { display: none; }
    :root:not([data-theme="light"]) .marca__sello--oscuro { display: block; }
}
:root[data-theme="dark"] .marca__sello--claro  { display: none; }
:root[data-theme="dark"] .marca__sello--oscuro { display: block; }
:root[data-theme="light"] .marca__sello--claro  { display: block; }
:root[data-theme="light"] .marca__sello--oscuro { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LA BANDA SIN FIN DEL ESCUADRÓN

   Nueve retratos desfilando despacio, antes de que empiece la lectura. Es la
   única pieza de la portada que se mueve sola, y se permite porque dice «esto
   es un equipo» en un segundo — lo que la sección tarda tres párrafos en
   explicar.
   ══════════════════════════════════════════════════════════════════════════ */

.banda {
    position: relative;
    margin: 0 0 3rem;
    /* Se sale del marco a propósito: una cinta que empieza y acaba dentro de
       un contenedor no parece infinita, parece una lista con márgenes. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    /* Y se desvanece por los dos lados. Sin esto, los retratos aparecen y
       desaparecen de golpe contra el borde de la pantalla, que delata el truco.
       `mask` va con su prefijo porque Safari todavía lo pide. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.banda__tira {
    display: flex;
    gap: 1.75rem;
    width: max-content;
    padding: 0.5rem 0.875rem;
    /* La duración crece con el número de agentes: así cada retrato tarda lo
       mismo en cruzar, se contraten seis o doce. Cinco segundos por cara es el
       ritmo en que se alcanza a mirar una sin que la banda parezca parada. */
    animation: banda-desfile calc(var(--banda-piezas, 9) * 5s) linear infinite;
}
.banda:hover .banda__tira,
.banda:focus-within .banda__tira { animation-play-state: paused; }

/* El desplazamiento es exactamente la MITAD: la lista va duplicada, así que al
   volver al principio lo que se ve es idéntico y el salto no existe.
   `translate3d` y no `translateX` — obliga a la tarjeta gráfica y evita el
   tirón que se nota en un teléfono modesto. */
@keyframes banda-desfile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.banda__pieza {
    flex: 0 0 auto;
    width: 180px;
    margin: 0;
    text-align: center;
}

.banda__retrato {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: cover;
    /* Recortado por arriba: los ocho retratos están encuadrados de busto y la
       cara vive en la mitad superior. Centrarlo dejaría medio torso. */
    object-position: center top;
    border-radius: var(--r-md);
    border: 1px solid var(--borde);
    background: var(--masa-2);
    box-shadow: var(--sombra-baja);
}
.banda__retrato--letra {
    display: grid;
    place-items: center;
    font-family: var(--letra-titulo);
    font-size: 3.5rem;
    color: var(--tinta-3);
}

.banda__nombre {
    margin: 0.75rem 0 0.15rem;
    font-family: var(--letra-titulo);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinta);
    letter-spacing: var(--track-titulo);
}
.banda__oficio {
    margin: 0;
    font-family: var(--letra-numero);
    font-size: 0.66rem;
    letter-spacing: var(--track-rotulo);
    text-transform: uppercase;
    color: var(--tinta-3);
    /* Dos líneas como mucho: un oficio largo no puede descuadrar la altura de
       la banda entera. */
    line-height: 1.35;
}

/* NO SE MUEVE PARA QUIEN PIDIÓ QUE NADA SE MUEVA.
   No es una cortesía: el movimiento continuo le produce mareo de verdad a
   mucha gente. Quieta, y se arrastra con el dedo. */
@media (prefers-reduced-motion: reduce) {
    .banda__tira { animation: none; }
    .banda { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
    .banda__pieza  { width: 132px; }
    .banda__retrato { width: 132px; height: 132px; }
    .banda__nombre { font-size: 0.86rem; }
}