@import url('tokens.css');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: var(--nav-height); }

/* ── Theme-flip fade (fallback) ──
   Fades background/text/border/glow on every element that doesn't already
   have its own transition for these properties (buttons, tabs, nav-cta,
   accordion etc. keep their own faster interaction transitions — this
   only fills the gap for everything else: body, section backgrounds,
   card borders, plain text). .reveal gets the same treatment separately
   below, since its own transition would otherwise fully shadow this one
   for the majority of visible content (headings, prose, cards). */
*, *::before, *::after {
  transition:
    background-color var(--dur-theme) var(--ease-rise),
    color var(--dur-theme) var(--ease-rise),
    border-color var(--dur-theme) var(--ease-rise),
    box-shadow var(--dur-glow-out) var(--ease-glow);
}
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Typography ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; }
h1 { font-size: var(--h1-size); letter-spacing: -0.02em; }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-3);
}

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
section { padding: var(--section-pad-y) 0; position: relative; }

/* ── Decorative sparks ── */
.spark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.content-above { position: relative; z-index: 1; }

/* ── Scroll reveal — content settles in as you scroll to it, fires once ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  /* Own transition means the theme-flip fallback above (*, *::before,
     *::after) never reaches .reveal elements — added explicitly here too,
     since .reveal covers most visible content (headings, prose, cards). */
  transition: opacity var(--dur-enter) var(--ease-rise),
              transform var(--dur-enter) var(--ease-rise),
              background-color var(--dur-theme) var(--ease-rise),
              color var(--dur-theme) var(--ease-rise),
              border-color var(--dur-theme) var(--ease-rise),
              box-shadow var(--dur-glow-out) var(--ease-glow);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger for the 3 quick-info cards only — cheap CSS-only, no per-item JS */
.quick-info-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.quick-info-grid .reveal:nth-child(2) { transition-delay: var(--stagger-list); }
.quick-info-grid .reveal:nth-child(3) { transition-delay: calc(var(--stagger-list) * 2); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  /* Scroll-driven show/hide */
  transform: translateY(0);
  transition: transform var(--dur-sm) var(--ease-snap);
}
nav.nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;   /* clicks fall through to hero while hidden */
}

/* #main-nav only (not .nav-panel, which also matches the bare `nav` selector
   above) — true 3-column grid so the home logo sits at the exact visual
   center regardless of how wide the hamburger or right-hand action group is. */
#main-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#main-nav .nav-hamburger { justify-self: start; }
#main-nav .nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hamburger button */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--space-10);
  height: var(--space-10);
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.ham-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: var(--radius-none);
  transition:
    transform var(--dur-xs) var(--ease-snap),
    opacity var(--dur-xs) var(--ease-snap);
}
/* Funnel motion — on hover OR while menu open (no X-morph) */
.nav-hamburger:hover .ham-bar:nth-child(1),
nav.is-open .ham-bar:nth-child(1) { transform: translateX(4px); }
.nav-hamburger:hover .ham-bar:nth-child(2),
nav.is-open .ham-bar:nth-child(2) { transform: translateX(-4px) scaleX(0.72); }
.nav-hamburger:hover .ham-bar:nth-child(3),
nav.is-open .ham-bar:nth-child(3) { transform: translateX(4px); }

/* Home button — globe icon, center of nav */
.nav-home {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-xs) var(--ease-snap);
}
.nav-home img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  /* No transition on filter — instant glow snap on hover */
}
/* The mark is a hardcoded-white PNG (Icono_TRSC_Blanco.png) — invisible on
   a light nav bar. Invert it in light mode; hero/footer keep the asset
   unflipped since those two regions stay dark (see THEME: dark islands). */
:root[data-theme="light"] .nav-home img { filter: invert(1); }
@media (hover: hover) {
  .nav-home:hover img {
    filter: drop-shadow(0 0 6px var(--cyan)) brightness(1.2);
  }
  :root[data-theme="light"] .nav-home:hover img {
    filter: invert(1) drop-shadow(0 0 6px var(--cyan));
  }
}

