/* ═══════════════════════════════════════════════════════════
   ficha-entrega.css — Seção "Na prática, o que você recebe"
   de /criacao-de-sites (entre Solução e Aparece).
   Conceito: recibo de entrega. Folha clara sobre faixa escura,
   linhas de tabela (nome do grupo | itens), e um picote tracejado
   com dois recortes nas bordas: abaixo dele fica o que é cobrado
   à parte. Sem numeração (a página já tem 3 sequências), sem
   cards, sem sombra, sem JS. Marcador de item = o mesmo quadrado
   preto de tiers.css; o "sob demanda" usa quadrado vazado.
═══════════════════════════════════════════════════════════ */

.ficha {
  --ficha-ink: #12211f;
  --ficha-rule: #CFCFC8;
  padding: 104px var(--pad);
  background: var(--ficha-ink);
}

.ficha-sheet {
  position: relative;
  max-width: 1040px;
  width: 80%;
  margin: 0 auto;
  background: var(--bg);
  border-radius: 6px;
}

/* ── Cabeçalho da folha ── */
.ficha-head {
  padding: 52px 52px 44px;
}

.ficha-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 14px;
}

.ficha-head p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--text2);
  max-width: 520px;
}

/* ── Linhas: grupo | itens ── */
.ficha-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 30px 52px;
  border-top: 1px solid var(--border);
}

.ficha-row h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.ficha-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.ficha-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text2);
}

/* Marcador cheio: mesmo quadrado preto + check de tiers.css */
.ficha-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,4 3.5,6.5 9,1'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ── Picote: linha tracejada com os dois recortes ── */
.ficha-cut {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--ficha-rule);
}

.ficha-cut::before,
.ficha-cut::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ficha-ink);
}

.ficha-cut::before {
  left: -14px;
}

.ficha-cut::after {
  right: -14px;
}

/* ── Canhoto: o que é cobrado à parte ── */
.ficha-stub {
  padding: 40px 52px 44px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border-radius: 0 0 6px 6px;
}

.ficha-stub h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.ficha-stub .ficha-list li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%230e817b' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='5' y1='1' x2='5' y2='9'/%3E%3Cline x1='1' y1='5' x2='9' y2='5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border: 1.5px solid var(--green);
}

.ficha-notes {
  margin-top: 24px;
  display: grid;
  gap: 4px;
}

.ficha-notes p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}

@media (max-width: 860px) {
  .ficha-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .ficha {
    padding: 64px var(--pad);
  }

  .ficha-sheet {
    width: 90%;
  }

  .ficha-head {
    padding: 36px 24px 32px;
  }

  .ficha-row {
    padding: 26px 24px;
  }

  .ficha-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ficha-stub {
    padding: 32px 24px 36px;
  }

  .ficha-cut::before,
  .ficha-cut::after {
    top: -12px;
    width: 22px;
    height: 22px;
  }

  .ficha-cut::before {
    left: -11px;
  }

  .ficha-cut::after {
    right: -11px;
  }
}