body {
    background-color: #F1EFEC;
    /* ESTO ES CRÍTICO: Añade un padding superior al body para compensar el navbar fijo. */
    /* Ajusta '100px' para que sea la altura exacta de tu navbar, más un poco si quieres un pequeño espacio. */
    padding-top: 100px;

}

/* Fondo general del navbar */
.navbar {
    background-color: #ffffff !important;
    /* #981861  Morado institucional */

}


/* Estilo base de los enlaces */
.navbar-nav .nav-link {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #981861 !important;
    /* Blanco */
    padding: 1.55rem 5rem;
    /*Asegura espacio adecuado */
    display: flex;
    align-items: center;
    /*mueve las flechas de los menús si se cambia la alineación*/
    height: 100%;
    /* Ocupar alto del navbar */
    transition: background-color 0.3s, color 0.3s;
}

/* Enlace activo (el seleccionado) */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    background-color: #F1EFEC;
    color: #981861 !important;
    /* Naranja institucional */
    font-weight: bold;
    border-radius: 0;
    height: 115%;
    display: flex;
    align-items: center;
}


/* Cambiar tamaño y tipo de letra de los elementos del menú en pantallas más grandes */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        font-size: 16.5px;
        /* Tamaño de los enlaces en pantallas grandes */
    }
}

/* Cambiar el color del ícono del botón hamburguesa */
/* Ícono hamburguesa personalizado en color #981861 */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(152,24,97,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Cambiar tamaño de fuente en el menú desplegable */
.dropdown-menu {
    border-color: #F1EFEC;
    font-family: 'Arial', sans-serif;
    /* Tipo de fuente */
    font-size: 14px;
    /* Tamaño del submenú */
    background-color: #F1EFEC;
}

/* Cambia el color de fondo y el texto cuando el cursor pasa sobre una opción */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #981861;
    /* Cambia esto por el color que quieras */
    color: #F1EFEC;
    /* Color del texto */
}


/*--*/
.contenedor-logo {
    width: 100%;
    max-width: 1270px;
    /* IMPORTANTE: El margen superior es ahora 0. El 'padding-top' del body se encarga del espacio superior. */
    /* --- CAMBIO AQUÍ: 1px de margen superior e inferior, 'auto' para centrar horizontalmente --- */
    margin: 15px auto;
    /*text-align: center; Centra el contenido dentro */
}

#header-log {
    max-width: 100%;
    height: auto;
}

/*******/
.carrusel-logo {
    position: relative;
    width: 80%;
    max-width: 800px;
    /* --- INICIO DE CAMBIOS IMPORTANTES --- */
    height: 100px;
    /* <--- ALTURA FIJA: Ajusta este valor según la altura de tu logo más grande */
    overflow: hidden;
    /* <--- OCULTA EL EXCESO: Evita que el contenido se desborde si el logo es más grande */
    /* --- FIN DE CAMBIOS IMPORTANTES --- */

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0 auto;
    /* Eliminamos margen inferior */
    text-align: center;
    /* Centra el contenido dentro */
}

.carrusel-logo img {
    width: 100%;
    /* --- INICIO DE CAMBIOS IMPORTANTES --- */
    height: 100%;
    /* <--- OCUPA EL 100% DE LA ALTURA FIJA DEL PADRE */
    /* --- FIN DE CAMBIOS IMPORTANTES --- */
    object-fit: contain;
    /* Mantiene la proporción de la imagen y la ajusta al contenedor */
    /* Si prefieres que la imagen cubra todo el espacio, incluso si se recorta un poco,
       puedes cambiar 'contain' por 'cover'. */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Estilos generales para la sección */
/* Estilos generales para la sección */
.content-section {
    background-color: #ffffff;
    /* Reducir o eliminar el padding superior para subir el contenido */
    padding: 10px 50px 50px 50px;
    /* <--- CAMBIO AQUÍ: 10px arriba, 50px derecha/abajo/izquierda */
    /* O si quieres eliminarlo por completo, usa: padding: 0 50px 50px 50px; */
    margin: 0 auto;
    max-width: 1200px;
    /*border-radius: 8px;*/
}

/* Responsividad: ajustamos el padding en pantallas más pequeñas */
@media (max-width: 768px) {
    .content-section {
        padding: 20px;
        /* Menos padding en pantallas más pequeñas */
    }
}

/* Responsividad para dispositivos aún más pequeños (móviles) */
@media (max-width: 480px) {
    .content-section {
        padding: 10px;
        /* Aún menos padding en dispositivos muy pequeños */
    }
}

/*Solo primer carrusel
/* Contenedor general del carrusel y los indicadores */
.carousel-wrapper {
    margin: auto;
    position: relative;
}

/* Indicadores personalizados debajo del carrusel */
.custom-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilo de los botones indicadores */
.custom-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d;
    /* Gris por defecto */
    border: none;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Indicador activo */
.custom-indicators .active {
    background-color: #422b7c;
    /* Azul Bootstrap */
    opacity: 1;
}

/* Indicadores más pequeños en pantallas pequeñas */
@media (max-width: 576px) {
    .custom-indicators button {
        width: 10px;
        height: 10px;
        gap: 6px;
    }
}

/* Estilo base para todos los indicadores: gris claro, tamaño uniforme */
/* Indicadores debajo del carrusel */
.custom-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
}

