/* Faixa que passa para o lado: clicável, abre a lista completa */
.marquee[role=button]{cursor:pointer;position:relative}
.marquee[role=button]:focus-visible{outline:3px solid #fff;outline-offset:3px}
.faixa-ver{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 8px;border-radius:99px;background:#fff;color:var(--verde,#014634);font-family:var(--f-texto,'Manrope',sans-serif);font-weight:800;font-size:14px;line-height:1;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.2);animation:faixa-pulso 2.4s ease-in-out infinite}
.faixa-ver b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--verde,#014634);color:#fff;font-size:16px;line-height:1;font-weight:800}
@keyframes faixa-pulso{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.06)}}
.marquee[role=button]:hover .faixa-ver{background:var(--verde,#014634);color:#fff}
.marquee[role=button]:hover .faixa-ver b{background:#fff;color:var(--verde,#014634)}

.faixa-modal{position:fixed;inset:0;z-index:300;background:rgba(10,22,15,.7);display:none;align-items:center;justify-content:center;padding:18px}
.faixa-modal.aberto{display:flex}
.faixa-folha{position:relative;width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fffdf6;border-radius:22px;padding:28px 22px 22px;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:faixa-sobe .3s cubic-bezier(.2,.8,.2,1)}
@keyframes faixa-sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.faixa-folha h2{font-family:var(--f-titulo,'Caprasimo',serif);font-weight:400;font-size:clamp(26px,5vw,32px);line-height:1.08;color:var(--verde,#014634);padding-right:44px;margin-bottom:6px}
.faixa-sub{margin:0 0 14px;font-size:15px;line-height:1.45;color:#4a5342}
.faixa-fechar{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#eee9da;color:var(--verde,#014634);font-size:28px;line-height:1;cursor:pointer}
.faixa-lista{list-style:none;margin:16px 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.faixa-lista li{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:14px;border:1.5px solid rgba(0,0,0,.12);background:#fff;font-weight:700;font-size:15.5px;line-height:1.25;color:var(--verde,#014634)}
.faixa-lista li{--emb-s:var(--estrela,var(--laranja,#ed8641))}
.faixa-lista li svg{flex:none;width:24px;height:24px}
.faixa-cta{width:100%;justify-content:center;min-height:52px}
@media (max-width:520px){
  .faixa-modal{align-items:flex-end;padding:0}
  .faixa-folha{width:100%;max-height:88vh;border-radius:24px 24px 0 0;padding:26px 16px calc(18px + env(safe-area-inset-bottom))}
  .faixa-lista li{font-size:14.5px;min-height:48px;padding:8px 10px}
  .faixa-ver{right:6px;padding:6px 11px 6px 6px;font-size:13px}
}

/* só o mais, redondo e bem clicável */
.faixa-ver{width:46px;height:46px;padding:0;gap:0;justify-content:center;border-radius:50%;right:12px}
.faixa-ver b{width:34px;height:34px;font-size:26px;font-weight:700;padding-bottom:2px}
@media (max-width:520px){.faixa-ver{width:44px;height:44px;right:8px;padding:0}.faixa-ver b{width:32px;height:32px;font-size:24px}}

/* separadores da faixa: o desenho do emblema da marca no lugar da estrela */
.marquee i.emb{font-size:0;opacity:1;padding:0 22px;display:inline-flex;align-items:center;transform:none;--emb-s:currentColor}
.marquee i.emb svg{width:26px;height:26px}
@media (max-width:900px){.marquee i.emb{padding:0 16px}.marquee i.emb svg{width:22px;height:22px}}

/* a faixa agora é rolável: o movimento vem do JavaScript, e a pessoa pode arrastar ou deslizar */
.marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.marquee::-webkit-scrollbar{display:none}
.marquee .marquee-faixa{animation:none !important}
.marquee.arrastando{cursor:grabbing;user-select:none}
.marquee-caixa .faixa-ver{position:absolute;right:12px;top:calc(50% + 4px);transform:translateY(-50%);z-index:8;cursor:pointer}
@media (max-width:900px){.marquee-caixa .faixa-ver{top:calc(50% + 7px)}}
.marquee span,.marquee i{user-select:none;-webkit-user-select:none}