/* Variables de color y tipografía */
:root {
    --primary-blue: #1b2a47;
    --card-blue: #0f172a;
    --accent-orange: #f39c12;
    --accent-yellow: #f1c40f;
    --text-white: #ffffff;
    --text-dark: #333333;
    --font-main: 'Roboto', sans-serif;
}

/* Reset Básico */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-main);
    color: var(--text-white);
    background-color: var(--primary-blue);
    overflow: hidden; 
}

/* Configuración del One Page Scroll */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header Fijo */
header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 80px;
    background-color: var(--primary-blue); 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding: 0 5%; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.logo { 
    font-size: 24px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 90px; 
}

.logo img { 
    height: 80px; 
}

nav { 
    display: flex; 
    gap: 40px; 
}

nav a {
    color: var(--text-white); 
    text-decoration: none;
    font-weight: 500; 
    font-size: 18px; 
    transition: color 0.3s;
}

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

/* Botón Flotante (FAB) */
.fab {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    background-color: var(--text-white); padding: 15px 20px;
    border-radius: 0 30px 30px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    z-index: 1001; cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}
.fab:hover { background-color: #f0f0f0; transform: translateY(-50%) scale(1.05); }
.fab img { width: 30px; height: 30px; }

.btn-fab-whatapp {
    position: fixed; left: 0; top: 60%; transform: translateY(-50%);
    background-color: var(--text-white); padding: 15px 20px;
    border-radius: 0 30px 30px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    z-index: 1001; cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}
.btn-fab-whatapp:hover { background-color: #f0f0f0; transform: translateY(-50%) scale(1.05); }
.btn-fab-whatapp img { width: 30px; height: 30px; }

/* Clases utilitarias */
.container { flex: 1; padding: 100px 5% 50px 5%; display: flex; position: relative; z-index: 2; }
.bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(27,42,71,0.8) 0%, rgba(27,42,71,0.2) 100%); z-index: 1; }
.white-gradient-right { position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.95) 40%, rgba(255,255,255,1) 100%); z-index: 1; }
.white-gradient-left { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.8) 40%, rgba(255,255,255,0.95) 100%); z-index: 1; }

.text-orange { color: var(--accent-orange); }
.text-blue { color: var(--primary-blue); }

h1, h2 { font-weight: 700; line-height: 1.1; }
p { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }

.btn { display: inline-block; padding: 15px 30px; border-radius: 25px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-size: 16px; transition: transform 0.2s; }
.btn:hover { transform: scale(1.05); }
.btn-blue { background-color: var(--primary-blue); color: white; }
.btn-black { background-color: #000; color: white; }
.btn-orange { background-color: var(--accent-orange); color: var(--primary-blue); border: 2px solid var(--accent-yellow); font-size: 20px; text-align: center; }

.check-list { list-style: none; margin-bottom: 30px; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 16px; }
.check-list li::before { content: '✔'; position: absolute; left: 0; color: var(--accent-orange); font-weight: bold; }

/* SECCIONES ESPECÍFICAS */
#s1 { background-color: #0d1627;  
    background-attachment: fixed; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
}
/* --- Estructura Hero Sección 1 --- */
#s1 .hero-content { 
    align-self: center; 
    width: 100%; 
    text-align: right; 
    padding-right: 5%; 
}

#s1 h1 { 
    font-size: 5rem; 
    margin-bottom: 10px; 
}

#s1 h1 span { 
    font-weight: 300; 
    font-size: 3rem; 
    display: block; 
}

/* --- Contenedor de Tarjetas --- */
.cards-container { 
    display: flex; 
    gap: 50px; 
    width: 90%; 
    margin: auto auto 70px auto; 
    z-index: 2; 
    perspective: 1000px; /* Añade profundidad al efecto */
}

