/* ==================================================================
   ÉBANO — hoja de estilos de la tienda

   Escrita MÓVIL PRIMERO: lo que está afuera de un @media es lo que ve
   un teléfono. Los @media solo agregan cosas para pantallas grandes.
   Se hace así porque la mayoría de las clientas entran desde el celular.

   Medidas táctiles: todo lo que se toca mide 44px de alto como mínimo.
================================================================== */

/* ---------- 1. Sistema ---------- */

:root{
  /* color */
  --blanco:#FFFFFF;
  --hueso:#F3EFE8;          /* fondo suave, para fotos de producto */
  --ebano:#14110E;          /* el negro de la marca: lleva una pizca de marrón */
  --tinta:#332E28;          /* texto corrido */
  --tinta-suave:#6E655B;
  --linea:#E4DED5;
  --linea-fuerte:#CFC6B8;
  --oro:#8A6A3B;
  --oro-suave:#F1E9DC;
  --alerta:#8C2F1D;

  /* letra */
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --texto:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --editorial:"Bodoni Moda",Georgia,serif;

  /* medidas */
  --ancho:1240px;
  --borde-r:2px;
  --toque:44px;             /* alto mínimo de todo lo que se toca */
  --header-alto:0px;        /* lo calcula el JS, para el scroll con anclas */
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;        /* red de seguridad contra desbordes laterales */
}

img,svg{max-width:100%}

button{font:inherit;color:inherit;cursor:pointer}

a{color:inherit}

:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 18px;
}

.oculto{display:none !important}

/* solo para lectores de pantalla */
.solo-lectores{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* el hilo fino: el gesto que se repite en toda la marca */
.hilo{height:1px;background:var(--linea);border:0;margin:0}

.eyebrow{
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--oro);
  font-weight:500;
}


/* ---------- 2. Encabezado ---------- */

/* el encabezado queda pegado arriba al hacer scroll */
.cabecera{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
}

/* Rejilla que se reacomoda sola.
   Teléfono:  [menú] [logo] [bolsa]  y el buscador debajo a lo ancho. */
.cabecera-grid{
  display:grid;
  grid-template-columns:var(--toque) 1fr var(--toque);
  grid-template-areas:
    "menu logo cart"
    "search search search";
  align-items:center;
  gap:8px;
  padding:8px 0 12px;
}
.cabecera-grid .hamburguesa{grid-area:menu;justify-self:start}
.cabecera-grid .logo{grid-area:logo}
.cabecera-grid .buscador-caja{grid-area:search}
.cabecera-grid .carrito-btn{grid-area:cart;justify-self:end}

.logo{display:block;text-decoration:none;min-width:0}
.logo img{
  width:min(210px,56vw);
  height:auto;
  display:block;
  margin:0 auto;
}

.icono-btn{
  width:var(--toque);
  height:var(--toque);
  display:grid;
  place-items:center;
  background:none;
  border:0;
  color:var(--ebano);
  position:relative;
  flex:none;
}
.icono-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}

/* la bolsa va sin recuadro, un poco más grande */
.carrito-btn svg{width:24px;height:24px}

.globo{
  position:absolute;
  top:-2px;right:-2px;
  min-width:18px;height:18px;
  padding:0 4px;
  border-radius:999px;
  background:var(--ebano);
  color:var(--blanco);
  font-size:10px;
  font-weight:500;
  line-height:18px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.globo[data-vacio="si"]{display:none}

.buscador-caja{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--linea-fuerte);
  padding:0 14px;
  background:var(--blanco);
}
.buscador-caja svg{width:17px;height:17px;stroke:var(--tinta-suave);fill:none;stroke-width:1.4;flex:none}
.buscador-caja input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:none;
  font-family:inherit;
  font-size:16px;         /* 16px evita que el iPhone haga zoom al enfocar */
  font-weight:300;
  padding:12px 0;
  min-height:var(--toque);
  color:var(--tinta);
}
.buscador-caja input::placeholder{color:var(--tinta-suave)}


/* barra de categorías horizontal: SOLO escritorio (se enciende en @media) */
.menu-desktop{display:none}


/* ---------- 2b. Menú lateral de categorías (teléfono) ---------- */

.menu-lateral{
  position:fixed;
  top:0;left:0;
  height:100%;
  height:100dvh;
  width:min(320px,86vw);
  background:var(--blanco);
  z-index:90;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--linea);
}
.menu-lateral[data-abierto="si"]{transform:translateX(0)}

.menu-cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--linea);
  flex:none;
}
.menu-cabeza h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.08em;
  margin:0;
  color:var(--ebano);
}

.menu-cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

.menu-lista{list-style:none;margin:0;padding:0}

.menu-btn{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-bottom:1px solid var(--linea);
  border-left:3px solid transparent;
  padding:0 18px;
  min-height:52px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.menu-btn:hover{background:var(--hueso)}
.menu-btn[aria-selected="true"]{
  color:var(--ebano);
  border-left-color:var(--oro);
  font-weight:500;
}

.menu-pie{
  flex:none;
  border-top:1px solid var(--linea);
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
}
.menu-pie h3{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ebano);
  margin:0 0 12px;
  font-weight:500;
  text-align:center;
}

.apps{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Botones de las tiendas de apps. Van como <span> y no como enlace a
   propósito: la app todavía no existe y un botón que no lleva a ningún lado
   frustra más que no tenerlo. Cuando salga, se cambian por <a href>. */
.app-btn{
  background:var(--ebano);
  color:var(--blanco);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:58px;
  padding:9px 6px;
}
.app-btn-fila{display:flex;align-items:center;justify-content:center;gap:7px}
.app-btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.app-btn b{font-size:.76rem;font-weight:400;letter-spacing:.01em;white-space:nowrap}

/* el aviso va DENTRO del botón: si se pone debajo en letra chica, nadie lo
   lee y la gente cree que puede descargar la app hoy */
.app-btn em{
  font-style:normal;
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--oro-claro,#C9A063);
  line-height:1;
}

.apps-nota{
  margin:11px 0 0;
  text-align:center;
  font-size:.74rem;
  color:var(--tinta-suave);
  line-height:1.5;
}


/* ---------- 2c. Carrusel de novedades ---------- */

.carrusel{
  position:relative;
  width:100%;
  margin:0 0 4px;
  overflow:hidden;
  background:var(--hueso);
  aspect-ratio:25/9;           /* teléfono: misma forma ancha para todos */
  max-height:none;
  touch-action:pan-y;
}

.carrusel-pista{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .carrusel-pista{transition:none}
}

.carrusel-slide{
  position:relative;
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.carrusel-slide video{width:100%;height:100%;object-fit:cover;display:block}
.carrusel-enlace{display:block;width:100%;height:100%}
.carrusel-img{
  width:100%;height:100%;
  object-fit:cover;        /* llena el banner, sin franjas arriba/abajo */
  display:block;
}
.carrusel-slide.con-imagen{background:var(--hueso)}
/* banner cuya imagen ya trae su fondo (p.ej. blanco): se muestra COMPLETA y
   centrada sobre ese mismo color, para que no se estire ni se corte */
.carrusel-slide.contener{background:#FFFFFF}
.carrusel-slide.contener .carrusel-img{object-fit:contain}

/* fondos de muestra mientras no hay imagen real */
.carrusel-slide.tono-oscuro{background:var(--ebano)}
.carrusel-slide.tono-claro{background:var(--hueso)}
.carrusel-slide.tono-oro{background:var(--oro-suave)}
/* ejemplo opción B: el sello marca donde iria la foto del producto */
.carrusel-sello{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:min(150px,20%);
  height:auto;
  z-index:1;
  opacity:.92;
  display:none;                 /* solo se muestra en PC */
}

.carrusel-mono{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(4rem,18vw,8rem);
  line-height:1;
  opacity:.5;
  user-select:none;
}
.tono-oscuro .carrusel-mono{color:#463C31}
.tono-claro .carrusel-mono{color:#C4B9A8}
.tono-oro .carrusel-mono{color:#C7A667}

/* si la imagen lleva texto encima, un velo para que se lea */
.carrusel-slide.con-velo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,17,14,.45), rgba(20,17,14,0) 55%);
}

.carrusel-texto{
  position:absolute;
  left:50%;top:45%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 16px;
}
.carrusel-texto h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(.95rem,4vw,2rem);
  letter-spacing:.04em;
  margin:0 0 6px;
  color:var(--blanco);
  text-shadow:0 1px 12px rgba(20,17,14,.4);
}
.carrusel-texto p{
  font-family:var(--editorial);
  font-style:italic;
  font-size:clamp(.72rem,2.7vw,1.05rem);
  margin:0;
  color:#F3ECE1;
  text-shadow:0 1px 10px rgba(20,17,14,.4);
}
/* en el fondo claro de muestra el texto va oscuro */
.tono-claro .carrusel-texto h2{color:var(--ebano);text-shadow:none}
.tono-claro .carrusel-texto p{color:var(--tinta-suave);text-shadow:none}
.tono-oro .carrusel-texto h2{color:var(--ebano);text-shadow:none}
.tono-oro .carrusel-texto p{color:#6B5326;text-shadow:none}

.carrusel-boton{
  display:inline-block;
  margin-top:2px;
  background:var(--ebano);
  color:var(--blanco);
  border:1px solid var(--ebano);
  padding:6px 15px;
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  min-height:0;
  line-height:1.9;
  transition:opacity .18s ease,background .18s ease;
}
.carrusel-boton:hover{opacity:.85}

/* flechitas semitransparentes a los lados */
.carrusel-flecha{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.55);
  color:var(--ebano);
  display:grid;place-items:center;
  z-index:3;
  cursor:pointer;
  transition:background .18s ease;
}
.carrusel-flecha svg{width:22px;height:22px}
.carrusel-flecha:hover{background:rgba(255,255,255,.9)}
.carrusel-prev{left:10px}
.carrusel-next{right:10px}

/* puntitos indicadores */
.carrusel-puntos{
  position:absolute;
  bottom:14px;left:0;right:0;
  z-index:3;
  display:flex;justify-content:center;gap:8px;
}
.carrusel-punto{
  width:8px;height:8px;
  border:0;border-radius:999px;padding:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.carrusel-punto[aria-current="true"]{width:22px;background:var(--oro)}
/* en el fondo claro los puntos apagados se ven oscuros */
.tono-claro-activo .carrusel-punto{background:rgba(20,17,14,.28)}


/* ---------- 3. Portada ---------- */

.portada{
  padding:34px 0 40px;
  text-align:center;
  border-bottom:1px solid var(--linea);
}

/* el eslogan es la voz de la marca: va en cursiva editorial y con peso */
.portada-eslogan{
  font-family:var(--editorial);
  font-style:italic;
  font-size:clamp(1.05rem,4.4vw,1.4rem);
  color:var(--tinta);
  margin:0 auto 22px;
  max-width:30ch;
}

.portada-hilo{
  width:96px;height:1px;background:var(--linea-fuerte);
  margin:0 auto 22px;
}

/* el titular dice lo que la competencia no puede decir */
.portada h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.15rem,5.2vw,1.7rem);
  letter-spacing:.06em;
  line-height:1.3;
  margin:0 0 12px;
  color:var(--ebano);
  text-wrap:balance;
}

.portada-texto{
  font-size:clamp(.88rem,3.2vw,.98rem);
  color:var(--tinta-suave);
  margin:0 auto 26px;
  max-width:42ch;
  line-height:1.6;
}

.portada-datos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}


/* ---------- 4. Sección de productos ---------- */

.seccion{padding:36px 0 60px}

.seccion-cabeza{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.seccion-cabeza h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.15rem,4.6vw,1.6rem);
  letter-spacing:.05em;
  margin:0;
  color:var(--ebano);
}

.contador{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;
}

.seccion-titulo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}

/* control de orden por precio / valoración */
.orden{display:flex;align-items:center;gap:9px;min-width:0}
.orden-txt{
  display:none;                 /* en movil no cabe; el select se explica solo */
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  white-space:nowrap;
}
.orden select{
  width:100%;
  flex:1;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.04em;
  font-weight:400;
  color:var(--ebano);
  background-color:var(--blanco);
  border:1px solid var(--linea-fuerte);
  padding:10px 32px 10px 34px;
  min-height:48px;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4h9M4 8h6M4 12h3' fill='none' stroke='%238A6A3B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A6A3B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:left 11px center, right 11px center;
  background-size:15px, 11px;
}
.orden select:focus{outline:0;border-color:var(--oro)}

.seccion-cabeza + .hilo{margin-bottom:26px}

/* la rejilla: 2 columnas en teléfono */
.rejilla{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 14px;
  margin:0;
  padding:0;
  list-style:none;
}

.tarjeta{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}

.tarjeta-foto{
  position:relative;
  aspect-ratio:1/1;
  background:var(--hueso);
  border:1px solid var(--linea);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.tarjeta-foto img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* si el producto todavía no tiene foto, se muestra el sello de la marca */
.marca-agua{
  font-family:var(--display);
  font-weight:500;
  font-size:2.6rem;
  line-height:1;
  color:#C4B9A8;
  user-select:none;
}

.cinta{
  position:absolute;
  top:9px;left:9px;
  background:var(--ebano);
  color:var(--blanco);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
  box-shadow:0 1px 6px rgba(20,17,14,.16);
  z-index:1;
}

/* colores de las etiquetas (sirven en la tarjeta y en el detalle) */
.etq-nuevo{background:#EFE1E5;color:#7C4A54}
.etq-mas-vendido{background:var(--oro);color:#FFFFFF}
.etq-destacado{background:var(--ebano);color:#FFFFFF}
.cinta-agotado{background:#6E655B;color:#FFFFFF}
.tarjeta.agotado .tarjeta-foto{opacity:.62}
.btn-agregar:disabled{opacity:.55;cursor:not-allowed;border-color:var(--linea-fuerte);color:var(--tinta-suave)}
.btn-agregar:disabled:hover{background:var(--blanco);color:var(--tinta-suave)}

/* pill de etiqueta en la ficha de producto */
.prod-etq{
  display:inline-block;
  align-self:flex-start;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:5px 14px;
  border-radius:999px;
}

.tarjeta-cat{
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oro);
}

.tarjeta-nombre{
  font-family:var(--display);
  font-weight:400;
  font-size:.94rem;
  line-height:1.3;
  margin:0;
  color:var(--ebano);
}

/* la marca: discreta pero presente, debajo del nombre */
.tarjeta-marca{
  font-size:.78rem;
  color:var(--tinta-suave);
  font-style:italic;
  font-family:var(--editorial);
}

.tarjeta-detalle{
  font-size:.8rem;
  color:var(--tinta-suave);
  margin:0;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.precio{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:1px}
.precio-usd{
  font-size:1rem;
  font-weight:500;
  color:var(--ebano);
  font-variant-numeric:tabular-nums;
}
.precio-bs{
  font-size:.74rem;
  color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;
}

.btn-agregar{
  margin-top:9px;
  width:100%;
  min-height:var(--toque);
  border:1px solid var(--ebano);
  background:var(--blanco);
  color:var(--ebano);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .18s ease,color .18s ease;
}
.btn-agregar:hover{background:var(--ebano);color:var(--blanco)}
.btn-agregar[data-puesto="si"]{background:var(--oro);border-color:var(--oro);color:var(--blanco)}

/* etiqueta de género sobre la foto (hombre / mujer / niño / niña).
   Colores desaturados para no pelear con el negro y dorado de la marca. */
.genero{
  position:absolute;
  top:9px;right:9px;
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  padding:4px 11px;
  border-radius:999px;
  box-shadow:0 1px 6px rgba(20,17,14,.16);
}
.g-hombre{background:#E7ECEF;color:#3C4A54}
.g-mujer{background:#F4E7EA;color:#7C4A54}
.g-nino{background:#E6EDF3;color:#3E5A70}
.g-nina{background:#F5E6EC;color:#8A4A63}
.g-unisex{background:#EFE8DB;color:#7A6234}

/* estrellas: 5 grises con una capa dorada recortada al porcentaje exacto.
   Así una valoración de 4,5 muestra media estrella de verdad. */
.estrellas{display:block}
.estrellas-caja{
  position:relative;
  display:inline-block;
  line-height:1;
  font-size:.82rem;
  letter-spacing:2px;
  white-space:nowrap;
  vertical-align:middle;
}
.estrellas-base{color:#DAD2C4}
.estrellas-relleno{
  position:absolute;
  top:0;left:0;
  overflow:hidden;
  white-space:nowrap;
  color:var(--oro);
}

/* cuando no hay resultados */
.vacio{
  text-align:center;
  padding:56px 18px;
  color:var(--tinta-suave);
}
.vacio strong{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:1.15rem;
  color:var(--ebano);
  margin-bottom:8px;
}


/* ---------- 4b. Filtros, chips y disposición del catálogo ---------- */

/* controles de la cabecera de sección: botón Filtrar + orden */
.seccion-controles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}

.btn-filtrar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border:1px solid var(--linea-fuerte);
  background:var(--blanco);
  color:var(--ebano);
  min-height:48px;
  padding:0 14px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.btn-filtrar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.btn-filtrar[data-activo="si"]{border-color:var(--oro);color:var(--oro)}
.btn-filtrar[data-activo="si"]::after{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--oro);
}

/* ticketicos de lo que se está filtrando */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--hueso);
  border:1px solid var(--linea-fuerte);
  color:var(--tinta);
  font-size:12px;
  padding:6px 12px;
  min-height:34px;
}
.chip:hover{border-color:var(--ebano)}
.chip .chip-x{font-size:15px;line-height:1;color:var(--tinta-suave)}
.chip-limpiar{background:none;border:0;color:var(--oro);text-decoration:underline;padding:6px 4px;min-height:34px}

/* disposición del catálogo: en móvil una sola columna (los filtros son gaveta) */
.catalogo-layout{display:block}

/* panel de filtros: en móvil es una gaveta que entra desde la izquierda */
.filtros{
  position:fixed;
  top:0;left:0;
  height:100%;
  height:100dvh;
  width:min(330px,88vw);
  background:var(--blanco);
  z-index:90;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--linea);
}
.filtros[data-abierto="si"]{transform:translateX(0)}

.filtros-cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--linea);
  flex:none;
}
.filtros-cabeza h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.08em;
  margin:0;
  color:var(--ebano);
}

.filtros-cuerpo{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 18px 18px;
}

.filtros-pie{
  flex:none;
  border-top:1px solid var(--linea);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:9px;
}

.filtro-grupo{padding:16px 0;border-bottom:1px solid var(--linea)}
.filtro-grupo:last-child{border-bottom:0}
.filtro-grupo h3{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ebano);
  margin:0 0 10px;
  font-weight:500;
}
.filtro-op{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  cursor:pointer;
  font-size:.9rem;
  color:var(--tinta);
  min-height:var(--toque);
}
.filtro-op input{width:17px;height:17px;accent-color:var(--oro);flex:none;margin:0}
.filtro-op .cuenta{
  margin-left:auto;
  color:var(--tinta-suave);
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
}


/* ---------- 4c. Detalle de producto ---------- */

.producto{padding:16px 0 64px}

.volver{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;
  color:var(--tinta-suave);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 0;min-height:44px;cursor:pointer;
}
.volver svg{stroke:currentColor;fill:none}
.volver:hover{color:var(--ebano)}

.prod-detalle{display:flex;flex-direction:column;gap:22px}

.prod-galeria{width:100%;display:flex;flex-direction:column;gap:12px}

.prod-foto-principal{
  order:1;
  aspect-ratio:1/1;
  background:var(--hueso);
  border:1px solid var(--linea);
  display:grid;place-items:center;overflow:hidden;
}
.prod-foto-principal img{width:100%;height:100%;object-fit:contain}
.prod-foto-principal .marca-agua{font-size:clamp(4rem,20vw,7rem);color:#C4B9A8}

/* tira de miniaturas: en movil va DEBAJO y en horizontal */
.prod-minis{order:2;display:flex;align-items:center;gap:8px}
.prod-minis-lista{
  display:flex;flex-direction:row;gap:9px;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex:1;
}
.prod-minis-lista::-webkit-scrollbar{display:none}
.prod-mini{
  flex:none;width:62px;height:62px;
  border:1px solid var(--linea);background:var(--hueso);
  padding:0;cursor:pointer;overflow:hidden;
}
.prod-mini img{width:100%;height:100%;object-fit:cover}
.prod-mini.activo{border-color:var(--oro)}
.prod-mini-nav{
  flex:none;width:34px;height:34px;
  border:1px solid var(--linea-fuerte);background:var(--blanco);
  display:grid;place-items:center;cursor:pointer;color:var(--ebano);
}
.prod-mini-nav svg{width:15px;height:15px}
.prod-mini-nav:hover{background:var(--ebano);color:var(--blanco);border-color:var(--ebano)}

.prod-info{display:flex;flex-direction:column;gap:13px}
.prod-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.prod-nombre{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.02em;line-height:1.2;
  margin:0;color:var(--ebano);
}
.prod-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prod-marca{font-family:var(--editorial);font-style:italic;color:var(--tinta-suave);font-size:.95rem}
.genero-pill{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;padding:5px 14px;border-radius:999px;
}
.prod-precio{display:flex;align-items:baseline;gap:12px;margin-top:2px}
.prod-precio-usd{
  font-family:var(--display);font-weight:500;font-size:1.7rem;
  color:var(--ebano);font-variant-numeric:tabular-nums;
}
.prod-precio-bs{color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.prod-desc{color:var(--tinta);line-height:1.7;margin:0;max-width:60ch}

.prod-compra{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:8px}
.prod-cantidad{align-items:center}
.prod-cantidad button{width:44px;height:48px;font-size:1.2rem}
.prod-cantidad span{min-width:40px;font-size:1rem}
.prod-compra .btn-principal{flex:1;min-width:200px}

.sugerencias{margin-top:46px}
.sugerencias-titulo{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.1rem,3.6vw,1.5rem);letter-spacing:.04em;
  margin:0 0 6px;color:var(--ebano);
}
.sugerencias .hilo{margin-bottom:24px}

/* teléfono: la barra de compra se pega abajo, como en las tiendas grandes */
@media (max-width:799px){
  .prod-compra{
    position:sticky;bottom:0;z-index:5;
    background:var(--blanco);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--linea);
    margin-top:14px;
  }
}

/* escritorio: galería a la izquierda, información a la derecha */
@media (min-width:800px){
  .prod-detalle{flex-direction:row;gap:44px;align-items:flex-start}
  .prod-galeria{flex:1;max-width:560px;position:sticky;top:150px;
    flex-direction:row;gap:14px;align-items:stretch}
  .prod-info{flex:1;gap:15px}
  .prod-precio-usd{font-size:2rem}

  /* miniaturas en columna vertical a la IZQUIERDA de la foto */
  .prod-minis{order:0;flex-direction:column;width:74px}
  .prod-foto-principal{order:1;flex:1}
  .prod-minis-lista{
    flex-direction:column;
    overflow-x:hidden;overflow-y:auto;
    max-height:360px;
  }
  .prod-mini{width:100%;height:74px}
  .prod-mini-nav svg{transform:rotate(90deg)}   /* apuntan arriba/abajo */
}


/* ---------- 5. Carrito ---------- */

.telon{
  position:fixed;
  inset:0;
  background:rgba(20,17,14,.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  z-index:80;
}
.telon[data-abierto="si"]{opacity:1;visibility:visible}

.gaveta{
  position:fixed;
  top:0;right:0;
  height:100%;
  height:100dvh;            /* en móvil evita que la barra del navegador la corte */
  width:min(420px,100%);
  background:var(--blanco);
  z-index:90;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
}
.gaveta[data-abierto="si"]{transform:translateX(0)}

.gaveta-cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--linea);
  flex:none;
}
.gaveta-cabeza h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:.06em;
  margin:0;
  color:var(--ebano);
}

.gaveta-cuerpo{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 18px;
}

.linea-carrito{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--linea);
  align-items:start;
}

.linea-foto{
  width:64px;height:64px;
  background:var(--hueso);
  border:1px solid var(--linea);
  display:grid;place-items:center;
  overflow:hidden;
}
.linea-foto img{width:100%;height:100%;object-fit:cover}
.linea-foto span{font-family:var(--display);color:var(--linea-fuerte);font-size:1.3rem}

.linea-datos{min-width:0}
.linea-nombre{
  font-family:var(--display);
  font-size:.88rem;
  color:var(--ebano);
  margin:0 0 3px;
  line-height:1.3;
}
.linea-precio{font-size:.78rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums}

.cantidad{display:flex;align-items:center;gap:0;margin-top:8px;border:1px solid var(--linea-fuerte);width:max-content}
.cantidad button{
  width:34px;height:34px;
  background:none;border:0;
  color:var(--ebano);
  font-size:1rem;
  line-height:1;
  display:grid;place-items:center;
}
.cantidad span{
  min-width:30px;
  text-align:center;
  font-size:.85rem;
  font-variant-numeric:tabular-nums;
}

.linea-quitar{
  background:none;border:0;
  color:var(--tinta-suave);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px;
  min-height:auto;
}
.linea-quitar:hover{color:var(--alerta)}

.gaveta-pie{
  flex:none;
  border-top:1px solid var(--linea);
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--blanco);
}

.total-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total-fila dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave);margin:0}
.total-fila dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.total-usd{font-size:1.3rem;font-weight:500;color:var(--ebano)}
.total-bs{font-size:.85rem;color:var(--tinta-suave)}

.btn-principal{
  width:100%;
  min-height:52px;
  border:1px solid var(--ebano);
  background:var(--ebano);
  color:var(--blanco);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .18s ease;
}
.btn-principal:hover{background:#000}
.btn-principal:disabled{opacity:.4;cursor:not-allowed}

.btn-secundario{
  width:100%;
  min-height:var(--toque);
  border:1px solid var(--linea-fuerte);
  background:var(--blanco);
  color:var(--tinta);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.btn-secundario:hover{border-color:var(--ebano);color:var(--ebano)}

.carrito-vacio{
  text-align:center;
  padding:70px 18px;
  color:var(--tinta-suave);
}
.carrito-vacio span{
  font-family:var(--display);
  font-size:2.4rem;
  color:var(--linea-fuerte);
  display:block;
  margin-bottom:14px;
}


/* ---------- 6. Ventanas (datos del cliente / gracias) ---------- */

.ventana{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(20,17,14,.5);
  padding:0;
}
.ventana[data-abierto="si"]{display:flex}

.ventana-caja{
  background:var(--blanco);
  width:100%;
  max-width:520px;
  max-height:92vh;
  max-height:92dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
}

.ventana-caja h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:.05em;
  margin:0 0 6px;
  color:var(--ebano);
}
.ventana-texto{margin:0 0 20px;color:var(--tinta-suave);font-size:.9rem}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}
.campo input,.campo textarea,.campo select{
  font-family:inherit;
  font-size:16px;          /* 16px: evita el zoom automático del iPhone */
  font-weight:300;
  color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--linea-fuerte);
  padding:12px 13px;
  min-height:var(--toque);
  width:100%;
  border-radius:0;
  -webkit-appearance:none;
}
.campo textarea{resize:vertical;min-height:78px;line-height:1.5}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--oro)}
.campo[data-error="si"] input,.campo[data-error="si"] textarea{border-color:var(--alerta)}
.campo-error{font-size:.75rem;color:var(--alerta);display:none}
.campo[data-error="si"] .campo-error{display:block}

