/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN BASE (RESET)
   ========================================================================== */
:root {
    --primary-blue: #002855;     /* Azul Marino del logo */
    --primary-green: #3B8E30;    /* Verde de la flecha y palabra LOGÍSTICA */
    --accent-yellow: #F2B705;    /* Amarillo/Dorado decorativo inferior */
    --dark-neutral: #1a2530;     /* Gris muy oscuro para textos */
    --light-bg: #f4f7fa;         /* Fondo gris claro limpio */
    --white: #ffffff;
    --gray: #6c7a89;             /* Gris para subtítulos secundarios */
    --border-color: #d1d9e0;
}

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

body {
    background-color: var(--white);
    color: var(--dark-neutral);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Empuja el footer hacia abajo si hay poco contenido */
}

main {
    flex: 1;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   2. COMPONENTES GLOBALES (BOTONES Y TÍTULOS)
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* .btn-primary {
    background-color: var(--primary-green);
    color: var(--white);
    border-bottom: 3px solid #296422;
}

.btn-primary:hover {
    background-color: #327828;
    transform: translateY(-2px);
} */

.btn-primary {
    display: inline-block;
    padding: 18px 45px;
    background: linear-gradient(45deg, #FF9800, #FF5722); /* Degradado Naranja vibrante */
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 50px; /* Botón totalmente redondeado para estilo moderno */
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0px 10px 20px rgba(255, 87, 34, 0.4); /* Sombra de color */
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #FF5722, #FF9800);
    transform: translateY(-5px) scale(1.05); /* Salta y crece un poco */
    box-shadow: 0px 15px 30px rgba(255, 87, 34, 0.6); /* Sombra más intensa */
}

.section-title {
    text-align: center;
    margin: 50px 0 30px;
}

.section-title h2 {
    font-size: 32px;
    color: var(--primary-blue);
    margin-bottom: 5px;
    font-weight: 700;
}

.section-title p {
    color: var(--primary-green);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   3. CABECERA Y NAVEGACIÓN (LOGO IMAGEN + TEXTO AL LADO)
   ========================================================================== */
.main-header {
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 40, 85, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Contenedor del enlace del logo */
.logo a {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio exacto entre la imagen y el bloque de texto */
    text-decoration: none;
}

/* Tamaño del isotipo de la imagen */
.logo-img-side {
    height: 55px; /* Altura ideal en barra de navegación */
    width: auto;
    display: block;
}

/* Bloque tipográfico con estilo del logo */
.logo-text-side {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-family: 'Arial Black', Gadget, sans-serif;
}

.logo-text-side .text-top {
    color: var(--primary-blue);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.logo-text-side .text-bottom {
    color: var(--primary-green);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.logo-text-side .text-sub {
    color: var(--primary-blue);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 4.5px; /* Simula la expansión de la palabra IMPORT */
    text-align: center;
    border-top: 2px solid var(--primary-blue);
    border-bottom: 2px solid var(--accent-yellow); /* Línea decorativa dorada */
    padding: 1px 0;
    margin-top: 2px;
}

/* Menú de navegación */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 16px;
    padding: 8px 0;
    transition: color 0.3s ease;
    position: relative;
}

.main-nav a:hover, 
.main-nav a.active {
    color: var(--primary-green);
}

.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-green);
}



/* ==========================================================================
   4. PÁGINA DE INICIO (INDEX.PHP)
   ========================================================================== */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 450px;
    overflow: hidden;
    background-color: var(--primary-blue);
    border-bottom: 5px solid var(--accent-yellow);
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Estado base oculto por defecto */
.slide {
    position: relative;/*absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: none; 
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    z-index: 1;
    
}
/* Capa oscura encima de la foto */
.slide::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Oscurece un 40% la foto */
    z-index: 1;
}

/* Estado activo visible con animación Fade (Desvanecimiento) */
.slide.active {
    display: flex;
    z-index: 2;
    animation: fadeEffect 1.5s ease-in-out forwards;
}

/* Contenido interno del banner */
.hero-content {
    max-width: 900px; /* Un poco más ancho para mejorar la lectura */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Aseguramos que todo esté centrado */
    position: relative;
    z-index: 2; /* Asegura que el texto quede encima del filtro */
}

/* Animación sutil */
.slide.active .hero-content h1 {
    animation: fadeInUp 0.8s ease forwards;
}

.slide.active .hero-content p {
    animation: fadeInUp 0.8s ease forwards 0.3s;
}

/* Título con Estilo Impactante */
.hero-content h1 {
    font-size: 56px;           /* Tamaño más grande para resaltar */
    margin-bottom: 25px;
    font-weight: 800;          /* Más grueso para ganar impacto */
    line-height: 1.1;          /* Más cerrado para que se vea compacto */
    text-transform: uppercase; /* Estilo de título fuerte */
    letter-spacing: -1.5px;    /* Ajuste elegante entre letras */
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Sutil sombra para legibilidad sobre fotos */
}

/* Párrafo con mejor legibilidad */
.hero-content p {
    font-size: 20px;           /* Ligeramente más grande */
    font-weight: 400;
    margin-bottom: 40px;

    opacity: 0.95;
    line-height: 1.5;
    max-width: 700px;          /* Limitamos el ancho para que no sea muy largo */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 36px;       /* Ajuste para que no desborde en el celular */
    }
    .hero-content p {
        font-size: 16px;
    }
}

/* Indicadores de posición (Los botones/puntitos redondos) */
.carousel-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active, .dot:hover {
    background-color: var(--accent-yellow);
    transform: scale(1.2);
}

/* --- ANIMACIONES REQUERIDAS PARA EL EFECTO --- */
@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Sección Identidad: Estilo Moderno --- */


.identity-section {
    padding: 60px 0;
}

/* Estilo para los bloques de Misión */
.mission-box {
    background: #ffffff;
    padding: 30px;
    margin: 20px 0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombra suave */
    border-left: 6px solid #FF9800; /* Borde naranja llamativo */
    transition: transform 0.3s ease;
}

.mission-box:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}

.standards-notice{
    text-align: center;
    color: var(--primary-blue);
}





/* Contenedor flexible para dividir en 2 columnas */
/* --- Sección Identidad: Estilo Novedoso --- */
.identity-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.identity-wrapper {
    display: flex;
    align-items: center; /* Alinea verticalmente texto e imagen */
    gap: 50px; /* Espacio entre columnas */
    margin-top: 50px;
}

/* --- Lado Izquierdo: Texto --- */
.identity-text {
    flex: 2; /* Ocupa 2/3 del espacio */
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mission-box {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    /* Borde naranja llamativo (puedes usar tu variable --primary-orange) */
    border-left: 8px solid #FF9800; 
    /* Sombra suave por defecto */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.mission-box:hover {
    transform: translateX(10px); /* Pequeño movimiento al pasar el mouse */
}

/* --- Lado Derecho: Imagen con Estilo "Flotante" --- */
.identity-image {
   /* flex: 1; /* Ocupa 1/3 del espacio */
   /* position: relative;
    /* Forma asimétrica moderna */
    /*border-radius: 60px 20px 60px 20px; 
    overflow: hidden;
    /* Sombra profunda (Key Visual) */
   /* box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;*/


 width: 50%;
    height: 100%;
    overflow: hidden;
    /* Corte diagonal moderno y estructurado */
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
    /* Sombra técnica, más nítida que la anterior */
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.2);
    /* Transición de crecimiento suave */
    transition: transform 0.6s ease;
}

.identity-image img {
    /*width: 100%;
    height: 450px; /* Altura fija para controlarla */
    /*object-fit: cover; /* Asegura que la foto no se estire */
   /* display: block;*/


    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Filtro profesional */
    filter: brightness(1.05) contrast(1.05);
}

.identity-image:hover {
    /*transform: scale(0.98);
   /* transform: translateY(-10px); /* La imagen "sube" al hacer hover */
   /* box-shadow: 30px 30px 60px rgba(0, 0, 0, 0.2); /* La sombra se agranda */


   transform: scale(1.03); /* Crecimiento contenido, serio */

}

/* --- Responsivo para Móviles --- */
@media (max-width: 768px) {
    .identity-wrapper {
        flex-direction: column; /* Pone la imagen arriba y el texto abajo */
    }
    
    .identity-text, .identity-image {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .identity-image {
        height: 300px;
        border-radius: 30px; /* Menos curva en móvil */
    }
    
    .identity-image img {
        height: 300px;
    }
}




/* --- Sección Valores: Tarjetas "Glassmorphism" --- */
.values-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f0f4f8, #e2e8f0); /* Fondo degradado suave */
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.value-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 20px;
    text-align: center;
    border-top: 5px solid /* rgba(0, 0, 0, 0.1) */ /*var(--primary-blue)*/ var(--accent-yellow);
    border-left: 0.05px solid  rgba(0, 0, 0, 0.1) ;
    border-right: 0.05px solid  rgba(0, 0, 0, 0.1) ;
    border-bottom: 0.05px solid  rgba(0, 0, 0, 0.1) ;
    transition: all 0.4s ease;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
}

.value-card:hover {
    background: #001f3f; /* Color oscuro al pasar el mouse */
    color: #ffffff;
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 31, 63, 0.2);
    border-top: 5px solid #001f3f;
}

/* El icono que crece */
.value-icon {
    font-size: 50px;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.2) rotate(10deg);
}

/* Títulos de sección más elegantes */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    color: #001f3f;
    letter-spacing: 1px;
}

/* ==========================================================================
   5. PÁGINA DE SERVICIOS (SERVICIOS.PHP) - CON TRANSICIONES E INTERACTIVIDAD
   ========================================================================== */
.page-header {
 background-color: var(--primary-blue); /* Cambiado a Azul Marino */
    padding: 60px 0;
    text-align: center;
    border-bottom: 5px solid var(--accent-yellow); /* Línea inferior dorada decorativa */
    opacity: 0;
    animation: serviciosFadeIn 0.8s ease forwards;
}

.page-header h1 {
    font-size: 36px;
    color: var(--white);
    margin-bottom: 10px;
}

.page-header p {
    color: var(--white);
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
}

.services-grid-section {
    padding: 60px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Tarjeta base con transición de entrada y elevación */
.service-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 40, 85, 0.05);
    border: 1px solid #eef2f5;
    opacity: 0; /* Oculto inicialmente para la animación */
    animation: serviciosSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* EFECTO CASCADA: Retraso de animación individual para que aparezcan en orden */
.services-grid .service-card:nth-child(1) { animation-delay: 0.1s; }
.services-grid .service-card:nth-child(2) { animation-delay: 0.2s; }
.services-grid .service-card:nth-child(3) { animation-delay: 0.3s; }
.services-grid .service-card:nth-child(4) { animation-delay: 0.4s; }
.services-grid .service-card:nth-child(5) { animation-delay: 0.5s; }
.services-grid .service-card:nth-child(6) { animation-delay: 0.6s; }

/* Efecto hover interactivo en la tarjeta */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 40, 85, 0.12);
    border-color: var(--primary-green);
}

/* Contenedor de la Imagen con efecto Zoom */
.service-img-placeholder {
    height: 200px; /* Altura optimizada */
    width: 100%;
    overflow: hidden; /* Corta la imagen sobrante al hacer zoom */
    position: relative;
    background-color: var(--primary-blue);
}

.service-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen perfectamente */
    transition: transform 0.5s ease; /* Transición suave del zoom */
}

/* Al pasar el cursor sobre la tarjeta, la imagen interna se agranda un poco */
.service-card:hover .service-img-placeholder img {
    transform: scale(1.08);
}

.service-body {
    padding: 25px;
}

.service-body h3 {
    color: var(--primary-blue);
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 700;
}

.service-body p {
    color: var(--dark-neutral);
    font-size: 15px;
    line-height: 1.5;
}

/* --- DETONADORES DE ANIMACIÓN PARA SERVICIOS --- */
@keyframes serviciosFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes serviciosSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   6. PÁGINA DE CONTACTO (CONTACTO.PHP)
   ========================================================================== */
/* Franja/Banner azul superior exclusivo de la página de contacto */
.contact-banner {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 20px 0;
    text-align: center;
    border-bottom: 4px solid var(--accent-yellow);
    opacity: 0;
    animation: contactoFadeIn 0.8s ease forwards;
}

.contact-banner h1 {
    font-size: 28px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 60px;
    padding: 60px 0;
    align-items: center;
    overflow: hidden; /* Evita scrolls laterales durante la animación */
}

/* Bloque Izquierdo (Información) con transición desde la izquierda */
.contact-info {
    opacity: 0;
    animation: contactoEntradaIzquierda 1s ease forwards;
    animation-delay: 0.2s;
}

.contact-info h2 {
    font-size: 36px;
    color: var(--primary-blue);
    margin-bottom: 10px;
}

.contact-info .subtitle {
    font-size: 18px;
    color: var(--primary-green);
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--black);
    margin-bottom: 30px;
}

/* Caja de llamada a la acción con transición al pasar el cursor */
.cta-box {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 20px;
    border-radius: 4px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 4px solid var(--accent-yellow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 40, 85, 0.15);
}

/* Bloque Derecho (Formulario) con transición desde la derecha */
.contact-form-wrapper {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 40, 85, 0.08);
    border: 1px solid #eef2f5;
    opacity: 0;
    animation: contactoEntradaDerecha 1s ease forwards;
    animation-delay: 0.4s;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--primary-blue);
}

/* Inputs con transición al hacer foco */
.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 15px;
    background-color: #f8fafc;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(59, 142, 48, 0.15);
}

/* Botón de envío con transición de color y clic */
.btn-submit {
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-bottom: 3px solid #001833;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
    background-color: #001d3d;
    transform: translateY(-1px);
}

.btn-submit:active {
    transform: translateY(1px);
}

/* --- DETONADORES DE LAS TRANSICIONES (KEYFRAMES) --- */
@keyframes contactoFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes contactoEntradaIzquierda {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes contactoEntradaDerecha {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   7. PIE DE PÁGINA (FOOTER.PHP)
   ========================================================================== */
.main-footer {
    background: var(--primary-blue);
    color: var(--white);
    text-align: center;
    padding: 25px 0;
    font-size: 14px;
    border-top: 4px solid var(--accent-yellow);
}

.footer-content p {
    opacity: 0.9;
}

.footer-content strong {
    color: var(--white);
}




/* --- Definición de colores --- */
:root {
    --color-amarillo: #FFD700; /* Puedes cambiar este valor por tu tono exacto */
}

/* --- Contenedor Principal del Footer --- */
.main-footer {
    padding: 30px 0;
    background-color: #001f3f; /* Ajusta según el color de fondo de tu web */
    color: #ffffff;
}

/* --- Estructura Flex --- */
.footer-flex-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    width: 100%;
    flex-wrap: wrap; /* Permite que los elementos bajen de línea en móviles */
    gap: 20px;
}

/* --- Lado Izquierdo (Redes) --- */
.footer-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-left p {
    margin: 0;
    font-weight: 500;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Espacio extra para que no se choquen al crecer */
}

/* Efecto Hover: Cambio de color y Zoom */
.social-icons a {
    color: #ffffff;
    transition: all 0.3s ease;
    transform: scale(1);
    display: flex;
}

.social-icons a:hover {
    color: var(--color-amarillo);
    transform: scale(1.3); /* Se agranda un 30% */
}

/* --- Lado Derecho (Copyright) --- */
.footer-center {
   text-align: center; /* Esto centra el texto dentro del bloque */
    margin: 0 auto;    /* Ayuda a centrar el bloque si es necesario */

}

.footer-center p {
    margin: 0;
    font-size: 0.9em;
}

.footer-center span {
    display: block;
    font-size: 0.85em;
    color: #888;
    margin-top: 5px;
}

/* --- Adaptación Responsiva --- */
@media (max-width: 768px) {
    .footer-flex-container {
        flex-direction: column; 
        text-align: center;
    }
    
    .footer-left {
        justify-content: center;
    }
}

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVIDAD MÓVIL)
   ========================================================================== */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 20px; /* Brinda espacio entre el logo mixto y la lista del menú */
        text-align: center;
    }

    .hero h1 {
        font-size: 30px;
    }

    .contact-container {
        gap: 40px;
        padding: 40px 0;
    }

    .contact-form-wrapper {
        padding: 25px;
    }
}


/* ==========================================================================
   9. BOTÓN FLOTANTE DE WHATSAPP (100% NATIVO)
   ========================================================================== */
.whatsapp-boton {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #25d366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 2147483647 !important; /* Valor máximo permitido en navegadores */
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

.whatsapp-boton:hover {
    transform: scale(1.15) !important;
    background-color: #128c7e !important;
}