/* Botones base */
.custom-indicators button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background-color: #ccc;
    /* Gris base */
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

/* Botón activo */
.custom-indicators button.active {
    background-color: #800080;
    /* Morado activo */
    transform: scale(1.2);
}

/* Hover (al pasar el mouse) */
.custom-indicators button:hover {
    background-color: #999;
}

/* Responsivo: indicadores más pequeños en móvil */
@media (max-width: 576px) {
    .custom-indicators button {
        width: 10px;
        height: 10px;
    }
}


/*Botones de carrusel principal*/
/* === CONTENEDOR PRINCIPAL DEL CARRUSEL === */
.carousel-wrapper {
    position: relative;
    padding: 0 80px;
    /* Deja espacio a los lados para que los botones no tapen las imágenes */
    margin-bottom: 1px;
    /* Ajusta este valor para el espaciado deseado debajo del carrusel */
}

/* === BOTONES DE NAVEGACIÓN IZQUIERDA Y DERECHA === */
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    /* Evita que los botones ocupen mucho ancho */
    background-color: transparent;
    /* ¡Cambiado! Fondo transparente */
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    /* Ajusta la altura del botón (el área clicable) */
    height: 50px;
    /* Ajusta este valor según lo necesites */

    /* Asegura que el ícono (la flecha) se centre verticalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra horizontalmente también, si lo deseas */

    /* Opcional: Si quieres un borde delgado alrededor del área clicable */
    /* border: 1px solid rgba(128, 0, 128, 0.5); /* Morado semi-transparente */
    /* border-radius: 5px; */
}

/* Mueve el botón izquierdo fuera del carrusel */
.carousel-control-prev {
    left: -60px;
}

/* Mueve el botón derecho fuera del carrusel */
.carousel-control-next {
    right: -60px;
}

/* === PERSONALIZA LAS FLECHAS === */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    /* Quitamos la flecha por defecto de Bootstrap */
    display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 2px rgb(203, 35, 203);
    /* ¡Cambiado! Ahora el borde de la flecha es morado */
    border-width: 0 3px 3px 0;
    padding: 5px;
    transform: rotate(135deg);
    /* Flecha izquierda */
    transition: all 0.3s ease;
}

/* Flecha derecha: se rota para apuntar a la derecha */
.carousel-control-next-icon {
    transform: rotate(-45deg);
    /* Flecha derecha */
}

/* Efecto hover: cambia el color del borde de la flecha */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    border-color: #8A2BE2;
    /* Un morado ligeramente diferente o más claro para el hover */
}

/* Efecto hover para el botón completo (opcional, si quieres alguna retroalimentación visual al pasar el ratón) */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    /* Puedes poner un fondo muy sutil o un borde */
    /* background-color: rgba(128, 0, 128, 0.1); /* Morado muy sutil y transparente */
    /* border: 1px solid purple; */
    cursor: pointer;
    /* Indica que es clicable */
}

/* === RESPONSIVO: en pantallas pequeñas, acerca las flechas === */
@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0 30px;
    }

    .carousel-control-prev {
        left: -30px;
    }

    .carousel-control-next {
        right: -30px;
    }

    /* Opcional: flechas más pequeñas en móviles */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 24px;
        height: 24px;
    }
}

/*Inicio ajustes*/
/*Secciones complementarias*/

/* === Rejilla general === */
/* Contenedor principal tipo grid */
.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Dos columnas iguales en escritorio */
    gap: 16px;
    padding: 20px;
    margin-top: 10px;
    /* <--- ADD THIS LINE: Adjust '40px' for your desired spacing above the grid */
}

