/* ------------------------------------------------------------------------------------------------- */


.m_slider-frame {
	width: 100%;
    height: 50%;
	/* margin:50px auto 0; */
	margin:0px;
	overflow: hidden;
	align-items: center;
}

.m_slider-frame ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: m_slide 15s infinite alternate ease-in-out;
}

.m_slider-frame li {
	width: 100%;
	list-style: none;
}

.m_slider-frame img {
	width: 100%;
}

@keyframes m_slide {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

.m_boton{
  margin: 20px;
  display: inline-flex;
  width: fit-content;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 10px 20px;
  background-color: #5b9dc0;
  color: white;
  transition: background-color 300ms ease;
  border-radius: 0.5rem;
  font-size: clamp(.5rem, 1.5vw, 1rem);
  cursor: pointer;
}
.m_boton:hover{
  background-color: #003464;
}





/* -------------------HERO CARRUSEL ------------------------------------------------------------------- */

/* ===== HERO SECCIÓN ===== */
#hero01 {
  position: relative;
  width: 100%;
  height: 100vh; /* Ocupa toda la altura de la pantalla */
  overflow: hidden;
}

/* Fondo oscuro semi-transparente sobre las imágenes */
#hero01::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50); /* oscurece la imagen */
  z-index: 1;
}


/* ===== CARRUSEL ===== */

#hero01-carousel .carousel-inner,
#hero01-carousel .carousel-item,
#hero01-carousel img {
  width: 100%;
    height: 100vh;
    object-fit: cover; /* se ajusta sin deformarse */
    object-position: center;
    transition: opacity 0.5s ease-in-out;
}

/* ===== EFECTO ZOOM EN IMÁGENES DEL CARRUSEL ===== */

/* Escala inicial de las imágenes (ligeramente más grande para evitar bordes) */
#hero01-carousel .carousel-item img {
  transform: scale(1.05);
  transition: transform 6s ease-in-out;
}

/* Cuando el slide está activo, la imagen se expande lentamente */
#hero01-carousel .carousel-item.active img {
  transform: scale(1.15);
}

/* Para móviles, un zoom más sutil */
@media (max-width: 768px) {
  #hero01-carousel .carousel-item.active img {
    transform: scale(1.1);
  }
}

/* Opcional: suavizar el cambio entre slides */
#hero01-carousel .carousel-item {
  transition: transform 0.5s ease-in-out;
}




/* ===== CONTENEDOR DE TEXTO ===== */
.carousel-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3; /* por encima del overlay oscuro */
  transform: translate(-50%,-50%);
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 0 5px;
}


/* Título principal */
.carousel-container h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.carousel-container h2 span {
  color: #66ccff; /* color destacado */
}

/* Párrafo */
.carousel-container p {
  font-size: clamp(.5rem, 3vw, 1rem);
  /* line-height: 1.6; */
  /* margin-bottom: 1.5rem; */
  color: #f0f0f0;
}

.carousel-container h2,
.carousel-container p {

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(0, 0, 0, 1);
}

/* Botón principal */
.btn-get-started {
  display: inline-block;
  background: #0B60DC;
  color: #fff;
  padding: 12px 28px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.btn-get-started:hover {
  background: #003464;
  color: #fff;
}

/* ===== CONTROLES DEL CARRUSEL ===== */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  background-size: 50%;
}

/* ===== INDICADORES ===== */
.carousel-indicators [data-bs-target] {
  background-color: #fff;
  opacity: 0.6;
}

.carousel-indicators li {
  font-size: 0;
  color: transparent;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #66ccff;
}



/* ===== RESPONSIVE ===== */

/* Transición suave entre orientaciones */
  @media (orientation: portrait) {
    .hero-img {
      opacity: 0;
      animation: fadeIn 0.8s forwards;
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

@media (max-width: 768px) {
  .btn-get-started {
    padding: 10px 22px;
    font-size: 0.9rem;
  }
}


/*----PUBLICIDAD CARRUSEL --------------------------------------------------------------------*/

#publi01 {
  position: relative;
  width: 100%;
 /* height: 100vh; /* Ocupa toda la altura de la pantalla */
  overflow: hidden;
}

/* Fondo oscuro semi-transparente sobre las imágenes */
#publi01::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50); /* oscurece la imagen */
  z-index: 1;
}


/* ===== CARRUSEL ===== */

#publi01-carousel .carousel-inner,
#publi01-carousel .carousel-item,
#publi01-carousel img {
  width: 100%;
    height: 100%;
    object-fit: contain; /* se ajusta sin deformarse */
    object-position: center;
    transition: opacity 0.5s ease-in-out;
}

/* ===== CONTENEDOR DE TEXTO PUBLICIDAD ===== */
.carousel-container-pub {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3; /* por encima del overlay oscuro */
  text-align: left;
  color: #fff;
  max-width: 800px;
  padding: 0 20px;
  /* Animación de entrada */
  opacity: 0;
  animation: slideInLeft 1s ease-out forwards;
}

/*  Animación personalizada */
@keyframes slideInLeft {
  0% {
    transform: translate(-50%, -50%) translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}



/* Título principal */
.carousel-container-pub h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.carousel-container-pub h2 span {
  color: #66ccff; /* color destacado */
}

/* Párrafo */
.carousel-container-pub p {
  font-size: clamp(.5rem, 3vw, 1rem);
  /* line-height: 1.6; */
  /* margin-bottom: 1.5rem; */
  color: #f0f0f0;
}

.carousel-container-pub h2,
.carousel-container-pub p {

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(0, 0, 0, 1);
}

/* Solución para los botones dentro del carrusel */
.carousel-item {
    position: relative;
    overflow: visible;
}

.carousel-container-pub {
    position: absolute;
    bottom: 20%;
    left: 10%;
    right: 10%;
    z-index: 15;
    pointer-events: auto !important;
}

.carousel-container-pub div,
.carousel-container-pub a {
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
    display: inline-block;
    cursor: pointer;
}

/* Los overlays del carrusel no deben bloquear los clicks */
.carousel-item::before,
.carousel-item::after {
    pointer-events: none !important;
}

/* Forzar que los botones sean clickeables */
.btn-get-started {
    position: relative;
    z-index: 25;
    display: inline-block;
    pointer-events: auto !important;
}






/* ============================================
   GRID DE COMERCIOS - IMAGENES CON TAMAÑO ORIGINAL
   ============================================ */

.comercios-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 0 0.5rem;
}

.comercio-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.comercio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Contenedor de imagen - se adapta al tamaño original */
.card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.comercio-card:hover .card-image img {
    transform: scale(1.05);
}

.no-results {
    text-align: center;
    padding: 3rem 2rem;
    background: #f8f9fa;
    border-radius: 16px;
    grid-column: 1 / -1;
}

.no-results i {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.no-results h4 {
    font-size: 1.2rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.no-results p {
    color: #6c757d;
    font-size: 0.9rem;
}

.pagination-wrapper {
    margin-top: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.pagination-wrapper .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .comercios-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .comercios-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .comercios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .comercios-grid {
        grid-template-columns: 1fr;
    }
}