.smart-energy{
  margin-top:-1px;
  border-top:0;
}
.smart-energy::before{mask-image:none}
.smart-energy{
  --se-yellow:#ffc107;
  --se-cream:#f3f8f4;
  --se-mint:#9bcfc2;
  position:relative;
  overflow:hidden;
  color:#f5fbf9;
  background:
    radial-gradient(circle at 12% 24%,rgba(75,215,190,.10),transparent 24%),
    radial-gradient(circle at 84% 18%,rgba(255,193,7,.065),transparent 22%),
    radial-gradient(circle at 52% 92%,rgba(31,145,135,.08),transparent 30%),
    linear-gradient(135deg,#063d41 0%,#075451 52%,#064448 100%);
  isolation:isolate;
  padding:clamp(78px,9vw,132px) 0;
}
.smart-energy::before,
.smart-energy::after{content:"";position:absolute;inset:0;pointer-events:none}
.smart-energy::before{
  opacity:.72;
  background:
    radial-gradient(circle at 10% 18%,rgba(197,233,222,.28) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 34% 42%,rgba(197,233,222,.16) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 61% 23%,rgba(255,209,72,.24) 0 1.4px,transparent 2.4px),
    radial-gradient(circle at 79% 56%,rgba(197,233,222,.18) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 92% 32%,rgba(197,233,222,.18) 0 1.2px,transparent 2.2px),
    linear-gradient(28deg,transparent 0 49.75%,rgba(169,220,205,.055) 50%,transparent 50.25%) 0 0/280px 210px,
    linear-gradient(-32deg,transparent 0 49.75%,rgba(169,220,205,.045) 50%,transparent 50.25%) 0 0/340px 250px,
    linear-gradient(rgba(183,226,213,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(183,226,213,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,auto,280px 210px,340px 250px,54px 54px,54px 54px;
}
.smart-energy::after{
  inset:0;
  width:auto;height:auto;
  border-radius:0;
  background:
    radial-gradient(circle at 22% 38%,rgba(255,209,72,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 71% 70%,rgba(144,218,199,.15) 0 3px,transparent 4px),
    linear-gradient(90deg,transparent,rgba(255,255,255,.026),transparent);
  background-size:auto,auto,42% 100%;
  background-position:center;
  background-repeat:no-repeat;
  filter:none;
}
.smart-energy .wrap{position:relative;z-index:2}
.smart-energy-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);gap:clamp(42px,6vw,92px);align-items:center}
.smart-energy-copy{position:relative;z-index:4}
.smart-energy .eyebrow{color:#ffd148}
.smart-energy .eyebrow::before{background:#ffd148}
.smart-energy h2{max-width:12ch;color:#fff;font-size:clamp(2.4rem,5.2vw,4.8rem);line-height:.98;letter-spacing:-.045em}
.smart-energy h2 em{font-style:normal;color:#ffd148}
.smart-energy .smart-lede{max-width:56ch;margin-top:22px;color:#bad8d0;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.72}
.smart-energy-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.smart-energy .btn-line{border-color:rgba(230,246,240,.32);color:#f7fbfa;background:rgba(255,255,255,.03)}
.smart-energy .btn-line:hover{border-color:#ffd148;background:rgba(255,255,255,.06)}
.smart-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;max-width:640px}
.smart-feature{
  position:relative;overflow:hidden;
  min-height:108px;padding:18px 18px 17px;
  border:1px solid rgba(183,223,211,.14);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter:blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.smart-feature::after{content:"";position:absolute;inset:-40% auto -40% -55%;width:38%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .55s ease}
.smart-feature:hover{transform:translateY(-5px);border-color:rgba(255,209,72,.34);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 18px 36px rgba(0,0,0,.13)}
.smart-feature:hover::after{left:118%}
.smart-feature strong{display:block;color:#fff;font-family:var(--display);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.05}
.smart-feature span{display:block;margin-top:7px;color:#9fc4ba;font-size:.86rem;line-height:1.42}
.smart-feature i{position:absolute;right:15px;top:15px;width:8px;height:8px;border-radius:50%;background:#ffd148;box-shadow:0 0 0 6px rgba(255,209,72,.11)}

.smart-stage{position:relative;min-height:650px;perspective:1300px;transform-style:preserve-3d}
.smart-orbit{position:absolute;border:1px solid rgba(184,225,213,.13);border-radius:50%;pointer-events:none}
.smart-orbit.one{width:530px;height:530px;right:5%;top:8%;animation:orbit-spin 24s linear infinite}
.smart-orbit.two{width:380px;height:380px;right:15%;top:20%;border-style:dashed;animation:orbit-spin-reverse 18s linear infinite}
.smart-orbit::before,.smart-orbit::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd148;box-shadow:0 0 18px rgba(255,209,72,.7)}
.smart-orbit::before{left:17%;top:5%}.smart-orbit::after{right:8%;bottom:20%}
.smart-blueprint{position:absolute;inset:3% 1% 7% 6%;border:1px solid rgba(188,225,214,.08);border-radius:32px;background:linear-gradient(rgba(184,224,212,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(184,224,212,.045) 1px,transparent 1px);background-size:34px 34px;transform:rotate(-2deg);opacity:.9}
.smart-blueprint::before,.smart-blueprint::after{content:"";position:absolute;width:64px;height:64px;border-color:rgba(255,209,72,.35);border-style:solid}
.smart-blueprint::before{left:18px;top:18px;border-width:1px 0 0 1px}.smart-blueprint::after{right:18px;bottom:18px;border-width:0 1px 1px 0}
.smart-house-wrap{position:absolute;left:-2%;right:8%;bottom:0;z-index:2;transform-style:preserve-3d;filter:drop-shadow(0 36px 42px rgba(0,20,22,.36));transition:transform .35s ease-out}
.smart-house{display:block;width:100%;height:auto;transform-origin:50% 75%;animation:house-float 6s ease-in-out infinite}
.smart-house-glow{position:absolute;left:10%;right:4%;bottom:5%;height:26%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,209,72,.18),transparent 67%);filter:blur(16px);z-index:-1}
.smart-phones{position:absolute;width:clamp(210px,27vw,340px);right:-4%;top:1%;z-index:5;filter:drop-shadow(0 30px 30px rgba(0,20,22,.4));transform-origin:60% 55%;animation:phones-float 5.2s ease-in-out infinite;transition:transform .35s ease-out}
.smart-energy-line{position:absolute;z-index:3;inset:0;pointer-events:none}
.smart-energy-line path{fill:none;stroke:#ffd148;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:7 10;opacity:.7;animation:dash-flow 2.8s linear infinite}
.smart-energy-line circle{fill:#ffd148;filter:drop-shadow(0 0 7px rgba(255,209,72,.75))}
.smart-chip{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(199,231,221,.16);border-radius:999px;background:rgba(6,47,52,.74);backdrop-filter:blur(10px);color:#eaf7f3;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 14px 30px rgba(0,18,20,.18)}
.smart-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffd148;box-shadow:0 0 0 5px rgba(255,209,72,.12)}
.smart-chip.monitor{right:29%;top:14%}.smart-chip.tier{left:7%;top:29%}.smart-chip.life{left:2%;bottom:19%}.smart-chip.live{right:3%;bottom:28%}
.smart-kpi{position:absolute;z-index:7;right:7%;bottom:6%;width:178px;padding:17px 18px;border-radius:19px;border:1px solid rgba(203,232,223,.16);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));backdrop-filter:blur(14px);box-shadow:0 18px 34px rgba(0,19,22,.2)}
.smart-kpi small{display:block;color:#94bcb1;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.smart-kpi strong{display:block;margin-top:8px;color:#ffd148;font:900 2.15rem/1 var(--display)}.smart-kpi span{display:block;margin-top:6px;color:#d9ebe5;font-size:.78rem}
.smart-scan{position:absolute;z-index:4;left:13%;right:10%;bottom:21%;height:1px;background:linear-gradient(90deg,transparent,#ffd148,transparent);box-shadow:0 0 16px rgba(255,209,72,.5);animation:scan-up 5s ease-in-out infinite;opacity:.6}

.smart-energy:not(.is-visible) .smart-energy-copy>*{opacity:0;transform:translateY(22px)}
.smart-energy:not(.is-visible) .smart-stage{opacity:0;transform:translateX(42px) scale(.97)}
.smart-energy.is-visible .smart-energy-copy>*{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.smart-energy.is-visible .smart-energy-copy>*:nth-child(2){transition-delay:.08s}.smart-energy.is-visible .smart-energy-copy>*:nth-child(3){transition-delay:.16s}.smart-energy.is-visible .smart-energy-copy>*:nth-child(4){transition-delay:.24s}.smart-energy.is-visible .smart-energy-copy>*:nth-child(5){transition-delay:.32s}
.smart-energy.is-visible .smart-stage{opacity:1;transform:none;transition:opacity .9s .18s ease,transform .9s .18s cubic-bezier(.2,.7,.2,1)}

@keyframes house-float{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-8px) rotateX(1.2deg)}}
@keyframes phones-float{0%,100%{transform:translate3d(0,0,0) rotate(2deg)}50%{transform:translate3d(-5px,-13px,15px) rotate(-1deg)}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-spin-reverse{to{transform:rotate(-360deg)}}
@keyframes dash-flow{to{stroke-dashoffset:-34}}
@keyframes scan-up{0%,100%{transform:translateY(40px);opacity:.15}50%{transform:translateY(-150px);opacity:.7}}

@media(max-width:1050px){.smart-energy-grid{grid-template-columns:1fr;gap:40px}.smart-stage{min-height:590px;max-width:820px;width:100%;margin:0 auto}.smart-energy h2{max-width:15ch}.smart-feature-grid{max-width:none}.smart-phones{width:min(34vw,310px);right:4%}.smart-house-wrap{left:6%;right:6%}}
@media(max-width:680px){.smart-energy{padding:72px 0}.smart-feature-grid{grid-template-columns:1fr}.smart-stage{min-height:500px;margin-top:6px}.smart-blueprint{inset:4% 0 8% 0}.smart-house-wrap{left:-7%;right:-2%;bottom:3%}.smart-phones{width:46vw;right:-5%;top:5%}.smart-orbit.one{width:370px;height:370px;right:-16%;top:11%}.smart-orbit.two{width:270px;height:270px;right:-4%;top:18%}.smart-chip{font-size:.62rem;padding:8px 10px}.smart-chip.monitor{right:18%;top:6%}.smart-chip.tier{left:1%;top:23%}.smart-chip.life{left:0;bottom:17%}.smart-chip.live{right:0;bottom:24%}.smart-kpi{right:0;bottom:3%;width:145px;padding:13px 14px}.smart-kpi strong{font-size:1.7rem}.smart-scan{display:none}.smart-energy-actions .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.smart-energy *,.smart-energy *::before,.smart-energy *::after{animation:none!important;transition:none!important}.smart-energy:not(.is-visible) .smart-energy-copy>*,.smart-energy:not(.is-visible) .smart-stage{opacity:1;transform:none}}

/* v4: composición más limpia para que imágenes, chips y KPI respiren */
@media (min-width:1051px){
  .smart-stage{min-height:700px}
  .smart-house-wrap{
    left:0;
    right:auto;
    width:69%;
    bottom:1%;
  }
  .smart-phones{
    width:clamp(215px,22vw,285px);
    right:-1%;
    top:1%;
  }
  .smart-chip.monitor{left:14%;right:auto;top:8%}
  .smart-chip.tier{left:0;top:34%}
  .smart-chip.life{left:2%;bottom:11%}
  .smart-chip.live{right:0;bottom:34%}
  .smart-kpi{right:0;bottom:4%;width:190px}
  .smart-scan{left:8%;right:30%;bottom:25%}
}

@media (min-width:681px) and (max-width:1050px){
  .smart-stage{min-height:650px;max-width:840px}
  .smart-house-wrap{left:2%;right:auto;width:71%;bottom:1%}
  .smart-phones{width:min(31vw,265px);right:1%;top:1%}
  .smart-chip.monitor{left:13%;right:auto;top:7%}
  .smart-chip.tier{left:0;top:33%}
  .smart-chip.life{left:2%;bottom:12%}
  .smart-chip.live{right:0;bottom:35%}
  .smart-kpi{right:0;bottom:4%;width:180px}
  .smart-scan{left:8%;right:30%;bottom:26%}
}

@media (max-width:680px){
  .smart-stage{min-height:610px}
  .smart-house-wrap{left:-5%;right:auto;width:88%;bottom:11%}
  .smart-phones{width:42vw;right:-2%;top:2%}
  .smart-chip.monitor{left:0;right:auto;top:3%}
  .smart-chip.tier{left:0;top:28%}
  .smart-chip.life{left:0;bottom:24%}
  .smart-chip.live{right:0;bottom:30%}
  .smart-kpi{right:0;bottom:2%;width:150px}
}