/* ResupplyAI · HERO SCROLL-SCRUB reutilizable (Estudio UX, 1 oct 2026)
   Nace de prueba-hero-original/portada-scrub-3.html. Lo usa hoy Suppliers; Contractors lo usará con otra foto.
   Foto a sangre con un monitor; al bajar el texto se va, la cámara entra al monitor, la pantalla se enciende
   (destello navy, sello R, piezas en escalonado, un reflejo) y al final esa pantalla ES la sección real que sigue.

   CÓMO SE MONTA (ver site/suppliers/index.html):
   - <head>: el script de una línea que pone html.hs-on (si no hay Reducir movimiento) y este CSS.
   - <div class="hs-rail"> envuelve la .navwrap (la nav viaja pegada todo el recorrido).
   - <section class="hs" data-scrub-hero ...> con .hs-stage > .hs-canvas (la foto) + .hs-shade + .hs-copy + .hs-screen.
   - La sección que hace de pantalla va JUSTO DESPUÉS del hero y lleva class="hs-target".
   - Configuración por data-attributes en la .hs (los lee scrub-hero.js):
       data-hs-mx / data-hs-my  centro del vidrio del monitor, en % de la foto
       data-hs-mw               ancho del vidrio, en % del ancho de la foto
       data-hs-sa               proporción del vidrio (ancho / alto)
       data-hs-ar               proporción de la foto (ancho / alto)
       data-hs-hires            foto grande que se carga cuando la cámara empieza a entrar (opcional)
       data-hs-fit              qué parte de la sección tiene que caber en el vidrio (selector; por defecto la sección)
       data-hs-pieces           qué piezas se arman en escalonado al encenderse (selector, en orden)
     Los valores por defecto de abajo son los de la foto del almacén (almacen-noche-*). */

.hs { position: relative; background: #1e234b; color: #fff; }
.hs-stage { position: relative; overflow: hidden; isolation: isolate;
  --mx: 49.98; --my: 48.57; --mw: 15.8; --sa: 1.79; --ar: 1.7917; --hh: clamp(640px, 100svh, 980px); }
.hs-canvas { position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: var(--hh); }
.hs-canvas img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 72%; }
.hs-shade { position: absolute; inset: 0 0 auto; height: var(--hh); z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(17, 23, 52, .84) 0%, rgba(17, 23, 52, .70) 34%, rgba(17, 23, 52, .30) 62%, rgba(17, 23, 52, .18) 82%, rgba(17, 23, 52, .42) 100%); }
.hs-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: var(--hh); padding-top: clamp(118px, 14vh, 160px); padding-bottom: 40px; }
.hs-copy h1 { color: #fff; font-weight: 500; max-width: 15ch; font-size: clamp(2.4rem, 1rem + 4.2vw, 4.6rem); line-height: 1;
  letter-spacing: -.04em; text-shadow: 0 2px 28px rgba(10, 14, 34, .35); }
