/* Posada — fin de año a la mexicana: papel picado, piñata de siete picos, esferas y luces. Va
   después de kit/base.css y kit/empresa.css. Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.po h2 { font-weight: 400; color: var(--k-primary); }
.po-hero { padding-top: 96px; background: radial-gradient(70% 40% at 50% 46%, color-mix(in srgb, var(--k-secondary) 55%, transparent), transparent 75%); }
.po-hero > .po-flags, .po-hero > .po-ball { position: absolute; }
.po-flags { top: 0; left: -2%; width: 104%; }
.po-ball { top: 78px; width: 56px; transform-origin: 50% 0; }
.po-ball--a { left: 5%; }
.po-ball--b { top: 120px; right: 6%; width: 44px; --k-orn-1: var(--k-accent); }
.po-pinata { width: 150px; margin: 0 0 -.4rem; transform-origin: 50% 0; --k-orn-2: var(--k-secondary); --k-orn-3: var(--k-accent); }
@media (prefers-reduced-motion: no-preference) {
  .po-ball, .po-pinata { animation: po-swing 5s ease-in-out infinite; }
  .po-ball--b { animation-delay: -2s; }
}
@keyframes po-swing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.po .em-title { font-weight: 400; font-size: clamp(2.8rem, 13vw, 4.8rem); color: var(--k-primary); }
.po-lights { display: flex; overflow: hidden; }
.po-lights svg { flex: 1 1 50%; min-width: 0; }
.po .em-countdown > div { box-shadow: 0 0 0 2px var(--k-secondary); }
.po .em-welcome .k-divider { width: 48px; }
.po .em-footer-orn { width: 90px; --k-orn-2: var(--k-secondary); --k-orn-3: var(--k-accent); }