:root{--bg:#0c0b0d; --fg:#f6f6f7; --muted:#cfcfd4; --accent:#b28a3a; --panel:#151417; --soft:#242228;}
*{box-sizing:border-box} body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--fg); background:var(--bg); line-height:1.45; padding-bottom:80px}
.container{width:min(1100px,92%); margin:auto}
.header-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand-logo{height:42px; width:auto; filter:none;}
.nav a{color:var(--muted); text-decoration:none; margin-left:14px; font-size:14px}
.nav a:hover{color:var(--fg)}

.hero{padding:40px 0}
.grid.two{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero h1{font-size:32px; margin:0 0 10px}
.lead{color:var(--muted); margin:0 0 16px}
.hero-media img{width:100%; height:auto; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.35)}

.section{padding:48px 0}
.section.dark{background:var(--panel)}
h2{margin:0 0 12px; font-size:28px}
p{color:var(--muted)}

.benefits{list-style:none; padding:0; margin:12px 0 16px}
.benefits li{margin:6px 0}

.img-wrap img{width:100%; height:auto; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.3)}

.btn{display:inline-block; background:var(--soft); color:var(--fg); padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn:hover{filter:brightness(1.08)}
.btn-primary{background:#22c55e; color:#06210f}
.btn-accent{background:linear-gradient(135deg,#b28a3a,#e8d28a); color:#201a0a}

.badge-authority{display:inline-block; background:linear-gradient(135deg,#1d1b20,#2a2730); border:1px solid rgba(255,255,255,.08); color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.2px; margin:0 0 10px}

.guarantee{display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px; margin-top:12px}
.guarantee .shield{font-size:18px; line-height:1; margin-top:1px}
.guarantee p{margin:0; color:var(--fg); font-size:14px}

.urgency{text-align:left}
.countdown{display:flex; gap:16px; padding:10px 14px; border:1px solid rgba(255,255,255,.14); border-radius:12px; margin:10px 0 16px}
.countdown div{min-width:70px}
.countdown span{font-size:28px; display:block}

.slider{position:relative; overflow:hidden; border-radius:14px; background:#111; box-shadow:0 8px 30px rgba(0,0,0,.3)}
.slider .track{display:flex; transition:transform .4s ease}
.slider .slide{min-width:100%; padding:10px}
.slider .slide img{width:100%; height:auto; border-radius:12px}
.slider .nav{position:absolute; z-index:2; pointer-events:auto; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer}
.slider .nav:hover{background:rgba(0,0,0,.6)}
.slider .prev{left:8px}
.slider .next{right:8px}

/* Antes/Después compacto */
.slider.before-after .slide img{max-height:520px; object-fit:contain}

/* Social slider */
.social-track-wrap{max-width:900px; margin:0 auto}
.slider.social-slider .slide img{width:100%; height:auto; max-height:420px; object-fit:contain}

/* Reseñas compactas */
.reviews-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.reviews-grid figure{margin:0; max-width:480px; width:100%; justify-self:center}
.reviews-grid img{width:100%; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* Mapa */
.map-wrap{position:relative; padding-top:56%; border-radius:14px; overflow:hidden}
.map-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Footer & sticky */
.footer{padding:20px 0 30px; border-top:1px solid #1f1d22}
.footer-grid{display:flex; justify-content:space-between; align-items:center; gap:10px}
.icon{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:#141217; color:var(--muted); text-decoration:none; font-size:14px}
.icon:hover{color:var(--fg)}
.icon.ig::before{content:'IG'; background:#e1306c; color:#fff; font-weight:700; font-size:11px; width:20px; height:20px; display:inline-grid; place-items:center; border-radius:6px}
.icon.fb::before{content:'f'; background:#1877f2; color:#fff; font-weight:900; font-size:14px; width:20px; height:20px; display:inline-grid; place-items:center; border-radius:6px}
.icon.wa::before{content:'WA'; background:#25D366; color:#06210f; font-weight:900; font-size:11px; width:20px; height:20px; display:inline-grid; place-items:center; border-radius:6px}

/* Sticky CTA */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; background:rgba(21,20,23,.9); backdrop-filter:saturate(140%) blur(6px); border-top:1px solid rgba(255,255,255,.08); z-index:9999}
.sticky-inner{max-width:1100px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.sticky-text{color:var(--fg); font-weight:600}

@media (max-width:860px){
  .grid.two{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .slider.social-slider .slide img{max-height:300px}
  .reviews-grid{grid-template-columns:1fr}
}