/* ===== Configuración Global y Variables ===== */
:root {
    --primary-color: #00A7E1;
    
    /* --- Colores para el Gradiente Animado --- */
    --glow-color-1: #00A7E1; /* Azul Primario */
    --glow-color-2: #48D1CC; /* Turquesa */
    --glow-color-3: #9370DB; /* Púrpura Tech */

    --dark-bg: #121212;
    --light-bg: #1E1E1E;
    --text-color: #E0E0E0;
    --text-muted: #A0A0A0;
    --font-family: 'Roboto', sans-serif;
}

/* ===== Reseteo Básico ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Navegación ===== */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid #333;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
/* MODIFICADO: Estilos para el span dentro del logo */
.navbar .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    position: relative; /* Necesario para el efecto shine */
    overflow: hidden; /* Oculta el brillo fuera del texto */
    display: inline-block; /* Asegura que el ancho sea el del contenido */
}
.navbar .logo span {
    position: relative;
    z-index: 2; /* Para que el texto esté sobre el brillo */
}
.navbar nav ul {
    display: flex;
    list-style: none;
}
.navbar nav li { margin-left: 2rem; }
.navbar nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400;
    transition: color 0.3s ease;
}
.navbar nav a:hover { color: var(--primary-color); }

/* ===== Estilos de Secciones ===== */
section { padding: 5rem 0; }
.section-bg { background-color: var(--light-bg); }
h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

/* ===== Keyframes para Animaciones ===== */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NUEVO KEYFRAME: Animación de brillo */
@keyframes shine {
    0% { transform: translateX(-100%) skewX(-30deg); }
    100% { transform: translateX(200%) skewX(-30deg); }
}

/* ===== MODIFICADO: Sección Hero (Inicio) ===== */
/* ===== MODIFICADO: Sección Hero (Inicio) ===== */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Fundamental para contener el video */
    overflow: hidden; /* Evita que el video desborde la pantalla */
    background-color: var(--dark-bg); /* Color de respaldo */
    padding-top: 60px;
}

/* ===== NUEVO: Estilos del Video de Fondo ===== */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Mantiene la proporción del video sin deformarlo */
    z-index: 0;
}
.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
    color: var(--primary-color); /* Para que el texto del h1 tenga el color principal */
}
/* MODIFICADO: Estilos para el span dentro del h1 del hero */
.hero h1 span {
    position: relative;
    display: inline-block; /* Necesario para que overflow: hidden funcione correctamente */
    overflow: hidden;
    padding: 0 5px; /* Un poco de padding para que el brillo se vea bien en los bordes */
}
.hero .subtitulo {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}
.hero .cta-button {
    animation: fadeInUp 0.8s ease-out 0.9s backwards;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.7); /* Modificá el 0.7 (de 0 a 1) para hacerlo más o menos oscuro */
    z-index: 1;
}

/* ===== NUEVO: Capa del Contenido ===== */
.hero-content {
    position: relative;
    z-index: 2; /* Asegura que los textos y botones queden por encima del video y del overlay */
}

/* ===== ESTILO PARA EL REFLEJO (SHINE EFFECT) ===== */
/* Aplicado al span dentro del logo de la navbar */
.navbar .logo span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ancho del reflejo */
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Color del reflejo (transparente blanco) */
    transform: translateX(-100%) skewX(-30deg);
    transition: transform 0.7s ease-in-out;
    z-index: 1;
}
.navbar .logo:hover span::before {
    animation: shine 1.5s ease-in-out infinite; /* Animación continua al pasar el mouse */
}

/* Aplicado al span dentro del h1 del hero */
.hero h1 span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ancho del reflejo */
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Color del reflejo (transparente blanco) */
    transform: translateX(-100%) skewX(-30deg);
    transition: transform 0.7s ease-in-out;
    z-index: 1;
}
.hero h1 span:hover::before {
    animation: shine 1.5s ease-in-out infinite; /* Animación continua al pasar el mouse */
}


/* ===== MODIFICADO: Botón CTA (Efecto RGB) ===== */
.cta-button {
    display: inline-block;
    background: linear-gradient(90deg, var(--glow-color-1), var(--glow-color-2), var(--glow-color-3), var(--glow-color-1));
    background-size: 300% 100%;
    animation: gradient-flow 8s linear infinite;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    border: none;
    cursor: pointer; /* Añadido cursor */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 167, 225, 0.3);
}

/* ===== Sección Sobre Mí ===== */
.about-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.about-text p { margin-bottom: 1rem; font-size: 1.1rem; }
.about-text strong { color: var(--primary-color); }

/* ===== Grid y Tarjetas ===== */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* ===== MODIFICADO: Tarjeta de Servicios (Borde animado) ===== */
.service-card {
    background-color: var(--dark-bg);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid #333;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card::before {
    content: '';
    position: absolute;
    
    /* Tamaño gigante para velocidad constante */
    width: 200%; 
    height: 200%; 
    left: -50%;
    top: -50%;
    
    /* Efecto "Cometa": mucho transparente y solo la punta de color */
    background: conic-gradient(
        transparent, 
        transparent, 
        transparent, 
        var(--glow-color-2), 
        var(--glow-color-1)
    );
    
    z-index: -2;
    animation: spin 4s linear infinite;
    
    /* ESTO ES LO QUE FALTABA: */
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease; /* Aparece suavemente */
}
.service-card::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--dark-bg);
    z-index: -1;
    border-radius: 6px;
}
.service-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
}
.service-card:hover::before {
    opacity: 1; /* Se vuelve visible */
}
.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.service-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.service-card p { color: var(--text-muted); }