.hs-copy h1 strong { font-weight: 700; color: #fff; }
.hs-copy .lede { color: #dfe3f3; max-width: 60ch; margin: 20px auto 28px; text-shadow: 0 1px 18px rgba(10, 14, 34, .5); }
.hs-copy .cta-row { justify-content: center; gap: 12px; }
.hs-copy .tlink { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); text-shadow: 0 1px 14px rgba(10, 14, 34, .6); }
.hs-copy .tlink:hover { text-decoration-color: #fff; }
.hs-copy :focus-visible { outline-color: #fff; }
.btn-ghost-d { --b-bg: rgba(17, 23, 52, .5); --b-fg: #fff; --b-hover: rgba(17, 23, 52, .78);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost-d:hover { box-shadow: inset 0 0 0 1.5px #fff; }
/* la línea de público: nota tipográfica (sin píldora ni ícono; ver "Tics de IA" en NOTAS.md) */
.hs-copy .chip { margin-top: 26px; color: #fff; text-shadow: 0 1px 12px rgba(10, 14, 34, .85), 0 0 2px rgba(10, 14, 34, .6); }
/* La nav blanca flota sobre la foto oscura: sombra más honda. Cuando la sección ya llenó la pantalla vuelve a la normal. */
.hs-rail .cn-card { box-shadow: 0 1px 2px rgba(8, 12, 30, .2), 0 18px 48px -14px rgba(4, 8, 24, .7); transition: box-shadow .5s var(--ease); }
.hs-end .hs-rail .cn-card { box-shadow: 0 1px 2px rgba(20, 30, 60, .08), 0 14px 40px -12px rgba(20, 30, 60, .35); }
html:not(.hs-on) .hs + .hs-target { padding-top: clamp(40px, 5vw, 64px); }
.hs-screen { display: none; }

/* ===== Modo scrub (html.hs-on: hay JS y no hay Reducir movimiento) ===== */
.hs-on .hs { height: 200vh; }
.hs-on .hs-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; container-type: size;
  --cw: max(100cqw, 100cqh * var(--ar)); --cl: calc(50cqw - var(--cw) / 2); --ct: calc(50cqh - var(--cw) / var(--ar) / 2);
  --co: 1; --cy: 0px; --zs: 1; --tx: 0px; --ty: 0px; --sh: 1; --so: .22; --go: 1; }
.hs-on .hs-canvas { left: var(--cl); top: var(--ct); width: var(--cw); height: auto; aspect-ratio: var(--ar);
  transform: translate(var(--tx), var(--ty)) scale(var(--zs)); transform-origin: calc(var(--mx) * 1%) calc(var(--my) * 1%); will-change: transform; }
.hs-on .hs-canvas img { object-fit: fill; }
.hs-on .hs-shade { height: auto; inset: 0; opacity: var(--sh); }
.hs-on .hs-copy { min-height: 0; padding-bottom: 0; opacity: var(--co); transform: translateY(var(--cy)); will-change: opacity, transform; }
.hs-on .hs-copy.gone { visibility: hidden; }
/* La pantalla: copia aria-hidden e inerte de la sección hs-target, recortada al vidrio del monitor (clip-path desde el JS). */
.hs-on .hs-screen { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--so); }
.hs-win { position: absolute; inset: 0; clip-path: inset(50%); background: #fff; }
.hs-pg, .hs-pv, .hs-off, .hs-glare, .hs-seal { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.hs-pg, .hs-off, .hs-glare { width: 100%; height: 100%; }
.hs-pg, .hs-pv { text-align: left; }

/* ===== El encendido =====
   Antes el vidrio es una pantalla apagada. Al llegar la cámara (p ≥ .33) se enciende con tiempo propio:
   0 s retroiluminación navy con destello · .12 s el sello R entra de un desenfoque y la R se dibuja y se rellena ·
   .95 s la pantalla oscura se va · 1.05 s en adelante las piezas (data-hs-pieces) se arman cada 90 ms ·
   1.7 s un reflejo cruza el vidrio. .fin deja todo en su estado final en el acto (la copia tiene que coincidir
   con la sección real en el relevo). */
.hs-off { background: radial-gradient(90% 80% at 50% 45%, #10173a 0%, #070a19 78%); transition: opacity .3s ease; }
.hs-off::after { content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 62% at 50% 50%, #33489a 0%, #1d2a5c 46%, #0b1130 100%); }
.lit .hs-off { opacity: 0; transition: opacity .6s cubic-bezier(.4, 0, .2, 1) .95s; }
.lit .hs-off::after { animation: hsOn .9s cubic-bezier(.16, 1, .3, 1) both; }
.hs-seal { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.hs-seal svg { display: block; width: 100%; height: 100%; opacity: 0; }
.lit .hs-seal svg { animation: hsSeal 1.3s cubic-bezier(.16, 1, .3, 1) .12s both; }
.hs-seal .r { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: .45; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.lit .hs-seal .r { animation: hsDraw .62s cubic-bezier(.65, 0, .35, 1) .2s forwards, hsFill .35s ease .66s forwards; }
.hs-win .hs-p { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .25s ease; }
.lit .hs-p { opacity: 1; transform: none; transition: opacity .5s ease calc(1.05s + var(--hs-i, 0) * 90ms), transform .8s var(--ease) calc(1.05s + var(--hs-i, 0) * 90ms); }
.hs-glare::after { content: ""; position: absolute; inset: 0; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 62%); }
.lit .hs-glare::after { animation: hsSheen 1.2s cubic-bezier(.45, 0, .55, 1) 1.7s both; }
.fin .hs-off, .fin .hs-seal { visibility: hidden; }
.fin .hs-p { opacity: 1 !important; transform: none !important; transition: none !important; }
.fin .hs-glare::after { animation: none; }
@keyframes hsOn { 0% { opacity: 0; } 22% { opacity: 1; filter: brightness(1.7); } 100% { opacity: 1; filter: none; } }
@keyframes hsSeal { 0% { opacity: 0; transform: scale(.84); filter: blur(6px); } 32%, 70% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(1.1); filter: blur(3px); } }
@keyframes hsDraw { to { stroke-dashoffset: 0; } }
@keyframes hsFill { to { fill-opacity: 1; } }
@keyframes hsSheen { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }

/* Versión de pantalla (.hs-v): cuando la parte que importa de la sección real no cabe en el vidrio (celular), el monitor
   muestra una copia a 720 px. Al abrirse la pantalla se funde con la copia real, que es la que hace el relevo.
   Cada página ajusta su .hs-v abajo, en "Pantallas por página". */
.hs-on .hs-v.hs-target { width: 720px; min-height: 0; margin: 0; padding: 0 34px; justify-content: center; }
.hs-on .hs-v .wrap { padding: 0; max-width: none; }

/* Vidrio: un reflejo diagonal suave y el borde un poco más oscuro. Se apaga al llegar a escala 1. */
.hs-glare { opacity: var(--go); box-shadow: inset 0 0 0 1px rgba(8, 12, 30, .35);
  background: linear-gradient(112deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(130% 110% at 50% 45%, rgba(14, 20, 46, 0) 55%, rgba(14, 20, 46, .22) 100%); }
.hs-done .hs-win { visibility: hidden; }
/* La sección real ocupa una pantalla y sube a cubrir el escenario en su posición final (margen −altura).
   Invisible y sin clic mientras la cámara entra; al terminar aparece exactamente sobre la copia. */
.hs-on .hs-target { min-height: var(--H, 100vh); display: flex; flex-direction: column; justify-content: center; padding-top: 104px; }
.hs-on .hs + .hs-target { position: relative; z-index: 1; margin-top: calc(-1 * var(--H, 100vh)); opacity: 0; pointer-events: none; }
.hs-on .hs.hs-done + .hs-target { opacity: 1; pointer-events: auto; }
/* La sección real y su copia del monitor van en capa propia las dos: así el navegador las rasteriza igual y el relevo
   queda en el mismo píxel también en tablet y celular (sin esto, bordes punteados y texto en y fraccional cambiaban el suavizado). */
.hs-on .hs + .hs-target, .hs-on .hs-pg > .hs-target { will-change: transform; }
/* La nav viaja pegada arriba durante todo el recorrido y se va con la sección, en el mismo píxel (sin JS por fotograma). */
.hs-on .hs-rail { position: absolute; top: 0; left: 0; right: 0; height: calc(100vh + 14px); pointer-events: none; z-index: 50; }
.hs-on .hs-rail .navwrap { position: sticky; top: 14px; margin-top: 14px; height: 0; }
.hs-on .hs-rail .cn { pointer-events: auto; }

/* Celular: la foto se ancla abajo al 200 % del ancho; entran el escritorio entero, el monitor y la bandera.
   Arriba sigue el techo oscuro de la misma foto (#1e234b) y ahí va el texto. */
@media (max-width: 700px) {
  .hs-stage { --hh: max(720px, 100svh); }
  .hs-canvas { left: 50%; top: calc(var(--hh) - 200vw / var(--ar)); width: 200vw; height: auto; aspect-ratio: var(--ar); transform: translateX(-50%); }
  .hs-canvas img { object-position: 50% 50%; }
  .hs-canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #1e234b 0%, rgba(30, 35, 75, 0) 22%); }
  .hs-shade { background: linear-gradient(180deg, rgba(17, 23, 52, .72) 0%, rgba(17, 23, 52, .55) 58%, rgba(17, 23, 52, .12) 78%, rgba(17, 23, 52, .3) 100%); }
  .hs-copy { padding-top: 104px; }
  .hs-copy h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 2.6rem); }
  .hs-copy .lede { margin: 14px auto 22px; font-size: 1.0625rem; }
  .hs-copy .cta-row .btn { width: 100%; }
  .hs-copy .chip { margin-top: 16px; }
  .hs-on .hs-stage { --cw: 200cqw; --cl: -50cqw; --ct: calc(100cqh - 200cqw / var(--ar)); }
  .hs-on .hs-canvas { transform: translate(var(--tx), var(--ty)) scale(var(--zs)); }
  .hs-on .hs-shade { background: linear-gradient(180deg, rgba(17, 23, 52, .6) 0%, rgba(17, 23, 52, .4) 50%, rgba(17, 23, 52, .1) 75%, rgba(17, 23, 52, .25) 100%); }
  .hs-on .hs-target { padding-top: 96px; }
}
@media print { .hs-canvas, .hs-shade, .hs-screen { display: none; } .hs { height: auto !important; background: none; color: #000; }
  .hs-stage { position: static !important; height: auto !important; } .hs-copy h1, .hs-copy h1 strong, .hs-copy .lede { color: #000; text-shadow: none; }
  .hs-target { margin-top: 0 !important; opacity: 1 !important; } }

/* =====================================================================================================
   Pantallas por página
   ===================================================================================================== */

/* --- Suppliers: la pantalla es "Your matches" (#matches-preview, banda navy con la tabla de ejemplo) --- */
.hs-copy.hs-sup h1 { max-width: 19ch; font-size: clamp(2.3rem, 1rem + 3.5vw, 4.1rem); line-height: 1.02; }
.hs-copy.hs-sup .lede { max-width: 64ch; }
.hs-target.product-band .product { margin-top: 0; }   /* también en las copias del monitor, que no van pegadas al hero */
.hs-on .hs-target.product-band { padding-bottom: clamp(40px, 5vw, 72px); }
.hs-on .hs-target.product-band > .wrap { width: 100%; }
/* versión de pantalla (celular): la tabla en su forma de escritorio, a 720 px */
.hs-on .hs-v.product-band { padding: 0 30px; }
.hs-on .hs-v .matches { display: table; }
.hs-on .hs-v .matches thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
.hs-on .hs-v .matches tbody { display: table-row-group; }
.hs-on .hs-v .matches tr { display: table-row; padding: 0; border: 0; background: none; }
.hs-on .hs-v .matches td { display: table-cell; padding: 13px 16px !important; border-bottom: 1px solid var(--line); }
.hs-on .hs-v .matches tr:last-child td { border-bottom: 0; }
.hs-on .hs-v .matches th:first-child, .hs-on .hs-v .matches td:first-child { padding-left: 22px !important; }
.hs-on .hs-v .matches td[data-label]::before { content: none; }
.hs-on .hs-v .matches td.mono { font-size: .92em; white-space: nowrap; }
.hs-on .hs-v .matches .num { text-align: right; }
.hs-on .hs-v .matches tr.is-first td { background: rgba(42, 61, 136, .05); }
.hs-on .hs-v .screen-top, .hs-on .hs-v .screen-foot { padding-inline: 22px; }

/* --- Contractors: foto de la oficina desde la silla (oficina-pov-*); la pantalla son las dos opciones (.pair) ---
   El monitor ya ocupa un tercio del ancho: el empuje es corto. Por eso el recorrido es de 180vh (no 200) y la cámara
   llega antes (data-hs-keys=".3,.62"): el encendido cae en .25 y la apertura en .70. */
.hs.hs-con { background: #17356b; }                       /* el cielo de arriba de la foto */
.hs-on .hs.hs-con { height: 180vh; }
.hs-con .hs-canvas img { object-position: 50% 40%; }
/* velo un punto más denso a la altura de la bajada: las luces de la ciudad caen justo detrás del texto */
.hs-con .hs-shade { background: linear-gradient(180deg, rgba(17, 23, 52, .84) 0%, rgba(17, 23, 52, .76) 40%, rgba(17, 23, 52, .4) 62%, rgba(17, 23, 52, .18) 82%, rgba(17, 23, 52, .42) 100%); }
.hs-copy.hs-con-copy h1 { max-width: 17ch; font-size: clamp(2.3rem, 1rem + 3.5vw, 4.1rem); line-height: 1.02; }
.hs-copy.hs-con-copy .lede { max-width: 62ch; }
.hs-copy.hs-con-copy .micro { margin-top: 12px; color: #e4e8f6; text-shadow: 0 1px 12px rgba(10, 14, 34, .85); }
/* la pantalla: blanco arriba y navy abajo (como hoy); el color de fondo explícito es el que toma el vidrio */
.hs-target.pair { background-color: var(--white); }
.hs-on .hs-target.pair { padding-bottom: clamp(40px, 5vw, 72px); }
.hs-on .hs-target.pair > .wrap { width: 100%; }
/* versión de pantalla (≤ 900 px las tarjetas se apilan): en el monitor van lado a lado, a 720 px, más compactas */
.hs-on .hs-v.pair { padding: 0 26px; background: linear-gradient(180deg, var(--white) 0, var(--white) 50%, var(--navy) 50%); }
.hs-on .hs-v .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hs-on .hs-v .prod { min-height: 0; gap: 14px; padding: 24px 22px; border-radius: 22px; }
.hs-on .hs-v .prod h3 { font-size: 1.75rem; }
.hs-on .hs-v .prod-mode { margin-bottom: 10px; font-size: 1.0625rem; }
.hs-on .hs-v .prod-body > p:last-child { font-size: .9375rem; line-height: 1.5; }
.hs-on .hs-v .prod-actions .btn { width: auto; }
.hs-on .hs-v .prod-actions .tlink { display: none; }

/* Reducir movimiento / sin JS: nada tapa el monitor. El texto va arriba sobre el color del cielo y la foto quieta debajo;
   solo el cielo de la foto se mete bajo el final del texto. */
html:not(.hs-on) .hs-con .hs-stage { display: flex; flex-direction: column; }
html:not(.hs-on) .hs-con .hs-copy { order: 1; min-height: 0; padding-bottom: 0; }
html:not(.hs-on) .hs-con .hs-shade { display: none; }
html:not(.hs-on) .hs-con .hs-canvas { order: 2; position: relative; z-index: -2; left: auto; top: auto; width: 100%; height: auto;
  aspect-ratio: 1.7632; margin-top: calc(-.2 * 100vw / 1.7632); transform: none; }
html:not(.hs-on) .hs-con .hs-canvas img { object-fit: cover; }
html:not(.hs-on) .hs-con .hs-canvas::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #17356b 0%, rgba(23, 53, 107, .82) 12%, rgba(23, 53, 107, 0) 26%); }

@media (max-width: 700px) {
  .hs-con .hs-canvas::after { background: linear-gradient(180deg, #17356b 0%, rgba(23, 53, 107, 0) 22%); }
  .hs-copy.hs-con-copy h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 2.6rem); }
  .hs-copy.hs-con-copy .micro { margin-top: 10px; }
  .hs-on .hs-con .hs-shade { background: linear-gradient(180deg, rgba(17, 23, 52, .62) 0%, rgba(17, 23, 52, .58) 50%, rgba(17, 23, 52, .58) 68%, rgba(17, 23, 52, .12) 82%, rgba(17, 23, 52, .25) 100%); }
  html:not(.hs-on) .hs-con .hs-canvas { width: 200vw; margin-left: -50vw; margin-top: 20px; transform: none; }
}

/* v4 (2 oct 2026): titulares cortos (TITULARES.md) → más grandes, una frase por línea; debajo una sola línea */
.hs-copy.hs-sup h1, .hs-copy.hs-con-copy h1 { max-width: 13ch; font-size: clamp(2.6rem, 1rem + 5vw, 5.4rem); line-height: .98; letter-spacing: -.04em; }
.hs-copy.hs-sup h1 strong, .hs-copy.hs-con-copy h1 strong { display: block; }
.hs-copy.hs-sup .lede, .hs-copy.hs-con-copy .lede { max-width: 44ch; }
.hs-copy.hs-sup .lede, .hs-copy.hs-con-copy .lede { text-wrap: balance; }