/*
====================================
1. RESET Y BASE
====================================
*/
:root {
    /* Paleta de Colores de Transfer Chicureo */
    --color-acento: #2185F5;        /* Azul Brillante (Botón Primario, Hover, Iconos) */
    --color-petroleo: #004364;      /* Azul Petróleo (Fondo Oscuro, Títulos) */
    --color-negro-azulado: #1B1B24; /* Negro Azulado (Texto Principal, Base Dark) */
    --color-gris-claro: #BFBFBF;    /* Gris Claro (Texto Secundario, Enlaces en Footer) */
    --color-blanco: #FFFFFF;        /* Blanco Puro */

    /* Tipografía */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Lato', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    color: var(--color-negro-azulado);
    line-height: 1.6;
    
    /* 1. Mantenemos el color de fondo para la mezcla */
    background-color: var(--color-negro-azulado);    
   
    position: relative;
    z-index: 1; 

}


a {
    text-decoration: none;
    color: var(--color-negro-azulado);
    transition: color 0.3s ease;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0; /* Padding general para secciones */
}

/* Títulos con Tipografía Premium */
h1, h2, h3 {
    font-family: var(--font-primary);
    line-height: 1.4;
    margin-bottom: 15px;
}

h1 {
    font-size: 3em;
    font-weight: 900; /* Extra bold para el impacto */
}

h2 {
    font-size: 2.3em; 
    font-weight: 750;
    color: var(--color-petroleo); /* Títulos de sección en Azul Petróleo para seriedad */
}

/*
====================================
2. ENCABEZADO Y NAVEGACIÓN (HEADER)
====================================
*/

.main-header {
    min-height: 600px;
    background-image: url('imagenes/imagenes-index/header-h.png'); /* ¡IMPORTANTE! Reemplazar con tu imagen */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ======================================= */
/* 2. MEDIA QUERY (TELÉFONO / MÓVIL) - PEGAR AQUÍ */
/* ======================================= */
@media (max-width: 968px) {
    /* 🛑 ESTO ANULA SÓLO las propiedades background-image y min-height 🛑 */
    .main-header {
        min-height: 400px; /* Hacemos el header más bajo */
        
        background-image: url('imagenes/imagenes-index/header-v.png'); /* NUEVA IMAGEN VERTICAL */
        
        /* background-size: cover; se hereda, a menos que lo cambies */
    }
}

/* Overlay Oscuro para Legibilidad */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 67, 100, 0.548); /* #004364 con 75% de opacidad */
    z-index: 1;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    position: relative;
    z-index: 20; /* Sobre el overlay */
}

.logo-img {
    height: 40px; /* Ajustar según el tamaño de tu logo */
}

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

.nav-link {
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--color-blanco);
    text-transform: uppercase;
    margin-left: 30px;
    padding: 5px 0;
}

.nav-link:hover {
    color: var(--color-acento); /* Acento al pasar el ratón */
}

/* Nuevo botón de hamburguesa (invisible por defecto en desktop) */
.hamburger-menu {
    display: none; 
    /* REVERSIÓN DE POSICIÓN */
    position: relative; /* Dejamos de ser 'fixed' */
    top: auto; 
    right: auto;
    z-index: 101; 
    border: none; /* Quitamos el borde */
    background: none; /* Quitamos el fondo */
    padding: 10px; /* Volvemos al padding original */
}


/* Contenido Principal (Hero) */
.hero-content {
    text-align: center;
    padding: 150px 0; /* Espaciado para centrar verticalmente */
    position: relative;
    z-index: 2; /* Sobre el overlay */
    color: var(--color-blanco);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 80px
}

/* AJUSTE GENERAL DE TÍTULOS */
h1 {
    /* Valor original que causaba el problema de la línea extra: 3em */
    font-size: em; 
    font-weight: 700; 
    line-height: 1.5;
}

/* Modifica el h1 para que se vea más pequeño */
.hero-content h1 {
    /* REDUCCIÓN CLAVE: Probaremos con un valor más pequeño.
       Tendrás que probar 2.5em o 2.4em si el texto no cabe a 2.8em. */
    font-size: 2.5em; /* Valor sugerido para que quepa en una línea */
    /* !important asegura que anule cualquier otro h1 general */
    margin-bottom: 40px; 
}

/* Sección 2. ENCABEZADO Y NAVEGACIÓN (HEADER) - Estilo base de los enlaces */

/* ... (código existente para .nav-link y .nav-link:hover) ... */

/* NUEVA CLASE: ESTILO PARA EL ENLACE ACTIVO (AL HACER SCROLL) */
.nav-link.active-link {
    /* Usamos el color de acento, el mismo del :hover */
    color: var(--color-acento) !important; 
    /* El !important asegura que este color anule al color blanco por defecto */
    font-weight: 700; /* Opcional: para que se destaque un poco más */
}

/*
====================================
3. ESTILOS DE BOTONES PREMIUM
====================================
*/

.btn {
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

/* Botón Primario (Sólido - Reserva) */
.btn-primary {
    background-color: var(--color-acento);
    color: var(--color-blanco);
    border: 2px solid var(--color-petroleo);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra sutil para el efecto premium */
    display: inline-flex;       /* Habilita Flexbox, usando inline para no ocupar todo el ancho disponible */
    justify-content: center;    /* Centra el ícono y el texto horizontalmente */
    align-items: center;        /* Centra el ícono y el texto verticalmente (buena práctica) */
}


.btn-primary:hover {
    background-color: var(--color-petroleo); /* Oscurece al pasar el ratón */
    border-color: var(--color-acento);
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* Botón Secundario (Ghost/Fantasma - Cotiza) */
.btn-secondary {
    background-color: var(--color-acento); /* Fondo BLANCO SÓLIDO */
    color: var(--color-blanco); /* Texto en AZUL OSCURO */
    border: 2px solid var(--color-petroleo); /* Borde blanco (opcional) */
    display: inline-flex;       /* Habilita Flexbox, usando inline para no ocupar todo el ancho disponible */
    justify-content: center;    /* Centra el ícono y el texto horizontalmente */
    align-items: center;        /* Centra el ícono y el texto verticalmente (buena práctica) */
}


.btn-secondary:hover {
    background-color: var(--color-petroleo); /* Se vuelve AZUL CLARO al pasar el ratón */
    color: var(--color-blanco); /* El texto se vuelve blanco */
    border-color: var(--color-acento);
    transform: translateY(-2px); 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* Estilo para el botón pequeño dentro de las tarjetas */
.btn-small {
    padding: 10px 20px;
    font-size: 0.85em;
}

/*
====================================
4. SECCIONES PRINCIPALES
====================================
*/

.section-quienes-somos {
    background-color: #ecebeb; /* Fondo blanco para legibilidad máxima */
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.quienes-somos-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1em;
    color: var(--color-negro-azulado);
    text-align: center;
}

.section-subtitle {
    max-width: 800px;        
    font-size: 1.1em;        
    color: var(--color-negro-azulado);
    margin: 0 auto 40px auto; 
    text-align: center;
}

.quienes-somos-text p {
    margin-bottom: 20px;
}

/*
====================================
4.5. SECCIÓN SERVICIOS (TARJETAS)
====================================
*/

.section-servicios {
    background-color: #f7f7f7; /* Fondo GRIS CLARO para diferenciar */
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.servicios-grid {
    display: grid;
    /* 3 columnas de igual ancho para desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 50px;
}

.servicio-card {
    background-color: var(--color-blanco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra elegante, sutil */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición corregida */
}

.servicio-card:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el ratón */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.servicio-icon {
    font-size: 3.5em; /* Tamaño grande para el ícono */
    color: var(--color-petroleo); /* Color corporativo */
    margin-bottom: 20px;
    display: block;
}

.card-title {
    font-size: 1.25em;
    color: var(--color-negro-azulado);
    margin-bottom: 15px;
}

.servicio-card p {
    color: #555; /* Un gris oscuro para el cuerpo del texto */
    margin-bottom: 25px;
    min-height: 100px; /* Asegura que la altura sea similar si el texto es muy corto */
    line-height: 1.5;
}

/*
====================================
4.8. SECCIÓN GALERÍA DE FLOTA
====================================
*/
.section-flota {
    background-color: #ecebeb;
    padding: 40px 0;
    text-align: center;
}



.flota-grid {
    display: grid;
    /* Define la cuadrícula principal: 4 columnas de igual ancho */
    grid-template-columns: repeat(4, 1fr); 
    grid-gap: 15px; /* Espacio entre imágenes */
    margin-top: 0px;
}

.flota-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Imagen destacada: Ocupa 2 columnas y 2 filas (efecto asimétrico) */
.flota-item.featured {
    grid-column: span 2; /* Ocupa 2 columnas */
    grid-row: span 2; /* Ocupa 2 filas */
}

.flota-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
    display: block;
    transition: transform 0.4s ease-out; /* Transición para el zoom en hover */
}

/* Overlay elegante al pasar el ratón */
.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background-color: rgba(0, 67, 100, 0); /* Azul Petróleo semi-transparente */
    color: var(--color-blanco);
    font-family: var(--font-primary);
    font-weight: 600;
    text-align: center;
    transform: translateY(100%); /* Oculto por defecto fuera de la parte inferior */
    transition: transform 0.3s ease;
}

/* Efectos al pasar el ratón (Zoom y Muestra el Overlay) */
.flota-item:hover img {
    transform: scale(1.05); /* Zoom sutil */
}

.flota-item:hover .item-overlay {
    transform: translateY(0); /* Muestra el overlay */
}

#flota .section-title {
    /* Si quieres el título muy pegado al carrusel: */
    margin-top: 0; 
    /* ... */
}

/*
====================================
ADAPTABILIDAD DE LA GALERÍA
====================================
*/

@media (max-width: 968px) {
    .flota-grid {
        /* En tabletas y móviles, volvemos a una cuadrícula más simple de 2 columnas */
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* La imagen destacada pierde su asimetría en móvil para evitar espacios raros */
    .flota-item.featured {
        grid-column: span 2; /* Sigue ocupando todo el ancho */
        grid-row: span 1; /* Ahora solo ocupa 1 fila (como las demás) */
    }
    
    /* Mostrar el overlay por defecto en móvil para que el título sea visible */
    .item-overlay {
        transform: translateY(0);
        font-size: 0.9em;
    }
    
    .flota-item:hover img {
        transform: none; /* Quitamos el zoom en móvil para evitar problemas de scroll */
    }
}

@media (max-width: 968px) {
    .flota-grid {
        /* En móviles pequeños, volvemos a una sola columna */
        grid-template-columns: 1fr;
    }

    .flota-item.featured {
        grid-column: span 1; 
        grid-row: span 1; 
    }
}

/*
====================================
5. PIE DE PÁGINA (FOOTER)
====================================
*/

.main-footer {
    position: relative;
    padding: 60px 0 0 0; /* Espacio para el contenido */
    color: var(--color-gris-claro);
    overflow: hidden; 
}

/* Contenedor de Imagen de Fondo y Overlay */
.footer-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 1. Imagen de Fondo */
    background-image: url('imagenes/imagenes-index/footer.jpg'); /* ¡IMPORTANTE! Reemplazar con tu imagen */
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.footer-overlay-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 2. Overlay Oscuro (#004364 con 85% de opacidad) */
    background-color: rgba(0, 67, 100, 0.548); 
    z-index: 2; 
}


.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    z-index: 3; /* Sobre el overlay */
    padding-bottom: 40px;
}

.footer-col {
    flex: 1;
}

.footer-title {
    font-size: 1.1em;
    color: var(--color-blanco);
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
}

.footer-col p {
    margin-bottom: 10px;
    text-align: center; 
}

.footer-link {
    color: var(--color-gris-claro);
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--color-acento); /* Acento al pasar el ratón */
}

