/* ============================================
   FARMACIAS SIMILARES — DESIGN SYSTEM (Premium)
   ============================================ */
:root{
  --blue-900:#0a2a5e;
  --blue-800:#0f3a7a;
  --blue-700:#1e4ea3;
  --blue-600:#2461c4;
  --blue-500:#3a7bd5;
  --blue-50:#eaf2ff;
  --gold:#ffd84a;
  --green:#1fbf6a;
  --red:#ff5a7a;
  --ink-900:#0d1b35;
  --ink-700:#2a3a55;
  --ink-500:#56678a;
  --ink-300:#9aabc7;
  --bg:#f5f8fd;
  --white:#ffffff;
  --border:#e3eaf5;
  --shadow-sm: 0 4px 14px rgba(15,58,122,.08);
  --shadow-md: 0 12px 40px rgba(15,58,122,.12);
  --shadow-lg: 0 24px 60px rgba(15,58,122,.18);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --t: .25s cubic-bezier(.2,.8,.2,1);
  --container: 1240px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter','Segoe UI',sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue-700); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--blue-500); }
h1,h2,h3,h4{ font-family:'Montserrat',sans-serif; color:var(--ink-900); margin:0; line-height:1.18; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.75rem 1.4rem; border-radius:99px; font-weight:700;
  font-family:'Montserrat',sans-serif; font-size:14px;
  border:2px solid transparent; cursor:pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn.lg{ padding:.95rem 1.8rem; font-size:15px; }
.btn-primary{ background:var(--blue-700); color:#fff; box-shadow: 0 8px 22px rgba(30,78,163,.35);}
.btn-primary:hover{ background:var(--blue-800); transform:translateY(-2px); box-shadow:0 12px 30px rgba(30,78,163,.45); color:#fff;}
.btn-secondary{ background:#fff; color:var(--blue-700); border-color:var(--blue-700);}
.btn-secondary:hover{ background:var(--blue-700); color:#fff; transform:translateY(-2px);}
.btn-tertiary{ background:var(--gold); color:var(--ink-900);}
.btn-tertiary:hover{ background:#ffce26; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--blue-700); border-color:var(--border);}
.btn-outline:hover{ border-color:var(--blue-700); }
.btn-ghost{ background:transparent; color:var(--ink-700);}
.btn-danger{ background:var(--red); color:#fff;}
.btn-success{ background:var(--green); color:#fff;}
.btn-block{ width:100%; justify-content:center; }

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:60;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink-900);}
.brand-logo{ width:46px; height:46px; object-fit:contain; }
.brand-text strong{ display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; line-height:1; color:var(--blue-800);}
.brand-text span{ font-size:11px; color:var(--ink-500); letter-spacing:.08em; text-transform:uppercase;}
.main-nav{ display:flex; gap:6px; }
.main-nav a{
  padding:10px 14px; border-radius:99px; color:var(--ink-700); font-weight:600; font-size:14px;
}
.main-nav a:hover{ background:var(--blue-50); color:var(--blue-700);}
.main-nav a.muted{ color:var(--ink-500); }
.header-cta{ display:flex; gap:10px; align-items:center; }
.hamburger{ display:none; background:none; border:none; font-size:22px; color:var(--ink-700); cursor:pointer; }

/* HERO */
.hero{ position:relative; padding: 60px 0 80px; overflow:hidden;}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 80% 20%, rgba(30,78,163,.18), transparent 70%),
    radial-gradient(ellipse 500px 400px at 10% 80%, rgba(255,216,74,.18), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%);
  z-index:-1;
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:40px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(30,78,163,.08); color:var(--blue-700);
  padding:8px 16px; border-radius:99px; font-weight:600; font-size:13px;
  margin-bottom:20px;
}
.hero-title{
  font-size: clamp(34px, 4.6vw, 60px); font-weight:900; letter-spacing:-.02em;
  margin-bottom:18px;
}
.hero-title em{ font-style:normal; color:var(--blue-700); }
.hero-sub{ font-size:18px; color:var(--ink-500); margin-bottom:28px; max-width:560px;}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px;}
.hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:560px;}
.hero-stats > div{ background:#fff; padding:16px; border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.hero-stats strong{ display:block; font-family:'Montserrat',sans-serif; font-size:22px; color:var(--blue-700);}
.hero-stats span{ font-size:12px; color:var(--ink-500);}

.hero-visual{ position:relative; }
.hero-visual img{
  width:100%; max-width:560px; margin:0 auto;
  filter: drop-shadow(0 30px 60px rgba(15,58,122,.25));
  animation: heroFloat 4s ease-in-out infinite alternate;
}
@keyframes heroFloat{ to{ transform: translateY(-14px); } }

.floating-card{
  position:absolute; background:#fff; padding:10px 16px; border-radius:99px;
  box-shadow:var(--shadow-md); font-weight:600; font-size:13px; color:var(--ink-900);
  display:flex; gap:8px; align-items:center;
}
.floating-card i{ color:var(--blue-700); }
.card-1{ top:12%; left:-8%; animation: floatA 5s ease-in-out infinite;}
.card-2{ top:48%; right:-8%; animation: floatA 5s ease-in-out infinite .8s; }
.card-2 i{ color:#25d366; }
.card-3{ bottom:8%; left:8%; animation: floatA 5s ease-in-out infinite 1.6s;}
@keyframes floatA{ 50%{ transform:translateY(-12px); } }

/* SECTION HEAD */
.section-head{ text-align:center; margin-bottom:48px; max-width:780px; margin-left:auto; margin-right:auto;}
.section-head .eyebrow{
  display:inline-block; color:var(--blue-700); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px;
}
.section-head h2{ font-size: clamp(28px, 3.6vw, 44px); font-weight:800; letter-spacing:-.02em;}
.section-head h2 em{ font-style:normal; color:var(--blue-700);}
.section-head p{ color:var(--ink-500); margin-top:12px; font-size:17px;}

/* SERVICES */
.services{ padding: 80px 0;}
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.service-card{
  background:#fff; border-radius:var(--radius-lg); padding:32px; position:relative;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  transition: transform var(--t), box-shadow var(--t);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.service-card.featured{ border-color:var(--blue-700); box-shadow:var(--shadow-md);}
.ribbon{
  position:absolute; top:16px; right:16px;
  background:var(--gold); color:var(--ink-900); padding:6px 14px;
  border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.svc-icon{
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff; margin-bottom:18px;
}
.medical .svc-icon{ background: linear-gradient(135deg, #2461c4, #0a2a5e);}
.dental .svc-icon{ background: linear-gradient(135deg, #1fbf6a, #0d6c3c);}
.vet .svc-icon{ background: linear-gradient(135deg, #ff8a3d, #d65c0c);}
.service-card h3{ font-size:22px; font-weight:800; margin-bottom:14px;}
.service-card ul{ list-style:none; padding:0; margin:0 0 22px;}
.service-card li{ padding:6px 0; color:var(--ink-700); display:flex; align-items:center; gap:8px;}
.service-card li i{ color:var(--green); }
.svc-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid var(--border);}
.price{ font-family:'Montserrat',sans-serif; font-size:28px; font-weight:900; color:var(--blue-700);}
.price small{ font-size:12px; color:var(--ink-500); font-weight:500;}

/* BANNER */
.banner-premium img{ width:100%; height:auto; }

/* PRICING */
.pricing{ padding: 80px 0; background:#fff;}
.pricing-tabs{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  background:var(--blue-50); padding:8px; border-radius:99px;
  max-width:560px; margin:0 auto 32px;
}
.tab{
  flex:1; min-width:140px; padding:12px 18px; border-radius:99px; border:none; background:transparent;
  font-weight:700; color:var(--ink-700); cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.tab.active{ background:#fff; color:var(--blue-700); box-shadow:var(--shadow-sm);}
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.price-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; display:flex; justify-content:space-between; align-items:flex-start;
  transition: all var(--t);
}
.price-card:hover{ border-color:var(--blue-500); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.price-card h4{ font-size:16px; margin-bottom:6px; }
.price-card p{ color:var(--ink-500); font-size:13px; margin:0;}
.price-card .amount{ font-family:'Montserrat',sans-serif; font-size:22px; font-weight:900; color:var(--blue-700);}

/* LOCATIONS */
.locations{ padding:80px 0; }
.loc-controls{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;}
.search-wrap{ flex:1; min-width:240px; position:relative;}
.search-wrap i{ position:absolute; top:50%; left:16px; transform:translateY(-50%); color:var(--ink-300);}
.search-wrap input{ width:100%; padding:14px 16px 14px 44px; border:1px solid var(--border); border-radius:99px; font-size:14px; background:#fff;}
.loc-controls select{ padding:14px 16px; border:1px solid var(--border); border-radius:99px; background:#fff; font-size:14px; min-width:200px;}

.loc-layout{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; }
.map-wrap{ background:#fff; border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); position:relative;}
#map-mexico{ width:100%; height:520px; position:relative; background: linear-gradient(135deg,#eaf2ff,#fff); border-radius:var(--radius);}
.map-legend{ display:flex; gap:16px; margin-top:12px; font-size:13px; color:var(--ink-700);}
.map-legend i.med{ color:var(--blue-700);}
.map-legend i.dent{ color:var(--green);}
.map-legend i.vet{ color:#ff8a3d;}

.loc-list{ background:#fff; border-radius:var(--radius-lg); padding:14px; box-shadow:var(--shadow-sm); height:560px; overflow:auto;}
.loc-item{ padding:14px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:10px; cursor:pointer; transition:all var(--t);}
.loc-item:hover{ border-color:var(--blue-500); background:var(--blue-50);}
.loc-item h5{ margin:0 0 4px; font-size:15px; font-family:'Montserrat',sans-serif;}
.loc-item p{ margin:0; font-size:13px; color:var(--ink-500);}
.loc-item .badges{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}
.loc-badge{ font-size:10px; padding:3px 8px; border-radius:99px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.loc-badge.medico{ background:#e6efff; color:var(--blue-700);}
.loc-badge.dentista{ background:#e7f8ee; color:#0d6c3c;}
.loc-badge.veterinario{ background:#fff0e0; color:#d65c0c;}

/* MAP PINS */
.map-pin{
  position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer;
  transform:translate(-50%,-50%); transition:transform var(--t);
}
.map-pin:hover{ transform:translate(-50%,-50%) scale(1.6); }
.map-pin.medico{ background:var(--blue-700); }
.map-pin.dentista{ background:var(--green);}
.map-pin.veterinario{ background:#ff8a3d;}

.map-svg{ width:100%; height:100%;}

/* AI ECOSYSTEM */
.ai-ecosystem{
  padding:80px 0;
  background: linear-gradient(135deg, #0a2a5e 0%, #1e4ea3 100%);
  color:#fff; position:relative; overflow:hidden;
}
.ai-ecosystem::before{
  content:""; position:absolute; inset:0; opacity:.08;
  background: radial-gradient(circle at 20% 80%, #ffd84a 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, #7ed5ff 0%, transparent 50%);
}
.ai-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; position:relative;}
.ai-copy h2{ color:#fff; font-size: clamp(28px,3.5vw,42px);}
.ai-copy h2 em{ color:var(--gold); font-style:normal;}
.ai-copy .eyebrow{ color:#7ed5ff;}
.ai-copy p{ color:#cfe6ff; font-size:17px; margin:14px 0 22px;}
.ai-features{ list-style:none; padding:0; margin:0 0 28px;}
.ai-features li{ padding:10px 0; color:#cfe6ff;}
.ai-features li i{ color:var(--gold); margin-right:10px; width:24px;}
.ai-features li strong{ color:#fff;}
.ai-visual img{
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  animation: heroFloat 4s ease-in-out infinite alternate;
}

/* CTA FINAL */
.cta-final{ padding:80px 0; background:#fff;}
.cta-inner{
  display:grid; grid-template-columns: auto 1fr; gap:40px; align-items:center;
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px;
  box-shadow:var(--shadow-md);
}
.cta-simi{ width:200px; }
.cta-final h2{ font-size: clamp(26px,3vw,36px); margin-bottom:10px;}
.cta-final p{ color:var(--ink-500); margin-bottom:18px;}

/* FOOTER */
.site-footer{ background:var(--ink-900); color:#cfd8eb; padding:60px 0 24px; margin-top:60px;}
.site-footer .brand-text strong{ color:#fff;}
.site-footer .brand-text span{ color:#9aabc7;}
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap:40px;}
.site-footer h4{ color:#fff; margin-bottom:14px; font-size:15px; }
.site-footer ul{ list-style:none; padding:0; margin:0;}
.site-footer li{ margin:8px 0;}
.site-footer a{ color:#9aabc7; font-size:14px;}
.site-footer a:hover{ color:#fff;}
.footer-about{ font-size:14px; margin-top:14px; color:#9aabc7;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:30px; margin-top:30px;
  border-top:1px solid #1c2c4a; font-size:12px; color:#7388af;
}
.footer-bottom i{ color:var(--red); }

/* FORM ELEMENTS */
.field{ display:block; margin-bottom:14px;}
.field label{ display:block; font-weight:600; font-size:13px; color:var(--ink-700); margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  font-size:14px; font-family:'Inter',sans-serif; background:#fff;
  transition: border var(--t), box-shadow var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-700); box-shadow:0 0 0 3px rgba(30,78,163,.12);
}

/* CARD */
.card{ background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--border);}

/* TABLE */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; }
.table th{ background:var(--blue-50); color:var(--blue-700); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em;}
.table tr:hover td{ background:#fafcff;}

/* BADGE */
.badge{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.badge.success{ background:#e7f8ee; color:#0d6c3c;}
.badge.warn{ background:#fff5d6; color:#876200;}
.badge.danger{ background:#ffe1e7; color:#a01a36;}
.badge.info{ background:#e6efff; color:var(--blue-700);}

/* TOAST */
.toast{
  position:fixed; bottom:30px; right:30px; background:var(--ink-900); color:#fff;
  padding:14px 20px; border-radius:12px; box-shadow:var(--shadow-lg); z-index:99999;
  display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px;
  max-width: 380px;
  animation: toastIn .3s cubic-bezier(.2,.8,.3,1.2);
}
.toast.toast-success{ background:#0d6c3c; }
.toast.toast-error{   background:#a01a36; }
.toast.toast-warn{    background:#876200; }
.toast.toast-info{    background:#0a2a5e; }
.toast.toast-out{ animation: toastOut .35s ease forwards; }
@keyframes toastIn{ from{ transform:translateY(20px); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes toastOut{ to{ transform:translateY(20px); opacity:0;} }
@media(max-width:540px){
  .toast{ left:16px; right:16px; bottom:80px; max-width:none; }
}

/* MODAL (legacy) */
.modal{ position:fixed; inset:0; background:rgba(10,42,94,.6); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; backdrop-filter:blur(8px);}
.modal.open{ display:flex;}
.modal-content{ background:#fff; border-radius:var(--radius-lg); padding:30px; max-width:500px; width:100%; box-shadow:var(--shadow-lg); animation: toastIn .25s ease;}
.modal-close{ background:none; border:none; font-size:22px; color:var(--ink-500); cursor:pointer; float:right;}

/* SIM-MODAL (D.modal) */
.sim-modal-back{
  position:fixed; inset:0; background:rgba(10,42,94,.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index: 9998; padding:16px;
  opacity:0; transition: opacity .2s ease;
}
.sim-modal-back.show{ opacity:1; }
.sim-modal-card{
  background:#fff; border-radius:18px; padding:24px;
  max-width: 540px; width:100%;
  box-shadow: 0 30px 80px rgba(10,42,94,.35);
  transform: translateY(20px) scale(.96);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.2);
  max-height: 90vh; overflow-y: auto;
}
.sim-modal-back.show .sim-modal-card{ transform: none; }
.sim-modal-card.lg{ max-width: 760px; }
.sim-modal-card.sm{ max-width: 380px; }
.sim-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.sim-modal-head h3{ margin:0; font-size:18px; color:var(--blue-700); }
.sim-modal-head .x{
  border:none; background:#f0f4fb; width:36px; height:36px; border-radius:50%;
  font-size:18px; color:var(--ink-700); cursor:pointer;
}
.sim-modal-head .x:hover{ background:#e0e7f4; }
.sim-modal-body .field{ margin-bottom:12px; }
.sim-modal-body .field label{ display:block; font-size:12px; color:#5b6a82; font-weight:600; margin-bottom:4px;}
.sim-modal-body input,
.sim-modal-body select,
.sim-modal-body textarea{
  width:100%; padding:10px 12px; border:1px solid #d6dce8; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px; box-sizing:border-box;
}
.sim-modal-body input:focus,
.sim-modal-body select:focus,
.sim-modal-body textarea:focus{
  outline:none; border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(30,78,163,.15);
}
.sim-modal-foot{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--border);
}
.sim-modal-foot .btn{ min-width:100px; }
@media(max-width:540px){
  .sim-modal-card{ padding:18px; max-height: 95vh;}
  .sim-modal-foot{ flex-direction: column-reverse; }
  .sim-modal-foot .btn{ width:100%; }
}

/* RESPONSIVE */
@media(max-width:980px){
  .hero-grid,.ai-grid,.cta-inner{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr 1fr;}
  .loc-layout{ grid-template-columns:1fr;}
  .footer-grid{ grid-template-columns:1fr 1fr;}
  .main-nav{ display:none;}
  .hamburger{ display:inline-block;}
  .main-nav.open{
    display:flex; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; background:#fff; padding:16px; box-shadow:var(--shadow-md);
  }
}
@media(max-width:640px){
  .service-grid{ grid-template-columns:1fr;}
  .hero-stats{ grid-template-columns:1fr 1fr;}
  .footer-grid{ grid-template-columns:1fr;}
  .header-cta .btn-outline{ display:none;}
  .cta-simi{ width:140px;}
}

/* DASHBOARD/ADMIN STYLES */
.dash-layout{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; background:var(--bg);}
.sidebar{ background:#fff; border-right:1px solid var(--border); padding:24px 18px;}
.sidebar .brand{ margin-bottom:30px;}
.sidebar nav{ display:flex; flex-direction:column; gap:4px;}
.sidebar a{
  padding:11px 14px; border-radius:12px; color:var(--ink-700); font-weight:600; font-size:14px;
  display:flex; align-items:center; gap:10px;
}
.sidebar a:hover{ background:var(--blue-50); color:var(--blue-700);}
.sidebar a.active{ background:var(--blue-700); color:#fff;}
.sidebar a i{ width:20px; text-align:center;}
.dash-main{ padding:24px;}
.dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.dash-head h1{ font-size:24px;}
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px;}
.kpi{ background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--border);}
.kpi .label{ color:var(--ink-500); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
.kpi .value{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:30px; color:var(--blue-700); margin-top:4px;}
.kpi .delta{ font-size:12px; color:var(--green); margin-top:4px;}

@media(max-width:780px){
  .dash-layout{ grid-template-columns:1fr;}
  .sidebar{ position:fixed; top:0; left:-280px; bottom:0; width:260px; z-index:100; transition:left var(--t);}
  .sidebar.open{ left:0;}
}