@import url("https://fonts.googleapis.com/css2?family=Unbounded&display=swap");

/* ===============================
   1. ICONO DE PERFIL
   =============================== */
.icon {
  position: absolute;
  top: 50px; /* Superpuesto al banner */
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #00000030;
  background: #00000030;
}

.icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para que la imagen del icono no se corte */
}

/* ===============================
   2. NOMBRE DEL PERFIL
   =============================== */
.name {
  position: relative;
  text-align: center;
  top: 190px;
  font-family: var(--font-family, "Unbounded");
  background-image: url("../assets/white.gif"); /* Ruta al archivo GIF */
  background-position: center center; /* Centra el GIF en el contenedor */
  background-repeat: no-repeat; /* No repite el GIF */
  z-index: 1;
}
.name h1 {
  color: #ffffff;
  font-size: 27px;
  margin: 0px 0px 30px;
  font-weight: 600;
  user-select: none;
  font-family: "Unbounded";
  filter: drop-shadow(0 0 0.2rem #ffffff);
}

/* ===============================
   3. REDES SOCIALES
   =============================== */
/* Contenedor de redes sociales */
/* Contenedor de redes sociales */
.redes {
  position: relative;
  color: #ffffff;
  font-size: 28px;
  top: 190px;
  left: 165px;
}

/* Estilo individual para cada red social */
.redes a {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  color: #ffffff;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
}

/* Contenedor para los íconos (para aislar el filter) */
.redes i,
.faceit {
  filter: drop-shadow(0 0 0.2rem #ffffff);
}

/* Tooltip o nombre de la red social (aparece arriba) */
.social-name {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff; /* Color del texto */
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  z-index: 10;
}

/* Pseudo-elemento para el fondo borroso */
.social-name::before {
  content: "";
  position: absolute;
  top: -4px; /* Ajuste para compensar el desenfoque */
  left: -4px; /* Ajuste para compensar el desenfoque */
  width: calc(100% + 8px); /* Aumenta el ancho para incluir el desenfoque */
  height: calc(100% + 8px); /* Aumenta la altura para incluir el desenfoque */
  background: rgba(0, 0, 0, 0.6);
  filter: blur(4px) contrast(100%) brightness(80%);
  border-radius: 10px; /* Coincide con el borde del contenedor */
  z-index: -1;
}

/* Mostrar tooltip al pasar el mouse */
.redes a:hover .social-name {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-3px);
}

/* Hover: mostrar tooltip y animación */
.redes a:hover .gc + .social-name {
  transform: translateX(-50%) translateY(-3px);
}

/* Hover: mostrar tooltip y animación */
.redes a:hover .faceit + .social-name {
  transform: translateX(-50%) translateY(-3px);
}
/* colocar bien centrado */
.redes a .gc + .social-name {
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  left: 55%;
}
/* colocar bien centrado */
.redes a .faceit + .social-name {
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  left: 60%;
}

/* Estilo específico para el ícono de GC */
.gc {
  width: 30px;
  filter: brightness(0) invert(1) drop-shadow(0 0 0.2rem #ffffff);
  margin-left: 0;
  position: relative;
  top: 5px;
}

/* Posiciona el nombre sobre el ícono de GC */
.redes a .gc + .social-name {
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  bottom: 93%;
}

/* ===============================
   4. CAJA SOCIALBOX
   =============================== */
#socialbox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 500px;
  height: auto;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  filter: drop-shadow(0 0 0.2rem #020202bd);
  z-index: 100;
}

/* Estilo para los enlaces dentro de #socialbox */
#socialbox a {
  color: #ffffff;
  text-decoration: none;
  margin: 12px;
  flex-direction: row;
  cursor: url(../assets/cursorWhite.png) 16 16, auto !important;
}

/* ===============================
   5. PERFIL ADICIONAL (OPCIONAL)
   =============================== */
.profile-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 590px;
  margin: 20px auto;
  margin-top: 219px;
  background: rgba(0, 0, 0, 0.6);
}

.profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover; /* Asegurar que la imagen se ajuste bien */
  filter: grayscale(1);
}

.profile-name {
  flex: 1;
  margin-left: 12px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  font-family: "Unbounded";
}

.profile-button {
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}