/* ═══════════════════════════════════════════════
   Concept Studio Equity — motion.css
   Curvas y movimiento derivados del logo
   ═══════════════════════════════════════════════ */

/* ── logo animable ── */
.mk{width:100%;height:100%;overflow:visible}
.mk-l,.mk-r{transition:transform .8s var(--ease)}
.mk-ticks,.mk-rim,.mk-dash,.mk-grid{transform-origin:50px 50px}
.mk-ticks{animation:rot 38s linear infinite}
.mk-rim{animation:rot 60s linear infinite reverse}
.mk-dash{animation:rot 16s linear infinite}
.brand-mark{display:block;width:40px;height:40px;flex:none}
.brand:hover .mk-l{transform:translateX(-3px)}
.brand:hover .mk-r{transform:translateX(3px)}
.brand:hover .mk-dash{animation-duration:3s}
.brand:hover .brand-mark{transform:none}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── órbita ── */
.orbit{pointer-events:none;color:var(--bone)}
.ob{width:100%;height:100%;overflow:visible}
.ob-l,.ob-r{transition:transform .2s linear}
.ob-l{transform:translateX(calc(var(--p,0) * -26px))}
.ob-r{transform:translateX(calc(var(--p,0) * 26px))}
.ob-ticks,.ob-rim,.ob-dash,.ob-grid,.ob-ring{transform-origin:200px 200px}
.ob-ticks{opacity:.2;animation:rot 90s linear infinite}
.ob-rim0{opacity:.55;animation:rot 70s linear infinite reverse}
.ob-rim1{opacity:.28;animation:rot 120s linear infinite}
.ob-ring{opacity:.14}
.ob-core{opacity:.2}
.ob-fill{opacity:.07}
.ob-grid{opacity:.5;animation:rot 160s linear infinite}
.ob-dash{animation:rot 28s linear infinite}
.ob-draw{stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.orbit.in .ob-draw,.hero-orbit .ob-draw{animation:drawIn 2.4s var(--ease) .3s forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}
/* medio círculo r=194 ≈ 610 de longitud */
.ob-draw{stroke-dasharray:640;stroke-dashoffset:640}

/* hero */
.hero-orbit{
  position:absolute;z-index:1;
  width:min(74vw,860px);aspect-ratio:1;
  right:max(-18vw,-240px);top:50%;
  transform:translateY(-54%) rotate(calc(var(--p,0) * -38deg)) scale(calc(1 + var(--p,0) * .14));
  opacity:calc(.95 - var(--p,0) * .6);
  mix-blend-mode:screen;
}
.hero .ob-l{transform:translateX(calc(var(--p,0) * -60px))}
.hero .ob-r{transform:translateX(calc(var(--p,0) * 60px))}
.hero .hero-orbit .ob-fill{opacity:.1}

/* servicios / contacto */
.services,.contact,.expat{overflow:hidden;isolation:isolate}
.services > .wrap,.contact > .wrap{position:relative;z-index:1}
.sec-orbit{
  position:absolute;z-index:0;width:min(78vw,980px);aspect-ratio:1;
  right:-24vw;top:2rem;opacity:.42;
  transform:rotate(calc(var(--p,0) * 120deg - 30deg));
}
.contact-orbit{
  position:absolute;z-index:0;width:min(92vw,1100px);aspect-ratio:1;
  left:50%;bottom:-62%;opacity:.35;
  transform:translateX(-50%) rotate(calc(var(--p,0) * -90deg));
}
.about-orbit{
  position:absolute;z-index:3;width:34%;aspect-ratio:1;right:-11%;top:-11%;
  color:var(--ink-2);mix-blend-mode:multiply;
}
.about-orbit .ob-fill{opacity:.35}
.about-orbit .ob-ticks{opacity:.35}

/* ── curvas de sección (bóveda que se aplana al entrar) ── */
.curve-top{
  border-top-left-radius:calc((1 - var(--p,1)) * 50%) calc((1 - var(--p,1)) * 26vw);
  border-top-right-radius:calc((1 - var(--p,1)) * 50%) calc((1 - var(--p,1)) * 26vw);
}
.curve-out{
  border-bottom-left-radius:calc(var(--p,0) * 50%) calc(var(--p,0) * 18vw);
  border-bottom-right-radius:calc(var(--p,0) * 50%) calc(var(--p,0) * 18vw);
}
.hero-media{transform:scale(calc(1 + var(--p,0) * .12)) translateY(calc(var(--p,0) * 8%))}
.hero-inner{transform:translateY(calc(var(--p,0) * -90px));opacity:calc(1 - var(--p,0) * 1.3)}

/* ── texto dividido ── */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.split .wi{display:inline-block;transform:translateY(112%) rotate(7deg);transform-origin:0 100%;
  transition:transform 1.25s cubic-bezier(.19,1,.22,1) calc(var(--i) * 75ms + .1s)}
.split.in .wi{transform:none}
.hero h1 em,.display em{display:block;width:-moz-fit-content;width:fit-content}
#vScroll{transition:opacity .28s}
#vScroll.swap{opacity:0}

/* subrayado curvo en títulos */
.display em,.hero h1 em{position:relative}
.display em::after,.hero h1 em::after{
  content:"";position:absolute;left:.08em;bottom:-.05em;height:.2em;width:0;max-width:92%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q150 30 298 5' fill='none' stroke='%23f2bf42' stroke-width='2.4' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") left top/100% 100% no-repeat;
  transition:width 1.4s var(--ease) .55s;
}
.display.in em::after{width:var(--uw,70%)}
.hero h1.in em::after{width:78%;transition-delay:1.1s}

/* ── eyebrow: mini logo dividido ── */
.eyebrow::before{
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(90deg,var(--concrete-2) 0 45%,transparent 45% 55%,var(--amber) 55%);
  transform:rotate(-120deg) scale(.4);opacity:0;transition:transform 1s var(--ease),opacity .6s;
}
.eyebrow.light::before{background:linear-gradient(90deg,#8f8b84 0 45%,transparent 45% 55%,var(--amber) 55%)}
.eyebrow.in::before,.hero .eyebrow::before{transform:none;opacity:1}

/* ── preloader dividido ── */
.preloader{background:transparent;display:block}
.pre-half{position:absolute;top:0;bottom:0;width:50.2%;background:var(--noir);transition:transform 1.15s cubic-bezier(.77,0,.18,1)}
.pre-l{left:0;border-radius:0}
.pre-r{right:0}
.preloader.split .pre-l{transform:translateX(-101%);border-top-right-radius:50% 50%;border-bottom-right-radius:50% 50%}
.preloader.split .pre-r{transform:translateX(101%);border-top-left-radius:50% 50%;border-bottom-left-radius:50% 50%}
.pre-core{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.4rem;transition:opacity .5s,transform .9s var(--ease)}
.preloader.split .pre-core{opacity:0;transform:scale(1.4)}
.pre-mark{display:block;width:104px;height:104px;animation:none}
.pre-mark .mk-l{animation:inL 1.1s cubic-bezier(.19,1,.22,1) both}
.pre-mark .mk-r{animation:inR 1.1s cubic-bezier(.19,1,.22,1) both}
.pre-mark .mk-dash{animation-duration:2.4s}
.preloader.split .pre-mark .mk-l{transform:translateX(-40px);transition:transform .8s}
.preloader.split .pre-mark .mk-r{transform:translateX(40px);transition:transform .8s}
@keyframes inL{from{transform:translateX(-60px) rotate(-30deg);opacity:0}}
@keyframes inR{from{transform:translateX(60px) rotate(30deg);opacity:0}}
.pre-word{font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(250,247,242,.8);animation:fadeUp 1s .35s both}
.pre-word i{font-style:normal;color:var(--amber)}
.pre-count{font-family:var(--ff-d);font-size:1.3rem;color:rgba(250,247,242,.45);font-variant-numeric:tabular-nums}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}

/* ── cursor = logo dividido ── */
.cursor{display:none;position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:normal}
.cursor .c-l,.cursor .c-r{position:absolute;top:-8px;width:8px;height:16px;transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .3s}
.cursor .c-l{left:-9px;border-radius:16px 0 0 16px;background:#b9b0a2;transform-origin:100% 50%}
.cursor .c-r{left:1px;border-radius:0 16px 16px 0;background:var(--amber);transform-origin:0 50%}
.cursor.hot .c-l{transform:translateX(-5px) scale(1.6)}
.cursor.hot .c-r{transform:translateX(5px) scale(1.6)}
.cursor.view .c-l{transform:translateX(-46px) scale(3.2)}
.cursor.view .c-r{transform:translateX(46px) scale(3.2)}
.cursor .c-t{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;
  font:500 .62rem/1 var(--ff-s);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  background:var(--ink);padding:.75em 1.1em;border-radius:40px;white-space:nowrap;transition:.4s cubic-bezier(.19,1,.22,1)}
.cursor.view .c-t{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor.down .c-l{transform:translateX(-2px) scale(.8)}
.cursor.down .c-r{transform:translateX(2px) scale(.8)}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} }

/* ── hero: temporizador circular ── */
.hero-ctrl{display:flex;align-items:center;gap:1.2rem}
.hero-timer{position:relative;width:48px;height:48px;display:grid;place-items:center}
.hero-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hero-timer span{font-family:var(--ff-d);font-size:.95rem;color:var(--bone)}
.t-rim{fill:none;stroke:rgba(250,247,242,.35);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 5.5}
.t-arc{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:131.95;stroke-dashoffset:131.95}
.t-arc.run{animation:timer 6.2s linear forwards}
@keyframes timer{to{stroke-dashoffset:0}}

/* ── marquee ── */
.marquee-in{animation:none!important;will-change:transform}
.mq-mark{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;
  background:linear-gradient(90deg,var(--ink-3) 0 45%,transparent 45% 55%,var(--amber-2) 55%);
  transform:rotate(calc(var(--mx,0) * 1deg))}

/* ── intro: campo de puntos (semicírculo ámbar) ── */
.intro{overflow:hidden}
.intro > .wrap{position:relative;z-index:1}
.dotfield{
  position:absolute;z-index:0;right:-14vw;top:8%;width:min(62vw,820px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(226,168,31,.55) 1.5px,transparent 1.9px) 0 0/19px 19px;
  -webkit-mask:linear-gradient(90deg,transparent 50.5%,#000 50.5%);mask:linear-gradient(90deg,transparent 50.5%,#000 50.5%);
  transform:translateY(calc((var(--p,0) - .5) * -140px)) rotate(calc(var(--p,0) * 50deg));
  opacity:.55;
}
.dotfield::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(226,168,31,.5)}

/* ── stats con dial ── */
.stats li{display:grid;grid-template-columns:auto;gap:.2rem;position:relative}
.stat-dial{display:block;width:58px;height:58px;margin-bottom:.9rem;color:var(--ink-3)}
.dial{width:100%;height:100%}
.dial-arc{transition:stroke-dashoffset 2s cubic-bezier(.19,1,.22,1) .2s}
.stats li.in .dial-arc{stroke-dashoffset:var(--to)}
.stats b{font-variant-numeric:tabular-nums}

/* ── pilares: número en disco dividido ── */
.pnum{position:relative;display:grid;place-items:center;width:clamp(52px,6vw,72px);aspect-ratio:1;font-size:clamp(1.2rem,2vw,1.6rem)!important;color:rgba(250,247,242,.55)!important}
.pnum span{position:relative;z-index:1;transition:color .5s}
.pring{position:absolute;inset:0;color:rgba(250,247,242,.35);overflow:visible}
.pr-l{fill:rgba(250,247,242,.08);transform-origin:31px 32px;transform:scale(.0);transition:transform .7s cubic-bezier(.19,1,.22,1)}
.pr-r{fill:var(--amber);transform-origin:33px 32px;transform:scale(0);transition:transform .7s cubic-bezier(.19,1,.22,1) .08s}
.pillar-head:hover .pr-l{transform:scale(1)}
.pillar.open .pr-l,.pillar.open .pr-r{transform:scale(1)}
.pillar.open .pnum span{color:var(--bone)}
.pring circle{transform-origin:32px 32px;animation:rot 30s linear infinite}
.pillar.open .svc > li{animation:rise .8s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i,0) * 70ms + .15s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

/* ── arco dibujado (portafolio / visor) ── */
.arc-line{display:block;width:100%;height:clamp(40px,7vw,90px);margin:0 0 1.6rem;overflow:visible}
.arc-line path{fill:none;vector-effect:non-scaling-stroke}
.al-solid{stroke:var(--amber-2);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease) .2s}
.al-dots{stroke:var(--ink-3);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 .012;opacity:0;transition:opacity 1.2s 1.4s}
.arc-line.in .al-solid{stroke-dashoffset:0}
.arc-line.in .al-dots{opacity:.5}

/* ── tarjetas: revelado circular + parallax ── */
.card-img{clip-path:circle(0% at var(--ox,100%) 50%);transition:clip-path 1.5s cubic-bezier(.19,1,.22,1)}
.card.in .card-img{clip-path:circle(150% at var(--ox,100%) 50%)}
.card-img img{transform:translateY(calc((var(--p,.5) - .5) * -9%)) scale(1.14);scale:1;transition:scale 1.1s var(--ease)}
.card:hover .card-img img{transform:translateY(calc((var(--p,.5) - .5) * -9%)) scale(1.14);scale:1.06}
.card-n{position:absolute;z-index:2;top:clamp(.9rem,1.6vw,1.3rem);left:clamp(.9rem,1.6vw,1.3rem);
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--ff-d);font-size:.95rem;color:var(--bone);
  background:radial-gradient(circle at 50% 50%,transparent 60%,transparent 61%);
  border:1px dashed rgba(250,247,242,.55)}
