/* ============================================================
   /empresario — seção de preços "glass". Porte do componente
   React (pricing-glass) para CSS puro:
     - cartões de vidro com blur, borda interna e sombra profunda
     - card popular elevado, com borda cônica girando
     - spotlight que segue o mouse (JS só seta --mx/--my)
     - textura de ruído (feTurbulence em data-URI) por cima
     - alternador Mensal/Trimestral com indicador deslizante
   A paleta branca/neutra do original ganha o --accent laranja
   nos pontos de destaque (badge, borda girando, botão popular).
   Exclusivo desta página.
   ============================================================ */
@property --pg-angle{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }

#planos .pg-head{ text-align:center; max-width:760px; margin:0 auto; }
#planos .pg-head h2{ font-size:clamp(32px,4.2vw,52px); font-weight:600; letter-spacing:-.035em; line-height:1.06; margin-top:14px; }
#planos .pg-head p{ color:var(--text-dim); font-size:clamp(15px,1.7vw,18px); margin-top:16px; }

/* brilho grande e difuso atrás da seção */
#planos .pg-glow{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(900px,90vw); height:560px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,106,26,.10), transparent 70%);
  filter:blur(90px);
}
#planos .container{ position:relative; z-index:1; }

/* ── alternador Mensal / Trimestral ──────────────────────── */
/* sem `border` de propósito: a borda vira box-shadow inset para que
   offsetLeft (medido do border-box) e a propriedade `left` do indicador
   fiquem no mesmo referencial — senão o thumb desalinha pela largura da borda. */
#planos .pg-toggle{
  position:relative; display:inline-flex; align-items:center; margin-top:30px; padding:6px;
  border-radius:999px; background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 4px rgba(0,0,0,.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
#planos .pg-tab{
  position:relative; z-index:1; border:0; cursor:pointer; background:transparent;
  padding:11px 26px; border-radius:999px; font:inherit; font-size:14px; font-weight:600;
  color:var(--text-mute); transition:color .3s ease; white-space:nowrap;
}
#planos .pg-tab:hover{ color:var(--text-dim); }
#planos .pg-tab.is-on{ color:#fff; }
#planos .pg-save{
  margin-left:8px; padding:3px 8px; border-radius:999px;
  background:var(--accent); color:#0A0A0A; font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
/* posição e largura vêm do JS (left/width em px, mesmo referencial do
   offsetLeft das abas). `left:0` é só o ponto de partida antes do 1º cálculo. */
#planos .pg-thumb{
  position:absolute; z-index:0; top:6px; bottom:6px; left:0; width:0;
  border-radius:999px; background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.5);
  transition:left .38s cubic-bezier(.34,1.3,.64,1), width .38s cubic-bezier(.34,1.3,.64,1);
}

/* ── grade e cartões ─────────────────────────────────────── */
#planos .pg-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  align-items:stretch; margin-top:64px; position:relative; z-index:1;
}
#planos .pg-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:38px 32px; border-radius:32px;
  background:rgba(255,255,255,.012);
  backdrop-filter:blur(30px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.1);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15), 0 32px 64px -12px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.34,1.2,.64,1), box-shadow .5s ease;
}
/* card em destaque: elevado + aro cônico girando */
#planos .pg-card.is-popular{
  border-color:rgba(255,255,255,.18); transform:translateY(-16px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 32px 64px -12px rgba(0,0,0,.6), 0 0 80px rgba(255,106,26,.10);
}
#planos .pg-card.is-popular::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--pg-angle), transparent 68%, rgba(255,106,26,.85) 88%, rgba(255,190,140,.95) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
  animation:pgSpin 4s linear infinite;
}
@keyframes pgSpin{ to{ --pg-angle:360deg; } }

/* spotlight seguindo o mouse (JS seta --mx/--my) */
#planos .pg-card::after{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(600px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.11), transparent 72%);
  opacity:0; transition:opacity .5s ease;
}
#planos .pg-card:hover::after{ opacity:1; }
#planos .pg-card > *{ position:relative; z-index:1; }

/* textura de ruído por cima do vidro */
#planos .pg-noise{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* selo "Mais escolhido" pendurado no topo */
#planos .pg-badge{
  position:absolute; z-index:3; top:0; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:0 0 12px 12px;
  background:rgba(255,106,26,.16); border:1px solid rgba(255,106,26,.35); border-top:0;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:#ffb37a; white-space:nowrap;
}

/* ── conteúdo do cartão ──────────────────────────────────── */
#planos .pg-name{ font-size:19px; font-weight:600; color:rgba(255,255,255,.8); letter-spacing:.01em; }
#planos .pg-price{ display:flex; align-items:baseline; gap:5px; margin:16px 0 2px; }
#planos .pg-cur{ font-size:22px; font-weight:600; color:rgba(255,255,255,.4); }
#planos .pg-val{
  font-size:clamp(44px,5vw,58px); font-weight:700; letter-spacing:-.045em; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums;
}
/* odômetro (pricing-glass.js): cada dígito é uma janela de 1em com uma fita
   0–9 dentro; o ponto do milhar fica parado entre as janelas */
#planos .pg-val{ display:inline-flex; align-items:baseline; }
/* largura = dígito menos o letter-spacing do preço (-.045em): sem descontar,
   o número ficava mais aberto que o original */
#planos .pg-val .od-d{ display:inline-block; position:relative; width:calc(1ch - .045em); height:1em; overflow:hidden; }
#planos .pg-val .od-fita{ display:flex; flex-direction:column; align-items:center; will-change:transform;
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1); }
#planos .pg-val .od-fita > span{ display:block; height:1em; line-height:1; text-align:center; letter-spacing:0; }
/* enquanto rola, as bordas de cada janela esfumam — o dígito passa, não pisca */
#planos .pg-val.rolando .od-d{
  -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); }
@keyframes pgSwap{
  0%{ opacity:0; transform:translateY(26px); filter:blur(5px); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}
#planos .pg-per{ font-size:16px; font-weight:500; color:rgba(255,255,255,.4); margin-left:2px; }
#planos .pg-billed{ font-size:12px; color:var(--text-mute); min-height:16px; margin-top:2px; }
#planos .pg-desc{ color:rgba(255,255,255,.42); font-size:14px; line-height:1.6; margin-top:14px; min-height:44px; }
#planos .pg-rule{ height:1px; background:rgba(255,255,255,.10); margin:28px 0; }

#planos .pg-feats{ list-style:none; padding:0; margin:0 0 34px; display:flex; flex-direction:column; gap:15px; flex:1; }
#planos .pg-feats li{ display:flex; align-items:flex-start; gap:12px; }
#planos .pg-feats .ck{
  flex:none; width:21px; height:21px; margin-top:1px; border-radius:50%;
  display:grid; place-content:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2);
}
#planos .pg-card.is-popular .pg-feats .ck{ background:rgba(255,106,26,.22); border-color:rgba(255,106,26,.4); }
#planos .pg-feats .ck svg{ width:11px; height:11px; color:#fff; }
#planos .pg-feats span{ color:rgba(255,255,255,.72); font-size:14px; font-weight:500; line-height:1.4; }

#planos .pg-cta{
  display:block; width:100%; text-align:center; padding:16px 20px; border-radius:16px;
  font-size:15px; font-weight:600; cursor:pointer; margin-top:auto;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25);
  transition:transform .3s ease, background .3s ease;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); color:#fff;
}
#planos .pg-cta:hover{ background:rgba(255,255,255,.18); transform:scale(1.02); }
#planos .pg-card.is-popular .pg-cta{
  background:linear-gradient(180deg,#ff8a45,var(--accent)); border-color:transparent; color:#0A0A0A;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 12px 28px -10px rgba(255,106,26,.6);
}
#planos .pg-card.is-popular .pg-cta:hover{ background:linear-gradient(180deg,#ffa066,#ff7a30); transform:scale(1.02); }

@media (max-width:980px){
  #planos .pg-grid{ grid-template-columns:1fr; gap:20px; margin-top:48px; }
  #planos .pg-card{ padding:32px 26px; }
  #planos .pg-card.is-popular{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  #planos .pg-card.is-popular::before{ animation:none; }
  #planos .pg-val .od-fita{ transition:none; }
}