/* --- Tarjeta Individual (Estado Reposo) --- */
.card { 
    background-color: var(--card-blue); 
    padding: 30px 20px; 
    border-radius: 15px; 
    flex: 1; 
    text-align: center; 
    border: 1px solid rgba(255,255,255,0.1); 
    
    /* Aseguramos que el contenido mande sobre la altura */
    height: auto; 
    min-height: 250px; /* Altura mínima para que sean uniformes */
    display: flex;
    flex-direction: column;
    align-items: center;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card img { 
    height: 70px; 
    margin-bottom: 15px; 
    transition: transform 0.4s ease; /* Para que el icono también reaccione */
}

.card h3 { 
    color: var(--accent-orange); 
    margin-bottom: 15px; 
    font-size: 18px; 
}

.card p { 
    font-size: 14px; 
    color: #ccc; 
    line-height: 1.5;
    margin-bottom: 0;
}

/* --- ESTADO HOVER (Al pasar el ratón) --- */
.card:hover { 
    transform: translateY(-55px); 
    /* Si el texto es muy largo, esto asegura que no se tape con nada */
    z-index: 10; 
}

.card:hover img { 
    /* El icono gira o salta un poco */
    transform: scale(1.1) rotate(5deg); 
}

.card:hover p {
    color: #fff; /* El texto se aclara al resaltar */
}

#s2 .content-right { margin-left: auto; width: 50%; display: flex; flex-direction: column; justify-content: center; padding-right: 5%; }
#s2 h2 { font-size: 3.5rem; color: var(--primary-blue); margin-bottom: 30px; font-weight: 300;}
#s2 h2 strong { font-weight: 900; }
#s2 .btn { align-self: flex-start; }

#s3 .bg-image { object-position: left center; }
#s3 .content-right { width: 45%; margin-left: auto; padding-top: 40px; color: var(--text-dark);}
#s3 h2 { color: var(--primary-blue); font-size: 1.8rem; margin-bottom: 10px; }
.highlight-box { background: linear-gradient(90deg, var(--primary-blue) 0%, #4a6fa5 100%); padding: 20px; border-radius: 10px; color: white; margin-bottom: 10px; font-size: 18px; }
.highlight-box span { color: var(--accent-orange); font-weight: bold; }
.title-bottom-left { position: absolute; bottom: 40px; left: 5%; font-size: 3rem; font-weight: 900; color: var(--primary-blue); line-height: 1; z-index: 2; }
.title-bottom-left span { color: var(--accent-orange); display: block;}

#s4 .content-right { width: 63%; margin-left: auto; justify-content: center; display: flex; flex-direction: column;}
#s4 h2 { font-size: 3.2rem; margin-bottom: 20px; }
#s4 .btn-container { position: absolute; bottom: 80px; left: 10%; z-index: 2;}

#s5 .content-right { width: 45%; margin-left: auto; justify-content: center; display: flex; flex-direction: column; color: var(--text-dark); }
#s5 h2 { font-size: 4rem; color: var(--primary-blue); line-height: 1; margin-bottom: 20px;}
#s5 h2 span { font-size: 2rem; color: var(--accent-orange); font-weight: 400; display: block; }

#s6 .overlay { background: rgba(13, 22, 39, 0.7); }
#s6 .content-right { width: 50%; margin-left: auto; justify-content: center; display: flex; flex-direction: column;}
#s6 h2 { font-size: 3rem; margin-bottom: 20px; }
#s6 .btn-container { position: absolute; bottom: 100px; left: 15%; z-index: 2;}

/* --- Estructura General Sección 7 --- */
#s7 .content-left { 
    width: 50%; 
    justify-content: flex-start; 
    display: flex; 
    flex-direction: column; 
    color: var(--primary-blue); 
    padding-left: 5%;
}

#s7 h2 { 
    font-size: 3rem; 
    margin-top: 60px;
    margin-bottom: 30px; 
    font-weight: 300; 
}

#s7 h2 strong { 
    font-weight: 900; 
    color: var(--accent-orange);
}

