:root{color-scheme:dark;--bg:#05080b;--blue:#008cff;--gold:#d5a200;--panel:#0b1117;--text:#f5f7fa}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}.page-shell{min-height:100vh;background:radial-gradient(circle at 50% 0,#151b22 0,#05080b 58%,#020305 100%)}
.mobile-nav{display:none;position:sticky;top:0;z-index:40;background:rgba(2,4,7,.96);border-bottom:1px solid #25313d;padding:.55rem .7rem;backdrop-filter:blur(8px)}
.mobile-nav .brand{font-weight:700;letter-spacing:.08em;color:#fff}.mobile-nav button{float:right;background:#0d2233;color:#fff;border:1px solid #1587de;border-radius:7px;padding:.38rem .65rem}.mobile-links{display:none;clear:both;padding:.7rem 0 .2rem;grid-template-columns:1fr 1fr;gap:.4rem}.mobile-links.open{display:grid}.mobile-links a{color:#dbeaff;text-decoration:none;background:#0a1118;border:1px solid #26394a;padding:.7rem;border-radius:6px}
.master-stage{position:relative;width:min(100vw,1536px);margin:0 auto;line-height:0}.master-stage img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}.hotspot{position:absolute;display:block;z-index:20;border-radius:5px;line-height:normal;text-indent:-9999px;overflow:hidden;outline:none}.hotspot:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue);background:rgba(0,140,255,.12)}
.accessible-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-footer{max-width:1536px;margin:0 auto;padding:18px 20px 28px;color:#9fb0bf;font-size:13px;line-height:1.5;border-top:1px solid #18232c;background:#04070a}.site-footer a{color:#54aef8}.legal{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
@media(max-width:700px){.mobile-nav{display:block}.master-stage{width:100%;overflow:hidden}.master-stage img{width:100%;height:auto}.hotspot.nav-hotspot{display:none}.site-footer{font-size:12px;padding:14px}.mobile-note{display:block}.master-stage{margin-top:0}}
@media(min-width:701px){.mobile-note{display:none}}

/* Functional contact form layered over the approved 1:1 contact master */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-form-overlay{position:absolute;inset:0;z-index:25;line-height:normal;pointer-events:none}
.contact-field,.contact-submit{position:absolute;pointer-events:auto;font-family:Arial,Helvetica,sans-serif;color:#f5f7fa;background:rgba(4,10,15,.97);border:1px solid #008cff;border-radius:7px;outline:none;box-shadow:inset 0 0 14px rgba(0,140,255,.06)}
.contact-field{padding:0 1.0vw;font-size:clamp(11px,1.05vw,17px)}
.contact-field::placeholder{color:#e6edf3;opacity:1}
.contact-field:focus{border-color:#73c9ff;box-shadow:0 0 0 2px rgba(0,140,255,.22),inset 0 0 14px rgba(0,140,255,.10)}
.field-name{left:3.70%;top:52.15%;width:19.15%;height:4.75%}.field-company{left:24.05%;top:52.15%;width:19.55%;height:4.75%}.field-email{left:3.70%;top:58.00%;width:19.15%;height:4.75%}.field-location{left:24.05%;top:58.00%;width:19.55%;height:4.75%}.field-message{left:3.70%;top:63.80%;width:39.90%;height:9.30%;padding-top:.9vw;resize:none}.contact-submit{left:12.15%;top:74.85%;width:22.50%;height:5.75%;font-size:clamp(12px,1.25vw,20px);cursor:pointer;background:linear-gradient(180deg,#145fda,#082a76);letter-spacing:.03em}.contact-submit:hover{filter:brightness(1.12)}
@media(max-width:700px){.contact-form-overlay{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:10px;padding:18px 14px 22px;background:#070b0f;border-top:1px solid #1a3040}.contact-field,.contact-submit{position:static;width:100%;height:auto;min-height:48px;font-size:16px;padding:12px 14px}.field-message{min-height:130px;padding-top:12px}.contact-submit{min-height:52px}}

/* Corrected official website domain over the approved contact master */
.domain-correction{position:absolute;z-index:24;left:77.2%;top:89.4%;width:19.0%;height:5.0%;display:flex;align-items:center;justify-content:center;line-height:1;color:#179fff;font-weight:700;font-size:clamp(12px,1.35vw,22px);background:linear-gradient(180deg,rgba(13,36,92,.98),rgba(4,15,35,.99));border-radius:5px;letter-spacing:.01em;text-shadow:0 0 9px rgba(0,140,255,.45);pointer-events:none}
@media(max-width:700px){.domain-correction{font-size:clamp(8px,2.2vw,13px)}}


/* Visual correction for official email domain on approved contact master */
.email-correction{position:absolute;z-index:24;left:51.55%;top:67.15%;width:22.8%;height:8.8%;padding:.45% .25%;display:flex;flex-direction:column;justify-content:center;gap:.12vw;color:#f3f6f8;background:linear-gradient(90deg,rgba(4,9,13,.995),rgba(5,11,16,.995));font-family:Arial,Helvetica,sans-serif;font-size:clamp(10px,1.05vw,16px);line-height:1.25;pointer-events:none}
.email-correction span{display:block;white-space:nowrap}
@media(max-width:700px){.email-correction{font-size:clamp(7px,1.9vw,11px)}}

/* HOME HOTSPOTS - CSP SAFE */

.home-stage a[aria-label="Inicio"]{left:23%;top:.6%;width:8%;height:7.5%}
.home-stage a[aria-label="Soluciones"]{left:31%;top:.6%;width:10.5%;height:7.5%}
.home-stage a[aria-label="Servicios"]{left:42%;top:.6%;width:9.5%;height:7.5%}
.home-stage a[aria-label="Industrias"]{left:51.5%;top:.6%;width:10.5%;height:7.5%}
.home-stage a[aria-label="Proyectos"]{left:62%;top:.6%;width:10.5%;height:7.5%}
.home-stage a[aria-label="Compañía"]{left:72.5%;top:.6%;width:10.5%;height:7.5%}
.home-stage a[aria-label="Contacto"]{left:83%;top:.6%;width:10.5%;height:7.5%}
.home-stage a[aria-label="Descubre nuestras soluciones"]{left:22%;top:69.5%;width:28%;height:9%}
.home-stage a[aria-label="Ver nuestros proyectos"]{left:51%;top:69.5%;width:26%;height:9%}
.home-stage a[aria-label="English"]{left:95.2%;top:.6%;width:3.4%;height:7.5%}

/* ============================================================
   MSGROUP — DESKTOP FULL-PAGE FIT
   Prepared from the 2026-08-25 public_html backup.
   Goal: keep each 1536x1024 master page fully visible on a PC
   while preserving image proportions and percentage hotspots.
   Mobile/tablet behavior remains unchanged.
   ============================================================ */

@media (min-width: 701px) {
  
  :root {
    --desktop-footer-reserve: 260px;
    --master-aspect-ratio: 1.5;
    --desktop-stage-width: 70vw;
  }

  .master-stage {
    width: var(--desktop-stage-width);
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
  }

  .master-stage img {
    width: 100%;
    height: auto;
    display: block;
  }


  }

  .page-shell {
    min-height: 100vh;
  }

  
    


  /*
    Hotspots remain percentage-positioned inside .master-stage,
    so they scale together with the approved master image.
  */

  .site-footer {
    width: var(--desktop-stage-width);
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
  }
/* Prevent unintended horizontal overflow */
html,
body {
    overflow-x: hidden;
}
/* ===== AJUSTE FORMULARIO CONTACTO DESKTOP ===== */

/* ===== AJUSTE FORMULARIO CONTACTO DESKTOP ===== */

@media (min-width: 701px) {

    .contact-form-overlay {
        transform: translateY(35px);
    }

    .field-name,
    .field-company,
    .field-email,
    .field-location {
        height: 4.2%;
    }

    .field-message {
        height: 8.2%;
    }

    .contact-submit {
        height: 5%;
    }
}
/* ===== AJUSTE CONSENTIMIENTO FORMULARIO CONTACTO ===== */
@media (min-width: 701px) {

  .contact-consent,
  .privacy-consent,
  .form-consent {
    position: absolute !important;
    left: 3.7% !important;
    top: 72.2% !important;
    width: 39.9% !important;
    height: 2.8% !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    z-index: 30 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #f5f7fa !important;
    line-height: 1.2 !important;
  }

  .contact-consent input,
  .privacy-consent input,
  .form-consent input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .contact-consent a,
  .privacy-consent a,
  .form-consent a {
    color: #54aef8 !important;
  }
}
/* ===== AJUSTE FINAL FORMULARIO CONTACTO DESKTOP ===== */
@media (min-width: 701px) {

    .contact-form-overlay {
        transform: translateY(55px) !important;
    }

}