/* Efectos de toda la pagina: cursor propio, botones magneticos, mascaras entre secciones. */
html.pg-cur,html.pg-cur a,html.pg-cur button,html.pg-cur .hd-card{cursor:none}
.pg-cursor{position:fixed;left:0;top:0;z-index:99990;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1.5px solid rgba(163,239,244,.85);background:rgba(163,239,244,.06);pointer-events:none;opacity:0;transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1),margin .25s cubic-bezier(.2,.8,.2,1),background .25s,opacity .3s;mix-blend-mode:normal;will-change:transform;display:grid;place-items:center;font:600 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.08em;color:#0A0B10;text-transform:uppercase}
.pg-cursor.on{opacity:1}
.pg-cursor.link{width:34px;height:34px;margin:-17px 0 0 -17px;background:rgba(163,239,244,.14)}
.pg-cursor.demo{width:56px;height:56px;margin:-28px 0 0 -28px;background:#A3EFF4}
.pg-cursor.down{width:12px;height:12px;margin:-6px 0 0 -6px}
.pg-mag{will-change:transform}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.pg-cursor{display:none}html.pg-cur,html.pg-cur a,html.pg-cur button{cursor:auto}}

/* Menú: pantalla completa oscura, enlaces grandes con entrada escalonada, sin parpadeo */
.menu-bg{background:rgba(5,8,14,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-p{width:100%;background:radial-gradient(ellipse 70% 60% at 80% 100%,rgba(34,211,238,.14),transparent 70%),#060A12;color:#fff;box-shadow:none;padding:16px clamp(20px,6vw,72px) 32px;transform:translateY(-3%);opacity:0;transition:transform .6s var(--ease),opacity .45s}
.menu.open .menu-p{transform:none;opacity:1}
.menu-h{min-height:64px}
.menu-h img{height:30px}
.xbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.xbtn:hover{background:rgba(255,255,255,.18)}
.menu-n{margin:clamp(24px,6vh,64px) 0;max-width:900px}
.menu-n a{font-size:clamp(34px,6vw,76px);padding:clamp(12px,2vh,22px) 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;transform:translateY(40px)}
.menu-n a:first-child{border-top:1px solid rgba(255,255,255,.12)}
.menu-n a i{font-size:.4em;color:#67e8f9}
.menu-n a:hover{color:#67e8f9}
.menu-b{align-self:flex-start;margin-top:auto}
html:has(body.noscroll){scrollbar-gutter:stable}

/* El estudio: imagen DENTRO de su caja (no a sangre), redondeada, sin hueco vacío arriba (Carla tg 61183) */
.estudio{padding-top:clamp(8px,2vw,28px)}
.est-ed .est-fig{margin:0!important;width:100%!important;max-width:100%!important;left:auto!important;right:auto!important;transform:none;border-radius:clamp(18px,2.2vw,32px)!important;overflow:hidden}
.est-ed .est-fig img{position:relative;top:-7%;width:100%;height:114%;object-fit:cover}

/* Qué creamos: 4 tarjetas iguales, misma altura, botón abajo, número dentro de la tarjeta (Carla tg 61170) */
.qc-g .qm-list{align-items:stretch}
.qc-g .qm{display:flex;flex-direction:column}
.qc-g .qm::before{display:none}
.qc-g .qm .pg-t{flex:1;display:flex;flex-direction:column}
.qc-g .qm .pg-t::after{content:"0" counter(q);position:absolute;top:18px;right:20px;font-size:13px;letter-spacing:.18em;font-weight:700;color:#67e8f9}
.qc-g .qm .pg-more{margin-top:auto;align-self:flex-start}
.qc-g .qm .pg-t>p{margin-bottom:14px}
.qc-g .qm h3{padding-right:36px}
.est-ed .est-h{padding-left:clamp(22px,3.4vw,56px)!important;padding-right:clamp(22px,3.4vw,56px)!important;box-sizing:border-box}
/* entrada: respaldo de agua visible desde el primer fotograma; el canvas WebGL funde encima al arrancar (si no arranca, queda el respaldo) */
.hl .dn-fall{opacity:1!important;z-index:0;background:linear-gradient(180deg,rgba(10,11,16,.0),rgba(10,11,16,0)),#0A0B10 url(entrada-agua.webp) center/cover no-repeat}
.hl .dn-gl{z-index:1;opacity:0;animation:pgGlIn 1.2s ease .5s forwards}
@keyframes pgGlIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hl .dn-gl{animation:none;opacity:1}}
.pg-cursor.off{opacity:0!important}

/* cursor con texto: «Ver demo» / «Arrastrar» (12 px minimo) */
.pg-cursor.demo{width:92px;height:92px;margin:-46px 0 0 -46px;display:flex;align-items:center;justify-content:center;font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;color:#0A0B10;text-align:center}

/* ayudante A: grano 3 % sobre degradados oscuros (sin bandas) y tono petroleo en contacto y cajas de demo */
html body .contacto::before{display:none!important}
html body #contacto{background:radial-gradient(ellipse 55% 60% at 50% 22%,rgba(34,211,238,.2),rgba(34,211,238,0) 70%),linear-gradient(#06090d,#04060a)!important;background-image:radial-gradient(ellipse 55% 60% at 50% 22%,rgba(34,211,238,.2),rgba(34,211,238,0) 70%),linear-gradient(#06090d,#04060a)!important}
.pgd-stage{position:relative}
.pgd-stage::after,.gal-tr::after,.cz::after,#contacto::after,.foot.pie2::after,#hd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.035;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px}
.pgd-stage::before{background-image:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(34,211,238,.14),transparent 70%)}