/* Estilos específicos para la página de Institución */

.page-header { padding: 4rem 0; }

.mission-vision-box {
    background: linear-gradient(135deg, var(--color-primario), #00509e);
    color: white;
    box-shadow: 0 10px 25px rgba(0, 41, 82, 0.2);
}

.value-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}
.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
    border-color: var(--color-secundario);
}
.value-card i { font-size: 3rem; color: var(--color-primario); }

/* Línea de Tiempo (Timeline) */
.timeline { position: relative; padding: 2rem 0; }
.timeline::before {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 4px; height: 100%;
    background-color: #e9ecef;
}
.timeline-item { padding: 20px 0; position: relative; width: 50%; }
.timeline-item.left { left: 0; padding-right: 40px; text-align: right; }
.timeline-item.right { left: 50%; padding-left: 40px; }
.timeline-item::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    top: 30px; background-color: white; border: 4px solid var(--color-primario);
    border-radius: 50%; z-index: 1;
}
.timeline-item.left::after { right: -10px; }
.timeline-item.right::after { left: -10px; }
.timeline-content { padding: 1.5rem; background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

.map-responsive { overflow: hidden; position: relative; height: 100%; min-height: 450px; }
.map-responsive iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

@media screen and (max-width: 768px) {
    .timeline::before { left: 10px; }
    .timeline-item { width: 100%; padding-left: 40px; padding-right: 0; text-align: left; }
    .timeline-item.right { left: 0%; }
    .timeline-item.left::after, .timeline-item.right::after { left: 0; }
}