.footer-link i {
    margin-right: 8px;
    color: var(--color-acento); /* Iconos de contacto en color de marca */
}

.social-links a {
    color: var(--color-gris-claro);
    font-size: 2em;
    /* Eliminamos o ponemos el margen a 0 si solo hay un ícono, o lo centramos: */
    margin: 0; /* Pequeño margen horizontal si hay más íconos después */
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--color-acento);
}

/* CENTRADO: Asegura que los enlaces se centren bajo el título */
.social-links {
    display: flex;             /* Habilita Flexbox */
    justify-content: center;   /* Centra los elementos (los enlaces <a>) horizontalmente */
    width: 100%;               /* Asegura que ocupe todo el ancho disponible */
    padding-top: 5px;          /* Pequeño espacio superior para separarlo del título */
    margin-top: 10px;
}

    
/* Barra de Copyright - REEMPLAZA EL BLOQUE DE COPYRIGHT-BAR */
.copyright-bar {
    font-size: 0.8em;
    padding: 15px 5%; /* Añadimos padding horizontal para que la firma no se pegue al borde. */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    position: relative;
    z-index: 3;
    
    /* 🛑 CAMBIOS CLAVE: Usamos Flexbox para distribuir los textos 🛑 */
    display: flex;
    /* Usamos 'center' para centrar el grupo completo. */
    justify-content: center; 
    align-items: center;
}

