:root{
  --grain-master: 0.9;

  --grain-a: 0.90;
  --grain-b: 0.90;
  --grain-c: 0.90;

  --grain-size-a: 1920px;
  --grain-size-b: 1920px;
  --grain-size-c: 1920px;

  --grain-src: url("../graficos/arcillas/semilla.png");
}

html{
  isolation: isolate;
}


html, body{ height:100%; }

body{
  position: relative;
  background: #c9d7bd02;
  color: #adfd7700;
}

/* TEXTURA MADRE (encima de TODO) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;

  background-image: var(--grain-src), var(--grain-src), var(--grain-src);
  background-repeat: repeat, repeat, repeat;

  background-size:
    var(--grain-size-a) var(--grain-size-a),
    var(--grain-size-b) var(--grain-size-b),
    var(--grain-size-c) var(--grain-size-c);

  mix-blend-mode: soft-light;
  opacity: calc(var(--grain-master) * 0.5);
}

/* capa extra para “asentar” */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 999998;
  pointer-events: none;

  background-image: var(--grain-src);
  background-repeat: repeat;
  background-size: var(--grain-size-a) var(--grain-size-a);

  mix-blend-mode: multiply;
  opacity: calc(var(--grain-a) * var(--grain-master)* 0.5);
}

@media (prefers-reduced-motion: no-preference){
  body::before{
    transform: rotate(-0.25deg) scaleX(1.35) scaleY(0.95);
    transform-origin: center;
  }
}

@media (max-width: 600px){
  :root{ --grain-master: 0.75; }
}