:root {
  --tinta: #161616;
  --texto: #434242;
  --suave: #8a8a8a;
  --linea: #e7e7e7;
  --gris: #f4f4f4;
  --fondo: #ffffff;
  --acento: #b3122e;
  --wpp: #25d366;
  --cab: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; color: var(--texto); background: var(--fondo); font-size: 14px; }
body.trabado { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.solo-pc { display: none; }

/* Cinta */
.cinta { background: var(--tinta); color: #fff; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .08em; height: 32px; display: flex; align-items: center; }
.cinta-mov { display: flex; width: max-content; }
.cinta-grupo { display: flex; flex: none; animation: cinta 40s linear infinite; }
.cinta-mov span { padding: 0 28px; }
.cinta-mov span::before { content: '★'; margin-right: 28px; color: var(--acento); }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .cinta-grupo { animation: none; } }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 30; height: var(--cab); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.logo { font-weight: 800; font-size: 19px; letter-spacing: .04em; color: var(--tinta); }
.logo span { font-weight: 500; letter-spacing: .22em; font-size: .78em; margin-left: 2px; }
.cabecera .logo { margin-right: auto; }
.nav-arriba { gap: 28px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--tinta); }
.nav-arriba a:hover { color: var(--acento); }
.acciones { display: flex; gap: 6px; }
.icono { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; position: relative; color: var(--tinta); }
.icono:hover { background: var(--gris); }
.contador { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--acento); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

/* Portada */
.hero { min-height: 46vh; display: flex; align-items: flex-end; padding: 32px 20px; color: #fff;
  background: radial-gradient(circle at 75% 20%, rgba(179,18,46,.55), transparent 55%), linear-gradient(135deg, #0d0d0d 0%, #262626 60%, #3d0a14 100%); position: relative; overflow: hidden; }
.hero::after { content: 'MRD'; position: absolute; right: -10px; top: 8%; font-size: 38vw; font-weight: 800; line-height: .8; color: rgba(255,255,255,.05); letter-spacing: -.04em; pointer-events: none; }
.hero-texto { position: relative; z-index: 1; max-width: 1200px; width: 100%; margin: 0 auto; }
.hero-chico { font-size: 12px; letter-spacing: .25em; font-weight: 600; margin: 0 0 10px; opacity: .85; }
body.sin-config .cinta-mov, body.sin-config .hero-texto, body.sin-config .logo { visibility: hidden; }
.hero.con-foto { background-color: #0d0c0a; background-repeat: no-repeat;
  background-image: linear-gradient(90deg, rgba(10,9,7,.9) 0%, rgba(10,9,7,.6) 38%, rgba(10,9,7,0) 66%), var(--foto);
  background-size: cover, cover; background-position: center, 72% 22%; }
.hero.con-foto h1 { max-width: 640px; }
/* Celular: la foto arriba (con el escudo centrado) y el texto abajo, sobre negro */
@media (max-width: 639px) {
  .hero.con-foto { min-height: 620px;
    background-image: linear-gradient(180deg, rgba(13,12,10,0) 30%, rgba(13,12,10,.92) 56%, #0d0c0a 66%), var(--foto);
    background-size: 100% 100%, auto 60%; background-position: 0 0, 100% 0; }
}
.hero.con-foto::after { display: none; }
.logo img { display: block; height: 48px; width: auto; max-width: 190px; object-fit: contain; }
.pie .logo img { height: 80px; }
.hero h1 { white-space: pre-line; font-size: clamp(32px, 7vw, 68px); line-height: .95; margin: 0 0 24px; font-weight: 800; letter-spacing: -.01em; }
.hero-bajada { margin: -8px 0 24px; font-size: 15px; line-height: 1.5; max-width: 420px; opacity: .9; }
.boton-claro { display: inline-block; background: #fff; color: var(--tinta); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 14px 26px; }
.boton-claro:hover { background: var(--acento); color: #fff; }
/* Portada: categorías con la foto de una prenda */
.inicio-cats { max-width: 1400px; margin: 0 auto; padding: 36px 16px 52px; }
.inicio-cats h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--tinta); }
.cats-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat-tarjeta { position: relative; display: block; overflow: hidden; color: #fff; }
.cat-tarjeta .tarjeta-foto { aspect-ratio: 3/4; }
/* En el celular, si quedan impares, la última ocupa todo el ancho (más baja) */
.cat-tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cat-tarjeta:last-child:nth-child(odd) .tarjeta-foto { aspect-ratio: 16/10; }
.cat-tarjeta .tarjeta-foto img { transition: transform .5s ease; }
.cat-tarjeta .cat-texto { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); display: grid; gap: 2px; }
.cat-tarjeta b { font-size: 17px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.cat-tarjeta span { font-size: 12px; opacity: .85; }
@media (hover: hover) { .cat-tarjeta:hover .tarjeta-foto img { transform: scale(1.04); } }
.ver-todo { display: block; margin: 18px auto 0; width: max-content; border: 1.5px solid var(--tinta); color: var(--tinta); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 14px 28px; }
.ver-todo:hover { background: var(--tinta); color: var(--fondo); }
.carrusel { max-width: 1400px; margin: 0 auto; padding: 36px 0 52px; }
.carrusel-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; margin-bottom: 16px; }
.carrusel-cabeza h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--tinta); }
.flechas { display: none; gap: 8px; }
.flecha { width: 40px; height: 40px; border: 1px solid var(--linea); display: inline-grid; place-items: center; color: var(--tinta); }
.flecha:hover:not(:disabled) { border-color: var(--tinta); }
.flecha:disabled { opacity: .3; cursor: default; }
.carrusel-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2.2); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista .tarjeta { scroll-snap-align: start; }

