/* ==========================================================================
   DIGER 2026 — Sistema de Diseño Maestro
   Portal de Trámites del Gobierno de Honduras
   --------------------------------------------------------------------------
   Basado en el Manual de Marca oficial DIGER (Dirección de Gestión por Resultados)
   Paleta: Azul Marino #02395e · Azul Medio #1a65a3 · Celeste #7acbdd
   Tipografía: Poppins (ExtraBold 800 títulos · Medium 500 cuerpo)
   --------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de color-1.css, style.css, renew.css
   para override completo del sistema dorado anterior.
   ========================================================================== */

/* =========================================================
   TOKENS — Variables CSS
   ========================================================= */
:root {
  /* --- Paleta oficial DIGER --- */
  --diger-celeste: #7acbdd;
  --diger-azul-medio: #1a65a3;
  --diger-azul-marino: #02395e;

  /* --- Escala azul marino --- */
  --marine-50:  #f0f4f8;
  --marine-100: #d9e2ec;
  --marine-200: #bcccdc;
  --marine-300: #9fb3c8;
  --marine-400: #627d98;
  --marine-500: #486581;
  --marine-600: #334e68;
  --marine-700: #243b53;
  --marine-800: #102a43;
  --marine-900: #02395e;
  --marine-950: #01253d;
  --marine-deep: #001a2b;

  /* --- Escala azul medio (interactivo) --- */
  --blue-50:  #eaf3fa;
  --blue-100: #cbe2f5;
  --blue-200: #93c4e9;
  --blue-300: #5ba7dc;
  --blue-400: #2a89cf;
  --blue-500: #1a65a3;
  --blue-600: #155486;
  --blue-700: #114269;
  --blue-800: #0c304c;

  /* --- Escala celeste (acento) --- */
  --cyan-50:  #f0fafc;
  --cyan-100: #d4f0f6;
  --cyan-200: #b0e3ed;
  --cyan-300: #7acbdd;
  --cyan-400: #5ab8cf;
  --cyan-500: #3aa1bc;
  --cyan-600: #2a85a0;
  --cyan-700: #1d6a82;

  /* --- Neutrales --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafbfc;
  --neutral-100: #f4f5f7;
  --neutral-200: #e9ebef;
  --neutral-300: #d2d6dc;
  --neutral-400: #9aa1ab;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* --- Semánticos --- */
  --success: #2a9d6c;
  --success-bg: #e6f7ee;
  --warning: #d97706;
  --warning-bg: #fff3e6;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --info: var(--diger-azul-medio);
  --info-bg: var(--blue-50);

  /* --- Aplicación --- */
  --color-bg: var(--neutral-0);
  --color-bg-alt: var(--neutral-50);
  --color-bg-elevated: var(--neutral-0);
  --color-bg-inverse: var(--marine-900);
  --color-text: var(--marine-900);
  --color-text-muted: var(--neutral-700);
  --color-text-soft: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-link: var(--blue-500);
  --color-link-hover: var(--blue-600);
  --color-accent: var(--diger-celeste);
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);

  /* --- Tipografía --- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluid type */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl:  clamp(3rem, 2.25rem + 3.75vw, 4.75rem);
  --text-6xl:  clamp(3.75rem, 2.75rem + 5vw, 6rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* --- Espaciado --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radius --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-pill: 999px;
  --radius-bar: 0 999px 999px 0;

  /* --- Sombras --- */
  --shadow-xs: 0 1px 2px 0 rgba(2, 57, 94, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(2, 57, 94, 0.08), 0 1px 2px -1px rgba(2, 57, 94, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(2, 57, 94, 0.10), 0 2px 4px -2px rgba(2, 57, 94, 0.06);
  --shadow-lg: 0 12px 24px -6px rgba(2, 57, 94, 0.12), 0 4px 8px -4px rgba(2, 57, 94, 0.08);
  --shadow-xl: 0 24px 48px -12px rgba(2, 57, 94, 0.18);
  --shadow-2xl: 0 32px 64px -16px rgba(2, 57, 94, 0.25);
  --shadow-glow: 0 0 32px rgba(26, 101, 163, 0.35);
  --shadow-glow-cyan: 0 0 32px rgba(122, 203, 221, 0.45);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(2, 57, 94, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(20px) saturate(160%);

  /* --- Z-index --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

/* Dark mode tokens */
[data-theme="dark"],
.dark-only,
body.dark-mode {
  --color-bg: var(--marine-deep);
  --color-bg-alt: var(--marine-950);
  --color-bg-elevated: var(--marine-900);
  --color-bg-inverse: var(--neutral-0);
  --color-text: var(--neutral-0);
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-soft: rgba(255, 255, 255, 0.55);
  --color-text-inverse: var(--marine-900);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-link: var(--cyan-300);
  --color-link-hover: var(--cyan-200);
  --color-primary: var(--cyan-300);
  --color-primary-hover: var(--cyan-200);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Override font Cuba template */
body, p, span, div, a, button, input, textarea, select, label, td, th, li, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h5, .h5 { font-size: var(--text-lg); font-weight: 600; }
h6, .h6 { font-size: var(--text-base); font-weight: 600; }

p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-link-hover);
}

.text-muted { color: var(--color-text-muted) !important; }
.text-soft { color: var(--color-text-soft) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-marine { color: var(--marine-900) !important; }
.text-blue { color: var(--blue-500) !important; }
.text-cyan { color: var(--cyan-300) !important; }
.text-white { color: var(--neutral-0) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

/* =========================================================
   ISOTIPO DIGER (decoración reutilizable)
   ========================================================= */
.diger-iso {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 32px;
}
.diger-iso > span {
  height: 6px;
  display: block;
  border-radius: var(--radius-bar);
}
.diger-iso > span:nth-child(1) { width: 90%; background: var(--cyan-300); }
.diger-iso > span:nth-child(2) { width: 75%; background: var(--marine-900); }
.diger-iso > span:nth-child(3) { width: 60%; background: var(--blue-500); }

.diger-iso--mono > span { background: var(--marine-900) !important; }
.diger-iso--white > span { background: var(--neutral-0) !important; }
.diger-iso--cyan > span { background: var(--cyan-300) !important; }

.diger-iso--lg { width: 56px; gap: 6px; }
.diger-iso--lg > span { height: 10px; }
.diger-iso--xl { width: 96px; gap: 12px; }
.diger-iso--xl > span { height: 18px; }
.diger-iso--hero { width: min(60vw, 800px); gap: 24px; opacity: 0.10; pointer-events: none; }
.diger-iso--hero > span { height: 80px; }
.diger-iso--hero > span:nth-child(1) { background: var(--neutral-0); width: 80%; }
.diger-iso--hero > span:nth-child(2) { background: var(--cyan-300); width: 65%; }
.diger-iso--hero > span:nth-child(3) { background: var(--blue-400); width: 50%; }

/* =========================================================
   ICONOS PREMIUM — Phosphor Icons helpers
   ========================================================= */
.diger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  color: currentColor;
}
.diger-icon-xs { font-size: 14px; }
.diger-icon-sm { font-size: 16px; }
.diger-icon-md { font-size: 20px; }
.diger-icon-lg { font-size: 24px; }
.diger-icon-xl { font-size: 32px; }
.diger-icon-2xl { font-size: 40px; }
.diger-icon-3xl { font-size: 56px; }

/* Icon container — círculo con fondo */
.diger-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-500);
  flex-shrink: 0;
}
.diger-icon-box--sm { width: 36px; height: 36px; font-size: 16px; border-radius: var(--radius-sm); }
.diger-icon-box--lg { width: 56px; height: 56px; font-size: 28px; border-radius: var(--radius-lg); }
.diger-icon-box--xl { width: 72px; height: 72px; font-size: 36px; border-radius: var(--radius-xl); }

.diger-icon-box--cyan { background: var(--cyan-100); color: var(--cyan-700); }
.diger-icon-box--marine { background: var(--marine-900); color: var(--cyan-300); }
.diger-icon-box--gradient {
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400));
  color: var(--marine-900);
  box-shadow: 0 4px 12px -4px rgba(122, 203, 221, 0.4);
}
.diger-icon-box--white { background: var(--neutral-0); color: var(--blue-500); box-shadow: var(--shadow-sm); }
.diger-icon-box--success { background: var(--success-bg); color: var(--success); }
.diger-icon-box--warning { background: var(--warning-bg); color: var(--warning); }
.diger-icon-box--danger { background: var(--danger-bg); color: var(--danger); }

