/* The End of Times · Sportswear */
:root {
  --bg: #0E0B1A;
  --bg-2: #140F24;
  --panel: #17122A;
  --line: #2E2550;
  --line-strong: #4A3D7A;
  --text: #F4EFFF;
  --text-2: #CFC6E6;
  --muted: #B7AECF;
  --accent: #C084FC;
  --accent-ink: #0E0B1A;
  --star: #F5E663;
  --link: #D8B4FE;
  --display: 'Audiowide', 'Arial Black', sans-serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--link); }
a:hover { color: var(--star); }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.display { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; }
.display--md { font-size: clamp(32px, 4vw, 44px); }
.display--sm { font-size: 24px; }

/* Barra superior */
.topbar {
  background: var(--star); color: var(--bg);
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-align: center; padding: 8px 16px;
}

/* Encabezado */
.header { border-bottom: 2px solid var(--line); }
.header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--display); font-size: 22px; line-height: 1; }
.brand__sub { font-size: 11px; font-weight: 700; letter-spacing: .42em; color: var(--accent); margin-top: 4px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; font-size: 15px; font-weight: 600; }
.nav a { text-decoration: none; }
.cart-btn {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--line-strong); background: var(--panel); color: var(--text); font-weight: 600;
}
.badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 0;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.btn--ghost { border: 2px solid var(--line-strong); color: var(--text); background: none; }
.btn--ghost:hover { color: var(--text); border-color: var(--accent); }
.btn--block { width: 100%; min-height: 52px; font-size: 16px; }
.link-btn { background: none; border: 0; padding: 0; min-height: 44px; color: var(--link); font-weight: 600; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--line-strong);
  background: none; color: var(--text); display: flex; align-items: center; justify-content: center;
}

/* Portada */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.hero__copy { flex: 999 1 520px; min-width: 0; }
.hero__art { flex: 1 1 320px; display: flex; justify-content: center; }
.hero__art img { width: 100%; max-width: 460px; }
.eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .3em; color: var(--star); }
.hero h1 { font-size: clamp(38px, 5.5vw, 70px); }
.lead { margin: 24px 0 0; max-width: 560px; color: var(--text-2); font-size: 18px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.perks { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--bg-2); }
.perks__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.perks__row span { display: flex; align-items: center; gap: 8px; }

