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

* {

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

html {

     scroll-behavior: smooth;

     -webkit-tap-highlight-color: transparent;
}

/* =========================
   BODY
========================= */

body {

     min-height: 100vh;

     display: flex;

     justify-content: center;

     align-items: center;

     padding: 20px;

     overflow-x: hidden;

     font-family: "Poppins", sans-serif;

     position: relative;

     color: white;

     background: #000;
}

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

.bg {

     position: fixed;

     top: 0;
     left: 0;

     width: 100%;
     height: 100%;

     background-image:
          url("imagenes/fondo.jpg");

     background-size: cover;

     background-position: center;

     background-repeat: no-repeat;

     z-index: 0;
}

/* CAPA OSCURA SUAVE */

.bg::after {

     content: "";

     position: absolute;

     inset: 0;

     background:
          rgba(0, 0, 0, 0.15);
}

/* =========================
   PARTICULAS
========================= */

.particles {

     position: fixed;

     top: 0;
     left: 0;

     width: 100%;
     height: 100%;

     z-index: 1;

     pointer-events: none;

     background-image:

          radial-gradient(rgba(255, 255, 255, 0.15) 2px,
               transparent 2px);

     background-size: 60px 60px;

     animation:
          particlesMove 18s linear infinite;
}

@keyframes particlesMove {

     from {

          transform:
               translateY(0);
     }

     to {

          transform:
               translateY(-60px);
     }
}

/* =========================
   CARD
========================= */

.container {

     position: relative;

     z-index: 2;

     width: 100%;

     max-width: 430px;

     padding: 40px 25px;

     border-radius: 32px;

     text-align: center;

     background:
          rgba(255, 255, 255, 0.12);

     backdrop-filter:
          blur(16px);

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

     border:
          1px solid rgba(255, 255, 255, 0.18);

     box-shadow:

          0 10px 40px rgba(0, 0, 0, 0.25);

     animation:
          fadeUp 1s ease;
}

/* =========================
   FOTO
========================= */

.profile-pic {

     width: 130px;

     height: 130px;

     object-fit: cover;

     border-radius: 50%;

     border: 5px solid white;

     margin-bottom: 20px;

     box-shadow:

          0 10px 30px rgba(255, 182, 218, 0.35);

     animation:
          float 4s ease-in-out infinite;
}

/* =========================
   TITULO
========================= */

h1 {

     font-size: 38px;

     font-weight: 800;

     margin-bottom: 10px;

     text-shadow:
          0 5px 15px rgba(255, 182, 218, 0.4);
}

/* =========================
   BIO
========================= */

.bio {

     margin-bottom: 30px;

     font-size: 16px;

     line-height: 1.6;

     opacity: 0.95;
}

/* =========================
   LINKS
========================= */

.links {

     display: flex;

     flex-direction: column;

     gap: 16px;
}

/* =========================
   BOTONES
========================= */

.btn {

     position: relative;

     overflow: hidden;

     text-decoration: none;

     color: white;

     padding: 16px;

     border-radius: 20px;

     font-weight: 700;

     font-size: 17px;

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 12px;

     transition:

          transform 0.25s ease,
          box-shadow 0.35s ease;
}

/* BRILLO */

.btn::before {

     content: "";

     position: absolute;

     top: 0;
     left: -100%;

     width: 100%;
     height: 100%;

     background:

          linear-gradient(120deg,
               transparent,
               rgba(255, 255, 255, 0.3),
               transparent);

     transition: 0.6s;
}

.btn:hover::before {

     left: 100%;
}

/* HOVER */

.btn:hover {

     transform:
          translateY(-4px) scale(1.03);
}

.btn:active {

     transform:
          scale(0.97);
}

/* =========================
   COLORES BOTONES
========================= */

.youtube {

     background:
          linear-gradient(135deg,
               #ff4b6e,
               #ff2f55);
}

.kick {

     background:
          linear-gradient(135deg,
               #75ffb2,
               #35d97f);
}

.tiktok {

     background:
          linear-gradient(135deg,
               #ff8fd8,
               #b76eff);
}

.facebook {

     background:
          linear-gradient(135deg,
               #8ec5ff,
               #5f9cff);
}

.instagram {

     background:
          linear-gradient(135deg,
               #ff9ed6,
               #d98fff);
}

.capitulos {

     background:
          linear-gradient(135deg,
               #ffd36e,
               #ffb347);
}

/* =========================
   GLOW HOVER
========================= */

.youtube:hover {

     box-shadow:

          0 0 20px rgba(255, 75, 110, 0.6),
          0 0 40px rgba(255, 75, 110, 0.35);
}

.kick:hover {

     box-shadow:

          0 0 20px rgba(117, 255, 178, 0.6),
          0 0 40px rgba(117, 255, 178, 0.35);
}

.tiktok:hover {

     box-shadow:

          0 0 20px rgba(183, 110, 255, 0.6),
          0 0 40px rgba(183, 110, 255, 0.35);
}

.facebook:hover {

     box-shadow:

          0 0 20px rgba(95, 156, 255, 0.6),
          0 0 40px rgba(95, 156, 255, 0.35);
}

.instagram:hover {

     box-shadow:

          0 0 20px rgba(255, 158, 214, 0.6),
          0 0 40px rgba(255, 158, 214, 0.35);
}

.capitulos:hover {

     box-shadow:

          0 0 20px rgba(255, 211, 110, 0.6),
          0 0 40px rgba(255, 211, 110, 0.35);
}

/* =========================
   FOOTER
========================= */

footer {

     margin-top: 30px;

     opacity: 0.9;

     font-size: 14px;
}

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

@keyframes fadeUp {

     from {

          opacity: 0;

          transform:
               translateY(30px);
     }

     to {

          opacity: 1;

          transform:
               translateY(0);
     }
}

@keyframes float {

     0% {

          transform:
               translateY(0px);
     }

     50% {

          transform:
               translateY(-8px);
     }

     100% {

          transform:
               translateY(0px);
     }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:480px) {

     body {

          padding: 15px;
     }

     .container {

          padding: 32px 20px;
     }

     h1 {

          font-size: 30px;
     }

     .bio {

          font-size: 15px;
     }

     .btn {

          padding: 15px;

          font-size: 16px;
     }

     .profile-pic {

          width: 110px;
          height: 110px;
     }
}