/* =========================================================================
   VanguardRAP — sistema de diseño "El crate como archivo"
   Negro de vinilo + hueso/cartón + kraft, rojo de sello con MUCHA restricción.
   Display: Big Shoulders Display · Texto: Hanken Grotesk · Datos: Spline Sans Mono
   ========================================================================= */

:root{
  /* superficies */
  --vinyl:#100d0c;         /* fondo, negro cálido de vinilo */
  --vinyl-2:#171310;       /* fondo alterno / surco */
  --crate:#1b1612;         /* superficie elevada (funda, panel) */
  --crate-edge:#2a221b;    /* borde de cartón */
  --crate-hi:#221b15;      /* hover de funda */
  /* tintas */
  --bone:#e9e1ce;          /* texto principal / cartón claro */
  --bone-dim:#c8bfa9;      /* texto sobre superficie */
  --dust:#8a8173;          /* texto secundario, polvo */
  --dust-2:#5f584c;        /* texto terciario / líneas */
  --kraft:#c29a5b;         /* manila / pestaña divisor / preventa */
  --kraft-dim:#9a7b46;
  --stamp:#b23127;         /* rojo tinta de sello, SOLO acentos urgentes */
  --stamp-hi:#cf4034;
  --label:#a8231a;         /* etiqueta central del disco */
  /* medidas */
  --wrap:1200px;
  --gap:clamp(14px,2.2vw,26px);
  --radius:2px;
  --hair:1px solid var(--crate-edge);
  --stencil:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--vinyl);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.55;
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* textura de grano sutil sobre el vinilo, no un radial rojo genérico */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(178,49,39,.10), transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--stamp);color:#fff}
:focus-visible{outline:2px solid var(--kraft);outline-offset:2px}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto;position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- rótulos / datos ---------- */
.mono{font-family:var(--mono)}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kraft);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--kraft)}

/* ---------- barra de sistema ---------- */
.sysbar{
  border-bottom:var(--hair);background:var(--vinyl-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);
}
.sysbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 0;flex-wrap:wrap}
.sysbar b{color:var(--bone-dim);font-weight:500}
.sysbar .blink{color:var(--kraft)}

/* ---------- cabecera ---------- */
.head{position:sticky;top:0;z-index:40;background:rgba(16,13,12,.9);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:var(--hair)}
.nav{display:flex;align-items:center;gap:22px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand .disc-mark{width:34px;height:34px;flex:none}
.brand b{
  font-family:var(--stencil);font-weight:800;font-size:23px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1;color:var(--bone);
}
.brand b .v{color:var(--stamp)}
.links{display:flex;gap:20px}
.links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust);padding:4px 0;border-bottom:1px solid transparent;transition:.15s;
}
.links a:hover,.links a[aria-current="page"]{color:var(--bone);border-color:var(--stamp)}
.cartbtn{
  display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--bone);
  border:1px solid var(--crate-edge);border-radius:var(--radius);padding:8px 13px;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:.15s;
}
.cartbtn:hover{border-color:var(--kraft)}
.cartbtn .n{
  min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px;
  background:var(--stamp);color:#fff;border-radius:2px;font-size:11px;font-weight:600;
}
.cartbtn .n[data-empty="1"]{background:var(--crate-edge);color:var(--dust)}
.navtoggle{display:none}

