*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f4f8fb;color:#1d2b3a}
.topbar{position:sticky;top:0;z-index:99;background:#003b73;color:white;display:flex;align-items:center;justify-content:space-between;padding:14px 7%;box-shadow:0 4px 15px #0002}
.logo{font-size:30px;font-weight:800}.logo span{color:#28c2ff}
nav a{color:white;text-decoration:none;margin:0 12px;font-weight:600}
.btn-nav,.btn,.btn-card{background:#00a6e8;color:white;padding:12px 22px;border-radius:25px;text-decoration:none;font-weight:700;display:inline-block}
.hero{height:520px;position:relative;overflow:hidden;background:linear-gradient(120deg,#003b73,#0077b6)}
.slide{position:absolute;inset:0;display:none;align-items:center;padding:0 8%;color:white;background:linear-gradient(120deg,#003b73,#0096c7)}
.slide.active{display:flex}
.slide h1{font-size:55px;max-width:650px}.slide p{font-size:22px;margin:20px 0;max-width:600px}
.beneficios{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:35px 7%;background:white;margin-top:-35px;position:relative;z-index:5}
.beneficios div{background:#eef8ff;padding:22px;border-radius:16px;text-align:center;box-shadow:0 5px 15px #0001}
.beneficios strong{display:block;color:#003b73;margin:8px 0}.beneficios span{color:#607080}
.section{padding:70px 7%;text-align:center}.section h2,.speed h2,.legal h2{font-size:38px;color:#003b73}
.sub{margin:12px 0 30px;color:#607080}
.tabs{margin-bottom:35px}.tab{border:0;padding:15px 28px;margin:5px;border-radius:30px;background:#dceefa;color:#003b73;font-weight:800;cursor:pointer}
.tab.active{background:#003b73;color:white}
.planes{display:none;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.planes.active{display:grid}
.card{background:white;border-radius:24px;padding:30px;text-align:left;box-shadow:0 10px 30px #0001;position:relative;border:2px solid transparent}
.card.destacado{border-color:#00a6e8;transform:scale(1.03)}
.badge{background:#00a6e8;color:white;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:800}
.card h3{font-size:36px;color:#003b73;margin-top:15px}.tipo{font-size:20px;font-weight:700;color:#1d2b3a}
.card h4{font-size:35px;color:#0096c7;margin:15px 0}.card p{color:#526575;margin:12px 0}.card ul{margin:20px 0 25px;padding-left:20px}.card li{margin:10px 0}
.speed{padding:70px 7%;text-align:center;background:linear-gradient(120deg,#003b73,#0077b6);color:white}
.speed h2{color:white}.speed-box{margin:auto;margin-top:30px;background:white;color:#003b73;max-width:400px;border-radius:28px;padding:35px}
.circle{width:150px;height:150px;border-radius:50%;border:12px solid #00a6e8;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;font-size:45px;font-weight:900}
.mapa-box{display:grid;grid-template-columns:1fr 2fr;gap:25px;text-align:left}
.sectores{background:white;padding:25px;border-radius:20px;box-shadow:0 8px 25px #0001}
.sectores button{display:block;width:100%;margin:10px 0;padding:14px;border:0;border-radius:12px;background:#e7f5ff;color:#003b73;font-weight:800;cursor:pointer}
iframe{width:100%;height:380px;border:0;border-radius:20px}
.legal{padding:60px 7%;background:#e7f5ff;text-align:center}
.legal-links{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:25px}
.legal-links a{background:white;color:#003b73;padding:15px 22px;border-radius:14px;text-decoration:none;font-weight:800}
footer{background:#002b52;color:white;padding:50px 7%;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer a{display:block;color:#bfeaff;text-decoration:none;margin:8px 0}
.float{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#003b73;color:white;padding:14px 22px;border-radius:35px;box-shadow:0 8px 25px #0004;z-index:100}
.float a{background:#00a6e8;color:white;padding:9px 18px;border-radius:20px;text-decoration:none;margin-left:12px;font-weight:800}
@media(max-width:800px){
 nav{display:none}.hero{height:480px}.slide h1{font-size:38px}
 .beneficios{grid-template-columns:1fr}
 .mapa-box,footer{grid-template-columns:1fr}
 .float{width:90%;text-align:center}
}
#map{
  width:100%;
  height:420px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 25px #0002;
}

.btn-ubicacion{
  background:#003b73!important;
  color:white!important;
  margin-top:20px!important;
}