/* ==========================================================================
   WebMasterOsona V4 — portafoli
   Qui obre aquesta pàgina fa disseny web o en contracta: una graella de
   targetes no li diu res. Aquí la feina entra pel mateix aparador que la
   home (els carrils de captures) i després passa d'una en una per una sala
   que s'enganxa a la pantalla. La secció no s'ensenya: es passa.
   ========================================================================== */

/* ═══ CAPÇALERA · el mateix aparador que la home ═════════════════════════ */
.pt-top{
  /* Dues files, com el hero de la home: el discurs al centre i les xifres
     enganxades a baix, perquè les captures no trepitgin mai ni la capçalera
     ni el peu. Una mica més baixa que la de la home: aquesta pàgina ha de
     deixar veure la sala de seguida. */
  position:relative;min-height:clamp(620px,88svh,940px);
  display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate;
  padding:clamp(112px,13.5vh,160px) 0 clamp(24px,3.4vh,40px);
}
.pt-top__in{align-self:center;position:relative;z-index:2}
/* El peu del hero va sobre paper massís: una captura darrere d'una xifra
   la fa il·legible, i la xifra és el que ha de quedar. */
.pt-top__foot{align-self:end;position:relative;z-index:2}
/* El paper ha d'arribar d'una vora a l'altra, no només fins al contenidor:
   si no, per la dreta seguia sortint una llenca de captura per sota. */
.pt-top__foot::before{content:"";position:absolute;z-index:-1;
  inset:0 calc(50% - 50vw) -100vh;
  background:var(--paper)}

.pt-top__spot{position:absolute;z-index:0;width:min(60vw,720px);aspect-ratio:1;left:0;top:0;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(236,198,0,.30),rgba(236,198,0,.10) 42%,transparent 68%);
  filter:blur(24px);transform:translate3d(-50%,-50%,0);
  transition:opacity .5s var(--ease)}
.pt-top:hover .pt-top__spot{opacity:1}

/* La caixa que posa els carrils en perspectiva. Els carrils són a base.css:
   el que canvia de pàgina a pàgina és aquesta caixa, no ells. */
.pt-top__rails{
  position:absolute;z-index:0;top:0;bottom:clamp(150px,23vh,244px);right:-6%;
  width:min(58vw,960px);display:flex;gap:clamp(12px,1.2vw,20px);
  transform:perspective(1900px) rotateY(-19deg) rotateX(4deg) rotateZ(-2.5deg);
  transform-origin:60% 50%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 13%,#000 88%,transparent);
}
.pt-top__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,var(--paper) 0%,var(--paper) 34%,
    rgba(251,250,247,.94) 46%,rgba(251,250,247,.55) 58%,rgba(251,250,247,0) 72%)}

.pt-crumb{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;color:var(--ink-3);
  margin-bottom:clamp(18px,2.2vw,28px)}
.pt-crumb a{color:var(--ink-2);border-bottom:1px solid transparent}
.pt-crumb a:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.pt-crumb .i{width:.85em;height:.85em;color:var(--line-2)}
.pt-crumb span{color:var(--ink)}

.pt-top h1{font-size:var(--t-hero);letter-spacing:-.035em;line-height:.96;max-width:13ch}
.pt-top h1 .l{display:block;overflow:hidden;padding-bottom:.14em}
.pt-top h1 .l>span{display:block}
.pt-top h1 em{font-style:normal;color:var(--gold-ink)}
.pt-top__lead{margin-top:clamp(18px,2vw,26px);font-size:var(--t-lead);color:var(--ink-2);
  max-width:min(56ch,52%);text-wrap:pretty}
.pt-top__lead strong{color:var(--ink)}
.pt-top__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;
  margin-top:clamp(24px,2.8vw,34px)}

/* Les xifres. Mana el NÚMERO, no el rètol: els compta la plantilla del
   portafoli de veritat, així que no poden contradir el que hi ha a sota. */
.pt-facts{display:grid;grid-template-columns:repeat(3,1fr);
  margin:clamp(34px,4vw,58px) 0 0;border-top:1px solid var(--line)}
.pt-facts>div{padding:clamp(18px,2vw,26px) clamp(14px,1.8vw,26px);
  border-left:1px solid var(--line)}
.pt-facts>div:first-child{border-left:0;padding-left:0}
.pt-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
.pt-facts dd{margin:.2rem 0 0}
.pt-facts dd b{font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.3rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.03em;
  color:var(--gold-ink);font-variant-numeric:tabular-nums}
.pt-facts p{margin:.2rem 0 0;font-size:.87rem;color:var(--ink-2)}

