/* ==========================================================================
   TOP CARE · sistema visual
   Papel perla + tinta cacao + rosa de marca. Filete de 1px como única
   elevación en contenido; sombra sólo en capas flotantes.
   ========================================================================== */

:root{
  /* color */
  --ink-900: oklch(0.22 0.028 28);
  --ink-700: oklch(0.38 0.030 28);
  --ink-500: oklch(0.52 0.026 28);
  --ink-400: oklch(0.615 0.024 28);
  --ink-300: oklch(0.70 0.020 28);
  --line:    oklch(0.915 0.012 24);
  --line-2:  oklch(0.955 0.008 24);
  --paper:   oklch(1 0 0);
  --paper-2: oklch(0.986 0.006 20);
  --paper-3: oklch(0.972 0.012 20);

  --rose-50:  oklch(0.972 0.018 16);
  --rose-100: oklch(0.930 0.042 16);
  --rose-200: oklch(0.885 0.062 15);
  --rose-400: oklch(0.760 0.115 14);
  --rose-500: oklch(0.700 0.135 13);
  --rose-600: oklch(0.620 0.150 12);
  --rose-700: oklch(0.530 0.148 12);
  --gold-300: oklch(0.880 0.070 74);
  --gold-500: oklch(0.790 0.105 70);
  --wa:       oklch(0.72 0.17 152);
  --wa-dark:  oklch(0.62 0.16 152);

  /* tipografía */
  --serif: 'Bodoni Moda', 'Times New Roman', Times, serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.35rem, 1.55rem + 3.3vw, 5rem);
  --fs-h2:      clamp(1.45rem, 1.15rem + 1.15vw, 2.35rem);
  --fs-h3:      clamp(1.08rem, 0.98rem + 0.4vw, 1.35rem);
  --fs-body:    clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --fs-sm:      0.855rem;
  --fs-xs:      0.755rem;

  /* espacio y forma */
  --wrap: 1320px;
  --gut: clamp(1rem, 0.6rem + 1.8vw, 2.25rem);
  --sec: clamp(2.6rem, 1.8rem + 3.2vw, 5rem);
  --r-card: 14px;
  --r-img: 12px;
  --r-pill: 999px;
  --shadow-1: 0 2px 6px oklch(0.22 0.03 28 / .06), 0 10px 28px oklch(0.22 0.03 28 / .08);
  --shadow-2: 0 6px 16px oklch(0.22 0.03 28 / .10), 0 28px 64px oklch(0.22 0.03 28 / .16);

  /* motion */
  --e-out: cubic-bezier(.22,.68,.32,1);
  --e-soft: cubic-bezier(.32,.72,.28,1);
  --t-fast: 140ms;
  --t-mid: 220ms;
  --t-slow: 290ms;

  --z-hdr: 60; --z-fab: 70; --z-scrim: 80; --z-layer: 90; --z-toast: 100;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }  /* excepción: las capas declaran display en su clase */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px }
body{
  margin:0; background:var(--paper); color:var(--ink-900);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.55;
  font-weight:400; letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ position:fixed; left:0; width:100%; overflow:hidden }
img,video,svg{ display:block; max-width:100% }
img{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer; padding:0 }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul{ list-style:none; padding:0 }
:focus-visible{ outline:2px solid var(--rose-600); outline-offset:3px; border-radius:4px }
::selection{ background:var(--rose-200); color:var(--ink-900) }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip-link{ position:fixed; top:-100px; left:12px; z-index:200; background:var(--ink-900); color:#fff; padding:.7rem 1rem; border-radius:10px; transition:top var(--t-fast) var(--e-out) }
.skip-link:focus{ top:calc(12px + var(--safe-t)) }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.ico{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none }
.ico--sm{ width:16px; height:16px }

/* ---------- tipografía de sección ---------- */
.sec__title{ font-family:var(--serif); font-weight:500; font-size:var(--fs-h2); line-height:1.06; letter-spacing:-0.018em; text-wrap:balance }
.sec__title--center{ text-align:center }
.lnk{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); color:var(--ink-700); border-bottom:1px solid var(--line); padding-bottom:2px; transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out) }
.lnk:hover{ color:var(--rose-700); border-color:var(--rose-400) }

