/* ──────────────────────────────────────────────────────────────
   lisandrogarrido.com
   Mismas familias que la propuesta (Inter Tight, Instrument Serif,
   Mrs Saint Delafield) + Space Mono para etiquetas de archivo.
   Grafito profundo, papel y un violeta lavanda como acento.
   ────────────────────────────────────────────────────────────── */
:root{
  --ink:#0b0b0c;--char:#141416;--char-2:#1c1c1f;--paper:#ecebe7;--paper-2:#dfded9;
  --text:#ecebe7;--mute:#8d8c87;--line:rgba(236,235,231,.14);--line-ink:rgba(11,11,12,.16);
  --violet:#aab8f6;--violet-2:#8494e6;--violet-ink:#1d2150;
  --sans:'Inter Tight',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --script:'Mrs Saint Delafield','Snell Roundhand',cursive;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,3.2vw,48px);
  --e:cubic-bezier(.2,.7,.1,1);--e2:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--violet);color:var(--ink)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
em{font-family:var(--sans);font-style:normal;font-weight:300;letter-spacing:inherit}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--paper);color:var(--ink);border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* Grano de película sobre todo el sitio */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
.cursor span{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--paper);mix-blend-mode:difference;display:grid;place-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:width .35s var(--e),height .35s var(--e),margin .35s var(--e),background .3s}
.cursor.on span{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--violet);mix-blend-mode:normal}
@media (pointer:fine){.cursor{display:block}}

/* Carga inicial */
.loader{position:fixed;inset:0;z-index:99;background:var(--ink);display:grid;grid-template-rows:auto 1fr auto;padding:var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;transition:clip-path 1.1s var(--e2);clip-path:inset(0 0 0 0)}
.loader.done{clip-path:inset(0 0 100% 0)}
.loader-top,.loader-bottom{display:flex;justify-content:space-between;color:var(--mute)}
.loader-count{align-self:end;font-family:var(--sans);font-weight:200;font-size:clamp(90px,20vw,300px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
html.seen .loader{display:none}

/* Navegación */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--pad);mix-blend-mode:difference;color:#fff}
.nav-links{display:flex;gap:clamp(12px,1.8vw,26px)}
.nav-links a,.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-mark{display:flex;gap:4px;text-decoration:none}
.nav-mark span{width:26px;height:26px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.nav-cta{justify-self:end}
.nav-cta i{font-style:normal}

/* Animaciones de entrada */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e) var(--d,0s),transform 1.2s var(--e) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.w>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1.1s var(--e);transition-delay:calc(var(--i,0) * 45ms + var(--d,0s))}
.split-in .w>i{transform:none}

