/* CCOMUSOC Ros · Fiesta (1.4) — capa aditiva: papel picado, pasaporte y efectos.
   No toca ningún estilo existente: solo suma clases nuevas (fx-*, pp-*). */

/* ---------- Banderines planos (formas simples, borde grueso) ---------- */
.ppf{display:block;width:36px;height:32px;flex:none;color:var(--azul);transform-origin:50% 0;animation:pp-sway 3.2s ease-in-out infinite}
.pp-banner{position:absolute;left:0;right:0;display:flex;gap:10px;overflow:hidden;pointer-events:none;z-index:2;padding-top:2px}
.pp-banner::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--pp-cord,var(--line))}
.pp-banner .ppf:nth-child(6n+1){color:var(--azul)}
.pp-banner .ppf:nth-child(6n+2){color:var(--sol)}
.pp-banner .ppf:nth-child(6n+3){color:var(--rojo)}
.pp-banner .ppf:nth-child(6n+4){color:var(--verde)}
.pp-banner .ppf:nth-child(6n+5){color:var(--violeta)}
.pp-banner .ppf:nth-child(6n){color:var(--rosa)}
.pp-banner .ppf:nth-child(2n){animation-delay:-.8s;animation-duration:3.6s}
.pp-banner .ppf:nth-child(3n){animation-delay:-1.7s;animation-duration:2.9s}
.pp-banner .ppf:nth-child(5n){animation-delay:-2.4s}
.pp-banner.is-hot .ppf{animation-duration:.55s}
@keyframes pp-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.support{position:relative}
.pp-banner--top{top:-38px;height:38px}
.pp-banner--foot{top:0;height:34px;--pp-cord:#fff}
.pp-banner--foot .ppf{width:30px;height:27px}
.pp-banner--page{position:relative;height:40px;margin-bottom:-4px}
.pp-banner--pass{position:relative;height:36px;--pp-cord:currentColor}
.site-footer{position:relative}

/* piezas que vuelan (burst / shower) */
#ccos-fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:120;perspective:700px}
.fx-piece{position:absolute;will-change:transform,opacity}
.fx-piece .ppf{animation:none;width:100%;height:auto;color:inherit}

/* botones de unirse: pulso suave hasta ganar el primer sello */
.fx-pulse{animation:fx-wig 5s ease-in-out infinite}
@keyframes fx-wig{0%,86%,100%{transform:none}89%{transform:rotate(-2.5deg) scale(1.04)}92%{transform:rotate(2.5deg) scale(1.04)}95%{transform:rotate(-1.5deg)}}
.fx-pulse:hover{animation:none}

/* tira del pasaporte dentro del bloque de apoyo */
.fx-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;font-size:.85rem;font-weight:700}
.fx-strip b{font-family:var(--f-d);font-weight:400;letter-spacing:.03em;text-transform:uppercase;font-size:1rem}
.fx-strip span:last-child{flex-basis:100%;font-weight:600}
.fx-strip span:last-child:empty{display:none}
.fx-strip em{font-style:normal}
.fx-mini{display:inline-block;width:110px;height:12px;border:2px solid currentColor;background:transparent;overflow:hidden}
.fx-mini i{display:block;height:100%;width:0;background:currentColor;transition:width .5s}

