/* Painel final oficial (28/10/2026): o mesmo "O que vamos colocar no ar?" da home, em todas as páginas.
   É o resultado final das regras de .fim em home.css, reunido aqui para as páginas que não carregam a home.
   Tudo fica dentro de .fim para não encostar no resto da página. */
/* ds-allow-hardcode: o grafite do degradê, o preto do fim e o verde de acento são os mesmos da home */
.fim {
  --display: "Inter Tight", var(--sans);
  --azul: #5F5C57; --azul-fundo: #2E2D2B; --verde: #D4F59C;
  padding: clamp(104px, 12vw, 176px) 0 0;
}
.fim-painel {
  position: relative; isolation: isolate; overflow: hidden; color: var(--papel);
  border-radius: 28px 28px 0 0; padding: clamp(72px, 8vw, 112px) var(--margem) 28px;
  background: radial-gradient(70% 46% at 50% 0%, var(--azul) 0%, var(--azul-fundo) 48%, #000 100%);
}
.fim-painel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ruido); background-size: 180px; opacity: .22; mix-blend-mode: overlay; pointer-events: none; }

.fim-chamada { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 0 0 clamp(44px, 5.5vw, 80px); border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--papel); text-decoration: none; }
.fim-grande { margin: 0; max-width: 13ch; font: 400 clamp(52px, 7.4vw, 124px)/1.02 var(--display); letter-spacing: 0; color: var(--papel); }
.fim-flecha { flex: none; width: clamp(80px, 9vw, 132px); height: auto; overflow: visible; margin-right: clamp(0px, 2vw, 32px); transition: transform var(--lento) var(--curva); }
.fim-flecha path { fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: square; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--curva) 300ms; }
.fim-painel.rev-in .fim-flecha path, .fim-painel:not(.rev) .fim-flecha path { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) { .fim-chamada:hover .fim-flecha { transform: translate(10px, -10px); } }

.fim-contato { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: clamp(28px, 3.4vw, 44px); }
.fim-convite { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .62); }
.fim-links { display: flex; gap: 10px; }
.fim-links .fim-icone { display: grid; place-items: center; gap: 0; padding: 0; width: 48px; height: 48px; border-radius: 50%; color: var(--papel); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); transition: background var(--medio) var(--curva), color var(--medio) var(--curva), border-color var(--medio) var(--curva), transform var(--medio) var(--curva); }
.fim-icone svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .fim-links .fim-icone:hover { background: var(--verde); border-color: var(--verde); color: var(--tinta); transform: translateY(-2px); } }
.fim-links .fim-icone:active { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
.fim-icone:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

.fim .fim-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 48px); font-size: 13px; color: rgba(255, 255, 255, .55); }
.fim .fim-marca { display: flex; align-items: center; gap: 12px; }
.fim .fim-marca .simbolo { width: 22px; height: 22px; color: var(--papel); }
.fim .simbolo path { fill: var(--papel); }
.fim .voltar-topo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: var(--papel); transition: background var(--medio), color var(--medio); }
.fim .voltar-topo:hover { background: var(--papel); color: var(--tinta); }

@media (max-width: 760px) { .fim-contato { flex-direction: column; align-items: center; } .fim-links { flex-wrap: wrap; } }
@media (max-width: 600px) {
  .fim-painel { border-radius: 20px 20px 0 0; }
  .fim-chamada { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fim-grande { max-width: none; font-size: clamp(38px, 11.6vw, 56px); }
  .fim-flecha { width: 56px; height: 56px; align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .fim-flecha path { stroke-dashoffset: 0; transition: none; } }