/* ASRA · base2 · sistema compartido de los 10 estilos (fase C, 30 oct 2026).
   Fuentes locales, reset, safe areas, estados de revelado/scroll que activa fx2.js, materiales y accesibilidad.
   Cada estilo define sus tokens (--bg, --fg, --fg-2, --acc, --line, --fs, --fd, --fm, --ease, --r) y su CSS propio en línea.
   NO editar este archivo desde las páginas: si falta algo, se resuelve en el CSS de la página. */

/* ---------- Fuentes (todas locales, licencia OFL) ---------- */
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Syne";src:url("../fonts/syne-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-var.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens por defecto (cada estilo los sobreescribe) ---------- */
:root{
  --bg:#0b0b0d;--fg:#f4f4f5;--fg-2:#a1a1aa;--acc:#7dd3fc;--line:rgba(255,255,255,.12);--focus:var(--acc);
  --fs:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --fd:var(--fs);
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --r:18px;--maxw:1200px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --gut:max(20px,var(--sal),var(--sar));
  --mx:50vw;--my:50vh;--px:.5;--py:.5;--scroll:0;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:clip}
body{margin:0;min-height:100svh;font:400 17px/1.5 var(--fs);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg,canvas,picture{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:500;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--acc) 35%,transparent)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.container{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto}
.vh{min-height:100svh}
.safe-t{padding-top:max(var(--sat),12px)}
.safe-b{padding-bottom:max(var(--sab),12px)}
.dock{position:fixed;left:50%;bottom:calc(var(--sab) + 14px);transform:translateX(-50%);z-index:60}

/* ---------- Revelado (activa fx2.js) ----------
   [data-rv] (sube por defecto) | data-rv="left|right|scale|fade|blur|clip" · --d retardo · --dur duración · --ry distancia */
html.js [data-rv]{opacity:0;transform:translate3d(0,var(--ry,28px),0);transition:opacity var(--dur,.9s) var(--ease) var(--d,0s),transform var(--dur,.9s) var(--ease) var(--d,0s),filter var(--dur,.9s) ease var(--d,0s);will-change:opacity,transform}
html.js [data-rv="left"]{transform:translate3d(-32px,0,0)}
html.js [data-rv="right"]{transform:translate3d(32px,0,0)}
html.js [data-rv="scale"]{transform:scale(.94)}
html.js [data-rv="fade"]{transform:none}
html.js [data-rv="blur"]{transform:none;filter:blur(14px)}
html.js [data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path var(--dur,1.1s) var(--ease) var(--d,0s)}
html.js [data-rv].in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
/* Texto dividido: [data-split="words|chars|lines"] → unidades .u con --i; --st paso del stagger */
html.js:not(.rm) [data-split]:not(.split-ready){opacity:0}
[data-split] .w{display:inline-block;white-space:nowrap}
[data-split] .u{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .14em .18em;margin:-.1em -.14em -.18em}
[data-split] .u.l{display:block}
[data-split] .u>span{display:inline-block;transform:translate3d(0,115%,0);transition:transform var(--dur,1s) var(--ease) calc(var(--d,0s) + var(--i,0)*var(--st,.05s));will-change:transform}
[data-split] .u.l>span{display:block}
[data-split].in .u>span{transform:none}
/* Scroll: [data-scroll] recibe --p (0→1 al cruzar la pantalla), --vis (fracción visible) y --ps (progreso dentro de una sección más alta que la pantalla) */
[data-scroll]{--p:0;--vis:0;--ps:0}
[data-par]{will-change:transform}

/* ---------- Materiales ---------- */
.glass{background:color-mix(in srgb,var(--glass-bg,#fff) 10%,transparent);-webkit-backdrop-filter:blur(var(--glass-blur,22px)) saturate(160%);backdrop-filter:blur(var(--glass-blur,22px)) saturate(160%);border:1px solid color-mix(in srgb,var(--glass-edge,#fff) 16%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-edge,#fff) 22%,transparent),0 24px 60px -32px rgba(0,0,0,.55)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:color-mix(in srgb,var(--glass-bg,#fff) 75%,var(--bg))}}
.hair{border-top:1px solid var(--line)}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--grain,.07);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px 180px}
.press{transition:transform .22s var(--ease)}
.press:active{transform:scale(.965)}
.mag,.tilt{will-change:transform}
.tilt{transform-style:preserve-3d}
.pend{background:color-mix(in srgb,#f5b400 22%,transparent);outline:1px dashed color-mix(in srgb,#f5b400 70%,transparent);border-radius:4px;padding:0 .3em;font:inherit;color:inherit}

/* ---------- Componentes base (los estilos los redefinen) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-btn,999px);font:600 16px/1 var(--fs);background:var(--fg);color:var(--bg);transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;will-change:transform;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-o{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
.mq{display:flex;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq>*{flex:none;display:inline-flex;align-items:center;gap:var(--mq-gap,40px);padding-right:var(--mq-gap,40px);animation:mq var(--mq,28s) linear infinite}
.mq[data-dir="rev"]>*{animation-direction:reverse}
@keyframes mq{to{transform:translate3d(-100%,0,0)}}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acc);z-index:9998;pointer-events:none}
/* Cursor personalizado (solo puntero fino; fx2 lo crea) */
.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
html.cur-on .cur,html.cur-on .cur-dot{opacity:1}
.cur{width:34px;height:34px;border:1.5px solid var(--cur,#fff);mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;display:grid;place-items:center;font:600 11px/1 var(--fs);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.cur span{opacity:0;transition:opacity .2s}
.cur-dot{width:6px;height:6px;background:var(--cur,#fff);mix-blend-mode:difference}
html.cur-hover .cur{width:56px;height:56px;background:rgba(255,255,255,.14)}
html.cur-label .cur{width:76px;height:76px;background:#fff;border-color:#fff}
html.cur-label .cur span{opacity:1;color:#000}
html.cur-down .cur{transform:translate(-50%,-50%) scale(.85)}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none!important}}
.shader-off{display:none}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-rv],[data-split] .u>span,html.js [data-split]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  [data-par]{transform:none!important}
  .mq>*{animation:none!important}
  .cur,.cur-dot{display:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html.rm [data-rv],html.rm [data-split] .u>span,html.rm [data-split]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}