/* ===========================================================================
   ESPAR TACOS — «la legión del taco»
   ---------------------------------------------------------------------------
   Solo lo que cambia sobre el tema base. Ni colores de marca ni tipografías
   escritos a mano: los pone el dueño en su panel. Lo que se eligió para él:

       Color principal   #D62828  (el rojo de la capa y del listón del logo)
       Color secundario  #E0A800  (el dorado del casco)
       Color de fondo    #FFF4DC  (la crema del listón)
       Títulos           Bebas Neue      Textos  Montserrat

   Los guiños, en cualquier color que elija el dueño (van con máscara o en
   SVG en línea, así que se pintan con su var()):
       · LA LEGIÓN: escudos casi transparentes que avanzan en el fondo.
       · LA GRECA griega: bajo la cabecera, bajo cada título y en el cierre.
       · EL ESCUDO con la Λ (lambda, la de los espartanos) junto a cada título.
       · LA FALANGE: cinco escudos y sus lanzas al final de la carta.

   El logo lo sube el dueño. Sirve transparente o con fondo blanco: arriba
   se funde con la crema y en el pie va sobre una placa clara.
   =========================================================================== */

/* --- Los neutros: tema claro ------------------------------------------------
   El base es oscuro y fija estos cuatro en claro. Aquí van al revés y salen
   del fondo que puso el dueño: si mañana lo cambia por un hueso más blanco,
   las tarjetas y las líneas lo siguen solas. */
