/* Direccion nueva 2 «Agua real»: tinta + blanco frio + UN acento (cian hielo). Portada de entrada, agua WebGL, bucles suaves. */
:root{--dn-ink:#0A0B10;--dn-paper:#F4F8FA;--dn-cian:#A3EFF4;--rd-r:clamp(22px,3vw,44px)}
html,body{background:var(--dn-ink)}
.qhs,.prod,.estudio,.how,.faq,.contacto,.foot{margin-left:0;margin-right:0;margin-bottom:0;border-radius:var(--rd-r) var(--rd-r) 0 0;box-shadow:none;position:relative;z-index:1}
.prod,.estudio,.faq,.contacto,.foot{margin-top:calc(-1*var(--rd-r))}
.qhs{margin-top:0}
.qhs::before,.prod::before,.estudio::before,.faq::before,.contacto::before{content:"";display:block;height:var(--rd-r)}
.foot{padding-top:calc(var(--rd-r) + clamp(44px,6vw,70px));background:var(--dn-ink);padding-bottom:clamp(70px,9vw,110px)}
.foot-big{display:none}
.foot .wrap{position:relative}
/* portada de entrada: pantalla completa fija encima de la web */
.hl{position:fixed;inset:0;z-index:300;height:100vh;height:100svh;display:grid;place-items:center;background:var(--dn-ink);color:#fff;overflow:hidden;padding:0 var(--pad);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.dn-in .hl{display:none}
html.dn-gate,html.dn-gate body{overflow:hidden}
html.dn-gate .top{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){html.dn-gate .hl-h,html.dn-gate .hl-btn,html.dn-gate .hl-hint{opacity:0}}
.faq details summary::before{color:#0B6B74}
.top{transition:opacity .8s var(--ease),background .3s}
.dn-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.dn-fall{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 70% at 50% 110%,rgba(163,239,244,.28),rgba(10,11,16,0) 70%),linear-gradient(180deg,#0A0B10,#071a20)}
.dn-gl+.dn-fall{opacity:0}.dn-nogl .dn-fall{opacity:1}
.hl-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,3.6vh,34px);width:100%;pointer-events:none}
.hl-in>*{pointer-events:auto}
.hl-logo{display:block;width:min(70vw,820px);height:auto;overflow:visible;pointer-events:none}
.hl-h{margin:0;font-weight:500;letter-spacing:-.005em;font-size:clamp(16px,1.5vw,20px);line-height:1.35;color:rgba(255,255,255,.74)}
.hl-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border:0;border-radius:999px;background:#fff;color:var(--dn-ink);font:600 15px Manrope,system-ui,sans-serif;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hl-btn span{display:inline-block;transition:transform .35s var(--ease)}
.hl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(163,239,244,.7)}.hl-btn:hover span{transform:translateX(4px)}
.hl-btn:focus-visible{outline:3px solid var(--dn-cian);outline-offset:3px}
.hl-hint{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.top,.top.hl-t{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border:0!important;color:#fff}
.top.dn-s{background:rgba(10,11,16,.92)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
.top nav a,.top .nav a{color:#fff}.top nav a:hover,.top .nav a:hover{color:var(--dn-cian)}
.top .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}.top .burger:hover{background:rgba(255,255,255,.16)}.top .burger i{background:#fff}
.top .btn.pri{background:#fff;color:var(--dn-ink);border-color:#fff}
@media (max-width:760px){.hl-logo{width:84vw}.hl-btn{padding:13px 26px}}
/* primera hoja: deja sitio a la barra */
.qhs{padding-top:clamp(64px,9vh,96px)}
/* imagenes frias: sin giro de tono (las portadas ya vienen sin lila) */
.qc-fig img,.est-fig img{filter:none}
main h2:not(.kick),.sec-h h2,.est-h,.how-copy h2,.prod-head h2{font-size:clamp(28px,3.5vw,52px)!important;line-height:1.08!important;letter-spacing:-.02em}
.gal-nm{font-size:clamp(24px,2.5vw,36px)!important;line-height:1.1}
.qc-intro,.est-p,.sec-h p:not(.kick){font-size:clamp(16px,1.2vw,18px)!important;line-height:1.55!important}
.est-b p{font-size:clamp(17px,1.4vw,20px)!important;line-height:1.5!important}
/* vida: respuesta al cursor y al toque en tarjetas y botones */
.qm,.est-b{position:relative;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.qm::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(43,181,196,.16),transparent 70%)}
.qm:hover::after{opacity:1}
.qm:hover,.est-b:hover{transform:translateY(-4px);box-shadow:0 22px 50px -26px rgba(10,11,16,.35)}
.btn,.btn.pri{transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn.pri:hover{box-shadow:0 14px 34px -12px rgba(43,181,196,.8)}
.dn-wave{display:block;width:100%;height:56px;margin:0 0 18px;overflow:hidden}
.dn-wave svg{width:200%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
 .hl-hint{animation:dn-br 3.4s ease-in-out 3s infinite}
 .hl-btn{animation:dn-bt 3.8s ease-in-out 3s infinite}
 .qh-i{animation:dn-fl 5s ease-in-out infinite}.qm:nth-child(2) .qh-i{animation-delay:-1.2s}.qm:nth-child(3) .qh-i{animation-delay:-2.4s}.qm:nth-child(4) .qh-i{animation-delay:-3.6s}
 .qc-fig img,.est-fig img{animation:dn-fl2 9s ease-in-out infinite}
 .kick::before{animation:dn-pl 3.2s ease-in-out infinite}
 .dn-wave svg{animation:dn-sl 14s linear infinite}
 .contacto{background-image:radial-gradient(500px 300px at 15% 20%,rgba(163,239,244,.35),transparent 70%),radial-gradient(420px 280px at 85% 80%,rgba(163,239,244,.25),transparent 70%);background-repeat:no-repeat;animation:dn-dr 18s ease-in-out infinite alternate}
}
@keyframes dn-br{50%{opacity:.25}}
@keyframes dn-bt{50%{box-shadow:0 0 0 10px rgba(163,239,244,.12),0 14px 40px -12px rgba(163,239,244,.6)}}
@keyframes dn-fl{50%{transform:translateY(-4px)}}
@keyframes dn-fl2{50%{transform:translateY(-8px) scale(1.012)}}
@keyframes dn-pl{50%{transform:scale(1.5);opacity:.6}}
@keyframes dn-sl{to{transform:translateX(-50%)}}
@keyframes dn-dr{to{background-position:6% 8%,92% 90%}}
/* logo: la pieza logo-intro pinta su svg dentro de #dnLogo */
.hl-logo .wli{width:100%}
/* galeria: cinta infinita ligada al scroll (galeria.js). Tilt con brillo cian y huecos tocables dentro de la demo. */
.gal-tr{display:grid;overflow:hidden;scroll-snap-type:none;padding:8px 0;touch-action:pan-y;user-select:none}
.gal-s{grid-area:1/1;justify-self:center;scroll-snap-align:none;transform:none;opacity:1;transition:none;will-change:transform,opacity}
.gal-s figure{position:relative;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.gal-s figure::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(163,239,244,.2),transparent 60%)}
.gal-s figure.tilt::after{opacity:1}
.gal-s figure.tilt{transition:transform .08s linear}
.gal-s figure{container-type:inline-size}
.gh-l{position:absolute;inset:0;z-index:2}
.gal-s:not(.on) .gh-l,.gal-s:not(.on) .gh-hint{pointer-events:none;visibility:hidden}
.gh{position:absolute;margin:0;padding:0;border:0;border-radius:0;background:#fff!important;background-image:none!important;min-height:0;cursor:pointer;font:600 1.15cqw Manrope,system-ui,sans-serif;color:#0A0B10;text-align:left}
.gh::before,.gh::after{content:none!important}
.gh:focus-visible{outline:2px solid #A3EFF4;outline-offset:1px}
.gh-t i{position:absolute;left:1%;top:50%;width:1.7cqw;height:1.7cqw;margin-top:-.85cqw;border-radius:.4cqw;border:1.5px solid rgba(10,11,16,.35);background:#fff;transition:background .2s,border-color .2s}
.gh-t.ok i{background:#A3EFF4;border-color:#0A0B10}
.gh-t.ok i::after{content:"";position:absolute;left:32%;top:10%;width:30%;height:55%;border:solid #0A0B10;border-width:0 2px 2px 0;transform:rotate(45deg)}
.gh-t span{position:absolute;left:9%;right:0;top:0;bottom:0;display:flex;align-items:center;transition:opacity .2s}
.gh-t.ok span{opacity:.5;text-decoration:line-through}
.gh-t:hover i{border-color:#0A0B10}
.gh-h{border-radius:.5cqw!important;display:grid;place-items:center;font-size:1.05cqw;font-weight:500;color:#8A94A0;box-shadow:inset 0 0 0 1px rgba(10,11,16,.08);transition:background .2s,box-shadow .2s}
.gh-h:hover{box-shadow:inset 0 0 0 1.5px #A3EFF4;color:#0A0B10}
.gh-h[aria-pressed=true]{background:#A3EFF4!important;color:#0A0B10;font-weight:700}
.gh-hint{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:99px;background:rgba(10,11,16,.82);color:#A3EFF4;font:600 12px Manrope,system-ui,sans-serif;pointer-events:none;white-space:nowrap;z-index:3;box-shadow:0 0 0 1px rgba(163,239,244,.3)}
.gal-tr.drag{cursor:grabbing}
@media(prefers-reduced-motion:reduce){.gal-s figure{transition:none;transform:none}.gal-s figure::after{display:none}}
/* El estudio: la imagen es agua oscura, el titular va en claro */
.est-ed .est-h h2{color:#fff}
.est-ed .est-h .kick{color:#A3EFF4}
/* móvil: que las dos imágenes tengan altura para leerse */
@media(max-width:600px){.qc-fig{aspect-ratio:4/3!important;max-height:none!important}.qc-fig img{object-position:50% 50%}}
@media(max-width:900px){.est-ed .est-fig{aspect-ratio:4/5!important;max-height:none!important}.est-fig img{object-position:50% 50%!important}}