@font-face { font-family: "Gabarito"; src: url("../assets/fonts/gabarito.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ground: #F1F2F4; --ink: #16171B; --ink-mid: #3B3E47; --red: #EC4433;
  --display: "Gabarito", system-ui, sans-serif; --text: "Hanken Grotesk", system-ui, sans-serif;
  --g: clamp(18px, 3.4vw, 56px); --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
h1, p { margin: 0; }
.d { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.96; text-wrap: balance; }

/* the gorge: one canvas behind the screen */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

/* the header: one row of small type, no bar (round 5) */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--g); font-size: 13px; line-height: 1; letter-spacing: 0.005em; pointer-events: none; }
.top a { pointer-events: auto; text-decoration: none; padding: 6px 0; }
.top__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.top__brand svg { width: 14px; height: 17px; }
.top__talk { display: inline-flex; gap: 7px; align-items: center; font-weight: 600; }
.top__talk:hover { text-decoration: underline; text-underline-offset: 4px; }
.top__talk svg { width: 13px; height: 13px; }

/* the hero: round 5's block, set larger, held at the left in the middle of the screen */
/* the scroll story: a tall track, its stage held on screen (assets/hero.js maps the scroll to the story) */
.story { position: relative; height: 6300vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 1; overflow: hidden; }
html.loading { overflow: hidden; }
/* the line between the walls (round 4): no box behind it, the walls open around it */
.thesis { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(22rem, 26vw); text-align: center; opacity: 0; visibility: hidden; }
/* the ten sections' text: each sits in the space its formation leaves open (placeholder copy from earlier rounds) */
.sec { position: absolute; max-width: 30rem; opacity: 0; visibility: hidden; }
.sec h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.1vw, 54px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.sec p { margin: 0.85em 0 0; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.45; color: var(--ink-mid); text-wrap: pretty; }
.sec--l { left: calc(var(--g) + 3.5vw); top: 50%; transform: translateY(-50%); }
.sec--r { right: calc(var(--g) + 3.5vw); top: 50%; transform: translateY(-50%); }
.sec--t { left: 50%; top: 13vh; transform: translateX(-50%); text-align: center; max-width: 40rem; }
.sec--tl { left: calc(var(--g) + 3.5vw); top: 14vh; }
.sec--c { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(22rem, 28vw); }
.sec--c h2 { font-size: clamp(24px, 2.1vw, 36px); }
.sec--band .stat { cursor: default; opacity: 0.42; transition: opacity 0.35s ease; }
.sec--band .stat.is-on { opacity: 1; }
.stat__bar { display: block; height: 3px; margin-top: 18px; background: rgba(22, 23, 27, 0.12); overflow: hidden; }
.stat__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.stat--red .stat__bar i { background: var(--red); }
.ph-wrap { display: grid; }
.ph { grid-area: 1 / 1; }
.ph--b { opacity: 0; }
.sec--band { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; width: min(78vw, 1200px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.stat b { display: block; font-family: var(--display); font-weight: 750; font-size: clamp(56px, 6.4vw, 118px); line-height: 0.9; letter-spacing: -0.05em; }
.stat--red b { color: #C62A1F; }
.stat p { margin-top: 0.6em; font-size: clamp(15px, 1.05vw, 18px); }
.stat small { display: block; margin-top: 0.7em; font-size: 12.5px; color: #6A6D76; }
.sec a.go { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.1em; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px);
  color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; pointer-events: auto; }
.sec a.go svg { width: 0.9em; height: 0.9em; }
.thesis p { font-family: var(--display); font-size: clamp(24px, 1.9vw, 34px); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.hero { position: absolute; left: calc(var(--g) + 3.5vw); top: 50%; transform: translateY(-52%); }
.hero h1 { font-size: min(4.3vw, 7vh); }
.hero h1 > span { display: block; white-space: nowrap; }
.hero h1 .brand { font-size: 2.7em; line-height: 0.86; letter-spacing: -0.045em; margin-bottom: 0.12em; }
.hero h1 > span:nth-child(2) { margin-left: 0.9em; }
.hero h1 > span:nth-child(3) { margin-left: 2.1em; }
.hero__sub { margin-top: 1.25em; font-size: clamp(17px, 1.3vw, 23px); line-height: 1.45; color: var(--ink-mid); max-width: 31ch; }
/* the loader: a panel in the page's own grey with the mark and the name in the middle, "Cargando" under them, and the studio's titles
   landing around them one after another with a sideways hit (a red echo snaps in behind each). Every motion here is
   a CSS animation of transform and opacity, so it runs on the compositor and keeps moving while the page compiles.
   At the end the titles go, the mark and name fly to their place in the header and the panel lifts (hero.js) */
@property --front { syntax: "<color>"; inherits: true; initial-value: #16171B; }
.loader { display: none; }
.loading .loader { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.loading .top__brand { opacity: 0; }
.ld-panel { position: absolute; inset: 0; background: var(--ground); transition: opacity 700ms linear 150ms, transform 900ms var(--ease) 150ms; }
/* light on light, so the panel does not slide away: it lifts a little and dissolves, and the page is simply there */
.ld--out .ld-panel { opacity: 0; transform: translateY(-3vh); }
.ld-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
/* the header's lockup (a 17px mark, 8px gap, 16px name) at about five times its size, so the flight lands exactly */
.ld-lock { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--display); font-weight: 700; font-size: min(6.2vw, 88px); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); --front: var(--ink); transform-origin: 0 0;
  transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1), color 420ms linear 380ms, --front 420ms linear 380ms;
  animation: ld-fade 700ms var(--ease) backwards; }
.ld-lock svg { width: 0.894em; height: 1.0625em; }
.ld--out .ld-lock { color: var(--ink); --front: var(--ink); }
.ld-load { margin-top: 1.6em; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-mid);
  transition: opacity 240ms linear; animation: ld-in 700ms var(--ease) 120ms backwards; }
.ld-bar { position: relative; width: 132px; height: 2px; background: rgba(22, 23, 27, 0.1); overflow: hidden; border-radius: 1px; }
.ld-bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease); }
@keyframes ld-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }
/* the titles: one lands top left, the next bottom right, every 1.3 s; each plays once (1.6 s) and the loader only
   leaves after the one on screen has gone, so no title is cut short (hero.js) */
