/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');*/ 
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ----------------------------------- */
/* PALETA DE COLORES (AZUL Y NARANJA) */
/* ----------------------------------- */
:root {
    --color-primary-header-footer: #1E6091; /* Azul Profundo para Header/Footer */
    --color-cta-button: #FF9B54; /* Naranja Principal para Botones y Títulos de Tarjetas */
    --color-cta-button-darker: #E08544; /* Naranja más oscuro para hover CTA */
    --color-accent-title: #FFD580; /* Naranja Claro/Amarillo (Títulos H2, Acentos de Enlaces) */
    --color-text: #333;
    --color-light: #f4f7fa; /* Fondo Gris Claro para secciones alternas como Certificaciones */
    --color-whatsapp: #25d366;
    --content-max-width: 1200px; /* Ancho máximo para el contenido general */
    --color-separator: #eeeeee; /* Gris muy claro para la línea de separación */
}

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

body {
    font-family: 'Roboto', sans-serif;
    color: var(--color-text);
    line-height: 1.7; 
    font-size: 18px; 
    scroll-behavior: smooth;
}

/* BARRA SUPERIOR BLANCA */
header {
    background-color: white; 
    color: var(--color-primary-header-footer); 
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Logo más grande */
.logo img {
    height: 65px; 
    width: auto;
}

.nav-links {
    display: flex;
}

/* Enlaces de navegación en Azul */
.nav-links a {
    color: var(--color-primary-header-footer); 
    text-decoration: none;
    margin-left: 25px; 
    font-weight: 400;
    padding: 5px 10px;
    transition: color 0.3s, border-bottom 0.3s; 
    border-bottom: 2px solid transparent;
}

/* Animación de hover en Naranja principal */
.nav-links a:not(.cta-button):hover {
    color: var(--color-cta-button);
    border-bottom: 2px solid var(--color-cta-button);
}

/* FIX: Soluciona el conflicto con el botón CTA dentro del menú */
.nav-links .cta-button {
    border-bottom: none !important; 
    color: white !important; 
    padding: 8px 15px; 
    margin-left: 15px; 
}
.nav-links .cta-button:hover {
    color: white !important; 
}


/* CLAVE: Contenedor que centra y da el margen/padding horizontal a TODO el contenido */
.content-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 20px; /* Padding horizontal para el margen lateral */
}


/* ESTILO BASE DE SECCIONES: Solo padding vertical y borde inferior */
/* La limitación de ancho y margen la da .content-wrapper */
#servicios-destacados, #servicios-detalles, #ssoma, #contacto, #valores, #certificaciones-calidad {
    padding: 100px 0; /* Solo padding vertical */
    border-bottom: 1px solid var(--color-separator); /* Línea de separación */
}

/* Excluir las secciones parallax, contacto y calidad de la línea de separación inferior */
#inicio, #nosotros, #maquinaria-parallax, #contacto, #certificaciones-calidad {
    border-bottom: none !important;
}

/* ---------------------------------------------------- */
/* ESTILO: Seccción Calidad ahora con fondo AZUL y ancho completo */
#certificaciones-calidad {
    background-color: var(--color-primary-header-footer); /* Fondo azul oscuro, full-width */
    color: white; /* Color de texto blanco para el título de la sección */
}

/* Asegurar que el título sea blanco en la sección azul */
#certificaciones-calidad h2 {
    color: white; 
}

/* Centrar contenido de las tarjetas en esta nueva sección */
#certificaciones-calidad .destacado-card {
    text-align: center;
    background-color: white; /* Las tarjetas se mantienen blancas sobre fondo azul */
    color: var(--color-text); /* CLAVE: Forzar el color de texto oscuro dentro de la tarjeta blanca */
}
/* ---------------------------------------------------- */


/* Estilos para los iconos dentro de las tarjetas de certificación (elegantes) */
.destacado-card i.fas {
    font-size: 3rem; 
    color: var(--color-cta-button); 
    margin-bottom: 15px; 
    display: block;
    width: 100%;
}


/* TÍTULOS H2 EN NARANJA CLARO */
h2 {
    font-size: 2rem; 
    color: var(--color-accent-title); 
    text-align: center;
    margin-bottom: 50px; 
    font-weight: 400;
}


/* TÍTULOS H2 EN NARANJA CLARO */
h2 {
    font-size: 3rem; 
    color: var(--color-accent-title); 
    text-align: center;
    margin-bottom: 50px; 
    font-weight: 400; /* Se mantiene en Negrilla (Bold) */
}

/* ----------------------------------- */
/* AJUSTE DE TARJETAS (SOLO CENTRADO)  */
/* ----------------------------------- */
.destacado-card {
    background-color: white; 
    color: var(--color-text); 
    padding: 50px 30px; 
    border-radius: 8px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 
    border-top: 5px solid var(--color-accent-title); 
    transition: transform 0.3s, box-shadow 0.3s; 

    /* CENTRAR TODO EL CONTENIDO */
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* CENTRAR TÍTULOS H3 */
.destacado-card h3 {
    font-size: 1.8rem; 
    color: var(--color-cta-button); 
    margin-bottom: 15px;
    font-weight: 400;
    text-align: center; /* Título centrado */
}

/* TEXTO CENTRADO (SIN JUSTIFICAR) */
.destacado-card p {
    font-size: 1.15rem;
    text-align: center; /* Alineación centrada simple */
    max-width: 90%;     /* Mantiene un margen cómodo para la lectura */
    margin: 0 auto;     /* Asegura que el bloque del párrafo esté centrado */
}

/* ----------------------------------- */
/* SECCIÓN SERVICIOS DETALLES (.servicio-item) */
/* ----------------------------------- */
.servicio-item h3 {
    color: var(--color-accent-title); /* Títulos en Naranja Claro */
    font-size: 2.25rem; 
    margin-bottom: 15px;
    /* CAMBIO CLAVE: Eliminar la Negrilla de los ítems de servicio */
    font-weight: 400; /* Se establece en Regular/Normal */
}







/* ----------------------------------- */
/* WHATSAPP BOTÓN FLOTANTE (ANIMADO - CORRECCIÓN PARA MOSTRAR TEXTO) */
/* ----------------------------------- */
.whatsapp-float {
    position: fixed;
    height: 65px;
    bottom: 40px;
    right: 40px;
    background-color: var(--color-whatsapp);
    color: #FFF;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    z-index: 2000;
    display: flex;
    align-items: center; /* Alinear verticalmente el contenido */
    text-decoration: none;
    
    /* ESTILOS INICIALES (Solo el ícono) */
    width: 65px; /* Ancho inicial: solo el ícono */
    border-radius: 50%; /* Inicial: círculo */
    overflow: hidden; /* CLAVE: Oculta el texto que se desborda */
    padding: 0 15px; /* Padding para centrar el ícono */
    
    /* Transiciones para la animación profesional */
    transition: transform 0.3s, box-shadow 0.3s, width 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

.whatsapp-float i {
    flex-shrink: 0; /* Asegura que el ícono no se achique al expandirse el botón */
    font-size: 35px; /* Tamaño del ícono */
}

/* Estilo del texto que debe aparecer (siempre visible dentro del width expandido) */
.whatsapp-label {
    font-size: 1.1rem; /* Tamaño de fuente legible */
    font-weight: 600;
    color: white;
    margin-left: 10px;
    white-space: nowrap; /* Evita que el texto salte de línea */
}

.whatsapp-float:hover {
     /* Se eliminan las propiedades de animación para que se quede quieto */
     transform: none; /* Asegura que no se mueva */
     background-color: var(--color-whatsapp); /* Se mantiene el color de fondo */
     /* Se restablece la sombra al valor estático para eliminar el efecto de "brillo" animado */
     box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}
/* ----------------------------------- */


/* ----------------------------------- */
/* BOTONES CTA EN NARANJA PRINCIPAL */
/* ----------------------------------- */
.cta-button {
    background-color: var(--color-cta-button); 
    color: white;
    text-decoration: none;
    padding: 18px 35px; 
    font-size: 1.2rem; 
    font-weight: 700;
    border-radius: 5px;
    display: inline-block; 
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); 
}

.cta-button:hover {
    background-color: var(--color-cta-button-darker); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
}

/* ESPACIO EXTRA PARA EL BOTÓN EN HERO */
#inicio .cta-button {
    margin-top: 10px; 
}

/* ----------------------------------- */
/* KEYFRAMES para animación de entrada en HERO */
/* ----------------------------------- */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}







/* ----------------------------------- */
/* PARALLAX 1: HERO (IMAGEN FIJA)      */
/* ----------------------------------- */
/* 1. Configuración del contenedor Hero */
#inicio {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden; /* Importante para que el video no se salga */
    background-color: #000; /* Fondo de respaldo */
}

/* 2. Capa Azul (Overlay) sobre el video */
#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 150, 200, 0.7); /* El celeste que elegiste anteriormente */
    z-index: 1; /* Por encima del video (z-index 0) */
}

/* 3. Estilo del Video para que cubra todo el fondo */
#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0; /* Al fondo de todo */
    transform: translate(-50%, -50%);
    object-fit: cover;
    display: block; /* Asegúrate de quitar el display: none si existía */
}

/* 4. Contenido de texto */
.parallax-content {
    position: relative;
    z-index: 2; /* Por encima de la capa azul */
    padding: 20px;
    max-width: 900px;
}

/* ----------------------------------- */
/* ESTILO CLAVE PARA EL VIDEO DE FONDO (AJUSTE PARA VIDEO VERTICAL) */
/* ----------------------------------- */
#hero-video {
   position: absolute;
    top: 50%;
    left: 50%;
    
    /* Configuración para cubrimiento (Mantiene la proporción y se adapta) */
    min-width: 100%;  
    min-height: 100%; 
    width: auto;
    height: auto;
    
    z-index: 0; 
    transform: translate(-50%, -50%); 
    
    /* ESTA PROPIEDAD ES CLAVE para mantener la calidad y proporción */
    object-fit: cover;
}




#inicio h1, #inicio .parallax-content p {
    color: white; /* Asegura que el texto del Hero sea blanco */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para mejor legibilidad sobre el video */
}

/* Si desea un overlay (capa oscura) para el texto sea más legible, puede añadirlo aquí */
/* Esto reemplaza el degradado que teníamos en el CSS de Parallax */
#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 150, 200, 0.7); /* Capa negra o azul oscura con 50% de opacidad */
    z-index: 1; /* Queda sobre el video pero bajo el texto */
}

#inicio .parallax-content p {
    font-size: 1.5rem; 
    font-weight: 300; 
    margin-bottom: 50px; 
    animation: slideUpFadeIn 0.9s ease-out 0.6s forwards; 
    opacity: 0;
}

#inicio .parallax-content .cta-button {
    animation: slideUpFadeIn 0.9s ease-out 1.0s forwards; 
    opacity: 0;
}


.destacado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* ESTILO: RECUADROS NARANJA/CLARO */
.destacado-card {
    background-color: white; 
    color: var(--color-text); 
    padding: 50px 30px; 
    border-radius: 8px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 
    border-top: 5px solid var(--color-accent-title); /* Borde con acento Naranja Claro */
    transition: transform 0.3s, box-shadow 0.3s; 
}

.destacado-card:hover {
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 
}

.destacado-card h3 {
    font-size: 1.8rem; 
    color: var(--color-cta-button); /* Título en Naranja Principal */
    margin-bottom: 10px;
}

.destacado-card p {
    font-size: 1.15rem; 
}

/* ----------------------------------- */
/* SECCIÓN NOSOTROS (IMAGEN PARALLAX CON TONO NARANJA) - FULL WIDTH */
/* ----------------------------------- */
#nosotros {
    /* Las imágenes de fondo están referenciadas aquí. Asegúrese de que 'img/olam-background-nosotros.jpg' exista. */
    background-image: linear-gradient(rgba(255, 184, 108, 0.85), rgba(255, 184, 108, 0.85)), url('img/olam-background-nosotros.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Efecto Parallax */
    
    color: white; /* Texto Principal Blanco */
    padding: 100px 0; 
    width: 100%; 
}

/* Contenedor interno para centrar el contenido y aplicar padding lateral */
.nosotros-content-container {
    max-width: var(--content-max-width);
    margin: 0 auto; 
    padding: 0 20px; 
}

#nosotros h2 {
    color: white; /* Título en Blanco sobre el fondo oscuro/colorido */
}

.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
    align-items: center;
}

/* Estilos para los recuadros de estadísticas en la sección naranja suave */
#nosotros .stat-box {
    background-color: transparent; 
    border-left: 6px solid white; 
    font-size: 1.1rem;
    margin-top: 20px;
    box-shadow: none; 
    color: white; 
    padding: 25px;
}

#nosotros .stat-box strong {
    font-size: 2.5rem; 
    color: white; /* Números en Blanco */
}
/* Fin de ajustes en #nosotros */
/* ----------------------------------- */


.servicio-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.servicio-item:nth-child(even) {
    flex-direction: row-reverse;
}

.servicio-item img {
    width: 40%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
    object-fit: cover;
}

.servicio-item .text-content {
    width: 60%;
    padding: 0 50px; 
}

.servicio-item h3 {
    color: var(--color-accent-title); /* Títulos en Naranja Claro */
    font-size: 2.25rem; 
    margin-bottom: 15px;
}

/* ----------------------------------- */
/* PARALLAX 2: MAQUINARIA (FULL WIDTH) - AZUL SUAVE */
/* ----------------------------------- */
#maquinaria-parallax {
    /* Las imágenes de fondo están referenciadas aquí. Asegúrese de que 'img/olam-maquinaria.jpg' exista. */
    background-image: linear-gradient(rgba(135, 206, 235, 0.75), rgba(135, 206, 235, 0.75)), url('img/olam-maquinaria.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: var(--color-primary-header-footer); 
    text-align: center;
    padding: 180px 20px; 
    width: 100%; 
}

/* Aseguramos que los títulos y párrafos dentro de esta sección sean del color azul oscuro */
#maquinaria-parallax h2, #maquinaria-parallax p {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-primary-header-footer);
}

#contacto a {
    color: var(--color-accent-title); /* Enlaces en Naranja Claro */
    text-decoration: none;
}

