/* sites.css — a vitrine dos sites cadastrados.
 *
 * ⛔ FUNDO CLARO E TEXTO ESCURO, e isso é escolha da tarefa, não descuido de quem
 * escreveu: aqui o visitante vem COMPARAR negócios de outras pessoas, e a leitura
 * corrida de lista longa é o trabalho da página. O preto profundo da agência manda
 * na home, onde o assunto é a marca dela. O bronze continua ACENTO, nunca fundo.
 *
 * ⚠️ O bronze de acento aqui é o `#8A5522`, não o `#C08043`: sobre branco, o bronze
 * claro fica em 3,1:1 e reprova o AA de texto. O escuro mede 6,1:1. Mesma família,
 * medido antes de entrar.
 */

:root{
  --fundo:#F6F4F1;        /* papel, um passo abaixo do branco do cartão */
  --cartao:#FFFFFF;
  --texto:#14171A;
  --texto2:#565C63;       /* 6,1:1 sobre o fundo; medido */
  --borda:#E1DDD5;
  --bronze:#8A5522;       /* acento e botão; 6,1:1 com texto branco em cima */
  --bronze-claro:#C08043; /* só filete e detalhe, nunca texto */
  --raio:12px;
  --alvo:44px;            /* alvo de toque mínimo; a lista se usa com o polegar */
  --max:1100px;
}

*{margin:0;padding:0;box-sizing:border-box;}

/* ⛔ `overflow-x:clip` nos dois, html e body: é a trava contra a rolagem lateral no
   celular. Um único filho estourando a largura cria a barra horizontal, e a página
   toda passa a andar de lado. Mesma decisão do estilo.css da casa. */
html{
  -webkit-text-size-adjust:100%;
  background:var(--fundo);
  overflow-x:clip;
}
body{
  background:var(--fundo);
  color:var(--texto);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* nome de negócio comprido não estoura o cartão, ele quebra */
  overflow-wrap:break-word;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block;}
a{color:var(--bronze);}

/* ⛔ ESTA LINHA NÃO É ENFEITE, e foi medida em 22/09/2026: o `[hidden]{display:none}`
   do navegador é regra DE USUÁRIO, e perde de qualquer regra deste arquivo que diga
   `display`. Como `.paginacao` é `flex` e `.grade` é `grid`, os dois continuavam na
   tela depois de o script marcá-los como escondidos: a paginação ficava visível na
   lista vazia e no recado de falha. ⭐ O sintoma é traiçoeiro porque o atributo está
   certo no HTML e o `grep` acha o `hidden` no código. */
[hidden]{display:none!important;}

/* ⭐ O foco visível não se apaga. Quem navega por teclado precisa ver onde está, e
   `outline:none` bonito é acessibilidade jogada fora. */
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:4px;}

/* ⭐ O rótulo que só o leitor de tela lê. Usado no "Ver site" para anunciar a aba
   nova: abrir aba sem avisar desorienta quem não vê a tela. */
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ⛔ A faixa é quem carrega o respiro lateral, e ele é PADDING, nunca margem: com
   `viewport-fit=cover` no iPhone deitado, o conteúdo encostaria na borda arredondada.
   O `env()` soma o recorte quando ele existe e vale zero quando não existe. */
.faixa{
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  padding-left:max(18px, env(safe-area-inset-left, 0px));
  padding-right:max(18px, env(safe-area-inset-right, 0px));
}

/* ── topo ── */
.topo{
  background:var(--cartao);
  border-bottom:1px solid var(--borda);
  padding:14px 0;
}
.trilha{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:14px;color:var(--texto2);
}
.trilha a{
  color:var(--bronze);font-weight:600;text-decoration:none;
  min-height:var(--alvo);display:inline-flex;align-items:center;
}
.trilha a:hover{text-decoration:underline;}

/* ── palco ── */
.palco{
  flex:1;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:32px max(18px, env(safe-area-inset-left, 0px)) 64px;
}

.abertura{max-width:660px;margin-bottom:28px;}
h1{
  font-size:clamp(26px,5vw,38px);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:800;
  margin-bottom:10px;
}
/* o filete bronze é a assinatura da casa nesta página: acento, não bloco */
h1::after{
  content:"";display:block;width:64px;height:3px;
  background:var(--bronze-claro);margin-top:14px;
}
.linha-fina{color:var(--texto2);font-size:clamp(15px,2vw,17px);}

/* ── filtros ──
   ⛔ Grade de quatro colunas no desktop e UMA no celular. O `minmax(0,…)` existe
   porque item de grid tem largura mínima automática igual ao conteúdo: um `select`
   com nome de cidade comprido empurraria a linha além da tela, e a página andaria
   de lado sem ninguém mexer em nada. */
