/*
  quatrodois — tema "Elevate" (HubSpot)
  Usado por: fale-conosco.html

  Terceiro tema visual do site (além do tema claro/faixa-verde da home e do
  tema escuro das páginas legais), isolado neste arquivo de propósito — ver
  README.md. Reproduz medidas tiradas via getComputedStyle da página ao vivo
  em somos.quatrodois.com.br/fale-conosco (viewport 1866px).
*/

:root {
  --el-fundo: #f1f1f1;
  --el-texto: #424242;
  --el-texto-claro: #f7f9fc;
  --el-marinho: #09152b;
  --el-verde: #82dd22;
  --el-verde-claro: #b9f96e;
  --el-borda: #d3dae4;
  --el-fonte: "Manrope", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--el-fonte);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--el-texto);
  background-color: var(--el-fundo);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 32px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--el-verde);
  color: var(--el-marinho);
  padding: 12px 20px;
  z-index: 1000;
  font-weight: 700;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- Cabeçalho ---------- */

.el-header {
  background-color: #ffffff;
}

.el-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1296px;
  margin: 0 auto;
  padding: 24px 32px;
}

.el-header__logo img {
  width: 250px;
  height: auto;
}

.el-nav {
  flex: 1;
}

.el-nav__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.el-nav__links a {
  display: block;
  padding: 8px 24px 8px 12px;
  font-size: 18px;
  font-weight: 400;
  color: var(--el-marinho);
  text-decoration: none;
}

.el-nav__links a[aria-current="page"] {
  font-weight: 700;
}

.el-nav__links a:hover {
  text-decoration: underline;
}

/* Botão de menu mobile: não existe no HTML (este header não tem
   hambúrguer), então assets/js/site.js cria e insere este botão em tempo
   de execução, do mesmo jeito que o .nav-toggle já funciona no header do
   site principal (ver ali para o CSS equivalente). */
.el-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--el-marinho);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* Tablet deitado (992–1199px): a nav de 6 itens cabe em uma linha, mas só
   com espaçamento mais apertado — com gap 32px + padding 12/24px ela quebrava
   em duas fileiras a 1024px (visto em emulação de iPad landscape). */
@media (min-width: 992px) and (max-width: 1199px) {
  .el-header__logo img { width: 200px; }
  .el-nav__links { gap: 14px; }
  .el-nav__links a { padding: 8px 10px; font-size: 17px; }
}

/* Até 991px (tablet em pé incluído): a nav de 6 itens + logo de 250px não
   cabe em uma linha a 768px e quebrava em duas fileiras (visto em emulação
   de iPad). Abaixo disso o header passa para o modo empilhado com o menu
   hambúrguer que o site.js injeta. */
@media (max-width: 991px) {
  .el-header__inner {
    flex-direction: column;
    gap: 16px;
  }

  .el-nav {
    /* .el-nav (elemento <nav>, display:block por padrão) só precisa
       centralizar o botão, que é inline-level — não vira flex container
       aqui, senão o <ul> de baixo (que já é flex por conta própria) passa
       a competir por espaço na mesma linha em vez de empilhar abaixo. */
    width: 100%;
    text-align: center;
  }

  .el-nav-toggle {
    /* Centralizado pelo text-align: center do .el-nav acima (o botão é
       inline-block por padrão, então margin:auto não teria efeito aqui). */
    display: block;
  }

  /* A lista só é escondida quando o botão de menu existe de fato (JS
     habilitado, ver .el-nav-toggle acima) — o seletor :has() garante que,
     sem JS, a navegação continue visível e empilhada em vez de ficar
     inacessível. Com 6 itens (spec de navegação canônica) a lista aberta
     não cabe em uma linha em 390px, por isso empilha em coluna. */
  .el-nav:has(.el-nav-toggle) .el-nav__links {
    display: none;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
  }

  .el-nav:has(.el-nav-toggle) .el-nav__links.is-open {
    display: flex;
  }
}

/* ---------- Formulário de contato ---------- */

.el-contact {
  padding: 96px 32px;
}

/* Cabeçalho dentro do card, à direita do painel escuro — mesma disposição
   da página ao vivo. */
.el-contact__title {
  margin: 0 0 32px;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  /* Peso normal, como no site ao vivo — não negrito. */
  font-weight: 400;
  line-height: 1.25;
  color: var(--el-marinho);
}

.el-contact__lede {
  margin: 0 0 88px;
  font-size: 1.125rem;
  color: var(--el-texto);
}

.el-contact__card {
  display: flex;
  max-width: 1296px;
  margin: 0 auto;
  border: 1px solid var(--el-borda);
  border-radius: 24px;
  background-color: var(--el-fundo);
  overflow: hidden;
}

/* Painel decorativo à esquerda do card. Sem conteúdo de propósito: no site
   ao vivo ele também é só um gradiente escuro. Some no mobile (ver bloco
   responsivo no fim do arquivo), onde o card empilha. */
.el-contact__banner {
  flex: 0 0 22%;
  min-height: 100%;
  background: linear-gradient(160deg, #3f3f3f 0%, #1b1b1b 100%);
}

.el-contact__content {
  width: 100%;
  padding: 56px 64px;
}

/* ---------- Formulário nativo (envia para o Google Forms) ---------- */

.el-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.el-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Rótulo do site ao vivo: peso normal, cinza do corpo — não negrito/marinho. */
.el-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-texto);
}

.el-req {
  color: #e5484d;
  margin-left: 1px;
}

.el-input {
  font-family: inherit;
  font-size: 16px;
  color: var(--el-marinho);
  /* Fundo levemente azulado, como no site ao vivo — não branco puro. */
  background-color: var(--el-texto-claro);
  border: 1px solid var(--el-borda);
  border-radius: 999px;
  padding: 15px 22px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.el-textarea {
  /* Textarea não combina com raio de pílula: bloco arredondado. */
  border-radius: 16px;
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}

.el-input:focus-visible {
  outline: none;
  border-color: var(--el-verde);
  box-shadow: 0 0 0 3px rgba(130, 221, 34, .28);
}

.el-input.is-invalido {
  border-color: #c0392b;
}

.el-input.is-invalido:focus-visible {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .2);
}

.el-erro {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #c0392b;
}

/* Isca anti-robô: fora da tela, nunca escondida com display:none — alguns
   robôs ignoram campos com display:none, mas preenchem estes. */
.el-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.el-btn {
  /* Largura cheia, como no site ao vivo. */
  display: block;
  width: 100%;
  margin-top: 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-marinho);
  background-color: var(--el-verde);
  border: 0;
  border-radius: 999px;
  padding: 16px 40px;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}

/* Prefixo fixo +55: o site ao vivo usa o seletor de país do HubSpot, mas
   todos os campos são de telefone brasileiro. Prefixo fixo entrega a mesma
   leitura sem carregar um seletor inteiro. */
.el-tel {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.el-tel__ddi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 15px 18px;
  font-size: 16px;
  color: var(--el-texto);
  background-color: var(--el-texto-claro);
  border: 1px solid var(--el-borda);
  border-radius: 999px;
  white-space: nowrap;
}

.el-tel__bandeira { font-size: 15px; line-height: 1; }

.el-tel__campo { flex: 1 1 auto; min-width: 0; }

/* Visível só para leitor de tela. */
.el-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.el-btn:hover { background-color: var(--el-verde-claro); }
.el-btn:active { transform: translateY(1px); }

.el-btn:focus-visible {
  outline: 2px solid var(--el-marinho);
  outline-offset: 2px;
}

.el-btn:disabled {
  opacity: .6;
  cursor: progress;
}

.el-status {
  margin: 0;
  font-size: 14.5px;
  color: var(--el-texto);
}

/* Estado enviado: some com os campos e deixa só a confirmação. */
.el-form.is-enviado .el-field,
.el-form.is-enviado .el-btn {
  display: none;
}

.el-form.is-enviado .el-status {
  font-size: 17px;
  font-weight: 600;
  color: var(--el-marinho);
}

@media (prefers-reduced-motion: reduce) {
  .el-input, .el-btn { transition: none; }
}

@media (max-width: 767px) {
  .el-contact {
    padding: 48px 16px;
  }

  .el-contact__card {
    display: block;
    border-radius: 16px;
  }

  .el-contact__banner {
    display: none;
  }

  .el-contact__content {
    /* Menos padding aninhado no mobile: a 390px o padding da seção (16px x2)
       somado ao do card deixaria os campos muito estreitos. */
    padding: 28px 20px;
  }

  .el-form { gap: 20px; }

  .el-contact__title { margin-bottom: 20px; }
  .el-contact__lede { margin-bottom: 32px; }
}

/* ---------- Rodapé ---------- */

.el-footer {
  background-color: var(--el-marinho);
  color: var(--el-texto-claro);
}

.el-footer__top {
  padding: 64px 32px;
  max-width: 1296px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.el-footer__logo img {
  width: 300px;
  height: auto;
}

.el-footer__links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.el-footer__links a {
  padding: 8px;
  font-size: 18px;
  font-weight: 400;
  color: var(--el-verde-claro);
  text-decoration: none;
}

.el-footer__links a:hover {
  text-decoration: underline;
}

.el-footer__social {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.el-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 2px solid var(--el-verde-claro);
  border-radius: 50%;
}

.el-footer__social svg {
  width: 16px;
  height: 16px;
  fill: var(--el-verde-claro);
}

.el-footer__divider {
  max-width: 1232px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.el-footer__bottom {
  max-width: 1296px;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 18px;
  font-weight: 400;
}

.el-footer__bottom p {
  margin: 0;
}

.el-footer__legal {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.el-footer__legal a {
  color: var(--el-verde-claro);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .el-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}