/* Configuración Base - SIN SCROLL EN BODY */
 body {
     font-family: 'Inter', sans-serif;
     background-color: #020617;
     /* Fondo oscuro base */
     overflow-y: auto;
     /* IMPORTANTE: Habilitar scroll */
     min-height: 100vh;
     width: 100vw;
     margin: 0;
     color: #94a3b8;
     /* Slate 400 for professional subtle text */
     line-height: 1.6;
     /* Improved readability */
 }

 /* Colores Personalizados */
 :root {
     --color-cobalt: #0D47A1;
     --color-electric: #2563EB;
 }

 /* 1. Navbar Invisible (Sin fondo sólido) */
 .transparent-nav {
     background: transparent;
     border-bottom: none;
     transition: transform 0.3s ease-in-out;
     will-change: transform;
 }

 .nav-hidden {
     transform: translateY(-100%);
 }

 /* --- MENÚ CÁPSULA (Estilo unificado) --- */
 .nav-capsule {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
     padding: 4px;
     display: flex;
     align-items: center;
     gap: 4px;
     height: 48px;
     /* Altura fija para igualar tamaños */
 }

 .nav-segment-btn {
     color: #94a3b8;
     padding: 0 20px;
     /* Padding horizontal ajustado */
     height: 100%;
     /* Ocupa todo el alto de la cápsula */
     border-radius: 9999px;
     font-size: 0.875rem;
     font-weight: 500;
     transition: all 0.3s ease;
     background: transparent;
     border: 1px solid transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
 }

 .nav-segment-btn:hover {
     color: white;
     background: rgba(255, 255, 255, 0.05);
 }

 .nav-segment-btn.active {
     background: rgba(255, 255, 255, 0.15);
     color: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 /* Botón Info Estilo Azul */
 .nav-segment-btn-blue {
     color: #60A5FA;
     border: 1px solid rgba(37, 99, 235, 0.3);
 }

 .nav-segment-btn-blue:hover {
     background: rgba(37, 99, 235, 0.15);
     color: #93C5FD;
     border-color: rgba(37, 99, 235, 0.6);
 }

 .nav-segment-btn-blue.active {
     background: #2563EB;
     color: white;
     border-color: #2563EB;
     box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
 }

 /* Texto Outline */
 .text-outline-clean {
     color: transparent;
     -webkit-text-stroke: 2px #2563EB;
     paint-order: stroke fill;
 }

 /* 2. Hero Section 3D Container */
 #bg-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     pointer-events: none;
     /* Permite clicks a través del canvas */
 }

 /* Overlay Gradiente Global */
 .global-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0.6) 50%, #020617 100%);
     z-index: 1;
     pointer-events: none;
 }

 /* --- EFECTO NIEVE (CSS) --- */
 /* Removed .snowflake CSS as snow is now drawn on canvas */

 /* --- SECCIONES RECONFIGURADAS --- */
 section {
     position: relative;
     /* CAMBIO IMPORTANTE: Relative para flujo natural */
     width: 100%;
     min-height: 100vh;
     /* Ocupa al menos toda la pantalla */
     padding-top: 80px;
     /* Compensa el navbar fixed */
     display: none;
     /* Por defecto ocultas */
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
     z-index: 10;
 }

 /* AJUSTE: Sección HOME usa el scroll del body */
 #home {
     overflow: visible;
     height: auto;
 }

 section::-webkit-scrollbar {
     width: 6px;
 }

 section::-webkit-scrollbar-track {
     background: transparent;
 }

 section::-webkit-scrollbar-thumb {
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 20px;
 }

 section.active-section {
     display: block;
     opacity: 1;
     animation: none;
 }

 #home.active-section {
     /* Removed redundant animation that conflicts with children */
     transition: opacity 0.5s ease-out;
 }

 @keyframes fadeInSection {
     from {
         opacity: 0;
         transform: translate3d(0, 20px, 0);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 /* 3. Efecto 3D Tilt */
 .card-3d {
     transform-style: preserve-3d;
     transform: perspective(1000px);
     transition: transform 0.1s ease;
 }

 .card-content {
     transform: translateZ(20px);
 }

 .card-icon-bg {
     transform: translateZ(40px);
     box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
 }

 /* Estilos Formulario */
 .form-input {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     transition: all 0.3s;
 }

 .form-input:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: #2563EB;
     outline: none;
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
 }

 /* Animación Fade In (Optimized) */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translate3d(0, 15px, 0);
         /* Reduced from 20px */
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 .animate-fade-in-up {
     animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
     /* Soft smooth ease */
     will-change: opacity, transform;
 }

 /* --- NUEVO SYSTEMA DE SCROLL REVEAL (Performance Optimized) --- */
 .scroll-reveal {
     opacity: 0;
     transform: translate3d(0, 30px, 0);
     /* Aumentamos un poco la distancia para que se note más la subida suave */
     transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
     /* Más lento y curva más suave */
     will-change: opacity, transform;
 }

 .scroll-reveal.visible {
     opacity: 1;
     transform: translate3d(0, 0, 0);
 }

 .scroll-reveal.delay-100 {
     transition-delay: 0.1s;
 }

 .scroll-reveal.delay-200 {
     transition-delay: 0.2s;
 }

 .scroll-reveal.delay-300 {
     transition-delay: 0.3s;
 }

 .scroll-reveal.delay-400 {
     transition-delay: 0.4s;
 }

 .scroll-reveal.delay-500 {
     transition-delay: 0.5s;
 }


 .fade-title {
     opacity: 1;
 }

 /* Glow específico para el Logo */
 /* CAMBIO: Eliminado el efecto glow azul del logo */
 .logo-text-transition {
     transition: all 0.5s ease-out;
     text-shadow: none;
     /* Asegura que no haya sombra de texto por defecto */
 }

 /* CAMBIO: Al hacer hover, el texto sigue siendo blanco y sin brillo */
 .group:hover .logo-text-transition {
     color: white;
     text-shadow: none;
 }

 /* Efecto Profundidad AJ */
 .text-depth-effect {
     color: transparent;
     background: linear-gradient(180deg, #cbd5e1 20%, #475569 100%);
     -webkit-background-clip: text;
     background-clip: text;
     filter:
         drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.15)) drop_shadow(0px 0px 25px rgba(30, 58, 138, 0.25)) drop_shadow(0px 5px 15px rgba(0, 0, 0, 0.8));
     display: inline-block;
     padding: 0.1em;
     margin: -0.1em;
     pointer-events: none;
 }

 /* Animaciones Entrada Inicio */
 @keyframes bounceInLetter {
     0% {
         opacity: 0;
         transform: scale(0.3) translateY(-100px);
     }

     50% {
         opacity: 1;
         transform: scale(1.1) translateY(15px);
     }

     70% {
         transform: scale(0.9) translateY(-5px);
     }

     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 @keyframes fadeInBlur {
     0% {
         opacity: 0;
         filter: blur(12px);
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         filter: blur(0);
         transform: translateY(0);
     }
 }

 .anim-bounce-char {
     opacity: 0;
     animation: bounceInLetter 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
 }

 .anim-fade-word {
     opacity: 0;
     animation: fadeInBlur 1.2s ease-out forwards;
 }

 /* Estilos Modal */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(2, 6, 23, 0.85);
     backdrop-filter: blur(8px);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .modal-overlay.active {
     opacity: 1;
     pointer-events: auto;
 }

 .modal-content {
     background: rgba(30, 41, 59, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 2rem;
     width: 90%;
     max-width: 450px;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     transform: scale(0.95);
     transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }

 /* UX: Native App Feel - Prevent Text Selection */
 body {
     -webkit-user-select: none;
     /* Safari */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* IE10+/Edge */
     user-select: none;
     /* Standard */
 }

 /* Allow selection in inputs, textareas, and code blocks */
 input,
 textarea,
 [contenteditable="true"],
 pre,
 code,
 .selectable-text {
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     cursor: text;
 }

 button {
     cursor: pointer;
 }

 .modal-content-lg {
     max-width: 1000px;
     padding: 0;
     background: rgba(15, 23, 42, 0.95);
     overflow: hidden;
 }

 .modal-overlay.active .modal-content,
 .modal-overlay.active .modal-content-lg {
     transform: scale(1);
 }

 /* Modal Scrollable Content (Para Términos) */
 .modal-scrollable-body {
     max-height: 50vh;
     overflow-y: auto;
     padding-right: 10px;
 }

 .modal-scrollable-body::-webkit-scrollbar {
     width: 6px;
 }

 .modal-scrollable-body::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 3px;
 }

 .modal-scrollable-body::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
 }

 .modal-scrollable-body::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 /* --- ESTILOS CHECKBOX CARD (DEMO) --- */
 .checkbox-card {
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .checkbox-card:hover {
     border-color: rgba(59, 130, 246, 0.5);
     background: rgba(255, 255, 255, 0.08);
 }

 .checkbox-card.selected {
     background: rgba(37, 99, 235, 0.15);
     border-color: #2563EB;
     box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
 }

 .checkbox-card.selected .check-icon {
     opacity: 1;
     transform: scale(1);
 }

 /* --- TERMINAL DE CARGA (AI LOADING) --- */
 .terminal-window {
     font-family: 'JetBrains Mono', monospace;
     background: #0f172a;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
     overflow: hidden;
 }

 .terminal-header {
     background: #1e293b;
     padding: 8px 16px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .terminal-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .terminal-body {
     padding: 20px;
     height: 300px;
     overflow-y: auto;
     color: #10b981;
     font-size: 0.85rem;
     line-height: 1.6;
 }

 .typing-cursor::after {
     content: '█';
     animation: blink 1s step-start infinite;
     margin-left: 4px;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 /* --- ESTILOS MODAL AI DEMO --- */
 #demo-modal .modal-content {
     max-width: 900px;
     max-height: 90vh;
     /* Limitar altura al 90% del viewport */
     overflow-y: auto;
     /* Habilitar scroll vertical si el contenido excede */
     display: flex;
     flex-direction: column;
 }

 /* --- ESTILOS MODAL DETALLE (INTERACTIVO) --- */
 #detail-modal .modal-content {
     max-width: 500px;
     text-align: center;
     background: rgba(15, 23, 42, 0.98);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .detail-visual-container {
     height: 220px;
     width: 100%;
     background: rgba(2, 6, 23, 0.5);
     border-radius: 16px;
     margin-bottom: 24px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
 }

 /* AI Animation: Pulsing Nodes */
 .visual-ai .node {
     width: 12px;
     height: 12px;
     background: #60A5FA;
     border-radius: 50%;
     position: absolute;
     box-shadow: 0 0 15px #60A5FA;
     animation: pulse-node 2s infinite ease-in-out;
 }

 .visual-ai .connection {
     position: absolute;
     height: 1px;
     background: rgba(96, 165, 250, 0.3);
     transform-origin: 0 50%;
 }

 @keyframes pulse-node {
     0% {
         transform: scale(1);
         opacity: 0.8;
         box-shadow: 0 0 10px #60A5FA;
     }

     50% {
         transform: scale(1.5);
         opacity: 1;
         box-shadow: 0 0 25px #60A5FA;
     }

     100% {
         transform: scale(1);
         opacity: 0.8;
         box-shadow: 0 0 10px #60A5FA;
     }
 }

 /* Security Animation: Scan Line */
 .visual-security {
     background:
         linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
     background-size: 20px 20px;
 }

 .scan-line {
     width: 100%;
     height: 4px;
     background: #10B981;
     box-shadow: 0 0 20px #10B981;
     position: absolute;
     top: 0;
     animation: scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     opacity: 0.8;
 }

 .lock-icon {
     color: rgba(16, 185, 129, 0.2);
     transition: color 0.3s;
 }

 @keyframes scan {
     0% {
         top: -10%;
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         top: 110%;
         opacity: 0;
     }
 }

 /* Data Animation: Flow */
 .visual-data .data-stream {
     font-family: 'JetBrains Mono', monospace;
     color: #06B6D4;
     font-size: 14px;
     font-weight: bold;
     position: absolute;
     top: -20px;
     text-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
     animation: data-fall 3s linear infinite;
 }

 @keyframes data-fall {
     0% {
         transform: translateY(-20px);
         opacity: 0;
     }

     20% {
         opacity: 1;
     }

     80% {
         opacity: 1;
     }

     100% {
         transform: translateY(250px);
         opacity: 0;
     }
 }



 .demo-step {
     display: none;
     animation: fadeIn 0.4s ease-out;
 }

 .demo-step.active {
     display: block;
 }

 /* Animación Thinking */
 .ai-pulse-ring {
     position: relative;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: conic-gradient(from 0deg, #10b981, #3b82f6, #10b981);
     animation: spin 2s linear infinite;
 }

 .ai-pulse-ring::before {
     content: '';
     position: absolute;
     inset: 4px;
     background: #0f172a;
     border-radius: 50%;
     z-index: 2;
 }

 .ai-pulse-ring::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: inherit;
     filter: blur(20px);
     opacity: 0.5;
     z-index: 1;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .typing-text::after {
     content: '|';
     animation: blink 1s step-start infinite;
 }

 /* --- PREMIUM MERMAID STYLING --- */
 .mermaid-container {
     background: #0f172a;
     /* Deep Slate Base */
     border-radius: 16px;
     /* Smooth corners */
     box-shadow:
         0 10px 30px -10px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(56, 189, 248, 0.1);
     /* Subtle Cyan Ring */
     padding: 24px;
     margin: 2rem 0 !important;
     overflow: hidden;
     transition: all 0.3s ease;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     width: 100% !important;
 }

 .mermaid {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     width: 100% !important;
 }

 .mermaid-container:hover {
     box-shadow:
         0 20px 40px -10px rgba(0, 0, 0, 0.6),
         0 0 0 1px rgba(56, 189, 248, 0.2);
     /* Brighter Ring on Hover */
     transform: translateY(-2px);
 }

 /* --- HIGH-READABILITY TYPOGRAPHY --- */
 .prose h1,
 .prose h2,
 .prose h3 {
     color: #f8fafc;
     /* Almost white */
     margin-bottom: 0.75rem;
     line-height: 1.3;
     font-weight: 700;
 }

 .prose h1 {
     font-size: 1.75rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 0.5rem;
     margin-top: 0;
     /* Lifted up */
     background: linear-gradient(to right, #60a5fa, #bfdbfe, #818cf8);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     width: fit-content;
     /* Ensure gradient doesn't stretch weirdly if not needed, but full width border is nice. Let's stick to block usually. */
     /* Using width 100% or default block to keep border full width */
     display: block;
 }

 .prose h2 {
     font-size: 1.25rem;
     margin-top: 1.25rem;
 }

 .prose h3 {
     font-size: 1.1rem;
     margin-top: 1rem;
     color: #e2e8f0;
 }

 .prose p {
     color: #cbd5e1;
     /* Slate 300 */
     margin-bottom: 1rem;
     line-height: 1.7;
     /* Breathing room */
     font-size: 0.95rem;
 }

 .prose strong {
     color: #fff;
     font-weight: 600;
 }

 .prose ul,
 .prose ol {
     margin-bottom: 1rem;
     padding-left: 1.5rem;
     list-style-type: disc;
     color: #94a3b8;
 }

 .prose li {
     margin-bottom: 0.5rem;
     padding-left: 0.5rem;
 }

 .prose blockquote {
     border-left: 4px solid #38bdf8;
     /* Light Blue */
     background: rgba(56, 189, 248, 0.05);
     padding: 1rem;
     margin: 1.5rem 0;
     font-style: italic;
     color: #e2e8f0;
     border-radius: 0 8px 8px 0;
 }

 /* =========================================
   ESTILO PARA LISTAS DE PUNTOS CLAVE (Puntos 1, 2, 3, 4)
   Transforma la lista aburrida en tarjetas visuales.
   ========================================= */

 /* 1. Quitar los puntos por defecto y el padding de la lista */
 .modal-content ul {
     list-style-type: none !important;
     /* Fuerza la eliminación de los puntos grises */
     padding-left: 0 !important;
     margin-top: 1rem;
 }

 /* 2. Dar estilo de "Botón/Tarjeta" a cada elemento de la lista */
 .modal-content ul li {
     background-color: #1e293b;
     /* Fondo azul oscuro (pizarra) para contraste */
     border: 1px solid #334155;
     /* Borde sutil para definir la tarjeta */
     border-radius: 12px;
     /* Bordes redondeados modernos */
     padding: 16px;
     /* Espacio interno para que el texto respire */
     margin-bottom: 12px;
     /* Separación entre cada tarjeta */

     color: #e2e8f0;
     /* Texto blanco claro para máxima legibilidad */
     font-weight: 500;
     /* Texto un poco más grueso */
     line-height: 1.5;

     display: flex;
     /* Para alinear el icono y el texto */
     align-items: flex-start;
     /* Alinea arriba por si el texto es largo */

     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     /* Sombra suave para dar profundidad */
     transition: all 0.2s ease-in-out;
     /* Transición suave para el hover */
 }

 /* 3. Efecto Hover (opcional): Se ilumina un poco al pasar el ratón */
 .modal-content ul li:hover {
     background-color: #243347;
     /* Un tono ligeramente más claro */
     border-color: #475569;
     transform: translateY(-2px);
     /* Se eleva un poquito */
 }

 /* 4. Añadir un icono visual antes de cada punto */
 .modal-content ul li::before {
     content: "🔹";
     /* Puedes cambiar este icono por otro que te guste (ej: 👉, ✅, 🚀) */
     font-size: 1.2rem;
     margin-right: 12px;
     flex-shrink: 0;
     /* Evita que el icono se aplaste si hay mucho texto */
     color: #38bdf8;
     /* Color cian brillante para el icono */
 }

 /* --- PREMIUM USER PROFILE CARD (Glassmorphism) --- */
 .glass-profile-card {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow:
         0 25px 50px -12px rgba(0, 0, 0, 0.8),
         inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     border-radius: 24px;
     width: 360px;
     /* Fixed width for card look */
     max-width: 90vw;
 }

 /* Neon Avatar Glow */
 .neon-avatar-container {
     position: relative;
     display: inline-block;
 }

 .neon-avatar-container img {
     box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .group:hover .neon-avatar-container img {
     transform: scale(1.05);
     box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
 }

 /* Stats Hover Effect */
 .profile-stat {
     transition: all 0.3s ease;
 }

 .profile-stat:hover {
     background: rgba(255, 255, 255, 0.03);
 }

 .profile-stat:hover span {
     color: #60A5FA;
     /* Blue-400 */
 }

 /* Menu Item Hover Animation */
 .profile-menu-item {
     transition: all 0.2s ease;
 }

 .profile-menu-item:hover {
     background: rgba(255, 255, 255, 0.05);
     transform: translateX(4px);
 }

 /* Footer Button Elegant Hover */
 .btn-sign-out-elegant {
     position: relative;
     overflow: hidden;
 }

 .btn-sign-out-elegant::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
     transform: translateX(-100%);
     transition: 0.5s;
 }

 .btn-sign-out-elegant:hover::before {
     transform: translateX(100%);
 }

 /* Override for Legal Modals (Wider and Taller) */
 .modal-legal-override {
     max-width: 1200px !important;
     width: 95% !important;
     max-height: 90vh !important;
     height: 90vh !important;
 }

 /* FIX: Canvas Background Styles */
 #bg-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     pointer-events: none;
     /* Let clicks pass through */
 }

 .global-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* Efecto de luz central azulada muy sutil y suave */
     background: radial-gradient(circle at center, rgba(37, 99, 235, 0.12) 0%, rgba(2, 6, 23, 0.5) 65%, rgba(2, 6, 23, 1) 100%);
     z-index: 1;
     pointer-events: none;
 }