/* ===========================================================
   TEMA 2300 · MEME PRO · EL PRAT · BARÇA
   Capa elegant-futurista sobre l'estètica manga base
   =========================================================== */

:root{
  --barca-blau:#004d98;
  --barca-grana:#a50044;
  --barca-or:#edbb00;
  --barca-blau-clar:#1a6fd4;
  --prat-cel:#7ec8e3;
  --prat-mar:#2e86ab;
  --glass:rgba(14,21,48,.72);
  --glass-borde:rgba(255,255,255,.12);
  --neon-blau:0 0 24px rgba(0,77,152,.55);
  --neon-grana:0 0 24px rgba(165,0,68,.45);
  --neon-or:0 0 28px rgba(237,187,0,.4);
  --fsci:'Orbitron',system-ui,sans-serif;
  --feleg:'Outfit',var(--fbody);
}

/* ---------- escenari ultra-realista (Prat + Camp Nou nit) ---------- */
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(120,185,255,.22), transparent 58%),
    radial-gradient(ellipse 45% 30% at 12% 18%, rgba(0,77,152,.35), transparent 62%),
    radial-gradient(ellipse 40% 28% at 88% 14%, rgba(165,0,68,.28), transparent 58%),
    linear-gradient(185deg, #010408 0%, #061018 18%, #0c1e32 42%, #123a48 68%, #0f2a22 88%, #081810 100%);
}
.bg-stars{
  position:absolute;inset:0;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 8%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 28% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 45% 6%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 62% 11%, rgba(237,187,0,.8), transparent),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 91% 16%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 33% 19%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 55% 24%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 72% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 94% 26%, rgba(255,255,255,.4), transparent);
  animation:starsTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starsTwinkle{from{opacity:.4}to{opacity:.7}}
