@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
:root{--petro:#09121c;--aqua:#b3ece6;--bone:#f1f0f0;--coral:#eb455d;--muted:#95a6ae}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--petro);color:var(--bone);font-family:Montserrat,Arial,sans-serif}a{color:inherit;text-decoration:none}header{height:88px;padding:24px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}header img{width:30px}.back{margin-left:auto;margin-right:44px;font-size:10px;letter-spacing:.18em}.back span{color:var(--coral);font-size:20px;margin-left:12px}.hamburger{font-size:25px;font-weight:300}.wrap{width:88%;max-width:1440px;margin:auto}.hero{display:grid;grid-template-columns:43% 57%;min-height:680px}.hero-copy{padding:65px 8% 38px 14%;display:flex;flex-direction:column;position:relative;z-index:1}.eyebrow{font-size:9px;letter-spacing:.15em;color:var(--muted)}.client{font-size:17px;margin:65px 0 20px;color:var(--aqua)}h1{font-weight:500;letter-spacing:-.065em;line-height:1.02;font-size:clamp(50px,5.7vw,92px);margin:0 -12% 60px 0}h1 em{font-style:normal;color:var(--aqua)}.hero-bottom{margin-top:auto;display:flex;justify-content:space-between;font-size:11px;line-height:1.7;color:var(--muted)}.down{font-size:30px;color:var(--coral)}.hero-photo{position:relative;overflow:hidden}.hero-photo>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:55% center}.hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#09121c44,transparent 40%,#09121c00 65%,#09121c22)}.photo-line{position:absolute;right:24px;bottom:25px;z-index:1;font-size:9px;letter-spacing:.16em}.section-label{color:var(--aqua);font-size:10px;letter-spacing:.15em;line-height:1.6}h2{font-weight:400;font-size:clamp(30px,3.3vw,52px);line-height:1.16;letter-spacing:-.045em;margin:22px 0 32px}h2 span{color:var(--coral)}p{font-size:14px;line-height:1.85;color:#bbc4c9}.intro{padding:112px 0;display:grid;grid-template-columns:26% 74%}.intro h2{margin-top:0}.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:920px}.intro-cols p{margin:0}.tags{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;font-size:8px;letter-spacing:.08em;color:var(--muted)}.monitor-section{background:#0b1822;padding-top:70px}.device-title{display:flex;justify-content:space-between;align-items:start}.device-title h2{margin-top:0;width:62%;font-size:38px}.device-scene{position:relative;background:linear-gradient(#09121c44,#09121c00),url('assets/laboratorio.webp') center 61%/cover;display:flex;justify-content:center;align-items:center;isolation:isolate}.monitor-scene{height:610px;padding-top:16px}.monitor{position:relative;width:64%;max-width:920px;filter:drop-shadow(0 26px 22px #0009);transform:perspective(1800px) rotateY(-5deg)}.monitor-display{border:12px solid #121415;border-bottom:0;border-radius:13px 13px 0 0;aspect-ratio:16/9;position:relative;background:#000;overflow:hidden}.monitor-display img{width:100%;height:100%;object-fit:cover}.device-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff99;border-radius:50%;background:#09121c77;color:white;padding-left:4px;font-size:19px;backdrop-filter:blur(6px)}.monitor-chin{height:30px;background:linear-gradient(#202429,#11161a);border-radius:0 0 12px 12px;display:grid;place-items:center}.monitor-chin i{width:4px;height:4px;border-radius:50%;background:#b3ece688}.monitor-neck{height:65px;width:14%;margin:auto;background:linear-gradient(90deg,#111820,#394046,#141a1f);clip-path:polygon(27% 0,73% 0,85% 100%,15% 100%)}.monitor-base{height:12px;width:34%;margin:auto;background:linear-gradient(#3a4147,#151b20);border-radius:50% 50% 4px 4px}.caption{display:flex;align-items:center;justify-content:space-between;padding:25px 0}.caption span{font-size:9px;letter-spacing:.12em;color:var(--aqua)}.caption p{font-size:12px;margin:0}.worlds{padding:110px 0 75px}.mosaic-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.mosaic-head h2{margin-bottom:0}.mosaic-head p{max-width:340px;margin:0 0 3px 45px;font-size:13px}.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 12px;margin-top:44px}.game{min-width:0}.game-image{aspect-ratio:4/3;position:relative;overflow:hidden;background:#15202a}.game-image img{width:100%;height:100%;object-fit:cover}.game-index{position:absolute;left:9px;top:9px;font-size:9px;background:#09121c88;padding:4px 6px}.play{position:absolute;bottom:10px;right:10px;font-size:10px;border:1px solid #ffffff88;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#09121c66}.game h3{font-weight:400;font-size:10px;line-height:1.5;margin:11px 0 0;color:#cbd6da}.grid-foot{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;margin-top:30px;padding-top:17px;font-size:8px;letter-spacing:.12em;color:var(--muted)}.photos{padding:65px 0 100px}.photos>h2{margin-bottom:42px}.photo-composition{display:grid;grid-template-columns:1.2fr .85fr 1fr;grid-template-rows:300px 260px;gap:16px}.detail{margin:0;position:relative;overflow:hidden}.detail img{width:100%;height:100%;object-fit:cover}.detail figcaption{position:absolute;left:16px;bottom:15px;font-size:8px;letter-spacing:.12em;text-shadow:0 1px 5px #000}.detail:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0006);pointer-events:none}.hand{grid-column:1;grid-row:1}.hand img{width:200%;height:180%;max-width:none;object-fit:cover;object-position:center;position:absolute;left:-85%;top:-46%}.cast{grid-column:2/4;grid-row:1}.cast img{object-position:50% 32%}.cards{grid-column:1/3;grid-row:2}.cards img{position:absolute;max-width:none;width:140%;height:300%;left:-18%;top:-197%;object-fit:cover}.cameras{grid-column:3;grid-row:2}.cameras img{width:230%;height:220%;max-width:none;position:absolute;left:-125%;top:0;object-fit:cover}.photo-note{display:none}.tablet-section{background:#101e27;padding:100px 0}.tablet-layout{display:grid;grid-template-columns:36% 64%;align-items:center}.tablet-copy p{max-width:330px}.tablet-label{font-size:8px;letter-spacing:.12em;color:var(--aqua);margin-top:30px}.tablet-stage{position:relative;padding:65px 25px 65px 55px;background:linear-gradient(90deg,#101e27,#101e2700 45%),url('assets/laboratorio.webp') center/cover;min-height:470px;display:flex;align-items:center}.tablet{position:relative;width:100%;aspect-ratio:4/3;border:17px solid #101317;border-radius:32px;box-shadow:0 0 0 2px #424b50,0 22px 30px #0009;transform:perspective(1300px) rotateY(-13deg) rotateZ(-5deg);overflow:hidden;background:#000}.tablet img{height:100%;width:100%;object-fit:cover}.tablet-camera{position:absolute;left:50%;top:-10px;width:5px;height:5px;border-radius:50%;background:#33454f}.tablet-shadow{position:absolute;bottom:35px;left:20%;width:65%;height:22px;background:#0009;filter:blur(15px);border-radius:50%}.closing{padding:100px 0 65px}.closing>p{max-width:680px}.closing-line{height:1px;background:#ffffff25;margin:65px 0 32px}.next{max-width:none!important;display:flex;justify-content:space-between;align-items:center;font-size:20px}.next span{color:var(--aqua)}footer{padding:30px 6%;display:flex;align-items:center;gap:24px;border-top:1px solid #ffffff15;font-size:9px;letter-spacing:.12em;color:var(--muted)}footer img{width:30px}footer span:last-child{margin-left:auto}@media(max-width:750px){header{height:72px}.wrap{width:88%}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:40px 6%}.client{margin-top:35px}h1{font-size:64px;margin-bottom:30px}.hero-photo{height:420px}.hero-photo>img{object-position:50%}.intro{grid-template-columns:1fr;padding:65px 0;gap:24px}.intro-cols{grid-template-columns:1fr;gap:20px}.device-title{display:block}.device-title h2{width:100%;font-size:32px;margin-top:20px}.monitor-scene{height:340px}.monitor{width:88%}.monitor-display{border-width:7px}.monitor-chin{height:18px}.monitor-neck{height:35px}.caption{display:block}.caption p{margin-top:10px}.worlds{padding:65px 0}.mosaic-head{display:block}.mosaic-head p{margin:20px 0 0}.game-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}.game h3{font-size:11px}.photos{padding:30px 0 65px}.photo-composition{grid-template-columns:1fr 1fr;grid-template-rows:220px 240px 220px}.hand{grid-column:1;grid-row:1}.cameras{grid-column:2;grid-row:1}.cast{grid-column:1/3;grid-row:2}.cards{grid-column:1/3;grid-row:3}.tablet-section{padding:65px 0}.tablet-layout{grid-template-columns:1fr}.tablet-stage{padding:50px 20px;min-height:350px}.tablet-copy p{max-width:none}.tablet{border-width:12px;border-radius:23px}.closing{padding:65px 0 30px}.next{display:block;font-size:17px}.next span{display:block;margin-top:20px}footer{flex-wrap:wrap;font-size:8px}footer span:last-child{margin-left:0;width:100%}}
.cast img{object-position:center top}

/* V2: apertura de marca y fotografías completas sobre bases diagonales. */
.opening{height:calc(100svh - 88px);min-height:600px;position:relative;overflow:hidden;background:#09121c}.opening-films{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.opening-films img{width:100%;height:100%;object-fit:cover;filter:brightness(.63)}.opening-films img:nth-child(1){object-position:44% center}.opening-films img:nth-child(2){object-position:53% center}.opening-films img:nth-child(3){object-position:58% center}.opening-shade{position:absolute;inset:0;background:linear-gradient(180deg,#09121c33,#09121c55 45%,#09121cee)}.opening-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.opening-brand img{width:150px;filter:drop-shadow(0 8px 30px #0008)}.opening-brand span{font-size:19px;letter-spacing:.4em;margin:40px 0 0 7px}.opening-brand p{font-size:9px;letter-spacing:.2em;color:#f1f0f0bd;margin-top:17px}.opening-scroll{position:absolute;bottom:36px;width:100%;text-align:center;font-size:9px;letter-spacing:.15em;color:#b3ece6}.curtain-edge{height:7px;position:relative;z-index:2;background:#09121c;box-shadow:0 -12px 45px #0007}.photo-gallery{padding:80px 0 95px;background:radial-gradient(ellipse at 60% 50%,#182d38,#09121c 70%);overflow:hidden}.photo-gallery h2{margin-bottom:20px}.photo-intro{max-width:500px}.photo-exhibit{display:grid;grid-template-columns:1fr 1fr;gap:50px 90px;padding:65px 38px 0}.photo-object{margin:0;position:relative;padding-bottom:66px;isolation:isolate}.photo-upright{position:relative;z-index:2;border:5px solid #151b1e;border-bottom-width:9px;box-shadow:0 16px 28px #0008,0 0 0 1px #ffffff17;background:#0a1116}.photo-upright img{display:block;width:100%;height:auto;object-fit:contain}.photo-base{position:absolute;left:-7%;right:-9%;bottom:42px;height:65px;z-index:0;transform:skewX(-24deg) rotate(-7deg);background:linear-gradient(155deg,#53636a33,#09121c88),url('assets/laboratorio.webp') center 90%/cover;border-top:1px solid #87979a88;border-right:1px solid #52636d;box-shadow:8px 14px 20px #0009}.photo-base:after{content:'';position:absolute;top:100%;height:9px;left:0;right:0;background:linear-gradient(90deg,#0a131c,#2d3d47,#0a131c)}.photo-object figcaption{position:absolute;bottom:0;font-size:9px;letter-spacing:.14em;color:#95a6ae}.object-a{grid-column:1;margin-top:90px}.object-b{grid-column:2;margin-top:0;margin-bottom:90px}.object-c{grid-column:1/3;width:70%;margin:0 auto}.object-c .photo-base{transform:skewX(24deg) rotate(5deg)}.live-context{padding:90px 0;display:grid;grid-template-columns:30% 70%;border-bottom:1px solid #ffffff20}.live-context h2{margin-top:0}.live-context p{max-width:520px}.live-context a{display:inline-block;margin-top:20px;font-size:10px;letter-spacing:.12em;color:#b3ece6;border-bottom:1px solid #b3ece655;padding-bottom:12px}@media(max-width:750px){.opening{height:calc(100svh - 72px);min-height:500px}.opening-films{grid-template-columns:1fr 1fr}.opening-films img:nth-child(3){display:none}.opening-brand img{width:110px}.opening-brand span{font-size:15px;letter-spacing:.28em}.opening-brand p{font-size:8px}.photo-gallery{padding:60px 0}.photo-exhibit{padding:40px 14px 0;display:block}.photo-object{margin:0 0 60px!important;width:100%}.photo-base{left:-3%;right:-3%;height:45px;bottom:45px}.object-b{margin-left:10px!important;width:calc(100% - 10px)}.object-c{width:100%}.live-context{grid-template-columns:1fr;gap:25px;padding:65px 0}}

.intro-cols p:last-child:nth-child(3){grid-column:1/-1;max-width:820px}

.live-context{display:block}.context-intro{display:grid;grid-template-columns:30% 70%;margin-bottom:40px}.photo-credit{font-size:11px;color:#95a6ae}.website-proof{margin:0}.website-viewport{position:relative;aspect-ratio:1920/928;overflow:hidden;background:#111821;border:1px solid #ffffff20}.website-viewport img{position:absolute;top:-12.1%;left:0;width:100%;height:auto}.website-proof figcaption{font-size:8px;letter-spacing:.1em;color:#95a6ae;line-height:1.6;margin-top:12px}.website-proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0 25px}.primary-proof{width:90%;margin:0 auto}.live-context>a{margin-top:25px}@media(max-width:750px){.context-intro{grid-template-columns:1fr;gap:24px}.website-proofs{grid-template-columns:1fr;gap:28px}.primary-proof{width:100%}}
/* V3: misma máscara del resto de los casos; dos pantallas y cortina. */
header{position:absolute;top:0;left:0;right:0;z-index:1000;background:linear-gradient(#09121c88,transparent);border:0}.journey{position:relative;height:300svh;background:#09121c}.journey-stage{position:sticky;top:0;height:100svh;overflow:hidden;width:100%;background:#09121c}.journey-stage.is-held{position:fixed;inset:0;z-index:0}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scene-out{opacity:1}.scene-in{opacity:0;object-position:center}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,#09121c99,transparent 55%);opacity:0}.portal{position:absolute;inset:0;width:100%;height:100%;opacity:0}.opening-caption{position:absolute;left:6%;bottom:8%;z-index:4;text-shadow:0 2px 15px #000}.opening-caption>p,.opening-caption>a{font-size:10px;letter-spacing:.14em;color:#b3ece6}.opening-caption h2{font-size:42px;margin:14px 0 28px}.photo-headline{position:absolute;top:50%;left:6%;transform:translateY(-50%);z-index:5;max-width:47%;opacity:0}.photo-headline .client{margin:0 0 20px;color:#b3ece6;font-size:20px}.photo-headline h1{font-size:clamp(48px,6vw,94px);margin:0 0 30px;text-shadow:0 3px 35px #0009}.hero-sub{color:#f1f0f0;font-size:13px}.intro{position:relative;z-index:6;background:#09121c;box-shadow:0 -25px 55px #0006;width:100%;max-width:none;padding:100px 6%}.monitor-section,.worlds,.photo-gallery,.tablet-section,.corporate-context,.closing,footer{position:relative;z-index:7}.screen-clip{width:100%;height:100%;display:block;object-fit:cover}.monitor-display{aspect-ratio:16/9}.tablet{aspect-ratio:16/10}.monitor-display .screen-clip,.tablet .screen-clip{height:100%;width:100%}.brick-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:30px 10px;padding:35px 0 15px;transform:perspective(1800px) rotateX(5deg) rotateY(-7deg) rotateZ(-5deg);transform-origin:center}.brick{grid-column:span 2}.brick:nth-child(6){grid-column:2/span 2;grid-row:2}.brick:nth-child(7){grid-column:4/span 2;grid-row:2}.brick:nth-child(8){grid-column:6/span 2;grid-row:2}.brick:nth-child(9){grid-column:8/span 2;grid-row:2}.brick .game-image{aspect-ratio:16/10;clip-path:polygon(8% 0,100% 0,92% 100%,0% 100%);background:#101e27}.brick video{height:100%;width:100%;object-fit:cover}.brick .game-index{left:13%;background:#09121c77}.brick h3{padding-left:8%;font-size:10px}.worlds{padding-top:100px;padding-bottom:90px}.worlds .grid-foot{margin-top:35px}.motion-toggle{display:block;margin:35px 0 0 auto;border:1px solid #b3ece655;border-radius:0;background:transparent;color:#b3ece6;font:400 10px Montserrat,Arial;padding:10px 15px;cursor:pointer}.motion-toggle:focus-visible{outline:2px solid #eb455d;outline-offset:5px}.corporate-context{padding:90px 0 50px;background:#0c1822}.corporate-context>.wrap>p{max-width:630px}.corporate-wide{margin:45px 0 25px}.corporate-wide>img{display:block;width:100%;height:auto}.corporate-wide figcaption{margin-top:16px;font-size:8px;letter-spacing:.15em;color:#95a6ae}.context-bottom{display:flex;align-items:start;justify-content:space-between;gap:40px}.context-bottom>p{font-size:11px;max-width:550px}.pdf-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;padding-top:14px}.pdf-links a{font-size:10px;color:#b3ece6}.static-corporate,.static-photo{height:100svh;position:relative;overflow:hidden}.static-corporate>img:first-child,.static-photo>img{width:100%;height:100%;object-fit:cover}.static-brand{position:absolute;left:6%;bottom:6%;width:55px;filter:drop-shadow(0 2px 8px #000)}.static-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#09121cbf,transparent 70%)}.static-review .photo-headline{opacity:1;z-index:2}.static-review .intro{box-shadow:0 -25px 55px #0006}.static-review .motion-toggle{display:none}
@media(max-width:750px){.journey{height:240svh}.photo-headline{left:6%;max-width:83%;top:auto;bottom:9%;transform:none}.photo-headline h1{font-size:55px;text-shadow:0 2px 30px #000}.scene-in,.static-photo>img{object-position:60% center}.photo-headline .client{font-size:16px}.intro{padding:65px 6%}.brick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 8px;padding:20px 0;transform:rotateZ(-3deg)}.brick,.brick:nth-child(n){grid-column:auto;grid-row:auto}.brick:last-child{grid-column:1/3;width:50%;justify-self:center}.brick h3{font-size:9px}.context-bottom{display:block}.pdf-links{justify-content:flex-start;gap:20px}.static-photo:after{background:linear-gradient(0deg,#09121ce6,transparent 80%)}.corporate-wide>img{min-height:300px;object-fit:cover;object-position:54% center}.corporate-context{padding:65px 0 40px}.opening-caption{bottom:8%}.opening-caption h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.journey{height:100svh}.journey .scene-out{display:none}.journey .scene-in{opacity:1!important}.journey .scene-shade{opacity:1!important}.journey .photo-headline{opacity:1!important}.opening-caption,.portal{display:none!important}.journey-stage{position:relative!important}.brick-grid{transform:none}}

.scene-video{opacity:0;object-fit:cover;pointer-events:none}@media(prefers-reduced-motion:reduce){.scene-video{display:none!important}}
