/* Diseño de respaldo del sitio público.
   Ningún color de marca escrito a mano fuera de :root: los tokens los reescribe
   el panel con los colores del cliente (v0.7), y así el mismo tema sirve para
   dos negocios distintos. */

:root {
  --marca: #d9a441;
  --marca-oscuro: #b7862c;
  --marca-contraste: #231a05;
  --fondo: #0f1115;
  --fondo-suave: #171a21;
  --borde: #262b36;
  --texto: #e7eaf0;
  --texto-suave: #98a1b4;
  --whatsapp: #25d366;
  --abierto: #4ade80;
  --whatsapp-contraste: #04310f;
  --radio: 12px;
  --ancho: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` gana siempre.
   Sin esta línea, cualquier regla que ponga `display` a un elemento —y hay
   docenas— deja sin efecto el atributo `hidden` que pone el JavaScript. Pasó
   con el desplegable de opciones: se escondía al arrancar los circulitos de
   color, `.pedir__opciones { display: block }` lo volvía a enseñar, y el
   comprador veía las dos cosas a la vez. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 4px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--marca); color: var(--marca-contraste); padding: 10px 16px;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- estructura ---------- */

main { max-width: var(--ancho); margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* Un renglón, siempre. Sin `flex-wrap`: envolviendo, el sexto enlace de
   categoría partía la cabecera en tres filas y el catálogo empezaba por debajo
   de lo que se ve sin bajar. Lo que no cabe se va al menú lateral. */
.cabecera {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--ancho); margin: 0 auto; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borde);
}
.cabecera__marca {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.05rem; color: var(--texto);
}
.cabecera__logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
/* Las categorías ruedan a lo ancho cuando son muchas. La barra de scroll se
   esconde: en escritorio ocupa un renglón entero debajo de los enlaces y se ve
   como un fallo, y arrastrar con el dedo o con la rueda funciona igual. */
.cabecera__nav {
  display: flex; gap: 1rem; margin-right: auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; min-width: 0;
  /* Un respiro a los lados para que el primero y el último no queden pegados
     al borde al llegar al final del deslizamiento. */
  padding: .2rem .1rem;
}
.cabecera__nav::-webkit-scrollbar { display: none; }
.cabecera__nav a {
  color: var(--texto-suave); font-size: .92rem;
  white-space: nowrap; scroll-snap-align: start;
}
.cabecera__nav a[aria-current="page"] { color: var(--marca); }

/* ---------- el menú lateral ---------- */

/* Sin JavaScript: una casilla escondida y su etiqueta. Marcarla abre el panel.
   Un menú que necesita JavaScript para abrirse es un menú que en el navegador
   de Instagram —de donde llega media clientela de estos negocios— a veces no
   abre, y entonces el catálogo no tiene forma de recorrerse. */
.menu-lateral__interruptor { position: absolute; opacity: 0; pointer-events: none; }

.cabecera__menu {
  display: none; cursor: pointer; flex-direction: column; gap: 4px;
  width: 40px; height: 40px; padding: 11px 8px; flex: 0 0 auto;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo-suave);
}
.cabecera__menu span { display: block; height: 2px; background: var(--texto); border-radius: 2px; }

.menu-lateral__fondo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.menu-lateral {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
  width: min(84vw, 20rem); padding: 1.1rem;
  background: var(--fondo-suave); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  visibility: hidden;
}

.menu-lateral__interruptor:checked ~ .menu-lateral__fondo { opacity: 1; visibility: visible; }
.menu-lateral__interruptor:checked ~ .menu-lateral { transform: translateX(0); visibility: visible; }

/* El fondo no se mueve mientras el panel está abierto. Sin esto, arrastrar
   sobre el panel hace rodar la página de detrás, y al cerrar el catálogo está
   en otro sitio. */
.menu-lateral__interruptor:checked ~ .cabecera,
body:has(.menu-lateral__interruptor:checked) { overflow: hidden; }

.menu-lateral__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.menu-lateral__titulo { font-weight: 700; }
.menu-lateral__cerrar {
  cursor: pointer; font-size: 1.6rem; line-height: 1;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 8px; color: var(--texto-suave);
}
.menu-lateral__cerrar:hover { background: var(--borde); color: var(--texto); }

.menu-lateral__nav { display: flex; flex-direction: column; }
.menu-lateral__nav a {
  padding: .7rem .2rem; color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
.menu-lateral__nav a[aria-current="page"] { color: var(--marca); }
.menu-lateral__rotulo {
  margin: 1rem 0 .2rem; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-suave);
}

/* El buscador es UNA pieza: el campo y la lupa dentro del mismo borde, que se
   ilumina entero al escribir. Ancho contenido —18rem— porque un buscador que
   cruza la pantalla parece la barra de direcciones del navegador. */
/* En el menú lateral el buscador ocupa todo el ancho: ahí no compite con nada
   y es lo primero que se toca. */
.buscador--menu { width: 100%; }

.buscador {
  display: flex; align-items: center; gap: 0;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0 .25rem 0 0;
  width: min(18rem, 100%);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.buscador:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}
.buscador input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; color: var(--texto);
  padding: .6rem .5rem .6rem 1rem; font: inherit; font-size: .92rem;
  -webkit-appearance: none;
}
.buscador input:focus { outline: none; }
.buscador input::placeholder { color: var(--texto-suave); }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador button {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: var(--texto-suave); cursor: pointer;
}
.buscador button svg { width: 1.05rem; height: 1.05rem; }
.buscador button:hover { color: var(--marca); }

/* Debajo de 900 px el menú lateral toma el relevo: fuera las categorías y el
   buscador de la cabecera, dentro el botón. El punto de corte es el ancho en el
   que un catálogo con seis marcas deja de caber junto al buscador.

   Va DESPUÉS de `.buscador`, y no arriba con el resto de la cabecera, porque
   `.buscador--cabecera` y `.buscador` pesan lo mismo: con la consulta antes,
   el `display: flex` de `.buscador` la pisaba por venir después y el buscador
   seguía saliendo en el celular, encima del nombre del negocio. Una consulta
   de medios no gana por serlo. */
@media (max-width: 900px) {
  .cabecera__menu { display: flex; }
  .cabecera__nav, .buscador--cabecera { display: none; }
  .cabecera__marca { margin-right: auto; }
}
@media (min-width: 901px) {
  .menu-lateral, .menu-lateral__fondo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lateral, .menu-lateral__fondo { transition: none; }
}

/* Los campos del tema, con la misma regla que el panel: se estilan todos, y no
   una lista de tipos que siempre se queda corta. */
.pagina input:not([type=checkbox]):not([type=radio]):not([type=file]),
.pagina select, .pagina textarea { color-scheme: dark; }

/* ---------- piezas ---------- */

.boton {
  display: inline-block; background: var(--marca); color: var(--marca-contraste);
  border-radius: 999px; padding: .7rem 1.4rem; font-weight: 600; border: 0;
  cursor: pointer; font: inherit; font-weight: 600;
}
.boton:hover { background: var(--marca-oscuro); text-decoration: none; }
.boton--grande { padding: .95rem 1.9rem; font-size: 1.05rem; }
.boton--whatsapp { background: var(--whatsapp); color: var(--whatsapp-contraste); }
.boton--whatsapp:hover { filter: brightness(.92); }

.encabezado { margin-bottom: 2rem; }
.encabezado--centrado { text-align: center; padding: 3rem 0; }
.encabezado__cuenta { color: var(--texto-suave); font-size: .9rem; margin: 0; }
.encabezado__texto { color: var(--texto-suave); }

.vacio { color: var(--texto-suave); padding: 2rem 0; }

.rejilla {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.tarjeta {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.tarjeta:hover { transform: translateY(-3px); border-color: var(--marca); }
.tarjeta--agotado { opacity: .65; }
.tarjeta__enlace { color: inherit; display: block; }
.tarjeta__enlace:hover { text-decoration: none; }
.tarjeta__foto { position: relative; aspect-ratio: 1; background: #10131a; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__sinfoto { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #151922, #1d2230); }
.tarjeta__nombre { font-size: .98rem; margin: .8rem .9rem .3rem; }
.tarjeta__precio { margin: 0 .9rem 1rem; color: var(--marca); }
.tarjeta__precio s { color: var(--texto-suave); margin-right: .4rem; font-size: .85em; }

.etiqueta {
  position: absolute; top: .6rem; left: .6rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .55rem; border-radius: 999px;
}
.etiqueta--agotado { background: #2c313c; color: var(--texto-suave); }
.etiqueta--oferta { background: var(--marca); color: var(--marca-contraste); }

.categorias { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0 0 2.5rem; }
.categorias a {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 999px; padding: .45rem 1rem; color: var(--texto); font-size: .92rem;
}
.categorias a:hover { border-color: var(--marca); text-decoration: none; }
.categorias__cuantos { color: var(--texto-suave); font-size: .82rem; }

/* ---------- las categorías de la portada, en una tira ---------- */

/* Una pastilla con la foto dentro. Redonda y chica —56 px— porque compite con
   los productos que hay debajo: si la foto de la categoría fuera del tamaño de
   la de un producto, la tira de categorías se leería como otra fila más de
   cosas que se compran. */
.pastilla-categoria {
  display: inline-flex; align-items: center; gap: .6rem;
  flex: 0 0 auto; scroll-snap-align: start;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 999px; padding: .4rem 1rem .4rem .4rem;
  color: var(--texto); font-size: .95rem; white-space: nowrap;
  transition: border-color .15s ease;
}
/* Sin foto la pastilla no lleva hueco vacío: se cierra el relleno de ese lado
   y queda una pastilla normal, igual que la del catálogo. */
.pastilla-categoria:not(:has(.pastilla-categoria__foto)) { padding-left: 1rem; }
.pastilla-categoria:hover { border-color: var(--marca); text-decoration: none; }
.pastilla-categoria__foto {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border-radius: 999px; overflow: hidden; background: var(--borde);
}
.pastilla-categoria__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pastilla-categoria__cuantos { color: var(--texto-suave); font-size: .82rem; }

/* La tira de categorías no necesita el hueco de abajo que dejan las filas de
   producto para la sombra del `:hover`. */
.fila__pista--categorias { padding-bottom: .35rem; align-items: center; }

/* ---------- todas las categorías, en fichas ---------- */

.fichas-categoria {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.ficha-categoria a {
  display: flex; flex-direction: column; gap: .7rem;
  color: var(--texto);
}
.ficha-categoria a:hover { text-decoration: none; }
.ficha-categoria a:hover .ficha-categoria__foto { border-color: var(--marca); }
/* Cuadrada y siempre del mismo alto tenga foto o no: una rejilla de fichas
   donde unas miden una cosa y otras otra se lee como un error de carga. */
.ficha-categoria__foto {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .15s ease;
}
.ficha-categoria__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La inicial, para la categoría sin foto. Del color de la marca y grande: es
   una letra, no un icono de «falta la imagen». */
.ficha-categoria__inicial {
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--marca); text-transform: uppercase;
}
.ficha-categoria__pie { display: flex; flex-direction: column; gap: .1rem; }
.ficha-categoria__nombre { font-weight: 600; }
.ficha-categoria__cuantos { color: var(--texto-suave); font-size: .84rem; }

.migas { color: var(--texto-suave); font-size: .88rem; margin-bottom: 1.5rem; }
.migas a { color: var(--texto-suave); }

.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 2.5rem; color: var(--texto-suave); }

/* ---------- portada ---------- */

/* La presentación de arriba —nombre, frase y los dos botones— se quitó en la
   v2.2: empujaba el catálogo por debajo de lo que se ve sin bajar, y decía lo
   que la cabecera y la pestaña del navegador ya dicen. Las reglas se van con
   ella; el <h1> que quedó es `.visualmente-oculto` y no necesita ninguna. */
.portada__mas { margin-top: 2rem; text-align: center; }

/* ---------- ficha ---------- */

.producto { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .producto { grid-template-columns: 1fr 1fr; align-items: start; } }

/* El visor: siempre el mismo cuadrado, se vea una foto, otra o el video.
   El `aspect-ratio` es lo que impide que la ficha pegue un salto al elegir un
   color cuya foto tiene otra proporción. */
.producto__principal {
  position: relative; border-radius: var(--radio); overflow: hidden;
  background: var(--fondo-suave); aspect-ratio: 1;
}
.producto__principal img { width: 100%; height: 100%; object-fit: cover; }

/* El video, encima de la foto y en su mismo hueco. La foto se queda debajo con
   `visibility:hidden` —no con `display:none`— para que el cuadro no se mueva. */
.producto__visorvideo { position: absolute; inset: 0; background: #000; }
.producto__visorvideo .video,
.producto__visorvideo iframe { width: 100%; height: 100%; border: 0; display: block; }
.producto__sinfoto { aspect-ratio: 1; border-radius: var(--radio); background: linear-gradient(135deg, #151922, #1d2230); }
/* La tira de miniaturas: UN renglón que se desliza, nunca dos.
   Con seis fotos la tira crecía hacia abajo y empujaba las opciones fuera de la
   pantalla del celular — justo donde se compra. En un renglón la ficha mide
   siempre lo mismo y lo que sobra se pasa con el dedo. */
/* `min-width: 0` es lo que impide que la tira mande sobre el ancho de la ficha.
   Sin él, una tira de siete miniaturas ensanchaba la columna entera y la foto
   grande cambiaba de tamaño al añadir la miniatura de la variación. */
.producto__tira { margin-top: .75rem; min-width: 0; }
.producto__fotos { min-width: 0; }
.producto__galeria {
  --minis-a-la-vista: 5;
  --mini-hueco: .6rem;
  display: flex; gap: var(--mini-hueco); flex-wrap: nowrap;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  /* Con cinco o menos, centradas; con más, empiezan a la izquierda y se
     deslizan. `safe` evita que al centrar se corte la primera al desbordar. */
  justify-content: safe center;
}
.producto__galeria::-webkit-scrollbar { display: none; }
.producto__miniatura {
  /* Cinco caben exactas, sea cual sea el ancho: la sexta asoma y se entiende
     sola que hay más. Antes eran 72px fijos y en el celular entraban tres y
     media, que no dice nada. */
  flex: 0 0 calc((100% - (var(--minis-a-la-vista) - 1) * var(--mini-hueco)) / var(--minis-a-la-vista));
  max-width: 84px; aspect-ratio: 1; height: auto; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--borde); scroll-snap-align: start;
  padding: 0; background: var(--fondo-suave); cursor: pointer;
}
.producto__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.producto__miniatura[aria-current="true"] { border-color: var(--marca); }
.producto__miniatura--variacion { border-color: var(--marca); border-width: 2px; }
.producto__miniatura--video {
  display: grid; place-items: center; color: var(--texto-suave);
}
.producto__miniatura--video svg { width: 26px; height: 26px; }
.producto__miniatura--video:hover { color: var(--marca); border-color: var(--marca); }

.producto__puntos { display: flex; gap: 5px; justify-content: center; margin-top: .5rem; }
.producto__puntos i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--borde);
  transition: background .15s ease;
}
.producto__puntos i.activo { background: var(--marca); }

/* El video ya no vive debajo de la ficha: se ve en el mismo visor que las
   fotos, tocando su miniatura. Así la ficha mide lo mismo con video y sin él, y
   en el celular las tallas siguen justo debajo de la foto. */
.producto__precio { font-size: 1.5rem; color: var(--marca); margin: 0 0 1rem; }
.producto__precio s { color: var(--texto-suave); font-size: .65em; margin-right: .5rem; }
.producto__descripcion { color: var(--texto-suave); }
/* Los dos botones, separados y del mismo ancho.
   Estaban pegados uno debajo del otro sin aire y con anchos distintos: parecía
   que el segundo se había caído del primero. Van en columna con su hueco, y
   «Preguntar» ocupa lo mismo que «Añadir» para que se lean como dos caminos y
   no como un botón y su sombra. */
.producto__acciones { margin-top: 1.75rem; display: grid; gap: .7rem; justify-items: stretch; }
.producto__acciones .boton { width: 100%; text-align: center; justify-content: center; }
/* El formulario de añadir trae dentro la cantidad y su botón, así que ese sí va
   en su propia fila y no se estira. */
.producto__acciones form { margin: 0; }
@media (min-width: 560px) {
  .producto__acciones { justify-items: start; }
  .producto__acciones .boton--tenue { width: auto; }
}

.aviso { border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1rem; }
.aviso--agotado { background: #2c313c; color: var(--texto-suave); }

.relacionados { margin-top: 4rem; }

/* ---------- pie ---------- */

.pie {
  border-top: 1px solid var(--borde); color: var(--texto-suave);
  max-width: var(--ancho); margin: 0 auto; padding: 2rem 1.25rem 3rem;
  display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap;
}
.pie p { margin: 0 0 .35rem; font-size: .9rem; }
.pie__negocio { color: var(--texto); font-weight: 600; }
.pie__redes { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .6rem; }
.pie__firma { align-self: flex-end; font-size: .85rem; }

/* El horario, un renglón por grupo de días. La lista es una lista de verdad y
   no párrafos sueltos: quien usa lector de pantalla oye «7 elementos» y sabe
   que viene un horario, no siete frases sin relación. */
.pie__horario { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .9rem; }
.pie__horario li { display: flex; gap: .5rem; }
.pie__horario span { color: var(--texto); min-width: 9.5rem; }
.pie__abierto { font-weight: 600; }
.pie__abierto--si { color: var(--abierto); }
.pie__abierto--no { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- tarjetas con varias fotos ---------- */

.tarjeta__foto { position: relative; overflow: hidden; }
.tarjeta__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.tarjeta__img--activa { opacity: 1; }
/* Sin JavaScript sólo existe la primera y tiene que verse igual. */
.tarjeta__foto:not([data-varias]) .tarjeta__img { position: static; opacity: 1; }

.tarjeta__puntos {
  position: absolute; bottom: .5rem; left: 0; right: 0;
  display: flex; gap: 4px; justify-content: center;
}
.tarjeta__puntos i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.45); transition: background .3s ease;
}
.tarjeta__puntos i.activo { background: #fff; }

/* ---------- la ficha encima del catálogo ---------- */

.capa { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.capa__fondo { position: absolute; inset: 0; background: rgba(6,8,12,.78); backdrop-filter: blur(2px); }
.capa__caja {
  position: relative; width: min(56rem, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.75rem;
  animation: capa-entra .18s ease-out;
}
@keyframes capa-entra { from { opacity: 0; transform: translateY(12px); } }
.capa__cerrar {
  position: sticky; top: 0; float: right; margin: -.5rem -.5rem 0 0;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borde);
  background: var(--fondo-suave); color: var(--texto);
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 1;
}
.capa__cerrar:hover { border-color: var(--marca); color: var(--marca); }
.capa__cargando { color: var(--texto-suave); padding: 3rem 0; text-align: center; }
.capa .producto { margin-top: .5rem; }

/* ---------- video y datos de la ficha ---------- */

.video { position: relative; padding-top: 56.25%; margin-top: 1rem; border-radius: var(--radio); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.producto__categoria { margin: -.25rem 0 1rem; }
.producto__categoria a { color: var(--texto-suave); font-size: .9rem; }
.producto__sku { color: var(--texto-suave); font-size: .85rem; margin: 1rem 0 0; }
.producto__precio .etiqueta { position: static; margin-left: .5rem; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta__img { transition: none; }
  .capa__caja { animation: none; }
}

/* ---------- variaciones ---------- */

.variaciones-elegir { margin: 1.25rem 0; }
.variaciones-elegir__selectores { display: grid; gap: .75rem; }
.variaciones-elegir__uno { display: grid; gap: .3rem; max-width: 18rem; }
.variaciones-elegir__uno label { font-size: .85rem; color: var(--texto-suave); }
.variaciones-elegir__uno select {
  background: var(--fondo-suave); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 8px; padding: .55rem .8rem; font: inherit;
}
.variaciones-elegir__aviso { color: #e0a34b; font-size: .9rem; margin: 0; }

.variaciones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.variaciones-lista li {
  display: flex; gap: .75rem; align-items: baseline;
  border-bottom: 1px solid var(--borde); padding: .4rem 0; font-size: .92rem;
}
.variaciones-lista strong { margin-left: auto; color: var(--marca); }
.variaciones-lista .agotada, .variaciones-lista li.agotada { opacity: .5; }
.variaciones-lista em { font-style: normal; color: var(--texto-suave); font-size: .85rem; }

.producto__desde { color: var(--texto-suave); font-size: .6em; margin-right: .3rem; }
[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- muestras: colores, miniaturas y botones ---------- */

.muestras { display: flex; gap: .5rem; flex-wrap: wrap; }
.muestra {
  background: var(--fondo-suave); border: 2px solid var(--borde);
  border-radius: 10px; padding: .35rem; cursor: pointer;
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  transition: border-color .15s ease, transform .12s ease;
}
.muestra:hover { border-color: var(--texto-suave); }
.muestra--elegida { border-color: var(--marca); transform: translateY(-1px); }
.muestra__color { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.muestra__texto { color: var(--texto); font-size: .88rem; padding: 0 .5rem; }
.muestras--imagen .muestra { padding: 0; overflow: hidden; }
.muestras--imagen img { width: 44px; height: 44px; object-fit: cover; display: block; }

.producto__pista { color: var(--texto-suave); font-size: .5em; display: block; margin-top: .2rem; }

.variaciones-todas { margin-top: 1rem; }
.variaciones-todas summary { cursor: pointer; color: var(--texto-suave); font-size: .88rem; }
.variaciones-todas .variaciones-lista { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) { .muestra { transition: none; } }

/* ---------- galería centrada ---------- */

/* (la tira se centra sola con `justify-content: safe center`) */

.variaciones-rango {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: 10px; padding: .6rem .9rem; margin: 1rem 0 0; font-size: .95rem;
}
.variaciones-rango strong { color: var(--marca); }

/* Aunque la lista sea corta, no puede comerse la pantalla. */
.variaciones-todas .variaciones-lista { max-height: 16rem; overflow-y: auto; }

/* ============================================================================
   EL PEDIDO
   Pensado para el pulgar antes que para el ratón: la mayoría de la gente entra
   desde el celular, y ahí lo que se toca tiene que ser grande y estar abajo.
   ========================================================================= */

.boton--tenue {
  background: none; color: var(--texto-suave);
  border: 1px solid var(--borde); padding: .7rem 1.2rem;
}
.boton--tenue:hover { color: var(--texto); border-color: var(--texto-suave); background: none; }
.boton--chico { padding: .5rem 1rem; font-size: .88rem; }

/* --- el acceso al pedido, en la cabecera --- */
.cabecera__pedido {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--texto); font-size: .92rem; white-space: nowrap;
}
.cabecera__pedido:hover { text-decoration: none; color: var(--marca); }
.cabecera__burbuja {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem;
  padding: 0 .35rem; border-radius: 999px;
  background: var(--marca); color: var(--marca-contraste);
  font-size: .8rem; font-weight: 700; line-height: 1;
}
.cabecera__burbuja--vacia { background: var(--borde); color: var(--texto-suave); }

/* --- añadir al pedido --- */
.pedir { margin: 0; }
.pedir__opciones { display: block; margin-bottom: .75rem; }
.pedir__etiqueta { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: .3rem; }
.pedir__select,
.pedir__cantidad {
  background: var(--fondo-suave); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 10px; padding: .7rem .8rem; font: inherit;
}
.pedir__select { width: 100%; max-width: 22rem; }
.pedir__fila { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
/* 4.5rem cabe un «99» y sigue siendo tocable con el pulgar. */
.pedir__cantidad { width: 4.5rem; text-align: center; }
.pedir__fila .boton { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.pedir__fila .boton:disabled { opacity: .55; cursor: default; }

.tarjeta__pedir { padding: 0 1rem 1rem; }
.tarjeta__pedir .pedir__cantidad { display: none; }   /* en la lista, siempre uno */
/* Con `text-align` porque uno de los dos botones es un `<a>` —«Elegir
   opciones»— y un enlace ancho al 100% no centra su texto solo: se quedaría
   pegado a la izquierda al lado de los «Añadir», que sí lo centran. */
.tarjeta__pedir .boton { width: 100%; text-align: center; }

/* --- el aviso flotante --- */
.aviso-flotante {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1.5rem);
  /* Por encima del recuadro rápido (z-index 1000). Estaba en 40 y el aviso de
     «se añadió a tu pedido» salía DETRÁS de la capa: apenas se adivinaba. */
  z-index: 1100; max-width: min(28rem, calc(100vw - 2rem));
  background: var(--fondo-suave); color: var(--texto);
  border: 1px solid var(--borde); border-left: 4px solid var(--marca);
  border-radius: 10px; padding: .8rem 1.1rem; font-size: .95rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.aviso-flotante--visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-flotante--malo { border-left-color: #e0575b; }
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { transition: none; }
}

/* --- la página del pedido --- */
.pedido { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .pedido { grid-template-columns: 1fr 22rem; align-items: start; }
}

.pedido-vacio { color: var(--texto-suave); padding: 2rem 0; }
.pedido-vacio .boton { margin-top: .5rem; }

.linea {
  display: grid; gap: .25rem .9rem; align-items: start;
  grid-template-columns: 72px 1fr auto;
  padding: 1rem 0; border-bottom: 1px solid var(--borde);
}
.linea__foto img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.linea__sinfoto {
  display: block; width: 72px; height: 72px; border-radius: 10px;
  background: var(--fondo-suave); border: 1px solid var(--borde);
}
.linea__nombre { font-size: 1rem; margin: 0 0 .15rem; }
.linea__nombre a { color: var(--texto); }
.linea__opciones { margin: 0; color: var(--texto-suave); font-size: .88rem; }
.linea__precio { margin: .15rem 0 0; color: var(--texto-suave); font-size: .85rem; }
.linea__total { margin: 0; font-weight: 700; text-align: right; }

.linea__acciones {
  grid-column: 2 / -1; display: flex; gap: .6rem; align-items: center;
  flex-wrap: wrap; margin-top: .5rem;
}
.linea__cantidad { display: flex; gap: .35rem; }
.linea__cantidad input {
  width: 4rem; text-align: center; font: inherit; padding: .45rem;
  background: var(--fondo-suave); border: 1px solid var(--borde);
  color: var(--texto); border-radius: 8px;
}
.linea__cantidad button,
.linea__quitar {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: none; border: 1px solid var(--borde); color: var(--texto-suave);
  border-radius: 8px; padding: .45rem .8rem;
}
.linea__cantidad button:hover { color: var(--marca); border-color: var(--marca); }
.linea__quitar:hover { color: #e0575b; border-color: #e0575b; }

.pedido__resumen {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 1rem 0; font-size: 1.1rem;
}
.pedido__resumen span { color: var(--texto-suave); font-size: .95rem; }
.pedido__resumen strong { font-size: 1.35rem; }
.pedido__seguir { margin: 0; font-size: .9rem; }

/* --- los datos y el envío --- */
.pedido__datos {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.25rem;
}
@media (min-width: 900px) { .pedido__datos { position: sticky; top: 1rem; } }

.pedido-form__campo { margin: 0 0 .9rem; }
.pedido-form__campo label {
  display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: .3rem;
}
.pedido-form__campo input,
.pedido-form__campo textarea {
  width: 100%; font: inherit; padding: .75rem .8rem; border-radius: 10px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
}
.pedido-form__campo textarea { resize: vertical; min-height: 3rem; }

/* Las casillas nunca vienen marcadas y son dos, separadas. El área tocable es
   la etiqueta entera: en un celular, acertarle a un cuadrito de 13px es pedir
   demasiado. */
.pedido-form__casilla { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.45; }
.pedido-form__casilla label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.pedido-form__casilla input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.pedido-form__enviar {
  width: 100%; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  background: var(--whatsapp); color: var(--whatsapp-contraste);
  border: 0; border-radius: 999px; padding: .95rem 1.5rem; margin-top: .4rem;
}
.pedido-form__enviar:hover { filter: brightness(.93); }
.pedido-form__enviar:disabled { opacity: .6; cursor: default; }
.pedido-form__aviso { margin: .8rem 0 0; font-size: .82rem; color: var(--texto-suave); }
.pedido-form__error {
  margin: .8rem 0 0; font-size: .9rem; color: #ffb3b5;
  background: rgba(224, 87, 91, .12); border: 1px solid rgba(224, 87, 91, .35);
  border-radius: 8px; padding: .6rem .8rem;
}

.aviso--cambio {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-left: 4px solid var(--marca); border-radius: 8px;
  padding: .7rem 1rem; margin: 0 0 .8rem; font-size: .92rem;
}

/* --- el pedido ya guardado --- */
.guardado { max-width: 34rem; margin: 0 auto; }
.guardado__ok {
  background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .35);
  color: #9ff0bd; border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1rem;
}
.guardado__folio { font-size: 1.5rem; margin-bottom: .2rem; }
.guardado__fecha { color: var(--texto-suave); font-size: .9rem; margin: 0 0 1.5rem; }
.guardado__accion { margin: 0 0 .6rem; }
.guardado__accion .boton { display: block; text-align: center; }
.guardado__nota { color: var(--texto-suave); font-size: .85rem; margin: 0 0 1.5rem; }

.guardado__lineas { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.guardado__linea {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem;
  align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--borde);
}
.guardado__linea img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.guardado__nombre em { display: block; color: var(--texto-suave); font-size: .85rem; font-style: normal; }
.guardado__cantidad { color: var(--texto-suave); }
.guardado__importe { font-weight: 700; }
.guardado__resumen {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 1rem 0; font-size: 1.1rem;
}
.guardado__quien, .guardado__nota-pedido {
  color: var(--texto-suave); font-size: .9rem; margin: .2rem 0;
}
.guardado__vigencia {
  color: var(--texto-suave); font-size: .85rem; margin: 1.2rem 0 0;
  border-top: 1px solid var(--borde); padding-top: .9rem; line-height: 1.5;
}
.guardado__volver { margin-top: 2rem; font-size: .9rem; }

/* --- el enlace que ya caducó --- */
.caducado { max-width: 30rem; margin: 3rem auto; text-align: center; }
.caducado__titulo { font-size: 1.5rem; margin: 0 0 .8rem; }
.caducado__texto { color: var(--texto-suave); line-height: 1.6; margin: 0 0 1.5rem; }
.caducado__folio {
  display: inline-flex; flex-direction: column; gap: .2rem;
  border: 1px solid var(--borde); border-radius: 10px; padding: .8rem 1.4rem; margin: 0 0 1.5rem;
}
.caducado__folio span { color: var(--texto-suave); font-size: .8rem; }
.caducado__folio strong { font-size: 1.15rem; letter-spacing: .03em; }
.caducado__accion { margin: 0 0 .6rem; }
.caducado__accion .boton { display: block; text-align: center; }
.caducado__nota { color: var(--texto-suave); font-size: .85rem; margin: 0; line-height: 1.5; }
.caducado__volver { margin-top: 2rem; font-size: .9rem; }

@media (max-width: 560px) {
  .linea { grid-template-columns: 56px 1fr; }
  .linea__foto img, .linea__sinfoto { width: 56px; height: 56px; }
  .linea__total { grid-column: 2; text-align: left; }
  .linea__acciones { grid-column: 1 / -1; }
  .cabecera__pedido-texto { display: none; }
}

/* ---------- v0.9: el aviso flotante, donde toca en cada pantalla ----------
   En el celular pegado abajo y ancho, que es donde llega el pulgar; en pantalla
   grande en la esquina, para no taparle el catálogo a nadie. */
@media (min-width: 761px) {
  .aviso-flotante {
    left: auto; right: 1.5rem; bottom: 1.5rem; transform: translate(0, 1.5rem);
  }
  .aviso-flotante--visible { transform: translate(0, 0); }
}
@media (max-width: 760px) {
  .aviso-flotante {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
    transform: translate(0, 100%); border-radius: 14px 14px 0 0;
    border-left: 0; border-bottom: 0; border-top: 3px solid var(--marca);
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
    text-align: center;
  }
  .aviso-flotante--visible { transform: translate(0, 0); }
}

/* La burbuja del pedido late al añadir algo: es la confirmación de que el
   toque hizo algo, en el sitio donde el comprador va a mirar después. */
@keyframes late-burbuja {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cabecera__burbuja--late { animation: late-burbuja .42s ease; }
@media (prefers-reduced-motion: reduce) {
  .cabecera__burbuja--late { animation: none; }
}

/* ---------- v0.9: los filtros y las dos vistas del catálogo ---------- */
.filtros-catalogo {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: .8rem 1rem;
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio);
}
.filtros-catalogo select,
.filtros-catalogo input[type=text] {
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
  border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .88rem;
}
.filtros-catalogo select:focus,
.filtros-catalogo input:focus { outline: none; border-color: var(--marca); }
.filtros-catalogo__precio { display: flex; gap: .4rem; }
.filtros-catalogo__precio input { width: 6rem; }
.filtros-catalogo__casilla {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--texto-suave); cursor: pointer;
}
.filtros-catalogo__casilla input { accent-color: var(--marca); width: 1rem; height: 1rem; }
.filtros-catalogo__aplicar {
  background: var(--marca); color: var(--marca-contraste); border: 0; cursor: pointer;
  border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 600; font-size: .88rem;
}
.filtros-catalogo__limpiar { font-size: .85rem; color: var(--texto-suave); }
.filtros-catalogo__vista { display: flex; gap: .3rem; margin-left: auto; }
.filtros-catalogo__ver {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--borde); border-radius: 8px; color: var(--texto-suave);
}
.filtros-catalogo__ver.activa { border-color: var(--marca); color: var(--marca); }
.icono-vista { width: 1.05rem; height: 1.05rem; }

/* Con JavaScript, «Filtrar» sobra: el orden y la casilla se aplican solos. Se
   esconde con una clase que pone el guión, para que sin JavaScript siga ahí. */
.js .filtros-catalogo__aplicar { display: none; }

/* La vista de lista: la MISMA tarjeta, acostada.
   El enlace se acuesta él mismo con su propia rejilla. Antes se usaba
   `display: contents` para que sus hijos fueran nietos de la tarjeta, y eso le
   quita la caja al enlace: el navegador deja de poder enfocarlo con el teclado
   y las herramientas de accesibilidad dejan de anunciarlo. Un enlace sin caja
   es un enlace que existe sólo para quien usa ratón. */
.rejilla--lista { grid-template-columns: 1fr; gap: .8rem; }
.rejilla--lista .tarjeta {
  display: grid; grid-template-columns: 1fr; align-items: center;
}
.rejilla--lista .tarjeta__enlace {
  display: grid; grid-template-columns: 110px 1fr; gap: 0 1rem; align-items: center;
}
.rejilla--lista .tarjeta__foto { aspect-ratio: 1; grid-row: span 2; }
.rejilla--lista .tarjeta__nombre { padding: 0 1rem 0 0; margin: 0; align-self: end; }
.rejilla--lista .tarjeta__precio { padding: .2rem 1rem 0 0; margin: 0; align-self: start; }
.rejilla--lista .tarjeta__pedir { padding: .6rem 1rem 1rem; }
.rejilla--lista .tarjeta__pedir .boton { width: auto; }
@media (min-width: 700px) {
  .rejilla--lista .tarjeta { grid-template-columns: 1fr auto; }
  .rejilla--lista .tarjeta__enlace { grid-template-columns: 140px 1fr; }
  .rejilla--lista .tarjeta__pedir { padding: 0 1.2rem; }
}


/* ------------------------------------------------ las filas de la portada (v1.5)

   Una fila que se desliza, sin una línea de JavaScript: `overflow-x` con
   `scroll-snap`. El navegador ya sabe hacer esto —con el dedo, con la rueda,
   con el teclado y con el lector de pantalla— y lo hace mejor que cualquier
   carrusel escrito a mano. Un carrusel con guiones también se queda quieto el
   día que el guión no cargue; éste no.

   Y por eso no hay flechas: en un celular no hacen falta y en el escritorio la
   rueda horizontal y el teclado ya funcionan. Un tema que las quiera las pone,
   que para eso el sistema sólo manda los datos. */

.fila { margin: 2.5rem 0; }

.fila__titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.fila__titulo h2 { margin: 0; }
.fila__ver { white-space: nowrap; font-size: .92rem; }

.fila__pista {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* Los tirones al borde se ven mal cuando la fila no llena el ancho. */
  overscroll-behavior-x: contain;
  /* Sitio para la sombra del `:hover` de la tarjeta, que si no se corta. */
  padding: 4px 4px 1rem;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.fila__uno {
  /* Casi cuatro a la vista en escritorio y una y media en el celular. Lo que
     importa es el trozo de la siguiente que asoma: es lo que le dice a alguien
     que eso se desliza. Sin ese trozo, una fila se lee como una rejilla a la
     que le faltan cosas. */
  flex: 0 0 26%;
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 900px) { .fila__uno { flex-basis: 45%; } }
@media (max-width: 600px) { .fila__uno { flex-basis: 70%; } }

/* Cuando caben todas, se quedan a la izquierda y no estiradas: una fila de dos
   productos con las tarjetas del ancho de la pantalla se ve rota. */
.fila__pista > .fila__uno:only-child { flex-basis: min(320px, 80%); }

/* ---------- banners y marquesina ---------- */

/* Los pinta el sistema, no el tema, así que estas reglas son un respaldo: si un
   tema no las escribe, los banners salen igual y con una forma razonable. Un
   tema que quiera otra cosa las pisa; lo que no puede pasar es que salgan sin
   estilo ninguno y rompan la portada. */
.banners { display: grid; gap: .9rem; margin: 0 0 1.5rem; }
.banners--portada_abajo { margin: 1.5rem 0 0; }
.banner img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio);
}
/* Sin proporción fija: la imagen ya viene recortada del panel y forzarla aquí
   la recortaría dos veces. */
.banner a { display: block; }

/* La tira de texto que se mueve. La animación es de CSS y no de JavaScript:
   funciona con el JavaScript apagado, y con `prefers-reduced-motion` se para
   sola —que es obligatorio, no cortesía: hay gente que se marea. */
/* De borde a borde y pegada arriba. El sistema la mete como primer hijo de
   <body>, así que aquí sólo hay que impedir que herede el ancho máximo del
   contenido: media pantalla de tira de color y media de fondo se ve como un
   fallo, no como un aviso. */
.marquesina {
  background: var(--marca); color: var(--marca-contraste);
  overflow: hidden; white-space: nowrap;
  font-size: .92rem; font-weight: 600;
  padding: .5rem 0;
  width: 100%; max-width: none; margin: 0;
}
.marquesina__pista {
  display: inline-flex; gap: 3rem;
  animation: marquesina-pasa var(--marquesina-segundos, 25s) linear infinite;
  /* `will-change` no: en un teléfono de gama baja, promover una capa que ocupa
     todo el ancho por una animación que dura para siempre cuesta más memoria de
     la que ahorra. */
}
.marquesina__texto { padding-left: 3rem; }
.marquesina__enlace { color: inherit; text-decoration: none; display: inline-flex; }
.marquesina__enlace:hover { text-decoration: underline; }

@keyframes marquesina-pasa {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Quieta y entera: se recorta con puntos suspensivos en vez de moverse, y la
     segunda copia —que sólo existe para que la cinta se vea llena— desaparece. */
  .marquesina { white-space: normal; }
  .marquesina__pista { animation: none; display: block; }
  .marquesina__texto { padding-left: 0; }
  .marquesina__texto + .marquesina__texto { display: none; }
}

/* ---------- cupón ---------- */

.cupon { margin: .9rem 0 0; display: grid; gap: .35rem; }
.cupon__campo { font-size: .88rem; color: var(--texto-suave); }
.cupon__fila { display: flex; gap: .5rem; }
.cupon__fila input {
  flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit;
  text-transform: uppercase;
  background: var(--fondo-suave); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.cupon__aplicar, .cupon__quitar {
  padding: .55rem 1rem; font: inherit; cursor: pointer;
  background: var(--fondo-suave); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.cupon--puesto {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--radio);
  background: color-mix(in srgb, var(--abierto) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--abierto) 45%, transparent);
}
.cupon__puesto { font-size: .9rem; }
.cupon__quitar { padding: .3rem .7rem; font-size: .85rem; }

.pedido__resumen--linea {
  display: flex; justify-content: space-between;
  font-size: .92rem; color: var(--texto-suave);
  margin-bottom: .25rem;
}
.pedido__resumen--descuento { color: var(--abierto); }