/* ==========================================================
   Laço | página inicial
   Usa os tokens e o convite de style.css.
   ========================================================== */

.inicio main { max-width: 68rem; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 68rem; margin: 0 auto;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
}
.marca-grande { font-size: 2rem; line-height: 1; }

/* ---------- Abertura ---------- */
.abertura {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
}
.sobretitulo {
  margin: 0 0 .75rem;
  font-family: var(--fonte-titulo); font-variant: small-caps; font-weight: 600;
  font-size: 1.2rem; letter-spacing: .08em; color: var(--marca);
}
.abertura h1 {
  margin: 0;
  font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: 1.02; letter-spacing: -.01em;
}
.abertura-descricao { margin: 1.25rem 0 1.75rem; max-width: 34rem; font-size: 1.1rem; color: var(--texto-suave); }
.abertura-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.btn-grande { min-height: 52px; padding: .8rem 1.75rem; font-size: 1.05rem; text-decoration: none; display: inline-flex; align-items: center; }
.link-suave { font-weight: 600; color: var(--texto); }

/* Convite de exemplo */
.vitrine { margin: 0; justify-self: center; width: 100%; max-width: 25rem; }
.vitrine-cartao {
  padding: 5.5rem 1.5rem 1.75rem;
  transform: rotate(1.5deg);
  border-radius: 4px;
}
.vitrine .folhas { width: 44%; }
.vitrine .monograma { font-size: 3.2rem; margin-bottom: 1.1rem; }
.vitrine .convite-chamada { font-size: 1rem; }
.vitrine .convite-nomes { font-size: 2.9rem; margin: .35rem 0 1rem; }
.vitrine .convite-quando { font-size: .95rem; }
.vitrine .convite-local { font-size: .9rem; }
.vitrine .convite-acoes { margin-top: 1.5rem; }
.vitrine .atalho { cursor: default; }
.vitrine .atalho svg { width: 2.3rem; height: 2.3rem; }
.vitrine .atalho span { font-size: .8rem; }
.vitrine .atalho:hover svg { transform: none; }

/* ---------- Seções ---------- */
.inicio main h2 {
  margin: 0 0 1.75rem; text-align: center;
  font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 500; line-height: 1.1;
}
.inicio main h3 { margin: 0 0 .4rem; font-size: 1.45rem; }
.eventos, .passos, .recursos { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--linha); }

.eventos-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.eventos-lista li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--destaque-suave);
  font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 600;
  color: var(--destaque-escuro);
}
.eventos-lista li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--destaque); }

.passos-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.passo-numero {
  display: block; margin-bottom: .25rem;
  font-family: var(--fonte-titulo); font-style: italic; font-size: 3.4rem; line-height: 1;
  color: var(--marca);
}
.passos-lista p, .recursos-lista p { margin: 0; color: var(--texto-suave); }

.recursos-lista {
  list-style: none; margin: 0 auto; padding: 0; max-width: 56rem;
  display: grid; gap: 2.25rem 3rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.recursos-lista svg {
  width: 2.6rem; height: 2.6rem; margin-bottom: .6rem;
  fill: none; stroke: var(--marca); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.final {
  margin: clamp(1rem, 4vw, 2rem) 0 clamp(3rem, 8vw, 5rem);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  background: var(--destaque-suave); border-radius: var(--raio);
}
.inicio .final h2 { margin-bottom: .5rem; }
.final p { margin: 0 0 1.5rem; color: var(--texto-suave); }

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura-texto { text-align: center; }
  .abertura-descricao { margin-inline: auto; }
  .abertura-acoes { justify-content: center; }
  .vitrine { max-width: 22rem; }
  .recursos-lista { grid-template-columns: 1fr; }
}