:root{
  --primary:#0066CC;--primary-dark:#004a99;--sky:#e6f2ff;--accent:#00C853;
  --dark:#0f172a;--muted:#64748b;--bg:#ffffff;--soft:#f6fafd;
  --shadow-sm:0 4px 20px rgba(0,102,204,.08);
  --shadow-md:0 10px 40px rgba(0,102,204,.12);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--dark);background:var(--bg);line-height:1.6;margin:0}
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--dark)}
h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
a{text-decoration:none;color:var(--primary)}
img{max-width:100%;display:block}

.section{padding:90px 0}
.bg-soft{background:var(--soft)}
.badge-soft{display:inline-block;background:var(--sky);color:var(--primary);padding:6px 16px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:12px;letter-spacing:.5px;text-transform:uppercase}

/* NAV */
.navbar-custom{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);box-shadow:0 2px 20px rgba(0,0,0,.05);transition:all .3s}
.navbar-custom .navbar-brand{font-weight:700;font-size:1.35rem;color:var(--dark)}
.navbar-custom .nav-link{color:var(--dark);font-weight:500;margin:0 6px;position:relative}
.navbar-custom .nav-link:hover{color:var(--primary)}
.btn-whatsapp{background:#25D366;color:#fff;border:0;padding:10px 20px;border-radius:99px;font-weight:600;box-shadow:0 6px 20px rgba(37,211,102,.3)}
.btn-whatsapp:hover{background:#1ea952;color:#fff}
.btn-primary{background:var(--primary);border:0;padding:10px 24px;border-radius:99px;font-weight:600;box-shadow:0 6px 20px rgba(0,102,204,.25)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline-light{border-radius:99px;padding:10px 24px;font-weight:600}

/* HERO */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#003a80 0%,#0066cc 100%);}
.hero:before{content:"";position:absolute;inset:0;background:url('../images/hero.jpg') center/cover;opacity:.35}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,58,128,.85),rgba(0,102,204,.6))}
.hero-content{position:relative;z-index:2;padding:120px 0 60px;max-width:800px}
.hero h1,.hero h1 span{color:#fff}
.hero h1 span{color:#7fd4ff}
.hero p{font-size:1.15rem;opacity:.95;margin:20px 0 30px}
.hero-btns .btn{margin:6px 8px 6px 0}

/* PAGE HERO */
.page-hero{background:linear-gradient(135deg,var(--primary),#004a99);color:#fff;padding:150px 0 60px;text-align:center}
.page-hero h1{color:#fff}
.page-hero p a{color:#cbe4ff}
.page-hero p{opacity:.9}

/* CARDS */
.feature-card,.service-card,.product-card,.plan-card,.step-card,.mini-card,.area-card,.testimonial,.contact-info,.contact-form,.brand-card{
  background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:all .35s ease;height:100%;
}
.feature-card:hover,.service-card:hover,.product-card:hover,.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.feature-icon,.service-icon{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#3b8fe0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px}
.service-icon{background:linear-gradient(135deg,var(--accent),#009f42)}
.btn-link-arrow{color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.btn-link-arrow:hover{gap:10px;transition:.2s}

.list-check{list-style:none;padding:0;margin:12px 0}
.list-check li{margin:6px 0;color:var(--muted)}
.list-check li i{color:var(--accent);margin-right:8px}

/* COUNTERS */
.counters h3{font-size:2.6rem;color:var(--primary);font-weight:800}
.counters p{color:var(--muted);margin:0}

/* PLANS */
.plan-card{text-align:center;position:relative;padding:36px 28px}
.plan-popular{border:2px solid var(--primary);transform:scale(1.03)}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:4px 14px;border-radius:99px;font-size:.75rem;font-weight:600}
.plan-price{font-size:2.2rem;color:var(--primary);font-weight:800;margin:14px 0}
.plan-price small{font-size:.9rem;color:var(--muted);font-weight:400}
.plan-card ul{list-style:none;padding:0;margin:20px 0;text-align:left}
.plan-card li{padding:6px 0;color:var(--muted)}

/* STEP */
.step-card{text-align:center;position:relative}
.step-num{width:56px;height:56px;line-height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#3b8fe0);color:#fff;font-size:1.4rem;font-weight:700;margin:0 auto 14px}

/* AREA */
.area-card{text-align:center;padding:20px 12px;font-weight:600;color:var(--dark);border:1px solid #eef3f8}
.area-card i{color:var(--primary);margin-right:6px}
.mini-card{text-align:center;padding:24px 12px}
.mini-card i{font-size:1.8rem;color:var(--primary);margin-bottom:10px;display:block}

/* BRANDS */
.brand-card{text-align:center;font-weight:700;font-size:1.1rem;color:var(--primary);padding:26px;background:#fff;border:1px solid #eaf1f8}

/* TESTIMONIAL */
.testimonial{text-align:center;padding:34px 26px}
.testimonial .stars{color:#f5b301;margin-bottom:12px}
.testimonial p{font-style:italic;color:var(--dark)}
.testimonial h6{margin-top:14px;color:var(--primary)}

/* PRODUCT */
.product-img{width:100%;aspect-ratio:1.5;background:linear-gradient(135deg,var(--sky),#fff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--primary);margin-bottom:16px}

/* CTA */
.cta-section{padding:80px 0;background:linear-gradient(135deg,var(--primary),#003a80);color:#fff;text-align:center}
.cta-section h2{color:#fff}
.cta-section p{opacity:.9;margin:12px 0 26px}

/* CONTACT */
.contact-info ul{list-style:none;padding:0;margin:20px 0}
.contact-info li{padding:10px 0;color:var(--muted)}
.contact-info li i{color:var(--primary);width:26px}
.form-control{border-radius:12px;padding:12px 16px;border:1px solid #e1e8f0}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,102,204,.15)}
.map-frame{width:100%;height:380px;border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* ACCORDION */
.accordion-item{border:1px solid #eaf1f8;border-radius:12px!important;margin-bottom:12px;overflow:hidden}
.accordion-button{font-weight:600;padding:18px 22px}
.accordion-button:not(.collapsed){background:var(--sky);color:var(--primary)}
.accordion-button:focus{box-shadow:none}

/* FOOTER */
.footer-section{background:#0a1930;color:#c9d5e6;padding:70px 0 30px}
.footer-section h4,.footer-section h6{color:#fff}
.footer-section h6{margin-bottom:16px;font-size:1rem}
.footer-section ul{list-style:none;padding:0}
.footer-section ul li{margin:8px 0}
.footer-section a{color:#c9d5e6}
.footer-section a:hover{color:#fff}
.footer-section .contact-list li i{color:var(--accent);margin-right:8px}
.social-icons{margin-top:16px;display:flex;gap:10px}
.social-icons a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.social-icons a:hover{background:var(--primary)}
.footer-section hr{border-color:rgba(255,255,255,.1);margin:34px 0 20px}

/* FLOATING BUTTONS */
.float-btn{position:fixed;right:20px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:999;transition:all .3s}
.float-btn:hover{transform:scale(1.1);color:#fff}
.float-wa{bottom:130px;background:#25D366}
.float-call{bottom:70px;background:var(--primary)}
.float-top{bottom:20px;background:var(--dark);opacity:0;pointer-events:none}
.float-top.show{opacity:1;pointer-events:auto}

.dropdown-menu { border-radius: .75rem; padding: .5rem; min-width: 240px; }
.dropdown-item { border-radius: .5rem; padding: .6rem .8rem; }
.dropdown-item:hover { background: var(--bs-primary-bg-subtle); }
.nav-pills .nav-link { color: #333; background: #fff; border: 1px solid #dee2e6; }
.nav-pills .nav-link.active { background: var(--bs-primary); color: #fff; }
.page-hero { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); }

