:root{
  /* =================================
     AJUSTES RÁPIDOS ECG
     Cambia solo estos valores
  ================================= */

  /* LOGO ECG */
  --logo-width-pc:120vw;
  --logo-max-pc:900px;

  --logo-width-tablet:200vw;
  --logo-max-tablet:900px;

  --logo-width-mobile:110vw;
  --logo-max-mobile:750px;

  /* EL CALLEJÓN GAMER */
    /* PC */
  --brand-text-width-pc:88vw;
  --brand-text-max-pc:1000px;
  --brand-text-y-pc:-580px;
  --brand-text-bottom-pc:-45px;
  
/* TABLET */
  --brand-text-width-tablet:100vw;
  --brand-text-max-tablet:900px;
  --brand-text-y-tablet:-500px;
  --brand-text-bottom-tablet:-45px;
  
  /* MOBILE */
  --brand-text-width-mobile:110vw;
  --brand-text-max-mobile:900px;
  --brand-text-y-mobile:-280px;
  --brand-text-bottom-mobile:-45px;

  /* CONSTRUYENDO CADA PÍXEL */
  --status-size-pc:60px;
  --status-top-pc:-650px;

  --status-size-tablet:50px;
  --status-top-tablet:-650px;

  --status-size-mobile:30px;
  --status-top-mobile:-300px;

  /* MARCAS DE AGUA DEL FONDO */
  --bg-logo-size-pc:600px;
  --bg-logo-size-tablet:550px;
  --bg-logo-size-mobile:500px;

  /* MOVIMIENTO */
  --logo-float:7px;
  --brand-text-float:7px;

  /* NEÓN EL CALLEJÓN GAMER */
  --brand-glow-white:rgba(255,255,255,.48);
  --brand-glow-gray:rgba(190,200,215,.30);
}


/* =================================
   RESET
================================= */

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

html,
body{
  width:100%;
  min-height:100%;
  background:#05070d;
  overflow-x:hidden;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  color:#fff;
}


/* =================================
   HERO
================================= */

.hero{
  --mx:0px;
  --my:0px;

  position:relative;
  width:100%;
  min-height:100svh;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  isolation:isolate;

  background:#05070d;
}


/* =================================
   FONDO BASE
================================= */

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;

  background:
    radial-gradient(
      circle at 18% 45%,
      rgba(255,30,90,.23),
      transparent 30%
    ),

    radial-gradient(
      circle at 82% 42%,
      rgba(0,217,255,.22),
      transparent 32%
    ),

    radial-gradient(
      circle at 50% 85%,
      rgba(98,0,255,.14),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #05070d 0%,
      #060912 45%,
      #04060b 100%
    );
}


/* =================================
   FONDO DE LOGOS
================================= */

.hero-bg-logos{
  position:absolute;
  inset:-8%;
  z-index:1;

  pointer-events:none;

  background-image:
    url("https://green-giraffe-969215.hostingersite.com/wp-content/uploads/2026/08/fondo-logo.png");

  background-repeat:repeat;

  background-size:
    var(--bg-logo-size-pc)
    auto;

  background-position:center;

  opacity:.075;

  mix-blend-mode:screen;

  transform:
    translate(
      calc(var(--mx) * .15),
      calc(var(--my) * .15)
    )
    scale(1.04);

  animation:
    bgDrift
    45s
    linear
    infinite;
}


/* =================================
   ICONOS GAMER
================================= */

.floating-icons{
  position:absolute;
  inset:0;
  z-index:2;

  pointer-events:none;
}

.float-icon{
  position:absolute;
  display:block;

  font-weight:700;
  line-height:1;

  opacity:.38;

  user-select:none;

  filter:blur(.2px);
}

.i1{
  top:12%;
  left:10%;

  font-size:56px;

  color:#ff4cb5;

  text-shadow:
    0 0 8px #ff4cb5,
    0 0 22px #ff4cb5;

  animation:
    floatA
    9s
    ease-in-out
    infinite;
}

.i2{
  top:20%;
  right:12%;

  font-size:52px;

  color:#00e5ff;

  text-shadow:
    0 0 8px #00e5ff,
    0 0 22px #00e5ff;

  animation:
    floatB
    11s
    ease-in-out
    infinite;
}

