/* ==========================================================
   DESAFIOS (#desafios)
   ========================================================== */
.desafios-subtitulo { max-width: var(--largura-texto); }
.desafios-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3) var(--espaco-4); margin-top: var(--espaco-6); align-items: start; }
.desafio { border: 1px solid var(--linha); background: var(--fundo); position: relative; transition: border-color .25s, background-color .25s; }
.desafio::before { content: ""; position: absolute; left: -1px; top: -1px; height: 3px; width: 0; background: var(--acento); transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.desafio[open] { background: var(--superficie); border-color: var(--borda-controle); }
.desafio[open]::before { width: var(--filete-vermelho); }
.desafio summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--espaco-4); align-items: start; padding: var(--espaco-4) var(--espaco-4) var(--espaco-4) var(--espaco-4); font-size: 21px; font-weight: 600; line-height: 1.35; min-height: 104px; }
.desafio summary::-webkit-details-marker { display: none; }
.desafio summary:hover { background: color-mix(in srgb, var(--superficie) 60%, transparent); }
.desafio[open] .mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.desafio-resposta { padding: 0 var(--espaco-4) var(--espaco-4); max-width: 52ch; }
.desafio[open] .desafio-resposta { animation: abrir .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .desafios-grade { grid-template-columns: minmax(0, 1fr); }
  .desafio summary { min-height: 0; font-size: 19px; padding: 20px; }
  .desafio-resposta { padding: 0 20px 20px; }
}