* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
}
html{
    overflow-x: hidden;
}
/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 5px;
  
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff3333;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e92727;
}
/* Fin scrollbar */

body { 
    background-color: rgb(255, 255, 255);
    height: 100vh;
}


li {
    list-style: none;
}
.textoRojo{
    color: #ff3333;
}
main a, footer a{
    text-decoration: none;
    color: #21242b;
    font-size: 1em;
    transition: 0.3s ease;
}
.navbar a{
    text-decoration: none;
    color: #21242b;
    font-size: 1em;
    transition: 0.3s ease;
}

header a:hover{
    color: #ff3333;
   
}
main a, footer a:hover{
    color: #ff3333;

}
a:active{
    color: rgb(255, 255, 255);
}
header {
    background-color: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    top: 0;
    left: 0;
    right: 0;
     padding: 20px 5%; /*el porcentaje sirve para la separacion de elementos */
    align-items: center;
    justify-content: center;
    position: fixed;
    display: flex;
    z-index: 102;
    justify-content: space-between;
}
main{
    z-index: -1;
}
.counter{
    background-color: rgb(255, 255, 255);
    min-height: 50vh;
    width: 100vw;

}
.visible{
    opacity: 1;
}

.navbar {
    width: 100%;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s ease-in-out;
}
.logo img{
    object-fit: cover;
    width: 250px;
}

.navbar .toggle_btn{
    color: #000000;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    transition: 0.5s ease;
}

.navbar .toggle_btn:hover{
    scale: 1.1;
}
.navbar .toggle_btn:active{
    scale: 0.95;
}
/* submenus */
.navbar ul{
    list-style: none;
}
.navbar ul li{
    position: relative;
    float: left;
    transition: 0.2s ease-in-out;

}
.navbar ul li a{
    font-size: 18px;
    padding: 2px 50px; /*separacion entre secciones nav*/
    padding-left: 20px;
    display: block;
    
}

.navbar ul li ul{
    position: absolute;
    left: 0;
    width: 350px;
    display: none;
    font-weight: 500;
    background: rgb(255, 247, 247);
    z-index: 1005;
}
.navbar ul li ul li:hover{
    background-color: #ffffff;
    color: #ff3333;
}
.navbar ul li ul li{
    width: 100%;
    backdrop-filter: blur(3px);
    border: 1px solid rgb(0, 0, 0);
    border-collapse: collapse;
}
.navbar ul li ul li a{
    font-size: 16px; 
}
.navbar ul li ul li ul{ 
    
    left: 350px;
    top: 0;
}

.navbar ul li:active > ul,
.navbar ul li:focus-within > ul{
    /* display: initial; Para submenus si no hay, usar  */
    display: block;
}
.navbar ul li ul li:hover > ul,
.navbar ul li ul li:active > ul,
.navbar ul li ul li:focus-within > ul{
    display: block;
}
/* Fin submenus */
#menu-bar{
    display: none;
}
header label{
    font-size: 20px;
    color:#000;
    cursor: pointer;
    display: none;
}
/* DROPDOWN MENU BUTTON*/
.action_btn{
    background-color: #ff3333;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s ease;
    text-decoration: none;
    white-space: nowrap;
}
.action_btn:hover{
    scale: 1.05;
    color: #050505;
}
.action_btn:active{
    scale: 0.95;
}

.dropdown_menu{
    display: none;
    position: absolute;
    right: 2rem;
    top: 60px;
    height: 0;
    width: 300px;
    background-color: rgba(255, 255, 255, 0.603);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden; /*oculta las opciones hasta que se presione el button*/
    transition: height 0.3s cubic-bezier(0.175, 0.885, 0.2, 1.275)
}
.dropdown_menu.open{
    height: 240px;
}
.dropdown_menu li{
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown_menu .action_btn{
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Fin DROPDOWN MENU BUTTON*/

/* Counter */
.counter h2{
    text-align: center;
    padding: 0 0;
    font-size: 40px;
    margin-top: 50px;
}
.wrapper {
    /* border: 1px solid rgb(255, 59, 59); Border PARA VER EL LIMITE DE AREA DE CONTADORES*/
    /* position: absolute; */
    width: 100vw;
    /* transform: translate(-50%,-50%); */
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    gap: 0px;

}
.container {
    margin-top: 40px;
    width: 28vmin;
    min-height: 200px;
    border: 2px solid #ff3333;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1em 0;
    position: relative;
    font-size: 16px;
    border-radius: 0.5em;
    background-color: #ffffff;
    border: 4px solid #ff3333;
}

.navbar i{
    font-size: 1em;
    color: #000; 
}
.counter i {
    color: #ff3333; 
    font-size: 4em;
    text-align: center;
}
span.num {
    color: rgb(0, 0, 0);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 2em;
    opacity: 0;
    transition: 1.5s ease-in-out;
}
span.num.visible{
    opacity: 1;
}

span.text {
    color: #000000;
    font-size: 1em;
    text-align: center;
    padding: 0 0;
    font-weight: 600;
    line-height: 16px;
}

/* Fin counter */

/* Card Slider */
.sliderWrapper{
    overflow: hidden;
    max-width: 1200px;
    /* el margin es lo que controla las dimensiones de las tarjetas */
    margin: 10px 70px 55px;
}

.cardContainer{
    background-color: rgb(212, 212, 212);
    width: 100vw;
    min-height: 55vh;
    justify-items: center;
    align-content: center;
}
.cardContainer h2{
    margin-top: 50px;
    color: #000000;
    text-align: center;
    font-size: 40px;
}
.cardList .cardItem{
    color: #000000;
    user-select: none;
    min-height: 40vh;
    width: 400px;
    padding: 20px 0 10px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 1px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(30px);
    border: 3px solid rgb(141, 141, 141);
}
.cardList .cardItem h2{
    font-size: 24px;
    margin-top: 0;
}
.cardList .cardItem .userImage{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 30px;
    border: 3px solid #ff3333;
    padding: 4px;
    object-fit: cover;
}
.cardList .cardItem .userImageTitle{
    width: auto;
    max-height: 85px;
    height: auto;
    margin-bottom: 10px;
    object-fit: cover;
}

.cardList .cardItem .userProfession{
    font-size: 1.15rem;
    font-weight: 500;
    margin: 10px 0 20px;
}
.cardList .cardItem .messageButton{
    font-size: 1.25rem;
    padding: 5px 25px;
    color: #030728;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
}
.cardList .cardItem .messageButton:hover{
    background: rgba(204, 204, 204, 0.7);
    
}

.sliderWrapper .swiper-pagination-bullet {
    background: #fff;
    height: 15px;
    width: 15px;
}

.sliderWrapper .swiperButton{
    color: #000000;
    margin-top: -50px;
    transition: 0.2s ease-in-out;
}

.sliderWrapper .swiperButton:hover{
    color: #ff3333;
}
/* Fin Card Slider */

/* modalSection */
.modalSection {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    transition: 0.5s;
    text-align: center;
}

.modalSection h2{
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    
}
.modalSection img{
    max-width: 40%;
    object-fit: cover;
    border: 3px solid #ff3333;
}

.modalSection button{
    position: relative;
    padding: 5px 20px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    color: #fff;
    background: #111;
    transition: 0.3s;
}
 button:hover{
    background-color: #ff3333;
}
main#blur.active{
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}
.modalSection .modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 50px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.363);
    background-image: url(Img/textura.png);
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    z-index: 1111;
}

.modalSection .modal.active  {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    
}

/* Fin modalSection */


/* slider */

.slider{

    min-height: 100vh;
    width: 100vw;
    position: relative;
    margin-top: 90px;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .list .item img::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(to top, #000 40%, transparent);
}
.slider .list .item .content{
    
    position: absolute;
    left: 5%;
    top: 20%;
    width: 600px;
    max-width: 80%;
    z-index: 1;
}
.slider .list .item .content p{
    font-size: 18px;
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}

.slider .list .item .content h2{
    font-size: 32px;
    margin: 0;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    background-color: #ff3333;
    padding: 0px 15px; /* dimensiones del cuadro de texto */
    backdrop-filter: blur(15px);
    color: white;
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
    
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
    padding: 10px 15px; /* dimensiones del cuadro de texto */
    box-shadow: 5px 23px 25px 3px #000000;
}
.arrows{
    position: absolute;
    top: 30%;
    right: 50px;
    z-index: 100;
}
.arrows button{
    background-color: rgb(238, 238, 238);
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: x-large;
    transition: 0.3s ease-in-out;
}
.arrows button:hover{
    scale: 1.1;
}
.thumbnail{
    position: absolute;
    bottom: 50px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
    color: white;
    font-weight: 400;
    align-items: center;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 180px;
    height: 200px;
    filter: brightness(.5);
    transition: .5s;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item:hover{
    scale: 1.05;
    transform: translateY(-10px);
}
.thumbnail .item.active{
    filter: brightness(1);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
}
/* Fin slider */

/* banner Eventos */
.eventos{

    background: url(Img/portadaCarrera.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    background-position: center 120px;
    align-items: center;
    text-align: center;
    align-content: center;
    justify-items: center;
}
.eventos #titulo{
    background-color: #ff3333;
    color: white;
    width: 100%;
    padding: 20px 0;
}
.eventos .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
  width: 100%;
}

.eventos .columna {
  background-color: #000000c2;
  border: 2px solid #ff3333 ;
  padding: 20px;
  flex: 1 1 auto;      
  min-width: 250px;     
  max-width: 400px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  color: white;
}
.eventos .columna ul li{
  text-align: left;
  /* list-style: disc; */

}

.registroBtn{
    justify-content: center;
    width: 70%;
    background-color: #ff3333;
    color: white;
    padding: 10px;
    font-size: 20px;
    border-radius: 15px;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
}
.registroBtn:hover{
    color: #ff3333;
    background-color: white;
    border-color: #ff3333;
    scale: 1.1;

}
/* Fin banner Eventos */

/* svgMapSection */
.svgMapSection{
    height: 100vh;
    width: 100vw;
    background: rgb(255, 255, 255);
    text-align: center;
}
.svgMapSection .svgMapText h1{
    padding: 40px 0;
    font-size: 32px;

}
.svgMapSection .svgMap .svgContainer{
    height: 100%;
    width: 100%;
    border: 0px solid #ff3333;
}
.svgMapSection .svgMap .svgContainer svg{
    height: auto;
    width: 50%;
}

.svgMapSection path{
    
    stroke: #000000;
    stroke-width: 8px;
    transition: fill 0.3s ease-in-out;
}
.svgMapSection .svgActive{
    fill: #ff3333;
}

.svgMapSection .svgInactive{
    fill: rgb(212, 212, 212);
}

.svgMapSection .svgActive path:hover{
    fill: rgb(255, 255, 255);
    stroke: #000000;
    stroke-width: 10px;
}
.svgMapSection .svgMapText span{
    background-color: #ff3333;
    color: #ff3333;
}

/* Fin svgMapSection */


/* Maps Section */
.mapsSection{
    height: auto;
    /* display: flex; */
    justify-content: center;
    gap: 5em;
    background-color: #ffffff;
    margin: 40px 0;
}
.boxMaps{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapsSection h1{
    font-size: 2.5em;
    color: #ffffff;
    background-color: #ff3333;
    border-radius: 0px 50px 50px 0;
    padding: 10px 100px;
    display: inline-block;
}

.boxMapsSelect{
    text-align: center;
    
}
.boxMaps h2{
    font-size: 1.5em;
    color: #ff3333;
}
.boxMaps label{
    font-size: 24px;
}
.boxMaps select{
    font-size: 1.5em;
    border-radius: 20px;
    text-align: center;
    padding: 0 15px;
    border: #000 4px solid;
}

.boxMaps li{
    font-size: 1em;
    color: #000;
    list-style:inside;
    font-size: 16px;
}

.boxMaps i{
    font-size: 1.5em;
    color: #ff3333;
    
}

.boxMaps iframe{
    padding-left: 100px;
    border-radius: 1rem;
    width: 70%;
    height: 80%;
    min-height: 500px;
    opacity: 0.7;
    transition: 0.3s ease-in-out;
    border: none;
}
.boxMaps iframe:hover{
    transform: scale(1.01);
    opacity: 1;
}
/* Fin Maps Section */

/* Footer */

footer{
    justify-content: center;
    align-content: end;
    position: relative;
    height: auto;
    padding: 20px 70px;
    background-color: rgb(255, 255, 255);
    color: white;
    border-top: 10px solid #ff3333;
}
footer .footerContainer{
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-gap: 20px; 
    
}
footer .sec h2{
    position: relative;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
}
footer .sec.aboutUs p{
    color: #000000;
}
footer .sec.aboutUs a span{
    font-size: 10px;
}
footer .sec.aboutUs .internacional{
    display: inline-block; 
    margin: 0 20px 0  0;
}
footer .footerContainer .internacional img{
    height: auto;
    width: 70px;
    margin-top: 10px;
    margin-left: 40px;
}

footer .sec.aboutUs .sci{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4,50px);
}
/* Aunque no este esto, tienen list style none los iconos */
footer .footerContainer .sci li{ 
    list-style: none;
}
footer .footerContainer .sci li a{ 
    display: inline-block;
    width: 36px;
    height: 36px;
    background: #ff3333;
    display: grid;
    align-content: center;
    justify-content: center;
    text-decoration: none;
}

footer .footerContainer .sci li a:hover{ 
    scale: 1.3;
}
footer .footerContainer .sci li a i{
    color: #ffffff;
    font-size: 1.5rem;
}
footer .footerContainer .quickLinks {
    position: relative;
}
footer .footerContainer .quickLinks ul li a{ 
    margin-top: 5px;
    margin-bottom: 8px;
    display: inline-block;
}
footer .footerContainer .contact .info{
    position: relative;
}
footer .footerContainer .contact .info li{
    display: grid;
    grid-template-columns: 30px 1fr;
    margin-bottom: 16px;
}
footer .footerContainer .contact .info li span{
    color: #000000;
}
footer .footerContainer .contact .info li {
    color: #555;
}
.copyrightText{
    width: 100%;
    background: #fff;
    padding: 10px 100px 20px;
    text-align: center;
    color: #555; 
    border-top: 1px solid rgba(0, 0, 0, 0.363);
}
/* Fin Footer */

/* Back To Top Button*/
.backToTop{
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff3333;
    border-radius: 5px;
    padding: 8px;
    transition: 0.4s ease-in-out;
    z-index: 101;
    color: white;
}

.backToTop:hover i{
    transform: translateY(-2px);
}

/* Fin Back To Top Button*/

/* Tabla Transparencia */

.containerBuscar{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

table {
    width: 100vw;
    text-align: center;
    font-size: 16px;
}
table, th, td{
    border: 1px solid #ddd;
    border-collapse:collapse;
    
}
td {
  background-color: #ffffff;
}
td:nth-child(even) {
    background-color: #d1d1d1;
}
.containerTabla{
    width: 100vw;
    font-size: 12px;
    margin-top: 100px;

}
.containerTabla h1{
    font-size: 32px;
    padding: 20px 0;
}

.containerTabla th{
    background-color: #ff3333;
    color: white;
}
.buscarButtons{
    width: 100vw;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
   
}
.buscarDelegacionBtn, .buscarFechaBtn{
    width: 50%;
    padding: 10px 10px;
    font-size: 20px;
    align-items: center;
    
}

/* Fin Tabla Transparencia */

/* Delegaciones */
.delegacionSec{
    height: auto;
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
}
.delegacionSec .boxMaps{
    height: auto;
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delegacionSec .boxMaps h1{
    font-size: 2.5em;
    color: #ff3333;
}
.delegacionSec .boxMaps h2{
    font-size: 1.5em;
    color: #ff3333;
}
.delegacionSec .boxMaps p{
    font-size: 1em;
    color: #000;
}
.delegacionSec .boxMaps li{
    font-size: 1em;
    color: #000;
    list-style:inside;
    font-size: 16px;
}

.delegacionSec .boxMaps i{
    font-size: 1.5em;
    color: #ff3333;
    
}

.delegacionSec .boxMaps iframe{
    padding-left: 100px;
    border-radius: 1rem;
    border: none;
    width: 50%;
    height: 80%;
    opacity: 0.7;
    transition: 0.3s ease-in-out;
}
.delegacionSec .boxMaps iframe:hover{
    transform: scale(1.01);
    opacity: 1;
}
/*Fin Delegaciones */

/* quienesSomosSection */
.quienesSomosSection{
    background-image: url(Img/textura.png);
    margin-top: 100px;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    gap: 5em;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.quienesSomosSection .boxMaps{
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;

}
.quienesSomosSection .boxMaps .boxMapsText{
    width: 60%;
    list-style: inside;
    text-align: left;
}

.quienesSomosSection .boxMaps h1{
    font-size: 28px;
    color: #ff3333;
    text-decoration: underline;
}

.quienesSomosSection .boxMaps .infoSector{
    display: flex; /* Usa flexbox para que la imagen y el texto estén alineados */
    align-items: center; /* Alinea verticalmente los elementos */

}

.quienesSomosSection .boxMaps h2{
    font-size: 1.5em;
    color: #000000;
}
.quienesSomosSection .boxMaps .boxMapsText .infoSector p{
    font-size: 16px;
}
.quienesSomosSection .boxMaps .boxMapsText li{
    font-size: 18px;
    list-style:disc;
}

.quienesSomosSection .boxMaps img{
    width: 40%; /* Ancho dinámico que se ajusta al contenedor */
    max-width: 600px; /* Límite máximo */
    height: 600px; /* Ajuste proporcional */
    border-radius: 50%;
    border: 3px solid #ff3333;
    padding: 4px;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 5px 10px 15px #ff9696;
}
.quienesSomosSection .boxMaps .sector{
    height: 100px;
    width: auto;
    border-radius: 0px;
    display: inline-block;
    border: 2px #ff3333;
    margin: 0 10px 0 0;
    box-shadow: 0 0px 0px #ff9696;
}

/* Fin quienesSomosSection */

/* serviciosSection */
.serviciosSection{
    background-image: url(Img/textura.png);
    min-height: 70vh;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 15px solid #ff3333;

}
.serviciosSection .boxMaps{
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapsSection .boxMapsText .slider{
    
    display: inline-block;
    width: 47%;
    height: 50vh !important;
    min-height: unset !important;
    
}

.mapsSection .slider .thumbnail{
    display: none;
}



.serviciosSection .boxMaps .boxMapsText{
    width: 50%;
    list-style: inside;
    
}
.serviciosSection .boxMaps h1{
    font-size: 2.5em;
    color: #ff3333;
}
.serviciosSection .boxMaps h2{
    font-size: 1.5em;
    color: #000000;
}
.serviciosSection .boxMaps .boxMapsText p{
    font-size: 20px;
}
.serviciosSection .boxMaps .boxMapsText li{
    font-size: 20px;
    list-style:none;
}

.serviciosSection .boxMaps img{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: 1px 5px 15px rgb(255, 124, 124);
    border: 3px solid #ff3333;
    padding: 4px;
    object-fit: cover;
}

.imgPortada{
    height: 100vh;
    min-width: 70vw;
    object-position: left; 
}

.imgPortada img{
    height: 100vh;
    object-fit: cover;
    width: 100%;
    object-position: center 60px; 
}

.boxMapsText .TextCapacitacion{
    display: inline-block;
    text-align: justify;
    margin: 0 30px 0 20px;
    font-size: 18px;
    width: 48%;
}
#catalogoButton {
    background-color: #ff3333;
    color: white;
    transition: 0.3s ease-in-out;
    padding: 5px;
    border: 2px black solid;
    border-radius: 10px;
    font-weight: 600;
    font-size: 20px;
}

#catalogoButton i {
    color: white;
    transition: 0.3s ease-in-out; 
}

#catalogoButton:hover {
    background-color: white;
    color: #ff3333;
    cursor: pointer;
}

#catalogoButton:hover i {
    color: #ff3333;
}


/* Fin serviciosSection */

/* RESPONSIVE DESIGN*/
@media screen and (max-width: 1024px){

    header{
        padding: 20px;
    }
    header label{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #ff3333;
        display: none;
    }
    header .navbar ul li{
        width: 100%;
        background-color: rgb(255, 255, 255);

    }
    .navbar ul li ul{
         position: relative;
         width: 100%;
    }
    .navbar ul li ul li{
        background: #d8d8d8;
        width: 100%;
        
    }
    .navbar ul li ul li a{
        font-size: 14px;
    }
    .navbar ul li ul li ul{
        width: 100%;
        left: 0;
        
    }
    .navbar ul li ul li ul li{
        width: 100%;
        left: 0;
        background: #ffdede;
    }
    .navbar .toggle_btn{
        display: block;
    }

    .counter h2 {
    font-size: 32px;

    }

    #menu-bar:checked ~ .navbar{
        display: initial;
    }
    .dropdown_menu{
        display: block;
    }

    .wrapper {
        width: 100vw;
    }
    .container {
        height: 26vmin;
        width: 26vmin;
        font-size: 14px;
    }
    .counter h2{
        margin-top: 110px;
    }
    .svgMapSection{
        height: 75vh;
    }


    .slider .list .item .content p{
        font-size: 20px;
    }
    
    footer{
        padding: 0px;
        width: 100vw;
    }
    footer .footerContainer{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;

    }
    .copyrightText{
        padding: 20px 40px 30px;
    }

    /* transparencia */
    table {
        font-size: 18px;
    }
    .buscarDelegacionBtn, .buscarFechaBtn{
        width: 100vw;
        padding: 10px 10px;
        font-size: 20px;
        align-items: center;
        
    }
    /* quienesSomosSection */
    .quienesSomosSection{
       height: auto;
       padding-top: 50px;

    }
    .quienesSomosSection .boxMaps{
        display: flex;
        flex-direction: column;     
    }

    .quienesSomosSection .boxMaps .infoSector{
        display:block; /* Usa flexbox para que la imagen y el texto estén alineados */
        align-items:flex-start; /* Alinea verticalmente los elementos */
        font-size: 12px;
    
    }

    .quienesSomosSection .boxMaps .boxMapsText{
        width: 100%;
    }

    .quienesSomosSection .boxMaps img{

        width: 300px;
        height: 200px;
        border-radius: 5px;
        object-fit: cover;
        margin: 20px;
    }
    /* serviciosSection */
    .serviciosSection{
        min-height: 70vh;
        padding-top: 0;
 
     }
     .serviciosSection .boxMaps{
         display: flex;
         flex-direction: column;     
         min-height: 100vh;
     }
  
     .serviciosSection .boxMaps .boxMapsText{
         width: 100%;
     }
 
     .serviciosSection .boxMaps img{
         width: 90%;
         max-height: 250px;
         border-radius: 5px;
         margin: 20px 0;
         
         
     }
    
    .mapsSection .boxMapsText .slider{
    
        width: 100%;
}
    .boxMapsText .TextCapacitacion{
        width: 100%;
        padding: 0 20px;
        margin: 0;
    }
}

@media screen and (max-width: 768px){
    .wrapper {
        top: 85rem;        
        flex-wrap: wrap;
        gap: 30px;
    }
    .counter h2{
        margin-top: 50px;
    }

    .counter i {
        font-size: 2em;

    }
    
    .container {
        width: calc(50% - 40px);
        margin-top: 0;
        min-height: 22vmin;
        font-size: 14px;
    }
    .cardContainer h2{
    font-size: 24px;
    margin-top: 20px;
    }
    

    .dropdown_menu {
        left: 2rem;
        width: unset;
    }

    header .navbar ul li{
        width: 100%;
    }

    header .navbar ul li ul{
        position: relative;
        width: 100%;
    }
    
    .cardList .cardItem .userImage{
        width: 150px;
        height: 150px;
    }
    .thumbnail .item .content{
    display: none;
}


    .svgMapSection{
        height: 65vh;
    }
    .svgMapSection .svgMap .svgMapText h1{
        font-size: 18px;
    }
    .svgMapSection .svgMap .svgMapText .svgCuadro{
        font-size: 8px;
    }
    

    .boxMaps{
        display: flex;
        flex-direction: column;     
        min-height: 100vh;
        margin: 0px;
    }

    .mapsSection h1{
        padding: 10px;
        margin: 20px 0;
        font-size: 18px;
    }
    .boxMaps h2{
        font-size: 1em;
    }
    .boxMaps li{
        font-size: 12px;
    }
    .boxMaps p{
        font-size: 14px;
    }

    .boxMaps iframe{
        padding-left: 0;
        width: 100%;
        height: 100%;
    }

    
    .delegacionSec .boxMaps{
        display: flex;
        flex-direction: column;     
    }
    .delegacionSec .boxMaps h1{
        font-size: 1.5em;
    }
    .delegacionSec .boxMaps h2{
        font-size: 1em;
    }
    .delegacionSec .boxMaps p{
        font-size: 14px;
    }
    .delegacionSec .boxMaps iframe{
        padding-left: 0;
        width: 100%;
        height: 100%;
    }
    .containerTabla h1{
    font-size: 18px;
}

    footer{
        padding: 25px;
    }
    footer .footerContainer{
        grid-template-columns: repeat(1 , 1fr);
        grid-gap: 20px;
    }
    .copyrightText{
        padding: 20px 40px 30px;
    }
    /* transparencia */
    table {
        font-size: 14px;
    }
    .quienesSomosSection .boxMaps .boxMapsText{
        font-size: 12px;
    }

    .serviciosSection .boxMaps .boxMapsText{
        font-size: 12px;
    }

    .imgPortada{
        height: 60vh;
        object-position: left; 
    }
    .imgPortada img{
        margin-top: 50px;
        height: 100%;
        object-position: left; 
}


}
@media screen and (max-width: 678px){
    .wrapper {
        flex-wrap: wrap;
        gap: 6px;
    }

    .logo img{
        width: 200px;
    }

    .thumbnail{
        height: 200px;
        user-select: none;      /* Previene que se pueda seleccionar el contenido */
        pointer-events: none;

    }
    .slider .list .item .content h2{
        font-size: 24px;
    }
    .arrows{
        top: 13%;
    }
    .slider .list .item .content p{
        font-size: 16px;
    }
    .svgMapSection{
        height: 55vh;
    }
    

    .boxMaps h1{
        font-size: 2em;
    }
    .boxMaps p{
        font-size: 12px;
    }
    .boxMaps iframe{
        width: 90%;
        height: 90%;
    }
    .boxMaps li{
        font-size: 12px;
    }

    .delegacionSec .boxMaps li{
        font-size: 12px;
    }
    .delegacionSec .boxMaps p{
        font-size: 12px;
    }
    footer .sec h2{
        font-size: 20px;
    }

    footer .sec.aboutUs p{
        font-size: 14px;
    }


    


    /* transparencia */
    table {
        font-size: 12px;
    }

    .quienesSomosSection .boxMaps .boxMapsText p, 
    .quienesSomosSection .boxMaps .boxMapsText li {
        font-size: 16px;
    }
    .quienesSomosSection .boxMaps img{
        width: auto;
        max-height: 300px;
        border-radius: 5px;
    }

    .serviciosSection .boxMaps .boxMapsText p, 
    .serviciosSection .boxMaps .boxMapsText li {
        font-size: 16px;
    }
}
@media screen and (max-width: 448px){
    .counter{
        min-height: 85vh;
    }
    
    .counter h2{
        margin: 20px;
        font-size: 18px;
    }
    .cardContainer{
        min-height: 55vh;
    }
    .cardContainer h2 {
        font-size: 16px;
        margin-top: 20px;
    }
    .action_btn{
    font-size: 14px;
    }

    .wrapper {
        /* cambia la altura de los contenedores */
        gap: 20px;
    }
    .container { 
        width: 100%;
        min-height: 29vmin;
        font-size: 12px;
    }
    
    .dropdown_menu {
        left: 2rem;
        width: unset;
    }
    .logo img{
        width: 150px;
    }
    .boxMaps h1{
        font-size: 18px;
    }

    .svgMapSection{
        height: 45vh;
    }
    .quienesSomosSection .boxMaps .boxMapsText p,
    .quienesSomosSection .boxMaps .boxMapsText li{
        font-size: 14px;
    }
    .serviciosSection .boxMaps .boxMapsText p,
    .serviciosSection .boxMaps .boxMapsText li{
        font-size: 14px;
    }

    .modalSection .modal{
        width: 90%;
        padding: 20px;
        font-size: 14px;
    }
    .modalSection .modal h2{

        font-size: 18px;
    }
    .imgPortada{
        height: 45vh;
        object-position: left; 
    }
    
}
@media screen and (max-width: 380px){
    
    .action_btn{
    font-size: 12px;
    padding: 5px;
    }

    .wrapper {
        /* cambia la altura de los contenedores */
        top: 58rem;
    }
    .cardContainer{
        min-height: 70vh;
    }
    .navbar ul li ul li a{
        font-size: 10px;
    }
    .quienesSomosSection{
        min-height: 140vh;
     }
    .quienesSomosSection .boxMaps .boxMapsText p,
    .quienesSomosSection .boxMaps .boxMapsText li{
        font-size: 13px;
    }
    .quienesSomosSection .boxMaps .boxMapsText h1{
        font-size: 24px;
    }

    .quienesSomosSection .boxMaps img{
        width: auto;
        max-height: 200px;
    }

    .serviciosSection .boxMaps .boxMapsText p,
    .serviciosSection .boxMaps .boxMapsText li{
        font-size: 13px;
    }

}