:root { --fundo: #0e0e0e; --texto: #f4f4f4; --suave: #a3a3a3; --destaque: #f5b942; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

.capa { position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; }
.capa-fundo { position: absolute; inset: -20px; background-size: cover; background-position: center;
  filter: blur(14px) brightness(.45); transform: scale(1.05); transition: opacity .6s; opacity: 0; }
.capa-fundo.ok { opacity: 1; }
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--fundo)); }
.capa-texto { position: relative; z-index: 1; padding: 32px 20px 20px; max-width: 900px; margin: 0 auto; width: 100%; }
.marca { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); font-weight: 700; }
h1 { font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.05; margin: 10px 0 8px; }
.subtitulo { font-size: 1.05rem; color: #ddd; margin: 0 0 12px; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--suave); font-size: .9rem; }

.barra { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fundo) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid #1f1f1f; }
.barra-interna { max-width: 900px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contagem { color: var(--suave); font-size: .9rem; }
button, .botao { background: var(--destaque); color: var(--texto-botao, #111); border: 0; border-radius: 999px; padding: 10px 18px;
  font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:disabled { opacity: .5; cursor: default; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; padding: 4px; max-width: 1400px; margin: 0 auto; }
.item { position: relative; aspect-ratio: 1; background: #1a1a1a; overflow: hidden; cursor: zoom-in; }
.item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.item:hover img { transform: scale(1.03); }
/* Reserva: marca repetida por cima da foto, só quando o servidor não consegue gravá-la na imagem. */
.marca-dagua { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; background-size: 45% auto; opacity: .3; }
.marca-logo { background-image: url("/marcas/saga.png"); }
.marca-dominio { background-image: url("/marcas/dominio.png"); }
.vazio { text-align: center; color: var(--suave); padding: 70px 24px; line-height: 1.6; }
.novas { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 6; display: none; box-shadow: 0 6px 24px rgba(0,0,0,.5); }

.visor { position: fixed; inset: 0; background: rgba(0,0,0,.96); z-index: 10; display: none; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px; }
.visor.aberto { display: flex; }
.moldura { position: relative; max-width: 100%; }
.moldura img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; display: block; }
.legenda { color: var(--suave); font-size: .85rem; margin-top: 10px; }
.visor .acoes { display: flex; gap: 10px; margin-top: 10px; }
.fechar { background: #2c2c2c; color: var(--texto); }
.nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); color: var(--texto);
  font-size: 1.6rem; padding: 6px 16px; }
.ant { left: 8px; } .prox { right: 8px; }
.logo-placa { display: inline-block; background: #fff; border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.logo-placa img { display: block; max-height: 84px; max-width: min(70vw, 320px); }
.capa.banner .capa-fundo { filter: brightness(.55); inset: 0; transform: none; }
.faixa { height: 5px; background: var(--faixa, var(--destaque)); }
.conta { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--suave); }
.conta[hidden] { display: none; }
.conta button { background: transparent; color: var(--suave); border: 1px solid #333; padding: 6px 12px; }
.login { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; padding: 20px; }
.login.aberto { display: flex; }
.login-caixa { background: #171717; border: 1px solid #2a2a2a; border-radius: 16px; padding: 24px; max-width: 380px; text-align: center; line-height: 1.5; }
.login-caixa h2 { margin: 0 0 8px; font-size: 1.2rem; }
.login-caixa p { color: var(--suave); font-size: .88rem; margin: 0 0 16px; }
#botaoGoogle { display: flex; justify-content: center; min-height: 44px; margin-bottom: 12px; }
footer { color: var(--suave); font-size: .76rem; text-align: center; padding: 28px 16px 44px; line-height: 1.6; }
footer a { color: var(--suave); }

/* Dificulta salvar pelo botão direito, arrastar ou toque longo (iOS/Android). Não impede captura de tela. */
.item img, .moldura img, .capa-fundo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }

/* Logo da marca no lugar do nome */
.logo-site { display: block; height: 56px; width: auto; }
.marca { display: inline-block; margin-bottom: 4px; }