/* ───────── Portada ───────── */
.hero{position:relative;padding:68px var(--pad) 0;min-height:100svh}
.hero-frame{position:relative;height:min(84svh,980px);min-height:520px;overflow:hidden;background:var(--char)}
.hero-img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:center 30%;transform:translate3d(0,var(--py,0),0) scale(var(--ps,1.08));transition:transform .1s linear;will-change:transform}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.55),rgba(11,11,12,.05) 34%,rgba(11,11,12,.1) 60%,rgba(11,11,12,.75))}
.hero-name{position:absolute;right:clamp(16px,2.4vw,36px);top:clamp(18px,2.6vw,36px);text-align:right}
.hero-name h1{margin:0;display:grid;font-weight:600;font-size:clamp(40px,6.6vw,104px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.hero-name p{margin:12px 0 0;display:grid;justify-items:end;gap:2px;color:rgba(236,235,231,.85)}
.hero-labels{position:absolute;left:clamp(16px,2.4vw,36px);right:clamp(16px,2.4vw,36px);top:58%;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hero-labels div{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.35}
.hero-labels dt{color:rgba(236,235,231,.6)}
.hero-labels dd{margin:0}
.hero-labels a{text-decoration:none;border-bottom:1px solid currentColor}
.hero-labels div:last-child{text-align:right}
.hero-social{position:absolute;left:clamp(16px,2.4vw,36px);top:clamp(18px,2.6vw,36px);display:flex;gap:18px}
.hero-social a{text-decoration:none;border-bottom:1px solid currentColor}
.hero-scroll{position:absolute;right:clamp(16px,2.4vw,36px);bottom:clamp(18px,2.4vw,32px);color:rgba(236,235,231,.75);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.hero-script{position:absolute;left:calc(var(--pad) - 1vw);right:0;top:calc(68px + min(84svh,980px) * .34);transform:translateY(-50%);font-family:var(--script);font-size:clamp(100px,18vw,290px);line-height:1;color:var(--violet);opacity:.82;pointer-events:none;white-space:nowrap;mix-blend-mode:screen;clip-path:inset(-40% 100% -40% -5%);transition:clip-path 2.6s cubic-bezier(.45,.05,.3,1) .6s;z-index:2}
.ready .hero-script{clip-path:inset(-40% -5% -40% -5%)}
.hero-statement{position:relative;z-index:3;margin:calc(clamp(64px,10vw,150px) * -1) 0 0;padding:0 0 clamp(40px,7vw,100px) clamp(0px,2vw,30px);display:grid;font-weight:500;font-size:clamp(44px,8.4vw,136px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.hero-statement .l1{padding-left:clamp(40px,9vw,140px)}
.hero-statement .l2{padding-left:clamp(80px,18vw,280px)}

/* ───────── Manifiesto ───────── */
.manifesto{padding:clamp(70px,10vw,150px) var(--pad) clamp(50px,7vw,90px)}
.manifesto-body{display:grid;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:28px;margin:0 auto clamp(50px,8vw,110px);color:rgba(236,235,231,.82)}
.manifesto-body p{margin:0}
.manifesto-lines{margin:0;display:grid;font-weight:500;font-size:clamp(40px,7.4vw,124px);line-height:.94;letter-spacing:-.045em;text-transform:uppercase}
.manifesto-lines .ml1{padding-left:clamp(30px,10vw,160px)}
.manifesto-lines .ml2{justify-self:end;text-align:right}
.marquee{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee-track span{display:flex;align-items:center;gap:30px;padding-right:30px}
.marquee b{font-family:var(--sans);font-weight:300;font-style:normal;letter-spacing:-.04em;font-size:clamp(30px,4vw,58px);white-space:nowrap}
.marquee i{font-style:normal;color:var(--violet);font-size:22px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ───────── Encabezados de sección ───────── */
.sec-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:end;gap:18px;padding:0 var(--pad);margin-bottom:clamp(24px,4vw,50px)}
.sec-head h2{margin:0;font-weight:200;font-size:clamp(46px,9vw,150px);line-height:.82;letter-spacing:-.05em;text-transform:uppercase}
.sec-head .mono{padding-bottom:8px;color:var(--mute)}

/* ───────── Archivo: órbita e índice ───────── */
.archive{position:relative;padding:clamp(60px,9vw,130px) 0}
.view-toggle{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.view-toggle button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;color:var(--mute);transition:background .3s,color .3s}
.view-toggle [aria-selected="true"]{background:var(--paper);color:var(--ink)}
.orbit{position:relative;height:min(92svh,980px);min-height:560px;margin:0 var(--pad);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);perspective:1200px;touch-action:pan-y}
.orbit-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.orbit-rings i{position:absolute;border:1px solid var(--line);border-radius:50%;width:calc(var(--rx) * 2);height:calc(var(--ry) * 2)}
.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;text-align:center;pointer-events:none;z-index:1}
.orbit-script{font-family:var(--script);font-size:clamp(84px,13vw,200px);line-height:1;color:var(--violet);padding:0 .2em}
.orbit-label{max-width:260px;color:var(--mute);min-height:2.8em}
.orbit-label b{display:block;font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.02em;text-transform:none;color:var(--text)}
.orbit-item{position:absolute;left:0;top:0;width:var(--s,150px);aspect-ratio:4/5;margin:calc(var(--s,150px) * -.625) 0 0 calc(var(--s,150px) * -.5);border-radius:2px;overflow:hidden;background:var(--char-2);cursor:pointer;will-change:transform;transition:box-shadow .3s,filter .4s;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.orbit-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.orbit-item:hover img,.orbit-item:focus-visible img{transform:scale(1.08)}
.orbit-item::after{content:attr(data-n);position:absolute;left:6px;top:5px;font-family:var(--mono);font-size:9px;color:#fff;mix-blend-mode:difference}
.orbit.paused .orbit-item:not(.hot){filter:grayscale(1) brightness(.55)}
.index{list-style:none;margin:0;padding:0 var(--pad)}
.index[hidden]{display:none}
.index li{border-top:1px solid var(--line)}
.index li:last-child{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:18px;padding:14px 0;text-decoration:none;transition:padding .4s var(--e),color .3s}
.index a:hover{padding-left:16px;color:var(--violet)}
.ix-n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.ix-t{font-weight:500;font-size:clamp(28px,4.4vw,64px);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.ix-t sup{font-size:9.5px;letter-spacing:.04em;vertical-align:top;margin-left:6px;color:var(--mute);font-weight:400}
.ix-s{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute);text-align:right}
.preview{position:fixed;left:0;top:0;z-index:40;width:clamp(200px,22vw,340px);aspect-ratio:4/5;pointer-events:none;opacity:0;transition:opacity .3s;clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%)}
.preview.on{opacity:1}
.preview img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform .6s var(--e)}
.preview.on img{transform:none}

/* ───────── Destacados ───────── */
.featured{display:grid;gap:clamp(90px,12vw,180px);padding:clamp(40px,6vw,80px) var(--pad) clamp(90px,12vw,170px)}
.feat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.feat.f1{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.feat.f1 .feat-media{order:2}
.feat-media{display:block;position:relative;overflow:hidden;text-decoration:none}
.feat-media .media{max-height:86svh;margin:0 auto}
.feat-media .media.is-video[style*="576/1024"],.feat-media .media[style*="/1920"]{max-width:min(100%,52svh)}
.feat-side{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.feat-extra .media{aspect-ratio:4/5!important}
.feat-extra.x1{margin-bottom:18%}
.feat-text{grid-column:1/-1;padding-top:clamp(12px,2vw,30px);border-top:1px solid var(--line)}
.feat-text .mono{color:var(--mute)}
.feat-text h3{margin:14px 0 4px;font-weight:600;font-size:clamp(42px,6.6vw,110px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.feat-text h3 a{text-decoration:none}
.feat-sub{margin:0 0 18px;font-family:var(--sans);font-weight:300;letter-spacing:-.03em;font-size:clamp(22px,2.4vw,34px);color:var(--violet)}
.feat-text p{max-width:520px;color:rgba(236,235,231,.82);margin:0 0 20px}
.link{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding-bottom:4px;border-bottom:1px solid currentColor}
.link i{font-style:normal;transition:transform .4s var(--e)}
.link:hover i{transform:translateX(6px)}

/* Medios */
.media{position:relative;margin:0;overflow:hidden;background:var(--char-2)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.sound{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;padding:7px 12px;background:rgba(11,11,12,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .3s}
.media:hover .sound,.sound.on,.sound:focus-visible{opacity:1}
.sound.on{background:var(--violet);color:var(--ink)}
@media (hover:none){.sound{opacity:1}}

/* ───────── Laboratorio IA (lavanda) ───────── */
.lab{position:relative;background:var(--violet);color:var(--ink);padding:clamp(70px,10vw,140px) var(--pad) clamp(120px,16vw,240px);overflow:hidden;isolation:isolate}
.lab::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lab-head{display:grid;justify-items:center;text-align:center;gap:20px;margin-bottom:clamp(40px,6vw,80px)}
.lab-head .mono{color:var(--violet-ink)}
.lab-head h2{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(46px,7.6vw,128px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;max-width:14ch}
.lab-head h2 em{text-transform:none}
.lab-head p{margin:0;max-width:560px;font-size:17px;color:#262a55}
.lab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;z-index:1}
@media (max-width:900px){.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lab-card{position:relative;display:grid;gap:10px;text-decoration:none;color:var(--ink)}
.lab-card .media{aspect-ratio:4/5!important;background:#9aa8ea}
.lab-card .media video,.lab-card .media img{transition:transform .9s var(--e)}
.lab-card:hover .media video,.lab-card:hover .media img{transform:scale(1.05)}
.lab-tag{text-align:center;letter-spacing:.14em}
.lab-title{text-align:center;font-weight:500;font-size:15px}
.lab-script{position:absolute;left:-1vw;bottom:-.18em;font-family:var(--script);font-size:clamp(130px,24vw,380px);line-height:1;color:var(--ink);opacity:.9;pointer-events:none;white-space:nowrap;z-index:0}

/* ───────── Servicios ───────── */
.services{padding:clamp(80px,11vw,160px) 0 clamp(60px,8vw,110px)}
.svc-list{list-style:none;margin:0;padding:0 var(--pad)}
.svc{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,.9fr);gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);transition:background .4s,padding .4s var(--e)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc:hover{padding-left:14px;background:linear-gradient(90deg,rgba(170,184,246,.08),transparent 60%)}
.svc-n{color:var(--mute)}
.svc h3{margin:0;font-weight:400;font-size:clamp(26px,3.4vw,50px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.svc p{margin:0;color:rgba(236,235,231,.75);max-width:460px}

/* ───────── Estudio (carpeta de archivo) ───────── */
.studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(60px,9vw,130px) var(--pad)}
.binder{position:relative;display:grid;grid-template-columns:44px 1fr;background:#cfcfcb;border-radius:6px;padding:14px 14px 14px 0;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);transform:rotate(-1.2deg)}
.binder-rings{display:grid;align-content:space-around;justify-items:center;padding:24px 0}
.binder-rings i{width:30px;height:14px;border-radius:8px;border:3px solid #b7a779;background:linear-gradient(#e4d6a6,#a8975f);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.sheet{position:relative;aspect-ratio:4/4.6;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);border-radius:3px;overflow:hidden;backdrop-filter:blur(2px)}
.sheet::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.025) 22px 23px);pointer-events:none}
.pin{position:absolute;margin:0;background:#fff;padding:7px 7px 22px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);cursor:grab;touch-action:none;user-select:none;transition:box-shadow .3s}
.pin:active{cursor:grabbing;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.pin img{width:100%;aspect-ratio:3/4;object-fit:cover;pointer-events:none}
.pin.p0{left:6%;top:5%;width:38%;transform:rotate(-4deg)}
.pin.p1{left:50%;top:9%;width:30%;transform:rotate(3deg)}
.pin.p2{left:62%;top:40%;width:28%;transform:rotate(-2deg)}
.pin::before{content:'';position:absolute;left:50%;top:-10px;width:16px;height:30px;margin-left:-8px;border:2px solid #9b9b96;border-radius:8px;border-bottom-color:transparent;transform:rotate(8deg)}
.card-note{position:absolute;left:4%;right:22%;bottom:6%;background:#fafaf8;padding:clamp(14px,2vw,26px);box-shadow:0 14px 30px -16px rgba(0,0,0,.45);color:var(--ink);cursor:grab;touch-action:none;user-select:none;transform:rotate(-.6deg)}
.card-note p{margin:0 0 .3em;display:flex;justify-content:space-between;gap:.4em;font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.9vw,26px);letter-spacing:-.04em;line-height:1.05;transform:scaleY(1.08)}
.card-note p:last-child{margin-bottom:0}
.sheet-hint{position:absolute;right:10px;bottom:8px;color:rgba(11,11,12,.45)}
.studio-text .mono{color:var(--mute)}
.studio-text h2{margin:14px 0 22px;font-weight:200;font-size:clamp(40px,5.6vw,92px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.studio-bio{color:rgba(236,235,231,.84);font-size:17px;max-width:520px}
.studio-bio p{margin:0 0 1em}
.studio-facts{margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.studio-facts div{border-top:1px solid var(--line);padding-top:10px}
.studio-facts dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--mute)}
.studio-facts dd{margin:4px 0 0}

/* ───────── Cotiza conmigo ───────── */
.quote{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);padding:clamp(80px,11vw,160px) var(--pad);background:var(--paper);color:var(--ink);position:relative;overflow:hidden}
.quote-head{position:relative}
.quote-head .mono{color:#6f6e69}
.quote-head h2{position:relative;z-index:1;margin:16px 0 20px;font-weight:600;font-size:clamp(46px,6.8vw,112px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase}
.quote-script{position:absolute;left:28%;top:clamp(90px,10vw,170px);font-family:var(--script);font-size:clamp(90px,12vw,200px);line-height:1;color:var(--violet-2);opacity:.75;pointer-events:none}
.quote-head p{max-width:420px;color:#3c3b38;font-size:17px;margin:clamp(40px,6vw,90px) 0 26px}
.quote-direct{display:flex;flex-wrap:wrap;gap:18px}
.quote-direct a{text-decoration:none;border-bottom:1px solid currentColor}
.quote-form{display:grid;gap:28px}
.quote-form fieldset{border:0;margin:0;padding:18px 0 0;border-top:1px solid var(--line-ink)}
.quote-form legend{padding:0;margin-bottom:14px;color:#6f6e69}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid rgba(11,11,12,.25);border-radius:999px;font-size:14px;transition:background .25s,color .25s,border-color .25s}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--violet-2);outline-offset:2px}
.quote-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.quote-form .grid legend{grid-column:1/-1}
.field{display:grid;gap:6px}
.field.wide{grid-column:1/-1}
.field span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#6f6e69}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid rgba(11,11,12,.3);background:transparent;padding:10px 0;font:inherit;font-size:17px;color:var(--ink);border-radius:0;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field textarea{resize:vertical;min-height:110px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote-send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s var(--e),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn.violet{background:var(--violet-2);color:#fff}
.btn.violet:hover{background:var(--ink)}
.btn i{font-style:normal}
.btn[disabled]{opacity:.5;cursor:wait}
.form-status{margin:0;font-size:15px}
.form-status.ok{color:#2e3a9e}
.form-status.err{color:#a3372a}

/* ───────── Pie ───────── */
.foot{position:relative;padding:clamp(60px,8vw,110px) var(--pad) 26px;overflow:hidden;border-top:1px solid var(--line)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;color:var(--mute)}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--text)}
.foot-name{margin-top:clamp(70px,9vw,130px);font-weight:600;font-size:13.2vw;line-height:.8;letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap;margin-left:-.04em}
.foot-sign{position:absolute;right:var(--pad);top:clamp(96px,11vw,170px);font-family:var(--script);font-size:clamp(50px,7vw,110px);color:var(--violet);transform:rotate(-6deg);pointer-events:none}

/* ───────── Página de proyecto ───────── */
.project{padding:110px var(--pad) 0}
.p-crumbs{display:flex;gap:18px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute)}
.p-crumbs a{text-decoration:none;color:var(--text)}
.p-client{margin:clamp(20px,4vw,50px) 0 0;font-weight:600;font-size:clamp(56px,15vw,260px);line-height:.8;letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap}
.p-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:30px;align-items:end;margin-top:clamp(20px,3vw,40px);padding-top:18px;border-top:1px solid var(--line)}
.p-title{margin:0;font-family:var(--sans);font-weight:300;letter-spacing:-.04em;font-size:clamp(28px,3.6vw,56px);line-height:1;color:var(--violet)}
.p-meta{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-meta dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--mute)}
.p-meta dd{margin:4px 0 0;font-size:15px}
.p-text{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);padding:clamp(50px,7vw,100px) 0}
.p-summary{margin:0;font-weight:300;font-size:clamp(22px,2.4vw,34px);line-height:1.25;letter-spacing:-.02em}
.p-credits .mono{color:var(--mute)}
.p-credits p{margin:10px 0 0;color:rgba(236,235,231,.8);font-size:15px;line-height:1.7}
.p-credits a{text-decoration:none;color:var(--violet)}
.p-credits a:hover{text-decoration:underline}
.p-wide{margin-bottom:14px}
.p-reels{display:grid;gap:14px;margin-bottom:14px;justify-content:center}
.p-reels.n1{grid-template-columns:minmax(0,min(460px,100%))}
.p-reels.n2{grid-template-columns:repeat(2,minmax(0,420px))}
.p-reels.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-gallery{columns:3 280px;column-gap:14px}
.p-shot{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid}
.p-shot .media{width:100%}
.p-next{position:relative;display:grid;gap:10px;margin:clamp(70px,10vw,150px) calc(var(--pad) * -1) 0;padding:clamp(40px,6vw,80px) var(--pad);border-top:1px solid var(--line);text-decoration:none;overflow:hidden}
.p-next .mono{color:var(--mute)}
.p-next strong{font-weight:600;font-size:clamp(56px,12vw,200px);line-height:.82;letter-spacing:-.06em;text-transform:uppercase;transition:color .4s}
.p-next-sub{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute)}
.p-next img{position:absolute;right:var(--pad);top:50%;width:clamp(140px,18vw,260px);aspect-ratio:4/5;object-fit:cover;transform:translateY(-50%) rotate(4deg) scale(.9);opacity:0;transition:opacity .4s,transform .7s var(--e)}
.p-next:hover strong{color:var(--violet)}
.p-next:hover img{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
.lost{min-height:80svh;display:grid;align-content:center;justify-items:start;gap:24px;padding:120px var(--pad)}
.lost h1{margin:0;font-weight:500;font-size:clamp(44px,7vw,110px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.lost .btn{background:var(--paper);color:var(--ink)}

/* Visor de fotos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(11,11,12,.96);display:grid;place-items:center;padding:60px 70px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:calc(100svh - 120px);object-fit:contain}
.lb-close{position:absolute;right:20px;top:18px;border:0;background:none;font-family:var(--mono);font-size:11px;text-transform:uppercase;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;font-size:18px}
.lb-nav.prev{left:16px}.lb-nav.next{right:16px}
.lb-count{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:var(--mute)}

/* ───────── Responsive ───────── */
@media (max-width:900px){
  .hero-labels{grid-template-columns:repeat(2,1fr);top:auto;bottom:72px}
  .hero-labels div:last-child{text-align:left}
  .hero-labels div:nth-child(n+4){display:none}
  .feat,.feat.f1{grid-template-columns:1fr}
  .feat.f1 .feat-media{order:0}
  .studio,.quote,.p-text,.p-sub{grid-template-columns:1fr}
  .svc{grid-template-columns:50px 1fr}
  .svc p{grid-column:2}
  .p-meta{grid-template-columns:repeat(2,1fr)}
  .p-reels.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{grid-template-columns:auto 1fr;row-gap:10px}
  .sec-head .view-toggle{grid-column:1/-1;justify-self:start}
  .sec-head>.mono:nth-of-type(2){grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:15px}
  .nav-links{display:none}
  .nav{grid-template-columns:auto 1fr auto}
  .nav-mark{order:-1}
  .hero{padding-top:58px}
  .hero-frame{height:76svh;min-height:480px}
  .hero-name h1{font-size:clamp(36px,12vw,60px)}
  .hero-name{top:auto;bottom:50%;right:14px}
  .hero-social{display:none}
  .hero-script{top:calc(58px + 76svh * .2);font-size:26vw}
  .hero-labels{bottom:64px;left:14px;right:14px}
  .hero-scroll{display:none}
  .hero-statement{margin-top:-46px}
  .manifesto-body{grid-template-columns:1fr}
  .index a{grid-template-columns:30px 1fr}
  .ix-s{display:none}
  .orbit{height:78svh;min-height:520px}
  .quote-form .grid{grid-template-columns:1fr}
  .p-reels.n2,.p-reels.n3{grid-template-columns:1fr 1fr}
  .lightbox{padding:50px 10px}
  .lb-nav{display:none}
  .binder{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .w>i{transform:none}
  .hero-script{clip-path:none}
}
@media (hover:none){.orbit-label{display:none}}