/* MIND brand waves - final decorative system */
.mind-wave {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mind-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mind-wave--bottom {
  position: relative;
  width: 100%;
  height: clamp(70px, 8vw, 120px);
  margin-top: -1px;
  background: transparent;
  z-index: 2;
}

.mind-wave--side-cyan {
  right: -120px;
  top: 48%;
  width: min(38vw, 420px);
  height: min(70vw, 620px);
  transform: translateY(-50%);
  opacity: 0.055;
}

.mind-wave--side-blue {
  left: -120px;
  bottom: 6%;
  width: min(34vw, 360px);
  height: min(60vw, 520px);
  opacity: 0.045;
}

.mind-wave--bg {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.025;
}

#sobre,
#agenda,
#innovation-hub,
#precios {
  position: relative;
  overflow: hidden;
}

#sobre > :not(.mind-wave),
#agenda > :not(.mind-wave),
#innovation-hub > :not(.mind-wave),
#precios > :not(.mind-wave) {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .mind-wave--side-cyan {
    right: -190px;
    width: 360px;
    height: 540px;
    opacity: 0.04;
  }

  .mind-wave--side-blue {
    left: -190px;
    width: 330px;
    height: 460px;
    opacity: 0.035;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mind-wave {
    animation: none !important;
  }
}

/* Final QA overrides loaded after v3.css */
#innovation-hub .innovahub__panel {
  opacity: 1 !important;
}

#innovation-hub .innovahub__panel.is-updating {
  opacity: 0.72 !important;
}

@media (max-width: 1024px) {
  #sobre.sobre-purpose .purpose__inner,
  #sobre .purpose__inner,
  #innovation-hub .innovahub__layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  #sobre.sobre-purpose .purpose__inner,
  #sobre .purpose__inner {
    width: min(100% - 2rem, 1320px) !important;
  }
}

/* ── HERO brand lockup: SUMMIT / MIND / 2026 on one left axis ──
   Final overrides (loaded after v3.css). Fixes:
   1. SUMMIT was tiny (0.72–1rem) + spread thin → readable bold label.
   2. 2026 was text-align:center + trailing letter-spacing → pushed
      right of MIND. Now left-aligned to MIND's first letter and the
      "Conecta. Investiga…" pillars. */
#hero .hero__titles {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: clamp(2px, 0.5vh, 8px) !important;
}

#hero .hero__summit {
  align-self: flex-start !important;
  width: auto !important;
  margin: 0 0 clamp(2px, 0.7vh, 9px) !important;
  padding: 0 !important;
  font-family: 'Montserrat', 'Arial', sans-serif !important;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.28em !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
}

#hero .hero__year {
  align-self: flex-start !important;
  width: auto !important;
  margin: clamp(4px, 0.8vh, 10px) 0 0 !important;
  padding: 0 !important;
  font-size: clamp(2rem, 4.4vw, 4.2rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
  text-indent: 0 !important;
}

@media (max-width: 480px) {
  #hero .hero__logos {
    margin-top: 56px !important;
    padding-block: 4px !important;
  }

  #hero .hero__logo-mark {
    width: 30px !important;
    height: 30px !important;
  }

  #hero .hero__split {
    padding-top: 64px !important;
    padding-bottom: 24px !important;
  }

  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(50px, 15vw, 72px) !important;
  }

  #hero .hero__year {
    font-size: clamp(1.25rem, 8vw, 2.3rem) !important;
  }

  #hero .hero__tagline {
    margin-top: 0.55rem !important;
    font-size: clamp(1rem, 5.4vw, 1.45rem) !important;
  }

  #hero .hero__desc {
    margin-top: 0.45rem !important;
    line-height: 1.34 !important;
  }

  #hero .hero__meta {
    margin-top: 0.55rem !important;
    gap: 5px !important;
  }

  #hero .hero__cta {
    margin-top: 0.7rem !important;
    gap: 8px !important;
  }

  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   LIGHT-MODE QA: remove inherited dark-mode residue
   (white / low-contrast text on light backgrounds).
   Loaded last so these win the cascade authoritatively.
   ════════════════════════════════════════════════════════════════ */

/* Controlled light-theme tokens (requested global :root clean-up).
   Aligned to the existing brand palette for visual consistency. */
:root {
  --bg-main: #ffffff;
  --text-primary: #07192E;        /* azul noche corporativo (= --mind-text-dark) */
  --text-secondary: #4A5568;      /* gris medio (= --mind-text-muted) */
  --brand-color: #10b981;         /* esmeralda oficial */
  --brand-emerald-ink: #0B7A57;   /* esmeralda legible para texto sobre blanco */
}

/* ── 1. HEADER NAV — active/scrolled tab was white-on-white ──────
   The scrolled nav sits on a light glass bg (rgba(255,255,255,.92)),
   yet legacy rules forced #fff text → menu invisible. Use #navbar
   (id) specificity to override every class-only legacy rule. */
#navbar.scrolled .nav__link {
  background: none !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#navbar.scrolled .nav__link:hover {
  color: var(--brand-emerald-ink) !important;
  -webkit-text-fill-color: var(--brand-emerald-ink) !important;
}

/* Active tab: dark high-contrast text + emerald brand-gradient underline */
#navbar.scrolled .nav__link.active,
#navbar.scrolled .nav__link[aria-current="page"] {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  font-weight: 800 !important;
  background-image: var(--mind-gradient) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 3px !important;
}

/* ── 2. AGENDA day tabs & filters — kill dark-mode residue ───────
   app.css #agenda.agenda--engine rules forced white/low-contrast
   text on near-transparent backgrounds. Match their specificity. */
#agenda.agenda--engine .agenda__day-btn {
  background: #F0F4F8 !important;
  border: 1px solid #E2E8F0 !important;
  color: var(--text-secondary) !important;
}
#agenda.agenda--engine .agenda__day-btn span {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}
#agenda.agenda--engine .agenda__day-btn strong {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Active day tab: saturated brand gradient → white text is correct here */
#agenda.agenda--engine .agenda__day-btn.active {
  background: var(--mind-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(28, 198, 181, 0.30) !important;
}
#agenda.agenda--engine .agenda__day-btn.active span,
#agenda.agenda--engine .agenda__day-btn.active strong {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

#agenda.agenda--engine .agenda__filter {
  background: #FFFFFF !important;
  border: 1px solid rgba(28, 198, 181, 0.35) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
#agenda.agenda--engine .agenda__filter:hover {
  border-color: var(--brand-color) !important;
  background: rgba(16, 185, 129, 0.06) !important;
  color: var(--brand-emerald-ink) !important;
  -webkit-text-fill-color: var(--brand-emerald-ink) !important;
}
/* Active filter: saturated brand gradient fill → white text is correct */
#agenda.agenda--engine .agenda__filter.active,
#agenda.agenda--engine .agenda__filter[aria-pressed="true"] {
  background: var(--mind-gradient) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ── 3. AGENDA timeline cards — white title/desc on light cards ──
   app.css forced .timeline-card__title #fff and __desc white-65%. */
#agenda.agenda--engine .timeline-card__title {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}
#agenda.agenda--engine .timeline-card__desc {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════
   #SOBRE — canonical two-column layout (.about-container)
   Bypasses the legacy cascade (home-redesign forced 40%/60% and
   hid .purpose__media on desktop → text-left + dead space right).
   The wrapper keeps its purpose__inner/container classes so all
   Splitting.js / scroll-trigger hooks remain intact.
   ════════════════════════════════════════════════════════════════ */
#sobre .about-container,
#sobre.sobre-purpose .purpose__inner.about-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: center !important;
  width: 92% !important;          /* breathing margin ~4% each side on laptops */
  max-width: 1440px !important;   /* expand toward premium desktop width */
  margin: 0 auto !important;
  padding: 6rem 0 !important;     /* vertical rhythm; sides handled by width */
}

/* Media column must be visible and fill its cell (legacy hid it) */
#sobre.sobre-purpose .about-container .purpose__media,
#sobre .about-container .purpose-gallery {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ── #SOBRE gallery showcase — fluid, GSAP-driven crossfade stage ──
   Caption removed; figure no longer forces a portrait aspect-ratio. */
#sobre .purpose-gallery,
#sobre.sobre-purpose .purpose__media.purpose-gallery {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Stage: scales by aspect-ratio across ultra-wide and compact displays */
#sobre .purpose-gallery__stage {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important;
  background: #EAF7F7 !important;
  box-shadow: var(--mind-shadow-soft) !important;
}

/* Images = absolute layer overlays; GSAP owns opacity/scale (no CSS
   transition fighting the timeline). GPU-accelerated.
   NOTE: opacity & transform are intentionally NOT !important — GSAP sets
   them inline (without !important), so a !important rule here would block
   the animation. Only structural props are forced. */
#sobre .purpose-gallery__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 62% center !important;
  transition: none !important;
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
  opacity: 0;
}
#sobre .purpose-gallery__image.is-active {
  opacity: 1;
}

/* Collapse to a single column on tablet / mobile */
@media (max-width: 1024px) {
  #sobre .about-container,
  #sobre.sobre-purpose .purpose__inner.about-container {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 3.5rem 1.5rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   #AGENDA — Genetic Optimization Timeline (light + WCAG-safe)
   Compact cards branch off a central emerald spine. opacity / scale /
   transform are GSAP-driven (inline) — intentionally NOT !important so
   the timeline in js/agenda.js can animate them. All text is dark/
   brand-colored: no white-on-white residue.
   ════════════════════════════════════════════════════════════════ */
#agenda .optim-agenda {
  position: relative;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: 0.5rem;
}

/* Central "genetic axis" — scales with the cluster + emerald pulse.
   Inset top/bottom so the line begins/ends near the first/last nodes
   instead of overhanging into empty space above and below the cards. */
#agenda .optim-agenda__spine {
  position: absolute;
  left: 50%;
  top: 2.6rem;
  bottom: 2.6rem;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--brand-color, #10b981) 0%, #1F8FE0 100%);
  transform-origin: top center;
  will-change: transform, opacity;
  animation: optimSpinePulse 2.6s ease-in-out infinite;
}
@keyframes optimSpinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50%      { box-shadow: 0 0 18px 1px rgba(16, 185, 129, 0.5); }
}

#agenda .optim-agenda__day { position: relative; display: block; }
#agenda .optim-agenda__day[hidden] { display: none; }

/* Compact two-column card (time | content) */
#agenda .optim-agenda__card {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.25rem;
  width: min(45%, 500px);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
  border-radius: 1.25rem;
  box-shadow: 0 16px 40px rgba(7, 25, 46, 0.08);
  will-change: transform, opacity;
  /* FAILSAFE: cards are fully visible by default. GSAP hides/reveals them
     inline (without !important) only when it loads successfully; if scripts
     are blocked (e.g. ES modules over file://) the cards still render. */
  opacity: 1;
  transform: none;
}
#agenda .optim-agenda__card[hidden] { display: none; }

/* Alternating branches — cards hug the central spine */
#agenda .optim-agenda__card--right { margin-left: 55%; }
#agenda .optim-agenda__card--left  { margin-right: 55%; grid-template-columns: 1fr 80px; }
#agenda .optim-agenda__card--left .optim-agenda__time { grid-column: 2; }
#agenda .optim-agenda__card--left .optim-agenda__body { grid-column: 1; text-align: right; }
#agenda .optim-agenda__card--left .optim-agenda__time { align-items: flex-end; }
#agenda .optim-agenda__card--left .optim-agenda__tag { margin-left: auto; }

/* Connector stub toward the spine */
#agenda .optim-agenda__card::before {
  content: "";
  position: absolute;
  top: 1.7rem;
  width: 11.1%;
  height: 2px;
  background: var(--node, #10b981);
  opacity: 0.55;
}
#agenda .optim-agenda__card--right::before { left: -11.1%; }
#agenda .optim-agenda__card--left::before  { right: -11.1%; }

/* Time column + glowing node */
#agenda .optim-agenda__time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#agenda .optim-agenda__node {
  width: 16px;
  height: 16px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--node, #10b981);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14), 0 0 14px 2px var(--node, #10b981);
}
#agenda .optim-agenda__start {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary, #07192E);
}
#agenda .optim-agenda__end {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #4A5568);
}

/* Content — dark / brand-colored only */
#agenda .optim-agenda__body { min-width: 0; }
#agenda .optim-agenda__tag {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--node, #10b981);
  background: color-mix(in srgb, var(--node, #10b981) 12%, #ffffff);
}
#agenda .optim-agenda__title {
  margin: 0 0 0.3rem;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary, #07192E);
}
#agenda .optim-agenda__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary, #4A5568);
}

/* Responsive: collapse all two-column structures to a single column */
@media (max-width: 1023px) {
  #agenda .optim-agenda__spine { left: 20px; margin-left: 0; }
  #agenda .optim-agenda__card,
  #agenda .optim-agenda__card--left,
  #agenda .optim-agenda__card--right {
    width: auto;
    margin: 1rem 0 1rem 46px;
    grid-template-columns: 70px 1fr;
  }
  #agenda .optim-agenda__card--left .optim-agenda__time { grid-column: 1; align-items: flex-start; }
  #agenda .optim-agenda__card--left .optim-agenda__body { grid-column: 2; text-align: left; }
  #agenda .optim-agenda__card--left .optim-agenda__tag { margin-left: 0; }
  #agenda .optim-agenda__card::before,
  #agenda .optim-agenda__card--left::before,
  #agenda .optim-agenda__card--right::before {
    left: -26px;
    right: auto;
    width: 26px;
  }
}

/* ════════════════════════════════════════════════════════════════
   #INNOVATION-HUB — per-axis chromatic identity, light-mode contrast,
   wide asymmetric grid, responsive ribbon. Single renderer:
   js/innovahub.js sets --axis-color (+ --active-color) per event.
   ════════════════════════════════════════════════════════════════ */

/* PHASE 1.1 — header typography readable on the light section */
#innovation-hub .innovahub__title {
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}
#innovation-hub .innovahub__title span {
  background: linear-gradient(90deg, #10B981 0%, #00C1D4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--brand-emerald-ink, #0B7A57) !important; /* fallback if clip unsupported */
}
#innovation-hub .innovahub__lead {
  color: var(--text-secondary, #4A5568) !important;
  -webkit-text-fill-color: var(--text-secondary, #4A5568) !important;
}

/* PHASE 3.1 — wide asymmetric grid (favor the showcase card) */
#innovation-hub .innovation-hub__inner {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  padding-inline: clamp(1rem, 3vw, 2rem) !important;
}
#innovation-hub .innovahub__layout {
  display: grid !important;
  grid-template-columns: 2fr 3fr !important;
  gap: 5rem !important;
  width: 94% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  align-items: center !important;
}

/* PHASE 1.2 — chromatic identity morph (smooth CSS variable transitions) */
#innovation-hub .innovahub__num,
#innovation-hub .innovahub__active-line,
#innovation-hub .innovahub__item,
#innovation-hub .innovahub__panel,
#innovation-hub .innovahub__eyebrow,
#innovation-hub .innovahub-display__tags span,
#innovation-hub .innovahub-display__schedule svg {
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease,
              stroke 0.4s ease, box-shadow 0.5s ease !important;
}
#innovation-hub .innovahub__item { --axis-color: var(--event-color, #10B981); }
#innovation-hub .innovahub__item.active { border-left-color: var(--axis-color, #10B981) !important; }
#innovation-hub .innovahub__num { color: var(--axis-color, #10B981) !important; }
#innovation-hub .innovahub__active-line { background: var(--axis-color, #10B981) !important; }

#innovation-hub .innovahub__panel .innovahub__eyebrow {
  color: var(--axis-color, var(--active-color, #10B981)) !important;
}
#innovation-hub .innovahub-display__schedule svg {
  stroke: var(--axis-color, var(--active-color, #10B981)) !important;
}
#innovation-hub .innovahub-display__tags span {
  color: var(--axis-color, var(--active-color, #10B981)) !important;
  background: color-mix(in srgb, var(--axis-color, #10B981) 12%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--axis-color, #10B981) 30%, #ffffff) !important;
}
/* card glow tinted by the active axis */
#innovation-hub .innovahub__panel {
  box-shadow: 0 18px 50px rgba(7, 25, 46, 0.10),
              0 0 0 1px color-mix(in srgb, var(--axis-color, #10B981) 18%, transparent),
              0 24px 70px color-mix(in srgb, var(--axis-color, #10B981) 22%, transparent) !important;
}

/* PHASE 2 — kill white-on-white residue in the card body / footer */
#innovation-hub .innovahub__panel .innovahub__panel-title {
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}
#innovation-hub .innovahub__panel .innovahub__panel-desc {
  color: var(--text-secondary, #4A5568) !important;
  -webkit-text-fill-color: var(--text-secondary, #4A5568) !important;
}
#innovation-hub .innovahub-display__stats {
  background: #E6EDF3 !important;                 /* light divider surface */
  border: 1px solid rgba(7, 25, 46, 0.08) !important;
}
#innovation-hub .innovahub-display__stats span { background: #FFFFFF !important; }
#innovation-hub .innovahub-display__stats strong {
  color: var(--text-primary, #07192E) !important; /* WCAG-safe on white */
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}
#innovation-hub .innovahub-display__stats small {
  color: var(--text-secondary, #4A5568) !important;
  -webkit-text-fill-color: var(--text-secondary, #4A5568) !important;
}
/* (schedule pills sit over the darkened image → white text stays correct) */

/* PHASE 4 — GPU acceleration for the GSAP-animated panel layers */
#innovation-hub .innovahub-display__media,
#innovation-hub .innovahub__eyebrow,
#innovation-hub .innovahub__panel-title,
#innovation-hub .innovahub__panel-desc,
#innovation-hub .innovahub-display__tags,
#innovation-hub .innovahub-display__stats {
  will-change: transform, opacity;
}

/* Cinematic background glow synced to the active axis */
#innovation-hub::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  transform: translateX(-50%) translateZ(0);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--axis-color, #10B981) 16%, transparent) 0%, transparent 64%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transition: background 0.6s ease;
}

/* PHASE 3.2 — responsive: horizontal swipe ribbon + full-width card */
@media (max-width: 1023px) {
  #innovation-hub .innovahub__layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1.75rem !important;
  }
  /* CONTAINMENT: grid/flex children default to min-width:auto, which let the
     carousel's max-content force the single 1fr column to ~796px and clip the
     section. Force every column + inner element to shrink to the viewport. */
  #innovation-hub .innovahub__layout > *,
  #innovation-hub .innovahub__left,
  #innovation-hub .innovahub__panel {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #innovation-hub .innovahub__title,
  #innovation-hub .innovahub__lead { max-width: 100% !important; }
  #innovation-hub.innovahub .innovahub__list {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    margin: 0 0 1.25rem !important;
  }
  #innovation-hub.innovahub .innovahub__item {
    flex: 0 0 82% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }
  #innovation-hub .innovahub__panel {
    height: auto !important;
  }
  /* Media + image fill the (now contained) card; schedule pills wrap inside */
  #innovation-hub .innovahub-display__media,
  #innovation-hub .innovahub-display__media img {
    width: 100% !important;
    max-width: 100% !important;
  }
  #innovation-hub .innovahub-display__schedule {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  #innovation-hub::before { width: 120vw; height: 120vw; top: 28%; }
}

/* -------------------------------------------------------------------
   HERO MOBILE ARCHITECTURE FIX � mind-waves.css append
   Loaded last = m�xima prioridad en cascada.
   Issues solved:
     PHASE 1 � Color system: botones con brand gradient
     PHASE 2 � Typography: SUMMIT/MIND/2026 fluid + centrado
     PHASE 3 � Layout: logos en carrusel t�ctil, sin solapamiento
     BONUS    � Mobile scrim oscuro para contraste WCAG
   ------------------------------------------------------------------- */

/* --- PHASE 1: COLOR SYSTEM � Botones iguales a INSCR�BETE -------------
   Brand gradient oficial: #00C1D4 ? #00E676 (cian a verde).
   "Reservar entrada" = relleno s�lido brand.
   "Ver programa"     = ghost con borde cian.
----------------------------------------------------------------------- */
#hero .hero__btn-primary,
.hero.hero--singularity .hero__btn-primary {
  background: linear-gradient(135deg, #00C1D4 0%, #00E676 100%) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: clamp(12px, 3.6vw, 15px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 24px rgba(0,193,212,0.40) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
#hero .hero__btn-primary:hover,
.hero.hero--singularity .hero__btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(0,193,212,0.55) !important;
}

#hero .hero__btn-outline,
.hero.hero--singularity .hero__btn-outline {
  background: rgba(0,0,0,0.25) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.70) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: clamp(12px, 3.6vw, 15px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.22s ease, border-color 0.22s ease !important;
}
#hero .hero__btn-outline:hover,
.hero.hero--singularity .hero__btn-outline:hover {
  background: rgba(0,193,212,0.25) !important;
  border-color: #00E5FF !important;
}

/* --- PHASE 2: TYPOGRAPHY � Fluid clamp() + SUMMIT centrado ------------
   SUMMIT ? centrado sobre MIND, tama�o escalable.
   MIND   ? ancla del layout, full-width en mobile.
   2026   ? mismo eje central que SUMMIT y MIND.
----------------------------------------------------------------------- */

/* Desktop/tablet: mantener alineaci�n izquierda pero escalar */
#hero .hero__titles {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#hero .hero__summit {
  font-size: clamp(1.2rem, 3.5vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: clamp(0.22em, 0.9vw, 0.44em) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65) !important;
  width: 100% !important;
  display: block !important;
}

#hero .hero__mind,
#hero .hero__mind .char {
  font-size: clamp(5rem, 18vw, 13rem) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: -0.05em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.60) !important;
  display: block !important;
  width: 100% !important;
}

#hero .hero__year {
  font-size: clamp(1.8rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: clamp(0.1em, 0.5vw, 0.28em) !important;
  color: #00E5FF !important;
  -webkit-text-fill-color: #00E5FF !important;
  text-shadow: 0 0 32px rgba(0,229,255,0.30), 0 2px 8px rgba(0,0,0,0.60) !important;
  background: none !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
  margin-top: clamp(2px, 0.6vh, 8px) !important;
}

/* --- PHASE 3: GRID LAYOUT � Logos carrusel t�ctil, sin solapamiento ---
   MOBILE = 768px:
   � Logos ? carrusel horizontal deslizable (overflow-x scroll-snap)
   � Hero container ? flex-column, logos arriba, split abajo
   � padding-top en split = altura del nav (64px) + logos (~48px) + gap
----------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* -- SCRIM: overlay oscuro para contraste WCAG en mobile -- */
  #hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.28) 35%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0.72) 100%
      ) !important;
  }

  /* -- HERO CONTAINER: Flexbox column limpio -- */
  .hero.hero--singularity.hero--summit {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* -- LOGOS: Carrusel horizontal scroll-snap (Phase 3) -- */
  .hero.hero--singularity.hero--summit .hero__logos,
  #hero .hero__logos {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    /* Carrusel t�ctil */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* Espaciado: debajo del nav fijo */
    margin-top: clamp(64px, 10vh, 80px) !important;
    padding: 8px 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    /* Separar visualmente del texto que viene despu�s */
    flex-shrink: 0 !important;
  }

  /* Ocultar scrollbar en webkit */
  .hero.hero--singularity.hero--summit .hero__logos::-webkit-scrollbar,
  #hero .hero__logos::-webkit-scrollbar {
    display: none !important;
  }

  /* Cada logo-group: scroll-snap al inicio */
  .hero.hero--singularity.hero--summit .hero__logo-group,
  #hero .hero__logo-group {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* Logo mark: tama�o controlado en mobile */
  .hero.hero--singularity.hero--summit .hero__logo-mark,
  #hero .hero__logo-mark {
    width: clamp(28px, 7vw, 38px) !important;
    height: clamp(28px, 7vw, 38px) !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* Label: fuente peque�a legible */
  .hero.hero--singularity.hero--summit .hero__logo-label,
  #hero .hero__logo-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .hero.hero--singularity.hero--summit .hero__logo-label--name,
  #hero .hero__logo-label--name {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
  }
  .hero.hero--singularity.hero--summit .hero__logo-label--sub,
  #hero .hero__logo-label--sub {
    font-size: 9px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
  }

  /* Separadores: peque�os y discretos */
  .hero.hero--singularity.hero--summit .hero__logo-sep,
  #hero .hero__logo-sep {
    width: 1px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.25) !important;
    flex-shrink: 0 !important;
  }

  /* -- SPLIT: ocupa el resto, texto al fondo -- */
  .hero.hero--singularity.hero--summit .hero__split,
  #hero .hero__split {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: clamp(12px, 2vh, 20px) clamp(16px, 5vw, 28px) clamp(32px, 6vh, 56px) !important;
    width: 100% !important;
    /* NO m�s padding-top grande que antes causaba el gap vac�o */
  }

  /* -- TYPOGRAPHY MOBILE: centrado, escalado, bold -- */
  #hero .hero__text-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* SUMMIT: centrado sobre MIND */
  #hero .hero__summit {
    font-size: clamp(1.05rem, 5.5vw, 1.65rem) !important;
    letter-spacing: 0.3em !important;
    text-align: left !important;
    align-self: flex-start !important;
  }

  /* MIND: grande, el ancla */
  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(4.5rem, 26vw, 7.5rem) !important;
    letter-spacing: -0.06em !important;
    line-height: 0.85 !important;
  }

  /* 2026: cyan, alineado con MIND */
  #hero .hero__year {
    font-size: clamp(2rem, 12vw, 3.8rem) !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
    margin-top: 2px !important;
  }

  /* Taglines */
  #hero .hero__tagline-line {
    font-size: clamp(1.3rem, 6.5vw, 2rem) !important;
    line-height: 0.96 !important;
  }

  /* Descripci�n */
  #hero .hero__desc {
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.45 !important;
    max-width: 38ch !important;
  }

  /* Meta items (fecha/lugar) */
  #hero .hero__meta {
    margin-top: clamp(10px, 1.8vh, 18px) !important;
    gap: 7px !important;
  }

  /* CTAs en columna full-width */
  #hero .hero__cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: clamp(14px, 2.2vh, 22px) !important;
  }

  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center !important;
    font-size: clamp(12px, 3.8vw, 15px) !important;
  }

  /* Foto col: ocultar en mobile */
  #hero .hero__photo-col {
    display: none !important;
  }
}

/* --- BONUS: Reduced Motion � desactivar animaciones costosas ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero .hero__mind .char,
  #hero .hero__summit,
  #hero .hero__year,
  #hero .hero__tagline-line {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- Ultra-narrow (<400px): micro-ajustes ------------------------------ */
@media (max-width: 400px) {
  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(4rem, 28vw, 5.5rem) !important;
  }
  #hero .hero__year {
    font-size: clamp(1.8rem, 12vw, 3rem) !important;
  }
  #hero .hero__summit {
    font-size: clamp(0.95rem, 5vw, 1.35rem) !important;
    letter-spacing: 0.26em !important;
  }
}

/* -------------------------------------------------------------------
   BRAND CORRECTION BLOCK � 2026-06-21 T2
   Carga DESPU�S del bloque anterior ? gana la cascada.
   1. 2026 = blanco puro (no cyan)
   2. SUMMIT centrado visualmente bajo MIND (desktop)
   3. Mobile: eje central perfecto para las 3 marcas
   ------------------------------------------------------------------- */

/* --- 1. A�O 2026: BLANCO PURO, NO CYAN --------------------------------
   La identidad de marca usa blanco para el a�o.
   Remover cyan y glow cian � solo shadow sutil oscuro.
----------------------------------------------------------------------- */
#hero .hero__year,
.hero.hero--singularity .hero__year,
.hero.hero--singularity.hero--summit .hero__year {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.60),
    0 1px 4px rgba(0, 0, 0, 0.40) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* --- 2. DESKTOP: SUMMIT centrado bajo MIND, 2026 centrado -------------
   Truco visual: .hero__titles en flex-column con align-items:center.
   MIND tiene width:max-content ? los hijos menores (SUMMIT, 2026)
   se centran exactamente bajo el ancho real de "MIND".
----------------------------------------------------------------------- */
@media (min-width: 769px) {
  #hero .hero__titles {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* SUMMIT: centrado sobre MIND, escala fluida */
  #hero .hero__summit {
    font-size: clamp(1.4rem, 3.2vw, 2.8rem) !important;
    letter-spacing: clamp(0.28em, 0.95vw, 0.48em) !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    width: auto !important;
    align-self: center !important;
    text-indent: 0 !important;
  }

  /* MIND: permanece ancla � width:max-content fija el eje */
  #hero .hero__mind {
    font-size: clamp(5.5rem, 10.5vw, 13.5rem) !important;
    font-weight: 900 !important;
    line-height: 0.82 !important;
    letter-spacing: -0.055em !important;
    width: max-content !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* 2026: centrado bajo MIND, mismo ancho que MIND */
  #hero .hero__year {
    font-size: clamp(2rem, 4.5vw, 5.2rem) !important;
    letter-spacing: clamp(0.20em, 0.9vw, 0.38em) !important;
    text-indent: clamp(0.20em, 0.9vw, 0.38em) !important;
    text-align: center !important;
    align-self: center !important;
    width: 100% !important;
    font-weight: 900 !important;
    margin-top: clamp(2px, 0.5vh, 8px) !important;
  }
}