.diger-icon-box--circle { border-radius: 50%; }

/* Hover effect en cards */
.diger-card--hover:hover .diger-icon-box--gradient {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 8px 24px -4px rgba(122, 203, 221, 0.6);
}

/* Phosphor icons — ajuste de alineación vertical */
[class^="ph-"], [class*=" ph-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* =========================================================
   BOTONES
   ========================================================= */
.diger-btn, .btn-diger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  position: relative;
}

.diger-btn:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
}

/* Primary — azul medio */
.diger-btn--primary,
.btn-diger-primary {
  background: var(--blue-500);
  color: var(--neutral-0);
}
.diger-btn--primary:hover,
.btn-diger-primary:hover {
  background: var(--blue-600);
  color: var(--neutral-0);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px rgba(26, 101, 163, 0.4);
}

/* Secondary — outline marino */
.diger-btn--secondary,
.btn-diger-secondary {
  background: transparent;
  color: var(--marine-900);
  border-color: var(--marine-900);
}
.diger-btn--secondary:hover,
.btn-diger-secondary:hover {
  background: var(--marine-900);
  color: var(--neutral-0);
}

/* Ghost — texto */
.diger-btn--ghost {
  background: transparent;
  color: var(--marine-900);
}
.diger-btn--ghost:hover {
  background: var(--neutral-100);
  color: var(--marine-900);
}

/* Cyan — celeste para acentos */
.diger-btn--accent {
  background: var(--cyan-300);
  color: var(--marine-900);
  font-weight: 700;
}
.diger-btn--accent:hover {
  background: var(--cyan-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-cyan);
}

/* Outline light (para fondos oscuros) */
.diger-btn--outline-light {
  background: transparent;
  color: var(--neutral-0);
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}
.diger-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--neutral-0);
  color: var(--neutral-0);
}

/* Glass */
.diger-btn--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  color: var(--color-text);
}

/* Sizes */
.diger-btn--sm { padding: 8px 14px; font-size: 13px; }
.diger-btn--lg { padding: 16px 28px; font-size: 16px; }
.diger-btn--xl { padding: 18px 32px; font-size: 17px; }
.diger-btn--pill { border-radius: var(--radius-pill); }
.diger-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
}

/* =========================================================
   CARDS
   ========================================================= */
.diger-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--duration-slow) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.diger-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.diger-card--accent-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  background: linear-gradient(180deg, var(--cyan-300), var(--blue-500));
  border-radius: 0 5px 5px 0;
  transition: height var(--duration-slow) var(--ease-out);
}
.diger-card--accent-bar:hover::before {
  height: 100%;
}

.diger-card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
}

/* =========================================================
   BADGES & CHIPS
   ========================================================= */
.diger-chip,
.diger-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.diger-chip--primary { background: var(--blue-50); color: var(--blue-600); }
.diger-chip--accent { background: var(--cyan-100); color: var(--cyan-700); }
.diger-chip--marine { background: var(--marine-100); color: var(--marine-900); }
.diger-chip--success { background: var(--success-bg); color: var(--success); }
.diger-chip--warning { background: var(--warning-bg); color: var(--warning); }
.diger-chip--danger { background: var(--danger-bg); color: var(--danger); }
.diger-chip--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: 11px; padding: 4px 10px; }

.diger-chip--pulse::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: digerPulse 2s ease-in-out infinite;
}

@keyframes digerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* =========================================================
   INPUTS
   ========================================================= */
.diger-input,
.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  outline: 0;
}

.diger-input:focus,
.form-control:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-50);
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
}

.diger-input::placeholder,
.form-control::placeholder {
  color: var(--color-text-soft);
}

.diger-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 6px;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.diger-search-bar:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-50), var(--shadow-md);
}
.diger-search-bar input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 10px 14px;
  font-size: 15.5px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--color-text);
}
.diger-search-bar input::placeholder {
  color: var(--color-text-soft);
}

/* =========================================================
   HERO LANDING V2 — Rediseño cinemático DIGER 2026
   --------------------------------------------------------
   Layout: 2 columnas (contenido principal + stats glass cards).
   Orbes animados de fondo (estilo Apple/Fluent).
   Isotipo decorativo gigante semitransparente.
   ========================================================= */

.hero-spectacular,
.hero-v2 {
  background: radial-gradient(ellipse at 20% 0%, #0a4a78 0%, transparent 50%),
              radial-gradient(ellipse at 80% 100%, #0c5a8f 0%, transparent 50%),
              linear-gradient(180deg, var(--marine-900) 0%, var(--marine-950) 100%) !important;
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

/* Orbes animados */
.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: digerOrbFloat 20s ease-in-out infinite;
}
.hero-orbs .orb-1 {
  top: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(26, 101, 163, 0.5) 0%, transparent 70%);
}
.hero-orbs .orb-2 {
  top: 50%;
  right: 5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(122, 203, 221, 0.3) 0%, transparent 70%);
  animation-delay: -7s;
}
.hero-orbs .orb-3 {
  bottom: 5%;
  left: 35%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(42, 137, 207, 0.4) 0%, transparent 70%);
  animation-delay: -14s;
}
@keyframes digerOrbFloat {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(40px, -30px); }
  66% { transform: translate(-30px, 40px); }
}

/* Isotipo decorativo gigante */
.hero-iso-deco {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: min(50vw, 700px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}
.hero-iso-deco span {
  height: 90px;
  border-radius: 0 999px 999px 0;
  display: block;
}
.hero-iso-deco span:nth-child(1) { width: 85%; background: var(--neutral-0); }
.hero-iso-deco span:nth-child(2) { width: 70%; background: var(--cyan-300); }
.hero-iso-deco span:nth-child(3) { width: 55%; background: var(--blue-400); }

/* Content wrapper — grid 2 columnas */
.hero-content-v2 {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 64px !important;
  max-width: 1380px !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 80px 32px !important;
  text-align: left !important;
}

.hero-main {
  max-width: 720px;
}

/* Badge premium con punto pulsante */
.hero-badge-v2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  background: rgba(122, 203, 221, 0.1) !important;
  border: 1px solid rgba(122, 203, 221, 0.3) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--cyan-200) !important;
  margin-bottom: 28px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  animation: none !important;
}
.hero-badge-v2 .hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-300);
  box-shadow: 0 0 12px var(--cyan-300);
  animation: digerPulse 2s ease-in-out infinite;
}
.hero-badge-v2 i {
  color: var(--cyan-300);
  font-size: 15px;
}

/* Título gigante con gradient */
.hero-title-v2 {
  font-family: var(--font-display) !important;
  font-size: clamp(2.75rem, 6vw, 5.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  color: var(--neutral-0) !important;
  margin: 0 0 24px 0 !important;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
}

.hero-title-v2 .hero-title-gradient {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--cyan-300) 0%, #5ab8cf 35%, var(--blue-400) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 40px rgba(122, 203, 221, 0.4));
  background-size: 200% auto !important;
  animation: digerGradientShift 6s linear infinite !important;
}

@keyframes digerGradientShift {
  to { background-position: 200% center; }
}

/* Descripción más editorial */
.hero-description-v2 {
  font-family: var(--font-body) !important;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 0 36px 0 !important;
  max-width: 620px !important;
}
.hero-description-v2 strong {
  color: var(--cyan-200) !important;
  font-weight: 700 !important;
}

/* Search bar premium */
.search-v2 .search-container-ai {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s var(--ease-out) !important;
  max-width: 100% !important;
  margin-bottom: 28px !important;
}
.search-v2 .search-container-ai:focus-within {
  border-color: var(--cyan-300) !important;
  box-shadow: 0 0 0 4px rgba(122, 203, 221, 0.15),
              0 24px 48px -12px rgba(0, 0, 0, 0.4) !important;
}
.search-v2 .search-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 4px 4px 18px !important;
}
.search-v2 .search-ai-icon {
  color: rgba(255, 255, 255, 0.5) !important;
  flex-shrink: 0 !important;
}
.search-v2 .search-input-ai {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 14px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: var(--neutral-0) !important;
}
.search-v2 .search-input-ai::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
.search-v2 .voice-button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--neutral-0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-out) !important;
}
.search-v2 .voice-button:hover {
  background: rgba(122, 203, 221, 0.15) !important;
  border-color: var(--cyan-300) !important;
  color: var(--cyan-300) !important;
  transform: scale(1.05) !important;
}
.search-v2 .search-submit {
  background: linear-gradient(135deg, var(--cyan-300) 0%, var(--blue-400) 100%) !important;
  color: var(--marine-900) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-out) !important;
  box-shadow: 0 8px 24px -8px rgba(122, 203, 221, 0.5) !important;
}
.search-v2 .search-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px -8px rgba(122, 203, 221, 0.7) !important;
}
.search-v2 .search-submit i {
  font-size: 16px !important;
}

/* Trust signals row */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.trust-item i {
  font-size: 16px;
}

/* Stats glass cards lateral */
.hero-stats-glass {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: center;
}
.stat-glass {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  transition: all 0.35s var(--ease-out) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.stat-glass::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}
.stat-glass::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(122, 203, 221, 0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.stat-glass:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(122, 203, 221, 0.4) !important;
  transform: translateY(-4px) !important;
}
.stat-glass:hover::after { opacity: 1; }
.stat-glass:focus-visible {
  outline: 3px solid var(--cyan-300);
  outline-offset: 2px;
}

.stat-glass-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(122, 203, 221, 0.2), rgba(26, 101, 163, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--cyan-300);
  flex-shrink: 0;
}
.stat-glass-icon--cyan {
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400));
  color: var(--marine-900);
}
.stat-glass-icon--marine {
  background: linear-gradient(135deg, var(--marine-800), var(--marine-900));
  color: var(--cyan-300);
}

.stat-glass-data .stat-number {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: var(--neutral-0) !important;
  margin-bottom: 4px !important;
}
.stat-glass-data .stat-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.stat-glass-arrow {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neutral-0) !important;
  font-size: 14px !important;
  transition: all 0.25s var(--ease-out) !important;
  z-index: 2;
}
.stat-glass:hover .stat-glass-arrow {
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400)) !important;
  border-color: transparent !important;
  color: var(--marine-900) !important;
  transform: translate(2px, -2px) !important;
}

.stat-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 211, 154, 0.15);
  border: 1px solid rgba(34, 211, 154, 0.3);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #22d39a;
  align-self: flex-start;
}
.stat-glass-pill i {
  font-size: 11px;
}

.stat-glass--total {
  grid-column: span 2;
  background: rgba(122, 203, 221, 0.1) !important;
  border-color: rgba(122, 203, 221, 0.3) !important;
}
.stat-glass--total .stat-number {
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Ocultar elementos viejos del hero original que ya no se usan */
.hero-spectacular .stats-interactive {
  display: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-content-v2 {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .hero-iso-deco { display: none; }
}
@media (max-width: 640px) {
  .hero-stats-glass {
    grid-template-columns: 1fr;
  }
  .stat-glass--total { grid-column: span 1; }
  .hero-trust { gap: 14px; }
}

/* AI Search Suggestions dropdown - rediseño */
.search-v2 .ai-search-suggestions {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: var(--neutral-0) !important;
}
.search-v2 .ai-suggestion-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-300);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-v2 .ai-suggestion-title i { font-size: 14px; }


/* =========================================================
   SECCIONES GENÉRICAS
   ========================================================= */
.diger-section {
  padding: 120px 32px;
  background: var(--color-bg);
}
.diger-section--alt {
  background: var(--color-bg-alt);
}
.diger-section--dark {
  background: var(--marine-900);
  color: var(--neutral-0);
}
.diger-container {
  max-width: 1320px;
  margin: 0 auto;
}

.diger-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
}

.diger-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}
.diger-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--cyan-300);
}

.diger-section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--marine-900);
  max-width: 720px;
}

.diger-section-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 520px;
  line-height: 1.6;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */
@keyframes digerFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes digerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes digerSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes digerShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.diger-animate-fade-up { animation: digerFadeUp 0.6s var(--ease-out) both; }
.diger-animate-fade-in { animation: digerFadeIn 0.6s var(--ease-out) both; }
.diger-animate-slide-right { animation: digerSlideRight 0.6s var(--ease-out) both; }
.diger-animate-delay-1 { animation-delay: 100ms; }
.diger-animate-delay-2 { animation-delay: 200ms; }
.diger-animate-delay-3 { animation-delay: 300ms; }

/* =========================================================
   OVERRIDES — Template Cuba (color-1.css & style.css)
   ========================================================= */
/* Sobreescribir TODO el dorado por azul DIGER */
.bg-primary { background-color: var(--blue-500) !important; }
.text-primary { color: var(--blue-500) !important; }
.btn-primary {
  background-color: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
  color: var(--neutral-0) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--blue-600) !important;
  border-color: var(--blue-600) !important;
}
.btn-outline-primary {
  color: var(--blue-500) !important;
  border-color: var(--blue-500) !important;
}
.btn-outline-primary:hover {
  background-color: var(--blue-500) !important;
  color: var(--neutral-0) !important;
}

.bg-info { background-color: var(--cyan-300) !important; color: var(--marine-900) !important; }
.text-info { color: var(--blue-500) !important; }
.btn-info {
  background-color: var(--cyan-300) !important;
  border-color: var(--cyan-300) !important;
  color: var(--marine-900) !important;
}

a.link, a.text-primary { color: var(--blue-500) !important; }
a.link:hover, a.text-primary:hover { color: var(--blue-600) !important; }

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 4px var(--blue-50) !important;
}

/* Badges */
.badge-primary, .badge.bg-primary {
  background-color: var(--blue-500) !important;
  color: var(--neutral-0) !important;
}
.badge-secondary, .badge.bg-secondary {
  background-color: var(--marine-700) !important;
}
.badge-info, .badge.bg-info {
  background-color: var(--cyan-300) !important;
  color: var(--marine-900) !important;
}

/* Tablas — color principal */
.table thead th {
  background-color: var(--marine-50);
  color: var(--marine-900);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

/* Cards Bootstrap override */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--marine-900);
}

/* Sidebar admin (Cuba) */
.sidebar-wrapper {
  background-color: var(--marine-900) !important;
}
.sidebar-wrapper .logo-wrapper {
  background-color: var(--marine-950) !important;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li > a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all var(--duration-fast) var(--ease-out);
}
.sidebar-wrapper .sidebar-main .sidebar-links > li > a:hover,
.sidebar-wrapper .sidebar-main .sidebar-links > li > a.active,
.sidebar-wrapper .sidebar-main .sidebar-links > li.active > a {
  color: var(--cyan-300) !important;
  background: rgba(122, 203, 221, 0.08);
}
.sidebar-wrapper .sidebar-main .sidebar-links > li > a > svg {
  stroke: currentColor !important;
}

/* Header / page-header admin */
.page-header {
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}
.page-header .header-wrapper .nav-right .profile-dropdown li a:hover {
  color: var(--blue-500) !important;
}

/* Page title */
.page-title h3 {
  color: var(--marine-900) !important;
  font-weight: 700;
}
.breadcrumb-item.active {
  color: var(--blue-500) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--neutral-400);
}

/* Login page */
.login-card,
.authentication-box {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* =========================================================
   DARK MODE OVERRIDES
   ========================================================= */
.dark-only,
body.dark-mode,
[data-theme="dark"] {
  background-color: var(--marine-deep) !important;
  color: var(--neutral-0) !important;
}

.dark-only .card,
body.dark-mode .card,
[data-theme="dark"] .card {
  background-color: var(--marine-900) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--neutral-0);
}

.dark-only .card-header,
body.dark-mode .card-header {
  background-color: var(--marine-950) !important;
  color: var(--neutral-0);
}

.dark-only .form-control,
body.dark-mode .form-control {
  background-color: var(--marine-900) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--neutral-0) !important;
}

.dark-only .page-body,
body.dark-mode .page-body {
  background-color: var(--marine-deep) !important;
}

/* Autocomplete dropdown — override del estilo viejo dorado */
#autocomplete-result-list-1 {
  background-color: var(--neutral-0) !important;
  border: 1.5px solid var(--blue-500) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: 6px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}
#autocomplete-result-list-1 li {
  padding: 12px 16px !important;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  color: var(--marine-900) !important;
  transition: all var(--duration-fast) var(--ease-out);
  border-bottom: 1px solid var(--neutral-100);
}
#autocomplete-result-list-1 li:last-child { border-bottom: 0; }
#autocomplete-result-list-1 li:hover {
  background-color: var(--blue-500) !important;
  color: var(--neutral-0) !important;
}
.dark-only #autocomplete-result-list-1 {
  background-color: var(--marine-900) !important;
  border: 1.5px solid var(--cyan-300) !important;
}
.dark-only #autocomplete-result-list-1 li {
  color: var(--neutral-0) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.dark-only #autocomplete-result-list-1 li:hover {
  background-color: var(--blue-500) !important;
  color: var(--neutral-0) !important;
}

/* =========================================================
   OVERRIDES — renew.css (landing actual)
   --------------------------------------------------------
   Renombra colores dorados/turquoise por la nueva paleta
   ========================================================= */

/* Variables que el CSS antiguo definía — las redefinimos */
:root {
  --primary-gold: var(--blue-500) !important;
  --gold-dark: var(--blue-600) !important;
  --gold-light: var(--cyan-300) !important;
  --turquoise: var(--blue-500) !important;
  --turquoise-light: var(--cyan-300) !important;
  --turquoise-dark: var(--marine-900) !important;
  --turquoise-bright: var(--cyan-300) !important;
  --navy: var(--marine-900) !important;
  --navy-light: var(--marine-700) !important;
  --black: var(--marine-900) !important;
}

/* nav-future override (landing) */
.nav-future {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-sm) !important;
}
.nav-link.active,
.nav-link:hover {
  color: var(--blue-500) !important;
}

/* btn-primary-glow override */
.btn-primary-glow {
  background: var(--blue-500) !important;
  color: var(--neutral-0) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  box-shadow: 0 4px 16px -4px rgba(26, 101, 163, 0.4) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}
.btn-primary-glow:hover {
  background: var(--blue-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(26, 101, 163, 0.5) !important;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(2, 57, 94, 0.15) !important;
  color: var(--marine-900) !important;
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md) !important;
  padding: 12px 18px !important;
  font-weight: 500 !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}
.btn-glass:hover {
  background: var(--marine-900) !important;
  color: var(--neutral-0) !important;
  border-color: var(--marine-900) !important;
}

/* Hero override (landing) */
.hero-spectacular {
  background: radial-gradient(ellipse at top right, #0a4a78 0%, var(--marine-900) 50%, var(--marine-950) 100%) !important;
}

/* Skip-to-content link accesible */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--marine-900);
  color: var(--neutral-0);
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--duration-fast);
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--cyan-300);
}

/* Loader DNA */
.loader-dna {
  position: fixed;
  inset: 0;
  background: var(--marine-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  transition: opacity var(--duration-slower) var(--ease-out);
}
.loader-dna.loaded {
  opacity: 0;
  pointer-events: none;
}
.dna-strand {
  width: 64px;
  height: 64px;
  border: 3px solid transparent;
  border-top-color: var(--cyan-300);
  border-right-color: var(--blue-500);
  border-radius: 50%;
  animation: digerSpin 1.2s linear infinite;
}
@keyframes digerSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   UTILIDADES
   ========================================================= */
.diger-container-sm { max-width: 720px; margin: 0 auto; }
.diger-container-md { max-width: 1024px; margin: 0 auto; }
.diger-container-lg { max-width: 1320px; margin: 0 auto; }
.diger-container-xl { max-width: 1440px; margin: 0 auto; }

.diger-flex { display: flex; }
.diger-grid { display: grid; }
.diger-center { display: flex; align-items: center; justify-content: center; }
.diger-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.diger-rounded { border-radius: var(--radius-md); }
.diger-rounded-lg { border-radius: var(--radius-lg); }
.diger-rounded-xl { border-radius: var(--radius-xl); }
.diger-rounded-full { border-radius: var(--radius-pill); }

.diger-shadow-sm { box-shadow: var(--shadow-sm); }
.diger-shadow-md { box-shadow: var(--shadow-md); }
.diger-shadow-lg { box-shadow: var(--shadow-lg); }
.diger-shadow-xl { box-shadow: var(--shadow-xl); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  /* Hero layout NO se toca — renew.css ya tiene su propio responsive. Solo overrides del nuevo sistema diger-*. */
  .diger-hero-content { grid-template-columns: 1fr !important; gap: var(--space-12) !important; }
  .diger-hero-title { font-size: var(--text-5xl) !important; }
  .diger-section { padding: 80px 24px; }
  .diger-section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .diger-hero { padding: 120px 20px 60px; min-height: auto; }
  .diger-hero-title { font-size: var(--text-4xl) !important; }
  .diger-section { padding: 64px 20px; }
  .diger-btn { padding: 12px 20px; font-size: 14px; }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .nav-future, .skip-to-content, .loader-dna, .diger-btn { display: none !important; }
  body { background: var(--neutral-0) !important; color: var(--marine-900) !important; }
}

/* =========================================================
   SMART FILTERS SECTION — Rediseño moderno
   ========================================================= */
.smart-filters-section {
  background: var(--neutral-50) !important;
  padding: 80px 32px !important;
  position: relative;
}
.smart-filters-section .filters-container {
  max-width: 1380px;
  margin: 0 auto;
}
.smart-filters-section .filter-header {
  text-align: center;
  margin-bottom: 40px;
}
.smart-filters-section .filter-header h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.875rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--marine-900) !important;
  letter-spacing: -0.025em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}
.smart-filters-section .filter-header h3 i {
  color: var(--blue-500);
  font-size: 0.85em;
}
.smart-filters-section .filter-header p {
  font-size: 17px !important;
  color: var(--neutral-600) !important;
  max-width: 560px;
  margin: 0 auto !important;
}

/* Filter pills modernos con glassmorphism */
.filter-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}
.filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  background: var(--neutral-0) !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--neutral-700) !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.filter-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--marine-900));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  border-radius: inherit;
  z-index: -1;
}
.filter-pill:hover {
  border-color: var(--blue-500) !important;
  color: var(--blue-500) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px -4px rgba(26, 101, 163, 0.25) !important;
}
.filter-pill.active {
  background: linear-gradient(135deg, var(--blue-500), var(--marine-900)) !important;
  border-color: transparent !important;
  color: var(--neutral-0) !important;
  box-shadow: 0 8px 24px -8px rgba(26, 101, 163, 0.5) !important;
}
.filter-pill .pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-pill .pill-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

/* Favoritos & view toggle row */
.smart-filters-section > .filters-container > div[style*="display: flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--neutral-200) !important;
}

.favorites-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.btn-filter-favorites {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  background: var(--neutral-0) !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--neutral-700) !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-out) !important;
}
.btn-filter-favorites:hover {
  border-color: #e91e63 !important;
  color: #e91e63 !important;
}
.btn-filter-favorites.active,
.btn-filter-favorites[data-active="true"] {
  background: #fee2e2 !important;
  border-color: #e91e63 !important;
  color: #e91e63 !important;
}
.favorites-counter {
  background: #e91e63;
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.btn-clear-favorites {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-clear-favorites:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.view-toggle {
  display: inline-flex !important;
  background: var(--neutral-0) !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 4px !important;
}
.view-toggle .view-btn {
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--neutral-500) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.view-toggle .view-btn:hover {
  background: var(--neutral-100) !important;
  color: var(--marine-900) !important;
}
.view-toggle .view-btn.active {
  background: linear-gradient(135deg, var(--blue-500), var(--marine-900)) !important;
  color: var(--neutral-0) !important;
  box-shadow: 0 4px 12px -4px rgba(26, 101, 163, 0.4) !important;
}

/* =========================================================
   SERVICES BENTO GRID — Cards modernas con glass + hover
   ========================================================= */
.services-section {
  background: var(--neutral-0) !important;
  padding: 100px 32px !important;
}
.services-section .section-header {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto 64px !important;
}
.services-section .section-label {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: var(--cyan-100) !important;
  color: var(--cyan-700) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.services-section .section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 800 !important;
  color: var(--marine-900) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin-bottom: 16px !important;
}
.services-section .section-description {
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 1.4vw, 1.1875rem) !important;
  color: var(--neutral-600) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Bento grid layout */
.bento-grid {
  max-width: 1380px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: minmax(280px, auto) !important;
  gap: 20px !important;
}
.bento-card-featured { grid-column: span 1; grid-row: span 2; }
.bento-card-wide { grid-column: span 2; }
.bento-card-normal { grid-column: span 1; }

/* Card base — todas las bento cards */
.bento-card {
  position: relative !important;
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 24px !important;
  padding: 28px !important;
  transition: all 0.4s var(--ease-out) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-500));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.bento-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px -12px rgba(2, 57, 94, 0.18) !important;
  border-color: transparent !important;
}
.bento-card:hover::before { opacity: 1; }

