/* ===========================================================================
   PIZZAS CASTEC — hoja del tema
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de la del sistema, que llega siempre por su cuenta desde
   layout.php. Aquí solo va lo que cambia; nada de `@import`.

   LA IDEA
   -------
   La carta cabe en la pantalla y no se desplaza. A la izquierda el riel de
   pizzas —foto cuadrada, nombre chico— y a la derecha la elegida en grande,
   saliéndose por el borde. Arriba, la marquesina de promociones. Abajo, el
   precio, el botón de agregar y un pie de un renglón.

   NINGÚN COLOR NI TIPOGRAFÍA ESCRITOS A MANO. Todo sale de las variables que
   imprime el panel, siempre con valor de respaldo por si alguna faltara.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LA PALETA
   ---------------------------------------------------------------------------
   El panel manda --color-primario, --color-secundario, --color-fondo, las
   tipografías y los redondeos. Lo que NO manda —el color del texto, el de las
   tarjetas y el de las líneas— lo pone el tema, igual que hace el base: él los
   pone para fondo oscuro y esta pizzería es de fondo claro.

   Los valores de respaldo son los del logotipo: rojo ladrillo y café. Si el
   panel trae otros, ganan los del panel, que es de lo que se trata.
   --------------------------------------------------------------------------- */

:root {
    --color-texto:        #2B1A14;   /* el café oscuro del logotipo */
    --color-texto-suave:  #8A7269;
    --color-superficie:   #FFFFFF;
    --color-borde:        #EFE3DC;
    --espacio:            14px;

    /* Medidas de la vitrina. En un sitio los pasa el @media, y aquí se leen
       de un solo lugar: cambiar el ancho del riel es cambiar un número. */
    --riel-ancho:   84px;
    --alto-pie:     34px;
    --reserva-bolsa: 0px;
    --sombra:       0 10px 30px rgba(43, 26, 20, 0.10);
}

/* El tamaño general del texto lo controla el panel. Como todo va en rem,
   moverlo agranda o achica la pantalla entera de forma pareja. */
html { font-size: var(--escala-texto, 100%); }

/* El atributo `hidden` le gana a cualquier `display` de esta hoja. Sin esto el
   popup y el carrito —que son `display: flex` a pantalla completa— se tragan
   todos los toques aunque estén «ocultos»: la carta se ve perfecta y no
   responde a nada. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   2. UNA SOLA PANTALLA
   ---------------------------------------------------------------------------
   El documento mide lo que mide la pantalla y no se desplaza. Lo único que se
   mueve es el riel.

   `dvh` y no `vh`: en el iPhone, `vh` mide el viewport GRANDE —el de cuando la
   barra de direcciones está escondida—, así que con la barra a la vista el pie
   quedaba por debajo del navegador. `dvh` mide el de verdad, ahora mismo. La
   línea de `vh` va antes como respaldo para el navegador que no lo entienda.

   El popup, el carrito y el checkout son `position: fixed`: no son elementos
   de esta columna y siguen ocupando la pantalla entera cuando se abren.
   --------------------------------------------------------------------------- */

body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* El respiro de la barra del iPhone lo pone el pie, no el body: aquí
       empujaría la columna entera fuera de la pantalla. */
    padding-bottom: 0;

    background: var(--color-fondo, #FFFFFF);
    color: var(--color-texto);
}

.cabecera,
.marquesina,
.franja,
.pie          { flex: 0 0 auto; }

/* `min-height: 0` es lo que permite que el riel se desplace por dentro. Sin
   ello, un elemento flexible crece hasta caber su contenido y la pantalla se
   estira: vuelve el desplazamiento que este tema quiere no tener. */
.contenido    { flex: 1 1 auto; min-height: 0; }

/* ---------------------------------------------------------------------------
   3. LA CABECERA — más baja que en el tema base
   --------------------------------------------------------------------------- */

.cabecera {
    padding: 8px var(--espacio);
    gap: 10px;
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-superficie);
}

.cabecera__logo    { width: 34px; height: 34px; border-radius: var(--radio-chico, 10px); }
.cabecera__nombre  { font-size: 0.98rem; letter-spacing: -0.015em; }
.cabecera__sucursal{ margin: 0; font-size: 0.7rem; color: var(--color-texto-suave); }

