/* =========================================================================
   JESÚS BUENO — DEMO EXPERIMENTAL (local)
   Sistema: noche cálida de estudio · muro de yeso · grafito · luz rasante
   ========================================================================= */

:root{
  --night:#0b0a09;
  --deep:#050505;
  --plaster:#e7e2d9;
  --ink:#efe9df;
  --ink-2:rgba(239,233,223,.66);
  --ink-3:rgba(239,233,223,.38);
  --dark:#151311;
  --dark-2:rgba(21,19,17,.68);
  --red:#B71C1C;
  --red-lift:#d0463c;
  --gold:#C9A84C;
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script:"Pinyon Script", "Snell Roundhand", cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5vw,72px);
  --nav-h:72px;
}

@property --r { syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(17px,1.15vw,20px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color 1.1s var(--ease-io), color 1.1s var(--ease-io);
}
html[data-tone="deep"] body{background:var(--deep)}
html[data-tone="plaster"] body{background:var(--plaster);color:var(--dark)}

/* grano de materia: estático, casi imperceptible */
body::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.09;mix-blend-mode:overlay;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:italic}
strong{font-weight:400}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--dark);padding:10px 14px;font-family:var(--sans);font-size:.75rem}
.skip-link:focus{left:8px}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:860px}
.center{text-align:center}
.italic{font-style:italic}

/* ---------- tipografía ---------- */
.eyebrow,.chapter-label,.micro,.meta,.viewer-modes button,.nav-toggle-txt,.skip,.scroll-hint,.btn-line,.btn-ghost{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.34em;font-size:.64rem;
}
.chapter-label{color:var(--red-lift);text-align:center;position:relative}
html[data-tone="plaster"] .chapter-label{color:var(--red)}
.chapter-label.static{margin-bottom:clamp(28px,4vw,48px)}
.chapter-label.static::after{content:"";display:block;width:56px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.display{font-weight:300;font-size:clamp(2.3rem,5.4vw,5.6rem);line-height:1.04;letter-spacing:-.012em;margin:clamp(40px,7vw,96px) auto clamp(48px,7vw,100px);max-width:15ch}
.display em{color:inherit;opacity:.82}
.prose-xl{font-size:clamp(1.7rem,3.6vw,3.4rem);line-height:1.2;font-weight:300;max-width:20ch;margin:0 auto;text-align:center}
.prose-l{font-size:clamp(1.45rem,2.4vw,2.2rem);line-height:1.35;max-width:30ch;margin:0 auto}
.prose-m{font-size:clamp(1.15rem,1.55vw,1.42rem);line-height:1.7;max-width:44ch;margin:clamp(24px,3vw,40px) auto 0;opacity:.88}
.prose-s{font-size:clamp(1.08rem,1.3vw,1.25rem);line-height:1.7;max-width:46ch;margin:0 auto}

/* ---------- revelado ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- botones ---------- */
.btn-line{display:inline-flex;align-items:center;gap:16px;padding:14px 0;position:relative;color:var(--ink)}
.btn-line::before{content:"";width:46px;height:1px;background:currentColor;transition:width .7s var(--ease)}
.btn-line:hover::before{width:84px}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border:1px solid rgba(239,233,223,.26);transition:border-color .5s,background .5s}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,168,76,.06)}

/* =========================================================================
   NAVEGACIÓN
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);
  pointer-events:none;color:var(--ink);transition:color .9s var(--ease-io),opacity .9s var(--ease);
}
.nav > *{pointer-events:auto}
.nav::before{content:"";position:absolute;inset:0 0 -34px 0;pointer-events:none;background:linear-gradient(rgba(11,10,9,.72),rgba(11,10,9,0));transition:opacity .9s}
html[data-tone="plaster"] .nav::before{background:linear-gradient(rgba(231,226,217,.92),rgba(231,226,217,0))}
html.is-intro .nav::before{opacity:0}
html[data-tone="plaster"] .nav{color:var(--dark)}
.nav-mark{display:flex;align-items:center;gap:12px}
.nav-logo{width:38px;height:38px;object-fit:contain;transition:transform 1.2s var(--ease)}
.nav-mark:hover .nav-logo{transform:rotate(-30deg)}
.nav-name{font-family:var(--script);font-size:1.6rem;line-height:1;letter-spacing:.01em;transform:translateY(2px)}
.nav-chapter{display:none;position:absolute;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:.6rem;letter-spacing:.38em;text-transform:uppercase;opacity:.6;transition:opacity .6s}
.nav-toggle{display:flex;align-items:center;gap:14px;padding:12px 0}
.nav-toggle-lines{width:28px;height:7px;position:relative}
.nav-toggle-lines::before,.nav-toggle-lines::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .6s var(--ease),width .6s var(--ease)}
.nav-toggle-lines::before{top:0}
.nav-toggle-lines::after{bottom:0;width:60%;left:auto}
.nav-toggle:hover .nav-toggle-lines::after{width:100%}
.menu-open .nav-toggle-lines::before{transform:translateY(3px) rotate(14deg)}
.menu-open .nav-toggle-lines::after{transform:translateY(-3px) rotate(-14deg);width:100%}
.menu-open .nav{color:var(--ink)}

html.is-intro .nav{opacity:0;pointer-events:none}
html.is-intro .nav > *{pointer-events:none}
html.is-intro body{overflow:hidden}

/* menú a pantalla completa */
.menu{position:fixed;inset:0;z-index:70;background:var(--deep);display:grid;grid-template-columns:1fr 1fr;align-items:center;opacity:0;transition:opacity .7s var(--ease)}
.menu.open{opacity:1}
.menu[hidden]{display:none}
.menu-image{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.menu-image img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);filter:brightness(.42) saturate(.9);transition:opacity 1s var(--ease),transform 2.4s var(--ease)}
.menu-image img.show{opacity:1;transform:scale(1)}
.menu-links{position:relative;grid-column:2;display:flex;flex-direction:column;gap:.1em;padding:0 var(--gutter)}
.menu-links a{font-size:clamp(2.4rem,6vw,5.6rem);line-height:1.08;font-weight:300;overflow:hidden;display:block}
.menu-links a span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease),opacity .5s,font-style .3s}
.menu.open .menu-links a span{transform:none}
.menu-links a:nth-child(2) span{transition-delay:.05s}.menu-links a:nth-child(3) span{transition-delay:.1s}
.menu-links a:nth-child(4) span{transition-delay:.15s}.menu-links a:nth-child(5) span{transition-delay:.2s}.menu-links a:nth-child(6) span{transition-delay:.25s}
.menu-links:hover a span{opacity:.32}
.menu-links a:hover span{opacity:1;font-style:italic}
.menu-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;display:flex;justify-content:space-between;gap:20px;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}

/* =========================================================================
   I. ENTRADA — manos, color, firma
   ========================================================================= */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--deep)}
