:root {
  --bg1: #000000;
  --bg2: #000000;
  --card: #000000;
  --accentA: #412e2e;
  --accentB: #94df6c;
  --muted: #edf2ed;
  --glass: rgba(245, 237, 237, 0.04);
  --max-width: 720px;
  --radius: 14px;
  --gap: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(139,92,246,0.12), transparent 8%),
              radial-gradient(900px 500px at 90% 90%, rgba(6,182,212,0.06), transparent 6%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
              background-image: url(/img/fondo3.jpg);
              background-position: center;
              background-size: cover;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.wrap {
  width: 100%;
  max-width: var(--max-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  backdrop-filter: blur(6px);
}

/* Profile */
.profile { text-align: center; }
.avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid rgba(255, 12, 12, 0.06);
  overflow: hidden;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.name { margin: 6px 0 4px; font-size: 20px; }
.bio { margin: 0; font-size: 13px; color: var(--muted); }




/* Links */
.links {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 6px;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(159, 149, 152, 0.796), rgba(251, 253, 254, 0.02));
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
}
.link-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8, 47, 221, 0.6); }
.link-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--glass);
  color: var(--accentB);
  font-size: 20px;
}
.link-title { margin: 0; font-size: 15px; color: #000000; }
.link-sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.external-arrow { margin-left: 12px; opacity: 0.7; }

/* Controls */
.controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn {
  cursor: pointer;
  border: 0;
  padding: 10px 14px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  border-radius: 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.btn.primary {
  background: linear-gradient(90deg, var(--accentA), var(--accentB));
  color: rgb(255, 255, 255);
  box-shadow: 0 8px 22px rgba(11,15,30,0.5);
}

/* Footer */
.foot { text-align: center; margin-top: 16px; font-size: 12px; color: var(--muted); }


/* Responsive */
@media (min-width:640px) {
  .wrap { padding: 28px; }
  .avatar { width: 128px; height: 128px; }
  .link-icon { width: 52px; height: 52px; }

}


@media (max-width:400px) {
    .profile{padding-top: 50px;}
   .profile{margin-top: 190px;} 

}












/* ... keep all previous CSS ... */

.link-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--glass);
  color: var(--accentB);
}
.link-icon svg {
  width: 22px;
  height: 22px;
}

/* ... rest stays the same ... */


.link-icon img {
  width: 28px;
  height: 28px;
  filter: invert(1); /* for white icons on dark background */
  transition: transform 0.2s;
}

.link-card:hover .link-icon img {
  transform: scale(1.1);
}

#call   {
  background-color: #00ae2b;
  color: #e78f24;
  border-radius: 20px;
}

#call a {
  text-decoration: none;
  color: aliceblue;
  padding: 15px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}