/*
 * 05b-pra-quem-e.css
 * Seção: "Para quem é O Novo Sistema" — inserida entre "Por que essa mudança
 * de mercado..." (05) e Premiação (06) a pedido do cliente (2026-08-11).
 * Numerada "05b" pelo mesmo raciocínio do "02b"/"02c" (ver docs/CONVENCOES.md):
 * evita renumerar 06→15 em cascata e não invade a faixa de CSS/asset IDs já
 * reservada às demais seções.
 *
 * Fundo claro/"off" (--cor-fundo-claro) — mesmo tom de contraste já usado em
 * Notícias (02b) e Comparação (02c), pedido explícito do cliente.
 *
 * Layout desktop: grid de 2 colunas, mesmo princípio de .especialista-grid
 * (08-especialista.css) — align-items: stretch faz a foto (paisagem,
 * 4608×3072) esticar até a altura real da coluna de texto (título + 4 itens
 * + fechamento + CTA) e object-fit: cover cropa mantendo o enquadramento.
 * [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Foto à ESQUERDA, texto à
 * DIREITA — tanto no desktop quanto no mobile. O DOM continua texto→foto
 * (ordem de leitura/acessibilidade/SEO intacta); a inversão é só visual, via
 * `order` em .pra-quem__media (ver regra abaixo), então basta 1 declaração
 * cobrindo todos os breakpoints — sem precisar duplicá-la dentro de cada
 * media query.
 *
 * Nenhum token de tamanho/cor novo precisou ser criado: título reaproveita
 * --fs-h2-premiacao (mesma escala de H2 em fundo claro), itens da lista
 * reaproveitam --fs-card-corpo, e o fechamento reaproveita
 * --fs-premiacao-corpo.
 *
 * [ATUALIZAÇÃO 2026-08-13, pedido do cliente] Título trocado para "O Novo
 * Sistema é para você que:" (já termina em dois-pontos e assume o papel do
 * antigo parágrafo de intro, que foi removido — por isso .pra-quem__intro
 * saiu do HTML e a regra correspondente foi removida daqui). Os 4 itens da
 * lista trocaram de "perfil profissional" para "perfil de identificação"
 * (mesmos 4 ícones, mesma ordem). Botão CTA novo (.pra-quem__cta-btn) foi
 * adicionado após o fechamento, reaproveitando o MESMO padrão visual/tokens
 * de .noticias__cta-btn (02b-noticias.css): --botao-height-lg,
 * --cor-cta-dourado(-hover)/-texto, --fs-botao. Diferença proposital: aqui o
 * botão fica alinhado à esquerda (align-self: flex-start), acompanhando o
 * alinhamento do resto da coluna de texto, em vez de centralizado como em
 * Notícias (lá o bloco inteiro é centralizado).
 */

.pra-quem {
  background-color: var(--cor-fundo-claro);
}

.pra-quem__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  gap: var(--space-secao-horizontal);
}

.pra-quem__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pra-quem__titulo {
  font-size: var(--fs-h2-premiacao);
  font-weight: var(--fw-h2-premiacao);
  line-height: var(--lh-h2-premiacao);
  color: var(--cor-heading-premiacao);
}

/* Lista de perfis — divisor "linha minimalista" entre itens (pedido do
   cliente), ícone circular à esquerda + texto, mesmo princípio de badge de
   ícone de .problemas__icone (04-problemas.css), só invertido para fundo
   claro (círculo em vez de quadrado, cor dourado-escura de accent em vez de
   dourado-claro — --cor-destaque-em-claro é o token pensado exatamente para
   "accent sobre fundo claro/creme", ver tokens.css). */
.pra-quem__lista {
  display: flex;
  flex-direction: column;
}

.pra-quem__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(15, 34, 29, 0.12);
}

.pra-quem__item:first-child {
  padding-top: 0;
}

.pra-quem__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.pra-quem__icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-fundo-cinza-claro);
  color: var(--cor-destaque-em-claro);
}

.pra-quem__icone svg {
  width: 20px;
  height: 20px;
}

.pra-quem__item-texto {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-escuro);
  padding-top: 8px;
}

.pra-quem__fechamento {
  font-size: var(--fs-premiacao-corpo);
  font-weight: var(--fw-premiacao-corpo);
  line-height: var(--lh-premiacao-corpo);
  color: var(--cor-texto-cinza-escuro);
}

.pra-quem__fechamento strong {
  color: var(--cor-texto-quase-preto);
  font-weight: var(--peso-semibold);
}

/* CTA final — mesmo padrão visual/tokens de .noticias__cta-btn
   (02b-noticias.css): pill dourada, mesma altura/tipografia de botão em
   todo o site. align-self: flex-start (em vez de um wrapper centralizado
   como em Notícias) porque aqui o botão acompanha o alinhamento à esquerda
   do resto da coluna de texto. margin-top extra (além do gap de
   .pra-quem__texto) dá um respiro maior entre o fechamento e a ação, para
   o CTA ler como um passo separado, não só mais um item da lista. */
.pra-quem__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 8px;
  height: var(--botao-height-lg);
  padding: 0 32px;
  border-radius: calc(var(--botao-height-lg) / 2);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pra-quem__cta-btn:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.pra-quem__cta-btn:focus-visible {
  outline: 2px solid var(--cor-fundo-escuro-base);
  outline-offset: 3px;
}

.pra-quem__media {
  width: 100%;
  /* Ver nota no topo do arquivo: inversão visual (foto à esquerda, texto à
     direita) aplicada a TODOS os breakpoints via `order`, sem reordenar o
     HTML (que continua texto→foto). */
  order: -1;
}

.pra-quem__foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--foto-radius-lg);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .pra-quem__grid {
    gap: 40px;
  }

  .pra-quem__foto {
    min-height: 320px;
  }
}

@media (max-width: 768px) {
  /* Quebra estrutural: grid de 2 colunas empilha em 1 — `order: -1` em
     .pra-quem__media (regra base, fora de media query) já garante que a
     foto continua vindo antes do texto também aqui. */
  .pra-quem__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pra-quem__foto {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 430px) {
  .pra-quem__item {
    gap: 12px;
    padding: 16px 0;
  }

  .pra-quem__icone {
    width: 36px;
    height: 36px;
  }

  .pra-quem__icone svg {
    width: 18px;
    height: 18px;
  }

  /* Mesmo padrão de .noticias__cta-btn no mesmo breakpoint: botão vira
     largura total para maximizar o alvo de toque em telas estreitas. */
  .pra-quem__cta-btn {
    width: 100%;
  }
}