/*Organizacion Ignorar*/


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

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

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

}

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

}

/* ---------------------------------Estilo del elemento------------------------------------*/
.button {
  display: inline-block;
  color: var(--neutral-escala-grises-10, #F5F5F5);
  text-align: center;
  /* Comun/Boton */
  font-size: var(--font--size--button);
  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---------------- */

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


}

.button--primary {
  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);

}

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

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

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

.button--primary--dark:hover {
  background: var(--main-color-naranja-claro, #FF7E06);
  box-shadow: 2px 2px 3px 0px var(--color--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 */
.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*/

.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-----------------------------*/


.button--secundary {
  color: var(--color--main);
  background-color: var(--color--neutral--0);
  border: 1px solid var(--color--main);
}

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

}

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

.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*/

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


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


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

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

}

/*Secundario disable */


.button--secundary--disable {

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


/*Secundario disable dark */

.button--secundary--disable--dark {

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


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


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

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

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


/*terciario dark*/

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

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

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




/*Terciario disable*/

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

  pointer-events: none;
}


/*Terciario disable dark*/


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


/*-------------- Link ------------*/

section a {
  text-decoration: underline;
  font-weight: 600;
}

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

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


/* solo texto*/
.button--texto {
  padding: 12px 25px;
  width: fit-content;
}


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

}

.button--icono span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: var(--font--size--button);
}

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

}

.button--texto--icono::after {
  font: normal normal normal 0.9em / 1 FontAwesome;
  content: "\f054";
  margin-left: 5px;
}

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


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

}

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



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

}

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

/* Botón swiper pause */
.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%));
  border: 0px;
  height: 40px;
  width: 40px;
  min-width: 2em;
  padding: 0px 0px;
}


@media (max-width: 768px) {

  .button--texto {
    padding: 12px 20px;
  }

}