/* =========================================================
   Página "Contato"
   Usa o mesmo sistema da Home (styles.css / responsive.css):
   .container, --gutter, --container-width, escala --site-scale e
   breakpoints 1201–1330 · ≤1200 · ≤767. Medidas em px de layout (1920).
   O banner "Sua dúvida já pode ter resposta" reaproveita o .help da Home.
   ========================================================= */
.icon--phone { --icon: url('../assets/icons/phone-call.svg'); }

.icon--at { --icon: url('../assets/icons/at.svg'); }

/* ícones de "Outros canais" (PNG da pasta do Contato: "f" sem círculo, como no layout) */
.icon--social-instagram { --icon: url('../assets/icons/instagram.png'); }

.icon--social-facebook { --icon: url('../assets/icons/facebook-f.png'); }

/* redes cadastradas pelo painel: mesmo desenho do rodapé */
.icon--social-linkedin { --icon: url('../assets/icons/linkedin.svg'); }

.icon--social-x { --icon: url('../assets/icons/x.svg'); }

.icon--social-tiktok { --icon: url('../assets/icons/tiktok.svg'); }

.icon--social-threads { --icon: url('../assets/icons/threads.svg'); }

.page-contato [hidden] {
  display: none !important;
}

/* reset sem especificidade (não anula as margens das classes abaixo) */
:where(.contact-hours) dl,
:where(.contact-hours) dd {
  margin: 0;
}

/* =========================================================
   HERO + CANAIS
   ========================================================= */
.hero--contact {
  height: auto;
  padding-bottom: 79px; /* mesmo respiro do hero de Serviços e Documentos */
}

.contact-hero {
  margin-top: 83px;
}

.contact-hero__title {
  font-size: 74px;
  font-weight: 600;
  line-height: 88px;
  text-transform: uppercase;
  color: var(--color-white);
}

.contact-hero__subtitle {
  margin-top: 2px;
  font-size: 27px;
  line-height: 38px;
  color: var(--color-secondary);
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 39px;
  margin-top: 34px;
}

.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 431px;
  padding: 33px 31px 46px;
  border: 2px solid var(--color-border);
  border-radius: 30px;
  background: linear-gradient(170deg, #202a2a 0%, #1b2525 100%);
}

.contact-channel__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 73px;
  border-radius: 6px;
  background: var(--color-surface-dark);
}

.contact-channel__icon .icon {
  width: 41px;
  height: 41px;
}

.contact-channel__title {
  margin-top: 27px;
  font-size: 25.5px;
  font-weight: 600;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--color-white);
}

.contact-channel__text {
  margin-top: 6px;
  font-size: 22px;
  line-height: 28px;
  color: var(--color-secondary);
}

.contact-channel__value {
  margin-top: 25px;
  font-size: 25.3px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-white);
}

.contact-channel__value--email {
  margin-top: 19px;
  font-size: 21.9px;
  line-height: 30px;
  word-break: break-word;
}

.contact-channel__button {
  width: 100%;
  height: 61px;
  margin-top: auto;
  font-size: 20px;
  letter-spacing: 1px;
}

/* =========================================================
   FORMULÁRIO
   ========================================================= */
.contact-section {
  padding: 111px 0 128px;
  background: var(--color-background-light);
}

/* conteúdo + cards laterais (largura do contêiner = borda do menu) */
.contact-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 612px;
  align-items: start;
  column-gap: 75px;
}

.contact-section__subtitle {
  max-width: 760px;
  margin-top: 14px;
  font-size: 24px;
  line-height: 33px;
  color: var(--color-text-dark, #1a2424);
}

/* ---------- Coluna lateral ---------- */
.contact-aside {
  margin-top: 185px;
}

.contact-hours {
  padding: 38px 37px 22px 33px;
  border: 2px solid #c2cac9;
  border-radius: 30px;
}

.contact-hours__title,
.contact-map__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
}

.contact-hours__title {
  color: var(--color-text-primary);
}

.contact-hours__list {
  margin-top: 16px;
}

.contact-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 15px;
  font-size: 22px;
  line-height: 28px;
  color: var(--color-text-body);
}

.contact-hours__row + .contact-hours__row {
  border-top: 1.5px solid #b6bbb8;
}

.contact-hours__row dd {
  font-weight: 600;
  white-space: nowrap;
  color: #335450;
}

/* observações dos horários (cadastradas no painel; só aparece quando preenchida) */
.contact-hours__note {
  margin-top: 8px;
  font-size: 19px;
  line-height: 26px;
  color: var(--color-text-body);
}

.contact-map {
  margin-top: 29px;
  padding: 44px 36px 52px 38px;
  border-radius: 30px;
  background: linear-gradient(175deg, #242d2d 0%, #202a2a 100%);
}

.contact-map__title {
  color: var(--color-white);
}

.contact-map__frame {
  overflow: hidden;
  margin-top: 21px;
  border-radius: 10px;
  background: #2e3a3a;
  aspect-ratio: 530 / 227;
}

.contact-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* O site usa zoom de 70% no desktop. Alguns navegadores (Safari) aplicam esse
   zoom também ao conteúdo do iframe, e o mapa ocupa só parte da área.
   Desfazendo o zoom no próprio iframe, o mapa sempre preenche a caixa. */
@media (min-width: 1201px) {
  .contact-map__frame iframe {
      zoom: calc(1 / var(--site-scale));
    }
}

.contact-map__address {
  margin-top: 17px;
  font-size: 22px;
  line-height: 26px;
  color: var(--color-secondary);
}

.contact-map__address a:hover {
  text-decoration: underline;
}

/* =========================================================
   OUTROS CANAIS
   ========================================================= */
.contact-other {
  padding: 115px 0 131px;
  background: var(--color-white);
}

.contact-other__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 41px;
  margin-top: 37px;
}

.contact-other__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 310px;
  padding: 37px 39px 45px 46px;
  border-radius: 30px;
  background: linear-gradient(170deg, #1f2929 0%, #1a2424 100%);
}

.contact-other__card-title {
  font-size: 31px;
  font-weight: 600;
  line-height: 38px;
  text-transform: uppercase;
  color: var(--color-white);
}

.contact-other__text {
  margin-top: 8px;
  font-size: 22.6px;
  line-height: 26px;
  color: var(--color-secondary);
}

.contact-other__button {
  width: 100%;
  height: 61px;
  margin-top: auto;
  font-size: 20px;
}

.contact-other__social {
  display: flex;
  flex-wrap: wrap; /* várias redes cadastradas no painel: quebram linha em vez de sair do card */
  align-items: center;
  gap: 24px 40px;
  margin-top: auto;
  padding-top: 22px; /* distância mínima do texto quando os ícones ocupam mais de uma linha */
  margin-bottom: 5px;
  margin-left: -5px;
}

.contact-other__social .icon {
  width: 58px;
  height: 58px;
  background-color: var(--color-secondary);
  transition: background-color 0.2s ease;
}

.contact-other__social .icon--social-facebook {
  width: 66px;
  height: 71px;
  margin-left: -10px;
  margin-right: -10px; /* o "f" é estreito: mesmo espaço dos dois lados quando há redes depois dele */
}

.contact-other__social a:hover .icon {
  background-color: var(--color-white);
}

/* Notebooks menores (1201–1330px) */
@media (min-width: 1201px) and (max-width: 1330px) {
  .contact-section__layout {
      grid-template-columns: minmax(0, 1fr) 540px;
      column-gap: 56px;
    }
}

/* Tablet (≤ 1200px, sem zoom) */
@media (max-width: 1200px) {
  .hero--contact {
      padding-bottom: 64px;
    }

  .contact-hero {
      margin-top: 72px;
    }

  .contact-hero__title {
      font-size: 48px;
      line-height: 58px;
    }

  .contact-hero__subtitle {
      margin-top: 8px;
      font-size: 19px;
      line-height: 28px;
    }

  .contact-channels {
      grid-template-columns: 1fr;
      gap: 20px;
      margin: 36px 0 0;
    }

  .contact-channel {
      min-height: 0;
      padding: 28px 28px 32px;
      border-radius: 24px;
    }

  .contact-channel__icon {
      width: 60px;
      height: 56px;
    }

  .contact-channel__icon .icon {
      width: 30px;
      height: 30px;
    }

  .contact-channel__title {
      margin-top: 18px;
      font-size: 20px;
      line-height: 28px;
    }

  .contact-channel__text,
    .contact-map__address,
    .contact-other__text {
      font-size: 17px;
      line-height: 24px;
    }

  .contact-channel__value {
      margin-top: 16px;
      font-size: 21px;
      line-height: 28px;
    }

  .contact-channel__value--email {
      margin-top: 12px;
      font-size: 17px;
    }

  .contact-channel__button,
    .contact-other__button {
      height: 54px;
      margin-top: 24px;
      font-size: 15px;
    }

  .contact-section,
    .contact-other {
      padding: 88px 0;
    }

  .contact-section__layout,
    .contact-section .container.contact-section__layout {
      width: min(var(--container-width), calc(100% - 2 * var(--gutter)));
      grid-template-columns: 1fr;
      row-gap: 56px;
    }

  .contact-section__subtitle {
      margin-top: 12px;
      font-size: 19px;
      line-height: 28px;
    }

  .contact-aside {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      align-items: start;
      margin-top: 0;
    }

  .contact-hours,
    .contact-map {
      margin: 0;
      padding: 28px 24px;
      border-radius: 24px;
    }

  .contact-hours__title,
    .contact-map__title {
      font-size: 16px;
      line-height: 22px;
    }

  .contact-hours__list {
      margin-top: 12px;
    }

  .contact-hours__row {
      padding: 12px 0;
      font-size: 16px;
      line-height: 22px;
    }

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

  .contact-map__frame {
      margin-top: 16px;
    }

  .contact-other__title {
      margin-left: 0;
    }

  .contact-other__grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin: 32px 0 0;
    }

  .contact-other__card {
      min-height: 0;
      padding: 28px 28px 32px;
      border-radius: 24px;
    }

  .contact-other__card-title {
      font-size: 20px;
      line-height: 28px;
    }

  .contact-other__social {
      gap: 20px 32px;
      margin-top: 22px;
      padding-top: 0;
    }

  .contact-other__social .icon {
      width: 40px;
      height: 40px;
    }

  .contact-other__social .icon--social-facebook {
      width: 46px;
      height: 49px;
      margin-left: -7px;
      margin-right: -7px;
    }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .hero--contact {
      padding-bottom: 48px;
    }

  .contact-hero {
      margin-top: 48px;
    }

  .contact-hero__title {
      font-size: min(38px, calc((100vw - 32px) / 8.6));
      line-height: 1.22;
    }

  .contact-hero__subtitle {
      font-size: 16px;
      line-height: 24px;
    }

  .contact-channels {
      gap: 16px;
      margin-top: 28px;
    }

  .contact-channel,
    .contact-other__card {
      padding: 24px 20px 26px;
      border-radius: 20px;
    }

  .contact-section,
    .contact-other {
      padding: 64px 0 72px;
    }

  .contact-section__subtitle {
      font-size: 16px;
      line-height: 24px;
    }

  .contact-aside {
      grid-template-columns: 1fr;
      gap: 16px;
    }

  .contact-hours,
    .contact-map {
      padding: 24px 20px;
      border-radius: 20px;
    }
}