/* =========================================================================
   Etéra Work — Section 10: contato
   Figma: node 6322:1143 (artboards 1366 e 360)
   ========================================================================= */

.contato {
  position: relative;
  padding-block: 80px;
  background-color: var(--gray-200);
  overflow: hidden;
}

.contato__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contato__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.contato__heading {
  color: var(--gray-700);
  text-transform: uppercase;
}

.contato__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

.contato__address {
  width: 100%;
  color: var(--gray-700);
}

/* O botão desta seção não usa o mesmo tracking do "Saiba mais": aqui é
   0.1em com line-height 1.1, conforme o Figma. */
.contato__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 32px 12px;
  background-color: var(--brand-color-secondary);
  color: var(--white);
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  text-align: center;
  text-transform: uppercase;
  transition: background-color 200ms ease;
}

.contato__cta:hover {
  background-color: color-mix(in srgb, var(--brand-color-secondary), #000 var(--shade-level-1));
}

/* -------------------------------------------------------------------------
   Entalhe da borda direita
   ------------------------------------------------------------------------- */

.contato__notch {
  position: absolute;
  top: 99.5px;
  right: 0;
  width: 18px;
  height: 100px;
  background-color: var(--brand-color-primary);
}

/* -------------------------------------------------------------------------
   Grafismo — só a partir de 1366px
   Mesmos dois elementos de hachura da Section 2, espelhados na horizontal
   e encostados na borda esquerda.
   ------------------------------------------------------------------------- */

.contato__grafismo {
  display: none;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

@media (min-width: 1366px) {
  .contato__inner {
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
  }

  .contato__content {
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
    width: 736px;
  }

  /* No artboard de 1366 o botão fecha em 44px, com line-height 1.1. */
  .contato__cta {
    line-height: 1.1;
  }

  .contato__heading {
    flex: 1 0 0;
    min-width: 0;
  }

  .contato__aside {
    flex-shrink: 0;
    width: 272px;
  }

  .contato__cta {
    width: auto;
  }

  .contato__grafismo {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 123px;
    height: 299px;
    overflow: hidden;
    transform: translateY(-50%) scaleX(-1);
    pointer-events: none;
  }

  .contato__grafismo::before,
  .contato__grafismo::after {
    content: "";
    position: absolute;
    left: 0;
    width: 278px;
    height: 67px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* Superior, em Brand/Primary + Tint 1 */
  .contato__grafismo::before {
    top: 141px;
    background-image: url("../../svg/svg-element-1.svg");
  }

  /* Inferior, em Brand/Secondary */
  .contato__grafismo::after {
    top: 226px;
    left: 82px;
    background-image: url("../../svg/svg-element-2.svg");
  }
}