:root{
  --primary:#0a4da6;
  --accent:#ff8a00;
  --dark:#0f172a;
  --muted:#eff6ff;
  --text:#0b1220;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:#fff;scroll-behavior:smooth}
a{color:var(--primary);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:28px}

.nav{
  position:sticky;top:0;z-index:50;background:#ffffffee;
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto;border-radius:10px}
.brand .name{font-weight:800;letter-spacing:.3px;font-size:1.15rem}
.nav a.btn{padding:10px 16px;border-radius:12px;border:1px solid #e5e7eb}
.cta{background:var(--accent);color:#111827;border:none}
.cta:hover{opacity:.9}

.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
  padding:40px 24px;background:linear-gradient(180deg,#f8fafc,transparent);
}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.05;margin:0 0 10px 0}
.hero p{font-size:1.05rem;color:#374151;margin:8px 0 16px 0}
.hero .card{
  border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 10px 25px rgba(2,6,23,.06);
}
.hero .card img{width:100%;height:auto;display:block}

.section{padding:24px}
.section h2{font-size:clamp(22px,3vw,32px);margin:6px 0 18px 0}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.card{
  border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(2,6,23,.08)}
.card img{width:100%;height:200px;object-fit:cover;display:block}
.card .p{padding:14px}
.badge{display:inline-block;padding:6px 10px;background:var(--muted);border-radius:999px;font-size:.8rem;margin-right:6px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}

footer{margin-top:24px;background:#0b1220;color:#e5e7eb}
footer a{color:#c7d2fe}
.footer-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
@media (max-width:820px){.footer-inner{grid-template-columns:1fr}}

.notice{
  padding:12px 14px;border-radius:12px;background:#fef3c7;border:1px solid #fde68a;color:#92400e
}

#whatsapp-float{
  position:fixed;bottom:20px;right:20px;z-index:60;
}
#whatsapp-float a{
  display:flex;align-items:center;gap:10px;
  background:#25d366;color:#0b1220;padding:12px 16px;border-radius:999px;
  font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2);
}
#whatsapp-float svg{width:22px;height:22px;fill:#0b1220}
.video-wrap, .embed-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;border:1px solid #e5e7eb;background:#fff}
.video-wrap iframe, .embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}