/* ===========================================================
   NATURAL POINT · tienda online
   Hoja de estilo propia: ningún control del navegador queda
   a la vista. Todo (select, scrollbar, tildes, tooltips,
   barras) está dibujado acá.
   =========================================================== */

/* ============================================================
   1 · FICHAS DE COLOR, MEDIDAS Y TIPOGRAFÍA
   ============================================================ */
:root {
  /* paleta de marca — el backoffice reescribe estas seis */
  --verde: #2f5220;
  --lima: #77bf5a;
  --amarillo: #f5b841;
  --coral: #e4715a;
  --crema: #fff6e0;
  --fondo: #fffdf6;

  /* derivados: se recalculan solos si cambia el tema (los respaldos fijos
     para navegadores sin color-mix están en el @supports de más abajo) */
  --verde-hondo: color-mix(in oklab, var(--verde) 74%, #000);
  --verde-suave: color-mix(in oklab, var(--verde) 12%, var(--fondo));
  --lima-suave: color-mix(in oklab, var(--lima) 18%, var(--fondo));
  --amarillo-suave: color-mix(in oklab, var(--amarillo) 22%, var(--fondo));
  --coral-hondo: color-mix(in oklab, var(--coral) 62%, #3a1109);

  --papel: #ffffff;
  --kraft: #f1e7d0;
  --tinta: #1a2614;
  --tinta-2: #5c6a52;
  --tinta-3: #8d9784;
  --linea: color-mix(in oklab, var(--verde) 12%, #e9e2d0);
  --linea-fuerte: color-mix(in oklab, var(--verde) 26%, #ddd2b6);

  /* sombras con tinte verde: nunca gris genérico */
  --sombra-xs: 0 1px 2px rgba(26, 38, 20, .06);
  --sombra-sm: 0 2px 10px -2px rgba(26, 38, 20, .10);
  --sombra: 0 10px 28px -12px rgba(26, 38, 20, .24);
  --sombra-lg: 0 26px 60px -24px rgba(26, 38, 20, .38);
  --sombra-dura: 0 4px 0 0 var(--verde-hondo);

  /* escalera de espacios: todo el ritmo sale de acá */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 18px;
  --e5: 26px;
  --e6: 38px;
  --e7: 56px;
  --e8: 78px;
  --seccion: clamp(56px, 7.5vw, 108px);
  --borde-env: clamp(18px, 4vw, 40px);

  /* radios: distintos según jerarquía, no uno para todo */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-full: 999px;

  --ancho: 1280px;
  --header: 88px;
  --header-2: 0px;

  --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  --firma: 'Grand Hotel', 'Brush Script MT', cursive;

  /* escala tipográfica fluida */
  --t-xs: clamp(.70rem, .66rem + .18vw, .78rem);
  --t-sm: clamp(.80rem, .76rem + .20vw, .88rem);
  --t-base: clamp(.94rem, .90rem + .22vw, 1.02rem);
  --t-md: clamp(1.02rem, .97rem + .30vw, 1.14rem);
  --t-lg: clamp(1.18rem, 1.08rem + .50vw, 1.42rem);
  --t-xl: clamp(1.45rem, 1.25rem + 1.00vw, 2.05rem);
  --t-2xl: clamp(1.85rem, 1.45rem + 2.00vw, 2.90rem);
  --t-3xl: clamp(2.30rem, 1.60rem + 3.40vw, 4.10rem);

  /* curvas: el resorte queda para detalles juguetones (íconos, globitos);
     lo que entra o sale usa --entrada, los paneles usan --cajon */
  --resorte: cubic-bezier(.34, 1.3, .64, 1);
  --suave: cubic-bezier(.22, .61, .36, 1);
  --salida: cubic-bezier(.4, 0, .2, 1);
  --entrada: cubic-bezier(.23, 1, .32, 1);
  --cajon: cubic-bezier(.32, .72, 0, 1);

  /* duraciones: la interfaz responde rápido, lo decorativo se toma su tiempo */
  --d-toque: 140ms;
  --d-hover: 240ms;
  --d-panel: 420ms;
}

/* Navegadores sin color-mix (Safari de iPhone anterior a 16.2, Chrome
   anterior a 111): los mismos colores, pero fijos. No son a ojo: son los
   que devuelve el navegador al resolver cada color-mix con el tema de
   fábrica, medidos y pasados a sRGB. Si el dueño cambia de tema, en esos
   navegadores viejos los derivados no lo siguen — pero nada desaparece,
   que es lo que importa. */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --verde-hondo: #1c3412;
    --verde-suave: #e4e7da;
    --lima-suave: #e7f2db;
    --amarillo-suave: #fdeed3;
    --coral-hondo: #9f4a39;
    --linea: #d1d0b9;
    --linea-fuerte: #adaf8d;
  }
}

/* ============================================================
   2 · BASE Y CONTROLES PROPIOS (nada nativo a la vista)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + var(--header-2) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

/* textura de papel: dos capas muy tenues, cero peso */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in oklab, var(--lima) 12%, transparent), transparent 42%),
    radial-gradient(circle at 88% 4%, color-mix(in oklab, var(--amarillo) 14%, transparent), transparent 38%),
    radial-gradient(circle at 50% 100%, color-mix(in oklab, var(--crema) 70%, transparent), transparent 55%);
}

body.sin-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* selección de texto con la marca, no el azul del sistema */
::selection { background: var(--lima); color: var(--verde-hondo); }
input, textarea { caret-color: var(--verde); }

/* Foco propio: anillo doble, siempre visible con teclado.
   El orden importa. Safari anterior a 15.4 no conoce :focus-visible y
   descarta esas dos reglas; si arrancáramos con `:focus { outline: none }`
   ahí se quedarían SIN ningún anillo y navegar con teclado sería a ciegas.
   Así, el navegador viejo muestra el anillo en todo foco (como siempre) y
   el moderno lo reserva para el teclado. */
:focus { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* barra de desplazamiento propia (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--verde-suave); }
::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border: 3px solid var(--fondo);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--lima); }
/* y la de Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) var(--verde-suave); }

/* nos sacamos de encima todo lo que dibuja el navegador */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select { -webkit-appearance: none; appearance: none; }
/* iOS le pone a los campos y botones su propio relieve, esquinas redondeadas
   y sombra interna, y no se van con border ni background: hay que apagarles
   el "look nativo" explícitamente. Con el prefijo, porque sin él Safari
   anterior al 15.4 no se da por enterado. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="date"]):not([type="time"]):not([type="file"]),
textarea, button {
  /* solo apagamos el aspecto nativo; el radio lo pone cada componente.
     Fecha, hora y archivo quedan afuera a propósito: con appearance:none
     Safari les esconde el valor y el selector. */
  -webkit-appearance: none; appearance: none;
}
/* y que no haya que esperar el doble toque para saber si querías hacer zoom:
   en el celular eso se sentía como 300 ms de demora en cada botón */
button, a, input, select, textarea, [role="button"], .chip, label { touch-action: manipulation; }
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--papel) inset;
  -webkit-text-fill-color: var(--tinta);
}
textarea { resize: none; }

.env { width: min(100% - var(--borde-env) * 2, var(--ancho)); margin-inline: auto; }
.oculto { display: none !important; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* globito de ayuda propio, reemplaza al title del navegador */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  translate: -50% 6px;
  background: var(--verde-hondo); color: var(--crema);
  font-family: var(--fuente); font-size: var(--t-xs); font-weight: 600;
  line-height: 1.3; letter-spacing: 0;
  padding: 7px 12px; border-radius: var(--r-xs);
  white-space: nowrap; pointer-events: none;
  opacity: 0; z-index: 90;
  transition: opacity .22s, translate .22s var(--resorte);
  box-shadow: var(--sombra);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }

/* ============================================================
   3 · MOVIMIENTO
   ============================================================ */
