/* =====================================================
   COMPONENTES — elementos reutilizados em várias seções
   (bulbs, scallop, botão CTA, sticky CTA, reveal)
   ===================================================== */

/* ===== MARQUEE BULBS (mesma técnica robusta usada no card de plano) ===== */
.bulbs{position:relative}
.bulbs::after{
  content:"";
  position:absolute;inset:6px;
  border-radius:20px;
  border:5px dotted var(--gold);
  box-sizing:border-box;
  pointer-events:none;
  animation:twinkle 1.1s steps(2) infinite;
}
@keyframes twinkle{
  0%,100%{filter:brightness(1) drop-shadow(0 0 4px rgba(255,201,60,.9))}
  50%{filter:brightness(.55) drop-shadow(0 0 0 transparent)}
}
@media (prefers-reduced-motion:reduce){
  .bulbs::after{animation:none}
  .plan-frame::after{animation:none}
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ===== SCALLOP DIVIDERS (circus tent edge) =====
   background-color (o "fundo" atrás das reentrâncias) é definido inline em cada
   uso, pois precisa bater com a cor da seção que vem logo depois dele.
   margin -1px: em telas com devicePixelRatio fracionário (ex: 2.625x), essa borda
   pode cair num pixel físico não-inteiro e cada elemento arredonda pro seu lado,
   deixando uma linha de 1px do fundo da página visível entre as seções. Sobrepor
   1px em cima e embaixo garante que sempre haja cor cobrindo esse pixel. */
.scallop{height:26px;position:relative;z-index:4;margin:-1px 0}
.scallop.red{
  background-image:
    radial-gradient(circle at 26px 0, var(--red) 0 25.7px, transparent 26.3px),
    radial-gradient(circle at 26px 0, var(--red-dark) 0 25.7px, transparent 26.3px);
  background-size:104px 26px, 104px 26px;
  background-position:0 0, 52px 0;
  background-repeat:repeat-x, repeat-x;
}
.scallop.night{
  background-image:
    radial-gradient(circle at 26px 0, var(--blue-night) 0 25.7px, transparent 26.3px),
    radial-gradient(circle at 26px 0, var(--blue-deep) 0 25.7px, transparent 26.3px);
  background-size:104px 26px, 104px 26px;
  background-position:0 0, 52px 0;
  background-repeat:repeat-x, repeat-x;
}
.scallop.cream{
  background-image:
    radial-gradient(circle at 26px 0, var(--cream) 0 25.7px, transparent 26.3px),
    radial-gradient(circle at 26px 0, var(--cream-dark) 0 25.7px, transparent 26.3px);
  background-size:104px 26px, 104px 26px;
  background-position:0 0, 52px 0;
  background-repeat:repeat-x, repeat-x;
}

/* ===== BOTÃO CTA (usado no hero, planos e sticky) ===== */
.cta{
  display:inline-block;
  font-family:'Lilita One';
  font-size:clamp(1.15rem,3vw,1.5rem);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--blue-deep);
  background:linear-gradient(180deg,#FFE08A 0%,var(--gold) 55%,var(--gold-deep) 100%);
  padding:.85em 2.2em;
  border-radius:999px;
  border:none;cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 0 #B37E00, 0 14px 24px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative;
}
.cta:hover{transform:translateY(3px);box-shadow:0 5px 0 #B37E00, 0 10px 18px rgba(0,0,0,.3)}
.cta:focus-visible{outline:4px solid #fff;outline-offset:3px}
.cta.small{font-size:1.05rem;padding:.75em 1.8em}

/* ===== STICKY CTA (mobile) ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--red);
  padding:10px 14px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 -8px 24px rgba(0,0,0,.3);
  transform:translateY(110%);
  transition:transform .3s ease;
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .s-price{font-family:'Lilita One';color:var(--white);font-size:1.05rem;white-space:nowrap}
.sticky-cta .s-price small{display:block;font-size:.6em;color:#FFD9D9;font-family:'Baloo 2';font-weight:700}

/* ===== REVEAL ON SCROLL ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===== MODAL DE UPGRADE (Kit Aprendiz → Kit Mágico Oficial) ===== */
.upsell-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(22,15,61,.82);
  display:grid;place-items:center;
  padding:18px;overflow-y:auto;
  animation:upsellFade .25s ease;
}
.upsell-overlay[hidden]{display:none}
.upsell-modal{
  position:relative;
  width:min(430px,100%);
  background:linear-gradient(180deg,#FFF9EA 0%,var(--cream) 100%);
  color:var(--ink);
  border:4px solid var(--gold);
  border-radius:24px;
  padding:34px 26px 28px;
  text-align:center;
  box-shadow:0 12px 0 rgba(0,0,0,.3), 0 30px 60px rgba(0,0,0,.5);
  animation:upsellPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes upsellFade{from{opacity:0}to{opacity:1}}
@keyframes upsellPop{from{transform:scale(.82) translateY(24px);opacity:0}to{transform:none;opacity:1}}
.upsell-close{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;border-radius:50%;
  border:none;cursor:pointer;
  background:var(--cream-dark);color:#7A6690;
  font-size:1rem;font-weight:800;line-height:1;
  display:grid;place-items:center;
}
.upsell-close:hover{background:#EBD9B4}
.upsell-kicker{
  display:block;font-family:'Lilita One';
  color:var(--red);text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;margin-bottom:8px;
}
.upsell-modal h3{
  font-size:1.5rem;text-transform:uppercase;
  color:var(--blue-night);line-height:1.12;margin-bottom:10px;
}
.upsell-sub{font-weight:600;font-size:.95rem;color:#5A4A66;margin-bottom:16px}
.upsell-sub b{color:var(--red-dark)}
.upsell-list{
  list-style:none;text-align:left;
  display:flex;flex-direction:column;gap:9px;
  margin:0 auto 18px;
}
.upsell-list li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:.92rem}
.upsell-list li s{opacity:.5;font-size:.85em;margin-left:.3em}
.upsell-list .ck{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--green);color:var(--white);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
}
.upsell-list li.gift{
  background:rgba(255,201,60,.22);
  border:2px dashed var(--gold-deep);
  border-radius:12px;padding:9px 10px;
}
.upsell-list li.gift .ck{background:transparent;font-size:1.05rem}
.upsell-price{margin-bottom:18px}
.upsell-price .from{display:block;font-size:.88rem;font-weight:700;color:#9A88A8;text-decoration:line-through}
.upsell-price .now{font-family:'Lilita One';font-size:2.7rem;color:var(--red);line-height:1}
.upsell-price .now small{font-size:.45em;vertical-align:super}
.upsell-price .once{display:block;font-size:.8rem;font-weight:700;color:#7A6690}
.upsell-yes{
  display:block;
  background:linear-gradient(180deg,#FF8A8A 0%,var(--red) 55%,var(--red-dark) 100%);
  color:var(--white);
  box-shadow:0 8px 0 #5E0715, 0 14px 24px rgba(0,0,0,.35);
}
.upsell-yes:hover{box-shadow:0 5px 0 #5E0715, 0 10px 18px rgba(0,0,0,.3)}
.upsell-no{
  display:inline-block;margin-top:16px;
  font-weight:700;font-size:.85rem;color:#9A88A8;
  text-decoration:underline;cursor:pointer;
}
.upsell-no:hover{color:#7A6690}
.upsell-trust{margin-top:14px;font-size:.78rem;font-weight:700;color:#B0A0BE}