/* ---------- botones ---------- */
.btn{
  --bg:var(--ink-900); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; padding:.7rem 1.35rem; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-size:.94rem; font-weight:500; letter-spacing:.01em; white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn:hover{ --bg:var(--ink-700) }
.btn:active{ transform:scale(.97) }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }
.btn--ghost{ --bg:transparent; --fg:var(--ink-900); --bd:var(--ink-900) }
.btn--ghost:hover{ --bg:var(--ink-900); --fg:#fff }
.btn--wa{ --bg:var(--wa); --fg:#08290f }
.btn--wa:hover{ --bg:var(--wa-dark); --fg:#fff }
.btn--rose{ --bg:var(--rose-700) }
.btn--rose:hover{ --bg:var(--rose-600) }
.btn--text{ --bg:transparent; --fg:var(--ink-500); min-height:40px; padding:.5rem .8rem; font-size:var(--fs-sm) }
.btn--text:hover{ --fg:var(--rose-700); --bg:transparent }
.btn--lg{ min-height:54px; padding:.9rem 1.9rem; font-size:1.02rem }
.btn--block{ width:100% }
.iconbtn{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-pill); color:var(--ink-700); transition:background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out) }
.iconbtn:hover{ background:var(--paper-3); color:var(--ink-900) }
.iconbtn:active{ transform:scale(.94) }

/* ---------- topbar + header ---------- */
.topbar{ background:var(--ink-900); color:oklch(0.96 0.01 24); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase }
.topbar__in{ display:flex; align-items:center; justify-content:center; gap:1.5rem; min-height:34px; padding-top:var(--safe-t) }
.topbar__msg{ display:flex; align-items:center; gap:.4rem; white-space:nowrap; font-size:clamp(9.5px, 2.6vw, 12px) }
.topbar__msg .ico{ width:13px; height:13px; color:var(--gold-300) }
.topbar__msg--alt{ display:none }

.hdr{ position:sticky; top:0; z-index:var(--z-hdr); background:oklch(1 0 0 / .88); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line-2); transition:box-shadow var(--t-mid) var(--e-out) }
.hdr.is-stuck{ box-shadow:0 1px 0 var(--line), 0 10px 30px oklch(0.22 0.03 28 / .06) }
.hdr__in{ display:flex; align-items:center; gap:.75rem; height:68px }
.hdr__btn{ display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-pill); color:var(--ink-900); position:relative; transition:background-color var(--t-fast) var(--e-out) }
.hdr__btn:hover{ background:var(--paper-3) }
.hdr__btn:active{ transform:scale(.94) }
.hdr__btn--menu{ display:grid }
.hdr__count{ position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-pill); background:var(--rose-600); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; line-height:1 }
.hdr__count.is-bump{ animation:bump 380ms var(--e-out) }
@keyframes bump{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

.brand{ display:flex; align-items:center; min-width:0; margin-right:auto }
.brand__txt{ display:block; min-width:0 }
.brand__name{ display:block; font-family:var(--serif); font-size:clamp(1.15rem, 4.4vw, 1.55rem); font-weight:500;
  letter-spacing:.085em; line-height:1; white-space:nowrap }
.brand__tag{ display:block; font-size:clamp(7.4px, 2.3vw, 11px); letter-spacing:clamp(.07em, .38vw, .2em);
  text-transform:uppercase; color:var(--ink-500); margin-top:4px; white-space:nowrap }

.nav{ display:none; align-items:center; gap:1.6rem; font-size:.93rem }
.nav a,.nav__trigger{ position:relative; display:inline-flex; align-items:center; gap:.3rem; padding:.35rem 0; color:var(--ink-700); transition:color var(--t-fast) var(--e-out) }
.nav a::after,.nav__trigger::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rose-500); transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--e-out) }
.nav a:hover,.nav__trigger:hover{ color:var(--ink-900) }
.nav a:hover::after,.nav__trigger:hover::after,.nav a.is-active::after{ transform:scaleX(1) }
.nav__group{ position:relative }
.hdr__actions{ display:flex; align-items:center; gap:.2rem }

.mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); width:min(880px,88vw); background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-2); padding:1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 2rem }
.mega__h{ font-family:var(--serif); font-size:1rem; font-weight:500; margin-bottom:.5rem; letter-spacing:.01em }
.mega ul{ display:grid; gap:.3rem }
.mega a{ font-size:var(--fs-sm); color:var(--ink-500); transition:color var(--t-fast) var(--e-out) }
.mega a:hover{ color:var(--rose-700) }
.mega__count{ color:var(--ink-400); font-size:var(--fs-xs) }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; min-height:clamp(500px, 78svh, 780px); display:flex; align-items:flex-end; overflow:hidden }
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__poster,.hero__video{ width:100%; height:100%; object-fit:cover; object-position:52% 30% }
.hero__video{ position:absolute; inset:0; opacity:0; transition:opacity 600ms var(--e-out) }
.hero__video.is-on{ opacity:1 }
.hero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(to top, oklch(0.20 0.03 30 / .82) 0%, oklch(0.20 0.03 30 / .45) 34%, oklch(0.20 0.03 30 / .05) 62%),
    linear-gradient(to right, oklch(0.20 0.03 30 / .35) 0%, oklch(0.20 0.03 30 / 0) 55%);
}
.hero__in{ position:relative; width:100%; padding-bottom:clamp(3.2rem, 9vh, 5rem); padding-top:6rem }
.hero__copy{ max-width:560px; color:#fff }
.hero__title{ font-family:var(--serif); font-size:var(--fs-display); font-weight:500; line-height:1.02; letter-spacing:-0.025em; white-space:pre-line; text-shadow:0 2px 30px oklch(0.2 0.03 30 / .35) }
.hero__sub{ margin-top:.9rem; font-size:clamp(.95rem,.9rem + .3vw,1.12rem); line-height:1.5; color:oklch(0.97 0.012 22); max-width:44ch }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem }
.hero__cta .btn--primary{ --bg:var(--paper); --fg:var(--ink-900) }
.hero__cta .btn--primary:hover{ --bg:var(--rose-100) }
.hero__cta .btn--ghost{ --fg:#fff; --bd:oklch(1 0 0 / .6) }
.hero__cta .btn--ghost:hover{ --bg:oklch(1 0 0 / .14); --fg:#fff; --bd:#fff }
.hero__note{ margin-top:1rem; font-size:var(--fs-xs); letter-spacing:.05em; text-transform:uppercase; color:oklch(0.92 0.02 22) }
.hero__cue{ position:absolute; left:50%; bottom:14px; translate:-50% 0; width:26px; height:40px; border:1px solid oklch(1 0 0 / .5); border-radius:var(--r-pill); display:none; place-items:center }
.hero__cue span{ width:3px; height:7px; border-radius:2px; background:#fff; animation:cue 1.8s var(--e-soft) infinite }
@keyframes cue{ 0%{transform:translateY(-6px);opacity:0} 35%{opacity:1} 75%{transform:translateY(7px);opacity:0} 100%{opacity:0} }

/* ---------- carril horizontal ---------- */
.rail{ position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; overscroll-behavior-x:contain }
.rail::-webkit-scrollbar{ display:none }
.rail__track{ display:flex; gap:.7rem; padding-inline:var(--gut); padding-block:2px }
.rail__track > *{ scroll-snap-align:start; flex:none }
.shelf{ padding-block:var(--sec) 0 }
.shelf__head,.cats__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem }
.shelf__nav{ display:none; gap:.4rem }
.rbtn{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-700); transition:background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out) }
.rbtn:hover{ background:var(--ink-900); border-color:var(--ink-900); color:#fff }
.rbtn:disabled{ opacity:.35; pointer-events:none }

/* ---------- categorías ---------- */
.cats{ padding-top:var(--sec) }
.cat{ display:block; width:132px; border-radius:var(--r-card); overflow:hidden; background:var(--rose-50); border:1px solid var(--rose-100); transition:border-color var(--t-mid) var(--e-out) }
.cat:hover{ border-color:var(--rose-400) }
.cat img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:14%; transition:transform var(--t-slow) var(--e-out) }
.cat:hover img{ transform:scale(1.06) }
.cat__lbl{ display:block; padding:.15rem .7rem .7rem; color:var(--ink-900) }
.cat__name{ display:block; font-size:.87rem; font-weight:500; line-height:1.2 }
.cat__n{ display:block; font-size:var(--fs-xs); color:var(--ink-500); margin-top:2px }

/* ---------- banda de pasos ---------- */
.strip{ margin-top:var(--sec); border-block:1px solid var(--line); background:var(--paper-2) }
.strip__in{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding-block:.85rem }
.strip__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; font-size:var(--fs-xs); line-height:1.25; color:var(--ink-700) }
.strip__item b{ display:grid; place-items:center; width:22px; height:22px; border-radius:var(--r-pill); background:var(--rose-100); color:var(--rose-700); font-size:.72rem; font-weight:600 }

