/* Capulí Loma - Styles (final) */
:root{
  --blue-900:#1E3A8A;
  --blue-600:#2563EB;
  --blue-100:#DBEAFE;
  --yellow-400:#FACC15;
  --gray-900:#0f172a;
  --gray-700:#334155;
  --gray-500:#64748b;
  --gray-200:#E5E7EB;
  --gray-100:#F3F4F6;
  --white:#ffffff;
}
html, body { overflow-x:hidden; overflow-y:auto; }
*{ box-sizing:border-box }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--gray-900);
  background:var(--white);
  line-height:1.6;
}
a{ color:var(--blue-600); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:1120px; margin:auto; padding:0 16px }
header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,0.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--gray-200);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand-logo-img{
  width:48px; height:48px; border-radius:6px; object-fit:contain; object-position:center;
  box-shadow:0 4px 14px rgba(37,99,235,0.18);
  background:#fff; border:1px solid var(--gray-200);
}
.brand-title{ font-weight:800; font-size:16px; color:var(--blue-900) }
.menu{ display:flex; gap:20px; font-weight:600 }
.menu a{ color:var(--gray-700) }
.cta{
  background:var(--blue-900); color:#fff; padding:10px 16px; border-radius:999px; font-weight:800;
  box-shadow:0 8px 20px rgba(37,99,235,0.22);
}
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--blue-100) 0%, #ffffff 70%);
}
.hero-inner{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; align-items:center; padding:64px 0 }
.hero h1{ font-size:40px; line-height:1.15; margin:0 0 12px; color:var(--blue-900) }
.hero p{ color:var(--gray-700); margin:0 0 20px }
.hero .buttons{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800 }
.btn-primary{ background:var(--blue-900); color:#fff }
.btn-secondary{ background:#fff; color:var(--blue-900); border:1px solid var(--blue-100) }
.illus{
  background:#fff; border:1px solid var(--gray-200); height:280px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.illus img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
section{ padding:56px 0; scroll-margin-top:80px }
.section-title{ font-size:28px; color:var(--blue-900); margin:0 0 12px; line-height:1.2 }
.section-sub{ color:var(--gray-700); margin:0 0 24px }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.card{ background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:20px;
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.04) }
.kv{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.kv .k{ font-weight:700; color:var(--gray-500) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.pill{ display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px;
  background:#fff; color:var(--blue-900); border:1px solid var(--blue-100); font-weight:700 }
.dot{ width:8px; height:8px; border-radius:999px; background:var(--yellow-400) }
.list{ margin:12px 0; padding-left:18px }
.list li{ margin:6px 0 }
footer{
  background:#EFF6FF; color:var(--blue-900); border-top:1px solid var(--blue-100);
}
.footer-inner{ display:grid; grid-template-columns:2fr 1fr; gap:24px; padding:28px 0 }
.foot-brand{ font-weight:900; font-size:18px }
.foot-small{ font-size:14px; color:var(--gray-700) }
.contact-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.contact-card{ background:#fff; padding:14px; border-radius:12px; border:1px solid var(--blue-100) }
.contact-card b{ display:block; color:var(--blue-900); margin-bottom:6px }
.copyright{ border-top:1px solid var(--blue-100); margin-top:12px; padding-top:12px; font-size:14px; color:var(--gray-700) }

/* Responsive */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; padding:40px 0 }
  .two-col{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr }
  .contact-row{ grid-template-columns:1fr }
  .menu{ display:none }
  .hero h1{ font-size:34px }
}
@media (max-width: 560px){
  .brand-title{ font-size:14px }
  .hero h1{ font-size:28px }
  .illus{ height:220px }
  .btn{ padding:10px 14px }
}