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

html, body {
    width: 100%;
}


main {
    height: 2700px;
}

.envios {
    background-color: #8D253E;
    display: block;
}

#envios {
    font-family: Titulos;
    color: #FCFCF2;
    font-size: 3vh;
    text-align: center;
}

.encabezado {
    width: 100%;
    height: 15vh;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh;
    flex-wrap: wrap;
    margin-bottom: 3vh;
}

@font-face {
    font-family: Marca;
    src: url(../assets/EBGaramond-Italic-VariableFont_wght.ttf);
    font-size: large;
}

@font-face {
    font-family: Titulos;
    src: url(../assets/EBGaramond-VariableFont_wght.ttf);
}

li {
    list-style: none;
}

ul {
    display: flex;
    gap: 1vh;
    padding: 1%;
    width: 30%;
    height: 3vh
}

a {
    text-decoration: none;
    color: #000;
    font-family: Titulos;
    font-size: 3vh;
    font-weight: bold;
}

h1 {
    color: #8D253E;
    font-family: Marca;
    font-size: 8vh;
    font-weight: bold;
    padding: 2vh;
    flex: 1;
    text-align: center;
}

h2{
    font-family: Titulos;
    color: #000;
    font-weight: bold;
    font-size: 5vh;
    padding-top: 5vh;
    padding-left: 2vw;
}

h3{
    height: 15vh;
    font-family: Titulos;
    color: #FCFCF2;
    font-size: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.femeninas {
    background-image: url(../assets/backfem.jpg);
    background-size: cover;
}

.masculinas {
    background-image: url(../assets/backmasc.jpg);
    background-size: cover;
}

#Logo {
    height: 10vh;
    width: auto;
    padding-bottom: 1vh;
}

article{
    width: 50vh;
    height: 60vh;
    background-color:white;
    border-radius: 15px;
    box-shadow: 0 6px 16px #0000001A;
    position: relative;
    margin: 10px;
    justify-content: space-between;
    padding: 2vh;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 60% 15% 15% 10%;
}

.perfume {
    width: 80%;
    height: auto;
    padding: 10px;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    justify-self: center;
}

.rrss {
    width: 5vh;
    height: auto;
    padding: 1vh;
}

.redes {
    margin-right: 3vw;
}

.nombre{
    font-family: Titulos;
    font-size: 3.5vh;
    color: #8D253E;
    text-align: center;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin: 0;
    align-items: center;
}

.precio{
    font-family: Titulos;
    font-size: 4vh;
    color: #8D253E;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    margin: 0;
    align-self: center;
}

.boton{
    border-style: solid;
    border-color: #8D253E;
    border-radius: 999px;
    padding: 0.5vh 2vw;
    margin: 0;
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    align-self: center;
    justify-self: center;
    font-family: Titulos;
    font-size: 2vh;
    font-weight: bold;
    color: #8D253E
}

.boton:hover {
    background-color: #8D253E;
    font-family: Titulos;
    font-size: 2vh;
    font-weight: bold;
    color: #FCFCF2
}

p{
    font-family: Titulos;
    font-size: 4vh;
    color: black;
    text-align: justify;
}

.preguntas{
    margin-left: 2vw;
}

.pregunta{
    font-family: Titulos;
    font-size: 4vh;
    color: black;
    font-weight: bold;
}

.respuesta{
    font-family: Titulos;
    font-size: 3vh;
    color: black;
}

footer {
    background-color: #8D253E;
    width: 100%;
    height: 7vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.derechos{
    font-family: Titulos;
    font-size: 3vh;
    color: black;
    font-weight: bold;
    margin-left: 3vw;
}

.articulos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    row-gap: 10vh;
}

.quienessomos {
    height: 80vh;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 2fr;
    column-gap: 2vw;
    row-gap: 2vh;
    align-items: center;
}

.somos {
    font-size: 5vh;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    align-self: end;
}

.textosomos {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin-left: 2vw;
}

.dueños {
    height: 50vh;
    width: auto;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.nuestrahistoria {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 3fr;
    column-gap: 2vw;
    row-gap: 2vh;
    align-items: center;
}

.historia {
    font-size: 5vh;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.laboratorio {
    height: 60vh;
    width: auto;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin-left: 2vw;
}

.textohistoria {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-right: 2vw;
}

.perfil {
    height: 70vh;
    width: 80vw;
    background-color: #FCFCF2;
    border-style: ridge;
    border-radius: 15px;
    display: block;
    padding: 2vw;
    margin: auto;
}

.dato {
    font-family: Titulos;
    font-size: 3vh;
    padding: 2vh;
}

.registro {
    font-family: Titulos;
    font-size: 3vh;
    margin-top: 4vh;
    margin-left: 6vw;
    padding: 1vh;
}

@media (max-width: 430px) {

/* media queries generales*/

    main {
        height: 1500px;
    }

    .encabezado {
        flex-wrap: wrap;
        justify-content: center;
    }

    .encabezado ul {
        flex: 1 1 100%;
        justify-content: center;
        gap: 2vh;
    }

    ul {
        flex-wrap: wrap;
        font-size: 2vh;
    }

    h1 {
        font-size: 4vh;
    }

    h2 {
        font-size: 3vh;
    }


/* media queries pagina Index*/

    .articulos {
        row-gap: 3vh;
    }

    article{
        width: 20vh;
        height: 35vh;
    }

    .perfume {
        width: 90%;
        padding: 5px;
}

    .nombre{
        font-size: 2vh;
}

    .precio{
        font-size: 2vh;
    }

    .boton{
        padding: 0.3vh 1.5vw;
        font-size: 1.5vh;
}


/* media queries pagina Quienes Somos*/

    .quienessomos {
        height: 50vh;
    }

    .somos {
        font-size: 4vh;
    }

    .textosomos {
        font-size: 2vh;
    }

    .dueños {
        height: 30vh;
    }

    .nuestrahistoria {
        height: 50vh;
        grid-template-rows: 1fr 2fr 1fr;
        margin-top: 10vh;
    }

    .historia {
        font-size: 4vh;
    }

    .laboratorio {
        height: 40vh;
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .textohistoria {
        font-size: 2vh;
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        margin: 0 2vw;
    }

}