/* lojapremium.css — PACOTE PREMIUM DA LOJA (liquid glass iOS + ouro no cursor + carrossel)
   v1.1 — 2026-08-12

   v1.0 foi construida para pagina ESCURA e estava errada: a loja declara data-theme="dark"
   mas RENDERIZA CLARA — um bloco `:root:root` da folha dela pinta fundo creme
   rgb(246,245,242) e cartoes brancos (padrao iFood, decisao de design ja no ar).
   v1.1 respeita esse idioma: o vidro e FROSTED BRANCO, nao vidro escuro.

   Especificidade: aquele bloco usa `:root:root .card` (0,3,0). Para o vidro valer sem
   apagar o resto, aqui se usa `:root:root[data-premium019] .card` (0,4,0) + !important
   pontual. Loja fora do mapa PREMIUM019 nao carrega este arquivo e nao muda em nada. */

:root:root[data-premium019]{
  --lp-ouro:#EFA017;
  --lp-ouro-d:#A86305;
  --lp-borda:rgba(255,255,255,.86);
  --lp-rim:rgba(154,100,0,.16);
  --lp-tinta:#3F3C36;
  --lp-mut:#6B6862;
}

/* ---------- camada de ambiente: e ela que da o que refratar ----------
   Sem nada atras, "vidro fosco" sobre cor chapada e so um cartao branco.
   Estes tres halos suaves ficam ATRAS de tudo e aparecem borrados atraves do vidro. */
.lp-ambiente{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% 8%,  rgba(239,160,23,.16), transparent 62%),
    radial-gradient(760px 560px at 88% 22%, rgba(198,138,40,.14), transparent 60%),
    radial-gradient(820px 640px at 62% 96%, rgba(255,214,130,.15), transparent 64%);
}
:root:root[data-premium019] .wrap,
:root:root[data-premium019] .crumb{position:relative;z-index:1}

/* ---------- vidro liquido (frosted branco) ---------- */
:root:root[data-premium019] .card,
:root:root[data-premium019] .sobre,
:root:root[data-premium019] .infobox,
:root:root[data-premium019] .faq,
:root:root[data-premium019] .dif li,
:root:root[data-premium019] .lp-nw,
:root:root[data-premium019] .lp-ig{
  position:relative;
  background:linear-gradient(152deg,rgba(255,255,255,.90),rgba(255,255,255,.66) 48%,rgba(255,248,235,.82))!important;
  -webkit-backdrop-filter:blur(20px) saturate(180%)!important;
  backdrop-filter:blur(20px) saturate(180%)!important;
  border:1px solid var(--lp-borda)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px var(--lp-rim),
    0 18px 40px -26px rgba(78,56,10,.55)!important;
  border-radius:18px!important;
  isolation:isolate;
}
:root:root[data-premium019] .card{overflow:hidden}

/* reflexo especular de topo — o que faz o olho ler "vidro" e nao "cartao branco" */
:root:root[data-premium019] .card::before,
:root:root[data-premium019] .lp-nw::before,
:root:root[data-premium019] .lp-ig::before{
  content:'';position:absolute;left:0;right:0;top:0;height:44%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));
  border-radius:18px 18px 46% 46%/18px 18px 20% 20%;
}
:root:root[data-premium019] .card>*,
:root:root[data-premium019] .lp-nw>*,
:root:root[data-premium019] .lp-ig>*{position:relative;z-index:1}

/* brilho de ouro que acompanha o mouse dentro do cartao (--mx/--my vem do JS) */
:root:root[data-premium019] .card::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(239,160,23,.22),transparent 64%);
  opacity:0;transition:opacity .35s ease;
}
:root:root[data-premium019] .card:hover::after{opacity:1}
:root:root[data-premium019] .card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
:root:root[data-premium019] .card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(154,100,0,.26),0 26px 52px -28px rgba(78,56,10,.7)!important;
}

/* faisca de ouro global no cursor — camada fixa, jamais intercepta clique */
.lp-faisca{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .45s ease;mix-blend-mode:multiply;
  background:radial-gradient(360px circle at var(--gx,-600px) var(--gy,-600px),
    rgba(233,169,48,.20),rgba(239,160,23,.09) 40%,transparent 70%);
}
.lp-faisca.on{opacity:1}

