/* ============================================================
   EXTRA PASS — hub chrome + ALL-SLIDE viewport fit
   Loads AFTER styles.css. Champagne #C4A574 on warm cinema #141210.
   Fraunces / Inter / JetBrains. One GB → hub. No lang gate.
   ============================================================ */

:root {
  --bg: #151c22;
  --bg2: #1d272e;
  --surface: #263039;
  --surface2: #303942;
  --ink-on-dark: #F7F3EC;
  --muted: #8A8178;
  --line: rgba(247, 243, 236, 0.11);
  --line-strong: rgba(247, 243, 236, 0.18);
  --accent: #e6d8c3;
  --accent-ink: #172229;
  --yellow: #deceb7;
  --gold: #deceb7;
  --mark: #deceb7;
  --yellow-dim: rgba(221,204,178,.08);
  --yellow-glow: rgba(221,204,178,.13);
  --header: 64px;
   /* controls + ≥12px clearance */
  --slide-pad-top: calc(var(--header) + 10px);
  
  --r: 4px;
  
  --display: "Fraunces", "Times New Roman", Georgia, serif;
  --sans: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  
  
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* —— type hierarchy —— */
.gb-hero-copy h1,
.slide h2,
.gb-card-title,
.gb-metrics strong,
.case-hero-copy h1,
.case-section-heading h2,
.gb-contact h2 {
  font-weight: 700;
  font-variation-settings: "opsz" 96;
}
.gb-hero-copy h1 em,
.slide h2 em,
.case-hero-copy h1 em {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
}
.gb-lead,
.gb-panel-lead,
.slide p {
  font-family: var(--sans);
  line-height: 1.5;
}
.eyebrow,
.gb-kicker,
.slide-index,
.os-rail-hint,
.deck-hint {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* —— hub chrome —— */

.brand {
  
  
  gap: 12px;
  
  
  
  padding: 0;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
a.brand { cursor: pointer; }


.brand-text,
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.os-rail-brand .brand-mark { display: none !important; }


.main-nav > button:hover,
.main-nav > a.nav-home:hover {
  color: var(--ink-on-dark);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}


.seg-btn:hover:not(.is-active) {
  color: var(--ink-on-dark);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}



/* ============================================================
   ALL SLIDES — one viewport, chrome-safe padding
   ============================================================ */

.slide > * {
  max-width: 100%;
  min-height: 0;
}

/* Inner shells fill remaining height without spilling under controls */
.slide > .gb-hero-stack,
.slide > .gb-panel,
.slide > .gb-star,
.slide > .gb-demos,
.slide > .gb-route-top,
.slide > .gb-method-top,
.slide > .gb-caps-top,
.slide > .gb-langs-top,
.slide > .gb-contact-inner,
.gb-star,
.gb-demos,
.gb-panel,
.gb-hero-stack,
.gb-valor-panel,
.gb-career-panel,
.gb-exp-panel,
.gb-edu-panel,
.education-layout,
.compact-edu {
  max-height: var(--slide-inner) !important;
}

.gb-hero-stack,
.gb-star,
.gb-demos,
.gb-valor-panel,
.gb-career-panel,
.gb-exp-panel,
.gb-edu-panel {
  width: min(100%, var(--max)) !important;
  height: auto !important;
  max-height: var(--slide-inner) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Route / method / caps / line / education: constrain children */
#ruta.slide,
#metodo.slide,
#capacidades.slide,
#linea.slide,
#formacion.slide,
#sistemas.slide,
#demos.slide,
#trayectoria.slide,
#experiencia.slide,
#experiencia-2.slide {
  justify-content: center !important;
  align-items: stretch !important;
}

#ruta.slide > *,
#metodo.slide > *,
#capacidades.slide > *,
#formacion.slide > * {
  width: min(100%, var(--max));
  margin-left: auto;
  margin-right: auto;
}

#ruta .gb-route-body,
#metodo .gb-method-grid,
#capacidades .gb-caps-grid,
#linea .gb-line-frame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
}


.slide h2 {
  font-size: clamp(22px, 2.8vw + 0.6vh, 44px) !important;
  line-height: 0.96 !important;
}

/* ============================================================
   EDGE #valor — dark gold cinema (no light paper)
   ============================================================ */
.gb-valor-slide,
#valor.slide {
  justify-content: center !important;
  align-items: center !important;
  padding-bottom: calc(var(--chrome-bottom) + 4px) !important;
  background: var(--ground, var(--ink)) !important;
  color: var(--cream) !important;
}
.gb-valor-panel {
  width: min(100%, var(--max)) !important;
  max-height: var(--slide-inner) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: var(--r) !important;
  background: var(--grad-panel) !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--cream) !important;
}
.gb-valor-head {
  flex: 0 0 auto;
  padding: clamp(10px, 1.6vh, 20px) clamp(14px, 2.2vw, 28px) clamp(8px, 1.2vh, 14px) !important;
  text-align: center !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.8vh, 10px);
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.06), transparent) !important;
}
.gb-valor-index,
#valor .slide-index.light-index {
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 100%;
  color: var(--gold) !important;
}
.gb-valor-head h2 {
  margin: 0 !important;
  max-width: 22ch !important;
  font-size: clamp(24px, 3.1vw + 0.7vh, 44px) !important;
  line-height: 0.94 !important;
  text-align: center !important;
  color: var(--cream) !important;
}
.gb-valor-head h2 em {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-style: italic !important;
}
.gb-valor-head .gb-panel-lead {
  margin: 0 auto !important;
  max-width: 52ch !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1.4 !important;
  color: var(--mute-2) !important;
  text-align: center !important;
}
.gb-valor-panel .gb-loop,
.gb-valor-panel [data-valor-loop] {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-bottom: 1px solid var(--line);
  align-content: start;
  background: transparent !important;
}
.gb-valor-panel .gb-loop-card,
.gb-valor-panel [data-valor-loop] article {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(10px, 1.4vh, 16px) clamp(10px, 1.2vw, 16px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 50%),
    rgba(0, 0, 0, 0.22) !important;
  box-shadow: none !important;
  color: var(--cream) !important;
  backdrop-filter: none !important;
}
.gb-valor-panel .gb-loop-card:last-child,
.gb-valor-panel [data-valor-loop] article:last-child {
  border-right: 0 !important;
}
.gb-valor-panel .gb-loop-card.is-end {
  background:
    linear-gradient(165deg, rgba(188,184,179,0.12), transparent 50%),
    rgba(0, 0, 0, 0.22) !important;
}
.gb-valor-panel .gb-loop-card:hover,
.gb-valor-panel [data-valor-loop] article:hover {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.16), transparent 45%),
    rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px var(--gold-line) !important;
  border-color: var(--gold-line) !important;
}
.gb-valor-panel .gb-loop-num {
  color: var(--gold) !important;
  font: 800 11px/1 var(--mono) !important;
}
.gb-valor-panel .gb-loop-label {
  color: var(--ice) !important;
  font: 800 9px/1 var(--mono) !important;
}
.gb-valor-panel .gb-loop-card h3,
.gb-valor-panel [data-valor-loop] h3 {
  font-size: clamp(14px, 1.1vw + 0.35vh, 18px) !important;
  line-height: 1.15 !important;
  margin: 2px 0 0 !important;
  color: var(--cream) !important;
}
.gb-valor-panel .gb-loop-card p,
.gb-valor-panel [data-valor-loop] p {
  font-size: clamp(11px, 0.9vw, 13px) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  color: var(--mute-2) !important;
}
.gb-valor-panel .gb-loop-card:hover h3,
.gb-valor-panel .gb-loop-card:hover p,
.gb-valor-panel .gb-loop-card:hover .gb-loop-num,
.gb-valor-panel .gb-loop-card:hover .gb-loop-label {
  color: inherit !important;
}
.gb-valor-panel .gb-loop-card:hover h3 { color: var(--cream) !important; }
.gb-valor-panel .gb-loop-card:hover p { color: var(--mute-2) !important; }
.gb-valor-panel .gb-loop-card:hover .gb-loop-num { color: var(--gold) !important; }
.gb-valor-panel .gb-loop-card:hover .gb-loop-label { color: var(--ice) !important; }
.gb-valor-panel .gb-panel-bar {
  flex-shrink: 0 !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  background: rgba(196, 165, 116, 0.08) !important;
  color: var(--gold) !important;
  border-top: 1px solid var(--gold-line) !important;
  position: relative;
  z-index: 2;
} /* legacy */

/* ============================================================
   CONTACT #contacto — centered block, no empty strip
   ============================================================ */
.gb-contact,
#contacto.slide {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  max-width: none !important; /* was --max → left-biased empty strip */
  width: 100% !important;
  margin: 0 !important;
  padding-bottom: calc(var(--chrome-bottom) + 4px) !important;
}
.gb-contact-inner {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  max-height: var(--slide-inner) !important;
  margin: 0 auto !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.4vh, 16px) !important;
  text-align: center !important;
}
.gb-contact-kicker {
  margin: 0 !important;
  color: var(--gold) !important;
  font: 800 11px var(--mono) !important;
  letter-spacing: .16em !important;
}
.gb-contact h2 {
  margin: 0 !important;
  font-size: clamp(42px, 8vw + 1vh, 96px) !important;
  line-height: 0.88 !important;
  letter-spacing: -.04em !important;
  color: var(--white) !important;
  text-align: center !important;
}
.gb-contact h2 em { color: var(--gold) !important; }
.gb-contact-sub {
  margin: 0 !important;
  color: #a8a79d !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
}
.gb-contact-actions,
.gb-contact-docs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  width: 100% !important;
}
.gb-contact-meta {
  margin: clamp(4px, 1vh, 12px) 0 0 !important;
  max-width: 56ch !important;
  color: #8a8980 !important;
  font: 11px/1.65 var(--mono) !important;
  text-align: center !important;
}
.gb-contact-meta a:hover { color: var(--gold); }

/* ============================================================
   OTHER SLIDES — densify to fit
   ============================================================ */
.gb-star-head,
.gb-demos-head,
.gb-method-top,
.gb-route-top,
.gb-caps-top,
.gb-panel-head,
.gb-panel-head-compact {
  flex-shrink: 0 !important;
  gap: clamp(2px, 0.6vh, 8px) !important;
}
.gb-star-lead,
.gb-demos-lead,
.gb-method-lead,
.gb-route-lead,
.gb-caps-lead,
.gb-panel-lead {
  font-size: clamp(12px, 1.05vw, 15px) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.gb-star-grid,
.gb-demos-grid,
.gb-method-grid,
.gb-caps-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.gb-star-main,
.gb-demo-card,
.gb-step,
.gb-caps-grid > article {
  min-height: 0 !important;
  overflow: hidden !important;
}
.gb-career-panel .gb-dual,
.gb-exp-panel .gb-roles {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.gb-exp-panel .gb-role {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 0 14px !important;
}
.gb-exp-panel .gb-role-title {
  font-size: clamp(13px, 1.2vw, 17px) !important;
}
.gb-exp-panel .gb-role-sum {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.gb-career-panel .gb-engine-list li {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 8px 12px !important;
}
.gb-route-map {
  min-height: 0 !important;
  max-height: 100% !important;
}
.gb-route-strip {
  flex-shrink: 0 !important;
  max-height: 72px !important;
  overflow: hidden !important;
}
.education-slide .education-layout,
.education-slide .compact-edu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Short viewports — compress globally */
@media (max-height: 800px) {
  :root { --chrome-bottom: 84px; --slide-pad-top: calc(var(--header) + 6px); }
  .gb-hero-copy h1 { font-size: clamp(28px, 4.2vw, 52px) !important; }
  .gb-hero-stack { gap: 6px !important; }
  .gb-lead { margin-bottom: 8px !important; }
  .gb-actions .button { min-height: 36px !important; }
  .gb-contact h2 { font-size: clamp(36px, 7vw, 72px) !important; }
  .gb-metrics > div { padding: 5px 8px !important; }
  .gb-metrics strong { font-size: clamp(18px, 1.8vw, 28px) !important; }
  .gb-hero-tags-fx { display: none !important; }
  .gb-card-list li:nth-child(n+3) { display: none !important; }
  .gb-valor-panel { min-height: 0 !important; }
  .gb-valor-head { padding: 8px 12px 6px !important; }
  .gb-valor-head h2 { font-size: clamp(20px, 2.8vw, 32px) !important; }
  .gb-valor-panel .gb-loop-card,
  .gb-valor-panel [data-valor-loop] article { padding: 8px 10px !important; }
  .slide h2 { font-size: clamp(20px, 2.4vw, 32px) !important; }
  .gb-panel-bar, .gb-demos-foot { min-height: 34px !important; padding: 6px 10px !important; }
  /* Global bottom clearance for all fit slides */
  .slide.fit { padding-bottom: calc(var(--chrome-bottom) + 2px) !important; }
}
@media (max-height: 700px) {
  .gb-hero .gb-card { display: none !important; }
  .gb-hero .gb-hero-grid { grid-template-columns: 1fr !important; }
  .gb-hero-proof { display: none !important; }
  .gb-metrics { grid-template-columns: repeat(4, 1fr) !important; }
  .gb-valor-panel .gb-loop-card p { display: none !important; }
  .deck-hint { display: none !important; }
}

/* Tablet / phone */
@media (max-width: 1099px) {
  .os-rail { display: none !important; }
  body.has-os-rail .deck { margin-left: 0 !important; width: 100% !important; }
  body.has-os-rail .deck-hint { left: 16px !important; }
}
@media (max-width: 980px) {
  :root {
    --header: 60px;
    --chrome-bottom: 88px; /* full-width controls + ≥12px clearance */
    --pad: clamp(12px, 4vw, 24px);
  }ant; }
  .gb-metrics { grid-template-columns: 1fr 1fr !important; }
  .gb-valor-panel { min-height: 0 !important; }ild(-n+2) {
    border-bottom: 1px solid var(--line-light);
  }
  .deck-controls {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    justify-content: space-between !important;
  }
  .main-nav {
    position: fixed !important;
    inset: var(--header) 0 auto !important;
    display: none;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    z-index: 70;
    padding: 10px var(--pad) 16px;
  }uto-height stack */
  html, body {
    height: 100% !important;
    overflow: hidden !important;
  }
  .deck {
    height: 100svh !important;
    max-height: 100svh !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
  }
  .slide,
  .slide.fit {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    padding: var(--slide-pad-top) var(--pad) var(--chrome-bottom) !important;
    justify-content: center !important;
  }
  .gb-panel,
  .gb-valor-panel,
  .gb-career-panel,
  .gb-exp-panel,
  .gb-hero-stack,
  .gb-star,
  .gb-demos {
    height: auto !important;
    max-height: var(--slide-inner) !important;
    overflow: hidden !important;
  }
  .gb-contact-actions .button,
  .gb-contact-docs .button {
    min-width: 0;
  }
  .gb-contact h2 { font-size: clamp(40px, 14vw, 64px) !important; }
}
@media (max-width: 640px) {
  .gb-valor-panel .gb-loop,
  .gb-valor-panel [data-valor-loop] {
    grid-template-columns: 1fr 1fr !important;
  }
  .gb-actions { flex-direction: column !important; align-items: stretch !important; }
  .gb-actions .button { width: 100% !important; justify-content: center; }
  .gb-contact-meta { font-size: 10px !important; max-width: 34ch !important; }
  .site-header { padding: 0 12px; gap: 8px; }
  .brand-text b { font-size: 10px !important; }
  .brand-text small { font-size: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .button, .header-cta, .gb-hero-tags-fx span { transition: none; animation: none !important; }
}


/* ============================================================
   QA REMAINDERS (post PR#5) — metrics/controls, Edge contrast,
   contact center, global chrome clearance
   ============================================================ */
.slide.fit,
.slide {
  /* ensure content never sits under fixed deck-controls */
  padding-bottom: max(var(--chrome-bottom), calc(env(safe-area-inset-bottom, 0px) + 72px)) !important;
}
#inicio.slide .gb-metrics,
#valor.slide .gb-panel-bar,
#contacto.slide .gb-contact-meta {
  margin-bottom: 0 !important;
}

/* Edge follows theme tokens (light paper / dark cinema) — no hard dark lock */
html[data-theme="light"] #valor.slide {
  background: var(--ground, #FAF7F2) !important;
  color: var(--cream, #2A2622) !important;
}
html[data-theme="light"] #valor .gb-valor-panel,
html[data-theme="light"] #valor .gb-loop-card {
  background: var(--grad-panel) !important;
  color: var(--cream) !important;
}

/* ============================================================
   POLISH KEY SLIDES — Bodytone · Route · Career · Exp · Caps · Edu · Contact
   Desktop ~1280×800 + phone. Clear of chrome-bottom.
   ============================================================ */

/* —— 02 BODYTONE: breathing title + solo layout (no right visual) —— */
#sistemas.slide .gb-star {
  gap: clamp(14px, 2.2vh, 22px) !important;
  width: min(100%, var(--max)) !important;
  max-height: var(--slide-inner) !important;
}
#sistemas .gb-star-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(8px, 1.4vh, 14px) !important;
  margin-bottom: clamp(2px, 0.6vh, 8px) !important;
}
#sistemas .gb-star-head .slide-index {
  margin: 0 0 clamp(4px, 0.8vh, 10px) !important;
}
#sistemas .gb-star-head .eyebrow {
  margin: 0 !important;
  letter-spacing: 0.14em !important;
}
#sistemas .gb-star-head h2 {
  margin: clamp(6px, 1vh, 12px) 0 0 !important;
  line-height: 1.02 !important;
  max-width: 22ch;
}
#sistemas .gb-star-lead {
  margin: clamp(10px, 1.6vh, 16px) 0 0 !important;
  max-width: 62ch !important;
  color: #8A8178 !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 1.55 !important;
}
#sistemas .gb-star-grid.is-solo {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#sistemas .gb-star-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.75fr) !important;
  grid-template-areas:
    "badge badge"
    "title metrics"
    "copy metrics"
    "points metrics"
    "tags actions" !important;
  padding: clamp(16px, 2.2vh, 24px) clamp(16px, 2vw, 26px) !important;
  
  overflow: hidden !important;
}
#sistemas .gb-star-badge { grid-area: badge; }
#sistemas .gb-star-main h3 { grid-area: title; margin: 0 !important; }
#sistemas .gb-star-main > p { grid-area: copy; max-width: none !important; }
#sistemas .gb-star-points { grid-area: points; }
#sistemas .gb-star-metrics {
  grid-area: metrics;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-content: start !important;
  align-self: stretch !important;
}
#sistemas .gb-star-metrics > div {
  text-align: left !important;
  padding: 12px 14px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line-dark)) !important;
  background:
    linear-gradient(135deg, rgba(196, 165, 116, 0.08), transparent 55%),
    var(--black-2) !important;
}
#sistemas .tag-row { grid-area: tags; margin-top: 0 !important; }
#sistemas .gb-star-actions { grid-area: actions; margin-top: 0 !important; align-self: end; }
#sistemas .gb-star-ui { display: none !important; }
#sistemas .proof-note {
  margin: clamp(6px, 1vh, 10px) 0 0 !important;
  
}

@media (max-width: 900px) {
  #sistemas .gb-star-main {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "badge"
      "title"
      "copy"
      "points"
      "metrics"
      "tags"
      "actions" !important;
  }
  #sistemas .gb-star-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 560px) {
  #sistemas .gb-star-metrics { grid-template-columns: 1fr !important; }
  #sistemas .gb-star-head h2 { max-width: none; }
}

/* —— 04 ROUTE: gold + ice + sage motion —— */
#ruta.slide {
  gap: clamp(8px, 1.2vh, 14px) !important;
}
#ruta .gb-route-top {
  gap: clamp(8px, 1.2vh, 14px) !important;
  align-items: end !important;
}
#ruta .gb-route-top h2 {
  margin: clamp(6px, 1vh, 12px) 0 0 !important;
}
#ruta .gb-route-lead {
  margin: 0 !important;
}
#ruta .gb-route-map {
  position: relative !important;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line-dark-2)) !important;
  background:
    radial-gradient(ellipse 55% 50% at 50% 54%, rgba(196, 165, 116, 0.1), transparent 62%),
    radial-gradient(ellipse 40% 35% at 78% 22%, rgba(223,219,214,0.08), transparent 60%),
    radial-gradient(ellipse 35% 30% at 18% 84%, rgba(188,184,179,0.1), transparent 55%),
    var(--black-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 48px rgba(0, 0, 0, 0.35);
  
  
}
#ruta .gb-route-glow {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 210deg at 50% 54%,
      rgba(196, 165, 116, 0.07),
      rgba(223,219,214,0.05),
      rgba(188,184,179,0.07),
      rgba(196, 165, 116, 0.07));
  animation: route-spin 28s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}
#ruta .gb-route-legend {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3;
  display: flex !important;
  gap: 6px !important;
}
#ruta .gb-route-legend span {
  padding: 3px 7px !important;
  border: 1px solid var(--line-dark) !important;
  font: 800 9px var(--mono) !important;
  letter-spacing: 0.08em !important;
  background: rgba(6, 7, 10, 0.65) !important;
}
#ruta .gb-route-legend .is-gold { color: var(--gold) !important; border-color: color-mix(in srgb, var(--gold) 45%, transparent) !important; }
#ruta .gb-route-legend .is-ice { color: var(--ice) !important; border-color: color-mix(in srgb, var(--ice) 45%, transparent) !important; }
#ruta .gb-route-legend .is-sage { color: var(--sage) !important; border-color: color-mix(in srgb, var(--sage) 45%, transparent) !important; }
#ruta .gb-hub-ring {
  stroke: color-mix(in srgb, var(--gold) 35%, rgba(244, 243, 238, 0.12)) !important;
  stroke-width: 0.4 !important;
  animation: route-pulse 4.5s ease-in-out infinite;
}
#ruta .gb-hub-ring-2 {
  stroke: color-mix(in srgb, var(--ice) 28%, rgba(244, 243, 238, 0.06)) !important;
  animation-delay: 0.8s;
}
#ruta .gb-spoke {
  stroke: color-mix(in srgb, var(--ice) 35%, rgba(244, 243, 238, 0.22)) !important;
  stroke-dasharray: 2.2 1.4;
  animation: route-dash 2.8s linear infinite;
}
#ruta .gb-spoke.is-origin {
  stroke: var(--sage) !important;
  stroke-width: 0.85 !important;
  stroke-dasharray: 1.8 1.1;
}
#ruta .gb-pin i {
  border-color: color-mix(in srgb, var(--ice) 55%, var(--accent)) !important;
  box-shadow: 0 0 0 3px rgba(223,219,214,0.08);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s;
}
#ruta .gb-pin span {
  border-color: color-mix(in srgb, var(--gold) 20%, var(--line-dark-2)) !important;
  background: rgba(11, 12, 14, 0.92) !important;
  backdrop-filter: blur(8px);
}
#ruta .gb-pin:hover i,
#ruta .gb-pin.active i {
  transform: scale(1.15);
  background: var(--ice) !important;
  box-shadow: 0 0 0 6px rgba(223,219,214,0.16) !important;
}
#ruta .gb-pin.is-core.active i {
  background: var(--gold) !important;
  box-shadow: 0 0 0 7px rgba(196, 165, 116, 0.18) !important;
}
#ruta .gb-pin.is-core b {
  background: var(--gold) !important;
  color: #2A2622 !important;
}
#ruta .gb-city-panel {
  border-color: color-mix(in srgb, var(--gold) 18%, var(--line-dark)) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.06), transparent 40%),
    var(--black-2) !important;
}
#ruta .gb-city-panel > header b { color: var(--gold) !important; }
#ruta .gb-route-strip .gb-strip-item.is-on {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent) !important;
  background: rgba(196, 165, 116, 0.1) !important;
}
#ruta .gb-route-strip .gb-strip-item b { color: var(--gold) !important; }
@keyframes route-spin {
  to { transform: rotate(360deg); }
}
@keyframes route-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #ruta .gb-route-glow,
  #ruta .gb-hub-ring,
  #ruta .gb-spoke { animation: none !important; }
}
#trayectoria .gb-career-panel {
  
  height: var(--slide-inner) !important;
  max-height: var(--slide-inner) !important;
  
  
  
}
#trayectoria .gb-panel-head-compact {
  padding: clamp(10px, 1.5vh, 16px) clamp(14px, 2vw, 22px) clamp(8px, 1.2vh, 12px) !important;
  gap: clamp(6px, 1vh, 10px) !important;
}


#trayectoria .gb-dual {
  
  
  height: auto !important;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
  gap: 0 !important;
}


#trayectoria .gb-engine-list {
  
  
  overflow: hidden !important;
  display: flex !important;
  
}
#trayectoria .gb-engine-list li {
  
  min-height: 52px !important;
  padding: clamp(10px, 1.4vh, 16px) 16px !important;
  
}
#trayectoria .gb-engine-list b {
  font-size: clamp(13px, 1.15vw, 16px) !important;
}


#trayectoria .gb-dual-x {
  font-size: clamp(28px, 3vw, 40px) !important;
  
  
  
  background:
    linear-gradient(180deg, rgba(196, 165, 116, 0.1), rgba(188,184,179,0.08)) !important;
}


@media (max-width: 980px) {
  #trayectoria .gb-career-panel { height: auto !important; max-height: var(--slide-inner) !important; }
  #trayectoria .gb-dual {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }
  #trayectoria .gb-dual-x { display: none !important; }
  #trayectoria .gb-engine-list li { min-height: 44px !important;  }
}  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--black-2) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--line-dark)) !important;
}
#experiencia .gb-panel-head-compact,
#experiencia-2 .gb-panel-head-compact {
  gap: clamp(6px, 1vh, 10px) !important;
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 2vw, 22px) !important;
  flex-shrink: 0 !important;
}
#experiencia .gb-roles,
#experiencia-2 .gb-roles {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
}
#experiencia .gb-role,
#experiencia-2 .gb-role {
  flex: 1 1 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #f4f3ee !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(244, 243, 238, 0.1) !important;
  grid-template-columns: minmax(132px, 160px) minmax(0, 1fr) auto !important;
  align-items: center !important;
}
#experiencia .gb-role:last-child,
#experiencia-2 .gb-role:last-child { border-bottom: 0 !important; }
#experiencia .gb-role-year,
#experiencia-2 .gb-role-year {
  color: #e8e7df !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border-right-color: rgba(196, 165, 116, 0.22) !important;
}
#experiencia .gb-role-co,
#experiencia-2 .gb-role-co { color: var(--gold) !important; }
#experiencia .gb-role-title,
#experiencia-2 .gb-role-title {
  color: #FFFEFB !important;
  font-size: clamp(15px, 1.45vw, 21px) !important;
  line-height: 1.2 !important;
}
#experiencia .gb-role-sum,
#experiencia-2 .gb-role-sum {
  color: #c8c7bc !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 56ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#experiencia .gb-role-go,
#experiencia-2 .gb-role-go {
  color: var(--gold) !important;
  opacity: 0.9 !important;
  font-size: 11px !important;
}
#experiencia .gb-role.is-featured,
#experiencia-2 .gb-role.is-featured {
  background: rgba(196, 165, 116, 0.06) !important;
  box-shadow: inset 3px 0 0 var(--gold) !important;
}
#experiencia .gb-panel-bar,
#experiencia-2 .gb-panel-bar {
  flex-shrink: 0 !important;
  min-height: 42px !important;
  z-index: 2;
  position: relative;
}

@media (max-height: 800px) {
  #experiencia .gb-role,
  #experiencia-2 .gb-role {
    min-height: 72px !important;
    padding: 10px 14px !important;
  }
  #experiencia .gb-role-sum,
  #experiencia-2 .gb-role-sum {
    -webkit-line-clamp: 1;
  }
}
@media (max-width: 760px) {
  #experiencia .gb-role,
  #experiencia-2 .gb-role {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  #experiencia .gb-role-year,
  #experiencia-2 .gb-role-year {
    flex-direction: row !important;
    justify-content: flex-start !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 6px 0 8px !important;
    background: transparent !important;
    gap: 10px !important;
  }
  #experiencia .gb-role-go,
  #experiencia-2 .gb-role-go { justify-self: start; }
  #experiencia .gb-roles,
  #experiencia-2 .gb-roles { min-height: 0 !important; }
}

/* —— 10 CAPACIDADES: air in title + polished cards —— */
#capacidades.slide {
  gap: clamp(10px, 1.6vh, 16px) !important;
}
#capacidades .gb-caps-top {
  gap: clamp(10px, 1.5vh, 16px) !important;
  
}
#capacidades .gb-caps-top .eyebrow {
  margin: 0 0 clamp(6px, 1vh, 10px) !important;
}
#capacidades .gb-caps-top h2 {
  
  line-height: 1.02 !important;
  padding-top: clamp(2px, 0.4vh, 6px) !important;
}
#capacidades .gb-caps-lead {
  margin: 0 !important;
  color: #8A8178 !important;
  line-height: 1.5 !important;
}
#capacidades .gb-caps-grid {
  gap: 10px !important;
}
#capacidades .gb-cap {
  
  padding: clamp(12px, 1.6vh, 18px) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 14%, var(--line-dark)) !important;
  background:
    linear-gradient(160deg, rgba(196, 165, 116, 0.05), transparent 45%),
    var(--black-2) !important;
  border-radius: 6px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
#capacidades .gb-cap:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--line-dark)) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
#capacidades .gb-cap.is-human {
  border-color: color-mix(in srgb, var(--sage) 40%, transparent) !important;
  background:
    linear-gradient(160deg, rgba(188,184,179,0.12), transparent 50%),
    var(--black-2) !important;
}
#capacidades .gb-cap h3 {
  font-size: clamp(15px, 1.35vw, 18px) !important;
}
#capacidades .gb-cap-bar {
  height: 5px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08) !important;
}
#capacidades .gb-cap-bar i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 40%, var(--ice))) !important;
}
#capacidades .gb-academy {
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--sage) 40%, transparent) !important;
}

/* —— 11 EDUCATION: dark gold cinema family —— */
#formacion.slide,
.gb-edu-slide {
  justify-content: center !important;
  align-items: stretch !important;
  background: var(--bg) !important;
  color: var(--white) !important;
}
#formacion .gb-edu-panel {
  
  max-height: var(--slide-inner) !important;
  height: auto !important;
  
  
  
  border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--line-dark)) !important;
  border-radius: 6px !important;
  
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
#formacion .gb-edu-head {
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 2vw, 22px) !important;
  gap: clamp(6px, 1vh, 10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.05), transparent);
}
#formacion .gb-edu-head h2 {
  color: #FFFEFB !important;
  margin: clamp(4px, 0.8vh, 8px) 0 0 !important;
  line-height: 1.02 !important;
}
#formacion .gb-edu-grid,
#formacion .education-layout,
#formacion .compact-edu {
  display: grid !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#formacion .builder-note {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(160deg, rgba(196, 165, 116, 0.07), transparent 50%),
    transparent !important;
  padding: clamp(14px, 2vh, 22px) !important;
}
#formacion .builder-note > span {
  color: var(--gold) !important;
  font: 800 10px var(--mono) !important;
  letter-spacing: 0.14em !important;
}
#formacion .builder-note > strong {
  color: var(--ice) !important;
  margin-top: 12px !important;
}
#formacion .builder-note h2 { display: none; } /* moved to head */
#formacion .builder-note p { display: none; }
#formacion .builder-note li {
  color: #d4d3cb !important;
  border-left: 2px solid color-mix(in srgb, var(--gold) 50%, transparent);
  padding-left: 10px;
}
#formacion .education-list {
  padding: clamp(14px, 2vh, 22px) !important;
}
#formacion .education-list .eyebrow {
  color: var(--gold) !important;
}
#formacion .education-list li {
  border-bottom: 1px solid rgba(255, 255, 238, 0.1) !important;
  color: #e8e7df !important;
  min-height: 40px !important;
}
#formacion .education-list li b {
  color: var(--gold) !important;
}
/* languages moved */

@media (max-width: 900px) {
  #formacion .gb-edu-grid,
  #formacion .education-layout,
  #formacion .compact-edu {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }
  #formacion .builder-note {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* —— 12 CONTACT: premium centered —— */
#contacto.slide {
  
  align-items: center !important;
}
#contacto .gb-contact-inner {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  padding: clamp(18px, 3vh, 36px) clamp(16px, 3vw, 28px) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(196, 165, 116, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(223,219,214,0.05), transparent 55%),
    var(--black-2) !important;
  gap: clamp(10px, 1.6vh, 18px) !important;
}
#contacto .gb-contact-kicker {
  letter-spacing: 0.2em !important;
  font-size: 12px !important;
}
#contacto .gb-contact-rule {
  width: 56px;
}
#contacto h2 {
  font-size: clamp(48px, 9vw + 1vh, 104px) !important;
}
#contacto .gb-contact-sub {
  font-size: clamp(14px, 1.3vw, 17px) !important;
  letter-spacing: 0.04em;
}
#contacto .gb-contact-actions {
  margin-top: clamp(4px, 0.8vh, 10px) !important;
  gap: 10px !important;
}
#contacto .gb-contact-actions .button {
  min-height: 46px !important;
  padding: 0 18px !important;
}
#contacto .gb-contact-actions .button.primary {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent), 0 10px 28px rgba(196, 165, 116, 0.18);
}
#contacto .gb-contact-docs {
  gap: 8px !important;
  opacity: 0.95;
}
#contacto .gb-contact-meta {
  
  
  justify-content: center !important;
  
  max-width: 58ch !important;
  font: 800 10px/1.6 var(--mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
#contacto .gb-contact-meta a {
  color: #c8c7bc !important;
  text-decoration: none;
  
}
#contacto .gb-contact-meta a:hover {
  color: var(--gold) !important;
  border-bottom-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
#contacto .gb-contact-meta span {
  color: #8a8980 !important;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
}

@media (max-width: 640px) {
  #contacto .gb-contact-inner {
    padding: 16px 14px !important;
    border-radius: 6px !important;
  }
  #contacto .gb-contact-actions .button,
  #contacto .gb-contact-docs .button {
    width: 100%;
    justify-content: center;
  }
  #contacto .gb-contact-meta { gap: 6px 10px !important; font-size: 9px !important; }
}

/* Keep formacion in fit shells list */
.gb-edu-panel {
  width: min(100%, var(--max)) !important;
  max-height: var(--slide-inner) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}


/* ============================================================
   RHYTHM PASS v2x6 — shared title band · Bodytone CTAs · Live air
   · Route dynamics · Exp visibility · Cover · Contact bottom CTAs
   LinkedIn sync blocked (auth wall) — Experience copy unchanged.
   ============================================================ */

:root {
  --title-band-pad-top: 0px;
  --title-index-mb: 8px;
  --title-eyebrow-mb: 8px;
  
  --title-lead-mt: 12px;
  --panel-inset: 16px;
  --chrome-bottom: 96px; /* stronger clearance above deck-controls */
}

/* —— GLOBAL: shared header band (same vertical rhythm) —— */
.gb-title-band,
.gb-star-head,
.gb-demos-head,
.gb-panel-head,
.gb-panel-head-compact,
.gb-route-top,
.gb-method-top,
.gb-caps-top,
.gb-valor-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  padding-top: var(--title-band-pad-top) !important;
  min-height: 0 !important;
}

/* Two-column tops (route/method/caps): keep title block left, lead right */
.gb-route-top.gb-title-band,
.gb-method-top.gb-title-band,
.gb-caps-top.gb-title-band {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.85fr) !important;
  gap: clamp(12px, 2vw, 28px) !important;
  align-items: end !important;
}

.gb-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100%;
}

.slide .slide-index,
.gb-title-band > .slide-index,
.gb-title-block > .slide-index,
.gb-panel-head .slide-index,
.gb-star-head .slide-index,
.gb-demos-head .slide-index,
.gb-valor-head .slide-index {
  margin: 0 0 var(--title-index-mb) !important;
  padding: 0 !important;
  min-height: 18px !important;
  line-height: 1 !important;
}

.slide .eyebrow,
.gb-title-band > .eyebrow,
.gb-title-block > .eyebrow,
.gb-panel-head .eyebrow,
.gb-star-head .eyebrow,
.gb-demos-head .eyebrow,
.gb-kicker.eyebrow {
  margin: 0 0 var(--title-eyebrow-mb) !important;
  padding: 0 !important;
  min-height: 16px !important;
  line-height: 1.2 !important;
}

.gb-title-band h2,
.gb-title-block h2,
.gb-star-head h2,
.gb-demos-head h2,
.gb-panel-head h2,
.gb-route-top h2,
.gb-method-top h2,
.gb-caps-top h2,
.gb-valor-head h2 {
  margin: var(--title-h2-mb) 0 0 !important;
  padding-top: 0 !important;
}

.gb-star-lead,
.gb-demos-lead,
.gb-route-lead,
.gb-method-lead,
.gb-caps-lead,
.gb-panel-lead {
  margin-top: var(--title-lead-mt) !important;
  margin-bottom: 0 !important;
}

/* Safe inner padding: never flush to panel/frame edge */
.gb-star-main,
.gb-demo-card,
.gb-exp-panel,
.gb-panel,
.gb-contact-inner,
.gb-city-panel {
  box-sizing: border-box !important;
}

.gb-star-main,
.gb-demo-card,
.gb-city-panel {
  padding: var(--panel-inset) !important;
}

/* —— 00 COVER: title rhythm + metrics clear of chrome —— */
#inicio.slide {
  justify-content: center !important;
  padding-bottom: calc(var(--chrome-bottom) + 8px) !important;
}
#inicio .gb-hero-title-band {
  width: 100%;
  margin-bottom: clamp(4px, 0.8vh, 10px) !important;
}
#inicio .gb-hero-index {
  color: #c8c7bc !important;
}
#inicio .gb-hero-stack {
  gap: clamp(10px, 1.6vh, 18px) !important;
  padding-bottom: 8px !important;
  max-height: calc(var(--slide-inner) - 8px) !important;
}
#inicio .gb-metrics {
  margin-top: clamp(4px, 0.8vh, 10px) !important;
  margin-bottom: 0 !important;
  padding-bottom: 2px !important;
  position: relative;
  z-index: 3;
}
#inicio .gb-metrics > div {
  padding: clamp(8px, 1.2vh, 14px) 14px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line-dark)) !important;
  background:
    linear-gradient(160deg, rgba(196, 165, 116, 0.07), transparent 50%),
    rgba(11, 12, 14, 0.85) !important;
  backdrop-filter: blur(8px);
}
#inicio .gb-hero-copy h1 {
  margin-top: clamp(6px, 1vh, 12px) !important;
}

/* —— 02 BODYTONE: buttons not flush to frame; clear chrome-bottom —— */
#sistemas.slide {
  justify-content: flex-start !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#sistemas .gb-star {
  gap: clamp(12px, 1.8vh, 18px) !important;
  justify-content: flex-start !important;
  max-height: calc(var(--slide-inner) - 6px) !important;
}
#sistemas .gb-star-head {
  margin-bottom: 0 !important;
  gap: 0 !important;
}
#sistemas .gb-star-head h2 {
  margin-top: 0 !important;
}
#sistemas .gb-star-lead {
  margin-top: var(--title-lead-mt) !important;
}
#sistemas .gb-star-main {
  padding: clamp(16px, 2.2vh, 24px) clamp(16px, 2vw, 26px) clamp(18px, 2.4vh, 28px) !important;
  gap: clamp(10px, 1.5vh, 16px) clamp(18px, 2.4vw, 28px) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--line-dark)) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(196, 165, 116, 0.07), transparent 55%),
    var(--black-2) !important;
}
#sistemas .gb-star-actions {
  grid-area: actions !important;
  align-self: end !important;
  justify-self: stretch !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
  padding: 4px 0 2px !important;
  min-height: 48px !important;
}
#sistemas .gb-star-actions .button {
  min-height: 44px !important;
  padding: 0 16px !important;
}
#sistemas .tag-row {
  align-self: end !important;
  margin: 4px 0 0 !important;
  padding-bottom: 2px !important;
}
#sistemas .proof-note {
  margin: clamp(8px, 1.2vh, 12px) 0 0 !important;
  padding: 0 2px !important;
}

/* —— 03 LIVE / DEMOS: more air + aligned titles —— */
#demos.slide {
  justify-content: flex-start !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#demos .gb-demos {
  gap: clamp(14px, 2.2vh, 22px) !important;
  justify-content: flex-start !important;
  max-height: calc(var(--slide-inner) - 6px) !important;
}
#demos .gb-demos-head {
  gap: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}
#demos .gb-demos-head h2 {
  margin-top: 0 !important;
  max-width: 18ch;
}
#demos .gb-demos-lead {
  margin-top: var(--title-lead-mt) !important;
  max-width: 62ch !important;
  color: #8A8178 !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 1.55 !important;
}
#demos .gb-demos-grid {
  gap: clamp(12px, 1.8vw, 18px) !important;
  
  
}
#demos .gb-demo-card {
  
  
  gap: 10px !important;
  padding: clamp(16px, 2vh, 22px) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 14%, var(--line-dark)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.06), transparent 42%),
    var(--black-2) !important;
  
}
#demos .gb-demo-card h3 {
  margin: 2px 0 0 !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
}
#demos .gb-demo-card > p {
  margin: 0 !important;
  color: #c8c7bc !important;
  line-height: 1.45 !important;
  flex: 1 1 auto;
}
#demos .gb-demo-actions {
  margin-top: auto !important;
  padding-top: 8px !important;
}
#demos .gb-demo-actions .button {
  min-height: 42px !important;
}
#demos .gb-demos-foot {
  margin-top: clamp(6px, 1vh, 12px) !important;
  padding: 12px 14px !important;
  min-height: 44px !important;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line-dark)) !important;
  background: rgba(196, 165, 116, 0.04) !important;
}

/* —— 04 ROUTE: push color/dynamics without breaking fit —— */
#ruta.slide {
  justify-content: flex-start !important;
  gap: clamp(10px, 1.4vh, 16px) !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#ruta .gb-route-top {
  width: min(100%, var(--max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#ruta .gb-route-top h2 {
  margin-top: 0 !important;
  line-height: 1.02 !important;
}
#ruta .gb-route-lead {
  
  align-self: end !important;
  color: #8A8178 !important;
  line-height: 1.5 !important;
}
#ruta .gb-route-map {
  border-color: color-mix(in srgb, var(--gold) 26%, var(--line-dark-2)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 0 1px color-mix(in srgb, var(--ice) 8%, transparent),
    0 22px 56px rgba(0, 0, 0, 0.4) !important;
  background:
    radial-gradient(ellipse 58% 52% at 50% 54%, rgba(196, 165, 116, 0.14), transparent 62%),
    radial-gradient(ellipse 42% 36% at 78% 20%, rgba(223,219,214,0.11), transparent 60%),
    radial-gradient(ellipse 36% 32% at 16% 86%, rgba(188,184,179,0.12), transparent 55%),
    var(--black-2) !important;
}
#ruta .gb-route-glow {
  opacity: 1 !important;
  animation: route-spin 22s linear infinite !important;
  filter: saturate(1.15);
}
#ruta .gb-hub-ring {
  stroke-width: 0.55 !important;
  animation: route-pulse 3.6s ease-in-out infinite !important;
}
#ruta .gb-spoke {
  stroke-width: 0.55 !important;
  animation: route-dash 2.2s linear infinite !important;
}
#ruta .gb-pin span {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
#ruta .gb-city-panel {
  
  border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line-dark)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(160deg, rgba(223,219,214,0.06), transparent 45%),
    var(--black-2) !important;
}
#ruta .gb-route-strip {
  padding: 8px 2px 2px !important;
}

/* —— EXPERIENCIA I/II: layout/visibility only (facts unchanged) —— */
#experiencia.slide,
#experiencia-2.slide {
  justify-content: flex-start !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#experiencia .gb-exp-panel,
#experiencia-2 .gb-exp-panel {
  padding: 0 !important;
  border-radius: 8px !important;
  max-height: calc(var(--slide-inner) - 6px) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}
#experiencia .gb-panel-head-compact,
#experiencia-2 .gb-panel-head-compact {
  padding: clamp(14px, 1.8vh, 20px) clamp(16px, 2vw, 24px) clamp(10px, 1.2vh, 14px) !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(244, 243, 238, 0.08) !important;
}
#experiencia .gb-panel-lead,
#experiencia-2 .gb-panel-lead {
  margin-top: var(--title-lead-mt) !important;
  color: #8A8178 !important;
}
#experiencia .gb-roles,
#experiencia-2 .gb-roles {
  min-height: 240px !important;
  padding: 0 !important;
}
#experiencia .gb-role,
#experiencia-2 .gb-role {
  transition: background 0.18s var(--ease), box-shadow 0.18s;
}
#experiencia .gb-role:hover,
#experiencia-2 .gb-role:hover {
  background: rgba(196, 165, 116, 0.05) !important;
}
#experiencia .gb-role-year,
#experiencia-2 .gb-role-year {
  padding: 10px 12px !important;
  border-radius: 6px 0 0 6px;
  min-height: 100%;
}
#experiencia .gb-role-dates,
#experiencia-2 .gb-role-dates {
  color: #e8e7df !important;
  font: 800 11px/1.25 var(--mono) !important;
  letter-spacing: 0.06em !important;
}
#experiencia .gb-role-idx,
#experiencia-2 .gb-role-idx {
  color: var(--gold) !important;
  opacity: 0.9;
}
#experiencia .gb-role-title,
#experiencia-2 .gb-role-title {
  font-size: clamp(16px, 1.5vw, 22px) !important;
  letter-spacing: -0.01em;
}
#experiencia .gb-role-sum,
#experiencia-2 .gb-role-sum {
  margin-top: 4px !important;
  -webkit-line-clamp: 2;
  color: #d2d1c8 !important;
}
#experiencia .gb-role-tag,
#experiencia-2 .gb-role-tag {
  border-color: color-mix(in srgb, var(--gold) 35%, transparent) !important;
  color: var(--gold) !important;
  background: rgba(196, 165, 116, 0.08) !important;
}
#experiencia .gb-panel-bar,
#experiencia-2 .gb-panel-bar {
  min-height: 48px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(196, 165, 116, 0.16) !important;
}

/* —— 12 CONTACT: primary CTAs along bottom of content (above chrome) —— */
#contacto.slide {
  justify-content: stretch !important;
  align-items: stretch !important;
  padding-bottom: calc(var(--chrome-bottom) + 8px) !important;
}
#contacto .gb-contact-inner {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  
  max-height: calc(var(--slide-inner) - 8px) !important;
  
  align-items: center !important;
  gap: clamp(16px, 3vh, 32px) !important;
  padding: clamp(20px, 3vh, 36px) clamp(18px, 3vw, 32px) clamp(16px, 2.2vh, 24px) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line-dark)) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196, 165, 116, 0.11), transparent 58%),
    radial-gradient(ellipse 45% 40% at 85% 100%, rgba(223,219,214,0.06), transparent 55%),
    var(--black-2) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
