/* REWIND da temporada 2 (01/11/2026, City Evolution). Tela cheia no celular, formato story. Prefixo rw2-. Minúsculas, sem emoji, nada sublinhado. */
.rw2 { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: stretch; justify-content: center; background: #1e2430; animation: rw2Entra .3s ease both; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 900; color: #1e2430; }
.rw2.sai { animation: rw2Sai .25s ease both; }
@keyframes rw2Entra { from { opacity: 0; } } @keyframes rw2Sai { to { opacity: 0; } }
.rw2 *, .rw2 { box-sizing: border-box; text-decoration: none; }
.rw2-palco { position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; overflow: hidden; }
@media (min-width: 560px) { .rw2 { align-items: center; padding: 14px; } .rw2-palco { height: min(100%, 860px); border-radius: 30px; border: 5px solid #1e2430; box-shadow: 0 10px 0 rgba(0, 0, 0, .35); } }
.rw2-barras { position: absolute; z-index: 3; left: 14px; right: 14px; top: calc(12px + env(safe-area-inset-top)); display: flex; gap: 4px; pointer-events: none; }
.rw2-barras span { flex: 1; height: 4px; border-radius: 9px; background: rgba(30, 36, 48, .25); overflow: hidden; }
.rw2-barras i { display: block; height: 100%; width: 0; background: #1e2430; border-radius: 9px; }
.rw2-x { position: absolute; z-index: 4; top: calc(26px + env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 3.5px solid #1e2430; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 rgba(30, 36, 48, .35); padding: 0; }
.rw2-x svg { width: 15px; height: 15px; }
.rw2-x:focus-visible, .rw2-btn:focus-visible, .rw2-eu input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rw2-tela { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: calc(76px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); overflow: hidden; text-align: center; animation: rw2Tela .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes rw2Tela { from { transform: scale(.96); opacity: 0; } }
.rw2-tela > * { margin: 0; position: relative; z-index: 1; }
.rw2-tela::before, .rw2-tela::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.rw2-tela::before { width: 72vw; height: 72vw; max-width: 340px; max-height: 340px; right: -24vw; bottom: -14vw; background: rgba(255, 255, 255, .22); }
.rw2-tela::after { width: 38vw; height: 38vw; max-width: 180px; max-height: 180px; left: -12vw; top: 18%; background: rgba(255, 255, 255, .16); }
.t-y { background: #FFD23F; } .t-creme { background: #fffdf2; } .t-ceu { background: #9ed2f4; } .t-verde { background: #9fd27a; } .t-roxo { background: #c7b2ff; } .t-rosa { background: #ffb3b6; } .t-ink { background: #1e2430; color: #fffdf2; } .t-azul { background: #2f6fe0; color: #fff; } .t-vermelho { background: #e0343a; color: #fff; } .t-amarelo { background: #f5c400; }
.t-ink .rw2-barras span, .t-azul .rw2-barras span, .t-vermelho .rw2-barras span { background: rgba(255, 255, 255, .3); } .t-ink .rw2-barras i, .t-azul .rw2-barras i, .t-vermelho .rw2-barras i { background: #fff; }
.rw2-tag { display: inline-block; align-self: center; background: #1e2430; color: #fff; border-radius: 999px; padding: 5px 15px 7px; font-size: 14px; letter-spacing: .02em; }
.t-ink .rw2-tag, .t-azul .rw2-tag, .t-vermelho .rw2-tag { background: #fff; color: #1e2430; }
.rw2-big { font-size: clamp(44px, 14vw, 72px); line-height: .95; letter-spacing: -.02em; }
.rw2-mega { font-size: clamp(66px, 23vw, 112px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rw2-titulo { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.02; letter-spacing: -.01em; }
.rw2-nome { font-size: clamp(24px, 7.5vw, 36px); line-height: 1.05; word-break: break-all; }
.rw2-txt { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.2; }
.rw2-peq { font-size: 14.5px; opacity: .8; }
.rw2-dica { font-size: 13.5px; opacity: .7; margin-top: 10px !important; animation: rw2Pisca 1.4s ease-in-out infinite; }
@keyframes rw2Pisca { 50% { opacity: .3; } }
.rw2-sobe { animation: rw2Sobe .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes rw2Sobe { from { transform: translateY(18px); opacity: 0; } }
.rw2-pill { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1e2430; border: 3.5px solid #1e2430; border-radius: 999px; padding: 7px 16px 9px; font-size: 16px; box-shadow: 0 4px 0 rgba(30, 36, 48, .3); }
.rw2-pt { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #1e2430; }
.rw2-casa { align-self: center; width: min(56vw, 230px); height: min(56vw, 230px); border-radius: 50%; background: #fff; border: 5px solid #1e2430; box-shadow: 0 8px 0 rgba(30, 36, 48, .3); display: grid; place-items: center; animation: rw2Pula 2.4s ease-in-out infinite; }
.rw2-casa svg { width: 72%; height: 72%; display: block; }
@keyframes rw2Pula { 50% { transform: translateY(-6px); } }
.rw2-casa-peq { display: inline-block; width: 44px; height: 44px; vertical-align: middle; } .rw2-casa-peq svg { width: 100%; height: 100%; }
.rw2-bar { display: flex; height: 26px; border: 4px solid #1e2430; border-radius: 999px; overflow: hidden; background: #fff; }
.rw2-bar span { min-width: 5px; border-right: 2px solid #1e2430; animation: rw2Cresce .9s ease both; } .rw2-bar span:last-child { border-right: 0; }
@keyframes rw2Cresce { from { flex-grow: 0; } }
.rw2-lista { display: flex; flex-direction: column; gap: 7px; }
.rw2-lin { display: flex; align-items: center; gap: 10px; background: #fff; color: #1e2430; border: 3.5px solid #1e2430; border-radius: 18px; padding: 8px 14px; text-align: left; font-size: 16px; }
.rw2-lin i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #1e2430; } .rw2-lin span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw2-lin b { font-size: 19px; }
.rw2-pos { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: #fff; color: #1e2430; border: 4px solid #1e2430; border-radius: 22px; padding: 10px 16px; text-align: left; }
.rw2-pos span { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw2-pos b { grid-row: span 2; font-size: clamp(34px, 11vw, 48px); letter-spacing: -.02em; } .rw2-pos i { font-style: normal; font-size: 13px; opacity: .7; }
.rw2-selo { align-self: center; background: #1e2430; color: #FFD23F; border-radius: 22px; padding: 14px 20px; font-size: clamp(22px, 7vw, 32px); line-height: 1.05; max-width: 100%; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.t-ink .rw2-selo { background: #FFD23F; color: #1e2430; }
.rw2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rw2-num { background: #fff; color: #1e2430; border: 3.5px solid #1e2430; border-radius: 18px; padding: 10px 6px 11px; } .rw2-num b { display: block; font-size: clamp(26px, 8vw, 36px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .rw2-num span { display: block; font-size: 12.5px; margin-top: 4px; opacity: .75; }
.rw2-bts { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.rw2-btn { min-height: 50px; padding: 0 18px 2px; border: 3.5px solid #1e2430; border-radius: 999px; background: #fff; color: #1e2430; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 rgba(30, 36, 48, .35); }
.rw2-btn.prim { background: #FFD23F; } .rw2-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(30, 36, 48, .35); } .rw2-btn:disabled { opacity: .6; }
.rw2-eu { display: flex; gap: 8px; align-self: stretch; } .rw2-eu input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 3.5px solid #1e2430; border-radius: 999px; background: #fff; color: #1e2430; font: inherit; font-size: 16px; font-weight: 800; outline: 0; } .rw2-eu .rw2-btn { flex: none; }
.rw2-aviso { font-size: 14px; background: #fff; color: #1e2430; border: 3px solid #1e2430; border-radius: 14px; padding: 6px 12px; align-self: center; }
@media (prefers-reduced-motion: reduce) { .rw2, .rw2.sai, .rw2-tela, .rw2-sobe, .rw2-casa, .rw2-bar span, .rw2-dica { animation: none !important; } }