:root {
  --color-Marine: #3366cc;
  --color-Blue-dark: #004884;
  --color-Black: #000000;
  --color-Tundora: #4b4b4b;
  --color-Dim-gray: #737373;
  --color-White: #ffffff;
  --color-Blue-light: #e6effd;
  --color-Silver: #bababa;
  --color-Concrete: #f2f2f2;
  --color-Hawkes-blue: #f6f8f9;
  --color-Radical-red: #f42f63;
  --color-Shiraz: #a80521;
  --color-Orange: #f3561f;
  --color-Orange-hover: #e3511b;
  --color-Gold: #ffab00;
  --color-Gold-hover: #e79a00;
  --color-Elf-Green: #068460;
  --color-Green: #069169;
  --color-Yellow: #fad118;
  --color-Orange-v2: #ff6c00;
  --color-Orange-v2-hover: #ea6100;
  --color-Red-flag: #d31f3f;
  --color-Radical-red: #f42f63;

  --padding-default: 1rem 2rem;
  --border-default: 0.6rem;
  --display-default: inline-block;
}
/*== Primarios ==*/
/*-- Marine --*/
.color-Marine,
.enlace-Marine {
  color: var(--color-Marine) !important;
}
.enlace-Marine:hover {
  color: var(--color-Blue-dark) !important;
}
.boton-Marine {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Marine) !important;
  border: 1px solid var(--color-Marine) !important;
}
.boton-Marine:hover {
  border-color: var(--color-Blue-dark) !important;
  background-color: var(--color-Blue-dark) !important;
}
/*-- Blue dark --*/
.color-Blue-dark,
.enlace-Blue-dark {
  color: var(--color-Blue-dark) !important;
}
.enlace-Blue-dark:hover {
  color: var(--color-Marine) !important;
}
.boton-Blue-dark {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Blue-dark) !important;
  border: 1px solid var(--color-Blue-dark) !important;
}
.boton-Blue-dark:hover {
  border-color: var(--color-Marine) !important;
  background-color: var(--color-Marine) !important;
}
/*-- Black --*/
.color-Black,
.enlace-Black {
  color: var(--color-Black) !important;
}
.enlace-Black:hover {
  color: var(--color-Silver) !important;
}
.boton-Black {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Black) !important;
  border: 1px solid var(--color-Black) !important;
}
.boton-Black:hover {
  color: var(--color-Black) !important;
  border-color: var(--color-Black) !important;
  background-color: var(--color-White) !important;
}
/*-- Tundora --*/
.color-Tundora,
.enlace-Tundora {
  color: var(--color-Tundora) !important;
}
.enlace-Tundora:hover {
  color: var(--color-Black) !important;
}
.boton-Tundora {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Tundora) !important;
  border: 1px solid var(--color-Tundora) !important;
}
.boton-Tundora:hover {
  border-color: var(--color-Dim-gray) !important;
  background-color: var(--color-Dim-gray) !important;
}
/*-- Dim gray --*/
.color-Dim-gray,
.enlace-Dim-gray {
  color: var(--color-Dim-gray) !important;
}
.enlace-Dim-gray:hover {
  color: var(--color-Black) !important;
}
.boton-Dim-gray {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Dim-gray) !important;
  border: 1px solid var(--color-Dim-gray) !important;
}
.boton-Dim-gray:hover {
  border-color: var(--color-Tundora) !important;
  background-color: var(--color-Tundora) !important;
}
/*-- White --*/
.color-White,
.enlace-White {
  color: var(--color-White) !important;
}
.enlace-White:hover {
  color: var(--color-Black) !important;
}
.boton-White {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-White) !important;
  border: 1px solid var(--color-Black) !important;
}
.boton-White:hover {
  color: var(--color-White) !important;
  border-color: var(--color-Black) !important;
  background-color: var(--color-Black) !important;
}
/*== Secundarios ==*/
/*-- Blue light --*/
.color-Blue-light,
.enlace-Blue-light {
  color: var(--color-Blue-light) !important;
}
.enlace-Blue-light:hover {
  color: var(--color-Dim-gray) !important;
}
.boton-Blue-light {
  color: var(--color-Dim-gray) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  background-color: var(--color-Blue-light) !important;
  border: 1px solid var(--color-Blue-light) !important;
}
.boton-Blue-light:hover {
  color: var(--color-Black) !important;
  border-color: var(--color-Silver) !important;
  background-color: var(--color-Silver) !important;
}
/*-- Silver --*/
.color-Silver,
.enlace-Silver {
  color: var(--color-Silver) !important;
}
.enlace-Silver:hover {
  color: var(--color-Dim-gray) !important;
}
.boton-Silver {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Silver) !important;
  background-color: var(--color-Silver) !important;
}
.boton-Silver:hover {
  color: var(--color-White) !important;
  border-color: var(--color-Dim-gray) !important;
  background-color: var(--color-Dim-gray) !important;
}
/*-- Concrete --*/
.color-Concrete,
.enlace-Concrete {
  color: var(--color-Concrete) !important;
}
.enlace-Concrete:hover {
  color: var(--color-Silver) !important;
}
.boton-Concrete {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Concrete) !important;
  background-color: var(--color-Concrete) !important;
}
.boton-Concrete:hover {
  border-color: var(--color-Silver) !important;
  background-color: var(--color-Silver) !important;
}
/*-- Hawkes blue --*/
.color-Hawkes-blue,
.enlace-Hawkes-blue {
  color: var(--color-Hawkes-blue) !important;
}
.enlace-Hawkes-blue:hover {
  color: var(--color-Concrete) !important;
}
.boton-Hawkes-blue {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Hawkes-blue) !important;
  background-color: var(--color-Hawkes-blue) !important;
}
.boton-Hawkes-blue:hover {
  border-color: var(--color-Concrete) !important;
  background-color: var(--color-Concrete) !important;
}
/*== Complementarios ==*/
/*-- Radical red --*/
.color-Radical-red,
.enlace-Radical-red {
  color: var(--color-Radical-red) !important;
}
.enlace-Radical-red:hover {
  color: var(--color-Shiraz) !important;
}
.boton-Radical-red {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Radical-red) !important;
  background-color: var(--color-Radical-red) !important;
}
.boton-Radical-red:hover {
  border-color: var(--color-Shiraz) !important;
  background-color: var(--color-Shiraz) !important;
}
/*-- Shiraz --*/
.color-Shiraz,
.enlace-Shiraz {
  color: var(--color-Shiraz) !important;
}
.enlace-Shiraz:hover {
  color: var(--color-Red-flag) !important;
}
.boton-Shiraz {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Shiraz) !important;
  background-color: var(--color-Shiraz) !important;
}
.boton-Shiraz:hover {
  border-color: var(--color-Red-flag) !important;
  background-color: var(--color-Red-flag) !important;
}
/*-- Orange --*/
.color-Orange,
.enlace-Orange {
  color: var(--color-Orange) !important;
}
.enlace-Orange:hover {
  color: var(--color-Orange-hover) !important;
}
.boton-Orange {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Orange) !important;
  background-color: var(--color-Orange) !important;
}
.boton-Orange:hover {
  border-color: var(--color-Orange-hover) !important;
  background-color: var(--color-Orange-hover) !important;
}
/*-- Gold --*/
.color-Gold,
.enlace-Gold {
  color: var(--color-Gold) !important;
}
.enlace-Gold:hover {
  color: var(--color-Gold-hover) !important;
}
.boton-Gold {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Gold) !important;
  background-color: var(--color-Gold) !important;
}
.boton-Gold:hover {
  border-color: var(--color-Gold-hover) !important;
  background-color: var(--color-Gold-hover) !important;
}
/*-- Elf-Green--*/
.color-Elf-Green,
.enlace-Elf-Green {
  color: var(--color-Elf-Green) !important;
}
.enlace-Elf-Green:hover {
  color: var(--color-Green) !important;
}
.boton-Elf-Green {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Elf-Green) !important;
  background-color: var(--color-Elf-Green) !important;
}
.boton-Elf-Green:hover {
  color: var(--color-Black) !important;
  border-color: var(--color-Green) !important;
  background-color: var(--color-Green) !important;
}
/*== Paleta de colores de Presidencia ==*/
/*-- Elf-Green--*/
.color-Green,
.enlace-Green {
  color: var(--color-Green) !important;
}
.enlace-Green:hover {
  color: var(--color-Elf-Green) !important;
}
.boton-Green {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Green) !important;
  background-color: var(--color-Green) !important;
}
.boton-Green:hover {
  border-color: var(--color-Elf-Green) !important;
  background-color: var(--color-Elf-Green) !important;
}
/*-- Yellow--*/
.color-Yellow,
.enlace-Yellow {
  color: var(--color-Yellow) !important;
}
.enlace-Yellow:hover {
  color: var(--color-Gold) !important;
}
.boton-Yellow {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Yellow) !important;
  background-color: var(--color-Yellow) !important;
}
.boton-Yellow:hover {
  border-color: var(--color-Gold) !important;
  background-color: var(--color-Gold) !important;
}
/*-- Orange v2--*/
.color-Orange-v2,
.enlace-Orange-v2 {
  color: var(--color-Orange-v2) !important;
}
.enlace-Orange-v2:hover {
  color: var(--color-Orange-v2-hover) !important;
}
.boton-Orange-v2 {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Orange-v2) !important;
  background-color: var(--color-Orange-v2) !important;
}
.boton-Orange-v2:hover {
  border-color: var(--color-Orange-v2-hover) !important;
  background-color: var(--color-Orange-v2-hover) !important;
}
/*-- Red flag--*/
.color-Red-flag,
.enlace-Red-flag {
  color: var(--color-Red-flag) !important;
}
.enlace-Red-flag:hover {
  color: var(--color-Radical-red) !important;
}
.boton-Red-flag {
  color: var(--color-White) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Red-flag) !important;
  background-color: var(--color-Red-flag) !important;
}
.boton-Red-flag:hover {
  border-color: var(--color-Radical-red) !important;
  background-color: var(--color-Radical-red) !important;
}
/*-- Radical red--*/
.color-Radical-red,
.enlace-Radical-red {
  color: var(--color-Radical-red) !important;
}
.enlace-Radical-red:hover {
  color: var(--color-Red-flag) !important;
}
.boton-Radical-red {
  color: var(--color-Black) !important;
  display: var(--display-default) !important;
  padding: var(--padding-default) !important;
  border-radius: var(--border-default) !important;
  border: 1px solid var(--color-Radical-red) !important;
  background-color: var(--color-Radical-red) !important;
}
.boton-Radical-red:hover {
  border-color: var(--color-Red-flag) !important;
  background-color: var(--color-Red-flag) !important;
}