/** ==============================================================================================================================================
 * I. CSS de los botones
 */
 a, button{
    transition: all 0.5s;
}
a:hover, button:hover
a:active, button:active,
a:focus, button:focus{
    transition: all 0.5s;
}
.boton_merch,
.boton_graficas,
.boton_eventos,
.boton_diseno_marketing_oscuro,
.boton_diseno_marketing,
.boton_verde_wsp,
.boton_verde,
.boton_magenta_borde,
.boton_dorado,
.boton_transparente_blanco,
.boton_transparente_magenta,
.boton_magenta,
.boton_rojo,
.boton_transparente,
.boton_cian{
    border: solid 2px;
    border-radius: 50px;
    padding: 0.6em 1.5em;
}
/**
 * 1.- Botones del Banner Principal (Rojo > Blanco) */
.boton_rojo{
    background-color: var(--rojo);
    color: var(--blanco);
    border-color: var(--rojo) !important;
}
.boton_rojo:hover,
.boton_rojo:active,
.boton_rojo:focus{
    background-color: var(--blanco);
    color: var(--rojo);
    border-color: var(--blanco) !important;
}

/**
 * 2.- Botones del Banner Principal (Transparente > Rojo) */
 .boton_transparente{
    background-color: transparent;
    color: var(--rojo);
    border-color: var(--rojo) !important;
}
.boton_transparente:hover,
.boton_transparente:active,
.boton_transparente:focus{
    background-color: var(--rojo);
    color: var(--blanco);
    border-color: var(--rojo) !important;
}

/**
 * 3.- Boton Cian (Cian > Blanco) */
 .boton_cian{
    background-color: var(--cian);
    color: var(--blanco);
    border-color: var(--cian) !important;
}
.boton_cian:hover,
.boton_cian:active,
.boton_cian:focus{
    background-color: var(--blanco);
    color: var(--cian);
    border-color: var(--cian) !important;
}

/**
 * 4.- Boton Magenta (Magenta > Blanco) */
 .boton_magenta{
    background-color: var(--magenta);
    color: var(--blanco);
    border-color: var(--magenta) !important;
}
.boton_magenta:hover,
.boton_magenta:active,
.boton_magenta:focus{
    background-color: var(--blanco);
    color: var(--magenta);
    border-color: var(--blanco) !important;
}

/**
 * 4.- Boton Transparente (Transparente > Magenta) */
 .boton_transparente_magenta{
    background-color: transparent;
    color: var(--magenta);
    border-color: var(--magenta) !important;
}
.boton_transparente_magenta:hover,
.boton_transparente_magenta:active,
.boton_transparente_magenta:focus{
    background-color: var(--magenta);
    color: var(--blanco);
    border-color: var(--magenta) !important;
}

/**
 * 5.- Botone Transparente Blanco (Transparente > Blanco) */
 .boton_transparente_blanco{
    background-color: transparent;
    color: var(--blanco);
    border-color: var(--blanco) !important;
}
.boton_transparente_blanco:hover,
.boton_transparente_blanco:active,
.boton_transparente_blanco:focus{
    background-color: var(--blanco);
    color: var(--negro-suave);
    border-color: var(--blanco) !important;
}

/**
 * 6.- Boton Dorado (Dorado > Blanco) */
 .boton_dorado{
    background-color: var(--dorado);
    color: var(--fuente_principal);
    border-color: var(--dorado) !important;
}
.boton_dorado:hover,
.boton_dorado:active,
.boton_dorado:focus{
    background-color: var(--blanco);
    color: var(--dorado);
    border-color: var(--dorado) !important;
}

/**
 * 7.- Boton Magenta con borde (Magenta > Blanco) */
 .boton_magenta_borde{
    background-color: var(--magenta);
    color: var(--blanco);
    border-color: var(--magenta) !important;
}
.boton_magenta_borde:hover,
.boton_magenta_borde:active,
.boton_magenta_borde:focus{
    background-color: var(--blanco);
    color: var(--magenta);
    border-color: var(--magenta) !important;
}

/**
 * 7.- Boton Verde (Verde > Blanco) */
 .boton_verde{
    background-color: var(--verde);
    color: var(--blanco);
    border-color: var(--verde) !important;
}
.boton_verde:hover,
.boton_verde:active,
.boton_verde:focus{
    background-color: var(--blanco);
    color: var(--verde);
    border-color: var(--verde) !important;
}

/**
 * 8.- Boton Verde WSP (Verde > Blanco) */
 .boton_verde_wsp{
    background-color: var(--verde_wsp);
    color: var(--blanco);
    border-color: var(--verde_wsp) !important;
}
.boton_verde_wsp:hover,
.boton_verde_wsp:active,
.boton_verde_wsp:focus{
    background-color: var(--blanco);
    color: var(--verde_wsp);
    border-color: var(--verde_wsp) !important;
}

/**
 * 9.- Boton Morado para la seccion de diseño y marketing (morado > Blanco) */
.boton_diseno_marketing{
    background-color: #7E57C2 !important;
    color: var(--blanco);
    border-color: #7E57C2 !important;
}
.boton_diseno_marketing:hover,
.boton_diseno_marketing:active,
.boton_diseno_marketing:focus{
    background-color: var(--blanco) !important;
    color: #7E57C2 !important;
    border-color: #7E57C2 !important;
}

/**
 * 9.- Boton Morado oscuro para la seccion de diseño y marketing (morado > Blanco) */
 .boton_diseno_marketing_oscuro{
    background-color: #640366 !important;
    color: var(--blanco);
    border-color: #640366 !important;
}
.boton_diseno_marketing_oscuro:hover,
.boton_diseno_marketing_oscuro:active,
.boton_diseno_marketing_oscuro:focus{
    background-color: var(--blanco) !important;
    color: #640366 !important;
    border-color: #640366 !important;
}


/**
 * 9.- Boton Magenta para Eventos (Magenta > Blanco) */
 .boton_eventos{
    background-color: #E91E63 !important;
    color: var(--blanco);
    border-color: #E91E63 !important;
}
.boton_eventos:hover,
.boton_eventos:active,
.boton_eventos:focus{
    background-color: var(--blanco) !important;
    color: #E91E63 !important;
    border-color: #E91E63 !important;
}

/**
 * 9.- Boton Azul para Graficas (Azul > Blanco) */
 .boton_graficas{
    background-color: #1976D2 !important;
    color: var(--blanco);
    border-color: #1976D2 !important;
}
.boton_graficas:hover,
.boton_graficas:active,
.boton_graficas:focus{
    background-color: var(--blanco) !important;
    color: #1976D2 !important;
    border-color: #1976D2 !important;
}

/**
 * 9.- Boton Naranjo para Merch (Naranjo > Blanco) */
 .boton_merch{
    background-color: #FF6F3C !important;
    color: var(--blanco);
    border-color: #FF6F3C !important;
}
.boton_merch:hover,
.boton_merch:active,
.boton_merch:focus{
    background-color: var(--blanco) !important;
    color: #FF6F3C !important;
    border-color: #FF6F3C !important;
}