/* ==========================================================================
   NEXE CRUÏLLA — Home
   ========================================================================== */

/* ---------- Hero amb fotografia + overlay + línies fluïdes ---------- */
.nc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background: var(--nc-primary-dark);
}
.nc-hero__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: -4;
  transform: scale(calc(1.06 + var(--nc-hero-progress, 0) * .08));
  transition: transform .2s linear;
}
.nc-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--nc-primary); mix-blend-mode: multiply; opacity: .9; }
.nc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(22, 63, 76, .82) 0%, rgba(30, 91, 110, .5) 50%, rgba(47, 111, 128, .1) 100%),
              linear-gradient(0deg, rgba(22, 63, 76, .75) 0%, rgba(22, 63, 76, 0) 40%);
}
.nc-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; --nc-hero-line: 255,255,255; touch-action: pan-y; }

.nc-hero__inner { flex: 1; display: flex; align-items: center; padding-top: calc(var(--nc-header-h) + 56px); pointer-events: none; }
.nc-hero__content {
  max-width: 760px; pointer-events: auto;
  transform: translateY(calc(var(--nc-hero-progress, 0) * 80px));
  opacity: calc(1 - var(--nc-hero-progress, 0) * 1.2);
}
.nc-hero__eyebrow { color: var(--nc-primary-light); }
.nc-hero__title { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 26px; }
.nc-hero__title em { color: var(--nc-primary-light); font-weight: 300; }
.nc-hero__lead { font-size: var(--nc-fs-lead); line-height: 1.65; color: rgba(255, 255, 255, .9); max-width: 600px; margin-bottom: 38px; }
.nc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.nc-hero__footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 56px; padding-bottom: 40px; }
.nc-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.nc-hero__stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 16px 22px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--nc-radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nc-hero__stat-value { font-family: var(--nc-font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.nc-hero__stat-label { font-family: var(--nc-font-display); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.nc-hero__credit { margin: 0; font-size: .7rem; color: rgba(255, 255, 255, .65); }
.nc-hero__credit a { color: inherit; }

/* Entrada en carregar (body.is-loaded l'afegeix main.js) */
.js .nc-hero__eyebrow, .js .nc-hero__title, .js .nc-hero__lead, .js .nc-hero__actions, .js .nc-hero__stat {
  opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--nc-ease), transform 1.1s var(--nc-ease);
}
.js .is-loaded .nc-hero__eyebrow, .js .is-loaded .nc-hero__title, .js .is-loaded .nc-hero__lead,
.js .is-loaded .nc-hero__actions, .js .is-loaded .nc-hero__stat { opacity: 1; transform: none; }
.js .is-loaded .nc-hero__title { transition-delay: .12s; }
.js .is-loaded .nc-hero__lead { transition-delay: .26s; }
.js .is-loaded .nc-hero__actions { transition-delay: .38s; }
.js .is-loaded .nc-hero__stat:nth-child(1) { transition-delay: .5s; }
.js .is-loaded .nc-hero__stat:nth-child(2) { transition-delay: .6s; }
.js .is-loaded .nc-hero__stat:nth-child(3) { transition-delay: .7s; }

@media (max-width: 760px) {
  .nc-hero::after { background: linear-gradient(0deg, rgba(22, 63, 76, .9) 0%, rgba(30, 91, 110, .55) 60%, rgba(30, 91, 110, .4) 100%); }
  .nc-hero__stat { min-width: 0; flex: 1 1 30%; padding: 12px 14px; }
  .nc-hero__stat-value { font-size: 1.35rem; }
  .nc-hero__stat-label { font-size: .58rem; letter-spacing: .08em; }
}

/* ---------- Àrees de la plataforma ---------- */
.nc-areas { display: flex; flex-wrap: wrap; gap: 28px; }
.nc-area-card {
  position: relative; flex: 1 1 240px; display: flex; flex-direction: column; gap: 16px;
  padding: 34px 28px 30px; background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg);
  box-shadow: var(--nc-shadow-sm); overflow: hidden;
  transition: transform .45s var(--nc-ease), box-shadow .45s, border-color .45s;
}
.nc-area-card:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow); border-color: var(--nc-primary-100); }
.nc-area-card__flow { position: absolute; right: -40px; bottom: -30px; width: 260px; height: 120px; color: var(--nc-primary); opacity: .08; pointer-events: none; }
.nc-area-card__number { position: absolute; right: 28px; top: 26px; font-family: var(--nc-font-display); font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--nc-text-muted); margin: 0; }
.nc-area-card__title { font-size: 1.3rem; margin: 6px 0 0; }
.nc-area-card__text { margin: 0; color: var(--nc-text-soft); }
.nc-area-card__link { margin-top: auto; }
.nc-area-card__link::after { content: ""; position: absolute; inset: 0; }

/* ---------- Qui som: missió i valors ---------- */
.nc-mission { display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 96px); align-items: flex-end; margin-bottom: clamp(48px, 6vw, 72px); }
.nc-mission__head { flex: 1 1 460px; }
.nc-mission__statement { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.nc-mission__statement em { color: var(--nc-primary); font-weight: 500; }
.nc-mission__text { flex: 1 1 380px; max-width: 560px; color: var(--nc-text-soft); }
.nc-mission__text p:last-child { margin-bottom: 0; }
.nc-values { display: flex; flex-wrap: wrap; gap: 24px; }
.nc-value { flex: 1 1 230px; display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-sm); }
.nc-value__title { margin: 4px 0 0; }
.nc-value__text { margin: 0; color: var(--nc-text-soft); font-size: .98rem; }

/* ---------- Mapa: crida final ---------- */
.nc-map__cta { margin: 6px 0 0; font-size: .95rem; color: var(--nc-text-soft); }

/* ---------- Com funciona (fil) ---------- */
.nc-steps { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 64px; --nc-thread-offset: 40px; }
.nc-step { flex: 1 1 260px; padding: 34px 30px 32px; background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-sm); transition: border-color .5s, box-shadow .5s; }
.nc-step.is-reached { border-color: var(--nc-primary-100); box-shadow: var(--nc-shadow); }
.nc-step__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.nc-step__number { font-family: var(--nc-font-display); font-size: .74rem; font-weight: 600; letter-spacing: .18em; color: var(--nc-primary); margin: 0; }
.nc-step__title { margin-bottom: 10px; }
.nc-step__text { margin: 0; color: var(--nc-text-soft); }
@media (max-width: 860px) { .nc-step { flex-basis: 100%; } .nc-steps { gap: 72px; } }

/* ---------- Territori (galeria de castells) ---------- */
.nc-territory { display: flex; flex-wrap: wrap; gap: 20px; }
.nc-place {
  position: relative; flex: 1 1 280px; margin: 0; min-height: 380px; border-radius: var(--nc-radius-lg); overflow: hidden; isolation: isolate; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.nc-place--wide { flex-basis: 520px; }
.nc-place__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform 1.2s var(--nc-ease); }
.nc-place::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--nc-primary); mix-blend-mode: multiply; opacity: .75; transition: opacity .6s; }
.nc-place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22, 63, 76, .85) 0%, rgba(22, 63, 76, 0) 60%); }
.nc-place:hover .nc-place__image { transform: scale(1.05); }
.nc-place:hover::before { opacity: .55; }
.nc-place__caption { padding: 26px 26px 22px; }
.nc-place__label { font-family: var(--nc-font-display); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nc-primary-light); margin: 0 0 6px; }
.nc-place__title { font-size: 1.3rem; margin: 0; color: #fff; }
.nc-place__credit { font-size: .68rem; color: rgba(255, 255, 255, .7); margin: 8px 0 0; }

/* ---------- Preguntes freqüents i crèdits ---------- */
.nc-faq { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); }
.nc-faq__intro { flex: 1 1 300px; }
.nc-faq__list { flex: 2 1 480px; }
.nc-credits { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nc-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 12px; background: var(--nc-bg-softer); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); font-size: .88rem; }
.nc-credit__thumb { width: 56px; height: 38px; object-fit: cover; border-radius: 8px; flex: none; }
.nc-credit__thumb--map { display: block; background: repeating-linear-gradient(135deg, var(--nc-primary-50) 0 6px, var(--nc-primary-100) 6px 7px); border: 1px solid var(--nc-primary-100); }
.nc-credit strong { color: var(--nc-text); font-weight: 600; }
.nc-credit__license { margin-left: auto; }

/* ---------- Contacte i equip ---------- */
.nc-contact { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
.nc-contact__intro { flex: 1 1 340px; }
.nc-contact__intro > p { color: var(--nc-text-soft); }
.nc-contact__details { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nc-contact__detail { display: flex; align-items: center; gap: 14px; }
.nc-contact__detail .nc-iconbox__icon { width: 44px; height: 44px; }
.nc-contact__detail .nc-iconbox__icon svg { width: 20px; height: 20px; }
.nc-contact__form { flex: 1.3 1 420px; align-self: flex-start; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-sm); }
.nc-contact__row { display: flex; flex-wrap: wrap; gap: 18px; }
.nc-contact__row > .nc-field { flex: 1 1 220px; }
.nc-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.nc-team__title { font-size: 1.05rem; margin: 40px 0 16px; }
.nc-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.nc-team__member { display: flex; align-items: flex-start; gap: 14px; }
.nc-team__member .nc-avatar { width: 56px; height: 56px; }
.nc-team__name { margin: 2px 0 2px; font-family: var(--nc-font-display); font-weight: 600; font-size: .95rem; }
.nc-team__name span { margin-left: 8px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nc-primary); }
.nc-team__bio { margin: 0; font-size: .9rem; color: var(--nc-text-soft); line-height: 1.55; }

/* ---------- Com funciona: accions ---------- */
.nc-steps__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }