/* ==========================================================================
   FORMULÁRIO DE CONTATO (claro) — home, a-emcomjunto, varejo
   ========================================================================== */
.formulario{background:#fff;border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);box-shadow:0 18px 44px rgba(3,21,38,.05)}
.formulario h3{font-weight:400;font-size:clamp(21px,1.94vw,26px);line-height:1.2;letter-spacing:-.02em;color:var(--n-900)}
.formulario .intro{margin-top:var(--esp-3);font-size:14px;line-height:1.6;color:var(--n-600)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-4);margin-top:clamp(24px,2.6vw,32px)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo--largo{grid-column:1/-1}
.campo label{font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--n-500)}
.campo input,.campo select,.campo textarea{
  font-family:var(--display);font-size:15px;color:var(--n-900);background:var(--n-50);
  border:1px solid var(--n-200);border-radius:var(--r-md);padding:13px 14px;width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.campo textarea{resize:vertical;min-height:104px;line-height:1.55}
.campo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--n-500) 50%),linear-gradient(135deg,var(--n-500) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;background:#fff;border-color:var(--marca-500);box-shadow:0 0 0 3px rgba(64,160,231,.16)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--n-400)}
.form-acoes{margin-top:clamp(22px,2.4vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4)}
.form-acoes .btn{flex:none}
.form-nota{font-size:12.5px;line-height:1.5;color:var(--n-500);max-width:30ch}

/* ---------- Comparativo "contratando separado × com a Emcomjunto" ----------
   Usado junto ao formulário em home e o-que-fazemos (tablist .forn + texto
   que troca em .confronto). */
.fornecedores{display:flex;flex-wrap:wrap;gap:8px}
.forn{padding:11px 18px;border-radius:var(--r-full);border:1px solid var(--n-300);background:#fff;
  font-weight:500;font-size:14px;color:var(--n-600);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.forn:hover{transform:translateY(-2px);border-color:var(--marca-300);color:var(--n-900)}
.forn[aria-selected="true"]{background:var(--marca-600);border-color:var(--marca-600);color:#fff}

.confronto{margin-top:var(--esp-5);border:1px solid var(--n-200);border-radius:var(--r-lg);
  background:#fff;overflow:hidden;position:relative}
.confronto .metade{padding:24px 26px}
.confronto .metade + .metade{border-top:1px solid var(--n-200)}
.confronto .rot{font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}
.confronto .sep .rot{color:var(--n-400)}
.confronto .emcj{position:relative;background:linear-gradient(180deg,rgba(65,175,255,.05),rgba(65,175,255,.10))}
.confronto .emcj .rot{color:var(--marca-700)}
.confronto .emcj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--luminoso-500),transparent)}
.confronto p{margin-top:var(--esp-3);font-size:15.5px;line-height:1.6;transition:opacity .3s var(--ease)}
.confronto .sep p{color:var(--n-500)}
.confronto .emcj p{color:var(--n-900)}
.confronto.trocando p{opacity:0}
.confronto .marcador{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

@media (max-width:620px){
  .campos{grid-template-columns:1fr}
}