/* Celebraciones: adorno del logo, mensaje, lienzo del efecto y botón de pausa.
   Todo es absoluto o fijo: nada empuja el contenido (CLS 0). */

.celeb-ancla{position:relative}

.celeb-adorno{position:absolute;left:0;top:0;width:40px;height:40px;pointer-events:none;z-index:3;line-height:0}
.celeb-adorno svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25))}
.celeb-adorno-gorro svg{transform:rotate(-16deg);transform-origin:70% 85%}
.celeb-animado{animation:celeb-entra .6s cubic-bezier(.2,1.4,.4,1) both}
.celeb-animado.celeb-adorno-insignia svg{animation:celeb-mece 3.6s ease-in-out .7s infinite}
@keyframes celeb-entra{from{opacity:0;transform:scale(.3) translateY(-8px)}to{opacity:1;transform:none}}
@keyframes celeb-mece{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.celeb-lienzo{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9990}

.celeb-mensaje{position:fixed;left:50%;bottom:18px;z-index:9992;display:flex;align-items:center;gap:.65rem;
  max-width:min(560px,calc(100% - 120px));padding:.6rem .7rem .6rem .9rem;border-radius:999px;
  background:rgba(20,22,30,.92);color:#fff;font:500 15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,24px);
  transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.celeb-mensaje.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.celeb-mensaje-icono{width:26px;height:26px;flex:0 0 26px}
.celeb-mensaje-texto{flex:1 1 auto;min-width:0}
.celeb-mensaje-enlace{color:#ffd60a;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.celeb-mensaje-enlace:hover{color:#fff}
.celeb-mensaje-cerrar{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.celeb-mensaje-cerrar:hover{background:rgba(255,255,255,.25)}
.celeb-mensaje a:focus-visible,.celeb-mensaje-cerrar:focus-visible,.celeb-pausa:focus-visible{outline:2px solid #ffd60a;outline-offset:2px}
@media (max-width:600px){
  .celeb-mensaje{border-radius:16px;font-size:14px;bottom:14px}
}

.celeb-pausa{position:fixed;left:14px;bottom:14px;z-index:9991;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(20,22,30,.65);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:.75;transition:opacity .2s}
.celeb-pausa:hover{opacity:1}
.celeb-pausa svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .celeb-animado,.celeb-animado svg{animation:none!important}
  .celeb-mensaje{transition:none}
}
@media print{.celeb-lienzo,.celeb-mensaje,.celeb-pausa,.celeb-adorno{display:none!important}}

/* Para la vista del shortcode [celebraciones] */
.celebraciones-bloque{border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:1.1rem 1.25rem;display:flex;gap:1rem;align-items:center}
.celebraciones-bloque svg{width:48px;height:48px;flex:0 0 48px}
.celebraciones-bloque strong{display:block;font-size:1.1em}
.celebraciones-cuenta{font-size:2rem;font-weight:800;line-height:1}
.celebraciones-lista{list-style:none;margin:0;padding:0}
.celebraciones-lista li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.celebraciones-lista li span{opacity:.75;white-space:nowrap}

@media (max-width:600px){
  .celeb-mensaje,.celeb-mensaje.visible{left:64px;right:12px;max-width:none}
  .celeb-mensaje{transform:translateY(24px)}
  .celeb-mensaje.visible{transform:none}
}