/* ==========================================================
   HERO IMAGE V9 - Holograma Erick Islas Tech
   Cambia solo la ruta del IMG en cada HTML:
   src="../assets/images/especiales/hero-servicios.png"
   ========================================================== */
.hero-image-panel{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  min-height:clamp(250px, 32vw, 440px);
  overflow:hidden;
  border-radius:32px;
  isolation:isolate;
  perspective:1200px;
}

.hero-image-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(57,255,20,.20), transparent 34%),
    linear-gradient(rgba(57,255,20,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
  background-size:auto, 32px 32px, 32px 32px;
  opacity:.55;
  animation:eitHeroGridDrift 12s linear infinite;
  pointer-events:none;
}

.hero-image-panel::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:2;
  background:
    linear-gradient(115deg,
      transparent 0 42%,
      rgba(255,255,255,.10) 47%,
      rgba(57,255,20,.42) 50%,
      rgba(255,255,255,.12) 53%,
      transparent 58% 100%);
  transform:translateX(-72%) rotate(10deg);
  opacity:.0;
  animation:eitHeroScanBeam 5.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}

.hero-services-image{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:translateZ(0) scale(.96);
  filter:
    drop-shadow(0 0 18px rgba(57,255,20,.40))
    drop-shadow(0 0 48px rgba(57,255,20,.18));
  animation:
    eitHeroMaterialize .9s ease both,
    eitHeroFloatV9 5.4s ease-in-out infinite,
    eitHeroPulseV9 3.8s ease-in-out infinite;
  transition:
    transform .65s cubic-bezier(.16,1,.3,1),
    filter .65s ease;
  will-change:transform, filter;
}

.hero-image-panel:hover .hero-services-image{
  transform:translateZ(42px) scale(1.045) rotateX(2deg) rotateY(-3deg);
  filter:
    drop-shadow(0 0 26px rgba(57,255,20,.70))
    drop-shadow(0 0 72px rgba(57,255,20,.32))
    saturate(1.14)
    contrast(1.06);
}

.hero-image-panel .hero-services-image::selection{
  background:transparent;
}

.hero-image-panel:hover::before{
  opacity:.8;
}

@keyframes eitHeroMaterialize{
  from{
    opacity:0;
    transform:translateY(18px) scale(.90);
    filter:blur(6px) drop-shadow(0 0 0 rgba(57,255,20,0));
  }
  to{
    opacity:1;
    transform:translateY(0) scale(.96);
  }
}

@keyframes eitHeroFloatV9{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -12px; }
}

@keyframes eitHeroPulseV9{
  0%,100%{ opacity:.96; }
  50%{ opacity:1; }
}

@keyframes eitHeroGridDrift{
  to{ background-position:0 0, 0 320px, 320px 0; }
}

@keyframes eitHeroScanBeam{
  0%,58%{ opacity:0; transform:translateX(-75%) rotate(10deg); }
  66%{ opacity:.85; }
  78%,100%{ opacity:0; transform:translateX(75%) rotate(10deg); }
}

/* Pequeñas partículas holográficas sin elementos extra */
.services-hud.hero-image-panel{
  box-shadow:
    0 0 40px rgba(57,255,20,.13),
    inset 0 0 36px rgba(57,255,20,.07);
}

@media (max-width: 700px){
  .hero-image-panel{
    min-height:260px;
  }
  .hero-services-image{
    transform:scale(.98);
  }
}

/* Sprint visual: identidad y elementos gráficos para inicio */
.site-logo,
.brand,
.logo,
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.site-logo::before,
.brand::before,
.logo::before,
.nav-brand::before {
  content: "⚡";
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(57, 255, 20, .55);
  border-radius: 14px;
  color: #39ff14;
  background:
    radial-gradient(circle at 30% 20%, rgba(57,255,20,.35), transparent 45%),
    linear-gradient(135deg, rgba(57,255,20,.12), rgba(0,0,0,.35));
  box-shadow: 0 0 22px rgba(57, 255, 20, .28);
  animation: eitPulse 2.8s ease-in-out infinite;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 18% 22%, rgba(57,255,20,.18), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(0,255,170,.12), transparent 22%),
    linear-gradient(90deg, transparent 0 48%, rgba(57,255,20,.08) 49% 51%, transparent 52% 100%);
  opacity: .9;
  pointer-events: none;
}

.hero-content,
.hero-panel {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #c9ffd0;
  font-weight: 700;
}

.hero-visual {
  position: relative;
  z-index: 1;
  min-height: 320px;
  display: grid;
  place-items: center;
}

.tech-orb {
  width: min(360px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(57,255,20,.5);
  background:
    radial-gradient(circle at center, rgba(57,255,20,.18), transparent 34%),
    radial-gradient(circle at center, rgba(0,0,0,.88), rgba(0,0,0,.62) 62%, transparent 64%),
    conic-gradient(from 40deg, rgba(57,255,20,.9), transparent 18%, rgba(255,255,255,.55), transparent 45%, rgba(57,255,20,.75), transparent 75%, rgba(57,255,20,.9));
  box-shadow:
    0 0 35px rgba(57,255,20,.25),
    inset 0 0 35px rgba(57,255,20,.12);
  animation: eitFloat 5s ease-in-out infinite;
}

.tech-orb::before {
  content: "🖥️";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(76px, 10vw, 118px);
  filter: drop-shadow(0 0 22px rgba(57,255,20,.45));
}

.tech-orb::after {
  content: "⚙️   💾   🔐   🚀";
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 85%;
  text-align: center;
  letter-spacing: 10px;
  font-size: 25px;
  opacity: .95;
}

.circuit-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39ff14, transparent);
  box-shadow: 0 0 14px rgba(57,255,20,.8);
  opacity: .8;
  animation: eitScan 2.8s linear infinite;
}

