/* =========================================================
   García Recta Design — plegakit-transition.css
   "Del sistema al espacio real": PLANO → SISTEMA → PRODUCTO →
   ESPACIO REAL. Cuatro capas que se funden entre sí controladas
   por scroll — uno de los momentos premium de la página.
   Afecta SOLO esta sección de plegakit.php.
   ========================================================= */

.transreal-exp { position: relative; height: 380vh; border-top: 1px solid var(--line); }
.transreal-sticky { position: sticky; top: 78px; height: calc(100vh - 78px); overflow: hidden; display: flex; align-items: center; justify-content: center; }

.transreal-layer {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 1s ease;
}
.transreal-layer.active { opacity: 1; }

/* Fase 1 — PLANO: dibujo técnico minimalista, solo líneas */
.transreal-plano svg { width: min(70vw,520px); height: auto; }
.transreal-plano rect, .transreal-plano line { stroke: rgba(245,245,243,.55); stroke-width: 1.2; fill: none; stroke-dasharray: 4 5; }

/* Fase 2 — SISTEMA: esquema de perfiles, líneas más sólidas */
.transreal-sistema svg { width: min(70vw,520px); height: auto; }
.transreal-sistema rect { stroke: rgba(245,245,243,.8); stroke-width: 1.6; fill: rgba(245,245,243,.03); }
.transreal-sistema line.hinge { stroke: var(--red); stroke-width: 2; opacity: .6; }

/* Fase 3 — PRODUCTO: vidrio con reflejos */
.transreal-producto svg { width: min(70vw,520px); height: auto; }
.transreal-producto rect.glass { stroke: rgba(245,245,243,.35); stroke-width: 1; fill: url(#trGlassFill); }

/* Fase 4 — ESPACIO REAL: fotografía */
.transreal-real { }
.transreal-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.transreal-real .transreal-real-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.72), rgba(10,10,10,.15) 55%); }

.transreal-content { position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 3; text-align: center; }
.transreal-label { font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--red); text-transform: uppercase; margin-bottom: 10px; }
.transreal-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,3.6vw,2.4rem); color: #fff; }
.transreal-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.transreal-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,245,243,.3); transition: background .3s ease, transform .3s ease; }
.transreal-dot.active { background: var(--red); transform: scale(1.3); }

.transreal-intro { position: absolute; z-index: 4; text-align: center; opacity: 1; transition: opacity .4s ease; }
.transreal-intro.hide { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
    .transreal-exp { height: 320vh; }
    .transreal-plano svg, .transreal-sistema svg, .transreal-producto svg { width: min(80vw,340px); }
}

@media (prefers-reduced-motion: reduce) {
    .transreal-layer, .transreal-intro { transition: none; }
}