/* =========================================================
   05-animacoes-responsividade.css
   Landing page Artegraf — arquivo gerado na refatoração.
   Mantém CSS separado por responsabilidade para evitar monólito.
========================================================= */

/* ── ANIMAÇÕES ── */
.fu{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.fu.in{opacity:1;transform:none}
.pgrid .pcard:nth-child(2){transition-delay:.1s}
.pgrid .pcard:nth-child(3){transition-delay:.2s}
.dgrid .dcard:nth-child(2){transition-delay:.12s}
.dgrid .dcard:nth-child(3){transition-delay:.24s}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .ts{grid-template-columns:repeat(2,1fr)}
  .ts-i:nth-child(2){border-right:none}
  .ts-i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .dgrid{grid-template-columns:1fr 1fr}
  .wbf-grid{grid-template-columns:repeat(2,1fr);max-width:480px}
}
@media(max-width:768px){
  .hero{flex-direction:column;padding:32px 20px;min-height:auto;gap:32px}
  .hero-txt,.hero-vis{width:100%;max-width:100%}
  .hero-vis{min-height:300px}
  .pgrid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  /* Vitrine: trilho rolável por swipe; círculos um pouco menores no celular */
  .vit-trilho{gap:24px}
  .vit-item{width:124px}
  .vit-circulo{width:114px;height:114px}
  .vit-nome{font-size:1.1rem}
  .vit-seta{display:none}
  .pub-vazio{padding:26px 22px}
  .pub-vazio-t{font-size:1.4rem}
  .dgrid{grid-template-columns:1fr}
  .ft{flex-direction:column;text-align:center}
  .ts{grid-template-columns:1fr 1fr}
  .wbf-sec{margin-top:56px;padding:0 16px}
  .wbf-grid{gap:14px}
  .wbf-svg{height:120px}
}
@media(max-width:480px){
  .ts{grid-template-columns:1fr}
  .ts-i{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .ts-i:last-child{border-bottom:none}
  .wbf-grid{grid-template-columns:repeat(2,1fr);max-width:280px;gap:12px}
}