/* =========================================================
   SOLARIK — portada (/)
   Se carga después de site.css
   ========================================================= */

/* ---------- Hero: ecosistema alrededor de la planta ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,920px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 2rem) 0 4rem;
  background:radial-gradient(50% 55% at 74% 48%,var(--glow),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.5rem;align-items:center}
.hero-title{font-size:clamp(2.5rem,5vw,3.9rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.hero-sub{margin-top:1.4rem;font-weight:300;font-size:1.08rem;max-width:29em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

.eco{position:relative;aspect-ratio:600/700;width:100%;max-width:600px;justify-self:end}
.eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-orbit{fill:none;stroke:var(--line)}
.eco-orbit-2{fill:none;stroke:#1f1f23}
.eco-spin{fill:none;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:2 22;opacity:.55;transform-origin:300px 350px;animation:spin 60s linear infinite}
.eco-spin-2{animation-duration:90s;animation-direction:reverse;opacity:.3}
@keyframes spin{to{transform:rotate(360deg)}}
.eco-link{fill:none;stroke:var(--acc);stroke-width:1.3;stroke-dasharray:4 6;animation:flow 1.6s linear infinite}
.eco-link-soon{stroke:var(--ink-3);animation-duration:3s}
@keyframes flow{to{stroke-dashoffset:-20}}
.eco-dot{fill:var(--acc)}
.eco-dot-soon{fill:var(--ink-3)}

.eco-core{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 0 0 14px rgba(255,138,43,.045),0 0 0 15px rgba(255,138,43,.2),0 40px 80px -30px rgba(0,0,0,.8)}
.eco-core img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.18)}}
.eco-core::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,10,12,.7))}
.eco-core span{position:absolute;left:0;right:0;bottom:12%;z-index:1;text-align:center;color:#fff;font:500 .68rem "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.eco-pulse{position:absolute;left:50%;top:50%;width:48%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid var(--acc);
  opacity:0;animation:ping 4s var(--ease) infinite;pointer-events:none}
@keyframes ping{0%{opacity:.45;scale:1}100%{opacity:0;scale:1.45}}

.node{position:absolute;width:min(40%,238px);background:rgba(28,28,32,.9);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  border-radius:16px;padding:1rem 1.1rem;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease);
  animation:float 7s ease-in-out infinite}
.node .node-t{color:var(--ink);font-weight:400;letter-spacing:-.02em;line-height:1.1;font-size:1.2rem;margin:.45rem 0 .25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.node .node-t .ic{width:16px;height:16px;color:var(--acc-text);transition:transform .3s var(--ease)}
.node p{font-weight:300;font-size:.82rem;line-height:1.5}
.node .lbl{margin:0}
a.node:hover{border-color:var(--acc);box-shadow:0 20px 40px -24px var(--acc-shadow)}
a.node:hover h3 .ic{transform:translateX(3px)}
.node-1{left:2%;top:4%}
.node-2{right:0;top:36%;animation-delay:-2.3s}
.node-3{left:6%;bottom:3%;border-style:dashed;background:rgba(22,22,25,.85);animation-delay:-4.6s}
.node-3 h3{color:var(--ink-2)}
.node-3 .lbl{color:var(--au)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---------- Áreas ---------- */
.areas{display:grid;gap:clamp(3.5rem,7vw,6rem)}
.area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.area:nth-child(even) .area-media{order:2}
.area-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:5/4;background:var(--surface)}
.area-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.area:hover .area-media img{transform:scale(1.04)}
.area-body h3{font-size:clamp(1.7rem,3vw,2.3rem);margin:1rem 0 .8rem;letter-spacing:-.025em}
.area-body>p{font-weight:300;max-width:30em;margin-bottom:1.5rem}
.area-body .checks{margin-bottom:1.8rem}

/* Desbroce: imagen oscura con acercamiento lento; las chispas las dibuja home.js en el canvas */
.area-media.is-cine{background:var(--blk-2)}
.area-media.is-cine img{object-position:22% 50%;animation:cine-zoom 16s ease-in-out infinite alternate}
@keyframes cine-zoom{from{scale:1.02}to{scale:1.14}}
.area-media.is-cine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,20,.3),transparent 40%,rgba(18,18,20,.45)),radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(18,18,20,.6))}
.area-media.is-cine canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.area-media.is-cine img{animation:none}}

/* vista de datos (Analytics) */
.area-media.is-data{background:var(--blk-2);container-type:inline-size}
.mock{width:100%;background:var(--blk-2);border:1px solid var(--blk-line);border-radius:14px;overflow:hidden;font:400 .78rem/1.4 "JetBrains Mono",monospace;color:#cfcfd4;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mock-h{display:flex;justify-content:space-between;gap:1rem;color:var(--blk-ink-3);padding:.75rem 1rem;border-bottom:1px solid var(--blk-line)}
.mock-h i{font-style:normal;color:var(--acc-text)}
.mrow{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:.5rem;padding:.62rem 1rem;border-bottom:1px dashed #2c2c31}
.mrow .ok{color:var(--acc-text)}
.mrow .bad{color:var(--bad);text-decoration:line-through;opacity:.85}
.mfoot{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;color:var(--blk-ink-3)}
.mfoot b{color:#fff;font-weight:500}
.area.is-visible .mrow,.area.is-visible .mfoot{animation:rise .6s var(--ease) both}
.area .mrow:nth-child(3){animation-delay:.15s}.area .mrow:nth-child(4){animation-delay:.3s}.area .mrow:nth-child(5){animation-delay:.45s}.area .mfoot{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Nosotros ---------- */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-media{border-radius:22px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/5}
.about-media img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.2rem;text-wrap:balance}
.about-body>p{font-weight:300;margin-bottom:1.6rem;max-width:34em}
.philo{border:1px solid var(--line-2);border-radius:16px;padding:1.2rem 1.3rem;margin-bottom:1.6rem;background:var(--surface)}
.philo q{display:block;color:var(--ink);font-size:1.35rem;letter-spacing:-.01em;margin:.3rem 0 .5rem;quotes:"“" "”"}
.philo p{font-weight:300;font-size:.93rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.stat{padding:1.4rem 1.2rem 0 0}
.stat b{display:block;color:var(--ink);font-weight:500;font-size:1.02rem;margin-bottom:.25rem}
.stat span{font-weight:300;font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .eco{justify-self:center;max-width:520px}
  .stats{grid-template-columns:1fr 1fr;row-gap:1rem}
}
@media (max-width:820px){
  .area,.about{grid-template-columns:1fr}
  .area:nth-child(even) .area-media{order:0}
}
@media (max-width:560px){
  .eco{aspect-ratio:auto;display:grid;gap:.8rem;max-width:none}
  .eco-lines,.eco-pulse{display:none}
  .eco-core{position:relative;left:auto;top:auto;translate:none;width:62%;justify-self:center;margin:1rem 0 1.4rem}
  .node{position:relative;inset:auto;width:100%;animation:none}
  .mrow{font-size:.7rem}
}

/* Título: la parte destacada en naranjo, como en Desbroce y Analytics */
.hero-title b{color:var(--acc)}

/* ---------- Franja de resultados ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof .wrap>div{padding:1.6rem 1.4rem 1.6rem 0}
.proof .wrap>div+div{border-left:1px solid var(--line);padding-left:1.4rem}
.proof b{display:block;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.proof b i{font-style:normal;color:var(--acc)}
.proof span{font-size:.86rem;font-weight:300;color:var(--ink-2)}
@media (max-width:820px){
  .proof .wrap{grid-template-columns:1fr 1fr}
  .proof .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .proof .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- Analytics: del sol a los resultados (home.js dibuja en el canvas) ---------- */
.area-media.is-data canvas{position:absolute;inset:0;width:100%;height:100%}
.flow-out{position:absolute;left:69%;translate:0 -50%;display:grid;gap:.1em}
.flow-out span{font:500 clamp(.5rem,1.9cqw,.66rem) "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--blk-ink-3);white-space:nowrap}
.flow-out b{font:400 clamp(.9rem,4.5cqw,1.6rem)/1.15 Poppins,sans-serif;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.flow-out em{font-style:normal;font-size:clamp(.6rem,2.5cqw,.85rem);color:#8bd1cf;white-space:nowrap}
.flow-ex{position:absolute;left:4%;bottom:3.5%;font:400 .62rem "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Red de neuronas detrás del hero (home.js) ---------- */
.neurons{position:absolute;inset:0;z-index:-1;pointer-events:none}