/* ============================================================
   SEÇÃO "COMO FUNCIONA" — faixa de 3 cards SVG (passos)
   Cards estáticos (card1.svg, card2.svg, card3.webp) + título. Entrada fade via .js.
   Header e cards compartilham a MESMA coluna (mesmo eixo esquerdo).
   ============================================================ */
.js [data-nc-card]{ opacity:0; transform:translateY(var(--space-6, 24px)); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.js [data-nc-card][data-in]{ opacity:1; transform:none; }

.nc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:0; align-items:start; }
.nc-steps figure{ margin:0; }
.nc-steps figure:nth-child(2){ transition-delay:.08s; }
.nc-steps figure:nth-child(3){ transition-delay:.16s; }

.nc-step-img{ display:block; width:100%; height:auto; border-radius:var(--radius-2xl, 24px);
  /* sombra removida a pedido do dono (10-09-2026): o card fica plano,
     o hover mantem so o leve levantar */
  transition:transform .2s cubic-bezier(.23,1,.32,1); }
@media (hover:hover){
  .nc-step:hover .nc-step-img{ transform:translateY(-4px); }
}

@media (max-width:900px){
  .nc-steps{ grid-template-columns:1fr; max-width:460px; gap:40px; }
  .nc-steps figure{ transition-delay:0s !important; }
}

@media (prefers-reduced-motion:reduce){
  .js [data-nc-card]{ transform:none; transition:opacity .3s ease; }
}

/* layout da seção — mesma coluna p/ header e cards */
.how-it-works-section .hiw-steps-wrap{ max-width:1240px; margin:0 auto; padding-inline:clamp(20px, 5vw, 24px); padding-block:clamp(3rem, 8vh, 6rem); }
.how-it-works-section .hiw-header{ text-align:left; margin:0 0 clamp(2.75rem, 6vh, 4.5rem); padding:0; }
.how-it-works-section .hiw-header h2, .how-it-works-section .hiw-header p{ max-width:52ch; }