/* Featured card destaca */
.bento-card-featured {
  background: linear-gradient(135deg, var(--marine-900) 0%, var(--blue-700) 100%) !important;
  color: var(--neutral-0) !important;
  border: 0 !important;
  padding: 32px !important;
  overflow: hidden;
}
.bento-card-featured::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 200%;
  background: radial-gradient(circle, rgba(122, 203, 221, 0.25) 0%, transparent 60%);
  pointer-events: none;
}
.bento-card-featured .featured-glow {
  display: none;
}
.bento-card-featured .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(122, 203, 221, 0.2);
  border: 1px solid rgba(122, 203, 221, 0.4);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan-200);
  align-self: flex-start;
  margin-bottom: 24px;
}
.bento-card-featured .status-badge svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--cyan-300);
}
.bento-card-featured .featured-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 24px -8px rgba(122, 203, 221, 0.5);
}
.bento-card-featured .featured-icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke: var(--marine-900) !important;
  fill: none !important;
}
.bento-card-featured .featured-title {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: var(--neutral-0) !important;
  margin-bottom: 12px !important;
}
.bento-card-featured .featured-description {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 24px !important;
}
.bento-card-featured .featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.bento-card-featured .featured-stats .stat-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.bento-card-featured .featured-stats .stat-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.bento-card-featured .featured-stats .stat-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--cyan-300) !important;
}
.bento-card-featured .featured-stats .stat-value {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--neutral-0) !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
.bento-card-featured .featured-stats .stat-label {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.02em !important;
}
.bento-card-featured .featured-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: var(--neutral-0) !important;
  color: var(--marine-900) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.25s var(--ease-out) !important;
  margin-top: auto !important;
  align-self: flex-start !important;
}
.bento-card-featured .featured-action:hover {
  background: var(--cyan-300) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(122, 203, 221, 0.5);
}
.bento-card-featured .featured-action svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Cards normales (trámites destacados) */
.bento-card:not(.bento-card-featured) {
  background: var(--neutral-0) !important;
}
.bento-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bento-card .bento-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan-100), var(--blue-100));
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bento-card .bento-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
  fill: none !important;
}
.bento-card .bento-title,
.bento-card h3 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--marine-900) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em !important;
}
.bento-card .bento-description,
.bento-card .card-description {
  font-size: 13.5px !important;
  color: var(--neutral-600) !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
.bento-card .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}
.bento-card .status-badge.status-online,
.bento-card .status-badge.online { background: #d4f7e2 !important; color: #168d4a !important; }
.bento-card .status-badge.status-popular,
.bento-card .status-badge.popular { background: #fff3e6 !important; color: #d97706 !important; }
.bento-card .status-badge.status-new,
.bento-card .status-badge.new { background: #ede9fe !important; color: #7c3aed !important; }
.bento-card .status-badge.status-urgent,
.bento-card .status-badge.urgent { background: #fee2e2 !important; color: #dc2626 !important; }

.bento-card .indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 14px;
}

/* Mini progress en cards */
.mini-progress {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-200);
}
.mini-progress .progress-bar {
  height: 4px;
  background: var(--neutral-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.mini-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-300), var(--blue-500));
  border-radius: 999px;
  transition: width 0.6s var(--ease-out);
}
.mini-progress .progress-text {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-500);
}

/* Responsive bento */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bento-card-featured { grid-column: span 2; grid-row: auto; }
  .bento-card-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-card-featured,
  .bento-card-wide,
  .bento-card-normal { grid-column: span 1; }
}

/* =========================================================
   RANKING SECTION — leaderboard moderno
   ========================================================= */
.ranking-section {
  background: var(--neutral-50) !important;
  padding: 100px 32px !important;
}
.ranking-section .section-header {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto 56px !important;
}
.ranking-section .section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--success-bg) !important;
  color: var(--success) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.ranking-section .section-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: digerPulse 2s ease-in-out infinite;
}
.ranking-section .section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--marine-900) !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 14px !important;
}
.ranking-section .section-description {
  font-size: 17px !important;
  color: var(--neutral-600) !important;
  line-height: 1.55 !important;
}
.ranking-container {
  max-width: 1380px;
  margin: 0 auto;
}
.ranking-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

/* Ranking item card */
.ranking-grid > * {
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.3s var(--ease-out) !important;
  cursor: pointer !important;
}
.ranking-grid > *:hover {
  transform: translateY(-3px) !important;
  border-color: var(--blue-500) !important;
  box-shadow: 0 8px 24px -8px rgba(26, 101, 163, 0.2) !important;
}

/* Summary stats abajo */
.ranking-summary-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  padding: 24px !important;
  background: var(--neutral-0) !important;
  border-radius: 20px !important;
  border: 1px solid var(--neutral-200) !important;
}
.ranking-summary-stats .stats-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 8px !important;
}
.ranking-summary-stats .stats-card svg {
  width: 36px !important;
  height: 36px !important;
  padding: 8px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-600);
  fill: currentColor !important;
}
.ranking-summary-stats .stats-value {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--marine-900) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}
.ranking-summary-stats .stats-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--neutral-600) !important;
  margin-top: 4px !important;
}

/* =========================================================
   INSTITUTIONS CAROUSEL — Cards modernas
   ========================================================= */
.institutions-section {
  background: var(--neutral-0) !important;
  padding: 100px 32px !important;
  position: relative;
  overflow: hidden;
}
.institutions-section .section-header {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto 56px !important;
}
.institutions-section .section-label {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: var(--marine-100) !important;
  color: var(--marine-900) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
}
.institutions-section .section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--marine-900) !important;
  letter-spacing: -0.025em !important;
}
.institutions-section .section-description {
  font-size: 17px !important;
  color: var(--neutral-600) !important;
}

