/* ============================================================================
   Tem Pinheiral — sistema visual

   MOTIVO: a cidade e o nome vem da mata de pinheiros que cerca o Vale do
   Paraiba. Toda forma "redonda" do app (emblema de categoria, botao
   primario, capa de card) usa o mesmo raio assimetrico — --escama — que
   lembra a escama de uma pinha: arredondado de um lado, quase reto do outro.
   Repetido em tamanhos diferentes, isso e a assinatura do app, nao so o
   emblema de categoria sozinho.

   COR: a paleta e a que a Vanessa aprovou, ponto — navy, bege quente e
   dourado como base, com o amarelo-limao reservado SO para acao (botao,
   destaque, selecao). Os emblemas de categoria giram entre esses MESMOS
   quatro tons (nunca cor nova) para nao virar arco-iris nem fugir da marca.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* #023266 e o navy da PROPRIA logo (Achei em Pinheiral) — antes o app usava
     um navy diferente (#1F2A44) do mood board inicial. Unificado num so, pra
     logo e app serem a mesma marca, nao dois azuis parecidos. */
  --navy:#023266; --navy-2:#0C4A8C; --navy-3:#011E45;
  --dourado:#C6A75E; --dourado-ink:#3A2E0F;
  --limao:#FBDF65; --limao-ink:#3A3000;
  --ouro:var(--limao); --ouro-ink:var(--limao-ink);
  --bege:#E8DCC8; --creme:#F7F2E6; --branco:#FDFDFD;
  --azul-claro:#8AA5D0; /* das 3 cores claras da paleta-limao (Vanessa), pros emblemas de categoria */
  --tinta:#023266; --fumaca:#6E7686; --linha:#E6DFCB;
  --bom:#2F7D53; --bom-bg:#E4F3EA;
  --alerta:#B45309; --alerta-bg:#FDF1DE;
  --perigo:#B3261E; --perigo-bg:#FCE8E6;

  --escama:28px 10px 28px 10px;
  --escama-sm:16px 6px 16px 6px;
  --escama-lg:40px 14px 40px 14px;
  --sombra:0 10px 24px -8px rgba(15,24,48,.25);
  --sombra-sm:0 4px 12px rgba(15,24,48,.10);

  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-corpo:'Inter',-apple-system,"Segoe UI",sans-serif;
  --f-dado:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--tinta);font-family:var(--f-corpo)}
h1,h2,h3{font-family:var(--f-display);margin:0}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none !important}
a{color:inherit}
:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* --------------------------------------------------------------- estrutura */
.envelope{max-width:720px;margin:0 auto;padding:14px 14px 90px}
.centro{text-align:center;color:var(--fumaca);padding:30px 10px}

.topo{position:relative;background:radial-gradient(120% 100% at 15% -10%,var(--navy-2),var(--navy) 60%,var(--navy-3));
  color:#fff;padding:18px 16px 22px;overflow:hidden}
.topo::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));pointer-events:none}
.topo .linha1{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;position:relative;z-index:1}
.logo-topo{height:34px;display:block}
.logo-entrada{height:56px;display:block;margin:0 auto 14px}
.topo h1{font-size:1.2rem;color:#fff;position:relative;z-index:1;font-weight:600;
  margin-top:16px}
.topo .sub{color:rgba(255,255,255,.65);margin-top:2px;font-size:.88rem;position:relative;z-index:1}

.busca-grande{position:relative;margin-top:16px;z-index:1}
.busca-grande input{width:100%;padding:15px 16px 15px 46px;border:none;
  border-radius:var(--escama);font-size:1rem;background:#fff;color:var(--tinta);
  box-shadow:var(--sombra)}
.busca-grande input::placeholder{color:var(--fumaca)}
.busca-grande .lupa{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:1.05rem;opacity:.55}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:999px;padding:12px 20px;font-weight:700;
  font-size:.95rem;font-family:var(--f-corpo);text-decoration:none;text-align:center}