.card:hover .card-n{animation:rot 6s linear infinite}
.card-meta .pl{color:var(--amber)}

/* ── expat: barrido curvo ── */
.expat-grid li{position:relative;isolation:isolate}
.expat-grid li:not(.cta)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noir);
  clip-path:circle(0% at 100% 50%);transition:clip-path .9s cubic-bezier(.19,1,.22,1)}
.expat-grid li:not(.cta):hover::before{clip-path:circle(150% at 100% 50%)}
.expat-grid li:not(.cta){background:var(--noir-2)}
.expat-grid li:not(.cta):hover{background:var(--noir-2)}

/* ── retrato ── */
.about-media{overflow:visible;background:none}
.about-media img{border-radius:var(--r);clip-path:circle(0% at 100% 50%);transition:clip-path 1.6s cubic-bezier(.19,1,.22,1)}
.about-media.in img{clip-path:circle(150% at 100% 50%)}
.about-badge{z-index:4;border-radius:0 0 0 var(--r)}

/* ── volver arriba con progreso ── */
.to-top{position:fixed;z-index:880;right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:rgba(23,22,26,.72);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.5s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{position:absolute;inset:0;transform:rotate(-90deg)}
.tt-rim{fill:none;stroke:rgba(250,247,242,.35);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 5.2}
.tt-arc{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:157.08;stroke-dashoffset:157.08}
.to-top i{width:10px;height:10px;border-top:1.5px solid var(--bone);border-left:1.5px solid var(--bone);transform:translateY(2px) rotate(45deg)}
.to-top:hover{background:var(--amber)}
.to-top:hover i{border-color:var(--ink)}

/* ── header se oculta al bajar ── */
.hdr{transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease),transform .6s var(--ease)}
.hdr.hide{transform:translateY(-110%)}

/* ── visor: apertura circular desde el clic ── */
.viewer{opacity:1;visibility:hidden;clip-path:circle(0px at var(--vx,50%) var(--vy,50%));
  transition:clip-path 1s cubic-bezier(.77,0,.18,1),visibility 0s linear 1s}
.viewer.open{visibility:visible;clip-path:circle(150vmax at var(--vx,50%) var(--vy,50%));transition:clip-path 1.1s cubic-bezier(.77,0,.18,1),visibility 0s}
.v-head > *{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .9s cubic-bezier(.19,1,.22,1)}
.viewer.open .v-head > *{opacity:1;transform:none}
.viewer.open .v-head > :nth-child(2){transition-delay:.35s}
.viewer.open .v-head > :nth-child(3){transition-delay:.45s}
.viewer.open .v-head > :nth-child(4){transition-delay:.55s}
.viewer.open .v-head > :nth-child(5){transition-delay:.65s}
.viewer.open .v-head > :nth-child(1){transition-delay:.25s}

.v-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.v-tabs button{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.8em 1.4em;border:1px solid var(--line-l);border-radius:60px;color:rgba(250,247,242,.85);transition:.35s}
.v-tabs button:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.v-tabs button b{font-weight:500;color:var(--amber)}
.v-tabs button:hover b{color:var(--ink)}
.v-tabs .tab-mk{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,#8f8b84 0 44%,transparent 44% 56%,var(--amber) 56%)}

.v-sec{max-width:var(--maxw);margin:0 auto}
.v-sub{display:flex;align-items:baseline;gap:.8rem;font-family:var(--ff-d);font-weight:300;font-size:clamp(1.8rem,3.6vw,2.8rem);margin:0 0 1.6rem}
.v-sub i{font-family:var(--ff-s);font-style:normal;font-size:.8rem;letter-spacing:.2em;color:var(--amber)}
.v-gal figure{min-height:120px}
.v-gal figure img{clip-path:circle(0% at var(--ox,100%) 50%);transition:clip-path 1.4s cubic-bezier(.19,1,.22,1),transform .9s var(--ease)}
.v-gal figure.in img{clip-path:circle(150% at var(--ox,100%) 50%)}

.v-planos{margin-top:clamp(3.5rem,8vw,6rem);position:relative}
.v-arc{display:block;width:100%;height:clamp(40px,6vw,80px);margin-bottom:1.4rem;overflow:visible}
.v-arc path{fill:none;stroke:var(--amber);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease)}
.v-planos.in .v-arc path{stroke-dashoffset:0}
.v-hint{font-size:.86rem;color:rgba(250,247,242,.55);margin:-.6rem 0 1.8rem}
.v-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.v-plans figure{position:relative;background:#fbfaf7;border-radius:var(--r);padding:clamp(.8rem,1.6vw,1.4rem);cursor:zoom-in;
  display:grid;place-items:center;min-height:240px;
  opacity:0;transform:translateY(34px);transition:opacity .8s,transform 1.1s cubic-bezier(.19,1,.22,1),box-shadow .4s}
.v-plans figure.in{opacity:1;transform:none}
.v-plans figure img{clip-path:circle(0% at var(--ox,0%) 50%);transition:clip-path 1.7s cubic-bezier(.19,1,.22,1) .15s,transform .8s var(--ease)}
.v-plans figure.in img{clip-path:circle(150% at var(--ox,0%) 50%)}
.v-plans figure:hover{box-shadow:0 0 0 2px var(--amber)}
.v-plans img{max-height:520px;width:auto;max-width:100%;object-fit:contain;transition:transform .8s var(--ease)}
.v-plans figure:hover img{transform:scale(1.03)}
.v-plans figcaption{position:absolute;left:.9rem;bottom:.7rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#8f8b84}
.v-plans figure.wide{grid-column:1/-1}

.v-nextp{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.4rem;max-width:var(--maxw);margin:clamp(4rem,9vw,7rem) auto 0;
  padding-top:2rem;border-top:1px solid var(--line-l);color:var(--bone)}
.v-nextp small{display:block;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:.6rem}
.v-nextp strong{font-family:var(--ff-d);font-weight:300;font-size:clamp(2rem,5vw,4rem);line-height:1}
.v-nextp .np-img{width:clamp(120px,22vw,300px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  clip-path:circle(38% at 50% 50%);transition:clip-path .9s cubic-bezier(.19,1,.22,1)}
.v-nextp:hover .np-img{clip-path:circle(80% at 50% 50%)}
.v-nextp img{width:100%;height:100%;object-fit:cover}

/* ── lightbox con zoom ── */
.lightbox{display:block;padding:0}
.lb-stage{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:4.5rem 3vmin 4.5rem;overscroll-behavior:contain}
.lb-stage img{max-width:100%;max-height:calc(100vh - 9rem);object-fit:contain;cursor:zoom-in;border-radius:var(--r);
  transition:opacity .35s;background:#fbfaf7}
.lb-stage img.photo{background:none}
.lightbox.zoom .lb-stage{place-items:start;display:block}
.lightbox.zoom .lb-stage img{max-width:none;max-height:none;width:auto;cursor:zoom-out;margin:0 auto}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:3;width:50px;height:50px;border-radius:50%;background:rgba(250,247,242,.12);backdrop-filter:blur(8px);transition:background .3s}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--amber)}
.lb-prev::before,.lb-next::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:1.5px solid #fff;border-left:1.5px solid #fff;transform:translate(-35%,-50%) rotate(-45deg)}
.lb-next::before{transform:translate(-65%,-50%) rotate(135deg)}
.lb-bar{position:absolute;z-index:3;left:50%;bottom:1.1rem;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;
  padding:.5rem .6rem .5rem 1.2rem;border-radius:60px;background:rgba(23,22,26,.8);backdrop-filter:blur(8px);color:var(--bone);font-size:.8rem;letter-spacing:.14em}
.lb-zoom{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:.55em 1.1em;border-radius:40px;background:var(--amber);color:var(--ink)}
.lightbox.zoom .lb-zoom{background:var(--bone)}

@media (max-width:860px){
  .hero-orbit{width:118vw;right:-58vw;top:30%;opacity:calc(.6 - var(--p,0) * .5)}
  .sec-orbit{width:130vw;right:-70vw;top:1rem;opacity:.3}
  .contact-orbit{width:150vw;bottom:-40%}
  .dotfield{width:110vw;right:-55vw;top:2%}
  .curve-top{
    border-top-left-radius:calc((1 - var(--p,1)) * 50%) calc((1 - var(--p,1)) * 34vw);
    border-top-right-radius:calc((1 - var(--p,1)) * 50%) calc((1 - var(--p,1)) * 34vw);
  }
  .v-plans{grid-template-columns:1fr}
  .v-plans img{max-height:none}
  .v-nextp{grid-template-columns:1fr}
  .lb-prev,.lb-next{top:auto;bottom:1rem;transform:none;width:44px;height:44px}
  .lb-bar{bottom:1.3rem}
  .stat-dial{width:48px;height:48px;grid-row:span 2;margin:0}
  .stats li{grid-template-columns:48px 1fr;column-gap:1.1rem;align-items:center}
  .stats li span{margin-top:.2rem}
  .about-orbit{width:30%;right:-4%;top:-8%}
}

@media (prefers-reduced-motion:reduce){
  .split .wi{transform:none}
  .card-img,.v-gal figure img,.v-plans figure img,.about-media img{clip-path:none!important}
  .v-plans figure{opacity:1;transform:none}
  .curve-top,.curve-out{border-radius:0!important}
  .hero-media,.hero-inner,.hero-orbit,.sec-orbit,.contact-orbit,.dotfield{transform:none!important}
  .hero-inner{opacity:1!important}
  .viewer{clip-path:none!important;transition:none}
  .viewer:not(.open){visibility:hidden}
}

/* tarjetas: grilla bento con filas fijas (la imagen llena siempre la celda) */
.work-grid{grid-auto-rows:clamp(250px,25vw,370px);grid-auto-flow:dense}
.card,.card.wide,.card.tall{aspect-ratio:auto}
.card.tall{grid-row:span 2}
.card .card-img{position:absolute;inset:0;aspect-ratio:auto!important}
@media (max-width:860px){ .work-grid{grid-auto-rows:clamp(260px,58vw,420px)} .card.tall{grid-row:span 1} }
@media (max-width:560px){ .work-grid{grid-auto-rows:min(112vw,500px)} }
