/* ============================================================
   ARAUZA INDUSTRIAL — landing.css · portada "Poder Eléctrico"
   ============================================================ */

/* ---- Rail de energía (progreso de scroll) ---- */
.energy-rail{
  position:fixed;left:0;top:0;bottom:0;width:3px;z-index:70;
  background:rgba(211,138,85,.08);pointer-events:none;
}
.energy-rail__fill{
  width:100%;height:0%;
  background:linear-gradient(180deg,#7C4A29,#B26A3C 60%,#F4A92E);
  box-shadow:0 0 12px rgba(244,169,46,.5);
  will-change:height;
}
@media(max-width:920px){.energy-rail{display:none}}

/* ---- HERO ---- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:clip;background:
    radial-gradient(1100px 520px at 78% -10%,rgba(178,106,60,.16),transparent 60%),
    radial-gradient(800px 400px at 12% 110%,rgba(244,169,46,.07),transparent 60%),
    var(--bg-0);
}
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__grid-lines{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(211,138,85,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(211,138,85,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(900px 640px at 50% 42%,#000 30%,transparent 78%);
  mask-image:radial-gradient(900px 640px at 50% 42%,#000 30%,transparent 78%);
}
.hero__inner{position:relative;z-index:1;padding-top:80px;padding-bottom:120px}
.hero__title{font-size:clamp(2.6rem,6.6vw,5rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1.02}
.hero__cursor{color:var(--gold);animation:blink 1.1s steps(1) infinite;font-weight:700}
@keyframes blink{50%{opacity:0}}
.hero__lead{max-width:560px;font-size:1.16rem;color:var(--ink-dim);margin-top:22px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hud{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:44px;padding:14px 20px;
  border:1px solid var(--line-soft);border-radius:12px;background:rgba(19,14,8,.55);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--muted);
  width:fit-content;max-width:100%;
}
.hud__item b{color:var(--copper-hot);font-weight:600;margin-left:6px}
.hud__item b.ok{color:var(--green-bright)}
.hud__item{display:inline-flex;align-items:center;gap:8px}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.scroll-cue:hover{color:var(--gold)}
.scroll-cue__arrow{animation:cue 1.8s ease-in-out infinite;color:var(--gold);font-size:.62rem}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:640px){.scroll-cue{display:none}}

/* ---- BUILD (escena unifilar) ---- */
.build{
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1b) 12%);
  border-top:1px solid var(--line-soft);
}
.build__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:clamp(24px,5vw,72px);align-items:start}
.build__steps{display:flex;flex-direction:column}
.bstep{
  min-height:72svh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 0;max-width:520px;
  opacity:.25;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s ease;
}
.bstep.is-active{opacity:1;transform:none}
.bstep__num{font-size:.72rem;letter-spacing:.3em;color:var(--copper-live);margin:0 0 10px}
.bstep h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800}
.bstep p{color:var(--muted)}
.bstep__spec{font-size:.74rem;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;border-top:1px solid var(--line-soft);padding-top:12px;margin-top:8px;width:fit-content}
.bstep__link{font-weight:700;font-size:.94rem}
.bstep__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.hl-red{color:#E77568}
.hl-gold{color:var(--gold)}
.hl-green{color:var(--green-bright)}

.build__diagram{position:sticky;top:calc(var(--header-h) + 18px);height:fit-content}
.diagram-box{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(36,30,24,.6),rgba(19,16,13,.9));
  box-shadow:var(--shadow-1);padding:18px 18px 12px;
  backdrop-filter:blur(6px);
}
.diagram-box__title{font-size:.68rem;letter-spacing:.2em;color:var(--muted);margin:0 0 8px;text-transform:uppercase}
#diagStatus{color:var(--copper-live)}
.diagram-box.live #diagStatus{color:var(--green-bright)}
.diagram-box__foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  border-top:1px solid var(--line-soft);padding-top:10px;margin-top:6px;
}
.diagram-box__led{width:9px;height:9px;border-radius:50%;background:#4a3526;transition:.4s}
.diagram-box.live .diagram-box__led{background:var(--green-bright);box-shadow:var(--glow-green);animation:pulse-dot 1.6s infinite}

/* SVG unifilar */
#unifilar{width:100%;height:auto;display:block}
#unifilar .cond{
  stroke:#4a3a2c;stroke-width:2.5;fill:none;stroke-linecap:round;
  transition:stroke .5s ease,filter .5s ease;
}
#unifilar .bus{stroke-width:3.5}
#unifilar .njoint{fill:#4a3a2c;transition:fill .5s ease,filter .5s ease}
#unifilar .nbox rect{
  fill:rgba(27,23,19,.85);stroke:#4a3a2c;stroke-width:1.5;
  transition:stroke .5s ease,filter .5s ease;
}
#unifilar .nlbl{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  fill:#8d7f72;text-anchor:middle;transition:fill .5s ease;
}
#unifilar .nsub{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
  fill:#6E6259;text-anchor:middle;transition:fill .5s ease;
}
#unifilar .gnd line{stroke:#4a3a2c;stroke-width:3;stroke-linecap:round;transition:stroke .5s ease,filter .5s ease}
#unifilar .gndlbl{text-anchor:middle}
#unifilar .sun__core{fill:var(--gold);opacity:0;transition:.6s ease}

