/* ==========================================================================
   Estrategia Electoral 360° — hoja de estilos base
   Tokens: paleta de marca navy/slate/negro (#0E1F35, #354855, #64727C,
   #000000) sobre gris neutro frío, en línea con el logotipo (ícono "C" +
   mapa de red territorial). Un solo acento deliberado — el dorado del
   propio logotipo — reservado para CTAs, datos y etiquetas; el resto es
   monocromático (familia navy/slate/gris) para un tono serio, "war room".
   Tipografía unificada: Inter (títulos, cuerpo y etiquetas).
   Lenguaje visual: aire generoso, esquinas redondeadas, tarjetas suaves
   con sombra en lugar de bloques oscuros y rejillas de línea fina, con
   acentos de movimiento (glow, barrido de gradiente, pulso) inspirados en
   plataformas analíticas de campaña.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy-deep: #0E1F35;
  --navy: #0E1F35;
  --navy-soft: #354855;
  --accent: #0E1F35;
  --accent-light: #354855;
  --accent-wash: rgba(14, 31, 53, 0.08);
  --accent-2: #B68D2C;
  --accent-2-wash: rgba(182, 141, 44, 0.14);
  --gradient-brand: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  --gradient-brand-sweep: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent) 100%);
  /* Acento puntual "dato en vivo": cian eléctrico reservado para pulsos/pings
     y highlights de estado en tiempo real — no reemplaza el dorado de marca. */
  --pulse: #0EA5E9;
  --pulse-wash: rgba(14, 165, 233, 0.14);
  --bg: #F3F4F5;
  --bg-rgb: 243, 244, 245;
  --bg-dim: #E2E6E9;
  --surface: #FFFFFF;
  --ink: #000000;
  --slate: #64727C;
  --line: #C7CDD2;
  color-scheme: light;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --container: 1120px;

  --shadow-soft: 0 10px 30px rgba(14, 31, 53, 0.10);
  --shadow-hover: 0 18px 40px rgba(14, 31, 53, 0.16);
}

/* Modo oscuro: mismos tokens, reasignados. --navy-deep no cambia a propósito
   (fondo fijo del footer y de trazos de la ilustración de urna, pensado para
   verse siempre oscuro contra formas blancas fijas, no contra la página). */
:root[data-theme="dark"] {
  --navy: #F4F6F7;
  --navy-soft: #C7CDD2;
  --accent: #D4AF5A;
  --accent-light: #E4C583;
  --accent-wash: rgba(212, 175, 90, 0.16);
  --accent-2: #64727C;
  --accent-2-wash: rgba(100, 114, 124, 0.2);
  --pulse: #38BDF8;
  --pulse-wash: rgba(56, 189, 248, 0.16);
  --bg: #0A1524;
  --bg-rgb: 10, 21, 36;
  --bg-dim: #142234;
  --surface: #0E1F35;
  --ink: #F2F4F5;
  --slate: #9AA5AC;
  --line: #26384A;
  color-scheme: dark;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--slate); }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 0.8em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, background-position 0.5s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background-image: var(--gradient-brand-sweep);
  background-size: 210% auto;
  background-position: 0% center;
  color: #FFFFFF;
}
.btn-primary:hover {
  background-position: 100% center;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(14, 31, 53, 0.32);
}
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { border-color: var(--accent); background: var(--accent); color: #FFFFFF; box-shadow: 0 12px 26px rgba(14, 31, 53, 0.24); }
.btn-outline-light { border-color: rgba(243,244,245,0.5); color: var(--bg); background: transparent; }
.btn-outline-light:hover { background: var(--bg); color: var(--navy); }

.btn[disabled], .btn:disabled { cursor: default; opacity: 0.8; }
.btn__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------- Carga global del sitio */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(2px);
}
.page-loading-overlay[hidden] { display: none; }
.page-loading-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  padding: 1.6em 2.2em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.page-loading-overlay__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: page-loading-spin 0.7s linear infinite;
}
.page-loading-overlay__text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--slate);
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-loading-overlay__spinner { animation-duration: 1.4s; }
}

/* ---------------------------------------------------------------- Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.navbar .container {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 96px;
}
.navbar img.logo { height: 80px; display: block; }
.navbar .brand { display: flex; align-items: center; margin-right: auto; }
.navbar img.logo--dark { display: none; }
:root[data-theme="dark"] .navbar img.logo--light { display: none; }
:root[data-theme="dark"] .navbar img.logo--dark { display: block; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle__icon--moon { display: block; }
.theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }

.navbar nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.navbar nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.75;
}
.navbar nav a:hover { opacity: 1; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.nav-toggle-bars span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .navbar nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .navbar nav.is-open { max-height: 400px; }
  .navbar nav a {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    opacity: 1;
  }
  .navbar nav a.btn {
    margin: 14px 24px;
    justify-content: center;
    border-top: none;
    padding: 0.9em 1.8em;
  }
}

/* --------------------------------------------------------- Subnav portal */
.portal-subnav {
  position: sticky;
  top: 96px;
  z-index: 49;
  background: var(--bg-dim);
  border-bottom: 1px solid var(--line);
}
.portal-subnav .container {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-x: auto;
}
.portal-subnav__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--navy);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  opacity: 0.75;
}
.portal-subnav__home svg { width: 16px; height: 16px; }
.portal-subnav__home:hover { opacity: 1; }
.portal-subnav__home.is-active { border-bottom-color: var(--accent); color: var(--accent); opacity: 1; }
.portal-subnav__divider { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
.portal-subnav__lineas { display: flex; align-items: center; gap: 10px; }
.portal-subnav__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.portal-subnav__pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pill-color, var(--accent));
  flex-shrink: 0;
}
.portal-subnav__pill:hover { border-color: var(--pill-color, var(--accent)); box-shadow: var(--shadow-soft); color: var(--navy); }
.portal-subnav__pill.is-active {
  border-color: var(--pill-color, var(--accent));
  box-shadow: 0 0 0 1px var(--pill-color, var(--accent)) inset;
  color: var(--navy);
}
@media (max-width: 640px) {
  .portal-subnav__pill { padding: 6px 12px; }
}

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  padding: 110px 0 130px;
}
/* Prueba: fondo fotográfico (circuito + mano) en ambos temas, con velo del
   color de fondo de cada tema encima, más marcado bajo el bloque de texto
   (columna izquierda) y casi transparente hacia la derecha, donde está la
   ilustración, para que la foto se note pero el texto siga legible.
   Va en un ::before (no en el background de .hero) para poder atenuarla
   con "filter" en tema claro sin afectar el texto ni los botones. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(100deg, rgba(var(--bg-rgb), 0.5) 0%, rgba(var(--bg-rgb), 0.32) 26%, rgba(var(--bg-rgb), 0.14) 46%, rgba(var(--bg-rgb), 0.02) 72%), url("../img/hero-bg-photo.8584e3a70341.jpg");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
/* En tema claro la foto (oscura y muy saturada) choca con el resto de la
   página, clara y calmada — se ve "pesada". Se atenúa con más velo y menos
   saturación/brillo para que aporte textura sin cansar la vista. */
:root[data-theme="light"] .hero::before {
  background-image: linear-gradient(100deg, rgba(var(--bg-rgb), 0.94) 0%, rgba(var(--bg-rgb), 0.84) 26%, rgba(var(--bg-rgb), 0.62) 46%, rgba(var(--bg-rgb), 0.4) 72%), url("../img/hero-bg-photo.8584e3a70341.jpg");
  filter: saturate(0.5) brightness(1.2);
}
.hero .container { position: relative; z-index: 2; max-width: 760px; }
.hero .eyebrow, .hero h1, .hero p.lede {
  text-shadow:
    -1px -1px 2px rgba(var(--bg-rgb), 1), 1px -1px 2px rgba(var(--bg-rgb), 1),
    -1px 1px 2px rgba(var(--bg-rgb), 1), 1px 1px 2px rgba(var(--bg-rgb), 1),
    0 1px 3px rgba(var(--bg-rgb), 1), 0 4px 16px rgba(var(--bg-rgb), 0.85);
}
.hero h1 { color: var(--navy); max-width: 480px; }
.hero p.lede { color: var(--ink); font-size: 1.15rem; max-width: 560px; font-weight: 500; }
.hero .actions { display: flex; gap: 14px; margin-top: 2em; flex-wrap: wrap; }

.hero .eyebrow, .hero h1, .hero p.lede, .hero .actions {
  opacity: 0;
  animation: hero-fade-up 0.7s ease forwards;
}
.hero .eyebrow { animation-delay: 0.05s; display: inline-flex; align-items: center; gap: 9px; }
.hero h1 { animation-delay: 0.15s; }
.hero p.lede { animation-delay: 0.28s; }
.hero .actions { animation-delay: 0.4s; }
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse);
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5);
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

