:root{
  --ink:#0b1220; --ink2:#334155; --ink3:#475569;
  --primary:#0A2A43; --accent:#0DBA84; --sky:#2E9CCA; --panel:#f6f7fb; --wa:#16a34a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
.topbar{background:var(--primary);color:#cbd5e1;font-size:13px}
.topbar .inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.topbar a{color:#e2e8f0;text-decoration:none;margin-right:16px}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e2e8f0}
.nav{display:flex;justify-content:space-between;align-items:center;height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo{height:50px;width:auto;display:block}
.brand .anniv-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e6f9f2;color:#065f46;border:1px solid #a7f3d0;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.brand .anniv-pill img{height:20px;width:auto;display:block}

.navlinks{display:flex;align-items:center;gap:18px}
.navlinks a{color:var(--ink2);text-decoration:none;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;font-weight:800;border:0;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(13,186,132,.18)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid #e2e8f0}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(22,163,74,.25)}

/* --- NEW STYLES FOR OUTLINED WHATSAPP BUTTONS --- */
.btn-wa-outline{background:#fff;color:var(--wa);border:1px solid var(--wa);box-shadow:0 8px 20px rgba(22,163,74,.15)}
.btn-wa-outline .icon {
  height: 18px;
  width: 18px;
  display: inline-block;
  vertical-align: middle;
}

.hero{position:relative;overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:-1;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(13,186,132,.25), transparent 60%),
    radial-gradient(500px 300px at 80% 10%, rgba(46,156,202,.25), transparent 60%),
    radial-gradient(700px 400px at 60% 80%, rgba(10,42,67,.35), transparent 70%),
    linear-gradient(135deg,#081a2a 0%, #0A2A43 60%, #0b1220 100%);
}
.hero .wrap{display:grid;grid-template-columns: 1.2fr .8fr;align-items:center;gap:40px;padding:100px 0;color:#fff}
.hero h1{font-size:56px;line-height:1.04;margin:0 0 8px;font-weight:900}
.hero p{opacity:.95;font-size:18px;margin:0}
.hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

.portrait{
  width: auto;
  height: auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding: 20px;
}
.portrait img{
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

.section{padding:70px 0}
.section .lead{color:var(--ink3);margin:6px 0 24px}
.section h2{font-size:30px;margin:0 0 6px;font-weight:900;letter-spacing:.2px}
.section .tag{display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.4px}
.tag.services{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.tag.conditions{background:#eff6ff;color:#1e3a8a;border:1px solid #93c5fd}
.tag.doctor{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.tag.why{background:#eef2ff;color:#3730a3;border:1.5px solid #c7d2fe}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,.04)}
.card .icon{height:46px;width:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;font-size:22px}
.icon.green{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.icon.blue{background:#eff6ff;border:1px solid #93c5fd;color:#1e3a8a}
.icon.orange{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}

.panel{background:#f6f7fb}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kv .box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,.04)}
.kv .list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;list-style:none;margin:0;padding:0}
.kv .list li{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px;font-size:14px;color:var(--ink2)}

.footer{background:#fff;border-top:1px solid #e2e8f0;padding:24px 0;color:#64748b}
.footer .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.fab{
  position:fixed;
  right:22px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
  height:56px;
  border-radius:999px;
  background:var(--wa);
  color:#fff;
  padding:0 16px;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  text-decoration:none;
  font-weight:900;
  z-index: 50;
}
.fab .icon{
  height:22px;
  width:22px;
  display:inline-block;
  vertical-align: middle;
}
.fab .text{display:block}

/* --- NEW STYLES FOR OUTLINED FLOATING BUTTON --- */
.fab-outline{
  position:fixed;
  right:22px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
  height:56px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--wa);
  color:var(--wa);
  padding:0 16px;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  text-decoration:none;
  font-weight:900;
  z-index: 50;
}
.fab-outline .icon{
  height:22px;
  width:22px;
  display:inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.5));
}
.fab-outline .text{display:block}

@media(max-width:520px){.fab .text, .fab-outline .text{display:none}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;place-items:center;padding:16px;z-index:100}
.modal.show{display:grid}
.panel-modal{background:#fff;border-radius:22px;max-width:560px;width:100%;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.panel-modal .head{padding:16px 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.form{padding:16px;display:grid;gap:12px}
.form label{font-size:14px;font-weight:600}
.form input,.form select,.form textarea{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:10px;font:inherit}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .actions{display:flex;justify-content:space-between;gap:12px}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid #e2e8f0}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:24px;padding:84px 0}
  .portrait{
    width: 100%;
    height: auto;
  }
  .grid-3,.kv{grid-template-columns:1fr}
  .kv .list{grid-template-columns:1fr}
}
.map-wrap {
  width: 100%;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.gmap { width: 100%; height: 100%; border: 0; }

/* =========================
   Additions (safe polish)
   ========================= */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Sticky header shadow on scroll (used by main.js adding .is-scrolled) */
header.is-scrolled {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Keyboard-only focus rings */
body.using-mouse *:focus { outline: none !important; }
:focus-visible {
  outline: 2px solid #0b4f37;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive helper for inline Setmore iframe (optional) */
.ratio { position: relative; width: 100%; overflow: hidden; }
.ratio::before { content: ""; display: block; padding-top: 75%; } /* 4:3 */
.ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Optional: hero 10-year badge image (if you add an <img class="badge-10"> in HTML) */
.hero { position: relative; }
.badge-10 {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 140px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
}
@media (max-width: 768px) {
  .badge-10 { width: 90px; right: 12px; top: 12px; }
}