/* Theme toggle — sun/moon swap, no JS-driven icon changes. The icon shown
   is always the mode a click switches TO: sun visible in dark mode (click
   → light), moon visible in light mode (click → dark). */
.nav-theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
  flex-shrink: 0;
}
/* Both icons stacked in the same spot (not display:none/block — that can't
   animate) and crossfaded with a quarter-turn + scale on click. */
.nav-theme-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition:
    opacity var(--dur-md) var(--ease-snap),
    transform var(--dur-md) var(--ease-snap);
}
.nav-theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.nav-theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="light"] .nav-theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="light"] .nav-theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (hover: hover) {
  .nav-theme-toggle:hover { color: var(--cyan); }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--blue);
  transition:
    background var(--dur-xs) var(--ease-snap),
    color var(--dur-xs) var(--ease-snap),
    border-color var(--dur-xs) var(--ease-snap),
    opacity var(--dur-xs) var(--ease-snap);
}
.nav-cta:active { background: transparent; color: var(--cyan); border-color: var(--cyan); }

/* While menu open: hide home + right-hand actions — hamburger alone stays */
nav.is-open .nav-home,
nav.is-open .nav-actions {
  opacity: 0;
  pointer-events: none;
}

/* ── NAV OVERLAY (full-screen scrim + click-catcher) ── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* below nav (100) — hamburger stays clickable */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-sm) var(--ease-snap),
    background-color var(--dur-sm) var(--ease-snap);
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Desktop: faint dim over the rest of the page */
@media (min-width: 640px) {
  .nav-overlay.is-open { background-color: var(--nav-scrim); }
}

/* ── NAV PANEL (sliding drawer from left) ── */
.nav-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;                 /* mobile: full screen */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-5);
  padding: calc(var(--nav-height) + var(--space-6)) var(--space-6) var(--space-8);
  background: var(--nav-panel-bg);
  transform: translateX(-100%);
  transition: transform var(--dur-md) var(--ease-snap);
}
.nav-overlay.is-open .nav-panel { transform: translateX(0); }

/* Desktop: narrow left drawer — alignment identical, only width differs */
@media (min-width: 640px) {
  .nav-panel { width: min(400px, 85vw); }
}

/* ── NAV LINKS ── */
.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gray);
  text-decoration: none;
  transition:
    color var(--dur-xs) var(--ease-snap),
    transform var(--dur-xs) var(--ease-snap);
}
.nav-link:hover { color: var(--white); }
@media (hover: hover) { .nav-link:hover { transform: translateX(6px); } }
.nav-link--cta { color: var(--blue); }
.nav-link--cta:hover { color: var(--cyan); }

/* ── HERO — WebGL Liquid Light Soup ── */
#hero {
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: var(--bg);   /* visible before WebGL fires */
}

/* WebGL canvas — absolute full cover, lowest layer */
#hero-soup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* No-WebGL fallback: static radial-gradient soup */
#hero.hero--no-webgl {
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, var(--blue-a50) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 75% 60%, var(--cyan-a25) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 80%, var(--blue-a20) 0%, transparent 70%),
    var(--bg);
}

/* ── Hero scrim — z1 — contrast layer over soup ── */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Bottom-heavy dark gradient: transparent top, dark bottom where text lives */
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 30%,
      rgba(7, 7, 15, 0.5) 65%,
      rgba(7, 7, 15, 0.82) 100%
    ),
    radial-gradient(ellipse 90% 60% at 50% 40%, transparent 35%, rgba(7, 7, 15, 0.3) 100%);
}

/* ── Text + countdown overlay — z2 ── */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* hero-top grows to fill, hero-bottom anchors at end */
  padding: var(--space-12) var(--container-pad) var(--space-10);
}

