/* Jardín de hadas — fiesta infantil de bosque encantado: casita hongo, flores, luciérnagas y alas.
   Va después de kit/base.css y kit/infantil.css. Solo var(--mi-*) / var(--k-*). */

.hd h2 { font-weight: 400; font-size: clamp(2.6rem, 10vw, 3.6rem); }
.hd-hero {
  background:
    radial-gradient(44% 24% at 0% 30%, color-mix(in srgb, var(--k-secondary) 90%, transparent), transparent 70%),
    radial-gradient(40% 20% at 100% 60%, color-mix(in srgb, var(--k-accent) 26%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--k-secondary) 40%, var(--k-bg)), var(--k-bg) 72%);
}
.hd-hero > .hd-glow { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); box-shadow: 0 0 12px 4px color-mix(in srgb, var(--k-accent) 70%, transparent); }
.hd-glow--a { top: 12%; left: 14%; }
.hd-glow--b { top: 24%; right: 12%; }
.hd-glow--c { top: 46%; left: 8%; width: 6px; height: 6px; }
.hd-glow--d { top: 8%; right: 30%; width: 5px; height: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .hd-glow { animation: hd-float 5s ease-in-out infinite; }
  .hd-glow--b { animation-delay: -1.6s; }
  .hd-glow--c { animation-delay: -3s; }
  .hd-glow--d { animation-delay: -.8s; }
}
@keyframes hd-float { 50% { translate: 6px -12px; opacity: .45; } }
.hd-frame { position: relative; width: min(54vw, 236px); margin: 3.2rem auto 1.4rem; }
.hd-wings { position: absolute; top: -16%; left: 50%; width: 200%; translate: -50% 0; --k-orn-2: color-mix(in srgb, var(--k-secondary) 80%, var(--k-surface)); --k-orn-3: var(--k-accent); }
.hd-wings .k-orn { color: color-mix(in srgb, var(--k-primary) 45%, transparent); }
.hd-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; background: var(--k-soft); box-shadow: 0 0 0 7px var(--k-surface), 0 0 0 10px var(--k-primary), 0 26px 50px -30px rgba(0, 0, 0, .4); }
.hd-photo img { width: 100%; height: 100%; object-fit: cover; }
.hd-house { position: absolute; left: -26%; bottom: -10%; width: 50%; --k-orn-1: var(--k-accent); --k-orn-2: var(--k-surface); --k-orn-3: var(--k-primary); }
.hd-flower { position: absolute; width: 34px; --k-orn-1: var(--k-accent); --k-orn-3: var(--k-surface); }
.hd-flower--a { right: -10%; bottom: 10%; }
.hd-flower--b { right: -20%; bottom: -2%; width: 24px; --k-orn-1: var(--k-secondary); --k-orn-3: var(--k-accent); }
.hd .fi-age { position: absolute; right: -14%; top: -6%; }
.hd .fi-age strong { font-family: var(--k-font-body); font-weight: 600; }
.hd .fi-name { font-weight: 400; font-size: clamp(3.6rem, 18vw, 6.6rem); }
.hd .fi-countdown strong { font-family: var(--k-font-body); font-weight: 600; }
.hd .fi-welcome .k-divider { width: 48px; --k-orn-1: var(--k-accent); --k-orn-3: var(--k-primary); }
.hd .fi-card { box-shadow: 0 0 0 2px var(--k-secondary); }
.hd .fi-footer .k-quote { font-size: 2rem; }
.hd .fi-footer-orn { width: 80px; --k-orn-1: var(--k-accent); --k-orn-2: var(--k-surface); --k-orn-3: var(--k-primary); }