.fl-module-button.c-btn {
    display: inline-block;
    /* (Asegura que la estructura se muestra como inline-block por defecto) */

    a.fl-button {
        padding: 18px 45px;
        border-radius: var(--border-radius-button);
        transition: var(--transition);

        &:hover {
            scale: 1.05;
        }

        /* ============================
           Variante: Primario
        ============================ */
        .c-btn--primary & {
            background: var(--primary);
            border: 2px solid var(--primary);
        }
        .c-btn--primary &:hover,
        .c-btn--primary &:focus {
            background: var(--secondary);
            border: 2px solid var(--secondary);
        }

        /* ============================
           Variante: Secundario
        ============================ */
        .c-btn--secondary & {
            background: var(--secondary);
        }
        .c-btn--secondary &:hover,
        .c-btn--secondary &:focus {
            background: var(--primary);
        }

        /* ============================
           Variante: Outline Primario
        ============================ */
        .c-btn--outline-primary & {
            background: transparent;
            border: 2px solid var(--primary);
        }
        .c-btn--outline-primary &:hover,
        .c-btn--outline-primary &:focus {
            background: var(--primary);
        }

        /* ============================
           Variante: Outline Secundario
        ============================ */
        .c-btn--outline-secondary & {
            background: transparent;
            border: 2px solid var(--secondary);
        }
        .c-btn--outline-secondary &:hover,
        .c-btn--outline-secondary &:focus {
            background: var(--secondary);
        }

        /* ============================
           Variante: Outline Blanco
        ============================ */
        .c-btn--outline-white & {
            background: transparent;
            border: 2px solid var(--white);
        }
        .c-btn--outline-white &:hover,
        .c-btn--outline-white &:focus {
            background: var(--white);
        }

        /* ============================
           Variante: Blanco
        ============================ */
        .c-btn--white & {
            background: var(--white);
            border: 2px solid var(--white);
        }
        .c-btn--white &:hover,
        .c-btn--white &:focus {
            background: var(--secondary);
            border-color: var(--secondary);
        }

        /* ============================
           Variante: Negro
        ============================ */
        .c-btn--black & {
            background: var(--black);
            border: 2px solid var(--black);
        }
        .c-btn--black &:hover,
        .c-btn--black &:focus {
            background: var(--secondary);
            border-color: var(--secondary);
        }

        /* ============================
           Variante: Sin Fondo
        ============================ */
        .c-btn--ul & {
            background: none;
            border: 0;
            border-bottom: 2px solid var(--white);
            border-radius: 0;
            padding: 10px 5px;
        }
        .c-btn--ul &:hover,
        .c-btn--ul &:focus {
            opacity: 0.8;
        }

        /* ============================
           Icono dentro del botón
        ============================ */
        .c-btn__icon {
            font-size: 1.1em;
            display: inline-block;
            margin-left: 0.5em;
            transition: color 0.2s;
        }
    }

    /* ============================
       Color del texto (aplicado a .fl-button-text)
    ============================ */
    .fl-button-text {
        transition: var(--transition);

        .c-btn--primary & {
            color: var(--on-primary);
        }
        .c-btn--primary a.fl-button:hover &,
        .c-btn--primary a.fl-button:focus & {
            color: var(--on-secondary);
        }

        .c-btn--secondary & {
            color: var(--on-secondary);
        }
        .c-btn--secondary a.fl-button:hover &,
        .c-btn--secondary a.fl-button:focus & {
            color: var(--on-primary);
        }

        .c-btn--outline-primary & {
            color: var(--on-white);
        }
        .c-btn--outline-primary a.fl-button:hover &,
        .c-btn--outline-primary a.fl-button:focus & {
            color: var(--on-primary);
        }

        .c-btn--outline-secondary & {
            color: var(--secondary);
        }
        .c-btn--outline-secondary a.fl-button:hover &,
        .c-btn--outline-secondary a.fl-button:focus & {
            color: var(--on-secondary);
        }

        .c-btn--outline-white a.fl-button:hover &,
        .c-btn--outline-white a.fl-button:focus & {
            color: var(--on-white);
        }

        .c-btn--white & {
            color: var(--on-white);
        }
        .c-btn--white a.fl-button:hover &,
        .c-btn--white a.fl-button:focus & {
            color: var(--on-primary);
        }

        .c-btn--black & {
            color: var(--on-black);
        }
        .c-btn--black a.fl-button:hover &,
        .c-btn--black a.fl-button:focus & {
            color: var(--on-secondary);
        }
    }
}

.uabb-infobox-cta-link {
    font-weight: 500;
    transition: all .2s ease-in-out;
}