@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital,wght@1,900&display=swap');

body {
  padding: 0;
  margin: 0;

}

.contenedor_general {
  position: relative; /* Posicionamiento relativo para el contenedor general */
  width: 100%; /* Tomar todo el ancho disponible */
  height: 100vh; /* Altura total del viewport */
  overflow: hidden; /* Ocultar cualquier desbordamiento */
}

.contenedor_general img {
  position: absolute; /* Posición absoluta para la imagen */
  top: 0; /* Alineada al top del contenedor */
  left: 0; /* Alineada al left del contenedor */
  width: 100%; /* Ancho completo del contenedor */
  height: 100%; /* Altura completa del contenedor */
  object-fit: cover; /* Ajustar la imagen para cubrir completamente el contenedor */
}

.bgvid.back {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

.inner {
  position: absolute;
}



.inner-container {
  width: 400px;
  height: 400px;
  position: absolute;
  top: calc(50vh - -340px);
  left: calc(50vw - 410px);
  
  overflow: hidden;
  border-radius: 7px;
}

.inner-container1{
  width: 400px;
  height: 400px;
  position: absolute;
  top: calc(50vh - -340px);
  left: calc(50vw - -10px);  
  overflow: hidden;
  border-radius: 7px;
}

.inner-container2{
  width: 400px;
  height: 400px;
  position: absolute;
  top: calc(50vh - -430px);
  left: calc(50vw - 200px);  
  overflow: hidden;
  border-radius: 7px;
}
/* para paantallas de labtop */
@media screen and (min-width: 2299px) and (max-width: 2309px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -280px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -280px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -380px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}


/* para paantalla teacher leonel */
@media screen and (min-width: 1920px) and (max-width: 1920px) and (min-height: 943px) and (max-height: 943px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -260px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -260px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -340px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}


/* para paantallas de monitores viejos */
@media screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 855px) and (max-height: 855px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -200px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -200px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -280px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}



/* para paantallas medias graandes retanculares */
@media screen and (min-width: 1367px) and (max-width: 1900px) and (min-height: 642px) and (max-height: 800px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -220px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -220px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -290px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}
/* para paantallas viejas retangulares  */
@media screen and (min-width: 1000px) and (max-width: 1366px) and (min-height: 600px) and (max-height: 641px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -180px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -180px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -230px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}

/* para pantallas de 1024x768 */
@media screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 768px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
 top: calc(50vh - -180px);
    left: calc(50vw - 410px);   
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1 {
    width: 400px;
    height: 400px;
    position: absolute;
 top: calc(50vh - -180px);
    left: calc(50vw - -10px); 
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2 {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -230px);
    left: calc(50vw - 200px); 
    overflow: hidden;
    border-radius: 7px;
  }
}

/* para pantallas de 1920x1080 */
@media screen and (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
  .inner-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -220px);
    left: calc(50vw - 410px);    
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container1{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -220px);
    left: calc(50vw - -10px);  
    overflow: hidden;
    border-radius: 7px;
  }
  
  .inner-container2{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -290px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}

.box {
  position: absolute;
  height: 100%;
  width: 100%;
  font-family: 'Lobster', cursive;
  color: #ffffff;
  padding: 0px;
  border-radius: 7px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);
}

.box h1 {
  text-align: center;
  margin: 0px 0;
  font-size: 50px;
  color: rgb(248, 248, 248);
}

.box input {
  display: block;
  width: 300px;
  margin: 20px auto;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 7px;
  border: 0;
}

input::placeholder {
  color: rgb(255, 255, 255);
  font-family: 'Bodoni MT';
}

.signup {
  color: rgb(5, 5, 5) !important;
}

.box input:focus,
.box input:active,
.box button:focus,
.box button:active {
  outline: none;
}

.box button {
  background: #fcfcfb;
  border: 0;
  color: #040404;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  width: 130px;
  margin: 10px auto;
  display: block;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  /* Agregar sombra */
}

.box button:active {
  background: #000000;
}

.box p {
  font-size: 14px;
  text-align: center;
}

.box p span {
  cursor: pointer;
  color: #666;
}






/** Estilos generales **/
.img-telefono {
    display: block; /* Mostrar la imagen de teléfono por defecto */
}

.img-computadora {
    display: block; /* Mostrar la imagen de computadora por defecto */
}

/** Ocultar imágenes en pantallas específicas **/
@media (max-width: 767px) {
    .img-computadora {
        display: none; /* Ocultar la imagen de computadora en pantallas menores a 768px */
    }
}

@media (min-width: 768px) {
    .img-telefono {
        display: none; /* Ocultar la imagen de teléfono en pantallas mayores a 767px */
    }
}






/** Estilos generales **/
.telefono {
    display: block; /* Mostrar la sección de teléfono por defecto */
}

/** Ocultar en pantallas mayores a 767px **/
@media (min-width: 768px) {
    .telefono {
        display: none; /* Ocultar la sección de teléfono en pantallas mayores a 767px */
    }
}




/** Este es para telfono**/
@media (max-width: 767px) {
     .computadora,
    .tablet,
    .img-computadora { 
        display: none; /* Ocultar elementos destinados a computadoras y tabletas */
    }
.inner-containerT {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 10%);
    overflow: hidden;
    border-radius: 7px;
}

.inner-container1T {
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50% + 420px); /* Añade 420px para dejar un margen de 20px entre los contenedores */
    left: 50%;
    transform: translate(-50%, -80%);
    overflow: hidden;
    border-radius: 7px;
}

  
  .inner-container2T{
    width: 400px;
    height: 400px;
    position: absolute;
    top: calc(50vh - -180px);
    left: calc(50vw - 200px);  
    overflow: hidden;
    border-radius: 7px;
  }
}