/**
 * Blog newsletter form — blue card / green pill button, per business's
 * visual reference. Hardcoded hex values (not the theme's SCSS $color-*
 * variables, unreachable from a module's plain CSS) matched to the closest
 * existing brand colors already used elsewhere in the theme:
 *   - card background: $color-blue-02 (#054CD6), same blue as the
 *     "Solicita información" submit button.
 *   - button background: $color-green-03 (#B7D93D), same green as the
 *     theme's .btn-green.
 */
.zma-newsletter {
  background: #054CD6;
  border-radius: 16px;
  padding: 24px 20px;
  margin-top: 24px;
  text-align: center;
  box-shadow: 5px 10px 20px 0 rgba(47, 50, 125, 0.15);
}

.zma-newsletter__title {
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.35;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.zma-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Visually hidden but still announced by screen readers — the design only
   shows placeholder text, not a visible label above each field. */
.zma-newsletter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.zma-newsletter__input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  color: #333333;
  background: #fff;
}

.zma-newsletter__input::placeholder {
  color: #757575;
}

.zma-newsletter__input:focus {
  outline: 2px solid #B7D93D;
}

.zma-newsletter__button {
  border: none;
  border-radius: 28px;
  padding: 14px 20px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  background: #B7D93D;
  cursor: pointer;
  transition: background-color .2s ease;
}

.zma-newsletter__button:hover,
.zma-newsletter__button:focus {
  background: #A6C633;
}