.filtros{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:14px;
  align-items:end;
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:18px;
  margin-bottom:22px;
}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0;}
.rot{font-size:13px;font-weight:700;color:var(--texto2);letter-spacing:.02em;}
.campo input,.campo select{
  width:100%;
  min-width:0;
  min-height:var(--alvo);
  padding:10px 12px;
  font-family:inherit;
  font-size:16px;              /* 16px evita o zoom automático do iOS no foco */
  color:var(--texto);
  background:var(--cartao);
  border:1px solid #CFCAC1;
  border-radius:8px;
}
.campo input:focus,.campo select:focus{border-color:var(--bronze);}
.acoes{display:flex;flex-wrap:wrap;gap:10px;}

.btn-buscar,.btn-limpar,.btn-pagina{
  font-family:inherit;font-size:15px;font-weight:700;
  min-height:var(--alvo);padding:11px 18px;
  border-radius:8px;cursor:pointer;
}
.btn-buscar{background:var(--bronze);color:#FFFFFF;border:1px solid var(--bronze);}
.btn-buscar:hover{background:#73461C;}
.btn-limpar,.btn-pagina{
  background:var(--cartao);color:var(--texto);border:1px solid #CFCAC1;
}
.btn-limpar:hover,.btn-pagina:hover:not([disabled]){border-color:var(--bronze);}
.btn-pagina[disabled]{opacity:.45;cursor:default;}

.contagem{
  font-size:14px;color:var(--texto2);margin-bottom:16px;min-height:22px;
}

/* ── a grade de cartões ──
   ⛔ `minmax(min(100%,270px),1fr)`: o `min(100%,…)` é o que fecha a conta em 390px.
   Com `minmax(270px,1fr)` puro, a coluna nunca encolhe abaixo de 270px e, somada ao
   respiro lateral, estoura a tela do celular pequeno. Aqui a coluna cede primeiro. */
.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:18px;
}

.cartao{
  display:flex;flex-direction:column;
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
  min-width:0;
}

/* ⛔ A moldura da imagem tem PROPORÇÃO fixa e a imagem preenche por `cover`: sem
   isso, cada foto chega com um tamanho e a grade pula na tela enquanto carrega
   (o texto desce debaixo do dedo de quem já ia tocar). Cartão sem imagem não ganha
   moldura vazia: ele começa no texto, sem fingir foto que não existe. */
.moldura{
  aspect-ratio:16/10;
  background:#EFECE6;
  border-bottom:1px solid var(--borda);
}
.moldura img{width:100%;height:100%;object-fit:cover;}

.corpo{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.nome{font-size:18px;font-weight:700;line-height:1.3;}
.meta{
  display:flex;flex-wrap:wrap;gap:6px 10px;
  font-size:13px;color:var(--texto2);
}
.etiqueta{
  background:#F2EEE7;border:1px solid var(--borda);
  border-radius:99px;padding:3px 10px;
}
.resumo{font-size:14px;color:var(--texto2);}

.ver-site{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--alvo);padding:11px 18px;
  background:var(--bronze);color:#FFFFFF;
  border-radius:8px;font-weight:700;font-size:15px;
  text-decoration:none;
}
.ver-site:hover{background:#73461C;}

/* ── recados (vazio, sem resultado, falha) ── */
.recado{
  background:var(--cartao);
  border:1px solid var(--borda);
  border-left:4px solid var(--bronze-claro);
  border-radius:var(--raio);
  padding:22px;
  max-width:620px;
}
.recado h2{font-size:19px;font-weight:700;margin-bottom:8px;}
.recado p{color:var(--texto2);margin-bottom:6px;}
.recado .btn-buscar{margin-top:12px;}
.recado-falha{border-left-color:#B4552B;}

/* ── paginação ── */
.paginacao{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:28px;
}
.pagina-txt{font-size:14px;color:var(--texto2);}

/* ── rodapé ── */
.rodape{
  border-top:1px solid var(--borda);
  background:var(--cartao);
  padding:22px 0;
  font-size:14px;color:var(--texto2);
}
.rodape p{margin-bottom:4px;}

/* ── celular ──
   Uma coluna nos filtros e botões que ocupam a largura: no polegar, botão estreito
   ao lado de outro é o erro de toque que faz a pessoa buscar quando queria limpar. */
@media (max-width:760px){
  .filtros{grid-template-columns:1fr;padding:16px;}
  .acoes{display:grid;grid-template-columns:1fr;}
  .btn-buscar,.btn-limpar{width:100%;}
  .palco{padding-top:24px;}
}