/* =========================================================
   Mi Piano — celebracion
   ---------------------------------------------------------
   Celebración con confeti y cuenta atrás en pantalla.
   ========================================================= */
.fiesta{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(34,29,20,.44);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body.fiesta-on .fiesta{display:flex}
.fiesta-card{position:relative;background:#fff;border-radius:22px;padding:22px 28px 22px;
  width:min(420px,100%);text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.3);
  animation:fiestaIn .38s cubic-bezier(.2,1.35,.4,1)}
@keyframes fiestaIn{from{transform:scale(.82) translateY(22px);opacity:0}to{transform:none;opacity:1}}
.fiesta-dog{width:132px;height:136px;margin:0 auto 2px;animation:saltar 1.05s ease-in-out infinite}
.fiesta-dog svg{width:100%;height:100%;display:block}
@keyframes saltar{0%,100%{transform:translateY(0) rotate(-2deg)}
  25%{transform:translateY(-15px) rotate(3.5deg)}
  50%{transform:translateY(0) rotate(-1deg)}
  75%{transform:translateY(-7px) rotate(2deg)}}
.fiesta-card h3{margin:2px 0 6px;font-size:1.55rem;color:var(--gold-dk)}
.fiesta-card p{margin:0 0 18px;font-size:.95rem;line-height:1.6;color:var(--soft)}
.fiesta-acts{display:flex;flex-direction:column;gap:9px}
.fiesta-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:22px}
.fiesta-conf i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;
  animation:caer linear forwards}
@keyframes caer{0%{opacity:1}to{transform:translateY(460px) rotate(620deg);opacity:0}}
@media (max-height:560px){
  .fiesta-dog{width:92px;height:95px}
  .fiesta-card h3{font-size:1.3rem}
  .fiesta-card p{margin-bottom:12px}
}

/* =========================================================
   Cuenta atrás
   ========================================================= */
.countdown{position:fixed;inset:0;z-index:95;display:none;
  align-items:center;justify-content:center;background:rgba(253,251,246,.86);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.countdown.show{display:flex}
.countdown span{font-size:min(34vw,220px);font-weight:800;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 6px 26px rgba(200,146,42,.28);animation:cdpop .9s ease-out}
.countdown span.go{font-size:min(16vw,120px);color:var(--ok)}
@keyframes cdpop{0%{transform:scale(.55);opacity:0}
  35%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:.92}}