.campo-ayuda{font-size:.8rem;color:var(--tinta-suave);margin:0 0 8px;line-height:1.5}
.btn-ubicacion{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  border:1px solid var(--linea-fuerte);background:var(--blanco);color:var(--ebano);
  padding:11px 16px;min-height:var(--toque);
  font-size:12px;letter-spacing:.08em;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.btn-ubicacion svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.btn-ubicacion:hover{border-color:var(--ebano)}
.btn-ubicacion[data-listo="si"]{border-color:var(--oro);color:var(--oro)}
.ubicacion-estado{display:block;margin-top:8px;font-size:.8rem;color:var(--tinta-suave)}
.ubicacion-estado[data-ok="si"]{color:#3E7C55}
.ubicacion-estado[data-ok="no"]{color:var(--alerta)}

/* métodos de pago: lista elegante con círculo de selección */
.pagos{display:flex;flex-direction:column;gap:9px}
.pago{
  display:flex;align-items:center;gap:13px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);
  padding:13px 15px;min-height:54px;
  font-size:.92rem;text-align:left;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.pago:hover{border-color:var(--linea-fuerte)}
.pago[aria-checked="true"]{border-color:var(--oro);background:var(--oro-suave);box-shadow:inset 0 0 0 1px var(--oro)}
.pago-ico{flex:none;width:24px;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1}
.pago-ico svg{display:block}
.pago-txt{flex:1;letter-spacing:.01em}
.pago-radio{
  flex:none;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);position:relative;transition:border-color .18s ease;
}
.pago[aria-checked="true"] .pago-radio{border-color:var(--oro)}
.pago[aria-checked="true"] .pago-radio::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--oro);
}
.campo[data-error="si"] .pagos{outline:1px solid var(--alerta);outline-offset:4px}

