/* ─── La Timba · «Wrapped» de la comparativa amb la BGG (finestra de diapositives, vici.html) ─── */
.wr { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(8, 20, 45, .78); }
.wr-card { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: min(720px, calc(100vh - 24px)); height: min(720px, calc(100dvh - 24px)); border-radius: 22px; overflow: hidden; color: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); outline: none; }
.wr-blau { background: linear-gradient(165deg, #1a57b8, #124797 55%, #0c3470); }
.wr-fosc { background: linear-gradient(165deg, #0f3a82, #0a2a5e 60%, #071d44); }
.wr-groc { background: linear-gradient(165deg, #f6cf4d, #f0c030 60%, #e0a81a); color: #0c3470; }

.wr-prog { display: flex; gap: 4px; padding: 14px 16px 0; }
.wr-prog span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); transition: background .2s; }
.wr-prog span.fet, .wr-prog span.ara { background: #fff; }
.wr-groc .wr-prog span { background: rgba(12, 52, 112, .25); }
.wr-groc .wr-prog span.fet, .wr-groc .wr-prog span.ara { background: #0c3470; }

.wr-tanca { position: absolute; top: 26px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .18); color: inherit; font: 400 26px/1 var(--ui, system-ui); cursor: pointer; }
.wr-groc .wr-tanca { background: rgba(12, 52, 112, .12); }

.wr-cos { flex: 1; display: flex; overflow-y: auto; padding: 34px 24px 8px; }
.wr-diap { width: 100%; margin-block: auto; animation: wr-entra .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes wr-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.wr-kicker { margin: 0 0 10px; font: 800 13px var(--ui, system-ui); letter-spacing: .1em; text-transform: uppercase; color: #f0c030; padding-right: 36px; }
.wr-groc .wr-kicker { color: #7a5500; }

.wr-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0 14px; }
.wr-col { display: flex; flex-direction: column; min-width: 0; }
.wr-col-b { text-align: right; }
.wr-num { font: 400 clamp(2.6rem, 14vw, 4rem) / 1 var(--display, Impact, sans-serif); letter-spacing: .02em; }
.wr-et { font: 800 13px var(--ui, system-ui); opacity: .9; overflow-wrap: anywhere; }
.wr-vs { font: 400 1.1rem var(--display, Impact, sans-serif); letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.wr-groc .wr-vs { background: rgba(12, 52, 112, .14); }

.wr-gran { margin: 4px 0 8px; font: 400 clamp(4rem, 22vw, 6.5rem) / .95 var(--display, Impact, sans-serif); letter-spacing: .02em; color: #f0c030; outline: none; }
.wr-gran-nom { font-size: clamp(2.4rem, 13vw, 3.6rem); color: #fff; overflow-wrap: anywhere; }

.wr-titol { margin: 0 0 10px; color: inherit; font: 400 clamp(1.8rem, 8vw, 2.4rem) / 1.05 var(--display, Impact, sans-serif); letter-spacing: .03em; }
.wr-text { margin: 0 0 12px; font: 600 1rem / 1.45 var(--body, system-ui); }

.wr-xips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.wr-xips li { padding: 4px 10px; border-radius: 999px; background: rgba(12, 52, 112, .14); font: 800 12px var(--ui, system-ui); }
.wr-blau .wr-xips li, .wr-fosc .wr-xips li { background: rgba(255, 255, 255, .16); }

.wr-files { margin-top: 6px; }
.wr-fila { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .13); color: inherit; text-decoration: none; }
a.wr-fila:hover, a.wr-fila:focus-visible { outline: 2px solid #f0c030; }
.wr-fila b { display: block; font: 800 16px/1.25 var(--ui, system-ui); }
.wr-fila small { display: block; font: 700 12px var(--ui, system-ui); opacity: .9; }
.wr-fila .wr-fila-et { margin-bottom: 2px; letter-spacing: .06em; text-transform: uppercase; color: #f0c030; opacity: 1; }

.wr-accions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wr-nav { display: flex; gap: 10px; padding: 8px 16px; }
.wr-btn { border: 0; border-radius: 999px; padding: 10px 18px; background: rgba(255, 255, 255, .18); color: inherit; font: 800 14px var(--ui, system-ui); cursor: pointer; }
.wr-btn:disabled { opacity: .35; cursor: default; }
.wr-btn-seg { margin-left: auto; background: #f0c030; color: #0c3470; }
.wr-accions .wr-btn-seg { margin-left: 0; }
.wr-groc .wr-btn { background: rgba(12, 52, 112, .14); }
.wr-groc .wr-btn-seg { background: #0c3470; color: #fff; }
.wr-btn:focus-visible, .wr-tanca:focus-visible, .wr-peu a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wr-groc .wr-btn:focus-visible, .wr-groc .wr-tanca:focus-visible { outline-color: #0c3470; }

.wr-peu { display: flex; justify-content: center; padding: 4px 16px 14px; }
.wr-peu a { display: inline-flex; padding: 4px 10px; border-radius: 10px; background: #fff; }
.wr-peu img { display: block; height: auto; }

@media (prefers-reduced-motion: reduce) { .wr-diap { animation: none; } .wr-prog span { transition: none; } }
@media (max-width: 480px) { .wr { padding: 0; } .wr-card { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; } }