#previa{
	--logoSup:hsl(30, 100%, 60%);
	--logoBase:hsl(210, 100%, 40%);
	--logoInf:hsl(120, 100%, 35%);
	--logoTexto:var(--logoBase);
	--tiempo:10s;
}
#previa #logobollo{
	position: absolute;
	bottom: 30px;
	right: 30px;
	text-align: center;
	color: white;
}
#previa svg{
	width: 12em;
	filter: drop-shadow(0 0 0.1rem black) drop-shadow(0 0 0.05rem black) drop-shadow(0 0 0.05rem black);
}
#previa svg path{
	stroke-linejoin:round;
	fill:none;
	transform-origin: 52px 48px;
}
#previa svg #ctr{
	d: path('m 47.5,90 h 38 l 8.5,-8.5 V 41.5 M 55.5,6 H 18.5 L 10,14.5 v 38.5');
	stroke-linecap:round;
}
#previa svg :is(#sup, #inf){
	d: path('m 18.5,6 -8.5,8.5 v 67 l 8.5,8.5 h 67 l 8.5,-8.5 V 14.5 L 85.5,6 Z');
}
#previa svg :is(#sup, #inf, #ctr){stroke-width:12;}
#previa svg :is(#supm, #infm, #ctrm){
	d: path('M 37,48 H 67 M 52,33 v 29');
	stroke-width:8.5;
}
#previa svg #texto{
	d: path('m 237,11.072 c -3.5,0 -5.3,1.457 -5.3,4.371 V 82.12 c 0,2.92 1.8,4.38 5.3,4.38 3.4,0 5.1,-1.46 5.1,-4.38 V 15.443 c 0,-2.914 -1.7,-4.371 -5.1,-4.371 z m 23.4,0 c -3.5,0 -5.2,1.457 -5.2,4.371 V 82.12 c 0,2.92 1.7,4.38 5.2,4.38 3.4,0 5.1,-1.46 5.1,-4.38 V 15.443 c 0,-2.914 -1.7,-4.371 -5.1,-4.371 z M 118.2,11.91 c -1.6,0 -3,0.371 -4.2,1.115 -1.1,0.744 -1.7,2.233 -1.7,4.465 v 64.54 c 0,2.98 1.8,4.47 5.5,4.47 1.4,0 2.6,-0.31 3.7,-0.93 1.2,-0.69 1.8,-1.65 1.8,-2.89 l 0.1,-61.38 h 19.4 c 2.3,0 4,0.65 4.9,1.96 1,1.3 1.5,2.72 1.5,4.27 v 9.4 c 0,0.68 0,1.36 -0.1,2.04 -0.1,0.69 -0.3,1.31 -0.7,1.86 -0.3,0.5 -0.8,0.93 -1.6,1.3 -0.7,0.37 -1.8,0.59 -3.1,0.66 -0.9,-0.87 -1.9,-1.62 -3,-2.24 -1.1,-0.62 -2.2,-0.93 -3.3,-0.93 -2.1,0 -3.8,0.75 -5.3,2.24 -1.5,1.49 -2.3,3.31 -2.3,5.48 0,2.17 0.8,4 2.3,5.49 1.5,1.49 3.2,2.23 5.3,2.23 2.5,0 4.7,-1.05 6.4,-3.16 2.7,0.19 4.5,0.96 5.5,2.32 1.1,1.31 1.6,2.67 1.6,4.1 v 11.81 c 0,1.61 -0.5,3.07 -1.4,4.37 -0.9,1.3 -2.5,1.95 -4.8,1.95 H 132 c -2.6,0 -3.9,1.55 -3.9,4.65 0,1.43 0.3,2.57 0.8,3.44 0.6,0.87 1.4,1.3 2.5,1.3 h 13.8 c 1.7,0 3.5,-0.31 5.2,-0.93 1.8,-0.62 3.7,-1.55 5.6,-2.79 4,-2.41 6,-6.16 6,-11.25 v -13.3 c 0,-1.61 -0.2,-3.01 -0.7,-4.18 -0.5,-1.18 -1.1,-2.2 -1.9,-3.07 -0.5,-0.62 -1.2,-1.18 -1.9,-1.68 -0.7,-0.55 -1.5,-1.08 -2.3,-1.58 1.2,-0.93 2.3,-2.17 3.4,-3.72 1,-1.61 1.5,-3.65 1.5,-6.13 V 26.7 c 0,-2.55 -0.4,-4.78 -1.2,-6.7 -0.7,-1.921 -1.9,-3.47 -3.5,-4.648 h 0.1 c -1.6,-1.054 -3.3,-1.892 -5.2,-2.512 -1.8,-0.62 -3.5,-0.93 -5.1,-0.93 z M 190,29.77 c -1.6,0 -3.3,0.34 -5,1.02 -1.7,0.68 -3.4,1.55 -5,2.6 h 0.1 c -1.6,1.18 -2.8,2.73 -3.7,4.65 -0.9,1.86 -1.3,4.03 -1.3,6.51 v 26.41 c 0,5.15 1.7,8.9 5,11.26 1.6,1.24 3.3,2.14 5,2.69 1.7,0.56 3.3,0.84 4.9,0.84 h 14.9 c 3.3,0 6.5,-1.18 9.8,-3.53 3.3,-2.42 5,-6.17 5,-11.26 V 44.55 c 0,-2.48 -0.4,-4.65 -1.3,-6.51 -0.9,-1.92 -2.1,-3.47 -3.7,-4.65 h 0.1 c -1.6,-1.05 -3.3,-1.92 -5,-2.6 -1.7,-0.68 -3.3,-1.02 -4.9,-1.02 z m 103.2,0 c -1.6,0 -3.3,0.34 -5,1.02 -1.7,0.68 -3.4,1.55 -4.9,2.6 h 0.1 c -1.7,1.18 -2.9,2.73 -3.8,4.65 -0.9,1.86 -1.3,4.03 -1.3,6.51 v 26.41 c 0,5.15 1.7,8.9 5.1,11.26 1.6,1.24 3.2,2.14 4.9,2.69 1.7,0.56 3.3,0.84 4.9,0.84 h 14.9 c 3.3,0 6.6,-1.18 9.9,-3.53 3.3,-2.42 5,-6.17 5,-11.26 V 44.55 c 0,-2.48 -0.4,-4.65 -1.3,-6.51 -0.9,-1.92 -2.1,-3.47 -3.7,-4.65 -1.6,-1.05 -3.3,-1.92 -5,-2.6 -1.7,-0.68 -3.3,-1.02 -4.9,-1.02 z m -101.5,8.74 h 11.5 c 2.3,0 3.9,0.65 4.8,1.95 1,1.24 1.5,2.64 1.5,4.19 v 26.22 c 0,1.49 -0.5,2.88 -1.5,4.19 -0.9,1.3 -2.5,1.95 -4.8,1.95 h -11.5 c -2.3,0 -4,-0.65 -5,-1.95 -0.9,-1.31 -1.4,-2.7 -1.4,-4.19 V 44.65 c 0,-1.55 0.5,-2.95 1.4,-4.19 1,-1.3 2.7,-1.95 5,-1.95 z m 103.2,0 h 11.5 c 2.3,0 4,0.65 4.9,1.95 0.9,1.24 1.4,2.64 1.4,4.19 v 26.22 c 0,1.49 -0.5,2.88 -1.4,4.19 -0.9,1.3 -2.6,1.95 -4.9,1.95 h -11.5 c -2.3,0 -3.9,-0.65 -4.9,-1.95 -0.9,-1.31 -1.4,-2.7 -1.4,-4.19 V 44.65 c 0,-1.55 0.5,-2.95 1.4,-4.19 1,-1.3 2.6,-1.95 4.9,-1.95 z');
	fill: var(--logoTexto);
}
#previa svg :is(#ctr, #ctrm){stroke: var(--logoBase);}
#previa svg :is(#sup, #infm){stroke: var(--logoSup);}
#previa svg :is(#supm, #inf){stroke: var(--logoInf);}
/*
#previa svg #ctr{transform: scale(.57);}
#previa svg #ctrm{transform: scale(.57) rotate(135deg);}
#previa svg :is(#sup, #supm){transform: scale(.41) translate(69px,-69px) rotate(90deg);}
#previa svg :is(#inf, #infm){transform: scale(.41) translate(-69px,69px) rotate(90deg);}
*/
/*
#previa svg path:is(#ctr, #ctrm, #sup, #infm, #supm, #inf){
	transition: transform 0.7s;
	animation: bollo 1.5s infinite;
}
*/
/*
#previa svg:hover path{transform: none !important;}
*/
/*
@keyframes bollo{40%,60%{transform: none !important;}}
*/
#previa svg #ctr{animation: bolloctr var(--tiempo) infinite;}
#previa svg #ctrm{animation: bolloctrm var(--tiempo) infinite;}
#previa svg :is(#sup, #supm){animation: bollosup var(--tiempo) infinite;}
#previa svg :is(#inf, #infm){animation: bolloinf var(--tiempo) infinite;}

@keyframes bolloctr{10%,90%{transform: scale(.57);}}
@keyframes bolloctrm{10%,90%{transform: scale(.57) rotate(135deg);}}
@keyframes bollosup{10%,90%{transform: scale(.41) translate(69px,-69px) rotate(90deg);}}
@keyframes bolloinf{10%,90%{transform: scale(.41) translate(-69px,69px) rotate(90deg);}}