/* =============================================================
   BUSHI CONSULTING LAB · HOME · DESIGN SYSTEM v2
   Paleta refinada + ilustraciones 3D inline
   Identidad: bushi negro/blanco + bombilla verde con hoja
   ============================================================= */

:root {
  /* === BASE — DEEPER NAVY (más sofisticado) === */
  --bg: #050810;
  --bg-1: #0a111c;
  --bg-2: #111827;
  --bg-3: #1a2438;
  --bg-4: #243349;

  /* === LINES === */
  --line: #1a2438;
  --line-2: #2a3650;
  --line-3: #3a4866;

  /* === TEXT === */
  --txt: #fafafa;
  --txt-2: #c8d3e3;
  --txt-3: #7a8aa3;
  --txt-4: #4a5675;

  /* === ACCENT — emerald (sofisticado, no lima) === */
  --accent: #10b981;          /* emerald-500 — UI principal */
  --accent-bright: #34d399;   /* emerald-400 — hover/highlight */
  --accent-deep: #059669;     /* emerald-600 — texto destacado */
  --accent-dim: #065f46;      /* emerald-800 — borders */
  --accent-dark: #064e3b;
  --accent-glow: rgba(16, 185, 129, 0.18);

  /* === BUSHI GREEN (logo bulb only) === */
  --bushi-green: #22c55e;

  /* === WARM === */
  --warm: #fbbf24;

  /* === TYPE === */
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --display: 'Inter', -apple-system, sans-serif;

  /* === LAYOUT === */
  --gutter: 56px;
  --max: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 8, 16, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap;
}
.brand-mark {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--txt);
  line-height: 1;
}
.brand-bulb {
  display: inline-flex;
  width: 26px; height: 32px;
  color: var(--txt-2);
}
.brand-bulb svg { width: 100%; height: 100%; }
.brand-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
}

.nav-mid {
  display: flex; gap: 28px; justify-content: center;
}
.nav-mid a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
  padding: 6px 0;
  position: relative;
  transition: color 0.18s;
}
.nav-mid a:hover { color: var(--txt); }
.nav-mid a.active { color: var(--accent); }
.nav-mid a.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 18px;
  background: var(--accent);
  color: #050810;
  border-radius: 2px;
  transition: all 0.18s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--accent-glow);
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  padding: 100px var(--gutter) 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.08), transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(5, 150, 105, 0.06), transparent 55%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
}
.hero-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle at 30% 30%, #10b981, transparent 65%);
  top: -120px; right: -80px;
}
.hero-orb-2 {
  width: 260px; height: 260px;
  background: radial-gradient(circle at 30% 30%, #059669, transparent 65%);
  bottom: -80px; left: -60px;
}
.hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 32px;
  padding: 8px 16px;
  border: 1px solid var(--accent-dim);
  background: rgba(16, 185, 129, 0.06);
  border-radius: 2px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 900;
  margin-bottom: 32px;
  color: var(--txt);
}
.light { color: var(--txt-3); font-weight: 300; }
.accent { color: var(--accent); }

.hero-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-2);
  max-width: 580px;
  margin-bottom: 36px;
}
.hero-sub strong { color: var(--txt); font-weight: 600; }

.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 2px;
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #050810;
  border: 1px solid var(--accent);
}
.btn-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--accent-glow);
}
.btn-secondary {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--line-3);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-ghost {
  background: rgba(5, 8, 16, 0.5);
  color: var(--txt-2);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.hero-quote {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 22px;
  border-left: 2px solid var(--accent-dim);
  background: rgba(5, 8, 16, 0.4);
  max-width: 580px;
}
.hero-quote span {
  font-style: italic;
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.55;
}
.hero-quote strong {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-3);
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 4px;
}

.hero-r {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iso-bulb {
  width: 100%;
  max-width: 480px;
  height: auto;
  animation: floatIso 6s ease-in-out infinite;
}
@keyframes floatIso {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* =============================================================
   KPI BAND
   ============================================================= */
.kpi-band {
  padding: 48px var(--gutter);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.kpi-band-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 700;
  margin-bottom: 28px;
  text-align: center;
}
.kpi-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
}
.kpi-cell {
  padding: 14px 28px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.kpi-cell:last-child { border-right: none; }
.kpi-num {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--txt);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.kpi-num.accent { color: var(--accent); }
.kpi-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-2);
  font-weight: 700;
  margin-bottom: 6px;
}
.kpi-source {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.04em;
}

/* =============================================================
   OBSERVATORIO · BLOQUE DESTACADO
   ============================================================= */
.observatorio {
  padding: 72px var(--gutter);
  background:
    radial-gradient(ellipse at top left, rgba(16, 185, 129, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg) 60%);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.obs-frame {
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), transparent 70%), var(--bg-1);
  padding: 56px 56px 48px;
  position: relative;
  overflow: hidden;
}
.obs-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-bright), var(--accent), var(--accent-deep));
}
.obs-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 36px;
  padding: 8px 16px;
  border: 1px solid var(--accent-dim);
  background: rgba(16, 185, 129, 0.08);
  border-radius: 2px;
}
.obs-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.obs-l h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 900;
  margin-bottom: 24px;
}
.obs-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt-2);
  margin-bottom: 32px;
}
.obs-lead strong { color: var(--txt); font-weight: 600; }

.obs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.obs-stat-num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.obs-stat-num .u {
  font-size: 11px;
  color: var(--txt-3);
  margin-left: 3px;
  font-weight: 500;
}
.obs-stat-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
}

.obs-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.obs-r {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 24px;
}
.iso-globe {
  width: 100%;
  max-width: 360px;
  height: auto;
  animation: rotateOrb 18s linear infinite;
}
@keyframes rotateOrb {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-8px); }
}
.obs-tiles {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.obs-tile {
  background: rgba(5, 8, 16, 0.6);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 2px;
  transition: all 0.2s;
}
.obs-tile:hover {
  border-left-color: var(--accent-bright);
  background: rgba(5, 8, 16, 0.85);
  transform: translateX(3px);
}
.obs-tile-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.obs-tile-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.005em;
}

/* =============================================================
   SEC (genérica)
   ============================================================= */
.sec {
  padding: 88px var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.sec-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 18px;
}
.sec h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 900;
  margin-bottom: 20px;
}
.sec-lead {
  font-size: 16px;
  color: var(--txt-2);
  line-height: 1.65;
  max-width: 820px;
  margin-bottom: 48px;
}

/* =============================================================
   SERVICIOS
   ============================================================= */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.serv-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.serv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.serv-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-4px);
  background: var(--bg-2);
}
.serv-card:hover::before { transform: scaleX(1); }

.serv-icon {
  width: 96px; height: 96px;
  margin-bottom: 22px;
  filter: drop-shadow(0 12px 24px rgba(16, 185, 129, 0.18));
  transition: transform 0.4s;
}
.serv-card:hover .serv-icon {
  transform: scale(1.08) rotate(-2deg);
}

.serv-card-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.serv-card h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--txt);
}
.serv-card h3 small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-transform: none;
}
.serv-card p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.6;
  margin: 18px 0 22px;
  flex: 1;
}
.serv-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
}
.serv-tags span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.serv-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
}
.serv-cta .arrow { transition: transform 0.2s; }
.serv-card:hover .serv-cta .arrow { transform: translateX(4px); }

/* =============================================================
   INVESTIGACIÓN
   ============================================================= */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.inv-item {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 28px 26px;
  transition: all 0.25s;
  position: relative;
}
.inv-item.active {
  border-color: var(--accent-dim);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), transparent), var(--bg-1);
  cursor: pointer;
}
.inv-item.active:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.inv-item.placeholder { opacity: 0.7; }
.inv-item.placeholder .inv-item-tag { color: var(--warm); }
.inv-item-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.inv-item-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  line-height: 1.2;
}
.inv-item-desc {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.6;
  margin-bottom: 18px;
}
.inv-item-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.1em;
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* =============================================================
   CONTACTO
   ============================================================= */
.contact { background: var(--bg-1); border-bottom: 1px solid var(--line); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-info {
  display: flex; flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
.contact-info > div {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.contact-info > div:last-child { border-bottom: none; }
.contact-info-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
}
.contact-info-v {
  font-size: 15px;
  color: var(--txt);
  font-weight: 500;
}
a.contact-info-v:hover { color: var(--accent); }

.contact-form {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 36px 32px;
}
.contact-form-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.contact-form label > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-row label { margin-bottom: 18px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  transition: all 0.18s;
  outline: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--txt-4);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.contact-form textarea {
  resize: vertical;
  font-family: var(--sans);
}
.form-submit {
  width: 100%;
  background: var(--accent);
  color: #050810;
  border: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
}
.form-submit:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px var(--accent-glow);
}

/* =============================================================
   FOOTER
   ============================================================= */
footer {
  background: var(--bg);
  padding: 56px var(--gutter) 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-brand-block p {
  font-size: 13px;
  color: var(--txt-3);
  line-height: 1.6;
  margin-top: 16px;
  max-width: 360px;
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
}
.footer-logo .brand-bulb { color: var(--txt-2); }

.footer-col {
  display: flex; flex-direction: column;
}
.footer-col h6 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-col a, .footer-col span {
  font-size: 13px;
  color: var(--txt-2);
  padding: 5px 0;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1280px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
  :root { --gutter: 36px; }
  .nav { gap: 14px; }
  .nav-mid { gap: 18px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-r { order: -1; }
  .iso-bulb { max-width: 320px; }
  .obs-grid { grid-template-columns: 1fr; gap: 40px; }
  .serv-grid { grid-template-columns: 1fr; }
  .inv-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .obs-frame { padding: 40px 32px; }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .nav { grid-template-columns: auto auto; }
  .nav-mid { display: none; }
  .hero { padding: 60px var(--gutter) 48px; }
  .iso-bulb { max-width: 260px; }
  .kpi-band-grid { grid-template-columns: 1fr 1fr; }
  .kpi-cell:nth-child(2) { border-right: none; }
  .kpi-cell:nth-last-child(-n+2) { padding-top: 28px; }
  .obs-stats { grid-template-columns: 1fr; gap: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* =============================================================
   QUIÉN ESTÁ DETRÁS DE BUSHI · sección bio (v3)
   ============================================================= */
.quien {
  padding: 96px var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.quien-eyebrow {
  text-align: center;
  margin-bottom: 36px;
}
.quien-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.quien-photo-wrap { position: relative; }
.quien-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background: var(--bg-2);
  object-fit: cover;
  display: block;
  border: 1px solid var(--accent-dim);
}
.quien-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px dashed var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  padding: 16px;
  line-height: 1.5;
}
.quien-meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--txt-3);
  text-transform: uppercase;
  font-weight: 600;
}
.quien-content h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin-bottom: 24px;
}
.quien-content p {
  color: var(--txt-2);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.quien-content strong {
  color: var(--txt);
  font-weight: 600;
}
.quien-creds {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
}
.quien-cred {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quien-cred-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.quien-cred-v {
  font-size: 14px;
  color: var(--txt);
  line-height: 1.4;
}
.quien-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  transition: gap 0.2s ease;
}
.quien-link:hover { gap: 14px; color: var(--accent-bright); }

@media (max-width: 1100px) {
  .quien-grid { grid-template-columns: 280px 1fr; gap: 40px; }
}
@media (max-width: 820px) {
  .quien-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .quien-photo-wrap { max-width: 280px; }
  .quien-creds { grid-template-columns: 1fr; }
}

/* =============================================================
   OBSERVATORIO SECUNDARIO · HIDROVÍA (en desarrollo)
   ============================================================= */
.observatorio .obs-frame + .obs-frame {
  margin-top: 32px;
}

.obs-frame-secondary {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.035), transparent 70%), var(--bg-1);
}
.obs-frame-secondary::before {
  background: linear-gradient(90deg, #92400e, #fbbf24, #fde68a, #fbbf24, #92400e);
}

.obs-eyebrow-warm {
  color: var(--warm) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
  background: rgba(251, 191, 36, 0.06) !important;
}
.pulse-warm {
  width: 8px; height: 8px;
  background: var(--warm);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--warm);
  animation: pulse 2s infinite;
}