/* Regla para el Copyright */
.copyright-bar p {
    /* Mantenemos el párrafo en el centro del flexbox */
    text-align: center;
    color: rgba(255, 255, 255, 0.773);
    /* El truco: Esto crea un margen vacío a la izquierda del copyright
       que equilibra el ancho de la firma que está a la izquierda. */
    margin: 0 auto; 
    padding-left: 10px; /* Pequeño espacio para separarlo de la firma */
}

/* Regla para la Firma del Diseñador */
.designer-signature {
    /* La firma se va a la izquierda del todo */
    margin-right: auto;
    color: rgba(255, 255, 255, 0.773); /* Gris sutil */
    
    /* 🛑 CAMBIO CLAVE:  0.8em 🛑 */
    font-size: 1em; 
    
    /* Lo volvemos a un tamaño normal para que no se corra el centro */
    flex-shrink: 0; 
}

/* 🛑 REGLA ADICIONAL NECESARIA 🛑 */
/* En móvil, ponemos todo centrado en dos líneas */
@media (max-width: 968px) {
    .copyright-bar {
        flex-direction: column; /* Apila los elementos */
        gap: 5px;
    }
    .copyright-bar p {
        margin: 0; /* Desactiva el truco de margen en móvil */
        padding-left: 0;
    }
    .designer-signature {
        margin: 0; /* Desactiva el truco de margen en móvil */
    }
}

/*
====================================
6. CHAT FLOTANTE
====================================
*/

/* 2.1 ESTILOS DEL BOTÓN FLOTANTE EN ESCRITORIO*/
.whatsapp-float {
    position: fixed;               /* Fijo en la pantalla */
    width: 80px;
    height: 80px;
    bottom: 50px;                  /* Distancia desde abajo */
    right: 20px;                   /* Distancia desde la derecha */
    background-color: #25D366;     /* Color de WhatsApp */
    color: #FFF;
    border-radius: 50px;           /* Círculo perfecto */
    text-align: center;
    font-size: 35px;               /* Tamaño del ícono */
    line-height: 80px;             /* Centra verticalmente el ícono */
    z-index: 1000;                 /* Asegura que esté por encima de todo */
    box-shadow: 2px 2px 3px #999;
    /* La animación se define en el @keyframes */
    animation: heartbeat 1.5s infinite; /* Aplica la animación */
}

/* 2.2 ESTILOS DEL MENSAJE TEMPORAL */
.whatsapp-message {
    visibility: hidden;           /* Oculto por defecto */
    width: 180px;
    background-color: #0b1c2b;    /* Fondo oscuro para el mensaje */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 15px;
    position: absolute;
    z-index: 1001;
    bottom: 25px;                 /* Posición ligeramente encima del botón */
    right: 80px;
    opacity: 0;                   /* Totalmente transparente por defecto */
    transition: opacity 0.5s, visibility 0s;
    font-size: 0.9em;
    line-height: 1.2;
}

/* 2.3 DEFINICIÓN DE LA ANIMACIÓN DE LATIDO */
@keyframes heartbeat {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); /* Sombra inicial */
    }
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); /* El pulso se expande */
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); /* Vuelve al inicio */
    }
}

/* --- BOTÓN FLOTANTE DE LLAMADA --- */
.call-float {
    position: fixed;
    bottom: 100px; 
    right: 20px;
    width: 70px; /* alto */
    height: 70px; /* ancho */
    background-color: #2185F5; 
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 70px; 
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 10000; 
    transition: all 1.5s ease;

    /* 🛑 CÓDIGO CLAVE PARA ACTIVAR LA ANIMACIÓN 🛑 */
    animation: call-pulse 1.5s ease-in-out infinite;
    /* ------------------------------------------------ */
}
.call-float i {
    /* Mantenemos la reflexión horizontal en el ícono */
    transform: scaleX(-1); 
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Estilo para el mensaje de texto que sale al hacer hover */
.call-message {
    position: absolute;
    right: 80px; /* Posiciona el mensaje a la izquierda del botón */
    top: 50%;
    transform: translateY(-50%);
    background-color: #004364;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 30px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity 0.3s ease;
}

/* 2.4 DEFINICIÓN DE LA ANIMACIÓN DE PULSO  */
@keyframes call-pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.7); /* Sombra  */
    }
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); 
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); 
    }
}

/* Efecto Hover: Muestra el mensaje */
.call-float:hover .call-message {
    opacity: 1;
    visibility: visible;
}

/* Sombra del ícono para mejor visibilidad */
.call-float i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/*
====================================
7. ESTILOS PARA INTERACTIVIDAD JS
====================================
*/

