* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/* 🌈 BASE + GRADIENT DINÁMICO (COMPATIBLE) */
body {
--x: 50%;
--y: 50%;

overflow: hidden;
font-family: 'Inter', sans-serif;
color: white;

background: #f5f5f5;
}

/* 🌊 CANVAS FLUID */
#fluid {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -2;

filter: blur(70px) saturate(130%) brightness(1.1);
mix-blend-mode: overlay;

pointer-events: none;
}

/* 🌫️ NOISE */
.noise {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;

background-image: url("https://grainy-gradients.vercel.app/noise.svg");
opacity: 0.35;
mix-blend-mode: soft-light;
}

/* ✨ LUZ EXTRA */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;

background:
radial-gradient(circle at 70% 30%, rgba(255, 180, 120, 0.25), transparent 60%),
radial-gradient(circle at 30% 70%, rgba(120, 160, 255, 0.25), transparent 60%);
}

/* 🎯 HERO */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}

.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 5vw, 48px);
max-width: 800px;
line-height: 1.2;
margin-bottom: 20px;
}

.hero p {
font-size: clamp(14px, 2vw, 18px);
max-width: 500px;
opacity: 0.9;
margin-bottom: 40px;
}

/* 🔘 BOTONES */
.cta {
display: flex;
flex-direction: column;
gap: 20px;
}

.btn {
border: 1px solid rgba(255,255,255,0.6);
padding: 14px 40px;
border-radius: 50px;
text-decoration: none;
color: white;
font-size: 14px;
letter-spacing: 1px;

backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.btn:hover {
background: rgba(255,255,255,0.12);
transform: scale(1.05);
border-color: rgba(255,255,255,0.9);
}

/* 🖥️ DESKTOP */
@media (min-width: 768px) {
.cta {
flex-direction: row;
}
}

html, body {
height: 100%;
}