/* Base: variables, reinicio, tipografia y utilidades sueltas.
   El orden de las cinco hojas es intencionado y va de lo general a lo
   concreto; index.html las carga en ese orden y no debe cambiarse. */
:root{--dark:#111210;--paper:#f1f2e9;--acid:#dcff54;--muted:#9c9f94;--line:#ffffff26;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--dark);color:var(--paper);font:16px/1.6 'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--acid);color:var(--dark)}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* Al saltar desde el menu, el JS lleva el foco a la seccion de destino para
   que quien navega con teclado siga donde debe. Safari le pinta encima su
   cerco azul: aqui nadie ha tabulado hasta ahi, asi que sobra. El cerco de
   quien si tabula lo siguen dando las reglas :focus-visible. */
[tabindex="-1"]:focus{outline:none}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase;margin:0}
h3{margin-top:0}
p{margin-top:0}
h1{margin-top:0;font-weight:500;letter-spacing:-.075em;line-height:1.01;margin-bottom:0;font-size:clamp(72px,8.5vw,137px)}
h1 .line{display:block;overflow:hidden;padding-bottom:.075em;margin-bottom:-.045em}
h1 .line>span{display:block;animation:title-in 1s cubic-bezier(.2,.8,.2,1) both}
h1 .line:nth-child(2)>span{animation-delay:.12s}
h1 .line:nth-child(3)>span{animation-delay:.24s}
.accent{color:var(--acid)}
h2{margin-top:0;font-weight:500;letter-spacing:-.075em;line-height:1.01;margin-bottom:0;font-size:clamp(54px,6.2vw,100px)}
h2 em{font-style:normal;color:var(--muted)}
.outline-label{font-size:12px;color:var(--acid)}
.small-rule{display:block;height:3px;width:35px;background:#111;margin-bottom:20px}
.underlink{font-size:14px;display:inline-block;padding-bottom:6px;border-bottom:1px solid currentColor}
.tech{font-size:12px;color:#717763}
.date{font-size:12px;color:var(--muted)}
.js-motion .reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.js-motion .reveal.in-view{opacity:1;transform:none}
html{scroll-behavior:smooth;scroll-padding-top:76px}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.brand-icon{width:24px;height:24px;flex-shrink:0;vertical-align:middle}
.js-motion .portrait.reveal{transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js-motion .portrait-copy.reveal{transform:translateY(24px);transition:opacity .85s ease .12s,transform .85s cubic-bezier(.2,.7,.2,1) .12s}
.js-motion .portrait.reveal.in-view{opacity:1;transform:none}
.js-motion .portrait-copy.reveal.in-view{opacity:1;transform:none}
.js-motion .timeline li.reveal{transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js-motion .timeline li.reveal.in-view{opacity:1;transform:none}
/* DM Sans (variable, SIL OFL 1.1 - ver ../fonts/DMSans-OFL.txt), autoalojada.
   Sin esto la web caia a Arial en cualquier equipo sin la fuente. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('../fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('../fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@media(max-width:760px){h1{font-size:clamp(45px,10.7vw,80px);line-height:1.03;letter-spacing:-.065em}h2{font-size:clamp(39px,9.5vw,67px);line-height:1.08;letter-spacing:-.065em}.js-motion .reveal{transform:translateY(18px)}.magnetic{transform:none!important}html{scroll-padding-top:68px}.js-motion .portrait-copy.reveal{transition-delay:0s}.js-motion .timeline li.reveal{transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.js-motion .timeline li.reveal.in-view{transform:none}}
@media(max-width:360px){h1{font-size:42px}.eyebrow{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}*::before{animation:none!important;transition:none!important}*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.js-motion .portrait.reveal{opacity:1;transform:none;transition:none}.js-motion .portrait-copy.reveal{opacity:1;transform:none;transition:none}.js-motion .timeline li.reveal{opacity:1;transform:none;transition:none}}