/* ============================================================
   MODERNO.CSS — camada de acabamento moderno (20/09/2026)
   Regra: NAO mexe em imagens de fundo, hero nem no efeito dele.
   So polimento: tipografia, cards, botoes, menu, ranking, rolagem.
   Pra desligar: remover o <link> deste arquivo no index.html.
   ============================================================ */

/* --- base --- */
html{scroll-behavior:smooth}
::selection{background:rgba(232,180,90,.35);color:#fff}
html{scrollbar-color:rgba(232,180,90,.45) #0b0705;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0705}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(232,180,90,.55),rgba(232,180,90,.25));border-radius:8px;border:2px solid #0b0705}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffd37a,rgba(232,180,90,.5))}

/* --- menu: sublinhado dourado animado + sombra quando rola --- */
nav.links a{position:relative;padding:6px 0;transition:color .2s ease}
nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav.links a:hover::after{transform:scaleX(1)}
header.nav{transition:box-shadow .3s ease,border-color .3s ease}
header.nav.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45);border-bottom-color:rgba(232,180,90,.32)}

/* --- titulos de secao: ouro em degrade + tracos laterais no kicker --- */
.sec-head h2{background:linear-gradient(180deg,#ffd37a 0%,#e8b45a 55%,#c9973f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;text-shadow:none}
.sec-head:hover h2{text-shadow:none;filter:drop-shadow(0 0 14px rgba(232,180,90,.35))}
.sec-head .kicker{display:inline-flex;align-items:center;gap:12px}
.sec-head .kicker::before,.sec-head .kicker::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--red-bright));opacity:.8}
.sec-head .kicker::after{background:linear-gradient(90deg,var(--red-bright),transparent)}
.sec-head p{line-height:1.65}

/* --- divisoria fina em degrade entre secoes (nao no hero/faixas que ja tem borda) --- */
section:not(.hero):not(.rates):not(.band){position:relative}
section:not(.hero):not(.rates):not(.band)::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,82%);height:1px;background:linear-gradient(90deg,transparent,rgba(232,180,90,.45),transparent);pointer-events:none}

/* --- cards: filete dourado no topo, relevo interno, sombra mais funda --- */
.card,.price,.rate,.ev-card,.vip,.conta-panel,#portalBox{position:relative;overflow:visible; /* 22/09: overflow:hidden cortava as etiquetas dos pacotes (top:-15px) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.38);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card::before,.price::before,.rate::before,.ev-card::before,.vip::before,.conta-panel::before,#portalBox::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,211,122,.7),transparent);pointer-events:none}
.card:hover,.price:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 46px rgba(0,0,0,.55),0 0 0 1px rgba(232,180,90,.22),0 0 34px rgba(232,180,90,.08)}
.price .tag{z-index:2}
.card .ic{transition:transform .25s ease,filter .25s ease}
.card:hover .ic{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(232,180,90,.45))}

/* --- botoes: relevo, foco visivel, clique --- */
.btn,.price .buy,.conta-tab,.soc,.nav .cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.35);letter-spacing:.2px}
.btn-primary,.nav .cta,.price .buy{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(23,132,58,.45);border:1px solid rgba(255,255,255,.10)}
.btn-primary:hover,.nav .cta:hover,.price .buy:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 36px rgba(23,132,58,.6),0 0 24px rgba(47,184,78,.35)}
.btn:active,.price .buy:active,.conta-tab:active,.nav .cta:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.price .buy:focus-visible,.conta-tab:focus-visible,.soc:focus-visible,.nav .cta:focus-visible,nav.links a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:10px}
.btn-ghost{border-color:rgba(232,180,90,.32)}
.btn-ghost:hover{border-color:rgba(232,180,90,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.4),0 0 22px rgba(232,180,90,.12)}

/* --- ranking: linhas com hover, zebra sutil --- */
.ranking-table tbody tr{transition:background .18s ease}
.ranking-table tbody tr:nth-child(even) td{background:rgba(232,180,90,.025)}
.ranking-table tbody tr:hover td{background:rgba(232,180,90,.07)}
.ranking-table td:first-child{font-weight:700;color:var(--gold-bright)}

/* --- entrada suave ao rolar (JS adiciona .reveal e depois .in) --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- rodape/social --- */
.soc{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.soc:hover{transform:translateY(-2px);border-color:rgba(232,180,90,.5)}

/* --- responsivo: kicker sem tracos em tela estreita --- */
@media (max-width:560px){.sec-head .kicker::before,.sec-head .kicker::after{width:18px}}