*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:#060a0b;color:#f5f7f7;font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid #5eeaf2;outline-offset:5px}

/* Portada (escritorio): una sola imagen limpia, sin teléfono ni WhatsApp */
.stage{width:min(100%,1536px);margin:auto;overflow:hidden;background:#070b0d url("assets/portada.jpg") center top/100% auto no-repeat}
.art-top{aspect-ratio:1280/425}
.art-bottom{aspect-ratio:1280/200}
.contact{height:clamp(68px,7.5vw,115px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px}

/* Botón de email */
.email{min-width:270px;display:flex;gap:16px;align-items:center;justify-content:center;padding:12px 24px;text-decoration:none;border:1px solid #268e95;border-radius:50px;background:linear-gradient(110deg,#07313799,#081719);box-shadow:0 0 30px #00bdc010;transition:background .2s,box-shadow .2s,transform .2s}
.email:hover{background:#0c383c;box-shadow:0 0 28px #28d6df25;transform:translateY(-2px)}
.email svg{width:28px;height:24px;stroke:#5eeaf2;stroke-width:1.5}
.email strong{display:block;font-size:14px;margin-bottom:3px}
.email span span{font-size:12px;color:#d9e4e5}
.email .arrow{font-size:21px;margin-left:14px;color:#43d6df}
.alt-mail{font-size:11px;color:#8fa3a7;text-decoration:none;border-bottom:1px solid #8fa3a740;line-height:1.3}
.alt-mail:hover{color:#47d2dc;border-color:#47d2dc}

/* Ordenador: Gmail en pestaña nueva (+ enlace alternativo). Móvil/tablet: app de correo del dispositivo (en Android suele ser Gmail) */
.email-app{display:none}
@media (hover:none),(pointer:coarse),(max-width:650px){.email-gmail,.alt-mail{display:none}.email-app{display:flex}}
@media (min-width:651px) and (max-width:1199px){.alt-mail{display:none}}

.mobile-head,.mobile-services,.mobile-domain{display:none}

/* Pie */
footer{max-width:1160px;padding:24px 30px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #ffffff12;color:#9ba9ad;font-size:11px;letter-spacing:.3px}
footer p{margin:0}
nav{display:flex;gap:24px}
nav a{text-decoration:none}
nav a:hover{color:#47d2dc}

/* Páginas legales y 404 */
.legal{max-width:800px;margin:auto;padding:50px 28px 80px;line-height:1.8;color:#c6d0d3}
.legal .back{color:#48d5df;text-decoration:none;font-size:14px}
.legal h1{font-size:38px;color:#fff;line-height:1.2;margin-top:42px}
.legal h2{color:#eef5f5;font-size:19px;margin-top:32px}
.legal a{color:#5edce4}
.legal dt{color:#fff;font-weight:600;margin-top:12px}
.legal dd{margin-left:0}
.legal .date{font-size:13px;color:#8fa1a5}
.notfound{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:radial-gradient(ellipse at 50% 40%,#0c2b30 0,transparent 55%),#070b0d}
.notfound img{width:min(80vw,320px);height:auto;margin-bottom:36px}
.notfound h1{font-size:clamp(26px,5vw,40px);margin:0 0 12px}
.notfound p{color:#b0bdc0;margin:0 0 32px;line-height:1.6}
.notfound .email{min-width:0}

@media(min-width:1540px){body{padding-top:4vh}}

/* Móvil: composición en HTML */
@media(max-width:650px){
.art-top,.art-bottom{display:none}
.stage{padding:55px 20px 28px;background:radial-gradient(ellipse at 0% 25%,#0c2b30 0,transparent 48%),radial-gradient(ellipse at 100% 65%,#112426 0,transparent 55%),#070b0d}
.mobile-head{display:block;text-align:center}
.logo{margin:0 auto 25px;width:min(100%,340px);font-size:0}
.logo img{display:block;width:100%;height:auto}
.eyebrow{font-size:9px;letter-spacing:2.5px;color:#b0bdc0;margin-bottom:40px}
.claim{font-size:clamp(26px,6.8vw,42px);font-weight:700;line-height:1.13;letter-spacing:-1px;margin:0}
.claim span{color:#34c6d4;display:inline-block;margin-top:8px}
.tagline{font-size:10px;letter-spacing:3px;margin:25px 0 32px;color:#a5b4b7}
.contact{height:auto;margin-bottom:45px;gap:14px}
.email{min-width:280px;padding:16px 24px}
.mobile-services{display:grid;grid-template-columns:repeat(3,1fr);gap:27px 8px;text-align:center}
.mobile-services>span{font-size:29px;color:#36cbd4}
.mobile-services small{display:block;margin-top:8px;font-size:9px;line-height:1.5;color:#d2dcde;font-weight:400;letter-spacing:.3px}
.mobile-domain{display:block;text-align:center;font-size:10px;letter-spacing:3px;color:#99a9ad;margin:40px 0 0}
footer{flex-direction:column;text-align:center;padding:25px 18px;line-height:1.6}
nav{gap:22px}
.legal{padding-top:28px}
.legal h1{font-size:30px}
}