/* ---------- disco de surcos (CSS puro) ---------- */
.disc{
  aspect-ratio:1;border-radius:50%;position:relative;flex:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 15.5%, var(--label) 15.5% 22%, transparent 22.4%),
    radial-gradient(circle at 50% 50%, #050403 0 6.4%, transparent 6.6%),
    repeating-radial-gradient(circle at 50% 50%, #0a0908 0 1.6px, #1c1712 1.6px 3.4px);
  box-shadow:0 10px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
}
.disc::after{ /* reflejo diagonal */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(122deg, transparent 38%, rgba(233,225,206,.10) 47%, transparent 55%);
}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,6vw,74px) 0 clamp(30px,5vw,58px);border-bottom:var(--hair)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{
  font-family:var(--stencil);font-weight:800;line-height:.86;letter-spacing:.005em;
  text-transform:uppercase;margin:16px 0 0;
  font-size:clamp(52px,9vw,112px);color:var(--bone);
}
.hero h1 .out{
  color:transparent;-webkit-text-stroke:1.6px var(--dust-2);
}
.hero .lede{max-width:44ch;color:var(--bone-dim);margin:20px 0 0;font-size:clamp(15px,1.5vw,17.5px)}
.hero .lede b{color:var(--bone);font-weight:600}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border-radius:var(--radius);
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 20px;border:1px solid transparent;transition:.15s;
}
.btn.solid{background:var(--bone);color:var(--vinyl);font-weight:600}
.btn.solid:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--crate-edge)}
.btn.ghost:hover{border-color:var(--kraft);color:#fff}
.btn.stamp{background:var(--stamp);color:#fff;font-weight:600}
.btn.stamp:hover{background:var(--stamp-hi)}

/* --- caja del crate en el hero --- */
.crate-box{position:relative;perspective:1400px}
.crate-box .rail{
  position:absolute;inset:auto 0 -14px;height:16px;border-radius:2px;
  background:linear-gradient(var(--crate-edge),#0d0a08);box-shadow:0 8px 20px rgba(0,0,0,.5)
}
.sleeves{display:flex;gap:0;align-items:flex-end;justify-content:center;padding:0 6px}
.sleeves .sl{
  width:20%;aspect-ratio:.82;border:1px solid var(--crate-edge);border-bottom:none;
  background:var(--crate);position:relative;overflow:hidden;border-radius:2px 2px 0 0;
  transform:rotate(var(--r,0deg));transform-origin:bottom center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:transform .35s ease, margin .35s ease;
}
.sleeves .sl img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(.96)}
.sleeves .sl::after{ /* ring wear */
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%, transparent 40%, rgba(0,0,0,.28) 62%, transparent 63%);
  mix-blend-mode:multiply;opacity:.7
}
.crate-box:hover .sl{transform:rotate(var(--r,0deg)) translateY(-4px)}
.crate-box .front{
  position:relative;z-index:3;margin:0 auto -6px;width:56%;
  display:flex;align-items:flex-end;gap:0;
}
.crate-box .front .disc{
  width:60%;margin-right:-34%;filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))
}
.crate-box .front .cover{
  width:74%;aspect-ratio:1;border:1px solid var(--crate-edge);border-radius:2px;position:relative;z-index:2;
  overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)
}
.crate-box .front .cover img{width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:no-preference){
  .crate-box .front .disc{animation:spin 14s linear infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- divisor de crate (pestaña) : el signature ---------- */
.divider{margin:clamp(34px,5vw,58px) 0 var(--gap);display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.divtab{
  position:relative;background:var(--kraft);color:#241a0d;
  padding:9px 20px 8px;border-radius:3px 3px 0 0;
  font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(19px,2.4vw,27px);line-height:1;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16);
}
.divtab::before{ /* muesca de la pestaña */
  content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.05) 6px 7px);
  border-radius:3px 3px 0 0;pointer-events:none
}
.divider .meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);
  padding-bottom:4px;border-bottom:var(--hair);flex:1;min-width:120px
}
.divider .meta b{color:var(--bone-dim);font-weight:500}
.section-line{height:2px;background:linear-gradient(90deg,var(--kraft),transparent 60%);margin-bottom:var(--gap)}

/* ---------- grid de fundas ---------- */
.crate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:1000px){.crate-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.crate-grid{grid-template-columns:repeat(2,1fr)}}

