/* =========================================================
   INCOMAF 2026 — Página de Contato
   Depende de main.css + paginas.css
   ========================================================= */

/* ===================== SPLIT — ajuste de proporção ===================== */
/* No formulário, a col direita (form) precisa de mais espaço */
.ct-split .container { grid-template-columns: .88fr 1.12fr; align-items: start; }
@media (max-width: 919px) {
  .ct-split .container { grid-template-columns: 1fr; }
}

/* ===================== CANAIS DE CONTATO RÁPIDO ===================== */
.ct-canais {
  margin-top: clamp(32px, 3.5vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: var(--hairline);
  border-radius: var(--raio-l);
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra-s);
}

.ct-canal {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px clamp(18px, 2.5vw, 26px);
  border-bottom: var(--hairline);
  transition: background .18s;
}
.ct-canal:last-child { border-bottom: 0; }
.ct-canal:hover { background: rgba(184,146,74,.04); }

.ct-canal-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ouro);
  background: rgba(184,146,74,.1);
  border: 1px solid var(--ouro-linha);
  margin-top: 2px;
}

.ct-canal-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c500);
  margin-bottom: 5px;
}

.ct-canal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-corpo);
  font-weight: 700;
  font-size: 15px;
  color: var(--indigo);
  transition: color .18s, gap .18s;
}
.ct-canal-link:hover { color: var(--ouro); gap: 9px; }
.ct-canal-link svg { flex: none; transition: transform .18s; }
.ct-canal-link:hover svg { transform: translate(2px, -2px); }

.ct-canal-info {
  display: block;
  font-size: 14.5px;
  color: var(--c700);
  line-height: 1.6;
}

/* ===================== CARD DO FORMULÁRIO ===================== */
.ct-form-card {
  background: var(--branco);
  border: var(--hairline);
  border-radius: var(--raio-l);
  padding: clamp(28px, 3.2vw, 46px);
  box-shadow: var(--sombra-m);
  position: relative;
  overflow: hidden;
}

/* Fio dourado no topo */
.ct-form-card::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3.2vw, 46px);
  right: clamp(28px, 3.2vw, 46px);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro-linha), transparent);
}

/* ===================== FORMULÁRIO ===================== */
.ct-form { display: flex; flex-direction: column; gap: 20px; }

/* Honeypot — oculto de humanos, visível para bots */
.ct-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tabindex: -1;
}

/* Campo genérico */
.ct-field { display: flex; flex-direction: column; gap: 7px; }

/* Label */
.ct-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c600);
}
.ct-obrig { color: var(--ouro); font-weight: 700; }
.ct-obrig-nota {
  font-size: 13px;
  color: var(--c500);
  margin: 0;
}

/* Input e textarea — estado base */
.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form textarea {
  width: 100%;
  font-family: var(--f-corpo);
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--c200);
  border-radius: var(--raio-s);
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
}

.ct-form input::placeholder,
.ct-form textarea::placeholder { color: var(--c400); }

/* Hover */
.ct-form input[type="text"]:hover,
.ct-form input[type="email"]:hover,
.ct-form input[type="tel"]:hover,
.ct-form textarea:hover {
  border-color: var(--c300);
}

/* Focus */
.ct-form input[type="text"]:focus,
.ct-form input[type="email"]:focus,
.ct-form input[type="tel"]:focus,
.ct-form textarea:focus {
  border-color: var(--ouro);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(184,146,74,.12);
}

/* Erro de validação */
.ct-form input:invalid:not(:placeholder-shown),
.ct-form textarea:invalid:not(:placeholder-shown) {
  border-color: #c94a4a;
}
.ct-form input:invalid:not(:placeholder-shown):focus,
.ct-form textarea:invalid:not(:placeholder-shown):focus {
  box-shadow: 0 0 0 3px rgba(201,74,74,.1);
}

/* Textarea */
.ct-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}

/* Select customizado */
.ct-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-select-wrap select {
  width: 100%;
  font-family: var(--f-corpo);
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--c200);
  border-radius: var(--raio-s);
  padding: 11px 40px 11px 14px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-select-wrap select:hover { border-color: var(--c300); }
.ct-select-wrap select:focus {
  border-color: var(--ouro);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(184,146,74,.12);
}
/* Opção placeholder (desabilitada) */
.ct-select-wrap select option[value=""][disabled] { color: var(--c400); }
.ct-select-ico {
  position: absolute;
  right: 13px;
  color: var(--c500);
  pointer-events: none;
  transition: transform .2s;
}
.ct-select-wrap:focus-within .ct-select-ico { transform: rotate(180deg); color: var(--ouro); }

/* ===================== UPLOAD DE ANEXOS ===================== */
.ct-upload {
  position: relative;
  border: 1.5px dashed var(--c200);
  border-radius: var(--raio-s);
  background: var(--papel);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.ct-upload:hover,
.ct-upload.is-over { border-color: var(--ouro); background: rgba(184,146,74,.04); }
.ct-upload.is-over { border-style: solid; }

/* Input invisível — cobre apenas a zona de drop (não a lista de arquivos) */
.ct-upload-input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
/* Quando não há arquivos, o input cobre tudo */
.ct-upload:not(.has-files) .ct-upload-input {
  bottom: 0;
  height: 100%;
}

/* Face visual da zona de drop */
.ct-upload-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  color: var(--c500);
  pointer-events: none;
  text-align: center;
}
.ct-upload-face svg { color: var(--ouro); flex: none; }
.ct-upload-txt {
  font-family: var(--f-corpo);
  font-weight: 700;
  font-size: 14px;
  color: var(--indigo);
}
.ct-upload-info {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c400);
}

/* Lista de arquivos selecionados */
.ct-file-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 3;
}
.ct-file-list:empty { display: none; }

.ct-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--branco);
  border: var(--hairline);
  border-radius: var(--raio-s);
  padding: 9px 13px;
  font-size: 13.5px;
  color: var(--c700);
}
.ct-file-item svg { flex: none; color: var(--ouro); }
.ct-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-corpo);
}
.ct-file-size {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c400);
  flex: none;
}
.ct-file-rm {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c400);
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background .15s, color .15s;
  padding: 0;
}
.ct-file-rm:hover { background: rgba(201,74,74,.1); color: #c94a4a; }

/* Quando há arquivos: reduz zona de drop e mostra a lista */
.ct-upload.has-files .ct-upload-face { padding: 14px 20px; }

/* ===================== BOTÃO SUBMIT ===================== */
.ct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.ct-submit-ico { flex: none; transition: transform .22s; }
.ct-submit:hover .ct-submit-ico { transform: translateX(3px) translateY(-2px); }

/* ===================== MENSAGENS DE FEEDBACK ===================== */
.ct-msg {
  border-radius: var(--raio-s);
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.55;
}
.ct-msg--erro {
  background: rgba(201,74,74,.08);
  border: 1px solid rgba(201,74,74,.3);
  color: #8b2020;
}
.ct-msg[hidden] { display: none; }

/* Sucesso */
.ct-sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(32px, 4vw, 52px) 24px;
  gap: 14px;
}
.ct-sucesso[hidden] { display: none; }
.ct-sucesso-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ouro);
  background: rgba(184,146,74,.12);
  border: 1px solid var(--ouro-linha);
}
.ct-sucesso h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--indigo-900);
  margin: 0;
}
.ct-sucesso p {
  font-size: 15.5px;
  color: var(--c700);
  margin: 0;
  max-width: 36ch;
}

/* ===================== MOBILE (≤559px) ===================== */
@media (max-width: 559px) {
  .ct-form-card { padding: 24px 20px; }
  .ct-form { gap: 16px; }
  .ct-form input[type="text"],
  .ct-form input[type="email"],
  .ct-form input[type="tel"],
  .ct-form textarea,
  .ct-select-wrap select {
    font-size: 16px; /* evita zoom automático no iOS */
  }
  .ct-select-wrap select {
    min-height: 48px; /* área de toque confortável */
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .ct-upload-face { padding: 22px 16px; }
  .ct-upload-txt { font-size: 13.5px; }
}

/* ===================== MICRO-ANIMAÇÕES MOBILE ===================== */
@media (max-width:559px) and (prefers-reduced-motion:no-preference) {
  .ct-form-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s cubic-bezier(.2,.7,.2,1),
                transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in .ct-form-card {
    opacity: 1;
    transform: none;
  }
  .reveal .ct-canal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s cubic-bezier(.2,.7,.2,1),
                transform .45s cubic-bezier(.2,.7,.2,1),
                background .18s;
  }
  .reveal.in .ct-canal {
    opacity: 1;
    transform: none;
  }
  .ct-canais .ct-canal:nth-child(2) { transition-delay: .06s; }
  .ct-canais .ct-canal:nth-child(3) { transition-delay: .12s; }
}