@keyframes subir { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes bajar { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
/* nada aparece de la nada: arranca apenas más chico y transparente */
@keyframes pop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes entrarTarjeta { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes entrarAviso { from { opacity: 0; translate: 0 10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bajarAviso { from { opacity: 0; translate: 0 -10px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* el sello cae como un sello de goma: grande, girado, y se asienta
   (recorrido más corto que antes: pega fuerte pero no da un salto brusco) */
@keyframes sellar { 0% { opacity: 0; scale: 1.22; rotate: -12deg; } 60% { opacity: 1; scale: .97; rotate: 1.5deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
/* entradas de la portada: cada capa del collage llega por su cuenta,
   nunca junto con el título (transform/opacity nomás, nada de layout) */
@keyframes entrarAro { from { opacity: 0; scale: .84; } to { opacity: .55; scale: 1; } }
@keyframes entrarOrbita { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrarFoto { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes llamar { 0% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 1.55; } }
/* flotar solo mueve: así respeta la inclinación propia de cada tarjeta */
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes flotar2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 9px; } }
@keyframes girar { to { rotate: 360deg; } }
@keyframes girarAlReves { to { rotate: -360deg; } }
@keyframes latir { 0%, 100% { scale: 1; } 35% { scale: 1.12; } 70% { scale: .97; } }
@keyframes pulso { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 2.1; } }
/* La tira de avisos. Va con transform (no con la propiedad `translate`)
   porque transform lo entienden TODOS los celulares, incluso los iPhone
   viejos, y además se compone en la placa de video: la tira no depende de
   que el hilo principal esté libre para seguir corriendo. */
@keyframes correr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes brillo { from { translate: -120% 0; } to { translate: 220% 0; } }
@keyframes entrarModal { from { opacity: 0; translate: 0 16px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes subirHoja { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes tildeDibujo { to { stroke-dashoffset: 0; } }
@keyframes caerConfeti { to { translate: 0 105vh; rotate: 720deg; opacity: 0; } }
@keyframes tiemble { 0%, 100% { translate: 0 0; } 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@keyframes vaiven { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes respirar { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes escribir { from { background-position: 200% 0; } to { background-position: -60% 0; } }

/* apariciones al hacer scroll, con retardo en cascada */
.revelar { opacity: 0; translate: 0 20px; filter: blur(4px); }
/* mientras se revela manda esta transición (le gana a la de cada tarjeta).
   Al terminar, tienda.js pone .revelado y vuelve la del hover, sin retardo. */
.revelar:not(.revelado) {
  transition:
    opacity .6s var(--entrada) var(--retardo, 0ms),
    translate .6s var(--entrada) var(--retardo, 0ms),
    filter .6s var(--entrada) var(--retardo, 0ms);
}
.revelar.visible { opacity: 1; translate: 0 0; filter: none; }

/* clases utilitarias de giro permanente */
.gira-lento { animation: girar 34s linear infinite; }
.gira-medio { animation: girar 18s linear infinite; }
.gira-inverso { animation: girarAlReves 26s linear infinite; }

/* ============================================================
   4 · BARRA DE PROGRESO DE LECTURA
   ============================================================ */
.progreso-lectura {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: 200; pointer-events: none;
  background: transparent;
}
.progreso-lectura i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--lima), var(--amarillo), var(--coral));
  border-radius: 0 var(--r-full) var(--r-full) 0;
  transition: width .1s linear;
}

/* ============================================================
   5 · ENCABEZADO
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 246, .86);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 2px solid transparent;
  transition: border-color .35s, box-shadow .35s, background .35s;
  animation: bajar .7s var(--suave) both;
  padding-top: env(safe-area-inset-top);
}
.cabecera.pegada {
  border-bottom-color: var(--linea);
  box-shadow: 0 10px 30px -22px rgba(26, 38, 20, .5);
}

.cabecera-fila {
  min-height: var(--header);
  display: flex; align-items: center; gap: var(--e4);
}

.marca { display: flex; align-items: center; gap: var(--e3); flex-shrink: 0; }
.marca-logo {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--papel); object-fit: contain;
  border: 2px solid var(--lima);
  padding: 2px;
  transition: rotate .6s var(--resorte), scale .6s var(--resorte);
}
.marca:hover .marca-logo { rotate: -10deg; scale: 1.07; }
.marca > span { display: flex; flex-direction: column; }
.marca-nombre { font-family: var(--firma); font-size: 2rem; color: var(--verde); line-height: 1; }
.marca-lema {
  font-size: var(--t-xs); color: var(--tinta-3);
  letter-spacing: .16em; line-height: 1.2;
}

/* buscador propio */
.buscador-cab { flex: 1; max-width: 560px; position: relative; margin-inline: auto; }
.buscador-cab input {
  width: 100%; height: 48px; border-radius: var(--r-full);
  border: 2px solid var(--linea); background: var(--papel);
  padding: 0 44px 0 48px;
  transition: border-color .28s, box-shadow .28s, background .28s;
}
.buscador-cab input::placeholder { color: var(--tinta-3); }
.buscador-cab input:focus {
  border-color: var(--lima);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--lima) 24%, transparent);
}
.buscador-cab .lupa {
  position: absolute; left: 17px; top: 50%; translate: 0 -50%;
  font-size: 1.05rem; opacity: .6; pointer-events: none;
}
.buscador-cab:focus-within .lupa { animation: vaiven .8s var(--resorte); }
/* botón de borrar propio (lo pone ui.js) */
.btn-limpiar {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--verde-suave); color: var(--tinta-2);
  font-size: .85rem; line-height: 1;
  transition: rotate .3s var(--resorte), background .2s, color .2s;
}
.btn-limpiar.visible { display: grid; }
.btn-limpiar:hover { background: var(--coral); color: #fff; rotate: 90deg; }

.acciones-cab { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }

.estado-local {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-sm); font-weight: 600; padding: 9px 16px;
  border-radius: var(--r-full);
  background: var(--lima-suave); color: var(--verde);
  border: 1.5px solid color-mix(in oklab, var(--lima) 40%, transparent);
  white-space: nowrap;
}
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--lima); position: relative; flex-shrink: 0; }
.punto::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--lima); animation: pulso 2.2s ease-out infinite;
}
.estado-local.cerrado {
  background: #fbe9e0;
  color: var(--coral-hondo);
  border-color: rgba(228, 113, 90, .34);
}
.estado-local.cerrado .punto,
.estado-local.cerrado .punto::after { background: var(--coral); }

/* carrito: el único botón con relieve, es la acción principal */
.btn-carrito {
  position: relative; display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--verde); color: var(--crema);
  font-weight: 700; font-size: var(--t-sm);
  padding: 13px 22px; border-radius: var(--r-full);
  box-shadow: var(--sombra-dura);
  transition: translate var(--d-toque) var(--entrada), box-shadow var(--d-toque) var(--entrada), background .25s;
  overflow: hidden; isolation: isolate;
}
/* el brillo pasa una sola vez al pasar el mouse: si corre siempre, cansa */
.btn-carrito::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  translate: -120% 0;
}
.btn-carrito:hover::before { animation: brillo .9s var(--suave); }
.btn-carrito:hover { translate: 0 -3px; box-shadow: 0 7px 0 0 var(--verde-hondo); }
.btn-carrito:active { translate: 0 3px; box-shadow: 0 1px 0 0 var(--verde-hondo); }
.globo-carrito {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-full);
  background: var(--amarillo); color: var(--verde-hondo);
  font-size: var(--t-xs); font-weight: 800;
  display: grid; place-items: center;
}
.btn-carrito.saltar { animation: latir .45s var(--entrada); }
.btn-carrito.saltar .globo-carrito { animation: pop .3s var(--entrada); }

.btn-menu {
  display: none; width: 44px; height: 44px;
  border-radius: var(--r-sm); background: var(--papel);
  border: 2px solid var(--linea); place-items: center;
  color: var(--verde);
  transition: background .2s, border-color .2s, rotate .3s var(--resorte);
}
.btn-menu:hover { border-color: var(--lima); rotate: -6deg; }

/* Tres rayas DIBUJADAS, no el carácter "☰".
   Ese carácter lo pinta la fuente del sistema y cada sistema lo apoya en
   una altura distinta: en el iPhone quedaba corrido hacia arriba dentro del
   botón. Dibujado es geometría pura y queda centrado en todos lados. */
.icono-menu {
  position: relative; display: block;
  width: 18px; height: 2.5px; border-radius: 2px;
  background: currentColor;
}
.icono-menu::before, .icono-menu::after {
  content: ''; position: absolute; left: 0;
  width: 100%; height: 100%; border-radius: inherit; background: currentColor;
}
.icono-menu::before { top: -6px; }
.icono-menu::after { top: 6px; }

/* menú de categorías en celular: hoja propia con secciones claras
   (Secciones / Categorías), no una sola bolsa de chips amontonados */
.menu-movil {
  position: fixed; inset: calc(var(--header) + env(safe-area-inset-top)) 0 auto 0;
  background: var(--fondo);
  border-bottom: 2px solid var(--linea);
  padding: 0 var(--borde-env) var(--e5); z-index: 55;
  display: none; flex-direction: column; align-items: stretch;
  box-shadow: var(--sombra);
  animation: bajar .32s var(--suave) both;
  max-height: 78vh; overflow-y: auto;
}
.menu-movil.abierto { display: flex; }
.menu-movil-cabeza {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4) 0; margin-bottom: var(--e2);
  background: var(--fondo);
  border-bottom: 2px solid var(--linea);
  font-family: var(--titulo); font-weight: 600; color: var(--verde); font-size: var(--t-md);
}
.menu-movil-etiqueta {
  display: block; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-3);
  letter-spacing: .05em; text-transform: uppercase;
  margin: var(--e3) 0 var(--e2);
}

/* ============================================================
   6 · TIRA QUE CORRE
   ============================================================ */
.tira-aviso {
  background: var(--verde-hondo); color: var(--crema);
  font-size: var(--t-sm); font-weight: 500;
  padding: 11px 0; overflow: hidden; position: relative;
}
/* Los bordes se desvanecen con dos degradados encima, NO con mask-image.
   En Safari de iPhone una máscara sobre un contenedor con un hijo animado
   en la placa de video hace que la animación no arranque hasta que algo
   fuerza un recálculo: por eso la tira aparecía trabada y se despertaba
   recién al girar el teléfono. Dos degradados hacen lo mismo y no rompen
   nada. */
.tira-aviso::before, .tira-aviso::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(22px, 6vw, 52px); pointer-events: none;
}
.tira-aviso::before { left: 0; background: linear-gradient(90deg, var(--verde-hondo), transparent); }
.tira-aviso::after { right: 0; background: linear-gradient(270deg, var(--verde-hondo), transparent); }
.tira-pista {
  display: flex; width: max-content;
  animation: correr 42s linear infinite;
  /* corre siempre: que viva en su propia capa y no dependa del hilo
     principal. backface-visibility es para iOS: sin esto Safari a veces
     decide no componer la capa y la animación no se ve. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Frenarla al pasar el mouse tiene sentido con un mouse. Con el dedo NO:
   el navegador deja el :hover "pegado" al tocar o al arrastrar el dedo por
   encima, y la tira se quedaba trabada hasta que tocabas en otro lado. */
@media (hover: hover) and (pointer: fine) {
  .tira-aviso:hover .tira-pista { animation-play-state: paused; }
}
.tira-grupo { display: flex; gap: var(--e7); padding-right: var(--e7); white-space: nowrap; }
.tira-grupo span { display: inline-flex; align-items: center; gap: var(--e2); }

/* ============================================================
   7 · PORTADA
   ============================================================ */
.portada {
  position: relative;
  padding: clamp(30px, 5vw, 68px) 0 clamp(48px, 7vw, 92px);
  overflow: clip;
}

/* manchas de color que respiran de fondo */
.mancha {
  position: absolute; border-radius: 50%;
  filter: blur(10px); pointer-events: none; z-index: 0;
  will-change: transform;
}
.mancha-1 {
  width: clamp(200px, 28vw, 360px); aspect-ratio: 1;
  background: var(--lima); opacity: .3;
  top: -14%; right: -6%; animation: flotar 12s ease-in-out infinite;
}
.mancha-2 {
  width: clamp(150px, 20vw, 250px); aspect-ratio: 1;
  background: var(--amarillo); opacity: .42;
  bottom: -12%; left: -8%; animation: flotar2 15s ease-in-out infinite;
}
.mancha-3 {
  width: clamp(110px, 14vw, 170px); aspect-ratio: 1;
  background: var(--coral); opacity: .2;
  top: 46%; right: 42%; animation: flotar 18s ease-in-out infinite;
}

.portada-grilla {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 5vw, 60px); align-items: center;
}

.chapa {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--papel); border: 2px solid var(--amarillo);
  color: color-mix(in oklab, var(--amarillo) 45%, #4a3406);
  font-size: var(--t-sm); font-weight: 700;
  padding: 9px 18px; border-radius: var(--r-full);
  margin-bottom: var(--e4);
  box-shadow: 0 3px 0 0 color-mix(in oklab, var(--amarillo) 60%, #b07d12);
  animation: pop .7s .1s var(--resorte) both;
}

.portada h1 {
  font-size: var(--t-3xl);
  color: var(--verde);
  margin-bottom: var(--e4);
  letter-spacing: -.03em;
}
.portada h1 .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.portada h1 .linea > span { display: block; animation: subir .9s var(--suave) both; }
.portada h1 .linea:nth-child(1) > span { animation-delay: .14s; }
.portada h1 .linea:nth-child(2) > span { animation-delay: .26s; }
.portada h1 .linea:nth-child(3) > span { animation-delay: .38s; }
/* trazo de marcador debajo del título, se dibuja solo al entrar.
   Va sobre el h1 entero para que no dependa de cómo corte el texto
   que escriba el dueño desde el panel. */
.portada h1 { position: relative; padding-bottom: .12em; }
.portada h1::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: .16em; width: 0;
  background: color-mix(in oklab, var(--lima) 52%, transparent);
  border-radius: var(--r-full);
  rotate: -.6deg;
}
.portada h1.pintado::after {
  width: min(62%, 8.5em);
  transition: width 1s .88s var(--suave);
}

.portada-texto {
  font-size: var(--t-md); color: var(--tinta-2);
  max-width: 46ch; margin-bottom: var(--e5);
  animation: subir .85s .5s var(--suave) both;
}

.portada-botones {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  animation: subir .85s .62s var(--suave) both;
}

