/* ---------------------------------------------------------
   Tarjetas del bento con efecto cristal y luz (aprobado por Dario, 2026-10-26):
   relleno translúcido, borde fino iluminado, destellos en las esquinas
   y un brillo suave alrededor, todo en el color de cada bloque (--acento).
   Solo las tarjetas cerradas: al abrirse vuelven al fondo de siempre.
   --------------------------------------------------------- */

.datio-bloque--contenido:not(.is-open),
.datio-bloque--logo,
.datio-bloque--mascota:not(.is-open) {
	--cristal-luz: var(--acento, var(--datio-brand-teal));
	background:
		/* destello fuerte arriba a la izquierda */
		radial-gradient(38px 26px at 5% 0%, color-mix(in srgb, var(--cristal-luz) 62%, transparent), transparent 70%),
		/* línea de luz sobre el borde superior */
		radial-gradient(45% 3px at 22% 0%, color-mix(in srgb, var(--cristal-luz) 45%, transparent), transparent 100%),
		/* destello abajo a la derecha */
		radial-gradient(34px 24px at 96% 100%, color-mix(in srgb, var(--cristal-luz) 50%, transparent), transparent 70%),
		radial-gradient(40% 3px at 82% 100%, color-mix(in srgb, var(--cristal-luz) 38%, transparent), transparent 100%),
		/* halo interior del color del bloque */
		radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--cristal-luz) 16%, transparent), transparent 60%),
		/* el cristal: un velo claro apenas degradado */
		linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.04)),
		rgba(14, 12, 24, 0.62);
	border: 1px solid color-mix(in srgb, var(--cristal-luz) 45%, rgba(255, 255, 255, 0.2));
	box-shadow:
		0 0 20px -9px color-mix(in srgb, var(--cristal-luz) 52%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 0 18px -6px color-mix(in srgb, var(--cristal-luz) 32%, transparent),
		0 12px 30px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* Diseño Web conserva su luz amarilla detrás de la notebook, ahora sobre el cristal. */
.datio-bloque[data-bloque-id="diseno-web"]:not(.is-open) {
	background:
		radial-gradient(38px 26px at 5% 0%, color-mix(in srgb, var(--cristal-luz) 62%, transparent), transparent 70%),
		radial-gradient(45% 3px at 22% 0%, color-mix(in srgb, var(--cristal-luz) 45%, transparent), transparent 100%),
		radial-gradient(34px 24px at 96% 100%, color-mix(in srgb, var(--cristal-luz) 50%, transparent), transparent 70%),
		radial-gradient(75% 90% at 78% 8%, rgba(255, 196, 0, 0.32), transparent 68%),
		linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.04)),
		rgba(14, 12, 24, 0.62);
}

/* Al pasar el mouse, la luz se enciende un poco más. */
@media (hover: hover) and (pointer: fine) {
	.datio-bloque--contenido:not(.is-open):hover,
	.datio-bloque--mascota:not(.is-open):hover {
		border-color: color-mix(in srgb, var(--cristal-luz) 68%, white);
		box-shadow:
			0 0 26px -7px color-mix(in srgb, var(--cristal-luz) 68%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 0.22),
			inset 0 0 22px -6px color-mix(in srgb, var(--cristal-luz) 55%, transparent),
			0 14px 34px rgba(0, 0, 0, 0.32);
	}
}

/* ---------------------------------------------------------
   El mismo cristal en el resto de las tarjetas del sitio (pedido de
   Dario, 2026-10-26). `body:not(#datio-sin-id)` suma especificidad para
   ganarle al fondo propio de cada componente sin !important. La luz
   toma el --acento del elemento si lo tiene (planes, servicios); si no,
   el verde agua de Datio.
   --------------------------------------------------------- */
body:not(#datio-sin-id) :is(
	.datio-abonos__plan,
	.datio-abonos__pasos li,
	.datio-abonos__extra,
	.datio-abonos__cierre,
	.datio-servicio__plan,
	.datio-plan__cristal,
	.datio-plan-promo,
	.datio-tile,
	.datio-baldosa,
	.datio-caso-d__modulos li,
	.datio-diag__incentivo,
	.datio-diag__lectura,
	.datio-pos-plan,
	.datio-pos__funciones li,
	.datio-video-card
) {
	--cristal-luz: var(--acento, var(--datio-brand-teal));
	background:
		radial-gradient(38px 26px at 5% 0%, color-mix(in srgb, var(--cristal-luz) 62%, transparent), transparent 70%),
		radial-gradient(45% 3px at 22% 0%, color-mix(in srgb, var(--cristal-luz) 45%, transparent), transparent 100%),
		radial-gradient(34px 24px at 96% 100%, color-mix(in srgb, var(--cristal-luz) 50%, transparent), transparent 70%),
		radial-gradient(40% 3px at 82% 100%, color-mix(in srgb, var(--cristal-luz) 38%, transparent), transparent 100%),
		radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--cristal-luz) 14%, transparent), transparent 60%),
		linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.04)),
		rgba(14, 12, 24, 0.62);
	border: 1px solid color-mix(in srgb, var(--cristal-luz) 45%, rgba(255, 255, 255, 0.2));
	box-shadow:
		0 0 20px -9px color-mix(in srgb, var(--cristal-luz) 52%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 0 18px -6px color-mix(in srgb, var(--cristal-luz) 32%, transparent),
		0 12px 30px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* El plan destacado lleva el borde un poco más encendido. */
body:not(#datio-sin-id) :is(.datio-abonos__plan, .datio-pos-plan).is-destacado {
	border-color: color-mix(in srgb, var(--cristal-luz) 80%, white);
	box-shadow:
		0 0 28px -8px color-mix(in srgb, var(--cristal-luz) 70%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 0 20px -6px color-mix(in srgb, var(--cristal-luz) 40%, transparent),
		0 12px 30px rgba(0, 0, 0, 0.3);
}