/* ===========================================================
   Ecotecnium — hoja de estilos compartida (index.html / solar.html)
   Paleta oficial: oliva oscuro + crema + acentos oro/musgo (logo)
   =========================================================== */

:root{
  --olive:#3F4611;
  --olive-2:#4B531A;
  --olive-3:#5A6321;
  --cream:#F4F1DD;
  --cream-2:#FBFAF1;
  --white:#FFFFFF;
  --ink:#33390F;
  --muted:#6E7256;
  --muted-light:#9A9C82;
  --gold:#F2C40D;
  --moss:#A7AA22;
  --border-cream:#E3DFC4;
  --border-olive:rgba(244,241,221,0.16);
  --shadow:0 12px 32px rgba(51,57,15,0.12);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Poppins","Inter",Arial,sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}

/* ---------- Utility sections ---------- */
.section{padding:88px 0;}
.section-cream{background:var(--cream);}
.section-olive{background:var(--olive);color:var(--cream);}
.section-olive h2, .section-olive h3, .section-olive h4{color:var(--cream);}
.section-olive p{color:#D9DCC0;}
.eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--moss);
  background:rgba(167,170,34,0.12);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:16px;
}
.section-olive .eyebrow{
  color:var(--gold);
  background:rgba(242,196,13,0.14);
}
.section-head{max-width:680px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:32px;margin-bottom:14px;}
.section-head p{color:var(--muted);font-size:16.5px;}
.section-olive .section-head p{color:#D9DCC0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  padding:14px 28px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  font-family:inherit;
}
.btn-gold{
  background:var(--gold);
  color:var(--olive);
  box-shadow:0 10px 24px rgba(242,196,13,0.28);
}
.btn-gold:hover{background:#e0b60c;}
.btn-outline-cream{
  background:transparent;
  border-color:rgba(244,241,221,0.5);
  color:var(--cream);
}
.btn-outline-cream:hover{border-color:var(--cream);}
.btn-outline-olive{
  background:transparent;
  border-color:var(--olive);
  color:var(--olive);
}
.btn-outline-olive:hover{background:var(--olive);color:var(--cream);}

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--cream-2);
  border-bottom:1px solid var(--border-cream);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:38px;width:auto;}
.brand-name{font-family:"Poppins",Arial,sans-serif;font-weight:700;font-size:19px;color:var(--ink);}
.brand-tag{display:block;font-family:"Inter",sans-serif;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:0.3px;}
nav.main-nav{display:flex;align-items:center;gap:30px;}
nav.main-nav a{
  font-size:14.5px;font-weight:600;color:var(--ink);
  padding:6px 0;border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--gold);}
.nav-cta{white-space:nowrap;}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--olive) 0%, var(--olive-2) 100%);
  color:var(--cream);
  padding:80px 0 96px;
  overflow:hidden;
}
.hero .container{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
}
.hero h1{font-size:44px;color:var(--cream);margin-bottom:18px;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{font-size:17.5px;color:#DEE1C6;max-width:520px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.hero-note{font-size:13px;color:#C7CBA9;}
.hero-visual{
  position:relative;
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  clip-path:polygon(6% 0%, 100% 0%, 100% 94%, 94% 100%, 0% 100%, 0% 6%);
  aspect-ratio:4/5;
  max-height:560px;
  margin:0 auto;
}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Stat strip ---------- */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-olive);
  margin-top:56px;padding-top:32px;
}
.stat-strip .stat{padding:0 12px;border-left:1px solid var(--border-olive);}
.stat-strip .stat:first-child{border-left:none;}
.stat-strip .num{font-family:"Poppins",sans-serif;font-weight:700;font-size:22px;color:var(--gold);}
.stat-strip .label{font-size:12.5px;color:#C7CBA9;margin-top:4px;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--cream-2);
  border:1px solid var(--border-cream);
  border-radius:14px;
  padding:30px;
}
.section-olive .card{
  background:rgba(244,241,221,0.06);
  border-color:var(--border-olive);
}

.hex-icon{
  width:56px;height:56px;
  background:var(--olive);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  flex-shrink:0;
}
.section-olive .hex-icon{background:var(--gold);}
.hex-icon svg{width:26px;height:26px;stroke:var(--cream);fill:none;stroke-width:2;}
.section-olive .hex-icon svg{stroke:var(--olive);}

.card h3{font-size:17.5px;margin-bottom:10px;}
.card p{font-size:14.5px;color:var(--muted);}
.section-olive .card p{color:#CDD0B2;}

/* photo cards (services with real photography) */
.photo-card{
  border-radius:14px;overflow:hidden;
  background:var(--cream-2);border:1px solid var(--border-cream);
  display:flex;flex-direction:column;
}
.section-olive .photo-card{background:rgba(244,241,221,0.06);border-color:var(--border-olive);}
.photo-card .ph{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--cream);}
.photo-card .ph img{width:100%;height:100%;object-fit:cover;}
.photo-card .body{padding:22px 24px 26px;}
.photo-card h3{font-size:17.5px;margin-bottom:8px;}
.photo-card p{font-size:14.5px;color:var(--muted);}
.section-olive .photo-card p{color:#CDD0B2;}
.photo-card .tag-list{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
.photo-card .tag-list span{
  font-size:11.5px;font-weight:600;color:var(--olive);
  background:rgba(63,70,17,0.08);
  padding:4px 9px;border-radius:100px;
}

/* ---------- Values strip ---------- */
.values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:8px;}
.value-item{text-align:center;}
.value-item .hex-icon{margin:0 auto 14px;}
.value-item h4{font-size:14.5px;color:var(--cream);}

/* ---------- Platforms strip ---------- */
.platforms{
  background:var(--olive-2);
  border-top:1px solid var(--border-olive);
  border-bottom:1px solid var(--border-olive);
  padding:34px 0;
}
.platforms .container{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;}
.platforms .label{
  font-size:12.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  color:#C7CBA9;margin-right:6px;
}
.platforms .pill{
  font-family:"Poppins",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--olive);background:var(--gold);
  padding:7px 15px;border-radius:100px;
}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.step .step-num{
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:var(--olive);
  font-family:"Poppins",sans-serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:15px;
}
.step h4{font-size:15.5px;margin-bottom:6px;}
.step p{font-size:13.5px;color:var(--muted);}
.section-olive .step p{color:#CDD0B2;}

/* ---------- CTA / contact ---------- */
.cta-panel{
  background:var(--cream-2);
  border:1px solid var(--border-cream);
  border-radius:18px;
  padding:52px;
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  box-shadow:var(--shadow);
}
.cta-copy h2{font-size:27px;margin-bottom:14px;}
.cta-copy p{color:var(--muted);font-size:15px;margin-bottom:18px;}
.cta-copy ul li{
  font-size:14px;color:var(--ink);padding:6px 0;
  display:flex;align-items:center;gap:10px;
}
.cta-copy ul li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold);flex-shrink:0;
}
.contact-card{
  border-top:1px solid var(--border-cream);
  margin-top:20px;padding-top:18px;
}
.contact-card p{font-size:13.5px;color:var(--muted);margin:3px 0;}
.contact-card strong{color:var(--ink);}

form.lead-form{display:flex;flex-direction:column;gap:14px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px;display:block;}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid #D8D4B8;border-radius:8px;
  font-size:14px;font-family:inherit;background:var(--white);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:var(--gold);}
.submit-btn{
  background:var(--olive);color:var(--cream);font-weight:700;font-size:15px;
  padding:14px;border:none;border-radius:8px;cursor:pointer;margin-top:4px;
}
.submit-btn:hover{background:#333910;}
.form-disclaimer{font-size:11.5px;color:var(--muted-light);text-align:center;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--olive);color:#C7CBA9;padding:56px 0 26px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-brand img{height:40px;margin-bottom:14px;}
.footer-brand p{font-size:13.5px;color:#B7BB98;max-width:280px;}
.footer-col h4{color:var(--cream);font-size:14px;margin-bottom:14px;}
.footer-col a, .footer-col p{display:block;font-size:13.5px;color:#B7BB98;margin-bottom:9px;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid var(--border-olive);
  padding-top:20px;font-size:12.5px;color:#8E9273;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{max-width:460px;}
  .grid-3, .grid-4{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:1fr 1fr;}
  .stat-strip{grid-template-columns:1fr 1fr;row-gap:20px;}
  .cta-panel{grid-template-columns:1fr;padding:32px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  nav.main-nav{display:none;}
}
@media (max-width:620px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .section{padding:64px 0;}
  .footer-top{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr 1fr;}
}