:root {
    --light-primary-color: #FCE59D;
    --dark-primary-color: #E7C57F;
    --light-secondary-color: #b6e3ec;
    --dark-secondary-color: #6b94a7;
    --comp-color: #202C3C; 
}   
   
   html, body{
        background: #fff;     
        color: var(--comp-color)   
    }

    /* sovrascrivo default.css */
    .mainContainer {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }


    .regalaContainer{
        margin:auto;
        display: grid;
        place-items: start center;
        gap: 36px;
    }

    .pageTitle {text-align: center;}

    .prodotti {
        display:grid;
        place-items: center center;
        grid-template-columns: repeat(3,1fr);
        width: clamp( 300px, 80%, 1300px);
        margin:auto;
        gap: 24px;
    }

    .prodotto{
        width: 100%;
        border-radius: 10px;
        background-image: linear-gradient(140deg, var(--light-secondary-color) 0%, var(--dark-secondary-color) 100% );
        box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.3);
        overflow-x: hidden;
        padding: 24px 12px;
        border: 2px solid var(--light-primary-color);
        position: relative;
    }
    .prodotto::before {
        content: "";
        display: block;
        width: 150px;
        height: 36px;
        background: linear-gradient(90deg, var(--light-primary-color) 0%, var(--dark-primary-color) 100%);
        transform: rotate(320deg);
        margin-left: -46px;
        margin-top: -12px;
        border: 1px solid var(--light-primary-color)
    }

    .prodottoContainer{
        
        display: grid;
        grid-auto-flow: row;
        grid-row: auto;
        place-items:center center;
        text-align: center;
        gap: 15px;
        margin: 5px auto 20px;
    }

    .nome{
        color:#000;
        font-family: poppins;
        font-weight:600;
        font-size: 1.2rem;
        
    }

    .prodottoContainer .prezzo{
        color:#FFF;
        font-family: poppins;
        font-weight:600;
        font-size: 1.3rem;
    }
    
    .prodottoContainer .prezzo .originale{
        color:#000;
        font-family: poppins;
        font-weight:600;
        font-size: 0.8rem;
        text-decoration: line-through;
    }

    .prodottoContainer .azione{
        color: var(--comp-color);
        background: linear-gradient(90deg, var(--light-primary-color) 0%, var(--dark-primary-color) 100%);
        border: 2px solid var(--light-primary-color);
        border-radius: 30px;
        
        font-family: poppins;
        font-weight:600;
        font-size: 1rem;
        transition: all 0.3s;
        padding: 5px 20px;
    }
    
    .prodottoContainer .descrizione_estesa{
        font-size: 0.7rem;
        
    }

    .tutorial {
        background: linear-gradient(130deg, var(--light-primary-color) 0%, var(--dark-primary-color) 100%);
        position: relative;
        width: 100%;
    }
    .tutorial-container{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px;
        font-size: 1rem;
        padding: 20px;
        max-width: 900px;
        margin: 0 auto;
    }
    .tutorial::after, .tutorial::before{
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: var(--light-primary-color);
        position: absolute;
        left: 0;
        right: 0;
        top: 4px;
    }
    .tutorial::after {
        bottom: 4px;
        top: initial
    }

    .step{
        /* display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 12px; */
        text-align: center;
    }

    .numero{
        background: var(--comp-color);
        border: 2px solid var(--light-primary-color);

        color:#fff;
        font-family: poppins;
        font-weight:600;
        font-size: 14px;
        line-height: 14px;
        
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: 0 auto 10px auto;
        display: grid;
        place-items: center center;
        box-shadow: 0px 0px 8px -2px rgb(179 138 45);
    }

    .testo{
        font-family: poppins;
        font-weight:600;
        font-size: 14px;
        
    }


    .tabella_comparativa{
        width: clamp( 300px, 80%, 1300px);
        box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.3);
        display: grid;
        grid-template-columns: 8fr 1fr 1fr;
        background-color:#eee;
    }

    .tabella_comparativa div{
        padding: 10px;
        background-color:#FFF
    }
    
    .tabella_comparativa .intro{
        background-color:#eee;
        place-self: end left;
        width:100%;
    }

    
    .disclaimer{ 
        display:grid;
        place-items: center center;
        
        width: clamp( 300px, 80%, 1300px);
        margin:auto;
        gap: 20px;

        font-size: 10px;
    }



    @media screen and (max-width: 990px){
        .prodotti {
            grid-template-columns: 1fr;
        }
        
    }

    @media(min-width: 568px){
        .step{
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 12px;
        }
        .step .numero{
            font-size: 18px;
            line-height: 18px;            
            margin: 0;
        }
        .step .testo {
            text-align: left;
        }
    }


/*
    .prodotti .prodotto:nth-child(1) {
        background: linear-gradient(137deg, rgba(255,0,0,0.37) 0%, rgba(255,0,0,1) 7%, rgba(191,0,0,1) 8%, rgba(255,255,255,1) 8%, rgba(231,231,231,1) 11%, rgba(255,0,0,0.31) 11%, rgba(255,0,0,1) 84%, rgba(191,0,0,1) 85%, rgba(255,255,255,1) 85%, rgba(231,231,231,1) 90%, rgba(255,0,0,0.59) 90%);
    }

    .prodotti .prodotto:nth-child(2) {
        background: linear-gradient(137deg, rgba(0,128,0,0.37) 0%, rgba(0,128,0,1) 7%, rgba(0,96,0,1) 8%, rgba(255,255,255,1) 8%, rgba(231,231,231,1) 11%, rgba(0,128,0,0.31) 11%, rgba(0,128,0,1) 84%, rgba(0,96,0,1) 85%, rgba(255,255,255,1) 85%, rgba(231,231,231,1) 90%, rgba(0,128,0,0.59) 90%);
    }

    .prodotti .prodotto:nth-child(0) {
        background: linear-gradient(137deg, rgba(0,0,255,0.37) 0%, rgba(0,0,255,1) 7%, rgba(0,0,191,1) 8%, rgba(255,255,255,1) 8%, rgba(231,231,231,1) 11%, rgba(0,0,255,0.31) 11%, rgba(0,0,255,1) 84%, rgba(0,0,191,1) 85%, rgba(255,255,255,1) 85%, rgba(231,231,231,1) 90%, rgba(0,0,255,0.59) 90%);
    }
*/
