/* style.css */

/* --- Configuración Base y Tipografía --- */
body {
    background-color: #020617;
    color: #f8fafc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    opacity: 1 !important; 
}

h1, h2, h3 { color: #f8fafc; }

/* --- Fondos y Efectos Visuales --- */
.bg-grid {
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, 5%, black, 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.whatsapp-bg {
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-color: #0b141a;
    background-blend-mode: overlay;
}

.text-gradient {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Paneles de Cristal (Glassmorphism) con Efecto Hover Mejorado --- */
.glass-panel {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil por defecto */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave para todos los paneles */
}

/* Efecto Hover Brillante (Como en la imagen) */
.glass-panel:hover {
    background: rgba(30, 41, 59, 0.8); /* Fondo un poco más claro */
    border-color: rgba(56, 189, 248, 0.5); /* Borde Azul Brillante (Primary-400) */
    transform: translateY(-5px); /* Pequeña elevación */
    box-shadow: 0 20px 40px -10px rgba(56, 189, 248, 0.15); /* Sombra azulada brillante */
    cursor: pointer;
}

/* Clase auxiliar por si quieres forzar el efecto en elementos específicos */
.glass-card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(56, 189, 248, 0.15);
    cursor: pointer;
}

/* --- Utilidades --- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.reveal {
    opacity: 1; 
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --- Acordeón (FAQ) --- */
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
.accordion-item.active .accordion-content { max-height: 200px; opacity: 1; }
.accordion-icon { transition: transform 0.3s ease; }
.accordion-item.active .accordion-icon { transform: rotate(180deg); }
.accordion-item.active .accordion-title { color: #38bdf8; }

/* --- Modales --- */
.modal-open { overflow: hidden; }

/* --- Sliders Interactivos --- */
.interactive-slider { -webkit-appearance: none; background: transparent; }
.interactive-slider::-webkit-slider-runnable-track {
    width: 100%; height: 8px; cursor: pointer; background: #334155; border-radius: 999px;
}
.interactive-slider::-webkit-slider-thumb {
    height: 20px; width: 20px; border-radius: 50%; background: #ffffff; cursor: pointer;
    -webkit-appearance: none; margin-top: -6px; box-shadow: 0 0 10px rgba(255,255,255,0.5);
    transition: transform 0.1s;
}
.interactive-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.slider-red::-webkit-slider-thumb { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }

/* --- NUEVO: BARRA DE SCROLL PERSONALIZADA --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb {
    background: #334155; 
    border-radius: 5px;
    border: 2px solid #020617; 
}
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Accesibilidad: Borde visible al navegar con teclado */
:focus-visible {
    outline: 2px solid #38bdf8; /* Color Cyan */
    outline-offset: 2px;
}