:root { --bg:#0f0f12; --text:#ffffff; --muted:#c9c9d1; --accent:#e91e63; --accent2:#9c27b0; --card:#17171b; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }

.nav { position:fixed; top:0; left:0; right:0; z-index:1000; backdrop-filter:saturate(180%) blur(10px); background:rgba(15,15,18,.6); border-bottom:1px solid rgba(255,255,255,.06); }
.nav-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; }
.brand { display:flex; align-items:center; gap:10px; font-size:40px; font-weight:700; letter-spacing:.5px; }
.brand-logo { height:60px!important; width:auto!important; }
.tabs { display:flex; gap:18px; }
.tabs a { padding:8px 10px; border-radius:8px; color:var(--muted); }
.tabs a.active, .tabs a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.menu-btn { display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#1f1f24; border:1px solid rgba(255,255,255,.08); color:#fff; }
.menu-btn svg { width:22px; height:22px; }

.section { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:100px 20px 60px; }
.container { max-width:1100px; width:100%; position:relative; z-index:2; }
.hero { text-align:center; }
.hero h1 { font-size:48px; margin:0 0 10px; }
.hero p { font-size:18px; color:var(--muted); }
.cta { margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:#fff; cursor:pointer; }
.btn.accent { background:linear-gradient(180deg, #e91e63, #b0003a); border-color:#b0003a; }
.btn:focus { outline:none; }

.parallax { position:relative; }
.parallax::before, .parallax::after { content:""; position:absolute; inset:0; background-position:center center; background-size:cover; background-attachment:fixed; z-index:0; transition:opacity .8s ease; }
.parallax::before { opacity:1; animation:parallaxSwap 12s ease-in-out infinite; }
.parallax::after { opacity:0; animation:parallaxSwapAlt 12s ease-in-out infinite; }
.parallax-home::before { background-image:url('../icons/dashboard-1.jpg'); }
.parallax-home::after { background-image:url('../icons/dashboard-2.jpg'); }
.parallax-tracking::before { background-image:url('../icons/dashboard-4.jpg'); }
.parallax-tracking::after { background-image:url('../icons/dashboard-5.jpg'); }
.parallax-contact::before { background-image:url('../icons/dashboard-1.jpg'); }
.parallax-contact::after { background-image:url('../icons/dashboard-2.jpg'); }
.parallax-about::before { background-image:url('../icons/dashboard-1.jpg'); }
.parallax-about::after { background-image:url('../icons/dashboard-2.jpg'); }
.parallax-collections::before { background-image:url('../icons/dashboard-3.jpg'); }
.parallax-collections::after { background-image:url('../icons/dashboard-2.jpg'); }
@keyframes parallaxSwap {
  0% { opacity:1 }
  45% { opacity:1 }
  50% { opacity:0 }
  95% { opacity:0 }
  100% { opacity:1 }
}
@keyframes parallaxSwapAlt {
  0% { opacity:0 }
  45% { opacity:0 }
  50% { opacity:1 }
  95% { opacity:1 }
  100% { opacity:0 }
}
.overlay { background:linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.60)); position:absolute; inset:0; z-index:1; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:24px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.col-6 { grid-column:span 6; }
.col-12 { grid-column:span 12; }
@media (max-width:900px){ .col-6 { grid-column:span 12; } .hero h1 { font-size:36px; } }

.section-title { font-size:28px; margin:0 0 12px; }
.muted { color:var(--muted); }

.about-stats { display:flex; gap:12px; margin:14px 0 6px; flex-wrap:wrap; }
.stat { background:#1f1f24; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:120px; }
.stat .num { font-size:20px; font-weight:700; }
.stat .label { font-size:12px; color:var(--muted); }

.features { list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.features li { background:#1f1f24; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; }

.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery img { width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
@media (max-width:900px){ .gallery { grid-template-columns:1fr; } }

.socials { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.socials a { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:#1f1f24; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.socials a svg { width:18px; height:18px; }

.reviews { display:flex; flex-direction:column; gap:12px; }
.reviews .item { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; }

.playlist { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.playlist iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.yt { margin-top:18px; }
.yt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.yt-item { display:flex; flex-direction:column; gap:8px; }
.yt-item .video { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.yt-item .video iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
@media (max-width:900px){ .yt-grid { grid-template-columns:1fr; } }


.track-form { display:flex; gap:12px; flex-wrap:wrap; }
.input { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#1f1f24; color:#fff; min-width:240px; }

.map { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.map iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

.footer { text-align:center; color:var(--muted); padding:30px 20px; }
.footer-socials { margin-top:10px; display:flex; align-items:center; justify-content:center; gap:12px; }
.footer-socials a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#1f1f24; border:1px solid rgba(255,255,255,.08); color:#fff; }
.footer-socials a svg { width:20px; height:20px; }
.whatsapp-fab { position:fixed; right:20px; bottom:20px; z-index:1100; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); }
.whatsapp-fab:hover { filter:brightness(1.05); transform:translateY(-1px); }
.whatsapp-fab svg { width:28px; height:28px; }
@media (max-width:900px){ .whatsapp-fab { right:14px; bottom:14px; width:52px; height:52px; } }
.menu-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; z-index:1190; transition:opacity .2s ease; }
.menu-backdrop.show { opacity:1; pointer-events:auto; }
.side-menu { position:fixed; top:0; bottom:0; left:0; width:280px; max-width:80vw; background:#1f1f24; border-right:1px solid rgba(255,255,255,.08); z-index:1200; transform:translateX(-100%); transition:transform .25s ease; display:flex; flex-direction:column; }
.side-menu.open { transform:translateX(0); }
.side-header { padding:16px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); }
.side-links { display:flex; flex-direction:column; padding:8px; gap:6px; }
.side-links a { padding:10px 12px; border-radius:8px; color:var(--muted); }
.side-links a:hover, .side-links a.active { color:#fff; background:rgba(255,255,255,.06); }
@media (max-width:900px){ .tabs { display:none; } .menu-btn { display:inline-flex; } }