/* ============================================================
   FINAL DECK v4 — cohesive production visual system
   Loads LAST. One intentional design language across slides 00–12.
   Fraunces / Inter / JetBrains · nude / champagne soft-gold editorial.
   ============================================================ */

:root {
  /* —— Accents (cinema) —— */
  --gold: #deceb7;
  --gold-soft: #D4B896;
  --gold-dim: rgba(196, 165, 116, 0.14);
  --gold-line: color-mix(in srgb, var(--gold) 22%, transparent);
  --ice: #c8cccd;
  --ice-dim: rgba(196,205,209,.08);
  --sage: #c8cccd;
  --sage-dim: rgba(196,205,209,.07);
  --flare: #ff6b4a;
  --flare-dim: rgba(255, 107, 74, 0.14);
  --flare-glow: rgba(255, 107, 74, 0.38);
  --timeline-navy: #0C0A08;
  --marine: #161210;
  --ink: #f3eee5;
  --ground: #141210;
  --panel: #1C1916;
  --panel-2: #221E1A;
  --cream: #F7F3EC;
  --mute: #8A8178;
  --mute-2: #B8AFA4;
  --line: rgba(244, 243, 238, 0.1);
  --line-strong: rgba(244, 243, 238, 0.16);

  /* —— Geometry —— */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --max: 1240px;
  --tap: 44px;

  /* —— Space rhythm (title → body) —— */
  --title-gap: 10px;
  --title-lead-gap: 18px;
  --block-gap: clamp(18px, 2.4vh, 28px);
  --section-gap: clamp(12px, 1.8vh, 20px);
  --panel-inset: clamp(16px, 2vw, 26px);
  --title-band-pad-top: 6px;
  --title-index-mb: var(--title-gap);
  --title-eyebrow-mb: var(--title-gap);
  --title-h2-mb: 0px;
  --title-lead-mt: var(--title-lead-gap);

  /* —— Chrome / viewport —— */
  --header: 64px;
  --slide-pad-top: calc(var(--header) + 20px);
  --chrome-bottom: 92px;
  --slide-inner: calc(100svh - var(--slide-pad-top) - var(--chrome-bottom));

  /* —— Elevation —— */
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.42), 0 0 0 1px var(--gold-line);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.28);
  --grad-panel:
    linear-gradient(165deg, rgba(196, 165, 116, 0.05), transparent 42%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  --grad-gold-line: linear-gradient(90deg, transparent, var(--gold), var(--ice), transparent);
}

html[data-theme="light"] {
  /* Accents — contrast on warm paper */
  --gold: #536067;
  --gold-soft: color-mix(in srgb, #C4A574 55%, #fff8d6);
  --gold-dim: rgba(196, 165, 116, 0.14);
  --gold-line: color-mix(in srgb, #C4A574 28%, transparent);
  --ice: #586a70;
  --ice-dim: rgba(68,82,87,.08);
  --sage: #586a70;
  --sage-dim: rgba(68,82,87,.07);
  --flare: #c44a2f;
  --flare-dim: rgba(196, 74, 47, 0.14);
  --flare-glow: rgba(196, 74, 47, 0.28);

  /* --ink = dark text; --ground = page sheet */
  --ink: #27343b;
  --ground: #FAF7F2;
  --panel: #FFFEFB;
  --panel-2: #F3EDE4;
  --cream: #2A2622;
  --mute: #6F675F;
  --mute-2: #4A443E;
  --line: rgba(17, 18, 14, 0.10);
  --line-strong: rgba(17, 18, 14, 0.16);
  /* Line slide page chrome: paper (image keeps its own navy pixels) */
  --timeline-navy: #FAF7F2;
  --marine: #f2eee9;

  /* Unify styles.css / extra-pass :root tokens that otherwise stay cinema-dark */
  --bg: #f4efe6;
  --bg2: #ebe5da;
  --surface: #fffaf2;
  --surface2: #f4ebdd;
  --black: #f4efe6;
  --black-2: #ebe4d8;
  --paper: #fbf7f0;
  --paper-2: #eee6d9;
  --white: #27343b;
  --accent: #31414a;
  --accent-ink: #fffaf2;
  --mark: #4a585c;
  --yellow: #536067;
  --yellow-2: #788188;
  --yellow-dim: rgba(78,76,68,.08);
  --yellow-glow: rgba(78,76,68,.12);
  --gold-glow: rgba(78,76,68,.12);
  --muted-dark: #526069;
  --muted-light: #617077;
  --muted: #6F675F;
  --ink-on-dark: #2A2622;
  --line-dark: rgba(56,66,70,.23);
  --line-dark-2: rgba(56,66,70,.27);
  --line-light: rgba(56,66,70,.18);
  --line-light-2: rgba(56,66,70,.24);
  --shadow: 0 22px 50px rgba(17, 18, 14, 0.1);
  --shadow-sm: 0 10px 28px rgba(17, 18, 14, 0.08);
  --shadow-light: 0 22px 50px rgba(17, 18, 14, 0.1);

  --shadow-panel: 0 18px 48px rgba(17, 18, 14, 0.10), 0 0 0 1px var(--gold-line);
  --shadow-card: 0 12px 32px rgba(17, 18, 14, 0.08);
  --grad-panel:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 42%),
    linear-gradient(180deg, #FFFEFB, #FAF7F2);
}

.slide,
.slide.fit {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  padding: var(--slide-pad-top) clamp(16px, 3vw, 36px) var(--chrome-bottom) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: var(--section-gap) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}--gold) 24%, var(--flare) 10%, transparent) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 38%),
    linear-gradient(210deg, rgba(255, 107, 74, 0.05), transparent 45%),
    var(--panel-2) !important;
  box-shadow: var(--shadow-card), 0 0 32px rgba(223,219,214,0.05) !important;
  padding: 16px !important;
}
#ruta .gb-route-strip {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: none;
}
#ruta .gb-route-strip .gb-strip-item.is-on {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--flare) 20%, transparent) !important;
  background: linear-gradient(135deg, rgba(196, 165, 116, 0.12), rgba(255, 107, 74, 0.08)) !important;
  box-shadow: 0 0 18px rgba(196, 165, 116, 0.12);
}
@keyframes core-pulse {
  0%, 100% { opacity: 0.55; r: 3.6; }
  50% { opacity: 1; r: 5.1; }
}
@keyframes core-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(196, 165, 116, 0.14), 0 0 22px rgba(196, 165, 116, 0.45), 0 0 40px rgba(255, 107, 74, 0.12); }
  50% { box-shadow: 0 0 0 9px rgba(196, 165, 116, 0.22), 0 0 34px rgba(196, 165, 116, 0.7), 0 0 56px rgba(255, 107, 74, 0.22); }
}
@keyframes route-scan {
  0% { background-position: 0 -40%; }
  100% { background-position: 0 140%; }
}
@keyframes route-pulse {
  0%, 100% { opacity: 0.45; }
}
@keyframes route-dash {
  to { stroke-dashoffset: -22; }
}
@media (prefers-reduced-motion: reduce) {ant;
  gap: 12px 24px !important;
  align-items: end !important;
}
#metodo .gb-method-top h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3.2vw + 0.5vh, 44px) !important;
  line-height: 1.05 !important;
}
#metodo .gb-method-grid {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#metodo .gb-step {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: clamp(14px, 2vh, 22px) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-strong) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 50%),
    var(--panel-2) !important;
  box-shadow: var(--shadow-card) !important;
}
#metodo .gb-step.is-final {
  border-color: color-mix(in srgb, var(--sage) 35%, var(--line)) !important;
  background:
    linear-gradient(165deg, rgba(188,184,179,0.12), transparent 50%),
    var(--panel-2) !important;
}
#metodo .gb-step-num {
  font: 800 12px/1 var(--mono) !important;
  color: var(--gold) !important;
  letter-spacing: 0.1em !important;
}
#metodo .gb-step h3 {
  margin: 0 !important;
  font: 750 clamp(16px, 1.4vw, 20px)/1.15 var(--display) !important;
  color: var(--cream) !important;
}
#metodo .gb-step p {
  margin: 0 !important;
  color: var(--mute-2) !important;
  font: 500 13px/1.35 var(--sans) !important;
  flex: 1 1 auto !important;
}
#metodo .gb-step b {
  margin-top: auto !important;
  color: var(--ice) !important;
  font: 800 11px/1 var(--mono) !important;
  letter-spacing: 0.1em !important;
}
#metodo .gb-formula-card {
  padding: 14px 16px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.03) !important;
  display: flex; flex-direction: column; gap: 4px;
}
#metodo .gb-formula-card.result {
  border-color: var(--gold-line) !important;
  background: linear-gradient(145deg, rgba(196, 165, 116, 0.1), rgba(223,219,214,0.05)) !important;
}
#metodo .gb-formula-card small {
  font: 800 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--mute);
}
#metodo .gb-formula-card strong {
  font: 750 28px/1 var(--display); color: var(--gold);
}
#metodo .gb-formula-card b {
  font: 700 14px/1.25 var(--sans); color: var(--cream);
}
#metodo .gb-formula-card span {
  font: 500 12px/1.35 var(--sans); color: var(--mute);
}
#metodo .gb-formula-op {
  display: grid; place-items: center;
  font: 750 22px/1 var(--display); color: var(--gold);
}