/* nodo energizado (cobre) */
.dnode.is-on .cond{stroke:var(--copper-live);filter:drop-shadow(0 0 5px rgba(211,138,85,.7))}
.dnode.is-on .njoint{fill:var(--gold);filter:drop-shadow(0 0 6px rgba(244,169,46,.9))}
.dnode.is-on .nbox rect{stroke:var(--copper-live);filter:drop-shadow(0 0 8px rgba(211,138,85,.4))}
.dnode.is-on .nlbl{fill:var(--copper-hot)}
.dnode.is-on .nsub{fill:var(--muted)}
.dnode.is-on .gnd line{stroke:var(--copper-live);filter:drop-shadow(0 0 5px rgba(211,138,85,.6))}
.dnode.is-on .sun__core{opacity:1;r:7;animation:sunpulse 2.4s ease-in-out infinite}
@keyframes sunpulse{0%,100%{r:7}50%{r:9}}
#busMain.is-on{stroke:var(--copper-live);filter:drop-shadow(0 0 6px rgba(211,138,85,.75))}

/* estado final: EN LÍNEA (verde) */
.diagram-box.live #unifilar .cond,
.diagram-box.live #unifilar .gnd line{stroke:var(--green-bright);filter:drop-shadow(0 0 6px rgba(63,201,139,.7))}
.diagram-box.live #unifilar .njoint{fill:var(--green-bright);filter:drop-shadow(0 0 6px rgba(63,201,139,.9))}
.diagram-box.live #unifilar .nbox rect{stroke:var(--green-bright);filter:drop-shadow(0 0 9px rgba(46,158,107,.45))}
.diagram-box.live #unifilar .nlbl{fill:#CFF5E3}
.diagram-box.live #unifilar .sun__core{fill:var(--gold)}
.pulse{fill:var(--gold);opacity:0;filter:drop-shadow(0 0 6px rgba(244,169,46,.95))}
.diagram-box.flowing .pulse{opacity:1;animation:buspulse 2.8s linear infinite}
@keyframes buspulse{0%{cy:70;opacity:0}8%{opacity:1}88%{opacity:1}100%{cy:440;opacity:0}}

@media(max-width:920px){
  .build__grid{grid-template-columns:1fr}
  .build__diagram{position:sticky;top:var(--header-h);z-index:5;order:-1;margin:0 -8px}
  .diagram-box{padding:10px 12px 8px;border-radius:14px}
  #unifilar{max-height:34svh;margin:0 auto}
  .bstep{min-height:0;padding:56px 0;opacity:1;transform:none}
}

/* ---- Líneas ---- */
.section--lines{border-top:1px solid var(--line-soft)}
.lcard{display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.lcard:hover{color:var(--ink)}
.lcard p{flex:1}
.lcard__go{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-live);margin-top:16px}
.lcard:hover .lcard__go{color:var(--gold)}

/* ---- Tienda teaser ---- */
.store-teaser{
  background:
    radial-gradient(900px 400px at 90% 0%,rgba(244,169,46,.06),transparent 60%),
    var(--bg-1);
  border-top:1px solid var(--line-soft);
}
.store-teaser__head{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;margin-bottom:44px}
@media(max-width:920px){.store-teaser__head{grid-template-columns:1fr}}
.store-teaser__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.store-teaser__stats{display:flex;flex-direction:column;gap:14px}
.tstat{
  display:flex;align-items:baseline;gap:14px;padding:16px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2);
}
.tstat b{font-family:var(--font-d);font-size:2rem;font-weight:800;color:var(--copper-hot);min-width:74px}
.tstat span{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.store-teaser__note{font-size:.7rem;margin-top:18px}

.pstrip{
  display:grid;grid-auto-flow:column;grid-auto-columns:236px;gap:14px;
  overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x proximity;
}
.pstrip::-webkit-scrollbar{height:8px}
.pstrip::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:4px}
.pcard-mini{
  scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:8px;color:var(--ink);
  transition:transform .2s ease,border-color .2s ease;
}
.pcard-mini:hover{transform:translateY(-3px);border-color:var(--copper-live);color:var(--ink)}
.pcard-mini__img{
  height:120px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pcard-mini__img img{max-height:108px;object-fit:contain}
.pcard-mini__brand{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--copper-live);text-transform:uppercase}
.pcard-mini__name{font-size:.82rem;font-weight:600;line-height:1.35;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-mini__price{font-family:var(--font-d);font-weight:800;color:var(--gold)}
.pcard-mini__price.locked{color:var(--muted);font-size:.78rem;font-weight:600}

/* ---- Proceso ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:paso}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
.step{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
}
.step__n{
  display:inline-block;font-size:.72rem;letter-spacing:.22em;color:var(--gold);
  border:1px solid rgba(244,169,46,.3);border-radius:999px;padding:5px 12px;margin-bottom:14px;
}
.step h3{font-size:1.02rem}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* ---- Portales ---- */
.pcard{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.pcard:hover{color:var(--ink)}
.pcard .badge{width:fit-content}
.pcard p{flex:1}

/* ---- CTA final ---- */
.final-cta__box{
  position:relative;text-align:center;padding:clamp(44px,7vw,84px) 24px;
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:clip;
  background:
    radial-gradient(640px 300px at 50% -40%,rgba(244,169,46,.14),transparent 70%),
    radial-gradient(500px 260px at 50% 130%,rgba(178,106,60,.14),transparent 70%),
    var(--bg-2);
}
.final-cta__box .eyebrow{justify-content:center}
.final-cta__box .lead{max-width:520px;margin:0 auto 26px;color:var(--muted)}
.final-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.final-cta__mail{margin-top:26px;font-size:.78rem}

/* rendimiento: secciones bajo el pliegue */
.section--lines,.store-teaser,.process,.portals,.final-cta{content-visibility:auto;contain-intrinsic-size:auto 720px}