/*
 * Liquid Glass — Patrones/texturas decorativas por sección (2026-07)
 *
 * 3 patrones en CSS puro (sin imágenes que descargar), mismo lenguaje
 * visual "Liquid Glass" que el resto del sitio: blobs/formas orgánicas en
 * los colores REALES de marca (azul + ámbar), nada genérico.
 *
 * Se eligen por sección desde el meta box "Imágenes (Liquid Glass)" de cada
 * página (campo "Patrón de fondo — ...") — ver diiphone_pattern_class() y
 * diiphone_pattern_options() en functions.php. El valor por defecto de cada
 * campo está pensado para que, si nadie toca nada, la página se vea IGUAL
 * que antes de este cambio (Patrón 1 reproduce el mismo look que ya tenía
 * ".liquid-glass-blob-bg").
 *
 * Todas requieren que el elemento tenga (o reciba aquí) position:relative +
 * overflow:hidden — igual que ".liquid-glass-blob-bg" en liquid-glass.css.
 */

.dp-pattern-1,
.dp-pattern-2,
.dp-pattern-3 {
	position: relative;
	overflow: hidden;
}

/* --- Patrón 1: Halo doble (el look de siempre — 2 blobs difuminados) --- */
.dp-pattern-1::before,
.dp-pattern-1::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	pointer-events: none;
}

.dp-pattern-1::before {
	width: 380px;
	height: 380px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle at 35% 35%, var(--brand-blue-light, #5271ff), var(--brand-blue-deep, #004d93) 65%, transparent 75%);
}

.dp-pattern-1::after {
	width: 320px;
	height: 320px;
	bottom: -100px;
	right: -60px;
	background: radial-gradient(circle at 60% 60%, var(--brand-amber, #ffb923), transparent 75%);
}

/* --- Patrón 2: Ondas diagonales (bandas suaves cruzando la sección) --- */
.dp-pattern-2::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20%;
	pointer-events: none;
	opacity: 0.3;
	filter: blur(3px);
	background: repeating-linear-gradient(
		135deg,
		var(--brand-blue-light, #5271ff) 0px,
		var(--brand-blue-light, #5271ff) 3px,
		transparent 3px,
		transparent 70px,
		var(--brand-amber, #ffb923) 70px,
		var(--brand-amber, #ffb923) 73px,
		transparent 73px,
		transparent 140px
	);
}

/* --- Patrón 3: Constelación de puntos (puntos sueltos, tamaños variados) --- */
.dp-pattern-3::before,
.dp-pattern-3::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

.dp-pattern-3::before {
	opacity: 0.35;
	background-image:
		radial-gradient(circle, var(--brand-blue-light, #5271ff) 3px, transparent 3.5px),
		radial-gradient(circle, var(--brand-amber, #ffb923) 2px, transparent 2.5px);
	background-size: 90px 90px, 130px 130px;
	background-position: 0 0, 40px 60px;
}

.dp-pattern-3::after {
	opacity: 0.2;
	background-image: radial-gradient(circle, var(--brand-blue-deep, #004d93) 1.5px, transparent 2px);
	background-size: 55px 55px;
	background-position: 20px 30px;
}

/* En móvil y con "reduced motion" se bajan las opacidades — mismo criterio
   que ".liquid-glass-blob-bg": menos distracción visual, mejor rendimiento. */
@media (prefers-reduced-motion: reduce), (max-width: 544px) {
	.dp-pattern-1::before,
	.dp-pattern-1::after {
		opacity: 0.3;
	}

	.dp-pattern-2::before {
		opacity: 0.18;
	}

	.dp-pattern-3::before {
		opacity: 0.2;
	}

	.dp-pattern-3::after {
		opacity: 0.12;
	}
}