.bg-stadium-lights{
  position:absolute;top:-5%;left:0;right:0;height:58%;
  background:
    radial-gradient(ellipse 28% 22% at 8% 0%, rgba(255,248,220,.42), transparent 72%),
    radial-gradient(ellipse 28% 22% at 92% 0%, rgba(255,248,220,.42), transparent 72%),
    radial-gradient(ellipse 55% 35% at 50% -5%, rgba(255,255,255,.28), transparent 68%),
    conic-gradient(from 270deg at 50% 120%, transparent 0deg, rgba(237,187,0,.06) 8deg, transparent 16deg, rgba(0,77,152,.08) 24deg, transparent 32deg);
  animation:lightsPulse 9s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes lightsPulse{from{opacity:.75;filter:brightness(1)}to{opacity:1;filter:brightness(1.12)}}
.bg-city{
  position:absolute;bottom:30%;left:0;right:0;height:22%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(6,12,24,.5) 35%, rgba(10,18,36,.92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Crect fill='%23081020' width='1200' height='120'/%3E%3Crect fill='%23121c34' x='20' y='45' width='55' height='75'/%3E%3Crect fill='%231a2848' x='85' y='30' width='40' height='90'/%3E%3Crect fill='%23101830' x='140' y='55' width='70' height='65'/%3E%3Crect fill='%23203050' x='230' y='20' width='35' height='100'/%3E%3Crect fill='%23121c34' x='280' y='48' width='90' height='72'/%3E%3Crect fill='%231a2848' x='390' y='35' width='45' height='85'/%3E%3Crect fill='%23283858' x='450' y='15' width='30' height='105'/%3E%3Crect fill='%23101830' x='500' y='50' width='120' height='70'/%3E%3Crect fill='%231a2848' x='640' y='28' width='50' height='92'/%3E%3Crect fill='%23203050' x='710' y='42' width='80' height='78'/%3E%3Crect fill='%23121c34' x='810' y='22' width='38' height='98'/%3E%3Crect fill='%23283858' x='860' y='38' width='95' height='82'/%3E%3Crect fill='%23101830' x='980' y='52' width='65' height='68'/%3E%3Crect fill='%231a2848' x='1060' y='25' width='42' height='95'/%3E%3Crect fill='%23edbb00' opacity='.35' x='455' y='8' width='6' height='6'/%3E%3Crect fill='%23edbb00' opacity='.25' x='718' y='18' width='5' height='5'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
  opacity:.88;
}
.bg-pitch{
  position:absolute;bottom:10%;left:-5%;right:-5%;height:34%;
  transform:perspective(900px) rotateX(14deg);
  transform-origin:center bottom;
  background:
    repeating-linear-gradient(90deg,
      rgba(22,82,48,.98) 0, rgba(22,82,48,.98) 72px,
      rgba(18,72,42,.98) 72px, rgba(18,72,42,.98) 144px),
    linear-gradient(180deg, rgba(12,40,28,.2) 0%, #145a32 12%, #0d4526 100%);
  box-shadow:inset 0 40px 80px rgba(0,0,0,.35);
}
.bg-pitch::after{
  content:"";position:absolute;inset:18% 8% auto;
  height:2px;background:rgba(255,255,255,.12);border-radius:2px;
  box-shadow:0 0 30px rgba(255,255,255,.08);
}
.bg-water{
  position:absolute;bottom:0;left:0;right:0;height:14%;
  background:
    linear-gradient(180deg, rgba(46,134,171,.15), rgba(14,21,48,.85) 70%),
    repeating-linear-gradient(92deg, transparent, transparent 40px, rgba(126,200,227,.04) 40px, rgba(126,200,227,.04) 80px);
  animation:waterShimmer 12s linear infinite;
}
@keyframes waterShimmer{to{background-position:160px 0, 80px 0}}
.bg-fog{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 40% at 50% 85%, rgba(126,200,227,.12), transparent 70%);
  animation:fogDrift 18s ease-in-out infinite alternate;
}
@keyframes fogDrift{from{opacity:.5;transform:translateX(-2%)}to{opacity:.85;transform:translateX(2%)}}
.bg-noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 45%, transparent 35%, rgba(2,4,12,.72) 100%);
}
body.vista-dia .bg-stadium-lights{opacity:1}
body.vista-dia .bg-pitch{filter:saturate(1.15) brightness(1.05)}
body.vista-login .bg-scene{filter:saturate(1.1) brightness(1.05)}

/* ---------- capes ambientals ---------- */
.holo-grid{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.1;
  background-image:
    linear-gradient(rgba(0,77,152,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165,0,68,.25) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  animation:holoDrift 24s linear infinite;
}
@keyframes holoDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:48px 96px,96px 48px}
}
.blaugrana-stripe{
  position:fixed;top:0;left:0;right:0;height:5px;z-index:250;pointer-events:none;
  background:linear-gradient(90deg,
    var(--barca-blau) 0%, var(--barca-blau) 33%,
    var(--barca-grana) 33%, var(--barca-grana) 66%,
    var(--barca-or) 66%, var(--barca-or) 100%);
  box-shadow:0 2px 18px rgba(0,77,152,.5), 0 2px 12px rgba(165,0,68,.35);
}
.scanline{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.08) 2px, rgba(255,255,255,.08) 4px);
}
.prat-aura{
  position:fixed;bottom:-20%;left:50%;width:140vmax;height:60vmax;z-index:0;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(46,134,171,.28), transparent 62%);
  animation:auraPulse 8s ease-in-out infinite alternate;
}
@keyframes auraPulse{from{opacity:.5;transform:translateX(-50%) scale(1)}to{opacity:.85;transform:translateX(-50%) scale(1.06)}}

body{
  background:var(--nit);
}
body::before{opacity:.12}
.speedlines{opacity:.06}
.fx-rays{opacity:.12}
.prat-aura{opacity:.35}

