.btn{
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
}
.btn-sus{
    border-radius: 50rem;
    padding: 0.5rem 1rem;
}

/*BTN TEXT ONLY*/
.btn-text{
    color: var(--primary) !important;
    background-color: transparent!important;
    border-color: transparent!important;
    transition: 0.3s all ease-out;
}
.btn-text:hover{
    color: var(--warning) !important;
    background-color: transparent!important;
    border-color: transparent!important;
    transition: 0.3s all ease-out;
}
.btn-text.icon-btn{
    transition: 0.3s all ease-out;
}
.btn-text:hover .icon-btn{
    transform: translateX(0.5rem);
    transition: 0.3s all ease-out;
}

.btn-text .icon-btn path {
    fill: var(--warning);
    transition: 0.3s all ease-out;
}

.btn-check:checked+.btn-text, .btn-text.active, .btn-text.show, .btn-text:first-child:active, :not(.btn-check)+.btn-text:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/*BTN PRIMARY*/
.btn-primary {
    color: var(--white) !important;
    background-color: var(--primary);
    border-color: var(--primary) 1px solid!important;
}
.btn-primary:hover {
    color: var(--primary) !important;
    background-color: var(--white) !important;
    border-color: var(--primary) !important;
}
.btn-primary.icon-s{
    transition: 0.3s all ease-out;
}
.btn-primary:hover .icon-s{
    transform: translateX(-0.5rem);
    transition: 0.3s all ease-out;
}
.btn-primary .icon-btn path {
    stroke: var(--white)!important;
    transition: 0.3s all ease-out;
}
.btn-primary:hover .icon-btn path {
    stroke: var(--primary)!important;
    transition: 0.3s all ease-out;
}
.btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary.show, .btn-primary:first-child:active, :not(.btn-check)+.btn-primary:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

.text-primary {
    color: var(--primary) !important;
}
/*BTN PRIMARY*/
.btn-warning {
    color: var(--white) !important;
    background-color: var(--warning);
    border-color: var(--warning) 1px solid!important;
    transition: 0.3s all ease-out;
}
.btn-warning:hover {
    color: var(--warning) !important;
    background-color: var(--white) !important;
    border-color: var(--warning) !important;
    font-weight: 700;
    transition: 0.3s all ease-out;
}
.btn-warning.icon-s{
    transition: 0.3s all ease-out;
}
.btn-warning:hover .icon-s{
    transform: translateX(-0.5rem);
    transition: 0.3s all ease-out;
}
.btn-warning .icon-btn path {
    fill: var(--white)!important;
    transition: 0.3s all ease-out;
}
.btn-warning:hover .icon-btn path {
    fill: var(--warning)!important;
    transition: 0.3s all ease-out;
}
.btn-check:checked+.btn-warning, .btn-warning.active, .btn-warning.show, .btn-warning:first-child:active, :not(.btn-check)+.btn-warning:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/*BTN SECONDARY*/
.btn-secondary {
    color: var(--white) !important;
    background-color: var(--secondary);
    border-color: var(--secondary);
    transition: 0.3s all ease-out;
}
.btn-secondary:hover {
    color: var(--white) !important;
    background-color: var(--secondary-two);
    border-color: var(--secondary-two);
    font-weight: 700;
    transition: 0.3s all ease-out;
    transform: scale(1.05);
}
.btn-secondary .icon-btn path {
    stroke: var(--white);
    transition: 0.3s all ease-out;
}

.btn-secondary:hover .icon-btn path {
    stroke: var(--white);
    transition: 0.3s all ease-out;
}
.btn-check:checked+.btn-secondary, .btn-secondary.active, .btn-secondary.show, .btn-secondary:first-child:active, :not(.btn-check)+.btn-secondary:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/*BTN BLACK*/
.btn-black {
    color: var(--white) !important;
    background-color: var(--black);
    border-color: var(--black);
    transition: 0.3s all ease-out;
}
.btn-black:hover {
    background-color: var(--black-two);
    border-color: var(--black-two);
    font-weight: 700;
    transition: 0.3s all ease-out;
    transform: scale(1.05);
}
.btn-black .icon-btn path {
    stroke: var(--secondary);
    transition: 0.3s all ease-out;
}

