/* ---------- pictogramas animados: una forma + un movimiento, para lugares chicos ---------- */
.picto { display: block; width: 48px; height: 48px; overflow: visible; flex: none; }
.picto .l, .picto .lr { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picto .lr { stroke: var(--rojo); stroke-width: 2.6; }
.picto .n { fill: currentColor; } .picto .r { fill: var(--rojo); }
.picto .raya { stroke-dasharray: 3 4; }
.picto [class*=" a"], .picto .a { transform-box: fill-box; transform-origin: center; animation: var(--p) calc(var(--d, 2.6s) * var(--k)) var(--c, cubic-bezier(.5, 0, .2, 1)) infinite; animation-play-state: paused; }
.picto g.a { transform-box: view-box; transform-origin: 24px 24px; }
.viva .picto [class*=" a"], .viva .picto .a, .abierta .picto [class*=" a"], .abierta .picto .a, .con-picto:hover .picto [class*=" a"], .con-picto:hover .picto .a { animation-play-state: running; }
.p-punto .a { --p: p-cae; --d: 2.2s; --c: linear; }
@keyframes p-cae { 0% { transform: translateY(-27px); } 34% { transform: translateY(0); animation-timing-function: ease-out; } 46% { transform: translateY(-7px); animation-timing-function: ease-in; } 58%, 100% { transform: translateY(0); } }
.p-grilla .a { --p: p-recorre; --d: 4s; }
@keyframes p-recorre { 0%, 17% { transform: translate(0, 0); } 25%, 42% { transform: translate(24px, 0); } 50%, 67% { transform: translate(24px, 24px); } 75%, 92% { transform: translate(0, 24px); } 100% { transform: translate(0, 0); } }
.p-onda .a1, .p-onda .a2 { --p: p-late; --d: 2.4s; --c: ease-out; } .p-onda .a2 { animation-delay: calc(-1.2s * var(--k)); }
@keyframes p-late { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }
.p-une .a1 { --p: p-une-a; --d: 3s; } .p-une .a2 { --p: p-une-b; --d: 3s; }
@keyframes p-une-a { 0%, 12% { transform: translateX(-8px); } 50%, 88% { transform: translateX(0); } 100% { transform: translateX(-8px); } }
@keyframes p-une-b { 0%, 12% { transform: translateX(8px); } 50%, 88% { transform: translateX(0); } 100% { transform: translateX(8px); } }
.p-abre .a1 { --p: p-abre-a; --d: 3.2s; } .p-abre .a2 { --p: p-abre-b; --d: 3.2s; } .p-abre .a3 { --p: p-aparece; --d: 3.2s; }
@keyframes p-abre-a { 0%, 15% { transform: translateX(3px); } 50%, 85% { transform: translateX(-6px); } 100% { transform: translateX(3px); } }
@keyframes p-abre-b { 0%, 15% { transform: translateX(-3px); } 50%, 85% { transform: translateX(6px); } 100% { transform: translateX(-3px); } }
@keyframes p-aparece { 0%, 28% { transform: scale(0); } 55%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.p-encaja .a { --p: p-encaja; --d: 3.2s; }
@keyframes p-encaja { 0%, 14% { transform: translateY(0) rotate(45deg); } 26% { transform: translateY(8px) rotate(45deg); } 36% { transform: translateY(0) rotate(45deg); } 58% { transform: translateY(0) rotate(0deg); } 76%, 100% { transform: translateY(20px) rotate(0deg); } }
.p-existe .a { --p: p-existe; --d: 3.4s; }
@keyframes p-existe { 0%, 22% { transform: scale(0); } 55%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
.p-forma .a1 { --p: p-forma-a; --d: 3.6s; } .p-forma .a2 { --p: p-forma-b; --d: 3.6s; }
@keyframes p-forma-a { 0%, 30% { opacity: 1; transform: scale(1); } 45%, 80% { opacity: 0; transform: scale(.86); } 95%, 100% { opacity: 1; transform: scale(1); } }
@keyframes p-forma-b { 0%, 30% { opacity: 0; transform: rotate(-45deg) scale(.8); } 45%, 80% { opacity: 1; transform: rotate(0deg) scale(1); } 95%, 100% { opacity: 0; transform: rotate(45deg) scale(.8); } }
.p-orbita .a { --p: p-gira; --d: 3.2s; --c: linear; }
@keyframes p-gira { to { transform: rotate(360deg); } }
.p-lluvia .a { --p: p-llueve; --d: .9s; --c: linear; }
@keyframes p-llueve { from { transform: translate(2px, -4px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-4px, 14px); opacity: 0; } }
.p-arma .a1 { --p: p-arma-1; } .p-arma .a2 { --p: p-arma-2; } .p-arma .a3 { --p: p-arma-3; } .p-arma .a4 { --p: p-arma-4; }
@keyframes p-arma-1 { 0%, 14% { transform: translate(-8px, -8px) rotate(-20deg); } 50%, 86% { transform: none; } 100% { transform: translate(-8px, -8px) rotate(-20deg); } }
@keyframes p-arma-2 { 0%, 14% { transform: translate(8px, -8px) rotate(25deg); } 50%, 86% { transform: none; } 100% { transform: translate(8px, -8px) rotate(25deg); } }
@keyframes p-arma-3 { 0%, 14% { transform: translate(-8px, 8px) rotate(15deg); } 50%, 86% { transform: none; } 100% { transform: translate(-8px, 8px) rotate(15deg); } }
@keyframes p-arma-4 { 0%, 14% { transform: translate(8px, 8px) rotate(-30deg); } 50%, 86% { transform: none; } 100% { transform: translate(8px, 8px) rotate(-30deg); } }
.p-rumbo .a { --p: p-avanza; --d: 2.6s; --c: linear; } .p-rumbo .a1 { --p: p-sube; --d: 1.3s; } .p-rumbo .a2 { --p: p-baja; --d: 1.3s; }
.p-rumbo g.a { transform-origin: 0 0; }
@keyframes p-avanza { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
@keyframes p-sube { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes p-baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.p-vuelve .a { --p: p-vuelta; --d: 3s; }
@keyframes p-vuelta { 0%, 10% { transform: rotate(0deg); } 80%, 100% { transform: rotate(360deg); } }
.p-senal .a1 { --p: p-s1; --d: 2.4s; --c: steps(1); } .p-senal .a2 { --p: p-s2; --d: 2.4s; --c: steps(1); } .p-senal .a3 { --p: p-s3; --d: 2.4s; --c: steps(1); }
@keyframes p-s1 { 0% { opacity: 0; } 15%, 100% { opacity: 1; } }
@keyframes p-s2 { 0%, 30% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes p-s3 { 0%, 52% { opacity: 0; } 56%, 100% { opacity: 1; } }
.p-varios .a1 { --p: p-v1; --d: 3.2s; --c: steps(1); } .p-varios .a2 { --p: p-v2; --d: 3.2s; --c: steps(1); } .p-varios .a3 { --p: p-v3; --d: 3.2s; --c: steps(1); }
@keyframes p-v1 { 0%, 100% { opacity: 1; } }
@keyframes p-v2 { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes p-v3 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.p-debajo .a { --p: p-corre; --d: 1s; --c: linear; stroke-dasharray: 4 6; }
@keyframes p-corre { to { stroke-dashoffset: -20; } }
.p-rol .a1 { --p: p-respira; --d: 3s; } .p-rol .a2 { --p: p-entra; --d: 3s; }
@keyframes p-respira { 0%, 40%, 100% { transform: scale(1); } 60% { transform: scale(1.08); } }
@keyframes p-entra { 0%, 12% { transform: translateX(-24px); } 50%, 88% { transform: translateX(0); } 100% { transform: translateX(-24px); } }
.p-ahora .a1 { --p: p-cuenta; --d: 3s; --c: linear; transform-origin: left center; } .p-ahora .a2 { --p: p-aire; --d: 3s; --c: steps(1); }
@keyframes p-cuenta { 0% { transform: scaleX(1); } 82%, 100% { transform: scaleX(0); } }
@keyframes p-aire { 0%, 81% { opacity: 0; } 82%, 88%, 94%, 100% { opacity: 1; } 85%, 91%, 97% { opacity: 0; } }
.p-ritmo [class*=" a"] { --p: p-barra; --d: 1.1s; --c: ease-in-out; transform-origin: center bottom; }
.p-ritmo .a2 { animation-delay: calc(-.25s * var(--k)); } .p-ritmo .a3 { animation-delay: calc(-.6s * var(--k)); } .p-ritmo .a4 { animation-delay: calc(-.4s * var(--k)); } .p-ritmo .a5 { animation-delay: calc(-.85s * var(--k)); }
@keyframes p-barra { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.p-detalle .a { --p: p-pulso; --d: 1.8s; }
@keyframes p-pulso { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(2); } }
.p-compara .a1 { --p: p-cambia-a; --d: 3.4s; } .p-compara .a2 { --p: p-cambia-b; --d: 3.4s; }
@keyframes p-cambia-a { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(20px); } 100% { transform: translateX(0); } }
@keyframes p-cambia-b { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(-20px); } 100% { transform: translateX(0); } }
.p-ambas .a1 { --p: p-junta-a; --d: 3.2s; } .p-ambas .a2 { --p: p-junta-b; --d: 3.2s; } .p-ambas .a3 { --p: p-aparece; --d: 3.2s; }
@keyframes p-junta-a { 0%, 15% { transform: translateX(-6px); } 45%, 85% { transform: translateX(0); } 100% { transform: translateX(-6px); } }
@keyframes p-junta-b { 0%, 15% { transform: translateX(6px); } 45%, 85% { transform: translateX(0); } 100% { transform: translateX(6px); } }
.p-mueve .a { --p: p-desliza; --d: 2.8s; }
@keyframes p-desliza { 0%, 15% { transform: translateX(0); } 60%, 85% { transform: translateX(22px); } 100% { transform: translateX(0); } }
.p-pantallas .a1 { --p: p-v2; --d: 3.2s; --c: steps(1); } .p-pantallas .a2 { --p: p-v3; --d: 3.2s; --c: steps(1); }
.p-fisico .a { --p: p-crece; --d: 3.2s; transform-origin: center bottom; }
@keyframes p-crece { 0%, 15% { transform: scaleY(0); } 55%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.p-modulos .a1 { --p: p-m1; --d: 3.6s; } .p-modulos .a2 { --p: p-m2; --d: 3.6s; } .p-modulos .a3 { --p: p-m3; --d: 3.6s; }
@keyframes p-m1 { 0%, 20%, 100% { transform: none; } 40%, 80% { transform: translateY(-11px); } }
@keyframes p-m2 { 0%, 30%, 100% { transform: none; } 50%, 80% { transform: translateY(11px); } }
@keyframes p-m3 { 0%, 40%, 100% { transform: none; } 60%, 80% { transform: translateX(-5px) translateY(-11px); } }
.p-atraviesa .a { --p: p-cruza; --d: 2.6s; --c: linear; } .p-atraviesa g.a { transform-origin: 0 0; }
@keyframes p-cruza { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
.p-guia .a1 { --p: p-sigue; --d: 2.8s; } .p-guia .a2 { --p: p-guia; --d: 2.8s; }
@keyframes p-guia { 0%, 10% { transform: translateX(-8px); } 45%, 100% { transform: translateX(9px); } }
@keyframes p-sigue { 0%, 30% { transform: translateX(-2px); } 75%, 100% { transform: translateX(10px); } }
.p-reserva .a { --p: p-corre-tapa; --d: 3.4s; }
@keyframes p-corre-tapa { 0%, 15% { transform: translateX(0); } 50%, 85% { transform: translateX(15px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .picto [class*=" a"], .picto .a { animation: none; } }