/* Estilo das páginas públicas (vaga, produto, propriedade, perfil, 404).
   Gerado a partir de ui-lab/api/pagina.py (constante CSS, até 10/09/2026) —
   externalizado para tirar 'unsafe-inline' de style-src na CSP (spec 014,
   inventário §4-C). Repetido do design system (ui-lab/assets/tokens.css) de
   propósito: esta página evita CSS externo demais por causa do 3G de quem
   está na lavoura — um arquivo cacheável só, não vários.

   Editou aqui? Confira se pagina.py ainda referencia /assets/pagina.css via
   <link>, e não precisa recalcular hash nenhum — CSS de arquivo externo não
   entra em style-src por hash. */
:root{--bg:#F7F7F7;--card:#FFF;--ink:#1F1F1F;--soft:#5C5C5C;--faint:#8C8C8C;
--verde:#227C4B;--verde-claro:#E3F1E7;--raio:12px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 16px/1.5 'Inter',system-ui,-apple-system,sans-serif}
.faixa{position:sticky;top:0;z-index:10;background:var(--card);
border-bottom:1px solid #E8E8E8;padding-top:env(safe-area-inset-top)}
.faixa__interno{display:flex;align-items:center;gap:4px;max-width:720px;margin:0 auto;padding:6px 8px}
.voltar{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
flex:none;border:0;background:transparent;border-radius:10px;color:var(--ink);cursor:pointer}
.voltar:active{background:var(--verde-claro)}
.voltar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.marca{display:flex;align-items:center;gap:9px;padding:0 8px;color:var(--ink);
text-decoration:none;font-weight:600;font-size:15px}
.marca img{width:26px;height:26px;border-radius:7px}
main{max-width:720px;margin:0 auto;padding:20px}
.cartao{background:var(--card);border-radius:var(--raio);overflow:hidden;
box-shadow:0 1px 2px rgba(31,31,31,.06),0 2px 8px rgba(31,31,31,.06)}
.capa{width:100%;aspect-ratio:16/10;display:block;background:var(--verde-claro)}
/* `contain`: foto de implemento cortada esconde justamente o que a pessoa quer
   ver antes de decidir comprar. Perfil não usa capa — usa `.perfil__foto`. */
.capa--objeto{object-fit:contain}
.corpo{padding:20px}
h1{margin:0 0 6px;font:600 25px/1.25 'Poppins','Inter',system-ui,sans-serif}
.onde{margin:0 0 16px;color:var(--soft);font-size:15px}
.selo{display:inline-block;margin:0 6px 8px 0;padding:5px 11px;border-radius:999px;
background:var(--verde-claro);color:var(--verde);font-size:13px;font-weight:600}
.preco{margin:14px 0;font:600 26px/1.2 'Poppins','Inter',sans-serif;color:var(--verde)}
.desc{margin:14px 0 0;white-space:pre-line;color:var(--ink)}
.btn{display:block;margin:22px 0 0;padding:15px;border-radius:10px;background:var(--verde);
color:#fff;text-align:center;text-decoration:none;font-weight:600}
.btn--fraco{background:transparent;color:var(--verde);border:1px solid var(--verde);margin-top:10px}

/* ── Perfil de empresa ────────────────────────────────────────────────────────
   Layout diferente do resto de propósito. Nas outras páginas a foto É o produto
   — implemento, lavoura, propriedade — e ocupar a primeira tela com ela é o
   certo. Aqui a foto é um logotipo, e quem chega vem de um anúncio no WhatsApp:
   já sabe de quem é a página, e veio para fazer uma coisa. Capa de 16:10 num
   celular de 390px come 244px antes de a ação aparecer. Identidade em linha
   custa 76px, e o botão sobe para dentro da primeira tela. */
.perfil{display:flex;gap:14px;align-items:center;padding:20px 20px 0}
.perfil__foto{width:76px;height:76px;flex:none;border-radius:50%;object-fit:cover;
background:var(--verde-claro);border:1px solid #E8E8E8}
.perfil__dados{min-width:0}
.perfil__dados h1{margin:0 0 3px}
.perfil__onde{margin:0;color:var(--soft);font-size:15px}
.nota{margin:5px 0 0;font-size:14px;color:var(--soft)}
.nota b{color:var(--ink);font-weight:600}
.acoes{display:grid;gap:10px;padding:18px 20px 0}
.acoes .btn{margin:0;display:flex;align-items:center;justify-content:center;gap:9px}
.acoes .btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.detalhes{padding:16px 20px 20px}
.detalhes .desc{margin:12px 0 0}
.rodape{max-width:720px;margin:0 auto;padding:26px 20px 40px;color:var(--faint);font-size:13px}
.rodape a{color:var(--soft)}
@media(max-width:420px){h1{font-size:21px}.corpo{padding:16px}}