/* =========================================================
   styles.css — Tienda JASHMAL
   "Elegancia industrial": azul confianza, naranja acción,
   verde disponibilidad, y el rojo de la marca reservado
   exclusivamente para el logo.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --marca-rojo:    #e30a1c;   /* solo para el isotipo */

  /* Paleta funcional */
  --azul:          #1a3a5c;
  --azul-osc:      #12293f;
  --azul-claro:    #2c5a86;
  --azul-suave:    #eaf1f8;

  --cta:           #e8751a;
  --cta-osc:       #cf6410;
  --cta-suave:     #fdf0e4;

  --exito:         #2e7d32;
  --exito-suave:   #eaf5eb;
  --alerta:        #c62828;
  --alerta-suave:  #fdecec;
  --oro:           #f5a623;

  /* Superficies */
  --fondo:         #f8f9fa;
  --superficie:    #ffffff;
  --superficie-2:  #e9ecef;
  --linea:         #dee2e6;
  --linea-suave:   #eef0f2;

  /* Texto */
  --texto:         #212529;
  --texto-2:       #495057;
  --texto-3:       #868e96;

  /* Tipografía */
  --f-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(1.9rem, 4vw, 2.75rem);

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;

  /* Formas */
  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-full: 999px;

  --sombra-sm:  0 1px 3px rgba(26, 58, 92, 0.08), 0 1px 2px rgba(26, 58, 92, 0.04);
  --sombra:     0 4px 14px rgba(26, 58, 92, 0.10), 0 2px 4px rgba(26, 58, 92, 0.05);
  --sombra-alta:0 14px 38px rgba(26, 58, 92, 0.16), 0 4px 10px rgba(26, 58, 92, 0.07);

  --t: 0.3s cubic-bezier(0.25, 0.8, 0.35, 1);
  --header-h: 132px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
svg { width: 20px; height: 20px; flex: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-titulo); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--azul); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--cta); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sp-5); }

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