.ld-words { position: absolute; inset: 0; transition: opacity 240ms linear; }
.ld--done .ld-words, .ld--done .ld-load { opacity: 0; }
.ld-w { position: absolute; top: calc(50% + var(--y)); margin: 0; font-family: var(--display); font-weight: 650; font-size: clamp(19px, 1.8vw, 30px);
  line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; color: var(--ink); opacity: 0;
  animation: ld-w 1.6s calc(var(--d) * 1.3s + 0.35s) both; }
.ld-w.skip { animation: none; opacity: 0; }
.ld-w.l { right: calc(50% + var(--x)); --dx: -76; }
.ld-w.r { left: calc(50% + var(--x)); --dx: 76; }
.ld-w::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: var(--red); opacity: 0; animation: ld-g 1.6s calc(var(--d) * 1.3s + 0.35s) both; }
@keyframes ld-w {
  0% { opacity: 0; transform: translateX(calc(var(--dx) * 1px)) skewX(calc(var(--dx) * 0.22deg)); animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); }
  11% { opacity: 1; transform: translateX(calc(var(--dx) * -0.07px)) skewX(calc(var(--dx) * -0.03deg)); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  20% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: translateX(calc(var(--dx) * -0.1px)); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  100% { opacity: 0; transform: translateX(calc(var(--dx) * -0.85px)) skewX(calc(var(--dx) * -0.12deg)); }
}
@keyframes ld-g {
  0% { opacity: 0.95; transform: translateX(calc(var(--dx) * 0.42px)); animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); }
  14% { opacity: 0.55; transform: translateX(calc(var(--dx) * -0.05px)); }
  25% { opacity: 0; transform: none; }
  100% { opacity: 0; }
}


@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 > span, .js .hero__sub { opacity: 0; transform: translateY(0.35em); }
  .js.ready .hero h1 > span, .js.ready .hero__sub { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 640ms var(--ease); }
  .js.ready .hero h1 > span:nth-child(2) { transition-delay: 70ms; }
  .js.ready .hero h1 > span:nth-child(3) { transition-delay: 140ms; }
  .js.ready .hero__sub { transition-delay: 220ms; }
}