/* =========================================================================
   brimages

   Cinza neutro de propósito: o conteúdo do site é imagem de outra pessoa, e
   fundo creme ou colorido tinge a percepção da foto. Mesma razão pela qual
   editor de imagem usa cinza neutro atrás da tela.

   O vermelho é herança do brimages original (2010), mas aqui só aparece
   marcando ação e estado ativo — como a marca de lápis dermatográfico nos
   quadros escolhidos de uma folha de contato.
   ========================================================================= */

:root {
    --papel:      #ececec;
    --superficie: #ffffff;
    --tinta:      #1a1a1a;
    --tinta-fraca:#6b6b6b;
    --regua:      #d4d4d4;
    --marca:      #cf3626;
    --marca-fundo:#fbeae8;
    --marca-forte:#a92a1d;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
            "Roboto Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;

    --raio: 4px;
    --largura: 940px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Cinza escuro, nunca preto puro: em preto absoluto a borda de foto
           escura desaparece e a imagem parece sangrar para fora do quadro. */
        --papel:      #1c1c1c;
        --superficie: #262626;
        --tinta:      #ededed;
        --tinta-fraca:#9a9a9a;
        --regua:      #3a3a3a;
        --marca:      #ff6b5a;
        --marca-fundo:#3a1f1c;
        --marca-forte:#ff8877;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 400 0.9375rem/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* --- Rótulo monoespaçado: a voz de todo metadado do site ---------------- */
.rotulo {
    font: 600 0.6875rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.meta {
    font: 400 0.8125rem/1.5 var(--mono);
    color: var(--tinta-fraca);
}

/* --- Barra superior ----------------------------------------------------- */
.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--regua);
}

