/* Dino aventura — fiesta infantil jurásica: dinosaurios, volcán, huellas y hojas. Va después de
   kit/base.css y kit/infantil.css. Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.dn-hero {
  background:
    radial-gradient(130% 34% at 50% 104%, color-mix(in srgb, var(--k-secondary) 75%, var(--k-bg)) 0 70%, transparent 71%),
    linear-gradient(color-mix(in srgb, var(--k-secondary) 50%, var(--k-bg)), var(--k-bg) 55%);
}
.dn-hero > .dn-leaf, .dn-hero > .dn-volcano { position: absolute; }
.dn-hero { padding-top: 72px; }
.dn-leaf { top: -46px; width: 104px; }
.dn-leaf--l { left: -34px; rotate: 135deg; }
.dn-leaf--r { right: -34px; rotate: -135deg; }
.dn-volcano { bottom: 4%; left: 4%; width: 92px; }
.dn-frame { position: relative; width: min(62vw, 270px); margin: .4rem auto 1.4rem; }
.dn-photo { overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft); box-shadow: 0 0 0 8px var(--k-surface), 0 0 0 13px var(--k-primary), 0 26px 50px -30px rgba(0, 0, 0, .45); }
.dn-photo img { width: 100%; height: 100%; object-fit: cover; }
.dn-rex { position: absolute; right: -26%; bottom: -16%; width: 64%; scale: -1 1; }
.dn-egg { position: absolute; left: -10%; bottom: -10%; width: 86px; height: 106px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; color: var(--fi-on-accent);
  background:
    radial-gradient(circle at 28% 30%, color-mix(in srgb, var(--k-surface) 45%, transparent) 0 7px, transparent 8px),
    radial-gradient(circle at 74% 64%, color-mix(in srgb, var(--k-surface) 45%, transparent) 0 5px, transparent 6px),
    var(--k-accent); }
@media (prefers-reduced-motion: no-preference) {
  .dn-egg { animation: dn-wobble 4s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes dn-wobble { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -6deg; } 90% { rotate: 6deg; } 95% { rotate: -3deg; } }
.dn .fi-name { color: var(--k-primary); }
.dn-steps { width: 110px; margin-top: .4rem; opacity: .35; rotate: -8deg; }
.dn .fi-welcome .k-divider { width: 120px; }
.dn .fi-card { box-shadow: 0 0 0 3px var(--k-secondary); }
.dn .fi-footer-orn { width: 92px; opacity: .45; }