/* AXIS Finanças, Frente 26 (rodada 5): cartões de crédito. Tokens do fin.css; tudo escopado em .r526-* */

/* resumo do topo */
.r526-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;border-radius:var(--r);overflow:hidden;
  background:var(--linha);box-shadow:var(--sombra),0 0 0 1px var(--linha)}
.r526-resumo>div{display:flex;flex-direction:column;gap:3px;padding:14px 14px 13px;background:linear-gradient(180deg,var(--card),var(--card-2))}
.r526-resumo small{font:550 11.5px var(--f);color:var(--mudo)}
.r526-resumo>div>b{font:650 19px var(--f);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.r526-resumo .nota{font-size:11.5px}

/* carteira: os cartões lado a lado, arrasta no celular */
/* a carteira vai até a borda da coluna e esmaece nas laterais, para a sombra dos cartões não terminar num corte reto */
.r526-carteira{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;padding:12px 16px 44px;margin:-6px -16px -34px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.r526-carteira::-webkit-scrollbar{display:none}
.r526-carteira:has(.r526-pl:only-child){justify-content:center}
.r526-pl{--mx:28%;--my:0%;position:relative;isolation:isolate;flex:none;width:min(340px,84%);aspect-ratio:1.586/1;scroll-snap-align:center;
  display:grid;grid-template-rows:auto 1fr auto auto auto;align-items:start;text-align:left;padding:17px 18px 15px;border:0;border-radius:18px;
  color:#fff;font:inherit;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;
  background:
    repeating-radial-gradient(circle at 115% 120%,rgba(255,255,255,.045) 0 1px,transparent 1px 7px),
    radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--c) 70%,#fff 30%) 0%,transparent 55%),
    linear-gradient(150deg,var(--c) 0%,color-mix(in srgb,var(--c) 72%,#0B0C20) 58%,color-mix(in srgb,var(--c) 45%,#05060F) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 2px rgba(11,12,32,.25),0 10px 22px -10px color-mix(in srgb,var(--c) 70%,transparent),0 26px 44px -22px rgba(11,12,32,.55);
  transition:transform 240ms cubic-bezier(.2,.7,.2,1),box-shadow 240ms cubic-bezier(.2,.7,.2,1),opacity 240ms,filter 240ms;opacity:.72;filter:saturate(.85);transform:scale(.965)}
.r526-pl.sel,.r526-pl:only-child{opacity:1;filter:none;transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1),
    0 2px 3px rgba(11,12,32,.22),0 16px 30px -12px color-mix(in srgb,var(--c) 80%,transparent),0 34px 60px -26px rgba(11,12,32,.7)}
.r526-pl:focus-visible{outline:2px solid var(--roxo);outline-offset:4px}
.r526-pl-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px 220px at var(--mx) var(--my),rgba(255,255,255,.26),rgba(255,255,255,.06) 40%,transparent 62%),
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 46%,transparent 54%);mix-blend-mode:soft-light;transition:background-position 200ms}
.r526-pl::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 30%,transparent 70%,rgba(0,0,0,.18))}
.r526-pl.claro{color:#16162E}
.r526-pl.claro .r526-pl-st{background:rgba(22,22,46,.1)}
.r526-pl-topo{display:flex;align-items:center;gap:8px;min-width:0}
.r526-pl-topo b{flex:1;min-width:0;font-size:15.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.r526-pl-st{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.17);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.r526-pl-al{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,196,92,.95);color:#4A2C00;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.r526-pl-al svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.r526-pl-meio{display:flex;align-items:center;gap:10px;margin-top:14px}
.r526-chip{width:40px;height:30px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.r526-nfc{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;opacity:.75}
.r526-pl-rot{font-size:12px;opacity:.78;margin-top:4px}
.r526-pl-val{font:650 26px var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.r526-pl-pe{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;opacity:.85;margin-top:6px}
.r526-pl-uso{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.r526-pl.claro .r526-pl-uso{background:rgba(22,22,46,.15)}
.r526-pl-uso i{display:block;height:100%;border-radius:3px;background:rgba(255,255,255,.9);transition:width 600ms cubic-bezier(.2,.7,.2,1)}
.r526-pl.claro .r526-pl-uso i{background:#16162E}
.r526-pl-uso i.at{background:#FFC45C}.r526-pl-uso i.cr{background:#FF8A7A}
.r526-pontos{position:relative;display:flex;justify-content:center;gap:6px;margin-top:2px}
.r526-pontos i{width:6px;height:6px;border-radius:3px;background:var(--linha-2);transition:width 200ms,background 200ms}
.r526-pontos i.sel{width:18px;background:var(--roxo)}

/* detalhe do cartão escolhido */
.r526-det{display:flex;flex-direction:column;gap:12px}
.r526-entra>*{animation:r526-sobe 260ms cubic-bezier(.2,.7,.2,1) both}
.r526-entra>*:nth-child(2){animation-delay:30ms}.r526-entra>*:nth-child(3){animation-delay:60ms}.r526-entra>*:nth-child(4){animation-delay:90ms}.r526-entra>*:nth-child(n+5){animation-delay:120ms}
@keyframes r526-sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.r526-entra>*{animation:none}.r526-pl{transition:none}}
.r526-acoes{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:8px}
.r526-acoes .btn{padding-left:8px;padding-right:8px;white-space:nowrap}
.r526-sec{display:flex;flex-direction:column;gap:10px}
.r526-sec>h2{margin:0}
.r526-h-v{font:600 13px var(--f);color:var(--fg-2);font-variant-numeric:tabular-nums}
.r526-h-v small,.r526-h-v{white-space:nowrap}
.r526-h-v small{font-size:12px;color:var(--mudo);font-weight:500}
.r526-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.r526-grade>div{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:13px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linha)}
.r526-grade span{font-size:11.5px;color:var(--mudo)}
.r526-grade b{font:650 14.5px var(--f);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.r526-sec .nota{margin:0}

/* alertas */
.r526-alertas{display:flex;flex-direction:column;gap:8px}
.r526-al{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;font-size:13.5px;line-height:1.4;
  background:var(--at-s);color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--at) 28%,transparent)}
.r526-al.cr{background:var(--cr-s);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cr) 28%,transparent)}
.r526-al p{margin:0}
.r526-al svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--at);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r526-al.cr svg{stroke:var(--cr)}

/* limite em partes */
.r526-barra{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--bg-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.r526-barra i{display:block;height:100%;transform-origin:left;animation:r526-cresce 650ms cubic-bezier(.2,.7,.2,1) both}
.r526-barra i+i{box-shadow:inset 1px 0 0 rgba(255,255,255,.5)}
.r526-barra i.a,.r526-leg i.a{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c))}
.r526-barra i.b,.r526-leg i.b{background:color-mix(in srgb,var(--c) 55%,var(--card))}
.r526-barra i.c,.r526-leg i.c{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 40%,var(--card)) 0 4px,color-mix(in srgb,var(--c) 22%,var(--card)) 4px 8px)}
.r526-barra.at i.a,.r526-leg.at i.a{background:linear-gradient(180deg,#F0A44A,#D9822B)}.r526-barra.cr i.a,.r526-leg.cr i.a{background:linear-gradient(180deg,#E96A5B,var(--cr))}
@keyframes r526-cresce{from{transform:scaleX(0)}to{transform:none}}
.r526-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--fg-2)}
.r526-leg span{display:inline-flex;align-items:center;gap:6px}
.r526-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.r526-leg i.d{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--linha-2)}
.r526-leg b{font-variant-numeric:tabular-nums;color:var(--fg)}

/* melhor dia */
.r526-dia{display:flex;gap:14px;align-items:center}
.r526-cal{flex:none;width:66px;border-radius:15px;overflow:hidden;text-align:center;background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 1px var(--linha-2),0 8px 18px -8px rgba(22,22,46,.3)}
.r526-cal small{display:block;padding:4px 0 3px;font:650 11px var(--f);color:#fff;background:linear-gradient(180deg,#9352FF,#6E25E0)}
.r526-cal b{display:block;padding:5px 0 7px;font:700 27px var(--f);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.r526-dia-t{display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.45;min-width:0}
.r526-dia-t p{margin:0}

/* próximas faturas */
.r526-graf{min-height:190px}
.r526-prox{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center}
.r526-prox span{display:flex;flex-direction:column;gap:1px;padding:6px 2px;border-radius:10px}
.r526-prox span.atual{background:var(--roxo-s)}
.r526-prox small{font-size:11px;color:var(--mudo)}
.r526-prox b{font:600 11.5px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* parcelas futuras */
.r526-parcs{display:flex;flex-direction:column;gap:6px}
.r526-parc{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linha)}
.r526-anel{--p:0;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,var(--card) 76%,transparent 78% 100%),conic-gradient(var(--roxo) calc(var(--p)*360deg),var(--bg-2) 0)}
.r526-anel b{font:650 11px var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.r526-parc .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r526-parc .t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r526-parc .t small,.r526-parc .v small{font-size:11.5px;color:var(--mudo)}
.r526-parc .v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.r526-parc .v b{font:650 14px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap}

/* formulário do cartão */
.r526-cores{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.r526-cor{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.2);transition:transform 160ms}
.r526-cor:hover{transform:scale(1.08)}
.r526-cor[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--roxo)}
.r526-cores input[type=color]{width:38px;height:30px;padding:0;border-radius:9px}
.r526-pisca{animation:r526-pisca 700ms ease}
@keyframes r526-pisca{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px var(--roxo-m)}}

/* aviso no Início */
.r526-ini-al{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:13px;text-decoration:none;color:var(--fg);font-size:13px;background:var(--at-s)}
.r526-ini-al.cr{background:var(--cr-s)}
.r526-ini-al span{flex:1}
.r526-ini-al svg{width:16px;height:16px;fill:none;stroke:var(--at);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r526-ini-al.cr svg{stroke:var(--cr)}

@media (max-width:420px){
  .r526-resumo{grid-template-columns:1fr 1fr}
  .r526-resumo>div:last-child:nth-child(odd){grid-column:1/-1}
  .r526-acoes{grid-template-columns:1fr 1fr 1fr}
  .r526-acoes .ct-compra{grid-column:1/-1}
  .r526-grade{grid-template-columns:1fr 1fr}
  .r526-pl{width:86%;padding:15px 16px 14px}
  .r526-pl-val{font-size:24px}
  .r526-prox b{font-size:10.5px}
}