/* Time Barra — página do time: cores e faixa da campanha (projeto "Grupos Time Barra") com a MOBI */
:root{--ama:#FFC629;--verde:#046A38;--verde2:#0D3D24;--azul:#0033A0;--fg:#fdfbf3;--muted:#cfe3d6;--faint:#8fb59e;--titulo:"Archivo",system-ui,sans-serif;--texto:"Inter Tight",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(900px 520px at 85% -10%,rgba(255,198,41,.14),transparent 60%),radial-gradient(800px 600px at -10% 20%,rgba(0,51,160,.28),transparent 60%),#06261a;color:var(--fg);font:15px/1.5 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.tb-topo{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;max-width:1320px;margin:0 auto}
.tb-logo{height:58px}
.tb-por{display:flex;align-items:center;gap:8px;font:700 12px var(--titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tb-por img{height:28px}
.tb-faixa{height:34px;background:var(--ama) url(assets/faixa-tile.webp) 0 0/auto 100% repeat-x;animation:faixa 18s linear infinite}
.tb-frase{height:24px;overflow:hidden;background:var(--verde)}
.tb-frase div{display:flex;width:max-content;animation:frase 26s linear infinite}
.tb-frase span{font:900 12px/24px var(--titulo);letter-spacing:.06em;color:var(--ama);white-space:nowrap;padding-right:6px}
@keyframes faixa{to{background-position:-1920px 0}}
@keyframes frase{to{transform:translateX(-50%)}}
.tb-wrap{max-width:1320px;margin:0 auto;padding:22px 20px 40px}
.tb-hero{text-align:center}
.tb-kicker{font:800 13px var(--titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--ama);margin:6px 0}
.tb-hero h1{font:900 clamp(34px,6vw,70px)/.95 var(--titulo);text-transform:uppercase;margin:6px 0 18px;letter-spacing:-.01em}
.tb-hero h1 span{color:var(--ama)}
.tb-modos{display:inline-flex;padding:5px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,198,41,.35);gap:4px}
.tb-modos button{border:0;border-radius:999px;padding:11px 26px;background:none;color:var(--muted);font:900 15px var(--titulo);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:.25s}
.tb-modos button[aria-selected=true]{background:var(--ama);color:var(--verde2);box-shadow:0 10px 26px -12px var(--ama)}
.tb-dica{color:var(--muted);margin:12px 0 18px;font-size:14px}
.tb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1180px;margin:0 auto}
@media (max-width:820px){.tb-cards{grid-template-columns:1fr;max-width:420px}}
.tb-card{position:relative;border:0;padding:0;border-radius:26px;overflow:hidden;cursor:pointer;background:var(--verde);color:inherit;text-align:left;aspect-ratio:3/3.9;box-shadow:0 26px 50px -26px #000;outline:3px solid transparent;transition:transform .35s cubic-bezier(.2,.8,.2,1),outline-color .25s,box-shadow .35s}
.tb-card:hover,.tb-card:focus-visible{transform:translateY(-6px);box-shadow:0 34px 60px -24px #000}
.tb-card.sel{outline-color:var(--ama)}
/* fundo animado: faixas da campanha que entram ao passar o mouse */
.tb-fundo{position:absolute;inset:0;overflow:hidden;background:radial-gradient(90% 70% at 50% 18%,rgba(255,255,255,.28),transparent 60%),linear-gradient(165deg,var(--c,#2fbf5a) 0%,var(--c,#2fbf5a) 100%);transition:filter .4s}

.tb-fundo b{position:absolute;inset:0;z-index:1;background:none;opacity:1;transition:background .4s}
.tb-card:hover .tb-fundo b{background:radial-gradient(circle at 50% 30%,rgba(255,230,120,.35) 0%,rgba(255,198,41,0) 55%)}
@keyframes tira{to{background-position:-1920px 0}}
.tb-fundo i{display:none}
.tb-fundo::after{content:"";position:absolute;inset:0 0 112px;background:radial-gradient(48% 46% at 50% 52%,var(--c) 0%,rgba(0,0,0,0) 100%);opacity:.75;transition:opacity .5s;pointer-events:none}
/* arte animada (arte.js): peças da faixa da campanha girando e flutuando */
/* arte animada (arte.js): cada peça é uma camada própria e só muda transform/opacity, para correr lisa na GPU */
.ar{position:absolute;left:0;right:0;top:0;bottom:112px;overflow:hidden;container-type:size;pointer-events:none}
.ar-box{position:absolute;left:50%;top:50%;width:max(100cqw,100cqh);aspect-ratio:1;translate:-50% -50%}
.pc{position:absolute;aspect-ratio:1;translate:-50% -50%}
.pc>span,.mv{display:block;width:100%;height:100%}
.pc img{display:block;width:100%;height:100%;user-select:none}
.mv{will-change:transform;backface-visibility:hidden}
.ar-tile{display:block;width:100%;height:100%;border-radius:10%;overflow:hidden;transform:translateZ(0)}
.ar-corre{display:block;width:200%;height:100%;will-change:transform;animation:ar-corre 3.5s linear infinite}.ar-corre-listras{animation-duration:5s;animation-direction:reverse}
.ar-corre img{width:100%}
@keyframes ar-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ar-gira,.ar-giraR{animation-name:ar-gira;animation-timing-function:linear;animation-iteration-count:infinite}.ar-giraR{animation-direction:reverse}
.ar-flut,.ar-pulsa{animation-timing-function:ease-in-out;animation-direction:alternate;animation-iteration-count:infinite}.ar-flut{animation-name:ar-flut}.ar-pulsa{animation-name:ar-pulsa}
@keyframes ar-gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ar-flut{from{transform:translateY(5%) rotate(-8deg) scale(1)}to{transform:translateY(-7%) rotate(10deg) scale(1.08)}}
@keyframes ar-pulsa{from{transform:scale(.6);opacity:.6}to{transform:scale(1.35);opacity:1}}
.ar-in{animation:ar-in .75s cubic-bezier(.2,1.3,.4,1) both}
@keyframes ar-in{from{transform:scale(0) rotate(-140deg);opacity:0}to{transform:none;opacity:1}}
.ar.sai .ar-in{animation:ar-out .45s cubic-bezier(.5,0,.75,0) forwards;animation-delay:0s!important}.ar.sai .ar-onda{display:none}
@keyframes ar-out{from{transform:none;opacity:1}to{transform:scale(0) rotate(140deg);opacity:0}}
.ar-onda{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border:3px solid #fff;border-radius:50%;opacity:0;animation:ar-onda .9s cubic-bezier(.2,.8,.2,1)}
@keyframes ar-onda{from{transform:scale(.2);opacity:.9}to{transform:scale(6);opacity:0}}

.tb-foto{position:absolute;left:50%;bottom:112px;height:calc(100% - 132px);transform:translateX(-50%);filter:drop-shadow(0 14px 22px rgba(0,0,0,.35));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tb-card:hover .tb-foto{transform:translateX(-50%) scale(1.05) translateY(-6px)}
.tb-info{position:absolute;left:0;right:0;bottom:0;height:112px;padding:14px 18px;background:#0D3D24;border-top:4px solid var(--ama);display:flex;flex-direction:column;justify-content:center}
.tb-info .n,.tb-info .c{display:block}
.tb-info .n{font:900 clamp(22px,2.4vw,30px)/1 var(--titulo);text-transform:uppercase}
.tb-info .c{font:800 12px var(--titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--ama);margin:6px 0 8px}
.tb-info .v{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.tb-info .v b{font:900 24px var(--titulo)}.tb-info .v small{color:var(--muted);font-size:13px}
.tb-check{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;font:900 18px var(--titulo);color:transparent;transition:.25s}
.tb-card.sel .tb-check{background:var(--ama);border-color:var(--ama);color:var(--verde2)}
.modo-individual .tb-check{display:none}
.tb-acao{margin:20px 0 0}
.tb-btn{border:0;border-radius:999px;padding:15px 34px;background:var(--ama);color:var(--verde2);font:900 17px var(--titulo);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 16px 36px -14px var(--ama);transition:.25s}
.tb-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.tb-btn:not(:disabled):hover{transform:translateY(-2px) scale(1.02)}
.tb-vista{margin-top:30px}
.tb-vista-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tb-vista-cab h2{font:900 clamp(22px,3vw,34px)/1.05 var(--titulo);text-transform:uppercase;margin:0;color:var(--ama)}
.tb-voltar{border:1px solid rgba(255,198,41,.5);background:none;color:var(--fg);border-radius:999px;padding:9px 18px;font:800 13px var(--titulo);text-transform:uppercase;cursor:pointer}
#quadro{width:100%;min-height:900px;border:0;border-radius:22px;background:#0a1620;box-shadow:0 30px 60px -30px #000}
.tb-rodape{text-align:center;font:700 11px var(--titulo);letter-spacing:.12em;color:var(--faint);padding:20px}
.tb-carregando{grid-column:1/-1;padding:60px;color:var(--muted)}
/* animação de tela cheia ao abrir */
.tb-intro{position:fixed;inset:0;z-index:9999;background:var(--verde2);overflow:hidden;pointer-events:none}
.tb-intro{background:radial-gradient(60% 60% at 50% 55%,#0a6b3c 0%,var(--verde2) 70%)}
.tb-intro .ar-tela{--W:max(100vw,160vh);position:absolute;left:50%;top:50%;width:var(--W);aspect-ratio:1.6;translate:-50% -50%}
.ar-voa{display:block;width:100%;height:100%;animation:ar-voa .9s cubic-bezier(.16,1.15,.3,1) both}
@keyframes ar-voa{from{transform:translate(calc(var(--dx) * var(--W)),calc(var(--dy) * var(--W))) scale(0) rotate(-220deg);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
.tb-intro.sai .ar-voa{animation:ar-fora .65s cubic-bezier(.6,0,.4,1) forwards}
@keyframes ar-fora{from{transform:none;opacity:1}to{transform:translate(calc(var(--dx) * var(--W) * -1.3),calc(var(--dy) * var(--W) * -1.3)) scale(1.8) rotate(160deg);opacity:0}}
.tb-intro .clarao{position:absolute;left:50%;top:52%;width:30vmax;height:30vmax;margin:-15vmax 0 0 -15vmax;border-radius:50%;background:radial-gradient(circle,#FFC629 0%,rgba(255,198,41,.5) 35%,rgba(255,198,41,0) 70%);animation:clarao .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes clarao{from{transform:scale(0);opacity:1}to{transform:scale(5);opacity:0}}
.tb-intro .frase{position:absolute;left:0;right:0;top:7vh;padding:0 20px;text-align:center;font:900 clamp(34px,7vw,96px)/1 var(--titulo);text-transform:uppercase;color:var(--ama);text-shadow:0 10px 40px rgba(0,0,0,.6);opacity:0;transform:scale(.6);animation:aparece .55s .3s cubic-bezier(.2,1.4,.4,1) forwards}
.tb-intro .frase small{display:block;font-size:.32em;color:#fff;letter-spacing:.14em;margin-top:10px}
.tb-intro .gente{position:absolute;bottom:0;left:50%;display:flex;gap:0;transform:translateX(-50%) translateY(40%);opacity:0;animation:sobe .75s .35s cubic-bezier(.2,1.1,.3,1) forwards}
.tb-intro .gente img{height:56vh;max-width:40vw;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.tb-intro.sai{animation:sai .65s ease-in forwards}.tb-intro.sai .frase{animation:frase-sai .5s ease-in forwards}.tb-intro.sai .gente{animation:gente-sai .55s cubic-bezier(.6,0,.4,1) forwards}
@keyframes entra{to{transform:rotate(-12deg) translateX(0)}}
@keyframes aparece{to{opacity:1;transform:none}}
@keyframes sobe{to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes sai{55%{opacity:1}to{opacity:0}}@keyframes frase-sai{from{opacity:1}to{opacity:0;transform:scale(1.4) translateY(-6vh)}}@keyframes gente-sai{from{transform:translateX(-50%);opacity:1}to{transform:translateX(-50%) translateY(30%) scale(.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.mv,.ar-corre,.ar-in,.ar-onda,.tb-faixa,.tb-frase div,.tb-fundo i{animation:none!important}.tb-intro{display:none!important}}