.salto {
  position: absolute; left: 50%; top: -120px; transform: translateX(-50%); z-index: 300;
  background: var(--cta); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r) var(--r); font-weight: 600; transition: top var(--t);
}
.salto:focus { top: 0; color: #fff; }

/* ---------- 3. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.72rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em;
  transition: background-color var(--t), border-color var(--t), color var(--t),
              transform 0.12s ease, box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.5rem 0.9rem; font-size: var(--fs-xs); }
.btn-bloque { width: 100%; }

.btn-cta { background: var(--cta); color: #fff; box-shadow: 0 2px 8px rgba(232,117,26,.28); }
.btn-cta:hover { background: var(--cta-osc); color: #fff; box-shadow: 0 5px 16px rgba(232,117,26,.36); }

.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-osc); color: #fff; }

.btn-linea { background: transparent; color: var(--azul); border-color: var(--linea); }
.btn-linea:hover { background: var(--azul-suave); border-color: var(--azul); color: var(--azul); }

.btn-peligro { background: var(--alerta); color: #fff; }
.btn-peligro:hover { background: #a71d1d; color: #fff; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-texto {
  background: none; border: 0; padding: 0; color: var(--cta); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- 4. Header ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 80;
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}

.barra-aviso {
  background: linear-gradient(90deg, var(--azul-osc), var(--azul), var(--azul-claro));
  color: #fff; font-size: var(--fs-xs); text-align: center; padding: 0.45rem 0;
  letter-spacing: 0.02em;
}
.barra-aviso strong { color: var(--oro); }

.cab-principal {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: var(--sp-5); padding-block: var(--sp-3);
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--texto); }
.logo:hover { color: var(--texto); }
.logo-marca { width: 42px; height: 42px; color: var(--marca-rojo); }
.logo-texto { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nombre {
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.6rem;
  letter-spacing: 0.02em; color: var(--texto);
}
.logo-lema {
  font-family: var(--f-titulo); font-style: italic; font-size: 0.62rem;
  color: var(--texto-3); letter-spacing: 0.01em; white-space: nowrap;
}

/* Buscador */
.buscador { position: relative; display: flex; align-items: center; max-width: 620px; margin-inline: auto; width: 100%; }
.buscador-lupa { position: absolute; left: 14px; color: var(--texto-3); pointer-events: none; width: 19px; height: 19px; }
.buscador input {
  width: 100%; padding: 0.7rem 5.2rem 0.7rem 2.75rem;
  background: var(--fondo); border: 1.5px solid var(--linea); border-radius: var(--r-full);
  font-size: var(--fs-sm); transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus {
  background: var(--superficie); border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(26,58,92,.10);
}
.buscador input::-webkit-search-cancel-button { display: none; }

.buscador-acciones { position: absolute; right: 6px; display: flex; gap: 2px; }
.buscador-acciones button {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: none; border: 0; border-radius: 50%; color: var(--texto-3);
  transition: background-color var(--t), color var(--t);
}
.buscador-acciones button:hover { background: var(--superficie-2); color: var(--azul); }
.buscador-acciones button svg { width: 17px; height: 17px; }
#btn-micro.escuchando { color: var(--alerta); animation: pulso 1.1s ease-in-out infinite; }
@keyframes pulso { 50% { transform: scale(1.18); } }

/* Acciones de cabecera */
.cab-acciones { display: flex; align-items: center; gap: var(--sp-2); }

.icono-btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 0.4rem 0.65rem; background: none; border: 1.5px solid transparent;
  border-radius: var(--r-sm); color: var(--texto-2); font-size: 0.68rem; font-weight: 600;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.icono-btn:hover { background: var(--azul-suave); color: var(--azul); }
.icono-btn svg { width: 22px; height: 22px; }

.badge-carrito {
  position: absolute; top: 0; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--alerta); color: #fff; border: 2px solid var(--superficie);
  border-radius: var(--r-full); font-size: 0.62rem; font-weight: 700; line-height: 1;
}
.badge-carrito.rebote { animation: rebote-badge .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes rebote-badge {
  0% { transform: scale(1); } 30% { transform: scale(1.55); }
  60% { transform: scale(.88); } 100% { transform: scale(1); }
}

/* Menú de usuario */
.usuario-menu { position: relative; }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--azul); color: #fff; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.avatar.invitado { background: var(--superficie-2); color: var(--texto-2); }

.desplegable {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 90;
  min-width: 232px; padding: var(--sp-2);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra-alta);
  animation: caer .22s var(--t);
}
.desplegable[hidden] { display: none; }
@keyframes caer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.desp-cabecera { padding: var(--sp-3); border-bottom: 1px solid var(--linea-suave); margin-bottom: var(--sp-2); }
.desp-nombre { font-weight: 700; font-size: var(--fs-sm); }
.desp-email { font-size: var(--fs-xs); color: var(--texto-3); word-break: break-all; }
.chip-rol {
  display: inline-block; margin-top: var(--sp-2); padding: .1rem .5rem;
  background: var(--cta); color: #fff; border-radius: var(--r-sm);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.desplegable a, .desplegable button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: .6rem var(--sp-3); background: none; border: 0; border-radius: var(--r-sm);
  color: var(--texto); font-size: var(--fs-sm); text-align: left;
  transition: background-color var(--t), color var(--t);
}
.desplegable a:hover, .desplegable button:hover { background: var(--azul-suave); color: var(--azul); }
.desplegable svg { width: 17px; height: 17px; color: var(--texto-3); }

/* Mega-menú */
.nav-categorias { background: var(--azul); }
.nav-lista { display: flex; align-items: center; gap: var(--sp-1); }
.nav-lista > li { position: relative; }
.nav-enlace {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .8rem var(--sp-4); background: none; border: 0;
  color: rgba(255,255,255,.9); font-size: var(--fs-sm); font-weight: 500;
  transition: background-color var(--t), color var(--t);
}
.nav-enlace:hover, .nav-enlace[aria-expanded="true"] { background: var(--azul-osc); color: #fff; }
.nav-enlace.destacado { color: var(--oro); font-weight: 700; }

.mega {
  position: absolute; left: 0; top: 100%; z-index: 85;
  width: 620px; padding: var(--sp-5);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  background: var(--superficie); border-radius: 0 0 var(--r) var(--r);
  box-shadow: var(--sombra-alta); animation: caer .22s var(--t);
}
.mega[hidden] { display: none; }
.mega a {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm); color: var(--texto);
  transition: background-color var(--t);
}
.mega a:hover { background: var(--azul-suave); color: var(--texto); }
.mega-icono {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: var(--azul-suave); color: var(--azul); border-radius: var(--r-sm);
}
.mega-titulo { font-weight: 600; font-size: var(--fs-sm); }
.mega-desc { font-size: var(--fs-xs); color: var(--texto-3); line-height: 1.4; }

/* ---------- 5. Carrusel ---------- */
.carrusel { position: relative; overflow: hidden; background: var(--azul-osc); }
.slides { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.slide {
  flex: 0 0 100%; min-height: 300px;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) 0;
}
.slide-1 { background: linear-gradient(120deg, #12293f 0%, #1a3a5c 55%, #2c5a86 100%); }
.slide-2 { background: linear-gradient(120deg, #1a3a5c 0%, #24486d 60%, #35618c 100%); }
.slide-3 { background: linear-gradient(120deg, #1c4030 0%, #2e7d32 65%, #3d9142 100%); }

.slide-contenido { color: #fff; }
.slide-etiqueta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .3rem .8rem; margin-bottom: var(--sp-4);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.slide-etiqueta.naranja { background: var(--cta); border-color: var(--cta); }
.slide h2 { font-size: var(--fs-3xl); color: #fff; margin-bottom: var(--sp-3); }
.slide h2 em { font-style: italic; color: var(--oro); }
.slide p { color: rgba(255,255,255,.85); max-width: 46ch; font-size: var(--fs-lg); }
.slide-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.slide .btn-linea { color: #fff; border-color: rgba(255,255,255,.5); }
.slide .btn-linea:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* Temporizador */
.temporizador { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.tempo-caja {
  min-width: 68px; padding: var(--sp-3) var(--sp-2); text-align: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r); backdrop-filter: blur(4px);
}
.tempo-num {
  display: block; font-family: var(--f-titulo); font-size: 1.85rem;
  font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.tempo-lbl {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.slide-arte { display: grid; place-items: center; }
.slide-arte-caja {
  width: 100%; max-width: 240px; aspect-ratio: 1;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg); backdrop-filter: blur(6px);
}
.slide-arte-caja svg { width: 46%; height: 46%; color: rgba(255,255,255,.85); }

.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; color: #fff; transition: background-color var(--t);
}
.carrusel-flecha:hover { background: rgba(255,255,255,.3); }
.flecha-izq { left: var(--sp-4); }
.flecha-der { right: var(--sp-4); }

.carrusel-puntos {
  position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: var(--sp-2);
}
.carrusel-puntos button {
  width: 34px; height: 4px; padding: 0; border: 0; border-radius: var(--r-full);
  background: rgba(255,255,255,.35); transition: background-color var(--t), width var(--t);
}
.carrusel-puntos button[aria-current="true"] { background: var(--cta); width: 52px; }

/* ---------- 6. Confianza ---------- */
.confianza { background: var(--superficie); border-bottom: 1px solid var(--linea-suave); }
.confianza-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  padding-block: var(--sp-5);
}
.confianza-item { display: flex; align-items: center; gap: var(--sp-3); }
.confianza-item svg { width: 26px; height: 26px; color: var(--azul); }
.confianza-item strong { display: block; font-size: var(--fs-sm); }
.confianza-item span { font-size: var(--fs-xs); color: var(--texto-3); }

/* ---------- 7. Catálogo ---------- */
.tienda { padding-block: var(--sp-7) var(--sp-8); }
.tienda-cabecera { text-align: center; margin-bottom: var(--sp-6); }
.tienda-cabecera h2 { font-size: var(--fs-2xl); }
.tienda-cabecera p { color: var(--texto-2); margin-top: var(--sp-2); }

.tienda-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }

/* Panel de filtros */
.filtros-panel {
  position: sticky; top: calc(var(--header-h) + 16px);
  padding: var(--sp-5); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-sm);
}

/* Controles exclusivos del cajón de filtros en móvil — ocultos en escritorio */
.btn-filtros-movil, .filtros-cerrar-movil, .filtros-aplicar-movil, .filtros-backdrop { display: none; }

.filtros-titulo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--linea-suave);
}
.filtros-titulo h3 { font-size: var(--fs-md); }

.filtro-grupo { margin-bottom: var(--sp-5); }
.filtro-grupo:last-child { margin-bottom: 0; }
.filtro-grupo > h4 {
  font-family: var(--f-cuerpo); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
  margin-bottom: var(--sp-3);
}

.filtro-lista li + li { margin-top: 2px; }
.filtro-cat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: .5rem .7rem; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--texto-2); font-size: var(--fs-sm); text-align: left;
  transition: background-color var(--t), color var(--t);
}
.filtro-cat:hover { background: var(--azul-suave); color: var(--azul); }
.filtro-cat[aria-pressed="true"] { background: var(--azul); color: #fff; font-weight: 600; }
.filtro-cat .cuenta { font-size: var(--fs-xs); opacity: .75; font-variant-numeric: tabular-nums; }

/* Rango de precio */
.rango-valores {
  display: flex; justify-content: space-between; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.rango-doble { position: relative; height: 30px; }
.rango-doble input[type="range"] {
  position: absolute; left: 0; top: 8px; width: 100%; height: 4px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.rango-pista {
  position: absolute; left: 0; top: 8px; width: 100%; height: 4px;
  background: var(--superficie-2); border-radius: var(--r-full);
}
.rango-activo { position: absolute; top: 8px; height: 4px; background: var(--cta); border-radius: var(--r-full); }
.rango-doble input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; background: var(--superficie);
  border: 3px solid var(--cta); cursor: grab; box-shadow: var(--sombra-sm);
}
.rango-doble input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--cta); cursor: grab;
}

/* Filtro de rating */
.filtro-estrella {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: .4rem .7rem; background: none; border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--texto-2); text-align: left;
  transition: background-color var(--t);
}
.filtro-estrella:hover { background: var(--azul-suave); }
.filtro-estrella[aria-pressed="true"] { background: var(--cta-suave); color: var(--cta-osc); font-weight: 600; }
.filtro-estrella svg { width: 14px; height: 14px; fill: var(--superficie-2); }
.filtro-estrella svg.llena { fill: var(--oro); }

.solo-stock { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); cursor: pointer; }
.solo-stock input { width: 17px; height: 17px; accent-color: var(--cta); }

/* Barra de orden */
.barra-orden {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r);
}
.cuenta-resultados { font-size: var(--fs-sm); color: var(--texto-2); }
.cuenta-resultados strong { color: var(--texto); }
.orden-campo { display: flex; align-items: center; gap: var(--sp-2); }
.orden-campo label { font-size: var(--fs-sm); color: var(--texto-2); }
.orden-campo select {
  padding: .45rem 2rem .45rem .75rem; background: var(--fondo) no-repeat right .6rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='3'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  font-size: var(--fs-sm); appearance: none; cursor: pointer;
}
.orden-campo select:focus { border-color: var(--azul); }

.chips-activos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .28rem .5rem .28rem .75rem; background: var(--azul-suave);
  border: 1px solid var(--azul-claro); border-radius: var(--r-full);
  font-size: var(--fs-xs); color: var(--azul);
}
.chip button {
  display: grid; place-items: center; width: 18px; height: 18px;
  background: var(--azul); border: 0; border-radius: 50%; color: #fff;
}
.chip button svg { width: 10px; height: 10px; }

/* ---------- 8. Tarjetas de producto ---------- */
.grid-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-5);
}

.producto {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea-suave); border-radius: var(--r);
  box-shadow: var(--sombra-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.producto:hover { transform: scale(1.02); box-shadow: var(--sombra-alta); border-color: var(--linea); }
.producto.agotado { opacity: .82; }

.producto-media {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 1; background: var(--superficie-2); overflow: hidden; cursor: zoom-in;
}
.producto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--t); }
.producto:hover .producto-media img { transform: scale(1.07); }

