: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;;
}

.nuestros-productos__contenedor {
    max-width: 100rem;
    width: 80%;
    margin: 0 auto;
}

.nuestros-productos__contenido {
    text-align: justify;
}

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

@media (min-width: 768px) {
    .nuestros-productos__titulo {
        font-size: 4.5rem;
    }
}

.nuestros-productos__nombre {
    font-size: 3rem;
    text-align: center;
}

@media (min-width: 768px) {
    .nuestros-productos__nombre {
        font-size: 5rem;
    }
}

/** Degradados **/

.degradado {
    color: transparent;
    background: linear-gradient(to right, var(--azulClaro) 0%, var(--secundario) 100% );
    -webkit-background-clip: text;
    background-clip: text;
}

/** Tarjeta **/

.tarjeta {
    border: 1px solid var(--grisClaro);
    box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .tarjeta {
        display: flex ;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
    }
}

.tarjeta__imagen {
    border-radius: 1rem 1rem 0 0;
}

@media (min-width: 768px) {
    .tarjeta__imagen {
        max-width: 30rem;
        border-radius: 1rem 0 0 1rem;
    }
}

.tarjeta__contenedor {
    padding: 2rem;
}

@media (min-width: 768px) {
    .tarjeta__contenedor {
        padding: 0.5rem 2rem;
    }
}

.tarjeta__titulo {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--fuenteTitulo);
    font-weight: 700;
    color: var(--oro);
}

.tarjeta__descripcion {
    text-align: justify;
}

.tarjeta__compra-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}  

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

    }    
}

.tarjeta__precio {
    margin: 0;
    text-align: center;
    color: var(--primario);
    font-weight: 900;
    font-size: 4rem;
}

.tarjeta__btn {
    background-color: var(--verdeOscuro);
    display: inline-block;
    padding: 1rem;
    color: var(--blanco);
    text-align: center;
    text-decoration: none;
    transition: color .3s ease;
    width: 100%;
}

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

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

/** Ingredientes **/

.tarjeta__ingredientes {
    border: 1px solid var(--grisClaro);
    box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
    border-radius: 1rem;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

.tarjeta__ingredientes ul {
    margin: 0;
    padding: 0;
}

.ingredientes__contenedor {
    max-width: 100rem;
    width: 80%;
    margin: 0 auto
}

.ingredientes {
    text-align: center;
    margin: 3rem 0;
    font-size: 6rem;
}

.ingredientes__texto {
    text-align: justify;
}

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

@media (min-width: 768px) {
    .ingredientes__listado {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}