/* ---------- Botón flotante del pasaporte ---------- */
.fx-fab{position:fixed;right:16px;bottom:16px;z-index:95;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:92px;padding:7px 12px 12px;border:3px solid var(--line);background:var(--sol);color:#000;box-shadow:4px 4px 0 var(--shadow);cursor:pointer;font-family:var(--f-b);line-height:1.1;text-align:left}
.fx-fab:hover{background:#fff}
.fx-fab:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow)}
.fx-fab__t{font-family:var(--f-d);font-size:1rem;letter-spacing:.05em;text-transform:uppercase}
.fx-fab__lv{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fx-fab__bar{position:absolute;left:0;right:0;bottom:0;height:6px;border-top:2px solid #000;background:#fff}
.fx-fab__bar i{display:block;height:100%;width:0;background:#000;transition:width .5s}

/* ---------- Cajón del pasaporte ---------- */
.fx-pass{position:fixed;right:16px;bottom:84px;z-index:100;width:min(380px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:auto;background:var(--surface);color:var(--ink);border:4px solid var(--line);box-shadow:8px 8px 0 var(--shadow);padding:0 16px 14px}
.fx-pass[hidden]{display:none}
.fx-pass .pp-banner--pass{margin-inline:-16px;color:var(--ink)}
.fx-pass__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.fx-pass__head h2{font-size:1.7rem}
.fx-x{border:3px solid var(--line);background:var(--surface);color:var(--ink);width:34px;height:34px;font:700 1.3rem/1 var(--f-b);cursor:pointer;padding:0}
.fx-x:hover{background:var(--sol);color:#000}
.fx-pass__lv{margin:8px 0 6px;font-weight:700}
.fx-pass__lv strong{font-family:var(--f-d);font-weight:400;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;margin-right:6px}
.fx-bar{height:16px;border:3px solid var(--line);background:var(--soft);overflow:hidden}
.fx-bar i{display:block;height:100%;width:0;background:var(--azul);transition:width .6s}
.fx-pass__next{font-size:.85rem;margin:6px 0 12px;color:var(--muted)}
.fx-stamps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-st{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;min-height:104px;padding:8px 4px;border:3px dashed var(--line);line-height:1.15}
.fx-st b{max-width:100%;font-family:var(--f-d);font-weight:400;font-size:.8rem;letter-spacing:0;text-transform:uppercase}
.fx-st small{max-width:100%;overflow-wrap:anywhere;font-size:.64rem;font-weight:600}
.fx-st__s{position:absolute;top:2px;right:4px;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.fx-st.is-off{opacity:.55}
.fx-st.is-on{border-style:solid;background:var(--tb);color:var(--tf);transform:rotate(var(--rt,-3deg));box-shadow:3px 3px 0 var(--shadow)}
.fx-st.is-on small{display:none}
.fx-st.is-new{animation:fx-stamp .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes fx-stamp{0%{transform:scale(2.4) rotate(-18deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(var(--rt,-3deg))}}
.fx-pass__cta{margin:0 0 10px}
.fx-note{font-size:.76rem;color:var(--muted);margin:0 0 6px}
.fx-link{border:0;background:none;color:inherit;font:700 .8rem/1.2 var(--f-b);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}

/* ---------- Aviso de sonido y avisos de XP ---------- */
.fx-hint{position:fixed;right:16px;bottom:84px;z-index:96;width:min(300px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:3px solid var(--line);box-shadow:5px 5px 0 var(--shadow);padding:12px 14px}
.fx-hint p{margin:0 0 10px;font-size:.92rem}
.fx-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);z-index:130;max-width:90vw;background:#000;color:#fff;border:3px solid var(--sol);font-weight:800;padding:10px 16px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.fx-toast.show{opacity:1;transform:translate(-50%,0)}

/* 404: el número se sacude */
.fx-wob{animation:fx-wob .6s}
@keyframes fx-wob{0%,100%{transform:none}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}

/* un poco de vida en los botones y tarjetas */
.ccos-fiesta .btn,.ccos-fiesta .tile{transition:transform .12s}
.ccos-fiesta .tile:hover{transform:translateY(-3px) rotate(-.6deg)}

@media (max-width:520px){
	.fx-fab{min-width:0;padding:6px 10px 11px}
	.fx-fab__t{font-size:.9rem}
	.fx-st b{font-size:.68rem}
	.fx-pass{bottom:76px;right:12px}
	.fx-hint{right:12px;bottom:76px}
}
@media print{.fx-fab,.fx-pass,.fx-hint,.fx-toast,#ccos-fx,.pp-banner{display:none!important}}
@media (prefers-reduced-motion:reduce){.ppf,.fx-pulse,.fx-st.is-new,.fx-wob{animation:none!important}}


/* ---------- Versión sobria: cinta plana de bloques de color, sin banderines ni aleteo ---------- */
.pp-banner{height:10px!important;padding:0;gap:0;border-block:3px solid var(--line);box-sizing:content-box;background:repeating-linear-gradient(90deg,var(--azul) 0 48px,var(--sol) 48px 96px,var(--rojo) 96px 144px,#000 144px 192px)}
.pp-banner::before{display:none}
.pp-banner .ppf{display:none}
.pp-banner--top{top:-19px}
.pp-banner--foot{top:0;border-top:0;border-color:#fff;height:8px!important}
.pp-banner--page{margin:0}
.pp-banner--pass{margin-inline:-16px;border-top:0}
.fx-pulse{animation:none!important}
.ccos-fiesta .tile:hover{transform:none}
.fx-piece .ppf{display:block}

/* Íconos del propio theme en los sellos */
.fx-ic{display:block;width:44px;height:44px}
.fx-ic svg{display:block;width:100%;height:100%}
.fx-st.is-off .fx-ic{filter:grayscale(1);opacity:.7}

/* ---------- Celu: nada de lo flotante queda fuera de pantalla ---------- */
.fx-fab{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.fx-pass,.fx-hint{right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - 24px)}

/* 1.5: todo botón/texto de la fiesta hereda las tipografías del theme (Anton + Montserrat) */
.fx-pass,.fx-pass button,.fx-hint,.fx-hint button,.fx-toast,.fx-fab,.quizw button{font-family:var(--f-b)}
.fx-fab__t,.fx-pass__lv strong,.fx-st b,.fx-strip b,.quizw__t{font-family:var(--f-d)}