/* ==========================================================================
   LA PORTADA, DEL HERO AVALL (07/10/2026) · la mateixa gramàtica que Webs i Programes: frases grans, poques paraules
   per pantalla i cap etiqueta al damunt. El hero de l'Oriol, la franja del cel i el formulari no es toquen (estil.css).
   ========================================================================== */
.p-titol{font-family:var(--display); font-weight:900; font-size:clamp(2.4rem, 5.6vw, 5.2rem); line-height:.95; letter-spacing:-.04em;
  max-width:16ch; text-wrap:balance;}
.p-titol em{font-style:normal; color:var(--blau);}
.p-titol--mig{margin-inline:auto; text-align:center;}
.p-intro{max-width:44ch; margin:clamp(16px, 1.8vw, 24px) auto 0; text-align:center; font-size:clamp(1.05rem, 1.4vw, 1.25rem); line-height:1.5; color:var(--tinta2);}

/* ── el manifest: una sola frase, gegant (les paraules s'encenen amb l'scroll: js/main.js) ── */
.p-manifest{background:var(--white);}
.p-manifest .stmt{font-family:var(--display); font-weight:900; font-size:clamp(2.8rem, 8.2vw, 8.4rem); line-height:.93; letter-spacing:-.045em;
  max-width:13ch; color:var(--tinta);}
.p-manifest .stmt em{font-style:normal; color:var(--blau);}
.p-manifest-nota{margin-top:clamp(28px, 3.4vw, 48px); font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--tinta2);}
.p-manifest-nota .greek{font-family:var(--greek); font-style:italic; font-size:1.25em; color:var(--cel2-text);}

/* ── les dues portes: cada una ensenya el hero de la seva pàgina ── */
.p-portes{background:var(--paper);}
.p-portes-intro{margin-top:clamp(14px, 1.6vw, 22px); max-width:54ch; font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--tinta2);}
.p-portes-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); margin-top:clamp(32px, 4vw, 56px);}
.p-porta{position:relative; display:block; min-height:clamp(520px, 76vh, 760px); overflow:hidden; isolation:isolate; border-radius:28px;
  color:var(--tinta); text-decoration:none; box-shadow:0 1px 0 rgba(11,31,58,.05), 0 40px 80px -50px rgba(11,49,88,.45);}
.p-porta--webs{background:#cfe7f7 url('../assets/webs/cel-1.webp') center 30% / cover no-repeat;}
.p-porta--programes{background:linear-gradient(180deg, var(--white) 0%, #F2F7FB 100%);}
.p-porta-img{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover;
  translate:0 var(--py, 0%); scale:1.1; transition:scale .8s var(--ease);}   /* 08/10: --py, la profunditat amb l'scroll (js/main.js) */
.p-porta--webs .p-porta-img{object-position:50% 100%;}   /* la imatge de la tauleta: l'A i les demos a sota, i el cel lliure per al text */
.p-porta--programes .p-porta-img{object-fit:contain; object-position:50% 100%; padding:46% 10% 5%;}   /* els tres trossos, a sota del text */
.p-porta-text{position:absolute; top:clamp(22px, 3vw, 40px); left:clamp(22px, 3vw, 40px); right:clamp(22px, 3vw, 40px);
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.p-porta-k{font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blau2);}
.p-porta--webs .p-porta-k, .p-porta--webs .p-porta-desc, .p-porta--webs .p-porta-anar{color:var(--tinta);}
/* damunt del blau del cel, un vel clar perquè el text es llegeixi (contrast AA); va després de la imatge (::after) */
.p-porta--webs::after{content:""; position:absolute; inset:0 0 auto; height:62%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(234,245,252,.94) 0%, rgba(234,245,252,.72) 48%, rgba(234,245,252,0) 100%);}
.p-porta-nom{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(2.2rem, 4.2vw, 4rem); line-height:.95; letter-spacing:-.04em;}
.p-porta-desc{max-width:28ch; font-size:clamp(1.05rem, 1.3vw, 1.2rem); line-height:1.45; color:#20406a;}
.p-porta-anar{margin-top:6px; font-weight:700; color:var(--blau); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;}
@media (hover:hover){
  .p-porta:hover .p-porta-img{scale:1.13;}
  .p-porta:hover .p-porta-anar{text-decoration-thickness:2.5px;}
}
.p-porta:focus-visible{outline:3px solid var(--blau); outline-offset:4px;}
@media (max-width:760px){
  .p-portes-grid{grid-template-columns:minmax(0, 1fr);}
  .p-porta{min-height:500px;}
}

/* ── «Gira el negoci»: gran i al mig ── */
.p-gira{background:var(--white);}
.p-gira .gira{max-width:1000px; margin:clamp(28px, 3.4vw, 48px) auto 0;}

/* ── qui som: sense retrats fins que tinguem fotos de debò ── */
.p-qui{background:var(--white);}
.p-qui-in{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 5vw, 80px); align-items:end;}
.p-qui-text p{max-width:38ch; font-size:clamp(1.1rem, 1.5vw, 1.35rem); line-height:1.5; color:var(--tinta2);}
.p-qui-text b{color:var(--tinta);}
.p-qui-text .enllac-fort{display:inline-block; margin-top:18px;}
@media (max-width:760px){ .p-qui-in{grid-template-columns:minmax(0, 1fr); align-items:start;} }

@media (prefers-reduced-motion: reduce){ .p-porta-img{transition:none; translate:none; scale:1;} }