/* ---- botones ---- */
.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-weight: 700; font-size: var(--t-base);
  padding: 15px 30px; min-height: 52px;
  border-radius: var(--r-full); border: 2px solid transparent;
  text-align: center; isolation: isolate; overflow: hidden;
  transition: translate var(--d-toque) var(--entrada), box-shadow var(--d-toque) var(--entrada), background .25s, color .25s, border-color .25s;
}
.boton-principal {
  background: var(--verde); color: var(--crema);
  box-shadow: var(--sombra-dura);
}
.boton-principal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  translate: -120% 0;
}
.boton-principal:hover::before { animation: brillo .9s var(--suave); }
.boton-principal:hover { translate: 0 -3px; box-shadow: 0 7px 0 0 var(--verde-hondo); }
.boton-principal:active { translate: 0 3px; box-shadow: 0 1px 0 0 var(--verde-hondo); }

.boton-secundario {
  background: var(--papel); color: var(--verde); border-color: var(--verde);
  box-shadow: 0 4px 0 0 color-mix(in oklab, var(--verde) 28%, transparent);
}
.boton-secundario:hover { background: var(--verde); color: var(--crema); translate: 0 -3px; }
.boton-secundario:active { translate: 0 3px; box-shadow: none; }

.boton-wsp {
  background: #25d366; color: #06331a;
  box-shadow: 0 4px 0 0 #12924a;
}
.boton-wsp:hover { translate: 0 -3px; box-shadow: 0 7px 0 0 #12924a; }
.boton-wsp:active { translate: 0 3px; box-shadow: 0 1px 0 0 #12924a; }

.boton[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }

/* ---- collage de la portada ----
   Sin pop propio: cada capa de adentro (aro, fotos, órbita, sello) entra
   por su cuenta y en cascada, así el conjunto no le compite al título. */
.portada-arte {
  position: relative;
  aspect-ratio: 1 / .96;
  max-height: 460px;
}

/* aro punteado que gira solo, detrás de las fotos */
.aro-gira {
  position: absolute; inset: 4%; z-index: 0;
  animation: entrarAro .6s .3s var(--entrada) backwards, girar 44s linear infinite;
  opacity: .55; pointer-events: none;
}
.aro-gira circle { fill: none; stroke: var(--lima); stroke-width: 1.6; stroke-dasharray: 3 13; stroke-linecap: round; }
.aro-gira circle:last-child { stroke: var(--amarillo); stroke-dasharray: 2 22; }

/* hojas en órbita: la órbita gira, cada hoja se desgira para no marearse */
.orbita {
  position: absolute; inset: -4%; z-index: 4; pointer-events: none;
  animation: entrarOrbita .5s .68s var(--entrada) backwards, girar 30s linear infinite;
}
.orbita i {
  position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  display: grid; place-items: center;
  font-size: 1.25rem; font-style: normal;
  background: var(--papel); border-radius: 50%;
  box-shadow: var(--sombra-sm);
  animation: girarAlReves 30s linear infinite;
}
.orbita i:nth-child(1) { top: 0; left: 50%; }
.orbita i:nth-child(2) { top: 72%; left: 96%; }
.orbita i:nth-child(3) { top: 76%; left: 4%; }

.tarjeta-flotante {
  position: absolute; z-index: 2;
  /* cuadradas y con la foto ENTERA adentro (object-fit: contain, más abajo).
     Antes eran rectangulares y recortaban: las fotos del local son cuadradas
     con fondo blanco, así que el recorte se comía el producto y dejaba la
     tarjeta casi vacía. */
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg); overflow: hidden;
  border: 4px solid var(--papel);
  padding: 0; cursor: pointer;
  /* un fondo apenas cálido con luz en el centro: el producto se despega del
     blanco de la foto en vez de disolverse en él */
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, #fff 46%, color-mix(in oklab, var(--crema) 70%, #fff) 100%);
  transition: rotate .5s var(--resorte), scale .5s var(--resorte), box-shadow .4s;
}
/* canto interno tenue: le da filo a la foto contra el borde de papel */
.tarjeta-flotante::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(26, 38, 20, .07);
}
/* dos capas de foto que se turnan: mientras una se va, la otra entra.
   El blur es a propósito — sin él se ven DOS fotos superpuestas durante
   el cruce; con él el ojo lee una sola imagen que se transforma. */
.tf-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* cover sobre una tarjeta CUADRADA: las fotos ya vienen cuadradas y con
     fondo blanco, así que no recorta nada y el producto se ve lo más grande
     posible. Es el mismo encuadre que usa la grilla de productos. */
  object-fit: cover;
  opacity: 0; scale: 1.07; filter: blur(7px);
  transition: opacity .62s var(--entrada), scale .9s var(--entrada), filter .62s var(--entrada);
}
.tf-foto.visible { opacity: 1; scale: 1; filter: blur(0); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-flotante:hover { scale: 1.05; rotate: 0deg; z-index: 6; box-shadow: var(--sombra-xl, var(--sombra-lg)); }
}
.tarjeta-flotante:active { scale: .98; }
.tarjeta-flotante:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tf-foto { transition: opacity .3s linear; scale: 1; filter: none; }
}
/* cada foto entra por separado (escala+opacidad) y después queda flotando;
   el flotar arranca con una fase propia en cada una para que no se
   hamaquen las tres juntas como si fueran una sola pieza */
/* sin alto: lo pone aspect-ratio. Los tamaños se escalonan (grande, media,
   chica) para que el collage tenga profundidad y no parezcan tres iguales. */
.tf-1 { width: 47%; top: 4%; left: 5%; rotate: -3deg; animation: entrarFoto .55s .42s var(--resorte) backwards, flotar 8s .2s ease-in-out infinite; z-index: 3; }
.tf-2 { width: 37%; bottom: 6%; right: 4%; rotate: 4deg; animation: entrarFoto .55s .52s var(--resorte) backwards, flotar2 10s .6s ease-in-out infinite; z-index: 4; }
.tf-3 { width: 30%; bottom: 10%; left: 8%; rotate: 6deg; animation: entrarFoto .55s .62s var(--resorte) backwards, flotar 11s 1s ease-in-out infinite; z-index: 2; }

/* sello de envío gratis: una calcomanía redonda con borde de papel,
   el texto gira alrededor y el centro amarillo queda quieto para leerse */
.sello-aro {
  position: absolute; z-index: 7; top: 0; right: 0;
  width: clamp(122px, 14vw, 156px); aspect-ratio: 1;
  display: grid; place-items: center;
  filter:
    drop-shadow(0 2px 3px rgba(26, 38, 20, .12))
    drop-shadow(0 14px 24px color-mix(in oklab, var(--amarillo) 45%, transparent));
  animation: sellar .7s .88s var(--entrada) backwards;
  cursor: default;
}
.sello-aro.oculta { display: none; }
.aro-texto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
  animation: girar 28s linear infinite;
}
/* al pasar el mouse se frena, para poder leerlo tranquilo */
.sello-aro:hover .aro-texto { animation-play-state: paused; }
.aro-fondo { fill: var(--papel); }
.aro-borde {
  fill: none; stroke: color-mix(in oklab, var(--lima) 55%, transparent);
  stroke-width: 1; stroke-dasharray: 1.5 3.5; stroke-linecap: round;
}
.aro-texto text {
  font-family: var(--fuente); font-size: 8.6px; font-weight: 800;
  /* .405em (no .12em) porque Chromium ignora textLength/lengthAdjust en
     <textPath>: medimos a mano el letter-spacing que hace que el texto
     "natural" ya mida ~289 (el largo del círculo), así no queda un hueco
     sin letras. En los navegadores que sí respetan textLength esto no
     rompe nada: ya casi no necesitan ajustar nada para llegar a 289. */
  letter-spacing: .405em; text-transform: uppercase;
  fill: var(--verde);
}
.sello {
  position: relative; z-index: 1;
  width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: var(--amarillo); color: #755516;
  display: grid; place-content: center; text-align: center;
  font-family: var(--titulo); font-weight: 600;
  font-size: clamp(.66rem, .95vw, .78rem); line-height: 1.15;
  padding: 6px;
  /* canto interno, como un sello estampado */
  box-shadow:
    inset 0 0 0 2px color-mix(in oklab, var(--amarillo) 70%, #fff),
    inset 0 -3px 0 0 color-mix(in oklab, var(--amarillo) 70%, #a8760c);
  transition: rotate var(--d-hover) var(--resorte), scale var(--d-hover) var(--resorte);
}
.sello-aro:hover .sello { rotate: -8deg; scale: 1.04; }
.sello strong { display: block; font-size: 1.75em; line-height: 1; letter-spacing: -.01em; }

/* ============================================================
   8 · BENEFICIOS
   ============================================================ */
.beneficios { padding: 0 0 var(--e5); }
.beneficios-grilla {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3);
}
.beneficio {
  display: flex; align-items: center; gap: var(--e3);
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r); padding: var(--e4);
  transition: translate .35s var(--resorte), border-color .3s, box-shadow .3s;
}
.beneficio:hover { translate: 0 -6px; border-color: var(--lima); box-shadow: var(--sombra); }
.beneficio-icono {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--verde-suave); flex-shrink: 0;
  transition: rotate .45s var(--resorte), scale .45s var(--resorte), background .3s;
}
.beneficio:hover .beneficio-icono { rotate: -12deg; scale: 1.12; background: var(--lima-suave); }
.beneficio b { display: block; font-size: var(--t-sm); line-height: 1.25; }
.beneficio span { font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.4; }

/* ============================================================
   9 · SECCIONES
   ============================================================ */
.seccion { padding: var(--seccion) 0; }
.seccion-cabeza { margin-bottom: var(--e6); max-width: 62ch; }
.seccion-cabeza h1, .seccion-cabeza h2 { font-size: var(--t-2xl); color: var(--verde); }
.seccion-cabeza p { color: var(--tinta-2); margin-top: var(--e2); font-size: var(--t-md); }

/* ---- categorías ---- */
.cat-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.cat-tarjeta {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--r-lg); padding: var(--e5) var(--e4);
  min-height: 158px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e3);
  border: 2px solid rgba(0, 0, 0, .06);
  transition: translate .4s var(--resorte), rotate .4s var(--resorte), box-shadow .4s;
}
/* halo que gira al pasar el mouse */
.cat-tarjeta::before {
  content: ''; position: absolute; inset: -60%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .55) 85%, transparent 100%);
  opacity: 0; transition: opacity .4s;
}
.cat-tarjeta:hover::before { opacity: 1; animation: girar 5s linear infinite; }
.cat-tarjeta::after {
  content: ''; position: absolute; inset: 0; background: #fff; opacity: 0;
  transition: opacity .3s;
}
.cat-tarjeta:hover { translate: 0 -8px; rotate: -1deg; box-shadow: var(--sombra-lg); }
.cat-tarjeta:hover::after { opacity: .14; }
.cat-emoji {
  font-size: 2.4rem; position: relative; z-index: 1; width: fit-content;
  transition: rotate .45s var(--resorte), scale .45s var(--resorte);
}
.cat-tarjeta:hover .cat-emoji { scale: 1.2; rotate: 10deg; }
.cat-tarjeta > span:last-child { position: relative; z-index: 1; }
.cat-nombre { display: block; font-family: var(--titulo); font-weight: 600; font-size: var(--t-md); line-height: 1.15; }
.cat-cantidad { display: block; font-size: var(--t-xs); opacity: .72; margin-top: 3px; }

/* ============================================================
   10 · CATÁLOGO
   ============================================================ */
