/* =============================================================================
   SISTEMA — Sistema visual de Code4you
   Tokens, tipografía y estilos base. Un solo archivo, sin framework.
   ========================================================================== */

/* --- Tipografía autohospedada (latin, 50 KB en total) --------------------- */
@font-face {
    font-family: 'Plex Sans';
    src: url('../fonts/plex-sans-var.woff2') format('woff2-variations');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
    color-scheme: light;

    /* --- Color: tinta y papel ------------------------------------------- */
    --c-ink:        #0E1114;   /* grafito casi negro — texto principal */
    --c-ink-2:      #3F464D;   /* texto secundario */
    --c-ink-3:      #626A72;   /* texto terciario / metadatos (AA sobre papel) */
    --c-paper:      #FBFAF8;   /* papel — fondo principal */
    --c-paper-2:    #F2F1EC;   /* papel de sección */
    --c-rule:       #DCD9D2;   /* filete visible */
    --c-rule-soft:  #EAE8E2;   /* filete suave */

    /* --- Color de marca: SEÑAL, no relleno -------------------------------
       --c-signal es exclusivamente gráfico (nodos, líneas, marcas).
       Nunca como color de texto sobre papel: no alcanza contraste AA.
       Para texto acentuado se usa --c-signal-ink.                          */
    --c-signal:     #F6B72E;
    --c-signal-ink: #7A4E00;

    /* --- Superficie profunda (bandas de conversión) ---------------------- */
    --c-deep:       #0E1114;
    --c-deep-2:     #171B21;
    --c-deep-ink:   #F1EFEA;
    --c-deep-ink-2: #99A0A8;
    --c-deep-rule:  #272D34;

    /* --- Tipografía ------------------------------------------------------ */
    --f-sans: 'Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-display: clamp(2.625rem, 1.15rem + 5.6vw, 5.25rem);
    --t-h2:      clamp(1.875rem, 1.05rem + 3.3vw, 3.375rem);
    --t-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    --t-lead:    clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
    --t-body:    1.0625rem;
    --t-small:   0.9375rem;
    --t-micro:   0.75rem;

    --lh-display: 0.98;
    --lh-title:   1.08;
    --lh-lead:    1.5;
    --lh-body:    1.65;

    --ls-display: -0.032em;
    --ls-title:   -0.022em;
    --ls-mono:    0.09em;

    /* --- Espacio (base 4px) ---------------------------------------------- */
    --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5:  1.5rem;   --s-6:  2rem;     --s-7: 2.5rem;   --s-8: 3rem;
    --s-9:  4rem;     --s-10: 5rem;     --s-11: 6rem;    --s-12: 8rem;

    --s-section: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);

    /* --- Layout ---------------------------------------------------------- */
    --w-page:   77.5rem;   /* 1240px */
    --w-narrow: 54rem;
    --w-text:   64ch;      /* medida de lectura */
    --gutter:   clamp(1.25rem, 4.5vw, 3.5rem);

    /* --- Forma ------------------------------------------------------------
       Radios mínimos: la dirección SISTEMA es técnica, no redondeada.       */
    --r-1: 2px;
    --r-2: 4px;
    --hairline: 1px;

    /* --- Movimiento ------------------------------------------------------ */
    --e-out:  cubic-bezier(0.22, 0.68, 0.16, 1);
    --d-fast: 160ms;
    --d-base: 320ms;
    --d-slow: 900ms;
}

/* =============================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* =============================================================================
   3. TIPOGRAFÍA
   ========================================================================== */
.display {
    font-size: var(--t-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: 600;
    text-wrap: balance;
}

.h2 {
    font-size: var(--t-h2);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
    font-weight: 600;
    text-wrap: balance;
}

.h3 {
    font-size: var(--t-h3);
    line-height: 1.25;
    letter-spacing: -0.014em;
    font-weight: 600;
}

.lead {
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
    color: var(--c-ink-2);
    letter-spacing: -0.008em;
    max-width: var(--w-text);
}

.prose { max-width: var(--w-text); color: var(--c-ink-2); }
.prose + .prose { margin-top: var(--s-4); }

/* Voz técnica: la monoespaciada etiqueta, numera y nombra. */
.mono {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-3);
    font-weight: 400;
}

.eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-3);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.eyebrow::before {
    content: '';
    width: 1.5rem;
    height: var(--hairline);
    background: var(--c-signal);
    flex: none;
}

/* =============================================================================
   4. LAYOUT
   ========================================================================== */
.page   { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--w-narrow); }

.section       { padding-block: var(--s-section); }
.section--tight { padding-block: calc(var(--s-section) * 0.62); }
.section--paper { background: var(--c-paper-2); }
.section--deep  { background: var(--c-deep); color: var(--c-deep-ink); }
.section--deep .lead,
.section--deep .prose { color: var(--c-deep-ink-2); }
.section--deep .mono,
.section--deep .eyebrow { color: var(--c-deep-ink-2); }

.rule { height: var(--hairline); background: var(--c-rule-soft); border: 0; }

/* =============================================================================
   5. ENLACES
   ========================================================================== */
a { color: inherit; }

.link {
    text-decoration: none;
    background-image: linear-gradient(var(--c-rule), var(--c-rule));
    background-size: 100% var(--hairline);
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size var(--d-base) var(--e-out),
                background-image var(--d-fast) var(--e-out);
}
.link:hover {
    background-image: linear-gradient(var(--c-signal), var(--c-signal));
    background-size: 100% 2px;
}

/* Enlace con marca direccional: la flecha avanza, el texto no se mueve. */
.link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.008em;
}
.link-arrow::after {
    content: '→';
    color: var(--c-signal-ink);
    transition: transform var(--d-base) var(--e-out);
}
.link-arrow:hover::after { transform: translateX(0.35em); }
.section--deep .link-arrow::after { color: var(--c-signal); }

/* =============================================================================
   6. BOTONES
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 3rem;
    padding: 0 var(--s-6);
    border: var(--hairline) solid transparent;
    border-radius: var(--r-1);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: -0.006em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--d-fast) var(--e-out),
                color var(--d-fast) var(--e-out),
                border-color var(--d-fast) var(--e-out);
}

.btn--primary {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}
.btn--primary:hover { background: #23282E; border-color: #23282E; }

.btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-rule);
}
.btn--ghost:hover { border-color: var(--c-ink); }

.section--deep .btn--primary {
    background: var(--c-signal);
    color: var(--c-deep);
    border-color: var(--c-signal);
}
.section--deep .btn--primary:hover { background: #FFC94F; border-color: #FFC94F; }

.section--deep .btn--ghost {
    color: var(--c-deep-ink);
    border-color: var(--c-deep-rule);
}
.section--deep .btn--ghost:hover { border-color: var(--c-deep-ink-2); }

/* =============================================================================
   7. FOCUS
   ========================================================================== */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
    border-radius: var(--r-1);
}
.section--deep :focus-visible { outline-color: var(--c-signal); }

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: var(--s-4);
    z-index: 100;
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink);
    color: var(--c-paper);
    text-decoration: none;
    font-size: var(--t-small);
    border-radius: var(--r-1);
    transform: translateY(-160%);
    transition: transform var(--d-base) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* =============================================================================
   8. MOVIMIENTO
   Aparición sobria y direccional. El movimiento revela jerarquía; no decora.
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--d-slow) var(--e-out),
                transform var(--d-slow) var(--e-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Sin JavaScript el contenido debe verse íntegro. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =============================================================================
   9. FORMULARIOS
   ========================================================================== */
.campo { display: grid; gap: var(--s-2); }

.campo__label {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-ink-3);
}

.campo__input {
    width: 100%;
    padding: var(--s-3) 0;
    background: transparent;
    border: 0;
    border-bottom: var(--hairline) solid var(--c-rule);
    border-radius: 0;
    font-size: var(--t-body);
    color: var(--c-ink);
    transition: border-color var(--d-fast) var(--e-out);
}
.campo__input::placeholder { color: var(--c-ink-3); opacity: 0.7; }
.campo__input:hover  { border-bottom-color: var(--c-ink-3); }
.campo__input:focus  { border-bottom-color: var(--c-ink); }
.campo__input:focus-visible { outline-offset: 6px; }

textarea.campo__input { resize: vertical; min-height: 6rem; line-height: 1.6; }

.section--deep .campo__label { color: var(--c-deep-ink-2); }
.section--deep .campo__input {
    color: var(--c-deep-ink);
    border-bottom-color: var(--c-deep-rule);
}
.section--deep .campo__input::placeholder { color: var(--c-deep-ink-2); opacity: 0.6; }
.section--deep .campo__input:hover { border-bottom-color: var(--c-deep-ink-2); }
.section--deep .campo__input:focus { border-bottom-color: var(--c-signal); }

/* =============================================================================
   10. UTILIDADES
   ========================================================================== */
.vh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}