/* ==========================================================================
   ETERNA LIVING — CATÁLOGO WEB
   --------------------------------------------------------------------------
   Hoja de estilos de la página pública. Es independiente de eterna.css:
   aquélla viste el sistema interno, ésta viste la tienda. No comparten
   nada a propósito, para que cambiar una nunca despeine a la otra.

   La página va de oscuro a claro: portada nocturna, catálogo luminoso,
   pie nocturno otra vez. El producto se ve mejor sobre fondo claro, y el
   contraste entre secciones es lo que le da el aire de revista.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Marca --- */
  --noche:        #0A1526;
  --noche-2:      #0F2038;
  --marino:       #16325F;
  --marino-claro: #2A5DA8;
  --marino-tenue: #EAF0F9;

  /* El acento es plata azulada, del mismo tono del logotipo. Se usa con
     cuentagotas: una línea, una palabra, un borde. Nunca en bloques
     grandes: en cuanto un color de acento ocupa superficie, deja de
     leerse como detalle y empieza a leerse como adorno. */
  --acento:       #A9BEDA;
  --acento-claro: #E8EEF7;
  --acento-tenue: rgba(169, 190, 218, .12);

  --plata:        #C9CDD6;
  --hueso:        #F7F6F3;
  --blanco:       #FFFFFF;

  --tinta:        #101A2B;
  --tinta-media:  #4B5771;
  --tinta-tenue:  #8791A6;
  --linea:        #E3E6EC;
  --linea-suave:  #F0F2F5;

  --exito:        #1E8A5F;
  --peligro:      #C0392B;

  /* --- Tipografía --- */
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Espacios --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;

  /* --- Curvas --- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* --- Sombras --- */
  --s1: 0 1px 2px rgba(16, 26, 43, .05);
  --s2: 0 4px 14px rgba(16, 26, 43, .06);
  --s3: 0 14px 34px rgba(16, 26, 43, .09);
  --s4: 0 28px 70px rgba(10, 21, 38, .18);

  /* --- Tiempos --- */
  --rapido: 160ms cubic-bezier(.2, .7, .3, 1);
  --medio:  340ms cubic-bezier(.2, .7, .3, 1);
  --lento:  680ms cubic-bezier(.16, .84, .28, 1);

  --ancho: 1240px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.cat {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.cat h1, .cat h2, .cat h3, .cat h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

.envoltura {
  width: min(100% - 40px, var(--ancho));
  margin-inline: auto;
}

.seccion { padding: var(--e9) 0; }

/* --- Antetítulo: la rayita y la línea breve sobre cada título --- */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e4);
}
.antetitulo::before {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento));
}

.titulo-seccion {
  font-size: clamp(30px, 4.4vw, 52px);
  max-width: 18ch;
}
.entrada-seccion {
  margin: var(--e4) 0 0;
  max-width: 58ch;
  color: var(--tinta-media);
  font-size: 17px;
}

/* Sólo para lectores de pantalla. */
.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--rapido), box-shadow var(--rapido),
              background var(--rapido), color var(--rapido),
              border-color var(--rapido);
}
.bt:hover { transform: translateY(-2px); }
.bt:active { transform: translateY(0); }
.bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* El botón principal es blanco sobre el azul de la portada. Nada de
   degradados ni de brillos que cruzan: el contraste solo ya manda la
   mirada, y todo lo demás es ruido. */
.bt-claro {
  background: var(--blanco);
  color: var(--noche);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
.bt-claro:hover { background: var(--acento-claro); }

.bt-marino {
  background: var(--marino);
  color: var(--blanco);
}
.bt-marino:hover { background: var(--marino-claro); }

.bt-linea {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: var(--blanco);
}
.bt-linea:hover { border-color: var(--acento); color: var(--acento-claro); }

.bt-linea-oscura {
  background: transparent;
  border-color: var(--linea);
  color: var(--tinta);
}
.bt-linea-oscura:hover { border-color: var(--marino); color: var(--marino); }

.bt-wa {
  background: #25D366;
  color: #06331A;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .34);
}
.bt-wa:hover { background: #1FBE5B; }

.bt-chico { padding: 10px 18px; font-size: 12px; }

/* ==========================================================================
   4. ENCABEZADO
   ========================================================================== */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) max(20px, calc((100vw - var(--ancho)) / 2));
  transition: background var(--medio), backdrop-filter var(--medio),
              padding var(--medio), box-shadow var(--medio);
}
/* Al bajar, la barra se posa: fondo, sombra y menos alto. */
.cabecera.posada {
  background: rgba(10, 21, 38, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-block: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 34px rgba(0, 0, 0, .3);
}

.logo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  color: var(--blanco);
}
.logo-marca img {
  height: 46px;
  width: auto;
  transition: height var(--medio);
}
.cabecera.posada .logo-marca img { height: 36px; }

/* Se conservan por si algún día se enseña el nombre en texto en vez del
   logotipo (por ejemplo, si el dueño borra el suyo y no hay ninguno). */
.logo-marca .nombre {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
}
.logo-marca .lema {
  display: block;
  font-family: var(--texto);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plata);
  opacity: .75;
}

.nav { display: flex; align-items: center; gap: var(--e5); }
.nav a {
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  position: relative;
  padding-block: 4px;
  transition: color var(--rapido);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--acento);
  transition: width var(--medio);
}
.nav a:hover { color: var(--blanco); }
.nav a:hover::after { width: 100%; }

.menu-movil {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--blanco);
  border-radius: var(--r-full);
  width: 42px; height: 42px;
  cursor: pointer;
}

/* ==========================================================================
   5. PORTADA
   ========================================================================== */
.portada {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  padding: var(--e9) 0 var(--e8);
  background: var(--noche);
  color: var(--blanco);
  overflow: hidden;
  isolation: isolate;
}

/* Fondo cuando no hay foto: un solo halo azul, muy lento, sobre el azul
   de la noche. Antes había además un halo dorado y una retícula de
   cuadritos; los dos se quitaron. La retícula daba aire de plantilla y el
   dorado peleaba con el plata del logotipo. */
.portada::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(52% 52% at 50% 34%, rgba(42, 93, 168, .42), transparent 72%),
    linear-gradient(165deg, var(--noche), var(--noche-2) 58%, var(--noche));
  animation: respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Un velo de abajo hacia arriba, para que el texto se lea sobre cualquier
   foto sin tener que oscurecer la foto entera. */
.portada::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 21, 38, .72), transparent 55%);
}

.portada-foto {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  will-change: transform;
}
.portada.con-foto::before { opacity: .82; }

/* La portada va centrada y con el logotipo grande. Es el recurso más
   simple que hay y el que mejor lee como marca: una sola cosa en medio,
   mucho aire alrededor. */
.portada-texto {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portada-logo {
  width: min(560px, 82vw);
  height: auto;
  margin-bottom: var(--e6);
  /* El logotipo ya viene en plata; el filtro sólo le da presencia sobre
     el azul, sin cambiarle el color. */
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, .45));
}

.portada h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .96);
  max-width: 20ch;
}
/* Cuando hay logotipo, el título deja de ser el protagonista: baja de
   tamaño y de peso para no competir con él. */
.portada:not(.con-logo) h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.portada p {
  margin: var(--e4) 0 0;
  font-size: clamp(15px, 1.5vw, 17.5px);
  color: rgba(255, 255, 255, .68);
  max-width: 50ch;
}
.portada-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e6);
}

/* Cifras bajo la portada */
.portada-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e8);
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.dato .cifra {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1;
}
.dato .cifra .sufijo { color: var(--acento); font-weight: 400; }
.dato .dato-pie {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plata);
  opacity: .78;
  margin-top: 6px;
}

/* Flechita de «sigue bajando» */
.bajar {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: flotar 2.4s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50%      { transform: translate(-50%, 9px); opacity: 1; }
}

/* ==========================================================================
   6. FRANJA QUE DESFILA
   ========================================================================== */
.franja {
  background: var(--noche-2);
  border-block: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  padding: var(--e4) 0;
}
.franja-pista {
  display: flex;
  gap: var(--e8);
  width: max-content;
  animation: desfilar 34s linear infinite;
}
.franja:hover .franja-pista { animation-play-state: paused; }
@keyframes desfilar { to { transform: translateX(-50%); } }

.franja-pista span {
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
}
.franja-pista span::after {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--acento);
  opacity: .7;
}

/* ==========================================================================
   7. DESTACADOS
   ========================================================================== */
.destacados { background: var(--hueso); }

.tira-destacados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e5);
  margin-top: var(--e7);
}

.destacado {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--marino-tenue);
  cursor: pointer;
  box-shadow: var(--s2);
  transition: transform var(--medio), box-shadow var(--medio);
}
.destacado:hover { transform: translateY(-8px); box-shadow: var(--s4); }
.destacado img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--lento);
}
.destacado:hover img { transform: scale(1.07); }
.destacado .velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 21, 38, .92) 0%,
              rgba(10, 21, 38, .45) 42%, transparent 72%);
}
.destacado .texto {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e5);
  color: var(--blanco);
}
.destacado .texto h3 { font-size: 22px; }
.destacado .texto .precio {
  font-family: var(--display);
  font-weight: 700;
  color: var(--acento-claro);
  margin-top: 6px;
}

/* ==========================================================================
   8. CATÁLOGO
   ========================================================================== */
.catalogo { background: var(--blanco); }

.barra-filtros {
  position: sticky;
  top: 68px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin: var(--e7) 0 var(--e6);
  padding: var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--s2);
}

.buscador-cat {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}
.buscador-cat input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: var(--blanco);
  font-family: var(--texto);
  font-size: 14px;
  color: var(--tinta);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.buscador-cat input:focus {
  outline: none;
  border-color: var(--marino);
  box-shadow: 0 0 0 4px rgba(22, 50, 95, .1);
}
.buscador-cat i {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-tenue);
  font-size: 13px;
  pointer-events: none;
}

.fichas-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.ficha-f {
  padding: 9px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: var(--blanco);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-media);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--rapido);
}
.ficha-f:hover { border-color: var(--marino); color: var(--marino); }
.ficha-f[aria-pressed="true"] {
  background: var(--marino);
  border-color: var(--marino);
  color: var(--blanco);
}
.ficha-f .cuenta { opacity: .6; margin-left: 6px; font-size: 11px; }

/* --- Rejilla --- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--e5);
}

.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--blanco);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--medio), box-shadow var(--medio),
              border-color var(--medio);
}
.producto:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: transparent;
}
.producto:focus-visible { outline: 2px solid var(--marino); outline-offset: 3px; }

.producto-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--marino-tenue), var(--hueso));
  overflow: hidden;
}
.producto-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--lento);
}
.producto:hover .producto-foto img { transform: scale(1.06); }

/* Cuando no hay foto: una silueta discreta, no un hueco gris. */
.sin-foto {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--marino);
  opacity: .3;
}
.sin-foto i { font-size: 40px; }
.sin-foto span {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

.marca-esquina {
  position: absolute;
  top: var(--e3); left: var(--e3);
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--marino);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--s1);
}
.marca-agotado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.producto-cuerpo {
  padding: var(--e4) var(--e4) var(--e5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.producto-cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.producto-nombre {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.3;
}
.producto-resumen {
  font-size: 13.5px;
  color: var(--tinta-media);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto-precio {
  margin-top: auto;
  padding-top: var(--e3);
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  flex-wrap: wrap;
}
.producto-precio .desde {
  font-size: 11px;
  color: var(--tinta-tenue);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.producto-precio .monto {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  color: var(--marino);
}
.producto-precio .antes {
  font-size: 13px;
  color: var(--tinta-tenue);
  text-decoration: line-through;
}
.producto-precio .rebaja {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(192, 57, 43, .1);
  color: var(--peligro);
  font-size: 11px;
  font-weight: 700;
}
.producto-precio .consultar {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-media);
}

.producto-pie {
  display: flex;
  gap: var(--e2);
  padding: 0 var(--e4) var(--e4);
}
.producto-pie .bt { flex: 1; padding: 11px 14px; font-size: 12px; }

/* Aparición escalonada de las tarjetas. */
.producto.entra { animation: subir-tarjeta 560ms cubic-bezier(.16,.84,.28,1) both; }
@keyframes subir-tarjeta {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.mas-productos { text-align: center; margin-top: var(--e7); }

.vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--e9) var(--e5);
  color: var(--tinta-media);
}
.vacio i { font-size: 46px; color: var(--linea); margin-bottom: var(--e4); }
.vacio h3 { font-size: 22px; color: var(--tinta); margin-bottom: 8px; }

/* ==========================================================================
   9. VENTANA DE PRODUCTO
   ========================================================================== */
.velo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
  background: rgba(10, 21, 38, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--medio);
}
.velo-modal.abierto { opacity: 1; pointer-events: auto; }

.modal {
  width: min(980px, 100%);
  max-height: min(88vh, 780px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--blanco);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--s4);
  transform: translateY(28px) scale(.97);
  opacity: 0;
  transition: transform var(--medio), opacity var(--medio);
}
.velo-modal.abierto .modal { transform: none; opacity: 1; }

