/* ════════════════════════════════════════════════════════════════
   INFRAX CENTRAL — site-keystone
   Lapidary minimalism. One figure. One idea per screen.
   Palette (rails): #C9A24A gold · #12100C background · #1B1813 surface
                    #3A4230 deep verdigris — MATERIAL ONLY (logo panel,
                    borders, scrollbar), never a section background: full-page
                    green next to warm stone/gold reads olive drab.
                    #F3F1EA ink (one break) · gold = rare accent only
   ════════════════════════════════════════════════════════════════ */

:root {
  --dorado: #C9A24A;
  --dorado-bright: #E4C57C;
  --dorado-deep: #9C7A35;
  --negro: #12100C;           /* warm bronze-black — harmonizes with the stone */
  --carbon: #1B1813;
  --verdigris: #3A4230;       /* the logo's own world — small-surface material only */
  --marfil: #F3F1EA;
  --muted: #8A8F86;           /* muted text — tertiary, on dark */
  --tinta: #12100C;           /* near-black for text on ivory */
  --ivory-90: rgba(243, 241, 234, .9);
  --ivory-60: rgba(243, 241, 234, .6);
  --ivory-45: rgba(243, 241, 234, .45);
  --gold-line: rgba(201, 162, 74, .28);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;
  /* the second voice: technical captions, indexes, labels — the museum
     label next to the marble. Never for headlines or body copy. */
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--negro);
  color: var(--ivory-90);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--dorado); color: var(--negro); }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--negro); }
::-webkit-scrollbar-thumb { background: var(--verdigris); }
::-webkit-scrollbar-thumb:hover { background: var(--dorado-deep); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; }

/* ─── film grain ─────────────────────────────────────────────── */
.grain {
  position: fixed; inset: -60%;
  width: 220%; height: 220%;
  pointer-events: none; z-index: 300;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ─── the wall: stone texture from the footer render, fixed behind every
   section. Near-invisible on its own — the traveling light (buildWall) is
   what reveals the grain, so the texture reads as material, not wallpaper. */
.wall {
  position: fixed; inset: 0;
  z-index: -1;
  background: url("../assets/img/wall.webp") center / cover no-repeat var(--negro);
}
.wall-light {
  position: absolute; left: 0; top: 0;
  width: 130vmax; height: 130vmax;
  margin: -65vmax 0 0 -65vmax;   /* transform (x,y) = the light's center */
  background: radial-gradient(closest-side,
    rgba(228, 197, 124, .15),
    rgba(228, 197, 124, .05) 42%,
    rgba(228, 197, 124, 0) 72%);
  will-change: transform, opacity;
}
@media (max-width: 900px) { .wall-light { display: none; } }

/* ─── ambient gold dust — two depths on one fixed canvas ──────
   The near layer parallaxes faster and follows the cursor; drawn
   above the content at low alpha so it reads as air, not decoration */
#motes {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 260;
  opacity: .5;
}

/* ─── scroll-progress rail (left edge) ───────────────────────── */
.scroll-rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  z-index: 340;
  background: rgba(243, 241, 234, .06);
}
.scroll-rail-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--dorado-bright), var(--dorado) 60%, var(--dorado-deep));
  box-shadow: 0 0 10px rgba(201, 162, 74, .5);
}
/* on the ivory break the glow smears — pull it in while the stage is light */
body.on-ivory .scroll-rail { background: rgba(18, 16, 12, .08); }
body.on-ivory .scroll-rail-fill { box-shadow: 0 0 4px rgba(201, 162, 74, .2); }

/* ─── loader ─────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--negro);
  display: flex; align-items: center; justify-content: center;
}
.loader-seam {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--dorado) 30%, var(--dorado) 70%, transparent);
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  opacity: .8;
}
.loader-word {
  position: relative;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .55em;
  padding-left: .55em; /* optical centering vs tracking */
  color: var(--ivory-60);
  background: var(--negro);
  padding-top: 1.2em; padding-bottom: 1.2em;
}
.loader-pct {
  position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .3em; padding-left: .3em;
  color: var(--dorado);
}

/* ─── nav ────────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 350;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 2.1rem 4.5vw;
  opacity: 0;
  transition: color .6s var(--ease-out);
}
#nav::before {
  content: '';
  position: absolute; inset: 0 0 -40% 0;
  background: linear-gradient(180deg, rgba(18,16,12,.82), transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
#nav.veiled::before { opacity: 1; }
.nav-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: .22em;
  color: var(--ivory-90);
  transition: color .6s var(--ease-out);
}
.nav-mark em { font-style: normal; color: var(--dorado); }
.nav-links { position: relative; display: flex; gap: 3.2vw; }
.nav-links a {
  font-size: .6rem; font-weight: 400;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--ivory-60);
  padding-bottom: .35em;
  position: relative;
  transition: color .5s var(--ease-out);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--dorado);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
/* hover motion lives behind the capability gate — see micro-interactions block */
/* over the ivory break */
#nav.on-ivory .nav-mark, #nav.on-ivory .nav-links a { color: var(--tinta); }
#nav.on-ivory::before { opacity: 0; }

/* ─── act rail (right edge): hairline frame + current act in vertical mono ── */
.act-rail {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 44px;
  z-index: 340;
  border-left: 1px solid rgba(243, 241, 234, .07);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#act-rail-label {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: .56rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory-45);
  white-space: nowrap;
}
@media (max-width: 900px) { .act-rail { display: none; } }

/* ─── shared bits ────────────────────────────────────────────── */
.sec-label {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--dorado);
}
.sec-label i { width: 38px; height: 1px; background: var(--dorado); opacity: .75; }

.btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--dorado);
  border: 1px solid rgba(201, 162, 74, .5);
  padding: 1.25em 3em 1.15em 3.32em; /* extra left = optical tracking balance */
  transition: background-color .6s var(--ease-out),
              color .6s var(--ease-out),
              border-color .6s var(--ease-out),
              transform .18s var(--ease-out); /* press is fast; release inherits the slow curve */
}
/* press acknowledges on ANY device — hover is gated below */
.btn-ghost:active { transform: scale(.98); }
.cie-cta:active { transform: scale(.97); }

em { font-style: italic; }

/* ─── micro-interactions (hover-capable, fine-pointer devices only:
       touch fires :hover on tap and leaves it stuck) ─────────────── */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ivory-90); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-mark:hover em { color: var(--dorado-bright); }

  .btn-ghost:hover {
    background: var(--marfil);
    border-color: var(--marfil);
    color: var(--negro);
  }

  /* the CTA leans toward the cursor and the arrow steps forward — an
     invitation, not just a color swap */
  .cie-cta:hover {
    transform: scale(1.045);
    box-shadow: 0 0 40px 6px rgba(201, 162, 74, .45);
  }
  .cie-cta:hover .cie-cta-arrow { transform: translateX(6px); }

  /* método station: the frame warms and the ghost numeral leans in */
  .met-card:hover { border-color: rgba(201, 162, 74, .45); }
  .met-card:hover .met-ghost { color: rgba(18, 16, 12, .065); }

  /* service panel: the media lifts off its caption — depth, not decoration */
  .est-media {
    transition: transform .45s var(--ease-out), border-color .45s var(--ease-out);
  }
  .est-panel:hover .est-media {
    transform: translateY(-6px);
    border-color: rgba(201, 162, 74, .45);
  }

  /* evidence stat: the gold rule reaches further on attention */
  .evi-stat:hover.lit::before { transform: scaleX(1.5); }
}

/* keyboard focus is not a hover — always visible */
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--dorado);
  outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════════════
   ACT I · BEATS 0–2 — the core move (sticky stage, canvas scrub)
   ════════════════════════════════════════════════════════════════ */
/* 1050vh: trimmed from 1160vh when the arch-lock's descent (40→27) and closing
   hold (6→2) were shortened — the arch is the build-up now, not a second peak,
   so it gets less scroll. The JS pin end is always derived from this element's
   own offsetHeight (see buildAct1), so it stays exactly in sync with whatever
   this value is — no hand-tuned multiplier to drift out of step. */
#acto { height: 1050vh; position: relative; }
.acto-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.ivory-veil {
  position: absolute; inset: 0;
  background: var(--marfil);
  opacity: 0;
}
/* ── the back plane: one light source above the arch + vignette.
   Breathes slowly (opacity only — compositor-cheap) so the void is
   never dead-flat; GSAP adds a small counter-parallax on the cursor */
.acto-atmo {
  position: absolute; inset: -4%;
  z-index: 0;
  background:
    radial-gradient(52% 44% at 50% 30%, rgba(228, 197, 124, .07), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .42) 100%);
  animation: atmo-breath 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes atmo-breath { from { opacity: .7; } to { opacity: 1; } }

/* ── the floor: contact shadow + warm pool that seat the arch in space.
   Faded in by buildAct1 as the stones assemble into something with weight */
.acto-floor {
  position: absolute; left: 50%; bottom: 4vh;
  z-index: 0;
  width: 78vw; height: 28vh;
  transform: translateX(-50%);
  background:
    radial-gradient(34% 28% at 50% 60%, rgba(8, 6, 4, .55), transparent 72%),
    radial-gradient(58% 46% at 50% 55%, rgba(228, 197, 124, .085), transparent 72%);
  opacity: 0;
  pointer-events: none;
}

.keystone-float {
  position: absolute; inset: 0;
  z-index: 2; /* the stones are the middle plane: copy exits BEHIND them */
  will-change: transform;
  pointer-events: none; /* the CTA lives below this plane now (.b0 at z 1) */
}

/* ── foreground plane: two out-of-focus stones (crops of frame 0) at the
   frame's edges. They drift faster than the scene (buildAct1) and follow
   the cursor hardest — the nearest thing to the glass */
