/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* sutil textura radial azul de fondo */
  background-image:
    radial-gradient(900px 500px at 80% -10%, var(--blue-soft), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, rgba(47,107,255,0.06), transparent 55%);
  background-attachment: fixed;
}

/* El atributo [hidden] debe ocultar SIEMPRE, aunque el elemento
   tenga su propia regla de display (flex/inline-flex/etc.).
   Sin esto, menús/forms con display:flex no se cierran. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }

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

.muted { color: var(--text-muted); }
.center { text-align: center; margin-top: 36px; }
.center-head { text-align: center; }
.center-head .muted { margin-top: 6px; }

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

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-600); }

:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }