.card {
  text-align: center;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 540px;
  background: rgba(255, 255, 255, 0.70); /* blanco semitransparente */
  backdrop-filter: blur(6px); /* efecto de vidrio esmerilado */
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: px;
}

.name {
  margin: 5px 0;
  font-size: 30px;
  font-weight: bold;
}

.bio {
  color: #1a1a1a;
  margin-bottom: 12px;
  padding: 0 20px;   /* ← AQUI: 20px a izquierda y derecha */
}

.links a {
  display: block;
  margin: 2px auto;
  width: 100%; /* ocupa todo el ancho disponible */
  max-width: 444px; /* pero no más de 400px en PC */
  text-decoration: none;
  color: #fff;
  background: #0077b5;
  padding: 8px;
  border-radius: 15px;
  transition: background 0.3s;
}

.links a:hover {
  background: #005582;
}

.footer {
  margin-top: 14px;
  font-size: 0.75rem;
  color: #333;   /* gris más oscuro */
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: url("../assets/fondo.png") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: -8px auto;
}

/* Ajustes SOLO para pantallas de teléfono */
@media (max-width: 600px) {
  .links a {
    font-size: 0.85rem;   /* texto más pequeño */
    padding: 8px;         /* menos alto */
    border-radius: 10px;  /* esquinas más compactas */
    max-width: 90%;       /* más estrechos en móvil */
  }
}

/* Ajustes SOLO para pantallas de teléfono */
@media (max-width: 600px) {
  .card {
    max-width: 90%;   /* ocupa menos ancho en móvil */
    padding: 20px;    /* menos espacio interno */
  }
}


/* Instagram: degradado más vibrante */
.links a.instagram {
  background: linear-gradient(45deg,
    rgba(245, 133, 41, 0.9),
    rgba(253, 29, 29, 0.9),
    rgba(193, 53, 132, 0.9),
    rgba(131, 58, 180, 0.9),
    rgba(88, 81, 219, 0.9)
  );
}
.links a.instagram:hover {
  background: linear-gradient(45deg,
    rgba(245, 133, 41, 1),
    rgba(253, 29, 29, 1),
    rgba(193, 53, 132, 1),
    rgba(131, 58, 180, 1),
    rgba(88, 81, 219, 1)
  );
}


/* Facebook: azul más intenso */
.links a.facebook {
  background: rgba(24, 119, 242, 0.9);
}
.links a.facebook:hover {
  background: rgba(24, 119, 242, 1);
}

/* LinkedIn: azul corporativo más fuerte */
.links a.linkedin {
  background: rgba(10, 102, 194, 0.9);
}
.links a.linkedin:hover {
  background: rgba(10, 102, 194, 1);
}


/* X/Twitter: negro más marcado */
.links a.twitter {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.links a.twitter:hover {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}


/* TikTok: negro más marcado */
.links a.tiktok {
  background: linear-gradient(135deg,
    #25F4EE,   /* turquesa oficial */
    #FE2C55,   /* rojo oficial */
    #000000    /* negro oficial */
  );
  color: #fff;
}
.links a.tiktok:hover {
  background: linear-gradient(135deg,
    #25F4EE,
    #FE2C55,
    #000000
  );
  color: #fff;
}

/* WhatsApp: verde más llamativo con degradado */
.links a.whatsapp {
  background: linear-gradient(135deg,
    rgba(37, 211, 102, 0.95),   /* verde WhatsApp */
    rgba(7, 94, 84, 0.95)       /* verde más oscuro para contraste */
  );
  color: #fff;
}
.links a.whatsapp:hover {
  background: linear-gradient(135deg,
    rgba(37, 211, 102, 1),
    rgba(7, 94, 84, 1)
  );
}


.links a.youtube {
  background: linear-gradient(45deg,
    rgba(229, 57, 53, 0.9),
    rgba(213, 0, 0, 0.9),
    rgba(183, 28, 28, 0.9)
  );
}
.links a.youtube:hover {
  background: linear-gradient(45deg,
    rgba(229, 57, 53, 1),
    rgba(213, 0, 0, 1),
    rgba(183, 28, 28, 1)
  );
}

/* PayPal: azul corporativo */
.links a.paypal {
  background: linear-gradient(135deg,
    #003087,   /* azul oscuro oficial */
    #009CDE    /* azul claro oficial */
  );
  color: #fff;
}
.links a.paypal:hover {
  background: linear-gradient(135deg,
    #003087,
    #009CDE
  );
  color: #fff;
}

.links a.bancos {
  background: linear-gradient(135deg,
    rgba(0, 43, 91, 0.9),   /* azul oscuro */
    rgba(0, 102, 194, 0.9)  /* azul más claro */
  );
  color: #fff;
}
.links a.bancos:hover {
  background: linear-gradient(135deg,
    rgba(0, 43, 91, 1),
    rgba(0, 102, 194, 1)
  );
}

/* Threads: estilo minimalista en negro */
.links a.threads {
  background: rgba(0, 0, 0, 0.85);   /* negro translúcido */
  color: #fff;                       /* texto blanco */
}
.links a.threads:hover {
  background: rgba(0, 0, 0, 1);      /* negro sólido */
}

/* Fondo con transición suave */
body {
  transition: background-image 1s ease-in-out, opacity 1s ease-in-out;
}

/* Truco para evitar parpadeo entre imágenes */
.fade-bg {
  opacity: 0;
}

.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: pianoSlide 2.5s infinite;
}

@keyframes pianoSlide {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* Fondo con dos capas para fade suave real */
#bg1, #bg2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: opacity 1.2s ease-in-out;
  z-index: -1;
}

#bg1 {
  opacity: 1;
}

/* ========================================= */
/* Estilos generales de los botones (links)  */
/* ========================================= */
.links a {
  display: inline-flex;        /* flex para alinear icono + texto */
  align-items: center;         /* centra verticalmente */
  justify-content: center;     /* centra horizontalmente */
  gap: 10px;                   /* espacio entre icono y texto */
  text-align: center;           /* centra el texto dentro del botón */
  color: #fff;
  border: 0px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Hover más tecnológico */
.links a:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 50px rgba(0,255,255,0.4);
  background: #005582;
}

.links a:focus {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.links a .icon {
  width: 20px;   /* tamaño del icono */
  height: 20px;
  display: inline-block;
}

#bg2 {
  opacity: 0;
}

/* Telegram: azul oficial */
.links a.telegram {
  background: rgba(0, 136, 204, 0.9);  /* azul Telegram */
  color: #fff;
}
.links a.telegram:hover {
  background: rgba(0, 136, 204, 1);
}