* {
  box-sizing: border-box;
}
:root{
  --accent:#0b5fff;
  --muted:#6b7280;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
body{margin:0;min-height:100vh;color:#fff;padding-top:70px}

/* Video de fondo */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
}

.wrap{width:100%;max-width:980px;margin:auto;padding:0 16px}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:1000}
.logo{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.logo img{width:60px;height:auto;border-radius:8px}

/* Men? */
.navbar{display:flex;gap:20px}
.navbar a{color:#fff;text-decoration:none;font-weight:600;transition:0.3s}
.navbar a:hover{color:var(--accent)}

/* Bot?n hamburguesa */
.menu-toggle{display:none;flex-direction:column;cursor:pointer;gap:5px}
.menu-toggle span{width:25px;height:3px;background:#fff;border-radius:5px}

/* Responsive */
@media(max-width:768px){
  .navbar{display:none;flex-direction:column;position:absolute;top:70px;right:0;background:rgba(0,0,0,0.8);width:200px;padding:20px;border-radius:12px}
  .navbar.active{display:flex}
  .menu-toggle{display:flex}
}

/* Card principal */
.card{
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 40px rgba(2,6,23,0.3);
  display:grid;
  grid-template-columns:1fr 360px;
  gap:22px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.left h1{margin:0 0 10px;font-size:54px;font-weight:900;text-transform:uppercase;
  background:linear-gradient(90deg,#b22234,#fff,#3c3b6e,#b22234);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:2px 2px 6px rgba(0,0,0,0.7)
}
.subtitle{color:#fff;font-size:20px;font-weight:700;margin-bottom:18px;text-shadow:1px 1px 4px rgba(0,0,0,0.7)}

.price{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.price .amount{font-size:36px;font-weight:800;color:#fff !important;text-shadow:1px 1px 4px rgba(0,0,0,0.8)}
.badge{background:#fffbeb;border:1px solid #fde68a;padding:6px 10px;border-radius:999px;font-size:13px;color:#92400e}

.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:12px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:all 0.2s}
.btn:hover{transform:scale(1.05)}
.btn-wa{background:#25D366;color:#fff}
.btn-fb{background:#1877F2;color:#fff}

.features{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.feature{padding:10px 12px;background:rgba(255,255,255,0.2);border-radius:10px;font-size:14px;color:#fff}

.sidebar{background:rgba(255,255,255,0.2);border-radius:12px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;backdrop-filter:blur(6px)}
footer{text-align:center;color:#fff;font-size:13px;margin-top:18px;text-shadow:1px 1px 4px rgba(0,0,0,0.7)}

.form-box{margin-top:20px;width:100%}
.form-box form{display:flex;flex-direction:column;gap:12px}
.form-box input,.form-box textarea{padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;width:100%}
.form-box button{background:var(--accent);color:#fff;border:none;padding:12px;border-radius:10px;font-weight:600;cursor:pointer;transition:all 0.2s}
.form-box button:hover{transform:scale(1.05)}

@media(max-width:880px){
  .card{grid-template-columns:1fr;padding:20px}
  .left h1{font-size:36px;text-align:center}
  .price{justify-content:center}
}