/* Tarjeta principal estilo Spotify (columna izquierda) */
.card {
    grid-column: 1;
}

/* Div2: al lado derecho de la tarjeta */
.div2 {
    grid-column: 2;
}

/* Pares e impares: se intercalan en columnas */
.div3,
.div5,
.div7,
.div9 {
    grid-column: 1;
    /* Lado izquierdo */
}

.div4,
.div6,
.div8,
.div10 {
    grid-column: 2;
    /* Lado derecho */
}

/* div11: ocupa ambas columnas al final */
.div11 {
    grid-column: span 2;
    /* Abarca todo el ancho */
}

/* Estilos generales para todos los divs adicionales */
.div2,
.div3,
.div4,
.div5,
.div6,
.div7,
.div8,
.div9,
.div10,
.div11 {
    background-color: #ffffff;
    padding: 1rem;
    /*border-radius: 8px;
    border: 1px solid #ccc;*/
}

/* === Responsivo === */
/* En pantallas pequeñas: todos en una sola columna */
@media (max-width: 768px) {
    .parent {
        grid-template-columns: 1fr;
        /* Una sola columna */
        padding: 10px;
    }

    .card,
    .div2,
    .div3,
    .div4,
    .div5,
    .div6,
    .div7,
    .div8,
    .div9,
    .div10,
    .div11 {
        grid-column: auto;
        /* Se acomoda uno debajo del otro */
    }
}

/*Fin ajustes */

/* === Tarjetas tipo Spotify === */
.card {
    --main-color: #fff;
    --bg-color: #7D0A0A;
    --sub-main-color: #B9B9B9;
    font-family: system-ui, sans-serif;
    background: var(--bg-color);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Contenedor de Spotify */
.container-Spotify {
    display: flex;
    /*flex-wrap: wrap;  Permite que los elementos se bajen si no caben */
    gap: 16px;
    justify-content: space-between;
    /* Espacio entre los elementos */
}

/* Responsividad para el contenedor de Spotify */
@media (max-width: 768px) {
    .container-Spotify {
        flex-direction: column;
        /* Los items se apilan uno sobre otro */
        align-items: right;
        /* Centra los items en pantallas pequeñas */
    }
}

.item {
    /*flex: 1;  para que ocupen el mismo ancho */
    text-align: center;
    /*background-color: #f2f2f2;*/
    padding: 1px;
    border-radius: 6px;
}

/* Ajustar el tamaño de las tarjetas en pantallas pequeñas */
@media (max-width: 480px) {
    .card {
        padding: 15px;
        /* Menos padding en pantallas pequeñas */
    }

    .item {
        padding: 8px;
        /* Menos padding */
    }
}

#logo-podcast {
    max-width: 300px;
    /* Tamaño máximo para que no se estire demasiado */
    border-radius: 10px;
    /*width: 100%;  La imagen ocupará el 100% del ancho del contenedor */
    /*height: auto;  Mantener la relación de aspecto */
}

/* Contenedor para el ícono de Spotify */
.spotify-icon {
    text-align: right;
    /* Alinea el contenido (el ícono) a la derecha */
    /*margin-top: 1px;     Espacio superior opcional */
    font-size: 24px;
    /* Tamaño del ícono */
}

.podcast-img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

/* Títulos y subtítulos */
.card__title {
    font-weight: 500;
    font-size: 28px;
    color: var(--main-color);
    text-align: right;
    margin-bottom: 10px;
}

.card__subtitle {
    font-weight: 400;
    font-size: 16px;
    color: var(--sub-main-color);
    text-align: left;
}

.card__title a {
    color: #ffffff;
    /* Color blanco */
    text-decoration: underline;

}

.card__subtitle a {
    color: #ffffff;
    /* Color blanco */
    text-decoration: none;
    /*  Quita el subrayado, opcional */
}

/* Opcional: cambiar color al pasar el mouse */
.card__title a:hover,
.card__subtitle a:hover {
    color: #ddd;
    /* Un blanco más tenue al pasar el mouse */
}

.btn-plusSpotify {
    margin-top: 15px;
    color: #ffffff;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Compatibilidad con navegadores más modernos */
    display: box;
    box-orient: vertical;
    line-clamp: 1;
}

.btn-plusSpotify:hover {
    color: #dddddd;
}