/* Top group — spacer + title-group + typewriter */
.hero-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
}

/* Spacer pushes title-group to vertical center of the hero-top region */
.hero-top-spacer {
  flex: 1;
}

/* Eyebrow + h1 clustered together */
.hero-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Bottom group: countdown + CTAs — centered */
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--hero-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hero-eyebrow-color);
  text-shadow: 0 0 var(--space-5) rgba(0, 0, 0, 0.9);
  white-space: nowrap;   /* single line — sized to fit at 390px */
  overflow: hidden;
  opacity: 0;
  animation: hero-text-in var(--dur-sm) var(--ease-snap) var(--hero-delay-title-1) both;
}

/* Main title: editorial serif, two-line stack, centered */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  filter: drop-shadow(0 var(--space-1) var(--space-5) rgba(0, 0, 0, 0.9));
  opacity: 0;
  animation: hero-text-in var(--dur-sm) var(--ease-snap) var(--hero-delay-title-1) both;
}

/* Each row within the title (line 1: TRSC, line 2: 2⊛26) */
.hero-title-line {
  display: flex;
  align-items: center;
  line-height: 0.95;
}

.hero-title-text {
  background: linear-gradient(
    to bottom right,
    var(--hero-title-grad-from) 0%,
    var(--hero-title-grad-to) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* "2026" numerals — Anton, white to match the globe logo */
.hero-title-year {
  font-family: var(--font-year);
  font-weight: 400;
  font-size: 0.82em;   /* relative to hero-title-size — change this value to resize */
  color: var(--white);
  line-height: 1;
}

/* Globe logo replaces the "0" in "2026" */
.hero-title-logo-o {
  height: 0.8em;
  width: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.03em;
  filter: drop-shadow(0 0 var(--space-2) var(--cyan-a40));
}

/* Typewriter — proportional subtitle size, one line */
.hero-typewriter {
  font-family: var(--font-body);
  font-size: var(--hero-typewriter-size);
  font-weight: 500;
  color: var(--white-75);
  letter-spacing: 0.04em;
  min-height: 1.4em;
  margin-top: var(--space-32);   /* gap between title and typewriter */
  padding-bottom: var(--space-16);
  text-shadow: 0 0 var(--space-5) rgba(0, 0, 0, 0.9);
  white-space: nowrap;   /* single line — sized to fit longest phrase at 390px */
  overflow: hidden;
  /* Phrase-cycle fade (after initial load-in animation completes and un-registers itself) */
  transition: opacity var(--dur-enter) var(--ease-rise);
}
/* One-time load-in — JS strips this class on animationend so it stops pinning `opacity`, which would otherwise block the transition above forever */
.hero-typewriter--intro {
  opacity: 0;
  animation: hero-text-in var(--dur-sm) var(--ease-snap)
             calc(var(--hero-delay-title-1) + var(--stagger-display)) both;
}
/* Fade-out step of the rotating-phrase cycle — void absorbs faster than light reveals */
.hero-typewriter--fade {
  opacity: 0;
  transition: opacity var(--dur-enter) var(--ease-dissolve);
}

/* ── Countdown — centered ── */
.hero-countdown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  animation: hero-text-in var(--dur-sm) var(--ease-snap) var(--hero-delay-sub) both;
}

.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--cyan-a40);
  border-radius: var(--radius-none);
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.45);   /* stronger contrast over soup */
  min-width: 72px;
}

.cd-num {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--white);   /* white = always readable, not washed out by soup */
  display: block;
}

.cd-num--tick {
  animation: cd-tick var(--dur-micro) var(--ease-snap);
}

.cd-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-a50);
  display: block;
}

.cd-sep {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--cyan-a40);
  line-height: 1;
  padding-bottom: var(--space-6);
  align-self: flex-end;
  flex-shrink: 0;
}

