/* ===========================================================================
   sphera.css — hoja de estilo de la ficha de producto SPHERA
   Cargada por /sphera.html y /en/sphera.html.

   Esta página NO carga styles.css ni home.css: es un sistema de diseño
   autocontenido. Antes vivía como <style> inline duplicado a mano en ambos
   idiomas, lo que ya había producido deriva real (la regla .lang-tag existía
   sólo en la versión inglesa). Al extraerla hay una sola fuente de verdad.

   IMPORTANTE: el <link> a este archivo debe ir DESPUÉS de floating-contact.css.
   El <style> inline que reemplaza estaba después, y gana los empates de cascada.
   =========================================================================== */

:root {
  --bg-0: #070a12;
  --bg-1: #0b0f14;
  --bg-2: #111a36;
  --ink: #eef5ff;
  --muted: #9bb0c9;
  --cyan: #76d1ff;
  --cyan-2: #6f7dff;
  --orange: #ff9a3d;
  --neon-green: #ffb768;
  --purple: #b46fb6;
  --purple-deep: #913793;
  --line: rgba(182, 225, 255, 0.28);
  --surface: rgba(10, 18, 38, 0.72);
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

body {
  position: relative;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 80% 10%, rgba(145, 55, 147, 0.25), transparent 60%),
    radial-gradient(1000px 700px at 10% 90%, rgba(6, 182, 212, 0.22), transparent 55%),
    linear-gradient(165deg, var(--bg-0), var(--bg-1) 38%, var(--bg-2));
  overflow-x: hidden;
}

#star-container { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

#color-wash {
  position: fixed;
  top: -22vh; left: -8vw;
  width: 116vw; height: 150vh;
  z-index: 1; pointer-events: none; opacity: 0.96;
  background:
    radial-gradient(960px 680px at 14% 16%, rgba(145, 55, 147, 0.25), transparent 62%),
    radial-gradient(900px 640px at 84% 30%, rgba(6, 182, 212, 0.2), transparent 60%),
    radial-gradient(900px 620px at 30% 56%, rgba(236, 72, 153, 0.18), transparent 64%),
    radial-gradient(980px 680px at 78% 74%, rgba(59, 130, 246, 0.22), transparent 63%),
    radial-gradient(880px 620px at 16% 90%, rgba(249, 115, 22, 0.14), transparent 62%);
  will-change: transform;
}

.star {
  position: absolute; border-radius: 50%; background: #eaf4ff;
  box-shadow: 0 0 8px rgba(189, 228, 255, 0.45); opacity: 0.7;
  transform-origin: center; transform: scaleY(var(--stretch, 1));
  animation: twinkle var(--duration, 3.2s) infinite ease-in-out;
  will-change: top, opacity, transform;
}

@keyframes twinkle { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.95; } }

.page { position: relative; z-index: 2; }

.shell { width: min(1120px, 92vw); margin: 0 auto; }

.section { position: relative; padding: clamp(64px, 8vw, 110px) 0; }

.section-title {
  margin: 0 0 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 3.7vw, 2.7rem);
  line-height: 1.08; letter-spacing: 0.01em;
}

.section-copy {
  margin: 0; color: #d6e4f7; line-height: 1.72;
  font-size: clamp(1rem, 1.42vw, 1.14rem);
}

.section-copy + .section-copy { margin-top: 14px; }

.tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border: 1px solid rgba(180, 111, 182, 0.5);
  border-radius: 999px; color: #f1dcff;
  font-family: "Roboto Mono", monospace; font-size: 0.74rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(40, 14, 46, 0.42); margin-bottom: 20px;
}

.tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 10px var(--purple);
}

/* ===== HERO WEBGL ===== */
.hero-sphera {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; align-items: center;
  overflow: hidden;
}

.hero-canvas { position: absolute; inset: 0; z-index: 0; }
.hero-canvas canvas { display: block; width: 100%; height: 100%; }

.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% 42%, rgba(1, 10, 31, 0.34) 0%, rgba(1, 10, 31, 0.42) 34%, rgba(1, 10, 31, 0.6) 70%, rgba(1, 10, 31, 0.94) 100%),
    linear-gradient(180deg, rgba(1, 10, 31, 0.58) 0%, rgba(1, 10, 31, 0.18) 28%, rgba(1, 10, 31, 0.18) 52%, rgba(1, 10, 31, 0.97) 100%);
}