.circuit-line:nth-child(1) { width: 58%; top: 30%; left: -10%; }
.circuit-line:nth-child(2) { width: 48%; top: 52%; right: -8%; animation-delay: .6s; }
.circuit-line:nth-child(3) { width: 34%; top: 70%; left: 5%; animation-delay: 1.1s; }

.cards-grid .card {
  position: relative;
  overflow: hidden;
}

.cards-grid .card::before {
  display: block;
  margin-bottom: 14px;
  font-size: 34px;
  filter: drop-shadow(0 0 14px rgba(57,255,20,.35));
}

.cards-grid .card:nth-child(1)::before { content: "🎧"; }
.cards-grid .card:nth-child(2)::before { content: "📰"; }
.cards-grid .card:nth-child(3)::before { content: "🛠️"; }
.cards-grid .card:nth-child(4)::before { content: "💻"; }

.cards-grid .card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,.18), transparent 70%);
  pointer-events: none;
}

.glow-box li {
  list-style: none;
  margin: 10px 0;
}

.glow-box li::before {
  content: "✅";
  margin-right: 10px;
}


/* Ajuste visual: hero de ancho completo para evitar cortes laterales */
html, body {
  overflow-x: hidden;
}

main#contenido {
  overflow-x: hidden;
}

.hero {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  padding-left: max(24px, calc((100vw - 1420px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1420px) / 2)) !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,40,15,.98) 12%, rgba(0,64,22,.92) 50%, rgba(0,40,15,.98) 88%, rgba(0,0,0,.96) 100%),
    radial-gradient(circle at 75% 42%, rgba(57,255,20,.20), transparent 38%);
}

.hero::before {
  inset: 0 !important;
}

@media (max-width: 860px) {
  .hero {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@keyframes eitPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(57,255,20,.25); }
  50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(57,255,20,.5); }
}

@keyframes eitFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes eitScan {
  0% { transform: translateX(-16px); opacity: .2; }
  50% { opacity: 1; }
  100% { transform: translateX(16px); opacity: .2; }
}

@media (max-width: 860px) {
  .hero {
    gap: 32px;
  }

  .hero-visual {
    min-height: 260px;
  }

  .tech-orb {
    width: min(280px, 78vw);
  }
}

/* Header con logo oficial Erick Islas Tech */
.eit-logo-image-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-decoration:none !important;
  gap:12px !important;
  line-height:1 !important;
}

.eit-header-logo-img{
  height:62px;
  width:auto;
  max-width:min(330px, 42vw);
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 0 10px rgba(57,255,20,.28))
    drop-shadow(0 0 20px rgba(57,255,20,.16));
  transition:transform .35s ease, filter .35s ease;
  animation: eitLogoEntrance .7s ease both;
}

.eit-logo-image-link:hover .eit-header-logo-img{
  transform:scale(1.035);
  filter:
    drop-shadow(0 0 12px rgba(57,255,20,.42))
    drop-shadow(0 0 26px rgba(57,255,20,.22));
}


.eit-header-brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:.92;
  letter-spacing:1.6px;
  text-transform:uppercase;
  animation: eitLogoEntrance .7s ease both;
}

.eit-header-brand-main{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(1.05rem, 1.7vw, 1.55rem);
  font-weight:900;
  color:#f5fff5;
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 14px rgba(57,255,20,.18);
  white-space:nowrap;
}

.eit-header-brand-tech{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(1.05rem, 1.7vw, 1.55rem);
  font-weight:900;
  color:#39ff14;
  letter-spacing:3px;
  text-shadow:
    0 0 8px rgba(57,255,20,.48),
    0 0 18px rgba(57,255,20,.25);
  white-space:nowrap;
}

.eit-logo-image-link:hover .eit-header-brand-main,
.eit-logo-image-link:hover .eit-header-brand-tech{
  text-shadow:
    0 0 10px rgba(57,255,20,.55),
    0 0 22px rgba(57,255,20,.35);
}


/* Evita que el icono ⚡ anterior aparezca cuando usamos el logo oficial */
.eit-logo-image-link::before{
  display:none !important;
  content:none !important;
}