/* --- 3. MOBILE =768px: EJE CENTRAL PERFECTO ---------------------------
   Todo el bloque de marca (SUMMIT + MIND + 2026) en eje central.
   Logos: carrusel t�ctil ya configurado, respeta el espacio del nav.
----------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* El contenedor de t�tulos centra sus hijos */
  #hero .hero__titles {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* SUMMIT centrado con tipograf�a escalable */
  #hero .hero__summit {
    text-align: center !important;
    align-self: center !important;
    font-size: clamp(1.05rem, 5.8vw, 1.75rem) !important;
    letter-spacing: clamp(0.22em, 1vw, 0.38em) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-indent: 0 !important;
  }

  /* MIND: ancla central, mayor presencia */
  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(5rem, 28vw, 8rem) !important;
    letter-spacing: -0.06em !important;
    line-height: 0.84 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 2026: centrado, blanco puro, escala con vw */
  #hero .hero__year {
    font-size: clamp(2.2rem, 13vw, 4.2rem) !important;
    letter-spacing: clamp(0.12em, 0.6vw, 0.28em) !important;
    text-indent: 0 !important;
    text-align: center !important;
    align-self: center !important;
    width: 100% !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin-top: 4px !important;
  }

  /* El text-col centra horizontalmente */
  #hero .hero__text-col {
    align-items: center !important;
    text-align: center !important;
  }

  /* Taglines: centradas */
  #hero .hero__tagline {
    align-items: center !important;
  }

  /* Descripci�n: centrada */
  #hero .hero__desc {
    text-align: center !important;
    max-width: 36ch !important;
  }

  /* Meta (fecha/lugar): centrada */
  #hero .hero__meta {
    align-items: center !important;
    width: 100% !important;
    justify-content: center !important;
  }
  #hero .hero__meta-item {
    justify-content: center !important;
  }

  /* CTAs: columna centrada, full-width */
  #hero .hero__cta {
    align-items: center !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    width: 100% !important;
    max-width: 360px !important;
    min-height: 52px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* El split tambi�n centra horizontalmente */
  #hero .hero__split,
  .hero.hero--singularity.hero--summit .hero__split {
    align-items: center !important;
  }
}

/* --- Ultra-narrow =400px: micro-ajustes adicionales ----------------- */
@media (max-width: 400px) {
  #hero .hero__summit {
    font-size: clamp(0.95rem, 5.5vw, 1.4rem) !important;
    letter-spacing: 0.24em !important;
  }
  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(4.2rem, 27vw, 6.5rem) !important;
  }
  #hero .hero__year {
    font-size: clamp(1.9rem, 13vw, 3.2rem) !important;
    letter-spacing: 0.10em !important;
    text-indent: 0 !important;
  }
}

/* -------------------------------------------------------------------
   HERO BUTTONS FINAL � 2026-06-21 T3
   "Reservar Entrada" y "Ver Programa" = mismo estilo que INSCRIBETE:
   gradiente s�lido de marca + texto blanco + sin borde.
   ------------------------------------------------------------------- */

/* Gradiente exacto del bot�n INSCR�BETE (nav__btn--filled)
   #1E6CFA ? #1687F0 ? #12A6DB ? #1ABDBF ? #29CEAD               */

#hero .hero__btn-primary,
#hero .hero__btn-outline,
.hero.hero--singularity .hero__btn-primary,
.hero.hero--singularity .hero__btn-outline,
.hero.hero--singularity.hero--summit .hero__btn-primary,
.hero.hero--singularity.hero--summit .hero__btn-outline {
  /* Fondo s�lido � mismo gradiente que INSCRIBETE */
  background: linear-gradient(90deg, #1E6CFA 0%, #1687F0 25%, #12A6DB 50%, #1ABDBF 75%, #29CEAD 100%) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;

  /* Texto blanco puro */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  /* Sin borde */
  border: none !important;
  outline: none !important;

  /* Forma de p�ldora */
  border-radius: 999px !important;

  /* Tipograf�a */
  font-weight: 900 !important;
  font-size: clamp(12px, 3.4vw, 15px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  /* Tama�o m�nimo */
  min-height: 48px !important;
  padding: 0 clamp(20px, 5vw, 32px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Sombra del mismo tono */
  box-shadow: 0 6px 22px rgba(18, 166, 219, 0.38) !important;

  /* Transici�n suave */
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.2s ease !important;
}

#hero .hero__btn-primary:hover,
#hero .hero__btn-outline:hover,
.hero.hero--singularity .hero__btn-primary:hover,
.hero.hero--singularity .hero__btn-outline:hover {
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 12px 36px rgba(18, 166, 219, 0.52) !important;
  opacity: 0.94 !important;
}

/* Mobile: full-width en columna */
@media (max-width: 768px) {
  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    width: 100% !important;
    max-width: 360px !important;
    min-height: 52px !important;
    font-size: clamp(13px, 3.8vw, 15px) !important;
  }
}

/* ============================================================
   #PRECIOS — Auditoría tema claro (junio 2026)
   Elimina el residuo "modo oscuro" del desglose de pases:
   texto fantasma blanco-sobre-blanco y barra de asesores
   oscura. Carga al final del cascade => gana sin tocar el
   HTML ni los hooks de analítica. Tokens: --text-primary
   #07192E / --text-secondary #4A5568.
   ============================================================ */

/* --- PHASE 1: recuperación de textos invisibles --- */
/* El JS (initPassSelector) genera .benefit-item con <strong>/<small>.
   app.css los forzaba a #fff !important (blanco sobre el panel blanco).
   Homologamos a tokens legibles. */
#precios.passes-section .benefit-item strong {
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}

#precios.passes-section .benefit-item small {
  color: var(--text-secondary, #4A5568) !important;
  -webkit-text-fill-color: var(--text-secondary, #4A5568) !important;
}

/* Divisor entre beneficios: era blanco 5% (invisible sobre blanco) */
#precios.passes-section .benefit-item {
  border-bottom-color: rgba(7, 20, 33, 0.08) !important;
}

/* El check hereda --pass-color (lo actualiza applyPassColor por tier);
   solo aseguramos el fondo tintado legible sobre blanco. */
#precios.passes-section .benefit-item span {
  background: color-mix(in srgb, var(--pass-color, #00E676) 14%, #FFFFFF) !important;
  color: var(--pass-color, #00E676) !important;
}

/* Títulos / precio del panel: app.css los forzaba a #fff !important con
   especificidad (#precios.passes-section .X). Igualamos especificidad y,
   al cargar mind-waves al final, ganamos por orden de origen.
   (active-name se deja intacto: lleva el color del tier vía v3 + JS.) */
#precios.passes-section .passes__title,
#precios.passes-section .passes__active-title,
#precios.passes-section .passes__gallery-title,
#precios.passes-section .passes__benefits h3,
#precios.passes-section .passes__price strong {
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}

/* Identidad del pase ya correcta (active-name = tier color),
   reforzamos precio y subcopys que quedaban en grises de modo oscuro. */
#precios.passes-section .passes__watching,
#precios.passes-section .passes__price span {
  color: var(--text-secondary, #4A5568) !important;
}
#precios.passes-section .passes__active-desc {
  color: var(--text-secondary, #4A5568) !important;
  -webkit-text-fill-color: var(--text-secondary, #4A5568) !important;
}

/* --- PHASE 3: limpieza de la barra de Asesores --- */
/* Era background: rgba(5,8,20,0.72) (bloque oscuro). Lo integramos
   al esquema claro como tarjeta suave coherente con el panel. */
#precios.passes-section .passes__contact-bar {
  background: #FFFFFF !important;
  border: 1px solid rgba(7, 20, 33, 0.08) !important;
  box-shadow: 0 10px 30px rgba(7, 25, 46, 0.06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#precios.passes-section .passes__contact-bar strong {
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
}

#precios.passes-section .passes__contact-bar p {
  color: var(--text-secondary, #4A5568) !important;
}

/* Botones de asesor: píldoras claras con acento del tier activo,
   sin el contenedor gris oscuro. Hover -> verde WhatsApp. */
#precios.passes-section .passes__contact {
  background: color-mix(in srgb, var(--pass-color, #00E676) 8%, #FFFFFF) !important;
  border: 1px solid color-mix(in srgb, var(--pass-color, #00E676) 35%, rgba(7,20,33,0.12)) !important;
  color: var(--text-primary, #07192E) !important;
  -webkit-text-fill-color: var(--text-primary, #07192E) !important;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease !important;
}

#precios.passes-section .passes__contact:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #05101F !important;
  -webkit-text-fill-color: #05101F !important;
  transform: translateY(-2px) !important;
}

/* --- PHASE 3: responsive (mobile-first stacked) --- */
@media (max-width: 1023px) {
  #precios.passes-section .benefits__list {
    columns: 1 !important;
  }

  #precios.passes-section .passes__contact-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 18px 20px !important;
  }

  #precios.passes-section .passes__contact-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
  }

  #precios.passes-section .passes__contact {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 600px) {
  #precios.passes-section .passes__contact-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   #PRECIOS — Showcase interactivo por tier (junio 2026)
   Glow cromático + overlays de fondo + multimedia reactiva.
   Nota de paleta: el glow se alinea al color REAL de cada tier
   del proyecto (LITE cyan #00C1D4 / ACCESS verde #00E676 /
   BLACK violeta #7C3AED), no al mapeo invertido del prompt,
   para que el halo coincida con el borde de cada card.
   ============================================================ */

/* --- PHASE 0: FONDO DE SECCIÓN BLANCO Y LIMPIO ---
   REVERTIDO: el fondo fotográfico global invadía toda la sección (scope
   bleed) y ensuciaba el blanco limpio del sitio. La fotografía queda
   confinada EXCLUSIVAMENTE dentro de las tres cards superiores. */
#precios.passes-section {
  background-image: none !important;
  background-color: #FFFFFF !important;
}
#precios.passes-section::before,
#precios.passes-section::after {
  display: none !important;
  background-image: none !important;
}

/* --- PHASE 1: tokens de glow por tier + bordes brillantes --- */
#precios .pass-card--lite   { --tier-glow-color: rgba(0, 193, 212, 0.38); }
#precios .pass-card--access { --tier-glow-color: rgba(0, 230, 118, 0.40); }
#precios .pass-card--black  { --tier-glow-color: rgba(124, 58, 237, 0.36); }

/* Card activa: borde sólido del tier + halo exterior interpolable.
   Gana a v3:4744 por especificidad (#precios.passes-section) + orden. */
#precios.passes-section .pass-card.active {
  border-color: var(--card-color) !important;
  box-shadow:
    0 0 0 1.5px var(--card-color),
    0 0 25px 2px var(--tier-glow-color, color-mix(in srgb, var(--card-color) 36%, transparent)),
    0 12px 40px rgba(7, 25, 46, 0.08) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease,
              transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Panel central: glow del tier activo (data-active-pass lo fija el JS) */
#precios .passes__detail[data-active-pass="lite"]   { --tier-glow-color: rgba(0, 193, 212, 0.30); }
#precios .passes__detail[data-active-pass="access"] { --tier-glow-color: rgba(0, 230, 118, 0.32); }
#precios .passes__detail[data-active-pass="black"]  { --tier-glow-color: rgba(124, 58, 237, 0.30); }

/* Panel central: BLANCO LIMPIO con borde tintado al tier + glow.
   (Revertido el frosted-glass: al quitar el fondo fotográfico de sección
   ya no hay nada que revelar; un panel sólido mantiene el blanco limpio y
   la máxima legibilidad de la lista de beneficios.) */
#precios.passes-section .passes__detail {
  background: #FFFFFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--pass-color, #00E676) 24%, rgba(7, 20, 33, 0.08)) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 26px 1px var(--tier-glow-color, color-mix(in srgb, var(--pass-color, #00E676) 22%, transparent)),
    0 14px 44px rgba(7, 25, 46, 0.08) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* --- PHASE 2: GLASSMORPHISM PREMIUM en las cards de tier ---
   La foto del evento se ve a TODA la card a través de un vidrio esmerilado.
   Nota técnica: backdrop-filter NO sirve aquí porque solo difumina lo que
   está DETRÁS del elemento, no una imagen hija de la card. Por eso
   desenfocamos la foto directamente (filter: blur en .pass-card__visual) y
   ponemos un velo blanco translúcido encima (.pass-card::after). Resultado
   idéntico al frosted-glass, más fiable y barato. NINGÚN cambio de HTML. */

/* (1) Eliminar el fill blanco sólido legado (v3:1292/3816/4750) para que la
       foto sea visible. Especificidad #precios.passes-section + orden => gana. */
#precios.passes-section .pass-card,
#precios.passes-section .pass-card.active {
  background: transparent !important;
}

/* (1b) overflow:hidden recorta el desborde de filter:blur (app.css:17870 lo
        ponía visible). El badge "MÁS ELEGIDO" flotaba en top:-16px y se
        cortaría, así que lo reubicamos dentro del borde superior. */
#precios.passes-section .pass-card {
  overflow: hidden !important;
}
#precios.passes-section .pass-card__popular {
  top: 14px !important;
}

/* (2) Capa FOTO: reutiliza .pass-card__visual a tamaño completo, desenfocada.
       inset negativo evita los bordes transparentes que deja filter:blur. */
#precios.passes-section .pass-card .pass-card__visual {
  display: block !important;
  position: absolute !important;
  inset: -16px !important;
  z-index: 0 !important;
  background-color: #eef3f8 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: blur(12px) grayscale(48%) contrast(1.03) !important;
  transform: scale(1.18) !important; /* zoom: recorta la viñeta de la foto → relleno uniforme */
  pointer-events: none !important;
  transition: filter 0.45s ease, transform 0.45s ease !important;
}
/* Anula el patrón de puntos del diseño oscuro original */
#precios.passes-section .pass-card .pass-card__visual::after {
  display: none !important;
}

/* (3) Capa VIDRIO: velo blanco translúcido UNIFORME sobre la foto, cubriendo
       el 100% de la card por igual (sin gradiente que parecía "caja cortada").
       La foto ya va desenfocada por filter:blur en __visual → efecto frosted. */
#precios.passes-section .pass-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  background: rgba(255, 255, 255, 0.86) !important;
  pointer-events: none !important;
  transition: background 0.45s ease, opacity 0.45s ease !important;
}

/* (4) Contenido por encima del vidrio (z-index 2) y CENTRADO verticalmente
       en toda la altura de la card (antes quedaba anclado abajo, lo que con
       el velo daba sensación de "texto atrapado en una caja"). */
#precios.passes-section .pass-card__content {
  position: absolute !important;
  z-index: 2 !important;
  top: 22px !important;
  bottom: 22px !important;
  left: 24px !important;
  right: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
}
#precios.passes-section .pass-card__icon,
#precios.passes-section .pass-card__popular,
#precios.passes-section .pass-card__arrow {
  position: relative;
  z-index: 2 !important;
}
/* Halo blanco MUY sutil (evita la bruma central que daba aspecto de "caja"). */
#precios.passes-section .pass-card__content strong,
#precios.passes-section .pass-card__content small,
#precios.passes-section .pass-card__content em {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

/* (5) Pre-link de assets webp on-brand (intercambiables luego).
       Rutas relativas a /css → ../assets/… (resuelven contra esta hoja). */
#precios .pass-card--lite   .pass-card__visual { background-image: url("../assets/que-es-mind-summit.webp") !important; }
#precios .pass-card--access .pass-card__visual { background-image: url("../assets/eje-tecnologias.webp") !important; }
#precios .pass-card--black  .pass-card__visual { background-image: url("../assets/foto referente a Elige tu experiencia MIND.webp") !important; }

