/* ============================================================
   SUEHTAM // AWWWARDS-TIER DESIGN SYSTEM
   Underground streetwear — Canarias
   ============================================================ */

/* --- DESIGN TOKENS --- */
:root {
    /* Warm, physical neutrals (never pure #000 / #fff) */
    --bg:           #0a0a0a;
    --bg-elev:      #111110;
    --fg:           #f4f2ee;
    --fg-2:         rgba(244, 242, 238, 0.62);
    --fg-3:         rgba(244, 242, 238, 0.40);
    --line:         rgba(244, 242, 238, 0.12);
    --accent:       #ff3b2f;   /* infrared red — the single owned color */
    --accent-soft:  rgba(255, 59, 47, 0.16);

    /* Type */
    --f-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
    --f-mono:    'Space Mono', 'Courier New', monospace;

    /* Agency easings */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

    --dur-slow:   0.8s;
    --dur-slower: 1.2s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Branded selection */
::selection { background: var(--accent); color: var(--bg); }

img { display: block; max-width: 100%; }

/* Hide native cursor when custom cursor is active (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
    body.cursor-ready,
    body.cursor-ready a,
    body.cursor-ready button { cursor: none; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fg);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 0.3s var(--ease-out-expo),
                height 0.3s var(--ease-out-expo),
                background 0.3s var(--ease-out-expo);
}
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border: 1px solid var(--fg-3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.4s var(--ease-out-expo),
                height 0.4s var(--ease-out-expo),
                border-color 0.4s var(--ease-out-expo),
                opacity 0.4s var(--ease-out-expo);
}
body.cursor-hover .cursor { width: 0; height: 0; }
body.cursor-hover .cursor-ring {
    width: 64px; height: 64px;
    border-color: var(--accent);
    background: var(--accent-soft);
}
@media (hover: none), (pointer: coarse) {
    .cursor, .cursor-ring { display: none; }
}

/* ============================================================
   PAGE-LOAD TRANSITION OVERLAY
   ============================================================ */
#preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.preloader-mark {
    overflow: hidden;
}
.preloader-mark img {
    display: block;
    width: clamp(220px, 34vw, 480px);
    height: auto;
}
.preloader-mark span { display: inline-block; }
.preloader-count {
    font-family: var(--f-mono);
    font-size: 0.8rem;
    color: var(--fg-3);
    letter-spacing: 0.3em;
}
.preloader-bar {
    width: min(300px, 64vw);
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line);
}
.preloader-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--fg);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

/* ============================================================
   NAV
   ============================================================ */
.global-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    mix-blend-mode: difference;
}
.nav-left {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--fg);
}
.nav-right { display: flex; align-items: center; gap: 22px; }
.badge-2pct {
    font-family: var(--f-mono);
    border: 1px solid var(--fg);
    color: var(--fg);
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Text-slide button (mono) */
.text-link {
    position: relative;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--fg);
    background: none;
    border: none;
    overflow: hidden;
    height: 1.2em;
    display: inline-flex;
}
.text-link span {
    display: block;
    transition: transform 0.5s var(--ease-out-expo);
}
.text-link span::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 100%;
}
.text-link:hover span { transform: translateY(-100%); }

.menu-trigger {
    background: none; border: none;
    width: 26px; height: 12px;
    display: flex; flex-direction: column;
    justify-content: space-between;
}
.menu-trigger span {
    width: 100%; height: 1.5px;
    background: var(--fg);
    transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
    transform-origin: center;
}
.menu-trigger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-trigger.is-open span:nth-child(2) { opacity: 0; }
.menu-trigger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- MENÚ DE NAVEGACIÓN A PANTALLA COMPLETA (lo abre el hamburguesa) --- */
.nav-menu {
    position: fixed;
    inset: 0;
    z-index: 990;                 /* bajo la nav (1000) para no tapar la X */
    background: rgba(8, 8, 10, 0.96);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}
.nav-menu.is-open { opacity: 1; visibility: visible; }
.nav-menu-list { list-style: none; text-align: center; display: flex; flex-direction: column; gap: clamp(14px, 3vh, 30px); }
.nav-menu-list li {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 0.06s);
}
.nav-menu.is-open .nav-menu-list li { opacity: 1; transform: translateY(0); }
.nav-menu-link {
    background: none; border: none;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 4.5rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--fg);
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s var(--ease-out-expo);
}
.nav-menu-link:hover { color: var(--accent); transform: translateX(8px); }
body.nav-menu-open { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero-stage {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* --- VÍDEO DE LOGO A PANTALLA COMPLETA (FONDO DEL HERO) ---
   Sustituye al monograma SM de PNGs rotando. El MP4 (16:9) cubre todo el hero
   con object-fit: cover. Como un MP4 normal no tiene transparencia real, el
   "filtro" lo aporta una capa .hero-video-tint ENCIMA del vídeo: el vídeo (el
   logo) se ve a opacidad plena y solo se le superpone el tinte. */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;               /* detrás de la tagline (z-index: 3) */
    overflow: hidden;
}
.hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;        /* llena el hero recortando los bordes 16:9 */
    object-position: center;
    /* el logo a opacidad/brillo plenos: el tinte va en la capa de encima */
}
/* Capa de tinte/filtro sobre el vídeo. Oscurece y enfría hacia los bordes para
   integrar el 16:9 con el fondo de la página y dar contraste a la tagline.
   Si no te gusta, sube/baja el alpha o cambia el degradado. */
