body{
        background-color: #ffffff;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }

      #botaovoltar{
      padding: 10px 20px;
      background-color: rgba(0,0,0,0);
      border: 2px solid #F2F2F2;
      color: #fff;
      border-radius: 16px;
      cursor: pointer;
      font-size: 16px;
      }

      #botaovoltar:hover{
      background-color: #162257;
      border: 2px solid #162257;
      transition: 300ms ease-in-out;
      }
         @media screen and (min-width: 100px) and (max-width: 600px) {
       <style>

body{
  background-color: #ffffff;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Estilos mobile */
@media screen and (min-width: 100px) and (max-width: 600px) {
  /* CMS PRÉDIOS */
  #botoesRAVA {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
    padding: 0 10%;
    box-sizing: border-box;
  }

  #botoesRAVA .btnRAVA {
    display: inline-block;
    background: #F2F2F2;
    color: #212121;
    padding: 12px 24px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }

  #botoesRAVA .btnRAVA:hover {
    background: #162257;
    color: #fff;
  }

  .nomedopredio {
    font-weight: 800;
    font-size: 60%;
  }

  .crditos-e-curadoria {
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
  }

  .arqdco-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .texto-texto-texto {
    max-width: 100%;
    font-size: 16px;
    line-height: 18px;
    margin-top: 10px;
    color: #ffffff;
  }

  .frame-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 35vh 10%;
    box-sizing: border-box;
  }

  .frame-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    font-size: 64px;
    box-sizing: border-box;
  }

  .prediocms {
    width: 100%;
    min-height: 100vh;
    max-height: auto;
    text-align: left;
    font-size: 0.9em;
    color: #fff;
    font-family: 'League Spartan';
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  #titulosessao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: #FFF9E9;
    font-size: 30px;
    font-family: 'League Spartan';
    font-weight: 700;
    width: 100%;
    padding: 0 2%;
    margin-bottom: 20px;
    margin-top: 30px;
    box-sizing: border-box;
  }

  #dadoshistoricos {
    display: flex;
    flex-direction: column;
    background-color: #162257;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 24px;
    color: #FFF9E9;
    font-size: 24px;
    font-family: 'League Spartan';
    font-weight: 700;
    width: 100%;
    padding: 0 auto 40px 2%;
    box-sizing: border-box;
  }

  #imagem-container {
    display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  }

  .imagem-click {
     flex: 1 1 100px; /* largura mínima de 300px, ajusta conforme tela */
      max-width: 100%;
      height: 100px;
      object-fit: cover;
      border-radius: 12px;
  }

  #descricaohistoria {
    width: 100%;
    max-width: 80%;
    padding: 30px auto 120px 2%;
    text-align: left; 
    line-height: 18px;
    color: #FFF9E9; 
    font-size: 16px; 
    font-family: 'League Spartan'; 
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 80px;
  }

  .conteudo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 10%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    text-align: center;
  }
}

      }
@media screen and (min-width: 600px) and (max-width: 1024px) {
        /* CMS PRÉDIOS */
      #botoesRAVA {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
      }

      #botoesRAVA .btnRAVA {
        display: inline-block;
        background: #F2F2F2;
        color: #212121;
        padding: 12px 24px;
        border-radius: 16px;
        text-decoration: none; /* remove sublinhado */
        font-size: 18px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
      }

      /* Hover unificado */
      #botoesRAVA .btnRAVA:hover {
        background: #162257;
        color: #fff;
      }

              .nomedopredio {
                  align-self: stretch;
                  position: relative;
                  font-weight: 800;
                  font-size: 100%;
              }
              .crditos-e-curadoria {
                  align-self: stretch;
                  position: relative;
                  font-size: 20px;
                  line-height: 26px;
                  font-weight: 800;
              }
              .arqdco-parent {
                  align-self: stretch;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: center;
              }
              .texto-texto-texto {
                  max-width: 60vw;
                  font-size: 18px;
                  line-height: 20px;
                  margin-top: 10px;
                  color: #ffffff;
              }
              .frame-group {
                  width: 100vw;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: flex-start;
                  gap: 8px;
                  padding: 35vh 12%;
              }
              .frame-wrapper {
                  align-self: stretch;
                  position: relative;
                  height: 100vh;
                  overflow: hidden;
                  flex-shrink: 0;
                  background-image: url('../../assets/fotografia/003-escura.png');
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-position: top;
                  font-size: 64px;
              }

              .prediocms {
                width: 100%;
                min-height: 100vh; /* garante altura mínima */
                text-align: left;
                font-size: 0.9em;
                color: #fff;
                font-family: 'League Spartan';
                
                display: flex;
                flex-direction: column;
                }

            #titulosessao{
              display: flex;
              flex-direction: column;
              align-items: flex-start;  /* já alinha à esquerda */
              justify-content: flex-start; /* garante alinhamento vertical do topo */
              text-align: left; /* força o texto dentro dos filhos a alinhar à esquerda */
              color: #FFF9E9;
              font-size: 30px;
              font-family: 'League Spartan';
              font-weight: 700;
              margin-left: 10%;
              margin-bottom: 20px;
              margin-top: 10px;
            }

            #dadoshistoricos {
              display: flex;
              flex-direction: column;
              background-color: #162257;
              align-items: flex-start;  /* já alinha à esquerda */
              justify-content: flex-start; /* garante alinhamento vertical do topo */
              text-align: left; /* força o texto dentro dos filhos a alinhar à esquerda */
              gap: 24px;
              color: #FFF9E9;
              font-size: 30px;
              font-family: 'League Spartan';
              font-weight: 700;
        
      }

              #imagem-container {
                display: flex;
                flex-wrap: wrap;
                gap: 17px;
                justify-content: flex-start;
                margin-left: 10%;
                }

              .imagem-click {
                flex: 1 1 100px; /* largura mínima de 300px, ajusta conforme tela */
                max-width: 100%;
                height: 100px;
                object-fit: cover;
                border-radius: 16px;
                }
              #descricaohistoria{
                width: 60vw; 
                padding-top: 30px;
                padding-bottom: 80px; 
                text-align: left; 
                line-height: 20px;
                color: #FFF9E9; 
                font-size: 18px; 
                font-family: 'League Spartan'; 
                font-weight: 400;
                margin-left: 10%;
                }
              .conteudo {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 40px;
                width: 100%;
                box-sizing: border-box;
                position: relative;
                z-index: 1;
                text-align: center;
              }

      }

@media screen and (min-width: 1024px) {
        /* CMS PRÉDIOS */
      #botoesRAVA {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
      }

      #botoesRAVA .btnRAVA {
        display: inline-block;
        background: #F2F2F2;
        color: #212121;
        padding: 18px 34px;
        border-radius: 16px;
        text-decoration: none; /* remove sublinhado */
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
      }

      /* Hover unificado */
      #botoesRAVA .btnRAVA:hover {
        background: #162257;
        color: #fff;
      }

              .nomedopredio {
                  align-self: stretch;
                  position: relative;
                  font-weight: 800;
                  font-size: 70px;
              }
              .crditos-e-curadoria {
                  align-self: stretch;
                  position: relative;
                  font-size: 20px;
                  line-height: 24px;
                  font-weight: 800;
              }
              .arqdco-parent {
                  align-self: stretch;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: center;
              }
              .texto-texto-texto {
                  max-width: 40vw;
                  font-size: 24px;
                  line-height: 26px;
                  margin-top: 10px;
                  color: #ffffff;
              }
              .frame-group {
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: flex-start;
                  gap: 8px;
                  padding: 35vh 12%;
              }
              .frame-wrapper {
                  align-self: stretch;
                  position: relative;
                  height: 100vh;
                  overflow: hidden;
                  flex-shrink: 0;
                  background-image: url('../../assets/fotografia/003-escura.png');
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-position: top;
                  font-size: 64px;
              }

              .prediocms {
                width: 100%;
                min-height: 100vh; /* garante altura mínima */
                text-align: left;
                font-size: 0.9em;
                color: #fff;
                font-family: 'League Spartan';
                
                display: flex;
                flex-direction: column;
                }

            #titulosessao{
              display: flex;
              flex-direction: column;
              background-color: #162257;
              align-items: flex-start;  /* já alinha à esquerda */
              justify-content: flex-start; /* garante alinhamento vertical do topo */
              text-align: left; /* força o texto dentro dos filhos a alinhar à esquerda */
              gap: 24px;
              color: #FFF9E9;
              font-size: 30px;
              font-family: 'League Spartan';
              font-weight: 700;
              margin-left: 10%;
              margin-bottom: 30px;
              margin-top: 60px;
            }

            #dadoshistoricos {
              display: flex;
              flex-direction: column;
              background-color: #162257;
              align-items: flex-start;  /* já alinha à esquerda */
              justify-content: flex-start; /* garante alinhamento vertical do topo */
              text-align: left; /* força o texto dentro dos filhos a alinhar à esquerda */
              gap: 24px;
              color: #FFF9E9;
              font-size: 30px;
              font-family: 'League Spartan';
              font-weight: 700;
        
      }
#imagem-container {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  justify-content: flex-start;
  margin-left: 10%;
}

.imagem-click {
  flex: 1 1 300px; /* largura mínima de 300px, ajusta conforme tela */
  max-width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  
}
      

              #descricaohistoria{
                width: 60vw; 
                padding-top: 30px;
                padding-bottom: 80px; 
                text-align: left; 
                line-height: 24px;
                color: #FFF9E9; 
                font-size: 20px; 
                font-family: 'League Spartan'; 
                font-weight: 400;
                margin-left: 10%;
                }
              .conteudo {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 40px;
                width: 100%;
                box-sizing: border-box;
                position: relative;
                z-index: 1;
                text-align: center;
              }

      }