/* =========================================================
   García Recta Design — rollkit-scale.css
   "La escala del espacio": experiencia unificada de Altura +
   Ancho (reemplaza a las secciones sueltas anteriores). Una
   sola hoja de vidrio en SVG, controlada por scroll (GSAP
   ScrollTrigger + scrub), que termina disolviéndose en una
   foto real. Afecta SOLO esta sección de rollkit.php.
   ========================================================= */

.scale-exp { position: relative; height: 500vh; border-top: 1px solid var(--line); }
/* top:78px (no 0) porque el header del sitio también es sticky y
   queda arriba de todo — si esto pegara a top:0, el header taparía
   la parte de arriba de la hoja. height se resta esos mismos 78px
   para que el contenido entre completo en el espacio visible real. */
.scale-sticky { position: sticky; top: 78px; height: calc(100vh - 78px); overflow: hidden; display: flex; align-items: center; justify-content: center; }

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

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

.scale-svg-wrap { position: relative; height: min(66vh, 520px); aspect-ratio: 5/6; margin-bottom: 64px; }
.scale-svg { width: 100%; height: 100%; overflow: visible; }
.scale-sheet { fill: url(#glassFillScale); stroke: rgba(245,245,243,.32); stroke-width: 1.2; transition: opacity .6s ease; }
.scale-line { stroke: var(--red); stroke-width: 1.5; fill: none; }
.scale-tick { stroke: var(--red); stroke-width: 2; }

.scale-label {
    position: absolute; z-index: 2; text-align: left; opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
}
.scale-label.show { opacity: 1; }

/* Altura: pegado a la línea vertical (que está al 15% del ancho de
   la hoja), centrado en su misma altura. */
.scale-label-altura {
    left: -2%; top: 50%; transform: translate(-100%, -50%) translateY(10px);
    white-space: nowrap;
}
.scale-label-altura.show { transform: translate(-100%, -50%) translateY(0); }

/* Ancho: debajo de la hoja, con aire de sobra (el wrap ya tiene
   margin-bottom para esto), centrado horizontalmente. Separación en
   PÍXELES FIJOS (no %) — así no cambia según el alto de la ventana,
   que es lo que causaba que el número "subiera" en pantallas bajas. */
.scale-label-ancho {
    bottom: -64px; left: 50%; transform: translateX(-50%) translateY(10px); text-align: center;
}
.scale-label-ancho.show { transform: translateX(-50%) translateY(0); }

.scale-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem,6vw,4.2rem); line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.scale-num .unit { font-size: .3em; font-weight: 500; color: rgba(245,245,243,.55); }
.scale-sub {
    margin-top: 8px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(245,245,243,.5); white-space: nowrap;
    /* nowrap es lo que evita el salto: como el número va cambiando de
       ancho mientras cuenta, sin esto el microtexto de abajo se
       envolvía en 1 o 2 líneas según el ancho del número en cada
       instante, y eso corría todo lo de abajo. */
}

/* Fase "un sistema": hojas secundarias aparecen a los lados */
.scale-sibling { opacity: 0; transition: opacity .6s ease; }
.scale-sibling.show { opacity: .45; }

/* Foto real de cierre */
.scale-photo {
    position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.scale-photo.show { opacity: 1; }
.scale-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scale-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; }
.scale-photo-text { text-align: center; }
.scale-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; }
.scale-photo-text p:last-child { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,245,243,.55); }

/* Plegakit reusa esta sección (plegakit.php). Su hoja es angosta, así
   que la línea de altura queda más cerca del centro: el número de
   altura se acerca a esa línea. Solo escritorio — en mobile la
   etiqueta va arriba de la hoja, igual que en Rollkit. */
@media (min-width: 901px) {
    .scale-exp--plegakit .scale-label-altura { left: 24%; }
}

@media (max-width: 900px) {
    .scale-exp { height: 420vh; }
    .scale-svg-wrap { height: min(40vh, 320px); margin-top: 50px; margin-bottom: 80px; }
    /* En mobile no hay espacio a los costados: Altura pasa a ir
       arriba de la hoja en vez de a la izquierda. */
    .scale-label-altura {
        left: 50%; top: -18%; bottom: auto;
        transform: translate(-50%, -10px); text-align: center; white-space: normal;
    }
    .scale-label-altura.show { transform: translate(-50%, 0); }
    .scale-label-ancho { bottom: -56px; }
    .scale-num { font-size: clamp(2rem,9vw,3rem); }
}

@media (prefers-reduced-motion: reduce) {
    .scale-stage-visual, .scale-label, .scale-photo, .scale-sheet { transition: none; }
}