.cd-zero {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--cyan);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  animation: hero-text-in var(--dur-sm) var(--ease-snap) var(--hero-delay-cta) both;
}
/* Desktop: natural-width side-by-side, no wrapping */
.hero-cta-group .btn-primary,
.hero-cta-group .btn-outline {
  white-space: nowrap;
  text-align: center;
}

/* ── Keyframes ── */
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cd-tick {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.08); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Mobile ── */
@media (max-width: 639px) {
  .hero-overlay {
    padding: var(--space-10) var(--space-5) var(--space-10);
  }

  /* Slightly tighter logo-o on small screens */
  .hero-title-logo-o { height: 0.72em; }

  .cd-cell { min-width: 56px; padding: var(--space-2) var(--space-3); }
  .cd-num  { font-size: var(--text-xl); }
  .cd-sep  { font-size: var(--text-xl); padding-bottom: var(--space-5); }
  .hero-countdown { gap: var(--space-2); }

  /* Mobile: stack buttons full-width */
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-outline {
    text-align: center;
    justify-content: center;
    white-space: normal;   /* allow wrap on very narrow screens if needed */
  }
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border: 2px solid var(--blue);
  transition:
    background var(--dur-xs) var(--ease-snap),
    color var(--dur-xs) var(--ease-snap),
    border-color var(--dur-xs) var(--ease-snap),
    box-shadow var(--dur-glow-out) var(--ease-glow);
}
.btn-primary:active { background: transparent; color: var(--cyan); border-color: var(--cyan); }
.btn-primary[disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary[disabled]::after { animation: none; content: none; }

/* Mobile-first shimmer sweep — uses transform on ::after, allowlist safe */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-100%) skewX(-15deg);
  animation: btn-shimmer 3.2s var(--ease-drift) 1.8s infinite;
  pointer-events: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  gap: var(--space-2);
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--blue);
  transition:
    background var(--dur-xs) var(--ease-snap),
    color var(--dur-xs) var(--ease-snap),
    border-color var(--dur-xs) var(--ease-snap);
}
.nav-cta:active { background: transparent; color: var(--cyan); border-color: var(--cyan); }

.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-100%) skewX(-15deg);
  animation: btn-shimmer 3.2s var(--ease-drift) 2.3s infinite;
  pointer-events: none;
}

@keyframes btn-shimmer {
  0%       { transform: translateX(-100%) skewX(-15deg); }
  30%, 100% { transform: translateX(250%) skewX(-15deg); }
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border: 2px solid var(--border);
  transition:
    border-color var(--dur-xs) var(--ease-snap),
    color var(--dur-xs) var(--ease-snap);
}
.btn-outline:active { border-color: var(--cyan); color: var(--cyan); }

@media (hover: hover) {
  .btn-primary:hover {
    background: transparent;
    color: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 var(--space-6) var(--glow-blue), 0 0 var(--space-2) var(--glow-cyan-edge);
  }
  .btn-primary:hover::after { animation-duration: 0.55s; animation-delay: 0s; }
  .btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
  .nav-cta:hover { background: transparent; color: var(--cyan); border-color: var(--cyan); }
  .nav-cta:hover::after { animation-duration: 0.55s; animation-delay: 0s; }
}

/* ── SECTION DIVIDER ── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* ── TRASCENDENCIAS ── */
#trascendencias { background: var(--bg2); position: relative; }

/* Quick-info widgets — 3-col grid */
.quick-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.quick-info-card {
  border: 1px solid var(--border);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  transition:
    border-color var(--dur-xs) var(--ease-snap),
    box-shadow var(--dur-glow-out) var(--ease-glow);
}
a.quick-info-card {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}
.quick-info-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-2);
}
.quick-info-value {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}
.quick-info-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: color var(--dur-xs) var(--ease-snap);
}
.quick-info-sub svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (hover: hover) {
  /* Scoped to the anchor variant only — the plain Fechas/Actividades
     cards are static info, not links, so they get no hover treatment. */
  a.quick-info-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 var(--space-5) var(--glow-blue);
  }
  a.quick-info-card:hover .quick-info-sub { color: var(--white); }
}