#contacto .gb-contact-top {
  
  
  align-items: center !important;
  gap: clamp(10px, 1.6vh, 16px) !important;
  width: 100%;
  flex: 1 1 auto;
  justify-content: center !important;
  text-align: center !important;
}
#contacto .gb-contact-title-band {
  align-items: center !important;
  width: 100%;
}
#contacto .gb-contact-title-band .slide-index {
  justify-content: center;
}
#contacto .gb-contact-rule {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ice));
  border-radius: 999px;
  margin: 0 auto;
}
#contacto h2 {
  font-size: clamp(52px, 9vw + 1vh, 108px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.045em !important;
  
}
#contacto .gb-contact-sub {
  margin: 0 !important;
  color: #c8c7bc !important;
}
#contacto .gb-contact-meta {
  margin-top: clamp(8px, 1.4vh, 16px) !important;
  max-width: 60ch !important;
}
#contacto .gb-contact-bottom {
  width: 100% !important;
  flex-shrink: 0 !important;
  
  flex-direction: column !important;
  
  gap: 10px !important;
  padding-top: clamp(8px, 1.2vh, 14px) !important;
  border-top: 1px solid rgba(244, 243, 238, 0.1);
  margin-top: auto !important;
}
#contacto .gb-contact-actions,
#contacto .gb-contact-docs {
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}
#contacto .gb-contact-actions .button {
  min-height: 48px !important;
  padding: 0 20px !important;
  font-weight: 800 !important;
}
#contacto .gb-contact-actions .button.primary {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
    0 12px 32px rgba(196, 165, 116, 0.2);
}
#contacto .gb-contact-docs .button {
  min-height: 42px !important;
  opacity: 0.95;
}

@media (max-width: 900px) {
  .gb-route-top.gb-title-band,
  .gb-method-top.gb-title-band,
  .gb-caps-top.gb-title-band {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  #ruta .gb-route-lead,
  #metodo .gb-method-lead,
  #capacidades .gb-caps-lead {
    margin-top: var(--title-lead-mt) !important;
  }
}
@media (max-width: 640px) {
  :root { --chrome-bottom: 100px; --panel-inset: 14px; }  --title-eyebrow-mb: 6px;
    --title-lead-mt: 8px;
    --chrome-bottom: 88px;
  }
  #demos .gb-demo-card { padding: 14px !important; gap: 8px !important; }
  #experiencia .gb-role,
  #experiencia-2 .gb-role { min-height: 78px !important; padding: 12px 14px !important; }
}
@media (prefers-reduced-motion: reduce) {atches other slides; bar clear of --chrome-bottom.
   ============================================================ */
.gb-valor-slide,
#valor.slide {
  justify-content: stretch !important;
  
  padding:
    var(--slide-pad-top)
    max(var(--pad), 16px)
    calc(var(--chrome-bottom) + 8px)
    max(var(--pad), 16px) !important;
}

#valor .gb-valor-panel,
.gb-valor-slide > .gb-valor-panel {
  width: 100% !important;
  max-width: min(100%, var(--max)) !important;
  height: calc(var(--slide-inner) - 8px) !important;
  max-height: calc(var(--slide-inner) - 8px) !important;
  
  
  
  flex-direction: column !important;
  justify-content: stretch !important;
  
  
  box-sizing: border-box !important;
  background: var(--grad-panel) !important;
  border: 1px solid var(--gold-line) !important;
  
  box-shadow: var(--shadow-panel) !important;
}

#valor .gb-valor-head {
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding:
    clamp(14px, 2vh, 22px)
    clamp(16px, 2.2vw, 28px)
    clamp(12px, 1.5vh, 18px) !important;
  border-bottom: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.06), transparent) !important;
}

#valor .gb-valor-index,
#valor .gb-valor-head .slide-index {
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 0 var(--title-index-mb) !important;
}

#valor .gb-valor-head .eyebrow {
  margin: 0 0 var(--title-eyebrow-mb) !important;
  
  font: 800 11px/1.2 var(--mono) !important;
  letter-spacing: 0.14em !important;
}

#valor .gb-valor-head h2 {
  margin: var(--title-h2-mb) 0 0 !important;
  max-width: 26ch !important;
  font-size: clamp(26px, 3.2vw + 0.85vh, 48px) !important;
  line-height: 0.94 !important;
  
}

#valor .gb-valor-head h2 em {
  color: var(--gold) !important;
  
}

#valor .gb-valor-head .gb-panel-lead {
  margin: var(--title-lead-mt) 0 0 !important;
  margin-left: 0 !important;
  max-width: 58ch !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  
  
}

#valor .gb-loop,
#valor [data-valor-loop] {
  flex: 1 1 auto !important;
  
  
  
  grid-template-rows: 1fr !important;
  align-content: stretch !important;
  
  
}

#valor .gb-loop-card,
#valor [data-valor-loop] article {
  min-height: 0 !important;
  
  padding: clamp(16px, 2.4vh, 28px) clamp(14px, 1.7vw, 24px) !important;
  
  
  gap: clamp(6px, 1vh, 12px) !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 50%),
    rgba(0, 0, 0, 0.22) !important;
  
}

#valor .gb-loop-card:last-child,
#valor [data-valor-loop] article:last-child {
  border-right: 0 !important;
}

#valor .gb-loop-card.is-end {
  background:
    linear-gradient(165deg, rgba(188,184,179,0.12), transparent 50%),
    rgba(0, 0, 0, 0.22) !important;
}

#valor .gb-loop-num {
  font: 800 clamp(11px, 1vw, 13px)/1 var(--mono) !important;
  
}

#valor .gb-loop-label {
  font: 800 clamp(9px, 0.85vw, 11px)/1 var(--mono) !important;
  
  color: var(--ice) !important;
}

#valor .gb-loop-card h3,
#valor [data-valor-loop] h3 {
  margin: 4px 0 0 !important;
  font-size: clamp(15px, 1.3vw + 0.45vh, 22px) !important;
  line-height: 1.15 !important;
  color: var(--cream) !important;
}

#valor .gb-loop-card p,
#valor [data-valor-loop] p {
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-size: clamp(12px, 1.05vw, 15px) !important;
  line-height: 1.4 !important;
  color: var(--mute-2) !important;
  display: block !important;
}

#valor .gb-panel-bar {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  
  min-height: 48px !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  background: rgba(196, 165, 116, 0.08) !important;
  border-top: 1px solid var(--gold-line) !important;
  
  position: relative !important;
  z-index: 3 !important;
  font: 800 clamp(11px, 1vw, 13px)/1 var(--mono) !important;
  
}

/* Phone / narrow: 2×2 grid still fills remaining height */
@media (max-width: 980px) {
  #valor .gb-loop,
  #valor [data-valor-loop] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  #valor .gb-loop-card:nth-child(2n) {
    border-right: 0 !important;
  }
  #valor .gb-loop-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line) !important;
  }
  #valor .gb-valor-panel,
  .gb-valor-slide > .gb-valor-panel {
    height: calc(var(--slide-inner) - 4px) !important;
    max-height: calc(var(--slide-inner) - 4px) !important;
  }
}

@media (max-width: 640px) {
  #valor.slide {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #valor .gb-valor-head {
    padding: 12px 14px 10px !important;
  }
  #valor .gb-valor-head h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    max-width: none !important;
  }
  #valor .gb-loop-card,
  #valor [data-valor-loop] article {
    padding: 12px 12px !important;
    gap: 6px !important;
  }
  #valor .gb-panel-bar {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
}

/* Keep fill quality at 1280×800 — do not densify-to-void */
@media (max-height: 800px) {
  #valor .gb-valor-head {
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 2vw, 24px) clamp(10px, 1.3vh, 14px) !important;
  }
  #valor .gb-valor-head h2 {
    font-size: clamp(24px, 3vw + 0.6vh, 40px) !important;
  }
  #valor .gb-loop-card,
  #valor [data-valor-loop] article {
    padding: clamp(12px, 1.8vh, 20px) clamp(12px, 1.4vw, 18px) !important;
  }
  #valor .gb-loop-card p,
  #valor [data-valor-loop] p {
    display: block !important;
  }
}

@media (max-height: 700px) {
  #valor .gb-valor-head .gb-panel-lead {
    font-size: 12px !important;
  }
  #valor .gb-loop-card p,
  #valor [data-valor-loop] p {
    font-size: 11px !important;
  }
}

/* ============================================================
   DECK SPACE CINEMA — whole-deck redesign (deck-space-cinema)
   More air under header · fuller panels · Method gold restyle
   Scroll OK when content needs it — never leave tiny unused voids.
   ============================================================ */

:root {
  --slide-pad-top: calc(var(--header) + 28px) !important;
  --title-band-pad-top: 6px;
  --title-index-mb: 10px;
  --title-eyebrow-mb: 10px;
  --title-lead-mt: 14px;
  --chrome-bottom: 100px;
  --slide-inner: calc(100svh - var(--slide-pad-top) - var(--chrome-bottom));
  --panel-inset: 18px;
}

