*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#fafaf8;
--surface:#fff;
--text:#1d1d1f;
--muted:#666;
--accent:#b9935a;
--radius:18px;
}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}
h1,h2,h3{font-family:'Cormorant Garamond',serif}
.hero{
min-height:100vh;
padding:2rem 8%;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,#fff,#f6f3ee);
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 0;
}
.logo{
font-size:2rem;
font-weight:700;
letter-spacing:.3rem;
}
.nav ul{
display:flex;
gap:2rem;
list-style:none;
}
.nav a{
text-decoration:none;
color:var(--text);
transition:.25s;
}
.nav a:hover{color:var(--accent)}
.hero-content{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
flex:1;
gap:4rem;
}
.hero-text h1{
font-size:4rem;
line-height:1;
margin-bottom:1rem;
}
.hero-text p{
font-size:1.15rem;
max-width:600px;
color:var(--muted);
margin-bottom:2rem;
}
.buttons{display:flex;gap:1rem;flex-wrap:wrap}
.btn{
padding:.95rem 1.7rem;
border-radius:999px;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.primary{background:var(--accent);color:#fff}
.primary:hover{transform:translateY(-3px)}
.secondary{
border:2px solid var(--accent);
color:var(--accent);
}
.secondary:hover{
background:var(--accent);
color:#fff;
}
.hero-phone{
display:flex;
justify-content:center;
}
.phone{
width:290px;
height:590px;
background:#111;
padding:14px;
border-radius:42px;
box-shadow:0 30px 60px rgba(0,0,0,.18);
transform:rotate(-6deg);
transition:.4s;
}
.phone:hover{transform:rotate(0) scale(1.03)}
.screen{
height:100%;
background:linear-gradient(135deg,#fff,#f3ede5);
border-radius:30px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:2rem;
}
main section{
padding:6rem 8%;
}
h2{
font-size:3rem;
margin-bottom:2rem;
text-align:center;
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}
.card{
background:#fff;
padding:2rem;
border-radius:var(--radius);
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
}
#features ul{
max-width:700px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1rem;
list-style:"✓ ";
}
#faq h3{margin-top:1.5rem}
#contacto{
text-align:center;
background:#fff;
}
footer{
padding:2rem;
text-align:center;
color:var(--muted);
}