/* --- VARIABLES CSS (TU PALETA DE COLORES) --- */
:root {
    --color-purple-primary: #7900F9; /* Violeta vibrante */
    --color-dark-navy: #1D0A42;    /* Azul oscuro profundo */
    --color-off-white: #FBFAF6;    /* Fondo claro */
    --color-orange-accent: #FE5000; /* Naranja acento */
    
    /* Tipografías */
    --font-primary: 'Montserrat', sans-serif; /* Sustituto de NORD para títulos */
    --font-secondary: 'Inter', sans-serif;    /* INTER para cuerpos de texto */
}
/* --- RESET Y ESTILOS GENERALES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave entre secciones */
}

body {
    font-family: var(--font-secondary);
    background-color: var(--color-off-white);
    color: var(--color-dark-navy);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-primary);
    font-weight: 800; /* Extra Bold */
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-purple-primary);
    text-align: center;
}

p {
    margin-bottom: 1rem;
    font-weight: 400;
}

a { text-decoration: none; }
ul { list-style: none; }
section { padding: 5rem 10%; }

/* --- HEADER Y NAVEGACIÓN --- */
header {
    background-color: var(--color-dark-navy);
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Nuevo estilo para el contenedor del logo */
.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none; /* Quita subrayados si los hubiera */
}

/* Nuevo estilo para controlar el tamaño de la imagen */
.logo-img {
    height: 60px; /* Esta es la altura del logo. Aumenta o disminuye este número según necesites */
    width: auto;  /* Esto mantiene la proporción para que no se estire */
    display: block;
}

/* Ajuste para móvil */
@media (max-width: 768px) {
.logo-img {
    height: 45px; /* Un poco más pequeño en celulares */
}
}

nav ul { display: flex; gap: 2rem; }

nav a {
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: 0.3s;
}

nav a:hover {
    color: var(--color-orange-accent);
}

/* --- HERO SECTION: EL EFECTO SPLIT (LA NOTA PLUS) --- */
#inicio.hero-split {
    padding: 0;
    height: 95vh; /* Casi toda la altura de la pantalla */
    display: flex;
    overflow: hidden;
    position: relative;
}

.split-side {
    flex: 1; /* Ambos lados ocupan el mismo espacio inicialmente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    text-align: center;
    transition: flex 0.6s ease, background-size 0.6s ease; /* La magia de la transición suave */
    cursor: pointer;
    position: relative;
}

/* Superposición oscura para mejorar la lectura del texto */
.split-side::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(29, 10, 66, 0.7); /* Azul oscuro transparente */
    z-index: 1;
}

.split-content {
    position: relative;
    z-index: 2; /* Texto por encima de la superposición */
    color: white;
}

.split-side h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.split-side p { font-size: 1.2rem; opacity: 0.9; }

/* Lado Izquierdo: Marketing */
.side-marketing {
    /* Usamos un gradiente con tus colores como fondo */
    background: linear-gradient(135deg, var(--color-purple-primary), var(--color-dark-navy));
}

/* Lado Derecho: Desarrollo */
.side-dev {
     /* Usamos un gradiente diferente */
    background: linear-gradient(135deg, var(--color-dark-navy), #000000);
     border-left: 2px solid var(--color-orange-accent);
}

/* --- LA LÓGICA DEL HOVER --- */
/* Cuando pasas el mouse sobre un lado, ese lado crece a flex: 2 */
.split-side:hover {
    flex: 1.8; 
}
/* Un pequeño truco: cuando el mouse está sobre el contenedor padre, 
   el lado que NO tiene hover se hace un poco más pequeño (flex: 0.8) 
   para acentuar el efecto */
.hero-split:hover .split-side:not(:hover) {
    flex: 1; /* Se mantiene normal o se reduce ligeramente */
    opacity: 0.8;
}


/* --- QUIENES SOMOS --- */
#quienes-somos {
    background: white;
    text-align: center;
}
.about-container {
    max-width: 800px;
    margin: 0 auto;
}
.mission-box {
    margin-top: 3rem;
    background: var(--color-purple-primary);
    color: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(121, 0, 249, 0.2);
}
.mission-box h3 {
    color: var(--color-orange-accent);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.filosofia-box {
    margin-top: 3rem;
    background: #FE5000;
    color: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(29, 10, 66, 0.2);
}
.filosofia-box h3 {
    color: #1D0A42;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.highlight { color: var(--color-purple-primary); font-weight: 700; }


/* --- SERVICIOS --- */
#servicios {
    background-color: var(--color-off-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    border-bottom: 4px solid transparent;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid var(--color-orange-accent);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--color-purple-primary);
    margin-bottom: 1.5rem;
    display: block;
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-dark-navy);
}


/* --- CONTACTO --- */
#contacto {
    background: var(--color-dark-navy);
    color: white;
    text-align: center;
}
#contacto h2 { color: white; }

.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

input, textarea {
    padding: 1rem;
    border-radius: 8px;
    border: none;
    font-family: var(--font-secondary);
    font-size: 1rem;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--color-orange-accent);
}
textarea { resize: vertical; height: 120px; }

.btn-submit {
    padding: 1rem 2rem;
    background: var(--color-orange-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
}
.btn-submit:hover {
    background: white;
    color: var(--color-orange-accent);
}

/* --- FOOTER --- */
footer {
    background: #110626; /* Un tono más oscuro que el dark navy */
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    header { flex-direction: column; padding: 1.5rem; }
    nav ul { margin-top: 1.5rem; gap: 1rem; }
    
    /* En móvil, el split screen se convierte en vertical */
    #inicio.hero-split { flex-direction: column; height: auto; }
    .split-side { padding: 4rem 2rem; flex: none; height: 50vh; }
    .split-side:hover { flex: none; } /* Desactivar efecto en móvil */
    .side-dev { border-left: none; border-top: 4px solid var(--color-orange-accent); }
    
    .split-side h1 { font-size: 2.5rem; }
    section { padding: 4rem 5%; }
    h2 { font-size: 2rem; }
}
/* --- ESTILOS BOTÓN WHATSAPP --- */
.btn-whatsapp {
    position: fixed; /* Esto hace que flote */
    bottom: 30px;    /* Distancia desde abajo */
    right: 30px;     /* Distancia desde la derecha */
    width: 60px;     /* Tamaño del botón */
    height: 60px;
    z-index: 9999;   /* Para que quede siempre encima de todo */
    transition: all 0.3s ease; /* Animación suave al pasar el mouse */
}

.btn-whatsapp img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* Sombra bonita */
}

.btn-whatsapp:hover {
    transform: scale(1.1); /* Crece un poquito al pasar el mouse */
    filter: brightness(1.1);
}

/* Ajuste para móviles (un poco más pequeño para no estorbar) */
@media (max-width: 768px) {
    .btn-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}

/* --- ESTILOS REDES SOCIALES --- */
.social-icons-container {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    gap: 25px;               /* Espacio entre cada logo */
    margin-bottom: 2rem;     /* Espacio antes del título */
    margin-top: 1rem;
}

.social-icons-container a {
    text-decoration: none;
}

/* AQUÍ CAMBIAS COLOR Y TAMAÑO */
.social-icons-container i {
    color: #FE5000;          /* Tu Naranja exacto */
    font-size: 40px;         /* Tamaño del icono (Súbelo si quieres más grandes) */
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse (Hover) */
.social-icons-container i:hover {
    color: white;            /* Cambia a blanco */
    transform: translateY(-5px); /* Flota hacia arriba */
    text-shadow: 0 0 10px rgba(254, 80, 0, 0.5); /* Brillito naranja */
}

/* --- ESTILOS GALERÍA DE VIDEOS --- */
#galeria-videos {
    background-color: white; /* O usa var(--color-off-white) si prefieres gris */
    padding: 4rem 10%;
}

.video-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Si no caben, bajan a la siguiente línea */
    gap: 2rem;       /* Espacio entre videos */
    margin-top: 2rem;
}

.video-item {
    width: 320px;    /* Ancho forzado para que parezcan celulares */
    min-width: 300px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden; /* Corta lo que sobre */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombrita elegante */
}

/* Truco para que el iframe de Instagram se ajuste al cajón */
.video-item iframe {
    width: 100% !important;
    border-radius: 12px; 
    border: none !important; 
}
/* --- ESTILOS CHECKBOX POLÍTICA --- */
.politica-container {
    display: flex;
    align-items: center; /* Alinea la cajita con el texto verticalmente */
    gap: 10px;           /* Espacio entre la cajita y el texto */
    margin-bottom: 1.5rem; /* Espacio antes del botón */
    text-align: left;    /* Asegura que el texto se lea de izquierda a derecha */
    font-size: 0.9rem;   /* Un poco más pequeño que los inputs para elegancia */
    color: rgba(255, 255, 255, 0.8); /* Blanco suave */
}

/* Hacemos el checkbox un poco más grande para que sea fácil de clicar */
.politica-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #FE5000; /* Pinta el check de tu color Naranja cuando se marca */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .politica-container {
        align-items: flex-start; /* En celular, si el texto es largo, que la caja quede arriba */
    }
}