.hero-video-tint {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 42%, rgba(8, 8, 10, 0) 0%, rgba(8, 8, 10, 0.34) 62%, rgba(8, 8, 10, 0.7) 100%),
        linear-gradient(to bottom, rgba(8, 8, 10, 0.15) 0%, rgba(8, 8, 10, 0) 30%, rgba(8, 8, 10, 0.55) 100%);
    pointer-events: none;
}

/* --- TAGLINE "LA MEJOR EN CANARIAS 2%" --- texto grande, centrado abajo,
   con el "2%" como acento infrarrojo. Mezcla display sólido + número outline. */
.hero-tagline {
    position: absolute;
    bottom: clamp(48px, 8vh, 96px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: clamp(10px, 1.6vw, 22px);
    white-space: nowrap;
    pointer-events: none;
}
.hero-tagline-text {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 4.4vw, 3.6rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--fg);
    text-transform: uppercase;
}
.hero-tagline-pct {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 4.4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
    text-shadow: 0 0 26px rgba(255, 59, 47, 0.45);
    position: relative;
}
/* punto rojo parpadeante junto al 2% (señal "en vivo") */
.hero-tagline-pct::after {
    content: '';
    position: absolute;
    top: 0.05em; right: -0.55em;
    width: 0.16em; height: 0.16em;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: tagline-pulse 2.4s ease-in-out infinite;
}
@keyframes tagline-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}
.scroll-hint {
    position: absolute;
    bottom: clamp(20px, 3vh, 32px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--fg-3);
    letter-spacing: 0.18em;
}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    background: var(--bg);
}
.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
.marquee-track span {
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 28px;
    color: var(--fg);
    white-space: nowrap;
}
.marquee-track span em {
    font-style: normal;
    color: var(--accent);
    -webkit-text-stroke: 1px var(--accent);
    color: transparent;
}

/* ============================================================
   TEASER / COUNTDOWN
   ============================================================ */
.teaser-stage {
    position: relative;
    width: 100%;
    min-height: 88vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.teaser-bg-blur {
    position: absolute;
    inset: -10%;
    background-image: url('assets/drop_delta/teaser/597869718_17920587888212725_498460472942606103_n..jpg');
    background-size: cover;
    background-position: center 28%;
    filter: blur(22px) brightness(0.32) grayscale(45%);
    transform: scale(1.1);
    z-index: 0;
    will-change: transform;
}
.teaser-stage::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(10,10,10,0.85) 100%);
    z-index: 1;
}
/* El texto del countdown va POR ENCIMA de las prendas arrastrables (z-50 > las
   shirts en z-20/40) para que, al pasar una prenda por encima, el temporizador y
   el texto sigan leyéndose: la prenda "atraviesa" por detrás del texto.
   pointer-events: none deja que el arrastre de las prendas pase a través. */
.countdown-overlay {
    position: relative;
    z-index: 50;
    text-align: center;
    padding: 40px;
    max-width: 900px;
    pointer-events: none;
    /* halo de legibilidad: aunque pase una prenda por detrás, el texto resalta */
    text-shadow: 0 2px 18px rgba(8, 8, 10, 0.85), 0 0 4px rgba(8, 8, 10, 0.9);
}
.status-tag {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    color: var(--accent);
    display: block;
    margin-bottom: 28px;
}
#countdown-clock {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-family: var(--f-display);
    font-size: clamp(2.4rem, 9vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 28px;
    line-height: 1;
}
.time-block { display: flex; align-items: baseline; }
.time-block .unit {
    font-family: var(--f-mono);
    font-size: clamp(0.7rem, 1.4vw, 1rem);
    color: var(--fg-3);
    margin: 0 12px 0 4px;
    letter-spacing: 0;
}
.divider { color: var(--fg-3); padding: 0 6px; }
.cryptic-teaser {
    font-family: var(--f-mono);
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    color: var(--fg-2);
    letter-spacing: 0.04em;
}
.drop-live { color: var(--accent); }

/* ============================================================
   PRÓXIMO DROP — prendas flotantes arrastrables (+ humo de color)
   ============================================================ */
