:root {
/* -- CORES -- */
--texto-primario: #191A20;
--texto-secundario: #757679;
--texto-desativado: #A3A3A6;

--primaria-base-principal: #0B1C65;
--primaria-base-escura: #060D2C;
--primaria-base-clara: #CBD7F7;
--primaria-base-contraste: #F9FAFF;

--primaria-ação-padrao: #091856;
--primaria-ação-hover: #050F37;
--primaria-ação-pressionado: #747EA7;
--primaria-ação-desativado: #C4C8DA;

--secundaria-base-principal: #968B69;
--secundaria-base-escura: #45370F;
--secundaria-base-clara: #F4F3EF;
--secundaria-base-contraste: #FFFEFA;

--secundaria-ação-padrao: #786F54;
--secundaria-ação-hover: #7B704B;
--secundaria-ação-pressionado: #50472C;
--secundaria-ação-desativado: #D5D3CD;

--informativa-informacao: #467F14;
--informativa-sucesso: #007782;
--informativa-alerta: #8C4804;
--informativa-erro: #A01E32;

--cinza-00: #F9F9FA;
--cinza-01: #EDEDEE;
--cinza-02: #E0E1E2;
--cinza-03: #D2D3D5;
--cinza-04: #C3C4C7;
--cinza-05: #B2B3B7;
--cinza-06: #9EA0A5;
--cinza-07: #87898F;
--cinza-08: #6A6C74;
--cinza-09: #3C3F49;

/* -- FONTES -- */
--fonte-principal: "League Spartan", sans-serif;
--h1-display-extralarge: 104px;
--h2-display-large: 52px;
--h3-display-medium: 40px;
--h4-display-small: 32px;
--h5-display-heading: 28px;
--h6-display-subtitle: 24px;
--h7-display-subtitle2: 20px;
--p-display-body: 16px;
--p-display-body2: 12px;
--p-display-caption: 10px;

--peso-fonte-ultralight: 100;
--peso-fonte-light: 300;
--peso-fonte-regular: 500;
--peso-fonte-bold: 700;
--peso-fonte-extrabold: 900;

/* -- ESPAÇAMENTOS -- */
--espacamento-xs: 4px;
--espacamento-s: 8px;
--espacamento-m: 10px;
--espacamento-l: 16px;
--espacamento-l-plus: 17px;
--espacamento-xl: 20px;
--espacamento-xxl: 24px;
--espacamento-3xl: 32px;
--espacamento-4xl: 48px;
--espacamento-5xl: 64px;

/* -- ARREDONDAMENTO DAS BORDAS -- */
--raio-borda-p: 12px;
--raio-borda-m: 16px;
--raio-borda-g: 20px;
}



/* Estilos para MOBILE (até 600px) */
@import url('https://fonts.googleapis.com/css2?family=Genos:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&family=Mukta:wght@200;300;400;500;600;700;800&display=swap');
body{
  font-family: "League Spartan", sans-serif;
  -webkit-box-sizing: border-box; /* coloca o prefixo do browser do iOS */
  box-sizing: border-box;
}

@media screen and (min-width: 100px) and (max-width: 600px) {

body#inicial {
  background-image: url('../assets/bg_inicial/modelo\ tela\ abertura.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* Garante que a imagem se ajuste sem cortar */
  background-color: #FFF9E9;
  background-attachment: fixed; /* Opcional: fixa o fundo enquanto rola a página */
}

a#botaoinicial{
  margin:auto; 
  top:  380px; 
  position: relative;

}

div#divinicial{
  margin: auto; 
  width: 20%; 
  align-items: center; 
  display: inline-flex;
}

div#conteinerindex{
   position: absolute; /* ou fixed, dependendo do contexto */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -20%); /* CORRETO: sem parênteses extras */
  
  width: 120px; 
  padding: 10px 10px;
  gap: 4px;
  
  display: inline-flex;
  justify-content: center; 
  align-items: center;
}

div#botao {
  color: var(--primaria-ação-padrao);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -150%);
  padding: 10px;
  display: inline-flex;
  border-radius: 16px;
  outline: 3px #162257 solid;
  outline-offset: -8px;
  justify-content: center;
  align-items: center;
  transition: color 150ms ease-in-out;
}

div#botao:hover{
  background-color: var(--primaria-ação-hover);
  color: #FFF9E9;
    
}

div#botao:focus{
  background-color: var(--primaria-ação-pressionado);
  color: #FFF9E9;
    
}

div#botao svg {
  transition: fill 150ms ease-in-out;
}
/* MENU FOOTER */
/* Botão sanduíche fixo no canto inferior direito */
#menuToggleBottom {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 801;
}
#toggleBtnBottom {
  background-color: var(--primaria-ação-padrao);
  color: white;
  border: none;
  border-radius: var(--raio-borda-m);
  width: 48px;
  height: 48px;
  font-size: 24px;
  cursor: pointer;

  display: flex;              /* ativa flexbox */
  align-items: center;        /* centraliza verticalmente */
  justify-content: center;    /* centraliza horizontalmente */
  padding: 0;                 /* remove espaçamento extra */
}

/* Overlay escuro */
#menuOverlayBottom {
  position: fixed;
  inset: 0;
  background: rgba(1, 1, 23, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1499;
}
#menuOverlayBottom.active {
  opacity: 1;
  pointer-events: all;
}

/* Container do menu inferior */
#menunavfooter {
  position: fixed;
  bottom: 80px; /* fica acima do botão sanduíche */
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  display: flex;
  gap: 16px;
  z-index: 1500;
  transition: transform 0.35s ease-in-out;
}

/* Quando ativo, sobe na tela */
#menunavfooter.active {
  transform: translateX(-50%) translateY(0);
}

/* Cada item como botão separado */
#menunavfooter a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--primaria-base-principal);
  border-radius: var(--raio-borda-m);
  padding: 10px;
  text-decoration: none;
  color: white;
  font-size: 12px;
  height: 42px;
  width: 42px;
  box-shadow: 0 4px 10px rgba(10, 2, 43, 0.2);
  opacity: 0;
  transform: translateY(20px);
}

/* Ícones */
#menunavfooter a img {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

/* Hover */
#menunavfooter a:hover {
  background: var(--primaria-ação-hover);
  transform: scale(1.08);
}

#menunavfooter a:focus {
  background: var(--primaria-ação-pressionado);
  transform: scale(1.08);
}

/* Animação em cascata */
#menunavfooter.active a {
  animation: fadeUp 0.4s forwards;
}
#menunavfooter.active a:nth-child(1) { animation-delay: 0.1s; }
#menunavfooter.active a:nth-child(2) { animation-delay: 0.25s; }
#menunavfooter.active a:nth-child(3) { animation-delay: 0.4s; }
#menunavfooter.active a:nth-child(4) { animation-delay: 0.6s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MENU FIXO NO TOPO */
#menunavtop {
  position: fixed;
  top: 20px;
  left: 20px;
  width:70px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 45px 0px 32px;
  border-radius: 16px;
  z-index: 1500;
  background: var(--secundaria-base-contraste);
}

#menunavtop:hover {
  background-color: var(--secundaria-base-clara);

}

#menunavtop img {
  cursor: pointer;
}

.titulo {
    text-align: center;
    color: var(--primaria-base-principal);
    margin: 2em 0;
    padding: 0 1em;
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 10;
  }
  .titulo p {
    max-width: 500px;
    margin: 1em auto;
    line-height: 27px;
  }
 



#descricaoconteiner{
  width: 60%; 
  top:60%; 
  display: flex; 
  flex-direction: column; 
  gap: 20px;
}

#titulopredio{
color: var(--secundaria-base-principal); 
font-size: 32px; 
font-family: 'League Spartan'; 
font-weight: 700;
}

#descricaotexto{
color: var(--secundaria-base-principal);  
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 400;
text-align: left;
}

#endereco{
color: var(--secundaria-base-principal); 
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 300;
}

/* container de imagens alinhado à esquerda */
#imagem-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 17px;
  flex-wrap: wrap;
}
}

@media screen and  (min-width: 600px) and (max-width: 1024px) {

body#inicial {
  background-image: url('../assets/bg_inicial/modelo\ tela\ abertura.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Garante que a imagem se ajuste sem cortar */
  background-color: #FFF9E9;
  background-attachment: fixed; /* Opcional: fixa o fundo enquanto rola a página */
}
a#botaoinicial{
  margin:auto; 
  top:  380px; 
  position: relative;

}

div#divinicial{
  margin: auto; 
  width: 40%; 
  align-items: center; 
  display: inline-flex;

}

div#conteinerindex{
   position: absolute; /* ou fixed, dependendo do contexto */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -20%); /* CORRETO: sem parênteses extras */
  
  width: 120px; 
  padding: 10px 10px;
  gap: 4px;
  
  display: inline-flex;
  justify-content: center; 
  align-items: center;
}

