/* ═══════════════════════════════════════════
   SOUTH HUSTLES — page-specific styles.
   ONLY what the reused design system does not already
   cover. Loaded LAST so it wins the cascade. Theme-aware
   (works in the grey light theme AND dark).
   Contract ids/classes: .site-nav.is-detached, #menu-overlay,
   .theme-toggle (custom), .color-hud + .color-hud__dot + reset,
   .eco-card, .discover-btn, .mq-menu__word, #hero-glb, perspective.
   ═══════════════════════════════════════════ */

/* ── accent-soft alias used by the HUD (tokens.css exposes --accent-soft) ── */
:root { --accent-soft: var(--accent-soft, #a99bff); }

/* ════════ 0. HUGE GROTESK TYPE SCALE ════════ */
.sh-giant {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--ink-0);
  font-size: clamp(2.6rem, 8.5vw, 8rem);
  margin: 0;
}
.sh-giant em,
.sh-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.sh-statement {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(1.8rem, 5.4vw, 4.6rem);
  color: var(--ink-0);
  margin: 0;
  max-width: 20ch;
}
.sh-statement em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.sh-statement .outline {
  color: transparent;
  -webkit-text-stroke: 1.6px color-mix(in srgb, var(--ink-0) 55%, transparent);
}
.sh-idx {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  vertical-align: super;
}

/* iridescent / glitch accent word ("Conscious") */
.holo-word {
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: holoShift 7s ease-in-out infinite;
}
@keyframes holoShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .holo-word { animation: none; } }

/* ════════ 1. LOADER (reuses #loader + [data-loader-count]) ════════ */
#loader.loader-screen { animation-delay: 1.9s; }
.loader-count {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0; /* .loader-inner's flex gap owns the spacing now */
}
.loader-wordmark small {
  display: block;
  margin-top: 1px; /* tight — was reading as a bigger gap ("interlineado") */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.42em;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
/* creative loading track — gradient fill (tied to the exact same % the
   counter shows, via data-loader-fill) with a moving sheen sweeping
   across it. Replaces the old plain equalizer-bars glyph. */
.loader-track {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.loader-track__fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5a7a, #a99bff 55%, #57e6ff);
  transition: width 0.1s linear;
}
.loader-track__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  width: 40px;
  animation: loader-track-sheen 1.1s ease-in-out infinite;
}
@keyframes loader-track-sheen {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(180px); }
}
@media (prefers-reduced-motion: reduce) { .loader-track__fill::after { animation: none; } }

/* ════════ 2. NAV — detached floating pill ════════ */
.site-nav {
  /* base .site-nav already fixed+pill; SH overrides for the wide bar look */
  gap: 14px;
  padding: 9px 12px 9px 20px;
  transition: top 0.4s var(--ease-out), border-radius 0.4s var(--ease-out),
              background 0.3s ease, box-shadow 0.35s ease, backdrop-filter 0.3s ease,
              padding 0.35s var(--ease-out), width 0.4s var(--ease-out);
}
.site-nav.is-detached {
  position: fixed;
  top: 12px;
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--bg-0) 62%, transparent);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--ink-0) 12%, transparent);
}
.sh-nav__left { display: flex; align-items: center; gap: 2px; }
.sh-nav__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: 0 8px;
  text-align: center;
}
.sh-nav__center b { font-family: var(--font-grotesk); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.02em; color: var(--ink-0); }
.sh-nav__center span { font-family: var(--font-serif); font-style: italic; font-size: 0.72rem; color: var(--ink-2); }
.sh-nav__right { display: flex; align-items: center; gap: 6px; }

/* WORKS / MENU / (+) pill buttons */
.pill-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-0);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.pill-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pill-btn--solid { background: var(--ink-0); color: var(--bg-0); border-color: var(--ink-0); }
.pill-btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-btn--plus {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
}
.pill-btn--plus .plus-glyph { display: inline-block; transition: transform 0.35s var(--ease-spring); }
body.menu-open .pill-btn--plus .plus-glyph { transform: rotate(135deg); }

/* ── language toggle: fixed to the viewport, positioned by JS ──
   `left` is computed at runtime (initLangTogglePosition, sh-main.js)
   from .site-nav's own measured right edge, clamped so it never runs
   past the window on narrower screens — plain CSS alone can't react
   to the nav's content-driven width the way that needs. Flag stays a
   constant fixture; only the code text cycles ARG → PT → EN. The
   "Languages" caption is permanent (not a fading tooltip) — small, to
   the button's right. */
.lang-toggle-wrap {
  position: fixed;
  top: 14px;
  left: 0; /* overwritten on load/resize by JS */
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-toggle__flag {
  width: 20px;
  height: 13px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-0) 18%, transparent);
}

.lang-toggle__hint {
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-2);
  pointer-events: none;
}

/* opening spotlight — same idea as before (invert to full opacity, ring
   pulses a few times on load), but now only touches the button; the
   hint caption beside it no longer fades with it, it just stays. */
.lang-toggle.is-spotlit {
  background: var(--ink-0);
  color: var(--bg-0);
  border-color: var(--ink-0);
  animation: lang-spotlight-ring 1.7s ease-out 3;
}

@keyframes lang-spotlight-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink-0) 45%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ink-0) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink-0) 0%, transparent); }
}

@media (max-width: 720px) {
  .lang-toggle-wrap { gap: 6px; }
  .lang-toggle__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-toggle.is-spotlit { animation: none; background: var(--ink-0); color: var(--bg-0); border-color: var(--ink-0); }
  .lang-toggle-wrap:has(.lang-toggle.is-spotlit) .lang-toggle__hint { animation: none; opacity: 1; }
}

@media (max-width: 860px) {
  /* base.css's .nav already has overflow-x:auto + hidden scrollbar built in
     for exactly this — it just never got a chance to run because this block
     used to hard-hide .sh-nav__left instead of letting it shrink. min-width:0
     is what lets a flex item shrink below its content's natural width; the
     overflow:auto on .nav itself gives it an automatic min-content of 0, so
     it can go all the way down and become a swipeable strip. */
  .sh-nav__left { display: flex; min-width: 0; flex: 1 1 auto; }
  .pill-btn--works { display: none; }
  .pill-btn, .pill-btn--plus, .theme-toggle { flex-shrink: 0; }
  .sh-nav__center { flex-shrink: 0; }
  .sh-nav__center span { display: none; }
}

/* ════════ 3. CUSTOM THEME TOGGLE (distinctive, not a plain sun/moon) ════════ */
.theme-toggle {
  position: relative;
  width: 54px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-0) 6%, transparent);
  padding: 0;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.theme-toggle:hover { transform: none; border-color: var(--accent); }
.theme-toggle__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--ink-0);
  display: grid; place-items: center;
  transition: transform 0.42s var(--ease-spring), background 0.3s ease;
}
html[data-theme='dark'] .theme-toggle__knob { transform: translateX(24px); background: var(--accent-soft); }
.theme-toggle__knob::before {
  content: '';
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--bg-0);
  transition: clip-path 0.4s ease, box-shadow 0.4s ease;
}
/* crescent in dark */
html[data-theme='dark'] .theme-toggle__knob::before {
  box-shadow: inset -3px -1px 0 0 var(--accent-soft);
  background: var(--bg-0);
}
.theme-toggle__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink-0) 22%, transparent) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0.4;
  pointer-events: none;
}

/* ════════ 4. FULL-SCREEN MENU OVERLAY ════════ */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 12vh, 140px) clamp(24px, 8vw, 130px);
  opacity: 0;
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 60px) 40px);
  transition: clip-path 0.6s var(--ease-out), opacity 0.4s ease, visibility 0s linear 0.6s;
}
#menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  clip-path: circle(150% at calc(100% - 60px) 40px);
  transition: clip-path 0.7s var(--ease-out), opacity 0.3s ease, visibility 0s;
}
.menu-overlay__nav { display: flex; flex-direction: column; gap: clamp(2px, 1vh, 10px); }
.menu-overlay__link {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 9vw, 7rem);
  line-height: 1.02;
  color: var(--ink-0);
  width: fit-content;
  position: relative;
  transition: color 0.3s ease, transform 0.4s var(--ease-out), opacity 0.5s var(--ease-out);
  opacity: 0;
  transform: translateY(40px);
}
#menu-overlay.is-open .menu-overlay__link { opacity: 1; transform: none; }
#menu-overlay.is-open .menu-overlay__link:nth-child(1) { transition-delay: 0.1s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(2) { transition-delay: 0.16s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(3) { transition-delay: 0.22s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(4) { transition-delay: 0.28s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(5) { transition-delay: 0.34s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(6) { transition-delay: 0.4s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(7) { transition-delay: 0.46s; }
#menu-overlay.is-open .menu-overlay__link:nth-child(8) { transition-delay: 0.52s; }
.menu-overlay__link em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
/* the slide-on-hover is gone — it fought the new dirfill sweep applied
   via JS (initDirectionalButtons); the sweep + inverted text is the
   whole effect now, no separate translateX. */
.menu-overlay__link:hover { color: var(--accent); }
.menu-overlay__link span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  vertical-align: super;
  color: var(--ink-3);
}
.menu-overlay__foot {
  margin-top: clamp(30px, 5vh, 60px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.menu-overlay__close {
  position: absolute;
  top: clamp(24px, 4vh, 50px);
  right: clamp(24px, 6vw, 80px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.menu-overlay__close:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* ════════ HERO ════════ */
.sh-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 18vh, 220px) clamp(24px, 6vw, 90px) clamp(60px, 10vh, 120px);
  overflow: hidden;
}
.sh-hero__eyebrow { position: relative; z-index: 3; }
.sh-hero h1 { position: relative; z-index: 3; max-width: 16ch; }
#hero-glb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.sh-hero__side {
  position: absolute;
  right: clamp(18px, 3vw, 46px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  z-index: 3;
}
.sh-hero__type {
  margin-top: clamp(24px, 4vh, 44px);
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--ink-1);
  position: relative;
  z-index: 3;
}
.sh-hero__type b { color: var(--accent); font-weight: 500; }
.sh-hero__scroll {
  position: absolute;
  bottom: clamp(24px, 4vh, 44px);
  left: clamp(24px, 6vw, 90px);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  z-index: 3;
}
@media (max-width: 720px) { .sh-hero__side { display: none; } }

/* ════════ 7. ECOSYSTEM — colour-invert-from-cursor cards ════════ */
/* staggered/cascading deck (matches the original pamba-creative reference)
   instead of an even 3-col grid — each card offset down+across and
   overlapping the one before it. */
.eco-grid {
  display: flex;
  flex-direction: column;
  margin-top: clamp(40px, 8vh, 96px);
}
.eco-card { width: min(76vw, 760px); }
.eco-grid .eco-card:nth-child(1) { align-self: flex-start; margin-bottom: -7vh; z-index: 1; }
.eco-grid .eco-card:nth-child(2) { align-self: center; margin-bottom: -7vh; z-index: 2; }
.eco-grid .eco-card:nth-child(3) { align-self: flex-end; z-index: 3; }
@media (max-width: 900px) {
  .eco-card { width: 100%; }
  .eco-grid .eco-card:nth-child(1),
  .eco-grid .eco-card:nth-child(2) { align-self: stretch; margin-bottom: clamp(16px, 2vw, 26px); }
}

.eco-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-ink);
  color: var(--ink-0);
  padding: clamp(20px, 2.4vw, 32px);
  min-height: clamp(200px, 26vh, 280px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.eco-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
/* black card variant (CUSA System) */
.eco-card--dark { background: #0b0b0e; color: #f4f4f5; border-color: rgba(255,255,255,0.12); }
.eco-card--dark .eco-card__meta { color: rgba(244,244,245,0.6); }

/* the colour-invert paint: a radial fill of ink-0 grows from the cursor.
   Text above uses mix-blend difference so it flips to the negative. */
.eco-card__invert {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--cx) var(--cy),
              var(--ink-0) 0%, var(--ink-0) var(--r, 0%), transparent calc(var(--r, 0%) + 1%));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.eco-card:hover .eco-card__invert { opacity: 1; }
/* the PNG placeholder revealed on hover, masked to the invert circle */
.eco-card__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 40%, transparent) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out);
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), #000 0%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 1%));
  mask: radial-gradient(circle at var(--cx) var(--cy), #000 0%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 1%));
  pointer-events: none;
  display: grid;
  place-items: center;
}
.eco-card:hover .eco-card__art { opacity: 0.9; transform: scale(1); }
/* CUSA System reveals the real hands/eyes asset from pamba-creative on
   hover (matching the reference site) instead of the generic placeholder
   stripe pattern the other two cards still use. */
.eco-card--dark .eco-card__art {
  background: #0b0b0e url('../assets/perspective/hands-eyes.gif') center / contain no-repeat;
}
.eco-card--dark .eco-card__art span { display: none; }
.eco-card__art span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
/* content sits above the invert. mix-blend-mode:difference + forced white
   only makes sense WHILE the ink-fill is actually growing behind it on
   hover — applied at rest (as it was) it diffs the text against the card's
   own resting background instead, which is how "South Hustles" and
   "Visualizing Wisdom" ended up nearly invisible in both themes. At rest,
   content just inherits the card's normal (theme-reactive) ink color. */
.eco-card__content { position: relative; z-index: 3; }
.eco-card:hover .eco-card__content { color: #fff; mix-blend-mode: difference; }
.eco-card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.eco-card__title {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 1;
  margin: 0;
}
.eco-card__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.eco-card__meta {
  position: relative;
  z-index: 3;
  mix-blend-mode: difference;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

/* ════════ MARQUEE speed + reverse (extends reused .marquee) ════════ */
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee[data-speed] { }

/* ════════ 9. ABOUT / STORY editorial ════════ */
.sh-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .sh-editorial { grid-template-columns: 1fr; } }
.sh-editorial h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--accent);
  margin: 0 0 14px;
}
.sh-editorial p { color: var(--ink-1); max-width: 44ch; }
.sh-story-lead {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  max-width: 22ch;
  margin: 0 0 clamp(30px, 5vh, 60px);
}