/* --- Contenedor de Tarjetas --- */
.footer-cards { 
    display: flex; 
    gap: 50px; 
    position: absolute; 
    bottom: 60px; /* Se apoya justo encima de la bottom-bar */
    left: 5%; 
    width: 90%; 
    z-index: 2; 
    align-items: flex-end; /* Alinea las tarjetas desde abajo */
}

/* --- Estilo de la Tarjeta y Animación --- */
.footer-card { 
    background-color: rgba(27, 42, 71, 0.95); 
    padding: 50px; 
    border-radius: 15px 15px 0 0; 
    flex: 1; 
    text-align: center; 
    color: white; 
    cursor: pointer;
    
    /* Efecto de desplazamiento inicial */
    transform: translateY(110px); /* Ajusta este valor para esconderla más o menos */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease;
}

.footer-card h4 { 
    color: var(--accent-orange); 
    margin-bottom: 15px; 
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* --- Texto interno (oculto por defecto) --- */
.footer-card p { 
    font-size: 13px; 
    margin: 0; 
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 0.1s;
}

/* --- ESTADO HOVER (Al pasar el ratón) --- */
.footer-card:hover { 
    transform: translateY(0); /* Sube la tarjeta por completo */
    background-color: rgba(27, 42, 71, 1);
}

.footer-card:hover p { 
    opacity: 1; /* Muestra el texto suavemente */
}

.footer-card:hover h4 {
    transform: translateY(-5px); /* Pequeño salto del título */
}

/* --- Barra Inferior --- */
.bottom-bar { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 40px; 
    background-color: #000; 
    display: flex; 
    justify-content:space-between; 
    align-items: center; 
    padding: 0 10%; 
    z-index: 3; /* Asegura que las tarjetas salgan por detrás de esta barra */
    font-size: 15px;

}

.bottom-bar img { 
    height: 60%; 
    filter: brightness(0) invert(1); 
}

/* =========================================
   ESTILOS DE CONTACTO
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1; visibility: visible;
}

.modal-content {
    background-color: var(--text-white);
    color: var(--text-dark);
    padding: 40px; border-radius: 15px;
    width: 90%; max-width: 450px;
    position: relative;
    transform: translateY(-50px) scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.close-btn {
    position: absolute; top: 15px; right: 20px;
    font-size: 30px; font-weight: 300; cursor: pointer;
    color: #999; transition: color 0.2s; line-height: 1;
}

.close-btn:hover { color: var(--accent-orange); }

.modal-content h2 { color: var(--primary-blue); font-size: 24px; margin-bottom: 5px; }

#contact-form { display: flex; flex-direction: column; gap: 15px; }

.input-group label {
    display: block; font-size: 13px; font-weight: 500;
    margin-bottom: 5px; color: var(--primary-blue);
}

#contact-form input, #contact-form textarea {
    width: 100%; padding: 12px 15px;
    border: 1px solid #d1d5db; border-radius: 8px;
    font-family: var(--font-main); font-size: 14px;
    background-color: #f9fafb; transition: border-color 0.3s, background-color 0.3s;
}

#contact-form input:focus, #contact-form textarea:focus {
    outline: none; border-color: var(--accent-orange); background-color: #fff;
}

.submit-btn { width: 100%; margin-top: 10px; padding: 15px; font-size: 16px; border-radius: 8px;}

/* =========================================
   ADAPTACIÓN PARA MÓVILES
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Ajuste General y Scroll */
    section {
        height: auto; 
        min-height: 100vh; /* Permite que la sección crezca si hay mucho contenido */
        padding-top: 80px; /* Evita que el header fijo tape el contenido */
        scroll-snap-align: start;
    }

    .scroll-container {
        /* En móviles, a veces el scroll-snap es invasivo si el contenido es más alto que la pantalla. 
           Si notas que salta muy brusco, puedes cambiarlo a 'none'. */
        scroll-snap-type: y proximity; 
    }

    /* 1.5 Cambiar imágenes de fondo para móviles  */
    #s1 .bg-image { content: url("Media/AGUILA\ MOB.png"); }
    #s2 .bg-image { content: url("Media/Seccion\ 2MOB.png"); }
    #s3 .bg-image { content: url("Media/Seccion-3.gif"); }
    #s4 .bg-image { content: url("Media/Seccion\ 4MOB.png"); }
    #s5 .bg-image { content: url("Media/Seccion\ 5MOB.png"); }
    #s6 .bg-image { content: url("Media/Seccion\ 6mob.png");}
    #s7 .bg-image { content: url("Media/Seccion\ 7\ MOB.png");}

    /* 2. Header y Navegación */
    header {
        height: auto;
        padding: 15px 5%;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }

    .logo { gap: 20px; font-size: 20px; }
    .logo img { height: 50px; }
    
    nav { gap: 15px; flex-wrap: wrap; justify-content: center; }
    nav a { font-size: 15px; }

    /* 3. Tipografía */
    #s1 h1 { font-size: 3rem; text-align: center; }
    #s1 h1 span { font-size: 2rem; }
    #s2 h2, #s4 h2, #s6 h2, #s7 h2 { font-size: 2.2rem; text-align: center; }
    #s5 h2 { font-size: 2.5rem; text-align: center; }
    #s5 h2 span { font-size: 1.5rem; }
    p { font-size: 15px; text-align: center; }

    /* 4. Estructura de Contenidos  */
    .container {
        padding: 20px 5% 50px 5%;
        flex-direction: column;
        justify-content: center;
    }

    #s1 .hero-content,
    #s2 .content-right,
    #s3 .content-right,
    #s4 .content-right,
    #s5 .content-right,
    #s6 .content-right,
    #s7 .content-left {
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center; /* Centrar elementos internos */
    }

    /* 5. Degradados */
    .white-gradient-right, .white-gradient-left {
        width: 100%;
        background: rgba(255, 255, 255, 1.0); /* Fondo semitransparente sólido */
    }

    /* 6. Tarjetas (Apilarlas verticalmente) */
    .cards-container {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin-bottom: 30px;
    }

    /* Quitar efecto hover exagerado en móvil */
    .card:hover { transform: translateY(-10px); }

    /* 7. Posicionamientos Absolutos (Resetearlos y centrarlos) */
    #s4 .btn-container, #s6 .btn-container {
        position: static;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px auto; /* Esto les da respiro arriba y abajo, centrando el bloque */
    }

    .title-bottom-left {
        position: static;
        text-align: center;
        font-size: 2.5rem;
        margin-top: 30px;
        width: 100%;
    }

    /* 8. Sección 7 (Footer y Tarjetas Inferiores) */
    .footer-cards {
        position: static; 
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el contenido horizontalmente */
        justify-content: center;
        width: 100%;
        left: 0; /* Resetea el empuje lateral del escritorio */
        margin: 20px auto 20px auto;
        padding: 0;
    }

    .footer-card {
        width: 90%; /* Al no ser 100%, se genera un margen natural a los lados */
        max-width: 400px; /* Evita que sean demasiado anchas en tablets pequeñas */
        margin: 0 auto 10px auto; /* Centra la tarjeta a la mitad de la pantalla y da margen abajo */
        transform: translateY(0); 
        padding: 30px 20px;
        border-radius: 15px;
        text-align: center;
    }

    .footer-card p {
        opacity: 1; /* Mostrar texto siempre, en móvil no hay hover */
    }

    .bottom-bar {
        position: static; /* Colocarlo al final del flujo normal */
        flex-direction: column;
        height: auto;
        padding: 15px 5%;
        gap: 10px;
        text-align: center;
        font-size: 10px;
    }

    /* 9. Botón Flotante y Modal */
    .fab { padding: 20px 15px; }
    .fab img { width: 20px; height: 30px; }

    .modal-content { padding: 30px 20px; }
}