/* ==========================================================================
   OnTruck — Base: reset, design tokens y tipografía
   ========================================================================== */

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

:root {
    /* --- Marca ------------------------------------------------------------ */
    --navy-900: #071B34;
    --navy-800: #0C2545;
    --navy-700: #14314F;
    --navy-600: #1B3E63;

    --green-500: #20B573;   /* único color de CTA */
    --green-600: #189A60;
    --green-050: #E7F7EF;

    --blue-500: #0068C8;    /* acento: numeración, iconos, enlaces */
    --blue-600: #0056A6;
    --blue-050: #E8F2FC;

    --orange-500: #FF7A00;  /* alertas / destacados puntuales */
    --cyan-500: #01B0F1;

    /* --- Neutros ---------------------------------------------------------- */
    --ink: #0F2137;         /* titulares */
    --body: #48586C;        /* texto cuerpo */
    --muted: #7C8DA4;       /* texto terciario */
    --line: #E3E9F0;
    --surface: #F5F8FB;
    --surface-2: #EDF2F7;
    --white: #FFFFFF;

    /* --- Sombras ---------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(7, 27, 52, .06);
    --shadow-sm: 0 2px 8px rgba(7, 27, 52, .06);
    --shadow-md: 0 10px 30px rgba(7, 27, 52, .08);
    --shadow-lg: 0 24px 60px rgba(7, 27, 52, .14);
    --shadow-navy: 0 24px 60px rgba(7, 27, 52, .45);

    /* --- Formas ----------------------------------------------------------- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* --- Medidas ---------------------------------------------------------- */
    --max: 1200px;
    --max-wide: 1320px;
    --gutter: 24px;
    --header-h: 76px;

    /* --- Movimiento ------------------------------------------------------- */
    --ease: cubic-bezier(.22, .61, .36, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Mulish, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4, h5 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.28; }
h4 { font-size: 1.0625rem; line-height: 1.35; }

p { text-wrap: pretty; }

a {
    color: var(--blue-500);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a:hover { color: var(--blue-600); }

ul, ol { list-style: none; }

img,
video,
svg {
    display: block;
    max-width: 100%;
}

img { height: auto; }

strong, b { font-weight: 800; color: var(--ink); }

/* --- Utilidades ---------------------------------------------------------- */

.u-hidden { display: none !important; }

.u-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--green-500);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--green-500);
    color: #fff;
}

/* --- Modo oscuro invertido (bloques navy) -------------------------------- */

.on-navy,
.on-navy h1,
.on-navy h2,
.on-navy h3,
.on-navy h4 {
    color: #fff;
}

.on-navy p,
.on-navy li {
    color: rgba(255, 255, 255, .82);
}

/* --- Respeto por prefers-reduced-motion ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}