@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&display=swap');

:root{
  /* Tema claro. Nombres semánticos: --bg es el fondo, --fg la tinta. */
  --bg:#FFFFFF;
  --bg-2:#F6F3EF;
  --bg-3:#ECE6DF;
  --fg:#110E0E;
  --fg-dim:#4B4541;
  --muted:#8E867F;
  --pink:#F0389B;
  --line:rgba(17,14,14,.12);
  --on-dark:#F2EFE9;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink);color:#fff}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.005em;margin:0}
.eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--pad);
  background:rgba(255,255,255,.84);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;gap:clamp(14px,2.4vw,32px);align-items:center}
.nav__links a{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);
  padding:4px 0;border-bottom:1px solid transparent;transition:color .5s,border-color .5s;
}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--fg);border-color:var(--pink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,860px);display:grid;place-items:center;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;background:
  linear-gradient(96deg,
    rgba(10,10,10,.95) 0%,
    rgba(10,10,10,.90) 22%,
    rgba(10,10,10,.55) 36%,
    rgba(10,10,10,0) 52%)}
.hero__in{position:relative;z-index:2;width:100%;padding:0 var(--pad);max-width:1500px}
.hero__mark{width:min(340px,62vw);margin-bottom:26px}
.hero h1{font-size:clamp(36px,6.6vw,78px);line-height:1.04;max-width:12ch}
.hero h1 em{font-style:italic;color:var(--pink)}
.hero p{color:var(--fg-dim);max-width:44ch;margin:20px 0 34px;font-size:clamp(15px,1.5vw,17px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;border:1px solid var(--fg);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .55s,color .55s,border-color .55s;
}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn--pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn--pink:hover{background:#ff5cb0;border-color:#ff5cb0;color:#fff}
.btn--block{width:100%;justify-content:center}
.btn[disabled],.btn.is-off{opacity:.4;pointer-events:none}

/* ---------- layout ---------- */
.wrap{padding:clamp(64px,9vw,132px) var(--pad);max-width:1500px;margin:0 auto}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4vw,56px);flex-wrap:wrap}
.sechead h2{font-size:clamp(28px,4vw,46px)}
.sechead p{color:var(--muted);margin:8px 0 0;max-width:46ch}

.grid{display:grid;gap:clamp(18px,2.4vw,38px);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid--wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* ---------- card ---------- */
.card{display:block;position:relative}
.card__img{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:1/1}
.card__img img{width:100%;height:100%!important;object-fit:cover;transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.card:hover .card__img img{transform:scale(1.045)}
.card__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--pink);color:#fff;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 10px;
}
.card__body{display:flex;justify-content:space-between;gap:16px;padding:16px 2px 0}
.card__name{font-family:var(--serif);font-size:19px;line-height:1.3}
.card__meta{color:var(--muted);font-size:12px;letter-spacing:.06em;margin-top:3px}
.card__price{font-size:13px;letter-spacing:.08em;white-space:nowrap;padding-top:4px}
.card:hover .card__name{color:var(--pink);transition:color .5s}

/* ---------- collection strip ---------- */
.coll{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,32px)}
.coll a{position:relative;display:block;overflow:hidden;aspect-ratio:16/11;background:var(--bg-2)}
.coll img{width:100%;height:100%!important;object-fit:cover;opacity:.72;transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity .8s}
.coll a:hover img{transform:scale(1.05);opacity:.92}
.coll__t{position:absolute;inset:auto 0 0 0;padding:26px;z-index:2}
.coll__t h3{font-size:clamp(24px,3vw,34px);color:var(--on-dark)}
.coll__t span{color:rgba(242,239,233,.78);font-size:13px}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.5vw,80px);align-items:start}
.pdp__media img{width:100%;height:auto;background:var(--bg-2);aspect-ratio:1/1}
.pdp__info{position:sticky;top:96px}
.pdp h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08;margin:10px 0 14px}
.pdp__price{font-size:19px;letter-spacing:.06em;margin-bottom:26px}
.pdp__desc{color:var(--fg-dim);margin:0 0 30px}
.spec{border-top:1px solid var(--line);padding:13px 0;display:flex;gap:20px;font-size:13px}
.spec dt{color:var(--muted);flex:0 0 118px;margin:0}
.spec dd{margin:0;color:var(--fg-dim)}