.barra-filtros {
  position: sticky; top: var(--alto-cab, var(--header)); z-index: 40;
  background: rgba(255, 253, 246, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--e3) 0; margin-bottom: var(--e5);
  border-bottom: 2px solid var(--linea);
}
.filtros-fila { display: flex; gap: var(--e3); align-items: center; }

/* fila de chips con desvanecido en los bordes, sin scrollbar nativa */
.chips {
  display: flex; gap: var(--e2); flex: 1; min-width: 0;
  overflow-x: auto; padding: 3px 4px 5px 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  --mascara: linear-gradient(90deg, #000 96%, transparent);
  -webkit-mask-image: var(--mascara); mask-image: var(--mascara);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  scroll-snap-align: start;
  white-space: nowrap; font-size: var(--t-sm); font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--papel); border: 2px solid var(--linea); color: var(--tinta-2);
  transition: translate .25s var(--resorte), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.chip:hover { translate: 0 -2px; border-color: var(--lima); color: var(--verde); }
.chip.activo {
  background: var(--verde); border-color: var(--verde); color: var(--crema);
  box-shadow: 0 3px 0 0 var(--verde-hondo);
}
.menu-movil .chip { flex: 0 0 auto; }

/* ---- desplegable de orden, dibujado por nosotros ---- */
.orden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.selector { position: relative; flex-shrink: 0; }
.selector-boton {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 44px; padding: 0 16px; border-radius: var(--r-full);
  background: var(--papel); border: 2px solid var(--linea);
  font-weight: 600; font-size: var(--t-sm); color: var(--tinta-2);
  white-space: nowrap;
  transition: border-color .25s, color .25s;
}
.selector-boton:hover { border-color: var(--lima); color: var(--verde); }
.selector-boton .flecha {
  width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  rotate: 45deg; translate: 0 -2px;
  transition: rotate .3s var(--resorte), translate .3s var(--resorte);
}
.selector.abierto .selector-boton { border-color: var(--lima); color: var(--verde); }
.selector.abierto .flecha { rotate: -135deg; translate: 0 2px; }
.selector-lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 210px; padding: var(--e2);
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra-lg);
  display: none; flex-direction: column; gap: 2px;
}
/* se abre desde el botón (arriba a la derecha), no desde el centro */
.selector-lista { transform-origin: top right; }
.selector.abierto .selector-lista { display: flex; animation: pop .18s var(--entrada) both; }
.selector-lista button {
  display: flex; align-items: center; gap: var(--e2);
  padding: 11px 13px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; text-align: left;
  color: var(--tinta-2);
  transition: background .2s, color .2s, padding-left .2s;
}
.selector-lista button::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linea-fuerte); flex-shrink: 0;
  transition: background .2s, scale .2s var(--resorte);
}
.selector-lista button:hover { background: var(--verde-suave); color: var(--verde); padding-left: 17px; }
.selector-lista button[aria-selected="true"] { color: var(--verde); }
.selector-lista button[aria-selected="true"]::before { background: var(--lima); scale: 1.25; }

/* ---- desplegable de CATEGORÍAS ----
   Antes eran chips en una fila con scroll horizontal: en la computadora
   no hay forma cómoda de correrla (no hay barra, la rueda del mouse mueve
   la página) y las últimas categorías quedaban escondidas para siempre.
   Acá entran todas de una, con su emoji y cuántos productos tiene cada
   una, sin que la barra de filtros crezca. */
.selector-cat { flex: 1 1 auto; min-width: 0; }
.selector-cat .selector-boton {
  width: 100%; max-width: 340px; justify-content: flex-start;
  overflow: hidden;
}
.selector-cat .selector-boton .flecha { margin-left: auto; }
.selector-cat .cat-valor {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--verde);
}
.selector-cat .cat-etiqueta { color: var(--tinta-3); font-weight: 600; }
.selector-cat .selector-lista {
  left: 0; right: auto; transform-origin: top left;
  width: min(560px, calc(100vw - 2 * var(--borde-env)));
  min-width: 0;
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent;
}
.selector-cat.abierto .selector-lista { display: grid; }
.selector-cat .selector-lista::-webkit-scrollbar { width: 8px; }
.selector-cat .selector-lista::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte); border-radius: 99px;
  border: 2px solid var(--papel);
}
.selector-cat .selector-lista::-webkit-scrollbar-track { background: transparent; }
/* la opción "Todo" y la de promo ocupan la fila entera, como encabezados */
.selector-cat .selector-lista button.ancho { grid-column: 1 / -1; }
/* acá el punto sobra: el emoji de la categoría ya hace de marca */
.selector-cat .selector-lista button::before { display: none; }
.selector-cat .selector-lista button { gap: 10px; padding: 10px 12px; }
.selector-cat .cat-op-emo { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.selector-cat .cat-op-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-cat .cat-op-num {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; color: var(--tinta-3);
  background: var(--fondo); border-radius: var(--r-full); padding: 2px 8px;
  transition: background .2s, color .2s;
}
.selector-cat .selector-lista button:hover { padding-left: 12px; }
.selector-cat .selector-lista button:hover .cat-op-num { background: var(--papel); color: var(--verde); }
.selector-cat .selector-lista button[aria-selected="true"] {
  background: var(--verde); color: var(--crema);
}
.selector-cat .selector-lista button[aria-selected="true"] .cat-op-num {
  background: color-mix(in oklab, #fff 22%, transparent); color: var(--crema);
}
@media (max-width: 620px) {
  .selector-cat .selector-boton { max-width: none; }
  .selector-cat .selector-lista { grid-template-columns: 1fr; }
}

/* ---- venta fraccionada (los que van por kilo, en bolsitas) ---- */
/* el precio del kilo va abajo y en chico: es con lo que la gente compara,
   pero lo que se cobra es la bolsita, y eso tiene que leerse primero */
.precio-kilo {
  display: block; margin-top: 2px;
  font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3);
}
.ficha-fraccion {
  margin-top: 14px; padding: 10px 14px;
  background: var(--verde-suave); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--verde);
}
.ficha-atajos { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: 12px; }
.ficha-atajos .chip { padding: 8px 15px; }
.ficha-atajos .chip.activo {
  background: var(--verde); border-color: var(--verde); color: var(--crema);
}

/* ---- grilla de productos ---- */
.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.producto {
  position: relative; background: var(--papel);
  border-radius: var(--r-lg); border: 2px solid var(--linea);
  overflow: hidden; display: flex; flex-direction: column;
  transform-style: preserve-3d; cursor: pointer;
  transition: translate .3s var(--entrada), box-shadow .3s var(--entrada), border-color .25s, rotate .3s var(--entrada);
  /* backwards y no both: si la animación se queda "pegada" al final,
     pisa el scale del toque en celular y el translate del hover */
  animation: entrarTarjeta .45s var(--entrada) backwards;
}
.producto:hover { translate: 0 -9px; box-shadow: var(--sombra-lg); border-color: var(--lima); }

.producto-foto {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--verde-suave); cursor: pointer;
}
/* el aro de foco de :focus-visible se dibuja hacia adentro: la foto (y la
   tarjeta que la contiene) tienen overflow:hidden y si no, el aro queda
   cortado y el foco por teclado se vuelve invisible */
.producto-foto:focus-visible { outline-offset: -3px; }
/* mientras carga la foto real, gira un aro propio */
.producto-foto::before {
  content: ''; position: absolute; z-index: 0;
  top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--lima) 35%, transparent);
  border-top-color: var(--lima);
  animation: girar 1s linear infinite;
}
.producto-foto img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  background: var(--verde-suave);
  opacity: 0;
  /* red de seguridad: si el aviso de "cargó" no llega, igual aparece */
  animation: aparecer .45s 2.4s both;
  transition: scale .8s var(--suave), rotate .8s var(--suave);
}
.producto-foto img.lista { animation: aparecer .45s both; }
.producto:hover .producto-foto img { scale: 1.08; rotate: 1.5deg; }

.lupa-ver {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(28, 52, 18, .42);
  opacity: 0; transition: opacity .3s;
}
.producto:hover .lupa-ver, .producto:focus-within .lupa-ver { opacity: 1; }
.lupa-ver span {
  background: var(--papel); color: var(--verde);
  font-weight: 700; font-size: var(--t-sm);
  padding: 10px 20px; border-radius: var(--r-full);
  translate: 0 12px; transition: translate .35s var(--resorte);
  box-shadow: var(--sombra);
}
.producto:hover .lupa-ver span { translate: 0 0; }

.etiquetas {
  position: absolute; top: 11px; left: 11px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.eti {
  font-size: var(--t-xs); font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--papel); color: var(--verde);
  box-shadow: var(--sombra-sm);
}
/* se hamaca una vez al pasar el mouse; siempre en movimiento, con varias
   ofertas en pantalla, la grilla parecía un semáforo */
