/* R2: só transform/opacity são animados. Layout reservado antes dos efeitos. */
html { overflow-x:clip; }
.efeito-fundo { z-index:var(--z-canvas-bg); }
.efeito-fundo canvas { width:100%; height:100%; }
.efeito-fundo.efeito-ativo canvas { display:block; }
.mapa-estatico { position:relative; height:280px; }
.mapa-estatico svg { width:100%; height:100%; }
.mapa-estatico canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
.mapa-estatico.efeito-ativo canvas { display:block; }
.mapa-estatico.efeito-ativo svg { visibility:hidden; }
.telefone { width:280px; min-height:540px; position:relative; transform-style:preserve-3d; box-shadow:0 24px 48px -12px rgba(0,0,0,.7),0 0 24px rgba(10,255,31,.12); }
.celular-3d { transition:none; }
.celular-3d::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(125deg,transparent 15%,rgba(232,255,228,.08) 32%,transparent 52%); }
.vidro-magnetico { overflow:hidden; }
.luz-magnetica { position:absolute; top:0; left:0; width:140px; height:140px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(24,255,0,.13),transparent 70%); opacity:0; transition:opacity 250ms ease; }
.faixa-area { min-height:176px; position:relative; text-align:center; margin-top:1.5rem; }
.faixa-marquise { width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden; }
.faixa-trilho { display:flex; align-items:center; }
.faixa-trilho > .selos { width:100%; flex-shrink:0; justify-content:center; padding-inline:1rem; }
.faixa-ativa .faixa-marquise { mask-image:linear-gradient(90deg,transparent 0%,black 15%,black 85%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 15%,black 85%,transparent 100%); }
.faixa-ativa .faixa-trilho { width:max-content; animation:faixaAndar 45s linear infinite; }
.faixa-ativa .faixa-trilho > .selos { width:max-content; min-width:100vw; flex-wrap:nowrap; justify-content:space-around; gap:.65rem; padding-inline:.325rem; }
.faixa-ativa .selos li { white-space:nowrap; }
.faixa-ativa:hover .faixa-trilho,.faixa-ativa:focus-within .faixa-trilho,.faixa-pausada .faixa-trilho,.efeito-pausado .faixa-trilho { animation-play-state:paused; }
.faixa-controle { font-size:.6875rem; padding:2px 8px; border:1px solid var(--border-subtle); border-radius:var(--radius-pill); opacity:.65; margin:0; min-height:44px; }
.faixa-controle:focus-visible { opacity:1; }
.opcao.selecionada { box-shadow:0 0 0 1px var(--primary-green),0 0 16px -2px rgba(10,255,31,.25); }
.selos-copia { display:none; }
.faixa-ativa .selos-copia { display:flex; }
.respirar #comecar::after { animation:botaoRespira 4s ease-in-out infinite; }
.respirar #comecar:hover::after,.respirar #comecar:focus-visible::after { animation-play-state:paused; }
@keyframes faixaAndar { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@keyframes botaoRespira { 0%,100% { opacity:.3; } 50% { opacity:.85; } }
@media (min-width:700px) { .mapa-estatico { width:min(100%,400px); height:400px; } }
@media (max-width:699px) {
  .mapa-estatico { margin-bottom:clamp(1rem,2.5vw,1.5rem); }
  #resultado .mapa-estatico { width:110px; height:110px; }
  #resultado .mapa-estatico canvas { width:110px; height:110px; }
}
@media (max-width:339px) { .telefone { transform:none !important; min-height:0; } }
@media (prefers-reduced-motion:reduce) {
  *,::before,::after { animation:none !important; transition:none !important; }
  .telefone { transform:none !important; }
  .efeito-fundo canvas,.mapa-estatico canvas,.selos-copia,.faixa-controle { display:none !important; }
  .mapa-estatico svg { visibility:visible !important; }
  .faixa-ativa .faixa-marquise { mask-image:none; -webkit-mask-image:none; }
  .faixa-ativa .faixa-trilho { width:100%; transform:none; }
  .faixa-ativa .faixa-trilho > .selos { width:100%; min-width:0; flex-wrap:wrap; }
  .faixa-ativa .selos li { white-space:normal; }
}

@media (max-height:699px), (max-width:699px) { #resultado .telefone { min-height:0; } }