.hero-content {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  align-items: center; gap: clamp(20px, 4vw, 52px);
  padding: 104px 0 48px; text-align: left;
}

.hero-left h1 {
  margin: 0 0 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98; letter-spacing: -0.015em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
}

.hero-lead {
  margin: 0 0 10px; max-width: 24ch;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  line-height: 1.2; color: #f3f8ff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  margin: 0; max-width: 56ch;
  color: #d4e2f6; line-height: 1.72;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-actions {
  margin-top: 28px; display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: flex-start;
}

/* ===== Logo SPHERA: anillo de texto 3D (derecha) ===== */
.hero-right {
  --radius: clamp(100px, 12vw, 178px);
  --radius-text: calc(var(--radius) * 1.18);
  --ring-font: calc(var(--radius) * 0.64);
  --spin: 22s;
  --speedX: 0; --speedY: -2; --speedZ: 0;
  --step: 20deg; /* separación angular entre letras: menor = más juntas */
  position: relative; display: grid; place-items: center;
  perspective: 1100px; min-height: calc(2.5 * var(--radius));
}

.sphera-ring { position: relative; display: grid; place-items: center; transform-style: preserve-3d; }
.sphera-ring > * { grid-area: 1 / 1; }

.sphera-ring__disc {
  width: calc(2 * var(--radius)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(180, 111, 182, 0.45);
  background: radial-gradient(circle at 50% 50%, rgba(6, 11, 28, 0.72) 16%, rgba(6, 11, 28, 0.32) 52%, rgba(6, 11, 28, 0) 73%);
  box-shadow: inset 0 0 70px rgba(118, 209, 255, 0.12), 0 0 70px rgba(145, 55, 147, 0.28);
}

.sphera-ring__text {
  position: relative; transform-style: preserve-3d; color: transparent;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: var(--ring-font); text-transform: uppercase;
  will-change: transform;
  animation: spheraSpin var(--spin) linear infinite;
}

.sphera-ring__text span {
  position: absolute; top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0) rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius-text));
  backface-visibility: visible;
  color: #f3f8ff;
  text-shadow: 0 0 18px rgba(118, 209, 255, 0.5), 0 2px 12px rgba(0, 0, 0, 0.65);
}

@keyframes spheraSpin {
  0%   { transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); }
  100% { transform: rotateX(calc(360deg * var(--speedX))) rotateZ(calc(360deg * var(--speedZ))) rotateY(calc(360deg * var(--speedY))); }
}

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px; border-radius: 12px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-primary {
  border: 1px solid rgba(190, 220, 255, 0.75); color: #05263a;
  background: linear-gradient(135deg, var(--cyan), #92fff7);
  box-shadow: 0 0 0 1px rgba(213, 234, 255, 0.45) inset, 0 14px 28px rgba(73, 131, 235, 0.28);
}

.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.04); }

.btn-ghost {
  border: 1px solid rgba(216, 196, 255, 0.55); color: #f1e6ff;
  background: rgba(40, 14, 46, 0.35); backdrop-filter: blur(6px);
}

.btn-ghost:hover { transform: translateY(-3px); border-color: rgba(216, 196, 255, 0.9); }

.hero-acronym {
  margin: -2px 0 20px; max-width: 42ch;
  font-family: "Roboto Mono", monospace;
  font-size: clamp(0.62rem, 1.5vw, 0.8rem);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.alliance {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 5vw, 56px); align-items: center;
}

.alliance-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: clamp(10px, 2.5vw, 34px);
}
.logo-halo {
  position: relative; display: grid; place-items: center;
  flex: 1 1 0; min-width: 0; max-width: clamp(140px, 17vw, 212px);
  aspect-ratio: 1 / 1;
}
.logo-halo::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  background: var(--halo); filter: blur(16px); z-index: 0;
  mix-blend-mode: screen;
}
.logo-halo img {
  position: relative; z-index: 1; width: 88%; height: 88%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}
