/* Zuno Shop · vitrina (2026-11-07). Experiencia tomada de Mercado Pago como referencia (pedido del propietario):
   barra superior de color sólido, fondo gris muy claro, tarjetas blancas, títulos en negritas sin cursiva, botón
   principal sólido y secundario en tono suave, accesos rápidos en círculos y montos grandes y limpios.
   La marca sigue siendo Zuno (logo y rojo #E20612): no se copia la identidad de Mercado Pago.
   Estructura de encabezado, tarjetas, carrito lateral, ficha y pie: plantilla «uikit-ecommerce-template»
   de Roman Chekurov (MIT, github.com/chekromul/uikit-ecommerce-template), sin UIkit. */
:root {
  --gris-fondo: #f2f2f2; --blanco: #ffffff; --gris-1: #f7f7f7; --gris-2: #ececec; --borde: #e3e3e3;
  --tinta: #1a1a1a; --tinta-2: #5c5c5c; --tinta-3: #8c8c8c;
  --rojo-z: #e20612; --rojo-h: #c10510; --rojo-suave: #fdeced; --rojo-suave-h: #fbdcdd;
  --verde: #00a650; --ambar: #c67b00; --azul-info: #3483fa;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .12); --sombra-2: 0 8px 22px -6px rgb(0 0 0 / .14);
  --curva: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- base ---------- */
html { scroll-padding-top: 110px; background: var(--gris-fondo); }
body { background: var(--gris-fondo); color: var(--tinta); font-weight: 400; }
html, body { overflow-x: clip; }
::selection { background: var(--rojo-suave-h); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--azul-info); outline-offset: 2px; border-radius: 6px; }
main { max-width: 1200px; padding-top: 20px; }
h1, h2, h3 { font-style: normal; text-transform: none; letter-spacing: -.01em; color: var(--tinta); }
h1 { font-weight: 700; }
.sub { color: var(--tinta-2); }
.nota { color: var(--tinta-3); }
.vacio { color: var(--tinta-2); }
.btn { border-radius: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; min-height: 48px; padding: 0 24px;
  background: var(--rojo-z); color: #fff; transition: background .15s; }
.btn:hover { background: var(--rojo-h); }
.btn.claro, .btn.contorno { background: var(--rojo-suave); color: var(--rojo-z); box-shadow: none; }
.btn.claro:hover, .btn.contorno:hover { background: var(--rojo-suave-h); }
.enlace { color: var(--azul-info); }
.sin-foto { width: 100%; height: 100%; display: grid; place-items: center; }
.sin-foto img { width: 40% !important; height: auto !important; object-fit: contain !important; opacity: .18; }

/* Monto al estilo de una app de pagos: signo y centavos chicos, pesos grandes. */
.tag { display: inline-flex; align-items: flex-start; gap: 2px; font-weight: 500; line-height: 1; color: var(--tinta); white-space: nowrap;
  font-variant-numeric: tabular-nums; background: none; padding: 0; transform: none; }
.tag .mon { font-size: .62em; margin-top: .14em; }
.tag sup { font-size: .5em; margin-top: .12em; line-height: 1; }
.tag.rojo, .tag.negro { color: var(--tinta); background: none; }

/* ---------- bienvenida (en cada carga desde el 2026-11-07, pedido del propietario) ----------
   Con el movimiento de la portada de zunoshop.com: líneas de velocidad, el logo llega con frenón y, ya cargada
   la tienda, arranca hacia la derecha mientras el telón rojo sube hasta la barra. Un toque o una tecla la saltan;
   con «reducir movimiento» no sale (index.html). */
.precarga-velo { display: none; }
.precarga .precarga-velo { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: var(--rojo-z); color: #fff; cursor: pointer; clip-path: inset(0 0 0 0); }
.pv-velocidad { position: absolute; inset: 0; pointer-events: none; }
.pv-velocidad i { position: absolute; right: -40%; height: clamp(4px, .8vw, 9px); border-radius: 99px; background: #fff; opacity: .14;
  animation: pv-corre var(--d, 2.4s) linear infinite; animation-delay: var(--r, 0s); }
.pv-centro { position: relative; display: grid; justify-items: center; gap: clamp(14px, 2.6vw, 26px); padding: 0 24px; text-align: center; }
.pv-logo { width: min(520px, 76vw); height: auto; animation: pv-llega 1s cubic-bezier(.7, 0, .2, 1) both; }
.pv-texto { margin: 0; font-family: "Barlow", system-ui, sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .95; font-size: clamp(30px, 6.4vw, 68px); transition: opacity .25s; }
.pv-texto span { display: inline-block; animation: pv-sube .7s cubic-bezier(.7, 0, .2, 1) .45s both; }
.pv-texto span + span { animation-delay: .57s; }
.pv-barra { position: absolute; inset-inline: 0; bottom: calc(48px + env(safe-area-inset-bottom)); width: min(260px, 56vw); height: 4px;
  margin-inline: auto; border-radius: 99px; background: rgb(255 255 255 / .25); overflow: hidden; }
.pv-barra b { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: left;
  animation: pv-carga 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.precarga-fuera .pv-logo { animation: pv-sale .55s cubic-bezier(.6, 0, .8, .2) forwards; }
.precarga-fuera .pv-texto { opacity: 0; }
.precarga-fuera .pv-barra b { animation: pv-completa .2s ease-out both; }
.precarga-fuera .precarga-velo { clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1) .35s; }
@keyframes pv-corre { to { transform: translateX(-260vw); } }
@keyframes pv-llega { 0% { opacity: 0; transform: translateX(-70vw) skewX(-24deg); } 25% { opacity: 1; }
  65% { transform: translateX(1.5vw) skewX(7deg); } 85% { transform: translateX(-.6vw) skewX(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes pv-sube { from { opacity: 0; transform: translateX(-.5em) skewX(-14deg); } to { opacity: 1; transform: none; } }
@keyframes pv-carga { from { transform: scaleX(0); } to { transform: scaleX(.8); } }
@keyframes pv-completa { from { transform: scaleX(.8); } to { transform: scaleX(1); } }
@keyframes pv-sale { 25% { transform: translateX(-2vw) skewX(6deg); } 100% { transform: translateX(120vw) skewX(-24deg); } }

/* ---------- encabezado: barra roja sólida ---------- */
.cab { position: sticky; top: 0; z-index: 40; background: var(--rojo-z); color: #fff; transition: box-shadow .2s; }
.cab.compacta { box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.cab-in { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.cab-logo img { height: 40px; width: auto; }
.cab-nav { display: flex; align-items: center; gap: 2px; }
.cab-nav > a, .cab-cats > button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: #fff; font-weight: 500; text-decoration: none; cursor: pointer; opacity: .92; }
.cab-nav > a:hover, .cab-cats > button:hover, .cab-cats > button[aria-expanded="true"] { background: rgb(255 255 255 / .16); opacity: 1; }
.cab-cats { position: relative; }
.cab-cats svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; }
.cab-cats > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-cats { position: absolute; left: 0; top: calc(100% + 10px); width: min(760px, 92vw); max-height: min(70vh, 560px); overflow-y: auto; padding: 12px; background: var(--blanco); color: var(--tinta);
  border-radius: 10px; box-shadow: 0 12px 34px -8px rgb(0 0 0 / .3); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .2s var(--curva), visibility 0s .2s; }
.menu-cats.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .2s var(--curva); }
.mega { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 4px; }
.mega a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-decoration: none; }
.mega a:hover { background: var(--gris-1); }
.mega-foto { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gris-1); padding: 6px; overflow: hidden; }
.mega-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mega b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.mega small { color: var(--tinta-3); font-size: 12px; }
.cab-buscar { flex: 1; max-width: 520px; margin-left: auto; position: relative; }
.cab-buscar svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--tinta-3); stroke-width: 2; }
.cab-buscar input { width: 100%; height: 42px; padding: 0 16px 0 42px; border-radius: 8px; border: 0; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.cab-buscar input::placeholder { color: var(--tinta-3); }
.cab-buscar input:focus { outline: 2px solid rgb(255 255 255 / .7); outline-offset: 0; }
.sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--blanco); color: var(--tinta);
  border-radius: 10px; box-shadow: 0 12px 34px -8px rgb(0 0 0 / .3); z-index: 5; }
.sugerencias a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; text-decoration: none; }
.sugerencias [aria-selected="true"] a, .sugerencias a:hover { background: var(--gris-1); }
.sugerencias img, .sugerencias .sin-foto { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.sugerencias span { font-size: 14px; line-height: 1.25; }
.sugerencias small { display: block; color: var(--tinta-3); font-size: 12px; }
.sugerencias b { font-size: 14px; font-weight: 600; }
.sug-todo a { display: block; text-align: center; color: var(--azul-info); font-weight: 600; font-size: 14px; }
.sug-vacio { padding: 12px; color: var(--tinta-2); font-size: 14px; }
.sug-cargando { display: grid; gap: 8px; padding: 10px; }
.sug-cargando i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--gris-1), var(--gris-2), var(--gris-1)); background-size: 200% 100%; animation: brillo 1.1s linear infinite; }
.cab-acciones { display: flex; gap: 2px; }
.cab-icono { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: #fff;
  cursor: pointer; text-decoration: none; transition: background .15s; }