.btn-black:hover .icon-btn path {
    stroke: var(--secondary);
    transition: 0.3s all ease-out;
}
.btn-check:checked+.btn-black, .btn-black.active, .btn-black.show, .btn-black:first-child:active, :not(.btn-check)+.btn-black:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/*BTN WHITE*/
.btn-white {
    color: var(--primary) !important;
    background-color: var(--white)!important;
    border-color: var(--white)!important;
    transition: 0.3s all ease-out;
}
.btn-white:hover {
    color: var(--white) !important;
    background-color: transparent!important;
    border-color: var(--white)!important;
    transition: 0.3s all ease-out;
}

.btn-white.icon-btn{
    transition: 0.3s all ease-out;
}
.btn-white:hover .icon-btn{
    transform: translateX(-0.5rem);
    transition: 0.3s all ease-out;
}
/* .btn-white .icon-btn {
    fill: var(--primary);
    transition: 0.3s all ease-out;
    margin-top: 1%;
}
.btn-white .icon-btn path {
    fill: var(--primary);
    transition: 0.3s all ease-out;
    margin-top: 1%;
}

.btn-white:hover .icon-btn path {
    fill: var(--white);
    transition: 0.3s all ease-out;
} */
.btn-check:checked+.btn-white, .btn-white.active, .btn-white.show, .btn-white:first-child:active, :not(.btn-check)+.btn-white:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/* BUTTON OUTLINE 'conocer mas home'*/

.btn-outline-conocer {
    color: var(--white)!important;
    background-color: transparent!important;
    border: var(--primary) 1px solid!important;
    transition: 0.3s all ease-out;
}

.btn-outline-conocer:hover {
    color: var(--primary)!important;
    background-color: var(--primary) 1px solid!important;
    transition: 0.3s all ease-out;
}

.btn-outline-conocer .icon-btn path {
    stroke: var(--primary);
    transition: 0.3s all ease-out;
}

.btn-outline-conocer:hover .icon-btn path {
    stroke: var(--primary);
    transition: 0.3s all ease-out;
}

.btn-check:checked+.btn-outline-conocer, .btn-outline-conocer.active, .btn-outline-conocer.show, .btn-outline-conocer:first-child:active, :not(.btn-check)+.btn-outline-conocer:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/* BUTTON OUTLINE PRIMARY*/
.btn-outline-primary {
    color: var(--primary);
    border: var(--primary) 1px solid;
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: var(--white);
    border: var(--primary) 1px solid;
    background-color: var(--primary);
}

.btn-outline-primary .icon-btn path {
    stroke: var(--primary);
}

.btn-outline-primary:hover .icon-btn path {
    stroke: var(--white);
}

.btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.show, .btn-outline-primary:first-child:active, :not(.btn-check)+.btn-outline-primary:active {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/* BUTTON OUTLINE WHITE */

.btn-outline-white {
    color: var(--white)!important;
    background-color: transparent!important;
    border: var(--white)1px solid!important;
    transition: 0.3s all ease-out;
}

.btn-outline-white:hover {
    color: var(--white)!important;
    background-color: var(--primary)!important;
    border: var(--white)1px solid!important;
    transition: 0.3s all ease-out;
}
.btn-outline-white .icon-e{
    transition: 0.3s all ease-out;
}
.btn-outline-white .icon-s{
    transition: 0.3s all ease-out;
}
.btn-outline-white:hover .icon-e{
    transform: translateX(0.5rem);
    transition: 0.3s all ease-out;
}
.btn-outline-white:hover .icon-s{
    transform: translateX(-0.5rem);
    transition: 0.3s all ease-out;
} 


.btn-outline-white .icon-btn path {
    stroke: var(--white)!important;
    transition: 0.3s all ease-out;
}

.btn-outline-white:hover .icon-btn path {
    stroke: var(--white)!important;
    transition: 0.3s all ease-out;
}

.btn-check:checked+.btn-outline-white, .btn-outline-white.active, .btn-outline-white.show, .btn-outline-white:first-child:active, :not(.btn-check)+.btn-outline-white:active {
    color: var(--white);
    background-color: transparent;
    border-color: transparent;
}

/**EFECTO ICONO**/

/* .icon-e{
    transition: 0.3s all ease-out;
}
.icon-s{
    transition: 0.3s all ease-out;
}
:hover .icon-e{
    transform: translateX(0.5rem);
    transition: 0.3s all ease-out;
}
:hover .icon-s{
    transform: translateX(-0.5rem);
    transition: 0.3s all ease-out;
} */