.logo-halo--altitud {
  --halo: radial-gradient(circle at 50% 50%, rgba(255, 178, 86, 0.68) 0%, rgba(249, 92, 40, 0.46) 36%, rgba(249, 92, 40, 0) 70%);
}
.logo-halo--falp {
  --halo: radial-gradient(circle at 50% 50%, rgba(216, 234, 255, 0.62) 0%, rgba(150, 198, 255, 0.42) 32%, rgba(74, 142, 236, 0.22) 56%, rgba(74, 142, 236, 0) 76%);
}
.logo-halo--falp::before { inset: -11%; }
.alliance-x {
  color: #b9c2d6; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; flex: 0 0 auto;
}

.alliance-text h2 { margin-bottom: 14px; }

/* ===== CONTENT LAYOUTS ===== */
.split-50 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 46px); align-items: center;
}

.glass-card {
  border-radius: 18px; border: 1px solid rgba(200, 232, 255, 0.32);
  background: rgba(11, 22, 44, 0.58); backdrop-filter: blur(10px);
  padding: clamp(14px, 2.2vw, 20px); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 30px rgba(0, 0, 0, 0.32);
}

.glass-card img {
  display: block; width: 100%; min-height: 260px;
  object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(196, 225, 253, 0.28); background: #0a1020;
}

.video-card {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(196, 225, 253, 0.16); background: #0a1020;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.video-embed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; pointer-events: none;
}
.video-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 56%, rgba(2, 8, 22, 0.3));
  opacity: 0; transition: opacity 0.25s ease;
}
.video-card:hover::after { opacity: 1; }
.video-cta {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(7, 12, 27, 0.74); border: 1px solid rgba(216, 238, 255, 0.4);
  color: #f1f8ff; font-family: "Roboto Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.video-card:hover .video-cta { background: rgba(145, 55, 147, 0.68); border-color: rgba(216, 196, 255, 0.7); }

.card-cap {
  margin: 12px 4px 2px; color: var(--muted);
  font-family: "Roboto Mono", monospace; font-size: 0.72rem; letter-spacing: 0.04em;
}

.note {
  margin-top: 18px; padding: 14px 18px;
  border-left: 3px solid var(--purple-deep); border-radius: 8px;
  background: rgba(145, 55, 147, 0.1); color: #e2d2ea;
  font-size: 0.92rem; line-height: 1.65;
}

.head-center { max-width: 920px; margin: 0 auto 28px; text-align: center; }

/* pipeline — el número de columnas es una custom property, no un modificador por
   cada variante. Uso: <div class="pipeline" style="--cols:5">. Sirve para
   adquisición (3), piloto (5), estrategia de entrada (4), riesgos (4) y proceso (3).
   Las custom properties inline ya son idioma de esta hoja (.sphera-ring__text usa --i). */
.pipeline { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.pipe-step {
  position: relative; border-radius: 16px;
  border: 1px solid rgba(178, 220, 255, 0.28);
  background: linear-gradient(155deg, rgba(16, 29, 61, 0.84), rgba(10, 19, 42, 0.88));
  padding: 22px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.28);
}
.pipe-num { font-family: "Roboto Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--cyan); }
.pipe-step h3 { margin: 8px 0 6px; font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; }
.pipe-step p { margin: 0; color: #c7d7ec; line-height: 1.6; font-size: 0.94rem; }

.flow-figure { margin: 0; }
.flow-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid rgba(196, 225, 253, 0.14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4); background: #0a1020;
}

/* Capacidades — índice editorial */
.caps-grid { display: grid; grid-template-columns: 0.82fr 1.55fr; gap: clamp(28px, 5vw, 74px); align-items: start; }
.caps-intro { position: sticky; top: 96px; }
.caps-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-family: "Roboto Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple);
}
.caps-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.caps-intro .section-copy { max-width: 32ch; }

.caps-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cap-row {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.4vw, 36px); align-items: start;
  padding: clamp(20px, 2.6vw, 30px) clamp(6px, 1.2vw, 16px);
  border-bottom: 1px solid var(--line); overflow: hidden;
  transition: background 0.4s ease, padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, transform 0.6s ease;
}
.cap-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--purple-deep));
  transform: scaleY(0); transform-origin: top; transition: transform 0.45s ease;
}
.cap-row:hover { background: linear-gradient(90deg, rgba(118, 209, 255, 0.06), rgba(118, 209, 255, 0) 72%); padding-left: clamp(20px, 2vw, 30px); }
.cap-row:hover::before { transform: scaleY(1); }