.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 26px}
.size{
  min-width:52px;padding:11px 6px;text-align:center;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--fg-dim);
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  transition:border-color .35s,color .35s,background .35s;
}
.size:hover{border-color:var(--fg-dim);color:var(--fg)}
.size[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.hint{font-size:12px;color:var(--muted);margin:12px 0 0;min-height:18px}

/* La barra fija de compra es solo de teléfono. Fuera de ahí no existe. */
.stickybuy{display:none}

/* ---------- notice ---------- */
.notice{
  border:1px dashed var(--pink);color:var(--pink);
  padding:12px 16px;font-size:12px;letter-spacing:.06em;margin-bottom:26px;
}

/* ---------- about / video ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.about video{width:100%;background:var(--bg-2)}
.about h1{font-size:clamp(32px,5vw,60px);line-height:1.06;margin-bottom:22px}
.about p{color:var(--fg-dim);margin:0 0 18px;max-width:52ch}

/* ---------- prose ---------- */
.prose{max-width:660px}
.prose h1{font-size:clamp(30px,4.6vw,52px);margin-bottom:26px}
.prose h2{font-size:24px;margin:44px 0 12px}
.prose p,.prose li{color:var(--fg-dim)}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 8px;text-align:left}
.prose th{color:var(--muted);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.filter{
  padding:9px 18px;border:1px solid var(--line);background:none;color:var(--fg-dim);
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:border-color .4s,color .4s,background .4s;
}
.filter:hover{border-color:var(--fg-dim);color:var(--fg)}
.filter[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) var(--pad) 40px}
.foot__in{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot img{height:44px;width:auto;margin-bottom:14px}
.foot h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot a{color:var(--fg-dim);font-size:14px;transition:color .4s}
.foot a:hover{color:var(--pink)}
.foot__base{max-width:1500px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;letter-spacing:.05em}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .pdp,.about,.foot__in{grid-template-columns:1fr}
  .pdp__info{position:static}
  .about{gap:30px}
}

/* ============ MÓVIL ============ */
@media (max-width:760px){
  :root{--pad:18px}
  body{font-size:15.5px}

  .nav{flex-direction:column;gap:10px;padding:13px 0 0}
  .nav__logo{padding:0 var(--pad)}
  .nav__logo img{height:32px}
  .nav__links{
    width:100%;gap:0;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:0 var(--pad);
    border-top:1px solid var(--line);
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{
    flex:0 0 auto;font-size:11px;letter-spacing:.14em;
    padding:13px 14px;border-bottom:2px solid transparent;
  }
  .nav__links a:first-child{padding-left:0}

  /* en el teléfono el texto NO se encima al producto: se apila */
  .hero{min-height:auto;display:flex;flex-direction:column;overflow:visible}
  .hero__media{position:static;order:1}
  .hero__fallback{position:static}
  .hero__media #heroGL{display:none}
  .hero__img{position:static;width:100%;height:auto!important;aspect-ratio:4/5}
  .hero::after{display:none}
  .hero__in{position:static;order:-1;padding:26px var(--pad) 30px}
  .hero__mark{width:min(225px,56vw);margin-bottom:16px}
  .hero h1{font-size:clamp(30px,8.6vw,42px);max-width:15ch}
  .hero p{margin:13px 0 22px;font-size:14.5px;max-width:36ch}

  .wrap{padding:52px var(--pad)}
  .sechead{margin-bottom:24px}
  .sechead .btn{display:none}

  /* dos columnas: se navega mejor que una sola gigante */
  .grid,.grid--wide{grid-template-columns:repeat(2,1fr);gap:12px 10px}
  .card__body{padding:11px 0 0;flex-direction:column;gap:3px}
  .card__name{font-size:15px;line-height:1.28}
  .card__meta{font-size:10.5px;letter-spacing:.04em}
  .card__price{font-size:12px;padding-top:2px}
  .card__tag{top:8px;left:8px;font-size:8px;padding:4px 7px}

  .coll{grid-template-columns:1fr;gap:12px}
  .coll a{aspect-ratio:3/2}
  .coll__t{padding:18px}

  /* ficha: imagen a sangre completa */
  .pdp{gap:22px}
  .pdp__media{margin:0 calc(var(--pad) * -1);width:100vw}
  .pdp h1{font-size:clamp(26px,7.4vw,36px)}
  .pdp__price{font-size:17px;margin-bottom:20px}
  .spec{padding:11px 0;font-size:12.5px}
  .spec dt{flex:0 0 92px}

  /* objetivos táctiles de 48px */
  .sizes{gap:7px}
  .size{min-width:52px;min-height:48px;padding:0 8px;line-height:48px}
  .filter{min-height:44px;padding:0 16px;line-height:44px}
  .btn{padding:0 24px;min-height:52px;line-height:52px}

  /* barra fija de WhatsApp: lo que de verdad convierte en el teléfono */
  .pdp .btn--block{display:none}
  .stickybuy{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;gap:10px;align-items:center;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .stickybuy .lbl{flex:1;min-width:0;font-size:12px;color:var(--fg-dim);line-height:1.35}
  .stickybuy .lbl b{display:block;color:var(--fg);font-weight:400;font-size:13px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stickybuy .btn{flex:0 0 auto;min-height:46px;line-height:46px;padding:0 20px;font-size:11px}
  body:has(.stickybuy) .foot{padding-bottom:96px}

  .about{gap:22px}
  .about h1{font-size:clamp(28px,7.6vw,38px)}
  .prose h1{font-size:clamp(27px,7.4vw,36px)}
  .prose table{font-size:13px}
  .prose th,.prose td{padding:9px 5px}

  .foot__in{gap:28px}
  .foot__base{flex-direction:column;gap:7px;margin-top:30px}
}

@media (max-width:339px){
  .grid,.grid--wide{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================
   MOVIMIENTO
   ========================================================== */

/* Todo es visible por defecto. Solo se oculta cuando el script en línea
   confirmó que hay JS y que el usuario acepta movimiento (.js-motion).
   Si GSAP no carga, si falla, o si el navegador bloquea scripts,
   la tienda se ve completa. Nunca una sección en blanco. */
.js-motion [data-reveal]{opacity:0}
.js-motion [data-reveal="mask"]{opacity:1;clip-path:inset(100% 0% 0% 0%)}
.js-motion [data-stagger] > *{opacity:0}
.js-motion .hero__mark,.js-motion .hero h1,
.js-motion .hero p,.js-motion .hero .btn{opacity:0}

/* palabras partidas */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.w__i{display:inline-block;will-change:transform}

/* ---------- cortina de entrada ---------- */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;gap:22px;grid-auto-flow:row;
}
.curtain__mark{width:min(280px,58vw);opacity:0;transform:translateY(16px)}
.curtain__bar{width:min(220px,44vw);height:1px;background:var(--line);overflow:hidden}
.curtain__bar i{display:block;height:100%;background:var(--pink);transform:scaleX(0);transform-origin:left}
.curtain{display:none}
.js-motion .curtain{display:grid}

/* ---------- limpiaparabrisas entre páginas ---------- */
.wipe{
  position:fixed;inset:0;z-index:190;background:var(--pink);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
}

/* ---------- cursor ---------- */
@media (hover:hover) and (pointer:fine){
  .cursor{
    position:fixed;top:0;left:0;z-index:180;pointer-events:none;
    width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
    background:var(--pink);mix-blend-mode:normal;
    display:grid;place-items:center;
    transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),
               margin .45s cubic-bezier(.16,1,.3,1),background .4s;
  }
  .cursor__l{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
    opacity:0;transition:opacity .3s;white-space:nowrap;
  }
  .cursor.is-on{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(240,56,155,.35)}
  .cursor.is-big{width:82px;height:82px;margin:-41px 0 0 -41px;background:rgba(240,56,155,.92)}
  .cursor.is-big .cursor__l{opacity:1}
  .no-motion .cursor{display:none}
}

/* ---------- hero con lienzo WebGL ---------- */
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media #heroGL{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1s ease;
}
.hero__media #heroGL.is-live{opacity:1}
.hero__fallback{position:absolute;inset:0;transition:opacity .8s ease}
.hero__fallback img{width:100%;height:100%!important;object-fit:cover}

/* pila de imágenes para el fundido de teléfono */
.hero__stack{position:absolute;inset:0}
.hero__stack img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;opacity:0}
.hero__stack img:first-child{opacity:1}

/* ---------- marquesina ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.marquee__in{display:flex;gap:0;width:max-content;will-change:transform}
.marquee__in span{
  font-family:var(--serif);font-size:clamp(28px,4.6vw,64px);line-height:1;
  padding:0 clamp(18px,2.6vw,42px);white-space:nowrap;color:var(--fg);
}
.marquee__in span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--muted);font-style:italic}

/* marquesina de fotos */
.mphoto{overflow:hidden;padding:6px 0}
.mphoto__in{display:flex;gap:14px;width:max-content;will-change:transform}
.mphoto__in a{flex:0 0 auto;width:clamp(180px,22vw,300px);aspect-ratio:1/1;overflow:hidden;background:var(--bg-2)}
.mphoto__in img{width:100%;height:100%!important;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.mphoto__in a:hover img{transform:scale(1.07)}

/* ---------- carrusel horizontal fijado ---------- */
.rail{overflow:hidden}
.rail__vp{min-height:100vh;display:flex;align-items:center}
.rail__track{display:flex;gap:clamp(20px,3vw,54px);padding:0 var(--pad);will-change:transform}
.rail__item{flex:0 0 auto;width:clamp(260px,30vw,440px);will-change:transform}
.rail__item .card__img{aspect-ratio:1/1}
.rail__head{
  flex:0 0 auto;width:clamp(280px,26vw,420px);
  display:flex;flex-direction:column;justify-content:center;padding-right:clamp(10px,2vw,30px);
}
.rail__head h2{font-size:clamp(34px,5vw,62px);line-height:1.03;margin:10px 0 16px}
.rail__head p{color:var(--muted);margin:0 0 22px;max-width:32ch}
.rail__hint{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px}
.rail__hint::after{content:'';width:44px;height:1px;background:var(--pink)}

@media (max-width:899px){
  .rail__vp{min-height:auto;padding:0}
  .rail__track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:8px;
  }
  .rail__track::-webkit-scrollbar{display:none}
  .rail__item{width:74vw;scroll-snap-align:center}
  .rail__head{width:100%;padding:0 0 26px}
  .rail{padding:0}
  .rail__vp{flex-direction:column;align-items:stretch;gap:0}
}

/* ---------- ficha: inclinación ---------- */
[data-tilt]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .curtain,.wipe,.cursor{display:none!important}
  .marquee__in,.mphoto__in{transform:none!important}
}

