/* Peças do artigo "Como escolher um palestrante de IA" (29/10/2026).
   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.
   O checklist funciona sem JavaScript: a conta é feita com contadores de CSS
   e a leitura final com :has(). */

/* ---------- Critérios: quatro cartões, cada um com o seu teste ---------- */
.criterios { counter-reset: criterio; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 36px 48px; }
.criterios li {
  counter-increment: criterio; display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 22px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--cartao);
}
.criterios li::before {
  content: counter(criterio, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; color: var(--accent-texto);
}
.criterios h3 { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 26px; line-height: 1.05; letter-spacing: -.025em; color: var(--text); }
.criterios p { font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.criterios .teste {
  margin-top: auto; padding: 12px 14px; border-radius: 14px; background: var(--surface);
  font-weight: 600; color: var(--text);
}
.criterios .teste .kicker { display: block; margin-bottom: 2px; font-size: 11px; color: var(--accent-texto); }

/* ---------- Dois números, dois métodos ---------- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 36px 44px; }
.numeros .numero { padding: 26px 26px 22px; border-radius: 24px; background: var(--bloco); color: var(--sobre-bloco); }
.numeros .numero + .numero { background: var(--cartao); border: 1px solid var(--line-2); color: var(--text); }
[data-tema="escuro"] .numeros .numero:first-child { border: 1px solid var(--line-2); }
.numeros .valor {
  font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: clamp(64px, 9vw, 112px);
  line-height: .9; letter-spacing: -.05em; color: var(--accent);
}
.numeros .numero + .numero .valor { color: var(--violeta-texto); }
.numeros p:not(.valor) { margin-top: 12px; font-size: 18px; line-height: 1.45; text-wrap: pretty; }
.numeros .metodo { padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 15px !important; opacity: .85; }
.numeros .metodo .kicker { display: block; color: inherit; opacity: .8; }
.numeros figcaption { grid-column: 1 / -1; margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ---------- Sinais de cuidado: lista com um alerta em cada linha ---------- */
.sinais { margin-block: 28px 44px; }
.sinais li {
  position: relative; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 28px; align-items: baseline;
  padding: 18px 0 18px 40px; border-top: 1px solid var(--line);
}
.sinais li:last-child { border-bottom: 1px solid var(--line); }
.sinais li::before {
  content: '!'; position: absolute; left: 0; top: 19px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--sobre-acc); font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1;
}
.sinais h3 { font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.sinais p { font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.sinais a { color: var(--accent-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- O checklist do organizador ---------- */
.checklist {
  counter-reset: bons cuidado;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-block: 32px 48px;
}
.checklist fieldset { min-width: 0; margin: 0; padding: 22px 22px 14px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--cartao); }
.checklist .cuidado { background: var(--surface); }
.checklist legend {
  float: left; width: 100%; margin-bottom: 8px; padding: 0;
  font-family: var(--display); font-weight: 800; font-stretch: 90%; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; color: var(--text);
}
.checklist ul { clear: both; }
.checklist li + li { border-top: 1px solid var(--line); }
.checklist label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; cursor: pointer; }
.checklist label span { font-size: 17px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
.checklist input {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin: 0; border: 2px solid var(--line-2); border-radius: 7px; background: var(--bg); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.checklist input::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid var(--sobre-acc); border-bottom: 2.5px solid var(--sobre-acc); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.checklist input:checked { border-color: var(--accent); background: var(--accent); }
.checklist input:checked::after { opacity: 1; }
.checklist input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.checklist label:hover input:not(:checked) { border-color: var(--accent-texto); }
.checklist input:checked + span { color: var(--text); }
.checklist .bons input:checked { counter-increment: bons; }
.checklist .cuidado input:checked { counter-increment: cuidado; }
.checklist .cuidado input:checked + span { text-decoration: line-through; text-decoration-color: var(--accent-texto); }

.placar {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; align-items: center;
  padding: 22px 26px; border-radius: 24px; background: var(--bloco); color: var(--sobre-bloco);
}
[data-tema="escuro"] .placar { border: 1px solid var(--line-2); }
.placar .conta { display: flex; gap: 28px; font-size: 15px; line-height: 1.3; color: var(--sobre-bloco-2); }
.placar .c::before {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-weight: 800; font-stretch: 86%; font-size: 56px; line-height: .9; letter-spacing: -.04em;
}
.placar .c-bons::before { content: counter(bons); color: var(--accent); }
.placar .c-cuidado::before { content: counter(cuidado); color: var(--sobre-bloco); }
.placar .leitura { font-family: var(--display); font-weight: 700; font-stretch: 94%; font-size: 21px; line-height: 1.25; color: var(--sobre-bloco); text-wrap: balance; }
.placar .leitura { display: none; }
.checklist:not(:has(input:checked)) .neutra { display: block; }
.checklist:has(input:checked):has(.bons input:not(:checked)):not(:has(.cuidado input:checked)) .parcial { display: block; }
.checklist:has(.cuidado input:checked) .alerta { display: block; color: var(--accent); }
.checklist:not(:has(.bons input:not(:checked))):not(:has(.cuidado input:checked)) .passou { display: block; color: var(--accent); }

/* ---------- Perguntas antes de contratar ---------- */
.entrevista { counter-reset: pergunta; margin-block: 28px 48px; }
.entrevista li {
  counter-increment: pergunta; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.entrevista li:last-child { border-bottom: 1px solid var(--line); }
.entrevista li::before { content: counter(pergunta); font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--violeta-texto); }
.entrevista h3 { font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: 22px; line-height: 1.18; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.entrevista p { font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.entrevista a { color: var(--accent-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* O duo desta página: a foto do palco é vertical e corta pelo rosto. */
.duo figure:nth-child(2) img { object-position: 50% 20%; }

@media (max-width: 860px) {
  .entrevista li { grid-template-columns: 40px minmax(0, 1fr); }
  .entrevista li p { grid-column: 2; }
}
@media (max-width: 760px) {
  .criterios, .numeros, .checklist { grid-template-columns: minmax(0, 1fr); }
  .sinais li { grid-template-columns: minmax(0, 1fr); }
  .placar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .duo figure:nth-child(2) { aspect-ratio: 1 / 1; }
  .criterios h3 { font-size: 23px; }
  .numeros .numero { padding: 22px 20px 18px; }
  .checklist fieldset { padding: 18px 18px 10px; }
  .placar { padding: 20px; }
  .entrevista li { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 14px; }
  .entrevista li::before { font-size: 24px; }
  .entrevista h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .checklist input { transition: none; }
}
@media print {
  .placar { display: none; }
  .checklist input { border-color: #000; }
}

/* ---------- Modelo novo do artigo (Gui, 30/10/2026: o padrão é /conteudos/) ----------
   Só neste artigo até o OK dele; depois sobe para /artigos/shared/artigos.css. A coluna
   de texto fica limpa, sem giro e sem curva; só as peças especiais viram objetos. */

/* O índice sem caixa. */
.capa-indice { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* Critérios: colunas de texto com fio à mão, e o teste num adesivo. */
.criterios { gap: 30px clamp(28px, 4vw, 48px); }
.criterios li { position: relative; padding: 22px 0 0; border: 0; border-radius: 0; background: none; }
.criterios li::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: var(--text); -webkit-mask: var(--traco-h) center / 100% 100% no-repeat; mask: var(--traco-h) center / 100% 100% no-repeat; }
.criterios .teste { background: var(--violeta); color: #fff; box-shadow: 0 12px 22px -14px var(--sombra); }
.criterios .teste .kicker { color: #ffd2bb; }

/* Dois números: duas folhas retas, uma por cima da outra. */
.numeros { position: relative; gap: 0; align-items: center; }
.numeros .numero { position: relative; box-shadow: 0 30px 50px -34px var(--sombra); }
.numeros .numero:first-child { z-index: 1; }
.numeros .numero + .numero { margin: 30px 0 0 -3%; padding-left: calc(26px + 3%); border: 0; box-shadow: 0 0 0 1px var(--line), 0 26px 44px -32px var(--sombra); }

/* O placar do checklist: um ingresso, com a conta no canhoto. */
.placar { -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000), radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) intersect, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); }

/* O pedido do fim: a faixa laranja reta, com o raio saindo da borda (marca.css). */
.palestra-cta { position: relative; isolation: isolate; margin-block: 56px 40px; padding: clamp(64px, 7vw, 96px) 0; border: 0; border-radius: 0; background: none; color: var(--sobre-acc); }
.palestra-cta .kicker, .palestra-cta p, .palestra-cta h2 { color: var(--sobre-acc); }
.palestra-cta .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: #f1ece2; }
.palestra-cta .button:hover { border-color: var(--sobre-acc); background: transparent; color: var(--sobre-acc); }

@media (max-width: 760px) {
  .numeros .numero + .numero { margin: -14px 0 0; padding-left: 26px; padding-top: 40px; }
}