/* ─── Painel da marca ─────────────────────────────────────────────────────
   Coluna esquerda. Sem campos, então o trabalho aqui é de respiro: a logo
   grande e centrada segura a coluna sozinha, e as três garantias ficam
   abaixo dela, alinhadas entre si, sem competir por atenção.
   ------------------------------------------------------------------------ */

.painel {
  background: var(--security);
  color: var(--painel-tinta);
  padding: var(--e-8) var(--e-5);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--e-6);
}

.painel__logo {
  width: min(300px, 78%);
  height: auto;
}

/* ══ Garantias ═════════════════════════════════════════════════════════ */

.garantias {
  display: grid;
  gap: var(--e-3);
  font-size: var(--t-14);
  color: var(--painel-tinta-soft);
  max-width: 34ch;
}

.garantias li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.garantias .bi {
  flex: none;
  color: var(--makro-claro);
  font-size: var(--t-16);
  line-height: 1.5;
}

/* No celular a faixa é enxuta: só a logo. O trabalho da página é o
   formulário, e ele precisa caber na primeira tela. */
@media (max-width: 1023px) {
  .painel { padding-block: var(--e-6); }
  .garantias { display: none; }
}

/* ══ Desktop ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* A divisa entre as colunas é uma diagonal leve. O corte come 56px da
     borda direita, então metade disso volta como respiro para o conteúdo
     continuar parecendo centrado. O próprio contraste faz o papel do fio:
     borda não acompanha clip-path. */
  .painel {
    --corte: 56px;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
    padding: var(--e-12) calc(var(--e-8) + var(--corte) / 2) var(--e-12) var(--e-8);
    gap: var(--e-12);
  }

  .painel__logo { width: min(420px, 84%); }

  .garantias {
    gap: var(--e-4);
    font-size: var(--t-15);
    max-width: 46ch;   /* cada garantia cabe numa linha, sem quebra torta */
  }
}

@media (min-width: 1440px) {
  .painel {
    --corte: 80px;
    padding-left: var(--e-16);
    padding-right: calc(var(--e-16) + var(--corte) / 2);
    gap: var(--e-16);
    padding-bottom: 10em;
  }
}