/* Anulaciones de teléfono AL FINAL: las reglas de movimiento de arriba
   vuelven a poner .hero__media en absoluto y el texto se encimaría. */
@media (max-width:760px){
  .hero__media{position:static;order:1;overflow:visible}
  .hero__fallback{position:static;opacity:1!important;visibility:visible!important}
  .hero__media #heroGL{display:none}
  .hero__in{order:-1}
  .marquee__in span{font-size:clamp(26px,9vw,42px);padding:0 16px}
  .mphoto__in a{width:62vw}
  .mphoto__in{gap:10px}
}

/* ==========================================================
   CAPA EDITORIAL — patrones, grano y detalle de imprenta
   ========================================================== */

:root{
  --gold:#C89A3E;
  --pink-dim:rgba(240,56,155,.22);
}

/* Grano sobre TODA la página. Es lo que mata el look de vector limpio
   y hace que se lea impresa en vez de generada. */
body::after{
  content:'';position:fixed;inset:0;z-index:120;pointer-events:none;
  background:url(/noise.png) repeat;background-size:140px 140px;
  opacity:.075;mix-blend-mode:multiply;
}

/* ---------- patrones de fondo, hechos en CSS (cero peticiones) ---------- */
.pat{position:relative;isolation:isolate}
.pat::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}