/* Red de puntos interactiva: sigue el cursor dentro del hero (canvas),
   eco de las redes de datos/conexiones de la propuesta */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Glows suaves de fondo: aportan movimiento ambiental al hero sin distraer
   del contenido (paleta magenta→violeta, muy difuminados) */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  animation: glow-float 18s ease-in-out infinite;
}
.hero-glow--a { width: 420px; height: 420px; background: var(--accent); top: -140px; left: -120px; }
.hero-glow--b {
  width: 380px; height: 380px; background: var(--accent-2);
  bottom: -160px; left: 30%;
  animation-duration: 22s;
  animation-delay: -7s;
}
@keyframes glow-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, -24px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow::before { animation: none; }
  .hero-glow { animation: none; }
}

/* Firma visual: urna electoral que recibe las 6 líneas de servicio, eco del
   ícono de marca (pin territorial + lente de análisis). Un anillo tenue de
   cobertura enmarca la composición; la urna respira y su ranura hace "ping"
   como si registrara datos en tiempo real, mientras cada línea se resalta
   por turnos alrededor. */
.radar-signature {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
  height: 620px;
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
}
.radar-signature .urna-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 560px; height: 560px;
  border: 1.5px dashed rgba(14, 31, 53, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: urna-ring-spin 90s linear infinite;
}
.urna-stage {
  position: absolute;
  top: 50%; left: 50%;
  width: 230px;
  transform: translate(-50%, -50%);
}
.urna-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 230px; height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 70%);
  animation: urna-breathe 6s ease-in-out infinite;
}
.urna {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(14, 31, 53, 0.24));
  animation: urna-breathe 6s ease-in-out infinite;
}

/* Urna isométrica de vidrio: tapa + dos caras laterales traslúcidas con
   boletas visibles dentro, brillo diagonal y una boleta entrando por la
   ranura — lectura de urna "profesional" en vez de ícono plano */
.urna-shadow { fill: rgba(14, 31, 53, 0.16); }
.urna-face-left,
.urna-face-right {
  fill: url(#urnaGradient);
}
.urna-face-left { fill-opacity: 0.14; }
.urna-face-right { fill-opacity: 0.19; }
.urna-face-edge {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.urna-pile rect {
  fill: #FDFBF6;
  stroke: var(--line);
  stroke-width: 1;
}
.urna-shine-diag { fill: #FFFFFF; opacity: 0.28; }
.urna-face-top {
  fill: url(#urnaGradient);
  fill-opacity: 0.6;
  stroke: var(--navy);
  stroke-opacity: 0.3;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.urna-slot { fill: var(--navy-deep); }
.urna-ballot-in { fill: #FFFFFF; stroke: var(--line); stroke-width: 1.2; }
.urna-plate { fill: #FFFFFF; stroke: var(--line); stroke-width: 1; }
.urna-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.03em;
  fill: var(--navy-deep);
  fill-opacity: 0.85;
  text-anchor: middle;
}
.urna-ping {
  fill: none;
  stroke: var(--pulse);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: urna-ping 2.6s ease-out infinite;
}
@keyframes urna-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes urna-ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes urna-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(3); opacity: 0; }
}
.radar-signature .node-wrap { position: absolute; width: 0; height: 0; }

/* Cada línea de servicio es una mini-boleta que flota alrededor de la urna:
   franja de color + folio + marca, como una boleta de papel a la espera de
   depositarse. Centrada en su punto del hexágono, con una leve inclinación
   propia para sensación de boletas reales, ligeramente dispersas. */
.mini-boleta {
  position: absolute;
  top: 0; left: 0;
  width: 108px;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(14, 31, 53, 0.16);
  font-family: var(--font-body);
  animation: mini-boleta-detect 14s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.mini-boleta__bar { display: block; height: 5px; }
.mini-boleta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 5px;
  border-bottom: 1px dashed var(--line);
}
.mini-boleta__code {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--navy-deep);
}
.mini-boleta__mark {
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.3px solid var(--line);
  box-shadow: 0 0 0 3px rgba(14, 31, 53, 0.06);
}
.mini-boleta__label {
  display: block;
  padding: 5px 8px 7px;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--slate);
}

/* Posiciones del hexágono (coinciden con node-wrap top/left) e inclinación
   propia de cada boleta, para que no luzcan alineadas en cuadrícula */
.radar-signature .nodes > div:nth-child(1) { top: 15%; left: 50%; }
.radar-signature .nodes > div:nth-child(1) .mini-boleta { --rot: -3deg; }
.radar-signature .nodes > div:nth-child(2) { top: 32.5%; left: 82%; }
.radar-signature .nodes > div:nth-child(2) .mini-boleta { --rot: 2.5deg; }
.radar-signature .nodes > div:nth-child(3) { top: 67.5%; left: 82%; }
.radar-signature .nodes > div:nth-child(3) .mini-boleta { --rot: -2deg; }
.radar-signature .nodes > div:nth-child(4) { top: 85%; left: 50%; }
.radar-signature .nodes > div:nth-child(4) .mini-boleta { --rot: 3.5deg; }
.radar-signature .nodes > div:nth-child(5) { top: 67.5%; left: 18%; }
.radar-signature .nodes > div:nth-child(5) .mini-boleta { --rot: -2.5deg; }
.radar-signature .nodes > div:nth-child(6) { top: 32.5%; left: 18%; }
.radar-signature .nodes > div:nth-child(6) .mini-boleta { --rot: 3deg; }

/* Cada boleta se resalta por turnos, como si fuera depositada en la urna */
.radar-signature .nodes > div:nth-child(1) .mini-boleta { animation-delay: 6.44s; }
.radar-signature .nodes > div:nth-child(2) .mini-boleta { animation-delay: 8.77s; }
.radar-signature .nodes > div:nth-child(3) .mini-boleta { animation-delay: 11.11s; }
.radar-signature .nodes > div:nth-child(4) .mini-boleta { animation-delay: 13.44s; }
.radar-signature .nodes > div:nth-child(5) .mini-boleta { animation-delay: 1.77s; }
.radar-signature .nodes > div:nth-child(6) .mini-boleta { animation-delay: 4.11s; }

@keyframes mini-boleta-detect {
  0%, 42%, 58%, 100% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
    box-shadow: 0 10px 22px rgba(14, 31, 53, 0.16);
    z-index: 1;
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.16);
    box-shadow: 0 22px 44px rgba(14, 31, 53, 0.32), 0 0 0 4px var(--pulse-wash);
    z-index: 5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-signature .urna-ring,
  .urna-glow,
  .urna,
  .urna-ping { animation: none; }
  .mini-boleta { animation: none; }
}
@media (max-width: 1220px) {
  .radar-signature { display: none; }
}

/* --------------------------------------------------------------- Franja */
.strip {
  background: var(--bg-dim);
  color: var(--navy);
  padding: 22px 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.strip .container span {
  font-weight: 800;
  background-image: var(--gradient-brand-sweep);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 7s ease-in-out infinite;
}
@keyframes text-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .strip .container span { animation: none; }
}

/* ---------------------------------------------------------- Secciones */
.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--dim { background: var(--bg-dim); }
.section-head { max-width: 640px; margin-bottom: 3em; }
.section-head p { font-size: 1.05rem; }

/* -------------------------------------------------------- Tarjetas Línea */
.lineas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.linea-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.linea-card::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--gradient-brand);
  transition: width 0.4s ease;
}
.linea-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(14, 31, 53, 0.14), var(--shadow-hover);
}
.linea-card:hover::before { width: 100%; }
.boleta-head .num {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 0.35em 0.75em;
  border-radius: var(--radius-pill);
  margin-bottom: 0;
}
.linea-card:nth-child(even) .num { color: var(--accent-2); background: var(--accent-2-wash); }
.paquete-card:nth-child(even) .num { color: var(--accent-2); background: var(--accent-2-wash); }
.linea-card h3 { margin-bottom: 0.35em; }

/* Cabecera tipo boleta electoral: folio + marca de "voto" que se llena al
   pasar el cursor, eco de la urna del hero (cada tarjeta es una boleta que
   se deposita al elegirla). Compartida por tarjetas de línea y de paquete. */