/* Estilos para listas (SSOMA/Experiencia) */
ul {
    list-style: none;
    padding-left: 0;
}
ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
    margin-bottom: 8px;
}
ul li::before {
    content: "▸"; /* Puntero moderno */
    color: var(--color-cta-button); 
    font-weight: bold; 
    display: inline-block; 
    width: 1.5em;
}

/* ESTILOS POR DEFECTO DEL MENÚ DE HAMBURGUESA (SÓLO PARA DESKTOP) */
.menu-icon {
    display: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--color-primary-header-footer); /* Icono Azul */
    padding: 5px;
}

#menu-toggle {
    display: none; /* Checkbox oculto */
}

/* PIE DE PÁGINA AZUL */
footer {
    background-color: var(--color-primary-header-footer); 
    color: white;
    text-align: center;
    padding: 30px 20px; 
    font-size: 1rem;
}







/* ----------------------------------- */
/* MEDIA QUERIES (RESPONSIVIDAD) */
/* ----------------------------------- */
@media (max-width: 900px) {
#inicio {
        background-attachment: scroll; /* Evita errores visuales en móviles */
    }
    
    /* -- AJUSTES DE NAVEGACIÓN -- */
    
    /* 1. MOSTRAR ICONO HAMBURGUESA */
    .menu-icon {
        display: block; 
    }
    
    /* 2. OCULTAR Y REDISEÑAR EL MENÚ PARA MÓVIL */
  .nav-links {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        background-color: var(--color-primary-header-footer); 
        
        /* MODIFICACIÓN CLAVE: Cambiamos la posición para abarcar el 100% del viewport */
        position: absolute;
        top: 90px; 
        
        /* ANCHO AL 100% DEL VIEWPORT (DISPOSITIVO) */
        width: 100vw;
        left: 50%; /* Centra el inicio horizontalmente */
        transform: translateX(-50%); /* Desplaza el 50% de su propio ancho hacia la izquierda para alinearlo al borde */
        
        text-align: center;
        padding: 10px 0;
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    }
    
    .nav-links a {
        margin: 10px 0;
        padding: 10px;
        display: block; 
        color: white; 
    }
    
    /* 3. LÓGICA: MOSTRAR MENÚ AL HACER CLIC EN EL ÍCONO */
    #menu-toggle:checked ~ .nav-links {
        display: flex; 
    }
    
    /* -- AJUSTES DE SECCIONES -- */
    
    /* Secciones con padding vertical reducido en móvil */
    #servicios-destacados, #servicios-detalles, #ssoma, #contacto, #valores, #certificaciones-calidad {
         padding: 60px 0; 
         border-bottom: 1px solid var(--color-separator); /* Mantener separación en móvil */
    }
    
    /* Secciones sin borde inferior en móvil */
    #inicio, #nosotros, #maquinaria-parallax, #contacto, #certificaciones-calidad { 
        border-bottom: none !important; 
    }
    
    /* El content-wrapper sigue dando el padding horizontal de 20px */
    
    .nosotros-content-container {
         padding: 0 20px; 
    }
    
    /* DESACTIVAR PARALLAX EN MÓVILES */
   /* DESACTIVAR PARALLAX EN MÓVILES Y AJUSTE DE ESPACIO */
    #nosotros, #inicio, #maquinaria-parallax {
         padding: 60px 0;
         background-attachment: scroll;
         
         /* CLAVE: Eliminar Altura Fija y Usar Altura Automática */
         height: auto; /* Permite que la altura se ajuste al contenido, evitando el desborde */
         min-height: 70vh; /* Se puede mantener esta altura mínima para asegurar un buen espacio vertical inicial */
         justify-content: flex-start; 
    }


   #inicio .parallax-content {
         /* Reduzca el padding superior e inferior (los valores 1º y 3º) */
         padding: 40px 20px 40px 20px; /* Reducido a 40px arriba y abajo */
         height: auto; 
    }

    #maquinaria-parallax {
         padding: 100px 20px; 
    }

    h2 {
        font-size: 2.5rem;
    }
    
    /* Ajuste de tamaño en el Hero para móviles */
  /* Ajuste de tamaño en el Hero para móviles */
    #inicio h1 {
        font-size: 2.0rem; /* Reduzca si es necesario */ 
        letter-spacing: normal;
    }
    #inicio .parallax-content p {
        font-size: 1.2rem; 
    }

    /* HACE QUE LAS COLUMNAS SE APILEN */
    .servicio-item, .servicio-item:nth-child(even), .about-content {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    
    .servicio-item img, .servicio-item .text-content {
        width: 100%;
        padding: 0;
    }

    .servicio-item .text-content {
        padding-top: 25px;
    }
    
    #inicio .cta-button {
        margin-top: 20px; 
    }
}