/* JSHOW • tema "SG" • 17/10/2026.
   Identidade visual do app SGJOGO (pedido do Jonas): só a cara, a organização da página é a mesma.
   As cinco cores principais continuam vindo do painel:
   --bg-outer (fundo), --bg-inner (caixas), --btn-bg (cartões), --btn-border (verde de ação), --text. */
:root{
  --green:var(--btn-border);
  --green-ink:#10140f;
  --yellow:#f7d24a;
  --yellow-2:#f2b33a;
  --hero:#17703b;
  --hero-2:#2c9a52;
  --muted:#a3a7ae;
  --line:#ffffff14;
  --ink:#ffffff;
  --radius:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;color-scheme:dark}
body{
  margin:0;min-height:100vh;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--bg-outer);
  background-image:radial-gradient(ellipse 90% 40% at 50% -8%,#7ee07a1f,transparent 70%);
  -webkit-font-smoothing:antialiased;
}
button,a{-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.wrap{
  position:relative;width:100%;max-width:532px;margin:auto;
  padding:18px 16px calc(184px + env(safe-area-inset-bottom));
}
body:has(#cookie[hidden]) .wrap{padding-bottom:48px}

/* topo: marca em itálico pesado, como o logo do SGJOGO */
.hero{position:relative;margin-bottom:22px}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 2px 0}
.brand-word{margin:0;color:var(--text);font-size:38px;line-height:1.05;font-weight:900;font-style:italic;letter-spacing:-1.5px;text-shadow:0 2px 0 #0006}
.brand-word span{color:var(--yellow);background:linear-gradient(180deg,var(--yellow),var(--yellow-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #0006)}
.brand-signal{display:flex;align-items:flex-end;gap:4px;height:24px;padding:0 2px}
.brand-signal i{display:block;width:5px;height:10px;background:var(--green);border-radius:3px}
.brand-signal i:nth-child(2){height:16px}
.brand-signal i:nth-child(3){height:24px}
.hero-rule{display:none}

/* "bem-vindo": cartão grafite (sem o fundo verde, pedido do Jonas 17/10) com uma luz verde que passeia */
.hero-stage{
  position:relative;overflow:hidden;margin-top:16px;
  display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:16px;align-items:center;
  padding:22px 18px;border-radius:var(--radius);
  background:var(--btn-bg);border:1px solid var(--line);
  box-shadow:0 10px 26px #0005;
}
.hero-stage::before{content:"";position:absolute;left:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#7ee07a26,transparent 65%);pointer-events:none;animation:glow-drift 9s ease-in-out infinite alternate}
.hero-stage::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);background-size:200% 100%;animation:line-run 3.5s linear infinite;pointer-events:none}
.hero-stage.no-banner{grid-template-columns:minmax(0,1fr)}
.hero-copy{position:relative;min-width:0}
h1{font-size:clamp(28px,8vw,40px);font-weight:900;line-height:1.05;letter-spacing:-1.2px;margin:0;color:#fff;overflow-wrap:anywhere}
.hero-copy h1::after{content:"";display:block;width:64px;height:10px;margin-top:14px;border-radius:999px;background:linear-gradient(110deg,var(--yellow-2) 0%,var(--yellow) 40%,#fff4c2 50%,var(--yellow) 60%,var(--yellow-2) 100%);background-size:250% 100%;box-shadow:0 3px 0 #b8861b;animation:bar-shimmer 3s ease-in-out infinite}
.banner{position:relative;display:block;width:112px;height:112px;aspect-ratio:1;object-fit:cover;border-radius:18px;box-shadow:0 8px 18px #0006;animation:float 5s ease-in-out infinite}

/* redes: círculos grafite */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-copy .socials{gap:8px;margin-top:18px}
.hero-copy .socials a{width:42px;height:42px}
.hero-copy .socials svg{width:20px;height:20px}
/* Faixa AO VIVO AGORA (em cima do bem-vindo; só aparece quando o Jonas liga no painel) */
.live-now{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 40px;align-items:center;gap:12px;margin-top:16px;padding:12px 14px 12px 16px;border-radius:16px;
  background:linear-gradient(110deg,#e0242b,#ff4b3e 55%,#e0242b);background-size:200% 100%;color:#fff;text-decoration:none;
  box-shadow:0 0 0 3px #ff4b3e33,0 8px 22px #e0242b55;animation:live-sweep 3s linear infinite}
.ln-dot{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 #fff9;animation:ping 1.4s ease-out infinite}
.ln-txt{display:flex;flex-direction:column;min-width:0}
.ln-txt b{font-size:17px;font-weight:900;letter-spacing:.5px;line-height:1.1}
.ln-txt small{font-size:12px;opacity:.92}
.ln-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#e0242b;font-size:15px;padding-left:3px}
.live-now:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes live-sweep{0%{background-position:0 0}100%{background-position:200% 0}}
.live-now[hidden]{display:none}
.socials a{display:grid;place-items:center;width:46px;height:46px;background:var(--bg-inner);color:var(--text);border:1px solid var(--line);border-radius:50%;transition:background .18s,border-color .18s,transform .18s}
.socials svg{display:block;width:22px;height:22px}

/* caixa do aviso de live: o estado fica óbvio (ATIVADO verde, DESATIVADO cinza, BLOQUEADO laranja) */
.live-box{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--bg-inner);animation:rise .5s cubic-bezier(.2,.8,.2,1) .45s backwards;transition:background .25s,border-color .25s}
.live-box[hidden]{display:none!important}
.lb-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ffffff10;font-size:20px}
.lb-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.lb-title{font-size:14px;font-weight:800;line-height:1.25}
.lb-sub{font-size:12px;line-height:1.45;color:var(--muted)}
.lb-btn{min-height:44px;min-width:96px;padding:10px 14px;border:0;border-radius:12px;font:800 13px/1.2 Inter,system-ui,sans-serif;cursor:pointer;background:var(--green);color:var(--green-ink);box-shadow:0 3px 0 #3f9a3c}
.lb-btn:disabled{opacity:.6;cursor:default}
.live-box[data-state=on]{border:2px solid var(--green);background:#7ee07a14}
.live-box[data-state=on] .lb-icon{background:var(--green)}
.live-box[data-state=on] .lb-title{color:#bff5bc}
.live-box[data-state=on] .lb-sub{color:#d6f5d4}
.live-box[data-state=on] .lb-btn{background:#33363c;color:#fff;box-shadow:none;border:1px solid #ffffff26}
.live-box[data-state=off] .lb-title{color:#e6e7ea}
.live-box[data-state=blocked]{border:2px solid #ff9f43;background:#ff9f4314}
.live-box[data-state=blocked] .lb-title{color:#ffc58a}
.live-box[data-state=blocked] .lb-sub{color:#ffe1c2}
.live-box[data-state=blocked] .lb-btn{background:#ff9f43;color:#2b1600;box-shadow:0 3px 0 #b86a1f}
.live-box[data-state=app] .lb-btn{background:var(--yellow);color:#2a1d02;box-shadow:0 3px 0 #b8861b}
@media(max-width:360px){.live-box{grid-template-columns:36px minmax(0,1fr)}.lb-btn{grid-column:1/-1;width:100%}}

/* sorteio ao vivo (só para quem tem o app): mesmo jeito da caixa do aviso de live, com borda amarela de destaque */
.sg-box{margin-top:14px;padding:16px;border-radius:18px;border:2px solid var(--yellow);background:linear-gradient(180deg,#f7d24a14,#f7d24a05 60%),var(--bg-inner);box-shadow:0 0 0 4px #f7d24a12;animation:rise .5s cubic-bezier(.2,.8,.2,1) .2s backwards}
.sg-box[hidden]{display:none!important}
.sg-head{display:flex;align-items:center;gap:12px}
.sg-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:linear-gradient(180deg,var(--yellow),var(--yellow-2));font-size:20px;box-shadow:0 3px 0 #b8861b}
.sg-title{margin:0;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:-.2px;color:#fff}
.sg-lead{margin:12px 0 0;font-size:15px;font-weight:600;line-height:1.45;color:#e6e7ea}
.sg-timer{display:inline-block;margin:10px 0 0;padding:6px 12px;border-radius:999px;background:#f7d24a1f;border:1px solid #f7d24a59;color:#f9dd78;font-size:14px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.sg-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.sg-field{display:flex;flex-direction:column;gap:6px}
.sg-field label{font-size:14px;font-weight:700;color:#fff}
.sg-field input{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid #ffffff33;border-radius:12px;background:#17181b;color:#fff;font:600 16px/1.3 Inter,system-ui,sans-serif;transition:border-color .18s,box-shadow .18s}
.sg-field input::placeholder{color:#8b9097;font-weight:500}
.sg-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #7ee07a40}
.sg-field.sg-bad input{border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b33}
.sg-field.sg-bad input:focus-visible{outline-color:#ff6b6b}
.sg-err{margin:0;color:#ff9b93;font-size:13px;font-weight:700;line-height:1.4}
.sg-err-geral{padding:9px 12px;border-radius:12px;background:#ff6b6b1a;border:1px solid #ff6b6b4d}
.sg-btn{width:100%;min-height:52px;padding:14px 18px;border:0;border-radius:16px;background:var(--green);color:var(--green-ink);font:800 16px/1.2 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 0 #3f9a3c;transition:background .18s,transform .18s,box-shadow .18s}
.sg-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #3f9a3c}
.sg-btn:disabled{background:#3a3d43;color:#c9ccd1;box-shadow:none;cursor:not-allowed;transform:none}
.sg-btn-app{margin-top:14px;background:var(--yellow);color:#2a1d02;box-shadow:0 4px 0 #b8861b}
.sg-priv{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.sg-ok{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:12px 14px;border-radius:14px;border:2px solid var(--green);background:#7ee07a14}
.sg-ok b{font-size:16px;font-weight:800;line-height:1.4;color:#bff5bc;overflow-wrap:anywhere}
.sg-ok span{font-size:14px;line-height:1.45;color:#d6f5d4;overflow-wrap:anywhere}
.sg-box[data-view=fim] .sg-ok{border-color:var(--yellow);background:#f7d24a14}
.sg-box[data-view=fim] .sg-ok b{color:#f9dd78}
.sg-dupla{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.5;color:#e6e7ea}
.sg-dupla.on{background:#7ee07a14;border-color:#7ee07a59;color:#bff5bc;font-weight:800}
.sg-dupla a{display:inline-block;padding:4px 0;color:var(--yellow);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sg-dupla a:focus-visible,.sg-field input:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.live-box.sg-chama{animation:sg-chama 1.2s ease-in-out 2}
@keyframes sg-chama{50%{box-shadow:0 0 0 4px var(--yellow),0 0 24px #f7d24a80}}
@media(hover:hover) and (pointer:fine){.sg-btn:not(:disabled):hover{filter:brightness(1.06)}}

/* ---------- Sorteio Diário: roxo e dourado do banner (só neste bloco), caixas grandes ---------- */
.links+.dr-box{margin-top:16px}
.dr-box{--dr-gold:#f7d24a;--dr-gold-2:#e9a92a;--dr-ink:#2a0b52;--dr-txt:#f1eaff;--dr-soft:#d9c8f5;
  margin-top:14px;overflow:hidden;border-radius:22px;border:2px solid var(--dr-gold);
  background:radial-gradient(120% 50% at 50% 0%,#6a22c766,transparent 70%),linear-gradient(180deg,#3a0f74 0%,#25094a 45%,#1b0736 100%);
  box-shadow:0 0 0 4px #f7d24a1a,0 0 30px #8a3ff033,0 14px 34px #0007;color:var(--dr-txt);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) .15s backwards}
.dr-banner{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-bottom:2px solid #f7d24a80;background:#3a0f74}
.dr-body{padding:16px 16px 18px}
.dr-title{margin:0;text-align:center;font-size:22px;font-weight:900;line-height:1.2;letter-spacing:.4px;color:#ffe27a;text-shadow:0 2px 0 #6b3d00,0 0 18px #f7d24a55}
.dr-premios{position:relative;overflow:hidden;margin-top:14px;padding:10px 10px 12px;border-radius:18px;background:linear-gradient(160deg,#ffe788 0%,#f7c63a 55%,var(--dr-gold-2) 100%);box-shadow:0 4px 0 #a8730f,inset 0 1px 0 #fff9}
.dr-premios::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out 1s infinite;pointer-events:none}
.dr-premios-t{margin:0 0 8px;text-align:center;font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#3d1475}
.dr-premios-g{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.dr-premio{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 11px;border-radius:14px;background:linear-gradient(180deg,#3a0f74,var(--dr-ink));box-shadow:inset 0 0 0 1px #ffffff1f;text-align:center}
.dr-qtd{font-size:36px;font-weight:900;line-height:1;color:#ffd84d;text-shadow:0 2px 0 #00000059}
.dr-qtd::after{content:"×";margin-left:1px;font-size:22px}
.dr-tipo{font-size:13px;font-weight:700;line-height:1.25;color:var(--dr-soft)}
.dr-valor{font-size:20px;font-weight:900;line-height:1.15;color:#fff;white-space:nowrap}
.dr-mais{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--dr-ink);color:#ffd84d;font-size:20px;font-weight:900;line-height:1}
.dr-lead{margin:16px 0 0;text-align:center;font-size:16px;font-weight:700;line-height:1.5;color:var(--dr-txt)}
.dr-total{display:block;width:max-content;max-width:100%;margin:12px auto 0;padding:7px 14px;border-radius:999px;background:#f7d24a1f;border:1px solid #f7d24a66;color:#ffe27a;font-size:14px;font-weight:800;line-height:1.35;text-align:center}
.dr-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.dr-regras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dr-regras li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff1c;font-size:14px;line-height:1.45;color:var(--dr-txt)}
.dr-regras b{color:#fff;font-weight:800}
.dr-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(180deg,#ffe27a,var(--dr-gold-2));color:var(--dr-ink);box-shadow:0 2px 0 #a8730f}
.dr-ico svg{width:20px;height:20px}
.dr-regras .dr-r-forte{border:1.5px solid var(--dr-gold);background:#f7d24a17}
.dr-regras .dr-r-forte b{display:block;margin-bottom:2px;color:#ffe27a}
.dr-regras .dr-r-aviso{border-color:#ff8a8066;background:#ff6b6b14}
.dr-r-aviso .dr-ico{background:#ff8a80;color:#3a0505;box-shadow:0 2px 0 #b3433a}
.dr-r-live .dr-ico{background:#ff4d5e;color:#fff;box-shadow:0 2px 0 #a3202d}
.dr-r-live .dr-ico svg{animation:dr-pulso 1.6s ease-in-out infinite}
.dr-r-sorte .dr-ico{background:#5fcb7a;color:#0b2a14;box-shadow:0 2px 0 #2f8a4a}
.dr-field{display:flex;flex-direction:column;gap:6px}
.dr-field label{font-size:15px;font-weight:800;color:#fff}
.dr-field input{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid #ffffff40;border-radius:14px;background:#150626;color:#fff;font:600 16px/1.3 Inter,system-ui,sans-serif;transition:border-color .18s,box-shadow .18s}
.dr-field input::placeholder{color:#9a8bb5;font-weight:500}
.dr-field input:focus{outline:none;border-color:var(--dr-gold);box-shadow:0 0 0 3px #f7d24a59}
.dr-field.dr-bad input{border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b33}
.dr-err{margin:0;color:#ffaaa3;font-size:14px;font-weight:700;line-height:1.4}
.dr-err-regras{margin-top:-6px;color:#ffe27a}
.dr-err-geral{padding:10px 12px;border-radius:12px;background:#ff6b6b1f;border:1px solid #ff6b6b59}
.dr-check{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;padding:12px 14px;border:1.5px solid #ffffff40;border-radius:14px;background:#ffffff0a;cursor:pointer;transition:border-color .18s,background .18s}
.dr-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.dr-check-box{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:2px solid var(--dr-gold);color:transparent;transition:background .18s,color .18s}
.dr-check-box svg{width:20px;height:20px}
.dr-check input:checked+.dr-check-box{background:var(--dr-gold);color:var(--dr-ink)}
.dr-check input:focus-visible+.dr-check-box{outline:3px solid #fff;outline-offset:3px}
.dr-check:has(input:checked){border-color:var(--dr-gold);background:#f7d24a17}
.dr-check.dr-falta{border-color:var(--dr-gold);animation:dr-chama 1.4s ease-in-out 2}
.dr-check.dr-bad{border-color:#ff6b6b}
.dr-check-t{font-size:15px;font-weight:700;line-height:1.4;color:#fff}
.dr-btn{position:relative;overflow:hidden;width:100%;min-height:56px;padding:15px 18px;border:0;border-radius:16px;background:linear-gradient(180deg,#ffe27a,#f7c63a 60%,var(--dr-gold-2));color:var(--dr-ink);font:900 17px/1.2 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 0 #a8730f;transition:transform .18s,box-shadow .18s,filter .18s}
.dr-btn:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,#fffa,transparent);transform:skewX(-20deg);animation:shine 2.8s ease-in-out 1s infinite}
.dr-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #a8730f}
.dr-btn:disabled{background:#3d2a5c;color:#cbbde6;box-shadow:none;cursor:not-allowed;transform:none}
.dr-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dr-btn-app{margin-top:16px}
.dr-priv{margin:0;font-size:12px;line-height:1.5;color:var(--dr-soft)}
.dr-ok{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:14px 16px;border-radius:16px;border:2px solid #7ee07a;background:#7ee07a1f}
.dr-ok b{font-size:17px;font-weight:800;line-height:1.4;color:#c8f7c5;overflow-wrap:anywhere}
.dr-ok span{font-size:14px;line-height:1.5;color:#e3f8e1;overflow-wrap:anywhere}
.dr-box[data-view=fim] .dr-ok{border-color:var(--dr-gold);background:#f7d24a17}
.dr-box[data-view=fim] .dr-ok b{color:#ffe27a}
.dr-box[data-view=fim] .dr-ok span{color:var(--dr-txt)}
@keyframes dr-pulso{50%{opacity:.55}}
@keyframes dr-chama{50%{box-shadow:0 0 0 4px #f7d24a66,0 0 22px #f7d24a66}}
@media(hover:hover) and (pointer:fine){.dr-btn:not(:disabled):hover{filter:brightness(1.06)}.dr-check:hover{border-color:#f7d24aa6}}
@media(max-width:370px){.dr-body{padding:14px 12px 16px}.dr-title{font-size:20px}.dr-qtd{font-size:32px}.dr-valor{font-size:18px}.dr-regras li{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:9px 10px}.dr-ico{width:32px;height:32px}.dr-ico svg{width:18px;height:18px}}
/* página eujota.com/sorteio */
.pg-sorteio{background-image:radial-gradient(ellipse 90% 40% at 50% -8%,#8a3ff040,transparent 70%)}
.dr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 2px 0}
.dr-top+.dr-box{margin-top:16px}
a.brand-word{text-decoration:none;border-radius:8px}
.dr-voltar{margin:18px 0 0;text-align:center}
.dr-voltar a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;color:var(--green);font-size:15px;font-weight:800;text-decoration:underline;text-underline-offset:4px}

/* faixa de prova social: pílula amarela, como o cartão "Prêmios" */
.social-proof{margin:0 0 14px;padding:11px 16px;border-radius:16px;background:linear-gradient(180deg,var(--yellow),var(--yellow-2));color:#2a1d02;font-size:13px;font-weight:800;line-height:1.4;text-align:center;box-shadow:0 4px 0 #b8861b;animation:proof-in .4s ease-out}

/* selos dentro dos botões */
.btn .proof{grid-column:1/-1;grid-row:3;display:flex;flex-direction:column;gap:7px;margin-top:12px;padding:9px 12px;border-radius:12px;background:#7ee07a14;border:1px solid #7ee07a33;color:#a8f0a4;font-size:12px;font-weight:700;line-height:1.4;animation:proof-in .4s ease-out}
.btn .proof[hidden],.proof-bar[hidden]{display:none!important}
.proof-bar{display:block;height:7px;border-radius:999px;background:#ffffff14;overflow:hidden}
.proof-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow));border-radius:999px;transition:width .8s ease-out}

/* caixa "Instale o app" */
.install{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:11;max-width:510px;margin:0 auto;display:grid;grid-template-columns:72px minmax(0,1fr) 40px;grid-template-areas:"ico txt x" "go go go";align-items:center;gap:14px 14px;padding:20px 18px 18px;background:linear-gradient(160deg,#2b2e33,#1d1f23 65%);color:var(--ink);border:2px solid var(--green);border-radius:22px;box-shadow:0 0 0 4px #7ee07a1f,0 0 28px #7ee07a40,0 12px 34px #000b;animation:install-up .35s ease-out,install-glow 2.4s ease-in-out .4s infinite}
.install[hidden],.howto[hidden]{display:none!important}
.install img{grid-area:ico;width:72px;height:72px;border-radius:18px;box-shadow:0 0 0 1px var(--line)}
.install-txt{grid-area:txt;display:flex;flex-direction:column;gap:5px;min-width:0}
.install-txt b{font-size:19px;font-weight:800;line-height:1.25;color:var(--ink)}
.install-txt span{font-size:14px;line-height:1.45;color:var(--muted)}
.install-go{grid-area:go;position:relative;overflow:hidden;min-height:56px;padding:14px 18px;border:0;border-radius:16px;background:var(--green);color:var(--green-ink);font:800 17px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 0 #3f9a3c}
.install-go::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:skewX(-20deg);animation:shine 2.8s ease-in-out 1s infinite}
.install-go:active{transform:translateY(2px);box-shadow:0 2px 0 #3f9a3c}
@keyframes install-glow{50%{box-shadow:0 0 0 6px #7ee07a2e,0 0 40px #7ee07a66,0 12px 34px #000b}}
@keyframes shine{0%,55%{left:-40%}100%{left:130%}}
.install .install-x{grid-area:x;align-self:start}
.install-x{width:40px;height:40px;border:0;border-radius:50%;background:#ffffff10;color:var(--ink);font-size:18px;cursor:pointer}
.howto{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#000b}
.howto-card{position:relative;width:100%;max-width:496px;padding:22px 18px 14px;background:#222428;color:var(--ink);border:1px solid var(--line);border-radius:22px;animation:install-up .3s ease-out}
.howto-card>b{display:block;font-size:17px;font-weight:800;margin:0 40px 14px 0}
.howto-card .install-x{position:absolute;top:12px;right:12px}
.howto-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.howto-steps li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:11px;border-radius:14px;border:1px solid transparent;font-size:13px;line-height:1.45;opacity:.55;transition:all .3s}
.howto-steps li.on{opacity:1;border-color:var(--green);background:#7ee07a12}
.howto-steps .ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green);color:var(--green-ink);font-weight:800}
.howto-steps .ico svg{width:20px;height:20px}
.howto-arrow{text-align:center;font-size:26px;color:var(--green);margin-top:6px;animation:bob 1s ease-in-out infinite}
.howto-dev{margin:-6px 40px 12px 0;font-size:12px;color:#aeb3ba}
.howto-note{margin:10px 2px 0;padding:10px 12px;border-radius:12px;background:#f7d24a14;border:1px solid #f7d24a40;color:#f3dc8a;font-size:12px;line-height:1.45}
.howto[data-pos=bc],.howto[data-pos=br]{align-items:flex-start;padding-top:calc(12px + env(safe-area-inset-top))}
.howto[data-pos=tr]{padding-top:76px}
.howto[data-pos] .howto-arrow{display:none}
.howto-point{position:fixed;z-index:13;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--green);color:var(--green-ink);font-size:30px;box-shadow:0 0 0 6px #7ee07a40,0 0 26px #7ee07a99;opacity:.35;transition:opacity .3s}
.howto-point[hidden]{display:none}
.howto.p1 .howto-point{opacity:1;animation:point-up 1s ease-in-out infinite}
.howto[data-pos=tr] .howto-point{top:calc(6px + env(safe-area-inset-top));right:10px}
.howto[data-pos=br] .howto-point{bottom:calc(6px + env(safe-area-inset-bottom));right:10px}
.howto[data-pos=bc] .howto-point{bottom:calc(6px + env(safe-area-inset-bottom));left:calc(50% - 29px)}
.howto[data-pos=br] .howto-point span,.howto[data-pos=bc] .howto-point span{display:inline-block;transform:rotate(180deg)}
.howto.p1[data-pos=br] .howto-point,.howto.p1[data-pos=bc] .howto-point{animation-name:point-down}
@keyframes point-up{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes point-down{0%,100%{translate:0 0}50%{translate:0 6px}}
@media (prefers-reduced-motion:reduce){.howto.p1 .howto-point{animation:none}}
@keyframes install-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(5px)}}
@keyframes proof-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* botões: cartões grafite com pílula verde de ação */
.links{display:flex;flex-direction:column;gap:12px;width:100%}
.btn{
  position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) 40px;
  align-items:center;column-gap:14px;min-height:104px;width:100%;
  padding:14px;background:var(--btn-bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;text-align:left;box-shadow:0 6px 16px #0004;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.btn::before{content:none}
.btn>img,.btn>.noimg{grid-column:1;grid-row:1;width:80px;height:80px;aspect-ratio:1;object-fit:cover;border-radius:16px}
.btn>.noimg{display:block;background:#ffffff0d}
.txt{display:contents}
.txt strong{grid-column:2;grid-row:1;min-width:0;font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.1px;overflow-wrap:anywhere}
.txt small{grid-column:1/-1;grid-row:2;display:block;margin-top:12px;padding:9px 12px;border-radius:12px;background:#f7d24a14;border:1px solid #f7d24a33;color:#f6dc7a;font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.spacer{grid-column:3;grid-row:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:var(--green-ink);box-shadow:0 3px 0 #3f9a3c;pointer-events:none}
.spacer svg{width:20px;height:20px;transition:transform .18s}

.page-footer{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:28px;color:var(--muted);font-size:11px;line-height:1.6;text-align:center}
.age-mark{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:30px;color:#2a1d02;background:linear-gradient(180deg,var(--yellow),var(--yellow-2));border-radius:9px;font-size:11px;font-weight:900}

/* aviso de cookies */
.cookie{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:10;width:auto;max-width:496px;margin:0 auto;padding:16px;
  color:var(--ink);background:#222428;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px #000a;
}
.cookie[hidden],[hidden]{display:none!important}
.cookie p{margin:0;font-size:12px;font-weight:500;line-height:1.6;color:#d6d8dc}
.cookie>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cookie button{min-width:0;min-height:46px;padding:10px 14px;border:0;border-radius:14px;background:#33363c;color:var(--ink);font:700 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer;transition:background .18s,transform .18s}
.cookie button[data-c=ok]{color:var(--green-ink);background:var(--green);box-shadow:0 3px 0 #3f9a3c}
.cookie button:active{transform:translateY(1px)}

@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);border-color:#7ee07a66;box-shadow:0 10px 22px #0006}
  .btn:hover .spacer svg{animation:none;transform:translateX(3px)}
  .socials a:hover{border-color:var(--green);transform:translateY(-2px)}
  .cookie button:hover{background:#3d4047}
  .cookie button[data-c=ok]:hover{filter:brightness(1.06)}
}
.btn:active{transform:translateY(1px)}
@media(min-width:600px){.wrap{padding-top:28px}.hero{margin-bottom:26px}.brand-word{font-size:44px}.hero-stage{padding:26px 24px;grid-template-columns:minmax(0,1fr) 128px}.banner{width:128px;height:128px}}
@media(max-width:380px){.wrap{padding-left:14px;padding-right:14px}.btn{padding:12px;column-gap:10px;grid-template-columns:70px minmax(0,1fr) 36px}.btn>img,.btn>.noimg{width:70px;height:70px}.txt strong{font-size:14px}.spacer{width:36px;height:36px}.brand-word{font-size:34px}.hero-stage{grid-template-columns:minmax(0,1fr) 96px}.banner{width:96px;height:96px}}
/* ---------- animações (pedido do Jonas 17/10: "eu gostava que tinha animação") ---------- */
/* barrinhas ao lado da marca pulam como um equalizador de live */
.brand-signal i{transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.brand-signal i:nth-child(2){animation-delay:.18s}
.brand-signal i:nth-child(3){animation-delay:.36s}
/* marca entra deslizando */
.brand-word{animation:slide-in .6s cubic-bezier(.2,.8,.2,1) backwards}
/* cartão do bem-vindo, redes e botões entram um depois do outro */
.hero-stage{animation:rise .55s cubic-bezier(.2,.8,.2,1) .05s backwards}
.socials a{animation:pop .4s cubic-bezier(.2,.9,.3,1.3) backwards}
.socials a:nth-child(1){animation-delay:.25s}.socials a:nth-child(2){animation-delay:.32s}.socials a:nth-child(3){animation-delay:.39s}.socials a:nth-child(4){animation-delay:.46s}.socials a:nth-child(5){animation-delay:.53s}
.links>.btn{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}
.links>.btn:nth-child(1){animation-delay:.3s}.links>.btn:nth-child(2){animation-delay:.38s}.links>.btn:nth-child(3){animation-delay:.46s}.links>.btn:nth-child(4){animation-delay:.54s}.links>.btn:nth-child(5){animation-delay:.62s}.links>.btn:nth-child(6){animation-delay:.7s}.links>.btn:nth-child(n+7){animation-delay:.78s}
/* bolinha verde da seta: brilho passando e a seta "chamando" */
.spacer{position:relative;overflow:hidden}
.spacer::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(90deg,transparent,#ffffffb3,transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
.links>.btn:nth-child(2) .spacer::after{animation-delay:.4s}.links>.btn:nth-child(3) .spacer::after{animation-delay:.8s}.links>.btn:nth-child(4) .spacer::after{animation-delay:1.2s}.links>.btn:nth-child(5) .spacer::after{animation-delay:1.6s}
.spacer svg{animation:nudge 1.8s ease-in-out infinite}
/* faixa amarela de prova social com reflexo */
.social-proof{background:linear-gradient(110deg,var(--yellow-2) 0%,var(--yellow) 40%,#fff1b0 50%,var(--yellow) 60%,var(--yellow-2) 100%);background-size:250% 100%;animation:proof-in .4s ease-out,bar-shimmer 3.5s ease-in-out infinite}
/* barrinha da meta com brilho correndo */
.proof-bar i{background:linear-gradient(90deg,var(--green),var(--yellow),var(--green));background-size:200% 100%;animation:line-run 2.5s linear infinite}
/* 18+ */
.age-mark{animation:pop .45s cubic-bezier(.2,.9,.3,1.3) .9s backwards}

@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes slide-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateX(3px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.5deg)}}
@keyframes glow-drift{from{transform:translate(0,0)}to{transform:translate(170px,60px)}}
@keyframes line-run{from{background-position:200% 0}to{background-position:0 0}}
@keyframes bar-shimmer{0%,40%{background-position:100% 0}100%{background-position:-50% 0}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:hover,.socials a:hover,.btn:hover .spacer svg{transform:none}}

/* Foto da roleta (Sorteio por app): discreta, embaixo do "✅ Pronto" */
.sg-foto{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:14px}
.sg-foto[hidden],.sg-foto [hidden]{display:none!important}
.sg-foto-img{grid-row:1;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--green)}
.sg-foto-txt{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;color:var(--text)}
.sg-foto-img:not([hidden])+.sg-foto-txt{grid-column:2}
.sg-foto-btn{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:700 13px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
.sg-foto-btn:hover{border-color:var(--green)}
.sg-foto-priv{grid-column:1/-1;margin:2px 0 0;font-size:11px;opacity:.7}

/* ---------- Parcerias + Facebook com 2 páginas (19/10/2026) ---------- */
/* Parcerias: maleta com selo DOURADO da marca, borda dourada (chama o gerente sem atrapalhar o jogador) */
.socials .soc-parc{color:var(--yellow);border:2px solid var(--yellow);background:#f7d24a14;box-shadow:0 0 0 3px #f7d24a1f}
.socials .soc-parc:hover{border-color:var(--yellow);box-shadow:0 0 0 4px #f7d24a33}
/* Facebook: o "F" continua igual; só a BORDA ganha as cores das 2 páginas (Jshow vermelho, Jota azul) */
:root{--fb-jshow:#e53935;--fb-jota:#1e88e5}
.fb-cor{display:inline-block;flex:0 0 auto;width:12px;height:12px;border-radius:50%}
.fb-jshow{background:var(--fb-jshow)}
.fb-jota{background:var(--fb-jota)}

/* Página /parcerias */
.pg-parcerias .dr-top{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 0}
.pc-selo{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--yellow);border:2px solid var(--yellow);background:#f7d24a14}
.pc-selo svg{width:20px;height:20px}
.pc-box{margin-top:18px;padding:22px 18px;border-radius:var(--radius);background:var(--btn-bg);border:1px solid var(--line);box-shadow:0 10px 26px #0005}
.pc-titulo{margin:0 0 8px;font-size:26px;font-weight:900;letter-spacing:-.6px;color:#fff}
.pc-lead{margin:0 0 16px;color:var(--muted,#aeb3ba);font-size:15px;line-height:1.5}
.pc-sub{margin:20px 0 10px;font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--yellow)}
.pc-form{display:flex;flex-direction:column;gap:8px}
.pc-form label{font-size:14px;font-weight:700;color:var(--text)}
.pc-form input{min-height:52px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#121316;color:#fff;font:800 22px/1.2 Inter,system-ui,sans-serif;letter-spacing:6px;text-align:center}
.pc-form input:focus{outline:3px solid var(--green);outline-offset:2px}
.pc-form input[aria-invalid=true]{border-color:#ff6b6b}
.pc-erro{margin:0;color:#ffb4b4;font-size:13px;font-weight:700}
.pc-btn{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:6px;padding:12px 16px;border:0;border-radius:14px;background:var(--green);color:var(--green-ink);font:800 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 #3f9a3c}
.pc-btn-whats{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.pc-ou{margin:18px 0 0;text-align:center;color:var(--muted,#aeb3ba);font-size:13px}
.pc-lista{display:flex;flex-direction:column;gap:10px}
.pc-pag{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border-radius:14px;background:#ffffff08;border:1px solid var(--line);color:var(--text);text-decoration:none}
.pc-pag span{display:flex;flex-direction:column}
.pc-pag b{font-size:16px}
.pc-pag small{font-size:12px;color:var(--muted,#aeb3ba)}
.pc-pag .fb-cor{width:16px;height:16px}
.pc-seta{margin-left:auto;opacity:.7}
.pc-nota{margin:18px 0 0;font-size:12px;color:var(--muted,#aeb3ba)}
/* os links do menuzinho do Facebook não são círculos (a regra geral das redes vale só para os ícones) */

/* 2 ícones do Facebook (19/10/2026): a capa de cada página aparece dentro do "f" */
.socials .soc-fb svg image{image-rendering:auto}
/* 5 ícones numa linha só no celular */
@media(max-width:430px){.hero-copy .socials{gap:5px}.hero-copy .socials a{width:34px;height:34px}.hero-copy .socials svg{width:18px;height:18px}}
/* Foto dentro do formulário do sorteio (19/10/2026) */
.sg-foto-rot{font-size:14px;font-weight:700}
.sg-foto-rot small{font-weight:600;opacity:.7}
.sg-foto-esc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sg-foto-esc .sg-foto-img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--yellow)}
.sg-foto-tirar{min-height:44px;padding:0 12px;border:0;background:none;color:inherit;opacity:.75;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.sg-foto-dica{margin:6px 0 0;font-size:13px;opacity:.8}
.sg-foto-guardada{font-size:14px;font-weight:600;line-height:1.3}
.sg-foto-esc .sg-foto-btn{min-height:44px}
/* Sorteio pelo app: trocar foto e "Não é você?" (20/10/2026) */
.sg-foto-btn{min-height:44px}
.sg-foto-btn:disabled{opacity:.55;cursor:not-allowed}
.sg-outro{margin:-4px 0 0}
.sg-link{min-height:44px;padding:0 2px;border:0;background:none;color:inherit;opacity:.8;font:600 14px/1.3 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sg-link:hover{opacity:1}
/* Confirmação do nome igual ao Facebook, só na 1ª vez (aparelho sem foto guardada), 20/10/2026 */
.sg-conf{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#000c}
.sg-conf[hidden]{display:none!important}
.sg-conf-card{width:100%;max-width:496px;max-height:calc(100dvh - 24px);overflow-y:auto;padding:22px 18px 16px;background:#222428;color:var(--ink);border:2px solid var(--yellow);border-radius:22px;box-shadow:0 0 0 4px #f7d24a26,0 12px 40px #000a;animation:install-up .3s ease-out}
.sg-conf-title{display:block;font-size:24px;font-weight:900;letter-spacing:.02em;color:var(--yellow)}
.sg-conf-txt{margin:10px 0 0;font-size:18px;font-weight:600;line-height:1.45;color:#fbe7a1}
.sg-conf-txt b{font-weight:900;color:var(--yellow)}
.sg-conf-rot{margin:16px 0 4px;font-size:14px;color:#c9ccd1}
.sg-conf-nome{margin:0;padding:12px 14px;border-radius:14px;background:#17181b;border:1.5px solid #ffffff33;font-size:22px;font-weight:800;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.sg-conf-btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.sg-conf-corrigir{min-height:48px;padding:12px 16px;border:1.5px solid #ffffff40;border-radius:16px;background:transparent;color:#fff;font:700 16px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
.sg-conf-corrigir:hover{border-color:var(--yellow)}
.sg-conf button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media(min-width:700px){.sg-conf{align-items:center}}
.sg-link:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.pc-fb{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--bg-inner);border:1px solid var(--line);color:var(--text)}
.pc-fb svg{width:22px;height:22px}
.pc-como{margin-top:22px;padding:16px;border-radius:14px;background:#f7d24a0d;border:1px solid #f7d24a40}
.pc-como .pc-sub{margin-top:0}
.pc-como p{margin:0 0 6px;color:var(--text);font-size:14px;line-height:1.55}
.sg-opc{font-weight:600;opacity:.7}

/* Botão 📷 na linha das redes (20/10/2026): mesmo círculo dos outros ícones, com o emoji no tamanho do desenho */
.socials a:nth-child(6){animation-delay:.6s}
.socials .soc-foto{font-size:20px;line-height:1;text-decoration:none}
.socials .soc-foto span{display:block;transform:translateY(-1px)}
/* 5 ícones (o 📷 ficou no lugar do e-mail, 20/10/2026): mesmos tamanhos de antes (34px no celular) */
@media(max-width:430px){.socials .soc-foto{font-size:17px}}
/* Caixa do botão 📷: mesmo fundo e cartão da confirmação do nome do sorteio */
.fl .fl-card{position:relative;border-color:var(--line)}
.fl[data-passo="2"] .fl-card{border-color:var(--yellow)}
.fl-x{position:absolute;top:12px;right:12px}
.fl-passo[hidden]{display:none!important}
.fl-title{display:block;margin:0 44px 0 0;font-size:19px;font-weight:800;color:#fff}
.fl-lead{margin:8px 0 0;font-size:14px;line-height:1.5;color:#c9ccd1}
.fl-form{margin-top:16px}
.fl .sg-foto-esc [hidden]{display:none!important}
.fl-pronto{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding-top:6px}
.fl-pronto .fl-title{margin:8px 0 0}
.fl-pronto .sg-btn{margin-top:16px}
.fl-pronto-img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--green)}
.fl button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}