.slide,
.slide.fit {
  padding-top: var(--slide-pad-top) !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
  
  gap: clamp(12px, 1.8vh, 20px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* scroll only if content truly needs it */
}

.gb-title-band,
.gb-star-head,
.gb-demos-head,
.gb-panel-head,
.gb-panel-head-compact,
.gb-route-top,
.gb-method-top,
.gb-caps-top,
.gb-valor-head,
.gb-line-head,
.gb-hero-title-band {
  padding-top: var(--title-band-pad-top) !important;
}

.slide h2 {
  font-size: clamp(26px, 3.2vw + 0.7vh, 48px) !important;
  line-height: 0.96 !important;
  
}

/* Shared inner shells: prefer near-full slide height */
.gb-hero-stack,
.gb-valor-panel,
.gb-star,
.gb-demos,
.gb-career-panel,
.gb-exp-panel,
.gb-edu-panel,
.gb-contact-inner {
  width: min(100%, var(--max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
   /* don't artificially crush */
  min-height: min(var(--slide-inner), 100%) !important;
}

/* ============================================================
   00 COVER — spectacular cinema
   ============================================================ */
#inicio.slide {
  justify-content: flex-start !important;
  padding-top: calc(var(--header) + 32px) !important;
  padding-bottom: calc(var(--chrome-bottom) + 10px) !important;
  position: relative; /* ambient contained */
}
#inicio .gb-hero-ambient {
  opacity: 1 !important;
  pointer-events: none;
}
#inicio .gb-hero-orb {
  filter: blur(40px) saturate(1.2);
  opacity: 0.55 !important;
}
#inicio .gb-hero-orb-a {
  background: radial-gradient(circle, rgba(196, 165, 116, 0.45), transparent 70%) !important;
}
#inicio .gb-hero-orb-b {
  background: radial-gradient(circle, rgba(223,219,214,0.28), transparent 70%) !important;
}
#inicio .gb-hero-orb-c {
  background: radial-gradient(circle, rgba(188,184,179,0.22), transparent 70%) !important;
}
#inicio .gb-hero-stack {
  width: min(100%, var(--max)) !important;
  min-height: calc(var(--slide-inner) - 12px) !important;
  
  
  
  gap: clamp(16px, 2.4vh, 28px) !important;
  padding: clamp(8px, 1.2vh, 16px) 0 clamp(6px, 1vh, 12px) !important;
  z-index: 2;
}
#inicio .gb-hero-grid {
  flex: 1 1 auto !important;
  
  gap: clamp(18px, 2.5vw, 36px) !important;
}
#inicio .gb-hero-title-band {
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
}
#inicio .gb-hero-copy h1 {
  font-size: clamp(42px, 6.2vw + 1.4vh, 92px) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.045em !important;
  margin: clamp(10px, 1.6vh, 18px) 0 clamp(12px, 1.8vh, 20px) !important;
  text-shadow: 0 0 40px rgba(196, 165, 116, 0.12);
}
#inicio .gb-hero-copy h1 em {
  color: var(--gold) !important;
  font-style: italic !important;
}
#inicio .gb-lead {
  font-size: clamp(15px, 1.25vw + 0.35vh, 19px) !important;
  
  
  color: #d2d1c8 !important;
  margin-bottom: clamp(14px, 2vh, 22px) !important;
}
#inicio .gb-actions {
  gap: 10px !important;
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
}
#inicio .gb-actions .button {
  min-height: 46px !important;
  padding: 0 18px !important;
  font-weight: 800 !important;
}
#inicio .gb-actions .button.primary {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
    0 14px 36px rgba(196, 165, 116, 0.22) !important;
}
#inicio .gb-hero-proof {
  font-size: 10px !important;
  
  color: #8a8980 !important;
  opacity: 1 !important;
}
#inicio .gb-card {
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-dark)) !important;
  
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(196, 165, 116, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(223,219,214,0.08), transparent 50%),
    rgba(11, 12, 14, 0.92) !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px);
  min-height: 100% !important;
}
#inicio .gb-card-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(196, 165, 116, 0.18) !important;
  background: rgba(196, 165, 116, 0.06) !important;
}
#inicio .gb-card-body {
  flex: 1 1 auto !important;
  padding: clamp(16px, 2.2vh, 24px) 16px !important;
  
}
#inicio .gb-card-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  
  letter-spacing: -0.03em !important;
}
#inicio .gb-card-list {
  margin-top: auto !important;
  
}
#inicio .gb-card-list li {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  
  grid-template-columns: 36px 1fr !important;
  
  
}
#inicio .gb-card-list li span {
  color: var(--gold) !important;
  font: 800 12px var(--mono) !important;
}
#inicio .gb-metrics {
  flex-shrink: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: auto !important;
}
#inicio .gb-metrics > div {
  min-height: 72px !important;
  padding: clamp(12px, 1.6vh, 18px) 14px !important;
  
  
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.1), transparent 55%),
    rgba(11, 12, 14, 0.88) !important;
  
  
  
}
#inicio .gb-metrics strong {
  font-size: clamp(26px, 2.6vw + 0.8vh, 40px) !important;
  line-height: 1 !important;
}
#inicio .gb-metrics span {
  color: #a8a79d !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#inicio .gb-hero-tags-fx span {
  opacity: 0.35 !important;
  border-color: color-mix(in srgb, var(--gold) 30%, transparent) !important;
}

/* ============================================================
   01 EDGE — reinforce full panel (already shipped; keep air)
   ============================================================ */
#valor.slide {
  padding-top: var(--slide-pad-top) !important;
}
#valor .gb-valor-panel {
  min-height: calc(var(--slide-inner) - 10px) !important;
  height: calc(var(--slide-inner) - 10px) !important;
}

/* ============================================================
   02 BODYTONE — fuller star panel
   ============================================================ */
#sistemas.slide {
  justify-content: flex-start !important;
  padding-bottom: calc(var(--chrome-bottom) + 8px) !important;
}
#sistemas .gb-star {
  width: min(100%, var(--max)) !important;
  
  
  gap: clamp(14px, 2vh, 22px) !important;
  justify-content: flex-start !important;
}
#sistemas .gb-star-head h2 {
  font-size: clamp(28px, 3.4vw + 0.8vh, 52px) !important;
  max-width: 22ch !important;
}
#sistemas .gb-star-lead {
  font-size: clamp(14px, 1.2vw, 17px) !important;
  max-width: 62ch !important;
  
}
#sistemas .gb-star-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#sistemas .gb-star-main {
  min-height: 100% !important;
  padding: clamp(20px, 2.6vh, 32px) clamp(18px, 2.2vw, 30px) !important;
  
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, rgba(196, 165, 116, 0.1), transparent 58%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(223,219,214,0.06), transparent 50%),
    var(--black-2) !important;
  
}
#sistemas .gb-star-main h3 {
  font-size: clamp(20px, 1.8vw, 28px) !important;
}
#sistemas .gb-star-actions .button {
  min-height: 46px !important;
}

/* ============================================================
   03 LIVE / DEMOS — larger cards
   ============================================================ */
#demos.slide {
  justify-content: flex-start !important;
}
#demos .gb-demos {
  width: min(100%, var(--max)) !important;
  
  gap: clamp(16px, 2.2vh, 24px) !important;
}
#demos .gb-demos-head h2 {
  font-size: clamp(28px, 3.4vw + 0.8vh, 50px) !important;
}
#demos .gb-demos-grid {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  
  gap: clamp(14px, 2vw, 20px) !important;
}
#demos .gb-demo-card {
  min-height: 100% !important;
  padding: clamp(18px, 2.4vh, 26px) !important;
  
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.08), transparent 45%),
    var(--black-2) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}
#demos .gb-demo-card h3 {
  font-size: clamp(20px, 1.8vw, 26px) !important;
}
#demos .gb-demo-card > p {
  font-size: clamp(13px, 1.1vw, 16px) !important;
  line-height: 1.5 !important;
}
#demos .gb-demos-foot {
  min-height: 48px !important;
  padding: 14px 16px !important;
}

/* ============================================================
   04 ROUTE — map fills remaining height
   ============================================================ */
#ruta.slide {
  justify-content: flex-start !important;
  
}
#ruta .gb-route-top {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
}
#ruta .gb-route-top h2 {
  font-size: clamp(28px, 3.4vw + 0.8vh, 50px) !important;
}
#ruta .gb-route-body {
  width: min(100%, var(--max)) !important;
  min-height: min(420px, calc(var(--slide-inner) - 180px)) !important;
  
  
}
#ruta .gb-route-map {
  min-height: 280px !important;
  
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-dark)) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
#ruta .gb-city-panel {
  border-radius: 10px !important;
  padding: clamp(16px, 2vh, 22px) !important;
  
}

/* ============================================================
   05 METHOD — gold cinema restyle (was outdated)
   ============================================================ */
#metodo.slide,
.gb-method {
  justify-content: flex-start !important;
  
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 165, 116, 0.06), transparent 55%),
    var(--bg) !important;
}
#metodo .gb-method-top {
  width: min(100%, var(--max)) !important;
  gap: 0 !important;
  padding: clamp(4px, 0.8vh, 10px) 0 clamp(4px, 0.8vh, 8px) !important;
  border: 0 !important;
  background: transparent !important;
}
#metodo .gb-method-top h2 {
  font-size: clamp(28px, 3.5vw + 0.9vh, 52px) !important;
  
  max-width: 18ch !important;
}
#metodo .gb-method-top h2 em {
  color: var(--gold) !important;
}
#metodo .gb-method-top .eyebrow {
  color: var(--gold) !important;
}
#metodo .gb-method-lead {
  color: #c8c7bc !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  max-width: 42ch !important;
}
#metodo .gb-method-grid,
#metodo [data-method-steps] {
  width: min(100%, var(--max)) !important;
  min-height: 200px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line-dark)) !important;
  
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
#metodo .gb-step {
  min-height: 180px !important;
  height: 100% !important;
  padding: clamp(16px, 2.2vh, 26px) clamp(14px, 1.6vw, 20px) !important;
  
  gap: 8px !important;
  border-right: 1px solid color-mix(in srgb, var(--gold) 14%, var(--line-dark)) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 48%),
    var(--black-2) !important;
  transition: background 0.2s var(--ease), transform 0.2s;
}
#metodo .gb-step:last-child { border-right: 0 !important; }
#metodo .gb-step:hover {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.14), transparent 50%),
    var(--black-2) !important;
}
#metodo .gb-step.is-final {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.95), #e0c020) !important;
  color: #2A2622 !important;
}
#metodo .gb-step-num {
  color: var(--gold) !important;
  font: 800 12px/1 var(--mono) !important;
  
}
#metodo .gb-step.is-final .gb-step-num { color: #2d3033 !important; }
#metodo .gb-step h3 {
  margin: 6px 0 0 !important;
  font: 760 clamp(18px, 1.7vw, 26px)/1.1 var(--display) !important;
  color: #FFFEFB !important;
  letter-spacing: -0.02em !important;
}
#metodo .gb-step.is-final h3 { color: #2A2622 !important; }
#metodo .gb-step p {
  margin: 0 !important;
  color: #8A8178 !important;
  
  
}
#metodo .gb-step.is-final p { color: #2d3033 !important; }
#metodo .gb-step b {
  font: 800 11px var(--mono) !important;
  letter-spacing: 0.1em !important;
  color: var(--gold) !important;
}
#metodo .gb-step.is-final b { color: #2A2622 !important; }