/*Menu Spotify*/
/* === CONTENEDOR GENERAL DEL REPRODUCTOR === */
.audio-player {
    background-color: #7D0A0A;
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* === FILA SUPERIOR: TIEMPO, OPCIONES Y PLAY === */
.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tiempo transcurrido */
.time {
    font-weight: bold;
    font-size: 14px;
}

/* Botón de opciones (...) */
.options {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

/* Botón redondo de reproducción */
.btn-play {
    width: 40px;
    height: 40px;
    background: #fff;
    color: #7D0A0A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-play:hover {
    background-color: #eee;
}

/* === FILA INFERIOR: BARRA Y BOTONES DE SALTO === */
.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botones de salto (15 seg) */
.btn.skip {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.btn.skip:hover {
    color: #ddd;
}

/* Barra de progreso */
.progress-container {
    flex: 1;
}

.progress-container progress {
    width: 100%;
    height: 6px;
    border-radius: 50px;
    background-color: #5a1212;
}

.progress-container progress::-webkit-progress-bar {
    background-color: #5a1212;
    border-radius: 50px;
}

.progress-container progress::-webkit-progress-value {
    background-color: #ffffff;
    border-radius: 50px;
}

/* === RESPONSIVE DESIGN === */

/* En pantallas grandes: ocultar barra + skip */
@media (min-width: 769px) {
    .progress-wrapper {
        display: none;
    }
}

/* En pantallas pequeñas: mostrar barra y salto */
@media (max-width: 768px) {
    .audio-player {
        gap: 10px;
    }

    .top-row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .progress-wrapper {
        display: flex;
    }
}

#follow_facebook {
    color: #3C3D37;
    margin-top: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}

/* Estilo para el icono de Facebook */
.facebook-icon {
    font-size: 30px;
    /* Cambia este valor según el tamaño que necesites */
    color: #0866ff;
    /* Azul oficial de Facebook */
    transition: transform 0.3s ease;
    /* Para animación al pasar el cursor */
}

.facebook-icon:hover {
    transform: scale(1.2);
    /* Agranda el icono ligeramente al pasar el mouse */
    color: #004a99;
    /* Opcional: cambia de tono al hacer hover */
}

.card_index {
    max-width: 100%;
    /* Nunca será más ancha que el contenedor */
    height: auto;
    /* Mantiene la proporción original */
    display: block;
    /* Elimina espacios debajo de la imagen */
    margin-top: 11px;
    /* Espacio opcional arriba de la imagen */
}

/*Carrucel antes del foot*/
/* Contenedor principal del carrusel */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
}

/* Carrusel de tarjetas */
.container-cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 0;
}

/* Ocultar scrollbar para estética */
.container-cards::-webkit-scrollbar {
    display: none;
}

/* Estilo individual de las imágenes */
.cards_img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Botones de navegación (izquierda y derecha) */
.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.nav.prev {
    left: 0;
}

.nav.next {
    right: 0;
}

.nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/*Estilos para los logos que están debajo de la barra de navegación*/
.bar_logs {
    align-items: center;
    justify-content: center;
}

/* Estilos Footer */
footer {
    background-color: #981861;
    /* Fondo oscuro */
    color: #fff;
    /* Texto blanco */
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    padding: 8px 10px;
    /* Espaciado interno */
    display: flex;
    flex-wrap: wrap;
    /* Permite que los elementos se acomoden en varias líneas */
    justify-content: space-between;
    /* Espaciado entre columnas */
    text-align: center;
}

/* Cada sección del footer */
.footer-section {
    flex: 1 1 200px;
    /* Crece, se encoge, tamaño base */
    margin: 3px;
}

/* Títulos del footer */
.footer-section h4 {
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    color: #d6d4d0;
    /* Color destacado */
}

/* Enlaces del footer */
.footer-section p {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.footer-section p:hover {
    color: #fff;
    /* Cambio de color al pasar el cursor */
}



/* Responsividad: ajusta las secciones para pantallas pequeñas */
@media (max-width: 768px) {
    footer {
        flex-direction: column;
        text-align: center;
    }


}

/*-Logo footer-*/
#witelog {
    max-width: 45%;
    height: auto;
}

/* Para evitar el relleno en hover */
.btn-outline-light.btn-social.mx-1:hover {
    background-color: transparent !important;
    /* Fuerza el fondo transparente al pasar el cursor */
    color: #ffffff !important;
    /* Mantiene el color del texto/icono blanco al pasar el cursor */
    border-color: #ffffff !important;
    /* Mantiene el color del borde blanco al pasar el cursor */
}

