/* ================================================================
   LECOMAN — Tokens de diseño
   ================================================================

   Este fichero describe el diseño que la web realmente tiene.

   La versión anterior no lo hacía: declaraba 116 tokens de los que main.css
   solo usaba 18, y varios de los que sí se usaban decían una cosa distinta de
   la que se veía en pantalla. El caso claro era el color oscuro de marca:
   aquí ponía #0D1117 y toda la web estaba pintada con #1a1a2e a mano, 31
   veces. Un fichero de tokens que miente es peor que no tenerlo, porque quien
   venga detrás cambia el token, no ve ningún cambio y acaba pintando a mano
   otra vez.

   Regla para mantenerlo: aquí solo entra lo que se usa. Si un token deja de
   usarse, se borra. Si un valor se repite en main.css, sube aquí.
   ================================================================ */

/* ================================================================
   FUENTES
   ================================================================
   Alojadas en media/fuentes/, con swap para que el texto no
   desaparezca mientras se descarga.

   Cada peso viene en DOS ficheros y se reparte por unicode-range:

     nombre.woff2      latino basico  -> castellano y catalan caben
                                         enteros aqui, asi que es lo
                                         unico que se descarga
     nombre-ext.woff2  latino extendido -> checo, polaco, turco... el
                                         navegador solo lo pide si
                                         aparece un caracter de esos

   Antes se servia la tipografia completa: 268 KB en cada primera
   visita. Repartida asi son 123 KB y el resto no se pide nunca.
   Las originales sin recortar estan en recursos/fuentes-originales/
   y el recorte se rehace con scripts/subset-fuentes.py.
   ================================================================ */

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-400-ext.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-500-ext.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-600-ext.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('../media/fuentes/clash-grotesk-700-ext.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-400-ext.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-500-ext.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-600-ext.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../media/fuentes/plus-jakarta-sans-700-ext.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-400-ext.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-500-ext.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-600-ext.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2192, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../media/fuentes/spline-sans-700-ext.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

    /* ============================================================
       1. MARCA
       ============================================================ */

    /* El rojo. Es el único color con peso de marca de toda la web:
       titulares resaltados, botones, la barra de progreso, los focos. */
    --color-primary: #E63946;
    --color-primary-light: #FF6B6B;
    --color-primary-dark: #C1121F;
    /* Rojo más oscuro para enlaces que necesitan contraste >= 4.5 sobre blanco.
       Contraste: 6.22:1 sobre #FFFFFF (cumple AA). */
    --color-primary-text: #C1121F;
    /* El rojo de los estados pulsados. Estaba escrito tres veces con tres
       valores distintos —#d63447, #d32f2f y #c41d2e— en tres botones que hacen
       lo mismo. Ninguno de los tres era una decision, eran tres tanteos. */
    --color-primary-hover: #D32F3C;
    --color-primary-soft: #FF8A8A;
    /* En RGB suelto para poder componer transparencias con rgba(). */
    --color-primary-rgb: 230, 57, 70;

    /* El azul-tinta oscuro. Es el color del texto, del pie, del menú y del
       preloader: en la práctica, el segundo color de la marca. */
    --color-ink: #1a1a2e;
    --color-ink-rgb: 26, 26, 46;
    /* Dos escalones más oscuros, para el pie y para el fondo del menú. */
    --color-ink-deep: #0f0f1a;
    --color-ink-deepest: #0a0a0f;


    /* ============================================================
       2. SUPERFICIES
       ============================================================ */

    --surface-page: #FAFBFE;        /* fondo general y del hero */
    --surface-page-rgb: 250, 251, 254;  /* para degradados que tienen que acabar en transparente */
    --surface-raised: #FFFFFF;      /* tarjetas, formulario, popups */
    --surface-sunken: #F5F5F5;      /* franja de servicios */
    --surface-muted: #F5F7FA;       /* bloques secundarios */


    /* ============================================================
       3. TEXTO
       ============================================================ */

    --text-primary: var(--color-ink);
    --text-secondary: rgba(var(--color-ink-rgb), 0.7);
    --text-muted: rgba(var(--color-ink-rgb), 0.5);
    --text-inverse: #FFFFFF;

    /* Sobre fondo oscuro (pie y menú), donde el texto va al revés. El pie
       usaba NUEVE opacidades distintas de blanco —0.15, 0.25, 0.3, 0.35, 0.4,
       0.5, 0.6, 0.7 y 0.85— para tres niveles de jerarquía reales. */
    --text-on-dark: rgba(255, 255, 255, 0.85);
    --text-on-dark-soft: rgba(255, 255, 255, 0.65);
    --text-on-dark-muted: rgba(255, 255, 255, 0.45);


    /* ============================================================
       4. ESTADO
       ============================================================ */

    --color-success: #22C55E;
    --color-error: #EF4444;


    /* ============================================================
       5. BORDES
       ============================================================ */
    --border-strong: rgba(var(--color-ink-rgb), 0.2);
    --border-on-dark: rgba(255, 255, 255, 0.1);


    /* ============================================================
       6. TIPOGRAFÍA
       ============================================================
       Las tres familias vienen de Fontshare. Las pilas de respaldo importan
       más de lo que parece: la hoja de Fontshare se carga sin bloquear el
       pintado, así que el primer fotograma de cada visita se dibuja siempre
       con la de respaldo. */

    --font-heading: 'Clash Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-primary: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Spline Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Escala fluida. Cada paso interpola entre móvil y escritorio sin saltos
       ni media queries: es lo que evita los tamaños que "pegan un brinco" al
       cruzar un breakpoint.

       Los pasos salen de los tamaños que la web ya usaba, agrupados. Antes había
       cuarenta tamaños distintos, con NUEVE escalones entre 0,6rem y 1rem
       —0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95 y 1—, diferencias que el ojo
       no distingue pero que impiden que dos etiquetas de la misma clase se
       vean iguales. Aquí son cuatro pasos con separación perceptible. */
    /* El suelo era 0.65rem, o sea 10.4px en movil: demasiado pequeno para
       mayusculas con tracking ancho, que es donde se usa. Ahora nunca baja de
       12px, el minimo razonable para texto de interfaz. */
    --text-2xs: clamp(0.75rem, 0.68rem + 0.28vw, 0.8125rem);   /* insignias */
    --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.85rem);   /* etiquetas */
    --text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);  /* texto auxiliar */
    --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* cuerpo */
    --text-md: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* entradillas */
    --text-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);   /* destacados */
    --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);        /* subtítulos */

    /* Los dos tamaños de titular. El resto de tamaños grandes se quedan a
       propósito en su componente: son la jerarquía de cada sección y meterlos
       en tres pasos comunes la aplanaría. */
    --text-title: clamp(2rem, 6vw, 4.5rem);   /* titulares de sección */
    --text-hero: clamp(3rem, 10vw, 7rem);     /* el h1 del hero */

    --leading-none: 1;          /* cifras y elementos de una sola línea */
    --leading-tight: 1.1;       /* titulares grandes */
    --leading-snug: 1.3;        /* titulares pequeños y tarjetas */
    --leading-normal: 1.6;      /* cuerpo */
    --leading-relaxed: 1.75;    /* párrafos largos */

    --tracking-tight: -0.03em;  /* titulares de display */
    --tracking-snug: -0.02em;
    --tracking-wide: 0.1em;
    --tracking-wider: 0.15em;
    --tracking-label: 0.2em;    /* las etiquetas en versalitas */


    /* ============================================================
       7. RITMO VERTICAL
       ============================================================
       El aire entre secciones es lo que más marca si una web respira o va
       apretada. Estas tres medidas cubren todas las secciones de la web y
       hacen que el ritmo sea el mismo de arriba abajo, que antes no lo era:
       había secciones a 6rem, otras a 8 y otras con el padding partido. */

    --section-gap: clamp(6rem, 12vh, 11rem);        /* el ritmo normal */
    --section-gap-lg: clamp(8rem, 15vh, 15rem);     /* respiros grandes */


    /* ============================================================
       8. CONTENEDOR
       ============================================================ */

    --container-max: 1440px;
    --container-pad: clamp(1.5rem, 5vw, 5rem);

    /* Cuánto hay que descontar al saltar a un ancla, para que la sección no
       aterrice detrás de la cabecera fija.

       88px es su altura REAL sin desplazar: 40 de logo más 1,5rem de relleno
       arriba y abajo. Desplazada se encoge a 72 (1rem de relleno), y se usa la
       medida mayor a propósito: quedarse corto tapa el titular, pasarse deja
       16px de aire que no molesta.

       Lo lee también scripts/main.js con anchorOffset(), para que no puedan
       separarse. Antes el CSS decía 104 y el JS 80, y ninguno era correcto. */
    --anchor-offset: 88px;


    /* ============================================================
       9. RADIOS
       ============================================================ */

    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --radius-circle: 50%;
    /* Para cajas grandes, que en móvil piden menos curva que en escritorio. */
    --radius-card: clamp(16px, 2.5vw, 24px);


    /* ============================================================
       10. ELEVACIÓN
       ============================================================
       Antes cada sombra se escribía a mano en el sitio donde hacía falta, y
       salían cuatro resplandores rojos distintos —0 8px 30px al 0.3, 0 8px
       25px al 0.4, 0 6px 25px al 0.4 y 0 6px 25px al 0.45— que querían decir
       exactamente lo mismo. Las diferencias no eran decisiones de diseño,
       eran ruido, y hacían que dos botones iguales no se sintieran iguales.

       Las sombras neutras NO están aquí, y es a propósito: son una docena y
       cada una se usa exactamente una vez, en un fondo distinto. Meterlas en
       una escala de cuatro pasos obligaría a cambiar varias para que
       encajaran, y el fichero volvería a describir un diseño que no es el que
       hay. Lo que sí está aquí es lo que se repite. */

    /* El resplandor rojo de los elementos activos, uno solo para toda la web.
       Sustituye a ocho escrituras distintas del mismo efecto. */
    --glow-primary: 0 6px 25px rgba(var(--color-primary-rgb), 0.3);
    --glow-primary-strong: 0 8px 28px rgba(var(--color-primary-rgb), 0.42);


    /* ============================================================
       11. MOVIMIENTO
       ============================================================
       Las curvas viven aquí y no en main.css, que es donde estaban. Son
       tokens de diseño como cualquier otro: definen cómo se mueve la marca. */

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);


    /* ============================================================
       12. CAPAS
       ============================================================
       La web tenía diecisiete valores de z-index distintos, con el extremo
       alto en 999, 1000, 9990, 9997, 9999, 10000, 99999, 100000, 999998 y
       999999: el patrón de ir añadiendo nueves hasta que algo se pone
       delante. De ahí salían solapamientos reales: el aviso de cookies (99999)
       se ponía encima del lightbox de servicios (10000), y compartía valor con
       el popup de contacto, así que quién quedaba delante lo decidía el orden
       del HTML. El aviso ya no existe, pero la escala evita que vuelva a pasar
       con lo siguiente que se añada.

       La escala de abajo es corta a propósito: si un elemento nuevo no encaja
       en ninguno de estos escalones, lo que hay que revisar es el elemento. */

    --z-below: -1;
    --z-base: 1;
    --z-elevated: 10;
    --z-nav: 90;          /* menú a pantalla completa: por debajo de la
                             cabecera a propósito, porque el botón de cerrar
                             vive en la cabecera y tiene que seguir pulsable */
    --z-header: 100;
    --z-grain: 200;       /* textura de grano, sin eventos de puntero */
    --z-progress: 300;    /* barra de progreso de scroll */
    --z-modal: 500;       /* lightbox y popup de contacto */
    --z-preloader: 800;   /* tapa absolutamente todo lo anterior */
    --z-skip: 900;        /* enlace de salto: alcanzable siempre */
    --z-cursor: 1000;     /* el cursor va encima de todo, es el puntero */
}