.vhs {
  --vhs-nube: #dceff7; --vhs-jean: #283650; --vhs-jean-sombra: #1f2a40; --vhs-pelo: #2b1d15; --vhs-pelo-luz: #7a5a44; --vhs-piso: #cbd5e1; --vhs-sol: #fdeec0; --vhs-colina: #d5efd9; --vhs-colina-atras: #e6f5df; --vhs-mancha: #ebe6fb; --vhs-punto: #f9d9e6; --vhs-arco-1: #fde6d8; --vhs-arco-2: #d9f2e8; --vhs-arco-3: #e1ecfb; --vhs-pildora: #fdf1cf; --vhs-circulo: #fde3ea; --vhs-menta: #dcf5ea;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .vhs { --vhs-nube: #24465a; --vhs-jean: #4a6592; --vhs-jean-sombra: #3b5278; --vhs-pelo: #3d2a1f; --vhs-pelo-luz: #86644d; --vhs-piso: #475569; --vhs-sol: #5b4a22; --vhs-colina: #23463a; --vhs-colina-atras: #1f3b33; --vhs-mancha: #352f55; --vhs-punto: #5a3347; --vhs-arco-1: #553a2e; --vhs-arco-2: #1f4a3d; --vhs-arco-3: #3a5a8a; --vhs-pildora: #4f4424; --vhs-circulo: #55303d; --vhs-menta: #1f4a3d; } }
:root[data-tema="oscuro"] .vhs { --vhs-nube: #24465a; --vhs-jean: #4a6592; --vhs-jean-sombra: #3b5278; --vhs-pelo: #3d2a1f; --vhs-pelo-luz: #86644d; --vhs-piso: #475569; --vhs-sol: #5b4a22; --vhs-colina: #23463a; --vhs-colina-atras: #1f3b33; --vhs-mancha: #352f55; --vhs-punto: #5a3347; --vhs-arco-1: #553a2e; --vhs-arco-2: #1f4a3d; --vhs-arco-3: #3a5a8a; --vhs-pildora: #4f4424; --vhs-circulo: #55303d; --vhs-menta: #1f4a3d; }

.vhs svg { flex: 0 0 auto; width: min(100%, 300px); height: auto; overflow: visible; }
.vhs figcaption { flex: 1 1 200px; min-width: 0; }
.vhs strong { display: block; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.vhs-feliz strong { color: var(--ok); }
.vhs-monto { font-weight: inherit; color: var(--alta); }
.vhs-feliz .vhs-monto { color: inherit; }
.vhs figcaption span { display: block; margin-top: 4px; font-size: .88rem; color: var(--muted); text-wrap: pretty; }
@media (max-width: 560px) { .vhs { justify-content: center; text-align: center; } }

.vhs-nube { fill: var(--vhs-nube); }
.vhs-sol { fill: var(--vhs-sol); }
.vhs-colina { fill: var(--vhs-colina); }
.vhs-colina-atras { fill: var(--vhs-colina-atras); }
.vhs-mancha { fill: var(--vhs-mancha); }
.vhs-punto { fill: var(--vhs-punto); }
.vhs-arco-1 { fill: var(--vhs-arco-1); }
.vhs-arco-2 { fill: var(--vhs-arco-2); }
.vhs-arco-3 { fill: var(--vhs-arco-3); }
.vhs-pildora { fill: var(--vhs-pildora); }
.vhs-circulo { fill: var(--vhs-circulo); }
.vhs-menta { fill: var(--vhs-menta); }
.vhs-cal-cab { fill: #0b5fff; }
.vhs-anilla { fill: #64748b; }
.vhs-dia { fill: #e2e8f0; }
.vhs-dia-num { fill: #fff; font: 800 10px system-ui, sans-serif; }
.vhs-sombra { fill: #0f172a; opacity: .13; }
.vhs-via { fill: #64748b; }
.vhs-carril { stroke: #f8fafc; stroke-width: 1.2; stroke-dasharray: 9 7; }
.vhs-pasto { fill: #6dbe5c; }
.vhs-piso { fill: var(--vhs-piso); }

.vhs-carro { fill: #0b5fff; }
.vhs-carro-luz { fill: #3b82f6; }
.vhs-carro-sombra, .vhs-linea-f, .vhs-paragolpe { fill: #0846c2; }
.vhs-arco { fill: #06338f; }
.vhs-linea { stroke: #0846c2; stroke-width: 1.4; }
.vhs-vidrio { fill: #dbe8ff; }
.vhs-reflejo { fill: none; stroke: #fff; stroke-opacity: .8; stroke-width: 3; stroke-linecap: round; }
.vhs-llanta { fill: #1e293b; }
.vhs-rin { fill: #e2e8f0; }
.vhs-rayo { fill: none; stroke: #94a3b8; stroke-width: 1.3; stroke-linecap: round; }
.vhs-maza { fill: #64748b; }

.vhs-pared { fill: #f3e2c4; }
.vhs-pared-sombra { fill: #e3caa2; }
.vhs-techo { fill: #c2410c; }
.vhs-techo-luz { fill: #ea580c; opacity: .55; }
.vhs-chimenea { fill: #9a3412; }
.vhs-puerta { fill: #7c4a2a; }
.vhs-ventana { fill: #dbeafe; }
.vhs-marco { fill: none; stroke: #fff; stroke-width: 1.6; }
.vhs-arbusto { fill: #4ea35a; }

.vhs-hoja { fill: #fff; stroke: #cbd5e1; stroke-width: 1.2; }
.vhs-hoja-cab { fill: #0b5fff; }
.vhs-pinza { fill: #64748b; }
.vhs-atril { fill: none; stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; }
.vhs-renglon { fill: #e2e8f0; }
.vhs-ok-fondo { fill: #22c55e; }
.vhs-ok-marca { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vhs-alerta-fondo { fill: #ef4444; }
.vhs-pendiente-fondo { fill: #f59e0b; }

.vhs-calc { fill: #334155; }
.vhs-calc-luz { fill: #475569; }
.vhs-pantalla-ok { fill: #dcfce7; }
.vhs-pantalla-mal { fill: #fee2e2; }
.vhs-calc-texto { font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.vhs-texto-ok { fill: #166534; }
.vhs-texto-mal { fill: #b91c1c; }
.vhs-tecla { fill: #f1f5f9; }
.vhs-tecla-op { fill: #94a3b8; }
.vhs-tecla-igual { fill: #f59e0b; }

.vhs-caja { fill: #d9a066; }
.vhs-caja-sombra { fill: #c08550; }
.vhs-cinta { fill: #f2d3a2; }
.vhs-etiqueta { fill: #fff; }
.vhs-etiqueta-linea { fill: none; stroke: #cbd5e1; stroke-width: 1.6; stroke-linecap: round; }

.vhs-piel { fill: #f4d0b5; }
.vhs-piel-sombra { fill: #e8b898; }
.vhs-nariz, .vhs-nudillo { fill: none; stroke: #c98f6c; stroke-width: 1; stroke-linecap: round; }
.vhs-nudillo { stroke-width: .7; }
.vhs-una { fill: #fbe6d8; }
.vhs-fosa { fill: #b97c5c; opacity: .7; }
.vhs-pelo { fill: var(--vhs-pelo); }
.vhs-pelo-luz { fill: none; stroke: var(--vhs-pelo-luz); stroke-width: 1; stroke-opacity: .5; stroke-linecap: round; }
.vhs-hebra { stroke-width: .7; stroke-opacity: .45; }
.vhs-ceja { fill: var(--vhs-pelo); }
.vhs-pelo-sombra { fill: #000; opacity: .28; }
.vhs-parpado { fill: none; stroke: #20140d; stroke-width: 1.1; stroke-linecap: round; }
.vhs-oreja { fill: none; stroke: #c98f6c; stroke-width: .8; stroke-linecap: round; }
.vhs-barba { fill: #6b4a35; opacity: .1; }
.vhs-arete, .vhs-collar { fill: #d4a017; }
.vhs-cadena { fill: none; stroke: #d4a017; stroke-width: .7; }
.vhs-esfero { fill: #0b5fff; }
.vhs-esfero-tapa { fill: #e2e8f0; }
.vhs-lengua { fill: #c2585a; }
.vhs-ojo-blanco { fill: #fff; }
.vhs-iris { fill: #5b3a22; }
.vhs-ojo { fill: #111827; }
.vhs-mejilla { fill: #f08c7d; opacity: .38; }
.vhs-boca { fill: #6b2424; }
.vhs-boca-triste { fill: none; stroke: #6b2424; stroke-width: 1.7; stroke-linecap: round; }
.vhs-boca.vhs-labios { fill: #8f2f3b; }
.vhs-boca-triste.vhs-labios { stroke: #8f2f3b; stroke-width: 2; }
.vhs-ropa { fill: var(--vhs-camisa, #e8a33d); }
.vhs-ropa-sombra { fill: var(--vhs-camisa-sombra, #cc8a2c); }
.vhs-ropa-pliegue { fill: none; stroke: var(--vhs-camisa-sombra, #cc8a2c); stroke-width: 1; }
.vhs-boton { fill: #f8fafc; }
.vhs-cinturon { fill: #5b3a24; }
.vhs-hebilla { fill: #d4a017; }
.vhs-jean { fill: var(--vhs-jean); }
.vhs-jean-sombra { fill: var(--vhs-jean-sombra); }
.vhs-zapato { fill: #fff; stroke: #8aa0b8; stroke-width: 1.2; }
.vhs-suela { fill: none; stroke: #cbd5e1; stroke-width: 1.4; }
.vhs-cordon { fill: none; stroke: #cbd5e1; stroke-width: .8; stroke-linecap: round; }
.vhs-costura { fill: none; stroke: var(--vhs-jean-sombra); stroke-width: .8; stroke-linecap: round; }
.vhs-lagrima { fill: #60a5fa; }

.vhs-brazo-ok, .vhs-cabeza { transform-box: view-box; }
.vhs-brazo-ok { transform-origin: 77.5px 58px; }
.vhs-cabeza { transform-origin: 62px 52px; }
.vhs-check, .vhs-brillo, .vhs-recibo, .vhs-lagrima { transform-box: fill-box; transform-origin: center; }
.vhs-triste .vhs-persona { transform: translateY(2px); }
.vhs-triste .vhs-cabeza { transform: rotate(5deg); }
.vhs-triste .vhs-lagrima { transform: translateY(3px); }
.vhs-triste .vhs-recibo { transform: translateY(-3px) rotate(-2deg); }

@media (prefers-reduced-motion: no-preference) {
  .vhs-feliz .vhs-persona { animation: vhs-sube 420ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  .vhs-feliz .vhs-brazo-ok { animation: vhs-pulgar 560ms cubic-bezier(0.23, 1, 0.32, 1) 140ms both; }
  .vhs-feliz .vhs-auto { animation: vhs-salto 420ms cubic-bezier(0.77, 0, 0.175, 1) 260ms both; }
  .vhs-feliz .vhs-check { animation: vhs-aparece 360ms cubic-bezier(0.23, 1, 0.32, 1) 420ms both; }
  .vhs-feliz .vhs-brillo { animation: vhs-aparece 320ms cubic-bezier(0.23, 1, 0.32, 1) calc(520ms + var(--i, 0) * 80ms) both; }

  .vhs-triste :is(.vhs-persona, .vhs-cabeza, .vhs-lagrima, .vhs-recibo) { animation-duration: 1500ms; animation-timing-function: steps(1, end); animation-fill-mode: both; }
  .vhs-triste .vhs-persona { animation-name: vhs-cae-peso; }
  .vhs-triste .vhs-cabeza { animation-name: vhs-agacha; }
  .vhs-triste .vhs-lagrima { animation-name: vhs-llora; }
  .vhs-triste .vhs-recibo { animation-name: vhs-ofrece; }

  .vhs:not(.vhs-on) * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .vhs svg { animation: vhs-funde 200ms ease both; } }
.vhs-quieta, .vhs-quieta * { animation: none !important; }

@keyframes vhs-sube { from { opacity: 0; transform: translateY(8px); } }
@keyframes vhs-pulgar { from { transform: rotate(55deg); } }
@keyframes vhs-salto { 0%, 100% { transform: none; } 45% { transform: translateY(-4px); } }
@keyframes vhs-aparece { from { opacity: 0; transform: scale(.6); } }
@keyframes vhs-cae-peso { 0%, 10% { transform: none; } 20% { transform: translateY(4px); } 67%, 100% { transform: translateY(2px); } }
@keyframes vhs-agacha { 0% { transform: none; } 10% { transform: rotate(-3deg); } 20% { transform: rotate(10deg); } 67%, 100% { transform: rotate(5deg); } }
@keyframes vhs-llora { 0%, 33% { opacity: 0; transform: translateY(-1px); } 40% { opacity: 1; transform: none; } 47% { opacity: 1; transform: translateY(1.5px); } 54%, 100% { opacity: 1; transform: translateY(3px); } }
@keyframes vhs-ofrece { 0%, 60% { transform: none; } 67%, 100% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes vhs-funde { from { opacity: 0; } }