/* ==========================================================================
   tinku.css — Tokens de marca Grupo Tinku
   --------------------------------------------------------------------------
   SOLO TOKENS. Aquí no va maquetación.

   Este fichero lo comparten todos los niveles de propuesta, y NO comparten
   layout entre sí: el Nivel 1 es vertical con scroll y el Nivel 2 será 16:9
   apaisado y paginado. Cualquier regla de posición, anchura o rejilla va en
   el CSS del nivel correspondiente (nivel1.css, nivel2.css...), nunca aquí.

   COMBINACIONES PROHIBIDAS POR EL MANUAL DE MARCA — no introducirlas luego:
     · Rosa Tinku como texto sobre fondo claro ....... 1,9:1  NO CUMPLE
     · Azul Luz como texto de cuerpo sobre blanco .... 2,5:1  NO CUMPLE
   Ambos son válidos únicamente sobre Azul Tinku.
   ========================================================================== */

/* --- Tipografías autoalojadas ------------------------------------------- */
/* Descargadas de Google Fonts y servidas desde el propio dominio: la
   propuesta debe verse bien aunque el cliente esté tras un firewall
   corporativo, y no exponemos al destinatario a un tercero. */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

/* Nunito Sans no tiene peso 500. El énfasis se hace en 600. */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}

/* --- Tokens -------------------------------------------------------------- */

:root {
    /* Los colores se nombran por color, no por función, para que el Nivel 2
       pueda repartirlos de otra manera sin que los nombres mientan. */
    --azul-tinku:   #002D40;
    --blanco-tinku: #FAFBFC;
    --negro-tinku:  #151616;
    --azul-luz:     #3BA9E0;
    --rosa-tinku:   #FFAEBD;

    /* Derivados de uso interno. Grises calculados para cumplir AA sobre
       Blanco Tinku; no son colores de marca, son herramientas. */
    --gris-texto:  #4A5257;
    --gris-linea:  #DDE2E6;
    --gris-suave:  #F1F3F5;

    --fuente-titulos: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-cuerpo:  'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Escala tipográfica.
       Calibrada para leerse sin acercarse a la pantalla: el cuerpo va a 17px
       y las descripciones de producto a 15px. */
    --t-xs:  0.75rem;    /* 12px — aviso legal, rótulos */
    --t-sm:  0.9375rem;  /* 15px — descripciones, tabla */
    --t-base: 1.0625rem; /* 17px — cuerpo */
    --t-md:  1.25rem;    /* 20px */
    --t-lg:  1.5rem;     /* 24px */
    --t-xl:  1.875rem;   /* 30px */
    --t-2xl: 2.5rem;     /* 40px */

    /* Escala de espaciado */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;

    --radio: 4px;

    /* FONDO SIEMPRE CLARO. Sin modo oscuro, en ningún nivel. */
    color-scheme: only light;
}

/* --- Reset mínimo -------------------------------------------------------- */

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

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

body {
    /* Declarados explícitamente para que ningún navegador ni cliente de
       correo invierta los colores en modo oscuro. */
    background: var(--blanco-tinku);
    color: var(--negro-tinku);

    margin: 0;
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 var(--e-3); padding-left: 1.25em; }
ul:last-child { margin-bottom: 0; }
li { margin-bottom: var(--e-2); }

img { max-width: 100%; height: auto; }

table { border-collapse: collapse; width: 100%; }

strong, b { font-weight: 600; }

/* Enlaces en Azul Tinku, nunca en Azul Luz: sobre fondo claro el Azul Luz
   se queda en 2,5:1. El subrayado hace el resto del trabajo. */
a {
    color: var(--azul-tinku);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

/* Sobre Azul Tinku sí puede usarse el Azul Luz. */
.sobre-azul a { color: var(--azul-luz); }