/* efecto 2027 — base: tokens, reset, tipografía, utilidades compartidas.
   Las secciones NO redefinen tokens: los usan. Estilos de sección en assets/css/sections/<nombre>.css */

@font-face { font-family: 'Bricolage Grotesque'; src: url('../../../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../../../fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../../../fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('../../../fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  /* color */
  --ink: #0d0d10;
  --ink-2: #15151a;
  --ink-3: #1e1e25;
  --paper: #f1eee6;
  --paper-2: #c9c6be;
  --muted: #8b8a93;
  --line: rgba(241, 238, 230, 0.12);
  --line-strong: rgba(241, 238, 230, 0.28);
  --accent: #ff4f1f;   /* bermellón efecto */
  --cobalt: #3b5bff;
  --lime: #c8ff2e;
  --sun: #ffc93c;
  --pink: #ff7ac8;
  --mint: #3ce0b0;

  /* tipografía */
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-pixel: 'Silkscreen', 'Geist Mono', monospace;

  /* escala fluida (320 → 1600) */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.22vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 2.1rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.8vw, 3.2rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.4vw, 5rem);
  --step-5: clamp(2.9rem, 1.7rem + 5.8vw, 8rem);
  --step-6: clamp(3.4rem, 1.5rem + 9.5vw, 12.5rem);

  /* espacio */
  --gutter: clamp(16px, 4vw, 56px);
  --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: clamp(3rem, 6vw, 6rem); --space-xl: clamp(5rem, 12vw, 12rem);
  --radius: 14px; --radius-l: 28px;
  --maxw: 1480px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --z-canvas: 0; --z-content: 1; --z-nav: 50; --z-menu: 60; --z-cursor: 90; --z-loader: 100;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* canvas de cubos */
#voxels { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: var(--z-canvas); pointer-events: none; }
#content { position: relative; z-index: var(--z-content); }
#voxels.is-overlay { z-index: 3; }

/* grano sutil encima de todo */
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space-xl); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
@media (max-width: 760px) { .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* tipografía */
.display { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.035em; line-height: 0.92; font-variation-settings: 'opsz' 96; }
.h1 { font-size: var(--step-6); }
.h2 { font-size: var(--step-5); }
.h3 { font-size: var(--step-3); }
.lead { font-size: var(--step-1); line-height: 1.45; color: var(--paper-2); max-width: 46ch; }
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; text-transform: uppercase; }
.pixel { font-family: var(--font-pixel); letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* eyebrow con cubito */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--paper-2); }
.eyebrow::before { content: ''; width: .62em; height: .62em; background: var(--accent); box-shadow: .62em .62em 0 -.12em var(--cobalt); }
.eyebrow .num { color: var(--muted); }

/* botones */
.btn { --bg: var(--paper); --fg: var(--ink); position: relative; display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 1.6em; border-radius: 999px; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-out), color .4s var(--ease-out); will-change: transform; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease-out); border-radius: inherit; }
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn--ghost { --bg: transparent; --fg: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--accent { --bg: var(--accent); --fg: var(--ink); }
.btn--accent::after { background: var(--paper); }
.btn .arrow { display: inline-block; transition: transform .5s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px) rotate(-45deg); }

.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.link-u:hover { background-size: 100% 1px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--paper); color: var(--ink); padding: .6em 1em; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* reveal: estado inicial lo maneja JS (core/reveal.js); sin JS se ve todo */
.js [data-reveal] { opacity: 0; }
.js.is-reduced [data-reveal] { opacity: 1 !important; transform: none !important; }

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