/* ==========================================================
   UTILIDADES — marca de agua de puntos con parallax y separador SVG
   ========================================================== */

/* ==========================================================
   MARCA DE AGUA DE PUNTOS + PARALLAX HORIZONTAL
   Réplica sobria de uk-background-bottom-center + bgx:-130,120
   ========================================================== */
.dotted{position:relative; overflow:hidden;}
.dotted > *{position:relative; z-index:1;}
.dotted::before{
  content:""; position:absolute; z-index:0;
  left:-220px; right:-220px; bottom:0; height:min(60%, 440px);
  background-image:var(--dots-ink);
  background-repeat:repeat;
  background-position:calc(50% + var(--bgx, 0px)) bottom;
  opacity:.14;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);
          mask-image:linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events:none;
}
.dotted--light::before{background-image:var(--dots-paper); opacity:.13;}

/* Separador de sección en SVG (de-shape-divider, variante recta y sobria) */
.shape-divider{
  position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:3;
  height:66px; pointer-events:none;
}
.shape-divider svg{display:block; width:100%; height:100%;}
.shape-divider path{fill:var(--paper);}
.shape-divider--dark path{fill:var(--navy-deep);}