.etiqueta {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  padding: .22rem .55rem; border-radius: var(--r-sm);
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff;
}
.et-oferta  { background: var(--cta); }
.et-nuevo   { background: var(--exito); }
.et-ultimas { background: var(--alerta); }
.et-descuento {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--alerta); color: #fff; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 800; line-height: 1; box-shadow: var(--sombra);
}
.capa-agotado {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(33,37,41,.55); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.producto-cuerpo { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.producto-cat { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }
.producto-nombre { font-family: var(--f-cuerpo); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.producto-nombre button {
  background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit;
  transition: color var(--t);
}
.producto-nombre button:hover { color: var(--cta); }

.rating { display: inline-flex; align-items: center; gap: .3rem; }
.estrellas { display: inline-flex; gap: 1px; }
.estrellas svg { width: 14px; height: 14px; fill: var(--superficie-2); }
.estrellas svg.llena { fill: var(--oro); }
.resenas-num { font-size: var(--fs-xs); color: var(--texto-3); }

.stock-linea { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; }
.stock-ok    { color: var(--exito); }
.stock-bajo  { color: var(--alerta); }
.stock-nulo  { color: var(--texto-3); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.precios { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-2); }
.precio-actual { font-size: var(--fs-xl); font-weight: 800; color: var(--cta); letter-spacing: -.02em; }
.precio-antes { font-size: var(--fs-sm); color: var(--texto-3); text-decoration: line-through; }
.precio-usd-ref { font-size: var(--fs-xs); color: var(--texto-3); margin-top: 2px; }

.producto-pie { padding: 0 var(--sp-4) var(--sp-4); }

/* Botón añadir con sus tres estados */
.btn-anadir { position: relative; width: 100%; overflow: hidden; }
.btn-anadir .texto-btn,
.btn-anadir .spinner-btn,
.btn-anadir .check-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: opacity .2s, transform .2s;
}
.btn-anadir .spinner-btn, .btn-anadir .check-btn { position: absolute; opacity: 0; transform: scale(.6); }
.btn-anadir.cargando .texto-btn { opacity: 0; }
.btn-anadir.cargando .spinner-btn { opacity: 1; transform: scale(1); }
.btn-anadir.listo { background: var(--exito); box-shadow: none; }
.btn-anadir.listo .texto-btn { opacity: 0; }
.btn-anadir.listo .check-btn { opacity: 1; transform: scale(1); }

.spinner-btn svg { width: 17px; height: 17px; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Skeleton */
.skeleton { pointer-events: none; }
.sk-bloque {
  background: linear-gradient(90deg, var(--superficie-2) 25%, #f1f3f5 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brillo 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes brillo { to { background-position: -200% 0; } }
.sk-img { aspect-ratio: 1; border-radius: 0; }
.sk-linea { height: 12px; margin-top: var(--sp-2); }
.sk-linea.corta { width: 55%; }
.sk-btn { height: 40px; margin-top: var(--sp-4); border-radius: var(--r-sm); }

.vacio-estado { grid-column: 1 / -1; padding: var(--sp-8) var(--sp-4); text-align: center; }
.vacio-estado svg { width: 52px; height: 52px; color: var(--texto-3); margin-bottom: var(--sp-4); }
.vacio-estado h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.vacio-estado p { color: var(--texto-2); margin-bottom: var(--sp-4); }

/* ---------- 9. Modales ---------- */
.modal { position: fixed; inset: 0; z-index: 200; }
.modal[hidden] { display: none; }
.modal-fondo { position: absolute; inset: 0; background: rgba(18,41,63,.62); backdrop-filter: blur(3px); animation: aparecer .2s; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  position: relative; z-index: 1; width: min(600px, calc(100% - 2rem));
  max-height: min(90vh, 940px); margin: 5vh auto 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-alta);
  animation: subir .28s var(--t);
}
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.modal-xl { width: min(940px, calc(100% - 2rem)); }
.modal-sm { width: min(430px, calc(100% - 2rem)); }

.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--linea-suave);
}
.modal-cabecera h2 { font-size: var(--fs-xl); }
.modal-cerrar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 50%;
  color: var(--texto-2); transition: background-color var(--t), color var(--t);
}
.modal-cerrar:hover { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta); }
.modal-scroll { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.modal-pie { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--linea-suave); background: var(--fondo); }
.modal-acciones { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }
.modal-acciones .btn { flex: 1 1 auto; }

/* Detalle de producto */
.detalle { display: grid; grid-template-columns: 1fr 1fr; }
.detalle-media { position: relative; background: var(--superficie-2); aspect-ratio: 1; overflow: hidden; }
#det-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--t); cursor: zoom-in; }
#det-img.zoom { transform: scale(1.85); cursor: zoom-out; }

.detalle-miniaturas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: var(--sp-2); padding: var(--sp-3);
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
  overflow-x: auto;
}
.detalle-miniatura {
  flex: none; width: 52px; height: 52px; padding: 0;
  border: 2px solid rgba(255,255,255,.6); border-radius: var(--r-sm);
  overflow: hidden; background: var(--superficie-2); opacity: .75;
  transition: opacity var(--t), border-color var(--t);
}
.detalle-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.detalle-miniatura:hover { opacity: 1; }
.detalle-miniatura.activa { opacity: 1; border-color: var(--cta); }

.detalle-info { padding: var(--sp-6) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; max-height: 88vh; }
.detalle-info h2 { font-family: var(--f-cuerpo); font-size: var(--fs-lg); font-weight: 700; }

