.body {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.dropdown-submenu > .dropdown-menu {
  display: none;
  position: static;
  margin-left: 1rem;
}

.dropdown-submenu > .dropdown-menu.show {
  display: block;
}

/*-------*/

/* Solo aplica el subrayado animado a .nav-link que NO tienen dropdown-toggle */
.nav-link:not(.dropdown-toggle) {
  position: relative;
  transition: color 0.3s ease;
  z-index: 1;
}

.nav-link:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #ffc107;
  transition: width 0.3s ease;
  z-index: -1;
}

.nav-link:not(.dropdown-toggle):hover::after {
  width: 100%;
}

.dropdown-toggle:hover {
  color: #ffc107 !important;
}

/*swiper*/
.swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.swiper {
  padding-bottom: 60px; /* espacio para los controles */
}

.swiper-wrapper{ 
    height: 405px !important;
    padding: 10px;
                }

/*   SCROLL SNAP*/
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  scroll-behavior: smooth;
}

.card-snap {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 240px;
}

.card-img-top {
  width: 240px;
/*      height: 416px;*/
  object-fit: cover;
}

/*  FIN SCROLL SNAP*/

/* Estilo para hover y clic con overlay en snap scroll */
.card.card-snap,
.image-wrapper {
  position: relative;
  cursor: pointer;
}

.card.card-snap .overlay,
.image-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: rgba(0, 0, 0, 0.80);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  padding: 1rem;
}

.card.card-snap:hover .overlay,
.image-wrapper:hover .overlay {
  opacity: 1;
}

/* Mostrar overlay permanentemente tras clic */
.card.card-snap.clicked .overlay,
.image-wrapper.clicked .overlay {
  opacity: 1;
}

/* Termina Estilo para hover y clic con overlay en snap scroll */

/* Colores de cursores en banner principal  */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/*hover en iconos sociales*/
.social-icons a i {
  color: #ffffff;  /* Color blanco por defecto */
  transition: color 0.3s ease;
}

.social-icons a i:hover {
  color: #68bbe9;  
}

/*titular peso*/
.heavyfont {
  font-weight: 900;
}

/*Custom CSS para tamaño del carousel */
@media (max-width: 992px) {
  .custom-carousel-img {
    height: 300px;
    width: 510px;
    margin: 0 auto;
  }
}

/*Segundo Scroll Snap*/
.scroll-container-2 {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  scroll-behavior: smooth;
}

.image-wrapper {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 420px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Para pantallas medianas y menores (<=768px), el max-width será 60% */
@media (max-width: 768px) {
  .titular-img {
    max-width: 60% !important;
  }
  .titular-imgyt {
    max-width: 80% !important;
  }
  #fotovioleta {
    display: none;
  }
}

/*botones de dia cartelera*/

/* Estilo base para los botones de pestaña */
.nav-pills .nav-link {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  color: #0d6efd;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Ícono en estado normal */
.nav-pills .nav-link i {
  transition: color 0.3s ease;
}

/* Hover: cambia color de fondo y del ícono/texto */
.nav-pills .nav-link:hover {
  background-color: #e7f1ff;
  color: #084298;
}

.nav-pills .nav-link:hover i {
  color: #084298;
}

/* Activo: fondo azul y texto blanco */
.nav-pills .nav-link.active {
  background-color: #6ab1d9;
  color: #fff;
}

.nav-pills .nav-link.active i {
  color: #fff;
}

/*termina estilo para botonoes dia de la semana*/

.transparencia-link {
  text-decoration: none;
  color: #315a78;
}

.transparencia-link:hover {
  color: #ca8c12;
  text-decoration: none;
}

/*ROSARIO CASTELLANOS*/
.hero {
  padding: 30px;
  border-radius: 8px;
}

.panel-heading {
  background-color: #c9b19c !important;
  border-color: #c9b19c !important;
  color: white !important;
}

.panel-primary {
  border-color: #c9b19c !important;
}

.panel-heading h3 {
  margin: 0;
}

.btn-manual {
  margin-top: 15px;
}

.btn-custom {
  background-color: #c9b19c;
  border-color: #c9b19c;
  color: white;
}

.btn-custom:hover,
.btn-custom:focus {
  background-color: #e94c70;
  border-color: #e94c70;
  color: white;
}

/*TERMINA ROSARIO CASTELLANOS*/

/*card internacional*/
.image-card-internacional {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.image-card-internacional:hover {
  transform: scale(1.03);
}

.image-card-internacional img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.overlay-internacional {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.image-card-internacional:hover .overlay-internacional,
.image-card-internacional:focus-within .overlay-internacional {
  opacity: 1;
}

.overlay-internacional h5 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.overlay-internacional p {
  margin-bottom: 0.3rem;
}

.overlay-internacional .time {
  font-weight: bold;
  font-size: 0.9rem;
  color: #f0e68c;
}

.th-azure {
  background-color: #588fae !important;
}