/*
Theme Name: First United Bank Ltd
Theme URI: https://firstunitedbank.com.gh
Author: First United Bank Web Team
Description: Official premium WordPress theme for First United Bank Ltd, Ghana. Every section is fully editable from the WordPress backend — no code editing required.
Version: 2.0.0
License: Private
Text Domain: fub
Tags: banking, ghana, finance, premium, fully-editable
*/

/* ── DESIGN TOKENS (overridable via Customizer) ── */
:root {
  --fub-green:      #006B3C;
  --fub-green-dark: #004d2c;
  --fub-green-light:#008f50;
  --fub-gold:       #C9A227;
  --fub-gold-light: #e0b83a;
  --fub-coal:       #1a1c19;
  --fub-off:        #f5f7f3;
  --fub-border:     #e2e6de;
  --fub-muted:      #6b7568;
  --fub-white:      #ffffff;
  --fub-red:        #c0392b;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--fub-coal);
  background: var(--fub-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2rem,5vw,3.6rem); }
h2 { font-size: clamp(1.4rem,3vw,2.2rem); }
h3 { font-size: clamp(1rem,2vw,1.35rem); }
p  { font-size: 0.97rem; line-height: 1.78; color: var(--fub-muted); }

/* ── NAVIGATION ── */
.fub-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fub-border);
  height: 70px; padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow .3s;
}
.fub-nav.scrolled { box-shadow: 0 4px 28px rgba(0,107,60,.1); }
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo-mark {
  width: 58px; height: 58px; border-radius: 8px;
  background: linear-gradient(135deg,var(--fub-green-dark),var(--fub-green-light));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,107,60,.28); flex-shrink: 0;
}
.nav-logo-mark img {
  width: 58px; height: 58px; object-fit: contain; display: block;
}
/* When real logo is loaded — strip the green background */
.nav-logo-mark[style*="transparent"] {
  background: transparent !important;
  box-shadow: none !important;
}
.nav-logo-name { font-family:'Cinzel',serif; font-size:.92rem; font-weight:700; color:var(--fub-green); display:block; line-height:1.2; }
.nav-logo-sub  { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fub-gold); display:block; }
.nav-menu { display:flex; align-items:center; gap:2px; }
.nav-menu a { font-size:.78rem; font-weight:500; color:#3a3c38; padding:7px 11px; border-radius:5px; transition:all .2s; white-space:nowrap; }
.nav-menu a:hover, .nav-menu a.current-menu-item { color:var(--fub-green); background:rgba(0,107,60,.06); }
.nav-ib-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--fub-green); color:white;
  padding:9px 16px; border-radius:6px;
  font-size:.76rem; font-weight:700; letter-spacing:.03em;
  border:1.5px solid var(--fub-green);
  transition:background .2s,border-color .2s;
  box-shadow:0 2px 10px rgba(0,107,60,.2);
}
.nav-ib-btn:hover { background:var(--fub-green-dark); border-color:var(--fub-gold); color:white; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:22px; height:2px; background:var(--fub-coal); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:70px; left:0; right:0; background:white; border-bottom:1px solid var(--fub-border); padding:16px 5%; z-index:999; box-shadow:0 8px 30px rgba(0,0,0,.1); }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:11px 0; border-bottom:1px solid var(--fub-border); font-size:.92rem; color:var(--fub-coal); }
.mobile-menu a:last-child { border-bottom:none; }

/* ── PAGE BANNER ── */
.page-banner {
  padding:100px 5% 60px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#001f12 0%,var(--fub-green) 55%,var(--fub-green-dark) 100%);
}
.page-banner.has-bg { background-size:cover; background-position:center; }
.page-banner.has-bg::after { content:''; position:absolute; inset:0; background:rgba(0,40,20,.7); }
.page-banner::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025)1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025)1px,transparent 1px);
  background-size:52px 52px;
}
.banner-inner { position:relative; z-index:2; }
.breadcrumbs { font-size:.7rem; color:rgba(255,255,255,.42); margin-bottom:10px; }
.breadcrumbs a { color:rgba(255,255,255,.42); transition:color .15s; }
.breadcrumbs a:hover,.breadcrumbs .current { color:var(--fub-gold); }
.breadcrumbs .sep { margin:0 5px; }
.banner-inner h1 { color:white; font-size:clamp(1.8rem,4vw,3rem); }
.banner-inner .banner-sub { font-size:1rem; color:rgba(255,255,255,.55); margin-top:10px; font-style:italic; font-family:Georgia,serif; }

/* ── SECTIONS ── */
.fub-section { padding:80px 5%; }
.fub-section.bg-off   { background:var(--fub-off); }
.fub-section.bg-white { background:var(--fub-white); }
.fub-section.bg-green { background:var(--fub-green); }
.fub-section.bg-dark  { background:var(--fub-coal); }
.section-label { display:block; font-size:.65rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fub-gold); margin-bottom:9px; }
.section-title { margin-bottom:13px; color:var(--fub-coal); }
.section-title.light { color:white; }
.gold-rule { width:42px; height:3px; background:var(--fub-gold); border:none; margin-bottom:20px; }
.gold-rule.center { margin-left:auto; margin-right:auto; }
.section-body { font-size:.97rem; line-height:1.78; color:var(--fub-muted); }
.section-body.light { color:rgba(255,255,255,.65); }
.text-center { text-align:center; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:13px 28px; border-radius:6px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:2px solid transparent; cursor:pointer; transition:all .2s; text-decoration:none; font-family:inherit; }
.btn-gold  { background:var(--fub-gold); color:var(--fub-coal); box-shadow:0 4px 18px rgba(201,162,39,.3); }
.btn-gold:hover  { background:var(--fub-gold-light); transform:translateY(-2px); }
.btn-green { background:var(--fub-green); color:white; box-shadow:0 4px 18px rgba(0,107,60,.25); }
.btn-green:hover { background:var(--fub-green-dark); transform:translateY(-2px); }
.btn-ow    { background:transparent; color:white; border-color:rgba(255,255,255,.4); }
.btn-ow:hover    { background:rgba(255,255,255,.1); border-color:white; }
.btn-og    { background:transparent; color:var(--fub-green); border-color:var(--fub-green); }
.btn-og:hover    { background:var(--fub-green); color:white; }
.btn-sm    { padding:9px 20px; font-size:.75rem; }

