/* Dibujos de una sola línea animados en las tarjetas de categorías (portada de emovilstore.es, 27/9/2026).
   Dibujos originales generados con Canva, pasados a WebP con fondo transparente y teñidos del verde oscuro.
   El movimiento se hace por zonas: la misma imagen en capas con máscaras suaves (cabeza, manos) que se mueven
   sobre la base, más detalles de línea (notas, ondas, vapor, burbujas). */
/* .caja-in>div de la .es pone position:relative y max-width:50% a los div hijos: se anula para los dibujos */
.caja .caja-in>.lf{position:absolute;right:10px;bottom:0;height:62%;max-width:none;z-index:0;pointer-events:none;transition:transform .9s var(--curva)}
.caja:hover .caja-in>.lf{transform:translateY(-4px) scale(1.03)}
.lf-mueve{position:relative;height:100%}
.caja .lf img{position:static;display:block;height:100%;width:auto;max-width:none;aspect-ratio:auto;object-fit:fill;mix-blend-mode:normal;right:auto;bottom:auto;transition:none}
.caja:hover .lf img{transform:none}
.caja .lf .lf-capa{position:absolute;left:0;top:0;width:100%;height:100%}
.caja .caja-in>.lf{width:auto;aspect-ratio:var(--ar)}
.caja .caja-in>.lf-info{height:54%;right:6px}
.caja .caja-in>.lf-audio{height:66%}
.lf-extra{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#123d1f;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.lf-extra *{vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}

/* máscara: la capa sólo enseña su zona; la base la oculta con un fundido (sin doble línea) */
.lf-audio .lf-base{-webkit-mask:radial-gradient(ellipse 30% 24% at 45% 22%,transparent 55%,#000 100%);mask:radial-gradient(ellipse 30% 24% at 45% 22%,transparent 55%,#000 100%)}
.lf-audio .lf-cabeza{-webkit-mask:radial-gradient(ellipse 30% 24% at 45% 22%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 30% 24% at 45% 22%,#000 55%,transparent 100%);transform-origin:45% 42%;animation:lf-cabeceo .6s ease-in-out infinite alternate}
.lf-audio .lf-mueve{transform-origin:50% 100%;animation:lf-balanceo 1.2s ease-in-out infinite alternate}

/* Informática: teclea; cada 12 s se echa atrás con la silla, descansa (Zz) y vuelve.
   Capas: escritorio (derecha, fija) · persona = cuerpo + cabeza + manos (izquierda, se reclina junta) */
.lf-info .lf-escritorio{-webkit-mask:linear-gradient(to right,transparent 56%,#000 64%);mask:linear-gradient(to right,transparent 56%,#000 64%)}
.lf-info .lf-persona{position:absolute;inset:0;transform-origin:24% 96%;animation:lf-reclina 12s ease-in-out infinite}
.lf-info .lf-cuerpo{-webkit-mask:linear-gradient(to right,#000 56%,transparent 64%),radial-gradient(ellipse 13% 15% at 39% 14%,transparent 55%,#000 100%),radial-gradient(ellipse 12% 8% at 58% 51%,transparent 55%,#000 100%);-webkit-mask-composite:source-in;mask:linear-gradient(to right,#000 56%,transparent 64%),radial-gradient(ellipse 13% 15% at 39% 14%,transparent 55%,#000 100%),radial-gradient(ellipse 12% 8% at 58% 51%,transparent 55%,#000 100%);mask-composite:intersect}
.lf-info .lf-cabeza{-webkit-mask:radial-gradient(ellipse 13% 15% at 39% 14%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 13% 15% at 39% 14%,#000 55%,transparent 100%);transform-origin:40% 28%;animation:lf-asiente 2.6s ease-in-out infinite}
.lf-info .lf-manos{-webkit-mask:radial-gradient(ellipse 12% 8% at 58% 51%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 12% 8% at 58% 51%,#000 55%,transparent 100%);animation:lf-teclea .16s steps(2) infinite}
.lf-info .zz{opacity:0;animation:lf-zz 12s ease-in-out infinite}
@keyframes lf-reclina{0%,52%{transform:none}60%,82%{transform:translateX(-4%) rotate(-7deg)}90%,100%{transform:none}}
@keyframes lf-zz{0%,60%{opacity:0;transform:translateY(6px)}66%,80%{opacity:1;transform:translateY(0)}86%,100%{opacity:0;transform:translateY(-8px)}}

.lf-movil .lf-base{-webkit-mask:radial-gradient(ellipse 42% 9% at 48% 8%,transparent 55%,#000 100%);mask:radial-gradient(ellipse 42% 9% at 48% 8%,transparent 55%,#000 100%)}
.lf-movil .lf-cabeza{-webkit-mask:radial-gradient(ellipse 42% 9% at 48% 8%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 42% 9% at 48% 8%,#000 55%,transparent 100%);transform-origin:52% 16%;animation:lf-ladea 3s ease-in-out infinite}
.lf-movil .lf-mueve{transform-origin:50% 100%;animation:lf-peso 4s ease-in-out infinite}

/* detalles */
.nota{opacity:0;animation:lf-nota 2.4s ease-out infinite}.nota.n2{animation-delay:.8s}.nota.n3{animation-delay:1.6s}
.onda{opacity:0;animation:lf-onda 1.2s ease-out infinite}.onda.o2{animation-delay:.4s}
.vapor{opacity:0;animation:lf-vapor 2.8s ease-in-out infinite}.vapor.v2{animation-delay:1.4s}
.codigo{stroke:#80b820;animation:lf-flota 3s ease-in-out infinite}
.burbuja{opacity:0;animation:lf-burbuja 4.5s ease-out infinite}.burbuja.b2{animation-delay:1.5s;stroke:#80b820}.burbuja.b3{animation-delay:3s}

@keyframes lf-balanceo{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes lf-cabeceo{from{transform:rotate(-3deg)}to{transform:rotate(3deg) translateY(1px)}}
@keyframes lf-asiente{0%,100%{transform:rotate(0)}35%{transform:rotate(2.5deg)}60%{transform:rotate(-1deg)}}
@keyframes lf-teclea{0%{transform:translateY(0)}100%{transform:translateY(-1.5px)}}
@keyframes lf-ladea{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes lf-peso{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
@keyframes lf-nota{0%{opacity:0;transform:translate(0,4px) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(6px,-14px) rotate(14deg)}}
@keyframes lf-onda{0%{opacity:0;transform:translateX(-2px)}40%{opacity:1}100%{opacity:0;transform:translateX(3px)}}
@keyframes lf-vapor{0%{opacity:0;transform:translateY(3px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
@keyframes lf-flota{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
@keyframes lf-burbuja{0%{opacity:0;transform:translateY(6px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* Hogar: el robot aspirador va y viene; vapor del café; ondas del altavoz */
.lf-hogar .lf-base{-webkit-mask:radial-gradient(ellipse 14% 13% at 57% 89%,transparent 60%,#000 100%);mask:radial-gradient(ellipse 14% 13% at 57% 89%,transparent 60%,#000 100%)}
.lf-hogar .lf-robot{-webkit-mask:radial-gradient(ellipse 14% 13% at 57% 89%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 14% 13% at 57% 89%,#000 60%,transparent 100%);animation:lf-robot 5s ease-in-out infinite}
@keyframes lf-robot{0%,100%{transform:translateX(0)}25%{transform:translateX(5%)}50%{transform:translateX(0)}75%{transform:translateX(-4%)}}
.caja .caja-in>.lf-hogar{height:58%;right:0;bottom:0}
.caja-in>.enlace{position:relative;z-index:1}

/* Smartwatch (tarjeta oscura): línea clara; el corredor bota, el reloj late, líneas de velocidad */
.lf-reloj .lf-extra{stroke:#d6ecb4}
.lf-reloj .lf-mueve{animation:lf-zancada .38s ease-in-out infinite alternate}
.pulso{stroke:#9be33f;opacity:0;animation:lf-pulso 1.6s ease-out infinite}.pulso.p2{animation-delay:.8s}
.velocidad{stroke-dasharray:14 10;animation:lf-velocidad .6s linear infinite;opacity:.7}.velocidad.s2{animation-duration:.45s}.velocidad.s3{animation-duration:.7s}
.latido{stroke:#9be33f;stroke-dasharray:90;stroke-dashoffset:90;animation:lf-latido 1.6s ease-in-out infinite}
@keyframes lf-zancada{from{transform:translateY(0)}to{transform:translateY(-3%)}}
@keyframes lf-pulso{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
@keyframes lf-velocidad{to{stroke-dashoffset:-24}}
@keyframes lf-latido{0%{stroke-dashoffset:90}50%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-90}}
.caja .caja-in>.lf-reloj{height:74%;right:0;bottom:0}
.caja-in:has(>.lf-reloj)>.enlace,.caja-in:has(>.lf-hogar)>.enlace{display:none}

/* tamaños por tarjeta */
.caja-grande .caja-in>.lf-movil{height:92%;right:14%}
@media (max-width:560px){.caja .caja-in>.lf{height:52%}.caja .caja-in>.lf-info{height:46%}.caja-grande .caja-in>.lf-movil{height:96%;right:8%}}
@media (prefers-reduced-motion:reduce){.lf *{animation:none!important}.nota,.onda,.vapor,.burbuja,.pulso{opacity:.7}.latido{stroke-dashoffset:0}}
@media (max-width:560px){.caja .caja-in>.lf-hogar{height:40%;right:0}.caja .caja-in>.lf-reloj{height:44%;right:0}}
.caja-in>div:first-child{position:relative;z-index:1}