:root {
  --paper: #f3f1eb;
  --ink: #101116;
  --blue: #173bca;
  --line: rgba(16,17,22,.2);
  --muted: #676762;
  --orange: #d7602f;
  --radius: 1.4rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: background .35s ease, color .35s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  height: 78px; padding: 0 3.5vw;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: white; mix-blend-mode: difference;
}
.wordmark { font: 600 1.05rem/1 "Manrope", sans-serif; letter-spacing: -.04em; width: max-content; }
.wordmark span { display: inline-block; border: 1px solid currentColor; border-radius: 99px; padding: .24rem .45rem .2rem; margin-left: .14rem; }
nav { display: flex; gap: 2.1rem; font-size: .87rem; }
nav a { opacity: .75; transition: opacity .2s; }
nav a:hover { opacity: 1; }
.shop-nav { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: .16rem; }
.mode { justify-self: end; border: 0; background: none; color: inherit; display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .5rem; font-size: .87rem; }
.mode-dot { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid currentColor; }
.hero { min-height: 100svh; position: relative; display: flex; align-items: end; overflow: hidden; color: white; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,18,.55) 0%, rgba(5,8,18,.08) 55%), linear-gradient(0deg, rgba(5,8,18,.5), transparent 48%); }
.hero-meta { position: absolute; left: 3.5vw; top: 92px; right: 3.5vw; display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-copy { position: relative; width: 100%; padding: 0 3.5vw 5vh; }
.eyebrow, .section-index { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.hero h1 { font: 400 clamp(3rem, 7.3vw, 7.8rem)/.9 "Manrope", sans-serif; letter-spacing: -.075em; margin: 1rem 0 0; max-width: 13ch; }
.round-link { position: absolute; right: 3.5vw; bottom: 5vh; display: grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 1.4rem; transition: background .2s,color .2s; }
.round-link:hover { background: white; color: var(--ink); }
.manifesto { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; padding: 11rem 3.5vw; border-bottom: 1px solid var(--line); }
.manifesto-copy { max-width: 68rem; }
.lead { font: 400 clamp(2rem, 4.2vw, 4.4rem)/1.03 "Manrope", sans-serif; letter-spacing: -.055em; margin: 0 0 5rem; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 50rem; margin-left: auto; }
.columns p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.columns em { color: var(--ink); font-style: normal; }
.spaces { background: var(--ink); color: var(--paper); padding: 8rem 3.5vw 4rem; }
.section-index.light { color: rgba(243,241,235,.55); }
.spaces-heading { display: flex; align-items: end; justify-content: space-between; margin: 5rem 0 6rem; }
.spaces-heading h2, .material h2, .roadmap h2 { font: 400 clamp(2.8rem, 6vw, 6.4rem)/.93 "Manrope", sans-serif; letter-spacing: -.07em; margin: 0; }
.spaces-heading p { color: rgba(243,241,235,.55); }
.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(243,241,235,.18); border-left: 1px solid rgba(243,241,235,.18); }
.space-grid article { min-height: 21rem; padding: 1.7rem; border-right: 1px solid rgba(243,241,235,.18); border-bottom: 1px solid rgba(243,241,235,.18); display: flex; flex-direction: column; transition: background .25s,color .25s; }
.space-grid article:hover { background: var(--blue); }
.space-grid span { font-size: .72rem; opacity: .5; }
.space-grid h3 { margin: auto 0 .5rem; font: 400 2.4rem/1 "Manrope", sans-serif; letter-spacing: -.05em; }
.space-grid p { margin: 0; max-width: 18rem; color: rgba(243,241,235,.58); }
.space-grid article:hover p { color: rgba(255,255,255,.8); }
.space-grid .vault-card { background: #08090d; }
.material { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 50rem; }
.material-color { background: var(--blue); color: white; display: flex; align-items: end; padding: 2rem; }
.material-color span { writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .13em; }
.material-copy { padding: 7rem 5vw; display: flex; flex-direction: column; }
.material-copy h2 { margin-top: 5rem; }
.material ul { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.material li { display: grid; grid-template-columns: 4rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.material li span { color: var(--muted); font-size: .75rem; }
.shop-preview { display: grid; grid-template-columns: .92fr 1.35fr; min-height: 52rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-intro { padding: 7rem 5vw 5rem 3.5vw; display: flex; flex-direction: column; align-items: flex-start; }
.shop-kicker { margin: auto 0 1.2rem; color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.shop-intro h2 { font: 400 clamp(2.8rem, 5.2vw, 5.7rem)/.93 "Manrope", sans-serif; letter-spacing: -.07em; margin: 0; }
.shop-description { color: var(--muted); max-width: 31rem; margin: 2rem 0 3rem; font-size: 1.05rem; }
.shop-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 3rem; border-bottom: 1px solid currentColor; padding: .8rem 0; min-width: 13rem; }
.shop-cta span { color: var(--blue); font-size: 1.2rem; }
.drop-preview { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); padding: 1px; gap: 1px; }
.drop-card { min-height: 26rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; color: white; }
.drop-card:first-child { grid-row: 1 / span 2; min-height: 52rem; }
.drop-card.cobalt { background: var(--blue); }
.drop-card.porcelain { background: #e9e6dc; color: #111217; }
.drop-card.night { background: #090a0e; }
.drop-meta { display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.drop-card p { margin: 0 0 .35rem; font: 400 clamp(1.8rem, 3vw, 3.4rem)/1 "Manrope", sans-serif; letter-spacing: -.055em; }
.drop-card > div:last-child > span { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; opacity: .62; }
.roadmap { padding: 10rem 3.5vw; border-top: 1px solid var(--line); }
.roadmap h2 { margin: 5rem 0 7rem 25%; }
.timeline { margin-left: 25%; border-top: 1px solid var(--line); }
.timeline article { display: grid; grid-template-columns: 1fr 3fr; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.timeline .year { font-size: .8rem; color: var(--muted); }
.timeline h3 { margin: 0 0 .35rem; font: 500 1.55rem/1 "Manrope", sans-serif; }
.timeline p { margin: 0; color: var(--muted); }
.timeline .active h3::after { content: "Ahora"; margin-left: .75rem; padding: .2rem .5rem; border: 1px solid var(--blue); border-radius: 2rem; color: var(--blue); font: 500 .65rem/1 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; vertical-align: middle; }
.closing { min-height: 80svh; padding: 6vw 3.5vw; display: flex; flex-direction: column; justify-content: space-between; background: var(--blue); color: white; }
.closing p { font: 400 clamp(3rem, 8vw, 8rem)/.92 "Manrope", sans-serif; letter-spacing: -.075em; margin: 0; }
.closing span { align-self: end; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
footer { background: #090a0e; color: white; padding: 5rem 3.5vw 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; }
.footer-mark { font-size: 1.35rem; }
footer p { margin: 0; color: rgba(255,255,255,.55); }
footer div { grid-column: 1/-1; display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.shop-page .shop-header { color: var(--ink); mix-blend-mode: normal; background: rgba(243,241,235,.94); border-bottom: 1px solid var(--line); }
.shop-main { padding-top: 78px; }
.shop-hero { min-height: 76svh; padding: 6vw 3.5vw 3.5vw; display: flex; flex-direction: column; justify-content: space-between; background: var(--blue); color: white; }
.shop-hero h1 { font: 400 clamp(4rem, 10vw, 10rem)/.82 "Manrope", sans-serif; letter-spacing: -.085em; margin: 1.2rem 0 0; }
.shop-status { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.35); padding-top: 1rem; text-transform: uppercase; font-size: .72rem; letter-spacing: .11em; }
.catalog { padding: 8rem 3.5vw 10rem; }
.catalog-bar { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; margin-bottom: 2rem; }
.catalog-bar h2 { margin: 0; font: 400 clamp(2.5rem, 5vw, 5rem)/1 "Manrope", sans-serif; letter-spacing: -.065em; }
.catalog-bar span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.product-visual { aspect-ratio: 4 / 5; padding: 1.3rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.product-visual.cobalt { background: var(--blue); color: white; }
.product-visual.porcelain { background: #e9e6dc; color: #111217; }
.product-visual.night { background: #090a0e; color: white; }
.product-visual span { font-size: .7rem; letter-spacing: .12em; }
.product-visual strong { align-self: center; margin: auto; font: 400 clamp(8rem, 16vw, 15rem)/1 "Manrope", sans-serif; letter-spacing: -.1em; opacity: .9; }
.product-info { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.product-info h3 { margin: 0 0 .25rem; font: 500 1.1rem/1.2 "Manrope", sans-serif; }
.product-info p, .product-info > span { margin: 0; color: var(--muted); font-size: .75rem; }
.product-info > span { text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.shop-note { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; padding: 9rem 3.5vw; background: var(--ink); color: var(--paper); }
.shop-note p { margin: 0; max-width: 18ch; font: 400 clamp(2.3rem, 5vw, 5.4rem)/.98 "Manrope", sans-serif; letter-spacing: -.065em; }
.shop-note a { grid-column: 2; width: max-content; margin-top: 3rem; border-bottom: 1px solid currentColor; padding-bottom: .5rem; }
body.vault { --paper: #0a0b10; --ink: #f0eee8; --line: rgba(240,238,232,.18); --muted: #9b9a96; }
body.vault .spaces { background: #030407; }
body.vault .material-color, body.vault .closing { background: #102b9d; }
body.vault .mode-dot { background: currentColor; }
body.vault.shop-page .shop-header { color: var(--ink); background: rgba(10,11,16,.94); }
@media (max-width: 760px) {
  .site-header { height: 64px; grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero-meta { top: 74px; }
  .hero-meta span:first-child { display: none; }
  .hero { min-height: 88svh; }
  .hero h1 { font-size: clamp(2.8rem, 14vw, 4.8rem); }
  .hero-copy { padding-bottom: 2.2rem; }
  .round-link { width: 3.2rem; height: 3.2rem; bottom: 2.2rem; }
  .manifesto { grid-template-columns: 1fr; padding: 7rem 5vw; }
  .lead { margin-bottom: 3.5rem; }
  .columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .spaces { padding: 6rem 5vw 2rem; }
  .spaces-heading { display: block; margin: 4rem 0; }
  .spaces-heading p { margin-top: 2rem; }
  .space-grid { grid-template-columns: 1fr; }
  .space-grid article { min-height: 16rem; }
  .material { grid-template-columns: 1fr; }
  .material-color { min-height: 18rem; }
  .material-copy { min-height: 43rem; padding: 5rem 5vw; }
  .shop-preview { grid-template-columns: 1fr; }
  .shop-intro { min-height: 39rem; padding: 5rem 5vw; }
  .drop-preview { grid-template-columns: 1fr; }
  .drop-card, .drop-card:first-child { grid-row: auto; min-height: 22rem; }
  .roadmap { padding: 7rem 5vw; }
  .roadmap h2, .timeline { margin-left: 0; }
  .roadmap h2 { margin-top: 4rem; margin-bottom: 4rem; }
  .timeline article { grid-template-columns: 1fr; gap: 1rem; }
  .closing { min-height: 68svh; padding: 10vw 5vw; }
  footer { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 5vw 2rem; }
  .shop-main { padding-top: 64px; }
  .shop-hero { min-height: 64svh; padding: 14vw 5vw 5vw; }
  .catalog { padding: 6rem 5vw; }
  .catalog-grid { grid-template-columns: 1fr; gap: 3rem; }
  .product-visual { aspect-ratio: 1 / 1.12; }
  .shop-note { grid-template-columns: 1fr; padding: 7rem 5vw; }
  .shop-note a { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }