/* ==========================================================================
   base.css — variables, reinicio y tipografía
   ========================================================================== */

:root {
    /* Marca */
    --brand: #002596;
    --brand-dark: #001a4d;
    --accent: #00a8e8;

    /* Neutros acero */
    --ink: #0d1b2a;
    --steel-900: #16263a;
    --steel-600: #48576b;
    --steel-400: #78879b;
    --steel-100: #eef1f6;
    --steel-50: #f7f9fc;
    --line: #d8dee8;
    --white: #ffffff;

    /* Estado */
    --danger: #c0392b;
    --success: #1a7f4b;
    --warning: #b07d00;

    /* Tipografía */
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Métricas */
    --container: 1200px;
    --radius: 2px;
    --transition: 180ms ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--steel-600);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.05rem; }

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

::selection { background-color: var(--brand); color: var(--white); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Utilidades --- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Etiqueta técnica monoespaciada: "01 — SERVICIOS" */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background-color: currentColor;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 24px;
    top: -60px;
    z-index: 1200;
    padding: 10px 18px;
    background-color: var(--brand);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    transition: top var(--transition);
}

.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}