/* ===================================================================
   MBOPI CLUB — design system compartido (una sola fuente de verdad).
   Reglas idénticas en las 4 páginas, extraídas sin tocar el diseño.
   Tokens en :root · cambiar el rojo / cualquier token = un solo lugar.
   Reglas que difieren entre páginas quedan inline en cada .html.
   =================================================================== */

:root{
  /* ============================================================
     MBOPI CLUB — DROP ROOM · hereda tokens de Fundaciones (DROP VAULT)
     REGLA DEL COLOR: el ROJO es la firma — manda en el campo del hero,
     CTA, badges, hover, tallas y la marca. El NEGRO carga la grilla de
     producto para que las prendas respiren. Nunca rojo en todo.
     ============================================================ */

  /* Superficies — grafito / tinta */
  --ink:    #0c0c0d;
  --ink-1:  #131316;
  --ink-2:  #1b1b1f;
  --ink-3:  #26262b;

  /* Firma — sangre / bermellón */
  --red:        #c8102e;
  --red-deep:   #8c0a1f;
  --red-bright: #ff2038;
  --red-rgb:    200,16,46;

  /* Texto — escalera de hueso */
  --bone:     #f3efe7;
  --bone-dim: #cbc6bc;
  --ash:      #79766f;

  /* Líneas */
  --hair:        rgba(243,239,231,.12);
  --hair-strong: rgba(243,239,231,.26);

  /* Tipografía */
  --font-display: 'Anton','Archivo Narrow','Arial Narrow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:    -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:    ui-monospace,'SFMono-Regular','JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace;
  --disp-stretch: 75%;
  --disp-weight:  800;

  /* Escala tipográfica — mobile-first, fluida */
  --t-xl:   clamp(3.4rem, 15vw, 8.4rem);
  --t-l:    clamp(2rem, 8vw, 4.4rem);
  --t-m:    clamp(1.45rem, 5vw, 2.3rem);
  --t-s:    clamp(1.02rem, 3.2vw, 1.25rem);
  --t-body: clamp(1rem, 2.6vw, 1.06rem);

  /* Ritmo */
  --pad:  clamp(20px, 5.2vw, 60px);
  --gap:  clamp(16px, 3.2vw, 28px);
  --maxw: 1160px;
  --barh: 52px;
  --wah:  60px;

  /* Forma — filo de calle */
  --r: 2px;

  /* Grano de película/papel — vivo */
  --grain-op: .15;
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Movimiento */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.45,0,.55,1);
  --ease-sharp: cubic-bezier(.19,1,.22,1);   /* asentado decisivo — firma del hero */
  --dur-1: .18s; --dur-2: .42s; --dur-3: .9s;

  /* Sombras — en capas (negro profundo + brillo rojo) */
  --shadow:     0 24px 50px -24px rgba(0,0,0,.85), 0 8px 22px -14px rgba(0,0,0,.6);
  --shadow-red: 0 26px 56px -22px rgba(0,0,0,.88), 0 0 0 1px rgba(var(--red-rgb),.22), 0 22px 64px -20px rgba(var(--red-rgb),.42);
  /* tokens propios de páginas puntuales, unificados acá — no colisionan entre sí */
  --dur-flip: .52s;      /* morph del re-flujo de la grilla (tienda) */
  --filth: 0px;          /* alto real de la barra de filtros, set por JS (tienda) */
  --rbh:  72px;          /* barra de reserva fija en mobile (pieza) */
}

/* ---------- base ---------- */

*{box-sizing:border-box;}

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

/* grano global vivo — parpadeo de película por pasos (transform-only) */

body::after{
  content:''; position:fixed; inset:-24px; z-index:6; pointer-events:none;
  background-image:var(--grain-url); background-size:150px 150px;
  mix-blend-mode:overlay; opacity:var(--grain-op);
  animation:grain .55s steps(1,end) infinite; will-change:transform;
}

@keyframes grain{
  0%{transform:translate3d(0,0,0);}      12%{transform:translate3d(-6px,4px,0);}
  24%{transform:translate3d(5px,-5px,0);} 36%{transform:translate3d(-4px,-6px,0);}
  48%{transform:translate3d(6px,3px,0);}  60%{transform:translate3d(-5px,5px,0);}
  72%{transform:translate3d(4px,-4px,0);} 84%{transform:translate3d(-6px,-3px,0);}
  100%{transform:translate3d(0,0,0);}
}

/* atmósfera — scanlines + viñeta de monitor de bóveda (estático) */

.atmos{position:fixed; inset:0; z-index:5; pointer-events:none;}

.atmos::before{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.5) 2px 3px);
  opacity:.10;}

.atmos::after{content:''; position:absolute; inset:0;
  background:radial-gradient(135% 115% at 50% 36%, transparent 54%, rgba(0,0,0,.6));}

img,svg{display:block;}

::selection{background:var(--red); color:var(--bone);}

.disp{font-family:var(--font-display); font-weight:var(--disp-weight); font-stretch:var(--disp-stretch); text-transform:uppercase;}

.mono{font-family:var(--font-mono);}

.num{font-variant-numeric:tabular-nums;}

.bat{fill:currentColor;}

.wa{width:18px; height:18px; color:currentColor; fill:currentColor; flex:0 0 auto;}

/* ---------- cursor doble (firma · solo puntero fino) ---------- */

.cur-dot,.cur-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  display:none; mix-blend-mode:difference; will-change:transform;}

html.cursor-on .cur-dot, html.cursor-on .cur-ring{display:block;}

