@font-face { font-family: Gabarito; src: url(../fonts/gabarito-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --white: #FFFFFF; --grey: #F1F2F4; --ink: #16171B; --red: #EC4433; --red-text: #C62A1F;
  --soft: #5C5E67; --soft-on-ink: #B4B6BE;
  --display: Gabarito, 'Hanken Grotesk', system-ui, sans-serif;
  --text: 'Hanken Grotesk', system-ui, sans-serif;
  /* type roles, named by job. Gabarito carries every voice above body: 800 for figures and the close, 700 for heads,
     450 for statements. Hanken Grotesk carries reading text and notes. */
  --t-poster: clamp(60px, 11vw, 168px);    /* the close, the phone number */
  --t-numeral: clamp(132px, 19vw, 288px);  /* the four figures, the biggest type below the hero */
  --t-display: clamp(30px, 6.2vw, 100px);  /* the headline, section heads */
  --t-heading: clamp(34px, 3.6vw, 54px);   /* heads inside cards and columns */
  --t-name: clamp(56px, 7.4vw, 112px);     /* Formación and Estudio as words */
  --t-lead: clamp(23px, 2.2vw, 32px);      /* statements set in Gabarito 450 */
  --t-title: clamp(22px, 2.3vw, 34px);     /* short heads of two to four words */
  --t-body: clamp(18px, 1.3vw, 20px);
  --t-note: 15px;                          /* sources, meta */
  --m: clamp(20px, 2.2vw, 32px);
  --gap: 24px;
  --card-r: clamp(14px, 1.6vw, 26px);
  /* one easing family for everything a visitor touches: a strong ease-out for anything that answers the hand,
     its in-out sibling for things that travel across the screen. Three durations, named by job. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press: 140ms;   /* the press, and every exit: release is always quick */
  --hover: 220ms;   /* hover in, colour, underline */
  --move: 300ms;    /* a thing changing place: the hand fanning, the float stepping aside */
  --ring: var(--ink);
  --btn-r: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--t-body)/1.55 var(--text); overflow-x: clip; text-wrap: pretty; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; margin: 0; text-wrap: balance; }
/* a jump from the menu or the skip link lands with the section's head in view, not under the top edge */
.caption, .half, .halves { scroll-margin-top: 12svh; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* the focus ring: a solid 3px band that follows the element's own corners. Ink on light grounds, white on ink, so it
   reads on the red buttons too (the old red ring vanished against them). It never animates: it answers a keyboard. */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.rows__both, .slot--ink, .close { --ring: var(--white); }
::selection { background: var(--red); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 20; background: var(--ink); color: var(--white); padding: 14px 20px; border-radius: var(--btn-r); font-weight: 650; --ring: var(--red); }
.skip:focus { top: 12px; }
svg[aria-hidden] use { pointer-events: none; }

/* the WhatsApp button is a small red card: its glyph sits in a white index box like a card's corner, a hairline and a
   low shadow give it an edge. On hover an ink copy of the same card is wiped across it from the left (a clipped
   duplicate, so label and glyph change colour exactly at the wipe's edge instead of fading through grey). The press
   sinks it 3%. Hover only where a real pointer exists. */
.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 24px 0 8px;
  background: var(--red); color: var(--ink); border-radius: var(--btn-r); font: 650 17px/1 var(--text); letter-spacing: -0.005em; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 12px 24px -16px rgba(22, 23, 27, 0.7);
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--press) var(--ease-out), box-shadow var(--hover) var(--ease-out); }
.button > svg, .button__ink > svg { width: 40px; height: 40px; padding: 10px; flex: none; background: var(--white); color: var(--ink); border-radius: calc(var(--btn-r) - 3px); }
.button__ink { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: inherit; padding: inherit; border-radius: inherit;
  justify-content: inherit; background: var(--ink); color: var(--white); pointer-events: none; clip-path: inset(0 100% 0 0 round var(--btn-r));
  transition: clip-path var(--press) var(--ease-out); }
.button__ink > svg { background: var(--red); color: var(--ink); }
.close .button__ink { background: var(--white); color: var(--ink); }
.button:active { transform: scale(0.97); box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 4px 10px -8px rgba(22, 23, 27, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 18px 30px -18px rgba(22, 23, 27, 0.8); }
  .button:hover .button__ink { clip-path: inset(0 0 0 0 round var(--btn-r)); transition-duration: var(--move); }
}

