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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}

.itemSelected {
  border-radius: 10px;
}

.site {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Estilos generales */

/* Panel principal */
.panel {
  width: min(1080px, 92vw);
  margin: 32px auto 32px;
  background: var(--panel);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-strong);
  padding: 28px 24px 28px;
}

.bgp {
  display: flex;
  flex-direction: column;
  background: #4B4585;
  width: 100%;
  height: 100vh;
  justify-content: center;
  font-family: Arial;
}

.logo {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.logo img {
  width: 100px;
}

.bg {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.encabezado {
  display: flex;
  color: #3DB4C4;
  font-size: 15px;
  line-height: 30px;
}

.icon_titulo {
  display: flex;
  margin-right: 10px;
}

.icon_titulo img {
  width: 60px;
}

.bg-contenido{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container-item{
display: flex;
}
.item{
width: 250px;
height:250px;
background-color: #3e6bae;
margin: 15px;
text-align: center;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;

}
.boton button{
border-radius: 50px;
background-color: #fff;
padding: 4px 35px 4px 35px;
color:#3e6bae;
font-weight: 550;
outline: none;
border-style: none;
}

@media (min-width: 1367px) {}

@media (min-width: 1281px) and (max-width: 1366px) {}

@media (min-width: 1025px) and (max-width: 1280px) {}

@media (min-width: 768px) and (max-width: 1024px) {
  
}

@media (min-width: 300px) and (max-width:626px) {
  .logo img{
width: 70px !important ;
  }
}
@media (min-width: 481px) and (max-width: 767px) {

}
@media (min-width: 320px) and (max-width: 480px) {
  .bgp{
    padding-left: 20px;
    padding-top: 80px;
  }
  .container-item{
    flex-direction: column;
      }
  .encabezado{
    margin-top: 200px !important;   
margin-right: 100px;
font-size:12px;
      }
}

@media (max-height:700px) and (max-width:622px){
  .bgp{
    padding-left: 20px;
    padding-top: 40%;
  }
}
@media (max-height:555px) and (max-width:622px){
  .bgp{
    padding-left: 20px;
    padding-top: 50%;
  }
}

@media (max-height:510px) and (max-width:622px){
  .bgp{
    padding-left: 20px;
    padding-top: 60%;
  }
}
@media (max-height:505px)  and (max-width:622px){
  .bgp{
    padding-left: 20px;
    padding-top: 40%;
  }
}