/* Escena de calle de la portada: fondo del arranque, desenfocado, detrás del texto y del móvil.
   Piezas ilustradas (diorama de plastilina). El suelo queda a la altura de «Gratis para empezar · Sin permanencia».
   La capa de fondo es estática y se desenfoca una sola vez; solo se mueven los muñecos (transform, compuesto en GPU),
   que avanzan balanceándose como juguetes. Con "reducir movimiento" todo queda quieto. */
.street { position: absolute; left: 0; right: 0; bottom: -18px; height: clamp(340px, 46vw, 620px); overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 90%, transparent 100%); }
.street-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.street-back { filter: blur(5px); opacity: 1; }
.street-props, .street-far { filter: brightness(.92) saturate(.68); }
.street-front { filter: blur(4px) saturate(.78); opacity: 1; }
.street-far { animation: street-drift 120s ease-in-out infinite alternate; }
@keyframes street-drift { from { transform: translateX(0); } to { transform: translateX(-30px); } }
.walker { animation: walk-right var(--dur, 80s) linear infinite; animation-delay: var(--delay, 0s); will-change: transform; }
.walker.walk-l { animation-name: walk-left; }
@keyframes walk-right { from { transform: translateX(-260px); } to { transform: translateX(1860px); } }
@keyframes walk-left { from { transform: translateX(1860px); } to { transform: translateX(-260px); } }
.walker.back { opacity: .72; }
.pleg { animation: leg-swing calc(var(--cyc, 1.2s) / 2) ease-in-out infinite alternate; }
.pleg-s { animation-name: leg-swing-s; }
.pshin { animation: shin-bend var(--cyc, 1.2s) ease-in-out infinite; }
.pbody { transform-box: fill-box; transform-origin: 50% 100%; animation: body-sway calc(var(--cyc, 1.2s) / 2) ease-in-out infinite alternate; }
.pbody-paso { animation-duration: var(--cyc, 2.4s); }
@keyframes leg-swing { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes leg-swing-s { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
@keyframes shin-bend { 0% { transform: rotate(0); } 25% { transform: rotate(30deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); } }
@keyframes body-sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@media (max-width: 700px) {
  .street { height: clamp(260px, 62vw, 340px); }
  .street .walker:nth-child(n+6):not(.paso) { display: none; }
}

/* ---- Escena de la portada: exactamente la 5 (calle, muñecos y colinas bajo su velo del 80 %), más el pueblo de fondo con los
   edificios nuevos (lejos1-8) pegados detrás, sin filtros ni opacidad propios: reciben el mismo velo. ---- */
.street-town { display: none; }
body[data-street="v6"] .street-town { display: inline; } body[data-street="v6"] .street-town { opacity: .45; }
body[data-street="v6"] .street-back, body[data-street="v6"] .street-front, body[data-street="v6"] .street-props, body[data-street="v6"] .street-far { filter: none; opacity: 1; }
body[data-street="v6"] .street-far { animation: none; }
body[data-street="v6"] .street::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(251,247,239,.8); }
body[data-street="v6"] .hero-grid > div:first-child::before { inset: -30px -90px -20px;
  background: radial-gradient(ellipse closest-side, rgba(252,247,238,.9) 45%, rgba(252,247,238,.55) 75%, rgba(252,247,238,0) 100%); }
@media (prefers-reduced-motion: reduce) {
  .street-far, .pleg, .pshin, .pbody { animation: none; }
  .walker { animation: none; transform: translateX(var(--x, 0px)); }
}