/* KM 2 · Atuação — o pórtico: painéis de pista e uma placa para cada assunto */
.at { --at-aco: #3d4354; --at-verde: #17694a; --at-chao: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 104px); }

.at-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 5vw, 80px); align-items: end; }

/* pórtico: a viga treliçada atravessa a tela inteira; o visitante passa por baixo */
.at-portico { position: relative; margin-top: clamp(48px, 6vw, 88px); padding-bottom: calc(var(--at-chao) + 22px); overflow-y: clip; }
.at-viga { position: absolute; left: calc(50% - 50vw); width: 100vw; top: 0; height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M0 49 30 3 60 49M30 3v46' fill='none' stroke='%233d4354' stroke-width='3.5'/%3E%3Cpath d='M0 3h60M0 49h60' stroke='%233d4354' stroke-width='6'/%3E%3C/svg%3E") 0 0 / 60px 52px repeat-x; }
/* chão: pista vista de lado, com a faixa de bordo */
.at-portico::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; height: 26px; background: linear-gradient(#16181d 0 6px, #f3eee6 6px 10px, #16181d 10px); }
/* calor de asfalto subindo do chão, por trás dos postes */
.at-portico::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 26px; height: clamp(160px, 22vw, 300px); pointer-events: none; background: linear-gradient(in oklab to top, rgb(232 184 119 / .34), rgb(248 233 207 / .2) 45%, transparent); }

.at-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 27%, 340px); gap: clamp(28px, 4.4vw, 64px); padding-top: 16px; }
.at-grupo { display: grid; grid-template-rows: auto 1fr auto; }
.at-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* painéis */
.at-painel { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); min-height: clamp(84px, 8.4vw, 118px); padding: 16px clamp(18px, 2.2vw, 32px) 12px; border-radius: 10px; color: #f3eee6; font-size: clamp(1.25rem, 2.5vw, 2.3rem); font-weight: 800; letter-spacing: .035em; white-space: nowrap; text-transform: uppercase; line-height: 1.05; box-shadow: 0 22px 34px -20px rgb(16 19 31 / .55), 0 2px 0 rgb(16 19 31 / .3); }
.at-painel::before { content: ""; position: absolute; inset: 6px; border: 2.5px solid #f3eee6; border-radius: 5px; pointer-events: none; }
/* película refletiva: um reflexo atravessa o painel quando ele entra na tela */
.at-painel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .34) 50%, transparent 62%); transform: translateX(-100%); pointer-events: none; }
.at-painel.visto::after { transform: translateX(100%); transition: transform 1.7s var(--d-curva) .35s; }
.at-painel--verde { background: linear-gradient(in oklab 172deg, #1d7a57, var(--at-verde) 55%); }
.at-painel--azul { font-size: clamp(1.25rem, 2.05vw, 1.9rem); background: linear-gradient(in oklab 172deg, #3650a6, var(--d-indigo) 55%); }
.at-painel__seta { flex: none; width: .8em; height: .95em; margin-top: -.12em; background: #f3eee6; clip-path: polygon(33% 0, 67% 0, 67% 50%, 100% 50%, 50% 100%, 0 50%, 33% 50%); }

/* assuntos: placa no alto de um poste, itens ao lado do poste */
.at-faixas { display: grid; align-content: start; gap: clamp(36px, 4.4vw, 60px) clamp(20px, 2.6vw, 36px); padding-top: clamp(30px, 3.6vw, 48px); }
.at-grupo--trabalho .at-faixas { grid-template-columns: clamp(72px, 9vw, 132px) minmax(0, 1.08fr) minmax(0, 1fr); }
.at-faixa { --at-p: 62px; --at-recuo: calc(var(--at-p) + 30px); position: relative; padding-left: var(--at-recuo); }
.at-faixa::before { content: ""; position: absolute; left: calc(var(--at-p) - 3.5px); top: 50px; bottom: -3000px; width: 7px; background: linear-gradient(90deg, #7b8397, var(--at-aco) 70%); }
.at-placa { position: relative; display: block; height: auto; margin-left: calc(-1 * var(--at-recuo)); filter: drop-shadow(0 12px 10px rgb(16 19 31 / .2)); }
.at-faixa h4 { font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.at-faixa h4 small { display: block; margin-top: 8px; font-family: var(--d-mono); font-size: var(--t-mini); font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; text-wrap: balance; color: var(--acento); }
.at-faixa h4:has(.at-so-leitor) small { margin-top: 0; }
.at-faixa dl { display: grid; gap: 20px clamp(20px, 2.6vw, 36px); margin-top: 22px; }
.at-faixa dt::before { content: ""; display: block; width: 26px; height: 5px; margin-bottom: 10px; border-radius: 1px; background: var(--d-faixa); }
.at-faixa dt { font-weight: 800; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.2; }
.at-faixa dd { margin-top: 4px; font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }

.at-faixa--jornada { --at-p: clamp(60px, 7.25vw, 92px); --at-recuo: calc(var(--at-p) * 2 + 30px); grid-column: 1 / -1; min-height: calc(var(--at-p) * 2); }
.at-faixa--jornada .at-placa { position: absolute; left: 0; top: 0; margin: 0; width: calc(var(--at-p) * 2); }
.at-faixa--jornada h4 { padding-top: 14px; }
.at-faixa--jornada dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.at-faixa--saida { grid-column: 2; }
.at-faixa--saida .at-placa { width: 206px; margin-bottom: 22px; }
.at-faixa--vinculo { grid-column: 3; margin-top: 44px; }
.at-faixa--vinculo .at-placa { width: 104px; margin-left: calc(-1 * var(--at-recuo) + var(--at-p) - 52px); margin-bottom: 22px; }
.at-faixa--inss { margin-top: clamp(40px, 7vw, 104px); }
.at-faixa--inss .at-placa { width: 190px; margin-bottom: 22px; }

/* fecho */
.at-fim { display: flex; justify-content: flex-end; margin-top: clamp(20px, 2.6vw, 36px); }
/* aviso: placa educativa presa mais abaixo no último poste */
.at-aviso { position: relative; justify-self: start; margin-top: clamp(40px, 5vw, 72px); padding: 13px 16px 10px; border: 2.5px solid var(--tinta); border-radius: 6px; background: #fbfaf6; box-shadow: 0 0 0 3px #fbfaf6, 0 14px 16px -8px rgb(16 19 31 / .3); font-weight: 800; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.25; max-width: 17.5em; }

@media (max-width: 1080px) {
  .at-topo, .at-grade { grid-template-columns: minmax(0, 1fr); }
  .at-grade { gap: 64px; }
  .at-viga { height: 40px; background-size: 46px 40px; }
  .at-grupo--trabalho .at-faixas { grid-template-columns: minmax(0, 1fr); }
  .at-faixa, .at-faixa--jornada { --at-p: 46px; --at-recuo: calc(var(--at-p) + 24px); grid-column: auto; margin-top: 0; min-height: 0; }
  .at-faixa::before { bottom: 0; }
  .at-faixa--jornada .at-placa { width: 92px; }
  .at-faixa--vinculo .at-placa { position: absolute; left: 0; top: 0; }
  .at-faixa--jornada h4, .at-faixa--vinculo h4 { display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 30px; min-height: 92px; }
  .at-faixa--vinculo h4 { min-height: 97px; }
  .at-faixa--jornada dl, .at-faixa--vinculo dl { margin-top: 26px; }
  .at-faixa--jornada dl { grid-template-columns: minmax(0, 1fr); }
  .at-faixa--saida .at-placa, .at-faixa--inss .at-placa { width: 160px; margin-bottom: 18px; }
  .at-faixa--vinculo .at-placa { width: 84px; margin: 0; left: 4px; }
  /* segunda viga, para o painel da previdência */
  .at-grupo--prev { position: relative; padding-top: 16px; }
  .at-grupo--prev::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; top: 0; height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M0 49 30 3 60 49M30 3v46' fill='none' stroke='%233d4354' stroke-width='3.5'/%3E%3Cpath d='M0 3h60M0 49h60' stroke='%233d4354' stroke-width='6'/%3E%3C/svg%3E") 0 0 / 46px 40px repeat-x; }
  .at-faixa--inss::before { bottom: -3000px; }
  .at-fim { justify-content: flex-start; }
}