/* Canvas global de humo: fijo sobre el viewport, deja pasar los clics.
   z-index entre el fondo del sitio y las prendas arrastrables. */
/* z-index bajo a propósito: las prendas arrastrables (.drag-shirt, z-20) viven
   anidadas en una sección con z-index:auto, así que participan en el contexto
   raíz y pintan POR ENCIMA de este canvas. El humo queda detrás de la prenda
   (sale de su centro y se expande), sobre el fondo oscuro del teaser. */
#smoke-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;   /* crucial: clics atraviesan el humo */
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    #smoke-canvas { display: none; }
}

/* Zona donde flotan las prendas (ocupa toda la sección del teaser). El texto
   del countdown queda por encima y centrado; las prendas se reparten alrededor. */
.upcoming-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;   /* solo las prendas capturan el puntero */
}
.drag-shirt {
    position: absolute;
    width: clamp(92px, 10.5vw, 168px);
    aspect-ratio: 3 / 4;
    pointer-events: auto;   /* arrastrable */
    cursor: grab;
    z-index: 20;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;     /* permite arrastrar en táctil sin hacer scroll */
    border: none;
    background: none;
    padding: 0;
    will-change: transform;
}
.drag-shirt:active { cursor: grabbing; }
.drag-shirt img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* prenda borrosa "fantasma" del próximo drop: desenfoque + halo de su color */
    filter: blur(3px) saturate(1.15)
            drop-shadow(0 20px 36px rgba(0, 0, 0, 0.55));
    transition: filter 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
/* al pasar/arrastrar, la prenda se aclara un poco (se "revela" el color) */
.drag-shirt:hover img,
.drag-shirt.is-dragging img {
    filter: blur(1.5px) saturate(1.3) brightness(1.08)
            drop-shadow(0 26px 44px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 30px var(--halo, rgba(140,200,255,0.4)));
}
.drag-shirt.is-dragging { z-index: 40; cursor: grabbing; }
/* etiqueta con el nombre del color, bajo la prenda */
.drag-shirt-label {
    position: absolute;
    bottom: -22px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-3);
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.3s ease;
}
.drag-shirt:hover .drag-shirt-label,
.drag-shirt.is-dragging .drag-shirt-label { color: var(--halo-solid, var(--accent)); }

/* Flotación idle: trayectorias más vivas (bob + deriva lateral + giro), con 3
   variantes para que las prendas no se muevan al unísono. Se pausa al arrastrar.
   Variables por prenda (las fija app.js): --bob recorrido vertical, --driftX
   deriva horizontal, --rot amplitud de giro, --tilt inclinación base. */
@keyframes shirt-float-1 {
    0%   { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
    25%  { transform: translate(var(--driftX, 12px), calc(var(--bob, 30px) * -0.5)) rotate(var(--rot, 8deg)); }
    50%  { transform: translate(0, calc(var(--bob, 30px) * -1)) rotate(var(--tilt, 0deg)); }
    75%  { transform: translate(calc(var(--driftX, 12px) * -1), calc(var(--bob, 30px) * -0.5)) rotate(calc(var(--rot, 8deg) * -1)); }
    100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
}
@keyframes shirt-float-2 {
    0%   { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
    33%  { transform: translate(calc(var(--driftX, 12px) * -1), calc(var(--bob, 30px) * -0.7)) rotate(calc(var(--rot, 8deg) * -1)); }
    66%  { transform: translate(var(--driftX, 12px), calc(var(--bob, 30px) * -0.35)) rotate(var(--rot, 8deg)); }
    100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
}
@keyframes shirt-float-3 {
    0%   { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
    20%  { transform: translate(var(--driftX, 12px), calc(var(--bob, 30px) * -0.4)) rotate(var(--rot, 8deg)); }
    50%  { transform: translate(calc(var(--driftX, 12px) * 0.4), calc(var(--bob, 30px) * -1)) rotate(calc(var(--rot, 8deg) * 0.3)); }
    80%  { transform: translate(calc(var(--driftX, 12px) * -1), calc(var(--bob, 30px) * -0.4)) rotate(calc(var(--rot, 8deg) * -1)); }
    100% { transform: translate(0, 0) rotate(var(--tilt, 0deg)); }
}
.drag-shirt:not(.is-dragging):not(.was-dragged) {
    animation: shirt-float-1 var(--float-dur, 7s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
.drag-shirt--v2:not(.is-dragging):not(.was-dragged) { animation-name: shirt-float-2; }
.drag-shirt--v3:not(.is-dragging):not(.was-dragged) { animation-name: shirt-float-3; }

@media (max-width: 720px) {
    /* en móvil hay poco espacio: prendas más pequeñas */
    .drag-shirt { width: clamp(78px, 26vw, 120px); }
}

/* ============================================================
   ARCHIVE GRID (+ WebGL distortion layer)
   ============================================================ */
.catalog-stage {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 40px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 64px;
    flex-wrap: wrap;
}
.section-header h2 {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.03em;
    max-width: 14ch;
}
.section-header h2 .line { display: block; overflow: hidden; }
.section-header h2 .line > span { display: inline-block; }
.section-header .h-index {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--fg-3);
    letter-spacing: 0.2em;
    white-space: nowrap;
    padding-bottom: 0.4em;
}

/* --- CUBOS DE HIELO FLOTANTES (camiseta congelada dentro) ---
   Reemplazan a las antiguas tarjetas de foto. Grandes, sin marco, flotando
   sobre el fondo oscuro. Clic → rotura con esquirlas → modal del producto. */
.squad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 64px);
    position: relative;
    z-index: 2;
    align-items: end;
}
.ice-cube {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    will-change: transform, filter;
    transition: transform 0.5s var(--ease-out-expo), opacity 0.4s ease;
}
.cube-holder {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 434 / 575;
}
.cube-img {
    width: 100%; height: 100%;
    object-fit: contain;
    /* el cubo flota: sombra de contacto + halo de hielo */
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 34px rgba(140, 200, 255, 0.12));
    transition: filter 0.6s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    will-change: transform, filter;
}
/* flotación sutil e infinita (escalonada con --i) */
@keyframes cube-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.cube-holder .cube-img { animation: cube-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.8s); }

