/* ============================================================
   LA LAGARTERA DESPIERTA — videomapping showcase
   AlterLab × Eskua · Proshow Monterrey
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:        #0b0908;
  --bg-2:      #100b09;
  --surface:   #19120e;
  --surface-2: #221811;
  --line:      rgba(245,237,226,.12);
  --line-2:    rgba(245,237,226,.06);

  --clay:   #c66b35;   /* terracota */
  --clay-2: #e2954f;   /* ámbar */
  --ember:  #ff7a3c;   /* acento cálido */
  --teal:   #34d6b4;   /* generativo / agua */
  --teal-2: #18a98e;
  --magenta:#ff4f8b;   /* neón secundario */

  --cream:  #f5ede2;
  --muted:  #b9a895;
  --muted-2:#8a7b6c;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 80px);
  --r: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }
canvas{ display:block }
::selection{ background:var(--ember); color:#1b0d05 }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.02; letter-spacing:-.02em }
.display{
  font-size:clamp(3rem, 11vw, 10.5rem);
  font-weight:600;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
  line-height:.92;
}
.h2{ font-size:clamp(2.1rem, 5.4vw, 4.6rem); font-variation-settings:"opsz" 80 }
.h3{ font-size:clamp(1.4rem, 2.5vw, 2.1rem) }
.lead{ font-size:clamp(1.1rem,1.7vw,1.45rem); color:var(--muted); line-height:1.6; font-weight:300 }
em,.it{ font-style:italic }
.serif-it{ font-family:var(--font-display); font-style:italic; font-weight:400 }

.eyebrow{
  font-family:var(--font-sans);
  font-size:.78rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--teal);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--teal); opacity:.7 }
.eyebrow.is-clay{ color:var(--clay-2) } .eyebrow.is-clay::before{ background:var(--clay-2) }

.grad-text{
  background:linear-gradient(100deg,var(--clay-2),var(--ember) 55%,var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.section{ position:relative; padding-block:clamp(80px,12vh,170px) }
.section--tight{ padding-block:clamp(60px,8vh,110px) }
.sec-head{ max-width:60ch; margin-bottom:clamp(40px,6vw,80px) }
.sec-head .h2{ margin-top:.35em }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent) }

/* ---------- Grain + ambient ---------- */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; mix-blend-mode:overlay;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,3%)} 80%{transform:translate(6%,2%)} 100%{transform:translate(0,0)} }

/* ============================================================
   Preloader
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease),visibility .8s;
}
#preloader.done{ opacity:0; visibility:hidden }
.pl__inner{ text-align:center; width:min(80vw,460px) }
.pl__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.02em }
.pl__title span{ display:inline-block; opacity:.25; animation:plpulse 1.4s var(--ease) infinite }
.pl__title span:nth-child(odd){ animation-delay:.12s }
@keyframes plpulse{ 0%,100%{opacity:.22; transform:translateY(0)} 50%{opacity:1; transform:translateY(-4px)} }
.pl__bar{ margin-top:22px; height:2px; background:var(--line); border-radius:2px; overflow:hidden }
.pl__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--clay),var(--ember)); transition:width .3s linear }
.pl__sub{ margin-top:14px; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2) }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(11,9,8,.72); backdrop-filter:blur(14px); padding-block:12px; border-color:var(--line-2) }
.nav__logo{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:.01em; display:flex; align-items:center; gap:.55em }
.nav__logo i{ width:9px; height:9px; border-radius:50%; background:var(--ember); box-shadow:0 0 14px var(--ember); animation:floaty 3s ease-in-out infinite }
.nav__links{ display:flex; gap:30px; font-size:.82rem; letter-spacing:.06em }
.nav__links a{ color:var(--muted); transition:color .25s; position:relative }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--clay-2); transition:width .3s var(--ease) }
.nav__links a:hover{ color:var(--cream) } .nav__links a:hover::after{ width:100% }
.nav__cta{
  font-size:.8rem; letter-spacing:.05em; padding:9px 18px; border-radius:100px;
  border:1px solid var(--line); color:var(--cream); transition:.3s var(--ease);
}
.nav__cta:hover{ background:var(--cream); color:#1b0d05; border-color:var(--cream) }
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:201; background:linear-gradient(90deg,var(--clay),var(--ember),var(--magenta)) }
.nav__burger{ display:none }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; z-index:2 }
.hero__bg{ position:absolute; inset:-8% -2% -2% -2%; z-index:-2; will-change:transform }
.hero__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03) }
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 75% 10%, rgba(11,9,8,0) 0%, rgba(11,9,8,.4) 55%, var(--bg) 100%),
    linear-gradient(180deg, rgba(11,9,8,.55) 0%, rgba(11,9,8,.12) 32%, rgba(11,9,8,.55) 72%, var(--bg) 100%);
}
.hero__content{ padding-bottom:clamp(48px,9vh,120px); position:relative; width:100% }
.hero__content .eyebrow{ margin-bottom:22px }
.hero__title{ margin:0 0 .25em -.04em }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em }
.hero__title .ln > span{ display:block; will-change:transform }
.hero__meta{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; margin-top:30px; color:var(--muted); font-size:.9rem; letter-spacing:.04em }
.hero__meta b{ color:var(--cream); font-weight:500 }
.hero__meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--clay-2) }
.hero__cue{ position:absolute; right:var(--gut); bottom:clamp(48px,9vh,120px); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-2) }
.hero__cue i{ width:1px; height:54px; background:linear-gradient(var(--clay-2),transparent); animation:cue 2s var(--ease) infinite }
@keyframes cue{ 0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---------- Marquee ---------- */
.marquee{ position:relative; z-index:2; border-block:1px solid var(--line); background:var(--bg-2); padding-block:18px; overflow:hidden; white-space:nowrap }
.marquee__track{ display:inline-flex; gap:0; animation:marquee 28s linear infinite }
.marquee span{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.6vw,2.2rem); padding-inline:28px; color:var(--muted) }
.marquee span b{ color:var(--clay-2); font-style:normal; font-weight:600 }
.marquee .star{ color:var(--teal); font-style:normal }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ============================================================
   Concept
   ============================================================ */
#concepto{ z-index:2 }
.concept{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center }
.concept__body p + p{ margin-top:1.1em }
.concept__big{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.32; color:var(--cream); font-weight:400 }
.concept__big b{ color:var(--clay-2); font-weight:600 }
.concept__fig{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5 }
.concept__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.2s var(--ease) }
.concept__fig:hover img{ transform:scale(1) }
.concept__fig figcaption{ position:absolute; left:16px; bottom:14px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); background:rgba(11,9,8,.5); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px }

/* ============================================================
   Reto / stats
   ============================================================ */
#reto{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); border-block:1px solid var(--line-2); z-index:2 }
.reto__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:end }
.reto__claim{ font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.18; font-weight:400 }
.reto__claim b{ font-weight:600 }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.stat{ background:var(--surface); padding:26px clamp(18px,2vw,28px) }
.stat__num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.3rem,4.5vw,3.6rem); line-height:1; color:var(--clay-2) }
.stat__num small{ font-size:.45em; color:var(--muted); margin-left:.15em; font-family:var(--font-sans); font-weight:500 }
.stat__lbl{ margin-top:8px; font-size:.82rem; color:var(--muted); letter-spacing:.03em }

/* ============================================================
   Método (flujo generativo)
   ============================================================ */
#metodo{ position:relative; z-index:2 }
.method__intro{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(50px,8vw,110px) }
.method__steps{ display:flex; flex-direction:column; gap:clamp(60px,10vh,140px) }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center }
.step:nth-child(even) .step__media{ order:2 }
.step__media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/11; background:#000; border:1px solid var(--line) }
.step__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.step:hover .step__media img{ transform:scale(1.05) }
.step__idx{ font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,7vw,6rem); line-height:.8; color:transparent; -webkit-text-stroke:1.4px var(--clay); opacity:.7 }
.step__tag{ display:inline-block; margin:18px 0 12px; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); padding:5px 12px; border:1px solid color-mix(in srgb,var(--teal) 40%,transparent); border-radius:100px }
.step h3{ margin-bottom:.5em }
.step p{ color:var(--muted); max-width:46ch }
.step__media .badge{ position:absolute; top:14px; left:14px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(11,9,8,.6); backdrop-filter:blur(6px); padding:6px 11px; border-radius:8px; color:var(--cream) }
.tools{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.tools span{ font-size:.74rem; letter-spacing:.04em; color:var(--muted); padding:6px 13px; border:1px solid var(--line); border-radius:100px; background:var(--surface) }
.tools span b{ color:var(--cream); font-weight:500 }

/* ============================================================
   Viewer 3D
   ============================================================ */
#visor{ position:relative; z-index:2; background:radial-gradient(120% 90% at 50% 0%,var(--surface-2),var(--bg) 70%); border-top:1px solid var(--line-2) }
.viewer__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:30px }
.viewer__stage{
  position:relative; width:100%; height:min(76vh,760px); border-radius:var(--r);
  overflow:hidden; border:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in srgb,var(--clay) 16%,transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 30%, rgba(52,214,180,.05), transparent 70%),
    #060504;
  cursor:grab;
}
.viewer__stage.grabbing{ cursor:grabbing }
.viewer__stage canvas{ width:100% !important; height:100% !important }
.viewer__loading{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; background:rgba(6,5,4,.85); z-index:5; transition:opacity .6s; gap:14px }
.viewer__loading.hide{ opacity:0; pointer-events:none }
.viewer__loading .ring{ width:46px; height:46px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--ember); animation:spin .9s linear infinite; margin:0 auto 16px }
@keyframes spin{ to{ transform:rotate(360deg) } }
.viewer__loading p{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.viewer__hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; gap:22px; align-items:center; font-size:.74rem; color:var(--muted);
  background:rgba(11,9,8,.5); backdrop-filter:blur(8px); padding:9px 18px; border-radius:100px;
  border:1px solid var(--line-2); transition:opacity .5s; pointer-events:none; white-space:nowrap;
}
.viewer__hint b{ color:var(--cream); font-weight:500 }
.viewer__hint.fade{ opacity:0 }
.viewer__ui{ position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:6 }
.vbtn{
  display:inline-flex; align-items:center; gap:9px; justify-content:flex-start;
  font-size:.78rem; letter-spacing:.03em; padding:9px 14px; border-radius:11px;
  border:1px solid var(--line); background:rgba(11,9,8,.55); backdrop-filter:blur(8px);
  color:var(--cream); transition:.25s var(--ease); min-width:128px;
}
.vbtn:hover{ background:var(--clay); border-color:var(--clay); color:#1b0d05; transform:translateX(-3px) }
.vbtn svg{ width:15px; height:15px; flex:none }
.viewer__foot{ margin-top:18px; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted-2); font-size:.8rem }

/* ============================================================
   Timeline (show)
   ============================================================ */
#show{ background:linear-gradient(180deg,var(--bg),#0e0a08); z-index:2 }
.timeline{ position:relative; margin-top:30px }
.timeline__line{ position:absolute; left:clamp(16px,3vw,40px); top:6px; bottom:6px; width:2px; background:var(--line) }
.timeline__line i{ position:absolute; top:0; left:0; width:100%; height:0; background:linear-gradient(var(--clay-2),var(--ember),var(--magenta)); box-shadow:0 0 16px var(--ember) }
.tl-item{ position:relative; padding-left:clamp(54px,8vw,120px); padding-block:clamp(26px,4vw,46px) }
.tl-item::before{ content:""; position:absolute; left:clamp(11px,3vw,35px); top:calc(clamp(26px,4vw,46px) + 12px); width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--clay); transition:.4s var(--ease) }
.tl-item.on::before{ background:var(--ember); border-color:var(--ember); box-shadow:0 0 0 5px color-mix(in srgb,var(--ember) 22%,transparent) }
.tl-top{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:6px }
.tl-phase{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal) }
.tl-dur{ font-size:.78rem; color:var(--muted-2); margin-left:auto; font-variant-numeric:tabular-nums }
.tl-item h3{ font-size:clamp(1.6rem,3.4vw,2.6rem); margin-bottom:.5em }
.tl-sig{ color:var(--muted); max-width:62ch; margin-bottom:22px; font-size:1.02rem }
.facets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.facet{ background:var(--surface); padding:16px 18px; transition:background .3s }
.facet:hover{ background:var(--surface-2) }
.facet h4{ font-family:var(--font-sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clay-2); margin-bottom:7px; font-weight:600 }
.facet p{ font-size:.9rem; color:var(--muted); line-height:1.5 }
.facet.is-off p{ color:var(--muted-2); font-style:italic }

/* ============================================================
   Gallery
   ============================================================ */
