/* Module: happy tragos */

/* ===============================
   MODULO HAPPY + TRAGOS (destacado)
   =============================== */

.jh-happytragos{
    display:grid;
    grid-template-columns: 2.2fr 1.1fr 2.2fr;
    min-height: 360px;
}

.jh-happytragos__col{
    padding: 56px 52px;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}

.jh-happytragos__left{
    background:var(--jh-entree-rojo-lavado);
    gap: 10px;
}

.jh-happytragos__water{
    position:static;
    top: 26px;
    left: 26px;
    font-family: var(--jh-item-title-font);
    /* font-weight: 400; */
    text-transform:uppercase;
    letter-spacing: 1px;
    font-size: clamp(54px, 5.8vw, 96px);
    line-height: .9;
    color: rgba(252,191,44,0.45);
    pointer-events:none;
    user-select:none;
}

.jh-happytragos__center{
    background:var(--jh-entree-naranja-fuerte);
    align-items:center;
    justify-content:center;
}

.jh-happytragos__feat{
    text-align:left;
}

.jh-happytragos__feat-name{
    font-family: var(--jh-item-title-font);
    font-weight: 400; 
    text-transform:uppercase;
    letter-spacing: 1px;
    line-height: .9;
    color:var(--jh-entree-naranja-lavado);
    font-size: clamp(39px, 3.8vw, 30px);
}

.jh-happytragos__feat-name span{
    display:block;
}

.jh-happytragos__feat-price{
    margin-top: 16px;
    font-family: var(--jh-item-desc-font, 'Inter', system-ui, sans-serif);
    /* font-weight: 900; */
    color:var(--jh-entree-negro);
    font-size: 15px;
}

.jh-happytragos__right{
    background:var(--jh-entree-negro);
    padding:0;
    flex-direction:row;
}

.jh-happytragos__right-inner{
    padding: 56px 52px;
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
}

.jh-happytragos__subtitle{
    font-family: var(--jh-item-title-font, 'Inter', system-ui, sans-serif);
    /* font-weight: 900; */
    text-transform:uppercase;
    letter-spacing: 1.2px;
    color:var(--jh-entree-naranja-lavado);
    font-size: 26px;
    margin-bottom: 22px;
}

.jh-happytragos__row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 18px;
    padding: 6px 0;
}

.jh-happytragos__name{
    font-family: var(--jh-item-desc-font, 'Inter', system-ui, sans-serif);
    /* font-weight: 800; */
    text-transform:uppercase;
    letter-spacing: .6px;
    color:var(--jh-entree-naranja-lavado);
    font-size: 15px;
    line-height: 1.25;
}

.jh-happytragos__price{
    font-family: var(--jh-item-desc-font, 'Inter', system-ui, sans-serif);
    /* font-weight: 900;*/
    color:var(--jh-entree-naranja-lavado);
    font-size: 15px;
    line-height: 1.25;
    white-space:nowrap;
}

.jh-happytragos__deco{
    width: 130px;
    background:var(--jh-entree-rojo-lavado);
    position:relative;
    overflow:hidden;
}

.jh-happytragos__deco span{
    position:absolute;
    width: 170px;
    height: 28px;
    background:var(--jh-entree-naranja-lavado);
    transform: rotate(-18deg);
    right: -70px;
    opacity: .95;
    border-radius: 6px;
}

.jh-happytragos__deco span:nth-child(1){
    top: 70px;
}
.jh-happytragos__deco span:nth-child(2){
    top: 135px;
}
.jh-happytragos__deco span:nth-child(3){
    top: 200px;
}

@media (max-width: 980px){
    .jh-happytragos{
        grid-template-columns: 1fr;
    }
    .jh-happytragos__right{
        flex-direction:column;
    }
    .jh-happytragos__deco{
        width:100%;
        height: 90px;
        display: none;
    }
    .jh-happytragos__deco span{
        top: 18px;
    }
    .jh-happytragos__water{
        font-size: 70px;
    }
    .jh-happytragos__col, .jh-happytragos__right-inner{
        padding: 40px 28px;
    }
}