/* Rodada 11 (10/11/2026): preço da hero com movimento, "Produtos selecionados" lado a lado
   e a pergunta da higienização com Sterily. Seletores longos (html body #...) porque o design
   tem muitas regras antigas com !important. */

/* 1) Preço da hero: "16" azul claro, ",90" branco, caixa 12% maior.
   Usa a propriedade scale (não transform): a entrada da caixa anima transform e anularia o aumento.
   Não muda o position da caixa (mudar tira a caixa do lugar). O backdrop-filter que ela já tem
   segura o brilho e a borda (elementos absolutos) dentro dela. */
html body #topo .hb-visual .hb-price{scale:1.12;transform-origin:left center;margin-bottom:6px;overflow:hidden;isolation:isolate}
html body #topo .hb-visual .hb-price > span{position:relative;z-index:1}
html body #topo .hb-visual .hb-price .hp-v .hp-16{color:#7DB6FF!important;display:inline-block;transform-origin:50% 80%;animation:hpPulo 4.2s 2.6s cubic-bezier(.3,1.4,.5,1) infinite}
html body #topo .hb-visual .hb-price .hp-v .hp-90{color:#FFFFFF!important}

/* 2) Etiqueta que troca de "Lavagem ou secagem" para "Menor preço da região" */
html body #topo .hb-price .hp-k{transition:opacity .25s ease}
html body #topo .hb-price .hp-k.hp-out{opacity:0}
html body #topo .hb-price .hp-k.hp-swap{animation:hpSwap .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes hpSwap{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* 3) Movimento na caixa: brilho que atravessa, borda que acende e o "16" que dá um pulo — juntos, a cada 4,2 s */
html body #topo .hb-price .hp-shine,html body #topo .hb-price .hp-ring{position:absolute;pointer-events:none;z-index:0;display:block}
html body #topo .hb-price .hp-shine{top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:translateX(-170%) skewX(-12deg);animation:hpBrilho 4.2s 2.6s ease-in-out infinite}
html body #topo .hb-price .hp-ring{inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(125,182,255,0);animation:hpBorda 4.2s 2.6s ease-in-out infinite}
@keyframes hpBrilho{0%{transform:translateX(-170%) skewX(-12deg)}38%,100%{transform:translateX(330%) skewX(-12deg)}}
@keyframes hpBorda{0%,100%{box-shadow:inset 0 0 0 1px rgba(125,182,255,0),inset 0 0 0 rgba(77,151,255,0)}18%{box-shadow:inset 0 0 0 1.5px rgba(125,182,255,.95),inset 0 0 18px rgba(77,151,255,.45)}46%{box-shadow:inset 0 0 0 1px rgba(125,182,255,0),inset 0 0 0 rgba(77,151,255,0)}}
@keyframes hpPulo{0%,30%,100%{transform:none}14%{transform:translateY(-2px) scale(1.06)}}

/* 4) "Produtos selecionados": OMO e Comfort lado a lado */
html body .wg-band .wg-box{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;width:100%!important;max-width:350px!important;margin:0 auto!important;gap:14px!important}
html body .wg-band .wg-box .wg-arrive{flex:0 0 auto!important;width:auto!important;white-space:nowrap!important;text-align:left!important;line-height:1.35!important}
html body .wg-band .wg-box .wg-arrive strong{display:block}
html body .wg-band .wg-box .brand-row{display:grid!important;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;justify-items:center;column-gap:12px;min-width:150px;width:auto!important;flex:0 1 auto!important;padding:0!important}
html body .wg-band .wg-box .brand-row img[alt="OMO"]{height:34px!important;max-height:34px!important;width:auto!important}
html body .wg-band .wg-box .brand-row img[alt="Comfort"]{height:24px!important;max-height:24px!important;width:auto!important}
html body .wg-band .wg-box .brand-row .br-div{display:block;width:1px;height:28px;background:#E6EAEF}

/* 6) Pergunta "Higienização das máquinas" (Sterily), última da lista */
html body #perguntas .faq-list details.faq-sterily{margin-top:14px!important;background:#fff!important;border:0!important;border-radius:20px!important;box-shadow:inset 0 0 0 1px #DCE6F5,0 14px 30px -20px rgba(0,60,150,.45)!important;overflow:hidden}
html body #perguntas .faq-list details.faq-sterily > summary{display:flex!important;align-items:center!important;gap:12px!important;min-height:0!important;padding:12px!important;list-style:none;cursor:pointer}
html body #perguntas .faq-list details.faq-sterily > summary::-webkit-details-marker{display:none}
html body #perguntas .faq-list details.faq-sterily > summary::after,html body #perguntas .faq-list details.faq-sterily > summary::before{display:none!important;content:none!important}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-logo{flex:none;width:58px;height:44px;border-radius:14px;background:#F4F6F8;display:grid!important;place-items:center;overflow:hidden}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-logo img{max-width:46px;max-height:34px;width:auto;height:auto;object-fit:contain}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-t{flex:1;min-width:0;display:flex!important;flex-direction:column;gap:2px;font:700 14px/1.3 Montserrat,sans-serif;color:#14181D}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-t small{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#0062E0}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-btn{flex:none;width:34px!important;height:34px!important;border-radius:50%!important;background:#0062E0!important;color:#fff!important;display:grid!important;place-items:center;box-shadow:0 8px 16px -8px rgba(0,98,224,.8)!important;transition:transform .45s cubic-bezier(.3,1.25,.5,1),background-color .3s ease}
html body #perguntas .faq-list details.faq-sterily > summary > .fs-btn svg{width:16px;height:16px}
html body #perguntas .faq-list details.faq-sterily[open] > summary > .fs-btn{background:#14181D!important;transform:rotate(45deg)}
html body #perguntas .faq-list details.faq-sterily > .faq-body{padding:0 16px 16px 82px!important}
html body #perguntas .faq-list details.faq-sterily > .faq-body b{color:#0062E0;font-weight:800}

@media (prefers-reduced-motion:reduce){
  html body #topo .hb-price .hp-shine,html body #topo .hb-price .hp-ring{animation:none;display:none}
  html body #topo .hb-visual .hb-price .hp-v .hp-16,html body #topo .hb-price .hp-k.hp-swap{animation:none}
  html body #perguntas .faq-list details.faq-sterily > summary > .fs-btn{transition:none}
}