/* ==========================================================================
   Solmais Engenharia — página Contato
   Implementação do frame "v1" (374:117, 1920px) e do "Mobile" (374:364,
   420px) da seção Contato do Figma. Carregado depois de style.css: usa os
   mesmos tokens e componentes (abertura centralizada, cabeçalho, menu,
   formulário e acordeão da Home, endereço/canais/mapa do Sobre e Rodapé).
   ========================================================================== */

/* ==========================================================================
   ABERTURA (base e arranjo centralizado em style.css): 560px de altura
   ========================================================================== */
.abertura--centrada {
  min-height: 560px;
}

.abertura--centrada .abertura__conteudo {
  padding-bottom: 64px;
}

/* No desktop o recorte tem a proporção do card (3,37:1). Em telas mais
   estreitas a altura manda e as laterais são cortadas: o técnico, à
   direita, continua à vista */
.abertura__foto {
  object-position: 80% 50%;
}

/* Sombras do Figma, de cima para baixo: base, tom da marca e o brilho claro
   no canto superior esquerdo (o mesmo do Sobre, recalculado para 560px) */
.abertura__sombra {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 12.66%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(2, 41, 78, 0.165) 0%, rgba(1, 18, 36, 0.21) 100%),
    linear-gradient(-52.88deg, rgba(255, 255, 255, 0) 59.18%, rgba(255, 255, 255, 0.34) 99.63%);
}

/* ==========================================================================
   TRÊS CAMINHOS: proposta nova (azul), cliente e outros assuntos
   ========================================================================== */
.caminhos {
  display: flex;
  gap: 16px;
  margin-top: clamp(72px, 5.2083vw, 100px); /* 100px em 1920 */
}

/* A ação fica no pé do card; o card mais alto define a altura dos três */
.caminho {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 32px;
  border-radius: 20px;
  background: var(--cor-branco);
}

.caminho--destaque {
  background: var(--cor-azul);
  color: var(--cor-branco);
}

.caminho__texto,
.caminho__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.caminho__icone {
  flex: none;
  width: 52px;
  height: 52px;
}

.caminho__titulo {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}

