/* assets/css/app.css */
html, body { scroll-behavior: smooth; }

/* Secciones con fondo y overlay usando variables CSS */
.section-hero,
.section-bg {
  background-size: cover;
  background-position: center;
}

/* Por defecto usamos la imagen móvil; en pantallas medianas usamos la de escritorio si está definida */
.section-hero {
  /* --ov controla la opacidad del overlay (0–1) */
  --ov: .55;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,var(--ov)), rgba(0,0,0,var(--ov))),
    var(--bg-mobile);
}
@media (min-width: 768px) {
  .section-hero {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,var(--ov)), rgba(0,0,0,var(--ov))),
      var(--bg-desktop, var(--bg-mobile));
  }
}

/* Secciones con foto pero overlay un poco más ligero */
.section-bg {
  --ov: .45;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,var(--ov)), rgba(0,0,0,var(--ov))),
    var(--bg-mobile);
}
@media (min-width: 768px) {
  .section-bg {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,var(--ov)), rgba(0,0,0,var(--ov))),
      var(--bg-desktop, var(--bg-mobile));
  }
}