/* Expedición safari — fiesta infantil en tonos tierra: león, jirafa, elefante y sol. Va después de
   kit/base.css y kit/infantil.css. Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.sf { --sf-sand: color-mix(in srgb, var(--k-secondary) 72%, var(--k-primary)); }
.sf h2 { font-weight: 400; font-size: clamp(2.4rem, 9vw, 3.4rem); letter-spacing: .03em; }
.sf-hero { background: linear-gradient(color-mix(in srgb, var(--k-secondary) 55%, var(--k-bg)), var(--k-bg) 70%); }
.sf-hero > .sf-sun { position: absolute; top: -40px; right: -40px; width: 190px; opacity: .45; --k-orn-3: var(--k-primary); }
@media (prefers-reduced-motion: no-preference) {
  .sf-sun { animation: sf-spin 40s linear infinite; }
}
@keyframes sf-spin { to { rotate: 360deg; } }
.sf-frame { position: relative; width: min(60vw, 260px); margin: .6rem auto 1rem; }
.sf-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--k-soft); box-shadow: 0 0 0 8px var(--k-surface), 0 0 0 11px var(--k-primary), 0 26px 50px -30px rgba(0, 0, 0, .45); }
.sf-photo img { width: 100%; height: 100%; object-fit: cover; }
.sf-giraffe { position: absolute; left: -34%; bottom: 0; width: 44%; --k-orn-2: var(--sf-sand); }
.sf-lion { position: absolute; right: -20%; bottom: -14%; width: 50%; --k-orn-2: var(--k-secondary); }
.sf-sticker { position: absolute; top: -8%; right: -12%; rotate: 10deg; background: var(--k-accent); color: var(--fi-on-accent); }
.sf .fi-age strong { font-size: 3.2rem; }
.sf .fi-name { font-weight: 400; font-size: clamp(4rem, 22vw, 7.4rem); letter-spacing: .03em; }
.sf .fi-when { text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
.sf-grass { height: 26px; margin-top: -26px; position: relative; background: var(--k-accent);
  -webkit-mask: radial-gradient(14px 26px at 14px 26px, #000 98%, transparent) 0 0 / 28px 26px repeat-x;
  mask: radial-gradient(14px 26px at 14px 26px, #000 98%, transparent) 0 0 / 28px 26px repeat-x; opacity: .7; }
.sf .fi-countdown > div { box-shadow: 0 0 0 2px var(--k-secondary); }
.sf .fi-welcome .k-divider { width: 130px; --k-orn-1: var(--sf-sand); --k-orn-2: var(--k-secondary); }
.sf .fi-card { border-radius: 14px; box-shadow: 0 0 0 2px var(--k-secondary); }
.sf .fi-footer-orn { width: 70px; --k-orn-3: var(--k-primary); }