/* Sección Servicios */
#servicios .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}
#servicios .leftPanel__title {
    grid-column: 1 / -1;
    text-align: center;
}
.firstSection__leftPanel {
    background-color: #1a1a1a;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}
.leftPanel__title { margin-bottom: var(--spacing-lg); }
.leftPanel__info { color: var(--lightGray); margin-bottom: var(--spacing-lg); }
.leftPanel__list { list-style: none; display: grid; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.leftPanel__list li { color: var(--lightGray); display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.leftPanel__list i { color: var(--brandBlue); margin-top: 3px; }
.leftPanel__link {
    display: inline-block;
    background-color: var(--ctaRed);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    margin-top: var(--spacing-lg);
}

/* Layout de dos columnas para servicios en desktop */
@media (min-width: 992px) {
    #servicios .container {
        grid-template-columns: 1fr 1fr;
        align-items: stretch; /* permite que el panel se expanda a la altura disponible */
    }
    #servicios .leftPanel__title { grid-column: 1 / -1; }
}
/*-------------------------------------------*/
/* 1. FUNDAMENTOS DEL SISTEMA DE DISEÑO      */
/*-------------------------------------------*/
:root {
    /* Paleta de Colores */
    --brandBlue: #0a4a9f;
    --darkBackground: #121212;
    --ctaRed: #d32f2f;
    --white: #ffffff;
    --lightGray: #e0e0e0;

    /* Tipografía */
    --fontFamily: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --h1-size: clamp(2.5rem, 6vw, 4rem);
    --h2-size: clamp(1.8rem, 4vw, 2.5rem);
    --body-size: 1rem;
    --label-size: 0.875rem;

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* Otros */
    --max-width: 1200px;
    --border-radius: 4px;
}

/*-------------------------------------------*/
/* 2. ESTILOS GLOBALES Y RESET               */
/*-------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fontFamily);
    background-color: var(--darkBackground);
    color: var(--white);
    font-size: var(--body-size);
    line-height: 1.6;
}

h1, h2, h3 {
    font-weight: 700;
    text-transform: uppercase;
}

h1 { font-size: var(--h1-size); }

h2 {
    font-size: var(--h2-size);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

p { color: var(--lightGray); }
a { color: var(--white); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

section {
    padding: var(--spacing-xl) var(--spacing-md);
    overflow: hidden; /* Evita desbordamientos horizontales */
    scroll-margin-top: 110px; /* Compensa header fijo al navegar por anclas */
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/*-------------------------------------------*/
/* 3. COMPONENTES REUTILIZABLES              */
/*-------------------------------------------*/
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn:hover { transform: translateY(-3px); }
.btn-primary { background-color: var(--brandBlue); color: var(--white); }
.btn-accent { background-color: var(--ctaRed); color: var(--white); }

.form-group { margin-bottom: var(--spacing-md); }
.form-label {
    display: block;
    font-size: var(--label-size);
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
    color: var(--lightGray);
}
.form-input {
    width: 100%;
    background-color: var(--white);
    color: var(--darkBackground);
    border-radius: var(--border-radius);
    border: none;
    padding: 12px 16px;
    font-size: var(--body-size);
    font-family: var(--fontFamily);
}
.form-input::placeholder { color: #757575; }
textarea.form-input { min-height: 150px; resize: vertical; }

/*-------------------------------------------*/
/* 4. LAYOUT Y SECCIONES PRINCIPALES         */
/*-------------------------------------------*/

/* Header y Navegación */
.header {
    background-color: transparent; /* Transparente al inicio */
    backdrop-filter: none;
    padding: 28px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* transiciones suaves */
    will-change: transform, background-color, box-shadow;
}
.navbar { display: flex; justify-content: space-between; align-items: center; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 140px; width: auto; display: block; }
.nav-menu { list-style: none; display: flex; gap: var(--spacing-lg); }
.nav-link { font-weight: 500; text-transform: uppercase; position: relative; padding: var(--spacing-sm) 0; }
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background-color: var(--brandBlue); transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.header.header--hidden { transform: translateY(-100%); }
.header.header--scrolled { 
    background-color: rgba(18, 18, 18, 0.85); /* Semi-transparente al hacer scroll */
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.nav-toggle { display: none; font-size: 1.5rem; cursor: pointer; background: none; border: none; color: var(--white); }

/* Sección Home (Hero) */
#home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden; /* para el slider */
}
#home::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    z-index: 1; /* overlay por encima de las imágenes */
}
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { margin-bottom: var(--spacing-md); }
.hero-content p { max-width: 600px; margin: 0 auto var(--spacing-lg); font-size: 1.1rem; }
.quick-access-buttons {
    display: flex; gap: var(--spacing-md);
    justify-content: center; flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}
/* --- Hero Slider --- */
.hero-slider {
    position: absolute; inset: 0;
    z-index: 0;
}
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.hero-slide img {
    width: 100%; height: 100%; object-fit: cover;
}
.hero-slide.active { opacity: 1; }

/* Servicios, Tripulación y Contacto (Grids) */
.services-grid, .crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
.service-card, .crew-card {
    background-color: #1a1a1a;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    transition: transform 0.3s ease;
}
.service-card:hover, .crew-card:hover { transform: translateY(-10px); }
.card__icon { font-size: 40px; color: var(--brandBlue); margin-bottom: var(--spacing-md); }
.card__title { font-size: var(--label-size); font-weight: 500; text-transform: uppercase; margin-bottom: var(--spacing-sm); color: var(--white); }

/* Destacar tarjeta MC & DOT */
.service-card--highlight {
    background-color: #1a1a1a; /* igual que otras tarjetas */
    border: none;
}
.service-card--highlight .card__icon { color: var(--brandBlue); }
.service-card--highlight .card__title { color: var(--white); letter-spacing: 0; }
.credential-values { color: var(--lightGray); margin: var(--spacing-md) 0; line-height: 1.8; }
.credential-links { display: flex; gap: var(--spacing-md); justify-content: center; align-items: center; }
.credential-links a { color: #fff; font-weight: 600; text-decoration: underline; }
.credential-links a:hover { color: #e0e0e0; }

.crew-card img {
    width: 150px; height: 150px; border-radius: 50%;
    object-fit: cover; margin: 0 auto var(--spacing-md); border: 4px solid var(--brandBlue);
}
.crew-card h3 { color: var(--white); }
.crew-card p { font-style: italic; color: var(--brandBlue); }

/* Avatar con icono para Crew */
.crew-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 4px solid var(--brandBlue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--white);
}
.crew-avatar i { font-size: 64px; line-height: 1; }

/* Sección Credenciales */
#credenciales { background-color: #0f0f0f; }
.credentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}
.credential-card {
    background-color: #1a1a1a;
    border-radius: var(--border-radius);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    border: 1px solid #222;
}
.credential-icon { font-size: 2rem; color: var(--brandBlue); margin-bottom: var(--spacing-md); }
.credential-label { font-size: 0.9rem; text-transform: uppercase; color: var(--lightGray); letter-spacing: 1px; }
.credential-value { font-size: 2rem; font-weight: 700; color: var(--white); margin: var(--spacing-sm) 0 var(--spacing-md); }
.credential-link { color: var(--brandBlue); font-weight: 600; }
.credential-link:hover { color: #2b73d8; }

/* Sección Acerca De */
#acerca { background-color: #1a1a1a; }
.secondSection__content--wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}
.secondSection__mainTittle--wrapper {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}
.secondSection__mainTittle {
    font-size: var(--h1-size);
    margin-bottom: var(--spacing-sm);
}
.secondSection__mainInfo {
    max-width: 70ch;
    color: var(--lightGray);
    margin: 0 auto;
    text-align: left;
}
.parallax__content { text-align: left; }
.parallax__missions {
    display: grid;
    grid-template-columns: 64px 1fr; /* columna fija para ícono + texto */
    align-items: start;
    column-gap: var(--spacing-md);
    row-gap: 0;
    margin-bottom: var(--spacing-lg);
}
.missions__icon--wrapper {
    width: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0;
}
.missions__icon img { width: 60px; height: 60px; }
.missions__icon i { font-size: 48px; color: var(--brandBlue); line-height: 1; display: block; }
.missions__title h3 { color: var(--white); margin-bottom: var(--spacing-xs); text-align: left; }
.missions__text p { text-align: left; }
.slideshow-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 4 / 5; /* fija la altura relativa para evitar saltos por proporción */
    max-height: 720px;
}
.pictures {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta la imagen, mantiene el contenedor estable */
    display: none;
}
.pictures.active { display: block; }
.slideshow-controls {
    position: absolute; top: 50%; width: 100%;
    display: flex; justify-content: space-between;
    transform: translateY(-50%); padding: 0 var(--spacing-md);
}
.slideshow-controls button {
    background-color: rgba(0, 0, 0, 0.5); color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 50%; cursor: pointer; transition: background-color 0.3s;
    border: none;
}
.slideshow-controls button:hover { background-color: var(--brandBlue); }

/* Sección Contacto */
#contacto {
    background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?q=80&w=1887');
    background-size: cover; background-position: center; position: relative;
}
#contacto::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(10, 74, 159, 0.8), rgba(10, 74, 159, 0.9));
}
.contact-form {
    position: relative; z-index: 1;
    background-color: rgba(18, 18, 18, 0.7);
    padding: var(--spacing-xl); border-radius: var(--border-radius);
    max-width: 800px; margin: 0 auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.form-group.full-width { grid-column: 1 / -1; }

/* Footer */
.footer { background-color: var(--darkBackground); padding: var(--spacing-xl) 0; color: var(--lightGray); }
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg); text-align: left;
}
.footer-col h4 {
    color: var(--white); text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    font-size: var(--label-size); font-weight: 600;
}
.footer-logo { height: 120px; width: auto; margin: 0 auto var(--spacing-md); display: block; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--spacing-sm); }
.footer-col a { color: var(--lightGray); transition: color 0.3s; }
.footer-col a:hover { color: var(--brandBlue); }
.footer-bottom {
    margin-top: var(--spacing-xl); padding-top: var(--spacing-lg);
    border-top: 1px solid #333; text-align: center; font-size: 0.9rem;
}

