.fl-module-button.c-btn {
    display: inline-block;

    /* (Asegura que la estructura se muestra como inline-block por defecto) */

    a.fl-button {
        padding: 13.5px;
        min-width: 151px;
        text-align: center;
        transition: var(--transition);

        /* ============================
           Variante: Primario
        ============================ */
        .c-btn--primary & {
            background: var(--primary);
        }

        .c-btn--primary &:hover,
        .c-btn--primary &:focus {
            background: 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: 1px 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: 1px solid var(--secondary);
        }

        .c-btn--outline-secondary &:hover,
        .c-btn--outline-secondary &:focus {
            background: var(--secondary);
        }

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

        .c-btn--white &:hover,
        .c-btn--white &:focus {
            background: var(--primary);
            border-color: var(--primary);
        }

        /* ============================
           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);
        }

        /* ============================
           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);
        font-size: 15.84px;

        .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);
            font-size: 17px;
            font-weight: 500;
            font-family: "Plus Jakarta Sans";
        }

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

        }

        .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);
        }
    }
}