:root{
  --primary:#004B8D;
  --text:#0e1116;
  --muted:#5b616e;
  --bg:#ffffff;
  --soft:#f5f7f9;
  --footer:#0e1116;
  --nav-h:72px;
}
html,body{ height:100%; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
body{
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
  padding-top: var(--nav-h);
  overflow-x:hidden;
}
main{ flex:1; }

/* NAV */
.app-nav{
  background:rgba(255,255,255,0.95)!important;
  backdrop-filter:blur(20px);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.navbar-brand{ color:var(--text); font-size:1.25rem; }
.navbar-brand:hover{ color:var(--primary); }
.nav-link{ color:var(--text)!important; margin-left:1rem; font-weight:500; }
.nav-link:hover{ color:var(--primary)!important; }

/* HERO */
.hero-video{ position:relative; padding-top:4.5rem; background:#000; color:#fff; text-align:center; overflow:hidden; }
.hero-video iframe{ width:100%; height:min(60vh,520px); object-fit:cover; filter:brightness(85%); }
.overlay-caption{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; padding:0 1rem; }
.overlay-caption h1{ font-size:2.6rem; font-weight:800; letter-spacing:.2px; }
.overlay-caption p{ max-width:720px; margin:1rem auto; font-size:1.05rem; color:#eaeaea; }
.btn-cta{ border-radius:999px; background:var(--primary); color:#fff; font-weight:700; padding:.65rem 1.35rem; border:none; transition:all .2s ease; letter-spacing:.2px; }
.btn-cta:hover{ background:#003b6e; color:#fff; }

/* SECTIONS */
.section-pad{ padding:5rem 0; }
.section-title{ font-weight:700; text-align:center; margin-bottom:1.25rem; color:var(--text); }
.section-lead{ color:var(--muted); text-align:center; max-width:820px; margin:0 auto 2rem; }
section{ scroll-margin-top: var(--nav-h); }

/* ABOUT */
.prose{ max-width:62ch; }
#about p{ color:var(--muted); }
.photo{ border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,0.08); width:100%; max-width:580px; height:auto; }

/* STATS */
.stats-bg{ position:relative; background:linear-gradient(135deg,#004B8D 0%,#0a66b2 60%,#0e8ddf 100%); color:#fff; overflow:hidden; }
.stats-bg .section-title{ color:#fff; font-size:2rem; }
.text-white-70{ color:rgba(255,255,255,.82); }
.stats-bg::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px;
  background-position: 0 0, 12px 12px;
}
.stat-box{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:1.25rem; box-shadow:0 10px 24px rgba(0,0,0,.12); }
.stat-number{ font-size:3.4rem; font-weight:800; color:#fff; line-height:1.1; }
.stat-label{ margin-top:.5rem; color:#f1f5f9; font-weight:700; font-size:1.08rem; }

/* SLIDER */
.scroller-wrap{ position:relative; }
.scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:calc(100%/3); gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.scroller::-webkit-scrollbar{ height:8px; }
.scroller::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:8px; }
.scroller .card{ scroll-snap-align:start; min-height:200px; border:1px solid rgba(0,0,0,.06); }
.scroller .ratio{ border-bottom:1px solid rgba(0,0,0,.06); }
.scroller-img{ width:100%; height:100%; object-fit:cover; display:block; }
.scroller-btn{
  position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid rgba(0,0,0,.08);
  width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,.08); cursor:pointer;
}
.scroller-btn:hover{ background:#f8fafc; }
.scroller-btn.prev{ left:-8px; }
.scroller-btn.next{ right:-8px; }

/* MAP */
.bg-soft{ background:var(--soft); }
.map-card{ border:1px solid rgba(0,0,0,.06); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.05); overflow:hidden; background:#fff; }
.map-addr{ color:var(--text); }
.map-addr a{ color:var(--primary); text-decoration:none; font-weight:700; }
.map-addr a:hover{ text-decoration:underline; }

/* FOOTER */
.app-footer{ background:var(--footer); color:#e5e5e7; padding:3rem 1rem; margin-top:auto; position:relative; bottom:0; width:100%; }
.app-footer a{ color:#ffffff; margin:0 .5rem; transition:color .2s ease; text-decoration:none; }
.app-footer a:hover{ color:var(--primary); }
.footer-container{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:2rem; }
.footer-col{ flex:1 1 300px; }
.footer-col h6{ color:#fff; font-weight:600; margin-bottom:1rem; }
.footer-social{ display:flex; justify-content:center; align-items:center; gap:1.5rem; margin-top:1.5rem; }
.footer-social a i{ font-size:1.4rem; color:#ffffff !important; opacity:1 !important; transition:transform .2s ease, color .2s ease; }
.footer-social a i:hover{ transform:scale(1.12); color:var(--primary) !important; }
.border-secondary-subtle{ border-color:rgba(255,255,255,.15)!important; }

/* FLOATING CONTACT */
.contact-floating{ position:fixed; bottom:25px; right:25px; display:flex; flex-direction:column; gap:12px; z-index:999; }
.contact-floating a{ width:50px; height:50px; border-radius:50%; display:flex; justify-content:center; align-items:center; color:#fff; font-size:1.3rem; box-shadow:0 4px 15px rgba(0,0,0,0.25); transition:all .2s ease; }
.whatsapp-btn{ background:#25d366; }
.call-btn{ background:var(--primary); }
.contact-floating a:hover{ transform:scale(1.08); }

/* MOBILE CONTACT BAR */
.contact-bar{ position:fixed; bottom:0; left:0; width:100%; background:var(--footer); color:#fff; display:flex; justify-content:space-around; align-items:center; padding:.8rem 0; z-index:999; border-top:2px solid var(--primary); }
.contact-bar a{ color:#fff; text-decoration:none; font-weight:700; font-size:1rem; display:flex; align-items:center; gap:6px; }
.contact-bar a i{ font-size:1.2rem; }

/* RESPONSIVE */
@media (max-width: 1200px){
  .prose{ max-width:64ch; }
  .scroller{ grid-auto-columns:50%; }
}
@media (max-width: 768px){
  .hero-video iframe{ height:40vh; }
  .overlay-caption h1{ font-size:1.8rem; }
  .overlay-caption p{ font-size:.95rem; }
  .btn-cta{ padding:.55rem 1.1rem; font-size:.95rem; }
  .footer-container{ flex-direction:column; text-align:center; }
  .footer-col{text-align:center!important;}
  .prose{ max-width:none; }
  .scroller{ grid-auto-columns:85%; }
  .contact-floating{ display:none; }
}
/* --- CBX Slider --- */
.scroller-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.scroller {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1rem;
  padding: 1rem 0;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

.scroller .card {
  flex: 0 0 300px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: #fff;
}
.scroller .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.scroller .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.scroller .card-body {
  padding: 0.9rem 1rem 1.1rem;
  text-align: left;
}

.scroller .card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scroller .card-text {
  font-size: 0.9rem;
  color: #004b8d;
  font-weight: 500;
}

.scroller-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  transition: all 0.25s ease;
}
.scroller-btn:hover {
  background: #004b8d;
  color: #fff;
  border-color: #004b8d;
}
.scroller-btn.prev { left: -10px; }
.scroller-btn.next { right: -10px; }

@media (max-width: 768px) {
  .scroller .card { flex: 0 0 80%; }
  .scroller-btn { display: none; }
}