/* Help center, laid out like tally.so/help: a sticky sidebar with the section tree on the left
   and one reading column on the right. Text styles come from ../styles.css. */
.help {
  --neutral-300: #e5e5e5;
  --green-tint: #e6ece9;
  --rule: 1px solid rgba(0, 0, 0, 0.08);
  --sidebar: 280px;
}

.help-layout {
  display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr);
  max-width: min(1320px, 94vw); margin: 0 auto;
}

/* Sidebar: section tree, then contact links. */
.help-sidebar {
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100dvh - var(--header-h)); overflow-y: auto;
  padding: 64px 24px 32px clamp(16px, 5vw, 40px); border-right: var(--rule);
}
.help-nav { width: auto; margin: 0; display: block; }
.help-nav-label { margin: 0 0 8px; color: var(--neutral-600); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.help-nav ul { margin: 0; padding: 0; list-style: none; }
.help-nav li { margin: 0; }
.help-nav a, .help-nav summary, .help-nav .soon {
  display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 8px; border-radius: 8px;
  color: var(--neutral-800); font-size: var(--fs-small); font-weight: 400; text-decoration: none;
}
.help-nav a:hover, .help-nav summary:hover { background: rgba(0, 0, 0, 0.04); }
.help-nav a[aria-current="page"] { background: var(--green-tint); color: var(--green); font-weight: 500; }
.help-nav summary { cursor: pointer; list-style: none; }
.help-nav summary::-webkit-details-marker { display: none; }
.help-nav summary::before {
  content: ""; flex: none; width: 0; height: 0; margin: 0 2px;
  border-block: 4px solid transparent; border-left: 6px solid var(--neutral-600); transition: transform 150ms ease;
}
.help-nav details[open] > summary::before { transform: rotate(90deg); }
.help-nav details ul { padding-left: 18px; }
.help-nav .soon { color: var(--neutral-600); }
.help-nav .help-nav-extra { margin-top: 32px; }
.help-nav-extra svg { flex: none; width: 16px; height: 16px; color: var(--neutral-600); }

/* Reading column. */
.help main { width: min(100% - 32px, 765px); margin-inline: auto; padding-block: 56px 96px; }
.help h1 { margin-bottom: 24px; font-size: 3rem; line-height: 1; }
.help main > p:first-of-type, .intro { font-size: 1.0625rem; }
.help hr { margin: 40px 0; border: 0; border-top: var(--rule); }
.breadcrumb { display: none; margin: 0 0 16px; color: var(--neutral-600); font-size: var(--fs-small); }
.breadcrumb a { color: inherit; }

/* Index sections: emoji, title, description, then link groups in two columns. */
.help-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.help-section + .help-section { margin-top: 72px; }
.help-section-art { display: block; width: 80px; height: 80px; margin-bottom: 16px; }
.help-section h2, .help-more h2 { margin: 0 0 8px; font-size: 2rem; line-height: 1; }
.help-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 32px; }
.help-groups h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 600; }
.links { margin: 0; padding: 0; list-style: none; }
.links li { display: flex; align-items: center; gap: 10px; margin: 0; padding-block: 4px; }
.links img { flex: none; width: 20px; height: 20px; }
.links a { color: var(--neutral-800); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
.links a:hover { color: var(--green); border-bottom-color: currentColor; }
.links .soon { color: var(--neutral-600); }
.tag {
  margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--green-tint);
  color: var(--green); font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}

/* Articles: headed sections with a centered screenshot under the text. */
.help-article h2 { margin: 56px 0 8px; font-size: 1.75rem; line-height: 1.1; }
.steps { counter-reset: step; }
.steps h2 { counter-increment: step; }
.steps h2::before { content: counter(step) ". "; color: var(--green); }
.shot { margin: 32px 0; }
.shot img {
  display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto;
  border: var(--rule); border-radius: 24px; background: var(--neutral-100);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.callout {
  display: flex; gap: 12px; margin: 32px 0; padding: 16px 16px 16px 12px;
  border-radius: 8px; background: var(--green-tint);
}
.callout svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.callout p { margin: 0; }
.help-more { margin-top: 72px; }

/* «Copiar página» menu, top right of the reading column. */
.page-tools { position: relative; display: flex; justify-content: flex-end; margin: 0 0 16px; }
.page-tools > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  border: var(--rule); border-radius: 10px; background: var(--neutral-100);
  color: var(--neutral-800); font-size: var(--fs-small); cursor: pointer; list-style: none;
}
.page-tools > summary::-webkit-details-marker { display: none; }
.page-tools > summary:hover { background: rgba(0, 0, 0, 0.03); }
.page-tools svg { flex: none; width: 16px; height: 16px; }
.page-tools-chevron { color: var(--neutral-600); transition: transform 150ms ease; }
.page-tools[open] .page-tools-chevron { transform: rotate(180deg); }
.page-tools-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(300px, 90vw);
  padding: 6px; border: var(--rule); border-radius: 12px; background: var(--neutral-100);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.page-tools-menu a, .page-tools-menu button {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: none; color: var(--neutral-800); font: inherit; font-size: var(--fs-small); text-align: left;
  text-decoration: none; cursor: pointer;
}
.page-tools-menu a:hover, .page-tools-menu button:hover, .page-tools-menu :focus-visible { background: var(--green-tint); }
.page-tools-menu svg { margin-top: 2px; color: var(--neutral-600); }
.page-tools-menu span { display: grid; gap: 2px; font-weight: 500; }
.page-tools-menu small { color: var(--neutral-600); font-size: 0.75rem; font-weight: 400; }
.page-tools-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Tables (the Recursos > Alternativas comparisons). */
.table-wrap { margin: 24px 0; overflow-x: auto; }
.help-article table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.help-article th, .help-article td { padding: 10px 12px; border-bottom: var(--rule); text-align: left; vertical-align: top; }
.help-article th { font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .help-layout { display: block; }
  .help-sidebar { display: none; }
  .breadcrumb { display: block; }
  .help main { padding-top: 40px; }
  .help h1 { font-size: 2.25rem; }
}
@media (max-width: 560px) {
  .help-groups { grid-template-columns: minmax(0, 1fr); }
}