/* ------------------------------------------------------------------
   HERO DE LA PORTADA — «Constel·lació del currículum». Titular a dalt, mapa interactiu (canvas, js/hero.js) a tota la mida, cercador a baix.
   A la portada la capçalera no es veu fins que es fa scroll: llavors es fon (JS escriu --o a .web-cap). Al resta del web és sempre visible.
   ------------------------------------------------------------------ */
body.portada .web-cap { position: fixed; left: 0; right: 0; top: 0; }
body.portada.cap-fade .web-cap { opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * -14px)); }
body.portada.cap-fade .web-cap.off { visibility: hidden; pointer-events: none; }

.hero-cons { position: relative; z-index: 6; color: #fff; background: #04040d; }
.hero-cons *, .hero-cons *::before, .hero-cons *::after { box-sizing: border-box; }
.hc-stage { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 70% at 72% 38%, #2b1a7a70, transparent 72%),
    radial-gradient(45% 55% at 12% 80%, #0b728560, transparent 72%),
    radial-gradient(40% 50% at 96% 100%, #c2255c50, transparent 72%),
    #04040d; }
.hc-stage::before, .hc-stage::after { content: ""; position: absolute; z-index: 0; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .32; pointer-events: none; }
.hc-stage::before { left: -15vmax; top: -20vmax; background: radial-gradient(#6a46e0, transparent 65%); animation: hc-aurora 26s ease-in-out infinite alternate; }
.hc-stage::after { right: -20vmax; bottom: -25vmax; background: radial-gradient(#c2255c, transparent 65%); animation: hc-aurora 31s ease-in-out -9s infinite alternate-reverse; }
@keyframes hc-aurora { to { translate: 9vmax 6vmax; scale: 1.15; } }
.hc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; cursor: grab; touch-action: pan-y; }
.hc-cv.arrossega { cursor: grabbing; } .hc-cv.sobre { cursor: pointer; }

/* titular */
.hc-titol { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: clamp(1.3rem, 5vh, 3.2rem) 1rem 0; text-align: center; pointer-events: none; }
.hc-h { margin: 0; font-family: var(--titols); font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.028em; text-wrap: balance;
  text-shadow: 0 2px 40px #000d, 0 0 60px #6a46e066; animation: hc-titol 1.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hc-titol { from { opacity: 0; letter-spacing: .1em; filter: blur(14px); } }
.hc-h em { font-style: normal; position: relative; white-space: nowrap; z-index: 0; }
.hc-h em::after { content: ""; position: absolute; left: -.05em; right: -.05em; bottom: .03em; height: .26em; background: var(--sun); border-radius: 4px; z-index: -1; opacity: .92; transform-origin: left; animation: hc-subratlla 1.2s .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hc-subratlla { from { transform: scaleX(0); } }

/* cercador */
.hc-cerca { position: absolute; z-index: 5; left: 50%; bottom: clamp(1.1rem, 4.5vh, 2.6rem); translate: -50% 0; width: min(46rem, calc(100% - 2rem)); animation: hc-cerca 1.2s .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hc-cerca { from { opacity: 0; translate: -50% 30px; } }
.hc-form { position: relative; }
.hc-form svg { position: absolute; left: 1.3rem; top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; fill: none; stroke: #1f1f1f; stroke-width: 2.3; stroke-linecap: round; pointer-events: none; }
.hc-form input { width: 100%; font: 600 1.15rem var(--tipus-text); padding: 1.15rem 1.4rem 1.15rem 3.5rem; border: 3px solid transparent; border-radius: 99px; background: #fff; color: #1f1f1f;
  box-shadow: 0 0 0 1px #ffffff40, 0 18px 50px #000b, 0 0 60px #6a46e066; transition: box-shadow .3s, border-color .3s; }
.hc-form input:not(:placeholder-shown) { padding-right: 7rem; }
.hc-form input::placeholder { color: #4a4660; opacity: 1; }
.hc-form input:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 1px #ffffff40, 0 18px 50px #000b, 0 0 70px #ffe08a88; }
.hc-estat { position: absolute; right: 1.4rem; top: 50%; translate: 0 -50%; font: 700 .9rem var(--tipus-text); color: #6a45d6; pointer-events: none; }

/* controls de zoom */
.hc-ctl { position: absolute; z-index: 4; right: clamp(.8rem, 2vw, 1.8rem); top: 50%; translate: 0 -50%; display: grid; gap: .5rem; }
.hc-ctl button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #ffffff44; background: #ffffff18; color: #fff; font: 600 1.4rem/1 var(--tipus-text); cursor: pointer; backdrop-filter: blur(8px); transition: .2s; display: grid; place-items: center; padding: 0; }
.hc-ctl button:hover { background: #fff; color: #1f1f1f; }
.hc-ctl svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-cons button:focus-visible, .hero-cons input:focus-visible, .hero-cons a:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }

.hc-tip { position: absolute; z-index: 4; pointer-events: none; padding: .3rem .75rem; border-radius: 99px; background: #0b0820ee; border: 1px solid #ffffff44; font: 700 .82rem var(--tipus-text); white-space: nowrap; translate: -50% calc(-100% - 12px); }

/* panell del node triat */
.hc-panel { --vh: clamp(9rem, 24vh, 15rem); position: absolute; z-index: 5; right: clamp(3.8rem, 6vw, 6rem); top: 50%; translate: 0 -50%; width: min(22rem, calc(100% - 2rem)); max-height: calc(100% - 15rem); overflow: auto; padding: 1.3rem 1.3rem 1.4rem; border-radius: 26px;
  background: #0f0a2cdd; border: 1px solid #ffffff33; box-shadow: 0 40px 90px #000b, inset 0 1px 0 #ffffff33; backdrop-filter: blur(20px) saturate(1.4); animation: hc-entra .5s cubic-bezier(.2, .8, .2, 1) both; scrollbar-width: thin; }
@keyframes hc-entra { from { opacity: 0; translate: 40px -50%; } }
.hc-tanca { position: absolute; top: .7rem; right: .8rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: #ffffff1f; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.hc-kick { margin: 0; font: 700 .78rem var(--tipus-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c, #ffe08a); }
.hc-pt { margin: .2rem 2rem .6rem 0; font: 600 1.6rem/1.1 var(--titols); }
.hc-ventall { position: relative; height: var(--vh); margin: .4rem 0 .9rem; }
.hc-ventall .pm { position: absolute; left: 50%; top: 0; height: calc(var(--vh) * .8); width: calc(var(--vh) * .565); margin-left: calc(var(--vh) * -.2825); transform-origin: 50% 130%; transform: rotate(var(--r)) translateX(var(--tx)); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  animation: hc-abre .6s cubic-bezier(.2, .8, .2, 1) both var(--del); }
@keyframes hc-abre { from { transform: rotate(0) translateX(0); opacity: 0; } }
.hc-ventall .pm:hover { transform: rotate(var(--r)) translateX(var(--tx)) translateY(-14px) scale(1.06); z-index: 2; }
.hc-con { margin: 0 0 .5rem; font: 700 .72rem var(--tipus-text); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.hc-veins { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.hc-veins button { display: inline-flex; align-items: center; gap: .4rem; font: 700 .8rem var(--tipus-text); color: #fff; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 99px; padding: .28rem .75rem .28rem .55rem; cursor: pointer; transition: .2s; }
.hc-veins button i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ac); flex: none; }
.hc-veins button:hover { background: #fff; color: #1f1f1f; }
.hc-veure { display: inline-block; font: 700 .95rem var(--tipus-text); color: #1f1f1f; background: #fff; border-radius: 99px; padding: .7rem 1.2rem; text-decoration: none; box-shadow: 0 8px 24px #0005; transition: transform .2s; }
.hc-veure:hover { transform: translateY(-2px); }

/* fulls en miniatura (panell) */
.pm { --ac: #1971c2; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6%; padding: 0 0 7%; overflow: hidden; background: #fffdf8; color: #22202e; border-radius: 6px; text-decoration: none;
  container-type: inline-size; box-shadow: 0 2px 0 #00000014, 0 10px 24px #0000004d; font-family: var(--tipus-text); }
.pm-b { display: flex; justify-content: space-between; align-items: center; padding: 6cqw 8cqw; background: var(--ac); color: #fff; font: 600 8cqw var(--titols); }
.pm-b em { font-style: normal; opacity: .9; }
.pm h5 { margin: 0; padding: 0 8cqw; font: 600 10.5cqw/1.12 var(--titols); color: #22202e; min-height: 2.3em; }
.pm-l { display: grid; gap: 5cqw; padding: 0 8cqw; }
.pm-l i { display: block; height: 3cqw; border-radius: 9px; background: #22202e26; }
.pm-l i:last-child { width: 62%; }
.pm-d { display: flex; gap: 6cqw; padding: 2cqw 8cqw; flex: 1; align-items: center; justify-content: space-around; }
.pm-d i { display: block; width: 24%; aspect-ratio: 1; border: 1.6cqw solid #22202e66; }
.pm.v0 .pm-d i { border-radius: 50%; background: conic-gradient(var(--ac) 0 50%, #fff 0); }
.pm.v1 .pm-d i { border-radius: 2cqw; }
.pm.v2 .pm-d i { border-radius: 50%; }
.pm.v3 .pm-d i { width: 28%; aspect-ratio: 1.6; border-radius: 2cqw; background: linear-gradient(90deg, var(--ac) 0 66%, #fff 0); }
.pm-img { padding: 0; }
.pm-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

@media (max-width: 860px) {
  .hc-stage { min-height: 36rem; }
  .hc-ctl { top: auto; bottom: calc(clamp(1.1rem, 4.5vh, 2.6rem) + 4.6rem); translate: 0; grid-auto-flow: column; right: .8rem; }
  .hc-ctl button { width: 2.3rem; height: 2.3rem; }
  .hc-stage.amb-panell .hc-ctl { display: none; }
  .hc-form input { font-size: .92rem; padding: 1rem 1rem 1rem 2.9rem; } .hc-form input:not(:placeholder-shown) { padding-right: 5.6rem; }
  .hc-form svg { left: 1.1rem; width: 1.25rem; height: 1.25rem; }
  .hc-panel { top: auto; bottom: calc(clamp(1.1rem, 4.5vh, 2.6rem) + 4.6rem); right: 1rem; left: 1rem; translate: 0; width: auto; max-height: 52%; animation-name: hc-entra-m; padding: 1rem; --vh: clamp(7rem, 20vh, 11rem); }
  @keyframes hc-entra-m { from { opacity: 0; translate: 0 40px; } }
}
@media (prefers-reduced-motion: reduce) { .hc-stage::before, .hc-stage::after, .hc-h, .hc-cerca, .hc-h em::after { animation: none; } }