.boton,
button.boton,
a.boton {
  padding: 12px 24px;
  border-radius: 4px;
  display: inline-block;
  min-width: 80px;
  text-align: center;
  background: none;
  border: solid 1px #ffffff;
  color: #ffffff;
  cursor: pointer;
  font-weight: 400;
  font-size: inherit;
  font-family: "Graphik", sans-serif;
  line-height: 24px;
}

.boton:hover {
  background: none;
  border: solid 1px #ffffff;
  color: #ffffff;
}

.boton.primary,
a.boton.primary,
button.boton.primary {
  background: var(--clickable-color);
  border: solid 1px var(--clickable-color);
  color: #ffffff!important;
}

.boton.primary:hover {
  background: #555555;
  border: solid 1px #555555;
  color: #ffffff;
}

.boton.primary:active {
  background: #2c2c2c;
  border: solid 1px #2c2c2c;
  color: #ffffff;
}

.boton.primary.disabled {
  background: #2c2c2c;
  border: solid 1px #2c2c2c;
  color: #ffffff;
}

.boton.secondary {
  background: #ffffff;
  /* border: solid 1px #555555; */
  border: solid 1px #ffffff;

  color: #555555;
}

.boton.secondary:hover {
  background: #dee0e1;
  border: solid 1px #dee0e1;

 /* border: solid 1px #555555; */
  color: #555555;
}

.boton.secondary:active {
  background: #999999;
  /* border: solid 1px #999999; */
  border: solid 1px #999999;

  color: #ffffff;
}

.boton.secondary.disabled {
  background: none;
  border: solid 1px #555555;
  
  color: #555555;
}

.boton.transparente {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  /* Ensure other .boton base styles like padding, border-radius, display, etc., are inherited */
}

.boton.transparente:hover {
  background-color: #ffffff;
  color: #555555; /* Dark text color for hover */
  border-color: #ffffff; /* Border remains white, or could change if desired */
}
.boton.transparente.negro {
  background-color: transparent;
  border: 1px solid #555555;
  color: #555555;
  /* Ensure other .boton base styles like padding, border-radius, display, etc., are inherited */
}

.boton.transparente.negro:hover {
  background-color: #eeeeee;
  color: #555555; /* Dark text color for hover */
  border-color: #555555; /* Border remains white, or could change if desired */
}

.boton-link {
  --boton-link-size: 64px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--boton-link-size);
  height: var(--boton-link-size);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.35s ease;
  will-change: transform;
}

.boton-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.boton-link:hover,
.boton-link:focus-visible {
  transform: rotate(45deg);
}

.boton-link.light {
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M24 40 L40 24 M40 24 H28 M40 24 V36' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.boton-link.light:focus-visible {
  filter: none;
}

.boton-link.dark {
  color: #111111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%23111111' stroke-width='2'/%3E%3Cpath d='M24 40 L40 24 M40 24 H28 M40 24 V36' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.boton-link.dark:hover,
.boton-link.dark:focus-visible {
  filter: none;
}