/* ============================================================
   06 CAREER — dual engines · compact descanso · no bar collision
   ============================================================ */
#trayectoria.slide {
  overflow: hidden !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#trayectoria .gb-career-panel {
  height: calc(var(--slide-inner) - 8px) !important;
  max-height: calc(var(--slide-inner) - 8px) !important;
  overflow: hidden !important;
}
#trayectoria .gb-panel-head-compact {
  padding: clamp(14px, 2vh, 22px) var(--panel-inset) clamp(10px, 1.3vh, 14px) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.06), transparent) !important;
}
#trayectoria .gb-panel-head-compact h2 {
  font-size: clamp(28px, 3.2vw + 0.6vh, 46px) !important;
  line-height: 1.02 !important;
  margin: clamp(4px, 0.8vh, 8px) 0 0 !important;
}
#trayectoria .gb-dual {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-top: 1px solid var(--line) !important;
}
#trayectoria .gb-dual-x {
  display: grid !important;
  place-items: center !important;
  font-size: clamp(26px, 2.8vw, 38px) !important;
  color: var(--gold) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.12), rgba(188,184,179,0.1)) !important;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
#trayectoria .gb-engine {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#trayectoria .gb-engine > header {
  flex-shrink: 0 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.02) !important;
}: color-mix(in srgb, var(--gold) 35%, transparent) transparent;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#trayectoria .gb-engine-list li {
  flex: 1 1 0 !important;
  min-height: 56px !important;
  padding: clamp(10px, 1.5vh, 16px) 16px !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--line) !important;
}
#trayectoria .gb-engine-list em {
  font: 800 10px/1.3 var(--mono) !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
  color: var(--mute) !important;
}
#trayectoria .gb-engine-list b {
  display: block;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.15 !important;
  color: var(--cream) !important;
}
#trayectoria .gb-engine-list span {
  display: block;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  color: var(--mute-2) !important;
}
#trayectoria .gb-engine-list i {
  display: block;
  font-size: clamp(11px, 0.95vw, 13px) !important;
  color: var(--mute) !important;
  font-style: normal !important;
}

/* Compact descanso — clears bottom panel-bar + deck-controls */
#trayectoria .gb-career-break {
  flex-shrink: 0 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  align-items: center !important;
  margin: 0 10px 10px !important;
  padding: 8px 12px !important;
  min-height: 0 !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid color-mix(in srgb, var(--sage) 28%, transparent) !important;
  background: linear-gradient(90deg, rgba(188,184,179,0.12), rgba(196, 165, 116, 0.06)) !important;
}
#trayectoria .gb-career-break b {
  font: 760 12px/1.2 var(--display) !important;
  color: var(--cream) !important;
}
#trayectoria .gb-career-break span {
  font: 700 11px/1.2 var(--sans) !important;
  color: var(--mute-2) !important;
}
#trayectoria .gb-career-break i {
  font: 11px/1.2 var(--sans) !important;
  font-style: normal !important;
  color: var(--mute) !important;
}
#trayectoria .gb-panel-bar {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  min-height: var(--tap) !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-top: 1px solid rgba(196, 165, 116, 0.22) !important;
  background: rgba(196, 165, 116, 0.05) !important;
}

/* ============================================================
   07 LÍNEA — navy/marine matching timeline image
   ============================================================ */
#linea.slide {
  background: var(--ground, var(--bg)) !important;
  overflow: hidden !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#linea .gb-line-kicker {
  margin-top: var(--title-lead-mt) !important;
  color: var(--mute-2) !important;
  max-width: 60ch !important;
}
#linea .gb-line-frame {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, #0e1114) !important;
  background: #010407 !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
  padding: clamp(10px, 1.6vh, 18px) !important;
}

/* ============================================================
   08 / 09 EXPERIENCIA — role copy FITS inside cards
   ============================================================ */
#experiencia.slide,
#experiencia-2.slide {
  overflow: hidden !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#experiencia .gb-exp-panel,
#experiencia-2 .gb-exp-panel {
  height: calc(var(--slide-inner) - 8px) !important;
  max-height: calc(var(--slide-inner) - 8px) !important;
  overflow: hidden !important;
}
#experiencia .gb-panel-head-compact,
#experiencia-2 .gb-panel-head-compact {
  padding: clamp(12px, 1.6vh, 18px) var(--panel-inset) clamp(8px, 1.1vh, 12px) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.05), transparent) !important;
}
#experiencia .gb-panel-head-compact h2,
#experiencia-2 .gb-panel-head-compact h2 {
  font-size: clamp(26px, 3vw + 0.5vh, 42px) !important;
  margin: 4px 0 0 !important;
  line-height: 1.05 !important;
}px) !important;
  display: grid !important;
  grid-template-columns: minmax(110px, 148px) minmax(0, 1fr) auto !important;
  gap: 8px 16px !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: background 0.15s ease;
}
#experiencia .gb-role:hover,
#experiencia-2 .gb-role:hover,
#experiencia .gb-role.is-featured,
#experiencia-2 .gb-role.is-featured {
  background: rgba(196, 165, 116, 0.04) !important;
}
#experiencia .gb-role.is-featured {
  box-shadow: inset 3px 0 0 var(--gold) !important;
}
#experiencia-2 .gb-role.is-featured {
  box-shadow: inset 3px 0 0 var(--ice) !important;
}tretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border-radius: var(--r-xs) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--line) !important;
}
#experiencia .gb-role-idx,
#experiencia-2 .gb-role-idx {
  font: 800 10px/1 var(--mono) !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em !important;
}
#experiencia .gb-role-dates,
#experiencia-2 .gb-role-dates {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font: 800 10px/1.25 var(--mono) !important;
  letter-spacing: 0.04em !important;
  color: var(--mute) !important;
}ortant;
  color: var(--ice) !important;
}
#experiencia .gb-role-title,
#experiencia-2 .gb-role-title {
  font-size: clamp(14px, 1.25vw + 0.2vh, 20px) !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  color: var(--cream) !important;
  font-weight: 700 !important;
}
#experiencia .gb-role-sum,
#experiencia-2 .gb-role-sum {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(11px, 0.95vw + 0.15vh, 14px) !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  color: var(--mute-2) !important;
  font-style: normal !important;
}
#experiencia .gb-role-go,
#experiencia-2 .gb-role-go {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  color: var(--gold) !important;
  font: 700 11px/1 var(--mono) !important;
}
#experiencia .gb-panel-bar,
#experiencia-2 .gb-panel-bar {
  flex-shrink: 0 !important;
  min-height: var(--tap) !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  z-index: 2;
  position: relative;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  border-top: 1px solid rgba(196, 165, 116, 0.22) !important;
  background: rgba(196, 165, 116, 0.04) !important;
}
#experiencia .gb-exp-next,
#experiencia-2 .gb-exp-next {
  margin-left: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--gold) !important;
  font: 700 12px/1 var(--sans) !important;
  cursor: pointer !important;
  padding: 8px 4px !important;
}
#capacidades .gb-caps-top {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px 24px !important;
  align-items: end !important;
}
#capacidades .gb-caps-top h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3.2vw + 0.5vh, 44px) !important;
  line-height: 1.05 !important;
}
#capacidades .gb-caps-grid {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#capacidades .gb-cap {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: clamp(14px, 2vh, 22px) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-strong) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 50%),
    var(--panel-2) !important;
  box-shadow: var(--shadow-card) !important;
}
#capacidades .gb-cap.is-human {
  border-color: color-mix(in srgb, var(--sage) 35%, var(--line)) !important;
  background:
    linear-gradient(165deg, rgba(188,184,179,0.12), transparent 50%),
    var(--panel-2) !important;
}
#capacidades .gb-cap > header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#capacidades .gb-cap > header span {
  font: 800 11px/1 var(--mono); color: var(--gold);
}
#capacidades .gb-cap > header b {
  font: 800 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--mute);
  margin-right: auto;
}
#capacidades .gb-cap > header strong {
  font: 750 18px/1 var(--display); color: var(--ice);
}
#capacidades .gb-cap h3 {
  margin: 0 !important;
  font: 700 clamp(16px, 1.4vw, 20px)/1.2 var(--display) !important;
  color: var(--cream) !important;
}
#capacidades .gb-cap p {
  margin: 0 !important;
  color: var(--mute-2) !important;
  font: 500 13px/1.4 var(--sans) !important;
  flex: 1 1 auto !important;
}
#capacidades .gb-cap-bar {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
#capacidades .gb-cap-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--ice)) !important;
  border-radius: inherit;
}
#capacidades .gb-academy {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 14px 18px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--gold-line) !important;
  background: linear-gradient(90deg, rgba(196, 165, 116, 0.1), rgba(223,219,214,0.05)) !important;
}
#capacidades .gb-academy > span {
  font: 800 12px/1 var(--mono); color: var(--gold); letter-spacing: 0.1em;
}
#capacidades .gb-academy h3 {
  margin: 4px 0 !important;
  font: 700 clamp(15px, 1.3vw, 18px)/1.25 var(--display) !important;
  color: var(--cream) !important;
}
#capacidades .gb-academy p {
  margin: 0 !important;
  color: var(--mute) !important;
  font: 500 13px/1.35 var(--sans) !important;
}

