.slider-principal {
  padding: 2px;
  display: flex;
  align-items: center;
  overflow-y:auto;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.slider-seg {
  display: flex;
  flex-direction: row;
  align-items: center;
  aspect-ratio: 1/1;
  object-fit: contain;
  opacity: 0.8;
}

.slider-seg:hover {
  opacity: 1;
}

.swiper-slide-thumb-active {
  border: 3px solid #860404 !important;
  border-radius: 10px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  color: #1e365600;
  font-size: 2.5rem !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.5;
}

/* offcanvas */
.color_botones_canvas {
  font-size: 18px;
  color: #390404;
}
.color_botones{
  font-size: 20px;
  color: #390404;
}
/* Botones masmenos*/
.contenedor{
  height: 100%;
  min-width: 120px;
  max-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d86b6b;

}

.contenedor input{
  height: 100%;
  text-align: center;
  font-size: 20px;
  cursor: pointer;

}

.contenedor button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.custom-btn {
  background-color: #490001 !important;
  /* Color de fondo personalizado */
  border-color: #740001 !important;
  /* Color del borde personalizado */
}

.custom-btn:hover {
  background-color: #740001 !important;
  /* Color de fondo al pasar el cursor */
  border-color: #91190f !important;
  /* Color del borde al pasar el cursor */
}

/*-- Dropdown --*/
.dropdown-item:hover {
  font-weight: bold;
  background-color: #7f0000;
  /* Color de fondo al pasar el cursor */
  color: #fff;
  /* Color del texto al pasar el cursor */
}
      
.dropdown-item:active {
  font-weight: bold;
  background-color: #fff;
  /* Color de fondo cuando se presiona */
  color: #7f0000;
  /* Color del texto cuando se presiona */
}

/* Generales */
.custom-brand{
  color: #7f0000;
}

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #007bff98;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;

}
        
#backToTop:hover {
  background-color: #0057b3e2;
}

.card_principal {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #ffffff00;
  box-shadow: 5px 5px 7px #aaa9a9;    
}
.card_miniatura {
  box-shadow: none;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 5px;

}


/* Boton custom */
.custom-buttom {
  position: relative;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.55em 2em;
  /*Ajustedepadding*/display: inline-block;
  border-radius: 50px;
  /*Ajustedeborder-radius*/transition: all .2s;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /*Añadidobordesólido*/color: black;
  background-color: #fff;

}

.custom-buttom:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px #00000033;
}

.custom-buttom:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px #00000033;
}

.custom-buttom::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .5s;
  background-color: #1e1e1e61;
}

.custom-buttom:hover::after {
  transform: scaleX(1.1) scaleY(1.5);
  opacity: 0;
}

/**/
/* From Uiverse.io by Jedi-hongbin */
.button_continue {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 10px;
  letter-spacing: 1px;
  transition: all 0.2s linear;
  cursor: pointer;
  border: none;
  background: #0d6efd;

}

.button_continue>svg {
  margin-right: 5px;
  margin-left: 5px;
  font-size: 24px;
  transition: all 0.4s ease-in;
  fill: #ffffff;
}

.button_continue:hover>svg {
  font-size: 1.2em;
  transform: translateX(-5px);

}

.button_continue:hover {
  box-shadow: 9px 9px 33px #9a9999, -9px -9px 33px #ffffff;
  transform: translateY(-2px);

}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
  .custom-buttom {
    font-size: 0.9rem;
    /* Ajuste para pantallas grandes */
    padding: 0.6em 1.8em;
  }
}

@media (max-width: 992px) {
  .custom-buttom {
    font-size: 0.85rem;
    /* Ajuste para pantallas medianas */
    padding: 0.55em 1.6em;
  }
}

@media (max-width: 768px) {
  .custom-buttom {
    font-size: 0.8rem;
    /* Ajuste para tablets */
    padding: 0.5em 1.4em;
  }
}

@media (max-width: 576px) {
  .custom-buttom {
    font-size: .9rem;
    /* Ajuste para móviles */
    padding: 0.4em 1.2em;
  }

/* Botón similar a btn btn-outline-secondary */
.btn-outline-custom {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  color: #0d6efd;
  /* Color del texto */
  background-color: transparent;
  border: 1px solid #0d6efd;
  /* Color del borde */
  border-radius: .25rem;
  padding: .375rem .75rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn-outline-custom:hover {
  color: #ffffff;
  /* Color del texto al pasar el ratón */
  background-color: #0d6efd;
  /* Color de fondo al pasar el ratón */
  border-color: #0d6efd;
  /* Color del borde al pasar el ratón */
}

.btn-outline-custom:focus,
.btn-outline-custom.focus {
  box-shadow: 0 0 0 .2rem #0d6efd80;
  /* Sombra al enfocar */
}

.btn-outline-custom:disabled,
.btn-outline-custom.disabled {
  opacity: .65;
  cursor: not-allowed;
}

.btn-outline-custom>svg {
  margin-right: 5px;
  margin-left: 5px;
  font-size: 24px;
  transition: all 0.5s ease-in;
  fill: #0d6efd;

}

.btn-outline-custom:hover>svg {
  font-size: 1.2em;
  transform: translateX(-5px);
  fill: #ffffff;
}

/* Boton Dark */
.btn-outline-dark:hover i {
  color: #ffffff;
  /* Color del icono al pasar el ratón */
}

.btn-outline-dark:hover .badge {
  background-color: #ffffff;
  /* Color de fondo de la etiqueta al pasar el ratón */
  color: #ffffff;
  /* Color del texto en la etiqueta al pasar el ratón */
}