*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{margin:0;background:#fff;font-family:Arial,Helvetica,sans-serif}
.site{position:relative;width:100%;max-width:1536px;margin:0 auto;overflow:hidden;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.08)}
.reference{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;display:block;z-index:5;border-radius:6px;outline:none}
.hotspot:focus-visible{outline:3px solid #85bd2e;outline-offset:2px;background:rgba(133,189,46,.08)}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
/* Top navigation coordinates, based on the approved 1536×1024 reference */
.nav-inicio{left:31.4%;top:2.8%;width:4.3%;height:4.2%}
.nav-nosotros{left:36.1%;top:2.8%;width:7.1%;height:4.2%}
.nav-servicios{left:44.5%;top:2.8%;width:5.5%;height:4.2%}
.nav-grupo{left:51.0%;top:2.8%;width:9.6%;height:4.2%}
.nav-casos{left:61.5%;top:2.8%;width:7.4%;height:4.2%}
.nav-proyectos{left:69.8%;top:2.8%;width:6.0%;height:4.2%}
.nav-valores{left:76.0%;top:2.8%;width:5.7%;height:4.2%}
.nav-contacto{left:81.3%;top:2.8%;width:5.7%;height:4.2%}
.top-contact{left:88.4%;top:2.8%;width:8.8%;height:3.9%}
/* Hero buttons */
.hero-conocenos{left:8.5%;top:31.5%;width:9.3%;height:3.6%}
.hero-servicios{left:19.0%;top:31.5%;width:12.1%;height:3.6%}
/* Section buttons */
.about-more{left:5.1%;top:68.8%;width:11.6%;height:2.8%}
.values-more{left:74.1%;top:68.7%;width:10.0%;height:2.8%}
.group-more{left:5.1%;top:82.8%;width:8.0%;height:2.8%}
.sister-web{left:85.0%;top:79.5%;width:9.4%;height:3.6%}
/* Footer contact areas */
.footer-email{left:27.6%;top:90.0%;width:16.7%;height:4.4%}
.footer-phone1{left:47.7%;top:91.5%;width:5.0%;height:2.2%}
.footer-phone2{left:52.6%;top:91.5%;width:5.0%;height:2.2%}
.footer-phone3{left:57.8%;top:91.5%;width:5.0%;height:2.2%}
/* Internal section anchors */
.a-inicio{top:0}
.a-servicios{top:36%}
.a-nosotros{top:50%}
.a-valores{top:50%}
.a-grupo{top:74%}
.a-casos{top:74%}
.a-proyectos{top:74%}
.a-contacto{top:88%}
@media(max-width:700px){
  .site{min-width:0;box-shadow:none}
  /* Keep exact composition by scaling the approved design rather than rearranging it. */
  .hotspot{border-radius:3px}
}