@keyframes eitLogoEntrance{
  from{
    opacity:0;
    transform:translateY(-8px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width: 860px){
  .eit-header-logo-img{
    height:52px;
    max-width:240px;
  }
}

@media (max-width: 520px){
  .eit-header-logo-img{
    height:46px;
    max-width:120px;
  }

  .eit-header-brand-text{
    transform:scale(.9);
    transform-origin:left center;
  }

  .eit-header-brand-main,
  .eit-header-brand-tech{
    font-size:.9rem;
  }
}




/* ==========================================================
   INTRO CINEMATOGRÁFICA - ERICK ISLAS TECH OS
   Duración aproximada: 30 segundos
   ========================================================== */
.eit-os-intro{
  position:fixed;
  inset:0;
  z-index:99999;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(57,255,20,.13), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(0,255,170,.10), transparent 30%),
    linear-gradient(135deg, #000 0%, #031006 42%, #000 100%);
  color:#dfffe3;
  font-family:'Orbitron', 'Montserrat', sans-serif;
  opacity:1;
  visibility:visible;
  transition:opacity 1.1s ease, visibility 1.1s ease;
}

.eit-os-intro.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.eit-os-intro::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    linear-gradient(rgba(57,255,20,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(700px) rotateX(62deg) translateY(-120px);
  transform-origin:center;
  animation:eitGridMove 10s linear infinite;
  opacity:.55;
}

.eit-os-intro::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    radial-gradient(circle at center, transparent 0 58%, rgba(0,0,0,.72) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:eitVignettePulse 5s ease-in-out infinite;
}

.eit-os-particles,
.eit-os-circuits,
.eit-os-orbit,
.eit-os-terminal,
.eit-os-final{
  position:absolute;
  z-index:2;
}

.eit-os-particles{
  inset:0;
  background:
    radial-gradient(circle, rgba(57,255,20,.95) 0 1px, transparent 1.6px) 8% 14%/120px 120px,
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.8px) 34% 62%/160px 160px,
    radial-gradient(circle, rgba(0,255,170,.85) 0 1px, transparent 1.6px) 76% 24%/140px 140px,
    radial-gradient(circle, rgba(57,255,20,.75) 0 1px, transparent 1.5px) 56% 82%/180px 180px;
  animation:eitParticles 8s linear infinite;
  opacity:.7;
}

.eit-os-circuits{
  inset:0;
  overflow:hidden;
  opacity:0;
  animation:eitCircuitsReveal 30s linear forwards;
}

.eit-os-circuits span{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(57,255,20,.95), transparent);
  box-shadow:0 0 18px rgba(57,255,20,.75);
  animation:eitCircuitScan 3.6s linear infinite;
}

.eit-os-circuits span:nth-child(1){width:42vw;left:-7vw;top:18%;animation-delay:.2s;}
.eit-os-circuits span:nth-child(2){width:36vw;right:-4vw;top:31%;animation-delay:.7s;}
.eit-os-circuits span:nth-child(3){width:52vw;left:15vw;top:62%;animation-delay:1.2s;}
.eit-os-circuits span:nth-child(4){width:28vw;right:9vw;top:76%;animation-delay:1.8s;}
.eit-os-circuits span:nth-child(5){width:22vw;left:10vw;top:43%;animation-delay:2.4s;}

.eit-os-terminal{
  left:clamp(18px, 5vw, 70px);
  top:clamp(76px, 12vh, 120px);
  width:min(600px, 88vw);
  padding:22px;
  border:1px solid rgba(57,255,20,.32);
  border-radius:18px;
  background:rgba(0,0,0,.48);
  box-shadow:0 0 34px rgba(57,255,20,.13), inset 0 0 28px rgba(57,255,20,.06);
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(18px);
  animation:eitTerminalIn 30s linear forwards;
}

.eit-os-terminal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#39ff14;
  font-size:.76rem;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:16px;
}

.eit-os-leds{display:flex;gap:7px;}
.eit-os-leds i{
  width:9px;height:9px;border-radius:999px;background:#39ff14;
  box-shadow:0 0 12px rgba(57,255,20,.9);
}

.eit-os-terminal pre{
  margin:0;
  white-space:pre-wrap;
  font-family:'Montserrat', monospace;
  font-size:clamp(.72rem, 1.35vw, .95rem);
  line-height:1.8;
  color:#ccffd0;
  text-shadow:0 0 12px rgba(57,255,20,.18);
}

.eit-os-terminal b{color:#39ff14;font-weight:900;}
.eit-os-cursor{display:inline-block;width:10px;height:1.05em;background:#39ff14;vertical-align:-2px;animation:eitBlink .8s steps(1) infinite;}

.eit-os-core{
  position:relative;
  z-index:4;
  width:min(430px, 72vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.8) rotate(-8deg);
  animation:eitCoreBuild 30s cubic-bezier(.16,1,.3,1) forwards;
}

.eit-os-core::before,
.eit-os-core::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(57,255,20,.38);
  box-shadow:0 0 40px rgba(57,255,20,.24), inset 0 0 40px rgba(57,255,20,.09);
}

.eit-os-core::before{animation:eitCoreSpin 9s linear infinite;}
.eit-os-core::after{inset:30px;border-style:dashed;animation:eitCoreSpin 14s linear infinite reverse;opacity:.82;}

.eit-os-logo-shell{
  position:relative;
  z-index:5;
  width:58%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:32px;
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(57,255,20,.07), rgba(0,0,0,.38));
  border:1px solid rgba(57,255,20,.35);
  box-shadow:0 0 34px rgba(57,255,20,.22), inset 0 0 26px rgba(255,255,255,.05);
  overflow:hidden;
}

.eit-os-logo-shell::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  transform:translateX(-80%) rotate(18deg);
  animation:eitLogoShine 30s ease-in-out forwards;
}

.eit-os-logo-shell img{
  width:82%;
  height:auto;
  filter:drop-shadow(0 0 18px rgba(57,255,20,.45));
}

.eit-os-orbit{
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  animation:eitOrbitReveal 30s linear forwards;
  z-index:3;
}

.eit-os-orbit span{
  position:absolute;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(57,255,20,.28);
  box-shadow:0 0 24px rgba(57,255,20,.18);
  font-size:1.65rem;
  transform:rotate(var(--a)) translateX(min(310px, 36vw)) rotate(calc(var(--a) * -1));
  animation:eitIconFloat 4s ease-in-out infinite;
}

.eit-os-orbit span:nth-child(1){--a:0deg;animation-delay:.1s;}
.eit-os-orbit span:nth-child(2){--a:45deg;animation-delay:.3s;}
.eit-os-orbit span:nth-child(3){--a:90deg;animation-delay:.5s;}
.eit-os-orbit span:nth-child(4){--a:135deg;animation-delay:.7s;}
.eit-os-orbit span:nth-child(5){--a:180deg;animation-delay:.9s;}
.eit-os-orbit span:nth-child(6){--a:225deg;animation-delay:1.1s;}
.eit-os-orbit span:nth-child(7){--a:270deg;animation-delay:1.3s;}
.eit-os-orbit span:nth-child(8){--a:315deg;animation-delay:1.5s;}