.fg-stone {
  position: absolute;
  z-index: 4;
  filter: blur(15px) brightness(.5) saturate(.85);
  opacity: .85;
  pointer-events: none;
  will-change: transform, opacity;
}
.fg-a { left: -6vw; bottom: -9vh; width: clamp(260px, 30vw, 480px); }
.fg-b { right: -7vw; top: -10vh; width: clamp(240px, 26vw, 430px); }
@media (max-width: 900px) { .fg-stone { display: none; } }
#keystone-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* soft floor of darkness so copy breathes against the stones */
.acto-shade {
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(80% 62% at 50% 84%, rgba(18, 16, 12,.74), transparent 68%);
  pointer-events: none;
}

/* Beat 0 — entrance: the words rest in the void beneath the stones.
   z 1 < .keystone-float's 2: the copy lives BEHIND the stone plane, so on
   its exit rise it passes physically behind the drifting stones — the one
   crossing that sells the depth. At rest nothing overlaps the words. */
.b0 {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 0 6vw 12vh;
}
.b0-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.8vw, 5.9rem);
  letter-spacing: .03em;
  line-height: 1.14;
  color: var(--marfil);
}
.b0-line { display: block; }
/* per-word wrappers — words fly in from scatter and lock, like the stones */
.b0 .w {
  display: inline-block;
  vertical-align: top;
}
.b0 .w i {
  display: inline-block;
  font-style: normal;
  will-change: transform, filter;
}
.b0-sub {
  margin-top: 3.2vh;
  font-size: clamp(.72rem, .95vw, .88rem);
  letter-spacing: .08em;
  line-height: 2;
  color: var(--ivory-60);
  max-width: 36em;
}
.b0-cta { margin-top: 5.5vh; }

/* Beat 1 — the five fronts, adrift; disorder is allowed here only.
   Each label rides a stone: display-size, fully legible — this beat IS the pitch. */
.b1 { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.b1-front {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(.385rem, .735vw, .7rem);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ivory-90);
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}
.b1-front[data-drift="1"] { left: 11vw;  top: 26vh; }
.b1-front[data-drift="2"] { right: 13vw; top: 21vh; }
.b1-front[data-drift="3"] { right: 8vw;  top: 56vh; }
.b1-front[data-drift="4"] { left: 8vw;   top: 60vh; }
.b1-front[data-drift="5"] { right: 24vw; top: 78vh; }
.b1-front[data-drift="6"] { left: 32vw;  top: 40vh; }

.b1-copy {
  position: absolute; inset: 0;
  z-index: 3; /* in front on entry, readable over the still-scattered stones; JS drops it to 1 as it fades so it recedes behind the arch, into the dark */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 10vw;
  transform: translateY(6vh);
  pointer-events: none;
}
.b1-l1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.4;
  color: var(--marfil);
  opacity: 0;
  max-width: 22ch;
}
.b1-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: .06em;
}

/* the payoff line — lives OUTSIDE .b1-copy's stacking context (its parent's
   transform traps children below the stones no matter what z-index they're
   given) so it can sit z-index 3, clear in front of the arch, low in the
   frame where the shade-floor gives it a dark, calm backdrop to glow against */
.b1-l2 {
  position: absolute;
  left: 50%; bottom: 13vh;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  color: #FBFAF4;
  text-shadow: 0 0 30px rgba(228, 197, 124, .55), 0 0 70px rgba(201, 162, 74, .3);
  opacity: 0;
  pointer-events: none;
}

/* Beat 2 — the lock. The one light moment of the site.
   The sentence splits around the arch: the architecture holds it. */
.b2 {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.b2-idx {
  position: absolute; left: 8vw; top: 27vh;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--dorado);
  opacity: 0;
}
.b2-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 5rem);
  letter-spacing: .05em;
  line-height: 1.12;
  /* the lock plays on the dark stone stage (the ivory break is the portal,
     not here) — so the headline is ivory to read against the dark */
  color: var(--marfil);
}
.b2-a {
  position: absolute; left: 8vw; top: 33vh;
  text-align: left;
  opacity: 0;
}
.b2-b {
  position: absolute; right: 4vw; bottom: 34vh;
  text-align: right;
  opacity: 0;
}
/* a very subtle grounding shadow beneath "DE CONTROL." — sits behind the
   arch (z-index 1 < .keystone-float's 2), so it reads as atmosphere the
   stones sit in front of, not a shape drawn over them */
.b2-shade {
  position: absolute; right: 0; bottom: 20vh;
  z-index: 1;
  width: 30vw; height: 20vh;
  background: radial-gradient(60% 60% at 65% 40%, rgba(0, 0, 0, .5), transparent 72%);
  opacity: 0;
  pointer-events: none;
}
/* the flipped echo of "DE CONTROL." on the stage floor — one use only */
.b2-refl {
  position: absolute; top: 100%; right: 0;
  margin-top: .04em;
  font-style: normal;
  white-space: nowrap;
  transform: scaleY(-1);
  opacity: .13;
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.6), transparent 62%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.6), transparent 62%);
  pointer-events: none;
}