/* text links: the underline is drawn, not the browser's. At rest a thin rule; on hover it is wiped away to the right
   and redrawn from the left in red, so the line itself shows where the pointer went. */
.line { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat, linear-gradient(var(--line, var(--red)), var(--line, var(--red))) 0 100% / 0 2px no-repeat;
  padding-bottom: 0.12em; transition: background-size var(--hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .line:hover { background-size: 0 1px, 100% 2px; }
}

/* ---------- the deck: hero + the present, one held stage ---------- */
.deck { position: relative; background: var(--grey); }
.deck__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.deck__stage canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.deck.is-live canvas { opacity: 1; }
.deck__flow { position: relative; z-index: 1; margin-top: -100svh; }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; gap: 32px; padding: 24px var(--m) 0; min-height: 76px; }
.bar__logo svg { width: auto; height: 34px; color: var(--ink); }
.bar__links { display: flex; gap: 28px; margin-left: auto; font-size: 16px; font-weight: 550; }
.bar__links a { position: relative; display: inline-block; padding: 10px 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* a 2px rule in the half's colour draws in from the left under the hovered item and leaves to the right */
.bar__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--press) var(--ease-out); }
.bar__links li:nth-child(odd) a::after { background: var(--red); }
.bar__links a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .bar__links a:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--hover); }
}
/* the same action follows the reader once the header has gone, in the corner where WhatsApp buttons live */
.float { position: fixed; z-index: 10; right: var(--m); bottom: var(--m);
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 2px 0 rgba(22, 23, 27, 0.1), 0 22px 40px -20px rgba(22, 23, 27, 0.75);
  opacity: 0; visibility: hidden; transform: translateX(calc(100% + var(--m) + 24px)) rotate(6deg);
  transition: transform var(--press) var(--ease-out), opacity var(--press) var(--ease-out), visibility 0s var(--press), box-shadow var(--hover) var(--ease-out); }
/* it steps aside for real: whenever copy passes under its corner it slides out past the right edge with a small tilt,
   like a card pushed off the table, and slides back once the corner is clear. Out is quick, back in a touch slower.
   Transitions, not keyframes, so a reversal mid-way retargets from wherever the card is. */
.float.is-on { opacity: 1; visibility: visible; transform: none; transition-duration: var(--move), var(--move), 0s, var(--hover); transition-delay: 0s; }
.float.is-on:active { transform: scale(0.97); transition-duration: var(--press); }

.hero__title { text-align: center; font-size: var(--t-display); line-height: 0.96; margin: clamp(20px, 3.6svh, 56px) auto 0; padding: 0 var(--m); }
.hero__line { display: block; }

/* the hand: five cards held in the sentence where the word "mano" is. No tray: real cards with their own soft shadow,
   fanned from a wrist below the line. Hover opens the fan and lifts it, the press closes it a little, and once
   sorted the reds and the blacks sit apart with a gap between them, the two halves. Moves are transforms only
   (the old version slid `left`), each card a few ms after the one before it. */
.hand { --fan: 5deg; --lift: 0em; position: relative; display: inline-block; width: 2.42em; height: 0.78em; margin: 0 0.06em; padding: 0; border: 0; border-radius: 0.12em;
  background: none; cursor: pointer; font: inherit; color: inherit; vertical-align: baseline; -webkit-tap-highlight-color: transparent; }
.hand::after { content: ''; position: absolute; inset: -0.12em -0.04em; } /* a thumb-sized target */
.hand__card { position: absolute; bottom: 0.02em; left: 0.04em; width: 0.52em; height: 0.728em;
  transform-origin: 50% 170%; transform: translateX(calc(var(--slot) * 0.44em + var(--split, 0) * 0.1em)) rotate(calc((var(--slot) - 2) * var(--fan))) translateY(var(--lift));
  transition: transform var(--move) var(--ease-out); transition-delay: calc(var(--slot) * 18ms); }