.btn-compartir {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 50%;
  color: var(--texto-2); transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn-compartir:hover { background: var(--azul-suave); color: var(--azul); border-color: var(--azul-claro); }
.btn-compartir svg { width: 18px; height: 18px; }
.detalle-desc { color: var(--texto-2); font-size: var(--fs-sm); }
.detalle-precios { display: flex; align-items: baseline; gap: var(--sp-3); }
.detalle-precios .precio-actual { font-size: var(--fs-2xl); }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--linea); margin-top: var(--sp-2); }
.tab {
  padding: .55rem .9rem; background: none; border: 0; border-bottom: 2.5px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--texto-3); transition: color var(--t), border-color var(--t);
}
.tab[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--cta); }
.panel-tab[hidden] { display: none; }

/* Reseñas */
.resena {
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea-suave);
}
.resena:last-child { border-bottom: 0; }
.resena-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.resena-autor { font-size: var(--fs-sm); font-weight: 600; }
.resena-fecha { font-size: var(--fs-xs); color: var(--texto-3); }
.resena-texto { font-size: var(--fs-sm); color: var(--texto-2); }

.form-resena { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--fondo); border-radius: var(--r); }
.selector-estrellas { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.selector-estrellas button { background: none; border: 0; padding: 2px; }
.selector-estrellas svg { width: 26px; height: 26px; fill: var(--superficie-2); transition: fill var(--t), transform .15s; }
.selector-estrellas button:hover svg { transform: scale(1.15); }
.selector-estrellas svg.llena { fill: var(--oro); }

/* Carrito */
.linea-carrito {
  display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea-suave);
}
.linea-carrito:last-of-type { border-bottom: 0; }
.linea-carrito img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--r-sm); }
.lc-nombre { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.lc-unit { font-size: var(--fs-xs); color: var(--texto-3); }
.lc-aviso { font-size: var(--fs-xs); font-weight: 700; color: var(--alerta); }
.lc-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.lc-total { font-size: var(--fs-sm); font-weight: 700; color: var(--azul); }

.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--linea); border-radius: var(--r-full); overflow: hidden; }
.cantidad button {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--fondo); border: 0; color: var(--texto); transition: background-color var(--t), color var(--t);
}
.cantidad button:hover:not(:disabled) { background: var(--cta); color: #fff; }
.cantidad button:disabled { opacity: .35; cursor: not-allowed; }
.cantidad button svg { width: 13px; height: 13px; }
.cantidad output { min-width: 2.3rem; text-align: center; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-quitar { background: none; border: 0; color: var(--texto-3); font-size: var(--fs-xs); text-decoration: underline; }
.lc-quitar:hover { color: var(--alerta); }

.barra-envio { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--exito-suave); border-radius: var(--r); font-size: var(--fs-sm); }
.barra-envio.falta { background: var(--cta-suave); }
.barra-envio strong { color: var(--exito); }
.barra-envio.falta strong { color: var(--cta-osc); }
.barra-progreso { height: 6px; margin-top: var(--sp-2); background: var(--superficie-2); border-radius: var(--r-full); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--cta); border-radius: var(--r-full); transition: width .5s var(--t); }

.cupon-fila { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.cupon-fila input {
  flex: 1; padding: .6rem .8rem; background: var(--fondo);
  border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  font-size: var(--fs-sm); text-transform: uppercase;
}
.cupon-fila input:focus { border-color: var(--azul); }
.cupon-activo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: var(--sp-3); background: var(--exito-suave);
  border: 1px dashed var(--exito); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--exito);
}
.cupon-pista { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--texto-3); }
.cupon-pista code { background: var(--superficie-2); padding: .1rem .35rem; border-radius: 4px; font-size: .95em; }