.cabecera__acciones .accion {
    width: 36px;
    height: 36px;
    color: var(--color-texto-suave);
}
.cabecera__acciones .accion:hover { color: var(--color-primario); }

/* Los nombres de los atajos se guardan: en esta pantalla cada píxel de alto es
   media rebanada de pizza, y los tres iconos ya se entienden solos. */
.cabecera__acciones .accion__texto { display: none; }

/* ---------------------------------------------------------------------------
   4. LA MARQUESINA
   ---------------------------------------------------------------------------
   El espacio de los banners, con el TEXTO de cada promoción pasando en bucle.
   La tira va pintada dos veces y la animación la corre media tira: al llegar,
   la segunda copia está exactamente donde empezó la primera y el bucle no
   tiene costura.

   Solo se anima `transform`, que el navegador resuelve sin repintar. Animar
   `left` o `margin` es el arrastre a tirones que delata a una web hecha a
   prisa.
   --------------------------------------------------------------------------- */

.marquesina {
    overflow: hidden;
    background: var(--color-primario, #D1421F);
    color: #fff;
    line-height: 1;
}

.marquesina__pista {
    display: flex;
    width: max-content;
    animation: marquesina-correr var(--marquesina-seg, 30s) linear infinite;
}

/* CADA COPIA MIDE AL MENOS UNA PANTALLA DE ANCHO.
   Con una sola promoción corta —«2x1 los martes»— las dos copias juntas no
   llegaban a llenar la pantalla, y como la animación recorre exactamente una
   copia, quedaba un hueco blanco corriendo detrás del texto. Obligando a cada
   copia a medir una pantalla, el recorrido siempre tapa lo que deja atrás.
   Con promociones largas el mínimo no estorba: ya miden más. */
.marquesina__grupo {
    display: flex;
    flex: 0 0 auto;
    min-width: 100vw;
    justify-content: space-around;
}

.marquesina__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.marquesina__item--enlace { text-decoration: underline; text-underline-offset: 3px; }
.marquesina__punto        { opacity: 0.55; padding: 0 8px; }

@keyframes marquesina-correr {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Se para mientras alguien la está leyendo o va a tocar un enlace. */
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   5. LAS FRANJAS DE AVISO — cerrado, servicio suspendido
   --------------------------------------------------------------------------- */

.franja {
    margin: 0;
    padding: 7px var(--espacio);
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.franja--cerrado { color: var(--color-primario); }
.franja--aviso   { color: var(--color-texto); }

/* ---------------------------------------------------------------------------
   6. LA VITRINA — riel y escena
   --------------------------------------------------------------------------- */

.vitrina {
    /* Se pisa el `.contenido` del tema base: aquí no hay ni relleno general ni
       ancho máximo centrado, porque la pizza tiene que llegar al borde. */
    padding: 0;
    max-width: none;
    margin: 0;

    display: grid;
    grid-template-columns: var(--riel-ancho) minmax(0, 1fr);

    /* El renglón se declara aunque solo haya uno: así el riel y la escena
       heredan un alto DEFINIDO y pueden desplazarse y recortar por dentro. Con
       el alto en `auto` crecerían hasta caber su contenido y volvería el
       desplazamiento de la página entera. */
    grid-template-rows: minmax(0, 1fr);
}

/* La carta vacía ocupa las dos columnas: no hay riel que enseñar. */
.vitrina > .aviso-vacio {
    grid-column: 1 / -1;
    align-self: center;
    padding: 0 var(--espacio);
}

/* --- El riel -------------------------------------------------------------- */

.riel {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 6px calc(10px + var(--reserva-bolsa));
    border-right: 1px solid var(--color-borde);
    background: var(--color-superficie);

    /* El gesto se queda en el riel. Al llegar a su tope, el navegador
       CONTINÚA el arrastre en lo de atrás y la pantalla entera rebota: es lo
       que se siente como que «el sitio se mueve solo». */
    overscroll-behavior: contain;
    scrollbar-width: none;

    /* Las miniatuas se desvanecen contra los dos extremos en vez de cortarse a
       filo: así se ve que hay más arriba y más abajo. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.riel::-webkit-scrollbar { display: none; }

.riel__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- La miniatura --------------------------------------------------------- */

/* TODAS LAS CASILLAS MIDEN LO MISMO, TENGAN LO QUE TENGAN DENTRO.
   El alto sale del ancho del riel, así que no hay dos números que mantener
   cuadrados: con foto y nombre de un renglón sobra un poco de aire, y sin foto
   el nombre se centra en ese mismo alto. Un riel donde una casilla mide
   distinto que las de al lado se nota a la primera pasada del pulgar. */
.mini {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: calc(var(--riel-ancho) + 14px);
    padding: 6px 4px 7px;
    border-radius: var(--radio, 14px);
    text-align: center;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease;
}

.mini__foto {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;

    /* FONDO TRANSPARENTE, SIEMPRE.
       Las pizzas llegan en PNG recortado. Un color fijo por detrás asoma
       alrededor del recorte —la «silueta» que se ve alrededor de los logos— y
       encima ignora la paleta que el dueño eligió. */
    background: transparent;
}

.mini__foto img {
    width: 100%;
    height: 100%;
    /* `contain` y no `cover`: la foto ya viene cuadrada y con el fondo quitado.
       Recortarla le comería la orilla de la masa. */
    object-fit: contain;
}

.mini__nombre {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-texto-suave);

    /* UN SOLO RENGLÓN, Y LO QUE NO QUEPA, PUNTOS SUSPENSIVOS.
       Con dos renglones permitidos, una pizza de nombre largo hacía su
       casilla más alta que las demás y el riel quedaba disparejo —una sola
       basta para que se note—. Además el nombre completo está al otro lado en
       grande: aquí solo hace falta reconocer cuál es, y para eso sobra con el
       principio. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La elegida: pastilla de color y un punto más grande. Se nota de reojo sin
   tener que leer nada. */
.mini:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

.mini--activa {
    background: rgba(209, 66, 31, 0.10);
    background: color-mix(in srgb, var(--color-primario, #D1421F) 12%, transparent);
    transform: scale(1.03);
}
.mini--activa .mini__nombre { color: var(--color-primario); }

.mini--agotada          { opacity: 0.42; }
.mini--agotada .mini__foto img { filter: grayscale(1); }

.mini__agotada {
    display: block;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-suave);
}

/* Con foto, la etiqueta va ENCIMA de ella y no debajo del nombre: así no le
   suma alto a la casilla y esa pizza sigue midiendo lo mismo que las demás.
   (Sin foto va en su renglón, que ahí sí sobra sitio.) */
.mini__foto .mini__agotada {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    padding: 2px 0;
    border-radius: var(--radio-chico, 10px);
    background: var(--color-superficie);
}

/* SIN FOTO NO SE DIBUJA NINGÚN MARCO.
   Ni gris con un cubierto, ni un recuadro punteado: solo el nombre, centrado
   en el mismo alto que ocupan las demás. Llevaba un borde punteado y era
   justo lo que la regla del sistema no quiere —un hueco señalado es peor que
   ningún hueco—; además hacía que media carta pareciera un formulario. */
/* LA EXCEPCIÓN AL RENGLÓN ÚNICO: la casilla sin foto.
   Ahí el nombre no acompaña a nada, ES la casilla entera, y recortarlo a
   «Cinco Ques…» la dejaría sin decir cuál es. Se le permiten dos renglones,
   que caben de sobra en el hueco que deja la foto que no hay, así que el
   riel sigue pareja. Lo que se pase de esos dos sí lleva puntos suspensivos. */
.mini--sinfoto .mini__nombre {
    font-size: 0.66rem;
    color: var(--color-texto);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- La escena ------------------------------------------------------------ */

.escena {
    position: relative;
    display: grid;
    min-width: 0;

    /* AQUÍ SE CORTA LA PIZZA.
       La foto se sale por la derecha a propósito y este `hidden` es lo que
       esconde el borde: sin él asomaría por fuera del panel. */
    overflow: hidden;

    grid-template-rows: minmax(0, 1fr);
    padding: 10px 0 calc(10px + var(--reserva-bolsa)) var(--espacio);
}

.ficha { display: none; }

.ficha--activa {
    /* Todas las fichas comparten la misma celda: la que se ve manda sobre el
       tamaño y las demás no ocupan nada. */
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
}

/* --- La foto grande -------------------------------------------------------
   AQUÍ ESTÁ EL TRUCO DE LA PIZZA CORTADA, Y NO HAY QUE CALCULAR NADA.

   El recuadro de la imagen mide MÁS QUE EL PANEL DE ANCHO —132%— y justo el
   alto del panel. Dentro, `object-fit: contain` pinta la pizza más grande que
   quepa: como es cuadrada, el lado que la limita es siempre el más corto de
   los dos, o sea el alto. Y como el recuadro es más ancho que el panel, esa
   pizza se centra en él y sale por la derecha. Con 140% queda fuera algo
   menos de un tercio.

   Se traduce solo a cada pantalla: en un celular alto y angosto queda una
   cuarta parte fuera; en una computadora ancha, algo menos de eso. En las dos
   entra ENTERA de arriba abajo —nunca se le corta la orilla de la masa— y el
   borde recortado lo esconde el `overflow: hidden` de la escena.

   Se mide en `width`/`height` y no con los cuatro lados: una imagen colocada
   por sus cuatro lados y con la medida en `auto` NO se estira al recuadro, se
   pinta a su tamaño natural. Con una foto de 1200 px eso llenaba la pantalla.
   -------------------------------------------------------------------------- */

.ficha__foto {
    position: relative;
    min-height: 0;
    min-width: 0;
}

.ficha__foto img {
    position: absolute;
    top: 0;
    left: 1%;
    width: var(--foto-ancho, 140%);   /* ← lo que sobra sale por la derecha */
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

/* La entrada. 240 ms: si se nota que estás esperando, sobra. */
@media (prefers-reduced-motion: no-preference) {
    .ficha--activa .ficha__foto img { animation: pizza-entra 240ms ease-out both; }
    .ficha--activa .ficha__texto    { animation: texto-entra 240ms ease-out both; }
}

@keyframes pizza-entra {
    from { opacity: 0; transform: scale(0.94) rotate(-6deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes texto-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --- El texto y el precio -------------------------------------------------- */

.ficha__texto {
    position: relative;   /* por encima de la foto si alguna vez se rozaran */
    z-index: 1;
    min-width: 0;
    padding-right: var(--espacio);
}

.ficha__nombre {
    margin: 0;
    font-size: clamp(1.3rem, 6.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;

    /* También de un solo renglón. Un nombre que salta a dos le roba el alto a
       la pizza y mueve el precio y el botón de sitio según cuál esté elegida:
       en una pantalla que no se desplaza, lo que cambia de posición se busca
       dos veces. Los nombres de pizza son cortos por naturaleza; el que se
       pase, se corta con puntos suspensivos y se lee entero al abrirla. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ficha__descripcion {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-texto-suave);

    /* DOS RENGLONES Y LO DEMÁS, PUNTOS SUSPENSIVOS.
       Aquí la descripción es el gancho, no la ficha técnica: los ingredientes
       exactos, lo que lleva y lo que no, se leen enteros al abrir la pizza,
       que es donde alguien se detiene a leerlos. Y con un tope fijo, el precio
       y el botón caen siempre en el mismo sitio pase lo que pase. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ficha__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.ficha__precio { margin: 0; line-height: 1; }

.ficha__desde {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-texto-suave);
    margin-bottom: 2px;
}

.ficha__monto {
    font-family: var(--fuente-titulos, inherit);
    font-size: clamp(1.4rem, 6.5vw, 1.9rem);
    font-weight: 800;
    color: var(--color-primario);
    letter-spacing: -0.02em;
}

/* El botón que cierra la venta: el elemento más llamativo de la pantalla y con
   sitio de sobra para el pulgar (44 px es el mínimo con el que no se falla). */
.ficha__agregar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--radio-boton, 999px);
    background: var(--color-primario);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    box-shadow: var(--sombra);
    transition: transform 160ms ease, opacity 160ms ease;
}

.ficha__agregar:active  { transform: scale(0.96); }
.ficha__agregar-bolsa   { display: inline-flex; }

/* Mientras el sistema confirma el precio con el servidor. Solo se atenúa: el
   botón sigue ahí, en su sitio y del mismo tamaño, así que nada brinca. */
.ficha__agregar--esperando { opacity: 0.6; pointer-events: none; }

.ficha__agotada {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    padding: 12px 16px;
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-boton, 999px);
}

/* Sin foto, el texto se queda con todo el panel y CENTRADO de arriba abajo:
   pegado al techo, con el hueco de la pizza vacío debajo, se ve como si la
   página se hubiera quedado a medio cargar.

   El centrado es `align-items` sobre el renglón —no `align-content`—: con un
   solo renglón de `1fr` no hay nada que repartir, lo que hay que hacer es
   que el bloque de texto deje de estirarse y se centre dentro. */
.ficha--sinfoto.ficha--activa {
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
}

/* ---------------------------------------------------------------------------
   7. SIN JAVASCRIPT, LA VITRINA SIGUE FUNCIONANDO
   ---------------------------------------------------------------------------
   Las miniaturas son enlaces a `#pizza-12`, así que `:target` enseña la ficha
   que toque aunque el JavaScript no llegue a correr —red mala, una extensión,
   un error en otro punto—. En cuanto js/vitrina.js arranca marca la vitrina
   con `data-listo` y estas reglas se apagan: a partir de ahí manda la clase y
   la dirección se queda limpia para el sistema.
   --------------------------------------------------------------------------- */

/* La ficha señalada se pinta ENCIMA de la que venía marcada desde el
   servidor, con fondo propio: todas comparten la misma celda de la
   cuadrícula, así que tapa a la de abajo sin depender de nada más. Se hace
   así, y no solo escondiendo la otra, porque esconderla necesita `:has` —para
   preguntar «¿hay alguna señalada?»— y un navegador viejo sin `:has` Y sin
   JavaScript se habría quedado con las dos pizzas encimadas. Con el fondo
   basta el `:target` de toda la vida. */
.vitrina:not([data-listo]) .ficha:target {
    display: grid;
    z-index: 2;
    background: var(--color-fondo, #FFFFFF);
}

/* Y si el navegador sí entiende `:has`, la de abajo se quita del todo. */
.vitrina:not([data-listo]):has(.ficha:target) .ficha--activa:not(:target) { display: none; }
.vitrina:not([data-listo]):has(.ficha:target) .mini--activa {
    background: transparent;
    transform: none;
}
.vitrina:not([data-listo]):has(.ficha:target) .mini--activa .mini__nombre {
    color: var(--color-texto-suave);
}

/* ---------------------------------------------------------------------------
   8. LA BOLSA FLOTANTE
   ---------------------------------------------------------------------------
   Va suelta sobre la carta, encima del pie, y NO TAPA NADA: la escena y el
   riel se guardan su alto en `--reserva-bolsa` mientras hay algo pedido. Con
   el pedido vacío la barra no existe y ese espacio vuelve a ser pizza.
   --------------------------------------------------------------------------- */

/* `con-bolsa` lo pone el JavaScript del sistema en el <body> en cuanto hay
   algo pedido, y lo quita al vaciarlo. Se usa esa marca y no un `:has`
   propio: es la señal que el sistema ya publica para esto mismo, funciona en
   cualquier navegador y se mantiene sola si mañana la barra cambia. */
body.con-bolsa { --reserva-bolsa: 62px; }

/* EL PIE NO CRECE. La hoja del sistema le pone 110 px de relleno abajo cuando
   aparece la barra, porque allá la carta se desplaza y la barra taparía los
   créditos. Aquí el pie es un renglón fijo al fondo y la barra flota por
   encima con su propio hueco: esos 110 px empujarían la pantalla entera. */
body.con-bolsa .pie { padding-bottom: env(safe-area-inset-bottom, 0px); }

.bolsa {
    top: auto;
    bottom: calc(var(--alto-pie) + env(safe-area-inset-bottom, 0px));
    padding: 0 var(--espacio) 10px;

    /* El degradado del tema base desvanecía la carta por debajo de la barra.
       Aquí no hay carta que desvanecer —nada se desplaza— y el degradado solo
       ensuciaba el blanco. */
    background: none;
}

.bolsa__caja {
    max-width: 460px;
    border-color: var(--color-borde);
    box-shadow: var(--sombra);
}

.bolsa__sucursal { color: var(--color-texto); }
.bolsa__resumen  { color: var(--color-texto-suave); }

.bolsa__boton {
    background: var(--color-primario);
    color: #fff;
    border: 0;
}

/* ---------------------------------------------------------------------------
   9. EL PIE, EN UN RENGLÓN
   --------------------------------------------------------------------------- */

.pie {
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(var(--alto-pie) + env(safe-area-inset-bottom, 0px));
    padding: 0 var(--espacio) env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie);
    font-size: 0.68rem;
    color: var(--color-texto-suave);
    overflow: hidden;
}

/* NADA DEL PIE SALTA DE RENGLÓN.
   El pie mide un renglón exacto y es la última línea de la pantalla: cualquier
   cosa que se parta en dos lo descuadra y se sale por abajo. Cada pieza se
   queda en su renglón y, si de plano no cabe, es la letra la que se aprieta
   (ver el @media de abajo), nunca el renglón el que se duplica. */
.pie__estado,
.pie__enlace,
.pie__firma  { white-space: nowrap; }

.pie__estado { gap: 5px; font-weight: 700; }

/* Verde más oscuro que el del tema base: el suyo está pensado para fondo
   negro y sobre este blanco no llega al contraste que hace falta para leerse
   al sol. */
.pie__estado--abierto { color: #1E874B; }
.pie__estado--cerrado { color: var(--color-primario); }

.pie__enlace {
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    color: var(--color-texto-suave);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pie__enlace:hover { color: var(--color-primario); }

/* Las redes, a la medida de un pie de un renglón. La hoja del sistema las
   pinta como botones redondos de 42 px con su borde —bien para el pie alto
   del tema base—: aquí son 42 px de alto en una franja de 34 y se salían por
   arriba y por abajo. Aquí son solo el icono. */
.pie__redes { display: inline-flex; gap: 10px; flex-wrap: nowrap; }

.pie__red {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-texto-suave);
}
.pie__red:hover { color: var(--color-primario); transform: none; }

/* Los créditos cierran el renglón por la derecha. Pueden cambiar de color, de
   tamaño y de sitio; no pueden desaparecer. */
/* LOS CRÉDITOS, PEGADOS AL BORDE DERECHO.
   `margin-left: auto` los empuja hasta el final y `flex: 0 0 auto` impide que
   se encojan cuando el renglón va apretado: lo que cede es lo de la izquierda.

   El `margin-right: 0` no sobra. La hoja del sistema trae `margin: 0 auto`
   para centrar la firma en el pie ancho del tema base, y con los DOS márgenes
   automáticos el navegador reparte el hueco a partes iguales: quedaban a
   media distancia del borde, ni centrados ni alineados. Se apaga el de la
   derecha y ya llegan. */
.pie__firma {
    max-width: none;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

.pie .creditos-dev { color: var(--color-texto-suave); }
.pie .creditos-dev:hover { color: var(--color-primario); }

/* En la pantalla más angosta se guardan los adornos y se aprieta la letra: lo
   que no se puede recortar son los créditos, así que lo que cede es todo lo
   demás. */
@media (max-width: 420px) {
    .pie        { font-size: 0.6rem; gap: 9px; }
    .pie__redes { display: none; }
}

.horario-donde {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
}
.horario-donde a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   10. PANTALLA GRANDE
   ---------------------------------------------------------------------------
   Con sitio de sobra crece todo: el riel, la letra y los atajos de la cabecera
   recuperan su nombre escrito al lado del icono.
   --------------------------------------------------------------------------- */

@media (min-width: 760px) {
    :root {
        --riel-ancho: 124px;
        --alto-pie:   38px;
        --espacio:    22px;
    }

    .cabecera { padding: 10px 22px; }
    .cabecera__acciones .accion__texto { display: inline; }
    .cabecera__acciones .accion { width: auto; height: 38px; padding: 0 12px; }

    .marquesina__item { font-size: 0.82rem; padding: 9px 4px; }

    .ficha__nombre      { font-size: clamp(2rem, 3.6vw, 3.1rem); }
    .ficha__descripcion { font-size: 0.95rem; -webkit-line-clamp: 3; max-width: 46ch; }
    .ficha__monto       { font-size: clamp(1.8rem, 3vw, 2.4rem); }
    .ficha__agregar     { padding: 13px 26px; font-size: 0.95rem; }
    .ficha__pie         { margin-top: 20px; }

    .mini__nombre { font-size: 0.68rem; }
}

/* ---------------------------------------------------------------------------
   11. PANTALLA APAISADA — la pizza al lado del texto
   ---------------------------------------------------------------------------
   En una pantalla más alta que ancha la ficha va en dos renglones: pizza
   arriba, texto abajo. Es lo que hace el celular y también la tableta de pie,
   y por eso la condición no es solo el ancho sino la PROPORCIÓN.

   Se descubrió mirándolo: con `min-width` a secas, una tableta de 820 × 1180
   entraba en dos columnas y la pizza —limitada por el ancho de su columna—
   quedaba flotando en medio de mil píxeles de blanco, arriba y abajo. Alta y
   angosta, aunque sea grande, se ve mucho mejor apilada.

   A partir de 4:3 sí sobra ancho y falta alto, y entonces conviene voltearlo:
   el texto a la izquierda y la pizza saliendo por el borde derecho.
   --------------------------------------------------------------------------- */

@media (min-width: 760px) and (min-aspect-ratio: 4 / 3) {
    .ficha--activa {
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 0;
    }

    .ficha__texto { grid-column: 1; grid-row: 1; padding-right: 0; }
    .ficha__foto  { grid-column: 2; grid-row: 1; align-self: stretch; --foto-ancho: 140%; }

    .ficha__pie { justify-content: flex-start; gap: 22px; }

    .ficha--sinfoto.ficha--activa { grid-template-columns: minmax(0, 1fr); }
    .ficha--sinfoto .ficha__texto { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   12. LAS VENTANAS DEL SISTEMA, EN CLARO
   ---------------------------------------------------------------------------
   El popup, el carrito y el checkout son los del tema base y se quedan como
   están: toman los colores de las variables de arriba y ya se ven claros. Solo
   se retoca lo que la pizzería necesita distinto.
   --------------------------------------------------------------------------- */

/* Igual que en el riel: la foto viene cuadrada y con el fondo quitado, así que
   se enseña entera en vez de recortarla.

   Y se le pone tope de alto. Cuadrada y a todo lo ancho, la foto se comía más
   de media pantalla del popup y los tamaños quedaban debajo del doblez: había
   que desplazar para descubrir que había algo que elegir. La pizza ya se vio
   en grande en la vitrina; aquí lo que hace falta ver son las opciones. */
.modal__foto     { background: transparent; max-height: 32vh; }
.modal__foto img { object-fit: contain; }

.modal__caja,
.carrito__caja { box-shadow: var(--sombra); }

/* MIENTRAS SE AGREGA UNA PIZZA SIN OPCIONES
   -----------------------------------------
   El popup se abre de verdad —lo abre el sistema, con su petición y su
   validación— pero no hay nada que elegir dentro, así que no se enseña: se
   vería aparecer y desaparecer en medio segundo sin que nadie llegue a leerlo.

   Se apaga con `opacity`, NUNCA con `display`: el JavaScript del sistema tiene
   que poder medirlo y pulsarlo. Y `pointer-events: none` para que ningún toque
   se pierda dentro de una ventana invisible. Si algo falla, js/vitrina.js
   quita esta clase y el popup aparece con lo que haya. */
body.vitrina-agregando .modal {
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   13. REDUCIR MOVIMIENTO
   ---------------------------------------------------------------------------
   Mucha gente lo activa por mareo o por migraña. No es una preferencia
   estética: aquí se para todo, incluida la marquesina, que pasa a ser una tira
   que se recorre con el dedo.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }

    .marquesina        { overflow-x: auto; overscroll-behavior-x: contain; }
    .marquesina__pista { animation: none; }

    /* La segunda copia sobra cuando no hay bucle: repetiría las promociones. */
    .marquesina__grupo[aria-hidden="true"] { display: none; }
}