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

:root {

    --color_verde: #007680;
    --color_amarillo: #F89c24;
    --color_gris: #f4f4f4;

}

* {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    font-size: 16px;
}

body {

    background-image: url(/Assets/FONDO-PÁGINA-azul.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.header {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00757F;
    height: 100px;
    color: white;
    padding: 0 30px 0 20px;

}

.logos__container {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;

}

.img__header__formulario {

    display: inline-block;
    height: 50px;

}

.img__header {

    height: 35px;
    width: auto;
    flex-basis: auto;
}

.img__alianza {

    width: 150px;

}

.main {

    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.footer {

    height: 100px;

}

.container__formulario {

    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 575px;
    width: 550px;
    padding: 40px;
    border-radius: 40px;
    border: 5px solid var(--color_amarillo);
    gap: 20px;

}




.title__form{

    color: var(--color_verde);
    font-size: 19px;

}

.title__form_2 {

    color: var(--color_verde);
    font-size: 19px;
    text-align: center;
    display: none;

}

.title__form span, .title__form_2 span {

    font-weight: 800;
    font-size: 19px;

}

.main p {

    color: var(--color_verde);

}

.input__formulario {

    max-height: 30px;
    border-radius: 5px;
    border: none;
    background-color: var(--color_gris);
    color: var(--color_verde);
    border-radius: 40px;
    padding: 5px;
}

.title__input_form {

    color: var(--color_verde);
    font-weight: 500;

}

.container__btn {

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.container-logos-organismos{

    display:inline-flex;
    gap: 50px;
    width: 100%;
    background-color: #00757F;
    height: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
    

}

.img-organismos {

    display: inline-block;
    text-align: center;
   
}

#formulario_captacion {

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 90%;
    gap: 10px;

}

#btn-enviar {

    margin-top: 20px;
    border: 3px solid var(--color_verde);
    width: 130px;
    padding: 10px;
    color: var(--color_verde);
    font-weight: 700;
    border-radius: 40px;
    background-color: transparent;
}

#btn-enviar:hover {

    cursor: pointer;
    background-color: var(--color_verde);
    color: white;
}

#img-carga {

    height: 40px;
    display: none;

}

@media (max-width: 930px) {

    .img-organismos {

        height: 30px;

    }

    .img__header {

        height: 40px;

    }

    .container-logos-organismos{

        gap: 20px;

    }

    h1 {

        font-size: 20px;

    }

}

@media (max-width: 780px){

    .container__formulario {

        width: 400px;
        height: 600px;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }
    
    .input__formulario{

        width: 95%;

    }
    
}

@media (max-width: 550px) {

    .title__form {

        display: none;

    }

    .title__form_2 {

        display: inline-block;

    }

    .img-organismos {

        height: 25px;

    }

    .img__header {

        height: 30px;

    }

    .container-logos-organismos{

        gap: 10px;

    }

    .container__formulario {

        width: 300px;
        margin-top: 0px;
        height: 700px;
        padding: 20px 40px 40px 40px;
        justify-content: center;
        align-items: center;

    }

    .input__formulario {

        width: 92%;
    }

    #formulario_captacion {

        width: 300px;
        justify-content: left;   

    }
}

@media (max-width: 460px) {

    .img-organismos {

        height: 20px;

    }

    h1 {

        font-size: 16px;

    }

    .img__header {

        height: 20px;

    }

    

    .container-logos-organismos{

        gap: 10px;

    }

    .container__formulario {

        width: 375px;
        height: 700px;
        justify-content: center;
        align-items: start;
        padding: 15px 10px 15px 10px;

    }
}

@media (max-width: 390px) {

    .logos__container {

        gap: 10px;

    }

    .container__formulario {

        width: 300px;
        height: 700px;

    }
}

/* El siguiente codigo nos ayuda para darle color e imagen a una pagina web.
1. Importación de Fuentes:

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

    Se importa la fuente Montserrat de Google Fonts, que se utilizará en toda la página para los textos.

2. Variables CSS:

:root {
    --color_verde: #007680;
    --color_amarillo: #F89c24;
    --color_gris: #f4f4f4;
}

    Se definen tres colores personalizados utilizando variables CSS para facilitar su reutilización en diferentes partes del código:

        --color_verde: un tono de verde.

        --color_amarillo: un tono de amarillo.

        --color_gris: un tono de gris claro.

3. Reglas Globales:

* {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    font-size: 16px;
}

    Aquí se aplica la fuente Montserrat globalmente a todos los elementos de la página. Además, se establece un tamaño base de fuente de 16px y se eliminan los márgenes predeterminados de todos los elementos.

4. Estilos del Cuerpo de la Página:

body {
    background-image: url(/Assets/FONDO-PÁGINA-azul.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    Se establece una imagen de fondo que se muestra centrada y se ajusta para cubrir toda la pantalla sin repetirse.

5. Estilos para el Encabezado (Header):

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00757F;
    height: 100px;
    color: white;
    padding: 0 30px 0 20px;
}

    El encabezado se configura como un contenedor flexbox centrado con un fondo de color verde azulado, con un alto de 100px. El texto se muestra en blanco.

.logos__container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

    Se configura un contenedor para los logos, donde los logos se alinearán en el centro y habrá espacio entre ellos.

6. Estilos del Formulario:

.container__formulario {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 737px;
    width: 646px;
    padding: 40px;
    border-radius: 40px;
    border: 5px solid var(--color_amarillo);
    gap: 20px;
}

    El formulario se configura con un borde de color amarillo, un alto específico de 737px, y un ancho de 646px. Además, se aplica un borde redondeado de 40px y se agregan espacios entre los elementos del formulario.

7. Botones:

#btn-enviar {
    margin-top: 20px;
    border: 3px solid var(--color_verde);
    width: 130px;
    padding: 10px;
    color: var(--color_verde);
    font-weight: 700;
    border-radius: 40px;
    background-color: transparent;
}

#btn-enviar:hover {
    cursor: pointer;
    background-color: var(--color_verde);
    color: white;
}

    El botón de envío tiene un borde verde, un tamaño específico de 130px de ancho y 10px de padding. Cuando el usuario pasa el mouse sobre el botón (:hover), el color de fondo cambia a verde y el texto se vuelve blanco.

8. Diseño de los Logos en el Pie de Página:

.container-logos-organismos {
    display: inline-flex;
    gap: 50px;
    width: 100%;
    background-color: #00757F;
    height: 100px;
    justify-content: center;
    align-items: center;
}

    El pie de página contiene una fila de logos que están alineados en el centro y tienen un espacio de 50px entre ellos. El fondo de esta sección es el mismo verde azulado del encabezado.

9. Media Queries (Diseño Responsivo):

Hay varias secciones de media queries que modifican el diseño de la página según el tamaño de la pantalla del dispositivo. Esto permite que la página se vea correctamente tanto en pantallas grandes como en dispositivos móviles:

    Para pantallas más pequeñas (como tabletas y teléfonos), se ajustan los tamaños de los elementos (por ejemplo, el ancho de los formularios y las imágenes de los logos) y se modifican algunos estilos (por ejemplo, ocultar ciertos textos o cambiar la disposición de los elementos). */