/* 16/10: herói com a Flô colhendo, inteira (só o fundo vazio foi tirado); o sol que troca de cor fica atrás dela, longe dos potes.
   A Flô do herói antigo foi para o final, no lugar do pote. */
.hero-art{height:auto!important;display:block;place-items:initial}
.hero-art .flo{width:min(540px,100%)!important;margin-inline:auto}
.hero-art .hero-colheita{width:100%;height:auto;filter:none}
.hero-art .sun{position:absolute;top:0;left:38%;right:auto;bottom:auto;width:52%!important;height:auto!important;aspect-ratio:1;transform:none!important;z-index:0}
.hero-art .hero-selo{top:auto!important;bottom:2%!important;left:0!important;right:auto!important;z-index:3}
@media (max-width:959px){ .hero-art{width:100vw;margin-inline:calc(50% - 50vw)} .hero-art .flo{width:100%!important} }
.final-flo{display:block;width:min(300px,78vw);margin:0 auto 8px}
.final-flo img{display:block;width:100%;height:auto}

/* CTA do herói em tablet (761–1000px): a coluna de texto é estreita e a foto da Flora cobria a ponta do botão. Botão mais compacto e acima da foto. */
@media (min-width:761px) and (max-width:1000px){
  .btn-hero-cart{min-width:0;padding-left:20px;padding-right:20px;gap:8px;font-size:16px}
  .hero-cta{position:relative;z-index:4}
}
/* CTA do herói no celular (até 760px): o botão não encolhia e passava da margem direita, com a sombra somando 9px. Agora ocupa a coluna, com a sombra dentro da margem. */
@media (max-width:760px){
  .hero-actions .hero-cta{width:100%}
  .hero-cta .btn-hero-cart{min-width:0;width:calc(100% - 13px);margin-left:4px;padding-left:14px;padding-right:14px;gap:8px;font-size:16px;white-space:normal;text-align:center}
}
@media (min-width:481px) and (max-width:760px){
  .hero-cta .btn-hero-cart{max-width:400px;margin-left:auto;margin-right:auto}
}
@media (max-width:360px){
  .hero-cta .btn-hero-cart{font-size:15px;padding-left:10px;padding-right:10px}
}