/*
Theme Name: ChipWeb x VailleEvents - Hello Elementor Child
Theme URI: https://chipweb.es
Template: hello-elementor
Author: Lolo Marchal
Author URI: https://lolomarchal.com
Description: ChipWeb x VailleEvents - Hello Elementor Child es un tema hijo de Hello Elementor, un tema de WordPress ligero y minimalista creado específicamente para funcionar a la perfección con el plugin constructor de sitios Elementor. Este tema hijo ha sido creado por Lolo Marchal de ChipWeb.es y está pensado para usuarios que buscan una web flexible, fácil de usar y altamente personalizable. Optimizado para el rendimiento, proporciona una base sólida sobre la que los usuarios pueden construir sus propios diseños únicos utilizando el constructor visual de arrastrar y soltar de Elementor. Su sencillez y flexibilidad lo convierten en una gran elección tanto para principiantes como para creadores web con experiencia.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1791451444
Updated: 2026-10-08 09:24:04

/* ---------- Tokens ---------- */
:root {
	--lolo-glass-bg: rgba(255, 255, 255, 0.05);
	--lolo-glass-border: rgba(255, 255, 255, 0.14);
	--lolo-glass-highlight: rgba(255, 255, 255, 0.22);
	--lolo-glass-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
	--lolo-glass-blur: 28px;
	--lolo-glass-radius: 32px;
}

/* ---------- Liquid glass (tarjeta y píldoras) ---------- */
.lolo-liquid-glass,
.lolo-liquid-glass-pill {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 60%),
		var(--lolo-glass-bg);
	-webkit-backdrop-filter: blur(var(--lolo-glass-blur)) saturate(160%);
	backdrop-filter: blur(var(--lolo-glass-blur)) saturate(160%);
	border: 1px solid var(--lolo-glass-border);
	border-radius: var(--lolo-glass-radius);
	box-shadow:
		inset 0 1px 0 var(--lolo-glass-highlight),
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		var(--lolo-glass-shadow);
}

.lolo-liquid-glass-pill {
	--lolo-glass-radius: 999px;
	--lolo-glass-blur: 20px;
	--lolo-glass-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lolo-liquid-glass-pill:hover {
	border-color: rgba(255, 255, 255, 0.28);
}

/* Reflejo especular (arriba-izquierda) */
.lolo-liquid-glass::before,
.lolo-liquid-glass-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 55%);
}

/* Tinte del acento en el borde inferior-derecho (solo tarjeta) */
.lolo-liquid-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--lolo-accent, #2f5bea) 22%, transparent), transparent 70%);
}

/* Variante clara: añade también esta clase al contenedor */
.lolo-liquid-glass--light {
	--lolo-glass-bg: rgba(255, 255, 255, 0.40);
	--lolo-glass-border: rgba(255, 255, 255, 0.85);
	--lolo-glass-highlight: rgba(255, 255, 255, 0.95);
	--lolo-glass-shadow: 0 30px 70px -25px rgba(20, 20, 30, 0.25);
}

/* Sin soporte de backdrop-filter: fondo más opaco para mantener legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lolo-liquid-glass,
	.lolo-liquid-glass-pill { background: rgba(20, 20, 24, 0.85); }
	.lolo-liquid-glass--light { background: rgba(255, 255, 255, 0.92); }
}

/* ---------- Blobs de acento (fondo animado) ---------- */
.lolo-blob {
	animation: lolo-float 18s ease-in-out infinite alternate;
	will-change: transform;
}

.lolo-blob:nth-child(2) { animation-duration: 22s; animation-delay: -6s; }
.lolo-blob:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }

@keyframes lolo-float {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(6vw, -4vh) scale(1.12); }
	100% { transform: translate(-4vw, 5vh) scale(0.95); }
}

/* ---------- Punto de estado con pulso ---------- */
.lolo-pulse {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--lolo-accent, #2f5bea) 60%, transparent);
	animation: lolo-pulse 2s ease-out infinite;
}

@keyframes lolo-pulse {
	to { box-shadow: 0 0 0 10px transparent; }
}

/* ---------- Slogan de la firma: subrayado con el acento al pasar ---------- */
.lolo-slogan {
	background: linear-gradient(var(--lolo-accent, #2f5bea), var(--lolo-accent, #2f5bea)) no-repeat 0 100% / 0 1px;
	transition: background-size 0.5s ease;
}

.lolo-slogan:hover { background-size: 100% 1px; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.lolo-blob,
	.lolo-pulse { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
	.lolo-liquid-glass,
	.lolo-liquid-glass-pill {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(20, 20, 24, 0.95);
	}
	.lolo-liquid-glass--light { background: rgba(255, 255, 255, 0.97); }
}