.hand__card svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0.012em 0.006em rgba(22, 23, 27, 0.22)) drop-shadow(0 0.05em 0.06em rgba(22, 23, 27, 0.16)); }
.hand__card.is-flip svg { animation: flip 420ms var(--ease-in-out); }
@keyframes flip { 50% { transform: scaleX(0); } }
/* on arrival the hand is dealt: each card slides in from the river below, one after another, and lands in its slot */
@media (prefers-reduced-motion: no-preference) {
  .js .hand__card { animation: deal-in 620ms var(--ease-out) backwards; animation-delay: calc(450ms + var(--d, 0) * 85ms); }
}
@keyframes deal-in { from { opacity: 0; transform: translate(1.4em, 1.1em) rotate(24deg); } }
@media (hover: hover) and (pointer: fine) { .hand:hover { --fan: 9deg; --lift: -0.07em; } }
.hand:active { --fan: 3deg; --lift: 0.01em; }
.hand:active .hand__card { transition-duration: var(--press); transition-delay: 0s; }

/* the thesis in one sentence, then the two halves as two equal cards, then the one action */
.hero__horizon { margin: clamp(16px, 2.6svh, 32px) auto 0; padding: 0 var(--m); max-width: 46ch; text-align: center; text-wrap: balance;
  font: 500 clamp(19px, 1.6vw, 24px)/1.3 var(--text); letter-spacing: -0.01em; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); width: min(100% - 2 * var(--m), 940px); margin: clamp(18px, 3svh, 36px) auto 0; }
/* the two halves are links into their pages of the spread. A card lifts 4px toward the pointer, its shadow opens,
   its suits turn a few degrees and the arrow at its corner steps forward and fills. Pressed, it goes back down. */
.duo__card { position: relative; display: block; color: inherit; text-decoration: none; background: var(--white); border-radius: var(--card-r);
  padding: clamp(20px, 3svh, 30px) clamp(64px, 5vw, 76px) clamp(20px, 3svh, 30px) clamp(76px, 6.4vw, 96px);
  box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.05), 0 1px 0 rgba(22, 23, 27, 0.06), 0 18px 40px -24px rgba(22, 23, 27, 0.35);
  -webkit-tap-highlight-color: transparent; transition: transform var(--hover) var(--ease-out), box-shadow var(--hover) var(--ease-out); }
.duo__go { position: absolute; right: clamp(18px, 1.8vw, 28px); bottom: clamp(18px, 2.6svh, 28px); width: 36px; height: 36px; padding: 11px 8px; border-radius: 6px;
  background: var(--grey); color: var(--ink); transition: transform var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out), color var(--hover) var(--ease-out); }
.duo__idx svg { transition: transform var(--move) var(--ease-out); }
.duo__card:active { transform: scale(0.985); transition-duration: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .duo__card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.06), 0 2px 0 rgba(22, 23, 27, 0.05), 0 30px 50px -26px rgba(22, 23, 27, 0.45); }
  .duo__card:hover .duo__go { transform: translateX(4px); background: var(--ink); color: var(--white); }
  .duo__card--red:hover .duo__go { background: var(--red); color: var(--ink); }
  .duo__card:hover .duo__idx svg:first-child { transform: rotate(-8deg); }
  .duo__card:hover .duo__idx svg:last-child { transform: rotate(8deg); }
}
.duo__card h2 { font-size: var(--t-title); line-height: 1; margin-bottom: 10px; }
.duo__card p { font-size: 17px; line-height: 1.45; max-width: 34ch; }
.duo__idx { position: absolute; left: clamp(22px, 2.2vw, 34px); top: clamp(20px, 3svh, 30px); display: flex; flex-direction: column; gap: 6px; }
.duo__idx svg { width: clamp(24px, 2.1vw, 32px); height: clamp(24px, 2.1vw, 32px); }
.duo__card--red .duo__idx { color: var(--red); }
.duo__card--red h2 { color: var(--red-text); }
.duo__card--ink .duo__idx { color: var(--ink); }
.hero__go { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: clamp(18px, 3svh, 32px) auto 0; padding: 0 var(--m); text-align: center; }
.hero__free { font-size: var(--t-note); color: var(--soft); }

.caption { position: relative; padding: 0 var(--m); }
.caption--a { margin-top: 36svh; }
.caption--b { margin-top: 64svh; }
.caption__card { width: min(40vw, 600px); background: var(--white); border-radius: var(--card-r); padding: clamp(32px, 3.4vw, 56px); }
.caption__card h2 { font-size: var(--t-heading); line-height: 1.02; margin-bottom: 0.5em; }
.caption__card p { max-width: 38ch; }

.halves { margin-top: 60svh; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--m); }
.halves__text { width: min(36vw, 560px); }
.halves__text h2 { font-size: var(--t-heading); line-height: 1.02; margin-bottom: 0.9em; }
.halves__text p { padding-top: 18px; border-top: 1px solid rgba(22, 23, 27, 0.18); max-width: 34ch; }
.halves__text p + p { margin-top: 28px; }
.halves__text strong { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font: 700 var(--t-title)/1 var(--display); letter-spacing: -0.03em; }
.halves__text p:first-of-type strong { color: var(--red-text); }
.halves__text .glyph { width: 24px; height: 24px; margin: 0 4px 10px 0; vertical-align: 0; }
.glyph { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.12em; color: var(--red); margin-right: 2px; }
.glyph--ink { color: var(--ink); }

/* ---------- rows: a spread. The two halves as facing pages of the same size, then a band for what both share ---------- */
.rows { padding: clamp(120px, 14vw, 200px) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.rows__head { grid-column: 1 / 11; font-size: var(--t-display); margin-bottom: clamp(56px, 6vw, 96px); }
.rows__pair { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.half { display: flex; flex-direction: column; align-items: flex-start; }
.half__pic { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--grey); border-radius: var(--card-r); }
/* the name sits over the bottom edge of its render, so word and object read as one piece */
.half h3 { position: relative; margin: calc(-0.4 * var(--t-name)) 0 24px; }
.half__name { display: block; font: 800 var(--t-name)/0.86 var(--display); letter-spacing: -0.04em; }
.half--red .half__name { color: var(--red-text); }
.half__sub { display: block; margin-top: 0.3em; font: 450 var(--t-lead)/1.1 var(--display); letter-spacing: -0.02em; }
.half p { max-width: 40ch; }
/* the way on from each half: a line in Gabarito with an arrow that steps forward on hover */
.half__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--display); letter-spacing: -0.01em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.half__more span { padding-bottom: 0.14em; }
.half__more svg { width: 30px; height: 14px; flex: none; color: var(--red); transition: transform var(--press) var(--ease-out); }
.half__more:active svg { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) { .half__more:hover svg { transform: translateX(6px); transition-duration: var(--hover); } }
.rows__both { grid-column: 1 / 13; margin: clamp(96px, 10vw, 160px) calc(-1 * var(--m)) 0; padding: clamp(72px, 8vw, 128px) var(--m) clamp(80px, 9vw, 140px);
  background: var(--ink); color: var(--white); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.rows__label { grid-column: 1 / 10; font: 700 var(--t-display)/0.98 var(--display); letter-spacing: -0.035em; margin-bottom: clamp(56px, 6vw, 96px); }
.rows__suits { grid-column: 10 / 13; justify-self: end; align-self: start; display: grid; grid-template-columns: repeat(2, clamp(28px, 3vw, 44px)); gap: 12px; }
.rows__suits svg { width: 100%; height: auto; aspect-ratio: 1; color: var(--white); }
.rows__suits svg:nth-child(-n+2) { color: var(--red); }
.rows__way { grid-column: span 6; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.rows__way:nth-of-type(2) { grid-column: 7 / 13; }
.rows__way h4 { font-size: var(--t-title); line-height: 1; margin-bottom: 16px; }
.rows__way p { max-width: 40ch; color: var(--soft-on-ink); line-height: 1.6; letter-spacing: 0.005em; }

/* ---------- figures: the four numbers set as the page's largest type, two facing pairs, each with its source ---------- */
.figures { padding: clamp(120px, 14vw, 200px) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.figures__head { grid-column: 1 / 10; font-size: var(--t-display); margin-bottom: clamp(64px, 7vw, 112px); }
.fig { margin: 0; grid-column: 1 / 7; padding-top: 20px; border-top: 1px solid var(--ink); }
.fig:nth-of-type(even) { grid-column: 7 / 13; }
/* the second pair steps down and in, so the two pairs read as separate statements */
.fig:nth-of-type(n+3) { margin-top: clamp(96px, 10vw, 160px); }
/* every numeral keeps a line of air under its rule; the 34 uses it for the word that qualifies it */
.fig__n { position: relative; padding-top: calc(var(--t-lead) * 1.5); display: flex; align-items: flex-start; font: 800 var(--t-numeral)/0.8 var(--display); letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 clamp(24px, 2.6vw, 40px) -0.04em; }
.fig__n--red { color: var(--red-text); }
.fig__pc { font-size: 0.36em; line-height: 1; margin: 0.08em 0 0 0.08em; letter-spacing: 0; }
.fig__pre { position: absolute; left: 0.04em; top: 0; font: 450 var(--t-lead)/1 var(--display); letter-spacing: -0.02em; }
.fig__says { font: 450 var(--t-lead)/1.16 var(--display); letter-spacing: -0.02em; max-width: 22ch; }
.fig__src { margin-top: 16px; font-size: var(--t-note); line-height: 1.45; color: var(--soft); max-width: 44ch; }

/* ---------- the workshop card at three distances ---------- */
.workshop { position: relative; margin-top: clamp(120px, 14vw, 200px); background: var(--grey); height: 300svh; }
.workshop__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.workshop__title { display: contents; }
.workshop__top, .workshop__bottom { display: block; font-family: var(--display); font-size: var(--t-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1; text-align: center; position: relative; z-index: 2; }
.workshop__top { order: 1; margin-bottom: 0.18em; }
.workshop__frame { order: 2; }
.workshop__bottom { order: 3; margin-top: -0.32em; }
.workshop__frame { margin: 0; width: min(30vw, 58svh * 0.8); aspect-ratio: 4 / 5; overflow: hidden; background: #E4E6EA; }
.zoom { width: 100%; height: 100%; transform-origin: 0 0; }
.zoom img { width: 100%; height: 100%; object-fit: cover; }
.workshop__note { position: absolute; top: 50%; width: 28ch; transform: translateY(-50%); }
.workshop__note--left { right: calc(50% + min(15vw, 29svh * 0.8) + 56px); text-align: right; }
.workshop__note--right { left: calc(50% + min(15vw, 29svh * 0.8) + 56px); }

/* ---------- about: the mark as a drop cap ---------- */
.about { padding: clamp(140px, 14vw, 200px) var(--m) clamp(120px, 12vw, 180px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.about__facts { grid-column: 1 / 3; font-size: var(--t-note); line-height: 1.5; padding-top: 0.4em; }
.about__facts li + li { margin-top: 6px; }
.about__text { grid-column: 3 / 12; font: 450 var(--t-lead)/1.2 var(--display); letter-spacing: -0.02em; }
.about__mark { float: left; width: 3.6em; height: 3.6em; margin: 0.12em 0.5em 0 0; background: var(--grey); display: grid; place-items: center; }
.about__mark svg { width: 56%; height: auto; }
.about__lead strong { font-weight: 700; }
.about__second { margin-top: 1.2em; color: var(--soft); }

/* ---------- work: three names, three cards ---------- */
.work { padding: clamp(140px, 14vw, 200px) var(--m) 0; }
.work__names { font-size: var(--t-display); font-weight: 700; line-height: 1.06; color: var(--soft); }
/* each name is a link to its card. Hover: the little card stands up out of the line and turns, and a 0.06em rule in
   the card's colour draws under the name from the left. Press: the card is pushed back into the line. */
.work__names a { position: relative; color: var(--ink); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; border-radius: 0.06em; }
.work__names a::after { content: ''; position: absolute; left: 0; right: 0.8em; bottom: -0.02em; height: 0.06em; background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--press) var(--ease-out); }
.work__names a[href='#proyecto-2']::after { background: var(--red); }
.mini { display: inline-block; width: 0.58em; height: 0.78em; border-radius: 0.07em; vertical-align: -0.04em; margin-left: 0.22em; transform-origin: 30% 100%;
  box-shadow: 0 0.02em 0 rgba(22, 23, 27, 0.15), 0 0.12em 0.2em -0.1em rgba(22, 23, 27, 0.5); transition: transform var(--move) var(--ease-out); }
.mini svg { width: 56%; height: 56%; margin: 22% auto 0; color: var(--white); }
.mini--ink { background: var(--ink); }
.mini--red { background: var(--red); }
.work__names a:active .mini { transform: scale(0.92); transition-duration: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .work__names a:hover .mini { transform: translateY(-0.12em) rotate(-8deg); }
  .work__names a:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--move); }
}
.work__note { margin-top: 40px; max-width: 30em; font: 450 var(--t-lead)/1.2 var(--display); letter-spacing: -0.02em; }

.slot { position: relative; height: 260svh; }
.slot:first-of-type { margin-top: 40px; }
/* the takeover: the card's geometry lives on the stage (--t, --l, --r, and --g from 0 in the deck to 1 full screen)
   so the two cards under it can share it. At rest the card sits on a short stack, two grey cards fanned a few
   degrees behind it, so it reads as the top card of a deck. As it grows they fall away and fade. The corner radius
   grows with the card, so its rounded edge is still there, larger, when it crosses the page margins. */
.slot__stage { --t: 18svh; --l: 40vw; --k: 0.4; --r: 22px; --o: 0; --g: 0;
  position: sticky; top: 0; height: 100svh; overflow: hidden; }
.slot__stage::before, .slot__stage::after { content: ''; position: absolute; inset: 0; background: #E3E5E9; border-radius: var(--r);
  clip-path: inset(var(--t) var(--l) round var(--r)); opacity: calc(1 - var(--g) * 1.6); }
.slot__stage::before { transform: translate(calc(-14px - var(--g) * 9vw), calc(6px + var(--g) * 4vh)) rotate(calc(-8deg + var(--g) * -6deg)); }
.slot__stage::after { background: #D3D6DB; transform: translate(calc(12px + var(--g) * 9vw), calc(10px + var(--g) * 4vh)) rotate(calc(5deg + var(--g) * 6deg)); }
.slot__card { position: absolute; inset: 0; z-index: 1; background: var(--c); color: var(--fg);
  clip-path: inset(var(--t) var(--l) round var(--r)); }
.slot--ink { --c: var(--ink); --fg: var(--white); }
.slot--red { --c: var(--red); --fg: var(--ink); }
.slot__idx { position: absolute; display: flex; flex-direction: column; align-items: center; font: 700 var(--t-title)/1 var(--display); letter-spacing: -0.02em; }
.slot__idx svg { width: 0.9em; height: 0.9em; margin-top: 6px; }
.slot__idx--tl { left: 0; top: 0; transform: translate(calc(var(--l) + 20px), calc(var(--t) + 20px)); }
.slot__idx--br { right: 0; bottom: 0; transform: translate(calc(-1 * var(--l) - 20px), calc(-1 * var(--t) - 20px)) rotate(180deg); }
.slot--red .slot__pip, .slot--ink .slot__pip { color: var(--white); }
.slot__pip { position: absolute; left: 50%; top: 50%; width: 30svh; height: 30svh; margin: -15svh 0 0 -15svh; transform: translateY(calc(var(--o) * -14svh)) scale(var(--k)); }
.slot__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--m) + 72px) clamp(56px, 9svh, 96px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 32px)); }
.slot__body h3 { grid-column: 1 / 9; font-size: var(--t-display); }
.slot__body p { grid-column: 9 / 13; align-self: end; max-width: 32ch; }

/* ---------- close: the question in one piece, right above the answer ---------- */
.close { margin-top: 0; min-height: 100svh; background: var(--ink); color: var(--white); display: grid; grid-template-rows: 1fr auto auto auto 1fr; justify-items: center; text-align: center; padding: 32px var(--m) 24px; }
.close__q { grid-row: 2; margin: 0 0 48px; font-family: var(--display); font-size: var(--t-poster); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; }
.close__top, .close__bottom { display: inline-block; }
.close__choice { grid-row: 3; display: flex; align-items: center; }
/* the last action on the page is the biggest card of the three */
.close__choice .button { min-height: 76px; padding: 0 32px 0 12px; gap: 18px; font-size: 21px; --btn-r: 10px; }
.close__choice .button > svg, .close__choice .button__ink > svg { width: 52px; height: 52px; padding: 13px; }
.close__after { grid-row: 4; color: var(--soft-on-ink); margin-top: 20px; max-width: 44ch; }

/* ---------- footer: the number is the headline ---------- */
.foot { background: var(--red); color: var(--ink); min-height: 72svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); font-size: var(--t-note); align-items: start; }
.foot__logo svg { width: auto; height: 28px; }
.foot__logo { grid-column: 1 / 3; }
.foot__top p:nth-of-type(1) { grid-column: 3 / 6; }
.foot__top p:nth-of-type(2) { grid-column: 6 / 9; }
.foot { --line: var(--white); }
.foot__up { grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.foot__up svg { width: 22px; height: 10px; transform: rotate(-90deg); transition: transform var(--press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__up:hover svg { transform: rotate(-90deg) translateX(4px); transition-duration: var(--hover); } }
/* the number is the footer's one big target: hover turns it white and a heavy rule draws under it; press sinks it */
.foot__number { position: relative; align-self: flex-start; margin-top: auto; font: 800 var(--t-poster)/0.95 var(--display); letter-spacing: -0.04em; text-decoration: none; white-space: nowrap;
  transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transition: color var(--hover) var(--ease-out), transform var(--press) var(--ease-out); }
.foot__number::after { content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.04em; height: 0.06em; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--press) var(--ease-out); }
.foot__number:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .foot__number:hover { color: var(--white); }
  .foot__number:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--move); }
}
.foot__meta { margin-top: 32px; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap); font-size: var(--t-note); }
.foot__meta p:nth-child(2) { text-align: center; }
.foot__meta p:nth-child(3) { text-align: right; }

