*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;background:#000;color:#f5f5f3;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:1rem 2.5rem;transition:background 0.5s;}
nav.solid{background:rgba(0,0,0,0.88);backdrop-filter:blur(14px);}
.nav-logo{font-size:11px;font-weight:900;letter-spacing:0.18em;color:#f5f5f3;cursor:pointer;}
.nav-r{display:flex;gap:1.5rem;align-items:center;}
.nav-r a{font-size:9px;letter-spacing:0.1em;color:rgba(255,255,255,0.35);text-decoration:none;cursor:pointer;transition:color 0.2s;text-transform:uppercase;}
.nav-r a:hover{color:#f5f5f3;}
.lang-btn{font-size:9px;letter-spacing:0.1em;padding:3px 10px;border:0.5px solid rgba(255,255,255,0.15);border-radius:99px;cursor:pointer;color:rgba(255,255,255,0.35);background:transparent;font-family:inherit;transition:all 0.2s;}
.lang-btn:hover{border-color:rgba(255,255,255,0.4);color:#f5f5f3;}

/* ── HAMBURGER ── */
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;z-index:210;}
.ham span{width:22px;height:1.5px;background:#f5f5f3;display:block;transition:all 0.32s cubic-bezier(0.77,0,0.175,1);transform-origin:center;}
.ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ── MOBILE MENU ── */
.mob-menu{display:none;position:fixed;inset:0;z-index:195;background:rgba(0,0,0,0.97);flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;opacity:0;transition:opacity 0.3s;}
.mob-menu.open{display:flex;opacity:1;}
.mob-menu a{font-size:clamp(28px,8vw,40px);font-weight:900;letter-spacing:0.08em;color:rgba(255,255,255,0.5);text-decoration:none;text-transform:uppercase;transition:color 0.2s;cursor:pointer;}
.mob-menu a:hover,.mob-menu a:active{color:#fff;}
.mob-menu .lang-btn{font-size:11px;padding:7px 22px;margin-top:0.5rem;border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.45);}

/* ── DOTS ── */
.dots{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;gap:11px;}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.18);cursor:pointer;transition:all 0.3s;border:none;padding:0;}
.dot.on{background:#fff;transform:scale(1.5);}

/* ── FULL PAGE ── */
#fp{position:fixed;inset:0;transition:transform 0.95s cubic-bezier(0.77,0,0.175,1);will-change:transform;}
.sec{position:absolute;left:0;right:0;height:100vh;overflow:hidden;}
#s1{top:0;}
#s2{top:100vh;}
#s3{top:200vh;}
#s4{top:300vh;}

/* ══ S1 — HERO ══ */
#s1{background:#000;}
#hcv{position:absolute;inset:0;width:100%;height:100%;display:block;}
#s1::after{content:"";position:absolute;bottom:0;left:0;right:0;height:32%;background:linear-gradient(to bottom,transparent,#000);z-index:3;pointer-events:none;}
.hero-text{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem);}
.hero-ey{font-size:clamp(8px,0.9vw,11px);letter-spacing:0.25em;color:rgba(255,255,255,0.25);text-transform:uppercase;margin-bottom:1.5rem;}
.hero-name{font-size:clamp(48px,13vw,156px);font-weight:900;letter-spacing:-0.03em;line-height:0.85;color:#fff;text-transform:uppercase;text-shadow:-16px 10px 0 #000,-17px 11px 0 #000,-18px 12px 0 #000;}
.hero-name span{display:block;}
.hero-logo{margin:0;line-height:0;}
.hero-logo img{display:block;width:clamp(280px,58vw,860px);height:auto;max-width:100%;user-select:none;-webkit-user-drag:none;}
.hero-robot{position:absolute;right:0;bottom:0;height:92%;z-index:2;pointer-events:none;user-select:none;}
.hero-bot{position:absolute;bottom:clamp(2rem,4vh,3rem);left:clamp(2rem,5vw,5rem);right:clamp(2rem,5vw,5rem);z-index:5;display:flex;justify-content:space-between;align-items:flex-end;}
.hero-sub{font-size:clamp(10px,1.1vw,14px);letter-spacing:0.18em;color:rgba(255,255,255,0.3);text-transform:uppercase;}
.hero-scroll{font-size:9px;letter-spacing:0.1em;color:rgba(255,255,255,0.15);animation:pulse 2.5s infinite;}
@keyframes pulse{0%,100%{opacity:.15;}50%{opacity:.45;}}

/* ══ S2 — WORK / LAB ══ */
#s2{background:#000;display:flex;flex-direction:column;}
.s2-wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding:clamp(4.5rem,9vh,6rem) clamp(1.5rem,5vw,5rem) clamp(1rem,2vh,2rem);}
.tabs{display:flex;border-bottom:0.5px solid rgba(255,255,255,0.08);flex-shrink:0;}
.tab{padding:clamp(0.5rem,1.5vh,0.85rem) 1.2rem;font-size:clamp(12px,1.8vw,20px);letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border:none;background:transparent;font-family:inherit;color:rgba(255,255,255,0.3);transition:color 0.25s;}
.tab.on{color:#f5f5f3;}
.tab:first-child{border-right:0.5px solid rgba(255,255,255,0.08);}
.panels-wrap{flex:1;overflow:hidden;position:relative;min-height:0;}
.panels{display:flex;width:200%;height:100%;transition:transform 0.45s cubic-bezier(.4,0,.2,1);}
.panels.lab{transform:translateX(-50%);}
.panel{width:50%;height:100%;overflow-y:auto;padding-top:clamp(0.75rem,2vh,1.25rem);}
.panel::-webkit-scrollbar{width:3px;}
.panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}

/* ── Filtros ── */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:clamp(0.75rem,1.5vh,1.25rem);}
.fbtn{font-size:clamp(10px,1.2vw,15px);letter-spacing:0.07em;padding:5px 14px;border-radius:99px;border:0.5px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.35);background:transparent;cursor:pointer;font-family:inherit;transition:all 0.18s;text-transform:uppercase;}
.fbtn:hover{border-color:rgba(255,255,255,0.35);color:rgba(255,255,255,0.8);}
.fbtn.on{border-color:rgba(255,255,255,0.5);color:#f5f5f3;background:rgba(255,255,255,0.04);}

/* ── Project grid ── */
.pitem{position:relative;overflow:hidden;border-radius:7px;aspect-ratio:16/10;cursor:pointer;}
.pitem-bg{position:absolute;inset:0;}
.pitem img,.pitem .pcv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s;}
.pitem:hover img,.pitem:hover .pcv{transform:scale(1.04);}
.pover{position:absolute;inset:0;background:rgba(0,0,0,0.78);opacity:0;transition:opacity 0.25s;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(0.6rem,1.5vw,1rem);}
.pitem:hover .pover{opacity:1;}
.pclient{font-size:clamp(9px,0.9vw,12px);letter-spacing:0.12em;color:rgba(255,255,255,0.38);text-transform:uppercase;margin-bottom:3px;}
.pname{font-size:clamp(12px,1.5vw,20px);font-weight:700;color:#f5f5f3;margin-bottom:6px;}
.ptags{display:flex;gap:4px;flex-wrap:wrap;}
.ptag{font-size:clamp(8px,0.8vw,11px);padding:2px 7px;border-radius:99px;border:0.5px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.4);}
.cbadge,.cat-badge{position:absolute;top:8px;left:8px;font-size:clamp(8px,0.8vw,10px);letter-spacing:0.08em;padding:2px 8px;border-radius:99px;text-transform:uppercase;}
.cadv,.cat-adv{background:rgba(232,0,15,0.12);border:0.5px solid rgba(232,0,15,0.22);color:#E8000F;}
.cmus{background:rgba(127,119,221,0.12);border:0.5px solid rgba(127,119,221,0.22);color:#AFA9EC;}
.cpro{background:rgba(186,117,23,0.12);border:0.5px solid rgba(186,117,23,0.22);color:#EF9F27;}

/* ── LAB ── */
.lab-intro{font-size:clamp(12px,1.5vw,20px);color:rgba(255,255,255,0.32);line-height:1.7;margin-bottom:clamp(0.75rem,2vh,1.5rem);}
.lab-label{font-size:clamp(8px,0.85vw,11px);letter-spacing:0.2em;color:rgba(255,255,255,0.18);text-transform:uppercase;margin-bottom:clamp(0.75rem,2vh,1.25rem);}
.ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(130px,16vw,260px),1fr));gap:clamp(6px,1vw,14px);}
.ext-card{cursor:pointer;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:9/16;background:#0a0a0a;border:0.5px solid rgba(255,255,255,0.07);transition:border-color 0.25s,transform 0.25s;}
.ext-card:hover{border-color:rgba(255,255,255,0.22);transform:scale(1.02);}
.ext-card img{width:100%;height:100%;object-fit:cover;display:block;}
.ext-card-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(0.75rem,2vw,1.25rem);}
.ext-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);opacity:0.88;}
.ext-cap-lbl{font-size:clamp(7px,0.75vw,10px);letter-spacing:0.15em;color:rgba(255,255,255,0.5);text-transform:uppercase;margin-bottom:3px;}
.ext-card-title{font-size:clamp(16px,2.2vw,28px);font-weight:900;color:#fff;letter-spacing:-0.02em;line-height:1;text-transform:uppercase;}

/* ══ S3 — ABOUT ══ */
#s3{background:#000;overflow-y:auto;}
.ab{min-height:100vh;display:flex;flex-direction:column;padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3rem) clamp(2rem,4vw,3rem);font-family:'DM Sans',sans-serif;color:#fff;width:100%;box-sizing:border-box;}
.ab-eyebrow{font-size:clamp(9px,1.1vw,11px);letter-spacing:0.28em;color:#888;text-transform:uppercase;margin-bottom:clamp(1.5rem,3vw,2rem);display:flex;align-items:center;gap:14px;flex-shrink:0;}
.ab-eyebrow::after{content:'';flex:1;height:0.5px;background:rgba(255,255,255,0.08);}
.ab-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:stretch;flex:1;margin-bottom:0;}
.ab-left{width:100%;display:flex;flex-direction:column;align-items:stretch;}
.ab-headline{font-family:'DM Sans',sans-serif;font-weight:900;color:#fff;line-height:0.88;letter-spacing:-0.035em;text-transform:uppercase;white-space:nowrap;display:inline-block;font-size:clamp(32px,8vw,128px);margin-bottom:0.25em;}
.ab-sub-row{display:flex;justify-content:space-between;align-items:center;border-top:0.5px solid rgba(255,255,255,0.2);padding-top:0.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);}
.ab-sub-item{font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:0.05em;color:#fff;text-transform:uppercase;white-space:nowrap;}
.ab-sub-dot{color:rgba(255,255,255,0.15);}
.ab-body p{font-size:clamp(13px,1.2vw,16px);color:#ccc;line-height:1.75;font-weight:300;margin:0 0 0.7em;}
.ab-body p:last-child{margin:0;}
.ab-body p strong{color:#fff;font-weight:500;}
.ab-right{display:flex;flex-direction:column;}
.ab-sectors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,0.8vw,10px);flex:1;}
.ab-sector{padding:clamp(1rem,2vw,1.75rem) clamp(0.85rem,1.5vw,1.25rem);border-radius:10px;cursor:default;transition:filter 0.2s;min-height:clamp(100px,12vw,160px);display:flex;flex-direction:column;justify-content:flex-end;}
.ab-sector:hover{filter:brightness(1.08);}
.ab-sector-t{font-family:'Archivo Black','DM Sans',sans-serif;font-size:clamp(15px,2.1vw,28px);font-weight:400;line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase;margin-bottom:clamp(3px,0.5vw,7px);word-break:break-word;hyphens:auto;}
.ab-sector-d{font-size:clamp(9px,0.9vw,13px);line-height:1.45;font-weight:400;opacity:0.82;}
/* sector colour classes (scoped to avoid conflict with section IDs) */
.ab-sector.s1{background:#F5C842;}.ab-sector.s1 .ab-sector-t,.ab-sector.s1 .ab-sector-d{color:#1A1300;}
.ab-sector.s2{background:#FF2A8A;}.ab-sector.s2 .ab-sector-t,.ab-sector.s2 .ab-sector-d{color:#fff;}
.ab-sector.s3{background:#2ED8A0;}.ab-sector.s3 .ab-sector-t,.ab-sector.s3 .ab-sector-d{color:#001A12;}
.ab-sector.s4{background:#B06EFF;}.ab-sector.s4 .ab-sector-t,.ab-sector.s4 .ab-sector-d{color:#fff;}
/* ── Tarjetas con video: oscuro en reposo, claro + play en hover ── */
.ab-sector.has-vid{position:relative;overflow:hidden;background:#000;isolation:isolate;}
.ab-sector.has-vid:hover{filter:none;}
.ab-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(0.32) saturate(0.85);transform:scale(1.02);transition:filter 0.5s ease,transform 0.8s cubic-bezier(.2,.7,.2,1);pointer-events:none;}
.ab-sector.has-vid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.15) 55%,transparent 100%);pointer-events:none;}
.ab-sector.has-vid .ab-sector-t{transform-origin:left bottom;transition:transform 0.45s cubic-bezier(.2,.7,.2,1);}
.ab-sector.has-vid .ab-sector-d{color:#fff !important;}
.ab-sector.s1.has-vid .ab-sector-t{color:#F5C842;}
.ab-sector.s2.has-vid .ab-sector-t{color:#FF2A8A;}
.ab-sector.s4.has-vid .ab-sector-t{color:#B06EFF;}
.ab-sector.has-vid.play .ab-vid{filter:brightness(1) saturate(1);transform:scale(1);}
.ab-sector.has-vid.play .ab-sector-t{transform:scale(1.35);}
.ab-bottom{flex-shrink:0;padding-top:clamp(2rem,4vw,3rem);}
.ab-caps{display:flex;flex-wrap:wrap;gap:clamp(6px,0.8vw,10px);margin-bottom:clamp(0.75rem,1.5vw,1.25rem);}
.ab-cap{font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:0.02em;padding:clamp(6px,0.7vw,9px) clamp(12px,1.4vw,19px);border-radius:7px;border:0.5px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.7);background:transparent;cursor:default;transition:all 0.18s;}
.ab-cap:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
.ab-tools-row{display:flex;flex-wrap:wrap;gap:clamp(5px,0.7vw,8px);}
.ab-tool{font-size:clamp(9px,0.95vw,12px);font-family:monospace;letter-spacing:0.05em;padding:clamp(4px,0.55vw,7px) clamp(9px,1.1vw,15px);border-radius:5px;border:0.5px solid rgba(255,255,255,0.1);color:#999;background:transparent;}

/* ══ S4 — CONTACT ══ */
#s4{background:#000;}
#ccv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0.38;}
#s4::before{content:"";position:absolute;top:0;left:0;right:0;height:28%;background:linear-gradient(to bottom,#000,transparent);z-index:3;pointer-events:none;}
.contact-wrap{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(1.5rem,4vw,2rem);}
.avail{font-size:clamp(9px,1vw,13px);letter-spacing:0.14em;color:#1D9E75;text-transform:uppercase;margin-bottom:clamp(1rem,3vh,2rem);display:flex;align-items:center;gap:6px;}
.adot{width:6px;height:6px;border-radius:50%;background:#1D9E75;animation:pulse 2s infinite;}
.c-invite{font-size:clamp(14px,2vw,26px);color:rgba(255,255,255,0.25);margin-bottom:clamp(0.75rem,2vh,1.5rem);letter-spacing:0.04em;}
.c-email{font-size:clamp(14px,3.5vw,56px);font-weight:900;letter-spacing:-0.02em;color:#f5f5f3;margin-bottom:clamp(2rem,5vh,4rem);cursor:pointer;transition:opacity 0.2s;display:block;text-decoration:none;word-break:break-word;}
.c-email:hover{opacity:0.5;}
.c-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:3rem;}
.c-link{font-size:clamp(9px,1vw,13px);letter-spacing:0.1em;padding:clamp(7px,1.2vh,10px) clamp(16px,2.5vw,24px);border:0.5px solid rgba(255,255,255,0.12);border-radius:99px;color:rgba(255,255,255,0.32);cursor:pointer;transition:all 0.2s;text-transform:uppercase;}
.c-link:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
.c-footer{font-size:clamp(8px,0.85vw,11px);color:rgba(255,255,255,0.1);letter-spacing:0.06em;}

/* ══ MODAL PROYECTOS ══ */
#modal-ov{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0);display:none;align-items:center;justify-content:center;transition:background 0.4s;padding:0.4rem;}
#modal-ov.open{display:flex;background:rgba(0,0,0,0.94);pointer-events:all;}
#modal{position:relative;display:flex;gap:clamp(1rem,2.5vw,2.5rem);align-items:flex-start;opacity:0;transform:translateY(20px) scale(0.97);transition:opacity 0.4s,transform 0.4s;max-width:min(98vw,1440px);width:100%;max-height:96vh;}
#modal-ov.open #modal{opacity:1;transform:none;}
#modal-img{flex:0 0 auto;width:min(58%,620px);border-radius:12px;overflow:hidden;aspect-ratio:16/10;}
#modal-img img{width:100%;height:100%;object-fit:cover;display:block;}
#modal-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(0.5rem,2vh,1.5rem) 0;min-width:0;overflow-y:auto;}
.m-client{font-size:clamp(8px,0.9vw,12px);letter-spacing:0.18em;color:rgba(255,255,255,0.28);text-transform:uppercase;margin-bottom:clamp(0.4rem,1.2vh,0.8rem);}
.m-title{font-size:clamp(18px,3.2vw,42px);font-weight:900;color:#fff;line-height:0.95;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:clamp(0.75rem,2vh,1.5rem);}
.m-desc{font-size:clamp(11px,1.2vw,16px);color:rgba(255,255,255,0.42);line-height:1.75;margin-bottom:clamp(1rem,2.5vh,2rem);}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(1rem,2.5vh,2rem);}
.m-tag{font-size:clamp(8px,0.85vw,12px);padding:3px 10px;border-radius:99px;border:0.5px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.4);}
.m-behance{font-size:clamp(9px,1vw,12px);letter-spacing:0.1em;padding:8px 20px;border-radius:99px;border:0.5px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.4);background:transparent;cursor:pointer;font-family:inherit;transition:all 0.2s;text-transform:uppercase;display:inline-block;width:fit-content;}
.m-behance:hover{border-color:#fff;color:#fff;}
#modal-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.55);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:10;}
#modal-close:hover{background:rgba(255,255,255,0.18);color:#fff;}

/* ══ MODAL EXTREMIA ══ */
#ext-ov{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0);display:none;align-items:center;justify-content:center;transition:background 0.4s;padding:1.5rem;}
#ext-ov.open{display:flex;background:rgba(0,0,0,0.93);pointer-events:all;}
#ext-modal{position:relative;display:flex;gap:clamp(1.5rem,4vw,4rem);align-items:center;opacity:0;transform:translateY(20px) scale(0.97);transition:opacity 0.4s,transform 0.4s;max-width:min(95vw,980px);width:100%;}
#ext-ov.open #ext-modal{opacity:1;transform:none;}
#ext-vid-wrap{flex:0 0 auto;width:min(36vw,320px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;position:relative;}
#ext-vid{width:100%;height:100%;object-fit:cover;display:block;}
#ext-playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.28);cursor:pointer;transition:background 0.2s;}
#ext-playbtn:hover{background:rgba(0,0,0,0.08);}
#ext-playbtn.hidden{display:none;}
#ext-info{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.ext-series{font-size:clamp(8px,0.9vw,11px);letter-spacing:0.25em;color:rgba(255,255,255,0.22);text-transform:uppercase;margin-bottom:clamp(0.5rem,1.5vh,1rem);}
.ext-title{font-size:clamp(32px,6vw,72px);font-weight:900;color:#fff;line-height:0.88;letter-spacing:-0.03em;text-transform:uppercase;margin-bottom:0.25rem;}
.ext-subtitle{font-size:clamp(10px,1.2vw,16px);letter-spacing:0.2em;color:rgba(255,255,255,0.22);text-transform:lowercase;margin-bottom:clamp(0.5rem,1.5vh,1rem);}
.ext-cap{font-size:clamp(9px,1vw,13px);letter-spacing:0.12em;color:rgba(255,255,255,0.2);text-transform:uppercase;margin-bottom:clamp(0.75rem,2vh,1.5rem);}
.ext-desc{font-size:clamp(11px,1.2vw,15px);color:rgba(255,255,255,0.36);line-height:1.75;margin-bottom:clamp(1.25rem,3vh,2.5rem);}
.ext-full-btn{display:inline-flex;align-items:center;gap:8px;font-size:clamp(10px,1.1vw,14px);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:clamp(8px,1.2vh,13px) clamp(16px,2.5vw,26px);border-radius:99px;background:#fff;color:#000;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.2s;margin-bottom:clamp(0.75rem,2vh,1.5rem);width:fit-content;}
.ext-full-btn:hover{opacity:0.8;}
.ext-ig{display:inline-flex;align-items:center;gap:7px;font-size:clamp(8px,0.9vw,11px);letter-spacing:0.08em;text-transform:uppercase;padding:clamp(5px,0.9vh,9px) clamp(12px,1.8vw,18px);border-radius:99px;background:transparent;border:0.5px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.2s;text-decoration:none;font-family:inherit;width:fit-content;}
.ext-ig:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
#ext-close{position:absolute;top:-15px;right:-15px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.55);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:10;}
#ext-close:hover{background:rgba(255,255,255,0.18);color:#fff;}

/* ══ MODO CINE ══ */
#cine{display:none;position:fixed;inset:0;z-index:700;background:rgba(0,0,0,0.99);align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;}
#cine.show{display:flex;}
#cine-frame{width:min(calc(84vh * 9 / 16),84vw);max-width:400px;aspect-ratio:9/16;border-radius:16px;border:none;background:#111;}
#cine-back{font-size:clamp(9px,1vw,12px);letter-spacing:0.12em;color:rgba(255,255,255,0.3);text-transform:uppercase;background:transparent;border:none;cursor:pointer;font-family:inherit;transition:color 0.2s;padding:0.5rem 1.5rem;}
#cine-back:hover{color:#fff;}

/* ══ TOUCH: show overlay on tap ══ */
@media (hover:none){
  .pitem .pover{opacity:1;background:rgba(0,0,0,0.62);}
  .pitem img,.pitem .pcv{transform:none !important;}
}

/* ══ RESPONSIVE ══ */
@media (max-width:900px){
  .hero-robot{display:none;}
}

@media (max-width:768px){
  nav{padding:0.9rem 1.5rem;}
  .nav-r{display:none;}
  .ham{display:flex;}
  .dots{right:0.6rem;gap:8px;}
  .dot{width:5px;height:5px;}
  /* Hero: slightly above center + solid shadow */
  .hero-text{justify-content:center;padding-bottom:22vh;}
  .hero-name{font-weight:900;text-shadow:-10px 12px 0 #000,-11px 13px 0 #000,-12px 14px 0 #000;}
  .s2-wrap{padding-top:5rem;padding-left:1.25rem;padding-right:1.25rem;}
  .ext-grid{grid-template-columns:repeat(2,1fr);}
  /* About: compact layout to fit screen */
  .ab{min-height:0;height:100%;padding:5rem 1.25rem 1rem;overflow-y:auto;}
  .ab-eyebrow{margin-bottom:0.75rem;}
  .ab-top{grid-template-columns:1fr;gap:0.75rem;}
  .ab-right{margin-top:0;}
  .ab-headline{margin-bottom:0.15em;}
  .ab-sub-row{margin-bottom:0.75rem;padding-top:0.35rem;}
  .ab-body p{font-size:13px;line-height:1.55;margin-bottom:0.45em;}
  .ab-sectors{grid-template-columns:1fr 1fr;gap:5px;}
  .ab-sector{min-height:clamp(72px,18vw,110px);padding:0.75rem 0.85rem;}
  .ab-sector-t{font-size:clamp(13px,3.5vw,18px);margin-bottom:2px;}
  .ab-sector-d{font-size:11px;line-height:1.35;}
  .ab-sector.has-vid.play .ab-sector-t{transform:scale(1.15);}
  .ab-bottom{padding-top:0.85rem;}
  .ab-caps{gap:5px;margin-bottom:0.5rem;}
  .ab-cap{font-size:10px;padding:5px 11px;}
  .ab-tools-row{gap:4px;}
  .ab-tool{font-size:9px;padding:3px 8px;}
  /* Modals */
  #modal-ov{padding:1rem;}
  #modal{flex-direction:column;overflow-y:auto;max-height:88vh;gap:1.25rem;}
  #modal-img{width:100%;}
  #ext-ov{padding:1rem;}
  #ext-modal{flex-direction:column;overflow-y:auto;max-height:88vh;padding:0.5rem;}
  #ext-vid-wrap{width:min(72vw,280px);align-self:center;}
  /* Contact */
  .c-email{font-size:clamp(13px,4.5vw,28px);}
  .c-links{gap:7px;}
  .c-link{padding:8px 14px;}
}

@media (max-width:480px){
  nav{padding:0.85rem 1.25rem;}
  .hero-ey{font-size:10px;}
  .hero-logo img{width:88vw;}
  .hero-name{font-size:clamp(42px,15vw,80px);text-shadow:-7px 9px 0 #000,-8px 10px 0 #000;}
  .ext-grid{grid-template-columns:1fr 1fr;}
  .filters{gap:5px;}
  .fbtn{font-size:10px;padding:4px 11px;}
  .ab{padding:4.5rem 1rem 1.75rem;}
  .ab-sectors{grid-template-columns:1fr 1fr;gap:6px;}
  .ab-sector{min-height:100px;}
  .c-email{font-size:clamp(12px,4vw,22px);}
}

/* ── Grid: 3 col desktop ── */
.proj-grid{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  grid-auto-rows:auto !important;
  gap:5px !important;
}
.pitem{aspect-ratio:16/10 !important;}
.pitem-bg{position:absolute;inset:0;}
.pitem-bg img,.pitem-bg video,.pitem .pcv{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 0.4s;
}
.pitem:hover .pitem-bg img,
.pitem:hover .pitem-bg video{transform:scale(1.04);}

@media(max-width:900px){
  .proj-grid{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:600px){
  .proj-grid{grid-template-columns:repeat(2,1fr) !important;gap:4px !important;}
}

/* ── Work: paginas deslizables ── */
.filters{align-items:center;}
.pager{margin-left:auto;display:flex;align-items:center;gap:10px;user-select:none;}
.pager.hide{visibility:hidden;}
.pg-btn{width:34px;height:34px;border-radius:50%;border:0.5px solid rgba(255,255,255,0.25);background:transparent;color:#f5f5f3;font-size:16px;line-height:1;cursor:pointer;font-family:inherit;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.pg-btn:hover:not(:disabled){background:#f5f5f3;color:#000;border-color:#f5f5f3;}
.pg-btn:disabled{opacity:0.2;cursor:default;}
.pg-count{font-size:clamp(10px,1.1vw,13px);letter-spacing:0.15em;color:rgba(255,255,255,0.45);font-variant-numeric:tabular-nums;min-width:60px;text-align:center;}
.pg-count #pg-cur{color:#f5f5f3;}
.proj-grid.paged{display:block !important;overflow:hidden;position:relative;}
.proj-track{display:flex;transition:transform 0.7s cubic-bezier(.77,0,.175,1);will-change:transform;}
.proj-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;align-content:start;padding-right:0;}
.pg-dots{display:flex;gap:7px;justify-content:center;margin-top:clamp(0.6rem,1.5vh,1rem);}
.pg-dots.hide{display:none;}
.pg-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.2);border:none;padding:0;cursor:pointer;transition:all 0.3s;}
.pg-dot.on{background:#fff;width:20px;border-radius:3px;}
@media(max-width:900px){.proj-page{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.proj-page{grid-template-columns:repeat(2,1fr);gap:4px;}.pg-btn{width:30px;height:30px;font-size:14px;}.pager{gap:6px;}}

/* ── Modal media wrap ── */
#modal-media-wrap{
  flex:0 0 auto;
  width:clamp(220px,65vw,940px);
  max-height:min(93vh,900px);
  aspect-ratio:16/10;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  transition:aspect-ratio 0.25s,width 0.25s;
}
#modal-media{width:100%;height:100%;}
#modal-media img,#modal-media video{
  width:100%;height:100%;
  object-fit:contain;display:block;
  border-radius:0;
  background:#000;
}
#modal-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(0.5rem,2vh,1.5rem) 0.5rem;min-width:0;min-width:220px;overflow-y:auto;max-height:min(93vh,900px);}

/* ── Gallery nav ── */
.mgal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;
  background:rgba(0,0,0,0.55);
  border:0.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.75);
  border-radius:50%;cursor:pointer;
  font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;z-index:5;padding:0;
}
.mgal-nav:hover{background:rgba(0,0,0,0.88);color:#fff;}
.mgal-nav.hidden{display:none;}
#mgal-prev{left:8px;}
#mgal-next{right:8px;}

/* ── Thumb strip ── */
.modal-thumbs{
  display:flex;gap:5px;flex-wrap:wrap;
  margin-bottom:clamp(0.75rem,2vh,1.5rem);
}
.modal-thumbs.hidden{display:none;}
.m-thumb{
  width:58px;height:36px;
  border-radius:5px;overflow:hidden;
  cursor:pointer;opacity:0.38;flex-shrink:0;
  border:1px solid transparent;
  transition:opacity 0.18s,border-color 0.18s;
}
.m-thumb.on{opacity:1;border-color:rgba(255,255,255,0.45);}
.m-thumb:hover{opacity:0.75;}
.m-thumb img,.m-thumb video{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ── Modal responsive ── */
@media(max-width:768px){
  #modal-ov{padding:0.25rem;}
  #modal{flex-direction:column;overflow-y:auto;max-height:96vh;gap:0.75rem;}
  #modal-media-wrap{width:100%;max-height:70vw;transition:none;}
  #modal-info{max-height:none;padding:0.5rem 0.25rem;min-width:0;}
}

/* ══ TÍTULOS WORK/LAB MÁS GRANDES ══ */
.pname{font-size:clamp(14px,1.9vw,24px) !important;font-weight:800;}
.pclient{font-size:clamp(11px,1.1vw,14px) !important;color:rgba(255,255,255,0.75) !important;}
.ptag{font-size:clamp(10px,0.9vw,13px) !important;color:rgba(255,255,255,0.78) !important;}
.ext-card-title{font-size:clamp(22px,3.2vw,40px) !important;}
.ext-cap-lbl{font-size:clamp(10px,1vw,13px) !important;color:rgba(255,255,255,0.82) !important;}

/* ══ TEXTO GRIS → CASI BLANCO ══ */
/* Nav */
.nav-r a{color:rgba(255,255,255,0.72) !important;font-size:10px !important;}
.lang-btn{color:rgba(255,255,255,0.72) !important;}
/* Hero */
.hero-ey{color:rgba(255,255,255,0.68) !important;font-size:clamp(10px,1.1vw,13px) !important;}
.hero-sub{color:rgba(255,255,255,0.70) !important;font-size:clamp(11px,1.2vw,15px) !important;}
.hero-scroll{color:rgba(255,255,255,0.50) !important;}
/* Tabs y filtros */
.tab{color:rgba(255,255,255,0.65) !important;}
.fbtn{color:rgba(255,255,255,0.72) !important;}
/* Lab */
.lab-intro{color:rgba(255,255,255,0.82) !important;font-size:clamp(14px,1.7vw,22px) !important;}
.lab-label{color:rgba(255,255,255,0.62) !important;font-size:clamp(10px,1vw,13px) !important;}
/* About */
.ab-eyebrow{color:#bbb !important;}
.ab-sub-dot{color:rgba(255,255,255,0.55) !important;}
.ab-body p{color:#eaeaea !important;font-size:clamp(14px,1.3vw,17px) !important;}
.ab-cap{color:rgba(255,255,255,0.88) !important;}
.ab-tool{color:#ccc !important;font-size:clamp(10px,1vw,13px) !important;}
/* Modal Work */
.m-client{color:rgba(255,255,255,0.72) !important;font-size:clamp(10px,1.1vw,14px) !important;}
.m-desc{color:rgba(255,255,255,0.82) !important;font-size:clamp(13px,1.4vw,18px) !important;}
.m-tag{color:rgba(255,255,255,0.78) !important;font-size:clamp(10px,1vw,13px) !important;}
.m-behance{color:rgba(255,255,255,0.72) !important;}
/* Modal Extremia */
.ext-series{color:rgba(255,255,255,0.68) !important;font-size:clamp(10px,1.1vw,13px) !important;}
.ext-subtitle{color:rgba(255,255,255,0.68) !important;font-size:clamp(11px,1.3vw,17px) !important;}
.ext-cap{color:rgba(255,255,255,0.65) !important;font-size:clamp(11px,1.1vw,14px) !important;}
.ext-desc{color:rgba(255,255,255,0.82) !important;font-size:clamp(13px,1.4vw,17px) !important;}
.ext-ig{color:rgba(255,255,255,0.70) !important;}
/* Contact */
.c-invite{color:rgba(255,255,255,0.75) !important;font-size:clamp(16px,2.2vw,28px) !important;}
.c-link{color:rgba(255,255,255,0.72) !important;font-size:clamp(10px,1.1vw,14px) !important;}
.c-footer{color:rgba(255,255,255,0.48) !important;font-size:clamp(10px,1vw,13px) !important;}
#cine-back{color:rgba(255,255,255,0.70) !important;}

/* ══ LAB: ext-vid-wrap adaptivo ══ */
#ext-vid-wrap{
  width:clamp(180px,38vw,480px) !important;
  max-height:min(88vh,840px) !important;
  aspect-ratio:9/16;
  transition:aspect-ratio 0.25s,width 0.25s !important;
}
#ext-vid{object-fit:contain !important;}
#ext-modal{max-width:min(97vw,1200px) !important;align-items:flex-start !important;}

@media(max-width:768px){
  #ext-vid-wrap{width:min(72vw,300px) !important;max-height:65vw !important;}
}
/* ── Media loading indicator (modal + extremia) ── */
#modal-media-wrap.is-loading::before,#ext-vid-wrap.is-loading::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.07) 50%,transparent 70%);
  background-size:200% 100%;animation:mshimmer 1.3s linear infinite;
}
#modal-media-wrap.is-loading::after,#ext-vid-wrap.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:3;pointer-events:none;
  border:2px solid rgba(255,255,255,0.22);border-top-color:#fff;border-radius:50%;
  animation:mspin 0.8s linear infinite;
}
@keyframes mspin{to{transform:rotate(360deg);}}
@keyframes mshimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
@media(prefers-reduced-motion:reduce){
  #modal-media-wrap.is-loading::before,#ext-vid-wrap.is-loading::before{animation:none;}
  #modal-media-wrap.is-loading::after,#ext-vid-wrap.is-loading::after{animation-duration:2.4s;}
}
.m-thumb:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1;}