/* ==========================================================
   TRINITY ECUADOR
   BUTTONS.CSS
==========================================================*/

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    border-radius:14px;

    font-family:var(--font-family);

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

    white-space:nowrap;

}

/*==========================================================
  EFECTO BRILLO
==========================================================*/

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.7s;

}

.btn:hover::before{

    left:120%;

}

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

.btn-primary{

    background:var(--gradient-primary);

    color:#ffffff;

    box-shadow:0 18px 40px rgba(15,76,129,.18);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 55px rgba(15,76,129,.28);

}

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

.btn-outline{

    background:#ffffff;

    color:var(--color-primary);

    border:2px solid rgba(15,76,129,.15);

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

}

.btn-outline:hover{

    background:var(--color-primary);

    color:#ffffff;

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

    transform:translateY(-5px);

}

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

.btn-light{

    background:#ffffff;

    color:var(--color-primary);

    font-weight:700;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.btn-light:hover{

    transform:translateY(-5px);

    background:#f7f9fc;

}

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

.btn-secondary{

    background:var(--color-success);

    color:#ffffff;

}

.btn-secondary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(46,204,113,.30);

}

/*==========================================================
  BOTÓN PEQUEÑO
==========================================================*/

.btn-sm{

    height:42px;

    padding:0 22px;

    font-size:14px;

}

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

.btn-lg{

    height:64px;

    padding:0 42px;

    font-size:17px;

}

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

.btn-icon{

    width:56px;

    height:56px;

    padding:0;

    border-radius:50%;

}

.btn-icon i{

    font-size:20px;

}

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

.btn-block{

    width:100%;

}

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

.btn-transparent{

    background:transparent;

    color:var(--color-primary);

}

.btn-transparent:hover{

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

}

/*==========================================================
  ESTADOS
==========================================================*/

.btn:active{

    transform:scale(.96);

}

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}

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

.btn:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(47,128,237,.15),

        0 15px 40px rgba(15,76,129,.18);

}

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

@media(max-width:768px){

.btn{

    width:100%;

}

}