/* (6) "CLEAR FOCUS": al hover o seleccionar, la foto recupera nitidez/color
       y el vidrio se aclara — el pase "cobra vida". Puro CSS (transición GPU),
       sin GSAP: animar filter/opacity por JS sería más caro y menos fluido. */
#precios.passes-section .pass-card:hover .pass-card__visual {
  filter: blur(3px) grayscale(12%) contrast(1.08) !important;
  transform: scale(1.06) !important;
}
#precios.passes-section .pass-card:hover::after {
  opacity: 0.82 !important;
}
#precios.passes-section .pass-card.active .pass-card__visual {
  filter: blur(3px) grayscale(0%) contrast(1.08) !important;
  transform: scale(1.18) !important;
}
/* La card activa revela su foto (velo más bajo) → "cobra vida". */
#precios.passes-section .pass-card.active::after {
  opacity: 0.58 !important;
}

/* --- PHASE 3: multimedia del showcase derecho --- */
/* Imagen principal: foto vibrante del tier (--cover la inyecta el JS).
   Velo MUY ligero, solo en la base, para que el botón ▶ siga legible
   sin apagar la foto en tema claro. Fallback tintado con el color del tier. */
#precios.passes-section .passes__gallery-main {
  background:
    linear-gradient(to top, rgba(7, 25, 46, 0.42) 0%, rgba(7, 25, 46, 0.06) 38%, transparent 70%),
    var(--cover, none) center / cover no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--pass-color, #00E676) 22%, #0b1a30), #050814) !important;
  will-change: transform;
  transition: transform 0.35s ease, filter 0.35s ease !important;
}
#precios.passes-section .passes__gallery-main:hover {
  transform: scale(1.02);
  filter: saturate(1.1);
}

/* Miniaturas: foto real a plena viveza (sin velo); el caption va debajo,
   así que no hay problema de legibilidad sobre la imagen. */
#precios.passes-section .passes__thumbs figure span {
  background:
    var(--media, none) center / cover no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--pass-color, #00E676) 24%, #0b1a30), #050814) !important;
  will-change: transform;
  transition: transform 0.35s ease, filter 0.35s ease !important;
}
#precios.passes-section .passes__thumbs figure span:hover {
  transform: scale(1.05);
  filter: saturate(1.18);
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #precios.passes-section .pass-card.active,
  #precios.passes-section .passes__detail,
  #precios.passes-section .passes__gallery-main,
  #precios.passes-section .passes__thumbs figure span {
    transition: none !important;
  }
  #precios.passes-section .passes__gallery-main:hover,
  #precios.passes-section .passes__thumbs figure span:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------

/* -------------------------------------------------------------------
   PASSES � PREMIUM DARK CARDS + TYPOGRAPHY + DIFFERENTIATORS
   2026-06-21 FINAL
   Filosofia: las cards YA tienen fondo oscuro/visual (app.css).
   Aqui solo mejoramos: tipografia, contrastes, diferenciadores
   adicionales y animaciones GSAP.
   ------------------------------------------------------------------- */

/* -- Seccion: fondo blanco, sin residuos oscuros de capas antiguas -- */
#precios.passes-section {
  background: #FFFFFF !important;
  color: #071421 !important;
}

/* Quitar pseudo-elementos oscuros de capas viejas */
#precios.passes-section::before,
#precios.passes-section::after {
  display: none !important;
}

/* -- Header textos: oscuros y legibles -- */
#precios .passes__label {
  color: rgba(7,20,33,0.45) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.45) !important;
}
#precios .passes__title,
#precios .passes__header h2 {
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
}
#precios .passes__title span,
#precios .passes__header h2 span {
  background: linear-gradient(90deg, #1E6CFA 0%, #12A6DB 50%, #1CC6B5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#precios .passes__limited {
  color: rgba(7,20,33,0.50) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.50) !important;
}

/* -- PASS CARDS: preservar dise�o oscuro de app.css
   SOLO mejorar: tipografia grande al estilo del titulo,
   diferenciadores visuales adicionales.                         -- */

/* Numero de pase como fondo oversized (diferenciador 1) */
#precios .pass-card {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform     0.4s cubic-bezier(0.16,1,0.3,1),
    border-color  0.4s ease,
    box-shadow    0.4s ease !important;
}

/* Numero grande de fondo: 01, 02, 03 */
#precios .pass-card--lite::before  { content: "01" !important; }
#precios .pass-card--access::before { content: "02" !important; }
#precios .pass-card--black::before  { content: "03" !important; }

#precios .pass-card::before {
  position: absolute !important;
  top: -10px !important;
  right: -8px !important;
  z-index: 1 !important;
  font-size: clamp(5rem, 9vw, 8rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  color: rgba(255,255,255,0.06) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.06) !important;
  pointer-events: none !important;
  font-family: 'Montserrat', sans-serif !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Nombre del pase: grande, bold, como el titulo */
#precios .pass-card__content strong {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

/* Subtitulo: color del pase */
#precios .pass-card__content small {
  color: var(--card-color, #00E676) !important;
  -webkit-text-fill-color: var(--card-color, #00E676) !important;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem) !important;
  font-weight: 800 !important;
}

/* Tag "ideal para..." */
#precios .pass-card__content em {
  color: rgba(255,255,255,0.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
  font-size: clamp(0.72rem, 0.9vw, 0.88rem) !important;
  font-style: normal !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* Flecha: acento de color del pase */
#precios .pass-card__arrow {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
#precios .pass-card.active .pass-card__arrow {
  background: var(--card-color, #00E676) !important;
  border-color: var(--card-color, #00E676) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
}

/* Diferenciador 2: barra de progreso inferior de color */
#precios .pass-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--card-color, #00E676) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  z-index: 10 !important;
}
#precios .pass-card.active::after {
  transform: scaleX(1) !important;
}

/* -- PANEL DETALLE: fondo blanco, acento de color por pase -- */
#precios .passes__detail {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(7,20,33,0.08) !important;
  border-top: 3px solid var(--pass-color, #00E676) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 28px rgba(7,20,33,0.06) !important;
  overflow: hidden !important;
  transition:
    border-top-color 0.4s ease,
    box-shadow 0.4s ease !important;
}

#precios .passes__detail-identity {
  border-right: 1px solid rgba(7,20,33,0.07) !important;
}

/* Textos del panel: oscuros sobre blanco */
#precios .passes__watching {
  color: rgba(7,20,33,0.42) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.42) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
#precios .passes__active-name {
  font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  /* color lo inyecta JS via applyPassColor() */
  transition: color 0.35s ease !important;
}
#precios .passes__active-title {
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}
#precios .passes__active-desc {
  color: rgba(7,20,33,0.62) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.62) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.55 !important;
}
#precios .passes__price span {
  color: rgba(7,20,33,0.42) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.42) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
#precios .passes__price strong {
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 900 !important;
}
#precios .passes__price em {
  background: rgba(0,135,90,0.10) !important;
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-style: normal !important;
}
#precios .passes__benefits h3 {
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 900 !important;
}
#precios .benefits__list li,
#precios .passes__benefits li {
  color: rgba(7,20,33,0.70) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.70) !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
}
#precios .passes__gallery-title {
  color: rgba(7,20,33,0.45) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.45) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
}

/* Boton primario: color del pase */
#precios .passes__primary {
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  transition: background 0.35s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#precios .passes__primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
}

/* Boton secundario */
#precios .passes__secondary {
  background: transparent !important;
  border: 2px solid rgba(7,20,33,0.12) !important;
  color: rgba(7,20,33,0.60) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.60) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: border-color 0.3s ease, color 0.3s ease !important;
}
#precios .passes__secondary:hover:not(:disabled) {
  border-color: var(--pass-color, #00E676) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
}

/* Contact bar */
#precios .passes__contact-bar {
  background: rgba(7,20,33,0.025) !important;
  border: 1px solid rgba(7,20,33,0.06) !important;
  border-radius: 16px !important;
}
#precios .passes__contact-bar strong {
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
}
#precios .passes__contact-bar p {
  color: rgba(7,20,33,0.55) !important;
  -webkit-text-fill-color: rgba(7,20,33,0.55) !important;
}
#precios .passes__contact--wa {
  background: rgba(7,20,33,0.05) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  border: 1px solid rgba(7,20,33,0.10) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
#precios .passes__contact--wa:hover {
  background: var(--pass-color, #00E676) !important;
  border-color: var(--pass-color, #00E676) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
}

/* Diferenciador 3: animacion GSAP � clase que JS aplica durante switch */
#precios .passes__detail.is-switching {
  opacity: 0 !important;
  transform: translateY(12px) !important;
}

/* -------------------------------------------------------------------
   PASS CARDS � DEFINITIVE VISUAL FIX 2026-06-21 T4
   Cargado ultimo en mind-waves.css = gana toda la cascada.

   PROBLEMA RAIZ: v3.css line ~3249 pone
       .pass-card__visual { display: none !important; }
   Esto borra el fondo oscuro y deja la card en blanco.
   SOLUCION: restaurar __visual + redisenar layout de contenido.
   ------------------------------------------------------------------- */

/* -- 1. RESTAURAR el fondo visual oscuro de cada card --------------- */
#precios .pass-card .pass-card__visual,
#precios .pass-card__visual,
.passes-section .pass-card__visual {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  /* Gradient oscuro con color del pase como acento:
     top: semi-oscuro para leer el nombre
     bottom: m�s oscuro para leer el subtitle y CTA hint */
  background:
    linear-gradient(
      180deg,
      rgba(5,8,20,0.72) 0%,
      rgba(5,8,20,0.20) 42%,
      rgba(5,8,20,0.80) 100%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      color-mix(in srgb, var(--card-color, #00E676) 35%, transparent),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--card-color, #00E676) 18%, #050C1E),
      #050C1E 65%
    ) !important;
}

/* Grid de puntos sutil encima del gradiente */
#precios .pass-card .pass-card__visual::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(
    circle,
    rgba(255,255,255,0.14) 1px,
    transparent 1.5px
  ) !important;
  background-size: 22px 22px !important;
  opacity: 0.22 !important;
  z-index: 1 !important;
}

/* -- 2. La card misma: TRANSPARENTE para que el visual se vea ------- */
#precios .pass-card {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition:
    transform     0.4s cubic-bezier(0.16,1,0.3,1),
    border-color  0.4s ease,
    box-shadow    0.4s ease !important;
}

/* -- 3. CONTENIDO: todo el card, icono arriba, texto abajo ----------
   Quitar el ::before de v3.css (barra 3px) y reemplazar
   por el numero oversized + la barra de progreso en ::after.
-------------------------------------------------------------------- */

/* Anular el ::before de v3.css que pon�a barra de 3px */
#precios .pass-card::before {
  content: none !important;
  display: none !important;
}

/* Numero oversized de fondo como diferenciador de tier */
#precios .pass-card--lite  .pass-card__visual::before { content: "01" !important; }
#precios .pass-card--access .pass-card__visual::before { content: "02" !important; }
#precios .pass-card--black  .pass-card__visual::before { content: "03" !important; }

#precios .pass-card .pass-card__visual::before {
  display: block !important;
  position: absolute !important;
  bottom: -14px !important;
  right: -4px !important;
  z-index: 2 !important;
  font-size: clamp(5.5rem, 11vw, 9rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  color: rgba(255,255,255,0.07) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.07) !important;
  font-family: 'Montserrat', 'Arial Black', sans-serif !important;
  pointer-events: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Barra de progreso inferior (diferenciador 2) */
#precios .pass-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--card-color, #00E676) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  z-index: 20 !important;
}
#precios .pass-card.active::after {
  transform: scaleX(1) !important;
}

/* -- 4. LAYOUT DEL CONTENIDO: icono arriba + nombre, subtitle abajo - */
#precios .pass-card .pass-card__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  /* No background � el visual oscuro ya est� detr�s */
  background: transparent !important;
  background-color: transparent !important;
  /* Flex column: icon+name arriba, subtitle y em abajo */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 20px 22px 24px !important;
  gap: 0 !important;
}

/* Icono: arriba izquierda */
#precios .pass-card .pass-card__icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--card-color, #00E676) 20%, rgba(255,255,255,0.08)) !important;
  border: 1px solid color-mix(in srgb, var(--card-color, #00E676) 40%, transparent) !important;
  color: var(--card-color, #00E676) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-color, #00E676) 30%, transparent) !important;
  flex-shrink: 0 !important;
}

#precios .pass-card .pass-card__icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: var(--card-color, #00E676) !important;
  stroke-width: 2 !important;
}

/* Nombre (strong): grande, arriba, justo bajo el icono */
#precios .pass-card .pass-card__content strong {
  margin-top: 10px !important;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Spacer: empuja subtitle y em hacia abajo */
#precios .pass-card .pass-card__content small,
#precios .pass-card .pass-card__content em {
  margin-top: auto !important;
}

/* Subtitle: color del pase, abajo */
#precios .pass-card .pass-card__content small {
  font-size: clamp(0.82rem, 1.1vw, 1.05rem) !important;
  font-weight: 800 !important;
  color: var(--card-color, #00E676) !important;
  -webkit-text-fill-color: var(--card-color, #00E676) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--card-color, #00E676) 50%, transparent) !important;
  margin-top: auto !important;
}

/* Tag inferior: glassmorphism */
#precios .pass-card .pass-card__content em {
  font-size: clamp(0.70rem, 0.85vw, 0.84rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.80) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.80) !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  margin-top: 7px !important;
}

/* -- 5. FLECHA: esquina inferior derecha, acento de color en .active - */
#precios .pass-card .pass-card__arrow {
  position: absolute !important;
  right: 18px !important;
  bottom: 20px !important;
  z-index: 11 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.3rem !important;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.3s ease !important;
}
#precios .pass-card.active .pass-card__arrow {
  background: var(--card-color, #00E676) !important;
  border-color: var(--card-color, #00E676) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  transform: rotate(0deg) translateX(3px) !important;
}
#precios .pass-card:not(.active):hover .pass-card__arrow {
  transform: translateX(4px) !important;
  border-color: var(--card-color, #00E676) !important;
}

/* -- 6. BADGE "MÁS ELEGIDO" ------------------------------------------- */
/* top positivo (dentro de la card): la card tiene overflow:hidden por el
   glassmorphism de la foto, así que un top negativo lo recortaba. */
#precios .pass-card .pass-card__popular {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
  background: linear-gradient(90deg, #00C1D4, #00E676) !important;
  color: #071421 !important;
  -webkit-text-fill-color: #071421 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
  white-space: nowrap !important;
}

/* -- 7. ESTADOS: hover y active ---------------------------------------- */
#precios .pass-card:not(.active) {
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 16px rgba(5,8,20,0.30) !important;
}
#precios .pass-card:not(.active):hover {
  border-color: color-mix(in srgb, var(--card-color, #00E676) 60%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-color, #00E676) 30%, transparent),
    0 8px 32px rgba(5,8,20,0.40) !important;
  transform: translateY(-5px) !important;
}
#precios .pass-card.active {
  border: 2px solid var(--card-color, #00E676) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--card-color, #00E676) 18%, transparent),
    0 0 48px color-mix(in srgb, var(--card-color, #00E676) 28%, transparent),
    0 12px 40px rgba(5,8,20,0.45) !important;
  transform: translateY(-8px) scale(1.025) !important;
}

/* ============================================================
   HERO + EJES — Ajustes UI/UX (junio 2026)
   Hero más compacto, sin divisor inferior; sección Ejes más
   limpia, vibrante y con cards más pequeñas. (Carga al final.)
   ============================================================ */

/* --- HERO: más compacto, sin recortar el CTA --- */
/* Override de app.css:62 (height:100svh; min-height:680px). Combina
   menor altura + compactación del stack para quitar el espacio vacío
   vertical SIN cortar meta/CTA (overflow:hidden del hero). */
/* v3:4009 forzaba min-height:100svh y el photo-col (columna derecha vacía)
   estiraba el split → espacio vacío bajo el contenido. Con height:auto +
   photo-col sin altura, el hero mide EXACTAMENTE su contenido: compacto,
   cero espacio vacío y sin recortar el CTA. (El video de fondo es absoluto
   inset:0, así que cubre todo el hero igual.) */
#hero.hero.hero--singularity.hero--summit {
  height: auto !important;
  min-height: 0 !important;
}
/* El photo-col (columna derecha vacía) estiraba el split. El video de
   fondo es absoluto (cubre todo el hero), así que ocultarlo no quita
   imagen, solo libera la altura. */
#hero .hero__photo-col {
  display: none !important;
}
/* Logos más cerca del top */
.hero.hero--singularity.hero--summit .hero__logos {
  margin-top: clamp(48px, 6vh, 64px) !important;
}
.hero.hero--singularity.hero--summit .hero__split {
  padding-top: clamp(6px, 1.2vh, 16px) !important;
  padding-bottom: clamp(14px, 2.4vh, 28px) !important;
}
/* CLAVE: el text-col se estiraba a toda la altura del split y repartía el
   contenido dejando huecos. Lo empaquetamos como bloque compacto arriba:
   altura automática, sin distribución, y reseteo de TODOS los márgenes de
   los hijos para neutralizar separaciones grandes/auto heredadas. */
#hero .hero__split {
  align-items: start !important;
  flex: 0 0 auto !important; /* no crecer: el split mide su contenido, no estira el hero */
}
/* Selector completo (con id) para ganar a v3:2977. fit-content + flex:0 0
   auto impiden que el text-col se estire y reparta el contenido. */
#hero.hero.hero--singularity.hero--summit .hero__text-col {
  height: -moz-fit-content !important;
  height: fit-content !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}
#hero .hero__text-col > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Reducir el título MIND (era clamp …→200px) — principal consumidor
   vertical; un título más contenido = hero compacto y moderno. */
#hero .hero__mind,
#hero .hero__mind .char {
  font-size: clamp(64px, 9.5vw, 132px) !important;
  line-height: 0.86 !important;
}
#hero .hero__summit {
  font-size: clamp(24px, 4vw, 42px) !important;
}
/* Compactar el stack de textos (gaps/márgenes) para ganar verticalidad */
#hero .hero__titles { margin-bottom: 6px !important; }
#hero .hero__mind { margin-bottom: 2px !important; }
#hero .hero__year { margin-top: 2px !important; margin-bottom: 8px !important; }
#hero .hero__tagline { margin-bottom: 10px !important; }
#hero .hero__desc { margin-top: 6px !important; margin-bottom: 14px !important; }
#hero .hero__meta { margin-bottom: 16px !important; }

/* --- HERO: eliminar la línea/curva divisoria inferior --- */
/* El .hero__curve ya estaba oculto; el divisor real es el wave
   blanco con línea de gradiente entre Hero → Sobre. */
.mind-wave--bottom {
  display: none !important;
}

/* --- EJES: fondo más limpio (baja el ruido de la cuadrícula) --- */
#ejes.ejes-director::after {
  opacity: 0.4 !important;
}

/* --- EJES: sección más compacta (menos scroll) --- */
#ejes.ejes-director {
  padding: clamp(56px, 5vw, 104px) clamp(20px, 4.5vw, 86px) !important;
}

/* --- EJES: cards ~18% más pequeñas --- */
#ejes .card-image-wrapper {
  min-height: clamp(265px, 21vw, 410px) !important;
}
#ejes .card-body-bottom {
  padding: 14px !important;
  gap: 10px !important;
}
#ejes .card-inner-title {
  font-size: clamp(17px, 1.5vw, 20px) !important;
}

/* --- EJES: imágenes más vibrantes (quita el look gris/apagado) --- */
#ejes .card-img-bg {
  filter: saturate(1.06) contrast(1.05) brightness(1) !important;
}
#ejes .eje-card-unsa:hover .card-img-bg {
  filter: saturate(1.2) contrast(1.08) brightness(1.04) !important;
}

/* --- EJES: hover premium con GLOW (vía box-shadow: compatible con
   VanillaTilt, que controla el transform 3D + scale + glare). --- */
#ejes .eje-card-unsa {
  transition: box-shadow 0.4s ease, transform 0.4s ease !important;
}
#ejes .eje-card-unsa:hover {
  box-shadow:
    0 26px 64px rgba(7, 20, 33, 0.16),
    0 0 38px rgba(0, 169, 214, 0.18) !important;
}

/* -------------------------------------------------------------------
   HERO COMPACTION � SOLUCI�N DEFINITIVA 2026-06-21
   Carga al final de mind-waves.css (m�xima prioridad cascada).
   
   Soluci�n: max-height como l�mite duro + overflow:hidden.
   El video/bg es position:absolute inset:0 ? no se corta.
   El contenido se empaqueta naturalmente gracias a los gaps=4px.
   ------------------------------------------------------------------- */

/* Fijar altura m�xima dura � gana a min-height:100svh de v3:4009
   porque max-height siempre prevalece sobre min-height en CSS. */
#hero.hero.hero--singularity.hero--summit {
  max-height: 78svh !important;
  max-height: 78dvh !important; /* dynamic viewport para mobile */
  overflow: hidden !important;  /* corta el vac�o inferior limpiamente */
}

/* Asegurar que el video/bg no se corte visualmente */
#hero.hero.hero--singularity.hero--summit .hero__video-wrap,
#hero.hero.hero--singularity.hero--summit .hero__bg {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* El split: flex-column, contenido empaquetado arriba, padding compacto */
#hero.hero.hero--singularity.hero--summit .hero__split {
  padding-top:    clamp(8px,  1.5vh, 18px)  !important;
  padding-bottom: clamp(20px, 3.5vh, 40px)  !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* -------------------------------------------------------------------
   SCROLL REVEAL CSS � Clases base para animaciones GSAP ScrollTrigger
   Las clases [data-reveal] parten ocultas; JS las anima al entrar.
   ------------------------------------------------------------------- */
[data-reveal],
.reveal-fade-up,
.reveal-fade-in,
.reveal-scale,
.reveal-slide-left,
.reveal-slide-right {
  opacity: 0;
  will-change: opacity, transform;
  transition: none; /* GSAP controla la transici�n */
}

/* Microinteracciones: botones con feedback t�ctil */
.nav__btn, .hero__btn-primary, .hero__btn-outline,
.passes__primary, .passes__secondary,
.passes__contact--wa {
  transition:
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.22s ease,
    opacity 0.18s ease !important;
}
.nav__btn:active, .hero__btn-primary:active, .hero__btn-outline:active,
.passes__primary:active {
  transform: scale(0.96) !important;
}

/* Transici�n suave entre secciones: fade-in al scroll */
section {
  will-change: opacity;
}

/* -- Hover states mejorados globales -------------------------------- */
/* Links de navegaci�n: underline animado */
.nav__link {
  position: relative !important;
}
.nav__link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #1E6CFA, #1CC6B5) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}
.nav__link:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* ----------------------------------------------------------------------
   HERO FINAL � DEFINICI�N AUTORITATIVA 2026-06-21 T5
   Carga �LTIMO en mind-waves.css ? m�xima especificidad de cascada.

   Anula TODOS los bloques anteriores (max-height:78svh, min-height:0,
   photo-col:none, text-col centrado, flex:0 0 auto del split).

   Filosof�a:
   � Hero full-screen real (100svh/dvh) en cualquier dispositivo
   � Contenido LEFT-aligned (estilo Apple/Stripe/Vercel)
   � SUMMIT/MIND/2026: bloque tipogr�fico internamente centrado
   � Escala 20% mayor que la versi�n anterior
   � Todo visible en cualquier viewport
   ---------------------------------------------------------------------- */

/* -- A. HERO: FULL SCREEN REAL ----------------------------------------
   max-height:none anula el bloque anterior (max-height:78svh).
   min-height:100svh + height:100svh = pantalla completa garantizada.
   ------------------------------------------------------------------- */
#hero.hero.hero--singularity.hero--summit {
  height: 100svh !important;
  height: 100dvh !important;        /* dynamic para mobile chrome */
  min-height: 560px !important;     /* fallback navegadores viejos */
  max-height: none !important;      /* anula el max-height:78svh previo */
  overflow: hidden !important;
}

/* photo-col: restaurar � ocupa el lado derecho como espacio decorativo */
#hero .hero__photo-col {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 1 !important;
}

/* -- B. SPLIT: distribuye height completa, contenido al centro-Y ------
   flex:1 ? el split crece para llenar el hero.
   align-items:start ? text-col se ancla arriba.
   justify-content:center ? contenido centrado verticalmente.
   ------------------------------------------------------------------- */
#hero.hero.hero--singularity.hero--summit .hero__split {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding-top:    clamp(0px, 1vh, 10px) !important;
  padding-bottom: clamp(28px, 4.5vh, 56px) !important;
}

/* -- C. TEXT-COL: LEFT-aligned, altura flex para distribuir espacio --
   justify-content:center ? apila el bloque de marca al centro-Y.
   align-items:flex-start ? todo pegado a la izquierda.
   gap:12px ? respira sin desperdiciar espacio.
   ------------------------------------------------------------------- */
#hero.hero.hero--singularity.hero--summit .hero__text-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  height: 100% !important;
  gap: clamp(8px, 1.4vh, 16px) !important;
  /* reset del margin-top:0 que aplast� antes */
  flex: 1 1 auto !important;
  max-width: clamp(440px, 52%, 720px) !important;
}

/* Reset m�rgenes: el gap del flex-col controla el spacing */
#hero.hero.hero--singularity.hero--summit .hero__text-col > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -- D. TIPOGRAF�A � BLOQUE SUMMIT/MIND/2026 --------------------------
   El bloque .hero__titles usa inline-flex + align-items:center para
   que SUMMIT y 2026 (m�s estrechos) queden centrados bajo MIND.
   El bloque completo se alinea a la izquierda del text-col.
   ------------------------------------------------------------------- */
#hero.hero.hero--singularity.hero--summit .hero__titles {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* centra SUMMIT y 2026 bajo MIND */
  align-self: flex-start !important; /* el bloque mismo va a la izquierda */
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* SUMMIT � mismo tama�o que 2026, centrado bajo MIND */
#hero.hero.hero--singularity.hero--summit .hero__summit {
  font-size: clamp(1.5rem, 3.4vw, 3.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: clamp(0.26em, 1vw, 0.46em) !important;
  line-height: 1 !important;
  text-align: center !important;
  align-self: center !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.65) !important;
  /* SUMMIT + tracking ? ancho visual ~ MIND */
  width: 100% !important;
  display: block !important;
  text-indent: clamp(0.26em, 1vw, 0.46em) !important; /* compensa el tracking */
}

/* MIND � el ancla dominante, ~4� m�s grande que SUMMIT */
#hero.hero.hero--singularity.hero--summit .hero__mind,
#hero.hero.hero--singularity.hero--summit .hero__mind .char {
  font-size: clamp(5.5rem, 13.5vw, 16rem) !important;  /* +20% */
  font-weight: 900 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.055em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55) !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
}

/* 2026 � mismo tama�o que SUMMIT, centrado bajo MIND */
#hero.hero.hero--singularity.hero--summit .hero__year {
  font-size: clamp(1.5rem, 3.4vw, 3.2rem) !important;  /* = SUMMIT */
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: clamp(0.26em, 1vw, 0.46em) !important;
  text-indent: clamp(0.26em, 1vw, 0.46em) !important;
  text-align: center !important;
  align-self: center !important;
  width: 100% !important;
  display: block !important;
  margin-top: clamp(2px, 0.4vh, 6px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.60) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* -- E. TAGLINES, DESC, META: left-aligned, escalados +20% ------------- */
#hero.hero.hero--singularity.hero--summit .hero__tagline {
  align-items: flex-start !important;
}

#hero.hero.hero--singularity.hero--summit .hero__tagline-line {
  font-size: clamp(1.3rem, 2.2vw, 2.2rem) !important;  /* +20% */
  line-height: 0.95 !important;
  text-align: left !important;
}

#hero.hero.hero--singularity.hero--summit .hero__desc {
  font-size: clamp(14px, 1.25vw, 19px) !important;  /* +20% */
  line-height: 1.52 !important;
  text-align: left !important;
  max-width: clamp(32ch, 44ch, 56ch) !important;
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
}

#hero.hero.hero--singularity.hero--summit .hero__meta {
  align-items: flex-start !important;
  gap: clamp(8px, 1vw, 16px) !important;
}

#hero.hero.hero--singularity.hero--summit .hero__meta-item {
  font-size: clamp(13px, 1.1vw, 17px) !important;  /* +20% */
  justify-content: flex-start !important;
}

/* -- F. CTAs: left-aligned, tama�os mayores --------------------------- */
#hero.hero.hero--singularity.hero--summit .hero__cta {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
}

#hero.hero.hero--singularity.hero--summit .hero__btn-primary,
#hero.hero.hero--singularity.hero--summit .hero__btn-outline {
  min-height: clamp(48px, 4.5vh, 60px) !important;   /* +20% */
  padding: 0 clamp(22px, 2.5vw, 40px) !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  width: auto !important;
}

/* -- G. LOGOS INSTITUCIONALES: espaciado correcto del nav --------------- */
#hero.hero.hero--singularity.hero--summit .hero__logos {
  margin-top: clamp(58px, 7vh, 80px) !important;   /* clearance del nav */
  flex-shrink: 0 !important;
}

