:root{--bg:#0b0c10;--panel:#101219;--ink:#eef1f5;--muted:#aab3c2;--brand:#28d07f;--brand-ink:#062a1a;--stroke:#202634}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 800px at 10% -10%, #182034, transparent 60%), var(--bg);color:var(--ink);line-height:1.6}
.container{max-width:1080px;padding:0 20px;margin:0 auto}
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.section-title{font-size:32px;margin:0 0 20px 0;letter-spacing:.2px;text-align:center}
.muted{color:var(--muted)}.sm{font-size:12px}

.site-header{position:sticky;top:0;z-index:10;background:rgba(16,18,25,.8);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--stroke)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;color:var(--ink);text-decoration:none;font-size:20px}
.nav a{color:var(--ink);text-decoration:none;margin-left:16px;opacity:.9}
.nav .btn-sm{padding:10px 14px;border-radius:10px;background:var(--brand);color:#072012;font-weight:800}

.hero{padding:72px 0 32px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.hero h1{font-size:44px;margin:0 0 10px}
.hero-cta{display:flex;gap:12px;margin:16px 0 10px;justify-content:center}
.badges{list-style:none;padding:0;margin:12px 0 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero .grid-2{display:block}
.hero-copy{max-width:720px;margin:0 auto;text-align:center}
.placeholder{background:linear-gradient(180deg,#121521,#0e111a);border:1px solid var(--stroke);border-radius:16px;overflow:hidden}
.placeholder img{display:block;width:100%;height:auto}

.btn{background:var(--brand);color:var(--brand-ink);border:none;padding:14px 18px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(40,208,127,.25)}
.btn:hover{filter:brightness(1.03)}
.btn.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--stroke)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;overflow:hidden}
.card-media{aspect-ratio:1080/1060}
.card-media img{width:100%;height:100%;display:block;object-fit:cover}
.card-body{padding:16px}
.card h3{margin:0 0 6px}
.price{display:flex;align-items:center;gap:10px;margin:6px 0}
.price .old{text-decoration:line-through;color:var(--muted)}
.price .now{font-weight:800;color:var(--ink)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.features{grid-template-columns:1fr}}
.feature{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:18px}

/* Beneficios al final */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.benefits{grid-template-columns:1fr}}
.benefits .benefit{max-width:800px;margin:0 auto;width:100%}
.benefit{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:12px}
.benefit summary{font-weight:800;cursor:pointer}
.benefit ul{margin:8px 0 0 18px}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}
.review{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;overflow:hidden}
.review img{width:100%;height:auto;display:block}
.review figcaption{padding:10px;font-size:14px;color:var(--muted)}

/* Calidad - grid de videos */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
@media (max-width:900px){.video-grid{grid-template-columns:1fr}}
.video-wrap{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:720/1280}
.video-wrap video{display:block;width:100%;height:100%;object-fit:cover}

.form{display:grid;gap:12px;margin-top:10px}
.form-row{display:flex;flex-direction:column;gap:6px}
input,select{background:#0e1118;color:var(--ink);border:1px solid var(--stroke);border-radius:10px;padding:12px}
input::placeholder{color:#6b7280}
.checkbox{display:flex;align-items:center;gap:8px;font-weight:600}
.checkbox input{accent-color:var(--brand)}
.options{display:grid;gap:6px;margin-top:6px}
.option{display:flex;align-items:center;gap:8px}
.option input{accent-color:var(--brand)}

.contact .placeholder{align-self:center}

.site-footer{border-top:1px solid var(--stroke);padding:22px 0;margin-top:24px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px}


/* Modales */
.modal{position:fixed;inset:0;display:none;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:0}
.modal-dialog{position:relative;z-index:1;max-width:920px;margin:40px auto;padding:0 12px}
.modal-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;overflow:hidden}
@media (max-width:900px){.modal-content{grid-template-columns:1fr;border-radius:14px}}
.modal-media img{width:100%;height:auto;display:block}
.modal-body{padding:18px}
.modal-actions{margin-top:10px}
.modal-close{position:absolute;right:28px;top:14px;background:transparent;color:var(--ink);border:1px solid var(--stroke);width:36px;height:36px;border-radius:10px;font-size:20px;cursor:pointer}

/* Mini resumen del carrito en el modal */
.cart-summary{display:flex;align-items:center;gap:12px;margin-bottom:12px;background:#0e1118;border:1px solid var(--stroke);padding:10px;border-radius:12px}
.cart-summary .thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--stroke)}
.cart-summary .info{display:flex;flex-direction:column}

/* Mobile-first refinements */
@media (max-width:600px){
  .container{padding:0 14px}
  .hero{padding:56px 0 24px}
  .section{padding:48px 0}
  .btn{padding:14px 16px}
  input,select{padding:14px}
  .modal-dialog{margin:16px auto}
  .modal-body{padding-bottom:92px}
  #btn-finalizar{position:sticky;bottom:0;width:100%}
}