@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  position:relative;
}

/* Fondo de cuadrícula / malla idéntico a la imagen */
.grid-background{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.95) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.95) 100%);
}

.hero{
  min-height:55vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
  padding-top:60px;
}
.hero-content{
  position:relative;
  z-index:1;
}
h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(4rem,13vw,10rem);
  line-height:1;
  color:#39ff14;
  letter-spacing:-4px;
  text-shadow:0 0 7px #39ff14,0 0 18px rgba(57,255,20,.9),0 0 45px rgba(57,255,20,.55);
}

.buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:35px;
  flex-wrap:wrap;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:145px;
  padding:14px 24px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  transition:.25s ease;
}
.button:hover{transform:translateY(-3px)}

.btn-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
}

/* Botón YouTube */
.btn-youtube{
  background:rgba(255,0,0,.06);
  border:1px solid #ff0000;
  box-shadow:0 0 18px rgba(255,0,0,.15);
}
.btn-youtube:hover{
  background:rgba(255,0,0,.18);
  box-shadow:0 0 25px rgba(255,0,0,.35);
}

/* Botón NameMC */
.btn-namemc{
  background:rgba(255,255,255,.06);
  border:1px solid #ffffff;
  box-shadow:0 0 18px rgba(255,255,255,.15);
}
.btn-namemc:hover{
  background:rgba(255,255,255,.18);
  box-shadow:0 0 25px rgba(255,255,255,.35);
}

/* Botón TikTok */
.btn-tiktok{
  background:rgba(0,242,254,.04);
  border:1px solid transparent;
  background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), linear-gradient(135deg, #00f2fe 0%, #fe0979 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:0 0 18px rgba(0,242,254,.18);
}
.btn-tiktok:hover{
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), linear-gradient(135deg, #00f2fe 0%, #fe0979 100%);
  box-shadow:0 0 25px rgba(254,9,121,.4);
}

/* Contenedor Responsive de Video */
.video-section{
  display:flex;
  justify-content:center;
  padding:10px 24px 90px; /* Más pegado arriba y espaciado de las tarjetas de abajo */
  position:relative;
  z-index:2;
}
.video-wrapper{
  width:min(900px,100%);
  text-align:center;
}
.video-title{
  font-family:'Press Start 2P',monospace;
  color:#39ff14;
  font-size:clamp(1rem,2.5vw,1.5rem);
  margin-bottom:20px;
  text-shadow:0 0 10px rgba(57,255,20,.6);
}
.video-container{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(57,255,20,.3);
  box-shadow:0 0 20px rgba(57,255,20,.1);
  background:#000;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover suave en el marco del reproductor de video */
.video-container:hover{
  border-color: rgba(57,255,20,.8);
  box-shadow: 0 0 25px rgba(57,255,20,.35);
  transform: translateY(-2px);
}

.video-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.about{
  min-height:40vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:20px 24px 100px;
  position:relative;
  z-index:2;
}
.about-card{
  width:min(900px,100%);
  padding:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(10px);
  box-shadow:0 15px 50px rgba(0,0,0,.5);
  text-align:center;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover suave en los bordes de los cuadros de información */
.about-card:hover{
  border-color: rgba(57, 255, 20, 0.6);
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.25);
  transform: translateY(-3px);
}

.about-card h2{
  font-family:'Press Start 2P',monospace;
  color:#39ff14;
  font-size:clamp(1.2rem,3vw,2rem);
  margin-bottom:22px;
}
.about-card p{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  line-height:1.7;
  color:#e8e8e8;
}

/* Animaciones al hacer Scroll */
.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:600px){
  .hero{min-height:50vh;padding-top:40px}
  h1{letter-spacing:-2px}
  .buttons{margin-top:28px}
  .button{min-width:135px}
  .video-section{padding:20px 16px 60px}
  .video-container{border-radius:16px}
  .about{padding-left:16px;padding-right:16px;gap:24px}
  .about-card{padding:30px 22px;border-radius:20px}
}