/*import de colores¨*/
@import url("colores.css");

/*import de tipografia¨*/
@import url("tipografia.css");

/*Organizacion Ignorar*/


body .main .container-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    width:auto;
    padding: 10px;
}

body .main .titulo {
    text-align: center;
    color:var(--color--main);
}

.titulo--dark {
    text-align: center;
    color: var(--color--main-dark);

}

body .main .container-dark{
    background: var(--complementarios-dark-background, #1C1F2B);
    padding: 15px 0px ;
    margin-top: 15px;

}

/* ---------------------------------Estilo del elemento------------------------------------*/
body .main .button {
    display: inline-block;
    color: var(--neutral-escala-grises-10, #F5F5F5);
    text-align: center;
    /* Comun/Boton */
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: 0.352px;
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    width: auto;
    margin-top: 15px;
}



/* ---------------------------------Modificador de jerarquias ------------------------------------*/




/* --------------Primarios  light---------------- */

body .main .button--primary:link {
    color: var(--color--neutral--0);
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg,var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
    border: 1px solid var(--color--main); 
    
    
}

body .main .button--primary:hover {
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(180deg,var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
}

body .main .button--primary:visited {
    color: var(--color--neutral--0);
    background: var(--gradiants-y-linear-boton-2, linear-gradient(180deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
    border: 1px solid var(--color--main);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

body .main .button--primary:focus {
    
    border: 2px solid var(--neutral-escala-grises-100-negro, #111);
    background: var(--gradiants-y-linear-boton-2, linear-gradient(180deg, var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
}


/* Primarios  dark */
body .main .button--primary--dark {
    color:var(--neutral-escala-grises-80, #333);
    background-color: var(--color--main-dark);
    border: 1px solid var(--color--main-dark);
    padding:12px 32px;
}

body .main .button--primary--dark:hover {
    background: var(--main-color-naranja-claro, #FF7E06);
    box-shadow: 2px 2px 3px 0px var(--color--main);
}

body .main .button--primary--dark:visited {
    background: var(--main-color-naranja-claro, #FF7E06);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.button--primary--dark:focus {
    border: 2px solid var(--neutral-escala-grises-30, #CCC) !important;
    background: var(--main-color-naranja-claro, #FF7E06);
    box-shadow: 2px 2px 3px 0px var(--color--main);
}


/* Primarios  dark */
body .main .button--primary--disable {
    color: var(--color--neutral--0);
    background-color: var(--color--neutral--30);
    border: 1px solid var(--color--neutral--30);
    pointer-events: none;
}


/* Primario dark disable*/

body .main .button--primary--disable--dark {
    color: var(--color--neutral--0);
    background: var(--neutral-escala-grises-60, #7F7F7F);
    border: 1px solid var(--color--neutral--60);
    pointer-events: none;
}




/*--------------   Secundarios light-----------------------------*/


body .main .button--secundary {
    color: var(--color--main);
    background-color: var(--color--neutral--0);
    border: 1px solid var(--color--main);
}
body .main .button--secundary:hover {
    border: 1px solid var(--main-color-rojo, #E63F0C);
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);

}
body .main .button--secundary:visited {
    border: 1px solid var(--main-color-rojo-oscuro, var(--color--principal-rojo-oscuro));
    background: var(--neutral-escala-grises-0-blanco, #FFF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

body .main .button--secundary:focus {
    border: 2px solid var(--neutral-escala-grises-100-negro, #111);
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);
}


/*Secundario dark*/

body .main .button--secundary--dark {
    color: var(--color--main-dark);
    border: 1px solid var(--color--main-dark, var(--color--main-dark));
}


body .main .button--secundary--dark:hover {
    border: 1px solid var(--main-color-naranja-claro, #FF7E06);
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);
}


body .main .button--secundary--dark:focus {
    border: 2px solid var(--neutral-escala-grises-30, #CCC) !important;
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);
}

body .main .button--secundary--dark:visited {
    color: var(--color--main-dark);
    border: 1px solid var(--main-color-naranja-claro, #FF7E06);

}

/*Secundario disable */


body .main .button--secundary--disable {

    color: var(--color--neutral--30);
    border: 1px solid var(--neutral-escala-grises-30, #CCC);
    pointer-events: none;
}


/*Secundario disable dark */

body .main .button--secundary--disable--dark {

    color: var(--color--neutral--30);
    border: 1px solid var(--neutral-escala-grises-30, #CCC);
    pointer-events: none;
}


/*-----------------------Terciarios ligth----------------------------------*/


body .main .button--third{
    color: var(--color--main);
    border: none;
}
body .main .button--third:hover {
    color: var(--color--principal--rojo);
    border:none;
}

body .main .button--third:focus {
    color: var(--color--principal--rojo);
    border: 2px solid var(--neutral-escala-grises-100-negro, #111);
    border:none;
}


/*terciario dark*/

body .main .button--third--dark {
    color: var(--color--main-dark);
    border: none;
}

.button--third--dark:hover {
    color: var(--color--principal--naranja-claro);
    border: none;
}

body .main .button--third--dark:focus {
    color: var(--color--principal--naranja-claro);
    border: 1px solid var(--neutral-escala-grises-30, #CCC);
}




/*Terciario disable*/

body .main .button--third--disable {
    color: rgba(255, 102, 0, 0.50);

    pointer-events: none;
}


/*Terciario disable dark*/


body .main .button--third--disable--dark {
    color: var(--color--neutral--30);
    pointer-events: none;
}




/* -----------------------Modificador de contenido------------------------------ */

body .main .button span{
    width: 24px;
    height: 24px;
}


/* solo texto*/
body .main .button--texto {
    padding:12px 32px;
}

/* solo icono*/
body .main .button--icono{
    padding: 12px 16px;

}

body .main .button--icono span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;    
    font-size: 16px;
}

/*texto + icono*/
body .main .button--texto--icono{
    padding: 12px 16px 12px 0px ;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    
}
body .main .button--texto--icono::after{
    font: normal normal normal 15px / 1 FontAwesome;
    content: "\f054";
    margin-left: 5px;
}

body .main .button--texto--icono span{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 24px;
    height: 24px;    
    font-size: 16px;
    margin-left:16px;
}


/*  icono +texto */
body .main .button--icono--texto{
    padding: 12px 32px 12px 16px ;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    
}

body .main .button--icono--texto span{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 24px;
    height: 24px;    
    font-size: 16px;
    margin-right:16px;
}



/*  completo */
body .main .button--completo{
    padding: 12px 0px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    
}

body .main .button--completo span{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 24px;
    height: 24px;    
    font-size: 16px;
    margin:0px 16px;
}

/* Botón swiper pause */
body .main .button-pause {
    margin-top: 0;
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg,var(--color--principal-rojo-oscuro) 0%, var(--color--main) 100%));
}
/* Mobile*/
@media screen and (max-width: 576px) {
    
body .main .button {
      font-size: 14px;
  
}
}