.sleeve{
  position:relative;background:var(--crate);border:1px solid var(--crate-edge);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;transition:.18s;
}
.sleeve:hover{border-color:var(--kraft-dim);background:var(--crate-hi);transform:translateY(-3px)}
.sleeve .art{position:relative;aspect-ratio:1;overflow:hidden;background:#0a0807}
.sleeve .art img{width:100%;height:100%;object-fit:cover;transition:.35s;filter:contrast(1.02)}
.sleeve:hover .art img{transform:scale(1.035)}
.sleeve .art::after{ /* ring wear del disco en la funda */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 47%, transparent 43%, rgba(0,0,0,.22) 61%, transparent 62%);
  mix-blend-mode:multiply;opacity:.55
}
/* sello de estado sobre la carátula */
.stampmark{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:1px solid;background:rgba(16,13,12,.72);backdrop-filter:blur(3px)
}
.stampmark.ok{display:none}
.stampmark.low{color:#fff;background:var(--stamp);border-color:var(--stamp);transform:rotate(-2.5deg)}
.stampmark.pre{color:#241a0d;background:var(--kraft);border-color:var(--kraft)}
.stampmark.soon{color:var(--dust);border-color:var(--dust-2);background:rgba(16,13,12,.8)}
.stampmark.out{color:var(--dust);border-color:var(--dust-2);background:rgba(16,13,12,.86)}
.stampmark.hold{color:var(--kraft);border-color:var(--kraft-dim)}

.sleeve .body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.sleeve .catrow{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.sleeve .catrow .scene{color:var(--kraft-dim)}
.sleeve h3{margin:0;font-family:var(--stencil);font-weight:600;line-height:.98;
  font-size:clamp(17px,1.8vw,20px);text-transform:uppercase;letter-spacing:.01em}
.sleeve h3 .art-name{display:block;color:var(--bone)}
.sleeve h3 .alb{display:block;color:var(--bone-dim);font-weight:500;font-size:.82em}
.sleeve .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:6px}
.sleeve .price{font-family:var(--mono);font-size:15px;color:var(--bone);letter-spacing:.02em}
.sleeve .price.muted{color:var(--dust)}
.add{
  border:1px solid var(--crate-edge);background:transparent;color:var(--bone-dim);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 11px;border-radius:2px;transition:.15s;white-space:nowrap
}
.add:hover{border-color:var(--kraft);color:#fff}
.add.soon{border-style:dashed;color:var(--dust)}
.add.soon:hover{border-color:var(--dust);color:var(--bone-dim)}

/* ---------- manifiesto / criterio ---------- */
.manifesto{border-top:var(--hair);border-bottom:var(--hair);padding:clamp(38px,6vw,72px) 0;margin-top:clamp(38px,6vw,72px);
  background:var(--vinyl-2)}
.manifesto .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(22px,4vw,54px)}
.manifesto h2{font-family:var(--stencil);font-weight:800;text-transform:uppercase;line-height:.9;
  font-size:clamp(30px,4.2vw,52px);margin:14px 0 0;color:var(--bone)}
.criteria{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--crate-edge);border:1px solid var(--crate-edge)}
.criteria .cell{background:var(--vinyl);padding:20px 20px 22px}
.criteria .cell .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft)}
.criteria .cell h4{margin:9px 0 6px;font-family:var(--stencil);font-weight:600;text-transform:uppercase;
  font-size:20px;letter-spacing:.01em;color:var(--bone)}
.criteria .cell p{margin:0;color:var(--dust);font-size:14px;line-height:1.5}

/* ---------- catálogo: layout con filtros ---------- */
.shell{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3vw,40px);padding:clamp(24px,4vw,42px) 0 60px;align-items:start}
@media(max-width:860px){.shell{grid-template-columns:1fr}}
.filters{position:sticky;top:92px;border:1px solid var(--crate-edge);border-radius:var(--radius);background:var(--crate)}
@media(max-width:860px){.filters{position:static}}
.filters .fh{padding:14px 16px;border-bottom:var(--hair);font-family:var(--stencil);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:20px}
.filters .fh small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--dust);margin-top:3px}
.fgroup{padding:12px 10px;border-bottom:var(--hair)}
.fgroup:last-child{border-bottom:none}
.fgroup .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);padding:0 6px 8px}
.chip{
  display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--bone-dim);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:7px 8px;border-radius:2px;transition:.12s
}
.chip:hover{background:var(--crate-hi);color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--crate-edge);color:var(--bone);border-color:var(--kraft-dim)}
.chip .c{color:var(--dust);font-size:11px}
.searchbox{position:relative;margin-bottom:var(--gap)}
.searchbox input{
  width:100%;background:var(--crate);border:1px solid var(--crate-edge);border-radius:var(--radius);
  color:var(--bone);font-family:var(--mono);font-size:14px;padding:14px 16px 14px 40px;letter-spacing:.02em
}
.searchbox input::placeholder{color:var(--dust)}
.searchbox input:focus{outline:none;border-color:var(--kraft)}
.searchbox .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dust)}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:var(--gap);flex-wrap:wrap}
.results-bar .count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.results-bar .count b{color:var(--bone)}
.empty{padding:60px 20px;text-align:center;border:1px dashed var(--crate-edge);border-radius:var(--radius);color:var(--dust)}
.empty b{display:block;font-family:var(--stencil);font-size:24px;color:var(--bone-dim);text-transform:uppercase;margin-bottom:6px}

/* ---------- ficha de producto ---------- */
.detail{padding:clamp(24px,4vw,44px) 0 40px}
.detail .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:820px){.detail .grid{grid-template-columns:1fr}}
.detail .cover-wrap{position:relative}
.detail .cover-wrap .big{border:1px solid var(--crate-edge);border-radius:var(--radius);overflow:hidden;
  position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5);background:#0a0807;aspect-ratio:1}
.detail .cover-wrap .big img{width:100%;height:100%;object-fit:cover}
.detail .cover-wrap .big::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 47%, transparent 44%, rgba(0,0,0,.2) 62%, transparent 63%);mix-blend-mode:multiply}
.breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin-bottom:14px}
.breadcrumb a:hover{color:var(--kraft)}
.detail h1{font-family:var(--stencil);font-weight:800;text-transform:uppercase;line-height:.9;
  font-size:clamp(34px,5vw,60px);margin:6px 0 4px}
.detail h1 .alb{display:block;color:var(--bone-dim);font-weight:600;font-size:.62em;line-height:1.02;margin-top:6px}
.detail .price-lg{font-family:var(--mono);font-size:26px;color:var(--bone);margin:18px 0 4px}
/* ficha de archivo tipo tarjeta */
.filecard{border:1px solid var(--crate-edge);border-radius:var(--radius);background:var(--vinyl-2);margin:20px 0}
.filecard .fc-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.filecard .fc-h .catno{color:var(--kraft)}
.fc-rows{display:grid;grid-template-columns:1fr 1fr}
.fc-rows .r{padding:12px 14px;border-top:var(--hair)}
.fc-rows .r:nth-child(odd){border-right:var(--hair)}
.fc-rows .r .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin-bottom:3px}
.fc-rows .r .val{font-size:15px;color:var(--bone)}
.detail .actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.notecard{border:1px solid var(--crate-edge);border-left:3px solid var(--kraft);border-radius:var(--radius);
  padding:16px 18px;background:var(--crate);margin-top:18px}
.notecard .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft);margin-bottom:8px}
.notecard p{margin:0 0 8px;color:var(--bone-dim);font-size:14.5px}
.notecard p:last-child{margin:0}

/* ---------- checkout mock ---------- */
.co{padding:clamp(24px,4vw,44px) 0 60px}
.co .grid{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(22px,3.5vw,44px);align-items:start}
@media(max-width:900px){.co .grid{grid-template-columns:1fr}}
.co h1{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:clamp(32px,5vw,58px);line-height:.9;margin:6px 0 8px}
.panel{border:1px solid var(--crate-edge);border-radius:var(--radius);background:var(--crate);margin-bottom:var(--gap)}
.panel .ph{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:var(--hair)}
.panel .ph .num{font-family:var(--mono);font-size:12px;color:var(--vinyl);background:var(--kraft);border-radius:2px;padding:2px 8px;font-weight:600}
.panel .ph h2{margin:0;font-family:var(--stencil);font-weight:600;text-transform:uppercase;font-size:21px;letter-spacing:.02em}
.panel .pb{padding:16px}
.cartline{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:var(--hair)}
.cartline:last-child{border-bottom:none}
.cartline img{width:56px;height:56px;object-fit:cover;border:1px solid var(--crate-edge);border-radius:2px;flex:none}
.cartline .t{flex:1;min-width:0}
.cartline .t b{font-family:var(--stencil);font-weight:600;text-transform:uppercase;font-size:16px;display:block;line-height:1}
.cartline .t span{font-family:var(--mono);font-size:11px;color:var(--dust);letter-spacing:.06em}
.cartline .p{font-family:var(--mono);color:var(--bone)}
.cartline .rm{background:none;border:none;color:var(--dust);cursor:pointer;font-family:var(--mono);font-size:16px;padding:4px 8px}
.cartline .rm:hover{color:var(--stamp)}
.cart-empty{padding:30px 16px;text-align:center;color:var(--dust);border:1px dashed var(--crate-edge);border-radius:2px;font-family:var(--mono);font-size:13px}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--vinyl);border:1px solid var(--crate-edge);border-radius:2px;
  color:var(--bone);font-family:var(--body);font-size:15px;padding:11px 13px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--kraft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid var(--crate-edge);border-radius:2px;cursor:pointer;margin-bottom:10px;transition:.14s}
.opt:hover{border-color:var(--kraft-dim)}
.opt input{margin-top:3px;accent-color:var(--stamp)}
.opt .ot b{font-family:var(--stencil);font-weight:600;text-transform:uppercase;font-size:15px;display:block;letter-spacing:.02em}
.opt .ot span{font-size:13px;color:var(--dust)}
.summary{border:1px solid var(--crate-edge);border-radius:var(--radius);background:var(--vinyl-2);position:sticky;top:92px}
.summary .sh{padding:14px 16px;border-bottom:var(--hair);font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:20px}
.summary .sb{padding:16px}
.sumrow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--dust);padding:6px 0}
.sumrow.total{color:var(--bone);font-size:20px;border-top:var(--hair);margin-top:8px;padding-top:14px}
.mocknote{margin-top:14px;padding:12px 14px;border:1px solid var(--kraft-dim);border-radius:2px;background:rgba(194,154,91,.06);
  font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--kraft);letter-spacing:.02em}

/* ---------- páginas de texto ---------- */
.doc{padding:clamp(28px,5vw,56px) 0 60px;max-width:760px}
.doc h1{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5vw,58px);line-height:.9;margin:10px 0 6px}
.doc h2{font-family:var(--stencil);font-weight:600;text-transform:uppercase;font-size:24px;margin:34px 0 10px;letter-spacing:.02em}
.doc p,.doc li{color:var(--bone-dim);line-height:1.7}
.doc ul{padding-left:20px}
.doc .lead{font-size:18px;color:var(--bone)}
.infogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--crate-edge);border:1px solid var(--crate-edge);margin:24px 0}
@media(max-width:680px){.infogrid{grid-template-columns:1fr}}
.infogrid .cell{background:var(--vinyl);padding:20px}
.infogrid .cell .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--kraft);margin-bottom:8px}
.infogrid .cell .val{color:var(--bone);font-size:15px}
.steps{counter-reset:s;display:grid;gap:2px;background:var(--crate-edge);border:1px solid var(--crate-edge);margin:24px 0}
.steps .step{background:var(--vinyl);padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.steps .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--stencil);font-weight:700;font-size:34px;color:var(--kraft);line-height:.8;flex:none}
.steps .step h4{margin:0 0 4px;font-family:var(--stencil);font-weight:600;text-transform:uppercase;font-size:19px;color:var(--bone);letter-spacing:.02em}
.steps .step p{margin:0;color:var(--dust);font-size:14px}

/* ---------- footer ---------- */
.foot{border-top:var(--hair);background:var(--vinyl-2);margin-top:clamp(30px,5vw,60px)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,4vw,48px);padding:clamp(36px,5vw,58px) 0 26px}
@media(max-width:760px){.foot .wrap{grid-template-columns:1fr}}
.foot .big{font-family:var(--stencil);font-weight:800;text-transform:uppercase;line-height:.82;font-size:clamp(48px,9vw,104px);color:var(--crate-edge)}
.foot .big .v{color:var(--stamp);opacity:.7}
.foot .tagline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dust);margin-top:10px}
.foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft);margin:0 0 12px}
.foot a{display:block;color:var(--bone-dim);padding:4px 0;font-size:14px}
.foot a:hover{color:var(--bone)}
.foot .colofon{border-top:var(--hair);padding:16px 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dust-2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;opacity:0;pointer-events:none;
  background:var(--bone);color:var(--vinyl);font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  padding:12px 18px;border-radius:2px;box-shadow:0 12px 34px rgba(0,0,0,.5);transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* responsive nav */
@media(max-width:760px){
  .navtoggle{display:inline-flex;background:none;border:1px solid var(--crate-edge);color:var(--bone);
    border-radius:2px;padding:8px 11px;cursor:pointer;font-family:var(--mono);font-size:12px}
  .links{position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:0;background:var(--crate);
    border-bottom:var(--hair);padding:6px 0;transition:.2s;z-index:39;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}
  .links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .links a{padding:13px 22px;border-bottom:var(--hair);border-left:2px solid transparent}
  .links a:hover{border-left-color:var(--stamp);border-bottom-color:var(--crate-edge)}
  .sleeve .catrow{flex-wrap:wrap;gap:1px 8px;font-size:9.5px}
  .sleeve .body{padding:11px 11px 12px}
  .hero .wrap{grid-template-columns:1fr}
  .crate-box{order:-1;max-width:420px;margin-inline:auto}
  .manifesto .wrap{grid-template-columns:1fr}
  .criteria{grid-template-columns:1fr}
  .fc-rows,.two{grid-template-columns:1fr}
  .fc-rows .r:nth-child(odd){border-right:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition:none!important}}