.gallery{ columns:3; column-gap:14px }
.gallery figure{ position:relative; margin-bottom:14px; break-inside:avoid; border-radius:14px; overflow:hidden; cursor:pointer }
.gallery img{ width:100%; transition:transform .9s var(--ease),filter .5s }
.gallery figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,9,8,.5),transparent 50%); opacity:0; transition:opacity .4s }
.gallery figure:hover img{ transform:scale(1.06) }
.gallery figure:hover::after{ opacity:1 }
.gallery figcaption{ position:absolute; left:14px; bottom:12px; z-index:2; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream); opacity:0; transform:translateY(8px); transition:.4s var(--ease) }
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0) }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:500; background:rgba(6,5,4,.94); display:grid; place-items:center; padding:5vw; opacity:0; visibility:hidden; transition:.4s var(--ease) }
.lightbox.open{ opacity:1; visibility:visible }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:10px; transform:scale(.96); transition:transform .4s var(--ease) }
.lightbox.open img{ transform:scale(1) }
.lightbox__x{ position:absolute; top:24px; right:30px; font-size:2rem; color:var(--muted); width:48px; height:48px; border-radius:50%; border:1px solid var(--line) }
.lightbox__x:hover{ color:var(--cream); border-color:var(--cream) }

/* ============================================================
   Preview video
   ============================================================ */
#preview{ background:var(--bg-2); border-block:1px solid var(--line-2); z-index:2 }
.player{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#000; aspect-ratio:2500/1200 }
.player video{ width:100%; height:100%; object-fit:cover; display:block }
.player__ui{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between; padding:20px; gap:14px; background:linear-gradient(0deg,rgba(11,9,8,.55),transparent 40%); opacity:1; transition:opacity .4s }
.player.playing .player__ui{ opacity:0 }
.player:hover .player__ui{ opacity:1 }
.player__play{ position:absolute; inset:0; margin:auto; width:clamp(20px,4%,42px); aspect-ratio:5/6; background:none; transition:transform .3s var(--ease); z-index:3 }
.player__play::after{ content:""; display:block; width:100%; height:100%; clip-path:polygon(0 0, 100% 50%, 0 100%); background:rgba(255,255,255,.5); transition:background .3s }
.player.playing .player__play{ opacity:0; transform:scale(.6); pointer-events:none }
.player__play svg{ display:none }
.player__play:hover{ transform:scale(1.18) } .player__play:hover::after{ background:rgba(255,255,255,.75) }
.pbtn{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.05em; padding:9px 15px; border-radius:100px; background:rgba(11,9,8,.55); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--cream) }
.pbtn:hover{ background:var(--cream); color:#1b0d05 }

/* ============================================================
   Credits
   ============================================================ */
#creditos{ z-index:2 }
.credits{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:40px }
.credit{ background:var(--surface); padding:clamp(28px,3.5vw,46px); transition:background .4s var(--ease); display:flex; flex-direction:column; min-height:230px }
.credit:hover{ background:var(--surface-2) }
.credit__role{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal) }
.credit__name{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600; margin:14px 0 8px }
.credit p{ color:var(--muted); font-size:.92rem; flex:1 }
.credit a{ margin-top:18px; font-size:.82rem; color:var(--clay-2); display:inline-flex; align-items:center; gap:8px; align-self:flex-start }
.credit a:hover{ color:var(--ember) } .credit a svg{ width:14px; height:14px; transition:transform .3s } .credit a:hover svg{ transform:translate(3px,-3px) }

/* ---------- Footer ---------- */
.footer{ padding:60px var(--gut) 40px; border-top:1px solid var(--line); position:relative; z-index:2 }
.footer__big{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,12vw,11rem); line-height:.85; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1px var(--line); margin-bottom:30px; white-space:nowrap }
.footer__row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted-2); font-size:.82rem }
.footer__row a{ color:var(--muted) } .footer__row a:hover{ color:var(--clay-2) }

/* ============================================================
   Reveal helper (for GSAP fallbacks) + AOS niceties
   ============================================================ */
[data-rise]{ opacity:0; transform:translateY(40px) }
.split-line{ display:block; overflow:hidden }
.split-line > span{ display:block }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .concept,.reto__grid,.step,.method__intro{ grid-template-columns:1fr }
  .step:nth-child(even) .step__media{ order:0 }
  .concept__fig{ aspect-ratio:16/12 }
  .reto__grid{ gap:36px }
  .gallery{ columns:2 }
}
@media (max-width:680px){
  .nav__links{ display:none }
  .stats{ grid-template-columns:1fr 1fr }
  .gallery{ columns:1 }
  .viewer__ui{ flex-direction:row; flex-wrap:wrap; right:12px; left:12px; top:12px; justify-content:flex-end }
  .vbtn{ min-width:0; padding:8px 11px } .vbtn span{ display:none }
  .viewer__hint{ font-size:.66rem; gap:12px; padding:7px 12px }
  .hero__cue{ display:none }
  .credits{ grid-template-columns:1fr }
  .footer__big{ white-space:normal }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .marquee__track{ animation:none }
}