.caminho__descricao {
  font-family: var(--fonte-poppins);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.caminho--destaque .caminho__descricao {
  color: rgba(255, 255, 255, 0.8);
}

.caminho__acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.caminho--destaque .caminho__acao {
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* Rótulo e contato na mesma linha, alinhados pela base do texto */
.caminho__contato {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

/* O e-mail pode descer o "@solmais..." para a linha de baixo (<wbr> no HTML)
   quando o card não comporta o endereço inteiro (abaixo de ~355px) */
.caminho__contato--coluna {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
}

.caminho__rotulo {
  font-family: var(--fonte-poppins);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.caminho--destaque .caminho__rotulo {
  color: rgba(255, 255, 255, 0.7);
}

.caminho__numero {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.caminho__numero--grande {
  font-size: 24px;
  line-height: 30px;
  color: var(--cor-azul);
}

.caminho__email {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--cor-azul);
}

.caminho__nota {
  font-family: var(--fonte-poppins);
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

@media (hover: hover) {
  .caminho__numero:hover,
  .caminho__email:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ==========================================================================
   FORMULÁRIO (base no Fechamento de style.css)
   ========================================================================== */
.fechamento__texto--whatsapp {
  color: rgba(255, 255, 255, 0.8);
}

.fechamento__whatsapp {
  color: var(--cor-amarelo);
  white-space: nowrap;
}

@media (hover: hover) {
  .fechamento__whatsapp:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* "Tipo de cobertura": o <select> e o texto de ajuda dividem a mesma célula
   da grade. O texto quebra linha (o select não) e dá a altura do campo;
   enquanto nada foi escolhido ele aparece e o texto do select some */
.campo__select--dica {
  display: grid;
}

.campo__select--dica > .campo__controle,
.campo__dica {
  grid-area: 1 / 1;
}

.campo__dica {
  padding: 15px 49px 15px 19px; /* o padding do campo + 1px de borda */
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  visibility: hidden;
}

.campo__select.campo__select--dica:has(option[value=""]:checked) .campo__dica {
  visibility: visible;
}

.campo__select.campo__select--dica:has(option[value=""]:checked) .campo__controle {
  color: transparent;
}

/* ==========================================================================
   O QUE ACONTECE DEPOIS: três passos numerados, o primeiro em azul
   ========================================================================== */
.depois {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: var(--espaco-secao);
}

.depois__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.passos {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 240px;
  padding: 32px;
  border-radius: 20px;
  background: var(--cor-branco);
}

.passo--destaque {
  background: var(--cor-azul);
  color: var(--cor-branco);
}

.passo__numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cor-fundo);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--cor-azul);
}

.passo--destaque .passo__numero {
  background: var(--cor-amarelo);
}

.passo__corpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.passo__titulo {
  margin: 0;
  font-size: 26px;
  line-height: 34px;
  font-weight: 500;
}

.passo__texto {
  font-family: var(--fonte-poppins);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.passo--destaque .passo__texto {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   ANTES DE ENVIAR: título à esquerda, acordeão da Home à direita
   ========================================================================== */
.antes {
  display: flex;
  align-items: flex-start;
  gap: 120px;
  margin-top: var(--espaco-secao);
}

.antes__cabecalho {
  display: flex;
  flex: 0 0 560px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.antes .acordeao {
  flex: 1 1 0;
  min-width: 0;
}

/* ==========================================================================
   CANAIS E ENDEREÇO (base em style.css): canais primeiro, e o endereço
   com a razão social e o CNPJ em cima
   ========================================================================== */
.local__endereco--empresa {
  padding-top: 8px;
}

.local__empresa {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

/* Rodapé: 120px abaixo de "Canais e endereço" no Figma desta página. No
   celular vale o espaço entre seções de style.css */
@media (min-width: 768px) {
  .rodape {
    margin-top: clamp(60px, 6.25vw, 120px);
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* Notebooks: os cards dos caminhos estreitam e o e-mail (20px) não cabe */
@media (max-width: 1400px) {
  .caminho__email {
    font-size: 18px;
    line-height: 26px;
  }
}

/* Até 1280px: caminhos e passos em coluna, título das dúvidas em cima */
@media (max-width: 1280px) {
  .caminhos,
  .passos {
    flex-direction: column;
  }

  /* Em coluna, base 0 + altura mínima 0 achataria os cards: tamanho do
     conteúdo */
  .caminho,
  .passo {
    flex: none;
    min-height: 0;
  }

  .caminho__acao {
    margin-top: 24px;
  }

  .antes {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .antes__cabecalho {
    flex: none;
  }
}

/* Formulário: texto em cima e formulário embaixo já a partir de 1280px (na
   Home isso só acontece em 960px; daí para baixo vale a regra dela) — ao
   lado, os campos em duas colunas ficam apertados */
@media (min-width: 961px) and (max-width: 1280px) {
  .fechamento {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .fechamento__copy {
    max-width: 760px;
  }

  .fechamento__micro {
    margin-top: 0;
  }
}

/* Tablet: o mapa desce para baixo dos canais */
@media (max-width: 960px) {
  .canais {
    order: -1;
  }
}

/* ==========================================================================
   LAYOUT MOBILE (Figma: Contato › Mobile, 420px) — até 767px
   Cards escuros a 8px da borda, conteúdo a 20px e 72px entre as seções
   ========================================================================== */
@media (max-width: 767px) {
  /* Abertura: o recorte em pé do Figma e a sombra de leitura ------------- */
  .abertura__foto {
    object-position: 50% 55%;
  }

  .abertura__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.495) 0%, rgba(2, 41, 78, 0.135) 22%, rgba(1, 18, 36, 0.495) 50%, rgba(0, 0, 0, 0.828) 78%);
  }

  .abertura--centrada .abertura__conteudo {
    padding-bottom: 24px;
  }

  /* Três caminhos: cards a 8px da borda, ícone ao lado do título --------- */
  .caminhos {
    gap: 12px;
    width: auto;
    margin-inline: 8px;
  }

  .caminho {
    gap: 16px;
    padding: 24px 22px;
    border-radius: 18px;
  }

  .caminho__cabecalho {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .caminho__icone {
    width: 44px;
    height: 44px;
  }

  .caminho__titulo {
    font-size: 22px;
    line-height: 28px;
  }

  .caminho__descricao {
    font-size: 15px;
    line-height: 24px;
  }

  .caminho__acao {
    gap: 10px;
    margin-top: 0;
    padding-top: 16px;
  }

  .caminho__rotulo {
    font-size: 14px;
    line-height: 20px;
  }

  .caminho__numero {
    font-size: 17px;
    line-height: 22px;
  }

  .caminho__numero--grande {
    font-size: 20px;
    line-height: 26px;
  }

  .caminho__email {
    font-size: 17px;
    line-height: 24px;
  }

  .caminho__nota {
    font-size: 14px;
    line-height: 21px;
  }

  /* Formulário ------------------------------------------------------------ */
  .campo__dica {
    padding: 15px 45px 15px 17px;
    font-size: 15px;
    line-height: 22px;
  }

  /* O que acontece depois: número ao lado do texto ----------------------- */
  .depois,
  .depois__cabecalho {
    gap: 20px;
  }

  .depois__titulo,
  .antes__titulo {
    font-size: 30px;
    line-height: 38px;
  }

  .passos {
    gap: 10px;
  }

  .passo {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .passo__numero {
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 20px;
  }

  .passo__corpo {
    flex: 1 1 0;
    gap: 6px;
  }

  .passo__titulo {
    font-size: 18px;
    line-height: 24px;
  }

  .passo__texto {
    font-size: 14px;
    line-height: 22px;
  }

  /* Antes de enviar ------------------------------------------------------- */
  .antes,
  .antes__cabecalho {
    gap: 20px;
  }

  /* Canais e endereço ----------------------------------------------------- */
  .local__endereco--empresa {
    gap: 2px;
    padding-top: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .local__empresa {
    font-size: 13px;
    line-height: 20px;
  }
}

/* Celulares estreitos: "Solicitar proposta técnica" é mais longo que o
   botão da Home e não cabe em 18px abaixo de 375px. Diminui e, se ainda
   faltar espaço (320px), quebra em duas linhas */
@media (max-width: 374px) {
  .formulario .botao {
    padding-block: 10px;
    font-size: 16px;
    line-height: 20px;
    white-space: normal;
    text-align: left;
  }
}