/* Card "ANÚNCIO" e diálogo "Faça aqui seu anúncio". Usa os tokens de style.css.
   Os três espaços (faixa dourada, card lateral, rodapé) usam a MESMA proporção de imagem: --anuncio-razao.
   O valor abaixo é só o da primeira pintura; public/anuncios.js o troca pelo que o servidor manda em
   /api/anuncios/regras (src/anuncios.js é a fonte única do tamanho). Só transform/opacity são animados. */
:root { --anuncio-razao: 16 / 9; }

.anuncio-card { position: relative; overflow: hidden; }
.anuncio-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ouro), transparent 70%);
  z-index: 2;
}
.anuncio-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.anuncio-rotulo {
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-ouro);
  background: var(--ouro);
  padding: 4px 7px 3px;
  border-radius: 4px;
}
.anuncio-selo { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro-texto); }

/* ---------- peça (anúncio no ar) ---------- */
.anuncio-palco { position: relative; min-height: 0; }
.anuncio-peca {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.anuncio-peca.visivel { opacity: 1; }
/* a peça que sai some em fade por cima da que entra (sem pular o layout) */
.anuncio-peca.saindo { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.anuncio-peca:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }

/* a caixinha da arte: proporção fixa = nenhum layout shift, arte do tamanho canônico preenche sem distorcer */
.anuncio-img {
  position: relative;
  display: block;
  aspect-ratio: var(--anuncio-razao);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  background: var(--card-2);
  border: 1px solid var(--linha);
}
.anuncio-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  /* zoom lento (Ken Burns): vai e volta, no máximo 6% — a arte deve manter ~5% de margem de segurança */
  animation: anuncio-zoom 18s ease-in-out infinite alternate;
  will-change: transform;
}
.anuncio-peca.kb-1 .anuncio-img img { transform-origin: 28% 42%; animation-duration: 21s; }
.anuncio-peca.kb-2 .anuncio-img img { transform-origin: 72% 60%; animation-duration: 16s; }
/* brilho que varre a arte de tempos em tempos */
.anuncio-img::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.0) 75%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: anuncio-brilho 9s ease-in-out 1.6s infinite;
  pointer-events: none;
  z-index: 1;
}
.faixa-anuncio .anuncio-img::after { animation-delay: 4.2s; }
/* fora da tela (IntersectionObserver em anuncios.js) nada anima */
.anuncio-card.fora :is(.anuncio-img img, .anuncio-vazio-titulo, .anuncio-seta) { animation-play-state: paused; }
.anuncio-card.fora .anuncio-img::after, .anuncio-card.fora .anuncio-vazio::before, .anuncio-card.fora .anuncio-vazio::after { animation-play-state: paused; }
.anuncio-rodape .anuncio-img::after { animation-delay: 6.8s; }

@keyframes anuncio-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes anuncio-brilho {
  0%, 62% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(300%) skewX(-18deg); }
}

.anuncio-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.anuncio-lateral .anuncio-corpo { min-height: 88px; } /* reserva o espaço do texto: a rotação não empurra a página */
.anuncio-titulo {
  font: 400 20px/1.15 var(--serif);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.anuncio-texto {
  color: var(--suave);
  font-size: 13px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.anuncio-cta { color: var(--ouro-texto); font-weight: 600; font-size: 13px; margin-top: 2px; transition: letter-spacing 0.3s var(--ease); }
.anuncio-peca:hover .anuncio-cta { letter-spacing: 0.02em; }

.anuncio-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.anuncio-pontos { display: flex; gap: 6px; }
.anuncio-ponto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--linha);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.anuncio-ponto.ativo { background: var(--ouro); transform: scale(1.3); }
.anuncio-ponto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.anuncio-abrir {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--suave);
  font: 500 13px var(--sans);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
}
.anuncio-abrir:hover, .anuncio-abrir:focus-visible { color: var(--ouro-texto); }

/* ---------- estado vazio: convite "Anuncie aqui" (mesma caixinha da arte) ---------- */
.anuncio-vazio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--anuncio-razao);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px;
  border: 1px dashed var(--linha-forte);
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--ouro) 6%, transparent) 10px 20px);
  color: var(--suave);
  font: 500 14px var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.anuncio-vazio-titulo { font: 300 26px/1 var(--serif); color: var(--texto); transform-origin: left center; animation: anuncio-respira 4.5s ease-in-out infinite; }
.anuncio-vazio-cta { display: inline-flex; gap: 4px; }
.anuncio-seta { display: inline-block; animation: anuncio-seta 2s ease-in-out infinite; }
.anuncio-vazio::before { /* anel dourado que pulsa */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--ouro);
  opacity: 0;
  animation: anuncio-pulso 3.6s ease-in-out infinite;
  pointer-events: none;
}
.anuncio-vazio::after { /* brilho que varre o convite */
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--ouro) 22%, transparent), transparent);
  transform: translateX(-130%) skewX(-18deg);
  animation: anuncio-brilho 8s ease-in-out 1s infinite;
  pointer-events: none;
  z-index: -1;
}
.anuncio-vazio:hover, .anuncio-vazio:focus-visible { border-color: var(--ouro); color: var(--ouro-texto); }
.anuncio-vazio:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

@keyframes anuncio-respira { 50% { transform: scale(1.04); } }
@keyframes anuncio-seta { 50% { transform: translateX(5px); } }
@keyframes anuncio-pulso { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } }

/* ---------- faixa dourada: a mesma arte numa caixinha de 44px de altura ---------- */
.faixa-anuncio .anuncio-img {
  flex: none;
  width: auto;
  height: 44px;
  aspect-ratio: var(--anuncio-razao);
  border: 0;
  border-radius: 6px;
  background: #fff;
}
.faixa-anuncio .anuncio-img img { width: 100%; height: 100%; }
.faixa-anuncio .anuncio-peca { flex-direction: row; }
.faixa-anuncio .anuncio-corpo { flex-direction: row; min-height: 0; }
.faixa-anuncio .anuncio-titulo { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
@media (min-width: 761px) { /* até 760px o style.css esconde o texto da faixa */
  .faixa-anuncio .anuncio-texto { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
}
.faixa-anuncio .anuncio-vazio::before, .faixa-anuncio .anuncio-vazio::after { display: none; } /* all: unset do style.css */
.faixa-anuncio .anuncio-vazio-titulo { font: 700 14px var(--sans); }
.faixa-anuncio .anuncio-vazio-cta { display: inline; }
.faixa-anuncio .anuncio-titulo { flex: 1 1 auto; min-width: 0; }
.faixa-anuncio .anuncio-cta { flex: none; }
@media (max-width: 760px) {
  .faixa-anuncio .anuncio-img { height: 36px; }
}
@media (max-width: 520px) {
  .faixa-anuncio .anuncio-cta { display: none; } /* a peça inteira é o link; sobra espaço para o título */
}

/* ---------- card lateral: arte em largura total, texto embaixo ---------- */
.anuncio-lateral .anuncio-peca { gap: 12px; }

/* ---------- rodapé: caixa larga no fim da página, depois do jogo e antes do rodapé ---------- */
.anuncio-rodape {
  max-width: 1680px;
  margin: 0 auto;
  padding: 8px calc(var(--gutter) + var(--safe-r)) 28px calc(var(--gutter) + var(--safe-l));
}
.anuncio-rodape .anuncio-card { max-width: 1040px; margin: 0 auto; padding: 18px; }
.anuncio-rodape .anuncio-peca {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.anuncio-rodape .anuncio-corpo { gap: 8px; }
.anuncio-rodape .anuncio-titulo { font-size: 30px; }
.anuncio-rodape .anuncio-texto { font-size: 15px; }
.anuncio-rodape .anuncio-cta { font-size: 15px; }
.anuncio-rodape .anuncio-vazio { aspect-ratio: auto; min-height: 150px; padding: 22px 26px; }
.anuncio-rodape .anuncio-vazio-titulo { font-size: 36px; }
@media (max-width: 760px) {
  .anuncio-rodape .anuncio-peca { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .anuncio-rodape .anuncio-titulo { font-size: 24px; }
  .anuncio-rodape .anuncio-card { padding: 14px; }
  .anuncio-rodape .anuncio-vazio { min-height: 120px; }
}

/* ---------- diálogo ---------- */
.anc-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.anc-form { gap: 12px; }
.anc-passo { display: flex; flex-direction: column; gap: 12px; }
.anc-passo[hidden] { display: none; }
.anc-info { padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--card-2); }
.anc-cotacao { font-weight: 600; color: var(--ouro-texto); font-size: 14px; }
.anc-topo { color: var(--suave); font-size: 13px; margin-top: 4px; }
.anc-campo { display: flex; flex-direction: column; gap: 5px; }
.anc-campo small, .anc-contador { color: var(--fraco); font-size: 12px; }
.anc-contador { align-self: flex-end; }
.anc-campo .anc-dica-imagem { color: var(--ouro-texto); font-weight: 600; font-size: 12.5px; }
.anc-form input:not([type='file']), .anc-form textarea {
  font: 15px var(--sans);
  color: var(--texto);
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  resize: vertical;
}
.anc-form input[type='file'] { font: 13px var(--sans); color: var(--suave); }
.anc-form input:focus-visible, .anc-form textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--ouro); }
.anc-form input:user-invalid, .anc-form textarea:user-invalid { border-color: var(--lula); }
.anc-regras { margin: 0; padding-left: 18px; color: var(--suave); font-size: 12.5px; display: grid; gap: 4px; }
.anc-form .anc-enviar { background: var(--ouro); color: var(--tinta-ouro); border-color: var(--ouro); }
.anc-form .anc-enviar:hover { background: #f3c962; }
.anc-form .anc-enviar:disabled { opacity: 0.6; cursor: progress; }

/* pagamento PIX: QR no topo, código completo logo abaixo (bloco criado por public/pix.js) */
.anc-pix-bloco { display: flex; flex-direction: column; gap: 8px; }
.anc-pix-bloco[hidden] { display: none; }
.anc-pix-qr { align-self: center; width: 200px; height: 200px; max-width: 100%; padding: 10px; margin-bottom: 4px; background: #fff; border-radius: 10px; image-rendering: pixelated; }
.pix-box .anc-pix-bloco label { font: 700 15px var(--sans); color: var(--texto); }
.anc-form .anc-pix-cod { display: block; min-height: 6.5em; resize: none; overflow: auto; padding: 10px; border-radius: 8px; font: 13px/1.5 ui-monospace, monospace; word-break: break-all; }
.pix-box .anc-pix-copiar { min-height: 52px; font-size: 16px; font-weight: 700; border-radius: 10px; border-color: var(--ouro); background: var(--ouro); color: var(--tinta-ouro); }
.pix-box .anc-pix-copiar:hover { background: #f3c962; }
.pix-box .anc-pix-copiar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.anc-pix-copia-status { min-height: 1.3em; font-size: 13px; text-align: center; color: var(--suave); }
.anc-pix-dica { font-size: 13px; line-height: 1.45; color: var(--suave); }

/* ferramenta de enquadramento: a moldura tem a proporção exata do anúncio */
.anc-recorte { display: flex; flex-direction: column; gap: 10px; }
.anc-recorte[hidden], .anc-recorte [hidden] { display: none; }
.anc-moldura {
  position: relative;
  aspect-ratio: var(--anuncio-razao);
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  border: 1px solid var(--ouro);
  background: var(--card-2);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.anc-moldura.arrastando { cursor: grabbing; }
.anc-moldura:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.anc-moldura::after { /* guias da regra dos terços */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.4) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.4) 0 calc(66.66% + 0.5px), transparent 0),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.4) 0 calc(33.33% + 0.5px), transparent 0 calc(66.66% - 0.5px), rgba(255, 255, 255, 0.4) 0 calc(66.66% + 0.5px), transparent 0);
  opacity: 0;
  transition: opacity 0.2s;
}
.anc-moldura.arrastando::after, .anc-moldura:focus-visible::after { opacity: 1; }
.anc-moldura-img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; user-select: none; will-change: transform; }
.anc-moldura[data-modo='gif'] .anc-moldura-img, .anc-moldura[data-modo='gif-erro'] .anc-moldura-img {
  left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}
