:root{
  --bg:#f7f9fc;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#0a2540;       /* azul principal (navbar/hero) */
  --brand-2:#193b68;     /* azul degradado */
  --accent:#ff7d00;      /* naranja CTA */
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
.sr-only{position:absolute; left:-9999px}

/* Containers & Sections */
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.section{padding:4rem 0; scroll-margin-top:90px}
.section.alt{background:#fff}
.center{text-align:center}

/* Buttons */
.btn-primary,.btn-secondary{
  display:inline-block; font-weight:800; text-decoration:none; border-radius:.8rem;
  padding:.85rem 1.25rem; transition:.2s ease; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{filter:brightness(0.95)}
.btn-secondary{background:#fff; color:var(--brand); border:2px solid var(--brand)}
.btn-secondary:hover{background:#f0f4ff}
.btn-sm{padding:.55rem .9rem; font-weight:700}
.btn-block{display:block; width:100%; text-align:center}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:1000; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand img{height:78px; width:auto}
.nav-links{list-style:none; display:flex; gap:1.2rem; align-items:center}
.nav-links a{color:var(--brand); text-decoration:none; font-weight:800}
.menu-toggle{display:none; background:#fff; border:0; font-size:1.6rem; padding:.25rem .5rem; border-radius:.5rem}

@media (max-width:880px){
  .brand img{height:62px}
  .menu-toggle{display:inline-block}
  .nav-links{
    position:absolute; right:1rem; top:84px; flex-direction:column; align-items:flex-start;
    background:#fff; padding:1rem; border-radius:1rem; box-shadow:var(--shadow); display:none; min-width:260px;
  }
  .nav-links.active{display:flex}
}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; text-align:center;
}
.hero-inner{padding:3.5rem 0}
.hero h1{font-size:2.2rem; line-height:1.2; margin:0 0 1rem}
.lead{font-size:1.15rem; margin:0 auto 1.25rem; max-width:760px}
.nota{
  max-width:760px; margin:.5rem auto 1.25rem; padding:.6rem .8rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:.6rem;
  color:#f3f4f6;
}
.cta-group{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* Grid & Cards */
.grid-3{display:grid; gap:1.25rem}
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{
  background:var(--card); padding:1.4rem; border-radius:1rem; box-shadow:var(--shadow);
}
.card h3{margin:.2rem 0 .5rem}

/* Mockup */
.mockup-img{border-radius:1rem; box-shadow:var(--shadow); margin-top:1rem; max-width:780px}

/* Pricing */
.pricing .card{text-align:center; position:relative; transition:transform .2s ease, box-shadow .2s ease}
.pricing .card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.12)}
.price{font-size:2rem; font-weight:900; color:var(--brand); margin:.25rem 0}
.sub{font-weight:700}
.badge{
  position:absolute; top:-10px; right:-10px; background:var(--accent); color:#fff; padding:.35rem .55rem;
  font-size:.8rem; border-radius:.6rem; font-weight:800;
}
.featured{outline:2px solid var(--accent)}

/* Testimonios */
.testimonial p{font-style:italic; margin:0 0 .6rem}
.testimonial footer{color:var(--muted); font-size:.95rem}

/* CTA / Contacto */
.cta{background:#0b3aa9; color:#fff; text-align:center}
.form{
  max-width:560px; margin:1.25rem auto 0; display:grid; gap:.75rem;
}
.form input,.form textarea{
  border:1px solid #d7dce4; border-radius:.8rem; padding:.9rem 1rem; font:inherit; width:100%;
}
.form input:focus,.form textarea:focus{outline:0; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-msg{min-height:1.2rem; margin:.25rem 0 0}

/* Footer */
.footer{background:#fff; border-top:1px solid #e5e7eb}
.footer-inner{
  display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1.1rem 0; flex-wrap:wrap
}
.footer-nav{display:flex; gap:1rem}
.footer a{color:var(--brand); text-decoration:none; font-weight:700}

/* Cookie banner */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; display:none; z-index:2000;
  background:#111827; color:#fff; padding:1rem; border-radius:1rem; box-shadow:var(--shadow);
}
.cookie-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.cookie-banner .btn-secondary{border-color:#fff; color:#fff}