/* ---------- carrossel de noticias ---------- */
:root:root[data-premium019] .lp-nw{padding:16px 0 6px;margin:18px 0 4px;border-radius:20px!important}
.lp-nwtop{display:flex;align-items:center;gap:10px;padding:0 18px 12px;flex-wrap:wrap}
.lp-nwtop h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:#17161A}
.lp-nwfonte{font-size:11.5px;color:var(--lp-mut);display:flex;align-items:center;gap:5px}
.lp-nwfonte a{color:#8A5E04;text-decoration:none;font-weight:700;display:inline-block;padding:12px 6px;margin:-12px -6px;border-radius:8px}
.lp-nwsetas{margin-left:auto;display:flex;gap:7px}
.lp-seta{
  width:38px;height:38px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,246,230,.7));
  border:1px solid rgba(154,100,0,.22);color:#7A5203;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px -5px rgba(78,56,10,.5);
  transition:transform .18s ease,filter .18s ease;
}
.lp-seta:hover{filter:brightness(1.04);transform:translateY(-1px)}
.lp-seta:active{transform:scale(.92)}
.lp-seta:disabled{opacity:.32;cursor:default;transform:none}
.lp-seta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.lp-trilho{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 18px 16px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.lp-trilho::-webkit-scrollbar{display:none}
.lp-nt{
  flex:0 0 268px;scroll-snap-align:start;border-radius:16px;overflow:hidden;text-decoration:none;
  color:var(--lp-tinta);display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,250,242,.82));
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(154,100,0,.12),0 12px 26px -20px rgba(78,56,10,.6);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease;
}
.lp-nt:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(154,100,0,.24),0 22px 40px -22px rgba(78,56,10,.7)}
.lp-ntimg{height:150px;background:#EDE7DC center/cover no-repeat;position:relative;flex-shrink:0}
.lp-ntimg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,6,.42),transparent 56%)}
.lp-ntcat{
  position:absolute;left:10px;top:10px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#A86305,#8A5E04);border:1px solid rgba(255,224,154,.45);
  text-shadow:0 1px 2px rgba(50,30,0,.55);
}
.lp-ntb{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lp-ntb h3{margin:0;font-size:14px;line-height:1.35;font-weight:750;color:#17161A;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-ntd{font-size:11.5px;color:var(--lp-mut);margin-top:auto;display:flex;align-items:center;gap:6px}
.lp-ntd b{color:#8A5E04;font-weight:700}

/* ---------- ponte do Instagram ---------- */
:root:root[data-premium019] .lp-ig{padding:18px;margin:18px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:20px!important}
.lp-igmark{
  width:56px;height:56px;border-radius:17px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F9CE34,#EE2A7B 48%,#6228D7);
  box-shadow:0 8px 20px -8px rgba(238,42,123,.6),inset 0 1px 0 rgba(255,255,255,.45);
}
.lp-igmark svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2}
.lp-igt{flex:1;min-width:170px}
.lp-igt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:#17161A}
.lp-igt span{display:block;font-size:12.5px;color:var(--lp-mut);margin-top:3px}
.lp-igbtns{display:flex;gap:9px;flex-wrap:wrap}
.lp-igb{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  padding:11px 16px;border-radius:12px;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#A86305 0%,#96590A 45%,#8A5E04 100%);
  border:1px solid rgba(255,224,154,.42);
  text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 1px rgba(58,34,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 6px rgba(58,34,0,.4),0 6px 16px -7px rgba(38,22,0,.6);
  transition:transform .2s ease,filter .2s ease;
}
.lp-igb.alt{
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,246,230,.75));
  border:1px solid rgba(154,100,0,.24);color:#7A5203;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px -6px rgba(78,56,10,.5);
}
.lp-igb:hover{transform:translateY(-2px);filter:brightness(1.05)}
.lp-igb:active{transform:scale(.96)}
.lp-igb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

@media(max-width:560px){
  .lp-nt{flex:0 0 78vw}
  .lp-nwsetas{display:none}
  .lp-trilho{padding-left:14px;padding-right:14px}
  .lp-nwtop{padding:0 14px 10px}
  :root:root[data-premium019] .lp-ig{padding:15px;gap:13px}
}
@media(prefers-reduced-motion:reduce){
  .lp-faisca{display:none}
  :root:root[data-premium019] .card,.lp-nt,.lp-igb,.lp-seta{transition:none!important}
  :root:root[data-premium019] .card:hover,.lp-nt:hover{transform:none!important}
  .lp-trilho{scroll-behavior:auto}
}