/* ── CARDS ── */
.fub-card { background:white; border:1px solid var(--fub-border); border-radius:11px; padding:24px; transition:all .2s; }
.fub-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,107,60,.1); border-color:var(--fub-green); }
.product-card { background:var(--fub-off); border:1px solid var(--fub-border); border-radius:12px; padding:26px 22px; transition:all .2s; position:relative; overflow:hidden; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,107,60,.1); border-color:var(--fub-green); }
.product-icon { width:46px; height:46px; border-radius:10px; background:linear-gradient(135deg,var(--fub-green-dark),var(--fub-green-light)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px; }
.product-name { font-size:.9rem; font-weight:700; color:var(--fub-coal); margin-bottom:7px; font-family:'Cinzel',serif; }
.product-desc { font-size:.79rem; color:var(--fub-muted); line-height:1.6; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fub-coal); margin-bottom:6px; }
.form-input { width:100%; padding:11px 13px; border:1.5px solid var(--fub-border); border-radius:7px; font-size:.87rem; color:var(--fub-coal); background:var(--fub-off); outline:none; transition:all .2s; font-family:inherit; }
.form-input:focus { border-color:var(--fub-green); background:white; box-shadow:0 0 0 3px rgba(0,107,60,.1); }
.form-input::placeholder { color:#a0a8a0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.btn-submit { width:100%; background:var(--fub-green); color:white; border:none; padding:13px; border-radius:7px; font-size:.88rem; font-weight:700; cursor:pointer; transition:all .2s; letter-spacing:.04em; font-family:inherit; }
.btn-submit:hover { background:var(--fub-green-dark); transform:translateY(-1px); }

/* ── TRUST STRIP ── */
.trust-strip { background:var(--fub-coal); padding:15px 5%; display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.trust-item::before { content:''; width:5px; height:5px; background:var(--fub-gold); border-radius:50%; flex-shrink:0; }

/* ── STATS BAR ── */
.stats-bar { background:var(--fub-green); padding:48px 5%; }
.stats-grid { display:flex; justify-content:center; flex-wrap:wrap; }
.stat-item { flex:1; min-width:130px; max-width:200px; text-align:center; padding:14px; border-right:1px solid rgba(255,255,255,.13); }
.stat-item:last-child { border-right:none; }
.stat-value { font-size:2.3rem; font-weight:900; color:var(--fub-gold); display:block; line-height:1; margin-bottom:5px; font-family:'Cinzel',serif; }
.stat-label { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.52); }

/* ── ABOUT GRID ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-visual { position:relative; height:400px; }
.av-main { position:absolute; top:0; left:0; right:52px; bottom:52px; background:linear-gradient(135deg,var(--fub-green-dark),var(--fub-green)); border-radius:14px 14px 64px 14px; overflow:hidden; }
.av-main.has-img { background:none; }
.av-main.has-img img { width:100%; height:100%; object-fit:cover; }
.av-main::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,162,39,.08)0%,transparent 60%); pointer-events:none; }
.av-inner { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0,rgba(0,0,0,.48)0%,transparent 60%); padding:26px; z-index:1; }
.av-inner .av-title { font-size:1rem; font-weight:700; color:white; font-family:'Cinzel',serif; }
.av-inner .av-sub   { font-size:.76rem; color:rgba(255,255,255,.58); margin-top:3px; }
.av-accent { position:absolute; bottom:0; right:0; width:140px; height:140px; background:var(--fub-gold); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; box-shadow:0 8px 26px rgba(201,162,39,.35); }
.av-num { font-size:2rem; font-weight:900; color:var(--fub-coal); line-height:1; font-family:'Cinzel',serif; }
.av-lbl { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,.55); text-align:center; }
.val-grid { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.val-item { display:flex; align-items:center; gap:11px; background:white; border:1px solid var(--fub-border); border-left:3px solid var(--fub-gold); padding:11px 14px; border-radius:6px; transition:all .2s; }
.val-item:hover { transform:translateX(4px); }
.val-name { font-size:.83rem; font-weight:700; color:var(--fub-green); }
.val-desc { font-size:.74rem; color:var(--fub-muted); }

/* ── DIGITAL BANKING ── */
.digital-section { padding:80px 5%; background:linear-gradient(150deg,#001f12 0%,var(--fub-green) 60%,var(--fub-green-dark) 100%); }
.digital-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.dig-feats { display:flex; flex-direction:column; gap:22px; }
.dig-feat { display:flex; gap:14px; align-items:flex-start; }
.dig-feat-icon { width:46px; height:46px; border-radius:11px; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.24); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.dig-feat-title { font-size:.93rem; font-weight:700; color:white; margin-bottom:4px; font-family:'Cinzel',serif; }
.dig-feat-desc  { font-size:.78rem; color:rgba(255,255,255,.56); line-height:1.6; }
.login-card { background:white; border-radius:18px; padding:38px 34px; box-shadow:0 18px 52px rgba(0,0,0,.22); max-width:370px; margin-left:auto; }
.lc-mark { width:34px; height:34px; border-radius:7px; background:var(--fub-green); display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.lc-mark svg { width:18px; height:18px; fill:white; }
.lc-title { font-size:1.05rem; font-weight:700; color:var(--fub-coal); margin-bottom:3px; font-family:'Cinzel',serif; }
.lc-sub   { font-size:.76rem; color:var(--fub-muted); margin-bottom:22px; }
.btn-login { width:100%; background:var(--fub-green); color:white; border:none; padding:12px; border-radius:7px; font-size:.88rem; font-weight:700; cursor:pointer; transition:all .2s; display:block; text-align:center; font-family:inherit; }
.btn-login:hover { background:var(--fub-green-dark); }
.secure-note { text-align:center; font-size:.69rem; color:var(--fub-muted); margin-top:12px; }

/* ── BRANCHES ── */
.head-office-card { background:var(--fub-green); border-radius:12px; padding:26px 30px; display:flex; align-items:center; gap:20px; margin-bottom:18px; position:relative; overflow:hidden; }
.head-office-card::before { content:''; position:absolute; right:-36px; top:-36px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.05); }
.ho-icon { font-size:2.4rem; flex-shrink:0; }
.ho-tag  { font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--fub-gold); margin-bottom:3px; }
.ho-name { font-size:1.05rem; font-weight:700; color:white; margin-bottom:3px; font-family:'Cinzel',serif; }
.ho-addr { font-size:.8rem; color:rgba(255,255,255,.65); }
.ho-phone{ font-size:.8rem; color:var(--fub-gold); font-weight:600; margin-top:3px; }
.branches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:13px; }
.branch-card { background:white; border:1px solid var(--fub-border); border-radius:10px; padding:18px 16px; transition:all .2s; }
.branch-card:hover { border-color:var(--fub-green); transform:translateY(-3px); box-shadow:0 7px 20px rgba(0,107,60,.1); }
.branch-icon   { font-size:1.3rem; margin-bottom:7px; }
.branch-name   { font-size:.87rem; font-weight:700; color:var(--fub-coal); margin-bottom:2px; font-family:'Cinzel',serif; }
.branch-region { font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fub-muted); }
.branch-detail { font-size:.74rem; color:var(--fub-muted); margin-top:5px; }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
.contact-card { background:var(--fub-off); border:1px solid var(--fub-border); border-radius:10px; padding:16px 14px; display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; transition:all .2s; }
.contact-card:hover { border-color:var(--fub-green); }
.cc-icon  { font-size:1.3rem; flex-shrink:0; }
.cc-label { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fub-muted); margin-bottom:3px; }
.cc-value { font-size:.85rem; font-weight:500; color:var(--fub-coal); }

/* ── CHARGE TABLE ── */
.charge-wrap { background:white; border:1px solid var(--fub-border); border-radius:12px; overflow:hidden; margin-bottom:22px; }
.charge-head { padding:14px 18px; background:var(--fub-off); border-bottom:1px solid var(--fub-border); }
.charge-head h3 { font-size:.87rem; font-weight:700; color:var(--fub-coal); font-family:'Cinzel',serif; }
.charge-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.charge-table th { background:var(--fub-green); color:white; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:11px 15px; text-align:left; }
.charge-table td { padding:10px 15px; border-bottom:1px solid var(--fub-border); color:var(--fub-coal); }
.charge-table tr:last-child td { border-bottom:none; }
.charge-table tr:nth-child(even) td { background:#f9faf8; }
.charge-amount { font-weight:700; color:var(--fub-green); }

/* ── SECURITY TIPS ── */
.sec-tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:30px; }
.sec-tip { background:white; border:1px solid var(--fub-border); border-radius:11px; padding:20px 18px; border-top:3px solid var(--fub-green); }
.sec-tip-icon  { font-size:1.5rem; margin-bottom:10px; }
.sec-tip-title { font-size:.88rem; font-weight:700; color:var(--fub-coal); margin-bottom:6px; font-family:'Cinzel',serif; }
.sec-tip-desc  { font-size:.77rem; color:var(--fub-muted); line-height:1.65; }

/* ── OPEN ACCOUNT ── */
.ao-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:start; }
.ao-steps { display:flex; flex-direction:column; gap:11px; margin-top:20px; }
.ao-step { display:flex; gap:12px; align-items:flex-start; padding:13px; background:white; border-radius:10px; border:1px solid var(--fub-border); }
.ao-num { width:30px; height:30px; border-radius:50%; background:var(--fub-green); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex-shrink:0; font-family:'Cinzel',serif; }
.ao-step-title { font-size:.84rem; font-weight:700; color:var(--fub-coal); font-family:'Cinzel',serif; }
.ao-step-desc  { font-size:.74rem; color:var(--fub-muted); margin-top:2px; }
.ao-form-wrap  { background:var(--fub-off); border:1px solid var(--fub-border); border-radius:13px; padding:32px; }
.form-divider  { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fub-green); padding:10px 0 5px; border-top:1px solid var(--fub-border); margin-top:4px; font-family:'Cinzel',serif; }

/* ── CAREERS ── */
.careers-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.why-item { display:flex; align-items:center; gap:12px; padding:13px; background:white; border-radius:10px; border:1px solid var(--fub-border); margin-bottom:11px; transition:all .2s; }
.why-item:hover { border-color:var(--fub-green); }
.why-icon  { font-size:1.3rem; }
.why-title { font-size:.84rem; font-weight:700; color:var(--fub-coal); font-family:'Cinzel',serif; }
.why-desc  { font-size:.74rem; color:var(--fub-muted); margin-top:2px; }

/* ── LEGAL ── */
.legal-content { max-width:760px; }
.legal-content h2 { font-size:1.05rem; font-weight:700; color:var(--fub-coal); margin:26px 0 11px; padding-top:14px; border-top:1px solid var(--fub-border); font-family:'Cinzel',serif; }
.legal-content h2:first-child { border-top:none; margin-top:0; padding-top:0; }
.legal-content p,.legal-content li { font-size:.87rem; color:var(--fub-muted); line-height:1.82; margin-bottom:10px; }
.legal-content ul { margin:7px 0 13px 18px; list-style:disc; }

/* ── ALERTS ── */
.alert { padding:14px 18px; border-radius:8px; margin-bottom:16px; font-size:.87rem; }
.alert-success { background:#eafaf1; border:1px solid #27ae60; color:#1e8449; }
.alert-error   { background:#fdecea; border:1px solid var(--fub-red); color:var(--fub-red); }
.alert-warning { background:#fef9ec; border:1px solid var(--fub-gold); color:#856404; }

/* ── PORTAL ── */
.portal-header { background:linear-gradient(135deg,var(--fub-green-dark),var(--fub-green)); padding:20px 5%; display:flex; align-items:center; justify-content:space-between; }
.portal-header h2 { color:white; font-size:1rem; font-family:'Cinzel',serif; }
.portal-user { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.8); font-size:.82rem; }
.portal-avatar { width:36px; height:36px; border-radius:50%; background:var(--fub-gold); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--fub-coal); font-size:.88rem; }
.portal-wrap { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 70px); }
.portal-sidebar { background:#f0f2ee; border-right:1px solid var(--fub-border); padding:24px 0; }
.portal-nav-link { display:flex; align-items:center; gap:10px; padding:11px 20px; font-size:.82rem; font-weight:500; color:var(--fub-muted); text-decoration:none; transition:all .15s; border-left:2px solid transparent; }
.portal-nav-link:hover,.portal-nav-link.active { color:var(--fub-green); background:rgba(0,107,60,.06); border-left-color:var(--fub-green); font-weight:700; }
.portal-content { padding:36px 40px; background:var(--fub-off); }
.portal-section { display:none; }
.portal-section.active { display:block; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
.kpi-card { background:white; border:1px solid var(--fub-border); border-radius:10px; padding:20px; }
.kpi-label { font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fub-muted); margin-bottom:7px; }
.kpi-value { font-size:1.6rem; font-weight:900; color:var(--fub-green); font-family:'Cinzel',serif; line-height:1; }
.kpi-sub   { font-size:.72rem; color:var(--fub-muted); margin-top:5px; }
.data-table { width:100%; border-collapse:collapse; background:white; border-radius:10px; overflow:hidden; font-size:.82rem; }
.data-table th { background:var(--fub-green); color:white; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:11px 14px; text-align:left; }
.data-table td { padding:11px 14px; border-bottom:1px solid var(--fub-border); color:var(--fub-coal); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(0,107,60,.03); }
.badge { display:inline-flex; padding:3px 9px; border-radius:100px; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.badge-green { background:#eafaf1; color:#1e8449; }
.badge-gold  { background:#fef9ec; color:#856404; }
.badge-red   { background:#fdecea; color:var(--fub-red); }
.badge-gray  { background:#f0f2ee; color:var(--fub-muted); }

/* ── ADMIN PORTAL ── */
.admin-wrap { display:flex; min-height:100vh; background:#f0f2ee; }
.admin-sidebar { width:220px; flex-shrink:0; background:var(--fub-coal); display:flex; flex-direction:column; }
.admin-sidebar-head { padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.admin-sidebar-brand { font-family:'Cinzel',serif; font-size:.82rem; font-weight:700; color:white; }
.admin-sidebar-sub   { font-size:.6rem; color:var(--fub-gold); letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }
.admin-nav-section { font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#3a423a; padding:14px 16px 4px; display:block; }
.admin-nav-link { display:flex; align-items:center; gap:9px; padding:9px 16px; font-size:.78rem; color:#6a726a; text-decoration:none; transition:all .15s; border-left:2px solid transparent; }
.admin-nav-link:hover,.admin-nav-link.active { color:white; background:rgba(0,107,60,.16); border-left-color:var(--fub-gold); }
.admin-main { flex:1; padding:32px; overflow-y:auto; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.admin-topbar h1 { font-size:1.2rem; color:var(--fub-coal); font-family:'Cinzel',serif; }
.admin-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.admin-kpi { background:white; border:1px solid var(--fub-border); border-radius:10px; padding:20px; border-top:3px solid var(--fub-green); }
.admin-kpi.gold { border-top-color:var(--fub-gold); }
.admin-kpi.red  { border-top-color:var(--fub-red); }
.admin-kpi.coal { border-top-color:var(--fub-coal); }
.admin-kpi-label { font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fub-muted); margin-bottom:8px; }
.admin-kpi-value { font-size:1.8rem; font-weight:900; color:var(--fub-green); font-family:'Cinzel',serif; line-height:1; }
.admin-kpi.gold .admin-kpi-value { color:#b8860b; }
.admin-kpi.red  .admin-kpi-value { color:var(--fub-red); }
.admin-kpi.coal .admin-kpi-value { color:var(--fub-coal); }
.admin-panel { background:white; border:1px solid var(--fub-border); border-radius:10px; padding:20px; margin-bottom:20px; }
.admin-panel h3 { font-size:.9rem; font-weight:700; color:var(--fub-coal); margin-bottom:16px; font-family:'Cinzel',serif; }
.admin-panel-section { display:none; }
.admin-panel-section.active { display:block; }

/* ── FOOTER ── */
.fub-footer { background:var(--fub-coal); padding:60px 5% 26px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:44px; }
.footer-tagline { font-size:.78rem; color:rgba(255,255,255,.38); line-height:1.75; margin:12px 0 16px; }
.footer-ci { display:flex; align-items:center; gap:6px; font-size:.76rem; color:rgba(255,255,255,.42); text-decoration:none; margin-bottom:6px; transition:color .15s; }
.footer-ci:hover { color:var(--fub-gold); }
.footer-col h4 { font-size:.76rem; font-weight:700; color:white; letter-spacing:.06em; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid rgba(201,162,39,.18); font-family:'Cinzel',serif; }
.footer-col li { margin-bottom:8px; }
.footer-col a { font-size:.77rem; color:rgba(255,255,255,.4); text-decoration:none; transition:color .15s; }
.footer-col a:hover { color:var(--fub-gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.footer-copy { font-size:.7rem; color:rgba(255,255,255,.25); }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { font-size:.7rem; color:rgba(255,255,255,.3); text-decoration:none; }
.footer-legal a:hover { color:var(--fub-gold); }

/* ── WHATSAPP FAB ── */
.wa-fab { position:fixed; bottom:24px; right:24px; z-index:9999; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(37,211,102,.4); text-decoration:none; transition:transform .2s; }
.wa-fab:hover { transform:scale(1.1); }
.wa-fab svg { width:28px; height:28px; fill:white; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .about-grid,.digital-grid,.ao-grid,.contact-grid,.careers-grid { grid-template-columns:1fr; }
  .about-visual { display:none; }
  .footer-grid  { grid-template-columns:1fr 1fr; }
  .form-row     { grid-template-columns:1fr; }
  .nav-menu     { display:none; }
  .hamburger    { display:flex; }
  .portal-wrap  { grid-template-columns:1fr; }
  .portal-sidebar { display:none; }
  .admin-sidebar  { display:none; }
  .admin-kpi-grid { grid-template-columns:1fr 1fr; }
  .login-card { margin-left:0; }
}
@media(max-width:600px){
  .stats-grid { flex-direction:column; }
  .stat-item  { border-right:none; border-bottom:1px solid rgba(255,255,255,.12); max-width:100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .trust-strip{ gap:18px; }
  .branches-grid { grid-template-columns:1fr 1fr; }
  .admin-kpi-grid { grid-template-columns:1fr; }
}