:root{
--bg:#fff7f9;
--text:#1d1c1a;
--muted:#5d5a55;
--card:#fff0f5;
--border:#f2dfe6;
--accent:#3f7f73;
--accent-2:#d8b07a;
--radius:18px;
--shadow:0 10px 28px rgba(29,28,26,.07);
--max:1080px;
--font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:var(--font);
color:var(--text);
background:
radial-gradient(1200px 700px at 15% 10%, rgba(236,170,190,.20), transparent 55%),
radial-gradient(1000px 600px at 85% 0%, rgba(236,170,190,.12), transparent 55%),
linear-gradient(180deg, var(--bg), #fff 35%, var(--bg));
line-height:1.6;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
header{
position:sticky; top:0; z-index:50;
background:rgba(255,253,251,.92);
backdrop-filter:saturate(1.2) blur(10px);
border-bottom:1px solid var(--border);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:12px 0;
gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:220px}
.brand img{height:46px; width:auto; border-radius:14px; box-shadow: var(--shadow); background:#fff}
.brand strong{font-weight:800; letter-spacing:.2px}
.brand span{display:block; font-size:12px; color:var(--muted); margin-top:2px}
nav ul{list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
nav a{
text-decoration:none;
padding:8px 10px;
border-radius:12px;
color:var(--muted);
}
nav a[aria-current="page"]{color:var(--text); background:rgba(251,246,240,.9); border:1px solid var(--border)}
.cta{
display:inline-flex; align-items:center; justify-content:center;
gap:10px;
background:var(--accent);
color:white;
text-decoration:none;
padding:10px 14px;
border-radius:14px;
box-shadow: var(--shadow);
border:1px solid rgba(0,0,0,.03);
white-space:nowrap;
}
.cta.secondary{background:#fff; color:var(--text); border:1px solid var(--border)}
.hero{padding:44px 0 22px}
.badge{
display:inline-flex; align-items:center; gap:10px;
font-size:13px;
color:var(--muted);
border:1px solid var(--border);
background:#fff;
padding:7px 10px;
border-radius:999px;
}
h1{font-size:clamp(28px, 4.5vw, 44px); margin:14px 0 10px; line-height:1.15}
.lede{font-size:18px; color:var(--muted); max-width:72ch}
.grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px}
@media (max-width: 860px){
.grid{grid-template-columns:1fr}
.cta-row{flex-direction:column; align-items:flex-start}
.brand{min-width:0}
}
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
box-shadow: var(--shadow);
}
.cards{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:14px;
margin:18px 0 6px;
}
@media (max-width: 900px){ .cards{grid-template-columns:1fr} }
.card h3{margin:6px 0 6px}
.card p{margin:0; color:var(--muted)}
.kicker{font-size:13px; color:var(--muted); margin:0 0 8px}
.section{padding:22px 0}
.section p{color:var(--muted); max-width:86ch}
.cta-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.list{margin:0; padding-left:18px; color:var(--muted)}
hr.sep{border:0; border-top:1px solid var(--border); margin:22px 0}
footer{padding:28px 0 40px; border-top:1px solid var(--border); color:var(--muted)}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand img{height:40px; width:auto; border-radius:14px; background:#fff; box-shadow: var(--shadow)}
.small{font-size:13px; color:var(--muted)}
.two{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 860px){ .two{grid-template-columns:1fr} }
.form{display:grid; gap:10px}
input, textarea{
width:100%;
padding:12px 12px;
border-radius:14px;
border:1px solid var(--border);
background:#fff;
font-family:var(--font);
font-size:15px;
}
textarea{min-height:140px; resize:vertical}
button{
cursor:pointer;
padding:10px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.03);
background:var(--accent);
color:#fff;
box-shadow: var(--shadow);
font-size:15px;
}
.notice{
padding:12px 14px;
border:1px dashed var(--border);
border-radius:14px;
background:#fff;
color:var(--muted);
}
.price-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 900px){ .price-grid{grid-template-columns:1fr} }
.price{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.price .amount{font-size:28px; font-weight:900; margin:0 0 6px}
.price ul{margin:0; padding-left:18px; color:var(--muted)}
/* WhatsApp floating button */
.whatsapp-float{
position:fixed;
right:18px;
bottom:18px;
display:inline-flex;
align-items:center;
gap:10px;
padding:11px 14px;
border-radius:16px;
text-decoration:none;
background:#25D366;
color:#fff;
box-shadow: var(--shadow);
border:1px solid rgba(0,0,0,.05);
z-index:999;
}
.whatsapp-float:hover{filter:brightness(0.98)}
.whatsapp-icon{
width:18px; height:18px; display:inline-block;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.whatsapp-text{font-weight:700; font-size:14px}
@media (max-width: 420px){
.whatsapp-text{display:none}
.whatsapp-float{padding:12px}
}
/* Mobile menu button */
.menu-btn{
display:none;
border:1px solid var(--border);
background:#fff;
color:var(--text);
border-radius:14px;
padding:10px 12px;
box-shadow: var(--shadow);
font-size:18px;
line-height:1;
}
/* Mobile nav dropdown (prevents overlap) */
@media (max-width: 860px){
.brand strong{font-size:14px}
.brand span{display:none}
nav ul{display:none}
.menu-btn{display:inline-flex}
.cta{display:none} /* keep header clean; WhatsApp floating button stays */
header .nav{position:relative}
body.nav-open nav ul{
display:flex;
position:absolute;
left:18px;
right:18px;
top:64px;
flex-direction:column;
gap:6px;
padding:12px;
background:#fff;
border:1px solid var(--border);
border-radius:18px;
box-shadow: var(--shadow);
}
body.nav-open nav a{padding:10px 12px}
}