/* MachineCuts · prévia do site.
   Marca: topo, rodapé, Maq e ferramenta em preto #111111 e branco. Cores do pôr do sol só no conteúdo do Início
   e nas comemorações (decisão 0020). Texto preto sobre laranja, coral, dourado, areia e céu; branco sobre anoitecer e mar. */
:root {
  --preto: #111111; --branco: #FFFFFF; --fundo: #F5F5F2; --linha: #D6D6D0; --texto2: #4A4A47;
  --sol: #FF8A1F; --coral: #FF4F8B; --ouro: #FFD60A; --areia: #FFE9C7; --lilas: #7C5CFF; --anoitecer: #2A1450; --mar: #0B4F6C; --ceu: #2EC4FF;
  --ed-fundo: #161616; --ed-painel: #1F1F1F; --ed-trilha: #262626; --ed-linha: #3A3A3A; --ed-texto2: #BDBDB8;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--fundo); color: var(--preto); font: 400 16px/1.5 Rubik, system-ui, sans-serif }
button { font: inherit; color: inherit }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid var(--preto); outline-offset: 2px; box-shadow: 0 0 0 2px var(--branco) }
.editor :focus-visible, .estrada-faixa :focus-visible, .vip :focus-visible { outline-color: var(--branco); box-shadow: 0 0 0 2px var(--preto) }
.pular { position: absolute; left: -999px; top: 8px; background: var(--preto); color: var(--branco); padding: 8px 12px; border-radius: 8px; z-index: 50 }
.pular:focus { left: 8px }
.miudo { font-size: 13px; color: var(--texto2); margin: 0 }
h2 { font: 800 30px/1.1 Rubik, sans-serif; letter-spacing: -0.02em; margin: 0 0 16px }

/* Botões: área de toque de 44 px */
.btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--preto); background: var(--branco); color: var(--preto); font: 600 15px/1.1 Rubik, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; white-space: nowrap; text-decoration: none }
.btn.prim, .btn[aria-pressed="true"] { background: var(--preto); color: var(--branco) }
.btn.grande { min-height: 52px; padding: 0 28px; font-size: 17px }
.btn.largo { width: 100% }
.btn.link { border-color: transparent; background: transparent; text-decoration: underline; white-space: normal }
.btn.ico { min-width: 44px; padding: 0 10px }
.btn:disabled { opacity: .4; cursor: not-allowed }
.btn.claro { background: var(--branco); color: var(--preto); border-color: var(--branco) }
.btn.ouro { background: var(--ouro); color: var(--preto); border-color: var(--preto) }
.btn.escuro { background: #2A2A2A; color: var(--branco); border-color: #4A4A4A }
.btn.escuro[aria-pressed="true"] { background: var(--branco); color: var(--preto); border-color: var(--branco) }
.btn.prim-claro { background: var(--branco); color: var(--preto); border-color: var(--branco) }
.pagina > *, .ed-meio > * { min-width: 0 }

/* Topo (sempre preto e branco); créditos no canto direito, sempre à vista */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: rgba(245, 245, 242, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha) }
.marca { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 10px }
.marca-maq { width: 40px; height: 40px; display: block }
.marca-nome { display: flex; align-items: center; gap: 2px; font: 800 22px/1 Rubik, sans-serif; letter-spacing: -0.03em }
.marca-nome svg { width: 17px; height: 13px; margin-top: 3px }
.menu { display: flex; gap: 4px; margin-right: auto }
.menu button { border: 0; background: none; padding: 10px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; min-height: 44px }
.menu button[aria-current="page"] { background: var(--preto); color: var(--branco) }
.menu button:not([aria-current="page"]):hover { background: #E9E9E4 }
.topo-dir { display: flex; align-items: center; gap: 10px }
.creditos { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; border: 2px solid var(--preto); background: var(--branco); border-radius: 999px; padding: 0 14px; cursor: pointer; white-space: nowrap }
.creditos .moeda { width: 20px; height: 20px; border-radius: 50%; background: var(--preto); color: var(--branco); display: grid; place-items: center; font-size: 11px; font-weight: 800 }
.creditos.pulsa { animation: pulsa .6s ease }
@keyframes pulsa { 50% { transform: scale(1.08) } }
.conta { position: relative }
.avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--preto); background: var(--branco); cursor: pointer; display: grid; place-items: center; padding: 0 }
.avatar-maq { width: 32px; height: 32px; display: block }
.avatar.grande { width: 64px; height: 64px; font-size: 26px; cursor: default }
.conta-menu { position: absolute; right: 0; top: 52px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 6px; min-width: 210px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); display: flex; flex-direction: column }
.conta-menu button { text-align: left; border: 0; background: none; padding: 12px; border-radius: 10px; cursor: pointer; min-height: 44px }
.conta-menu button:hover { background: var(--fundo) }
.barra-baixo { display: none }

/* ===== Início: vitrine com as cores do pôr do sol (decisão 0020) =====
   Ideia: os vídeos verticais "de celular" do clima de Flórida que o GTA 6 mostrou, com desenhos nossos.
   Nada de arte, logo ou fonte da Rockstar. Títulos em Big Shoulders Display (cartaz condensado). */
