/* INICIO ---------- VARIABLES Y ESTILOS BASE ------------- */
:root {
    /* Grid Layout */
    --grid-auto-2xs: repeat(auto-fit, minmax(5rem, 1fr));
    --grid-auto-xs: repeat(auto-fit, minmax(10rem, 1fr));
    --grid-auto-s: repeat(auto-fit, minmax(15rem, 1fr));
    --grid-auto-m: repeat(auto-fit, minmax(30rem, 1fr));
    --grid-auto-l: repeat(auto-fit, minmax(40rem, 1fr));
    --grid-auto-xl: repeat(auto-fit, minmax(50rem, 1fr));
    --grid-auto-2xl: repeat(auto-fit, minmax(70rem, 1fr));

    /* Overlay Colors */
    --color-overlay-negro-50: rgba(0, 0, 0, 0.50);
    --color-overlay-negro-70: rgba(0, 0, 0, 0.70);
    --color-overlay-blanco-50: rgba(255, 255, 255, 0.50);
    --color-overlay-blanco-70: rgba(255, 255, 255, 0.70);

    /* Blur Effects */
    --blur-s: blur(4px);
    --blur-m: blur(8px);
    --blur-l: blur(16px);

    /* Text Sizes */
    --text-xs: clamp(1.11rem, calc(-0.29vw + 1.2rem), 0.8rem);
    --text-s: clamp(1.33rem, calc(-0.12vw + 1.37rem), 1.2rem);
    --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --text-l: clamp(1.92rem, calc(0.72vw + 1.69rem), 2.7rem);
    --text-xl: clamp(2.3rem, calc(1.62vw + 1.79rem), 4.05rem);
    --text-2xl: clamp(2.76rem, calc(3.07vw + 1.78rem), 6.08rem);
    --text-3xl: clamp(3.32rem, calc(5.37vw + 1.6rem), 9.11rem);
    --text-4xl: clamp(3.98rem, calc(8.97vw + 1.11rem), 13.67rem);

    /* Spacing */
    --space-2xs: clamp(0.8rem, calc(0.2vw + 0.75rem), 1.02rem);
    --space-xs: clamp(1.02rem, calc(0.37vw + 0.91rem), 1.42rem);
    --space-s: clamp(1.28rem, calc(0.79vw + 1.03rem), 2.13rem);
    --space-m: clamp(1.6rem, calc(1.48vw + 1.13rem), 3.2rem);
    --space-l: clamp(2rem, calc(2.59vw + 1.17rem), 4.8rem);
    --space-xl: clamp(2.5rem, calc(4.35vw + 1.11rem), 7.2rem);
    --space-2xl: clamp(3.13rem, calc(7.11vw + 0.85rem), 10.8rem);

    /* Border Radius */
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.8rem, calc(-0.19vw + 0.86rem), 0.6rem);
    --radius-m: clamp(1.2rem, calc(-0.19vw + 1.26rem), 1rem);
    --radius-l: clamp(2rem, calc(-0.37vw + 2.12rem), 1.6rem);
    --radius-xl: clamp(3.2rem, calc(-0.56vw + 3.38rem), 2.6rem);
    --radius-full: 999rem;

    /* Border Sizes */
    --border-xs: 1px;
    --border-s: 2px;
    --border-m: 4px;
    --border-l: 8px;
    --border-xl: 12px;

    /* Colors */
    --color-primario: hsl(46, 94%, 51%);
    --color-secundario: hsl(221, 71%, 65%);
    --color-terciario: hsl(0, 0%, 100%);
    --color-lectura: hsl(201, 36%, 9%);
    --color-destacado: hsl(1, 79%, 59%);
    --color-formal: hsl(60, 2%, 88%);
    --color-footer: hsl(120, 5%, 13%);

    /* Layout */
    --ancho-contenido: 1100px;

}

/* FIN ---------- VARIABLES Y ESTILOS BASE ------------- */