/* Prose paragraph */
.info-prose {
  margin-top: var(--space-10);
  text-align: justify;
  font-size: var(--text-lg);
  color: var(--gray);
  line-height: 1.8;
}

/* Gallery within Trascendencias */
.gallery-within-label { margin-top: var(--space-12); }
.carousel-overflow { padding-right: 0; max-width: 100%; }

/* ── HORARIO ── */
#horario { background: var(--bg); }

/* ── TALLERES ── */
#talleres { background: var(--bg2); }

.tabs-nav {
  display: flex;
  gap: 0;
  margin-top: var(--space-10);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  transition:
    color var(--dur-xs) var(--ease-snap),
    border-color var(--dur-xs) var(--ease-snap);
}
.tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-panel { display: none; margin-top: var(--space-6); }
.tab-panel.active { display: block; }

.schedule-list { display: flex; flex-direction: column; gap: 0; }
.schedule-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--blue-a15);
  align-items: start;
}
.schedule-time {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
  padding-top: var(--space-1);
}
.schedule-title { font-size: var(--text-base); font-weight: 500; color: var(--white); }
.schedule-speaker { font-size: var(--text-xs); color: var(--gray); margin-top: var(--space-1); }
.schedule-desc    { font-size: var(--text-sm); color: var(--gray-a50); margin-top: var(--space-1); line-height: 1.5; }
.schedule-type-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
}
.type-conference { background: var(--blue-a20); color: var(--blue); }
.type-workshop   { background: var(--cyan-a15); color: var(--cyan); }
.type-panel      { background: var(--gray-a10); color: var(--gray); }
.type-break      { color: var(--gray-a40); font-size: var(--text-xs); }
.type-social     { background: var(--blue-a30); color: var(--cyan); }
.type-general    { color: var(--gray-a50); }

/* Workshops */
.workshops-container { margin-top: var(--space-12); }
.workshops-category-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
  border-bottom: 2px solid;
}
.workshops-category-label.hard { color: var(--blue); border-color: var(--blue); }
.workshops-category-label.soft { color: var(--cyan); border-color: var(--cyan); }
.workshop-list { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-8); }

.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
  text-align: left;
  gap: var(--space-4);
}
.accordion-btn .chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--blue);
  transition: transform var(--dur-xs) var(--ease-snap);
}
.accordion-btn.open .chevron { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.7;
}
.accordion-body.open { display: block; }
.workshop-meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workshop-meta span { color: var(--blue); }

/* ── CONFERENCISTAS ── */
#conferencistas { background: var(--bg); overflow: hidden; }
.speakers-carousel-wrap {
  margin-top: var(--space-10);
  position: relative;
}
.speakers-carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.speakers-carousel::-webkit-scrollbar { display: none; }
.speakers-carousel.dragging { cursor: grabbing; }
.speaker-card {
  flex-shrink: 0;
  width: min(80vw, 280px);
  scroll-snap-align: start;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0;
  overflow: hidden;
}
.speaker-photo {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.speaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.speaker-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--blue-a10) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.speaker-photo-placeholder .placeholder-icon {
  width: var(--space-12);
  height: var(--space-12);
  opacity: var(--opacity-spark-ghost-lo);
}
.speaker-photo-placeholder span {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-a30);
}
.speaker-info { padding: var(--space-5); }
.speaker-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-1);
}
.speaker-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: var(--space-3);
}
.speaker-bio { font-size: var(--text-sm); color: var(--gray); line-height: 1.6; }

.carousel-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}
.carousel-dot {
  width: 6px;
  height: 6px;
  background: var(--border);
  border: none;
  transform-origin: left center;
  transition:
    background var(--dur-xs) var(--ease-snap),
    transform var(--dur-xs) var(--ease-snap);
}
.carousel-dot.active {
  background: var(--blue);
  transform: scaleX(3.333);
}

