: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;
}

/* =====================================================
   ENERGY ORB — globo de plasma (acorde al logo)
   ===================================================== */
.plasma-orb{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: orbReveal 1300ms ease forwards 120ms;
}
.plasma-orb > *{
  grid-area: 1 / 1;
  place-self: center;
}

/* Halo exterior de energía */
.plasma-orb__glow{
  width: 128%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(120,175,255,0.38) 0%,
      rgba(58,120,235,0.22) 38%,
      rgba(40,80,200,0) 68%);
  filter: blur(26px);
  mix-blend-mode: screen;
  animation: glowPulse 6.5s ease-in-out infinite;
}

/* Bisel metálico cromado */
.plasma-orb__bezel{
  position: relative;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 6.5%;
  box-sizing: border-box;
  background:
    conic-gradient(from 115deg,
      #ffffff 0deg,
      #dbe4f7 25deg,
      #7e8db6 55deg,
      #2b3560 80deg,
      #12193c 95deg,
      #46527e 112deg,
      #c7d3ee 140deg,
      #ffffff 165deg,
      #e3e9f8 185deg,
      #8492bd 215deg,
      #232d54 245deg,
      #12193c 262deg,
      #5b678f 285deg,
      #cfd9f0 315deg,
      #ffffff 345deg,
      #ffffff 360deg);
  box-shadow:
    0 34px 80px rgba(4,10,30,0.62),
    0 12px 34px rgba(6,14,40,0.45),
    inset 0 2px 4px rgba(255,255,255,0.85),
    inset 0 -5px 10px rgba(0,0,0,0.45);
  animation: orbFloat 11s ease-in-out infinite 1.2s;
}

/* Cristal / interior del globo */
.plasma-orb__glass{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #0a1230;
  background:
    radial-gradient(circle at 50% 46%,
      #2f4d92 0%,
      #22397a 28%,
      #16285f 52%,
      #0d1c47 74%,
      #081334 100%);
  box-shadow:
    inset 0 0 40px rgba(2,6,22,0.7),
    inset 0 0 0 1px rgba(140,170,235,0.3),
    inset 0 6px 20px rgba(170,200,255,0.16);
}
/* Reflejo de cristal (domo) */
.plasma-orb__glass::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(58% 40% at 36% 20%, rgba(255,255,255,0.24), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Rayos de plasma (SVG) */
.plasma-orb__bolts{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-box: fill-box;
  transform-origin: center;
  animation: boltSpin 110s linear infinite;
}
.plasma-orb__bolts .bolts{
  transform-box: fill-box;
  transform-origin: center;
}
.plasma-orb__bolts .bolts--main{
  animation: boltFlickerMain 3.4s steps(1,end) infinite;
}
.plasma-orb__bolts .bolts--faint{
  opacity: 0.5;
  animation: boltFlickerFaint 5.2s steps(1,end) infinite;
}

/* Núcleo brillante con destello */
.plasma-orb__core{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #ffffff 0%,
      #ffffff 12%,
      #d9ecff 26%,
      rgba(150,200,255,0.6) 46%,
      rgba(90,160,255,0) 72%);
  box-shadow:
    0 0 30px 10px rgba(225,240,255,0.9),
    0 0 70px 24px rgba(110,175,255,0.55);
  animation: coreFlicker 3.4s ease-in-out infinite;
}
/* Destellos en cruz del núcleo */
.plasma-orb__core::before,
.plasma-orb__core::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(230,242,255,0.9) 50%,
    rgba(255,255,255,0) 100%);
  filter: blur(1px);
}
.plasma-orb__core::before{
  width: 230%;
  height: 6%;
  transform: translate(-50%, -50%);
}
.plasma-orb__core::after{
  width: 6%;
  height: 230%;
  transform: translate(-50%, -50%);
  background: linear-gradient(0deg,
    rgba(255,255,255,0) 0%,
    rgba(230,242,255,0.9) 50%,
    rgba(255,255,255,0) 100%);
}

/* ================= keyframes ================= */
@keyframes orbReveal{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes orbFloat{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-12px)}
}
@keyframes glowPulse{
  0%,100%{opacity:0.8; transform: scale(1)}
  50%{opacity:1; transform: scale(1.06)}
}
@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 boltSpin{
  to{transform: rotate(360deg)}
}
@keyframes coreFlicker{
  0%,100%{opacity:0.9; transform: translate(-50%,-50%) scale(1)}
  25%{opacity:1; transform: translate(-50%,-50%) scale(1.12)}
  50%{opacity:0.82; transform: translate(-50%,-50%) scale(0.98)}
  75%{opacity:1; transform: translate(-50%,-50%) scale(1.08)}
}
@keyframes boltFlickerMain{
  0%,100%{opacity:0.92}
  9%{opacity:0.58}
  14%{opacity:1}
  23%{opacity:0.72}
  31%{opacity:1}
  47%{opacity:0.82}
  58%{opacity:1}
  66%{opacity:0.6}
  74%{opacity:0.96}
  86%{opacity:0.74}
  93%{opacity:1}
}
@keyframes boltFlickerFaint{
  0%,100%{opacity:0.45}
  20%{opacity:0.28}
  38%{opacity:0.6}
  55%{opacity:0.34}
  72%{opacity:0.55}
  88%{opacity:0.3}
}

@media (prefers-reduced-motion: reduce){
  .plasma-orb,
  .plasma-orb__glow,
  .plasma-orb__bezel,
  .plasma-orb__bolts,
  .plasma-orb__bolts .bolts,
  .plasma-orb__core{
    animation: none !important;
  }
  .plasma-orb{ opacity: 1; }
}

@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);
  }
}