/* ==========================================================
   EXPERIÊNCIA (#experiencia, página inicial): as logos e os três jeitos de atuar
   Sem logos para mostrar (classe sem-logos, posta por js/logos.js) ou sem JavaScript, o bloco das
   logos sai e a frase de apoio desce para baixo de "Como o escritório trabalha", que vira o título.
   ========================================================== */
.experiencia-grade { display: flex; flex-direction: column; gap: var(--espaco-4); }
.experiencia-apoio { max-width: 48ch; }
.experiencia .logos-grade { margin-top: var(--espaco-3); }
.como-trabalha-titulo { margin-top: var(--espaco-6); font-size: var(--texto-titulo-3); }
.modos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
.modos li { display: flex; flex-direction: column; gap: 10px; padding-top: var(--espaco-3); border-top: 2px solid var(--acento); }
.modos h3 { font-size: 20px; }
.modos p { font-size: var(--texto-apoio); }
.experiencia-mais { margin-top: var(--espaco-3); }

.experiencia.sem-logos .experiencia-titulo, .experiencia.sem-logos .logos-grade { display: none; }
.experiencia.sem-logos .como-trabalha-titulo { order: -1; margin-top: 0; font-size: var(--texto-titulo-2); }
html:not(.js) .experiencia-titulo, html:not(.js) .experiencia .logos-grade { display: none; }
html:not(.js) .como-trabalha-titulo { order: -1; margin-top: 0; font-size: var(--texto-titulo-2); }

@media (max-width: 900px) {
  .modos { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
  .como-trabalha-titulo { margin-top: var(--espaco-5); }
}