/* -------------------------------------- */
/* SECCIÓN DE CONTENIDO (Misión/Visión) */
/* -------------------------------------- */

.content-section {
    width: 100%;
    /* MODIFICACIÓN: Se elimina height: 800px; para que se ajuste al contenido */
    min-height: 400px; 
    /* CAMBIO: Fondo del contenedor principal ahora es gris (#f9f9f9) */
    background-color: #f9f9f9; 
    padding: 40px 0;
    
    /* MODIFICACIÓN: Usamos flex-direction: column para apilar los contenedores */
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; /* Centra horizontalmente los elementos (incluida la nueva tarjeta) */
    
    /* Eliminamos estilos temporales de texto */
    font-size: 1em;
    color: #333;
}

/* Contenedor de las dos tarjetas (Misión y Visión) */
.cards-container {
    display: flex;
    gap: 30px; /* Espacio entre las tarjetas */
    max-width: 1000px; /* Limite el ancho total del contenedor */
    width: 90%; /* Ancho responsivo */
    justify-content: center;
    
    /* Centra las tarjetas verticalmente entre sí */
    align-items: center; 
}

/* Estilo de la nueva tarjeta de ancho completo (fondo azul/imagen) */
.full-card {
    /* Mismo ancho que cards-container */
    max-width: 1000px; 
    width: 90%; 
    
    /* Margen superior para separarla de las tarjetas de Misión/Visión */
    margin-top: 30px; 
    
    /* Color de fondo solicitado (azul principal) */
    /* REMOVIDO: background-color: #19477B; Ahora se usa la imagen con overlay */
    
    color: #FFFFFF; /* Texto blanco para contraste */
    
    padding: 30px;
    
    /* Borde redondeado solicitado */
    border-radius: 10px;
    
    /* Sombra opcional para realzar */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Transición de hover si se desea */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    text-align: center; /* Centramos el texto dentro */
    
    /* MODIFICACIÓN: Se establece el min-height al mismo valor que la tarjeta de Visión (360px) */
    min-height: 360px; 
    display: flex; /* Añadido para centrar verticalmente el contenido */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* NUEVO: Propiedades para la imagen de fondo con filtro azul */
    background-image: linear-gradient(rgba(25, 71, 123, 0.7), rgba(25, 71, 123, 0.7)), url("../Imagenes/MedicosReunion.png");
    background-size: cover; /* Cubre todo el área de la tarjeta */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.full-card h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 1.8em;
    color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 10px;
}

.full-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.6;
    opacity: 0.9;
}

/* Efecto de hover similar para la nueva tarjeta */
.full-card:hover {
    transform: scale(1.01); /* Un leve escalado, menos que las otras */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); 
    /* OPCIONAL: Puedes ajustar la opacidad del filtro en hover si quieres que la imagen se vea un poco más */
    /* background-image: linear-gradient(rgba(25, 71, 123, 0.6), rgba(25, 71, 123, 0.6)), url("../Imagenes/prueba1.png"); */
}

/* NUEVO: Estilo para una tarjeta de ancho completo que usa el estilo visual de info-card (Misión/Visión) */
.full-info-card {
    /* Hereda propiedades de centrado y ancho de .full-card */
    max-width: 1000px; 
    width: 90%; 
    margin-top: 30px; /* Margen superior para separarse de la tarjeta anterior */

    /* Hereda propiedades de estilo de .info-card */
    background-color: #ffffff; 
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: auto; /* Altura auto para ajustarse al contenido */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    text-align: left; /* Alineación de texto a la izquierda, como Misión/Visión */
    
    /* Borde superior con un tercer color distintivo (e.g., verde) */
    border-top: 5px solid #00a859; /* Green color for new card (Valores) */
}

/* Títulos y párrafos dentro de la nueva tarjeta */
.full-info-card h2 {
    /* Hereda el estilo de título de .info-card */
    font-family: 'Inter', sans-serif;
    font-weight: 600; 
    font-size: 1.5em;
    color: #19477B;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #EEE;
    padding-bottom: 10px;
}

/* ESTILO AÑADIDO: Formato para la lista de valores */
.full-info-card .valores-list {
    list-style: disc; /* Usar viñetas estándar */
    padding-left: 20px; /* Espacio a la izquierda para las viñetas */
    margin-top: 0;
}

.full-info-card .valores-list li {
    margin-bottom: 15px; /* Espacio entre cada punto de la lista */
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1em;
}

.full-info-card .valores-list strong {
    color: #19477B; /* Resalta el nombre del valor */
    font-weight: 600;
}


/* Animación de hover para la nueva tarjeta */
.full-info-card:hover {
    transform: scale(1.01); /* Un leve escalado similar al .full-card */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}


/* Estilo de cada cuadro/tarjeta (Misión y Visión) */
.info-card {
    /* CAMBIO: Fondo de la tarjeta ahora es blanco (#ffffff) */
    background-color: #ffffff; 
    padding: 30px;
    width: 100%; /* Permite que Flexbox maneje el ancho */
    flex: 1; /* Distribuye el espacio equitativamente */
    
    /* Borde redondeado solicitado */
    border-radius: 10px;
    
    /* Sombra solicitada */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Establece una altura mínima base para Misión (300px) */
    min-height: 300px; 
    
    /* Transición para el efecto suave de hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    /* Estilos internos de la tarjeta */
    text-align: left;

    /* Borde superior azul por defecto (para Misión) */
    border-top: 5px solid #19477B; 
}

/* Regla para hacer la tarjeta de Visión (segundo hijo) un 20% más alta y cambiar el color del borde superior */
.cards-container .info-card:nth-child(2) {
    /* 300px * 1.20 = 360px. Esto asegura que la tarjeta de Visión sea un 20% más alta */
    min-height: 360px; 
    
    /* NUEVO: Borde superior naranja para Visión */
    border-top: 5px solid #d76f00; 
}


/* Animación: Se agranda ligeramente al pasar el ratón */
.info-card:hover {
    transform: scale(1.03); /* Se agranda un 3% */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    /* Se elimina 'cursor: pointer;' */
}

.info-card h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* SemiBold para subtítulos/títulos de tarjeta */
    font-size: 1.5em;
    color: #19477B; /* Color principal de Galenos para el título */
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #EEE;
    padding-bottom: 10px;
}

.info-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular para el cuerpo de texto */
    font-size: 1em;
    line-height: 1.6;
}


/* Responsive: Ajustar a una columna en dispositivos pequeños */
@media (max-width: 765px) {
    .header-banner {
        /* Reducimos la altura en móvil */
        height: 150px; 
    }
    .banner-title {
        font-size: 1.8em;
    }
    .banner-description {
        font-size: 1em;
    }
    .content-section {
        /* Permite que la altura se ajuste al contenido cuando se apilan las tarjetas */
        height: auto; 
        min-height: 250px;
        padding: 30px 0;
    }
    .cards-container {
        flex-direction: column; /* Apila las tarjetas verticalmente en móvil */
        gap: 20px;
    }
    /* Eliminar min-height fijo en móvil para permitir que el contenido fluya */
    .info-card,
    .cards-container .info-card:nth-child(2) {
        min-height: auto; 
    }
    /* Ajusta margen de la tarjeta completa en móvil */
    .full-card,
    .full-info-card { /* Añadido el nuevo selector para móvil */
        margin-top: 20px;
        min-height: auto; /* También la hacemos auto en móvil */
    }
}