/* Landing Grupos de Ofertas (.lpg), sobre o landing.css. Telas: painel com barras divergentes,
   ofertas com reações e saídas, ranking de membros, mapa de horários e aparelhos conectados. */

.lpg{--ent:#0A5BF0;--sai:#E0573E;--sai-forte:#B8341F;--sai-50:#FDEDEA}
.lpg-hero-cta{margin-top:32px}
.lpg-manual{margin-top:28px !important;font-size:16px}
.lpg-manual a{color:var(--azul);font-weight:600}
.lpg-hero-cta .lp-btn{min-height:56px;padding:0 26px;font-size:17px}

/* ------------------------------------------------------------ painel (KPIs + gráfico) */
.lpg-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 18px 6px}
.lpg-kpis div{padding:12px;border-radius:14px;background:var(--fundo-2)}
.lpg-kpis small{display:block;font-size:12px;color:var(--ink-3)}
.lpg-kpis b{display:block;font-size:24px;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.lpg-kpis b.ok::before,.lpg-kpis b.v::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:4px;background:var(--ent)}.lpg-kpis b.v::before{background:var(--sai)}
.lpg-graf-caixa{position:relative;padding:8px 18px 20px}
.lpg-leg{display:flex;gap:16px;font-size:12.5px;color:var(--ink-3);margin:6px 0 8px}
.lpg-leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lpg-leg .ent::before{background:var(--ent)}.lpg-leg .sai::before{background:var(--sai)}
.lpg-graf{display:block;width:100%;height:auto}
.lpg-graf-eixo{stroke:var(--linha-2);stroke-width:1}
.lpg-b-ent{fill:var(--ent)}
.lpg-b-sai{fill:var(--sai)}
.lpg-b-sai.pico{fill:var(--sai-forte)}
.lpg-graf-nota{position:absolute;left:calc(18px + 26%);bottom:10px;font-size:12px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--sai);border-radius:999px;padding:3px 10px;white-space:nowrap}
@media(max-width:560px){.lpg-kpis{grid-template-columns:1fr 1fr}.lpg-graf-nota{position:static;display:inline-block;margin-top:8px;white-space:normal}}

/* ------------------------------------------------------------ ofertas */
.lpg-ofertas{padding-bottom:6px}
.lpg-of{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;padding:14px 18px;border-top:1px solid var(--linha)}
.lpg-of img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#EEEDEA}
.lpg-of p{font-size:14.5px !important;line-height:1.4;color:var(--ink) !important;font-weight:500}
.lpg-of small{font-size:12px;color:var(--ink-3)}
.lpg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lpg-chips span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--fundo-3);color:var(--ink-2)}
.lpg-chips span.v{background:var(--sai-50);color:var(--sai-forte)}
.lpg-of.ruim{background:linear-gradient(90deg,var(--sai-50),#fff 70%)}

/* ------------------------------------------------------------ membros */
.lpg-membros ol{list-style:none;margin:0;padding:10px 40px 4px 18px}
.lpg-membros li{display:grid;grid-template-columns:34px 110px 1fr 34px;gap:10px;align-items:center;padding:8px 0}
.lpg-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#DCEFE9;color:#0F766E;font-size:12px;font-weight:700}
.lpg-membros li b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpg-membros li i{height:8px;border-radius:4px;background:var(--fundo-3);position:relative;overflow:hidden}
.lpg-membros li i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:4px;background:#14A38B}
.lpg-membros li em{font-style:normal;font-weight:600;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.lpg-silencio{display:flex;align-items:baseline;gap:10px;margin:8px 18px 18px;padding:14px 16px;border-radius:14px;background:var(--fundo-2)}
.lpg-silencio b{font-size:26px;letter-spacing:-.03em}
.lpg-silencio span{font-size:13.5px;color:var(--ink-2)}

/* ------------------------------------------------------------ mapa de horários */
.lpg-grade{display:grid;grid-template-columns:34px repeat(16,1fr);gap:3px;padding:16px 18px 20px;align-items:center}
.lpg-hr{font-size:11px;color:var(--ink-3)}
.lpg-dia{font-size:12px;color:var(--ink-2);font-weight:600}
.lpg-grade i{aspect-ratio:1;border-radius:4px;background:rgb(190 24 93 / calc(var(--v) * .94 + .06))}
.lpg-grade i.top{outline:3px solid var(--ink);outline-offset:1.5px;position:relative;z-index:1}

/* ------------------------------------------------------------ aparelhos conectados */
.lpg-apar{background:#fff;border-radius:22px;box-shadow:var(--sombra);overflow:hidden}
.lpg-apar-cab{padding:18px 20px;background:#F0F2F5;border-bottom:1px solid var(--linha)}
.lpg-apar-cab b{display:block;font-size:16px}
.lpg-apar-cab small{font-size:12.5px;color:var(--ink-3)}
.lpg-apar-l{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--linha)}
.lpg-apar-l b{display:block;font-size:14.5px}
.lpg-apar-l small{font-size:12.5px;color:#0A7D48;font-weight:600}
.lpg-apar-l.fraco small{color:var(--ink-3);font-weight:400}
.lpg-apar-ic{width:40px;height:40px;border-radius:50%;background:#E7F8EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7D48' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E") center/20px no-repeat}
.lpg-apar-ic.pc{background-color:var(--fundo-3);filter:grayscale(1)}
.lpg-apar-nota{padding:14px 20px 18px;font-size:12.5px !important;color:var(--ink-3) !important}

/* ------------------------------------------------------------ movimento */
@media(prefers-reduced-motion:no-preference){
  .lp-js [data-palco] .lpg-b-ent,.lp-js [data-palco] .lpg-b-sai{transform:scaleY(0);transition:transform .6s var(--ease);transition-delay:calc(var(--i,0) * 45ms + 250ms)}
  .lp-js [data-palco] .lpg-b-ent{transform-origin:center 118px;transform-box:view-box}
  .lp-js [data-palco] .lpg-b-sai{transform-origin:center 122px;transform-box:view-box}
  .lp-js [data-palco].on .lpg-b-ent,.lp-js [data-palco].on .lpg-b-sai{transform:none}
  .lp-js [data-palco] .lpg-of,.lp-js [data-palco] .lpg-membros li{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .55s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 250ms)}
  .lp-js [data-palco].on .lpg-of,.lp-js [data-palco].on .lpg-membros li{opacity:1;transform:none}
  .lp-js [data-palco] .lpg-membros li i::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 450ms)}
  .lp-js [data-palco].on .lpg-membros li i::after{transform:none}
  .lp-js [data-palco] .lpg-grade i.top{animation:lpg-pulso 2.4s ease-out 1.2s 2}
  @keyframes lpg-pulso{0%{box-shadow:0 0 0 0 rgb(11 16 51 / .35)}100%{box-shadow:0 0 0 10px rgb(11 16 51 / 0)}}
}
/* Plano único (06/10/2026): um cartão centralizado no lugar da grade de três. */
.lpg-plano-unico .esa-planos-grade{grid-template-columns:minmax(0,440px);justify-content:center}