.cube-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(244, 242, 238, 0.22);
    font-family: var(--f-mono);
    font-size: 0.98rem;
    /* habilita la profundidad 3D para el texto extruido de abajo */
    transform-style: preserve-3d;
    perspective: 600px;
}
/* Texto 3D extruido: pila de sombras desplazadas (efecto bloque) + ligera
   inclinación en Z, así el nombre y el precio se "levantan" de la tarjeta.
   La variable --depth controla el grosor de la extrusión. */
.look-title, .look-price {
    --depth: #2a2a2e;
    transform: translateZ(6px);
    transition: transform 0.5s var(--ease-out-expo), text-shadow 0.5s var(--ease-out-expo), color 0.4s ease;
    will-change: transform;
}
.look-title {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    text-shadow:
        1px 1px 0 var(--depth), 2px 2px 0 var(--depth),
        3px 3px 0 var(--depth), 4px 4px 0 var(--depth),
        5px 5px 8px rgba(0, 0, 0, 0.6);
}
.look-price {
    margin-left: auto;
    font-weight: 700;
    color: var(--fg);            /* antes atenuado; ahora pleno para que resalte */
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-shadow:
        1px 1px 0 var(--depth), 2px 2px 0 var(--depth),
        3px 3px 0 var(--depth), 4px 4px 7px rgba(0, 0, 0, 0.55);
}
/* en hover el texto se levanta más y la extrusión se tiñe de infrarrojo */
.ice-cube:hover .look-title,
.ice-cube:hover .look-price {
    --depth: #3a0f0d;
    transform: translateZ(18px);
    text-shadow:
        1px 1px 0 var(--depth), 2px 2px 0 var(--depth),
        3px 3px 0 var(--depth), 4px 4px 0 var(--depth),
        6px 6px 0 var(--depth), 8px 10px 16px rgba(0, 0, 0, 0.6);
}
.cube-status {
    font-size: 0.6rem; letter-spacing: 0.18em; padding: 3px 8px;
    border: 1px solid var(--line);
}
.cube-status--limited { color: var(--accent); border-color: var(--accent); }
.cube-status--off-sale { color: var(--fg-3); }

/* Hover: el cubo se eleva, brilla y crece un poco; los demás del grid se atenúan */
.squad-grid:hover .ice-cube:not(:hover) { opacity: 0.45; }
.ice-cube:hover { transform: translateY(-10px); }
.ice-cube:hover .cube-img {
    transform: scale(1.05);
    filter: brightness(1.18)
            drop-shadow(0 38px 50px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 60px rgba(140, 200, 255, 0.42));
}
.ice-cube:hover .look-price { color: var(--accent); }

/* Rotura del cubo: el PNG se fractura por clip-path + esquirlas voladoras */
.ice-cube.is-shattering { z-index: 6; }
.ice-cube.is-shattering .cube-img {
    animation: sx-shatter 0.52s cubic-bezier(0.36,0,0.66,-0.56) forwards;
}

.catalog-footer {
    margin-top: clamp(72px, 10vw, 140px);
    padding-top: 60px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
.footer-note {
    font-family: var(--f-mono);
    font-size: 0.85rem;
    color: var(--fg-2);
    letter-spacing: 0.03em;
    max-width: 420px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.cta-btn {
    position: relative;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #000;
    background: var(--fg);
    border: none;
    padding: 20px 56px;
    border-radius: 100px;
    overflow: hidden;
    will-change: transform;
    isolation: isolate;
}
/* Texto negro fijo (sin mix-blend-mode: antes se invertía sobre el relleno
   rojo del hover). Negro sobre crema y sobre el infrarrojo se lee bien. */
.cta-btn span { position: relative; z-index: 2; color: #000; }
.cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--accent);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease-out-expo);
}
.cta-btn:hover::before { transform: translateY(0); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 40px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--fg-3);
    border-top: 1px solid var(--line);
}