.modal-fotos {
  position: relative;
  background: linear-gradient(150deg, var(--marino-tenue), var(--hueso));
  display: flex;
  flex-direction: column;
}
/* `contain` y no `cover`: al abrir el detalle interesa ver la pieza
   completa. Recortada se pierde justo lo que el cliente quiere mirar. */
.modal-foto-grande {
  flex: 1;
  min-height: 300px;
  margin: var(--e4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image var(--medio);
}
.modal-miniaturas {
  display: flex;
  gap: var(--e2);
  padding: var(--e3);
  overflow-x: auto;
}
.modal-miniaturas button {
  flex: 0 0 62px;
  height: 62px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--rapido);
}
.modal-miniaturas button[aria-current="true"] { border-color: var(--marino); }

.modal-datos {
  padding: var(--e6);
  overflow-y: auto;
}
.modal-datos h2 { font-size: 28px; margin-bottom: var(--e2); }
.modal-cat {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 700;
}
.modal-parrafos p { color: var(--tinta-media); font-size: 14.5px; }

.lista-check { list-style: none; padding: 0; margin: var(--e4) 0; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--tinta-media);
}
.lista-check li::before {
  content: '\2713';
  color: var(--exito);
  font-weight: 700;
  flex-shrink: 0;
}

.tabla-tamanos {
  width: 100%;
  border-collapse: collapse;
  margin: var(--e4) 0;
  font-size: 14px;
}
.tabla-tamanos th, .tabla-tamanos td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea-suave);
  text-align: left;
}
.tabla-tamanos th {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.tabla-tamanos td:last-child {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  color: var(--marino);
}

.cerrar-modal {
  position: absolute;
  top: var(--e3); right: var(--e3);
  z-index: 3;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--s2);
  transition: transform var(--rapido);
}
.cerrar-modal:hover { transform: rotate(90deg); }

/* ==========================================================================
   10. PEDIDO (carrito)
   ========================================================================== */
.boton-pedido {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border: none;
  border-radius: var(--r-full);
  background: var(--noche);
  color: var(--blanco);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(10, 21, 38, .34);
  transform: translateY(120px);
  transition: transform var(--medio), box-shadow var(--rapido);
}
.boton-pedido.visible { transform: none; }
.boton-pedido:hover { box-shadow: 0 18px 46px rgba(10, 21, 38, .48); }
.boton-pedido .globo {
  min-width: 24px;
  height: 24px;
  padding-inline: 7px;
  border-radius: var(--r-full);
  background: var(--blanco);
  color: var(--noche);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.boton-pedido.late { animation: latido .5s ease; }
@keyframes latido {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.12); }
}

.cajon {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1000;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  box-shadow: var(--s4);
  transform: translateX(102%);
  transition: transform var(--medio);
}
.cajon.abierto { transform: none; }

.cajon-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e5);
  border-bottom: 1px solid var(--linea);
}
.cajon-cabeza h3 { font-size: 19px; }
.cajon-lista { flex: 1; overflow-y: auto; padding: var(--e4) var(--e5); }
.cajon-pie {
  padding: var(--e5);
  border-top: 1px solid var(--linea);
  background: var(--hueso);
}
.cajon-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--e4);
}
.cajon-total .monto {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--marino);
}
.cajon-pie .bt { width: 100%; }
.cajon-nota {
  margin: var(--e3) 0 0;
  font-size: 12px;
  color: var(--tinta-tenue);
  text-align: center;
}

.renglon {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea-suave);
  animation: subir-tarjeta 320ms both;
}
.renglon .mini {
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--marino-tenue);
}
.renglon .nom { font-weight: 600; font-size: 14px; line-height: 1.3; }
.renglon .det { font-size: 12px; color: var(--tinta-tenue); }
.renglon .cant {
  display: flex;
  align-items: center;
  gap: 6px;
}
.renglon .cant button {
  width: 26px; height: 26px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  color: var(--tinta-media);
  cursor: pointer;
  line-height: 1;
}
.renglon .cant button:hover { border-color: var(--marino); color: var(--marino); }
.renglon .cant span { min-width: 22px; text-align: center; font-weight: 600; }

