/* Web de DEK Solutions: estilo Constelación (cielo oscuro y enjambre de drones). Fuente: tools/site_estilo.css; build_site.py lo copia a web/sitio/assets/css/site.css. */
*{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit} img,video{display:block;max-width:100%} .wrap{max-width:1240px;margin:auto;padding:0 28px}
:focus-visible{outline:2px solid #8ab0ff;outline-offset:3px}
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease} .media.fade{opacity:0}
.pause{position:absolute;z-index:3;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
 background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.4);cursor:pointer;backdrop-filter:blur(6px)}
.pause::before{content:"";width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.pause.paused::before{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}
.nav{position:absolute;top:0;left:0;right:0;z-index:20} .nav .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:700;letter-spacing:.14em;font-size:14px;text-transform:uppercase;text-decoration:none}
.links{display:flex;gap:28px;font-size:14px} .links a{text-decoration:none;opacity:.85} .links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.right{display:flex;gap:12px;align-items:center} .menu-btn{display:none;background:none;border:1px solid currentColor;color:inherit;border-radius:980px;padding:7px 12px;font:inherit;font-size:13px}
.nav-cta{text-decoration:none;font-size:14px;font-weight:500;padding:9px 18px;border-radius:980px}
footer .wrap{padding-top:28px;padding-bottom:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-size:13px}
footer nav{display:flex;gap:18px;flex-wrap:wrap} footer a{text-decoration:none}
details{border-top:1px solid var(--line);padding:20px 0} details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-size:18px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none} summary::after{content:"+";font-weight:300;font-size:24px;line-height:1} details[open] summary::after{content:"–"}
details p{margin-top:12px;max-width:760px;opacity:.8;line-height:1.65}
@media (max-width:900px){.wrap{padding:0 20px}.links{display:none}.menu-btn{display:inline-block}
 .nav.open{background:rgba(10,10,10,.96);color:#fff}.nav.open .links{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:rgba(10,10,10,.96);padding:6px 20px 18px}
 .nav.open .links a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:17px}.nav .wrap{height:62px}}
:root{--bg:#05060a;--muted:#7f8597;--acc:#7da2ff}
body{background:var(--bg);color:#eef0f6}
#cielo{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
main,footer{position:relative;z-index:1} .nav{position:absolute;z-index:20;color:#fff} .nav-cta{border:1px solid rgba(255,255,255,.5)}
.label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.scene{min-height:100vh;display:flex;align-items:center;padding:110px 0}
.scene .wrap{width:100%}
.txt{max-width:500px}
.cn-hero{align-items:flex-end;padding-bottom:12vh} .cn-hero .txt{max-width:640px} .cn-hero h1{max-width:560px}
.cn-hero h1{font-size:clamp(46px,6.6vw,100px);line-height:.95;letter-spacing:-.045em;font-weight:650;margin-top:16px}
.cn-hero .lead{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:#c9cdd8}
.btn{display:inline-block;padding:14px 24px;font-size:15px;font-weight:500;text-decoration:none;border-radius:980px;margin:26px 10px 0 0}
.btn.solid{background:#fff;color:#05060a} .btn.line{border:1px solid rgba(255,255,255,.55)}
.cn-st .txt{max-width:820px;margin:auto;text-align:center} .cn-st p{font-size:clamp(26px,3.2vw,46px);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.cn-st em{font-style:normal;color:var(--muted)}
.sol .n{font-size:13px;letter-spacing:.24em;color:var(--acc)}
.sol h2{font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.04em;font-weight:650;margin:12px 0 16px}
.sol p{color:#c9cdd8;font-size:18px} .sol ul{list-style:none;margin-top:18px}
.sol li{padding:10px 0;border-top:1px solid rgba(255,255,255,.1);color:#aab0c0;font-size:15px}
.sol a{display:inline-block;margin-top:16px;font-size:14px;text-decoration:none;border-bottom:1px solid #fff}
.call .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vcard{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#111 center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 90px rgba(80,120,255,.18)}
.call h2,.cn-method h2{font-size:clamp(36px,4.4vw,66px);line-height:1;letter-spacing:-.04em;font-weight:650;margin:12px 0 16px} .call p{color:#c9cdd8;font-size:18px}
.cn-method .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.cn-method .grid div{border-top:1px solid rgba(255,255,255,.18);padding-top:18px} .cn-method h3{font-size:20px;margin-bottom:6px} .cn-method p{color:#aab0c0;font-size:15.5px}
.cn-end{justify-content:center;text-align:center;align-items:flex-start;padding-top:64vh}
.cn-end a.mail{color:#fff;font-size:20px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
footer{color:var(--muted);border-top:1px solid rgba(255,255,255,.08);background:rgba(5,6,10,.8)}
.scr{font-variant-ligatures:none}
.sonido{position:fixed;right:22px;bottom:22px;z-index:10;display:flex;align-items:center;gap:10px;background:rgba(5,6,10,.72);border:1px solid rgba(255,255,255,.3);
 color:#fff;border-radius:980px;padding:10px 16px;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(6px)}
.sonido i{display:flex;gap:2px;align-items:flex-end;height:12px} .sonido i b{width:2px;height:4px;background:#fff;border-radius:1px}
.sonido[aria-pressed=true] i b{animation:eq .9s ease-in-out infinite} .sonido i b:nth-child(2){animation-delay:.2s} .sonido i b:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:12px}}
@media (max-width:900px){.call .wrap,.cn-method .grid{grid-template-columns:1fr}.scene{padding:90px 0}
 .sol .txt{background:rgba(5,6,10,.72);backdrop-filter:blur(4px);padding:18px;border-radius:16px;margin-top:38vh}}
.nav .links a[aria-current=page]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.ph{align-items:flex-end;padding-bottom:12vh} .ph .txt{max-width:640px}
.ph h1{font-size:clamp(46px,6.4vw,96px);line-height:.95;letter-spacing:-.045em;font-weight:650;margin-top:16px}
.ph .lead{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:#c9cdd8}
.ph a.mail{display:inline-block;margin-top:20px;color:#fff;font-size:20px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.foto{margin-top:24px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 70px rgba(80,120,255,.16)}
.foto img{width:100%;height:100%;object-fit:cover}
.glass{background:rgba(10,12,22,.62);border:1px solid rgba(255,255,255,.09);border-radius:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.caso .txt{max-width:560px} .caso h2{font-size:clamp(28px,3vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:650;margin:12px 0 4px}
.trio3{display:grid;gap:12px;margin-top:22px} .trio3 div{padding:16px 18px} .trio3 b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.trio3 p{color:#d3d7e2;font-size:15.5px} .chip{display:inline-block;margin-top:18px;font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.15);padding:5px 10px;border-radius:980px}
.paso .txt{max-width:520px} .paso .n{font-size:13px;letter-spacing:.24em;color:var(--acc)} .paso h2{font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.045em;font-weight:650;margin:12px 0 14px}
.paso p{font-size:19px;color:#c9cdd8}
.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .princ div{padding:22px} .princ h3{font-size:19px;margin-bottom:6px} .princ p{color:#c2c7d3;font-size:15px}
.faqp{max-width:820px;padding:10px 30px;margin-top:30px;--line:rgba(255,255,255,.12)} .faqp details p{color:#c9cdd8}
.mform{display:grid;gap:20px;max-width:560px;padding:34px} .mform .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mform label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#aab0c0;margin-bottom:8px}
.mform input[type=text],.mform input[type=email],.mform textarea{width:100%;font:inherit;font-size:17px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:8px 0 10px;border-radius:0}
.mform textarea{min-height:110px;resize:vertical} .mform input:focus,.mform textarea:focus{outline:none;border-bottom-color:#fff}
.mform .ok{font-size:14px;color:#c9cdd8;text-transform:none;letter-spacing:0} .mform .ok input{margin-right:8px;accent-color:#fff}
.mform button{justify-self:start;font:inherit;font-size:15px;font-weight:500;background:#fff;color:#05060a;border:0;padding:14px 28px;border-radius:980px;cursor:pointer}
.mform .status{color:#fff} .mform .alt{font-size:14px;color:#aab0c0}
.form-h{font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;font-weight:650;margin:10px 0 4px}
.info{display:flex;flex-wrap:wrap;gap:24px 56px;margin-top:34px} .info dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .info dd{margin-top:6px}
.cierre{justify-content:center;text-align:center;align-items:flex-start;padding-top:60vh} .cierre h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em;font-weight:500;line-height:1.2;color:#c9cdd8}
/* Principios y FAQ */
.tranquila{position:relative;padding:40px 0 120px}
@media (max-width:900px){.princ,.mform .two{grid-template-columns:1fr}
 .caso .txt,.paso .txt{background:rgba(5,6,10,.72);backdrop-filter:blur(4px);padding:18px;border-radius:16px;margin-top:38vh}}
/* Casos de uso: los drones forman el marco (nube y marco) y la foto se enciende dentro */
.c1{min-height:118vh;display:flex;align-items:center;padding:12vh 0}
.c1 .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;align-items:center} .c1.izq .mf{order:-1}
.c1 h2{font-size:clamp(28px,3vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:650;margin:12px 0 4px}
.mf{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.mf img{width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(46% 46% 46% 46%);transform:scale(1.14);filter:saturate(0) brightness(1.7);
 transition:clip-path .5s ease,opacity .4s ease,transform .5s ease,filter .5s ease}
.mf.on img{opacity:1;clip-path:inset(0);transform:none;filter:none;transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1) var(--rd,.55s),opacity .5s ease var(--rd,.55s),transform 1.8s ease var(--rd,.55s),filter 1.6s ease calc(var(--rd,.55s) + .35s)} body[data-transicion=nube]{--rd:2.1s}
.mf::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(125,162,255,.35);opacity:0;transition:opacity 1s .6s} .mf.on::after{opacity:1}
@media (prefers-reduced-motion:reduce){.mf img{opacity:1;clip-path:none;transform:none;filter:none;transition:none}}
@media (max-width:900px){
 .c1 .wrap{grid-template-columns:1fr;gap:26px} .c1.izq .mf{order:0} .c1 .txt{background:rgba(5,6,10,.72);padding:16px;border-radius:14px;margin-top:0}
}
.indice{position:relative;z-index:1;margin-top:-6vh} .indice .wrap{display:flex;flex-wrap:wrap;gap:10px}
.indice a{display:flex;gap:8px;align-items:center;text-decoration:none;font-size:14px;color:#dfe3ee;border:1px solid rgba(255,255,255,.14);
 background:rgba(10,12,22,.55);padding:9px 14px;border-radius:980px;backdrop-filter:blur(6px)} .indice a:hover{border-color:#7da2ff}
/* Sonido de los drones y música de fondo (los dos, apagados hasta que se pulsan) */
.musica{position:fixed;right:178px;bottom:22px;z-index:10;display:flex;align-items:center;gap:8px;background:rgba(5,6,10,.72);border:1px solid rgba(255,255,255,.3);
 color:#fff;border-radius:980px;padding:10px 16px;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(6px)} .musica[aria-pressed=true]{border-color:#7da2ff}
.musica i{font-style:normal;font-size:14px}
@media (max-width:900px){.musica{right:66px;bottom:12px;width:46px;height:46px;padding:0;justify-content:center} .musica span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Cómo trabajamos: el vídeo del programador, en penumbra detrás de «Hablemos» */
.fondo-v{position:fixed;inset:0;z-index:-1;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.fondo-v.on{opacity:.55} .fondo-v .vcard{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.fondo-v::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(5,6,10,.2),rgba(5,6,10,.9))}
/* Vídeos sin botón de pausa a la vista: un clic en el vídeo lo pausa; el botón aparece con el teclado (WCAG 2.2.2) */
.vcard .pause{opacity:0;pointer-events:none} .vcard .pause:focus-visible{opacity:1} .vcard{cursor:pointer}
@media (max-width:900px){ .indice{margin-top:0}
 .sonido{right:12px;bottom:12px;width:46px;height:46px;padding:0;justify-content:center} .sonido span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Web publicada: idioma, salto al contenido, páginas legales, formulario real y 404 */
.skip{position:absolute;left:-9999px;top:8px;z-index:40;background:#fff;color:#05060a;padding:10px 16px;border-radius:980px;text-decoration:none} .skip:focus{left:12px}
.lang{display:flex;gap:2px;font-size:12.5px} .lang a{text-decoration:none;padding:5px 8px;border-radius:980px;opacity:.7} .lang a:hover{opacity:1}
.lang a[aria-current=true]{opacity:1;border:1px solid rgba(255,255,255,.4)} .links .lang{display:none}
.ph.corta{min-height:64vh}
.legal{position:relative;padding:10px 0 120px} .legal .wrap>*{max-width:820px} .legal .updated{color:var(--muted);font-size:14px}
.legal h2{font-size:clamp(20px,2vw,24px);letter-spacing:-.01em;font-weight:600;margin:40px 0 10px} .legal p,.legal li{color:#c9cdd8;margin-top:10px} .legal ul{padding-left:20px}
.legal a{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mform .err{font-size:14px;color:#ffc2c2} .mform .err a,.mform .alt a,.mform .ok a{color:#fff} .mform button:disabled{opacity:.6;cursor:default}
.mform.sent .two,.mform.sent textarea,.mform.sent .ok,.mform.sent button,.mform.sent label{display:none}
.notfound{text-align:left}
@media (max-width:900px){.right .lang{display:none} .nav.open .links .lang{display:flex;gap:6px;padding-top:14px;border:0} .nav.open .links .lang a{border-bottom:0;padding:6px 10px;font-size:15px}
 .nav-cta{padding:8px 14px;font-size:13px}}
/* El pie queda por encima de los botones fijos de sonido y música, para que sus enlaces no queden tapados */
footer .wrap{padding-bottom:92px}
@media (max-width:900px){footer .wrap{padding-bottom:84px}}
/* Móvil: el texto del final, más abajo que el «Hablemos.» de los drones también cuando el pie empuja la página */
@media (max-width:900px){.cn-end{padding-top:52vh}.cierre{padding-top:50vh}}
/* Newsletter: solo el correo y un botón; tres sitios posibles (pie, cierre «Hablemos» o escena propia en la portada) */
.nlform{display:grid;gap:12px;max-width:520px;text-align:left}
.nlform .label{margin-bottom:2px} .nl-h{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff} .nl-p{color:#aab0c0;font-size:15px}
.nl-campo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nl-campo input{flex:1 1 220px;font:inherit;font-size:16px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:10px 0;border-radius:0}
.nl-campo input:focus{outline:none;border-bottom-color:#fff}
.nl-campo button{font:inherit;font-size:14px;font-weight:500;background:#fff;color:#05060a;border:0;padding:11px 22px;border-radius:980px;cursor:pointer}
.nl-campo button:disabled{opacity:.6;cursor:default}
.nl-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nlform .status{color:#fff;font-size:14px} .nlform .err{font-size:14px;color:#ffc2c2} .nlform .err a{color:#fff} .nlform.sent .nl-campo{display:none}
footer .nl-pie{padding-top:44px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.nlform.pie{grid-template-columns:1fr 1.1fr;align-items:end;max-width:none;gap:14px 40px} .nlform.pie .nl-txt{grid-row:span 3}
.nlform.cierre{margin:40px auto 0;max-width:520px;text-align:center;gap:8px;padding:18px 24px 20px;background:rgba(5,6,10,.6);border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .nlform.cierre .nl-p{display:none} .nlform.cierre .nl-h{font-size:16px;font-weight:500;color:#c9cdd8}
.nlform.cierre .nl-campo{justify-content:center} .cierre,.cn-end{padding-bottom:40px}
.nlform.escena{padding:32px;background:rgba(10,12,22,.62);border:1px solid rgba(255,255,255,.09);border-radius:20px;backdrop-filter:blur(10px)}
.nlform.escena .nl-h{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;line-height:1.1}
@media (max-width:900px){.nlform.pie{grid-template-columns:1fr}.nlform.pie .nl-txt{grid-row:auto}.nl-escena .txt{margin-top:38vh}}