/* Corona de flores — primera comunión floral: corona de flores en acuarela alrededor de la foto.
   Va después de kit/base.css y kit/religioso.css. Solo var(--mi-*) / var(--k-*). */

.fl { --k-orn-1: var(--k-primary); --k-orn-2: var(--k-accent); --k-orn-3: var(--k-secondary); }
.fl-hero {
  background:
    radial-gradient(40% 26% at 6% 16%, color-mix(in srgb, var(--k-secondary) 90%, transparent), transparent 70%),
    radial-gradient(36% 22% at 96% 42%, color-mix(in srgb, var(--k-accent) 40%, transparent), transparent 70%),
    radial-gradient(40% 18% at 8% 72%, color-mix(in srgb, var(--k-accent) 28%, transparent), transparent 70%),
    radial-gradient(36% 16% at 94% 78%, color-mix(in srgb, var(--k-secondary) 80%, transparent), transparent 70%);
}
.fl-frame { position: relative; width: min(62vw, 270px); margin: 1.6rem auto 1.4rem; }
.fl-photo { overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft); box-shadow: 0 0 0 7px var(--k-surface), 0 26px 50px -30px rgba(0, 0, 0, .4); }
.fl-photo img { width: 100%; height: 100%; object-fit: cover; }
.fl-crown { position: absolute; left: 50%; width: 132%; translate: -50% 0; }
.fl-crown--top { top: -17%; }
.fl-crown--low { bottom: -17%; rotate: 180deg; }
.fl .rel-name { font-size: clamp(3.6rem, 18vw, 6.6rem); font-weight: 400; line-height: 1; }
.fl h2 { font-weight: 400; font-size: clamp(2.6rem, 10vw, 3.6rem); }
.fl .rel-date { letter-spacing: .04em; }
.fl .rel-welcome .k-divider { width: 110px; }
.fl .rel-card { border-radius: 28px; }
.fl .rel-people .k-person__name { font-family: var(--k-font-body); }
.fl .rel-footer-orn { width: 110px; }