/* ============================================
   ESTILOS PÁGINA INSTITUCIÓN (TEMA CLARO)
   ============================================ */

.main-content {
    /* Esto ya estaba correcto, usa el fondo claro */
    background: linear-gradient(180deg, var(--color-beige) 0%, var(--color-blanco) 100%);
    padding: 4rem 0;
}

/* 1. Header de la Página (Título y Breadcrumbs) */
.page-header {
    margin-top: 80px; /* Espacio OBLIGATORIO para el header fijo */
    padding: 2.5rem 0;
    /* CAMBIO: Fondo claro (beige) y texto oscuro (negro) */
    background: var(--color-beige); 
    color: var(--color-negro);
    border-bottom: 3px solid var(--color-rojo);
    /* CAMBIO: Sombra más sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

/* Hereda el .container de los estilos globales */
.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-negro); /* CAMBIO: de blanco a negro */
}

/* Estilos para los Breadcrumbs */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-negro); /* CAMBIO: de beige a negro */
}

.breadcrumbs li {
    font-size: 0.95rem;
}

.breadcrumbs li a {
    color: var(--color-negro); /* CAMBIO: de beige a negro */
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs li a:hover {
    color: var(--color-rojo); /* Esto estaba bien */
}

/* Separador ' / ' */
.breadcrumbs li + li::before {
    content: '/';
    margin: 0 0.8rem;
    color: var(--color-negro); /* CAMBIO: de gris claro a negro */
}

.breadcrumbs li.active {
    color: var(--color-rojo); /* CAMBIO: de blanco a rojo */
    font-weight: 500;
}


/* 2. Grid de Contenido Principal */
.institucion-grid {
    display: grid;
    grid-template-columns: 2fr 1.1fr;
    gap: 3rem;
}

/* Columna de Texto */
.institucion-text h4 {
    font-size: 1.8rem;
    color: var(--color-negro); /* Esto estaba bien */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    /* CAMBIO: Usando la nueva variable de rojo (216, 64, 64) */
    border-bottom: 3px solid rgba(216, 64, 64, 0.5); 
    display: inline-block;
}
.institucion-text h4:first-child {
    margin-top: 0;
}

.institucion-text p {
    color: var(--color-negro); /* CAMBIO CRÍTICO: de --color-gris a --color-negro */
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.institucion-text ul {
    list-style: none;
    padding-left: 0;
}

.institucion-text ul li {
    color: var(--color-negro); /* CAMBIO CRÍTICO: de --color-gris a --color-negro */
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 30px; 
    font-size: 1.05rem;
}

/* Ícono de check de Font Awesome */
.institucion-text ul li::before {
    content: '\f00c'; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-rojo); /* Esto estaba bien */
    position: absolute;
    left: 0;
    top: 5px;
}

/* Columna de Imágenes */
.institucion-images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
    position: sticky; 
    top: 100px; 
}

.institucion-images .img-fluid {
    width: 100%;
    height: auto;
    border-radius: 15px; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.institucion-images .img-fluid:hover {
    transform: scale(1.03);
    /* CAMBIO: Usando la nueva variable de rojo (216, 64, 64) */
    box-shadow: 0 15px 40px rgba(216, 64, 64, 0.2); 
    border-color: var(--color-rojo);
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* (Esta parte ya estaba bien) */
@media (max-width: 1024px) {
    .institucion-grid {
        grid-template-columns: 1fr;
    }
    
    .institucion-images {
        position: static;
        top: auto;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .institucion-images .img-fluid {
        width: 300px; 
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2.2rem;
    }
    
    .institucion-images {
        flex-direction: column; 
        overflow-x: hidden;
    }
    
    .institucion-images .img-fluid {
        width: 100%; 
        flex-shrink: 1;
    }
}