/* ── GALERÍA (now embedded in #trascendencias) ── */
/* Marquee automático — sin scroll manual: no hay contenedor scrolleable */
.gallery-carousel {
  overflow: hidden;
  margin-top: var(--space-4);
}
.gallery-track {
  display: flex;
  width: max-content;   /* el track mide lo que suman los slides, no el padre */
  animation: gallery-marquee var(--dur-gallery-marquee-per-photo) linear infinite;
}
.gallery-slide {
  flex-shrink: 0;
  width: min(85vw, 360px);
  margin-right: var(--space-3);   /* antes era `gap` en el flex padre — ver nota del seam en el plan */
  aspect-ratio: 4/3;
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }

@keyframes gallery-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation-play-state: paused; }
}
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: var(--opacity-spark-ghost-hi);
}
.gallery-placeholder-icon {
  width: var(--space-10);
  opacity: var(--opacity-gallery-placeholder-icon);
}
.gallery-placeholder span {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-none);
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--white);
}
.empty-state-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-a50);
  letter-spacing: 0.05em;
  margin-top: var(--space-2);
}

/* ── BOLETOS ── */
#boletos {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 0;   /* sub-blocks manage their own padding */
}
.boletos-tickets-wrap {
  padding: var(--section-pad-y) 0 var(--space-12);
}

/* ── Ticket spotlight card ── */
.ticket-spotlight {
  border: 1px solid var(--cyan-a40);
  background: var(--bg2);
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-10);
  position: relative;
  box-shadow: 0 0 var(--space-8) var(--glow-blue);
}
.ticket-spotlight-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ticket-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--blue);
  color: var(--blue);
}
.ticket-badge--live {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 var(--space-4) var(--glow-cyan);
}
.ticket-badge--ended {
  border-color: var(--gray-a50);
  color: var(--gray-a50);
}
.ticket-icon-svg {
  width: 40px;
  height: 40px;
  color: var(--cyan);
  opacity: var(--opacity-glow-lo);
  flex-shrink: 0;
}
.ticket-price {
  font-family: var(--font-body);
  font-size: var(--ticket-price-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.ticket-currency {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--gray);
}
.ticket-dates {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--gray);
  margin-bottom: var(--space-1);
}
.ticket-note {
  font-size: var(--text-sm);
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin-top: var(--space-2);
}
.ticket-cta { margin-top: var(--space-6); }
.ticket-cta-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--gray-a50);
  letter-spacing: 0.05em;
}

/* Compact rows for other phases */
.ticket-phases {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}
.ticket-phases-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-a50);
  margin-bottom: var(--space-4);
}
.ticket-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.ticket-row-name  { font-size: var(--text-base); font-weight: 600; color: var(--white); }
.ticket-row-price { font-size: var(--text-sm); font-weight: 700; color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket-row-dates { font-size: var(--text-sm); color: var(--gray-a50); white-space: nowrap; }
@media (max-width: 639px) {
  .ticket-row { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) 0; }
  .ticket-row-dates { color: var(--gray-a30); }
}

/* Past-phase group renders above the spotlight — flip the divider to the bottom edge */
.ticket-phases--past {
  margin: 0 0 var(--space-8);
  padding: 0 0 var(--space-6);
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.ticket-row--past { opacity: var(--opacity-muted); }

.cta-spark-left {
  left: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 15vw, 150px);
  opacity: var(--opacity-spark-ghost-hi);
}
.cta-spark-right {
  right: -3%;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: clamp(80px, 15vw, 150px);
  opacity: var(--opacity-spark-ghost-hi);
}

