/*==================================================
  BUTTONS
  Proyecto: QPERTINO
==================================================*/

/*=====================================
BASE
=====================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px clamp(22px,4vw,34px);

    border:none;

    border-radius:8px;

    cursor:pointer;

    text-decoration:none;

    font-family:'Inter',sans-serif;

    font-size:1rem;

    font-weight:600;

    transition:all .35s ease;

    white-space:nowrap;

    max-width:100%;

    box-sizing:border-box;

}
/*=====================================
BOTÓN PRINCIPAL
=====================================*/

.btn-primary{

    background:var(--gold);

    color:#FFFFFF;

    box-shadow:0 10px 25px rgba(200,168,107,.25);

}

.btn-primary:hover{

    background:#B9924F;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(200,168,107,.35);

}

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

.btn-dark{

    background:var(--bg-dark);

    color:#FFFFFF;

}

.btn-dark:hover{

    background:#1E293B;

    transform:translateY(-3px);

}

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

.btn-secondary{

    background:#FFFFFF;

    color:var(--heading);

    border:1px solid #E5E7EB;

}

.btn-secondary:hover{

    background:#F8FAFC;

    border-color:var(--gold);

    color:var(--gold);

}

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

.btn-outline{

    background:transparent;

    border:2px solid var(--gold);

    color:var(--gold);

}

.btn-outline:hover{

    background:var(--gold);

    color:#FFFFFF;

}

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

.btn-white{

    background:#FFFFFF;

    color:var(--heading);

}

.btn-white:hover{

    background:#F3F4F6;

}

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

.btn-link{

    padding:0;

    background:none;

    color:var(--gold);

    font-weight:600;

}

.btn-link:hover{

    gap:16px;

}

/*=====================================
TAMAÑOS
=====================================*/

.btn-sm{

    padding:12px 24px;

    font-size:.9rem;

}

.btn-lg{

    padding:20px 42px;

    font-size:1.1rem;

}

/*=====================================
ANCHO COMPLETO
=====================================*/

.btn-block{

    width:100%;

}

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

.btn i{

    font-size:1rem;

}

.btn svg{

    width:18px;

    height:18px;

}

/*=====================================
DESHABILITADO
=====================================*/

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    pointer-events:none;

}

/*=====================================
FOCUS
=====================================*/

.btn:focus-visible{

    outline:3px solid rgba(200,168,107,.35);

    outline-offset:3px;

}

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

@media(max-width:768px){

.btn{

width:100%;

max-width:100%;

padding:15px 22px;

font-size:.95rem;

}

.btn-lg{

padding:18px 22px;

font-size:1rem;

}

.btn-sm{

padding:12px 18px;

}

}

@media(max-width:480px){

.btn{

padding:14px 18px;

font-size:.9rem;

border-radius:6px;

}

.btn-lg{

padding:16px 18px;

}

.btn i{

font-size:.95rem;

}

.btn svg{

width:16px;

height:16px;

}

}