.carrossel { position: relative; overflow: hidden; display: grid; color: var(--areia); min-height: 680px }
.defs-ocultas { position: absolute; width: 0; height: 0 }
/* Céu de pôr do sol em degradê, escurecido à esquerda para o texto ficar legível */
.cena { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(27, 11, 58, .88) 0%, rgba(27, 11, 58, .6) 32%, rgba(27, 11, 58, 0) 58%),
    linear-gradient(180deg, #1B0B3A 0%, #2E1257 20%, #5A1E7A 38%, #A12F86 54%, #E5487A 66%, #FF7A4C 78%, #FFB347 88%, #FFD27A 100%) }
.sol-grande { position: absolute; width: 380px; aspect-ratio: 1; border-radius: 50%; left: 60%; bottom: 40px; background: radial-gradient(circle, #FFF6D0 0%, #FFE07A 34%, #FFB347 62%, rgba(255, 122, 76, 0) 71%) }
.skyline { position: absolute; left: 0; right: 0; bottom: 128px; width: 100%; height: 90px; fill: #2A1048; opacity: .92 }
.mar { position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 179, 71, .18) 13px 15px), linear-gradient(180deg, #5A1E7A 0%, #2A1450 55%, #170A2B 100%) }
.reflexo { position: absolute; left: calc(60% + 110px); width: 160px; bottom: 0; height: 130px; background: repeating-linear-gradient(180deg, rgba(255, 214, 120, .85) 0 4px, transparent 4px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent) }
.coqueiro { position: absolute; color: #170A2B; fill: #170A2B; width: auto }
.coqueiro-e { left: -70px; bottom: 70px; height: 92%; transform: scaleX(-1) rotate(4deg) }
.coqueiro-d { right: -40px; bottom: 96px; height: 84% }
.coqueiro-d2 { right: 150px; bottom: 112px; height: 56%; transform: scaleX(-1) rotate(-6deg) }
/* Os dois banners ocupam o mesmo lugar e se alternam */
.slide { grid-area: 1 / 1; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s }
.slide.ativo { opacity: 1; visibility: visible }
.slide-nossa h1 { margin: 0; font: 900 clamp(76px, 9.5vw, 138px)/.86 'Big Shoulders Display', 'Rubik', sans-serif; letter-spacing: -0.01em; color: var(--areia) }
.palco-texto { position: relative; z-index: 2; padding: 72px 24px 150px max(84px, calc((100vw - 1180px) / 2)); display: flex; flex-direction: column; gap: 22px }
.palco-sub { margin: 0; font-size: 18px; line-height: 1.55; max-width: 31em; color: #EDE7FF }
.palco-botoes { display: flex; gap: 12px; flex-wrap: wrap }
.btn.sol { background: var(--sol); color: var(--preto); border-color: var(--sol) }
.btn.contorno-claro { background: transparent; color: var(--areia); border-color: var(--areia) }
.palco-celulares { position: relative; z-index: 2; height: 600px; margin-top: 30px }
.celular { position: absolute; margin: 0; width: 200px; aspect-ratio: 9 / 19; border: 8px solid #1A1426; border-radius: 30px; background: #000; overflow: hidden; box-shadow: 0 30px 60px rgba(42, 20, 80, .55) }
.celular canvas { width: 100%; height: 100%; object-fit: cover; display: block }
.celular::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sol), var(--coral) 55%, var(--anoitecer)); mix-blend-mode: color; pointer-events: none }
.celular figcaption { position: absolute; z-index: 2; left: 10px; right: 46px; bottom: 14px; color: #fff; font-size: 12px; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 2px }
.celular figcaption b { font-size: 13px }
.contador { position: absolute; z-index: 2; right: 8px; bottom: 16px; color: #fff; font: 800 12px/1 Rubik, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8) }
.contador::before { content: ""; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) }
.celular.c1 { left: 2%; top: 70px; transform: rotate(-8deg) }
.celular.c2 { left: 50%; top: 10px; width: 236px; z-index: 2; transform: translateX(-50%) }
.celular.c3 { right: 4%; top: 86px; transform: rotate(7deg) }
.aviso-exemplo { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: var(--areia); white-space: nowrap }
.selo-celular { position: absolute; z-index: 2; top: 12px; right: 10px; display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .92); color: var(--preto); border-radius: 999px; padding: 3px 8px 3px 3px; font: 800 10px/1 Rubik, sans-serif }
.selo-celular-maq { width: 16px; height: 16px; display: block }
.maq-vitrine { position: absolute; z-index: 3; left: 2%; bottom: 36px; width: 128px; height: 128px; border-radius: 50%; background: var(--branco); border: 4px solid var(--preto); padding: 14px; box-shadow: 0 16px 34px rgba(23, 10, 43, .55) }
.maq-vitrine span { width: 100%; height: 100%; display: block }
/* Banner 2: Temporada GTA 6, o recado agressivo (sem prometer dinheiro) */
.slide-gta { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center }
.gta-texto { padding: 56px 24px 150px max(84px, calc((100vw - 1180px) / 2)); display: flex; flex-direction: column; gap: 14px; max-width: 820px }
.gta-chamada { align-self: flex-start; margin: 0; background: var(--ouro); color: var(--preto); font: 800 22px/1 'Big Shoulders Display', 'Rubik', sans-serif; padding: 8px 14px; border-radius: 6px; transform: rotate(-2deg) }
.slide-gta h2 { margin: 0; font: 900 clamp(46px, 5.2vw, 82px)/.9 'Big Shoulders Display', 'Rubik', sans-serif; color: var(--areia) }
.slide-gta h2 span { display: block; color: var(--ouro) }
.gta-texto p:not(.gta-chamada) { margin: 0; font-size: 18px; line-height: 1.55; color: #EDE7FF; max-width: 36em }
.gta-arte { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 40px 24px 140px }
.data-grande { margin: 0 0 -26px; font: 900 clamp(110px, 12.5vw, 200px)/.82 'Big Shoulders Display', 'Rubik', sans-serif; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #FFF4D0 0%, #FFD60A 30%, #FF8A1F 58%, #FF4F8B 82%, #7C5CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #FFF4D0; filter: drop-shadow(0 8px 0 #170A2B); transform: rotate(-4deg) }
.carimbo { width: 200px; height: 200px; color: #2A1450; transform: rotate(-10deg); font-family: 'Big Shoulders Display', 'Rubik', sans-serif; position: relative; z-index: 1 }
/* Setas < e > nas laterais para passar os banners */
.seta { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--areia); background: rgba(23, 10, 43, .55); color: var(--areia); display: grid; place-items: center; cursor: pointer; padding: 0 }
.seta svg { width: 24px; height: 24px }
.seta:hover { background: rgba(23, 10, 43, .85) }
.seta-ant { left: 14px } .seta-prox { right: 14px }
.carrossel-controles { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(23, 10, 43, .6); border-radius: 999px; padding: 6px 10px }
.carrossel-pausa { min-width: 44px; min-height: 44px; border-radius: 50%; border: 2px solid var(--areia); background: transparent; color: var(--areia); font: 700 14px/1 Rubik, sans-serif; cursor: pointer }
.ponto { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0 }
.ponto::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--areia) }
.ponto[aria-current="true"]::before { background: var(--areia) }
.carrossel :focus-visible { outline-color: var(--areia); box-shadow: 0 0 0 2px #170A2B }

.faixa-conteudo { max-width: 1180px; margin: 0 auto; padding: 64px 24px }
.faixa-conteudo h2, .vip strong { font: 900 clamp(38px, 4.6vw, 58px)/.95 'Big Shoulders Display', 'Rubik', sans-serif; letter-spacing: 0 }
.faixa-conteudo .sub { color: var(--texto2); margin: -4px 0 24px; max-width: 46em }


/* Notícias como cartões-postais, cada um com o "selo" que diz a data */
.grade-postais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 8px }
.postal { position: relative; background: var(--branco); border-radius: 6px; padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 0 var(--linha), 0 12px 24px rgba(42, 20, 80, .10) }
.postal:nth-child(odd) { transform: rotate(-1.2deg) } .postal:nth-child(even) { transform: rotate(1deg) }
.postal-foto { aspect-ratio: 12 / 7; border-radius: 3px; overflow: hidden; display: block }
.postal-foto svg { width: 100%; height: 100%; display: block }
.p-sol .postal-foto { background: var(--sol) } .p-coral .postal-foto { background: var(--coral) } .p-ceu .postal-foto { background: var(--ceu) } .p-ouro .postal-foto { background: var(--ouro) }
.postal-selo { position: absolute; top: -10px; right: 12px; background: var(--areia); color: var(--anoitecer); border: 2px dashed var(--anoitecer); outline: 4px solid var(--areia); padding: 6px 8px; font: 800 16px/1 'Big Shoulders Display', 'Rubik', sans-serif; transform: rotate(5deg) }
.postal h3 { margin: 4px 4px 0; font: 800 28px/1 'Big Shoulders Display', 'Rubik', sans-serif }
.postal p { margin: 0 4px; color: var(--texto2); flex: 1 }
.postal .btn { align-self: flex-start; margin-left: 4px }

/* Programa de Parceiros como uma estrada com placas de saída: cada placa é uma meta */
.estrada-faixa { max-width: none; background: var(--anoitecer); color: var(--areia); padding-left: max(24px, calc((100vw - 1180px) / 2)); padding-right: max(24px, calc((100vw - 1180px) / 2)) }
.estrada-texto { max-width: 46em }
.estrada-texto p { color: #EDE7FF }
.estrada-faixa .miudo { color: #CFC3EC }
.regra-grande { margin: 0 0 12px; font: 900 clamp(34px, 4vw, 52px)/1 'Big Shoulders Display', 'Rubik', sans-serif; color: var(--ouro) !important }
.estrada { list-style: none; margin: 36px 0 0; padding: 0 0 46px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative }
.estrada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ouro) 0 50%, transparent 50%) 0 50% / 36px 4px repeat-x, #2E2A38 }
.estrada li { display: flex; flex-direction: column; align-items: center }
.estrada li::after { content: ""; width: 6px; height: 34px; background: #8F8AA0 }
.placa { width: 100%; min-height: 96px; background: var(--mar); color: #fff; border: 3px solid #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.25; box-shadow: 0 0 0 3px var(--mar) }
.placa b { font: 900 28px/1 'Big Shoulders Display', 'Rubik', sans-serif }
.placa.final { background: var(--ouro); color: var(--preto); border-color: var(--preto); box-shadow: 0 0 0 3px var(--ouro) }

/* O caminho do corte: é uma sequência, por isso tem número */
.como { counter-reset: fase }
.como ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px }
.como li { counter-increment: fase; display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; align-items: start; padding-top: 14px; border-top: 3px solid var(--preto) }
.como-maq { width: 64px; height: 64px; display: block; grid-row: 1 / span 2 }
.como li strong { font-size: 18px }
.como li strong::before { content: counter(fase) ". "; color: var(--coral); font-family: 'Big Shoulders Display', 'Rubik', sans-serif; font-weight: 900; font-size: 22px }
.como li span:last-child { color: var(--texto2) }

/* MaqCoins: Fundador em destaque, pacotes de depois numa lista simples */
.precos-linha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start }
.preco-fundador { background: var(--sol); color: var(--preto); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.preco-fundador h3 { margin: 0; font: 900 34px/1 'Big Shoulders Display', 'Rubik', sans-serif }
.preco-fundador .valor { margin: 0; font: 900 88px/.9 'Big Shoulders Display', 'Rubik', sans-serif }
.preco-fundador p { margin: 0; max-width: 34em }
.precos-depois { list-style: none; margin: 0; padding: 0 }
.precos-depois li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 0; border-bottom: 2px solid var(--linha) }
.precos-depois b { font-size: 18px } .precos-depois span { font: 900 30px/1 'Big Shoulders Display', 'Rubik', sans-serif; grid-row: 1 / span 2; grid-column: 2; align-self: center }
.precos-depois small { color: var(--texto2) }
.precos-depois .nota { display: block; border: 0; color: var(--texto2); font-size: 14px }

.duvidas details { background: var(--branco); border-radius: 14px; margin: 8px 0; padding: 0 16px; max-width: 760px }
.duvidas summary { font-weight: 700; cursor: pointer; min-height: 52px; display: flex; align-items: center }
.duvidas details p { margin: 0 0 14px; color: var(--texto2) }
.vip { background: var(--mar); color: var(--branco); display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; padding: 48px 24px }
.vip p { margin: 0; font-size: 18px; max-width: 40em }
.vip strong { display: block; font-size: 40px; margin-bottom: 6px; color: var(--ouro) }

/* ===== Maq: a ferramenta, em preto e branco ===== */
.faixa-creditos { display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; padding: 10px 16px; background: var(--branco); border-bottom: 1px solid var(--linha); font-size: 14px }
.faixa-creditos strong { font-weight: 800 }
.envio-pagina { max-width: 560px; margin: 0 auto; padding: 36px 16px 56px }
.envio { background: var(--branco); border: 3px dashed var(--preto); border-radius: 28px; padding: 28px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: background .15s }
.envio.sobre { background: #EDEDE8 }
.envio-maq { width: 170px; height: 170px }
.envio-titulo { font: 800 26px/1.1 Rubik, sans-serif; margin: 0 }
.tela.processando { min-height: calc(100vh - 180px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 16px; text-align: center }
.palco-maq { position: relative; width: min(320px, 70vw); height: min(320px, 70vw); display: grid; place-items: center }
.maq-grande { position: relative; z-index: 2; width: 72%; height: 72% }
.fase-titulo { font: 800 28px/1.15 Rubik, sans-serif; margin: 0 }
.fases { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.fases li { border: 2px solid var(--linha); color: var(--texto2); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px }
.fases li.atual { border-color: var(--preto); color: var(--preto); font-weight: 800 }
.fases li.feita { border-color: var(--preto); color: var(--preto) }
.fases li.feita::before { content: "✓ " }
.confete { position: absolute; z-index: 1; border-radius: 2px; pointer-events: none; animation: confete 1.9s cubic-bezier(.15, .7, .35, 1) forwards }
@keyframes confete {
  0% { transform: translate(-50%, -50%) rotate(0) }
  35% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--r) * .4)) }
  100% { transform: translate(calc(-50% + var(--dx) * 1.35), calc(-50% + var(--dy) + 300px)) rotate(var(--r)); opacity: 0 }
}
.resumo { background: var(--branco); border-radius: 18px; padding: 14px 20px; text-align: left; font-size: 15px }
.resumo ul { margin: 6px 0 0; padding-left: 20px }
.exp-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }
.cortes { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px }
.cortes-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.cortes-topo h2 { margin: 0 }
.cortes-topo > div:nth-child(2) { margin-right: auto }
.cortes-maq { width: 72px; height: 72px; position: relative }
.grade-cortes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px }
.cartao-corte { background: var(--branco); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px }
.cartao-corte canvas { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: #222; display: block }
.cartao-corte h3 { margin: 0; font-size: 17px }
.cartao-corte .acoes { display: flex; gap: 8px; flex-wrap: wrap } .cartao-corte .acoes .btn { flex: 1; padding: 0 10px }
.miniatura { position: relative }
.miniatura img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; background: #222 }
.miniatura .selo-exemplo { top: 10px; left: 10px }
.miniatura .dur { position: absolute; right: 10px; top: 10px; background: var(--preto); color: var(--branco); font: 700 12px Rubik, sans-serif; padding: 3px 8px; border-radius: 999px }
.tag { display: inline-block; font-size: 12px; font-weight: 800; border: 2px solid var(--preto); border-radius: 999px; padding: 1px 8px; margin-right: 4px }
.tag.cheia { background: var(--preto); color: var(--branco) }

/* Editor: área escura, como os editores de vídeo */
.editor { background: var(--ed-fundo); color: var(--branco); padding: 12px 16px 20px; min-height: calc(100vh - 62px) }
.ed-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.ed-topo h2 { margin: 0 auto 0 0; font: 700 18px/1.2 Rubik, sans-serif }
.ed-topo-acoes { display: flex; gap: 8px; flex-wrap: wrap }
.ed-meio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start }
.ed-previa { background: #0E0E0E; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px }
.quadro { position: relative; height: min(56vh, 600px); max-width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; overflow: hidden; container-type: inline-size; user-select: none; touch-action: none }
.quadro canvas { width: 100%; height: 100%; display: block }
.quadro[data-p="1:1"] { aspect-ratio: 1 / 1 }
.quadro[data-p="16:9"] { aspect-ratio: 16 / 9; height: auto; width: min(100%, 860px) }
.camada { position: absolute; inset: 0 }
.selo-exemplo { position: absolute; top: 8px; left: 8px; z-index: 3; background: var(--branco); color: var(--preto); font: 700 11px Rubik, sans-serif; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; pointer-events: none }
.transporte { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center }
.btn.tocar { min-width: 56px; font-size: 18px }
.relogio { font: 700 14px/1 ui-monospace, Consolas, monospace; padding: 0 8px; min-width: 150px; text-align: center }
.vel-rapida { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ed-texto2) }
.vel-rapida select, .inspetor select { min-height: 44px; border-radius: 10px; background: #2A2A2A; color: var(--branco); border: 2px solid #4A4A4A; padding: 0 8px; font: 600 14px Rubik, sans-serif }
.legenda-tela { position: absolute; left: 6%; right: 6%; margin: 0; text-align: center; font: 800 6.5cqw/1.25 Rubik, system-ui, sans-serif; pointer-events: none; z-index: 2 }
.legenda-tela.tP { font-size: 5cqw } .legenda-tela.tG { font-size: 8.5cqw }
.legenda-tela.p-topo { top: 14% } .legenda-tela.p-meio { top: 50%; transform: translateY(-50%) } .legenda-tela.p-base { bottom: 12% }
.legenda-tela.contorno { color: #fff; text-shadow: 0 0 3px #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000 }
.legenda-tela span { padding: .06em .3em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.legenda-tela.branco span { background: #fff; color: #111 }
.legenda-tela.preto span { background: #111; color: #fff }
/* Selo do Programa de Parceiros: discreto, no alto, depois do 1º segundo; cartela de 1 s no fim */
.selo-mc { position: absolute; top: 4.5%; z-index: 2; display: flex; align-items: center; gap: 1.2cqw; background: rgba(255, 255, 255, .9); color: var(--preto); border-radius: 999px; padding: .8cqw 2.4cqw .8cqw 1cqw; font: 800 3.4cqw/1 Rubik, sans-serif; letter-spacing: -0.02em; pointer-events: none }
.selo-mc.dir { right: 4% } .selo-mc.esq { left: 4% }
.selo-mc svg { width: 5.5cqw; height: 5.5cqw }
.cartela-mc { position: absolute; inset: 0; z-index: 4; background: var(--branco); color: var(--preto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; pointer-events: none }
.cartela-mc svg { width: 34cqw; height: 34cqw }
.cartela-mc p { margin: 0; font: 600 4.5cqw/1.2 Rubik, sans-serif } .cartela-mc strong { font-family: Rubik, sans-serif; font-weight: 800 }
.adesivo { position: absolute; transform-origin: center; cursor: move; touch-action: none; z-index: 1; outline: none }
.adesivo img { width: 100%; display: block; pointer-events: none; user-select: none }
.adesivo.sel { box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--preto) }
.adesivo .h { display: none; position: absolute; width: 22px; height: 22px; background: var(--branco); border: 3px solid var(--preto); border-radius: 50%; touch-action: none }
.adesivo .h::before { content: ""; position: absolute; inset: -11px }
.adesivo.sel .h { display: block }
.h-ne { right: -11px; top: -11px; cursor: nesw-resize } .h-no { left: -11px; top: -11px; cursor: nwse-resize }
.h-se { right: -11px; bottom: -11px; cursor: nwse-resize } .h-so { left: -11px; bottom: -11px; cursor: nesw-resize }
.h-gira { left: 50%; top: -44px; margin-left: -11px; cursor: grab }
.h-gira::after { content: ""; position: absolute; left: 7px; top: 19px; width: 2px; height: 22px; background: var(--branco) }
.inspetor { background: var(--ed-painel); border-radius: 16px; padding: 14px; max-height: calc(56vh + 70px); overflow-y: auto }
.inspetor h3 { margin: 0 0 4px; font-size: 16px }
.inspetor .dica { color: var(--ed-texto2); font-size: 13px; margin: 0 0 10px }
.grupo { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px }
.grupo legend { font-weight: 700; font-size: 13px; margin-bottom: 6px; padding: 0; color: var(--ed-texto2) }
.campo-ed { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 13px; font-weight: 700; color: var(--ed-texto2) }
.campo-ed input[type="text"], .campo-ed textarea { min-height: 44px; border-radius: 10px; background: #2A2A2A; color: var(--branco); border: 2px solid #4A4A4A; padding: 8px 10px; font: 600 15px Rubik, sans-serif }
.campo-ed textarea { min-height: 70px; resize: vertical }
.campo-faixa { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; margin: 8px 0; font-size: 13px; font-weight: 700; color: var(--ed-texto2) }
.campo-faixa label { grid-column: 1 / -1 }
.campo-faixa output { color: var(--branco); min-width: 52px; text-align: right }
.editor input[type="range"] { width: 100%; height: 44px; accent-color: var(--branco) }
.tempos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.tempos > *, .campo-ed input { min-width: 0; width: 100% }
.inspetor .linha-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px }
.erro { border: 2px solid var(--branco); border-radius: 10px; padding: 8px 10px; font-weight: 600; margin: 8px 0 }
.erro::before { content: "⚠ " }
.ferramentas { display: flex; gap: 6px; align-items: center; margin: 14px 0 8px; overflow-x: auto; padding-bottom: 4px }
.ferramentas .sep { width: 1px; height: 28px; background: var(--ed-linha); margin: 0 4px; flex: none }
.menu-adesivo { position: relative }
.lista-adesivos { position: absolute; left: 0; bottom: 52px; z-index: 15; background: var(--ed-painel); border: 1px solid var(--ed-linha); border-radius: 14px; padding: 10px; width: 290px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5) }
.lista-adesivos p { margin: 0 0 8px; font-size: 13px; color: var(--ed-texto2) }
.lista-adesivos .prontos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px }
.lista-adesivos .prontos button { background: #2E2E2E; border: 2px solid #4A4A4A; border-radius: 12px; padding: 6px; cursor: pointer; min-height: 56px }
.lista-adesivos .prontos img { width: 100%; height: 40px; object-fit: contain; display: block }
.linha-tempo { background: var(--ed-painel); border-radius: 14px; overflow: hidden; user-select: none }
.lt-grade { display: grid; grid-template-columns: 196px minmax(0, 1fr) }
.lt-cabecas { border-right: 1px solid var(--ed-linha); background: #1B1B1B }
.lt-canto { height: 30px; border-bottom: 1px solid var(--ed-linha) }
.lt-cab { height: 52px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--ed-linha); font-size: 13px; font-weight: 700 }
.lt-cab.video { height: 64px }
.lt-cab .nome { margin-right: auto; display: flex; flex-direction: column; line-height: 1.15 }
.lt-cab .nome small { font-weight: 400; color: var(--ed-texto2); font-size: 11px }
.lt-cab .btn { min-height: 36px; min-width: 36px; padding: 0 8px; font-size: 12px }
.lt-cab input[type="range"] { width: 54px; height: 36px }
.lt-rolagem { overflow-x: auto; overflow-y: hidden; position: relative }
.lt-conteudo { position: relative; min-width: 100% }
.regua { height: 30px; border-bottom: 1px solid var(--ed-linha); position: relative; cursor: col-resize; touch-action: none; background: #1B1B1B }
.regua span { position: absolute; top: 0; bottom: 0; border-left: 1px solid #555; font-size: 11px; color: var(--ed-texto2); padding: 2px 0 0 4px; pointer-events: none }
.regua span.menor { top: 20px }
.trilha { position: relative; height: 52px; border-bottom: 1px solid var(--ed-linha); background: var(--ed-trilha) }
.trilha.video { height: 64px }
.trilha.oculta .clipe { opacity: .35 }
.clipe { position: absolute; top: 5px; bottom: 5px; border-radius: 8px; border: 2px solid #5A5A5A; background: #3A3A3A; color: var(--branco); overflow: hidden; font: 600 12px/1.2 Rubik, sans-serif; padding: 4px 10px; text-align: left; cursor: grab; touch-action: none; display: flex; align-items: center; gap: 6px; white-space: nowrap }
.clipe.fixo { cursor: pointer }
.clipe.sel { border-color: var(--branco); box-shadow: 0 0 0 2px var(--branco) }
.clipe.video { background: repeating-linear-gradient(90deg, #4A4A4A 0 46px, #3E3E3E 46px 48px) }
.clipe.legenda { background: #E9E9E4; color: var(--preto); border-color: #CFCFC9 }
.clipe.legenda.sel { border-color: var(--branco) }
.clipe.adesivo-clipe img { height: 30px; width: 30px; object-fit: contain; background: #5A5A5A; border-radius: 4px }
.clipe canvas.onda { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9 }
.clipe .rotulo { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis }
.clipe .vel { position: relative; z-index: 1; background: var(--branco); color: var(--preto); border-radius: 999px; padding: 1px 6px; font-size: 11px; font-weight: 800 }
.borda { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 2; touch-action: none }
.borda::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7) }
.borda.e { left: 0 } .borda.e::after { left: 3px } .borda.d { right: 0 } .borda.d::after { right: 3px }
.cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #FFFFFF; pointer-events: none; z-index: 5 }
.cursor::before { content: ""; position: absolute; top: 0; left: -7px; border: 8px solid transparent; border-top: 10px solid #FFFFFF }
.vazio { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ed-texto2); pointer-events: none }
.atalhos { color: var(--ed-texto2); font-size: 12px; margin: 10px 2px 0 }

/* ===== Meu perfil (preto e branco) ===== */
.perfil-fora { max-width: 520px; margin: 0 auto; padding: 56px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.perfil-fora-maq { width: 120px; height: 120px }
.perfil-fora h2 { margin: 0 } .perfil-fora p { margin: 0 0 8px; color: var(--texto2) }
.perfil { position: relative; max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px }
.perfil-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px }
.perfil-topo h2 { margin: 0 }
.saldos { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap }
.saldo { background: var(--branco); border: 2px solid var(--preto); border-radius: 16px; padding: 10px 16px; min-width: 170px; display: flex; flex-direction: column }
.saldo span { font-size: 13px; font-weight: 700; color: var(--texto2) }
.saldo strong { font: 800 28px/1.1 Rubik, sans-serif }
.saldo small { font-size: 12px; color: var(--texto2) }
.abas-perfil { display: flex; gap: 6px; border-bottom: 2px solid var(--linha); margin-bottom: 20px; overflow-x: auto }
.abas-perfil button { border: 0; background: none; padding: 12px 16px; font-weight: 700; cursor: pointer; min-height: 48px; border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap }
.abas-perfil button[aria-selected="true"] { border-bottom-color: var(--preto) }
.painel-perfil:focus { outline: none }
.bloco { background: var(--branco); border-radius: 20px; padding: 18px; margin-bottom: 16px }
.bloco h3 { margin: 0 0 8px; font-size: 18px }
.bloco p { margin: 0 0 10px }
.grade-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px }
.pacote { border: 2px solid var(--linha); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px }
.pacote.destaque { border-color: var(--preto); border-width: 3px }
.pacote strong { font: 800 26px/1 Rubik, sans-serif }
.pacote .btn { margin-top: 8px }
.lista { list-style: none; margin: 0; padding: 0 }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha) }
.lista li span:last-child { font-weight: 800; white-space: nowrap }
.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px }
.metrica { background: var(--branco); border-radius: 16px; padding: 14px; border: 2px solid var(--preto) }
.metrica span { font-size: 13px; font-weight: 700; color: var(--texto2) } .metrica strong { display: block; font: 800 28px/1.1 Rubik, sans-serif }
.tabela-cortes { width: 100%; border-collapse: collapse; font-size: 14px }
.tabela-cortes th, .tabela-cortes td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle }
.tabela-cortes th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto2) }
.progresso { height: 10px; background: #E6E6E1; border-radius: 999px; overflow: hidden; min-width: 90px }
.progresso span { display: block; height: 100%; background: var(--preto) }
.passos-parceria { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 12px }
.passos-parceria > li { border: 2px solid var(--linha); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px }
.passos-parceria .marcar { margin: 2px 0 }
.termos { max-height: 190px; overflow-y: auto; border: 2px solid var(--preto); border-radius: 12px; padding: 4px 14px; font-size: 14px; background: var(--fundo) }
.termos li { margin: 8px 0 }
.lista.metas li { flex-wrap: wrap; align-items: center }
.lista.metas li.feita span:first-child { font-weight: 800 }
.lista.metas .progresso { flex-basis: 100% }
.form-vincular { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: end }
.form-vincular select, .form-vincular input { min-height: 46px; border: 2px solid var(--preto); border-radius: 12px; padding: 0 12px; font: 500 15px Rubik, sans-serif; background: var(--branco); width: 100%; min-width: 0 }
.tabela-cortes a { color: var(--preto); font-weight: 700 }
.pagamento-parceiro { display: flex; gap: 18px; align-items: center }
.maq-painel { width: 120px; height: 120px; flex: none; position: relative; z-index: 2 }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap }
.marcar { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-weight: 600 }
.marcar input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--preto) }
.rolagem-tabela { overflow-x: auto }

/* Meu Maq: a foto de perfil é o Maq do usuário (decisão 0022) */
.avatar-perfil { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--preto); background: var(--branco); padding: 10px; cursor: pointer; flex: none }
.avatar-perfil span { width: 100%; height: 100%; display: block }
.saldo.meta strong { font-size: 24px }
.grade-expressoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px }
.escolha { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 2px solid var(--linha); border-radius: 16px; background: var(--branco); font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px }
.escolha[aria-pressed="true"] { border-color: var(--preto); box-shadow: inset 0 0 0 2px var(--preto) }
.mini-maq { width: 56px; height: 56px; display: block }
.lista-skins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.lista-skins li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; border: 2px solid var(--linha); border-radius: 16px; padding: 10px 14px }
.lista-skins small { display: block; color: var(--texto2) }
.metas-recompensas li { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 4px 12px; align-items: center }
.metas-recompensas li small { color: var(--texto2); font-weight: 700; text-align: right }
.metas-recompensas li.feita span:first-child, .metas-recompensas li.feita small { color: var(--preto) }
.metas-recompensas .progresso { grid-column: 1 / -1 }

