/* SparkEd · sistema de diseño de la fase 2
   Paletas por materia (criterios sección 7), colores semánticos fijos, tipografías y piezas comunes.
   Una paleta se activa con data-paleta="historia_azul" en <html> o en cualquier contenedor. */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Press+Start+2P&display=swap");

:root {
  /* identidad SparkEd */
  --amarillo: #FFD400;
  --tinta: #121826;
  --marino: #0b1f4b;
  /* dirección de arte "Synthwave Suave" (6 nov 2026): atardecer violeta a coral */
  --sw-noche: #1B1340; --sw-violeta: #4C1D95; --sw-coral: #B8336A;
  --violeta: #6d28d9; --rosa: #FF6B9D; --durazno: #FFB347;
  --degradado-sw: linear-gradient(172deg, #1B1340 0%, #4C1D95 52%, #B8336A 100%);
  --degradado-calido: linear-gradient(90deg, #FFB347, #FF6B9D);
  /* semánticos: siempre iguales */
  --ok: #16a34a; --ok-suave: #dcfce7; --ok-borde: #22c55e;
  --mal: #dc2626; --mal-suave: #fee2e2; --mal-borde: #ef4444;
  --oro: #f59e0b; --oro-suave: #fff7e0; --oro-borde: #f5b800;
  --cielo: #0ea5e9;
  --gris: #6b7280; --gris-suave: #f3f4f6; --borde: #e5e7eb;
  /* paleta por defecto (historia) */
  --p: #1d4ed8; --p2: #1e40af; --p-suave: #e8efff; --p-texto: #0b2a8a;
  --b1: #1d4ed8; --b2: #c2410c; --b3: #0f766e; --b4: #b91c1c;
  --fondo: #f6f8fc; --fondo-oscuro: #0d1b3d; --acento: #38bdf8;
  /* tipografía */
  --titulos: "Outfit", "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --pixel: "Press Start 2P", monospace;
  --radio: 18px;
  --sombra: 0 8px 22px rgba(20, 30, 60, .12);
}
[data-paleta="historia_azul"] { --p:#1d4ed8; --p2:#1e40af; --p-suave:#e8efff; --p-texto:#0b2a8a; --b1:#1d4ed8; --b2:#c2410c; --b3:#b91c1c; --b4:#4d7c0f; --b5:#0f766e; --fondo:#f6f8fc; --fondo-oscuro:#0d1b3d; --acento:#38bdf8; }
[data-paleta="espanol_rojo"]  { --p:#c62828; --p2:#7f1d1d; --p-suave:#ffe9e9; --p-texto:#7f1d1d; --b1:#c62828; --b2:#ea580c; --b3:#7f1d1d; --b4:#e11d48; --b5:#0f766e; --fondo:#fff7f3; --fondo-oscuro:#3b0a0a; --acento:#fb7185; }
[data-paleta="mate_naranja"]  { --p:#ea580c; --p2:#9a3412; --p-suave:#ffeedd; --p-texto:#7c2d12; --b1:#ea580c; --b2:#1d4ed8; --b3:#0f766e; --b4:#7c3aed; --b5:#b91c1c; --fondo:#fff8f1; --fondo-oscuro:#3b1a05; --acento:#fdba74; }
[data-paleta="ciencias_verde"]{ --p:#15803d; --p2:#14532d; --p-suave:#e3f7e9; --p-texto:#14532d; --b1:#15803d; --b2:#0e7490; --b3:#ca8a04; --b4:#7c3aed; --b5:#b91c1c; --fondo:#f3fbf5; --fondo-oscuro:#052e16; --acento:#4ade80; }
[data-paleta="frances_cielo"] { --p:#0ea5e9; --p2:#0369a1; --p-suave:#e0f4ff; --p-texto:#0c4a6e; --b1:#0ea5e9; --b2:#0369a1; --b3:#7c3aed; --b4:#e11d48; --b5:#0f766e; --fondo:#eef8ff; --fondo-oscuro:#082f49; --acento:#7dd3fc; }
[data-paleta="civica_morado"] { --p:#6d28d9; --p2:#4c1d95; --p-suave:#efe9ff; --p-texto:#3b1a8a; --b1:#6d28d9; --b2:#a21caf; --b3:#4338ca; --b4:#0e7490; --b5:#b45309; --fondo:#f7f5ff; --fondo-oscuro:#1e1538; --acento:#c4b5fd; }
[data-paleta="ingles_mostaza"]{ --p:#b45309; --p2:#78350f; --p-suave:#fff1d6; --p-texto:#78350f; --b1:#b45309; --b2:#0f766e; --b3:#3730a3; --b4:#d97706; --b5:#7c3aed; --fondo:#fffaf0; --fondo-oscuro:#2a1a05; --acento:#fbbf24; }
[data-paleta="geo_turquesa"]  { --p:#0f766e; --p2:#134e4a; --p-suave:#dff5f2; --p-texto:#134e4a; --b1:#0f766e; --b2:#ea580c; --b3:#1d4ed8; --b4:#7c3aed; --b5:#b91c1c; --fondo:#f0fbfa; --fondo-oscuro:#042f2e; --acento:#5eead4; }
[data-paleta="otra"]          { --p:#334155; --p2:#1e293b; --p-suave:#e8edf5; --p-texto:#1e293b; --b1:#334155; --b2:#0f766e; --b3:#b45309; --b4:#7c3aed; --b5:#b91c1c; --fondo:#f6f7fb; --fondo-oscuro:#0f172a; --acento:#94a3b8; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 18px/1.45 var(--texto); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .titulo { font-family: var(--titulos); font-weight: 800; letter-spacing: -.3px; line-height: 1.08; margin: 0; }
b, strong { font-weight: 700; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
.pixel, .px { image-rendering: pixelated; image-rendering: crisp-edges; shape-rendering: crispEdges; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; } /* gana sobre los display:flex de los paneles */

/* Piezas comunes */
.pildora { display: inline-block; font: 800 12px/1 var(--texto); letter-spacing: .8px; text-transform: uppercase; color: #fff; background: var(--p); padding: 7px 12px; border-radius: 8px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 18px var(--titulos); padding: 14px 22px; border-radius: 14px; background: var(--amarillo); color: var(--tinta); box-shadow: 0 14px 30px rgba(255, 179, 71, .35); min-height: 52px; transition: transform .12s, box-shadow .12s; text-decoration: none; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(255, 179, 71, .45); }
.boton.vidrio { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.boton.vidrio:hover { background: rgba(255,255,255,.22); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.boton.oscuro { background: var(--tinta); color: #fff; box-shadow: 0 8px 18px rgba(18, 24, 38, .25); }
.boton.oscuro span { color: var(--amarillo); }
.boton.p { background: var(--p); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.boton.linea { background: #fff; color: var(--tinta); border: 2px solid var(--borde); box-shadow: none; }
.boton.chico { font-size: 15px; padding: 9px 14px; min-height: 40px; }
.tarjeta { background: #fff; border-radius: 20px; box-shadow: var(--sombra); padding: 18px 20px; }
.tarjeta.borde-arriba { border-top: 6px solid var(--p); }
.caja-ej { background: var(--oro-suave); border-left: 5px solid var(--oro); border-radius: 10px; padding: 8px 12px; font-size: 16px; }
.caja-corregido { background: var(--ok-suave); border: 2px solid var(--ok-borde); border-radius: 12px; padding: 8px 12px; font-size: 16px; }
.caja-clave { background: var(--oro-suave); border: 2px solid var(--oro-borde); border-radius: 14px; padding: 10px 14px; }
.banda { background: var(--marino); color: #fff; border-radius: 14px; padding: 12px 18px; font-size: 17px; }
.banda b { color: var(--amarillo); }
.chip { display: inline-block; background: #fff; border: 2px solid var(--cielo); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 15px; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 8px; font: 800 20px var(--titulos); color: var(--tinta); text-decoration: none; }
.marca .rayo { width: 16px; height: 26px; }
.marca span { color: var(--amarillo); }
.marca.clara { color: #fff; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 700; font-size: 15px; }
.campo input, .campo select, .campo textarea { font: inherit; padding: 12px 14px; border: 2px solid var(--borde); border-radius: 12px; background: #fff; color: var(--tinta); min-height: 48px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 4px var(--p-suave); }
.ayuda { font-size: 14px; color: var(--gris); }
.error { color: var(--mal); font-weight: 700; }

/* Pantalla CRT ligera para los juegos retro */
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.hud { font: 12px/1.6 var(--pixel); letter-spacing: .5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Ojos LED de Sparky: parpadean de vez en cuando (el grupo se aplasta y vuelve) */
.vec .led-ojo { transform-box: fill-box; transform-origin: center; animation: pestaneo 4.6s ease-in-out infinite; }
@keyframes pestaneo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .vec .led-ojo { animation: none; } }

/* ---------- Sparky vivo (7 nov 2026) ----------
   Las piezas de Sparky se mueven solo dentro de .sk-anima (la ponen sparkyVivo() de ui.js y la hoja de personaje);
   en el resto del sitio las poses quedan fijas. Cada pieza que gira trae en el dibujo un cuadro invisible centrado en
   su eje (hombro, muñeca), por eso "fill-box + center" gira justo ahí. Las medidas en px son unidades del dibujo
   (Sparky mide 16 × 20). Con "reducir movimiento" la regla de arriba deja todo en su pose fija. */
.vec .sk-giro, .vec .sk-centro, .vec .sk-sombra { transform-box: fill-box; transform-origin: center; }
.vec .sk-pie, .vec .sk-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; }
.vec .sk-arriba { transform-box: fill-box; transform-origin: 50% 0; }

/* Reposo: flota suave (la sombra se encoge cuando sube) y de vez en cuando mira a un lado y al otro. */
.sk-anima .pose-quieto .sk-cuerpo, .sk-anima .pose-saludo .sk-cuerpo, .sk-anima .pose-escribiendo .sk-cuerpo { animation: sk-flotar 3.2s ease-in-out infinite; }
.sk-anima .pose-quieto .sk-sombra, .sk-anima .pose-saludo .sk-sombra, .sk-anima .pose-escribiendo .sk-sombra { animation: sk-sombra 3.2s ease-in-out infinite; }
.sk-anima .pose-quieto .sk-cara { animation: sk-mirar 9s ease-in-out infinite; }
@keyframes sk-flotar { 50% { transform: translateY(-.5px); } }
@keyframes sk-sombra { 50% { transform: scaleX(.86); opacity: .75; } }
@keyframes sk-mirar { 0%, 52%, 96%, 100% { transform: translateX(0); } 57%, 66% { transform: translateX(-.45px); } 73%, 86% { transform: translateX(.45px); } }

/* Saludo: la mano se mueve de un lado a otro. Festejo: brazos arriba que se agitan y chispas que titilan. */
.sk-anima .pose-saludo .sk-mano { animation: sk-saludar 1.05s ease-in-out infinite; }
@keyframes sk-saludar { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(16deg); } 70% { transform: rotate(-10deg); } }
.sk-anima .pose-festejo .sk-fiesta-a { animation: sk-fiesta .45s ease-in-out infinite alternate; }
.sk-anima .pose-festejo .sk-fiesta-b { animation: sk-fiesta .45s ease-in-out infinite alternate-reverse; }
.sk-anima .pose-festejo .sk-destello { animation: sk-titilar .55s ease-in-out infinite alternate; }
@keyframes sk-fiesta { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes sk-titilar { from { transform: scale(.6); opacity: .65; } to { transform: scale(1.15) rotate(20deg); opacity: 1; } }

/* Caminando: el cuerpo se bambolea, las piernas se levantan por turnos y los brazos acompañan. */
.sk-anima .pose-caminando .sk-cuerpo { animation: sk-bambolear .64s ease-in-out infinite; }
.sk-anima .pose-caminando .sk-pierna-b { animation: sk-paso .64s ease-in-out infinite; }
.sk-anima .pose-caminando .sk-pierna-a { animation: sk-paso .64s ease-in-out -.32s infinite; }
.sk-anima .pose-caminando .sk-braceo { animation: sk-bracear .64s ease-in-out infinite; }
@keyframes sk-bambolear { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-.35px) rotate(-3deg); } 75% { transform: translateY(-.35px) rotate(3deg); } }
@keyframes sk-paso { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-.9px); } }
@keyframes sk-bracear { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(13deg); } 75% { transform: rotate(-13deg); } }

/* Construyendo (2.4 s, dos martillazos): sube el martillo, pega en el bloque, rebota; chispitas y el bloque se aplasta. */
.sk-anima .pose-construyendo .sk-martillo { animation: sk-martillar 2.4s infinite; }
.sk-anima .pose-construyendo .sk-golpeado { animation: sk-golpeado 2.4s infinite; }
.sk-anima .pose-construyendo .sk-chispa { animation: sk-chispa 2.4s ease-out infinite; }
.sk-anima .pose-construyendo .sk-chispa-3, .sk-anima .pose-construyendo .sk-chispa-4 { animation-delay: .05s; }
.sk-anima .pose-construyendo .sk-cuerpo { animation: sk-empuje 2.4s infinite; }
@keyframes sk-martillar {
  0% { transform: rotate(0); animation-timing-function: ease-in-out; }
  16% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
  26% { transform: rotate(78deg); animation-timing-function: ease-out; }
  30% { transform: rotate(66deg); animation-timing-function: ease-in-out; }
  34% { transform: rotate(77deg); animation-timing-function: ease-in-out; }
  50% { transform: rotate(4deg); animation-timing-function: ease-in-out; }
  64% { transform: rotate(-6deg); animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
  74% { transform: rotate(78deg); animation-timing-function: ease-out; }
  78% { transform: rotate(67deg); animation-timing-function: ease-in-out; }
  82% { transform: rotate(77deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}
@keyframes sk-golpeado { 0%, 25.5%, 33%, 73.5%, 81%, 100% { transform: scale(1, 1); } 27%, 75% { transform: scale(1.07, .84); } }
@keyframes sk-chispa {
  0%, 25.5%, 73.5%, 100% { opacity: 0; transform: scale(.2); }
  27.5%, 75.5% { opacity: 1; transform: scale(1.2); }
  38%, 86% { opacity: 0; transform: scale(.75) translateY(-.6px); }
}
@keyframes sk-empuje { 0%, 24%, 34%, 72%, 82%, 100% { transform: translateY(0); } 27%, 75% { transform: translateY(.22px); } }

/* Escribiendo (3.3 s): la mano recorre cada renglón mientras aparece, el lápiz garabatea y al final empieza otra hoja.
   Las distancias llevan la punta del lápiz (7.73, 15.07) al inicio y al final de cada renglón de la tabla. */
.sk-anima .pose-escribiendo .sk-escritura { animation: sk-escritura 3.3s linear infinite; }
.sk-anima .pose-escribiendo .sk-garabato { animation: sk-garabato .22s ease-in-out infinite alternate; }
.sk-anima .pose-escribiendo .sk-linea { stroke-dasharray: 1; animation: sk-linea1 3.3s linear infinite; }
.sk-anima .pose-escribiendo .sk-linea-2 { animation-name: sk-linea2; }
.sk-anima .pose-escribiendo .sk-linea-3 { animation-name: sk-linea3; }
@keyframes sk-escritura {
  0% { transform: translate(-1.43px, -1.42px); } 30% { transform: translate(1.81px, -1.42px); }
  33.3% { transform: translate(-1.43px, -.72px); } 63.3% { transform: translate(1.81px, -.72px); }
  66.6% { transform: translate(-1.43px, -.02px); } 86% { transform: translate(.73px, -.02px); }
  95% { transform: translate(.73px, -.02px); } 100% { transform: translate(-1.43px, -1.42px); }
}
@keyframes sk-garabato { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes sk-linea1 { 0% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-linea2 { 0%, 33.3% { stroke-dashoffset: 1; } 63.3%, 100% { stroke-dashoffset: 0; } }
@keyframes sk-linea3 { 0%, 66.6% { stroke-dashoffset: 1; } 86%, 100% { stroke-dashoffset: 0; } }

/* Jetpack (Daniel, 7 nov 2026): las llamas titilan; en el aire flota más rápido, los brazos se mecen como alas y las
   piernas patalean. Arreglando: la llave aprieta de un lado a otro y saltan chispitas en su boca. */
.sk-anima .sk-llama { animation: sk-llama .13s ease-in-out infinite alternate; }
.sk-anima .sk-llama-b { animation-delay: -.07s; }
@keyframes sk-llama { from { transform: scale(.9, .78); opacity: .85; } to { transform: scale(1.06, 1.12); opacity: 1; } }
.sk-anima .pose-volando .sk-cuerpo, .sk-anima .pose-arreglando .sk-cuerpo { animation: sk-flotar 1.1s ease-in-out infinite; }
.sk-anima .pose-volando .sk-ala-a, .sk-anima .pose-arreglando .sk-ala-a { animation: sk-ala .5s ease-in-out infinite alternate; }
.sk-anima .pose-volando .sk-ala-b { animation: sk-ala .5s ease-in-out infinite alternate-reverse; }
@keyframes sk-ala { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.sk-anima .pose-volando .sk-pierna-a, .sk-anima .pose-arreglando .sk-pierna-a { animation: sk-patalear .36s ease-in-out infinite alternate; }
.sk-anima .pose-volando .sk-pierna-b, .sk-anima .pose-arreglando .sk-pierna-b { animation: sk-patalear .36s ease-in-out -.18s infinite alternate; }
@keyframes sk-patalear { from { transform: translateY(-.15px) rotate(-5deg); } to { transform: translateY(.1px) rotate(5deg); } }
.sk-anima .pose-arreglando .sk-llave { animation: sk-llave .34s ease-in-out infinite alternate; }
@keyframes sk-llave { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
.sk-anima .pose-arreglando .sk-chispa-llave { animation: sk-chispa-llave .68s ease-out infinite; }
.sk-anima .pose-arreglando .sk-chispa-llave-2 { animation-delay: .34s; }
.sk-anima .pose-arreglando .sk-chispa-llave-3 { animation-delay: .17s; }
@keyframes sk-chispa-llave { 0%, 100% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(1.2); } 45% { opacity: 0; transform: scale(.8) translateY(-.5px); } }

/* Caras para cuando lo tocan: se ríe a carcajadas (rebota) o se enamora (suben corazoncitos). */
.sk-anima .pose-riendo .sk-cuerpo { animation: sk-reir .15s ease-in-out infinite alternate; }
@keyframes sk-reir { to { transform: translateY(-.3px); } }
.sk-anima .pose-enamorado .sk-cuerpo { animation: sk-flotar 1.6s ease-in-out infinite; }
.sk-anima .pose-enamorado .sk-corazoncito { animation: sk-corazoncito 1.5s ease-out infinite; }
.sk-anima .pose-enamorado .sk-corazoncito-2 { animation-delay: .6s; }
@keyframes sk-corazoncito { 0% { opacity: 0; transform: translateY(1px) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.4px) scale(1.15); } }
.sk-anima .pose-sorprendido .sk-cuerpo { animation: sk-susto .35s ease-out; }
@keyframes sk-susto { 30% { transform: translateY(-.6px) scale(1.03, .97); } }

/* Contenedor de sparkyVivo(): la pista se desliza cuando camina, "vuelo" lo sube con el jetpack (la sombra del piso se
   queda abajo y se achica), el actor hace las reacciones al tocarlo y el dibujo se voltea. */
.sparky-vivo { display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.sparky-vivo.en-vuelo { position: relative; z-index: 2; }
.sparky-vivo .sk-pista { position: relative; }
.sparky-vivo .sk-vuelo { transform-origin: 50% 55%; }
.sparky-vivo .sk-piso { position: absolute; left: 16%; width: 68%; bottom: .5%; height: 6%; border-radius: 50%; background: rgba(42, 35, 64, .22); opacity: 0; pointer-events: none; }
.sparky-vivo .sk-actor { position: relative; transform-origin: 50% 100%; }
.sparky-vivo .sk-dibujo svg { transition: transform .22s ease; }
.sparky-vivo .sk-toque { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sparky-vivo .sk-actor.izquierda svg { transform: scaleX(-1); }
.sparky-vivo .sk-actor.brinca { animation: sk-brinco .55s cubic-bezier(.3, .7, .4, 1) 2; }
@keyframes sk-brinco { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-14%) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1.04, .96); } }
.sparky-vivo .sk-actor.gira { animation: sk-gira .8s ease-in-out; }
@keyframes sk-gira { 0%, 100% { transform: scaleX(1) translateY(0); } 25%, 75% { transform: scaleX(.06) translateY(-7%); } 50% { transform: scaleX(-1) translateY(-11%); } }
.sparky-vivo .sk-actor.rie { animation: sk-rie .14s ease-in-out 9 alternate; }
@keyframes sk-rie { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.sparky-vivo .sk-actor.baila { animation: sk-baila .44s ease-in-out 4; }
@keyframes sk-baila { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-7%, -4%) rotate(-7deg); } 75% { transform: translate(7%, -4%) rotate(7deg); } }
/* Texto que Sparky va escribiendo letra por letra (con cursor mientras escribe). Cuando se "traba", la burbuja tiembla,
   las letras se desfasan y aparecen símbolos raros; mientras Sparky la arregla, da saltitos con cada apretón. */
.tecleo.activo::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; border-radius: 1px; background: currentColor; animation: sk-cursor .8s steps(1) infinite; }
@keyframes sk-cursor { 50% { opacity: 0; } }
.tecleo .basura { color: #be185d; }
.sk-trabado { animation: sk-temblor .16s steps(2) infinite; }
.sk-trabado .tecleo { text-shadow: 1.5px 0 rgba(255, 43, 214, .5), -1.5px 0 rgba(0, 200, 255, .5); }
@keyframes sk-temblor { 0% { transform: translate(0, 0); } 50% { transform: translate(-1.5px, .5px); } 100% { transform: translate(1px, -.5px); } }
.sk-reparando { animation: sk-golpecitos .34s ease-in-out infinite; }
@keyframes sk-golpecitos { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2px) rotate(-.4deg); } }