/* Tecela AI · /contato: página "vamos conversar", coluna de contexto + formulário em 3 passos. */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.ctt-section {padding-top:76px}
.ctt-layout {display:grid;grid-template-columns:minmax(280px,.85fr) minmax(440px,1.15fr);gap:64px;align-items:start}

/* ---------- Coluna de contexto ---------- */
.ctt-intro {position:sticky;top:120px}
.ctt-intro h1 {font-size:clamp(32px,3.4vw,46px);margin:16px 0 20px;max-width:14ch}
.ctt-intro .lead {font-size:17px;max-width:40ch;margin-bottom:0}
.ctt-founder {display:flex;gap:14px;align-items:center;margin-top:30px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ctt-founder img {width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.ctt-founder strong {display:block;font-size:15px;color:var(--fg);line-height:1.4}
.ctt-founder span {display:block;font-size:12.5px;color:var(--fg-2);margin-top:4px}
.ctt-next {padding-top:28px}
.ctt-next h2 {font-size:15px;font-weight:650;margin:0 0 16px}
.ctt-next ol {list-style:none;counter-reset:ctt-next;display:grid;gap:14px;padding:0;margin:0;max-width:38ch}
.ctt-next li {counter-increment:ctt-next;display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:14px;color:var(--fg-2);line-height:1.55}
.ctt-next li::before {content:counter(ctt-next);color:var(--accent);background:var(--accent-soft);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:650}

/* ---------- Cartão do formulário ---------- */
.ctt-card {border:1px solid var(--border);border-radius:18px;background:var(--bg-2);padding:30px;box-shadow:0 20px 50px #0006;min-width:0}
.ctt-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:0 0 24px;list-style:none}
.ctt-steps li {border-top:3px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:7px;color:var(--muted);line-height:1.35}
.ctt-steps li>span {display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--bg);border:1px solid var(--border);font-size:10px;flex:0 0 21px}
.ctt-steps b {font-size:10.5px;font-weight:600}
.ctt-steps li[aria-current="step"] {border-color:var(--accent);color:var(--fg)}
.ctt-steps li[aria-current="step"]>span {background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.ctt-steps li[data-complete="true"] {border-color:var(--accent-2)}
.ctt-step-label {margin:0 0 22px;font:600 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.ctt-step {border:0;margin:0;padding:0;min-width:0}
.ctt-q-title {display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--fg);margin:0 0 8px;padding:0}
.ctt-q-help {font-size:13.5px;color:var(--fg-2);margin:0 0 20px}

.ctt-field {display:grid;gap:8px;margin:0 0 20px}
.ctt-field>label {font-size:14px;font-weight:600;color:var(--fg)}
.ctt-field small {font-weight:450;color:var(--muted)}
.ctt-field input,.ctt-field select,.ctt-field textarea {width:100%;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);padding:13px 14px;font:15px/1.4 var(--font-sans);transition:border-color .2s,box-shadow .2s}
.ctt-field select {appearance:auto}
.ctt-field textarea {resize:vertical;min-height:90px}
.ctt-field input:focus,.ctt-field select:focus,.ctt-field textarea:focus {outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.ctt-opts {display:grid;gap:8px;margin:0 0 22px}
.ctt-opts label {position:relative;cursor:pointer}
.ctt-opts input {position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ctt-opts span {display:flex;align-items:center;gap:12px;min-height:52px;padding:13px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:14.5px;line-height:1.35;transition:border-color .15s,background .15s}
.ctt-opts span::before {content:"";width:17px;height:17px;border-radius:50%;border:1.5px solid var(--muted);flex:none;transition:all .15s}
.ctt-opts label:hover span {border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.ctt-opts input:checked+span {border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.ctt-opts input:checked+span::before {border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg)}
.ctt-opts input:focus-visible+span {outline:3px solid var(--accent);outline-offset:2px}

.ctt-check {display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--fg-2);margin-top:4px;cursor:pointer}
.ctt-check input {width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.ctt-hp {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ctt-error {margin:14px 0 0;color:var(--danger);font-size:14px}
.ctt-nav {display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.ctt-nav [data-contact-back] {margin-right:auto}
.ctt-privacy {margin:16px 0 0;font-size:12px;color:var(--muted);text-align:center}

.ctt-done,.ctt-fallback {outline:none}
.ctt-done h3,.ctt-fallback h3 {font-size:25px;margin:6px 0 10px}
.ctt-done p,.ctt-fallback p {color:var(--fg-2)}
.ctt-fallback textarea {width:100%;margin:6px 0 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);padding:12px;font:13px/1.5 var(--font-mono)}
.ctt-fallback-actions {display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Responsivo ---------- */
@media(max-width:960px) {
  .ctt-section {padding-top:52px}
  .ctt-layout {grid-template-columns:1fr;gap:36px}
  .ctt-intro {position:static}
  .ctt-intro .lead {max-width:none}
  .ctt-next {display:none}
}
@media(max-width:600px) {
  .ctt-card {padding:22px 18px}
  .ctt-steps b {font-size:10px}
  .ctt-nav .btn {flex:1;justify-content:center}
}
@media(max-width:420px) {
  .ctt-steps {gap:6px}
  .ctt-steps li {display:block;padding-top:9px}
  .ctt-steps li>span {margin-bottom:6px}
}