/* ============================================
   AVALIO — contato.css
   CSS específico da página "Contato"
   ============================================ */

.av-contato-hero {
  position: relative;
  padding: 100px 0 0;
  background: #fff;
  overflow: hidden;
}

/* ---------- Toggle FAQ / Envie sua dúvida ---------- */
.av-contato-page .periodo-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.av-contato-page .periodo-toggle .toggle-inner {
  display: inline-flex;
  background: #f0f2f5;
  border-radius: 30px;
  padding: 4px;
}
.av-contato-page .periodo-btn {
  border: none;
  background: transparent;
  color: #444;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 9px 26px;
  border-radius: 26px;
  cursor: pointer;
  transition: all .25s;
}
.av-contato-page .periodo-btn.active {
  background: var(--av-teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(94,200,212,.45);
}

.av-contato-card {
  background: #fff;
  border: 1.5px solid var(--av-border);
  border-radius: var(--av-radius-xl);
  padding: 40px;
  box-shadow: var(--av-shadow-md);
}

.av-contato-card .form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--av-mid);
}
.av-contato-card .form-control,
.av-contato-card .form-select {
  border: 1.5px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  padding: 10px 14px;
  font-size: .95rem;
}
.av-contato-card .form-control:focus,
.av-contato-card .form-select:focus {
  border-color: var(--av-teal);
  box-shadow: 0 0 0 3px rgba(94,200,212,.18);
}
.av-contato-card .form-control.is-invalid,
.av-contato-card .form-select.is-invalid {
  border-color: var(--av-orange-dark);
}
.av-contato-card .invalid-feedback {
  font-size: .8rem;
}

.av-contato-sucesso-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #E8FAF4;
  color: var(--av-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* ---------- Card lateral (canais alternativos) ---------- */
.av-contato-side-card {
  background: var(--av-dark);
  border-radius: var(--av-radius-xl);
  padding: 32px 28px;
  color: rgba(255,255,255,.85);
  height: 100%;
}
.av-contato-side-card h5 { color: #fff; }
.av-contato-side-card .text-muted { color: rgba(255,255,255,.5) !important; }

.av-contato-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--av-radius-md);
  color: rgba(255,255,255,.8);
  font-weight: 600;
  font-size: .88rem;
  transition: var(--av-transition);
}
.av-contato-side-link:hover {
  background: rgba(94,200,212,.15);
  border-color: var(--av-teal);
  color: #fff;
}
.av-contato-side-link i { color: var(--av-teal); font-size: 1.05rem; }

/* ---------- FAQ (categorias vindas da API) ---------- */
.av-faq-categoria { margin-bottom: 8px; }
.av-faq-categoria-titulo {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--av-teal-dark);
  margin-bottom: 14px;
}
.av-faq-loading {
  font-size: .88rem;
  color: var(--av-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

#faq, #contatoFormSection{
    padding-top: 20px;
}
/* ---------- Responsivo ---------- */
@media (max-width: 991px) {
  .av-contato-hero { padding: 130px 0 64px; }
  .av-contato-card { padding: 28px 22px; }
}

/* Badge do reCAPTCHA v3 (injetado pelo próprio script do Google) — reposicionamento
   via CSS é o método oficialmente suportado pelo Google pra mover o badge padrão.
   O Google controla o efeito "recolhido → abre no hover" animando a propriedade
   `right` (o badge fica parcialmente fora da tela à direita e desliza pra dentro
   no hover). Ao fixar `left`, esse efeito quebra e o badge fica sempre aberto —
   por isso recriamos o mesmo recolhe/expande aqui, via `width` + `overflow`,
   independente do `right` que o script do Google tenta controlar. */
.grecaptcha-badge {
  left: 4px !important;
  right: auto !important;
  width: 70px !important;
  overflow: hidden !important;
  transition: width .3s ease !important;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}