/* ============================================================
   REVEAL STATES (driven by GSAP / observer)
   ============================================================ */
[data-reveal] { opacity: 0; }
.split-line { display: block; overflow: hidden; }
.split-line > span,
.split-word { display: inline-block; will-change: transform; }

/* Focus — visible AND on-brand */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ============================================================
   INSTAGRAM — últimas 3 publicaciones (3 columnas)
   Reposo: imagen atenuada bajo un velo plata frío. Hover: el velo se disuelve,
   la imagen recupera color/saturación y emergen likes + pie de foto.
   ============================================================ */
.ig-stage {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 40px;
}
.ig-stage .ig-handle { text-decoration: none; transition: color 0.3s var(--ease-out-expo); }
.ig-stage .ig-handle:hover { color: var(--accent); }
.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.4vw, 22px);
}
.ig-cell {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--fg);
    isolation: isolate;
}
.ig-img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* reposo: frío, plata, desaturado */
    filter: grayscale(0.7) contrast(1.05) brightness(0.82);
    transform: scale(1.04);
    transition: filter 0.6s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.ig-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* velo plata frío que se disuelve al hover */
    background: linear-gradient(180deg, rgba(180,196,210,0.18) 0%, rgba(10,12,16,0.55) 100%);
    mix-blend-mode: screen;
    opacity: 1;
    transition: opacity 0.6s var(--ease-out-expo);
}
.ig-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(14px, 1.6vw, 24px);
    background: linear-gradient(0deg, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0) 100%);
    transform: translateY(16px);
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.ig-likes {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.ig-caption {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(0.92rem, 1.3vw, 1.15rem);
    line-height: 1.25;
    color: var(--fg);
}
.ig-cell:hover .ig-img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1); }
.ig-cell:hover .ig-overlay { opacity: 0; }
.ig-cell:hover .ig-meta { opacity: 1; transform: translateY(0); }

/* ============================================================
   LOOKBOOK — carrusel con profundidad de campo (peek desenfocado)
   La diapositiva central va nítida y grande; las contiguas asoman a los flancos
   desenfocadas, oscurecidas y escaladas. El posicionamiento se calcula desde
   --d (distancia con signo al índice activo) que fija app.js.
   ============================================================ */
.lookbook-stage {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 0;   /* sin padding lateral: el peek llega al borde */
    overflow: hidden;
}
.lookbook-stage .section-header { padding: 0 40px; }
.lookbook-viewport {
    position: relative;
    width: 100%;
    height: clamp(380px, 64vh, 760px);
    outline: none;
}
.lookbook-track {
    position: absolute;
    inset: 0;
    /* las diapositivas se apilan en el centro y se desplazan con translateX(--d) */
}
.lb-slide {
    position: absolute;
    top: 50%; left: 50%;
    margin: 0;
    width: clamp(280px, 42vw, 560px);
    height: 100%;
    /* app.js fija --shift (px con signo según la distancia al centro) y --scale.
       Evitamos abs()/min() en CSS por compatibilidad: el cálculo vive en JS. */
    transform:
        translate(-50%, -50%)
        translateX(var(--shift, 0px))
        scale(var(--scale, 1));
    transition: transform 0.7s var(--ease-out-expo), filter 0.7s var(--ease-out-expo), opacity 0.7s var(--ease-out-expo);
    will-change: transform, filter, opacity;
}
.lb-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    border: 1px solid var(--line);
}
.lb-slide.is-active { z-index: 3; filter: none; opacity: 1; }
.lb-slide.is-prev, .lb-slide.is-next {
    z-index: 2;
    filter: blur(8px) brightness(0.6) grayscale(0.4);
    opacity: 0.5;
    cursor: pointer;
}
.lb-slide.is-far {
    z-index: 1;
    filter: blur(14px) brightness(0.4) grayscale(0.6);
    opacity: 0;   /* fuera de los tres visibles: oculto */
}
.lookbook-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: clamp(48px, 4vw, 64px);
    height: clamp(48px, 4vw, 64px);
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(8px);
    color: var(--fg);
    font-family: var(--f-display);
    font-size: 1.4rem;
    display: grid; place-items: center;
    transition: background 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.lookbook-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.lookbook-prev { left: clamp(16px, 4vw, 64px); }
.lookbook-next { right: clamp(16px, 4vw, 64px); }

