/* ==========================================================================
   Portada 2028 · «De la pantalla a las personas» (.hp) — 28-29/10/26, leer antes de tocar.
   Una muestra de lo que hace la agencia en branding y eventos (Jacinto, 29/10), no un caso más: el efecto de
   la pantalla ProLED de Apple con trabajo propio. Un plano en ruta de SYM llena la pantalla; la cámara se aleja
   y resulta ser la pantalla LED de la sala del 20 aniversario de SYM España, que organizó la agencia. Va tras
   Clientes, como la última hoja del montón (.hd-stack). Marcado y datos: inc/home-pantalla.php.

   · El lienzo (.hp-cv) lo pinta assets/js/ma-home-pantalla.js con el scroll real: el vídeo avanza con el
     scroll (no se reproduce solo), la cámara se aleja en escala exponencial, la sala pasa de desenfocada y a
     oscuras a nítida y encendida, y la pantalla funde del vídeo a lo que mostró aquel día.
   · La posición final la marca .hp-fr (la tarjeta): el JS la mide y acaba exactamente ahí, con el mismo
     encuadre que la foto de .hp-fr (object-fit:cover, object-position 50 % 42 %).
   · Abre con su titular sobre la tinta (.hp-o), centrado, y después sube el plano: va tras Clientes y así no
     monta pegada a la hoja anterior (Jacinto, 29/10, 08:19). Debajo de la tarjeta, solo la frase sobre lo que
     ofrece la agencia; entra en cuanto el borde de la sala deja libre su sitio (el JS lo mide en cada cuadro;
     Clear Flow: nada tapa el texto y no queda hueco vacío).
     Sin JavaScript o con movimiento reducido: la foto en su tarjeta y el texto, quietos.
   ========================================================================== */

.hp{--run:190svh;--io:clamp(360px,56svh,600px);--R:14px;--ar:2.2;position:relative;z-index:2;height:calc(var(--io) + 100svh + var(--run));background:var(--ink);color:var(--bone);
  border-radius:var(--rad) var(--rad) 0 0;margin-top:calc(var(--rad) * -1);clip-path:inset(0 round var(--rad) var(--rad) 0 0)}
.hp-o{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(90%,var(--maxw));height:var(--io);
  margin:0 auto;padding-top:clamp(36px,6svh,72px);text-align:center}
.hp-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.hp-cv{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.hp-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(24px + 55px + 12px) 0 calc(var(--rad) + clamp(14px,3svh,34px))}
.hp-fr{position:relative;flex:none;width:min(1120px,88vw,(100svh - 330px) * var(--ar));aspect-ratio:var(--ar);margin:0;overflow:hidden;border-radius:var(--R);background:#0c0d0d}
.hp-fr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hp-x{width:min(90%,var(--maxw));margin-top:clamp(22px,3.6svh,40px);text-align:center}
.hp-k{margin:0 0 14px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-3)}
.hp-t{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(48px,min(7.4vw,12svh),124px);line-height:.95;letter-spacing:-.042em;color:var(--bone)}
.hp-t .t2{display:block;color:var(--orange)}
.hp-p{max-width:34ch;margin:0 auto;font-family:var(--f-light);font-weight:300;font-size:clamp(18px,1.6vw,25px);line-height:1.38;letter-spacing:-.01em;color:rgba(246,245,243,.86);text-wrap:balance}

/* Con JavaScript: la tarjeta la pinta el lienzo (la foto queda solo para quien no lo tiene) y el texto
   entra cuando la cámara ha llegado. */
.hp.is-js .hp-fr{background:none}
.hp.is-js .hp-fr img{visibility:hidden}
.hp.is-js .hp-x>*{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px);
  transition:opacity .7s ease,transform 1s cubic-bezier(.19,1,.22,1),filter .7s ease}
.hp.is-js.is-x .hp-x>*{opacity:1;transform:none;filter:none}

/* ---------- Móvil: tarjeta casi cuadrada y el titular en dos líneas ---------- */
@media (max-width:760px){
  .hp{--run:150svh;--io:clamp(280px,44svh,400px);--R:12px;--ar:1.05}
  .hp-fr{width:min(90vw,(100svh - 300px) * var(--ar))}
  .hp-t{font-size:min(13vw,60px)}
  .hp-p{font-size:18px;max-width:26ch}
}

/* ---------- Sin JavaScript o con movimiento reducido (el JS no arranca): quieta, sin tramo fijo ---------- */
.hp:not(.is-js){height:auto}
.hp:not(.is-js) .hp-o{height:auto;padding:clamp(96px,14vh,160px) 0 0}
.hp:not(.is-js) .hp-pin{position:relative;height:auto;overflow:visible}
.hp:not(.is-js) .hp-cv{display:none}
.hp:not(.is-js) .hp-in{position:relative;inset:auto;padding:clamp(48px,8vh,90px) 0 calc(var(--rad) + clamp(40px,8vh,90px))}
.hp:not(.is-js) .hp-fr{width:min(1120px,90vw)}