/* ═══ Nexum · parte pública ═══════════════════════════════════════════════════
   El mismo lenguaje visual que el campus: verde Guardia Civil, Plus Jakarta
   Sans, esquinas redondeadas y mucho aire. Se escribe aparte a propósito —esto
   son ficheros estáticos, sin Moodle detrás— pero los valores son los mismos,
   para que quien entre al campus después no sienta que ha cambiado de empresa.

   Cuando llegue la lámina de Stitch, lo que cambia es la estructura de la
   página; estos tokens se quedan. */

/* La fuente va con nosotros, no pedida a Google. Dos motivos: carga antes, y
   no le manda la IP de cada visitante a un tercero, que es lo que obligaría a
   pedir consentimiento en una página cuya gracia es que no lo pide. Son los
   mismos ficheros que usa el campus. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/plusjakarta-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/plusjakarta-latinext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --nx-green: #007A53;
    --nx-green-dark: #006343;
    --nx-green-soft: #E3F1EA;
    --nx-on-green: #FFFFFF;

    --nx-ink: #1B1D1C;
    --nx-ink-2: #45494A;
    --nx-ink-3: #6B7270;

    --nx-bg: #F6F8F7;
    --nx-surface: #FFFFFF;
    --nx-line: #E4E7E4;

    --nx-radius: 16px;
    --nx-radius-sm: 12px;
    --nx-shadow: 0 1px 2px rgba(32, 33, 36, .06), 0 8px 24px rgba(32, 33, 36, .06);

    --nx-ancho: 1120px;
}

/* El modo oscuro entra por dos caminos y hay que cubrir los dos: el que pone
   el sistema operativo, y el que elige la persona con el botón de abajo a la
   izquierda, que manda sobre el anterior.

   Las dos listas son idénticas a propósito. En CSS a pelo no hay forma de
   escribirlas una sola vez estando una dentro de una consulta de medios, así
   que si tocas una, toca la otra. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nx-green: #5CC49E;
        --nx-green-dark: #7BD7B5;
        --nx-green-soft: #16342A;
        --nx-on-green: #06281C;

        --nx-ink: #E8EAED;
        --nx-ink-2: #C6CAC8;
        --nx-ink-3: #9AA0A6;

        --nx-bg: #17181A;
        --nx-surface: #292A2D;
        --nx-line: #3C4043;
        --nx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    --nx-green: #5CC49E;
    --nx-green-dark: #7BD7B5;
    --nx-green-soft: #16342A;
    --nx-on-green: #06281C;

    --nx-ink: #E8EAED;
    --nx-ink-2: #C6CAC8;
    --nx-ink-3: #9AA0A6;

    --nx-bg: #17181A;
    --nx-surface: #292A2D;
    --nx-line: #3C4043;
    --nx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--nx-bg);
    color: var(--nx-ink);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--nx-green);
}

.nx-envoltorio {
    width: 100%;
    max-width: var(--nx-ancho);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── El salto al contenido, para quien navega con teclado ─────────────────── */
.nx-salto {
    position: absolute;
    left: -9999px;
}

.nx-salto:focus {
    left: 20px;
    top: 20px;
    z-index: 20;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--nx-green);
    color: var(--nx-on-green);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.nx-cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--nx-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    transition: border-color .2s ease;
}

.nx-cabecera.is-pegada {
    border-bottom-color: var(--nx-line);
}

.nx-marca {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.nx-marca svg {
    flex-shrink: 0;
}

.nx-marca span {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nx-marca strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.nx-marca em {
    color: var(--nx-ink-3);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.nx-btn,
.nx-btn-plano {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.nx-btn {
    background: var(--nx-green);
    color: var(--nx-on-green);
}

.nx-btn:hover {
    background: var(--nx-green-dark);
    transform: translateY(-1px);
}

.nx-btn-plano {
    border-color: var(--nx-line);
    background: var(--nx-surface);
    color: var(--nx-ink-2);
}

.nx-btn-plano:hover {
    background: var(--nx-green-soft);
    color: var(--nx-green);
}

/* ── Portada ──────────────────────────────────────────────────────────────── */
/* El chip de sección. La portada le cambia el color sobre fondo oscuro. */
.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--nx-green-soft);
    color: var(--nx-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nx-pie {
    margin-top: 64px;
    border-top: 1px solid var(--nx-line);
    padding: 32px 0 40px;
    color: var(--nx-ink-3);
    font-size: 13.5px;
}

.nx-pie .nx-envoltorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nx-pie nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.nx-pie a {
    color: var(--nx-ink-3);
    text-decoration: none;
}

.nx-pie a:hover {
    color: var(--nx-green);
    text-decoration: underline;
}

/* ── Entrada en escena ────────────────────────────────────────────────────── */
/* Discreta: un desplazamiento corto y una opacidad. Una landing que se mueve
   demasiado parece un anuncio, y quien busca una academia quiere confianza. */
@media (prefers-reduced-motion: no-preference) {
    .nx-entra {
        animation: nx-entrada .7s cubic-bezier(.2, .7, .3, 1) both;
    }

    .nx-entra-2 { animation-delay: .08s; }
    .nx-entra-3 { animation-delay: .16s; }
    .nx-entra-4 { animation-delay: .24s; }

    @keyframes nx-entrada {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ── El conmutador de tema ────────────────────────────────────────────────── */
/* Flotante abajo a la izquierda, lejos del recorrido de lectura y del botón
   principal, que vive a la derecha en el móvil. Discreto: está en todas las
   pantallas y no compite con nada. */

.nx-tema {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--nx-line);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-ink-2);
    box-shadow: var(--nx-shadow);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.nx-tema:hover {
    background: var(--nx-green-soft);
    color: var(--nx-green);
    transform: translateY(-2px);
}

.nx-tema:focus-visible {
    outline: 3px solid var(--nx-green-soft);
    outline-offset: 3px;
}

/* Se enseña el icono de a dónde vas, no el de dónde estás: en claro, la luna. */
.nx-tema .nx-tema-sol { display: none; }
.nx-tema .nx-tema-luna { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nx-tema .nx-tema-sol { display: block; }
    :root:not([data-theme="light"]) .nx-tema .nx-tema-luna { display: none; }
}

:root[data-theme="dark"] .nx-tema .nx-tema-sol { display: block; }
:root[data-theme="dark"] .nx-tema .nx-tema-luna { display: none; }

/* Sin JavaScript el botón no hace nada, así que no se enseña. */
.nx-tema[hidden] { display: none; }

@media (max-width: 720px) {
    .nx-tema {
        left: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}