.cajon-vacio {
  text-align: center;
  padding: var(--e8) var(--e4);
  color: var(--tinta-tenue);
}
.cajon-vacio i { font-size: 40px; opacity: .35; margin-bottom: var(--e3); }

/* ==========================================================================
   11. RESEÑAS
   ========================================================================== */
.resenas { background: var(--hueso); }
.tira-resenas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e5);
  margin-top: var(--e7);
}
.resena {
  padding: var(--e6);
  border-radius: var(--r-lg);
  background: var(--blanco);
  border: 1px solid var(--linea);
  position: relative;
  transition: transform var(--medio), box-shadow var(--medio);
}
.resena:hover { transform: translateY(-5px); box-shadow: var(--s3); }
.resena::before {
  content: '\201C';
  position: absolute;
  top: 6px; right: 22px;
  font-family: Georgia, serif;
  font-size: 68px;
  color: var(--acento);
  opacity: .3;
  line-height: 1;
}
.estrellas { color: var(--acento); font-size: 13px; letter-spacing: 2px; }
.estrellas .apagada { color: var(--linea); }
.resena p { font-size: 15px; color: var(--tinta-media); margin: var(--e3) 0; }
.resena .quien { font-family: var(--display); font-weight: 700; font-size: 14px; }
.resena .donde { font-size: 12px; color: var(--tinta-tenue); }

/* ==========================================================================
   12. SUCURSALES
   ========================================================================== */
.sucursales { background: var(--blanco); }
.tira-sucursales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--e5);
  margin-top: var(--e7);
}
.sucursal {
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--medio), box-shadow var(--medio);
}
.sucursal:hover { transform: translateY(-5px); box-shadow: var(--s3); }
.sucursal iframe {
  width: 100%;
  height: 210px;
  border: 0;
  display: block;
  filter: grayscale(.35) contrast(1.03);
  transition: filter var(--medio);
}
.sucursal:hover iframe { filter: none; }
.sucursal-datos { padding: var(--e5); }
.sucursal-datos h3 { font-size: 18px; margin-bottom: var(--e2); }
.sucursal-datos p {
  margin: 4px 0;
  font-size: 14px;
  color: var(--tinta-media);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sucursal-datos i { color: var(--marino); width: 16px; margin-top: 4px; }

/* ==========================================================================
   13. PIE
   ========================================================================== */
.pie {
  background: var(--noche);
  color: rgba(255, 255, 255, .72);
  /* El hueco de abajo es para el botón flotante del pedido: si no, tapa
     el aviso de precios. */
  padding: var(--e9) 0 96px;
}
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--e7);
}
.pie h4 {
  color: var(--blanco);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: var(--e4);
}
.pie a:hover { color: var(--acento-claro); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 10px; font-size: 14px; }

.redes { display: flex; gap: var(--e3); margin-top: var(--e5); }
.redes a {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--blanco);
  transition: all var(--rapido);
}
.redes a:hover {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--noche);
  transform: translateY(-3px);
}

.pie-abajo {
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   14. AVISOS FLOTANTES
   ========================================================================== */
.avisos {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  pointer-events: none;
}
.aviso {
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--noche);
  color: var(--blanco);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--s3);
  animation: aviso-entra 300ms both;
}
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. REVELADO AL BAJAR
   --------------------------------------------------------------------------
   Punto importante: el estado escondido lo pone el JS (clase `js-anima` en
   <html>). Si el JS no corre, la página se lee completa. Nunca se oculta
   contenido con CSS que dependa de que algo más lo destape.
   ========================================================================== */
.js-anima .revelar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--lento), transform var(--lento);
}
.js-anima .revelar.visto { opacity: 1; transform: none; }
.js-anima .revelar.d1 { transition-delay: 90ms; }
.js-anima .revelar.d2 { transition-delay: 180ms; }
.js-anima .revelar.d3 { transition-delay: 270ms; }
.js-anima .revelar.d4 { transition-delay: 360ms; }

/* ==========================================================================
   15.1 ENTRADA DE LA PORTADA
   --------------------------------------------------------------------------
   La portada NO usa el revelado por observador: está arriba de todo, así
   que el observador se dispararía de golpe y las cosas aparecerían todas
   al mismo tiempo. Aquí la entrada va coreografiada con retardos fijos:
   primero el logotipo, luego el descriptor, el título, el texto, los
   botones y al final las cifras. Cada cosa entra cuando la anterior ya se
   está acomodando.
   ========================================================================== */