.i3{
  top:28%;
  left:18%;

  font-size:48px;

  color:#8f7bff;

  text-shadow:
    0 0 8px #8f7bff,
    0 0 20px #8f7bff;

  animation:
    floatC
    10s
    ease-in-out
    infinite;
}

.i4{
  top:34%;
  right:19%;

  font-size:46px;

  color:#ffd54a;

  text-shadow:
    0 0 8px #ffd54a,
    0 0 18px #ffd54a;

  animation:
    floatA
    12s
    ease-in-out
    infinite;
}

.i5{
  top:46%;
  left:7%;

  font-size:58px;

  color:#00ffc8;

  text-shadow:
    0 0 8px #00ffc8,
    0 0 20px #00ffc8;

  animation:
    floatB
    10s
    ease-in-out
    infinite;
}

.i6{
  top:54%;
  right:8%;

  font-size:42px;

  color:#3aa8ff;

  text-shadow:
    0 0 8px #3aa8ff,
    0 0 18px #3aa8ff;

  animation:
    floatC
    13s
    ease-in-out
    infinite;
}

.i7{
  bottom:24%;
  left:14%;

  font-size:50px;

  color:#ff7ce1;

  text-shadow:
    0 0 8px #ff7ce1,
    0 0 20px #ff7ce1;

  animation:
    floatA
    10s
    ease-in-out
    infinite;
}

.i8{
  bottom:18%;
  right:15%;

  font-size:58px;

  color:#00e5ff;

  text-shadow:
    0 0 8px #00e5ff,
    0 0 22px #00e5ff;

  animation:
    floatB
    11s
    ease-in-out
    infinite;
}

.i9{
  bottom:10%;
  left:28%;

  font-size:44px;

  color:#6df7ff;

  text-shadow:
    0 0 8px #6df7ff,
    0 0 18px #6df7ff;

  animation:
    floatC
    9s
    ease-in-out
    infinite;
}

.i10{
  bottom:12%;
  right:28%;

  font-size:40px;

  color:#ffb347;

  text-shadow:
    0 0 8px #ffb347,
    0 0 18px #ffb347;

  animation:
    floatA
    12s
    ease-in-out
    infinite;
}

.i11{
  top:15%;
  left:47%;

  font-size:42px;

  color:#8cff68;

  text-shadow:
    0 0 8px #8cff68,
    0 0 18px #8cff68;

  animation:
    floatB
    10s
    ease-in-out
    infinite;
}

.i12{
  bottom:22%;
  right:44%;

  font-size:38px;

  color:#ff5d7d;

  text-shadow:
    0 0 8px #ff5d7d,
    0 0 16px #ff5d7d;

  animation:
    floatC
    11s
    ease-in-out
    infinite;
}


/* =================================
   VIÑETA
================================= */

.hero-vignette{
  position:absolute;
  inset:0;
  z-index:3;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.24),
      rgba(0,0,0,.08) 28%,
      rgba(0,0,0,.08) 72%,
      rgba(0,0,0,.24)
    ),

    radial-gradient(
      circle at center,
      transparent 48%,
      rgba(0,0,0,.20) 100%
    );
}


/* =================================
   CONTENIDO
================================= */

.hero-center{
  position:relative;
  z-index:5;

  width:min(92vw,1100px);
  min-height:100svh;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  gap:14px;

  padding:
    32px
    18px
    36px;
}

.brand-stack{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:0;
}


/* =================================
   LOGO ECG
================================= */

.logo-shell{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    10px
    18px
    2px;
}

.logo-shell::before{
  content:"";

  position:absolute;

  inset:
    -40px
    -60px;

  z-index:0;

  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(255,35,86,.26),
      transparent 38%
    ),

    radial-gradient(
      circle at 75% 50%,
      rgba(0,217,255,.30),
      transparent 38%
    ),

    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.10),
      transparent 36%
    );

  filter:blur(28px);

  animation:
    logoGlow
    4.5s
    ease-in-out
    infinite;
}

.logo-shell::after{
  content:"";

  position:absolute;

  width:70%;
  height:26px;

  bottom:0;
  left:50%;

  transform:translateX(-50%);

  z-index:0;

  background:
    linear-gradient(
      90deg,
      rgba(255,40,90,.22),
      rgba(255,255,255,.10),
      rgba(0,217,255,.22)
    );

  filter:blur(18px);

  opacity:.95;
}

