/* ==========================================
   FONDOS Y SEPARADORES SVG DE SECCIÓN
   ========================================== */

/* Textura sutil de puntos sobre fondos claros */
.textura-puntos {
  background-image: radial-gradient(var(--tinta-suave) 0.75px, transparent 0.75px);
  background-size: 24px 24px;
  background-color: var(--lino);
}

.textura-puntos-clara {
  background-image: radial-gradient(var(--borde-claro) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Canvas de Fondos Animados */
.canvas-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Divisores SVG (60-80px de alto entre secciones) */
.divisor-svg {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  overflow: hidden;
  line-height: 0;
  z-index: 5;
  pointer-events: none;
}

.divisor-svg svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.divisor-svg--superior { top: 0; transform: rotate(180deg); }
.divisor-svg--inferior { bottom: 0; }

.divisor-svg--noche { fill: var(--noche); }
.divisor-svg--lino { fill: var(--lino); }
.divisor-svg--lino-alto { fill: var(--lino-alto); }
.divisor-svg--bruma { fill: var(--bruma); }
.divisor-svg--brote-tenue { fill: var(--brote-tenue); }
.divisor-svg--savia { fill: var(--savia); }