/* Pedido de prévia, compacto, dentro de "Como trabalhamos" (fundo grafite):
   nome e negócio lado a lado, a dor em chips e o botão que abre o WhatsApp. */

.proto {
  display: grid;
  gap: 14px;
  max-width: 480px;
  padding: 22px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--warm) 6%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 12%, transparent);
}
.proto__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.proto__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.proto__field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.proto__field > label, .proto__field legend { padding: 0; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--warm) 80%, var(--ink)); }
.proto input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warm) 10%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 18%, transparent);
  color: var(--warm);
  font: inherit;
  font-size: 16px;
  transition: box-shadow 0.3s var(--ease-out);
}
.proto input[type="text"]::placeholder { color: color-mix(in srgb, var(--warm) 45%, var(--ink)); }
.proto input[type="text"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sun); }
.proto input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--sun); }
.proto__error { font-size: 13px; font-weight: 600; color: var(--sun); }
.proto__error:empty { display: none; }

.proto__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.proto__choices legend { width: 100%; margin-bottom: 6px; }
.proto__choice { position: relative; display: block; cursor: pointer; }
.proto__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.proto__choice span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 22%, transparent);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.proto__choice span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warm) 55%, transparent); }
.proto__choice:hover span { background: color-mix(in srgb, var(--warm) 6%, transparent); }
.proto__choice input:checked + span { background: color-mix(in srgb, var(--warm) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--sun); }
.proto__choice input:checked + span::before { background: var(--sun); box-shadow: 0 0 8px color-mix(in srgb, var(--sun) 70%, transparent); }
.proto__choice input:focus-visible + span { outline: 2px solid var(--warm); outline-offset: 3px; }
.proto__send { justify-self: start; min-height: 44px; }
.proto__note { font-size: 13px; color: color-mix(in srgb, var(--warm) 72%, var(--ink)); }

@media (max-width: 480px) {
  .proto__row { grid-template-columns: 1fr; }
  .proto__send { justify-self: stretch; justify-content: center; }
}