/* ================================================
   LEVEL TECH — FONDO CONÓCENOS — styles.css
   WebGL canvas fijo + wrapper de página
   Serpiente SVG comentada hasta integración final
================================================ */

/* ── Body ── */
body {
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100svh; /* 100vh → 100svh: corrige barra de URL en iOS Safari */
}

/* ── WebGL canvas — fijo detrás de todo ── */
#lt-cnt-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100svh; /* 100vh → 100svh: corrige iOS Safari */
    z-index: 0;
    pointer-events: none;
}

/* ── Wrapper principal — define altura total del scroll ── */
.lt-cnt-page {
    position: relative;
    z-index: 1;
    min-height: 100svh;
}

/* Tablet portrait + mobile — no hay ScrollTrigger spacers;
   el contenido define la altura de scroll. Sin override, el
   valor de desktop (~520vh heredado de dev) deja espacio vacío
   enorme después del footer. */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    .lt-cnt-page { min-height: auto; }
}

/* ── Serpiente SVG ── */
/* ── Serpiente SVG — mismo sistema que codegrid ── */
.lt-cnt-snake-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.lt-cnt-snake-wrap svg {
    /* preserveAspectRatio none + width/height 100% —
       el SVG se estira para llenar exactamente el wrapper
       sin escalar la altura del documento */
    width: 100%;
    height: 100%;
    overflow: visible;
}
#lt-cnt-snake-path {
    fill: none;
    stroke: var(--color-green);
    stroke-opacity: 0.72;
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(57,181,74,0.40));
}
/* ── Serpiente SVG — grosor por dispositivo (nuevo sistema 3 criterios) ── */

/* Tablet portrait + mobile landscape corto → stroke intermedio */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    #lt-cnt-snake-path { stroke-width: 10; }
}

/* Mobile portrait ≤479px → stroke más fino y más transparente */
@media (max-width: 479px) and (orientation: portrait) {
    #lt-cnt-snake-path { stroke-width: 7; stroke-opacity: 0.55; }
}