:root {
    --primario: #2F58CD;
    --secundario: #92B558;
    --verdeOscuro: #424200;
    --azulClaro: #BAD7E9;
    --blanco: #fff;
    --gris: #7c7673;
    --grisClaro: #e2e2e2;
    --negro: #111;
    --oro: #DAA520;
    --violeta: #A7727D;
    --fuentePrincipal: 'Raleway', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif;
    --fuenteTitulo: 'Libre Caslon Text', serif;;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.5;
}
/** Globales **/

@media (min-width: 768px) {
    .contenedor {
        max-width: 100rem;
        width: 80%;
        margin: 0 auto;
    }
}

h1, h2, h3 {
    font-weight: 900;
    font-family: var(--fuenteSecundaria);
}
h1 {
    font-size: 4.4rem;
}
h2 {
    font-size: 3.6rem;
}
h3 {
    font-size: 2.8rem;
}
img {
    max-width: 100%;
    display: block;
}

/** UTILIDADES **/
.mt-5 {
    margin-top: 5rem;
}

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

/** Header **/


.header__logo img{
    margin: 0 auto;
    width: 20rem;
}

@media (min-width: 768px) {
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--blanco);
    }

    .header__logo img{
        width: 10rem;
    }
}

/** Navegacion **/

.navegacion__contenedor {
    border-top: 1px solid var(--oro);
    background-color: var(--verdeOscuro);
}

@media (min-width: 768px) {
    .navegacion__contenedor {
        background-color: var(--blanco);
        border-top: unset;
    }
}

.navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .navegacion {
        flex-direction: row;
    }
}

.link {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--blanco);
    display: inline-block;
    padding: 1rem;
    transition: color .3s ease;
}

@media (min-width: 768px) {
    .link {
        color: var(--verdeOscuro);

    }
}

.link:hover {
    color:var(--oro)
}


/** Hero **/

.hero {
    
    background-repeat: no-repeat;
    background-position: center 18%;
    background-size: 150rem;
    height: 35rem;
    padding: 4rem;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.notwebp.notavif .hero{
    background-image: linear-gradient(
        to right,
        rgba(39, 39, 38, 0.4),
        rgba(39, 39, 38, 0.4)
        ), url("../img/fondo_colores.jpg");
}

.webp .hero{
    background-image: linear-gradient(
        to right,
        rgba(39, 39, 38, 0.4),
        rgba(39, 39, 38, 0.4)
        ), url("../img/fondo_colores.webp");
}

.avif .hero{
    background-image: linear-gradient(
        to right,
        rgba(39, 39, 38, 0.4),
        rgba(39, 39, 38, 0.4)
        ), url("../img/fondo_colores.avif");
}


@media (min-width: 768px) {
    .hero {
        border-top: 1px solid var(--oro);
    }
}


.hero__contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero__titulo h1{
    margin: 0;
    font-family: var(--fuenteTitulo);
    font-weight: 700;
    text-align: center;
    color: var(--blanco);
}

@media (min-width: 768px) {
    .hero__titulo h1 {
        font-size: 7.5rem;
    }
}

.hero__titulo h1 span {
    color: var(--verdeOscuro);
}

.hero__titulo p {
    color: var(--blanco);
    text-align: center;
    font-size: 1.6rem;
}

@media (min-width: 768px) {
    .hero__titulo p {
        font-size: 2.5rem;
    }
}

.hero__btn {
    display: block;
    width: 100%;
    color: var(--blanco);
    font-weight: 700;
    text-decoration: none;
    background-color: var(--verdeOscuro);
    text-align: center;
    text-transform: uppercase;
    padding: 1rem;
    transition: color .3s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .hero__btn {
        margin: 0 auto;
        width: fit-content;
        padding: 1.5rem;
    }
}

.hero__btn:hover {
    color: var(--oro);
}

/** Publicidad **/

.publicidad {
    max-width: 80rem;
        width: 90%;
        margin: 0 auto;
}

.publicidad__grid {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
}

.publicidad__imagen {
    width: 4rem;
    margin: 0 auto;
    display: block;
    color: var(--azulClaro);
}

@media (min-width: 768px) {
    .publicidad__imagen {
        width: 8rem;
    } 
}

.imagenes-grid {
    display: flex;
    justify-content: center;
}

.unidos {
    margin: 0;
}

.publicidad__texto {
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--primario);
}

@media (min-width: 768px) {
    .publicidad__texto {
        font-size: 4rem;
    }
}

/** Conocenos **/
.conocenos__contenedor {
    max-width: 120rem;
    margin: 0 auto;
}

.conocenos {
    margin-top: 5rem;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover, 80rem;
    padding: 0;
}

.notavif.notwebp .conocenos {
    background-image: linear-gradient( to top, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.jpg);
}

.webp .conocenos {
    background-image: linear-gradient( to top, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.webp);
}

.avif .conocenos {
    background-image: linear-gradient( to top, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.avif);
}

@media (min-width: 768px) {
    .conocenos {
        background-position: left top;
        padding: 10rem 0;
        background-size: cover, 80rem;
    }

    .notavif.notwebp .conocenos {
        background-image: linear-gradient( to right, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.jpg);
    }
    
    .webp .conocenos {
        background-image: linear-gradient( to right, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.webp);
    }
    
    .avif .conocenos {
        background-image: linear-gradient( to right, transparent 50%, #DAA520 50%, #DAA520 100% ), url(../img/flor_jabon.avif);
    }

}

.conocenos-grid {
    display: flex;
}

@media (min-width: 768px) {
    .conocenos-grid {

        justify-content: flex-end;
    }
}

.conocenos__texto {
    text-align: justify;
    padding: 4rem;
    height: 70rem;
}

.conocenos__texto h2 {
    text-align: center;
    margin: 0;
}

@media (min-width: 768px) {
    .conocenos__texto {
        flex-basis: 50%;
        height: 33rem;
        padding: 0 2rem 0 10rem;
        color: #FFF
    }
}


.conocenos__btn {
    display: block;
    width: 100%;
    color: var(--blanco);
    font-weight: 700;
    text-decoration: none;
    background-color: var(--verdeOscuro);
    text-align: center;
    text-transform: uppercase;
    padding: 1rem;
    transition: color .3s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .conocenos__btn {
        width: fit-content;
    }
}

.conocenos__btn:hover {
    color: var(--oro);
}

/** Productos**/

.productos {
    width: 80%;
    margin: 0 auto
}

.productos__titulo {
    text-align: center;
    font-size: 3.5rem;
    margin: 5rem 0;
}

.productos p{
    text-align: justify;
    margin: 0 0 3rem 0;
}

.jabon {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    background-repeat: no-repeat;
    margin-bottom: 5rem;
}

.jabon:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 768px) { 
    .jabon {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contenido-jabon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5rem 2rem;
    text-align: center;
    background-color: var(--blanco);
}

.contenido-jabon h3 {
    margin: 0;
    text-align: center;
}

.contenido-jabon a {
    margin-top: 2rem;
}

.contenido-jabon p {
    margin-bottom: 2rem;
    text-align: justify;
}

.lavanda {
    background-size: contain;
    background-position: center bottom;
}

.notavif.notwebp .lavanda {
    background-image: url(../img/jabon_lavandabis.jpg);
}

.webp .lavanda {
    background-image: url(../img/jabon_lavandabis.webp);
}

.avif .lavanda {
    background-image: url(../img/jabon_lavandabis.avif);
}

@media (min-width: 768px) {
    .lavanda {
        background-position: right bottom;
    }

    .lavanda .contenido-jabon {
        padding: 2rem 2rem 0 2rem;
        grid-row: 2 / 3;
        background-color: var(--secundario);
        color: var(--blanco);
    }
}

.energetico {
    background-size: contain;
    background-position: center bottom;
}

.notavif.notwebp .energetico {
    background-image: url(../img/jabon_energeticobis.jpeg);
}

.webp .energetico {
    background-image: url(../img/jabon_energeticobis.webp);
}

.avif .energetico {
    background-image: url(../img/jabon_energeticobis.avif);
}

@media (min-width: 768px) {
    .energetico {
        background-position: left bottom;
    }
    .energetico .contenido-jabon {
        background-color: var(--violeta);
    }
}



@media (min-width: 768px) {
    .energetico .contenido-jabon {
        padding: 2rem 2rem 0 2rem;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        
        color: var(--blanco);
    }
}

.cafe {
    background-size: contain;
    background-position: center bottom;
}

.notavif.notwebp .cafe{
    background-image: url(../img/jabon-cafe-sinletras.jpg);
}

.webp .cafe {
    background-image: url(../img/jabon-cafe-sinletras.webp);
}

.avif .cafe {
    background-image: url(../img/jabon-cafe-sinletras.avif);
}

@media (min-width: 768px) {
    .cafe {
        background-position: right top;
    }

    .cafe .contenido-jabon {
        padding: 2rem 2rem 0 2rem;
        grid-row: 2 / 3;
        background-color: var(--oro);
        color: var(--blanco);
    }
}

.btn {
    color: var(--blanco);
    text-decoration: none;
    cursor: pointer;
    transition: color .3s ease;
    padding: 2rem;
    background-color: var(--verdeOscuro);
}

.btn:hover {
    color: var(--oro);
}

.btn.btn-todos {
    background-color: var(--secundario);
    display: block;
}

@media (min-width: 768px) {
    .btn.btn-todos {
        display:inline-block;
    }
}

.btn.btn-todos:hover {
    background-color: var(--verdeOscuro);
}

.productos__conoce-todos {
    margin: 10rem auto 5rem auto;
    text-align: center;
}

/** Pedidos**/
.pedidos {
    width: 80%;
    margin: 0 auto
}

.pedidos__titulo {
    margin-top: 5rem;
    text-align: center;
}

.pedidos p {
    text-align: justify;
}

.pedidos__redes {
    width: 20rem;
    margin: 5rem auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 4rem;
    transition: width 1s;
}

@media (min-width: 768px) {
    .pedidos__redes {
        width: 35rem;
        grid-template-columns: repeat(3, 1fr);
    }
}

.red__facebook {
    padding: .5rem;
}

.red__instagram {
    margin: 0 auto;
}
.red__correo {
    padding: 1rem;
}

/** Footer **/
.footer {
    margin-top: 5rem;
}

.footer__contenedor {
    background-color: var(--azulClaro);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

@media (min-width: 768px) {
    .footer__contenedor {
        flex-direction: row;
        align-items: center;
    }
}
.footer__logo img {
    margin: 0 auto;
    width: 10rem;
    padding: 1rem 0;
}

.navegacion__contenedor--footer {
    background-color: var(--verdeOscuro);
}

@media (min-width: 768px) {
    .navegacion__contenedor--footer {
        background-color: var(--azulClaro);
    }
}

.copyright {
    background-color: var(--negro);
    color: var(--blanco);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

@media (min-width: 768px) {
    .copyright {
        background-color: var(--verdeOscuro);
    }
    
}