/* ---------- login épico ---------- */
.badge-prat{
  display:inline-block;font-family:var(--fsci);font-size:.72rem;letter-spacing:2px;
  background:linear-gradient(135deg,var(--prat-mar),var(--prat-cel));
  color:#fff;border:2px solid #0e1530;border-radius:20px;padding:5px 14px;
  margin:0 4px 8px;box-shadow:2px 2px 0 #0e1530;text-transform:uppercase;
}
.badge-barca{
  display:inline-block;font-family:var(--fsci);font-size:.72rem;letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--barca-blau),var(--barca-grana));
  color:#fff;border:2px solid #0e1530;border-radius:20px;padding:5px 14px;
  margin:0 4px 10px;box-shadow:2px 2px 0 #0e1530, var(--neon-blau);
  animation:barcaPulse 3s ease-in-out infinite;
}
@keyframes barcaPulse{50%{box-shadow:2px 2px 0 #0e1530, var(--neon-grana), var(--neon-or)}}
#login .hero-box{
  background:linear-gradient(165deg, rgba(20,29,61,.55), rgba(14,21,48,.4));
  backdrop-filter:blur(14px);
  border:3px solid rgba(255,255,255,.15);
  border-radius:28px;padding:28px 24px 32px;
  box-shadow:0 0 0 1px rgba(0,77,152,.3), 0 20px 50px rgba(0,0,0,.35), 8px 8px 0 #0e1530;
}
#login .hero-box::after{
  background:radial-gradient(circle at 50% 30%, rgba(237,187,0,.25), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(0,77,152,.2), transparent 50%);
}
#login h1 .h1-glow{
  display:inline-block;
  background:linear-gradient(135deg,#fff 0%,var(--barca-or) 40%,#fff 70%,var(--barca-blau-clar) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titolShine 5s linear infinite;
  filter:drop-shadow(3px 3px 0 var(--barca-grana)) drop-shadow(0 0 20px rgba(237,187,0,.35));
}
#login h1 .h1-sub{font-size:.72em;letter-spacing:3px;opacity:.95}
#login .subtit{font-family:var(--feleg);font-weight:600;letter-spacing:.2px;line-height:1.45}
#login .mascota{font-size:3.6rem;filter:drop-shadow(0 0 12px rgba(237,187,0,.4))}
.login-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 4px}
.login-chip{
  font-size:.75rem;font-weight:800;padding:5px 10px;border-radius:999px;
  border:2px solid #0e1530;background:rgba(255,255,255,.08);color:#e8f0ff;
}
.login-chip.barca{background:linear-gradient(135deg,rgba(0,77,152,.5),rgba(165,0,68,.4));color:#fff}

/* ---------- topbar glass ---------- */
.topbar{
  position:sticky;top:0;z-index:120;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.2);
  border:2px solid var(--glass-borde);
  border-top:none;
  border-radius:0 0 18px 18px;
  padding:10px 14px;margin:-8px -8px 14px;
  box-shadow:0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar .titol{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:#fff;
  text-shadow:1px 1px 0 #0e1530, 0 0 18px rgba(237,187,0,.25);
  font-size:1.35rem;
}
.topbar .crest{font-size:1.15rem;filter:drop-shadow(0 0 6px rgba(0,77,152,.6))}
.prat-tag{
  font-family:var(--fsci);font-size:.55rem;letter-spacing:1.5px;
  background:var(--barca-blau);color:#fff;padding:2px 8px;border-radius:8px;
  -webkit-text-fill-color:#fff;vertical-align:middle;
}
.lnk{
  border-radius:10px;padding:4px 8px;text-decoration:none;
  transition:background .15s, transform .1s;
}
.lnk:hover{background:rgba(255,255,255,.12);text-decoration:none;transform:translateY(-1px)}
.lnk.lab-top{
  background:rgba(237,187,0,.2);border:2px solid rgba(237,187,0,.45);
  border-radius:12px;font-size:1.2rem!important;
}

/* ---------- botons hologràfics ---------- */
.btn{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--energia),#ffc94d);
  border-color:#0e1530;
}
.btn::before{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-120%);transition:none;
  pointer-events:none;
}
.btn:hover::before{animation:btnShine .7s ease}
@keyframes btnShine{to{transform:translateX(120%)}}
.btn.hero{
  background:linear-gradient(145deg,var(--hero),#1ee896,var(--barca-blau-clar));
  box-shadow:var(--ombra), var(--neon-blau);
}
.btn.foc{
  background:linear-gradient(145deg,var(--foc),#ff6b7a,var(--barca-grana));
  box-shadow:var(--ombra), var(--neon-grana);
}
.btn.barca{
  background:linear-gradient(135deg,var(--barca-blau),var(--barca-grana));
  color:#fff;box-shadow:var(--ombra), var(--neon-blau);
}

/* ---------- panells glass manga ---------- */
.panell,.bloc,.setmana-fila,.pares-card{
  background:linear-gradient(155deg, rgba(255,255,255,.98), rgba(248,252,255,.94));
  box-shadow:var(--ombra), 0 0 0 1px rgba(0,77,152,.06), 0 12px 40px rgba(0,77,152,.06);
}
.panell.lab-promo,.lab-promo{
  background:linear-gradient(135deg,
    rgba(0,77,152,.08), rgba(165,0,68,.06), rgba(237,187,0,.1))!important;
  border:3px solid var(--barca-blau)!important;
  box-shadow:var(--ombra), var(--neon-blau)!important;
}
.panell.lab-promo h3,.lab-promo h3{
  background:linear-gradient(90deg,var(--barca-blau),var(--barca-grana));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- HUD / nivell barça ---------- */
.nivell{
  background:linear-gradient(135deg,var(--barca-blau),var(--barca-blau-clar));
  color:#fff;box-shadow:3px 3px 0 #0e1530, var(--neon-blau);
  font-family:var(--fsci);font-size:1.1rem;letter-spacing:.5px;
}
.ratxa{
  background:linear-gradient(135deg,var(--barca-grana),#c41e5a);
  box-shadow:3px 3px 0 #0e1530, var(--neon-grana);
}
.barra > i{
  background:linear-gradient(90deg,var(--barca-blau),var(--hero),var(--barca-or));
}
.barra{border-color:var(--barca-blau)}

/* ---------- dia / mapa ---------- */
.dia-head.epic .badge-arc,.badge-arc.badge-mac{
  background:linear-gradient(135deg,var(--barca-blau),var(--barca-grana),var(--barca-or));
  background-size:200% auto;
  animation:badgeGlow 2.5s ease-in-out infinite, titolShine 4s linear infinite;
}
.setmana-fila.mac-arc{
  background:linear-gradient(135deg,#fff 0%,rgba(0,77,152,.06) 40%,rgba(237,187,0,.08) 100%);
  box-shadow:var(--ombra), var(--neon-blau);
}
.illa.avui{
  background:linear-gradient(145deg,var(--barca-or),var(--energia));
  box-shadow:0 0 20px rgba(237,187,0,.55),3px 3px 0 #0e1530;
}
.illa.fet{background:linear-gradient(145deg,var(--hero),var(--barca-blau-clar))}

/* ---------- visuals enriquits ---------- */
.religio-visual{
  background:linear-gradient(160deg,#1a2748,#2a1f4a);
  box-shadow:var(--ombra), inset 0 0 40px rgba(237,187,0,.08);
}
.digital-visual.mac{
  background:linear-gradient(160deg,#0e1530,#004d98 55%,#1a2748);
  border-color:var(--barca-blau-clar);
  box-shadow:var(--ombra), var(--neon-blau);
}
.digital-visual.mac-profile{padding:14px 12px 10px}
.digital-visual.mac-op{
  background:linear-gradient(160deg,#0a1628 0%,#1a3a5c 45%,#8b4513 120%);
  border-color:#d4a574;
  box-shadow:var(--ombra),0 0 24px rgba(212,165,116,.25);
}
.op-badge{
  display:inline-block;margin-bottom:8px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(90deg,#8b0000,#d4a574);font-weight:900;font-size:.72rem;
  font-family:var(--ftitol);letter-spacing:.04em;
}
.mac-op .mac-avatar.op-hat{background:linear-gradient(135deg,#c41e3a,#d4a574);font-size:.9rem}
.mac-path{
  padding:6px 12px;font-size:.62rem;opacity:.85;background:rgba(0,0,0,.2);
  border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mac-side-label{margin:4px 6px 2px;font-size:.55rem;opacity:.55;text-transform:uppercase;letter-spacing:.06em}
.mac-tree{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mac-folder,.mac-file{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.08);font-size:.72rem;width:100%;box-sizing:border-box}
.mac-folder.open{background:rgba(0,122,255,.22);font-weight:800}
.mac-folder.child,.mac-file.child{margin-left:18px;width:calc(100% - 18px);border-left:2px solid rgba(212,165,116,.45)}
.mac-dock span.on{transform:translateY(-4px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.mac-desktop{border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.12);background:#1c1c1e;margin-bottom:10px}
.mac-menubar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:rgba(30,30,32,.95);font-size:.7rem;color:#e8e8ed}
.mac-apple{font-size:.85rem}
.mac-menu-item{opacity:.65}.mac-menu-item.on{opacity:1;font-weight:800}
.mac-clock{margin-left:auto;opacity:.8}
.mac-window{background:linear-gradient(180deg,#2a2a2e,#1e1e22)}
.mac-traffic{display:flex;gap:6px;padding:8px 10px 4px}
.mac-traffic i{width:11px;height:11px;border-radius:50%;display:inline-block}
.mac-close{background:#ff5f57}.mac-min{background:#febc2e}.mac-max{background:#28c840}
.mac-finder{display:grid;grid-template-columns:130px 1fr;min-height:110px}
.mac-sidebar{background:rgba(0,0,0,.25);padding:8px;border-right:1px solid rgba(255,255,255,.08);font-size:.68rem}
.mac-user{display:flex;gap:8px;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.mac-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--barca-blau),var(--barca-grana));display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:.75rem}
.mac-user small{display:block;opacity:.7;font-size:.58rem}
.mac-sidebar ul{list-style:none;margin:0;padding:0}
.mac-sidebar li{padding:4px 6px;border-radius:6px;opacity:.75}
.mac-sidebar li.on{background:rgba(0,122,255,.35);opacity:1;font-weight:800}
.mac-files{display:flex;flex-wrap:wrap;gap:8px;padding:12px;align-content:flex-start;font-size:.72rem}
.mac-files span{background:rgba(255,255,255,.08);padding:6px 10px;border-radius:8px}
.mac-dock{display:flex;justify-content:center;gap:10px;padding:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);font-size:1.1rem}
.mac-dock-large{font-size:1.35rem;padding:14px;gap:14px;margin:12px 0;border-radius:14px}
.mac-menubar-icons{margin-left:auto;opacity:.75;letter-spacing:.15em}
.mac-spotlight-box{margin:24px 16px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.14);
  border:2px solid rgba(237,187,0,.45);font-size:.78rem;text-align:center}
.mac-spotlight-box kbd{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:4px;font-size:.7rem}
.mac-split-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mac-panel{background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;font-size:.72rem}
.mac-panel-title{display:block;font-weight:900;margin-bottom:6px;font-size:.8rem}
.mac-panel-url{color:var(--barca-or);font-weight:700;margin-top:6px}
.mac-present-slide{background:rgba(0,0,0,.28);border:2px solid #d4a574;border-radius:14px;padding:16px 18px;margin:10px 0;text-align:left}
.mac-present-slide h4{margin:0 0 8px;font-family:var(--ftitol)}
.mac-present-slide ul{margin:0;padding-left:1.2em;font-size:.78rem}
.mac-panel-sub{margin-top:4px;font-size:.65rem;opacity:.8;color:var(--barca-or)}
.mac-superpapi{position:relative;padding-bottom:8px}
.mac-sp-mock{position:relative;margin:10px 0 6px;min-height:88px}
.mac-sp-fab{
  position:absolute;right:8px;bottom:0;z-index:2;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;background:linear-gradient(135deg,var(--barca-blau),#1b2a4a);
  border:2px solid var(--barca-or);box-shadow:3px 3px 0 #0e1530, var(--neon-blau);
}
.mac-sp-chat{
  max-width:72%;margin-left:auto;margin-right:52px;
  background:rgba(14,21,48,.92);border:2px solid rgba(237,187,0,.5);border-radius:14px;
  overflow:hidden;font-size:.68rem;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.mac-sp-head{
  display:flex;justify-content:space-between;align-items:center;padding:6px 10px;
  background:linear-gradient(135deg,var(--barca-grana),var(--barca-blau));font-weight:900;font-size:.72rem;
}
.mac-sp-x{opacity:.75;font-size:.65rem}
.mac-sp-msg{padding:6px 10px;line-height:1.35}
.mac-sp-msg.bot{background:rgba(0,77,152,.25)}
.mac-sp-msg.user{background:rgba(255,255,255,.08);text-align:right;font-weight:700}
.mac-sp-input{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:6px 10px;border-top:1px solid rgba(255,255,255,.1);opacity:.85;font-size:.62rem;
}
.expl .mac-tree-pre,.mac-tree-pre{
  display:block;margin:10px 0 14px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(160deg,#0e1530,#1a2748);color:#e8f4ff;
  border:2px solid var(--barca-blau-clar);font-family:var(--fmono,ui-monospace,Consolas,monospace);
  font-size:.72rem;line-height:1.45;overflow-x:auto;white-space:pre;
  box-shadow:inset 0 0 24px rgba(0,77,152,.2);
}
/* ---------- lliçó: llegibilitat + dinamisme ---------- */
.dia-head.epic{
  background:linear-gradient(165deg, rgba(8,14,32,.94), rgba(0,77,152,.82));
  backdrop-filter:blur(18px) saturate(1.25);
  border:3px solid rgba(237,187,0,.65);
  border-radius:20px;padding:16px 20px 18px;margin-bottom:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), var(--neon-blau);
}
.dia-head.epic h2{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:none!important;
  animation:none!important;
  text-shadow:3px 3px 0 #0e1530, 0 0 28px rgba(237,187,0,.35);
  font-size:clamp(1.5rem,4.5vw,2.35rem);
}
.dia-head.bootcamp{
  border:3px solid var(--barca-or);
  background:linear-gradient(165deg, rgba(0,77,152,.88), rgba(14,21,48,.92));
}
.bootcamp-sub{
  margin:8px 0 0;font-weight:700;font-size:.95rem;
  color:#fff;text-shadow:1px 1px 0 #0e1530;
  font-family:var(--feleg);
}
.bloc{
  position:relative;
  background:linear-gradient(158deg, #ffffff 0%, #f6faff 55%, #fffef6 100%)!important;
  border:3px solid #0e1530!important;
  overflow:hidden;
}
.bloc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--barca-blau),var(--barca-or),var(--barca-grana));
}
.bloc h3{
  color:#0a1628!important;
  font-size:clamp(1.15rem,3.2vw,1.45rem);
  text-shadow:none;
  padding-bottom:8px;
  border-bottom:2px dashed rgba(0,77,152,.15);
  margin-bottom:10px;
}
.bloc h3 small{
  background:linear-gradient(135deg,#0e1530,#1a3a5c)!important;
  color:#fff!important;
  border:2px solid var(--barca-or);
  font-family:var(--fsci);
  letter-spacing:.3px;
}
.bloc-digital::before{background:linear-gradient(90deg,var(--mar),var(--barca-blau-clar),var(--barca-or))}
.bloc-repte::before{background:linear-gradient(90deg,var(--foc),var(--barca-grana),var(--barca-or))}
.expl{
  color:#1a2748;
  font-size:1.02rem;
  line-height:1.62;
}
.expl p{margin:.65em 0}
.expl b,.expl strong{color:#003366;font-weight:800}
.expl ul,.expl ol{margin:.5em 0 .8em;padding-left:1.35em}
.expl li{margin:.35em 0}
.passos-panel{
  margin:16px 0 18px;padding:14px 16px;
  background:linear-gradient(135deg, rgba(0,77,152,.08), rgba(237,187,0,.1));
  border:3px solid var(--barca-blau);
  border-radius:16px;
  box-shadow:4px 4px 0 #0e1530;
}
.passos-titol{
  margin:0 0 12px!important;
  font-family:var(--fimpact);
  font-size:1.15rem!important;
  color:#003d7a!important;
  letter-spacing:.3px;
}
.passos-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pas-card{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:2px solid #0e1530;border-radius:14px;
  padding:12px 14px;box-shadow:3px 3px 0 #0e1530;
  animation:pasEntra .5s cubic-bezier(.2,.9,.25,1) both;
  transition:transform .15s, box-shadow .15s;
}
.pas-card:nth-child(1){animation-delay:.04s}
.pas-card:nth-child(2){animation-delay:.08s}
.pas-card:nth-child(3){animation-delay:.12s}
.pas-card:nth-child(4){animation-delay:.16s}
.pas-card:nth-child(5){animation-delay:.2s}
.pas-card:nth-child(n+6){animation-delay:.24s}
.pas-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0e1530}
@keyframes pasEntra{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.pas-n{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--fimpact);
  font-size:1rem;color:#fff;
  background:linear-gradient(135deg,var(--barca-blau),var(--barca-grana));
  border:2px solid #0e1530;box-shadow:2px 2px 0 #0e1530;
}
.pas-txt{font-weight:700;color:#0e1530;line-height:1.45;flex:1}
.acompanya-video{
  background:linear-gradient(135deg,#e8f4fd,#fff)!important;
  border:3px solid var(--barca-blau-clar)!important;
  box-shadow:3px 3px 0 #0e1530;
}
.acompanya-titol{color:#003d7a!important;font-family:var(--fimpact);font-size:1.05rem}
.acompanya-label{color:#a50044!important}
.exercici{
  background:linear-gradient(160deg,#f8fbff,#fff)!important;
  border:2px solid #0e1530!important;
  border-radius:14px!important;
  transition:box-shadow .2s, transform .15s;
}
.exercici:hover{box-shadow:0 4px 16px rgba(0,77,152,.12)}
.exercici label span{color:#0e1530;font-size:1rem;line-height:1.45}
.tanca{
  background:linear-gradient(165deg, rgba(14,21,48,.95), rgba(0,77,152,.75))!important;
  backdrop-filter:blur(12px);
  border-color:var(--barca-or)!important;
}
.tanca h3{color:#fff!important;text-shadow:2px 2px 0 #0e1530}
.tanca textarea{background:#fffef9;color:#0e1530}
.tag-bootcamp{background:linear-gradient(90deg,var(--barca-blau),var(--barca-or))!important;animation:badgeGlow 2s ease-in-out infinite}
.visual-hero{border-width:3px}
.media-title{color:#fff!important;text-shadow:1px 1px 0 #0e1530}
.media-box{border-color:var(--barca-or)!important;box-shadow:var(--ombra), var(--neon-blau)!important}
#inici .subtit,#dia .subtit{color:#e8f0ff;text-shadow:1px 1px 0 #0e1530}
#inici h1,#inici h2{color:#fff;text-shadow:3px 3px 0 #0e1530, 0 0 18px rgba(237,187,0,.25)}

/* ---------- memes pro 2300 ---------- */
.meme-wall-panell{
  border:3px dashed var(--barca-or)!important;
  background:linear-gradient(160deg,rgba(14,21,48,.04),rgba(0,77,152,.06))!important;
}
.meme{
  border-color:var(--barca-or);
  background:linear-gradient(160deg,#0a1024,#141d3d);
  box-shadow:inset 0 0 30px rgba(0,77,152,.15);
}
.meme-strip{
  background:linear-gradient(90deg,var(--barca-blau),#1a2748,var(--barca-grana));
  border-color:var(--barca-or);
}

/* ---------- laboratori lateral ---------- */
.heroi-side .side-tab{
  background:linear-gradient(180deg,var(--barca-or),var(--energia));
  box-shadow:var(--ombra), var(--neon-or);
}
.heroi-calc .side-tab{
  background:linear-gradient(180deg,var(--barca-blau-clar),var(--barca-blau));
  color:#fff;
}
.heroi-side .side-panel{
  background:linear-gradient(165deg,rgba(20,29,61,.97),rgba(14,21,48,.98));
  backdrop-filter:blur(8px);
  border-color:rgba(0,77,152,.5)!important;
}

/* ---------- overlay fi de dia ---------- */
.of-card{
  border-color:var(--barca-or);
  box-shadow:0 0 0 6px var(--barca-blau),0 0 50px rgba(165,0,68,.3),12px 12px 0 #0e1530;
}
.of-title{
  background:linear-gradient(90deg,var(--barca-or),#fff,var(--barca-or));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titolShine 3s linear infinite;
  filter:drop-shadow(2px 2px 0 var(--barca-grana));
}

/* ---------- superpapi ---------- */
#sp-fab{
  background:linear-gradient(135deg,var(--barca-blau),#1b2a4a);
  box-shadow:5px 5px 0 #0e1530, var(--neon-blau);
}
.sp-head{background:linear-gradient(135deg,var(--barca-grana),var(--barca-blau),#7b5cff)}

/* ---------- bounty medalles ---------- */
.bounty:not(.lock){
  background:linear-gradient(160deg,var(--paper),#fff8e8);
  box-shadow:3px 3px 0 #0e1530, 0 0 12px rgba(237,187,0,.2);
}
.bounty.barca-med{
  border-color:var(--barca-blau);
  background:linear-gradient(160deg,#e8f4ff,#fff);
}

/* ---------- prat wave tag ---------- */
.prat-wave{
  display:block;font-family:var(--fsci);font-size:.55em;letter-spacing:2px;
  color:var(--prat-cel);margin-top:4px;font-weight:700;
  text-shadow:0 0 12px rgba(126,200,227,.5);
}

/* ---------- selector idioma ES / CA ---------- */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  margin-right:8px;padding:2px;
  background:rgba(0,77,152,.35);border:2px solid rgba(255,255,255,.25);
  border-radius:999px;vertical-align:middle;
}
.lang-btn{
  font-family:var(--fsci);font-size:.72rem;font-weight:800;letter-spacing:1px;
  padding:4px 10px;border:none;border-radius:999px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.75);transition:.15s;
}
.lang-btn.on{
  background:linear-gradient(135deg,var(--barca-grana),var(--barca-blau));
  color:#fff;box-shadow:0 0 10px rgba(165,0,68,.4);
}
.lang-btn:not(.on):hover{color:#fff;background:rgba(255,255,255,.12)}
.topbar-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px}
.login-lang{display:flex;justify-content:center;margin-top:14px}

/* ---------- footer build ---------- */
.build-foot{
  text-align:center;opacity:.55;font-family:var(--fsci);font-size:.7rem;letter-spacing:1px;margin-top:20px;
}

@media(max-width:560px){
  .topbar{margin:-4px -4px 10px;padding:8px 10px}
  .badge-prat,.badge-barca{font-size:.62rem;letter-spacing:1px}
  .holo-grid{opacity:.14}
}

@media(prefers-reduced-motion:reduce){
  .holo-grid,.blaugrana-stripe,.prat-aura,.badge-barca,.btn::before,
  .bg-stars,.bg-stadium-lights,.bg-water,.bg-fog,.pas-card{animation:none!important}
}