@media (max-width:1080px){
  /* Com a la home: primer el discurs, i les captures DESPRÉS, com a prova. */
  .pt-top{min-height:0;grid-template-rows:auto auto auto;
    padding-top:clamp(112px,14vh,150px);padding-bottom:clamp(20px,3vh,34px)}
  .pt-top__in{grid-row:1;align-self:start}
  .pt-top__rails{grid-row:2;position:relative;inset:auto;width:auto;
    height:clamp(230px,34vw,320px);margin:clamp(30px,4vw,46px) var(--gutter) 0;
    transform:none;gap:14px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
  .pt-top__foot{grid-row:3;margin-top:clamp(24px,3.4vh,40px)}
  .pt-top h1{max-width:16ch}
  .pt-top__lead{max-width:60ch}
  .pt-top__veil{display:none}
}
@media (max-width:620px){
  .rail--2{display:none}
  .pt-facts{grid-template-columns:1fr}
  .pt-facts>div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .pt-facts>div:first-child{border-top:0}
}

/* ═══ EL MUR ═════════════════════════════════════════════════════════════
   El carril del hero, tombat. Tres files de vora a vora en sentits alterns i
   amb ELS MATEIXOS ANGLES que el hero de la home: aquesta pàgina no estrena
   un efecte, fa servir el del web.

   L'estat base (sense JavaScript, amb moviment reduït o al mòbil) són tres
   tires que s'arrosseguen amb el dit o la roda. El moviment només l'afegeix
   el JS: aquí no hi ha res que neixi amagat.                            */
.sv-mur{background:var(--paper-2);border-block:1px solid var(--line);
  padding-block:var(--sec-y)}

/* La perspectiva va a l'escenari i el gir al mur. Junts no: una màscara
   damunt d'un element amb `preserve-3d` l'aplana i les files perdrien la
   profunditat. I el marge de dalt i de baix ha de ser de sobres, perquè en
   tombar el mur la fila de baix baixa i els noms es tallaven a la vora. */
.wall-stage{position:relative;overflow:hidden;perspective:1800px;
  padding-block:clamp(26px,4.4vw,78px);
  --mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:var(--mask);mask-image:var(--mask)}
.wall{display:grid;gap:clamp(12px,1.3vw,20px);transform-style:preserve-3d;
  transform:rotateY(-15deg) rotateX(5deg) rotateZ(-1.6deg) scale(1.11)}
.wall__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.wall__row::-webkit-scrollbar{display:none}
.wall__in{display:flex;gap:clamp(12px,1.3vw,20px);width:max-content;
  padding-inline:clamp(12px,1.3vw,20px);will-change:transform}

.wall__c{position:relative;display:block;flex:0 0 auto;
  width:clamp(250px,23vw,360px);
  transition:transform .4s var(--ease),opacity .4s var(--ease),filter .4s var(--ease)}
.wall__win{display:block;overflow:hidden;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:border-color .35s var(--ease),box-shadow .4s var(--ease)}
.wall__bar{display:flex;align-items:center;gap:5px;padding:.45rem .65rem;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.wall__bar>i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.wall__bar>i:first-child{background:#E7A7A0}
.wall__bar>i:nth-child(2){background:#EBD08A}
.wall__bar>span{flex:1;min-width:0;text-align:center;font-size:.64rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.wall__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

.wall__meta{display:grid;gap:.05rem;padding:.6rem .2rem 0}
.wall__meta b{font-family:var(--font-display);font-weight:600;font-size:.98rem;
  letter-spacing:-.01em;color:var(--ink)}
.wall__meta>span{font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-ink)}

.wall__go{position:absolute;right:10px;top:calc(.45rem + 26px);
  display:inline-flex;align-items:center;gap:.4em;
  padding:.35em .85em;border-radius:var(--r-pill);
  background:var(--gold);color:#14120F;font-size:.72rem;font-weight:700;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wall__go .i{width:13px;height:13px}
.wall__c:hover .wall__win,.wall__c:focus-visible .wall__win{
  border-color:var(--gold);box-shadow:var(--sh-2)}
.wall__c:hover .wall__go,.wall__c:focus-visible .wall__go{opacity:1;transform:none}
.wall__c:hover,.wall__c:focus-visible{transform:translateY(-5px)}
/* La fila aturada: la resta de fitxes es fan enrere perquè mani la que mires. */
.wall__row.is-held .wall__c:not(:hover){opacity:.55;filter:saturate(.6)}

/* L'última peça del mur no és una web: és la teva. */
.wall__cta{display:grid;align-content:center;justify-items:center;gap:.45rem;
  height:100%;text-align:center;padding:clamp(18px,2vw,28px);
  background:var(--ink-bg);border-color:var(--ink-bg);color:var(--on-dark)}
.wall__c--cta .wall__win{aspect-ratio:auto}
.wall__cta b{font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.02em}
/* El :not() no és cosmètic: el botó també és un <span> fill directe, i
   `.wall__cta>span` (0,1,1) guanyava a `.wall__btn` (0,1,0). El text del
   botó sortia gris clar sobre l'or, amb 1,27 de contrast. */
.wall__cta>span:not(.wall__btn){font-size:.85rem;color:var(--on-dark-2)}
.wall__btn{display:inline-flex;align-items:center;gap:.45em;margin-top:.5rem;
  padding:.5em 1.2em;border-radius:var(--r-pill);
  background:var(--gold);color:#14120F;font-size:.82rem;font-weight:700}
.wall__btn .i{width:14px;height:14px}
.wall__row.is-held .wall__c--cta:not(:hover){opacity:.55}

.wall__note{display:flex;align-items:flex-start;gap:.6em;max-width:72ch;
  margin:clamp(30px,3.6vw,50px) auto 0;font-size:.86rem;line-height:1.6;
  color:var(--ink-3)}
.wall__note .i{flex:0 0 auto;width:16px;height:16px;margin-top:.2em;color:var(--gold-ink)}

@media (max-width:900px){
  /* En vertical la perspectiva només fa nosa: menja amplada i les fitxes ja
     són prou petites. Tres tires planes que s'arrosseguen. */
  .wall-stage{perspective:none;padding-block:clamp(14px,3vw,26px)}
  .wall{transform:none}
  .wall__c{width:clamp(210px,62vw,270px)}
}