/* =========================================================
   García Recta Design — proteccion-solar-sunworker.css
   "Sunworker": la gran animación de la página. Sticky + scroll
   controla una capa de sombra que avanza sobre la fotografía
   (luz → sombra), reversible, sin oscurecer nunca del todo.
   También cubre materialidad (tejido) e integración.
   ========================================================= */

/* ============================================================
   09 · LUZ → SOMBRA (sticky)
   ============================================================ */
.ps-shadow { position: relative; height: 380vh; border-top: 1px solid var(--line); }
.ps-shadow-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black); }

.ps-shadow-intro {
    position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
    text-align: center; background: var(--black);
    opacity: 1; transition: opacity .6s var(--ease);
    pointer-events: none;
}
.ps-shadow-intro.hide { opacity: 0; }
.ps-shadow-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4.6vw,3.2rem); line-height: 1.2; }

.ps-shadow-stage { position: relative; width: 100%; height: 100%; }
.ps-shadow-photo { filter: saturate(1.02); }

/* La capa de sombra: degradado con variación de intensidad y
   ligera textura — nunca un rectángulo negro plano. Avanza desde
   la derecha (posición del "brazo") hacia la izquierda. */
.ps-shadow-layer {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(140% 90% at 85% 20%, rgba(10,10,10,.05) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.9) 100%),
        linear-gradient(100deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.66) 40%, rgba(10,10,10,.12) 72%, transparent 100%);
    clip-path: inset(0 100% 0 0);
    opacity: .96;
    transition: clip-path .1s linear;
}
.ps-shadow-grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ps-shadow-label {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    opacity: 0; transition: opacity .5s var(--ease);
}
.ps-shadow-label.show { opacity: 1; }
.ps-shadow-label-l { left: var(--container-pad); }
.ps-shadow-label-r { right: var(--container-pad); text-align: right; }
.ps-shadow-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 10px 18px; border: 1px solid var(--line-strong); background: rgba(10,10,10,.5); backdrop-filter: blur(6px);
}

@media (max-width: 700px) {
    .ps-shadow-label-l, .ps-shadow-label-r { left: var(--container-pad); right: var(--container-pad); text-align: left; }
    .ps-shadow-label-r { top: auto; bottom: 90px; transform: none; }
    .ps-shadow-label-l { top: 90px; transform: none; }
}

/* ============================================================
   10 · ESCALA / ARQUITECTURA (texto)
   ============================================================ */
.ps-scale-text { padding: var(--section-y) 0; border-top: 1px solid var(--line); text-align: center; }
.ps-scale-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,4.6vw,3.4rem); line-height: 1.1; margin: 16px auto 22px; max-width: 780px; }
.ps-scale-desc { max-width: 520px; margin: 0 auto; color: rgba(245,245,243,.62); font-size: 16px; }

/* ============================================================
   11 · MATERIALIDAD — macro del tejido, luz atravesándolo
   ============================================================ */
.ps-material { position: relative; height: 78vh; min-height: 480px; overflow: hidden; border-top: 1px solid var(--line); }
.ps-material-media { position: absolute; inset: 0; }
.ps-material-media img { filter: brightness(.62) contrast(1.05); }
/* Haz de luz muy tenue "atravesando" el tejido — nunca un efecto de vidrio. */
.ps-material-light {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 30%, rgba(255,244,224,.14) 48%, rgba(255,244,224,.22) 51%, rgba(255,244,224,.14) 54%, transparent 70%);
    opacity: 0; transition: opacity 1.2s var(--ease);
}
.ps-material.in-view .ps-material-light { opacity: 1; }
.ps-material-content {
    position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px;
}
.ps-material-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,4.6vw,3.4rem); line-height: 1.1; margin-top: 14px; max-width: 520px; }

/* ============================================================
   12 · ARQUITECTURA + PROTECCIÓN — se integra
   ============================================================ */
.ps-integration { position: relative; height: 82vh; min-height: 500px; overflow: hidden; border-top: 1px solid var(--line); }
.ps-integration img { filter: brightness(.7); }
.ps-integration-overlay {
    position: absolute; inset: 0; display: flex; align-items: flex-start; padding-top: 70px;
    background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 45%);
}
.ps-integration-text { padding: 0 var(--container-pad); }
.ps-integration-text h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,5.4vw,4rem); line-height: 1.05; }

/* ============================================================
   APLICACIONES — scroll horizontal sticky (mismo patrón que usan
   Rollkit/Plegakit; se define acá también porque esta página no
   carga rollkit-story.css)
   ============================================================ */
.h-discover { position: relative; height: 320vh; border-top: 1px solid var(--line); }
.h-discover-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.h-discover-head { padding: 0 var(--container-pad); margin-bottom: 34px; }
.h-discover-track { display: flex; gap: 22px; padding: 0 var(--container-pad); will-change: transform; }
.h-discover-slide { position: relative; flex: 0 0 min(58vw,640px); height: 58vh; overflow: hidden; border-radius: var(--radius-small); }
.h-discover-label { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 22px 24px; width: 100%; background: linear-gradient(0deg, rgba(10,10,10,.8), transparent); }
.h-discover-label .num { font-family: var(--font-display); color: var(--red); font-size: .95rem; margin-bottom: 6px; display: block; }
.h-discover-label .txt { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
@media (max-width: 800px) {
    .h-discover { height: auto; }
    .h-discover-sticky { position: relative; height: auto; padding: 60px 0; }
    .h-discover-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; }
    .h-discover-slide { flex: 0 0 82vw; height: 46vh; scroll-snap-align: start; }
}
.ps-applications { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
    .ps-shadow-layer, .ps-material-light { transition: none !important; }
}