/* ===========================================================
   BORROW · sistema visual
   Editorial blanco/negro. La fotografía aporta el color.
   Display: Bodoni Moda (eco del logo). Texto: Hanken Grotesk.
   =========================================================== */

@font-face {
  font-family: "Ananda";
  src: url("../fonts/ananda.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color — OKLCH, neutros tintados en cálido */
  --paper:      oklch(0.987 0.004 70);
  --paper-2:    oklch(0.962 0.005 70);
  --ink:        oklch(0.19 0.012 60);
  --ink-soft:   oklch(0.34 0.012 60);
  --muted:      oklch(0.52 0.010 60);
  --line:       oklch(0.90 0.006 60);
  --line-soft:  oklch(0.94 0.005 60);
  --wine:       oklch(0.45 0.135 18);   /* acento sobrio (rojos/bordó) */
  --wine-deep:  oklch(0.38 0.13 18);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.04), 0 12px 32px oklch(0.2 0.02 60 / 0.07);
  --shadow-lg: 0 30px 70px oklch(0.2 0.02 60 / 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);    /* ease-out-expo */
  --maxw: 1280px;
  --nav-h: 76px;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-script: "Ananda", "Brush Script MT", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- tipografía ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--tight { padding: clamp(44px, 6vw, 80px) 0; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.92em 1.7em;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease), opacity .3s;
  cursor: pointer; white-space: nowrap;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: oklch(0.30 0.02 60); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-wine { background: var(--wine); color: var(--paper); }
.btn-wine:hover { background: var(--wine-deep); }
.btn-wine-outline { background: transparent; color: var(--wine); border: 1px solid var(--wine); }
.btn-wine-outline:hover { background: var(--wine); color: var(--paper); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 0.6em 1.1em; font-size: 0.72rem; }

/* ---------- navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.nav__brand img { width: 40px; height: 40px; border-radius: 50%; }
.nav__brand .word { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.28em; padding-left: 0.28em; }
.nav__links { display: flex; gap: clamp(18px, 2.6vw, 40px); justify-self: center; }
.nav__links a { font-size: 0.83rem; letter-spacing: 0.06em; position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.nav__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; transition: background .3s, color .3s; }
.nav__icon:hover { background: oklch(0.5 0.01 60 / 0.12); }
.nav__icon svg { width: 19px; height: 19px; }
.nav__burger { display: none; width: 40px; height: 40px; place-items: center; justify-self: end; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .4s var(--ease), opacity .3s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.nav__burger span::before { top: -7px; } .nav__burger span::after { top: 7px; }

/* estado: arriba sobre el hero (texto claro) vs scrolleado (sólido) */
.nav--over { color: var(--paper); }
.nav--solid { background: oklch(0.987 0.004 70 / 0.86); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line); color: var(--ink); box-shadow: 0 1px 0 var(--line-soft); }
.nav--solid .nav__brand .word { color: var(--ink); }

/* menú mobile */
.mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--paper);
  transform: translateY(-100%); transition: transform .5s var(--ease); display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 8px; padding: 24px; }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); padding: 10px 0; }
.mobile-menu .row { display: flex; gap: 18px; margin-top: 28px; }

/* ---------- hero (dos fotos + texto centrado, fondo claro) ---------- */
.hero { background: var(--paper); padding: calc(var(--nav-h) + clamp(20px, 4vw, 48px)) 0 clamp(40px, 6vw, 80px);
  position: relative; overflow: hidden; }
/* Sombras que fluyen sobre el fondo del hero (como luz a través de una tela):
   dos capas de franjas difuminadas que van y vienen a distinta velocidad.
   Van en z-index 0, DEBAJO de las fotos y el texto (que quedan en z-index 1). */