/* nota y recuadro del descuento por divisas */
.pago-nota{margin:11px 0 0;font-size:.82rem;color:var(--oro);line-height:1.55}
.pago-descuento{
  margin-top:11px;
  border:1px solid var(--oro);background:var(--oro-suave);
  padding:13px 15px;font-size:.86rem;color:var(--tinta);line-height:1.7;
}
.pago-descuento b{color:var(--ebano);font-weight:600}
.pago-descuento s{color:var(--tinta-suave)}
.pago-desc-bs{color:var(--tinta-suave);font-size:.82rem}

.ventana-botones{display:flex;flex-direction:column;gap:9px;margin-top:20px}

/* mensaje de compra lista */
.gracias{text-align:center}
.gracias-sello{
  width:70px;height:70px;
  margin:4px auto 18px;
  border:1px solid var(--oro);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);
  font-size:1.9rem;
  color:var(--oro);
}
.gracias p{color:var(--tinta-suave);font-size:.92rem;line-height:1.65;margin:0 auto 18px;text-align:center;max-width:42ch}
.gracias-eslogan{
  font-family:var(--editorial);font-style:italic;color:var(--oro);
  text-align:center;font-size:1.12rem;margin:0 0 18px;
}


/* ---------- 7. Pie ---------- */

.pie{
  background:var(--ebano);
  color:#CFC7BC;
  padding:44px 0 30px;
  margin-top:20px;
}
.pie-marca{width:170px;margin:0 0 20px;display:block}
.pie-bloques{display:flex;flex-direction:column;gap:26px}
.pie h3{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oro);
  margin:0 0 10px;
  font-weight:500;
}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.85rem}
.pie a{text-decoration:none;transition:color .18s ease}
.pie a:hover{color:var(--blanco)}
.pie-eslogan{
  font-family:var(--editorial);
  font-style:italic;
  color:#8C8378;
  font-size:.9rem;
  margin:0;
}
.pie-tasa{
  margin:24px 0 0;
  font-size:.78rem;
  color:#8C8378;
  letter-spacing:.02em;
}
.pie-tasa b{color:#CFC7BC;font-weight:500;font-variant-numeric:tabular-nums}

.pie-fin{
  border-top:1px solid #2C2620;
  margin-top:30px;
  padding-top:18px;
  font-size:.74rem;
  color:#6E655B;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  justify-content:space-between;
}
.pie-fin button{background:none;border:0;color:inherit;font-size:inherit;padding:4px 0}


/* ---------- 8. Aviso flotante ---------- */

.aviso{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  z-index:120;
  background:var(--ebano);
  color:var(--blanco);
  padding:13px 20px;
  font-size:.83rem;
  letter-spacing:.03em;
  max-width:calc(100vw - 32px);
  text-align:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.aviso[data-visible="si"]{transform:translate(-50%,0)}


/* ==================================================================
   9. Pantallas más grandes
================================================================== */

/* teléfono grande */
@media (min-width:480px){
  .rejilla{gap:26px 18px}
  .tarjeta-nombre{font-size:1rem}
}

/* tableta */
@media (min-width:700px){
  .contenedor{padding:0 28px}

  /* encabezado en una sola fila: logo (izq) · buscador · bolsa (der) */
  .cabecera-grid{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo search cart";
    gap:22px;
    padding:16px 0;
  }
  .cabecera-grid .logo{grid-area:logo;justify-self:start}
  .logo img{width:min(210px,26vw)}
  .cabecera-grid .buscador-caja{max-width:560px;width:100%;margin:0 auto}

  /* en el teléfono el menú es la gaveta de rayas; en escritorio, barra */
  #btnMenu{display:none}

  .menu-desktop{display:block;border-top:1px solid var(--linea)}
  .menu-desktop-lista{
    list-style:none;margin:0;padding:0;
    display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  }
  .menu-desktop-btn{
    background:none;border:0;
    border-bottom:2px solid transparent;
    padding:14px 16px;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--tinta-suave);
    white-space:nowrap;
    transition:color .18s ease,border-color .18s ease;
  }
  .menu-desktop-btn:hover{color:var(--ebano)}
  .menu-desktop-btn[aria-selected="true"]{color:var(--ebano);border-bottom-color:var(--oro)}

  /* controles de la seccion: fila a la derecha, ya no dos botones parejos */
  .seccion-controles{display:flex;width:auto;gap:12px;align-items:center}
  .orden{flex:none}
  .orden-txt{display:inline}
  .orden select{
    width:auto;
    font-size:13px;
    padding:10px 34px 10px 12px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A6A3B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:right 12px center;
    background-size:11px;
  }

  .carrusel{aspect-ratio:24/7;max-height:460px;margin-bottom:8px}
  .carrusel-img{object-fit:cover}
  .carrusel-sello{display:block}
  .carrusel-flecha{width:50px;height:50px}
  .carrusel-boton{padding:12px 24px;font-size:11px;letter-spacing:.16em;min-height:44px;line-height:normal}
  .carrusel-flecha svg{width:26px;height:26px}

  /* el texto deja de ir abajo y se coloca segun "posicion", centrado vertical */
  .carrusel-texto{
    bottom:auto;top:50%;
    width:auto;max-width:min(560px,46%);
    padding:26px;
  }
  .carrusel-texto.pos-centro{left:50%;transform:translate(-50%,-50%);text-align:center;align-items:center}
  .carrusel-texto.pos-izquierda{left:6%;transform:translateY(-50%);text-align:left;align-items:flex-start}
  .carrusel-texto.pos-derecha{left:auto;right:6%;transform:translateY(-50%);text-align:right;align-items:flex-end}

  .portada{padding:56px 0 50px}

  .rejilla{grid-template-columns:repeat(3,1fr);gap:34px 22px}

  .ventana{align-items:center;padding:24px}
  .ventana-caja{padding:30px 30px}

  .ventana-botones{flex-direction:row-reverse}
  .ventana-botones .btn-principal,.ventana-botones .btn-secundario{width:auto;flex:1}

  .pie-bloques{flex-direction:row;gap:48px;flex-wrap:wrap}
  .pie-bloques > div{flex:1;min-width:150px}
}

/* escritorio: el catálogo se parte en dos columnas —
   filtros fijos a la izquierda + productos a la derecha */
@media (min-width:1000px){
  .portada{padding:88px 0 68px}
  .seccion{padding:40px 0 76px}
  .tarjeta-detalle{font-size:.83rem}

  /* el botón "Filtrar" y sus controles de gaveta desaparecen: ya está a la vista */
  .btn-filtrar{display:none}

  .catalogo-layout{
    display:grid;
    grid-template-columns:224px 1fr;
    gap:36px;
    align-items:start;
  }

  /* el panel deja de ser gaveta y pasa a ser columna fija */
  .filtros{
    position:static;
    transform:none;
    height:auto;
    width:auto;
    z-index:auto;
    border:1px solid var(--linea);
  }
  .filtros-cabeza .icono-btn{display:none}       /* nada que cerrar en PC */
  .filtros-cuerpo{overflow:visible}
  .filtros-pie{padding:14px 18px}
  .filtros-pie .filtros-ver{display:none}        /* "ver resultados" es solo de móvil */

  .catalogo-main .rejilla{grid-template-columns:repeat(3,1fr);gap:36px 24px}
}

/* pantallas anchas: cuarta columna de productos */
@media (min-width:1280px){
  .catalogo-main .rejilla{grid-template-columns:repeat(4,1fr)}
}

/* pantallas muy angostas: 320px, teléfonos viejos.
   Se mantienen las 2 columnas (la dueña las quiere siempre de a dos). */
@media (max-width:359px){
  .contenedor{padding:0 12px}
  .rejilla{grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .logo img{width:min(180px,54vw)}
  .portada{padding:38px 0 34px}
  .tarjeta-nombre{font-size:.86rem}
  .btn-agregar{letter-spacing:.1em;font-size:10px}
  .orden select{font-size:11px;padding:9px 28px 9px 30px;background-size:13px,10px}
}

/* quien pidió menos movimiento, recibe menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* impresión: por si alguien imprime la lista de precios */
@media print{
  .cabecera,.gaveta,.telon,.ventana,.aviso,.btn-agregar,.pie{display:none !important}
  body{color:#000}
  .rejilla{grid-template-columns:repeat(3,1fr)}
}