/* Techno Street Wear · diseño 2.0: escena de club, productos flotando, tipografía Archivo. Mobile first. */
:root{--negro:#050505;--hueso:#EFECE6;--rojo:#E30C1C;--gris:#8a8a86}
*{box-sizing:border-box}
html,body{margin:0;background:var(--negro);color:var(--hueso);overflow-x:clip}
body{font-family:Archivo,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.tsw{--lc:226,22,42;--li:0;--lx:50%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* cabecera: mínima, se funde con lo que tenga debajo */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;mix-blend-mode:difference;color:#fff}
.admin-bar .top{top:46px}
.top__logo img{height:22px;width:auto}
.top nav{display:flex;gap:18px}
.top .top__nav{display:none}
.top button{all:unset;cursor:pointer}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.u:hover,.u[aria-pressed="true"],.u[aria-current]{background-size:100% 1px}

.cab{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:40px}
.cab h1,.cab h2{margin:0;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,7vw,96px);line-height:.86;letter-spacing:-.02em}
sup{font-size:.28em;font-weight:500;font-stretch:100%;vertical-align:top;margin-left:.2em;letter-spacing:0}

/* 1 · escena de club */
.hero{position:relative;isolation:isolate;height:100svh;min-height:600px;overflow:hidden;overflow:clip;background:#040504;display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 22px;perspective:900px}
.rig-canvas,.rig-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.rig-canvas{z-index:1}
.rig-front{z-index:4;mix-blend-mode:screen}
.suelo,.atmos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;mix-blend-mode:screen}
.suelo{z-index:1;opacity:.32;-webkit-mask-image:linear-gradient(transparent 46%,#000 54%,rgba(0,0,0,.4) 80%,transparent);mask-image:linear-gradient(transparent 46%,#000 54%,rgba(0,0,0,.4) 80%,transparent)}
.atmos{z-index:3;opacity:.8;filter:contrast(1.15) saturate(1.2)}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 42%,transparent 55%,rgba(0,0,0,.45))}
.hero > :not(canvas){position:relative;z-index:5}
.hero h1{margin:0;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(46px,11.5vw,190px);line-height:.84;letter-spacing:-.02em;text-shadow:0 -1px 0 rgba(var(--lc),calc(.15 + var(--li)*.6))}
.hero__pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;margin-top:22px;border-top:1px solid rgba(239,236,230,.25);padding-top:12px}
.hero__pie p{margin:0;max-width:34ch;color:#cfcbc4}
.entrar{all:unset;cursor:pointer;font-weight:700;font-stretch:110%;text-transform:uppercase;font-size:15px;color:var(--negro);background:var(--hueso);padding:13px 18px;transition:background .2s,color .2s}
.entrar:hover,.entrar[aria-pressed="true"]{background:rgb(var(--lc));color:#fff}

/* 2 · la pista: los productos no van en cajas, flotan sobre el suelo */
.sel{position:relative;padding:72px 16px 96px;background:radial-gradient(110% 420px at var(--lx) 0%,rgba(var(--lc),calc(var(--li)*.16)),transparent 80%)}
.filtros{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px}
.filtros button{all:unset;cursor:pointer;color:var(--gris)}
.filtros a{color:var(--gris)}
.filtros button[aria-pressed="true"],.filtros a[aria-current],.filtros a:hover{color:var(--hueso)}
.filtros sup{font-size:10px}
.seo__intro{margin:-16px 0 40px;max-width:62ch;color:#cfcbc4;font-size:16px;line-height:1.55}
.pista{display:grid;grid-template-columns:1fr 1fr;gap:40px 8px;align-items:start}
.pista .p:nth-child(3n+1){grid-column:span 2;padding:0 8%}
.p{position:relative;display:block;perspective:800px;will-change:transform}
.p[hidden]{display:none}
.p__esc,.p__obj{animation-delay:inherit}
.p__esc{position:relative;aspect-ratio:3/4;transform-style:preserve-3d}
.p__haz{position:absolute;left:50%;top:-14%;width:120%;height:118%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(rgba(var(--lc),calc(.05 + var(--li)*.18)),rgba(var(--lc),0) 92%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(14px);opacity:.55;transition:opacity .4s}
.p:hover .p__haz{opacity:1}
.p__suelo{position:absolute;left:12%;right:12%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),transparent),radial-gradient(closest-side,rgba(var(--lc),calc(.18 + var(--li)*.35)),transparent);animation:sombra 7s ease-in-out infinite;animation-delay:inherit}
.p__obj{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.p__obj img,.p__obj svg{width:100%;height:100%;object-fit:contain;animation:flotap 7s ease-in-out infinite;animation-delay:inherit;filter:drop-shadow(0 30px 24px rgba(0,0,0,.6))}
.p:hover .p__obj img{filter:drop-shadow(0 30px 24px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(var(--lc),.45))}
@keyframes flotap{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sombra{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
.p__txt{position:relative;margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.p__n{font-weight:600}
.p__b{color:var(--gris)}
.p__c{width:100%;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gris)}
.p__c i{width:6px;height:6px;border-radius:50%;background:var(--rojo)}
.p__c em{font-style:normal;color:var(--rojo)}

/* 3 · kits */
.kits{padding:24px 0 110px}
.kits .cab{padding:0 16px;margin-bottom:18px}
.k{position:relative;display:grid;align-items:end;gap:4px 16px;padding:14px 16px;border-top:1px solid rgba(239,236,230,.18)}
.k:last-child{border-bottom:1px solid rgba(239,236,230,.18)}
.k__h{font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(48px,13vw,210px);line-height:.85;letter-spacing:-.03em;transition:color .25s,-webkit-text-stroke .25s}
.k__d{color:var(--gris)}
.k__img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:8px}
.flota{display:none}

/* 4 · cierre: se encienden las luces de la nave */
.cierre{background:linear-gradient(var(--negro),var(--hueso) 220px);color:var(--negro);padding:240px 16px 28px}
.cierre h2{margin:0 0 22px;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(36px,8vw,120px);line-height:.86;letter-spacing:-.02em;max-width:12ch}
.cierre p{max-width:40ch;margin:0 0 26px}
.wa{display:inline-block;font-weight:700;font-stretch:110%;text-transform:uppercase;background:var(--negro);color:var(--hueso);padding:13px 18px}
.wa:hover{background:var(--rojo)}
.pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-top:120px;padding-top:14px;border-top:1px solid rgba(5,5,5,.2);font-size:13px}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie small{display:block;max-width:60ch;color:#55534f;font-size:12px}

/* páginas de texto: categorías, guías, kits y legales */
.crumbs{padding:0 16px;font-size:13px;color:var(--gris)}
.crumbs a:hover{color:var(--hueso)}
.crumbs + .sel{padding-top:32px}
.sec{padding:40px 16px 80px;max-width:1280px;margin:0 auto}
.sec > h1,.sec > h2{margin:0 0 28px;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,6vw,84px);line-height:.88;letter-spacing:-.02em}
.entry{max-width:72ch;font-size:16px;line-height:1.7;color:#cfcbc4}
.entry h2{margin:44px 0 12px;font-stretch:115%;font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.05;color:var(--hueso)}
.entry h3{margin:28px 0 8px;font-size:19px;font-weight:700;color:var(--hueso)}
.entry p,.entry ul,.entry ol{margin:0 0 16px}
.entry li{margin-bottom:6px}
.entry a{color:var(--hueso);text-decoration:underline;text-decoration-color:var(--rojo);text-underline-offset:3px}
.entry strong{color:var(--hueso)}
.entry img{margin:24px 0}
.entry .entry__grid{max-width:none;width:min(1216px,calc(100vw - 32px));display:grid;grid-template-columns:1fr 1fr;gap:36px 12px;margin:28px 0 44px}
.entry .entry__grid a{text-decoration:none;color:var(--hueso)}
.seo h2{margin:0 0 24px;font-stretch:115%;font-weight:800;text-transform:uppercase;font-size:28px;line-height:1.05}
.seo__grid{display:grid;gap:22px}
.seo h3{margin:0 0 6px;font-size:17px;font-weight:700}
.seo p{margin:0;font-size:15px;line-height:1.6;color:#cfcbc4;max-width:68ch}

@media (min-width:600px){.admin-bar .top{top:32px}}
@media (min-width:900px){
  .top{padding:20px 32px}
  .top .top__nav{display:flex}
  .cab{margin-bottom:72px}
  .hero{padding:0 32px 32px}
  /* el titular ocupa como mucho un tercio de la altura y deja ver el escenario */
  .hero h1{font-size:min(7vw,11vh)}
  .sel{padding:120px 32px 160px}
  .pista{grid-template-columns:repeat(12,1fr);gap:40px 0}
  .pista .p:nth-child(n){grid-column:auto;padding:0}
  .pista .p:nth-child(6n+1){grid-column:1/6}
  .pista .p:nth-child(6n+2){grid-column:6/10;margin-top:26vh}
  .pista .p:nth-child(6n+3){grid-column:9/13;margin-top:-6vh}
  .pista .p:nth-child(6n+4){grid-column:2/5;margin-top:-4vh}
  .pista .p:nth-child(6n+5){grid-column:5/9;margin-top:14vh}
  .pista .p:nth-child(6n){grid-column:8/13;margin-top:-10vh}
  .kits .cab,.k{padding-left:32px;padding-right:32px}
  .k{grid-template-columns:1fr auto}
  .k__d{text-align:right;padding-bottom:.6em}
  .k__img{display:none}
  .k:hover .k__h{color:transparent;-webkit-text-stroke:1.5px rgb(var(--lc))}
  .flota{display:block;position:fixed;left:0;top:0;z-index:15;width:340px;aspect-ratio:4/5;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .25s}
  .flota.on{opacity:1}
  .cierre{padding:320px 32px 32px}
  .crumbs{padding:0 32px}
  .sec{padding:56px 32px 100px}
  .entry{font-size:17px}
  .entry h2{font-size:34px}
  .entry .entry__grid{grid-template-columns:repeat(3,1fr);gap:48px 24px}
  .seo h2{font-size:40px}
  .seo__grid{grid-template-columns:repeat(3,1fr);gap:32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* deja sitio a la cabecera fija en las páginas que no empiezan con una escena */
.tsw > .top + *{padding-top:84px}