line {
  shape-rendering: geometricPrecision;
}

@media (max-width: 1441px) {
  .cena.mosaico div.pecas .arcos .arco {
    height: 120px;
    width: 174px;
  }
    .cena.mosaico div.pecas .arcos .arco img {
      width: 392px;
    }
    @keyframes spin {
        0% {
          transform: rotate(0deg);
          width: 392px;
        }
        50% {
          width: 250px;
        }
        100% {
          transform: rotate(180deg);
          width: 392px;
        }
    }
}


@media (max-width: 767.98px) {

  /* TEMA */
  body {
    font-size: 3.5vw;
    line-height: 1.3;
  }


  /* TITULOS */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--titulo);
    line-height: 1.1;
  }

  h2 {
    font-size: 12vw;
  }

  h3 {
    font-size: 6vw;
  }


  /* NAV */
  nav {
    transform: rotate(0deg) translateX(0);
    width: 100vw;
  }
    nav ul {
      column-gap: 35px;
      width: 100vw;
    }
    nav ul.ativo {
      top: 0;
    }
      nav ul li a {
        align-items: center;
        color: var(--azul-claro);
        display: inline-flex;
        height: 50px;
        text-decoration: none;
      }
      nav ul li a:hover {
        color: var(--branco);
      }
      nav ul li.ativo a {
        color: var(--branco);
        font-weight: 600;
      }
      nav ul li.fechar {
        position: absolute;
        right: 29px;
        top: 29px;
      }
        nav ul li.fechar a {
          height: 42px;
          opacity: .3;
          text-indent: -999em;
          transform: rotate(-45deg);
          transform-origin: center center;
          width: 42px;
        }
        nav ul li.fechar a:hover {
          opacity: 1;
        }
          nav ul li.fechar a::before {
            content: "";
            border-right: 2px solid var(--azul);
            height: 42px;
            margin-left: 2vh;
            width: 1px;
          }
          nav ul li.fechar a::after {
            content: "";
            border-bottom: 2px solid var(--azul);
            height: 1px;
            margin-left: -21px;
            margin-top: -1px;
            width: 42px;
          }

        nav ul li > ul {
          align-items: center;
          background: var(--branco);
          left: 0;
          position: absolute;
          width: 100vh;
        }
        nav ul li > ul.ativo {
          top: 100px;
        }
        nav ul li > ul.marcador.ativo {
          top: 0;
        }
          nav ul li > ul li a:hover {
            color: var(--azul);
          }
          nav ul li > ul li.ativo a {
            color: var(--azul);
            font-weight: 600;
          }

      nav ul.marcador {
        justify-content: start;
      }
        nav ul.marcador li {
          margin-left: 29px;
          transform: rotate(90deg);
          transform-origin: center center;
        }
          nav ul.marcador li h2 {
            font-family: var(--titulo);
            font-size: 80px;
          }



  /* CENARIO */
  .cenario {
    flex-direction: column;
  }


    .cena {
      height: auto;
    }


    .cena.home {
      flex-direction: column;
    }

    .cena.home > div {
    }

      .cena.home > div:nth-child(1) {
      }

        .cena.home .logomarca {
          height: 16vw;
          width: 16vw;
        }
        .cena.home.ativo .logomarca {
          height: 100vw;
          width: 100vw;
        }

        .cena.home .logotipo {
          height: 12vw;
          margin-top: 8vw;
        }

      .cena.home > div:nth-child(2) {
        /*background: var(--branco);*/
        height: auto;
        width: 50vw;
        left: 50vw;
      }
        .cena.home > div:nth-child(2) > div {
          padding: 8vw;
        }

  .texto-home {
    position: absolute;
    top: 40vh;
     left: 0vh;
    width: 40vh;
  }


  .cena.chamada {
    height: 50vh;
    width: auto;
  }
    .cena.chamada > div {
      align-items: center;
      flex-direction: row;
      position: relative;
    }
        .cena.chamada h1 {
          font-size: 4vw;
          margin-right: 4vw;
        }
        .cena.chamada h2 {
          font-size: 18vw;
        }


  .cena.nossa-filosofia {
    gap: 2vw;
    flex-wrap: wrap;
    justify-content: end;
    padding-left: 0;
  }
    .cena.nossa-filosofia > div {
      align-items: center;
      flex-direction: row;
    }
      .cena.nossa-filosofia > div .arcos {
        gap: 2vw;
      }
        .cena.nossa-filosofia > div .arcos .arco {
          height: 46vw;
          width: auto;
        }
      .cena.nossa-filosofia > div .texto {
        align-self: center;
        justify-content: center;
        padding: 28vw 8vw;
        width: auto;
      }
        .cena.nossa-filosofia > div .texto h2 {
          margin-bottom: 5vw;
        }


  .cena.arcos-transicao {
  }
    .cena.arcos-transicao > div {
    }
    .cena.arcos-transicao div.dia,
    .cena.arcos-transicao div.noite {
      flex-wrap: wrap;
      gap: 2vw;
      justify-content: end;
      width: 100vw;
    }
      .cena.arcos-transicao div.dia > div,
      .cena.arcos-transicao div.noite > div {
        height: auto;
      }
        .cena.arcos-transicao div.dia > div .arcos,
        .cena.arcos-transicao div.noite > div .arcos {
          gap: 2vh;
        }
          .cena.arcos-transicao div.dia > div .arcos .arco,
          .cena.arcos-transicao div.noite > div .arcos .arco {
            height: 46vw;
          }
          .cena.arcos-transicao div.dia > div:nth-child(3) .arcos .arco:nth-child(1),
          .cena.arcos-transicao div.noite > div:nth-child(3) .arcos .arco:nth-child(1) {
            display: none;
          }
      .cena.arcos-transicao div.mascara {
        height: 170vw;
        width: 170vw;
        left: -35vw;
        top: 50vh;
      }
        .cena.arcos-transicao div.noite {
          left: 35vw;
          top: -50vh;
        }


  .cena.equipe {
    display: flex;

    align-items: start;
    flex-direction: column;
    gap: 2vh;
    justify-content: center;
    padding: 28vw 8vw;
  }
    .cena.equipe > div:nth-child(1) {
      flex-direction: column;
      height: 100%;
    }
      .cena.equipe > div .arcos {
        display: none;
      }
      .cena.equipe > div .texto {
        margin-bottom: 18vw;
        margin-right: 0;
        width: auto;
      }
        .cena.equipe > div .texto h2 {
          margin-bottom: 5vw;
        }
      .cena.equipe > div ul {
        gap: 5vw;
        padding: 0;
      }
        .cena.equipe > div ul li {
          white-space: nowrap;
          word-break: keep-all;
        }
          .cena.equipe > div ul li a {
            color: var(--branco);
            text-decoration: none;
          }


  .cena.logo-transicao {
    display: none;
  }

  .cena.mosaico {
    min-height: 100vh;
  }
    .cena.mosaico div.pecas > div:nth-child(1),
    .cena.mosaico div.pecas > div:nth-child(2),
    .cena.mosaico div.pecas > div:nth-child(3) {
      display: none;
    }
      .cena.mosaico div.pecas .arcos .arco {
        height: 70px;
        width: 102px;
      }
        .cena.mosaico div.pecas .arcos .arco img {
          width: 235px;
        }
        @keyframes spin {
            0% {
              transform: rotate(0deg);
              width: 235px;
            }
            50% {
              width: 135px;
            }
            100% {
              transform: rotate(180deg);
              width: 235px;
            }
        }
      .cena.mosaico .brilho {
        display: flex;
        justify-content: center;
      }
        .cena.mosaico .brilho img {
          height: 100vh;
          width: auto;
        }


  .cena.projetos {
    flex-direction: column;
    padding-left: 0;
  }
    .cena.projetos > div:nth-child(1) {
      border-radius: 50vw 50vw 0 0;
      flex-direction: row;
      height: auto;
      padding: 30vw 0 10vw;
      width: 100vw;
    }
      .cena.projetos > div:nth-child(1) h3 {
        font-size: 30vw;
      }
      .cena.projetos > div h3:first-child {
        margin-right: 0;
      }
      .cena.projetos > div h3:last-child {
        margin-left: 0;
      }
      .cena.projetos > div:nth-child(1) span {
        font-size: 12vw;
        margin-top: -3vw;
      }
      .cena.projetos > div:nth-child(2) {
      }
        .cena.projetos > div:nth-child(2) .cidade {
          background-position: 10vw 0;
          background-repeat: repeat;
          background-size: 100vw auto;
          background-attachment: unset;
          flex-direction: column;
        }
          .cena.projetos > div:nth-child(2) .cidade > div {
            position: relative;
          }
          .cena.projetos > div:nth-child(2) .cidade > div:nth-child(1) {
            display: none;
          }
            .cena.projetos > div:nth-child(2) .cidade img {
              height: auto;
              width: 100vw;
            }
            .cena.projetos > div:nth-child(2) .cidade > div:last-child img {
              width: 70vw;
            }
            .cena.projetos > div:nth-child(2) .cidade > div:last-child::before {
              background: var(--cinza);
              content: "";
              height: 100%;
              position: absolute;
              right: 0;
              top: 0;
              width: 30vw;
            }
            .cena.projetos > div:nth-child(2) .cidade a {
              font-size: 30vw;
              line-height: 20vw;
            }
            .cena.projetos > div:nth-child(2) .cidade a::before {
              line-height: 20vw;
            }
            .cena.projetos > div:nth-child(2) .cidade .a {
              bottom: 25vw;
              left: 20vw;
            }
            .cena.projetos > div:nth-child(2) .cidade .b {
              bottom: 20vw;
              left: 60vw;
            }
            .cena.projetos > div:nth-child(2) .cidade .c {
              bottom: 25vw;
              left: 10vw;
            }
            .cena.projetos > div:nth-child(2) .cidade .d {
              bottom: 20vw;
              left: 50vw;
            }
            .cena.projetos > div:nth-child(2) .cidade .e {
              bottom: 20vw;
              left: 20vw;
            }


    .cena.cidade-fim {
      background: var(--azul);
      flex-direction: row;
      padding-right: 0;
    }
      .cena.cidade-fim > div {
        border-radius: 0 0 50vw 50vw;
        height: auto;
        min-height: 50vw;
        min-width: 100vw;
      }


    .cena.projetos-principal {

    }
      .cena.projetos-principal > div {
        flex-direction: column;
      }
        .cena.projetos-principal > div .apresentacao {
          flex-direction: column;
        }
          .cena.projetos-principal > div .apresentacao .capa {
            height: 100vh;
            overflow: hidden;
            width: 100vw;
          }
            .cena.projetos-principal > div .apresentacao .capa h2 {
              font-size: 50vw;
              padding: 0;
              position: relative;
              left: 70%;
            }

          .cena.projetos-principal > div .apresentacao .imagens {
            flex-direction: column;
            width: 100vw;
          }
            /*.cena.projetos-principal > div .apresentacao .imagens img {*/
            /*  max-width: 80vw;*/
            /*  height: auto !important;*/
            /*}*/
            /*.cena.projetos-principal > div .apresentacao .imagens img:nth-child(1) {*/
            /*  margin: -10vw 0 0 10vw;*/
            /*  width: 50vw;*/
            /*}*/
            /*.cena.projetos-principal > div .apresentacao .imagens img:nth-child(2) {*/
            /*  margin: -3vw 0 0 20vw;*/
            /*  width: 70vw;*/
            /*}*/
            /*.cena.projetos-principal > div .apresentacao .imagens img:nth-child(3) {*/
            /*  margin: -3vw 0 0 5vw;*/
            /*  width: 60vw;*/
            /*}*/
            /*.cena.projetos-principal > div .apresentacao .imagens img:nth-child(4) {*/
            /*  margin: -3vw 0 0 10vw;*/
            /*  width: 80vw;*/
            /*}*/
          .cena.projetos-principal > div .apresentacao .texto {
            flex-direction: column;
            min-width: auto;
            padding: 8vw;
          }
            .cena.projetos-principal > div .apresentacao .texto h2 {
              margin-bottom: 3vh;
            }

        .cena.projetos-principal > div .planta {
          column-gap: 10vw;
          flex-direction: column;
          height: auto;
          padding-top: 30vw;
          width: 100vw;
        }
          .cena.projetos-principal > div .imagem img {
            max-width: 70vw;
          }

        .cena.projetos-principal > div .galeria {
          align-items: center;
          flex-direction: column;
          height: auto;
          justify-content: center;
          width: 100vw;
        }
          .cena.projetos-principal > div .galeria .capa {
            height: auto;
            padding: 30vw 0 8vw;
          }
            .cena.projetos-principal > div .galeria .capa h2 {
              font-size: 20vw;
            }
            .cena.projetos-principal > div .galeria .capa .imagem-principal {
              display: none;

              left: 0;
              bottom: -100vh;

              transition: all 0.3s ease-out 0.3s;
            }
            .cena.projetos-principal > div .galeria .capa .imagem-principal.ativo {
              height: 70vh;
              left: 50%;
              margin-left: -30vw;
              margin-bottom: -35vh;
              bottom: 50%;
              width: 60vw;
            }
          .cena.projetos-principal > div .galeria .imagens {
            flex-direction: column;
            gap: 5vw;
            padding: 0;
            width: 100vw;
          }
            .cena.projetos-principal > div .galeria .imagens img {
              height: auto;
              width: 90vw;
            }
          .cena.projetos-principal > div .galeria .texto {
            flex-direction: column;
            margin-right: auto;
            padding: 16vw 16vw 30vw;
          }
          .cena.projetos-principal > div .galeria .proximo {
            margin-right: 0;
            transform: rotate(90deg);
          }

    .cena.mais-projetos {
      gap: 10vw;
      flex-direction: column;
      padding: 30vw 0 0;
    }
      .cena.mais-projetos > div {
        flex-direction: column;
      }
        .cena.mais-projetos > div img {
          height: auto;
          width: 80vw;
        }
        .cena.mais-projetos > div .texto {
          height: auto;
          width: auto;
          padding: 10vw;
        }
          .cena.mais-projetos > div .texto .info {
            flex-direction: column;
            height: 100%;
          }
            .cena.mais-projetos > div .texto .info h3 {
              margin-bottom: 3vh;
            }
          .cena.mais-projetos > div .texto dl {
          }
            .cena.mais-projetos > div .texto dl dt,
            .cena.projetos-principal > div .texto dl dd {
            }
            .cena.mais-projetos > div .texto dl dt {
              font-weight: 600;
              margin-top: 3vh;
            }

}