/*
 * Archivo: custom-styles.css
 * Propósito: Definición de colores, sombras y gradientes para replicar el look de Tailwind/Shadcn.
 */

:root {
    /* 1. PALETA DE COLORES (Convertida de HSL a HEX para facilidad en Elementor/CSS) */
    
    /* Primary (210 100% 45%) */
    --color-primary-base: #0066cc; /* Azul Brillante */
    /* Accent (280 70% 55%) */
    --color-accent-base: #9933cc; /* Púrpura Vibrante */ 
    
    /* Fondo y Texto */
    --color-background: #FFFFFF; /* Blanco Puro */
    --color-foreground: #212529; /* Gris Oscuro Suave (Texto principal) */
    --color-muted: #737c86; /* Gris Medio (Párrafos) */
    --color-secondary-bg: #f5f6f7; /* Gris Muy Claro (Fondo de secciones/Cards) */
    --color-destructive: #cc3333; /* Rojo Vivo (Desafíos/Warnings) */

    /* 2. GRADIENTES */
    /* Gradiente para el texto "Video Systems" */
    --gradient-hero: linear-gradient(135deg, var(--color-primary-base) 0%, var(--color-accent-base) 100%);
    
    /* 3. SOMBRAS (Replicación de los box-shadow complejos con variables) */
    
    /* Sombra elegante para el botón principal (shadow-elegant) */
    --shadow-elegant: 0 20px 60px -15px rgba(0, 102, 204, 0.3); /* Usa Primary con 30% opacidad */
    
    /* Sombra para las tarjetas de Proyectos/Skills (shadow-card) */
    --shadow-card: 0 4px 20px -4px rgba(33, 37, 41, 0.1); /* Usa Foreground con 10% opacidad */
}

/* 4. CLASES DE UTILIDAD PARA ELEMENTOR */

/* Replicación del efecto text-gradient para el H1 */
.text-gradient-hero {
    background-image: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Oculta el color de texto base */
}

/* Aplicación de sombras mediante clases */
.shadow-elegant {
    box-shadow: var(--shadow-elegant);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

/* Estilo para los Badges de Tecnología */
.tech-badge {
    display: inline-block;
    padding: 4px 8px;
    margin: 3px;
    border-radius: 6px;
    background-color: var(--color-secondary-bg);
    color: var(--color-foreground);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

/* 5. ESTILOS DE NAVEGACIÓN ACTIVA (Scroll Spy) */

.elementor-nav-menu a.active-link-class {
    color: var(--color-primary-base) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary-base);
    transition: all 0.2s ease;
}

/* Para hacer el Header fijo sin Elementor Pro */
.sticky-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Asegura que esté sobre el contenido */
    background-color: #FFFFFF; /* Fondo Blanco para cubrir el scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Compensación para que el contenido no quede debajo del Header */
body {
    padding-top: 90px; /* Ajusta este valor al alto de tu Header */
}

/*
 * Archivo: custom-styles.css
 * Sección: Estilos específicos para el título del Hero
 */

.video-systems-title {
    color: var(--color-primary-base, #0066CC); /* Usa nuestro color Primario */
    /* Si necesitas forzar el mismo tamaño y peso, podrías hacerlo aquí,
       pero generalmente se hereda del H1 padre. */
    /* font-size: inherit; */
    /* font-weight: inherit; */
}