/* TREC INGENIERÍA S.A.S. - Industrial modern theme */
:root{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --brand:#0ea5e9; /* sky */
  --accent:#10b981; /* emerald */
  --ring:rgba(14,165,233,.35);
  --shadow: 0 10px 30px rgba(2,8,23,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  background: radial-gradient(1200px 800px at 80% -10%, rgba(16,185,129,0.18), transparent),
              radial-gradient(1000px 600px at 20% 0%, rgba(14,165,233,0.18), transparent),
              var(--bg);
  color: var(--text);
  line-height:1.6;
}

/* Layout */
.container{max-width:1200px;margin-inline:auto;padding:0 1.25rem}
.section{padding: 5rem 0}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns: 1fr; }
@media(min-width: 992px){ .grid-2{grid-template-columns: 1.2fr .8fr;} }

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,0.6);
  border-bottom: 1px solid rgba(148,163,184,.15);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding: .75rem 0;}
.nav a{color:var(--text); text-decoration:none; margin: 0 .75rem; font-weight:600}
.nav a:hover{color:var(--brand)}
.brand{display:flex; align-items:center; gap:.75rem}
.brand img{height:40px}
.menu-toggle{display:none}
@media(max-width: 860px){
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px;height:40px;
    border:1px solid rgba(148,163,184,.2); border-radius:10px; background:transparent; color:var(--text)}
  .links{display:none; position:absolute; top:64px; left:0; right:0; background:rgba(15,23,42,.98); padding:1rem; border-bottom:1px solid rgba(148,163,184,.15)}
  .links a{display:block; padding:.75rem 1rem; border-radius:8px}
  .links a:hover{background:rgba(148,163,184,.08)}
  .links.show{display:block}
}

/* Hero */
.hero{
  padding: 8rem 0 6rem;
  background:
    radial-gradient(650px 350px at 15% 20%, rgba(14,165,233,.25), transparent),
    radial-gradient(600px 400px at 85% 10%, rgba(16,185,129,.25), transparent);
}
.kpi{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem}
.kpi .card{background:linear-gradient(180deg, rgba(148,163,184,.07), rgba(148,163,184,.03));
  border:1px solid rgba(148,163,184,.15); padding:1rem 1.25rem; border-radius:16px; box-shadow:var(--shadow); min-width:180px}
.kpi .value{font-size:1.75rem; font-weight:800}
.kpi .label{color:var(--muted); font-size:.9rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color:white; border:none; padding:.9rem 1.25rem; border-radius:12px;
  text-decoration:none; font-weight:700; box-shadow: var(--shadow)
}
.btn.secondary{background:transparent; color:var(--text); border:1px solid rgba(148,163,184,.25)}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:3px solid var(--ring)}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(148,163,184,.07), rgba(148,163,184,.03));
  border:1px solid rgba(148,163,184,.15); border-radius:16px; padding:1.25rem; box-shadow:var(--shadow);
}
.card h3{margin-top:0}

/* Lists */
ul.clean{list-style:none; padding:0; margin:0}
ul.clean li{padding:.4rem 0; display:flex; gap:.6rem}
.badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; background: rgba(16,185,129,.15); color:#a7f3d0; font-weight:700; font-size:.75rem}

/* Projects */
.project{display:grid; gap:1rem; grid-template-columns: 1fr}
@media(min-width: 860px){ .project{grid-template-columns: .9fr 1.1fr}}
.project .meta{color:var(--muted); font-size:.95rem}
.project .title{font-weight:800; font-size:1.25rem; margin: .25rem 0}

/* Contact */
.contact{
  background: linear-gradient(180deg, rgba(14,165,233,.1), rgba(16,185,129,.08));
  border-top:1px solid rgba(148,163,184,.15); border-bottom:1px solid rgba(148,163,184,.15);
}
.form{
  display:grid; gap:1rem; grid-template-columns:1fr;
}
@media(min-width: 860px){ .form{grid-template-columns:1fr 1fr} }
.input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.6); color:var(--text)
}
textarea{grid-column: 1/-1; min-height:140px}
small.hint{color:var(--muted)}

/* Footer */
.footer{padding:2rem 0; color:var(--muted); font-size:.95rem}
.footer a{color:var(--text); text-decoration:none}
.footer a:hover{color:var(--brand)}

/* WhatsApp FAB */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: #25D366; color:white; text-decoration:none; font-size:28px; box-shadow:var(--shadow);
}