:root{
  --hero-bg: #050914;
  --orb-cyan: #3ae1ff;
  --orb-blue: #2a6ce7;
  --orb-indigo: #10265a;
  --orb-highlight: #8be7ff;
}

/* Anchor helpers (for fixed header) */
#about{ scroll-margin-top: 96px; }
#contact{ scroll-margin-top: 96px; }

.hero-energy{
  position:relative;
  display:flex;
  align-items:center;
  min-height: calc(100vh - var(--header-h));
  padding: 64px 0 96px;
  color:#eaf3ff;
  background:
    radial-gradient(120% 120% at 18% 20%, #0c1833 0%, rgba(5,9,20,0.9) 38%, var(--hero-bg) 58%),
    radial-gradient(80% 80% at 82% 80%, rgba(35,108,199,0.16), transparent 62%),
    #02060f;
  overflow:hidden;
  isolation:isolate;
}
.hero-energy::before{
  content:"";
  position:absolute;
  inset:-30% 5% -40% -10%;
  background:
    radial-gradient(closest-side at 36% 32%, rgba(58,225,255,0.35), transparent 62%),
    radial-gradient(closest-side at 72% 68%, rgba(43,108,231,0.25), transparent 65%),
    radial-gradient(closest-side at 48% 52%, rgba(80,140,255,0.12), transparent 70%);
  filter: blur(120px);
  opacity:0.9;
  z-index:1;
  animation: heroGlow 18s ease-in-out infinite;
}

.hero-energy__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items:center;
  gap: clamp(24px, 6vw, 72px);
}

.hero-energy__copy{
  max-width: 620px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.hero-energy__kicker{
  margin:0;
  color: rgba(234,243,255,0.78);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.hero-energy__title{
  margin:0;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height:1.02;
  letter-spacing:-1px;
  background:none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: rgba(248,252,255,0.96);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.32),
    0 10px 38px rgba(58,225,255,0.18),
    0 18px 70px rgba(43,108,231,0.12);
}
.hero-energy__lede{
  margin:6px 0 0;
  color: rgba(234,243,255,0.80);
  font-size: clamp(16px, 2vw, 18px);
  line-height:1.6;
  max-width: 70ch;
}
.hero-energy__actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* CTA único del hero: más largo sin afectar al resto de botones */
.hero-energy__cta{
  min-width: 220px;
  padding-inline: 26px;
}

/* Botones del hero: alto contraste sobre fondo oscuro */
.hero-energy .btn{
  border-radius: 0;
  border-color: rgba(234,243,255,0.30);
  color: rgba(248,252,255,0.92);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.hero-energy .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(234,243,255,0.50);
  background: rgba(255,255,255,0.10);
}
.hero-energy .btn:focus-visible{
  outline: 2px solid rgba(58,225,255,0.45);
  outline-offset: 3px;
}

.hero-energy .btn-primary{
  /* White corporate tone (avoid non-corporate blues) */
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.62);
  color: #0A144B;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.22),
    0 10px 34px rgba(0,0,0,0.16);
}
.hero-energy .btn-primary:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(255,255,255,0.78);
}

.hero-energy .btn-ghost{
  background: rgba(255,255,255,0.04);
  border-color: rgba(234,243,255,0.26);
  color: rgba(248,252,255,0.92);
}
.hero-energy .btn-ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(234,243,255,0.44);
}

.hero-energy__visual{
  position:relative;
  width: min(540px, 46vw);
  justify-self:end;
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
}

.hero-energy__orb{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.18), rgba(10,24,64,0.78)),
    radial-gradient(72% 72% at 45% 42%, rgba(124,186,255,0.18), transparent 68%),
    radial-gradient(90% 90% at 50% 58%, rgba(12,28,72,0.85), rgba(6,12,28,0.92));
  box-shadow:
    inset 0 0 0 6px rgba(18,46,102,0.75),
    inset 0 0 0 14px rgba(180,202,255,0.08),
    0 30px 120px rgba(0,175,255,0.35),
    0 -24px 80px rgba(46,109,230,0.22);
  overflow:hidden;
  transform: scale(0.78);
  opacity:0;
  animation: orbReveal 2200ms cubic-bezier(0.23,0.82,0.32,1) forwards,
             orbFloat 14s ease-in-out infinite 2.2s;
}
.hero-energy__orb::before{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background:
    radial-gradient(closest-side at 40% 36%, rgba(58,225,255,0.52), rgba(58,225,255,0) 62%),
    radial-gradient(closest-side at 70% 60%, rgba(43,108,231,0.32), rgba(43,108,231,0) 64%),
    radial-gradient(closest-side at 52% 52%, rgba(80,140,255,0.22), rgba(80,140,255,0) 68%);
  filter: blur(26px);
  mix-blend-mode: screen;
  opacity:0.9;
  animation: orbPulse 12s ease-in-out infinite 2.4s;
}
.hero-energy__orb::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background: radial-gradient(50% 50% at 60% 40%, rgba(255,255,255,0.24), rgba(255,255,255,0));
  mix-blend-mode: screen;
  filter: blur(12px);
  opacity:0.45;
  animation: orbPulse 14s ease-in-out infinite 2.8s, electricFlash 4800ms ease-in-out infinite 1.2s;
}

