/* ======================================================
   DTF SELECTOR
====================================================== */

.dtf-selector{

    display:flex;
    width:100%;
    background:#161616;
    border-radius:18px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    color:#ffffff;
    box-sizing:border-box;

}


/* ======================================================
   COLUMNAS
====================================================== */

.selector-column{

    flex:1;
    padding:35px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;

}


/* Línea divisoria */

.selector-column:not(:last-child)::after{

    content:"";
    position:absolute;
    top:30px;
    right:0;
    width:1px;
    height:calc(100% - 60px);
    background:rgba(255,255,255,.08);

}


/* ======================================================
   TITULOS
====================================================== */

.selector-column h3{

    margin:0 0 25px;
    font-size:15px;
    font-weight:700;
    color:#e41a1d;
    text-transform:uppercase;
    letter-spacing:.6px;

}


/* ======================================================
   MATERIALES
====================================================== */

.material-list{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.material-card{

    width:100%;
    background:#232323;
    border:1px solid #303030;
    border-radius:12px;
    padding:18px;
    color:#FFF;
    cursor:pointer;
    transition:.25s;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}

.material-card strong{

    font-size:17px;
    margin-bottom:8px;

}

.material-card span{

    font-size:13px;
    opacity:.85;

}

.material-card:hover{

    border-color:#e41a1d;

}

.material-card.active{

    background:#e41a1d;
    border-color:#e41a1d;

}


/* ======================================================
   METROS
====================================================== */

.meters-column{

    align-items:center;
    justify-content:center;

}


.meter-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0px;
    background: #232323;
    border-radius: 10px;
    padding: 5px 5px 5px 5px;
}





.meter-btn{

    width:48px;
    height:48px;

    display:flex;
    justify-content:center;
    align-items:center;

    line-height:1;

    background:#2b2b2b;
    border:none;
    border-radius:8px;

    color:#FFF;
    font-size:28px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

    padding:0;

}

.meter-btn:hover{

    background:#e41a1d;

}

#meter-value{

    width:60px;
    text-align:center;
    font-size:42px;
    font-weight:700;

}

.meter-text{

    font-size:14px;
    opacity:.7;

}


/* ======================================================
   PRECIO
====================================================== */

.price-column{

    align-items:center;
    justify-content:center;

}

#price{

    font-size:48px;
    font-weight:700;
    margin:20px 0 35px;

}


/* ======================================================
   BOTÓN
====================================================== */

#buy-button{

    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    background:#e41a1d;

    color:#FFF;

    text-decoration:none;

    border-radius:10px;

    padding:16px;

    font-size:17px;

    font-weight:600;

    transition:.25s;

}

#buy-button:hover{

    background:#ef2a2d;

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:991px){

    .dtf-selector{

        flex-direction:column;

    }

    .selector-column{

        padding:30px;

    }

    .selector-column::after{

        display:none;

    }

}

@media(max-width:576px){

    .selector-column{

        padding:25px;

    }

    #price{

        font-size:38px;

    }

    #meter-value{

        font-size:34px;

    }

}