.cur-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#fff;}

.cur-ring{margin:-21px 0 0 -21px;}

.cur-ring .rg{display:block; transform-box:fill-box; transform-origin:center; transition:transform .22s var(--ease);}

.cur-ring.is-lock .rg{transform:scale(1.7);}

@media (pointer:fine){ html.cursor-on, html.cursor-on *{cursor:none;} }

/* ---------- utilidades de bóveda ---------- */

.brk{position:relative;}

.brk::before,.brk::after{content:''; position:absolute; width:13px; height:13px; pointer-events:none;
  border:1.5px solid var(--hair-strong); z-index:3;}

.brk::before{top:9px; left:9px; border-right:0; border-bottom:0;}

.brk::after{right:9px; bottom:9px; border-left:0; border-top:0;}

.reg{width:17px; height:17px; color:var(--ash); flex:0 0 auto;}

.ref{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);}

.ticks{height:9px; background:repeating-linear-gradient(90deg, var(--hair-strong) 0 1px, transparent 1px 10px); opacity:.65;}

.perf{position:relative; height:0; border:0; border-top:1px dashed var(--hair-strong); margin:0;}

.perf::before,.perf::after{content:''; position:absolute; top:-5.5px; width:11px; height:11px; border-radius:50%; background:var(--ink);}

.perf::before{left:-6px;}

.perf::after{right:-6px;}

/* ---------- top bar ---------- */

.bar{
  position:fixed; top:0; left:0; right:0; height:var(--barh); z-index:50;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
  background:color-mix(in srgb, var(--ink), transparent 14%);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair);
}

.bar__brand{display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-stretch:75%; text-transform:uppercase;
  letter-spacing:.02em; font-size:1.05rem; color:var(--bone); text-decoration:none;}

.bar .bat{width:26px; height:auto; color:var(--red);}

/* ---------- nav de secciones · compartida (vault HUD) ---------- */

.bar__nav{display:flex; align-items:center; gap:clamp(16px,3.4vw,30px);
  font-family:var(--font-mono); font-size:clamp(.6rem,1.5vw,.7rem); letter-spacing:.14em;
  text-transform:uppercase; line-height:1;}

.bar__nav a{position:relative; color:var(--ash); text-decoration:none; padding:8px 0; white-space:nowrap;
  transition:color var(--dur-1) var(--ease);}

.bar__nav a::after{content:''; position:absolute; left:0; right:0; bottom:3px; height:1.5px;
  background:var(--red-bright); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease);}

.bar__nav a:focus-visible{outline:2px solid var(--red-bright); outline-offset:3px; border-radius:1px;}

.bar__nav a[aria-current="page"]{color:var(--bone);}

.bar__nav a[aria-current="page"]::after{transform:scaleX(1);}

.bar__nav a[aria-current="page"]::before{content:''; position:absolute; left:-11px; top:50%;
  width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--red-bright);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.16);}

@media (pointer:fine){
  .bar__nav a:hover{color:var(--bone);}
  .bar__nav a:hover::after{transform:scaleX(1);}
}

@media (max-width:600px){
  .bar__meta,.bar__back{display:none;}
  .bar__nav{gap:16px;}
}

/* ---------- layout secciones (registros de bóveda) ---------- */

.wrap{max-width:var(--maxw); margin:0 auto;}

.rec-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}

.idx{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em; color:var(--red-bright);}

.rec-bar .sec-title{flex:1 1 auto;}

.rec-bar .ref{margin-left:auto;}

.sec-title{font-family:var(--font-display); font-weight:800; font-stretch:75%; text-transform:uppercase;
  font-size:var(--t-m); letter-spacing:.01em; line-height:1; margin:0;}

.sec-head .ticks{margin:14px 0 0;}

.js [data-reveal].in{opacity:1; transform:none;}

.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase; padding:.95em 1.45em; border:1px solid transparent;
  border-radius:var(--r); cursor:pointer; text-decoration:none; will-change:transform;
  transition:transform var(--dur-1) var(--ease), background var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2);}

.btn--red{background:var(--red); color:var(--bone);}

.btn--red:hover{background:var(--red-bright); box-shadow:0 0 0 1px rgba(var(--red-rgb),.4), 0 14px 38px -16px rgba(var(--red-rgb),.6);}

.btn--red:active{background:var(--red-deep);}

.btn:focus-visible{outline:2px solid var(--red-bright); outline-offset:3px;}

.btn-link:hover{color:var(--red-bright); border-color:var(--red);}

.btn-link:focus-visible{outline:2px solid var(--red-bright); outline-offset:3px;}

/* ---------- colofón ---------- */

.colophon{position:relative; padding:clamp(40px,7vw,72px) var(--pad) clamp(34px,6vw,56px); border-top:1px solid var(--hair); text-align:center;}

.colophon .bat{width:40px; margin:0 auto 18px; color:var(--red);}

.colophon__tag{font-family:var(--font-display); font-weight:800; font-stretch:75%; text-transform:uppercase; font-size:clamp(1.5rem,5vw,2.1rem); letter-spacing:.01em; margin:0;}

.colo-links{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:22px 0 0;}

.colophon .perf{max-width:300px; margin:24px auto 0;}

.colophon__meta{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); margin:18px 0 0;}

/* ---------- navegación app-like entre páginas (View Transitions cross-document, mismo origen) ----------
   Sólo anima la navegación entre páginas del sitio; ignorado donde no hay soporte.
   Bajo reduced-motion el cambio es instantáneo (sin cross-fade). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; }
}