/* =========================================================
   GRUPO LAS LETRAS — BOTONES
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 28px;

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

    background: var(--color-principal);
    color: var(--color-blanco);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    transition: var(--transicion);
}

.btn:hover {
    background: transparent;
    color: var(--color-principal);
}


/* Botón principal */

.btn-primary {
    background: var(--color-principal);
    border-color: var(--color-principal);
}

.btn-primary:hover {
    background: transparent;
    color: var(--color-principal);
}


/* Botón secundario */

.btn-secondary {
    background: transparent;
    color: var(--color-principal);
}

.btn-secondary:hover {
    background: var(--color-principal);
    color: var(--color-blanco);
}


/* Botón pequeño */

.btn-small {
    padding: 9px 18px;

    font-size: 11px;
}


/* Botón claro */

.btn-light {
    background: var(--color-blanco);
    color: var(--color-principal);

    border-color: var(--color-blanco);
}

.btn-light:hover {
    background: transparent;
    color: var(--color-blanco);
}