/* ================================================
   LEVEL TECH — CORE CSS
   Debe cargarse primero en todas las páginas,
   antes de cualquier otro stylesheet LT.

   Contiene:
   - @font-face (fuentes locales)
   - Variables CSS globales
   - Reset base
   - Estilos base universales (a, ul)

   NO incluye estilos de body — cada página
   define su propio fondo/color en su stylesheet.
================================================ */

/* ── Fuentes locales ── */
@font-face {
    font-family: 'Bebas Neue';
    src: url('../../02-Assets/Fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../02-Assets/Fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../02-Assets/Fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../02-Assets/Fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../02-Assets/Fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Variables globales ── */
:root {

    /* Tipografía */
    --font-display:     'Bebas Neue', sans-serif;
    --font-body:        'Poppins', sans-serif;

    /* ── Paleta principal ── */
    --color-green:      #39b54a;   /* acento principal landing */
    --color-blue:       #0257d2;   /* azul tech — acentos, page-reveal */
    --color-blue-light: #4a9dff;   /* azul claro — Visión, acentos secundarios (Conócenos) */
    --color-navy:       #0D1E38;   /* fondo S4 Marcas */
    --color-dark:       #222222;   /* fondo oscuro general */
    --color-black:      #000000;   /* fondo base */
    --color-white:      #ffffff;   /* textos sobre fondos oscuros */

    /* ── Azules profundos — fondos S2 y globales ── */
    --color-s2-bg:      #010510;   /* fondo base S2 Count — negro casi puro azulado */
    --color-navy-deep:  #070d2a;   /* fondo profundo S2 cards — tono más oscuro */
    --color-navy-mid:   #0a1840;   /* fondo profundo S2 cards — tono medio */
    --color-navy-dark:  #060f2e;   /* fondo profundo S2 cards — tonos oscuros */

    /* ── Gradientes S2 — fondos de tarjetas ── */
    --color-s2-card1-a: #020a1e;   /* card 1 — azul negro profundo, extremos */
    --color-s2-card1-b: #041232;   /* card 1 — azul negro profundo, centro */
    --color-s2-card2-a: #061a5e;   /* card 2 — azul eléctrico, extremos */
    --color-s2-card2-b: #0a2fa8;   /* card 2 — azul eléctrico, centro */
    --color-s2-card3-a: #080d30;   /* card 3 — índigo azulado, extremos */
    --color-s2-card3-b: #111d6e;   /* card 3 — índigo azulado, centro */
    --color-s2-green-a: #0d5c30;   /* shimmer verde S2 — extremo oscuro */
    --color-s2-green-b: #1a8a4a;   /* shimmer verde S2 — tono medio */

    /* ── Fondos S5 y S6 ── */
    --color-s5-bg:      #0D1425;   /* fondo S5 ClientsISO — Dark Space Navy */
    --color-s6-bg:      #020A1A;   /* fondo base S6 Form — azul noche profundo */
    --color-s6-ph:      #050D1F;   /* placeholder video S6 — ligeramente más claro */
    --color-s6-panel:   #060C18;   /* panel formulario S6 / fondo S4 Marcas */
    --color-s6-panel-b: #0A1830;   /* panel formulario S6 — variante más clara */
    --color-s6-detail:  #020810;   /* detalle más oscuro S6 */

    /* ── S3 HorizontalScroll ── */
    --color-cream:      #f0ede6;   /* slides 2 y 4 S3 — fondo claro */

    /* ── Globales UI ── */
    --color-header-bg:  #111111;   /* header dark / nav links / menú */

    /* ── RGB aliases — para gradientes y glows calculados (S4) ── */
    --bm-blue-rgb:  2, 87, 210;    /* alias RGB de --color-blue  */
    --bm-green-rgb: 57, 181, 74;   /* alias RGB de --color-green */

    /* ── Transparencias de acento — para glow/sombras ── */
    --color-green-glow-sm: rgba(57, 181, 74, .25);  /* glow sutil — bordes, halos */
    --color-green-glow-md: rgba(57, 181, 74, .50);  /* glow medio — hover botones */

    --color-error:        #e05252;   /* rojo validación — inputs en estado error */
}

/* ── Reset ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    overflow-x: clip; /* previene pan horizontal en mobile — clip en lugar de hidden para no romper position:sticky en descendientes */
    scrollbar-gutter: stable;
    overscroll-behavior: none; /* evita que el browser pre-comprometa el scroll nativo antes de que Lenis pueda interceptarlo */
}

/* ── Cursor custom — ocultar cursor del OS en dispositivos con mouse fino ── */
@media (pointer: fine) {
    *, *::before, *::after { cursor: none !important; }
}

/* ── Base universal ── */
a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

body {
    font-family: var(--font-body);
    background-color: #020818;
}

/* ── Secciones del landing — estructura base ──
   Definida una sola vez aquí.
   fold.css y outer.css solo añaden encima.
   Nunca redefinir en módulos individuales.
════════════════════════════════════════════ */
.lt-section {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: clip;
}

.lt-section__inner {
    position: absolute;
    inset: 0;
}

/* ── Fondo unificado mobile — dot grid + glows de marca sobre navy oscuro */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    body {
        background:
            radial-gradient(ellipse 70% 40% at 20% 30%, rgba(2,87,210,.06) 0%, transparent 60%),
            radial-gradient(ellipse 80% 50% at 80% 75%, rgba(57,181,74,.08) 0%, transparent 60%),
            radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px),
            #030d18;
        background-size: auto, auto, 28px 28px, auto;
    }
    .lt-section { background: transparent; }
}