.txt-resaltado {
  border: 2px solid #f6a61a;
}

.txt-negro {
  color: #000000;
}

.btn-size {
  width: 80px;
  height: 80px;
}

.img-size {
  max-height: 400px;
  object-fit: cover;
}

.h5-size {
  font-size: 1.25rem;
}

.border-resaltado {
  border: 1px solid #f6a61a;
}

.background-resaltado {
  background-color: #f6a61a;
  color: #000000;
}

.check-color {
  color: #f6a61a;
}

/* Iconos diagonal */
.icon-bicolor {
  background: linear-gradient(45deg, #bfb4a8 50%, #f6a61a 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* horizontal */
.icon-bicolor-horizontal {
  background: linear-gradient(90deg, #bfb4a8 50%, #f6a61a 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Iconos vertical */
.icon-bicolor-vertical {
  background: linear-gradient(180deg, #bfb4a8 50%, #f6a61a 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Efecto hover para los iconos bicolor Diagonal */
.icon-bicolor:hover {
  background: linear-gradient(45deg, #f6a61a 50%, #bfb4a8 50%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: all 0.3s ease;
}

/* Horizontal */
.icon-bicolor-horizontal:hover {
  background: linear-gradient(90deg, #f6a61a 50%, #bfb4a8 50%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: all 0.3s ease;
}

/* Vertical */
.icon-bicolor-vertical:hover {
  background: linear-gradient(180deg, #f6a61a 50%, #bfb4a8 50%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: all 0.3s ease;
}

/* Círculos bicolor para los pasos del proceso */
.circle-bicolor1 {
  background: linear-gradient(45deg,
      #f6a61a 24%,
      #f6a61a 25%,
      #dedbd9 26%,
      #dedbd9 100%);
}

.circle-bicolor2 {
  background: linear-gradient(45deg, #f6a61a 50%, #dedbd9 50%);
}

.circle-bicolor3 {
  background: linear-gradient(45deg, #f6a61a 75%, #dedbd9 25%);
}

.circle-bicolor4 {
  background: #f6a61a;
}

/* Eliminar hover de botones con clases personalizadas */
.btn.background-resaltado:hover,
.btn.background-resaltado:focus {
  background-color: #f6a61a;
  color: white;
  transform: none;
  box-shadow: none;
}

.btn.txt-resaltado:hover,
.btn.txt-resaltado:focus {
  background-color: transparent;
  color: #f6a61a;
  border-color: #f6a61a;
}

/* Warning de lighthouse. los h* dentro de contenedores necesitan font-size especifico en el futuro */
h2 {
  font-size: 2.5rem;
  /* Tamaño explícito para evitar cambios del navegador */
}

h2.display-4 {
  font-size: calc(1.475rem + 2.7vw);
}

@media (min-width: 1200px) {
  h2.display-4 {
    font-size: 3.5rem;
  }
}