.b2-sub {
  position: absolute; right: 4vw; bottom: 27vh;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--marfil);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  opacity: 0;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 4vh;
  transform: translateX(-50%);
}
.scroll-cue i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(243,241,234,.55));
  animation: cue 2.6s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  75%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   BEAT 3 — IT HOLDS. Weight descends; the arch does not flinch.
   ════════════════════════════════════════════════════════════════ */
#sostiene {
  height: auto;
  position: relative;
  z-index: 2;
  /* no negative margin: let the arch's pin release naturally so the tray
     scene only rises into view once the camera has fully passed beneath
     the keystone, instead of covering the tail end of that pass */
}
/* the clarity beat lives in its own 300vh block so its timing is unchanged when
   the tray beat is appended below it */
.sos-block { height: 300vh; position: relative; }
.sos-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  /* the clean space we pass through the arch into — the site's one ivory break.
     No dark shadow: it continues the ivory revealed by the portal, seam-free */
  background: var(--marfil);
}
.sos-slab {
  position: absolute; top: 0; left: 0; right: 0;
  height: 34vh;
  display: flex; align-items: flex-end;
  padding: 0 9vw 4.5vh;
  background: linear-gradient(180deg, #26221A 0%, #171410 100%);
  border-bottom: 1px solid rgba(243, 241, 234, .05);
  transform: translateY(-108%);
  will-change: transform;
}
.sos-arch {
  position: absolute; left: 63%; bottom: 22vh;
  transform: translateX(-50%);
  height: 42vh; width: auto;
  /* pale stone on ivory — a soft shadow keeps it reading as a delicate ghost */
  filter: drop-shadow(0 26px 50px rgba(18, 16, 12,.20));
}
.sos-copy {
  position: absolute; left: 9vw; top: 54%;
}
.sos-h {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  line-height: 1;
  color: var(--marfil);
}
.sos-rule {
  width: 62px; height: 1px;
  background: var(--dorado);
  margin: 0 0 3.4vh;
  transform: scaleX(0); transform-origin: left;
}
.sos-sub {
  font-size: clamp(.78rem, .95vw, .92rem);
  letter-spacing: .1em;
  color: rgba(18, 16, 12,.55);   /* tinta, muted — readable on the ivory surface */
  opacity: 0;
}

/* ════════════════════════════════════════════════════════════════
   BEAT 3.5 — THE TRAY. Darkness returns; golden filaments converge into a
   brushed brass tray, the content is served on it, the camera pushes through.
   ════════════════════════════════════════════════════════════════ */
/* 582vh: grown from 560vh to give "everything served" (the page's actual peak)
   more scroll to hold on, now that the arch-lock beat before it was trimmed. */
.tray-scene { height: 628vh; position: relative; z-index: 3; }
.tray-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  /* the dark space the filaments flow through — a faint warm pool where the tray forms */
  background: radial-gradient(120% 92% at 50% 60%, rgba(30, 26, 18, .92) 0%, rgba(18, 16, 12, 0) 62%);
}
.tray-float { position: absolute; inset: 0; z-index: 1; will-change: transform; }
#tray-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tray-lines path { will-change: stroke-dashoffset; }
.tray-img { will-change: opacity, transform; }
.tray-motes circle { transform-box: fill-box; transform-origin: center; }
@keyframes mote { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.tray-title {
  position: absolute; left: 0; right: 0; top: 14vh;
  text-align: center; z-index: 3; opacity: 0;
}
.tray-title p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.7rem); letter-spacing: .02em;
  color: var(--marfil);
}
.tray-title em { font-style: italic; color: var(--dorado); }

/* the folded clarity copy — spoken over the dark as the filaments converge */
.tray-lead {
  position: absolute; left: 0; right: 0; top: 20vh;
  text-align: center; z-index: 3; pointer-events: none;
}
/* soft dark pool behind the words so the bright filaments never fight the type for contrast */
.tray-lead::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: min(64vw, 760px); height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(10,9,6,.62) 0%, rgba(10,9,6,.32) 46%, rgba(10,9,6,0) 74%);
  z-index: -1;
}
.tray-l1 {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1;
  color: var(--marfil); opacity: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 10px 34px rgba(0,0,0,.9), 0 0 48px rgba(8,7,5,.9);
}
.tray-l1 em { font-style: italic; }
.tray-l2 {
  margin-top: 2.4vh;
  font-size: clamp(.82rem, 1.05vw, 1rem); letter-spacing: .16em;
  color: rgba(243, 241, 234, .82); opacity: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 6px 22px rgba(0,0,0,.85);
}

