/* =========================================================
   GLOBAL.CSS
   Estilos compartidos por toda la página.
   Aquí NO deberían ir estilos exclusivos del Hero o Stats.
========================================================= */

:root {
    --color-bg: #061525;
    --color-bg-secondary: #071b2d;
    --color-primary: #2998ff;
    --color-primary-light: #54adff;
    --color-white: #ffffff;

    --text-muted: rgba(255, 255, 255, .58);
    --text-soft: rgba(255, 255, 255, .45);

    --border-light: rgba(255, 255, 255, .10);

    --container-width: 75rem;
    --container-width-fluid: 92%;

    --radius-sm: .75rem;
    --radius-md: 1.125rem;
    --radius-lg: 1.5rem;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 20rem;
    background: var(--color-bg);
    color: var(--color-white);
    font-family: "Inter", sans-serif;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

main {
    width: 100%;
}

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