div#botao {
  color: var(--primaria-base-principal);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -150%);
  padding: 10px;
  display: inline-flex;
  border-radius: var(--raio-borda-m);
  outline: 3px #162257 solid;
  outline-offset: -8px;
  justify-content: center;
  align-items: center;
  transition: color 150ms ease-in-out;
}

div#botao:hover{
  background-color: var(--primaria-ação-hover);
  color: var(--secundaria-base-clara);
    
}

div#botao svg {
  transition: fill 150ms ease-in-out;
}
/* MENU FOOTER */
/* Botão sanduíche fixo no canto inferior direito */
#menuToggleBottom {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 801;
}
#toggleBtnBottom {
  background: var(--primaria-base-principal);
  color: var(--secundaria-base-clara);
  border: none;
  border-radius: 20%;
  width: 48px;
  height: 48px;
  font-size: 24px;
  cursor: pointer;

  display: flex;              /* ativa flexbox */
  align-items: center;        /* centraliza verticalmente */
  justify-content: center;    /* centraliza horizontalmente */
  padding: 0;                 /* remove espaçamento extra */
}

/* Overlay escuro */
#menuOverlayBottom {
  position: fixed;
  inset: 0;
  background: rgba(1, 1, 23, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1499;
}
#menuOverlayBottom.active {
  opacity: 1;
  pointer-events: all;
}

/* Container do menu inferior */
#menunavfooter {
  position: fixed;
  bottom: 80px; /* fica acima do botão sanduíche */
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  display: flex;
  gap: 64px;
  z-index: 1500;
  transition: transform 0.35s ease-in-out;
}

/* Quando ativo, sobe na tela */
#menunavfooter.active {
  transform: translateX(-50%) translateY(0);
}

/* Cada item como botão separado */
#menunavfooter a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--primaria-base-principal);
  border-radius: 20%;
  padding: 10px;
  text-decoration: none;
  color: var(--secundaria-base-clara);
  font-size: 16px;
  height: 64px;
  width: 64px;
  box-shadow: 0 4px 10px rgba(10, 2, 43, 0.2);
  opacity: 0;
  transform: translateY(20px);
}

/* Ícones */
#menunavfooter a img {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* Hover */
#menunavfooter a:hover {
  background: var(--primaria-ação-hover);
  transform: scale(1.08);
}

/* Animação em cascata */
#menunavfooter.active a {
  animation: fadeUp 0.4s forwards;
}
#menunavfooter.active a:nth-child(1) { animation-delay: 0.1s; }
#menunavfooter.active a:nth-child(2) { animation-delay: 0.25s; }
#menunavfooter.active a:nth-child(3) { animation-delay: 0.4s; }
#menunavfooter.active a:nth-child(4) { animation-delay: 0.6s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MENU FIXO NO TOPO */
#menunavtop {
  position: fixed;
  top: 30px;
  left: 80px;
  width:90px;
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  border-radius: 16px;
  z-index: 1500;
  background: var(--secundaria-base-clara);
}

#menunavtop:hover {
  background: var(--secundaria-base-contraste);

}

#menunavtop img {
  cursor: pointer;
}


.titulo {
    text-align: center;
    color: var(--primaria-base-principal);
    margin: 2em 0;
    padding: 0 1em;
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 10;
  }
  .titulo p {
    max-width: 500px;
    margin: 1em auto;
    line-height: 27px;
  }


#descricaoconteiner{
  width: 60%; 
  top:60%; 
  display: flex; 
  flex-direction: column; 
  gap: 20px;
}

#titulopredio{
color: var(--secundaria-ação-padrao); 
font-size: 32px; 
font-family: 'League Spartan'; 
font-weight: 700;
}

#descricaotexto{
color: var(--secundaria-ação-padrao); 
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 400;
text-align: left;
}

#endereco{
color: var(--secundaria-ação-padrao); 
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 300;
}

/* container de imagens alinhado à esquerda */
#imagem-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 17px;
  flex-wrap: wrap;
}
}

@media screen and (min-width: 1024px) {

  /* index */
body#inicial {
  background-image: url('../assets/bg_inicial/modelo\ tela\ abertura.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Garante que a imagem se ajuste sem cortar */
  background-color: #FFF9E9;
  background-attachment: fixed; /* Opcional: fixa o fundo enquanto rola a página */
}

a#botaoinicial{
  margin:auto; 
  top:  380px; 
  position: relative;

}

div#divinicial{
  margin: auto; 
  width: 100%; 
  align-items: center; 
  display: inline-flex;
}

div#conteinerindex{
   position: absolute; /* ou fixed, dependendo do contexto */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -20%); /* CORRETO: sem parênteses extras */
  
  width: 120px; 
  padding: 10px 10px;
  gap: 4px;
  
  display: inline-flex;
  justify-content: center; 
  align-items: center;
}