/* Para evitar el relleno al hacer click/activar (focus) */
.btn-outline-light.btn-social.mx-1:focus,
.btn-outline-light.btn-social.mx-1:active {
    background-color: transparent !important;
    /* Fuerza el fondo transparente al hacer click/activar */
    color: #ffffff !important;
    /* Mantiene el color del texto/icono blanco al hacer click/activar */
    border-color: #ffffff !important;
    /* Mantiene el color del borde blanco al hacer click/activar */
    box-shadow: none !important;
    /* Elimina cualquier sombra que Bootstrap pueda añadir */
}

/* Para el color del ícono Fa-Regular Fa-File */
.btn-outline-light.btn-social.mx-1 i {
    color: #ffffff !important;
    /* Asegura que el ícono sea blanco en estado normal */
}

.contenedor-logo-QS {
    width: 100%;
    max-width: 1270px;
    margin: 2px auto 20px auto;
    /* Centra horizontalmente el contenedor */

    /* Agregamos Flexbox para centrar la imagen dentro del contenedor */
    display: flex;
    /* Convierte el contenedor en un flex container */
    justify-content: center;
    /* Centra el contenido (la imagen) horizontalmente */
    align-items: center;
    /* Centra el contenido (la imagen) verticalmente, si el contenedor tiene altura */
    /* background-color: lightgray; /* Descomentar para depurar y ver el tamaño del contenedor */
}

/* Imagen del logo */
/* Cambié de #header-log-QS a #bar_logs según tu HTML proporcionado */
#bar_logs-cofepris {
    max-width: 60%;
    /* Asegura que la imagen no desborde su contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    /* Si la imagen era display: block y tenías margin: auto, esto podría ser redundante con flexbox */
    /* display: block; */
    /* margin: auto; */
}

/* Título que abarca todo el ancho */
.titleMision {
    grid-column: 1 / -1;
    /* Abarca ambas columnas */
    text-align: center;
}

#titleText {
    color: #422b7c;
    font-weight: bold;
}

/*/////////////////////////////////////////////////////*/
/*////////////Publicaciones de Facebook///////////////*/
/*/////////////////////////////////////////////////////*/

/* --- ESTILOS GENERALES --- */


.titulo {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.facebook-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}

/* --- TARJETAS --- */
.fb-card {
    background: #fff;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- ENCABEZADO --- */
.fb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #dddfe2;
}

.fb-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.fb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fb-page-name {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
}

.fb-date {
    font-size: 12px;
    color: #65676b;
}

.fb-share {
    background: #e4e6eb;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* --- CONTENIDO MULTIMEDIA --- */
.media {
    position: relative;
    width: 100%;
    height: 200px;
    background: #000;
}

.media img,
.media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
}

.controls button {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- TEXTO DE PUBLICACIÓN --- */
.content {
    padding: 15px;
}

.content p {
    font-size: 14px;
    color: #050505;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- PIE DE INTERACCIÓN --- */
.fb-footer {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 1px solid #dddfe2;
}

.fb-footer button {
    background: none;
    border: none;
    font-size: 14px;
    color: #65676b;
    cursor: pointer;
}

.fb-footer button:hover {
    text-decoration: underline;
}


/*/////////////////////////////////////////////////////*/
/*////////////SINTESIS///////////////*/
/*/////////////////////////////////////////////////////*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cv-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;

}

.cv-left {
    background-color: #981861;
    flex: 1 1 300px;
    padding: 20px;
    background-color: rgba(216, 131, 28, 0.9);
}

.cv-right {
    flex: 2 1 500px;
    padding: 20px;
    background-color: #f9f9f9;
}

.cv-photo {
    width: 100%;
    max-width: 200px;
    border-radius: 10px;
    display: block;
    margin: 0 auto 20px auto;
}

.cv-block {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.cv-section {
    margin-bottom: 30px;
}

.cv-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #981861;
}

.cv-subtitle {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #dfdede;
    text-align: center;
}

.cv-contacto {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #222;
}

.cv-text {
    font-size: 15px;
    margin-bottom: 5px;
    color: #dddddd;
}

.cv-text a {
    color: inherit;
    text-decoration: none;
    word-wrap: break-all; /* Solución para el desbordamiento */
}

.cv-diplomado {
    font-size: 15px;
    margin-bottom: 10px;
    color: #981861;
}

.cv-pincipal {
    font-size: 18px;
    margin-bottom: 5px;
    color: #981861;
}

.cv-second {
    font-size: 18px;
    color: #422b7c;
}

.cv-list {
    list-style: disc;
    margin-left: 20px;
    text-align: justify;
}

.cv-list li {
    font-size: 14px;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .cv-container {
        flex-direction: column;
    }
    .cv-left,
    .cv-right {
        flex: 1 1 100%;
    }
}

.cv-left-block {
    margin-bottom: 20px;
}

/*/////////////////////////////////////////////////////*/
/*////////////FOTOS DIRECTORIO/////////////*/
/*/////////////////////////////////////////////////////*/
/* Contenedor general del directorio */


/* Cada tarjeta del directorio */
/* Contenedor de cada tarjeta del directorio */
/* Sección del Directorio */
/* Estilos para el contenedor principal de todas las tarjetas */
.divCard5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sección del Directorio */
.directorio {
    margin: 20px;
    font-family: Arial, sans-serif;
}

.directorio h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #981861;
    margin-bottom: 1rem;
}

.directorio h2 span {
    color: #007b8f;
}

/* Contenedor de cada tarjeta */
.dir-parent {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    max-width: 700px; /* Mantener el ancho máximo para el diseño de escritorio */
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Imagen del directorio */
.dir-photo img {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Información del directorio */
.dir-info {
    flex: 1;
    font-size: 1rem;
    color: #333;
}

.dir-info p {
    margin: 6px 0;
}

/* Estilos para enlaces */
.dir-info a {
    color: #422b7c;
    text-decoration: none;
}

.dir-info a:hover {
    text-decoration: underline;
    color: #7a797c;
}

/* Media query para hacer el diseño responsivo en pantallas pequeñas */
@media (max-width: 600px) {
    .dir-parent {
        flex-direction: column; /* Apila los elementos en columna */
        align-items: center; /* Centra los elementos */
        max-width: 90%; /* Ajusta el ancho para que no se desborde */
    }

    .dir-photo {
        width: 100%; /* Ocupa todo el ancho */
        text-align: center; /* Centra la imagen */
    }

    .dir-photo img {
        margin: 0 auto; /* Centra la imagen con márgenes automáticos */
    }

    .dir-info {
        text-align: center; /* Centra el texto de la información */
    }
}


/*/////////////////////////////////////////////////////*/
/*////////////Informaci{on carrusel/////////////*/
/*/////////////////////////////////////////////////////*/
.unique-flex-wrapper {
    display: flex;
    align-items: center;
    /* Centra verticalmente la imagen y el texto */
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem;
    box-sizing: border-box;
    flex-wrap: wrap;
    /* Para que en pantallas pequeñas se apile */
}

/* Imagen */
.unique-image-section {
    flex: 0 0 auto;
    /* La imagen no se estira */
}

.unique-image-container {
    max-width: 200px;
    /* Tamaño máximo de la imagen */
}

.unique-responsive-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    /* opcional */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Texto */
.unique-text-section {
    flex: 1;
    /* Ocupa el resto del espacio */
    text-align: center;
    /* Centra el texto horizontalmente */
}

/* Responsive */
@media (max-width: 768px) {
    .unique-flex-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .unique-image-container {
        max-width: 150px;
    }
}

/*/////////////////////////////////////////////////////*/
/*////////////Imagen info/////////////*/
/*/////////////////////////////////////////////////////*/
.unique-post-text-image {
    display: block;
    max-width: 30%;
    height: auto;
    margin: 2rem auto;
    /* separa la imagen del texto y la centra */
    border-radius: 12px;
    /* esquinas suaves */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    /* sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
    /* mantiene proporción de la imagen */
}

.unique-post-text-image:hover {
    transform: scale(1.02);
    /* ligero zoom */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    /* sombra más intensa */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .unique-post-text-image {
        margin: 1.5rem auto;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .unique-post-text-image {
        margin: 1rem auto;
        border-radius: 6px;
    }
}

/*/////////////////////////////////////////////////////*/
/*////////////Imagen de Derechos/////////////*/
/*/////////////////////////////////////////////////////*/
.unique-image-text-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    /* espacio entre imagen y texto */
    flex-wrap: wrap;
    /* para que se apilen en pantallas pequeñas */
    padding: 1rem 0;
}

/* Imagen: mantenemos tus propiedades */
.unique-image-container-v2 {
    flex: 1 1 300px;
    text-align: center;
}

.unique-responsive-image-v2 {
    max-width: 80%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
}

.unique-responsive-image-v2:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Texto */
.unique-text-container-v2 {
    flex: 1 1 300px;
    max-width: 500px;
    text-align: left;
}

.unique-text-title-v2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #422b7c;
    text-align: center;
    /* centrado solo del título */
}


.unique-text-paragraph-v2 {
    font-size: 1rem;
    line-height: 1.5;
    text-align: justify;
    color: #555;
}

/* Responsivo */
@media (max-width: 768px) {
    .unique-image-text-section {
        flex-direction: column;
        text-align: center;
    }

    .unique-text-container-v2 {
        text-align: center;
    }
}

/*/////////////////////////////////////////////////////*/
/*////////////Banner de Derechos/////////////*/
/*/////////////////////////////////////////////////////*/


.unique-banner p {
    color: #422b7c;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* Responsividad */
@media (max-width: 768px) {
    .unique-banner p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .unique-banner {
        padding: 0.8rem 1rem;
        border-radius: 8px;
    }

    .unique-banner p {
        font-size: 0.9rem;
    }
}

/*/////////////////////////////////////////////////////*/
/*////////////Imagen de credencial/////////////*/
/*/////////////////////////////////////////////////////*/
.unique-text-image-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    /* espacio entre texto e imágenes */
    flex-wrap: wrap;
    /* acomoda en móviles */
}

.unique-text-container {
    flex: 1;
    min-width: 250px;
}

.unique-image-container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* imágenes una debajo de la otra */
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.unique-side-image {
    max-width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unique-side-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Responsivo */
@media (max-width: 768px) {
    .unique-text-image-section {
        flex-direction: column;
        text-align: center;
    }

    .unique-image-container {
        flex-direction: row;
        /* imágenes en línea en móvil */
        flex-wrap: wrap;
    }

    .unique-side-image {
        max-width: 45%;
    }
}

/*/////////////////////////////////////////////////////*/
/*////////////Tablas/////////////*/
/*/////////////////////////////////////////////////////*/
/* Contenedor para que la tabla sea desplazable en pantallas pequeñas */
.table-responsive {
    overflow-x: auto;
}

/* Diseño principal de la tabla */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Encabezado */
.styled-table thead {
    background-color: #004080;
    color: #fff;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Alternar color en filas */
.styled-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover en filas */
.styled-table tbody tr:hover {
    background-color: #f1f7ff;
}

/* Enlaces */
.styled-table a {
    text-decoration: none;
    color: #004080;
    font-weight: bold;
}

.styled-table a:hover {
    text-decoration: underline;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {

    .styled-table th,
    .styled-table td {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* Hace que el cursor cambie al pasar por la fila */
.styled-table tbody tr {
    cursor: pointer;
}

/* Opcional: efecto hover */
.styled-table tbody tr:hover {
    background-color: #f0f0f0;
}


/*/////////////////////////////////////////////////////*/
/*////////////Avance de Indicadores/////////////*/
/*/////////////////////////////////////////////////////*/
/* Contenedor principal de la tabla */
.tabla-sin-lineas {
    display: grid;
    /* Usamos grid para crear la tabla */
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas de igual ancho */
    gap: 10px;
    /* Espacio entre celdas */
    max-width: 100%;
    /* Para que no se pase del contenedor */
    margin: 0 auto;
    /* Centrar horizontalmente */
    padding: 10px;
}

/* Cada celda de la tabla */
.tabla-sin-lineas__celda {
    background-color: #f0f0f0;
    /* Color de fondo suave */
    padding: 20px;
    border-radius: 6px;
    /* Bordes redondeados para mejor estilo */
    box-sizing: border-box;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    /* No tiene bordes visibles */
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 600px) {
    .tabla-sin-lineas {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móvil */
        gap: 8px;
        padding: 8px;
    }

    .tabla-sin-lineas__celda {
        padding: 15px;
        font-size: 0.9rem;
    }
}

/* Adaptación para pantallas muy pequeñas */
@media (max-width: 350px) {
    .tabla-sin-lineas {
        grid-template-columns: 1fr;
        /* 1 columna */
    }
}

.tabla-sin-lineas__celda {
    background-color: #f0f0f0;
    padding: 0;
    /* quitamos padding de la celda para que no afecte el enlace */
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    display: flex;
    /* Hacemos la celda un contenedor flex */
    align-items: center;
    /* Centramos verticalmente */
    justify-content: center;
    /* Centramos horizontalmente */
    height: 80px;
    /* Altura fija para que se note bien el enlace */
    overflow: hidden;
    /* Para evitar que el texto sobresalga */
}

/* El enlace ocupa todo el contenedor */
.tabla-sin-lineas__celda a {
    display: flex;
    /* También flex para centrar contenido */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #981861;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 0 10px;
    /* algo de relleno horizontal */
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.tabla-sin-lineas__celda a:hover {
    background-color: #d0e7ff;
}

/*/////////////////////////////////////////////////////*/
/*////////////Títulos de Secciones/////////////*/
/*/////////////////////////////////////////////////////*/
/* Contenedor del título con margen inferior */
.section-title {
    margin: 20px 15px;
    /* Margen externo: superior e inferior 20px, laterales 15px */
    text-align: center;
    /* Mantiene el título alineado a la izquierda */
}

/* Estilo del título dentro del contenedor */
.section-title h1 {
    font-size: 2rem;
    /* Ajusta tamaño del título */
    margin: 0;
    /* Elimina margen por defecto */
    color: #422b7c;
    /* Color opcional */
}

/*/////////////////////////////////////////////////////*/
/*////////////Contactanos Index///////////////*/
/*/////////////////////////////////////////////////////*/
/* Contenedor principal */
.contact-card {
    text-align: center;
    padding: 20px;
    border: 5px solid #9e165f;
    /* Color del borde */
    max-width: 500px;
    margin: 20px auto;
    background: #f9f9f9;
    border-radius: 10px;
}

/* Título */
.contact-card h2 {
    color: #d8831c;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Subtítulo */
.contact-card p {
    color: #327cea;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Enlace del teléfono */
.phone-link {
    text-decoration: none;
    font-size: 35px;
    font-weight: bold;
    color: #4b1e76;
    display: inline-block;
    transition: 0.3s ease;
}

/* Ícono del teléfono */
.phone-icon {
    width: 40px;
    vertical-align: middle;
    margin-right: 10px;
}

/* Efecto hover */
.phone-link:hover {
    color: #3775d1;
}

/*/////////////////////////////////////////////////////*/
/*////////////Modal///////////////*/
/*/////////////////////////////////////////////////////*/
/* ====== Modal ====== */
.modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    background: #fff;
    border-radius: 8px;
    max-width: 90%;
    width: 900px;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #f5f1f1;
    cursor: pointer;
}

.modal-content iframe {
    width: 100%;
    height: 80vh;
    border: none;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .modal-content {
        width: 100%;
        height: 90%;
        border-radius: 0;
    }

    .modal-content iframe {
        height: 70vh;
    }
}

/* ====== Imágenes de Contacto ====== */
.img_contacto {
    width: 600px;
    height: 200px;

}

/*/////////////////////////////////////////////////////*/
/*////////////Ubicaciones de cada oficina///////////////*/
/*/////////////////////////////////////////////////////*/
/* Nuevo contenedor principal */
.content-wrapper {
    background-color: #ffffff;
    padding: 1px;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

/* Sección de contacto */
.contact-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Para que sea responsivo */
    width: 100%;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* Información a la izquierda */
.contact-info {
    flex: 1 1 55%; /* Ocupa 55% del ancho */
}

/* Imagen a la derecha */
.contact-image {
    flex: 1 1 40%; /* Ocupa 40% del ancho */
}

.contact-image img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

/* Regiones debajo */
.contact-regions {
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
    text-align: justify;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1.5;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column;
    }
    .contact-info, .contact-image {
        flex: 1 1 100%;
    }
}

.map-btn {
    width: 50px;
    height: 40px;
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.map-btn:hover {
    transform: scale(1.1);
}

/* Cambiar color y tamaño del texto del enlace */
.btn-location {
    color: #1E90FF;        /* Color del texto (azul, por ejemplo) */
    font-size: 18px;       /* Tamaño del texto */
    text-decoration: none; /* Quita el subrayado */
    font-weight: bold;     /* Opcional: pone el texto en negritas */
}

/* Opcional: cambiar color al pasar el mouse */
.btn-location:hover {
    color: #FF4500;        /* Color al hacer hover */
}

.phone-link-contact {
    text-decoration: none;
    font-size: 15px;
    color: #000000;
    display: inline-block;
    transition: 0.3s ease;
}

.phone-link-contact:hover {
    color: #FF4500;        /* Color al hacer hover */
}

.idRiesgos {
    display: block;
    max-width: 50%;   /* Ajusta al ancho disponible */
    margin: 0 auto;
    height: auto;
}

.accion_coeprist{
    color: #9e165f;
    text-align: center;
    font-size: 25px;
}

.text_nom{
    text-align: justify;
}