/* ============================================================
   REELS — stream de vídeos verticales con autoplay al entrar en viewport
   Bucle en silencio tipo IG. reel-fallback se muestra cuando el MP4 aún no
   existe (.reel-missing) o mientras carga el póster.
   ============================================================ */
.reels-stage {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 40px;
}
.reels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
}
.reel-card {
    position: relative;
    margin: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    isolation: isolate;
}
.reel-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}
/* placeholder de fondo: visible bajo el vídeo; cuando el MP4 falta, el vídeo
   no pinta nada y este queda a la vista. */
.reel-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(140,200,255,0.06), transparent 60%),
        var(--bg-elev);
}
.reel-fallback-mark {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    letter-spacing: 0.18em;
    color: var(--fg-3);
}
.reel-fallback-note {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: var(--fg-3);
}
/* cuando el vídeo no existe, ocultamos el <video> para que no tape el fallback */
.reel-card.reel-missing .reel-video { opacity: 0; }
.reel-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: clamp(12px, 1.4vw, 20px);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--fg);
    background: linear-gradient(0deg, rgba(8,8,8,0.82) 0%, rgba(8,8,8,0) 100%);
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .squad-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .global-nav { padding: 20px; }
    .nav-right { gap: 14px; }
    .squad-grid { grid-template-columns: 1fr; gap: 48px; }
    .catalog-stage { padding: 80px 20px; }
    .site-footer { flex-direction: column; align-items: center; text-align: center; }
    .hero-tagline { gap: 10px; white-space: normal; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 20px; text-align: center; }

    /* Nuevas secciones de medios en móvil */
    .ig-stage, .reels-stage { padding: 80px 20px; }
    .ig-grid { grid-template-columns: 1fr; gap: 14px; }
    .ig-meta { opacity: 1; transform: none; }                 /* sin hover: meta siempre visible */
    .ig-img { filter: grayscale(0.3) brightness(0.92); transform: none; }
    .ig-overlay { opacity: 0.5; }
    .reels-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .lookbook-stage .section-header { padding: 0 20px; }
    .lb-slide { width: 76vw; }
    .lookbook-prev { left: 12px; }
    .lookbook-next { right: 12px; }
}
@media (max-width: 420px) {
    .reels-grid { grid-template-columns: 1fr; }
}

/* El vídeo del hero es full-bleed (object-fit: cover), así que se adapta solo
   en móvil; no necesita override de tamaño. */

/* ============================================================
   COMMERCE — card status, cart drawer, Galaxy modal, shatter
   (ported from the Next.js build; uses the infrared token system)
   ============================================================ */

/* Precio en la tarjeta (sustituye al antiguo look-drop). El color/tamaño base
   y la sombra 3D los define el bloque de .look-price de arriba; aquí solo el
   layout para no pisar la mejora de visibilidad. */
.look-price {
    margin-left: auto;
    white-space: nowrap;
}

/* Etiqueta de estado sobre la imagen de la tarjeta */
.card-status {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 4;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    padding: 3px 8px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(6px);
}
.card-status--limited { color: var(--accent); border: 1px solid var(--accent); }
.card-status--off-sale { color: var(--fg-3); border: 1px solid var(--line); }

/* Bloquear scroll de fondo cuando hay overlay */
html.overlay-open body { overflow: hidden; }

/* Cart trigger en la nav */
.cart-trigger {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--fg);
    background: none;
    border: none;
}
.cart-trigger .cart-count { color: var(--accent); }

/* Scrim compartido (drawer + modal) */
.overlay-scrim {
    position: fixed; inset: 0;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out-expo), visibility 0.4s;
    z-index: 8000;
}
.overlay-scrim.is-active { opacity: 1; visibility: visible; }

/* ---------- CART DRAWER ---------- */
.cart-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(420px, 92vw);
    height: 100%;
    background: var(--bg-elev);
    border-left: 1px solid var(--line);
    z-index: 8500;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 28px;
    border-bottom: 1px solid var(--line);
}
.cart-title { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--accent); }
.cart-close, .cart-clear, .cart-line-remove, .galaxy-close {
    font-family: var(--f-mono);
    background: none; border: none;
    color: var(--fg-2);
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    transition: color 0.3s ease;
}
.cart-close:hover, .galaxy-close:hover { color: var(--accent); }
.cart-body { flex: 1; overflow-y: auto; padding: 18px 28px; }
.cart-empty { font-family: var(--f-mono); text-align: center; margin-top: 60px; color: var(--fg-3); letter-spacing: 0.2em; font-size: 0.78rem; }
.cart-line {
    display: flex; gap: 16px;
    border: 1px solid var(--line);
    padding: 12px;
    margin-bottom: 14px;
}
.cart-line img { width: 64px; height: 80px; object-fit: cover; flex: none; filter: grayscale(20%); }
.cart-line-info { flex: 1; display: flex; flex-direction: column; }
.cart-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cart-line-name { font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; }
.cart-line-remove:hover { color: var(--accent); }
.cart-line-size { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--fg-3); margin-top: 2px; }
.cart-line-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--line); }
.qty-stepper button { background: none; border: none; color: var(--fg); width: 26px; height: 26px; font-size: 0.9rem; transition: color 0.2s; }
.qty-stepper button:hover { color: var(--accent); }
.qty-val { font-family: var(--f-mono); min-width: 26px; text-align: center; font-size: 0.78rem; }
.cart-line-price { font-family: var(--f-mono); font-size: 0.78rem; }
.cart-foot { border-top: 1px solid var(--line); padding: 22px 28px; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cart-subtotal span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--fg-2); }
.cart-sub-val { font-family: var(--f-display); font-size: 1.3rem; }
.cart-checkout { width: 100%; padding: 16px; border-radius: 0; }
/* Aviso "próximamente" del checkout (mientras no haya Shopify conectado). */
.cart-checkout-note {
    font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em;
    color: var(--accent); text-align: center; margin-top: 10px;
    opacity: 0; transition: opacity 0.4s var(--ease-out-expo);
}
.cart-checkout-note.is-on { opacity: 1; }
.cart-clear { display: block; width: 100%; margin-top: 12px; padding: 8px; color: var(--fg-3); }
.cart-clear:hover { color: var(--accent); }

/* ---------- GALAXY MODAL ---------- */
.galaxy-modal {
    position: fixed; inset: 0;
    z-index: 8600;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 40px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease-out-expo), visibility 0.4s;
}
.galaxy-modal.is-open { opacity: 1; visibility: visible; }
.galaxy-inner {
    position: relative;
    width: min(1100px, 100%);
    max-height: 100%;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.5s var(--ease-out-expo);
}
.galaxy-modal.is-open .galaxy-inner { transform: scale(1); }
.galaxy-close {
    position: absolute; top: 16px; right: 16px; z-index: 5;
    background: rgba(10,10,10,0.6); backdrop-filter: blur(6px);
    border: 1px solid var(--line); padding: 6px 10px;
}
/* Galería del producto = carrusel con foto central + laterales asomando.
   A diferencia del lookbook, los lados quedan TOTALMENTE visibles (sin blur),
   sólo escalados y un punto atenuados. */
.galaxy-gallery {
    background: var(--bg);
    padding: clamp(14px, 2vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}
.galaxy-eyebrow { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--accent); display: block; }
.gal-viewport {
    position: relative;
    flex: 1;
    min-height: clamp(360px, 60vh, 640px);
    outline: none;
    overflow: hidden;
}
.gal-track { position: absolute; inset: 0; }
.gal-slide {
    position: absolute;
    top: 50%; left: 50%;
    margin: 0;
    width: clamp(220px, 56%, 460px);
    height: 92%;
    transform:
        translate(-50%, -50%)
        translateX(var(--shift, 0px))
        scale(var(--scale, 1));
    transition: transform 0.6s var(--ease-out-expo), opacity 0.6s var(--ease-out-expo);
    will-change: transform, opacity;
}
.gal-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    border: 1px solid var(--line);
}
.gal-slide.is-active { z-index: 3; opacity: 1; }
.gal-slide.is-side  { z-index: 2; opacity: 0.82; cursor: pointer; }  /* visibles, sin blur */
.gal-slide.is-far   { z-index: 1; opacity: 0; }                      /* fuera de los 3: ocultos */

.gal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: clamp(40px, 3.4vw, 52px);
    height: clamp(40px, 3.4vw, 52px);
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(8px);
    color: var(--fg);
    font-family: var(--f-display);
    font-size: 1.2rem;
    display: grid; place-items: center;
    transition: background 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}
.gal-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.gal-prev { left: clamp(8px, 1.5vw, 16px); }
.gal-next { right: clamp(8px, 1.5vw, 16px); }

.galaxy-panel { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; border-left: 1px solid var(--line); overflow-y: auto; }
.galaxy-drop { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.28em; color: var(--accent); }
/* Nombre del producto en el modal: mismo lenguaje 3D extruido que las tarjetas,
   a mayor escala. La extrusión usa un degradado de sombras desplazadas. */