.linea-card, .paquete-card { isolation: isolate; }
.linea-card::after, .paquete-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
}
.boleta-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1.5px dashed var(--line);
}
.boleta-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.boleta-mark {
  margin-left: auto;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: border-color 0.25s ease;
}
.boleta-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--gradient-brand);
  transform: scale(0);
  transition: transform 0.25s ease;
}
.boleta-mark svg {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  color: var(--line);
  transition: color 0.25s ease;
}
.linea-card:hover .boleta-mark, .paquete-card:hover .boleta-mark { border-color: var(--accent); }
.linea-card:hover .boleta-mark::after, .paquete-card:hover .boleta-mark::after { transform: scale(1); }
.linea-card:hover .boleta-mark svg, .paquete-card:hover .boleta-mark svg { color: #FFFFFF; }

/* --------------------------------------------------------- Iconos temáticos
   Vocabulario visual reducido (urna, boleta, voto verificado) reutilizado
   como acento en secciones que antes eran solo texto, para reforzar el tema
   electoral sin saturar de íconos genéricos de negocio. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 0.9em;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge--gold { background: var(--accent-2-wash); color: var(--accent-2); }
.icon-badge--sm { width: 38px; height: 38px; margin-bottom: 0.7em; }
.icon-badge--sm svg { width: 18px; height: 18px; }
.linea-card .momento {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: auto;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.linea-card .ver-mas {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-top: 1.2em;
}
.linea-card .ver-mas::after { content: " →"; }

/* ---------------------------------------------------------- Portal cliente */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.badge-estado {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  margin-bottom: 0.8em;
}
.badge-estado--activa { color: #15803D; background: rgba(21,128,61,0.10); }
.badge-estado--pendiente { color: var(--slate); background: var(--bg-dim); }
.badge-estado--pausada { color: #B45309; background: rgba(180,83,9,0.10); }
.badge-estado--finalizada { color: var(--navy); background: var(--accent-wash); }
.badge-estado--completada { color: #15803D; background: rgba(21,128,61,0.10); }
.badge-estado--error { color: #B91C1C; background: rgba(185,28,28,0.10); }

.badge-nuevo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  color: var(--pulse);
  background: var(--pulse-wash);
}
.badge-nuevo::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: badge-nuevo-ping 1.4s ease-in-out infinite;
}
@keyframes badge-nuevo-ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Fila/tarjeta recién investigada: fondo que se desvanece solo, para que
   el ojo la encuentre sin dejar un marcador permanente en el historial.
   background-color (no box-shadow) porque también se usa sobre <tr>. */
.is-destacado { animation: destacar-fade 2.6s ease-out 1; scroll-margin-top: 90px; }
@keyframes destacar-fade {
  0% { background-color: var(--pulse-wash); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-nuevo::before { animation: none; }
  .is-destacado { animation: none; background-color: var(--pulse-wash); }
}

.permisos-mapa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0.8em 0 1.6em;
}
.permiso-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
}
.permiso-chip__nivel {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  background: var(--accent-2-wash);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-pill);
}

.dossier-list {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  margin: 0.8em 0 1.6em;
}
.dossier-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1em 1.2em;
  background: var(--surface);
}
.dossier-item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 0.4em;
}
.dossier-item__head .badge-estado { margin-bottom: 0; }
.dossier-item__contienda { color: var(--slate); font-size: 0.9rem; }
.dossier-item__desc { margin: 0.3em 0; font-size: 0.92rem; }
.dossier-item__meta { margin: 0; font-size: 0.82rem; color: var(--slate); font-family: var(--font-mono); }

.actividad-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0.8em 0 1.6em;
}
.actividad-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
  padding: 0.7em 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.actividad-item__tipo {
  display: inline-flex;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--bg-dim);
  color: var(--slate);
}
.actividad-item__tipo--login { color: #15803D; background: rgba(21,128,61,0.10); }
.actividad-item__tipo--login_fallido { color: #B91C1C; background: rgba(185,28,28,0.10); }
.actividad-item__tipo--diagnostico_ia,
.actividad-item__tipo--chat_ia { color: var(--accent); background: var(--accent-wash); }
.actividad-item__tipo--dossier_solicitud { color: var(--accent-2); background: var(--accent-2-wash); }
.actividad-item__detalle { font-size: 0.9rem; flex: 1; min-width: 160px; }
.actividad-item__fecha { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate); white-space: nowrap; }
.actividad-vacio {
  margin: 0.8em 0 1.6em;
  padding: 1em 1.2em;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-size: 0.9rem;
  background: var(--bg-dim);
}

/* ------------------------------------------------------------ Detalle L# */
.linea-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dim);
  color: var(--ink);
  padding: 72px 0 60px;
  border-bottom: 1px solid var(--line);
}
.linea-hero .container { position: relative; z-index: 1; }
.linea-hero .codigo {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.linea-hero h1 { color: var(--navy); margin-top: 0.4em; }
.linea-hero .subtitulo { color: var(--slate); max-width: 620px; }

.entregables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 1em;
}
.entregable {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 20px;
}
.entregable .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 0.4em;
}
.entregable h4 { font-size: 1.02rem; margin-bottom: 0.3em; }
.entregable p, .entregable .entregable-desc { font-size: 0.95rem; margin: 0; color: var(--slate); }
.entregable .entregable-desc p { margin: 0 0 0.6em; }
.entregable .entregable-desc p:last-child { margin-bottom: 0; }
.entregable .puntos-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0.9em 0 0.3em; }
.entregable ul.puntos-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.entregable ul.puntos-list li { position: relative; padding: 3px 0 3px 16px; color: var(--slate); }
.entregable ul.puntos-list li::before { content: "–"; position: absolute; left: 0; color: var(--accent-2); }
.entregable .nota { font-size: 0.88rem; font-style: italic; color: var(--slate); margin-top: 0.8em; }

.que-resuelve p { margin: 0 0 1em; }
.que-resuelve p:last-child { margin-bottom: 0; }

.inteligencia-genera, .conexion-360 {
  margin-top: 3em;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--bg-dim);
  border: 1px solid var(--line);
  max-width: 720px;
}
.inteligencia-genera h3 { color: var(--navy); margin: 0.3em 0 0.5em; }
.inteligencia-genera p { margin: 0 0 0.8em; color: var(--slate); }
.inteligencia-genera p:last-child { margin-bottom: 0; }
.conexion-360 p { margin: 0; color: var(--slate); }

.checklist {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
  max-width: 900px;
}
.checklist li { position: relative; padding-left: 26px; font-size: 0.95rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.plataforma-cierre {
  margin-top: 4em;
  padding: 3em 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.plataforma-cierre h3 { color: var(--navy); }
.plataforma-cierre ul {
  list-style: none;
  margin: 1.2em auto;
  padding: 0;
  max-width: 480px;
  text-align: left;
}
.plataforma-cierre li { font-size: 0.95rem; padding: 4px 0; }
.plataforma-cierre p { max-width: 620px; margin: 0 auto; color: var(--slate); }

/* ------------------------------------------------------ Panel prototipo */
.proto-panel { margin: 2em 0 2.5em; }
.proto-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-2-wash);
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  margin-bottom: 1em;
}
.proto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.proto-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}
.proto-tile h4 { font-size: 0.92rem; margin-bottom: 1.1em; }
.proto-tile__real { font-weight: 600; font-size: 0.72rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.03em; }

.mencion-list { display: flex; flex-direction: column; gap: 12px; }
.mencion-item { display: flex; gap: 10px; align-items: flex-start; }
.mencion-item img {
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-dim);
}
.mencion-item__body { min-width: 0; }
.mencion-item__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.mencion-item:hover .mencion-item__titulo { color: var(--accent); }
.mencion-item__meta { display: block; font-size: 0.76rem; color: var(--slate); margin-top: 2px; }
.mencion-vacio { font-size: 0.85rem; color: var(--slate); margin: 0; }

.comentario-list { display: flex; flex-direction: column; gap: 14px; }
.comentario-item { display: flex; gap: 10px; align-items: flex-start; }
.comentario-item img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-dim);
}
.comentario-item__body { min-width: 0; font-size: 0.85rem; }
.comentario-item__nombre { font-weight: 600; color: var(--ink); }
.comentario-item__nombre a { color: inherit; }
.comentario-item__nombre a:hover { color: var(--accent); }
.comentario-item__texto { display: block; color: var(--ink); margin-top: 2px; }
.comentario-item__meta { display: block; font-size: 0.76rem; color: var(--slate); margin-top: 3px; }

.info-tip { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.info-tip__btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--bg-dim);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
}
.info-tip__btn:hover { background: var(--accent-wash); color: var(--accent); }
.info-tip__bubble {
  display: none;
  position: absolute;
  z-index: 30;
  top: 130%;
  left: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-hover);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.info-tip__bubble.is-open { display: block; }
.info-tip__bubble--right { left: auto; right: 0; }

.proto-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.proto-bar-row:last-child { margin-bottom: 0; }
.proto-bar-row .proto-bar-label {
  width: 48px;
  flex-shrink: 0;
  font-size: 0.76rem;
  color: var(--slate);
}
.proto-bar-track {
  flex: 1;
  height: 18px;
  background: var(--bg-dim);
  border-radius: 4px;
  overflow: hidden;
}
.proto-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: fit-content;
}
.proto-bar-fill span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.proto-stat { text-align: center; margin: auto 0; padding: 0.5em 0; }
.proto-stat .proto-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--navy);
  line-height: 1;
}
.proto-stat .proto-stat__caption { font-size: 0.82rem; color: var(--slate); margin-top: 0.6em; }

.proto-map-preview {
  height: 96px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-wash), var(--accent-2-wash));
  position: relative;
  overflow: hidden;
  margin-bottom: 1.1em;
}
.proto-map-preview .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.4;
}
.proto-map-preview .dot--pin {
  width: 12px;
  height: 12px;
  background: var(--gradient-brand);
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(14, 31, 53,0.16);
}

