/* ============================================================
   FALE CONOSCO — Contact Page + INSTITUCIONAL Page
   ============================================================ */

/* ── Layout: Info | Formulário (lado a lado) ────────────────── */
.pc-contact-page { padding-bottom: var(--pc-space-xl); }

.pc-contact-wrap {
  display:   flex;
  gap:       var(--pc-space-xl);
  align-items: flex-start;
  margin-top: var(--pc-space-md);
}

/* ── Bloco de informações (coluna esquerda ≈ 40%) ───────────── */
.pc-contact-info {
  background-color: var(--pc-primary-darkest);
  padding:          3.2rem 2.4rem;
  border-radius:    1.6rem;
  flex:             0 0 calc(40% - 1.2rem);
  max-width:        calc(40% - 1.2rem);
}

.pc-contact-info__title-wrap {
  margin-bottom: 1.6rem;
}

.pc-contact-info__description {
  margin-bottom: 6.4rem;
}

.pc-contact-info__item {
  display:       flex;
  align-items:   center;
  gap:           1.8rem;
  margin-bottom: 2.4rem;
}

.pc-contact-info__icon {
  color:     var(--pc-secondary-darkest);
  flex-shrink: 0;
  width:     2rem;
  height:    2rem;
}

.pc-contact-info__item a {
  color:      var(--pc-llight);
  transition: opacity var(--pc-transition-fast);
}
.pc-contact-info__item a:hover { opacity: 0.8; }

/* ── Formulário (coluna direita ≈ 55%) ──────────────────────── */
.pc-contact-form {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.pc-contact-form__field {
  display:       flex;
  flex-direction:column;
  gap:           0.8rem;
  margin-bottom: 1.9rem;
}

.pc-contact-form__input,
.pc-contact-form__textarea,
.pc-contact-form__select {
  padding:       1rem 1.2rem;
  border:        1px solid var(--pc-ldark);
  border-radius: var(--pc-radius);
  font-family:   var(--pc-font-family);
  font-size:     var(--pc-font-md);
  color:         var(--pc-ddarkest);
  background:    #fff;
  outline:       none;
  transition:    border-color var(--pc-transition-fast);
  width:         100%;
}

.pc-contact-form__input:focus,
.pc-contact-form__textarea:focus,
.pc-contact-form__select:focus {
  border-color: var(--pc-primary-dark);
}

.pc-contact-form__input.has-error,
.pc-contact-form__textarea.has-error,
.pc-contact-form__select.has-error {
  border-color: var(--pc-error-darkest);
}

.pc-contact-form__textarea { resize: vertical; min-height: 12rem; }

.pc-contact-form__error {
  color:     var(--pc-error-darkest);
  font-size: var(--pc-font-sm);
}

/* Select nativo estilizado */
.pc-select-wrap {
  position: relative;
  width:    100%;
}

.pc-contact-form__select {
  appearance:       none;
  -webkit-appearance: none;
  padding-right:    3rem;
  cursor:           pointer;
}

.pc-select-arrow {
  position:  absolute;
  right:     1.2rem;
  top:       50%;
  transform: translateY(-50%);
  pointer-events: none;
  color:     var(--pc-dmedium);
  font-size: 1.4rem;
}

/* Footer do form */
.pc-contact-form__footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      4.6rem;
}

/* ── Modal de feedback ───────────────────────────────────────── */
/* Overlay/box vêm de theme.css. Aqui só ajustes pontuais. */
.pc-contact-page .pc-modal-overlay { background-color: rgba(0,0,0,0.55); }

.pc-modal-box {
  background:    #fff;
  border-radius: var(--pc-radius);
  padding:       3.5rem;
  position:      relative;
  max-width:     50rem;
  width:         90vw;
}

.pc-contact-modal__box {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: space-around;
  text-align:      center;
  gap:             var(--pc-space-md);
  min-height:      32rem;
}

.pc-modal-close {
  position:   absolute;
  top:        2rem;
  right:      2rem;
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--pc-ddark);
  transition: color var(--pc-transition-fast);
}
.pc-modal-close:hover { color: var(--pc-secondary-darkest); }

.pc-contact-modal__header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--pc-space-xs);
}

.pc-contact-modal__icon { font-size: 6.4rem; }

/* Botão outline em fundo claro (sobrepõe a versão branca de in-live.css) */
.pc-contact-page .pc-btn--outline,
.pc-contact-modal__box .pc-btn--outline,
.pc-inst-page .pc-btn--outline {
  background:   transparent;
  color:        var(--pc-secondary-darkest);
  border-color: var(--pc-secondary-darkest);
}

.pc-contact-page .pc-btn--outline:hover,
.pc-contact-modal__box .pc-btn--outline:hover,
.pc-inst-page .pc-btn--outline:hover {
  background:   var(--pc-secondary-darkest);
  color:        #fff;
  border-color: var(--pc-secondary-darkest);
}

/* ── INSTITUCIONAL ───────────────────────────────────────────── */
.pc-inst-page { padding-bottom: var(--pc-space-xl); }

.pc-inst-page__content {
  max-width: 89.4rem; /* igual ao .pc-detail__content */
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pc-contact-wrap {
    flex-direction: column;
    gap:            var(--pc-space-lg);
  }

  .pc-contact-info {
    flex:      0 0 100%;
    max-width: 100%;
    margin-bottom: 0;
  }

  .pc-contact-form { flex: 0 0 100%; }

  .pc-contact-form__footer { justify-content: center; }
}