/* ============ GHOST CONTENT (Mobiledoc / Lexical render) ============ */
.gh-content { font-size: 1.1rem; line-height: 1.75; color: #444; }
.gh-content > * + * { margin-top: 1.5rem; }
.gh-content h2 { font-size: 1.6rem !important; font-weight: 700; margin: 2.5rem 0 1rem; color: #111; }
.gh-content h3 { font-size: 1.3rem !important; font-weight: 700; margin: 2rem 0 0.75rem; color: #222; }
.gh-content p { margin-bottom: 1.25rem; }
.gh-content ul, .gh-content ol { margin: 0 0 1.5rem 1.5rem; }
.gh-content li { margin-bottom: 0.5rem; }
.gh-content strong { color: #111; }
.gh-content a { color: #FF304E; text-decoration: underline; }
.gh-content img { border-radius: 8px; max-width: 100%; height: auto; }
.gh-content blockquote { border-left: 4px solid #FF304E; padding: 0.5rem 1.5rem; margin: 1.5rem 0; background: #fafafa; border-radius: 0 8px 8px 0; }
.gh-content hr { border: none; border-top: 1px solid #eee; margin: 2.5rem 0; }
.gh-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.gh-content th, .gh-content td { padding: 0.75rem 1rem; border: 1px solid #eee; text-align: left; }
.gh-content th { background: #f8f8f8; font-weight: 700; }
.gh-content pre { background: #1a1a1a; color: #f8f8f8; padding: 1rem; border-radius: 8px; overflow-x: auto; }
.gh-content code { background: #f4f4f4; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
.gh-content pre code { background: none; padding: 0; }

/* Gallery cards */
.kg-gallery-container { display: flex; flex-direction: column; gap: 1rem; }
.kg-gallery-row { display: flex; gap: 1rem; }
.kg-gallery-image { flex: 1; }
.kg-gallery-image img { width: 100%; border-radius: 8px; }

/* Bookmark cards */
.kg-bookmark-container { display: flex; border: 1px solid #eee; border-radius: 8px; overflow: hidden; text-decoration: none; }
.kg-bookmark-content { flex: 1; padding: 1rem; }
.kg-bookmark-title { font-weight: 700; color: #111; }
.kg-bookmark-description { color: #666; font-size: 0.9rem; margin-top: 0.25rem; }
.kg-bookmark-thumbnail { width: 120px; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* Callout cards */
.kg-callout-card { border-radius: 8px; padding: 1.5rem; background: #f8f8f8; }
.kg-callout-card-accent { background: #ffe5e9; }

/* Page content typography (hereda de Taskbes) */
.page-content h1 { font-size: 1.8rem !important; font-weight: 800; margin-bottom: 1rem; color: #111; }
.page-content h2 { font-size: 1.4rem !important; font-weight: 700; margin: 2.5rem 0 1rem; color: #111; }
.page-content h3 { font-size: 1.2rem !important; font-weight: 700; margin: 2rem 0 0.75rem; color: #222; }
.page-content p { font-size: 1rem !important; line-height: 1.75; margin-bottom: 1.25rem; color: #444; }
.page-content ul, .page-content ol { margin: 0 0 1.5rem 1.5rem; }
.page-content li { font-size: 1rem; margin-bottom: 0.5rem; color: #444; }
.page-content strong { color: #111; }
.page-content a { color: #FF304E; text-decoration: underline; }
.page-content img { border-radius: 8px; max-width: 100%; height: auto; margin: 1.5rem 0; }
.page-content blockquote { border-left: 4px solid #FF304E; padding: 0.5rem 1.5rem; margin: 1.5rem 0; background: #fafafa; }
.page-content hr { border: none; border-top: 1px solid #eee; margin: 2.5rem 0; }
.page-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.page-content th, .page-content td { padding: 0.75rem 1rem; border: 1px solid #eee; text-align: left; }
.page-content th { background: #f8f8f8; font-weight: 700; }
.page-content code { background: #f4f4f4; padding: 0.15rem 0.4rem; border-radius: 4px; }
.page-content pre { background: #1a1a1a; color: #f8f8f8; padding: 1rem; border-radius: 8px; overflow-x: auto; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }
.pagination a, .pagination span {
  padding: 0.5rem 1rem; border: 1px solid #e1e1e1; border-radius: 6px;
  font-size: 1rem; color: #444; text-decoration: none;
}
.pagination .active { background: #FF304E; color: #fff; border-color: #FF304E; }

/* =====================================================
   Bloques enriquecidos para el contenido migrado
   (se usan dentro de tarjetas HTML de Ghost)
   ===================================================== */
.ops-lead {
  font-size: 1.15rem !important;
  line-height: 1.7;
  color: #515e6c !important;
  font-weight: 500;
}

.ops-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin: 2rem 0;
}
.ops-feature {
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 6px;
  padding: 22px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ops-feature:hover {
  transform: translateY(-4px);
  border-color: #c4cbd3;
  box-shadow: 0 14px 30px rgba(81, 94, 108, 0.12);
}
.ops-feature h3 {
  font-size: 1.05rem !important;
  font-weight: 700;
  margin: 0 0 0.5rem !important;
  color: #363c4f;
}
.ops-feature p {
  font-size: 0.95rem !important;
  line-height: 1.65;
  margin: 0 !important;
  color: #7a8798 !important;
}

.ops-note {
  border-left: 4px solid #ff304e;
  background: #fff;
  border-radius: 0 6px 6px 0;
  padding: 18px 22px;
  margin: 2rem 0;
  box-shadow: 0 2px 12px rgba(81, 94, 108, 0.06);
}
.ops-note p:last-child {
  margin-bottom: 0 !important;
}
.ops-note strong {
  color: #ff304e;
}

.ops-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 1.5rem 0 2rem;
}
.ops-related-link {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 600;
  color: #363c4f !important;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.ops-related-link:hover {
  border-color: #ff304e;
  color: #ff304e !important;
  transform: translateX(3px);
}
.ops-related-link span {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: #7a8798;
  margin-top: 4px;
}

.ops-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 2.5rem 0 1rem;
  padding: 26px 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 48, 78, 0.07) 0%, rgba(22, 105, 146, 0.07) 100%);
  border: 1px solid #dfe2e8;
}
.ops-cta-inline p {
  margin: 0 !important;
  font-size: 1.05rem !important;
  color: #363c4f !important;
  font-weight: 600;
}
.ops-cta-inline a {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 24px;
  background: #ff304e;
  color: #fff !important;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.ops-cta-inline a:hover {
  background: #363c4f;
}

/* =====================================================
   Formulario de solicitud de presupuesto
   ===================================================== */
.ops-form {
  margin: 2rem 0 2.5rem;
  padding: 30px;
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
}
.ops-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.ops-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-field-wide {
  margin-bottom: 18px;
}
.ops-field > span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #363c4f;
}
.ops-field input,
.ops-field select,
.ops-field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: #363c4f;
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ops-field input:focus,
.ops-field select:focus,
.ops-field textarea:focus {
  outline: none;
  border-color: #ff304e;
  box-shadow: 0 0 0 3px rgba(255, 48, 78, 0.12);
}
.ops-field textarea {
  resize: vertical;
  min-height: 120px;
}
.ops-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #7a8798;
}
.ops-check input {
  margin-top: 3px;
  accent-color: #ff304e;
}
.ops-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 30px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #ff304e;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ops-form-submit:hover {
  background: #363c4f;
}