/* ----------------------------------------------------------------------
   MOBILE =768px: contenido centr adaptado, todos los elementos visibles
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    justify-content: flex-end !important; /* anclar al fondo */
    padding-bottom: clamp(24px, 4vh, 40px) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col > * {
    text-align: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__titles {
    align-items: center !important;
    align-self: center !important;
    width: 100% !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit {
    font-size: clamp(1.1rem, 5.8vw, 1.8rem) !important;
    letter-spacing: 0.28em !important;
    text-indent: 0.28em !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(4.5rem, 26vw, 8rem) !important;
    letter-spacing: -0.06em !important;
    line-height: 0.86 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(1.1rem, 5.8vw, 1.8rem) !important;
    letter-spacing: 0.28em !important;
    text-indent: 0.28em !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    align-items: center !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__tagline-line {
    text-align: center !important;
    font-size: clamp(1.2rem, 6.5vw, 1.9rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    text-align: center !important;
    max-width: 38ch !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta {
    align-items: center !important;
    justify-content: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    width: 100% !important;
    max-width: 340px !important;
    align-self: center !important;
    min-height: 52px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }

  #hero .hero__photo-col {
    display: none !important;
  }
}

/* Hero restoration: left composition, centered title lockup, true viewport height */
#hero.hero.hero--singularity.hero--summit {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  display: block !important;
  overflow: hidden !important;
}

#hero .hero__logos {
  position: absolute !important;
  top: clamp(4.6rem, 8svh, 6.2rem) !important;
  left: clamp(1.5rem, 7vw, 7rem) !important;
  right: auto !important;
  width: min(62rem, calc(100vw - 3rem)) !important;
  max-width: calc(100vw - 3rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

#hero .hero__split {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: clamp(8rem, 17svh, 11rem) clamp(1.5rem, 7vw, 7rem) clamp(2rem, 7svh, 5rem) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 54rem) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: clamp(2rem, 6vw, 7rem) !important;
  z-index: 4 !important;
}

#hero .hero__text-col {
  width: min(100%, 54rem) !important;
  max-width: 54rem !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: clamp(0.75rem, 1.8svh, 1.45rem) !important;
}

#hero .hero__titles {
  display: grid !important;
  justify-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  text-align: center !important;
}

#hero .hero__summit,
#hero .hero__year {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(1.7rem, 3.25vw, 4.15rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.24em !important;
  font-weight: 900 !important;
}

#hero .hero__mind,
#hero .hero__mind .char {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(5.25rem, 10.4vw, 11.75rem) !important;
  line-height: 0.82 !important;
}

#hero .hero__tagline {
  margin-top: clamp(0.9rem, 2.2svh, 1.6rem) !important;
  font-size: clamp(1.55rem, 2.75vw, 3rem) !important;
  line-height: 1.05 !important;
}

#hero .hero__desc {
  max-width: 48rem !important;
  font-size: clamp(1.06rem, 1.24vw, 1.34rem) !important;
  line-height: 1.48 !important;
}

#hero .hero__meta-item span {
  font-size: clamp(0.98rem, 1vw, 1.15rem) !important;
}

#hero .hero__btn-primary,
#hero .hero__btn-outline {
  min-height: clamp(3.35rem, 5.5svh, 4rem) !important;
  padding-inline: clamp(1.4rem, 2.5vw, 2.35rem) !important;
  font-size: clamp(0.96rem, 1vw, 1.1rem) !important;
}

@media (min-width: 1800px) {
  #hero .hero__split {
    grid-template-columns: minmax(0, 64rem) minmax(0, 1fr) !important;
  }

  #hero .hero__text-col {
    max-width: 64rem !important;
  }
}

@media (max-height: 820px) and (min-width: 761px) {
  #hero .hero__logos {
    top: 4.35rem !important;
  }

  #hero .hero__split {
    padding-top: clamp(6.7rem, 14svh, 8.4rem) !important;
    padding-bottom: clamp(1.4rem, 4svh, 2.4rem) !important;
  }

  #hero .hero__summit,
  #hero .hero__year {
    font-size: clamp(1.3rem, 2.5vw, 3.1rem) !important;
  }

  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(4.4rem, 8.6vw, 8.8rem) !important;
  }

  #hero .hero__tagline {
    font-size: clamp(1.25rem, 2.15vw, 2.2rem) !important;
  }
}

@media (max-width: 760px) {
  #hero .hero__logos {
    top: max(4.25rem, env(safe-area-inset-top)) !important;
    left: 1.25rem !important;
    width: calc(100vw - 2.5rem) !important;
  }

  #hero .hero__split {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: clamp(7.5rem, 16svh, 9rem) 1.25rem clamp(1.2rem, 4svh, 2rem) !important;
  }

  #hero .hero__text-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero .hero__summit,
  #hero .hero__year {
    font-size: clamp(1.25rem, 7vw, 2.15rem) !important;
    letter-spacing: 0.22em !important;
  }

  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(4.4rem, 20vw, 7rem) !important;
  }

  #hero .hero__tagline {
    font-size: clamp(1.2rem, 6vw, 2rem) !important;
  }

  #hero .hero__desc {
    font-size: clamp(0.9rem, 3.8vw, 1rem) !important;
    line-height: 1.38 !important;
  }

  #hero .hero__meta {
    gap: 0.35rem !important;
  }

  #hero .hero__cta {
    width: 100% !important;
    gap: 0.55rem !important;
  }

  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    width: 100% !important;
    min-height: 2.9rem !important;
    height: 2.9rem !important;
  }
}

@media (max-width: 390px) {
  #hero .hero__split {
    padding-top: 6.5rem !important;
    padding-bottom: 1rem !important;
  }

  #hero .hero__logo-mark {
    width: 28px !important;
    height: 28px !important;
  }

  #hero .hero__summit,
  #hero .hero__year {
    font-size: clamp(1.05rem, 6.2vw, 1.55rem) !important;
  }

  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(3.7rem, 18vw, 5rem) !important;
  }

  #hero .hero__tagline {
    margin-top: 0.45rem !important;
    font-size: clamp(1.02rem, 5.4vw, 1.45rem) !important;
  }

  #hero .hero__desc {
    font-size: 0.86rem !important;
  }
}

/* Hero uniform layout fix: prevents logo/title overlap and mobile dead space */
#hero.hero.hero--singularity.hero--summit {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

#hero.hero.hero--singularity.hero--summit .hero__logos {
  position: absolute !important;
  top: clamp(6rem, 10svh, 7.25rem) !important;
  left: clamp(2rem, 6vw, 6.5rem) !important;
  right: auto !important;
  width: min(44rem, calc(100vw - 4rem)) !important;
  max-width: calc(100vw - 4rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: clamp(0.85rem, 1.5vw, 1.45rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 6 !important;
}

#hero.hero.hero--singularity.hero--summit .hero__logo-group {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

#hero.hero.hero--singularity.hero--summit .hero__logo-label {
  max-width: 9.5rem !important;
  white-space: normal !important;
}

#hero.hero.hero--singularity.hero--summit .hero__split {
  position: absolute !important;
  inset: 0 !important;
  height: 100svh !important;
  min-height: 100svh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(12.2rem, 21svh, 15.2rem) clamp(2rem, 6vw, 6.5rem) clamp(2rem, 5svh, 4rem) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 52rem) minmax(0, 1fr) !important;
  align-items: start !important;
  justify-items: start !important;
  gap: clamp(2rem, 6vw, 6rem) !important;
}

#hero.hero.hero--singularity.hero--summit .hero__text-col {
  width: min(100%, 52rem) !important;
  max-width: 52rem !important;
  align-items: flex-start !important;
  text-align: left !important;
}

#hero.hero.hero--singularity.hero--summit .hero__titles {
  width: max-content !important;
  max-width: min(100%, 52rem) !important;
  display: grid !important;
  justify-items: center !important;
  align-self: flex-start !important;
  text-align: center !important;
}

#hero.hero.hero--singularity.hero--summit .hero__summit,
#hero.hero.hero--singularity.hero--summit .hero__year {
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(1.65rem, 3vw, 3.75rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.24em !important;
}

#hero.hero.hero--singularity.hero--summit .hero__mind,
#hero.hero.hero--singularity.hero--summit .hero__mind .char {
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: clamp(5rem, 9.6vw, 11rem) !important;
  line-height: 0.82 !important;
}

#hero.hero.hero--singularity.hero--summit .hero__tagline,
#hero.hero.hero--singularity.hero--summit .hero__desc,
#hero.hero.hero--singularity.hero--summit .hero__meta,
#hero.hero.hero--singularity.hero--summit .hero__cta {
  align-self: flex-start !important;
  text-align: left !important;
}

#hero.hero.hero--singularity.hero--summit .hero__cta {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: flex-start !important;
}

@media (min-width: 1600px) and (min-height: 900px) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: clamp(7rem, 11svh, 8rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding-top: clamp(14rem, 22svh, 16.5rem) !important;
  }
}

@media (max-height: 820px) and (min-width: 761px) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: 5.25rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding-top: 10.4rem !important;
    padding-bottom: 1.5rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(1.25rem, 2.25vw, 2.75rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(4.2rem, 8.2vw, 8.4rem) !important;
  }
}

@media (max-width: 760px) {
  #hero.hero.hero--singularity.hero--summit .nav__mobile + &,
  #hero.hero.hero--singularity.hero--summit {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: clamp(7rem, 15svh, 9rem) !important;
    left: 1.25rem !important;
    width: calc(100vw - 2.5rem) !important;
    max-width: calc(100vw - 2.5rem) !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.5rem, 2vw, 1rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-mark {
    width: clamp(2rem, 8vw, 2.8rem) !important;
    height: clamp(2rem, 8vw, 2.8rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label {
    display: block !important;
    max-width: 7rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label--name {
    font-size: clamp(0.5rem, 2vw, 0.72rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label--sub {
    font-size: clamp(0.45rem, 1.8vw, 0.62rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: clamp(13rem, 29svh, 15rem) 1.25rem 1rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: clamp(0.45rem, 1.5svh, 0.8rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__titles {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-items: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(1rem, 5.5vw, 1.65rem) !important;
    letter-spacing: 0.22em !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(3.4rem, 16vw, 5.65rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    margin-top: 0.35rem !important;
    font-size: clamp(1rem, 5.4vw, 1.6rem) !important;
    line-height: 1.02 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    max-width: 32rem !important;
    margin-top: 0.35rem !important;
    font-size: clamp(0.82rem, 3.4vw, 0.98rem) !important;
    line-height: 1.34 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta {
    margin-top: 0.4rem !important;
    gap: 0.35rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta-item span {
    font-size: clamp(0.78rem, 3.25vw, 0.95rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    width: 100% !important;
    margin-top: 0.55rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 1rem !important;
    font-size: 0.86rem !important;
  }
}

@media (max-width: 430px) {
  #hero.hero.hero--singularity.hero--summit .hero__logo-label {
    display: none !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logos {
    width: max-content !important;
    max-width: calc(100vw - 2.5rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding-top: clamp(11rem, 25svh, 13rem) !important;
  }
}

@media (max-width: 380px), (max-height: 720px) and (max-width: 760px) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: 5.6rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding-top: 9.4rem !important;
    padding-bottom: 0.75rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(0.9rem, 5vw, 1.2rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(3rem, 15vw, 4.5rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    font-size: clamp(0.92rem, 5vw, 1.25rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    font-size: 0.78rem !important;
  }
}

/* Mobile hero composition fix: compact, aesthetic, no dead vertical gap */
@media (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: clamp(5.7rem, 10.5svh, 7.1rem) !important;
    left: clamp(1.25rem, 5vw, 2rem) !important;
    width: min(100% - clamp(2.5rem, 10vw, 4rem), 34rem) !important;
    max-width: min(100% - clamp(2.5rem, 10vw, 4rem), 34rem) !important;
    justify-content: flex-start !important;
    gap: clamp(0.55rem, 2.3vw, 1rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: clamp(0.35rem, 1.6vw, 0.55rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-mark {
    width: clamp(1.9rem, 6.2vw, 2.45rem) !important;
    height: clamp(1.9rem, 6.2vw, 2.45rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label {
    display: block !important;
    max-width: 6.8rem !important;
    overflow: hidden !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label--name {
    font-size: clamp(0.52rem, 1.85vw, 0.68rem) !important;
    line-height: 1.02 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logo-label--sub {
    font-size: clamp(0.44rem, 1.55vw, 0.58rem) !important;
    line-height: 1.05 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 0 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    position: absolute !important;
    left: clamp(1.25rem, 5vw, 2rem) !important;
    right: clamp(1.25rem, 5vw, 2rem) !important;
    top: clamp(11.4rem, 24svh, 13.2rem) !important;
    width: auto !important;
    max-width: 34rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.38rem, 1.35svh, 0.68rem) !important;
    text-align: left !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__titles {
    width: max-content !important;
    max-width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(1.08rem, 5.6vw, 1.65rem) !important;
    line-height: 0.9 !important;
    letter-spacing: 0.22em !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(3.85rem, 16.5vw, 6.15rem) !important;
    line-height: 0.82 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    margin-top: 0.25rem !important;
    font-size: clamp(1.02rem, 5vw, 1.45rem) !important;
    line-height: 1.02 !important;
    text-align: left !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    max-width: 32rem !important;
    margin-top: 0.25rem !important;
    font-size: clamp(0.82rem, 3vw, 0.95rem) !important;
    line-height: 1.34 !important;
    text-align: left !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta {
    width: min(100%, 24rem) !important;
    margin-top: 0.3rem !important;
    gap: 0.35rem !important;
    align-items: flex-start !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta-item {
    min-height: 2.15rem !important;
    padding: 0.35rem 0.7rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta-item span {
    font-size: clamp(0.76rem, 2.85vw, 0.9rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    width: min(100%, 24rem) !important;
    margin-top: 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(2.55rem, 6svh, 3rem) !important;
    height: clamp(2.55rem, 6svh, 3rem) !important;
    padding: 0 1rem !important;
    border-radius: 999px !important;
    font-size: clamp(0.78rem, 2.8vw, 0.9rem) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 460px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__logo-label {
    display: none !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__logos {
    width: max-content !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: clamp(10.2rem, 21svh, 11.4rem) !important;
  }
}

@media (max-height: 740px) and (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: 4.9rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: 8.9rem !important;
    gap: 0.32rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(0.9rem, 4.8vw, 1.18rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(3rem, 14.5vw, 4.5rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    font-size: clamp(0.9rem, 4.5vw, 1.16rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    font-size: 0.76rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta-item {
    min-height: 1.9rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    min-height: 2.35rem !important;
    height: 2.35rem !important;
  }
}

/* Mobile hero hard fix: stop internal vertical centering */
@media (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    justify-content: flex-start !important;
    align-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__titles,
  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__year,
  #hero.hero.hero--singularity.hero--summit .hero__tagline,
  #hero.hero.hero--singularity.hero--summit .hero__desc,
  #hero.hero.hero--singularity.hero--summit .hero__meta,
  #hero.hero.hero--singularity.hero--summit .hero__cta {
    transform: none !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__year {
    margin-top: 0.1rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    margin-top: 0.5rem !important;
  }
}

/* Mobile hero visual balance: centered editorial composition */
@media (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 2.5rem), 35rem) !important;
    max-width: min(calc(100vw - 2.5rem), 35rem) !important;
    justify-content: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding: 0 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: clamp(12rem, 23svh, 13.4rem) !important;
    width: min(calc(100vw - 2rem), 31rem) !important;
    max-width: min(calc(100vw - 2rem), 31rem) !important;
    align-items: center !important;
    text-align: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__titles {
    align-self: center !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    align-self: center !important;
    text-align: center !important;
    align-items: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline-line {
    justify-content: center !important;
    text-align: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    max-width: min(100%, 27rem) !important;
    text-align: center !important;
    align-self: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta {
    width: min(100%, 24rem) !important;
    align-self: center !important;
    align-items: center !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__meta-item {
    justify-content: center !important;
    margin-inline: auto !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    width: min(100%, 24rem) !important;
    align-self: center !important;
    align-items: stretch !important;
  }
}

@media (max-width: 460px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;
    gap: 1rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: clamp(10.5rem, 20svh, 11.8rem) !important;
    width: min(calc(100vw - 1.6rem), 27rem) !important;
  }

  /* Tipografía MÓVIL imponente (mobile-first): el bloque SUMMIT/MIND/2026
     debe llenar el ancho y sentirse como un logo sólido. line-heights
     ajustados para que las 3 palabras se "abracen" sin huecos. */
  #hero.hero.hero--singularity.hero--summit .hero__summit {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem) !important;
    letter-spacing: 0.25em !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(4.6rem, 21vw, 7rem) !important;
    line-height: 0.9 !important;
    letter-spacing: 0.005em !important;
    margin-bottom: 0 !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(2rem, 8.5vw, 3.1rem) !important;
    line-height: 1 !important;
  }

  /* Subtítulo (pilares) un poco mayor para no quedar opacado por el título */
  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }

  /* Orphan control: reparte el párrafo de forma simétrica y elegante.
     align-self:center + ancho acotado evitan que se desborde a la derecha
     (en el flex text-col quedaba pegado a flex-start y rebasaba). */
  #hero.hero.hero--singularity.hero--summit .hero__desc {
    display: block !important; /* si fuera inline, ignoraría width y no envolvería */
    font-size: clamp(0.78rem, 2.8vw, 0.9rem) !important;
    width: 17rem !important;
    max-width: 17rem !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: balance !important;
  }
}

@media (max-height: 740px) and (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: 8.7rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    gap: 0.42rem !important;
  }
}

/* Mobile hero height-aware balance: avoid empty lower viewport on tall phones */
@media (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: clamp(11.5rem, 26.5svh, 21rem) !important;
    gap: clamp(0.38rem, 0.8svh, 0.7rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    margin-top: clamp(0.45rem, 0.9svh, 0.8rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__desc {
    margin-top: clamp(0.35rem, 0.7svh, 0.65rem) !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__cta {
    margin-top: clamp(0.55rem, 1.05svh, 0.95rem) !important;
  }
}

@media (max-width: 460px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: clamp(10.8rem, 25svh, 14.5rem) !important;
  }
}

@media (max-height: 740px) and (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    top: clamp(8.2rem, 19svh, 9rem) !important;
    gap: 0.32rem !important;
  }

  #hero.hero.hero--singularity.hero--summit .hero__tagline,
  #hero.hero.hero--singularity.hero--summit .hero__desc,
  #hero.hero.hero--singularity.hero--summit .hero__cta {
    margin-top: 0.35rem !important;
  }
}

/* ============================================================
   FIX FINAL (orden de origen): la descripción del hero en móvil
   se desbordaba a la derecha. Esta regla, al estar al final del
   archivo y matchear 390px portrait, gana a las reglas previas.
   display:block + width acotado fuerzan el wrap centrado.
   ============================================================ */
@media (max-width: 900px) and (orientation: portrait) {
  #hero.hero.hero--singularity.hero--summit .hero__desc {
    display: block !important;
    box-sizing: border-box !important;
    width: min(17rem, 84vw) !important;
    max-width: min(17rem, 84vw) !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: balance !important;
    font-size: clamp(0.78rem, 2.8vw, 0.9rem) !important;
  }
}


/* ============================================================
   GEOMETRÍA DE MARCA — bandas diagonales + anillos gigantes (0 KB).
   Se inyectan como .mind-wave: quedan DETRÁS del contenido (por el
   sistema #seccion > :not(.mind-wave){z-index:1}) y la sección los
   recorta (overflow:hidden). Gradientes de marca a opacidad muy baja.
   El #hero NO lleva ninguna forma.
   ============================================================ */
.brand-shape { pointer-events: none !important; will-change: transform; }

/* — Banda diagonal gruesa — */
.brand-band {
  width: 140vw !important;
  max-width: none !important;
  height: clamp(110px, 15vw, 200px) !important;
  border-radius: 999px !important;
  filter: blur(6px) !important;
  overflow: visible !important;
}
.brand-band--ec {
  background: linear-gradient(90deg, rgba(16,185,129,0.10) 0%, rgba(0,193,212,0.08) 55%, rgba(0,193,212,0) 100%) !important;
}
.brand-band--cv {
  background: linear-gradient(90deg, rgba(0,193,212,0) 0%, rgba(0,193,212,0.07) 45%, rgba(124,58,237,0.10) 100%) !important;
}

/* — Anillo gigante — */
.brand-ring {
  width: clamp(360px, 40vw, 620px) !important;
  height: clamp(360px, 40vw, 620px) !important;
  overflow: visible !important;
}
.brand-ring svg { width: 100% !important; height: 100% !important; display: block !important; overflow: visible !important; }

/* — Responsive: más pequeñas y discretas en móvil — */
@media (max-width: 768px) {
  .brand-ring { width: 280px !important; height: 280px !important; }
  .brand-band { height: 84px !important; filter: blur(4px) !important; }
  .brand-shape { opacity: 0.6 !important; }
}

/* ============================================================
   GEOMETRÍA DE MARCA — extensión a TODAS las secciones (menos
   hero/footer) y rebrand de las formas pálidas existentes.
   ============================================================ */

/* .brand-shape autosuficiente (no depende de .mind-wave) */
.brand-shape {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform;
}

/* Secciones que faltaban: contenedor relativo + recorte de las formas */
#ejes, #speakers, #alianzas {
  position: relative;
  overflow: hidden;
}
/* Contenido por encima de las formas (z-index:0) */
#speakers > .container,
#alianzas > .strategic-alliances__inner {
  position: relative;
  z-index: 2;
}

/* Rebrand de los paralelogramos PÁLIDOS de #speakers → gradientes de marca
   (misma forma sesgada elegante, ahora con identidad). */
#speakers::before {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(0,193,212,0.04) 100%) !important;
}
#speakers::after {
  background: linear-gradient(135deg, rgba(0,193,212,0.11) 0%, rgba(124,58,237,0.04) 100%) !important;
}
#speakers .speakers__deco--1 {
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0) 100%) !important;
}
#speakers .speakers__deco--2 {
  background: linear-gradient(160deg, rgba(124,58,237,0.12) 0%, rgba(0,193,212,0) 100%) !important;
}

/* ============================================================
   HERO — REALINEACIÓN A CENTRO MONUMENTAL (solo desktop ≥769px).
   El móvil ya está centrado por sus propios @media; aquí NO entra.
   Apila: logos → SUMMIT → MIND → 2026 → tagline → desc → CTA,
   todo centrado, con tipografía escalada y acento horizontal.
   ============================================================ */
@media (min-width: 769px) {
  /* Hero como columna centrada horizontalmente, a ALTURA DE CONTENIDO
     (sin 100svh → sin hueco vertical). La pila fluye natural y el CTA, ya
     en flujo, aparece tras el meta. Tipografía grande = monumental igual. */
  .hero.hero--singularity.hero--summit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: clamp(78px, 8.5vh, 104px) !important;  /* despeja el nav, sin exceso */
    padding-bottom: clamp(22px, 3.5vh, 44px) !important;
    gap: clamp(2px, 0.5vh, 8px) !important;              /* compacta logos↔título */
  }

  /* CLAVE: el photo-col fue "restaurado" en una regla previa (display:block,
     mitad derecha) y el text-col está en position:absolute (app.css:3300) →
     por eso el contenido quedaba a la izquierda. Lo deshacemos para centrar. */
  #hero .hero__photo-col { display: none !important; }
  #hero.hero.hero--singularity.hero--summit .hero__split {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    position: relative !important;
    inset: auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important;
    align-self: center !important;
    width: auto !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Logos: eran position:absolute (app.css:111) y otras reglas con selector
     completo (1,4,0) los anclaban → al flujo, centrados arriba. Usamos el
     MISMO selector completo + estar al final para ganar el cascade. */
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    position: relative !important;
    inset: auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 94vw !important;
    margin: 0 auto clamp(4px, 0.8vh, 10px) !important;  /* logos pegados al título */
    transform: scale(1.02);
    transform-origin: center top;
  }

  /* Split centra el text-col (photo-col está oculto) */
  #hero .hero__split {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Text-col: bloque centrado que respira */
  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    align-self: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
  }
  #hero .hero__titles { align-items: center !important; text-align: center !important; }
  #hero .hero__year   { justify-content: center !important; }
  /* tagline es flex-direction:column (app.css:302) → centrar con align-items;
     cubrimos ambos ejes para que centre sea row o column. */
  #hero .hero__tagline,
  #hero .hero__meta {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hero .hero__tagline-line { text-align: center !important; }
  /* Tagline en UNA línea (inline) en desktop → ahorra altura para que el
     countdown entre above-the-fold sin perder presencia. */
  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5em !important;
    row-gap: 0.1em !important;
  }

  /* Línea decorativa IZQUIERDA fuera (rompe la simetría) … */
  #hero .hero__text-col::before { display: none !important; }
  /* … y la sustituimos por un acento HORIZONTAL centrado bajo el título */
  #hero .hero__titles::after {
    content: "" !important;
    display: block !important;
    width: clamp(70px, 8vw, 130px) !important;
    height: 3px !important;
    margin: 18px auto 4px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, transparent, #00C1D4 35%, #10B981 65%, transparent) !important;
    box-shadow: 0 0 16px rgba(0, 193, 212, 0.4) !important;
  }

  /* Tipografía monumental (MIND ~+25%) */
  #hero .hero__mind,
  #hero .hero__mind .char {
    font-size: clamp(76px, 10.5vw, 148px) !important;
    line-height: 0.86 !important;
    letter-spacing: 0.01em !important;
  }
  #hero .hero__summit {
    font-size: clamp(28px, 4.6vw, 52px) !important;
    letter-spacing: 0.34em !important;
  }
  #hero .hero__year { font-size: clamp(18px, 2.6vw, 30px) !important; }

  /* Subtítulo + descripción centrados, con wrapping equilibrado */
  #hero .hero__tagline { font-size: clamp(1rem, 1.5vw, 1.4rem) !important; }
  #hero .hero__desc {
    max-width: 40rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: balance !important;
    font-size: clamp(0.95rem, 1.2vw, 1.12rem) !important;
  }

  /* Legibilidad sobre la foto (no en MIND: es texto con gradiente recortado) */
  #hero .hero__summit,
  #hero .hero__year,
  #hero .hero__tagline,
  #hero .hero__desc {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  }

  /* CTA: sacarlo del position:absolute (app.css:9987 bottom:0) al flujo,
     como PILAR CENTRAL: primario arriba, secundario debajo. Selector
     completo (con id) para ganar a .hero--singularity .hero__cta. */
  #hero.hero.hero--singularity.hero--summit .hero__cta {
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;     /* lado a lado: ahorra altura para el countdown */
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: clamp(10px, 1.8vh, 20px) auto 0 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    width: auto !important;
    min-width: clamp(180px, 16vw, 220px) !important;
  }
  #hero .hero__btn-primary,
  #hero .hero__btn-outline {
    width: min(330px, 78vw) !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   COUNTDOWN — píldora de cristal flotante en el límite Hero→Sobre.
   Countdown real al 4 de agosto 2026 (JS en main.js). Texto blanco
   sobre vidrio oscuro translúcido para legibilidad sobre la foto.
   ============================================================ */
.summit-countdown-bridge {
  position: relative;
  z-index: 20;
  margin-top: clamp(-2.2rem, -2.4vw, -1rem); /* solapa el borde del hero sin chocar el CTA */
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
}
.summit-countdown {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  background: rgba(10, 20, 36, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  padding: clamp(11px, 1.3vw, 17px) clamp(22px, 3vw, 44px);
  box-shadow: 0 16px 44px rgba(7, 20, 33, 0.30);
  /* La plataforma se siente "viva": glassmorphism reactivo al hover */
  transition: border-color 0.35s ease, background 0.35s ease,
              box-shadow 0.35s ease, transform 0.35s ease;
}
.summit-countdown:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(10, 20, 36, 0.56);
  box-shadow: 0 20px 54px rgba(7, 20, 33, 0.40),
              0 0 0 1px rgba(28, 198, 181, 0.28),
              inset 0 0 26px rgba(28, 198, 181, 0.14);
  transform: translateY(-1px);
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(42px, 5vw, 62px);
}
.cd-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.cd-lbl {
  margin-top: 5px;
  font-size: clamp(0.56rem, 0.9vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.cd-sep {
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  font-weight: 800;
  color: var(--mind-cyan, #1CC6B5);
  align-self: flex-start;
  margin-top: clamp(1px, 0.4vw, 5px);
  opacity: 0.65;
  /* FOMO: los dos puntos laten para marcar que el tiempo corre */
  animation: cdSepPulse 1.05s ease-in-out infinite;
}
/* Énfasis de urgencia en los segundos (visible también en móvil,
   donde los ':' se ocultan) */
.cd-num[data-cd="s"] {
  animation: cdSecPulse 1s ease-in-out infinite;
}
@keyframes cdSepPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes cdSecPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
  50%      { transform: scale(1.06); text-shadow: 0 2px 16px rgba(28, 198, 181, 0.55); }
}
@media (max-width: 600px) {
  .summit-countdown {
    gap: 8px;
    padding: 10px 18px;
    border-radius: 26px;
  }
  .cd-sep { display: none; }
  .cd-num { font-size: 1.45rem; }
  .cd-unit { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .summit-countdown { backdrop-filter: blur(10px); }
  .summit-countdown:hover { transform: none; }
  .cd-sep { animation: none; opacity: 0.65; }
  .cd-num[data-cd="s"] { animation: none; }
}

/* ============================================================
   FINAL HERO LAYOUT OVERRIDE — 2026-06-23
   Cargado al final del último stylesheet (mind-waves.css) para
   ganar la cascada por encima de las capas previas (algunas con
   comentarios corruptos que rompen el parseo aguas arriba).
   Objetivos:
     · PHASE 1  Subir el bloque hacia los logos (sin espacio muerto)
                y dejar los CTA + countdown dentro del fold.
     · PHASE 2  Tagline vertical real (editorial stack).
     · PHASE 3  Countdown anclado DENTRO del hero (bottom).
     · PHASE 4  Responsividad móvil estricta.
   ============================================================ */
#hero.hero.hero--singularity.hero--summit {
  position: relative !important;
}

/* PHASE 1 — compactar verticalmente y anclar el contenido arriba */
#hero.hero.hero--singularity.hero--summit .hero__split {
  align-items: start !important;
  padding-top: clamp(8rem, 13.5svh, 10.25rem) !important;
  padding-bottom: clamp(6.5rem, 11svh, 8.5rem) !important;
  gap: clamp(1.5rem, 5vw, 5rem) !important;
}
#hero.hero.hero--singularity.hero--summit .hero__text-col {
  gap: clamp(0.45rem, 1.3svh, 0.95rem) !important;
}
#hero.hero.hero--singularity.hero--summit .hero__titles {
  margin-bottom: clamp(0.1rem, 0.6svh, 0.4rem) !important;
}

/* PHASE 2 — tagline vertical (cada palabra en su línea) */
#hero.hero.hero--singularity.hero--summit .hero__tagline {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.08rem !important;
  margin: clamp(0.5rem, 1.4svh, 0.95rem) 0 !important;
  line-height: 1.02 !important;
}
#hero.hero.hero--singularity.hero--summit .hero__tagline-line {
  display: block !important;
  width: auto !important;
  font-size: clamp(1.45rem, 2.5vw, 2.5rem) !important;
  line-height: 1.04 !important;
  text-align: left !important;
  /* Legibilidad sobre la foto brillante (catedral/cielo) */
  text-shadow: 0 2px 14px rgba(4, 16, 28, 0.62), 0 1px 3px rgba(4, 16, 28, 0.78) !important;
}

/* PHASE 3 — countdown DENTRO del hero, anclado abajo y centrado */
#hero.hero.hero--singularity.hero--summit .summit-countdown-bridge {
  position: absolute !important;
  bottom: clamp(1.1rem, 3svh, 2.25rem) !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100vw - 2rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
}

/* UNIVERSAL — el tagline SIEMPRE en una sola columna vertical.
   app.css:8437 le pone flex-wrap:wrap → con altura limitada (laptop)
   las 4 palabras saltaban a una 2ª columna ("Lidera." a la derecha).
   nowrap lo prohíbe en TODA resolución. */
#hero.hero.hero--singularity.hero--summit .hero__tagline {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

/* LAPTOP / VIEWPORT BAJO (desktop >1024 con alto ≤950 — los ≤1024 ya
   usan el layout de flujo). Techo subido de 820→950 para cubrir las
   alturas reales de laptop (768, 800, 1536×864 @125% DPI, 1440×900),
   que antes caían en un hueco sin compactar y dejaban los logos
   absolutos (~150px de borde inferior) montándose sobre "MIND".
   Escala TODO proporcionalmente y reserva holgura real (~35px) entre
   la banda de logos y el título. */
@media (min-width: 1025px) and (max-height: 950px) {
  /* Logos más compactos y subidos, con banda de altura predecible */
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    top: clamp(3.25rem, 5.5svh, 4.75rem) !important;
    transform: scale(0.82) !important;
    transform-origin: left top !important;
  }
  /* Split: hueco superior que SIEMPRE libra la banda de logos con aire,
     y zona segura abajo para que el contenido no alcance el countdown */
  #hero.hero.hero--singularity.hero--summit .hero__split {
    padding-top: clamp(8rem, 15svh, 10rem) !important;
    padding-bottom: clamp(6rem, 12svh, 7.5rem) !important;
    align-items: start !important;
  }
  /* Tipografía laptop: MIND monumental, SUMMIT/2026 con tracking limpio */
  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(1.15rem, 2.1vw, 1.75rem) !important;
    letter-spacing: 0.26em !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(4rem, 8vw, 7rem) !important;
    line-height: 0.84 !important;
    letter-spacing: 0.005em !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    align-items: flex-start !important;
    gap: 0 !important;
    margin: clamp(0.35rem, 1svh, 0.7rem) 0 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__tagline-line {
    display: block !important;
    width: 100% !important;
    font-size: clamp(1.1rem, 1.95vw, 1.7rem) !important;
    line-height: 1.05 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__desc {
    font-size: clamp(0.85rem, 1vw, 1rem) !important;
    line-height: 1.4 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__meta {
    gap: clamp(6px, 0.8vw, 12px) !important;
  }
  /* CTAs y countdown más compactos */
  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    min-height: clamp(2.7rem, 4.5svh, 3.2rem) !important;
  }
  #hero.hero.hero--singularity.hero--summit .summit-countdown-bridge {
    bottom: clamp(0.85rem, 2.2svh, 1.5rem) !important;
  }
  #hero.hero.hero--singularity.hero--summit .summit-countdown {
    gap: clamp(8px, 1.2vw, 16px) !important;
    padding: clamp(8px, 1vh, 12px) clamp(16px, 2vw, 30px) !important;
  }
  #hero.hero.hero--singularity.hero--summit .cd-num {
    font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  }
}

