body{
margin:0;
background:#020617;
color:white;
font-family:Arial;
}

.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

h1{
font-size:60px;
margin:0;
}

h2{
opacity:0.8;
margin-bottom:40px;
}

.buttons button{
background:#0ea5e9;
border:none;
padding:14px 30px;
margin:10px;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
}

.btn{
display:inline-block;
background:#00c3ff;
color:black;
padding:14px 30px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
cursor:pointer;
margin:10px; /* 🔥 ESTO ARREGLA TODO */
}

.btn:hover{
background:#0284c7;
}

.planes-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
margin-top:40px;
}

.plan-card{
background:#112b4a;
padding:30px;
border-radius:12px;
width:260px;
text-align:center;
}

.plan-card h3{
margin-bottom:10px;
}

.price{
font-size:22px;
margin-bottom:15px;
color:#00c3ff;
}

.plan-card ul{
list-style:none;
padding:0;
margin-bottom:20px;
}

.plan-card li{
margin:8px 0;
}

.highlight{
border:2px solid #00c3ff;
transform:scale(1.05);
}

.box {
  background: #112b4a;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  border-radius: 10px;
}

/* BOTÓN FLOTANTE WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  font-size: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background: #1ebe5d;
}