/* ====== BANNERS ====== */
/* ====== UTILIZADO ====== */
.banner-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .2s ease;
  width: 100%;
  max-width: none;    
  aspect-ratio: 600 / 250; 
}

.banner-card:hover {
  transform: translateY(-3px);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* se ajusta proporcionalmente */
  object-position: center; /* centrado */
  display: block;
  border-radius: 5px;
}

/* Carrusel banners con Slick */
.slick-banner .slick-slide {
  padding: 0 4px; 
  box-sizing: border-box;
}

.slick-banner {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* El carrusel ocupa todo el ancho disponible dentro de su container */
.js-banner1 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Sección banners con mismo estilo base que las cards */
.banners1 {
  margin: 0 auto;
  padding: 20px;              /* 👈 mismo padding que .section-card */
  /*background: #fdf9f7;*/
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Slick banners → igual que las cards */
.banners1 .slick-slide {
  padding: 10px;              /* 👈 mismo espacio lateral */
  box-sizing: border-box;
}

.banners1 .banner-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s ease;
  width: 100%;
  aspect-ratio: 600 / 250;    /* relación uniforme */
}

.banners1 .banner-card:hover {
  transform: translateY(-3px);
}

.banners1 .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*BANNER 2*/
.banner2-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .2s ease;
  width: 100%;
  max-width: none;    
  aspect-ratio: 500 / 300; 
}

.banner2-card:hover {
  transform: translateY(-3px);
}

.banner2-image {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* se ajusta proporcionalmente */
  object-position: center; /* centrado */
  display: block;
  border-radius: 5px;
}

/* Carrusel banners con Slick */
.slick-banner2 .slick-slide {
  padding: 0 4px; 
  box-sizing: border-box;
}

.slick-banner2 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* El carrusel ocupa todo el ancho disponible dentro de su container */
.js-banner2 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Sección banners con mismo estilo base que las cards */
.banners2 {
  margin: 0 auto;
  padding: 20px;              /* 👈 mismo padding que .section-card */
  /*background: #fdf9f7;*/
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Slick banners → igual que las cards */
.banners2 .slick-slide {
  padding: 10px;              /* 👈 mismo espacio lateral */
  box-sizing: border-box;
}

.banners2 .banner2-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s ease;
  width: 100%;
  aspect-ratio: 500 / 300;    /* relación uniforme */
}

.banners2 .banner2-card:hover {
  transform: translateY(-3px);
}

.banners2 .banner2-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*BANNER 3*/
.banner3-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .2s ease;
  width: 100%;
  max-width: none;    
  aspect-ratio: 700 / 500; 
  will-change: transform;
  
 }

.banner3-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.banner3-image {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* se ajusta proporcionalmente */
  object-position: center; /* centrado */
  display: block;
  border-radius: 5px;
}

/* Carrusel banners con Slick */
.slick-banner3 .slick-slide {
  padding: 0 4px; 
  box-sizing: border-box;
}

.slick-banner3 {
  width: 100%;
  margin: 0;
}

/* El carrusel ocupa todo el ancho disponible dentro de su container */
.js-banner3 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Sección banners con mismo estilo base que las cards */
.banners3 {
  margin: 0 auto;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Slick banners → igual que las cards */
.banners3 .slick-slide {
  padding: 10px;              /* 👈 mismo espacio lateral */
  box-sizing: border-box;
}

.banners3 .banner3-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s ease;
  width: 100%;
  aspect-ratio: 700 / 500;    /* relación uniforme */
}

.banners3 .banner3-card:hover {
  transform: translateY(-3px);
}

.banners3 .banner3-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Igual geometría antes y después de Slick: sin pilas de banners ni altura ficticia. */
.js-banner1[data-render-inicial], .js-banner2[data-render-inicial] { --banner-columnas:4; }
.js-banner3[data-render-inicial] { --banner-columnas:3; }
[data-render-inicial]:is(.js-banner1,.js-banner2,.js-banner3):not(.slick-initialized) {
  display:grid; grid-template-columns:repeat(var(--banner-columnas),minmax(0,1fr));
}
[data-render-inicial]:is(.js-banner1,.js-banner2,.js-banner3):not(.slick-initialized) > .banner-inicial-slide { padding:10px; min-width:0; }
[data-render-inicial]:is(.js-banner1,.js-banner2):not(.slick-initialized) > :nth-child(n+5),
.js-banner3[data-render-inicial]:not(.slick-initialized) > :nth-child(n+4) { display:none; }
@media(max-width:991px) {
  .js-banner1[data-render-inicial], .js-banner2[data-render-inicial] { --banner-columnas:3; }
  .js-banner3[data-render-inicial] { --banner-columnas:2; }
  [data-render-inicial]:is(.js-banner1,.js-banner2):not(.slick-initialized) > :nth-child(n+4),
  .js-banner3[data-render-inicial]:not(.slick-initialized) > :nth-child(n+3) { display:none; }
}
@media(max-width:767px) {
  .js-banner1[data-render-inicial], .js-banner2[data-render-inicial] { --banner-columnas:2; }
  .js-banner3[data-render-inicial] { --banner-columnas:1; }
  [data-render-inicial]:is(.js-banner1,.js-banner2,.js-banner3):not(.slick-initialized) > .banner-inicial-slide { padding:4px; }
  [data-render-inicial]:is(.js-banner1,.js-banner2):not(.slick-initialized) > :nth-child(n+3),
  .js-banner3[data-render-inicial]:not(.slick-initialized) > :nth-child(n+2) { display:none; }
}
@media(max-width:479px) {
  .js-banner1[data-render-inicial], .js-banner2[data-render-inicial] { --banner-columnas:1; }
  [data-render-inicial]:is(.js-banner1,.js-banner2):not(.slick-initialized) > :nth-child(n+2) { display:none; }
}

.js-fijadores[data-render-inicial]:not(.slick-initialized) { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%; }
.js-fijadores[data-render-inicial]:not(.slick-initialized) > :nth-child(n+6) { display:none; }
@media(max-width:991px){.js-fijadores[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(4,minmax(0,1fr));}.js-fijadores[data-render-inicial]:not(.slick-initialized)>:nth-child(n+5){display:none;}}
@media(max-width:767px){.js-fijadores[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(3,minmax(0,1fr));}.js-fijadores[data-render-inicial]:not(.slick-initialized)>:nth-child(n+4){display:none;}}
@media(max-width:575px){.js-fijadores[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(2,minmax(0,1fr));}.js-fijadores[data-render-inicial]:not(.slick-initialized)>:nth-child(n+3){display:none;}}

.js-marcas[data-render-inicial]:not(.slick-initialized){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;}
.js-marcas[data-render-inicial]:not(.slick-initialized)>:nth-child(n+6){display:none;}
@media(max-width:1199px){.js-marcas[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(4,minmax(0,1fr));}.js-marcas[data-render-inicial]:not(.slick-initialized)>:nth-child(n+5){display:none;}}
@media(max-width:991px){.js-marcas[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(3,minmax(0,1fr));}.js-marcas[data-render-inicial]:not(.slick-initialized)>:nth-child(n+4){display:none;}}
@media(max-width:767px){.js-marcas[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(2,minmax(0,1fr));}.js-marcas[data-render-inicial]:not(.slick-initialized)>:nth-child(n+3){display:none;}}
@media(max-width:479px){.js-marcas[data-render-inicial]:not(.slick-initialized){grid-template-columns:repeat(1,minmax(0,1fr));}.js-marcas[data-render-inicial]:not(.slick-initialized)>:nth-child(n+2){display:none;}}