/* ============================================================
   GreEnergy — Sistema de diseño del sitio web
   Paleta y tipografía tomadas del Manual de Marca v1.0 (ago. 2026)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Colores del logo */
  --logo-green: #4FAE3E;
  --eco-green:  #A7DD87;
  --mint:       #EAF7E2;
  --night:      #17301A;

  /* Colores institucionales (materiales / catálogo) */
  --forest:      #1F7A3D;
  --forest-dark: #145C2C;
  --gold:        #D9A441;
  --gold-deep:   #B9821F;

  /* Neutrales */
  --ink:     #16211a;
  --muted:   #5b6b5e;
  --line:    #dfe6dc;
  --surface: #ffffff;
  --page:    #f7f9f5;

  /* Tipografía */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-data: 'Space Mono', 'Courier New', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 4px rgba(20,40,25,.05), 0 10px 30px -14px rgba(20,40,25,.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing:-.01em; }
.eyebrow{
  font-family: var(--font-data); font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color: var(--forest); font-weight:700;
}
.data, .price, .kw{ font-family: var(--font-data); }

.wrap{ max-width: 1120px; margin:0 auto; padding: 0 24px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:700; font-size:14.5px;
  padding: 13px 24px; border-radius: 999px; border: none; cursor:pointer;
  text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--gold); color: var(--night); box-shadow: 0 8px 20px -8px rgba(217,164,65,.55); }
.btn-primary:hover{ background:#e6b355; }
.btn-outline{ background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-outline:hover{ background: rgba(255,255,255,.1); border-color:#fff; }
.btn-forest{ background: var(--forest); color:#fff; }
.btn-forest:hover{ background: var(--forest-dark); }

/* ---------- Header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; max-width:1120px; margin:0 auto; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.brand span{ font-family: var(--font-display); font-weight:800; font-size:18px; letter-spacing:.01em; }
.brand svg{ display:block; flex-shrink:0; }

nav.main-nav{ display:flex; align-items:center; gap:2px; }
nav.main-nav a{
  color: rgba(255,255,255,.78); text-decoration:none; font-size:14px; font-weight:600;
  padding: 9px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
nav.main-nav a:hover{ background: rgba(255,255,255,.08); color:#fff; }
nav.main-nav a.active{ background: var(--eco-green); color: var(--night); }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.menu-toggle{ display:none; background:none; border:none; color:#fff; padding:6px; cursor:pointer; }

@media (max-width: 860px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background: var(--night);
    flex-direction:column; align-items:stretch; padding: 8px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display:none;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:12px 14px; }
  .menu-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------- Footer ---------- */
footer.site{ background: var(--night); color: rgba(255,255,255,.75); padding: 56px 24px 28px; margin-top: 90px; }
footer.site .foot-grid{
  max-width:1120px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1);
}
footer.site h4{ color:#fff; font-size:14px; margin-bottom:14px; }
footer.site .foot-brand p{ font-size:14px; line-height:1.6; max-width:320px; color: rgba(255,255,255,.6); }
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer.site ul a{ text-decoration:none; color: rgba(255,255,255,.65); font-size:14px; }
footer.site ul a:hover{ color: var(--eco-green); }
footer.site .tagline{ font-family: var(--font-display); font-weight:700; color: var(--eco-green); font-size:15px; margin-bottom:10px; }
.foot-bottom{
  max-width:1120px; margin:20px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color: rgba(255,255,255,.4);
}
@media (max-width:720px){
  footer.site .foot-grid{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- Section helpers ---------- */
.section{ padding: 76px 0; }
.section-head{ max-width: 620px; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(24px,3vw,32px); color: var(--forest-dark); margin: 10px 0 10px; }
.section-head p{ color: var(--muted); font-size:15.5px; margin:0; }
.section-alt{ background: var(--mint); }
.section-dark{ background: var(--night); color: rgba(255,255,255,.85); }
.section-dark .section-head h2{ color:#fff; }
.section-dark .section-head p{ color: rgba(255,255,255,.65); }
.section-dark .eyebrow{ color: var(--eco-green); }

/* ---------- Cards & grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
@media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}

.badge{
  display:inline-flex; align-items:center; font-family: var(--font-data); font-size:12px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:999px; padding:6px 13px;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.stack{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:10px; }