html {
    font-size: 62.5%;
}

body {
    font-size: var(--txt-m);
}

:root {
    /* =====================
       COLORES — MARCA
    ===================== */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-text-on-primary: #ffffff;

    /* =====================
       COLORES — NEUTROS
    ===================== */
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-border: #e2e8f0;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-text-on-hover: #0f172a;

    /* =====================
       COLORES — SEMÁNTICOS
    ===================== */
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-warning: #d97706;

    /* =====================
       ESPACIADO — COMPONENTES
    ===================== */
    --space-s: clamp(1.6rem, calc(0.3824091778vw + 1.4776290631rem), 2rem);
    --space-m: clamp(2.4rem, calc(0.5736137667vw + 2.2164435946rem), 3rem);
    --space-l: clamp(3.1992rem, calc(1.2435946463vw + 2.8012497132rem), 4.5rem);
    --space-xl: clamp(4.2645336rem, calc(2.3761629063vw + 3.50416147rem), 6.75rem);

    /* =====================
       ESPACIADO — SECCIONES
    ===================== */
    --sec-space-s: clamp(2.4rem, calc(2.4856596558vw + 1.6045889101rem), 5rem);
    --sec-space-m: clamp(3.6rem, calc(3.7284894837vw + 2.4068833652rem), 7.5rem);
    --sec-space-l: clamp(4.7988rem, calc(6.1674952199vw + 2.8252015296rem), 11.25rem);
    --sec-space-xl: clamp(6.3968004rem, calc(10.0173992352vw + 3.1912326447rem), 16.875rem);
    --sec-pad-x: clamp(2rem, calc(4.206500956vw + 0.6539196941rem), 6.4rem);

    /* =====================
       LAYOUT — ANCHOS
    ===================== */
    --width-xs: calc((136.6 * 0.1) * 1rem);
    --width-s: calc((136.6 * 0.2) * 1rem);
    --width-m: calc((136.6 * 0.4) * 1rem);
    --width-l: calc((136.6 * 0.6) * 1rem);
    --width-xl: calc((136.6 * 0.8) * 1rem);
    --width-xxl: calc((136.6 * 0.9) * 1rem);
    --width-vp-max: 136.6rem;
    --width-50: calc((136.6 / 2) * 1rem);

    /* =====================
       LAYOUT — GRIDS
    ===================== */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-gap: clamp(1rem, 1.147vw + 1.633rem, 3.2rem);

    /* =====================
       TIPOGRAFÍA — CUERPO
    ===================== */
    --txt-xs: clamp(1.2rem, calc(0.095vw + 1.17rem), 1.3rem);
    --txt-s: clamp(1.3rem, calc(0.191vw + 1.24rem), 1.5rem);
    --txt-m: clamp(1.5rem, calc(0.191vw + 1.44rem), 1.7rem);
    --txt-l: clamp(1.7rem, calc(0.382vw + 1.58rem), 2.1rem);
    --txt-xl: clamp(2rem, calc(0.765vw + 1.76rem), 2.8rem);

    /* =====================
       TIPOGRAFÍA — TITULARES
    ===================== */
    --titulo: clamp(4rem, calc(1.529vw + 3.51rem), 5.6rem);
    --h1: clamp(2.8rem, calc(1.912vw + 2.19rem), 4.8rem);
    --h2: clamp(2.4rem, calc(1.147vw + 2.03rem), 3.6rem);
    --h3: clamp(2rem, calc(0.574vw + 1.82rem), 2.6rem);
    --h4: clamp(1.7rem, calc(0.287vw + 1.61rem), 2rem);

    /* =====================
       MISCELÁNEOS
    ===================== */
    --outer-border: 25px;
    --radiobotones: 1rem;
    --radio-sm: 0.5rem;
    --radio-img: 0.75rem;
    --radio-circle: 9999px;
    --hero: calc(100vh - 6rem);
    --logo-height: clamp(3.5rem, 5.21vw + 2.08rem, 5.5rem);
    --header-pad-y: clamp(2rem, 0.25vw + 0.84rem, 4rem);
    --header-height: calc((var(--header-pad-y)) * 2 + var(--logo-height));
    --sidebar-width: 28rem;
    --modal-width: 60rem;
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --z-dropdown: 100;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 400;

    /* =====================
       SOMBRAS
    ===================== */
    --shadow-soft: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}