/* ===========================================================================
   Botanas La Fresita — «Fresa retro» (v1.0.2)
   ---------------------------------------------------------------------------
   Sin portada: arriba el logo mediano y en qué sucursal se pide; luego un
   tablero de seis antojos. Las alitas y las charolas en hilera (el número
   grande y una tira que crece), las hamburguesas en vitrina, el picómetro de
   salsas con la Fresita que cambia de cara, y la Fresita que carga el pedido
   en la barra de abajo. Todo redondo y con contorno café, como su logo.

   Esta hoja va DESPUÉS de la del sistema (la carga layout.php): aquí solo va
   lo que cambia. Los colores de marca salen del panel (--color-primario y
   compañía); los propios del tema —el rosa, el naranja y el amarillo de sus
   menús impresos, y el café del contorno— son decoración y viven abajo.
   Lo que se mueve está en js/fresita.js.
   =========================================================================== */

@font-face { font-family: "Shrikhand"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/shrikhand-400.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-500.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-700.woff2") format("woff2"); }

:root {
    /* La carta es clara: el sistema trae estos cuatro para fondo oscuro. */
    --color-texto: #3B1714;            /* chocolate con fresa: 14.8:1 sobre la crema */
    --color-texto-suave: #7A4840;      /* 6.9:1 */
    --color-superficie: #FFFFFF;
    --color-borde: #F0D3CB;
    --espacio: 16px;

    /* Del tema */
    --choco: #3B1714;
    --rosa: #F7A8B5;
    --rosa-fuerte: #EF5D7A;
    --naranja: #FF8845;
    --amarillo: #FFD23F;
    --magenta: #C2246F;
    --verde: #5CC152;
    --crema: #FFF8EE;
    --rosita: #FFF0EE;
    --contorno: 2.5px solid var(--choco);
    --sombra-dura: 0 4px 0 var(--choco);
    --rebote: cubic-bezier(.34, 1.56, .64, 1);
    --arcoiris: 2px 2px 0 var(--naranja), 4px 4px 0 var(--amarillo), 6px 6px 0 var(--verde);
    --fuente-display: "Shrikhand", "Cooper Black", Georgia, serif;
    --fuente-nombres: "Fredoka", var(--fuente-textos, "Nunito"), "Arial Rounded MT Bold", Arial, sans-serif;
}

[hidden] { display: none !important; }
html { font-size: var(--escala-texto, 100%); }
body { background: var(--color-fondo, #FFF5EC); color: var(--color-texto); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Todo lo del sitio va encima del fondo que se mueve */
.cabecera, .contenido, .pie { position: relative; z-index: 1; }

/* ================================================================ el fondo que se mueve */
.fresita-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fresita-fondo__patron {
    position: absolute; inset: -120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg transform='translate(30 34) rotate(-18)'%3E%3Cpath d='M0 12C-5 10-8 5-7 0s4-6 7-5c3-1 6 0 7 5s-2 10-7 12Z' fill='%23E1252F' fill-opacity='.13'/%3E%3Cpath d='M-6-5l6-4 6 4-3 1-3-2-3 2Z' fill='%233DAA3A' fill-opacity='.2'/%3E%3C/g%3E%3Cg transform='translate(92 90) rotate(22)'%3E%3Cpath d='M0 12C-5 10-8 5-7 0s4-6 7-5c3-1 6 0 7 5s-2 10-7 12Z' fill='%23E1252F' fill-opacity='.13'/%3E%3Cpath d='M-6-5l6-4 6 4-3 1-3-2-3 2Z' fill='%233DAA3A' fill-opacity='.2'/%3E%3C/g%3E%3Cg fill='%23E8B923' fill-opacity='.32'%3E%3Cellipse cx='86' cy='26' rx='2' ry='3.2' transform='rotate(30 86 26)'/%3E%3Cellipse cx='22' cy='92' rx='2' ry='3.2' transform='rotate(-25 22 92)'/%3E%3Cellipse cx='60' cy='62' rx='2' ry='3.2'/%3E%3Cellipse cx='108' cy='54' rx='1.6' ry='2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px;
}
.fresita-fondo__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.fresita-chispas { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; }

/* El mantel de cuadritos de su menú de hamburguesas, arriba y en el pie */
.cabecera--fresita::before, .pie::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
    background: conic-gradient(var(--color-primario) 25%, var(--crema) 0 50%, var(--color-primario) 0 75%, var(--crema) 0) 0 0 / 12px 12px;
}

/* ================================================================ cabecera: chica, sin portada */
.cabecera--fresita {
    display: grid; gap: 12px; justify-content: stretch; align-items: stretch;
    max-width: 980px; margin: 0 auto;
    padding: 24px var(--espacio) 10px;
    border: 0;
}
.cabecera--fresita::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecera--fresita .cabecera__logo {
    width: 142px; height: auto; flex: none; border-radius: 0; object-fit: contain; background: none;
    cursor: pointer; transform-origin: 50% 85%; filter: drop-shadow(0 5px 0 rgba(59, 23, 20, .16));
    -webkit-tap-highlight-color: transparent;
}
.cabecera__lado { flex: 1; min-width: 0; display: grid; gap: 10px; justify-items: end; text-align: right; }
.cabecera--fresita .cabecera__acciones { display: flex; gap: 8px; }
.cabecera--fresita .accion {
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    border: var(--contorno); background: var(--color-superficie); color: var(--choco);
    box-shadow: 0 3px 0 var(--choco);
    transition: transform .12s ease, box-shadow .12s ease;
}
.cabecera--fresita .accion:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--choco); }
.cabecera__estado { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 800; color: var(--color-secundario-texto, var(--color-secundario)); }
.cabecera__estado .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color-secundario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secundario) 25%, transparent); }
.cabecera__estado--cerrado { color: var(--color-texto-suave); }
.cabecera__estado--cerrado .punto { background: #A9928D; box-shadow: none; }

.sucursales-f { display: grid; gap: 6px; }
.sucursales-f__rotulo { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-texto-suave); }
.interruptor {
    display: grid; grid-template-columns: repeat(var(--cuantas, 2), minmax(0, 1fr)); gap: 4px; padding: 4px;
    border: var(--contorno); border-radius: var(--radio-boton, 999px); background: var(--color-superficie);
}
.interruptor__op {
    min-height: 48px; padding: 4px 10px; border-radius: var(--radio-boton, 999px);
    display: grid; place-content: center; text-align: center; text-decoration: none; color: var(--color-texto);
    transition: background-color .16s ease, color .16s ease;
}
.interruptor__op b { font-family: var(--fuente-nombres); font-weight: 600; font-size: .98rem; line-height: 1.1; }
.interruptor__op small { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--color-texto-suave); }
.interruptor__op small i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-secundario); }
.interruptor__op small i.no { background: #A9928D; }
.interruptor__op[aria-current="true"] { background: var(--color-primario-boton, var(--color-primario)); color: var(--color-sobre-primario, #fff); }
.interruptor__op[aria-current="true"] small { color: var(--color-sobre-primario, #fff); }
.interruptor__op[aria-current="true"] small i { background: var(--color-sobre-primario, #fff); }
.sucursales-f__boton {
    min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; justify-self: start;
    border: var(--contorno); border-radius: var(--radio-boton, 999px); background: var(--color-superficie); color: var(--color-texto);
    font: inherit; font-weight: 600; cursor: pointer;
}
.cabecera__direccion { margin: 0 2px; display: flex; align-items: flex-start; gap: 6px; font-size: .86rem; color: var(--color-texto-suave); }
.cabecera__direccion svg { flex: none; margin-top: 2px; color: var(--color-primario-texto, var(--color-primario)); }

/* ================================================================ el cuerpo */
.contenido { max-width: 980px; }
.cerrado {
    border-radius: var(--radio-chico, 14px); background: var(--rosita); border: 2px dashed var(--rosa-fuerte);
    color: var(--color-texto);
}
.cerrado--aviso { background: var(--color-superficie); border-color: var(--color-borde); }
.promo { border: var(--contorno); border-radius: 22px; box-shadow: var(--sombra-dura); background: var(--color-superficie); }
.promos__tira { padding-block: 2px 8px; }

/* La cuponera: boletos */
.promos-hoy { border: var(--contorno); border-radius: var(--radio, 20px); background: var(--color-superficie); box-shadow: var(--sombra-dura); }
.promos-hoy__titulo { font-family: var(--fuente-nombres); }

/* ================================================================ el tablero: «¿Qué se te antoja?» */
.tablero { margin: 14px 0 6px; }
.tablero__titulo {
    margin: 0 0 16px; font-family: var(--fuente-display); font-weight: 400; font-size: 2rem; line-height: 1.05;
    color: var(--color-primario-texto, var(--color-primario)); text-shadow: var(--arcoiris); letter-spacing: 0;
}
.chips.tablero__rejilla {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
    overflow: visible; padding: 0 0 6px; margin: 0;
}
@media (min-width: 700px) { .chips.tablero__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tablero .chip.cuadro {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 116px; padding: 12px 12px 12px 14px;
    display: flex; align-items: flex-end;
    border: var(--contorno); border-radius: 22px; box-shadow: 0 5px 0 var(--choco);
    background: var(--cuadro, var(--color-primario-boton)); color: var(--cuadro-letra, var(--choco));
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tablero .chip.cuadro:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--choco); }
.tablero .chip--activo { border-color: var(--choco); }
.cuadro__nombre { position: relative; z-index: 1; max-width: 100%; font-family: var(--fuente-nombres); font-weight: 700; font-size: 1.12rem; line-height: 1.05; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.tablero .cuadro__dibujo { position: absolute; z-index: 0; top: -4px; right: -8px; width: 92px; height: 92px; object-fit: contain; rotate: 8deg; transition: rotate .2s var(--rebote), scale .2s var(--rebote); }
.tablero .chip.cuadro:hover .cuadro__dibujo { rotate: -4deg; scale: 1.06; }
/* Los colores de sus menús impresos, por categoría (los pone categorias.php);
   el último que queda solo ocupa el renglón */
.cuadro--fresa, .categoria--fresa { --cuadro: var(--color-primario-boton, var(--color-primario)); --cuadro-letra: var(--color-sobre-primario, #fff); }
.cuadro--naranja, .categoria--naranja { --cuadro: var(--naranja); --cuadro-letra: var(--choco); }
.cuadro--amarillo, .categoria--amarillo { --cuadro: var(--amarillo); --cuadro-letra: var(--choco); }
.cuadro--rosa, .categoria--rosa { --cuadro: var(--rosa); --cuadro-letra: var(--choco); }
.cuadro--magenta, .categoria--magenta { --cuadro: var(--magenta); --cuadro-letra: #FFFFFF; }
.cuadro--verde, .categoria--verde { --cuadro: var(--verde); --cuadro-letra: var(--choco); }
.cuadro--choco, .categoria--choco { --cuadro: var(--choco); --cuadro-letra: var(--crema); }
.cuadro--rosafuerte, .categoria--rosafuerte { --cuadro: var(--rosa-fuerte); --cuadro-letra: var(--choco); }
@media (max-width: 699px) { .tablero .chip:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* La barra chica que llega sola al pasar el tablero (la arma js/fresita.js) */
.fresita-barra {
    position: fixed; left: 0; right: 0; top: 0; z-index: 40;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 0 10px;
    background: var(--color-fondo, #FFF5EC); border-bottom: var(--contorno);
    transform: translateY(-110%); visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
}
.fresita-barra--ver { transform: none; visibility: visible; transition: transform .24s ease; }
.fresita-barra__tira {
    max-width: 980px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 0 12px; overscroll-behavior-x: contain;
}
.fresita-barra__tira::-webkit-scrollbar { display: none; }
.fresita-barra .chip {
    flex: none; min-height: 44px; padding: 0 14px 0 6px; gap: 6px;
    border: 2px solid var(--choco); background: var(--color-superficie); color: var(--choco);
    font-family: var(--fuente-nombres); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.fresita-barra .chip img { width: 30px; height: 30px; object-fit: contain; }
.fresita-barra .chip--activo { background: var(--color-primario-boton, var(--color-primario)); color: var(--color-sobre-primario, #fff); border-color: var(--choco); }

/* El filtro «Ver solo» */
.filtro-etiquetas__chip { border: 2px solid var(--choco) !important; font-family: var(--fuente-nombres); }

/* ================================================================ las secciones */
.categoria { scroll-margin-top: 78px; margin: 34px 0 26px; }
.categoria__titulo {
    display: inline-block; margin: 0 0 10px; padding: 4px 18px 8px;
    font-family: var(--fuente-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; letter-spacing: 0;
    background: var(--cuadro, var(--color-primario-boton)); color: var(--cuadro-letra, var(--color-sobre-primario, #fff));
    border: var(--contorno); border-radius: var(--radio-boton, 999px); box-shadow: 0 5px 0 var(--choco);
    rotate: -2deg;
}
.categoria__descripcion { margin: 4px 0 18px; max-width: 46ch; font-size: .9rem; color: var(--color-texto-suave); }
.categoria--con-foto .categoria__descripcion { max-width: 52%; min-height: 156px; }
/* La foto de la sección: la del primer platillo que tenga (la pone js/fresita.js) */
.categoria--con-foto { position: relative; }

/* ---------------------------------------------------------------- la tarjeta */
.platillos { gap: 16px 12px; }
.platillo {
    position: relative; overflow: visible;
    border: 2px solid var(--choco); border-radius: var(--radio, 20px); background: var(--color-superficie);
    box-shadow: 0 4px 0 var(--choco);
    transition: transform .12s ease, box-shadow .12s ease;
}
.platillo:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--choco); }
.platillo__nombre { font-family: var(--fuente-nombres); font-weight: 700; font-size: 1.04rem; line-height: 1.12; text-wrap: balance; }
.platillo__descripcion { font-size: .82rem; line-height: 1.35; -webkit-line-clamp: 3; }
.platillo__precio { font-family: var(--fuente-nombres); font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.platillo__exclusivo, .platillo__entrega {
    align-self: flex-start; padding: 3px 10px; border-radius: var(--radio-boton, 999px);
    background: var(--amarillo); color: var(--choco); border: 2px solid var(--choco);
    font-family: var(--fuente-nombres); font-weight: 600; font-size: .76rem;
}
.etiqueta { border: 2px solid var(--choco); font-family: var(--fuente-nombres); }
.etiqueta--destacado { background: var(--amarillo); color: var(--choco); }

/* Las fotos: redondas sobre un plato con los anillos de su logo; el anillo
   punteado gira como las letras del logo y lo caliente echa vapor. */
.platillo__foto, .seccion__foto, .modal__foto {
    position: relative; overflow: visible; background: transparent; border-radius: 50%;
    display: grid; place-items: center; isolation: isolate;
}
.platillo__foto::before, .seccion__foto::before, .modal__foto::before {
    content: ""; position: absolute; inset: 7%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, var(--rosita) 0 64%, var(--rosa) 64% 71%, var(--color-superficie) 71% 78%, var(--rosa-fuerte) 78% 86%, var(--color-superficie) 86%);
    border: 2px solid var(--choco);
}
.platillo__foto::after, .seccion__foto::after, .modal__foto::after {
    content: ""; position: absolute; inset: 1%; z-index: -1; border-radius: 50%;
    border: 2.5px dashed var(--rosa-fuerte); opacity: .75;
}
.platillo__foto img, .seccion__foto img, .modal__foto img {
    width: 72%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
    box-shadow: 0 6px 14px rgba(59, 23, 20, .28);
}
.platillos .platillo > .platillo__foto { width: 86%; margin: -8px auto 0; aspect-ratio: 1 / 1; border-radius: 50%; }
/* La foto de la sección (después de la regla de las fotos, que la haría relativa) */
.categoria .seccion__foto { position: absolute; top: 56px; right: -4px; width: min(44%, 210px); aspect-ratio: 1 / 1; max-width: 100%; pointer-events: none; }
.vapor { position: absolute; z-index: 2; left: 34%; top: -4%; width: 32%; height: 30%; display: flex; justify-content: space-between; pointer-events: none; }
.vapor i {
    width: 9px; height: 100%; opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 38c-4-6 4-10 0-16s4-10 0-18' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 1.5px rgba(59, 23, 20, .45));
}
.modal__foto:has(.platillo__sinfoto) { display: none; }
.modal__foto--vacia { display: none; }

/* El «+»: una fresita */
.platillo__agregar {
    width: 44px; height: 44px; border: 2px solid var(--choco);
    background: var(--color-primario-boton, var(--color-primario)); color: var(--color-sobre-primario, #fff);
    font-family: var(--fuente-nombres); font-size: 1.6rem; font-weight: 700; line-height: 1;
    display: grid; place-items: center; padding: 0 0 2px;
}
.platillo__agregar::before {
    content: ""; position: absolute; inset: auto; top: -7px; left: 50%; width: 22px; height: 11px; margin-left: -11px;
    border-radius: 0; background: var(--hoja, #3DAA3A);
    clip-path: polygon(0 30%, 22% 45%, 30% 0, 50% 40%, 70% 0, 78% 45%, 100% 30%, 82% 85%, 50% 100%, 18% 85%);
}

/* El que queda solo en su renglón: foto al lado, redonda (la regla del sistema) */
@media (max-width: 699px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(odd) > .platillo__foto { width: 112px; height: 112px; border-radius: 50%; overflow: visible; margin: 0; }
}
@media (min-width: 700px) and (max-width: 999px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) > .platillo__foto { width: 128px; height: 128px; border-radius: 50%; overflow: visible; margin: 0; }
}
@media (min-width: 1000px) {
    .platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) > .platillo__foto { width: 128px; height: 128px; border-radius: 50%; overflow: visible; margin: 0; }
}

/* ---------------------------------------------------------------- la hilera de piezas
   Los platillos cuyo nombre empieza con un número («6 piezas», «50 piezas»):
   el número grande, el precio y una tira que crece con las piezas. Los marca
   js/fresita.js; sin él se ven como tarjetas normales. */
.platillo--pieza { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; padding: 10px 10px 10px 76px; min-height: 84px; }
.platillo--pieza > .platillo__foto { display: none; }
.platillo--pieza .platillo__datos { padding: 0; gap: 2px; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.platillo--pieza .platillo__datos > * { grid-column: 1; }
.platillo--pieza .platillo__pie { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0; margin: 0; }
.pieza__num {
    position: absolute; left: 6px; top: 50%; width: 64px; transform: translateY(-50%);
    font-family: var(--fuente-display); font-size: 2.1rem; line-height: 1; text-align: center;
    color: var(--color-primario-texto, var(--color-primario)); text-shadow: 1.5px 1.5px 0 var(--naranja), 3px 3px 0 var(--amarillo);
    font-variant-numeric: tabular-nums; pointer-events: none;
}
.pieza__num--largo { font-size: 1.7rem; }
.platillo--pieza .platillo__descripcion { -webkit-line-clamp: 2; }
.pieza__tira {
    display: block; height: 8px; margin-top: 5px; width: calc(var(--n, .5) * 100%); min-width: 14px; border-radius: 4px;
    background: linear-gradient(var(--color-primario) 0 25%, var(--naranja) 25% 50%, var(--amarillo) 50% 75%, var(--verde) 75%);
    box-shadow: inset 0 0 0 1px rgba(59, 23, 20, .25); transform-origin: left center;
}
@media (min-width: 700px) { .platillos--hilera { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platillos--hilera .platillo--pieza { grid-column: auto; } }

/* ---------------------------------------------------------------- la vitrina (hamburguesas)
   Una por renglón, la foto grande que flota y cambia de lado en cada una. */
.platillos--vitrina { grid-template-columns: minmax(0, 1fr) !important; gap: 30px; padding-top: 8px; }
.platillos--vitrina > .platillo { grid-column: auto !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 12px 14px 14px 2px; border-width: 2.5px; border-radius: 26px; box-shadow: 0 5px 0 var(--choco); }
.platillos--vitrina > .platillo:nth-child(even) { flex-direction: row-reverse !important; padding: 12px 2px 14px 14px; }
.platillos--vitrina > .platillo > .platillo__foto { flex: 0 0 46% !important; width: 46% !important; height: auto !important; aspect-ratio: 1 / 1; margin: -34px 0 -8px !important; }
.platillos--vitrina > .platillo--sinmarco { padding: 14px 16px !important; }
.platillos--vitrina .platillo__datos { padding: 0 !important; }
.platillos--vitrina .platillo__nombre { font-size: 1.18rem; }
.platillos--vitrina .platillo__descripcion { -webkit-line-clamp: 4; }
@media (min-width: 700px) { .platillos--vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ================================================================ la ventana del platillo */
.modal__caja { background: var(--color-fondo, #FFF5EC); border-top: var(--contorno); }
.modal__cerrar { border: 2px solid var(--choco); background: var(--color-superficie); color: var(--choco); font-weight: 800; }
.modal__foto { width: min(64%, 240px); margin: 14px auto 0; aspect-ratio: 1 / 1; }
.modal__titulo { font-family: var(--fuente-display); font-weight: 400; font-size: 1.7rem; line-height: 1.08; color: var(--color-primario-texto, var(--color-primario)); text-align: center; letter-spacing: 0; }
.modal__descripcion { text-align: center; }
.grupos { display: grid; gap: 14px; padding: 4px 16px 0; }
.grupo { padding: 12px; border: 2px solid var(--choco) !important; border-radius: 18px; background: var(--color-superficie); }
.grupo + .grupo { border-top: 2px solid var(--choco); }
.grupo__titulo { font-family: var(--fuente-nombres); font-weight: 700; font-size: 1.04rem; }
.grupo__regla { padding: 3px 9px; border-radius: 8px; border: 2px solid var(--choco); background: var(--amarillo); color: var(--choco); font-weight: 800; font-size: .74rem; }
.grupo--abre { margin-left: 14px; border-left: 6px solid var(--color-primario) !important; }
.opciones { display: grid; gap: 8px; }
.grupo--dos .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcion {
    min-height: 48px; padding: 8px 12px; gap: 10px;
    border: 2px solid var(--color-borde) !important; border-radius: var(--radio-chico, 12px); background: var(--color-fondo, #FFF5EC);
    font-weight: 700;
}
.opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover { background: var(--rosita); }
.opcion:not(.opcion--agotada):not(.opcion--bloqueada):has(input:checked) { border-color: var(--choco) !important; background: var(--rosita); }
/* En dos columnas no cabe «incluido»: se dice solo lo que cuesta de más */
.grupo--dos .opcion__precio--libre { display: none; }
.opcion input { accent-color: var(--color-primario); width: 20px; height: 20px; }
.nota { padding: 0 16px; }
.nota__campo { border: 2px solid var(--color-texto-suave); border-radius: var(--radio-chico, 12px); background: var(--color-superficie); color: var(--color-texto); font-size: 1rem; min-height: 48px; }
.modal__aviso { color: var(--color-primario-texto, var(--color-primario)); font-weight: 800; }
.modal__pie { background: var(--color-superficie); border-top: 2px solid var(--choco); }
.contador { border: 2px solid var(--choco); border-radius: var(--radio-boton, 999px); background: var(--color-fondo, #FFF5EC); }
.contador__boton { min-width: 44px; min-height: 44px; }
.boton { font-family: var(--fuente-nombres); font-weight: 700; }
.boton--primario {
    border: 2px solid var(--choco) !important; box-shadow: 0 4px 0 var(--choco);
    background: var(--color-primario-boton, var(--color-primario)); color: var(--color-sobre-primario, #fff);
}
.boton--primario:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--choco); }

/* ---------------------------------------------------------------- el picómetro
   El grupo «¿Qué tan picosa?» (lo reconoce js/fresita.js por su nombre): la
   Fresita cambia de cara con cada nivel y abajo un termómetro. Las salsas de
   cada nivel son la pregunta que abre esa opción (v4.75). */
.pico { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; }
.pico .fresita-cara { width: 84px; }
.pico__lado { display: grid; gap: 8px; min-width: 0; }
.grupo--pico .opciones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grupo--pico .opcion {
    position: relative; min-height: 64px; padding: 6px 2px 5px; gap: 3px;
    display: grid; justify-items: center; align-content: center; text-align: center;
    border: 2px solid transparent !important; border-radius: 14px;
    background: var(--nivel); color: var(--nivel-letra, var(--choco));
    font-family: var(--fuente-nombres); font-weight: 600; font-size: .74rem; line-height: 1.05;
    transition: transform .16s var(--rebote), border-color .12s ease, box-shadow .12s ease;
}
.grupo--pico .opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.grupo--pico .opcion:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }
.grupo--pico .opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover { background: var(--nivel); }
.grupo--pico .opcion:not(.opcion--agotada):not(.opcion--bloqueada):has(input:checked) { border-color: var(--choco) !important; box-shadow: 0 3px 0 var(--choco); transform: translateY(-3px); background: var(--nivel); }
.grupo--pico .opcion__precio { display: none; }
.grupo--pico .opcion__nombre { flex: none; }
.nivel__icono { width: 22px; height: 22px; }
.grupo--pico .nivel--1 { --nivel: var(--rosa); }
.grupo--pico .nivel--2 { --nivel: var(--amarillo); }
.grupo--pico .nivel--3 { --nivel: var(--naranja); }
.grupo--pico .nivel--4 { --nivel: var(--color-primario-boton, var(--color-primario)); --nivel-letra: var(--color-sobre-primario, #fff); }
.termometro { position: relative; height: 10px; border-radius: 5px; border: 1.5px solid var(--choco); background: linear-gradient(90deg, var(--rosa), var(--amarillo), var(--naranja), var(--color-primario)); }
.termometro__marca { position: absolute; top: -9px; left: var(--x, 12.5%); width: 14px; height: 9px; margin-left: -7px; background: var(--choco); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: left .26s var(--rebote), opacity .2s ease; }
.termometro--vacio .termometro__marca { opacity: 0; }

/* ================================================================ la Fresita (la del logo) y sus caras
   Es la imagen del logo; encima, los párpados (parpadea y guiña) y lo que le
   pasa con el picante: gota de sudor, llamas y lágrimas. */
.fresita-cara { position: relative; display: block; line-height: 0; }
.fresita-cara > img { width: 100%; height: auto; }
.fresita-cara__parpado {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #FF3A3D, #E30B12 70%);
    box-shadow: inset 0 -3px 0 #2B0A0A;
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .09s ease-in;
}
/* La Fresita sola (img/fresita.webp): dónde quedan sus ojos */
.fresita-cara__parpado--izq { left: 28.1%; top: 47.2%; width: 15.6%; height: 22.4%; }
.fresita-cara__parpado--der { left: 52.3%; top: 46.2%; width: 17.4%; height: 23%; }
/* La de la barra (img/fresita-charola.webp, con su plato) */
.fresita-cara--charola .fresita-cara__parpado--izq { left: 47%; top: 57.3%; width: 13%; height: 24%; }
.fresita-cara--charola .fresita-cara__parpado--der { left: 67.3%; top: 57.6%; width: 14.2%; height: 26%; }
.fresita-cara--parpadea .fresita-cara__parpado,
.fresita-cara[data-cara="dulce"] .fresita-cara__parpado,
.fresita-cara--guino .fresita-cara__parpado--der { transform: scaleY(1); }
.fresita-cara__lagrimas {
    position: absolute; left: 26%; top: 64%; width: 46%; height: 26%; opacity: 0; pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 2q-4 14 0 36' fill='none' stroke='%237EC8F2' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 8% 0 / 12% 100% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 2q4 14 0 36' fill='none' stroke='%237EC8F2' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 92% 0 / 12% 100% no-repeat;
}
.fresita-cara::before, .fresita-cara::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
/* llamas sobre la cabeza */
.fresita-cara::before {
    left: 30%; top: -24%; width: 40%; height: 34%; transform-origin: 50% 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Cpath d='M12 42C4 30 12 18 18 14c-1 8 4 10 7 12 1-9 7-17 12-19-3 9 2 13 5 16 4-5 4-11 2-16 10 8 10 22 3 35Z' fill='%23FF8845' stroke='%233B1714' stroke-width='2'/%3E%3Cpath d='M22 42c-3-6 0-11 3-13 0 4 3 6 5 7 1-4 4-7 6-8-1 5 1 8 3 10 1-2 2-4 1-7 4 4 4 9 1 11Z' fill='%23FFD23F'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* la gota de sudor */
.fresita-cara::after {
    right: 14%; top: 26%; width: 12%; height: 15%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1q5 7 4 10a4 4 0 0 1-8 0Q1 8 6 1Z' fill='%239AD8F7' stroke='%233B1714' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fresita-cara[data-cara="picosita"]::after, .fresita-cara[data-cara="superhot"]::after { opacity: 1; }
.fresita-cara[data-cara="superhot"]::before, .fresita-cara[data-cara="superhot"] .fresita-cara__lagrimas { opacity: 1; }
.fresita-cara[data-cara="superhot"] > img { filter: saturate(1.35) brightness(.9); }

/* ================================================================ la barra del pedido: aquí vive la Fresita */
.bolsa { background: linear-gradient(to top, var(--color-fondo, #FFF5EC) 55%, transparent); }
.bolsa__caja {
    position: relative; min-height: 66px; padding: 8px 8px 8px 112px; gap: 8px;
    border: var(--contorno); border-radius: 24px; background: var(--color-superficie);
    box-shadow: 0 5px 0 var(--choco), 0 18px 30px -12px rgba(59, 23, 20, .45);
}
.bolsa__marca { display: none; }
.bolsa__fresita { position: absolute; left: -8px; bottom: -2px; width: 116px; pointer-events: none; clip-path: inset(-120px -40px 2px -40px); }
.bolsa__plato { position: absolute; left: 4%; top: 30%; width: 34%; height: 20%; }
.bolsa__sucursal { font-family: var(--fuente-textos, inherit); font-size: .74rem; font-weight: 700; color: var(--color-texto-suave); }
.bolsa__resumen { display: flex; flex-wrap: wrap; column-gap: 5px; white-space: normal; line-height: 1.15; font-family: var(--fuente-nombres); font-weight: 600; font-size: .9rem; color: var(--color-texto); font-variant-numeric: tabular-nums; }
.bolsa__separador { display: none; }
[data-bolsa-total] { flex-basis: 100%; font-weight: 700; font-size: 1.08rem; color: var(--color-primario-texto, var(--color-primario)); }
.bolsa__boton { min-height: 48px; padding: 0 14px; border: 2px solid var(--choco); font-family: var(--fuente-nombres); font-weight: 700; font-size: 1rem; }
.bolsa__promo { color: var(--color-secundario-texto, var(--color-secundario)); }

/* el antojo que vuela a su plato */
.fresita-tiro { position: fixed; left: 0; top: 0; z-index: 95; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none; }
.fresita-tiro img { display: block; width: 100%; height: 100%; }

/* ================================================================ cajón del pedido y datos */
.carrito__caja { background: var(--color-fondo, #FFF5EC); }
.carrito__titulo { font-family: var(--fuente-display); font-weight: 400; color: var(--color-primario-texto, var(--color-primario)); letter-spacing: 0; }
.linea__nombre { font-family: var(--fuente-nombres); font-weight: 700; }
.linea__precio { color: var(--color-primario-texto, var(--color-primario)); font-family: var(--fuente-nombres); }
.campo-c__control { border: 2px solid var(--color-texto-suave); background: var(--color-superficie); color: var(--color-texto); font-size: 1rem; }
.segmentado__opcion span { font-family: var(--fuente-nombres); font-weight: 600; }

/* el aviso corto */
.aviso { background: var(--choco); color: var(--crema); border-radius: var(--radio-boton, 999px); font-weight: 700; }

/* ================================================================ el pie: la Fresita del logo */
.pie { margin-top: 40px; padding-top: 30px; border-top: 0; color: var(--color-texto-suave); }
.pie__logo { display: none; }
.pie__marca-nombre { font-family: var(--fuente-display); font-size: 1.5rem; color: var(--color-primario-texto, var(--color-primario)); text-shadow: var(--arcoiris); }
.pie__caja { gap: 14px; }
.pie__bloque { border: 2px solid var(--choco); border-radius: var(--radio, 20px); background: var(--color-superficie); padding: 14px 16px; }
.pie__subtitulo { font-family: var(--fuente-nombres); font-weight: 700; color: var(--color-texto); }
.fresita-pie { display: grid; justify-items: center; padding: 6px 0 4px; }
.fresita-pie .globo {
    position: relative; z-index: 3; margin: 0 0 18px; max-width: 250px; padding: 10px 18px;
    border: var(--contorno); border-radius: 20px; background: var(--color-superficie); box-shadow: 0 4px 0 var(--choco);
    font-family: var(--fuente-nombres); font-weight: 600; font-size: 1.08rem; line-height: 1.2; text-align: center; color: var(--color-texto);
}
.fresita-pie .globo::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 20px; height: 12px; margin-left: -18px; background: var(--choco); clip-path: polygon(0 0, 100% 0, 30% 100%); }
.fresita-pie__boton { position: relative; width: 220px; padding: 0 0 14px; border: 0; background: none; cursor: pointer; border-radius: 24px; -webkit-tap-highlight-color: transparent; }
.fresita-pie__boton .fresita-cara { transform-origin: 50% 90%; }
.fresita-pie__boton::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 12px; border-radius: 50%; background: var(--choco); opacity: .14; }

/* ================================================================ movimiento
   Lo que responde a un toque dura 260 ms o menos y nunca bloquea; el vuelo a
   la charola dura un poco más porque hay que seguirlo con la vista. Lo de
   ambiente es lento. Todo se apaga con «reducir movimiento». */
@media (prefers-reduced-motion: no-preference) {
    .fresita-fondo__patron { animation: f-deriva 46s linear infinite; }
    .tablero .chip.cuadro { animation: f-entra-cuadro .42s var(--rebote) calc(var(--i) * 55ms) backwards; }
    .tablero .cuadro__dibujo { animation: f-mece 3.6s ease-in-out calc(var(--i) * -.7s) infinite alternate; }
    .cuadro--toca .cuadro__dibujo { animation: f-brinca .4s var(--rebote); }
    .cabecera--fresita .cabecera__logo { animation: f-flota-logo 3.8s ease-in-out infinite alternate; }
    .cabecera--fresita .cabecera__logo.f-salta { animation: f-salta .5s var(--rebote); }
    .platillo__foto img, .seccion__foto img, .modal__foto img { animation: f-flota 4.2s ease-in-out calc(var(--k, 0) * -.9s) infinite alternate; }
    .platillo__foto::after, .seccion__foto::after, .modal__foto::after { animation: f-gira 26s linear infinite; }
    .vapor i { animation: f-humo 2.8s ease-out infinite; }
    .vapor i:nth-child(2) { animation-delay: .9s; }
    .vapor i:nth-child(3) { animation-delay: 1.8s; }
    .pieza__tira { animation: f-crece .6s var(--rebote) backwards; animation-delay: calc(var(--k, 0) * 60ms + .1s); }
    .fresita-barra--ver .chip--activo { animation: f-pop .22s var(--rebote); }
    .bolsa:not([hidden]) .bolsa__caja { animation: f-sube-bolsa .32s var(--rebote); }
    .bolsa--salta .bolsa__fresita { animation: f-salta .42s var(--rebote); }
    .fresita-pie__boton .fresita-cara { animation: f-baila 3.4s ease-in-out infinite; }
    .fresita-pie__boton::after { animation: f-sombra 3.4s ease-in-out infinite; }
    .fresita-pie__boton.f-salta .fresita-cara { animation: f-salta .5s var(--rebote); }
    .globo.f-cambia { animation: f-pop .26s var(--rebote); }
    .pico .fresita-cara.f-cambia { animation: f-pop .26s var(--rebote); }
    .fresita-cara[data-cara="superhot"] { animation: f-calor .5s linear infinite; }
    .fresita-cara[data-cara="picosita"] { animation: f-tantito 1.6s ease-in-out infinite; }
    .fresita-cara::before { animation: f-flama .38s ease-in-out infinite alternate; }
    @supports (animation-timeline: view()) {
        .platillos .platillo__foto, .seccion__foto { animation: f-revela linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    }
}
@keyframes f-deriva { to { transform: translate(120px, -120px); } }
@keyframes f-entra-cuadro { from { transform: translateY(10px) scale(.92); } }
@keyframes f-mece { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes f-brinca { 40% { transform: translateY(-10px) rotate(-10deg) scale(1.1); } }
@keyframes f-flota-logo { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes f-flota { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes f-gira { to { transform: rotate(360deg); } }
@keyframes f-humo { 0% { transform: translateY(12px) scaleY(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-28px) scaleY(1.15); opacity: 0; } }
@keyframes f-crece { from { transform: scaleX(.05); } }
@keyframes f-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes f-sube-bolsa { from { transform: translateY(130%); } }
@keyframes f-salta { 0% { transform: scale(1, 1); } 25% { transform: scale(1.08, .9); } 60% { transform: translateY(-16px) scale(.95, 1.06); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes f-baila { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes f-sombra { 0%, 100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.8); opacity: .09; } }
@keyframes f-calor { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes f-tantito { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes f-flama { from { transform: scaleY(.9); } to { transform: scaleY(1.1); } }
@keyframes f-revela { from { transform: scale(.6) rotate(-20deg); opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}
@media (max-width: 370px) {
    .tablero__titulo { font-size: 1.75rem; }
    .tablero .cuadro__dibujo { width: 78px; height: 78px; }
    .cabecera--fresita .cabecera__logo { width: 120px; }
    .pico { grid-template-columns: 70px minmax(0, 1fr); }
    .pico .fresita-cara { width: 70px; }
}
.grupo__regla--opcional { background: var(--color-superficie); border-color: var(--color-borde); color: var(--color-texto-suave); }

/* ================================================================ v1.0.2
   Los dibujos (mientras no hay foto): enteros, sin recorte redondo. */
.platillo__foto--dibujo img, .seccion__foto--dibujo img, .modal__foto--dibujo img {
    width: 84%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; box-shadow: none;
    filter: drop-shadow(0 3px 0 rgba(59, 23, 20, .1));
}
/* Lo que se pide por pieza: las salsas que todavía no tocan, y «Mixto» desde 2 */
.grupo--fuera { display: none !important; }
.pico-pista {
    margin: -4px 6px 0; padding: 8px 12px; border-radius: var(--radio-chico, 12px);
    border: 2px dashed var(--rosa-fuerte); background: var(--rosita);
    font-size: .88rem; font-weight: 700; text-align: center; color: var(--color-texto);
}
.opcion__nota { display: none; font-size: .74rem; font-weight: 800; color: var(--color-texto-suave); white-space: nowrap; }
.opcion--bloqueada .opcion__nota { display: inline; }
.opcion--bloqueada .opcion__precio { display: none; }