@property --coral{syntax:'';inherits:true;initial-value:#e94863} @property --a2{syntax:'';inherits:true;initial-value:#2fe3d0} @property --a3{syntax:'';inherits:true;initial-value:#ffc24b} @property --bg{syntax:'';inherits:true;initial-value:#04060a} /* NeuroPixel+ — one 3D scene, text on top. Brand: teal #263b45 + coral #e94863 */ :root{ --bg:#0a0c0d; --bg-2:#101314; --teal:#1b1f21; --coral:#e94863; --coral-2:#ff6b7f; --ink:#ffffff; --muted:#9aa1a3; --line:rgba(255,255,255,.11); --a2:#2fe3d0; --a3:#ffc24b; --glow:rgba(233,72,99,.42); --glow-2:rgba(47,227,208,.32); --pad:clamp(20px,5vw,72px); --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--coral);color:#fff} a{color:inherit} img,video{display:block;max-width:100%} h1,h2,h3{margin:0;font-family:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;font-weight:800;font-variation-settings:'opsz' 72;line-height:1.0;letter-spacing:-.025em} em{font-style:normal;color:var(--coral)} .px{font-family:'Silkscreen',ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400} a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:4px} html.locked{overflow:hidden} body.dragging{cursor:grabbing} /* the 3D stage lives behind everything */ #stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;cursor:grab;touch-action:pan-y} body.dragging #stage{cursor:grabbing} /* entry gate */ .gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);text-align:center;overflow:hidden;transition:opacity .8s var(--ease),visibility .8s,background-color .5s linear} .gate-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .gate.shards .gate-logo{display:none} .gate.shards .gate-in{position:absolute;left:0;right:0;bottom:min(11vh,96px);display:grid;justify-items:center} .gate-bar{width:min(320px,58vw);height:2px;margin-top:20px;background:rgba(255,255,255,.12);overflow:hidden} .gate-bar i{display:block;width:0;height:100%;background:var(--coral);box-shadow:0 0 14px rgba(233,72,99,.8);transition:width .4s var(--ease)} .gate-log{margin:12px 0 0;color:var(--muted);font-size:.58rem!important;letter-spacing:.18em} .gate.go .gate-btn{animation:gatePulse 2.4s var(--ease) infinite} .gate.open{background:transparent;pointer-events:none} .gate.open .gate-in{opacity:0;transform:translateY(12px);transition:opacity .35s,transform .5s var(--ease)} @keyframes gatePulse{0%,100%{box-shadow:0 0 0 0 rgba(233,72,99,.45)}60%{box-shadow:0 0 0 16px rgba(233,72,99,0)}} .gate.out{opacity:0;visibility:hidden} .gate-logo{width:min(320px,62vw);height:auto;margin:0 auto;animation:float 6s ease-in-out infinite} @keyframes float{50%{transform:translateY(-10px)}} .gate-sub{margin:26px 0 0;color:var(--muted)} .gate-btn{margin-top:34px;padding:16px 30px;border:1px solid rgba(233,72,99,.6);background:none;color:var(--ink);font:inherit;cursor:pointer;transition:background .3s,color .3s,opacity .3s} .gate-btn[disabled]{opacity:.5;cursor:default} .gate-btn:not([disabled]):hover{background:var(--coral);color:#fff} .gate-hint{margin-top:22px;color:rgba(154,161,163,.6);font-size:.6rem!important} /* nav */ .nav{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad);opacity:0;transform:translateY(-12px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s} body.ready .nav{opacity:1;transform:none} .nav-brand img{width:auto;height:46px} .nav-links{display:flex;gap:clamp(16px,2.6vw,34px)} .nav-links a{font:500 .9rem/1 'Space Grotesk',sans-serif;color:var(--muted);text-decoration:none;transition:color .25s} .nav-links a:hover{color:var(--ink)} .btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;background:var(--coral);color:#fff!important;text-decoration:none;font:700 .85rem/1 'Space Grotesk',sans-serif;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:background .25s,transform .25s} .btn:hover{background:var(--coral-2);transform:translateY(-2px)} .btn.ghost{background:none;color:var(--ink)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} .btn.ghost:hover{background:rgba(255,255,255,.08)} .btn.big{padding:18px 26px;font-size:1rem} @media(max-width:760px){.nav-links{display:none}.nav-brand img{height:38px}} /* scenes: text floats over the 3D */ main{position:relative;z-index:10} .scene{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px var(--pad) 90px;pointer-events:none} .scene-in{max-width:min(560px,92vw);opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .scene.on .scene-in{opacity:1;transform:none} .scene-in.center{margin:0 auto;text-align:center} .scene-in.right{margin-left:auto;text-align:right} .scene-in.right .tags{justify-content:flex-end} .eyebrow,.num{color:var(--coral);margin:0 0 20px} .scene h1{font-size:clamp(2.8rem,8.2vw,7rem);font-weight:900;letter-spacing:-.03em} .scene h2{font-size:clamp(2rem,5.4vw,4.2rem)} .lead{margin:24px 0 0;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);text-shadow:0 2px 20px rgba(10,12,13,.8)} .tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0} .tags li{padding:8px 12px;border:1px solid var(--line);color:var(--muted);font-size:.6rem;background:rgba(10,12,13,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .hint{margin-top:34px;color:rgba(154,161,163,.75);font-size:.6rem!important} .cue{position:absolute;left:var(--pad);bottom:30px;display:flex;align-items:center;gap:12px;color:var(--muted);text-decoration:none;pointer-events:auto} .cue i{width:38px;height:2px;background:linear-gradient(90deg,var(--coral) 50%,transparent 50%) 0 0/8px 2px;animation:cue 1s linear infinite} @keyframes cue{to{background-position:8px 0}} .ui-solid{pointer-events:auto} .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px} .foot-line{margin-top:30px;color:var(--muted)} /* a soft halo keeps the text readable over the 3D scene */ .scene-in{position:relative} .scene-in::before{content:"";position:absolute;left:50%;top:50%;width:160%;height:200%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(58% 48% at 50% 50%,rgba(8,9,10,.94),rgba(8,9,10,.7) 58%,transparent 80%)} .scene h1,.scene h2{text-shadow:0 6px 40px rgba(8,9,10,.9)} .scene .lead,.scene .px{text-shadow:0 2px 16px rgba(8,9,10,.9)} /* flat area: gallery + lab, the 3D dims behind it */ .flat{position:relative;z-index:10;padding:clamp(70px,10vw,130px) var(--pad);background:linear-gradient(180deg,rgba(10,12,13,0),rgba(10,12,13,.92) 8%,rgba(10,12,13,.96) 92%,rgba(10,12,13,0))} .flat-head{max-width:1100px;margin-bottom:44px} .flat-head h2{font-size:clamp(2rem,5vw,4rem)} .filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .filters button{padding:11px 16px;background:none;border:1px solid var(--line);color:var(--muted);font:inherit;cursor:pointer;transition:all .25s} .filters button:hover{color:var(--ink);border-color:rgba(255,255,255,.35)} .filters button.on{background:var(--coral);border-color:var(--coral);color:#fff} .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:8px;gap:clamp(10px,1.2vw,16px);align-items:start} .card{position:relative;overflow:hidden;background:#131617;transition:opacity .4s,transform .5s var(--ease),filter .4s} .card{grid-row-end:span 30} .card.wide{grid-column:span 2} .card.off{opacity:.07;filter:grayscale(1);transform:scale(.97);pointer-events:none} .card .m{position:relative;display:block;width:100%;line-height:0} .card .m img,.card .m video{width:100%;height:auto;display:block;object-fit:contain;transition:transform 1.1s var(--ease)} .card:hover .m img,.card:hover .m video{transform:scale(1.06)} .card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,9,10,.93));pointer-events:none} .card .t{position:absolute;left:15px;right:15px;bottom:13px;z-index:1;pointer-events:none} .card .t span{color:var(--coral)} .card .t h3{margin-top:6px;font-size:clamp(.92rem,1.3vw,1.18rem);font-weight:500;line-height:1.15} .card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid transparent;transition:border-color .3s} .card:hover::before{border-color:var(--coral)} .imp{background:#0a0a09 url(../img/impervicta-marmol.jpg) center/cover;display:grid!important;place-items:center} .imp{padding:14% 0;background:#0b0e12} .imp img{width:56%!important;margin:0 auto} .txt{display:flex!important;flex-direction:column;justify-content:center;padding:22px;text-decoration:none;background:linear-gradient(135deg,var(--teal),#15181a)} .txt strong{margin-top:10px;font:900 clamp(1.3rem,2.2vw,2rem)/1 'Bricolage Grotesque',sans-serif} .txt .px{color:var(--coral)} @media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.grid{grid-template-columns:1fr}.card.wide{grid-column:span 1}} /* lab strip */ .lab{margin-top:clamp(70px,9vw,120px)} .lab h2{font-size:clamp(1.8rem,4.4vw,3.4rem);margin-top:14px} .lab .lead{max-width:60ch} .strip{display:flex;gap:14px;overflow-x:auto;margin-top:34px;padding-bottom:16px;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--coral) transparent} .strip.drag{cursor:grabbing;scroll-snap-type:none} .strip figure{flex:0 0 clamp(210px,24vw,330px);margin:0;scroll-snap-align:start} .strip img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#131617;pointer-events:none} .strip figcaption{margin-top:10px;color:var(--muted)} /* floating whatsapp */ .wa{position:fixed;right:18px;bottom:18px;z-index:70;display:grid;place-items:center;width:56px;height:56px;background:var(--coral);color:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 10px 30px rgba(233,72,99,.4);opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s var(--ease)} body.ready .wa{opacity:1;transform:none} .wa svg{width:25px;height:25px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} .scene-in{opacity:1;transform:none} } /* ---------- ventana a la 4a dimension ---------- */ #portal{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none; -webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,-999px) var(--y,-999px),#000 0 62%,rgba(0,0,0,.35) 84%,transparent 100%); mask-image:radial-gradient(circle var(--r,0px) at var(--x,-999px) var(--y,-999px),#000 0 62%,rgba(0,0,0,.35) 84%,transparent 100%)} transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .3s;opacity:0} /* ---------- cursor de pixeles ---------- */ body.has-cursor,body.has-cursor *{cursor:none!important} .cur{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .25s} .cur.on{opacity:1} .cur .lbl{position:absolute;left:24px;top:14px;padding:5px 8px;background:var(--coral);color:#fff;font:400 .58rem/1 Silkscreen,monospace;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .25s} .cur.label .lbl{opacity:1;transform:none} .cur-trail{position:fixed;z-index:2147482999;pointer-events:none;width:5px;height:5px;background:rgba(233,72,99,.85);transform:translate(-50%,-50%);animation:trail .55s linear forwards} @keyframes trail{to{opacity:0;transform:translate(-50%,-50%) scale(.2)}} .cur-burst{position:fixed;z-index:2147482998;pointer-events:none;width:12px;height:12px;border:2px solid var(--coral);border-radius:50%;transform:translate(-50%,-50%);animation:burst .6s var(--ease) forwards} @keyframes burst{to{opacity:0;width:150px;height:150px;border-width:1px}} /* ---------- menu radial (clic derecho) ---------- */ .radial{position:fixed;left:0;top:0;z-index:2147482000;width:0;height:0;pointer-events:none} .radial.on{pointer-events:auto} .radial a{position:absolute;left:0;top:0;display:grid;place-items:center;width:104px;height:104px;margin:-52px 0 0 -52px; background:rgba(10,12,13,.92);border:1px solid rgba(233,72,99,.55);color:var(--ink);text-decoration:none; font:400 .56rem/1.3 Silkscreen,monospace;text-transform:uppercase;letter-spacing:.06em;text-align:center; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); opacity:0;transform:scale(.2);transition:opacity .25s,transform .4s var(--ease),background .25s,color .25s} .radial.on a{opacity:1;transform:none} .radial a:hover{background:var(--coral);color:#fff} @media(max-width:820px),(pointer:coarse){.cur,.radial{display:none!important}body.has-cursor,body.has-cursor *{cursor:auto!important}} /* ---------- cursor 4D ---------- */ .cur-cv{position:absolute;left:-32px;top:-32px;width:64px;height:64px;pointer-events:none;filter:drop-shadow(0 0 6px rgba(233,72,99,.35))} .cur .b{position:absolute;width:9px;height:9px;border:2px solid var(--coral);opacity:.9;transition:transform .35s var(--ease),opacity .3s,border-color .3s} .cur .b1{left:-22px;top:-22px;border-right:0;border-bottom:0} .cur .b2{left:13px;top:-22px;border-left:0;border-bottom:0} .cur .b3{left:-22px;top:13px;border-right:0;border-top:0} .cur .b4{left:13px;top:13px;border-left:0;border-top:0} .cur.hot .b1{transform:translate(-10px,-10px)} .cur.hot .b2{transform:translate(10px,-10px)} .cur.hot .b3{transform:translate(-10px,10px)} .cur.hot .b4{transform:translate(10px,10px)} .cur.hot .b{border-color:#fff} .cur.press .b{transform:none;border-color:#fff;opacity:1} .cur.press .cur-cv{transform:scale(.72)} .cur-cv{transition:transform .25s var(--ease)} /* ---------- salto en el tiempo ---------- */ body.warping main,body.warping .nav,body.warping .flat{filter:blur(calc(var(--warp,0) * 7px)) saturate(calc(1 + var(--warp,0) * 1.4));transform:scale(calc(1 + var(--warp,0) * .07))} body.warping{overflow:hidden} .jump-flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(circle at var(--jx,50%) var(--jy,50%),rgba(255,255,255,.9),rgba(233,72,99,.6) 25%,transparent 62%);opacity:0;animation:jump .7s ease-out forwards} @keyframes jump{20%{opacity:.85}100%{opacity:0}} /* ---------- galeria interactiva ---------- */ .card{transform-style:preserve-3d;will-change:transform} .card.tilt{transition:transform .12s linear} .card .m{transform:translateZ(0)} .lb{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(6,12,15,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .lb.on{opacity:1;visibility:visible} .lb-stage{max-width:min(1100px,90vw);max-height:76vh;display:grid;place-items:center} .lb-stage img,.lb-stage video{max-width:min(1100px,90vw);max-height:76vh;width:auto;height:auto;box-shadow:0 40px 120px rgba(0,0,0,.6)} .lb-x{position:absolute;top:22px;right:26px;width:46px;height:46px;background:none;border:1px solid rgba(255,255,255,.3);color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .25s,border-color .25s} .lb-x:hover{background:var(--coral);border-color:var(--coral)} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;background:none;border:1px solid rgba(255,255,255,.25);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;transition:background .25s,border-color .25s} .lb-nav:hover{background:var(--coral);border-color:var(--coral)} .lb-prev{left:clamp(10px,3vw,40px)} .lb-next{right:clamp(10px,3vw,40px)} .lb-meta{position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:center;gap:18px;color:var(--muted)} .lb-meta .lb-client{color:var(--coral)} .lb-meta .lb-title{color:var(--ink)} @media(max-width:640px){.lb-nav{width:42px;height:42px}.lb-meta{flex-direction:column;align-items:center;gap:6px;bottom:16px}} /* ---------- fondo: luz suave detras de los espejos ---------- */ body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background: radial-gradient(70% 55% at 50% 8%,rgba(233,72,99,.16),transparent 62%), radial-gradient(55% 45% at 12% 88%,rgba(120,140,150,.10),transparent 65%), radial-gradient(60% 50% at 88% 78%,rgba(233,72,99,.08),transparent 70%), #0a0c0d} body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml;utf8,")} /* cromática evolutiva: the rule in play, named on screen */ .chroma{position:fixed;left:var(--pad);bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.54rem!important;letter-spacing:.14em;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)} body.ready .chroma{opacity:.85;transform:none} .chroma .ch-k{color:rgba(255,255,255,.35)} .chroma .ch-sw{display:inline-flex;gap:3px} .chroma .ch-sw i{width:9px;height:9px;border-radius:50%;transition:background .5s linear} .chroma .ch-name{color:var(--ink)} .chroma .ch-deg{color:rgba(255,255,255,.3)} @media(max-width:820px){.chroma .ch-deg,.chroma .ch-k{display:none}.chroma{bottom:14px}} /* the room is deep: the copy needs its own pool of darkness to sit in */ .scene .scene-in{position:relative;z-index:2} .scene .scene-in::before{content:'';position:absolute;inset:-14% -18%;z-index:-1;background:radial-gradient(60% 55% at 50% 50%,rgba(2,3,5,.92),rgba(2,3,5,.72) 45%,transparent 78%);pointer-events:none} body.ready main::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 35%,rgba(2,3,5,.55) 100%)} /* ---------- buttons: glass with a lit edge, one language everywhere ---------- */ .btn,.filters button,.gate-btn{position:relative} .btn,.filters button,.gate-btn,.lb-x,.lb-nav,.wa{ isolation:isolate;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)} .btn::after,.filters button::after,.gate-btn::after,.lb-x::after,.lb-nav::after,.wa::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%)} .btn::before,.filters button::before,.gate-btn::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 62%); transform:translateX(-60%);transition:opacity .3s} .btn:hover::before,.filters button:hover::before,.gate-btn:not([disabled]):hover::before{opacity:1;animation:sweep .75s var(--ease)} @keyframes sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}} .btn{padding:14px 22px;background:linear-gradient(180deg,var(--coral-2),var(--coral)); box-shadow:0 8px 26px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.18); letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .3s,background .4s linear} .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.3)} .btn:active{transform:translateY(0) scale(.98)} .btn.ghost{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--coral)} .filters button{padding:11px 17px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted); clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px)); transition:color .25s,background .25s,border-color .25s,transform .25s var(--ease)} .filters button:hover{color:var(--ink);background:rgba(255,255,255,.09);transform:translateY(-1px)} .filters button.on{background:linear-gradient(180deg,var(--coral-2),var(--coral));border-color:transparent;color:#fff; box-shadow:0 8px 22px -12px var(--glow)} .gate-btn{padding:16px 32px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22); clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); transition:background .3s,border-color .3s,color .3s,opacity .3s,transform .25s var(--ease)} .gate.go .gate-btn{border-color:var(--coral)} .gate-btn:not([disabled]):hover{background:var(--coral);border-color:var(--coral);transform:translateY(-2px)} .lb-x,.lb-nav{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);transition:background .25s,border-color .25s,transform .2s var(--ease)} .lb-x:hover{background:var(--coral);border-color:transparent} .lb-nav:hover{background:var(--coral);border-color:transparent} .wa{background:linear-gradient(180deg,var(--coral-2),var(--coral));box-shadow:0 12px 30px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.2);transition:opacity .5s,transform .3s var(--ease),background .4s linear} body.ready .wa:hover{transform:translateY(-3px) scale(1.04)} .lb-sound{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);padding:12px 18px;border:1px solid var(--coral);background:rgba(0,0,0,.55);color:var(--ink);cursor:pointer;z-index:3} .lb-sound:hover{background:var(--coral)} @media(max-width:820px),(pointer:coarse){ .btn,.filters button,.gate-btn,.lb-x,.lb-nav,.wa{-webkit-backdrop-filter:none;backdrop-filter:none} .btn::before,.filters button::before,.gate-btn::before{display:none} body{touch-action:manipulation} body.ready main::after{display:none} } /* ---------- mobile menu ---------- */ .burger{display:none;width:46px;height:46px;padding:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);cursor:pointer; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); place-items:center;align-content:center;justify-items:center;gap:4px;transition:background .25s,border-color .25s} .burger i{display:block;width:18px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"]{background:var(--coral);border-color:transparent} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .menu{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad); background:linear-gradient(180deg,rgba(4,6,10,.93),rgba(4,6,10,.97));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s} body.menu-on .menu{opacity:1;visibility:visible} body.menu-on{overflow:hidden} .menu a{display:flex;align-items:baseline;gap:14px;padding:10px 0;color:var(--ink);text-decoration:none; font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;font-size:clamp(2rem,11vw,3.4rem);line-height:1.05;letter-spacing:-.03em; opacity:0;transform:translateY(18px);transition:opacity .4s var(--ease),transform .5s var(--ease),color .25s} body.menu-on .menu a{opacity:1;transform:none} .menu a:nth-child(1){transition-delay:.06s}.menu a:nth-child(2){transition-delay:.12s} .menu a:nth-child(3){transition-delay:.18s}.menu a:nth-child(4){transition-delay:.24s} .menu a span{color:var(--coral);font-size:.62rem} .menu a:active,.menu a:hover{color:var(--coral)} .menu-foot{margin:26px 0 0;color:var(--muted)} @media(max-width:760px){.burger{display:grid}} @media(min-width:761px){.menu{display:none}} .chroma{padding:6px 10px 6px 0;background:linear-gradient(90deg,rgba(4,6,10,.9) 60%,transparent)} /* ---------- emociones: the visitor chooses how the room feels ---------- */ .feel{position:fixed;right:18px;bottom:88px;z-index:71;display:flex;flex-direction:column;align-items:flex-end;gap:8px; opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)} body.ready .feel{opacity:1;transform:none} .feel-open{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);cursor:pointer; clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:color .25s,background .25s,border-color .25s} .feel-open:hover,.feel.open .feel-open{color:var(--ink);border-color:var(--coral)} .feel-list{display:grid;gap:6px;justify-items:end;pointer-events:none;opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 100%; transition:opacity .35s var(--ease),transform .4s var(--ease)} .feel.open .feel-list{opacity:1;transform:none;pointer-events:auto} .feel-list button{display:flex;align-items:center;gap:9px;padding:9px 13px;background:rgba(10,12,16,.72);border:1px solid var(--line); color:var(--muted);font:400 .62rem/1 Silkscreen,ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .25s,border-color .25s,background .25s} .feel-list button i{width:9px;height:9px;border-radius:50%;background:var(--coral);opacity:.5;transition:opacity .25s,transform .25s} .feel-list button:hover{color:var(--ink);border-color:rgba(255,255,255,.3)} .feel-list button[aria-pressed="true"]{color:var(--ink);border-color:var(--coral)} .feel-list button[aria-pressed="true"] i{opacity:1;transform:scale(1.35);box-shadow:0 0 12px var(--glow)} .feel-list button[data-mood="ternura"] i{background:var(--a2)} .feel-list button[data-mood="calma"] i{background:var(--a3)} .feel-snd i{background:var(--ink)!important;clip-path:polygon(0 30%,40% 30%,70% 0,70% 100%,40% 70%,0 70%);border-radius:0!important} .feel-say{position:fixed;left:50%;bottom:26px;z-index:72;transform:translate(-50%,10px);margin:0;padding:11px 18px; background:rgba(10,12,16,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line); color:var(--ink);letter-spacing:.12em;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--ease)} .feel-say.on{opacity:1;transform:translate(-50%,0)} .btn,.filters button,.wa,.burger,.feel button{translate:var(--mx,0) var(--my,0);transition-property:background,color,border-color,box-shadow,transform,translate;transition-duration:.25s} .wa{translate:var(--mx,0) var(--my,0)} @media(max-width:820px),(pointer:coarse){ .feel{right:14px;bottom:82px} .feel-say{bottom:74px;font-size:.54rem!important;max-width:86vw;text-align:center} .btn,.filters button,.wa,.burger,.feel button{translate:none} } ::view-transition-old(piece),::view-transition-new(piece){animation-duration:.42s;mix-blend-mode:normal} /* ---------- la grieta: the title sequence ---------- */ .gate.shards .gate-in{position:absolute;left:0;right:0;bottom:min(13vh,120px);display:grid;justify-items:center;gap:0} .gate-word{margin:0 0 14px;display:flex;flex-wrap:wrap;justify-content:center;gap:.28em; font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1; font-size:clamp(1.9rem,6.4vw,4.6rem);color:var(--ink)} .gate-word span{display:inline-block;opacity:0;transform:translateY(26px) rotate(3deg);filter:blur(6px); animation:gateWord .9s var(--ease) forwards} .gate-word span:nth-child(1){animation-delay:.25s} .gate-word span:nth-child(2){animation-delay:.38s} .gate-word span:nth-child(3){animation-delay:.51s} .gate-word span:nth-child(4){animation-delay:.64s;color:var(--coral)} @keyframes gateWord{to{opacity:1;transform:none;filter:none}} .gate-sub{margin:0;color:var(--muted);opacity:0;animation:gateWord .8s var(--ease) .8s forwards} .gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;opacity:0;transform:translateY(12px); transition:opacity .6s var(--ease),transform .6s var(--ease)} .gate.go .gate-actions{opacity:1;transform:none} .gate-btn-snd{border-color:var(--line)!important;color:var(--muted)} .gate-btn-snd:not([disabled]):hover{color:#fff} .gate-num{position:absolute;right:clamp(14px,4vw,54px);top:50%;transform:translateY(-50%);z-index:2;pointer-events:none; display:flex;align-items:flex-start;gap:.1em;mix-blend-mode:screen; font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;letter-spacing:-.05em;line-height:.8; font-size:clamp(4.5rem,17vw,13rem);color:rgba(255,255,255,.14)} .gate-num i{font-style:normal;font-size:.22em;color:var(--coral);opacity:.75;margin-top:.5em} .gate-log{position:absolute;left:clamp(14px,4vw,54px);top:50%;margin:0;transform:translateY(-50%);z-index:2; color:var(--muted);font-size:.56rem!important;letter-spacing:.2em;writing-mode:vertical-rl} .gate-bar{position:absolute;left:0;right:0;bottom:0;width:100%;height:2px;margin:0;background:rgba(255,255,255,.08)} .gate-hint{margin-top:20px;color:rgba(154,161,163,.55);font-size:.55rem!important} .gate.open .gate-num,.gate.open .gate-log,.gate.open .gate-bar{opacity:0;transition:opacity .3s} @media(max-width:820px){ .gate-num{font-size:clamp(3.6rem,26vw,8rem);right:10px;top:26%} .gate-log{left:10px;font-size:.5rem!important} .gate.shards .gate-in{bottom:9vh} } /* ---------- llegada al contacto: the words arrive as shards ---------- */ #contacto .wd{display:inline-block;will-change:transform,opacity} #contacto.landed .wd{opacity:0;animation:landWord .8s var(--ease) forwards} #contacto.landed h2 .wd:nth-child(1){animation-delay:.05s} #contacto.landed h2 .wd:nth-child(2){animation-delay:.11s} #contacto.landed h2 .wd:nth-child(3){animation-delay:.17s} #contacto.landed h2 .wd:nth-child(4){animation-delay:.23s} #contacto.landed h2 .wd:nth-child(5){animation-delay:.29s} #contacto.landed .lead .wd{animation-delay:.34s} #contacto.landed .btn{animation:landBtn .7s var(--ease) .5s backwards} @keyframes landWord{ from{opacity:0;transform:translateY(26px) rotate(6deg) scale(1.25);filter:blur(10px)} to{opacity:1;transform:none;filter:none} } @keyframes landBtn{ from{opacity:0;transform:translateY(18px) scale(.86);box-shadow:0 0 60px var(--glow)} to{opacity:1;transform:none} } /* ---------- notas a mano: the studio writing on the glass ---------- */ .note{position:absolute;z-index:3;display:inline-block;pointer-events:none; font-family:'Caveat',ui-rounded,cursive;font-weight:600;font-size:clamp(1.05rem,1.7vw,1.6rem);line-height:1; color:var(--coral);opacity:0;transform:translateY(8px) rotate(-4deg); text-shadow:0 2px 18px rgba(0,0,0,.65);transition:opacity .7s var(--ease) .5s,transform .7s var(--ease) .5s} body.ready .note{opacity:.92;transform:rotate(-4deg)} .note svg{position:absolute;width:58px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75} .note-a{left:6%;top:38%;transform:rotate(-7deg)} .note-a svg{left:100%;top:60%;margin-left:6px} .note-b{right:8%;bottom:26%;transform:rotate(5deg)} .note-b svg{right:100%;bottom:70%;margin-right:6px;transform:scaleX(-1)} .note-card{left:14px;top:12px;font-size:clamp(.95rem,1.2vw,1.2rem);transform:rotate(-3deg);opacity:0} .card:hover .note-card{opacity:.95;transform:rotate(-3deg) translateY(-2px)} @media(max-width:820px){.note-a,.note-b{display:none}.note-card{opacity:.9}} /* ---------- modo verano: the room floods like the poster ---------- */ body.flood{background:var(--bg)} body.flood .card::after{background:linear-gradient(180deg,transparent 40%,rgba(30,8,2,.9))} body.flood .card{background:#1b0d06} body.flood .scene .scene-in::before{background:radial-gradient(60% 55% at 50% 50%,rgba(24,8,2,.9),rgba(24,8,2,.66) 45%,transparent 78%)} body.flood .note{color:#ffd9a8} body.flood .chroma .ch-name,body.flood .feel-list button[aria-pressed="true"]{color:#ffe7c9} /* in flood mode contrast comes from value, like the poster: cream type over hot colour */ body.flood{--ink:#fff4e8} body.flood em,body.flood .card .t span{color:#ffd9a8} body.flood .lead,body.flood .px{color:#f3cdae} body.flood h1,body.flood h2{text-shadow:0 6px 40px rgba(26,7,0,.75)} /* ---------- el puntero de vidrio: transparente, con refracción y reflejo ---------- */ .cur-cv{mix-blend-mode:screen;opacity:.42} /* the shards only add light, never cover */ .cur-glass{position:absolute;left:-33px;top:-33px;width:66px;height:66px;border-radius:50%;pointer-events:none; -webkit-backdrop-filter:blur(2px) saturate(1.35) brightness(1.04); backdrop-filter:blur(2px) saturate(1.35) brightness(1.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 7px 16px rgba(255,255,255,.14), inset 0 -9px 22px rgba(0,0,0,.22), 0 10px 28px -14px rgba(0,0,0,.6); transition:transform .25s var(--ease),width .3s var(--ease),height .3s var(--ease)} .cur-glass::after{content:'';position:absolute;inset:0;border-radius:50%; background:linear-gradient(142deg,rgba(255,255,255,.4),transparent 40%,transparent 60%,rgba(255,255,255,.16)); mix-blend-mode:screen} .cur-glass::before{content:'';position:absolute;inset:-2px;border-radius:50%; box-shadow:inset 0 0 12px rgba(233,72,99,.35);opacity:.9} .cur.hot .cur-glass{width:86px;height:86px;left:-43px;top:-43px} .cur.press .cur-glass{transform:scale(.86)} #portal{mix-blend-mode:screen} /* the portal adds light to the page, it does not hide it */ .portal-glass{position:fixed;left:0;top:0;z-index:80;pointer-events:none;border-radius:50%; width:calc(var(--plr,0px) * 2);height:calc(var(--plr,0px) * 2); transform:translate(calc(var(--plx,-9999px) - var(--plr,0px)),calc(var(--ply,-9999px) - var(--plr,0px))); -webkit-backdrop-filter:blur(2px) saturate(1.25) brightness(1.03); backdrop-filter:blur(2px) saturate(1.25) brightness(1.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 12px 40px rgba(255,255,255,.08),inset 0 -14px 44px rgba(0,0,0,.2); opacity:0;transition:opacity .4s} body.portal-on .portal-glass{opacity:1} @media(max-width:820px),(pointer:coarse){.cur-glass{display:none}} /* ---------- el estilo del póster: tipografía mezclada, trazos a mano, collage ---------- */ .display{position:relative;display:inline-block} .display .outline{display:block;margin-top:.26em;font-size:.26em;letter-spacing:.02em; color:transparent;-webkit-text-stroke:1.4px var(--ink);opacity:.5;text-transform:lowercase} .mark,.circled{position:relative;display:inline-block} .scribble{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.24em; fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round; stroke-dasharray:1000;stroke-dashoffset:1000;opacity:.9} .scene.on .scribble{animation:draw 1s var(--ease) .5s forwards} .ring{position:absolute;left:-6%;top:-26%;width:112%;height:150%;fill:none;stroke:var(--a2,var(--coral)); stroke-width:3;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;opacity:.85} .flat.on .ring,#trabajo .ring{animation:draw 1.3s var(--ease) .4s forwards} @keyframes draw{to{stroke-dashoffset:0}} /* labels that look stuck on, like the notes on the poster */ .tape{position:relative;display:inline-block;padding:7px 14px;background:rgba(255,255,255,.07); color:var(--ink);transform:rotate(-1.6deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .tape::before,.tape::after{content:'';position:absolute;top:-7px;width:34px;height:14px; background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1));opacity:.5} .tape::before{left:-10px;transform:rotate(-16deg)} .tape::after{right:-10px;transform:rotate(12deg)} body.flood .tape{background:rgba(255,220,180,.14)} /* the gallery stops being a grid of boxes and becomes a pinned collage */ .card{transform:rotate(var(--tilt,0deg));transition:opacity .4s,transform .5s var(--ease),filter .4s,box-shadow .4s} .card:nth-child(4n+1){--tilt:-.7deg} .card:nth-child(4n+2){--tilt:.5deg} .card:nth-child(4n+3){--tilt:-.4deg} .card:nth-child(4n){--tilt:.8deg} .card:hover{--tilt:0deg;z-index:4;box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px var(--coral)} @media(prefers-reduced-motion:reduce){.card{--tilt:0deg}} #portal{transition:opacity .3s var(--ease)} .portal-glass{transition:opacity .3s var(--ease)} body.hot-ui #portal{opacity:.16} body.hot-ui .portal-glass{opacity:0} body.hot-ui .cur-cv{opacity:.7} /* ===================================================================== VIDRIO LÍQUIDO — every control is a drop of glass on the room. --lx/--ly: where the pointer is, relative to the button. --near: 0..1, how close the pointer is (the edge lights up before you arrive). ===================================================================== */ .lq{ --near:0; --lx:50%; --ly:50%; isolation:isolate;overflow:hidden; clip-path:none!important;border-radius:999px!important; color:var(--ink); background: radial-gradient(160px circle at var(--lx) var(--ly), rgba(255,255,255,calc(.10 + .22 * var(--near))), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, rgba(255,255,255,.06)); border:0!important; -webkit-backdrop-filter:blur(3px) saturate(1.6) brightness(1.05); backdrop-filter:blur(3px) saturate(1.6) brightness(1.05); backdrop-filter:url(#lq-refract) blur(1.5px) saturate(1.6) brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,calc(.10 + .14 * var(--near))), inset 0 -10px 22px -12px rgba(0,0,0,.45), 0 12px 30px -18px rgba(0,0,0,.8), 0 0 calc(34px * var(--near)) calc(-8px + 4px * var(--near)) var(--glow); transition:transform .45s cubic-bezier(.2,1.6,.4,1),box-shadow .35s,background-color .35s,color .25s,border-radius .6s var(--ease); will-change:transform; } .lq:not(.lb-nav):not(.lb-x):not(.wa):not(.radial a){position:relative} /* the rim that catches light on the side closest to you */ .lq::before{ content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:1; background:radial-gradient(90px circle at var(--lx) var(--ly), rgba(255,255,255,calc(.25 + .7 * var(--near))), color-mix(in oklab, var(--coral) 70%, transparent) 40%, transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:calc(.35 + .65 * var(--near));transform:none;animation:none!important;display:block!important; } /* the specular sweep across the curved top of the drop */ .lq::after{ content:'';position:absolute;left:8%;right:8%;top:1px;height:46%;border-radius:999px;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0)); opacity:.55;mix-blend-mode:screen;inset:auto; } .lq:hover{transform:translateY(-2px) scale(1.035);border-radius:46% 54% 52% 48% / 60% 58% 42% 40%!important} .lq:active,.lq.lq-press{transform:scale(.95)} .lq.lq-press{animation:lqJelly .6s cubic-bezier(.2,1.6,.4,1)} @keyframes lqJelly{0%{transform:scale(.94,.96)}35%{transform:scale(1.06,.94)}60%{transform:scale(.97,1.04)}100%{transform:scale(1)}} .lq-ripple{position:absolute;z-index:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.55),color-mix(in oklab, var(--coral) 60%, transparent) 45%,transparent 70%); animation:lqRipple .7s var(--ease) forwards} @keyframes lqRipple{to{transform:scale(34);opacity:0}} .lq > *{position:relative;z-index:2} /* primary drops carry the colour of the room */ .btn.lq:not(.ghost),.wa.lq,.filters button.lq.on,.burger.lq[aria-expanded="true"], .brief-chips button.lq[aria-pressed="true"],.wheel-rules button.lq[aria-pressed="true"],.feel-list button.lq[aria-pressed="true"]{ color:#fff; background: radial-gradient(150px circle at var(--lx) var(--ly), rgba(255,255,255,calc(.18 + .3 * var(--near))), transparent 60%), linear-gradient(160deg, color-mix(in oklab, var(--coral) 78%, white), var(--coral) 55%, color-mix(in oklab, var(--coral) 70%, var(--a2))); } .btn.lq{padding:15px 26px;font-weight:700;letter-spacing:.01em} .btn.big.lq{padding:19px 30px} .filters button.lq{padding:11px 18px} .gate-btn.lq{padding:17px 34px} .feel-list button.lq{border-radius:999px!important} .wa.lq{border-radius:50%!important;width:58px;height:58px} .wa.lq:hover{border-radius:44% 56% 50% 50% / 56% 50% 50% 44%!important} .lb-x.lq,.lb-nav.lq,.burger.lq{border-radius:50%!important} .lb-nav.lq{transform:translateY(-50%)} .lb-nav.lq:hover{transform:translateY(-50%) scale(1.06)} @media(max-width:820px),(pointer:coarse){ .lq{backdrop-filter:blur(3px) saturate(1.4);-webkit-backdrop-filter:blur(3px) saturate(1.4)} .lq:hover{transform:none;border-radius:999px!important} } /* ===================================================================== LA RUEDA CROMÁTICA ===================================================================== */ .chroma{cursor:pointer;padding:8px 14px 8px 10px;border-radius:999px; background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .3s,transform .3s var(--ease)} .chroma:hover,.chroma[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--coral),0 0 24px -6px var(--glow);transform:translateY(-2px)} .chroma .ch-open{color:var(--coral);font-size:.8rem;line-height:1} .wheel{position:fixed;left:var(--pad);bottom:70px;z-index:75;width:min(340px,calc(100vw - 32px));padding:18px 18px 16px;border-radius:28px; background:linear-gradient(180deg,rgba(14,17,22,.86),rgba(8,10,14,.9));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9); opacity:0;transform:translateY(14px) scale(.97);transform-origin:0 100%;transition:opacity .35s var(--ease),transform .45s var(--ease)} .wheel.on{opacity:1;transform:none} .wheel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .wheel-top p{margin:0;color:var(--muted)} .wheel-x{width:34px;height:34px;padding:0;color:var(--ink);cursor:pointer;font-size:.8rem} .wheel-disc{position:relative;width:220px;height:220px;margin:4px auto 14px;border-radius:50%;cursor:grab;touch-action:none; background:conic-gradient(from 0deg,hsl(0 90% 60%),hsl(45 95% 58%),hsl(90 80% 52%),hsl(150 80% 48%),hsl(195 90% 55%),hsl(240 85% 64%),hsl(285 80% 62%),hsl(330 88% 60%),hsl(360 90% 60%)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 20px 50px -20px rgba(0,0,0,.8)} .wheel-disc::before{content:'';position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle,#0b0e13 40%,rgba(11,14,19,.55) 70%,rgba(11,14,19,0) 100%)} .wheel-disc:active{cursor:grabbing} .wheel-geo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .wheel-geo polygon{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;transition:all .2s} .wheel-geo circle{stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))} .wheel-knob{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none} .wheel-knob::after{content:'';position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%; box-shadow:0 0 0 2px #fff,0 0 22px var(--glow);animation:knob 2.4s ease-in-out infinite} @keyframes knob{50%{box-shadow:0 0 0 2px #fff,0 0 34px var(--glow)}} .wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);font-size:.52rem!important;pointer-events:none} .wheel-rules{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .wheel-rules button{padding:8px 12px;font:500 .74rem/1 'Space Grotesk',sans-serif;cursor:pointer} .wheel-why{margin:12px 2px 10px;color:var(--muted);font-size:.86rem;line-height:1.45;min-height:2.9em} .wheel-why b{color:var(--ink)} .wheel-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .wheel-sw button{display:grid;gap:6px;justify-items:center;padding:8px 4px;border:0;border-radius:14px;background:rgba(255,255,255,.05);cursor:copy;color:var(--muted)} .wheel-sw button:hover{background:rgba(255,255,255,.1);color:var(--ink)} .wheel-sw i{width:100%;height:30px;border-radius:10px;background:var(--sw);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} .wheel-sw span{font-size:.5rem!important} .wheel-foot{display:flex;gap:6px;margin-top:10px} .wheel-foot button{flex:1;padding:10px 8px;font:500 .72rem/1.1 'Space Grotesk',sans-serif;cursor:pointer} .wheel-toast{position:absolute;left:50%;top:-14px;transform:translate(-50%,6px);margin:0;padding:8px 12px;border-radius:999px;background:var(--coral);color:#fff;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);white-space:nowrap} .wheel-toast.on{opacity:1;transform:translate(-50%,0)} @media(max-width:820px){.wheel{left:16px;bottom:60px}.wheel-disc{width:190px;height:190px}} /* ===================================================================== CONTACTO: la escena y el brief ===================================================================== */ .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,470px);gap:clamp(28px,5vw,72px);align-items:center;text-align:left;max-width:1180px;width:100%} .contact-copy h2{font-size:clamp(2.4rem,5.6vw,4.8rem)} .contact-copy .lead{max-width:34ch} .contact-direct{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px} .contact-direct a,.contact-direct > li > span{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:1.05rem;transition:color .25s,padding .35s var(--ease)} .contact-direct a:hover{color:var(--coral);padding-left:8px} .contact-direct .px{min-width:78px;color:var(--muted);font-size:.56rem!important} .brief{position:relative;padding:22px;border-radius:32px;text-align:left; background:linear-gradient(180deg,rgba(18,21,27,.78),rgba(9,11,15,.86));-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(0,0,0,.95),0 0 90px -50px var(--glow)} .brief::before{content:'';position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--coral) calc(var(--progress,.33) * 100%),rgba(255,255,255,.08) 0);transition:background .4s} .brief-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:var(--muted)} .brief-steps{display:flex;gap:6px} .brief-steps i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .3s,width .4s var(--ease)} .brief-steps i.on{background:var(--coral);width:30px} .brief-step{display:none;margin:0;padding:0;border:0;min-width:0} .brief-step.on{display:block;animation:stepIn .5s var(--ease)} @keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} .brief-step legend{padding:0;font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em;color:var(--ink)} .brief-hint{margin:6px 0 0;color:var(--muted);font-size:.52rem!important} .brief-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .brief-chips button{padding:12px 18px;font:500 .95rem/1 'Space Grotesk',sans-serif;cursor:pointer} .brief-chips button[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -12px var(--glow)} .brief-field{display:grid;gap:8px;margin-top:14px} .brief-field .px{color:var(--muted);font-size:.54rem!important} .brief-field input,.brief-field textarea{width:100%;padding:14px 16px;border:0;border-radius:18px;resize:none; background:rgba(255,255,255,.05);color:var(--ink);font:400 1rem/1.4 'Space Grotesk',sans-serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .25s,background .25s} .brief-field input:focus,.brief-field textarea:focus{outline:none;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--coral),0 0 30px -12px var(--glow)} .brief-preview{margin-top:18px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .brief-preview .px{color:var(--coral);font-size:.52rem!important} .brief-preview p{margin:6px 0 0;color:var(--ink);font-size:.95rem;line-height:1.45;min-height:2.9em} .brief-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px} .brief-nav [hidden]{display:none!important} .brief-nav [data-back]{margin-right:auto} #contacto .foot-line{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.35)} @media(max-width:900px){ .contact-grid{grid-template-columns:1fr} #contacto .scene-in::before{inset:-6% -6%} #contacto .foot-line{position:static;margin-top:28px} } body.at-contact .feel{opacity:0;pointer-events:none;transform:translateY(12px)} /* ===================================================================== REDISEÑO v11 — editorial scale, one serif word per headline, a featured case, services that show their proof. ===================================================================== */ .serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em} h2 .serif,h1 .serif{color:var(--coral)} /* --- hero: the motto, huge and left-aligned --- */ .scene-in.hero{width:min(1240px,100%);text-align:left;align-self:end;padding-bottom:clamp(40px,9vh,110px)} .hero .eyebrow{color:var(--coral)} .hero-title{margin:.2em 0 0;font-weight:800;line-height:.9;letter-spacing:-.045em;font-size:clamp(3.2rem,10.5vw,10.5rem);text-wrap:balance} .hero-title .l{display:block} .hero-title .l2{padding-left:clamp(0px,9vw,160px)} .hero-title .l2 .serif{font-size:1.08em;line-height:.8;letter-spacing:-.02em} .hero-title .l3{font-size:.78em} .hero-title .l{opacity:0;transform:translateY(.35em);filter:blur(10px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)} body.ready .hero-title .l{opacity:1;transform:none;filter:none} body.ready .hero-title .l2{transition-delay:.12s} body.ready .hero-title .l3{transition-delay:.24s} .hero-title .mark{color:var(--coral);font-style:normal} .hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px;margin-top:clamp(22px,4vh,44px)} .hero-foot .lead{max-width:38ch;margin:0} .hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .hero .hint{text-align:left;margin-top:26px} .note-a{left:auto;right:12%;top:18%} .note-b{right:6%;bottom:auto;top:62%} /* --- a quiet secondary action: text with an arrow that travels --- */ .link-arrow{display:inline-flex;align-items:center;gap:10px;padding:12px 6px!important;border:0;background:none!important;color:var(--ink); font:600 .95rem/1 'Space Grotesk',sans-serif;text-decoration:none;cursor:pointer;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important} .link-arrow::before{display:none!important} .link-arrow::after{content:''!important;position:absolute;left:6px;right:6px;bottom:6px;top:auto!important;height:1px!important;border-radius:0!important; background:currentColor!important;opacity:.35!important;transform-origin:left;transition:transform .45s var(--ease),opacity .3s;mix-blend-mode:normal!important} .link-arrow span{display:inline-block;transition:transform .35s var(--ease);color:var(--coral)} .link-arrow:hover{transform:none!important;border-radius:0!important;color:var(--coral)} .link-arrow:hover span{transform:translateX(6px)} .link-arrow:hover::after{opacity:1!important} /* --- services: a card of glass with its own proof --- */ .svc .scene-in.svc-card{position:relative;width:min(560px,100%);padding:clamp(24px,3vw,40px);border-radius:34px;text-align:left; background:linear-gradient(180deg,rgba(14,17,22,.62),rgba(8,10,14,.74));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 40px 90px -40px rgba(0,0,0,.9)} .svc .scene-in.svc-card::before{display:none} .svc-card.right{margin-left:auto} .svc-num{position:absolute;right:22px;top:-.32em;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(5rem,11vw,9rem);line-height:1; color:transparent;-webkit-text-stroke:1px color-mix(in oklab, var(--coral) 70%, transparent);pointer-events:none;opacity:.8} .svc-card h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-top:14px} .svc-work{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .svc-thumbs{display:flex} .svc-thumb{width:58px;height:58px;padding:0!important;margin-left:-12px;border-radius:18px!important;overflow:hidden;cursor:pointer; box-shadow:0 0 0 2px rgba(8,10,14,.9),0 10px 22px -10px rgba(0,0,0,.8)!important;transition:transform .4s var(--ease),margin .4s var(--ease)!important} .svc-thumb:first-child{margin-left:0} .svc-thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:0} .svc-thumb::before,.svc-thumb::after{display:none!important} .svc-work:hover .svc-thumb{margin-left:6px} .svc-work:hover .svc-thumb:first-child{margin-left:0} .svc-thumb:hover{transform:translateY(-6px) rotate(-4deg) scale(1.08)!important;border-radius:18px!important} /* --- featured case --- */ .feature{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:clamp(24px,5vw,80px);align-items:center; margin:0 0 clamp(60px,10vh,120px);padding:clamp(28px,5vw,72px);border-radius:40px;overflow:hidden;isolation:isolate; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 60px 120px -60px rgba(0,0,0,.95)} .feature-bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;z-index:-2;filter:blur(40px) saturate(1.3) brightness(.45);transform:scale(1.1)} .feature::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,8,12,.88),rgba(6,8,12,.4) 70%,rgba(6,8,12,.2))} .feature-who{margin:14px 0 0;color:var(--muted)} .feature-title{margin:.1em 0 .2em;font-size:clamp(3.4rem,8vw,7.4rem);line-height:.9} .feature-title .serif{color:var(--ink)} .feature .lead{max-width:40ch} .feature .hero-cta{margin-top:26px} .feature-frame{justify-self:center;width:min(100%,340px);aspect-ratio:9/16;border-radius:28px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.9),0 0 80px -30px var(--glow);transform:rotate(2deg);transition:transform .8s var(--ease)} .feature:hover .feature-frame{transform:rotate(0deg) scale(1.02)} .feature-frame video{width:100%;height:100%;object-fit:cover} /* --- the filter really filters --- */ .card[hidden]{display:none!important} .card.leaving{opacity:0!important;transform:scale(.94) translateY(10px)!important;filter:blur(6px);transition:opacity .22s,transform .24s,filter .22s!important} .card.arrive{animation:cardIn .6s var(--ease) var(--d,0ms) backwards} @keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px)}to{opacity:1;filter:none}} .filters .chip-n{margin-left:8px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.12);font:600 .62rem/1.2 'Space Grotesk',sans-serif} .filters button.on .chip-n{background:rgba(0,0,0,.2)} .card .m img[src*="web-"]{object-fit:cover} /* --- the journey through the portal: the page steps aside, the room carries you --- */ main,.nav,.chroma,.feel,.wa,.note{transition:opacity .45s var(--ease),filter .5s var(--ease),transform .6s var(--ease)} body.traveling main,body.traveling .nav,body.traveling .chroma,body.traveling .feel,body.traveling .wa{ opacity:0;filter:blur(14px);pointer-events:none} body.traveling.going-fwd main{transform:scale(1.08);transform-origin:var(--jx,50%) var(--jy,50%)} body.traveling.going-back main{transform:scale(.9);transform-origin:var(--jx,50%) var(--jy,50%)} body.landing main{animation:landIn .9s var(--ease)} @keyframes landIn{from{opacity:0;transform:scale(.97);filter:blur(10px)}to{opacity:1;transform:none;filter:none}} body.traveling #hint{opacity:1} body.warping main{filter:none;transform:none} /* --- right-click menu: drops of glass around your pointer --- */ .radial a.lq{position:absolute!important;border-radius:999px!important;padding:10px 16px} .radial a.lq.lq-press{animation:none} .radial a.lq:hover{border-radius:999px!important} @media(max-width:900px){ .scene-in.hero{align-self:center} .hero-title .l2{padding-left:0} .feature{grid-template-columns:1fr;padding:24px} .feature-frame{width:min(78vw,300px);transform:none} .svc-card.right{margin-left:0} .svc-work{flex-wrap:wrap} } .scene-in.hero::before{inset:-18% -30% -10% -20%;background:radial-gradient(62% 66% at 34% 56%,rgba(2,3,5,.94),rgba(2,3,5,.82) 48%,rgba(2,3,5,.35) 72%,transparent 88%)} .flat-head .display{display:block;margin-top:14px} body.traveling #portal{opacity:1!important} body.traveling .portal-glass{opacity:.6!important} .radial a.lq{ background: radial-gradient(90px circle at var(--lx) var(--ly), rgba(255,255,255,calc(.14 + .26 * var(--near))), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 55%, rgba(255,255,255,.08)); color:var(--ink);text-align:center;line-height:1.2; -webkit-backdrop-filter:blur(8px) saturate(1.6) brightness(1.08);backdrop-filter:blur(8px) saturate(1.6) brightness(1.08); backdrop-filter:url(#lq-refract) blur(6px) saturate(1.6) brightness(1.08)} .radial a.lq:hover{background: radial-gradient(90px circle at var(--lx) var(--ly), rgba(255,255,255,.35), transparent 62%), linear-gradient(160deg, color-mix(in oklab, var(--coral) 78%, white), var(--coral));color:#fff} html,body{overflow-x:clip} @media(max-width:760px){.nav{gap:10px}.nav .btn.lq{padding:11px 16px;font-size:.8rem}.nav-brand img{height:34px}} /* ===================================================================== v12 — ideas from the Awwwards nominees ===================================================================== */ /* marker highlights (Indisea, nothing on purpose) */ mark{color:inherit;padding:0 .12em;border-radius:.2em; background:linear-gradient(transparent 55%, color-mix(in oklab, var(--coral) 45%, transparent) 55%, color-mix(in oklab, var(--coral) 45%, transparent) 92%, transparent 92%); background-size:0% 100%;background-repeat:no-repeat;transition:background-size 1s var(--ease) .3s} body.ready .hero mark,.scene.on mark,.process mark{background-size:100% 100%} /* brands in motion (Indisea's partner row) */ .brands{position:relative;z-index:2;padding:26px 0 12px;overflow:hidden} .brands-k{margin:0 0 12px var(--pad);color:var(--muted)} .brands-track{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .brands-run{display:flex;align-items:center;gap:34px;width:max-content;animation:brands 38s linear infinite} .brands-run span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.6rem,3.6vw,3rem);letter-spacing:-.03em;color:rgba(255,255,255,.88);white-space:nowrap} .brands-run span:nth-child(4n+1){font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--coral)} .brands-run i{font-style:normal;color:var(--coral);opacity:.7} .brands:hover .brands-run{animation-play-state:paused} @keyframes brands{to{transform:translateX(-50%)}} /* a word full of film (The Quaker School) */ .typevid{position:relative;z-index:2;padding:clamp(40px,10vh,120px) 0 clamp(30px,6vh,70px)} .typevid-stage{position:relative;height:clamp(220px,34vw,520px);overflow:hidden;isolation:isolate} .typevid-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - .25 * var(--p,0)))} .typevid-word{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--bg);color:#fff;mix-blend-mode:multiply; font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;line-height:.78;letter-spacing:-.06em; font-size:clamp(4rem,17.5vw,17rem);transform:scale(calc(.86 + .2 * var(--p,0)))} .typevid-word span:last-child{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:1.1em} .typevid-cap{margin:16px 0 0;text-align:center;color:var(--muted)} .typevid-now{color:var(--coral)} /* from sketch to screen */ .process{margin:clamp(70px,12vh,140px) 0 0} .process-head{max-width:760px;margin-bottom:28px} .process-head .display{display:block;margin-top:14px;font-size:clamp(2.4rem,5.4vw,4.6rem)} .compare-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(10px,1.4vw,18px)} .compare-row .compare:first-child{grid-row:span 2} .compare{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:16/9;background:#101216; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)} .compare-row .compare:first-child{aspect-ratio:auto;min-height:100%} .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .compare .sketch{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);filter:contrast(1.1)} .compare-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 18px rgba(255,255,255,.6)} .compare-line i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%; background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5); box-shadow:inset 0 0 0 1.5px #fff,0 8px 24px rgba(0,0,0,.5)} .compare-line i::before,.compare-line i::after{content:'';position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent} .compare-line i::before{left:9px;border-right-color:#fff} .compare-line i::after{right:9px;border-left-color:#fff} .compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3} .compare figcaption{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;pointer-events:none} .compare figcaption span{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:.5rem!important} .compare-name{position:absolute;left:16px;bottom:14px;margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)} /* the dock (DRASA, Kott) */ .dock{position:fixed;left:50%;bottom:20px;z-index:70;display:flex;gap:2px;padding:6px;border-radius:999px;transform:translateX(-50%) translateY(20px);opacity:0; background:rgba(12,14,18,.62);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 20px 40px -20px rgba(0,0,0,.9); transition:opacity .6s var(--ease),transform .6s var(--ease)} body.ready .dock{opacity:1;transform:translateX(-50%)} body.traveling .dock{opacity:0} .dock a{position:relative;z-index:1;padding:10px 16px;border-radius:999px;color:var(--muted);text-decoration:none;font:500 .82rem/1 'Space Grotesk',sans-serif;transition:color .3s} .dock a:hover{color:var(--ink)} .dock a.on{color:#fff} .dock-pill{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;z-index:0; background:linear-gradient(160deg, color-mix(in oklab, var(--coral) 78%, white), var(--coral));box-shadow:0 8px 20px -8px var(--glow); transition:transform .55s cubic-bezier(.2,1.3,.4,1),width .45s var(--ease)} body.at-contact .chroma{opacity:.85} @media(max-width:900px){ .compare-row{grid-template-columns:1fr} .compare-row .compare:first-child{grid-row:auto;aspect-ratio:16/9} .dock{display:none} } @media(max-width:1400px){.chroma .ch-deg{display:none}} .typevid-word{transform:none!important;inset:-2px} .typevid-word span{display:block;transform:scale(calc(.86 + .2 * var(--p,0)));transform-origin:50% 50%} /* travelling between worlds: the page lets the room speak for a moment */ body.world-hop main,body.world-hop .nav{opacity:.12;filter:blur(8px);transition:opacity .35s,filter .35s} body.world-hop #portal{opacity:1!important} .wheel-world{display:block;margin-top:8px;color:var(--coral);font-size:.56rem!important} /* ===================================================================== EL UMBRAL — the new entrance ===================================================================== */ .gate{display:grid!important;place-items:center;background:transparent!important; --hole:0px;--cx:50%;--cy:62%; -webkit-mask:radial-gradient(circle at var(--cx) var(--cy), transparent var(--hole), #000 calc(var(--hole) + 2px)); mask:radial-gradient(circle at var(--cx) var(--cy), transparent var(--hole), #000 calc(var(--hole) + 2px))} .gate::before{content:'';position:absolute;inset:0;z-index:-2; background:radial-gradient(120% 90% at 50% 40%, #0b0d12 0%, #050608 55%, #020203 100%)} .gate.open{pointer-events:none} .gate.out{opacity:0;transition:opacity .4s} .gate-grain{position:absolute;inset:-50%;z-index:-1;opacity:.09;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); animation:grain 1s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(6%,3%)}100%{transform:translate(0,0)}} .gate-beam{position:absolute;left:50%;top:-20%;width:46vmin;height:140%;z-index:-1;pointer-events:none;transform:translateX(-50%) rotate(8deg); background:linear-gradient(90deg,transparent,color-mix(in oklab, var(--coral) 12%, transparent) 40%,rgba(255,255,255,.06) 50%,color-mix(in oklab, var(--coral) 12%, transparent) 60%,transparent); filter:blur(18px);opacity:.7;animation:beam 9s ease-in-out infinite alternate} @keyframes beam{from{transform:translateX(-62%) rotate(10deg)}to{transform:translateX(-38%) rotate(4deg)}} .gate-center{display:grid;justify-items:center;gap:0;text-align:center;padding:24px} .gate-mark{position:relative;width:min(190px,42vw);opacity:0;transform:translateY(14px) scale(.96);filter:blur(10px); animation:markIn 1.4s var(--ease) .15s forwards} .gate-mark img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 50px rgba(233,72,99,.25))} .gate-shine{position:absolute;inset:0;pointer-events:none; -webkit-mask:url(../img/neuropixel-logo.svg) center/contain no-repeat;mask:url(../img/neuropixel-logo.svg) center/contain no-repeat; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) -150% 0/220% 100% no-repeat; animation:shine 4.2s ease-in-out 1.2s infinite} @keyframes markIn{to{opacity:1;transform:none;filter:none}} @keyframes shine{0%{background-position:-150% 0}45%,100%{background-position:150% 0}} .gate-motto{margin:26px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ink)} .gate-motto span{display:inline-block;opacity:0;transform:translateY(12px);animation:markIn .9s var(--ease) forwards} .gate-motto span:nth-child(1){animation-delay:.6s} .gate-motto span:nth-child(2){animation-delay:.78s} .gate-motto span:nth-child(3){animation-delay:.96s} .gate-motto .serif{color:var(--coral);font-size:1.12em} /* the iris */ .iris{--load:0;--hold:0;position:relative;width:128px;height:128px;margin-top:38px;padding:0;border:0;border-radius:50%; background:transparent;cursor:pointer;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none; opacity:0;animation:markIn 1s var(--ease) 1.1s forwards;transform:scale(calc(1 - .06 * var(--hold)))} .iris svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible} .iris circle{fill:none;stroke-width:2;stroke-linecap:round} .iris-track{stroke:rgba(255,255,255,.12)} .iris-load{stroke:rgba(255,255,255,.55);stroke-dasharray:339.3;stroke-dashoffset:calc(339.3 * (1 - var(--load)));transition:stroke-dashoffset .2s} .iris-hold{stroke:var(--coral);stroke-width:4;stroke-dasharray:339.3;stroke-dashoffset:calc(339.3 * (1 - var(--hold)));filter:drop-shadow(0 0 8px var(--glow))} .iris-core{position:absolute;inset:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.04) 45%,rgba(255,255,255,.02) 70%); -webkit-backdrop-filter:blur(6px) saturate(1.5);backdrop-filter:blur(6px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -12px 24px rgba(0,0,0,.4),0 0 calc(10px + 50px * var(--hold)) color-mix(in oklab, var(--coral) calc(20% + 60% * var(--hold)), transparent); transform:scale(calc(1 + .12 * var(--hold)));transition:transform .2s} .gate.go .iris-core{animation:breathe 2.6s ease-in-out infinite} .gate.holding .iris-core{animation:none} @keyframes breathe{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -12px 24px rgba(0,0,0,.4),0 0 40px color-mix(in oklab, var(--coral) 45%, transparent)}} .iris-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;color:#fff;font-size:.5rem!important;letter-spacing:.14em;line-height:1.5;pointer-events:none} .iris[disabled]{cursor:progress} .gate-sound{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 14px;border:0;border-radius:999px; background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;opacity:0;animation:markIn .9s var(--ease) 1.3s forwards; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:color .25s,box-shadow .25s} .gate-sound i{width:26px;height:14px;border-radius:999px;background:rgba(255,255,255,.15);position:relative;transition:background .25s} .gate-sound i::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)} .gate-sound[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--coral)} .gate-sound[aria-pressed="true"] i{background:var(--coral)} .gate-sound[aria-pressed="true"] i::after{transform:translateX(12px)} .gate-foot{position:absolute;bottom:22px;margin:0;color:rgba(255,255,255,.4);font-size:.52rem!important} .gate-foot b{color:var(--ink);font-weight:400} .gate-foot-l{left:clamp(16px,4vw,48px)} .gate-foot-r{right:clamp(16px,4vw,48px)} .gate.open .gate-center,.gate.open .gate-foot{opacity:0;transform:scale(1.08);transition:opacity .45s,transform .9s var(--ease)} @media(max-width:600px){.gate-foot-r{display:none}} /* ===================================================================== EL VIAJE — fly through everything the studio made ===================================================================== */ .trip{position:relative;z-index:3;height:720vh;margin-top:clamp(40px,8vh,90px)} .trip-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05060a} .trip-cv{position:absolute;inset:0;width:100%;height:100%;display:block} .trip-ui{position:absolute;inset:0;pointer-events:none;padding:clamp(80px,12vh,120px) var(--pad) clamp(90px,12vh,110px); display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))} .trip-head .display{display:block;margin-top:12px;font-size:clamp(2.2rem,5.4vw,4.6rem);text-shadow:0 10px 40px rgba(0,0,0,.6)} .trip-hint{margin:14px 0 0;color:rgba(255,255,255,.55)} .trip-now{align-self:end;justify-self:start;display:grid;gap:6px;text-shadow:0 6px 30px rgba(0,0,0,.8)} .trip-who{color:var(--coral)} .trip-title{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,4.4rem);line-height:1} .trip.flip .trip-now{animation:tripFlip .6s var(--ease)} @keyframes tripFlip{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} .trip-meta{display:flex;align-items:center;gap:16px;margin-top:18px} .trip-count{margin:0;color:rgba(255,255,255,.6)} .trip-count b{color:#fff;font-weight:400} .trip-bar{flex:1;max-width:360px;height:2px;background:rgba(255,255,255,.15);overflow:hidden} .trip-bar i{display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)} .trip-cv{pointer-events:auto} body.in-trip .chroma,body.in-trip .feel{opacity:0;pointer-events:none} .trip-view{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:5vh 5vw; background:rgba(4,5,8,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transition:opacity .35s} .trip-view.on{opacity:1} .trip-view figure{margin:0;display:grid;gap:14px;justify-items:center;transform:scale(.94);transition:transform .5s var(--ease)} .trip-view.on figure{transform:none} .trip-view img{max-width:min(92vw,1100px);max-height:78vh;border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.7)} .trip-view figcaption{display:grid;gap:4px;text-align:center} .trip-view figcaption .px{color:var(--coral)} .trip-view figcaption strong{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.8rem} .trip-x{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1rem} .trip-view[hidden]{display:none} .trip-view{z-index:9000} /* ===================================================================== SERVICIOS CON ESCENARIO — each service shows its craft, not a list ===================================================================== */ .svc.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,90px);align-items:center;min-height:118svh} .svc.duo .svc-card{grid-column:1;grid-row:1;margin:0!important} .svc.duo .svc-card.right{grid-column:2} .svc.duo .svc-media{grid-column:2;grid-row:1} .svc.duo .svc-card.right ~ .svc-media{grid-column:1} .svc-media{position:relative;pointer-events:auto;opacity:0;transform:translateY(60px) scale(.96);transition:opacity 1.1s var(--ease) .15s,transform 1.3s var(--ease) .15s} .scene.on .svc-media{opacity:1;transform:none} .svc-media .note{position:absolute;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--coral);white-space:nowrap;pointer-events:none;font-style:normal} /* 01 · la mesa de marca */ .brand-desk{height:min(66vh,560px);--open:0} .bd-card{position:absolute;left:50%;top:50%;width:min(46%,250px);aspect-ratio:4/5;margin:0;border-radius:20px;overflow:hidden;cursor:pointer; transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transition:transform .5s var(--ease),box-shadow .4s; box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px rgba(0,0,0,.9);background:#111} .bd-card:nth-child(1),.bd-card:nth-child(5){z-index:1} .bd-card:nth-child(2),.bd-card:nth-child(4){z-index:2} .bd-card:nth-child(3){z-index:3} .bd-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)} .bd-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:10px;font-size:.52rem;line-height:1.4; background:rgba(6,8,12,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:.35s var(--ease)} .bd-card:hover{z-index:9;transform:translate(-50%,-50%) translate(var(--x,0),calc(var(--y,0) - 6%)) rotate(0deg) scale(1.1); box-shadow:0 0 0 1px rgba(255,255,255,.3),0 50px 90px -30px rgba(0,0,0,.95),0 0 60px -20px var(--coral)} .bd-card:hover img{transform:scale(1.06)} .bd-card:hover figcaption{opacity:1;transform:none} .bd-note{left:6%;bottom:2%;transform:rotate(-5deg);opacity:calc(var(--open))} /* 02 · teléfonos */ .reel-phones{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,22px);height:min(74vh,620px)} .rp{margin:0;display:grid;gap:10px;justify-items:center;transform:translateY(var(--lift,0));transition:transform .2s linear;cursor:pointer} .rp:nth-child(1){transform:translateY(var(--lift,0)) rotate(-5deg)} .rp:nth-child(3){transform:translateY(var(--lift,0)) rotate(5deg)} .rp-screen{position:relative;width:clamp(120px,12vw,200px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000; box-shadow:0 0 0 5px #0b0c10,0 0 0 6px rgba(255,255,255,.18),0 40px 80px -30px rgba(0,0,0,.95);transition:box-shadow .4s} .rp:nth-child(2) .rp-screen{width:clamp(150px,15vw,240px)} .rp-screen::before{content:'';position:absolute;top:7px;left:50%;width:34%;height:14px;border-radius:10px;background:#0b0c10;transform:translateX(-50%);z-index:2} .rp-screen video{width:100%;height:100%;object-fit:cover;display:block} .rp-sound{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 10px;border-radius:99px;font-size:.46rem;white-space:nowrap; background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s} .rp:hover .rp-sound{opacity:1} .rp.loud .rp-screen{box-shadow:0 0 0 5px #0b0c10,0 0 0 7px var(--coral),0 40px 80px -30px rgba(0,0,0,.95),0 0 70px -10px var(--coral)} .rp.loud .rp-sound{opacity:0} .rp figcaption{font-size:.5rem;color:var(--muted);text-align:center} /* 03 · la ventana */ .web-win{border-radius:18px;overflow:hidden;background:#0d0f14;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.95);transform-origin:50% 100%} .scene.on .web-win{transform:perspective(1400px) rotateX(4deg)} .web-win:hover{transform:none!important} .ww-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:linear-gradient(#1a1d24,#14161c);border-bottom:1px solid rgba(255,255,255,.06)} .ww-bar>i{width:11px;height:11px;border-radius:50%;background:#ff5f57} .ww-bar>i:nth-child(2){background:#febc2e}.ww-bar>i:nth-child(3){background:#28c840} .ww-url{flex:1;margin:0 0 0 10px;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.06);font-size:.52rem;color:var(--muted);overflow:hidden;white-space:nowrap} .ww-url::before{content:'🔒 ';opacity:.6} .ww-visit{font-size:.52rem;color:var(--coral);text-decoration:none;white-space:nowrap} .ww-tabs{display:flex;gap:4px;padding:8px 10px 0;background:#14161c} .ww-tab{padding:8px 14px!important;border:0;border-radius:10px 10px 0 0!important;background:transparent!important;color:var(--muted);font-size:.5rem;cursor:pointer;box-shadow:none!important} .ww-tab::before,.ww-tab::after{display:none!important} .ww-tab.on{background:#0d0f14!important;color:var(--ink)} .ww-view{position:relative;height:min(52vh,440px);overflow:hidden;background:#fff} .ww-page{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s} .ww-page.on{opacity:1} .ww-page img{display:block;width:100%;height:auto;will-change:transform} /* 04 · el feed */ .feed-phone{justify-self:center;width:clamp(230px,24vw,320px);aspect-ratio:9/18.5;border-radius:42px;overflow:hidden;background:#fafafa;cursor:pointer; box-shadow:0 0 0 8px #0b0c10,0 0 0 9px rgba(255,255,255,.2),0 60px 110px -40px rgba(0,0,0,.95),0 0 90px -30px var(--coral);transform:rotate(-4deg)} .scene.on .feed-phone{transform:rotate(-4deg)} .fp-notch{position:absolute;top:10px;left:50%;width:32%;height:22px;border-radius:14px;background:#0b0c10;transform:translateX(-50%);z-index:3} .fp-col{padding:44px 0 0;will-change:transform} .fp-post{background:#fff;color:#111;margin-bottom:12px} .fp-post header{display:flex;align-items:center;gap:8px;padding:8px 12px;font:600 .7rem 'Space Grotesk',sans-serif} .fp-post header i{width:24px;height:24px;border-radius:50%;background:conic-gradient(#e11d48,#f59e0b,#e11d48);box-shadow:inset 0 0 0 2px #fff} .fp-post img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} .fp-post footer{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:.95rem} .fp-post footer span:first-child{color:#e11d48} .fp-post footer em{margin-left:auto;font:italic .72rem 'Instrument Serif',serif;color:#555} .fp-heart{position:absolute;z-index:5;color:var(--coral);font-style:normal;font-size:1.6rem;pointer-events:none; animation:fpHeart 1.3s var(--ease) var(--d) both;text-shadow:0 4px 16px rgba(0,0,0,.3)} @keyframes fpHeart{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(.8) rotate(20deg)}} .fp-note{right:-18%;top:12%;transform:rotate(8deg);z-index:4} /* ===================================================================== LA SALA DE PROYECCIÓN — from a sketch to the finished spot ===================================================================== */ .cine{position:relative;z-index:3;height:600vh} .cine-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(90% 80% at 70% 50%,#14110d,#060607 70%); display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.7fr);gap:clamp(24px,3.4vw,60px);align-items:center;padding:clamp(80px,11vh,110px) var(--pad) clamp(90px,12vh,110px)} .cine-beam{position:absolute;left:-10%;top:-20%;width:90%;height:140%;pointer-events:none;opacity:.5;mix-blend-mode:screen; background:conic-gradient(from 100deg at 0% 30%,transparent 0deg,rgba(255,236,200,.13) 8deg,rgba(255,236,200,.03) 30deg,transparent 42deg);filter:blur(10px);animation:beam 7s ease-in-out infinite alternate} @keyframes beam{to{opacity:.3;transform:rotate(1.5deg)}} .cine-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;z-index:6; 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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .5s steps(4) infinite} @keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-1%,3%)}} .cine-side{position:relative;z-index:2;display:grid;gap:clamp(18px,4vh,40px)} .cine-head .display{display:block;margin-top:12px;font-size:clamp(2rem,4vw,3.6rem);line-height:.98} .cine-head .serif{color:var(--coral)} .cine-list{position:relative;padding-left:22px} .cine-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.1)} .cine-rail i{display:block;height:100%;background:var(--coral);transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px var(--coral)} .cine-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px} .cine-step{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:8px 0;cursor:pointer;opacity:.38;transition:opacity .4s} .cine-step b{font-weight:400;font-size:.55rem;color:var(--muted);padding-top:.55em} .cine-step span{font:700 clamp(1.05rem,1.5vw,1.35rem)/1.2 'Bricolage Grotesque',sans-serif;transition:color .4s} .cine-step small{grid-column:2;max-height:0;overflow:hidden;color:var(--muted);font-size:.86rem;line-height:1.45;transition:max-height .6s var(--ease),margin .6s var(--ease)} .cine-step.done{opacity:.6} .cine-step.on{opacity:1} .cine-step.on b,.cine-step.on span{color:var(--coral)} .cine-step.on small{max-height:5em;margin-top:6px} .cine-screen{position:relative;z-index:2;aspect-ratio:16/9;width:100%;max-height:72vh;justify-self:center;border-radius:6px;overflow:hidden;background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 60px 140px -40px rgba(0,0,0,1),0 0 140px -50px rgba(255,220,170,.35)} .cine-shot{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease);display:grid;place-items:center} .cine-shot.on{opacity:1;transform:none} .cine-shot>img{width:100%;height:100%;object-fit:cover;display:block} .s-idea{background:#f3efe6} .s-idea img{mix-blend-mode:multiply;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.6,0,.2,1) .2s} .s-idea.on img{clip-path:inset(0 0 0 0)} .s-idea .note{position:absolute;right:6%;bottom:8%;font-family:'Caveat',cursive;font-size:clamp(1.3rem,2.4vw,2.2rem);color:#c2185b;transform:rotate(-6deg);opacity:0;transition:opacity .5s 1.8s} .s-idea.on .note{opacity:1} .s-prompt{background:radial-gradient(80% 80% at 50% 40%,#12151c,#07080b)} .cine-term{width:min(78%,640px);padding:clamp(18px,2.4vw,32px);border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .cine-term .px{margin:0 0 14px;color:var(--coral);font-size:.55rem} .cine-typed{margin:0;min-height:6.5em;font:400 clamp(.9rem,1.35vw,1.2rem)/1.6 'Space Grotesk',sans-serif;color:#e9e7e1} .cine-typed::after{content:'';display:inline-block;width:.55em;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--coral);animation:caret 1s steps(1) infinite} @keyframes caret{50%{opacity:0}} .s-look img{filter:saturate(0) brightness(.7);transition:filter 2.2s var(--ease) .3s} .s-look.on img{filter:none} .cine-swatch{position:absolute;left:4%;bottom:6%;display:flex;gap:6px} .cine-swatch i{width:clamp(22px,2.6vw,38px);aspect-ratio:1;border-radius:8px;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.7),0 8px 20px rgba(0,0,0,.5); transform:translateY(20px);opacity:0;transition:.5s var(--ease)} .s-look.on .cine-swatch i{transform:none;opacity:1} .s-look.on .cine-swatch i:nth-child(2){transition-delay:.1s}.s-look.on .cine-swatch i:nth-child(3){transition-delay:.2s} .s-look.on .cine-swatch i:nth-child(4){transition-delay:.3s}.s-look.on .cine-swatch i:nth-child(5){transition-delay:.4s} .cine-tag{position:absolute;right:4%;bottom:6%;margin:0;padding:8px 12px;border-radius:99px;font-size:.5rem;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .s-takes{background:#07080b;padding:3%} .cine-grid{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px} .cine-take{position:relative;margin:0;border-radius:6px;overflow:hidden;transition:opacity .6s,filter .6s,transform .8s var(--ease),box-shadow .6s} .cine-take img{width:100%;height:100%;object-fit:cover;display:block} .cine-take span{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:6px;font-size:.46rem;background:rgba(0,0,0,.6)} .cine-take.drop{opacity:.22;filter:grayscale(1)} .cine-take.pick{transform:scale(1.03);z-index:2;box-shadow:0 0 0 3px var(--coral),0 20px 50px rgba(0,0,0,.8)} .cine-chosen{opacity:0;transition:opacity .4s} .s-takes:has(.pick) .cine-chosen{opacity:1} .cine-final video{width:100%;height:100%;object-fit:cover;display:block} .cine-tl{position:absolute;left:4%;right:4%;bottom:5%;height:26px;display:flex;gap:3px;padding:4px;border-radius:8px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .cine-tl i{flex:1;border-radius:3px;background:linear-gradient(90deg,color-mix(in oklab,var(--coral) 70%,#000),color-mix(in oklab,var(--coral) 40%,#000))} .cine-tl i:nth-child(2){flex:1.6}.cine-tl i:nth-child(3){flex:.8}.cine-tl i:nth-child(4){flex:1.3} .cine-tl b{position:absolute;top:-4px;bottom:-4px;left:4px;width:2px;background:#fff;box-shadow:0 0 8px #fff} .cine-final.on .cine-tl b{animation:playhead 10.1s linear infinite} @keyframes playhead{to{left:calc(100% - 6px)}} .cine-perf{position:absolute;inset:0;pointer-events:none;z-index:4; background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.85) 18px 30px) top/100% 9px no-repeat, repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.85) 18px 30px) bottom/100% 9px no-repeat;opacity:.55;mix-blend-mode:multiply} .cine-screen::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.65)} .cine-cap{position:absolute;left:14px;right:14px;top:16px;z-index:7;margin:0;display:flex;justify-content:space-between;font-size:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.9)} .cine-rec{color:#ff4d4d;animation:caret 1.4s steps(1) infinite} @media (max-width:820px){ .svc.duo{grid-template-columns:1fr;gap:34px;min-height:0;padding-bottom:120px} .svc.duo .svc-card,.svc.duo .svc-card.right{grid-column:1;grid-row:1} .svc.duo .svc-media,.svc.duo .svc-card.right ~ .svc-media{grid-column:1;grid-row:2} .brand-desk{height:360px} .bd-card{width:44%} .reel-phones{height:auto;padding:10px 0} .rp-screen{width:26vw} .rp:nth-child(2) .rp-screen{width:32vw} .feed-phone{width:min(70vw,280px)} .fp-note{right:-4%} .ww-view{height:52vh} .cine{height:520vh} .cine-stick{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:20px;padding-top:84px} .cine-head .display{font-size:clamp(1.7rem,8vw,2.4rem)} .cine-screen{grid-row:2} .cine-step{padding:4px 0} .cine-step:not(.on){display:none} .cine-steps{min-height:6.5em} .cine-typed{font-size:.8rem;min-height:9em} .cine-term{width:88%;padding:14px} } @media (prefers-reduced-motion:reduce){ .cine-grain,.cine-beam{animation:none} } body.in-cine .chroma,body.in-cine .feel{opacity:0;pointer-events:none} .cine-screen{max-height:74vh} /* ===================================================================== GRADO DE COLOR — colours glide like a film grade; 60 · 30 · 10 ===================================================================== */ :root{transition:--coral 1.1s ease,--a2 1.1s ease,--a3 1.1s ease,--bg 1.4s ease} .wheel-sw{grid-template-columns:5.2fr 3fr 1.6fr} .wheel-sw button{min-width:0} .wheel-sw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .wheel-sw span b{color:var(--ink);font-weight:400} .ambient{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen;transition:opacity .8s; background:radial-gradient(38vmax 38vmax at var(--hx,50%) var(--hy,40%),color-mix(in oklab,var(--a2) 22%,transparent),transparent 70%), radial-gradient(18vmax 18vmax at calc(var(--hx,50%) + 6vmax) calc(var(--hy,40%) + 4vmax),color-mix(in oklab,var(--a3) 12%,transparent),transparent 70%)} .ambient::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5))} body.in-trip .ambient,body.in-cine .ambient{opacity:0} @media (hover:none){.ambient{opacity:.3}} /* sound on the cards */ .card-snd{position:absolute;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 12px!important;border:0;border-radius:99px!important;cursor:pointer; color:#fff;background:rgba(6,8,12,.6)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important; opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease),background .3s} .card-snd::before,.card-snd::after{display:none!important} .card-snd span{font-size:.48rem} .card-snd i{display:flex;align-items:flex-end;gap:2px;height:12px} .card-snd b{width:2px;height:30%;border-radius:2px;background:currentColor} .card:hover .card-snd,.card.loud .card-snd{opacity:1;transform:none} .card.loud .card-snd{background:var(--coral)!important;color:#0b0c10} .card.loud .card-snd b{animation:eq .8s ease-in-out infinite alternate} .card.loud .card-snd b:nth-child(2){animation-delay:-.3s}.card.loud .card-snd b:nth-child(3){animation-delay:-.55s} @keyframes eq{from{height:20%}to{height:100%}} .card.loud{box-shadow:0 0 0 2px var(--coral),0 30px 80px -30px var(--coral)} @media (hover:none){.card-snd{opacity:1;transform:none}} /* before / after colour */ .s-look .cmp{position:absolute;inset:0;cursor:ew-resize;touch-action:pan-y;--cut:100%} .s-look .cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:none} .s-look .cmp-a{filter:saturate(.18) contrast(.78) brightness(1.12)!important} .s-look .cmp-b{filter:none!important;clip-path:inset(0 0 0 var(--cut))} .cmp-h{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.6)} .cmp-h i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%; font-style:normal;color:#111;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45)} .cmp-la,.cmp-lb{position:absolute;top:44px;padding:6px 10px;border-radius:99px;font-size:.46rem;background:rgba(0,0,0,.55)} .cmp-la{left:14px}.cmp-lb{right:14px} /* ===================================================================== NOSOTROS — the person behind every frame ===================================================================== */ .about{position:relative;z-index:3;padding:clamp(90px,14vh,160px) var(--pad) clamp(60px,10vh,120px); background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--bg) 88%,transparent) 14%,color-mix(in oklab,var(--bg) 88%,transparent) 86%,transparent)} .about-in{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,110px);align-items:center;max-width:1240px;margin:0 auto} .about-portrait{--tx:0;--ty:0;position:relative;aspect-ratio:458/615;width:min(100%,440px);justify-self:center;perspective:900px} .about-portrait img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;display:block; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 98%),linear-gradient(90deg,transparent 1%,#000 14%,#000 88%,transparent 99%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 70%,transparent 98%),linear-gradient(90deg,transparent 1%,#000 14%,#000 88%,transparent 99%);mask-composite:intersect; filter:drop-shadow(0 0 1px color-mix(in oklab,var(--a2) 70%,transparent)) drop-shadow(-10px 0 30px color-mix(in oklab,var(--a2) 35%,transparent)) drop-shadow(12px 0 36px color-mix(in oklab,var(--coral) 30%,transparent)); transform:translate3d(calc(var(--tx) * 8px),calc(var(--ty) * 6px),0) rotateY(calc(var(--tx) * 5deg)) rotateX(calc(var(--ty) * -4deg));transition:transform .5s var(--ease)} .ap-halo{position:absolute;inset:6% -8% 18%;z-index:0;border-radius:50%;filter:blur(40px);opacity:.75; background:radial-gradient(closest-side,color-mix(in oklab,var(--a2) 55%,transparent),color-mix(in oklab,var(--coral) 25%,transparent) 60%,transparent); transform:translate3d(calc(var(--tx) * -14px),calc(var(--ty) * -10px),0);transition:transform .6s var(--ease)} .ap-rings{position:absolute;left:50%;top:40%;z-index:1;width:92%;aspect-ratio:1;transform:translate(-50%,-50%)} .ap-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--a2) 40%,transparent);animation:apSpin 24s linear infinite} .ap-rings i:nth-child(2){inset:9%;border-style:dashed;border-color:color-mix(in oklab,var(--coral) 45%,transparent);animation-duration:36s;animation-direction:reverse} .ap-rings i:nth-child(3){inset:-9%;border-color:rgba(255,255,255,.07);animation-duration:60s} .ap-rings i::after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 14px var(--coral)} .ap-rings i:nth-child(2)::after{background:var(--a3);box-shadow:0 0 14px var(--a3)} .ap-rings i:nth-child(3)::after{display:none} @keyframes apSpin{to{transform:rotate(360deg)}} .ap-chips{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none;pointer-events:none} .ap-chips li{position:absolute;padding:8px 12px;border-radius:99px;font-size:.5rem;white-space:nowrap;color:var(--ink); background:rgba(8,10,14,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 30px -12px rgba(0,0,0,.8); opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);animation:apFloat 6s ease-in-out infinite} .ap-chips li:nth-child(1){left:-6%;top:20%} .ap-chips li:nth-child(2){right:-8%;top:32%;animation-delay:-1.5s} .ap-chips li:nth-child(3){left:-10%;top:56%;animation-delay:-3s} .ap-chips li:nth-child(4){right:-4%;top:66%;animation-delay:-4.5s} .ap-chips li::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--coral);vertical-align:1px} .ap-chips li:nth-child(even)::before{background:var(--a2)} .about.on .ap-chips li{opacity:1;transform:none} .about.on .ap-chips li:nth-child(2){transition-delay:.15s}.about.on .ap-chips li:nth-child(3){transition-delay:.3s}.about.on .ap-chips li:nth-child(4){transition-delay:.45s} @keyframes apFloat{50%{translate:0 -8px}} .ap-sign{position:absolute;right:4%;bottom:6%;z-index:3;margin:0;font:700 clamp(2.4rem,4vw,3.6rem)/1 'Caveat',cursive;color:var(--coral);transform:rotate(-8deg); clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.6,0,.2,1) .6s;text-shadow:0 6px 30px rgba(0,0,0,.6)} .about.on .ap-sign{clip-path:inset(0 -10% 0 0)} .about-copy{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .about.on .about-copy{opacity:1;transform:none} .about-copy .display{display:block;margin:14px 0 22px;font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:.98} .about-name{display:grid;gap:6px;margin:0 0 18px} .about-name b{font:700 clamp(1.2rem,1.8vw,1.5rem)/1.2 'Bricolage Grotesque',sans-serif} .about-name .px{color:var(--coral);font-size:.55rem} .about-copy .lead{max-width:58ch} .about-p{max-width:58ch;color:var(--muted);line-height:1.65} .about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0 0} .about-stats div{padding:16px 14px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .about-stats dt{font:800 clamp(2rem,3.4vw,3rem)/1 'Bricolage Grotesque',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums} .about-stats div:nth-child(1) dt{color:var(--coral)} .about-stats dd{margin:8px 0 0;font-size:.8rem;line-height:1.35;color:var(--muted)} .about-k{margin:0 0 14px;color:var(--muted)} .about-road{max-width:1240px;margin:clamp(50px,9vh,100px) auto 0} .about-road ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:r} .about-road li{position:relative;display:grid;gap:6px;align-content:start;padding:18px 16px 20px;border-radius:20px;counter-increment:r; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .35s,background .35s} .about-road li.on{opacity:1;transform:none} .about-road li:nth-child(2){transition-delay:.06s}.about-road li:nth-child(3){transition-delay:.12s}.about-road li:nth-child(4){transition-delay:.18s} .about-road li:nth-child(5){transition-delay:.24s}.about-road li:nth-child(6){transition-delay:.3s} .about-road li:hover{background:linear-gradient(180deg,color-mix(in oklab,var(--a2) 14%,transparent),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--a2) 45%,transparent);transform:translateY(-4px)} .about-road li::before{content:counter(r,decimal-leading-zero);position:absolute;right:14px;top:14px;font:italic 1.6rem/1 'Instrument Serif',serif;color:rgba(255,255,255,.14)} .about-road span{font-size:.5rem;color:var(--coral)} .about-road b{font:700 1rem/1.25 'Bricolage Grotesque',sans-serif} .about-road small{font-size:.8rem;line-height:1.4;color:var(--muted)} .about-foot{max-width:1240px;margin:clamp(34px,6vh,60px) auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:26px 50px} .about-tools{flex:1 1 520px} .about-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .about-tools li{padding:8px 14px;border-radius:99px;font-size:.85rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);background:rgba(255,255,255,.03)} .about-tools li:last-child{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--coral) 60%,transparent);color:var(--coral)} .about-cert{margin:14px 0 0;font-size:.8rem;color:var(--muted);max-width:80ch} .about-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px} @media (max-width:1000px){ .about-road ol{grid-template-columns:repeat(3,minmax(0,1fr))} .about-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:820px){ .about-in{grid-template-columns:1fr} .about-portrait{width:min(78vw,340px)} .ap-chips li:nth-child(1),.ap-chips li:nth-child(3){left:-4%} .ap-chips li:nth-child(2),.ap-chips li:nth-child(4){right:-4%} .about-road ol{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){.ap-rings i,.ap-chips li{animation:none}} /* ===================================================================== v20 — LA CHISPA, EL VISOR, LA RUEDA DE EMOCIONES, LA ÓRBITA ===================================================================== */ /* ---------- the spark on "Empezar un proyecto" ---------- */ .spark-cv{position:fixed;inset:0;width:100%;height:100%;z-index:2400;pointer-events:none} body.spark-hot #portal,body.spark-hot .cur{opacity:0!important;transition:opacity .25s} a.btn.lit{box-shadow:0 0 0 1px color-mix(in oklab,var(--a3) 70%,transparent),0 0 40px -6px var(--coral),0 18px 50px -18px var(--coral)!important;transform:translateY(-2px)} .spark-win{position:fixed;z-index:2390;pointer-events:none;border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(20,22,30,.92),rgba(10,11,16,.94));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 80px -20px rgba(0,0,0,.95),0 0 60px -20px var(--coral); transform-origin:var(--ox,50%) 100%;transform:translateY(-100%) scale(.2);opacity:0; transition:transform .55s cubic-bezier(.2,1.3,.3,1),opacity .3s} .spark-win.below{transform-origin:var(--ox,50%) 0;transform:scale(.2)} .spark-win.on{opacity:1;transform:translateY(-100%) scale(1)} .spark-win.below.on{transform:scale(1)} .sw-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)} .sw-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.sw-bar i:nth-child(2){background:#febc2e}.sw-bar i:nth-child(3){background:#28c840} .sw-bar span{margin-left:8px;font-size:.46rem;color:var(--muted)} .sw-body{padding:14px 16px 16px;display:grid;gap:10px} .sw-k{margin:0;font-size:.46rem;color:var(--coral)} .sw-idea{margin:0;min-height:2.6em;font:700 1.15rem/1.3 'Bricolage Grotesque',sans-serif} .sw-caret{display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--coral);animation:caret 1s steps(1) infinite} .sw-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px} .sw-thumbs i{aspect-ratio:1;border-radius:8px;background-size:cover;background-position:center;opacity:0;transform:translateY(8px) rotate(-6deg)} .spark-win.on .sw-thumbs i{animation:swIn .5s var(--ease) forwards} .spark-win.on .sw-thumbs i:nth-child(2){animation-delay:.06s}.spark-win.on .sw-thumbs i:nth-child(3){animation-delay:.12s} .spark-win.on .sw-thumbs i:nth-child(4){animation-delay:.18s}.spark-win.on .sw-thumbs i:nth-child(5){animation-delay:.24s} @keyframes swIn{to{opacity:1;transform:none}} .sw-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;counter-reset:s} .sw-steps li{flex:1;padding:6px 4px;border-radius:8px;text-align:center;font-size:.42rem;background:rgba(255,255,255,.05);counter-increment:s} .sw-steps li::before{content:counter(s) ' · ';color:var(--coral)} .sw-go{margin:0;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--coral)} .sw-go span{animation:swGo 1s ease-in-out infinite alternate} @keyframes swGo{to{transform:translateX(6px)}} .spark-open{position:fixed;inset:0;z-index:2450;display:grid;place-items:center;pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,color-mix(in oklab,var(--coral) 55%,#0b0c10),#0b0c10 70%); transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .8s} .spark-open .so-in{display:grid;gap:10px;text-align:center;opacity:0;transform:scale(.9);transition:.6s var(--ease) .25s} .spark-open.grow .so-in{opacity:1;transform:none} .spark-open strong{font:800 clamp(3rem,10vw,8rem)/.9 'Bricolage Grotesque',sans-serif} .spark-open span{font:italic clamp(1.4rem,3vw,2.4rem) 'Instrument Serif',serif;color:#fff} .spark-open.out{opacity:0} #brief.lit{animation:briefLit 1.6s var(--ease)} @keyframes briefLit{0%{box-shadow:0 0 0 0 var(--coral)}30%{box-shadow:0 0 0 3px var(--coral),0 0 80px -10px var(--coral)}100%{box-shadow:0 0 0 0 transparent}} /* ---------- the viewer ---------- */ .lb{background:rgba(4,5,8,.9)} .lb-bg{position:absolute;inset:-10%;z-index:-1;background-size:cover;background-position:center;filter:blur(60px) saturate(1.5) brightness(.4);transform:scale(1.1);transition:background-image .5s} .lb-stage{max-width:min(1400px,92vw);max-height:74vh} .lb-stage img,.lb-stage video{max-width:min(1400px,92vw);max-height:74vh;border-radius:14px;box-shadow:0 50px 140px rgba(0,0,0,.8)} .lb-stage.in>*{animation:lbIn .5s var(--ease)} @keyframes lbIn{from{opacity:0;transform:scale(.97) translateY(10px);filter:blur(8px)}} .lb{grid-template-rows:1fr auto auto;padding:70px 0 14px} .lb-stage{align-self:center;justify-self:center} .lb-meta{position:static;margin:14px 0 10px} .lb-film{display:flex;gap:8px;max-width:min(1100px,94vw);overflow-x:auto;padding:6px 4px 10px;scrollbar-width:none;justify-self:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .lb-film::-webkit-scrollbar{display:none} .lb-film button{position:relative;flex:0 0 auto;width:74px;height:52px;border:0;border-radius:10px;cursor:pointer;background-size:cover;background-position:center;opacity:.4;filter:saturate(.6);transition:opacity .3s,transform .3s var(--ease),box-shadow .3s} .lb-film button:hover{opacity:.85;transform:translateY(-3px)} .lb-film button.on{opacity:1;filter:none;box-shadow:0 0 0 2px var(--coral),0 10px 24px -8px var(--coral);transform:translateY(-4px)} .lb-film button i{position:absolute;right:4px;bottom:3px;font-style:normal;font-size:.55rem;color:#fff;text-shadow:0 1px 4px #000} .lb-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.06)} .lb-bar i{display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)} .lb-nav{width:64px!important;height:64px!important;font-size:1.9rem!important} .lb-meta .lb-up{color:var(--muted);font-size:.9em} .lb-meta .lb-up b{color:var(--ink);font-weight:400} @media(max-width:640px){.lb{padding-top:64px}.lb-nav{width:44px!important;height:44px!important}.lb-meta .lb-up{display:none}.lb-film button{width:56px;height:40px}} .rp-open{position:absolute;right:8px;top:26px;z-index:3;width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:zoom-in;color:#fff;font-size:1rem; background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s} .rp:hover .rp-open{opacity:1} @media (hover:none){.rp-open{opacity:1}} .bd-card{cursor:zoom-in} /* ---------- the emotions dock ---------- */ .feel{flex-direction:row;align-items:center;gap:8px;--emo:var(--coral)} .feel-open{display:flex!important;align-items:center;gap:10px;padding:8px 14px 8px 8px!important;border-radius:999px!important;color:var(--ink)!important; background:rgba(10,12,16,.72)!important;border:1px solid rgba(255,255,255,.14)!important} .feel-open .px{font-size:.5rem;color:var(--muted)} .feel-now{font-weight:400;font-size:.56rem;color:var(--ink)} .feel-orb{position:relative;width:30px;height:30px;border-radius:50%;flex:0 0 auto; background:conic-gradient(from 0deg,hsl(272 78% 58%),hsl(338 78% 58%),hsl(46 78% 58%),hsl(150 78% 58%),hsl(196 78% 58%),hsl(244 78% 58%),hsl(272 78% 58%)); animation:apSpin 8s linear infinite;box-shadow:0 0 18px -2px var(--emo)} .feel-orb::after{content:'';position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--emo) 45%,#0b0c10 100%)} .feel-snd{display:flex!important;align-items:center;gap:8px;padding:10px 14px!important;border-radius:999px!important;background:rgba(10,12,16,.72)!important;border:1px solid rgba(255,255,255,.14)!important;color:var(--muted)!important} .feel-snd span{font-size:.5rem} .feel-snd i,.emo-play i,.or-eq{display:flex;align-items:flex-end;gap:2px;height:14px;width:auto!important;background:none!important;clip-path:none!important;border-radius:0!important;opacity:1!important} .feel-snd i b,.emo-play i b,.or-eq b{width:3px;height:30%;border-radius:2px;background:currentColor} .feel-snd[aria-pressed="true"]{color:var(--ink)!important;border-color:var(--emo)!important} .feel-snd[aria-pressed="true"] i b,.emo-play.on i b,.orbit .or-i.sel .or-eq b{animation:eq .9s ease-in-out infinite alternate} .feel-snd i b:nth-child(2),.emo-play i b:nth-child(2),.or-eq b:nth-child(2){animation-delay:-.35s!important} .feel-snd i b:nth-child(3),.emo-play i b:nth-child(3),.or-eq b:nth-child(3){animation-delay:-.6s!important} .feel-snd i b:nth-child(4),.emo-play i b:nth-child(4),.or-eq b:nth-child(4){animation-delay:-.15s!important} body.spotify-on .feel-snd{opacity:.5} body.emo-open .feel,body.orbit-on .feel{opacity:0;pointer-events:none} @media (max-width:820px){.feel-open .px{display:none}.feel-snd span{display:none}} /* ---------- la rueda de emociones ---------- */ .emo{position:fixed;inset:0;z-index:2300;display:grid;place-items:center;--emo:var(--coral);opacity:0;transition:opacity .45s} .emo.on{opacity:1} .emo-back{position:absolute;inset:0;background:radial-gradient(80% 80% at 35% 50%,color-mix(in oklab,var(--emo) 22%,rgba(4,5,8,.9)),rgba(4,5,8,.94) 70%); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .6s} .emo-x{position:absolute;top:22px;right:24px;z-index:3;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.08)} .emo-x:hover{background:var(--emo)} .emo-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(20px,5vw,80px);align-items:center; width:min(1200px,94vw);max-height:92vh} .emo-wheel{position:relative;width:min(560px,100%,84vh);aspect-ratio:1;justify-self:center} .emo-wheel svg{width:100%;height:100%;overflow:visible;transform:rotate(-8deg) scale(.85);opacity:0;transition:transform 1s cubic-bezier(.2,1,.3,1),opacity .5s} .emo.on .emo-wheel svg{transform:none;opacity:1} .emo-core{fill:var(--emo);opacity:.14;transition:fill .5s} .emo-orbit{fill:none;stroke:rgba(255,255,255,.08);stroke-dasharray:2 8;animation:apSpin 60s linear infinite;transform-origin:250px 250px} .emo-p{cursor:pointer;outline:none} .emo-seg{fill:color-mix(in oklab,var(--c) 26%,#0c0d12);stroke:rgba(255,255,255,.06);transition:fill .35s,transform .45s cubic-bezier(.2,1.4,.3,1);transform-origin:250px 250px} .emo-glow{fill:var(--c);opacity:0;transition:opacity .35s} .emo-p text{fill:rgba(255,255,255,.72);font:600 13px 'Space Grotesk',sans-serif;text-anchor:middle;pointer-events:none;transition:fill .3s} .emo-p.hover .emo-seg,.emo-p:focus-visible .emo-seg{fill:color-mix(in oklab,var(--c) 70%,#0c0d12);transform:scale(1.04)} .emo-p.hover .emo-glow{opacity:.5} .emo-p.hover text{fill:#fff} .emo-p.on .emo-seg{fill:var(--c)} .emo-p.on .emo-glow{opacity:1} .emo-p.on text{fill:#0b0c10} .emo-center{position:absolute;inset:30%;display:grid;place-content:center;text-align:center;gap:6px;pointer-events:none} .emo-center .px{margin:0;font-size:.46rem;color:var(--muted)} .emo-cname{font:italic clamp(1.8rem,3.4vw,2.8rem)/1 'Instrument Serif',serif;color:var(--emo);transition:color .4s} .emo-cline{font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.75)} .emo-side{display:grid;gap:14px;align-content:center;max-height:88vh;overflow:auto;padding:4px 6px 4px 0;opacity:0;transform:translateX(30px);transition:opacity .6s .15s,transform .8s var(--ease) .15s} .emo.on .emo-side{opacity:1;transform:none} .emo-k{margin:0;color:var(--muted)} .emo-name{margin:0;font:italic clamp(3rem,6vw,5.6rem)/.9 'Instrument Serif',serif;color:var(--emo);transition:color .4s} .emo-line{margin:0;font-size:1.05rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:40ch} .emo-music{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px} .emo-play{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:0;border-radius:999px;cursor:pointer;color:#0b0c10;font:600 .95rem 'Space Grotesk',sans-serif; background:var(--emo);box-shadow:0 10px 30px -10px var(--emo);transition:transform .25s,background .4s} .emo-play:hover{transform:translateY(-2px)} .emo-label{margin:0;font-size:.48rem;color:var(--muted)} .emo-spot{border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .emo-spot summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600;list-style:none} .emo-spot summary::-webkit-details-marker{display:none} .emo-spot summary::after{content:'+';margin-left:auto;color:var(--muted);transition:transform .3s} .emo-spot[open] summary::after{transform:rotate(45deg)} .emo-spot-ic{width:22px;height:22px;border-radius:50%;background:#1ed760;position:relative} .emo-spot-ic::before{content:'';position:absolute;inset:6px 5px;border-top:2px solid #000;border-bottom:2px solid #000;border-radius:50% 50% 0 0/40% 40% 0 0} .emo-spot-body{display:grid;gap:10px;padding:0 12px 12px} .emo-embed iframe{width:100%;height:152px;border:0;border-radius:12px;display:block} .emo-embed{min-height:152px;border-radius:12px;background:rgba(0,0,0,.3)} .emo-own{display:flex;gap:6px} .emo-own input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:var(--ink);font:inherit;font-size:.85rem} .emo-own button{padding:10px 14px;border:0;border-radius:10px;background:#1ed760;color:#000;font-weight:700;cursor:pointer} .emo-note{margin:0;font-size:.74rem;color:var(--muted)} .emo-work{display:flex;align-items:center;gap:12px;padding:8px;border:0;border-radius:16px;cursor:pointer;text-align:left;color:var(--ink); background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .3s} .emo-work:hover{background:color-mix(in oklab,var(--emo) 18%,transparent)} .emo-work img{width:74px;height:54px;border-radius:10px;object-fit:cover} .emo-work span{display:grid;gap:3px} .emo-work em{font-style:normal;font-size:.44rem;color:var(--emo)} .emo-work i{margin-left:auto;margin-right:8px;font-style:normal;color:var(--muted)} .emo-cta{justify-self:start;background:var(--emo)!important;color:#0b0c10!important;border-color:transparent!important} @media (max-width:860px){ .emo{place-items:start center;overflow:auto} .emo-in{grid-template-columns:1fr;padding:70px 0 30px;max-height:none} .emo-wheel{width:min(92vw,440px)} .emo-p text{font-size:12px} .emo-side{max-height:none;overflow:visible} .emo-name{font-size:3rem} } /* the emotion arrives like a title card */ .emo-film{position:fixed;inset:0;z-index:2200;pointer-events:none;--emo:var(--coral)} .emo-film>i{position:absolute;left:0;right:0;height:11vh;background:#000;transform:scaleY(0);transition:transform .7s cubic-bezier(.7,0,.2,1)} .emo-film>i:first-child{top:0;transform-origin:top} .emo-film>i:nth-child(2){bottom:0;transform-origin:bottom} .emo-film.on>i{transform:scaleY(1)} .emo-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;justify-items:center;gap:8px;text-align:center} .emo-title span{font-size:.55rem;color:rgba(255,255,255,.7);opacity:0;letter-spacing:.3em} .emo-title strong{font:italic clamp(4rem,13vw,11rem)/.9 'Instrument Serif',serif;color:var(--emo);opacity:0;filter:blur(18px);letter-spacing:.1em;text-shadow:0 10px 60px rgba(0,0,0,.7)} .emo-title em{font:italic clamp(1.1rem,2.2vw,1.8rem) 'Instrument Serif',serif;color:#fff;opacity:0;text-shadow:0 4px 20px rgba(0,0,0,.8)} .emo-film.on .emo-title span{animation:efIn 3.2s ease .9s forwards} .emo-film.on .emo-title strong{animation:efName 3.2s cubic-bezier(.2,.8,.2,1) 1s forwards} .emo-film.on .emo-title em{animation:efIn 3s ease 1.4s forwards} @keyframes efIn{0%{opacity:0;transform:translateY(10px)}20%,75%{opacity:1;transform:none}100%{opacity:0}} @keyframes efName{0%{opacity:0;filter:blur(18px);letter-spacing:.3em}25%,75%{opacity:1;filter:blur(0);letter-spacing:0}100%{opacity:0;filter:blur(10px)}} /* ---------- la órbita (clic derecho) ---------- */ .orbit{position:fixed;inset:0;z-index:2147482000;cursor:crosshair} .or-veil{position:absolute;inset:0;opacity:0;transition:opacity .45s; background:radial-gradient(circle at var(--cx) var(--cy),transparent 0,rgba(4,5,8,.35) 120px,rgba(4,5,8,.9) 480px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .or-veil::after{content:'';position:absolute;inset:0;opacity:.35; background:repeating-conic-gradient(from 0deg at var(--cx) var(--cy),rgba(255,255,255,.05) 0 2deg,transparent 2deg 12deg); -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent 60px,#000 200px,transparent 520px);mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent 60px,#000 200px,transparent 520px); animation:orSpin 30s linear infinite;transform-origin:var(--cx) var(--cy)} @keyframes orSpin{to{transform:rotate(360deg)}} .orbit.on .or-veil{opacity:1} .or-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .or-ring{fill:none;stroke:color-mix(in oklab,var(--coral) 45%,transparent);stroke-width:1} .or-ring2{fill:none;stroke:rgba(255,255,255,.08);stroke-dasharray:3 9} .or-ray{stroke:var(--coral);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--coral));transition:opacity .2s} .or-hub{position:absolute;left:var(--cx);top:var(--cy);width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;display:grid;place-content:center;text-align:center;gap:4px;pointer-events:none; background:radial-gradient(circle,rgba(16,18,24,.92),rgba(8,9,12,.85));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 60px -10px var(--coral); transform:scale(.3);opacity:0;transition:transform .6s cubic-bezier(.2,1.4,.3,1),opacity .3s} .orbit.on .or-hub{transform:none;opacity:1} .or-dot{justify-self:center;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 12px var(--coral);animation:caret 1.2s steps(1) infinite} .or-name{font:italic 1.35rem/1 'Instrument Serif',serif;padding:0 10px} .or-desc{font-size:.66rem;line-height:1.3;color:var(--muted);padding:0 16px} .or-i{position:absolute;left:0;top:0;width:86px;height:86px;margin:-43px 0 0 -43px;padding:0;border:0;background:none;color:var(--ink);text-decoration:none;cursor:pointer; transform:translate(var(--ox),var(--oy)) scale(.2) rotate(-90deg);opacity:0; transition:transform .7s cubic-bezier(.2,1.2,.3,1) calc(var(--i) * .035s),opacity .4s calc(var(--i) * .035s)} .orbit.on .or-i{transform:translate(var(--x),var(--y));opacity:1;transition:transform .12s linear,opacity .4s calc(var(--i) * .035s)} .orbit.on .or-i{animation:orPop .75s cubic-bezier(.2,1.3,.3,1) backwards calc(var(--i) * .04s)} @keyframes orPop{from{transform:translate(var(--ox),var(--oy)) scale(.2) rotate(-120deg);opacity:0}} .or-m{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#0d0f14; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 16px 40px -14px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.2,1.4,.3,1),box-shadow .3s} .or-m img,.or-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.7);transition:filter .3s,transform .6s} .or-i.cut .or-m img{object-fit:cover;object-position:50% 12%;background:radial-gradient(circle at 50% 30%,color-mix(in oklab,var(--a2) 60%,#111),#111)} .or-m video{opacity:0;transition:opacity .4s} .or-i.sel .or-m video{opacity:1} .or-l{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:.5rem;color:rgba(255,255,255,.7);text-shadow:0 2px 10px #000;transition:color .3s} .or-i.sel{z-index:2} .or-i.sel .or-m{transform:scale(1.32);box-shadow:inset 0 0 0 2px var(--coral),0 0 50px -6px var(--coral),0 24px 50px -18px #000} .or-i.sel .or-m img{filter:none;transform:scale(1.08)} .or-i.sel .or-l{color:#fff} .or-i.go .or-m{transform:scale(3);opacity:0;transition:transform .5s var(--ease),opacity .5s} .or-swirl{position:absolute;inset:0;background:conic-gradient(hsl(272 78% 58%),hsl(338 78% 58%),hsl(46 78% 58%),hsl(150 78% 58%),hsl(196 78% 58%),hsl(272 78% 58%));animation:apSpin 6s linear infinite;opacity:.85} .or-eq{height:26px!important;gap:3px!important;color:var(--coral)} .or-eq b{width:4px!important} .or-mirror{position:absolute;inset:0;background:linear-gradient(135deg,#fff 0,#9aa 18%,#223 40%,#cde 60%,#556 80%,#fff 100%);opacity:.8;animation:orShine 3s ease-in-out infinite alternate} @keyframes orShine{to{filter:hue-rotate(40deg) brightness(1.2)}} .or-wa{position:absolute;inset:0;background:radial-gradient(circle,#25d366,#128c4a)} .or-wa::after{content:'';position:absolute;inset:30%;border:3px solid #fff;border-radius:50% 50% 50% 8%} .or-spark{position:absolute;inset:0;background:radial-gradient(circle,#fff 0 6%,var(--a3) 16%,var(--coral) 40%,#1a0a10 75%);animation:orShine 1.6s ease-in-out infinite alternate} /* hidden overlays must never catch a click */ [hidden]{display:none!important} /* ---------- covers in the wheel ---------- */ .emo-img image{opacity:.55;filter:saturate(.8);transition:opacity .35s} .emo-seg{fill:color-mix(in oklab,var(--c) 38%,rgba(8,9,12,.55))!important;mix-blend-mode:normal} .emo-p.hover .emo-img image,.emo-p.on .emo-img image{opacity:1} .emo-p.hover .emo-seg{fill:color-mix(in oklab,var(--c) 22%,transparent)!important} .emo-p.on .emo-seg{fill:color-mix(in oklab,var(--c) 30%,transparent)!important;stroke:var(--c);stroke-width:2} .emo-p text{fill:#fff!important;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;font-weight:700} .emo-head{display:flex;gap:16px;align-items:center} .emo-cover{position:relative;flex:0 0 auto;width:clamp(96px,11vw,140px);aspect-ratio:1;margin:0;border-radius:14px;overflow:hidden; box-shadow:0 20px 50px -18px var(--emo),0 0 0 1px rgba(255,255,255,.14);transform:rotate(-3deg);transition:transform .5s var(--ease)} .emo-cover:hover{transform:rotate(0) scale(1.04)} .emo-cover img{width:100%;height:100%;object-fit:cover;display:block;animation:lbIn .5s var(--ease)} .emo-cover figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:.36rem;line-height:1.3;background:linear-gradient(transparent,rgba(0,0,0,.85));color:rgba(255,255,255,.8)} .emo-pal{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .emo-sw{display:flex} .emo-sw i{width:22px;height:22px;border-radius:50%;margin-right:-6px;box-shadow:0 0 0 2px #0b0c10} .emo-rule{font-size:.44rem;color:var(--muted);margin-left:6px} @media (max-width:860px){.emo-cover{width:92px}} /* ===================================================================== v22 — TELÉFONOS 3D, INSTAGRAM EN VIVO, CASO DESTACADO, SPOTIFY DE FONDO ===================================================================== */ .p3{--w:200px;--r:30px;--rx:0deg;--ry:0deg;--gl:50%;position:relative;perspective:1100px;display:inline-block} .p3-body{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform} .p3-edge{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(var(--z)); background:linear-gradient(90deg,#3a3d44,#9ea3ad 18%,#50545c 40%,#c9ced6 62%,#44474e 84%,#8d929b)} .p3-back{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(-10px) rotateY(180deg);backface-visibility:hidden; background:linear-gradient(145deg,#2a2c31,#16171a 60%,#232428)} .p3-cam{position:absolute;left:10%;top:6%;width:34%;aspect-ratio:1;border-radius:26%;background:linear-gradient(145deg,#33363c,#1b1c20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .p3-cam::before,.p3-cam::after{content:'';position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#27416a 0 20%,#050608 45%,#2c2f35 70%);box-shadow:0 0 0 2px #0b0c0f} .p3-cam::before{left:8%;top:8%}.p3-cam::after{right:8%;bottom:8%} .p3-logo{position:absolute;left:50%;top:48%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#4a4d54,#26282c)} .p3-btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(#8d929b,#4a4e56);transform:translateZ(-5px)} .p3-b1{left:-2px;top:20%;height:6%}.p3-b2{left:-2px;top:29%;height:10%}.p3-b3{right:-2px;top:26%;height:14%} .p3-front{position:relative;padding:7px;border-radius:var(--r);background:#050507;transform:translateZ(0); box-shadow:inset 0 0 0 1.5px #b9bec7,inset 0 0 0 3px #1a1b1f} .p3 .p3-screen{position:relative;display:block;border-radius:calc(var(--r) - 7px)!important;overflow:hidden;box-shadow:none!important;margin:0} .p3-island{position:absolute;left:50%;top:14px;width:30%;height:18px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:4;pointer-events:none} .p3-glare{position:absolute;inset:7px;border-radius:calc(var(--r) - 7px);pointer-events:none;z-index:5; background:linear-gradient(115deg,transparent calc(var(--gl) - 30%),rgba(255,255,255,.16) var(--gl),transparent calc(var(--gl) + 12%));mix-blend-mode:screen} .p3-shadow{position:absolute;left:10%;right:10%;bottom:-26px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(6px); transform:translateX(calc(var(--ry) * -.8));pointer-events:none} .rp .p3-screen::before{display:none} .rp .p3-screen{cursor:zoom-in} .rp,.rp:nth-child(1),.rp:nth-child(3){transform:translateY(var(--lift,0))!important} .rp .rp-sound{bottom:16px} .rp:hover .rp-sound{opacity:1} /* the stage */ .p3-stage{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;grid-template-columns:1fr auto 1fr} .p3s-back{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,color-mix(in oklab,var(--coral) 18%,rgba(3,4,6,.9)),rgba(3,4,6,.96)); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .5s} .p3-stage.on .p3s-back{opacity:1} .p3s-holder{grid-column:2;grid-row:1;position:relative;z-index:2;will-change:transform} .p3-big{--r:44px} .p3-big .p3-screen{height:min(80vh,760px);aspect-ratio:9/16;background:#000;cursor:pointer} .p3-big .p3-screen video{width:100%;height:100%;object-fit:cover;display:block} .p3-big .p3-island{top:18px;height:24px} .p3s-info{grid-column:1;grid-row:1;justify-self:end;max-width:320px;margin-right:clamp(20px,4vw,60px);position:relative;z-index:2;opacity:0;transform:translateX(-20px);transition:.6s var(--ease) .5s} .p3s-client{margin:0 0 8px;color:var(--coral);font-size:.55rem} .p3s-title{margin:0;font:italic clamp(2.2rem,4vw,3.6rem)/.95 'Instrument Serif',serif} .p3s-note{margin:12px 0 0;color:var(--muted);line-height:1.5;font-size:.95rem} .p3s-ctrl{grid-column:3;grid-row:1;justify-self:start;margin-left:clamp(20px,4vw,60px);position:relative;z-index:2;display:grid;gap:10px;width:min(260px,26vw); padding:16px;border-radius:20px;background:rgba(12,14,18,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;transform:translateX(20px);transition:.6s var(--ease) .6s} .p3-stage.on .p3s-info,.p3-stage.on .p3s-ctrl{opacity:1;transform:none} .p3s-ctrl button{height:46px;border:0;border-radius:14px;cursor:pointer;color:var(--ink);font-size:1.05rem;background:rgba(255,255,255,.08);transition:background .25s} .p3s-ctrl button:hover{background:var(--coral);color:#0b0c10} .p3s-play{background:var(--coral)!important;color:#0b0c10!important;font-size:1.2rem!important} .p3s-time{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.12)} .p3s-time i{position:absolute;inset:0;border-radius:3px;background:var(--coral);transform-origin:left;transform:scaleX(0)} .p3s-time input{position:absolute;inset:-8px 0;width:100%;opacity:0;cursor:pointer} .p3s-clock{font-size:.5rem;color:var(--muted)} .p3s-x{position:absolute;top:22px;right:24px;z-index:3;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.1)} .p3s-x:hover{background:var(--coral)} body.p3-on .feel,body.p3-on .chroma,body.p3-on .wa,body.p3-on #portal,body.p3-on .cur{opacity:0!important;pointer-events:none} @media (max-width:900px){ .p3-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:14px 0} .p3s-info{grid-column:1;grid-row:1;justify-self:center;text-align:center;margin:44px 12px 8px} .p3s-title{font-size:1.9rem}.p3s-note{display:none} .p3s-holder{grid-column:1;grid-row:2} .p3-big .p3-screen{height:min(62vh,560px)} .p3s-ctrl{grid-column:1;grid-row:3;justify-self:center;margin:10px 0 0;width:min(92vw,360px);grid-template-columns:auto 1fr auto auto;align-items:center} .p3s-ctrl .p3s-clock{display:none} .p3s-ctrl button{width:46px} } /* Instagram, live */ .ig-live{justify-self:center;display:grid;justify-items:center;gap:18px} .p3-ig{--r:40px} .ig-screen{width:clamp(250px,24vw,320px);height:min(620px,72vh);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#111;scrollbar-width:none} .ig-screen::-webkit-scrollbar{display:none} .ig-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:40px 14px 10px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 .8rem 'Space Grotesk',sans-serif} .ig-dot{color:#e11d48;font-size:.46rem} .ig-dot::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e11d48;animation:caret 1.2s steps(1) infinite} .ig-frame{display:block;width:100%;height:440px;border:0;background:#fff} .ig-follow{display:block;margin:6px 14px 4px;padding:10px;border-radius:10px;text-align:center;text-decoration:none;color:#fff;font:600 .85rem 'Space Grotesk',sans-serif; background:linear-gradient(90deg,#f58529,#dd2a7b,#8134af)} .ig-k{margin:18px 14px 8px;color:#777;font-size:.44rem} .ig-screen .fp-col{padding:0} .ig-note{margin:0} .ig-note .note{position:static;display:inline-block;transform:rotate(-3deg)} .ig-live .fp-heart{z-index:9} /* the featured case gets its stage */ .feature{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);min-height:min(92vh,860px)} .feature-stage{position:relative;display:grid;justify-items:center;gap:26px;padding:20px 0} .feature-glow{position:absolute;inset:4% -6% 18%;border-radius:50%;filter:blur(60px);opacity:.7;pointer-events:none; background:conic-gradient(from 0deg,var(--coral),var(--a2),var(--a3),var(--coral));animation:apSpin 14s linear infinite} .p3-feature{--r:40px} .feature-frame{width:auto!important;border-radius:0!important;box-shadow:none!important;transform:none!important;aspect-ratio:auto!important;overflow:visible!important} .feature-frame.p3-screen{width:min(300px,70vw)!important;aspect-ratio:9/16!important;overflow:hidden!important;cursor:pointer} .feature-frame video{width:100%;height:100%;object-fit:cover;display:block} .feature-play{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:10px;border:0;cursor:pointer;color:#fff; background:radial-gradient(circle,rgba(0,0,0,.25),rgba(0,0,0,.05) 60%)} .feature-play i{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;font-style:normal;font-size:1.8rem;padding-left:6px; background:color-mix(in oklab,var(--coral) 85%,transparent);box-shadow:0 0 0 10px color-mix(in oklab,var(--coral) 25%,transparent),0 20px 50px -10px var(--coral); animation:fpPulse 2.2s ease-in-out infinite;transition:transform .3s} .feature-play span{font-size:.5rem;text-shadow:0 2px 10px #000} .feature-play:hover i{transform:scale(1.1)} @keyframes fpPulse{50%{box-shadow:0 0 0 22px color-mix(in oklab,var(--coral) 0%,transparent),0 20px 50px -10px var(--coral)}} .feature-credits{position:relative;display:flex;gap:8px;margin:0;padding:0;list-style:none;flex-wrap:wrap;justify-content:center} .feature-credits li{display:grid;gap:2px;padding:10px 14px;border-radius:14px;font-size:.42rem;color:var(--muted);text-align:center; background:rgba(8,10,14,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .feature-credits b{font:800 1.2rem/1 'Bricolage Grotesque',sans-serif;color:var(--ink)} .feature-title{font-size:clamp(3.8rem,9vw,8.4rem)!important;text-shadow:0 20px 60px rgba(0,0,0,.6)} @media (max-width:820px){.feature{min-height:0}.ig-screen{width:min(76vw,300px);height:560px}} /* Spotify keeps playing wherever you go */ .spot-float{position:fixed;left:18px;bottom:78px;z-index:2350;width:300px;border-radius:14px;overflow:hidden;background:#121212; box-shadow:0 20px 50px -16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1)} .spot-float.docked{z-index:2310;box-shadow:none;background:transparent} .spot-host iframe{display:block;width:100%;height:80px!important;border:0} .spot-float.docked .spot-host iframe{height:152px!important} .spot-mini{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#181818} .spot-float.docked .spot-mini{display:none} .spot-mini .px{flex:1;font-size:.42rem;color:#1ed760} .spot-mini button{padding:6px 10px;border:0;border-radius:8px;cursor:pointer;color:#fff;background:rgba(255,255,255,.1);font:600 .72rem 'Space Grotesk',sans-serif} .spot-mini button:hover{background:#1ed760;color:#000} .emo-embed{min-height:152px} @media (max-width:820px){.spot-float{left:10px;right:10px;width:auto;bottom:140px}} /* ===================================================================== CRISTAL FUTURISTA — buttons keep their shape; light does the moving ===================================================================== */ @property --ang{syntax:'';inherits:false;initial-value:0deg} .lq{ border-radius:999px!important; -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.1)!important; backdrop-filter:blur(14px) saturate(1.8) brightness(1.1)!important; background: radial-gradient(130px 70px at var(--lx) var(--ly), rgba(255,255,255,calc(.05 + .16 * var(--near))), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 47%, rgba(255,255,255,0) 53%, rgba(255,255,255,.07))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 18px rgba(255,255,255,.05), 0 10px 30px -14px rgba(0,0,0,.9), 0 0 calc(34px * var(--near)) -8px var(--glow)!important; transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s,color .25s!important; } /* a ring of light that orbits the edge */ .lq::before{ padding:1px!important; background: conic-gradient(from var(--ang), transparent 0 58%, rgba(255,255,255,.95) 72%, var(--coral) 80%, var(--a2) 86%, transparent 94%), linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16))!important; opacity:calc(.45 + .55 * var(--near))!important; animation:lqOrbit 3.6s linear infinite!important; animation-play-state:paused!important; } .lq:hover::before,.lq:focus-visible::before,.lq[aria-pressed="true"]::before{animation-play-state:running!important;opacity:1!important} @keyframes lqOrbit{to{--ang:360deg}} /* a specular band that crosses the glass */ .lq::after{ left:-70%!important;right:auto!important;top:0!important;bottom:0!important;width:45%!important;height:auto!important;border-radius:0!important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)!important; transform:skewX(-22deg);opacity:0!important;transition:left .8s cubic-bezier(.2,.8,.2,1),opacity .3s!important; } .lq:hover::after{left:130%!important;opacity:1!important} .lq:not(.lb-nav):hover{transform:translateY(-2px)!important;border-radius:999px!important} .lq:not(.lb-nav):active{transform:translateY(0) scale(.97)!important} .lq.lq-press{animation:none!important} .wa.lq,.wa.lq:hover,.lb-x.lq,.lb-nav.lq,.burger.lq{border-radius:50%!important} .lb-nav.lq:hover{transform:translateY(-50%) scale(1.06)!important} /* primary drops: coloured glass with a lens line through the middle */ .btn.lq:not(.ghost),.wa.lq,.filters button.lq.on,.burger.lq[aria-expanded="true"],.emo-play.lq, .brief-chips button.lq[aria-pressed="true"],.wheel-rules button.lq[aria-pressed="true"]{ background: radial-gradient(130px 70px at var(--lx) var(--ly), rgba(255,255,255,calc(.14 + .26 * var(--near))), transparent 70%), linear-gradient(180deg, color-mix(in oklab,var(--coral) 55%,white) 0%, color-mix(in oklab,var(--coral) 92%,white) 46%, var(--coral) 54%, color-mix(in oklab,var(--coral) 82%,black) 100%)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 34px -12px var(--coral), 0 0 calc(44px * var(--near)) -6px var(--coral)!important; text-shadow:0 1px 1px rgba(0,0,0,.18); } .emo-cta.lq,.emo-play.lq{color:#0b0c10!important;text-shadow:0 1px 0 rgba(255,255,255,.35)} .emo-work.lq{border-radius:16px!important} .emo-work.lq:hover{border-radius:16px!important} @media(max-width:820px),(pointer:coarse){.lq::after{display:none}} /* the pointer: small and clean; glass only where it matters */ .cur-cv{left:-20px!important;top:-20px!important;width:40px!important;height:40px!important;opacity:.35} .cur .b{width:6px!important;height:6px!important;border-width:1.5px!important;opacity:.8} .cur .b1{left:-13px!important;top:-13px!important} .cur .b2{left:7px!important;top:-13px!important} .cur .b3{left:-13px!important;top:7px!important} .cur .b4{left:7px!important;top:7px!important} .cur.hot .b1{transform:translate(-5px,-5px)}.cur.hot .b2{transform:translate(5px,-5px)} .cur.hot .b3{transform:translate(-5px,5px)}.cur.hot .b4{transform:translate(5px,5px)} .cur-glass{width:10px!important;height:10px!important;left:-5px!important;top:-5px!important;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--coral) 60%)!important;box-shadow:0 0 12px var(--coral)!important} .cur.hot .cur-glass{width:34px!important;height:34px!important;left:-17px!important;top:-17px!important; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),rgba(255,255,255,.08) 30%,transparent 60%)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 18px -4px var(--coral)!important;-webkit-backdrop-filter:blur(2px) brightness(1.2);backdrop-filter:blur(2px) brightness(1.2)} /* the gate: the iris becomes a glass sphere, the sound switch glass too */ .iris-core{ background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.6), rgba(255,255,255,.1) 20%, transparent 38%), radial-gradient(circle at 50% 118%, color-mix(in oklab,var(--coral) 55%,transparent), transparent 58%), radial-gradient(circle at 50% 45%, #1c2029, #07080b 72%)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -12px 30px rgba(0,0,0,.65),0 0 50px -12px var(--coral)!important; } .gate-sound{-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6); background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 50%,rgba(255,255,255,.05))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 30px -14px #000!important} @media (max-width:820px){ .feature{grid-template-columns:1fr!important} .feature-title{font-size:clamp(3rem,15vw,4.6rem)!important} .feature-frame.p3-screen{width:min(240px,62vw)!important} .reel-phones{gap:6px} .rp-screen.p3-screen{width:23vw!important} .rp:nth-child(2) .rp-screen.p3-screen{width:27vw!important} .rp .p3{--r:20px} .rp .p3-front{padding:4px} .rp .p3-island{top:8px;height:10px} } /* ===================================================================== v23 — EL UMBRAL VIVO, LENTE SIN BORDE ===================================================================== */ .portal-glass{box-shadow:inset 0 12px 40px rgba(255,255,255,.06),inset 0 -14px 44px rgba(0,0,0,.2)!important} .cur.hot .cur-glass{box-shadow:0 0 18px -4px var(--coral)!important} .gate-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} .gate::before{z-index:-3} .gate-grain,.gate-beam{z-index:-2} .gate-center{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)} /* the mark answers */ .gate-mark{cursor:pointer} .gate-mark img{transition:filter .4s,transform .6s cubic-bezier(.2,1.4,.3,1)} .gate.logo-hot .gate-mark img{transform:scale(1.07) rotate(-2deg); filter:drop-shadow(-4px 0 0 color-mix(in oklab,var(--a2) 80%,transparent)) drop-shadow(4px 0 0 color-mix(in oklab,var(--coral) 80%,transparent)) drop-shadow(0 20px 60px var(--coral)); animation:markGlitch .9s steps(2) 1} .gate.logo-hot .gate-shine{animation-duration:1.1s;animation-delay:0s} .gate.logo-hot .gate-motto .serif{text-shadow:0 0 24px var(--coral)} @keyframes markGlitch{0%{transform:scale(1)}15%{transform:translate(-7px,2px) scale(1.08) skewX(8deg)}30%{transform:translate(6px,-2px) scale(1.05) skewX(-6deg)}45%{transform:translate(-3px,0) scale(1.08)}60%,100%{transform:scale(1.07) rotate(-2deg)}} /* the iris anticipates */ .iris::before,.iris::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;border:1px solid var(--coral);opacity:0} .gate.iris-hot .iris::before{animation:irisWave 1.6s cubic-bezier(.2,.8,.3,1) infinite} .gate.iris-hot .iris::after{animation:irisWave 1.6s cubic-bezier(.2,.8,.3,1) .8s infinite} @keyframes irisWave{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}} .gate.iris-hot .iris-core{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.55),rgba(255,255,255,.06) 20%,transparent 36%)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 30px color-mix(in oklab,var(--coral) 60%,transparent),0 0 70px -6px var(--coral)!important; -webkit-backdrop-filter:blur(1.5px) saturate(1.8) brightness(1.25);backdrop-filter:blur(1.5px) saturate(1.8) brightness(1.25);animation:none} .gate.iris-hot .gate-center{transform:scale(1.035)} .gate.iris-hot .gate-mark,.gate.iris-hot .gate-motto{opacity:.55;transition:opacity .6s} .gate.iris-hot .gate-beam{opacity:1;filter:blur(10px)} .gate.iris-hot .iris-label{text-shadow:0 0 12px #000,0 0 4px #000} .gate.iris-hot .iris svg{animation:irisSpin 3s linear infinite} @keyframes irisSpin{to{transform:rotate(270deg)}} .gate.iris-hot .iris-label{top:-30px;transform:translate(-50%,0);width:160px;color:var(--ink)} /* ===================================================================== v24 — the home headline never collides with itself ===================================================================== */ .scene-in.hero{max-width:min(1240px,100%)!important} .hero-title{font-size:clamp(2.8rem,8.4vw,8.6rem)!important;text-wrap:initial;max-width:100%} .hero-title .l{white-space:nowrap} .hero-title .l2{padding-left:clamp(0px,7vw,130px)} .hero-title .l2 .serif{line-height:.95!important} .hero-title .l3{margin-top:.04em} .hero-foot .lead{max-width:40ch} /* the notes live in the empty right side, pointing at the room — never on the text */ .hero .note-a{left:auto!important;right:4%!important;top:14%!important;bottom:auto!important} .hero .note-b{left:auto!important;right:10%!important;top:auto!important;bottom:22%!important} @media (max-width:1180px){.hero .note-a,.hero .note-b{display:none!important}} .hero-foot{flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important;gap:22px!important} .hero .note-b{right:14%!important;bottom:30%!important} @media (max-width:820px){.scene .scene-in.hero::before{inset:-6% -12% -4% -12%!important;background:linear-gradient(90deg,rgba(3,4,6,.9),rgba(3,4,6,.78) 70%,rgba(3,4,6,.35))!important;filter:blur(8px)}}