/* ══════════════════════════════════════════════════════════════
   ÍCONOS ANIMADOS — Rosario Reclama
   Cada ícono es una escenita de 12 segundos que se repite (--ciclo).
   --d desfasa cada tarjeta para que no hagan todo al mismo tiempo.
   Solo se animan posición, giro, escala y transparencia: es lo que los
   celulares mueven sin trabarse.
══════════════════════════════════════════════════════════════ */

.ico { --ciclo: 12s; width: 100%; height: 100%; overflow: visible; }
.ico.recorta { overflow: hidden; border-radius: 12px; }
.ico * { transform-box: view-box; }
.ico .sombra { fill: rgba(30, 20, 51, .14); }

/* ── Basura: se llena, se desborda, olor y moscas ─────────────── */
.i-basura .tapa { transform-origin: 14px 20px; animation: b-tapa var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes b-tapa {
  0% { transform: none; } 3% { transform: rotate(-42deg); } 11% { transform: rotate(-42deg); } 14% { transform: none; }
  25% { transform: none; } 28% { transform: rotate(-42deg); } 36% { transform: rotate(-42deg); } 39% { transform: none; }
  50% { transform: none; } 53% { transform: rotate(-42deg); } 59% { transform: rotate(-42deg); }
  63% { transform: translate(12px, -18px) rotate(35deg); } 66% { transform: translate(14px, -12px) rotate(28deg); }
  88% { transform: translate(14px, -12px) rotate(28deg); } 95%, 100% { transform: none; }
}
.i-basura .cae { opacity: 0; animation: b-cae var(--ciclo) cubic-bezier(.55,0,1,.6) infinite; }
.i-basura .c1 { animation-delay: var(--d, 0s); }
.i-basura .c2 { animation-delay: calc(var(--d, 0s) + 3s); }
.i-basura .c3 { animation-delay: calc(var(--d, 0s) + 6s); }
@keyframes b-cae {
  0% { opacity: 0; transform: translateY(-38px) rotate(-30deg); }
  4% { opacity: 1; transform: translateY(-38px) rotate(-30deg); }
  11% { opacity: 1; transform: translateY(2px) rotate(15deg); }
  12%, 100% { opacity: 0; transform: translateY(4px); }
}
.i-basura .monton { animation: b-monton var(--ciclo) ease-out infinite var(--d, 0s); }
@keyframes b-monton {
  0%, 10% { transform: translateY(15px); opacity: 1; }
  13%, 35% { transform: translateY(11px); }
  38%, 58% { transform: translateY(7px); }
  62%, 90% { transform: translateY(-1px); }
  96% { transform: translateY(15px); opacity: 1; } 100% { transform: translateY(15px); }
}
.i-basura .olor { opacity: 0; animation: b-olor var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes b-olor {
  0%, 63% { opacity: 0; transform: translateY(6px); }
  68% { opacity: 1; transform: translateY(0); } 74% { opacity: .5; transform: translateY(-3px); }
  80% { opacity: 1; transform: translateY(0); } 86% { opacity: .6; transform: translateY(-3px); }
  91%, 100% { opacity: 0; transform: translateY(-6px); }
}
.i-basura .mosca { opacity: 0; animation: b-mosca var(--ciclo) linear infinite var(--d, 0s); }
.i-basura .m2 { animation-name: b-mosca2; }
@keyframes b-mosca {
  0%, 64% { opacity: 0; transform: none; } 66% { opacity: 1; }
  70% { transform: translate(-6px, 4px); } 74% { transform: translate(-2px, -5px); } 78% { transform: translate(-9px, -2px); }
  82% { transform: translate(-3px, 5px); } 86% { transform: translate(-8px, -4px); } 89% { opacity: 1; } 91%, 100% { opacity: 0; }
}
@keyframes b-mosca2 {
  0%, 66% { opacity: 0; transform: none; } 68% { opacity: 1; }
  72% { transform: translate(6px, -4px); } 77% { transform: translate(2px, 4px); } 82% { transform: translate(8px, 0); }
  87% { transform: translate(3px, -5px); } 90% { opacity: 1; } 92%, 100% { opacity: 0; }
}

/* ── Agua: caño roto que salpica para todos lados ─────────────── */
.i-agua .cano { animation: a-cano var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes a-cano { 0%, 14%, 100% { transform: none; } 15% { transform: translateY(-1.5px) rotate(-1deg); } 16% { transform: translateY(1px) rotate(1deg); } 17% { transform: none; } }
.i-agua .grieta { animation: a-grieta var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes a-grieta { 0%, 14% { stroke-width: 1.2; } 15%, 82% { stroke-width: 3; stroke: #020617; } 83%, 100% { stroke-width: 1.2; } }
.i-agua .chorro { opacity: 0; animation: a-chorro var(--ciclo) linear infinite var(--d, 0s); }
@keyframes a-chorro { 0%, 14% { opacity: 0; } 16%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
.i-agua .gt { animation: 1.5s cubic-bezier(.3,0,.7,1) infinite; }
.i-agua .g1 { animation-name: a-g1; } .i-agua .g2 { animation-name: a-g2; animation-delay: .2s; }
.i-agua .g3 { animation-name: a-g3; animation-delay: .4s; } .i-agua .g4 { animation-name: a-g4; animation-delay: .6s; }
.i-agua .g5 { animation-name: a-g5; animation-delay: .8s; } .i-agua .g6 { animation-name: a-g6; animation-delay: 1s; }
.i-agua .g7 { animation-name: a-g1; animation-delay: 1.2s; } .i-agua .g8 { animation-name: a-g4; animation-delay: .1s; }
@keyframes a-g1 { 0% { transform: none; opacity: 1; } 35% { transform: translate(-11px, -10px); } 70% { transform: translate(-19px, 6px); } 100% { transform: translate(-23px, 30px) scale(.6); opacity: 0; } }
@keyframes a-g2 { 0% { transform: none; opacity: 1; } 35% { transform: translate(11px, -11px); } 70% { transform: translate(20px, 4px); } 100% { transform: translate(25px, 30px) scale(.6); opacity: 0; } }
@keyframes a-g3 { 0% { transform: none; opacity: 1; } 35% { transform: translate(-5px, -17px); } 70% { transform: translate(-12px, -4px); } 100% { transform: translate(-14px, 30px) scale(.6); opacity: 0; } }
@keyframes a-g4 { 0% { transform: none; opacity: 1; } 35% { transform: translate(6px, -18px); } 70% { transform: translate(13px, -3px); } 100% { transform: translate(15px, 30px) scale(.6); opacity: 0; } }
@keyframes a-g5 { 0% { transform: none; opacity: 1; } 100% { transform: translate(1px, 30px) scale(.7); opacity: .2; } }
@keyframes a-g6 { 0% { transform: none; opacity: 1; } 35% { transform: translate(-17px, -5px); } 70% { transform: translate(-27px, 9px); } 100% { transform: translate(-29px, 30px) scale(.6); opacity: 0; } }
.i-agua .goteo { animation: a-goteo 3s cubic-bezier(.55,0,1,.45) infinite var(--d, 0s); }
@keyframes a-goteo { 0%, 40% { transform: scale(.4); opacity: 0; transform-origin: 32px 25px; } 55% { transform: scale(1); opacity: 1; } 90% { transform: translateY(29px); opacity: 1; } 92%, 100% { transform: translateY(30px); opacity: 0; } }
.i-agua .charco { transform-origin: 32px 56px; animation: a-charco var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes a-charco { 0% { transform: scale(.25, .5); opacity: .7; } 80% { transform: scale(1); opacity: 1; } 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(.25, .5); opacity: .7; } }
.i-agua .onda-agua { transform-origin: 32px 56px; animation: a-onda 2.4s ease-out infinite; opacity: 0; }
.i-agua .o2 { animation-delay: 1.2s; }
@keyframes a-onda { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(4.2, 3); opacity: 0; } }

/* ── Calles: el auto salta en el bache; aparece el cono ───────── */
.i-calles .linea-ruta { animation: c-ruta 2.4s linear infinite; }
@keyframes c-ruta { to { transform: translateX(-16px); } }
.i-calles .bache { transform-origin: 24px 49px; animation: c-bache var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes c-bache { 0% { transform: scale(.35); } 22% { transform: scale(.6); } 26% { transform: scale(.8); } 70% { transform: scale(1.1); } 92% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(.35); } }
.i-calles .auto { animation: c-auto var(--ciclo) linear infinite var(--d, 0s); }
@keyframes c-auto { 0%, 8% { transform: translateX(-34px); } 42% { transform: translateX(72px); } 100% { transform: translateX(72px); } }
.i-calles .salto { transform-origin: 14px 42px; animation: c-salto var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes c-salto { 0%, 19% { transform: none; } 21% { transform: translateY(3px) rotate(6deg); } 23.5% { transform: translateY(-7px) rotate(-8deg); } 26% { transform: translateY(1px) rotate(2deg); } 28%, 100% { transform: none; } }
.i-calles .piedras { opacity: 0; animation: c-piedras var(--ciclo) ease-out infinite var(--d, 0s); }
@keyframes c-piedras { 0%, 21% { opacity: 0; transform: none; } 22% { opacity: 1; } 30% { opacity: 0; transform: translateY(-9px) scale(1.4); } 100% { opacity: 0; } }
.i-calles .cono { transform-origin: 50px 46px; animation: c-cono var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes c-cono {
  0%, 45% { transform: translateY(-50px); } 50% { transform: translateY(2px) scaleY(.85); } 53% { transform: none; }
  60% { transform: rotate(-9deg); } 64% { transform: rotate(7deg); } 68% { transform: rotate(-4deg); } 72%, 92% { transform: none; }
  98%, 100% { transform: translateY(-50px); }
}

/* ── Luz: parpadea, se apaga con chispas y vuelve ─────────────── */
.i-luz .noche { opacity: 0; animation: l-noche var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes l-noche { 0%, 36% { opacity: 0; } 40%, 72% { opacity: .6; } 76%, 100% { opacity: 0; } }
.i-luz .estrellas { opacity: 0; animation: l-noche var(--ciclo) ease-in-out infinite var(--d, 0s); }
.i-luz .haz-luz { animation: l-haz var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes l-haz {
  0%, 28% { opacity: 1; } 30% { opacity: .15; } 31% { opacity: 1; } 33% { opacity: .1; } 34% { opacity: .9; }
  36%, 73% { opacity: 0; } 74% { opacity: 1; } 75% { opacity: .2; } 77%, 100% { opacity: 1; }
}
.i-luz .chispa { opacity: 0; animation: l-chispa var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes l-chispa { 0%, 39% { opacity: 0; } 41% { opacity: 1; } 43% { opacity: 0; } 50% { opacity: 1; } 52% { opacity: 0; } 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
.i-luz .polilla { animation: l-polilla 2.6s ease-in-out infinite; }
.i-luz .pb { animation-name: l-polilla2; }
@keyframes l-polilla { 0%, 100% { transform: none; } 25% { transform: translate(-6px, -6px); } 50% { transform: translate(-12px, 0); } 75% { transform: translate(-5px, 5px); } }
@keyframes l-polilla2 { 0%, 100% { transform: none; } 25% { transform: translate(6px, 4px); } 50% { transform: translate(11px, -3px); } 75% { transform: translate(4px, -7px); } }

/* ── Tránsito: espera en rojo, sale disparado en verde ────────── */
.i-transito .l1, .i-transito .l2, .i-transito .l3 { opacity: .2; animation: var(--ciclo) steps(1) infinite var(--d, 0s); }
.i-transito .l1 { animation-name: t-rojo; } .i-transito .l2 { animation-name: t-amarillo; } .i-transito .l3 { animation-name: t-verde; }
@keyframes t-rojo { 0% { opacity: 1; } 33% { opacity: .2; } 85% { opacity: 1; } }
@keyframes t-amarillo { 0% { opacity: .2; } 33% { opacity: 1; } 45% { opacity: .2; } }
@keyframes t-verde { 0% { opacity: .2; } 45% { opacity: 1; } 85% { opacity: .2; } }
.i-transito .auto2 { animation: t-auto var(--ciclo) infinite var(--d, 0s); }
@keyframes t-auto {
  0%, 46% { transform: none; animation-timing-function: cubic-bezier(.6,0,1,.5); }
  58% { transform: translateX(70px); } 84% { transform: translateX(70px); opacity: 0; }
  85% { transform: translateX(-60px); opacity: 1; animation-timing-function: cubic-bezier(0,.5,.4,1); }
  95%, 100% { transform: none; }
}
.i-transito .vibra { animation: t-vibra .25s linear infinite; }
@keyframes t-vibra { 50% { transform: translateY(-.6px); } }
.i-transito .veloc { opacity: 0; animation: t-veloc var(--ciclo) infinite var(--d, 0s); }
@keyframes t-veloc { 0%, 47% { opacity: 0; } 50%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }

/* ── Árbol: crece hasta los cables, chispas, poda ─────────────── */
.i-arbol .crece { transform-origin: 32px 59px; animation: r-crece var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes r-crece {
  0% { transform: scale(.3); } 45% { transform: scale(1.06); }
  48% { transform: scale(1.06) rotate(-3deg); } 52% { transform: scale(1.06) rotate(3deg); } 56% { transform: scale(1.06) rotate(-2deg); }
  60%, 76% { transform: scale(1.06); } 84% { transform: scale(.55); } 100% { transform: scale(.3); }
}
.i-arbol .cable { animation: r-cable var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes r-cable { 0%, 44%, 76%, 100% { transform: none; } 48% { transform: translateY(-2px); } 52% { transform: translateY(1.5px); } 56% { transform: translateY(-1.5px); } 64% { transform: translateY(1px); } }
.i-arbol .chispas { opacity: 0; transform-origin: 33px 12px; animation: r-chispas var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes r-chispas { 0%, 45% { opacity: 0; } 46% { opacity: 1; transform: scale(1); } 49% { opacity: 0; } 52% { opacity: 1; transform: scale(1.3) rotate(20deg); } 55% { opacity: 0; } 59% { opacity: 1; transform: scale(.9); } 62%, 100% { opacity: 0; } }
.i-arbol .hoja { opacity: 0; animation: r-hoja var(--ciclo) ease-in infinite; }
.i-arbol .h1 { animation-delay: var(--d, 0s); } .i-arbol .h2 { animation-delay: calc(var(--d, 0s) + .6s); } .i-arbol .h3 { animation-delay: calc(var(--d, 0s) + 1.2s); }
@keyframes r-hoja { 0%, 55% { opacity: 0; transform: none; } 57% { opacity: 1; } 65% { transform: translate(-6px, 12px) rotate(90deg); } 72% { transform: translate(4px, 20px) rotate(200deg); } 78% { opacity: 1; transform: translate(-2px, 27px) rotate(300deg); } 80%, 100% { opacity: 0; } }

/* ── Sirena: calma, alarma y calma ────────────────────────────── */
.i-sirena .haz { transform-origin: 32px 30px; animation: s-haz 7s linear infinite; }
@keyframes s-haz { to { transform: rotate(360deg); } }
.i-sirena .domo { animation: s-domo var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes s-domo {
  0%, 38% { fill: #7c3aed; } 40% { fill: #ef4444; } 44% { fill: #3b82f6; } 48% { fill: #ef4444; } 52% { fill: #3b82f6; }
  56% { fill: #ef4444; } 60% { fill: #3b82f6; } 64% { fill: #ef4444; } 68% { fill: #3b82f6; } 72% { fill: #ef4444; } 76% { fill: #3b82f6; } 80%, 100% { fill: #7c3aed; }
}
.i-sirena .anillo { transform-origin: 32px 34px; opacity: 0; animation: s-anillo var(--ciclo) ease-out infinite var(--d, 0s); }
.i-sirena .a2 { animation-delay: calc(var(--d, 0s) + .9s); }
@keyframes s-anillo { 0%, 40% { opacity: 0; transform: scale(.8); } 41% { opacity: .9; transform: scale(.8); } 50% { opacity: 0; transform: scale(2.6); } 51% { opacity: .9; transform: scale(.8); } 60% { opacity: 0; transform: scale(2.6); } 61% { opacity: .9; transform: scale(.8); } 70% { opacity: 0; transform: scale(2.6); } 71% { opacity: .9; transform: scale(.8); } 80%, 100% { opacity: 0; transform: scale(2.6); } }
.i-sirena .alerta { transform-origin: 50px 12px; transform: scale(0); animation: s-alerta var(--ciclo) var(--rebote, ease) infinite var(--d, 0s); }
@keyframes s-alerta { 0%, 40% { transform: scale(0); } 44% { transform: scale(1.25); } 47% { transform: scale(1); } 52% { transform: scale(1.15); } 56%, 76% { transform: scale(1); } 80%, 100% { transform: scale(0); } }

/* ── Colectivo: llega, sube la gente, arranca y se va ─────────── */
.i-colectivo .bus2 { animation: k-bus var(--ciclo) infinite var(--d, 0s); }
@keyframes k-bus {
  0% { transform: translateX(-46px); animation-timing-function: cubic-bezier(0,.6,.4,1); }
  20%, 55% { transform: none; animation-timing-function: cubic-bezier(.6,0,1,.5); }
  21% { transform: translateY(1px); } 23% { transform: none; }
  75%, 100% { transform: translateX(72px); }
}
.i-colectivo .rueda { animation: k-rueda 1s linear infinite; }
.i-colectivo .r1 { transform-origin: 10px 53px; } .i-colectivo .r2 { transform-origin: 31px 53px; }
@keyframes k-rueda { to { transform: rotate(360deg); } }
.i-colectivo .puerta { animation: k-puerta var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes k-puerta { 0%, 24% { fill: #0f766e; } 25%, 50% { fill: #fef3c7; } 51%, 100% { fill: #0f766e; } }
.i-colectivo .gente { animation: k-gente var(--ciclo) ease-in-out infinite var(--d, 0s); }
@keyframes k-gente { 0%, 30% { opacity: 1; transform: none; } 42% { opacity: 0; transform: translateX(-10px); } 88% { opacity: 0; transform: translateX(8px); } 96%, 100% { opacity: 1; transform: none; } }
.i-colectivo .persona { animation: k-espera 1.2s ease-in-out infinite; }
.i-colectivo .p2 { animation-delay: .5s; }
@keyframes k-espera { 50% { transform: translateY(-1.5px); } }

/* ── Otro: escribe, "!" y "?" ─────────────────────────────────── */
.i-otro .globo-d { transform-origin: 18px 55px; animation: o-globo var(--ciclo) var(--rebote, ease) infinite var(--d, 0s); }
@keyframes o-globo { 0% { transform: scale(0); } 5%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
.i-otro .tipeo { animation: o-tipeo var(--ciclo) steps(1) infinite var(--d, 0s); }
@keyframes o-tipeo { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
.i-otro .p1, .i-otro .p2, .i-otro .p3 { animation: o-punto 1.4s ease-in-out infinite; }
.i-otro .p2 { animation-delay: .18s; } .i-otro .p3 { animation-delay: .36s; }
@keyframes o-punto { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
.i-otro .exclama { transform-origin: 32px 28px; transform: scale(0); animation: o-excl var(--ciclo) ease-out infinite var(--d, 0s); }
@keyframes o-excl { 0%, 41% { transform: scale(0); } 45% { transform: scale(1.35); } 48% { transform: scale(1); } 52% { transform: rotate(-12deg); } 56% { transform: rotate(10deg); } 60%, 69% { transform: none; } 71%, 100% { transform: scale(0); } }
.i-otro .pregunta { transform-origin: 32px 30px; transform: scale(0); animation: o-preg var(--ciclo) ease-out infinite var(--d, 0s); }
@keyframes o-preg { 0%, 71% { transform: scale(0); } 75% { transform: scale(1.3) rotate(-8deg); } 78%, 92% { transform: none; } 95%, 100% { transform: scale(0); } }

/* ── Elegido: brilla y salta, sin cortar la escena ────────────── */
.activa-ico.elegido .ico { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, #7c3aed) 70%, transparent)); }

/* Al sacudir el celular, los íconos tiemblan un momento */
.agitado .ico { animation: temblor-ico .12s linear 8; }
@keyframes temblor-ico { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }