/*:root{
  --primary:#0A2A66;
  --accent:#5DAAF2;
  --bg:#0b1220;
  --text:#eaf0ff;
  --muted:#b9c6e6;
  --border:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.05);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#050812 0%, #0b1220 45%, #060913 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,9,19,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.06);padding:6px}
.brand-name{font-weight:900;letter-spacing:.3px}
.brand-tag{font-size:12px;color:var(--muted)}

.menu{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.menu a{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:12px}
.menu a:hover{background:rgba(255,255,255,.06);color:var(--text)}

.btn{
  background:linear-gradient(135deg,var(--accent),#78c0ff);
  color:#041028;
  font-weight:900;
  padding:10px 14px;
  border-radius:14px;
  box-shadow:var(--shadow);
  border:none;
  display:inline-block;
}
.btn:hover{filter:brightness(1.05)}
.btn-outline{
  border:1px solid rgba(93,170,242,.55);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
}
.btn-outline:hover{background:rgba(93,170,242,.10)}

.hero{padding:64px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.kicker{display:inline-block;color:var(--accent);font-weight:900;letter-spacing:.3px;font-size:12px;margin-bottom:12px}
h1{font-size:40px;line-height:1.12;margin:0 0 14px}
.lead{color:var(--muted);line-height:1.65;margin:0 0 12px}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge{border:1px solid var(--border);padding:8px 10px;border-radius:999px;color:var(--muted);font-size:13px;background:rgba(255,255,255,.04)}

.section{padding:42px 0}
.section h2{margin:0 0 12px;font-size:28px}
.muted{color:var(--muted);line-height:1.7}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted);line-height:1.6}

.hero-card{background:linear-gradient(180deg, rgba(93,170,242,.14) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.02) 100%)}
.hero-card ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.75}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03)}
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent);margin-top:6px}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.step{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.step b{display:block;margin-bottom:6px}
.step span{color:var(--muted)}

.callout{
  background:linear-gradient(135deg, rgba(10,42,102,.65), rgba(93,170,242,.18));
  border:1px solid rgba(93,170,242,.35);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:13px;color:var(--muted)}
input,textarea{
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}

.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{border:1px solid var(--border);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted)}

.footer{padding:24px 0;border-top:1px solid var(--border);color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  h1{font-size:34px}
  .form{grid-template-columns:1fr}
} CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {/* BOTÓN WHATSAPP FLOTANTE */
.whatsapp-float{
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: white;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 9999;
}
.whatsapp-float:hover{
  background:#1ebe5d;
}
  background-color: white;
  color: black;
  font-family: Verdana;
}