/* Tokens medidos en la referencia (1280px): fondo #FAFAFA, tinta #424242, gris #949494 / #696969, líneas #D9D9D9 */
:root{
  --bg:#fafafa; --bg2:#ededed; --ink:#424242; --ink2:#696969; --mu:#949494; --line:#d9d9d9; --dot:#cfcfcf;
  --white:#fafafa; --pink:#ffbfc8;
  --wrap:1104px; --gut:clamp(20px,6.9vw,88px);
  --disp:"Inter Tight","Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17.6px/1.4 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* grano sutil del fondo */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer{position:relative;z-index:1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
svg{width:1em;height:1em;flex:none}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.mu{color:var(--mu)}
.mono,.mono-l,.lab{font:400 12px/1.5 var(--mono);letter-spacing:.02em;text-transform:uppercase}

/* esquinas con punto (detalle de la referencia) */
.c{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--dot);pointer-events:none}
.c1{top:4px;left:4px}.c2{top:4px;right:4px}.c3{bottom:4px;left:4px}.c4{bottom:4px;right:4px}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}
.w{display:inline-block;opacity:.12;transition:opacity .5s ease}
.w.on{opacity:1}
.mu .w.on{opacity:1}
.ch{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.split-in .ch{transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none;filter:none}.w{opacity:1}.ch{transform:none}
}