/* Vertexx TI - estilos do formulario de lead (reutilizavel: planos, contato, parceiros).
   Carregar depois de site.css. So usa tokens do site.css.
   --danger: unico token novo (erro). #B3261E sobre #FFFFFF 6.56, sobre #F3F6FB 6.06 (AA). */
:root { --danger: #B3261E; }
[hidden] { display: none !important; }

.lead-form { display: block; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-family: var(--font-title); font-weight: 500; font-size: .88rem; color: var(--heading); line-height: 1.3; }
.field .opt { font-family: var(--font-text); font-weight: 400; color: var(--text-muted); }
.field input[type='text'], .field input[type='tel'], .field input[type='email'], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--heading); background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23545C7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5'/%3E%3C/svg%3E"); }
.field input::placeholder { color: var(--text-muted); opacity: .75; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text);
}
.field [aria-invalid='true'] { border-color: var(--danger); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: .84rem; line-height: 1.4; color: var(--danger); font-weight: 500; }
.field-error::before { content: '!'; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--danger); color: var(--surface);
  font: 700 .7rem/16px var(--font-title); text-align: center; }

.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-2 { grid-column: 1 / -1; }
}
.form-grid .uf-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-3); }

.field-check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.field-check input[type='checkbox'] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.field-check input[type='checkbox']:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.field-check label { flex: 1; min-width: 0; font-family: var(--font-text); font-weight: 400; font-size: .9rem; color: var(--text); line-height: 1.5; }
.field-check label a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.field-check .field-error { flex-basis: 100%; }

/* Honeypot: fora da tela e sem foco. Nao usar display:none (alguns bots ignoram). */
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ts-slot { min-height: 0; }
.ts-slot:not(:empty) { min-height: 65px; }

.form-alert { padding: var(--space-4); border: 1.5px solid var(--danger); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .92rem; line-height: 1.5; }
.form-alert strong { display: block; color: var(--danger); font-family: var(--font-title); margin-bottom: 2px; }
.form-alert a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.form-actions .btn { width: 100%; min-height: 52px; }
.form-actions .btn[disabled] { opacity: .7; cursor: progress; }
.form-actions .btn[aria-busy='true']::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: lf-spin .7s linear infinite;
}
.form-note { font-size: .82rem; color: var(--text-muted); text-align: center; line-height: 1.5; }
@keyframes lf-spin { to { transform: rotate(360deg); } }