/* MAURO 2026-09-30 (oLoterico): vitrine da lotérica — faixa "compre hoje", parabéns e bolões premiados (classes vt-*) */

/* faixa chamativa */
.vt-urg { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; text-decoration: none; color: #fff; overflow: hidden; text-align: center;
          background: linear-gradient(90deg, #c8102e, #ff4d1a, #e0115f, #c8102e); background-size: 300% 100%; animation: vt-urg-fundo 6s linear infinite; }
@keyframes vt-urg-fundo { to { background-position: 300% 0; } }
.vt-urg::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 25%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: vt-urg-brilho 3.2s ease-in-out infinite; }
@keyframes vt-urg-brilho { 0%, 55% { left: -30%; } 100% { left: 130%; } }
.vt-urg-txt { position: relative; z-index: 1; font-size: 18px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.3); animation: vt-urg-pulsa 1.3s ease-in-out infinite; }
@keyframes vt-urg-pulsa { 50% { transform: scale(1.035); } }
.vt-urg-valor { display: inline-block; background: #ffd54a; color: #7a0010; border-radius: 10px; padding: 2px 10px; margin: 0 3px; text-shadow: none; animation: vt-urg-anel 1.3s ease-out infinite; }
@keyframes vt-urg-anel { 0% { box-shadow: 0 0 0 0 rgba(255,213,74,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255,213,74,0); } }
.vt-urg-bt { position: relative; z-index: 1; font-size: 13.5px; font-weight: 800; background: #fff; color: #c8102e; border-radius: 999px; padding: 7px 14px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* card de parabéns: faixa horizontal logo abaixo do banner */
.vt-tem-parab { position: relative; }
.vt-parab { position: relative; z-index: 2; margin: 16px 0 0; box-sizing: border-box; border-radius: 22px; padding: 18px 22px; color: #fff; overflow: hidden;
            display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: 20px; align-items: center;
            background: linear-gradient(120deg, rgba(10,22,52,.97), rgba(18,40,90,.97)); border: 2px solid #ffd54a; animation: vt-pulsa 1.6s ease-in-out infinite; }
@keyframes vt-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,74,.55), 0 14px 34px rgba(15,23,42,.3); border-color: #ffd54a; }
                      50% { box-shadow: 0 0 0 8px rgba(255,213,74,0), 0 0 30px 5px rgba(255,200,40,.5), 0 14px 34px rgba(15,23,42,.3); border-color: #fff3b0; } }
.vt-parab > div:not(.vt-conf) { position: relative; z-index: 1; }
.vt-parab-top { display: inline-block; font-size: 13px; font-weight: 900; letter-spacing: 1px; color: #3d2a00; border-radius: 999px; padding: 5px 12px; background: linear-gradient(145deg, #ffe27a, #f5b301); animation: vt-pisca 1.6s ease-in-out infinite; }
@keyframes vt-pisca { 50% { filter: brightness(1.25); transform: scale(1.05); } }
.vt-parab-lot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; }
.vt-parab-lot img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.vt-parab-lot b { font-weight: 800; font-size: 19px; }
.vt-parab-lot span { opacity: .9; }
.vt-parab-rot { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .9px; color: #cbd5e1; text-transform: uppercase; }
.vt-parab-valor { font-size: 42px; font-weight: 900; line-height: 1.05; margin-top: 2px; letter-spacing: -1px; white-space: nowrap;
                  background: linear-gradient(90deg, #ffe27a, #ffb300, #ffe27a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vt-ouro 2.4s linear infinite; }
.vt-parab-valor small { font-size: 21px; margin-right: 4px; letter-spacing: 0; }
@keyframes vt-ouro { to { background-position: -200% 0; } }
.vt-parab-jogo { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,213,74,.25); }
.vt-parab-jogo .vt-jogo { margin: 0; padding: 0; border: 0; }
.vt-parab-jogo .vt-bolas span { min-width: 28px; height: 28px; font-size: 12.5px; }
.vt-parab-txt { margin-top: 8px; font-size: 13.5px; color: #e2e8f0; line-height: 1.4; }
.vt-parab-cta { text-align: center; }
.vt-parab-cta b { display: block; font-size: 19px; font-weight: 800; }
.vt-parab-bt { display: block; margin-top: 10px; background: #25d366; color: #fff !important; text-decoration: none; font-weight: 800; font-size: 15.5px; border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 20px rgba(37,211,102,.35); }
.vt-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px; }
.vt-conf i { position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 2px; opacity: .9; animation: vt-cai linear infinite; }
@keyframes vt-cai { to { transform: translateY(560px) rotate(540deg); } }

/* números do jogo premiado (sorteados piscando em dourado) */
.vt-jogo { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.2); }
.vt-ac { font-size: 11.5px; opacity: .92; margin-bottom: 7px; }
.vt-ac b { font-weight: 900; font-size: 13px; color: #ffe27a; }
.vt-bolas { display: flex; flex-wrap: wrap; gap: 4px; }
.vt-bolas span { min-width: 25px; height: 25px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
                 font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); border: 1.5px solid rgba(255,255,255,.28); }
.vt-bolas span.x { background: #fff; color: var(--c); border-color: #fff; font-weight: 900; animation: vt-bola 1.8s ease-in-out infinite; }
.vt-bolas span.x:nth-child(3n+2) { animation-delay: .3s; }
.vt-bolas span.x:nth-child(3n) { animation-delay: .6s; }
@keyframes vt-bola { 0%, 100% { background: #fff; color: var(--c); border-color: #fff; box-shadow: 0 0 0 2px rgba(255,226,122,.55), 0 2px 6px rgba(0,0,0,.25); }
                     50% { background: linear-gradient(145deg, #fff3b0, #ffc400); color: #5a3a00; border-color: #ffe27a; box-shadow: 0 0 0 3px rgba(255,213,74,.35), 0 0 14px 3px rgba(255,200,40,.75); } }
.vt-bolas span.tv { border-style: dashed; }
.vt-bolas span.tv.x { background: #ffe27a; color: #3d2a00; border-color: #ffe27a; }

/* seção bolões premiados */
.vt-prem { padding: 40px 0 44px; background: linear-gradient(180deg, #fffaf0, #fff); }
.vt-prem-cab { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: left; margin-bottom: 18px; }
.vt-trofeu { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: linear-gradient(145deg, #ffd54a, #f0a500); box-shadow: 0 6px 16px rgba(240,165,0,.35); flex: none; }
.vt-prem-cab h2 { margin: 0; font-size: 28px; font-weight: 800; color: #0f1e3d; }
.vt-prem-cab p { margin: 2px 0 0; color: #64748b; font-size: 15px; }
.vt-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 900px; margin: 0 auto; }
.vt-nums > div { background: #fff; border: 1px solid #f3e3b5; border-radius: 16px; padding: 14px 16px; text-align: center; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.vt-nums b { display: block; font-size: 26px; font-weight: 900; color: #b07800; }
.vt-nums span { font-size: 13.5px; color: #475569; }
.vt-nums-nota { text-align: center; font-size: 12.5px; color: #94a3b8; margin: 8px 0 0; }
.vt-sub { margin: 22px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #64748b; }
.vt-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vt-card { position: relative; border-radius: 16px; overflow: hidden; color: #fff; padding: 28px 14px 15px; box-shadow: 0 2px 10px rgba(15,23,42,.08);
           background: linear-gradient(145deg, var(--c) 0%, color-mix(in srgb, var(--c) 70%, #000) 100%); }
.vt-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(255,213,74,.35), transparent 55%); pointer-events: none; }
.vt-card > * { position: relative; }
.vt-selo { position: absolute !important; right: 10px; top: 8px; font-size: 9px; font-weight: 800; letter-spacing: .6px; color: #3d2a00; border-radius: 999px; padding: 3px 7px; background: linear-gradient(145deg, #ffe27a, #f5b301); }
.vt-cab { display: flex; align-items: center; gap: 8px; }
.vt-cab img { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.vt-cab b { font-size: 16px; font-weight: 800; }
.vt-rot { margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; opacity: .85; }
.vt-valor { font-size: 22px; font-weight: 900; line-height: 1.05; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.vt-valor small { font-size: 14px; margin-right: 3px; opacity: .9; }
.vt-conc { margin-top: 5px; font-size: 12.5px; opacity: .88; }
.vt-prem-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; font-size: 18px; font-weight: 800; color: #0f1e3d; }
.vt-prem-cta a { background: #25d366; color: #fff; text-decoration: none; border-radius: 12px; padding: 11px 18px; font-size: 15.5px; box-shadow: 0 8px 20px rgba(37,211,102,.3); }

@media (max-width: 1100px) { .vt-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1020px) {
  .vt-parab { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 16px; }
  .vt-parab-lot { justify-content: center; }
  .vt-parab-jogo .vt-bolas { justify-content: center; }
}
@media (max-width: 720px) {
  .vt-urg-txt { font-size: 14.5px; line-height: 1.45; }
  .vt-nums { grid-template-columns: 1fr; gap: 8px; }
  .vt-nums b { font-size: 22px; }
  .vt-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vt-grade .vt-card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .vt-grade .vt-card:first-child:nth-last-child(odd) .vt-valor { font-size: 28px; }
  .vt-prem-cab h2 { font-size: 23px; }
  .vt-parab-valor { font-size: 36px; }
}
@media (max-width: 380px) { .vt-parab-valor { font-size: 30px; } }