/* Muoto landing — every rule here comes from the design canvas
   (`Muoto Landing.dc.html`), lifted out of the inline styles the design
   compiler emits. app.js owns only what CSS cannot express: canvas drawing,
   the wheel-driven stage machine and the pointer-driven piece. */

:root {
  --ink: #242427;
  --ink-soft: #38383c;
  --text-muted: #57575c;
  --text-faint: #818187;
  --grey-mid: #b7b7bb;
  --grey: #c0c2c4;
  --line: #e8e8ea;
  --surface: #f6f6f7;
  --accent: #565e85;
  --accent-pale: #e9eaf0;
  --accent-muted: #a6abc4;

  --ease: cubic-bezier(.2, 0, 0, 1);

  /* Long-shadow direction, re-aimed by app.js as the page scrolls: one sun
     for every shadow on the page. */
  --sx: 9px;
  --sy: 9px;

  /* Hero tile size, published by the tile grid so the manifiesto strips match. */
  --htile: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent-pale); }

img, svg { display: block; }


/* ── Animations ───────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* A tile drops in from the upper right and its long shadow retracts under it. */
@keyframes encaje {
  0%   { opacity: 0; transform: translate(-18px, 18px); box-shadow: 18px -18px 0 var(--ink); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 var(--ink); }
}