/* ---------- tarjeta de producto ---------- */
.card{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; transition:border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out) }
.card:hover{ border-color:var(--ink-300) }
.card:active{ transform:scale(.988) }
.rail .card{ width:min(46vw, 216px) }
.card__media{ position:relative; aspect-ratio:1/1; background:var(--paper-2); overflow:hidden }
.editorial__art img{ background:none }
.card__img{ width:100%; height:100%; object-fit:contain; padding:6%; transition:transform var(--t-slow) var(--e-out), opacity var(--t-mid) var(--e-out) }
.card:hover .card__img{ transform:scale(1.045) }
.card__img.is-alt{ position:absolute; inset:0; opacity:0 }
.card:hover .card__img.is-alt{ opacity:1 }
.card__body{ display:flex; flex-direction:column; gap:.2rem; padding:.65rem .7rem .75rem; flex:1 }
.card__brand{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card__name{ font-size:.87rem; line-height:1.3; font-weight:400; color:var(--ink-900); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em }
.card__meta{ margin-top:auto; padding-top:.4rem; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap }
.card__price{ font-size:.98rem; font-weight:500; letter-spacing:-.01em }
.card__old{ font-size:var(--fs-xs); color:var(--ink-400); text-decoration:line-through }
.card__var{ font-size:var(--fs-xs); color:var(--ink-500); margin-top:.15rem }
.card__add{ position:absolute; z-index:2; right:.5rem; bottom:.5rem; width:40px; height:40px; border-radius:var(--r-pill); background:var(--ink-900); color:#fff; display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), background-color var(--t-fast) var(--e-out) }
.card:hover .card__add,.card__add:focus-visible{ opacity:1; transform:none }
.card__add:hover{ background:var(--rose-700) }
.card__add:active{ transform:scale(.92) }
@media (hover:none){ .card__add{ opacity:1; transform:none } }
.card__link{ position:absolute; inset:0; z-index:1 }
.card__badges{ position:absolute; top:.5rem; left:.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; z-index:2 }
.badge{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:.22rem .45rem; border-radius:6px; background:var(--ink-900); color:#fff; font-weight:500 }
.badge--sale{ background:var(--rose-600) }
.badge--new{ background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-900) }
.badge--out{ background:oklch(0.5 0 0) }
.card.is-out .card__media{ opacity:.55 }

/* ---------- promo ---------- */
.promo{ padding-block:var(--sec) 0 }
.promo__in{ position:relative; overflow:hidden; border-radius:20px; background:var(--rose-50); border:1px solid var(--rose-100); display:grid; gap:1rem; padding:clamp(1.5rem,4vw,2.75rem) }
.promo__title{ font-family:var(--serif); font-size:var(--fs-h2); font-weight:500; line-height:1.05; letter-spacing:-.02em }
.promo__txt{ margin:.6rem 0 1.2rem; color:var(--ink-700); max-width:46ch }
.promo__txt b{ color:var(--rose-700); font-weight:600 }
.promo__copy{ position:relative; z-index:1 }
.promo__art{ position:absolute; inset:0; background:url('/assets/img/deco-wave.webp') right -40px top 50% / clamp(360px,52%,620px) auto no-repeat; opacity:.55; pointer-events:none }

/* ---------- catálogo ---------- */
.catalog{ padding-block:var(--sec) }
.catalog__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem }
.catalog__sub{ font-size:var(--fs-sm); color:var(--ink-500) }
.toolbar{ position:sticky; top:68px; z-index:20; display:flex; gap:.5rem; padding-block:.6rem; background:oklch(1 0 0 / .92); backdrop-filter:blur(10px) }
.toolbar__search{ position:relative; flex:1; display:flex; align-items:center; gap:.5rem; height:46px; padding-inline:.85rem; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-500); background:var(--paper); transition:border-color var(--t-fast) var(--e-out) }
.toolbar__search:focus-within{ border-color:var(--ink-900); color:var(--ink-900) }
.toolbar__search input{ flex:1; min-width:0; border:0; background:none; outline:none; color:var(--ink-900); font-size:.94rem }
.toolbar__search input::-webkit-search-cancel-button{ display:none }
.toolbar__clear{ display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-pill); background:var(--paper-3); color:var(--ink-700) }
.toolbar__btn{ display:inline-flex; align-items:center; gap:.45rem; height:46px; padding-inline:1rem; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.9rem; color:var(--ink-900); transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out) }
.toolbar__btn:hover{ border-color:var(--ink-900) }
.toolbar__btn:active{ transform:scale(.97) }
.toolbar__badge{ display:grid; place-items:center; min-width:20px; height:20px; padding-inline:5px; border-radius:var(--r-pill); background:var(--rose-600); color:#fff; font-size:11px; font-weight:600 }
.toolbar__sort{ display:none; align-items:center; gap:.4rem; height:46px; padding-inline:.9rem; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-700) }
.toolbar__sort select{ border:0; background:none; outline:none; font-size:.9rem; color:var(--ink-900); cursor:pointer; padding-right:.2rem }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-block:.75rem 0 }
.chip{ display:inline-flex; align-items:center; gap:.35rem; height:32px; padding-inline:.7rem; border-radius:var(--r-pill); background:var(--ink-900); color:#fff; font-size:var(--fs-xs); letter-spacing:.02em }
.chip--clear{ background:transparent; color:var(--ink-500); border:1px solid var(--line) }
.chip .ico{ width:13px; height:13px }

.grid{ display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr); margin-top:1rem }
.grid__more{ display:flex; justify-content:center; margin-top:1.6rem }
.skel{ border-radius:var(--r-card); background:linear-gradient(100deg,var(--paper-3) 30%,var(--paper-2) 48%,var(--paper-3) 62%); background-size:220% 100%; animation:shine 1.25s linear infinite }
.skel--card{ aspect-ratio:.72 }
@keyframes shine{ to{ background-position:-120% 0 } }

.empty{ grid-column:1/-1; text-align:center; padding:3rem 1rem; border:1px dashed var(--line); border-radius:var(--r-card) }
.empty h3{ font-family:var(--serif); font-size:1.3rem; font-weight:500; margin-bottom:.4rem }
.empty p{ color:var(--ink-500); font-size:var(--fs-sm); max-width:38ch; margin-inline:auto }
.empty__acts{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.1rem }

/* ---------- marcas ---------- */
.brands{ padding-block:var(--sec) }
.marquee{ margin-top:1.2rem; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marquee__row{ display:flex; gap:2.4rem; width:max-content; animation:slide 46s linear infinite }
.marquee:hover .marquee__row{ animation-play-state:paused }
.marquee a{ font-family:var(--serif); font-size:clamp(1.05rem,1rem + .6vw,1.6rem); letter-spacing:.02em; color:var(--ink-300); white-space:nowrap; transition:color var(--t-fast) var(--e-out) }
.marquee a:hover{ color:var(--rose-700) }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- editorial ---------- */
.editorial{ padding-block:var(--sec); background:var(--paper-2); border-block:1px solid var(--line-2) }
.editorial__in{ display:grid; gap:1.5rem; align-items:center }
.editorial__art{ order:-1; display:grid; place-items:center }
.editorial__art img{ width:min(260px,60%); height:auto }
.editorial__copy p{ color:var(--ink-700); margin-top:.7rem; max-width:46ch }
.ticks{ display:grid; gap:.5rem; margin:1.1rem 0 1.4rem }
.ticks li{ display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); color:var(--ink-700) }
.ticks .ico{ color:var(--rose-600) }

