/* ==========================================================================
   INAEC · SEÇÃO 5: PRÓXIMO PASSO / ENGAJAMENTO DO LEITOR
   Newsletter do portal + canal de contato.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Container "proximo-passo" (full width · fundo Cinza do Portal)
     └── Container "proximo-passo__card" (fundo Branco · raio 14 · padding 64)
           ├── Container "…__texto" (column · gap 16 · 48%)
           └── Container "…__acao"  (column · gap 16 · 52%)
                 → widget **Form** do Elementor Pro (campo E-mail + Botão)
   ========================================================================== */

.proximo-passo__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  padding: clamp(var(--space-lg), 5vw, var(--space-xl));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Régua institucional assinando o topo do bloco (MIV: horizontal, sem texto) */
.proximo-passo__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--regua-height);
  background-image: var(--inaec-grad-ciclo);
}

.proximo-passo__texto { flex: 1 1 48%; display: flex; flex-direction: column; gap: var(--space-xs); }
.proximo-passo__texto h2 { margin: 0; }

.proximo-passo__acao { flex: 1 1 52%; display: flex; flex-direction: column; gap: var(--space-sm); }

/* --- Formulário de newsletter ------------------------------------------- */
/*
   O formulário precisa do próprio espaçamento.

   `.newsletter__aviso` tem `margin: 0` — correto, porque o espaço entre irmãos
   é responsabilidade do contêiner. Só que o contêiner não tinha regra nenhuma:
   sendo um `<form>`, ficava em `display: block` sem `gap`, e a frase sobre a
   Política de Privacidade encostava no campo de e-mail e no botão.
*/
.newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.newsletter__linha {
  display: flex;
  gap: var(--space-2xs);
}

.newsletter__campo {
  flex: 1;
  min-inline-size: 0;
  padding: 0.875rem 1.125rem;
  min-block-size: 48px;
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.newsletter__campo::placeholder { color: var(--color-text-muted); }
@media (hover: hover) {
  .newsletter__campo:hover { border-color: var(--color-border-strong); }
}
.newsletter__campo:focus-visible {
  background-color: var(--color-surface);
  border-color: var(--inaec-verde);
}

.newsletter__aviso {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: var(--lh-legend);
  color: var(--color-text-muted);
}
.newsletter__aviso a { color: var(--inaec-verde); }

/* --- Canal alternativo de contato --------------------------------------- */
.proximo-passo__contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}
.proximo-passo__contato p {
  margin: 0;
  font-size: var(--fs-legend);   /* 14px */
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .proximo-passo__card { flex-direction: column; align-items: stretch; }
  .proximo-passo__texto, .proximo-passo__acao { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .newsletter__linha { flex-direction: column; }
  .newsletter__linha .btn { inline-size: 100%; }
}

/* Retorno do formulário de assinatura. A cor diz o resultado sem depender de
   ícone, e o texto legal volta sozinho depois — ver js/site.js. */
.newsletter__aviso[data-estado="ok"]    { color: var(--inaec-verde); font-weight: var(--fw-medium); }
.newsletter__aviso[data-estado="erro"]  { color: #B42318; font-weight: var(--fw-medium); }
.newsletter__aviso[data-estado="aguarde"] { color: var(--color-text-muted); }