/* =====================================================
   MARKANT — Material de apoio: primeira campanha no Meta Ads
   Mobile first. Cores só por tokens de style.css.
   ===================================================== */

.guia-updated {
  margin: 16px 0 0;
  color: var(--lima);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
}

.guia-warning {
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--lima) 40%, transparent);
  border-radius: var(--radius-btn);
  background: var(--cinza-escuro);
  color: var(--branco);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.guia-warning strong { font-weight: 700; }

.guia { max-width: 800px; margin: 0 auto; padding: 40px 0; }
.guia [id] { scroll-margin-top: 16px; }

.guia p, .guia li {
  color: var(--branco);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.guia p { margin: 0 0 16px; }

.guia a:not(.guia-top) {
  color: var(--lima);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guia a:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.guia strong { color: var(--branco); font-weight: 700; }

.guia code {
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cinza) 50%, transparent);
  color: var(--branco);
  font-family: Consolas, Menlo, monospace;
  font-size: 0.92em;
}

/* Índice */
.guia-index {
  margin-bottom: 16px;
  padding: 22px 20px;
  border: 1px solid color-mix(in srgb, var(--lima) 25%, transparent);
  border-radius: var(--radius-card);
}

.guia-index h2 { margin-bottom: 14px; font-size: 1.375rem; }
.guia-index ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: indice; }
.guia-index li { counter-increment: indice; border-top: 1px solid color-mix(in srgb, var(--cinza) 50%, transparent); }
.guia-index li:first-child { border-top: 0; }

.guia .guia-index a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--branco);
  text-decoration: none;
}

.guia .guia-index a::before {
  content: counter(indice);
  min-width: 20px;
  color: var(--lima);
  font-weight: 700;
}

.guia .guia-index a:hover { color: var(--lima); text-decoration: underline; }

/* Seções */
.guia-section { padding: 48px 0; border-bottom: 1px solid color-mix(in srgb, var(--cinza) 50%, transparent); }
.guia-section:last-child { border-bottom: 0; padding-bottom: 8px; }

.guia .guia-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--lima);
  color: var(--cinza-escuro);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1;
}

.guia h2, .guia h3, .guia h4 { font-family: var(--font-heading); font-weight: 700; color: var(--branco); }
.guia h2 { margin: 0 0 16px; font-size: clamp(1.875rem, 8vw, 2.75rem); line-height: 1.1; }
.guia h3 { margin: 34px 0 12px; font-size: 1.4375rem; line-height: 1.2; }
.guia h4 { margin: 22px 0 10px; color: var(--lima); font-size: 1.0625rem; line-height: 1.3; }
.guia .guia-index h2 { font-size: 1.375rem; }

/* Passo a passo */
.guia-steps, .guia-errors { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: passo; }

.guia-steps li, .guia-errors li {
  position: relative;
  counter-increment: passo;
  padding: 9px 0 9px 44px;
  border-top: 1px solid color-mix(in srgb, var(--cinza) 30%, transparent);
}

.guia-steps li:first-child, .guia-errors li:first-child { border-top: 0; }

.guia-steps li::before, .guia-errors li::before {
  content: counter(passo);
  position: absolute;
  top: 9px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--lima);
  border-radius: 50%;
  color: var(--lima);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

/* Listas */
.guia-list { margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.guia-list li { margin-bottom: 10px; }
.guia-list li::marker { color: var(--lima); }
.guia-check { margin: 0 0 20px; padding: 0; list-style: none; }

.guia-check li {
  position: relative;
  padding: 10px 0 10px 36px;
  border-top: 1px solid color-mix(in srgb, var(--cinza) 30%, transparent);
}

.guia-check li:first-child { border-top: 0; }

.guia-check li::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--lima);
  border-radius: 4px;
}

.guia-check li > span {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro));
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Blocos de destaque */
.guia .guia-note {
  padding: 12px 14px;
  border-left: 3px solid var(--lima);
  background: color-mix(in srgb, var(--cinza) 22%, transparent);
  font-size: 0.9375rem;
}

.guia .guia-example {
  padding: 12px 14px;
  border: 1px dashed var(--cinza);
  border-radius: var(--radius-btn);
  font-size: 0.9375rem;
}

.guia .guia-done {
  margin: 26px 0 16px;
  padding: 15px 16px;
  border-radius: var(--radius-btn);
  background: var(--verde);
}

.guia .guia-done code { background: color-mix(in srgb, var(--cinza-escuro) 40%, transparent); }

.guia .guia-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro));
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guia .guia-top:hover { color: var(--lima); }

/* Fechamento: texto legível sobre o fundo do CTA */
#fechamento .lab-cta-desc { color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro)); }

/* Tabelas: no celular cada linha vira um bloco, com o nome da coluna acima do valor */
.table-wrap {
  margin: 8px 0 22px;
  overflow: hidden;
  border: 1px solid var(--cinza);
  border-radius: var(--radius-btn);
}

.guia table { width: 100%; border-collapse: collapse; }

.guia caption {
  padding: 12px 14px 4px;
  color: var(--lima);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.guia th, .guia td {
  padding: 11px 14px;
  border-top: 1px solid color-mix(in srgb, var(--cinza) 50%, transparent);
  color: var(--branco);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.guia thead th { border-top: 0; color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro)); font-size: 0.8125rem; font-weight: 700; }
.guia tbody th { font-weight: 700; }

@media (max-width: 767px) {
  .guia caption { display: block; padding-bottom: 12px; }

  .guia thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .guia table, .guia tbody, .guia tr, .guia tbody th, .guia td { display: block; }
  .guia tbody th { padding-bottom: 2px; border-top: 1px solid var(--cinza); font-size: 1.0625rem; }
  .guia td { padding-top: 6px; border-top: 0; }
  .guia td:last-child { padding-bottom: 14px; }

  .guia td::before {
    content: attr(data-label);
    display: block;
    color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro));
    font-size: 0.8125rem;
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  .guia-index { padding: 26px 28px; }

  .guia-index ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 32px;
  }

  .guia-index li:nth-child(6) { border-top: 0; }
}

@media (min-width: 1024px) {
  .guia { padding: 56px 0; }
  .guia-section { padding: 60px 0; }
}