.cap-index {
  font-family: "Roboto Mono", monospace; font-weight: 700; line-height: 1;
  font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.02em; min-width: 2.2ch;
  color: transparent; -webkit-text-stroke: 1.2px rgba(180, 111, 182, 0.6);
  transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.cap-row:hover .cap-index { color: var(--cyan); -webkit-text-stroke-color: transparent; }

.cap-kicker { display: block; margin-bottom: 9px; font-family: "Roboto Mono", monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); }
.cap-title { margin: 0 0 8px; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.12; color: #f3f8ff; }
.cap-desc { margin: 0; color: #c4d4ea; line-height: 1.62; font-size: 0.96rem; max-width: 54ch; }

@media (max-width: 900px) {
  .caps-grid { grid-template-columns: 1fr; gap: 20px; }
  .caps-intro { position: static; }
}

/* zigzag */
.zigzag { display: grid; gap: 28px; }
.zigzag-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: center; padding: 18px;
  border-radius: 18px; border: 1px solid rgba(173, 216, 255, 0.25);
  background: linear-gradient(145deg, rgba(11, 22, 46, 0.72), rgba(8, 15, 34, 0.78));
}
.zigzag-block.reverse .zigzag-text { order: 2; }
.zigzag-block.reverse .zigzag-media { order: 1; }
.zigzag-text h3 { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.15; }
.zigzag-text p { margin: 0; color: #d1e0f5; line-height: 1.72; }
.zigzag-text p + p { margin-top: 12px; }
.zigzag-media img {
  width: 100%; min-height: 240px; object-fit: cover;
  border-radius: 14px; border: 1px solid rgba(200, 234, 255, 0.3);
  display: block; background: #0a1020;
}

.chips { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-family: "Roboto Mono", monospace; font-size: 0.72rem; letter-spacing: 0.03em;
  padding: 6px 11px; border-radius: 999px; color: #d8e7fb;
  border: 1px solid rgba(178, 220, 255, 0.3); background: rgba(11, 22, 44, 0.5);
}

/* stats / validation */
.champion-banner { padding: clamp(50px, 8vw, 80px) 0; }
.champion-box {
  border: 1px solid rgba(180, 111, 182, 0.36); border-radius: 18px;
  padding: clamp(20px, 4vw, 34px);
  background:
    linear-gradient(120deg, rgba(8, 14, 34, 0.92), rgba(26, 11, 40, 0.9)),
    radial-gradient(circle at 90% 50%, rgba(145, 55, 147, 0.24), transparent 48%);
  box-shadow: inset 0 1px 0 rgba(224, 243, 255, 0.18), 0 18px 34px rgba(0, 0, 0, 0.35);
}
.champion-box p { margin: 0; font-size: clamp(1.05rem, 1.65vw, 1.32rem); line-height: 1.68; color: #efe7ff; text-wrap: pretty; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.stat { text-align: center; padding: 20px 12px; border-radius: 14px; border: 1px solid rgba(178, 220, 255, 0.24); background: rgba(11, 22, 44, 0.5); }
.stat b { display: block; font-family: "Roboto Mono", monospace; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--neon-green); }
.stat span { color: #cbdbf0; font-size: 0.86rem; line-height: 1.4; display: block; margin-top: 4px; }

/* team — sin cajas, editorial */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); }
.team-card {
  --accent: var(--cyan);
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; padding-top: 22px;
  border-top: 1px solid var(--line);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.team-card::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 2px;
  background: var(--accent); transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover { transform: translateY(-4px); }
.team-card:hover::before { width: 100%; }
.team-card--cyan { --accent: var(--cyan); }
.team-card--purple { --accent: var(--purple); }
.team-card--orange { --accent: var(--orange); }

.team-role { display: block; font-family: "Roboto Mono", monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.team-name { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-size: 1.22rem; line-height: 1.15; color: #f3f8ff; }
.team-bio { margin: 0 0 18px; color: #c4d4ea; line-height: 1.62; font-size: 0.93rem; flex: 1; }
.team-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: "Roboto Mono", monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #cdddf2; }
.team-link i { font-style: normal; color: var(--accent); transition: transform 0.3s ease; }
.team-card:hover .team-link i { transform: translateX(5px); }

@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; gap: 30px; } }

/* footer CTA */
.footer-cta { text-align: center; padding-top: clamp(58px, 8vw, 86px); padding-bottom: clamp(40px, 6vw, 64px); }
.footer-box {
  max-width: 920px; margin: 0 auto; padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(180, 111, 182, 0.3); border-radius: 20px;
  background: linear-gradient(145deg, rgba(20, 12, 38, 0.85), rgba(8, 14, 29, 0.9));
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.34);
}
.footer-box .section-title { margin-bottom: 12px; }
.footer-box p { margin: 0 auto 22px; max-width: 58ch; color: #e7e0f4; line-height: 1.7; font-size: clamp(1rem, 1.45vw, 1.18rem); }
.footer-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.site-footer {
  position: relative; z-index: 2;
  padding: 26px 0 46px; text-align: center; color: var(--muted);
  font-size: 0.82rem; line-height: 1.9;
}
.site-footer a { color: #cfe0f5; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.float-zero { animation: floatZero 5.2s ease-in-out infinite; }
.float-zero-delay { animation-delay: 0.9s; }
@keyframes floatZero { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }


/* ===========================================================================
   COMPONENTES DEL DOSSIER DE EVALUACIÓN 2026
   Añadidos para que la ficha web sostenga el mismo contenido y la misma postura
   epistémica del dossier: lo construido, lo observado, lo pendiente.
   =========================================================================== */

/* ── .feat-grid ──────────────────────────────────────────────────────────────
   Tenía reglas en las media queries pero le faltaba la regla base: era un
   componente muerto. Se le da base y trabajo, con las columnas parametrizadas. */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  align-items: stretch;
}

.feat-card {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 16px;
  border: 1px solid rgba(178, 220, 255, 0.24);
  background: linear-gradient(155deg, rgba(16, 29, 61, 0.8), rgba(10, 19, 42, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.feat-card h3 {
  margin: 8px 0 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.16; color: #f3f8ff;
}
.feat-card p { margin: 0; color: #c7d7ec; line-height: 1.66; font-size: 0.95rem; }
.feat-card p + p { margin-top: 10px; }

/* Variante oscura: para los límites de uso y advertencias de encuadre.
   Más contraste hacia el negro = se lee como nota institucional, no como feature. */
.feat-card--dark {
  border-color: rgba(180, 111, 182, 0.34);
  background:
    linear-gradient(120deg, rgba(8, 14, 34, 0.94), rgba(26, 11, 40, 0.92)),
    radial-gradient(circle at 88% 46%, rgba(145, 55, 147, 0.2), transparent 52%);
}
/* Variante ámbar: dependencias y trabajo pendiente. */
.feat-card--warn {
  border-color: rgba(255, 154, 61, 0.3);
  background: linear-gradient(155deg, rgba(38, 25, 14, 0.6), rgba(14, 18, 34, 0.86));
}

/* ── .ledger — "lo que existe hoy" / "lo que aún debe demostrarse" ───────────
   El dispositivo firma del dossier: aparece cuatro veces. Las dos columnas
   llevan DELIBERADAMENTE el mismo peso visual. La honestidad es el diseño: si la
   columna de brechas pareciera nota al pie, el componente mentiría con la forma. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); }

.ledger__col {
  position: relative; overflow: hidden;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 18px;
  border: 1px solid rgba(200, 232, 255, 0.3);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.3);
}
.ledger__col::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--ledger-accent);
}
.ledger__col::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 60% at 50% 0%, var(--ledger-wash), transparent 62%);
}
.ledger__col > * { position: relative; z-index: 1; }

.ledger__col--have { --ledger-accent: var(--cyan);   --ledger-wash: rgba(118, 209, 255, 0.1); }
.ledger__col--gap  { --ledger-accent: var(--orange); --ledger-wash: rgba(255, 154, 61, 0.09); }

.ledger__head {
  margin: 0 0 16px;
  font-family: "Roboto Mono", monospace; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ledger-accent);
}
.ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ledger__list li {
  position: relative; padding-left: 26px;
  color: #cbdbf0; line-height: 1.62; font-size: 0.95rem; text-wrap: pretty;
}
.ledger__list li::before {
  /* El glifo por defecto va en la regla base: .ledger__list también se usa fuera
     de una .ledger__col (dependencias, modelo de adopción), y sin content los
     ítems quedaban con sangría pero sin viñeta. */
  content: "\2192";
  position: absolute; left: 0; top: 0.05em;
  font-family: "Roboto Mono", monospace; font-weight: 700;
  color: var(--ledger-accent, var(--cyan));
}
/* ✓ para lo construido, → para lo pendiente. Nunca ✗: el encuadre es
   "todavía no demostrado", no "fallido". */
.ledger__col--have .ledger__list li::before { content: "\2713"; }
.ledger__col--gap  .ledger__list li::before { content: "\2192"; }

/* ── .roadmap — estado actual, meta y etapa posterior ───────────────────────── */
.roadmap {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px);
}
.roadmap__stage {
  --stage-accent: var(--muted);
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 16px;
  border: 1px solid rgba(178, 220, 255, 0.2);
  background: rgba(11, 22, 44, 0.5);
}
.roadmap__stage--now    { --stage-accent: var(--cyan);   background: rgba(11, 22, 44, 0.68); border-color: rgba(118, 209, 255, 0.34); }
.roadmap__stage--target { --stage-accent: var(--purple); }
.roadmap__stage--later  { --stage-accent: var(--muted); }

.roadmap__status {
  display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px;
  font-family: "Roboto Mono", monospace; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stage-accent); border: 1px solid var(--stage-accent);
}
/* Sólo la etapa actual va en positivo: el ojo encuentra "dónde estamos" sin leer. */
.roadmap__stage--now .roadmap__status { background: var(--cyan); color: #05263a; }

.roadmap__title {
  margin: 0 0 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.14; color: #f3f8ff;
}
.roadmap__desc { margin: 0; color: #c4d4ea; line-height: 1.64; font-size: 0.94rem; }

/* ── .pipe-step--risk ────────────────────────────────────────────────────────
   Deliberadamente más apagado que .pipe-step normal: un riesgo no debe leerse
   con el mismo brillo que una capacidad. */
.pipe-step--risk {
  background: rgba(11, 22, 44, 0.44);
  border-color: rgba(255, 154, 61, 0.26);
  border-left: 2px solid var(--orange);
  box-shadow: none;
}
.pipe-tag {
  display: block; margin-bottom: 8px;
  font-family: "Roboto Mono", monospace; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
}

/* ── .ways — invertir / pilotear / aportar capacidades ───────────────────────
   .way__num reutiliza el tratamiento de .cap-index para que toda la página
   hable un único idioma de numeral (índice editorial, pipeline y ways). */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 28px); }

.way {
  --accent: var(--cyan);
  display: flex; flex-direction: column;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.way--cyan   { --accent: var(--cyan); }
.way--purple { --accent: var(--purple); }
.way--orange { --accent: var(--orange); }

.way__num {
  display: block; margin-bottom: 12px;
  font-family: "Roboto Mono", monospace; font-weight: 700; line-height: 1;
  font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.2px var(--accent);
}
.way__title {
  margin: 0 0 10px;
  font-family: "Space Grotesk", sans-serif; font-size: 1.22rem; line-height: 1.15; color: #f3f8ff;
}
.way__desc { margin: 0 0 20px; color: #c4d4ea; line-height: 1.62; font-size: 0.94rem; }
.way__eyebrow {
  display: block; margin-bottom: 10px;
  font-family: "Roboto Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.way__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.way__checks li {
  position: relative; padding-left: 22px;
  color: #bfd0e6; line-height: 1.55; font-size: 0.89rem;
}
.way__checks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.05em;
  font-family: "Roboto Mono", monospace; color: var(--accent);
}

/* ── .sources — referencias numeradas ────────────────────────────────────────
   Contraste bajo a propósito: son verificables, no protagonistas. */
.sources-panel {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 18px;
  border: 1px solid rgba(178, 220, 255, 0.18);
  background: var(--surface);
}
.sources-panel .caps-eyebrow { margin-bottom: 18px; }

.sources { counter-reset: src; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sources li {
  position: relative; padding-left: 34px;
  color: var(--muted); font-size: 0.82rem; line-height: 1.75; text-wrap: pretty;
}
.sources li::before {
  counter-increment: src; content: counter(src, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: "Roboto Mono", monospace; font-size: 0.76rem; color: var(--cyan);
}
.sources a { color: #cfe0f5; text-decoration: underline; text-decoration-color: rgba(118, 209, 255, 0.4); text-underline-offset: 2px; }
.sources a:hover { text-decoration-color: var(--cyan); }
.sources cite { font-style: italic; }

/* ── .legal-note ─────────────────────────────────────────────────────────────
   Colofón mono discreto, no caja de advertencia. Una caja gritona se lee
   defensiva; un colofón se lee institucional, que es lo que espera un evaluador. */
.legal-note {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding-top: 18px; max-width: 78ch;
  border-top: 1px solid var(--line);
  font-family: "Roboto Mono", monospace; font-size: 0.72rem; line-height: 1.8;
  color: var(--muted); text-wrap: pretty;
}

/* ── .figure-plate — las figuras del dossier sobre fondo oscuro ──────────────
   Todas las figuras vienen con fondo opaco casi blanco (~rgb(253,253,253)).
   Cinco losas blancas sobre #070a12 se ven rotas salvo que sean intencionales:
   se enmarcan como hoja impresa flotando, lo que además liga visualmente la
   página con el PDF del dossier.
   NO invertir ni hue-rotate: son ilustraciones médicas y alterar el color del
   tejido es un problema de corrección, no una decisión de estilo. */
.figure-plate {
  background: #fbfcfe;
  border-radius: 16px;
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid rgba(200, 232, 255, 0.22);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.figure-plate img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Miniaturas de documento (manuscrito y abstract): misma placa, más contenida. */
.doc-thumb { max-width: min(100%, 420px); margin-inline: auto; }

/* Enlace de descarga con su peso declarado — convención de honestidad de la casa.
   Los botones son inline-flex en fila, así que un hijo `display:block` se sentaría
   AL LADO de la etiqueta, no debajo: la variante --stack pasa el botón a columna. */
.btn-primary--stack, .btn-ghost--stack {
  flex-direction: column; justify-content: center;
  gap: 2px; padding-top: 9px; padding-bottom: 9px; line-height: 1.25;
}
.btn-meta {
  display: block;
  font-family: "Roboto Mono", monospace; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.08em; opacity: 0.75; text-transform: none;
}

/* Índice de la página, en la lectura rápida. */
.chips--index li a { color: inherit; text-decoration: none; }
.chips--index li { transition: border-color 0.3s ease, color 0.3s ease; }
.chips--index li:hover { border-color: var(--cyan); color: #eaf6ff; }

/* Rendimiento: la página creció mucho. Se le da al navegador permiso para no
   maquetar lo que está fuera de pantalla. La altura estimada evita saltos de scroll. */
.section--defer { content-visibility: auto; contain-intrinsic-size: 0 900px; }


@media (max-width: 980px) {
  .ledger, .roadmap, .ways { grid-template-columns: 1fr; }
  .split-50, .zigzag-block, .alliance { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .zigzag-block.reverse .zigzag-text, .zigzag-block.reverse .zigzag-media { order: initial; }
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-left h1, .hero-acronym, .hero-lead, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-right { --radius: clamp(108px, 26vw, 178px); order: -1; }
}

@media (max-width: 640px) {
  .shell { width: min(1120px, 94vw); }
  .hero-sphera { min-height: 100vh; min-height: 100dvh; }
  .hero-content { padding-top: 96px; }
  .pipeline, .feat-grid, .team-grid, .stat-row { grid-template-columns: 1fr; }
  .hero-right { --radius: clamp(92px, 32vw, 150px); }
  /* En móvil la placa blanca ocupa casi todo el ancho: se reduce el marco para
     no robarle píxeles a la figura, que ya es el elemento más denso de la página. */
  .figure-plate { padding: 8px; border-radius: 12px; }
  .sources li { padding-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-zero, .star, .sphera-ring__text { animation: none; }
}

/* ── Botón de idioma ───────────────────────────────────────────────
   Esta página no tiene barra de navegación, así que el botón va fijo
   arriba a la derecha. Al estar solo (nada compite con él) se puede
   permitir ser grande: es el reclamo de "aquí se cambia el idioma".
   Relleno blanco sólido = único elemento claro sobre el fondo oscuro. */
.lang-fab {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #070a12;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Sombra + resplandor cian: lo despega del fondo y atrae la vista. */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
              0 0 26px rgba(118, 209, 255, 0.40);
  transition: background .22s ease, border-color .22s ease, color .22s ease,
              transform .22s ease, box-shadow .22s ease;
}

.lang-fab__globe {
  display: flex;
  align-items: center;
  color: var(--purple-deep);
  transition: color .22s ease;
}
.lang-fab__globe svg { display: block; width: 20px; height: 20px; }

/* Halo que pulsa unas pocas veces al cargar: senala el control sin
   molestar, porque se detiene solo tras 3 pulsos. */
.lang-fab::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 2px solid var(--cyan);
  opacity: 0;
  pointer-events: none;
  animation: lang-fab-halo 2.2s ease-out 1.2s 3;
}
@keyframes lang-fab-halo {
  0%   { opacity: .9; transform: scale(1); }
  65%  { opacity: 0;  transform: scale(1.35); }
  100% { opacity: 0;  transform: scale(1.35); }
}

.lang-fab:hover,
.lang-fab:focus-visible {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #070a12;
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55),
              0 0 34px rgba(118, 209, 255, 0.75);
}
.lang-fab:hover .lang-fab__globe,
.lang-fab:focus-visible .lang-fab__globe { color: #070a12; }
.lang-fab:hover::after,
.lang-fab:focus-visible::after { animation: none; opacity: 0; }
.lang-fab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.lang-fab:active { transform: translateY(0); }

@media (max-width: 640px) {
  .lang-fab {
    top: 14px;
    right: 14px;
    padding: 11px 17px;
    font-size: 12px;
    letter-spacing: 0.06em;
    gap: 8px;
  }
  .lang-fab__globe svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-fab { transition: none; }
  .lang-fab:hover, .lang-fab:focus-visible { transform: none; }
  .lang-fab::after { animation: none; opacity: 0; }
}

/* Badge "ES": marca enlaces que llevan a páginas sólo en español. */
.lang-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: 1px;
}

/* ── Marca · vuelve a la portada ────────────────────────────────────
   Fija arriba a la izquierda, haciendo pareja con el botón de idioma.
   Replica el .brand de /conocimiento/ y /rendimiento/ (esta página no
   carga styles.css, por eso el estilo va aquí). */
.brand-fab {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.50);
  transition: border-color .22s ease, background .22s ease,
              transform .22s ease, box-shadow .22s ease;
}
.brand-fab__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.brand-fab__text {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
/* "100K" en fucsia de marca, igual que en el resto del sitio. */
.brand-fab__text span { color: #f21651; }

.brand-fab:hover,
.brand-fab:focus-visible {
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55),
              0 0 24px rgba(118, 209, 255, 0.35);
}
.brand-fab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.brand-fab:active { transform: translateY(0); }

@media (max-width: 640px) {
  .brand-fab {
    top: 14px;
    left: 14px;
    gap: 8px;
    padding: 6px 13px 6px 6px;
  }
  .brand-fab__logo { width: 32px; height: 32px; }
  .brand-fab__text { font-size: 14.5px; }
}
/* Muy estrecho: sólo el escudo, para no chocar con el botón de idioma.
   Sigue siendo un botón reconocible de vuelta al inicio. */
@media (max-width: 400px) {
  .brand-fab { padding: 6px; gap: 0; }
  .brand-fab__text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-fab { transition: none; }
  .brand-fab:hover, .brand-fab:focus-visible { transform: none; }
}