/* Estilo para la barra de navegación cuando es "sticky" */
.navbar.sticky {
    position: fixed; /* Lo fija en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    /* Un fondo sólido es clave para que los enlaces se lean bien sobre el contenido */
    background-color: var(--color-negro-azulado); 
    padding: 10px 5%; /* Menos padding vertical para hacerlo más compacto */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 100; /* Asegura que esté siempre encima de todo */
}

.navbar.sticky .nav-link.active-link {
    color: var(--color-acento) !important;
}

/*
====================================
8. ADAPTABILIDAD (RESPONSIVE DESIGN)
====================================
*/

/* Media Query para Tabletas y Móviles (Ancho máximo de 968px) */
@media (max-width: 968px) {
    
    /* === 8.1. Contenedor General === */
    .container {
        width: 95%; /* Usamos más ancho disponible en móviles */
    }
    
    /* === 8.2. Header y Navegación === */
    .navbar {
        flex-direction: row; /* Coloca logo y hamburguesa en fila */
        justify-content: space-between; 
        align-items: center;
    }
    
    /* 1. Muestra el botón de hamburguesa */
    .hamburger-menu {
        display: block; 
        position: relative;
        top: auto; 
        right: auto;
        z-index: 101; 
        border: none;
        background: none;
        /* AUMENTA EL ÁREA DE CLIC: Haz este valor grande (ej: 15px) */
        padding: 15px; 
    }

    /* NUEVA REGLA (o modificar la existente) PARA EL ÍCONO DENTRO DEL BOTÓN */
    .hamburger-menu i {
        /* AUMENTA EL TAMAÑO VISUAL: Haz el ícono más grande (ej: 2.5em) */
        font-size: 2.5em; /* Valor sugerido para que se vea bien en móvil */
        color: var(--color-blanco);
    }
    
/* 2. Ocultar enlaces en línea y preparar para modo menú vertical */
.nav-links {
    display: none;
    flex-direction: column;
    
    /* REVERSIÓN DE TAMAÑO Y POSICIÓN */
    position: absolute;
    top: 100px;
    left: auto;
    right: 0;
    
    /* CAMBIO CLAVE: Aumentar el ancho */
    width: 80%; /* <-- Mantenemos el ancho del 80% */
    
    height: auto;
    padding-top: 0;
    
    background-color: var(--color-negro-azulado);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
    z-index: 99;

    /* MANTENEMOS LA ANIMACIÓN DE SLIDE */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

/* 3. Clase para mostrar el menú (activada por JS) */
.nav-links.active {
    display: flex;
    transform: translateX(0); /* Se desliza a su posición visible */
}

/* 🛑 REGLA MODIFICADA: AUMENTAR EL ÁREA DE CLIC 🛑 */
.nav-link {
    /* ¡CLAVE! Hace que el enlace ocupe todo el ancho y alto definido por el padding */
    display: block;
    
    /* Ajustes para que encajen en el 80% */
    padding: 10px 0; /* Aumenta el espacio superior e inferior (buen tamaño para el dedo) */
    width: 80%; /* Asegura que ocupe todo el ancho del .nav-links */
    
    text-align: center;
    padding-left: 0;
    font-size: 1.5em;
    
    /* Opcional: Para mejorar la separación visual entre enlaces */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
    
    /* === 8.3. Contenido Principal (Héroe) === */
    .hero-content {
        padding: 100px 0 50px 0; 
    }

    .hero-title {
    /* ... (Propiedades de color y font-family existentes) ... */
    
    font-size: 3.2em; /* Mantenemos el tamaño que ajustaste */
    
    /* CAMBIO CLAVE: Usa 600 */
    font-weight: 600; 
    
    line-height: 1.2;
    /* ... (Resto de las propiedades) ... */

    color: var(--color-blanco);
    margin-bottom: 40px;

}

    .hero-buttons {
        flex-direction: column; /* Apilamos los botones uno sobre otro */
        gap: 15px;
    }

    .btn {
        width: 80%; /* Damos más ancho a los botones */
        margin: 0 auto;
        padding: 15px 20px;
        font-size: 1em;
    }

    /* === 8.4. Sección "Quiénes Somos" === */
    .section-quienes-somos {
    background-color: var(--color-blanco); /* Fondo BLANCO para legibilidad */
    padding: 80px 0;
    position: relative; /* Importante para que el fondo no se "escape" */
    z-index: 1;
}

    .section-title {
        font-size: 1.5em;
    }
    
    /* === 8.5. Sección Servicios === */
    .servicios-grid {
        /* En móviles, las 3 columnas se convierten en 1 columna apilada */
        grid-template-columns: 1fr; 
    }
    .servicio-card p {
        min-height: auto; /* Removemos la altura mínima en móviles */
    }

    /* === 8.6. Pie de Página (Footer) - Centrado === */
    .footer-content {
        flex-direction: column; 
        gap: 40px;
        padding-bottom: 20px;
        text-align: center; /* ¡Centra el texto del contenido del footer! */
    }

    .footer-col {
        flex: none; 
        width: 100%;
    }
    
    
    
    /* Centra el copyright */
    .copyright-bar {
        text-align: center;
    }
    
    /* === 8.7. Chat Flotante Whatsapp en Teléfonos === */
    .whatsapp-float {
        /* CORRECCIÓN DE TAMAÑO: Hacemos el botón un poco más grande */
        width: 70px; 
        height: 70px;
        /* CORRECCIÓN DE FONT-SIZE: Este era el error que hacía que el ícono se viera GIGANTE */
        font-size: 28px; 
        line-height: 65px; /* Ajustamos el line-height al nuevo height */
        bottom: 20px;
        right: 20px;
    }

    /* 🛑 REGLA CLAVE: Ajustar el mensaje para que sea más pequeño solo en móviles 🛑 */
    .whatsapp-message {
        width: 150px;       /* Más compacto para teléfonos */
        padding: 8px 10px;  
        font-size: 0.8em;   
        bottom: 15px; 
        right: 70px;
    }

    .form-group {
    width: 100%; /* Todos los campos se apilan a ancho completo en móvil */
    margin-bottom: 15px;
    }
}

/* Contenedor para alinear los botones debajo de las tarjetas */
.servicios-cta-buttons {
    /* Centra los elementos a nivel de bloque (si usas flex en el contenedor principal, puede que necesites 'margin: 0 auto;') */
    text-align: center; 
    margin-top: 50px; /* Espacio para separarlos de las tarjetas */
    display: flex; /* Para que los botones se muestren uno al lado del otro */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 20px; /* Espacio entre el botón de WhatsApp y el de Llamada */
    flex-wrap: wrap; /* Para que se apilen en dispositivos pequeños */
}

/* Opcional: Estilos para que los botones sean un poco más grandes y se destaquen */
.btn-whatsapp-lg,
.btn-call-outline-lg {
    padding: 18px 40px; 
    font-size: 1.3em;
    min-width: 250px; /* Asegura un ancho mínimo para que se vean bien */
    display: inline-flex; /* Para centrar el texto y el icono dentro del botón */
    align-items: center;
    justify-content: center;
}

/* ======================================= */
/* ESTILO ESPECÍFICO PARA BOTONES DE CONTACTANOS */
/* ======================================= */

/* Aplica el color verde de WhatsApp al fondo y al borde */
.btn-whatsapp-lg {
    background-color: #25D366 !important; /* Verde oficial de WhatsApp */
    border-color: #128C7E !important;     /* Borde del mismo color */
    color: #ffffff !important;           /* Texto blanco para máximo contraste */
}

/* Efecto al pasar el ratón (Hover) */
.btn-whatsapp-lg:hover {
    background-color: #128C7E !important; /* Un tono un poco más oscuro al pasar el ratón */
    border-color: #25D366 !important;
}

/* Opcional: Asegurar que el icono también sea blanco */
.btn-whatsapp-lg i {
    color: #ffffff !important;
}

/* ======================================= */
/* TAMAÑO PEQUEÑO PARA BOTONES (Ej. en el header) */
/* ======================================= */
.btn-sm {
    padding: 15px 20px; /* Menos relleno (padding) */
    font-size: 1em; /* Fuente un poco más pequeña que el valor por defecto */
    min-width: auto; /* Anula cualquier ancho mínimo que pueda tener un botón más grande */
    display: inline-flex;       /* Habilita Flexbox, usando inline para no ocupar todo el ancho disponible */
    justify-content: center;    /* Centra el ícono y el texto horizontalmente */
    align-items: center;        /* Centra el ícono y el texto verticalmente (buena práctica) */
}

/* Opcional: Ajustar el tamaño del icono y su ESPACIO dentro del botón pequeño */
.btn-sm i {
    font-size: 1.4em;
    margin-right: 8px; /* ¡ESTA ES LA REGLA QUE SEPARA EL ÍCONO DEL TEXTO! */
}

/* ======================================= */
/* ESTILO ESPECÍFICO PARA BOTONES DE WHATSAPP */
/* ¡Debe usar !important para anular a .btn-primary! */
/* ======================================= */

.btn-whatsapp {
    background-color: #25D366 !important; 
    border-color: #128C7E !important;     
    color: #ffffff !important; 
    border-style: solid !important; 
    border-width: 2px !important;             
}

.btn-whatsapp:hover {
    background-color: #128C7E !important; 
    border-color: #00ff5e !important;
}

/* Opcional: Asegurar que el icono también sea blanco */
.btn-whatsapp i {
    color: #ffffff !important;
}

/* ======================================= */
/* ESTILOS Y POSICIONAMIENTO DEL BOTÓN "VOLVER ARRIBA" */
/* ======================================= */

.back-to-top {
    position: fixed;            /* Fijo en la pantalla */
    width: 60px;                /* Un poco más pequeño que el de WhatsApp */
    height: 60px;
    bottom: 40px;               /* Misma distancia desde abajo que el de WhatsApp */
    left: 20px;                 /* 🛑 POSICIÓN INFERIOR IZQUIERDA 🛑 */
    background-color: var(--color-petroleo); /* Color corporativo oscuro */
    color: var(--color-blanco);
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;          /* Centra verticalmente el ícono */
    z-index: 999;               /* Un z-index alto, pero debajo del WhatsApp (1000) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;                 /* 🛑 Oculto por defecto 🛑 */
    visibility: hidden;         /* Oculto por defecto */
    transition: opacity 0.3s, visibility 0.3s;
}

/* El botón se hace visible (opacidad 1) cuando la clase 'show' se activa por JS */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-acento); /* Color de acento al pasar el ratón */
}