.eti-oferta { background: var(--coral); color: #fff; }
.producto:hover .eti-oferta { animation: vaiven .6s var(--suave); }
.eti-agotado { background: #6b7280; color: #fff; }

.producto-cuerpo {
  padding: var(--e4) var(--e4) var(--e4);
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.producto-cat { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; }
.producto-nombre {
  font-family: var(--titulo); font-weight: 500;
  font-size: var(--t-base); line-height: 1.28;
}
.producto-precios {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--e2);
}
.precio { font-family: var(--titulo); font-weight: 600; font-size: var(--t-lg); color: var(--verde); }
/* "/ kg" en los productos que se venden por peso: chico, no compite con el precio */
.precio small { font-size: .5em; font-weight: 600; color: var(--tinta-2); margin-left: 2px; }
.precio-viejo { font-size: var(--t-sm); color: var(--tinta-3); text-decoration: line-through; }
.stock-bajo { font-size: var(--t-xs); color: var(--coral-hondo); font-weight: 700; }

/* ---- ver más productos (paginación de la grilla) ---- */
.ver-mas-cont { display: flex; justify-content: center; margin-top: var(--e6); }
.boton-vermas { width: 100%; max-width: 360px; }

.btn-agregar {
  margin-top: var(--e3); width: 100%;
  background: var(--verde); color: var(--crema);
  font-weight: 700; font-size: var(--t-sm);
  padding: 13px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  box-shadow: 0 3px 0 0 var(--verde-hondo);
  transition: translate .2s var(--resorte), background .25s, color .25s, box-shadow .2s;
}
.btn-agregar:hover { background: var(--lima); color: var(--verde-hondo); translate: 0 -2px; box-shadow: 0 5px 0 0 var(--verde); }
.btn-agregar:active { translate: 0 3px; box-shadow: 0 0 0 0 var(--verde-hondo); }
.btn-agregar[disabled] { background: var(--verde-suave); color: var(--tinta-3); box-shadow: none; pointer-events: none; }

.vacio {
  grid-column: 1 / -1; text-align: center; padding: var(--e8) var(--e4);
  background: var(--papel); border: 3px dashed var(--linea-fuerte);
  border-radius: var(--r-lg);
}
.vacio-emoji { font-size: 3.2rem; display: block; margin-bottom: var(--e3); animation: flotar 4s ease-in-out infinite; }
.vacio h3 { color: var(--verde); margin-bottom: 6px; font-size: var(--t-lg); }
.vacio p { color: var(--tinta-2); }

/* ---- esqueleto de carga (mientras se conecta a la nube o lee localStorage) ---- */
.esqueleto, .esqueleto-linea { position: relative; overflow: hidden; background: var(--linea); }
.esqueleto::after, .esqueleto-linea::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  translate: -120% 0; animation: brillo 1.4s ease-in-out infinite;
}
.cat-tarjeta.esqueleto { pointer-events: none; }
.producto.esqueleto { pointer-events: none; animation: none; }
.producto.esqueleto .producto-foto { background: var(--linea); }
.producto.esqueleto .producto-foto::before { display: none; }
.esqueleto-linea { display: block; height: 14px; border-radius: 7px; margin-top: 8px; }
.esqueleto-linea.corta { width: 45%; height: 11px; margin-top: 0; }
.esqueleto-linea.media { width: 65%; }

/* ============================================================
   10-B · NAVEGACIÓN (Inicio / Productos / Promos)
   ============================================================ */
/* segundo piso del encabezado: fuera de la parte fija, así arriba solo
   quedan logo, buscador y carrito, con aire; al bajar se va con la página */
.subnav {
  background: color-mix(in oklab, var(--fondo) 92%, var(--lima-suave));
  border-bottom: 1px solid var(--linea);
}
.subnav-fila {
  min-height: 46px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.subnav .estado-local { padding: 6px 14px; font-size: var(--t-xs); }

.nav-principal { display: flex; align-items: center; gap: var(--e5); flex-shrink: 0; }
.nav-link {
  font-weight: 700; font-size: var(--t-sm); color: var(--tinta-2);
  padding: 10px 2px; position: relative;
  transition: color .2s;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--lima); scale: 0 1; transform-origin: right;
  transition: scale .3s var(--suave);
}
.nav-link:hover, .nav-link.activo { color: var(--verde); }
.nav-link:hover::after, .nav-link.activo::after { scale: 1 1; transform-origin: left; }

/* sección "Secciones": filas enteras, cómodas de tocar, no pills chicas */
.menu-movil-nav {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding-bottom: var(--e3); margin-bottom: var(--e2);
  border-bottom: 2px solid var(--linea);
}
.menu-movil-nav .chip {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  text-align: left; justify-content: flex-start;
  padding: 14px 16px; font-size: var(--t-base); border-radius: var(--r-sm);
}
.menu-movil-nav .chip.activo { background: var(--verde); border-color: var(--verde); color: var(--crema); }
/* sección "Categorías": acá sí conviene la grilla de pills, son muchas */
.menu-movil-chips { display: flex; flex-wrap: wrap; gap: var(--e2); width: 100%; }

/* en el celular las secciones viven en el menú ☰ */
@media (max-width: 720px) { .subnav { display: none; } }

/* ============================================================
   10-C · PROMOS VIGENTES (inicio)
   ============================================================ */
.promos-fila {
  display: flex; gap: var(--e4);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 4px 4px 14px;
}
.promos-fila::-webkit-scrollbar { display: none; }
.promo-tarjeta {
  flex: 0 0 min(88vw, 420px); scroll-snap-align: start;
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: translate .35s var(--resorte), box-shadow .35s, border-color .3s;
}
.promos-fila.promos-una .promo-tarjeta { flex: 1 1 100%; }
.promo-tarjeta:hover { translate: 0 -6px; box-shadow: var(--sombra-lg); border-color: var(--coral); }
.promo-media {
  position: relative; aspect-ratio: 16 / 8; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--lima-suave), var(--lima));
}
.promo-media img { width: 100%; height: 100%; object-fit: cover; }
.promo-emoji { font-size: 3.4rem; }
.promo-sello {
  position: absolute; top: 14px; right: 14px;
  background: var(--coral); color: #fff;
  font-family: var(--titulo); font-weight: 600; font-size: var(--t-lg);
  padding: 8px 16px; border-radius: var(--r-full);
  box-shadow: 0 4px 0 0 var(--coral-hondo);
  animation: sellar .6s .1s var(--entrada) both;
}
.promo-cuerpo { padding: var(--e4) var(--e5) var(--e5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.promo-vence { font-size: var(--t-xs); font-weight: 700; color: var(--coral-hondo); letter-spacing: .03em; text-transform: uppercase; }
.promo-cuerpo h3 { font-size: var(--t-lg); color: var(--verde); }
.promo-cuerpo p { color: var(--tinta-2); font-size: var(--t-sm); flex: 1; }
.promo-cuerpo .boton { align-self: flex-start; margin-top: var(--e3); }

/* ficha: línea "🔥 Promo <título> · hasta el 30/9" */
.ficha-promo { font-size: var(--t-sm); font-weight: 700; color: var(--coral-hondo); margin: -4px 0 8px; }

/* cartel de una promo puntual en productos.html (?promo=) */
.promo-banner {
  background: linear-gradient(120deg, var(--coral), var(--amarillo));
  color: #3a1109; border-radius: var(--r-lg); margin-bottom: var(--e5);
  animation: pop .4s var(--entrada) both;
}
.promo-banner-cuerpo { display: flex; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); }
.promo-banner-sello {
  flex-shrink: 0; font-family: var(--titulo); font-weight: 600; font-size: var(--t-xl);
  background: #fff; color: var(--coral-hondo);
  padding: 10px 18px; border-radius: var(--r-full);
}
.promo-banner-cuerpo h2 { font-size: var(--t-lg); margin-bottom: 2px; }
.promo-banner-cuerpo p { font-size: var(--t-sm); opacity: .92; }
.promo-banner-cuerpo .btn-cerrar { margin-left: auto; background: #fff; flex-shrink: 0; }

/* ============================================================
   10-C-2 · PROMOS BANCARIAS (inicio)
   Informativas: el banco aplica el beneficio al cobrar, no cambian
   precios ni el total. Igual mecánica de fila que .promos-fila.
   ============================================================ */
.bancos-fila {
  /* stretch, no flex-start: si un beneficio ocupa más renglones que otro
     ("3 cuotas sin interés" contra "20%"), las tarjetas quedaban de
     alturas distintas y la fila se veía despareja */
  display: flex; align-items: stretch; gap: var(--e5);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 4px 4px 16px;
  /* "safe" es la clave: con una o dos promos quedan centradas, y cuando
     son tantas que hay que hacer scroll vuelve solo a alinear a la
     izquierda (un `center` a secas cortaría las primeras tarjetas). */
  justify-content: safe center;
}
.bancos-fila::-webkit-scrollbar { display: none; }
.banco-tarjeta {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 0 0 min(88vw, 360px); scroll-snap-align: start;
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-sm);
  transition: translate .35s var(--resorte), box-shadow .35s, border-color .3s;
}
.bancos-fila.bancos-una .banco-tarjeta { flex: 1 1 100%; max-width: 520px; }
/* promo con pocos datos (solo el % y un día): la tarjeta se achica en vez de
   estirarse y dejar el panel blanco medio vacío */
.bancos-fila.bancos-una .banco-tarjeta:has(.banco-info > .banco-chips:only-child),
.bancos-fila.bancos-una .banco-tarjeta:has(.banco-info:empty) { max-width: 400px; }
.banco-tarjeta:hover { translate: 0 -6px; box-shadow: var(--sombra-lg); border-color: var(--verde); }
.banco-tarjeta.banco-hoy {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 18%, transparent), var(--sombra-sm);
}
.banco-tarjeta.banco-hoy:hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 18%, transparent), var(--sombra-lg); }

/* panel del banco: ocupa el color de marca como acento (o el que pisó el
   dueño), la placa/logo va chica arriba a modo de firma y el beneficio
   domina abajo bien grande: es el motivo por el que la tarjeta existe */
.banco-hero {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--e3);
  padding: var(--e5) var(--e4);
}
.banco-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 60%);
}
.banco-hero > * { position: relative; z-index: 1; }

.banco-marca {
  display: inline-flex; align-items: center; max-width: 100%;
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .01em; color: var(--verde-hondo);
  background: rgba(255, 255, 255, .92);
  background: color-mix(in oklab, #fff 92%, transparent);
  padding: 6px 13px; border-radius: var(--r-full);
  box-shadow: var(--sombra-xs);
}
.banco-marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banco-marca img { max-height: 20px; max-width: 130px; object-fit: contain; display: block; }

.banco-beneficio {
  font-family: var(--titulo); font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 2vw, 2.15rem);
  line-height: 1.05; letter-spacing: -.02em;
  text-wrap: balance;
}

.banco-info { padding: var(--e4) var(--e4) var(--e5); display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.banco-detalle { font-size: var(--t-sm); color: var(--tinta-2); }
.banco-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.banco-chip {
  font-size: var(--t-xs); font-weight: 700; color: var(--verde);
  background: var(--lima-suave); border-radius: var(--r-full); padding: 5px 12px;
}
.banco-tope { font-size: var(--t-xs); color: var(--tinta-3); margin-top: 2px; }

/* "Ver condiciones" desplegable, sin usar <details> nativo */
.banco-cond-btn {
  align-self: flex-start; font-size: var(--t-xs); font-weight: 700; color: var(--verde);
  border-bottom: 1px solid currentColor; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
.banco-cond-btn .flecha {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; transition: rotate .25s var(--resorte);
}
.banco-cond-btn.abierto .flecha { rotate: -135deg; }
.banco-cond-texto {
  font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.5;
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--suave), margin-top .35s var(--suave);
}
.banco-cond-texto.abierto { max-height: 240px; margin-top: 6px; }

/* sin detalle/tope/condiciones (promo con datos mínimos), centramos lo
   poco que hay en vez de dejarlo pegado arriba con un hueco abajo */
.banco-info:has(> .banco-chips:only-child) { justify-content: center; }

/* cinta "¡HOY!": late suave, sin sobresaltar */
.banco-cinta {
  position: absolute; top: 15px; right: -32px; z-index: 3;
  background: var(--coral); color: #fff;
  font-family: var(--titulo); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .04em; padding: 5px 36px;
  rotate: 33deg; box-shadow: var(--sombra-sm);
  animation: latirCinta 2.4s ease-in-out infinite;
}
@keyframes latirCinta { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

.bancos-nota { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e3); text-align: center; }
/* el título acompaña a las tarjetas: con la fila centrada, un título
   pegado a la izquierda hace ver la sección desbalanceada */
#promosBancarias .seccion-cabeza { text-align: center; margin-inline: auto; }

/* escritorio: placa + beneficio en un panel de color a la izquierda,
   el resto de la info a la derecha; en celular queda todo apilado */
@media (min-width: 641px) {
  .banco-tarjeta { flex-direction: row; align-items: stretch; }
  .banco-hero { flex: 0 0 42%; max-width: 190px; }
  .banco-info { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   10-D · CARRUSEL "DESTACADOS" (inicio)
   ============================================================ */
.carrusel { position: relative; }
.carrusel-pista {
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 6px var(--borde-env) 18px;
  scroll-padding-inline: var(--borde-env);
}
.carrusel-pista::-webkit-scrollbar { display: none; }
/* modo cinta: sin enganche, porque el enganche pelea contra el desfile
   continuo y lo hace temblar en cada tarjeta */
.carrusel-pista.carrusel-cinta { scroll-snap-type: none; }
.carrusel-item { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
.carrusel-item .producto { height: 100%; }
.carrusel-flecha {
  position: absolute; top: 40%; translate: 0 -50%; z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--linea);
  display: grid; place-items: center; font-size: 1.3rem; color: var(--verde);
  box-shadow: var(--sombra);
  transition: background .2s, color .2s, border-color .2s;
}
.carrusel-flecha:hover { background: var(--verde); color: var(--crema); border-color: var(--verde); }
.carrusel-prev { left: 6px; }
.carrusel-next { right: 6px; }
.carrusel-puntos { display: flex; justify-content: center; gap: 8px; margin-top: var(--e2); }
.punto-carrusel {
  width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte);
  transition: background .25s, scale .25s var(--resorte);
}
.punto-carrusel.activo { background: var(--verde); scale: 1.3; }

@media (min-width: 1000px) {
  .carrusel-item { flex-basis: calc(25% - clamp(12px, 1.6vw, 22px) * 3 / 4); }
}
@media (max-width: 720px) {
  .carrusel-flecha { display: none; }
  .carrusel-item { flex-basis: 82%; }
  .banco-tarjeta { flex-basis: 82%; }
  .promo-media { aspect-ratio: 16 / 9; }
  .promo-banner-cuerpo { flex-wrap: wrap; }
  .promo-banner-cuerpo .btn-cerrar { margin-left: 0; }
}

/* ============================================================
   11 · CÓMO COMPRAR (esto sí es una secuencia: va numerado)
   ============================================================ */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); counter-reset: paso; }
.paso {
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r-lg); padding: var(--e5);
  position: relative;
  transition: translate .4s var(--resorte), border-color .3s, box-shadow .3s;
}
/* lengüeta de color que se dibuja al pasar por arriba */
.paso::before {
  content: ''; position: absolute; top: 0; left: var(--e5); right: var(--e5); height: 5px;
  background: linear-gradient(90deg, var(--lima), var(--amarillo));
  border-radius: 0 0 var(--r-full) var(--r-full);
  scale: 0 1; transform-origin: left;
  transition: scale .5s var(--suave);
}
.paso:hover { translate: 0 -7px; border-color: var(--amarillo); box-shadow: var(--sombra); }
.paso:hover::before { scale: 1 1; }
/* la línea punteada que une los pasos */
.paso:not(:last-child)::after {
  content: ''; position: absolute; top: 46px;
  right: calc(var(--e4) * -1); width: var(--e4); height: 2px;
  background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 5px, transparent 5px 10px);
}
.paso-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--amarillo); color: #755516;
  font-family: var(--titulo); font-weight: 600; font-size: var(--t-md);
  display: grid; place-items: center; margin-bottom: var(--e3);
  box-shadow: 0 3px 0 0 color-mix(in oklab, var(--amarillo) 55%, #a8760c);
  transition: rotate .4s var(--resorte);
}
.paso:hover .paso-num { rotate: -14deg; }
.paso h3 { font-size: var(--t-md); color: var(--verde); margin-bottom: 6px; }
.paso p { color: var(--tinta-2); font-size: var(--t-sm); }

/* ============================================================
   12 · EL LOCAL
   ============================================================ */
.local {
  background: var(--verde); color: var(--crema);
  border-radius: var(--r-xl); padding: clamp(30px, 4.5vw, 58px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 52px);
  position: relative; overflow: hidden;
}
/* rueda de rayos que gira lento detrás del texto */
.local::before {
  content: ''; position: absolute; z-index: 0;
  width: 520px; aspect-ratio: 1; top: -180px; right: -160px;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in oklab, var(--lima) 15%, transparent) 0deg 9deg,
    transparent 9deg 18deg);
  border-radius: 50%;
  animation: girar 90s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 64%);
  mask-image: radial-gradient(circle, #000 22%, transparent 64%);
}
.local::after {
  content: ''; position: absolute; z-index: 0;
  width: 260px; aspect-ratio: 1; bottom: -120px; left: -80px;
  background: color-mix(in oklab, var(--lima) 26%, transparent);
  border-radius: 50%; filter: blur(6px);
  animation: flotar2 16s ease-in-out infinite;
}
.local > * { position: relative; z-index: 1; }
.local h2 { font-size: var(--t-2xl); margin-bottom: var(--e3); }
.local p { opacity: .88; }
.local h3 { font-size: var(--t-md); margin-bottom: var(--e2); }

.horarios { list-style: none; margin-top: var(--e4); }
.horarios li {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: 11px 0; font-size: var(--t-sm);
  border-bottom: 1px solid color-mix(in oklab, var(--crema) 20%, transparent);
}
.horarios li.hoy {
  color: var(--amarillo); font-weight: 700;
  padding-left: var(--e3);
  border-left: 3px solid var(--amarillo);
  background: color-mix(in oklab, var(--amarillo) 10%, transparent);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.datos-local { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e4); }
.dato { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t-base); }
.dato span:first-child { font-size: 1.25rem; line-height: 1.3; }

/* ============================================================
   13 · PIE
   ============================================================ */
.pie {
  padding: var(--e7) 0 var(--e6);
  border-top: 2px solid var(--linea); margin-top: var(--e7);
  position: relative; overflow: hidden;
}
.pie-grilla {
  display: flex; justify-content: space-between; gap: var(--e5);
  flex-wrap: wrap; align-items: center;
}
.pie small { color: var(--tinta-3); font-size: var(--t-xs); }
.pie-links { display: flex; gap: var(--e5); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); flex-wrap: wrap; }
.pie-links a { position: relative; padding-bottom: 2px; }
.pie-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--lima); scale: 0 1; transform-origin: right;
  transition: scale .3s var(--suave);
}
.pie-links a:hover { color: var(--verde); }
.pie-links a:hover::after { scale: 1 1; transform-origin: left; }

/* ============================================================
   14 · CARRITO LATERAL
   ============================================================ */
.telon {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 52, 18, .58);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.telon.abierto { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--fondo); z-index: 100;
  display: flex; flex-direction: column;
  /* se cierra más rápido de lo que abre: al salir, la persona ya decidió */
  translate: 100% 0; transition: translate .28s var(--salida);
  box-shadow: -24px 0 70px -30px rgba(0, 0, 0, .6);
}
.panel.abierto { translate: 0 0; transition: translate var(--d-panel) var(--cajon); }

.panel-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4) var(--e5);
  padding-top: calc(var(--e4) + env(safe-area-inset-top));
  border-bottom: 2px solid var(--linea); flex-shrink: 0;
}
.panel-cabeza h2 { font-size: var(--t-lg); color: var(--verde); }
.btn-cerrar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--linea);
  font-size: 1.05rem; display: grid; place-items: center; flex-shrink: 0;
  transition: rotate .35s var(--resorte), background .25s, color .25s, border-color .25s;
}
.btn-cerrar:hover { rotate: 90deg; background: var(--coral); color: #fff; border-color: var(--coral); }

.panel-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e4) var(--e5); }
.panel-pie {
  padding: var(--e4) var(--e5);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  border-top: 2px solid var(--linea); background: var(--papel); flex-shrink: 0;
}

.linea-carrito {
  display: grid; grid-template-columns: 76px 1fr auto; gap: var(--e3);
  padding: var(--e4) 0; border-bottom: 1px solid var(--linea);
  animation: subir .45s var(--suave) both;
}
.linea-carrito img {
  width: 76px; height: 76px; border-radius: var(--r-sm);
  object-fit: cover; background: var(--verde-suave);
}
.linea-nombre { font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.linea-precio { font-size: var(--t-xs); color: var(--tinta-2); margin-top: 2px; }
.linea-total { font-family: var(--titulo); font-weight: 600; color: var(--verde); white-space: nowrap; }

.contador {
  display: inline-flex; align-items: center; gap: 3px; margin-top: var(--e2);
  background: var(--verde-suave); border-radius: var(--r-full); padding: 3px;
}
.contador button {
  width: 32px; height: 32px; border-radius: 50%; background: var(--papel);
  font-weight: 700; font-size: 1.05rem; display: grid; place-items: center;
  box-shadow: var(--sombra-xs);
  transition: scale .25s var(--resorte), background .2s, color .2s;
}
.contador button:hover { background: var(--lima); color: var(--verde-hondo); scale: 1.14; }
.contador button:active { scale: .9; }
.contador span { min-width: 32px; text-align: center; font-weight: 700; font-size: var(--t-sm); }

.btn-quitar {
  font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e2);
  border-bottom: 1px solid currentColor; line-height: 1.4;
  transition: color .2s;
}
.btn-quitar:hover { color: var(--coral); }

.resumen { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.resumen-fila { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); color: var(--tinta-2); }
.resumen-fila.total {
  font-family: var(--titulo); font-size: var(--t-lg); font-weight: 600; color: var(--verde);
  padding-top: var(--e2); border-top: 2px dashed var(--linea);
}

.aviso-envio {
  background: var(--amarillo-suave);
  border: 1.5px solid color-mix(in oklab, var(--amarillo) 42%, transparent);
  border-radius: var(--r); padding: var(--e3) var(--e4);
  font-size: var(--t-sm); color: color-mix(in oklab, var(--amarillo) 40%, #4a3406);
  margin-bottom: var(--e4); font-weight: 600;
}
.barra-progreso {
  height: 9px; background: var(--papel); border-radius: var(--r-full);
  overflow: hidden; margin-top: var(--e2);
  border: 1px solid color-mix(in oklab, var(--amarillo) 30%, transparent);
}
.barra-progreso i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--lima), var(--amarillo));
  background-size: 200% 100%;
  transition: width .7s var(--suave);
  animation: escribir 3s linear infinite;
}

/* ============================================================
   15 · MODALES
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 110; display: none;
  align-items: center; justify-content: center; padding: var(--e4);
  background: rgba(28, 52, 18, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: aparecer .25s both;
}
.modal.abierto { display: flex; }
.modal-caja {
  background: var(--fondo); border-radius: var(--r-xl);
  width: min(920px, 100%); max-height: min(92vh, 920px);
  overflow: hidden; display: flex; flex-direction: column;
  animation: entrarModal .32s var(--entrada) both;
  box-shadow: var(--sombra-lg);
}
.modal-caja.angosta { width: min(580px, 100%); }
.modal-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: var(--e5); }

/* ---- ficha de producto ---- */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }
.ficha-fotos { display: flex; flex-direction: column; gap: var(--e2); }
.ficha-principal {
  aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--verde-suave); position: relative;
}
.ficha-principal img {
  width: 100%; height: 100%; object-fit: cover;
  animation: aparecer .4s both;
}
.ficha-mini { display: flex; gap: var(--e2); flex-wrap: wrap; }
.ficha-mini img {
  width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover;
  border: 2.5px solid transparent; cursor: pointer;
  transition: border-color .25s, translate .25s var(--resorte);
}
.ficha-mini img:hover { translate: 0 -3px; }
.ficha-mini img.activa { border-color: var(--lima); }
.ficha h2 { font-size: var(--t-xl); color: var(--verde); margin: var(--e2) 0 var(--e3); }
.ficha-desc { color: var(--tinta-2); margin: var(--e3) 0; font-size: var(--t-sm); }
.ficha-etis { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--e3); }

/* ============================================================
   16 · CHECKOUT
   ============================================================ */
.pasos-barra { display: flex; gap: 6px; padding: var(--e4) var(--e5) 0; }
.pasos-barra i {
  flex: 1; height: 7px; border-radius: var(--r-full);
  background: var(--linea); position: relative; overflow: hidden;
}
.pasos-barra i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--lima), var(--amarillo));
  scale: 0 1; transform-origin: left;
  transition: scale .5s var(--suave);
}
.pasos-barra i.ok::after { scale: 1 1; }

.paso-form { animation: subir .42s var(--suave) both; }
.paso-form h2 { font-size: var(--t-xl); color: var(--verde); margin-bottom: 4px; }
.paso-form > p { color: var(--tinta-2); margin-bottom: var(--e5); font-size: var(--t-sm); }

/* ---- campos propios ---- */
.campo { margin-bottom: var(--e4); }
.campo label { display: block; font-weight: 700; font-size: var(--t-sm); margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; border: 2px solid var(--linea); border-radius: var(--r);
  background: var(--papel); padding: 14px 16px; min-height: 52px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.campo input:hover, .campo textarea:hover { border-color: var(--linea-fuerte); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--lima);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--lima) 22%, transparent);
}
.campo textarea { min-height: 96px; resize: none; overflow: hidden; }
.campo .ayuda { font-size: var(--t-xs); color: var(--tinta-3); margin-top: 5px; }
.campo.error input, .campo.error textarea, .campo.error select {
  border-color: var(--coral); animation: tiemble .4s;
}
.mensaje-error {
  color: var(--coral-hondo); font-size: var(--t-xs); font-weight: 700; margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.mensaje-error::before { content: '!'; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-size: .7rem; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }

/* pista de que la fila de días se desliza */
.campo:has(.dias) { position: relative; }
.campo:has(.dias)::after {
  content: ''; position: absolute; right: 0; bottom: 6px; width: 44px; height: 70px;
  background: linear-gradient(to right, transparent, var(--fondo));
  pointer-events: none;
}

/* ---- opciones (radios dibujados por nosotros) ---- */
.opciones { display: grid; gap: var(--e2); }
.opcion {
  display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer;
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r);
  padding: var(--e4);
  transition: border-color .25s, translate .25s var(--resorte), background .25s, box-shadow .25s;
}
.opcion:hover { border-color: var(--lima); translate: 4px 0; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-marca {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--linea-fuerte);
  flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; transition: border-color .25s;
}
.opcion-marca::after {
  content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--lima);
  scale: 0; transition: scale .3s var(--resorte);
}
.opcion input:checked ~ .opcion-marca { border-color: var(--lima); }
.opcion input:checked ~ .opcion-marca::after { scale: 1; }
.opcion input:focus-visible ~ .opcion-marca { outline: 3px solid var(--verde); outline-offset: 3px; }
.opcion:has(input:checked) {
  border-color: var(--lima); background: var(--lima-suave);
  box-shadow: 0 3px 0 0 color-mix(in oklab, var(--lima) 40%, transparent);
}
.opcion-texto b { display: block; font-size: var(--t-base); }
.opcion-texto span { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4; }
.opcion-extra {
  margin-left: auto; font-family: var(--titulo); font-weight: 600;
  color: var(--verde); white-space: nowrap; align-self: center;
}

/* ---- días y franjas ---- */
.dias {
  display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2);
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.dias::-webkit-scrollbar { display: none; }
.dia {
  flex-shrink: 0; min-width: 88px; text-align: center; padding: var(--e3) var(--e2);
  border: 2px solid var(--linea); border-radius: var(--r); background: var(--papel);
  scroll-snap-align: start;
  transition: translate .25s var(--resorte), border-color .25s, background .25s, color .25s;
}
.dia:hover { translate: 0 -4px; border-color: var(--lima); }
.dia.activo { background: var(--verde); border-color: var(--verde); color: var(--crema); box-shadow: 0 3px 0 0 var(--verde-hondo); }
.dia b { display: block; font-size: var(--t-sm); }
.dia span { font-size: var(--t-xs); opacity: .75; }

.franjas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.franja {
  padding: 11px 18px; border: 2px solid var(--linea); border-radius: var(--r-full);
  background: var(--papel); font-size: var(--t-sm); font-weight: 600;
  transition: translate .25s var(--resorte), border-color .25s, background .25s, color .25s;
}
.franja:hover { translate: 0 -3px; border-color: var(--lima); }
.franja.activo { background: var(--verde); border-color: var(--verde); color: var(--crema); }

.repaso {
  background: var(--papel); border: 2px solid var(--linea);
  border-radius: var(--r); padding: var(--e4); margin-bottom: var(--e4);
}
.repaso h4 { font-size: var(--t-xs); letter-spacing: .05em; color: var(--tinta-3); margin-bottom: var(--e2); }
.repaso-fila { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); padding: 4px 0; }
.repaso-fila span:last-child { text-align: right; font-weight: 600; }

/* recuadro informativo "Promos bancarias de hoy" (paso de pago): no toca montos */
.bancos-hoy-caja {
  background: var(--lima-suave); border: 1.5px solid color-mix(in oklab, var(--lima) 40%, transparent);
  border-radius: var(--r); padding: var(--e3) var(--e4); margin-top: var(--e4);
}
.bancos-hoy-caja h3 { font-size: var(--t-sm); color: var(--verde); margin-bottom: var(--e3); }
.bancos-hoy-lista { display: flex; flex-direction: column; gap: var(--e3); }
.banco-hoy-fila { display: flex; align-items: center; gap: var(--e3); }
.banco-placa-chica {
  flex-shrink: 0; width: 56px; height: 34px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-xs); text-align: center;
}
.banco-placa-chica.banco-placa-logo { background: var(--papel); border: 1px solid var(--linea); padding: 3px; }
.banco-placa-chica img { max-width: 100%; max-height: 100%; object-fit: contain; }
.banco-hoy-texto { display: flex; flex-direction: column; font-size: var(--t-sm); }
.banco-hoy-texto b { color: var(--verde); }
.banco-hoy-texto span { font-size: var(--t-xs); color: var(--tinta-2); }

.pie-modal {
  display: flex; gap: var(--e3); padding: var(--e4) var(--e5);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  border-top: 2px solid var(--linea); background: var(--papel); flex-shrink: 0;
}
.pie-modal .boton { flex: 1; }
.btn-atras {
  background: none; color: var(--tinta-2); font-weight: 700;
  padding: 15px 22px; border-radius: var(--r-full);
  transition: background .2s, color .2s;
}
.btn-atras:hover { background: var(--verde-suave); color: var(--verde); }

/* ---- confirmación ---- */
.listo { text-align: center; padding: var(--e3) 0 var(--e2); }
.tilde { width: 104px; height: 104px; margin: 0 auto var(--e4); }
.tilde circle {
  fill: none; stroke: var(--lima); stroke-width: 5;
  stroke-dasharray: 290; stroke-dashoffset: 290;
  animation: tildeDibujo .8s var(--suave) forwards;
}
.tilde path {
  fill: none; stroke: var(--verde); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: tildeDibujo .5s .6s var(--suave) forwards;
}
.listo h2 { font-size: var(--t-xl); color: var(--verde); margin-bottom: var(--e2); }
.listo p { color: var(--tinta-2); margin-bottom: var(--e2); font-size: var(--t-sm); }
.numero-pedido {
  display: inline-block; font-family: var(--titulo); font-weight: 600; font-size: var(--t-lg);
  background: var(--amarillo-suave); color: var(--verde);
  border: 2px dashed var(--amarillo);
  padding: 10px 26px; border-radius: var(--r-full); margin: var(--e3) 0 var(--e4);
  animation: pop .5s .5s var(--resorte) both;
}

.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.confeti i {
  position: absolute; width: 11px; height: 16px; border-radius: 3px;
  animation: caerConfeti linear forwards;
}

/* ============================================================
   17 · AVISOS, VOLADOR Y WHATSAPP
   ============================================================ */
.avisos {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%; translate: -50% 0; z-index: 130;
  display: flex; flex-direction: column; gap: var(--e2); align-items: center;
  pointer-events: none;
}
.aviso {
  background: var(--verde-hondo); color: var(--crema);
  font-weight: 600; font-size: var(--t-sm);
  padding: 14px 24px; border-radius: var(--r-full);
  box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: var(--e2);
  animation: entrarAviso .3s var(--entrada) both;
  border: 1.5px solid color-mix(in oklab, var(--lima) 40%, transparent);
}
.aviso.saliendo { animation: aparecer .2s var(--salida) reverse both; }

.volador {
  position: fixed; width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  z-index: 140; pointer-events: none; box-shadow: var(--sombra-lg);
  border: 3px solid var(--papel);
  /* el vuelo lo maneja tienda.js con animate(), en arco */
}

.wsp-flotante {
  position: fixed; z-index: 70;
  bottom: calc(22px + env(safe-area-inset-bottom)); right: 22px;
  width: 60px; height: 60px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; font-size: 1.6rem;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6);
  transition: scale var(--d-hover) var(--resorte), rotate var(--d-hover) var(--resorte);
  /* backwards: con both el scale del hover no se aplicaba nunca */
  animation: pop .5s 1.2s var(--entrada) backwards;
}
/* onda que llama la atención tres veces al llegar y después se calla;
   un halo girando para siempre compite con los productos */
.wsp-flotante::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: #25d366; opacity: 0;
  animation: llamar 1.6s 1.8s var(--salida) 3;
}
.wsp-flotante:hover { scale: 1.08; rotate: 8deg; }
.wsp-flotante:active { scale: .95; }

/* ============================================================
   18 · RESPONSIVO
   ============================================================ */
html { scroll-padding-top: calc(var(--alto-cab, var(--header)) + 20px); }
.menu-movil { top: var(--alto-cab, var(--header)); }

/* con el carrito o un modal abiertos (JS pone .sin-scroll en el body) el
   globo de WhatsApp queda tapado igual por el panel/telón, pero lo ocultamos
   posta: así no se ve un parpadeo mientras el panel se desliza y no queda
   como foco fantasma para teclado/lector de pantalla */
body.sin-scroll .wsp-flotante {
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--salida);
}

@media (max-width: 1100px) {
  .beneficios-grilla { grid-template-columns: repeat(2, 1fr); }
  .cat-grilla { grid-template-columns: repeat(3, 1fr); }
  .buscador-cab { max-width: 460px; }
}