.entra-portada {
  animation: portada-entra 1000ms cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes portada-entra {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* El logotipo entra distinto: llega desenfocado y se define. Es el gesto
   que más «marca» hace, y por eso es el único que se permite. */
.portada-logo {
  animation: logo-entra 1400ms cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes logo-entra {
  from { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(14px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.retardo-1 { animation-delay: 420ms; }
.retardo-2 { animation-delay: 560ms; }
.retardo-3 { animation-delay: 700ms; }
.retardo-4 { animation-delay: 840ms; }
.retardo-5 { animation-delay: 980ms; }

/* Un resplandor suave que sigue al puntero dentro de la portada. Las
   coordenadas las pone el JS en --px / --py; sin JS se queda quieto en el
   centro, que también se ve bien. */
.portada-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    340px 340px at var(--px, 50%) var(--py, 42%),
    rgba(169, 190, 218, .10), transparent 68%);
  opacity: 0;
  transition: opacity 600ms ease;
}
.portada:hover .portada-luz { opacity: 1; }

/* ==========================================================================
   15.2 BARRA DE AVANCE
   --------------------------------------------------------------------------
   Una línea finísima hasta arriba que dice cuánto llevas leído. Cuesta dos
   renglones y le da a la página la sensación de que responde.
   ========================================================================== */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  height: 2px;
  pointer-events: none;
}
.progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--marino-claro), var(--acento));
  transition: width 90ms linear;
}

/* ==========================================================================
   15.3 TÍTULOS QUE SE DESCUBREN
   --------------------------------------------------------------------------
   El título no aparece: se descubre de abajo hacia arriba, como si algo lo
   destapara. Se hace con una máscara, no escondiendo el texto, para que
   siga siendo texto seleccionable y legible para los buscadores.
   ========================================================================== */
.js-anima .titulo-seccion {
  --tapa: 100%;
  -webkit-mask-image: linear-gradient(to top, transparent var(--tapa), #000 calc(var(--tapa) + 1%));
  mask-image: linear-gradient(to top, transparent var(--tapa), #000 calc(var(--tapa) + 1%));
  transition: --tapa 900ms cubic-bezier(.16, .84, .28, 1);
}
.js-anima .titulo-seccion.visto { --tapa: 0%; }

/* La propiedad personalizada sólo se puede animar si se registra. Donde no
   se soporte, el título simplemente aparece sin la máscara: no se pierde
   nada. */
@property --tapa {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

/* Rayita que se dibuja al lado del antetítulo al entrar. Sólo en los que
   pasan por el observador: el de la portada entra con la coreografía y
   nunca recibe la clase `visto`, así que se quedaría sin rayita. */
.js-anima .antetitulo.revelar::before { width: 0; transition: width 700ms ease 120ms; }
.js-anima .antetitulo.revelar.visto::before { width: 26px; }

/* ==========================================================================
   15.4 FOTOS QUE SE DESTAPAN
   ========================================================================== */
.producto-foto img,
.destacado img {
  animation: destapar 900ms cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes destapar {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* La tarjeta se levanta y la foto se acerca; ya estaba, pero ahora la
   sombra también crece desde el propio color de la marca. */
.producto:hover { box-shadow: 0 20px 46px rgba(22, 50, 95, .14); }

/* Los botones de la tarjeta asoman al pasar el ratón. En pantalla táctil
   se quedan siempre visibles: ahí no hay «pasar el ratón». */
@media (hover: hover) and (min-width: 761px) {
  .producto-pie {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--medio), transform var(--medio);
  }
  .producto:hover .producto-pie,
  .producto:focus-within .producto-pie { opacity: 1; transform: none; }
}

/* ==========================================================================
   15.5 DETALLES QUE RESPONDEN
   ========================================================================== */
/* La ficha del filtro empuja un poco al elegirla. */
.ficha-f { transition: all var(--rapido), transform 220ms cubic-bezier(.2,.7,.3,1); }
.ficha-f[aria-pressed="true"] { transform: translateY(-1px); }

/* Los renglones del pedido entran uno tras otro. */
.renglon { animation: subir-tarjeta 320ms cubic-bezier(.16,.84,.28,1) both; }
.renglon:nth-child(2) { animation-delay: 50ms; }
.renglon:nth-child(3) { animation-delay: 100ms; }
.renglon:nth-child(4) { animation-delay: 150ms; }
.renglon:nth-child(n+5) { animation-delay: 200ms; }

/* El contenido de la ventana del producto entra escalonado. */
.velo-modal.abierto .modal-datos > * {
  animation: subir-tarjeta 460ms cubic-bezier(.16,.84,.28,1) both;
}
.velo-modal.abierto .modal-datos > *:nth-child(1) { animation-delay: 90ms; }
.velo-modal.abierto .modal-datos > *:nth-child(2) { animation-delay: 140ms; }
.velo-modal.abierto .modal-datos > *:nth-child(3) { animation-delay: 190ms; }
.velo-modal.abierto .modal-datos > *:nth-child(4) { animation-delay: 240ms; }
.velo-modal.abierto .modal-datos > *:nth-child(n+5) { animation-delay: 290ms; }

/* La flechita de «desliza» se apaga en cuanto empiezas a bajar: si sigue
   ahí cuando ya bajaste, estorba. */
.bajar { transition: opacity 400ms ease, transform 400ms ease; }
.bajar.se-va { opacity: 0; transform: translate(-50%, 14px); }

/* ==========================================================================
   16. PANTALLA DE MANTENIMIENTO
   ========================================================================== */
.mantenimiento {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--e6);
  background: var(--noche);
  color: var(--blanco);
}
.mantenimiento h1 { font-size: clamp(28px, 5vw, 46px); margin-bottom: var(--e4); }
.mantenimiento p { color: rgba(255, 255, 255, .72); max-width: 46ch; }

/* ==========================================================================
   17. PANTALLAS CHICAS
   --------------------------------------------------------------------------
   Casi todo el mundo va a abrir esto desde el celular, así que el teléfono
   no es «la versión chica»: es la versión principal. Tres cosas se cuidan
   aquí especialmente:

     · Que nada quede debajo de la barra del navegador ni del notch
       (se usan las áreas seguras del sistema).
     · Que se pueda tocar todo con el pulgar: nada de blancos de menos de
       44 píxeles.
     · Que no se pida al teléfono trabajo de más: los efectos que cuestan
       (el resplandor que sigue al dedo, el desplazamiento de la foto de
       portada) se apagan solos en pantallas táctiles.
   ========================================================================== */
@media (max-width: 980px) {
  .modal { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (max-width: 760px) {
  :root { --e9: 76px; --e8: 52px; }

  .envoltura { width: calc(100% - 32px); }
  .seccion { padding: var(--e9) 0; }

  /* --- Barra --- */
  .cabecera { padding: 12px 16px; }
  .nav { display: none; }
  .menu-movil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
  }
  .logo-marca img { height: 38px; }
  .cabecera.posada .logo-marca img { height: 32px; }

  /* --- Portada ---
     100svh y no 100vh: en el celular la barra del navegador aparece y
     desaparece al desplazarse, y con vh la portada «brincaba» de alto
     cada vez. */
  .portada {
    min-height: 100svh;
    padding: 96px 0 var(--e8);
  }
  .portada-logo { width: min(340px, 76vw); margin-bottom: var(--e5); }
  .portada h1 { font-size: clamp(22px, 6.6vw, 30px); }
  .portada p { font-size: 15px; }
  .portada-botones { width: 100%; flex-direction: column; }
  .portada-botones .bt { width: 100%; }
  .portada-datos {
    gap: var(--e4) var(--e4);
    margin-top: var(--e7);
    justify-content: flex-start;
  }
  .dato { flex: 1 1 78px; text-align: left; }
  .dato .cifra { font-size: 22px; }
  .dato .dato-pie { font-size: 9.5px; letter-spacing: .12em; }
  .bajar { display: none; }

  /* --- Filtros ---
     La barra deja de ser pastilla flotante y se vuelve dos renglones: el
     campo arriba y las categorías deslizándose abajo, con enganche para
     que cada ficha quede completa al soltar. */
  .barra-filtros {
    position: sticky;
    top: 62px;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    padding: var(--e2);
    border-radius: var(--r-lg);
  }
  /* Dos cosas aquí:
     · `flex: 1 1 240px` en columna hacía que el campo creciera hacia
       ABAJO y dejara un hueco enorme.
     · El ancho se fija a 100% en vez de dejarlo al estirado automático:
       con `flex-basis` en píxeles hay navegadores que le dan al campo el
       ancho de la base y se sale de la barra. */
  .buscador-cat {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .buscador-cat input { padding-block: 13px; max-width: 100%; }
  /* min-width: 0 es lo que impide que la fila de fichas empuje la barra
     más allá del ancho de la pantalla: sin esto, un elemento flexible se
     niega a encogerse por debajo de su contenido y todo se desborda. */
  .fichas-filtro {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fichas-filtro::-webkit-scrollbar { display: none; }
  .ficha-f { scroll-snap-align: start; padding: 10px 16px; }
  #cuentaResultados { display: none; }

  /* --- Rejilla ---
     Dos por renglón. Una sola columna obliga a desplazarse muchísimo y
     la página se siente vacía; dos se ven bien hasta en pantallas de
     360 puntos. */
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
  .producto-cuerpo { padding: var(--e3) var(--e3) var(--e4); }
  .producto-nombre { font-size: 14.5px; }
  .producto-resumen { font-size: 12.5px; -webkit-line-clamp: 2; }
  .producto-precio .monto { font-size: 17px; }
  .producto-precio .antes, .producto-precio .rebaja { font-size: 11px; }
  .producto-pie { padding: 0 var(--e3) var(--e3); flex-direction: column; }
  .producto-pie .bt { width: 100%; padding: 11px 10px; }
  .marca-esquina { font-size: 9px; padding: 4px 9px; }

  .tira-destacados { grid-template-columns: 1fr; }
  .destacado { aspect-ratio: 4 / 3; }

  /* --- Ventana del producto: hoja que sube desde abajo --- */
  .velo-modal { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .velo-modal.abierto .modal { transform: none; }
  .modal-fotos { max-height: 38svh; }
  .modal-foto-grande { min-height: 190px; margin: var(--e3); }
  .modal-datos { padding: var(--e4) var(--e5) var(--e6); }
  .modal-datos h2 { font-size: 22px; }
  /* La agarradera de arriba: le dice al pulgar que esto se puede cerrar
     jalando hacia abajo. */
  .modal::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .55);
    z-index: 4;
  }
  .cerrar-modal { width: 44px; height: 44px; }

  /* --- Pedido --- */
  .cajon {
    width: 100%;
    max-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .cajon-cabeza, .cajon-pie { padding: var(--e4); }
  .cajon-lista { padding: var(--e3) var(--e4); }
  .renglon .cant button { width: 34px; height: 34px; }

  .boton-pedido {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 14px 20px;
  }
  .avisos { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 28px); }
  .aviso { text-align: center; }

  /* --- Resto --- */
  .tira-resenas, .tira-sucursales { grid-template-columns: 1fr; }
  .resena { padding: var(--e5); }
  .sucursal iframe { height: 180px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: var(--e6); }
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .pie-abajo { flex-direction: column; gap: var(--e2); }
}

/* Teléfonos angostos: una sola columna, que dos ya no caben con dignidad. */
@media (max-width: 359px) {
  .rejilla { grid-template-columns: 1fr; }
}

/* En pantalla táctil se apagan los efectos que dependen del puntero y los
   que piden repintar en cada desplazamiento. Ahorran batería y evitan que
   la página se sienta pesada. */
@media (hover: none) {
  .portada-luz { display: none; }
  .portada-foto { transform: none !important; }
  .producto:hover { transform: none; }
  .destacado:hover { transform: none; }
  .resena:hover, .sucursal:hover { transform: none; }
}

/* Pantallas anchas de verdad: la rejilla no crece sin fin. */
@media (min-width: 1500px) {
  :root { --ancho: 1360px; }
}

/* ==========================================================================
   18. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anima .revelar { opacity: 1; transform: none; }
  /* Quien pidió menos movimiento tiene que ver la página completa, no una
     página con partes tapadas por una máscara que ya no se va a animar. */
  .js-anima .titulo-seccion {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .js-anima .antetitulo::before { width: 26px; }
  .portada-logo, .entra-portada,
  .producto-foto img, .destacado img { animation: none; opacity: 1; }
  .producto-foto img, .destacado img { clip-path: none; }
  .progreso { display: none; }
}

@media print {
  .cabecera, .boton-pedido, .cajon, .velo-modal, .barra-filtros,
  .producto-pie, .bajar, .franja { display: none !important; }
  body.cat { background: #fff; color: #000; }
  .seccion { padding: 20px 0; }
  .producto { break-inside: avoid; border: 1px solid #ccc; }
}