.cab-icono:hover { background: rgb(255 255 255 / .16); }
.cab-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cab-icono b { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--blanco);
  color: var(--rojo-z); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cab-icono.salta b { animation: salta .45s var(--curva); }
@keyframes salta { 40% { transform: scale(1.35); } }
.solo-tel { display: none; }
@media (max-width: 900px) {
  .cab-nav { display: none; }
  .solo-tel { display: grid; }
  .cab-in { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
  .cab-buscar { order: 3; flex-basis: 100%; max-width: none; }
  .cab-acciones { margin-left: auto; }
  .cab.compacta .cab-buscar { display: none; }
}

/* ---------- cajones (menú del teléfono y carrito lateral) ---------- */
.cajon { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .2s; }
.cajon.abierto { opacity: 1; }
.cajon > aside { position: absolute; top: 0; bottom: 0; width: min(400px, 88vw); background: var(--blanco); display: flex; flex-direction: column;
  transition: transform .25s var(--curva); box-shadow: 0 0 30px rgb(0 0 0 / .2); }
.cajon.der > aside { right: 0; transform: translateX(100%); }
.cajon.izq > aside { left: 0; transform: translateX(-100%); }
.cajon.abierto > aside { transform: none; }
.cajon header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.cajon.izq header { background: var(--rojo-z); border-bottom: 0; }
.cajon header h2 { margin: 0; font-weight: 600; font-size: 20px; }
.cajon-cuerpo { flex: 1; overflow: auto; padding: 14px 18px; }
.cajon-pie { padding: 14px 18px 20px; border-top: 1px solid var(--borde); display: grid; gap: 8px; }
.cajon-pie:empty { display: none; }
.cerrar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--gris-1); color: var(--tinta); font-size: 22px; cursor: pointer; }
.cajon.izq .cerrar { background: rgb(255 255 255 / .2); color: #fff; }
.cajon-nav { list-style: none; margin: 0; padding: 0; display: grid; }
.cajon-nav a { display: flex; justify-content: space-between; padding: 13px 10px; border-bottom: 1px solid var(--gris-2); text-decoration: none; font-weight: 500; }
.cajon-nav a:hover { background: var(--gris-1); }
.cajon-nav small { color: var(--tinta-3); }
.cajon-titulo { margin: 20px 10px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; }
.cc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cc-lista li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--gris-2); }
.cc-foto { display: block; width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--gris-2); padding: 4px; overflow: hidden; }
.cc-foto img { width: 100%; height: 100%; object-fit: contain; }
.cc-nombre { font-size: 14px; line-height: 1.3; text-decoration: none; display: block; }
.cc-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.cc-fila b { font-weight: 600; }
.cantidad.chica { height: 34px; }
.cantidad.chica button { width: 30px; }
.cc-quitar { border: 0; background: none; color: var(--tinta-3); font-size: 22px; cursor: pointer; line-height: 1; }
.cc-quitar:hover { color: var(--rojo-z); }
.cc-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.con-cajon { overflow: hidden; }

/* ---------- portada: tarjeta de bienvenida + destacados ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 48px);
  margin: 0; padding: clamp(24px, 4vw, 48px); border-radius: 12px; background: var(--blanco); box-shadow: var(--sombra-1); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0 0 0 48%; background: linear-gradient(120deg, transparent, var(--rojo-suave) 60%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-texto > .tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--rojo-z); background: var(--rojo-suave); padding: 6px 12px; border-radius: 999px; }
.hero-titulo { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05; font-weight: 700; margin: 14px 0 14px; }
.hero-titulo span { display: inline; }
.hero-titulo span:last-child { color: var(--rojo-z); }
.hero p { color: var(--tinta-2); font-size: clamp(16px, 1.5vw, 18px); max-width: 44ch; margin: 0 0 24px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 780px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 24px; }
  .hero::after { inset: 0 0 55% 0; background: linear-gradient(180deg, var(--rojo-suave), transparent); }
  .hero-escena { order: -1; }
}

/* destacados (estático): una tarjeta a la vez; se mueve con flechas, puntos, teclado, trackpad o dedo */
.hero-escena { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.carr-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.carr-titulo.tag { background: none; padding: 0; }
.carr-marco { position: relative; width: 340px; max-width: 100%; }
.carr-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; background: var(--blanco); cursor: grab;
  box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 12px 30px -10px rgb(0 0 0 / .22); }
.carr-pista::-webkit-scrollbar { display: none; }
.carr-pista:focus-visible { outline: 2px solid var(--azul-info); outline-offset: 3px; }
.carrusel.arrastrando .carr-pista { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.carrusel.arrastrando .carr-item { pointer-events: none; }
.carr-item { scroll-snap-align: center; scroll-snap-stop: always; display: grid; color: var(--tinta); text-decoration: none; -webkit-user-select: none; user-select: none; }
.carr-foto { display: block; aspect-ratio: 1; padding: 20px 20px 6px; }
.carr-foto img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.carr-pie { display: grid; gap: 6px; padding: 12px 18px 18px; border-top: 1px solid var(--gris-2); }
.carr-texto { display: grid; gap: 3px; min-width: 0; order: 2; }
.carr-texto small { font-size: 12px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.carr-texto b { font-weight: 400; font-size: 15px; line-height: 1.3; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carr-item .tag { order: 1; font-size: 30px; }
.carr-controles { display: flex; align-items: center; justify-content: center; gap: 12px; }
.carr-flecha { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--blanco); color: var(--rojo-z); display: grid; place-items: center;
  cursor: pointer; box-shadow: var(--sombra-1); }
.carr-flecha:hover { background: var(--rojo-suave); }
.carr-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carr-puntos { display: flex; gap: 6px; }
.carr-puntos button { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.carr-puntos i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c8c8c8; }
.carr-puntos [aria-current="true"] i { background: var(--rojo-z); }
@media (max-width: 780px) { .carr-marco { width: 280px; max-width: 86%; } .carr-item .tag { font-size: 26px; } }

/* ---------- accesos rápidos en círculos ---------- */
.accesos { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0; padding: 18px 12px; background: var(--blanco); border-radius: 12px;
  box-shadow: var(--sombra-1); overflow-x: auto; scrollbar-width: none; }
.accesos > a, .accesos > button { flex: 1 0 84px; display: grid; justify-items: center; gap: 8px; border: 0; background: none; padding: 0; color: var(--tinta);
  font: inherit; font-size: 13px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.acc-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo-suave); color: var(--rojo-z); transition: background .15s; }
.accesos > :hover .acc-ico { background: var(--rojo-suave-h); }
.acc-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- beneficios: una sola tarjeta ---------- */
.beneficios { list-style: none; padding: 6px; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--blanco);
  border-radius: 12px; box-shadow: var(--sombra-1); }
.beneficios li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.beneficios li + li { border-left: 1px solid var(--gris-2); }
.beneficios svg { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--gris-1); fill: none; stroke: var(--tinta-2);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.beneficios b { display: block; font-size: 15px; font-weight: 600; }
.beneficios small { color: var(--tinta-2); font-size: 13px; line-height: 1.35; display: block; margin-top: 2px; }
@media (max-width: 900px) { .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beneficios li + li { border-left: 0; } }
@media (max-width: 480px) { .beneficios { grid-template-columns: 1fr; } }

