/* ==========================================================
   COMPONENTES: peças usadas em mais de uma seção
   ========================================================== */
/* Botão */
.botao { display: inline-flex; align-items: center; gap: 12px; justify-content: center; min-height: var(--altura-controle); padding: 0 26px; font: 600 var(--texto-apoio)/1 var(--font-texto); text-decoration: none; border: 1px solid var(--botao-fundo); border-radius: 0; cursor: pointer; background: var(--botao-fundo); color: var(--botao-texto); transition: background-color .2s, color .2s; }
.botao:hover { background: transparent; color: var(--texto); }
.botao svg { width: 14px; height: 14px; transition: transform .2s; }
.botao:hover svg { transform: translateY(2px); }

/* Botão de linha e navegação anterior/próxima (ciclo e entregas) */
.ciclos-nav { display: flex; gap: 10px; margin-top: var(--espaco-4); }
.botao-linha { display: inline-flex; align-items: center; min-height: var(--altura-controle); padding: 0 20px; background: transparent; color: var(--texto); border: 1px solid var(--linha); font: 500 var(--texto-apoio)/1 var(--font-texto); cursor: pointer; }
.botao-linha:hover:not(:disabled) { border-color: var(--texto); }
.botao-linha:disabled { opacity: .4; cursor: default; }

/* Sinal de abrir e fechar (desafios e entregas) */
.mais { position: relative; width: 28px; height: 28px; border: 1px solid var(--borda-controle); margin-top: 2px; }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--texto); transform: translate(-50%, -50%); transition: transform .3s; }
.mais::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Filtros (portfólio e mapa) */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; }
.filtros label { display: flex; flex-direction: column; gap: 6px; font-size: var(--texto-legenda); font-weight: 500; color: var(--texto-suave); }
.filtros select { font: 400 var(--texto-apoio) var(--font-texto); color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-controle); min-height: 44px; padding: 0 12px; border-radius: 0; min-width: 180px; }

/* Aviso com marcador de acento e marca de prévia ("A validar") */
.aviso { font-size: var(--texto-apoio); display: flex; gap: 10px; align-items: baseline; }
.aviso::before { content: ""; flex: 0 0 8px; height: 8px; background: var(--acento); transform: translateY(-1px); }
.previa { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border: 1px dashed var(--borda-controle); color: var(--texto-suave); }

/* Seta: o desenho único de seta do site (larga, encorpada e levemente curva), na cor do texto.
   Uso: <span class="seta" aria-hidden="true"></span>. Aponta para a direita; o comprimento vem de
   --seta-largura e a direção, de transform (rotate(90deg) aponta para baixo; scaleX(-1), para a esquerda). */
.seta { display: inline-block; flex: none; width: var(--seta-largura, 48px); aspect-ratio: 2 / 1; background: currentColor;
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; }

/* Etiqueta de abertura de bloco: quadrado de acento, texto em caixa alta e filete até a margem (O que é a CIVITAS, Organização das cidades) */
.etiqueta { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--espaco-5); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--texto-suave); }
.etiqueta::before { content: ""; flex: 0 0 10px; height: 10px; background: var(--acento); }
.etiqueta::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

/* Link com seta: leva a uma página de apoio ("Ver o ciclo completo", "Conheça o escritório") */
.link-seta { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: var(--texto-apoio); font-weight: 600; text-decoration: none; color: var(--texto); border-bottom: 1px solid var(--linha); }
.link-seta::after { content: ""; flex: none; width: 32px; aspect-ratio: 2 / 1; background: currentColor;
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; transition: transform .2s; }
.link-seta:hover { border-bottom-color: var(--texto); }
.link-seta:hover::after { transform: translateX(4px); }

/* Texto só para o leitor de tela */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rótulo que abre uma seção das páginas de apoio (o nome dela no índice da página) */
.secao-rotulo { margin-bottom: var(--espaco-4); }