:root{
  --cf-navy:#071D37;
  --cf-gold:#C49A5A;
  --cf-cream:#faf8f4;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--cf-cream);} 
body{font-family:Arial,Helvetica,sans-serif;background:var(--cf-cream);color:#071D37;}
a{color:inherit;text-decoration:none;}
.page-shell{width:100%;min-height:100vh;background:var(--cf-cream);} 
.mockup-wrap{position:relative;width:100%;margin:0 auto;background:var(--cf-cream);} 
.mockup-wrap.home{max-width:1536px;}
.mockup-wrap.empresa,.mockup-wrap.personas{max-width:1055px;}
.mockup-image{display:block;width:100%;height:auto;margin:0 auto;}
/* Clickable transparent zones matching the visual menu/buttons. */
.hotspot{position:absolute;display:block;background:rgba(255,255,255,0);border:0;outline:0;}
.hotspot:focus-visible{outline:3px solid rgba(196,154,90,.85);outline-offset:2px;border-radius:4px;}
/* Home hotspots percentages are mapped to the 1536x1024 reference. */
.home .nav-inicio{left:38.6%;top:2.0%;width:4.1%;height:3.5%;}
.home .nav-nosotros{left:43.7%;top:2.0%;width:5.2%;height:3.5%;}
.home .nav-areas{left:48.9%;top:2.0%;width:7.2%;height:3.5%;}
.home .nav-equipo{left:56.9%;top:2.0%;width:4.8%;height:3.5%;}
.home .nav-blog{left:61.7%;top:2.0%;width:3.8%;height:3.5%;}
.home .nav-contacto{left:66.1%;top:2.0%;width:5.5%;height:3.5%;}
.home .cta-top{left:80.1%;top:1.8%;width:8.0%;height:3.6%;}
.home .btn-servicios{left:13.0%;top:35.2%;width:9.0%;height:3.1%;}
.home .btn-contacto{left:23.0%;top:35.2%;width:8.5%;height:3.1%;}
.home .card-civil{left:12.9%;top:56.4%;width:13.0%;height:12.0%;}
.home .card-laboral{left:27.6%;top:56.4%;width:13.0%;height:12.0%;}
.home .card-corporativo{left:42.5%;top:56.4%;width:13.0%;height:12.0%;}
.home .card-inmobiliario{left:57.4%;top:56.4%;width:13.0%;height:12.0%;}
.home .card-litigios{left:72.3%;top:56.4%;width:13.0%;height:12.0%;}
/* Empresa/personas mapped to 1055x1491/1493 images. */
.tall .nav-inicio{left:24.3%;top:1.4%;width:5.8%;height:2.2%;}
.tall .nav-nosotros{left:30.5%;top:1.4%;width:7.2%;height:2.2%;}
.tall .nav-areas{left:39.2%;top:1.4%;width:10.0%;height:2.2%;}
.tall .nav-equipo{left:53.0%;top:1.4%;width:6.2%;height:2.2%;}
.tall .nav-blog{left:61.4%;top:1.4%;width:4.8%;height:2.2%;}
.tall .nav-contacto{left:70.0%;top:1.4%;width:8.0%;height:2.2%;}
.tall .cta-top{left:82.8%;top:1.2%;width:14.2%;height:2.7%;}
.empresa .hero-cta{left:5.1%;top:31.0%;width:21.1%;height:3.5%;}
.empresa .service-1{left:5.0%;top:44.0%;width:28.8%;height:9.4%;}
.empresa .service-2{left:35.2%;top:44.0%;width:28.8%;height:9.4%;}
.empresa .service-3{left:65.0%;top:44.0%;width:28.8%;height:9.4%;}
.personas .hero-cta{left:8.5%;top:31.0%;width:17.3%;height:3.5%;}
.personas .service-1{left:8.5%;top:45.2%;width:26.2%;height:9.4%;}
.personas .service-2{left:36.0%;top:45.2%;width:26.2%;height:9.4%;}
.personas .service-3{left:63.5%;top:45.2%;width:26.2%;height:9.4%;}
.semantic-content{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.preview-note{max-width:900px;margin:22px auto 38px;padding:16px 20px;border-left:4px solid var(--cf-gold);background:#fff;box-shadow:0 10px 25px rgba(7,29,55,.07);line-height:1.5;font-size:14px;color:#334;}
@media(max-width:900px){
  .mockup-wrap.home,.mockup-wrap.empresa,.mockup-wrap.personas{max-width:100%;}
  .preview-note{margin:14px 16px 26px;font-size:13px;}
}