/* ======================================= */
/* ESTILOS DEL PRELOADER */
/* ======================================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-negro-azulado); /* Color de fondo */
    z-index: 99999;
    
    /* 🛑 IMAGEN DE ESCRITORIO (GIF 1920x1080) 🛑 */
    background-image: url('imagenes/imagenes-index/gif-h.gif'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Esto hará que se ajuste bien al ancho */

    opacity: 1;
    visibility: visible;
    transition: opacity 2s ease-out, visibility 2s ease-out; 
}

/* ======================================= */
/* MEDIA QUERY PARA MÓVILES */
/* ======================================= */
@media (max-width: 968px) {
    /* 🛑 ANULA la imagen de escritorio y PONE la imagen de MÓVIL 🛑 */
    #preloader {
        background-image: url('imagenes/imagenes-index/gif-v.gif'); 
        /* Puedes usar contain para asegurar que se vea todo el gif, si no es una imagen de fondo */
        background-size: contain; 
    }
}

/* 🛑 AÑADE ESTE ESTILO PARA TU PROPIA IMAGEN 🛑 */
.preloader-logo {
    width: 1700px !important;  /* Prueba con 300px o el tamaño que necesites */
    height: auto !important;   /* Crucial para evitar que se distorsione */
    animation: pulse 4s infinite; /* Opcional: añade una animación de pulso sutil */
}

