/* =========================================================
   García Recta Design — plegakit-fold.css
   "La mecánica del pliegue": experiencia scroll-driven propia
   de Plegakit — NO es una hoja fija con líneas de medición
   (eso es Rollkit/deslizamiento). Acá son 12 hojas reales que
   se pliegan de a pares, en 3D, y se concentran hacia un
   costado — el lenguaje visual es mecánico, de bisagra.
   Afecta SOLO esta sección de plegakit.php.
   ========================================================= */

.fold-exp { position: relative; height: 340vh; border-top: 1px solid var(--line); }
/* top:78px (no 0): el header del sitio es sticky y tapa ~78px. */
.fold-sticky { position: sticky; top: 78px; height: calc(100vh - 78px); overflow: hidden; display: flex; align-items: center; justify-content: center; }

.fold-intro { position: absolute; z-index: 3; text-align: center; opacity: 1; transition: opacity .4s ease; }
.fold-intro.hide { opacity: 0; pointer-events: none; }
.fold-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--red); text-transform: uppercase; margin-bottom: 20px; }
.fold-intro-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,6vw,4rem); line-height: 1.05; }

.fold-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; }
.fold-stage.show { opacity: 1; }

/* ---------- El mecanismo: 6 pares = 12 hojas ---------- */
.fold-rig-wrap { position: relative; --leafw: 30px; --leafh: min(50vh, 400px); perspective: 1500px; }
.fold-rig { display: flex; }
.fold-pair { display: flex; transform-style: preserve-3d; will-change: transform; }
.fold-pair:nth-child(1) { transform: translateX(0); }
.fold-pair:nth-child(2) { transform: translateX(calc(var(--fold, 0) * -1 * var(--leafw))); }
.fold-pair:nth-child(3) { transform: translateX(calc(var(--fold, 0) * -2 * var(--leafw))); }
.fold-pair:nth-child(4) { transform: translateX(calc(var(--fold, 0) * -3 * var(--leafw))); }
.fold-pair:nth-child(5) { transform: translateX(calc(var(--fold, 0) * -4 * var(--leafw))); }
.fold-pair:nth-child(6) { transform: translateX(calc(var(--fold, 0) * -5 * var(--leafw))); }

.fold-leaf {
    width: var(--leafw); height: var(--leafh); flex-shrink: 0; position: relative;
    background: linear-gradient(160deg, rgba(223,227,230,.11), rgba(223,227,230,.03) 55%, rgba(223,227,230,.09));
    border-top: 1px solid rgba(245,245,243,.28); border-bottom: 1px solid rgba(245,245,243,.28);
    box-shadow: inset 0 0 26px rgba(255,255,255,.04);
    backface-visibility: hidden;
}
.fold-leaf-a { border-left: 1px solid rgba(245,245,243,.28); }
.fold-leaf-b {
    transform-origin: left center;
    transform: rotateY(calc(var(--fold, 0) * -166deg));
    border-right: 1px solid rgba(245,245,243,.28);
}
/* línea de bisagra: acento rojo apenas visible entre cada par de hojas */
.fold-leaf-b::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--red); opacity: .55;
}
.fold-pair:last-child .fold-leaf-b { border-right: 1px solid rgba(245,245,243,.28); }

/* ---------- Foto real de cierre ---------- */
.fold-photo { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.fold-photo.show { opacity: 1; }
.fold-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fold-photo-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.75), rgba(10,10,10,.25) 55%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8vh; }
.fold-photo-text { text-align: center; }
.fold-photo-text p:first-child { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem,3.6vw,2.6rem); color: #fff; margin-bottom: 8px; }
.fold-photo-text p:last-child { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,245,243,.55); }

@media (max-width: 900px) {
    .fold-exp { height: 280vh; }
    .fold-rig-wrap { --leafw: 16px; --leafh: min(34vh,280px); }
}

@media (prefers-reduced-motion: reduce) {
    .fold-stage, .fold-photo, .fold-leaf-b { transition: none; }
}