.page {
  position: relative;
}

.page.is-glitching {
  animation: glitch-anim 0.09s steps(2, end) infinite;
}

/* Boot overlay */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.boot-overlay.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot-overlay__text {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.6vw, 18px);
  color: var(--color-dim);
  letter-spacing: 0.08em;
  text-align: center;
}

.boot-overlay__line {
  margin-bottom: 10px;
}

.boot-overlay__line--1 { color: var(--color-text); }
.boot-overlay__line--2 { color: var(--accent-purple-strong); }
.boot-overlay__line--3 { color: var(--accent-cyan); margin-bottom: 0; }

.boot-overlay__caret {
  animation: blink 1s step-end infinite;
}

/* Glitch bands overlay */
.glitch-bands {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

.glitch-bands.is-active {
  display: block;
}

.glitch-band {
  position: absolute;
  left: 0;
  right: 0;
  mix-blend-mode: screen;
}

/* Scroll progress bar */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-gradient);
  box-shadow: 0 0 12px rgba(160, 91, 255, 0.6);
  z-index: 110;
  transition: width 0.1s linear;
}

/* Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(16px, 6vw, 80px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav.is-scrolled {
  padding: 14px clamp(16px, 6vw, 80px);
  background: rgba(15, 13, 18, 0.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border-strong);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text);
}

.nav__logo-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  gap: clamp(8px, 2vw, 28px);
  align-items: center;
  overflow-x: auto;
  /* Firefox; see the ::-webkit-scrollbar rules below for other browsers.
     Same treatment as .terminal__history, so any scrollbar on the site
     reads as themed rather than the browser default gray. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-purple-strong) rgba(255, 255, 255, 0.06);
}

.nav__links::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.nav__links::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.nav__links::-webkit-scrollbar-thumb {
  background: var(--accent-purple-strong);
  border-radius: 999px;
}

.nav__links::-webkit-scrollbar-thumb:hover {
  background: var(--accent-magenta);
}

/* Fixed (not inline) at every width it's shown at — see the HTML comment
   next to this button for why it can't live inside <nav>. */
.nav__menu-toggle {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.nav__menu-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.25s var(--ease-standard), opacity 0.2s ease;
}

.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(5, 4, 8, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.nav__scrim.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color 0.25s var(--ease-standard);
}

/* Only shown in the mobile dropdown (see @media below) — on the inline
   desktop nav there's no room, and no need, for a numbered index. */
.nav__link-index {
  display: none;
}

.nav__link:hover {
  color: var(--color-text);
}

.nav__link.is-active {
  color: var(--accent-purple-strong);
}

.nav__link-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--accent-gradient);
  border-radius: 2px;
  transition: width 0.3s var(--ease-standard);
}

.nav__link.is-active .nav__link-underline {
  width: 100%;
}

@media (max-width: 760px) {
  .nav__menu-toggle {
    display: flex;
  }

  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 100vh;
    overflow-y: auto;
    padding: 96px 24px 32px;
    background: rgba(15, 13, 18, 0.94);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.25s var(--ease-standard), transform 0.25s var(--ease-standard), visibility 0s linear 0.25s;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.25s var(--ease-standard), transform 0.25s var(--ease-standard);
  }

  .nav__link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 20px;
    font-weight: 500;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Each link fades/slides in with a slight per-item delay when the menu
       opens, instead of the whole panel just appearing at once. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard), color 0.25s var(--ease-standard);
  }

  .nav__link-index {
    display: inline;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-purple-strong);
    letter-spacing: 0.05em;
  }

  .nav__links.is-open .nav__link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav__links.is-open .nav__link:nth-child(1) { transition-delay: 0.03s; }
  .nav__links.is-open .nav__link:nth-child(2) { transition-delay: 0.07s; }
  .nav__links.is-open .nav__link:nth-child(3) { transition-delay: 0.11s; }
  .nav__links.is-open .nav__link:nth-child(4) { transition-delay: 0.15s; }
  .nav__links.is-open .nav__link:nth-child(5) { transition-delay: 0.19s; }
  .nav__links.is-open .nav__link:nth-child(6) { transition-delay: 0.23s; }

  /* Terminal (now icon-only on mobile, see components.css) and menu are
     both a plain 36px square at left/right:20px — so the box from just
     past one to just before the other is symmetric, and centering the
     shrunk progress chip within it (width: fit-content + margin: auto)
     keeps equal, reliable breathing room on both sides at any viewport
     width, including narrow phones (~350px) where an unmatched-width
     terminal button previously clipped it. */
  .section-index {
    left: 66px;
    right: 66px;
    transform: none;
    margin: 0 auto;
    width: fit-content;
    font-size: 9px;
    padding: 6px 9px;
    gap: 4px;
  }

  .section-index__track {
    width: 28px;
  }
}

/* Section index indicator */
.section-index {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-dim);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: opacity 0.15s ease;
}

/* All three float in corners the 3D Capacidades scene visually occupies —
   fade out while that section is active instead of overlapping it
   (see .terminal-toggle in components.css for its half of this rule). */
.is-over-planets .section-index,
.is-over-planets .terminal-toggle,
.is-over-planets .nav__menu-toggle {
  opacity: 0;
  pointer-events: none;
}

.section-index__current {
  color: var(--accent-purple-strong);
}

.section-index__track {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}

.section-index__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--accent-gradient);
  transition: width 0.5s var(--ease-standard);
}

/* Sections */
.section {
  padding: 140px var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}

.section--narrow {
  max-width: 1200px;
}

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-dim);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.section__title {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 500;
  max-width: 760px;
  margin: 0;
}