.anc-moldura[data-modo='gif-erro'] .anc-moldura-img { object-fit: contain; }
.anc-moldura[data-modo='gif'], .anc-moldura[data-modo='gif-erro'] { cursor: default; }
.anc-recorte-ctl { display: flex; align-items: center; gap: 8px; }
.anc-form .anc-zoom { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; accent-color: var(--ouro); height: 32px; }
.anc-mini { font: 600 14px var(--sans); line-height: 1; border-radius: 10px; padding: 8px 12px; min-height: 36px; cursor: pointer; border: 1px solid var(--linha); background: var(--card-2); color: var(--texto); }
.anc-mini:hover { background: var(--card-3); }
.anc-mini:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.anc-centro { font-size: 13px; }
.anc-converter { align-self: flex-start; border-color: var(--ouro); color: var(--ouro-texto); }
.anc-recorte-dica { margin: 0; color: var(--fraco); font-size: 12px; }
.anc-recorte-msg { margin: 0; color: var(--suave); font-size: 12.5px; min-height: 0; }
.anc-recorte-msg:empty { display: none; }

.anc-previa { display: grid; gap: 10px; }
.anc-previa[hidden] { display: none; }
.anc-previa-tit { margin: 0; font: 600 13px var(--sans); color: var(--suave); }
.anc-previa-faixa { border-radius: 10px; overflow: hidden; border: 1px solid #b88a22; }
.anc-previa-lateral { max-width: 340px; }
.anc-previa .anuncio-peca { cursor: default; }

/* ---------- admin ---------- */
.admin { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 16px; }
.admin-login { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-login input { flex: 1 1 220px; font: 15px var(--sans); color: var(--texto); background: var(--bg); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.admin button { font: 600 14px var(--sans); border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1px solid var(--linha); background: var(--card-2); color: var(--texto); }
.admin button:hover { background: var(--card-3); }
.admin button.aprovar { border-color: #2f6b45; color: #7fd69c; }
.admin button.rejeitar { border-color: var(--lula-escuro); color: var(--lula); }
.admin-item { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.admin-item img { width: 240px; aspect-ratio: var(--anuncio-razao); object-fit: cover; border-radius: 10px; background: var(--card-2); border: 1px solid var(--linha); }
.admin-item dl { margin: 6px 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 13px; }
.admin-item dt { color: var(--fraco); }
.admin-item dd { margin: 0; overflow-wrap: anywhere; }
.admin-status { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro-texto); }
.admin-flag { color: var(--lula); }
.admin-acoes { display: flex; gap: 8px; margin-top: 8px; }

.anc-form .fechar, .anc-form .anc-enviar { min-height: var(--toque); }
@media (max-width: 640px) {
  .anc-dialog .pix-box { padding: 18px 16px; }
  .anc-form .anc-enviar { position: sticky; bottom: 0; box-shadow: 0 -10px 16px var(--card); }
}
@media (max-width: 520px) {
  .admin-item { grid-template-columns: 1fr; }
  .admin-item img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .anuncio-peca, .anuncio-ponto, .anuncio-cta, .anc-moldura::after { transition: none; }
  .anuncio-img img, .anuncio-vazio-titulo, .anuncio-seta { animation: none; will-change: auto; }
  .anuncio-img::after, .anuncio-vazio::before, .anuncio-vazio::after { animation: none; display: none; }
}