@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  color: white;
}

.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.card {
  background: #1e1e1e;
  padding: 35px 25px;
  border-radius: 20px;
  text-align: center;
  width: 280px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s,
    background 0.3s;
  will-change: transform;
}

.card:hover {
  transform: translateY(-10px);
  background: #252525;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
}

.foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;
}

h1 {
  margin: 10px 0;
  font-size: 22px;
  font-weight: 700;
}

.bio {
  color: #a0a0a0;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
  min-height: 45px;
}

.link {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.link a {
  color: white;
  margin-top: 30px;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 10px;
  background: #000;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
}

.link a:hover {
  background: #fff;
  color: #000;
}

.musica {
  margin-top: 15px;
  margin-bottom: 15px;
}

.musica iframe {
  border-radius: 12px;
  width: 100%;
}

.bubbles-container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}

.bubble{
  position:absolute;bottom:-60px;border-radius:50%;
  background:rgba(255,255,255,.15);
  width:var(--s);height:var(--s);left:var(--l);
  animation:floatUp var(--d) var(--delay) linear infinite;
}

@keyframes floatUp{
  0%,9%  {opacity:0;transform:translateY(0) translateX(0)}
  10%,90%{opacity:1}
  100%   {opacity:0;transform:translateY(-110vh) translateX(var(--dx))}
}

.bubble:nth-child(1){--s:7px;--l:2%;--dx:28px;--d:9s;--delay:0s}
.bubble:nth-child(2){--s:4px;--l:6%;--dx:-18px;--d:12s;--delay:0.4s}
.bubble:nth-child(3){--s:10px;--l:10%;--dx:42px;--d:8s;--delay:1.8s}
.bubble:nth-child(4){--s:3px;--l:14%;--dx:-30px;--d:14s;--delay:0.2s}
.bubble:nth-child(5){--s:8px;--l:18%;--dx:22px;--d:10s;--delay:2.6s}
.bubble:nth-child(6){--s:5px;--l:22%;--dx:-45px;--d:11s;--delay:2.7s}
.bubble:nth-child(7){--s:13px;--l:26%;--dx:55px;--d:7s;--delay:0.5s}
.bubble:nth-child(8){--s:4px;--l:30%;--dx:-12px;--d:13s;--delay:3.3s}
.bubble:nth-child(9){--s:9px;--l:34%;--dx:38px;--d:9s;--delay:0.4s}
.bubble:nth-child(10){--s:6px;--l:38%;--dx:-50px;--d:11s;--delay:2.2s}
.bubble:nth-child(11){--s:3px;--l:41%;--dx:18px;--d:15s;--delay:1.1s}
.bubble:nth-child(12){--s:11px;--l:45%;--dx:-28px;--d:8s;--delay:2.6s}
.bubble:nth-child(13){--s:5px;--l:49%;--dx:33px;--d:12s;--delay:0.1s}
.bubble:nth-child(14){--s:8px;--l:53%;--dx:-22px;--d:10s;--delay:4.5s}
.bubble:nth-child(15){--s:4px;--l:57%;--dx:50px;--d:13s;--delay:1.6s}
.bubble:nth-child(16){--s:12px;--l:61%;--dx:-42px;--d:9s;--delay:0.5s}
.bubble:nth-child(17){--s:5px;--l:65%;--dx:27px;--d:11s;--delay:1.9s}
.bubble:nth-child(18){--s:7px;--l:69%;--dx:-55px;--d:14s;--delay:0.2s}
.bubble:nth-child(19){--s:9px;--l:73%;--dx:35px;--d:10s;--delay:2.8s}
.bubble:nth-child(20){--s:6px;--l:77%;--dx:-32px;--d:12s;--delay:0.8s}
.bubble:nth-child(21){--s:3px;--l:81%;--dx:45px;--d:16s;--delay:3.5s}
.bubble:nth-child(22){--s:10px;--l:85%;--dx:-20px;--d:8s;--delay:1.3s}
.bubble:nth-child(23){--s:5px;--l:89%;--dx:60px;--d:11s;--delay:0.9s}
.bubble:nth-child(24){--s:8px;--l:93%;--dx:-38px;--d:9s;--delay:2.4s}
.bubble:nth-child(25){--s:4px;--l:97%;--dx:25px;--d:13s;--delay:1.3s}
.bubble:nth-child(26){--s:6px;--l:8%;--dx:-48px;--d:10s;--delay:4.8s}
.bubble:nth-child(27){--s:11px;--l:16%;--dx:52px;--d:8s;--delay:2.6s}
.bubble:nth-child(28){--s:4px;--l:24%;--dx:-15px;--d:14s;--delay:0.1s}
.bubble:nth-child(29){--s:8px;--l:32%;--dx:40px;--d:9s;--delay:3s}
.bubble:nth-child(30){--s:5px;--l:40%;--dx:-35px;--d:12s;--delay:1.5s}
.bubble:nth-child(31){--s:14px;--l:47%;--dx:65px;--d:7s;--delay:0.3s}
.bubble:nth-child(32){--s:3px;--l:55%;--dx:-25px;--d:15s;--delay:2.9s}
.bubble:nth-child(33){--s:9px;--l:63%;--dx:30px;--d:10s;--delay:1.4s}
.bubble:nth-child(34){--s:6px;--l:71%;--dx:-55px;--d:11s;--delay:4.1s}
.bubble:nth-child(35){--s:7px;--l:79%;--dx:20px;--d:13s;--delay:0.3s}
.bubble:nth-child(36){--s:4px;--l:87%;--dx:-40px;--d:9s;--delay:2s}
.bubble:nth-child(37){--s:10px;--l:3%;--dx:48px;--d:8s;--delay:4.2s}
.bubble:nth-child(38){--s:5px;--l:36%;--dx:-60px;--d:12s;--delay:1.5s}
.bubble:nth-child(39){--s:8px;--l:58%;--dx:35px;--d:10s;--delay:0.1s}
.bubble:nth-child(40){--s:3px;--l:91%;--dx:-18px;--d:14s;--delay:3.4s}