.section__title--lg {
  max-width: 820px;
}

.section__intro {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-muted);
  max-width: 700px;
  line-height: 1.7;
  margin-top: 20px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* .nav is a fixed overlay — it reserves no space in the document flow,
     so centering hero's content across the full 100vh (with no top
     padding) can push it up underneath the nav whenever the content is
     tall enough, e.g. the eyebrow text wrapping to 2 lines on a narrow
     screen. This padding guarantees content never starts above the nav,
     regardless of how tall the content or how short the viewport is. */
  padding: 96px var(--gutter) 0;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 30% 20%, rgba(91, 140, 255, 0.18), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(192, 79, 255, 0.14), transparent 55%);
}

.hero__gradient-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(120deg, rgba(91, 140, 255, 0.5) 0%, rgba(160, 91, 255, 0.45) 35%, rgba(192, 79, 255, 0.4) 60%, rgba(91, 224, 224, 0.35) 100%);
  background-size: 300% 300%;
  animation: hero-gradient-move 16s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 10, 13, 0.35) 0%, rgba(11, 10, 13, 0.75) 55%, #0b0a0d 100%);
}

.hero__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 140, 255, 0.22), rgba(160, 91, 255, 0.14) 45%, transparent 70%);
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  animation: float-glow 9s ease-in-out infinite;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #8ca0ff;
  margin-bottom: 24px;
}

.hero__title {
  font-size: clamp(36px, 8vw, 104px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__firma {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-dim);
  margin: 14px 0 28px;
}

.hero__tagline {
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--color-text-soft);
  font-weight: 500;
  margin: 0 0 20px;
  max-width: 640px;
}

.hero__lead {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-muted);
  max-width: 600px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.hero__availability {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-cyan);
  letter-spacing: 0.03em;
  margin: 0 0 40px;
}

.hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__scroll-hint {
  /* .hero is ~viewport-height, so this absolute hint would otherwise land
     right where .section-index (fixed bottom-right, at every width) sits —
     76px clears its ~34px-tall chip at bottom:20px with room to spare. */
  position: absolute;
  bottom: 76px;
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-faint);
  letter-spacing: 0.1em;
  z-index: 2;
}

/* Perfil */
.perfil__intro {
  margin-top: 32px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perfil__intro-p {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

.perfil__closing {
  margin-top: 56px;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  max-width: 780px;
}

/* Pillars (Comprender / Construir / Mejorar) */
.pillars {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.pillar {
  padding: 28px clamp(20px, 2.4vw, 28px);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.pillar__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-purple-strong);
  margin-bottom: 14px;
}

.pillar__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}

.pillar__desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 760px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* Trabajo seleccionado / Laboratorio — shared accordion (see components.css .sistema) */
.sistema__detail-block--full {
  grid-column: 1 / -1;
}

.sistema__detail-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sistema__detail-list li {
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.sistema__areas {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sistema__note {
  font-size: 12.5px;
  color: var(--color-faint);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Método */
.method-steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}

.method-step {
  padding: 24px 20px;
  border-top: 2px solid var(--accent-purple-strong);
  background: var(--surface-1);
}

.method-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-dim);
  margin-bottom: 12px;
}

.method-step__title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
}

.method-step__desc {
  font-size: 13.5px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 900px) {
  .method-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .method-steps {
    grid-template-columns: 1fr;
  }
}

.method-principles {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.method-principles li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.method-principles li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-purple-strong);
}

/* Trayectoria */
.timeline__link {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.timeline__link:hover {
  color: var(--accent-cyan);
}

/* Laboratorio */
.lab-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.lab-card {
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.lab-card__name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}

.lab-card__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}

.lab-card__desc {
  font-size: 14.5px;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0 0 20px;
}

.lab-closing {
  margin-top: 40px;
  font-size: 15px;
  color: var(--color-faint);
  max-width: 640px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .lab-grid {
    grid-template-columns: 1fr;
  }
}

/* Quote block — full-bleed pull-quote panel, reused by Método (and any future section) */
.quote-block {
  margin-top: 64px;
  padding: 120px var(--gutter);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  text-align: center;
  position: relative;
}

.quote-block__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 40%, rgba(91, 140, 255, 0.12), transparent 60%);
  filter: blur(2px);
}

.quote-block__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(11, 10, 13, 0.4), #0b0a0d 75%);
}

.quote-block__panel {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface-1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: clamp(40px, 6vw, 72px);
}

.quote-block__quote {
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

/* Contacto */
.contacto__panel {
  /* Matches the ~48-56px gap other sections leave between their intro
     paragraph and the next content block (.pillars, .method-steps) — this
     one had none, so it sat flush against .section__intro's text above it. */
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--surface-1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: clamp(24px, 4vw, 48px);
  max-width: 560px;
}

.contacto__panel > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contacto__item-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.contacto__item-value {
  color: var(--color-text);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow-wrap: anywhere;
}

.contacto__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Footer */
.footer {
  /* Extra bottom clearance: .section-index and .terminal-toggle are fixed
     to the viewport's bottom corners, so once the user scrolls all the way
     down, those float on top of whatever the footer renders at its own
     bottom edge unless the footer leaves enough room beneath its text. */
  padding: 32px var(--gutter) clamp(88px, 12vw, 110px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-faint);
  letter-spacing: 0.08em;
}

.footer__secondary-nav {
  display: flex;
  gap: 20px;
}

.footer__link {
  color: var(--color-faint);
  text-decoration: none;
  letter-spacing: 0.08em;
}

.footer__link:hover {
  color: var(--color-text);
}