/* ================================================
   LEVEL TECH — FOLD SYSTEM CSS

   REGLA DE ORO:
   - lt-section     → overflow:visible (para que el
                       rotate de 30deg no se clipee)
   - lt-fold-wrap   → transparente, sin background.
                       overflow:hidden para clipear
                       el contenido internamente.
   - lt-section__inner → aquí va TODO el color/fondo

   Landscape >=1024px: rotate activo.
   Mobile/portrait: transform:none, sin efecto.
================================================ */

/* La sección contenedor debe ser visible
   para que el fold-wrap rotado no quede cortado */
[data-transition="rotate"] {
    overflow: visible;
}

.lt-fold-wrap {
    position: absolute;
    inset: 0;
    transform: rotate(30deg);
    transform-origin: bottom left;
    will-change: transform;
    overflow: hidden;   /* clipea el contenido del inner */
}

/* Mobile/portrait — rotate desactivado
   Espeja el breakpoint del sistema responsive:
   fold solo actúa en landscape >=1200px */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    .lt-fold-wrap {
        transform: none !important;
        transform-origin: unset !important;
        will-change: auto;
        position: absolute;
        inset: 0;
    }
}