/* /servidor-listo/: página de venta del Servidor listo (bgmu.net). Mismos colores y letras que la portada. */
.sl { padding-bottom: 40px; }
.sl .h2-gold { background: var(--oro-g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl h1, .sl h2 { font-family: var(--f-display); letter-spacing: .01em; }

/* Cabecera */
.sl-hero { padding: clamp(40px, 7vw, 84px) 0 30px; background: radial-gradient(ellipse 70% 60% at 85% 20%, #f2a33a1f, transparent 70%), radial-gradient(ellipse 50% 50% at 10% 0%, #34d1e014, transparent 70%); }
.sl-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sl-hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; margin: 14px 0 0; }
.sl-hero .bgt-lead { margin: 18px 0 24px; font-size: clamp(16px, 1.5vw, 18px); }
.sl-pts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13.5px var(--f-mono); color: var(--mute); }
.sl-pts li::before { content: "✓ "; color: var(--exc); }

.sl-consola { background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 70px -40px #000; }
.sl-consola__top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12px var(--f-mono); color: var(--dim); }
.sl-consola__top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-hi); }
.sl-consola__top span { margin-left: 6px; }
.sl-consola__top b { margin-left: auto; color: var(--ok); font-weight: 600; }
.sl-consola ol { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 9px; font: 13.5px/1.4 var(--f-mono); color: var(--text); }
.sl-consola ol li::before { content: "✓"; color: var(--ok); margin-right: 8px; }
.sl-consola ol span { color: var(--dim); margin-right: 6px; }
.sl-consola__st { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.sl-consola__st div { padding: 12px 14px; display: grid; gap: 2px; }
.sl-consola__st div + div { border-left: 1px solid var(--line); }
.sl-consola__st b { font: 700 18px var(--f-display); }
.sl-consola__st b.ok { color: var(--ok); }
.sl-consola__st small { color: var(--dim); font-size: 12px; }

/* Secciones */
.sl-sec { padding: clamp(36px, 5vw, 64px) 0 0; }
.sl-head { margin-bottom: 24px; max-width: 760px; }
.sl-head h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 10px 0 0; }
.sl-head .bgt-lead { margin: 10px 0 0; }
.sl-head--c { text-align: center; margin-left: auto; margin-right: auto; }
.sl-head--c .bgt-lead { margin-left: auto; margin-right: auto; }

.sl-inc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.sl-inc div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.sl-inc b { font: 700 17px var(--f-display); letter-spacing: .02em; }
.sl-inc p { margin: 8px 0 0; color: var(--mute); font-size: 14.5px; }

/* Planes */
.sl-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.sl-plan { position: relative; background: var(--panel); border: 1px solid var(--line-hi); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.sl-plan--base { border-color: #f2a33a88; box-shadow: 0 24px 60px -36px #f2a33a88; background: linear-gradient(180deg, #f2a33a12, transparent 40%), var(--panel); }
.sl-plan__rec { position: absolute; top: -12px; right: 20px; background: var(--btn-oro); color: var(--on-oro); font: 700 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.sl-plan__lema { margin: 0; color: var(--mute); }
.sl-plan__precio { font: 700 44px/1 var(--f-display); }
.sl-plan__precio small { font: 500 14px var(--f-body); color: var(--mute); -webkit-text-fill-color: var(--mute); }
.sl-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.sl-plan li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.sl-plan li .bgt-i { width: 16px; height: 16px; color: var(--exc); flex: none; margin-top: 3px; }
.sl-plan .bgt-btn { justify-content: center; }
.sl-nota { text-align: center; color: var(--mute); margin: 18px 0 0; font-size: 14px; }

/* Pasos */
.sl-pasos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.sl-pasos li { counter-increment: p; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.sl-pasos li::before { content: "0" counter(p); display: block; font: 700 13px var(--f-mono); color: var(--orange); margin-bottom: 8px; }
.sl-pasos b { font: 700 18px var(--f-display); }
.sl-pasos p { margin: 6px 0 0; color: var(--mute); font-size: 14.5px; }

/* Demos */
.sl-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.sl-demo { display: grid; gap: 8px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none !important; color: var(--text) !important; transition: border-color .2s, transform .2s; }
.sl-demo:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.sl-demo .bgt-tag { justify-self: start; }
.sl-demo b { font: 700 19px var(--f-display); }
.sl-demo small { color: var(--mute); font-size: 14px; }
.sl-demo code { font: 500 13px var(--f-mono); color: var(--cian); }

/* Preguntas */
.sl-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.sl-faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.sl-faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary::after { content: "+"; color: var(--orange); font: 700 18px var(--f-mono); }
.sl-faq details[open] summary::after { content: "−"; }
.sl-faq p { margin: 0 0 16px; color: var(--mute); }

/* Cierre */
.sl-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(120deg, #2a1a04, #151b28 60%); border: 1px solid #f2a33a55; border-radius: 20px; padding: clamp(22px, 4vw, 38px); }
.sl-band h2 { font-size: clamp(24px, 3vw, 34px); margin: 8px 0 6px; }
.sl-band p { margin: 0; color: var(--mute); max-width: 52ch; }

@media (max-width: 860px) {
	.sl-hero__in { grid-template-columns: 1fr; }
	.sl-planes { grid-template-columns: 1fr; }
}