/**
 * Home (solo index.php con hero + infografía vanilla): una sola petición en lugar de
 * home-hero-vanilla.css + home-infographic-vanilla.css (menos RTT y menos hojas bloqueantes).
 * Orden: hero primero, luego infografía (misma cascada que antes).
 */

/* ========== Hero (sin Slick) ========== */
/**
 * Hero home (solo con $smc_vanilla_home_hero): carrusel sin Slick.
 * Complementa default.css: reutiliza .slick-dots del theme.
 */
.smc-hero-vanilla.home-slideshow .home-slideshow-images .fsListItems {
  overflow: hidden;
  position: relative;
}

.smc-hero-vanilla .smc-hero-img-track {
  display: flex;
  width: calc(100% * var(--smc-hero-slides, 6));
  transition: transform 0.55s ease;
  will-change: transform;
}

.smc-hero-vanilla .smc-hero-img-track article {
  flex: 0 0 calc(100% / var(--smc-hero-slides, 6));
  max-width: calc(100% / var(--smc-hero-slides, 6));
  box-sizing: border-box;
}

/* Texto: fade tipo Slick (solo en hero vanilla) */
.smc-hero-vanilla .home-slideshow-text .fsListLevel1 {
  position: relative;
}

.smc-hero-vanilla .home-slideshow-text .fsListLevel1 li {
  transition: opacity 0.55s ease;
}

.smc-hero-vanilla .home-slideshow-text .fsListLevel1 li:not(.slick-active) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.smc-hero-vanilla .home-slideshow-text .fsListLevel1 li.slick-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ========== Infografía (sin Slick, CSS Grid) ========== */
/**
 * Home: infografía “¿Por qué elegirnos?” sin Slick.
 * Requiere .smc-infographic-grid en .infographic-container y window.smcSkipHomeInfographicSlick en main.js.
 */

/* Contenedor interno: rejilla en lugar de .slick-list / .slick-track */
.infographic-container.smc-infographic-grid > .fsElementContent {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 73.75rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 999px) {
  .infographic-container.smc-infographic-grid > .fsElementContent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .infographic-container.smc-infographic-grid > .fsElementContent {
    grid-template-columns: 1fr;
  }
}

/* Anula table-cell de default.css (pensado para Slick) */
body:not(.fsComposeMode) .infographic-container.smc-infographic-grid > .fsElementContent > .infographic-box {
  display: block !important;
  float: none !important;
  height: auto;
  margin: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.37);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Desktop 4 cols: quitar borde derecho del 4º de cada fila */
@media (min-width: 1000px) {
  .infographic-container.smc-infographic-grid > .fsElementContent > .infographic-box:nth-child(4n) {
    border-right: none;
  }
}

/* Tablet 2 cols */
@media (min-width: 700px) and (max-width: 999px) {
  .infographic-container.smc-infographic-grid > .fsElementContent > .infographic-box:nth-child(2n) {
    border-right: none;
  }
}

/* Móvil: una columna, solo separación horizontal entre filas */
@media (max-width: 699px) {
  .infographic-container.smc-infographic-grid > .fsElementContent > .infographic-box {
    border-right: none;
  }
  .infographic-container.smc-infographic-grid > .fsElementContent > .infographic-box:last-child {
    border-bottom: none;
  }
}

/* Sin flechas Slick (no se generan) — por si quedara algo residual */
.infographic-container.smc-infographic-grid .slick-arrow {
  display: none !important;
}