.hero::before, .hero::after {
  content: ""; position: absolute; inset: -12% -35% 0 -35%; z-index: 0; pointer-events: none;
  will-change: transform;
  /* se desvanecen hacia el borde de abajo: sin línea de corte contra la sección siguiente */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hero::before {
  background: repeating-linear-gradient(98deg,
    transparent 0px, transparent 70px,
    oklch(0.30 0.05 50 / 0.14) 135px,
    transparent 215px, transparent 265px,
    oklch(0.30 0.05 50 / 0.09) 330px,
    transparent 400px);
  filter: blur(26px);
  animation: heroSombra 26s ease-in-out infinite alternate;
}
.hero::after {
  background: repeating-linear-gradient(93deg,
    transparent 0px, transparent 115px,
    oklch(0.99 0.025 85 / 0.15) 195px,
    transparent 285px);
  filter: blur(30px);
  animation: heroSombra 36s ease-in-out infinite alternate-reverse;
}
@keyframes heroSombra { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
/* el contenido del hero por encima del efecto */
.hero__grid, .hero__showcase { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1fr 1.04fr 1fr;
  grid-template-areas: "left center right"; align-items: stretch; gap: clamp(18px, 3.5vw, 52px); }
.hero__media { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.hero__media.left { grid-area: left; }
.hero__media.right { grid-area: right; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; min-height: clamp(440px, 64vh, 660px); transition: transform 1.2s var(--ease); }
.hero__media:hover img { transform: scale(1.035); }
.hero__center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(8px, 2vw, 36px) clamp(4px, 1vw, 12px); }
.hero__center .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 600; font-size: clamp(0.78rem, 1.5vw, 0.92rem); color: var(--ink-soft); margin-bottom: 14px; }
.hero h1 { font-size: clamp(2.5rem, 4.3vw, 4.1rem); color: var(--ink); font-weight: 500; letter-spacing: -0.015em; line-height: 1.04; }
.hero h1 em { font-style: italic; }
.hero .lead { margin-top: 20px; max-width: 30ch; color: var(--ink-soft); }
.hero__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__cta .btn { border-radius: 100px; }

/* ---------- encabezado de sección ---------- */
.shead { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(34px, 5vw, 60px); }
.shead h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.shead--row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.shead .lead { max-width: 52ch; }

/* ---------- cómo funciona ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.step { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.step__n { font-family: var(--font-display); font-size: 1.1rem; color: var(--wine); letter-spacing: .1em; }
.step h3 { font-size: 1.45rem; margin: 14px 0 8px; }
.step p { color: var(--muted); font-size: 0.98rem; }

/* ---------- grilla de vestidos ---------- */
.grid-vestidos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.grid-vestidos.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- carrusel de destacados (una sola fila desplazable) ---------- */
.carrusel-wrap { position: relative; }
.carrusel { display: flex; gap: clamp(14px, 1.8vw, 26px); overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > .card { flex: 0 0 clamp(232px, 25vw, 286px); scroll-snap-align: start; }
.carrusel-flecha { position: absolute; top: 38%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  box-shadow: var(--shadow-lg); cursor: pointer; z-index: 3; transition: opacity .25s, transform .2s; padding-bottom: 3px; }
.carrusel-flecha:hover { transform: translateY(-50%) scale(1.08); }
.carrusel-flecha.prev { left: -12px; }
.carrusel-flecha.next { right: -12px; }
.carrusel-flecha[hidden] { display: none; }

.card {
  display: flex; flex-direction: column; cursor: pointer; background: var(--paper);
  transition: transform .6s var(--ease);
}
.card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); border-radius: var(--r-sm); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .5s; }
.card:hover .card__media img { transform: scale(1.045); }
.card__tag { position: absolute; top: 12px; left: 12px; font-size: 0.62rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: 5px 10px; border-radius: 100px; font-weight: 600; }
.card__tag.wine { background: var(--wine); color: var(--paper); }
.card__over { position: absolute; inset: auto 0 0 0; padding: 14px; display: flex; justify-content: center;
  transform: translateY(120%); transition: transform .5s var(--ease); }
.card:hover .card__over { transform: translateY(0); }
.card__over .btn { background: var(--paper); color: var(--ink); width: 100%; }
.card__over .btn:hover { background: var(--ink); color: var(--paper); }
.card__body { padding: 14px 2px 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card__name { font-family: var(--font-display); font-size: 1.18rem; }
.card__meta { font-size: 0.82rem; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }
.card__price { font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.card__price small { font-weight: 400; color: var(--muted); }

/* ---------- descuentos ---------- */
.card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--wine); color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 100px; box-shadow: var(--shadow);
}
.card__price-old { color: var(--muted); font-weight: 400; text-decoration: line-through; margin-right: 6px; }
.card__price-new { color: var(--wine); font-weight: 700; }

/* pill de oferta en el hero de la portada */
.hero-sale {
  align-self: center; display: inline-flex; align-items: center;
  background: var(--wine); color: #fff;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 14px;
}

/* nota de oferta arriba de los filtros del catálogo */
.cat-sale {
  display: inline-flex; align-items: center;
  background: var(--wine); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px; margin-bottom: 14px;
}

/* descuento en el detalle del vestido */
.detalle__sale {
  display: inline-block; background: var(--wine); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin: 4px 0 8px;
}
.detalle__precio .precio-old { font-size: 1rem; color: var(--muted); font-weight: 400; text-decoration: line-through; margin-right: 9px; }
.detalle__precio .precio-new { color: var(--wine); }

/* ---------- catálogo: encabezado compacto ---------- */
.cat-head { margin-bottom: 20px; }
.cat-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.04; }
.cat-head .muted { font-size: 0.9rem; margin-top: 4px; }

/* ---------- cinta "ola" (hero) ----------
   Misma tipografía y cuero que el marquee del catálogo, pero con otro
   movimiento: las palabras no se desplazan, ONDULAN en el lugar (una ola
   que recorre la frase), con la frase alternada en itálica. */
.cinta-ola { overflow: hidden; white-space: nowrap; display: flex; justify-content: center;
  background-color: oklch(0.40 0.07 52);
  background-image: linear-gradient(oklch(0.24 0.05 46 / 0.5), oklch(0.24 0.05 46 / 0.5)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center;
  border-top: 1px solid oklch(0.64 0.08 66); border-bottom: 1px solid oklch(0.64 0.08 66);
  padding: 13px 0; position: relative; z-index: 2; }
.cinta-ola__linea { display: inline-flex; width: max-content; align-items: baseline; }
.cinta-ola__linea span { display: inline-block; color: oklch(0.95 0.02 82); font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.35rem); letter-spacing: 0.16em; text-transform: uppercase;
  margin-right: 0.85em; will-change: transform;
  animation: olaSube 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.42s); }
.cinta-ola__linea span.it { font-style: italic; }
.cinta-ola__linea span.fin { margin-right: 2.4em; }   /* respiro entre frase y frase */
.cinta-ola__linea span:last-child { margin-right: 0; } /* sin margen colgante: la frase del medio queda centrada exacta */
@keyframes olaSube { 0%, 100% { transform: translateY(19%); opacity: 0.66; } 50% { transform: translateY(-19%); opacity: 1; } }
/* celular: más chica para que "un vestido para cada ocasión" entre entera y centrada */
@media (max-width: 620px) {
  .cinta-ola { padding: 10px 0; }
  .cinta-ola__linea span { font-size: 0.78rem; letter-spacing: 0.1em; margin-right: 0.55em; }
  .cinta-ola__linea span.fin { margin-right: 1.7em; }
}

/* ---------- línea con movimiento (marquee) ---------- */
.marquee { overflow: hidden; white-space: nowrap;
  background-color: oklch(0.40 0.07 52);
  background-image: linear-gradient(oklch(0.24 0.05 46 / 0.5), oklch(0.24 0.05 46 / 0.5)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center;
  border-top: 1px solid oklch(0.64 0.08 66); border-bottom: 1px solid oklch(0.64 0.08 66); padding: 12px 0; }
.marquee__track { display: inline-flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee__track span { color: oklch(0.95 0.02 82); font-family: var(--font-display); font-size: clamp(1rem, 1.9vw, 1.35rem);
  letter-spacing: 0.16em; text-transform: uppercase; padding-right: clamp(28px, 5vw, 56px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- barra de filtros (catálogo) ---------- */
.filtrobar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.filtrobar__filtros { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; }
.filtrobar__lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fdrop { position: relative; }
.fdrop__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.94rem; color: var(--ink); padding: 6px 2px; cursor: pointer; }
.fdrop__btn:hover { color: var(--wine); }
.fdrop__caret { font-size: 0.6rem; transition: transform .2s; }
.fdrop--open .fdrop__caret { transform: rotate(180deg); }
.fdrop__badge { background: var(--ink); color: var(--paper); font-size: 0.64rem; font-weight: 600; border-radius: 100px; padding: 1px 7px; }
.fdrop__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 210px; display: none;
  background: oklch(0.96 0.012 82); color: oklch(0.30 0.02 60); border: 1px solid oklch(0.86 0.02 80);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px 14px; }
.fdrop--open .fdrop__panel { display: block; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 0.9rem; color: oklch(0.32 0.02 60); }
.fopt:hover { color: oklch(0.14 0.02 60); }
.fopt input { width: 15px; height: 15px; accent-color: oklch(0.30 0.02 60); cursor: pointer; }
.fswatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch { width: 100%; aspect-ratio: 1; max-width: 28px; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: transform .15s; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px oklch(0.96 0.012 82), 0 0 0 3px oklch(0.30 0.02 60); }
.fdrop__limpiar { font-size: 0.82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fdrop__limpiar[hidden] { display: none; }
.filtrobar__orden { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.filtrobar__ordlbl { font-size: 0.9rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.filtrobar__ordlbl select { font-size: 0.9rem; color: var(--ink); border: 0; background: transparent; cursor: pointer; padding: 2px; }
.filtrobar__count { font-size: 0.88rem; color: var(--muted); white-space: nowrap; }
.filtro-movil { display: none; align-items: center; gap: 8px; font-size: 0.94rem; color: var(--ink); }

/* chips viejos (por compatibilidad) */
.filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 36px; }
.chip {
  padding: 0.55em 1.1em; font-size: 0.78rem; letter-spacing: .04em; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--paper);
  transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- página de detalle ---------- */
.detalle { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px);
  padding-top: calc(var(--nav-h) + 40px); align-items: start; }
.galeria { display: flex; flex-direction: column; gap: 12px; }
.galeria__main { aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.galeria__main img { width: 100%; height: 100%; object-fit: cover; }
.galeria__thumbs { display: flex; gap: 10px; }
.galeria__thumbs button { width: 72px; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; opacity: .55; transition: opacity .3s, outline-color .3s; outline: 2px solid transparent; outline-offset: 2px; }
.galeria__thumbs button.active, .galeria__thumbs button:hover { opacity: 1; outline-color: var(--ink); }
.galeria__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.detalle__info { position: sticky; top: calc(var(--nav-h) + 30px); }
.detalle__info .back { font-size: 0.78rem; letter-spacing: .08em; color: var(--muted); display: inline-flex; gap: 7px; align-items: center; margin-bottom: 22px; }
.detalle__info .back:hover { color: var(--ink); }
.detalle__info h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.detalle__attrs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 6px; }
.detalle__attrs span { font-size: 0.86rem; color: var(--muted); }
.detalle__attrs b { color: var(--ink); font-weight: 600; }
.attr-color { display: inline-flex; align-items: center; gap: 6px; }
.attr-sw { display: inline-block; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); vertical-align: middle; }
.detalle__precio { font-size: 1.5rem; font-weight: 600; margin: 18px 0; font-family: var(--font-display); }
.detalle__desc { color: var(--ink-soft); margin-bottom: 26px; max-width: 52ch; }

/* ---------- formularios ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85em 1em; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .3s; font-size: 0.98rem;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.reserva-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(20px, 3vw, 28px); background: var(--paper); }
.reserva-box h3 { font-size: 1.3rem; margin-bottom: 4px; }
.reserva-box .sub { font-size: 0.88rem; color: var(--muted); margin-bottom: 18px; }
.fecha-aviso { font-size: 0.84rem; padding: 9px 12px; border-radius: var(--r-sm); margin-top: 4px; display: none; }
.fecha-aviso.ok { display: block; background: oklch(0.95 0.05 150); color: oklch(0.4 0.1 150); }
.fecha-aviso.busy { display: block; background: oklch(0.95 0.05 30); color: var(--wine-deep); }
.contacto-alt { display: flex; gap: 10px; margin-top: 14px; }
.contacto-alt .btn { flex: 1; }

/* botones de prueba (Paso a probarme / Prueba a domicilio) */
.prueba-cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.prueba-cta > span { display: block; font-size: 0.84rem; color: var(--muted); margin-bottom: 8px; }
.prueba-btns { display: flex; gap: 10px; }
.prueba-btns .btn { flex: 1; }
.prueba-btns.col { flex-direction: column; }

/* mini calendario (segunda forma de elegir la fecha del evento) */
.minical { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper); max-width: 340px; }
.minical__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.minical__t { font-size: 0.86rem; font-weight: 600; }
.minical__nav { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; background: var(--paper); color: var(--ink); font-size: 1.1rem; line-height: 1; }
.minical__nav:disabled { opacity: 0.3; cursor: default; }
.minical__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.minical__dow { text-align: center; font-size: 0.64rem; letter-spacing: .03em; color: var(--muted); padding-bottom: 3px; }
.minical__d { aspect-ratio: 1; display: grid; place-items: center; font-size: 0.82rem; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer; }
.minical__d.empty { background: none; cursor: default; }
.minical__d:not(:disabled):hover { background: var(--paper-2); }
.minical__d.today { border-color: var(--line); }
.minical__d.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.minical__d.off { color: var(--muted); opacity: 0.35; cursor: default; }
.minical__d.busy { color: var(--wine); text-decoration: line-through; opacity: 0.6; cursor: default; }

/* botoncito "quiero recibir futuras ofertas" (opt-in, sin cuentas ni login) */
.ofertas-chip { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 4px;
  font-size: 0.85rem; color: var(--muted); border: 1px solid var(--line); border-radius: 100px;
  padding: 0.55em 1.05em; cursor: pointer; background: transparent; transition: background .25s, color .25s, border-color .25s; }
.ofertas-chip:hover { border-color: var(--ink); color: var(--ink); }
.ofertas-chip__box { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-grid; place-items: center; font-size: 10px; line-height: 1; flex-shrink: 0; }
.ofertas-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ofertas-chip.on .ofertas-chip__box::before { content: "✓"; }

/* selector local / domicilio (coordinar prueba) */
.seg { display: flex; gap: 8px; }
.seg__b { flex: 1; padding: 0.62em 0.5em; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink-soft); font-size: 0.9rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.seg__b.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- ticket de confirmación de reserva ---------- */
.ticket { text-align: center; }
.ticket__ok { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%;
  background: oklch(0.62 0.14 150); color: #fff; font-size: 1.4rem; font-weight: 700;
  display: grid; place-items: center; }
.ticket h3 { font-size: 1.4rem; }
.ticket__cod { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: .1em;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm); padding: 8px 20px;
  display: inline-block; margin-bottom: 6px; }