.botao.primario{background:var(--ouro);color:var(--ouro-ink)}
.botao.secundario{background:var(--navy);color:#fff}
.botao.fantasma{background:transparent;color:var(--navy);border:1px solid var(--linha)}
.botao.perigo{background:var(--perigo-bg);color:var(--perigo)}
.botao:disabled{opacity:.5;cursor:default}
.botao.bloco{display:flex;width:100%}
.topo .botao.fantasma{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}

.faixa-instalar{display:flex;align-items:center;gap:10px;width:100%;
  background:var(--navy);color:#fff;border:none;border-radius:var(--escama);
  padding:12px 14px;margin-top:14px;text-align:left;font-family:var(--f-corpo);
  font-weight:600;font-size:.85rem}
.faixa-instalar .icone-svg{width:22px;height:22px;flex:0 0 auto}

.faixa-convite{display:flex;align-items:center;gap:10px;width:100%;
  background:var(--bege);color:var(--navy);border:1px dashed var(--dourado);
  border-radius:var(--escama);padding:12px 14px;margin:10px 0 14px;text-align:left;
  font-family:var(--f-corpo);font-weight:600;font-size:.83rem}
.faixa-convite .icone-svg{width:20px;height:20px;flex:0 0 auto;color:var(--dourado)}

.modal-fundo{position:fixed;inset:0;background:rgba(2,50,102,.55);
  display:flex;align-items:flex-end;z-index:50}
.modal-caixa{background:#fff;border-radius:var(--escama-lg) var(--escama-lg) 0 0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));width:100%;
  max-width:720px;margin:0 auto;box-shadow:var(--sombra)}
.modal-caixa h3{margin-bottom:12px}

/* ------------------------------------------------------------ categorias */
/* Requisito: SEMPRE na tela, nunca faixa lateral/scroll horizontal — por
   isso `grid` com quebra de linha, nunca `overflow-x`. */
.secao-titulo{display:flex;align-items:baseline;justify-content:space-between;
  margin:22px 0 12px}
.secao-titulo h2{font-size:1.05rem}
.secao-titulo button{background:none;border:none;color:var(--navy);
  font-weight:700;font-size:.85rem;font-family:var(--f-corpo)}

/* Icone e SVG proprio, tracado (nao emoji do sistema) — e o que garante
   tamanho igual em todo Android/iPhone: o glifo de emoji varia de peso
   visual por fonte do fabricante, um <svg> com o mesmo viewBox e a mesma
   espessura de linha, nao. */
.icone-svg{width:46%;height:46%;overflow:visible}
.grade-categorias{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;padding:2px;opacity:0;
  animation:surgir .45s ease forwards;
  /* A CAUSA REAL do quadrado maior no meio da lista: por padrao, item de
     grid nao encolhe alem do texto que tem dentro (`min-width:auto`). Um
     nome comprido sem espaco pra quebrar ("Clínica e consultório médico")
     forcava a COLUNA INTEIRA a alargar — e coluna de grid vale pra TODA
     linha da grade, nao so daquela onde o nome comprido esta. Por isso
     aparecia um quadrado maior "no meio", em linhas que nem tinham
     nome comprido nenhum. `min-width:0` desliga essa regra. */
  min-width:0}
.cat-item .emblema{width:100%;aspect-ratio:1;border-radius:var(--escama);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-sm);position:relative;transition:transform .15s ease;
  border:1px solid rgba(31,42,68,.08)} /* sem isso o tom #FDFDFD quase some no fundo creme */
.cat-item:active .emblema{transform:scale(.92)}
.cat-item span{font-size:.72rem;font-weight:600;text-align:center;color:var(--tinta);
  line-height:1.15;overflow-wrap:break-word;width:100%}
