/* Ajustes propios del portal de Lumbre Espacios, encima de estilo.css. */

.icono--Espacios { background: linear-gradient(150deg, #1f6fb2, #123a5e); }

.miga { padding: 14px 0 0; font-size: 13px; color: var(--muted); }
.miga a { color: var(--muted); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative; padding: 12px 16px 12px 54px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 15px; top: 13px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700;
}
.pasos strong { display: block; margin-bottom: 2px; }
.pasos span { color: #40505f; font-size: 15px; }
.pasos code, .producto__cuerpo p code, .faq code, dl code, .nota code {
  background: var(--bg-alt3); border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: .92em;
}

.comando {
  margin: 0 0 14px; padding: 12px 16px; background: #0d2942; color: #dbe8f4;
  border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 14px;
  overflow-x: auto; line-height: 1.6;
}
.comando b { color: #9fc7ea; font-weight: 500; }

.capturas { display: grid; gap: 20px; margin: 18px 0 6px; }
.capturas figure {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.capturas img { width: 100%; height: auto; display: block; background: var(--bg-alt); }
.capturas figcaption { padding: 10px 14px; font-size: 14px; color: var(--muted); }
.capturas--dos { grid-template-columns: 1fr 1fr; }

.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0 16px; margin: 0 0 10px;
}
.faq summary { cursor: pointer; font-weight: 600; padding: 13px 0; }
.faq p { margin: 0 0 14px; color: #40505f; }
.faq p:last-child { margin-bottom: 14px; }

.sino { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; }
.sino > div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.sino h3 { margin: 0 0 8px; font-size: 16px; }
.sino ul { margin: 0; padding-left: 18px; font-size: 15px; color: #40505f; }
.sino li { margin-bottom: 4px; }
.sino--si { border-left: 4px solid var(--free); }
.sino--no { border-left: 4px solid #d9743a; }

.compra__precio s { color: var(--muted); font-weight: 500; font-size: 16px; }

html.tema-oscuro .pasos span,
html.tema-oscuro .faq p,
html.tema-oscuro .sino ul { color: var(--muted); }
html.tema-oscuro .pasos code,
html.tema-oscuro .producto__cuerpo p code,
html.tema-oscuro .faq code,
html.tema-oscuro dl code { background: var(--bg-alt3); color: var(--ink); }
/* Sobre tarjeta oscura el azul marino del botón fantasma no se lee. */
html.tema-oscuro .btn--fant { color: var(--ink); }
html.tema-oscuro .btn--fant:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
html.tema-oscuro .baner span { color: rgba(255, 255, 255, .85); }
html.tema-oscuro .nota--alerta { background: #3a3020; border-color: #6b5326; color: #f0d5a8; }
html.tema-oscuro .recuadro--aviso { background: #3a3020; }
html.tema-oscuro .capturas img { background: var(--bg-alt2); }

@media (max-width: 860px) {
  .capturas--dos, .sino { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .compra__botones .btn { width: 100%; }
}