/* TYPOGRAPHY */
/* ----------------------------------------- */

@font-face {
    font-family: 'Roboto Flex';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/RobotoFlex-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/PlayfairDisplay-Italic-VariableFont.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.*/
p, a, li{
    font-size: 3.1000rem;
}
h1, h2, h3, h4, h5, h6, header, p, button{
    font-family: "Roboto Flex", sans-serif;
    font-weight: 500 !important;
    line-height: 1 !important;
    margin: 0 0 20px;
    color: #333;
    text-align: center;
}
p{
    font-weight: 500 !important;
}

header a{
    color: #3FAA35;
    font-size: 3.1000rem;
    text-decoration: none;
}

em, i, .italic, .price {
    font-family: 'Playfair Display', serif !important;
    font-style: italic; /* Asegurándonos de que el estilo itálico se aplique */
    font-weight: 300;
}
.woocommerce-page em{
    font-family: "Roboto Flex", sans-serif !important;
}

h1{ font-size: 7.2000rem !important }
h2{ font-size: 7.2000rem !important }
h3{ font-size: 5.0000rem !important }
h4{ font-size: 4.2000rem !important }
h5{ font-size: 3.4000rem !important }
.home-slider .tags{
    font-size: 4.4000rem;
}
.price{
    font-size: 7.2rem !important;
}
.woocommerce-page h3,
.woocommerce-page h4,
.woocommerce-page h5,
.woocommerce-page .price,
.woocommerce-page p,
.woocommerce-page a,
.woocommerce-page li
{ 
    /* font-size: initial !important  */
}
.woocommerce-page p{
    text-align: left;
}

@media (min-width: 576px) {
    p, li{
        font-size: 2.1000rem;
    }
    a {
        font-size: 2.2000rem;
    }
    header a{
        font-size: 2.1rem;
    }
    /* h1{ font-size: 6.2000rem } */
    h1{ 
        font-size: 6.2000rem !important;
        line-height: 6.9rem;
    }
    h2{ 
        font-size: 6.2000rem !important;
        line-height: 6.9rem;
    }
    h3{ 
        font-size: 4.0000rem !important ;
    }
    h4{ 
        font-size: 3.2000rem !important ;
    }
    h5{ 
        font-size: 2.4000rem !important ;
    }
    .price{
        font-size: 6.2rem !important;
    }
    
    
}