div#botao {
color: var(--primaria-base-principal);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -150%);
  padding: 10px;
  display: inline-flex;
  border-radius: var(--raio-borda-m);
  outline: 3px #162257 solid;
  outline-offset: -8px;
  justify-content: center;
  align-items: center;
  transition: color 150ms ease-in-out;
}

div#botao:hover{
    background-color: var(--primaria-ação-hover);
  color: var(--secundaria-base-contraste);
    
}

div#botao svg {
  transition: fill 150ms ease-in-out;
}

/* MENU FOOTER */
/* Botão sanduíche fixo no canto inferior direito */
#menuToggleBottom {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 801;
}
#toggleBtnBottom {
  background: var(--primaria-base-principal);
  color: var(--secundaria-base-contraste);
  border: none;
  border-radius: var(--raio-borda-m);
  width: 64px;
  height: 64px;
  font-size: 24px;
  cursor: pointer;

    display: flex;              /* ativa flexbox */
  align-items: center;        /* centraliza verticalmente */
  justify-content: center;    /* centraliza horizontalmente */
  padding: 0;                 /* remove espaçamento extra */
}

/* Overlay escuro */
#menuOverlayBottom {
  position: fixed;
  inset: 0;
  background: rgba(1, 1, 23, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1499;
}
#menuOverlayBottom.active {
  opacity: 1;
  pointer-events: all;
}

/* Container do menu inferior */
#menunavfooter {
  position: fixed;
  bottom: 80px; /* fica acima do botão sanduíche */
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  display: flex;
  gap: 64px;
  z-index: 1500;
  transition: transform 0.35s ease-in-out;
  font-family: "League Spartan", sans-serif;
}

/* Quando ativo, sobe na tela */
#menunavfooter.active {
  transform: translateX(-50%) translateY(0);
}

/* Cada item como botão separado */
#menunavfooter a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--primaria-base-principal);
  border-radius: 20%;
  padding: 10px;
  text-decoration: none;
  color: var(--primaria-base-contraste);
  font-size: 16px;
  height: 64px;
  width: 64px;
  box-shadow: 0 4px 10px rgba(10, 2, 43, 0.2);
  opacity: 0;
  transform: translateY(20px);
}

/* Ícones */
#menunavfooter a img {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* Hover */
#menunavfooter a:hover {
  background: var(--primaria-ação-hover);
  transform: scale(1.08);
}

#menunavfooter a:focus {
  background: var(--primaria-ação-pressionado);
  transform: scale(1.08);
}

/* Animação em cascata */
#menunavfooter.active a {
  animation: fadeUp 0.4s forwards;
}
#menunavfooter.active a:nth-child(1) { animation-delay: 0.1s; }
#menunavfooter.active a:nth-child(2) { animation-delay: 0.25s; }
#menunavfooter.active a:nth-child(3) { animation-delay: 0.4s; }
#menunavfooter.active a:nth-child(4) { animation-delay: 0.6s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MENU FIXO NO TOPO */
#menunavtop {
  position: fixed;
  top: 30px;
  left: 80px;
  width:90px;
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  border-radius: 16px;
  z-index: 1500;
  background: var(--secundaria-base-contraste);
}

#menunavtop:hover {
  background-color: var(--secundaria-base-clara);
}

#menunavtop:focus {
  background-color: var(--secundaria-base-principal);

}

#menunavtop img {
  cursor: pointer;
}


  /* NÃO SEI O QUE É */
.titulo {
    text-align: center;
    color: var(--primaria-base-principal);
    margin: 2em 0;
    padding: 0 1em;
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 10;
  }
  .titulo p {
    max-width: 500px;
    margin: 1em auto;
    line-height: 27px;
  }

    /* MAPA */




/* todos os blocos principais alinhados à esquerda */


#descricaoconteiner{
  width: 60%; 
  top:60%; 
  display: flex; 
  flex-direction: column; 
  gap: 20px;
}

#titulopredio{
color: var(--secundaria-ação-padrao); 
font-size: 32px; 
font-family: 'League Spartan'; 
font-weight: 700;
}

#descricaotexto{
color: var(--secundaria-ação-padrao); 
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 400;
text-align: left;
}

#endereco{
color: var(--secundaria-ação-padrao);  
font-size: 14px; 
font-family: 'League Spartan'; 
font-weight: 300;
}

/* container de imagens alinhado à esquerda */
#imagem-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 17px;
  flex-wrap: wrap;
}
}