/* =========================================================
   SOMOS PASTAS · WEB PÚBLICA
   Verde profundo + crema. Artesanal, argentino, apetitoso.

   La idea del flujo: el cliente NO elige un combo.
   Elige una PASTA, y el precio ya viene puesto.
   Una sola puerta, cero confusión.
   ========================================================= */

:root {
  /* ---- Marca ---- */
  --verde:      #1c3a2e;
  --verde-osc:  #12261d;
  --verde-cla:  #2d5544;
  --crema:      #f7f3e8;
  --crema-2:    #ede6d6;
  --papel:      #ffffff;
  --masa:       #e6dac2;

  --tinta:      #1a2620;
  --tinta-2:    #5c6d64;
  --tinta-3:    #94a39a;

  --tomate:     #d94f28;   /* Acción */
  --tomate-osc: #b03a18;
  --oro:        #c9a227;   /* Destacados */
  --oro-cla:    #e8c860;

  --linea:      #e2dac9;
  --linea-2:    #cfc4ae;

  --r:      14px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-full: 999px;

  --sh-1: 0 2px 8px rgba(28, 58, 46, .06);
  --sh-2: 0 10px 30px rgba(28, 58, 46, .12);
  --sh-3: 0 24px 64px rgba(28, 58, 46, .22);
  --sh-v: 0 10px 30px rgba(28, 58, 46, .35);

  /* ---- Sistema de movimiento ----
     Pocas curvas, timings de una escala. Coherencia estilo Linear/Stripe.
     · fast   (120ms): feedback inmediato (hover, active)
     · base   (200ms): la mayoría de las transiciones
     · slow   (320ms): entradas de paneles, cambios de vista
     · ease:   salida suave estándar (la que más se usa)
     · bounce: para elementos que "aparecen" con carácter
     · smooth: entradas/salidas parejas (in-out) */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --t-lento: 500ms;   /* movimientos amplios: hero, parallax */

  --ease:   cubic-bezier(.2, .8, .2, 1);      /* salida decelerada */
  --bounce: cubic-bezier(.34, 1.56, .64, 1);  /* con rebote sutil */
  --smooth: cubic-bezier(.4, 0, .2, 1);       /* in-out parejo */

  --nav-h:   72px;
  --carrito: 410px;
}

/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: var(--crema);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
html { overflow-x: hidden; max-width: 100vw; }
/* Cuando hay panel abierto (carrito/armador), bloqueamos el scroll
   del fondo sin que salte la página. */
body.trabado { overflow: hidden; position: relative; width: 100%; }

h1, h2, h3, .serif {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
/* Blindaje: un SVG sin width/height se estira infinito si nadie lo frena.
   Fue exactamente lo que pasó con el logo. Nunca más. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg { max-width: 100%; }
ul { list-style: none; }
a  { color: inherit; text-decoration: none; }

::selection { background: var(--verde); color: var(--crema); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--crema-2); }
::-webkit-scrollbar-thumb {
  background: var(--linea-2); border-radius: 20px; border: 3px solid var(--crema-2);
}

/* =========================================================
   NAVBAR — verde, como tu web
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 90;
  height: var(--nav-h);
  background: var(--verde);
  display: flex; align-items: center;
  gap: 16px; padding: 0 26px;
  transition: box-shadow var(--t-slow) var(--ease);
}
.nav.pegada { box-shadow: var(--sh-v); }

.nav .marca { display: flex; align-items: center; gap: 13px; }
.nav .marca img {
  width: 46px; height: 46px;
  min-width: 46px; max-width: 46px;
  min-height: 46px; max-height: 46px;
  border-radius: 50%;
  background: var(--crema);
  object-fit: contain;
  flex-shrink: 0;
}
.nav .marca .txt { line-height: 1.05; }
.nav .marca .n {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 800;
  color: var(--crema);
  letter-spacing: -.4px;
}
.nav .marca .s {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--oro-cla);
  text-transform: uppercase;
}
.nav .grow { flex: 1; }

/* Píldora abierto / cerrado */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700;
  border: 1.5px solid;
  white-space: nowrap;
}
.estado.abierto {
  background: rgba(120, 220, 150, .14);
  color: #8fe0a8;
  border-color: rgba(143, 224, 168, .35);
}
.estado.cerrado {
  background: rgba(255, 255, 255, .08);
  color: #e8c2a8;
  border-color: rgba(232, 194, 168, .3);
}
.estado .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado.abierto .punto { animation: latido 2s infinite; }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 224, 168, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(143, 224, 168, 0); }
}

.nav-cart {
  display: flex; align-items: center; gap: 10px;
  background: var(--crema);
  color: var(--verde);
  padding: 12px 20px;
  border-radius: var(--r-full);
  font-weight: 800; font-size: 14px;
  transition: var(--t-base) var(--ease);
}
.nav-cart:hover { background: var(--oro-cla); transform: translateY(-1px); }
.nav-cart .n {
  background: var(--tomate); color: #fff;
  min-width: 22px; height: 22px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; padding: 0 6px;
}
.nav-cart.late { animation: brinco .45s var(--bounce); }
@keyframes brinco { 50% { transform: scale(1.14); } }

/* =========================================================
   PORTADA — logo, presentación artesanal, "armar combo"
   ========================================================= */
/* PORTADA con foto de fondo.
   La foto se define en la variable --portada-foto (desde index.php).
   Encima va un degradado oscuro que garantiza que el texto se lea
   sin importar cómo sea la imagen. */
.portada {
  position: relative;
  background: var(--verde);
  color: var(--crema);
  padding: 66px 26px 78px;
  overflow: hidden;
  text-align: center;
}
.portada::before {
  content: '';
  position: absolute; inset: 0;
  /* Foto de fondo directa. Si querés cambiarla, reemplazá el archivo
     assets/img/portada.jpg — no hace falta tocar nada más. */
  background-image: url('../img/portada.jpg');
  background-size: cover;
  background-position: 62% 38%;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (max-width: 720px) {
  .portada::before { background-position: 58% 30%; }
}
.portada::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;    /* sobre el carrusel (z1), bajo el contenido (z3) */
  /* Más suave al centro para que se vea la foto, oscuro arriba y
     abajo donde va el texto. */
  background: linear-gradient(to bottom,
    rgba(12, 26, 20, .82) 0%,
    rgba(12, 26, 20, .34) 30%,
    rgba(12, 26, 20, .40) 58%,
    rgba(12, 26, 20, .88) 100%);
}

/* Textura de harina */
/* El patrón de puntitos va sobre el degradado, no pisa la foto */
.portada .damero-top::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 30px 30px;
  pointer-events: none;
}
/* Luz cálida — va dentro del contenido, NO pisa el degradado.
   (Antes era otro .portada::after y borraba el degradado entero.) */
.portada-in::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.portada-in { position: relative; z-index: 3; max-width: 800px; margin: 0 auto; }