.barra > div {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 8px 20px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Fundo transparente: o logo assenta direto na barra, sem precisar do
   arredondamento que a versão de fundo chapado exigia para não parecer um
   retângulo colado. */
.marca {
    display: block;
    line-height: 0;
    margin-right: auto;
}

.marca img {
    height: 84px;
    width: auto;
}

/* A câmera do logo é cinza-claro. No tema claro ela quase some sobre o
   branco, então uma sombra sutil devolve o contorno. No escuro não é
   preciso: lá o problema não existe. */
.marca img {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

@media (prefers-color-scheme: dark) {
    .marca img { filter: none; }
}

@media (max-width: 560px) {
    .marca img { height: 58px; }
}

.barra nav {
    display: flex;
    gap: 20px;
    font: 500 0.8125rem/1 var(--sans);
}

.barra nav a {
    text-decoration: none;
    color: var(--tinta-fraca);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.barra nav a:hover,
.barra nav a[aria-current="page"] {
    color: var(--tinta);
    border-bottom-color: var(--marca);
}

/* --- Estrutura ---------------------------------------------------------- */
main {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 28px 20px 72px;
}

.bloco {
    background: var(--superficie);
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 18px;
}

.bloco > :first-child { margin-top: 0; }
.bloco > :last-child { margin-bottom: 0; }

h1 {
    font-size: clamp(1.375rem, 3.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 6px;
}

h2 {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

/* --- Chamada da home ---------------------------------------------------- */
/* É um H1, mas com 90 palavras: corpo de título tornaria o bloco ilegível, e
   o peso do H1 vem da tag e não do tamanho da fonte. */
.chamada {
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.65;
    color: var(--tinta-fraca);
    margin: 0 0 18px;
}

.chamada strong,
.chamada b { color: var(--tinta); }

.chamada-galeria {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tinta-fraca);
    margin: 0 0 14px;
}

/* O H1 da página da imagem. Discreto porque a protagonista é a imagem
   logo abaixo — o peso semântico vem da tag, não do tamanho. Quebra em
   qualquer ponto: nome de arquivo longo sem espaço estouraria o bloco. */
.titulo-imagem {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

/* --- Área de envio: o herói da home ------------------------------------- */
.envio {
    border: 2px dashed var(--regua);
    border-radius: 6px;
    background: var(--papel);
    padding: 44px 24px;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.envio:hover { border-color: var(--tinta-fraca); }

/* Arrastar sobre qualquer ponto da janela acende o alvo inteiro. */
body.arrastando .envio {
    border-color: var(--marca);
    background: var(--marca-fundo);
}

.envio-icone {
    font: 700 1.75rem/1 var(--mono);
    color: var(--marca);
    letter-spacing: -0.05em;
}

.envio-titulo {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 12px 0 4px;
}

.envio input[type=file] { display: none; }

/* --- Controles ---------------------------------------------------------- */
.botao {
    display: inline-block;
    font: 600 0.875rem/1 var(--sans);
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    background: var(--marca);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
}

.botao:hover { background: var(--marca-forte); }

.botao-discreto {
    background: transparent;
    color: var(--tinta);
    border-color: var(--regua);
}

.botao-discreto:hover { background: var(--papel); border-color: var(--tinta-fraca); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

label { display: block; }

.escolha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--tinta-fraca);
    cursor: pointer;
}

/* --- Bloco de links: a assinatura da página da imagem ------------------- */
.links { border: 1px solid var(--regua); border-radius: var(--raio); overflow: hidden; }

.links-abas {
    display: flex;
    background: var(--papel);
    border-bottom: 1px solid var(--regua);
    overflow-x: auto;
    scrollbar-width: none;
}

.links-abas::-webkit-scrollbar { display: none; }

.links-abas button {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 16px;
    cursor: pointer;
    font: 600 0.6875rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.links-abas button:hover { color: var(--tinta); }

.links-abas button[aria-selected="true"] {
    color: var(--tinta);
    border-bottom-color: var(--marca);
    background: var(--superficie);
}

.links-valor { display: flex; align-items: stretch; background: var(--superficie); }

.links-valor input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 14px 16px;
    background: none;
    color: var(--tinta);
    font: 400 0.8125rem/1.4 var(--mono);
}

.links-valor input:focus { outline: none; background: var(--marca-fundo); }

.links-copiar {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid var(--regua);
    background: var(--papel);
    color: var(--tinta);
    padding: 0 18px;
    cursor: pointer;
    font: 600 0.6875rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.links-copiar:hover { background: var(--marca); color: #fff; }

.links-copiar[data-copiado] { background: var(--marca); color: #fff; }

/* --- Folha de contato --------------------------------------------------- */
.folha {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.quadro { min-width: 0; }

.quadro a {
    display: block;
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--papel);
    transition: border-color .12s;
}

.quadro a:hover { border-color: var(--marca); }

.quadro img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.quadro-info {
    margin-top: 6px;
    font: 400 0.6875rem/1.4 var(--mono);
    color: var(--tinta-fraca);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.quadro-info a { color: var(--marca); }

/* --- Página da imagem --------------------------------------------------- */
.palco {
    background: var(--papel);
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    padding: 16px;
    text-align: center;
}

.palco img { margin: 0 auto; border-radius: 2px; }

/* --- Formulários -------------------------------------------------------- */
.campo {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--tinta);
    font: 400 0.9375rem/1.4 var(--sans);
}

.campo:focus { border-color: var(--marca); }

/* Endereço e código são material monoespaçado; texto comum, não. */
.campo-mono { font: 400 0.8125rem/1.4 var(--mono); }

.campo-erro { border-color: var(--marca); }

textarea.campo { resize: vertical; }

.grupo { margin-bottom: 14px; }

.grupo > .rotulo { display: block; margin-bottom: 5px; }

.erro-campo {
    display: block;
    margin-top: 5px;
    font: 400 0.8125rem/1.4 var(--sans);
    color: var(--marca);
}

/* Formulário de entrar/cadastrar: coluna estreita, centrada. */
.coluna-estreita { max-width: 380px; margin: 0 auto; }

/* --- Páginas de texto (FAQ, termos) ------------------------------------- */
.prosa { max-width: 68ch; }

.prosa h2 {
    margin: 30px 0 8px;
    font-size: 0.9375rem;
    /* A pergunta é o que o leitor varre; destacá-la em vermelho dá o mesmo
       papel da marca de lápis nos quadros escolhidos da folha de contato. */
    color: var(--marca);
}

.prosa h1 + .meta { margin-top: 0; }

.prosa p { margin: 0 0 12px; }

.prosa ul { margin: 0 0 12px; padding-left: 20px; }

.prosa li { margin-bottom: 4px; }

.prosa abbr { text-decoration: underline dotted; cursor: help; }

/* Subtítulo dos guias. Menor que h2 e sem a cor da marca: o vermelho marca
   o começo de um assunto, e usá-lo nos dois níveis apaga a hierarquia. */
.prosa h3 {
    margin: 20px 0 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Código e BBCode de exemplo. Rola na horizontal em vez de estourar a
   largura: linha de BBCode com URL longa não quebra sozinha, e sem isto o
   corpo inteiro da página ganharia barra de rolagem no celular. */
.prosa pre {
    margin: 0 0 12px;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    background: var(--papel);
}

.prosa pre code { white-space: pre; }

.prosa code {
    font: 400 0.8125rem/1.5 var(--mono);
    overflow-wrap: anywhere;
}

/* Tabela comparativa. Rola em vez de espremer as colunas no celular. */
.prosa table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 12px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.prosa th,
.prosa td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--regua);
    text-align: left;
    vertical-align: top;
}

.prosa th { font-weight: 600; }

/* --- Guias -------------------------------------------------------------- */
.lista-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.lista-guias li { display: grid; gap: 2px; }

.lista-guias .meta { font-size: 0.8125rem; }

.rodape-guias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
    margin-bottom: 10px;
}

/* --- Avisos ------------------------------------------------------------- */
.aviso {
    border: 1px solid var(--regua);
    border-left: 3px solid var(--tinta-fraca);
    border-radius: var(--raio);
    background: var(--superficie);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.aviso-erro { border-left-color: var(--marca); background: var(--marca-fundo); }

/* --- Progresso do envio ------------------------------------------------- */
.fila { display: grid; gap: 10px; margin-top: 18px; }

.fila:empty { display: none; }

.fila-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    background: var(--superficie);
    font: 400 0.8125rem/1.4 var(--mono);
}

.fila-item[data-estado="erro"] { border-color: var(--marca); background: var(--marca-fundo); }

.fila-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fila-estado { color: var(--tinta-fraca); font-size: 0.6875rem;
               letter-spacing: 0.12em; text-transform: uppercase; }

.barra-progresso {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--regua);
    border-radius: 2px;
    overflow: hidden;
}

.barra-progresso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--marca);
    transition: width .2s;
}

/* --- Painel -------------------------------------------------------------- */
.painel-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
}

.painel-nav a {
    padding: 8px 14px;
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    background: var(--superficie);
    text-decoration: none;
    font: 600 0.6875rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.painel-nav a:hover { color: var(--tinta); border-color: var(--tinta-fraca); }

.painel-nav a[aria-current="page"] {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* Contador de pendência: o número precisa saltar, é o que tem prazo. */
.selo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--marca);
    color: #fff;
    font-size: 0.6875rem;
}

.painel-nav a[aria-current="page"] .selo { background: rgba(0,0,0,.28); }

.numeros {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.numero {
    border: 1px solid var(--regua);
    border-radius: var(--raio);
    padding: 14px;
    background: var(--superficie);
}

.numero strong {
    display: block;
    font: 700 1.5rem/1.1 var(--mono);
    letter-spacing: -0.02em;
}

.numero.destaque { border-color: var(--marca); background: var(--marca-fundo); }
.numero.destaque strong { color: var(--marca); }

.tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.tabela th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--regua);
    font: 600 0.6875rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

.tabela td {
    padding: 10px;
    border-bottom: 1px solid var(--regua);
    vertical-align: middle;
}

.tabela tr:last-child td { border-bottom: 0; }

.rolagem { overflow-x: auto; }

.miniatura-linha {
    width: 56px; height: 56px;
    object-fit: cover;
    border: 1px solid var(--regua);
    border-radius: 3px;
}

.etiqueta {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--papel);
    border: 1px solid var(--regua);
    font: 600 0.625rem/1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.etiqueta-alerta { border-color: var(--marca); color: var(--marca); background: var(--marca-fundo); }

.botao-mini {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: var(--raio);
    border: 1px solid var(--regua);
    background: var(--superficie);
    color: var(--tinta);
    cursor: pointer;
}

.botao-mini:hover { border-color: var(--tinta-fraca); }
.botao-mini-perigo { border-color: var(--marca); color: var(--marca); }
.botao-mini-perigo:hover { background: var(--marca); color: #fff; }

/* --- Anúncios ----------------------------------------------------------- */
.anuncio {
    margin: 0 auto 18px;
    text-align: center;
    max-width: var(--largura);
}

.anuncio:empty { display: none; }

/* --- Rodapé ------------------------------------------------------------- */
footer {
    border-top: 1px solid var(--regua);
    padding: 22px 20px 40px;
    text-align: center;
}

/* --- Utilitários -------------------------------------------------------- */
.linha-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.espaco-acima { margin-top: 18px; }
.centro { text-align: center; }

.so-leitores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .barra > div { gap: 14px; }
    .barra nav { gap: 14px; }
    .envio { padding: 32px 16px; }
    main { padding: 20px 14px 56px; }

    /* Duas colunas em tela de 375px. Com o mínimo de 148px e o respiro do
       bloco, faltavam 3px e a grade caía para uma coluna só — uma imagem
       gigante por linha, o oposto de uma folha de contato. */
    .bloco { padding: 16px; }
    .folha { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}