@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"');
html,body{
    
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    max-width: 100%;
    height: 0;
    margin: 0;
}

body {
    overflow-y: scroll;
    padding-right: 17px; /* El valor puede variar según el navegador y el sistema operativo */
}
/* Split the screen in half */
.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}
  
  /* Control the left side */
  .left {
    left: 0;
    /*background-image: url('../imagenes/left.jpeg');*/
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 50%;
    background-size:cover; 
    padding-top: 0px;
    width: 50%;

  }
  
  /* Control the right side */
  .right {
    padding-top: 60px;
    right: 0%;
    padding-right: 0px;
    background-color: rgb(139,27,26);
    width: 50%;
    color: white;
    overflow-y: auto; /* Permite desplazamiento si el contenido es más largo que el tamaño de la ventana */
  }
  /* Ajusta el estilo del contenedor principal */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  /* If you want the content centered horizontally and vertically */
  .centered {
    position: fixed;
    padding-top: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  /* Style the image inside the centered container, if needed */
  .centered img {
    width: auto;
    border-radius: 50%;
  }

  .clsEncab {
    
    background-image: url('../../logos/pleca.png');
    background-position: center center;  
    background-repeat: no-repeat;
    background-size: contain; /* Hace que la imagen de fondo cubra completamente el contenedor */
    max-width: 100%; /* Garantiza que el ancho no exceda el 100% del contenedor */
    /*height: auto; /* Permite que la altura se ajuste automáticamente según el ancho */
    padding-top: 60px;
    padding-bottom: 60px;
    
}



.fondo{
    /*background-color: #1C1C1B;*/
    background-image: url(../imagenes/izquierda.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
    min-height: 100vh;
    
}
.fondo img{
    width: 100%;
    height: auto;
}

/* Media query para pantallas pequeñas (móviles) */
/* Media query para pantallas pequeñas (móviles) */
@media screen and (max-width: 767px) {
  /* Cambia la dirección de la división a vertical */
  .split {
      flex-direction: column-reverse;
      height: auto;
  }

  /* Ajusta la parte izquierda para ocupar el 100% de la pantalla */
  .left {
      width: 100%;
      height: 30%; /* Ajusta según sea necesario */
      background-image: none; /* Elimina la imagen de fondo si es necesario */
  }

  /* Ajusta la parte derecha para ocupar el 100% de la pantalla */
  .right {
      width: 100%;
      height: 70%;
      padding-top: 0; /* Ajusta según sea necesario */
      background-color: rgb(139, 27, 26); /* Restaura el color de fondo si es necesario */
  }

  /* Ajusta el estilo del contenedor principal en dispositivos móviles */
  .container {
      height: auto;
  }
}