
:root{
  --bg:#0b0b0b;
  --fg:#f5f5f5;
  --gold:#c9a227;
  --muted:#2a2a2a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;scroll-behavior:smooth}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{max-width:1200px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:20;background:rgba(11,11,11,.8);backdrop-filter:blur(8px);border-bottom:1px solid #1b1b1b}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:6px}
.brand h1{font-size:20px;margin:0;font-weight:700;letter-spacing:.5px}
.tag{font-size:12px;color:#bbb}

.btn{display:inline-block;background:var(--gold);color:#121212;padding:12px 18px;border-radius:999px;font-weight:700;transition:transform .2s,opacity .2s}
.btn:hover{transform:translateY(-2px);opacity:.95}

.hero{position:relative;overflow:hidden}
.hero .media{position:relative;height:60vh;min-height:340px;border-bottom:1px solid #1b1b1b}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,1),rgba(11,11,11,.2) 40%,rgba(11,11,11,0) 70%)}
.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.hero .content{position:absolute;inset:0;display:flex;align-items:flex-end}
.hero .copy{padding:32px;max-width:900px;animation:fadeIn .8s ease both}
.hero .headline{font-size:40px;line-height:1.05;margin:0 0 8px;font-weight:900}
.hero .sub{color:#ddd;max-width:700px;margin:0 0 16px}
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.kpi{background:rgba(255,255,255,.06);border:1px solid #222;border-radius:16px;padding:12px 16px}
.kpi strong{color:var(--gold)}

.section{padding:48px 0;border-top:1px solid #151515}
.section h2{font-size:28px;margin:0 0 8px}
.section p.lead{color:#cfcfcf;margin:0 0 20px}

.grid{display:grid;gap:18px}
.grid.features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:rgba(255,255,255,.04);border:1px solid #1d1d1d;border-radius:20px;overflow:hidden;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card .card-body{padding:16px}

.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gallery img{border-radius:14px;border:1px solid #1f1f1f;cursor:pointer;transition:transform .2s}
.gallery img:hover{transform:scale(1.02)}

.video-wrap,.fb-wrap,.map-wrap{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;border:1px solid #1f1f1f;background:#000}
.video-wrap iframe,.fb-wrap iframe,.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.footer{border-top:1px solid #1b1b1b;padding:28px 0;color:#bdbdbd}
.footer small a{color:var(--gold)}

.whatsapp{
  position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:#fff;font-weight:900;
  box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:50;animation:pop .4s ease both;
}
.whatsapp svg{width:30px;height:30px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:60}
.modal.open{display:flex}
.modal img{max-width:92vw;max-height:90vh;border-radius:16px;border:1px solid #2a2a2a}

.form{display:grid;gap:12px}
.input, textarea{width:100%;padding:12px 14px;border-radius:12px;background:#121212;border:1px solid #272727;color:#eaeaea}
textarea{min-height:120px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.form .row{grid-template-columns:1fr} .hero .headline{font-size:32px}}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
