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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =========================
   CONTENEDOR
========================= */
.intro {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* =========================
   VIDEO DE FONDO
========================= */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.55) contrast(1.1);
  z-index: 1;
}

/* =========================
   AURA / MAGIA
========================= */
.intro-aura {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 55% 35%, rgba(0,140,255,.35), transparent 45%),
    radial-gradient(circle at 50% 65%, rgba(255,200,120,.22), transparent 55%);
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: auraFlow 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes auraFlow {
  0% { opacity: .35; }
  50% { opacity: .75; }
  100% { opacity: .35; }
}

/* =========================
   PARTICULAS
========================= */
.particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(120,180,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 50% 80%, rgba(255,200,120,.45), transparent);
  background-size: 220px 220px;
  animation: particlesMove 30s linear infinite;
  z-index: 2;
}

@keyframes particlesMove {
  from { background-position: 0 0; }
  to   { background-position: 600px 1200px; }
}

/* =========================
   OSCURECIDO PRO
========================= */
.intro-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,.15), rgba(0,0,0,.85));
  z-index: 3;
}

/* =========================
   UI
========================= */
.intro-ui {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
}

/* =========================
   LOGO
========================= */
.brand {
  position: absolute;
  top: 18%;
  left: 6%;
  transform: translateY(-50%);
}

.logo-img {
  width: 360px;
  filter:
    drop-shadow(0 0 25px rgba(0,0,0,.85))
    drop-shadow(0 0 45px rgba(212,175,55,.45));
}

/* =========================
   CARD BASE
========================= */
.hero-card{
  position:absolute;
  width:340px;
  padding:22px 22px;
  border-radius:18px;

  background: linear-gradient(
    180deg,
    rgba(18,20,28,.72),
    rgba(10,12,18,.86)
  );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid rgba(212,175,55,.28);
  box-shadow:
    0 25px 60px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,255,255,.03);

  text-align:left;
}

/* Card posicionada a la izquierda (donde marcaste) */
.hero-card--left{
  left: 6%;
  top: 38%;
  transform: translateY(0);
}

/* Título */
.hero-title{
  color:#f4d88a;
  font-weight:800;
  letter-spacing:.6px;
  margin-bottom:12px;
  font-size:18px;
}

/* Meta list */
.hero-meta{
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.meta-row span{
  opacity: .9;
}

.meta-row b{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

/* Estado */
.meta-status{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,175,55,.14);
}

.status-online{
  color: #2EE57A;
  text-shadow: 0 0 18px rgba(46,229,122,.25);
}

/* =========================
   BOTÓN
========================= */
.hero-btn{
  display:inline-block;
  width: 100%;
  text-align:center;

  padding:12px 18px;
  border-radius:12px;

  background: linear-gradient(180deg, #0b0b0b, #000);
  border:1px solid rgba(212,175,55,.55);
  color:#f4d88a;

  font-weight:800;
  text-decoration:none;
  letter-spacing:.5px;

  transition:all .25s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.6);
}

.hero-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 38px rgba(212,175,55,.3);
  border-color:rgba(212,175,55,.85);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .brand {
    left: 50%;
    top: 14%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .logo-img { width: 260px; }

  .hero-card--left{
    left: 50%;
    top: 56%;
    transform: translate(-50%, 0);
    width: 92%;
  }
}