@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

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

:root {

    --color-blanco: #f9f9f9;
    --color-oscuro: #272727;
    --negro1: #000;
    --negro2: #0F1111;
    --azul1: rgb(27, 27, 73);
    --azul2: rgb(12, 102, 107);
    --azul3: #457fdc;
    --azul4: #005EDD;
    --azul5: #05293D;
    --gris1: #5F6368;
    
}

nav {
    width: 100%;
    background-color: var(--azul2);
    display: flex;
    justify-content: left;
    gap: 2vw;
    margin: 2vh 3vw 2vh 3vw;
    padding: 2vh;
    padding-left: 2vw;
}

nav a {

    color: var(--color-blanco);
    text-decoration: none;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
}

nav a:hover {
    background-color: var(--color-blanco);
    color: var(--color-oscuro);

}

nav li {
    display: inline;
    padding-left: 25px;
    color: var(--color-blanco);

}



#producto_principal {
    width: 60%;
    float: left;
    clear: both;
    padding: 30px 15px 0 55px;
}

.imagen_principal {
    
    float: left;
    width: 30%;
}

.imagen_principal img {
    width: 100%;
    border-radius: 30px;
    
}

.texto_principal {
    
    float: left;
    width: 65%;
    padding: 10px 15px 0 55px;
}

.texto_principal h2 {
    padding-bottom: 15px;
    font-weight: normal;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.texto_principal h3 {
    padding-top: 20px;
    padding-bottom: 15px;
    font-weight: normal;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.linea {
    border-bottom: 1px solid var(--negro1);
}

.texto_principal p {
    padding-bottom: 15px;
    font-weight: normal;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.productos_contenido h2 {
    margin: 2vh 3vw 0.1vh 1.5vw;
    padding: 2vh;
    padding-left: 2vw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-bottom: 1px solid;

}

.productos_contenido {
    width: 100%;
    clear:both;

}

.productos_contenido ul {
    list-style-type: none;
    display: flex;
}

.productos_contenido img {
    padding: 30px 15px 0 55px;
    width: 240px;
    height: 300px;
    
}

.footer {
    width: 100%;
    background-color: var(--azul2);
    display: flex;
    justify-content: left;
    gap: 2vw;
    margin: 2vh 3vw 2vh 3vw;
    padding: 2vh;
    padding-left: 2vw;

}

.footer .izquierda {
    float: left;
    width: 75%;

}

.footer li {
    display: inline;
    padding-right: 2rem;
}

.footer a {

    color: var(--color-blanco);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-weight: 250;
}

.footer .derecha {
    float: right;
    width: 25%;

    text-align: right;
    padding-right: 5rem;
}

.footer p {

    color: var(--color-blanco);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 250;
    
}

.contacto_box {
    width: 50%;
    margin: 3rem 5rem 3rem 5rem;
    padding: 2rem;
    border-radius: 24px;
    border: solid var(--negro2) 1px;
    background-color: rgba(9, 83, 133, 0.144);
}

.contacto_input {
    background-color: var(--color-blanco);
    padding: 1rem;
    margin-top: 1rem;
}

.form {
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    border-radius: 24px;
}

.form label {
    width:10%;
    padding-top: 1rem;
    font-weight: 600;
}

.contacto_input {
    background-color: var(--color-blanco);
    padding: 1rem;
    width: 50%;

}

.btn-enviar {
    background-color: var(--negro2);
    width: 30%;
    text-align: center;
    margin: 1rem;
    padding: 1rem;
    color: var(--color-blanco);
    font-weight: 700;

}