html {
  scroll-behavior: smooth;
}

body {
  /* Fallback sólido + imagen fija */
  background: #0f172a url("/img/dbh_bg7.png") center/cover fixed no-repeat;
  font-family: "Lato", sans-serif;
}
@media (max-width: 992px) {
  body {
    background-position-x: 65%;
    //backdrop-filter: blur(10px);
  }
  .name {
    font-size: 3rem !important;
  }
  .blur-sm-bg {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 1rem;
  }
}

/* ==== Purple overlay for subtle tint ==== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1; /* debajo de esquinas (10) y navbar (50) */
  pointer-events: none;
  /* Gradiente combinando dos focos violáceos */
  background: radial-gradient(at top left, #7000ff40 0%, #7000ff0a 50%, transparent 100%), radial-gradient(at bottom right, #7000ff30 0%, transparent 80%);
  mix-blend-mode: color-dodge;
}

.corner {
  position: fixed;
  width: 1rem; /* h-24 */
  height: 1rem; /* w-24 */
  background: #ffffff; /* white square */
  z-index: 10;
  pointer-events: none; /* no interacciones */
}
/* Máscara: deja visible el cuadrado salvo un cuarto de círculo transparente */
.corner-tl {
  top: 0;
  left: 0;
  -webkit-mask: radial-gradient(circle at top left, transparent 0 1rem, black 1rem);
  mask: radial-gradient(circle at top left, transparent 0 1rem, black 1rem);
  rotate: 180deg; /* rota para alinear con la esquina */
}
.corner-tr {
  top: 0;
  right: 0;
  -webkit-mask: radial-gradient(circle at top right, transparent 0 1rem, black 1rem);
  mask: radial-gradient(circle at top right, transparent 0 1rem, black 1rem);
  rotate: 180deg;
}
.corner-bl {
  bottom: 0;
  left: 0;
  -webkit-mask: radial-gradient(circle at bottom left, transparent 0 1rem, black 1rem);
  mask: radial-gradient(circle at bottom left, transparent 0 1rem, black 1rem);
  rotate: 180deg;
}
.corner-br {
  bottom: 0;
  right: 0;
  -webkit-mask: radial-gradient(circle at bottom right, transparent 0 1rem, black 1rem);
  mask: radial-gradient(circle at bottom right, transparent 0 1rem, black 1rem);
  rotate: 180deg;
}

.text-white {
  color: #ffffff !important; /* Asegura que el texto sea blanco */
}
.name {
  font-size: 4rem;
  font-weight: 900;
}