:root{
  /* Espaços fluídos com limites */
  --space: clamp(12px, 2vw, 24px);
  --gap: clamp(8px, 1.5vw, 20px);
}

html, body{
    font-family: "Montserrat", Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), /* ajuste 0.35 → 0.45/0.55 se quiser mais escuro */
    url("Resources/Fundo.jpg");
  background-size: cover;      /* ajusta para cobrir toda a tela */
  background-repeat: no-repeat; /* não repetir a imagem */
  background-attachment: fixed; /* fixa a imagem no fundo ao rolar */
  background-position: center;  /* centraliza a imagem */
}

.faixa {
  position: fixed;
  bottom: 55px;
  left: 0;
  right: 0;
  height: 19vh;
  background-color: #d7e0d4;
  display: flex;               /* flexbox */
  align-items: center;         /* centraliza verticalmente */
  justify-content: flex-end;   /* joga o conteúdo para a direita */
  padding-right: 20px;         /* espaço da borda direita */
  gap: 20px;
}

.logo {
  height: 15vh;   /* ajuste a altura proporcional à faixa */
  width: auto;     /* mantém a proporção */
}
.bandeiras {
    display: flex;
    height: 5vh;
    width: auto;
}

h1{
    font-size: 10px;
    color: white;
}

/* bloco posicionado ~30px acima da faixa (19vh) */
.bloco_grafismo{
  position: fixed;
  left: 80px;
  right: 20px;                      /* margem de 20px à direita */
  bottom: calc(55px + 19vh + 30px); /* 30px acima da faixa */
  display: flex;
  align-items: center;              /* centraliza o TEXTO na altura do grafismo */
  gap: 24px;
  z-index: 2;
}

/* tamanho do “C” estilizado */
.grafismo{
  display: block;
  position: fixed;                 /* sobre a tela, como a faixa */
  left: 0px;                       /* 80px do canto esquerdo */
  bottom: calc(50px + 165px + 42px); /* 30px acima da faixa (55 de bottom + 165 de altura + 30) */
  z-index: 1;                     /* fica na frente da faixa/fundo */
  max-width: auto;                 /* (opcional) evita ficar gigante em telas largas */
  height: 65vh;
}

/* caixa de texto com contraste e largura controlada */
.texto_central{
  flex: 1 1 auto;
  color: #fff;
  padding: 17vh 11vw;
  border-radius: 10px;
  line-height: 1.45;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* título grande, leve e espaçado */
.tit-construcao{
  margin: 0 0 10px 0;
  font-size: 40px;        /* ajuste fino se quiser maior/menor */
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 2.15;
}

/* parágrafo */
.texto_central p{
  margin: 0;
  font-size: 29px;
}
.circulo-decor{
  position: fixed;
  top: -5vh;                 /* ajuste vertical */
  left: -55vh;              /* empurra metade pra fora da tela */
  width: 135vh;              /* diâmetro do círculo */
  aspect-ratio: 1 / 1;      /* mantém formato de círculo */
  border-radius: 50%;
  background: rgba(0,0,0,0.25);  /* preto translúcido */
  pointer-events: none;     /* não bloqueia cliques */
  z-index: -1;               /* fica atrás do grafismo/texto/faixa */
}
.titulo-linha{
  display: flex;            /* ícone + título lado a lado */
  align-items: center;      /* centraliza verticalmente */
  gap: 20px;                 /* espaço entre ícone e texto */
}

.h1-icone{
  height: 3.5em;            /* ícone acompanha o tamanho da fonte do título */
  width: auto;
  display: block;
  opacity: .7;
  /* Se precisar o ícone mais claro: filter: brightness(0) invert(1); */
}

/* ====== MOBILE (até 1024px) ====== */
@media (max-width: 1024px){
    

  /* performance no mobile */
  body{ 
      background-attachment: fixed; 
      
  }

/* Centraliza logo + bandeiras na faixa (horizontalmente) */
.faixa{
  justify-content: center;   /* antes estava flex-end */
  padding-right: 0;          /* remove o peso à direita */
  padding-left: 0;           /* padding simétrico */
  gap: 16px;                 /* espaço entre bandeiras e logo */
  height: 8vh;
}

/* Garante que não estiquem nem “empurrem” nada */
.faixa > *{ flex: 0 0 auto; }

.logo {  height: 7vh;}
/* Bandeiras alinhadas e com espaçamento interno */
.bandeiras{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 3vh;
}

  /* C: menor e SEM encostar na faixa */
  .grafismo{
    height: 45vh;                 /* reduz o C */
    max-width: auto;
    bottom: calc(350px + 300px + 40px);  /* 10px acima da faixa no mobile */
    left: -30px;                      /* ajuste se quiser mais à direita */
  }

  /* bloco texto: sobe junto e ganha respiros menores */
  .bloco_grafismo{
    left: 16px;
    right: 16px;
    bottom: calc(55px + 14vh + 16px);
    gap: 10px;
  }

  /* título e parágrafo MAIORES, com coluna mais estreita p/ quebrar em + linhas */
  .titulo-linha{ gap: 8px; }
  .tit-construcao{
    font-size: clamp(24px, 6.8vw, 30px);
    letter-spacing: .06em;
    margin: 0 0 6px;
  }
  .texto_central{
    flex: 1 1 auto;
    padding: 36vh 22vw 32vh 28vw;
    max-width: 80ch;              /* mais estreito => quebra em mais linhas */
    line-height: 1.45;
  }
  .texto_central p{
    font-size: clamp(25px, 4.2vw, 18px);
    margin: 0;
  }
  .h1-icone{ height: 3.05em; opacity: .65; }
}

/* ====== MOBILE PEQUENO (até 480px) ====== */
@media (max-width: 480px){

  /* se faltar altura, encolhe mais o C e sobe o texto */
  .grafismo{
    height: 22vh;
    max-width: 60vw;
    bottom: calc(55px + 14vh + 8px);
  }
  .bloco_grafismo{
    bottom: calc(55px + 14vh + 12px);
  }

  .tit-construcao{ font-size: clamp(22px, 7vw, 26px); }
  .texto_central{ max-width: 32ch; }     /* ainda mais linhas */
  .texto_central p{ font-size: clamp(15px, 4.6vw, 17px); }
}