/* ---------- FAQ ---------- */
.faq{ padding-block:var(--sec) }
.faq__in{ max-width:760px }
.acc{ margin-top:1.2rem; border-top:1px solid var(--line) }
.acc__item{ border-bottom:1px solid var(--line) }
.acc__item summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; cursor:pointer; list-style:none; font-size:1rem; font-weight:500; color:var(--ink-900) }
.acc__item summary::-webkit-details-marker{ display:none }
.acc__item summary::after{ content:''; width:10px; height:10px; border-right:1.5px solid var(--ink-500); border-bottom:1.5px solid var(--ink-500); rotate:45deg; translate:0 -3px; transition:rotate var(--t-mid) var(--e-out) }
.acc__item[open] summary::after{ rotate:225deg; translate:0 2px }
.acc__item p{ padding-bottom:1rem; color:var(--ink-700); font-size:var(--fs-sm); max-width:66ch }

/* ---------- CTA ---------- */
.cta{ padding-block:var(--sec); background:var(--ink-900); color:#fff; position:relative; overflow:hidden }
.cta::after{ content:''; position:absolute; inset:auto -10% -60% auto; width:min(640px,80%); aspect-ratio:2/1; background:url('/assets/img/deco-wave.webp') center/contain no-repeat; opacity:.16; pointer-events:none }
.cta__in{ position:relative; text-align:center; display:grid; justify-items:center; gap:.5rem }
.cta__title{ font-family:var(--serif); font-size:var(--fs-h2); font-weight:500; letter-spacing:-.02em }
.cta__txt{ color:oklch(0.86 0.02 24); font-size:var(--fs-sm) }
.cta .btn{ margin-top:1rem }

/* ---------- footer ---------- */
.ft{ background:var(--paper-2); border-top:1px solid var(--line); padding-top:var(--sec) }
.ft__in{ display:grid; gap:2rem; padding-bottom:2rem }
.ft__brand img{ width:64px; height:64px; border-radius:var(--r-pill) }
.ft__tag{ font-family:var(--serif); font-size:1.05rem; margin-top:.6rem }
.ft__txt{ font-size:var(--fs-sm); color:var(--ink-500); margin-top:.4rem; max-width:38ch }
.ft__col h3{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); margin-bottom:.7rem }
.ft__col li{ margin-bottom:.4rem }
.ft__col a{ font-size:var(--fs-sm); color:var(--ink-700); transition:color var(--t-fast) var(--e-out) }
.ft__col a:hover{ color:var(--rose-700) }
.ft__social{ display:flex; gap:.5rem; margin-top:.8rem }
.ft__social a{ display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-700) }
.ft__social a:hover{ background:var(--ink-900); color:#fff; border-color:var(--ink-900) }
.ft__legal{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; border-top:1px solid var(--line); padding-block:1.1rem; font-size:var(--fs-xs); color:var(--ink-500); padding-bottom:calc(1.1rem + var(--safe-b) + 60px) }

/* ---------- WhatsApp flotante ---------- */
.wafab{ position:fixed; right:14px; bottom:calc(14px + var(--safe-b)); z-index:var(--z-fab); display:inline-flex; align-items:center; gap:.5rem; height:52px; padding-inline:1rem; border-radius:var(--r-pill); background:var(--wa); color:#08290f; box-shadow:var(--shadow-1); transition:transform var(--t-mid) var(--e-out), background-color var(--t-fast) var(--e-out) }
.wafab:hover{ background:var(--wa-dark); color:#fff }
.wafab:active{ transform:scale(.95) }
.wafab__txt{ font-size:.9rem; font-weight:500 }
body.has-layer .wafab{ transform:translateY(140%) }

/* ---------- capas: scrim, drawer, sheet ---------- */
.scrim{ position:fixed; inset:0; z-index:var(--z-scrim); background:oklch(0.2 0.03 30 / .48); opacity:0; transition:opacity var(--t-mid) var(--e-out); backdrop-filter:blur(2px) }
.scrim.is-on{ opacity:1 }

.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:var(--z-layer); width:min(420px,92vw); background:var(--paper); display:flex; flex-direction:column; transform:translateX(102%); transition:transform var(--t-slow) var(--e-soft); box-shadow:var(--shadow-2) }
.drawer.is-on{ transform:none }
.drawer--menu{ right:auto; left:0; transform:translateX(-102%); width:min(360px,88vw) }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1rem 1rem 1.25rem; border-bottom:1px solid var(--line); padding-top:calc(1rem + var(--safe-t)) }
.drawer__title{ font-family:var(--serif); font-size:1.25rem; font-weight:500 }
.drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem 1.25rem }
.drawer__foot{ border-top:1px solid var(--line); padding:1rem 1.25rem calc(1rem + var(--safe-b)); display:grid; gap:.55rem; background:var(--paper) }
.drawer__sum{ display:flex; align-items:baseline; justify-content:space-between; font-size:1rem }
.drawer__sum b{ font-size:1.25rem; font-weight:500; letter-spacing:-.01em }
.drawer__hint{ font-size:var(--fs-xs); color:var(--ink-500) }