.ticket__rows { text-align: left; margin: 14px 0 6px; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line-soft); font-size: .9rem; }
.ticket__row span { color: var(--muted); }
.ticket__row b { text-align: right; }
.pago-tit { font-size: 0.74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 10px; }
.pago-ops { display: flex; flex-direction: column; gap: 8px; }

/* ---------- mi cuenta (mis reservas) ---------- */
.nav__icon.activo { background: oklch(0.5 0.01 60 / 0.14); }
.mias { display: flex; flex-direction: column; gap: 16px; }
.mia { display: flex; gap: 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px; align-items: stretch; }
.mia__ph { flex: none; width: 96px; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); }
.mia__ph img { width: 100%; height: 100%; object-fit: cover; min-height: 120px; }
.mia__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mia__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mia__nom { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.mia__linea { font-size: .88rem; color: var(--ink-soft); }
.mia__ok { color: oklch(0.45 0.12 150); }
.mia__acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mia .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .7rem; font-weight: 600; }
.mia .badge.pendiente { background: oklch(0.94 0.06 80); color: oklch(0.45 0.12 70); }
.mia .badge.confirmada { background: oklch(0.93 0.07 150); color: oklch(0.4 0.12 150); }
.mia .badge.cancelada { background: oklch(0.93 0.04 30); color: var(--wine-deep); }
.mia .badge.entregado { background: oklch(0.93 0.07 150); color: oklch(0.38 0.12 150); }
.mia .badge.devuelto { background: oklch(0.92 0.06 245); color: oklch(0.40 0.13 255); }
@media (max-width: 620px) {
  .mia { flex-direction: row; }
  .mia__ph { width: 78px; }
  .mia__acc .btn { flex: 1 1 auto; }
}

/* ---------- captura de mail ---------- */
.descuento { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: clamp(40px, 7vw, 84px) clamp(24px, 5vw, 72px); text-align: center; }
.descuento h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); color: var(--paper); }
.descuento p { color: oklch(0.9 0 0 / 0.8); margin: 16px auto 28px; max-width: 46ch; }
.descuento form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.descuento input { flex: 1; padding: 1em 1.2em; border-radius: var(--r-sm); border: 1px solid oklch(1 0 0 / 0.2); background: oklch(1 0 0 / 0.07); color: var(--paper); }
.descuento input::placeholder { color: oklch(1 0 0 / 0.5); }
.descuento input:focus { outline: none; border-color: var(--paper); }
.descuento .btn-ink { background: var(--paper); color: var(--ink); }
.descuento .ok-msg { margin-top: 16px; color: oklch(0.92 0.05 150); font-size: 0.92rem; min-height: 1.2em; }