/* Rodapé, diálogos e aviso */
.rodape { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 22px 16px; font-size: 14px; color: var(--texto2); border-top: 1px solid var(--linha) }
.aviso-marca { flex-basis: 100%; text-align: center; font-size: 12px }
.rodape button { border: 0; background: none; cursor: pointer; text-decoration: underline; min-height: 44px; padding: 0 6px; color: var(--texto2) }
.dialogo { border: 0; border-radius: 24px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .3) }
.dialogo::backdrop { background: rgba(17, 17, 17, .55) }
.dialogo form, .pix { padding: 22px; display: flex; flex-direction: column; gap: 10px }
.dlg-topo { display: flex; align-items: center; gap: 10px }
.dlg-topo h2 { margin: 0 auto 0 0; font-size: 21px }
.dlg-maq { width: 48px; height: 48px; display: block }
.abas-login { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.ou { text-align: center; margin: 0; color: var(--texto2); font-size: 13px }
.campo { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px }
.campo input { min-height: 46px; border: 2px solid var(--preto); border-radius: 12px; padding: 0 12px; font: 500 16px Rubik, sans-serif }
.pix-qr { width: 200px; height: 200px; margin: 0 auto; border: 3px solid var(--preto); border-radius: 12px; position: relative; background-size: 100% 100% }
.pix-qr::after { content: "PRÉVIA"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 22px Rubik, sans-serif; color: var(--preto); background: rgba(255, 255, 255, .78); letter-spacing: .1em }
.aviso-previa { margin: 0; font-size: 13px; font-weight: 700; border: 2px dashed var(--preto); border-radius: 10px; padding: 8px 10px }
.aviso-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--preto); color: var(--branco); padding: 12px 18px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100vw - 32px); text-align: center }
.aviso-toast.ver { opacity: 1; transform: translateX(-50%) }

