/* ---------- EDITOR ---------- */
.maker { max-width: 1280px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(16px, 4vw, 48px) 3rem; display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; align-items: start; }
.maker__form { padding: 1.5rem; display: grid; gap: .85rem; position: sticky; top: 90px; }
.maker__title { font-size: 2.2rem; }
.maker__form label { display: grid; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.maker__form input:not([type="radio"]):not([type="checkbox"]), .maker__form select {
  font: inherit; font-size: .95rem; color: var(--text); padding: .6rem .8rem; border-radius: 12px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .18); width: 100%;
}
.maker__form select option { color: #111; }
.maker__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.maker__seg, .maker__checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.maker__seg legend, .maker__checks legend { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; }
.maker__seg label, .maker__checks label { display: flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .15); color: var(--text); cursor: pointer; font-size: .82rem; }
.maker__seg label:has(input:checked) { border-color: var(--ball); background: rgba(230, 242, 58, .14); }
.maker__check { display: flex !important; align-items: center; gap: .5rem; color: var(--text) !important; }
.maker__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.maker__hint { margin: 0; font-size: .85rem; color: var(--ball); min-height: 1.2em; }
.maker__preview { min-height: 70vh; display: grid; justify-items: center; align-items: start; }
.stage { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.stage .poster { position: absolute; top: 0; left: 0; transform-origin: top left; }

@media (max-width: 900px) {
  .maker { grid-template-columns: 1fr; }
  .maker__form { position: static; }
  .maker__preview { min-height: 0; order: -1; }
}

/* ---------- CARTELL (mides reals 1080 × 1350 / 1920) ---------- */
.poster {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 26px; padding: 64px 70px 56px;
  font-family: "Inter", sans-serif; color: #fff; background: #070b14;
  --y: #e6f23a; --ink: #0b1424;
}
.p--story { gap: 40px; padding: 110px 70px 90px; }
.poster > * { position: relative; z-index: 3; margin: 0; }
.poster .p__bg, .poster .p__shade, .poster .p__bolt, .poster .p__ball, .poster .p__half, .poster .p__wolf, .poster .p__j { position: absolute; z-index: 1; }
.p__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p__shade { inset: 0; }
.poster i svg { width: 100%; height: 100%; display: block; }

.p__top { display: flex; align-items: center; gap: 22px; }
.p__badge { width: 118px; height: 118px; border-radius: 50%; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.p__brand b { display: block; font-family: "Anton", sans-serif; font-weight: 400; font-size: 58px; line-height: 1; text-transform: uppercase; }
.p__brand span { display: block; font-size: 21px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--y); margin-top: 6px; }
.p__meta { font-size: 25px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

.p__perks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.p__perks li { display: grid; justify-items: center; gap: 4px; padding: 18px 8px 16px; border-radius: 24px; background: rgba(7, 11, 20, .62); border: 2px solid rgba(255, 255, 255, .16); text-align: center; }
.p__perks i { width: 46px; height: 46px; color: var(--y); }
.p__perks b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 46px; line-height: 1.05; }
.p__perks span { font-size: 17px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.p__djs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-size: 22px; }
.p__djs i { width: 40px; height: 40px; color: var(--y); }
.p__djs span { font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.p__djs b { padding: 7px 20px; border-radius: 99px; border: 2px solid var(--y); background: rgba(230, 242, 58, .14); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.p__sponsors { display: flex; justify-content: center; gap: 18px; }
.p__sponsors img { height: 64px; padding: 8px 16px; border-radius: 14px; background: #fff; }
.p__foot { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 2px solid rgba(255, 255, 255, .22); font-size: 26px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.p__foot i { width: 34px; height: 34px; color: var(--y); flex: none; }
.p__foot span { margin-left: auto; font-size: 20px; font-style: italic; letter-spacing: .06em; color: var(--y); text-transform: none; font-weight: 800; }

/* ===== 1 · NIT DE LLOPS ===== */
.p--nit .p__shade {
  background:
    radial-gradient(520px 420px at 50% 50%, rgba(230, 242, 58, .22), transparent 70%),
    linear-gradient(180deg, rgba(7, 11, 20, .94) 0%, rgba(7, 11, 20, .55) 38%, rgba(7, 11, 20, .62) 62%, rgba(7, 11, 20, .97) 100%);
}
.p--nit .p__bolt { left: 50%; top: 18%; width: 34px; height: 64%; margin-left: -17px; transform: rotate(22deg); background: linear-gradient(180deg, transparent, var(--y) 30%, #fff 50%, var(--y) 70%, transparent); filter: drop-shadow(0 0 26px rgba(230, 242, 58, .9)); opacity: .55; clip-path: polygon(40% 0, 100% 0, 55% 46%, 100% 46%, 0 100%, 35% 54%, 0 54%); }
.p__ball {
  width: 300px; height: 300px; right: -70px; bottom: 300px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fbffb0 0%, #e6f23a 32%, #b9cf14 70%, #7e8f08 100%);
  box-shadow: 0 0 120px 30px rgba(230, 242, 58, .45), inset -20px -30px 60px rgba(0, 0, 0, .35);
}
.p__ball::before, .p__ball::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .9); }
.p__ball::before { left: -190px; top: 0; }
.p__ball::after { right: -190px; top: 0; }
.p__ball { overflow: hidden; }
.p--story .p__ball { bottom: 520px; width: 340px; height: 340px; }
.p--nit .p__sticker {
  align-self: flex-start; padding: 10px 34px 12px; background: var(--y); color: #12150a;
  font-family: "Anton", sans-serif; font-size: 64px; line-height: 1; text-transform: uppercase;
  transform: rotate(-4deg); box-shadow: 10px 10px 0 rgba(0, 0, 0, .45);
}
.p--nit .p__teams { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.p--nit .p__team { font-family: "Anton", sans-serif; text-transform: uppercase; line-height: .95; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.p--nit .p__team small { display: block; margin-top: 8px; font-family: "Inter", sans-serif; font-size: 26px; font-weight: 900; letter-spacing: .24em; color: var(--y); }
.p--nit .p__vs { font-family: "Anton", sans-serif; font-size: 170px; font-style: italic; line-height: 1; color: var(--y); transform: skewX(-10deg); margin: 6px 0; text-shadow: 0 0 40px rgba(230, 242, 58, .85), 0 0 90px rgba(230, 242, 58, .45); }
.p--nit .p__when { display: flex; align-items: center; justify-content: center; gap: 56px; padding: 20px 40px; border-radius: 30px; border: 3px solid var(--y); background: rgba(7, 11, 20, .78); box-shadow: 0 0 40px rgba(230, 242, 58, .25); }
.p--nit .p__day, .p--nit .p__time { display: grid; justify-items: center; }
.p--nit .p__time { padding-left: 56px; border-left: 3px solid rgba(255, 255, 255, .25); }
.p--nit .p__when b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 118px; line-height: 1; }
.p--nit .p__when em { font-style: normal; font-size: 54px; color: var(--y); margin-left: 6px; }
.p--nit .p__when span { font-size: 28px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--y); }

/* ===== 2 · TERRA BATUDA ===== */
.p--terra { --y: #ff8a3d; }
.p--terra .p__shade { background: linear-gradient(180deg, rgba(70, 20, 4, .25) 0%, rgba(40, 10, 2, .15) 30%, rgba(24, 7, 2, .88) 58%, rgba(12, 4, 1, .97) 100%); }
.p--terra .p__kicker { text-align: center; font-size: 34px; font-weight: 900; letter-spacing: .34em; text-transform: uppercase; color: #ffd2b0; }
.p--terra .p__giant { text-align: center; font-family: "Anton", sans-serif; font-weight: 400; font-size: 300px; line-height: .82; text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.p--story.p--terra .p__giant { font-size: 330px; }
.p--terra .p__meta { text-align: center; color: #ffd2b0; }
.p--terra .p__board { margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 34px 28px; border-radius: 40px; background: rgba(18, 6, 2, .72); border: 2px solid rgba(255, 138, 61, .55); box-shadow: 0 0 60px rgba(255, 110, 30, .25); }
.p--terra .p__side { display: grid; justify-items: center; gap: 10px; text-align: center; }
.p--terra .p__side img, .p--terra .p__initials { width: 150px; height: 150px; border-radius: 50%; }
.p--terra .p__initials { display: grid; place-items: center; background: linear-gradient(145deg, #ff9a52, #b8380b); font-family: "Anton", sans-serif; font-size: 66px; border: 4px solid rgba(255, 255, 255, .85); }
.p--terra .p__side b { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; }
.p--terra .p__side span { font-size: 28px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--y); }
.p--terra .p__vs { font-family: "Anton", sans-serif; font-size: 110px; font-style: italic; color: #e6f23a; text-shadow: 0 0 40px rgba(230, 242, 58, .6); }
.p--terra .p__when { display: flex; justify-content: center; gap: 22px; }
.p--terra .p__when div { display: flex; align-items: baseline; gap: 12px; padding: 14px 32px; border-radius: 22px; border: 2px solid rgba(255, 138, 61, .6); background: rgba(18, 6, 2, .6); }
.p--terra .p__when b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 84px; line-height: 1; color: var(--y); }
.p--terra .p__when span { font-size: 30px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.p--terra .p__djs b { border-color: var(--y); background: rgba(255, 138, 61, .16); }

/* ===== 3 · MATCHDAY ===== */
.p--matchday { background: #0b1424; }
.p--matchday .p__half { inset: 0; background: var(--y); clip-path: polygon(64% 0, 100% 0, 100% 100%, 30% 100%); }
.p--matchday .p__wolf { width: 980px; right: -240px; top: 120px; filter: brightness(0); opacity: .1; }
.p--matchday .p__j { left: 40px; top: 170px; font-family: "Anton", sans-serif; font-size: 560px; line-height: .8; color: transparent; -webkit-text-stroke: 5px rgba(255, 255, 255, .28); }
.p--story.p--matchday .p__j { top: 260px; font-size: 660px; }
.p--matchday .p__tagline { font-family: "Anton", sans-serif; font-size: 58px; text-transform: uppercase; color: var(--y); line-height: 1; }
.p--matchday .p__stack {
  margin-top: auto; align-self: flex-start; max-width: 100%;
  display: grid; justify-items: start; padding: 34px 48px 38px; background: rgba(11, 20, 36, .94);
  border-left: 16px solid var(--y); transform: skewX(-6deg); box-shadow: 18px 18px 0 rgba(0, 0, 0, .35);
}
.p--matchday .p__stack > * { transform: skewX(6deg); }
.p--matchday .p__teamname { font-size: 28px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; color: var(--y); }
.p--matchday .p__stack b { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; line-height: .95; }
.p--matchday .p__stack i { font-family: "Anton", sans-serif; font-size: 72px; color: var(--y); line-height: 1; }
.p--matchday .p__datebar { align-self: flex-end; display: grid; justify-items: end; padding: 12px 36px; background: #0b1424; transform: skewX(-6deg); box-shadow: 14px 14px 0 rgba(0, 0, 0, .3); }
.p--matchday .p__datebar b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 150px; line-height: 1; color: var(--y); }
.p--matchday .p__datebar span { font-size: 32px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.p--matchday .p__perks li { background: rgba(11, 20, 36, .94); }
.p--matchday .p__djs { padding: 14px; border-radius: 22px; background: rgba(11, 20, 36, .94); }
.p--matchday .p__foot { padding: 18px 24px; border: 0; border-radius: 20px; background: rgba(11, 20, 36, .94); }

/* noms amb mida automàtica (--fs, la calcula el JS segons la llargada) */
.poster { --k: 1; }
.p__team, .p--terra .p__side b, .p--matchday .p__stack b { font-size: calc(var(--fs, 120px) * var(--k)); }

/* ---------- POST 4:5: versió compacta perquè hi càpiga tot ---------- */
.p--post { --k: .78; gap: 16px; padding: 50px 60px 42px; }
.p--post .p__badge { width: 92px; height: 92px; }
.p--post .p__brand b { font-size: 46px; }
.p--post .p__brand span { font-size: 18px; }
.p--post .p__meta { font-size: 21px; }
.p--post .p__perks li { padding: 12px 6px 10px; border-radius: 20px; }
.p--post .p__perks i { width: 36px; height: 36px; }
.p--post .p__perks b { font-size: 36px; }
.p--post .p__perks span { font-size: 14px; }
.p--post .p__djs { font-size: 19px; gap: 10px; }
.p--post .p__djs i { width: 32px; height: 32px; }
.p--post .p__djs b { padding: 5px 16px; }
.p--post .p__foot { font-size: 22px; padding-top: 14px; }
.p--post .p__foot i { width: 28px; height: 28px; }
.p--post .p__foot span { font-size: 17px; }
.p--post.p--nit .p__sticker { font-size: 50px; }
.p--post.p--nit .p__vs { font-size: 124px; margin: 0; }
.p--post.p--nit .p__team small { font-size: 21px; margin-top: 4px; }
.p--post.p--nit .p__when { padding: 12px 34px; gap: 44px; }
.p--post.p--nit .p__time { padding-left: 44px; }
.p--post.p--nit .p__when b { font-size: 88px; }
.p--post.p--nit .p__when em { font-size: 40px; }
.p--post.p--nit .p__when span { font-size: 22px; }
.p--post .p__ball { width: 240px; height: 240px; bottom: 250px; }
.p--post.p--terra .p__kicker { font-size: 28px; }
.p--post.p--terra .p__giant { font-size: 240px; }
.p--post.p--terra .p__board { padding: 24px 22px; }
.p--post.p--terra .p__side img, .p--post.p--terra .p__initials { width: 116px; height: 116px; }
.p--post.p--terra .p__initials { font-size: 50px; }
.p--post.p--terra .p__side span { font-size: 23px; }
.p--post.p--terra .p__vs { font-size: 88px; }
.p--post.p--terra .p__when b { font-size: 66px; }
.p--post.p--terra .p__when span { font-size: 24px; }
.p--post.p--matchday .p__tagline { font-size: 46px; }
.p--post.p--matchday .p__j { font-size: 440px; top: 140px; }
.p--post.p--matchday .p__stack { padding: 24px 38px 28px; }
.p--post.p--matchday .p__teamname { font-size: 22px; }
.p--post.p--matchday .p__stack i { font-size: 54px; }
.p--post.p--matchday .p__datebar { padding: 6px 30px; }
.p--post.p--matchday .p__datebar b { font-size: 112px; }
.p--post.p--matchday .p__datebar span { font-size: 25px; }