.hero-energy__ring{
  position:absolute;
  inset:14%;
  border-radius:50%;
  pointer-events:none;
  background:
    conic-gradient(from 110deg, rgba(58,225,255,0.0), rgba(58,225,255,0.65), rgba(46,109,230,0.0) 70deg, rgba(58,225,255,0.28) 180deg, rgba(58,225,255,0.0) 260deg, rgba(58,225,255,0.58));
  mask-image: radial-gradient(circle, transparent 60%, #000 62%, #000 75%, transparent 77%);
  mix-blend-mode: screen;
  filter: blur(0.8px);
  opacity:0;
  transform: scale(0.72);
  animation: ringGrow 2400ms ease forwards 260ms, ringDrift 16s ease-in-out infinite 2.6s;
}
.hero-energy__ring--outer{
  inset:6%;
  mask-image: radial-gradient(circle, transparent 66%, #000 68%, #000 82%, transparent 84%);
  animation-delay: 360ms;
}

.hero-energy__halo{
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(124,231,255,0.18), transparent 70%),
    radial-gradient(70% 70% at 48% 52%, rgba(58,225,255,0.12), transparent 72%),
    radial-gradient(80% 80% at 52% 48%, rgba(46,109,230,0.08), transparent 74%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity:0;
  animation: haloReveal 2000ms ease forwards 420ms, haloPulse 9s ease-in-out infinite 2.4s;
}

.hero-energy__electric{
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:
    conic-gradient(from 40deg,
      rgba(255,255,255,0.08) 0deg,
      rgba(255,255,255,0.0) 10deg,
      rgba(124,231,255,0.38) 14deg,
      rgba(255,255,255,0.0) 24deg,
      rgba(255,255,255,0.22) 28deg,
      rgba(255,255,255,0.0) 40deg,
      rgba(124,231,255,0.46) 44deg,
      rgba(255,255,255,0.0) 56deg,
      rgba(255,255,255,0.18) 62deg,
      rgba(255,255,255,0.0) 76deg,
      rgba(124,231,255,0.4) 82deg,
      rgba(255,255,255,0.0) 100deg,
      rgba(255,255,255,0.12) 110deg,
      rgba(255,255,255,0.0) 126deg,
      rgba(124,231,255,0.32) 132deg,
      rgba(255,255,255,0.0) 150deg,
      rgba(255,255,255,0.18) 158deg,
      rgba(255,255,255,0.0) 176deg,
      rgba(124,231,255,0.44) 182deg,
      rgba(255,255,255,0.0) 202deg,
      rgba(255,255,255,0.16) 212deg,
      rgba(255,255,255,0.0) 230deg,
      rgba(124,231,255,0.36) 236deg,
      rgba(255,255,255,0.0) 256deg,
      rgba(255,255,255,0.14) 268deg,
      rgba(255,255,255,0.0) 286deg,
      rgba(124,231,255,0.38) 294deg,
      rgba(255,255,255,0.0) 314deg,
      rgba(255,255,255,0.12) 320deg,
      rgba(255,255,255,0.0) 338deg,
      rgba(124,231,255,0.34) 346deg,
      rgba(255,255,255,0.0) 360deg);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity:0;
  mask-image: radial-gradient(circle at 50% 50%, #000 10%, #000 82%, transparent 86%);
  animation: electricSpin 22s linear infinite, electricFlash 3600ms ease-in-out infinite 1.4s, electricReveal 1800ms ease forwards 520ms;
}

.hero-energy__core{
  position:absolute;
  inset:26%;
  border-radius:50%;
  background:
    radial-gradient(closest-side at 52% 48%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 52%),
    radial-gradient(70% 70% at 50% 50%, rgba(124,231,255,0.22), transparent 70%);
  box-shadow:
    0 0 24px rgba(255,255,255,0.55),
    0 0 70px rgba(124,231,255,0.35),
    0 0 120px rgba(58,225,255,0.25);
  mix-blend-mode: screen;
  opacity:0;
  animation: corePulse 3000ms ease-in-out infinite 1.8s, orbReveal 2200ms cubic-bezier(0.23,0.82,0.32,1) forwards 420ms;
}

.hero-energy__mesh{
  position:absolute;
  inset:12%;
  display:none;
}

@keyframes orbReveal{
  0%{opacity:0;transform:scale(0.78);filter: blur(12px)}
  55%{opacity:1;filter: blur(2px)}
  100%{opacity:1;transform:scale(1);filter: blur(0)}
}
@keyframes orbFloat{
  0%{transform: translateY(0)}
  50%{transform: translateY(-10px)}
  100%{transform: translateY(0)}
}
@keyframes orbPulse{
  0%,100%{transform: scale(1);opacity:0.9}
  50%{transform: scale(1.04);opacity:1}
}
@keyframes heroGlow{
  0%{transform: translate3d(-2%,0,0) scale(1)}
  50%{transform: translate3d(3%,4%,0) scale(1.05)}
  100%{transform: translate3d(-2%,0,0) scale(1)}
}
@keyframes ringGrow{
  0%{opacity:0;transform:scale(0.72) rotate(-18deg);filter: blur(10px)}
  60%{opacity:0.95;filter: blur(2px)}
  100%{opacity:0.9;transform:scale(1) rotate(6deg);filter: blur(0)}
}
@keyframes ringDrift{
  0%{transform: scale(1) rotate(0deg)}
  50%{transform: scale(1.02) rotate(14deg)}
  100%{transform: scale(1) rotate(0deg)}
}
@keyframes electricSpin{
  to{transform: rotate(360deg)}
}
@keyframes electricFlash{
  0%,100%{opacity:0.18}
  18%{opacity:0.65}
  34%{opacity:0.32}
  52%{opacity:0.82}
  70%{opacity:0.28}
  84%{opacity:0.72}
}
@keyframes electricReveal{
  0%{opacity:0;filter: blur(12px);transform: scale(0.9)}
  60%{opacity:0.78;filter: blur(2px)}
  100%{opacity:0.62;filter: blur(0);transform: scale(1)}
}
@keyframes corePulse{
  0%,100%{transform:scale(1);opacity:0.65}
  50%{transform:scale(1.08);opacity:1}
}
@keyframes haloReveal{
  0%{opacity:0;filter: blur(14px);transform: scale(0.9)}
  60%{opacity:0.9;filter: blur(4px)}
  100%{opacity:0.7;filter: blur(0);transform: scale(1)}
}
@keyframes haloPulse{
  0%,100%{opacity:0.7;transform: scale(1)}
  50%{opacity:0.95;transform: scale(1.04)}
}

@media (max-width: 980px){
  .hero-energy{
    padding: 36px 0 72px;
  }
  .hero-energy__grid{
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(18px, 4vw, 44px);
  }
  .hero-energy__visual{
    justify-self:end;
    width: min(460px, 44vw);
    order: 0;
  }
  .hero-energy__copy{
    text-align:left;
    align-items:flex-start;
  }
  .hero-energy__actions{
    justify-content:flex-start;
  }
}

/* Modo “texto centrado respecto al orbe” (móvil): copy encima del orbe */
@media (max-width: 860px){
  .hero-energy__grid{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
  }

  .hero-energy__visual{
    grid-column: 1;
    grid-row: 1;
    order: 0;
    justify-self: center;
    z-index: 1;
    width: min(620px, 92vw);
  }

  .hero-energy__copy{
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
    max-width: min(680px, 92vw);
    padding: 22px 18px;
    text-align: center;
    align-items: center;
  }

  .hero-energy__copy::before{
    content:"";
    position:absolute;
    inset: -14px -18px;
    border-radius: 999px;
    background:
      radial-gradient(closest-side at 50% 50%, rgba(2,6,15,0.46), rgba(2,6,15,0.0) 72%);
    filter: blur(14px);
    z-index: -1;
  }

  .hero-energy__lede{
    max-width: 58ch;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
  }
}
@media (max-width: 600px){
  .hero-energy{
    padding: 24px 0 60px;
  }
  .hero-energy__title{
    font-size: clamp(32px, 8vw, 52px);
  }
  .hero-energy__visual{
    width: min(460px, 82vw);
  }
}