/*
 * Los dos huecos de banner del listado.
 *
 * El tema no maqueta estos banners: cada hueco es un punto de montaje para una
 * plantilla de Elementor, asi que esta hoja solo hace dos cosas. Reserva el
 * alto medido mientras el hueco esta vacio, y recorta con el radio del diseno
 * lo que se monte dentro.
 *
 * El hueco vacio es deliberadamente invisible: sin banner montado se ve aire,
 * no un recuadro a medio terminar. Para comprobar que el espacio esta donde
 * toca, basta dar color temporalmente a .fz-banner:empty desde el inspector.
 */

/*
 * display: flow-root y no block: la seccion de Elementor trae margen propio y
 * con block ese margen se colapsa fuera del hueco, que es el defecto que ya se
 * resolvio en el cintillo del header. El margen va en el contenedor, nunca en
 * los hijos, para no pisar el layout que monte Elementor dentro.
 */
.fz-banner {
  display: flow-root;
  overflow: hidden;
  margin-block-start: var(--fz-section-gap-mobile);
  border-radius: var(--fz-radius-3xl);
}

/* Reserva: solo mientras no haya nada montado. Con el banner puesto la altura
   la decide su propia maqueta. */
.fz-banner--primary:empty {
  min-height: var(--fz-banner-height-mobile);
}

.fz-banner--secondary:empty {
  min-height: var(--fz-banner-alt-height-mobile);
}

/* ===== DESKTOP: desde 1024px ===== */

@media (min-width: 1024px) {
  .fz-banner {
    margin-block-start: var(--fz-section-gap);
  }

  .fz-banner--primary:empty {
    min-height: var(--fz-banner-height);
  }

  .fz-banner--secondary:empty {
    min-height: var(--fz-banner-alt-height);
  }
}