#metodo .gb-method-formula {
  width: min(100%, var(--max)) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1.3fr !important;
  
}
#metodo .gb-formula-card {
  min-height: 96px !important;
  padding: clamp(14px, 1.8vh, 20px) 16px !important;
  
  background:
    linear-gradient(160deg, rgba(196, 165, 116, 0.08), transparent 50%),
    var(--black-2) !important;
  
  gap: 4px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
#metodo .gb-formula-card.result {
  background:
    linear-gradient(160deg, rgba(188,184,179,0.16), transparent 55%),
    var(--black-2) !important;
  border-color: color-mix(in srgb, var(--sage) 45%, transparent) !important;
}
#metodo .gb-formula-card small {
  color: var(--gold) !important;
  font: 800 10px var(--mono) !important;
  letter-spacing: 0.12em !important;
}
#metodo .gb-formula-card strong {
  color: var(--gold) !important;
  font: 760 clamp(24px, 2.4vw, 34px)/1 var(--display) !important;
}
#metodo .gb-formula-card b {
  color: #FFFEFB !important;
  font: 760 clamp(14px, 1.25vw, 17px)/1.25 var(--display) !important;
}
#metodo .gb-formula-card span {
  color: #9a9991 !important;
  font-size: 12px !important;
}
#metodo .gb-formula-op {
  color: var(--gold) !important;
  font: 760 28px var(--display) !important;
  text-shadow: 0 0 18px rgba(196, 165, 116, 0.35);
}

/* ============================================================
   06 CAREER — fill dual engine
   ============================================================ */
#trayectoria.slide {
  justify-content: flex-start !important;
}
#trayectoria .gb-career-panel {
  width: min(100%, var(--max)) !important;
  
  height: auto !important;
  
  
}
#trayectoria .gb-panel-head-compact h2 {
  font-size: clamp(28px, 3.3vw + 0.7vh, 48px) !important;
}
#trayectoria .gb-dual {
  flex: 1 1 auto !important;
  
}
#trayectoria .gb-engine-list li {
  flex: 1 1 0 !important;
  min-height: 64px !important;
  padding: clamp(12px, 1.6vh, 18px) 16px !important;
}
#trayectoria .gb-panel-bar {
  min-height: 48px !important;
}

/* ============================================================
   07 LINE — large timeline frame
   ============================================================ */
#linea.slide {
  justify-content: flex-start !important;
  gap: clamp(12px, 1.8vh, 18px) !important;
}
#linea .gb-line-head {
  width: min(100%, var(--max)) !important;
  padding-top: var(--title-band-pad-top) !important;
}
#linea .gb-line-head .slide-index {
  margin-bottom: var(--title-index-mb) !important;
}
#linea .gb-line-kicker {
  margin: 0 !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  line-height: 1.25 !important;
  color: #e8e7df !important;
  max-width: 36ch !important;
}
#linea .gb-line-frame {
  width: min(100%, var(--max)) !important;
  min-height: min(420px, calc(var(--slide-inner) - 120px)) !important;
  
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line-dark)) !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(196, 165, 116, 0.07), transparent 60%),
    var(--black-2) !important;
  padding: clamp(12px, 2vh, 24px) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
}
#linea .gb-line-frame img {
  width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ============================================================
   08 / 09 EXPERIENCIA — roles stretch into remaining space
   ============================================================ */
#experiencia.slide,
#experiencia-2.slide {
  justify-content: flex-start !important;
  
}
#experiencia .gb-exp-panel,
#experiencia-2 .gb-exp-panel {
  width: min(100%, var(--max)) !important;
  
  max-height: none !important;
  
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line-dark)) !important;
  
}
#experiencia .gb-panel-head-compact h2,
#experiencia-2 .gb-panel-head-compact h2 {
  font-size: clamp(28px, 3.3vw + 0.7vh, 48px) !important;
}
#experiencia .gb-roles,
#experiencia-2 .gb-roles {
  flex: 1 1 auto !important;
  min-height: 260px !important;
  overflow: auto !important; /* OK if truly needed */
  gap: 0 !important;
}
#experiencia .gb-role,
#experiencia-2 .gb-role {
  flex: 1 1 0 !important;
  min-height: 110px !important;
  padding: clamp(16px, 2.2vh, 26px) clamp(16px, 2vw, 24px) !important;
  align-items: center !important;
}
#experiencia .gb-role-title,
#experiencia-2 .gb-role-title {
  font-size: clamp(17px, 1.55vw, 24px) !important;
}
#experiencia .gb-role-sum,
#experiencia-2 .gb-role-sum {
  font-size: clamp(13px, 1.1vw, 15px) !important;
  -webkit-line-clamp: 3;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#experiencia .gb-panel-bar,
#experiencia-2 .gb-panel-bar {
  min-height: 52px !important;
  
}

/* ============================================================
   10 CAPACIDADES — larger capability cards
   ============================================================ */
#capacidades.slide {
  justify-content: flex-start !important;
  gap: clamp(14px, 2vh, 20px) !important;
}
#capacidades .gb-caps-top {
  width: min(100%, var(--max)) !important;
}
#capacidades .gb-caps-top h2 {
  font-size: clamp(28px, 3.4vw + 0.8vh, 50px) !important;
}
#capacidades .gb-caps-grid {
  width: min(100%, var(--max)) !important;
  min-height: 280px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
#capacidades .gb-cap {
  min-height: 100% !important;
  padding: clamp(16px, 2.2vh, 24px) !important;
  display: flex !important;
  gap: 10px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
#capacidades .gb-cap h3 {
  font-size: clamp(16px, 1.45vw, 20px) !important;
}
#capacidades .gb-cap p {
  flex: 1 1 auto !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1.45 !important;
  color: #c8c7bc !important;
}
#capacidades .gb-academy {
  width: min(100%, var(--max)) !important;
  min-height: 56px !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
}

/* ============================================================
   11 EDUCATION — fill panel
   ============================================================ */
#formacion.slide {
  justify-content: flex-start !important;
}
#formacion .gb-edu-panel {
  width: min(100%, var(--max)) !important;
  min-height: calc(var(--slide-inner) - 8px) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
}
#formacion .gb-edu-head h2 {
  font-size: clamp(28px, 3.3vw + 0.7vh, 48px) !important;
}
#formacion .gb-edu-grid,
#formacion .education-layout,
#formacion .compact-edu {
  flex: 1 1 auto !important;
  min-height: 240px !important;
}
#formacion .builder-note,
#formacion .education-list {
  padding: clamp(18px, 2.4vh, 28px) !important;
}
#formacion .education-list li {
  min-height: 48px !important;
  padding: 10px 0 !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
}

/* ============================================================
   12 CONTACT — already strong; deepen fill + air from top
   ============================================================ */
#contacto.slide {
  justify-content: flex-start !important;
  padding-top: var(--slide-pad-top) !important;
}
#contacto .gb-contact-inner {
  width: min(100%, 960px) !important;
  min-height: calc(var(--slide-inner) - 10px) !important;
  justify-content: space-between !important;
}
#contacto h2 {
  font-size: clamp(56px, 9.5vw + 1.2vh, 112px) !important;
}

/* ============================================================
   Responsive — keep air + fill; allow scroll if needed
   ============================================================ */
@media (max-width: 980px) {
  :root {
    --slide-pad-top: calc(var(--header) + 22px) !important;
    --chrome-bottom: 96px;
  }
  #metodo .gb-method-grid,
  #metodo [data-method-steps] {
    grid-template-columns: 1fr 1fr !important;
  }
  #metodo .gb-step {
    min-height: 140px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, var(--line-dark)) !important;
  }
  #metodo .gb-step:nth-child(2n) { border-right: 0 !important; }
  #metodo .gb-step:nth-child(n+3) { border-bottom: 0 !important; }
  #metodo .gb-method-formula {
    grid-template-columns: 1fr !important;
  }
  #metodo .gb-formula-op { display: none !important; }
  #inicio .gb-metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  #inicio .gb-hero-grid {
    grid-template-columns: 1fr !important;
  }
  #inicio .gb-card { min-height: 0 !important; }
}

@media (max-width: 640px) {
  :root {
    --slide-pad-top: calc(var(--header) + 18px) !important;
    --chrome-bottom: 104px;
    --panel-inset: 14px;
  }
  #inicio .gb-hero-copy h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
  }
  #inicio .gb-metrics > div { min-height: 64px !important; }
  #experiencia .gb-role,
  #experiencia-2 .gb-role {
    min-height: 96px !important;
  }
}

@media (max-height: 760px) {
  :root {
    --slide-pad-top: calc(var(--header) + 18px) !important;
    --title-index-mb: 6px;
    --title-eyebrow-mb: 6px;
    --title-lead-mt: 10px;
    --chrome-bottom: 92px;
  }
  #inicio .gb-hero-copy h1 {
    font-size: clamp(34px, 5vw + 1vh, 64px) !important;
  }
  #metodo .gb-step { min-height: 140px !important; }
  #experiencia .gb-role,
  #experiencia-2 .gb-role {
    min-height: 88px !important;
    padding: 12px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {