/* Dibujos de fondo de cada sección, muy suaves (como la rosa de los vientos de la portada).
   Los dibujos están en dibujos.css: --compass (rosa de los vientos), --avion-retro, --maleta y los bocetos a mano
   --mapa, --globo, --postal y --gafas-sombrero.
   Para cambiar o quitar el dibujo de una sección, edita o borra su línea en la lista de abajo. */

main .band{position:relative;overflow:clip}
main .band>.wrap{position:relative;z-index:1}
main .band::after{content:"";position:absolute;z-index:0;pointer-events:none;background:center/contain no-repeat;opacity:.08;
  --tam:clamp(200px,32vw,380px);width:var(--tam);aspect-ratio:1}

/* ---------- Qué dibujo va en cada sección y dónde ---------- */
#alojamiento::after{background-image:var(--postal);aspect-ratio:210/250;--tam:clamp(170px,22vw,280px);opacity:.11;right:-30px;bottom:6%;transform:rotate(-4deg)}
#historia::after{background-image:var(--compass);left:-110px;bottom:-90px}
#programa::after{background-image:var(--globo);--tam:clamp(220px,28vw,360px);opacity:.1;right:-30px;top:10%}
#lugar::after{background-image:var(--mapa);aspect-ratio:220/210;--tam:clamp(200px,26vw,330px);opacity:.1;right:-60px;top:10%;transform:rotate(6deg)}
#llegar::after{background-image:var(--avion-retro);aspect-ratio:300/120;--tam:clamp(260px,42vw,520px);left:-80px;bottom:8%;transform:scaleX(-1) rotate(-6deg)}
#transporte::after{background-image:var(--maleta);aspect-ratio:160/124;left:-50px;top:14%;transform:rotate(7deg)}
#vestimenta::after{background-image:var(--gafas-sombrero);aspect-ratio:230/275;--tam:clamp(170px,22vw,280px);opacity:.11;left:-40px;bottom:4%;transform:rotate(-6deg)}
#rsvp::after{background-image:var(--avion-retro);aspect-ratio:300/120;--tam:clamp(260px,42vw,520px);right:-70px;bottom:6%;transform:rotate(-10deg)}
#regalos::after{background-image:var(--maleta);aspect-ratio:160/124;right:-30px;top:12%;transform:rotate(-5deg)}
#preguntas::after{background-image:var(--mapa);aspect-ratio:220/210;--tam:clamp(200px,24vw,300px);opacity:.09;left:-80px;top:8%;transform:scaleX(-1) rotate(4deg)}

/* La rosa de los vientos gira muy despacio, como en la portada */
@media (prefers-reduced-motion:no-preference){
  #historia::after{animation:girar 240s linear infinite}
}