/* --- Logo grande --- */
.logo-grande {
  width: 132px;  height: 132px;
  min-width: 132px; min-height: 132px;   /* Tope duro: no crece ni encogiendo */
  max-width: 132px; max-height: 132px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--crema);
  padding: 5px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
  animation: aparecer .7s var(--ease);
  overflow: hidden;                      /* Aunque el SVG mienta, no se sale */
  flex-shrink: 0;
}
.logo-grande img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(-18px) scale(.9); }
}

/* --- Cintita "desde 2016" --- */
.cintita {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid rgba(247, 243, 232, .28);
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px;
  color: rgba(247, 243, 232, .85);
  margin-bottom: 24px;
}
.cintita .em { font-size: 15px; }

.portada h1 {
  /* Escala mayor: el título es lo primero que se lee y tiene que
     ganarle a la foto de fondo. En mobile arranca chico para que
     palabras largas ("combinas") no se corten, y en desktop llega
     a 104: presencia de marca, no de párrafo. */
  font-size: clamp(40px, 8.4vw, 104px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
  color: #fff;
  /* que ninguna palabra larga se salga del borde */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Doble sombra: la cerrada da nitidez sobre la foto,
     la abierta separa el bloque del fondo. */
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .45),
    0 8px 44px rgba(0, 0, 0, .55);
  /* Balancea los saltos de línea en vez de dejar una palabra suelta */
  text-wrap: balance;
}
.portada h1 em {
  font-style: normal;
  color: var(--oro-cla);
  position: relative;
  display: inline-block;
}
/* Subrayado a mano */
.portada h1 em::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: .06em;
  height: .11em;
  background: rgba(201, 162, 39, .32);
  border-radius: 99px;
  transform: rotate(-.6deg);
}

.portada .bajada {
  font-size: clamp(17px, 1.5vw, 21px);
  text-wrap: balance;
  color: rgba(247, 243, 232, .78);
  max-width: 540px;
  margin: 0 auto 34px;
  font-weight: 500;
  line-height: 1.65;
}

/* --- Sellos de confianza --- */
.sellos {
  display: flex; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.sello {
  display: flex; align-items: center; gap: 9px;
  background: rgba(247, 243, 232, .08);
  border: 1px solid rgba(247, 243, 232, .16);
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600;
  color: rgba(247, 243, 232, .9);
}
.sello .em { font-size: 18px; }

/* --- BOTÓN GIGANTE: la única acción de la portada --- */
/* BOTÓN PRINCIPAL — la acción más importante de toda la web.
   Grande, con gradiente y halo que late. Imposible de ignorar. */
.btn-armar {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(135deg, #e8683c 0%, var(--tomate) 55%, #bf3f1a 100%);
  color: #fff;
  padding: 26px 58px;
  border-radius: var(--r-full);
  font-size: 21px; font-weight: 800;
  box-shadow:
    0 18px 50px rgba(217, 79, 40, .52),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: var(--t-base) var(--ease);
  position: relative;
  border: none; cursor: pointer;
}
.btn-armar:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 26px 62px rgba(217, 79, 40, .62),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-armar:active { transform: translateY(-1px) scale(.99); }
.btn-armar .em { font-size: 26px; }

@media (max-width: 720px) {
  .btn-armar {
    padding: 23px 40px; font-size: 19px;
    width: 100%; max-width: 400px;
  }
  .btn-armar .em { font-size: 23px; }
}

/* Halo que late */
.btn-armar::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: var(--r-full);
  border: 2px solid var(--tomate);
  opacity: 0;
  animation: halo 2.6s infinite;
}
@keyframes halo {
  0%   { opacity: .6; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.16); }
  100% { opacity: 0; }
}

.portada .desde {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(247, 243, 232, .6);
  font-weight: 600;
}
.portada .desde b { color: var(--oro-cla); }

/* --- Cómo funciona: 3 pasos --- */
.pasos-3 {
  display: flex; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px dashed rgba(247, 243, 232, .2);
}
.paso-3 {
  display: flex; align-items: center; gap: 11px;
  padding: 0 12px;
}
.paso-3 .n {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(201, 162, 39, .22);
  border: 1.5px solid var(--oro);
  color: var(--oro-cla);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.paso-3 .t {
  font-size: 14px; font-weight: 700;
  color: rgba(247, 243, 232, .85);
  text-align: left;
}
.pasos-3 .flecha { color: rgba(247,243,232,.35); font-size: 15px; align-self: center; }

/* =========================================================
   SECCIONES
   ========================================================= */
.seccion { padding: 62px 26px; }
.seccion-in { max-width: 1320px; margin: 0 auto; }

.cab {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 38px;
}
.epigrafe {
  display: inline-block;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--tomate);
  margin-bottom: 10px;
}
.cab h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -1.4px;
  text-wrap: balance;
}
.cab p {
  color: var(--tinta-2);
  font-size: 16px; margin-top: 11px;
  font-weight: 500;
}

/* =========================================================
   NUESTRAS PASTAS — vitrina de la portada
   ========================================================= */
.vitrina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}
.vitrina-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-2);
  position: relative;
  aspect-ratio: 16 / 10;
  transition: var(--t-slow) var(--ease);
}
.vitrina-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.vitrina-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento) var(--ease);
}
.vitrina-card:hover img { transform: scale(1.06); }

.vitrina-card .info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px;
  color: #fff;
  /* Degradado en tres paradas: sólido abajo, suave al medio, limpio
     arriba. Garantiza que el texto se lea incluso sobre fotos claras,
     sin oscurecer de más la imagen. */
  background: linear-gradient(to top,
    rgba(18, 38, 29, .95) 0%,
    rgba(18, 38, 29, .78) 38%,
    rgba(18, 38, 29, .35) 68%,
    transparent 100%);
}
.vitrina-card h3 {
  font-size: 22px; margin-bottom: 3px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);   /* refuerza legibilidad */
}
.vitrina-card .d { font-size: 13.5px; opacity: .85; font-weight: 500; }
.vitrina-card .p {
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 800;
  color: var(--oro-cla);
  margin-top: 6px;
}

/* =========================================================
   MENÚ — categorías + platos
   ========================================================= */
.cat-barra {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgba(247, 243, 232, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  padding: 15px 26px;
  margin-bottom: 34px;
}
.cat-barra-in {
  max-width: 1320px; margin: 0 auto;
  display: flex; gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-barra-in::-webkit-scrollbar { display: none; }

.cat-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-full);
  background: var(--papel);
  border: 1.5px solid var(--linea-2);
  font-weight: 700; font-size: 14px;
  color: var(--tinta-2);
  white-space: nowrap;
  transition: var(--t-base) var(--ease);
}
.cat-btn:hover { border-color: var(--verde); color: var(--verde); }
.cat-btn.on {
  background: var(--verde);
  color: var(--crema);
  border-color: var(--verde);
  box-shadow: var(--sh-v);
}
.cat-btn .em { font-size: 16px; }

.grid-platos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

.plato {
  background: var(--papel);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--linea);
  box-shadow: var(--sh-1);
  transition: var(--t-slow) var(--ease);
  display: flex; flex-direction: column;
  text-align: left;
  position: relative;
}
.plato:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
  border-color: var(--verde);
}
.plato .foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--masa);
  position: relative;
}
.plato .foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento) var(--ease);
}
.plato:hover .foto img { transform: scale(1.08); }

.plato .etiqueta {
  position: absolute; top: 12px; left: 12px;
  z-index: 2;
  background: var(--verde);
  color: var(--crema);
  padding: 5px 13px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  box-shadow: var(--sh-2);
}
.plato .etiqueta.oro { background: var(--oro); color: #fff; }

.plato .cuerpo {
  padding: 16px 17px 17px;
  display: flex; flex-direction: column;
  flex: 1; gap: 5px;
}
.plato h3 { font-size: 17.5px; }
.plato .d {
  font-size: 13px;
  color: var(--tinta-2);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}
.plato .pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.plato .precio {
  font-family: 'Fraunces', serif;
  font-size: 21px; font-weight: 800;
  color: var(--verde);
}
.plato .mas {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--tomate);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(217, 79, 40, .35);
  transition: var(--t-slow) var(--bounce);
  flex-shrink: 0;
}
.plato:hover .mas { transform: scale(1.14) rotate(90deg); }

/* =========================================================
   ARMADOR — el modal donde elige la pasta
   ========================================================= */
.telon {
  position: fixed; inset: 0;
  background: rgba(18, 38, 29, .72);
  backdrop-filter: blur(5px);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.telon.on { opacity: 1; pointer-events: auto; }

.modal-fondo {
  position: fixed; inset: 0;
  background: rgba(18, 38, 29, .74);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-fondo.on { display: flex; animation: fundir .22s var(--ease); }
@keyframes fundir { from { opacity: 0; } }

.modal {
  background: var(--crema);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sh-3);
  animation: emerger .35s var(--ease);
}
.modal.ancho { max-width: 960px; }
@keyframes emerger {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
}

/* --- Cabecera verde del armador --- */
.modal-cab {
  padding: 20px 26px;
  background: var(--verde);
  color: var(--crema);
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.modal-cab .txt { flex: 1; min-width: 0; }
.modal-cab h2 { font-size: 22px; color: var(--crema); }
.modal-cab .sub {
  font-size: 13px;
  color: rgba(247, 243, 232, .7);
  margin-top: 3px;
  font-weight: 600;
}
.cerrar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(247, 243, 232, .14);
  color: var(--crema);
  display: grid; place-items: center;
  font-size: 17px;
  transition: var(--t-base);
  flex-shrink: 0;
}
.cerrar:hover { background: rgba(247, 243, 232, .28); }

.modal-cuerpo { padding: 24px 26px; overflow-y: auto; flex: 1; }

.modal-pie {
  padding: 16px 26px;
  background: var(--papel);
  border-top: 1.5px solid var(--linea);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.modal-pie .grow { flex: 1; }
.modal-pie .precio-vivo {
  font-family: 'Fraunces', serif;
  font-size: 25px; font-weight: 800;
  color: var(--verde);
}

/* --- Barra de pasos --- */
.pasos-barra {
  display: flex; align-items: center;
  gap: 7px;
  padding: 14px 26px;
  background: var(--crema-2);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.pasos-barra::-webkit-scrollbar { display: none; }

.paso {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-full);
  background: var(--papel);
  border: 1.5px solid var(--linea-2);
  font-size: 12.5px; font-weight: 700;
  color: var(--tinta-3);
  white-space: nowrap;
  transition: var(--t-slow) var(--ease);
}
.paso.activo {
  background: var(--verde);
  color: var(--crema);
  border-color: var(--verde);
  box-shadow: var(--sh-v);
  transform: scale(1.04);
}
.paso.hecho {
  background: rgba(28, 58, 46, .08);
  color: var(--verde);
  border-color: rgba(28, 58, 46, .25);
}
.paso .n {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--crema-2);
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800;
}
.paso.activo .n { background: rgba(247, 243, 232, .25); }
.paso.hecho .n  { background: var(--verde); color: var(--crema); }
.paso.hecho .n::after { content: '✓'; }
.paso.hecho .n span { display: none; }
.pasos-barra .sep { color: var(--tinta-3); flex-shrink: 0; font-size: 12px; }

/* --- Opciones (fotos) --- */
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 15px;
}

.opcion {
  background: var(--papel);
  border: 2.5px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: var(--t-base) var(--ease);
  text-align: left;
  position: relative;
}
.opcion:hover {
  border-color: var(--linea-2);
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.opcion.elegida {
  border-color: var(--verde);
  box-shadow: var(--sh-v);
  transform: translateY(-4px);
}
.opcion.elegida::after {
  content: '✓';
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  box-shadow: var(--sh-2);
  animation: sellar .35s var(--bounce);
}
@keyframes sellar { from { transform: scale(0) rotate(-40deg); } }

.opcion .foto {
  aspect-ratio: 4 / 3;
  background: var(--masa);
  overflow: hidden;
}
.opcion .foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento) var(--ease);
}
.opcion:hover .foto img { transform: scale(1.08); }

.opcion .cuerpo { padding: 12px 13px 14px; }
.opcion h4 { font-size: 14px; font-weight: 800; line-height: 1.3; }

/* El precio del combo, en la tarjeta de la pasta */
.opcion .precio {
  font-family: 'Fraunces', serif;
  font-size: 19px; font-weight: 800;
  color: var(--verde);
  margin-top: 5px;
}
.opcion .extra {
  font-size: 12px; font-weight: 700;
  color: var(--tinta-3);
  margin-top: 3px;
}
.opcion .extra.incluido { color: var(--verde); }

/* Chip del combo al que pertenece (chiquito, informativo) */
.opcion .combo-chip {
  display: inline-block;
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--oro);
  background: rgba(201, 162, 39, .12);
  padding: 3px 8px;
  border-radius: var(--r-full);
  margin-top: 6px;
}

.opcion.saltar {
  display: grid; place-items: center;
  min-height: 160px;
  text-align: center; padding: 20px;
  background: var(--crema-2);
}
.opcion.saltar .em { font-size: 30px; margin-bottom: 8px; opacity: .5; }

/* Aviso "el pancito viene incluido" */
.incluye {
  display: flex; align-items: center; gap: 12px;
  background: rgba(28, 58, 46, .06);
  border: 1.5px dashed var(--linea-2);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 13.5px; font-weight: 600;
  color: var(--tinta-2);
}
.incluye .em { font-size: 20px; }
.incluye b { color: var(--verde); }

/* =========================================================
   CARRITO
   ========================================================= */
.carrito {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(var(--carrito), 100vw);
  background: var(--crema);
  z-index: 110;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  box-shadow: -22px 0 66px rgba(18, 38, 29, .3);
}
.carrito.on { transform: none; }

.carrito-cab {
  padding: 22px 24px;
  background: var(--verde);
  color: var(--crema);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.carrito-cab h2 { font-size: 21px; flex: 1; color: var(--crema); }








.carrito-items {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}

.item {
  display: flex; gap: 13px;
  background: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: var(--r);
  padding: 12px;
  animation: entrar .3s var(--ease);
}
@keyframes entrar { from { opacity: 0; transform: translateX(20px); } }
.item.saliendo { animation: salir .25s var(--ease) forwards; }
@keyframes salir { to { opacity: 0; transform: translateX(30px) scale(.9); } }

.item .mini {
  width: 62px; height: 62px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--masa);
  flex-shrink: 0;
}
.item .info { flex: 1; min-width: 0; }
.item h4 { font-size: 14.5px; font-weight: 800; line-height: 1.3; }

/* El nombre del combo, chiquito arriba de la pasta */
.item .combo-nom {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--oro);
  margin-bottom: 2px;
}
.item .ops {
  font-size: 12px;
  color: var(--tinta-2);
  margin-top: 3px;
  line-height: 1.45;
}
.item .nota {
  font-size: 12px; color: var(--tomate);
  font-weight: 700; margin-top: 3px;
}
.item .fila {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; gap: 10px;
}

.cant {
  display: flex; align-items: center;
  background: var(--crema-2);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-full);
  overflow: hidden;
}
.cant button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  color: var(--tinta-2);
  transition: var(--t-fast);
}
.cant button:hover { background: var(--verde); color: var(--crema); }
.cant .v { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; }

.item .sub {
  font-weight: 800; font-size: 15px;
  font-family: 'Fraunces', serif;
}
.item .quitar {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--tinta-3);
  font-size: 14px;
  transition: var(--t-fast);
  flex-shrink: 0;
  align-self: flex-start;
}
.item .quitar:hover { background: rgba(217, 79, 40, .12); color: var(--tomate); }

.vacio {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 50px 30px;
  text-align: center;
}
.vacio .em { font-size: 58px; opacity: .35; }
.vacio h3 { font-size: 20px; }
.vacio p {
  color: var(--tinta-2);
  font-size: 14.5px; max-width: 250px; line-height: 1.6;
}

.carrito-pie {
  border-top: 1.5px solid var(--linea);
  background: var(--papel);
  padding: 20px 24px 22px;
  flex-shrink: 0;
}
.totales { margin-bottom: 16px; }
.totales .r {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--tinta-2);
  font-weight: 600; padding: 4px 0;
}
.totales .r b { color: var(--tinta); font-weight: 700; }
.totales .r.gratis b { color: var(--verde); }
.totales .total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 13px; margin-top: 8px;
  border-top: 2px dashed var(--linea-2);
}
.totales .total .l { font-size: 15px; font-weight: 800; }
.totales .total .v {
  font-family: 'Fraunces', serif;
  font-size: 31px; font-weight: 800;
  color: var(--verde);
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--r-full);
  font-weight: 700; font-size: 15px;
  transition: var(--t-base) var(--ease);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn-verde {
  background: var(--verde);
  color: var(--crema);
  box-shadow: var(--sh-v);
}
.btn-verde:hover:not(:disabled) { background: var(--verde-osc); transform: translateY(-2px); }

.btn-tomate {
  background: var(--tomate);
  color: #fff;
  box-shadow: 0 8px 24px rgba(217, 79, 40, .35);
}
.btn-tomate:hover:not(:disabled) { background: var(--tomate-osc); transform: translateY(-2px); }

.btn-linea {
  background: var(--papel);
  border-color: var(--linea-2);
  color: var(--tinta);
}
.btn-linea:hover { border-color: var(--verde); color: var(--verde); }

.btn-lg    { padding: 18px 32px; font-size: 16.5px; }
.btn-sm    { padding: 10px 18px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none !important; }

/* =========================================================
   CHECKOUT
   ========================================================= */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 800; }
.campo .ayuda { font-size: 12px; color: var(--tinta-3); font-weight: 500; }

.input, .textarea {
  background: var(--papel);
  border: 2px solid var(--linea-2);
  border-radius: 14px;
  padding: 14px 16px;
  /* 16px mínimo: si es menor, el iPhone hace zoom solo al tocar el
     campo y descoloca todo el checkout. 16px lo evita. */
  font-size: 16px; font-weight: 600;
  transition: var(--t-base) var(--ease);
  outline: none; width: 100%;
}
.input::placeholder { color: var(--tinta-3); font-weight: 500; }
.input:focus, .textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgba(28, 58, 46, .1);
}
.input.mal {
  border-color: var(--tomate);
  background: rgba(217, 79, 40, .04);
  animation: temblar .35s;
}
@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.textarea { resize: none; min-height: 76px; line-height: 1.5; }

.opciones-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.opcion-btn {
  padding: 16px 14px;
  border-radius: var(--r);
  background: var(--papel);
  border: 2.5px solid var(--linea-2);
  text-align: center;
  transition: var(--t-base) var(--ease);
}
.opcion-btn:hover { border-color: var(--tinta-3); }
.opcion-btn.on {
  border-color: var(--verde);
  background: rgba(28, 58, 46, .05);
  box-shadow: 0 6px 20px rgba(28, 58, 46, .14);
}
.opcion-btn .em { font-size: 26px; display: block; margin-bottom: 6px; }
.opcion-btn .t { font-weight: 800; font-size: 14.5px; }
.opcion-btn .d { font-size: 12px; color: var(--tinta-2); margin-top: 2px; font-weight: 600; }

.pagos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pago-btn {
  padding: 13px 10px;
  border-radius: 13px;
  background: var(--papel);
  border: 2.5px solid var(--linea-2);
  font-weight: 700; font-size: 13.5px;
  transition: var(--t-base) var(--ease);
}
.pago-btn:hover { border-color: var(--tinta-3); }
.pago-btn.on {
  border-color: var(--verde);
  background: rgba(28, 58, 46, .05);
  color: var(--verde);
}

.resumen {
  background: var(--papel);
  border: 1.5px solid var(--linea);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 20px;
}
.resumen .l {
  display: flex; justify-content: space-between;
  gap: 12px; font-size: 14px; padding: 6px 0;
  color: var(--tinta-2); font-weight: 600;
}
.resumen .l .n { color: var(--tinta); font-weight: 700; }
.resumen .tot {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 13px; margin-top: 9px;
  border-top: 2px dashed var(--linea-2);
}
.resumen .tot b { font-size: 15px; }
.resumen .tot .v {
  font-family: 'Fraunces', serif;
  font-size: 26px; font-weight: 800;
  color: var(--verde);
}

/* --- Éxito --- */
.exito { text-align: center; padding: 20px 10px; }
.exito .tilde {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  display: grid; place-items: center;
  font-size: 46px;
  margin: 0 auto 22px;
  animation: sellar .5s var(--bounce);
  box-shadow: 0 14px 40px rgba(28, 58, 46, .35);
}
.exito h2 { font-size: 29px; margin-bottom: 10px; }
.exito .num {
  display: inline-block;
  background: var(--crema-2);
  border: 2px dashed var(--linea-2);
  padding: 12px 26px;
  border-radius: var(--r);
  font-family: 'Fraunces', serif;
  font-size: 30px; font-weight: 800;
  color: var(--verde);
  margin: 14px 0;
}
.exito p {
  color: var(--tinta-2);
  font-size: 15.5px; line-height: 1.65;
  max-width: 420px; margin: 0 auto 8px;
}
.aviso {
  background: rgba(201, 162, 39, .12);
  border: 1.5px solid rgba(201, 162, 39, .35);
  border-radius: var(--r);
  padding: 15px 18px;
  margin: 22px 0;
  font-size: 14px;
  color: #7d6318;
  font-weight: 600; line-height: 1.55;
  text-align: left;
  display: flex; gap: 11px;
}
.aviso .em { font-size: 20px; flex-shrink: 0; }

/* =========================================================
   CERRADO
   ========================================================= */
.cartel-cerrado {
  background: var(--tinta);
  color: var(--crema);
  padding: 13px 24px;
  text-align: center;
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.cartel-cerrado b { color: var(--oro-cla); }

/* =========================================================
   PIE
   ========================================================= */
.pie {
  background: var(--verde-osc);
  color: var(--crema);
  padding: 56px 26px 30px;
}
.pie-in {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.pie h4 {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--oro-cla);
  margin-bottom: 15px;
}
.pie .marca {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 15px;
}
.pie .marca img {
  width: 52px; height: 52px;
  min-width: 52px; max-width: 52px;
  min-height: 52px; max-height: 52px;
  border-radius: 50%;
  background: var(--crema);
  object-fit: contain;
  flex-shrink: 0;
}
.pie .marca .n {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 800;
}
.pie p, .pie li {
  color: rgba(247, 243, 232, .68);
  font-size: 14px; line-height: 1.85;
}
.pie a:hover { color: var(--oro-cla); }

.pie-wa {
  display: inline-flex; align-items: center; gap: 9px;
  background: #25d366;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-full);
  font-weight: 700; font-size: 14px;
  margin-top: 14px;
  transition: var(--t-base) var(--ease);
}
.pie-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, .35); }

.pie-abajo {
  max-width: 1180px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 243, 232, .12);
  display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(247, 243, 232, .45);
}

/* =========================================================
   AVISOS
   ========================================================= */