/* ── AMBIENT BACKGROUND LAYER (Trascendencias + Boletos) ── */
.section-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Position/size/opacity/drift-animation all live on this wrapper, which
   never toggles display — only the .ambient-spark-face image underneath it
   swaps per theme. Two elements independently running the same animation
   would drift out of phase with each other (each restarts at 0% whenever
   display flips it back on), producing a visible jump on every toggle; one
   continuously-animating wrapper has no such seam. aspect-ratio is fixed
   per corner (matched to that corner's dark-mode source image) so the box
   itself never changes size when the face image swaps — Brand Book-08/09/10
   (light) and -11/12/13/14 (dark) have very different intrinsic ratios, and
   without a fixed box the auto-height swap alone caused the same jump. */
.ambient-spark {
  position: absolute;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.ambient-spark--tr {
  top: -8%;
  right: -4%;
  width: clamp(100px, 22vw, 260px);
  aspect-ratio: 1481 / 1367;   /* Brand Book-11 */
  opacity: var(--opacity-spark-ghost-lo);
  animation: ambient-drift-a var(--dur-ambient-lg) var(--ease-drift) infinite;
}
.ambient-spark--bl {
  bottom: -10%;
  left: -5%;
  width: clamp(80px, 18vw, 200px);
  aspect-ratio: 1382 / 1286;   /* Brand Book-12 */
  opacity: var(--opacity-spark-ghost-lo);
  animation: ambient-drift-b var(--dur-ambient-md) var(--ease-drift) 800ms infinite;
}
/* Mirrored corners — used by Horario/Talleres/Conferencistas so they don't
   read as identical to Trascendencias/Boletos (both --tr/--bl). */
.ambient-spark--tl {
  top: -8%;
  left: -4%;
  width: clamp(100px, 22vw, 260px);
  aspect-ratio: 1596 / 1545;   /* Brand Book-13 */
  opacity: var(--opacity-spark-ghost-lo);
  animation: ambient-drift-a var(--dur-ambient-lg) var(--ease-drift) infinite;
}
.ambient-spark--br {
  bottom: -10%;
  right: -5%;
  width: clamp(80px, 18vw, 200px);
  aspect-ratio: 897 / 2160;   /* Brand Book-14 */
  opacity: var(--opacity-spark-ghost-lo);
  animation: ambient-drift-b var(--dur-ambient-md) var(--ease-drift) 800ms infinite;
}
/* The actual image — fills the wrapper's fixed box exactly, letterboxed
   via object-fit so a mismatched intrinsic ratio (the light-mode image)
   never resizes the box itself. Dark/light pair toggles here, same
   show/hide pattern as the nav sun/moon icons. */
.ambient-spark-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.ambient-spark-face--light { display: none; }
:root[data-theme="light"] .ambient-spark-face--dark  { display: none; }
:root[data-theme="light"] .ambient-spark-face--light { display: block; }
.ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 85% 15%, var(--blue-a10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 80%, var(--cyan-a15) 0%, transparent 60%);
}
@keyframes ambient-drift-a {
  0%   { transform: rotate(-12deg) translate(0, 0) scale(1); }
  33%  { transform: rotate(-15deg) translate(-10px, 14px) scale(1.02); }
  66%  { transform: rotate(-10deg) translate(5px, 7px) scale(0.99); }
  100% { transform: rotate(-12deg) translate(0, 0) scale(1); }
}
@keyframes ambient-drift-b {
  0%   { transform: rotate(168deg) translate(0, 0) scale(1); }
  40%  { transform: rotate(165deg) translate(8px, -12px) scale(1.03); }
  80%  { transform: rotate(171deg) translate(-5px, 6px) scale(0.98); }
  100% { transform: rotate(168deg) translate(0, 0) scale(1); }
}

/* ── NAV — Instagram link ── */
.nav-link--instagram {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  color: var(--gray-a50);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.nav-link--instagram svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── FOOTER (blue closing band — merged CTA beat + credits) ── */
#site-footer {
  background: var(--blue);
  padding: var(--space-16) var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#site-footer h2 {
  color: var(--white);
  font-size: var(--footer-heading-size);
  white-space: nowrap;
  margin-bottom: var(--space-2);
}
.footer-content > p:not(.footer-credits) {
  color: var(--white-75);
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
}
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Logo + socials share one row instead of stacking — keeps the footer band shorter */
.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-logo { display: flex; align-items: center; gap: var(--space-2); }
.footer-logo img { width: 28px; height: 28px; }
.footer-logo span {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-75);
}
.footer-socials { display: flex; gap: var(--space-4); }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 1px solid var(--white-75);
  color: var(--white-75);
  transition:
    border-color var(--dur-xs) var(--ease-snap),
    color var(--dur-xs) var(--ease-snap);
}
.social-link svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .social-link:hover { border-color: var(--white); color: var(--white); }
}
.footer-credits {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-75);
  text-align: center;
}

