/* v7.8 (07-10-2026, estetica-landing.md § 27): ilustraciones que se mueven. SVG en línea + CSS, sin librería.
   Línea fina petróleo sobre panel gris-1 de radio 16; lo que se mueve es un relleno petróleo (el naranja queda
   para el botón y el resaltador del H1). Quietas y completas por defecto: el movimiento solo existe con
   prefers-reduced-motion: no-preference. Ciclos de 4 a 6 s, solo transform y opacity. */
.ilu { display: flex; justify-content: center; background: var(--gris-1); border-radius: 16px; padding: 8px 12px; margin: 0 0 16px; }
.ilu svg { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.ilu .l { fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ilu .p { fill: none; stroke: var(--texto-3); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .5 5; }
.ilu .h { fill: var(--gris-1); stroke: var(--texto); stroke-width: 1.5; }
.ilu .a { fill: var(--texto); }
.ilu .t { font: 600 11px/1 'Inter', sans-serif; fill: var(--texto-2); }
.ilu .a, .ilu .m, .ilu .h { transform-box: fill-box; transform-origin: center; }
.ilu .crece { transform-origin: center bottom; }
@media (min-width: 1024px) { .ilu { padding: 12px 16px; } .ilu svg { max-width: 400px; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1 · la cuenta: visitas que pasan por la tienda; una compra cae a la bolsa */
  .ilu-cuenta .v { animation: ilu-pasa 2.4s linear infinite; }
  .ilu-cuenta .v2 { animation-delay: -.8s; } .ilu-cuenta .v3 { animation-delay: -1.6s; }
  .ilu-cuenta .compra { animation: ilu-a-la-bolsa 4s cubic-bezier(.3,.6,.3,1) infinite; }
  .ilu-cuenta .bt { animation: ilu-toque 4s ease-out infinite; }
  /* 2 · el método: la oferta entra a la tienda y sale como número */
  .ilu-metodo .viaja { animation: ilu-viaja 6s ease-in-out infinite; }
  .ilu-metodo .bt { animation: ilu-llena 6s ease-out infinite; }
  .ilu-metodo .crece { animation: ilu-sube-tarde 6s cubic-bezier(.2,.7,.2,1) infinite; }
  /* 3 · la garantía: el después pasa la raya del 20% y aparece el visto */
  .ilu-garantia .crece { animation: ilu-sube 6s cubic-bezier(.2,.7,.2,1) infinite; }
  .ilu-garantia .visto { animation: ilu-visto 6s ease-out infinite; }
}
@keyframes ilu-pasa { 0% { transform: translateX(-16px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(32px); opacity: 0; } }
@keyframes ilu-a-la-bolsa {
  0%, 12% { transform: translate(-84px, 25px); opacity: 0; } 18% { opacity: 1; }
  45% { transform: translate(-34px, -10px); } 65% { transform: translate(0, -24px); } 80%, 92% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ilu-toque { 0%, 8% { fill: var(--gris-1); } 12%, 22% { fill: var(--texto); } 30%, 100% { fill: var(--gris-1); } }
@keyframes ilu-viaja {
  0% { transform: translate(-112px, 0); opacity: 0; } 6% { opacity: 1; } 16% { transform: translate(-90px, 0); opacity: 1; } 20% { transform: translate(-86px, 0); opacity: 0; }
  40% { transform: translate(-10px, 0); opacity: 0; } 44% { opacity: 1; } 56% { transform: translate(14px, 0); opacity: 1; } 60%, 100% { transform: translate(18px, 0); opacity: 0; } }
@keyframes ilu-llena { 0%, 22% { fill: var(--gris-1); } 30%, 92% { fill: var(--texto); } 100% { fill: var(--gris-1); } }
@keyframes ilu-sube-tarde { 0%, 56% { transform: scaleY(0); } 70%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ilu-sube { 0%, 8% { transform: scaleY(0); } 50%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ilu-visto { 0%, 50% { transform: scale(.4); opacity: 0; } 58% { transform: scale(1.08); opacity: 1; } 64%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }