
:root{
  --primary:#232449; /* deep navy from logo */
  --accent:#f2c200;  /* yellow arrow from logo */
  --dark:#0b0c1d;
  --light:#f7f9fc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--light);color:#1b1e28;scroll-behavior:smooth}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.nav a{color:#111827;text-decoration:none;margin:0 10px;font-weight:600}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:40px;width:auto}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.btn-primary{background:var(--accent);color:#111}
.btn-outline{border:2px solid var(--primary);color:var(--primary);background:transparent}
.hero{background:linear-gradient(135deg, var(--primary), #2e3070);color:#fff;padding:80px 0}
.hero .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 12px}
.hero p{font-size:clamp(16px,2.3vw,19px);opacity:.95}
.hero .card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);padding:18px;border-radius:16px}
.section{padding:64px 0}
.section h2{font-size:clamp(24px,3vw,32px);margin:0 0 8px;color:var(--primary)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.kpis .k{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;text-align:center}
.k .n{font-weight:900;font-size:22px;color:var(--primary)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden}
.card h3{font-size:18px;margin:12px 12px 4px;color:var(--primary)}
.card p{margin:0 12px 16px;color:#374151}
.card .img-wrap{aspect-ratio:16/9;background:#eef2ff;overflow:hidden}
.card .img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.banner{border-radius:16px;overflow:hidden;border:1px solid #e5e7eb}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
blockquote{border-left:4px solid var(--accent);margin:0;padding:12px 16px;background:#fff;border-radius:10px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb;background:#fff}
.cta{background:var(--primary);color:#fff;border-radius:16px;padding:28px}
footer{background:#0f1228;color:#d5d9ff;margin-top:40px}
footer a{color:#fff}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:16px;padding:22px 0}
iframe{width:100%;border:0}
.whatsapp{
 position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;
 width:56px;height:56px;display:flex;align-items:center;justify-content:center;
 border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:60;text-decoration:none;font-size:28px;
}
@media (max-width:900px){
 .hero .grid{grid-template-columns:1fr}
 .grid-3{grid-template-columns:1fr 1fr}
 .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .grid-3{grid-template-columns:1fr}
 .gallery{grid-template-columns:1fr}
}
