:root{
  --bg:#e6f7ff;       /* pale sky */
  --panel:#ffffff;    /* cards and panels */
  --muted:#5e7a8a;    /* cool muted text */
  --accent:#4aa3d8;   /* light blue accent */
  --text:#06283d;     /* deep blue text */
  --card-shadow: rgba(6,40,61,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#dff3ff);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Top */
.top{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(6,40,61,0.06);
  background:transparent;
}
.logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent);
  padding:6px;
  box-shadow: 0 6px 18px var(--card-shadow);
}
.company{display:flex;flex-direction:column}
.company .name{font-weight:700;letter-spacing:0.6px;color:var(--text)}
.company .nit{font-size:12px;color:var(--muted);margin-top:2px}
.socials{margin-top:6px;display:flex;gap:8px}
.social{font-size:13px;color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px}
.social:hover{background:rgba(74,163,216,0.08);color:var(--text)}

/* Primary nav */
.primary-nav{margin-left:18px;display:flex;gap:10px;align-items:center}
.primary-nav .prime{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600;background:transparent}
.primary-nav .prime:hover{background:rgba(74,163,216,0.08)}

/* mini nav in header for sections (extensions) */
.mini-nav{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-btn{background:transparent;border:1px solid rgba(6,40,61,0.06);color:var(--muted);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px}
.nav-btn.active{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(74,163,216,0.12)}

/* Layout */
.container{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  padding:18px;
  align-items:start;
  flex:1 1 auto;
}

/* Mobile adapt: single column */
@media (max-width:720px){
  .container{grid-template-columns:1fr; padding:12px}
  .info{order:2}
  .primary-nav{display:none}
}

/* Hero */
.hero{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  padding:18px;
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 10px 30px var(--card-shadow);
}
.hero h1{margin:0 0 8px 0;font-size:20px;color:var(--text)}
.lead{color:var(--muted);margin:0}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (max-width:720px){ .gallery{grid-template-columns:1fr} }

.card{
  background:var(--panel);
  padding:12px;
  border-radius:12px;
  display:flex;
  gap:12px;
  align-items:center;
  cursor:grab;
  transition:transform .18s ease, box-shadow .18s ease;
  color:var(--text);
  box-shadow:0 6px 18px var(--card-shadow);
}
.card:active{cursor:grabbing}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,40,61,0.12)}
.thumb{
  width:88px;height:64px;border-radius:8px;background:linear-gradient(135deg,#eaf8ff,#d9f2fb);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;
  border:1px solid rgba(6,40,61,0.04)
}
.meta{flex:1}
.meta h4{margin:0 0 6px 0;color:var(--text)}
.meta p{margin:0;color:var(--muted);font-size:13px}

/* Info aside */
.info{
  background:linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  padding:14px;border-radius:12px;
  box-shadow:0 8px 20px var(--card-shadow);
}
.info h2,h3{margin:0 0 8px 0;color:var(--text)}
.info p, .info li{color:var(--muted);font-size:14px}

/* Offices list */
.offices{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.office{background:rgba(6,40,61,0.02);padding:10px;border-radius:8px;border:1px solid rgba(6,40,61,0.04)}
.office .addr{color:var(--muted);font-size:13px;margin-top:4px}
.office .phone{color:var(--muted);font-size:13px;margin-top:4px;font-weight:600}

/* Footer */
.foot{
  padding:12px 16px;
  border-top:1px solid rgba(6,40,61,0.04);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}
.foot-links{display:flex;gap:12px}
.foot-link{color:var(--muted);text-decoration:none}

/* Small interactions */
.button{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;
}