.eit-os-radar{
  position:absolute;
  right:clamp(18px, 6vw, 90px);
  bottom:clamp(72px, 12vh, 120px);
  width:min(260px, 54vw);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(57,255,20,.32);
  background:
    radial-gradient(circle, transparent 0 22%, rgba(57,255,20,.06) 23% 24%, transparent 25% 45%, rgba(57,255,20,.08) 46% 47%, transparent 48%),
    conic-gradient(from 0deg, rgba(57,255,20,.44), transparent 34%, transparent);
  box-shadow:0 0 30px rgba(57,255,20,.15), inset 0 0 28px rgba(57,255,20,.08);
  opacity:0;
  animation:eitRadarReveal 30s linear forwards, eitCoreSpin 5s linear infinite;
}

.eit-os-radar::before,
.eit-os-radar::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:rgba(57,255,20,.65);
  box-shadow:0 0 12px rgba(57,255,20,.8);
}
.eit-os-radar::before{width:1px;height:100%;}
.eit-os-radar::after{height:1px;width:100%;}

.eit-os-final{
  left:50%;
  bottom:clamp(32px, 6vh, 72px);
  width:min(920px, 92vw);
  transform:translateX(-50%) translateY(22px);
  text-align:center;
  opacity:0;
  animation:eitFinalReveal 30s ease forwards;
  z-index:8;
}

.eit-os-final h2{
  margin:0;
  font-size:clamp(2rem, 6vw, 5.2rem);
  font-weight:900;
  line-height:.94;
  color:#f6fff6;
  letter-spacing:clamp(2px, .7vw, 8px);
  text-shadow:0 0 18px rgba(57,255,20,.55), 0 0 40px rgba(57,255,20,.24);
}

.eit-os-final h2 span{display:block;color:#39ff14;}
.eit-os-final p{margin:14px 0 0;color:#caffcf;font-weight:800;letter-spacing:1.4px;}

.eit-os-build{
  margin:18px auto 0;
  width:min(560px, 88vw);
  height:10px;
  border:1px solid rgba(57,255,20,.45);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 18px rgba(57,255,20,.2);
}

.eit-os-build i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #39ff14, #d7ffd9, #39ff14);
  box-shadow:0 0 18px rgba(57,255,20,.85);
  animation:eitProgress 30s linear forwards;
}

.eit-os-skip{
  position:absolute;
  right:18px;
  top:18px;
  z-index:12;
  border:1px solid rgba(57,255,20,.45);
  background:rgba(0,0,0,.48);
  color:#dfffe2;
  border-radius:999px;
  padding:10px 16px;
  font:800 .78rem 'Montserrat', sans-serif;
  letter-spacing:.8px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(57,255,20,.12);
  transition:.25s ease;
}

.eit-os-skip:hover{background:rgba(57,255,20,.12);color:#39ff14;transform:translateY(-2px);}

.eit-os-warning{
  position:absolute;
  left:50%;
  top:24px;
  transform:translateX(-50%);
  z-index:11;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.35);
  background:rgba(0,0,0,.45);
  color:#39ff14;
  font:900 .78rem 'Montserrat', sans-serif;
  text-transform:uppercase;
  letter-spacing:1.4px;
  box-shadow:0 0 24px rgba(57,255,20,.12);
}



/* Monitor falso del sistema - Versión 8 */
.eit-os-metrics{
  position:absolute;
  right:clamp(18px, 4vw, 70px);
  top:clamp(78px, 11vh, 120px);
  width:min(330px, 86vw);
  z-index:7;
  display:grid;
  gap:12px;
  opacity:0;
  transform:translateX(28px);
  animation:eitMetricsReveal 30s ease forwards;
}

.eit-os-metric-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(57,255,20,.32);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(0,0,0,.48);
  box-shadow:0 0 24px rgba(57,255,20,.12), inset 0 0 24px rgba(57,255,20,.055);
  backdrop-filter:blur(10px);
}

.eit-os-metric-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(57,255,20,.10), transparent);
  transform:translateX(-120%);
  animation:eitMetricSweep 4.5s ease-in-out infinite;
  pointer-events:none;
}

.eit-os-metric-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#bfffc7;
  font:900 .72rem 'Montserrat', sans-serif;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.eit-os-metric-value{
  font:900 clamp(1.8rem, 4vw, 2.65rem) 'Orbitron', sans-serif;
  color:#39ff14;
  letter-spacing:2px;
  text-shadow:0 0 18px rgba(57,255,20,.55), 0 0 34px rgba(57,255,20,.22);
}

.eit-os-metric-unit{
  font-size:.58em;
  color:#dfffe3;
}

.eit-os-meter{
  height:9px;
  border-radius:999px;
  border:1px solid rgba(57,255,20,.28);
  background:rgba(255,255,255,.055);
  overflow:hidden;
  margin-top:12px;
}

.eit-os-meter i{
  display:block;
  height:100%;
  width:var(--w, 50%);
  border-radius:999px;
  background:linear-gradient(90deg, #0fff70, #eaffec, #39ff14);
  box-shadow:0 0 16px rgba(57,255,20,.8);
  animation:eitMeterPulse 2.7s ease-in-out infinite;
}

.eit-os-metric-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.eit-os-mini{
  border:1px solid rgba(57,255,20,.22);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.35);
}

.eit-os-mini span{
  display:block;
  color:#bfffc7;
  font:800 .62rem 'Montserrat', sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px;
}

.eit-os-mini strong{
  color:#f6fff6;
  font:900 1rem 'Orbitron', sans-serif;
  text-shadow:0 0 12px rgba(57,255,20,.26);
}

.eit-os-temp-hot{
  color:#ffef8a;
  text-shadow:0 0 16px rgba(255,210,65,.35), 0 0 28px rgba(57,255,20,.22);
}

@keyframes eitMetricsReveal{
  0%,30%{opacity:0;transform:translateX(28px)}
  42%,86%{opacity:1;transform:translateX(0)}
  96%,100%{opacity:0;transform:translateX(20px)}
}

@keyframes eitMetricSweep{
  0%,45%{transform:translateX(-120%)}
  70%,100%{transform:translateX(120%)}
}

@keyframes eitMeterPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45)}
}

@media (max-width: 980px){
  .eit-os-metrics{
    top:auto;
    left:16px;
    right:16px;
    bottom:86px;
    width:auto;
    grid-template-columns:1fr;
  }

  .eit-os-metric-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .eit-os-metrics{
    display:none;
  }
}

body.eit-intro-lock{overflow:hidden;}

@keyframes eitGridMove{to{background-position:0 420px,420px 0;}}
@keyframes eitVignettePulse{0%,100%{opacity:.75}50%{opacity:.95}}
@keyframes eitParticles{to{background-position:128px 120px, -160px 160px, 140px -140px, -180px -180px;}}
@keyframes eitCircuitsReveal{0%,12%{opacity:0}20%,92%{opacity:1}100%{opacity:0}}
@keyframes eitCircuitScan{0%{transform:translateX(-30px);opacity:.18}50%{opacity:1}100%{transform:translateX(30px);opacity:.18}}
@keyframes eitTerminalIn{0%,2%{opacity:0;transform:translateY(18px)}7%,47%{opacity:1;transform:translateY(0)}57%,100%{opacity:0;transform:translateY(-18px)}}
@keyframes eitBlink{50%{opacity:0}}
@keyframes eitCoreBuild{0%,28%{opacity:0;transform:scale(.72) rotate(-12deg)}42%,88%{opacity:1;transform:scale(1) rotate(0)}96%,100%{opacity:0;transform:scale(1.14) rotate(3deg)}}
@keyframes eitCoreSpin{to{transform:rotate(360deg)}}
@keyframes eitLogoShine{0%,50%{transform:translateX(-80%) rotate(18deg)}63%,72%{transform:translateX(80%) rotate(18deg)}100%{transform:translateX(80%) rotate(18deg)}}
@keyframes eitOrbitReveal{0%,45%{opacity:0;transform:scale(.82)}54%,85%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1.1)}}
@keyframes eitIconFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}
@keyframes eitRadarReveal{0%,18%{opacity:0}28%,84%{opacity:.82}100%{opacity:0}}
@keyframes eitFinalReveal{0%,72%{opacity:0;transform:translateX(-50%) translateY(22px)}82%,94%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-18px)}}
@keyframes eitProgress{0%{width:0%}100%{width:100%}}

@media (max-width: 780px){
  .eit-os-terminal{top:82px;left:16px;right:16px;width:auto;padding:16px;}
  .eit-os-core{width:min(310px, 72vw);}
  .eit-os-orbit span{width:42px;height:42px;font-size:1.25rem;transform:rotate(var(--a)) translateX(min(210px, 38vw)) rotate(calc(var(--a) * -1));}
  .eit-os-radar{display:none;}
  .eit-os-warning{font-size:.62rem;max-width:calc(100vw - 130px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

@media (prefers-reduced-motion: reduce){
  .eit-os-intro{display:none !important;}
  body.eit-intro-lock{overflow:auto;}
}

/* Formulario seguro de comunidad */
.contact-section {
  position: relative;
  padding: clamp(48px, 7vw, 92px) max(24px, calc((100vw - 1180px) / 2));
  background:
    radial-gradient(circle at 12% 20%, rgba(57,255,20,.12), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(0,255,170,.10), transparent 26%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,34,14,.96));
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57,255,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .28;
  pointer-events: none;
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.contact-info-card,
.contact-form-card {
  border: 1px solid rgba(57,255,20,.22);
  background:
    linear-gradient(145deg, rgba(6,18,12,.94), rgba(2,8,5,.96));
  border-radius: 24px;
  box-shadow:
    0 0 30px rgba(57,255,20,.10),
    inset 0 0 24px rgba(57,255,20,.04);
}

.contact-info-card {
  padding: clamp(24px, 4vw, 38px);
}

.contact-info-card h2,
.contact-form-card h2 {
  margin: 0 0 16px;
  font-family: "Orbitron", sans-serif;
  color: #fff;
}

.contact-info-card p {
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

.contact-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255,255,255,.84);
}

.contact-list strong {
  display: block;
  color: #39ff14;
  margin-bottom: 2px;
}

.contact-form-card {
  padding: clamp(22px, 4vw, 36px);
}

.eit-contact-form {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  color: #c9ffd0;
  font-weight: 800;
  font-size: .92rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(57,255,20,.24);
  border-radius: 16px;
  background: rgba(0,0,0,.42);
  color: #fff;
  padding: 14px 16px;
  outline: none;
  font: inherit;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.form-field textarea {
  min-height: 150px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(57,255,20,.75);
  box-shadow: 0 0 0 4px rgba(57,255,20,.10);
  background: rgba(0,0,0,.62);
}

.form-help {
  color: rgba(255,255,255,.56);
  font-size: .86rem;
  line-height: 1.5;
}

.form-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255,255,255,.78);
  font-size: .92rem;
  line-height: 1.55;
}

.form-consent input {
  margin-top: 4px;
  accent-color: #39ff14;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  min-height: 28px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  color: #061006;
  background: #39ff14;
}

.form-status.is-error {
  color: #fff;
  background: rgba(255,65,65,.18);
  border: 1px solid rgba(255,65,65,.35);
}

.form-submit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.form-submit-row .btn {
  border: none;
  cursor: pointer;
}

.security-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255,255,255,.65);
  font-size: .86rem;
  line-height: 1.55;
}

