@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

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

html {
    font-size: 62.5%;
}

@media screen and (min-width: 320px) {
    
    main {
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 15px;
    }

    main video {
        z-index: 000;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    main:before {
        z-index: 777;
        content: '';
        position: absolute;
        background: rgba(01, 01, 01, 0.4);
        width: 100%;    
        height: 100vh;
        top: 0;
        left: 0;
     }

    /*================Secciones================*/

    .seccion {
        width: 100%;
        height: 100vh;
    }

    .seccion-nosotros {
        height: 200vh;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    .seccion-compromiso {
        height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    .seccion-desde {
        height: 140vh;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        justify-content: start;
        align-items: center;
        padding: 10px;
    }

    .seccion-contacto {
        width: 100%;
        height: 100vh;
        background: #151e3e;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .seccion-oficina {
        width: 100%;
        height: 180vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /*================Articulos================*/

    .articulo-nosotros1, .articulo-nosotros2 {
        width: 100%;
        height: 50vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .articulo-compromiso {
        width: 100%;
        height: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .articulo-ubicacion {
        width: 100%;
        height: 48vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .articulo-ubicacion2 {
        height: 30vh;
    }

    .articulo-encontranos {
        width: 100%;
        height: 150vh;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .articulo-oficina {
        width: 70%;
        height: 20vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /*================Divs================*/

    .contenido {
        width: 100%;
        height: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        position: relative;
        z-index: 888;
    }

    .img-container {
        width: 100%;
        height: 80vh;
        position: relative;
    }

    .video-container {
        width: 100%;
    }

    .video {
        width: 100%;
    }

    .img-container-ofi {
        width: 100%;
        height: 60vh;
        position: relative;
        overflow: hidden;
    }

    .logo-inicio {
        width: 12rem;
    }

    /*================Botones================*/

    .contactar-btn {
        display: inline-block; /* Asegura que se comporte como un botón */
        background-color: #007BFF; /* Azul */
        color: #fff; /* Texto blanco */
        padding: 10px 20px; /* Espaciado interno */
        font-size: 16px; /* Tamaño de fuente */
        border: none; /* Sin bordes */
        border-radius: 25px; /* Bordes redondeados */
        text-decoration: none; /* Quita subrayado */
        text-align: center; /* Centra el texto */
        transition: background-color 0.3s ease; /* Transición suave */
    }
    
    .contactar-btn:hover {
        background-color: #0056b3; /* Azul más oscuro al pasar el mouse */
        cursor: pointer; /* Cambia a un puntero */
    }

    /*================Imagenes================*/

    .img {
        width: 100%;
        position: relative;
    }

    .img-oficina {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }

    .mapa {
        height: 80vh;
        width: 100%;
    }

    /*================Titulos================*/

    .titulo {
        font-family: "Open Sans", sans-serif;
        font-size: 3rem;
        font-weight: 700;
        line-height: 0.9;
        color: #324897;
        width: 100%;
        text-align: left;
    }

    .titulo-home {
        font-family: "Open Sans", sans-serif;
        font-size: 4.5rem;
        font-weight: 700;
        line-height: 0.9;
        color: #fff;
    }

    .subtitulo {
     font-family: "Open Sans", sans-serif;
     font-size: 2.4rem;
     font-weight: 700;
     color: #324897;
     text-align: left;
     width: 100%;
    }

    .subtitulo-seccion {
     font-size: 2.8rem;
     width: 85%;
     text-align: center;
    }

    .titulo-contacto {
        text-align: center;
    }

    /*================Textos================*/

    .texto {
     font-family: "Open Sans", sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     color: #324897;   
     text-align: left;
    }

    .texto-home {
     color: #fff;
     text-align: left;
     font-size: 3.2rem;
     line-height: 0.90;
    }

    .texto-ubicacion {
        font-size: 2.2rem;
    }

    /*================Imagenes================*/

    .art-icon {
        width: 5rem;
        display: none;
    }

    .img-ubi {
        width: 4rem;
    }

     /*================Footer================*/

     .footer {
        width: 100%;  
        height: 80vh;
        position: relative;
        background: #202020;  
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
     
      .footer1 {
       width: 90%;
       height: 30vh;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
      }
     
      .footer2 {
       width: 90%;
       height: 30vh;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: flex-start;
      }
     
      .container-info {
       width: 100%;
       height: 12vh;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       align-items: flex-start;
      }
     
      .logo-footer {
       width: 7rem;
      }

      .logo-erro {
        width: 11rem;
      }
     
      .text-info {
       font-family: "gesta", sans-serif;
       font-weight: 400;
       font-style: normal;
       font-size: 1.6rem;
       color: #fff;
      }


     /*================Formulario================*/

 .formulario {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .formulario label {
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
  }
  
  .formulario input,
  .formulario textarea {
    background: none;
    border: none;
    border-bottom: 2px solid white;
    padding: 8px 0;
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .formulario input::placeholder,
  .formulario textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .formulario input:focus,
  .formulario textarea:focus {
    border-bottom-color: #ccc;
  }
  
  button[type="submit"] {
    color: #fff; /* Color del texto */
    background: none; /* Sin fondo */
    border: 2px solid #fff; /* Bordes blancos */
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease; /* Suaviza el cambio del hover */
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /*==========Formulario==========*/

 .formulario {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .formulario label {
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
  }
  
  .formulario input,
  .formulario textarea {
    background: none;
    border: none;
    border-bottom: 2px solid white;
    padding: 8px 0;
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .formulario input::placeholder,
  .formulario textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .formulario input:focus,
  .formulario textarea:focus {
    border-bottom-color: #ccc;
  }
  
  button[type="submit"] {
    color: #fff; /* Color del texto */
    background: none; /* Sin fondo */
    border: 2px solid #fff; /* Bordes blancos */
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease; /* Suaviza el cambio del hover */
    font-family: "gesta", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* Sección de confirmación */
  .confirmacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #334189;
    color: white;
    height: 100vh;
    font-family: "gesta", sans-serif;
  }
  
  .confirmacion h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .confirmacion p {
    font-size: 16px;
    margin-bottom: 10px;
    color: white;
  }
  
  .confirmacion button {
    color: #fff; /* Color del texto */
    background: none; /* Sin fondo */
    border: 2px solid #fff; /* Bordes blancos */
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease; /* Suaviza el cambio del hover */
    font-family: "gesta", sans-serif;
  }
  
  .confirmacion button:hover {
    background-color: #fff;
    color: #334189;
  }
  
  .confirmacion .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

}

@media screen and (min-width: 1080px) {

    /*================Main================*/

    main {
        padding: 100px;
    }

    /*================Secciones================*/

    .seccion-compromiso {
        height: 80vh;
        flex-direction: row;
        padding: 25px;
    }

    .seccion-nosotros {
        height: 120vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Cuatro columnas */
        grid-template-rows: repeat(5, 1fr); /* Cinco filas */
        padding: 25px;
    }

    .seccion-desde {
        padding: 0;
        width: 100%;
        height: 110vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Cuatro columnas */
        grid-template-rows: repeat(4, 1fr); /* Cinco filas */
    }

    .seccion-oficina {
        height: 100vh;
        justify-content: space-between;
        align-items: center;
    }

    /*================Articulos================*/

    .articulo {
        width: 23%;
        height: 30vh;
        justify-content: space-between;
        text-align: center;
    }

    .articulo-nosotros1 {
        grid-column: 1/3;
        grid-row: 2/4;
        width: 100%;
        height: 100%;
    }

    .articulo-nosotros2 {
        grid-column: 1/3;
        grid-row: 4/6;
        width: 100%;
        height: 100%;
    }

    .articulo-ubicacion {
        grid-column: 3/6;
        grid-row: 2/3;
        width: 80%;
    }

    .articulo-ubicacion2 {
        grid-column: 3/6;
        grid-row: 3/4;
        width: 80%;
    }

    .articulo-ubicacion , .articulo-ubicacion2 {
        justify-self: center;
        align-self: center;
    }

    .articulo-encontranos {
        flex-direction: row;
        align-items: end;
        height: 80vh;
    }

    .articulo-oficina {
        width: 28%;
    }

    /*================Divs================*/

    .img-container {
        grid-column: 3 / 6; /* Ocupa las columnas 3 y 4 */
        grid-row: 2 / 6; /* Ocupa desde la fila 2 hasta la fila 5 */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .video-container1 {
        grid-row: 1/3;
        align-self: self-end;
    }

    .video-container2 {
        grid-row: 3/6;
        align-self: start;
    }

    .video-container1, .video-container2 {
        grid-column: 1/3;
        justify-self: center;
    }

    .video-container {
        width: 80%;
    }

    .img-container-ofi {
        width: 40%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /*================Titulos================*/

    .seccion-nosotros .subtitulo-seccion {
        grid-row: 1/2;
        grid-column: 1/6;
        width: 100%;
        align-self: center;
        text-align: center;
    }

    .titulo {
        width: 100%;
        text-align: center;
        grid-column: 2/4;
        grid-row: 1/2;
    }


    /*================Textos================*/

    .texto {
        width: 100%;
        text-align: left;
    }

    .salto {
        display: none;
    }

    /*================Imagenes================*/

    .logo-inicio {
        grid-column: 1/2;
        grid-row: 1/2;
        width: 20rem;
        align-self: center;
        justify-self: center;
    }

    .mapa {
        width: 60%;
        height: 100%;
    }

    .img {
        width: 55%;
    }

    .img-oficina {
        width: 100%;
        object-fit: cover;
    }

    /*================Footer================*/

    .footer {
        flex-direction: row;
        height: 65vh;
        align-items: center;
        justify-content: space-evenly;
      }
    
      .footer1, .footer2 {
        flex-direction: row;
        align-items: center;
        height: 24vh;
        width: 45%;
      }
    
      .container-info {
        width: 70%;
      }

}