/* rejilla de puntos rosa sobre negro */
.pat--dots::before{
  background-image:radial-gradient(var(--pink-dim) 1.4px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
/* rayas diagonales finísimas */
.pat--stripe::before{
  background-image:repeating-linear-gradient(-45deg,
    rgba(17,14,14,.05) 0 1px, transparent 1px 9px);
}
/* rejilla técnica */
.pat--grid::before{
  background-image:
    linear-gradient(rgba(17,14,14,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,14,14,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}
/* resplandor rosa: da profundidad al negro plano */
.pat--glow::before{
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(240,56,155,.13), transparent 70%),
    radial-gradient(50% 45% at 92% 100%, rgba(200,154,62,.09), transparent 72%);
}

/* ---------- filete de imprenta entre secciones ---------- */
.rule{
  display:flex;align-items:center;gap:16px;
  padding:0 var(--pad);max-width:1500px;margin:0 auto;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.rule::before,.rule::after{content:'';height:1px;background:var(--line);flex:1}

/* ---------- tarjeta editorial ---------- */
.card__img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.10);
}
.card__no{
  position:absolute;top:12px;right:14px;z-index:2;
  font-family:var(--serif);font-size:15px;font-style:italic;
  color:rgba(10,10,10,.42);
}
.card--dark .card__no{color:rgba(242,239,233,.45)}
.card__body{align-items:flex-start}
.card__name{transition:color .5s}
.card__rule{height:1px;background:var(--line);margin:14px 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover .card__rule{transform:scaleX(1)}

/* etiqueta tipo boleto */
.card__tag{
  background:var(--bg);color:var(--fg);border:1px solid var(--fg);
  font-size:8.5px;letter-spacing:.2em;padding:5px 9px;
}

/* ---------- colecciones: sobre-tipografía editorial ---------- */
.coll a::after{
  content:'';position:absolute;inset:14px;border:1px solid rgba(242,239,233,.22);
  pointer-events:none;opacity:0;transition:opacity .7s,inset .7s cubic-bezier(.16,1,.3,1);
}
.coll a:hover::after{opacity:1;inset:22px}
.coll__t{
  background:linear-gradient(0deg,rgba(10,10,10,.86),rgba(10,10,10,.35) 55%,transparent);
  padding:52px 26px 26px;
}
.coll__n{
  position:absolute;top:20px;left:26px;z-index:2;
  font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(242,239,233,.6);
}

/* ---------- ficha: sello y detalle ---------- */
.pdp__media{position:relative}
.pdp__seal{
  position:absolute;top:18px;left:18px;z-index:2;
  display:flex;align-items:center;gap:8px;
  background:rgba(10,10,10,.82);backdrop-filter:blur(8px);
  color:var(--on-dark);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 13px;
}
.pdp__seal i{width:5px;height:5px;border-radius:50%;background:var(--pink);font-style:normal}

/* ---------- marquesina sobre patrón ---------- */
.marquee{background:var(--bg-2);position:relative;overflow:hidden}
.marquee__in span:nth-child(even){-webkit-text-stroke:1px var(--pink);color:transparent}

/* ---------- rail: número gigante de fondo ---------- */
.rail__head{position:relative}
.rail__ghost{
  position:absolute;left:-4px;top:-38px;z-index:-1;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(120px,17vw,240px);line-height:.8;
  color:rgba(240,56,155,.10);pointer-events:none;user-select:none;
}

/* ---------- pie con patrón ---------- */
.foot{position:relative;isolation:isolate}

@media (max-width:760px){
  body::after{opacity:.04}
  .rail__ghost{font-size:110px;top:-24px}
  .coll__t{padding:40px 18px 18px}
  .coll__n{top:14px;left:18px;font-size:16px}
}

/* ==========================================================
   HERO EN DOS COLUMNAS (tema claro)
   Sobre blanco, el velo oscuro que hacía legible el texto se volvía
   gris lodoso encima de los carteles oscuros. En columnas no hace falta velo.
   Va al final del archivo a propósito: las reglas de movimiento de arriba
   ponen .hero__media en absoluto.
   ========================================================== */
.hero::after{display:none}
@media (min-width:761px){
  .hero{
    display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    align-items:stretch;place-items:stretch;
    min-height:min(90vh,880px);background:var(--bg);
  }
  .hero__in{
    grid-column:1;grid-row:1;align-self:center;
    max-width:none;padding:48px clamp(24px,4vw,64px) 48px var(--pad);
  }
  .hero__media{
    position:relative;inset:auto;grid-column:2;grid-row:1;
    margin:clamp(12px,1.4vw,22px) clamp(12px,1.4vw,22px) clamp(12px,1.4vw,22px) 0;
    overflow:hidden;background:var(--bg-2);
  }
  .hero__media::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .hero h1{max-width:11ch}
  .hero p{color:var(--fg-dim)}
}

/* ==========================================================
   BANDA DE CINE
   El marco arranca recortado y se abre a pantalla completa al bajar.
   Sin JS se ve abierto: el recorte solo existe bajo .js-motion.
   ========================================================== */
.film{position:relative;padding:clamp(40px,6vw,96px) 0;background:var(--bg);overflow:hidden}
.film__frame{
  position:relative;width:100%;aspect-ratio:1920/1012;max-height:92vh;
  overflow:hidden;background:var(--bg-2);will-change:clip-path;
}
.js-motion .film__frame{clip-path:inset(9% 14% round 6px)}
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* franjas de pantalla ancha: el guiño a cine */
.film__bar{position:absolute;left:0;right:0;height:7%;background:var(--fg);z-index:2;
  transform:scaleY(0);pointer-events:none}
.film__bar--t{top:0;transform-origin:top}
.film__bar--b{bottom:0;transform-origin:bottom}
.film__copy{
  position:absolute;z-index:3;left:var(--pad);
  top:calc(clamp(40px,6vw,96px) + 11%);pointer-events:none;
}
.film__copy .eyebrow{white-space:nowrap}
.film__title{font-size:clamp(40px,6.6vw,104px);line-height:.96;color:var(--fg);margin-top:10px;max-width:9ch;
  text-shadow:0 0 42px rgba(255,255,255,.75),0 0 12px rgba(255,255,255,.5)}
.film__title em{color:var(--pink);font-style:italic}
.film__meta{
  position:absolute;z-index:3;right:var(--pad);bottom:calc(clamp(40px,6vw,96px) + 10%);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);
}
.film__rec{display:flex;align-items:center;gap:8px;color:var(--fg)}
.film__rec i{width:7px;height:7px;border-radius:50%;background:#E3245C;
  animation:rec 1.3s steps(2,jump-none) infinite}
@keyframes rec{50%{opacity:0}}

@media (max-width:760px){
  .film{padding:36px 0 44px;display:flex;flex-direction:column}
  .film__frame{aspect-ratio:16/10;max-height:none}
  .js-motion .film__frame{clip-path:inset(4% 6% round 4px)}
  .film__copy{position:static;order:-1;padding:0 var(--pad) 18px;max-width:none}
  .film__title{font-size:clamp(34px,10vw,48px)}
  .film__meta{position:static;flex-direction:row;justify-content:space-between;
    padding:12px var(--pad) 0;align-items:center}
}
@media (prefers-reduced-motion:reduce){.film__rec i{animation:none}}

/* ==========================================================
   INTRO DE VIDEO (solo home, una vez por sesión)
   Oculta por defecto: solo existe si el script del <head> puso .intro-on.
   Sin JS, la tienda entra directo.
   ========================================================== */
.intro{display:none}
.intro-on .intro{
  display:block;position:fixed;inset:0;z-index:300;background:#0B1224;overflow:hidden;
  transition:opacity .95s cubic-bezier(.4,0,.2,1), transform 1.15s cubic-bezier(.2,.7,.2,1), filter .95s ease;
}
.intro-lock,.intro-lock body{overflow:hidden;height:100%}
.intro-on .curtain{display:none!important}
.intro__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* salida: la cámara "sigue avanzando" hacia la página y se funde a blanco */
.intro.is-out{opacity:0;transform:scale(1.08);filter:brightness(1.35) saturate(.9);pointer-events:none}

.intro__ui{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:clamp(18px,3vw,40px) var(--pad);
  background:linear-gradient(0deg,rgba(8,10,20,.45),transparent);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease .3s, transform .8s cubic-bezier(.2,.7,.2,1) .3s;
}
.intro.is-playing .intro__ui{opacity:1;transform:none}
.intro__mark{height:clamp(30px,3.4vw,46px);width:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.intro__skip{
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55);padding:12px 20px;min-height:44px;cursor:pointer;
  transition:background .4s,color .4s,border-color .4s;
}
.intro__skip:hover,.intro__skip:focus-visible{background:#fff;color:var(--fg);border-color:#fff;outline:none}
.intro__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18);z-index:3}
.intro__bar i{display:block;height:100%;background:var(--pink);transform:scaleX(0);transform-origin:left;
  transition:transform .25s linear}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}

/* separador entre pagar con tarjeta y pedir por WhatsApp */
.or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.or::before,.or::after{content:'';height:1px;background:var(--line);flex:1}