/* TAVO - acabamento de cards por proporção de arte.
   Alterações limitadas aos 10 cartões ilustrados, ao novo 5º benefício
   de profissionais e à cor dos destaques nos títulos. */
:root { --tavo-cyan-approved: #12B4FF; }
.accent, .blue-emphasis { color:var(--tavo-cyan-approved); }

/* COMO FUNCIONA: cada painel respeita o formato 626x328 da imagem.
   Espaço branco intencional no card integra as extremidades arredondadas
   originais, sem filtros, distorção ou zoom. */
.steps-grid { align-items:stretch; }
.step-card { display:flex;flex-direction:column;padding:10px 10px 0;border-radius:26px;min-width:0;overflow:hidden; }
.step-art { width:100%;height:auto;aspect-ratio:626 / 328;min-height:0;overflow:hidden;flex:none;background:#fff;border-radius:18px;display:block; }
.step-art img { display:block;width:100%;height:100%;aspect-ratio:auto;max-width:100%;object-fit:contain;object-position:center center;transform:none;filter:none; }
.step-body { flex:1;padding:24px 20px 30px;min-height:0; }

/* PARA CLIENTES: a própria arte horizontal determina a geometria do cartão. */
.client-benefits {display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;}
.client-benefit {display:flex;flex:0 1 calc((100% - 44px) / 3);min-width:0;flex-direction:column;align-items:stretch;gap:0;padding:11px 11px 24px;min-height:0;overflow:hidden;border-radius:24px;}
.client-artwork {display:block;flex:none;width:100%;height:auto;aspect-ratio:436 / 202;min-height:0;background:#fff;border-radius:16px;overflow:hidden;}
.client-artwork img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;transform:none;}
.client-body {padding:21px 14px 1px;min-width:0;}
.client-body h3 {font-size:17.8px;line-height:1.42;margin-bottom:8px;}
.client-body p {font-size:13.7px;line-height:1.7;}

/* PARA PROFISSIONAIS: cinco cards de largura idêntica, o último centralizado.
   Os desenhos com proporção ~3:2 aparecem por inteiro, inclusive nuvens. */
.professional-benefits {display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px;}
.professional-benefit {display:grid;flex:0 1 calc((100% - 22px) / 2);min-width:0;grid-template-columns:minmax(0,39%) minmax(0,1fr);gap:16px;align-items:center;min-height:184px;padding:19px 20px;border-radius:24px;}
.professional-artwork {width:100%;height:auto;aspect-ratio:3 / 2;max-width:none;min-width:0;border-radius:16px;background:#fff;overflow:hidden;display:grid;place-items:center;}
.professional-artwork img {display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none;filter:none;}
.professional-benefit h3 {font-size:17.1px;line-height:1.35;margin-bottom:9px;}
.professional-benefit p {font-size:13.7px;line-height:1.7;}

@media (max-width:1023px) {
  .client-benefit {flex-basis:calc((100% - 20px)/2);}
  .professional-benefit {flex-basis:calc((100% - 20px)/2);grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:13px;padding:16px;}
  .professional-benefit h3 {font-size:15.4px;}
  .professional-benefit p {font-size:13.2px;}
}
@media (max-width:850px) {
  .professional-benefit {flex-basis:100%;grid-template-columns:170px minmax(0,1fr);gap:21px;min-height:156px;padding:17px 22px;}
  .professional-artwork {max-width:170px;}
  .professional-benefit h3 {font-size:17px;}
  .professional-benefit p {font-size:14px;}
}
@media (max-width:720px) {
  .steps-grid {gap:17px;}
  .step-card {display:flex;flex-direction:column;min-height:0;padding:9px 9px 0;}
  .step-art {height:auto;aspect-ratio:626 / 328;}
  .step-body {padding:21px 18px 25px;}
  .client-benefits {gap:17px;}
  .client-benefit {flex-basis:100%;min-height:0;padding:10px 10px 22px;flex-direction:column;align-items:stretch;gap:0;}
  .client-artwork {width:100%;height:auto;flex:none;aspect-ratio:436 / 202;}
  .client-body {padding:18px 12px 1px;}
  .client-body h3 {font-size:18px;}
  .client-body p {font-size:14px;line-height:1.7;}
  .professional-benefits {gap:15px;}
  .professional-benefit {flex-basis:100%;grid-template-columns:132px minmax(0,1fr);gap:15px;min-height:144px;padding:15px;}
  .professional-artwork {width:100%;height:auto;max-width:none;aspect-ratio:3 / 2;}
  .professional-benefit h3 {font-size:16px;}
  .professional-benefit p {font-size:13.2px;}
}
@media (max-width:359px) {
  .client-benefit {padding:9px 9px 20px;}
  .professional-benefit {grid-template-columns:1fr;gap:8px;padding:13px 14px 21px;}
  .professional-artwork {width:min(100%,195px);margin-inline:auto;aspect-ratio:3 / 2;}
  .professional-benefit h3 {font-size:16px;}
  .professional-benefit p {font-size:13.4px;}
}