/* ════════ 10. PROJECTS list rows ════════ */
.projects-list {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--ink-0) 18%, transparent);
}
.project-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 3fr) 1fr 1.4fr 1.2fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 3vh, 34px) 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-0) 18%, transparent);
  opacity: 0.42;
  cursor: pointer;
  transition: opacity 0.35s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.project-row:hover { opacity: 1; padding-left: 26px; }
.project-row__name {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: var(--ink-0);
}
.project-row__name em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.project-row__col {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.92rem, 1.2vw, 1.18rem);
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink-1);
}
.project-row__disc {
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.discover-btn {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.4s var(--ease-spring), opacity 0.3s ease;
}
.project-row:hover .discover-btn { transform: translateY(0); opacity: 1; }

/* shared preview layer that follows the hovered row */
.projects-preview {
  position: absolute;
  z-index: 1;
  width: clamp(200px, 22vw, 320px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  display: grid;
  place-items: center;
}
.projects-preview.is-visible { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
.projects-preview span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
}
/* live procedural 3D asset (js/preview-3d.js) fills the card; the label
   drops to a caption strip along the bottom edge */
.projects-preview .preview-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.projects-preview:has(.preview-3d) span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 7px 10px;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}
@media (max-width: 860px) {
  .project-row { grid-template-columns: 1fr auto; gap: 6px; opacity: 0.85; }
  .project-row__col:nth-of-type(3), .project-row__col:nth-of-type(4) { display: none; }
  .projects-preview { display: none; }
}

/* ════════ 11. BIG STATEMENT 2 + typing/font-swap + Pixelated block ════════ */
.sh-statement-wrap { position: relative; z-index: 1; }
.font-swap {
  display: inline-block;
  transition: font-family 0.05s;
}
.font-swap.is-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--accent-2); }
.type-erase::after {
  content: '';
  display: inline-block;
  width: 3px; height: 0.9em;
  margin-left: 3px;
  background: var(--accent);
  vertical-align: -0.1em;
  animation: caretBlink 0.9s steps(1) infinite;
}
.pixelated-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(40px, 6vh, 80px);
  align-items: center;
}
@media (max-width: 860px) { .pixelated-block { grid-template-columns: 1fr; } }
.pixelated-block h3 {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.pixelated-block h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.pixelated-block .btn-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.pixel-grid {
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  position: relative;
  overflow: hidden;
}
.pixel-grid::before {
  content: '';
  position: absolute;
  width: 84px; height: 84px;
  background: var(--holo);
  filter: blur(2px);
  animation: pixelRoam 9s var(--ease-out) infinite alternate;
}
@keyframes pixelRoam {
  0% { transform: translate(10%, 10%); }
  100% { transform: translate(280%, 240%); }
}
@media (prefers-reduced-motion: reduce) { .pixel-grid::before { animation: none; } }

/* ════════ MARQUEE MENU — giant words + follow icon ════════ */
.mq-menu {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vh, 60px) 0;
}
.mq-menu__row {
  display: flex;
  gap: clamp(30px, 6vw, 90px);
  white-space: nowrap;
  will-change: transform;
  animation: marqueeX var(--marquee-speed, 30s) linear infinite;
  align-items: center;
}
.mq-menu__row--rev { animation-direction: reverse; }
.mq-menu.is-paused .mq-menu__row { animation-play-state: paused; }
.mq-menu__word {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink-0) 55%, transparent);
  cursor: pointer;
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.mq-menu__word:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.mq-menu__sep { color: var(--accent-2); font-size: 2rem; }
.mq-follow {
  position: fixed;
  top: 0; left: 0;
  width: 66px; height: 66px;
  z-index: 40;
  border-radius: var(--radius-m);
  background: var(--holo);
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-spring);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
}
.mq-follow.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mq-follow span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: #0b0b0e; font-weight: 600; }

/* ════════ 12. UNIVERSITY — coloured course tiles ════════ */
.uni-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(36px, 6vh, 64px);
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .uni-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .uni-grid { grid-template-columns: 1fr; } }
.uni-tile {
  border-radius: var(--radius-l);
  padding: clamp(22px, 2.4vw, 34px);
  min-height: clamp(220px, 30vh, 320px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--uni-ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out);
}
.uni-tile:hover { transform: translateY(-6px) rotate(-1deg); }
.uni-tile--red { background: var(--uni-red); }
.uni-tile--amber { background: var(--uni-amber); }
.uni-tile--green { background: var(--uni-green); }
.uni-tile--blue { background: var(--uni-blue); color: #fff; }
.uni-tile__idx { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; opacity: 0.7; }
.uni-tile__title {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1;
  margin: 0;
}
.uni-tile__type {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
}
.uni-lead {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 26ch;
  color: var(--ink-0);
}
.uni-lead em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }

/* ════════ 14. PERSPECTIVE / STAR-WARS text ════════ */
.perspective-sec { text-align: center; position: relative; overflow: hidden; }
.perspective-img {
  /* aspect-ratio matches the real hands-eyes.gif (450×375 = 6:5) instead
     of the old 16:10 placeholder-box ratio, so contain never has to
     letterbox/pillarbox it — same box, no crop either way */
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 6 / 5;
  margin: 0 auto clamp(30px, 5vh, 60px);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: grid; place-items: center;
  position: relative; z-index: 2;
}
.perspective-img img { width: 100%; height: 100%; object-fit: contain; }
.perspective-stage {
  perspective: 340px;
  perspective-origin: 50% 0%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.perspective-text {
  transform: rotateX(38deg);
  transform-origin: 50% 0%;
  transition: transform 0.2s linear;
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.6rem, 4.6vw, 4.2rem);
  color: #f4f4f5;
  padding: 20px 0 80px;
}
.perspective-text em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-soft); }

/* ════════ 15. SYSTEMS glass-grid uses reused .glass-grid/.glass-card ════════ */

/* ════════ 16. FOOTER — SH pixel-perfect additions ════════ */
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
  justify-content: center;
  padding: clamp(30px, 6vh, 70px) 24px 10px;
}
.footer-menu a {
  font-family: var(--font-grotesk);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(244,244,245,0.5);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.footer-menu a:hover { color: var(--accent-soft); -webkit-text-stroke-color: var(--accent-soft); }
.footer-news {
  max-width: 520px;
  margin: clamp(30px, 5vh, 56px) auto 0;
  text-align: center;
}
.footer-news p { color: rgba(244,244,245,0.6); font-size: 0.92rem; margin-bottom: 16px; }
.footer-news__form { display: flex; gap: 8px; }
.footer-news__form input {
  flex: 1;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(244,244,245,0.2);
  background: transparent;
  color: #f4f4f5;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.footer-news__form input::placeholder { color: rgba(244,244,245,0.4); }
.footer-news__form input:focus { outline: none; border-color: var(--accent-soft); }
.footer-news__form button {
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  background: var(--accent-soft);
  color: #0b0b0e;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s var(--ease-out);
}
.footer-news__form button:hover { background: #fff; transform: translateY(-1px); }
.footer-email {
  text-align: center;
  margin-top: 22px;
}
.footer-email a { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--accent-soft); }

/* ════════ COLOUR HUD — 3 draggable dots repaint accents ════════ */
.color-hud {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 66%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}
.color-hud__track {
  position: relative;
  width: 12px;
  height: 168px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a7a, #6d5efc 50%, #57e6ff);
}
.color-hud__dot {
  position: absolute;
  left: 50%;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  touch-action: none;
  /* the opening demo slides `top` + background every 5s — this is what
     makes it read as a dot gliding down the track, not just recoloring
     in place. A real drag still feels instant (see .is-dragging). */
  transition: top 1.1s cubic-bezier(0.65, 0, 0.35, 1), background 1.1s ease;
}
.color-hud__dot:active { cursor: grabbing; }
.color-hud__dot.is-dragging { transition: none; }
.color-hud__dot[data-dot='0'] { background: var(--accent); top: 20%; }
.color-hud__dot[data-dot='1'] { background: var(--accent-2); top: 50%; }
.color-hud__dot[data-dot='2'] { background: var(--accent-soft); top: 80%; }
.color-hud__reset {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.color-hud__reset:hover { color: var(--accent); }
@media (max-width: 720px) { .color-hud { display: none; } }

/* ════════ FOOTER HUD — persistent fixed corners, bare (no pill/bg —
   Franco: "sacale el rectangulo con radius de fondo, solo los circulitos
   cambiando de color"). Always on screen regardless of scroll. ════════ */
.footer-hud {
  position: fixed;
  bottom: 16px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-hud--left { left: 16px; }
.footer-hud--right { right: 16px; gap: 8px; }
.footer-hud__globe {
  flex: none;
  width: 15px; height: 15px;
  color: var(--ink-2);
}
.footer-hud__flags {
  flex: none;
  font-size: 10px;
  line-height: 15px; /* matches .footer-hud__globe's box height */
  letter-spacing: 1px;
}
.footer-hud__text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  white-space: nowrap;
}
/* scoped override: the real footer's socials sit on a permanently-dark
   footer bg and stay hardcoded light — these float over the page itself,
   so they must follow the theme (dark ink in light mode, per Franco) and
   need their own visible ring since there's no pill behind them anymore */
.footer-hud--right .footer__social {
  width: 30px; height: 30px; font-size: 0.8rem;
  border-color: var(--line);
  color: var(--ink-0);
  background: var(--bg-1);
}
.footer-hud--right .footer__social:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
/* balls float in a thin strip behind both pills, never blocking clicks */
.footer-hud-stage {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 130px;
  z-index: 54;
  pointer-events: none;
}
/* mobile: keep the HUD (Franco wants it visible, not hidden) but shrink
   it and pull it in from the edges so it doesn't fight thumb-reach zones
   or the browser's own bottom chrome. */
@media (max-width: 720px) {
  .footer-hud { bottom: 10px; gap: 6px; }
  .footer-hud--left { left: 8px; }
  .footer-hud--right { right: 8px; gap: 5px; }
  .footer-hud__globe { width: 12px; height: 12px; }
  .footer-hud__flags { font-size: 8px; }
  .footer-hud__text { font-size: 7.5px; }
  .footer-hud--right .footer__social { width: 24px; height: 24px; font-size: 0.65rem; }
  .footer-hud-stage { height: 90px; }
}

/* ════════ shared: eyebrow index tag ════════ */
/* Franco: "no es un slide de presentaciones, es un frontend de scroll
   inmersivo" — the "[02]"-style numbered eyebrow labels read like deck
   numbering, so they're hidden sitewide. Each section's real heading is
   still the sr-only <h2> right next to it — nothing lost for a11y,
   nothing deleted (kept for a future restyle instead of ripped out). */
.sh-label {
  display: none;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.sh-label b { color: var(--ink-3); font-weight: 400; }

/* teaser holo card row helper */
.holo-teaser-row {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(40px, 6vh, 70px);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   POST-VERIFY FIXES — appended so base/spec stay intact.
   Addresses the adversarial-review findings (blockers → minors).
   ═══════════════════════════════════════════ */

/* [BLOCKER] lock body scroll while the hamburger overlay is open.
   position:fixed variant avoids the iOS rubber-band jump. */
body.menu-open { overflow: hidden; }
@supports (overflow: clip) { body.menu-open { overflow: clip; } }

/* [MAJOR] real nav DETACH: at the top the bar is an attached, full-width,
   square, transparent strip; on scroll .is-detached collapses it into the
   floating rounded pill. Overrides base.css .site-nav resting geometry. */
.site-nav:not(.is-detached) {
  top: 0;
  left: 0;
  translate: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: color-mix(in srgb, var(--bg-0) 30%, transparent);
  box-shadow: none;
  padding-left: max(20px, 4vw);
  padding-right: max(12px, 3vw);
  justify-content: space-between;
}
.site-nav.is-detached {
  left: 50%;
  translate: -50% 0;
  width: auto;
  max-width: calc(100vw - 24px);
  justify-content: flex-start;
}

/* [MAJOR] clip oversized ghost bg-words to their own section box instead of
   leaning on the global html{overflow-x:hidden} backstop. */
.section { overflow-x: clip; }

/* [MINOR/fidelity] grow the eco-card invert circle FROM the cursor by making
   --r animatable (registered custom property) instead of popping full-size. */
@property --r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.eco-card__invert {
  transition: opacity 0.28s ease, --r 0.55s var(--ease-out);
}

/* [MINOR/parity] stop the giant menu marquee row under reduced motion,
   matching marquee.css's own reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  .mq-menu__row, .mq-menu__row--rev { animation: none; }
}

/* [MINOR] footer tagline: the verbatim all-caps unit the spec requires. */
.footer__tagline {
  font-family: var(--font-grotesk);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  color: var(--ink-1);
  margin-top: 8px;
}

/* ════════ LIVE SYSTEM — ant-on-mars-idiom HUD cards on the existing
   .section--gradient-bn (white→gray→black) background. Dot-grid + a small
   connected-dot constellation sit behind two floating cards: a dark
   telemetry-style one (mono HUD readout) and a light one (stats row). ════════ */
.live-sys { position: relative; overflow: hidden; padding-block: clamp(70px, 11vh, 130px); }
.live-sys__dotgrid {
  position: absolute; inset: 0; z-index: 0;
  /* two layers: a fine even grid + a coarser scattered "starfield" layer,
     both visible across the whole section (not just near the cards) */
  background-image:
    radial-gradient(rgba(244, 244, 245, 0.5) 1px, transparent 1.4px),
    radial-gradient(rgba(244, 244, 245, 0.16) 1px, transparent 1px);
  background-size: 140px 130px, 22px 22px;
  background-position: 0 0, 0 0;
}
.live-sys__telemetry {
  position: absolute; top: clamp(18px, 3vh, 34px); left: clamp(16px, 3vw, 40px); z-index: 1;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  color: rgba(244, 244, 245, 0.45);
  display: grid; gap: 2px;
}
.live-sys__telemetry b { color: rgba(244, 244, 245, 0.8); font-weight: 500; margin-left: 6px; }
.live-sys__constellation {
  position: absolute; top: 6%; right: 4%; z-index: 0;
  width: min(38vw, 360px); height: auto; opacity: 0.5;
}
.live-sys__constellation line { stroke: var(--accent-soft); stroke-width: 1; }
.live-sys__constellation circle { fill: var(--accent-soft); }
.live-sys .wrap { position: relative; z-index: 1; }
.live-sys .eyebrow { color: rgba(244, 244, 245, 0.72); }
.live-sys .eyebrow b { color: var(--accent-soft); }

.live-sys__cards {
  margin-top: clamp(28px, 4vh, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.live-sys__card {
  border-radius: var(--radius-m);
  padding: clamp(22px, 3vw, 32px);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.live-sys__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.live-sys__card--dark {
  position: relative; /* anchors the orbital widget */
  background: rgba(20, 20, 26, 0.7);
  border: 1px solid rgba(244, 244, 245, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ant-on-mars orbital-rings widget (js/orbital-widget.js) — 150px buffer
   displayed at 76px so it stays crisp at DPR 2 */
.live-sys__orbital {
  position: absolute;
  top: 12px; right: 12px;
  width: 76px; height: 76px;
  opacity: 0.85;
  pointer-events: none;
}
.live-sys__hud {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 244, 245, 0.12);
}
.live-sys__hud span { color: rgba(244, 244, 245, 0.5); text-transform: uppercase; }
.live-sys__hud b { color: var(--accent-soft); font-weight: 500; text-align: right; }
.live-sys__card--dark h3 {
  margin: 0 0 8px;
  font-family: var(--font-grotesk); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #f4f4f5;
}
.live-sys__card--dark p.lede { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.live-sys__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.live-sys__tags span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(244, 244, 245, 0.18); border-radius: 999px;
  padding: 5px 12px; color: rgba(244, 244, 245, 0.75);
}

.live-sys__card--light {
  background: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.5);
}
.live-sys__kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a6a72; margin-bottom: 14px;
}
.live-sys__kicker b { color: var(--accent); }
.live-sys__card--light h3 {
  margin: 0 0 10px;
  font-family: var(--font-grotesk); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #111114;
}
.live-sys__card--light p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #4a4a52; }
.live-sys__stats {
  display: flex; gap: clamp(18px, 3vw, 32px);
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.live-sys__stats div { display: grid; gap: 2px; }
.live-sys__stats b { font-family: var(--font-grotesk); font-weight: 900; font-size: 1.4rem; color: var(--accent); }
.live-sys__stats span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: #7a7a82; text-transform: uppercase; }

@media (max-width: 720px) { .live-sys__constellation { display: none; } }

/* ════════ THEME INVERSION for the two strict sections that ignored the
   toggle (Franco: "hay secciones que no cambian de color con el toggle").
   Same local-var re-declaration technique sh2-theme.css uses for
   .sec-dark — in dark theme they flip to the LIGHT pole so the page
   keeps alternating polarity. ════════ */

/* #ig-feed base (light theme): make its dark bg self-consistent — the
   section paints dark, so its token scale must be the dark one, or
   children using var(--ink-*) (the lede) render dark-on-dark */
.section--violet-bloom {
  --bg-0: #0b0b0e; --bg-1: #121216; --bg-2: #1b1b21;
  --ink-0: #f4f4f5; --ink-1: #b9b9c1; --ink-2: #84848e; --ink-3: #4c4c55;
  --line: #26262d; --line-soft: #1f1f26;
  --surface: #16161a;
  color: var(--ink-0);
}
html[data-theme='dark'] .section--violet-bloom {
  --bg-0: #e6e6e6; --bg-1: #f2f2f2; --bg-2: #dcdcdc;
  --ink-0: #0d0d0f; --ink-1: #46464b; --ink-2: #77777d; --ink-3: #a9a9ad;
  --line: #cfcfcf; --line-soft: #dcdcdc;
  --surface: #fafafa;
  color-scheme: light;
  color: var(--ink-0);
  background:
    radial-gradient(52% 44% at 8% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(46% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 72%),
    linear-gradient(180deg, #f0f0f0, #e4e4e8 55%, #f0f0f0);
}

html[data-theme='dark'] .section--inverted {
  --bg-0: #e6e6e6; --bg-1: #ededed; --bg-2: #dcdcdc;
  --bg-glass: rgba(230, 230, 230, 0.72);
  --ink-0: #0d0d0f; --ink-1: #46464b; --ink-2: #77777d; --ink-3: #a9a9ad;
  --line: #cfcfcf; --line-soft: #dcdcdc;
  --surface: #f4f4f4; --surface-ink: #ffffff;
  --shadow-card: 0 1px 2px rgba(13, 13, 15, 0.04), 0 16px 40px -24px rgba(13, 13, 15, 0.16);
  color-scheme: light;
  background: linear-gradient(180deg, #f0f0f0, #e2e2e2 55%, #ececec);
}

/* ════════ TRANSMISSION — 2nd white→black band: gray text + thin color strips ════════ */
.transmission { position: relative; overflow: hidden; padding-block: clamp(70px, 11vh, 130px); }
.transmission__dotgrid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(244, 244, 245, 0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}
.transmission .wrap { position: relative; z-index: 1; }
.transmission .eyebrow { color: rgba(244, 244, 245, 0.72); }
.transmission .eyebrow b { color: var(--accent-soft); }
/* the "texto gris en el medio" — deliberately mid-gray on the dark stretch */
.transmission__gray {
  max-width: 46ch;
  margin: clamp(20px, 3vh, 34px) auto;
  text-align: center;
  font-family: var(--font-grotesk); font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.5; letter-spacing: -0.01em;
  color: #9a9aa4;
}
.transmission__strips {
  max-width: 760px;
  margin: clamp(26px, 4vh, 44px) auto 0;
  display: grid; gap: 10px;
}
.transmission__strip {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--strip) 55%, transparent);
  background: color-mix(in srgb, var(--strip) 12%, transparent);
  color: #f4f4f5;
  transition: transform 0.3s var(--ease-out), background 0.25s ease;
}
.transmission__strip:hover { transform: translateX(8px); background: color-mix(in srgb, var(--strip) 26%, transparent); }
.transmission__strip b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--strip); }
.transmission__strip span { font-family: var(--font-grotesk); font-weight: 700; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }
.transmission__strip i { margin-left: auto; font-style: normal; color: var(--strip); transition: translate 0.3s var(--ease-out); }
.transmission__strip:hover i { translate: 5px 0; }

/* ════════ FROM THE FEED — IG product banners (two sizes) ════════ */
.ig-feed { padding-block: clamp(70px, 11vh, 130px); }
.ig-lede {
  max-width: 38ch;
  margin: 16px 0 0;
  font-family: var(--font-grotesk); font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
  color: var(--ink-0);
}
.ig-lede em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-soft); }

.ig-bento {
  margin-top: clamp(26px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.ig-card {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-1);
  color: var(--ink-0);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ig-card:hover {
  transform: translateY(-5px) rotate(-0.4deg);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.ig-card--wide { grid-column: 1 / -1; grid-template-columns: 1.6fr 1fr; }
@media (max-width: 720px) {
  .ig-bento { grid-template-columns: 1fr; }
  .ig-card--wide { grid-template-columns: 1fr; }
}
.ig-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 90% at 25% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50% 80% at 85% 85%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    #101016;
  overflow: hidden;
}
.ig-card--wide .ig-card__media { aspect-ratio: auto; min-height: clamp(220px, 30vw, 380px); }
.ig-card__media video, .ig-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* hidden until their inline onload/onloadeddata flips opacity — a
     still-fetching (or 404ing) element never paints a black box over
     the styled placeholder behind it */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ig-card__slot-note {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.5);
  border: 1px dashed rgba(244, 244, 245, 0.25);
  border-radius: 6px;
  padding: 6px 12px;
}
.ig-card__body { display: grid; gap: 8px; align-content: center; padding: clamp(16px, 2.4vw, 28px); }
.ig-card__kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--accent); }
.ig-card__body h3 {
  margin: 0;
  font-family: var(--font-grotesk); font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em;
}
.ig-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-card__tags span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px;
}
.ig-card__cta {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--ink-1);
  transition: color 0.2s ease, translate 0.3s var(--ease-out);
}
.ig-card:hover .ig-card__cta { color: var(--accent); translate: 5px 0; }
.ig-follow {
  display: inline-block;
  margin-top: clamp(22px, 3.5vh, 36px);
  padding: 14px 30px;
  border: 1px solid var(--ink-0);
  border-radius: 999px;
  font-family: var(--font-grotesk); font-weight: 700; font-size: 0.95rem;
  color: var(--ink-0);
}

/* screen-reader-only utility (newsletter label, visually-hidden h2s) */
.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;
}