/* ==============================
   Monbuntu — Azul Elegante
   ============================== */
:root{
  --bg:#ffffff;
  --ink:#0e1a2b;         /* azul petróleo muy oscuro p/ textos */
  --muted:#5a6a85;       /* gris azulado para secundarios */
  --primary:#0d47a1;     /* azul corporativo */
  --primary-600:#0b3c8a;
  --accent:#19b9ff;      /* azul claro del logo */
  --ring:rgba(13,71,161,.25);
  --surface:#f6f8fb;
  --radius:14px;
  --shadow:0 10px 30px rgba(6,34,79,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.55 "Poppins",system-ui,Segoe UI,Roboto,Arial;
  color:var(--ink); background:var(--bg);
}

/* Layout */
.container{width:min(1100px,92%); margin:auto}
.section{padding:72px 0}
.section.alt{background:var(--surface)}
.grid{display:grid; gap:28px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

/* Topbar / Nav */
.topbar{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid #e8edf6;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:36px; width:auto}
.brand span{font-weight:600; letter-spacing:.4px; color:var(--ink)}
.menu{display:flex; gap:20px; align-items:center}
.menu a{
  color:var(--ink); text-decoration:none; font-weight:500;
  padding:8px 12px; border-radius:10px; transition:.2s ease;
}
.menu a:hover{background:#eef4ff}
.menu .cta{
  background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(13,71,161,.25);
}
.menu .cta:hover{background:var(--primary-600)}
.burger{display:none}
@media (max-width:820px){
  .burger{display:block; background:transparent; border:0; font-size:26px}
  .menu{position:fixed; inset:68px 0 auto 0; background:#fff; padding:18px;
        display:none; flex-direction:column; gap:10px; border-bottom:1px solid #e9eef8}
  .menu.open{display:flex}
}

/* Hero */
.hero{
  position:relative; display:grid; align-items:center; min-height:70vh;
  background:linear-gradient(180deg, rgba(13,71,161,.04), rgba(13,71,161,0));
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url('images/hero.jpg') center/cover no-repeat;
  filter:contrast(1.05) saturate(1.05);
}
.hero .overlay{
  background:linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 100%);
  padding:56px; border-radius:var(--radius); backdrop-filter:blur(4px);
  box-shadow:var(--shadow);
}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 22px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:600;
  text-decoration:none; transition:.2s ease; border:1px solid transparent;
}
.btn.primary{background:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{border-color:var(--primary); color:var(--primary); background:#fff}
.btn.ghost:hover{background:#eef4ff}

/* Cards */
.card{
  background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  border:1px solid #e8edf6;
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}

/* Feature bullets */
.feature{display:flex; gap:14px; align-items:flex-start}
.feature i{
  width:12px; height:12px; border-radius:50%; margin-top:8px;
  background:conic-gradient(var(--accent), var(--primary) 60%);
  box-shadow:0 0 0 6px var(--ring);
}

/* Footer */
.footer{background:#0b1530; color:#cbd6ff}
.footer a{color:#e7f0ff; text-decoration:none}
.footer .brand span{color:#e7f0ff}
.footer small{color:#9fb0d0}

/* Forms (Contacto) */
.input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #dbe4f4;
  outline:none; font:inherit; color:var(--ink); background:#fff;
}
.input:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 6px var(--ring)}
textarea{min-height:140px; resize:vertical}

/* Utilities */
.kicker{color:var(--primary); font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:12px}
.hint{color:var(--muted)}
.center{text-align:center}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(90deg, #e9f2ff, #f4f9ff);
  border:1px solid #d8e6ff; color:var(--primary); font-weight:600
}
.fade-up{opacity:0; transform:translateY(10px); animation:fadeUp .6s ease .1s forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}

.menu a.active {
  background: var(--primary);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.25);
}

/* === Efecto hover para las tarjetas de servicios === */
.card {
  transition: all 0.3s ease;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card:hover {
  background-color: #F0F7FF; /* Azul clarito Monbuntu */
  box-shadow: 0 6px 18px rgba(0, 76, 255, 0.15); /* Sombra azul suave */
  transform: translateY(-4px); /* Efecto de elevación */
}

.section.alt.center {
  background: linear-gradient(180deg, #f8faff 0%, #f0f5ff 100%);
  padding: 80px 0;
}

.section.alt.center h2 {
  color: #0b1e4a;
  font-weight: 700;
  font-size: 28px;
}

.section.alt.center p {
  color: #6a7b95;
  font-size: 18px;
  margin-bottom: 32px;
}

.section.alt.center .btn.primary {
  background: linear-gradient(90deg, #0a3fff, #0055ff);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 85, 255, 0.3);
  transition: all 0.3s ease;
}

.section.alt.center .btn.primary:hover {
  background: linear-gradient(90deg, #0050ff, #0078ff);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 85, 255, 0.35);
}