/* ============================================================
   11 EDUCATION — builder + list (languages moved to #idiomas)
   ============================================================ */
#formacion.slide {
  overflow: hidden !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
}
#formacion .gb-edu-panel {
  height: calc(var(--slide-inner) - 8px) !important;
  max-height: calc(var(--slide-inner) - 8px) !important;
  overflow: hidden !important;
}
#formacion .gb-edu-head {
  padding: clamp(14px, 1.8vh, 20px) var(--panel-inset) clamp(10px, 1.3vh, 14px) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.06), transparent) !important;
}
#formacion .gb-edu-head h2 {
  margin: 4px 0 0 !important;
  font-size: clamp(24px, 2.8vw + 0.5vh, 40px) !important;
  line-height: 1.08 !important;
}
#formacion .gb-edu-grid,
#formacion .education-layout,
#formacion .compact-edu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr) !important;
  overflow: auto !important;
  align-items: stretch !important;
}no); color: var(--ice); letter-spacing: 0.14em;
}
#formacion .builder-note strong {
  margin: 10px 0 14px !important;
  font: 750 clamp(18px, 1.6vw, 24px)/1.15 var(--display) !important;
  color: var(--cream) !important;
}
#formacion .builder-note ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
#formacion .builder-note li {
  padding: 8px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
  color: var(--mute-2);
  font: 600 13px/1.3 var(--sans);
}
#formacion .education-list ul {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
#formacion .education-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
#formacion .education-list li b {
  font: 800 12px/1.2 var(--mono); color: var(--gold);
}
#formacion .education-list li span {
  color: var(--mute-2); font: 500 14px/1.3 var(--sans);
}
#formacion .education-list {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(12px, 1.6vh, 18px) var(--panel-inset) clamp(16px, 2.2vh, 28px) !important;
}
#formacion .education-list > div:first-child {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
#formacion .education-list ul {
  flex: 1 1 auto !important;
}

/* ============================================================
   12 LANGUAGES — dedicated dark gold cinema cards
   ============================================================ */
#idiomas.slide {
  overflow: hidden !important;
  gap: var(--block-gap) !important;
  padding-bottom: calc(var(--chrome-bottom) + 6px) !important;
  justify-content: center !important;
  align-items: stretch !important;
}
#idiomas .gb-langs-top {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px 24px !important;
  align-items: end !important;
}
#idiomas .gb-langs-top h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3.2vw + 0.5vh, 44px) !important;
  line-height: 1.05 !important;
  color: var(--cream) !important;
}
#idiomas .gb-langs-top h2 em { color: var(--gold) !important; }
#idiomas .gb-langs-lead {
  margin: 0 !important;
  max-width: 42ch !important;
  color: var(--mute-2) !important;
  font: 500 clamp(13px, 1.1vw, 15px)/1.4 var(--sans) !important;
}
#idiomas .gb-langs-grid {
  width: min(100%, var(--max)) !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 12px !important;
}
#idiomas .gb-lang-card {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: clamp(16px, 2.2vh, 24px) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-strong) !important;
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.08), transparent 52%),
    var(--panel-2) !important;
  box-shadow: var(--shadow-card) !important;
}
#idiomas .gb-lang-card.is-understand {
  border-color: color-mix(in srgb, var(--ice) 30%, var(--line)) !important;
  background:
    linear-gradient(165deg, rgba(223,219,214,0.1), transparent 52%),
    var(--panel-2) !important;
}
#idiomas .gb-lang-card > header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#idiomas .gb-lang-card > header span {
  font: 800 11px/1 var(--mono) !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em !important;
}
#idiomas .gb-lang-card > header b {
  margin-left: auto !important;
  font: 800 clamp(18px, 1.6vw, 22px)/1 var(--display) !important;
  color: var(--cream) !important;
  letter-spacing: -0.02em !important;
}
#idiomas .gb-lang-card h3 {
  margin: 0 !important;
  font: 700 clamp(18px, 1.6vw, 24px)/1.15 var(--display) !important;
  color: var(--cream) !important;
}
#idiomas .gb-lang-level {
  margin: auto 0 0 !important;
  padding: 8px 12px !important;
  border-radius: var(--r-xs) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)) !important;
  background: rgba(196, 165, 116, 0.08) !important;
  color: var(--gold) !important;
  font: 700 13px/1.2 var(--mono) !important;
  letter-spacing: 0.04em !important;
  width: fit-content !important;
}
#idiomas .gb-lang-card.is-understand .gb-lang-level {
  border-color: color-mix(in srgb, var(--ice) 35%, var(--line)) !important;
  background: rgba(223,219,214,0.08) !important;
  color: var(--ice) !important;
}

/* ============================================================
   13 CONTACT — premium closer
   ============================================================ */

#contacto.slide {
  overflow: hidden !important;
  justify-content: center !important;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(196, 165, 116, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(223,219,214,0.06), transparent 50%),
    var(--ground) !important;
}
#contacto .gb-contact-inner {
  height: calc(var(--slide-inner) - 4px) !important;
  max-height: calc(var(--slide-inner) - 4px) !important;
  justify-content: space-between !important;
  gap: clamp(20px, 4vh, 40px) !important;
  padding: clamp(8px, 1.5vh, 16px) 0 !important;
}
#contacto .gb-contact-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 920px !important;
}
#contacto .gb-contact-rule {
  height: 2px !important;
  width: min(220px, 40%) !important;
  margin: 8px 0 18px !important;
  border: 0 !important;
  background: var(--grad-gold-line) !important;
}
#contacto h2 {
  margin: 0 !important;
  font: 750 clamp(48px, 8vw + 1vh, 96px)/0.95 var(--display) !important;
  letter-spacing: -0.04em !important;
  color: var(--cream) !important;
}
#contacto .gb-contact-sub {
  margin: 12px 0 0 !important;
  color: var(--gold) !important;
  font: 700 14px/1.3 var(--mono) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
#contacto .gb-contact-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin-top: clamp(18px, 2.5vh, 28px) !important;
  align-items: center !important;
}
#contacto .gb-contact-meta a {
  color: var(--mute-2) !important;
  text-decoration: none !important;
  font: 600 13px/1 var(--sans) !important;
  min-height: var(--tap);
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#contacto .gb-contact-meta span {
  color: var(--mute) !important;
  font: 500 12px/1 var(--mono) !important;
}
#contacto .gb-contact-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--gold-line) !important;
  background:
    linear-gradient(120deg, rgba(196, 165, 116, 0.08), transparent 50%),
    rgba(255,255,255,0.02) !important;
  box-shadow: var(--shadow-card) !important;
}
#contacto .gb-contact-actions,
#contacto .gb-contact-docs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
#contacto .gb-contact-actions .button.primary {
  box-shadow: 0 10px 28px rgba(196, 165, 116, 0.22) !important;
}

/* ============================================================
   RESPONSIVE — tablet ~1100 · phone ~760 · taps 44
   ============================================================ */
@media (max-width: 1100px) {
  :root {
    --chrome-bottom: 96px;
    --slide-pad-top: calc(var(--header) + 14px);
    --block-gap: clamp(14px, 2vh, 22px);
  }
  #inicio .gb-hero-grid {
    grid-template-columns: 1fr !important;
  }
  #inicio .gb-card { display: none !important; }
  #inicio .gb-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #valor .gb-loop { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #demos .gb-demos-grid { grid-template-columns: 1fr !important; }
  #ruta .gb-route-body { grid-template-columns: 1fr !important; }
  #metodo .gb-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #metodo .gb-method-formula {
    grid-template-columns: 1fr !important;
  }
  #metodo .gb-formula-op { display: none !important; }
  #capacidades .gb-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #idiomas .gb-langs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #formacion .gb-edu-grid,
  #formacion .education-layout,
  #formacion .compact-edu {
    grid-template-columns: 1fr !important;
  }
  #formacion .builder-note { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  #trayectoria .gb-dual {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }
  #trayectoria .gb-dual-x { display: none !important; }
  #trayectoria .gb-engine-list li {
    flex: 0 0 auto !important;
    min-height: 52px !important;
  }
  #trayectoria .gb-career-break { margin: 8px 10px 12px !important; }
}

@media (max-width: 760px) {
  :root {
    --header: 58px;
    --chrome-bottom: 100px;
    --slide-pad-top: calc(var(--header) + 10px);
    --panel-inset: 14px;
    --title-lead-gap: 14px;
    --block-gap: 16px;
  }
  .slide, .slide.fit {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #inicio .gb-hero-copy h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
  }
  #inicio .gb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #inicio .gb-actions .button { width: 100% !important; justify-content: center !important; }
  #valor .gb-loop { grid-template-columns: 1fr !important; overflow: auto !important; }
  #sistemas .gb-star-metrics { grid-template-columns: 1fr !important; }
  #sistemas .gb-star-actions .button { width: 100% !important; justify-content: center !important; }
  #demos .gb-demos-grid { overflow: auto !important; }
  #metodo .gb-method-grid { grid-template-columns: 1fr !important; overflow: auto !important; }
  #capacidades .gb-caps-grid { grid-template-columns: 1fr !important; overflow: auto !important; }
  #capacidades .gb-academy { grid-template-columns: 1fr !important; }
  #idiomas .gb-langs-grid { grid-template-columns: 1fr !important; overflow: auto !important; }
  #trayectoria .gb-career-panel,
  #experiencia .gb-exp-panel,
  #experiencia-2 .gb-exp-panel,
  #formacion .gb-edu-panel {
    height: auto !important;
    max-height: calc(var(--slide-inner) - 4px) !important;
  }
  #trayectoria .gb-career-break {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 8px 10px !important;
  }
  #trayectoria .gb-engine-list li {
    grid-template-columns: 72px 1fr !important;
    padding: 10px 12px !important;
  }
  #experiencia .gb-roles,
  #experiencia-2 .gb-roles { overflow-y: auto !important; }
  #experiencia .gb-role,
  #experiencia-2 .gb-role {
    grid-template-columns: 1fr !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  #experiencia .gb-role-year,
  #experiencia-2 .gb-role-year {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 0 6px !important;
    background: transparent !important;
    border: 0 !important;
  }
}
html[data-theme="light"] #contacto.slide {
  background:
    radial-gradient(ellipse 70% 50% at 18% 20%, rgba(196, 165, 116, 0.12), transparent 55%),
    var(--ground) !important;
  color: var(--cream) !important;
}
html[data-theme="light"] .gb-panel,
html[data-theme="light"] .gb-career-panel,
html[data-theme="light"] .gb-exp-panel,
html[data-theme="light"] .gb-edu-panel {
  background: var(--grad-panel) !important;
  color: var(--cream) !important;
  border-color: var(--gold-line) !important;
  box-shadow: var(--shadow-panel) !important;
}

/* ============================================================
   HOTFIX leftovers removed — Edge follows theme tokens.
   Dark cinema: :root --ground/#141210 + --grad-panel.
   Light paper: html[data-theme=light] tokens (+ COMPLETE LIGHT MODE).
   ============================================================ */

/* —— 2) OS RAIL NAV — intentional gold/dark scrollbar —— */
.os-rail-nav[data-slide-rail],
.os-rail-nav {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, #C4A574 55%, #313437) #0a0b0e;
  /* Fade edges so the rail feels designed, not raw */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 10px,
    #000 calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 10px,
    #000 calc(100% - 10px),
    transparent 100%
  );
}
.os-rail-nav[data-slide-rail]::-webkit-scrollbar,
.os-rail-nav::-webkit-scrollbar {
  width: 5px;
}
.os-rail-nav[data-slide-rail]::-webkit-scrollbar-track,
.os-rail-nav::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #141210, #1C1916 40%, #141210);
  border-radius: 999px;
  margin: 6px 0;
}
.os-rail-nav[data-slide-rail]::-webkit-scrollbar-thumb,
.os-rail-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #C4A574 70%, #fff8d6),
    color-mix(in srgb, #C4A574 35%, #1a1608)
  );
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #C4A574 25%, transparent);
  box-shadow: 0 0 8px rgba(196, 165, 116, 0.25);
}
.os-rail-nav[data-slide-rail]::-webkit-scrollbar-thumb:hover,
.os-rail-nav::-webkit-scrollbar-thumb:hover {
  background: #C4A574;
}
.os-rail-nav[data-slide-rail]::-webkit-scrollbar-corner,
.os-rail-nav::-webkit-scrollbar-corner {
  background: transparent;
}

/* —— 3) COVER #inicio — index / Portada band always visible —— */
#inicio .gb-hero-ambient,
#inicio .gb-hero-orb,
#inicio .gb-hero-grain,
#inicio .gb-hero-grid-fx,
#inicio .gb-hero-tags-fx {
  z-index: 0 !important;
  pointer-events: none !important;
}
#inicio .gb-hero-stack,
#inicio .gb-hero-grid,
#inicio .gb-hero-copy {
  position: relative !important;
  z-index: 3 !important;
}
#inicio .gb-hero-title-band,
#inicio .gb-title-band.gb-hero-title-band {
  position: relative !important;
  z-index: 6 !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
  padding: 6px 10px 8px 0 !important;
  /* Soft plate so gold orbs cannot wash out the index */
  background: linear-gradient(
    90deg,
    rgba(6, 7, 10, 0.72) 0%,
    rgba(6, 7, 10, 0.35) 55%,
    transparent 100%
  ) !important;
  border-radius: 0 8px 8px 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
#inicio .gb-hero-index,
#inicio .slide-index.gb-hero-index,
#inicio .slide-index.light-index.gb-hero-index {
  position: relative !important;
  z-index: 7 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #FFFEFB !important;
  font: 800 11px/1.2 var(--mono) !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 6px !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
#inicio .gb-hero-index span,
#inicio .gb-hero-index i {
  color: inherit !important;
  opacity: 1 !important;
}
#inicio .gb-hero-index span:first-child {
  color: #C4A574 !important;
}
#inicio .gb-hero-index i {
  background: color-mix(in srgb, #C4A574 70%, #FFFEFB) !important;
  opacity: 0.9 !important;
}
#inicio .gb-hero-index span:last-child,
#inicio .slide-index.light-index.gb-hero-index span:last-child {
  color: #FFFEFB !important;
  letter-spacing: 0.16em !important;
}
#inicio .gb-hero-title-band .eyebrow,
#inicio .gb-kicker.eyebrow {
  position: relative !important;
  z-index: 7 !important;
  color: #C4A574 !important;
  opacity: 1 !important;
}

/* ============================================================
   COMPLETE LIGHT MODE — polished paper deck end-to-end
   Loads last. Tokens drive surfaces; only gaps get overrides.
   Dark cinema unchanged via :root defaults.
   ============================================================ */

/* —— Slide shells —— */
/* Line / timeline — paper page; image keeps own navy pixels */
html[data-theme="light"] #linea.slide,
html[data-theme="light"] .gb-line-slide {
  background: var(--ground) !important;
  color: var(--cream) !important;
}
html[data-theme="light"] #linea .gb-line-frame {
  background: #010407 !important;
  border-color: color-mix(in srgb, var(--gold) 22%, #0e1114) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="light"] #linea .gb-line-frame img {
  background: #010407 !important;
}
html[data-theme="light"] #linea .gb-line-kicker,
html[data-theme="light"] #linea .slide-index span:last-child {
  color: var(--mute-2) !important;
}