.tray-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tcard {
  position: absolute;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.05rem 1.35rem; min-width: 11.5rem;
  background: rgba(26, 23, 18, .5);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(201, 162, 74, .3);
  border-radius: 3px;
  /* shadow tinted with the room's own dark + a hairline top-light: one light source */
  box-shadow: 0 26px 60px rgba(8, 7, 4, .6), inset 0 1px 0 rgba(243, 241, 234, .06);
  opacity: 0; will-change: transform, opacity;
}
.tc-k {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243, 241, 234, .58);
}
.tc-v {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.85rem; line-height: 1; color: var(--dorado);
}
.tc-v small { font-size: .78rem; margin-left: .22em; color: rgba(243, 241, 234, .58); }
/* the cards seat around the floating tray */
.tcard[data-i="0"] { left: 11vw;  top: 29vh; }
.tcard[data-i="1"] { right: 11vw; top: 33vh; }
.tcard[data-i="2"] { left: 15vw;  bottom: 25vh; }
.tcard[data-i="3"] { right: 14vw; bottom: 21vh; }

/* the veil that closes the push-in to black — the seamless hand-off into the next section */
.tray-veil {
  position: absolute; inset: 0; z-index: 4;
  background: var(--negro); opacity: 0; pointer-events: none;
}
@media (max-width: 900px) {
  .tray-scene { height: 540vh; }
  .tcard { min-width: 8.4rem; padding: .8rem 1rem; }
  .tc-v { font-size: 1.45rem; }
  .tcard[data-i="0"] { left: 5vw;  top: 22vh; }
  .tcard[data-i="1"] { right: 5vw; top: 27vh; }
  .tcard[data-i="2"] { left: 6vw;  bottom: 24vh; }
  .tcard[data-i="3"] { right: 6vw; bottom: 19vh; }
  .tray-title { top: 11vh; }
}

/* ════════════════════════════════════════════════════════════════
   BEAT 4 — THE METHOD. Horizontal scrub; the piece is measured,
   cut, and seated across five stations.
   ════════════════════════════════════════════════════════════════ */
/* ── the stack: ivory cards rise and cover the one before (which stays
   pinned beneath) — each phase gets the full stage, and the light lives
   INSET on the dark page instead of as a full-bleed break. The finale is
   a dark card: the keystone seats, and the page is already night again. */
#metodo { position: relative; padding: 18vh 0 0; }
#metodo > .sec-label { margin: 0 0 9vh 8vw; }
.met-stack { padding: 0 4vw 10vh; }
.met-card {
  position: sticky; top: 6vh;
  min-height: 69vh;
  max-width: 74vw;
  margin: 0 auto 7vh;
  display: flex; flex-direction: column;
  padding: 5.6vh 4.8vw 4.4vh;
  background: var(--marfil);
  color: var(--tinta);
  border: 1px solid rgba(18, 16, 12, .08);
  border-radius: 16px;
  overflow: hidden;   /* clips the ghost numeral to the card */
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .35);
  will-change: transform, opacity, filter;
}
.met-ghost {
  position: absolute; top: 50%; right: -4%;
  transform: translateY(-54%);
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(11.2rem, 24vw, 24rem);
  line-height: 1;
  color: rgba(18, 16, 12, .045);
  pointer-events: none;
  user-select: none;
  transition: color .9s var(--ease-out);
}
.met-card.lit .met-ghost { color: rgba(18, 16, 12, .07); }
.met-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .22em;
  color: rgba(18, 16, 12, .5);
}
.met-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.met-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.08rem, 4.8vw, 4.32rem);
  letter-spacing: .01em;
  color: var(--tinta);
  margin-bottom: 3vh;
}
.met-card p {
  font-size: clamp(.82rem, 1vw, .98rem);
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(18, 16, 12, .6);
  max-width: 36ch;
}
.met-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 3.2vh;
  border-top: 1px solid rgba(18, 16, 12, .12);
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .24em;
  color: rgba(18, 16, 12, .42);
}
/* the finale: night returns INSIDE the stack — the keystone seats on dark */
.met-card-dark {
  background: linear-gradient(185deg, #1A1712 0%, #13110D 100%);
  border-color: rgba(201, 162, 74, .25);
  color: var(--marfil);
  align-items: center; justify-content: center;
  text-align: center;
}
.met-card-dark .met-head, .met-card-dark .met-foot {
  align-self: stretch;
  color: rgba(243, 241, 234, .42);
  border-color: rgba(243, 241, 234, .1);
}
.met-key { margin: 0 auto; }
.met-key svg { width: 120px; height: 150px; overflow: visible; }
.met-key-shape {
  fill: rgba(201, 162, 74, 0);
  stroke: var(--dorado); stroke-width: 1;
  stroke-dasharray: 480; stroke-dashoffset: 480;
  transition: fill 1.4s var(--ease-out), stroke-dashoffset 2.2s var(--ease-out);
}
.met-key.seated .met-key-shape {
  stroke-dashoffset: 0;
  fill: rgba(201, 162, 74, .92);
  filter: drop-shadow(0 0 26px rgba(201, 162, 74, .35));
}
.met-key-dim {
  stroke: rgba(201, 162, 74, .35); stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0;
}
.met-caption {
  margin-top: 4.5vh;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .3em;
  color: var(--dorado);
}

/* ════════════════════════════════════════════════════════════════
   BEAT 5 — ACCESS + INDEPENDENCE. A seam of gold light opens.
   ════════════════════════════════════════════════════════════════ */
#acceso { height: 170vh; position: relative; }
.acc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.acc-beyond {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 50%, rgba(201, 162, 74, .22), rgba(201, 162, 74, .06) 42%, transparent 68%),
    linear-gradient(90deg, transparent 24%, rgba(201, 162, 74, .07) 50%, transparent 76%),
    var(--negro);
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
  filter: blur(46px);
  will-change: clip-path, opacity, filter;
}
.acc-seam {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 72vh;
  transform: translate(-50%, -50%) scaleY(0);
  background: linear-gradient(180deg, transparent, var(--dorado-bright) 24%, var(--dorado) 76%, transparent);
  box-shadow: 0 0 28px 2px rgba(201, 162, 74, .4);
  opacity: 0;
  will-change: transform, opacity;
}
.acc-copy { position: relative; text-align: center; padding: 0 8vw; }
.acc-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--marfil);
  opacity: 0;
}
.acc-sub {
  margin-top: 3.6vh;
  font-size: clamp(.75rem, .95vw, .9rem);
  letter-spacing: .12em;
  line-height: 2;
  color: var(--ivory-60);
  opacity: 0;
}

/* ════════════════════════════════════════════════════════════════
   BEAT 6 — THE FULL STRUCTURE. Five verticals in formation.
   Image slots wait for the client's marble-gold visuals.
   ════════════════════════════════════════════════════════════════ */
#estructura {
  position: relative;
  padding: 24vh 7vw 20vh;
}
.est-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 4.5rem);
  line-height: 1.28;
  color: var(--marfil);
  margin-top: 5vh;
  max-width: 12em;
}
.est-h em { color: var(--dorado); }

/* default (fallback) layout — plain grid, used until JS confirms motion
   is enabled and switches #estructura into coverflow mode below */
.est-carousel { position: relative; }
.est-stage { position: static; height: auto; }
.est-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.6vw, 44px);
  margin-top: 13vh;
}
.est-panel { position: relative; will-change: transform; }
.est-panel:nth-child(even) { margin-top: 52px; }

/* ─── coverflow mode: a shallow arc of cards, scroll rotates the ring ─── */
#estructura.coverflow .est-carousel { height: 340vh; }
#estructura.coverflow .est-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  perspective: 1800px;
}
#estructura.coverflow .est-grid {
  display: block;
  position: relative;
  width: 100%; height: 58vh;
  margin-top: 0;
  transform-style: preserve-3d;
}
#estructura.coverflow .est-panel {
  position: absolute; top: 50%; left: 50%;
  width: clamp(230px, 18vw, 300px);
  margin-top: 0 !important;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.est-media {
  position: relative;
  aspect-ratio: 3 / 4.3;
  border: 1px solid rgba(201, 162, 74, .22);
  background:
    radial-gradient(140% 90% at 50% -20%, rgba(243, 241, 234, .045), transparent 60%),
    #17140F;
  overflow: hidden;
}
/* empty-slot watermark: a faint keystone awaiting its stone */
.est-media::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 52px;
  transform: translate(-50%, -50%);
  background: rgba(201, 162, 74, .1);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.est-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.est-media.filled::after { display: none; }
.est-panel figcaption { margin-top: 2rem; }
.est-panel h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  letter-spacing: .04em;
  color: var(--ivory-90);
}

/* ════════════════════════════════════════════════════════════════
   BEAT 7 — EVIDENCE. Numbers inside the structure's shadow.
   Placeholder figures — swap when client data arrives.
   ════════════════════════════════════════════════════════════════ */
#evidencia {
  position: relative;
  padding: 26vh 9vw 22vh;
  overflow: hidden;
}
/* the panel tint lives on a pseudo so it can FADE OUT at the section's foot —
   a hard edge against the live wall read as a seam once the wall had texture */
#evidencia::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, rgba(27, 24, 19, .85) 0%, rgba(18, 16, 12, 0) 58%),
    radial-gradient(60% 40% at 18% 112%, rgba(201, 162, 74, .07), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}
.evi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4vw;
  margin-top: 14vh;
}
.evi-stat::before {
  content: '';
  display: block;
  width: 34px; height: 1px;
  background: rgba(201, 162, 74, .65);
  margin-bottom: 3.2vh;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) .1s;
}
.evi-stat.lit::before { transform: scaleX(1); }
.evi-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  letter-spacing: .02em;
  color: var(--marfil);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.evi-n small {
  font-size: .4em;
  font-weight: 400;
  color: var(--ivory-60);
  margin-left: .12em;
}
.evi-l {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.9;
  color: var(--ivory-45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s var(--ease-out) .3s, transform .9s var(--ease-out) .3s;
}
.evi-stat.lit .evi-l { opacity: 1; transform: none; }
.evi-quiet {
  margin-top: 15vh;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   BEAT 8 — THE SIGNATURE. Everything recedes; the mark settles.
   ════════════════════════════════════════════════════════════════ */
/* the gold thread: crosses the seam UP into #evidencia — the one deliberate
   overlap between sections, pulling the eye from the evidence into the ask */
#contacto::before {
  content: '';
  position: absolute; left: 50%; top: -11vh;
  width: 1px; height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(201, 162, 74, .5) 55%, rgba(201, 162, 74, .12));
  pointer-events: none;
}
/* full-viewport: the stone desk rises into frame, "IC" seated where the
   whole site was headed — the CTA and quick-links float just above its edge */
#contacto {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 5vh 8vw 0;
  /* NO overflow:hidden — the desk image is taller than the viewport and its
     feathered top must bleed up into #evidencia; clipping it at the section
     edge printed a hard seam across the lit wall */
}
.cie-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cie-desk {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(1700px, 132vw);
  max-width: none;
  opacity: 0;
}
/* the photo is already near-black — these just guarantee a seamless
   melt into the page at the edges, no visible frame */
.cie-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 80%, rgba(18, 16, 12, .8) 100%);
}
.cie-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.cie-rule {
  width: 1px; height: 48px;
  margin: 0 0 3.5vh;
  background: linear-gradient(180deg, transparent, var(--dorado), transparent);
  transform: scaleY(0);
}
.cie-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  line-height: 1.3;
  color: var(--marfil);
  opacity: 0;
  /* the stone slab behind is busy — a soft dark lift keeps the line
     readable wherever it lands, without boxing it in */
  text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 10px 34px rgba(0, 0, 0, .8);
}
.cie-h em { color: var(--dorado); }

/* the primary ask of the page — a slow idle breathe plus a firmer
   hover/press response, so it reads as the one thing worth clicking.
   A translucent chip (same device as the quick-links below) keeps it
   legible no matter what part of the stone lands behind it. */
.cie-contact {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 4.5vh; opacity: 0;
  width: min(420px, 86vw);
}
.cie-form { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cie-form-row { display: flex; gap: .7em; width: 100%; }
.cie-input {
  width: 100%;
  padding: 1em 1.2em;
  margin-bottom: .7em;
  background: rgba(18, 16, 12, .4);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 74, .32);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .02em;
  color: var(--marfil);
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
.cie-input::placeholder { color: var(--ivory-60); opacity: .7; }
.cie-input:focus {
  outline: none;
  border-color: var(--dorado);
  background: rgba(18, 16, 12, .6);
}
.cie-textarea { resize: vertical; min-height: 3.2em; font-family: var(--font-body, var(--font-mono)); }

.cie-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: .75em;
  margin-top: .3em;
  background: rgba(18, 16, 12, .4);
  backdrop-filter: blur(6px);
  animation: cie-cta-breathe 3.6s ease-in-out infinite;
  cursor: pointer;
}
.cie-cta:disabled { opacity: .5; cursor: default; animation: none; }
.cie-cta-arrow {
  display: inline-block;
  transition: transform .45s var(--ease-out);
}
@keyframes cie-cta-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
  50%      { box-shadow: 0 0 26px 3px rgba(201, 162, 74, .22); }
}
.cie-form-status {
  margin-top: 1em;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .04em;
  color: var(--ivory-60);
  min-height: 1.2em;
}
.cie-form-status.is-error { color: #c96a4a; }
.cie-form-status.is-ok { color: var(--dorado); }

.cie-alt {
  margin-top: 2.4vh;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .04em;
  color: var(--ivory-60);
}
.cie-alt a { color: var(--ivory-90); border-bottom: 1px solid rgba(201, 162, 74, .35); }
.cie-alt a:hover { color: var(--dorado); border-color: var(--dorado); }
.cie-alt-sep { margin: 0 .6em; color: rgba(243, 241, 234, .3); }

/* quick-links — the pill row floating just above the desk's front edge */
.cie-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem;
  margin-top: 5vh; padding-bottom: 4vh;
  opacity: 0;
}
.cie-link {
  display: flex; align-items: center; gap: .65em;
  padding: 1.05em 1.7em;
  border: 1px solid rgba(201, 162, 74, .32);
  border-radius: 999px;
  background: rgba(18, 16, 12, .4);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ivory-60);
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out),
              background-color .4s var(--ease-out);
}
.cie-link svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.cie-link-active {
  background: var(--dorado);
  border-color: var(--dorado);
  color: var(--negro);
}
@media (hover: hover) and (pointer: fine) {
  .cie-link:not(.cie-link-active):hover {
    border-color: var(--dorado);
    color: var(--marfil);
  }
}

/* ─── footer — docked to the bottom of #contacto's own viewport (margin-top:
   auto on a flex column) so it rides the same locked image, not a separate
   section that stretches the scroll past it ──────────────────────────── */
#footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 2.5rem;
  width: 100%;
  margin-top: auto;
  padding: 3.5vh 7vw;
  border-top: 1px solid rgba(243, 241, 234, .08);
  background: linear-gradient(180deg, transparent, rgba(18, 16, 12, .55) 40%);
}
.foot-logo { height: 30px; width: auto; opacity: .9; }
.foot-tag {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.foot-legal {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .2em;
  color: rgba(243, 241, 234, .3);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .b1-front { font-size: clamp(.3325rem, 1.19vw, .455rem); }
  .b1-front[data-drift="5"] { right: 12vw; top: 74vh; }
  .b1-copy { padding: 0 8vw; }

  .b2 {
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    padding: 0 7vw 12vh;
    text-align: center;
  }
  .b2-idx, .b2-a, .b2-b, .b2-sub { position: static; text-align: center; }
  .b2-idx { margin-bottom: 2.4vh; }
  .b2-b { margin-top: .3em; }
  .b2-sub { margin-top: 2.8vh; }

  .sos-arch { left: 50%; height: 30vh; bottom: 16vh; }
  .sos-copy { top: auto; bottom: 4.5vh; transform: none; }
  .sos-rule { margin-bottom: 2vh; }
  .sos-slab { height: 26vh; padding: 0 7vw 3vh; }

  .met-card { min-height: 62vh; max-width: 100%; padding: 4vh 5.6vw 3.2vh; border-radius: 12px; }
  .met-ghost { font-size: 42vw; }

  .est-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .est-panel:nth-child(even) { margin-top: 30px; }
  .est-panel:nth-child(5) { grid-column: 1 / -1; }
  .est-panel:nth-child(5) .est-media { aspect-ratio: 16 / 9.5; }

  .evi-grid { grid-template-columns: repeat(2, 1fr); gap: 9vw 8vw; }

  #footer { flex-wrap: wrap; gap: 1.4rem; }
  .foot-tag { flex-basis: 100%; text-align: left; order: 3; }
}

@media (max-width: 560px) {
  #nav { padding: 1.6rem 6vw; }
  #contacto { min-height: auto; padding: 12vh 6vw 46vh; }
  .cie-desk { width: 145vw; }
  .cie-rule { margin: 3.5vh 0; }
  .cie-contact { margin-top: 5.5vh; }
  .cie-links { margin-top: 6vh; padding-bottom: 2vh; gap: .6rem; }
  .cie-link { padding: .9em 1.3em; font-size: .56rem; }
  .nav-links a:not(:last-child) { display: none; }
  .b0-h { letter-spacing: .06em; }
  .b0-sub { max-width: 28em; }
  .b1-front { letter-spacing: .4em; font-size: .195rem; }
  .evi-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — static, stacked, everything legible
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .scroll-cue i { animation: none; opacity: .4; transform: scaleY(1); }
  .scroll-rail { display: none; }
  .keystone-float { transform: none !important; }

  #acto, #sostiene, #metodo, #acceso { height: auto; }
  .acto-stage, .sos-stage, .acc-stage {
    position: static; height: auto; overflow: visible;
  }

  #keystone-canvas, .ivory-veil, .b1, .scroll-cue,
  .met-line, .acc-seam, .acc-beyond,
  #motes, .fg-stone, .acto-atmo, .acto-floor, .met-dawn, .wall-light { display: none; }

  #sostiene { margin-top: 0; }
  .sos-stage { box-shadow: none; }
  .sos-slab {
    position: static; height: auto;
    display: block;
    background: none; border: 0;
    padding: 16vh 8vw 0;
    transform: none !important;
  }
  .b2-idx, .b2-a, .b2-b { position: static; display: block; text-align: left; opacity: 1; }
  .b2-sub { position: static; margin-top: 2vh; text-align: left; }
  .evi-stat::before { transform: none; transition: none; }
  .evi-l { opacity: 1; transform: none; transition: none; }

  .b0, .b1-copy, .b2, .sos-copy, .acc-copy {
    position: static; padding: 16vh 8vw; text-align: left;
    display: block; transform: none;
  }
  .b0 { padding-top: 26vh; }
  .b0-h, .b1-l1, .b1-l2, .b2-h, .b2-sub, .sos-h, .sos-sub,
  .acc-h, .acc-sub, .cie-h, .cie-contact, .cie-desk, .cie-links { opacity: 1; }
  .cie-cta { animation: none; }
  .b2-h { color: var(--marfil); }
  .b2-sub { color: var(--marfil); }
  .sos-rule, .cie-rule { transform: none; }
  .sos-arch { position: static; transform: none; height: auto; max-height: 46vh; margin: 0 auto; }

  .met-card { position: static; min-height: auto; }
  .act-rail { display: none; }
  .met-key-shape { stroke-dashoffset: 0; fill: rgba(201, 162, 74, .92); }

  #nav { opacity: 1; }
}