/* Mesma ordem visual no computador e no celular. */
.hero{display:flex;flex-direction:column;align-items:center}
.hero>.eyebrow{order:0}
.hero>h1{order:1}
.hero>.hero-subtitle{order:2}
.hero>.hero-photo{order:3}
.hero>.hero-seals{order:4}
.hero>.hero-purchase{order:5;width:100%}
.hero .hero-photo{width:80%;max-width:432px;height:auto;object-fit:contain;margin-inline:auto}
.hero .hero-photo{border-radius:16px}
@media(max-width:600px){
 .hero{padding:14px 20px 24px}
 .hero>.eyebrow{font-size:12px;line-height:1.4;max-width:470px;margin:0 auto 8px}
 .hero h1{font-size:clamp(24px,6.4vw,30px);line-height:1.18;max-width:490px;margin:0 auto 10px;text-wrap:balance}
 .hero .hero-subtitle{font-size:15px;line-height:1.45;margin:0 auto 12px;max-width:470px}
 .hero>.hero-purchase{margin:14px 0 0}
 .hero .hero-purchase .btn-cta{margin:0;min-height:56px;padding:13px 12px;font-size:16px!important;line-height:1.3}
 .hero .hero-whatsapp{font-size:13px;line-height:1.4;margin:7px auto 0;max-width:420px;color:#57534e}
 .hero>.hero-photo{margin-top:0}
 .hero>.hero-seals{font-size:13px;line-height:1.45;max-width:450px;margin:10px auto 0}
}
@media(max-width:359px){.hero{padding-inline:18px}.hero .hero-purchase .btn-cta{font-size:15px!important;padding-inline:10px}}
@media(max-width:600px) and (max-height:650px){
 .hero{padding-top:10px}
 .hero>.eyebrow{font-size:12px;line-height:1.35;margin-bottom:6px}
 .hero h1{font-size:24px;line-height:1.15;margin-bottom:8px}
 .hero .hero-subtitle{font-size:14.5px;line-height:1.4;margin-bottom:8px}
 .hero .hero-whatsapp{font-size:12.5px;line-height:1.35;margin-top:6px}
 .hero>.hero-photo{margin-top:0}
}
@media(max-width:950px) and (max-height:500px){
 .hero{padding:10px 20px 20px}
 .hero>.eyebrow{font-size:12px;line-height:1.35;margin:0 auto 6px;max-width:540px}
 .hero h1{font-size:25px;line-height:1.15;margin:0 auto 8px}
 .hero .hero-subtitle{font-size:14.5px;line-height:1.4;margin:0 auto 8px;max-width:540px}
 .hero>.hero-purchase{margin:14px 0 0}
 .hero .hero-purchase .btn-cta{margin:0;min-height:54px;padding:12px;font-size:16px!important;line-height:1.3}
 .hero .hero-whatsapp{font-size:13px;line-height:1.35;margin:6px auto 0}
 .hero>.hero-photo{max-width:320px;margin-top:0}
 .hero>.hero-seals{margin:10px auto 0;font-size:13px;line-height:1.4}
}
@media(max-width:359px) and (max-height:650px){
 .hero>.eyebrow{font-size:11px;line-height:1.3}
 .hero h1{font-size:22px;line-height:1.15}
 .hero .hero-subtitle{font-size:14px;line-height:1.4}
 .hero>.hero-seals{font-size:12px;line-height:1.35;margin-top:8px}
 .hero>.hero-purchase{margin-top:10px}
}