/* === Google Font Import - Poppins === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  display: flex;
  
}
.pb-10{
  padding-bottom: 10px;
}
section{
  position: relative;  
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
}

.swiper{
  width: 100%;
}

.swiper-slide.card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  margin: 10px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  height: 190px;
  cursor:pointer;
}
 
.swiper-slide.card .card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  position: relative;
  z-index: 100;
  border-radius: 15px;
  background-size: cover;
  box-sizing: border-box;
  height: 100%;
}
.swiper-slide.card .card-image{
  background-size: cover;
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 100%;
  top: 0px;
  border-radius: 15px;
 
 }
 .swiper-slide.card .card-image-layout{ 
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0px;
  border-radius: 15px;
  background: linear-gradient(to bottom, transparent, #000000eb);
 }
 .swiper-slide.card:hover .card-image-layout{
  background: linear-gradient(to bottom, transparent, #00000069);
 }
.swiper-slide.card.active .card-image-layout{ 
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0px;
  border-radius: 15px;
  background: transparent; 
 }
 .swiper-slide.card .name-profession{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 109px;
  color: #fff;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 9;
  padding:4px 10px 4px 10px;
} 
.swiper-slide.card.active .name-profession{
  background:#000000a4;
  padding:4px 10px 4px 10px;
  border-radius: 6px;
}
h5.d-flex.justify-content-between span:first-child{
  font-size: 12pt;
}
h5.d-flex.justify-content-between span:last-child{
  color:#CF0100;
}
.name-profession .name{
  font-size: 20px;
  font-weight: 600;
}

.name-profession .profession{
  font-size:15px;
  font-weight: 500;
}

.card.active{
  border:2px solid #ff5000a3;
  padding:2px;
  box-sizing: border-box;
}

 
.swiper-pagination{
  position: absolute;
}

.swiper-pagination-bullet{
  height: 7px;
  width: 26px;
  border-radius: 25px;
  background: #ff5000a3;
}

.swiper-button-next, .swiper-button-prev{
  opacity: 0.7;
  color: #ffffff;
  transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
  opacity: 1;
  color: #ffffff;
}
 
.container-body{
  display: block;
    
    overflow: auto;
    box-sizing: border-box;
    padding-top:300px;
}
.text-title{
  text-align:center;
  color:#CF0100;
  font-weight: bold;
}
.board {
  max-width: 400px;
  background-image: url(images/pizarra.avif);
  background-size: cover;
  display: block;
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
  display: block;
  margin: 10px auto;
}
.board > div {
  padding: 20px;
  border: 2px solid #fff;
  display: block;
  color:#fff;
}
.board-logo {
  width: 120px;
  display: block;
}
.m-auto {
  margin: 0 auto !important;
}
.board-logo {
  width: 120px;
}
.m-auto {
  margin: auto !important;
}
.board-title {
  text-align: center;
  color: #fff;
  font-family: Playbill;
  font-size: 30pt;
}
.board-subtitle {
  color: #F2C911;
  text-align: center;
  font-family: Tahoma;
  font-size: 16pt;
}
.board table td {
  color:#fff;
  padding:3px;
}
#toggle{
  display: none;
}
@media only screen and (max-width: 600px) {
  #toggle{
    display: inherit;
  }
}