/* NOTA: los antiguos bloques móviles (max-width:768 y max-height:740)
   que dependían del countdown en position:absolute fueron reemplazados
   por la arquitectura de FLUJO NATURAL en el bloque al final del archivo
   (@media max-width:1024px). Así el countdown reserva su espacio y NUNCA
   solapa los CTA. */

/* ============================================================
   EJES — LIENZO BLANCO CONTINUO + CHIPS ELÁSTICAS — 2026-06-23
   Última capa (mind-waves.css) → gana la cascada.
     · PHASE 1  Quitar el bloque gris/teñido y las líneas de rejilla
                para fundir #ejes con el lienzo blanco del sitio.
     · PHASE 2  Chips elásticas (shrink-wrap) tipo píldora + hover.
     · PHASE 3  Anillo geométrico puente (inyectado en el HTML,
                reutilizando .brand-shape/.brand-ring del proyecto).
   ============================================================ */

/* PHASE 1 — fondo blanco continuo, sin divisor ni rejilla */
#ejes.ejes-director {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Mata las líneas rectas horizontales/verticales (rejilla científica) */
#ejes.ejes-director::after { display: none !important; }

/* PHASE 2 — sub-temas: de grid rígido a flexbox elástico (píldoras) */
#ejes .subtopics-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  justify-content: flex-start !important;
}
#ejes .subtopic-chip {
  width: auto !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  font-size: clamp(0.9rem, 1vw, 1rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 193, 212, 0.22) !important;
  box-shadow: none !important;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1),
              border-color 220ms ease, box-shadow 220ms ease,
              background 220ms ease !important;
}
/* Micro-interacción táctil: levanta + borde esmeralda al hover */
#ejes .subtopic-chip:hover {
  transform: translateY(-2px) !important;
  background: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.16) !important;
  color: var(--ejes-ink, #071421) !important;
}

/* PHASE 3 — anillo puente entre #sobre y #ejes */
#ejes .ejes-bridge-ring {
  top: clamp(-9rem, -7vw, -4rem) !important;
  left: 5% !important;
  opacity: 0.85 !important;
  z-index: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  #ejes .subtopic-chip:hover { transform: none !important; }
}

/* ============================================================
   HERO TABLET + MÓVIL — ARQUITECTURA DE FLUJO NATURAL — 2026-06-23
   Último bloque del último stylesheet → gana la cascada y unifica
   TODO ≤1024px (mata las zonas muertas 760/768/761/820 previas).

   Principio: en pantallas pequeñas el #hero deja de usar
   position:absolute. Pasa a ser una COLUMNA FLEX en flujo natural:
     logos → contenido → countdown
   El countdown lleva margin-top:auto (se ancla abajo) PERO reserva
   su espacio real → NUNCA solapa los CTA. Si el contenido excede la
   pantalla, el hero crece (min-height:100svh) en vez de aplastarse.
   ============================================================ */
@media (max-width: 1024px) {
  /* 1 · Hero como columna de flujo, altura real del viewport (svh) */
  #hero.hero.hero--singularity.hero--summit {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* 2 · Logos en flujo, centrados, con holgura para el nav fijo */
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    position: static !important;
    inset: auto !important;
    order: 0 !important;
    margin: clamp(4.75rem, 11svh, 6.5rem) auto 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: clamp(0.6rem, 2vw, 1.1rem) !important;
  }

  /* 3 · Split: de grid absoluto a columna estática centrada */
  #hero.hero.hero--singularity.hero--summit .hero__split {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: clamp(1rem, 3svh, 2rem) clamp(1.25rem, 5vw, 2.25rem) 0 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__photo-col { display: none !important; }

  #hero.hero.hero--singularity.hero--summit .hero__text-col {
    /* Anula la posición ABSOLUTA del bloque portrait (línea ~3296)
       que rompía la columna en flujo */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;       /* anula el parallax/translate JS que lo desplazaba */
    align-self: center !important;
    width: 100% !important;
    max-width: 40rem !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(0.4rem, 1.3svh, 0.9rem) !important;
  }

  /* 4 · Escalado tipográfico agresivo (cabe en vertical) */
  #hero.hero.hero--singularity.hero--summit .hero__titles {
    margin: 0 auto !important;
    transform: none !important;
    align-self: center !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__summit,
  #hero.hero.hero--singularity.hero--summit .hero__year {
    font-size: clamp(1.4rem, 4.6vw, 2.4rem) !important;
    letter-spacing: 0.2em !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(3.6rem, 17vw, 6.6rem) !important;
    line-height: 0.84 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__tagline {
    align-items: center !important;
    gap: 0 !important;
    margin: clamp(0.5rem, 1.6svh, 1rem) 0 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__tagline-line {
    text-align: center !important;
    font-size: clamp(1.2rem, 5.4vw, 2rem) !important;
    line-height: 1.04 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__desc {
    font-size: clamp(0.86rem, 2.4vw, 1.05rem) !important;
    line-height: 1.45 !important;
    max-width: 34rem !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__meta {
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5 · CTAs: pila centrada, secundario tipo "ghost" */
  #hero.hero.hero--singularity.hero--summit .hero__cta {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__btn-primary,
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    width: min(360px, 82vw) !important;
    min-height: clamp(3rem, 6.5svh, 3.5rem) !important;
  }
  /* Ghost button: aligera la UI y da protagonismo al CTA principal */
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline {
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px) !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__btn-outline:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
  }

  /* 6 · Countdown EN FLUJO al fondo: reserva su espacio, sin solape */
  #hero.hero.hero--singularity.hero--summit .summit-countdown-bridge {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: auto 0 0 !important;            /* empuja al fondo del flex column */
    padding: clamp(1rem, 3svh, 1.75rem) 1rem clamp(1.1rem, 3svh, 1.9rem) !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 20 !important;
  }
  /* Píldora más compacta en pantallas pequeñas */
  #hero.hero.hero--singularity.hero--summit .summit-countdown {
    gap: clamp(6px, 1.6vw, 14px) !important;
    padding: clamp(8px, 1.4vh, 12px) clamp(14px, 3.5vw, 26px) !important;
  }
  #hero.hero.hero--singularity.hero--summit .cd-num {
    font-size: clamp(1.3rem, 5vw, 1.9rem) !important;
  }
  #hero.hero.hero--singularity.hero--summit .cd-lbl {
    font-size: clamp(0.5rem, 1.5vw, 0.62rem) !important;
  }
}

/* Móvil estrecho (≤480px): apura logos y tipografía */
@media (max-width: 480px) {
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    margin-top: clamp(4.25rem, 10svh, 5.5rem) !important;
    transform: scale(0.92) !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__mind,
  #hero.hero.hero--singularity.hero--summit .hero__mind .char {
    font-size: clamp(3.4rem, 19vw, 5rem) !important;
  }
}

/* ============================================================
   HERO — COMPOSICIÓN CENTRADA (según assets/FOTO DE REFENCIA.png)
   + TÍTULO BLANCO — 2026-06-23. Última capa del último stylesheet,
   gana la cascada sobre todas las capas previas.
     · Una sola columna CENTRADA (logos → SUMMIT → MIND → 2026 →
       tagline → desc → meta → CTAs → countdown), como la referencia,
       en vez del split asimétrico con el texto a la izquierda.
     · SUMMIT / MIND / 2026 en BLANCO sólido (la referencia los tenía
       en cian; aquí se piden blancos) — mata el gradiente recortado.
     · Los botones "Reservar entrada" (primario) y "Ver programa"
       (outline) CONSERVAN sus colores: no se tocan en este bloque.
   ============================================================ */

/* — Layout: split de 2 columnas → una columna centrada — */
#hero.hero.hero--singularity.hero--summit .hero__split {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* La columna derecha (foto) ya no aporta: el fondo es el vídeo/foto del hero */
#hero.hero.hero--singularity.hero--summit .hero__photo-col {
  display: none !important;
}
#hero.hero.hero--singularity.hero--summit .hero__text-col {
  width: 100% !important;
  max-width: 60rem !important;
  margin-inline: auto !important;
  align-items: center !important;
  text-align: center !important;
}
#hero.hero.hero--singularity.hero--summit .hero__titles {
  margin-inline: auto !important;
  align-self: center !important;
}
#hero.hero.hero--singularity.hero--summit .hero__tagline,
#hero.hero.hero--singularity.hero--summit .hero__desc,
#hero.hero.hero--singularity.hero--summit .hero__meta,
#hero.hero.hero--singularity.hero--summit .hero__cta {
  align-self: center !important;
  margin-inline: auto !important;
  text-align: center !important;
  justify-content: center !important;
}
#hero.hero.hero--singularity.hero--summit .hero__tagline {
  align-items: center !important;
}
#hero.hero.hero--singularity.hero--summit .hero__tagline-line {
  text-align: center !important;
}
#hero.hero.hero--singularity.hero--summit .hero__meta {
  flex-wrap: wrap !important;
}

/* — Título SUMMIT / MIND / 2026 en BLANCO sólido — */
#hero.hero.hero--singularity.hero--summit .hero__summit,
#hero.hero.hero--singularity.hero--summit .hero__year,
#hero.hero.hero--singularity.hero--summit .hero__mind,
#hero.hero.hero--singularity.hero--summit .hero__mind .char {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(4, 16, 28, 0.55),
               0 1px 4px rgba(4, 16, 28, 0.72) !important;
}

/* ============================================================
   HERO DESKTOP (≥769px) — ARREGLO FINAL LOGOS + META — 2026-06-23
   · Logos: los 3 grupos visibles, en UNA fila centrada sobre el
     título (como en móvil). Se neutraliza el offset/escala que el
     bloque laptop les aplicaba (los hundía y encogía) ya que en
     desktop el hero es layout EN FLUJO, no absoluto.
   · Meta ("04–08 Agosto" / "Arequipa – Perú"): centrado de verdad
     (eje transversal incluido), no pegado a la izquierda.
   ============================================================ */
@media (min-width: 769px) {
  /* Barra de logos: flujo, fila, centrada, tamaño legible */
  #hero.hero.hero--singularity.hero--summit .hero__logos {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important;
    max-width: min(92vw, 70rem) !important;
    margin: 0 auto clamp(0.6rem, 1.4vh, 1.25rem) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(1rem, 2.4vw, 2.5rem) !important;
    background: none !important;
    transform: none !important;       /* anula scale(0.82)/scale(1.02) previos */
    overflow: visible !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__logo-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(0.45rem, 0.7vw, 0.75rem) !important;
    min-width: 0 !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__logo-sep {
    display: block !important;
    flex: 0 0 auto !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__logo-mark {
    width: clamp(2.4rem, 2.8vw, 3.2rem) !important;
    height: clamp(2.4rem, 2.8vw, 3.2rem) !important;
    flex: 0 0 auto !important;
  }
  #hero.hero.hero--singularity.hero--summit .hero__logo-label {
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /* Meta: chips centrados en el bloque (no a la izquierda) */
  #hero.hero.hero--singularity.hero--summit .hero__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
}