/* SAPSAS sitio estático - estilos base */
:root{
  --brand-primary:#27963c; /* verde principal */
  --brand-secondary:#80cc28; /* verde claro */
  --text-sapsas:#3c4937; /* tono del logo */
  --text:#3c4937;
  --bg:#ffffff;
  --muted:#f4f7f5;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55;
}
a{color:var(--brand-primary); text-decoration:none}
img{max-width:100%; height:auto;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* Header */
header{position:sticky; top:0; background:#fff; z-index:20}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:100px}
.brand-name{font-weight:600; color:var(--text-sapsas); letter-spacing:0.5px}
.nav a.btn{padding:8px 14px; border:1px solid var(--brand-primary); border-radius:8px}
.nav a.btn.whatsapp{background:var(--brand-primary); color:#fff; border-color:var(--brand-primary)}

/* HERO con degradado primario */
.hero{position:relative;min-height:68svh;display:grid;align-items:self-start;background:center/cover no-repeat url('../img/HERO.png');isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(to bottom, rgba(39,150,60,1) 0%, rgba(39,150,60,0.80) 24%, rgba(39,150,60,0.45) 56%, rgba(39,150,60,0.00) 100%)}
.hero>*{position:relative;z-index:2}
.hero.fade-soft::after{background:linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(39,150,60,0.35) 50%, rgba(39,150,60,0.00) 100%)}
.hero.fade-tall::after{background:linear-gradient(to bottom, rgba(39,150,60,1) 0%, rgba(39,150,60,0.90) 32%, rgba(39,150,60,0.50) 72%, rgba(39,150,60,0.00) 100%)}

/* Hero */
.hero{padding:40px 0 56px}
.hero .title{font-size:40px; margin:0 0 10px}
.hero .subtitle{font-size:18px}
.hero .cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; justify-content: center}
.btn-primary{background:var(--brand-primary); color:#fff; padding:12px 18px; border-radius:10px; display:inline-block}
.btn-secondary{background:#fff; color:var(--brand-primary); padding:12px 18px; border-radius:10px; border:1px solid var(--brand-primary)}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:28px; margin:0 0 24px; color:var(--text-sapsas)}
.lead{font-size:18px; color:#4b5a4d}
.grid{display:grid; gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .grid.cols-2{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .grid.cols-3{grid-template-columns:1fr}
}
.card{background:var(--muted); padding:18px; border-radius:12px; border:1px solid #e8eee9}
.card h3{margin:0 0 8px; font-size:18px}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi{background:#fff; border:1px solid #e8eee9; border-radius:12px; padding:18px; display:flex; gap:12px; align-items:center}
.kpi .icon{width:36px; height:36px; border-radius:8px; background:var(--muted); display:grid; place-items:center}
.kpi .value{font-weight:600; font-size:22px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}}

/* Clients */
.clients{align-items:center}
.clients .client{padding:12px; border:1px dashed #e2e8e2; border-radius:10px; background:#fff; text-align:center}
@media(max-width:900px){.clients{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.clients{grid-template-columns:repeat(2,1fr)}}
.logos{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:14px}
@media(max-width:900px){.logos{grid-template-columns:1fr 1fr}}
.logo{background:var(--card);border:1px dashed rgba(255,255,255,.2);border-radius:12px;height:72px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.note{color:var(--muted);margin-top:10px}


/* Contact */
.contact{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start}
.contact .item{flex:1 1 260px; background:var(--muted); padding:18px; border-radius:12px; border:1px solid #e8eee9}
.footer{padding:28px 0; color:#6b7a6d; font-size:14px}

mark.badge{background:rgba(39,150,60,0.12); color:var(--brand-primary); padding:2px 8px; border-radius:999px}