.totales { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.totales > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.totales dt { color: var(--texto-2); font-size: var(--fs-sm); }
.totales dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.totales .verde dd { color: var(--exito); }
.total-final { padding-top: var(--sp-3); border-top: 2px solid var(--linea); }
.total-final dt { font-size: var(--fs-md); font-weight: 700; color: var(--texto); }
.total-final dd { font-size: var(--fs-xl); font-weight: 800; color: var(--cta); }

/* Checkout en 3 pasos */
.pasos { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--fondo); border-bottom: 1px solid var(--linea-suave); }
.paso { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--texto-3); }
.paso-num {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--superficie-2); color: var(--texto-3); border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; transition: background-color var(--t), color var(--t);
}
.paso.activo { color: var(--azul); font-weight: 700; }
.paso.activo .paso-num { background: var(--cta); color: #fff; }
.paso.hecho .paso-num { background: var(--exito); color: #fff; }
.paso-linea { flex: 1; height: 2px; background: var(--superficie-2); }

.campo { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.campo label { font-size: var(--fs-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  padding: .65rem .85rem; background: var(--superficie);
  border: 1.5px solid var(--linea); border-radius: var(--r-sm); font-size: var(--fs-sm);
  transition: border-color var(--t), box-shadow var(--t); width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(26,58,92,.10);
}
.campo input[aria-invalid="true"] { border-color: var(--alerta); }
.campo textarea { resize: vertical; min-height: 82px; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.campo-msg { font-size: var(--fs-xs); min-height: 1.05em; }
.campo-msg.error { color: var(--alerta); }
.campo-msg.ok { color: var(--exito); }

.exito-pedido { text-align: center; padding: var(--sp-5) 0; }
.exito-icono {
  width: 74px; height: 74px; margin: 0 auto var(--sp-4); display: grid; place-items: center;
  background: var(--exito-suave); border: 3px solid var(--exito); border-radius: 50%; color: var(--exito);
  animation: sello .5s cubic-bezier(.3,1.5,.5,1);
}
@keyframes sello { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.exito-icono svg { width: 36px; height: 36px; }
.exito-pedido h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.exito-pedido p { color: var(--texto-2); font-size: var(--fs-sm); }
.num-pedido {
  display: inline-block; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-5);
  background: var(--fondo); border: 2px dashed var(--linea); border-radius: var(--r);
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: .06em; color: var(--azul);
}

.aviso-demo {
  padding: var(--sp-3); margin-bottom: var(--sp-4);
  background: var(--azul-suave); border-left: 3px solid var(--azul);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-xs); color: var(--texto-2);
}
.aviso-demo code { background: var(--superficie); padding: .1rem .35rem; border-radius: 4px; font-weight: 600; }

/* Mis pedidos */
.pedido-tarjeta { padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r); }
.pedido-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pedido-id { font-weight: 700; color: var(--azul); }
.pedido-items { font-size: var(--fs-xs); color: var(--texto-2); }

.estado {
  display: inline-block; padding: .18rem .6rem; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
}
.estado-pendiente { background: var(--cta-suave); color: var(--cta-osc); }
.estado-enviado   { background: var(--azul-suave); color: var(--azul); }
.estado-entregado { background: var(--exito-suave); color: var(--exito); }
.estado-cancelado { background: var(--alerta-suave); color: var(--alerta); }

/* ---------- 10. Toasts y confeti ---------- */
.toasts {
  position: fixed; top: calc(var(--header-h) + 12px); right: var(--sp-5); z-index: 400;
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3); max-width: 340px;
  padding: var(--sp-3) var(--sp-4); background: var(--superficie);
  border-left: 4px solid var(--exito); border-radius: var(--r);
  box-shadow: var(--sombra-alta); font-size: var(--fs-sm); animation: entrar-der .3s var(--t);
}
.toast.saliendo { animation: salir-der .3s var(--t) forwards; }
.toast svg { width: 19px; height: 19px; color: var(--exito); }
.toast-error { border-left-color: var(--alerta); }
.toast-error svg { color: var(--alerta); }
.toast-info { border-left-color: var(--azul); }
.toast-info svg { color: var(--azul); }
@keyframes entrar-der { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes salir-der  { to { opacity: 0; transform: translateX(30px); } }

.particula {
  position: fixed; z-index: 500; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; animation: confeti .75s ease-out forwards;
}
@keyframes confeti {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(430deg) scale(.2); opacity: 0; }
}

/* ---------- 11. Footer ---------- */
.pie { background: var(--azul-osc); color: rgba(255,255,255,.78); margin-top: var(--sp-7); }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: var(--sp-6); padding-block: var(--sp-7); }
.pie h3 {
  font-family: var(--f-cuerpo); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--oro); margin-bottom: var(--sp-4);
}
.pie a { color: rgba(255,255,255,.78); font-size: var(--fs-sm); }
.link-como-texto {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  color: rgba(255,255,255,.78); font-size: var(--fs-sm); font-family: inherit;
  transition: color var(--t);
}
.link-como-texto:hover { color: var(--cta); }
.pie a:hover { color: var(--cta); }
.pie li + li { margin-top: var(--sp-2); }
.pie-marca img { height: 46px; width: auto; margin-bottom: var(--sp-3); }
.pie-marca p { font-size: var(--fs-sm); max-width: 30ch; }

.redes { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.redes a {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: rgba(255,255,255,.08); border-radius: 50%; color: #fff;
  transition: background-color var(--t), transform var(--t);
}
.redes a:hover { background: var(--cta); color: #fff; transform: translateY(-3px); }

.boletin p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.boletin-fila { display: flex; gap: var(--sp-2); }
.boletin-fila input {
  flex: 1; min-width: 0; padding: .65rem .85rem;
  background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--r-sm); color: #fff; font-size: var(--fs-sm);
}
.boletin-fila input::placeholder { color: rgba(255,255,255,.45); }
.boletin-fila input:focus { border-color: var(--cta); background: rgba(255,255,255,.16); }

.pie-abajo {
  display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding-block: var(--sp-4); border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1080px) {
  .tienda-layout { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: repeat(2, 1fr); }
  .slide { grid-template-columns: 1fr; text-align: center; min-height: 380px; }
  .slide p { margin-inline: auto; }
  .slide-acciones, .temporizador { justify-content: center; }
  .slide-arte { display: none; }
  .confianza-grid { grid-template-columns: repeat(2, 1fr); }

  /* Filtros como cajón deslizante en vez de ocupar toda la pantalla */
  .btn-filtros-movil { display: inline-flex; }
  .filtros-cerrar-movil {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    background: var(--fondo); border: 1px solid var(--linea); border-radius: 50%; color: var(--texto-2);
  }
  .filtros-cerrar-movil svg { width: 16px; height: 16px; }
  .filtros-aplicar-movil { display: block; margin-top: var(--sp-5); position: sticky; bottom: 0; }

  .filtros-backdrop {
    display: block; position: fixed; inset: 0; z-index: 210;
    background: rgba(18,41,63,.55); opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .filtros-backdrop.visible { opacity: 1; pointer-events: auto; }

  .filtros-panel {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 215;
    width: min(320px, 86vw); max-width: none; height: 100vh;
    border-radius: 0; box-shadow: var(--sombra-alta);
    overflow-y: auto; transform: translateX(-105%);
    transition: transform var(--t);
  }
  .filtros-panel.abierto { transform: translateX(0); }
}

@media (max-width: 860px) {
  :root { --header-h: 118px; }
  .cab-principal {
    grid-template-columns: auto auto;
    grid-template-areas: "logo acciones" "buscador buscador";
    row-gap: var(--sp-3); justify-content: space-between;
  }
  .logo { grid-area: logo; }
  .buscador { grid-area: buscador; }
  .cab-acciones { grid-area: acciones; }
  .icono-btn span:not(.badge-carrito):not(.avatar) { display: none; }
  .nav-lista { overflow-x: auto; scrollbar-width: none; }
  .nav-lista::-webkit-scrollbar { display: none; }
  .mega { position: static; width: 100%; grid-template-columns: 1fr; box-shadow: none; border-radius: 0; }
  .detalle { grid-template-columns: 1fr; }
  .detalle-media { aspect-ratio: 16/10; flex: none; }
  .detalle-info { max-height: none; }

  /* El bug real: al apilar foto + info en una sola columna, nada
     dentro del modal permitía hacer scroll — el panel exterior
     recorta con overflow:hidden y no había ningún contenedor
     interno que absorbiera el desborde. Se veía solo la foto de
     arriba, sin forma de llegar al precio, la descripción, las
     miniaturas ni el botón de comprar. Aquí es donde se soluciona:
     el bloque completo (foto + info) se vuelve su propia zona de
     scroll, dentro del alto disponible del modal. */
  #detalle-cuerpo.detalle {
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 620px) {
  .wrap { padding-inline: var(--sp-4); }
  .logo-nombre { font-size: 1.25rem; }
  .logo-lema { display: none; }
  .grid-productos { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--sp-3); }
  .producto-cuerpo, .producto-pie { padding-inline: var(--sp-3); }
  .pie-grid { grid-template-columns: 1fr; }
  .confianza-grid { grid-template-columns: 1fr; }
  .campo-fila { grid-template-columns: 1fr; }
  .modal-panel { margin-top: 2vh; max-height: 95vh; }
  .modal-acciones .btn { width: 100%; }
  .toasts { top: auto; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); }
  .toast { max-width: none; }
  .linea-carrito { grid-template-columns: 58px minmax(0,1fr); }
  .linea-carrito img { width: 58px; height: 58px; }
  .lc-derecha { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .slide h2 { font-size: 1.9rem; }
  .tempo-caja { min-width: 56px; }
}

/* ---------- 13. Preferencias del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .cabecera, .pie, .modal, .toasts, .carrusel, .filtros-panel { display: none !important; }
}