@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,500,700');
/* ==========================================================================
   Global Styles
   ========================================================================== */

   .row {
        margin-right: 0;
        margin-left: -15px;
    }

   .wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows:auto 1fr auto;
  }

   .contenedorBack {
       height: 110vh;
       width: 100%;
       display: flex;
       flex-direction: column;
       color: white;
       background-image: url('../img/ofertas2025/escritorio/fondoAlumnos.jpg'); 
       background-size: cover; /* Cubrirá todo el contenedor */
       background-position: left center; /* Centra la imagen */
       background-repeat: no-repeat; /* No repite la imagen */
       box-sizing: border-box;
       padding: 0;
       margin-top: -20px; /*AJUSTAMOS EL MARGEN SUPERIOR DE LA IMAGEN CON EL NAV*/
   }
   .contenedorCh {
       height: 50vh; /* Altura de la ventana */
       width: 50%;
       display: flex;
       flex-direction: column;
       align-items: center;  /*Para centrar en toda la linea*/
       color: white;
       background-size: cover; /* Cubrirá todo el contenedor */
       background-repeat: no-repeat; /* No repite la imagen */
       box-sizing: border-box;
       margin: 20px ;
   }
   .imgCh1 {
       width: 40%;
       height: auto;
       display: none;
   }

   .imgCh2 {
       width: 40%;
       height: auto;
       display: none;
   }

   .imgCh3 {
       width: 40%;
       height: auto;
       display: none;
   }

   .form-container {
       position: relative;
       background-color: rgba(255, 255, 255, 0.5);
       border: 2px dashed rgba(255, 255, 255, 0.4);
       width: 80%; /* Cambiado para ocupar todo el ancho de la columna */
       height: 100%;
       padding: 20px;
       display: flex;
       margin: 20px;/*Margen superior de mi página.*/
       flex-direction: column;
       left: 35%; 
   }
   .form-title {
       color: #4d2579;
       text-align: center;
   }
   .form-content label {
       color: #4d2679;
       /* font-weight: lighter; */
       margin-left: 20px;
       font-size: 1.3em;
       font-family: "Calibri", sans-serif;
   }
   .custom-form-content {
       padding: 5px;
   }
   .custom-input {
       border-radius: 25px;
       background-color: transparent;
       border: 1px solid #4d2679;
       color: #333;
       padding: 10px;
       width: 100%;
       font-size: 1.3em;
   }
   .custom-input:focus {
       outline: none;
       box-shadow: 0 0 5px rgba(81, 203, 238, 1);
       border-color: rgba(81, 203, 238, 1);
   }
   .termsmovil {
       padding: 5px; /* Añadir un margen interno si es necesario */
       width: 100%; 
   }
   .aviso {
       display: flex;
       align-items: center;
       justify-content: center;
   }
   #termycondiciones a {
       text-decoration: underline;
   }
   .form-content label[for="terms"] {
       color: #4d2679;  /* Morado */
       font-size: 0.9em; /* Tamaño de fuente más pequeño */
       font-family: "Arial", Arial, sans-serif;
       width: 90%;
       text-align: justify; /* Justificar el texto */
       margin: 0 auto;
   }
   .form-content input[type="checkbox"] {
       float: left;
       transform: scale(2);
       display: inline-block;
       margin-left: 5px;
       margin-top: 7%;
   }
   .containerInfoMobile{
       display: none; /* Ocultar el contenedor móvil */
   }
   .spaceBlink {
       display: none; /* Ocultar el contenedor móvil */
   }

   .containerInfo {
       top: 120%;
       position: absolute;
       background-color: rgba(255, 255, 255, 0.2);       
       border: 2px dashed rgba(255, 255, 255, 0.4);
       width: 100%;
       height: auto;
       padding: 10px;
       display: flex;
       left: 11%;
       box-sizing: border-box;
       font-size:  1.8vh;
       justify-content: space-between;
       flex-wrap: nowrap;
       text-align: center;
   }

   .containerInfo div{
        display: flex;
        flex-direction: column;
   }

    .containerInfo div:first-child{
        padding: 1px;
        box-shadow: 2px 0 0 0 #fff;
        flex: 0 1 auto; 
        width: 38%; 
        margin: 0;
    }

    .containerInfo div:nth-child(2) {
        padding: 5px;
        box-shadow: 2px 0 0 0 #fff;
        flex: 0 1 auto; 
        width: 30%; 
    }

    .containerInfo div:nth-child(3) {
        width: 30%; 
    } 

   .containerSocial{
        color:white;
        background: transparent;
        display: block; 
        height: 100%;
        font-size: 1.8vh;        
   }
   .containerSocialMovil{
       display: none; /*Oculta mi contenedor */
   }
   .btn-sent {
       background-color: #4d2579; /* Color de fondo inicial del botón */
       color: #ffffff; /* Color del texto del botón */
       border: 2px solid #4d2579; /* Borde del botón */
       padding: 10px 20px;
       font-size: 12px;
       cursor: pointer;
       transition: background-color 0.3s ease, color 0.3s ease; 
   }
   .btn-sent:hover {
       background-color: #633C8E; /* Color de fondo cuando el ratón está sobre el botón */
       color: #ffffff; /* Color del texto cuando el ratón está sobre el botón */
   }
   .containerAlumnos {
       display: none; /*Oculta mi contenedor */
   }
   
   @media (min-width: 2394px) {
    .titulo {
        font-size: 30px !important;
    }

    .benef {
        font-size: 25px !important;
    }
   }

   @media (max-height: 811px) {
    .form-container {
        position: relative;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px dashed rgba(255, 255, 255, 0.4);
        width: 100%; 
        height: 100%;
        padding: 20px;
        display: flex;
        margin: 20px;
        flex-direction: column;
        left: 20%; 
    }
    }

   @media (max-width: 1200px) {
    .navbar-header {
      float: none;
    }
  
    .navbar-left, .navbar-right {
      float: none !important;
    }
  
    .navbar-toggle {
      display: block;
    }
  
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
  
    .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
    }
  
    .navbar-collapse.collapse {
      display: none !important;
    }
  
    .navbar-nav {
      float: none !important;
      margin-top: 7.5px;
    }
  
    .navbar-nav > li {
      float: none;
    }
  
    .navbar-nav > li > a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  
    .collapse.in {
      display: block !important;
    }
  }

    @media (max-width: 1517px) {
        .containerInfo {
            top: 110%;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.2);       
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 100%;
            height: auto;
            padding: 10px;
            display: flex;
            left: 11%;
            box-sizing: border-box;
            font-size:  1.8vh;
            justify-content: space-between;
            flex-wrap: nowrap;
            text-align: center;
        }

    }

    @media (max-width: 1253px) {
        .containerInfo {
            top: 110%;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.2);       
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 750px;
            height: auto;
            padding: 10px;
            display: flex;
            left: 11%;
            box-sizing: border-box;
            font-size:  1.8vh;
            justify-content: space-between;
            flex-wrap: nowrap;
            text-align: center;
        }
    }

  @media (max-width: 1173px) {
    .contenedorBack {
        height: auto;
        background-image: url('../img/ofertas2025/movil/fondoMovilV.png'); /* Cambia la imagen de fondo para dispositivos móviles */
        align-items: center;
    }

    .navbar-brand img {
        text-align: center;
        position: absolute;
        width: 150px;
        height: 46px;
        margin-left: 15px; /* Espacio a la izquierda del logo */
    }

    .form-container {
        display: block;
        background-color: rgba(255, 255, 255, 1);
        width: 90%;
        max-width: 600px; 
        padding: 30px;
        margin: 60px auto 20px auto;
        left: 0;
        top: 0;
        transform: none;
        background-position: right center;
    }

    .nested-div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }

    .containerAlumnos {
        display: block;
        width: 100%;
        align-items: center;
    }

    .image-container {
        position: relative; 
        width: 100%; 
    }

    .overlay-content {
        display: flex;
        position: absolute;
        top: 18%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        color: white;
        padding: 20px;
        border-radius: 10px;
        font-family: Arial, sans-serif;
        text-align: center;
        z-index: 10; 
    }

    .containerInfoMobile {      
        display: flex; 
        flex-direction: column;
        gap: 20px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.25);
        border: 2px dashed rgba(255, 255, 255, 0.4);
        width: 100%;
        max-width: 600px;
        position: relative;
        padding: 10px;
    }

    .containerInfoMobile div {
        display: flex;
        flex-direction: column;
    }

    .containerInfo{
        display: none; /*Ocultar en móvil*/
    }

    .redes{
        margin-bottom: -20px; 
    }

    .contenedorCh {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
      }
    
    .contenedorCh1 {
        width: 100%;
    }

    .imgCh1 {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 ;
    }

   .imgCh2 {
       display: block;
       width: 85%;
       height: auto;
       margin-bottom: 20px;
       margin-top: 10px;
    }

   .imgCh3 {
       display: block;
       width: 75%;
       height: auto;
       margin: 0 ;
    }
  }


   /*
   Desde 767px,  Se rompe entre 767px y 991px
   */
   @media (max-width: 991px) {
        .contenedorBack {
            height: auto;
            background-image: url('../img/ofertas2025/movil/fondoMovilV.png'); /* Cambia la imagen de fondo para dispositivos móviles */
            align-items: center;
        }
        .containerSocial{
            display: none;
        }
        
        .containerSocialMovil{
            display: block;
        }

        .grid-container {
            display: grid;
            grid-template-columns: auto auto ;
            text-aling: justify;
        }
        .grid-container > div {
            text-align: left;
            margin-left: 10%;
            padding: 20px 0;
        }

        .containerAlumnos {
            display: block;
            width: 100%;
            align-items: center;
        }

        .image-container {
            position: relative; 
            width: 100%; 
        }

        .overlay-content {
            display: flex;
            position: absolute;
            top: 18%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile {      
            display: flex;  
            flex-direction: column;
            gap: 20px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 100%;
            max-width: 600px;
            position: relative;
            padding: 10px;
        }
    
        .containerInfoMobile div {
            display: flex;
            flex-direction: column;
        }

        .containerInfo{
            display: none; /*Ocultar en móvil*/
        }

        .redes{
            margin-bottom: -20px; 
        }
   }

   /* Desde aquí empiezan los estilos para la resolución móvil. */
   @media (max-width: 778px) {
       .contenedorBack {
            height: auto;
           background-image: url('../img/ofertas2025/movil/fondoMovilV.png'); /* Cambia la imagen de fondo para dispositivos móviles */
           align-items: center;
       }

       .containerAlumnos {
           display: block;
           width: 100%;
           align-items: center;
       }
       .contenedorCh {
           width: 100%; /* Ajusta el ancho al 100% del contenedor */
           height: auto;  /* Ajusta la altura automáticamente */
           justify-content: center;
           align-items: center; 
           background-position: center;
           margin: 0 auto; /* Quitar margen superior e inferior, centrar horizontalmente */
           left: 0; /* Resetear la posición left si es necesario */
           top: 0; /* Resetear la posición top si es necesario */
       }

       .imgCh1 {
            display: block;
            width: 100%;
            height: auto;
            margin: 0 ;
        }

       .imgCh2 {
           display: block;
           width: 85%;
           height: auto;
           margin-bottom: 20px;
           margin-top: 10px;
       }

       .imgCh3 {
           display: block;
           width: 75%;
           height: auto;
           margin: 0 ;
       }
       .form-content label {
           color: #4d2579;
       }
       .aviso {
           transform: scale(1);
           float: left;
       }
       .form-container {
           background-color: rgba(255, 255, 255, 1);
           width: 95%;
           max-width: 600px; 
           padding: 30px; /*Margenes laterales del texto y los input*/
           margin: 40px auto 20px auto;
           left: 0; /* Resetear la posición left si es necesario */
           top: 0; /* Resetear la posición top si es necesario */
       }
       .containerInfo{
           display: none; /*Ocultar en móvil*/
       }
       

       .image-container {
            position: relative; 
            width: 100%; 
        }

        .overlay-content {
            display: flex;
            position: absolute;
            top: 22%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile {      
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 500px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }
/* 
        .containerInfoMobile {      
            display: flex;  
            flex-direction: column;
            gap: 20px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 100%;
            max-width: 600px;
            position: relative;
            padding: 10px;
        } */
    
        .containerInfoMobile div {
            display: flex;
            flex-direction: column;
        }

        .redes{
            margin-bottom: -20px;     
        }

       .spaceBlink {
           display: block;  /* Mostrar en móvil */
       }
       .containerSocial{
           display: none; /*Ocultar en móvil*/
       }

       .containerSocialMovil{
           display: block;
       }

       .grid-container {
           display: grid;
           grid-template-columns: auto auto ;
           text-aling: justify;
           }
           .grid-container > div {
           text-align: left;
           margin-left: 10%;
           padding: 20px 0;
           }
   }

   @media (max-width: 610px) {
        footer {
            padding: 5px 0;
        }

        .containerSocialMovil {
            display: block;
            margin: 0;
            height: -30px;
        }

        .grid-container > div {
            text-align: left;
            margin-left: 10%;
            padding: 0;
        }

        .grid-container > div > h6{
            margin: 0;
            padding: 0;
        }

        .redes > a > img {
            width: 4%;
        }

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 500px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }
    }

    @media (max-width: 553px) {

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 450px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }

        .titulo {
            font-size: 20px !important;
        }

        .benef {
            font-size: 15px !important;
        }
    }

    @media (max-width: 480px) {

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 350px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }

        .titulo {
            font-size: 20px !important;
        }

        .benef {
            font-size: 15px !important;
        }
    }

    @media (max-width: 410px) {

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 350px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }

        .titulo {
            font-size: 20px !important;
        }

        .benef {
            font-size: 15px !important;
        }
    }

    @media (max-width: 380px) {

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 210px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }

        .titulo {
            font-size: 17px !important;
        }

        .benef {
            font-size: 12px !important;
        }
    }

    @media (max-width: 320px) {

        .overlay-content {
            display: flex;
            position: absolute;
            top: 23%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 10; 
        }

        .containerInfoMobile{
            display: block;  
            background-color: rgba(255, 255, 255, 0.25);
            border: 2px dashed rgba(255, 255, 255, 0.4);
            width: 280px;
            max-width: 100%;
            position: relative;
            padding: 10px;
        }

        .titulo {
            font-size: 15px !important;
        }

        .benef {
            font-size: 10px !important;
        }
    }