/*== Contenedor del logo para "Quiénes Somos?" ==*/
.contenedor-logo-QS {
    width: 90%;
    max-width: 1270px;
    margin: 2px auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/*== Contenedor de contenido debajo del carrusel ==*/
.content-section-QS {
    background-color: #ffffff;
    padding: 1px;
    margin: 0 auto;
    max-width: 1200px;
}

@media (max-width: 768px) {
    .content-section-QS {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .content-section-QS {
        padding: 10px;
    }
}

/*== Estilos del menú de navegación para Quiénes Somos ==*/
.navbar-nav .nav-link-QS {
    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";
    font-size: 20px;
    color: #F1EFEC !important;
    display: flex;
    align-items: center;
    height: 115%;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none !important;
}

.navbar-nav .nav-link-QS.active,
.navbar-nav .nav-link-QS.show {
    background-color: #F1EFEC;
    color: #981861 !important;
    font-weight: bold;
    border-radius: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .navbar-nav .nav-link-QS {
        font-size: 16px;
    }
}

.nav-item.dropdown {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dropdown-toggle.dropdown-toggle-split {
    background-color: transparent;
    border: none;
    color: #F1EFEC;
    padding: 0.5rem 0.75rem;
    height: 115%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-nav .nav-link-QS.active,
.dropdown-toggle.active {
    background-color: #F1EFEC;
    color: #981861 !important;
    font-weight: bold;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
}

.bodyQS {
    font: 16px/1.5 "Georgia", serif;
    color: #422b7c;
    text-rendering: optimizeLegibility;
}

h1 {
    font-weight: bold;
    color: #981861;
    font-size: 55px;
    line-height: 1;
    padding: 0%;
    margin: 0%;
    text-indent: -12px;
}

p {
    margin: 0;
    padding-bottom: 16px;
}

/* Estilos para texto en múltiples columnas */
.cols {
    position: relative;
    column-count: 2;
    column-gap: 32px;
    column-fill: balance;
    border: solid #e4e4e4;
    border-width: 6px 0;
    padding: 21px 0;
    text-align: justify;
    word-break: break-word;
    hyphens: auto;
}

.cols p {
    border-bottom: 1px solid #aaa;
}

.cols p:first-letter {
    float: left;
    font-size: 72px;
    font-weight: bold;
    line-height: 1;
    margin-right: 14px;
}

/*== Sección de Misión, Visión y Código de Ética con Grid ==*/
.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

.titleMision {
    grid-column: 1 / -1;
    text-align: center;
}

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

.divCard1,
.divCard8,
.divCard10 {
    grid-column: 1;
}

.divCard2,
.divCard9 {
    grid-column: 2;
}

.divCard3,
.divCard4,
.divCard5,
.divCard6,
.divCard7,
.divCard11,
.divCard12 {
    grid-column: span 2;
}

.divCard1,
.divCard2,
.divCard3,
.divCard4,
.divCard5,
.divCard6,
.divCard7,
.divCard8,
.divCard9,
.divCard10,
.divCard11 {
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .parent {
        grid-template-columns: 1fr;
    }

    .titleMision,
    .divCard1,
    .divCard2,
    .divCard3,
    .divCard4,
    .divCard5,
    .divCard6,
    .divCard7,
    .divCard8,
    .divCard9,
    .divCard10,
    .divCard11 {
        grid-column: auto;
    }
}

/* Contenedor centralizado para las tarjetas con efecto flip */
.container {
    margin: 0 auto;
    padding: 10px;
}

/* Tarjeta responsive con efecto flip */
.card {
    position: relative;
    width: 100%;
    max-width: 500px;
    /* Ajuste clave: altura mínima para el contenido */
    min-height: 400px;
    height: auto;
    margin: 0 auto;
    background: #e8e8e5;
    border-radius: 15px;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Evita que el texto se salga en pantallas muy pequeñas */
    box-sizing: border-box;
    padding-bottom: 60px; /* Espacio para el `face.front` */
}

/* Ambas caras de la tarjeta ocupan el área completa */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* La parte trasera de la tarjeta es el fondo principal */
.face.back {
    background-color: #fff;
    z-index: 1;
    /* Para que el contenido se ajuste */
    overflow-y: auto;
    padding-bottom: 60px;
}

/* La parte delantera se comporta como una pestaña */
.face.front {
    background-color: #981861;
    border-radius: 0 0 15px 15px;
    height: 60px;
    bottom: 0;
    z-index: 2; /* Asegura que la pestaña esté siempre encima */
    justify-content: center;
    padding: 10px;
    transition: 0.4s ease;
}

/* Texto de la pestaña */
.face.front b {
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Animación al pasar el mouse */
.card:hover .face.front {
    height: 70px;
}

/* Contenedor del ícono */
.divMision {
    text-align: center;
}

/* Imagen del ícono */
#iconMision {
    max-width: 35%;
    height: auto;
}

/* Descripción en la parte trasera */
.face.back .desc {
    font-size: 1rem;
    line-height: 1.5;
    background-color: #422b7c;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ------------------------ */
/* Diseño responsivo de las tarjetas con efecto flip */
/* ------------------------ */
@media (max-width: 768px) {
    .card {
        min-height: 450px;
    }

    .face.front b {
        font-size: 1rem;
    }

    .face.back .desc {
        font-size: 0.95rem;
    }

    #iconMision {
        max-width: 40%;
    }
}

@media (max-width: 480px) {
    .card {
        min-height: 480px; /* Aumenta el alto para texto largo */
    }

    .face.front b {
        font-size: 0.95rem;
    }

    .face.back .desc {
        font-size: 0.85rem;
    }

    #iconMision {
        max-width: 45%;
    }
}


#codEtica {
    text-align: center;
}

.divCard3 a {
    text-decoration: none;
    color: #422b7c;
    font-weight: bold;
}

.divCard3 a:hover {
    color: #aaa;
}

/* =Principios del Servicio Público= */
.colsPrincipios {
    border-top: 6px solid #e4e4e4;
    border-bottom: 6px solid #e4e4e4;
    padding: 21px 0;
    word-break: break-word;
}

.colsPrincipios p {
    margin-bottom: 1rem;
    text-align: justify;
}

/* Lista en 2 columnas para escritorio */
.listPrincipios {
    column-count: 2;
    column-gap: 32px;
    list-style: none;
    padding: 0 60px;
    margin: 0;
}

.listPrincipios li {
    break-inside: avoid;
    margin-bottom: 0.5em;
    color: #981861;
}

/* 📱 Ajustes responsivos para los principios */
@media (max-width: 1024px) {
    .listPrincipios {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .listPrincipios {
        column-count: 1;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .listPrincipios {
        padding: 0 10px;
    }
}

/*== Estilos de los botones de descarga ==*/
.button {
    position: relative;
    width: 90%;
    max-width: 420px;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid #17795E;
    background-color: #209978;
    overflow: hidden;
    margin: 0 auto;
}

a.button {
    text-decoration: none;
}

.button,
.button__icon,
.button__text {
    transition: all 0.3s;
}

.button .button__text {
    transform: translateX(10%);
    color: #fff;
    font-weight: 600;
}

.button .button__icon {
    position: absolute;
    transform: translateX(calc(100% - 39px));
    height: 100%;
    width: 39px;
    background-color: #17795E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button .svg {
    width: 20px;
    fill: #fff;
}

.button:hover {
    background: #17795E;
}

.button:hover .button__text {
    color: transparent;
}

.button:hover .button__icon {
    width: 100%;
    transform: translateX(0);
}

.button:active .button__icon {
    background-color: #146c54;
}

.button:active {
    border: 1px solid #146c54;
}

.txtcodEt {
    font-size: 1.5rem;
    text-align: center;
}

/* Estilos de las imágenes en las secciones */
.img_qh {
    text-align: center;
    width: 100%;
}

.img_qh img {
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 30px;
}

.image_food {
    font-size: 14px;
    color: #444;
    margin-top: -45px;
}


.listPrincipios2 { 
    column-count: 2;          /* En pantallas grandes → dos columnas */
    column-gap: 32px;
    list-style: none;
    padding: 0 10%;           /* Usamos % en lugar de px → fluido */
    margin: 0;
}

/* Items de la lista */
.listPrincipios2 li {
    break-inside: avoid;
    margin-bottom: 0.8em;
    color: #981861;
    text-align: justify;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Para pantallas más pequeñas */
@media (max-width: 768px) {
    .listPrincipios2 {
        column-count: 1;      /* Mejor lectura en móvil: solo 1 columna */
        padding: 0 5%;        /* Ajuste de márgenes en móviles */
    }
}


/* Estilo de la tarjeta más grande con efecto flip */
.card2 {
    position: relative;
    width: 100%;
    max-width: 1800px;
    height: 750px;
    margin: 0 auto;
    background: #e8e8e5;
    border-radius: 15px;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Caras (front/back) toman todo el espacio */
.face {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

/* Parte trasera */
.face.back {
    background-color: #fff;
}

/* Parte delantera */
.face.front {
    background-color: #981861;
    border-radius: 15px;
    transition: 0.5s;
}

/* Texto frontal */
.face.front b {
    font-size: 4vw;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: 0.5s;
}

/* Hover reduce la altura frontal */
.card2:hover .face.front {
    height: 60px;
}

/* Hover reduce el tamaño de la letra */
.card2:hover .face.front b {
    font-size: 2em;
}

.acuerdo a {
    text-decoration: none;
    color: #422b7c;
    font-weight: bold;
}

.acuerdo a:hover {
    color: #aaa;
}

.divCard12 a {
    text-decoration: none;
    color: #981861;
    font-weight: bold;
}

.divCard12 a:hover {
    color: #aaa;
}

#imgGrafica1 {
    width: 200px;
    float: right;
}

/* Estilos para las imágenes de ENBG */
.img_ENGB img {
    max-width: 32%;
    height: auto;
    display: block;
    margin: 0 auto 30px;
}

/* Estilos para la imagen de Menbg */
.img_Menbg img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px;
}

/* Estilos para la imagen de Menbg2 */
.img_Menbg2 img {
    max-width: 100%;
    max-height: 400px;
    display: block;
    margin: 0 auto 30px;
}

/* Botones de ENBG para descarga */
.button2 {
    position: relative;
    width: 200px;
    height: 45px;
    cursor: pointer;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #17795E;
    background-color: #209978;
    overflow: hidden;
}

a.button2 {
    text-decoration: none;
}

.button2,
.button2__icon,
.button2__text {
    transition: all 0.3s;
}

.button2 .button2__text {
    transform: translateX(22px);
    color: #fff;
    font-weight: 600;
}

.button2 .button2__icon {
    position: absolute;
    transform: translateX(379px);
    height: 100%;
    width: 39px;
    background-color: #17795E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button2 .svg {
    width: 20px;
    fill: #fff;
}

.button2:hover {
    background: #17795E;
}

.button2:hover .button2__text {
    color: transparent;
}

.button2:hover .button2__icon {
    width: 148px;
    transform: translateX(0);
}

.button2:active .button2__icon {
    background-color: #146c54;
}

.button2:active {
    border: 1px solid #146c54;
}

.txtcodEt {
    font-size: 1.5rem;
    text-align: center;
}

.subtitle_ENBG {
    color: #981861;
    font-weight: bold;
}

.subtitle_ENBG2 {
    color: #981861;
    font-weight: bold;
    text-align: center;
}

.description {
    margin-top: -1px;    /* Espacio reducido */
    margin-left: 15px;   /* Alineación similar al título */
    line-height: 1.5;    /* Legibilidad */
    color: #555;
    text-align: justify;         /* Color opcional */
    font-size: 1.2rem;      /* Tamaño más grande (equivale aprox. a 19px) */
}

/*/////////////////////////////////////////////*/
/*//////////////Texto colapsable///////////////*/
/*/////////////////////////////////////////////*/
.texto-colapsable {
    max-height: 197.5px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: relative;
}

.texto-colapsable.expandido {
    max-height: 5000px;
}

.boton-leer-mas {
    background: none;
    border: none;
    color: #818283;
    font-weight: bold;
    cursor: pointer;
    margin-top: 11px;
    padding: 0;
}

.boton-leer-mas:hover {
    text-decoration: underline;
}

.obj_calidad {   /* Tabulación completa hacia la derecha */
    list-style: disc;    /* Mantiene las viñetas */
    margin-left: 15px;
    color:#981861
}

.obj_calidad li {
    /*margin-bottom: 10px;  Espacio entre ítems */
    text-align: justify; /* Opcional: texto justificado */
}



/*/////////////////////////////////////////////*/
/*////////////Aviso de Privacidad/////////////*/
/*/////////////////////////////////////////////*/
.aviso-privacidad-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.aviso-columna {
    flex: 1 1 400px;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    min-width: 280px;
}

.aviso-columna h3 {
    text-align: center;
    color: #981861;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
}

.aviso-lista {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.aviso-item {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.icono-pdf {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    fill: #cc0000;
    flex-shrink: 0;
}

.aviso-enlace {
    color: #003366;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s;
}

.aviso-enlace:hover {
    color: #981861;
}

@media (max-width: 768px) {
    .aviso-privacidad-container {
        flex-direction: column;
        align-items: center;
    }
}

/*/////////////////////////////////////////////*/
/*///1ra Sección de material descargable////*/
/*/////////////////////////////////////////////*/
.contenedor-tarjetas-enbg2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
}

.divCardENBG4,
.divCardENBG5 {
    flex: 0 0 auto;
    width: 300px;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

@media (max-width: 650px) {
    .contenedor-tarjetas-enbg2 {
        flex-direction: column;
        align-items: center;
    }

    .divCardENBG4,
    .divCardENBG5 {
        width: 90%;
    }
}

.wrapper-enbg2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.img-enbg2 img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.img-border-enbg2 {
    border: 2px dashed #981861;
    margin-top: 0.5rem;
}

.button-enbg2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.button-enbg2:hover {
    background-color: #1e7e34;
}

.button-enbg2__icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/*/////////////////////////////////////////////*/
/*///2da Sección de material descargable////*/
/*/////////////////////////////////////////////*/
.contenedor-tarjetas-enbg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
}

.divCardENBG1,
.divCardENBG2,
.divCardENBG3 {
    background-color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 12px;
    width: 300px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.wrapper-enbg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.img-enbg img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.img-border-enbg {
    border: 2px dashed #981861;
    margin-top: 0.5rem;
}

.button-enbg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.button-enbg:hover {
    background-color: #0056b3;
}

.button-enbg__icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

@media screen and (max-width: 768px) {

    .divCardENBG1,
    .divCardENBG2,
    .divCardENBG3 {
        width: 100%;
    }
}

/*/////////////////////////////////////////////*/
/*///Material Descargable////*/
/*/////////////////////////////////////////////*/
.tarjetas-ps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem;
    box-sizing: border-box;
}

.tarjeta-ps1,
.tarjeta-ps2 {
    flex: 0 0 auto;
    width: clamp(300px, 40vw, 420px);
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
}

.tarjeta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.tarjeta-img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tarjeta-borde {
    border: 2px dashed #28a745;
    margin-top: 0.5rem;
}

.tarjeta-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.tarjeta-boton:hover {
    background-color: #1e7e34;
}

.tarjeta-boton__icono svg {
    width: 20px;
    height: 20px;
    fill: white;
}

@media (max-width: 520px) {
    .tarjetas-ps {
        flex-direction: column;
        align-items: center;
    }

    .tarjeta-ps1,
    .tarjeta-ps2 {
        width: 90%;
    }
}

/*////////////////////////////////////////////////////////*/
/*////////////////Modal ENBG///////////////////////*/
/*////////////////////////////////////////////////////////*/

/* ====== ESTILOS GENERALES DEL MODAL (ÚNICOS) ====== */
.verificadores-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.verificadores-modal-content {
    background: #fff;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    border-radius: 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: verificadores-fadeIn 0.4s ease-in-out;
}

@keyframes verificadores-fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Botón de cerrar */
.verificadores-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    font-weight: bold;
}

.verificadores-close-btn:hover {
    color: #000;
}

.verificadores-modal-content h2 {
    font-size: 1.5rem;
    color: #981861;
}

.verificadores-modal-content p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    text-align: justify;
}

.verificadores-btn-ok {
    background: #422b7c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

.verificadores-btn-ok:hover {
    background: #0056b3;
}

/* Responsivo */
@media (max-width: 600px) {
    .verificadores-modal-content {
        padding: 15px;
    }
    .verificadores-modal-content h2 {
        font-size: 1.2rem;
    }
    .verificadores-modal-content p {
        font-size: 0.9rem;
    }
}

.modal_enbg{
    color: #981861;
}