.hero-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hands-box{position:relative;height:100svh;aspect-ratio:645/1400;flex:none}
.hands{
  --r:0%;
  position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle at 38% 47%, #000 calc(var(--r) * .45), transparent var(--r));
          mask-image:radial-gradient(circle at 38% 47%, #000 calc(var(--r) * .45), transparent var(--r));
  will-change:transform;
}
.hero.ready .hands{-webkit-mask-image:none;mask-image:none}
.hands-img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.72) contrast(1.05);
  -webkit-mask-image:radial-gradient(ellipse 62% 54% at 46% 48%,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%),linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(ellipse 62% 54% at 46% 48%,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%),linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);
          mask-composite:intersect;
}
.hero.ready .hands-img{filter:grayscale(0) brightness(.8) contrast(1.05)}
.hero.ready .hands-shade{opacity:.34}
.hero.ready .birth-logo{visibility:hidden}
.hero.ready .hero-copy{opacity:1}
@media (min-aspect-ratio:1/1) and (min-width:761px){ .hero.ready .hero-stage{transform:translateX(19vw)} }
.hands-shade{position:absolute;inset:0;background:radial-gradient(circle at 38% 47%, rgba(5,5,5,.15), rgba(5,5,5,.9) 70%);opacity:0;pointer-events:none}
.birth-logo{
  --a:0deg;
  position:absolute;left:39%;top:47%;width:50%;height:auto;translate:-50% -50%;
  opacity:0;pointer-events:none;
  -webkit-mask-image:conic-gradient(from 200deg, #000 var(--a), transparent calc(var(--a) + 40deg));
          mask-image:conic-gradient(from 200deg, #000 var(--a), transparent calc(var(--a) + 40deg));
  filter:drop-shadow(0 0 40px rgba(0,0,0,.6));
}
.signature{position:absolute;left:0;right:0;bottom:clamp(64px,13vh,140px);text-align:center;pointer-events:none;z-index:3}
.sig-script{display:block;font-family:var(--script);font-size:clamp(3.4rem,7.4vw,7.2rem);line-height:1.1;color:var(--ink);clip-path:inset(-20% 100% -20% 0);text-shadow:0 2px 30px rgba(0,0,0,.6)}
.sig-art{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.6em;text-transform:uppercase;color:var(--ink-2);opacity:0;margin-top:6px;padding-left:.6em}

.hero-copy{position:absolute;z-index:4;left:var(--gutter);top:50%;transform:translateY(-46%);max-width:min(54vw,780px);opacity:0;visibility:hidden}
.hero-copy .eyebrow{color:var(--red-lift);margin-bottom:28px}
.hero-title{font-weight:300;font-size:clamp(2rem,3.5vw,3.9rem);line-height:1.08;letter-spacing:-.01em}
.hero-title .ln{display:block;text-wrap:balance}
.hero-title .ln.sub{font-size:.42em;line-height:1.5;letter-spacing:.01em;color:var(--ink-2)}
.hero-title .ln.sub:first-of-type{margin-top:.9em}
.hero-title .ln:nth-child(3){margin-top:1.4em}
.hero-copy .btn-line{margin-top:40px}
.hero.ready .hero-copy{visibility:visible}

.loading-note{position:absolute;left:0;right:0;bottom:46%;text-align:center;font-family:var(--sans);font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity 1.2s;pointer-events:none}
.loading-note.on{opacity:1}
.skip{position:absolute;right:var(--gutter);bottom:30px;z-index:6;color:var(--ink-3);padding:10px 0;opacity:0;transition:opacity .8s,color .4s}
.skip:hover{color:var(--ink)}
.skip.show{opacity:1}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-3);font-size:.56rem;opacity:0;transition:opacity 1.2s}
.scroll-line{width:1px;height:44px;background:linear-gradient(var(--ink-3),transparent);transform-origin:top;animation:drip 2.8s var(--ease-io) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero.ready .scroll-hint{opacity:1}

/* =========================================================================
   SCROLLYTELLING — base
   ========================================================================= */
.scrolly{position:relative}
.scrolly .sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.anchor{position:absolute;left:0;width:1px;height:1px;scroll-margin-top:0}

/* =========================================================================
   II. LA MÁSCARA → LA GRIETA
   ========================================================================= */
.surface{height:880svh}
.surface-stage{position:absolute;inset:0;background:#0d0c0b}
.surface-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.32) contrast(1.2)}
.surface-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.surface-gl.on{opacity:1}
.surface-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,7,6,.62) 0%,rgba(8,7,6,.25) 42%,transparent 62%),linear-gradient(0deg,rgba(8,7,6,.5),transparent 30%)}
.surface .chapter-label{position:absolute;top:calc(var(--nav-h) + 30px);left:var(--gutter);right:auto;width:20em;text-align:left;height:1.2em}
.surface .chapter-label span{position:absolute;left:0;right:0;transition:opacity 1s var(--ease),letter-spacing 1.4s var(--ease);opacity:0;letter-spacing:.6em}
.surface .chapter-label span.on{opacity:1;letter-spacing:.34em}
.beats{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(44vw,640px);height:60vh;pointer-events:none}
.beat{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-size:clamp(1.6rem,2.7vw,2.7rem);line-height:1.28;font-weight:300;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
  opacity:0;filter:blur(8px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.4s var(--ease);
}
.beat.big{font-size:clamp(2.4rem,4.6vw,4.8rem);line-height:1.06;letter-spacing:-.01em}
.beat.on{opacity:1;filter:blur(0)}
.beat.past{transform:translateY(-62%)}
.surface-hint{position:absolute;right:var(--gutter);bottom:34px;width:46px;height:46px;border:1px solid rgba(239,233,223,.28);border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity 1s}
.surface-hint span{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:pulse 2.6s var(--ease-io) infinite}
.surface-hint.on{opacity:1}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(2.2);opacity:.2}}

/* =========================================================================
   III. EL CAOS INTERNO — estratos
   ========================================================================= */
.chaos-intro{padding:clamp(140px,22vh,260px) var(--gutter) clamp(90px,14vh,160px)}
.strata{height:520svh}
.layer{
  position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
  clip-path:inset(100% 0 0 0);will-change:clip-path;
}
.layer::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%),radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.45));}
.layer-word{position:absolute;left:50%;bottom:12vh;transform:translateX(-50%);text-align:center;white-space:nowrap;will-change:transform,left;text-shadow:0 2px 22px rgba(0,0,0,.85),0 0 60px rgba(0,0,0,.5)}
.layer-word .w{display:block;transform-origin:50% 100%;font-size:clamp(3.4rem,11vw,12rem);line-height:.9;font-weight:300;letter-spacing:-.02em;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.layer-word .d{display:block;font-style:italic;font-size:clamp(1.3rem,2.2vw,2.2rem);margin-top:.3em;color:rgba(239,233,223,.86)}
.layer-word .w::after{content:"";display:block;height:2px;width:0;margin:.18em auto 0;background:var(--tint);transition:width 1.2s var(--ease)}
.layer.inplace .layer-word .w::after{width:40%}

.translate{padding:clamp(120px,20vh,240px) var(--gutter);text-align:center}
.translate-a{font-size:clamp(1.6rem,3vw,2.8rem);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:10px;text-decoration-thickness:1px}
.translate-b{margin:clamp(20px,3vw,36px) 0}
.translate-b .script{font-family:var(--script);font-size:clamp(3rem,7.6vw,7.6rem);line-height:1.15;color:var(--ink)}
.translate-c{font-size:clamp(1.3rem,2vw,1.9rem);color:var(--ink-2)}
.translate-d{margin-top:clamp(70px,12vh,140px);font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.3}

/* =========================================================================
   IV. LAS MANOS — la ranura
   ========================================================================= */
.handsec{height:300svh}
.slit{position:absolute;inset:0;clip-path:inset(49.6% 0 49.6% 0);will-change:clip-path}
.slit img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:brightness(.62) contrast(1.06);transform:scale(1.22);will-change:transform}
.handsec-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hb{position:absolute;text-align:center;font-size:clamp(1.9rem,4.4vw,4.6rem);line-height:1.12;max-width:16ch;opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);text-shadow:0 3px 30px rgba(0,0,0,.6)}
.hb.on{opacity:1;transform:none}

/* =========================================================================
   V. EL PROCESO — muro de yeso
   ========================================================================= */
.process{padding:clamp(140px,20vh,240px) 0 clamp(120px,16vh,200px);color:var(--dark)}
.process .prose-m{opacity:.8}
.steps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:start}
.steps-num{position:sticky;top:18vh;height:64vh;}
.steps-num span{position:absolute;left:0;top:0;font-size:clamp(9rem,22vw,22rem);line-height:.8;font-weight:300;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(21,19,17,.55);opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.steps-num span.on{opacity:1;transform:none}
.steps-bar{position:absolute;left:4px;bottom:0;width:1px;height:40%;background:rgba(21,19,17,.15)}
.steps-bar b{position:absolute;left:0;top:0;width:1px;height:0;background:var(--red);transition:height .9s var(--ease)}
.steps-list{list-style:none;padding:12vh 0 8vh}
.step{padding:7vh 0;border-top:1px solid rgba(21,19,17,.14);opacity:.28;transition:opacity .9s var(--ease)}
.step.on{opacity:1}
.step-n{display:none;font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;color:var(--red)}
.step h3{font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.step p{font-size:clamp(1.4rem,2.2vw,2.15rem);line-height:1.3;max-width:24ch}
.closing{margin-top:clamp(60px,8vw,120px)}

/* =========================================================================
   VI. PARA QUIÉN
   ========================================================================= */
.who{padding:clamp(60px,10vh,140px) 0 clamp(140px,22vh,260px);color:var(--dark)}
.who .display{max-width:20ch;margin-bottom:clamp(60px,8vw,120px)}
.who-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);padding:0 var(--gutter);max-width:1380px;margin:0 auto}
.who-card:nth-child(2){margin-top:14vh}
.who-card:nth-child(3){margin-top:28vh}
.who-img{overflow:hidden;aspect-ratio:2/3;background:#cfc9be}
.who-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.who-card.in .who-img img{transform:scale(1)}
.who-card h3{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;margin:26px 0 12px;color:var(--red)}
.who-card p{font-size:clamp(1.1rem,1.35vw,1.3rem);line-height:1.55;color:var(--dark-2)}

/* =========================================================================
   VII. COLECCIÓN — salas
   ========================================================================= */
.reflections{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20vh var(--gutter)}
.reflections-title{font-size:clamp(2.6rem,7vw,7.6rem);line-height:1.02;font-weight:300;letter-spacing:-.015em}
.reflections-title em{display:block;font-size:.52em;letter-spacing:.08em;color:var(--ink-2);margin-top:.4em}
.micro{color:var(--red-lift);margin-top:48px}

.sala{position:relative;min-height:100svh;display:grid;align-items:center;padding:14vh var(--gutter);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px)}
.sala::before{content:"";position:absolute;left:50%;top:0;width:min(90vw,1100px);height:80%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(239,226,200,.07),transparent 70%);opacity:0;transition:opacity 2s var(--ease);pointer-events:none}
.sala.lit::before{opacity:1}
.work{position:relative;justify-self:end;width:min(var(--wmax),calc(78svh * var(--ar)));aspect-ratio:var(--ar);cursor:zoom-in;--wmax:46vw}
.sala.wide{grid-template-columns:1fr}
.sala.wide .work{justify-self:center;--wmax:min(80vw,calc((100svh - 300px) * var(--ar)))}
.sala.flip .work{order:2;justify-self:start}
.work-frame{position:absolute;inset:0;overflow:hidden;background:#0c0b0a;clip-path:inset(50% 0 50% 0);transition:clip-path 1.8s var(--ease)}
.sala.lit .work-frame{clip-path:inset(0 0 0 0)}
.work-img,.work-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-img{transform:scale(1.1);filter:brightness(.3);transition:transform 2.6s var(--ease),filter 2.2s var(--ease)}
.sala.lit .work-img{transform:none;filter:none}
.work-gl{opacity:0;transition:opacity 1.2s var(--ease)}
.work-gl.on{opacity:1}
.work::after{content:"";position:absolute;inset:0;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);pointer-events:none}
.work-plus{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;opacity:0;transition:opacity .6s, transform .6s var(--ease);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.work-plus::before,.work-plus::after{content:"";position:absolute;width:12px;height:1px;background:#fff}
.work-plus::after{transform:rotate(90deg)}
.work:hover .work-plus{opacity:1;transform:rotate(90deg)}
.cap{max-width:420px}
.sala.wide .cap{justify-self:center;text-align:center;max-width:none}
.cap-idx{font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;color:var(--ink-3)}
.cap h3{font-weight:300;font-size:clamp(2rem,3.8vw,4rem);line-height:1.02;letter-spacing:.01em;margin:18px 0 18px;text-transform:uppercase}
.cap .bell{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin:-6px 0 16px}
.cap .meas{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;color:var(--ink-2)}
.cap .rule{display:block;width:60px;height:1px;background:var(--red);margin:22px 0}
.sala.wide .cap .rule{margin:22px auto}
.cap .open{display:inline-block;margin-top:20px;font-style:italic;font-size:1.1rem;color:var(--ink-2);border-bottom:1px solid rgba(239,233,223,.25);padding-bottom:3px;transition:color .4s,border-color .4s}
.cap .open:hover{color:var(--ink);border-color:var(--gold)}
.cap > *{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.sala.lit .cap > *{opacity:1;transform:none}
.sala.lit .cap > *:nth-child(2){transition-delay:.12s}.sala.lit .cap > *:nth-child(3){transition-delay:.22s}
.sala.lit .cap > *:nth-child(4){transition-delay:.3s}.sala.lit .cap > *:nth-child(5){transition-delay:.38s}.sala.lit .cap > *:nth-child(6){transition-delay:.46s}

/* visor */
.viewer{position:fixed;inset:0;z-index:100;background:#000;display:grid;grid-template-columns:minmax(0,1fr) min(440px,36vw);opacity:0;transition:opacity .7s var(--ease)}
.viewer.open{opacity:1}
.viewer[hidden]{display:none}
.viewer-art{position:relative;margin:clamp(20px,4vw,56px);overflow:hidden;cursor:zoom-in}
.viewer-art.zoomed{cursor:zoom-out}
.viewer-img,.viewer-gl,.viewer-mock{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer-gl{opacity:0;transition:opacity .8s}
.viewer-gl.on{opacity:1}
.viewer-mock{opacity:0;transition:opacity 1s var(--ease);pointer-events:none;object-fit:contain;background:var(--deep)}
.viewer.espacio .viewer-mock{opacity:1}
.viewer.espacio .viewer-art{cursor:default}
.viewer-info{overflow:auto;padding:clamp(80px,12vh,120px) clamp(24px,3vw,48px) 48px 0;display:flex;flex-direction:column}
.viewer-modes{display:flex;gap:22px;margin-bottom:44px}
.viewer-modes button{padding:6px 0;color:var(--ink-3);border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.viewer-modes button.on{color:var(--ink);border-color:var(--gold)}
.viewer-idx{font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;color:var(--ink-3)}
.viewer-title{font-weight:300;font-size:clamp(2rem,2.8vw,3.1rem);line-height:1.04;margin:16px 0 10px;text-transform:uppercase}
.viewer-bellini{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.viewer-rule{display:block;width:120px;height:1px;margin:22px 0 24px;background:linear-gradient(90deg,#6f0b0b,#c91d1d,#6f0b0b)}
.viewer-desc p{font-size:clamp(1.12rem,1.3vw,1.32rem);line-height:1.6;color:rgba(239,233,223,.86);margin-bottom:.9em}
.viewer-meas{font-family:var(--sans);font-size:.66rem;letter-spacing:.26em;color:var(--ink-2);margin-top:14px}
.viewer-nav{margin-top:auto;padding-top:40px;display:flex;gap:10px}
.viewer-nav button{width:48px;height:48px;border:1px solid rgba(239,233,223,.2);border-radius:50%;font-size:1rem;transition:border-color .4s}
.viewer-nav button:hover{border-color:var(--gold)}
.viewer-close{position:absolute;top:22px;right:28px;font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:10px 12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35)}
.viewer-zoomhint{position:absolute;left:clamp(20px,4vw,56px);bottom:14px;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);transition:opacity .5s}
.viewer.espacio .viewer-zoomhint{opacity:0}

/* =========================================================================
   VIII. FORMATO MONUMENTAL
   ========================================================================= */
.lobby{height:320svh}
.lobby .sticky{display:flex;align-items:center;justify-content:center}
.lobby-frame{position:absolute;left:50%;top:50%;width:min(100svh,100vw);aspect-ratio:1;translate:-50% -50%;will-change:transform;transform-origin:50% 36.5%}
.lobby-frame img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 94%,transparent);mask-composite:intersect}
.lobby-copy{position:absolute;left:0;right:0;bottom:12vh;text-align:center;padding:0 var(--gutter);text-shadow:0 2px 26px rgba(0,0,0,.7);transition:opacity .9s var(--ease)}
.lobby-copy .chapter-label{margin-bottom:22px}
.lobby-copy .chapter-label::after{display:none}

.formats{padding:clamp(80px,12vh,160px) 0 clamp(120px,18vh,220px)}
.formats .display{max-width:18ch;margin-top:0}
.scale-row{--k:clamp(.42px,.085vw,.92px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3.4vw,54px);margin:clamp(70px,10vw,140px) 0 clamp(60px,8vw,110px);flex-wrap:wrap}
.fmt{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fmt svg{width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));overflow:visible}
.fmt rect,.fmt path{fill:none;stroke:rgba(239,233,223,.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-io)}
.fmt.accent rect{stroke:var(--red-lift)}
.fmt.open path{stroke:var(--gold);stroke-dasharray:1}
.scale-row.in .fmt rect,.scale-row.in .fmt path{stroke-dashoffset:0}
.scale-row.in .fmt:nth-child(2) rect{transition-delay:.25s}.scale-row.in .fmt:nth-child(3) rect{transition-delay:.5s}.scale-row.in .fmt:nth-child(4) path{transition-delay:.75s}
.fmt.open svg{-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.fmt figcaption b{display:block;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1}
.fmt figcaption span{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:10px;max-width:22ch;line-height:1.6}

/* =========================================================================
   IX. ACCESO PRIVADO
   ========================================================================= */
.contact{position:relative;padding:clamp(160px,24vh,280px) 0 clamp(100px,14vh,160px);overflow:hidden;text-align:center}
.contact-logo{position:absolute;left:50%;top:clamp(80px,12vh,130px);width:clamp(140px,16vw,220px);translate:-50% 0;opacity:.95}
.contact-logo img,.symbol img{--a:0deg;-webkit-mask-image:conic-gradient(from 200deg,#000 var(--a),transparent calc(var(--a) + 40deg));mask-image:conic-gradient(from 200deg,#000 var(--a),transparent calc(var(--a) + 40deg))}
.contact-logo img{width:100%}
.contact .chapter-label{margin-top:clamp(150px,20vh,240px)}
.contact-title{font-weight:300;font-size:clamp(2rem,4.2vw,4rem);line-height:1.12;margin-bottom:36px}
.contact-title em{display:block;font-size:.56em;line-height:1.4;color:var(--ink-2);margin-top:.6em}
.contact-email{display:inline-block;margin:44px 0 30px;font-size:clamp(1.6rem,3.6vw,3.2rem);font-style:italic;position:relative;padding-bottom:6px}
.contact-email::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(.5);transition:transform .9s var(--ease)}
.contact-email:hover::after{transform:scaleX(1)}
.meta{margin-top:40px;color:var(--ink-2);font-size:.58rem;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.meta i{font-style:normal;opacity:.5}
.contact-nav{margin-top:80px;display:flex;justify-content:center;gap:clamp(20px,4vw,56px)}
.contact-nav a{font-size:1.15rem;font-style:italic;color:var(--ink-2);transition:color .4s}
.contact-nav a:hover{color:var(--ink)}
.foot{padding:28px var(--gutter) 34px;text-align:center;font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;color:var(--ink-3)}
html[data-tone="plaster"] .foot{color:var(--dark-2)}

/* =========================================================================
   PÁGINAS INTERIORES (Proyecto · Artista · Galería)
   ========================================================================= */
.page-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);transform:scale(1.08);transition:transform 3.2s var(--ease),filter 2.4s var(--ease)}
.page-hero.in img{transform:scale(1)}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--night) 0%,rgba(11,10,9,.2) 45%,transparent 70%)}
.page-hero-copy{position:relative;z-index:2;padding:0 var(--gutter) 14vh;max-width:1100px}
.page-hero .eyebrow{color:var(--red-lift);margin-bottom:24px}
.page-h1{font-weight:300;font-size:clamp(2.6rem,6.4vw,6.6rem);line-height:1.02;letter-spacing:-.015em}
.page-h1 em{color:var(--ink-2)}
.hero-underline{display:block;width:120px;height:1px;margin-top:34px;background:linear-gradient(90deg,var(--red),var(--gold),transparent)}
.back{position:fixed;top:24px;right:var(--gutter);z-index:81;font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);padding:10px 0;transition:color .4s}
.back:hover{color:var(--ink)}
.page .nav-toggle{display:none}

.longread{padding:clamp(100px,16vh,180px) 0}
.block{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,5vw,90px);max-width:1180px;margin:0 auto clamp(110px,16vh,200px);padding:0 var(--gutter)}
.block-label{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red-lift);padding-top:.7em;position:sticky;top:120px;align-self:start}
.block-body p{font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.5;margin-bottom:.85em;max-width:34ch}
.block-body p strong{color:#fff}
.pullquote{max-width:1180px;margin:0 auto clamp(110px,16vh,200px);padding:0 var(--gutter);font-size:clamp(2rem,4.6vw,4.6rem);line-height:1.12;font-style:italic;font-weight:300;letter-spacing:-.01em}
.emo-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin:clamp(30px,5vw,60px) 0 clamp(40px,6vw,70px)}
.emo-cols h4{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;display:inline-block;padding-bottom:8px;margin-bottom:22px;position:relative}
.emo-cols h4::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c);background-size:200% 100%;animation:flow 3s linear infinite}
@keyframes flow{to{background-position:200% 0}}
.emo-cols .list{font-size:clamp(1.8rem,3.2vw,3.2rem);line-height:1.14;font-weight:300}
.emo-cols .list span{display:block}
.matter{position:relative;height:120svh;margin:0 0 clamp(110px,16vh,200px)}
.matter .sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.matter canvas,.matter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.matter canvas{opacity:0;transition:opacity 1.4s}
.matter canvas.on{opacity:1}
.signature-block{text-align:center;padding:clamp(60px,10vh,120px) var(--gutter)}
.signature-block img{width:120px;margin:0 auto 26px}
.signature-block .sig-name{font-family:var(--script);font-size:clamp(2.8rem,5vw,4.4rem);line-height:1.1}
.signature-block .sig-detail{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin-top:12px}
.cta-bar{border-top:1px solid rgba(239,233,223,.1);padding:clamp(70px,12vh,130px) var(--gutter);text-align:center}
.cta-bar .q{font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.2;font-weight:300}
.cta-bar .q span{display:block;font-size:.4em;font-style:italic;color:var(--ink-2);margin-top:14px;line-height:1.6}
.cta-bar .btn-ghost{margin-top:44px}
.symbol{display:grid;place-items:center;padding:20px 0 50px}
.symbol img{width:clamp(180px,22vw,300px)}

/* galería virtual */
.gal-head{min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 var(--gutter) 8vh}
.gal-head .eyebrow{color:var(--red-lift);margin-bottom:24px}
.gal-head h1{font-weight:300;font-size:clamp(3rem,8vw,8.4rem);line-height:1;letter-spacing:-.02em}
.gal-head .subtitle{margin-top:30px;font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--ink-2);font-style:italic}
.door{position:relative;height:260svh}
.door .sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.door-frame{position:relative;width:min(92vw,1500px);aspect-ratio:1600/1066;overflow:hidden;will-change:transform}
.door-frame img{width:100%;height:100%;object-fit:cover}
.door-fade{position:absolute;inset:0;background:var(--night);opacity:0;pointer-events:none}
.yt{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(60px,10vh,120px) auto 0;font-size:clamp(1.4rem,2.6vw,2.4rem);font-style:italic}
.yt i{display:block;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--red),var(--gold),transparent);background-size:200% 100%;animation:flow 3s linear infinite}

/* =========================================================================
   TABLET
   ========================================================================= */
@media (max-width:1100px){
  .sala{grid-template-columns:1fr;padding:12vh var(--gutter)}
  .sala .work,.sala.flip .work{justify-self:center;order:0;--wmax:84vw}
  .cap{justify-self:center;text-align:center}
  .cap .rule{margin:22px auto}
  .viewer{grid-template-columns:1fr;grid-template-rows:62svh auto;overflow:auto}
  .viewer-art{margin:64px 16px 0}
  .viewer-info{padding:28px var(--gutter) 60px}
  .viewer-zoomhint{display:none}
}

