:root{--azul:#0a2540;--gris:#5b6470;--gris-claro:#f4f6f8;--borde:#e3e7ec;--naranja:#f37021;--whatsapp:#25D366}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--gris-claro);color:#1f2933}a{text-decoration:none}

/* ── Header ── */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--borde);backdrop-filter:blur(8px)}.header-inner{max-width:1180px;margin:auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;flex-direction:column;align-items:flex-start;min-width:180px}.brand img{height:44px;width:auto;object-fit:contain}.brand span{font-size:11px;letter-spacing:1.2px;color:#6b7280;margin-top:3px;text-transform:uppercase}.nav{display:flex;align-items:center;gap:24px}.nav a{color:#344054;font-size:14px;font-weight:500}.nav a:hover{color:var(--azul)}.nav .nav-whatsapp{padding:10px 16px;border-radius:999px;background:var(--azul);color:white}.nav .nav-whatsapp:hover{background:var(--naranja);color:white}

/* ── Hero ── */
.hero{min-height:calc(100vh - 82px);display:flex;align-items:center;padding:56px 28px}.hero-inner{width:100%;max-width:1180px;margin:auto}.hero-label{color:var(--naranja);font-weight:700;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px}.hero-title{max-width:760px;margin:0 0 12px;color:var(--azul);font-size:clamp(30px,5vw,56px);line-height:1.05;letter-spacing:-1.5px}.hero-subtitle{max-width:680px;margin:0 0 36px;color:var(--gris);font-size:18px;line-height:1.55}

/* Hero con imagen de fondo */
.hero-bg{
  background-image:
    linear-gradient(rgba(10,37,64,0.80), rgba(10,37,64,0.86)),
    url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}
.hero-bg .hero-title{color:#ffffff}
.hero-bg .hero-subtitle{color:rgba(255,255,255,0.72)}

/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fff;border:1px solid var(--borde);border-top:4px solid var(--azul);border-radius:18px;padding:28px;box-shadow:0 18px 45px rgba(16,47,77,.07);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(16,47,77,.12);border-color:#cfd8e3}.card-icon{font-size:30px;margin-bottom:14px}.card h2{margin:0 0 10px;color:var(--azul);font-size:21px;line-height:1.2}.card .lead{color:#344054;font-weight:600;margin:0 0 16px}.card ul{padding-left:18px;margin:0 0 18px;color:var(--gris);line-height:1.65;font-size:15px}.card .clients{color:#667085;font-size:13px;line-height:1.45;margin-top:auto;padding-top:14px;border-top:1px solid #edf0f3}.card-link{display:inline-flex;align-items:center;margin-top:18px;color:var(--naranja);font-weight:700}.card-link:hover{color:var(--azul)}

/* Imagen dentro de la card */
.card-img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:18px;
  display:block;
}

/* ── Páginas internas ── */
.page{max-width:960px;margin:0 auto;padding:70px 28px}.page-card{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:38px;box-shadow:0 18px 45px rgba(16,47,77,.07)}.page h1{color:var(--azul);font-size:clamp(32px,5vw,48px);margin:0 0 14px}.page p{color:var(--gris);line-height:1.7;font-size:17px}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}.service-item{border:1px solid var(--borde);border-radius:14px;padding:18px;background:#fbfcfd}.service-item strong{display:block;color:var(--azul);margin-bottom:6px}.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.button{display:inline-block;padding:13px 18px;border-radius:999px;font-weight:700}.button-primary{background:var(--azul);color:white}.button-primary:hover{background:var(--naranja)}.button-secondary{color:var(--azul);border:1px solid var(--borde)}.button-secondary:hover{border-color:var(--azul)}

/* Banner de imagen en páginas internas */
.page-banner{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:30px;
  display:block;
}

/* ── WhatsApp flotante ── */
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:100;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--whatsapp);color:white;font-size:26px;box-shadow:0 12px 28px rgba(0,0,0,.22)}

/* ── Footer ── */
.footer{border-top:1px solid var(--borde);color:#667085;text-align:center;padding:22px;font-size:13px;background:#fff}

/* ── Responsive ── */
@media(max-width:900px){
  .cards{grid-template-columns:1fr}
  .hero{align-items:flex-start;padding-top:38px}
  .card{min-height:auto}
  .page-banner{height:200px}
}
@media(max-width:640px){
  .header-inner{padding:14px 18px;align-items:flex-start;flex-direction:column}
  .brand img{height:38px}
  .brand span{font-size:10px}
  .nav{width:100%;gap:14px;flex-wrap:wrap}
  .nav a{font-size:13px}
  .nav .nav-whatsapp{padding:8px 12px}
  .hero{min-height:auto;padding:34px 18px 46px}
  .hero-title{letter-spacing:-.8px}
  .hero-subtitle{font-size:16px;margin-bottom:26px}
  .card{padding:22px;border-radius:15px}
  .card-img{height:100px}
  .page{padding:36px 18px}
  .page-card{padding:24px}
  .page-banner{height:120px;border-radius:10px}
  .service-grid{grid-template-columns:1fr}
  .whatsapp-float{width:54px;height:54px;right:16px;bottom:16px}
}