/* --- VARIABLES DE MARCA GABRA STUDIO --- */
:root {
    --azul-gabra: #2962FF;     /* Azul principal de ingeniería */
    --fondo-gabra: #FAFAFA;    /* Gris muy claro de fondo */
    --oscuro-gabra: #1A1A1A;   /* Negro profundo para contrastes */
    --gris-texto: #B3B3B3;     /* Gris para descripciones secundarias */
    --montserrat: 'Montserrat', sans-serif; /* Tipografía principal */
}

/* --- RESET GENERAL --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    scroll-behavior: smooth; 
}

body { 
    font-family: var(--montserrat); 
    background-color: var(--fondo-gabra);
    background-image: radial-gradient(var(--azul-gabra) 0.5px, transparent 0.5px);
    background-size: 30px 30px;
    background-attachment: fixed;
    overflow-x: hidden; 
}
html, body {
    overflow-x: clip;
    width: 100%;
    position: relative;
}

/* --- HEADER Y NAVEGACIÓN --- */
header {
    background: var(--oscuro-gabra);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(41, 98, 255, 0.4);
}

nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container { 
    display: flex; 
    align-items: center; 
    height: 60px; 
}

.main-logo { 
    max-height: 40px; 
    width: auto; 
    object-fit: contain; 
}

.nav-links { 
    display: flex; 
    list-style: none; 
}

.nav-links > li { 
    position: relative; 
    margin-left: 30px; 
}

.nav-links a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 15px 0;
    display: block;
    transition: 0.3s ease;
}

.nav-links a:hover, .nav-links a.active { 
    color: var(--azul-gabra); 
}

.nav-links a.active {
    border-bottom: 2px solid var(--azul-gabra);
    padding-bottom: 5px;
}

/* --- DROPDOWN (MENÚ DESPLEGABLE) --- */
.dropdown-content {
    visibility: hidden; 
    opacity: 0;
    position: absolute; 
    top: 100%; 
    left: 0;
    background-color: var(--oscuro-gabra);
    min-width: 240px;
    border: 1px solid rgba(41, 98, 255, 0.2);
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-top: 5px;
    border-radius: 2px;
}

.dropdown:hover .dropdown-content { 
    visibility: visible; 
    opacity: 1; 
    transform: translateY(0); 
}

.dropdown-content a { 
    padding: 12px 20px; 
    font-size: 0.75rem; 
    color: var(--gris-texto) !important; 
}

.dropdown-content a:hover { 
    color: #FFF !important; 
    background: rgba(41, 98, 255, 0.1); 
    padding-left: 30px; 
}

/* --- SECCIÓN HERO --- */
.hero {
    position: relative;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background: linear-gradient(rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7)), 
                url('img/drone-hero.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 0 5%;
}

.hero h1 { 
    font-weight: 800; 
    font-size: clamp(2rem, 5vw, 3.5rem); 
    text-transform: uppercase; 
    margin-bottom: 15px; 
}

.hero p { 
    font-weight: 300; 
    font-size: clamp(1rem, 2vw, 1.4rem); 
    color: var(--gris-texto); 
    margin-bottom: 35px; 
}

.btn-explorar {
    background: var(--azul-gabra); 
    color: white;
    padding: 18px 45px; 
    text-decoration: none;
    font-weight: 800; 
    text-transform: uppercase;
    letter-spacing: 2px; 
    transition: 0.4s;
}

.btn-explorar:hover { 
    background: white; 
    color: var(--azul-gabra); 
}

/* --- SECCIÓN SERVICIOS (HOME) --- */
.services-container { 
    padding: 80px 5%; 
    max-width: 1400px; 
    margin: 0 auto; 
}

.services-grid { 
    display: flex; 
    gap: 20px; 
}

.card {
    flex: 1;
    height: 550px !important;
    position: relative;
    overflow: hidden;
    background: var(--oscuro-gabra);
    display: block;
}

.card img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: 0.8s ease; 
    filter: grayscale(85%) brightness(0.7);
}

.card:hover img { 
    transform: scale(1.05); 
    filter: grayscale(0%) brightness(1);
}

.card-overlay { 
    position: absolute; 
    bottom: 0; 
    padding: 35px; 
    background: linear-gradient(transparent, rgba(26,26,26,0.98)); 
    color: white; 
    width: 100%; 
}

.card-overlay h3 { 
    font-weight: 800; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    font-size: 1.3rem; 
}

/* --- PORTAFOLIO INVITACIONES (SIDE BY SIDE) --- */
.portfolio-container {
    display: flex;
    align-items: flex-start; /* CRUCIAL: Permite que las columnas no crezcan igual y el sticky funcione */
    min-height: 100vh;
    width: 100%;
    background: white;
    position: relative;
}

.mockup-side {
    flex: 0 0 45%; 
    background: #fcfcfc; 
    /* La clave: la sección mide la pantalla, pero se queda pegada arriba */
    position: sticky;
    top: 80px; /* Ajusta este valor al alto de tu menú negro */
    height: calc(100vh - 80px);
    display: flex; 
    justify-content: center;
    align-items: center; /* Centra la imagen verticalmente en la pantalla fija */
    z-index: 10;
}

.sticky-phone {
    width: 100%; 
}

.sticky-phone img {
    width: 100% !important;
    height: auto !important;
    display: block;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.08));
}

.info-side {
    flex: 1;
    padding: 2% 6%; 
    background: white;
    /* Aseguramos que esta columna sea la que dicte el scroll largo */
    min-height: 100vh; 
}

.pro-title { font-size: 2.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: -1px; }
.pro-subtitle { color: var(--gris-texto); margin-bottom: 60px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
.category-block { margin-bottom: 80px; }
.category-block h2 { font-size: 2rem; font-weight: 800; text-transform: uppercase; margin: 10px 0; }
.category-block p { font-weight: 300; line-height: 1.6; color: #444; font-size: 0.95rem; text-align: justify;  }
.label { color: var(--azul-gabra); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }

.divider { border: none; border-top: 1px solid #eee; margin: 60px 0; }

/* --- CONTACTO --- */
.contacto-header { padding: 100px 5% 40px; text-align: center; }
.card-contacto {
    background: var(--oscuro-gabra) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px !important;
    text-decoration: none;
    border: 1px solid rgba(41, 98, 255, 0.1);
    transition: 0.4s;
}
.card-contacto:hover { border-color: var(--azul-gabra); transform: translateY(-5px); }
.card-content-contacto { padding: 40px; text-align: center; color: white; }
.icon-box { font-size: 3rem; margin-bottom: 20px; }
.btn-link { display: inline-block; color: var(--azul-gabra); font-weight: 700; border-bottom: 1px solid var(--azul-gabra); margin-top: 20px; text-decoration: none; }

/* --- FOOTER --- */
footer { text-align: center; padding: 30px 0; border-top: 1px solid #ddd; background: white; }

/* --- RESPONSIVE GENERAL --- */
@media (max-width: 992px) {
    .services-grid, .portfolio-container { flex-direction: column; }
    .mockup-side, .info-side { flex: 0 0 100%; width: 100%; }
    
    /* Ajuste para que la imagen horizontal respire en móvil */
   .mockup-side { 
        position: relative; /* Desactiva el sticky */
        height: auto; /* Altura automática en móvil */
        width: 100%;
        padding: 40px 5% 10px; 
        top: 0;
    }

    .sticky-phone { 
        position: relative;
        width: 90% !important; 
        max-width: 550px; 
    }

    .info-side { padding: 40px 5%; text-align: center; } /* Reducimos padding superior */
    .action-btns { justify-content: center; }
    .hero { height: 60vh; background-attachment: scroll; }
    .card { height: 400px !important; margin-bottom: 20px; width: 100%; }
    
    .pro-title { font-size: 1.6rem; } /* Un poco más pequeño para que no rompa en 2 líneas */
    .category-block h2 { font-size: 1.6rem; }
}

/* Estilos base mejorados */
.action-btns { 
    display: flex; 
    gap: 12px; 
    margin-top: 30px; 
    flex-wrap: wrap; /* Permite que bajen si no caben */
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 24px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px; /* Bordes más modernos */
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 2px solid transparent;
}

.btn-primary { 
    background: var(--azul-gabra); 
    color: white; 
}

.btn-primary:hover {
    background: #0039cb; /* Un azul un poco más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

.btn-secondary { 
    border: 2px solid var(--oscuro-gabra); 
    color: var(--oscuro-gabra);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--oscuro-gabra);
    color: white;
    transform: translateY(-2px);
}
.txt-promocion, 
.txt-sub-promo,
.category-block[style*="text-align: center"] p {
    text-align: center !important;
}

/* --- AJUSTE PARA MÓVIL (Cambio total de apariencia) --- */
@media (max-width: 600px) {

    .main-logo{
        max-height: 30px;
    }
    .action-btns {
        flex-direction: column; /* Apilados para mejor click */
        gap: 10px;
    }

    .btn-primary, .btn-secondary {
        width: 100%; /* Ancho completo para facilitar el pulgar */
        padding: 16px 20px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    /* Opcional: El botón de cotizar puede verse diferente para resaltar */
    .btn-secondary {
        border-color: #eee; /* Más sutil si hay muchos botones */
        background: #f9f9f9;
    }
    .lista-deluxe {
        /* Forzamos las dos columnas de igual tamaño */
        grid-template-columns: repeat(2, 1fr) !important;
        /* Reducimos el tamaño de la fuente */
        font-size: 0.7rem !important;
        /* Ajustamos el interlineado para que no se encimen */
        line-height: 1.6 !important;
        /* Reducimos el espacio entre columnas para aprovechar el ancho */
        gap: 8px 10px !important;
        text-align: left;
    }

    .lista-deluxe li {
        display: flex;
        align-items: flex-start;
        /* Evita que palabras muy largas rompan el diseño */
        word-break: break-word; 
    }
}