styles.css

html {
    font-family: 'Jost', sans-serif;
}

body {
    margin: 0;
}

.blanco {
    color: #ffffff;
}

.amarillo {
    color: #ffca41;
}

.seccion--titulo {
    text-align: center;
    margin: 30px 0 40px;
    font-weight: 800;
    font-size: 32px;
}

/* Header */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: min(10vw, 80px);
    background-color: #14213D;
    display: flex;
}

nav {
    width: 100%;
    height: min(10vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 20px;
}

.logo {
    height: min(10vw, 80px);
}

.menu {
    text-decoration: none;
    font-size: min(3vw, 24px);
    /* Ajusta el tamaño de la letra */
}

/* Cambiar el color al pasar el ratón */
.menu:hover {
    color: #ffca41;
    /* Puedes cambiar esto al color que desees */
}

/* Agregar bordes al pasar el ratón */
.menu:hover {
    border-bottom: 2px solid #ffca41;
    /* Puedes cambiar esto al color y ancho que desees */
}

/* Inicio */

.inicio {
    background-image: url(imagenes/fondo.jpg);
    width: 100%;
    height: min(85vh, 50vw);
    background-position: center 20%;
    background-size: cover;
    padding: 1vw 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inicio--titulo {
    margin-top: 0;
    text-align: center;
    font-size: 7vw;
    font-weight: 700;
}

.inicio--subtitulo {
    font-size: 3vw;
    font-weight: 400;
    margin-left: 8vw;
    margin-bottom: 10vh;
    text-align: left;
}

/* Nosotros */

.Nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.gotech,
.titulo--caracteristicas,
.titulo-equipo,
.contenido--somos {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
}

.Developers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #14213D;
}

.foto {
    position: relative;
    overflow: hidden;
    margin: 10px;
    padding: 20px;
    max-width: 300px;
    /* Ajusta según tus necesidades */
}

.nosotros--foto {
    display: block;
    max-width: 150px;
    height: auto;
    text-align: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 5px;
    font-size: 12px;
}

.foto:hover .overlay {
    opacity: 1;
}

.texto {
    max-width: 80%;
    /* Ajusta según tus necesidades */
    text-align: center;
    margin: 0 auto;
    z-index: 1;
    /* Asegura que el texto esté por encima de la imagen */
}

.Developers--nombre {
    margin: 10px 0;
    color: #ffca41;
    font-size: 14px;
    text-align: center;
    z-index: 2;
    /* Asegura que el nombre y la función estén por encima del texto */
}

.Developers--Funcion {
    margin: 10px 0;
    font-size: 14px;
    color: white;
    text-align: center;
    z-index: 2;
    /* Asegura que el nombre y la función estén por encima del texto */
}

/*Servicios*/

.servicios--div {
    display: flex;
    justify-content: space-around;
    margin: 1%;
}

.servicios--contenedor {
    position: relative;
    border-radius: 20px;
    border: 8px solid #14213D;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    margin: 1%;
    width: 33%;
}

.servicios--img {
    height: 400px;
}

.servicios--capa {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(4, 69, 80, 0.9);
    transition: all 500ms ease-out;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    align-self: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.servicios--contenedor:hover>.servicios--capa {
    opacity: 1;
    visibility: visible;
}

.servicios--contenedor:hover>.servicios--title {
    margin-top: 70px;
    margin-bottom: 15px;
}

.servicios--contenedor:hover>.servicios--img {
    transform: scale(1.3);
}

.servicios--p {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.5;
    width: 100%;
}

.servicios--title {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 46px;
    color: #ffffff;
}

/* Contacto */

.contacto--div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.imagencontacto {
    width: 50%;
    /* ancho de la imagen de dos personas */
}

.form {
    /* formulario */
    padding: 3em;
    border: 0.5px solid #ccc;
    border-radius: 1em;
    margin-left: 0em;
    margin-right: 0em;
    text-align: center;
}

.form--titulo {
    font-size: 24px;
    text-align: center;
}

.form--datos {
    list-style: none;
    text-align: center;
}

.form--datospersonales {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* selecciona todos los elementos list item (li) que siguen directamente a otro elemento li dentro de un formulario y les aplicará un margen superior de 1em, para espaciar entre elementos de lista consecutivos */
form li+li {
    margin-top: 10px;
}

label {
    /* Tamaño y alineación uniforme */
    display: inline-block;
}

input,
textarea {
    /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
       Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
    font: 1em;
    /* Tamaño uniforme del campo de texto */
    width: 100%;
    box-sizing: border-box;
    /* Hacer coincidir los bordes del campo del formulario */
    border: 1px solid #999;
}

input:focus,
textarea:focus {
    /* Destacado adicional para elementos que tienen el cursor */
    border-color: #000;
}

textarea {
    /* Alinear los campos de texto multilínea con sus etiquetas */
    vertical-align: top;

    /* Proporcionar espacio para escribir texto */
    height: 5em;
}

.inline {
    width: unset;
    display: inline;
    vertical-align: middle;
}

/* Footer */

footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: #14213D;
    padding: 0 0.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer--texto {
    margin: auto 10px;
    font-size: min(1.5vw, 16px);
}

.footer--redes {
    display: flex;
}

.footer--logo {
    margin: 10px;
    width: min(2.5vw, 30px);
    height: auto;
    /* Mantiene la proporción de aspecto */
}

/* media query for smaller screens */
@media screen and (max-width: 1000px) {

    .Nosotros {
        padding: 10px;
    }

    .servicios--div {
        display: flex;
        flex-direction: column;
        /* Cambia la dirección a columna en pantallas pequeñas */
        height: 800px;
    }

    .servicios--contenedor {
        width: unset;
    }

    .contacto--div {
        width: 100%;
    }

    .form {
        width: 100%;
        margin-left: auto;
        /* Center the form horizontally */
        margin-right: auto;
    }

    label {
        width: auto;
        /* Allow labels to take full width on smaller screens */
        text-align: left;
        /* Adjust label alignment */
    }

    .button-container {
        text-align: center;
        /* Centrar el botón dentro de este contenedor */
    }

    /* media query para ocultar al imagen de dos personas .imagencontacto en pantallas de menos de 768px */
    .imagencontacto {
        display: none;
    }

    .inicio--subtitulo {
        margin-bottom: 8%;
    }

}

/* media query for smaller screens */
@media screen and (max-width: 768px) {

    .footer--texto {
        font-size: 11px;
        margin: auto 10px;
    }

    .footer--logo {
        width: 20px;
    }

    .inicio--subtitulo {
        margin-bottom: 8%;
    }
}