/* Botón de WhatsApp */
.whatsapp-btn {
    position: fixed; bottom: 30px; right: 30px;
    background-color: #25D366; color: white;
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100; transition: transform 0.3s ease;
}
.whatsapp-btn:hover { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}
/*-------------------------------------------*/
/* 5. RESPONSIVE DESIGN (MÓVIL PRIMERO)      */
/*-------------------------------------------*/
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }

    section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    /* Desactiva parallax en móviles por rendimiento */
    #home {
        background-attachment: scroll; /* ya no se usa imagen de fondo, pero mantenemos seguridad */
    }

    /* --- Menú de Navegación para Móvil --- */
    .nav-menu {
        position: fixed; top: 0; right: -100%; width: 70%;
        height: 100vh; background-color: var(--darkBackground);
        flex-direction: column; justify-content: center; align-items: center;
        transition: right 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }
    .nav-menu.active { right: 0; }
    .nav-toggle { display: block; z-index: 1001; }

    /* Ajustes de tamaño de logo en mobile */
    .nav-logo img { height: 96px; }
    .footer-logo { height: 120px; }
    /* Compensación extra por header más alto en móvil */
    section { scroll-margin-top: 150px; }

    /* --- Sección 'Acerca de' en una columna --- */
    .secondSection__content--wrapper {
        grid-template-columns: 1fr;
    }
    .parallax__slide--wrapper {
        margin-top: var(--spacing-xl);
    }
    .slideshow-container { aspect-ratio: 4 / 3; max-height: 480px; }

    /* --- Formulario de Contacto en una columna --- */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* --- Footer para Móvil --- */
    .footer-container {
        text-align: center; /* Centra el texto de las columnas del footer */
    }
     .footer-col {
        margin-bottom: var(--spacing-lg);
    }
}