@keyframes woosh {
  0%   { opacity: 0; transform: translateX(34vw); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* The strip holds two copies of the same tiles, so a half-height travel loops
   seamlessly. */
@keyframes tilescroll {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}


/* ── Scroller ─────────────────────────────────────────────────────────── */

.scroller {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroller::-webkit-scrollbar { display: none; }

.section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  scroll-snap-align: start;
}


/* ── Top bar ──────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 56px);
  background: linear-gradient(#fff 55%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.topbar__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}
.topbar__links--left  { justify-self: end;   margin-right: clamp(28px, 3.4vw, 56px); }
.topbar__links--right { justify-self: start; margin-left:  clamp(28px, 3.4vw, 56px); }

.topbar__links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 180ms;
}
.topbar__links a:hover { color: var(--ink); }

.topbar__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  pointer-events: auto;
}
.topbar__logo img { height: 38px; width: auto; }

/* The side links only fit beside the centred logo on wide viewports, and only
   earn their place once the reader has left the hero. */
@media (min-width: 1000px) {
  body[data-section]:not([data-section="0"]) .topbar__links {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ── 01 Hero ──────────────────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 100px clamp(24px, 5vw, 72px) 0;
}

.hero__tiles {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  width: 100%;
  height: calc(100% - 100px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero__piece {
  position: absolute;
  inset: 100px 0 0 0;
  z-index: 1;
  pointer-events: none;
  animation: rise .8s var(--ease) both;
  animation-delay: .2s;
}
.hero__piece-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero__piece-grab {
  position: absolute;
  left: 50%;
  top: 31%;          /* app.js re-aims this at the copy's midline */
  transform: translate(-50%, -50%);
  width: min(420px, 26vw);
  height: min(340px, 26vw);
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
}

/* Below this width the piece has nowhere to sit beside the copy and the menu. */
@media (max-width: 1099px) {
  .hero__piece { display: none; }
}

.hero__content {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  width: 100%;
}

.hero__copy {
  position: relative;
  z-index: 1;
  flex: 0 1 420px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  animation: rise .7s var(--ease) both;
  animation-delay: .1s;
}

.hero__title {
  font-family: Urbanist, sans-serif;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.03em;
  max-width: 10ch;
  margin: 0;
}

.hero__lead {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 34ch;
  margin: 0;
}

.hero__menu {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  text-align: right;
  /* Top padding is tuned so the four items sit centred against the copy block
     beside them, not flush with its top edge. */
  padding: clamp(34px, 3vw, 46px) clamp(8px, 2vw, 24px) 0 0;
  animation: rise .7s var(--ease) both;
  animation-delay: .25s;
}

.hero__menu a {
  transform-origin: right center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 180ms, transform 160ms var(--ease);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.hero__menu a:hover {
  color: var(--ink);
  text-decoration: underline var(--accent) 2px;
}


/* ── 02 Manifiesto ────────────────────────────────────────────────────── */

.manifiesto {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 110px clamp(140px, 16vw, 260px) 80px;
  text-align: center;
  overflow: hidden;
}

.manifiesto__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  user-select: none;
}
.manifiesto__strip--left  { left: 0; }
.manifiesto__strip--right { right: 0; }

.manifiesto__strip-track {
  display: grid;
  grid-template-columns: repeat(2, var(--htile));
  grid-auto-rows: var(--htile);
  animation: tilescroll 46s linear infinite;
}
.manifiesto__strip--right .manifiesto__strip-track { animation-direction: reverse; }

.manifiesto__strip-track img { width: 100%; height: 100%; object-fit: cover; }

/* The strips are two tiles wide on each side. On narrow viewports the design's
   fixed padding leaves the copy a sliver, so clear the strips and no more. */
@media (max-width: 719px) {
  .manifiesto {
    padding-left: calc(var(--htile) * 2 + 14px);
    padding-right: calc(var(--htile) * 2 + 14px);
  }
}

.manifiesto__lead {
  font-family: Urbanist, sans-serif;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0;
  animation: rise .8s var(--ease) both;
  animation-delay: .12s;
}

.manifiesto__body {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0;
  animation: rise .8s var(--ease) both;
  animation-delay: .26s;
}


/* ── 03 Proceso ───────────────────────────────────────────────────────── */

/* Default (and every narrow viewport): the three stages stack and scroll like
   any other content, so the section reads without JavaScript. app.js adds
   `proceso--layered`, which the media query below turns into the wheel-driven
   stage machine. */
.proceso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 72px;
  padding: 110px clamp(24px, 5vw, 72px) 72px;
  overflow: hidden;
}

.proceso__titles { display: none; }

.proceso__heading,
.proceso__prose h2 {
  font-family: Urbanist, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.proceso__heading { animation: rise .7s var(--ease) both; }

.proceso__stage--steps { display: flex; flex-direction: column; justify-content: center; gap: 44px; }

/* A grid rather than wrapping flex, because the divider has to know which
   steps start a row: on one column it runs along the top, otherwise the left. */
.proceso__steps { display: grid; max-width: 1180px; }

.proceso__step { background: #fff; animation: encaje .8s var(--ease) both; }
.proceso__step:nth-child(1) { animation-delay: .10s; }
.proceso__step:nth-child(2) { animation-delay: .26s; }
.proceso__step:nth-child(3) { animation-delay: .42s; }
.proceso__step:nth-child(4) { animation-delay: .58s; }

@media (min-width: 960px) {
  .proceso__steps { grid-template-columns: repeat(4, 1fr); }
  .proceso__step { padding: 24px 28px; border-left: 1px solid var(--line); }
  .proceso__step:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .proceso__step:nth-child(4n)   { padding-right: 0; }
}

@media (min-width: 560px) and (max-width: 959px) {
  .proceso__steps { grid-template-columns: repeat(2, 1fr); }
  .proceso__step { padding: 24px 28px; border-left: 1px solid var(--line); }
  .proceso__step:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .proceso__step:nth-child(2n)   { padding-right: 0; }
  .proceso__step:nth-child(n+3)  { border-top: 1px solid var(--line); }
}

@media (max-width: 559px) {
  .proceso__steps { grid-template-columns: 1fr; }
  .proceso__step { padding: 24px 0; border-top: 1px solid var(--line); }
  .proceso__step:first-child { padding-top: 0; border-top: 0; }
  .proceso__step:last-child { padding-bottom: 0; }
}

.proceso__step h3 {
  font-family: Urbanist, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.proceso__step p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; }

.proceso__stage--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}

/* Reserves the column the stage title list occupies in layered mode. */
.proceso__gutter { display: none; flex: 0 0 auto; width: clamp(130px, 15vw, 190px); }

.proceso__prose { flex: 1 1 300px; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.proceso__prose p { font-size: 17px; line-height: 1.62; color: var(--text-muted); margin: 0; }

#proceso-stage-1 .proceso__prose h2 { font-size: clamp(28px, 3vw, 42px); }
#proceso-stage-2 .proceso__prose { max-width: 420px; }
#proceso-stage-2 .proceso__prose p { max-width: 46ch; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-muted);
}

.fundadores {
  flex: 0 1 380px;
  min-width: 260px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  animation: rise .7s var(--ease) both;
}

.fundador { display: flex; flex-direction: column; gap: 12px; }
.fundador span {
  font-family: Urbanist, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fundador__tile {
  aspect-ratio: 1;
  background: var(--line);
  box-shadow: var(--sx) var(--sy) 0 #eeeef0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fundador__tile--pale { background: var(--surface); }
.fundador__tile svg { width: 54%; height: 54%; }

.capacidades {
  --tz: clamp(55px, 6vw, 85px);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, clamp(110px, 12vw, 170px));
  grid-auto-rows: clamp(110px, 12vw, 170px);
  gap: 14px;
  perspective: 1200px;
  user-select: none;
}

.capacidad { position: relative; }

.capacidad__cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease);
  transform: translateZ(calc(var(--tz) * -1));
}

.capacidad__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capacidad__face--name { transform: translateZ(var(--tz)); padding: 10px; }
.capacidad__face--name span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
.capacidad__face--glyph svg { width: 56%; }

@media (min-width: 1000px) {
  .proceso--layered {
    display: grid;
    align-items: center;
    gap: 0;
  }

  .proceso--layered .proceso__gutter { display: block; }

  .proceso--layered .proceso__titles {
    grid-area: 1/1;
    justify-self: start;
    align-self: center;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms var(--ease);
  }
  .proceso--layered .proceso__titles > div { padding: 14px 0; animation: woosh .7s cubic-bezier(.16, 1, .3, 1) both; }
  .proceso--layered .proceso__titles > div + div { border-top: 1px solid var(--line); }
  .proceso--layered .proceso__titles > div:nth-child(1) { animation-delay: .05s; }
  .proceso--layered .proceso__titles > div:nth-child(2) { animation-delay: .15s; }
  .proceso--layered .proceso__titles > div:nth-child(3) { animation-delay: .25s; }
  .proceso--layered .proceso__titles > div:nth-child(4) { animation-delay: .35s; }
  .proceso--layered .proceso__titles h3 {
    font-family: Urbanist, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }
  /* The list is a fixture of stages 2 and 3: it fades in once and never moves. */
  .proceso--layered[data-stage="1"] .proceso__titles,
  .proceso--layered[data-stage="2"] .proceso__titles { opacity: 1; }

  .proceso--layered .proceso__stage {
    grid-area: 1/1;
    opacity: 0;
    transform: translateX(64px);
    pointer-events: none;
    transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  }
  .proceso--layered[data-stage="0"] #proceso-stage-0,
  .proceso--layered[data-stage="1"] #proceso-stage-1,
  .proceso--layered[data-stage="2"] #proceso-stage-2 {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* Stages already read exit to the left, so the run reads as one direction. */
  .proceso--layered[data-stage="1"] #proceso-stage-0,
  .proceso--layered[data-stage="2"] #proceso-stage-0,
  .proceso--layered[data-stage="2"] #proceso-stage-1 { transform: translateX(-64px); }

  /* The very first paint must not animate into place. */
  .proceso--layered.proceso--settling .proceso__stage,
  .proceso--layered.proceso--settling .proceso__titles { transition: none; }
}


/* ── 04 Proyectos ─────────────────────────────────────────────────────── */

.proyectos {
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  flex-wrap: wrap;
  padding: 110px clamp(24px, 5vw, 72px) 72px;
}

.proyectos__copy {
  flex: 1 1 300px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: rise .7s var(--ease) both;
}
.proyectos__copy h2 {
  font-family: Urbanist, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.proyectos__copy p { font-size: 17px; line-height: 1.62; color: var(--text-muted); margin: 0; }

.pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: background 200ms, color 200ms;
}
.pill:hover { background: var(--ink); color: #fff; }

.proyectos__deck {
  position: relative;
  z-index: 1;
  flex: 1 1 340px;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: rise .8s var(--ease) both;
  animation-delay: .14s;
}

/* The cards sit on top of each other and fan out to the right by depth. The
   three resting positions live here rather than only in app.js, so the stack
   reads as a stack before the script runs and with it switched off. */
.projects {
  --fan-x: 78px;
  --fan-rot: 4.5deg;
  position: relative;
  height: 66vh;
  margin-bottom: 38px;
  cursor: grab;
  touch-action: pan-y;   /* sideways gestures flip cards, vertical scrolls the page */
}
.projects.is-dragging { cursor: grabbing; }

.project {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: clamp(28px, 3vw, 48px);
  background: var(--ink);
  color: #fff;
  backface-visibility: hidden;
  transform-origin: 50% 120%;
  will-change: transform;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease), background 620ms linear;
}
.project > * { transition: opacity 420ms linear; }

/* Depth 0 is the front card. app.js only sets data-depth as the stack turns;
   every position, shade and shadow is decided here, so the media query below
   can re-fan the cards without app.js knowing the viewport. */
.project[data-depth="0"] {
  z-index: 3;
  transform: none;
  background: var(--ink);
  box-shadow: 0 18px 40px rgba(36, 36, 39, .16);
}
.project[data-depth="1"] {
  z-index: 2;
  background: #53535c;
  transform: translate(var(--fan-x), 14px) rotate(var(--fan-rot)) scale(.94);
  box-shadow: 0 10px 28px rgba(36, 36, 39, .10);
  pointer-events: none;
}
.project[data-depth="2"] {
  z-index: 1;
  background: #7e7e88;
  transform: translate(calc(var(--fan-x) * 2), 44px) rotate(calc(var(--fan-rot) * 2)) scale(.88);
  box-shadow: 0 10px 28px rgba(36, 36, 39, .10);
  pointer-events: none;
}
.project[data-depth="0"] > * { opacity: 1; }
.project:not([data-depth="0"]) > * { opacity: 0; }

/* Same resting fan before app.js takes over, so the stack reads as a stack
   with scripting off instead of three cards piled on one spot. */
.projects:not(.is-live) .project:nth-child(1) { z-index: 3; box-shadow: 0 18px 40px rgba(36, 36, 39, .16); }
.projects:not(.is-live) .project:nth-child(2) {
  z-index: 2;
  background: #53535c;
  transform: translate(var(--fan-x), 14px) rotate(var(--fan-rot)) scale(.94);
}
.projects:not(.is-live) .project:nth-child(3) {
  z-index: 1;
  background: #7e7e88;
  transform: translate(calc(var(--fan-x) * 2), 44px) rotate(calc(var(--fan-rot) * 2)) scale(.88);
}
.projects:not(.is-live) .project:nth-child(2) > *,
.projects:not(.is-live) .project:nth-child(3) > * { opacity: 0; }

.project h3 {
  font-family: Urbanist, sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0;
}
.project p {
  font-size: 16px;
  line-height: 1.6;
  color: #d3d3d8;
  margin: 0;
  max-width: 38ch;
  text-align: justify;
  hyphens: auto;
}

/* Waiting for a real photograph. Swap the whole div for
   <img class="project__slot" src="…" alt="…"> and the layout holds. */
.project__slot {
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  outline: 1.5px dashed currentColor;
  outline-offset: -1.5px;
  color: inherit;
}
img.project__slot { outline: 0; object-fit: cover; padding: 0; }
.project__slot svg { width: 28px; height: 28px; opacity: .45; }
.project__slot span { font-size: 13px; font-weight: 500; letter-spacing: .01em; opacity: .65; }

.projects__controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3d3d8;
  border-radius: 20px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color 200ms, background 200ms, color 200ms;
}
.projects__arrow svg { width: 14px; height: 14px; }
.projects__arrow:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.projects__dots { display: flex; align-items: center; gap: 8px; margin: 0 18px; }
.projects__dots button {
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  background: #c8c8ce;
  transition: width 420ms var(--ease), background 320ms;
}
.projects__dots button[aria-current="true"] { width: 30px; background: var(--ink); }

/* The deck sits beside the copy on a wide section and below it on a narrow
   one, so it loses both the room to fan out to the right and the height to
   stand full size. The image slot absorbs the difference. */
@media (max-width: 859px) {
  .projects {
    --fan-x: 24px;
    --fan-rot: 2deg;
    height: min(62vh, 460px);
    margin-bottom: 28px;
  }
}


/* ── 05 Contacto ──────────────────────────────────────────────────────── */

.contacto {
  display: flex;
  flex-direction: column;
  padding: 110px clamp(24px, 5vw, 72px) 0;
}

.contacto__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
}

.contacto__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0;
  animation: rise .7s var(--ease) both;
  animation-delay: .10s;
}

.contacto__mail {
  font-family: Urbanist, sans-serif;
  font-size: clamp(26px, 4.6vw, 64px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  word-break: break-word;
  animation: rise .8s var(--ease) both;
  animation-delay: .18s;
}

.footer {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
}

.footer__social { display: flex; gap: 18px; align-items: center; }
.footer__social a { display: flex; transition: opacity 180ms; }
.footer__social a:hover { opacity: .6; }
.footer__social img { width: 20px; height: 20px; }

.footer__logo { height: 22px; width: auto; }
.footer__legal { justify-self: end; font-size: 13px; color: var(--text-faint); }

@media (max-width: 719px) {
  .footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .footer__legal { justify-self: center; }
}


/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .scroller { scroll-behavior: auto; }
  .manifiesto__strip-track { animation: none; }
  .hero__piece,
  .hero__copy,
  .hero__menu,
  .manifiesto__lead,
  .manifiesto__body,
  .proceso__heading,
  .proceso__step,
  .proceso--layered .proceso__titles > div,
  .fundadores,
  .proyectos__copy,
  .proyectos__deck,
  .contacto__lead,
  .contacto__mail { animation: none; }
}