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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-body);
    background-image:
        radial-gradient(ellipse at 75% -5%,  rgba(212,175,55,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 5%  25%,  rgba(212,175,55,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 90%,  rgba(200,16,46,0.10)  0%, transparent 40%),
        radial-gradient(ellipse at 30% 110%, rgba(21,101,192,0.08) 0%, transparent 40%),
        linear-gradient(170deg, #1E1E22 0%, #1A1A1D 50%, #17171A 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

html.light-mode body {
    background-image:
        radial-gradient(ellipse at 75% -5%,  rgba(184,150,86,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 5%  25%,  rgba(184,150,86,0.10) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 90%,  rgba(200,16,46,0.08)  0%, transparent 40%),
        radial-gradient(ellipse at 30% 110%, rgba(21,101,192,0.07) 0%, transparent 40%),
        linear-gradient(170deg, #FAF7F2 0%, #F5F2ED 50%, #F0EDE7 100%);
}

.bg-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.bg-orb-1 {
    width: 860px; height: 860px;
    background: radial-gradient(circle, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.04) 45%, transparent 70%);
    top: -280px; right: -200px;
    animation: orbDrift1 22s ease-in-out infinite alternate;
}
.bg-orb-2 {
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(200,16,46,0.14) 0%, rgba(200,16,46,0.04) 45%, transparent 70%);
    bottom: -200px; left: -140px;
    animation: orbDrift2 18s ease-in-out infinite alternate;
}
.bg-orb-3 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(21,101,192,0.12) 0%, rgba(21,101,192,0.03) 45%, transparent 70%);
    top: 38%; right: 8%;
    animation: orbDrift3 26s ease-in-out infinite alternate;
}

html.light-mode .bg-orb-1 {
    background: radial-gradient(circle, rgba(184,150,86,0.26) 0%, rgba(184,150,86,0.06) 45%, transparent 70%);
}
html.light-mode .bg-orb-2 {
    background: radial-gradient(circle, rgba(200,16,46,0.16) 0%, rgba(200,16,46,0.04) 45%, transparent 70%);
}
html.light-mode .bg-orb-3 {
    background: radial-gradient(circle, rgba(21,101,192,0.12) 0%, rgba(21,101,192,0.03) 45%, transparent 70%);
}

/* Pulso sutil del gradiente dorado superior para dar vida al fondo */
body::before {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at 70% -5%, rgba(212,175,55,0.10) 0%, transparent 55%);
    animation: bodyBreath 9s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: 0.04em; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; }

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