#tokens {
      display: flex;
      justify-content: center;  /* centraliza no meio */
      align-items: flex-start;  /* alinha pelo topo */
      gap: 40px;                /* espaço entre elas */
      flex-wrap: wrap;          /* no mobile, uma embaixo da outra */
      margin-top: 30px;
}

#tokens section {
      flex: 0 0 auto; /* ocupa metade do espaço, mínimo 400px */
      max-width: none;
}

.tokenomics,
.roadmap {
      flex: 1;
      min-width: 300px;
} 

.tokenomics-grid {
      display: grid;
      grid-template-columns: 210px 120px 270px; /* colunas fixas */
      gap: 2px;
      width: fit-content; /* impede que o grid tente se ajustar ao container */
      margin: 20px auto;
}

.tokenomics-grid > div {
      padding: 12px;
      border: 1px solid #333;
      background-color: #0d0d0d;
      font-size: 1rem;
      word-break: break-word;
      overflow-wrap: break-word;
      color: var(--gold);
}

/* Cabeçalhos */
.tokenomics-grid .header {
      font-weight: bold;
      color: var(--light);
      background: #222;
}

/* Mostra só em telas grandes */
.texto-desktop {
  display: inline;
}

/* Mostra só em telas pequenas */
.texto-mobile {
  display: none;
}

/* =============================
   SEÇÃO: ROADMAP
============================= */
.roadmap {
      margin-top: 0;             /* garante topo alinhado */
      min-height: 70vh;
}


.roadmap-grid {
      display: grid;
      grid-template-columns: 110px 400px;
      gap: 2px;
      width: fit-content;
      margin: 40px auto;
}

.roadmap-grid > div {
      padding: 12px;
      border: 1px solid #333;
      background-color: #0d0d0d;
      font-size: 1rem;
      word-break: break-word;
      overflow-wrap: break-word;
      color: var(--gold);
} 

.roadmap-grid .header {
      font-weight: bold;
      color: var(--light);
      background: #222;
}


/* RESPONSIVO: TOKENOMICS MANTÉM GRID */
@media (max-width: 768px) {
      .comunidades .box_ {
            width: 90%;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
      }

      .box,
      .box_middle {
            width: 100%;
            padding: 20px 5px;
      }

      .container-tela {
            margin: 0 5px;
      }

      .sub-menu {
            gap: 10px;
            padding: 10px;
            right: 5px;
            left: 5px;
      }

      .sub-menu .whitepaper,
      .sub-menu .box-bandeira {
            margin-top: 140px;
            width: 29%;
            justify-content: center;
      }

      .pulsando-rotacionando {
            right: 10px;
            width: 180px;
      }

      #mais_sobre .container_mais_sobre {
            flex-direction: column;
            margin: 0 5px;
      }

      #mais_sobre .container_mais_sobre .box_descric {
            width: 100%;
            padding: 5px;
      }

      .comunidades .moeda-container {
            height: 150px;
      }

      .tokenomics-grid {
            grid-template-columns: 160px 100px 230px; /* colunas fixas */
      }

      .tokenomics-grid > div {     
            font-size: 0.8rem;    
      }

      .roadmap-grid {
            grid-template-columns: 90px 330px;
      }

      .roadmap-grid > div {     
            font-size: 0.8rem;    
      }

      .container-footer {      
            height: 50vh;
            padding: 20px 0;
}

      .container-footer .footer-box-duplo {
            flex-direction: column;
      }
}

@media (max-width: 535px) {
      .comunidades {
            min-height: 90vh;
      }

      #tokenomics {
            padding-top: 50px;
            min-height: 80vh;
      }
}

/* === AJUSTES GERAIS DE MARGEM EM TELAS MENORES === */
@media (max-width: 530px) { 
      .box_img,
      .box .moeda,
      .comunidades .moeda-container .girar_dinheiro {
            width: 100%;
            max-width: 180px;
      }

      .button {
            width: 100%;
            padding: 0.6rem;
      }

      .sub-menu img {
            width: 90px;
      }

      .tokenomics-grid {
            grid-template-columns: 145px 50px 175px; /* colunas fixas */
      }

      .tokenomics-grid > div {     
            font-size: 0.7rem;    
      }

      .texto-desktop {
            display: none;
      }

      .texto-mobile {
            display: inline;
      }

      .roadmap-grid {
            grid-template-columns: 85px 282px;
      }

      .roadmap-grid > div {     
            font-size: 0.7rem;    
      }

      .nav-rodape {
            font-size: 0.9rem;
      }
}



@media (max-width: 387) {
      .tokenomics-grid {
            grid-template-columns: 36px 16px 35px; /* colunas fixas */
      }

      .tokenomics-grid > div {     
            font-size: 0.5rem;    
      }

      .texto-desktop {
            display: none;
      }

      .texto-mobile {
            display: inline;
      }

      .comunidades {
            min-height: 130vh;
      }

      .roadmap-grid {
            grid-template-columns: 55px 250px;
      }

      .roadmap-grid > div {     
            font-size: 0.5rem;    
      }

}