@charset "utf-8";
:root{
  --bg: hsl(0 0% 80%);
  --dot: hsl(0 0% 60%);
  --dot-size: clamp(1.6px, 1.12vw, 2.4px);
  --gap: clamp(4px, 0.6vw, 7px);

  /* controla la “longitud” del fade */
  --fade-strength: 50%; /* prueba 60%, 80%, etc. */
}

html, body { height: 100%; margin: 0; }
body{
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) var(--dot-size), transparent calc(var(--dot-size) + 0.1px));
  background-size: var(--gap) var(--gap);
  image-rendering: -webkit-optimize-contrast;
  overflow: hidden;
}

/* Capa que tapa el fondo salvo la zona inferior (transparente) */
.cover{
  position: fixed;
  inset: 0;
  background: hsl(0 0% 80%);
  z-index: -5;
  pointer-events: none;

  /* de transparente (abajo) a blanco (arriba) */
  mask-image: linear-gradient(to top, transparent 0%, white var(--fade-strength));
  -webkit-mask-image: linear-gradient(to top, transparent 0%, white var(--fade-strength));
}

@media (max-width: 480px) {
	:root{
  --bg: hsl(0 0% 80%);
  --dot: hsl(0 0% 65%);
  --dot-size: clamp(-1px, 0.9vw, 2.2px);
  --gap: clamp(6px, 1.8vw, 8px);

  /* controla la “longitud” del fade */
  --fade-strength: 65%; /* prueba 60%, 80%, etc. */}
	
	

html, body { height: 100%; margin: 0; }
body{
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) var(--dot-size), transparent calc(var(--dot-size) + 0.1px));
  background-size: var(--gap) var(--gap);
  image-rendering: -webkit-optimize-contrast;
  overflow: hidden;
}

/* Capa que tapa el fondo salvo la zona inferior (transparente) */
.cover{
  position: fixed;
  inset: 0;
  background: hsl(0 0% 80%);
  z-index: -5;
  pointer-events: none;

  /* de transparente (abajo) a blanco (arriba) */
  mask-image: linear-gradient(to top, transparent 0%, white var(--fade-strength));
  -webkit-mask-image: linear-gradient(to top, transparent 0%, white var(--fade-strength));
}
}