/* ==========================================================================
   SP Labor · pages/contato.css
   Página Contato (/contato/) — page-contato.php · spec-contato.md
   Depende de base.css (tokens, .btn*, .eyebrow, .section-sub, .container)
   e de shop.css (.p-card / .p-grid do grid de produtos em destaque —
   enfileirar shop.css também nesta página, ver docblock do template).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilitários compartilhados com a home (home.css NÃO carrega nesta página —
   cópia idêntica de home.css; a concatenação final pode deduplicar)
   -------------------------------------------------------------------------- */
.sec-head { text-align: center; margin-bottom: 30px; }
.sec-head .eyebrow { margin-bottom: 8px; }
.sec-head h2 { margin: 0 0 10px; font-size: var(--fs-section); font-weight: 600; }
.sec-cta { text-align: center; margin-top: 30px; }
.btn-lg { padding: 15px 30px; }
.btn-grow { transition: background-color .3s, color .3s, transform .3s; }
.btn-grow:hover,
.btn-grow:focus { transform: scale(1.1); }

/* --------------------------------------------------------------------------
   1 · Intro (bg #F8F8F8, padding 30px 0 0)
   -------------------------------------------------------------------------- */
.contact-intro {
  background-color: var(--c-bg-soft);
  padding: 30px 0 0;
}

/* Linha eyebrow: divider + texto lado a lado (intro 24×2; contatos 54×3) */
.contact-eyebrow-row {
  display: flex;
  align-items: center;
}

.contact-divider {
  flex: 0 0 auto;
  width: 24px;
  border-top: 2px solid var(--c-primary);
  margin-right: 10px;
}

.contact-divider--lg {
  width: 54px;
  border-top-width: 3px;
  margin-right: 20px;
}

.contact-intro__title {
  margin: 10px 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 37px;
  color: var(--c-heading);
}

.contact-intro__text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8em;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   2 · Formulário + Nossos Contatos (bg #F8F8F8, padding 30px 10px 50px)
   -------------------------------------------------------------------------- */
.contact-main {
  background-color: var(--c-bg-soft);
  padding: 30px 10px 50px;
}

.contact-cols {
  display: flex;
  align-items: stretch;
}

/* 2.1 · Card do formulário (45.873% desktop) */
.contact-form-card {
  width: 45.873%;
  background-color: var(--c-white);
  box-shadow: 0 0 30px -11px rgba(0, 0, 0, .25);
  padding: 40px;
}

.contact-form-card__title {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-heading);
}

.contact-form-card__sub {
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 19px;
}

.contact-form__notice {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 500;
}

.contact-form__notice--ok { color: var(--c-green); }
.contact-form__notice--err { color: var(--c-danger); }

/* Honeypot: fora da tela (não usar display:none — bots detectam) */
.contact-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.contact-form__field {
  margin-bottom: 10px;
}

.contact-form__field input,
.contact-form__field textarea {
  display: block;
  width: 100%;
  min-height: 47px;
  padding: 6px 16px;
  background-color: var(--c-white);
  border: 1px solid #D1D1D1;
  border-radius: var(--r-pill);
  font-size: 16px;
}

.contact-form__field textarea {
  resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}

/* Submit: pílula verde (child theme original força verde !important) */
.contact-form__submit {
  margin-top: 5px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 500;
}

/* 2.2 · Nossos Contatos (54.127% desktop, padding-left 40px, centrado na vertical) */
.contact-info {
  width: 54.127%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 40px;
}

.contact-info__lead {
  font-size: 16px;
  font-weight: 500;
}

.contact-info__title {
  margin: 10px 0 20px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-heading);
}

.contact-boxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.contact-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Círculo azul ~72px Ø (padding 19px + ícone 34px) */
.contact-box__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 19px;
  background-color: var(--c-primary);
  border-radius: 50%;
  color: var(--c-white);
}

.contact-box__icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.contact-box__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
}

.contact-box__title a {
  color: inherit;
}

.contact-box__title a:hover,
.contact-box__title a:focus {
  color: var(--c-primary);
}

.contact-box__desc {
  margin: 0;
  font-size: 13px;
}

/* Box Email: um degrau maior (14px) */
.contact-box--md .contact-box__title,
.contact-box--md .contact-box__desc {
  font-size: 14px;
}

/* CTA verde "SE PREFERIR CHAME NO WHATSAPP" (426×59, ícone 30px) */
.contact-whats-cta {
  margin-top: 30px; /* 20px de gap entre blocos + 10px do botão (original) */
  width: 100%;
  max-width: 426px;
  min-height: 59px;
  font-size: 14px;
  font-weight: 600;
}

.contact-whats-cta svg {
  width: 30px;
  height: 30px;
  margin: -10px 0;
  fill: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3 · Instagram (bg branco, padding 50px 10px; feed = plugin Smash Balloon)
   -------------------------------------------------------------------------- */
.contact-insta {
  background-color: var(--c-bg);
  padding: 50px 10px;
}

/* --------------------------------------------------------------------------
   4 · Produtos em destaque (bg #F8F8F8, padding 40px 0)
   Cards .p-card vêm de shop.css; aqui só o grid 4/3/1 e o H2 27px.
   -------------------------------------------------------------------------- */
.contact-products {
  background-color: var(--c-bg-soft);
  padding: 40px 0;
  overflow: hidden;
}

.contact-products .sec-head h2 {
  font-size: 27px;
}

.contact-products__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
  margin: 30px 0;
}

/* --------------------------------------------------------------------------
   Responsivo (breakpoints Elementor: 1024 / 767)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-cols {
    flex-direction: column;
  }

  .contact-form-card {
    width: auto;
    margin: 20px;
  }

  .contact-info {
    width: 100%;
    padding-left: 10px;
  }

  .contact-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .contact-form-card {
    padding: 20px;
  }

  .contact-info {
    align-items: center;
  }

  .contact-eyebrow-row {
    justify-content: center;
  }

  .contact-info__title {
    text-align: center;
  }

  /* Icon-boxes: 2 por linha, ícone ACIMA, tudo centralizado */
  .contact-boxes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact-box {
    width: calc(50% - 5px);
    flex-direction: column;
    text-align: center;
  }

  .contact-box__desc,
  .contact-box--md .contact-box__desc {
    font-size: 12px;
  }

  .contact-whats-cta {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-products__grid {
    grid-template-columns: 1fr;
  }
}