.sheet{ position:fixed; inset:0; z-index:var(--z-layer); display:flex; align-items:flex-end; justify-content:center; pointer-events:none }
.sheet__panel{ pointer-events:auto; width:100%; max-height:92dvh; background:var(--paper); border-radius:22px 22px 0 0; display:flex; flex-direction:column; transform:translateY(101%); transition:transform var(--t-slow) var(--e-soft); box-shadow:var(--shadow-2); overflow:hidden }
.sheet.is-on .sheet__panel{ transform:none }
.sheet__head{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 1rem .8rem 1.25rem; border-bottom:1px solid var(--line) }
.sheet__grab{ position:absolute; top:8px; left:50%; translate:-50% 0; width:40px; height:4px; border-radius:2px; background:var(--line) }
.sheet__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem 1.25rem }
.sheet__foot{ display:flex; gap:.6rem; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:.85rem 1.25rem calc(.85rem + var(--safe-b)) }
.sheet__foot .btn--primary{ flex:1 }

/* ---------- filtros ---------- */
.fgroup{ border-bottom:1px solid var(--line-2); padding-block:.9rem }
.fgroup:last-child{ border-bottom:0 }
.fgroup__t{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); margin-bottom:.7rem }
.fopts{ display:flex; flex-wrap:wrap; gap:.4rem }
.fopt{ display:inline-flex; align-items:center; gap:.35rem; height:36px; padding-inline:.8rem; border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--ink-700); transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out) }
.fopt:hover{ border-color:var(--ink-300) }
.fopt.is-on{ background:var(--ink-900); border-color:var(--ink-900); color:#fff }
.fopt small{ opacity:.6; font-size:var(--fs-xs) }
.fscroll{ max-height:230px; overflow-y:auto; overscroll-behavior:contain; padding-right:.25rem }
.frange{ display:flex; align-items:center; gap:.6rem; margin-top:.4rem }
.frange input[type=range]{ flex:1; accent-color:var(--rose-600) }
.frange output{ font-size:var(--fs-sm); color:var(--ink-700); white-space:nowrap; min-width:9ch; text-align:right }
.fsearch{ width:100%; height:40px; padding-inline:.8rem; border:1px solid var(--line); border-radius:10px; margin-bottom:.6rem; outline:none; background:var(--paper) }
.fsearch:focus{ border-color:var(--ink-900) }

/* ---------- carrito ---------- */
.citem{ display:grid; grid-template-columns:64px 1fr auto; gap:.75rem; padding-block:.9rem; border-bottom:1px solid var(--line-2) }
.citem__img{ width:64px; height:64px; object-fit:contain; border-radius:10px; background:var(--paper-2); padding:4px }
.citem__n{ font-size:.87rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.citem__v{ font-size:var(--fs-xs); color:var(--ink-500); margin-top:.15rem }
.citem__p{ font-size:.9rem; font-weight:500; margin-top:.3rem }
.citem__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:.4rem }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); height:34px }
.qty button{ display:grid; place-items:center; width:34px; height:100%; color:var(--ink-700); border-radius:var(--r-pill) }
.qty button:hover{ color:var(--ink-900) }
.qty button:active{ transform:scale(.9) }
.qty span{ min-width:22px; text-align:center; font-size:.86rem; font-variant-numeric:tabular-nums }
.citem__del{ color:var(--ink-300); display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-pill) }
.citem__del:hover{ color:var(--rose-700); background:var(--rose-50) }

