/*======================================================
                    COMPONENTS.CSS
======================================================*/


/*======================================================
                    BOTONES
======================================================*/

.btn{

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

    width:100%;
    height:var(--btn-height);

    border:none;

    border-radius:var(--btn-radius);

    background:var(--gradient-gold);

    color:var(--color-white);

    font-size:var(--btn-font-size);
    font-weight:var(--fw-semibold);

    cursor:pointer;

    box-shadow:var(--shadow-gold);

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 35px rgba(200,154,86,.35);

}

.btn:active{

    transform:scale(.98);

}

.btn i{

    font-size:1.3rem;

    color:inherit;

}

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

.btn-whatsapp{

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

    width:100%;
    height:58px;

    margin-top:24px;

    border-radius:16px;

    background:var(--gradient-gold);

    color:var(--color-white);

    font-size:1rem;
    font-weight:500;

    letter-spacing:.3px;

    box-shadow:0 6px 15px rgba(0,0,0,.20);

    transition:all .3s ease;

}

.btn-whatsapp i{

    color:inherit;

    font-size:1.3rem;

}

.btn-whatsapp:hover{

    transform:translateY(-2px);

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

}

.btn-whatsapp:active{

    transform:translateY(0);

}

/*======================================================
                    CARDS
======================================================*/

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--card-radius);

    padding:var(--card-padding);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--color-primary);

    background:var(--card-hover);

}



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

.section-title{

    text-align:center;

    color:var(--text-white);

    font-size:var(--fs-2xl);

    font-weight:var(--fw-bold);

    margin-bottom:var(--space-7);

}



/*======================================================
                    SUBTITULOS
======================================================*/

.section-subtitle{

    color:var(--text-secondary);

    font-size:var(--fs-md);

    text-align:center;

    max-width:650px;

    margin:auto;

}



/*======================================================
                ICONOS CIRCULARES
======================================================*/

.icon-circle{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    border-radius:50%;

    background:rgba(200,154,86,.08);

    border:1px solid rgba(200,154,86,.20);

    margin-bottom:20px;

}

.icon-circle i{

    color:var(--color-primary);

    font-size:var(--icon-lg);

}



/*======================================================
                REDES SOCIALES
======================================================*/

.social-icon{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--card);

    border:1px solid var(--border);

    transition:var(--transition);

}

.social-icon i{

    color:var(--color-primary);

    font-size:1.3rem;

}

.social-icon:hover{

    transform:translateY(-5px);

    background:var(--color-primary);

    border-color:var(--color-primary);

}

.social-icon:hover i{

    color:white;

}



/*======================================================
                DIVISORES
======================================================*/

.divider{

    width:90px;

    height:4px;

    margin:auto;

    margin-top:15px;

    border-radius:999px;

    background:var(--gradient-gold);

}



/*======================================================
                    BADGES
======================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(200,154,86,.08);

    color:var(--color-primary);

    border:1px solid rgba(200,154,86,.15);

    font-size:var(--fs-sm);

}



/*======================================================
                    IMAGENES
======================================================*/

.image-rounded{

    border-radius:var(--radius-lg);

    overflow:hidden;

}

.image-rounded img{

    width:100%;

    display:block;

}



/*======================================================
                    GLASS
======================================================*/

.glass{

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.05);

}



/*======================================================
                    SOMBRAS
======================================================*/

.shadow{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}



/*======================================================
                    FLEX
======================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}



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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



/*======================================================
                    UTILIDADES
======================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.gold{

    color:var(--color-primary);

}

.hidden{

    display:none;

}



/*======================================================
                ESPACIADOS
======================================================*/

.mt-1{margin-top:var(--space-2);}
.mt-2{margin-top:var(--space-4);}
.mt-3{margin-top:var(--space-6);}
.mt-4{margin-top:var(--space-8);}
.mt-5{margin-top:var(--space-10);}

.mb-1{margin-bottom:var(--space-2);}
.mb-2{margin-bottom:var(--space-4);}
.mb-3{margin-bottom:var(--space-6);}
.mb-4{margin-bottom:var(--space-8);}
.mb-5{margin-bottom:var(--space-10);}



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

.fade-up{

    opacity:0;

    transform:translateY(35px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.scale{

    transition:var(--transition);

}

.scale:hover{

    transform:scale(1.05);

}