.cat-item.selecionada .emblema{outline:3px solid var(--ouro);outline-offset:2px}
.cat-item.todas .emblema{background:var(--navy) !important;color:#fff}

@keyframes surgir{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
.cat-item:nth-child(1){animation-delay:.02s}.cat-item:nth-child(2){animation-delay:.06s}
.cat-item:nth-child(3){animation-delay:.10s}.cat-item:nth-child(4){animation-delay:.14s}
.cat-item:nth-child(5){animation-delay:.18s}.cat-item:nth-child(6){animation-delay:.22s}
.cat-item:nth-child(7){animation-delay:.26s}.cat-item:nth-child(8){animation-delay:.30s}
.cat-item:nth-child(n+9){animation-delay:.32s}

/* MESMO numero de colunas do grid de cima (4) — era essa diferenca (4 vs 3
   colunas) que fazia a fileira de baixo ficar visivelmente maior: com menos
   coluna, cada quadrado ganha mais largura da mesma tela. Nao era o icone,
   era a grade. */
.grade-categorias.completa{max-height:0;
  overflow:hidden;margin-top:0;transition:max-height .4s ease}
/* 8000px e "sem limite" pro tamanho real da lista (70+ categorias cabem
   folgado); um teto baixo aqui foi o que cortava as ultimas linhas da grade
   ao abrir "ver todas" — parecia icone quebrado, era CSS cortando a grade. */
.grade-categorias.completa.aberta{max-height:8000px;margin-top:12px}

/* --------------------------------------------------------- novidades (feed) */
/* Vitrine SEMPRE em carrossel horizontal (diferente da regra de categoria):
   e conteudo editorial/prova social, nao navegacao estrutural — aqui rolar
   de lado e o padrao esperado (como stories), a Vanessa so vetou isso para
   categoria. */
.vitrine-novidades{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;
  scroll-snap-type:x proximity}
.novidade-item{flex:0 0 62%;max-width:230px;background:var(--branco);
  border:none;border-radius:var(--escama);overflow:hidden;box-shadow:var(--sombra-sm);
  text-align:left;scroll-snap-align:start}
.capa-novidade{aspect-ratio:4/3;background:var(--bege)}
.capa-novidade .midia{width:100%;height:100%;object-fit:cover}
.capa-novidade .midia.sem-foto{display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:1.8rem;color:var(--navy);background:var(--bege)}
.corpo-novidade{padding:10px 12px}
.corpo-novidade b{display:block;font-size:.85rem;margin-bottom:2px}
.corpo-novidade span{display:block;font-size:.8rem;color:var(--fumaca);line-height:1.3}

/* --------------------------------------------------------------- busca */
.busca-campo{padding:14px 0 0}
.busca-campo input{width:100%;padding:13px 14px 13px 42px;border-radius:999px;
  border:1px solid var(--linha);background:#fff;font-size:.95rem;position:relative}
.busca-envolto{position:relative}
.busca-envolto .lupa{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5}

/* ----------------------------------------------------------------- cards */
.card{background:var(--branco);border-radius:var(--escama-lg);box-shadow:var(--sombra-sm);
  overflow:hidden;margin-bottom:14px}
.card .capa{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--dourado));
  display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.card .capa img{width:100%;height:100%;object-fit:cover}
.card .capa .icone-svg{width:2.2rem;height:2.2rem}

/* ------------------------------------------------- painel de resultados */
.card.secao-painel{padding:18px;display:flex;flex-direction:column;gap:10px}
.destaque-resultado{background:var(--limao);padding:20px;display:flex;
  flex-direction:column;gap:6px}
.rotulo-destaque{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--tinta)}
.valor-destaque{font-size:2.4rem;line-height:1;font-weight:800;font-family:var(--f-display)}
.sub-destaque{font-size:.9rem;font-weight:600}
.rodape-destaque{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding-top:10px;margin-top:4px;border-top:1px solid rgba(2,50,102,.18);
  font-size:.78rem;font-weight:600}

.grade-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat-tile{background:var(--branco);border-radius:var(--escama-sm);padding:14px;
  box-shadow:var(--sombra-sm);display:flex;flex-direction:column;gap:6px}
.rotulo-stat{font-size:.75rem;font-weight:700;color:var(--fumaca)}
.valor-stat{font-size:1.7rem;font-weight:800;font-family:var(--f-display)}
.variacao{font-size:.75rem;font-weight:700;color:var(--bom)}

.grafico-semanas{display:flex;gap:3px;align-items:flex-end;height:130px;
  border-bottom:1px solid var(--linha)}
.barra-semana{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:4px}
.valor-barra{font-size:.7rem;font-weight:800}
.barra{width:70%;max-width:24px;border-radius:4px 4px 0 0}
.citacao-comentario{margin:0;padding:12px 14px;background:var(--creme);
  border-radius:14px 14px 14px 4px;font-size:.85rem;font-style:italic}

.card-escuro{background:var(--navy);color:#fff;padding:18px}
.card-escuro .desc{color:var(--azul-claro)}
.grade-desde-sempre{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.valor-desde{display:block;font-size:1.4rem;font-weight:800}
.rotulo-desde{display:block;font-size:.75rem;color:var(--azul-claro)}

.dica-resultado{padding:18px;display:flex;flex-direction:column;gap:8px}

.barra-progresso{height:10px;background:var(--creme);border-radius:6px;overflow:hidden}
.barra-progresso div{height:100%;background:var(--navy)}
.item-checklist{display:flex;align-items:center;gap:10px;min-height:40px;
  border-top:1px solid var(--linha);font-size:.85rem}
.marca-check{width:22px;height:22px;flex-shrink:0;border-radius:8px 8px 8px 3px;
  border:2px solid var(--azul-claro);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;color:var(--limao-ink)}
.marca-check.feito{background:var(--navy);border-color:var(--navy);color:var(--limao)}

.grade-galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.miniatura-galeria{position:relative;aspect-ratio:1;border-radius:var(--escama-sm);overflow:hidden}
.miniatura-galeria img{width:100%;height:100%;object-fit:cover}
.miniatura-galeria button{position:absolute;top:3px;right:3px;width:22px;height:22px;
  border-radius:999px;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem;
  display:flex;align-items:center;justify-content:center}

.cartao-mes{background:var(--navy);color:#fff;border-radius:var(--escama-lg);
  padding:26px 22px;display:flex;flex-direction:column;gap:16px}
.cartao-mes .marca-cartao{font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--limao)}
.cartao-mes h2{font-size:1.6rem;margin:0}
.grade-cartao-mes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.grade-cartao-mes>div{background:rgba(255,255,255,.08);border-radius:var(--escama-sm);
  padding:14px;display:flex;flex-direction:column;gap:4px}
.grade-cartao-mes .destaque-cartao{background:var(--limao);color:var(--limao-ink)}
.valor-cartao{font-size:1.8rem;font-weight:800;font-family:var(--f-display)}
.cartao-mes p{margin:0;font-size:1rem;line-height:1.4}
.card .corpo{padding:14px}
.card h3{font-size:1.05rem;font-weight:700}
.card .categoria{display:inline-block;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--navy);
  background:var(--creme);padding:3px 10px;border-radius:999px;margin-bottom:6px}
.card .nota{font-family:var(--f-dado);color:var(--ouro-ink);font-weight:600;font-size:.85rem}
.card .desc{color:var(--fumaca);font-size:.9rem;margin:6px 0}
.card .rodape{display:flex;gap:8px;padding:0 14px 14px;align-items:center}
.card .rodape a.botao{flex:1;white-space:nowrap}
.card .rodape .fav-redonda{flex:0 0 auto;width:48px;height:48px;padding:0;
  border-radius:999px;font-size:1.2rem}

.fav{background:rgba(255,255,255,.9);border:none;font-size:1.15rem;
  border-radius:999px;width:34px;height:34px;position:absolute;top:10px;right:10px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-sm)}
.selo-aberto{position:absolute;bottom:10px;left:10px;background:var(--bom-bg);
  color:var(--bom);font-size:.72rem;font-weight:800;padding:3px 10px;
  border-radius:999px;box-shadow:var(--sombra-sm)}

.lista-negocios{display:flex;flex-direction:column}

/* --------------------------------------------------------------- campos */
.campo{margin-bottom:12px}
.campo label{display:block;font-size:.85rem;color:var(--fumaca);margin-bottom:4px;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 12px;
  border:1px solid var(--linha);border-radius:14px;font-size:1rem;
  background:#fff;color:var(--tinta);font-family:inherit}
.campo textarea{resize:vertical;min-height:80px}

.chip-linha{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.chip{flex:0 0 auto;background:#fff;border:1px solid var(--linha);
  padding:8px 14px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--navy)}
.chip.ativo{background:var(--navy);color:#fff;border-color:var(--navy)}

.post{background:var(--branco);border-radius:var(--escama-lg);box-shadow:var(--sombra-sm);
  margin-bottom:14px;overflow:hidden}
.post header{display:flex;align-items:center;gap:10px;padding:12px 14px}
.post header .avatar{width:38px;height:38px;border-radius:var(--escama-sm);background:var(--creme);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy);font-family:var(--f-display)}
.post .texto{padding:0 14px 12px;white-space:pre-wrap}
.post .midia{width:100%}
/* varias fotos/videos no mesmo post: rolagem horizontal, uma tela por vez
   (`scroll-snap`) — igual carrossel de rede social, e diferente da regra de
   categoria (aqui e conteudo/prova social, nao navegacao estrutural). */
.galeria-post{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
.galeria-post .midia{flex:0 0 100%;aspect-ratio:1;object-fit:cover;scroll-snap-align:start}
.link-post{display:flex;align-items:center;gap:6px;margin:0 14px 12px;padding:10px 12px;
  background:var(--creme);border-radius:var(--escama-sm);font-size:.85rem;
  font-weight:600;color:var(--navy);text-decoration:none;word-break:break-all}
.previa-arquivos{margin:-6px 0 12px}
.post footer{padding:10px 14px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:8px}
.comentario{font-size:.9rem}
.comentario b{color:var(--navy)}

.estrelas{color:var(--ouro);font-size:1.2rem;letter-spacing:2px}
.estrelas button{background:none;border:none;font-size:1.2rem;color:#D9D9D9}
.estrelas button.marcada{color:var(--ouro)}

.rodape-fixo{position:fixed;bottom:0;left:0;right:0;background:var(--branco);
  border-top:1px solid var(--linha);display:flex;max-width:720px;margin:0 auto;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:4px}
.rodape-fixo button{flex:1;background:none;border:none;padding:6px 2px;
  border-radius:var(--escama-sm);font-size:.68rem;color:var(--fumaca);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:700;
  font-family:var(--f-corpo);transition:background .15s ease,color .15s ease}
.rodape-fixo button .icone-svg{width:1.35rem;height:1.35rem}
.rodape-fixo button.ativa{color:var(--navy);background:var(--bege)}

.aviso{padding:10px 14px;border-radius:14px;font-size:.9rem;margin-bottom:12px}
.aviso.erro{background:var(--perigo-bg);color:var(--perigo)}
.aviso.ok{background:var(--bom-bg);color:var(--bom)}
.aviso.alerta{background:var(--alerta-bg);color:var(--alerta)}

.selo{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;
  font-weight:700;font-family:var(--f-dado)}
.selo.ativa{background:var(--bom-bg);color:var(--bom)}
.selo.pendente,.selo.atrasada{background:var(--alerta-bg);color:var(--alerta)}
.selo.cancelada{background:var(--perigo-bg);color:var(--perigo)}

.slot{display:inline-block;padding:8px 12px;border-radius:999px;
  border:1px solid var(--linha);margin:4px 4px 0 0;background:#fff;font-weight:600;
  font-family:var(--f-dado);font-size:.85rem}
.slot.selecionado{background:var(--navy);color:#fff;border-color:var(--navy)}

.link-troca{text-align:center;margin-top:14px;font-size:.9rem}

.entrada{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:24px;background:radial-gradient(120% 100% at 20% 0%,var(--navy-2),var(--navy-3))}
.entrada .caixa{background:#fff;border-radius:var(--escama-lg);padding:28px 22px;
  box-shadow:var(--sombra)}
.entrada .titulo{text-align:center;margin-bottom:18px}
.entrada .titulo p{color:var(--fumaca);margin:4px 0 0;font-size:.9rem}