/* ===== MODIFICADO: Portafolio ===== */
.project-card {
    background-color: var(--dark-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.project-card:hover img {
    transform: scale(1.05);
}

.project-content {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}
.project-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    animation: spin 4s linear infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.project-content::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--dark-bg);
    z-index: -1;
}
.project-card:hover .project-content::before {
    opacity: 1;
}
.project-content h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    position: relative; z-index: 2;
}
.project-content p {
    margin-bottom: 1rem;
    color: var(--text-muted);
    position: relative; z-index: 2;
}
.project-content .tag {
    display: inline-block;
    background-color: #333;
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    
    /* --- CORRECCIÓN AQUÍ --- */
    /* Antes: margin: 0 0.5rem 0 0; */
    margin: 0 0.5rem 0.5rem 0; /* Agregamos 0.5rem abajo */
    
    position: relative; 
    z-index: 2;
}

/* ===== Formulario de Contacto ===== */
.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--light-bg);
    padding: 2rem;
    border-radius: 8px;
}
.form-group { margin-bottom: 1.5rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 1rem;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
.contact-form .cta-button {
    width: 100%;
    cursor: pointer;
    font-size: 1.1rem;
}

/* ===== Footer ===== */
footer {
    background-color: var(--light-bg);
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid #333;
    margin-top: 3rem;
}
.social-links { margin-top: 1rem; }
.social-links a {
    color: var(--text-muted);
    font-size: 1.5rem;
    margin: 0 0.75rem;
    transition: color 0.3s ease;
}
.social-links a:hover { color: var(--primary-color); }

/* ===== Animaciones Sutiles (Fade-in) ===== */


/* ===== Diseño Responsivo (sin cambios) ===== */
/* ===== Diseño Responsivo (Móvil) ===== */
@media (max-width: 768px) {
    /* --- Ajuste del Navbar --- */
    .navbar .container {
        flex-direction: column;
        padding: 10px 0;
    }
    
    .navbar nav ul {
        display: flex;
        flex-wrap: wrap; /* CRUCIAL: Permite que los items bajen si no entran */
        justify-content: center;
        gap: 10px; /* Espacio entre los items del menú */
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    .navbar nav li { 
        margin: 0; /* Quitamos el margen grande de PC */
    }
    
    .navbar nav a {
        font-size: 0.9rem; /* Letra un poco más chica para que entren mejor */
        display: inline-block;
        padding: 5px 10px; /* Área de toque más cómoda */
    }

    /* --- Ajuste del Hero y Textos --- */
    .hero { 
        padding-top: 140px; /* Más espacio arriba para que el menú no tape el título */
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .hero h1 { 
        font-size: 2.2rem; 
        line-height: 1.2;
    }
    
    .hero .subtitulo { 
        font-size: 1.1rem; 
    }

    /* --- ARREGLO DE LOS BOTONES SOLAPADOS --- */
    .hero-buttons {
        flex-direction: column; /* Pone uno abajo del otro */
        gap: 15px; /* Espacio vertical para que no se toquen */
        width: 100%;
        align-items: center;
    }

    .hero .cta-button {
        width: 100%; /* Botones anchos para tocar fácil con el dedo */
        max-width: 300px; /* Pero que no sean gigantes */
        display: block; /* Asegura que respeten el espacio */
        margin: 10px;
    }
    
    h2 { font-size: 1.8rem; }
}

/* ===== Carrusel de Marcas/Clientes (Ida y Vuelta) ===== */
.brands-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    /* Desvanece los logos en los bordes izquierdo/derecho */
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
}
.brands-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* "alternate" hace que la animación, al llegar al final, se reproduzca
       al revés (en vez de saltar/reiniciar). Por eso ya no hace falta el
       cálculo exacto de "mitades": nunca hay un salto brusco, siempre se
       desliza, ida y vuelta, en loop infinito. */
    animation: brands-scroll 18s ease-in-out infinite alternate;
}
/* Pausa el desplazamiento al pasar el mouse, para poder mirar tranquilo */
.brands-carousel:hover .brands-track {
    animation-play-state: paused;
}
.brand-logo {
    height: 70px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-right: 4.5rem;
}
.brand-logo:hover {
    opacity: 1;
    transform: scale(1.08);
}
@keyframes brands-scroll {
    /* Antes usaba %, que depende del ancho real de los logos (si la pantalla
       es más ancha que el contenido, queda un hueco vacío antes de rebotar).
       Usando "vw" (ancho de ventana) en cambio, el desplazamiento es siempre
       proporcional a la pantalla del visitante, así que sí o sí hay logos
       de sobra a la derecha antes de rebotar, sin importar cuán ancho sea
       el monitor. Pequeña pausa al inicio (0%-8%) y al final (92%-100%). */
    0%, 8% { transform: translateX(0); }
    92%, 100% { transform: translateX(-50vw); }
}
@media (max-width: 768px) {
    .brands-track {
        animation-duration: 12s;
    }
    .brand-logo {
        height: 45px;
        margin-right: 2.5rem;
    }
}

/* ===== Botón Flotante de WhatsApp ===== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* Para asegurar que esté siempre encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    
    /* Animación suave de entrada */
    animation: fadeInUp 1s ease-out 1s backwards, pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #20b858;
    transform: scale(1.1);
}

/* Animación de pulso para llamar la atención */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Ajuste para móviles para que no tape contenido importante */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}