/* ASCK — hoja de estilo de las páginas legales.
   Autónoma a propósito: sin JS, sin animaciones, sin dependencias del sitio
   principal, para que estas URLs carguen siempre (las revisan Meta, Google,
   LinkedIn y TikTok, a veces con bots que no ejecutan JavaScript). */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
    --obsidiana: #0b0b0d;
    --grafito: #141419;
    --niebla: #eceef1;
    --niebla-media: rgba(236, 238, 241, 0.72);
    --acero: #8d95a1;
    --filo: rgba(255, 255, 255, 0.10);
    --jade: #25D366;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --gutter: clamp(1.25rem, 5vw, 4rem);
    --measure: 68ch;
}

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

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

body {
    margin: 0;
    background: var(--obsidiana);
    color: var(--niebla-media);
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 10vw, 7rem);
}

/* --- Cabecera --- */
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.75rem;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    border-bottom: 1px solid var(--filo);
}

.brand {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--niebla);
    text-decoration: none;
}

.brand:hover { color: var(--jade); }

.top nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

.top nav a {
    color: var(--acero);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.top nav a:hover,
.top nav a[aria-current="page"] {
    color: var(--niebla);
    border-bottom-color: var(--jade);
}

/* --- Tipografía --- */
h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--niebla);
    margin: 0 0 0.75rem;
}

.updated {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acero);
    margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.lede {
    font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
    line-height: 1.65;
    color: var(--niebla);
    margin: 0 0 clamp(2rem, 5vw, 3rem);
}

h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.3;
    color: var(--niebla);
    margin: clamp(2.5rem, 6vw, 3.5rem) 0 0.875rem;
    scroll-margin-top: 2rem;
}

h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--niebla);
    margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1.125rem; }

ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--acero); }

a { color: var(--niebla); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(37, 211, 102, 0.5); }
a:hover { text-decoration-color: var(--jade); }

strong { color: var(--niebla); font-weight: 600; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    background: var(--grafito);
    border: 1px solid var(--filo);
    border-radius: 4px;
    padding: 0.1em 0.4em;
}

/* --- Bloque destacado --- */
.note {
    background: var(--grafito);
    border: 1px solid var(--filo);
    border-left: 2px solid var(--jade);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}

.note :last-child { margin-bottom: 0; }

/* --- Tabla --- */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 34rem;
}

th, td {
    text-align: left;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--filo);
    vertical-align: top;
}

th {
    color: var(--niebla);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Pie --- */
footer {
    margin-top: clamp(3.5rem, 8vw, 5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--filo);
    font-size: 0.8125rem;
    color: var(--acero);
}

footer a { color: var(--acero); }
footer a:hover { color: var(--niebla); }

/* --- Modo claro: respeta la preferencia del sistema --- */
@media (prefers-color-scheme: light) {
    :root {
        --obsidiana: #fbfbfc;
        --grafito: #f2f3f5;
        --niebla: #14151a;
        --niebla-media: rgba(20, 21, 26, 0.76);
        --acero: #626a76;
        --filo: rgba(20, 21, 26, 0.12);
    }
}