/* Peças do artigo "isso é da sua área?" (refeito em 29/10/2026, foco em
   cargos e IA). Carrega depois de /artigos/shared/artigos.css e só usa os
   papéis da marca (--cartao, --line, --accent...), então o tema escuro vale
   sozinho.

   Sem JavaScript, tudo aparece montado. Com JavaScript, o artigo.js põe
   .vivo na peça dos arquétipos e .on quando ela entra na tela: o organograma
   se desmonta e os cinco cartões acendem em sequência. O movimento roda
   também com "reduzir movimento" ligado, numa versão só de opacidade e
   deslocamento curto. */

/* ---------- A citação de Boris, ao lado do print ---------- */
.trecho { margin: 10px 0 0; padding: 0; }
.trecho p {
  padding: 14px 0; border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 650; font-stretch: 94%; font-size: 21px; line-height: 1.3; letter-spacing: -.012em; color: var(--text); text-wrap: pretty;
}
.trecho p:first-child { border-top: 0; padding-top: 4px; font-size: 26px; line-height: 1.15; }
.trecho p:last-child { padding-bottom: 0; }

/* ---------- Os cinco arquétipos: do organograma ao jeito de contribuir ---------- */
.arquetipos { margin-block: 44px 52px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: var(--surface); }
.arq-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arq-rotulo-trabalho { margin-top: 26px; color: var(--accent-texto); }

/* O organograma: quatro caixas penduradas numa barra. */
.arq-funcoes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.arq-funcoes::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: -16px; height: 2px; background: var(--line-2);
  transform-origin: center; transition: transform .7s var(--sai), opacity .7s;
}
.arq-funcoes li {
  position: relative; padding: 12px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--cartao);
  text-align: center; font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: 17px; color: var(--text);
  transition: border-color .6s, color .6s, background-color .6s, translate .7s var(--sai), opacity .6s;
}
.arq-funcoes li::before { content: ''; position: absolute; left: 50%; top: -17px; width: 2px; height: 16px; background: var(--line-2); transition: opacity .5s; }

/* Os cinco cartões. */
.arq-cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.arq-cartoes li {
  position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  padding: 20px 18px 20px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--cartao);
  transition: opacity .55s, translate .6s var(--sai), background-color .35s, border-color .35s, box-shadow .35s, filter .35s;
}
/* A faixa que acende no alto de cada cartão. */
.arq-cartoes li::before { content: ''; position: absolute; top: 20px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transition: transform .6s var(--sai); }
.arq-n { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--accent-texto); }
.arq-cartoes h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; font-size: 23px; line-height: 1; letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
.arq-verbo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-texto); }
.arq-cartoes p:not(.arq-verbo) { font-size: 15px; line-height: 1.45; color: var(--body); }

