.elementor-308 .elementor-element.elementor-element-583fab5{--display:flex;overflow:visible;}.elementor-308 .elementor-element.elementor-element-8641f16{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}/* Start custom CSS for container, class: .elementor-element-583fab5 *//* ================================
   CSS para WordPress (post)
   Contenedor: .guide-post
   ================================ */

.guide-post{
  --paper:#fff;
  --ink:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --code-bg:#0b1220;
  --code-ink:#e5e7eb;
  --accent:#2563eb;
  --accent2:#16a34a;

  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.guide-post *{ box-sizing:border-box; }

.guide-post .hero{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0 14px;
}
.guide-post .hero h1{ margin:6px 0; font-size:30px; letter-spacing:-0.02em; }
.guide-post .lead{ color:var(--muted); margin:0 0 12px; line-height:1.65; }

.guide-post .meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px; color:var(--muted); font-size:13px;
}
.guide-post .meta > div{
  background:#fff; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px;
}

.guide-post .toc{
  margin-top:14px;
  background:#fff; border:1px solid var(--border);
  border-radius:18px; padding:16px;
}
.guide-post .toc h2{ margin:0 0 8px; font-size:18px; }
.guide-post .toc ol{ margin:0; padding-left:18px; }
.guide-post .toc a{ color:var(--accent); text-decoration:none; font-weight:700; }
.guide-post .toc a:hover{ text-decoration:underline; }
.guide-post .toc__hint{ color:var(--muted); margin:10px 0 0; font-size:13px; }

.guide-post .section{
  margin-top:14px;
  background:#fff; border:1px solid var(--border);
  border-radius:18px; padding:16px; position:relative;
}
.guide-post .section h2{ margin:0 0 8px; font-size:20px; }
.guide-post .section h3{ margin:14px 0 8px; font-size:16px; }
.guide-post .section h4{ margin:12px 0 6px; font-size:14px; color:#0f172a; }
.guide-post .section p{ margin:8px 0; line-height:1.65; }
.guide-post .section ul, .guide-post .section ol{ margin:8px 0; padding-left:18px; }
.guide-post .section li{ margin:6px 0; line-height:1.55; }

.guide-post .back-to-toc{
  position:absolute; top:14px; right:14px;
  font-size:12px; color:var(--muted);
  text-decoration:none; border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; background:#fff;
}
.guide-post .back-to-toc:hover{ border-color:#cbd5e1; }

.guide-post .callout{
  border:1px solid #dbeafe;
  background:#eff6ff;
  padding:12px;
  border-radius:14px;
  margin:12px 0;
  line-height:1.6;
}
.guide-post .note{ color:var(--muted); }

.guide-post pre{
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 12px;
  border-radius: 14px;
  overflow-x: auto;
  border: 1px solid #111827;
  margin: 10px 0;
}

/* ====== COPIAR: wrapper que se agrega con JS ====== */
.guide-post .codebox{
  position: relative;
  margin: 10px 0;
}
.guide-post .codebox pre{ margin:0; }

/* botón copiar */
.guide-post .copy-btn{
  position:absolute;
  top:10px;
  right:10px;
  border: 1px solid rgba(226,232,240,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.guide-post .copy-btn:hover{
  background: rgba(255,255,255,.12);
}
.guide-post .copy-btn:active{
  transform: translateY(1px);
}
.guide-post .copy-btn[data-state="copied"]{
  border-color: rgba(22,163,74,.55);
}

/* código inline + defs */
.guide-post code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}
.guide-post .defs code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
}

/* ====== “Etiquetas” clicables (pills y code dentro de defs) ====== */
.guide-post .pill{
  display:inline-block;
  background:#ecfeff;
  border:1px solid #cffafe;
  padding:4px 10px;
  border-radius:999px;
  margin:4px 6px 0 0;
  font-size:12px;
  color:#0f172a;
  cursor: pointer;
  user-select: none;
}
.guide-post .pill:hover{ filter: brightness(0.98); }
.guide-post .pill[data-state="copied"]{ border-color: rgba(22,163,74,.6); }

/* pequeño “hint” opcional */
.guide-post .copy-hint{
  display:inline-block;
  margin-left:8px;
  font-size:12px;
  color: var(--muted);
}

/* footer */
.guide-post .footer{
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.guide-post .footer .small{ font-size: 12px; }

.guide-post kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background:#f8fafc;
  border:1px solid var(--border);
  border-bottom-width:2px;
  padding:2px 6px;
  border-radius:8px;
}

/* =========================
   Descargas y recursos
   ========================= */
.downloads-card{
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(71,85,105,0.16);
  background: rgba(248,250,252,0.65);
}

.downloads-card h3{
  margin-top: 0;
}

.link{
  font-weight: 700;
  text-decoration: none;
}

.link:hover{
  text-decoration: underline;
}/* End custom CSS */