.cn-wrapper { margin: 1rem 0; }
.cn-promo { margin-bottom: 1rem; text-align: center; }
.cn-promo-img { max-width: 100%; height: auto; border-radius: 6px; }

.cn-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cn-label { position: absolute; left: -9999px; }
.cn-input { flex: 1 1 240px; padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 4px; }
.cn-button { padding: .5rem 1rem; background: #222; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.cn-button:hover { background: #111; }
.cn-button[disabled] { opacity: .6; cursor: not-allowed; }

.cn-msg {
  width: 100%;
  margin-top: .25rem;
  font-size: .95rem;
  font-weight: 600;
  padding: .5rem .75rem;
  border-radius: 4px;
}

.cn-form.is-success .cn-msg {
  color: #0a7c2f;               /* verde oscuro legible */
  background: #e6f4ea;          /* fondo verde muy claro */
  border: 1px solid #b7dfc3;
}

.cn-form.is-error .cn-msg {
  color: #9b1c1c;               /* rojo oscuro legible */
  background: #fde8e8;          /* fondo rojo muy claro */
  border: 1px solid #f5c2c2;
}


/* Responsive tweaks */
@media (max-width: 480px) {
  .cn-input { flex: 1 1 100%; }
  .cn-button { width: 100%; }
}