@media (max-width: 920px) {
  .contact-grid,
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Reseñas: categorías, filtros y tarjetas visuales */
.reviews-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: #c9ffd0;
  font-weight: 700;
}

.reviews-toolbar {
  margin: 42px auto 0;
  display: grid;
  gap: 22px;
}

.review-search-box {
  position: relative;
}

.review-search-box input {
  width: 100%;
  padding: 18px 20px 18px 52px;
  border-radius: 18px;
  border: 1px solid rgba(57,255,20,.28);
  background:
    linear-gradient(135deg, rgba(57,255,20,.08), rgba(255,255,255,.03)),
    rgba(8, 12, 9, .82);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 0 26px rgba(57,255,20,.08);
}

.review-search-box input:focus {
  border-color: rgba(57,255,20,.72);
  box-shadow: 0 0 30px rgba(57,255,20,.18);
}

.review-search-box::before {
  content: "🔎";
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.category-filter {
  cursor: pointer;
  border: 1px solid rgba(57,255,20,.26);
  background: rgba(255,255,255,.04);
  color: #eaffea;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.category-filter:hover,
.category-filter.is-active {
  transform: translateY(-2px);
  border-color: rgba(57,255,20,.75);
  background: rgba(57,255,20,.14);
  box-shadow: 0 0 22px rgba(57,255,20,.18);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.review-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: 24px;
  border: 1px solid rgba(57,255,20,.18);
  padding: 24px;
  background:
    radial-gradient(circle at 80% 10%, rgba(57,255,20,.14), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(8, 12, 9, .86);
  box-shadow: 0 0 30px rgba(0,0,0,.22);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.review-card:hover {
  transform: translateY(-7px);
  border-color: rgba(57,255,20,.58);
  box-shadow: 0 0 36px rgba(57,255,20,.16);
}

.review-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,.18), transparent 70%);
  pointer-events: none;
}

.review-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(57,255,20,.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(57,255,20,.25), transparent 45%),
    rgba(0,0,0,.28);
  font-size: 31px;
  box-shadow: 0 0 20px rgba(57,255,20,.16);
  margin-bottom: 18px;
}

.review-category {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #39ff14;
  background: rgba(57,255,20,.10);
  border: 1px solid rgba(57,255,20,.24);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.review-card h3 {
  margin: 0 0 10px;
}

.review-card p {
  margin-bottom: 18px;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}

.review-meta span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #dfffe2;
  background: rgba(255,255,255,.055);
  font-size: .82rem;
  font-weight: 700;
}

.review-card a {
  position: relative;
  z-index: 1;
}

.empty-reviews {
  display: none;
  margin-top: 28px;
  padding: 26px;
  border-radius: 22px;
  border: 1px dashed rgba(57,255,20,.36);
  background: rgba(57,255,20,.06);
  color: #dfffe2;
  text-align: center;
  font-weight: 700;
}

.reviews-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.review-stat {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(57,255,20,.18);
  background: rgba(255,255,255,.04);
}

.review-stat strong {
  display: block;
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 6px;
}

@media (max-width: 1050px) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reviews-grid,
  .reviews-stats {
    grid-template-columns: 1fr;
  }

  .category-filter {
    width: 100%;
    text-align: left;
  }
}

/* ==========================================================
   SERVICIOS PREMIUM - ERICK ISLAS TECH
   Diseño futurista, tarjetas HUD, CTA y animaciones suaves
   ========================================================== */
.services-premium {
  position: relative;
  overflow: hidden;
}

.services-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, rgba(57,255,20,.10), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(0,255,170,.08), transparent 24%),
    linear-gradient(rgba(57,255,20,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.02) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
  pointer-events: none;
}

.services-hero {
  position: relative;
  min-height: 52vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(28px, 4vw, 56px) max(24px, calc((100vw - 1420px) / 2));
  border-bottom: 1px solid rgba(57,255,20,.18);
  background:
    linear-gradient(100deg, rgba(0,0,0,.94), rgba(0,44,17,.86), rgba(0,0,0,.96)),
    radial-gradient(circle at 70% 42%, rgba(57,255,20,.20), transparent 36%);
  overflow: hidden;
}

.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, transparent, rgba(57,255,20,.10), transparent);
  opacity: .65;
  pointer-events: none;
}

.services-hero > * {
  position: relative;
  z-index: 1;
}

.services-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 16px;
  border: 1px solid rgba(57,255,20,.38);
  border-radius: 999px;
  color: #39ff14;
  background: rgba(0,0,0,.34);
  box-shadow: 0 0 24px rgba(57,255,20,.12);
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.services-hero h1 {
  margin: 22px 0 18px;
  max-width: 940px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(3rem, 7vw, 7.8rem);
  line-height: .92;
  letter-spacing: 1px;
  color: #f7fff7;
  text-shadow:
    0 0 18px rgba(57,255,20,.34),
    0 0 52px rgba(57,255,20,.16);
}

.services-hero h1 span {
  display: block;
  color: #39ff14;
}

