/* ============================================= */
/* === CSS/NUESTRA-MISION-VISION-Y-VALORES.CSS === */
/* ============================================= */

/* --- Cabecera Específica para la Página Misión/Visión/Valores --- */
.page-mision-vision .page-header-image.header-mision-vision { /* Clases actualizadas */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../imagenes/cabecera-nuestra-mission-vision.jpg'); /* NUEVA IMAGEN */
    background-size: cover;
    background-position: center center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-mision-vision .page-title { /* Clase de body actualizada */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* --- Estilos para la Sección de Contenido Misión/Visión/Valores --- */
#mision-vision-valores-contenido { /* ID de sección actualizado */
    /* background-color: #f8f9fa; */ /* Fondo opcional */
}

/* Título y subtítulo de la sección (si se usan) */
#mision-vision-valores-contenido .section-title {
    color: var(--minga-dark);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
#mision-vision-valores-contenido .section-subtitle {
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 3.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos para las Tarjetas de Misión/Visión/Valores --- */
/* Reutilizando estilos similares a los pilares del index si es posible */
.card-feature { /* Clase genérica para estas tarjetas */
    border: none;
    background-color: #ffffff;
    border-radius: 0.5rem; /* Más redondeado */
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-feature.card-hover:hover { /* Añadir hover si se desea */
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.card-feature .card-body {
    padding: 2rem 1.5rem; /* Ajustar padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Para que el cuerpo ocupe espacio */
}

/* Círculo para el icono */
.icon-circle {
    width: 70px;
    height: 70px;
    background-image: linear-gradient(to bottom right, var(--minga-red-light, #e84a5f), var(--minga-red, #D9232D)); /* Gradiente opcional */
    color: #fff;
    border-radius: 50%;
    display: inline-flex; /* Cambiado a inline-flex */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-feature .card-title { /* Título: Misión, Visión, Valores */
    color: var(--minga);
    margin-top: 1.5rem; /* Espacio sobre el título */
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
}

.card-feature .card-text { /* Párrafo de descripción */
    font-size: 0.95rem;
    color: #555;
    line-height: 1.65;
    margin-bottom: 0; /* Sin margen inferior si es el último */
    flex-grow: 1; /* Ocupa espacio */
    text-align: justify; /* Justificar el texto principal */
    hyphens: auto;      /* Permitir división de palabras */
}

/* --- Estilos para la Sección Acercamiento Integral --- */
/* --- Estilos para la NUEVA Sección Acercamiento Integral --- */
#acercamiento-integral {
    /* El padding general viene de py-5 en la section HTML */
}

/* El bloque visual DENTRO de la columna central */
.approach-content-block {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 0.75rem; /* Bordes más redondeados */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Sombra suave */
    padding: 2.5rem 2rem; /* Padding interno */
    border-left: 5px solid var(--minga-red); /* Borde lateral decorativo */
}
@media (min-width: 768px) {
    .approach-content-block {
        padding: 3rem;
    }
}


/* Título de la sección de acercamiento */
#acercamiento-integral .section-title-approach {
    color: var(--negro);
    font-weight: 600;
    font-size: 1.7rem; /* Más grande */
    line-height: 1.4;
    margin-bottom: 3rem; /* Más espacio debajo */
    text-align: center;
    border-bottom: 2px solid var(--minga-red-light, #e84a5f); /* Línea sutil debajo */
    padding-bottom: 0.75rem;
    display: inline-block; /* Para que el borde no ocupe todo el ancho */
}

/* Lista ordenada - Estilo Creativo */
ol.list-approach {
    list-style: none; /* Quitamos números/viñetas por defecto */
    padding-left: 0; /* Reseteamos padding */
    counter-reset: approach-counter; /* Iniciamos contador CSS */
}

ol.list-approach li {
    display: flex; /* Usamos Flexbox para alinear número y texto */
    align-items: flex-start; /* Alineamos al inicio (útil si el texto ocupa varias líneas) */
    margin-bottom: 2rem; /* Espacio generoso entre ítems */
    position: relative; /* Para el pseudo-elemento ::before */
}
ol.list-approach li:last-child {
    margin-bottom: 0;
}

/* Círculo numérico personalizado */
ol.list-approach li::before {
    counter-increment: approach-counter; /* Incrementa el contador */
    content: counter(approach-counter); /* Muestra el número */
    flex-shrink: 0; /* Evita que el círculo se encoja */
    font-weight: 700;
    font-size: 1.2rem; /* Tamaño del número */
    color: #fff; /* Color del número */
    background-color: var(--minga); /* Fondo del círculo */
    border-radius: 50%;
    width: 38px; /* Tamaño del círculo */
    height: 38px;
    line-height: 38px; /* Centrar número verticalmente */
    text-align: center; /* Centrar número horizontalmente */
    margin-right: 1.25rem; /* Espacio a la derecha del número */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para el círculo */
    position: relative; /* Para z-index si fuera necesario */
    top: 2px; /* Ajuste vertical fino */
}

/* Contenedor para el texto (Keyword + Descripción) */
.approach-text-content {
    flex-grow: 1; /* Ocupa el espacio restante */
}

/* Keyword en negrita */
.approach-text-content strong {
    color: var(--minga);
    font-weight: 600;
    display: block; /* En su propia línea */
    font-size: 1.05rem; /* Ligeramente más grande */
    margin-bottom: 0.4rem; /* Espacio debajo */
}

/* Texto de la descripción */
.approach-text-content span {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify; /* Justificar */
    hyphens: auto; /* Habilitar guiones */
    display: block; /* Asegura que ocupe su espacio */
}
/* --- Estilos para la NUEVA Sección Tipo Alert --- */
#info-alert-section {
    /* El padding general py-5 está en la section HTML */
}

.info-alert-block {
    background-color: #f8f9fa; /* Fondo gris claro tipo 'alert-light' */
    border-left: 5px solid var(--minga-red); /* Borde izquierdo distintivo */
    border-radius: 0.375rem; /* Bordes redondeados */
    padding: 2rem 1.5rem; /* Padding interno */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07); /* Sombra suave */
}
@media (min-width: 768px) {
    .info-alert-block {
        padding: 2.5rem 2rem;
    }
}

.info-alert-block .areas-transformacion-titulo {
    color: var(--minga);
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    /* text-align: center; */ /* Descomentar si prefieres centrado */
}

.info-alert-block .areas-transformacion-texto {
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify; /* Justificar texto */
    hyphens: auto;
    margin-bottom: 1.5rem; /* Espacio antes de la imagen */
}
.info-alert-block .areas-transformacion-texto:last-child {
    margin-bottom: 2rem; /* Más espacio si es el último antes de la imagen */
}


/* Estilo para la imagen dentro del alert */
.info-alert-block .alert-image {
    /* width: 100%; */ /* Ya está con w-100 en HTML */
    /* max-width: 100%; */ /* Ya está con img-fluid */
    height: auto; /* Mantiene proporción */
    border-radius: 0.25rem; /* Bordes redondeados leves para la imagen */
    display: block; /* Evita espacio extra debajo */
    margin-top: 1.5rem; /* Espacio sobre la imagen */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* Sombra opcional para la imagen */
}