:root {
  --bg: #fdf5e6;         /* fondo principal */
  --panel: #ffffff;      /* header/footer */
  --accent: #BF9662;     /* naranja solar */
  --accent-2: #00FF00;   /* verde energía */
  --text: #1a1a1a;       /* texto principal */
  --muted: #555;         /* texto secundario */
  --stroke: #e5e7eb;     /* bordes */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Topbar ===== */
.topbar {
  background: #f9fafb;
  border-bottom: 1px solid var(--stroke);
  font-size: 14px;
  color: var(--muted);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 6px 18px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.topbar a { color: var(--text); text-decoration: none; }
.topbar a:hover { color: var(--accent); }

/* ===== Header ===== */
.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 12px 18px;
}

.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand img { height:40px; width:auto; display:block; border-radius:6px; }
.brand-name { font-weight:700; letter-spacing:.3px; }

/* Menú */
.main-nav { justify-self:center; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); margin:5px 0; }
.nav-list { display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.nav-link {
  text-decoration:none; color:var(--muted);
  padding:10px 14px; border-radius:8px;
  transition: all .2s;
}
.nav-link:hover { color:var(--accent); background:#f3f4f6; }
.nav-link.active { color:var(--accent); font-weight:600; }

/* Redes y login */
.header-actions { justify-self:end; display:flex; align-items:center; gap:12px; }
.social { display:flex; gap:10px; }
.ico {
  color: var(--muted); display:grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--stroke);
  background:#f9fafb;
  text-decoration:none; transition: all .2s;
}
.ico:hover { color: var(--accent); border-color: var(--accent); }

.btn-login {
  text-decoration:none; color:#fff;
  background: var(--accent);
  padding:10px 14px; border-radius:8px; font-weight:600;
  border:1px solid #e6a700; box-shadow: 0 2px 8px rgba(245,158,11,.3);
  transition: all .2s;
}
.btn-login:hover { background:#e69500; }

/* ===== Hero ===== */
.hero {
  position:relative; overflow:hidden; border-bottom:1px solid var(--stroke);
  background:#f9fafb;
}
.hero-bg {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.9)),
              url('../img/hero-solar.jpg') center/cover no-repeat;
  opacity:1;
}
.hero-inner {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:60px 18px 70px;
  text-align:left; color:var(--text);
}
.hero-badge {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--stroke); font-size:12px;
}
.hero-title {
  margin:12px 0 6px; font-size:clamp(28px, 4vw, 44px);
  line-height:1.2; font-weight:800;
}
.hero-text { max-width:760px; color:var(--muted); font-size:clamp(16px, 2.2vw, 18px); }
.hero-cta { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-cta {
  text-decoration:none; color:#fff;
  background: #BF9662; padding:12px 18px; border-radius:8px; font-weight:700;
  border:1px solid #BF9662; box-shadow: 0 3px 12px rgba(245,158,11,.3);
}
.btn-cta:hover { background:#BF9662; }
.btn-secondary {
  text-decoration:none; color:var(--text);
  padding:12px 16px; border-radius:8px; border:1px solid var(--stroke);
  background:#fff;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

.hero-stats { margin:18px 0 0; padding:0; list-style:none; display:flex; gap:20px; color:var(--muted); }
.hero-stats strong { color:var(--text); font-size:18px; }

/* ===== Footer ===== */
.site-footer {
  margin-top:40px; border-top:1px solid var(--stroke); background:#f9fafb;
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:20px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--muted);
}
.footer-nav { display:flex; gap:16px; }
.footer-nav a { color:var(--muted); text-decoration:none; }
.footer-nav a:hover { color:var(--accent); }



.user-dd { position: relative; }
.user-dd > summary { list-style: none; cursor: pointer; }
.user-dd > summary::-webkit-details-marker { display:none; }

.user-chip{
  display:flex; align-items:center; gap:8px;
  background:#f59e0b; color:#111; padding:6px 10px;
  border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  font-weight:600;
}
.user-chip .avatar{ background:#fff; border-radius:50%; padding:2px 6px; }
.user-menu{
  position:absolute; right:0; margin-top:8px; min-width:180px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); padding:8px; z-index:10;
}
.user-menu a{
  display:block; padding:8px 10px; border-radius:8px; color:#111; text-decoration:none;
}
.user-menu a:hover{ background:#f3f4f6; }



.slider {
  position: relative;
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

.slides {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  position: relative;
  display: none;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  display: block;
}



/* Responsive */
@media (max-width: 980px){
  .header-inner{ grid-template-columns: auto 1fr auto }
  .nav-toggle{ display:block }
  .nav-list{
    position:absolute; left:0; right:0; top:70px;
    background:#fff; border-bottom:1px solid var(--stroke);
    display:none; flex-direction:column; gap:6px; padding:10px 14px;
  }
  .nav-list.open{ display:flex }
  .nav-link{ padding:12px 10px; }
}