/*=============== Estilos de efecto Parallax y todo lo del diseño  ===============*/

:root {
    --header-height: 3.5rem;
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(220, 68%, 54%);
    --first-color-lighten: hsl(220, 68%, 97%);
    --title-color: hsl(220, 48%, 28%);
    --text-color: hsl(220, 12%, 45%);
    --grey-tex-color: hsl(0, 0%, 64%);
    --body-color: hsl(220, 100%, 99%);
    --color: #ffffff;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }
  
  .contenedor-gral {
      max-width: 1200px;
      margin: auto;
      margin-top: 5%;
      /* background: linear-gradient(to bottom right, rgb(120, 193, 241), rgb(207, 255, 209)); */
      /* z-index: -1000; */
    }
  
    .contenedor {
      position: relative;
      height: 50vh;
      overflow: hidden;
      justify-items: center;  /* Se utiliza cuand hay problemas de alineación */
    }
  
    .parallax {
      position: absolute;
      width:120%;
      background-image: url(/img/paginas/Contacto.png);
      background-size: contain;
      background-repeat: no-repeat;
      height: 80vh;
      z-index: -2;
    }
  
    .titulo {
      position: relative;
      color: white;
      font-size: 3em;
      text-shadow: 3px 3px 2px #272727;
      text-align: center;
      max-width: 600px;
      margin-top: 100px;
      z-index: -1;
    }
    
    /* aplicará estilos solo si el ancho
       del viewport de su navegador es igual
       o menor que 500px: */
    @media (max-width: 500px) {
      .contenedor {
        height: 30vh;
      }
      .parallax {
        width:180%;
        margin-left: -80%;
        /* background-size:cover; */
        height: 50vh;
      }
      .titulo {
        margin-top: 20%;
        font-size: 2.5em;
      }
  
    }
  
    /*=============== Final Estilos de efecto Parallax en Cabecera  ===============*/
  
    /*=============== Estilos de maqueta de colores  ===============*/
  .conte {
    margin: auto;
    /* background: burlywood; */
    height: max-content;
    width: 100%;
    padding: 1%;
    /* justify-content: center; */
    /* align-items: center; */
  }
  
  .cont-wrap {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     /* padding: 0; */
     /* background-color: aqua; */
     justify-content: center;
     justify-items: center;
     gap: 5%;
  }

  @media (max-width: 500px) {
    .cont-wrap {
      display: block;
    }

    .cont-wrap iframe {
      width: 350px; 
    } 

  
  }
  
  /*=============== final de Estilos de maqueta de colores  ===============*/
  
  /* =============== Menu de la estructura de la hoja =================== */
  
  .menu-struc{
    margin: 1% 0;
  }
  
  .menu-struc a{
    color: var(--grey-tex-color);
  }
  .menu-items {
    display: inline-flex;
  
  }
  
  .menu2::before {
    content: ">";
    margin: 3px;
  }
  
  .menu1:hover, .menu2:hover{
    color: var(--text-color)
  }
  
  /* ============ final Menu de la estructura de la hoja ================== */
  
  /* ============ final de los estilos del diseño "nosotros" ================== */
  /*Todo lo que se inserte después de estos estilos deberá ir en un css aparte*/
  /*Lo que se altere por encima de este aviso no debe alterar al grupo de hojas "nosotros"*/
  
  .box-cont {
    height: 250px;
    width: 20vw;
    margin: 2% 0;
    background-color: rgb(228, 246, 253);
    text-align: center;
    box-shadow: 8px 8px 15px hsla(220, 68%, 12%, 0.3);
  }

  .box-cont h3 {
    font-size: 1.2vi;
    padding: 0 20%;
    color: #000000;
  }

  .box-cont h4 {
    font-size: 0.9vi;
    padding: 0 20%;
    color: #575757;
  }

  .icn {
    padding: 5% 0;
    font-size: 5vi;
  }

  .mens-wrap {
    background-color: rgb(228, 246, 253);
    width: 30vw;
    height: 500px;
  }

  .gap0 {
    gap: 0;
  }
  
  .mensaje {
    /* padding: 2%;  */
    /* justify-content: center; */
    justify-items: center;
    /* justify-self: center; */
    
  
  }

  @media (max-width: 500px) {
    .box-cont {
      width: 80vw;
      margin: 5% 0;
    }

    .icn {
      padding: 5% 0;
      font-size: 24vi;
    }

    .box-cont h3 {
      font-size: 5vi;
      padding: 0 15%;
      color: #000000;
    }

    .box-cont h4 {
      font-size: 3.5vi;
      padding: 0 15%;
      color: #575757;
    }
    .mens-wrap {
      width: 95vw;
      height: 460px;    }
  
  }

  /* Aqui comienzan los estilos de los Inputs */
  
  .w15 {width: 15%;}
  .w30 {width: 31%;}
  .w50 {width: 47%;}
  .w100 {width: 95%;}

  .input-field {
      position: relative;
      margin: 8% 0;
  }

  .input-field input,
  .input-field select,
  .input-field textarea {
      width: 100%;
      height: 3vi;
      border: none;
      font-size: 1.2vi;
      padding: 0;
      border-bottom: 2px solid rgb(192, 192, 192);
      background: transparent;
      color: rgb(53, 53, 53);
      outline: none;

  }

  .input-field textarea {
      height: 7vi;
  }

  .input-field label{
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-80%);
      color: rgb(95, 95, 95);
      font-size: 1.1vi;
      pointer-events: none;
      background: transparent;
      transition: 0.3s;
  }

  input:focus {
      border: none;
      border-bottom: 2px solid rgb(22, 22, 22);
      transform: translateX(0%);
  }
  
  select:valid {
      border: none;
      border-bottom: 2px solid rgb(10, 14, 255);
  }

  input:valid {
      border-bottom: 2px solid rgb(10, 14, 255);
  }


  input:focus ~ label {
      top: 0;
      font-size: 1vi;
      padding: 0 5px;
      background: transparent;
      color: rgb(97, 97, 97);
  }

  textarea:focus ~ label {
      top: -5px;
      font-size: 1vi;
      padding: 0 5px;
      background: transparent;
      color: rgb(97, 97, 97);
  }

  input:valid ~ label {
      top: 0;
      font-size: 1.1vi;
      padding: 0 5px;
      background: transparent;
      color:rgb(10, 14, 255);
 
  }

  textarea:valid ~ label {
      top: -5px;
      font-size: 1.1vi;
      padding: 0 5px;
      background: transparent;
      color:rgb(10, 14, 255);
  }

  input[type=email]:user-invalid ~ label {
      color: rgb(97, 97, 97);
      top: 0;
      font-size: 1vi;
      padding: 0 5px;
      background: transparent;
  }

  textarea:user-invalid ~ label {
    color: rgb(97, 97, 97);
    top: -5px;
    font-size: 1vi;
    padding: 0 5px;
    background: transparent;
  }

  select:focus ~ label,
  select:valid ~ label {
      top: 0;
      font-size: 1.2vi;
      padding: 0 5px;
      background: transparent;
      color:rgb(10, 14, 255);
    
      
  }

  .btn-mens {
      height: 35px;
      padding: 0 50px;
      font-size: 1.3vi;
  }

  .btn-reg {
    height: 35px;
    width: 100%;
    padding: 0 50px;
    font-size: 1.2em;
    margin-top: 5%;
}

  /* Celulares  */

  @media (max-width: 500px) {
      .input-field input,
      .input-field select,
      .input-field textarea {
          height: 9vi;
          font-size: 5vi;

      }

      .input-field textarea {
          height: 15vi;
      }

      .input-field label{
          font-size: 4vi;
      }

      input:focus ~ label {
          font-size: 3vi;
      }

      textarea:focus ~ label {
          font-size: 4vi;
      }

      input:valid ~ label {
          font-size: 4vi;
      }

      textarea:valid ~ label {
          font-size: 4vi;
      }

      input[type=email]:user-invalid ~ label {
          font-size: 3vi;
      }

      textarea:user-invalid ~ label {
        font-size: 3vi;
      }

      select:focus ~ label,
      select:valid ~ label {
          font-size: 4vi;
      }

      .btn-mens {
          font-size: 4vi;
      }
  }