/* ===================== Bolivia Sol — base styles ===================== */
:root{
  --navy:#0b1b2b;
  --navy-light:#122a42;
  --orange:#f5a623;
  --orange-dark:#d98a0e;
  --bg:#ffffff;
  --bg-alt:#f4f7f9;
  --text:#1c2a35;
  --muted:#5b6b78;
  --border:#e2e8ec;
  --radius:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{line-height:1.25;margin:0 0 16px;}
h2{font-size:2rem;color:var(--navy);}
h3{font-size:1.25rem;color:var(--navy);}
p{margin:0 0 16px;color:var(--text);}
a{color:var(--orange-dark);}
ul{padding-left:20px;}

/* ---------- language toggle (default = Spanish) ---------- */
[data-lang="en"]{display:none;}
body.lang-en [data-lang="es"]{display:none;}
body.lang-en [data-lang="en"]{display:revert;}

/* ===================== Splash Screen ===================== */
#splash-screen{
  position:fixed;
  inset:0;
  background:#000;
  color:#fff;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 1s ease;
  opacity:1;
}
#splash-screen.fade-out{opacity:0;}
.splash-content{text-align:center;}

/* ---- sun: swoops in from off-screen, then settles into a slow spin ---- */
.splash-sun-wrap{
  margin-bottom:22px;
  display:flex;
  justify-content:center;
  overflow:visible;
}
.splash-sun{
  display:inline-flex;
  opacity:0;
  animation:sunSwoop 1.1s cubic-bezier(.22,1.1,.36,1) 0.15s forwards,
            sunSpin 10s linear 1.3s infinite;
  filter:drop-shadow(0 0 18px rgba(245,166,35,0.55));
}
@keyframes sunSwoop{
  0%{
    opacity:0;
    transform:translate(-60vw,-40vh) scale(0.3) rotate(-120deg);
  }
  65%{
    opacity:1;
  }
  85%{
    transform:translate(0,0) scale(1.12) rotate(8deg);
  }
  100%{
    opacity:1;
    transform:translate(0,0) scale(1) rotate(0deg);
  }
}
@keyframes sunSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ---- title & bilingual message: fade + rise in after the sun lands ---- */
.splash-reveal{
  opacity:0;
  transform:translateY(14px);
  animation:splashReveal 0.7s ease-out forwards;
}
.splash-title.splash-reveal{animation-delay:1.0s;}
.splash-message.splash-reveal{animation-delay:1.35s;}
@keyframes splashReveal{
  to{opacity:1;transform:translateY(0);}
}

.splash-title{
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:#fff;
}
.splash-message{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.splash-message .msg-en{
  font-size:1.15rem;
  font-weight:600;
  color:var(--orange);
  letter-spacing:0.03em;
}
.splash-message .msg-es{
  font-size:0.95rem;
  font-weight:400;
  font-style:italic;
  color:#cfe0ee;
}

/* ===================== Header ===================== */
.site-header{
  background:var(--navy);
  position:sticky;
  top:0;
  z-index:500;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px;
}
.logo{
  color:#fff;
  font-weight:700;
  font-size:1.2rem;
  text-decoration:none;
  white-space:nowrap;
}
.main-nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
}
.main-nav a{
  color:#cfe0ee;
  text-decoration:none;
  font-size:0.92rem;
}
.main-nav a:hover{color:var(--orange);}
.lang-toggle{
  background:var(--orange);
  color:var(--navy);
  border:none;
  border-radius:6px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}
.lang-toggle:hover{background:var(--orange-dark);}

/* ===================== Hero ===================== */
.hero{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-light) 100%);
  color:#fff;
  padding:72px 0 56px;
  text-align:center;
}
.hero h1{color:#fff;font-size:2.4rem;max-width:820px;margin:0 auto 18px;}
.hero-sub{color:#cfe0ee;max-width:680px;margin:0 auto 28px;}
.btn-primary{
  display:inline-block;
  background:var(--orange);
  color:var(--navy);
  font-weight:700;
  text-decoration:none;
  padding:14px 28px;
  border-radius:8px;
}
.btn-primary:hover{background:var(--orange-dark);}
.stat-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:40px;
}
.stat-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius);
  padding:18px 22px;
  min-width:170px;
}
.stat-card strong{display:block;font-size:1.6rem;color:var(--orange);}
.stat-card span{font-size:0.85rem;color:#cfe0ee;}

/* ===================== Sections ===================== */
.section{padding:64px 0;}
.section.alt{background:var(--bg-alt);}
.section h2{text-align:center;margin-bottom:28px;}
.section > .wrap > p{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}

.principle-list{max-width:760px;margin:0 auto;}
.principle-list li{margin-bottom:12px;}

/* ---------- steps grid ---------- */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:32px;
}
.step-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  position:relative;
}
.step-num{
  width:32px;height:32px;
  background:var(--orange);
  color:var(--navy);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  margin-bottom:10px;
}
.step-card h3{font-size:1.05rem;margin-bottom:6px;}
.step-card p{margin:0;color:var(--muted);font-size:0.92rem;}

/* ---------- diagram ---------- */
.diagram-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin:28px 0;
  overflow-x:auto;
}
.diagram-wrap svg{width:100%;height:auto;min-width:640px;}
.box{fill:#fff;stroke:var(--navy);stroke-width:2;}
.box-panel{fill:#fff7e6;stroke:var(--orange-dark);}
.box-controller{fill:#eaf3ff;stroke:var(--navy);}
.box-battery{fill:#eafaf0;stroke:#1f8a4c;}
.box-inverter{fill:#f3ecff;stroke:#6c4cc4;}
.box-panelboard{fill:#fff;stroke:var(--navy);}
.box-grid{fill:#f4f7f9;stroke:var(--muted);stroke-dasharray:5 3;}
.box-title{font-size:14px;font-weight:700;fill:var(--navy);text-anchor:middle;font-family:inherit;}
.box-sub{font-size:11px;fill:var(--muted);text-anchor:middle;font-family:inherit;}
.box-note{font-size:10px;fill:var(--muted);text-anchor:middle;font-style:italic;font-family:inherit;}
.arrow{stroke:var(--navy);stroke-width:2;marker-end:url(#arrowhead);}
.arrow.dashed{stroke-dasharray:5 3;}

.components-heading{text-align:center;margin-top:44px;}
.components-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.component-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.component-card h4{margin:0 0 8px;color:var(--navy);font-size:1rem;}
.component-card p{margin:0;color:var(--muted);font-size:0.9rem;}

/* ---------- compare ---------- */
.compare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.compare-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
}
.compare-card ul{margin:0;padding-left:18px;}
.compare-card li{margin-bottom:10px;color:var(--text);}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:12px;
  background:#fff;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  color:var(--navy);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"+ ";color:var(--orange-dark);font-weight:700;}
.faq-item[open] summary::before{content:"– ";}
.faq-item p{margin:12px 0 0;color:var(--muted);}

/* ---------- CTA ---------- */
.cta-section{text-align:center;background:var(--navy);color:#fff;}
.cta-section h2{color:#fff;}
.cta-section p{color:#cfe0ee;max-width:600px;margin:0 auto 24px;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy);
  color:#9fb4c6;
  padding:24px 0;
  text-align:center;
  font-size:0.82rem;
}
.site-footer p{color:inherit;margin:4px 0;}
.disclaimer{max-width:640px;margin:4px auto 0;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .header-row{flex-wrap:wrap;}
  .main-nav{order:3;width:100%;justify-content:center;padding-top:8px;}
  .hero h1{font-size:1.8rem;}
  .section{padding:44px 0;}
}