.red {
  margin: 10px 0 20px !important;
}

.titulo {
  color: #691C32;
  text-align: center;
}


/* ******************** CARRUSEL ********************* */
/* Contenedor del carrusel */
.carrusel-container {
  width: 85%;
  max-width: 1100px;
  margin: 20px auto 30px;
  padding: 5px;
  background: #0095D6;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
  overflow: hidden;
}

/* Swiper */
.mySwiper {
  width: 100%;
  height: auto;
}

.mySwiper .swiper-slide {
  height: auto;
  text-align: center;
}

.mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 6px;
}



/* Botones de navegación */
.swiper-button-next,
.swiper-button-prev {
  color: #611232 !important;
  /*background: rgb(195 190 190 / 30%);*/
  background: rgb(223 222 222 / 65%);
  ;
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  padding: 5px;
  backdrop-filter: blur(2px);
}

/* Indicadores (puntos) */
.swiper-pagination-bullet {
  width: 15px !important;
  height: 15px !important;
}

.swiper-pagination-bullet-active {
  background: #611232 !important;
}

/* +++++ FIN CARRUSEL ++++++ */

/* ******************** MINIATURAS ********************* */
.row-miniaturas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  row-gap: 25px;
}

.content-miniatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .2s ease;
}

.content-miniatura:hover {
  transform: translateY(-3px);
}

.style-miniatura {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 2px solid #999;
  border-radius: 15px;
  box-shadow: 2px 8px 10px rgba(0, 0, 0, .25);
  /*box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999, 2px 12px 10px rgba(0, 0, 0, 0.3);*/
}


/* +++++ BOTONES ++++++ */
.row-btn .select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 20px;
  margin: 20px auto;
}

.row-btn .select a {
  display: block;
  width: 100%;
  text-align: center;
  transition: transform .3s ease;
}


.btn-seccion {
  display: block;
  width: 80%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}

#btn-secciones {
  /* margin: 40px 0 0px; */
  scroll-margin-top: 100px !important;
}

/* Animación solo en el enlace */
.row-btn .select:hover {
  transform: none;
}

.row-btn .select a:hover {
  transform: scale(1.04);
}

/*
.select:hover {
  movimiento botones
  transition: .8s;
  transform: scale(1.08);
}*/

/* ==========================================
   BOTÓN REGRESAR
========================================== */
.content-btn-inicio {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin: 30px 0;
}

.btn-inicio {
  color: #6F7271;
  border: 1.5px solid #98989A;
  border-radius: 5px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999, 2px 5px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.content-btn-inicio .btn-inicio {
  display: inline-block;
  transform: scale(1);
  transform-origin: right center;
  transition:
    transform .3s ease,
    background-color .3s ease,
    color .3s ease;
}

.content-btn-inicio .btn-inicio:hover {
  transform: scale(1.05);
  color: #fff;
  background-color: #98989A;
  border-color: #98989A;
}

/* Eliminar borde de enfoque del botón Regresar */
.btn-inicio:focus,
.btn-inicio:active,
.btn-inicio:active:focus {
  outline: none;
  text-decoration: none;
}

/* Mantener indicador accesible al navegar con teclado */
.btn-inicio:focus-visible {
  outline: 2px solid #691C32;
  outline-offset: 3px;
}

/* +++++ FIN BOTONES ++++++ */



/* ******* TABLA DINAMICA ******* */
#tabla_talleres {
  width: 100%;
  table-layout: fixed;
}

thead tr {
  background-color: #E4D1B4;
  color: #2e2e2e;
  font-weight: bold;
}

tbody tr td,
thead tr th {
  vertical-align: middle;
  overflow-wrap: anywhere;
  white-space: normal;
}

th:last-child,
td:last-child {
  width: 90px;
  text-align: center;
}

.btn-icon {
  font-size: 30px !important;
  color: #a57f2c !important;
  padding: 5px;
}

.btn-icon img {
  max-width: 100%;
  height: auto;
}

/* Tablets */
@media (max-width: 991px) {
  .carrusel-container {
    width: 95%;
  }
}

/* ===================== Celulares ============================== */
@media (max-width: 767px) {
  .titulo {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.25;
    text-align: center;
    margin: 20px 0;
  }
  hr{
    margin: 15px 0;
  }

  /*------- CARRUSEL -----*/
  .carrusel-container {
    width: 100%;
    margin: 15px auto 25px;
    padding: 3px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 28px !important;
    height: 28px !important;
  }

  .swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
  }


  /*------- MINIATURAS -----*/
  .row-miniaturas {
    row-gap: 20px;
  }

  .content-miniatura {
    width: 100%;
    margin-bottom: 5px;
  }

  .style-miniatura {
    max-width: 450px;
  }

  .content-miniatura:hover {
    transform: none;
  }

  /*------- BOTONES -----*/
  .row-btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 15px;
  }

  .row-btn .select {
    padding-left: 5px;
    padding-right: 5px;
    margin: 0px auto;
  }

  .btn-seccion {
    width: 100%;
  }


  /*------- TABLA DINAMICA -----*/
  #tabla_talleres {
    font-size: 13px;
  }

  #tabla_talleres th,
  #tabla_talleres td {
    padding: 8px 5px;
  }

  #tabla_talleres th:last-child,
  #tabla_talleres td:last-child {
    width: 65px;
  }

  #tabla_talleres .btn-icon img {
    width: 28px;
    height: auto;
  }
}