/* Downstream v3: la web es el río. Hero a sangre, capítulos a sangre, un trazo dorado que baja con el scroll. */
:root{
  color-scheme:light;
  --deep:#1E2619; --moss:#536A4F; --earth:#795340; --sand:#D5C2A0; --gold:#C1A43D; --cream:#F5EECC; --paper:#EFE8D2; --ink:#1F2216; --ink-2:#4A4B38;
  --rule:rgba(245,238,204,.28);
  --sans:"Albert Sans","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --hdr:64px; --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--cream);font:400 18px/1.55 var(--sans)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mark .s{fill:none;stroke:var(--mf);stroke-width:2;stroke-linecap:round}.mark .n{fill:var(--gold)}

/* ---------- preloader: el río se dibuja mientras carga ---------- */
.pre{position:fixed;inset:0;z-index:60;background:var(--deep);display:grid;place-items:center;transition:opacity .6s ease,visibility .6s}
.pre.done{opacity:0;visibility:hidden}
.pre svg{width:min(60vw,560px);height:auto;overflow:visible}
.pre path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.pre p{position:absolute;bottom:calc(36px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:var(--sand)}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- header modular sobre la imagen ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s}
.hdr::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(180deg,rgba(30,38,25,.7),rgba(30,38,25,0));pointer-events:none;z-index:-1;transition:opacity .3s}
.hdr.solid{background:var(--deep)}.hdr.solid::before{opacity:0}
.hdr-in{display:grid;grid-template-columns:var(--hdr) auto 1fr auto;height:var(--hdr);border-bottom:1px solid var(--rule)}
.hdr-in>*{border-right:1px solid var(--rule);min-width:0}
.logo{display:flex;align-items:center;justify-content:center;padding:11px;--mf:var(--cream);--mg:transparent}
.logo svg{width:100%;height:100%}
.word{display:grid;align-content:center;padding:0 26px 0 22px;text-decoration:none}
.word b{font:800 28px/1 var(--sans);letter-spacing:.14em;margin-right:-.14em}
.word small{font:500 9.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--sand);white-space:nowrap}
.nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:100%}
.nav li{border-right:1px solid var(--rule);min-width:0}.nav li:last-child{border-right:0}
.nav a{display:flex;align-items:flex-end;height:100%;padding:0 16px 13px;font:500 13px/1.2 var(--sans);text-decoration:none;transition:background .2s}
.nav a:hover{background:rgba(245,238,204,.1)}
.cta-h{display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--gold);color:var(--ink);font:700 14px/1 var(--sans);text-decoration:none;border-right:0!important}
.menu{display:none;background:none;border:0;color:var(--cream);font:700 14px var(--sans);padding:0 20px;cursor:pointer}
.nav-contact{display:none}

/* ---------- capítulo base: imagen a sangre ---------- */
.ch{position:relative;min-height:100svh;display:grid;overflow:hidden;isolation:isolate}
.ch>picture,.ch>.bg{position:absolute;inset:0;z-index:-2}
.ch>picture img,.ch>.bg img{width:100%;height:100%;object-fit:cover}
.ch::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--shade,linear-gradient(180deg,rgba(30,38,25,.15) 0%,rgba(30,38,25,.05) 40%,rgba(30,38,25,.85) 100%))}
.ch .in{align-self:end;padding:calc(var(--hdr) + 40px) var(--gut) clamp(40px,7vh,88px) calc(var(--gut) + 56px);display:grid;gap:22px;max-width:1500px}
.idx{display:flex;gap:14px;align-items:center;color:var(--sand)}
.idx::before{content:"";width:32px;height:1px;background:var(--gold)}
.h-xl{margin:0;font:800 clamp(52px,9.2vw,168px)/.88 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.h-l{margin:0;font:800 clamp(42px,6.4vw,112px)/.9 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.h-xl em,.h-l em{font-style:normal;color:var(--gold)}
.lede{margin:0;max-width:40ch;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:#EFE6C8}
.btn{display:inline-flex;align-items:center;gap:18px;padding:20px 26px;background:var(--gold);color:var(--ink);font:700 16px/1 var(--sans);text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{background:#D3B64C;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--cream)}
.btn.ghost:hover{background:rgba(245,238,204,.12)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero .h-xl{max-width:11ch}
.cue{position:absolute;right:var(--gut);bottom:clamp(40px,7vh,88px);color:var(--sand);writing-mode:vertical-rl}

/* el río dorado: una línea fija en el carril izquierdo que se llena con el scroll */
.river{position:fixed;left:calc(var(--gut) + 20px);top:0;bottom:0;width:2px;z-index:30;pointer-events:none;background:rgba(245,238,204,.18)}
.river i{position:absolute;left:0;top:0;width:2px;height:calc(var(--p,0) * 100%);background:var(--gold);box-shadow:0 0 12px rgba(193,164,61,.6)}
.river b{position:absolute;left:-5px;top:calc(var(--p,0) * 100% - 6px);width:12px;height:12px;border-radius:50%;background:var(--gold)}

/* 01 river: grilla cartográfica sobre la aérea */
.grid-ov{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(245,238,204,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(245,238,204,.22) 1px,transparent 1px);background-size:120px 120px;mix-blend-mode:overlay}
.coord{position:absolute;color:var(--cream);opacity:.85}
.stat{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.stat b{font:800 clamp(96px,16vw,280px)/.78 var(--sans);letter-spacing:-.06em;color:var(--gold)}
.stat span{max-width:22ch;color:#EFE6C8;padding-bottom:10px}

/* 02 miner: imagen grande y texto a la derecha */
.split{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--deep)}
.split picture,.split picture img{width:100%;height:100%;object-fit:cover}
.split .txt{padding:calc(var(--hdr) + 48px) var(--gut) 72px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px;border-left:1px solid var(--rule)}

/* 03 weigh & test: cifras gigantes sobre el espécimen */
.assay{--shade:linear-gradient(90deg,rgba(220,203,170,.94) 0%,rgba(220,203,170,.82) 34%,rgba(220,203,170,0) 58%)}
.assay{color:var(--ink)}
.assay .in{align-self:center;max-width:none}
.assay .idx{color:var(--earth)}
.ledger{display:grid;gap:4px}
.ledger div{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.ledger b{font:800 clamp(64px,10vw,180px)/.86 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ledger span{font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--earth)}
.assay .lede{color:var(--ink-2)}
.assay .btn.ghost{color:var(--ink);border-color:var(--ink)}

/* 04 sell: pasos en papel */
.paper{background:var(--paper);color:var(--ink);padding:clamp(80px,12vh,140px) var(--gut) clamp(80px,12vh,140px) calc(var(--gut) + 56px)}
.paper .idx{color:var(--moss)}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(31,34,22,.35)}
.steps li{padding:22px 22px 0 0;display:grid;gap:14px;align-content:start}
.steps li b{font:800 clamp(48px,6vw,96px)/.9 var(--sans);letter-spacing:-.04em;color:var(--moss)}
.steps li span{font:700 20px/1.2 var(--sans)}
.steps li small{font-size:16px;color:var(--ink-2)}
.paper .note{margin-top:44px;max-width:60ch;color:var(--ink-2)}
.paper .btns{margin-top:36px}
.paper .btn.ghost{color:var(--ink);border-color:var(--ink)}

/* 05 hubs: mapa grande */
.hubs{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0;border-top:1px solid rgba(31,34,22,.25)}
.hubs .txt{padding:clamp(80px,12vh,140px) var(--gut) 80px calc(var(--gut) + 56px);display:flex;flex-direction:column;gap:24px}
.hubs .idx{color:var(--moss)}
.hubs .lede{color:var(--ink-2)}
.hubs .mapbox{position:relative;border-left:1px solid rgba(31,34,22,.25);background-image:linear-gradient(rgba(31,34,22,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(31,34,22,.12) 1px,transparent 1px);background-size:64px 64px;min-height:560px}
.pngmap{position:absolute;inset:8% 6%;width:88%;height:84%}
.pngmap path{fill:rgba(83,106,79,.22);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.pngmap .rg-highlands{fill:rgba(83,106,79,.42)}.pngmap .rg-islands{fill:rgba(193,164,61,.3)}.pngmap .rg-southern{fill:rgba(121,83,64,.2)}
.pngmap circle{fill:var(--gold);stroke:var(--paper);stroke-width:3}
.pngmap text{font:700 18px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px}

/* 06 people: tarjeta Pre-Loved sobre la imagen */
.pl{justify-self:start;background:var(--sand);color:var(--ink);padding:26px 28px;max-width:420px;display:grid;gap:8px}
.pl h3{margin:0;font:800 30px/1 var(--sans);letter-spacing:-.02em}
.pl p{margin:0;font-size:16px}
.pl a{font-weight:700}

/* contacto */
.contact{background:var(--deep);padding:clamp(100px,16vh,180px) var(--gut) 80px calc(var(--gut) + 56px);display:grid;gap:36px}
.contact .h-xl{max-width:10ch}
.paths{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--sand);font-size:17px}
.ftr{border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:28px var(--gut) calc(28px + env(safe-area-inset-bottom,0px)) calc(var(--gut) + 56px);font-size:15px;color:var(--sand)}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ftr a{text-decoration:none}.ftr a:hover{text-decoration:underline}

/* aparición suave (visible si no hay JS) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.js .hero>picture,.js .hero .in,.js .ch>picture img,.js .split picture img{clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important}.contact .end path{stroke-dashoffset:0}.pre{display:none}.js .rv{opacity:1;transform:none;transition:none}.btn{transition:none}}

/* gancho: el hero se abre desde la ventana de la batea cuando termina el preloader */
.js .hero>picture{clip-path:inset(26% 30% 26% 30%);transform:scale(1.18);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1),transform 2.4s cubic-bezier(.2,.7,.2,1)}
.js.ready .hero>picture{clip-path:inset(0);transform:none}
.js .hero .in{opacity:0;transform:translateY(30px);transition:opacity 1s .9s,transform 1.2s .9s cubic-bezier(.2,.7,.2,1)}
.js.ready .hero .in{opacity:1;transform:none}
/* imágenes: entran con un leve zoom out */
.js .ch:not(.hero)>picture img,.js .split picture img{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .ch.seen>picture img,.js .split.seen picture img{transform:none}
/* grano común para unificar el grading de toda la serie */
.ch::before,.split::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ch>.in,.ch>.coord{position:relative;z-index:1}.ch>.coord{position:absolute}
.split{position:relative}
.river{transition:opacity .4s}.river.off{opacity:0}
.nav a{position:relative}.nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after{transform:none}
/* 01: la cifra manda */
#about .h-l{font-size:clamp(30px,3.4vw,58px);max-width:16ch}
/* 03: las cifras mandan */
.assay h2.h-l{font-size:clamp(30px,3.2vw,52px)}
.ledger{gap:18px}.ledger div{flex-direction:column;align-items:flex-start;gap:6px}
/* 04: los pasos como un tramo de río */
.steps{border-top:0;position:relative;padding-top:34px}
.steps::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--gold)}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-32px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--gold)}
.steps li:last-child::before{background:var(--gold)}
.steps li b{font-size:clamp(20px,1.6vw,26px);color:var(--earth);letter-spacing:0}
.steps li span{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
/* quiebre de color entre 06 y 07 */
.brk{background:var(--gold);color:var(--ink);min-height:70svh;display:grid;align-content:center;padding:clamp(80px,12vh,140px) var(--gut) clamp(80px,12vh,140px) calc(var(--gut) + 56px);overflow:hidden}
.brk p{margin:0;font:800 clamp(56px,11vw,220px)/.86 var(--sans);letter-spacing:-.055em}
.brk p span{display:block;color:var(--cream)}
/* cierre: el río termina en el contacto */
.contact{position:relative;overflow:hidden}
.contact .end{position:absolute;right:-4vw;top:50%;width:min(52vw,760px);transform:translateY(-50%);pointer-events:none}
.contact .end path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1)}
.contact.seen .end path{stroke-dashoffset:0}
.pl .mono{font:700 13px/1.2 var(--sans);letter-spacing:.08em}

/* QA: contraste */
.ch:not(.assay) .h-xl em{color:#E2C760}
.ch:not(.assay) .idx{color:var(--cream);font-size:13px}
.cue{color:var(--cream);font-size:13px}
.assay .idx,.ledger span{color:#3E3A26}
.ledger .ex{font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#3E3A26}
.split picture img{object-position:55% 50%}
.no-scroll{overflow:hidden}

/* ===== v4: el río es el fondo de todo el sitio ===== */
:root{--rim:clamp(18px,2.6vw,40px)}
html,body{overflow-x:clip}body{position:relative}
.ftr{background:var(--deep)}
.split,.contact,.ch:not(.hero){background:var(--deep)}
/* ventanas al río */
.hero{background:var(--deep)}.hero>picture img{object-position:50% 40%}
.hero::after{background:linear-gradient(90deg,rgba(30,38,25,.7) 0%,rgba(30,38,25,.25) 55%,rgba(30,38,25,0) 80%),linear-gradient(180deg,rgba(30,38,25,.55) 0%,rgba(30,38,25,0) 25%,rgba(30,38,25,0) 55%,rgba(30,38,25,.8) 100%)}
.brk{background:transparent;color:var(--cream);min-height:90svh;position:relative;isolation:isolate}
.brk>picture{position:absolute;inset:0;z-index:-2}.brk>picture img{width:100%;height:100%;object-fit:cover}
.brk::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 50%,rgba(30,38,25,.7),rgba(30,38,25,.1) 70%)}
.brk p span{color:var(--gold)}
/* la línea del río nace del marco del logo */
.river{left:calc(var(--hdr) - 1px);width:var(--rw,2px);background:rgba(245,238,204,.45)}
.river i{width:100%}
.river b{left:calc(50% - 6px)}
:root{--pl:calc(var(--hdr) + clamp(22px,2.6vw,44px))}
.ch .in,.paper,.hubs .txt,.contact,.ftr,.brk{padding-left:var(--pl)!important}
/* botones: cuadrados, sin flechas, el oro sube como el nivel del agua */
.btn{position:relative;overflow:hidden;isolation:isolate;gap:0;padding:20px 30px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);letter-spacing:.01em;transition:color .45s cubic-bezier(.7,0,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);transform:translateY(101%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn .t{display:block;position:relative;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn .t::after{content:attr(data-t);position:absolute;left:0;top:100%;padding-top:20px}
.btn{line-height:1;height:58px;align-items:flex-start;padding-top:21px}
.btn:hover{transform:none;background:var(--gold)}
.btn:hover::before{transform:none}
.btn:hover .t{transform:translateY(calc(-100% - 20px))}
.btn.ghost{background:transparent;border-color:rgba(245,238,204,.6);color:var(--cream)}
.btn.ghost::before{background:var(--gold)}
.btn.ghost:hover{color:var(--ink);background:transparent}
.paper .btn.ghost,.assay .btn.ghost{color:var(--ink);border-color:var(--ink)}
/* eyebrows: claqueta chica en la esquina superior derecha de cada sección */
.ch,.split,.paper,.hubs,.contact,.brk{position:relative}
.idx{position:absolute;z-index:2;margin:0;top:calc(var(--hdr) + 22px);right:var(--gut);font:600 12px/1.3 var(--sans)!important;letter-spacing:.14em!important;text-transform:uppercase;color:inherit!important;opacity:.75;text-align:right}
.idx::before{display:none}
.split .idx,.hubs .idx{top:28px}
.paper .idx,.contact .idx{top:32px}
/* 06 centrado con parallax suave */
#responsible .in{justify-items:center;text-align:center;align-self:center;margin-inline:auto;max-width:1100px}
#responsible .h-xl{max-width:12ch!important}
#responsible .lede{max-width:46ch}
@supports (animation-timeline:view()){
 .ch>picture img{animation:plx linear both;animation-timeline:view();animation-range:cover}
 .ch>.in{animation:plxT linear both;animation-timeline:view();animation-range:cover}
 @keyframes plx{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
 @keyframes plxT{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
}

/* ===== 03 HUD: la pepita al centro y los datos salen en líneas ===== */
.hud{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;overflow:hidden;isolation:isolate;color:var(--ink);background:var(--sand);padding:calc(var(--hdr) + 56px) var(--gut) clamp(40px,7vh,80px)}
.hud>picture{position:absolute;inset:0;z-index:-2}
.hud>picture img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hud::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 22% 30% at 50% 50%,rgba(226,211,180,0) 0%,rgba(226,211,180,0) 60%,rgba(226,211,180,.5) 100%),linear-gradient(90deg,rgba(226,211,180,.82),rgba(226,211,180,.35) 26%,rgba(226,211,180,0) 38%,rgba(226,211,180,0) 62%,rgba(226,211,180,.35) 74%,rgba(226,211,180,.82)),linear-gradient(180deg,rgba(226,211,180,.75),rgba(226,211,180,0) 24%,rgba(226,211,180,0) 70%,rgba(226,211,180,.92) 88%)}
.hud{--tsh:0 0 14px rgba(232,218,188,1),0 0 3px rgba(232,218,188,1)}
.hud-t,.co,.hud-b,.hud-m{text-shadow:var(--tsh)}
.hud-t{text-align:center;max-width:22ch;font-size:clamp(36px,4.4vw,72px)!important}
.stage{position:absolute;left:50%;top:50%;width:min(1120px,86vw);height:400px;transform:translate(-50%,-50%)}
.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lines path{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.lines .brk-c path,.lines .brk-c{stroke-width:2}
.lines .cross{stroke-width:1;opacity:.5}
.lines .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1)}
.hud.seen .lines .ln{stroke-dashoffset:0}
.lines .ln:nth-of-type(2){transition-delay:.15s}.lines .ln:nth-of-type(3){transition-delay:.3s}.lines .ln:nth-of-type(4){transition-delay:.45s}
.brk-c{opacity:0;transform-origin:500px 210px;transform:scale(1.3);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.hud.seen .brk-c{opacity:1;transform:none}
.nd{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ink);opacity:0;transition:opacity .3s 1s}
.hud.seen .nd{opacity:1}
.co{position:absolute;display:grid;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .6s 1.05s,transform .6s 1.05s cubic-bezier(.2,.7,.2,1)}
.hud.seen .co{opacity:1;transform:none}
.co span{font:700 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3E3A26}
.co b{font:800 clamp(34px,4vw,64px)/.9 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.co b.sm{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em;line-height:1.1;max-width:13ch}
.co.tl{left:6%;bottom:calc(90.5% + 14px)}.co.tr{right:6%;bottom:calc(90.5% + 14px);text-align:right;justify-items:end}
.co.bl{left:6%;top:calc(90.5% + 14px)}.co.br{right:6%;top:calc(90.5% + 14px);text-align:right;justify-items:end}
.hud-b{align-self:end;text-align:center;display:grid;gap:10px;justify-items:center}
.hud-b .ex{margin:0;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3E3A26}
.hud-b .lede{color:var(--ink);max-width:48ch;font-weight:500}
.hud .idx{color:var(--ink)!important}

/* datos de la pepita en móvil */
.hud-m{display:none;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:14px;align-self:end}
.hud-m div{display:grid;gap:4px;border-top:1px solid var(--ink);padding-top:8px}
.hud-m span{font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#3E3A26}
.hud-m b{font:800 34px/.95 var(--sans);letter-spacing:-.04em}.hud-m b.sm{font-size:17px;letter-spacing:0;line-height:1.15}


/* ===== 04 sell: capítulos fijados, 01/05, el marco cambia con el scroll ===== */
/* parallax de las ventanas al río */
.hero>picture,.brk>picture{inset:-12% 0!important;will-change:transform}
.hero>picture img,.brk>picture img{animation:none!important}

/* 05 hubs: imagen satelital real con nodos */
.hubs{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important;background:var(--deep)!important;color:var(--cream)!important;border-top:0!important;align-items:center}
.hubs .lede{color:#EFE6C8!important}.hubs .idx{color:var(--cream)!important}
.hubs .mapbox{grid-column:1;grid-row:1;border-left:0!important;background:none!important;min-height:0!important;position:relative;aspect-ratio:2400/1680;align-self:center;margin:clamp(40px,8vh,90px) 0 clamp(40px,8vh,90px) var(--pl)}
.hubs .txt{grid-column:2;grid-row:1;padding-left:0!important;padding-right:var(--gut)}
.hubs .mapbox picture,.hubs .mapbox img{width:100%;height:100%;object-fit:cover;display:block}
.pin{position:absolute;display:flex;align-items:center;gap:10px;font:700 clamp(12px,1vw,15px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);transform:translate(-5px,-50%);white-space:nowrap}
.pin i{width:10px;height:10px;background:var(--gold);box-shadow:0 0 0 4px rgba(193,164,61,.25);flex:none}
.pin.l{flex-direction:row-reverse;transform:translate(calc(-100% + 5px),-50%)}
.pin::after{content:"";position:absolute;left:5px;top:50%;width:1px;height:0}
.credit{position:absolute;right:10px;bottom:8px;font:500 10px/1 var(--sans);letter-spacing:.06em;color:rgba(245,238,204,.55)}

/* 07 people: banda Pre-Loved PNG */
#people{grid-template-rows:1fr auto}
#people .in{padding-bottom:40px}
#people>picture img{object-position:70% 50%}
.plb{position:relative;z-index:1;display:grid;grid-template-columns:clamp(120px,14vw,200px) auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(20px,3vw,48px);align-items:center;margin:0 var(--gut) clamp(28px,5vh,56px) var(--pl);padding:14px 22px 14px 14px;background:rgba(30,38,25,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(245,238,204,.18);color:var(--cream);text-decoration:none;transition:background .4s}
.plb:hover{background:rgba(30,38,25,.9)}
.plb-img{grid-row:1/3;aspect-ratio:4/3;overflow:hidden}
.plb-img picture,.plb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.plb:hover .plb-img img{transform:scale(1.06)}
.plb-k{grid-column:2;grid-row:1;align-self:end;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.plb-t{grid-column:2;grid-row:2;align-self:start;font:800 clamp(26px,2.6vw,40px)/1 var(--sans);letter-spacing:-.03em;margin-top:6px}
.plb-d{grid-column:3;grid-row:1/3;max-width:46ch;color:#EFE6C8;font-size:16px}
.plb-go{grid-column:4;grid-row:1/3;position:relative;font:700 15px/1 var(--sans);padding:10px 0}
.plb-go::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.plb:hover .plb-go::after{transform:scaleX(.3)}

/* animaciones livianas: títulos que suben por máscara, cortina de imagen, nodos que laten */
.sx{text-wrap:wrap!important}
.js .sx .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .sx .w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*45ms)}
.js .sx.go .w>span{transform:none}
.js .mapbox{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.js .hubs.seen .mapbox{clip-path:inset(0)}
.js .split picture{opacity:0;transition:opacity 1s ease}
.js .split.seen picture{opacity:1}
.pin{opacity:0;transition:opacity .5s}
.hubs.seen .pin{opacity:1}.hubs.seen .pin:nth-of-type(2){transition-delay:1.2s}.hubs.seen .pin:nth-of-type(3){transition-delay:1.35s}.hubs.seen .pin:nth-of-type(4){transition-delay:1.5s}.hubs.seen .pin:nth-of-type(1){transition-delay:1.05s}
.pin i{position:relative}
.pin i::after{content:"";position:absolute;inset:-2px;border:1px solid var(--gold);animation:ping 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.js .sx .w>span{transform:none!important;transition:none}.js .mapbox{clip-path:none!important}.js .split picture{opacity:1!important}.pin{opacity:1}.pin i::after{animation:none}}

/* 04: iconos geométricos en vez de fotos */

/* 05 hubs v3: satélite fijado al scroll; se corre a la izquierda y destapa las islas */
section#hubs{position:relative;height:200svh;display:block!important;background:var(--deep)}
.hubs-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr;align-items:center;overflow:hidden;isolation:isolate}
#hubs .mapbox{grid-area:auto!important;position:absolute!important;inset:auto!important;left:0!important;top:50%!important;width:max(100%,calc(100svh*1.4286))!important;aspect-ratio:2400/1680;margin:0!important;z-index:-2;transform:translate(var(--tx,0%),-50%) scale(var(--z,1.12));transform-origin:30% 50%;clip-path:none!important;will-change:transform}
.hubs-pin::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(30,38,25,0) 34%,rgba(30,38,25,.5) 60%,rgba(30,38,25,.85) 82%),linear-gradient(180deg,rgba(30,38,25,.55),rgba(30,38,25,0) 18%,rgba(30,38,25,0) 80%,rgba(30,38,25,.6))}
#hubs .txt{grid-column:1!important;grid-row:1!important;justify-self:end;max-width:540px;padding:0 var(--gut) 0 0!important;gap:22px}
#hubs .h-l{font-size:clamp(40px,4.4vw,76px)}
.regions{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(245,238,204,.25)}
.regions li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(245,238,204,.25);font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.regions i{width:8px;height:8px;background:var(--gold)}
#hubs .pin{font-size:clamp(11px,.9vw,14px)}

/* ---------- móvil ---------- */
@media (max-width:980px){
  :root{--gut:20px}
  .cta-h{display:none}
  .hdr-in{grid-template-columns:var(--hdr) auto 1fr auto}
  .word small{display:none}
  .menu{grid-column:4}
  .menu{display:block;border-left:1px solid var(--rule)}
  .hdr.open{background:var(--deep)}
  .river{left:10px}
  .cue{display:none}
  .split{grid-template-columns:1fr}
  .split picture{height:62svh}
  .split .txt{border-left:0;padding-top:72px}
  :root{--rim:14px}
  .idx{top:calc(var(--hdr) + 16px);font-size:11px!important}
  .steps{grid-template-columns:1fr 1fr;gap:0 16px}
  .steps li{padding-bottom:26px}
  .hubs{grid-template-columns:1fr!important}
  .hubs .txt{grid-row:1;grid-column:1;padding-left:var(--pl)!important}
  .hubs .mapbox{grid-row:2;grid-column:1;margin:0 var(--gut) 40px var(--pl)!important}
  .hubs .mapbox{margin:0 0 40px;min-height:0}
  .pngmap text{font-size:30px}
  .assay{--shade:linear-gradient(180deg,rgba(213,194,160,.0) 30%,rgba(213,194,160,.92) 70%)}
  .assay .in{align-self:end}
  .hud .stage{display:none}
  .hud{grid-template-rows:auto 1fr auto auto;padding-top:calc(var(--hdr) + 48px);min-height:110svh}
  .hud>picture{inset:auto;top:-28%;left:0;right:0;height:118%}
  .hud-m{display:grid!important}
                    .plb{grid-template-columns:96px 1fr;margin:0 16px 24px;padding:12px;row-gap:6px}
  .plb-d{grid-column:1/-1;grid-row:3;font-size:15px}
  .plb-go{grid-column:1/-1;grid-row:4;justify-self:start}
  .plb-img{grid-row:1/3}
  section#hubs{height:170svh}
  .hubs-pin{align-items:end}
  #hubs .mapbox{top:var(--hdr)!important;width:125vw!important;transform:translate(var(--tx,0%),0) scale(var(--z,1.08))!important;transform-origin:50% 0}
  .hubs-pin::after{background:linear-gradient(180deg,rgba(30,38,25,.3) 0%,rgba(30,38,25,0) 20%,rgba(30,38,25,0) 42%,rgba(30,38,25,.85) 60%,#1E2619 72%)}
  #hubs .txt{justify-self:stretch;max-width:none;padding:0 var(--gut) 48px var(--pl)!important}
  .ftr{grid-template-columns:1fr}
  .hero::after{background:linear-gradient(180deg,rgba(30,38,25,.45) 0%,rgba(30,38,25,0) 25%,rgba(30,38,25,.1) 45%,rgba(30,38,25,.8) 85%)}
  #people>picture img{object-position:72% 50%}
  #people{--shade:linear-gradient(180deg,rgba(30,38,25,.1) 0%,rgba(30,38,25,.2) 35%,rgba(30,38,25,.92) 62%)!important}
  .assay .in{background:rgba(220,203,170,.9);margin:0 -20px;padding-right:20px}
  .assay>picture img{object-position:78% 50%}
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:34px}
  .steps::before{left:6px;right:auto;top:6px;bottom:30px;width:2px;height:auto}
  .steps li{padding:0 0 30px}
  .steps li::before{left:-34px;top:4px}
  .contact .end{width:120vw;right:-40vw;opacity:.35}
}

/* paleta: la tierra (#795340) entra en las etiquetas del HUD y en la banda Pre-Loved */
.co span,.hud-m span,.hud-b .ex{color:var(--earth)}
.plb{background:rgba(121,83,64,.74);border-color:rgba(213,194,160,.28)}
.plb:hover{background:rgba(121,83,64,.9)}

/* 07 people: la foto nueva tiene a los dos hombres a la izquierda; el texto pasa a la derecha */
#people{--shade:linear-gradient(90deg,rgba(30,38,25,.86),rgba(30,38,25,.34) 52%,rgba(30,38,25,.02))!important}
#people>picture img{object-position:82% 50%!important}
@media (max-width:980px){
  #people>picture img{object-position:80% 50%!important}
}

/* ===== subpáginas ===== */
.pg{min-height:78svh}
.pg .h-xl{max-width:12ch;font-size:clamp(46px,7.6vw,132px)}
.hdr .nav a[aria-current]::after{transform:none}
.sec{position:relative;padding:clamp(72px,11vh,130px) var(--gut) clamp(72px,11vh,130px) var(--pl);display:grid;gap:36px;background:var(--deep);color:var(--cream)}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.sand{background:var(--sand);color:var(--ink)}
.sec.moss{background:var(--moss);color:var(--cream)}
.sec .idx{top:30px}
.sec .h-l{font-size:clamp(34px,4.2vw,70px);max-width:14ch}
.sec .lede{color:inherit;opacity:.88;max-width:54ch;margin:0 0 18px}
.sec .lede:last-child{margin-bottom:0}
.sec .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px clamp(32px,6vw,120px);align-items:start}
.sec .wide{display:grid;gap:36px}
.sec .body{display:grid;gap:22px;align-content:start}
.sec .btns{margin-top:8px}
.sec.paper .btn.ghost,.sec.sand .btn.ghost{color:var(--ink);border-color:var(--ink)}
.sec .note{margin:0;max-width:60ch;font-size:15px;opacity:.78}
.sec .quote{margin:14px 0 0;font:800 clamp(26px,3vw,48px)/1.08 var(--sans);letter-spacing:-.03em;max-width:24ch;color:var(--gold)}
.sec.paper .quote,.sec.sand .quote{color:var(--earth)}
.sec .stat b{color:var(--gold)}
.sec .stat span{color:inherit;opacity:.88}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(24px,3vw,56px);border-top:1px solid currentColor}
.cards li{position:relative;padding:22px 0 30px;border-bottom:1px solid rgba(127,127,127,.35);display:grid;gap:10px;align-content:start}
.cards em{font-style:normal;color:var(--gold);font-size:11px}
.sec.paper .cards em,.sec.sand .cards em{color:var(--earth)}
.cards b{font:800 clamp(20px,1.5vw,25px)/1.1 var(--sans);letter-spacing:-.02em}
.cards span{font-size:16px;opacity:.82}
.cards .go{position:relative;justify-self:start;margin-top:6px;text-decoration:none;font:700 15px/1 var(--sans);padding:8px 0}
.cards .go::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.cards .go:hover::after{transform:scaleX(.3)}
.contact.top .idx{top:calc(var(--hdr) + 22px)}
.next::after{background:linear-gradient(180deg,rgba(30,38,25,.45),rgba(30,38,25,.15) 40%,rgba(30,38,25,.88))}
.steps5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.step{display:grid;gap:10px;align-content:start}
.step em{font-style:normal;color:var(--earth);font-size:11px}
.step b{font:800 clamp(20px,1.6vw,26px)/1.1 var(--sans);letter-spacing:-.02em}
.step span{font-size:15px;color:var(--ink-2)}
.next{position:relative;display:grid;gap:10px;align-content:end;min-height:62svh;padding:clamp(60px,9vh,110px) var(--gut) clamp(48px,7vh,80px) var(--pl);color:var(--cream);text-decoration:none;overflow:hidden;isolation:isolate;background:var(--deep)}
.next picture{position:absolute;inset:-10% 0;z-index:-2}
.next picture img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.next:hover picture img{transform:scale(1.1)}
.next::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,38,25,.55),rgba(30,38,25,.25) 40%,rgba(30,38,25,.9))}
.next .mono{color:var(--sand)}
.next .h-l{font-size:clamp(36px,5.4vw,96px);max-width:14ch}
.next .go{position:relative;justify-self:start;font:700 15px/1 var(--sans);padding:12px 0 10px;margin-top:6px}
.next .go::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.next:hover .go::after{transform:scaleX(.3)}
.contact.top{min-height:88svh;padding-top:calc(var(--hdr) + clamp(80px,14vh,160px))}
.contact.top .btns{margin-top:8px}
.direct{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:12px 28px;align-items:baseline;border-top:1px solid var(--rule);padding-top:18px}
.direct dt{font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.direct dd{margin:0;font:800 clamp(22px,2.2vw,34px)/1.1 var(--sans);letter-spacing:-.02em}
.direct a{text-decoration:none}.direct a:hover{color:var(--gold)}
.plv .k{color:var(--gold);font:700 12px/1 var(--sans);letter-spacing:.16em;margin:0}
@media (max-width:980px){
  .pg{min-height:70svh}
  .sec{gap:26px}
  .sec .two{grid-template-columns:1fr}
  .steps5{grid-template-columns:1fr 1fr;gap:20px 16px}
  .next{min-height:52svh}
  .direct{grid-template-columns:1fr;gap:4px 0}
  .direct dt{margin-top:12px}
}
@media (max-width:520px){.steps5{grid-template-columns:1fr 1fr}}

@media (min-width:981px){.cards.n6{grid-template-columns:repeat(3,1fr)}.cards.n5{grid-template-columns:repeat(5,1fr)}.cards.n4{grid-template-columns:repeat(4,1fr)}.cards.n5 b{font-size:clamp(18px,1.3vw,22px)}}
@media (max-width:980px){#hubs .credit{right:calc(25vw + 10px)}}
@media (max-width:980px){.split .txt{padding-left:var(--pl)}}
/* QA v9 */
.ch .idx,.brk .idx{text-shadow:0 1px 10px rgba(30,38,25,.7)}
#hubs .credit{position:absolute;left:auto;right:var(--gut);bottom:10px}
html:not(.js) section#hubs{height:auto}
html:not(.js) .hubs-pin{position:static;height:auto;min-height:100svh}
/* People: las figuras quedan arriba de la banda de Pre-Loved */
#people>picture{transform:scale(1.18);transform-origin:80% 100%}
@media (max-width:980px){#people>picture{transform:none}}
@media (max-width:980px){
  #people>picture{inset:0 0 auto 0!important;height:44%;transform:none}
  #people>picture img{height:100%;object-position:80% 100%!important}
  #people{--shade:linear-gradient(180deg,rgba(30,38,25,.25) 0,rgba(30,38,25,0) 18%,rgba(30,38,25,0) 34%,#1E2619 44.5%)!important}
}
/* QA v10 */
#people>picture{transform:scale(1.2);transform-origin:80% 100%}
@media (max-width:980px){
  .split .idx{text-shadow:0 1px 10px rgba(30,38,25,.85)}
  #people>picture{transform:none}
}
/* parallax del split: la imagen sobra un 28% para moverse sin mostrar el borde */
.split>picture{overflow:hidden;height:100%}
.split>picture img,.js .split>picture img,.js .split.seen>picture img{height:128%;max-width:none;transition:none;will-change:transform}
@media (prefers-reduced-motion:reduce){.split>picture img{height:100%!important}}
/* People v11: sin zoom, sujeto a la derecha, sombra solo donde va el texto */
#people>picture{transform:none!important}
#people>picture img{object-position:92% 50%!important}
#people{--shade:linear-gradient(90deg,rgba(30,38,25,.7),rgba(30,38,25,.28) 42%,rgba(30,38,25,0) 58%)!important}
@media (max-width:980px){
  #people>picture img{object-position:100% 100%!important}
  #people{--shade:linear-gradient(180deg,rgba(30,38,25,0) 34%,#1E2619 44.5%)!important}
}


/* v14: Sell. Cinco cards separadas, una por color de la paleta (patrón Pangram y Terminal) */
.proc{position:relative;background:var(--paper);color:var(--ink);padding:calc(var(--hdr) + 56px) var(--gut) clamp(64px,10vh,110px) var(--pl);display:grid;gap:clamp(36px,6vh,64px)}
.proc .idx{color:var(--ink-2)}
.proc-h{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.proc-h h2{margin:0;max-width:13ch}
.proc-a{display:grid;gap:18px}
.proc-a .note{margin:0;font-size:16px;color:var(--ink-2);max-width:46ch}
.proc .btn.ghost{color:var(--ink);border-color:var(--ink)}
@media (max-width:980px){
  .proc{padding:calc(var(--hdr) + 56px) 20px 56px var(--pl);gap:28px}
  .proc-h{grid-template-columns:1fr;gap:18px}
}
/* People: la foto va a sangre desde arriba, la extensión superior queda bajo el header */
#people>picture{inset:0!important;height:auto}
#people>picture img{height:100%}
@media (max-width:980px){
  #people>picture{inset:0 0 auto 0!important;height:46%}
  #people>picture img{object-position:100% 0!important}
  #people{--shade:linear-gradient(180deg,rgba(30,38,25,0) 36%,#1E2619 46.5%)!important}
  #people .idx{text-shadow:0 1px 10px rgba(30,38,25,.85)}
}

/* paleta repartida: cada color tiene su sección */
.split{background:var(--earth)}
.split .txt{background:var(--earth)}
.contact{background:var(--moss)}
.sec.earth{background:var(--earth);color:var(--cream)}
.sec.earth .cards em{color:var(--sand)}
.sec.earth .quote{color:var(--sand)}
.contact .idx{color:var(--sand)}
.contact h1 em,.contact h2 em{color:#E4C95A}
/* QA v15: contraste */
.plb-k{color:#E4C95A}
#contact .paths span{color:var(--cream)}
.contact .idx,.sec.earth .idx,.sec.moss .idx{color:var(--cream)!important;opacity:1}
.sec.earth .cards em,.sec.earth dt{color:var(--cream)}
.sec.earth .cards span,.sec.earth .note,.sec.moss .lede{color:var(--cream)}
@media (max-width:980px){#people .idx{display:none}}


/* v17: Sell con Ficha de campo. Papel arena, filete interior, emblema sin contenedor */
.proc-g,.steps5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,14px)}
.pc,.step{position:relative;display:flex;flex-direction:column;min-height:clamp(400px,50vh,450px);padding:clamp(24px,2vw,30px);background:var(--sand);color:var(--ink);outline:1px solid rgba(31,34,22,.32);outline-offset:-9px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pc em,.step>em{font:800 13px/1 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--ink)}
.em{display:block;width:clamp(104px,9.4vw,136px);height:clamp(104px,9.4vw,136px);fill:var(--ink);margin:clamp(24px,4vh,40px) auto;transition:fill .35s}
.step .fr{display:contents}
.step .em{order:1}
.step>em{order:0}
.pc b,.step b{order:2;margin:auto 0 8px;padding-top:16px;border-top:1px solid rgba(31,34,22,.32);font:800 clamp(22px,1.8vw,27px)/1.06 var(--sans);letter-spacing:-.03em;color:inherit}
.pc>span,.step>span{order:3;font-size:15.5px;line-height:1.38;color:var(--ink);min-height:4.2em}
@media (hover:hover){
  .pc:hover,.step:hover{transform:translateY(-6px)}
  .pc:hover .em,.step:hover .em{fill:var(--earth)}
}
@media (max-width:980px){
  .proc{overflow:hidden}
  .proc-g{position:relative;z-index:40;display:flex;gap:10px;margin:0 -20px 0 calc(var(--pl)*-1);padding:0 20px 8px var(--pl);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .proc-g::-webkit-scrollbar{display:none}
  .proc-g .pc{flex:0 0 72vw;min-height:380px;scroll-snap-align:center}
  .steps5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{min-height:330px;padding:22px}
  .step .em{width:84px;height:84px;margin:18px auto}
  .step>span{min-height:0}
  .steps5 .step:nth-of-type(5){grid-column:1/-1;min-height:280px}
}
.em{width:clamp(84px,7.4vw,108px);height:clamp(84px,7.4vw,108px)}
.step>span{min-height:7em}
@media (max-width:980px){
  .steps5{grid-template-columns:1fr}
  .steps5 .step,.steps5 .step:nth-of-type(5){grid-column:auto;min-height:0}
  .step>span{min-height:0}
  .step .em{width:76px;height:76px;margin:12px 0 14px}
  .step b{margin-top:0}
}

/* v18 móvil: margen parejo, header limpio, menú a pantalla completa (Exo Ape, Locomotive, Noomo) */
@media (max-width:980px){
  :root{--pl:20px;--gut:20px}
  .river{left:7px;width:2px}
  .hdr-in{grid-template-columns:auto 1fr auto;border-bottom:0;position:relative;z-index:3}
  .hdr.solid .hdr-in{border-bottom:1px solid var(--rule)}
  .hdr-in>*{border-right:0}
  .logo{width:var(--hdr);padding:13px 6px 13px 14px}
  .word{grid-column:2;padding:0 0 0 6px}
  .word b{font-size:21px;letter-spacing:.13em}
  .menu{grid-column:3;display:flex;align-items:center;gap:10px;padding:0 20px;border-left:0;font:700 15px/1 var(--sans)}
  .menu::after{content:"";width:20px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:transform .35s,height .35s}
  .hdr.open .menu::after{height:0;border-bottom:0;transform:rotate(45deg)}
  .nav{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr) + 24px) 20px 96px;background:var(--deep);border:0;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
  .hdr.open .nav{visibility:visible;clip-path:inset(0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s}
  .nav ul{display:block;height:auto}
  .nav li,.nav li:last-child{border:0;overflow:hidden}
  .nav-contact{display:block}
  .nav a{display:block;height:auto;padding:7px 0;font:800 clamp(34px,10.4vw,46px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--cream);transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .nav a::after{display:none}
  .nav a:hover{background:none}
  .nav a[aria-current]{color:#E4C95A}
  .hdr.open .nav a{transform:none}
  .hdr.open .nav li:nth-child(1) a{transition-delay:.12s}.hdr.open .nav li:nth-child(2) a{transition-delay:.17s}.hdr.open .nav li:nth-child(3) a{transition-delay:.22s}.hdr.open .nav li:nth-child(4) a{transition-delay:.27s}.hdr.open .nav li:nth-child(5) a{transition-delay:.32s}.hdr.open .nav li:nth-child(6) a{transition-delay:.37s}
  .nav::after{content:"Pacific Sovereign Metals Group · Papua New Guinea";position:absolute;left:20px;right:20px;bottom:32px;font:500 13px/1.3 var(--sans);color:var(--sand)}
  .hdr.open::before{opacity:0}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){.nav,.nav a{transition:none!important}}
@media (max-width:980px){
  .logo,.word,.menu{position:relative;z-index:3}
  .brk p{text-shadow:0 2px 18px rgba(30,38,25,.75)}
}
@media (max-width:980px){.hdr.open .menu::after{content:"\00d7";width:auto;height:auto;border:0;transform:none;font:500 26px/14px var(--sans)}}

/* v19: botones de un solo tamaño (auditoría: los CTA de cada ganador comparten altura) */
.btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;width:fit-content;max-width:100%}
.btn{display:flex;align-items:center;justify-content:center;height:56px;min-width:232px;padding:0 24px;font-size:15px;text-align:center;white-space:nowrap}
@media (max-width:980px){
  .btns{grid-auto-flow:row;grid-auto-columns:auto;width:100%;max-width:340px;gap:10px}
  .btn{width:100%;min-width:0;padding:0 16px}
}
/* cambio de idioma */
.hdr-in{grid-template-columns:var(--hdr) auto 1fr auto auto}
.lang{display:flex;align-items:center;padding:0 18px;font:500 13px/1 var(--sans);text-decoration:none;color:var(--cream);transition:background .2s}
.lang:hover{background:rgba(245,238,204,.1)}
@media (max-width:980px){
  .hdr-in{grid-template-columns:auto 1fr auto auto}
  .lang{grid-column:3;position:relative;z-index:3;padding:0 4px;font-size:14px;min-height:44px;align-self:center}
  .menu{grid-column:4;padding:0 20px 0 14px}
}
@media (min-width:981px){.btns{grid-auto-columns:260px}.btn{width:260px;min-width:0;padding:0 16px}}
/* móvil: la línea del río va pegada al borde izquierdo */
@media (max-width:980px){
  .river{left:0}
  .river b{left:-5px}
}

/* ---------- today's operating status, right below the page hero ---------- */
:root{--status-h:94px}
.status{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,48px);min-height:var(--status-h);padding:12px var(--gut) 12px var(--pl);background:var(--sand);color:var(--ink)}
.status-k{margin:0;color:var(--ink)}
.status-t{margin:0;max-width:80ch;font-size:17px;line-height:1.4}
.ch.hero:has(+.status),.ch.pg:has(+.status){min-height:calc(100svh - var(--status-h))}
@media (max-width:980px){
  :root{--status-h:0px}
  .status{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 20px}
  .status-t{font-size:16px}
  .status .btn{width:100%;max-width:340px}
}