.brand-logo{
  position:relative;
  z-index:1;

  display:block;

  width:
    min(
      var(--logo-width-pc),
      var(--logo-max-pc)
    );

  height:auto;

  filter:
    drop-shadow(
      0 0 8px
      rgba(255,255,255,.18)
    )

    drop-shadow(
      -10px 0 16px
      rgba(255,40,90,.22)
    )

    drop-shadow(
      10px 0 16px
      rgba(0,217,255,.24)
    );

  animation:
    logoFloat
    5s
    ease-in-out
    infinite;
}


/* =================================
   EL CALLEJÓN GAMER
================================= */

.text-shell{
  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 8px;

  transform:
    translateY(
      var(--brand-text-y-pc)
    );

  margin-bottom:
    var(--brand-text-bottom-pc);
}


/* Halo blanco / gris animado */
.text-shell::before{
  content:"";

  position:absolute;

  left:2%;
  right:2%;

  top:50%;

  height:70%;

  z-index:0;

  background:
    radial-gradient(
      ellipse at center,

      var(--brand-glow-white)
      0%,

      var(--brand-glow-gray)
      32%,

      rgba(255,255,255,.10)
      58%,

      transparent
      76%
    );

  filter:
    blur(24px);

  animation:
    brandTextGlow
    4.5s
    ease-in-out
    infinite;
}


.brand-text{
  position:relative;
  z-index:1;

  display:block;

  width:
    min(
      var(--brand-text-width-pc),
      var(--brand-text-max-pc)
    );

  height:auto;

  filter:
    drop-shadow(
      0 0 5px
      rgba(255,255,255,.42)
    )

    drop-shadow(
      0 0 12px
      rgba(220,225,235,.28)
    )

    drop-shadow(
      0 0 26px
      rgba(180,190,205,.16)
    );

  animation:
    brandTextFloat
    5s
    ease-in-out
    infinite;
}


/* =================================
   CONSTRUYENDO CADA PÍXEL
================================= */

.hero-status{
  position:relative;
  z-index:5;

  display:inline-block;

  margin-top:
    var(--status-top-pc);

  padding:
    0
    10px;

  text-align:center;

  font-size:
    clamp(
      16px,
      2vw,
      var(--status-size-pc)
    );

  font-weight:800;

  letter-spacing:2px;

  text-transform:uppercase;

  background:
    linear-gradient(
      90deg,

      #ffffff 0%,
      #ffffff 36%,
      #8ff8ff 50%,
      #ffffff 64%,
      #ffffff 100%
    );

  background-size:
    220%
    auto;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  -webkit-text-fill-color:
    transparent;

  text-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 10px rgba(0,229,255,.75),
    0 0 22px rgba(0,229,255,.60),
    0 0 38px rgba(0,140,255,.40);

  animation:
    statusPulse
    2.8s
    ease-in-out
    infinite,

    statusSweep
    4.8s
    linear
    infinite;
}


/* =================================
   ANIMACIONES
================================= */

@keyframes bgDrift{

  0%{
    background-position:
      0 0;
  }

  100%{
    background-position:
      220px 180px;
  }
}


@keyframes logoGlow{

  0%,
  100%{
    transform:
      scale(1);

    opacity:.8;
  }

  50%{
    transform:
      scale(1.05);

    opacity:1;
  }
}


@keyframes logoFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(
        calc(
          var(--logo-float) * -1
        )
      );
  }
}


/* EL CALLEJÓN GAMER:
   movimiento como el logo */

@keyframes brandTextFloat{

  0%,
  100%{
    transform:
      translateY(0)
      scale(1);

    filter:
      drop-shadow(
        0 0 5px
        rgba(255,255,255,.42)
      )

      drop-shadow(
        0 0 12px
        rgba(220,225,235,.28)
      )

      drop-shadow(
        0 0 26px
        rgba(180,190,205,.16)
      );
  }

  50%{
    transform:
      translateY(
        calc(
          var(--brand-text-float)
          * -1
        )
      )
      scale(1.015);

    filter:
      drop-shadow(
        0 0 8px
        rgba(255,255,255,.70)
      )

      drop-shadow(
        0 0 20px
        rgba(220,225,235,.44)
      )

      drop-shadow(
        0 0 36px
        rgba(180,190,205,.28)
      );
  }
}