/* ---------- entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rise.is-in { opacity: 1; transform: none; }
  /* the closing question opens like a masked line instead of fading, so it is never a dark empty field */
  .js .close .rise { opacity: 1; }
  .js .close__q.rise { clip-path: inset(0 0 100% 0); transform: translateY(0.3em); transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .close__q.rise.is-in { clip-path: inset(0 0 -0.2em 0); transform: none; }
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-out); }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in img { transform: none; }
  .js .workshop__bottom { opacity: 0; transform: translateY(0.3em); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .workshop__note { opacity: 0; transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .workshop__note--left { transform: translate(-16px, -50%); }
  .js .workshop__note--right { transform: translate(16px, -50%); }
  .js .workshop[data-step="2"] .workshop__bottom, .js .workshop[data-step="3"] .workshop__bottom { opacity: 1; transform: none; }
  .js .workshop[data-step="2"] .workshop__note--left, .js .workshop[data-step="3"] .workshop__note--left,
  .js .workshop[data-step="3"] .workshop__note--right { opacity: 1; transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .workshop { height: auto; }
  .workshop__stage { position: relative; height: auto; min-height: 100svh; padding: 120px 0; }
  .slot { height: auto; }
  .slot__stage { position: relative; height: 100svh; }
  .slot__stage { --t: 0px; --l: 0px; --k: 1; --o: 1; --g: 1; }
  /* reduced motion keeps the colour changes and drops the travel: the ink card fades over the button instead of
     wiping across, the float fades in place, and nothing lifts or fans */
  .button__ink { clip-path: none; opacity: 0; }
  .button:hover .button__ink { clip-path: none; opacity: 1; }
  .button__ink, .float, .line, .foot__number { transition-duration: var(--hover) !important; }
  .float, .float.is-on { transform: none; }
  .hand:hover, .hand:active { --fan: 5deg; --lift: 0em; }
  .duo__card:hover, .duo__card:active, .button:active, .float.is-on:active { transform: none; }
}

/* ---------- tablet and phone: the workshop reads straight down ---------- */
@media (max-width: 1100px) {
  .workshop { height: auto; padding: 96px 0; }
  .workshop__stage { position: relative; height: auto; padding: 0 var(--m); }
  .workshop__frame { width: min(56vw, 440px); }
  .workshop__note { order: 4; position: static; width: auto; max-width: 52ch; transform: none !important; opacity: 1 !important; text-align: left !important; margin-top: 24px; }
  .workshop__note--left { margin-top: 40px; }
  .workshop__bottom { opacity: 1 !important; transform: none !important; }
  .about__facts { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 32px; padding: 0; }
  .about__facts li + li { margin-top: 0; }
  .about__text { grid-column: 1 / 13; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 760px) {
  :root { --t-poster: 11vw; --t-numeral: 40vw; --t-display: 10vw; --t-heading: 30px; --t-name: 16vw; --t-lead: 21px; --t-title: 22px; --t-body: 17px; --t-note: 14px; --gap: 12px; }
  .bar { padding-top: 18px; gap: 12px; }
  .bar__links, .wide { display: none; }
  .bar__logo svg { height: 26px; }
  .bar__action { margin-left: auto; min-height: 44px; padding: 0 14px 0 6px; gap: 10px; font-size: var(--t-note); }
  .bar__action > svg, .bar__action .button__ink > svg { width: 32px; height: 32px; padding: 7px; }
  .hero__title { position: relative; font-size: 7.4vw; margin-top: 40px; padding: 0 16px 24vw; }
  .hand { position: absolute; left: 50%; bottom: 0; margin: 0 0 0 -1.21em; font-size: 22vw; }
  .hand::after { inset: 0; }
  .hero__horizon { font-size: 16px; line-height: 1.4; margin-top: 16px; padding: 0 20px; }
  .duo { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .duo__card { padding: 16px 54px 16px 58px; }
  .duo__go { width: 30px; height: 30px; padding: 9px 6px; right: 14px; bottom: auto; top: 50%; margin-top: -15px; }
  .duo__card h2 { font-size: 20px; margin-bottom: 4px; }
  .duo__card p { font-size: 15px; line-height: 1.38; }
  .duo__idx { left: 18px; top: 18px; gap: 4px; }
  .duo__idx svg { width: 20px; height: 20px; }
  .hero__go { margin-top: auto; padding: 16px var(--m) 20px; gap: 8px; }
  .hero__action { width: 100%; justify-content: center; }
  .hero__free { font-size: 13px; background: rgba(241, 242, 244, 0.9); padding: 2px 8px; }
  /* on a phone the float is a full-width bar, so it steps aside downward, off the bottom edge */
  .float { left: var(--m); right: var(--m); bottom: 14px; justify-content: center; transform: translateY(calc(100% + 24px)); }
  .caption--a { margin-top: 40svh; }
  .caption--b { margin-top: 70svh; }
  .caption__card { width: 100%; }
  .halves { align-items: flex-end; padding-bottom: 24px; }
  .halves__text { width: 100%; background: var(--white); border-radius: var(--card-r); padding: 24px; }
  .rows, .figures { display: block; }
  .rows__head { margin-bottom: 40px; }
  .rows__pair { grid-template-columns: 1fr; row-gap: 72px; }
  .half__pic { margin-bottom: 24px; }
  .half h3 { margin-bottom: 16px; }
  .rows__both { display: block; margin-top: 96px; padding: 64px var(--m) 72px; }
  .rows__label { margin-bottom: 20px; }
  .rows__suits { grid-template-columns: repeat(4, 26px); margin-bottom: 40px; justify-content: start; }
  .rows__way + .rows__way { margin-top: 40px; }
  .figures__head { margin-bottom: 48px; }
  .fig { padding-top: 14px; }
  .fig + .fig, .fig:nth-of-type(n+3) { margin-top: 64px; }
  .fig__n { margin-bottom: 18px; }
  .workshop__top, .workshop__bottom { font-size: var(--t-display); }
  .workshop__frame { width: 72vw; }
  .about { display: block; }
  .about__text { line-height: 1.3; }
  .about__mark { width: 4.6em; height: 4.6em; }
  .about__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-note); margin-top: 32px; order: 2; }
  .about__facts li + li { margin-top: 0; }
  .about { display: flex; flex-direction: column-reverse; }
  .work__names { font-size: var(--t-display); line-height: 1.12; }
  .work__names .mini { display: none; }
  .slot { height: 220svh; }
  .slot__body { display: block; padding: 0 28px 72px; }
  .slot__body h3 { font-size: var(--t-display); margin-bottom: 16px; }
  .close__choice { width: 100%; }
  .close__choice .button { width: 100%; justify-content: center; }
  .foot__top { display: block; }
  .foot__top > * + * { margin-top: 10px; display: block; }
  .foot__number { font-size: var(--t-poster); }
  .foot__meta { display: block; }
  .foot__meta p { text-align: left !important; margin-top: 6px; }
}