/* =============================================================================
   Vèrtex 2026 · vertex.cviladecans.cat
   Sistema de disseny: landing PAI Viladecans (contenidor 1400, caixes radi 0
   amb filo inferior, botons radi 4, capçaleres de secció en caixa) amb la
   identitat cromàtica de Vèrtex 2026 (blau marí · verd · daurat, imatge
   oficial dels 4 nodes).
   ============================================================================= */
:root {
  --vx-navy: #011039;        /* to de marca: franja de menú, peu, comunitat */
  --vx-navy-2: #0a2352;      /* blocs sobre navy (hover del menú), node 01 */
  --vx-navy-deep: #000a26;   /* hover dels botons navy */
  --vx-green: #00714a;       /* acció i estructura: enllaços, filos, icones */
  --vx-green-br: #009053;    /* verd viu: etiquetes obertes, marques */
  --vx-gold: #f5c364;        /* CTA principal i subratllats del menú */
  --vx-gold-deep: #e9b23b;   /* hover del daurat */
  --vx-gold-ink: #6e4b0c;    /* text daurat llegible sobre clar, node 04 */
  --vx-olive: #5e7c1f;       /* node 03 */
  --vx-dark: #2b3340;        /* text */
  --vx-muted: #5f6772;       /* text secundari */
  --vx-border: #d4d4d4;
  --vx-bg-alt: #f2f5f6;
  --vx-green-tint: #e8f3ee;
  --vx-gold-tint: #fff6e3;
  --vx-container: 1400px;
  --vx-container-x: 45px;
  --vx-section-gap: 96px;
  --font-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'arboria', 'Raleway', system-ui, sans-serif;
  /* Degradat cromàtic de la imatge oficial dels 4 nodes (Vèrtex 2026) */
  --vx-gradient: linear-gradient(115deg, #021138 0%, #007048 45%, #e9b23b 100%);
  /* Variant per a la marca sobre fons blanc (daurat només al tram final) */
  --vx-gradient-ink: linear-gradient(112deg, #011039 0%, #0a2352 28%, #00714a 68%, #e9b23b 100%);
  --icon-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { :root { --vx-container-x: 16px; --vx-section-gap: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; font: 400 1rem/1.6 var(--font-sans); color: var(--vx-dark); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: var(--vx-green); font-weight: 700; text-decoration: none; }
p a, li a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
p a:hover, li a:hover { background-size: 100% 2px; }
:focus-visible { outline: 2px solid var(--vx-green); outline-offset: 3px; }
.container { max-width: var(--vx-container); margin: 0 auto; padding-inline: var(--vx-container-x); }
.narrow { max-width: 62rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--vx-navy); color: #fff; padding: .6rem 1rem; font-weight: 700; }
.skip-link:focus { left: var(--vx-container-x); }

/* --- Capçalera ------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--vx-border); position: relative; z-index: 41; }
.site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .85rem; min-height: 72px; }
.site-header__brand { display: inline-flex; align-items: center; gap: 1.1rem; }
.site-header__brand img { height: 46px; width: auto; }
.site-header__brand .wordmark--gradient { display: block; height: 30px; aspect-ratio: 1936 / 435; background: var(--vx-gradient-ink); -webkit-mask: url(../assets/vertex-wordmark-white.png) no-repeat center / contain; mask: url(../assets/vertex-wordmark-white.png) no-repeat center / contain; }
.site-header__brand .sep { width: 1px; height: 36px; background: var(--vx-border); }
.site-header__meta { margin: 0; padding: .35rem 0 .35rem 1rem; border-left: 3px solid var(--vx-gold); font-size: .9rem; line-height: 1.35; color: var(--vx-muted); white-space: nowrap; }
.site-header__meta b { display: block; color: var(--vx-navy); font-weight: 900; }
@media (max-width: 767px) { .site-header__meta { display: none; } .site-header__right { gap: 0; } .site-header__brand img { height: 34px; } .site-header__brand .wordmark--gradient { height: 24px; } }

/* --- Franja de navegació (sticky) -------------------------------------------- */
.nav-band { position: sticky; top: 0; z-index: 40; background: var(--vx-navy); box-shadow: 0 3px 20px rgb(0 0 0 / .35); }
.nav-band__inner { position: relative; display: flex; align-items: center; justify-content: center; }
.nav-band__logo { position: absolute; left: var(--vx-container-x); top: 50%; transform: translateY(-50%) translateX(-8px); display: inline-flex; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.nav-band__logo img { height: 22px; width: auto; }
.nav-band.is-scrolled .nav-band__logo { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.nav-band__logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-nav { display: flex; align-items: stretch; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.4rem; color: #fff; font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.site-nav a { position: relative; isolation: isolate; }
/* Hover i secció activa: bloc blau una mica més clar que la franja i filo inferior daurat que es desplega */
.site-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vx-navy-2); opacity: 0; transition: opacity .2s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vx-gold); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.site-nav a:hover::before, .site-nav a:focus-visible::before, .site-nav a.is-active::before { opacity: 1; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-active::after { transform: scaleX(1); }
/* Mentre es fa hover sobre un altre element, l'actiu s'atenua: només un element destacat alhora */
.site-nav:hover a.is-active:not(:hover)::before { opacity: .45; }
.site-nav:hover a.is-active:not(:hover)::after { transform: scaleX(1); opacity: .5; }
.site-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.nav-toggle { display: none; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem .25rem; background: none; border: 0; color: #fff; font: 700 .95rem var(--font-sans); cursor: pointer; }
@media (max-width: 991px) {
  .nav-band__inner { flex-direction: column; align-items: stretch; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; flex-direction: column; padding-bottom: .5rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .75rem 1rem; }
  .nav-band__logo { left: auto; right: var(--vx-container-x); top: 1.5rem; transition: none; }
}

/* --- Hero -------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--vx-gradient); }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(1 16 57 / .55) 0%, rgb(1 16 57 / .25) 45%, rgb(1 16 57 / 0) 75%); }
.hero__content { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: end; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero__content--single { grid-template-columns: 1fr; }
.hero__content--single > div { max-width: 62rem; }
.hero__aside { display: grid; gap: .75rem; }
@media (max-width: 991px) { .hero__content { grid-template-columns: 1fr; gap: 2rem; } .hero__aside { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero__aside { grid-template-columns: 1fr; } }
.hero__logo { width: min(100%, 340px); max-width: 100%; height: auto; margin: 0 0 1.5rem; }
.hero__brand { margin: 0 0 .75rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; color: #fff; }
.hero__kicker { margin: 0 0 1rem; font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--vx-gold); }
.hero__tag { margin: 0 0 .6rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; }
.hero__logo--sm { width: min(100%, 320px); margin-bottom: 1.25rem; }
.hero h1 { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.7rem, 3.3vw, 2.7rem); font-weight: 900; line-height: 1.14; max-width: 26ch; text-wrap: balance; }
.hero__sub { margin: 0 0 1.75rem; font-size: 1.1rem; font-weight: 600; max-width: 52ch; color: rgb(255 255 255 / .92); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__aside { display: grid; gap: .75rem; }
.hero-fact { border-left: 3px solid var(--vx-gold); padding: .35rem 0 .35rem 1.1rem; }
.hero-fact b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; line-height: 1.2; }
.hero-fact span { font-size: .95rem; color: rgb(255 255 255 / .9); }

/* --- Botons ------------------------------------------------------------------ */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .75rem 1.5rem; border-radius: 4px; font: 900 .9rem var(--font-sans); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: color .25s ease, border-color .25s ease, transform .1s ease; white-space: nowrap; }
/* Hover: el color de reforç entra per l'esquerra (sense ombres) */
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--btn-wipe, transparent); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--vx-gold); border-color: var(--vx-gold); color: var(--vx-navy); --btn-wipe: var(--vx-gold-deep); }
.btn--primary:hover { border-color: var(--vx-gold-deep); }
.btn--navy { background: var(--vx-navy); border-color: var(--vx-navy); color: #fff; --btn-wipe: var(--vx-green); }
.btn--navy:hover { border-color: var(--vx-green); }
.btn--ghost { background: transparent; color: #fff; border-color: #fff; transition: background .2s ease; }
.btn--ghost::before { display: none; }
.btn--ghost:hover { background: rgb(255 255 255 / .16); }
.btn--outline { background: #fff; color: var(--vx-navy); border-color: var(--vx-navy); --btn-wipe: var(--vx-navy); }
.btn--outline:hover { color: #fff; }
.btn--inverse { background: #fff; color: var(--vx-navy); --btn-wipe: var(--vx-green-tint); }
.btn .arrow { width: 1.05rem; height: 1.05rem; background-color: currentColor; -webkit-mask: var(--icon-arrow) no-repeat center / contain; mask: var(--icon-arrow) no-repeat center / contain; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--vx-navy); outline-offset: 3px; }
.hero .btn:focus-visible, .comm .btn:focus-visible { outline-color: #fff; }

/* --- Seccions ---------------------------------------------------------------- */
.section { padding-block: var(--vx-section-gap); }
.section--alt { background: var(--vx-bg-alt); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.7rem; border: 1px solid var(--vx-border); border-bottom: 3px solid var(--vx-green); background: #fff; margin: 0 0 2.5rem; }
.section-header h2 { margin: 0; font-size: 1.25rem; font-weight: 900; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; color: var(--vx-navy); }
.section-header--sub { margin-top: 3rem; }   /* capçalera dins d'una secció (Categories dels premis) */
.lead { font-size: 1.15rem; font-weight: 600; color: var(--vx-dark); max-width: 65ch; }
.text-col { max-width: 65ch; }
.hl-line { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 900; line-height: 1.35; color: var(--vx-navy); border-left: 4px solid var(--vx-gold); padding: .25rem 0 .25rem 1.2rem; margin: 2rem 0; max-width: 40ch; }

/* --- Dues columnes: text + costat (aside, targetes apilades, dades, CTA) ------ */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; }
.about-grid > .text-block { max-width: none; }
.about-grid--center { align-items: center; }
.about-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 991px) { .about-grid { grid-template-columns: 1fr; } }
.side-stack { display: grid; gap: 1.25rem; }
.facts.facts--col { grid-template-columns: 1fr; margin: 0; }
.cta-box.cta-box--col { flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0; }
.side-stack--center { align-self: center; }

/* --- Franja del claim (degradat) -------------------------------------------- */
.claim { position: relative; isolation: isolate; overflow: hidden; background: var(--vx-gradient); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.claim::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(50% 80% at 80% 30%, rgb(255 255 255 / .12), transparent 60%), linear-gradient(112deg, transparent 50%, rgb(255 255 255 / .06) 51%, transparent 55%); }
.claim__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: center; }
.claim__mark { height: 110px; width: auto; justify-self: end; }
@media (max-width: 767px) { .claim__mark { justify-self: start; height: 90px; } }
.claim .big { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.claim ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.claim li { display: flex; align-items: center; gap: .75rem; font-size: 1.05rem; font-weight: 700; }
.claim p.sect { margin: .9rem 0 0; font-size: 1rem; font-weight: 700; color: rgb(255 255 255 / .92); }
.claim p.text { margin: 0; font-size: 1.05rem; font-weight: 600; color: rgb(255 255 255 / .95); }
.claim--band .big { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.claim--band .claim__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.claim li::before { content: ""; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); flex: none; }
@media (max-width: 767px) { .claim__inner { grid-template-columns: 1fr; } }
/* lema que fa de capçalera d'una secció (home: els quatre sectors) */
.section--claimhead { padding-top: 0; }
.section--claimhead > .claim { margin-bottom: var(--vx-section-gap); }
/* fotos de contingut: la imatge amb un bloc del degradat Vèrtex desplaçat al darrere */
.photo { position: relative; margin: 0 16px 16px 0; }
.photo::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--vx-gradient); }
.photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo--wide img { aspect-ratio: 3 / 2; }   /* fotos de grup: el 4:3 tallaria gent pels costats */
.photo--logo img { border: 1px solid var(--vx-border); }   /* logos sobre blanc: sense vora, el blanc es perd contra el bloc del degradat */

/* --- Missions (2 targetes) --------------------------------------------------- */
.missions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.m-card { background: #fff; border: 1px solid var(--vx-border); border-bottom: 3px solid var(--mc, var(--vx-green)); padding: 1.6rem 1.7rem; }
.m-card--1 { --mc: var(--vx-navy-2); } .m-card--2 { --mc: var(--vx-green); }
.m-card--1 h4 { color: var(--vx-navy-2); } .m-card--2 h4 { color: var(--vx-green); }
.m-card h4 { margin: 0 0 .35rem; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-green); }
.m-card h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; line-height: 1.25; color: var(--vx-navy); }
.m-card p { margin: 0; color: var(--vx-muted); }
@media (max-width: 767px) { .missions { grid-template-columns: 1fr; } }

/* --- Els 4 nodes --------------------------------------------------------------- */
.nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin: 0 0 2.5rem; }
.node { background: #fff; border: 1px solid var(--vx-border); border-top: 4px solid var(--nc); padding: 1.4rem 1.4rem 1.5rem; }
.node--1 { --nc: var(--vx-navy-2); } .node--2 { --nc: var(--vx-green); } .node--3 { --nc: var(--vx-olive); } .node--4 { --nc: var(--vx-gold-ink); }
.node .n { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 900; line-height: 1; color: var(--nc); margin: 0 0 .75rem; }
.node h3 { margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 900; color: var(--vx-navy); }
.node p { margin: 0; font-size: .95rem; color: var(--vx-muted); }
@media (max-width: 991px) { .nodes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nodes { grid-template-columns: 1fr; } }

/* --- Programa ------------------------------------------------------------------- */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.filter-btn { min-height: 44px; padding: .55rem 1rem; background: #fff; border: 1px solid var(--vx-border); border-radius: 4px; color: var(--vx-dark); font: 700 .85rem var(--font-sans); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-btn:hover { border-color: var(--vx-navy); }
.filter-btn.is-active { background: var(--vx-navy); border-color: var(--vx-navy); color: #fff; }
.prog { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.act { display: grid; grid-template-columns: 8.5rem 1fr; background: #fff; border: 1px solid var(--vx-border); border-bottom: 3px solid var(--vx-green); transition: transform .2s ease, box-shadow .2s ease; }
.act:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(1 16 57 / .12); }
.act.is-hidden { display: none; }
.prog--list { grid-template-columns: 1fr; }
.prog--list .act { grid-template-columns: 11rem 1fr; }
.act--hl { border-bottom-color: var(--vx-gold); }
.act--hl .act__date { background: var(--vx-gold-tint); }
.act--break { border-bottom-color: var(--vx-border); }
.act--break .act__date { background: var(--vx-bg-alt); color: var(--vx-muted); }
.act--special { border-bottom-color: var(--vx-gold); background: var(--vx-gold-tint); }
.act--special .act__date { background: var(--vx-gold); border-right-color: var(--vx-gold-deep); }
.act__body .cards { margin-top: 1rem; }
.act__body .btn { margin-top: .75rem; }
.act__body ul.dots { margin-top: .75rem; }
.act__date { background: var(--vx-green-tint); padding: 1.2rem 1rem; font-weight: 900; color: var(--vx-navy); line-height: 1.25; font-size: .95rem; border-right: 1px solid var(--vx-border); }
.act__body { padding: 1.2rem 1.3rem 1.3rem; }
.act h3 { margin: .3rem 0 .4rem; font-size: 1.05rem; font-weight: 900; line-height: 1.3; color: var(--vx-navy); }
.act p { margin: 0 0 .75rem; font-size: .93rem; color: var(--vx-muted); }
.act .go { font-size: .85rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--vx-green); display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin: -.5rem 0 -.6rem; }
.act .go::after { content: ""; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask: var(--icon-arrow) no-repeat center / contain; mask: var(--icon-arrow) no-repeat center / contain; transition: transform .2s ease; }
.act .go:hover::after { transform: translateX(4px); }
.act .go.is-pending { color: var(--vx-muted); pointer-events: none; }
.act .go.is-pending::after { display: none; }
.badge { display: inline-block; padding: .2rem .55rem; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; background: var(--vx-bg-alt); color: var(--vx-dark); border-radius: 2px; }
.badge--open { background: var(--vx-green); color: #fff; }
.badge--closed { background: #eceff3; color: var(--vx-navy); }
@media (max-width: 991px) { .prog { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .act, .prog--list .act { grid-template-columns: 1fr; } .act__date { border-right: 0; border-bottom: 1px solid var(--vx-border); padding: .8rem 1.3rem; } }

/* --- Comunitat (navy) ------------------------------------------------------------- */
.comm { background: linear-gradient(112deg, var(--vx-navy) 0%, var(--vx-navy-2) 100%); color: #fff; padding-block: var(--vx-section-gap); }
.comm h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; line-height: 1.1; }
.comm .lead { color: #d6e0f0; }
.comm-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; }
.comm .gets { margin-top: 1.75rem; }
.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.gets li { position: relative; padding-left: 1.6rem; color: #c9d6e9; }
.gets li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .5rem; height: .5rem; background: var(--vx-gold); transform: rotate(45deg); }
.gets b { color: #fff; }
.comm-box { background: #fff; color: var(--vx-dark); border-bottom: 3px solid var(--vx-gold); padding: 1.6rem 1.7rem; }
.comm-box h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; color: var(--vx-navy); }
.comm-box p { color: var(--vx-muted); }
.comm-box .btn { margin-top: .5rem; }
@media (max-width: 991px) { .comm-grid { grid-template-columns: 1fr; } }

/* --- Contacte / peu ------------------------------------------------------------ */
.site-footer { background: var(--vx-navy); color: #c9d6e9; font-size: .9rem; border-top: 4px solid transparent; border-image: var(--vx-gradient) 1; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding-block: 3.25rem 2.5rem; }
.site-footer__top--single { grid-template-columns: 1fr; }
.site-footer h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: #fff; }
.site-footer h3 { margin: 0 0 .6rem; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-gold); }
.site-footer p { margin: 0 0 .9rem; }
.site-footer a { color: #fff; }
.footer-logos { display: grid; gap: 1.75rem; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.logo-row img { height: 30px; width: auto; }
.logo-row img.is-lg { height: 44px; } /* marques compactes (Ajuntament, 2 línies amb corona; Gremi de la Bioconstrucció, quadrat): més alçada per llegir-se */
.footer-logos .legal { margin: .5rem 0 0; font-size: .78rem; line-height: 1.5; color: #9fb0cc; max-width: 80ch; }
.site-footer__legal { border-top: 1px solid rgb(255 255 255 / .15); }
.site-footer__legal .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; font-size: .82rem; }
.site-footer__legal img { height: 30px; width: auto; }
@media (max-width: 991px) { .site-footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* --- Reveal ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
  .act.reveal.is-visible { transition: transform .2s ease, box-shadow .2s ease; }
}
@media print { .nav-band, .hero__actions, .filter-bar { display: none; } .hero, .claim, .comm { background: #fff !important; color: #000 !important; } }

/* --- Components de les subpàgines (jornada, premis, hackathon, SCEWC) ------- */
/* Tornada a la portada (subpàgines): un sol enllaç amb fletxa + logo compacte (el logo apareix en fer scroll) */
.nav-back { position: absolute; left: var(--vx-container-x); top: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; gap: .75rem; padding: 0 .9rem 0 .8rem; min-width: 48px; color: #fff; isolation: isolate; }
.nav-back::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vx-navy-2); opacity: 0; transition: opacity .2s ease; }
.nav-back::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vx-gold); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.nav-back:hover::before, .nav-back:focus-visible::before { opacity: 1; }
.nav-back:hover::after, .nav-back:focus-visible::after { transform: scaleX(1); }
.nav-back:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.nav-back .arrow { flex: none; width: 1.15rem; height: 1.15rem; background-color: currentColor; -webkit-mask: var(--icon-arrow) no-repeat center / contain; mask: var(--icon-arrow) no-repeat center / contain; transform: scaleX(-1); transition: transform .2s ease; }
.nav-back:hover .arrow { transform: scaleX(-1) translateX(3px); }
.nav-back img { height: 22px; width: auto; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.nav-band.is-scrolled .nav-back img { opacity: 1; transform: none; }
@media (max-width: 991px) {
  .nav-band--sub .nav-toggle { margin-left: auto; align-self: flex-end; }
  .nav-band--sub .nav-back { padding: 0 .7rem; }
}
.text-block { max-width: 65ch; }
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards--2, .cards--4 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--vx-border); border-top: 4px solid var(--cc, var(--vx-navy-2)); padding: 1.4rem 1.5rem 1.5rem; }
.card--green { --cc: var(--vx-green); }
.card--gold { --cc: var(--vx-gold); background: #fffdf9; }
.card--olive { --cc: var(--vx-olive); }
.card--goldink { --cc: var(--vx-gold-ink); }
.card .kicker { display: block; margin: 0 0 .35rem; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--kc, var(--vx-green)); }
.card--gold .kicker { --kc: var(--vx-gold-ink); }
.card h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; line-height: 1.25; color: var(--vx-navy); }
.card p { margin: 0; font-size: .95rem; color: var(--vx-muted); }
.card p + p, .card p + ul { margin-top: .6rem; }
.card .tag { display: inline-block; margin: 0 0 .5rem; padding: .2rem .55rem; background: var(--vx-navy); color: #fff; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.card .room-title { display: block; margin: 0 0 .35rem; font-weight: 900; color: var(--vx-green); }
ul.dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; color: var(--vx-muted); }
ul.dots li { position: relative; padding-left: 1.3rem; }
ul.dots li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .45rem; height: .45rem; background: var(--vx-green-br); transform: rotate(45deg); }
ul.dots strong { color: var(--vx-dark); }
.note { margin: 2rem 0 0; background: var(--vx-green-tint); border-left: 4px solid var(--vx-green); padding: 1.2rem 1.4rem; }
.note p { margin: 0; }
.callout { margin: 1.75rem 0 2.25rem; background: var(--vx-gold-tint); border-left: 4px solid var(--vx-gold); padding: 1.3rem 1.5rem; }
.callout h4 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; color: var(--vx-gold-ink); }
.callout p { margin: 0; font-size: .95rem; }
.cta-box { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--vx-border); border-left: 5px solid var(--vx-green); padding: 1.75rem 2rem; margin-top: 1.5rem; }
.cta-box h3 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; color: var(--vx-navy); }
.cta-box p { margin: 0; color: var(--vx-muted); }
.cta-box--soft { background: var(--vx-bg-alt); border-left-color: var(--vx-navy); }
.pending-box { margin-top: 1.5rem; background: var(--vx-bg-alt); border: 2px dashed var(--vx-border); padding: 2.5rem 1.5rem; text-align: center; color: var(--vx-muted); }
.pending-box p { margin: 0; }
.btn.is-pending { background: var(--vx-bg-alt); color: var(--vx-muted); border-color: var(--vx-border); pointer-events: none; --btn-wipe: transparent; }
.hub { background: var(--vx-navy-2); color: #fff; padding-block: 3rem; }
.hub__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hub h2 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.hub p { margin: 0; color: #cbd5e1; max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.facts li { border-left: 3px solid var(--vx-gold); padding: .3rem 0 .3rem 1rem; }
.facts b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--vx-navy); line-height: 1.2; }
.facts span { font-size: .92rem; color: var(--vx-muted); }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.section-intro { max-width: 65ch; margin-bottom: 2rem; }
.logos-band { background: var(--vx-navy); padding-block: 2.5rem; }
.logos-band img { width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }

/* --- Formularis de maqueta (sense enviament) ---------------------------------- */
.vx-form .field { margin-bottom: .9rem; }
.vx-form label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 800; color: var(--vx-muted); }
.vx-form input, .vx-form select, .vx-form textarea { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--vx-border); border-radius: 4px; background: #fff; color: var(--vx-dark); font: 600 .95rem var(--font-sans); }
.vx-form input:focus, .vx-form select:focus { outline: 2px solid var(--vx-green); outline-offset: 1px; border-color: var(--vx-green); }
.vx-form .chks { border: 1px solid var(--vx-border); padding: .7rem .9rem .5rem; margin: 0 0 1rem; }
.vx-form legend { padding: 0 .3rem; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-muted); }
.vx-form .chks label { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; font-size: .9rem; font-weight: 600; color: var(--vx-dark); }
.vx-form .chks input { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; accent-color: var(--vx-green); }
.vx-form .req { color: var(--vx-green); }
.vx-form .btn--block { display: flex; width: 100%; white-space: normal; }
.vx-form .form-note { margin: .75rem 0 0; font-size: .8rem; color: var(--vx-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { margin-top: 1.5rem; background: #fff; border: 1px solid var(--vx-border); border-bottom: 3px solid var(--vx-green); padding: 2rem; max-width: 62rem; }
.form-card h3 { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; color: var(--vx-navy); }
.vx-form .is-sent { margin: 1rem 0 0; padding: .9rem 1.1rem; background: var(--vx-green-tint); border-left: 4px solid var(--vx-green); font-weight: 700; }

/* --- Commutador de tema (només pàgines amb .theme-toggle) --------------------- */
.site-header__right { display: flex; align-items: center; gap: 1.25rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--vx-border); border-radius: 4px; color: var(--vx-navy); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.theme-toggle:hover { border-color: var(--vx-navy); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] body { background: #061437; color: #dbe4f3; }
html[data-theme="dark"] .site-header { background: var(--vx-navy); border-bottom-color: rgb(255 255 255 / .14); }
html[data-theme="dark"] .wordmark--gradient { background: linear-gradient(112deg, var(--vx-green-br) 0%, #2fc27a 40%, var(--vx-gold) 100%); }
html[data-theme="dark"] .site-header__brand .sep { background: rgb(255 255 255 / .25); }
html[data-theme="dark"] .site-header__meta { color: #b9c6dc; }
html[data-theme="dark"] .site-header__meta b { color: #fff; }
html[data-theme="dark"] .theme-toggle { background: var(--vx-navy-2); border-color: rgb(255 255 255 / .25); color: #fff; }
html[data-theme="dark"] .nav-band { box-shadow: 0 3px 20px rgb(0 0 0 / .6); border-bottom: 1px solid rgb(255 255 255 / .1); }
html[data-theme="dark"] .section--alt { background: #0a1d4a; }
html[data-theme="dark"] .section-header { background: var(--vx-navy-2); border-color: rgb(255 255 255 / .14); border-bottom-color: var(--vx-green-br); }
html[data-theme="dark"] .section-header h2, html[data-theme="dark"] .lead, html[data-theme="dark"] .text-block, html[data-theme="dark"] .card h3, html[data-theme="dark"] .act h3, html[data-theme="dark"] .cta-box h3, html[data-theme="dark"] .facts b, html[data-theme="dark"] ul.dots strong, html[data-theme="dark"] .section-header__meta { color: #fff; }
html[data-theme="dark"] .card, html[data-theme="dark"] .act, html[data-theme="dark"] .cta-box { background: var(--vx-navy-2); border-color: rgb(255 255 255 / .14); }
html[data-theme="dark"] .card--gold { background: var(--vx-navy-2); }
html[data-theme="dark"] .card p, html[data-theme="dark"] .act p, html[data-theme="dark"] .cta-box p, html[data-theme="dark"] ul.dots, html[data-theme="dark"] .facts span, html[data-theme="dark"] .text-block p { color: #c3cede; }
html[data-theme="dark"] .act__date { background: #12306d; color: #fff; border-color: rgb(255 255 255 / .14); }
html[data-theme="dark"] .act--hl .act__date { background: var(--vx-gold); color: var(--vx-navy); }
html[data-theme="dark"] .act:hover { box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
html[data-theme="dark"] .note { background: #0f2f5a; color: #dbe4f3; border-left-color: var(--vx-green-br); }
html[data-theme="dark"] main p a, html[data-theme="dark"] main li a, html[data-theme="dark"] .act .go, html[data-theme="dark"] .card .kicker { color: #4fd1a5; }
html[data-theme="dark"] .btn--navy { background: #fff; border-color: #fff; color: var(--vx-navy); --btn-wipe: var(--vx-gold); }
html[data-theme="dark"] .site-footer { background: #030c2b; }
html[data-theme="dark"] .filter-btn { background: var(--vx-navy-2); color: #fff; border-color: rgb(255 255 255 / .2); }

/* --- Auditoria Laws of UX (23/09) ------------------------------------------- */
/* 7. Les anclas no queden sota la franja fixa */
[id] { scroll-margin-top: 56px; }
/* 5. Enllaços externs: icona i text per a lectors de pantalla (el text l'afegeix main.js) */
a[target="_blank"]:not(.btn):not(.go)::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em; background-color: currentColor; -webkit-mask: var(--icon-ext) no-repeat center / contain; mask: var(--icon-ext) no-repeat center / contain; }
.btn[target="_blank"] .arrow, .act .go[target="_blank"]::after { -webkit-mask-image: var(--icon-ext); mask-image: var(--icon-ext); }
.btn[target="_blank"]:hover .arrow, .act .go[target="_blank"]:hover::after { transform: translate(2px, -2px); }
/* 6. Objectius tàctils de 44 px a caselles i enllaç del peu */
.vx-form .chks label { min-height: 44px; margin: 0; }
.site-footer p a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Mode fosc: components de la portada, Jornada i Premis --------------------- */
html[data-theme="dark"] .m-card, html[data-theme="dark"] .node, html[data-theme="dark"] .form-card, html[data-theme="dark"] .pending-box, html[data-theme="dark"] .cta-box--soft, html[data-theme="dark"] .callout { background: var(--vx-navy-2); border-color: rgb(255 255 255 / .14); }
html[data-theme="dark"] .m-card p, html[data-theme="dark"] .node p, html[data-theme="dark"] .callout p, html[data-theme="dark"] .pending-box { color: #c3cede; }
html[data-theme="dark"] .m-card h3, html[data-theme="dark"] .node h3, html[data-theme="dark"] .hl-line, html[data-theme="dark"] .form-card h3 { color: #fff; }
html[data-theme="dark"] .m-card--1 { --mc: #4f7bd9; } html[data-theme="dark"] .m-card--1 h4 { color: #8fb0ff; }
html[data-theme="dark"] .m-card--2 h4 { color: #4fd1a5; }
html[data-theme="dark"] .node--1 { --nc: #4f7bd9; } html[data-theme="dark"] .node--2 { --nc: #4fd1a5; } html[data-theme="dark"] .node--3 { --nc: #a3c94a; } html[data-theme="dark"] .node--4 { --nc: var(--vx-gold); }
html[data-theme="dark"] .card--green { --cc: #4fd1a5; } html[data-theme="dark"] .card--olive { --cc: #a3c94a; } html[data-theme="dark"] .card--goldink { --cc: var(--vx-gold); }
html[data-theme="dark"] .callout { border-left-color: var(--vx-gold); } html[data-theme="dark"] .callout h4 { color: var(--vx-gold); }
html[data-theme="dark"] .callout p strong, html[data-theme="dark"] .m-card p strong, html[data-theme="dark"] .node p strong { color: #fff; }
html[data-theme="dark"] .filter-btn.is-active { background: var(--vx-gold); border-color: var(--vx-gold); color: var(--vx-navy); }
html[data-theme="dark"] .badge { background: #12306d; color: #fff; } html[data-theme="dark"] .badge--closed { background: #12306d; color: #dbe4f3; }
html[data-theme="dark"] .act--break .act__date { background: var(--vx-navy-2); color: #b9c6dc; }
html[data-theme="dark"] .act--special { background: rgb(245 195 100 / .10); }
html[data-theme="dark"] .hub { background: #0a1d4a; border-top: 1px solid rgb(255 255 255 / .1); }
html[data-theme="dark"] .form-card .vx-form label, html[data-theme="dark"] .form-card .vx-form legend, html[data-theme="dark"] .form-card .form-note { color: #b9c6dc; }
html[data-theme="dark"] .form-card .vx-form input, html[data-theme="dark"] .form-card .vx-form select { background: #061437; color: #fff; border-color: rgb(255 255 255 / .25); }
html[data-theme="dark"] .form-card .vx-form .chks { border-color: rgb(255 255 255 / .2); } html[data-theme="dark"] .form-card .vx-form .chks label { color: #dbe4f3; }
html[data-theme="dark"] .pending-box { border-color: rgb(255 255 255 / .25); }
html[data-theme="dark"] .cta-box--soft { border-left-color: var(--vx-gold); }
html[data-theme="dark"] .vx-form .is-sent { background: #0f2f5a; color: #fff; }
html[data-theme="dark"] .site-header__meta b { color: #fff; }
html[data-theme="dark"] .act .go.is-pending { color: #8fa0bb; }