/* --- VARIABLES Y RESET --- */
/* --- VARIABLES --- */
:root {
    --primary-blue: #04182b; 
    --secondary-blue: #0a2540; 
    --accent-yellow: #F4B400; 
    --detail-red: #C0392B;    
    --text-dark: #222222;
    --text-light: #F4F6F7;
    --white: #ffffff;
    --gray-bg: #f4f6f8;
}

/* --- ESTO VA AL PRINCIPIO DE STYLES.CSS --- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Esto evita que el padding agrande los elementos */
    font-family: 'Poppins', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* ¡IMPORTANTE! Esto elimina la línea blanca lateral */
    position: relative; /* Ayuda a contener elementos absolutos */
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text-dark);
    line-height: 1.6;
}
a { text-decoration: none; }
ul { list-style: none; }

/* --- UTILIDADES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 90px 0; }
.bg-light { background-color: var(--gray-bg); }
.bg-dark { background-color: var(--primary-blue); }
.text-white { color: var(--white); }
.white { color: var(--white) !important; }

.section-title {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--primary-blue);
    font-weight: 700;
}
.section-title.center { text-align: center; margin-bottom: 60px; }
.highlight { color: var(--accent-yellow); }
.mt-20 { margin-top: 20px; }

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 0.95rem;
}
.btn-primary { background-color: var(--accent-yellow); color: var(--primary-blue); }
.btn-primary:hover { background-color: #e0a800; transform: translateY(-2px); }
.btn-outline { border: 2px solid var(--white); color: var(--white); margin-left: 10px; }
.btn-outline:hover { background-color: var(--white); color: var(--primary-blue); }

/* --- NAVBAR --- */
/* --- NAVBAR & DROPDOWN (MEJORADO) --- */
#navbar {
    background-color: var(--primary-blue);
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.15);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center; /* Alinea verticalmente la imagen con el texto */
    gap: 10px; /* Espacio entre la imagen y el texto "SPCC" */
    text-decoration: none;
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: 700;
    color: var(--white); /* O el color que uses para el texto */
}

.logo-img {
    height: 50px; /* Ajusta este valor según la altura de tu barra de navegación */
    width: auto;  /* Mantiene la proporción de la imagen para que no se estire */
    object-fit: contain;
}

/* Opcional: Si en celular quieres el logo un poco más pequeño */
@media (max-width: 768px) {
    .logo-img {
        height: 40px;
    }
}
.nav-menu ul { display: flex; align-items: center; gap: 30px; }
.nav-link {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
    position: relative;
    padding: 10px 0;
}
.nav-link:hover, .nav-link.active { color: var(--accent-yellow); }

.btn-nav {
    padding: 8px 25px;
    background: transparent;
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    border-radius: 4px;
    transition: 0.3s;
    font-weight: 600;
}
.btn-nav:hover { background: var(--accent-yellow); color: var(--primary-blue); }

/* --- DROPDOWN (CORREGIDO) --- */
.dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-btn i {
    font-size: 0.8rem;
    margin-left: 5px;
    transition: transform 0.3s;
}

.dropdown:hover .dropdown-btn i {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 80px; /* Altura exacta del navbar */
    left: 50%;
    transform: translateX(-50%); /* Centrado perfecto en escritorio */
    background-color: var(--white);
    min-width: 220px; /* Un poco más ancho para que quepa el texto */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-top: 4px solid var(--accent-yellow);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: block; /* Importante */
}

.dropdown-content li { width: 100%; }

.dropdown-content a {
    color: var(--text-dark); /* Texto oscuro en fondo blanco */
    padding: 15px 20px;
    display: block;
    font-size: 0.95rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: left; /* Alineado a la izquierda siempre */
}

.dropdown-content a:hover {
    background-color: #f9f9f9;
    color: var(--primary-blue);
    padding-left: 25px; /* Pequeña animación */
}

/* Mostrar en escritorio al hover */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-content {
        opacity: 1;
        visibility: visible;
        top: 80px;
    }
}



.center-text { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.section-description {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 15px;
    font-weight: 300;
}

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

.feature-item {
    background: rgba(255, 255, 255, 0.05); /* Efecto Glass sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 25px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-10px);
    border-color: var(--accent-yellow);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: var(--accent-blue);
    color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(244, 180, 0, 0.3);
}

.feature-item h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--white);
}

.feature-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* --- HERO --- */
/* --- SECCIÓN HERO (INICIO) CORREGIDA --- */
#hero {
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;

    /* AQUÍ ESTÁ LA MAGIA PARA QUE SE ADAPTE: */
    /* 1. Degradado oscuro sobre la imagen */
    /* 2. URL con comillas simples por si tiene espacios */
    background: linear-gradient(rgba(4, 24, 43, 0.8), rgba(4, 24, 43, 0.6)), 
                url('Imagenes/SPCC\ portada.jpeg'); 
    
    /* Propiedades para que se adapte igual que "Sobre Nosotros" */
    background-size: cover;       /* Cubre todo el fondo sin estirarse */
    background-position: top;  /* Siempre muestra el centro de la foto */
    background-repeat: no-repeat; /* No repetir */
    background-attachment: scroll; /* 'scroll' es mejor para móviles que 'fixed' */
}

/* Ajuste específico para móviles para asegurar que se vea bien */
@media (max-width: 768px) {
    #hero {
        height: 100vh; /* Asegura altura completa en celular */
        background-position: center center; /* Centrado perfecto */
    }
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Overlay más oscuro para coincidir con la petición */
    background: linear-gradient(135deg, rgba(4, 24, 43, 0.9), rgba(4, 24, 43, 0.7));
}
.hero-content { position: relative; z-index: 2; color: var(--white); max-width: 850px; }
.hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; font-weight: 700; }
.hero-content p { font-size: 1.25rem; margin-bottom: 35px; opacity: 0.95; font-weight: 300; }

/* --- ABOUT (IMAGEN CORREGIDA) --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.about-img-container {
    position: relative;
}
.about-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    display: block;
}
.experience-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--accent-yellow);
    color: var(--primary-blue);
    padding: 20px 30px;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.experience-badge .years { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.experience-badge .text { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }

/* --- MISSION VISION --- */
.mv-card {
    background: var(--white);
    padding: 50px 30px;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 4px solid transparent;
    transition: 0.3s;
}
.mv-card:hover { transform: translateY(-5px); border-top-color: var(--accent-yellow); }
.mv-card .icon-box { color: var(--primary-blue); font-size: 2.5rem; margin-bottom: 20px; }
.separator { height: 3px; width: 40px; background: var(--detail-red); margin: 15px auto 25px; }

/* --- SERVICES --- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.service-card {
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.card-img { height: 220px; background-size: cover; background-position: center; }
.card-content { padding: 30px; }
.card-content h3 { color: var(--primary-blue); margin-bottom: 12px; font-size: 1.3rem; }
.read-more { color: var(--detail-red); font-weight: 600; margin-top: 15px; display: inline-block; transition: 0.3s; font-size: 0.9rem; }
.read-more:hover { color: var(--primary-blue); padding-left: 5px; }

/* --- CONTACT --- */
.info-list li { margin-bottom: 25px; display: flex; align-items: center; gap: 15px; font-size: 1.05rem; }
.info-list i { color: var(--accent-yellow); font-size: 1.2rem; background: var(--primary-blue); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.contact-form { background: var(--white); padding: 45px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--primary-blue); font-size: 0.9rem; }
.form-group input, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 0.95rem; background: #fbfbfb; transition: 0.3s; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent-yellow); background: var(--white); outline: none; }
.full-width { width: 100%; }

/* --- FOOTER --- */
footer { background: #020d17; color: #889bb0; padding: 40px 0; text-align: center; font-size: 0.9rem; border-top: 3px solid var(--accent-yellow); }
.socials { margin-top: 20px; }
.socials a { color: var(--white); margin: 0 12px; font-size: 1.3rem; transition: 0.3s; }
.socials a:hover { color: var(--accent-yellow); }

/* =========================================
   RESPONSIVE (MÓVIL) - CÓDIGO ÚNICO Y CORREGIDO
   ========================================= */

/* Estilos base del botón hamburguesa (fuera del media query) */
.menu-toggle { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--white); transition: 0.3s; }

