/*index.css*/
/* ====== CARRUSEL AUTOMATICO ====== */
.carousel-automatico {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}

.carousel-slide {
  width: 100%;
}

.carousel-slide a,
.carousel-slide picture {
  display: block;
  width: 100%;
}

.carousel-img {
  width: 100%;
  height: clamp(260px, 26vw, 500px); /* desktop hasta 500px */
  display: block;
  object-fit: cover;                 /* llena todo el ancho */
  object-position: center;
  border-radius: 0;
  background: #fff;
}

.carousel-track,
.carousel-track .slick-list,
.carousel-track .slick-track,
.carousel-track .slick-slide,
.carousel-track .slick-slide > div,
.carousel-automatico .js-carousel,
.carousel-automatico .slick-list,
.carousel-automatico .slick-track,
.carousel-automatico .slick-slide,
.carousel-automatico .slick-slide > div {

  margin: 0 !important;
  padding: 0 !important;
}

.carousel-automatico,
.slick-slider {
  z-index: 1 !important;
  position: relative;
}

/* sin espacios internos de slick */
.carousel-automatico .slick-list,
.carousel-automatico .slick-track {
  margin: 0 !important;
  padding: 0 !important;
}

.carousel-automatico .slick-slide {
  padding: 0 !important;
  margin: 0 !important;
}

 /* Contenedor general para secciones */
.section-container {
  max-width: 1600px; /* opcional: limitar ancho */
  background-color: var(--gray-light-color);
}


/* Mantener estable el carrusel renderizado antes de iniciar Slick. */
.js-carousel[data-render-inicial="true"]:not(.slick-initialized) > .carousel-slide:not(:first-child) {
  display: none;
}

/* Reservar espacio para que las secciones diferidas no se acumulen en el viewport. */
#contenedor-secciones section[data-index-pendiente="true"] { min-height: 300px; }