.galaxy-name {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 0.95;
    margin-top: 8px; letter-spacing: -0.02em;
    color: var(--fg);
    text-shadow:
        1px 1px 0 #232327, 2px 2px 0 #202024,
        3px 3px 0 #1c1c20, 4px 4px 0 #161619,
        5px 5px 0 #121215, 7px 9px 18px rgba(0, 0, 0, 0.6);
}
.galaxy-price {
    font-family: var(--f-mono); font-size: 1.1rem; color: var(--accent); margin-top: 10px;
    text-shadow: 1px 1px 0 #3a0f0d, 2px 2px 0 #2a0b0a, 3px 4px 10px rgba(0, 0, 0, 0.5);
}
.galaxy-desc { font-family: var(--f-mono); font-size: 0.82rem; color: var(--fg-2); line-height: 1.7; margin-top: 16px; }
/* Composición/material del producto (placeholder editable por producto). */
.galaxy-material {
    font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
    color: var(--fg-3); margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--line); text-transform: uppercase;
}
.galaxy-sizes { margin-top: 28px; }
.sizes-label { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--fg-3); }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.size-btn {
    font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em;
    padding: 12px 0; background: none; color: var(--fg);
    border: 1px solid var(--line);
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.size-btn:hover:not(.is-out) { border-color: var(--accent); color: var(--accent); }
.size-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.size-btn.is-out { color: var(--fg-3); text-decoration: line-through; cursor: not-allowed; opacity: 0.5; }

/* Panel de medidas (aparece al elegir talla): columnas hombre / mujer. */
.size-measure {
    margin-top: 14px;
    border: 1px solid var(--line);
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    animation: measure-in 0.4s var(--ease-out-expo);
}
@keyframes measure-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.measure-title {
    display: block;
    font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.22em;
    color: var(--accent); margin-bottom: 12px;
}
.measure-title em { color: var(--fg-3); font-style: normal; letter-spacing: 0.1em; }
.measure-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.measure-head {
    display: block;
    font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em;
    color: var(--fg-3); margin-bottom: 8px;
    border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.measure-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.measure-col li { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 0.72rem; }
.m-key { color: var(--fg-3); letter-spacing: 0.06em; }
.m-val { color: var(--fg); font-weight: 700; white-space: nowrap; }

.archive-lock { border: 1px dashed var(--line); padding: 18px; text-align: center; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--fg-3); }
.galaxy-status { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.status-line { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; }
.status-line.is-active { color: var(--accent); }
.status-line.is-accent { color: var(--accent); }
.status-line.is-muted { color: var(--fg-3); }
.status-crit { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent); }
.status-stock { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--fg-2); }
.galaxy-add { margin-top: auto; width: 100%; border-radius: 0; padding: 18px; }
.galaxy-add:disabled { background: transparent; color: var(--fg-3); border: 1px solid var(--line); cursor: not-allowed; }
.galaxy-add:disabled span { color: var(--fg-3); }  /* deshabilitado: gris, no negro */
.galaxy-add:disabled::before { display: none; }

/* ---------- SHATTER ---------- */
@keyframes sx-shatter {
    0%   { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: scale(1); opacity: 1; }
    40%  { clip-path: polygon(0 0,40% 8%,100% 0,92% 45%,100% 100%,55% 90%,0 100%,8% 50%); transform: scale(1.04); }
    100% { clip-path: polygon(20% 20%,35% 12%,70% 28%,60% 50%,80% 80%,45% 65%,25% 78%,30% 45%); transform: scale(1.16); opacity: 0; }
}
/* Capa de esquirlas: perspective hace que el empuje en Z se lea como cristales
   volando HACIA el espectador (efecto "se rompe en tu cara"). */
.shard-layer {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 6;
    perspective: 620px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}
.shard {
    position: absolute; left: 50%; top: 50%;
    transform-style: preserve-3d;
    /* cristal de hielo: gradiente helado con borde brillante */
    background: linear-gradient(135deg,
        rgba(220, 240, 255, 0.95) 0%,
        rgba(150, 205, 245, 0.55) 45%,
        rgba(244, 242, 238, 0.85) 100%);
    box-shadow: 0 0 14px rgba(170, 215, 250, 0.6),
                inset 0 0 6px rgba(255, 255, 255, 0.7);
    clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    will-change: transform, opacity;
    animation: sx-shard-3d 0.78s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--delay, 0s);
}
/* tres facetas de cristal distintas para variedad */
.shard[data-facet="1"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shard[data-facet="2"] { clip-path: polygon(20% 0, 80% 10%, 100% 70%, 55% 100%, 0 60%); }

@keyframes sx-shard-3d {
    0% {
        transform: translate3d(-50%, -50%, 0) rotateX(0) rotateY(0) rotateZ(0) scale(0.4);
        opacity: 0;
    }
    18% { opacity: 1; }
    100% {
        transform:
            translate3d(calc(-50% + var(--dx)), calc(-50% + var(--dy)), var(--dz))
            rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(1.15);
        opacity: 0;
    }
}

@media (max-width: 860px) {
    .galaxy-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .galaxy-panel { border-left: none; border-top: 1px solid var(--line); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; }
    .cursor, .cursor-ring { display: none; }
    /* el vídeo del hero se pausa vía JS en reduce-motion (CSS no controla play) */
    .cube-holder .cube-img { animation: none !important; }
}