.mx-heatmap-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.mx-heatmap {
  flex: 1 1 320px;
  max-width: 420px;
}
.mx-heatmap svg { display: block; width: 100%; height: auto; }
.mx-heatmap path { transition: opacity 0.15s ease; cursor: default; }
.mx-heatmap path:hover { opacity: 0.75; }
.mx-heatmap__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 300px;
  margin: 1em auto 0;
  font-size: 0.72rem;
  color: var(--slate);
}
.mx-heatmap__scale {
  flex: 1;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bg-dim), var(--accent));
}

.mx-heatmap-list {
  flex: 1 1 200px;
  max-width: 260px;
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mx-rank;
}
.mx-heatmap-list li {
  counter-increment: mx-rank;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.mx-heatmap-list li:first-child { border-top: none; }
.mx-heatmap-list li::before {
  content: counter(mx-rank);
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-dim);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-heatmap-list__region { flex: 1; }
.mx-heatmap-list__valor {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}

.proto-panel__footnote {
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 1.2em;
}

/* ------------------------------------------------------- Investigación */
.linea-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.linea-section-head .btn { padding: 0.5em 1.1em; font-size: 0.85rem; white-space: nowrap; }

.investigacion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.investigacion-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.4em;
}
.investigacion-item__fecha { font-size: 0.8rem; color: var(--slate); margin-left: auto; }
.investigacion-item summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.6em;
}
.investigacion-item pre {
  background: var(--bg-dim);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.78rem;
  overflow-x: auto;
  max-height: 320px;
  margin-top: 0.6em;
}

/* ------------------------------------------------------ Tabla de historial */
.historial-table-wrap {
  overflow-x: auto;
  margin: 1.4em 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.historial-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--surface);
}
.historial-table th {
  text-align: left;
  padding: 14px 18px;
  background: var(--bg-dim);
  color: var(--slate);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.historial-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
  white-space: nowrap;
}
.historial-table td:nth-child(2) { white-space: normal; }
.historial-table tbody tr:last-child td { border-bottom: none; }
.historial-table tbody tr:hover { background: var(--bg-dim); }
.historial-table__num {
  font-family: var(--font-mono);
  color: var(--slate);
  font-weight: 600;
}
.historial-table__desc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--navy);
}
.historial-table__link { font-weight: 700; color: var(--accent); }
.historial-table__link:hover { color: var(--accent-2); }
.historial-table__muted { color: var(--slate); font-size: 0.85rem; }
@media (max-width: 760px) {
  .historial-table th, .historial-table td { padding: 12px 14px; }
}

.tendencia-modal {
  width: min(880px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 28px 30px;
  background: var(--surface);
  color: var(--ink);
}
.tendencia-modal::backdrop { background: rgba(14, 31, 53, 0.55); }
.tendencia-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--line);
}
.tendencia-modal__close {
  background: var(--bg-dim);
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--navy);
  cursor: pointer;
}
.tendencia-modal__close:hover { background: var(--line); }
@media (max-width: 700px) {
  .tendencia-modal { padding: 22px 18px; }
}

.reporte-dd__section { margin: 1.6em 0; }
.reporte-dd__section h4 { font-size: 0.95rem; margin-bottom: 0.7em; }
.reporte-dd__summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0;
}
.reporte-dd__alerta {
  background: rgba(185, 28, 28, 0.08);
  color: #B91C1C;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.8em;
}
.reporte-dd__ok {
  background: rgba(21, 128, 61, 0.08);
  color: #15803D;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.8em;
}
.reporte-dd__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}
.reporte-dd__card--alerta { border-color: rgba(185, 28, 28, 0.3); }
.reporte-dd__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.reporte-dd__entidad {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 10px;
}
.reporte-dd__entidad .reporte-dd__card:first-of-type { margin-top: 12px; }
.reporte-dd__table-wrap { max-height: 340px; overflow: auto; margin-top: 0.8em; }
.reporte-dd__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.reporte-dd__table th {
  position: sticky; top: 0;
  background: var(--bg-dim);
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.reporte-dd__table td { padding: 7px 10px; border-top: 1px solid var(--line); }
.reporte-dd pre {
  background: var(--bg-dim);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.75rem;
  overflow-x: auto;
  max-height: 320px;
  margin-top: 0.6em;
}
.reporte-dd__resumen-web {
  background: var(--bg-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}

.reporte-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2em;
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--line);
}

.breadcrumb-nav {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--slate);
  padding: 20px 0 0;
}