/* Glow blanco/gris de
   EL CALLEJÓN GAMER */

@keyframes brandTextGlow{

  0%,
  100%{
    opacity:.48;

    transform:
      translateY(-50%)
      scale(.90);
  }

  50%{
    opacity:1;

    transform:
      translateY(-50%)
      scale(1.06);
  }
}


@keyframes statusPulse{

  0%,
  100%{
    opacity:.82;

    transform:
      scale(1);
  }

  50%{
    opacity:1;

    transform:
      scale(1.03);
  }
}


@keyframes statusSweep{

  0%{
    background-position:
      220%
      center;
  }

  100%{
    background-position:
      -220%
      center;
  }
}


@keyframes floatA{

  0%,
  100%{
    transform:
      translateY(0)
      translateX(0)
      scale(1);

    opacity:.34;
  }

  50%{
    transform:
      translateY(-16px)
      translateX(8px)
      scale(1.06);

    opacity:.52;
  }
}


@keyframes floatB{

  0%,
  100%{
    transform:
      translateY(0)
      translateX(0)
      scale(1);

    opacity:.30;
  }

  50%{
    transform:
      translateY(14px)
      translateX(-10px)
      scale(1.08);

    opacity:.5;
  }
}


@keyframes floatC{

  0%,
  100%{
    transform:
      translateY(0)
      translateX(0)
      rotate(0deg)
      scale(1);

    opacity:.28;
  }

  50%{
    transform:
      translateY(-10px)
      translateX(10px)
      rotate(8deg)
      scale(1.05);

    opacity:.48;
  }
}


/* =================================
   TABLET
================================= */

@media (max-width:1024px){

  .hero-bg-logos{
    background-size:
      var(--bg-logo-size-tablet)
      auto;

    opacity:.07;
  }


  .brand-logo{
    width:
      min(
        var(--logo-width-tablet),
        var(--logo-max-tablet)
      );
  }


  .text-shell{
    transform:
      translateY(
        var(--brand-text-y-tablet)
      );

    margin-bottom:
      var(--brand-text-bottom-tablet);
  }


  .brand-text{
    width:
      min(
        var(--brand-text-width-tablet),
        var(--brand-text-max-tablet)
      );
  }


  .hero-status{
  margin-top:var(--status-top-tablet);
  font-size:var(--status-size-tablet);
  letter-spacing:1.3px;
}
}


/* =================================
   MÓVIL
================================= */

@media (max-width:640px){

  .hero-center{
    width:100%;

    padding:
      24px
      14px
      30px;

    gap:10px;
  }


  .hero-bg-logos{
    background-size:
      var(--bg-logo-size-mobile)
      auto;

    opacity:.065;
  }


  .brand-logo{
    width:
      min(
        var(--logo-width-mobile),
        var(--logo-max-mobile)
      );
  }


  .text-shell{
    transform:
      translateY(
        var(--brand-text-y-mobile)
      );

    margin-bottom:
      var(--brand-text-bottom-mobile);
  }


  .brand-text{
    width:
      min(
        var(--brand-text-width-mobile),
        var(--brand-text-max-mobile)
      );
  }


  .hero-status{
    margin-top:
      var(--status-top-mobile);

    font-size:
      var(--status-size-mobile);

    letter-spacing:.8px;

    line-height:1.15;
  }


  .float-icon{
    opacity:.25;
  }


  .i1,
  .i2,
  .i3,
  .i4,
  .i5,
  .i6,
  .i7,
  .i8,
  .i9,
  .i10,
  .i11,
  .i12{
    font-size:34px;
  }


  .i1{
    top:10%;
    left:8%;
  }

  .i2{
    top:15%;
    right:8%;
  }

  .i3{
    top:25%;
    left:12%;
  }

  .i4{
    top:30%;
    right:10%;
  }

  .i5{
    top:44%;
    left:6%;
  }

  .i6{
    top:50%;
    right:6%;
  }

  .i7{
    bottom:22%;
    left:10%;
  }

  .i8{
    bottom:18%;
    right:10%;
  }

  .i9{
    bottom:10%;
    left:22%;
  }

  .i10{
    bottom:12%;
    right:24%;
  }

  .i11{
    top:12%;
    left:46%;
  }

  .i12{
    bottom:24%;
    right:46%;
  }
}