@charset "UTF-8";
/* ==========================================================================
   DevSociety · Capa "tech" (rediseño 2026-10)
   Se carga DESPUÉS de tokens.css y devsociety.css. Solo añade: ciudad 3D de fondo (city3d.js),
   brillo, vidrio, rejillas, animaciones de entrada y ligadas al scroll.
   Sin JS o con prefers-reduced-motion todo queda visible y estático.
   ========================================================================== */
:root {
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --glow-blue: 0 0 0 1px rgba(74, 58, 255, 0.35), 0 12px 40px rgba(74, 58, 255, 0.35);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.14);
  --grad-brand: linear-gradient(90deg, var(--blue) 0%, var(--violet) 55%, var(--green) 100%);
}

/* ---------- Barra de progreso de lectura ---------- */
.fx-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 3px;
  background: var(--grad-brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(74, 58, 255, 0.6);
  pointer-events: none;
}

/* ---------- Header: cristal esmerilado y línea de luz al hacer scroll ---------- */
.site-header {
  position: sticky;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(18, 15, 42, 0.08);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 58, 255, 0.65), rgba(3, 191, 111, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }
.nav-links a.is-active {
  background: var(--blue-50);
  color: var(--brand);
  border-radius: var(--radius-pill);
}

/* ---------- Ciudad 3D (canvas fijo detrás del contenido; ver city3d.js) ---------- */
.city3d {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #120f2a;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.city3d.is-ready { opacity: 1; }
.city3d canvas { display: block; width: 100%; height: 100%; }
/* Con la ciudad activa, el resto de secciones deben ser opacas (especificidad 0: no pisa sus fondos propios) */
:where(.city-on main > section) { background-color: var(--white); }
/* Ventanas a la ciudad: transparentes con velo para legibilidad AA */
.city-on .hero[data-city-shot] {
  background:
    linear-gradient(180deg, rgba(18, 15, 42, 0) 62%, rgba(18, 15, 42, 0.75) 100%),
    linear-gradient(90deg, rgba(18, 15, 42, 0.9) 0%, rgba(18, 15, 42, 0.72) 38%, rgba(18, 15, 42, 0.18) 72%, rgba(18, 15, 42, 0.05) 100%);
}
.city-on .page-hero[data-city-shot] {
  background: linear-gradient(90deg, rgba(18, 15, 42, 0.9) 0%, rgba(18, 15, 42, 0.66) 45%, rgba(18, 15, 42, 0.12) 100%);
}
.city-on .city-window[data-city-shot="caps"] {
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(18, 15, 42, 0.78), transparent 70%),
    linear-gradient(180deg, rgba(18, 15, 42, 0.82) 0%, rgba(18, 15, 42, 0.42) 45%, rgba(18, 15, 42, 0.8) 100%);
}
.city-on .city-window[data-city-shot="why"] {
  background:
    linear-gradient(180deg, rgba(18, 15, 42, 0.85) 0%, rgba(18, 15, 42, 0.35) 40%, rgba(18, 15, 42, 0.6) 100%),
    linear-gradient(90deg, rgba(18, 15, 42, 0.55) 0%, rgba(18, 15, 42, 0) 70%);
}
.city-on .city-window[data-city-shot="cta"] {
  background: linear-gradient(180deg, rgba(18, 15, 42, 0.7) 0%, rgba(18, 15, 42, 0.2) 50%, rgba(18, 15, 42, 0.75) 100%);
}
.city-on .city-window[data-city-shot="cta"] .cta-band {
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(18, 15, 42, 0.78), rgba(18, 15, 42, 0.45));
  border: 1px solid rgba(185, 180, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(10, 9, 24, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Sin WebGL: imagen fija de la ciudad en el hero (las demás secciones conservan su fondo navy) */
.city-off .hero {
  background:
    linear-gradient(90deg, rgba(18, 15, 42, 0.92) 0%, rgba(18, 15, 42, 0.7) 40%, rgba(18, 15, 42, 0.2) 100%),
    url("../images/city-fallback.webp") center / cover no-repeat,
    var(--navy);
}
.city-window { position: relative; isolation: isolate; border: 0; }
.city-window > .wrap { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { isolation: isolate; }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.hero h1 {
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--blue-on-dark) 50%, #fff 62%, #fff 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  filter: drop-shadow(0 12px 32px rgba(10, 9, 24, 0.45));
}
@media (forced-colors: active) {
  .hero h1 { -webkit-text-fill-color: currentColor; background: none; filter: none; }
}
.hero .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(185, 180, 255, 0.28);
  box-shadow: 0 8px 24px rgba(10, 9, 24, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
}
.hero .eyebrow::after {
  content: "_";
  margin-left: 2px;
  font-family: var(--font-mono);
  color: var(--green);
}
.hero-facts {
  gap: 12px;
}
.hero-facts li {
  position: relative;
  padding: 10px 16px 10px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(185, 180, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease);
}
.hero-facts li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(185, 180, 255, 0.4);
  transform: translateY(-2px);
}
.hero-facts strong { letter-spacing: -0.01em; }
.hero-facts li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--green));
}