/* Celular: abas embaixo (perto do polegar) e créditos no canto de cima */
@media (max-width: 900px) {
  body { padding-bottom: 72px }
  .topo { padding: 8px 12px; gap: 8px }
  .menu { display: none }
  .topo-dir { margin-left: auto; gap: 6px }
  .marca-nome { font-size: 18px } .marca-maq { width: 34px; height: 34px }
  .creditos { padding: 0 10px; font-size: 13px }
  .barra-baixo { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--branco); border-top: 1px solid var(--linha); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)) }
  .barra-baixo button { border: 0; background: none; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; border-radius: 14px; cursor: pointer }
  .barra-baixo svg { width: 24px; height: 24px; fill: var(--preto) }
  .barra-baixo button[aria-current="page"] { background: var(--preto); color: var(--branco) }
  .barra-baixo button[aria-current="page"] svg { fill: var(--branco) }
  .aviso-toast { bottom: 84px }
  .carrossel { min-height: 0 }
  .cena { background: linear-gradient(180deg, #1B0B3A 0%, #2E1257 30%, #5A1E7A 46%, #A12F86 58%, #E5487A 68%, #FF7A4C 78%, #FFB347 88%, #FFD27A 100%) }
  .sol-grande { width: 240px; left: 50%; transform: translateX(-50%); bottom: 70px }
  .reflexo { left: calc(50% - 60px); width: 120px; height: 90px } .mar { height: 90px } .skyline { bottom: 88px; height: 60px }
  .coqueiro-e { left: -60px; height: 58%; bottom: 60px } .coqueiro-d { right: -50px; height: 52%; bottom: 70px } .coqueiro-d2 { display: none }
  .slide, .slide-gta { grid-template-columns: 1fr }
  .palco-texto { padding: 36px 16px 8px; gap: 16px }
  .slide-nossa h1 { font-size: clamp(64px, 19vw, 100px) }
  .palco-celulares { height: 470px; margin: 0 }
  .celular { width: 136px; border-width: 6px; border-radius: 22px }
  .celular.c2 { width: 160px; top: 4px }
  .celular.c1 { left: -14px; top: 54px } .celular.c3 { right: -14px; top: 66px }
  .celular figcaption { font-size: 10px; left: 7px; right: 36px } .celular figcaption b { font-size: 11px }
  .maq-vitrine { width: 92px; height: 92px; left: 50%; transform: translateX(-50%); bottom: 64px; padding: 10px }
  .aviso-exemplo { bottom: 72px; display: none }
  .gta-texto { padding: 36px 16px 8px }
  .gta-arte { padding: 0 16px 92px } .data-grande { font-size: 96px; margin-bottom: -16px } .carimbo { width: 130px; height: 130px }
  .seta { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px } .seta-ant { left: 10px } .seta-prox { right: 10px }
  .carrossel-controles { bottom: 14px }
  .faixa-conteudo { padding: 44px 16px }
  .estrada-faixa { padding-left: 16px; padding-right: 16px }
  .grade-postais { grid-template-columns: 1fr 1fr }
  .estrada { grid-template-columns: 1fr; padding: 0 0 0 46px; gap: 14px }
  .estrada::after { left: 0; right: auto; top: 0; bottom: 0; width: 28px; height: auto; background: linear-gradient(180deg, var(--ouro) 0 50%, transparent 50%) 50% 0 / 4px 36px repeat-y, #2E2A38 }
  .estrada li::after { display: none }
  .placa { min-height: 0 }
  .como ol { grid-template-columns: 1fr }
  .precos-linha { grid-template-columns: 1fr }
  .perfil { padding: 20px 12px 40px } .saldos { margin-left: 0; width: 100% } .saldo { flex: 1; min-width: 140px }
  .metricas { grid-template-columns: 1fr 1fr }
  .lista-skins li { grid-template-columns: 48px 1fr } .lista-skins li .btn { grid-column: 1 / -1 }
  .metas-recompensas li { grid-template-columns: 1fr auto } .metas-recompensas li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2 }
  .pagamento-parceiro { flex-direction: column; align-items: flex-start }
  .form-vincular { grid-template-columns: 1fr }
  .bloco .btn { white-space: normal }
  .ed-meio { grid-template-columns: 1fr }
  .quadro { height: min(52vh, 520px) }
  .inspetor { max-height: none }
  .lt-grade { grid-template-columns: 96px minmax(0, 1fr) }
  .lt-cab { padding: 0 4px 0 6px; font-size: 11px; gap: 2px }
  .lt-cab .nome small, .lt-cab input[type="range"] { display: none }
  .lt-cab .btn { min-width: 40px; padding: 0 6px; font-size: 11px }
  /* No celular: vídeo, ferramentas e linha do tempo primeiro; ajustes do item embaixo */
  .editor { padding: 10px 8px 16px; display: flex; flex-direction: column }
  .ed-meio { display: contents }
  .ed-topo { order: 0 } .ed-previa { order: 1 } .ferramentas { order: 2 } .linha-tempo { order: 3 } .inspetor { order: 4; margin-top: 12px } .atalhos { order: 5 }
}
@media (max-width: 520px) {
  .marca-nome { display: none }
  .grade-postais { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .confete { display: none } .aviso-toast { transition: none } .creditos.pulsa { animation: none } }

/* Refinamento da vitrine e do perfil: o pôr do sol abre a experiência;
   os espaços de trabalho mantêm a identidade do Maq em preto e branco. */
.carrossel { border-bottom: 6px solid var(--preto) }
.palco-sub { max-width: 29em; font-size: 17px }
.palco-botoes .btn { min-height: 50px; font-size: 16px }
.palco-celulares { max-width: 660px; width: 100%; justify-self: center }
.celular { box-shadow: 0 22px 36px rgba(17, 17, 17, .4); border-color: var(--preto) }
.celular figcaption { right: 12px; bottom: 18px; font-size: 11px; background: rgba(17, 17, 17, .78); padding: 8px; border-radius: 8px }
.celular figcaption b { font-size: 12px }
.celular .contador { display: none }
.vitrine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 1 }
.celular.com-video::after { display: none }
.celular.com-video canvas { visibility: hidden }
.aviso-exemplo { color: #fff; padding: 5px 10px; background: rgba(17, 17, 17, .75); border-radius: 6px }
.postais { padding-top: 50px }
.postal { border: 1px solid var(--linha); box-shadow: 0 4px 0 #E5E2E8; padding: 12px 12px 18px; gap: 12px }
.postal p { font-size: 14px; line-height: 1.55 }
.postal h3 { font-size: 30px }
.duvidas details { border: 1px solid var(--linha) }
.duvidas details[open] { padding-bottom: 4px; border-color: var(--preto) }

/* O perfil funciona como uma bancada pessoal: saldos primeiro, ações em seguida. */
.perfil { max-width: 1120px; padding-top: 36px }
.perfil-topo { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 24px }
.perfil-topo > div:nth-child(2) h2 { font-size: 32px; line-height: 1.1; margin-bottom: 6px }
.avatar-perfil { width: 80px; height: 80px; border-width: 2px }
.saldos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; margin: 8px 0 0; background: var(--branco); border: 1px solid var(--preto); border-radius: 16px; overflow: hidden }
.saldo { min-width: 0; border: 0; border-right: 1px solid var(--linha); border-radius: 0; padding: 20px 24px; gap: 6px; background: transparent }
.saldo:last-child { border-right: 0 }
.saldo strong { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.04em }
.saldo.meta strong { font-size: 24px; min-height: 37px; display: flex; align-items: center; letter-spacing: -.025em }
.saldo small { max-width: 28ch; line-height: 1.45 }
.abas-perfil { gap: 4px; border-bottom: 1px solid var(--preto); margin-bottom: 28px; padding: 0 0 8px }
.abas-perfil button { border-radius: 8px; padding: 11px 16px; border-bottom: 0; margin-bottom: 0; font-size: 14px }
.abas-perfil button[aria-selected="true"] { color: var(--branco); background: var(--preto) }
.abas-perfil button:hover:not([aria-selected="true"]) { background: #E7E7E2 }
.painel-perfil .bloco { padding: 26px; border-radius: 14px; border: 1px solid var(--linha); margin-bottom: 20px }
.bloco h3 { font-size: 21px; line-height: 1.2; margin-bottom: 12px; letter-spacing: -.025em }
.bloco p { max-width: 74ch; line-height: 1.6 }
.bloco > p + .btn, .bloco > .btn { margin-top: 8px }
.grade-pacotes { gap: 18px; margin-top: 18px }
.pacote { border-width: 1px; border-radius: 12px; padding: 20px; gap: 8px }
.pacote.destaque { border-width: 2px; box-shadow: none }
.pacote strong { font-size: 32px; line-height: 1.2 }
.metricas { gap: 0; border: 1px solid var(--preto); background: var(--branco); border-radius: 14px; overflow: hidden; margin-bottom: 24px }
.metrica { border: 0; border-right: 1px solid var(--linha); border-radius: 0; padding: 22px }
.metrica:last-child { border-right: 0 }
.metrica strong { font-size: 30px; font-variant-numeric: tabular-nums; margin-top: 8px }
.tabela-cortes th { text-transform: none; letter-spacing: 0; font-size: 13px; background: var(--fundo) }
.tabela-cortes th, .tabela-cortes td { padding: 16px 12px }
.lista li { padding: 16px 0; gap: 12px 20px }
.lista li:last-child { border-bottom: 0 }
.lista li span:last-child { white-space: normal; text-align: right }
.lista.metas li span:first-child { font-weight: 600 }
.lista.metas .progresso { margin: 4px 0 }
.passos-parceria { gap: 16px }
.passos-parceria > li { border-width: 1px; border-radius: 12px; padding: 20px; gap: 10px }
.passos-parceria > li > strong { font-size: 17px }
.passos-parceria .miudo { max-width: 68ch }
.grade-expressoes { gap: 14px; margin-top: 20px }
.escolha { border-width: 1px; padding: 16px 10px; gap: 12px; border-radius: 12px }
.escolha[aria-pressed="true"] { border-width: 1px; background: var(--fundo); box-shadow: inset 0 0 0 2px var(--preto) }
.lista-skins { gap: 16px; margin-top: 20px }
.lista-skins li { padding: 20px; border-width: 1px; border-radius: 12px; gap: 20px }
.lista-skins small { margin-top: 5px; line-height: 1.5 }
.form-vincular { gap: 14px; margin-top: 18px }
.rodape { padding-top: 28px; padding-bottom: 28px; background: #fff }
.rodape a { color: var(--preto); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; text-underline-offset: 4px; font-weight: 600 }
.rodape .redes-sociais { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.topo-saldos { display: flex; align-items: center; gap: 8px }
#saldo-parceiro-topo, #meta-topo { min-height: 44px; border-radius: 10px; font-size: 12px; line-height: 1.25 }

@media (max-width: 1100px) and (min-width: 901px) {
  .topo { padding-left: 16px; padding-right: 16px; gap: 10px }
  .marca-nome { font-size: 18px }
  .menu button { padding-left: 10px; padding-right: 10px; font-size: 14px }
}
@media (max-width: 900px) {
  .palco-texto { padding-left: 24px; padding-right: 24px; padding-top: 32px }
  .slide-nossa h1 { font-size: clamp(72px, 18vw, 108px) }
  .palco-sub { font-size: 16px; max-width: 34em }
  .palco-botoes { gap: 10px }
  .palco-botoes .btn { font-size: 14px; padding: 0 18px; min-height: 48px }
  .palco-celulares { max-width: 540px; height: 430px; margin-top: 20px }
  .celular.c1 { left: 6%; top: 48px }
  .celular.c2 { top: 0 }
  .celular.c3 { right: 6%; top: 60px }
  .maq-vitrine { left: auto; right: 24px; bottom: 80px; width: 76px; height: 76px; transform: none; padding: 8px; border-width: 3px }
  .aviso-exemplo { display: block; left: 24px; transform: none; bottom: 76px; white-space: normal; max-width: 58%; font-size: 11px }
  .gta-texto { padding: 36px 24px 8px }
  .gta-texto p:not(.gta-chamada) { font-size: 16px; max-width: 35em }
  .slide-gta h2 { font-size: clamp(48px, 10.5vw, 76px) }
  .gta-arte { padding-bottom: 94px }
  .perfil { padding: 24px 16px 44px }
  .perfil-topo { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; margin-bottom: 20px }
  .avatar-perfil { width: 64px; height: 64px; padding: 7px }
  .perfil-topo > div:nth-child(2) h2 { font-size: 28px }
  .saldos { gap: 0; grid-template-columns: 1fr 1fr; margin-top: 6px }
  .saldo { min-width: 0; padding: 16px }
  .saldo:nth-child(2) { border-right: 0 }
  .saldo strong { font-size: 28px }
  .saldo.meta { grid-column: 1 / -1; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center }
  .saldo.meta strong { font-size: 18px; min-height: 0; grid-column: 2; grid-row: 1 / span 2; max-width: 18ch; text-align: right }
  .saldo.meta small { grid-column: 1 }
  .saldo span { font-size: 12px }
  .saldo small { font-size: 11px }
  .abas-perfil { gap: 4px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; margin-bottom: 20px }
  .abas-perfil button { padding: 12px; font-size: 13px }
  .painel-perfil .bloco { padding: 20px 16px; margin-bottom: 16px }
  .bloco h3 { font-size: 20px }
  .bloco p { font-size: 14px }
  .metricas { grid-template-columns: 1fr 1fr; margin-bottom: 20px }
  .metrica { padding: 16px }
  .metrica:nth-child(2) { border-right: 0 }
  .metrica:last-child { grid-column: 1 / -1; border-top: 1px solid var(--linha) }
  .metrica strong { font-size: 26px }
  .passos-parceria > li { padding: 16px }
  .lista-skins li { padding: 16px; gap: 12px }
  .lista-skins li .btn { justify-self: start; grid-column: 2 }
  .grade-expressoes { grid-template-columns: repeat(3, 1fr); gap: 10px }
  .escolha { font-size: 12px; padding: 12px 4px; gap: 8px }
  .lista li { font-size: 14px }
  .rodape { justify-content: flex-start; gap: 0 12px; padding: 24px 16px }
  .rodape > span:first-child { flex-basis: 100%; margin-bottom: 10px }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none } }