/* proporción vertical: la entrada se compone en vertical */
@media (max-aspect-ratio:1/1){
  .hero-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:clamp(70px,11vh,120px);transform:none;max-width:none}
  .hero-title{font-size:clamp(1.9rem,6.4vw,3.4rem)}
  .hero-title .ln.sub{font-size:.5em}
  .hero.ready .hero-stage{transform:translateY(-19svh)}
  .hero.ready .hands-shade{opacity:1;background:linear-gradient(0deg,rgba(5,5,5,.94) 8%,rgba(5,5,5,.35) 58%,rgba(5,5,5,.15))}
  .beats{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:12vh;transform:none;height:46vh}
  .beat{top:auto;bottom:0;transform:none}
  .beat.past{transform:translateY(-12%)}
  .surface-veil{background:linear-gradient(0deg,rgba(8,7,6,.82) 0%,rgba(8,7,6,.35) 46%,transparent 70%)}
}
@media (max-aspect-ratio:645/1400){
  .hands-box{height:auto;width:100vw}
}
@media (max-width:760px){
  .hands-img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 86%,transparent)}
}

/* =========================================================================
   MÓVIL — composición propia
   ========================================================================= */
@media (max-width:760px){
  :root{--nav-h:62px}
  body{font-size:17px}
  .nav-name{font-size:1.35rem}
  .nav-chapter{display:none}
  .nav-logo{width:32px;height:32px}
  .menu{grid-template-columns:1fr}
  .menu-links{grid-column:1}
  .menu-links a{font-size:clamp(2.4rem,11vw,3.4rem)}
  .menu-foot{flex-direction:column;gap:8px;bottom:26px}
  .menu-image img{filter:brightness(.3)}

  .birth-logo{width:52%}
  .signature{bottom:7svh}
  .sig-script{font-size:3.3rem}
  .hero-copy .eyebrow{margin-bottom:18px;letter-spacing:.24em}
  .hero-copy .btn-line{margin-top:22px}
  .skip{bottom:22px}
  .scroll-hint{display:none}

  .surface{height:760svh}
  .beat{font-size:clamp(1.45rem,6.6vw,2rem)}
  .beat.big{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  .surface-hint{display:none}

  .strata{height:440svh}
  .layer-word .w{font-size:clamp(3rem,15vw,5rem)}

  .handsec{height:240svh}
  .slit img{object-position:50% 40%}
  .hb{font-size:clamp(1.8rem,8.4vw,2.6rem);padding:0 var(--gutter)}

  .steps{grid-template-columns:1fr}
  .steps-num{display:none}
  .steps-list{padding:4vh 0}
  .step{padding:40px 0;opacity:1}
  .step-n{display:block;margin-bottom:14px}
  .step p{font-size:1.45rem}

  .who-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 var(--gutter) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .who-row::-webkit-scrollbar{display:none}
  .who-card{flex:0 0 78vw;scroll-snap-align:center;margin-top:0!important}

  .reflections{min-height:86svh}
  .sala{min-height:auto;padding:9vh var(--gutter) 11vh}
  .sala .work,.sala.flip .work{width:min(100%,calc(64svh * var(--ar)));--wmax:100%}
  .sala.wide .work{width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1);max-width:none}
  .cap h3{font-size:clamp(1.9rem,9vw,2.6rem)}

  .viewer{grid-template-rows:56svh auto}
  .viewer-art{margin:58px 0 0}
  .viewer-close{top:12px;right:12px;font-size:.58rem;padding:8px 10px}

  .lobby{height:240svh}
  .lobby-frame{width:min(100svh,170vw)}
  .scale-row{--k:.42px;display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:end;row-gap:48px}

  .contact-title{font-size:2.1rem}
  .contact-email{font-size:1.55rem;word-break:break-word}
  .meta{flex-direction:column;gap:6px}
  .meta i{display:none}
  .contact-nav{flex-direction:column;gap:14px;margin-top:56px}

  .block{grid-template-columns:1fr;gap:18px}
  .block-label{position:static}
  .emo-cols{grid-template-columns:1fr 1fr}
  .back{top:18px}
}

/* =========================================================================
   MOVIMIENTO REDUCIDO — todo presente, sin coreografía
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .contact-logo img,.symbol img{--a:360deg}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .rv{opacity:1;transform:none}
  .hands{-webkit-mask-image:none;mask-image:none}
  .hands-img{filter:brightness(.72)}
  .birth-logo{display:none}
  .signature{display:none}
  .hero-copy{opacity:1;visibility:visible}
  .skip,.loading-note{display:none}
  .surface,.strata,.handsec,.lobby,.door{height:auto}
  .scrolly .sticky,.matter .sticky,.door .sticky{position:relative;height:auto;min-height:100svh}
  .surface .sticky{min-height:0;padding:20vh var(--gutter)}
  .surface-stage{position:fixed;opacity:0}
  .surface-fallback{filter:brightness(.35)}
  .surface .chapter-label{position:static;margin-bottom:30px}
  .surface .chapter-label span{position:static;opacity:1;display:block;margin:40px 0 10px}
  .beats{position:static;transform:none;width:auto;height:auto}
  .beat{position:static;opacity:1;filter:none;transform:none;margin:0 0 1.2em}
  .strata .sticky{display:grid;grid-template-columns:repeat(2,1fr)}
  .layer{position:relative;clip-path:none!important;min-height:50svh}
  .layer-word{left:50%!important;transform:translateX(-50%)!important}
  .slit{position:relative;clip-path:none!important;height:70svh}
  .slit img{transform:none!important}
  .handsec-copy{position:relative;flex-direction:column;padding:10vh var(--gutter);gap:40px}
  .hb{position:static;opacity:1;transform:none}
  .lobby-frame{position:relative;left:auto;top:auto;translate:none;transform:none!important;margin:0 auto}
  .work-frame{clip-path:none}
  .work-img{transform:none;filter:none}
  .cap > *{opacity:1;transform:none}
}

/* =========================================================================
   V2 — CORRECCIONES (champán, subrayados, jerarquía de títulos, idioma)
   ========================================================================= */
:root{
  --champ:#B08D57;          /* champán cálido: líneas y acentos */
  --champ-light:#CDB081;    /* champán sobre negro: texto pequeño (contraste ≈ 9:1) */
  --champ-deep:#7A5C2E;     /* champán sobre yeso: números y texto (contraste ≈ 4.8:1) */
  --red-deep:#8E1B1B;
}

/* --- subrayado único: se dibuja y se desplaza una sola vez (≈1,2 s) --- */
.uline{position:relative;display:inline-block;padding-bottom:.5em}
.uline::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--champ) 18%,var(--champ-light) 50%,var(--champ) 82%,transparent 100%);
  background-size:200% 100%;background-position:100% 0;
  transform:scaleX(0);transform-origin:left center;
}
.uline.in::after,.rv.in .uline::after{animation:ulSweep 1.2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes ulSweep{from{transform:scaleX(0);background-position:100% 0}to{transform:scaleX(1);background-position:0 0}}
.uline.red::after{height:1.5px;background-image:linear-gradient(90deg,transparent 0%,#6f1212 15%,#9c1f1f 50%,#6f1212 85%,transparent 100%)}
.uline.spectrum::after{height:2px;background-image:linear-gradient(90deg,transparent 0%,#2c3a86 14%,#8e1b1b 38%,#B08D57 62%,#3d7a4c 86%,transparent 100%)}

/* --- jerarquía: nivel A (escenas) y nivel B (capítulos) --- */
.chapter-label{font-size:clamp(.8rem,1.05vw,.98rem);letter-spacing:.36em}
.chapter-label.static::after{display:none}
.chapter-label.static{font-weight:500}
.chapter-xl{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.32em;text-align:center;color:var(--ink);
  font-size:clamp(1.3rem,2.9vw,2.6rem);line-height:1.2;margin:0 auto clamp(30px,4vw,56px);padding-left:.32em}

/* --- portada --- */
.hero-copy{width:min(54vw,780px)}
.hero-copy .eyebrow{font-size:clamp(.74rem,.92vw,.9rem);letter-spacing:.3em;margin-bottom:16px;line-height:1.6}
.eyebrow-line{display:block;height:1px;width:100%;margin:0 0 30px;
  background:linear-gradient(90deg,var(--champ) 0%,var(--champ-light) 40%,rgba(176,141,87,.35) 80%,transparent 100%);
  background-size:200% 100%;background-position:100% 0;transform:scaleX(0);transform-origin:left}
.hero.ready .eyebrow-line{animation:ulSweep 1.2s cubic-bezier(.65,0,.35,1) .35s forwards}
.hero-copy .btn-line{color:var(--champ-light);font-size:.8rem;letter-spacing:.38em}
.hero-copy .btn-line::before{background:var(--champ);width:60px}
.scroll-hint{color:var(--champ-light);font-size:.72rem;letter-spacing:.42em;gap:12px}
.scroll-line{width:1px;height:64px;background:linear-gradient(var(--champ),transparent)}
.skip{font-size:.72rem;color:var(--ink-2);padding:12px 4px}
.skip:focus-visible{color:var(--ink)}

/* --- navegación y selector de idioma --- */
.nav-right{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px)}
.nav-right .back{position:static;padding:10px 0}
.lang{display:flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.22em}
.lang a{padding:8px 2px;opacity:.55;border-bottom:1px solid transparent;transition:opacity .4s,border-color .4s}
.lang a:hover{opacity:1}
.lang a[aria-current="true"]{opacity:1;border-color:var(--champ)}
.lang i{font-style:normal;opacity:.4}
html[data-tone="plaster"] .lang a[aria-current="true"]{border-color:var(--champ-deep)}

/* --- la máscara / la grieta --- */
.surface .chapter-label{display:none}
.surface-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.34em;padding-left:.34em;
  font-size:clamp(1.9rem,5.4vw,5.2rem);line-height:1.1;color:var(--ink);opacity:0;
  text-shadow:0 2px 30px rgba(0,0,0,.75),0 0 80px rgba(0,0,0,.55)}
.surface-title .uline{padding-bottom:.35em}
.surface-title .uline::after{height:1.5px}
.surface-color{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  -webkit-mask-image:radial-gradient(circle at var(--tx,60%) var(--ty,45%),#000 0,#000 calc(var(--tr,0px) * .45),transparent var(--tr,0px));
          mask-image:radial-gradient(circle at var(--tx,60%) var(--ty,45%),#000 0,#000 calc(var(--tr,0px) * .45),transparent var(--tr,0px))}
.surface.lite .surface-color{opacity:1}
.surface.lite .surface-fallback{filter:grayscale(1) brightness(.42) contrast(1.35)}
.surface-svg{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.surface.lite .surface-svg{display:block}

/* --- el caos interno: subtítulos legibles --- */
.layer-word .d{display:inline-block;margin-top:.5em;padding:.14em .75em .22em;border-radius:2px;
  background:rgba(8,7,6,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#efe9df;font-size:clamp(1.3rem,2.1vw,2.1rem);text-shadow:none;letter-spacing:.02em}
.layer[data-k="1"] .w{color:#f4e2da}
.layer[data-k="1"] .d{color:#f2d4c9}
.layer[data-k="2"] .w{color:#efe8dc}
.layer[data-k="2"] .d{color:#e8e0d0}

/* --- yo traduzco esa complejidad --- */
.translate-a{text-decoration:none}

/* --- el proceso: champán --- */
.steps-num span{-webkit-text-stroke:1.2px var(--champ-deep)}
.steps-num span.on{color:rgba(176,141,87,.12)}
.steps-bar b{background:var(--champ)}
.step-n{color:var(--champ-deep);font-weight:500}
.step.on{border-top-color:var(--champ)}
.step.on h3{color:var(--champ-deep)}

/* --- colección --- */
.micro{font-size:.76rem;letter-spacing:.3em}
.concept-note{font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;color:rgba(239,233,223,.72);pointer-events:none}
.viewer-concept{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 14px 10px;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .8s var(--ease)}
.viewer.espacio.concept .viewer-concept{opacity:1}

/* --- formato monumental --- */
.lobby-copy{padding-top:60px}
.lobby-copy::before{content:"";position:absolute;left:50%;top:-10%;width:min(1000px,120vw);height:130%;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 55%,rgba(0,0,0,.62),transparent 75%);pointer-events:none}
.lobby-title{color:var(--ink);margin-bottom:22px;text-shadow:0 2px 24px rgba(0,0,0,.85)}
.lobby-copy .prose-l{transition:opacity .4s}
.lobby-note{position:absolute;right:var(--gutter);bottom:20px;margin:0;opacity:0;transition:opacity .8s;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.lobby-note.on{opacity:1}

/* --- el artista: nombre en lugar de la firma gráfica --- */
.artist-hero .ph-frame{position:absolute;left:50%;top:50%;width:max(100%,calc(100svh * 1400 / 931));aspect-ratio:1400/931;translate:-50% -50%;transform:scale(1.06);transition:transform 3.2s var(--ease)}
.artist-hero.in .ph-frame{transform:none}
.artist-hero .ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;filter:brightness(.55)}
.sig-veil{position:absolute;left:33%;top:1%;width:38%;height:25%;
  -webkit-backdrop-filter:blur(16px) brightness(.92);backdrop-filter:blur(16px) brightness(.92);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.ph-name{position:absolute;left:51.5%;top:14%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem,2.6vw,2.7rem);letter-spacing:.06em;color:var(--ink);
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.ph-name::after{content:"";display:block;width:46%;height:1px;margin:.35em auto 0;background:linear-gradient(90deg,transparent,var(--champ),transparent)}
.artist-hero .page-hero-copy{z-index:2}

/* --- 404 --- */
.notfound{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.notfound img{width:110px;margin-bottom:34px}
.notfound h1{font-weight:300;font-size:clamp(2.2rem,5vw,4rem);line-height:1.1}
.notfound p{color:var(--ink-2);margin-top:18px}
.notfound nav{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;font-style:italic}

@media (max-width:760px){
  .nav-right{gap:16px}
  .lang{font-size:.6rem;gap:.4em}
  .nav-toggle-txt{display:none}
  .page .nav-right .back{font-size:.54rem;letter-spacing:.2em}
  .hero-copy{width:auto}
  .hero-copy .eyebrow{font-size:.68rem;letter-spacing:.22em}
  .eyebrow-line{margin-bottom:20px}
  .surface-title{font-size:clamp(1.5rem,8vw,2.3rem);letter-spacing:.24em;padding-left:.24em}
  .chapter-xl{font-size:clamp(1.15rem,5.4vw,1.6rem);letter-spacing:.24em}
  .layer-word .d{font-size:1.2rem}
  .lobby-note{left:var(--gutter);right:var(--gutter);text-align:center;font-size:.52rem}
  .ph-name{font-size:1.5rem;top:13%}
}

@media (prefers-reduced-motion:reduce){
  .uline::after,.eyebrow-line{transform:none!important;background-position:0 0!important;animation:none!important}
  .surface-title{position:static;opacity:1!important;transform:none;margin:60px 0 30px;text-align:left;padding-left:0}
  .surface .sticky{padding-top:10vh}
  .surface-stage.rm-static{position:relative!important;opacity:1!important;height:70svh;margin:0 calc(var(--gutter) * -1)}
  .surface-svg{display:block}
  .surface-color{opacity:1}
  .lobby-note{opacity:1}
  .artist-hero .ph-frame{transform:none}
}
@media (max-aspect-ratio:1/1){ .hero-copy{width:auto} }
/* v2 · ajustes finales tras las pruebas */
.layer-word::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:170%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(6,5,4,.55),transparent 72%)}
.layer-word{isolation:isolate}
@media (max-width:760px){
  .hero.ready .hero-stage{transform:translateY(-24svh)}
  .hero-copy{bottom:5svh}
  .hero-title{font-size:clamp(1.75rem,7.4vw,2.4rem)}
}

html.is-intro .skip{opacity:1;transition:none}
/* final · prueba de acento rojo mínimo en Formato Monumental (el título sigue en blanco) */
.lobby-title .uline::after{background-image:linear-gradient(90deg,transparent 0%,var(--champ) 9%,var(--champ-light) 22%,#8E1B1B 23.6%,#8E1B1B 26.4%,var(--champ-light) 28%,var(--champ) 41%,transparent 50%,transparent 100%)}
@media (max-width:760px){ .lobby-copy::before{background:radial-gradient(ellipse 50% 50% at 50% 55%,rgba(0,0,0,.74),transparent 78%)} }
/* final · equilibrio tipográfico en portada */
.hero-copy .eyebrow{text-wrap:balance}
@media (min-width:1600px) and (min-aspect-ratio:1/1){ .hero-copy{width:min(54vw,940px)} .hero-title{font-size:3.35rem} }

/* =========================================================================
   ACCESO PRIVADO — retrato + símbolo (composición editorial)
   ========================================================================= */
.contact{padding-top:clamp(90px,14vh,150px)}
.contact-duo{display:flex;align-items:center;justify-content:center;gap:clamp(48px,9vw,150px);margin:0 auto;padding:0 var(--gutter)}
.contact-duo .contact-logo{position:static;translate:none;width:clamp(120px,11vw,180px);flex:none;opacity:.95}
.contact-portrait{margin:0;flex:none;height:clamp(420px,66vh,620px);aspect-ratio:853/1844;position:relative}
.contact-portrait img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 24%,#000 76%,rgba(0,0,0,.55) 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 24%,#000 76%,rgba(0,0,0,.55) 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
          mask-composite:intersect;
  opacity:0;transform:translateY(18px);transition:opacity 1.6s var(--ease),transform 1.8s var(--ease)}
.contact-portrait.in img{opacity:1;transform:none}
.contact .chapter-label{margin-top:clamp(70px,10vh,120px)}
@media (max-width:760px){
  .contact-duo{flex-direction:column;gap:44px}
  .contact-portrait{height:auto;width:58vw;max-width:300px}
  .contact-duo .contact-logo{width:96px}
}
@media (prefers-reduced-motion:reduce){ .contact-portrait img{opacity:1;transform:none} }
.contact-portrait{isolation:isolate}
.contact-portrait::before{content:"";position:absolute;left:50%;top:50%;width:260%;height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,#030303 0%,#030303 32%,rgba(3,3,3,.75) 52%,transparent 74%)}

/* =========================================================================
   RONDA FINAL DE AJUSTES RESPONSIVE (móvil · tableta)
   ========================================================================= */

/* 5 · Retrato del artista: mayor presencia, centrado, sin logo (todas las pantallas) */
.formats{padding-bottom:clamp(48px,7vh,90px)}
.contact{padding-top:clamp(24px,4vh,56px)}
.contact-duo{gap:0}
.contact-portrait{height:clamp(560px,84vh,880px)}
.contact .chapter-label{margin-top:clamp(56px,8vh,96px)}

/* 8 · Indicador táctil «Desliza» (oculto en escritorio) */
.swipe-hint{display:none}
@media (hover:none) and (pointer:coarse){
  .hero-copy .btn-line,.scroll-hint{display:none}
  .swipe-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
    font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--champ-light);
    opacity:0;transition:opacity 1.2s var(--ease)}
  .hero.ready .swipe-hint{opacity:.9}
  .swipe-hint svg{animation:swipeNudge 2.8s cubic-bezier(.45,0,.25,1) infinite}
}
@keyframes swipeNudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

/* 1 · Caos interno: sin pantalla negra antes de la primera obra (vertical) */
@media (max-aspect-ratio:1/1){
  .chaos-intro{padding-bottom:clamp(36px,6vh,64px)}
}

/* 3 · Para quién: todos los perfiles visibles en vertical (móvil y tableta) */
@media (max-width:1024px) and (max-aspect-ratio:1/1), (max-width:760px){
  .who-row{display:grid;grid-template-columns:1fr;gap:clamp(56px,8vh,90px);overflow:visible;scroll-snap-type:none;padding:0 var(--gutter);max-width:560px}
  .who-card{flex:none;margin-top:0!important}
  .who-card h3{font-size:.76rem}
}

/* 2 · El proceso: números y títulos con más presencia */
@media (max-width:1024px){
  .step h3{font-size:.88rem;letter-spacing:.24em;color:var(--dark)}
  .step.on h3{color:var(--champ-deep)}
}
@media (max-width:760px){
  .step-n{font-family:var(--serif);font-weight:300;font-size:3.1rem;line-height:1;letter-spacing:-.02em;color:var(--champ-deep);margin-bottom:14px}
  .step h3{font-size:.9rem;letter-spacing:.2em;line-height:1.5;margin-bottom:12px}
}

/* 7 · Portada en móvil: legibilidad y aire */
@media (max-width:760px){
  .hero-copy{bottom:calc(env(safe-area-inset-bottom,0px) + 92px);text-align:center}
  .hero-copy .eyebrow{font-size:.76rem;letter-spacing:.24em;margin-bottom:18px;line-height:1.7}
  .eyebrow-line{margin-bottom:28px}
  .hero-title .ln.sub{font-size:.6em;line-height:1.55}
  .hero-title .ln:nth-child(3){margin-top:1.3em}
  .hero.ready .hero-stage{transform:translateY(-27svh)}
}

/* 4 · Movimiento reducido */
@media (prefers-reduced-motion:reduce){ .swipe-hint svg{animation:none} }
@media (max-width:760px){
  .contact-portrait{height:auto;width:80vw;max-width:440px}
}

/* =========================================================================
   RONDA TÉCNICA · móvil, tableta y Artista
   ========================================================================= */

/* Artista · símbolo en rotación continua (todas las pantallas). El logo de la cabecera no se anima. */
.symbol-spin{display:inline-block;line-height:0;animation:symbolSpin 30s linear infinite;will-change:transform}
@keyframes symbolSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.block-sub{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.02rem;line-height:1.4;letter-spacing:.02em;text-transform:none;color:var(--ink-2)}

/* Visor · «En espacio» nunca en negro: la obra sigue visible hasta que la imagen de espacio ha cargado */
.viewer.espacio .viewer-mock:not(.ok){opacity:0}

/* Toques: respuesta inmediata, sin espera de doble toque */
a,button,[role="button"],.work,.lang a{touch-action:manipulation}

/* Menú siempre por encima de todo el contenido (obras, lienzos WebGL); la cabecera queda encima para poder cerrarlo */
.menu{z-index:88;isolation:isolate;transform:translateZ(0)}
html.menu-open .nav{z-index:89}

/* Táctil · los estados :hover no deben quedar «pegados» tras un toque */
@media (hover:none){
  .menu-links:hover a span{opacity:1}
  .menu-links a:hover span{font-style:normal}
  .nav-mark:hover .nav-logo{transform:none}
  .work:hover .work-plus{opacity:0;transform:none}
}

/* Tableta · la máscara necesitaba demasiado recorrido: misma secuencia, menos scroll */
@media (hover:none) and (min-width:761px){
  .surface{height:640svh}
}

/* Móvil */
@media (max-width:760px){
  /* 1.1 · manos: estado final algo más grande y extendido hacia abajo (la animación no cambia) */
  .hero.ready .hero-stage{transform:translateY(-22svh) scale(1.08);transform-origin:50% 0}
  /* 1.3 · sin separador horizontal bajo los datos de cada obra */
  .cap .rule{display:none}
  /* 1.4 · formato monumental: estado final ligeramente menor para ver la obra y su marco completos */
  .lobby-frame{width:min(100svh,155vw)}
  /* 1.6 · idioma y «Volver al inicio» algo más legibles, con área táctil cómoda */
  .nav-name{white-space:nowrap}
  .nav-right{gap:10px}
  .lang{font-size:clamp(.6rem,2.75vw,.7rem);gap:.45em}
  .lang a{padding:12px 3px;min-height:40px;display:inline-flex;align-items:center}
  .page .nav-right .back{font-size:clamp(.54rem,2.45vw,.62rem);letter-spacing:.14em;padding:12px 0;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){ .symbol-spin{animation:none} }

/* Menú abierto: fondo sólido y colores propios, legibles sobre cualquier sección (también las de fondo claro) */
.menu{background:var(--deep);color:var(--ink)}
html.menu-open[data-tone] .nav{color:var(--ink)}
html.menu-open[data-tone] .nav::before{background:linear-gradient(rgba(5,5,5,.9),rgba(5,5,5,0))}
html.menu-open[data-tone] .lang a[aria-current="true"]{border-color:var(--champ)}

/* =========================================================================
   TABLETA (táctil ≥ 761 px de ancho y ≥ 600 px de alto — no afecta a PC ni a móvil)
   Máscaras de una sola capa y sin propiedades animadas registradas: algunas versiones
   de iPadOS dejaban invisibles las manos, el logotipo, el lobby, la foto y el símbolo.
   ========================================================================= */
@media (hover:none) and (min-width:761px) and (min-height:600px){
  /* manos (intro y portada): aparecen por opacidad/escala, sin la máscara animada */
  .hands{-webkit-mask-image:none;mask-image:none}
  .hands-img{
    -webkit-mask-image:radial-gradient(ellipse 50% 56% at 46% 48%,#000 52%,rgba(0,0,0,.5) 74%,transparent 100%);
            mask-image:radial-gradient(ellipse 50% 56% at 46% 48%,#000 52%,rgba(0,0,0,.5) 74%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  /* logotipo de la intro y símbolo de Artista: visibles; conservan su aparición y la rotación */
  .birth-logo,.symbol img{-webkit-mask-image:none;mask-image:none}
  /* formato monumental: imagen del lobby con bordes fundidos (una capa) */
  .lobby-frame img{
    -webkit-mask-image:radial-gradient(ellipse 54% 56% at 50% 48%,#000 68%,transparent 100%);
            mask-image:radial-gradient(ellipse 54% 56% at 50% 48%,#000 68%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  /* fotografía de contacto (una capa; los laterales se funden con el halo oscuro existente) */
  .contact-portrait img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 96%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* TABLETA · Artista: la fotografía de las manos se amplía hacia abajo (anclada arriba), con presencia similar a móvil */
@media (hover:none) and (min-width:761px) and (min-height:600px){
  .artist-hero .ph-frame{top:0;translate:-50% 0;transform-origin:50% 0;width:max(100%,calc(100svh * 1400 / 931 * 1.14))}
}

/* MÓVIL · páginas interiores (Proyecto, Artista, Galería): ES · EN debajo de «Volver al inicio» */
@media (max-width:760px){
  .page .nav-right{flex-direction:column;align-items:flex-end;justify-content:center;gap:4px}
  .page .nav-right .back{order:1;padding:6px 0 0;line-height:1.4}
  .page .nav-right .lang{order:2}
  .page .nav-right .lang a{padding:5px 3px;min-height:0}
}