/* Halo ambiental detrás del marco HUD */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, rgba(74, 58, 255, 0.42), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(3, 191, 111, 0.22), transparent 52%);
  filter: blur(36px);
  pointer-events: none;
}

/* Marco HUD del carrusel */
.hero-slides {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  box-shadow: 0 32px 80px rgba(10, 9, 24, 0.6), 0 0 0 1px rgba(185, 180, 255, 0.22);
}
.hero-float {
  background: rgba(18, 15, 42, 0.72);
  border: 1px solid rgba(185, 180, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(10, 9, 24, 0.45);
}
.hero-photo-caption {
  background: linear-gradient(180deg, transparent, rgba(18, 15, 42, 0.88) 42%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.fx-hud {
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  --c: rgba(185, 180, 255, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 22px 2px,
    linear-gradient(var(--c), var(--c)) 0 0 / 2px 22px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 22px 2px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 2px 22px,
    linear-gradient(var(--c), var(--c)) 0 100% / 22px 2px,
    linear-gradient(var(--c), var(--c)) 0 100% / 2px 22px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 2px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 2px 22px;
  background-repeat: no-repeat;
}
.fx-hud-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fx-hud-scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(74, 58, 255, 0.18) 70%, rgba(185, 180, 255, 0.5) 99%, transparent);
  mix-blend-mode: screen;
}
.fx-hud-tag {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(32, 31, 51, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 600 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  pointer-events: none;
}
.fx-hud-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; }

/* ---------- Cifras: vidrio oscuro con brillo ---------- */
.statband .stat-grid {
  background: rgba(24, 22, 46, 0.88);
  border: 1px solid rgba(185, 180, 255, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 32px 84px rgba(10, 9, 24, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.statband .stat-grid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0.95;
}
.statband .stat-item {
  border-color: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}
.statband .stat-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.statband .stat-item dt {
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 25%, var(--blue-on-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(74, 58, 255, 0.45));
}
.statband .stat-item dd { color: var(--slate-200); }
.statband .stat-item small { color: var(--green); font-family: var(--font-mono); letter-spacing: 0.06em; }
.fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografía tech: kickers e índices ---------- */
.kicker { font-family: var(--font-display); }
.kicker::before {
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
}
.sector-index, .process-num, .sol-item-index { font-variant-numeric: tabular-nums; }
.sol-item-index { font-family: var(--font-mono); }

/* ---------- Secciones oscuras ---------- */
.section-dark { position: relative; isolation: isolate; overflow: hidden; }
.section-dark .section-head p { color: var(--slate-300); }

/* Capacidades sobre fondo oscuro: tarjetas de vidrio */
.section-dark .cap-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.section-dark .cap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.section-dark .cap-card:hover::before { opacity: 1; }
.section-dark .cap-card h3 { color: #fff; }
.section-dark .cap-card p { color: var(--slate-300); }
.section-dark .cap-card svg { background: rgba(74, 58, 255, 0.24); color: var(--blue-on-dark); box-shadow: inset 0 0 0 1px rgba(185, 180, 255, 0.3); }
.section-dark .cap-card:hover { border-color: rgba(185, 180, 255, 0.45); box-shadow: 0 22px 54px rgba(10, 9, 24, 0.55), 0 0 0 1px rgba(74, 58, 255, 0.35); }
.section-dark .cap-card:hover svg { background: var(--brand); color: #fff; box-shadow: 0 0 26px rgba(74, 58, 255, 0.75); }
.why-card {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background-color: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.why-card:hover {
  border-color: rgba(185, 180, 255, 0.42);
  box-shadow: 0 20px 50px rgba(10, 9, 24, 0.5), 0 0 0 1px rgba(74, 58, 255, 0.3);
}
.why-card::before { font-family: var(--font-mono); }

/* ---------- Spotlight (luz que sigue al puntero) en tarjetas ---------- */
.fx-spot { --mx: 50%; --my: 50%; }
@media (hover: hover) and (pointer: fine) {
  .fx-spot:hover {
    background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(74, 58, 255, 0.13), transparent 55%);
  }
  .section-dark .fx-spot:hover,
  .city-window .fx-spot:hover {
    background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(185, 180, 255, 0.16), transparent 55%);
  }
}

/* ---------- Botones: brillo que recorre + resplandor ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn-primary:hover { box-shadow: var(--glow-blue); }
.hero .btn-primary:hover,
.cta-band .btn-primary:hover,
.section-dark .btn-primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 44px rgba(74, 58, 255, 0.55); }
.btn-primary::before { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); }
.hero .btn-primary::before,
.cta-band .btn-primary::before,
.section-dark .btn-primary::before { background: linear-gradient(110deg, transparent 30%, rgba(74, 58, 255, 0.18) 50%, transparent 70%); }
.fx-magnet { transition: translate 0.25s var(--ease), background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease; }

/* ---------- Sectores: borde con degradado al pasar ---------- */
.sector-panel { position: relative; }
.sector-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(74, 58, 255, 0.7), rgba(3, 191, 111, 0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sector-panel:hover::after { opacity: 1; }
.sector-panel-media { overflow: hidden; }
.sector-panel-media img, .nation-photo img { will-change: translate; }
.sector-index { text-shadow: 0 0 22px rgba(74, 58, 255, 0.35); }

/* ---------- Soluciones: marco vidrio + barra de tiempo ---------- */
.sol-stage {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(38, 36, 60, 0.08);
  padding: clamp(18px, 2.5vw, 28px);
}
.sol-visual { position: relative; }
.sol-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(74, 58, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.sol-item { position: relative; overflow: hidden; transition: background 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease; }
.sol-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease);
}
.sol-item.is-active::before { transform: scaleY(1); }
.sol-item.is-active { box-shadow: inset 0 0 0 1px var(--blue-100), 0 8px 24px rgba(74, 58, 255, 0.08); background: linear-gradient(90deg, var(--blue-50), #fff); }
.sol-item.is-active .sol-item-index { color: var(--brand); text-shadow: 0 0 14px rgba(74, 58, 255, 0.45); }
.sol-metrics > div {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
}
.sol-metrics dt { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Proceso: tarjetas elevadas + conector ---------- */
.process-step {
  padding: 24px 20px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  box-shadow: 0 16px 36px rgba(38, 36, 60, 0.09);
}
.process-step::before {
  background:
    linear-gradient(90deg, var(--brand), var(--green)) no-repeat 0 0 / 0% 100%,
    linear-gradient(90deg, var(--blue-100), var(--slate-200));
  transition: background-size 1.1s var(--ease) 0.3s;
}
.process-step.is-in::before { background-size: 100% 100%, auto; }
.process-num { transition: box-shadow 0.6s ease, transform 0.5s var(--ease); }
.process-step.is-in .process-num { box-shadow: 0 0 0 8px var(--blue-50), 0 0 28px rgba(74, 58, 255, 0.55); }
.process-step:hover .process-num { transform: scale(1.08); }
@media (max-width: 640px) {
  .process-step::before {
    background:
      linear-gradient(180deg, var(--brand), var(--green)) no-repeat 0 0 / 100% 0%,
      var(--blue-100);
  }
  .process-step.is-in::before { background-size: 100% 100%, auto; }
}

/* ---------- Compromiso nacional: brillo de borde ---------- */
.nation { position: relative; overflow: hidden; }
.nation::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 58, 255, 0.16), transparent);
  pointer-events: none;
}

/* ---------- CTA ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% 10% auto;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(74, 58, 255, 0.35), rgba(3, 191, 111, 0.14) 55%, transparent 75%);
  filter: blur(28px);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* ---------- Footer: línea de luz y rejilla ---------- */
.site-footer { position: relative; isolation: isolate; }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 58, 255, 0.8), rgba(3, 191, 111, 0.6), transparent);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}

/* ---------- Tarjetas de páginas internas ---------- */
.news-card, .project-card, .more-case, .team-card, .evolve-card, .job-card { position: relative; }
.case-media { position: relative; overflow: hidden; }
.case-media img { transition: transform 0.9s var(--ease); }
.case-row:hover .case-media img { transform: scale(1.03); }

/* ---------- Botón de pausa global (WCAG 2.2.2) ---------- */
.fx-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(32, 31, 51, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 9, 24, 0.35);
  transition: background 0.2s ease, transform 0.2s var(--ease);
}
.fx-toggle:hover { background: var(--brand); transform: translateY(-2px); }
.fx-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fx-toggle::before { content: ""; width: 8px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.fx-toggle[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* ==========================================================================
   Animaciones (solo si el usuario no pidió reducir movimiento)
   ========================================================================== */
@keyframes fx-shimmer { to { background-position: -60% 0; } }
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-hudscan { 0% { top: -30%; } 60%, 100% { top: 110%; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(3, 191, 111, 0.2); } 50% { box-shadow: 0 0 0 7px rgba(3, 191, 111, 0); } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: fx-shimmer 7s ease-in-out 1.2s infinite alternate; }
  .hero .eyebrow::after { animation: fx-blink 1.1s steps(1) infinite; }
  .hero .eyebrow::before { animation: fx-pulse 2.4s ease-in-out infinite; }
  .fx-hud-scan::before { animation: fx-hudscan 5.5s ease-in-out infinite; }
  .fx-hud-tag::before { animation: fx-blink 1.6s steps(1) infinite; }

  /* Entrada del hero al cargar, escalonada */
  .hero-copy > * { animation: fx-rise 0.9s var(--ease) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.15s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.28s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.4s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.52s; }
  .hero-visual, .page-hero .wrap > * { animation: fx-rise 1s var(--ease) 0.25s both; }
  .page-hero .wrap > :nth-child(2) { animation-delay: 0.35s; }
  .page-hero .wrap > :nth-child(3) { animation-delay: 0.45s; }

  /* Reveal más "tech": desenfoque + desplazamiento + leve escala */
  @media (scripting: enabled) {
    .reveal, .fx-reveal {
      opacity: 0;
      transform: translateY(28px) scale(0.985);
      filter: blur(6px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
    }
    .reveal.is-in, .fx-reveal.is-in { opacity: 1; transform: none; filter: none; }
    /* tras entrar, las tarjetas recuperan su transición de hover */
    .cap-card.is-in, .why-card.is-in, .news-card.is-in { transition: opacity 0.8s var(--ease), transform 0.3s var(--ease), filter 0.8s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease, background 0.3s ease; }
  }

}

/* Pausa global: congela animaciones decorativas */
.fx-paused .hero h1,
.fx-paused .hero .eyebrow::after,
.fx-paused .hero .eyebrow::before,
.fx-paused .fx-hud-scan::before,
.fx-paused .fx-hud-tag::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
  .hero h1 { background-position: 50% 0; }
  .reveal, .fx-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .process-step::before { background-size: 100% 100%, auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .city-on .hero[data-city-shot],
  .city-on .page-hero[data-city-shot] {
    background: linear-gradient(180deg, rgba(18, 15, 42, 0.8) 0%, rgba(18, 15, 42, 0.55) 55%, rgba(18, 15, 42, 0.85) 100%);
  }
  .city-on .city-window[data-city-shot] { background: rgba(18, 15, 42, 0.62); }
}
@media (max-width: 640px) {
  .fx-toggle { right: 12px; bottom: 12px; width: 44px; height: 44px; }
  .fx-hud-tag { top: 14px; right: 14px; }
  .statband .stat-item { border-color: rgba(255, 255, 255, 0.1) !important; }
}
@media print {
  .city3d, .fx-progress, .fx-toggle, .fx-hud, .fx-hud-scan, .fx-hud-tag { display: none !important; }
}

/* Hover de tarjetas después del reveal (misma especificidad que .reveal.is-in, por eso va al final) */
.cap-card.reveal.is-in:hover { transform: translateY(-4px); }
.why-card.reveal.is-in:hover { transform: translateY(-3px); }
.news-card.fx-reveal.is-in:hover { transform: translateY(-3px); }

/* Secciones claras: retícula de puntos tenue (detalle tech, no interfiere con el texto) */
main > .section:not(.section-dark):not(.city-window) { position: relative; isolation: isolate; }
main > .section:not(.section-dark):not(.city-window)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(74, 58, 255, 0.16) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
main > .section:nth-of-type(even):not(.section-dark):not(.city-window)::before {
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 0% 100%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 60% at 0% 100%, #000, transparent 70%);
}

/* ==========================================================================
   Modo Ciudad 3D continua en toda la portada (.city-full)
   ========================================================================== */
.city-full main > section:not(.hero):not(.city-window) {
  background: linear-gradient(180deg, rgba(16, 14, 38, 0.56) 0%, rgba(18, 15, 42, 0.44) 50%, rgba(16, 14, 38, 0.62) 100%);
  border-top: 1px solid rgba(185, 180, 255, 0.08);
}
.city-full .statband {
  background: transparent !important;
  border-top: 0 !important;
}
.city-full main > .section:not(.section-dark):not(.city-window)::before {
  display: none;
}

/* Títulos y kickers sobre la ciudad */
.city-full .section-head .kicker,
.city-full .nation .kicker {
  color: var(--blue-on-dark);
}
.city-full .section-head h2,
.city-full .nation h2 {
  color: #fff;
}
.city-full .section-head p,
.city-full .nation p {
  color: var(--slate-300);
}

/* Sectores (vidrio oscuro) */
.city-full .sector-panel {
  background: rgba(22, 20, 46, 0.72);
  border: 1px solid rgba(185, 180, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 24px 64px rgba(10, 9, 24, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.city-full .sector-panel h3 { color: #fff; }
.city-full .sector-panel p { color: var(--slate-300); }
.city-full .sector-index { color: var(--blue-on-dark); }
.city-full .sector-pills li {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(185, 180, 255, 0.2);
  color: var(--slate-200);
}
.city-full .sector-link { color: var(--blue-on-dark); }
.city-full .sector-link:hover { color: #fff; }

/* Soluciones (rail + escenario en vidrio oscuro) */
.city-full .sol-item {
  background: rgba(22, 20, 46, 0.62);
  border: 1px solid rgba(185, 180, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--slate-200);
}
.city-full .sol-item:hover {
  background: rgba(34, 31, 68, 0.78);
  border-color: rgba(185, 180, 255, 0.3);
}
.city-full .sol-item strong { color: #fff; }
.city-full .sol-item-body span { color: var(--slate-300); }
.city-full .sol-item-index { color: var(--slate-400); }
.city-full .sol-item.is-active {
  background: linear-gradient(90deg, rgba(74, 58, 255, 0.32), rgba(22, 20, 46, 0.88));
  box-shadow: inset 0 0 0 1px rgba(185, 180, 255, 0.4), 0 12px 32px rgba(10, 9, 24, 0.45);
}
.city-full .sol-item.is-active .sol-item-index { color: var(--blue-on-dark); }

.city-full .sol-stage {
  background: rgba(20, 18, 42, 0.78);
  border: 1px solid rgba(185, 180, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 28px 72px rgba(10, 9, 24, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.city-full .sol-copy h3 { color: #fff; }
.city-full .sol-copy p { color: var(--slate-300); }
.city-full .sol-metrics > div {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(185, 180, 255, 0.18);
}
.city-full .sol-metrics dt {
  background: linear-gradient(135deg, #fff 20%, var(--blue-on-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.city-full .sol-metrics dd { color: var(--slate-300); }
.city-full .sol-actions .btn-secondary,
.city-full .section-head .btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.32);
}
.city-full .sol-actions .btn-secondary:hover,
.city-full .section-head .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}
.city-full .project-more .text-link { color: var(--blue-on-dark); }
.city-full .project-more .text-link:hover { color: #fff; }

/* Proceso (tarjetas en vidrio oscuro) */
.city-full .process-step {
  background: rgba(22, 20, 46, 0.72);
  border-color: rgba(185, 180, 255, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 52px rgba(10, 9, 24, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.city-full .process-step:hover {
  border-color: rgba(185, 180, 255, 0.38);
  box-shadow: 0 24px 60px rgba(10, 9, 24, 0.55);
}
.city-full .process-step h3 { color: #fff; }
.city-full .process-step p { color: var(--slate-300); }
.city-full .process-step.is-in .process-num {
  box-shadow: 0 0 0 8px rgba(74, 58, 255, 0.22), 0 0 28px rgba(74, 58, 255, 0.65);
}

/* Compromiso nacional */
.city-full .nation {
  background: rgba(22, 20, 46, 0.74);
  border: 1px solid rgba(185, 180, 255, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(10, 9, 24, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.city-full .nation-points li {
  color: var(--slate-200);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(185, 180, 255, 0.16);
}

/* Vacantes destacadas */
.city-full .job-card {
  background: rgba(22, 20, 46, 0.74);
  border-color: rgba(185, 180, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.city-full .job-card:hover {
  border-color: rgba(185, 180, 255, 0.44);
  box-shadow: 0 20px 54px rgba(10, 9, 24, 0.55);
}
.city-full .job-card h3 { color: #fff; }
.city-full .job-meta,
.city-full .job-summary { color: var(--slate-300); }
.city-full .job-chip {
  background: rgba(74, 58, 255, 0.26);
  color: var(--blue-on-dark);
  border: 1px solid rgba(185, 180, 255, 0.22);
}
.city-full .job-card-cta { color: var(--blue-on-dark); }