/* Pills row */
.obs-pill-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px;
}
.obs-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  padding: 6px 11px;
  background: rgba(5, 8, 16, 0.6);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* River illustration container */
.iso-river {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Tile warm variant */
.obs-tile-warm {
  border-left-color: var(--warm) !important;
}
.obs-tile-warm:hover {
  border-left-color: #fde68a !important;
}
.obs-tile-warm .obs-tile-tag {
  color: var(--warm) !important;
}

/* Detail bloque expandido */
.obs-detail {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(251, 191, 36, 0.18);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.obs-detail-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.obs-detail-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}
.obs-detail-col p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--txt-2);
}

@media (max-width: 1100px) {
  .obs-detail { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
  .observatorio .obs-frame + .obs-frame { margin-top: 24px; }
}

/* =============================================================
   PÁGINA TEMA · header + bloques internos
   ============================================================= */
.tema-h {
  padding: 88px var(--gutter) 56px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(251, 191, 36, 0.08), transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(16, 185, 129, 0.06), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.tema-h-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.tema-crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--txt-3);
  margin-bottom: 28px;
}
.tema-crumbs a { color: var(--txt-3); transition: color 0.18s; }
.tema-crumbs a:hover { color: var(--accent); }
.tema-crumbs .sep { margin: 0 10px; opacity: 0.5; }
.tema-crumbs .current { color: var(--txt); }

.tema-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 700;
  margin-bottom: 28px;
  padding: 8px 16px;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.06);
  border-radius: 2px;
}

.tema-h h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 900;
  margin-bottom: 32px;
}
.tema-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--txt-2);
  max-width: 880px;
  margin-bottom: 40px;
}
.tema-lead strong { color: var(--txt); font-weight: 600; }

.tema-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.tema-meta > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}
.tema-meta > div:first-child { padding-left: 0; }
.tema-meta > div:last-child { border-right: none; padding-right: 0; }
.tema-meta span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--txt-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.tema-meta strong {
  font-size: 13px;
  color: var(--txt);
  font-weight: 600;
}

.sec-alt {
  background: var(--bg-1);
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.sec-alt > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Problema cards */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.prob-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warm);
  padding: 24px 26px;
  border-radius: 2px;
  transition: all 0.22s;
}
.prob-card:hover { transform: translateY(-2px); border-left-color: #fde68a; }
.prob-card-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--warm);
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 8px;
}
.prob-card-h {
  font-size: 18px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.prob-card p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.6;
}

/* Pasos críticos */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.paso {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 18px 20px;
  border-radius: 2px;
  transition: all 0.22s;
}
.paso:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  background: var(--bg-3);
}
.paso-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.paso-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.paso-desc {
  font-size: 12px;
  color: var(--txt-3);
  line-height: 1.55;
}

/* Capas stack */
.capas-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.capa {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 32px;
  border-radius: 2px;
  align-items: start;
  transition: all 0.22s;
}
.capa:hover {
  border-color: var(--accent-dim);
  background: var(--bg-2);
}
.capa-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 700;
  padding-top: 4px;
}
.capa-h {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin-bottom: 10px;
}
.capa-content p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.65;
  margin-bottom: 14px;
}
.capa-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.capa-tags span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
}

/* Actores */
.actor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.actor {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 26px 28px;
  border-radius: 2px;
  transition: all 0.22s;
}
.actor:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
}
.actor-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 10px;
}
.actor-h {
  font-size: 17px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.actor p {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.6;
}

/* Roadmap */
.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.rm-item {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 24px 22px;
  border-radius: 2px;
  position: relative;
}
.rm-item:nth-child(2n) { border-top-color: var(--accent-bright); }
.rm-phase {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.16em;
  font-weight: 700;
  margin-bottom: 10px;
}
.rm-h {
  font-size: 17px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.rm-item p {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.55;
}

/* Colaborar */
.colab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.colab-card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 28px 30px;
  border-radius: 2px;
  transition: all 0.22s;
}
.colab-card:hover {
  border-color: var(--accent);
  background: var(--bg-3);
}
.colab-card-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 12px;
}
.colab-card-h {
  font-size: 18px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.colab-card p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.6;
}
.colab-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 40px;
  justify-content: center;
}

@media (max-width: 1100px) {
  .tema-meta { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tema-meta > div { padding: 0; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .tema-meta > div:last-child { border-bottom: none; }
  .prob-grid, .colab-grid { grid-template-columns: 1fr; }
  .pasos-grid { grid-template-columns: 1fr 1fr; }
  .capa { grid-template-columns: 1fr; gap: 14px; }
  .actor-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pasos-grid, .roadmap { grid-template-columns: 1fr; }
}

/* =============================================================
   OBSERVATORIO · INTRO (header de "temas abiertos")
   ============================================================= */
.obs-intro {
  max-width: 1280px;
  margin: 0 auto 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.obs-intro-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.obs-intro-h {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--txt);
  margin-bottom: 16px;
}
.obs-intro-lead {
  font-size: 15px;
  color: var(--txt-2);
  line-height: 1.6;
  max-width: 780px;
}
.obs-intro-lead strong { color: var(--txt); font-weight: 600; }

/* =============================================================
   SIMULADOR HIDROVÍA · TEMA
   ============================================================= */

.hsim-section { padding-top: 96px; padding-bottom: 96px; }

.hsim-disclaimer {
  margin-bottom: 36px;
  padding: 18px 22px;
  background: rgba(251, 191, 36, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-left: 2px solid var(--warm);
  border-radius: 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.hsim-disclaimer-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--warm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 2px;
  white-space: nowrap;
}
.hsim-disclaimer-text {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.65;
}
.hsim-disclaimer-text strong { color: var(--txt); font-weight: 600; }

/* Layout grid */
.hsim-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
}

/* Panel (inputs) */
.hsim-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.hsim-panel-h {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
}
.hsim-panel-h-t {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hsim-panel-h-t::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
.hsim-panel-h-meta {
  font-size: 9px;
  color: var(--txt-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hsim-controls { padding: 24px 22px; }
.hsim-grp { margin-bottom: 22px; }
.hsim-grp:last-child { margin-bottom: 0; }
.hsim-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.hsim-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hsim-pill {
  flex: 1 1 calc(50% - 6px);
  padding: 9px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-weight: 500;
  border-radius: 2px;
}
.hsim-pill:hover { color: var(--txt); border-color: var(--accent-dim); }
.hsim-pill.active {
  background: var(--accent);
  color: #050810;
  border-color: var(--accent);
  font-weight: 700;
}

/* Output stack */
.hsim-output-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Score card */
.hsim-score-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.hsim-score-l {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.hsim-score-num {
  font-family: var(--mono);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.hsim-score-num .u { font-size: 16px; color: var(--txt-3); margin-left: 4px; font-weight: 500; }
.hsim-score-msg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-2);
  letter-spacing: 0.06em;
  line-height: 1.55;
}

/* Light / semáforo */
.hsim-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.hsim-light-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: all 0.3s;
}
.hsim-light-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.hsim-light-green .hsim-light-dot { background: #22c55e; box-shadow: 0 0 16px rgba(34,197,94,0.6); }
.hsim-light-green .hsim-light-l { color: #22c55e; }
.hsim-light-yellow .hsim-light-dot { background: #fbbf24; box-shadow: 0 0 16px rgba(251,191,36,0.6); }
.hsim-light-yellow .hsim-light-l { color: #fbbf24; }
.hsim-light-red .hsim-light-dot { background: #f87171; box-shadow: 0 0 16px rgba(248,113,113,0.6); }
.hsim-light-red .hsim-light-l { color: #f87171; }

/* Out card */
.hsim-out-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px 26px;
}
.hsim-out-h {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.hsim-out-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}
.hsim-out-cell { display: flex; flex-direction: column; gap: 4px; }
.hsim-out-l {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.hsim-out-v {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.hsim-out-v .u {
  font-size: 11px;
  color: var(--txt-3);
  margin-left: 4px;
  font-weight: 500;
}
.hsim-out-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Pasos críticos card */
.hsim-pasos-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px 26px;
}
.hsim-pasos-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.hsim-paso-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.hsim-paso-name {
  font-size: 13px;
  color: var(--txt);
  font-weight: 500;
}
.hsim-paso-state {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 2px;
}
.hsim-paso-ok { background: rgba(34,197,94,0.10); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.hsim-paso-monitor { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.hsim-paso-warn { background: rgba(251,191,36,0.10); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.hsim-paso-crit { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

/* Bridge a colaboración */
.hsim-bridge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent 60%), var(--bg-1);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  padding: 28px 30px;
}
.hsim-bridge-h {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.hsim-bridge-p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.65;
  margin-bottom: 20px;
}
.hsim-bridge-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .hsim-grid { grid-template-columns: 1fr; }
  .hsim-out-grid { grid-template-columns: 1fr; }
  .hsim-disclaimer { grid-template-columns: 1fr; gap: 8px; }
  .hsim-score-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .hsim-pill { flex: 1 1 100%; }
}

/* =============================================================
   ÍNDICE DE TEMAS · cards navegables
   ============================================================= */
.temas-index {
  max-width: 1280px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tema-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px 22px;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}
.tema-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.tema-card:hover { transform: translateY(-3px); }
.tema-card:hover::before { transform: scaleX(1); }

.tema-card.tema-active {
  border-color: var(--accent-dim);
  background: linear-gradient(135deg, rgba(16,185,129,0.04), transparent), var(--bg-1);
}
.tema-card.tema-active::before { background: var(--accent); }
.tema-card.tema-active:hover { border-color: var(--accent); }

.tema-card.tema-dev {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251,191,36,0.03), transparent), var(--bg-1);
}
.tema-card.tema-dev::before { background: var(--warm); }
.tema-card.tema-dev:hover { border-color: var(--warm); }

.tema-card.tema-soon {
  opacity: 0.72;
  cursor: default;
}
.tema-card.tema-soon::before { background: var(--txt-3); }

.tema-card-status {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-active { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s infinite; }
.status-dev { background: var(--warm); box-shadow: 0 0 8px var(--warm); animation: pulse 2.4s infinite; }
.status-soon { background: var(--txt-4); }
.status-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--txt-3);
}
.tema-active .status-label { color: var(--accent); }
.tema-dev .status-label { color: var(--warm); }

.tema-card-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 8px;
}
.tema-card-h {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--txt);
  line-height: 1.2;
  margin-bottom: 10px;
}
.tema-card-desc {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}
.tema-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}
.tema-dev .tema-card-cta { color: var(--warm); }
.tema-soon .tema-card-cta { color: var(--txt-3); }
.tema-card-cta .arrow {
  transition: transform 0.2s;
}
.tema-card:hover .tema-card-cta .arrow {
  transform: translateX(4px);
}
.tema-soon:hover .tema-card-cta .arrow {
  transform: none;
}

/* Footer soon item */
.footer-soon {
  font-size: 12px !important;
  color: var(--txt-4) !important;
  font-style: italic;
  cursor: default;
}

@media (max-width: 1100px) {
  .temas-index { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .temas-index { grid-template-columns: 1fr; }
}

/* =============================================================
   TEMA · BIOCOMBUSTIBLES · cluster cards, charts SVG, etc.
   ============================================================= */

/* Clusters */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cluster-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 22px 24px;
  border-radius: 2px;
  transition: all 0.22s;
}
.cluster-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
}
.cluster-card.cluster-cana { border-left-color: #22c55e; }
.cluster-card.cluster-soja { border-left-color: #34d399; }
.cluster-card.cluster-gana { border-left-color: #f59e0b; }
.cluster-card.cluster-agro { border-left-color: #10b981; }
.cluster-card.cluster-mix  { border-left-color: #fbbf24; }

.cluster-card-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.cluster-card.cluster-gana .cluster-card-tag,
.cluster-card.cluster-mix .cluster-card-tag { color: var(--warm); }

.cluster-card-h {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--txt);
  margin-bottom: 4px;
}
.cluster-card-loc {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.cluster-card p {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.cluster-card-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cluster-card-flow > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cluster-card-flow strong {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 600;
}

/* Chart card */
.chart-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px 28px;
}
.chart-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}
.chart-card-h-t {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.chart-card-h-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--txt-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-svg-square {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.chart-legend {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-2);
  font-weight: 600;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Chart row (donut + ranking) */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.chart-card-half {}

/* Rank list (donut companion) */
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rank-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.rank-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.rank-name {
  font-size: 13px;
  color: var(--txt);
  font-weight: 500;
}
.rank-pct {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.chart-card-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--txt-2);
  line-height: 1.6;
}
.chart-card-foot strong {
  color: var(--txt);
  font-weight: 600;
}

/* Bars H (insumos) */
.bars-h {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 18px;
  align-items: center;
}
.bar-label {
  font-size: 13px;
  color: var(--txt);
  font-weight: 500;
}
.bar-track {
  display: flex;
  height: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.bar-imp {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #050810;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
}
.bar-loc {
  background: linear-gradient(90deg, #10b981, #34d399);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #050810;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
}
.bar-imp:empty, .bar-loc:empty { padding: 0; }
.bar-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.04em;
}

/* Brechas */
.brecha-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.brecha-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 30px;
  border-radius: 2px;
  position: relative;
  transition: all 0.22s;
}
.brecha-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
}
.brecha-card-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 10px;
}
.brecha-card-h {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--txt);
  margin-bottom: 12px;
  line-height: 1.2;
}
.brecha-card p {
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.brecha-card p strong {
  color: var(--txt);
  font-weight: 600;
}
.brecha-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--accent-dim);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 700;
  border-radius: 2px;
}

/* Impact grid */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.impact-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 26px 24px;
  border-radius: 2px;
}
.impact-num {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.impact-num .u {
  font-size: 11px;
  color: var(--txt-3);
  margin-left: 4px;
  font-weight: 500;
}
.impact-l {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.impact-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .cluster-grid { grid-template-columns: 1fr 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .brecha-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
@media (max-width: 600px) {
  .cluster-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .chart-card { padding: 18px 20px; }
}

/* =============================================================
   DATA TABLES · clustering detallado, offtakes, precios
   ============================================================= */
.data-table-wrap {
  overflow-x: auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}
.data-table thead {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
.data-table th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.data-table th.num {
  text-align: right;
}
.data-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--txt-2);
  vertical-align: middle;
  line-height: 1.5;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-2); }
.data-table td.num {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--txt);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table td strong {
  color: var(--txt);
  font-weight: 700;
}

/* Cluster tag dentro de tabla */
.cluster-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.cluster-tag.c-cana { background: rgba(34,197,94,0.10); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.cluster-tag.c-soja { background: rgba(52,211,153,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.cluster-tag.c-gana { background: rgba(245,158,11,0.10); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.cluster-tag.c-agro { background: rgba(16,185,129,0.10); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.cluster-tag.c-mix  { background: rgba(251,191,36,0.10); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }

/* Origen pills (importado / local) */
.origin-imp,
.origin-local {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.origin-imp   { background: rgba(251,191,36,0.10); color: #fbbf24; border: 1px solid rgba(251,191,36,0.30); }
.origin-local { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.30); }

/* Country chips (destinos) */
.country-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.country-chip {
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-2);
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
}
.country-chip.primary {
  background: var(--accent);
  color: #050810;
  border-color: var(--accent);
  font-weight: 700;
}

/* Concentración tag */
.conc {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  border-radius: 2px;
  font-weight: 700;
  white-space: nowrap;
}
.conc-high     { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.30); }
.conc-med      { background: rgba(251,191,36,0.10); color: #fbbf24; border: 1px solid rgba(251,191,36,0.30); }
.conc-low      { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.30); }
.conc-internal { background: rgba(99,102,241,0.10); color: #818cf8; border: 1px solid rgba(99,102,241,0.30); }

/* Trend indicators */
.trend {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 2px;
  font-weight: 700;
  white-space: nowrap;
}
.trend-up        { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.30); }
.trend-up-strong { background: rgba(34,197,94,0.14); color: #22c55e; border: 1px solid rgba(34,197,94,0.40); }
.trend-flat      { background: rgba(122,138,163,0.10); color: var(--txt-3); border: 1px solid var(--line-2); }
.trend-down      { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.30); }

/* Callout block */
.callout {
  margin-top: 28px;
  padding: 22px 26px;
  background: rgba(16,185,129,0.04);
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  font-size: 14px;
  color: var(--txt-2);
  line-height: 1.65;
}
.callout strong { color: var(--accent); font-weight: 700; }

@media (max-width: 760px) {
  .data-table-wrap { font-size: 12px; }
  .data-table th, .data-table td { padding: 10px 12px; }
  .country-chip, .cluster-tag, .origin-imp, .origin-local, .conc, .trend {
    font-size: 9px;
    padding: 3px 8px;
  }
}

/* =============================================================
   ZONAS DE DRAGADO · cards y pills
   ============================================================= */
.dredge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.dredge-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 24px 26px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  transition: all 0.22s;
}
.dredge-card:hover { transform: translateY(-3px); border-color: var(--accent-dim); }
.dredge-card.dredge-const { border-top-color: #34d399; }
.dredge-card.dredge-stag  { border-top-color: #fbbf24; }
.dredge-card.dredge-anom  { border-top-color: #f87171; }

.dredge-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.dredge-card.dredge-const .dredge-tag { color: #34d399; }
.dredge-card.dredge-stag  .dredge-tag { color: #fbbf24; }
.dredge-card.dredge-anom  .dredge-tag { color: #f87171; }

.dredge-h {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--txt);
  margin-bottom: 12px;
  line-height: 1.25;
}
.dredge-card p {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.dredge-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.dredge-list span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-2);
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* Pills dentro de la tabla */
.dredge-pill {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  border-radius: 2px;
  font-weight: 700;
  white-space: nowrap;
}
.dredge-pill-const { background: rgba(52,211,153,0.10); color: #34d399; border: 1px solid rgba(52,211,153,0.30); }
.dredge-pill-stag  { background: rgba(251,191,36,0.10); color: #fbbf24; border: 1px solid rgba(251,191,36,0.30); }
.dredge-pill-anom  { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.30); }

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

/* =============================================================
   NAV RIGHT · language switch + CTA
   ============================================================= */
.nav-r {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.lang-switch a {
  color: var(--txt-3);
  transition: color 0.18s;
  padding: 0 2px;
}
.lang-switch a:hover { color: var(--txt); }
.lang-switch a.active {
  color: var(--accent);
  cursor: default;
  pointer-events: none;
}
.lang-switch span { color: var(--line-3); font-weight: 400; }

@media (max-width: 760px) {
  .nav-r { gap: 10px; }
  .lang-switch { padding: 4px 8px; font-size: 10px; }
}

/* =============================================================
   3D CANVAS + INTERACTIVIDAD
   ============================================================= */
.hero-3d-canvas {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  cursor: grab;
}
.hero-3d-canvas:active { cursor: grabbing; }
.hero-3d-fallback {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #34d399, transparent 70%);
  margin: 0 auto;
}

/* Cards con tilt 3D — mejorar transición y backface */
.tema-card,
.serv-card,
.brecha-card,
.cluster-card {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.22s,
              background 0.22s,
              box-shadow 0.22s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Inner content de los cards puede tener slight z-depth */
.tema-card-h,
.serv-card h3,
.brecha-card-h,
.cluster-card-h {
  transform: translateZ(8px);
}
.tema-card-num,
.serv-card-num,
.brecha-card-num,
.cluster-card-tag {
  transform: translateZ(4px);
}

/* En móvil deshabilitar tilt para mejor performance */
@media (max-width: 760px) {
  .tema-card, .serv-card, .brecha-card, .cluster-card {
    transform: none !important;
  }
  .hero-3d-canvas { max-width: 320px; }
}

/* =============================================================
   5 TEMAS · grid responsivo + obs-stats con 4 elementos
   ============================================================= */
.temas-index {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.obs-stats-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1100px) {
  .obs-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .obs-stats-4 { grid-template-columns: 1fr !important; }
}

/* Disclaimer al pie del observatorio */
.obs-disclaimer {
  max-width: 1280px;
  margin: 32px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-3);
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 16, 0.4);
}

/* =============================================================
   PIPELINE GRID · 4 pasos (datos · bootstrap · backtest · nowcast)
   ============================================================= */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.pipe-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 22px 22px;
  border-radius: 2px;
  transition: all 0.22s;
  position: relative;
}
.pipe-card:nth-child(1) { border-top-color: #34d399; }
.pipe-card:nth-child(2) { border-top-color: #10b981; }
.pipe-card:nth-child(3) { border-top-color: #fbbf24; }
.pipe-card:nth-child(4) { border-top-color: #f59e0b; }
.pipe-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
}
.pipe-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.pipe-card:nth-child(3) .pipe-num,
.pipe-card:nth-child(4) .pipe-num { color: var(--warm); }
.pipe-h {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--txt);
  margin-bottom: 10px;
  line-height: 1.2;
}
.pipe-card p {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .pipeline-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pipeline-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   MOLÉCULA · iso-molecule (PtX frame)
   ============================================================= */
.iso-molecule {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.mol-meoh {
  transform-origin: 190px 200px;
  animation: molRotate 24s linear infinite;
}
.mol-h2 {
  animation: molFloat 5s ease-in-out infinite;
}
.mol-nh3 {
  animation: molFloat 6s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes molRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes molFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* =============================================================
   FÓRMULAS QUÍMICAS · iso-formulas (PtX frame v11)
   ============================================================= */
.iso-formulas {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.form-main {
  transform-origin: 240px 245px;
  animation: formPulse 5s ease-in-out infinite;
}
.form-h2  { animation: formFloat 4s ease-in-out infinite; }
.form-nh3 { animation: formFloat 5s ease-in-out infinite; animation-delay: -1.2s; }
.form-secondary { animation: formFloat 6s ease-in-out infinite; animation-delay: -2s; }
.form-alpha { animation: formFloat 5.5s ease-in-out infinite; animation-delay: -0.6s; }

@keyframes formPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.025); opacity: 0.95; }
}
@keyframes formFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* =============================================================
   QUIÉN · Layout dual con dos personas (v11)
   ============================================================= */
.quien-h {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 900;
  margin: 0 auto 48px;
  max-width: 1100px;
  text-align: center;
}
.quien-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.quien-person {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 2px;
  transition: all 0.22s;
}
.quien-person:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
}
.quien-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--txt);
}
.quien-person .quien-content p {
  color: var(--txt-2);
  font-size: 14px;
  line-height: 1.65;
}
.quien-person .quien-content p strong {
  color: var(--txt);
  font-weight: 600;
}
.quien-cta-row {
  text-align: center;
  margin-top: 36px;
}

@media (max-width: 1100px) {
  .quien-team { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .quien-person {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }
  .quien-person .quien-photo-wrap { max-width: 220px; margin: 0 auto; }
}

/* =============================================================
   HEATMAP DRAGADO (v11) + COLAB MINI
   ============================================================= */
.dredge-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dh-row {
  display: grid;
  grid-template-columns: 200px repeat(12, 1fr);
  gap: 3px;
  align-items: stretch;
}
.dh-paso {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--txt-2);
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  align-items: center;
}
.dh-paso strong { color: var(--txt); font-weight: 700; }
.dh-cell {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--txt);
  padding: 8px 4px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-2);
  letter-spacing: 0.04em;
}
.dh-row.dh-header .dh-cell,
.dh-row.dh-header .dh-paso {
  background: transparent;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.16em;
  border-color: transparent;
  padding: 4px 4px;
}

/* Colab mini · sección reducida en cada tema */
.colab-mini {
  background: linear-gradient(135deg, rgba(16,185,129,0.04), transparent), var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.colab-mini h2 {
  text-align: center;
  margin-bottom: 18px;
}
.colab-mini .sec-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.colab-mini .colab-cta {
  justify-content: center;
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .dh-row {
    grid-template-columns: 140px repeat(12, 1fr);
  }
  .dh-paso { font-size: 10px; padding: 6px 8px; }
  .dh-cell { font-size: 9px; padding: 6px 2px; }
}
@media (max-width: 760px) {
  .dredge-heatmap { font-size: 9px; overflow-x: auto; }
  .dh-row { min-width: 600px; }
}


/* Float para CH₃OH ahora que no está en el centro */
.form-meoh { animation: formFloat 5.5s ease-in-out infinite; animation-delay: -0.8s; }


/* =============================================================
   HERO · ÍNDICE TIPOGRÁFICO DE TEMAS (v15 · sin 3D)
   ============================================================= */
.hero-themes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.hero-themes-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.hero-theme-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: all 0.22s;
  position: relative;
}
.hero-theme-item:last-of-type { border-bottom: none; }
.hero-theme-item::after {
  content: '→';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  color: var(--accent);
  opacity: 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  transition: all 0.22s;
}
.hero-theme-item:hover {
  padding-left: 8px;
}
.hero-theme-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.hero-theme-item:hover .ht-name { color: var(--accent); }
.ht-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--txt-3);
  letter-spacing: 0.1em;
  font-weight: 700;
}
.ht-name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--txt);
  line-height: 1.2;
  transition: color 0.22s;
}

@media (max-width: 1100px) {
  .hero-themes { max-width: 100%; }
  .ht-name { font-size: 17px; }
}


/* =============================================================
   QUIÉN · intro de qué es bushi (v18)
   ============================================================= */
.quien-intro {
  max-width: 880px;
  margin: 0 auto 48px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-2);
  text-align: center;
}
.quien-intro strong {
  color: var(--txt);
  font-weight: 600;
}

/* =============================================================
   HERO · SCOPE · PM + Advisory (v21 · reemplaza temas list)
   ============================================================= */
.hero-scope {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 8px;
}
.hero-scope-block {
  padding-top: 18px;
  border-top: 1px solid var(--accent-dim);
  position: relative;
}
.hero-scope-block::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 48px;
  height: 2px;
  background: var(--accent);
}
.hero-scope-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.hero-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-scope-list li {
  font-size: 15px;
  color: var(--txt-2);
  font-weight: 500;
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}
.hero-scope-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
  font-size: 18px;
  top: -4px;
}

@media (max-width: 1100px) {
  .hero-scope { max-width: 100%; }
}

/* =============================================================
   NAV · MOBILE MENU (burger + drawer)
   ============================================================= */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 10px 11px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  z-index: 110;
  height: 38px;
  width: 40px;
}
.nav-burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--txt-2);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); background: var(--accent-bright); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); background: var(--accent-bright); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 105;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 24px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.mobile-menu-link {
  font-family: var(--display);
  font-size: 24px;
  color: var(--txt);
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: color 0.2s;
  padding: 6px 0;
  text-decoration: none;
}
.mobile-menu-link:hover, .mobile-menu-link:active { color: var(--accent-bright); }
.mobile-menu-divider { height: 1px; background: var(--line); margin: 6px 0; }
.mobile-menu-lang {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt-3);
  display: flex;
  gap: 8px;
  justify-content: center;
}
.mobile-menu-lang a { text-decoration: none; color: var(--txt-3); }
.mobile-menu-lang a.active { color: var(--accent-bright); }
.mobile-menu-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 22px;
  background: var(--accent);
  color: #050810;
  border-radius: 2px;
  margin-top: 8px;
  transition: all 0.18s;
  text-decoration: none;
}
.mobile-menu-cta:hover { background: var(--accent-bright); }
body.menu-open { overflow: hidden; }

@media (max-width: 760px) {
  .nav-burger { display: flex; }
  .nav-r .lang-switch { display: none; }
  .nav-r .nav-cta {
    padding: 9px 14px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .brand-tag {
    font-size: 8px;
    margin-left: 4px;
    padding-left: 6px;
    letter-spacing: 0.1em;
  }
  .brand-mark { font-size: 22px; }
  .brand-bulb { width: 20px; height: 26px; }
}
@media (max-width: 480px) {
  .brand-tag { display: none; }
  .nav-r .nav-cta { padding: 8px 11px; font-size: 9px; }
}
@media (max-width: 360px) {
  .nav-r .nav-cta { display: none; }
}