/* ═══════════ Las animaciones de esta boda, en un solo lugar ═══════════
   Ella elige sus favoritas en el catálogo (PENDIENTE). Mientras, la v1 lleva
   las tres de Katia, vestidas con su paleta:

     1. PÉTALOS CAYENDO ............ aquí abajo (los crea crearHojas en js/main.js)
     2. LA LÍNEA DORADA AL BAJAR ... colores en css/estephany.css (--hilo-oro);
                                     la dibuja crearHilo en js/main.js
     3. EL ARO DEL CALENDARIO ...... css/estephany.css (.calendario__aro);
                                     la cascada la dispara js/oro-al-bajar.js

   CÓMO CAMBIARLAS cuando elija:
     · Otro fondo del motor (mariposas, motas): en js/main.js,
       `animacionFondo = 'mariposas'` (o 'motas'), o en la base
       `eventos.animacion`. Este archivo deja de aplicar porque ya no hay .hoja.
     · Otro trazo (enredadera, rosario): `animacionTrazo` en js/main.js o
       `eventos.hilo` en la base.
     · Quitar los pétalos sin tocar código: ?sin=hojas en la dirección (sirve
       para probar; para quitarlos de verdad, `.hojas { display: none; }` aquí).
     · Una animación nueva del catálogo: archivo propio en js/ y css/ (como
       js/cinta.js), nunca metida en main.js. */

/* ═══════════ 1. Pétalos de rosa ═══════════
   Forma de pétalo: una gota con la punta en una esquina, que al girar en la
   caída se lee como pétalo y no como hoja. Rosa bajito con su luz; uno de cada
   tres cae en champaña-oro con brillo (como en Katia: el oro deja de verse
   lujoso en cuanto es mayoría). El motor pone 6 en el celular y 12 en
   pantalla grande: medido para no trabar el scroll. */
.hoja {
  width: 11px;
  height: 13px;
  border-radius: 0 70% 60% 70%;
  background: radial-gradient(circle at 70% 30%, #FBEFEC 0%, #EED3CE 40%, #E2BCB5 100%);
  box-shadow: inset -1px -1px 2px rgba(166, 138, 123, .25);
  opacity: .78;
}
.hoja:nth-child(4n+1) {
  background: radial-gradient(circle at 70% 30%, #F8EEE8 0%, #E6D2C6 45%, #D5BBAB 100%);
  width: 13px;
  height: 15px;
}
.hoja:nth-child(3n) {
  width: 9px;
  height: 11px;
  background: linear-gradient(135deg, #FBF1D9 0%, #E8CF98 38%, #C9A464 62%, #F4E2B8 100%);
  box-shadow: 0 0 6px rgba(201, 164, 100, .55);
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  .hojas { display: none; }
}