/* Tienda: lateral + catálogo */
body.en-inicio .catalogo { display: none; }
.tienda { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.lateral { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: #fff; z-index: 50; padding: 0 18px 24px; overflow-y: auto; transform: translateX(-100%); transition: transform .28s ease; }
.lateral.abierto { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
.fondo-menu, .fondo-carrito { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45; }
.lateral-cabeza { display: flex; justify-content: space-between; align-items: center; height: var(--cab); font-weight: 800; letter-spacing: .12em; color: var(--tinta); }
.lateral-pie { display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 13px; }
.buscador { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linea); padding: 0 12px; height: 44px; margin-bottom: 14px; }
.buscador svg { width: 18px; color: var(--suave); flex: none; }
.buscador input { border: 0; outline: 0; width: 100%; min-width: 0; background: none; font-size: 14px; }
.buscador:focus-within { border-color: var(--tinta); }

.cat { border-bottom: 1px solid var(--linea); }
.cat-boton { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--tinta); text-transform: uppercase; text-align: left; }
.cat-boton svg { width: 16px; height: 16px; transition: transform .2s; }
.cat.abierta .cat-boton svg { transform: rotate(180deg); }
.cat-sub { display: none; padding: 0 0 12px 10px; }
.cat.abierta .cat-sub { display: grid; gap: 2px; }
.cat-sub a, .cat-suelta { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 13px; color: var(--texto); }
.cat-sub a:hover, .cat-suelta:hover { color: var(--acento); }
.cat-sub a.activa, .cat-suelta.activa { color: var(--acento); font-weight: 700; }
.cat-sub small { color: var(--suave); }
.cat-suelta { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px 2px; border-bottom: 1px solid var(--linea); color: var(--tinta); }
.cat-suelta.nuevo { color: var(--acento); }

.catalogo { padding: 28px 0 56px; min-width: 0; }
.catalogo-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.catalogo-cabeza h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--tinta); text-transform: uppercase; }
.migas { margin: 0 0 4px; font-size: 11px; color: var(--suave); letter-spacing: .04em; }
.migas a:hover { color: var(--tinta); }
.orden { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.filtro-talles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 18px; }
.filtro-talles[hidden] { display: none; }
.filtro-talles > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--tinta); margin-right: 4px; }
.filtro-talles button { min-width: 42px; height: 36px; padding: 0 10px; border: 1px solid #d6d6d6; background: #fff; font-size: 12px; font-weight: 600; color: var(--tinta); }
.filtro-talles button:hover { border-color: var(--tinta); }
.filtro-talles button[aria-pressed=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro-talles .limpiar { border: 0; min-width: 0; text-decoration: underline; font-weight: 500; color: var(--suave); }
.orden select { border: 1px solid var(--linea); background: #fff; padding: 8px 10px; font-size: 12px; }

.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
.tarjeta { display: block; text-align: left; width: 100%; }
.tarjeta-foto { position: relative; aspect-ratio: 3/4; background: var(--gris); overflow: hidden; display: grid; place-items: center; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-foto svg, .p-foto svg { width: 70%; height: 70%; stroke: none; transition: transform .4s; }
.tarjeta:hover .tarjeta-foto svg, .tarjeta:hover .tarjeta-foto img { transform: scale(1.05); }
.cartel { position: absolute; top: 0; left: 0; display: flex; gap: 3px; }
.cartel span { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--acento); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 8px 4px; }
.cartel .agotado { background: #555; }
.cartel .unica { background: var(--tinta); }
.cartel .reservada { background: #8a0f24; }
.tarjeta.es-reservada .tarjeta-foto img, .tarjeta.es-reservada .tarjeta-foto svg { opacity: .55; }
.tarjeta.sin-stock .tarjeta-foto { opacity: .55; }
/* Segunda foto: aparece al pasar el mouse (solo en pantallas con mouse) */
.tarjeta-foto .foto2 { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s ease, transform .4s; pointer-events: none; }
.tarjeta-foto .cartel { z-index: 2; }
@media (hover: hover) { .tarjeta:hover .tarjeta-foto .foto2 { opacity: 1; } }
.tarjeta-nombre { margin: 10px 4px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--tinta); line-height: 1.35; }
.tarjeta-precio { margin: 0 4px; font-size: 14px; font-weight: 700; color: var(--tinta); }
.tarjeta.sin-stock .tarjeta-precio { text-decoration: line-through; color: var(--suave); }
/* Descuento de la prenda: precio de antes tachado, el nuevo resaltado y el % */
.precio-antes { font-weight: 500; font-size: .82em; color: var(--suave); text-decoration: line-through; }
.precio-oferta { color: var(--acento); font-weight: 800; }
.p-precio .precio-oferta { font-size: 1.1em; }
.pct-ficha { display: inline-block; vertical-align: middle; background: var(--acento); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; margin-left: 4px; }
.cartel .pct { background: var(--acento); font-size: 10px; font-weight: 800; }
.tarjeta-transf { margin: 3px 4px 0; font-size: 11px; color: var(--texto); }
.tarjeta-transf b { color: var(--tinta); }
.tarjeta-talles { margin: 4px 4px 0; font-size: 10px; color: var(--suave); letter-spacing: .04em; }
.vacio { text-align: center; color: var(--suave); padding: 48px 0; }

/* Ventanas */
.capa { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 16px; }
.ventana { background: #fff; position: relative; max-height: calc(100vh - 32px); overflow-y: auto; width: 100%; }
.cerrar { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,.9); }
.producto-ventana { max-width: 980px; }
.p-foto { background: var(--gris); aspect-ratio: 4/5; max-height: 68vh; width: 100%; position: relative; overflow: hidden; }
.p-grande { position: absolute; inset: 0; display: grid; place-items: center; }
.p-grande img { width: 100%; height: 100%; object-fit: cover; }
.p-miniaturas { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.p-miniaturas button { width: 48px; height: 60px; border: 2px solid transparent; background: #fff; padding: 0; overflow: hidden; }
.p-miniaturas button.elegida { border-color: var(--tinta); }
.p-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.p-desc { font-size: 13px; line-height: 1.6; margin: 0 0 14px; white-space: pre-line; }
.p-desc:empty { display: none; }
.cargando { grid-column: 1 / -1; color: var(--suave); padding: 40px 0; text-align: center; }
.reintentar { text-decoration: underline; color: var(--tinta); font-weight: 600; }
.p-info { padding: 22px 20px 26px; }
.p-info h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--tinta); line-height: 1.3; }
.p-precio { margin: 0; font-size: 22px; font-weight: 700; color: var(--tinta); }
.p-transf { margin: 4px 0 18px; font-size: 13px; }
.p-transf b { color: var(--acento); }
.p-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .1em; margin: 0 0 8px; color: var(--tinta); }
.talles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.talles button { min-width: 46px; height: 42px; padding: 0 12px; border: 1px solid var(--linea); font-size: 13px; font-weight: 600; }
.talles button:hover:not(:disabled) { border-color: var(--tinta); }
.talles button.elegido { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.talles button:disabled { color: #c3c3c3; text-decoration: line-through; cursor: not-allowed; }
.p-medidas { font-size: 12px; color: var(--suave); margin: 0 0 16px; min-height: 1em; }
.p-datos { margin: 20px 0 0; padding: 16px 0 0 18px; border-top: 1px solid var(--linea); font-size: 12px; line-height: 1.9; }
.boton { width: 100%; height: 50px; background: var(--tinta); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.boton:hover { background: #000; }
.boton:disabled { background: #bbb; cursor: not-allowed; }
.info-ventana { max-width: 560px; padding: 28px 22px; }
.info-ventana h2 { margin: 0 0 14px; font-size: 18px; color: var(--tinta); }
.info-ventana p, .info-ventana li { line-height: 1.65; }
.info-ventana table { border-collapse: collapse; width: 100%; font-size: 13px; }
.info-ventana th, .info-ventana td { border-bottom: 1px solid var(--linea); padding: 8px 6px; text-align: left; }

/* Carrito */
.carrito { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; z-index: 55; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease; }
.carrito.abierto { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
.fondo-carrito { z-index: 52; }
.carrito-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 20px; height: var(--cab); border-bottom: 1px solid var(--linea); flex: none; }
.carrito-cabeza h2 { margin: 0; font-size: 14px; letter-spacing: .12em; color: var(--tinta); }
.envio-barra { padding: 14px 20px; font-size: 12px; border-bottom: 1px solid var(--linea); flex: none; }
.envio-barra p { margin: 0 0 8px; }
.barra { height: 5px; background: var(--gris); }
.barra div { height: 100%; background: var(--acento); width: 0; transition: width .3s; }
.carrito-items { flex: 1; overflow-y: auto; padding: 4px 20px; }
.item { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.item-foto { width: 70px; aspect-ratio: 3/4; background: var(--gris); display: grid; place-items: center; overflow: hidden; }
.item-foto svg { width: 80%; height: 80%; stroke: none; }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--tinta); }
.item p { margin: 0; font-size: 12px; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); margin-top: 8px; }
.cantidad button { width: 28px; height: 28px; font-size: 15px; }
.cantidad span { min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; }
.cantidad button:disabled { color: #ccc; cursor: not-allowed; }
.quitar { font-size: 11px; color: var(--suave); text-decoration: underline; align-self: start; }
.carrito-pie { flex: none; border-top: 1px solid var(--linea); padding: 14px 20px 18px; display: grid; gap: 8px; }
.totales p { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 13px; }
.totales strong { color: var(--tinta); }
.tot-transf strong { color: var(--acento); }
.carrito-pie input, .carrito-pie select { height: 42px; border: 1px solid var(--linea); padding: 0 10px; background: #fff; font-size: 14px; width: 100%; }
.carrito-pie input:focus, .carrito-pie select:focus { outline: none; border-color: var(--tinta); }
.boton-wpp { background: var(--wpp); color: #0b3d1f; }
.boton-wpp:hover { background: #1fbd59; }
.aviso { margin: 0; color: var(--acento); font-size: 12px; min-height: 0; }
.aviso:empty { display: none; }
.chico { margin: 0; font-size: 11px; color: var(--suave); text-align: center; }
.carrito-vacio { padding: 40px 20px; text-align: center; color: var(--suave); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 40px 16px 0; }
.pie-columnas { max-width: 1400px; margin: 0 auto; display: grid; gap: 28px; }
.pie h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px; color: var(--tinta); }
.pie a { display: block; font-size: 12px; font-weight: 500; padding: 5px 0; }
.pie a:hover { color: var(--acento); }
.pie-texto { font-size: 12px; line-height: 1.6; max-width: 300px; }
.pie-legal { text-align: center; font-size: 11px; color: var(--suave); margin: 36px -16px 0; padding: 16px; background: #f1eeec; }

.whatsapp-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: var(--wpp); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; stroke: none; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: var(--tinta); color: #fff; font-size: 13px; padding: 12px 18px; opacity: 0; pointer-events: none; transition: .25s; z-index: 70; max-width: calc(100vw - 32px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Tablet y compu */
@media (min-width: 640px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
  .carrusel-pista { grid-auto-columns: calc((100% - 28px) / 3.2); gap: 14px; }
  .flechas { display: flex; }
  .producto-ventana { display: grid; grid-template-columns: 1.1fr 1fr; }
  .p-foto { aspect-ratio: auto; min-height: 560px; }
  .p-info { padding: 44px 32px 32px; }
  .pie-columnas { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  .solo-pc { display: flex; }
  /* En la portada el menú se abre desde ☰ como en el celular; en el catálogo queda fijo al costado */
  body:not(.en-inicio) .solo-cel, body:not(.en-inicio) .boton-menu { display: none !important; }
  .cabecera { padding: 0 40px; gap: 40px; }
  .cabecera .logo { margin-right: 0; font-size: 22px; }
  .cabecera .logo img { height: 56px; }
  .acciones { margin-left: auto; }
  .hero { padding: 56px 40px; min-height: 62vh; }
  .hero::after { font-size: 30vw; }
  .carrusel { padding: 48px 0 64px; }
  .inicio-cats { padding: 48px 40px 64px; }
  .cats-grilla { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
  .cat-tarjeta:last-child:nth-child(odd) { grid-column: auto; }
  .cat-tarjeta:last-child:nth-child(odd) .tarjeta-foto { aspect-ratio: 3/4; }
  .cats-grilla[style*="--n: 1"] .tarjeta-foto, .cats-grilla[style*="--n: 2"] .tarjeta-foto { aspect-ratio: 16/10; }
  .cat-tarjeta b { font-size: 20px; }
  .carrusel-cabeza { padding: 0 40px; }
  .carrusel-pista { padding: 0 40px; scroll-padding: 0 40px; grid-auto-columns: calc((100% - 42px) / 4); }
  body:not(.en-inicio) .tienda { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 0 40px; }
  body:not(.en-inicio) .lateral { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); transform: none; width: auto; padding: 28px 0 24px; z-index: 1; box-shadow: none !important; }
  body:not(.en-inicio) .fondo-menu { display: none !important; }
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie { padding: 48px 40px 0; }
  .pie-legal { margin: 40px -40px 0; }
}
@media (min-width: 1300px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Visor de fotos (pantalla completa, con zoom) */
.p-grande.ampliable { cursor: zoom-in; }
.p-lupa { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; pointer-events: none; }
.p-lupa svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.visor { position: fixed; inset: 0; z-index: 80; background: #0b0b0b; color: #fff; overscroll-behavior: contain; }
.visor[hidden] { display: none; }
.visor-escena { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.visor-escena.con-zoom { cursor: grab; }
.visor-escena img { max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.visor-escena img.animar { transition: transform .22s ease; }
.visor-boton { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; }
.visor-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visor-boton:hover { background: rgba(0,0,0,.8); }
.visor-cerrar { top: 12px; right: 12px; }
.visor-ant { left: 12px; top: 50%; margin-top: -22px; }
.visor-sig { right: 12px; top: 50%; margin-top: -22px; }
.visor-ant[hidden], .visor-sig[hidden] { display: none; }
.visor-cuenta { position: absolute; top: 22px; left: 16px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.visor-ayuda { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; font-size: 12px; background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 16px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.visor-ayuda.oculta { opacity: 0; }

/* Filtros de precio y marca */
.filtros-mas { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 12px; }
.filtros-mas[hidden], .filtros-mas label[hidden] { display: none; }
.filtros-mas select { border: 1px solid var(--linea); background: #fff; padding: 9px 10px; font-size: 12px; font-family: inherit; color: var(--tinta); max-width: 100%; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ficha: marca, reservada, consultar y compartir */
.p-marca { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.p-reservada { margin: 0 0 10px; font-size: 12px; color: #8a0f24; background: #fff0f2; padding: 10px 12px; }
.p-reservada[hidden] { display: none; }
.p-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.boton-borde { height: 44px; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); font-size: 11px; font-weight: 700; letter-spacing: .08em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.boton-borde:hover { background: var(--gris); }
.boton-borde svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#pConsultar svg { fill: currentColor; stroke: none; }
.pausa { max-width: 460px; margin: 0 auto; padding: 80px 16px; text-align: center; display: grid; gap: 14px; }
.pausa h1 { margin: 0; font-size: 26px; color: var(--tinta); }
.pausa p { margin: 0 0 8px; color: var(--texto); }
.pausa .boton { display: grid; place-items: center; }

/* Halloween (halloween.js): debajo de la barra del logo, sin recibir toques y por debajo de menú, carrito y ventanas */
.hw, .hw * { pointer-events: none; }
.hw .hw-bicho, .hw .hw-murcielago { pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hw-bicho.huye { animation: hw-hamaca .18s ease-in-out infinite; }
.hw > div { position: fixed; z-index: 29; color: var(--tinta); }
.hw svg { display: block; width: 100%; height: auto; overflow: visible; }
/* sombrita oscura: se ven también arriba de las fotos claras del banner */
.hw-tela { filter: drop-shadow(0 0 1.5px rgba(0,0,0,.8)); }
.hw-arana, .hw-murcielago { filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)) drop-shadow(0 0 1.5px rgba(0,0,0,.8)); }
.hw-calabaza { filter: drop-shadow(0 -2px 10px rgba(255,140,0,.45)); }
.hw-tela { top: var(--cab); width: 140px; opacity: .85; }
.hw-tela-i { left: 0; }
.hw-tela-d { right: 0; transform: scaleX(-1); }
/* Araña: baja colgada de su hilo, se queda un rato, sube; se balancea un poco */
.hw-arana { top: var(--cab); right: 22px; width: 52px; display: flex; flex-direction: column; align-items: center; }
.hw-hilo { width: 1.5px; height: 18px; background: currentColor; opacity: .55; animation: hw-baja 16s ease-in-out infinite; }
.hw-bicho { width: 52px; margin-top: -2px; transform-origin: 50% 0; animation: hw-hamaca 2.6s ease-in-out infinite; }
@keyframes hw-baja { 0%, 10% { height: 18px; } 38%, 58% { height: 42vh; } 62% { height: 39vh; } 66% { height: 42vh; } 90%, 100% { height: 18px; } }
@keyframes hw-hamaca { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
/* Calabaza: cada tanto se asoma desde abajo a la izquierda (abajo a la derecha está WhatsApp) */
.hw-calabaza { left: 8px; bottom: 0; width: 130px; transform: translateY(110%); animation: hw-asoma 9s ease-in-out infinite 1.5s; }
@keyframes hw-asoma { 0%, 30% { transform: translateY(110%) rotate(0); } 42% { transform: translateY(18%) rotate(-6deg); }
  54% { transform: translateY(24%) rotate(5deg); } 66% { transform: translateY(18%) rotate(-3deg); } 80%, 100% { transform: translateY(110%) rotate(0); } }
.hw-cara { animation: hw-vela 1.8s steps(2) infinite; }
@keyframes hw-vela { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
/* Murciélago: cruza la pantalla de vez en cuando, subiendo y bajando, aleteando */
.hw-murcielago { top: 26vh; left: 0; width: 84px; transform: translateX(-100px); animation: hw-vuela 12s linear infinite 2s; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Tres murciélagos: cada uno a otra altura, de otro tamaño y con su ritmo (el del medio cruza al revés) */
.hw-m2 { top: 13vh; width: 64px; animation-duration: 15s; animation-delay: 6s; animation-direction: reverse; }
.hw-m3 { top: 48vh; width: 70px; animation-duration: 10s; animation-delay: 0s; }
.hw-murcielago.huye .hw-ala-i, .hw-murcielago.huye .hw-ala-d { animation-duration: .07s; }
@keyframes hw-vuela { 0%, 40% { transform: translate(-100px, 0); } 55% { transform: translate(25vw, -5vh); } 70% { transform: translate(50vw, 4vh); }
  85% { transform: translate(75vw, -4vh); } 98%, 100% { transform: translate(calc(100vw + 100px), 2vh); } }
.hw-ala-i, .hw-ala-d { transform-box: fill-box; animation: hw-aleteo .22s ease-in-out infinite alternate; }
.hw-ala-i { transform-origin: 100% 60%; }
.hw-ala-d { transform-origin: 0 60%; }
@keyframes hw-aleteo { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@media (min-width: 1000px) {
  .hw-tela { width: 220px; }
  .hw-arana { right: 60px; width: 72px; } .hw-bicho { width: 72px; }
  .hw-calabaza { left: 24px; width: 190px; }
  .hw-murcielago { width: 120px; } .hw-m2 { width: 90px; } .hw-m3 { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw * { animation: none !important; }
  .hw-hilo { height: 60px; }
  .hw-calabaza, .hw-murcielago { display: none; }
}
/* Esta tienda es blanca con el banner oscuro: telarañas gris claro con sombra y bichos negros con borde claro, para que
   se vean sobre los dos */
.hw > .hw-tela { color: #f2f2f2; opacity: 1; filter: drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(0 0 2px rgba(0,0,0,.35)); }
.hw > .hw-arana, .hw > .hw-murcielago { color: #1c1c1c; filter: drop-shadow(0 0 1.2px rgba(255,255,255,.95)) drop-shadow(0 0 1.2px rgba(255,255,255,.6)) drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.hw-hilo { background: #c9c9c9; opacity: .9; }