/* ---------- producto ---------- */
.pd{ display:grid; gap:1.1rem }
.pd__gal{ position:relative }
.pd__stage{ position:relative; aspect-ratio:1/1; background:var(--paper-2); border-radius:var(--r-img); overflow:hidden }
.pd__stage img{ width:100%; height:100%; object-fit:contain; padding:5% }
.pd__thumbs{ display:flex; gap:.4rem; margin-top:.5rem; overflow-x:auto; scrollbar-width:none }
.pd__thumbs::-webkit-scrollbar{ display:none }
.pd__thumb{ flex:none; width:56px; height:56px; border-radius:10px; border:1px solid var(--line); background:var(--paper-2); overflow:hidden; transition:border-color var(--t-fast) var(--e-out) }
.pd__thumb img{ width:100%; height:100%; object-fit:contain; padding:4px }
.pd__thumb.is-on{ border-color:var(--ink-900) }
.pd__brand{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500) }
.pd__name{ font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .9vw,2rem); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin-top:.3rem }
.pd__price{ display:flex; align-items:baseline; gap:.6rem; margin-top:.7rem }
.pd__price b{ font-size:1.4rem; font-weight:500; letter-spacing:-.015em }
.pd__price s{ color:var(--ink-400); font-size:.95rem }
.pd__off{ font-size:var(--fs-xs); background:var(--rose-600); color:#fff; padding:.2rem .45rem; border-radius:6px; letter-spacing:.04em }
.pd__tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem }
.tag{ font-size:var(--fs-xs); border:1px solid var(--line); border-radius:var(--r-pill); padding:.2rem .6rem; color:var(--ink-500) }
.pd__label{ display:flex; align-items:baseline; justify-content:space-between; font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); margin:1.2rem 0 .5rem }
.pd__label b{ text-transform:none; letter-spacing:0; font-size:var(--fs-sm); color:var(--ink-900); font-weight:500 }
.swatches{ display:flex; flex-wrap:wrap; gap:.45rem }
.sw{ position:relative; width:66px; border-radius:10px; border:1px solid var(--line); overflow:hidden; background:var(--paper-2); transition:border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out) }
.sw img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:4px }
.sw__n{ display:block; padding:.15rem .25rem .3rem; font-size:10px; line-height:1.2; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center }
.sw.is-on .sw__n{ color:var(--ink-900) }
.sw.is-on{ border-color:var(--ink-900); border-width:2px }
.sw:active{ transform:scale(.94) }
.sw.is-out{ opacity:.4; cursor:not-allowed }
.sw.is-out::after{ content:''; position:absolute; inset:0 0 22px 0; background:linear-gradient(to top right,transparent 47%,var(--ink-500) 47%,var(--ink-500) 53%,transparent 53%) }
.swtxt{ display:inline-flex; align-items:center; height:38px; padding-inline:.85rem; border:1px solid var(--line); border-radius:var(--r-pill); font-size:var(--fs-sm) }
.swtxt.is-on{ background:var(--ink-900); border-color:var(--ink-900); color:#fff }
.swtxt.is-out{ opacity:.42; text-decoration:line-through }
.pd__buy{ display:flex; gap:.5rem; align-items:center; margin-top:1.2rem }
.pd__buy .btn{ flex:1 }
.pd__desc{ margin-top:1.4rem; font-size:var(--fs-sm); color:var(--ink-700); line-height:1.6; white-space:pre-line }
.pd__feats{ display:grid; gap:.4rem; margin-top:.9rem }
.pd__feats li{ display:flex; gap:.5rem; font-size:var(--fs-sm); color:var(--ink-700) }
.pd__feats .ico{ color:var(--rose-600); margin-top:.2rem }
.pd__block{ margin-top:1.2rem; border-top:1px solid var(--line-2); padding-top:1rem }
.pd__block h4{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); margin-bottom:.4rem }
.pd__rel{ margin-top:1.6rem }
.pd__rel .rail__track{ padding-inline:0 }

/* ---------- buscador ---------- */
.searchbox{ position:fixed; inset:0; z-index:var(--z-layer); display:flex; justify-content:center; align-items:flex-start; pointer-events:none }
.searchbox__panel{ pointer-events:auto; width:100%; max-width:720px; max-height:100dvh; background:var(--paper); display:flex; flex-direction:column; transform:translateY(-14px); opacity:0; transition:transform var(--t-mid) var(--e-out), opacity var(--t-mid) var(--e-out) }
.searchbox.is-on .searchbox__panel{ transform:none; opacity:1 }
.searchbox__bar{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; padding-top:calc(.8rem + var(--safe-t)); border-bottom:1px solid var(--line); color:var(--ink-500) }
.searchbox__bar input{ flex:1; min-width:0; border:0; outline:none; background:none; font-size:1.05rem; color:var(--ink-900) }
.searchbox__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:.5rem 1rem 2rem }
.sres{ display:flex; gap:.75rem; align-items:center; padding:.55rem 0; border-bottom:1px solid var(--line-2); width:100% ; text-align:left }
.sres img{ width:52px; height:52px; object-fit:contain; border-radius:8px; background:var(--paper-2); padding:3px; flex:none }
.sres__n{ font-size:.9rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sres__b{ font-size:var(--fs-xs); color:var(--ink-500); letter-spacing:.08em; text-transform:uppercase }
.sres__p{ margin-left:auto; font-size:.9rem; font-weight:500; white-space:nowrap }
.shint{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); margin:1rem 0 .5rem }

/* ---------- toasts + prueba social ---------- */
.toasts{ position:fixed; left:50%; translate:-50% 0; top:calc(80px + var(--safe-t)); z-index:var(--z-toast); display:grid; gap:.4rem; width:min(420px,calc(100vw - 24px)); pointer-events:none }
.toast{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:12px; background:var(--ink-900); color:#fff; font-size:var(--fs-sm); box-shadow:var(--shadow-1); animation:toastIn 260ms var(--e-out) }
.toast img{ width:34px; height:34px; object-fit:contain; border-radius:8px; background:oklch(1 0 0 / .12); padding:2px }
.toast.is-out{ animation:toastOut 220ms var(--e-out) forwards }
@keyframes toastIn{ from{ transform:translateY(-12px); opacity:0 } }
@keyframes toastOut{ to{ transform:translateY(-8px); opacity:0 } }

.proof{ position:fixed; left:12px; right:12px; bottom:calc(80px + var(--safe-b)); z-index:var(--z-fab); pointer-events:none }
.pcard{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:14px; background:oklch(1 0 0 / .95); border:1px solid var(--line); box-shadow:var(--shadow-1); backdrop-filter:blur(8px); pointer-events:auto; transform:translateY(14px); opacity:0; transition:transform var(--t-slow) var(--e-soft), opacity var(--t-slow) var(--e-out) }
.pcard.is-on{ transform:none; opacity:1 }
.pcard img{ width:40px; height:40px; object-fit:contain; border-radius:9px; background:var(--paper-2); padding:3px; flex:none }
.pcard__t{ font-size:var(--fs-xs); color:var(--ink-500) }
.pcard__n{ font-size:.8rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-900) }
.pcard__x{ margin-left:auto; color:var(--ink-300); width:26px; height:26px; display:grid; place-items:center; border-radius:var(--r-pill); flex:none }
.pcard__x:hover{ color:var(--ink-900); background:var(--paper-3) }

