:root{
  --brand-bg:#252424;
  --brand-surface:#121216;
  --brand-accent:#c1121f; /* red accent */
  --brand-accent-2:#f5d06f; /* subtle gold accent if needed */
  --brand-text:#f5f7fa;
  --brand-muted:#a7adba;
  --card:#191a1f;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--brand-bg);color:var(--brand-text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;gap:.5rem;align-items:center;justify-content:center;
  background:var(--brand-accent);color:white;padding:.85rem 1.1rem;border-radius:999px;
  border:1px solid transparent;box-shadow:var(--shadow);transition:.2s transform ease,.2s box-shadow ease,.2s background ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn.outline{background:transparent;border-color:var(--brand-accent)}
.tag{display:inline-block;background:rgba(241,65,65,.15);border:1px solid rgba(241,65,65,.35);color:#ffdede;padding:.25rem .6rem;border-radius:999px;font-size:.8rem}

.nav{
  position:sticky;top:0;backdrop-filter:saturate(180%) blur(12px);
  /*background:rgba(18,18,22,.7);*/
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:20
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{display:flex;gap:.6rem;align-items:center}
.logo-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg, var(--brand-accent), #7c0a14)}
.logo-title{font-weight:800;letter-spacing:.4px}
.menu{display:flex;gap:1rem}
.menu a{padding:.5rem .8rem;border-radius:8px}
.menu a:hover{background:rgba(255,255,255,.06)}
.burger{display:none;background:transparent;border:0;color:var(--brand-text);font-size:1.4rem}

@media (max-width: 900px){
  .menu{display:none}
  .burger{display:block}
  .menu.mobile{display:flex;flex-direction:column;gap:.2rem;padding:.5rem 0}
  .menu.mobile a{padding:.9rem;border-radius:10px}
}

.hero{
  position:relative;isolation:isolate;
  padding:72px 0 48px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(60% 60% at 50% 40%, rgba(193,18,31,.25), transparent 60%);
  z-index:-1
}
.hero-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;
}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr;gap:1.2rem}}

.hero h1{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0 .6rem}
.hero p{color:var(--brand-muted);max-width:60ch}

.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem
}
@media (max-width: 900px){.card-grid{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,var(--card),#121317);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.25s transform ease
}
.card:hover{transform:translateY(-4px)}
.card .thumb{height:180px;background:#0d0f13 url('/img/filial-default.jpg') center/cover no-repeat}
.card .body{padding:1rem}
.card h3{margin:.2rem 0}
.meta{color:var(--brand-muted);font-size:.9rem}

.section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi .box{background:var(--card);padding:1rem;border-radius:var(--radius);text-align:center;border:1px solid rgba(255,255,255,.06)}
.kpi .num{font-size:1.5rem;font-weight:800}

.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
@media (max-width: 900px){.values{grid-template-columns:1fr 1fr}}
.value{
  background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem
}

.footer{padding:32px 0;color:var(--brand-muted);border-top:1px solid rgba(255,255,255,.06)}
.small{font-size:.9rem;color:var(--brand-muted)}