/* ---------- bandas editoriales ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 90px); }
.split__media { aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 18px; }
.split p { color: var(--ink-soft); margin-bottom: 14px; max-width: 46ch; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 84px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__brand .word { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .26em; }
.footer__brand p { color: var(--muted); margin-top: 14px; max-width: 36ch; font-size: 0.94rem; }
.footer h4 { font-size: 0.74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 0.94rem; color: var(--ink-soft); }
.footer ul a:hover { color: var(--ink); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 26px; border-top: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--muted); }
.footer__bottom a { color: var(--ink-soft); }
.kangaroo { display: inline-flex; align-items: center; gap: 7px; }
.kangaroo img { height: 16px; width: auto; opacity: .8; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 140%); z-index: 200;
  background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: 100px; font-size: 0.9rem;
  box-shadow: var(--shadow-lg); transition: transform .55s var(--ease), opacity .4s, visibility .4s;
  max-width: 90vw; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.err { background: var(--wine-deep); }

/* ---------- botón flotante de WhatsApp ---------- */
.wa-float { position: fixed; right: clamp(16px, 3vw, 26px); bottom: clamp(16px, 3vw, 26px);
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; z-index: 150; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- cartel de transferencia (datos de la cuenta) ---------- */
.transf { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 1.2rem;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.transf.open { opacity: 1; visibility: visible; }
.transf__bg { position: absolute; inset: 0; background: oklch(0.14 0.02 50 / .6); }
.transf__card { position: relative; z-index: 1; width: min(430px, 100%); background: var(--paper);
  border-radius: var(--r-lg); padding: clamp(26px, 5vw, 36px); box-shadow: var(--shadow-lg); text-align: center;
  transform: translateY(14px); transition: transform .3s var(--ease); }
.transf.open .transf__card { transform: none; }
.transf__card h3 { font-size: 1.4rem; margin-bottom: 14px; }
.transf__close { position: absolute; top: 10px; right: 14px; width: 38px; height: 38px; font-size: 1.5rem;
  color: var(--muted); border-radius: 50%; display: grid; place-items: center; }
.transf__close:hover { color: var(--ink); background: var(--paper-2); }
.transf__monto { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 12px; }
.transf__monto span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.transf__monto b { font-size: 1.35rem; color: var(--wine); }
.transf__datos { background: var(--paper-2); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 14px;
  text-align: left; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.transf__nota { font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ---------- preguntas frecuentes ---------- */
.faq { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 42px 18px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink); transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--wine); }
.faq__item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 300; color: var(--muted); transition: transform .25s; }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { padding: 0 42px 20px 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 62ch; }

/* ---------- demo banner ---------- */
.demo-banner { background: var(--paper-2); border-bottom: 1px solid var(--line); text-align: center;
  font-size: 0.8rem; color: var(--muted); padding: 8px 16px; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- showroom / envío (dos paneles) ---------- */
.envio-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.envio-col { border-radius: var(--r-lg); padding: clamp(38px, 5vw, 68px) clamp(26px, 4vw, 52px); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px;
  background-size: cover; background-position: center; color: oklch(0.96 0.014 82); box-shadow: var(--shadow-lg); }
.envio-col--local { background-color: oklch(0.34 0.055 52);
  background-image: linear-gradient(oklch(0.22 0.05 46 / 0.6), oklch(0.22 0.05 46 / 0.6)), url("../imagenes/cuero-oscuro.webp"); }
.envio-col--envio { background-color: oklch(0.47 0.11 40);
  background-image: linear-gradient(oklch(0.42 0.12 36 / 0.5), oklch(0.42 0.12 36 / 0.5)), url("../imagenes/cuero-oscuro.webp"); }
.envio-col .eyebrow { color: oklch(0.86 0.045 76); }
.envio-col h2 { font-size: clamp(1.5rem, 2.7vw, 2.4rem); max-width: 20ch; margin: 10px auto 0; color: oklch(0.99 0.014 82); }
.envio-col p { color: oklch(0.92 0.02 80); max-width: 40ch; margin: 14px auto 24px; }

/* ---------- collage de inspiración ---------- */
.collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 104px; gap: 10px; }
.collage a { overflow: hidden; border-radius: var(--r-md); grid-row: span 2; display: block; background: var(--paper-2); }
.collage a:nth-child(5n + 1) { grid-row: span 3; }
.collage a:nth-child(8n + 4) { grid-column: span 2; grid-row: span 2; }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.collage a:hover img { transform: scale(1.06); }

/* ---------- promociones (barra + popup) ---------- */
.promobar { background-color: oklch(0.40 0.07 52);
  background-image: linear-gradient(oklch(0.24 0.05 46 / 0.5), oklch(0.24 0.05 46 / 0.5)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center; color: oklch(0.96 0.014 82); }
.promobar__in { max-width: var(--maxw); margin: 0 auto; padding: .72rem clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; }
.promobar__pct { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; background: oklch(1 0 0 / .16); padding: .22rem .6rem; border-radius: 100px; }
.promobar__txt { font-size: .92rem; }
.promobar__cta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.promomodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem; visibility: hidden; }
.promomodal.is-open { visibility: visible; }
.promomodal__bg { position: absolute; inset: 0; background: oklch(0.14 0.02 50 / .6); opacity: 0; transition: opacity .3s var(--ease); }
.promomodal.is-open .promomodal__bg { opacity: 1; }
.promomodal__card { position: relative; z-index: 1; width: min(540px, 100%); border-radius: var(--r-lg); overflow: hidden; text-align: center;
  background-color: oklch(0.36 0.06 50);
  background-image: linear-gradient(oklch(0.24 0.05 46 / .5), oklch(0.24 0.05 46 / .5)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center; color: oklch(0.96 0.014 82);
  transform: translateY(16px) scale(.97); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); box-shadow: var(--shadow-lg); }
.promomodal.is-open .promomodal__card { transform: none; opacity: 1; }
.promomodal__body { padding: clamp(2.4rem, 6vw, 3.4rem) clamp(1.6rem, 5vw, 2.6rem); }
.promomodal__pct { font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: oklch(0.84 0.05 76); margin-bottom: 1rem; }
.promomodal__t { font-family: var(--font-display); font-size: clamp(2.1rem, 7vw, 3.1rem); line-height: 1.03; color: oklch(0.99 0.014 82); }
.promomodal__x { color: oklch(0.90 0.02 80); margin: 1rem auto 1.8rem; max-width: 32ch; line-height: 1.5; }
.promomodal__cta { margin-top: 4px; }
.promomodal__close { position: absolute; top: .9rem; right: 1.1rem; z-index: 3; width: 38px; height: 38px; font-size: 1.6rem; line-height: 1;
  color: oklch(0.98 0.01 82); border-radius: 50%; background: oklch(0.14 0.02 50 / .4); display: grid; place-items: center; }
.promomodal__close:hover { background: oklch(0.14 0.02 50 / .7); }
.promomodal.has-img .promomodal__card { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(620px, 82vh); }
.promomodal__media { position: absolute; inset: 0; z-index: 0; display: block; }
.promomodal__media img { width: 100%; height: 100%; object-fit: var(--fit, contain); object-position: center; display: block; }
.promomodal.has-img .promomodal__body { position: relative; z-index: 1; margin-top: auto; padding-top: 4.5rem;
  background: linear-gradient(to top, oklch(0.16 0.03 48 / .94) 8%, oklch(0.16 0.03 48 / .72) 55%, transparent); }
.promomodal.img-only .promomodal__card { display: block; min-height: 0; }
.promomodal.img-only .promomodal__media { position: relative; }
.promomodal.img-only .promomodal__media img { height: auto; max-height: 82vh; object-fit: contain; }

/* ---------- estados vacíos ---------- */
.empty { text-align: center; padding: 80px 20px; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%;
  animation: spin .8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid-vestidos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__burger { display: grid; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__brand { justify-self: start; }
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step { padding-top: 20px; padding-bottom: 8px; }
  .detalle { grid-template-columns: 1fr; }
  .detalle__info { position: static; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "center"; }
  .hero__media.right { display: none; }
  .hero__media.left { grid-area: auto; margin-top: clamp(22px, 6vw, 34px); }
  .hero__media.left img { min-height: clamp(360px, 72vw, 520px); }
  /* catálogo: barra de filtros → botón "Filtrar y ordenar" + panel plegable */
  .filtro-movil { display: inline-flex; }
  .filtrobar__count { margin-left: auto; order: 1; }
  .filtrobar__lbl { display: none; }
  .filtrobar__filtros { order: 2; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; display: none; margin-top: 12px; }
  .filtrobar__orden { order: 3; flex-basis: 100%; margin-left: 0; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); display: none; }
  .filtrobar.abierto .filtrobar__filtros { display: flex; }
  .filtrobar.abierto .filtrobar__orden { display: flex; }
  .fdrop { width: 100%; border-bottom: 1px solid var(--line-soft); }
  .fdrop__btn { width: 100%; justify-content: space-between; padding: 12px 0; }
  .fdrop__panel { position: static; display: none; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 12px 4px; color: var(--ink); }
  .fdrop--open .fdrop__panel { display: block; }
  .fopt { color: var(--ink-soft); }
  .fopt:hover { color: var(--ink); }
  .fopt input { accent-color: var(--ink); }
  .fswatches { grid-template-columns: repeat(8, 1fr); }
  .swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
  .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 94px; }
  .envio-split { grid-template-columns: 1fr; }
  .envio-col { min-height: 0; }
}
@media (max-width: 620px) {
  .collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 82px; gap: 7px; }
  .grid-vestidos, .grid-vestidos.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .carrusel > .card { flex-basis: 64%; }
  .carrusel-flecha { width: 40px; height: 40px; font-size: 1.5rem; }
  .card__over { display: none; }
  .descuento form { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; }
  .card__name { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================
   TEMA OSCURO · solo páginas públicas (el admin queda claro)
   Negro cálido (como el del panel); la fotografía aporta el color.
   Scopeado con body:not(.admin-body) para no tocar el admin.
   =========================================================== */
body:not(.admin-body) {
  --paper:     oklch(0.965 0.012 84);   /* superficie crema (cards, paneles) */
  --paper-2:   oklch(0.925 0.016 82);   /* superficie elevada / media */
  --ink:       oklch(0.245 0.022 52);   /* texto principal: marrón oscuro */
  --ink-soft:  oklch(0.36 0.022 52);
  --muted:     oklch(0.47 0.020 56);
  --line:      oklch(0.80 0.012 72);
  --line-soft: oklch(0.865 0.010 72);
  --wine:      oklch(0.46 0.155 26);    /* terracota/vino para acentos y ofertas */
  --wine-deep: oklch(0.38 0.150 26);

  /* fondo de cuero real (las dos fotos combinadas, sin costura). Una sola imagen
     fija a cover: no se repite, así nunca se ve un corte. Un velo crema muy suave
     levanta los pliegues oscuros para que el texto se lea sobre el cuero. */
  background-color: oklch(0.74 0.06 66);
  background-image: linear-gradient(oklch(0.93 0.02 80 / 0.30), oklch(0.93 0.02 80 / 0.30)), url("../imagenes/fondo-cuero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
}
/* el cuero se ve a través de las secciones (no las pintamos de color) */
body:not(.admin-body) .hero,
body:not(.admin-body) #como { background: transparent; }
/* nav: panel crema translúcido al scrollear */
body:not(.admin-body) .nav--solid {
  background: oklch(0.965 0.012 84 / 0.85);
  backdrop-filter: blur(10px) saturate(1.3);
  border-bottom-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-soft);
}
body:not(.admin-body) .nav--over { color: var(--ink); }
/* panel de filtros del catálogo: cuero oscuro (contrasta con el fondo), línea abajo */
body:not(.admin-body) .cat-filtros {
  background-color: oklch(0.40 0.07 52);
  background-image: linear-gradient(oklch(0.27 0.05 46 / 0.32), oklch(0.27 0.05 46 / 0.32)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center;
  border: 0; border-bottom: 1px solid oklch(0.56 0.05 56); border-radius: 0;
  color: oklch(0.95 0.014 82);
}
body:not(.admin-body) .cat-filtros .filtro-titulo { color: oklch(0.80 0.03 76); }
body:not(.admin-body) .cat-filtros .filtro-op { color: oklch(0.92 0.018 82); }
body:not(.admin-body) .cat-filtros .filtro-op:hover { color: oklch(0.99 0.01 82); }
body:not(.admin-body) .cat-filtros .filtro-op input { accent-color: oklch(0.92 0.018 82); }
body:not(.admin-body) .cat-filtros .filtro-limpiar { color: oklch(0.90 0.02 80); border-color: oklch(0.60 0.04 56); }
body:not(.admin-body) .cat-filtros .filtro-limpiar:hover { background: oklch(0.95 0.014 82); color: oklch(0.30 0.04 52); border-color: oklch(0.95 0.014 82); }

/* tarjetas de prenda: cuerpo (nombre/precio) en color cuero liso, texto claro */
body:not(.admin-body) .card {
  background: oklch(0.49 0.09 52);
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 0 12px 26px oklch(0.20 0.03 50 / 0.22);
  color: oklch(0.96 0.014 82);
}
body:not(.admin-body) .card__body { padding: 12px 13px 14px; }
body:not(.admin-body) .card__name { color: oklch(0.98 0.014 82); }
body:not(.admin-body) .card__price { color: oklch(0.96 0.014 82); }
body:not(.admin-body) .card__meta,
body:not(.admin-body) .card__price small { color: oklch(0.80 0.03 76); }

/* sección de descuentos: cuero oscuro (panel oscuro con textura; texto claro de base) */
body:not(.admin-body) .descuento {
  background-color: oklch(0.40 0.07 52);
  background-image: linear-gradient(oklch(0.25 0.05 46 / 0.42), oklch(0.25 0.05 46 / 0.42)), url("../imagenes/cuero-oscuro.webp");
  background-size: cover; background-position: center;
  border: 1px solid oklch(0.52 0.05 56); box-shadow: var(--shadow-lg);
}
body:not(.admin-body) .descuento .eyebrow { color: oklch(0.82 0.03 76); }