@media (max-width: 768px) {
    
    /* 1. Animación del Botón Hamburguesa */
    .menu-toggle { display: block; }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 2. Contenedor del Menú Principal */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background-color: var(--primary-blue);
        width: 100%;
        height: calc(100vh - 80px);
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: 20px;
        overflow-y: auto;
        display: block; /* Asegura que el contenedor exista */
    }

    .nav-menu.active { left: 0; }

    /* 3. Enlaces y Lista */
    .nav-menu ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    .nav-menu li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav-link {
        padding: 20px 30px;
        display: block;
        width: 100%;
        font-size: 1.1rem;
        text-align: left;
    }
    
    .btn-nav {
        margin: 30px auto;
        display: block;
        width: 80%;
        text-align: center;
    }

    /* 4. Dropdown Móvil (Acordeón) */
    .dropdown { display: block; height: auto; }
    .dropdown:hover .dropdown-content { display: none; } /* Desactiva el hover de escritorio */
    
    .dropdown-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-content {
        position: static;
        opacity: 1; 
        visibility: visible; 
        transform: none;
        box-shadow: none; 
        background: rgba(0,0,0,0.2); 
        width: 100%; 
        min-width: 100%;
        display: none; 
        border: none;
        border-radius: 0;
        padding: 0;
    }

    .dropdown.active .dropdown-content { 
        display: block; 
        animation: slideDown 0.3s ease;
    }

    .dropdown-content a {
        color: rgba(255, 255, 255, 0.8);
        padding-left: 50px; /* Sangría para jerarquía */
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    /* 5. Ajustes de Diseño General (Evita línea blanca) */
    .grid-2 { grid-template-columns: 1fr; gap: 40px; }
    
    .hero-content h1 { font-size: 2rem; line-height: 1.3; } /* Texto más pequeño */
    .hero-content p { font-size: 1rem; padding: 0 10px; }
    
    .about-img-container { margin-top: 20px; }
    .experience-badge { left: 50%; transform: translateX(-50%); width: 80%; justify-content: center; bottom: -20px; }
    
    /* 6. CORRECCIÓN CRÍTICA DE ANIMACIONES */
    /* Esto evita que los elementos entren desde fuera de la pantalla creando scroll horizontal */
    .reveal-left, .reveal-right { transform: translateY(30px); }
    .reveal-active { transform: translateY(0); }
    
    /* Sección estadísticas en columna */
    .stats-grid { flex-direction: column; gap: 30px; }
    .page-header { height: 50vh; }
    .page-header h1 { font-size: 2.2rem; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ANIMACIONES GLOBALES --- */
.fade-in-up { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s forwards; }
.delay-1 { animation-delay: 0.2s; } 
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

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

/* Clases para el Javascript Observer */
.reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: all 0.8s ease-out; }
.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); } /* Solo funciona bien en escritorio */
.reveal-right { transform: translateX(50px); } /* Solo funciona bien en escritorio */

.reveal-active { opacity: 1; transform: translate(0, 0); }












/*Sobre Nosotros*/





/* --- ESTILOS PÁGINA SOBRE NOSOTROS --- */

/* 1. Header Interno (Más pequeño que el del Inicio) */
.page-header {
    height: 60vh; /* Altura reducida */
    background: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
}

.page-header h1 {
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 15px;
    font-weight: 700;
}

.page-header p {
    font-size: 1.2rem;
    color: var(--white);
    opacity: 0.9;
}

/* 2. Sección Historia */
.sub-title {
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.about-img-group {
    position: relative;
    padding-left: 30px; /* Espacio para la imagen pequeña */
}

.main-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.small-img-wrapper {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 45%;
    border: 5px solid var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.small-img-wrapper img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.signature-box {
    margin-top: 30px;
    border-left: 4px solid var(--accent-yellow);
    padding-left: 20px;
}

.quote {
    font-style: italic;
    color: #555;
    font-size: 1.1rem;
}

/* 3. Grid de Valores */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.value-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid #eee;
}

.value-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-5px);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(4, 24, 43, 0.05);
    color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    transition: 0.3s;
}

.value-card:hover .icon-circle {
    background: var(--accent-yellow);
    color: var(--primary-blue);
}

/* 4. Equipo de Trabajo */


/* 5. Sección de Estadísticas */
.stats-section {
    padding: 60px 0;
    border-top: 4px solid var(--accent-yellow);
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    gap: 30px;
}

.stat-item h2 {
    font-size: 3rem;
    color: var(--accent-yellow);
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-item p {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* RESPONSIVE AJUSTES */
@media (max-width: 768px) {
    .page-header { height: 50vh; }
    .page-header h1 { font-size: 2.2rem; }
    
    .small-img-wrapper {
        position: static;
        width: 100%;
        margin-top: 15px;
        border: none;
    }
    
    .about-img-group { padding-left: 0; }
    
    .stats-grid { flex-direction: column; }
}


















/**Servicios/



/* --- ESTILOS PÁGINA SERVICIOS --- */

/* 1. Hero Específico */
.services-hero {
    background: linear-gradient(rgba(4, 24, 43, 0.85), rgba(4, 24, 43, 0.7)), 
                url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover;
}

/* 2. Grid de 8 Servicios */
.services-full-grid {
    display: grid;
    /* Crear columnas automáticas, mínimo 260px de ancho */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-item {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    flex-direction: column;
}

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border-bottom-color: var(--accent-yellow);
}

.service-img {
    height: 180px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-item:hover .service-img img {
    transform: scale(1.1); /* Zoom suave en la imagen */
}

.service-info {
    padding: 25px;
    flex-grow: 1; /* Asegura que todas las tarjetas tengan altura similar */
    display: flex;
    flex-direction: column;
}

.service-info h3 {
    color: var(--primary-blue);
    font-size: 1.25rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.service-info p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* 3. Sección CTA (Llamado a la Acción) */
.cta-section {
    position: relative;
    padding: 80px 0;
    text-align: center;
    color: var(--white);
    background: url('https://images.unsplash.com/photo-1590486803833-1c5dc8ddd4c8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover fixed; /* Efecto Parallax fijo */
}

.cta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 24, 43, 0.9); /* Azul muy oscuro para contraste */
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 35px;
    opacity: 0.9;
}

.btn-large {
    padding: 15px 40px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Tarjeta de ayuda en contacto footer */
.help-card {
    background: #f0f4f8;
    padding: 40px;
    border-radius: 8px;
    border-left: 5px solid var(--primary-blue);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.help-card h3 {
    color: var(--primary-blue);
    margin-bottom: 10px;
}

/* Ajuste responsive para CTA */
@media (max-width: 768px) {
    .cta-content h2 { font-size: 1.8rem; }
    .cta-content p { font-size: 1rem; }
    .btn-large { width: 100%; justify-content: center; }
}
























/*seguridad*/

 /* =========================================
   PÁGINA DE SEGURIDAD (SST)
   ========================================= */

/* 1. Hero Section (Fondo específico) */
.safety-hero {
    background: linear-gradient(rgba(4, 24, 43, 0.9), rgba(4, 24, 43, 0.8)), 
                url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    /* Ajusta la altura si es necesario, hereda de .page-header */
}

/* 2. Sección Introductoria ("La Seguridad Primero") */
.safety-intro {
    text-align: center;
    padding: 80px 0;
    background-color: #fff;
}

.intro-statement {
    font-size: 2.2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

/* Línea decorativa amarilla debajo del título */
.intro-statement::after {
    content: '';
    display: block;
    width: 60%;
    height: 4px;
    background: var(--accent-yellow);
    margin: 15px auto 0;
    border-radius: 2px;
}

.safety-intro p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* 3. Sección de Características (Diseño Zig-Zag) */
.safety-features-section {
    padding: 60px 0 100px;
    background-color: #f9fbfd; /* Fondo gris muy suave */
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px; /* Separación grande entre bloques */
}

/* IMPORTANTE: Invierte el orden en las filas pares (Imagen a la derecha) */
.feature-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* --- Estilos de la Imagen --- */
.feature-image {
    flex: 1;
    height: 450px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    position: relative;
}

/* Elemento decorativo cuadrado detrás de la imagen */
.feature-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 50%;
    height: 50%;
    background-color: var(--accent-yellow);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.3;
}

/* Ajuste del decorativo cuando la imagen está a la derecha */
.feature-row:nth-child(even) .feature-image::before {
    left: auto;
    right: -15px;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.feature-image:hover img {
    transform: scale(1.05); /* Efecto zoom suave */
}

/* --- Estilos del Texto --- */
/* Corrección para centrar iconos y texto en Seguridad */
.feature-text {
    flex: 1;
    display: flex;            /* Activa el modo flexible */
    flex-direction: column;   /* Pone los elementos uno debajo de otro */
    align-items: center;      /* <--- ESTO CENTRA EL ICONO HORIZONTALMENTE */
    text-align: center;       /* Centra el texto del título y el párrafo */
    padding: 20px;
}

/* Corrección para el Círculo del Icono */
.feature-icon {
    /* 1. Definir el tamaño del círculo */
    width: 90px;
    height: 90px;
    
    /* 2. Hacerlo redondo y blanco */
    background-color: #fff; /* Fondo blanco */
    border-radius: 50%;     /* Esto lo hace circular */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Sombra suave para que resalte */
    
    /* 3. CENTRADO PERFECTO DEL ÍCONO (La parte importante) */
    display: inline-flex;     /* Usamos flexbox interno */
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
    
    /* 4. Estilo del dibujo del ícono */
    font-size: 3rem;
    color: var(--accent-yellow);
    
    /* 5. Separación con el título de abajo */
    margin-bottom: 20px;
}

/* Opcional: Si quieres que la lista de puntos se mantenga alineada a la izquierda */
/* (Las listas centradas a veces son difíciles de leer) */
.feature-list {
    text-align: left;       /* Regresa la lista a la izquierda */
    width: 100%;            /* Ocupa todo el ancho */
    max-width: 500px;       /* Evita que se estire demasiado */
    margin-top: 15px;
}
.feature-text h3 {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 20px;
    font-weight: 700;
}

.feature-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
    text-align: justify; /* Opcional: Para bloques de texto cuadrados */
}

/* Lista con checks personalizados */
.feature-list li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px; /* Espacio para el icono */
    color: #444;
    font-size: 1rem;
}

.feature-list li::before {
    content: '\f00c'; /* Código del icono Check de FontAwesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-yellow);
    font-size: 1.1rem;
}

/* 4. Responsive (Adaptación a Móviles y Tablets) */
@media (max-width: 900px) {
    .feature-row, .feature-row:nth-child(even) {
        flex-direction: column; /* Apila todo verticalmente */
        gap: 30px;
        margin-bottom: 60px;
    }

    .feature-image {
        height: 300px; /* Imagen más pequeña en móvil */
        width: 100%;
    }
    
    .feature-text h3 {
        font-size: 1.7rem;
    }
    
    .intro-statement {
        font-size: 1.8rem;
    }
}































/*Nuestros Clientes*/


/* =========================================
   PÁGINA DE CLIENTES / ALIADOS
   ========================================= */

/* 1. Hero Emotivo (Fondo específico) */
.clients-hero {
    background: linear-gradient(rgba(4, 24, 43, 0.85), rgba(4, 24, 43, 0.7)), 
                url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}

/* 2. Texto de Introducción */
.clients-intro {
    text-align: center;
    padding: 80px 20px 40px;
    max-width: 900px;
    margin: 0 auto;
}

.clients-intro h2 {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.clients-intro p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

/* 3. Grid de Clientes */
.clients-container {
    padding: 20px 0 100px;
    background-color: #fff;
}

.clients-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que bajen a la siguiente línea si no caben */
    justify-content: center; /* Centra los elementos (ideal para números impares como 5) */
    gap: 40px;
    margin-top: 40px;
}

/* Diseño de la Tarjeta del Cliente */
.client-card {
    background: #fff;
    width: 300px; /* Ancho fijo para que todas sean iguales */
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Borde superior animado al pasar el mouse */
.client-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--primary-blue);
    transform: scaleX(0); /* Oculto inicialmente */
    transition: transform 0.4s ease;
}

.client-card:hover {
    transform: translateY(-10px); /* Sube un poco */
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.client-card:hover::before {
    transform: scaleX(1); /* Muestra el borde azul */
}

/* Contenedor del Logo */
.client-logo-wrapper {
    width: 150px;
    height: 100px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    /* Efecto Blanco y Negro: */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

/* Al pasar el mouse, el logo toma color */
.client-card:hover .client-logo-wrapper {
    filter: grayscale(0%);
    opacity: 1;
}

.client-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.client-category {
    font-size: 0.9rem;
    color: #888;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 4. Frase Cita (Testimonio destacado) */
.trust-quote {
    background-color: #f9fbfd;
    padding: 80px 0;
    text-align: center;
}

.trust-quote blockquote {
    font-size: 1.5rem;
    font-style: italic;
    color: #444;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.trust-quote i {
    color: var(--accent-yellow);
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Responsive para Clientes */
@media (max-width: 768px) {
    .client-card { 
        width: 100%; 
        max-width: 350px; 
    }
    
    .clients-hero h1 { 
        font-size: 2.2rem; 
    }
}



















/*FOOTER*/
/* =========================================
   FOOTER PROFESIONAL
   ========================================= */

.main-footer {
    background-color: #0b1118; /* Azul muy oscuro / Negro elegante */
    color: #b0b0b0; /* Texto gris suave */
    padding-top: 70px;
    font-size: 0.95rem;
    border-top: 4px solid var(--accent-yellow); /* Línea decorativa superior */
}

.footer-grid {
    display: grid;
    /* Crea columnas automáticas (mínimo 250px de ancho cada una) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding-bottom: 50px;
}

/* --- Estilos Columnas --- */
.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo span {
    color: var(--accent-yellow); /* "S.A.S." en amarillo */
}

.company-desc {
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Pequeña línea debajo de los títulos h4 */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent-yellow);
}

/* --- Links de Navegación --- */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--accent-yellow);
    transform: translateX(5px); /* Pequeño movimiento a la derecha al pasar el mouse */
}

/* --- Contacto e Iconos --- */
.footer-contact {
    list-style: none;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-contact i {
    color: var(--accent-yellow);
    margin-top: 5px;
}

.footer-contact a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-contact a:hover {
    color: #fff;
}

/* Iconos Sociales */
.social-icons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-link {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff !important;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent-yellow);
    color: #0b1118 !important; /* Icono oscuro sobre fondo amarillo */
    transform: translateY(-3px);
}

/* --- BARRA INFERIOR (Créditos) --- */
.footer-bottom {
    background-color: #04080c; /* Un tono aún más oscuro */
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Estilo especial para Industrias Vega */
.developer-credit {
    color: #888;
}

.developer-credit a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
    transition: color 0.3s;
}

.developer-credit a:hover {
    color: var(--accent-yellow); /* Brilla en amarillo al pasar el mouse */
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .bottom-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%); /* Centrar la línea decorativa */
    }
    
    .footer-contact li {
        justify-content: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}



/* Estilo específico para la imagen del logo en el footer */
.footer-logo-img {
    height: 40px; /* Tamaño controlado para que no se vea gigante */
    width: auto;
    margin-right: 10px; /* Espacio entre el logo y el texto SPCC */
    vertical-align: middle;
    object-fit: contain;
    /* Si tu logo es negro y no se ve en el fondo oscuro, 
       puedes usar este filtro para volverlo blanco (opcional): */
    /* filter: brightness(0) invert(1); */
}

/* Ajuste del contenedor del logo para alinear texto e imagen */
.footer-logo {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}