/* ---------- páginas internas ---------- */
.page__head{ padding-block:2rem 1rem; border-bottom:1px solid var(--line-2) }
.page__crumbs{ font-size:var(--fs-xs); color:var(--ink-500); display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem }
.page__crumbs a:hover{ color:var(--rose-700) }
.page__title{ font-family:var(--serif); font-size:var(--fs-h2); font-weight:500; letter-spacing:-.02em }
.page__sub{ font-size:var(--fs-sm); color:var(--ink-500); margin-top:.3rem }
.subnav{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; margin-top:1rem; padding-bottom:.2rem }
.subnav::-webkit-scrollbar{ display:none }

/* ---------- menú móvil ---------- */
.mnav{ display:grid; gap:.1rem }
.mnav a{ display:flex; align-items:center; justify-content:space-between; padding:.85rem .25rem; border-bottom:1px solid var(--line-2); font-size:1rem }
.mnav a .ico{ color:var(--ink-300) }
.mnav__t{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); margin:1.4rem 0 .3rem }
.mnav__cta{ margin-top:1.4rem; display:grid; gap:.5rem }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:480px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:.85rem }
  .rail .card{ width:220px }
}
@media (min-width:640px){
  .grid{ grid-template-columns:repeat(3,1fr) }
  .toolbar__sort{ display:inline-flex }
  .promo__in{ grid-template-columns:1.1fr .9fr; align-items:center }
  .cat{ width:152px }
  .editorial__in{ grid-template-columns:.8fr 1.2fr }
  .editorial__art{ order:0 }
  .editorial__art img{ width:min(340px,100%) }
  .sheet{ align-items:center; padding:2rem }
  .sheet__panel{ max-width:940px; border-radius:20px; max-height:88dvh; transform:translateY(18px) scale(.985); opacity:0; transition:transform var(--t-slow) var(--e-soft), opacity var(--t-mid) var(--e-out) }
  .sheet.is-on .sheet__panel{ transform:none; opacity:1 }
  .sheet__grab{ display:none }
  .sheet__head{ padding-top:1rem }
  .pd{ grid-template-columns:1fr 1fr; gap:1.8rem; align-items:start }
  .searchbox__panel{ margin-top:8vh; border-radius:18px; max-height:80dvh; box-shadow:var(--shadow-2) }
  .searchbox__bar{ padding-top:.8rem }
}
@media (min-width:900px){
  html{ scroll-padding-top:84px }
  .topbar__msg--alt{ display:flex }
  .topbar__in{ justify-content:space-between }
  .hdr__btn--menu{ display:none }
  .nav{ display:flex }
  .brand{ margin-right:0 }
  .hdr__actions{ margin-left:auto }
  .hdr__in{ gap:1.5rem }
  .grid{ grid-template-columns:repeat(4,1fr); gap:1rem }
  .shelf__nav{ display:flex }
  .hero{ align-items:center; min-height:clamp(560px,84svh,820px) }
  .hero__in{ padding-block:2rem }
  .hero__poster,.hero__video{ object-position:60% 30% }
  .hero__scrim{ background:
      linear-gradient(to right, oklch(0.20 0.03 30 / .74) 0%, oklch(0.20 0.03 30 / .42) 42%, oklch(0.20 0.03 30 / 0) 72%),
      linear-gradient(to top, oklch(0.20 0.03 30 / .28), transparent 40%) }
  .hero__cue{ display:grid }
  .cat{ width:178px }
  .strip__item{ flex-direction:row; align-items:center; text-align:left; justify-content:flex-start; font-size:var(--fs-sm); gap:.55rem }
  .ft__in{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem }
  .ft__legal{ padding-bottom:1.1rem }
  .wafab{ right:22px; bottom:22px }
  .proof{ left:22px; right:auto; bottom:22px; width:320px }
  .toasts{ left:auto; right:22px; translate:none; top:auto; bottom:88px }
  @keyframes toastIn{ from{ transform:translateY(12px); opacity:0 } }
  @keyframes toastOut{ to{ transform:translateY(8px); opacity:0 } }
}
@media (min-width:1200px){
  .grid{ grid-template-columns:repeat(5,1fr) }
  .rail .card{ width:236px }
}
@media (min-width:1600px){
  :root{ --wrap:1480px }
  .grid{ grid-template-columns:repeat(6,1fr) }
}

/* ---------- accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .marquee__row{ animation:none; width:auto; flex-wrap:wrap; justify-content:center }
  .hero__video{ display:none }
}