*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { overflow-x: clip; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font-b); color: var(--text); background: var(--body-bg) fixed, var(--bg0);
  line-height: 1.6; overflow-x: hidden; min-height: 100vh;
  transition: color .5s, background-color .5s;
}
body.is-loading { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--font-h); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); margin-bottom: 1rem; }
h1 em, h2 em { font-style: normal; }
h1 em, h2 em, h1 em .wi, h2 em .wi { background: linear-gradient(100deg, var(--p), var(--glow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--font-m); letter-spacing: .04em; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 60ch; margin-top: 1rem; }
.eyebrow { color: var(--glow); font-size: .8rem; text-transform: uppercase; margin-bottom: 1rem; }
[data-theme="light"] .eyebrow { color: var(--p2); }
.center { text-align: center; margin-inline: auto; }
.wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; position: relative; z-index: 2; }
.wrap.narrow { width: min(820px, 100% - 2rem); }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--p); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--p); color: #fff; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .footer { position: relative; z-index: 2; }
#scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--p4), var(--p2), var(--glow)); box-shadow: var(--glow-sh); }

/* Cursor */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--glow); }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid var(--p2); transition: opacity .3s, width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s; }
.cursor-ring.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(168, 85, 247, .14); }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
@media (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } }

/* Loader */
#loader { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: .6rem; background: radial-gradient(ellipse at 50% 40%, #1a0b2e, #05030a 70%); color: #f5f3ff; text-align: center; padding: 1rem; }
.loader-logo { width: min(220px, 50vw); height: auto; border-radius: 24px; animation: pulseLogo 1.8s ease-in-out infinite; box-shadow: 0 0 80px rgba(139, 92, 246, .5); }
@keyframes pulseLogo { 50% { box-shadow: 0 0 120px rgba(168, 85, 247, .8); transform: scale(1.03); } }
.loader-text { font-size: .8rem; color: #c084fc; margin-top: 1rem; }
.loader-bar { width: min(340px, 78vw); height: 4px; background: rgba(168, 85, 247, .2); border-radius: 4px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6d28d9, #c084fc); box-shadow: 0 0 14px #a855f7; }
.loader-pct { font-size: 1.4rem; }
.loader-sub { font-size: .7rem; color: #a79bc4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* View transition del cambio de tema */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ===== Móvil / táctil ===== */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
a, button { touch-action: manipulation; }
@media (max-width: 900px), (pointer: coarse) {
  :root { --card: rgba(26, 11, 46, .84); --nav-bg: rgba(10, 5, 20, .88); }
  [data-theme="light"] { --card: rgba(255, 255, 255, .88); --nav-bg: rgba(255, 255, 255, .92); }
  /* backdrop-filter sobre un canvas WebGL es muy caro en GPUs móviles */
  .glass, .btn.ghost, .nav, .modal-bg, .photo-ph, .founder-photo .tag { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .modal-bg { background: rgba(5, 3, 10, .9); }
  .tilt::after { display: none; }
  .tilt:hover { box-shadow: var(--shadow); }
  .wa::before { animation-duration: 2.6s; }
  .hero-hud .r1, .hero-hud .r2, .hero-hud .r3 { animation-duration: 160s; }
}