.services-hero p {
  max-width: 780px;
  color: #cfe6d2;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.8;
}

.services-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.services-hud {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
}

.services-orb {
  position: relative;
  width: min(450px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(57,255,20,.42);
  background:
    radial-gradient(circle at center, rgba(57,255,20,.18), transparent 31%),
    radial-gradient(circle at center, rgba(0,0,0,.8), rgba(0,0,0,.55) 62%, transparent 63%),
    conic-gradient(from 0deg, rgba(57,255,20,.9), transparent 16%, rgba(255,255,255,.45), transparent 36%, rgba(57,255,20,.65), transparent 72%, rgba(57,255,20,.9));
  box-shadow:
    0 0 46px rgba(57,255,20,.22),
    inset 0 0 46px rgba(57,255,20,.10);
  animation: serviceFloat 5s ease-in-out infinite;
}

.services-orb::before {
  content: "⚙️";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(92px, 12vw, 150px);
  filter: drop-shadow(0 0 22px rgba(57,255,20,.45));
}

.services-orb::after {
  content: "";
  position: absolute;
  inset: 44px;
  border: 1px dashed rgba(57,255,20,.32);
  border-radius: 50%;
  animation: serviceSpin 18s linear infinite;
}

.services-node {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(57,255,20,.30);
  box-shadow: 0 0 26px rgba(57,255,20,.14);
  font-size: 2rem;
  animation: serviceNode 4s ease-in-out infinite;
}

.services-node:nth-child(2) { top: 4%; left: 10%; animation-delay:.1s; }
.services-node:nth-child(3) { top: 15%; right: 0; animation-delay:.4s; }
.services-node:nth-child(4) { bottom: 13%; left: 1%; animation-delay:.7s; }
.services-node:nth-child(5) { bottom: 2%; right: 12%; animation-delay:1s; }

.services-section {
  padding: clamp(22px, 3vw, 36px) max(24px, calc((100vw - 1420px) / 2));
}

.services-section-header {
  text-align: center;
  margin-bottom: 18px;
}

.services-section-header span {
  display: inline-block;
  color: #39ff14;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.services-section-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 5rem);
  color: #f5fff5;
  margin: 0;
}

.services-section-header p {
  max-width: 820px;
  margin: 16px auto 0;
  color: #bdd1c2;
  line-height: 1.8;
}

.services-grid-premium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-card-premium {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(57,255,20,.24);
  background:
    linear-gradient(145deg, rgba(57,255,20,.08), rgba(0,0,0,.56) 42%, rgba(0,0,0,.78)),
    radial-gradient(circle at 85% 10%, rgba(57,255,20,.14), transparent 32%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 0 24px rgba(57,255,20,.035);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.service-card-premium:hover {
  transform: translateY(-8px);
  border-color: rgba(57,255,20,.55);
  box-shadow:
    0 26px 70px rgba(0,0,0,.45),
    0 0 34px rgba(57,255,20,.16),
    inset 0 0 34px rgba(57,255,20,.06);
}

.service-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(57,255,20,.12), transparent);
  transform: translateX(-115%);
  transition: transform .7s ease;
  pointer-events: none;
}

.service-card-premium:hover::before {
  transform: translateX(115%);
}

.service-icon-premium {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  margin-bottom: 22px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(57,255,20,.35);
  box-shadow: 0 0 24px rgba(57,255,20,.12);
  font-size: 2rem;
}

.service-card-premium h3 {
  margin: 0 0 14px;
  font-family: 'Orbitron', sans-serif;
  color: #f6fff6;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.service-card-premium p {
  color: #cfe0d1;
  line-height: 1.75;
  margin: 0 0 20px;
}

.service-card-premium ul {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.service-card-premium li {
  color: #dfffe2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}

.service-card-premium li::before {
  content: "✓";
  flex: 0 0 auto;
  color: #39ff14;
  font-weight: 900;
}

.services-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(57,255,20,.22);
  background: rgba(0,0,0,.42);
}

.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  margin-bottom: 18px;
  background: rgba(57,255,20,.12);
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  border: 1px solid rgba(57,255,20,.32);
}

.process-step h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.2rem;
}

.process-step p {
  color: #bdd1c2;
  line-height: 1.65;
  margin: 0;
}

.services-cta {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: clamp(36px, 6vw, 70px);
  border-radius: 34px;
  border: 1px solid rgba(57,255,20,.35);
  background:
    radial-gradient(circle at 15% 20%, rgba(57,255,20,.18), transparent 28%),
    linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,57,21,.76), rgba(0,0,0,.82));
  box-shadow: 0 0 50px rgba(57,255,20,.10);
  text-align: center;
}

.services-cta h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4.8vw, 4.7rem);
  color: #fff;
  margin: 0 0 14px;
}

.services-cta p {
  max-width: 760px;
  margin: 0 auto 28px;
  color: #d5ead8;
  line-height: 1.8;
}

.services-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 12px;
}

.service-stat {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(57,255,20,.20);
  background: rgba(0,0,0,.38);
  text-align: center;
}

.service-stat strong {
  display: block;
  color: #39ff14;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 8px;
}

.service-stat span {
  color: #cfe0d1;
  font-weight: 700;
}

@keyframes serviceFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

@keyframes serviceSpin { to { transform: rotate(360deg); } }