/* Opcional: Animación de pulso para tu logo */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Clase para ocultar el preloader */
#preloader.loaded {
    opacity: 1;
    visibility: hidden;
}

/* 🛑 APLICA LA REGLA AL ENLACE Y A LA IMAGEN DENTRO 🛑 */
.logo, .logo-img {
    -webkit-user-drag: none; /* CLAVE para navegadores Chromium (Brave) */
    user-drag: none;
    user-select: none;       /* Impide la selección de texto que interfiere con el arrastre */
}

/* ======================================= */
/* 1. ANIMACIÓN DE ENTRADA - ESTADO INICIAL */
/* ======================================= */

/* TÍTULO HERO (hero-title) - Estado inicial */
.hero-title { 
    opacity: 0; 
    transform: scale(0.7);
    pointer-events: none; 
}

/* 🛑 REGLAS ESPECÍFICAS PARA LOS BOTONES DENTRO DE .hero-buttons 🛑 */

/* BOTÓN WHATSAPP (Afecta solo al Hero) */
.hero-buttons .btn-whatsapp { 
    opacity: 0;
    pointer-events: none;
}

/* BOTÓN SECUNDARIO (Llamar/Cotizar - Afecta solo al Hero) */
.hero-buttons .btn-secondary { 
    opacity: 0;
    pointer-events: none; 
}

/* --- DEFINICIÓN DE KEYFRAMES --- */

/* Keyframe para el Título: Crece hasta su tamaño normal */
@keyframes title-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keyframe para el Botón Izquierdo (WhatsApp) */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto; /* 🛑 RESTABLECE LA INTERACCIÓN 🛑 */
    }
}