.avisos {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex; flex-direction: column;
  gap: 10px; align-items: center;
  pointer-events: none;
}
.aviso-toast {
  display: flex; align-items: center; gap: 11px;
  background: var(--verde);
  color: var(--crema);
  padding: 14px 22px;
  border-radius: var(--r-full);
  font-weight: 700; font-size: 14.5px;
  box-shadow: var(--sh-3);
  animation: brotar .35s var(--bounce);
  max-width: 90vw;
}
.aviso-toast.mal { background: var(--tomate); color: #fff; }
.aviso-toast .em { font-size: 18px; }
.aviso-toast.yendo { animation: irse .3s var(--ease) forwards; }
@keyframes brotar { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes irse   { to   { opacity: 0; transform: translateY(-16px) scale(.95); } }

/* =========================================================
   BARRA MÓVIL
   ========================================================= */
/* BARRA DE PEDIDO FIJA — aparece apenas agregan algo.
   Visible en TODAS las pantallas (no solo móvil): es lo que
   cierra la venta, así que no puede quedar en el olvido. */
.barra-movil {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(247, 243, 232, .97);
  backdrop-filter: blur(16px);
  border-top: 1.5px solid var(--linea);
  box-shadow: 0 -8px 32px rgba(28, 58, 46, .16);
  transform: translateY(120%);
  transition: transform var(--t-slow) var(--bounce);
  display: block;
}
/* En pantallas grandes, la barra se centra y no ocupa todo el ancho */
@media (min-width: 940px) {
  .barra-movil {
    left: 50%; right: auto;
    transform: translate(-50%, 120%);
    width: min(560px, 92vw);
    border-radius: 18px 18px 0 0;
    border: 1.5px solid var(--linea);
    border-bottom: none;
  }
  .barra-movil.on { transform: translate(-50%, 0); }
}
/* Estado visible (móvil y tablet). En desktop lo maneja el media query de arriba. */
@media (max-width: 939px) {
  .barra-movil.on { transform: none; }
}
.barra-movil .btn {
  width: 100%; justify-content: space-between;
  padding: 19px 24px;
  font-size: 17px;
  box-shadow: 0 8px 24px rgba(217, 79, 40, .38);
}
.barra-movil .izq { display: flex; align-items: center; gap: 12px; }
.barra-movil .n {
  background: rgba(255, 255, 255, .25);
  min-width: 30px; height: 30px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  padding: 0 8px;
}
.barra-movil #movilTotal { font-size: 19px; font-weight: 800; }

/* =========================================================
   CARGANDO
   ========================================================= */
.esqueleto {
  background: linear-gradient(90deg, var(--crema-2) 25%, var(--masa) 50%, var(--crema-2) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s infinite;
  border-radius: var(--r-lg);
  height: 300px;
}
@keyframes brillo { to { background-position: -200% 0; } }

/* =========================================================
   UTILIDADES
   ========================================================= */
.oculto { display: none !important; }
.grow   { flex: 1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 940px) {
  .pie-in { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .seccion  { padding: 44px 18px; }
  .portada  { padding: 44px 18px 56px; }
  .nav      { padding: 0 16px; }

  .nav .marca .s { display: none; }
  .nav-cart span.txt { display: none; }

  .logo-grande { width: 104px; height: 104px; }

  .pasos-3 { flex-direction: column; align-items: center; gap: 14px; }
  .pasos-3 .flecha { transform: rotate(90deg); }

  .grid-platos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .vitrina     { grid-template-columns: 1fr; }

  .plato .foto { aspect-ratio: 1; }
  .plato .cuerpo { padding: 13px; }
  .plato h3 { font-size: 15px; }
  .plato .d { font-size: 12px; min-height: 36px; }
  .plato .precio { font-size: 18px; }
  .plato .mas { width: 38px; height: 38px; font-size: 20px; }

  /* 2 columnas FIJAS: con auto-fill a veces entraban 3 apretadas y
     se cortaban. Fijas garantizan que entren justas sin desbordar. */
  .opciones { grid-template-columns: 1fr 1fr; gap: 11px; }
  .opciones-2 { grid-template-columns: 1fr; }

  /* El cuerpo del modal nunca genera scroll horizontal */
  .modal, .modal-cuerpo, .modal-cab, .modal-pie { max-width: 100vw; }
  .modal-cuerpo { overflow-x: hidden; }
  .opciones, .opcion { min-width: 0; max-width: 100%; }
  .opcion img { width: 100%; }

  .modal { max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; align-self: flex-end; }
  .modal-fondo { padding: 0; align-items: flex-end; }
  .modal-cuerpo { padding: 20px 18px; }
  .modal-cab { padding: 18px 20px; }
  .modal-pie {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  /* Los botones del pie no se aplastan ni se cortan */
  .modal-pie .btn { padding: 14px 14px; font-size: 14.5px; white-space: nowrap; }
  .modal-pie .precio-vivo { font-size: 18px; }
  /* En pantallas muy chicas, el "Atrás" se achica para dar lugar */
  .modal-pie .btn-fantasma { padding: 14px 12px; }

  .carrito { width: 100vw; }
  .barra-movil { display: block; }
  .carrito-pie { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }

  .avisos { bottom: 92px; }
}


/* ---- Aviso del envío (lo cobra el cadete) ---- */
.aviso-envio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 22px;
  background: rgba(201, 162, 39, .12);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
}
.aviso-envio .em { font-size: 20px; flex-shrink: 0; }
.aviso-envio b { font-size: 13.5px; font-weight: 800; color: var(--tinta); }
.aviso-envio .d { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; line-height: 1.45; margin-top: 2px; }

.tot-nota {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--linea-2);
  font-size: 12.5px; font-weight: 600;
  color: var(--tinta-3); text-align: right;
}

.nota-envio {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(201, 162, 39, .12);
  border: 1.5px dashed rgba(201, 162, 39, .4);
  border-radius: var(--r);
  font-size: 13px; color: var(--tinta-2); font-weight: 500; line-height: 1.5;
}
.nota-envio .em { font-size: 17px; flex-shrink: 0; }
.nota-envio b { color: var(--tinta); font-weight: 800; }

/* =========================================================
   DAMERO — el elemento icónico de Somos Pastas
   ========================================================= */
.damero {
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  background-image:
    linear-gradient(45deg, var(--crema) 25%, transparent 25%),
    linear-gradient(-45deg, var(--crema) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--crema) 75%),
    linear-gradient(-45deg, transparent 75%, var(--crema) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  opacity: .9;
  z-index: 3;
}
.damero-top { top: 0; }
.damero-bottom { bottom: 0; }

/* El damero deja espacio arriba y abajo de la portada */
.portada { padding-top: 90px; padding-bottom: 100px; }

@media (max-width: 720px) {
  .damero { height: 16px; background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
  .portada { padding-top: 66px; padding-bottom: 76px; }
}

/* =========================================================
   REFINAMIENTOS VISUALES (más profesional)
   ========================================================= */

/* Logo con anillo doble, más elegante */
.logo-grande {
  position: relative;
}
.logo-grande::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(247, 243, 232, .25);
  border-radius: 50%;
  pointer-events: none;
}

/* Sombra más rica en las tarjetas de combo */
.vitrina-card {
  box-shadow: 0 4px 6px rgba(28,58,46,.04), 0 12px 28px rgba(28,58,46,.12);
}
.vitrina-card:hover {
  box-shadow: 0 8px 12px rgba(28,58,46,.08), 0 24px 48px rgba(28,58,46,.20);
}

/* Badge de precio flotante en las tarjetas de combo */
.vitrina-card .info .p {
  display: inline-block;
  background: var(--oro);
  color: var(--verde-osc);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(201,162,39,.4);
  margin-top: 8px;
}

/* Epígrafe con líneas decorativas a los lados */
.cab .epigrafe {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cab .epigrafe::before,
.cab .epigrafe::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--tomate);
  opacity: .5;
}

/* Botón armar: mayúsculas con buen espaciado */
.btn-armar {
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Transición suave al hacer scroll en las secciones */
.seccion { scroll-margin-top: 80px; }

/* ---- Armador: precio del topping ---- */
.opcion .extra.suma {
  color: var(--tomate);
  font-weight: 800;
  background: rgba(217,79,40,.08);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
}
.topping-aviso {
  background: rgba(201,162,39,.12) !important;
  border-color: rgba(201,162,39,.3) !important;
}

/* =========================================================
   OPCIONES AGOTADAS
   ========================================================= */
.opcion.agotada {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.opcion.agotada:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--linea);
}
.opcion .foto { position: relative; }
.cinta-agotado {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--tomate);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 3px 8px rgba(217,79,40,.4);
}
.opcion .extra.agotado-txt {
  color: var(--tomate);
  font-weight: 700;
}

/* =========================================================
   ACCESIBILIDAD: respetar "reducir movimiento"
   Usuarios con vértigo, mareo o sensibilidad al movimiento
   configuran esto en su sistema. Lo respetamos.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   GALERÍA — botón flotante + modal
   El botón se corre hacia arriba cuando aparece la barra del
   pedido, para no taparla nunca. La venta manda.
   ========================================================= */
.gal-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;                 /* por DEBAJO de la barra (80) */
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(18, 38, 29, .92);
  backdrop-filter: blur(10px);
  color: var(--crema);
  border: 1.5px solid rgba(247, 243, 232, .18);
  padding: 12px 18px;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  transition: var(--t-base) var(--ease);
}
.gal-flotante:hover {
  transform: translateY(-3px);
  background: rgba(18, 38, 29, .98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36);
}
.gal-flotante .ic { font-size: 17px; }

/* Cuando la barra del pedido está visible, el botón sube para
   no taparla. La barra mide ~78px con su padding. */
body:has(.barra-movil.on) .gal-flotante {
  bottom: calc(96px + env(safe-area-inset-bottom));
}
/* Respaldo para navegadores sin :has() — clase que pone el JS */
body.con-barra .gal-flotante {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
  .gal-flotante { padding: 11px 15px; font-size: 13px; right: 14px; bottom: 14px; }
  .gal-flotante .txt { display: none; }   /* solo el ícono en pantallas chicas */
  .gal-flotante .ic { font-size: 19px; }
}

/* ---- Modal de la galería ---- */
.gal-modal {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(10, 22, 17, .96);
  backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
}
.gal-modal.on { display: flex; animation: gal-entra var(--t-slow) var(--ease); }
@keyframes gal-entra { from { opacity: 0; } to { opacity: 1; } }

.gal-modal-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  color: var(--crema);
  border-bottom: 1px solid rgba(247, 243, 232, .12);
  flex-shrink: 0;
}
.gal-modal-cab .t { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 700; }
.gal-modal-cab .s { font-size: 13px; opacity: .7; margin-top: 2px; }
.gal-cerrar {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(247, 243, 232, .12);
  color: var(--crema); font-size: 17px; cursor: pointer;
  transition: var(--t-fast) var(--ease);
}
.gal-cerrar:hover { background: rgba(247, 243, 232, .24); }