@keyframes serviceNode {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 1100px) {
  .services-hero { grid-template-columns: 1fr; min-height: auto; }
  .services-hud { min-height: 270px; }
  .services-grid-premium { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .services-process, .services-mini-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .services-grid-premium,
  .services-process,
  .services-mini-stats { grid-template-columns: 1fr; }
  .service-card-premium { min-height: auto; }
  .services-node { width: 58px; height: 58px; border-radius: 18px; font-size: 1.45rem; }
  .services-hud { min-height: 230px; }
}


/* ==========================================================
   AJUSTE V2 - Ritmo vertical compacto premium
   Reduce espacios muertos aproximados en 80% y mantiene look HUD
   ========================================================== */
.services-premium{
  --services-section-gap: clamp(22px, 3vw, 38px);
}

.services-hero{
  min-height: auto !important;
  padding-top: clamp(30px, 4vw, 58px) !important;
  padding-bottom: clamp(26px, 3.6vw, 50px) !important;
}

.services-hero h1{
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

.services-actions{
  margin-top: 20px !important;
}

.services-hud{
  min-height: clamp(240px, 28vw, 330px) !important;
}

.services-orb{
  width: min(330px, 70vw) !important;
}

.services-node{
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  font-size: 1.65rem !important;
}

.services-section{
  padding-top: var(--services-section-gap) !important;
  padding-bottom: var(--services-section-gap) !important;
}

.services-section + .services-section{
  margin-top: 0 !important;
}

.services-section-header{
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

.services-section-header p{
  margin-top: 10px !important;
}

.services-grid-premium{
  gap: 18px !important;
}

.service-card-premium{
  min-height: auto !important;
  padding: clamp(22px, 2.5vw, 28px) !important;
}

.service-card-premium p{
  margin-bottom: 12px !important;
}

.service-card-premium ul{
  margin-top: 14px !important;
  gap: 8px !important;
}

.services-process{
  gap: 14px !important;
}

.process-step{
  padding: 20px !important;
}

.process-step::before{
  margin-bottom: 12px !important;
}

.services-mini-stats{
  margin-top: 18px !important;
}

.services-cta{
  margin-top: 6px !important;
  padding: clamp(28px, 4vw, 48px) !important;
}

/* Animación ligera de entrada para que no se sienta plano al compactar */
.service-card-premium,
.process-step,
.service-stat,
.services-cta{
  opacity: 0;
  transform: translateY(18px);
}

.service-card-premium.is-visible,
.process-step.is-visible,
.service-stat.is-visible,
.services-cta.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease, box-shadow .35s ease, border-color .35s ease;
}

@media (max-width: 700px){
  .services-hero{
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  .services-section{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}



/* ==========================================================
   AJUSTE IMÁGENES DE SERVICIOS - ancho completo del recuadro
   Cambia las rutas en cada <img src="..."> dentro de .service-icon-premium
   ========================================================== */
.service-icon-premium{
  width: min(100%, 520px) !important;
  height: 150px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(57,255,20,.14), transparent 58%),
    linear-gradient(145deg, rgba(0,0,0,.55), rgba(0,35,14,.38)) !important;
  border: 1px solid rgba(57,255,20,.28) !important;
  box-shadow:
    0 0 24px rgba(57,255,20,.14),
    inset 0 0 24px rgba(57,255,20,.05) !important;
}

.service-icon-premium img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  filter:
    saturate(1.08)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(57,255,20,.22)) !important;
  transform: scale(1.01);
  transition: transform .45s ease, filter .45s ease;
}

.service-card-premium:hover .service-icon-premium img{
  transform: scale(1.08);
  filter:
    saturate(1.18)
    contrast(1.12)
    drop-shadow(0 0 18px rgba(57,255,20,.38)) !important;
}

@media (max-width: 700px){
  .service-icon-premium{
    height: 135px !important;
  }
}

.review-hero { position:relative; overflow:hidden; padding:clamp(42px,7vw,86px) max(24px,calc((100vw - 1220px)/2)); background:radial-gradient(circle at 80% 20%,rgba(57,255,20,.18),transparent 28%),linear-gradient(135deg,rgba(0,0,0,.96),rgba(0,45,18,.92)); }
.review-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 48%,rgba(57,255,20,.08) 49% 51%,transparent 52% 100%); pointer-events:none; }
.review-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:32px; align-items:center; }
.review-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid rgba(57,255,20,.35); border-radius:999px; color:#c9ffd0; background:rgba(57,255,20,.08); font-weight:800; }
.review-hero h1 { margin:18px 0 12px; font-size:clamp(2rem,5vw,4.4rem); line-height:1; }
.review-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.review-meta span { padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.product-orb { min-height:300px; border:1px solid rgba(57,255,20,.28); border-radius:26px; display:grid; place-items:center; background:radial-gradient(circle at center,rgba(57,255,20,.18),transparent 36%),rgba(0,0,0,.42); box-shadow:0 0 34px rgba(57,255,20,.16); }
.product-orb strong { font-size:clamp(5rem,10vw,8rem); filter:drop-shadow(0 0 20px rgba(57,255,20,.35)); }
.review-section { max-width:1220px; margin:0 auto; padding:46px 24px; }
.review-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:28px; }
.video-box { border-radius:24px; overflow:hidden; border:1px solid rgba(57,255,20,.28); background:#050505; box-shadow:0 0 28px rgba(57,255,20,.12); }
.video-box iframe { width:100%; aspect-ratio:16/9; display:block; border:0; }
.info-card { border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:24px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); }
.score { font-size:3rem; font-weight:900; color:#39ff14; font-family:Orbitron,sans-serif; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.specs { display:grid; gap:10px; }
.specs div { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.1); padding:10px 0; }
.placeholder-note { color:#c9ffd0; font-size:.95rem; opacity:.9; }
@media (max-width:860px) { .review-layout,.review-grid,.pros-cons { grid-template-columns:1fr; } .product-orb { min-height:220px; } }