/* Keyframe para el Botón Derecho (Llamar/Cotizar) */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto; /* 🛑 RESTABLECE LA INTERACCIÓN 🛑 */
    }
}

/* --- CLASES DE ACTIVACIÓN (Aplicadas por JavaScript) --- */

.animate-in { /* Para el hero-title */
    animation: title-scale-in 1s ease-out forwards;
}

.animate-slide-left { /* Para el botón izquierdo */
    animation: slide-in-left 0.8s ease-out forwards;
}

.animate-slide-right { /* Para el botón derecho */
    animation: slide-in-right 0.8s ease-out forwards;
}

/* Nuevo Keyframe para la Animación de Salida del Título */
@keyframes title-scale-out {
    /* Desde donde termina la animación de entrada (normal) */
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    /* El título desaparece y se mueve hacia arriba (la animación dura 1 segundo) */
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}

/* La clase de activación (reemplaza la anterior que usaba 'transition') */
.hero-title.animate-out {
    animation: title-scale-out 1s ease-in forwards; /* La animación de salida dura 1s */
    pointer-events: none; /* Asegura que el espacio no se pueda clickear */
}

/* 🛑 AJUSTE DE POSICIÓN PARA ESCRITORIO (Mayores a 968px) 🛑 */
/* Aplicar estilos solo a pantallas grandes (PC/Escritorio) */
@media (min-width: 968px) {
    
    .call-float {
        /* Aumentamos la distancia del borde inferior */
        /* Si 90px es la altura de móvil, probemos con 110px o 120px para PC */
        bottom: 150px; /* Ajusta este valor si es necesario */
        right: 25px;
    }
}

/* ====================================
    ESTILOS PARA EL CARRUSEL SWIPER
==================================== */

.section-carousel-flota {
    /* Eliminamos el padding para que el carrusel ocupe todo el ancho */
    padding: 0; 
    /* Separación con la sección de Flota que está debajo */
    margin-bottom: 0px; 
    background-color: #ecebeb;
}

/* El contenedor principal de Swiper */
.main-slider {
    width: 100%;
    /* Altura mínima para evitar que se vea muy pequeño, puedes ajustarla */
    min-height: 250px; 
}

/* Aseguramos que las imágenes del carrusel ocupen todo el espacio del slide */
.main-slider img {
    width: 100%;
    /* Mantiene las proporciones y cubre el área. Puede cortar bordes. */
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/* ---------------------------------------------------- */
/* AJUSTES OPCIONALES DE ESTILO DE SWIPER */
/* ---------------------------------------------------- */

/* Estilo para los puntos (Pagination Dots) */
.swiper-pagination-bullet {
    background: var(--color-petroleo); /* Puntos de navegación blancos */
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #007bff; /* Color de tu acento (azul) para el punto activo */
    opacity: 1;
}

/* Estilos para las flechas de navegación (solo para visibilidad en modo oscuro) */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-petroleo); /* Flechas blancas */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para que destaquen */
}

/* ====================================
8.2 ESTILOS PARA LA LEYENDA (CAPTION)
==================================== */

/* Contenedor del Slide: Debe ser 'relative' para que el 'caption' se posicione correctamente */
.swiper-slide {
    position: relative; 
}

/* Estilo para el texto de la leyenda */
.slide-caption {
    position: absolute;
    bottom: 0; /* Lo posiciona en la parte inferior de la imagen */
    left: 0;
    width: 100%;
    
    /* Fondo semi-transparente para que el texto se lea bien */
    background-color: #ecebeb00; 
    color: #ffffff; 
    padding: 10px 20px; /* Espacio interno */
    box-sizing: border-box; /* Asegura que el padding no cambie el width */
    z-index: 10; /* Asegura que esté sobre la imagen */
}

/* Eliminar el margen por defecto del párrafo dentro de la leyenda */
.slide-caption p {
    margin: 0;
    font-size: 1.1em;
    text-align: center;
}

/* 🛑 MEDIA QUERY PARA PANTALLAS GRANDES / ESCRITORIO (a partir de 1025px) 🛑 */
@media screen and (min-width: 1025px) {
    
    /* 1. Seleccionamos la imagen dentro del contenedor principal de Swiper */
    .main-slider img {
        /* Define el ancho máximo que tendrá la imagen. */
        /* Ajusta este valor (ej. 1000px, 900px, etc.) según tu gusto. */
        max-width: 600px; 
        
        /* Asegura que la altura se ajuste automáticamente para no deformarla */
        height: auto;
        
        /* Centra la imagen si el max-width es menor que el ancho de la pantalla */
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}