/* HERO - Desktop por defecto */
.single-page-hero {
  height: 60dvh;
  height: 60vh; /* fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden; /* por si usas imagen de fondo */
  background-size: cover;
  background-position: center;
}

/* TABLETS horizontales y verticales */
@media (max-width: 1024px) {
  .single-page-hero {
    height: 50dvh;
    height: 50vh;
  }
}

/* Móviles Pantallas grandes (iPhone Pro, Pixel, etc.) */
@media (max-width: 768px) {
  .single-page-hero {
    height: 40dvh;
    height: 40vh;
  }
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  inset: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: white;
}