/* extraescolars.info redisseny v1: estils de la portada i dels reptes (acotats a .xt) */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/extraescolars-redisseny/fonts/atkinson-hyperlegible-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(/wp-content/uploads/extraescolars-redisseny/fonts/atkinson-hyperlegible-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/uploads/extraescolars-redisseny/fonts/atkinson-hyperlegible-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/wp-content/uploads/extraescolars-redisseny/fonts/bricolage-grotesque-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.xt{--paper:#F4FAFB;
  --card:#FFFFFF;
  --ink:#10333D;
  --ink-soft:#4A6670;
  --line:#D5E6EA;
  --turq:#1DB4DA;
  --turq-deep:#0B7C99;
  --turq-tint:#DDF4FA;
  --coral:#FF7A66;
  --coral-deep:#C2412E;
  --coral-tint:#FFE6E1;
  --sun:#FFC94D;
  --sun-tint:#FFF3D3;
  --lila:#C9B8F5;
  --lila-deep:#5B45A8;
  --lila-tint:#EFEAFD;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r:14px;
  --wrap:1120px;
  color-scheme: light;}
.xt, .xt *{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.xt, .xt *{transition:none!important;animation:none!important}}
.xt{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;margin:0}
.xt a{color:var(--turq-deep)}
.xt a:focus-visible, .xt button:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.xt h1, .xt h2, .xt h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em}
.xt p{margin:0}
.xt .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.xt .eyebrow{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.xt .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.xt .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;padding:12px 20px;border-radius:999px;border:2px solid var(--ink);color:var(--ink);background:var(--card);transition:transform .15s}
.xt .btn:hover{transform:translateY(-2px)}
.xt .btn.solid{background:var(--ink);color:#fff}
.xt .btn.turq{background:var(--turq-deep);border-color:var(--turq-deep);color:#fff}
.xt .btn .arr{font-family:var(--body)}
.xt .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.xt .hero{padding-block:44px 28px}
.xt .hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:800}
.xt .hero h1 .q{color:var(--turq-deep)}
.xt .hero .lead{font-size:1.15rem;color:var(--ink-soft);max-width:56ch;margin-top:12px}
.xt .picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
@media (max-width:820px){.xt .picks{grid-template-columns:1fr}}
.xt .pick{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:20px;overflow:hidden;transition:transform .18s, box-shadow .18s}
.xt .pick:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:6px 8px 0 var(--ink)}
.xt .pick .art{aspect-ratio:16/10;max-width:100%;display:block;border-bottom:2px solid var(--ink)}
.xt .pick .art svg{display:block;width:100%;height:100%}
.xt .pick .txt{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.xt .pick h2{font-size:1.6rem;font-weight:800}
.xt .pick p{color:var(--ink-soft)}
.xt .pick .go{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-weight:700}
.xt .tool{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.xt .pick.joc .art{background:var(--turq-tint)}
.xt .pick.disseny .art{background:var(--coral-tint)}
.xt .pick.musica .art{background:var(--lila-tint)}
.xt .pick .go span:last-child{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink)}
.xt .pick.joc .go span:last-child{background:var(--turq)}
.xt .pick.disseny .go span:last-child{background:var(--coral)}
.xt .pick.musica .go span:last-child{background:var(--lila)}
.xt section.block{padding-block:40px}
.xt .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.xt .head h2{font-size:clamp(1.7rem,3.5vw,2.3rem);font-weight:800}
.xt .head p{color:var(--ink-soft);max-width:58ch;margin-top:6px}
.xt .plan{background:var(--sun-tint);border:2px solid var(--ink);border-radius:24px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px}
@media (max-width:900px){.xt .plan{grid-template-columns:1fr;padding:22px}}
.xt .plan h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:800}
.xt .plan .intro{display:grid;gap:12px;align-content:start}
.xt .plan .intro p{color:var(--ink)}
.xt .plan .alt{font-size:.95rem;background:var(--card);border-radius:12px;padding:12px 14px;border:1px dashed var(--ink-soft)}
.xt .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:640px){.xt .steps{grid-template-columns:1fr}}
.xt .steps li{counter-increment:s;background:var(--card);border-radius:16px;padding:16px;display:grid;gap:8px;align-content:start;border:1px solid var(--line)}
.xt .steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:1.1rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.xt .steps h3{font-size:1.2rem}
.xt .steps p{font-size:.95rem;color:var(--ink-soft)}
.xt .steps a{font-weight:700}
.xt .reptes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.xt .reptes{grid-template-columns:1fr}}
.xt .repte{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:12px;align-content:start;position:relative;overflow:hidden}
.xt .repte::after{content:"";position:absolute;inset:0 0 auto 0;height:8px}
.xt .repte.joc::after{background:var(--turq)}
.xt .repte.disseny::after{background:var(--coral)}
.xt .repte.musica::after{background:var(--lila)}
.xt .repte h3{font-size:1.45rem;font-weight:800}
.xt .repte dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.95rem}
.xt .repte dt{font-weight:700;color:var(--ink-soft)}
.xt .repte dd{margin:0}
.xt .repte .btn{justify-self:start}
.xt .share{background:var(--ink);color:#fff;border-radius:24px;padding:30px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:860px){.xt .share{grid-template-columns:1fr;padding:22px}}
.xt .share h2{font-size:clamp(1.8rem,3.6vw,2.4rem);font-weight:800}
.xt .share p{color:#CFE3E8;margin-top:10px;max-width:52ch}
.xt .share .row{margin-top:18px}
.xt .share .btn{border-color:#fff;background:transparent;color:#fff}
.xt .share .btn.solid{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.xt .groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:420px){.xt .groups{grid-template-columns:1fr}}
.xt .groups a{display:grid;gap:2px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--ink);background:#fff;transition:transform .15s}
.xt .groups a:hover{transform:translateY(-2px)}
.xt .groups a b{font-family:var(--display);font-size:1.05rem}
.xt .groups a span{font-size:.85rem;color:var(--ink-soft)}
.xt .groups a:nth-child(1){background:var(--turq-tint)}
.xt .groups a:nth-child(2){background:var(--coral-tint)}
.xt .groups a:nth-child(3){background:var(--lila-tint)}
.xt .groups a:nth-child(4){background:var(--sun-tint)}
.xt .disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.xt .disc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.xt .disc{grid-template-columns:1fr}}
.xt .disc a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;transition:border-color .15s, transform .15s}
.xt .disc a:hover{border-color:var(--ink);transform:translateY(-2px)}
.xt .disc svg{width:36px;height:36px;flex:none}
.xt .fam{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--lila-tint);border-radius:24px;padding:26px}
@media (max-width:760px){.xt .fam{grid-template-columns:1fr}}
.xt .fam svg{width:84px;height:84px}
.xt .fam h2{font-size:1.7rem;font-weight:800}
.xt .fam p{color:var(--ink-soft);margin-top:6px;max-width:60ch}

.xt .back{display:inline-flex;gap:6px;align-items:center;margin-top:22px;font-weight:700;text-decoration:none;color:var(--ink)}
.xt .back:hover{text-decoration:underline}
.xt .rhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:20px 30px}
@media (max-width:860px){.xt .rhero{grid-template-columns:1fr;gap:20px}}
.xt .rhero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:800;margin-top:8px}
.xt .rhero .what{font-size:1.15rem;margin-top:14px;max-width:48ch}
.xt .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.xt .meta span{font-size:.88rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.xt .rhero .row{margin-top:22px}
.xt .example{border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--card)}
.xt .example svg{display:block;width:100%;height:auto}
.xt .example figcaption{padding:10px 14px;font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--line)}
.xt .p-joc .example{background:var(--turq-tint)}
.xt .p-disseny .example{background:var(--coral-tint)}
.xt .p-musica .example{background:var(--lila-tint)}
.xt .missions{display:grid;gap:22px;padding-bottom:20px}
.xt .mission{background:var(--card);border-radius:22px;border:1px solid var(--line);padding:26px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px}
@media (max-width:760px){.xt .mission{grid-template-columns:1fr;padding:20px;gap:14px}}
.xt .mission .tag{display:grid;gap:8px;align-content:start}
.xt .mission .tag b{font-family:var(--display);font-size:1.7rem;font-weight:800;line-height:1}
.xt .mission .tag span{font-size:.92rem;color:var(--ink-soft)}
.xt .mission .badge{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;border:2px solid var(--ink)}
.xt .m1 .badge{background:var(--sun)}
.xt .m2 .badge{background:var(--coral)}
.xt .m3 .badge{background:var(--lila)}
.xt .m4 .badge{background:var(--turq)}
.xt .mission .badge svg{width:28px;height:28px}
.xt ol.do{margin:0;padding:0;list-style:none;counter-reset:d;display:grid;gap:12px}
.xt ol.do>li{counter-increment:d;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.xt ol.do>li::before{content:counter(d);width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.95rem}
.xt ul.choose{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:600px){.xt ul.choose{grid-template-columns:1fr}}
.xt ul.choose li{background:var(--paper);border-radius:14px;padding:12px 14px}
.xt ul.choose li b{display:block;font-family:var(--display)}
.xt .stack{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:12px;border-radius:12px;background:var(--paper);overflow-x:auto}
.xt .stack .in{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.xt .blk{display:inline-block;font-family:var(--body);font-weight:700;font-size:.88rem;color:#fff;padding:4px 10px;border-radius:7px;white-space:nowrap;width:max-content}
.xt .b-ev{background:#FFBF00;color:#10333D}
.xt .b-mov{background:#3B6FD8}
.xt .b-ctl{background:#A35C00}
.xt .b-sen{background:#1F7499}
.xt .b-op{background:#2F7D2F}
.xt .b-var{background:#AD4D05}
.xt .b-snd{background:#A23CB5}
.xt .b-look{background:#7454D6}
.xt .ml-run{background:#B8551C}
.xt .ml-snd{background:#6A3BB0}
.xt .ml-ctl{background:#176E9C}
.xt .ml-rep{background:#C2307A}
.xt .ml-fx{background:#5C3EA6}
.xt .note{font-size:.92rem;color:var(--ink-soft);margin-top:10px}
.xt .ui{font-family:var(--body);font-weight:700;background:var(--sun-tint);border:1px solid #E9D18F;padding:1px 7px;border-radius:6px;white-space:nowrap}
.xt .help{background:var(--turq-tint);border-radius:22px;padding:22px 26px;display:grid;gap:10px}
.xt .help h2{font-size:1.4rem}
.xt .next{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:26px}

/* Integració amb BuddyBoss: amaga el títol de la plantilla i deixa respirar el contingut */
body:has(.xt) .entry-header, body:has(.xt) .page-header, body:has(.xt) .bb-page-title{display:none}
.xt{overflow-wrap:break-word}
.xt .wrap{max-width:1120px}
.xt h1,.xt h2,.xt h3{color:var(--ink)}
.xt .share h2{color:#fff}
.xt a.btn,.xt a.btn:hover,.xt a.pick,.xt .groups a,.xt .disc a{text-decoration:none}
.xt .btn.turq,.xt .btn.solid{color:#fff}
.xt .share .btn.solid{color:var(--ink)}
.xt ul,.xt ol{margin-left:0}
.xt li{margin:0}
.xt :where(:not(svg,svg *)){font-family:inherit}
.xt svg{max-width:100%}
.xt figure{margin:0}
/* Dins del contenidor de 1040 px del tema, la proposta va en una columna i els passos a sota */
.xt .plan{grid-template-columns:1fr}
.xt .plan .intro{max-width:70ch}
/* Explora totes les eines: nom de la disciplina i eines de mostra */
.xt .disc a{align-items:flex-start}
.xt .disc a span{display:grid;gap:3px}
.xt .disc a b{font-family:var(--display);font-size:1.05rem;font-weight:700}
.xt .disc a small{font-weight:400;font-size:.88rem;line-height:1.4;color:var(--ink-soft)}
/* La nostra comunitat: membres en horitzontal */
.xt .comunitat{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px}
.xt .comunitat h2{font-size:clamp(1.6rem,3vw,2rem);font-weight:800}
.xt .comunitat > p{color:var(--ink-soft);margin-top:6px}
.xt .xt-membres{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.xt .xt-membres{grid-template-columns:repeat(4,minmax(0,1fr))}}
.xt .xt-membre{display:grid;justify-items:center;align-content:start;text-align:center;gap:6px;padding:16px 12px;border-radius:16px;background:var(--paper)}
.xt .xt-membre-avatar img{width:72px;height:72px;border-radius:50%;display:block;object-fit:cover;border:2px solid var(--ink);background:var(--card)}
.xt .xt-membre-nom{font-weight:700;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.xt .xt-membre-nom:hover{text-decoration:underline}
.xt .xt-membre-activitat{font-size:.85rem;line-height:1.35;color:var(--ink-soft)}
@media (max-width:600px){.xt .comunitat{padding:18px}.xt .xt-membres{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.xt .xt-membre{padding:12px 8px}.xt .xt-membre-avatar img{width:56px;height:56px}.xt .xt-membre-nom{font-size:.95rem}.xt .xt-membre-activitat{font-size:.8rem}}
/* Portada ampla (body.xt-portada): el contingut fa servir tot l'ample del contenidor */
body.xt-portada .xt .wrap{max-width:none}
@media (max-width:600px){.xt .wrap{padding-inline:12px}.xt .blk{white-space:normal;width:auto;max-width:100%}.xt .ui{white-space:normal}}