/* --------------------------------------------------------- Panel embebido */
.embed-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.embed-panel__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-dim);
  border-bottom: 1px solid var(--line);
}
.embed-panel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gradient-brand);
  flex-shrink: 0;
}
.embed-panel__url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--slate);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.embed-panel__expand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.embed-panel__expand:hover { color: var(--accent-2); }
.embed-panel__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-dim);
}
.embed-panel__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .embed-panel__frame { aspect-ratio: 3 / 4; }
  .embed-panel__url { display: none; }
}
.embed-panel__frame--tall {
  aspect-ratio: auto;
  height: 85vh;
  min-height: 640px;
}
@media (max-width: 700px) {
  .embed-panel__frame--tall { height: 78vh; min-height: 480px; }
}
.embed-panel__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 3.5em 1.5em;
}
.embed-panel__cta p {
  max-width: 440px;
  color: var(--slate);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------- Paquetes */
.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
#paquetes-preview .paquetes-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  #paquetes-preview .paquetes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  #paquetes-preview .paquetes-grid { grid-template-columns: 1fr; }
}
.paquete-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px 30px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.paquete-card::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--gradient-brand);
  transition: width 0.4s ease;
}
.paquete-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(182, 141, 44, 0.16), var(--shadow-hover);
}
.paquete-card:hover::before { width: 100%; }
.paquete-card.destacado {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-brand) border-box;
  box-shadow: 0 18px 40px rgba(14, 31, 53, 0.2);
}
.paquete-card.destacado::before {
  content: "Recomendado";
  position: absolute;
  top: -13px;
  right: 28px;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  white-space: nowrap;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
}
.paquete-card .perfil { color: var(--slate); font-size: 0.92rem; margin-bottom: 1.2em; }
.paquete-card ul { list-style: none; margin: 0 0 1.4em; padding: 0; flex-grow: 1; }
.paquete-card li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.paquete-card li:first-child { border-top: none; }

/* --------------------------------------------------------------- Ciclo */
.ciclo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ciclo-col {
  background: var(--surface);
  color: var(--ink);
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 4px solid var(--navy);
  box-shadow: var(--shadow-soft);
}
.ciclo-col:nth-child(2) { border-top-color: var(--navy-soft); }
.ciclo-col:nth-child(3) { border-top-color: var(--accent-2); }
.ciclo-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
  color: var(--navy);
}
.ciclo-col:nth-child(2) h4 { color: var(--navy-soft); }
.ciclo-col:nth-child(3) h4 { color: var(--accent-2); }
.ciclo-col ul { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.ciclo-col li { padding: 5px 0; color: var(--slate); }
@media (max-width: 760px) { .ciclo-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Formulario */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--navy);
  margin-bottom: 0.4em;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.75em 0.9em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.dd-form-card__head { margin-bottom: 1.4em; }
.dd-form-card__head h3 { margin: 0 0 0.3em; font-size: 1.1rem; color: var(--navy); }
.dd-form-card__head p { margin: 0; font-size: 0.88rem; color: var(--slate); }
.dd-form-section {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 1.2em 0 0.2em;
}
.investigacion-item .form-grid .dd-form-section:first-child { margin-top: 0; }
.dd-radio-group { display: flex; gap: 18px; padding-top: 0.5em; }
.dd-radio { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.dd-radio input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }

.lineas-check {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.lineas-check > div { border-bottom: 1px solid var(--line); }
.lineas-check > div:last-child { border-bottom: none; }
.lineas-check label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}
.lineas-check label:hover { background: var(--bg-dim); }
.lineas-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.alert {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-bottom: 1.5em;
}

/* ------------------------------------------------------------------ Footer */
footer.site-footer {
  background: var(--navy-deep);
  color: rgba(243,244,245,0.65);
  padding: 50px 0 30px;
  font-size: 0.88rem;
}
footer.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px solid rgba(243,244,245,0.12);
  padding-bottom: 30px;
}
footer.site-footer .foot-bottom {
  max-width: var(--container);
  margin: 20px auto 0;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(243,244,245,0.4);
}

/* ------------------------------------------------------------ Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

.lineas-grid .reveal:nth-child(1) { transition-delay: 0.02s; }
.lineas-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.lineas-grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.lineas-grid .reveal:nth-child(4) { transition-delay: 0.2s; }
.lineas-grid .reveal:nth-child(5) { transition-delay: 0.26s; }
.lineas-grid .reveal:nth-child(6) { transition-delay: 0.32s; }
.paquetes-grid .reveal:nth-child(1) { transition-delay: 0.02s; }
.paquetes-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.paquetes-grid .reveal:nth-child(3) { transition-delay: 0.18s; }
.ciclo-grid .reveal:nth-child(1) { transition-delay: 0.02s; }
.ciclo-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.ciclo-grid .reveal:nth-child(3) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero p.lede, .hero .actions { animation: none; opacity: 1; }
  .hero-glow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}