.gal-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  padding: 20px 24px 40px;
  align-content: start;
}
.gal-pieza {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(247, 243, 232, .06);
  aspect-ratio: 3 / 4;
  position: relative;
  transition: transform var(--t-slow) var(--ease);
}
.gal-pieza:hover { transform: scale(1.02); }
.gal-pieza img, .gal-pieza video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.gal-pieza figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 12px;
  color: #fff; font-size: 13px; font-weight: 600;
  background: linear-gradient(to top, rgba(10,22,17,.9), transparent);
}

.gal-cargando, .gal-vacio {
  grid-column: 1 / -1;
  display: grid; place-items: center;
  gap: 12px; padding: 60px 20px;
  color: rgba(247, 243, 232, .7);
  text-align: center;
}
.gal-vacio .em { font-size: 42px; }
.gal-rueda {
  width: 34px; height: 34px;
  border: 3px solid rgba(247, 243, 232, .2);
  border-top-color: var(--crema);
  border-radius: 50%;
  animation: gal-gira .7s linear infinite;
}
@keyframes gal-gira { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .gal-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; padding: 14px 14px 30px;
  }
  .gal-modal-cab { padding: 16px 18px; }
  .gal-modal-cab .t { font-size: 18px; }
}

/* =========================================================
   AGREGAR OTRO COMBO — desde el propio carrito
   ========================================================= */
.sumar-mas {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 14px; padding: 16px 18px;
  background: rgba(28,58,46,.04);
  border: 2px dashed rgba(28,58,46,.28);
  border-radius: 16px; cursor: pointer; text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.sumar-mas:hover {
  background: rgba(28,58,46,.08);
  border-color: var(--tomate, #d2522c);
}
.sumar-mas:active { transform: scale(.99); }
.sumar-mas .em {
  flex: 0 0 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; font-size: 22px; font-weight: 700;
  background: var(--tomate, #d2522c); color: #fff; line-height: 1;
}
.sumar-mas b { display: block; font-size: 15px; color: var(--tinta, #1c3a2e); }
.sumar-mas i {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--tinta-3, #6b7a72); margin-top: 2px;
}

/* =========================================================
   URGENCIA POR STOCK REAL
   Nunca inventamos escasez: estos números salen del stock
   que carga el local. Si sobra, nada de esto se muestra.
   ========================================================= */

/* ---- Cinta sobre la foto de la opción ---- */
.cinta-quedan {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: #e8a33d; color: #2a1c05;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cinta-quedan.critica {
  background: var(--tomate, #d2522c); color: #fff;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.quedan-txt {
  color: #b8541f !important;
  font-weight: 700 !important;
}

/* ---- Franja de la portada ---- */
.urgencia {
  margin: 22px auto 0; max-width: 560px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(232,163,61,.42);
  backdrop-filter: blur(6px);
}
.urgencia.oculto { display: none; }

.urg-cab {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.86); text-align: center;
}
.urg-cab .pulso {
  flex: 0 0 8px; height: 8px; border-radius: 50%;
  background: #e8a33d; animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(232,163,61,.6); }
  70%      { opacity: .7; box-shadow: 0 0 0 8px rgba(232,163,61,0); }
}

.urg-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 12px;
}
.chip-urg {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(232,163,61,.16);
  border: 1px solid rgba(232,163,61,.5);
}
.chip-urg b { font-size: 13px; color: #fff; font-weight: 700; }
.chip-urg i {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  color: #f0bf72;
}

.urg-pie {
  margin-top: 10px; text-align: center;
  font-size: 11.5px; color: rgba(255,255,255,.6);
}

/* En pantallas chicas la franja no debe empujar el botón
   de pedido fuera de la vista */
@media (max-width: 520px) {
  .urgencia { margin-top: 16px; padding: 12px 14px; }
  .urg-cab  { font-size: 11.5px; }
  .chip-urg b { font-size: 12px; }
}

/* =========================================================
   CAPA PREMIUM
   Detalles que separan una web que funciona de una que
   se siente cara. Nada de esto cambia la lógica: solo
   pulido visual, accesibilidad y percepción de velocidad.
   ========================================================= */

/* ---------------------------------------------------------
   1. FOCO VISIBLE — accesibilidad real

   :focus-visible solo se dispara al navegar con teclado,
   así el mouse no deja anillos por todos lados pero quien
   usa Tab nunca se pierde.
   --------------------------------------------------------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--oro-cla);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Sobre fondo verde el oro pierde contraste: usamos crema */
.nav :focus-visible,
.portada :focus-visible,
.pie :focus-visible {
  outline-color: var(--crema);
}

/* Saltar al contenido: lo primero que encuentra un lector de
   pantalla. Invisible hasta que se enfoca con Tab. */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 12px 20px; border-radius: var(--r);
  background: var(--crema); color: var(--verde);
  font-weight: 700; box-shadow: var(--sh-2);
  transition: top var(--t-base) var(--ease);
}
.saltar:focus { top: 12px; }


/* ---------------------------------------------------------
   2. PERCEPCIÓN DE VELOCIDAD — skeletons con brillo

   Un bloque gris quieto se siente roto. Uno que respira
   se siente "cargando". Es el mismo tiempo de espera.
   --------------------------------------------------------- */
.esqueleto {
  position: relative;
  overflow: hidden;
  background: var(--crema-2);
}
.esqueleto::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .55),
    transparent
  );
  animation: brillo 1.4s infinite;
}
@keyframes brillo {
  100% { transform: translateX(100%); }
}


/* ---------------------------------------------------------
   3. MICROINTERACCIONES DE BOTONES

   Levantar en hover, hundir en click. El "hundir" importa
   más que el "levantar": confirma que el toque registró,
   sobre todo en celular donde no hay hover.
   --------------------------------------------------------- */
.btn, .btn-armar, .opcion, .vitrina-card {
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.btn:hover:not(:disabled),
.btn-armar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.btn:active:not(:disabled),
.btn-armar:active:not(:disabled),
.opcion:active:not(.agotada) {
  transform: translateY(0) scale(.985);
}

/* Deshabilitado: que se lea como "todavía no", no como error */
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Estado cargando: reemplaza el texto por un spinner sin
   que el botón cambie de tamaño (evita saltos de layout) */
.btn.cargando {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.cargando::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------
   4. PROFUNDIDAD DE LAS TARJETAS

   Sombra en dos capas: una cerrada que define el borde y
   una abierta y difusa que da la altura. Es como se ven
   las sombras reales, y por eso se sienten caras.
   --------------------------------------------------------- */
.vitrina-card {
  box-shadow:
    0 1px 2px rgba(28, 58, 46, .10),
    0 12px 32px rgba(28, 58, 46, .13);
}
.vitrina-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(28, 58, 46, .12),
    0 26px 56px rgba(28, 58, 46, .22);
}

/* La foto acompaña el hover con un zoom lento */
.vitrina-card img {
  transition: transform var(--t-lento) var(--ease);
}
.vitrina-card:hover img { transform: scale(1.055); }


/* ---------------------------------------------------------
   5. ENTRADA DE LAS SECCIONES

   Aparecen al entrar en pantalla. Sutil: 14px de
   desplazamiento, no 60. Si el usuario pidió menos
   movimiento (punto 7), esto se apaga entero.
   --------------------------------------------------------- */
.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.aparece.visible {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------
   6. ÁREA TÁCTIL MÍNIMA

   44px es el mínimo recomendado. Debajo de eso la gente
   falla el toque, se frustra y abandona el pedido.
   --------------------------------------------------------- */
@media (pointer: coarse) {
  .btn, .nav-cart, .cerrar, .quitar,
  .cant button, .opcion {
    min-height: 44px;
  }
  .cant button { min-width: 44px; }
}


/* ---------------------------------------------------------
   7. RESPETAR A QUIEN PIDE MENOS MOVIMIENTO

   No es un extra: para gente con vértigo o migraña las
   animaciones producen malestar físico real.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1; transform: none; }
}

/* =========================================================
   CARRUSEL DE FONDOS DE LA PORTADA

   Rota entre las imágenes/videos que el local sube desde el
   panel. Cada capa se apila y se cruza con un fundido suave.

   Va DEBAJO del degradado (.portada::after, z-index 1) para
   que el texto se siga leyendo sobre cualquier fondo, y por
   encima del ::before (la foto fija de respaldo, z-index 0).
   ========================================================= */
.portada-fondos {
  position: absolute; inset: 0;
  /* Por ENCIMA de la foto fija (::before, z0). Antes estaban en el
     mismo plano y el pseudo-elemento tapaba el carrusel: por eso los
     fondos subidos no se veían. */
  z-index: 1;
  overflow: hidden;
}

/* Cuando hay carrusel, la foto fija de respaldo se apaga: manda
   lo que el local subió, no el archivo por defecto. */
.portada.con-carrusel::before { display: none; }

.portada-fondo {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* La imagen se pone como background para poder usar cover
     con el mismo encuadre que el resto de la portada. */
  background-size: cover;
  background-position: 62% 38%;
  background-repeat: no-repeat;
}
.portada-fondo.on { opacity: 1; }

/* Los videos van como <video> real, no como background */
.portada-fondo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 720px) {
  .portada-fondo { background-position: 58% 30%; }
}

/* Si el usuario pidió menos movimiento, no reproducimos videos
   ni hacemos fundidos largos: mostramos el primer fondo quieto. */
@media (prefers-reduced-motion: reduce) {
  .portada-fondo { transition: opacity .2s ease; }
}

/* =========================================================
   REPETIR ÚLTIMO PEDIDO — atajo para quien ya compró

   Aparece bajo el CTA principal. Discreto pero visible:
   quien ya conoce el combo compra en un toque.
   ========================================================= */
.repetir-pedido {
  display: inline-flex; align-items: center; gap: 13px;
  margin: 16px auto 0;
  padding: 13px 22px 13px 16px;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.repetir-pedido.oculto { display: none; }
.repetir-pedido:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-2px);
}
.repetir-pedido .ic {
  font-size: 22px; line-height: 1;
  flex: 0 0 auto;
}
.repetir-pedido .tx {
  display: flex; flex-direction: column;
  text-align: left; line-height: 1.25;
}
.repetir-pedido .tx b { font-size: 14.5px; font-weight: 700; }
.repetir-pedido .tx i {
  font-style: normal; font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
}

/* =========================================================
   SEGUIMIENTO DEL PEDIDO — barra bajo el nav

   Le muestra al cliente en qué anda su pedido sin que
   pregunte. Recibido → En cocina → Listo.
   ========================================================= */
.seguimiento {
  position: sticky; top: 0; z-index: 85;
  background: var(--verde, #1c3a2e);
  border-bottom: 1px solid rgba(255,255,255,.12);
  animation: segBaja .4s var(--ease, ease);
}
.seguimiento.oculto { display: none; }
@keyframes segBaja { from { transform: translateY(-100%); } to { transform: none; } }

.seg-in {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
}

.seg-pasos {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.seg-paso {
  display: flex; align-items: center; gap: 6px;
  opacity: .4; transition: opacity .3s ease;
}
.seg-paso.hecho { opacity: 1; }
.seg-paso.actual .pl { font-weight: 800; }
.seg-paso .pt { font-size: 16px; }
.seg-paso .pl { font-size: 13px; color: #fff; white-space: nowrap; }

.seg-linea {
  width: 26px; height: 2px;
  background: rgba(255,255,255,.25);
  transition: background .3s ease;
}
.seg-linea.hecha { background: var(--oro-cla, #e8c96a); }

.seg-txt {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: rgba(255,255,255,.9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.seg-cerrar {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: none; cursor: pointer; font-size: 13px;
  transition: background .2s ease;
}
.seg-cerrar:hover { background: rgba(255,255,255,.25); }

/* Rechazado: barra roja */
.seguimiento.rechazado { background: #a8321f; }
.seg-x {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff;
  font-weight: 800;
}

@media (max-width: 640px) {
  .seg-paso .pl { display: none; }   /* en mobile solo íconos */
  .seg-linea { width: 16px; }
  .seg-txt { font-size: 12.5px; }
}

/* =========================================================
   OPTIMIZACIÓN MÓVIL — la mayoría pide desde el celular
   ========================================================= */
@media (max-width: 720px) {
  /* Botones y zonas táctiles: mínimo 48px de alto para el dedo */
  .btn, .cat-btn, .js-armar, .btn-armar,
  .barra-movil .btn, .nav-cart {
    min-height: 48px;
  }

  /* El CTA principal bien grande y cómodo de tocar */
  .btn-armar {
    padding: 18px 24px;
    font-size: 17px;
    width: 100%;
  }

  /* La barra de pedido fija abajo: más alta y con el pulgar en zona
     cómoda. Respeta el "notch" de los iPhone. */
  .barra-movil {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .barra-movil .btn { min-height: 52px; font-size: 16.5px; }

  /* Scroll más suave y sin rebote raro */
  html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

  /* Evitar que se seleccione texto sin querer al tocar botones */
  .btn, .cat-btn, .sello, .nav-cart, .btn-armar {
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Imágenes de vitrina cargan progresivo, no bloquean el scroll */
  .vitrina img, .recorte img { content-visibility: auto; }
}

/* Pantallas muy chicas (celulares angostos): ajustes finos */
@media (max-width: 400px) {
  .btn-armar { font-size: 16px; padding: 16px 18px; }
  .hero-in h1, #pTitulo, .portada h1 {
    font-size: clamp(28px, 9vw, 44px);
    letter-spacing: -1px;
  }
  .barra-movil #movilTotal { font-size: 17px; }
}