/* ── Desktop enhancements ── */
@media (min-width: 640px) {
  .quick-info-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .speaker-card { width: 260px; }
  .gallery-slide { width: 400px; }
  /* Carousels box like everything else on desktop — mobile keeps the
     edge-to-edge full-bleed swipe behavior. */
  .carousel-overflow { max-width: var(--container-max); padding-right: var(--container-pad); }

  /* ── Tipografía: el body no escalaba con la pantalla, los h2 sí.
        Sube el tier de contenido para cerrar la brecha. ── */

  /* Eyebrows y labels tracked */
  .section-label,
  .workshops-category-label,
  .tab-btn                  { font-size: var(--text-xs-desk); }
  .quick-info-label         { font-size: var(--text-sm-desk); }

  /* Info general */
  .info-prose,
  .quick-info-value         { font-size: var(--text-lg-desk); }

  /* Talleres */
  .accordion-btn            { font-size: var(--text-base-desk); }
  .accordion-body           { font-size: var(--text-sm-desk); }
  .workshop-meta            { font-size: var(--text-xs-desk); }
  .accordion-btn .chevron   { font-size: var(--text-xs-desk); width: 1.5em; height: 1.5em; }

  /* Horario */
  .schedule-item            { grid-template-columns: var(--space-20) 1fr; padding: var(--space-5) 0; }
  .schedule-time            { font-size: var(--text-base-desk); }
  .schedule-title           { font-size: var(--text-base-desk); }
  .schedule-desc            { font-size: var(--text-sm-desk); }
  .schedule-speaker,
  .schedule-type-badge,
  .type-break               { font-size: var(--text-xs-desk); }

  /* Hero: center whole block in viewport instead of bottom-anchoring; spacer only needed on mobile */
  .hero-overlay {
    justify-content: center;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .hero-top        { flex: 0 0 auto; }
  .hero-top-spacer { display: none; }
  .hero-bottom  { gap: var(--space-8); }
  /* Trim the title→typewriter gap so the extra bottom padding above is actually visible
     instead of being absorbed by content height on shorter laptop screens (~900px tall) */
  .hero-typewriter { margin-top: var(--space-20); padding-bottom: var(--space-10); }

  .hero-countdown { gap: var(--space-4); }
  .cd-cell   { min-width: 96px; padding: var(--space-5) var(--space-6); }
  .cd-num    { font-size: var(--text-3xl); }
  .cd-sep    { font-size: var(--text-3xl); padding-bottom: var(--space-8); }
  .cd-label  { font-size: var(--text-xs-desk); }

  .hero-cta-group { gap: var(--space-5); }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-outline {
    font-size: var(--text-base-desk);
    padding: var(--space-5) var(--space-10);
  }

  /* Boletos: la fase activa (fecha + nota) y los precios de las otras fases se leían chico */
  .ticket-dates     { font-size: var(--text-lg-desk); }
  .ticket-note      { font-size: var(--text-sm-desk); }
  .ticket-row-price { font-size: var(--text-sm-desk); }
}