*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  background:#020611;
  color:#fff;
}

/* =========================
   FONDO ROBOT
========================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.45)),
    radial-gradient(circle at center,transparent 28%,rgba(0,0,0,.55) 100%),
    url("./assets/robot.png") center 38% / 78% auto no-repeat;
  z-index:0;
}

/* scanlines */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.018),
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity:.18;
  pointer-events:none;
  z-index:9;
}

/* =========================
   CANVAS FX
========================= */
#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

/* =========================
   CONTENEDOR GENERAL
========================= */
.hero{
  position:relative;
  z-index:5;
  width:100vw;
  height:100vh;
  padding:42px 58px;
}

/* barrido de luz */
.hero::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,234,255,.045) 50%,
      transparent 100%
    );
  animation:scanMove 9s linear infinite;
  pointer-events:none;
  z-index:-1;
}

/* =========================
   HEADER
========================= */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:1.2rem;
  letter-spacing:8px;
  text-shadow:0 0 18px #00eaff;
}

.brand b{
  color:#00eaff;
}

.logo{
  width:54px;
  height:54px;
  border:2px solid #00eaff;
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  box-shadow:
    0 0 18px #00eaff,
    inset 0 0 10px rgba(0,234,255,.45);
  animation:rotate 8s linear infinite;
}

.top-info{
  text-align:right;
  letter-spacing:2px;
}

.top-info small{
  color:#d9f8ff;
}

.top-info strong{
  display:block;
  margin-top:12px;
  color:#00eaff;
  text-shadow:0 0 14px #00eaff;
}

/* =========================
   PANEL HUD
========================= */
.hud{
  position:absolute;
  top:32%;
  display:grid;
  gap:28px;
  font-size:.92rem;
  letter-spacing:1.4px;
  color:#d8f8ff;
}

.hud.left{
  left:58px;
}

.hud.right{
  right:58px;
}

.hud div{
  position:relative;
  padding:16px 20px 16px 72px;
  min-width:220px;
  border-left:2px solid #00eaff;
  background:
    linear-gradient(
      90deg,
      rgba(0,234,255,.11),
      rgba(0,234,255,.02),
      transparent
    );
  backdrop-filter:blur(3px);
}

.hud div::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  border:1px solid #00eaff;
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  box-shadow:0 0 14px rgba(0,234,255,.8);
  animation:iconPulse 2.3s infinite;
}

.hud div::after{
  content:"";
  position:absolute;
  left:54px;
  top:50%;
  width:42px;
  height:1px;
  background:linear-gradient(90deg,#00eaff,transparent);
}

.hud b{
  color:#00eaff;
  text-shadow:0 0 10px #00eaff;
}

/* =========================
   CONTENIDO CENTRAL
========================= */
.content{
  position:absolute;
  left:50%;
  bottom:45px;
  transform:translateX(-50%);
  width:min(760px,94vw);
  text-align:center;
}

.content h1{
  font-size:clamp(2.4rem,4.7vw,4.6rem);
  letter-spacing:clamp(7px,1.8vw,22px);
  font-weight:800;
  color:#ffffff;
  text-shadow:
    0 0 16px rgba(255,255,255,.85),
    0 0 34px rgba(0,234,255,.9),
    0 0 65px rgba(0,234,255,.55);
  animation:floatText 4s ease-in-out infinite;
}

.content h1 span{
  color:#00eaff;
}

.content p{
  margin:14px 0 28px;
  text-transform:uppercase;
  letter-spacing:8px;
  font-size:.95rem;
  color:#e6fbff;
  text-shadow:0 0 12px #00eaff;
}

/* =========================
   BOTÓN
========================= */
.btn{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  min-width:540px;
  height:80px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
  background:rgba(5,10,28,.58);
  border:2px solid #00eaff;
  border-right-color:#ff42f6;
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
  box-shadow:
    0 0 22px rgba(0,234,255,.85),
    0 0 52px rgba(255,66,246,.35),
    inset 0 0 28px rgba(0,234,255,.12);
  overflow:hidden;
  transition:.25s;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );
  transform:translateX(-120%);
  animation:buttonSweep 3.1s infinite;
}

.btn span{
  color:#ff42f6;
  font-size:1.8rem;
}

.btn:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:
    0 0 30px rgba(255,66,246,.9),
    0 0 75px rgba(0,234,255,.7);
}

.secure{
  margin-top:24px;
  color:#e9fbff;
  letter-spacing:6px;
  text-transform:uppercase;
  font-size:.86rem;
  text-shadow:0 0 12px #00eaff;
}

/* =========================
   ELIMINAR EFECTOS ANTIGUOS
========================= */
.head-ring,
.head-ring-2,
.halo-head,
.holo-floor,
.floor-ring,
.floor-ring-2,
.chest-core,
.core-light,
.eye-glow,
.digital-rain,
.head-rain,
.floor-rain{
  display:none !important;
}

/* =========================
   ANIMACIONES
========================= */
@keyframes rotate{
  to{
    transform:rotate(360deg);
  }
}

@keyframes scanMove{
  0%{
    transform:translateX(-35%);
  }
  100%{
    transform:translateX(35%);
  }
}

@keyframes iconPulse{
  0%,100%{
    opacity:.55;
    transform:translateY(-50%) scale(.92);
  }
  50%{
    opacity:1;
    transform:translateY(-50%) scale(1.08);
  }
}

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

@keyframes buttonSweep{
  to{
    transform:translateX(130%);
  }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:900px){

  body::before{
    background-position:center top;
    background-size:118% auto;
  }

  .hero{
    padding:24px 22px;
  }

  .brand{
    font-size:.78rem;
    letter-spacing:4px;
    gap:12px;
  }

  .logo{
    width:38px;
    height:38px;
  }

  .top-info,
  .hud{
    display:none;
  }

  .content{
    bottom:34px;
    width:94vw;
  }

  .content h1{
    font-size:2.15rem;
    letter-spacing:6px;
  }

  .content p{
    font-size:.68rem;
    letter-spacing:3px;
  }

  .btn{
    min-width:auto;
    width:92vw;
    height:62px;
    font-size:.74rem;
    letter-spacing:1.5px;
    gap:12px;
  }

  .secure{
    font-size:.62rem;
    letter-spacing:3px;
  }
}

.music-btn {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 20;
  padding: 14px 22px;
  border: 1px solid #00eaff;
  background: rgba(5, 10, 28, .72);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 0 22px rgba(0,234,255,.55);
}

#audioWave {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 130px;
  z-index: 12;
  pointer-events: none;
  opacity: 0.72;
}