:root{
  --blue:#00AEEF;
  --yellow:#FFC727;
  --pink:#FF2D9B;
  --ink:#0F1E2E;
  --bg:#ffffff;

  --card:#f7fbff;
  --border:#e7eef6;
  --muted:#5b6b7a;

  --radius:18px;
  --shadow:0 18px 55px rgba(15,30,46,.08);
  --glow:0 0 0 1px #e7eef6, 0 8px 26px rgba(0,174,239,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(60% 60% at 0% 0%, rgba(0,174,239,.08), transparent 60%),
    radial-gradient(50% 50% at 100% 0%, rgba(255,45,155,.06), transparent 60%),
    radial-gradient(70% 70% at 100% 100%, rgba(255,199,39,.10), transparent 60%);
  background-attachment: fixed;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 16px}
.center{text-align:center}
.sub{color:var(--muted)}
.note{color:var(--muted)}
.small{font-size:12px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(90deg, #0da9e0, #00AEEF);
  box-shadow: 0 4px 18px rgba(0,174,239,.24);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.brand img{height:52px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))}
.brand-text{line-height:1; font-weight:700; letter-spacing:.4px}
.menu{display:flex; gap:12px; align-items:center}
.menu a{color:#fff; text-decoration:none; padding:8px 10px; border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.12)}
.btn{background:var(--blue); color:#fff; border:none; border-radius:12px; padding:10px 14px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--glow)}
.btn.dark{background:#111827}
.btn.ghost{background:rgba(255,255,255,.14); backdrop-filter: blur(2px); border:1px solid rgba(255,255,255,.3)}
.btn.full{width:100%}
.hamb{display:none; background:transparent; border:none; color:#fff; font-size:22px}

@media (max-width:900px){
  .hamb{display:block}
  .menu{position:fixed; right:10px; top:64px; flex-direction:column; gap:8px; background:#0da9e0; padding:12px; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.25); transform:translateY(-14px); opacity:0; pointer-events:none; transition:.15s}
  .menu.open{transform:none; opacity:1; pointer-events:auto}
}

/* Hero */
.hero{padding:26px 0 0}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px}
@media (max-width:960px){ .hero-grid{grid-template-columns: 1fr} }
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.hero h1{font-size:clamp(28px,3.5vw,40px); margin:0 0 10px}
.blue{color:var(--blue)} .yellow{color:var(--yellow)} .pink{color:var(--pink)}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 6px}
.bullets{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0; margin:10px 0 0; list-style:none}
.bullets li{background:#f2fbff; border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-weight:700; color:#0b2a46}
@media (max-width:700px){ .bullets{grid-template-columns:1fr} }

.hero-art{position:relative; overflow:hidden; display:grid; place-items:center}
.blob{position:absolute; inset:0; filter: blur(22px) saturate(1.1) opacity(.65);
  background:
   radial-gradient(35% 40% at 25% 35%, var(--blue), transparent 70%),
   radial-gradient(40% 45% at 70% 30%, var(--pink), transparent 70%),
   radial-gradient(40% 45% at 60% 70%, var(--yellow), transparent 70%);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift{0%{transform:translate3d(-10px,0,0)}100%{transform:translate3d(10px,-6px,0)}}
.logo-hero{width:min(380px, 80%); position:relative; z-index:1}
.ribbon{position:absolute; bottom:10px; right:10px; z-index:1; background:#fff6d8; border:1px solid #ffe2a1; color:#7a5600; font-weight:800; padding:6px 10px; border-radius:999px}

/* Sections */
.section{padding:40px 0}
.section.soft{background:linear-gradient(180deg, #ffffff, #f9fbff)}
.section h2{font-size:26px; margin:0 0 8px}

/* Planes */
.grid.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:960px){ .grid.plans{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid.plans{grid-template-columns:1fr} }
.plan h3{margin:0 0 6px}
.price{font-size:32px; font-weight:900; margin:6px 0}
.price small{font-size:14px; color:var(--muted)}
.plan ul{margin:10px 0 14px; padding-left:18px; color:#334155}
.plan-badge{position:absolute; top:10px; right:10px; background:#e6fbff; border:1px solid #bcefff; color:#007aa1; padding:4px 10px; border-radius:999px; font-weight:900}

/* Cobertura */
.grid.cov{display:grid; grid-template-columns: .9fr 1.1fr; gap:14px}
@media (max-width:900px){ .grid.cov{grid-template-columns:1fr} }
.cov-form label{font-weight:700}
.cov-form input{width:100%; margin:.35rem 0 1rem; padding:10px; border:1px solid var(--border); border-radius:10px}
.cov-map #map{height:300px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--glow)}

/* Features / Soporte */
.grid.features{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
@media (max-width:900px){ .grid.features{grid-template-columns:1fr} }
.feat h3{margin:0 0 8px}

/* Contacto */
.grid.contact{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
@media (max-width:900px){ .grid.contact{grid-template-columns:1fr} }
.contact-form label{font-weight:700}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:700px){ .contact-form .row{grid-template-columns:1fr} }
.contact-form input, .contact-form textarea{
  width:100%; margin:.35rem 0 1rem; padding:10px; border:1px solid var(--border); border-radius:10px
}
.contact-info .oem{margin:10px 0 12px; background:#f0fff7; border:1px solid #bff2d2; color:#0b6840; padding:8px 10px; border-radius:10px}

/* Footer */
.site-footer{padding:26px 0 36px; text-align:center; color:#5b6b7a}
.site-footer .wrap{border-top:1px solid var(--border); padding-top:16px}