@font-face {
    font-family: "HostGrotesk";
    src: url(../fonts/HostGrotesk-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Alfa";
    src: url(../fonts/AlfaSlabOne-Regular.ttf);
}

:root {

    --primary: rgb(244, 130, 96);
    --secondary: #eebf68;
    --tertiary: #0099A6;
    --light: RGB(255, 255, 255);
    --light-transparente: RGBA(255, 255, 255, .9);
}

html{
    scroll-behavior: smooth;
}


body {
    font-family: "HostGrotesk";
    background-color: var(--primary);
}

/* ---------------------------- */

h1, h2 {
    font-family: "Alfa";
}

h1 {
    font-size: 3rem;
}

h3 {
    text-align: center;
    text-transform: uppercase;
}

#semana h3 {
    text-align: left;
}

/* ---------------------------- */

.btn-light {
    background-color: var(--light-transparente);
    color: var(--primary);
    border: 0;
}

.btn-warning {
    border-radius: 2rem;
    background-color: var(--secondary);
    color: white;
    border: 0;
}

.btn-danger {
    border-radius: 2rem;
    background-color: var(--primary);
    color: white;
    border: 0;
}

/* ---------------------------- */

#hero {
    background: url(../img/hero.jpg) no-repeat center center fixed;
    background-size: cover;
}

#hero-text {
    padding: 20vh 0;
    text-align: center;
    color: white;
}

section {
    padding: 15vh 0;
}

section img {
    width: 100%;
}

#masVendidos {
    color: var(--light);
}

#masVendidos img{
    border-radius: 1rem;
}

#nuestrosProductos {
    color: var(--light);
    background-color: var(--secondary);
}

#franja {
    display: none;
}

@media screen and (min-width: 1200px) {
    #franja {
        display: block;
        background: url(../img/bg.jpg) no-repeat center center fixed;
        background-size: cover;
        min-height: 50vh;
    }
}

#semana {
    background-color: var(--tertiary);
    color: var(--light);
}

#semana .redondeado {
    border-radius: 1rem;
    background-color: var(--light);
    
}
#semana figure{
    margin: 0 !important;
}

footer{
    background-color: var(--primary);
    color: var(--light);
    padding: 1.5rem;
    text-align: center;
}