/*
==========================================
MATRIA SALPICÓN BUILDER
==========================================
*/

:root{

    --matria:#C76D76;
    --cafe:#5A3D31;
    --crema:#FCF8F4;
    --gris:#777;
    --borde:#EFE7E1;

}

/*==================================
CONTENEDOR
==================================*/

.matria-builder{

    max-width:1450px;
    margin:70px auto;
    padding:60px;
    background:var(--crema);
    border-radius:35px;

}

/*==================================
HEADER
==================================*/

.matria-header{

    text-align:center;
    margin-bottom:70px;

}

.matria-badge{

    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#F8E5E7;
    color:var(--matria);
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;

}

.matria-header h2{

    font-size:54px;
    color:var(--cafe);
    margin:20px 0;
    font-weight:700;

}

.matria-header p{

    max-width:760px;
    margin:auto;
    color:#7D736C;
    font-size:20px;
    line-height:1.8;

}

/*==================================
GRID
==================================*/

.matria-grid{

    display:grid;
    grid-template-columns:1fr 1fr 360px;
    gap:40px;
    align-items:start;

}

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

.matria-column h3{

    color:var(--matria);
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:14px;
    margin-bottom:10px;

}

.matria-column h4{

    color:var(--cafe);
    font-size:36px;
    margin-bottom:35px;
    font-weight:700;

}

/*==================================
CARD
==================================*/

.matria-card{

    background:#fff;
    border-radius:25px;
    overflow:hidden;
    margin-bottom:35px;
    border:1px solid var(--borde);

    box-shadow:
        0 10px 25px rgba(0,0,0,.04);

    transition:.35s;

    padding:22px;

}

.matria-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);

}

.matria-card.active{

    border-color:var(--matria);

    box-shadow:
        0 25px 50px rgba(0,0,0,.12),
        0 0 0 2px rgba(199,109,118,.20);

}

/*==================================
IMAGEN
==================================*/

.matria-image{

    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:18px;
    margin-bottom:22px;

}

/*==================================
TEXTOS CARD
==================================*/

.matria-card h4{

    font-size:30px;
    color:var(--cafe);
    margin-bottom:12px;

}

.matria-card small{

    display:block;
    color:#888;
    margin-bottom:18px;

}

.matria-card ul{

    padding-left:20px;
    margin:18px 0;

}

.matria-card li{

    margin-bottom:8px;
    color:#555;
    line-height:1.6;

}

.matria-card p{

    color:#555;
    line-height:1.7;
    margin:20px 0;

}

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

.matria-select{

    width:100%;
    margin-top:20px;

    border:none;
    border-radius:50px;

    background:var(--matria);

    color:#fff;

    padding:16px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.matria-select:hover{

    background:var(--cafe);

}

.matria-select.selected{

    background:var(--cafe);

}

/*==================================
RESUMEN
==================================*/

.matria-summary{

    position:sticky;
    top:30px;

    background:#fff;

    padding:35px;

    border-radius:30px;

    border-top:8px solid var(--matria);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

}

.matria-summary h3{

    color:var(--cafe);
    font-size:40px;
    margin-bottom:20px;

}

.matria-summary hr{

    border:none;
    border-top:1px solid #ECECEC;
    margin:20px 0;

}

.matria-summary p{

    margin-bottom:15px;
    font-size:18px;

}

.matria-summary strong{

    color:var(--cafe);

}

.matria-price{

    text-align:center;

    font-size:48px;

    color:var(--cafe);

    font-weight:700;

    margin:30px 0;

}

.matria-cart{

    width:100%;

    border:none;

    border-radius:50px;

    background:var(--matria);

    color:#fff;

    padding:18px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.matria-cart:hover{

    background:var(--cafe);

}

/*==================================
ANIMACIONES
==================================*/

.matria-card,
.matria-summary,
.matria-select{

    transition:all .30s ease;

}

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

@media(max-width:1200px){

.matria-grid{

grid-template-columns:1fr;

}

.matria-summary{

position:relative;
top:auto;

}

}

@media(max-width:768px){

.matria-builder{

padding:25px;

}

.matria-header h2{

font-size:38px;

}

.matria-column h4{

font-size:28px;

}

.matria-summary h3{

font-size:30px;

}

.matria-price{

font-size:38px;

}

}