/* =========================================================
   Área do Kit (index.html)
   ========================================================= */

section { padding: 56px 0; }
@media (min-width: 768px) { section { padding: 72px 0; } }

/* ---------- Topo + progresso ---------- */
.hero { padding: 40px 0 96px; }
.hero h1 { font-size: clamp(28px, 5vw, 48px); font-weight: 700; margin: 18px 0 12px; max-width: 760px; }
.hero h1 span { color: var(--cream-hover); }
.hero p { color: rgba(255, 255, 255, .85); max-width: 600px; }

.progress { margin-top: 28px; max-width: 520px; }
.progress__bar { height: 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); overflow: hidden; }
.progress__fill { display: block; height: 100%; width: 0; background: var(--primary); border-radius: var(--radius-pill); transition: width .4s var(--ease); }
.progress small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .8); font-size: 13px; }

/* ---------- Comece aqui ---------- */
.start {
  margin-top: -64px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 24px;
  box-shadow: var(--shadow-panel);
}
@media (min-width: 768px) { .start { padding: 36px; } }

.badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.start h2 { margin-top: 14px; }

.steps { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--background);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--dur);
}
.check:hover { border-color: rgba(213, 92, 47, .4); }
.check input {
  appearance: none;
  flex: 0 0 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.check input:checked { background: var(--secondary); }
.check input:checked::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.check b { display: block; font-size: 15px; }
.check span { font-size: 13px; color: var(--text-muted); }
.check a { color: var(--primary); font-weight: 600; }

/* ---------- Grid de cards ---------- */
.grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Card de módulo ---------- */
.module {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur), transform var(--dur);
}
.module:hover { border-color: rgba(213, 92, 47, .4); transform: translateY(-2px); }

.module__cover {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
}
.module__cover::before,
.module__cover::after { content: ""; position: absolute; border-radius: 50%; }
.module__cover::before { width: 70%; aspect-ratio: 1; right: -18%; top: -30%; background: rgba(255, 255, 255, .16); }
.module__cover::after { width: 22%; aspect-ratio: 1; right: 14%; top: 36%; background: rgba(255, 229, 180, .9); }
.module__cover > div { position: relative; z-index: 1; }
.module__num { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.module__cover h3 { font-size: 24px; font-weight: 700; color: #fff; }

.module--1 .module__cover { background: var(--secondary); }
.module--2 .module__cover { background: var(--primary); }
.module--3 .module__cover { background: #5F7F6D; }
.module--4 .module__cover { background: #8A5A3C; }

.module__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.module__body p { font-size: 14px; color: var(--text-muted); flex: 1; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); padding: 4px 10px; border-radius: var(--radius-pill); }

/* ---------- Bloco da ferramenta com IA ---------- */
.ai {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-panel);
  padding: 28px;
  display: grid;
  gap: 20px;
  align-items: center;
}
@media (min-width: 768px) { .ai { grid-template-columns: 1.4fr 1fr; padding: 40px; } }
.ai .eyebrow { color: var(--cream-hover); }
.ai h2 { color: #fff; }
.ai p { color: rgba(255, 255, 255, .9); }
.ai__cta { margin-top: 18px; }
.ai ul { list-style: none; display: grid; gap: 8px; background: rgba(255, 255, 255, .12); border-radius: var(--radius-card); padding: 18px; }
.ai li { font-size: 14px; padding-left: 22px; position: relative; }
.ai li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream-hover); }

/* ---------- Bônus ---------- */
.bonus { background: var(--surface-2); margin-top: 56px; }
.bonus-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bonus-card__tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--secondary-soft); color: var(--secondary); padding: 4px 10px; border-radius: var(--radius-pill); }
.bonus-card h3 { font-size: 18px; }
.bonus-card p { font-size: 14px; color: var(--text-muted); flex: 1; }
.bonus-card__value { font-size: 13px; color: var(--text-subtle); }
.bonus-card__value s { color: var(--price-old); font-weight: 600; }

/* ---------- Suporte ---------- */
.help {
  display: grid;
  gap: 16px;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: 28px;
}
@media (min-width: 768px) { .help { grid-template-columns: 1fr auto; } }
.bonus-card__word { font-size: 13px; color: var(--text-muted); }
.bonus-card__word a { color: var(--primary); font-weight: 600; }