@media (max-width: 920px) {
  .portada-grilla { grid-template-columns: 1fr; gap: var(--e6); }
  .portada-arte { max-width: 420px; margin-inline: auto; width: 100%; }
  .local { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .paso:not(:last-child)::after { display: none; }
  .ficha { grid-template-columns: 1fr; }
  .cat-grilla { grid-template-columns: repeat(2, 1fr); }

  /* el buscador baja a su propia fila: en el celular es lo más usado */
  .cabecera-fila { flex-wrap: wrap; padding-bottom: var(--e3); row-gap: var(--e3); }
  .buscador-cab { order: 9; flex: 1 0 100%; max-width: none; margin-inline: 0; margin-top: 2px; }
  .buscador-cab input { height: 46px; }
}

@media (max-width: 720px) {
  :root { --header: 74px; }
  .btn-menu { display: grid; }
  .estado-local { display: none; }
  .marca-lema { display: none; }
  /* lockup más chico: deja más aire alrededor del logo, el nombre y el
     carrito en vez de que los tres peleen por el mismo ancho angosto */
  .marca-logo { width: 46px; height: 46px; }
  .marca-nombre { font-size: 1.4rem; }
  .cabecera-fila { padding-block: 5px; }
  .btn-carrito { padding: 12px 16px; }
  .btn-carrito .texto-carrito { display: none; }
  .seccion-cabeza { margin-bottom: var(--e5); }
  .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); }
  .producto-cuerpo { padding: var(--e3); }
  .btn-agregar { padding: 12px; }
  /* la fila de categorías y el orden ya no compiten por el mismo ancho:
     los chips ocupan todo el ancho (su propio renglón, con scroll) y el
     orden queda debajo, compacto y a la derecha */
  .filtros-fila { flex-wrap: wrap; row-gap: var(--e2); gap: var(--e2); }
  .chips { flex: 1 1 100%; order: 1; }
  .selector { order: 2; margin-left: auto; }
  .selector-boton { padding: 0 13px; }
  .selector-boton .texto-orden { display: none; }
  .dos-columnas { grid-template-columns: 1fr; }

  /* con 16 categorías, 2 columnas son 8 filas: en el celular se vuelve una
     fila que se desliza, igual que los chips de filtro de más abajo */
  .cat-grilla {
    display: flex; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; gap: var(--e3); padding: 2px 2px 6px;
    --mascara: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
    -webkit-mask-image: var(--mascara); mask-image: var(--mascara);
  }
  .cat-grilla::-webkit-scrollbar { display: none; }
  .cat-tarjeta { flex: 0 0 auto; width: 172px; scroll-snap-align: start; }

  .linea-carrito { grid-template-columns: 64px 1fr auto; }
  .linea-carrito img { width: 64px; height: 64px; }
  .local { border-radius: var(--r-lg); }

  /* los modales suben desde abajo, como una hoja */
  .modal { padding: 0; align-items: flex-end; }
  .modal-caja {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 94vh; width: 100%;
    animation: subirHoja var(--d-panel) var(--cajon) both;
  }
  .modal-caja::before {
    content: ''; display: block; flex-shrink: 0;
    width: 44px; height: 5px; border-radius: var(--r-full);
    background: var(--linea-fuerte); margin: 10px auto 0;
  }
  .modal-cuerpo { padding: var(--e4); }
  .pie-modal { padding: var(--e3) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom)); }
  .pasos-barra { padding: var(--e3) var(--e4) 0; }
  .panel { width: 100%; }
  .panel-cuerpo, .panel-pie, .panel-cabeza { padding-inline: var(--e4); }
  .wsp-flotante { width: 54px; height: 54px; font-size: 1.4rem; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
  /* el aviso va abajo, como en escritorio (arriba tapaba el buscador y el
     encabezado): lo despegamos lo suficiente del piso para que no choque
     con el botón de WhatsApp ni con el pie del carrito o del checkout */
  .avisos {
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: calc(100% - var(--borde-env) * 2);
    align-items: center;
  }
  .aviso { max-width: 100%; text-align: center; }

  /* Portada en el celular: afuera el collage.
     Las fotos flotando, el aro girando y las hojas en órbita se amontonaban
     en 390 px, tapaban el sello y el movimiento distraía de lo único que
     importa arriba de todo: qué vende el local y el botón para ver productos.
     Queda solo el sello de envío gratis, centrado y quieto. */
  .aro-gira, .orbita, .tarjeta-flotante { display: none; }
  .portada-arte {
    aspect-ratio: auto; max-height: none; max-width: none;
    animation: none; margin-top: var(--e2);
    display: flex; justify-content: center;
  }
  .sello-aro {
    position: static; width: clamp(128px, 38vw, 160px);
    animation: none;                 /* sin el golpe del sello estampado */
  }
  /* 60 s era una vuelta por minuto: a simple vista el sello parecía
     trabado. 26 s se lee girando de verdad sin marear. */
  .aro-texto { animation-duration: 26s; }
  .sello { transition: none; }
}

/* dedos, no cursores: subimos los blancos de toque a 44px y evitamos que
   iOS haga zoom automático al enfocar un campo con letra chica */
@media (pointer: coarse) {
  .buscador-cab input, .campo input, .campo textarea, .campo select {
    font-size: 16px;
  }
  .contador button { width: 44px; height: 44px; }
  .contador span { min-width: 36px; }
  .btn-limpiar { width: 40px; height: 40px; }
  .btn-cerrar { width: 44px; height: 44px; }
  .chip { padding: 12px 18px; }
  .dia, .franja { padding-block: 13px; }
}

@media (max-width: 430px) {
  .beneficios-grilla { grid-template-columns: 1fr; }
  .cat-tarjeta { min-height: 132px; padding: var(--e4) var(--e3); }
  .cat-emoji { font-size: 2rem; }
  .pie-grilla { flex-direction: column; align-items: flex-start; gap: var(--e3); }
  .portada-botones .boton { flex: 1 0 100%; }

  /* los links del pie medían 23 px de alto: con el dedo se erraba seguido.
     Con el padding quedan en 44, que es el mínimo cómodo para tocar. */
  .pie-links { gap: var(--e2) var(--e4); width: 100%; }
  .pie-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie-arrepentimiento { display: inline-flex; align-items: center; min-height: 44px; }
  /* el botón de WhatsApp flotante no tiene que taparle el pie a nadie */
  .pie { padding-bottom: calc(var(--e6) + 64px); }
  .btn-cerrar { width: 44px; height: 44px; }
}

/* mismo criterio en todo lo que se toca con el dedo */
@media (hover: none) and (pointer: coarse) {
  .btn-cerrar { width: 44px; height: 44px; }
}

@media (max-width: 340px) {
  .grilla-productos { grid-template-columns: 1fr; }
  .beneficio { padding: var(--e3); }
}

/* pantallas grandes: el catálogo aprovecha el ancho sin estirar el texto */
@media (min-width: 1500px) {
  :root { --ancho: 1400px; }
}

/* celular acostado: los modales no tapan todo */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-caja { max-height: 98vh; }
  .portada-arte { display: none; }
}

/* pantallas finas y táctiles: el hover no existe, sacamos los efectos */
@media (hover: none) {
  .lupa-ver { display: none; }
  .producto:hover { translate: 0 0; }
  .producto:active { scale: .985; }
  [data-tip]::after { display: none; }
  /* en el táctil el hover queda "pegado" después del toque: lo anulamos
     y dejamos solo la respuesta al apretar */
  .beneficio:hover, .cat-tarjeta:hover, .paso:hover, .chip:hover,
  .dia:hover, .franja:hover, .opcion:hover, .ficha-mini img:hover { translate: 0 0; rotate: 0deg; }
  .cat-tarjeta:hover::before { animation: none; opacity: 0; }
  .cat-tarjeta:active, .beneficio:active, .chip:active,
  .dia:active, .franja:active, .opcion:active { scale: .97; }
  .cat-tarjeta, .beneficio, .chip, .dia, .franja, .opcion { transition-property: scale, background, color, border-color, box-shadow; transition-duration: var(--d-toque); }
  .wsp-flotante:hover { scale: 1; rotate: 0deg; }
}

/* ============================================================
   19 · MENOS MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; translate: 0 0; filter: none; }
  .producto-foto img { opacity: 1; }
  .producto-foto::before { display: none; }
}

/* ============================================================
   20 · IMPRESIÓN
   ============================================================ */
@media print {
  .cabecera, .tira-aviso, .wsp-flotante, .panel, .telon, .modal,
  .barra-filtros, .avisos, .progreso-lectura, .portada-arte { display: none !important; }
  body { background: #fff; }
  .producto { break-inside: avoid; }
}

/* ============================================================
   21 · PÁGINAS LEGALES (arrepentimiento, privacidad, términos)
   Son texto largo para leer, no vidriera de productos: por eso
   angostamos la columna a ~70ch y no usamos .revelar (necesita el
   observer de tienda.js, que estas páginas no cargan).
   ============================================================ */
.legal { padding-top: clamp(30px, 5vw, 52px); padding-bottom: var(--e7); }
.legal-ancho { max-width: 70ch; margin-inline: auto; }
.legal-fecha { color: var(--tinta-3); font-size: var(--t-sm); margin-bottom: var(--e4); }
.legal h1 { font-size: var(--t-2xl); color: var(--verde); margin-bottom: var(--e5); }
.legal h2 { font-size: var(--t-lg); color: var(--verde); margin-top: var(--e7); margin-bottom: var(--e3); }
.legal p, .legal li { color: var(--tinta-2); margin-bottom: var(--e3); }
.legal ul, .legal ol { padding-left: var(--e5); margin-bottom: var(--e4); }
.legal strong { color: var(--tinta); }
.legal a { color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* caja destacada: plazos, pasos a seguir, datos de contacto */
.legal-aviso {
  background: var(--verde-suave); border: 2px solid var(--linea);
  border-radius: var(--r); padding: var(--e4) var(--e5);
  margin: var(--e5) 0;
}
.legal-aviso p:last-child, .legal-aviso ul:last-child { margin-bottom: 0; }

.legal-datos { list-style: none; padding-left: 0; display: grid; gap: var(--e2); }
.legal-datos li { display: flex; gap: var(--e2); align-items: baseline; }

.legal-form { margin-top: var(--e5); }
.legal-form .boton { width: 100%; }

/* encabezado angosto de estas páginas: sin buscador ni carrito,
   solo la marca y el volver a Inicio/Productos */
.cabecera-simple .cabecera-fila { justify-content: space-between; flex-wrap: wrap; row-gap: var(--e3); }
.cabecera-simple .nav-principal { flex-wrap: wrap; }

/* el link al botón de arrepentimiento tiene que notarse: es una
   obligación legal, no puede quedar como letra chica más */
.pie-arrepentimiento {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--amarillo-suave); border: 2px solid var(--amarillo);
  color: var(--tinta); font-weight: 700; font-size: var(--t-sm);
  padding: 10px 22px; border-radius: var(--r-full);
  margin: var(--e4) 0;
}
.pie-arrepentimiento:hover { background: var(--amarillo); }


/* ============================================================
   COLORES QUE SIGUEN AL TEMA (solo donde color-mix existe)
   ------------------------------------------------------------
   Arriba, cada una de estas reglas ya tiene su color fijo. Acá se
   recalculan con color-mix para que acompañen el tema que elija el dueño.

   Va en un @supports y no repitiendo la propiedad, y la razón es sutil:
   una declaración que lleva var() adentro se da por VÁLIDA al leerla, y el
   error aparece recién al sustituir la variable. Para ese momento el
   navegador ya descartó la línea anterior, así que la propiedad se queda
   sin valor: el fondo desaparece. El @supports decide antes de todo eso.
   ============================================================ */
@supports (color: color-mix(in oklab, red, blue)) {
  .cabecera { background: color-mix(in oklab, var(--fondo) 86%, transparent); }
  .barra-filtros { background: color-mix(in oklab, var(--fondo) 92%, transparent); }
  .lupa-ver { background: color-mix(in oklab, var(--verde-hondo) 42%, transparent); }
  .telon { background: color-mix(in oklab, var(--verde-hondo) 58%, transparent); }
  .modal { background: color-mix(in oklab, var(--verde-hondo) 62%, transparent); }
  .estado-local.cerrado {
    background: color-mix(in oklab, var(--coral) 14%, var(--fondo));
    border-color: color-mix(in oklab, var(--coral) 34%, transparent);
  }
  .sello, .paso-num { color: color-mix(in oklab, var(--amarillo) 30%, #3d2a04); }
}