:root {
    /* La placa del logo en el pie: casi blanca, para que un logo con fondo
       blanco no se note como recuadro. */
    --espar-placa: color-mix(in srgb, var(--color-fondo, #FFF4DC) 18%, #fff);

    --color-texto:       var(--espar-noche);
    --color-texto-suave: color-mix(in srgb, var(--color-texto) 74%, var(--color-fondo, #FFF4DC));
    --color-superficie:  color-mix(in srgb, var(--color-fondo, #FFF4DC) 35%, #fff);
    --color-borde:       color-mix(in srgb, var(--color-fondo, #FFF4DC) 82%, var(--color-texto));

    /* La noche del pie y de la barra: el mismo café casi negro del texto. */
    --espar-noche: #1F1612;

    --espar-greca:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 15h20M17 15V1H3v10h10V5H7v3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    --espar-legion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath fill-rule='evenodd' transform='translate(20 20) scale(.47)' d='M32 2a30 30 0 1 1 0 60a30 30 0 1 1 0-60zm0 6a24 24 0 1 0 0 48a24 24 0 1 0 0-48zm0 3a21 21 0 1 1 0 42a21 21 0 1 1 0-42zM32 17 19 47h7l6-15 6 15h7z'/%3E%3Cpath fill-rule='evenodd' transform='translate(90 90) scale(.47)' d='M32 2a30 30 0 1 1 0 60a30 30 0 1 1 0-60zm0 6a24 24 0 1 0 0 48a24 24 0 1 0 0-48zm0 3a21 21 0 1 1 0 42a21 21 0 1 1 0-42zM32 17 19 47h7l6-15 6 15h7z'/%3E%3C/svg%3E");
    --espar-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' d='M32 2a30 30 0 1 1 0 60a30 30 0 1 1 0-60zm0 6a24 24 0 1 0 0 48a24 24 0 1 0 0-48zm0 3a21 21 0 1 1 0 42a21 21 0 1 1 0-42zM32 17 19 47h7l6-15 6 15h7z'/%3E%3C/svg%3E");
    --espar-sombra: 0 1px 0 color-mix(in srgb, var(--color-texto) 6%, transparent),
                    0 8px 22px -14px color-mix(in srgb, var(--color-texto) 45%, transparent);
}

/* --- El fondo: la legión en marcha -----------------------------------------
   Escudos con la Λ, casi transparentes, que avanzan en diagonal muy despacio.
   Una capa fija detrás de todo: solo se mueve con `transform`, así que el
   celular no repinta nada, y avanza justo un mosaico (140 px) por vuelta para
   que no se note dónde empieza otra. Las tarjetas, la cabecera y el pie la
   tapan; asoma entre ellas. Con «reducir movimiento», se queda quieta.
   El fondo pasa a <html> para que la capa quede siempre entre él y la carta,
   sin depender de cómo pinte el navegador el del <body>. */
html { background: var(--color-fondo, #FFF4DC); }
body { background: transparent; }
body::before {
    content: "";
    position: fixed;
    top: -140px; left: -140px; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--color-primario);
    opacity: 0.06;
    -webkit-mask: var(--espar-legion) 0 0 / 140px 140px repeat;
            mask: var(--espar-legion) 0 0 / 140px 140px repeat;
}
@media (prefers-reduced-motion: no-preference) {
    body::before { animation: espar-legion 70s linear infinite; }
}
@keyframes espar-legion {
    to { transform: translate3d(140px, 140px, 0); }
}

/* La greca: una franja que se repite. Sirve igual para la cabecera, los
   títulos y el cierre; cada quien le pone su alto y su color. */
.cabecera::after,
.categoria__titulo::after,
.decoracion__greca {
    content: "";
    display: block;
    -webkit-mask: var(--espar-greca) repeat-x 0 0 / auto 100%;
            mask: var(--espar-greca) repeat-x 0 0 / auto 100%;
}

/* --- Cabecera: el estandarte --------------------------------------------- */
.cabecera {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 26px var(--espacio) 34px;
    border-bottom: 0;
    text-align: center;
    background:
        radial-gradient(120% 85% at 50% 0%, var(--color-superficie) 0%, transparent 70%),
        var(--color-fondo);
}

/* El listón de abajo: rojo con su greca dorada, como el del logo. */
.cabecera::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 18px;
    background: var(--color-primario-boton, var(--color-primario));
}
.cabecera::after {
    position: absolute;
    left: 0; right: 0; bottom: 3px;
    height: 12px;
    background: var(--color-secundario);
}

.cabecera__marca {
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* El logo manda: grande y completo. Alto fijo y ancho libre, porque el de
   Espar Tacos es apaisado. «multiply» se come el blanco de un logo que no
   viene transparente: sobre la crema no queda un rectángulo blanco. */
.cabecera__logo {
    width: auto;
    height: clamp(112px, 33vw, 180px);
    max-width: 92%;
    border-radius: 0;
    mix-blend-mode: multiply;
}

/* El logo ya dice «ESPAR TACOS» en grande: el nombre se queda para quien
   usa lector de pantalla y para Google, pero no se repite a la vista.
   Sin logo, el nombre sale normal (y grande, en la letra de títulos). */
.cabecera__logo + .cabecera__textos .cabecera__nombre {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.cabecera__nombre {
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: normal;
}

/* Espar Tacos tiene un solo local, y con uno solo el sistema le pone el nombre
   del restaurante (4.92): bajo el logo saldría «Espar Tacos» otra vez. Con
   logo, la etiqueta del local no se pinta; la dirección y el horario están en
   el pie. Si un día abre otro local, se quita esta regla (con varios, ahí se
   lee en cuál se está pidiendo). */
.cabecera__logo + .cabecera__textos .cabecera__sucursal { display: none; }

.cabecera__sucursal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 14px;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background: var(--color-superficie);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto);
}
.cabecera .punto { background: var(--color-secundario); }

/* Los atajos se van a la esquina, como en cualquier app. */
.cabecera__acciones {
    position: absolute;
    top: 12px;
    right: 12px;
}
.accion {
    min-width: 44px;
    height: 44px;
    border-color: var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--espar-sombra);
}
.accion:hover { color: var(--color-primario-texto, var(--color-primario)); border-color: var(--color-primario); }

@media (min-width: 700px) {
    .cabecera__acciones { top: 16px; right: 20px; }
}

/* --- Chips de categorías ------------------------------------------------- */
.contenido { padding-top: 20px; }

.chip {
    min-height: 44px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-weight: 700;
}
.chip--activo {
    border-color: var(--color-primario-boton, var(--color-primario));
    background: var(--color-primario-boton, var(--color-primario));
    color: var(--color-sobre-primario, #fff);
}

/* --- Títulos de categoría: escudo, nombre y greca ------------------------- */
.categoria { margin: 34px 0; }

.categoria__titulo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.05;
    color: var(--color-texto);
}
.categoria__titulo::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: var(--color-primario);
    -webkit-mask: var(--espar-escudo) center / contain no-repeat;
            mask: var(--espar-escudo) center / contain no-repeat;
}
/* Siempre en su propio renglón y de 160 px. Con `max-width` la greca se subía
   junto al título en la computadora, donde sí cabía (1.0.2): ocupa el renglón
   entero y se recorta a lo visible. */
.categoria__titulo::after {
    flex: 0 0 100%;
    height: 10px;
    margin-top: 2px;
    background: var(--color-secundario);
    clip-path: inset(0 calc(100% - 160px) 0 0);
}

.categoria__descripcion {
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-style: italic;
}

/* --- Tarjetas ------------------------------------------------------------ */
.platillo {
    border-color: var(--color-borde);
    box-shadow: var(--espar-sombra);
}

.platillo__nombre {
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.08;
}

.platillo__descripcion { font-size: 0.82rem; line-height: 1.45; }

.platillo__precio {
    font-family: var(--fuente-titulos);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* El «+» con su aro dorado, como el borde de un escudo. */
.platillo__agregar {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 3px var(--color-superficie), 0 0 0 5px var(--color-secundario);
}

/* «Favorito», «Oferta»: insignias doradas y rojas, en letra de títulos. */
.etiqueta,
.platillo__exclusivo {
    font-family: var(--fuente-titulos);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* --- La barra del pedido ------------------------------------------------- */
/* De noche, como el pie, y con los neutros volteados DENTRO de la caja. No se
   pinta letra por letra: el base tiene reglas más fuertes (con un solo local,
   `.bolsa--unica .bolsa__resumen` en --color-texto) que dejaban el total café
   sobre negro (1.0.2). Volteando las variables, cualquier regla del base que
   use --color-texto o --color-texto-suave aquí adentro sale clara. */
.bolsa__caja {
    --color-texto:       var(--color-fondo, #FFF4DC);
    --color-texto-suave: color-mix(in srgb, var(--color-fondo, #FFF4DC) 76%, var(--espar-noche));
    --color-borde:       color-mix(in srgb, var(--color-fondo, #FFF4DC) 20%, var(--espar-noche));
    border: 2px solid var(--color-secundario);
    background: var(--espar-noche);
    color: var(--color-texto);
}
.bolsa__marca { background: color-mix(in srgb, var(--color-secundario) 26%, transparent); }
.bolsa__sucursal { font-weight: 400; letter-spacing: 0.03em; font-size: 1.05rem; }
.bolsa__boton { min-height: 44px; }

/* --- Ventana del platillo y del pedido ----------------------------------- */
.modal__titulo,
.carrito__titulo,
.enviado__titulo {
    font-weight: 400;
    letter-spacing: 0.03em;
}
.modal__titulo { font-size: 1.9rem; line-height: 1.05; }
.linea__nombre { font-size: 1.15rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.15; }
.carrito__titulo { font-size: 1.6rem; }

/* En claro, los «pasar el dedo» del base (blanco transparente) no se ven. */
.opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover,
.aviso__accion:hover,
.extra-cantidad__boton:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-texto) 5%, transparent);
}

/* --- El pie: de noche, como el cierre de la jornada ----------------------- */
/* Dentro del pie los neutros se voltean. Solo dentro: la hoja del horario y
   las ventanas viven fuera del <footer> y se quedan claras. */
.pie {
    --color-texto:       var(--color-fondo, #FFF4DC);
    --color-texto-suave: color-mix(in srgb, var(--color-fondo, #FFF4DC) 72%, var(--espar-noche));
    --color-borde:       color-mix(in srgb, var(--color-fondo, #FFF4DC) 16%, var(--espar-noche));
    --color-superficie:  color-mix(in srgb, var(--color-fondo, #FFF4DC) 8%, var(--espar-noche));
    --color-primario-texto: var(--color-secundario);
    margin-top: 56px;
    border-top: 0;
    background: var(--espar-noche);
    color: var(--color-texto-suave);
}
.pie__subtitulo { color: var(--color-secundario); }

.pie__logo {
    height: 88px;
    max-width: 280px;
    padding: 10px 16px;
    border-radius: var(--radio, 14px);
    background: var(--espar-placa);
}

body.con-bolsa .pie { padding-bottom: 40px; }

/* «Abierto ahora» sobre la noche del pie: el verde del base, un tono más claro. */
.pie__estado--abierto { color: #4ADE80; }

/* --- La falange (decoracion.php) ----------------------------------------- */
.decoracion {
    position: relative;
    pointer-events: none;
    user-select: none;
    padding: 6px var(--espacio) 34px;
    background: var(--espar-noche);
    text-align: center;
    overflow: hidden;
}
body.con-bolsa .decoracion { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }

.decoracion__greca {
    height: 12px;
    max-width: 1100px;
    margin: 0 auto 18px;
    background: var(--color-secundario);
    opacity: 0.85;
}

.decoracion__falange {
    display: block;
    width: min(100%, 420px);
    height: auto;
    margin: 0 auto;
}
.falange__lanza  { stroke: color-mix(in srgb, var(--color-fondo, #FFF4DC) 70%, var(--espar-noche)); }
.falange__punta  { fill: var(--color-secundario); }
.falange__escudo { fill: var(--color-primario); }
.falange__escudo--oro { fill: var(--color-secundario); }
.falange__aro    { fill: none; stroke: var(--espar-noche); stroke-opacity: 0.35; }
.falange__lambda { fill: var(--color-fondo, #FFF4DC); }

.decoracion__lema {
    margin: 14px 0 0;
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--color-secundario);
}

@media (prefers-reduced-motion: no-preference) {
    .falange__fila { animation: falange-marcha 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
    .falange__fila:nth-child(2n) { animation-delay: -1.3s; }
}
@keyframes falange-marcha {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}