/* Newsletter (componente) — símbolo 8436:2153 (Blog) · mobile 8673:4986 */

.newsletter {
  --newsletter-led: #6f7277; /* 8314:2135 — fora da paleta (mesmo LED do CTA da Home) */
  background: var(--black-100);
}

/* --------------------------------------------------------------------------
   Barra de status (8314:2133) — stroke top inside, pt 24, gap 32
   -------------------------------------------------------------------------- */
.newsletter__status { box-shadow: inset 0 1px 0 var(--gray-900); }

.newsletter__status-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
}

.newsletter__status-item { flex: none; display: flex; align-items: center; gap: 10px; } /* 8314:2134 */

.newsletter__led { /* 8314:2135 · 7×9 */
  flex: none;
  width: 7px;
  height: 9px;
  background: var(--newsletter-led);
  animation: newsletter-led 2.4s ease-in-out infinite;
}
@keyframes newsletter-led {
  0%, 60%, 100% { opacity: 1; }
  80%           { opacity: .2; }
}

.newsletter__status-text { /* 8314:2136 · Instrument Serif Italic 20/1.3 caixa alta */
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-500);
}

/* Icon group (8314:2137) — ícones nas pontas + 20 traços distribuídos */
.newsletter__signal {
  flex: 1 0 0;
  min-width: 1px;
  height: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.newsletter__signal-icon { flex: none; position: relative; width: 36px; height: 13.5px; } /* 8314:2138 */
.newsletter__signal-icon--wide { width: 54px; } /* 8314:2169 */
.newsletter__signal-icon img { position: absolute; top: 0; left: -0.5px; width: calc(100% + 1px); height: 100%; }
.newsletter__signal-line { flex: none; width: 1px; height: 13.5px; margin-inline: -0.5px; } /* vetor de largura 0, stroke 1px */

/* --------------------------------------------------------------------------
   Main container (8314:2225) — py 120, gap 32, conteúdo e formulário alinhados embaixo
   -------------------------------------------------------------------------- */
.newsletter__main {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding-block: var(--section-py);
}

.newsletter__content { flex: 1 0 0; min-width: 1px; } /* 8314:2630 */
.newsletter__heading { /* 8314:2629 · 694, gap 16 */
  width: 694px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Formulário (8314:2508) — 437: campo flexível + botão, gap 8; strokes inside (border-box) */
.newsletter__form {
  position: relative;
  flex: none;
  width: 437px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.newsletter__input { /* 8314:2509 · 56 de altura, p 16/24 */
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
  padding: 15px 23px; /* 16/24 do Figma − 1px do stroke */
  border: 1px solid var(--gray-800);
  border-radius: 999px;
  background: transparent;
  -webkit-appearance: none; /* iOS: sem sombra interna nativa */
  appearance: none;
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  text-overflow: ellipsis;
  color: var(--gray-0);
  transition: border-color .2s ease;
}
.newsletter__input::placeholder { color: var(--gray-500); opacity: 1; } /* 8314:2510 */
/* Preenchimento automático do navegador — mantém o fundo escuro da seção */
.newsletter__input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100px var(--black-100);
  -webkit-text-fill-color: var(--gray-0);
  caret-color: var(--gray-0);
}
.newsletter__input:hover,
.newsletter__input:focus { border-color: var(--gray-500); }
.newsletter__input:focus { outline: none; }
.newsletter__input:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.newsletter__submit { flex: none; margin: 0; padding: 15px 23px; cursor: pointer; } /* 8314:2511 · 91×56 — py 16 (menor que o .btn padrão) */

/* Aviso do formulário (newsletter não configurada) — fora do fluxo, logo abaixo do campo */
.newsletter__msg {
  position: absolute;
  top: calc(100% + 8px);
  left: 24px;
  right: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}

/* Leitores de tela */
.newsletter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .newsletter__led { animation: none; }
  .newsletter__input { transition: none; }
}

/* --------------------------------------------------------------------------
   Tablet (768–1100) — barra de status encurta, como no CTA (o desktop segue fluido até 1440)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .newsletter__status-inner { gap: 20px; }
  .newsletter__status-inner > :nth-child(n+4) { display: none; } /* 2º ícone + último status */
}

/* 768–1023: o texto ficaria estreito ao lado do formulário de 437 — formulário desce para baixo do texto */
@media (min-width: 768px) and (max-width: 1023px) {
  .newsletter__main { flex-direction: column; align-items: flex-start; }
  .newsletter__content { flex: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · frame Mobile 8673:4986 (375×560)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Container 8673:5466 — pt 24, px 16, gap 20: a linha inteira segue além da tela e é cortada */
  .newsletter__status { overflow: hidden; overflow: clip; } /* hidden = fallback de Safari < 16 */
  .newsletter__status-inner { gap: 20px; }
  /* Icon group 8673:5470 / 8673:5514 — 342 fixos (ícones nas pontas + 20 traços a cada 12) */
  .newsletter__signal { flex: none; width: 342px; }

  /* main container 8673:5079 — coluna, py 60, gap 32, alinhado embaixo */
  .newsletter__main { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .newsletter__content { flex: none; } /* 8673:5080 · largura total */
  .newsletter__heading { width: 100%; }

  /* Main Heading 8673:5083 — Exo SemiBold 28/1.2; Figma arredonda cada linha: 33.6 → 34 (caixa 136 em 4 linhas) */
  .newsletter__title { font-size: 28px; line-height: round(1.2em, 1px); }

  /* Input and Submit Container 8673:5085 — largura total (campo 244 + 8 + botão 91 em 375) */
  .newsletter__form { width: 100%; }
}