/* —— Edge #valor — paper + gold (both themes via tokens; light polish) —— */
html[data-theme="light"] #valor.slide,
html[data-theme="light"] .gb-valor-slide {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 165, 116, 0.10), transparent 55%),
    var(--ground) !important;
  color: var(--cream) !important;
}
html[data-theme="light"] #valor .gb-valor-panel,
html[data-theme="light"] #valor .gb-panel,
html[data-theme="light"] .gb-panel.gb-valor-panel {
  background: var(--grad-panel) !important;
  color: var(--cream) !important;
  border-color: var(--gold-line) !important;
  box-shadow: var(--shadow-panel) !important;
}
html[data-theme="light"] #valor .gb-valor-head {
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.08), transparent) !important;
  border-bottom-color: var(--line) !important;
  color: var(--cream) !important;
}
html[data-theme="light"] #valor .gb-loop-card,
html[data-theme="light"] #valor [data-valor-loop] article {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.08), transparent 50%),
    #FFFEFB !important;
  color: var(--cream) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-theme="light"] #valor .gb-loop-card.is-end {
  background:
    linear-gradient(165deg, rgba(92,93,94,0.10), transparent 50%),
    #f3faf6 !important;
  border-color: color-mix(in srgb, var(--sage) 35%, var(--line)) !important;
}
html[data-theme="light"] #valor .gb-loop-card h3,
html[data-theme="light"] #valor .gb-valor-head h2,
html[data-theme="light"] #valor .slide-index {
  color: var(--cream) !important;
}
html[data-theme="light"] #valor .gb-valor-head h2 em,
html[data-theme="light"] #valor .gb-loop-num,
html[data-theme="light"] #valor .gb-valor-head .eyebrow,
html[data-theme="light"] #valor .gb-panel-bar {
  color: var(--gold) !important;
}
html[data-theme="light"] #valor .gb-loop-card p,
html[data-theme="light"] #valor .gb-panel-lead {
  color: var(--mute-2) !important;
}
html[data-theme="light"] #valor .gb-loop-label {
  color: var(--ice) !important;
}
html[data-theme="light"] #valor .gb-panel-bar {
  background: rgba(196, 165, 116, 0.08) !important;
  border-top-color: var(--gold-line) !important;
}

/* —— Cover index band (was hard white-on-dark) —— */
html[data-theme="light"] #inicio .gb-hero-title-band,
html[data-theme="light"] #inicio .gb-title-band.gb-hero-title-band {
  background: linear-gradient(
    90deg,
    rgba(243, 240, 231, 0.92) 0%,
    rgba(243, 240, 231, 0.55) 55%,
    transparent 100%
  ) !important;
  text-shadow: none !important;
}
html[data-theme="light"] #inicio .gb-hero-index,
html[data-theme="light"] #inicio .slide-index.gb-hero-index,
html[data-theme="light"] #inicio .slide-index.light-index.gb-hero-index,
html[data-theme="light"] #inicio .gb-hero-index span:last-child,
html[data-theme="light"] #inicio .slide-index.light-index.gb-hero-index span:last-child {
  color: var(--cream) !important;
}
html[data-theme="light"] #inicio .gb-hero-index span:first-child,
html[data-theme="light"] #inicio .gb-hero-title-band .eyebrow,
html[data-theme="light"] #inicio .gb-kicker.eyebrow {
  color: var(--gold) !important;
}
html[data-theme="light"] #inicio .gb-hero-index i {
  background: color-mix(in srgb, var(--gold) 70%, #2A2622) !important;
}

/* —— Cards / engines / caps / langs —— */
/* Method / formula dark glass → paper */
/* —— Route map on paper —— */
html[data-theme="light"] #ruta .gb-route-map {
  background:
    radial-gradient(circle at 50% 54%, rgba(196, 165, 116, 0.14), transparent 38%),
    radial-gradient(circle at 68% 18%, rgba(101,102,103,0.10), transparent 34%),
    radial-gradient(circle at 88% 40%, rgba(196, 74, 47, 0.10), transparent 32%),
    radial-gradient(circle at 18% 86%, rgba(92,93,94,0.10), transparent 36%),
    linear-gradient(155deg, rgba(101,102,103,0.04), transparent 42%, rgba(196, 165, 116, 0.05)),
    var(--panel) !important;
  border-color: color-mix(in srgb, var(--gold) 32%, var(--ice) 16%, transparent) !important;
  box-shadow: var(--shadow-panel) !important;
}
html[data-theme="light"] #ruta .gb-route-glow {
  mix-blend-mode: multiply !important;
  opacity: 0.55 !important;
  filter: saturate(1.15) blur(1px);
}
html[data-theme="light"] #ruta .gb-route-scan {
  mix-blend-mode: multiply !important;
  opacity: 0.45 !important;
  background: linear-gradient(180deg, transparent 0%, rgba(101,102,103,0.12) 48%, transparent 52%);
}
html[data-theme="light"] #ruta .gb-spoke {
  opacity: 1 !important;
  stroke-width: 0.85 !important;
}
html[data-theme="light"] #ruta .gb-hub-ring {
  stroke: color-mix(in srgb, var(--gold) 70%, transparent) !important;
}
html[data-theme="light"] #ruta .gb-hub-ring-2 {
  stroke: color-mix(in srgb, var(--ice) 65%, transparent) !important;
}
html[data-theme="light"] #ruta .gb-hub-ring-3 {
  stroke: color-mix(in srgb, var(--flare) 55%, transparent) !important;
}
html[data-theme="light"] #ruta .gb-core-pulse {
  filter: drop-shadow(0 0 2.5px rgba(196, 165, 116, 0.9)) !important;
}
html[data-theme="light"] #ruta .gb-pin b,
html[data-theme="light"] #ruta .gb-route-caption,
html[data-theme="light"] #ruta .gb-route-legend span {
  color: var(--cream) !important;
}
html[data-theme="light"] #ruta .gb-route-legend {
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] #ruta .gb-route-strip .gb-strip-item {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--mute-2) !important;
}
html[data-theme="light"] #ruta .gb-route-strip .gb-strip-item.is-on {
  color: var(--cream) !important;
  border-color: color-mix(in srgb, var(--gold) 50%, transparent) !important;
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.12), var(--panel)) !important;
}

/* —— Chrome: header, rail, controls, dialogs —— */



html[data-theme="light"] .os-rail-item.active,
html[data-theme="light"] .os-rail-item[aria-current="true"] {
  color: var(--cream) !important;
  background: color-mix(in srgb, var(--gold) 12%, transparent) !important;
}
html[data-theme="light"] .os-rail-nav,
html[data-theme="light"] .os-rail-nav[data-slide-rail] {
  scrollbar-color: color-mix(in srgb, var(--gold) 55%, #8a7018) #EFE8DE !important;
}
html[data-theme="light"] .os-rail-nav::-webkit-scrollbar-track,
html[data-theme="light"] .os-rail-nav[data-slide-rail]::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #FAF7F2, #EFE8DE 40%, #FAF7F2) !important;
}
html[data-theme="light"] .os-rail-nav::-webkit-scrollbar-thumb,
html[data-theme="light"] .os-rail-nav[data-slide-rail]::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold) 75%, #fff8d6),
    color-mix(in srgb, var(--gold) 45%, #8a7018)
  ) !important;
  border-color: color-mix(in srgb, var(--gold) 30%, transparent) !important;
  box-shadow: 0 0 8px rgba(196, 165, 116, 0.25) !important;
}
html[data-theme="light"] .os-rail-nav::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .os-rail-nav[data-slide-rail]::-webkit-scrollbar-thumb:hover {
  background: var(--gold) !important;
}

html[data-theme="light"] .deck-controls button {
  color: var(--cream) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line)) !important;
}
html[data-theme="light"] .deck-controls button:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}
html[data-theme="light"] .deck-hint {
  color: var(--mute) !important;
}

html[data-theme="light"] .recruiter-dialog,
html[data-theme="light"] .experience-dialog,
html[data-theme="light"] .command-dialog {
  box-shadow: var(--shadow-panel) !important;
}
html[data-theme="light"] .command-dialog input,
html[data-theme="light"] .command-dialog [role="option"],
html[data-theme="light"] .recruiter-dialog a,
html[data-theme="light"] .experience-dialog {
  color: var(--cream) !important;
}