/* ---------- bloques: tarjeta blanca con título y «Ver todo» ---------- */
.bloque { margin: 0 0 24px; padding: 20px; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); scroll-margin-top: 110px; }
.cabeza-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cabeza-bloque .sub { margin: 0; flex-basis: 100%; font-size: 14px; }
.titulo { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; margin: 0; line-height: 1.2; }
.ver-todo { display: inline-flex; align-items: center; gap: 4px; color: var(--azul-info); font-weight: 500; font-size: 15px; text-decoration: none; }
.ver-todo svg, .cat-ir svg, .btn-carrito svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* categorías: círculo con foto + nombre */
.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cat { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 14px 8px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.cat:hover { background: var(--gris-1); }
.cat-foto { width: 88px; height: 88px; border-radius: 50%; background: var(--gris-1); padding: 14px; }
.cat-foto img, .cat-foto .sin-foto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-texto b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.cat-texto small { display: block; color: var(--tinta-3); font-size: 13px; margin-top: 3px; }
.cat-ir { display: none; }
@media (max-width: 640px) {
  .categorias { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cat { scroll-snap-align: start; }
  .cat-foto { width: 72px; height: 72px; }
}

/* carril horizontal (más buscados, baratos, relacionados) */
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(190px, 22%, 240px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 10px; scrollbar-width: thin; }
.carril > * { scroll-snap-align: start; }
@media (max-width: 640px) { .carril { grid-auto-columns: 62%; } }

/* banner de campaña (Ajustes del panel) */
.banner { position: relative; overflow: hidden; margin: 0 0 24px; padding: clamp(24px, 4vw, 44px); border-radius: 12px; background: var(--rojo-z); color: #fff; }
.banner > div:first-child { position: relative; z-index: 1; }
.banner h2 { color: #fff; font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.1; margin: 12px 0 10px; max-width: 22ch; }
.banner p { max-width: 52ch; margin: 0 0 20px; color: rgb(255 255 255 / .9); font-size: clamp(16px, 1.5vw, 18px); }
.banner .tag.rojo { display: inline-block; background: rgb(255 255 255 / .2); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.banner .btn { background: var(--blanco); color: var(--rojo-z); }
.banner .btn:hover { background: var(--rojo-suave); }
.banner-luz { position: absolute; right: -8%; top: -50%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .1); }

/* ---------- tarjetas de producto ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 520px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.card { position: relative; display: flex; flex-direction: column; background: var(--blanco); border-radius: 10px; overflow: hidden;
  box-shadow: var(--sombra-1); transition: box-shadow .2s; }
.bloque .card { box-shadow: 0 0 0 1px var(--gris-2); }
.card:hover { box-shadow: var(--sombra-2); }
.card-media { display: block; aspect-ratio: 1; position: relative; padding: 10%; border-bottom: 1px solid var(--gris-2); }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.sello { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--gris-2); color: var(--tinta-2); }
.ficha-info .sello { position: static; display: inline-block; margin-bottom: 10px; }
.fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--blanco); color: var(--azul-info); box-shadow: var(--sombra-1); opacity: 0; transition: opacity .15s; }
.card:hover .fav, .fav.on, .fav:focus-visible { opacity: 1; }
@media (hover: none) { .fav { opacity: 1; } }
.fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav.on svg { fill: currentColor; }
.card-cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; color: var(--tinta-3); order: 3; }
.card-meta b { font-weight: 600; color: var(--tinta-2); }
.card-precio { order: 1; display: flex; align-items: baseline; gap: 6px; }
.card-precio small { color: var(--tinta-3); font-size: 12px; }
.card-precio .tag { font-size: 24px; }
.card-nombre { order: 2; font-size: 14px; line-height: 1.3; color: var(--tinta-2); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-nombre:hover { color: var(--azul-info); }
.disp { order: 4; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--verde); }
.disp.pocas { color: var(--ambar); }
.disp.agotado { color: var(--tinta-3); }
.disp.pedido { color: var(--azul-info); }
.card-acciones { order: 5; display: flex; gap: 8px; margin-top: 10px; }
.btn-sec { flex: 1; display: grid; place-items: center; min-height: 38px; border-radius: 8px; background: var(--rojo-suave); color: var(--rojo-z); font-weight: 600;
  font-size: 14px; text-decoration: none; transition: background .15s; }
.btn-sec:hover { background: var(--rojo-suave-h); }
.btn-carrito { flex: none; width: 42px; min-height: 38px; display: grid; place-items: center; border-radius: 8px; border: 0; background: var(--rojo-z); color: #fff;
  cursor: pointer; text-decoration: none; transition: background .15s; }
.btn-carrito:hover { background: var(--rojo-h); }
.btn-carrito.hecho { background: var(--verde); }
.card.esqueleto .card-media, .card.esqueleto i, .ficha .esqueleto { background: linear-gradient(90deg, var(--gris-1), var(--gris-2), var(--gris-1)); background-size: 200% 100%;
  animation: brillo 1.1s linear infinite; }
.card.esqueleto i { display: block; height: 12px; border-radius: 6px; margin: 4px 0; }
.card.esqueleto i.corta { width: 40%; height: 22px; }
.ver-mas { display: grid; place-items: center; margin-top: 20px; }

/* controles del catálogo */
.controles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; max-width: 100%; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta-2); text-decoration: none;
  font-size: 14px; transition: border-color .15s, color .15s; }
.chip:hover { color: var(--tinta); border-color: #bdbdbd; }
.chip.on { background: var(--rojo-suave); border-color: var(--rojo-suave); color: var(--rojo-z); font-weight: 600; }
button.chip { cursor: pointer; font: inherit; font-size: 14px; }
.filtros { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.orden { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.orden select { height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta); }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.interruptor input { accent-color: var(--rojo-z); width: 18px; height: 18px; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--tinta-3); margin: 0 0 14px; }
.migas a { color: var(--azul-info); text-decoration: none; }
.migas > span:last-child { color: var(--tinta-2); }
.portada h1, .zuno-cabeza h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; line-height: 1.1; }
.portada { padding: 4px 0 6px; }

/* ---------- ficha de producto: tarjeta blanca ---------- */
.ficha { background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); padding: clamp(16px, 3vw, 32px); }
.galeria .grande { background: var(--blanco); border: 0; border-radius: 8px; position: relative; overflow: hidden; --zx: 50%; --zy: 50%; }
.galeria .grande img { transition: transform .25s var(--curva); transform-origin: var(--zx) var(--zy); }
.galeria .grande.zoom { cursor: zoom-out; }
.galeria .grande.zoom img { transform: scale(2); }
.miniaturas button { border-radius: 8px; border: 1px solid var(--borde); background: var(--blanco); }
.miniaturas button.on { border: 2px solid var(--azul-info); }
.ficha .esqueleto { aspect-ratio: 1; border-radius: 8px; }
.ficha-info .card-meta { margin-bottom: 6px; }
.ficha-info h1 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.25; }
.ficha .precio-grande { margin: 10px 0 6px; }
.ficha .precio-grande .tag { font-size: 40px; }
.ficha .disp { font-size: 15px; margin-bottom: 18px; }
.comprar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.comprar .btn { flex: 1; min-width: 180px; }
.fav.grande-fav { position: static; width: 48px; height: 48px; opacity: 1; box-shadow: 0 0 0 1px var(--borde); }
.cantidad { background: var(--blanco); border-color: var(--borde); border-radius: 8px; }
.cantidad button { color: var(--azul-info); }
.opciones button { background: var(--blanco); border-color: var(--borde); color: var(--tinta); border-radius: 8px; }
.opciones button.on { border-color: var(--azul-info); box-shadow: inset 0 0 0 1px var(--azul-info); }
.garantias { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--gris-2); display: grid; gap: 10px; color: var(--tinta-2); font-size: 14px; }
.garantias li { display: flex; gap: 10px; align-items: baseline; }
.garantias li::before { content: "✓"; flex: none; color: var(--verde); font-weight: 700; }
.pestanas { margin: 20px 0; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); overflow: hidden; }
.pestanas [role="tablist"] { display: flex; border-bottom: 1px solid var(--gris-2); }
.pestanas [role="tab"] { flex: 1; max-width: 220px; padding: 16px; border: 0; background: none; color: var(--tinta-2); font-weight: 600; cursor: pointer; position: relative; }
.pestanas [role="tab"][aria-selected="true"] { color: var(--rojo-z); }
.pestanas [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--rojo-z); }
.pestanas [role="tabpanel"] { padding: 20px; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0 0 12px; border: 1px solid var(--gris-2); border-radius: 8px; overflow: hidden; }
.datos dt, .datos dd { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--gris-2); }
.datos dt { color: var(--tinta-2); background: var(--gris-1); font-weight: 600; }
.pendiente { color: var(--tinta-3); margin: 0; }

/* ---------- Conocer Zuno ---------- */
.zuno-cabeza { max-width: 760px; margin: 6px 0 22px; }
.zuno-cabeza .tag { display: inline-block; color: var(--rojo-z); background: var(--rojo-suave); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.zuno-cabeza h1 { margin: 14px 0 10px; }
.pasos-zuno { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pasos-zuno li { padding: 22px; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); }
.pasos-zuno b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo-z); font-weight: 700; }
.pasos-zuno h2 { font-weight: 600; font-size: 20px; margin: 12px 0 6px; }
.pasos-zuno p { color: var(--tinta-2); margin: 0; }
.zuno-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.zuno-datos > div { padding: 18px; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); }
.zuno-datos h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin: 0 0 6px; font-weight: 600; }
.zuno-datos p { margin: 0; }
@media (max-width: 760px) { .pasos-zuno, .zuno-datos { grid-template-columns: 1fr; } }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--borde); color: var(--tinta-2); font-size: 14px; background: var(--blanco); margin-top: 30px; }
.pie-in { max-width: 1200px; margin: 0 auto; padding: 36px 16px 20px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; align-items: start; }
.pie h2 { font-size: 14px; font-weight: 600; color: var(--tinta); margin: 0 0 10px; }
.pie ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.pie p { margin: 0 0 14px; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--azul-info); }
.pie .logo-pie { height: 38px; width: auto; margin-bottom: 12px; }
.pie .en-prep, .pie .en-prep small { color: var(--tinta-3); }
.pie .en-prep small { font-size: 11px; }
.pie-legal { max-width: 1200px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--gris-2); color: var(--tinta-3); font-size: 13px; display: flex;
  flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
@media (max-width: 860px) { .pie-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie-in { grid-template-columns: 1fr; } }

/* ---------- aviso, vista previa y transiciones ---------- */
.aviso { background: var(--tinta); color: #fff; border-radius: 8px; }
.aviso a { color: #9cc2ff; }
.previa { background: #fff4e5; color: #7a4a00; border-bottom: 1px solid #f3d9b1; }
.previa a { color: inherit; }
#app.entra { animation: entra-vista .25s ease-out; }
@keyframes entra-vista { from { opacity: 0; } }
.js [data-revela] { opacity: 0; transition: opacity .4s ease-out; transition-delay: calc(var(--i, 0) * 35ms); }
.js [data-revela].visto { opacity: 1; }
.sin-movimiento *, .sin-movimiento *::before, .sin-movimiento *::after { animation: none !important; transition: none !important; }
.sin-movimiento [data-revela] { opacity: 1 !important; }

/* ---------- asistente con IA ---------- */
.boton-chat { position: fixed; right: 18px; bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--rojo-z); color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px -4px rgb(226 6 18 / .55); }
.boton-chat:hover { background: var(--rojo-h); }
.boton-chat svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.boton-chat[aria-expanded="true"] { background: var(--tinta-2); }
@media (max-width: 520px) { .boton-chat { right: 12px; bottom: 12px; padding: 0 16px; } .boton-chat span { display: none; } }
.chat { position: fixed; right: 18px; bottom: 82px; z-index: 56; width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100dvh - 110px));
  display: grid; grid-template-rows: auto 1fr auto; background: var(--blanco); border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 48px -10px rgb(0 0 0 / .35); opacity: 0; transform: translateY(10px); transition: opacity .15s, transform .2s var(--curva); }
.chat.abierto { opacity: 1; transform: none; }
@media (max-width: 520px) { .chat { right: 12px; left: 12px; width: auto; bottom: 72px; height: calc(100dvh - 140px); } }
.chat-cab { display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 16px; background: var(--rojo-z); color: #fff; }
.chat-cab b { display: block; font-weight: 600; font-size: 16px; }
.chat-cab small { display: block; color: rgb(255 255 255 / .85); font-size: 12px; }
.chat-cab > div { flex: 1; }
.chat-cab button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .18); color: #fff; cursor: pointer; font-size: 17px; }
.chat-mensajes { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; background: var(--gris-fondo); }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; }
.msg p { margin: 0; }
.msg p + p { margin-top: 8px; }
.msg.zuno { align-self: flex-start; background: var(--blanco); box-shadow: var(--sombra-1); border-bottom-left-radius: 4px; }
.msg.cliente { align-self: flex-end; background: var(--rojo-z); color: #fff; border-bottom-right-radius: 4px; }
.escribiendo { display: flex; gap: 5px; padding: 14px 16px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); animation: punto 1s ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { opacity: .25; } }
.msg-productos { display: grid; gap: 6px; margin-top: 10px; }
.msg-prod { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 8px; border: 1px solid var(--gris-2); text-decoration: none; }
.msg-prod:hover { background: var(--gris-1); }
.msg-prod img, .msg-prod .sin-foto { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.msg-prod span { font-size: 13px; line-height: 1.25; color: var(--tinta-2); }
.msg-prod b { display: block; color: var(--tinta); font-weight: 600; margin-top: 2px; }
.chat-rapidas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chat-rapidas button { padding: 7px 12px; border-radius: 999px; border: 0; background: var(--rojo-suave); color: var(--rojo-z); font-size: 13px; font-weight: 500; cursor: pointer; }
.chat-rapidas button:hover { background: var(--rojo-suave-h); }
.chat-pie { padding: 10px 12px 12px; border-top: 1px solid var(--gris-2); }
.chat-pie form { display: flex; gap: 8px; align-items: flex-end; }
.chat-pie textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: 14.5px; }
.chat-pie textarea:focus { outline: none; border-color: var(--azul-info); }
.chat-pie button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--rojo-z); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat-pie button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-pie small { display: block; margin-top: 7px; color: var(--tinta-3); font-size: 11.5px; line-height: 1.35; }

/* ---------- Ayuda y Diccionario ---------- */
.ayuda-barra { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.ayuda-barra .campo { flex: 1; min-width: 220px; height: 48px; background: var(--blanco); border: 1px solid var(--borde); color: var(--tinta); border-radius: 8px; }
.ayuda-tema { margin: 0 0 16px; padding: 6px 0; background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); }
.ayuda-tema h2 { font-weight: 600; font-size: 18px; margin: 10px 18px 4px; }
.ayuda-p { border-top: 1px solid var(--gris-2); }
.ayuda-p summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ayuda-p summary::-webkit-details-marker { display: none; }
.ayuda-p summary::after { content: "›"; color: var(--azul-info); font-size: 20px; line-height: 1; transition: transform .15s; }
.ayuda-p[open] summary::after { transform: rotate(90deg); }
.ayuda-p p { margin: 0; padding: 0 18px 16px; color: var(--tinta-2); }
.dicc { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 14px 0 30px; }
.dicc-t { background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1); padding: 16px 18px; }
.dicc-t dt { font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dicc-t dt small { font-weight: 500; font-size: 12px; color: var(--tinta-3); }
.dicc-t dd { margin: 6px 0 0; color: var(--tinta-2); font-size: 14.5px; }

/* ---------- color de la barra (2026-11-07, pedido del propietario) ----------
   Los 12 colores del logo («¿De qué color eres?» de la portada) ahora están en la barra de arriba: pintan la
   barra, la bienvenida y el inicio del «Ya casi arrancamos». js/color.js lo guarda en este navegador y el script
   en línea de index.html lo aplica antes de pintar. Blanco: logo rojo y texto oscuro; dorado, naranja y
   turquesa: texto oscuro (el blanco no se lee). */
:root { --barra: var(--rojo-z); --barra-texto: #fff; }
/* El color elegido es el TEMA de toda la tienda: --tema alimenta las variables de acento de zuno.css y de
   tienda.css (botones, enlaces, chips, carrusel, asistente, animaciones). Blanco → acento rojo; dorado, naranja y
   turquesa → acento negro, como en la portada, para que los botones se lean. Errores y avisos no cambian. */
:root {
  --tema: #e20612;
  --rojo-z: var(--tema); --rojo-h: color-mix(in srgb, var(--tema) 84%, #000);
  --rojo-suave: color-mix(in srgb, var(--tema) 9%, #fff); --rojo-suave-h: color-mix(in srgb, var(--tema) 16%, #fff);
  --acento: var(--tema); --acento-h: color-mix(in srgb, var(--tema) 84%, #000); --acento-suave: color-mix(in srgb, var(--tema) 9%, #fff);
}
.boton-chat { box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--tema) 55%, transparent); }
.logo-tema, .pie .logo-tema { display: block; width: 97px; background: var(--rojo-z);
  -webkit-mask: url("/static/marca/zuno/zuno-shop-negro.svg") left center / contain no-repeat;
  mask: url("/static/marca/zuno/zuno-shop-negro.svg") left center / contain no-repeat; }
/* Barrido al cambiar de color (js/color.js): un paño inclinado del color nuevo cruza la pantalla. */
.barrido-tema { position: fixed; inset: -10% -30%; z-index: 300; pointer-events: none; transform: translateX(-135%) skewX(-14deg); }.cab, .precarga .precarga-velo { background: var(--barra); color: var(--barra-texto); }
.cab-nav > a, .cab-cats > button, .cab-icono { color: var(--barra-texto); }
.cab-nav > a:hover, .cab-cats > button:hover, .cab-cats > button[aria-expanded="true"], .cab-icono:hover,
.cab-icono[aria-expanded="true"] { background: color-mix(in srgb, var(--barra-texto) 16%, transparent); }
.cab-icono b { background: var(--barra-texto); color: var(--barra); }
.cab-buscar input:focus { outline-color: color-mix(in srgb, var(--barra-texto) 70%, transparent); }
.pv-velocidad i, .pv-barra b { background: currentColor; }
.pv-barra { background: color-mix(in srgb, currentColor 25%, transparent); }
.logo-rojo { display: none; }
.barra-clara .logo-blanco { display: none; }
.barra-clara .logo-rojo { display: revert; }
.barra-clara .cab { box-shadow: inset 0 -1px 0 var(--borde); }
.barra-clara .cab.compacta { box-shadow: inset 0 -1px 0 var(--borde), 0 2px 10px rgb(0 0 0 / .12); }
.barra-clara .cab-buscar input { box-shadow: 0 0 0 1px var(--borde); }

.cab-color { position: relative; }
.muestra-color { width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(#E20612, #FC721E, #C58B2C, #034D34, #01A9B5, #0040CC, #021D55, #5628B6, #EE077E, #E20612);
  box-shadow: 0 0 0 2px var(--barra-texto); }
.menu-color { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: min(440px, calc(100vw - 24px)); padding: 16px;
  background: var(--blanco); color: var(--tinta); border-radius: 12px; box-shadow: 0 12px 34px -8px rgb(0 0 0 / .3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .2s var(--curva), visibility 0s .2s; }
.menu-color.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .2s var(--curva); }
.menu-color-titulo { margin: 0 0 4px; font-family: "Barlow", system-ui, sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 22px; line-height: 1; letter-spacing: -.01em; }
.menu-color-titulo + .menu-color-rejilla { margin-top: 12px; }
.menu-color-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tono { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6px 6px 16px; border: 0; border-radius: 6px;
  background: var(--t); color: #fff; cursor: pointer; transition: transform .15s var(--curva); }
.tono:hover { transform: translateY(-2px); }
.tono.claro { color: var(--rojo-z); box-shadow: inset 0 0 0 1px var(--borde); }
.tono img { width: 84%; height: auto; }
.tono span { position: absolute; left: 6px; bottom: 3px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tono[aria-pressed="true"] { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (max-width: 900px) {
  .cab-color { position: static; }
  .menu-color { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }
}
@media (max-width: 420px) { .menu-color-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- «Ya casi arrancamos» (2026-11-07) ----------
   Lo que ve el público en zunoshop.com mientras la tienda no abre (js/vistas/proximamente.js): la portada de
   pre-lanzamiento dentro de la tienda. Sin buscador, carrito ni menú: solo el logo y el color. */
.modo-proximamente .cab-nav, .modo-proximamente .cab-buscar, .modo-proximamente .cab [data-abrir="cajon-menu"],
.modo-proximamente .cab-acciones > :not(.cab-color), .modo-proximamente .pie, .modo-proximamente .boton-chat { display: none !important; }
.modo-proximamente .cab-acciones { margin-left: auto; }
.modo-proximamente main { max-width: none; padding: 0; margin: 0; }
.pr .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pr-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 18px; text-align: center;
  padding: clamp(40px, 7vw, 88px) 20px clamp(48px, 7vw, 96px); background: var(--barra); color: var(--barra-texto); }
.barra-clara .pr-hero { box-shadow: inset 0 -1px 0 var(--borde); }
.pr-velocidad { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pr-velocidad i { position: absolute; right: -40%; height: clamp(4px, .8vw, 9px); border-radius: 99px; background: currentColor; opacity: .12;
  animation: pv-corre var(--d, 2.4s) linear infinite; animation-delay: var(--r, 0s); }
.sin-movimiento .pr-velocidad { display: none; }
.pr-logo { margin: 0; width: min(560px, 82vw); }
.pr-logo img { width: 100%; height: auto; }
.pr-lema { margin: 0; font-family: "Barlow", system-ui, sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .95; font-size: clamp(40px, 8vw, 96px); }
.pr-sub { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.6vw, 19px); }
.pr-caja { width: min(560px, 100%); margin-top: 10px; padding: 20px; border-radius: 12px; background: var(--blanco); color: var(--tinta);
  box-shadow: var(--sombra-2); text-align: left; }
.pr-caja-titulo { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.pr-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-form input[type="email"] { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--blanco); color: var(--tinta); font: inherit; }
.pr-form input[type="email"]:focus { outline: 2px solid var(--azul-info); outline-offset: 0; }
.pr-form .btn { flex: 0 0 auto; }
.pr-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pr-nota { margin: 12px 0 0; font-size: 13px; color: var(--tinta-2); }
.pr-nota a, .pr-pie a, .pr-confianza a { color: var(--azul-info); }
.pr-error { margin: 10px 0 0; color: #b00020; font-size: 14px; }
.pr-listo { margin: 0; padding: 12px 14px; border-radius: 8px; background: #e6f6ee; color: #0b6b3a; }
.pr-bloque { width: min(1200px, 100%); margin: 0 auto; padding: clamp(40px, 5vw, 60px) 16px 0; }
.pr-bloque .titulo { margin-bottom: 20px; }
.pr-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pr-pasos li, .pr-confianza > div { padding: 22px 24px; border-radius: 12px; background: var(--blanco); box-shadow: var(--sombra-1); }
.pr-pasos span { font-family: "Barlow", system-ui, sans-serif; font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; color: var(--rojo-z); }
.pr-pasos h3, .pr-confianza h3 { margin: 12px 0 6px; font-size: 18px; font-weight: 700; }
.pr-confianza h3 { margin-top: 0; }
.pr-pasos p, .pr-confianza p { margin: 0; color: var(--tinta-2); }
.pr-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pr-cats li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font-weight: 500; }
.pr-confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pr-cierre { width: min(1168px, calc(100% - 32px)); margin: clamp(40px, 5vw, 60px) auto 0; padding: clamp(28px, 4vw, 44px); border-radius: 16px;
  display: grid; justify-items: start; gap: 18px; background: var(--barra); color: var(--barra-texto); }
.barra-clara .pr-cierre { box-shadow: inset 0 0 0 1px var(--borde); }
.pr-cierre h2 { margin: 0; color: inherit; font-family: "Barlow", system-ui, sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 48px); line-height: .95; letter-spacing: -.02em; }
.pr-cierre .pr-form { width: min(560px, 100%); }
.pr-cierre .pr-listo { background: var(--blanco); }
.pr-cierre .pr-error { color: inherit; font-weight: 600; }
.pr-pie { width: min(1200px, 100%); margin: 0 auto; padding: 36px 16px 56px; color: var(--tinta-2); font-size: 14px; }
.pr-pie details { margin-bottom: 14px; }
.pr-pie summary { cursor: pointer; font-weight: 600; color: var(--tinta); min-height: 32px; }
.pr-pie details p { max-width: 80ch; }

/* ---------- logo de la barra en movimiento (2026-11-07, pedido del propietario) ----------
   «Que el carrito siga corriendo»: el logo va por piezas en index.html (svg.logo-anim). Las líneas de velocidad
   van y vienen como viento, el carrito rebota y las ruedas amortiguan (se quedan en el piso, una con baches).
   Unidades del viewBox: 1 ≈ 0.3 px en pantalla. Con «reducir movimiento» o equipos lentos, quieto. */
.cab-logo { display: inline-flex; color: #fff; }
.barra-clara .cab-logo { color: #e20612; }
.logo-anim { display: block; height: 40px; width: auto; fill: currentColor; overflow: visible; }
.logo-anim path, .logo-anim g { transform-box: fill-box; }
.la-lineas path { transform-origin: right center; animation: la-viento .9s ease-in-out infinite; }
.la-lineas .la-l2 { animation-delay: -.3s; }
.la-lineas .la-l3 { animation-delay: -.6s; animation-duration: .75s; }
.la-carro { animation: la-rebote .34s ease-in-out infinite alternate; }
.la-r1 { animation: la-amortigua .34s ease-in-out infinite alternate; }
.la-r2 { animation: la-bache .34s ease-in-out infinite alternate; animation-delay: -.17s; }
@keyframes la-viento { 0%, 100% { transform: translateX(0) scaleX(1); opacity: 1; }
  50% { transform: translateX(-16px) scaleX(.62); opacity: .5; } }
@keyframes la-rebote { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes la-amortigua { from { transform: translateY(0); } to { transform: translateY(5px); } }
@keyframes la-bache { from { transform: translateY(1px); } to { transform: translateY(4px); } }
.cab-logo:hover .la-lineas path { animation-duration: .5s; }
.cab-logo:hover .la-carro, .cab-logo:hover .la-rueda { animation-duration: .2s; }
.sin-movimiento .logo-anim *, .sin-movimiento .logo-anim { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .logo-anim * { animation: none !important; } }