/* A fase do produto: três escolhas, a mistura acende nos cartões (CSS puro). */
.arq-fases { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; border: 0; }
.arq-fases legend { width: 100%; margin-bottom: 12px; padding: 0; font-family: var(--display); font-weight: 700; font-stretch: 94%; font-size: 19px; color: var(--text); }
.arq-fases label { position: relative; cursor: pointer; }
.arq-fases input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.arq-fases label > span {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 18px 11px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--cartao);
  font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); transition: background-color .2s, border-color .2s, color .2s;
}
.arq-fases small { font-size: 13px; font-weight: 500; color: var(--muted); }
.arq-fases label:hover > span { border-color: var(--accent); }
.arq-fases input:focus-visible + span { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.arq-fases input:checked + span { border-color: var(--text); background: var(--text); color: var(--bg); }
.arq-fases input:checked + span small { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.arquetipos figcaption { margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.arquetipos figcaption a { color: var(--accent-texto); }

/* Forte: cartão laranja. Um pouco: borda laranja tracejada. O resto apaga. */
.arquetipos:has(input:checked) .arq-cartoes li { filter: grayscale(1) opacity(.45); }
.arquetipos:has(input[value="novo"]:checked) li:is([data-n="1"], [data-n="2"], [data-n="3"]),
.arquetipos:has(input[value="crescendo"]:checked) li:is([data-n="2"], [data-n="3"], [data-n="4"]),
.arquetipos:has(input[value="maduro"]:checked) li:is([data-n="3"], [data-n="4"], [data-n="5"]) {
  filter: none; border-color: var(--accent); background: var(--accent); box-shadow: 0 18px 30px -22px var(--sombra);
}
.arquetipos:has(input[value="novo"]:checked) li:is([data-n="1"], [data-n="2"], [data-n="3"]) :is(h3, p, .arq-n),
.arquetipos:has(input[value="crescendo"]:checked) li:is([data-n="2"], [data-n="3"], [data-n="4"]) :is(h3, p, .arq-n),
.arquetipos:has(input[value="maduro"]:checked) li:is([data-n="3"], [data-n="4"], [data-n="5"]) :is(h3, p, .arq-n) { color: var(--sobre-acc); }
.arquetipos:has(input[value="novo"]:checked) li:is([data-n="1"], [data-n="2"], [data-n="3"])::before,
.arquetipos:has(input[value="crescendo"]:checked) li:is([data-n="2"], [data-n="3"], [data-n="4"])::before,
.arquetipos:has(input[value="maduro"]:checked) li:is([data-n="3"], [data-n="4"], [data-n="5"])::before { background: var(--sobre-acc); }
.arquetipos:has(input[value="crescendo"]:checked) li[data-n="5"],
.arquetipos:has(input[value="maduro"]:checked) li[data-n="2"] { filter: none; border: 2px dashed var(--accent); }

/* ---------- Movimento (só com JavaScript) ---------- */
/* Antes de entrar na tela: organograma inteiro, cartões escondidos um pouco abaixo. */
.arquetipos.vivo .arq-cartoes li { opacity: 0; translate: 0 34px; }
.arquetipos.vivo .arq-cartoes li::before { transform: scale(0); }
.arquetipos.vivo .arq-rotulo-trabalho { opacity: 0; transition: opacity .5s; }
/* Entrou: a barra do organograma some, as caixas viram contorno tracejado e se afastam. */
.arquetipos.vivo.on .arq-funcoes::before { transform: scaleX(0); opacity: 0; }
.arquetipos.vivo.on .arq-funcoes li::before { opacity: 0; }
.arquetipos.vivo.on .arq-funcoes li { border-style: dashed; background: transparent; color: var(--muted); translate: 0 6px; }
.arquetipos.vivo.on .arq-funcoes li:nth-child(1) { translate: -6px 6px; }
.arquetipos.vivo.on .arq-funcoes li:nth-child(4) { translate: 6px 6px; }
.arquetipos.vivo.on .arq-rotulo-trabalho { opacity: 1; transition-delay: .5s; }
/* E os cinco acendem, um depois do outro. */
.arquetipos.vivo.on .arq-cartoes li { opacity: 1; translate: 0 0; }
.arquetipos.vivo.on .arq-cartoes li::before { transform: scale(1); }
.arquetipos.vivo.on .arq-cartoes li:nth-child(1), .arquetipos.vivo.on .arq-cartoes li:nth-child(1)::before { transition-delay: .7s; }
.arquetipos.vivo.on .arq-cartoes li:nth-child(2), .arquetipos.vivo.on .arq-cartoes li:nth-child(2)::before { transition-delay: .9s; }
.arquetipos.vivo.on .arq-cartoes li:nth-child(3), .arquetipos.vivo.on .arq-cartoes li:nth-child(3)::before { transition-delay: 1.1s; }
.arquetipos.vivo.on .arq-cartoes li:nth-child(4), .arquetipos.vivo.on .arq-cartoes li:nth-child(4)::before { transition-delay: 1.3s; }
.arquetipos.vivo.on .arq-cartoes li:nth-child(5), .arquetipos.vivo.on .arq-cartoes li:nth-child(5)::before { transition-delay: 1.5s; }
/* Depois que montou, a escolha da fase responde na hora. */
.arquetipos.vivo.on.pronto .arq-cartoes li, .arquetipos.vivo.on.pronto .arq-cartoes li::before { transition-delay: 0s; }
.arquetipos.vivo.on:has(input:checked) .arq-cartoes li { transition-delay: 0s; }

/* Reduzir movimento: mesma sequência, deslocamento curto e sem a abertura das caixas. */
@media (prefers-reduced-motion: reduce) {
  .arquetipos.vivo .arq-cartoes li { translate: 0 10px; transition: opacity .7s, translate .7s ease-out, background-color .35s, border-color .35s; }
  .arquetipos.vivo.on .arq-funcoes li, .arquetipos.vivo.on .arq-funcoes li:nth-child(1), .arquetipos.vivo.on .arq-funcoes li:nth-child(4) { translate: none; }
  .arquetipos.vivo.on .arq-cartoes li { translate: 0 0; }
}

/* ---------- Pensa no seu time: o arquétipo em cima de cada pergunta ---------- */
.perg-arq { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texto); }

/* O retrato que se monta com os nomes escritos (só existe com JavaScript). */
.retrato { margin-block: 8px 48px; padding: clamp(22px, 3vw, 30px); border-radius: 26px; background: var(--bloco); color: var(--sobre-bloco); }
[data-tema="escuro"] .retrato { border: 1px solid var(--line-2); }
.retrato-rot { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.retrato-mapa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.retrato-mapa li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sobre-bloco) 8%, transparent); }
.retrato-mapa span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-bloco-2); }
.retrato-mapa b { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 21px; line-height: 1.1; overflow-wrap: anywhere; color: var(--sobre-bloco); }
.retrato-mapa b.vazio { color: var(--sobre-bloco-2); font-weight: 600; }
.retrato-mapa b.repete { color: var(--accent); }
.retrato-leitura { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--sobre-bloco); text-wrap: pretty; }
.retrato-leitura strong { color: var(--accent); font-weight: 700; }

@media (max-width: 1040px) {
  .texto > .arquetipos, .texto > .retrato { max-width: var(--col); }
  .arq-cartoes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .arq-cartoes li { grid-column: span 2; }
  .arq-cartoes li:nth-child(n+4) { grid-column: span 3; }
  .retrato-mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .trecho p { font-size: 19px; }
  .trecho p:first-child { font-size: 22px; }
  .arquetipos { margin-inline: -6px; padding: 20px 16px 22px; border-radius: 24px; }
  .arq-funcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
  .arq-funcoes::before { left: 25%; right: 25%; }
  .arq-funcoes li:nth-child(n+3)::before { display: none; }
  .arq-funcoes li { font-size: 15px; padding: 9px 8px; }
  .arquetipos.vivo.on .arq-funcoes li:is(:nth-child(1), :nth-child(4)) { translate: 0 6px; }
  .arq-cartoes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .arq-cartoes li, .arq-cartoes li:nth-child(n+4) { grid-column: auto; }
  .arq-cartoes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 16px 16px 16px 14px; }
  .arq-cartoes li > * { grid-column: 2; }
  .arq-cartoes .arq-n { grid-column: 1; grid-row: 1 / span 3; padding-top: 3px; }
  .arq-cartoes h3 { font-size: 22px; }
  .arq-fases label { flex: 1 1 100%; }
  .retrato-mapa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .retrato-mapa li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; }
  .retrato-mapa b { font-size: 19px; text-align: right; }
}

/* O fecho deste artigo é uma pergunta longa: quebra equilibrada. */
.fecho p { text-wrap: balance; }