/* Catálogo */
.catalog { padding-top: 64px; padding-bottom: 24px; scroll-margin-top: 16px; }
.catalog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.catalog__head p { margin: 8px 0 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 2px solid var(--line-strong); background: transparent; color: var(--text);
  font-size: 14px; font-weight: 700;
}
.pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.card__art { height: 260px; display: flex; align-items: center; justify-content: center; }
.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.card__cat { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }
.card__name { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.15; }
.card__desc { margin: 0; color: var(--muted); font-size: 14px; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.size {
  min-width: 44px; min-height: 36px; padding: 0 8px; border-radius: 8px;
  border: 2px solid var(--line-strong); background: transparent; color: var(--text);
  font-size: 13px; font-weight: 700;
}
.size[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.card__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.card__price { font-size: 20px; font-weight: 700; }
.card__buy .btn { min-height: 44px; padding: 0 20px; }

/* Pago */
.checkout { padding-top: 48px; padding-bottom: 72px; }
.checkout h1 { margin: 8px 0 32px; }
.checkout__cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.checkout__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.box { margin: 0; padding: 24px; border: 2px solid var(--line); border-radius: 16px; background: var(--panel); }
.box legend { padding: 0 8px; font-weight: 700; }
.box--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.box label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.box input {
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--text);
}
.box input[aria-invalid="true"] { border-color: #FF4FA3; }
.span-all { grid-column: 1 / -1; }
.pay-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.pay-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 12px 18px; border-radius: 12px;
  border: 2px solid var(--line-strong); background: var(--bg); color: var(--text); text-align: left;
}
.pay-opt__text { display: flex; flex-direction: column; }
.pay-opt__text strong { font-weight: 700; }
.pay-opt__text span { font-size: 13px; color: var(--muted); }
.pay-opt__dot { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--line-strong); flex-shrink: 0; }
.pay-opt[aria-pressed="true"] { border-color: var(--accent); }
.pay-opt[aria-pressed="true"] .pay-opt__dot { border-color: var(--accent); background: var(--accent); }
.form-error { margin: 0; color: #FF8AC2; font-weight: 600; }

.summary { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.summary__title { margin: 0; font-size: 18px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sum-line span:first-child { color: var(--text-2); }
.totals { border-top: 2px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.totals div { display: flex; justify-content: space-between; }
.totals__total { font-size: 20px; font-weight: 700; padding-top: 6px; }

/* Confirmación */
.done { max-width: 720px; padding-top: 96px; padding-bottom: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.done .lead, .done p { margin: 0; }
.done__check {
  width: 72px; height: 72px; border-radius: 999px; border: 3px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.done .btn { margin-top: 16px; }

/* Pie */
.footer { border-top: 2px solid var(--line); margin-top: 48px; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; color: var(--muted); }
.footer__col { display: flex; flex-direction: column; gap: 6px; }
.footer__brand { font-family: var(--display); font-size: 20px; color: var(--text); }

/* Carrito */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__backdrop { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0, 0, 0, .6); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--bg-2); border-left: 2px solid var(--line); display: flex; flex-direction: column;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 2px solid var(--line); }
.drawer__body { flex-grow: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.drawer__foot { border-top: 2px solid var(--line); padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.drawer__foot .row { display: flex; justify-content: space-between; font-size: 14px; }
.drawer__foot .row--total { font-size: 18px; font-weight: 700; }
.free-msg { margin: 0; font-size: 13px; font-weight: 600; color: var(--star); }
.empty { margin: 32px 0; color: var(--muted); text-align: center; }
.cline { display: flex; gap: 14px; align-items: center; }
.cline__thumb { width: 56px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cline__info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cline__name { font-weight: 700; }
.cline__meta { font-size: 13px; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button:not(.remove) { width: 44px; height: 36px; border-radius: 8px; border: 2px solid var(--line-strong); background: none; color: var(--text); }
.qty output { min-width: 24px; text-align: center; }
.remove { margin-left: auto; min-height: 36px; background: none; border: 0; color: var(--link); font-size: 13px; text-decoration: underline; }

body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Editorial refresh */
:root{--bg:#131313;--bg-2:#1b1b1b;--panel:#1b1b1b;--line:#343235;--line-strong:#625c66;--text:#f6f2ec;--text-2:#d4cdcf;--muted:#b5aeb6;--accent:#c0a5dc;--accent-ink:#19151e;--star:#d1d6a8;--link:#e3d4f0;--display:'Space Grotesk',Arial,sans-serif}
.wrap{max-width:1360px;padding-left:5%;padding-right:5%}.topbar{font-size:10px;letter-spacing:1.8px;background:#c0a5dc;padding:10px}.header{border-width:1px}.header__row{padding-top:20px;padding-bottom:20px}.brand img{width:42px;height:42px}.brand__name{font-size:19px;font-weight:700;letter-spacing:-.8px}.brand__sub{font-size:8px;letter-spacing:3px;color:var(--muted);margin-top:8px}.nav{font-size:12px;gap:24px}.nav a{color:var(--text)}.cart-btn{border-radius:3px;border-width:1px;background:transparent;font-size:12px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:55px;padding-bottom:25px}.hero__copy{max-width:620px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent)}.hero h1{font-size:clamp(45px,5.7vw,80px);font-weight:600;letter-spacing:-4px;line-height:1.04}.lead{font-size:16px;max-width:410px;line-height:1.8;color:var(--muted)}.hero__ctas{margin-top:35px}.btn{border-radius:3px;font-size:12px;min-height:48px;padding:0 22px}.btn--ghost{border-width:1px}.hero__art{position:relative;min-width:0;aspect-ratio:4/4.6;overflow:hidden;background:#38303c}.hero__art img{width:100%;height:100%;max-width:none;object-fit:cover}.campaign-tag{position:absolute;z-index:1;bottom:22px;left:22px;color:white;font-size:10px;letter-spacing:3px;text-shadow:0 1px 10px #000}.campaign-caption{font-size:9px;color:#aba4ab;text-align:right;margin-top:0;margin-bottom:30px}.perks{border-width:1px;background:transparent}.perks__row{font-size:11px;font-weight:400;padding-top:22px;padding-bottom:22px}.perks svg{color:var(--accent);width:16px}.catalog{padding-top:70px}.display--md{font-size:clamp(30px,3.4vw,46px);letter-spacing:-1.7px;line-height:1.1}.catalog__head .eyebrow{margin:0 0 12px}.catalog__head p{font-size:12px}.pill{border-width:1px;min-height:38px;border-radius:3px;font-size:11px;font-weight:500;padding:0 16px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.card{border:0;border-radius:0;background:transparent}.card__art{height:auto;aspect-ratio:1/1.15;background:radial-gradient(ellipse at 30% 20%,#5c5268,#29252f)!important;position:relative}.card__art:after{content:'DISEÑO CONCEPTUAL';position:absolute;bottom:14px;left:14px;font-size:8px;letter-spacing:1.5px;color:#e2d6ec}.card__art svg{width:87%;height:87%;filter:drop-shadow(4px 14px 9px #0008)}.card__body{padding:20px 0;gap:10px}.card__cat{font-size:9px;letter-spacing:2px;color:var(--muted)}.card__name{font-size:20px;letter-spacing:-.6px;font-weight:500}.card__desc{font-size:12px;line-height:1.6;min-height:39px}.size{min-width:36px;min-height:36px;border-width:1px;border-radius:2px;font-size:10px}.card__price{font-size:14px;font-weight:400}.card__buy{flex-wrap:wrap;gap:10px}.card__buy .btn{font-size:11px;min-height:38px;padding:0 14px}.shop-info{margin-top:50px;padding-top:60px;padding-bottom:60px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px}details{border-bottom:1px solid var(--line);padding:18px 0;font-size:13px}summary{cursor:pointer}details p{font-size:12px;line-height:1.8;color:var(--muted)}.footer{margin-top:0;border-width:1px}.footer__brand{font-size:17px;font-weight:600}.footer__row{font-size:11px;padding-top:35px;padding-bottom:35px}.box,.pay-opt{border-width:1px;border-radius:4px}.drawer__panel{width:min(480px,100%);border-width:1px}.drawer__head,.drawer__foot{border-width:1px}.free-msg{font-weight:400;font-size:12px}.icon-btn,.qty button:not(.remove){border-width:1px;border-radius:3px}.form-error{color:#f0b3c8}.box--grid{grid-template-columns:repeat(2,minmax(0,1fr))}.box input{width:100%;min-width:0}a,button{transition:background .15s,color .15s}button:hover{filter:brightness(1.1)}
@media(max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:30px}.hero h1{letter-spacing:-2.5px}.nav{gap:15px}.brand__name{font-size:16px}}
@media(max-width:650px){.header__row{gap:20px}.nav{width:100%;justify-content:space-between;gap:10px;font-size:11px}.nav a:last-of-type{display:none}.cart-btn{padding:0 9px}.hero{grid-template-columns:1fr;padding-top:40px;gap:32px}.hero h1{font-size:53px;letter-spacing:-3px}.hero__art{aspect-ratio:4/4.2}.campaign-caption{text-align:left;font-size:8px}.perks__row{gap:14px;font-size:10px}.grid{gap:18px}.card__name{font-size:18px}.card__desc{min-height:60px}.card__buy{align-items:flex-start;flex-direction:column}.sizes{gap:4px}.size{min-width:29px;min-height:36px}.card__art:after{font-size:6px;left:8px}.shop-info{grid-template-columns:1fr;gap:20px}.catalog{padding-top:45px}.box--grid{grid-template-columns:1fr}.checkout{padding-top:30px}.drawer__head,.drawer__body,.drawer__foot{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Brand, collections and animated night sky */
body{background:#08050f;isolation:isolate}.cosmos{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#1c102e 0%,#08050f 65%)}.nebula{position:absolute;width:90vw;height:85vh;filter:blur(55px);opacity:.52;animation:nebula-drift 24s ease-in-out infinite alternate;will-change:transform}.nebula--one{left:-28vw;top:5vh;background:radial-gradient(ellipse at 45% 40%,#8038bb77 0%,#5c1c8877 20%,#2e145933 45%,transparent 65%);transform:rotate(-25deg)}.nebula--two{right:-28vw;bottom:-16vh;background:radial-gradient(ellipse at 50% 40%,#6653a05c 0%,#6e296b44 25%,#a88a2620 42%,transparent 65%);animation-delay:-12s;animation-duration:32s}.starfield{position:absolute;inset:0}.starfield i{position:absolute;width:var(--size);height:var(--size);background:#fff5d7;border-radius:50%;box-shadow:0 0 6px 1px #d0a5ff80;animation:twinkle var(--duration) ease-in-out var(--delay) infinite alternate}.starfield i:nth-child(7n){background:#d3b5ff;box-shadow:0 0 11px 2px #aa63ff90}.starfield i:nth-child(13n):before,.starfield i:nth-child(13n):after{content:'';position:absolute;background:linear-gradient(transparent,#f2e4ff,transparent);width:1px;height:11px;left:1px;top:-4px}.starfield i:nth-child(13n):after{transform:rotate(90deg)}@keyframes twinkle{0%,15%{opacity:.08;transform:scale(.65)}75%,100%{opacity:.95;transform:scale(1.15)}}@keyframes nebula-drift{from{transform:translate3d(-3%,-2%,0) rotate(-15deg) scale(.95)}to{transform:translate3d(12%,8%,0) rotate(10deg) scale(1.12)}}.sky-paused .cosmos *{animation-play-state:paused!important}.motion-toggle{position:fixed;right:18px;bottom:18px;z-index:30;border:1px solid #b48cdb66;border-radius:30px;padding:10px 15px;font-size:10px;color:#eee1ff;background:#130c20ed;backdrop-filter:blur(12px)}.header,.footer,.perks{background:#0c0813c9}.brand img{width:82px;height:98px;object-fit:contain}.brand__name{font-size:17px}.brand__sub{letter-spacing:2px}.hero__art--brand{background:radial-gradient(ellipse,#7538a026,transparent 72%);overflow:visible;aspect-ratio:4/4.4}.hero__art--brand img{width:100%;height:100%;object-fit:contain;padding:8px 18px 32px;filter:drop-shadow(0 0 35px #9c4aff22)}.hero__art--brand .campaign-tag{left:0;right:0;bottom:0;text-align:center;font-size:9px;color:#d6c5e3}.hero h1{color:#fff}.hero .lead{color:#d4c7df}.collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:38px;padding-bottom:25px}.collections>a{display:block;position:relative;padding:30px 25px;border:1px solid #ac7cd84d;background:linear-gradient(140deg,#33203cd9,#110b1ce6);color:var(--text);text-decoration:none;border-radius:8px;overflow:hidden;transition:transform .2s,border-color .2s}.collections>a:hover{transform:translateY(-4px);border-color:#c0a5dc}.collections>a:after{content:'✧';position:absolute;right:18px;top:24px;font-size:70px;color:#c0a5dc20}.collections span{font-size:9px;letter-spacing:1.6px;color:#c7a5e6}.collections h2{font-size:32px;letter-spacing:-1px;margin:24px 0 7px;font-weight:500}.collections p{font-size:12px;color:#cabdd2;margin-bottom:28px}.collections b{font-size:11px;font-weight:500;color:#e3d18d}.card__body{background:#0d0914c9;padding:18px 12px 20px}.card__art{background:radial-gradient(ellipse at 30% 20%,#5a4267ef,#20152dee)!important}.card{border:1px solid #86659a33;border-radius:5px}.concept-note{font-size:11px;color:#d6b4f4;margin:0}.concept-badge{font-size:9px;color:#ddc98f;border:1px solid #ddc98f66;padding:8px;border-radius:3px}.site-credit{padding-top:20px;padding-bottom:32px;border-top:1px solid #77538c44;color:#b7a6c3;font-size:12px;text-align:center}.site-credit a{color:#dfc4f8;text-decoration:none;font-weight:600}.site-credit a:hover{text-decoration:underline}.shop-info{background:#0b0710a6}.catalog__head,.shop-info{border-radius:5px}.drawer__panel{background:#110b1b}.box{background:#170e22}.campaign-caption{text-align:center}@media(max-width:750px){.collections{gap:12px}.collections>a{padding:22px 15px}.collections h2{font-size:26px}.collections span{font-size:8px;letter-spacing:.6px}.brand img{width:66px;height:80px}.nebula{filter:blur(35px)}}@media(max-width:550px){.collections{grid-template-columns:1fr;padding-top:24px}.collections>a{padding:22px}.collections h2{margin-top:12px}.collections p{margin-bottom:15px}.hero__art--brand{aspect-ratio:1/1.1}.brand__name{font-size:16px}.motion-toggle{bottom:10px;right:10px;font-size:9px}.nav a:last-of-type{display:none}.hero h1{font-size:49px}}@media(prefers-reduced-motion:reduce){.cosmos *{animation:none!important}.starfield i{opacity:.65}.collections>a:hover{transform:none}}

.card__art img{width:100%;height:100%;object-fit:cover;display:block}.card__art:after{content:'IMAGEN SIMULADA · IA';background:#170d24d9;padding:5px 7px;border-radius:3px;color:#fff;font-size:7px;letter-spacing:.8px}.card__art{overflow:hidden}.catalog-note{font-size:12px;line-height:1.6;color:#d2c2dd;max-width:650px;margin:0 0 25px}