/* Para quem é o Mercanet / Gestão comercial (Figma: O Mercanet,
   2448:1728 + cards 2470:8970). Desktop: copy (586px) à esquerda e foto
   do notebook (630×668) à direita; embaixo, 4 cards de 305×317 a 64px
   da foto. */

.para-quem-e { padding: 56px 0; }
@media (min-width: 1024px) {
  .para-quem-e { padding: 120px 0 0; }
}

.para-quem-e-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  /* 586fr/630fr + 64px de vão = exatamente 586px/630px no container de
     1280px do Figma, e encolhe junto abaixo disso. */
  .para-quem-e-grid { grid-template-columns: 586fr 630fr; gap: 64px; margin-bottom: 64px; }
}

/* Centralizado no mobile (só até virar 2 colunas): o acordeão abaixo
   fica de fora, sempre à esquerda, senão o título/seta e a descrição
   de cada item ficam ilegíveis centralizados. */
.para-quem-e-copy { text-align: center; }
.para-quem-e-copy .accordion,
.para-quem-e-copy .accordion * { text-align: left; }
@media (min-width: 1024px) {
  .para-quem-e-copy { text-align: left; }
}

.para-quem-e-copy h2 { margin-bottom: 20px; }
.para-quem-e-copy h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.22px; margin-bottom: 16px; }
@media (min-width: 768px) {
  .para-quem-e-copy h3 { font-size: 32px; letter-spacing: -0.32px; }
}
.para-quem-e-copy .lead { max-width: 524px; margin-bottom: 32px; }
@media (min-width: 1024px) {
  .para-quem-e-copy h2 { margin-bottom: 32px; }
  .para-quem-e-copy .lead { margin-bottom: 48px; }
}

/* Entrada animada (fade + slide-up) ao rolar até a seção — mesmo
   observer genérico usado em outras sessões do site (ver main.js). */
.para-quem-e-copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.para-quem-e-copy.is-visible { opacity: 1; transform: none; }
html:not(.js) .para-quem-e-copy { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .para-quem-e-copy { transition: none; }
}

/* Acordeão (Figma: divisórias de 584px, título 24px/600, seta laranja de
   24px — a seta fica 22px antes do fim da divisória). */
.para-quem-e-accordion .accordion-header { gap: 16px; padding-bottom: 23px; transition: padding-bottom var(--transition-base); }
/* Aberto: 16px entre o título e a descrição (Figma: 5380 → 5396), e só
   23px antes da divisória de 1px — fechado, são 24px (padding 23 + 1 de
   borda) dos dois lados, e o item inteiro fecha em 79,2px. */
.para-quem-e-accordion .accordion-item.is-open .accordion-header { padding-bottom: 16px; }
.para-quem-e-accordion h4 { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.18px; color: var(--color-navy); }
@media (min-width: 768px) {
  .para-quem-e-accordion h4 { font-size: 24px; letter-spacing: -0.24px; }
}
.para-quem-e-accordion .accordion-icon { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .para-quem-e-accordion .accordion-header { padding-right: 22px; }
}
.para-quem-e-accordion .accordion-body p { max-width: 482px; padding-bottom: 23px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }

.para-quem-e-media img { display: block; width: 100%; height: auto; border-radius: 30px; }

.para-quem-e-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .para-quem-e-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .para-quem-e-cards { grid-template-columns: repeat(4, 1fr); }
}

/* Card (Figma: 305×317, raio 20, borda 1,05px; ícone a 39px da lateral
   e 36px do topo; 36px de respiro embaixo). */
.para-quem-e-card {
  border: 1.05px solid var(--color-border-blue);
  border-radius: 20px;
  padding: 32px 24px;
  background: var(--color-white);
}
@media (min-width: 1024px) {
  /* 317px com a borda de 1,05px incluída; ícone a 39px da lateral e 36px
     do topo medidos da borda externa. */
  .para-quem-e-card { min-height: 317px; padding: 35px 38px; }
}

/* Entrada em cascata: cada card aparece um pouco depois do anterior
   (mesmo padrão do .bento-card/.blog-card). */
.para-quem-e-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.para-quem-e-card.is-visible { opacity: 1; transform: none; }
.para-quem-e-cards > .para-quem-e-card:nth-child(1) { transition-delay: 0s; }
.para-quem-e-cards > .para-quem-e-card:nth-child(2) { transition-delay: 0.08s; }
.para-quem-e-cards > .para-quem-e-card:nth-child(3) { transition-delay: 0.16s; }
.para-quem-e-cards > .para-quem-e-card:nth-child(4) { transition-delay: 0.24s; }
html:not(.js) .para-quem-e-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .para-quem-e-card { transition: none; }
}
.para-quem-e-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--color-orange);
  /* Figma tem uma borda própria aqui, quase da mesma cor do fundo — dá
     só um leve contorno. */
  border: 1px solid #EC4208;
  border-radius: 8px;
  /* Medido direto no Figma: o espaço entre a base do ícone e o topo do
     título é 80px fixo, idêntico nos 4 cards — não varia com o tamanho
     da descrição. */
  margin-bottom: 80px;
}
.para-quem-e-card-icon img { width: 24px; height: 24px; }
.para-quem-e-card h4 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin-bottom: 12px; }
.para-quem-e-card p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }