/* ==========================================================================
   PRORED ZONA NORTE - HOJA DE ESTILOS PRINCIPAL
   ========================================================================== */

/* 1. COLORES Y FUENTES CORPORATIVAS */
:root {
    --blue: #09203f;
    --blue-light: #183e6b;
    --orange: #f47b20;
    
    /* Variables adicionales para mantener compatibilidad con páginas secundarias */
    --corporate-blue: #09203f;
    --corporate-light-blue: #183e6b;
    --corporate-orange: #f47b20;
}

body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #f8f9fa; 
}

h1, h2, h3, h4, h5 { 
    font-family: 'Rajdhani', sans-serif; 
}

/* 2. UTILIDADES GENERALES */
.text-primary { color: var(--orange) !important; }
.text-blue { color: var(--blue) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-darker { background-color: #111 !important; }
.bg-gradient-dark { background: linear-gradient(135deg, var(--blue) 0%, #111 100%); }
.bg-card-tech { background-color: rgba(255,255,255,0.05); }
.ls-2 { letter-spacing: 2px; }

/* 3. BOTONES */
.btn-primary { 
    background-color: var(--orange); 
    border-color: var(--orange); 
    color: white;
}
.btn-primary:hover { 
    background-color: #d86918; 
    border-color: #d86918; 
    color: white;
}
.btn-orange { 
    background-color: var(--orange); 
    color: white; 
}
.btn-orange:hover { 
    background-color: #d86918; 
    color: white; 
}

/* 4. NAVBAR (BARRA DE NAVEGACIÓN) */
.navbar-light { 
    background-color: #ffffff; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
}
.navbar-light .navbar-nav .nav-link { 
    color: #333 !important; 
    font-weight: 500; 
}
.navbar-light .navbar-nav .nav-link:hover { 
    color: var(--blue-light) !important; 
}
.bg-white-shadow {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* 5. CABECERAS HERO (Páginas principales y secundarias) */
.hero-section {
    background: linear-gradient(rgba(9, 32, 63, 0.8), rgba(24, 62, 107, 0.8)), url('fondo-cabecera.jpg');
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
}
.hero-careers {
    background: linear-gradient(135deg, rgba(9, 32, 63, 0.9) 0%, rgba(24, 62, 107, 0.9) 100%), url('fondo-cabecera.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0 80px;
    color: white;
    text-align: center;
    border-bottom: 5px solid var(--orange);
}
.hero-denuncias {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
    padding: 80px 0 60px;
    color: white;
    text-align: center;
    border-bottom: 5px solid var(--orange);
}

/* 6. ANIMACIONES Y HOVER (Equipo Directivo y Tarjetas) */
.hover-primary:hover { 
    color: var(--orange) !important; 
    transition: 0.3s; 
}
.transition-hover { 
    transition: all 0.3s ease; 
}
.transition-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important; 
}

/* 7. TARJETAS E ICONOS (Denuncias y Beneficios) */
.card-denuncia, .benefit-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    height: 100%;
    background: white;
    padding: 30px 20px;
}
.card-denuncia { 
    border-top: 4px solid var(--blue); 
}
.card-denuncia:hover, .benefit-card:hover { 
    transform: translateY(-5px); 
}

.icon-box, .icon-wrapper {
    width: 70px; 
    height: 70px;
    border-radius: 50%;
    background-color: white;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.icon-box {
    margin: -40px auto 20px;
    border: 2px solid var(--blue);
}
.icon-wrapper {
    width: 80px; 
    height: 80px;
    background-color: rgba(244, 123, 32, 0.1);
    margin: 0 auto 20px;
}
.icon-box i, .icon-wrapper i { 
    font-size: 30px; 
}
.icon-wrapper i { 
    color: var(--orange); 
    font-size: 35px; 
}

/* 8. FORMULARIOS INCRUSTADOS (Trabaja con Nosotros) */
.form-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    padding: 10px;
    margin-top: -50px;
    position: relative;
    z-index: 10;
}


/* ==========================================================================
   9. ECOSISTEMA PRORED (DIAGRAMA INTERACTIVO)
   ========================================================================== */
.venn-section {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
    overflow: hidden;
}

.venn-card {
    background: #ffffff;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.venn-card:hover {
    transform: translateY(-10px) scale(1.03);
    z-index: 10;
}

/* Colores dinámicos al pasar el mouse por cada pilar */
.tech-card:hover { border-color: var(--blue); box-shadow: 0 15px 35px rgba(9, 32, 63, 0.15) !important; }
.human-card:hover { border-color: var(--orange); box-shadow: 0 15px 35px rgba(244, 123, 32, 0.15) !important; }
.infra-card:hover { border-color: #28a745; box-shadow: 0 15px 35px rgba(40, 167, 69, 0.15) !important; }

.venn-center {
    background: linear-gradient(135deg, var(--blue) 0%, var(--orange) 100%);
    width: 260px;
    height: 260px;
    border: 6px solid #ffffff;
    position: relative;
    transition: all 0.5s ease;
}

.venn-center:hover {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 20px 40px rgba(244, 123, 32, 0.4) !important;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }
.bg-orange { background-color: var(--orange) !important; color: white; }

@media (min-width: 992px) {
    .mt-lg-n5 { margin-top: -4rem !important; }
}

/* ==========================================================================
   10. BANNER DE COOKIES ESTRICTO (LEY 21.719)
   ========================================================================== */
.cookie-banner-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 450px;
    background-color: var(--secondary-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--accent-blue);
    color: var(--text-main);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 9999;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

@media (max-width: 576px) {
    .cookie-banner-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: 100%;
    }
    .cookie-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   11. TARJETAS METODOLOGÍA SOP (LAS 7 PRÁCTICAS)
   ========================================================================== */
.card-sop-step {
    transition: all 0.3s ease;
    border-radius: 10px;
    border-bottom: 4px solid var(--blue);
    background-color: #ffffff;
}
.card-sop-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
    border-color: var(--orange) !important;
}
.sop-number {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}