/* Formulário "Deixe seu depoimento" (creative-ti.com/depoimentos/enviar/), desde 06/11/2026.
   Usa as cores, o topo e os botões do app.css; aqui fica só o que é do formulário. */

.envio { max-width: 720px; margin: 0 auto; padding: 36px 16px 48px; }
.envio-cab { margin-bottom: 22px; }
.envio-cab h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.envio-cab .apoio { margin-top: 10px; }

.cartao-form, .obrigado {
  position: relative; padding: 26px 26px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)), var(--fundo-2);
  border: 1px solid var(--linha); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .8);
}
.cartao-form::before, .obrigado::before {
  content: ''; position: absolute; inset: 0 24px auto; height: 2px; border-radius: 2px; background: var(--degrade); opacity: .9;
}

.campo { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend, .rotulo-campo {
  display: block; margin: 0 0 7px; padding: 0; font: 500 14px/1.35 var(--fonte-titulo); color: var(--texto);
}
.obrigatorio { color: var(--azul-claro); }
.opcional { font: 400 12.5px/1.3 var(--fonte); color: var(--texto-3); }
.campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px 13px; border-radius: 12px;
  border: 1px solid var(--linha-forte); background: var(--fundo-3); color: var(--texto);
  font: 15px/1.45 var(--fonte); transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.campo select option { background: var(--fundo-3); color: var(--texto); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(118, 183, 213, .18);
}
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: #F08A8A; }
.msg { margin: 6px 0 0; font-size: 13px; color: #F4A3A3; min-height: 0; }
.msg:empty { display: none; }
.dica { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }
.campo-rodape { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.contador { margin-left: auto; padding-top: 6px; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Estrelas para escolher: botões grandes (fáceis no celular), douradas como as do mural. */
.campo-estrelas { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; }
.campo-estrelas legend { grid-column: 1 / -1; float: left; width: 100%; }
.campo-estrelas .msg { grid-column: 1 / -1; }
.estrelas-escolha { display: inline-flex; gap: 2px; }
.estrela-btn {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: rgba(255, 255, 255, .18); transition: transform .12s, color .12s;
}
.estrela-btn svg { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.estrela-btn.acesa { color: #F7C21F; }
.estrela-btn:hover { transform: scale(1.08); }
.estrela-btn:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
.estrelas-rotulo { font: 500 14px/1.3 var(--fonte-titulo); color: var(--texto-2); }

/* Foto: prévia redonda, como vai ficar no cartão. */
.foto-linha { display: flex; align-items: center; gap: 16px; }
.foto-previa {
  flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: var(--fundo-4); color: var(--texto-3); box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.foto-previa svg { width: 34px; height: 34px; }
.foto-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.foto-acoes .botao { cursor: pointer; }
.foto-acoes .dica { flex-basis: 100%; margin: 2px 0 0; }
.link-discreto { padding: 0; border: 0; background: none; color: var(--texto-3); font: 500 13px/1.4 var(--fonte-titulo); text-decoration: underline; }
.link-discreto:hover { color: var(--texto); }
#foto:focus-visible + .botao, .foto-acoes .botao:focus-within { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

.caixinha { display: flex !important; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 14px/1.5 var(--fonte) !important; color: var(--texto-2) !important; }
.caixinha input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); cursor: pointer; }

/* Pote de mel: fora da tela para quem usa a página; robô costuma preencher. */
.pote { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.erro-geral { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(240, 138, 138, .1); border: 1px solid rgba(240, 138, 138, .35); color: #F7C0C0; font-size: 14px; }

.botao-enviar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 6px;
  border: 0; border-radius: 999px; background: var(--degrade); color: #fff; text-decoration: none;
  font: 600 15.5px/1 var(--fonte-titulo); box-shadow: 0 12px 30px -14px rgba(46, 118, 151, .9);
  transition: filter .15s, transform .15s;
}
.botao-enviar:hover { filter: brightness(1.12); }
.botao-enviar:active { transform: translateY(1px); }
.botao-enviar[disabled] { opacity: .6; cursor: progress; }
.nota-envio { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--texto-3); }

.obrigado { text-align: center; padding: 40px 26px 30px; outline: none; }
.obrigado-icone {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px;
  background: var(--degrade); color: #fff; box-shadow: 0 12px 30px -12px rgba(46, 118, 151, .9);
}
.obrigado-icone svg { width: 30px; height: 30px; stroke-width: 2.6; }
.obrigado h2 { font-size: 26px; font-weight: 600; }
.obrigado p { margin: 10px auto 22px; max-width: 46ch; color: var(--texto-2); }
.obrigado .botao-enviar { max-width: 280px; margin: 0 auto; }

@media (max-width: 640px) {
  .envio { padding: 24px 16px 36px; }
  .cartao-form { padding: 22px 16px 18px; border-radius: 16px; }
  .linha-2 { grid-template-columns: 1fr; }
  .estrela-btn { width: 44px; height: 44px; }
  .estrela-btn svg { width: 34px; height: 34px; }
  .campo-estrelas { grid-template-columns: 1fr; }
  .foto-previa { width: 64px; height: 64px; }
}