.carousel-container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding: 0 56px;
}
.carousel-control {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 48px !important;
  height: 48px !important;
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 50% !important;
  color: var(--marine-900) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(2, 57, 94, 0.1) !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.carousel-control.prev { left: 0; }
.carousel-control.next { right: 0; }
.carousel-control:hover {
  background: linear-gradient(135deg, var(--blue-500), var(--marine-900)) !important;
  color: var(--neutral-0) !important;
  border-color: transparent !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.carousel-track {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }

.institution-modern {
  flex: 0 0 280px !important;
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  transition: all 0.35s var(--ease-out) !important;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
.institution-modern:hover {
  transform: translateY(-6px) !important;
  border-color: var(--blue-500) !important;
  box-shadow: 0 16px 32px -8px rgba(26, 101, 163, 0.2) !important;
}
.institution-modern .institution-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.institution-modern .institution-logo-container {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}
.institution-modern .institution-logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.institution-modern .institution-info {
  flex: 1;
  min-width: 0;
}
.institution-modern .institution-info h3 {
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--marine-900) !important;
  line-height: 1.3 !important;
  margin: 0 0 4px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.institution-modern .institution-info p {
  font-size: 12px !important;
  color: var(--neutral-500) !important;
  margin: 0 !important;
}
.institution-modern .institution-footer {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-200);
}
.institution-modern .institution-metric {
  flex: 1;
  text-align: center;
}
.institution-modern .institution-metric .metric-value {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--blue-500) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.institution-modern .institution-metric .metric-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--neutral-500) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================================
   AI CHAT - Rediseño premium
   ========================================================= */
.ai-fab {
  background: linear-gradient(135deg, var(--cyan-300) 0%, var(--blue-500) 100%) !important;
  box-shadow: 0 12px 32px -8px rgba(26, 101, 163, 0.5),
              0 0 0 0 rgba(122, 203, 221, 0.4) !important;
  border: 0 !important;
}
.ai-fab:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 16px 40px -8px rgba(26, 101, 163, 0.6),
              0 0 32px rgba(122, 203, 221, 0.4) !important;
}
.ai-fab-icon-wrapper svg {
  stroke: var(--marine-900) !important;
  stroke-width: 2.5 !important;
}

.ai-chat-window {
  background: var(--neutral-0) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px -16px rgba(2, 57, 94, 0.35) !important;
  border: 1px solid var(--neutral-200) !important;
  overflow: hidden !important;
}
.ai-chat-header {
  background: linear-gradient(135deg, var(--marine-900), var(--blue-700)) !important;
  color: var(--neutral-0) !important;
  padding: 18px 20px !important;
}
.ai-chat-header .ai-name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.ai-chat-header .ai-subtitle {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.ai-message.bot .ai-avatar {
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400)) !important;
  color: var(--marine-900) !important;
}
.ai-message.bot .ai-bubble {
  background: var(--neutral-100) !important;
  color: var(--marine-900) !important;
  border-radius: 14px 14px 14px 4px !important;
}
.ai-message.user .ai-bubble {
  background: linear-gradient(135deg, var(--blue-500), var(--marine-900)) !important;
  color: var(--neutral-0) !important;
  border-radius: 14px 14px 4px 14px !important;
}
.quick-action-chip {
  background: var(--neutral-0) !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--marine-900) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.quick-action-chip:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-500) !important;
  color: var(--blue-600) !important;
}
.ai-input {
  background: var(--neutral-50) !important;
  border: 1.5px solid var(--neutral-200) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--marine-900) !important;
  transition: all 0.2s !important;
}
.ai-input:focus {
  outline: 0 !important;
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px var(--blue-50) !important;
}
.ai-send-btn {
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-500)) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--marine-900) !important;
}

/* Suggestions panel */
.ai-suggestions .suggestion-item {
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  transition: all 0.25s var(--ease-out) !important;
}
.ai-suggestions .suggestion-item:hover {
  border-color: var(--blue-500) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 8px 24px -8px rgba(26, 101, 163, 0.2) !important;
}
.ai-suggestions .suggestion-icon {
  background: linear-gradient(135deg, var(--cyan-100), var(--blue-100)) !important;
  color: var(--blue-600) !important;
  border-radius: 10px !important;
}
.ai-suggestions .suggestion-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--marine-900) !important;
  font-size: 13px !important;
}
.ai-suggestions .suggestion-desc {
  font-size: 11.5px !important;
  color: var(--neutral-500) !important;
}

/* =========================================================
   FOOTER MODERNO
   ========================================================= */
.footer-modern {
  background: var(--marine-950) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 80px 32px 40px !important;
  position: relative !important;
  border-top: 4px solid var(--cyan-300);
}
.footer-modern .footer-wave {
  display: none;
}
.footer-modern .footer-grid {
  max-width: 1380px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.5fr repeat(3, 1fr) !important;
  gap: 48px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 32px !important;
}
.footer-modern .footer-brand h3 {
  font-family: var(--font-display) !important;
  color: var(--neutral-0) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}
.footer-modern .footer-brand p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  max-width: 360px !important;
}
.footer-modern h4 {
  color: var(--neutral-0) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.footer-modern a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
}
.footer-modern a:hover {
  color: var(--cyan-300) !important;
}

/* =========================================================
   NAV FUTURE (existente) — ajustes finales
   ========================================================= */
.nav-future {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 16px -4px rgba(2, 57, 94, 0.06) !important;
}
.nav-future .nav-menu .nav-link {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  color: var(--neutral-700) !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  transition: all 0.25s var(--ease-out) !important;
}
.nav-future .nav-menu .nav-link.active,
.nav-future .nav-menu .nav-link:hover {
  background: var(--marine-900) !important;
  color: var(--neutral-0) !important;
}

/* =========================================================
   ICONOS PREMIUM PHOSPHOR — ajustes finos para que se vean
   bien dentro de los contenedores existentes del landing
   ========================================================= */

/* Search bar — icono de lupa principal */
.search-v2 .search-ai-icon {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
}

/* Glass stats cards del hero — iconos en el icon-box */
.hero-stats-glass .stat-glass-icon i {
  font-size: 24px;
  line-height: 1;
}

/* Filter pills — iconos */
.filter-pill .pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  width: 18px !important;
  height: 18px !important;
}
.filter-pill .pill-icon i {
  font-size: 16px;
  line-height: 1;
}

/* Favoritos heart */
.btn-filter-favorites i {
  font-size: 16px !important;
  color: #e91e63;
  line-height: 1;
}
.btn-clear-favorites i {
  font-size: 14px !important;
  line-height: 1;
}

/* View toggle */
.view-toggle .view-btn i {
  font-size: 16px !important;
  line-height: 1;
}

/* Featured card del bento (Trámites Personalizados) */
.bento-card-featured .featured-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cyan-300), var(--blue-400));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 24px -8px rgba(122, 203, 221, 0.5);
}
.bento-card-featured .featured-icon i {
  font-size: 36px !important;
  color: var(--marine-900) !important;
  line-height: 1;
}

/* Stats cards dentro del featured */
.bento-card-featured .featured-stats .stat-icon i {
  font-size: 18px !important;
  color: var(--cyan-300) !important;
  line-height: 1;
}

/* Featured action arrow */
.bento-card-featured .featured-action i {
  font-size: 16px !important;
  line-height: 1;
  transition: transform 0.2s var(--ease-out);
}
.bento-card-featured .featured-action:hover i {
  transform: translateX(3px);
}

/* Bento cards (trámites destacados) — icono principal grande */
.bento-card:not(.bento-card-featured) .bento-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan-100), var(--blue-100)) !important;
  color: var(--blue-600) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.bento-card:not(.bento-card-featured) .bento-icon i {
  font-size: 28px !important;
  line-height: 1;
}

/* Card actions (favorito y comparar) */
.card-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.btn-favorite,
.btn-compare {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: var(--neutral-500) !important;
}
.btn-favorite:hover {
  background: #fee2e2 !important;
  border-color: #e91e63 !important;
  color: #e91e63 !important;
  transform: scale(1.05);
}
.btn-favorite.active,
.btn-favorite[data-active="true"] {
  background: #e91e63 !important;
  border-color: #e91e63 !important;
  color: white !important;
}
.btn-compare:hover {
  background: var(--blue-50) !important;
  border-color: var(--blue-500) !important;
  color: var(--blue-500) !important;
  transform: scale(1.05);
}
.btn-favorite i,
.btn-compare i {
  font-size: 16px;
  line-height: 1;
}

/* Indicadores de tiempo/complejidad */
.tramite-indicators {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
.tramite-indicators .indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--neutral-600);
  font-weight: 500;
}
.tramite-indicators .indicator-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--blue-600);
  align-items: center;
  justify-content: center;
}
.tramite-indicators .indicator-icon i {
  font-size: 12px;
  line-height: 1;
}

/* Status badge en featured */
.bento-card-featured .status-badge i {
  font-size: 13px;
  color: var(--cyan-300);
  line-height: 1;
}

/* Ranking summary stats — iconos */
.ranking-summary-stats .stats-card i {
  width: 44px;
  height: 44px;
  font-size: 22px !important;
  padding: 0 !important;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-600) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Carousel controls */
.carousel-control i {
  font-size: 20px;
  line-height: 1;
}

/* AI Chat FAB icon */
.ai-fab .ai-fab-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
}
.ai-fab .ai-fab-icon-wrapper i {
  font-size: 26px !important;
  color: var(--marine-900) !important;
  line-height: 1;
}

/* AI Send button */
.ai-send-btn {
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ai-send-btn i {
  font-size: 16px !important;
  color: var(--marine-900) !important;
  line-height: 1;
}

/* AI New chat button */
.ai-new-chat-btn i {
  font-size: 20px !important;
  line-height: 1;
}
.ai-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
.ai-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.ai-close-btn i {
  font-size: 16px;
  line-height: 1;
}

/* AI Suggestions — iconos en las cards flotantes */
.ai-suggestions .suggestion-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
}
.ai-suggestions .suggestion-icon i {
  font-size: 22px !important;
  line-height: 1;
}

/* Comparison panel y modal */
.comparison-panel button i {
  font-size: 16px;
  line-height: 1;
}
.comparison-modal-title i {
  color: var(--blue-500);
}
.comparison-label i {
  font-size: 18px;
  color: var(--blue-600);
  margin-right: 8px;
}
.comparison-winner i {
  font-size: 14px;
}

/* Empty favorites state */
.empty-favorites-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
  color: var(--neutral-500);
}
.empty-favorites-message i {
  margin-bottom: 16px;
}
.empty-favorites-message h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--marine-900);
  margin-bottom: 8px;
}
.empty-favorites-message p {
  font-size: 14px;
  color: var(--neutral-600);
  max-width: 360px;
}

/* AI Search Suggestions — ph-fill ph-lightbulb */
.search-v2 .ai-suggestion-title i {
  font-size: 14px;
  color: var(--cyan-300);
}

/* AI result items — iconos del autocomplete */
.ai-result-item .result-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px;
  background: var(--blue-50);
  flex-shrink: 0;
}


/* =========================================================
   FIX: card-header transparente dentro de bento-card-featured
   --------------------------------------------------------
   La regla de .card-header del CSS para cards admin
   estaba pintando un fondo blanco encima del bento featured.
   ========================================================= */
.bento-card-featured .card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  color: var(--neutral-0) !important;
  font-weight: 700 !important;
  display: flex !important;
}
.bento-card-featured .featured-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* =========================================================
   FOOTER MODERN — Rediseño limpio del brand section
   ========================================================= */
.footer-modern {
  padding: 80px 32px 0 32px !important;
}
.footer-modern .footer-grid {
  align-items: start !important;
  padding-bottom: 56px !important;
}
.footer-modern .footer-brand {
  max-width: 380px;
}
.footer-modern .footer-brand h3 {
  font-family: var(--font-display) !important;
  color: var(--neutral-0) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-modern .footer-brand p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

/* Logos gobierno + DIGER en footer — limpios, alineados */
.footer-modern .footer-logos {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-modern .footer-logos .footer-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.25s var(--ease-out);
  filter: brightness(1) !important;
}
.footer-modern .footer-logos .footer-logo:hover {
  opacity: 1;
}

/* Columnas del footer — links con flecha → premium */
.footer-modern .footer-column h4 {
  color: var(--neutral-0) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-modern .footer-column .footer-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s var(--ease-out) !important;
}
.footer-modern .footer-column .footer-link::before {
  content: '→';
  color: var(--cyan-300);
  font-weight: 700;
  transition: transform 0.2s var(--ease-out);
}
.footer-modern .footer-column .footer-link:hover {
  color: var(--cyan-300) !important;
  padding-left: 4px !important;
}
.footer-modern .footer-column .footer-link:hover::before {
  transform: translateX(3px);
}

/* Reemplaza el → existente del HTML si lo tiene */
.footer-modern .footer-column .footer-link:has-text('→') {
  text-indent: 0;
}

/* Footer bottom */
.footer-modern .footer-bottom {
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.footer-modern .footer-bottom p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}