/* neWave . formularios de contato (home, Fluctus, One, SMS). Carregar com ?v=1 DEPOIS dos demais CSS.
   Camada de acabamento: nao mexe em estrutura, nomes ou estados de erro (.form-erro) dos formularios.
   Paleta: #0e262e, #16333c, #32be49, #82c89a. Secao clara por padrao; escura em .secao.escuro (paginas de produto)
   e na home em prefers-color-scheme: dark. */
.formulario {
  --f-bg: #fff;
  --f-border: #a9bcb0;
  --f-border-hover: #6f8f7c;
  --f-focus: #248e3d;
  --f-ring: rgba(50, 190, 73, .32);
  --f-text: #16333c;
  --f-ph: #6b8079;
  --f-label: #16333c;
  --f-invalid: #b3372f;
  --f-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2316333c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.secao.escuro .formulario {
  --f-bg: rgba(255, 255, 255, .06);
  --f-border: rgba(233, 247, 234, .34);
  --f-border-hover: rgba(233, 247, 234, .6);
  --f-focus: #82c89a;
  --f-ring: rgba(130, 200, 154, .38);
  --f-text: #f7faf8;
  --f-ph: #93aaa0;
  --f-label: #dbe8e1;
  --f-invalid: #ff9a90;
  --f-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9ddd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .contact-chapter .formulario {
    --f-bg: rgba(255, 255, 255, .06);
    --f-border: rgba(233, 247, 234, .34);
    --f-border-hover: rgba(233, 247, 234, .6);
    --f-focus: #82c89a;
    --f-ring: rgba(130, 200, 154, .38);
    --f-text: #f7faf8;
    --f-ph: #93aaa0;
    --f-label: #dbe8e1;
    --f-invalid: #ff9a90;
    --f-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9ddd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* rotulo legivel, acima do campo */
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) > label {
  display: block;
  margin: 0 0 8px;
  color: var(--f-label);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .005em;
}
.formulario form:is([data-lead],[data-preview-lead]) .field { gap: 0; }
.formulario form:is([data-lead],[data-preview-lead]) .campo { margin-bottom: 0; }

/* campo: altura minima 48px, respiro interno, borda fina e raio de 4px */
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--f-text);
  background-color: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.4;
  outline: 0;
  transition: border-color 160ms ease, background-color 160ms ease, outline-color 160ms ease;
}
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) textarea { min-height: 120px; resize: vertical; }
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea)::placeholder { color: var(--f-ph); opacity: 1; }
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea):hover { border-color: var(--f-border-hover); }
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea):focus,
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea):focus-visible {
  border-color: var(--f-focus);
  outline: 3px solid var(--f-ring);
  outline-offset: 0;
}
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea):user-invalid { border-color: var(--f-invalid); }
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select):-webkit-autofill {
  -webkit-text-fill-color: var(--f-text);
  caret-color: var(--f-text);
  box-shadow: 0 0 0 1000px var(--f-bg) inset;
}

/* select com seta propria (sem chrome nativo) */
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: var(--f-arrow);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) select option { color: #16333c; background: #fff; }
.secao.escuro .formulario form:is([data-lead],[data-preview-lead]) .campo select option { color: #e9f7ea; background: #10262d; }
@media (prefers-color-scheme: dark) {
  .contact-chapter .formulario form:is([data-lead],[data-preview-lead]) .field select option { color: #e9f7ea; background: #10262d; }
}

@media (prefers-reduced-motion: reduce) {
  .formulario form:is([data-lead],[data-preview-lead]) :is(.campo, .field) :is(input, select, textarea) { transition: none; }
}