/* ==========================================================
   BE CONNECTIONS — Networking
   Referência: convite "Convite Especial" — marfim, serifa de alto
   contraste, filetes dourados com estrela, foto em largura total.
   ========================================================== */

:root {
  --marfim: #f6efe4;
  --marfim-claro: #fbf7f0;
  --tinta: #1d1712;
  --tinta-suave: #4a4038;
  --taupe: #b3a594;
  --dourado: #c2a476;
  --dourado-escuro: #a88a5c;
  --linha: #ddd2c1;
  --erro: #9a2f24;

  --serif: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--marfim);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

.convite {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 72px) 0 40px;
  text-align: center;
  background: var(--marfim);
}

/* ---------- Filete dourado com estrela ---------- */

.divisor {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
}

.divisor::before,
.divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dourado);
  opacity: .8;
}

.divisor__estrela {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--dourado-escuro);
  /* estrela de quatro pontas */
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* ---------- Topo ---------- */

.hero { padding: 0 0 clamp(32px, 6vw, 44px); }

.hero__titulo {
  margin: 0;
  font-weight: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marca {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.78rem, 2.6vw, .92rem);
  letter-spacing: .42em;
  padding-left: .42em; /* compensa o espaço após a última letra */
  word-spacing: .3em;
  margin-bottom: 18px;
}

.convite-especial {
  margin: clamp(26px, 5vw, 36px) 0 0;
  padding: 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.1rem, 15.5vw, 5.9rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.networking {
  margin-top: clamp(22px, 4vw, 30px);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.95rem, 3.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .62em;
  padding-left: .62em;
  color: var(--taupe);
}

/* ---------- Foto ---------- */

.foto { margin: 0; }

.foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 68%;
}

/* ---------- Data e local ---------- */

.evento { padding: clamp(32px, 6vw, 44px) 0 0; }

.chamada {
  margin: 0 24px 28px;
  font-size: clamp(1.02rem, 3.6vw, 1.22rem);
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--tinta);
}

.data { margin: 28px 16px 0; }

.data time { display: block; }

.data__dia {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7.4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.data__hora {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 4.4vw, 1.55rem);
  text-transform: uppercase;
}

.endereco {
  margin: 24px 24px 0;
  font-style: normal;
  font-size: clamp(1rem, 3.5vw, 1.12rem);
  line-height: 1.55;
  letter-spacing: .1em;
}

.endereco a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.endereco a:hover,
.endereco a:focus-visible { color: var(--dourado-escuro); }

/* ---------- Formulário ---------- */

.inscricao {
  margin: clamp(48px, 9vw, 64px) 24px 0;
  padding: clamp(32px, 6vw, 44px) clamp(20px, 5vw, 40px) clamp(28px, 5vw, 36px);
  background: var(--marfim-claro);
  border: 1px solid var(--linha);
}

.inscricao__titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 5.6vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.inscricao__texto {
  margin: 10px 0 30px;
  color: var(--tinta-suave);
  letter-spacing: .02em;
}

.form { text-align: left; }

.campo { margin-bottom: 18px; }

.campo label {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--tinta-suave);
  margin-bottom: 4px;
}

.campo input {
  width: 100%;
  padding: 10px 2px;
  font: inherit;
  font-size: 1.05rem; /* ≥16px evita zoom automático no iOS */
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  outline: none;
  transition: border-color .2s;
}

.campo input::placeholder { color: #bdb3a5; }

.campo input:focus { border-bottom-color: var(--dourado-escuro); }

.campo input[aria-invalid="true"] { border-bottom-color: var(--erro); }

.campo__erro {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--erro);
}

.botao {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 17px 24px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--marfim-claro);
  background: var(--tinta);
  border: 1px solid var(--tinta);
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.botao:hover:not(:disabled) {
  background: transparent;
  color: var(--tinta);
}

.botao:focus-visible {
  outline: 1px solid var(--dourado-escuro);
  outline-offset: 4px;
}

.botao:disabled { opacity: .55; cursor: progress; }

/* ---------- Mensagem pós-envio ---------- */

.status {
  margin-top: 22px;
  padding: 18px 20px;
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
  border: 1px solid var(--dourado);
  background: var(--marfim);
}

.status strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.status--erro { border-color: var(--erro); color: var(--erro); }
.status--erro strong { color: var(--erro); }

/* ---------- Rodapé ---------- */

.rodape { margin-top: clamp(44px, 8vw, 60px); }

.rodape p {
  margin: 18px 0 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .42em;
  padding-left: .42em;
  word-spacing: .3em;
  color: var(--tinta-suave);
}

/* ---------- Telas largas: convite como "cartão" ---------- */

@media (min-width: 680px) {
  body { padding: 40px 0; background: #eee5d7; }
  .convite { box-shadow: 0 1px 0 var(--linha), 0 20px 50px -30px rgba(60, 45, 30, .35); }
}

@media (max-width: 360px) {
  .data__dia { font-size: 1.55rem; }
  .botao { letter-spacing: .18em; padding-inline: 12px; }
  .networking { letter-spacing: .5em; padding-left: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}