html[data-theme="light"] .main-nav {
  background: color-mix(in srgb, var(--ground) 96%, transparent) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme="light"] .main-nav > button,
html[data-theme="light"] .main-nav > a {
  color: var(--mute-2) !important;
  border-bottom-color: var(--line) !important;
}
html[data-theme="light"] .main-nav > button:hover,
html[data-theme="light"] .main-nav > a:hover,

html[data-theme="light"] .menu-toggle i {
  background: var(--cream) !important;
}
html[data-theme="light"] .button.ghost {
  color: var(--cream) !important;
  border-color: var(--line-strong) !important;
}

html[data-theme="light"] body {
  background: var(--ground);
  color: var(--cream);
}
html[data-theme="light"] .top-progress {
  background: color-mix(in srgb, var(--gold) 16%, transparent) !important;
}

/* Contact / metrics readability */
html[data-theme="light"] #contacto .gb-contact-meta,
html[data-theme="light"] #inicio .gb-metrics span {
  color: var(--mute) !important;
}
html[data-theme="light"] #inicio .gb-card-list b {
  color: var(--cream) !important;
}
html[data-theme="light"] #inicio .gb-card-list small {
  color: var(--mute) !important;
}

/* ============================================================
   FIX LIGHT SURFACES — paper portfolio under ☀ (post #19)
   High-specificity remaps. Dark cinema via :root unchanged.
   ============================================================ */

/* Slide shells: .slide.dark historically = cinema skin; under light = paper */
html[data-theme="light"] .slide,
html[data-theme="light"] .slide.dark,
html[data-theme="light"] .slide.fit,
html[data-theme="light"] .slide.dark.fit,
html[data-theme="light"] .gb-hero,
html[data-theme="light"] .gb-valor-slide,
html[data-theme="light"] .gb-star-slide,
html[data-theme="light"] .gb-demos-slide,
html[data-theme="light"] .gb-route,
html[data-theme="light"] .gb-method,
html[data-theme="light"] .gb-career-slide,
html[data-theme="light"] .gb-line-slide,
html[data-theme="light"] .gb-exp-slide,
html[data-theme="light"] .gb-caps,
html[data-theme="light"] .gb-edu-slide,
html[data-theme="light"] .gb-langs,
html[data-theme="light"] .gb-contact,
html[data-theme="light"] #inicio.slide,
html[data-theme="light"] #valor.slide,
html[data-theme="light"] #sistemas.slide,
html[data-theme="light"] #demos.slide,
html[data-theme="light"] #ruta.slide,
html[data-theme="light"] #metodo.slide,
html[data-theme="light"] #trayectoria.slide,
html[data-theme="light"] #linea.slide,
html[data-theme="light"] #experiencia.slide,
html[data-theme="light"] #experiencia-2.slide,
html[data-theme="light"] #capacidades.slide,
html[data-theme="light"] #formacion.slide,
html[data-theme="light"] #idiomas.slide,
html[data-theme="light"] #contacto.slide {
  background-color: #FAF7F2 !important;
  background-image: none !important;
  color: #2A2622 !important;
}

/* Soft warm wash on cover + contact (not black void) */
html[data-theme="light"] #inicio.slide,
html[data-theme="light"] #contacto.slide {
  background-color: #FAF7F2 !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 18% 20%, rgba(196, 165, 116, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 70%, rgba(101,102,103,0.08), transparent 50%),
    radial-gradient(ellipse 40% 35% at 60% 10%, rgba(92,93,94,0.07), transparent 45%) !important;
}

html[data-theme="light"] #valor.slide,
html[data-theme="light"] .gb-valor-slide {
  background-color: #FAF7F2 !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 165, 116, 0.10), transparent 55%) !important;
}

/* Panels / cards / metrics — paper surfaces, dark ink */
html[data-theme="light"] .gb-panel,
html[data-theme="light"] .gb-career-panel,
html[data-theme="light"] .gb-exp-panel,
html[data-theme="light"] .gb-edu-panel,
html[data-theme="light"] .gb-valor-panel,
html[data-theme="light"] .gb-panel.gb-valor-panel,
html[data-theme="light"] #valor .gb-valor-panel,
html[data-theme="light"] #valor .gb-panel {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.07), transparent 42%),
    linear-gradient(180deg, #FFFEFB, #FAF7F2) !important;
  color: #2A2622 !important;
  border-color: color-mix(in srgb, #C4A574 28%, transparent) !important;
  box-shadow: 0 18px 48px rgba(17, 18, 14, 0.10), 0 0 0 1px color-mix(in srgb, #C4A574 28%, transparent) !important;
}

html[data-theme="light"] .gb-card,
html[data-theme="light"] .gb-loop-card,
html[data-theme="light"] #valor .gb-loop-card,
html[data-theme="light"] #valor [data-valor-loop] article,
html[data-theme="light"] .gb-demo-card,
html[data-theme="light"] .gb-role,
html[data-theme="light"] .gb-cap,
html[data-theme="light"] .gb-engine,
html[data-theme="light"] .gb-step,
html[data-theme="light"] .gb-formula-card,
html[data-theme="light"] .gb-lang-card,
html[data-theme="light"] .gb-star-main,
html[data-theme="light"] .builder-note,
html[data-theme="light"] .education-list li,
html[data-theme="light"] #inicio .gb-metrics > div,
html[data-theme="light"] #sistemas .gb-star-metrics > div,
html[data-theme="light"] #capacidades .gb-cap-bar,
html[data-theme="light"] .gb-city-panel {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.06), transparent 48%),
    #FFFEFB !important;
  color: #2A2622 !important;
  border-color: rgba(17, 18, 14, 0.14) !important;
  box-shadow: 0 12px 32px rgba(17, 18, 14, 0.08);
}

html[data-theme="light"] #valor .gb-loop-card.is-end,
html[data-theme="light"] #metodo .gb-step.is-final,
html[data-theme="light"] #capacidades .gb-cap.is-human {
  background:
    linear-gradient(165deg, rgba(92,93,94,0.10), transparent 50%),
    #f3faf6 !important;
  border-color: color-mix(in srgb, #5c5d5e 35%, rgba(17, 18, 14, 0.12)) !important;
}

/* Hard-coded dark glass → paper chips */
html[data-theme="light"] #sistemas .gb-star-metrics > div,
html[data-theme="light"] #capacidades .gb-engine,
html[data-theme="light"] #experiencia .gb-role-year,
html[data-theme="light"] #experiencia-2 .gb-role-year {
  background: rgba(17, 18, 14, 0.05) !important;
  color: #3a3934 !important;
  border-color: rgba(17, 18, 14, 0.12) !important;
}

/* Experience roles: kill forced cream-on-dark from extra-pass */
html[data-theme="light"] #experiencia .gb-role,
html[data-theme="light"] #experiencia-2 .gb-role {
  color: #2A2622 !important;
  background: transparent !important;
  border-bottom-color: rgba(17, 18, 14, 0.10) !important;
}
html[data-theme="light"] #experiencia .gb-role-title,
html[data-theme="light"] #experiencia-2 .gb-role-title {
  color: #2A2622 !important;
}
html[data-theme="light"] #experiencia .gb-role-sum,
html[data-theme="light"] #experiencia-2 .gb-role-sum {
  color: #6F675F !important;
}
html[data-theme="light"] #experiencia .gb-role-co,
html[data-theme="light"] #experiencia-2 .gb-role-co {
  color: #C4A574 !important;
}

/* Cover ambient — soft paper, not black void */
html[data-theme="light"] #inicio .gb-hero-ambient,
html[data-theme="light"] .gb-hero-ambient {
  background: transparent !important;
  opacity: 1 !important;
}
html[data-theme="light"] #inicio .gb-hero-orb,
html[data-theme="light"] .gb-hero-orb {
  opacity: 0.55 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(0.85);
}
html[data-theme="light"] #inicio .gb-hero-orb-a {
  background: radial-gradient(circle, rgba(196, 165, 116, 0.22), transparent 68%) !important;
}
html[data-theme="light"] #inicio .gb-hero-orb-b {
  background: radial-gradient(circle, rgba(196, 165, 116, 0.12), transparent 70%) !important;
}
html[data-theme="light"] #inicio .gb-hero-orb-c {
  background: radial-gradient(circle, rgba(101,102,103,0.14), transparent 70%) !important;
  opacity: 0.4 !important;
}
html[data-theme="light"] #inicio .gb-hero-grid-fx {
  opacity: 0.35 !important;
  mix-blend-mode: multiply !important;
  background-image:
    linear-gradient(rgba(17, 18, 14, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 18, 14, 0.05) 1px, transparent 1px) !important;
}
html[data-theme="light"] #inicio .gb-hero-grain {
  opacity: 0.03 !important;
  mix-blend-mode: multiply !important;
}
html[data-theme="light"] #inicio .gb-hero-title-band,
html[data-theme="light"] #inicio .gb-title-band.gb-hero-title-band {
  background: linear-gradient(
    90deg,
    rgba(243, 240, 231, 0.95) 0%,
    rgba(243, 240, 231, 0.55) 55%,
    transparent 100%
  ) !important;
  text-shadow: none !important;
}

/* Route map: light ground + visible pins */
html[data-theme="light"] #ruta .gb-route-map {
  background:
    radial-gradient(circle at 50% 54%, rgba(196, 165, 116, 0.14), transparent 38%),
    radial-gradient(circle at 68% 18%, rgba(101,102,103,0.10), transparent 34%),
    radial-gradient(circle at 88% 40%, rgba(196, 74, 47, 0.10), transparent 32%),
    radial-gradient(circle at 18% 86%, rgba(92,93,94,0.10), transparent 36%),
    linear-gradient(155deg, rgba(101,102,103,0.04), transparent 42%, rgba(196, 165, 116, 0.05)),
    #FFFEFB !important;
}
html[data-theme="light"] #ruta .gb-pin span,
html[data-theme="light"] #ruta .gb-route-legend span {
  background: rgba(255, 254, 248, 0.94) !important;
  color: #2A2622 !important;
  border-color: rgba(17, 18, 14, 0.16) !important;
}
html[data-theme="light"] #ruta .gb-pin b {
  color: #2A2622 !important;
}
html[data-theme="light"] #ruta .gb-city-panel {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.06), transparent 40%),
    #FFFEFB !important;
  color: #2A2622 !important;
}

/* Buttons: primary gold OK; ghosts = dark border on paper, not night fills */
html[data-theme="light"] .button.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .header-cta {
  background: #C4A574 !important;
  color: #2A2622 !important;
  border-color: #C4A574 !important;
}
html[data-theme="light"] .button.ghost,
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .dark-button {
  background: transparent !important;
  color: #2A2622 !important;
  border: 1px solid rgba(17, 18, 14, 0.22) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .button.ghost:hover,
html[data-theme="light"] .btn.ghost:hover,
html[data-theme="light"] .dark-button:hover {
  border-color: #C4A574 !important;
  color: #C4A574 !important;
  background: rgba(196, 165, 116, 0.08) !important;
}

/* Chrome: header / rail / controls / dialogs */
html[data-theme="light"] .site-header {
  background: color-mix(in srgb, #FAF7F2 92%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #C4A574 22%, rgba(17, 18, 14, 0.12)) !important;
  color: #2A2622 !important;
}
html[data-theme="light"] .os-rail {
  background: color-mix(in srgb, #FFFEFB 94%, transparent) !important;
  border-right-color: rgba(17, 18, 14, 0.10) !important;
  color: #2A2622 !important;
}
html[data-theme="light"] .os-rail-item {
  color: #6F675F !important;
  background: transparent !important;
}
html[data-theme="light"] .os-rail-item.active,
html[data-theme="light"] .os-rail-item[aria-current="true"] {
  color: #2A2622 !important;
  background: rgba(196, 165, 116, 0.14) !important;
  border-color: color-mix(in srgb, #C4A574 40%, transparent) !important;
}
html[data-theme="light"] .deck-controls button,
html[data-theme="light"] .seg-btn {
  border: 1px solid rgba(17, 18, 14, 0.14) !important;
}
html[data-theme="light"] .seg-btn[aria-pressed="true"],
html[data-theme="light"] .deck-controls button:hover,
html[data-theme="light"] .seg-btn:hover {
  color: #C4A574 !important;
  border-color: #C4A574 !important;
}
html[data-theme="light"] .recruiter-dialog,
html[data-theme="light"] .experience-dialog,
html[data-theme="light"] .command-dialog {
  background: #FFFEFB !important;
  color: #2A2622 !important;
  border-color: rgba(17, 18, 14, 0.14) !important;
}
html[data-theme="light"] body,
html[data-theme="light"] html {
  background: #FAF7F2 !important;
  color: #2A2622 !important;
}

/* Soft muted copy that was hard-coded for dark cinema */
html[data-theme="light"] #sistemas .gb-star-lead {
  color: #6F675F !important;
}
html[data-theme="light"] .gb-step h3,
html[data-theme="light"] .gb-formula-card h3,
html[data-theme="light"] .gb-cap h3,
html[data-theme="light"] .gb-engine h3,
html[data-theme="light"] .gb-lang-card h3,
html[data-theme="light"] .gb-card-title,
html[data-theme="light"] .gb-loop-card h3,
html[data-theme="light"] #valor .gb-loop-card h3,
html[data-theme="light"] #valor .gb-valor-head h2,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  color: #2A2622 !important;
}
html[data-theme="light"] h2 em,
html[data-theme="light"] h1 em,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .slide-index span:first-child {
  color: #C4A574 !important;
}
html[data-theme="light"] .slide-index span:last-child,
html[data-theme="light"] .gb-lead,
html[data-theme="light"] .gb-panel-lead,
html[data-theme="light"] .gb-star-lead,
html[data-theme="light"] .gb-route-lead,
html[data-theme="light"] .gb-langs-lead,
html[data-theme="light"] .gb-demos-lead,
html[data-theme="light"] .gb-method-lead,
html[data-theme="light"] .gb-caps-lead {
  color: #3a3934 !important;
}
html[data-theme="light"] .gb-step p,
html[data-theme="light"] .gb-loop-card p,
html[data-theme="light"] .gb-cap p,
html[data-theme="light"] .gb-card-sub,
html[data-theme="light"] .gb-card-list,
html[data-theme="light"] .tag-row > span {
  color: #6F675F !important;
}
html[data-theme="light"] .tag-row > span {
  background: transparent !important;
  border-color: rgba(17, 18, 14, 0.14) !important;
}

/* Method / career / caps remaining glass */
html[data-theme="light"] #metodo .gb-formula-card,
html[data-theme="light"] #metodo .gb-step,
html[data-theme="light"] #trayectoria .gb-engine,
html[data-theme="light"] #trayectoria .gb-dual > *,
html[data-theme="light"] #formacion .builder-note,
html[data-theme="light"] #formacion .education-list li {
  background: #FFFEFB !important;
  color: #2A2622 !important;
  border-color: rgba(17, 18, 14, 0.12) !important;
}
html[data-theme="light"] #metodo .gb-step.is-final {
  background: #C4A574 !important;
  color: #2A2622 !important;
}
html[data-theme="light"] #metodo .gb-step.is-final h3,
html[data-theme="light"] #metodo .gb-step.is-final p,
html[data-theme="light"] #metodo .gb-step.is-final b,
html[data-theme="light"] #metodo .gb-step.is-final .gb-step-num {
  color: #2A2622 !important;
} !important;
  border-color: color-mix(in srgb, #C4A574 32%, rgba(42, 38, 34, 0.12)) !important;
  color: #2A2622 !important;
  box-shadow: 0 16px 40px rgba(42, 38, 34, 0.08), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
html[data-theme="light"] #inicio .gb-card-title,
html[data-theme="light"] #inicio .gb-card-list b {
  color: #2A2622 !important;
}
html[data-theme="light"] #inicio .gb-card-label,
html[data-theme="light"] #inicio .gb-card-sub,
html[data-theme="light"] #inicio .gb-card-list small {
  color: #6F675F !important;
}
html[data-theme="light"] #inicio .gb-card-list li {
  background: color-mix(in srgb, #FFFEFB 80%, #EFE8DE) !important;
  border-color: rgba(42, 38, 34, 0.10) !important;
}

/* Seg / theme toggles — nude inactive, champagne active, never accidental gray */
html[data-theme="light"] .seg {
  background: #F3EDE4 !important;
  border-color: rgba(42, 38, 34, 0.14) !important;
}
html[data-theme="light"] .seg-btn {
  color: #6F675F !important;
  background: transparent !important;
}
html[data-theme="light"] .seg-btn.is-active,
html[data-theme="light"] .seg-btn[aria-pressed="true"] {
  background: #C4A574 !important;
  color: #2A2622 !important;
}
html[data-theme="dark"] .seg {
  background: color-mix(in srgb, #1C1916 80%, transparent) !important;
  border-color: rgba(247, 243, 236, 0.14) !important;
}
html[data-theme="dark"] .seg-btn {
  color: #8A8178 !important;
}
html[data-theme="dark"] .seg-btn.is-active,
html[data-theme="dark"] .seg-btn[aria-pressed="true"] {
  background: #C4A574 !important;
  color: #2A2622 !important;
}

/* Primary buttons — soft gold + dark ink */
.button.primary,
.gb-actions .button.primary,
.header-cta {
  background: #C4A574 !important;
  color: #2A2622 !important;
}
.button.primary:hover,
.gb-actions .button.primary:hover,
.header-cta:hover {
  background: #D4B896 !important;
  color: #2A2622 !important;
}

/* ============================================================
   CAREER06 SCROLL FIX + METHOD is-final CONTRAST (2026-09-10)
   Loads last. Internal track scroll + readable ACTIVAR step.
   ============================================================ */

/* —— Track A/B: natural row height → overflow → internal scroll —— */
#trayectoria .gb-engine {
  min-height: 0 !important;
  overflow: hidden !important; /* header + list + chip stay framed */
}
#trayectoria .gb-engine-list,
#trayectoria .gb-engine .gb-engine-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin !important;
  scrollbar-color: #C4A574 rgba(196, 165, 116, 0.14) !important;
}
#trayectoria .gb-engine-list::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}
#trayectoria .gb-engine-list::-webkit-scrollbar-track {
  background: rgba(196, 165, 116, 0.10) !important;
  border-radius: 999px !important;
}
#trayectoria .gb-engine-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4B896, #C4A574) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(250, 247, 242, 0.25) !important;
}
#trayectoria .gb-engine-list li {
  flex: 0 0 auto !important; /* CRITICAL: don't compress rows — enable scroll */
  min-height: 56px !important;
  height: auto !important;
}
#trayectoria .gb-career-break {
  flex-shrink: 0 !important; /* descanso chip always visible under Track B list */
}
#trayectoria .gb-panel-bar {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

html[data-theme="light"] #trayectoria .gb-engine-list {
  scrollbar-color: #C4A574 rgba(196, 165, 116, 0.18) !important;
}
html[data-theme="light"] #trayectoria .gb-engine-list::-webkit-scrollbar-track {
  background: rgba(196, 165, 116, 0.12) !important;
}
html[data-theme="light"] #trayectoria .gb-engine-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4B896, #C4A574) !important;
}

@media (max-width: 980px) {
  #trayectoria .gb-engine {
    max-height: none !important;
    overflow: visible !important;
  }
  #trayectoria .gb-engine-list {
    max-height: min(42vh, 360px) !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 640px) {
  #trayectoria .gb-engine-list {
    max-height: min(38vh, 320px) !important;
  }
  #trayectoria .gb-engine-list li {
    min-height: 48px !important;
  }
}

/* —— Method steps: dark theme readable; is-final champagne accents —— */
#metodo .gb-step {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.10), transparent 52%),
    var(--panel-2, #221E1A) !important;
  border: 1px solid color-mix(in srgb, #C4A574 28%, transparent) !important;
  color: #F7F3EC !important;
}
#metodo .gb-step-num {
  color: #C4A574 !important;
}
#metodo .gb-step h3 {
  color: #FFFEFB !important;
}
#metodo .gb-step p {
  color: #B8AFA4 !important;
}
#metodo .gb-step b {
  color: #D4B896 !important;
}

/* Step 04 ACTIVAR — was dark-ink on dark after nude palette */
#metodo .gb-step.is-final {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.18), transparent 48%),
    #1C1916 !important;
  border-color: color-mix(in srgb, #C4A574 55%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(196, 165, 116, 0.22),
    0 18px 40px rgba(0, 0, 0, 0.35) !important;
  color: #FFFEFB !important;
}
#metodo .gb-step.is-final .gb-step-num {
  color: #D4B896 !important;
}
#metodo .gb-step.is-final h3 {
  color: #FFFEFB !important;
}
#metodo .gb-step.is-final p {
  color: #E8DFD2 !important;
}
#metodo .gb-step.is-final b {
  color: #C4A574 !important;
}

/* Light theme: paper/gold cards keep dark ink (i18n untouched) */
html[data-theme="light"] #metodo .gb-step {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.08), transparent 48%),
    #FFFEFB !important;
  border-color: rgba(17, 18, 14, 0.14) !important;
  color: #2A2622 !important;
}
html[data-theme="light"] #metodo .gb-step-num {
  color: #C4A574 !important;
}
html[data-theme="light"] #metodo .gb-step h3 {
  color: #2A2622 !important;
}
html[data-theme="light"] #metodo .gb-step p {
  color: #4A443E !important;
}
html[data-theme="light"] #metodo .gb-step b {
  color: #8A6F3E !important;
}
html[data-theme="light"] #metodo .gb-step.is-final {
  background:
    linear-gradient(165deg, rgba(196, 165, 116, 0.22), transparent 45%),
    #F3EDE4 !important;
  border-color: color-mix(in srgb, #C4A574 50%, rgba(17, 18, 14, 0.12)) !important;
  box-shadow: 0 14px 32px rgba(17, 18, 14, 0.10) !important;
  color: #2A2622 !important;
}
html[data-theme="light"] #metodo .gb-step.is-final .gb-step-num,
html[data-theme="light"] #metodo .gb-step.is-final b {
  color: #8A6F3E !important;
}
html[data-theme="light"] #metodo .gb-step.is-final p {
  color: #3a3934 !important;
}

/* ============================================================
   LÍNEA 07 — navy FRAME only; slide uses normal theme background
   Sampled from timeline-horizontal.png edges ≈ #010407 / #020508
   Undo prior full-slide #010407 lock (both themes).
   ============================================================ */
:root {
  --timeline-navy-locked: #010407;
}

/* Slide shell: themed (cinema dark / paper light) — NOT full-slide navy */
#linea.slide,
#linea.gb-line-slide,
.gb-line-slide#linea {
  background: var(--ground, var(--bg)) !important;
  background-color: var(--ground, var(--bg)) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

/* Frame + img letterbox: always match timeline navy */
#linea .gb-line-frame {
  background: #010407 !important;
  background-color: #010407 !important;
  border-color: color-mix(in srgb, #C4A574 22%, #0e1114) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55) !important;
}
#linea .gb-line-frame img {
  background: #010407 !important;
  background-color: #010407 !important;
}

/* Title band: theme-readable (not forced light-on-navy for whole slide) */
#linea .gb-line-head,
#linea .gb-title-band {
  color: var(--cream) !important;
}
#linea .gb-line-head h2,
#linea .gb-line-head .eyebrow,
#linea .slide-index span:first-child {
  color: var(--cream) !important;
}
#linea .gb-line-head h2 em,
#linea .eyebrow {
  color: var(--gold, #C4A574) !important;
}
#linea .gb-line-kicker,
#linea .slide-index span:last-child {
  color: var(--mute-2) !important;
}
#linea .slide-index i {
  background: color-mix(in srgb, var(--gold, #C4A574) 55%, transparent) !important;
}

html[data-theme="light"] #linea.slide,
html[data-theme="light"] #linea.gb-line-slide,
html[data-theme="light"] .gb-line-slide#linea {
  background: var(--ground, var(--bg)) !important;
  background-color: var(--ground, var(--bg)) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

/* Frame stays navy in light (image letterbox match) */
html[data-theme="light"] #linea .gb-line-frame {
  background: #010407 !important;
  background-color: #010407 !important;
  border-color: color-mix(in srgb, #C4A574 22%, #0e1114) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="light"] #linea .gb-line-frame img {
  background: #010407 !important;
  background-color: #010407 !important;
}

/* Light title band: ink on paper */
html[data-theme="light"] #linea .gb-line-head,
html[data-theme="light"] #linea .gb-title-band {
  color: var(--cream) !important;
}
html[data-theme="light"] #linea .gb-line-head h2,
html[data-theme="light"] #linea .slide-index span:first-child {
  color: var(--cream) !important;
}
html[data-theme="light"] #linea .gb-line-head h2 em,
html[data-theme="light"] #linea .eyebrow {
  color: var(--gold, #C4A574) !important;
}