& .secao-contato {
  background: var(--secao-azul);
  color: #ffffffb8;

  & .container-contato {
    display: flex;
    flex-flow: column;
    gap: 1.6rem;
    transition: gap 0.25s ease;

    &.status-envio-visivel {
      gap: 4rem;
    }

    & .container-form {
      display: flex;
      gap: 3rem;
      align-items: flex-start;

      & .info-form {
        width: min(100%, 42rem);
        flex: 0 1 42rem;
        display: flex;
        flex-flow: column;
        gap: 5rem;

        & h1 {
          border-bottom: 2px solid #f15922;
          color: #fff;
        }

        & .informacoesdecontato {
          display: flex;
          flex-flow: column;
          gap: 2rem;
          font-size: 1.7rem;

          & .informacaocontato {
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;

            & .icon-info {
              flex-shrink: 0;
              margin-top: 0.2rem;
            }

            & .info-contato {
              min-width: 0;
            }

            & p {
              overflow-wrap: anywhere;
            }
          }
        }

        & .footer-redessociais {
          width: 100%;
          max-width: 24rem;

          display: flex;
          flex-flow: column;
          gap: 2rem;

          & h3 {
            color: #f15922;
          }

          & .itens-contatos {
            display: flex;
            gap: 1rem;
          }

          & .item-contato {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ffffff29;
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 1rem;
          }
          & .item-contato:hover {
            background-color: #f15922;

            & svg path {
              fill: #e9e9e9;
            }
          }
        }
      }

      & .formulario {
        min-height: 55rem;
        height: auto;
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 1.2rem;
        display: flex;

        & .container-formulario {
          width: 100%;
          min-height: 100%;
          height: auto;
          display: flex;
          flex-flow: column;
          gap: 1.4rem;

          & h2 {
            color: var(--laranja-hashimoto);
          }

          & p {
            color: #ffffffb4;
            font-size: 1.8rem;
          }

          & #contact-form {
            width: 100%;
            flex: 1;
            display: flex;
            flex-flow: column;
            gap: 1rem;
          }

          & .grupo-form {
            width: 100%;
            display: flex;
            gap: 1rem;

            & input,
            & textarea {
              width: 100%;
              flex: 1;
              border: 1px solid #ffffff47;
              border-radius: 0.8rem;
              background-color: #ffffff17;
              color: #fff;
              padding: 1.2rem 1.4rem;
              font-size: 1.5rem;
              outline: none;
            }

            & input::placeholder,
            & textarea::placeholder {
              color: #ffffff97;
            }
          }

          & .grupo-form:last-of-type {
            flex: 1;

            & textarea {
              min-height: 19rem;
              height: 100%;
              resize: vertical;
            }
          }

          & button {
            width: 100%;
            border: none;
            border-radius: 0.8rem;
            background-color: var(--laranja-hashimoto);
            color: #fff;
            font-size: 1.6rem;
            font-weight: 600;
            padding: 1.2rem 1.4rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
          }

          & button:hover {
            background-color: #ff6d2f;
          }

          & #status-envio {
            display: none;
            margin-top: 0;
            color: #ffffffd8;
            line-height: 1.45;
            overflow-wrap: anywhere;
          }

          & #status-envio.tem-texto {
            display: block;
            margin-top: 0.6rem;
          }
        }
      }
    }

    & .container-mapa {
      width: 100%;
      margin-top: 1rem;

      & .map-container {
        width: 100%;
        border-radius: 3rem;
        overflow: hidden;
      }

      & iframe {
        display: block;
        width: 100%;
        min-height: 35rem;
      }
    }
  }
}

@media (max-width: 1080px) {
  & .secao-contato {
    & .container-contato {
      gap: 2.4rem;

      & .container-form {
        gap: 2.4rem;

        & .info-form {
          width: min(100%, 34rem);
          flex-basis: 34rem;
          gap: 3.2rem;

          & .informacoesdecontato {
            font-size: 1.6rem;
            gap: 1.6rem;
          }
        }
      }
    }
  }
}

@media (max-width: 900px) {
  & .secao-contato {
    & .container-contato {
      & .container-form {
        flex-direction: column;
        gap: 3.2rem;

        & .info-form,
        & .formulario {
          width: 100%;
          max-width: none;
          flex-basis: auto;
        }

        & .formulario {
          min-height: auto;
        }
      }
    }
  }
}

@media (max-width: 640px) {
  & .secao-contato {
    & .container-contato {
      gap: 2rem;

      & .container-form {
        gap: 2.4rem;

        & .info-form {
          gap: 2.4rem;

          & h1 {
            font-size: 2.8rem;
            line-height: 1.2;
          }

          & .informacoesdecontato {
            font-size: 1.5rem;
            gap: 1.4rem;
          }

          & .footer-redessociais {
            max-width: none;

            & h3 {
              font-size: 2rem;
              line-height: 1.2;
            }
          }
        }

        & .formulario {
          & .container-formulario {
            & p {
              font-size: 1.6rem;
            }

            & .grupo-form {
              flex-direction: column;
              gap: 0.8rem;
            }

            & .grupo-form:last-of-type {
              & textarea {
                min-height: 16rem;
              }
            }
          }
        }
      }

      & .container-mapa {
        & .map-container {
          border-radius: 1.4rem;
        }

        & iframe {
          min-height: 28rem;
        }
      }
    }
  }
}