/* LULI DIAS 2.0 — o guia
   Identidade v3.2: preto sobre branco, Archivo, listas com filete (nunca cartões),
   quatro cores de apoio em dose pequena e com função, um traço do Túlio por tela.
   Referência de postura: guia Michelin — autoridade, não luxo.
   Fonte da verdade: luli-dias-branding/references/design-system.md
   Mobile-first; alvos de toque de 44px ou mais. */

:root{
  --branco:#FFFFFF;                        /* fundo de tudo */
  --preto:#111111;                         /* texto, logo, botão preenchido */
  --cinza-1:#F4F4F4;                       /* superfície secundária, campo, mapa */
  --cinza-2:#E3E3E3;                       /* filetes */
  --cinza-3:#6B6B6B;                       /* texto secundário, rótulos, dados */

  /* apoio — só anel de categoria, pino, ponto "novo", filete de seção, link e traço */
  --lacre:#B5121B;                         /* restaurantes · traço do Túlio */
  --azulejo:#1D3FCB;                       /* hotéis · gotas */
  --azeite:#7A8B12;                        /* bares e lojas de vinho */
  --acafrao:#D08A12;                       /* mercados */

  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --marcador:"Permanent Marker",cursive;   /* provisório: a letra final é a do Túlio */

  --toque:48px;
  --topo:56px;
  --menu:62px;                             /* altura do menu de baixo, no celular */

  /* O header é preto nos dois temas, então não pode usar os tokens que invertem. */
  --preto-fixo:#111111;
  --branco-fixo:#FFFFFF;
}

@media(prefers-color-scheme:dark){
  :root{
    --branco:#111111; --preto:#F4F4F4;
    --cinza-1:#1C1C1C; --cinza-2:#2E2E2E; --cinza-3:#9A9A9A;
    --lacre:#E0424A; --azulejo:#6B84FF; --azeite:#B2C43A; --acafrao:#E8AA3A;
  }
  /* no escuro o fundo também é #111: o header precisa de um filete para se separar */
  .topo{border-bottom:1px solid rgba(255,255,255,.14)}
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--branco); color:var(--preto);
  font:16px/1.55 var(--f);
  -webkit-font-smoothing:antialiased;
  padding-top:calc(var(--topo) + env(safe-area-inset-top,0px));
  overflow-x:hidden;
}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none}
a{color:inherit; text-decoration:none}

/* ───────────────────────────────────────────── cabeçalho */

/* O header é a única superfície preta fixa do app — o bloco do selo virando barra.
   Dentro dele tudo é branco: nome, anel, setas e comandos. */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(var(--topo) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 6px 0;
  background:var(--preto-fixo); color:var(--branco-fixo);
  display:flex; align-items:center; justify-content:space-between;
}
/* logo horizontal: nome em Archivo larga + anel vazado (o furo do selo) */
.topo-marca{
  font-weight:800; font-stretch:112%; letter-spacing:-.02em; text-transform:uppercase;
  font-size:17px; color:var(--branco-fixo); white-space:nowrap;
  position:absolute; left:50%; transform:translateX(-50%);
  top:env(safe-area-inset-top,0px); height:var(--topo);
  display:flex; align-items:center;
}
.topo-marca::after{
  content:""; display:inline-block; width:.3em; height:.3em; border-radius:50%;
  border:.07em solid currentColor; margin-left:.16em;
}
.topo-btn{
  min-width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--branco-fixo); position:relative; z-index:1;
}
.topo-btn:disabled{opacity:0; pointer-events:none}

/* comandos do membro no header (desktop) */
.topo-acoes{display:flex; align-items:center; gap:2px; position:relative; z-index:1}
.topo-acao{
  display:flex; align-items:center; gap:7px; height:44px; padding:0 12px;
  color:var(--branco-fixo); font:600 13px var(--f); white-space:nowrap; opacity:.72;
  transition:opacity .16s;
}
.topo-acao:hover,.topo-acao.on{opacity:1}
.topo-acao svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 17px}
/* "Entrar" é o comando forte: vazado em branco, dentro do preto */
.topo-acao--forte{border:1px solid var(--branco-fixo); opacity:1; padding:0 14px; height:34px}
.topo-acao--forte:hover{background:var(--branco-fixo); color:var(--preto-fixo)}
/* quantos lugares estão na lista */
.topo-conta{
  font:700 11px/1 var(--f); min-width:17px; height:17px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--branco-fixo); color:var(--preto-fixo); font-variant-numeric:tabular-nums;
}

/* ─── menu de baixo (celular) ───────────────────────────────────────────
   No branco, com filete preto em cima: a barra preta é uma só, a de cima. */
.menu{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--branco); border-top:1px solid var(--preto);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.menu-item{
  flex:1; min-height:var(--menu); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:8px 4px;
  color:var(--cinza-3); font:600 11px var(--f); position:relative;
}
.menu-item svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.menu-item.on{color:var(--preto)}
/* a aba ativa é marcada por um filete preto em cima, não por cor */
.menu-item.on::before{content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:var(--preto)}
.menu-conta{
  position:absolute; top:9px; left:50%; margin-left:3px;
  font:700 10px/1 var(--f); min-width:15px; height:15px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--preto); color:var(--branco); font-variant-numeric:tabular-nums;
}
@media(max-width:759px){
  /* quem tem menu embaixo não repete os comandos no header; quem ainda não entrou,
     e portanto não tem menu, continua com o "Entrar" lá em cima */
  body.com-menu .topo-acoes{display:none}
  body.com-menu .menu{display:flex}
  body.com-menu{padding-bottom:calc(var(--menu) + env(safe-area-inset-bottom,0px))}
  /* a ação principal da ficha sobe para cima do menu */
  body.com-menu .barra-fixa{bottom:calc(var(--menu) + env(safe-area-inset-bottom,0px)); padding-bottom:10px}
  body.com-menu .tela--com-barra{padding-bottom:112px}
}
/* No desktop não há menu de baixo: o nome vai para a esquerda e os comandos para a direita,
   senão o bloco de comandos passa por cima do nome centralizado. */
@media(min-width:760px){
  .topo{padding-left:14px; padding-right:14px}
  .topo-marca{position:static; transform:none; margin-right:auto; padding-left:6px}
  .topo-btn{min-width:36px}
}

/* ───────────────────────────────────────────── estrutura */

.tela{max-width:760px; margin:0 auto; padding:24px 20px 96px}
.tela--larga{max-width:1100px}

/* rótulo: 700 12 caixa alta .14em cinza 3 */
.olho{
  font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cinza-3); margin-bottom:12px;
}

h1,h2,h3,.nome{font-weight:800; font-stretch:112%; letter-spacing:-.02em; line-height:1}
h1{font-size:36px; margin-bottom:12px}
h2{font-size:25px; margin-bottom:10px; line-height:1.05}
h3{font-size:19px}
.sub{color:var(--cinza-3); font-size:15px; line-height:1.6}
.destaque{font:500 20px/1.3 var(--f)}
.meta{font:400 13px var(--f); color:var(--cinza-3); font-variant-numeric:tabular-nums}
.regua{height:1px; background:var(--cinza-2); border:0; margin:32px 0}

/* ───────────────────────────────────────────── traço do Túlio
   Um por tela, com função, no máximo 24px de altura (grande só em lista vazia,
   abertura e convite). Os SVGs definitivos são desenhados pelo Túlio. */

.traco-linha{stroke:var(--lacre); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:6 5; fill:none}
.traco-linha.anima{stroke-dashoffset:400; animation:tracar .4s ease-out forwards}
@keyframes tracar{to{stroke-dashoffset:0}}
/* sublinhado torto: a palavra que importa, uma por tela */
.sublinhado{position:relative; white-space:nowrap}
.sublinhado svg{
  position:absolute; left:-2%; bottom:-.22em; width:104%; height:.32em; overflow:visible;
}
.hand{font-family:var(--marcador); text-transform:uppercase; line-height:1.15}
@media(prefers-reduced-motion:reduce){.traco-linha.anima{animation:none; stroke-dashoffset:0}}

/* anel de categoria — 9px vazado, a única cor ao lado de um nome */
.cat{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  border:2px solid currentColor; flex:0 0 9px;
}
.cat--rest{color:var(--lacre)}
.cat--hotel{color:var(--azulejo)}
.cat--vinho{color:var(--azeite)}
.cat--mercado{color:var(--acafrao)}
/* ponto de 6px "novo no guia" */
.ponto-novo{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--lacre); flex:0 0 6px;
}

/* ───────────────────────────────────────────── botões
   Um botão preenchido por tela; o resto é vazado. */

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--toque); padding:0 20px; width:100%;
  background:var(--preto); color:var(--branco);
  font:700 14px var(--f); letter-spacing:.02em;
  border:1px solid var(--preto); border-radius:0;
  transition:opacity .18s;
}
.btn:hover{opacity:.82}
.btn:disabled{background:var(--cinza-2); border-color:var(--cinza-2); color:var(--cinza-3); cursor:not-allowed}
.btn--vazado{background:transparent; color:var(--preto); border:1px solid var(--preto)}
.btn--vazado:hover{background:var(--cinza-1); opacity:1}
.btn--texto{
  background:none; border:0; color:var(--cinza-3); font:400 15px var(--f);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--cinza-2);
  min-height:44px; padding:0;
}
.btn--texto:hover{color:var(--preto); background:none}
.btn-linha{display:flex; gap:10px}
.btn-linha .btn{flex:1}

/* ───────────────────────────────────────────── campos */

.campo{
  width:100%; min-height:var(--toque); padding:11px 0;
  background:none; border:0; border-bottom:1.5px solid var(--preto);
  font:500 17px var(--f); border-radius:0;
}
.campo:focus{outline:none; border-bottom-width:2px}
.campo::placeholder{color:var(--cinza-3); font-weight:400}
textarea.campo{resize:none; line-height:1.5}

.tela > .campo, .tela > .sub + .campo{margin-top:20px}

/* opções de escolha (onboarding) — chips altos, borda preta, selecionado preenchido */
.opcoes{display:flex; flex-direction:column; gap:8px; margin-top:20px}
.opcoes--grade{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.opcao{
  display:flex; align-items:center; gap:12px; text-align:left;
  min-height:var(--toque); padding:12px 14px;
  background:var(--branco); border:1px solid var(--preto); border-radius:0;
  font-size:15px; line-height:1.35; transition:background .16s, color .16s;
}
.opcao:hover{background:var(--cinza-1)}
.opcao[aria-pressed="true"]{background:var(--preto); color:var(--branco)}
.opcao-marca{
  width:18px; height:18px; flex:0 0 18px; border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;
}
.opcao[aria-pressed="true"] .opcao-marca{color:var(--branco)}
.opcao-txt{flex:1}
.opcao-nota{display:block; font-size:12.5px; color:var(--cinza-3); margin-top:2px}
.opcao[aria-pressed="true"] .opcao-nota{color:var(--cinza-2)}

/* ───────────────────────────────────────────── convite */

.convite{
  min-height:calc(100vh - var(--topo)); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:40px 24px; max-width:460px; margin:0 auto;
}
/* O selo com furo — variante C, "os dois": a escada do Túlio à direita subindo em direção ao
   furo (sem tocar nele) e as duas linhas em lacre à esquerda. O desenho vem de
   assets/selo/selo-C-os-dois.svg e entra inline no DOM, para o nome sair em Archivo e não no
   fallback Arial. Enquanto o arquivo não chega, .selo-css já desenha o bloco, o GUIA e o furo. */
.selo{flex:0 0 auto; line-height:0; width:132px}
.selo svg{width:100%; height:auto; display:block}
.selo-css{
  position:relative; width:100%; aspect-ratio:1/1.3; background:#111; color:#fff;
  padding:10%; display:flex; flex-direction:column; justify-content:space-between;
  text-align:left; line-height:1;
}
.selo-css::after{
  content:""; position:absolute; right:10%; top:7.7%;
  width:20%; aspect-ratio:1; border-radius:50%; background:#fff;
}
.selo-guia{font:700 8px/1 var(--f); letter-spacing:.2em}
.selo-nome{font-weight:800; font-stretch:112%; letter-spacing:-.02em; font-size:27px; line-height:.92; text-transform:uppercase; margin-bottom:-.12em}
.convite .selo{margin-bottom:28px}

.convite h1{font-size:32px; margin-bottom:14px}
.convite .sub{margin-bottom:32px; max-width:360px}
.convite form{width:100%; display:flex; flex-direction:column; gap:18px}
.convite .campo{text-align:center; letter-spacing:.18em; text-transform:uppercase; font-size:16px}
.convite-rodape{margin-top:28px; font-size:14px; color:var(--cinza-3); line-height:1.7}

/* separador "ou" entre Google e e-mail — filete com a palavra no meio, sem caixa */
.ou{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--cinza-3)}
.ou::before, .ou::after{content:""; flex:1; height:1px; background:var(--cinza-2)}
.ou span{font:400 12px var(--f); text-transform:uppercase; letter-spacing:.08em}

/* erro de formulário — texto preto com filete lacre à esquerda. O lacre entra porque tem
   FUNÇÃO (algo falhou), ocupa um traço e não vai para fundo, botão nem título. */
.erro{
  margin-top:14px; padding:10px 0 10px 12px; border-left:2px solid var(--lacre);
  font:600 13px var(--f); color:var(--preto); line-height:1.5;
}

/* ───────────────────────────────── passos do onboarding — degraus da escada */

.passos{display:flex; gap:5px; margin-bottom:28px}
.passo{
  height:8px; flex:1; border:1.5px solid var(--preto); background:none;
  transition:background .28s;
}
.passo.feito{background:var(--preto)}

/* ───────────────────────────────────────────── home */

.home-abre{padding-bottom:4px}
.home-pergunta{margin:16px 0 18px; font-size:34px}
.home-campo{
  display:flex; align-items:flex-end; gap:10px;
  border-bottom:1.5px solid var(--preto); padding-bottom:6px;
}
.home-campo textarea{
  flex:1; border:0; background:none; padding:8px 0; font:400 17px/1.5 var(--f);
  min-height:56px; max-height:140px; resize:none;
}
.home-campo textarea:focus{outline:none}
.home-campo textarea::placeholder{color:var(--cinza-3)}
.home-enviar{
  width:44px; height:44px; flex:0 0 44px; border:1px solid var(--preto);
  background:var(--preto); color:var(--branco); font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.home-enviar:disabled{background:none; border-color:var(--cinza-2); color:var(--cinza-3)}

/* seções da home: rótulo à esquerda, "ver todos" à direita, filete embaixo */
.secao{margin-top:38px}
.secao-cabeca{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:10px; border-bottom:1px solid var(--cinza-2); margin-bottom:4px;
}
.secao-cabeca .olho{margin-bottom:0}
.secao-tudo{font:600 13px var(--f); color:var(--cinza-3); white-space:nowrap}
.secao-tudo:hover{color:var(--preto)}
.secao-nota{font:400 12.5px/1.5 var(--f); color:var(--cinza-3); margin-top:10px}

/* trilho horizontal dos top picks */
.trilho{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:16px -20px 0; padding:0 20px 6px; scroll-padding-left:20px; scrollbar-width:none;
}
.trilho::-webkit-scrollbar{display:none}
.pick{flex:0 0 240px; scroll-snap-align:start; display:block}
.pick-foto{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--cinza-1)}
.pick-foto.vazia{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-stretch:112%; color:var(--cinza-3); font-size:34px;
}
.pick-nome{
  display:flex; align-items:center; gap:7px; margin-top:11px;
  font-weight:800; font-stretch:112%; letter-spacing:-.02em; font-size:17px; line-height:1.15;
}
.pick-meta{margin-top:5px; font:400 13px var(--f); color:var(--cinza-3); font-variant-numeric:tabular-nums}
/* o "por que para você" do pick, em três linhas no máximo: a vitrine é para folhear */
.pick-porque{
  margin-top:7px; font:400 13.5px/1.45 var(--f); color:var(--preto);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media(min-width:760px){.pick{flex:0 0 260px}}

/* lista com filete — nunca cartão */
.lista{margin-top:2px}
.lista > *{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 0; border-bottom:1px solid var(--cinza-2); min-height:var(--toque);
}
.item-foto{width:60px; height:60px; flex:0 0 60px; object-fit:cover; background:var(--cinza-1)}
.item-foto.vazia{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-stretch:112%; color:var(--cinza-3); font-size:20px;
}
.item-txt{flex:1; min-width:0}
.item-nome{
  display:flex; align-items:center; gap:7px;
  font-weight:800; font-stretch:112%; letter-spacing:-.02em; font-size:17px; line-height:1.2;
}
.item-sub{display:block; margin-top:4px; font:400 13px var(--f); color:var(--cinza-3)}
.item-dir{flex:0 0 auto; font:400 13px var(--f); color:var(--cinza-3); font-variant-numeric:tabular-nums; text-align:right}

/* chips — borda preta no branco; selecionado preenchido */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font:600 13px var(--f); padding:9px 13px; min-height:40px;
  border:1px solid var(--preto); background:var(--branco); color:var(--preto);
}
.chip:hover{background:var(--cinza-1)}
.chip.on, .chip--forte{background:var(--preto); color:var(--branco)}
.chip-n{font:400 12px var(--f); color:var(--cinza-3); font-variant-numeric:tabular-nums}
.chip.on .chip-n{color:var(--cinza-2)}
/* a cidade do perfil, nos atalhos da home: filete grosso à esquerda, não cor e não preenchimento
   — preenchido é estado "selecionado" (.chip.on) e cor de apoio só entra com função. */
.chip--sua{border-left-width:3px}
/* "Ver todas": secundário de propósito, para não competir com as cidades */
.chip--vazado{border-color:var(--cinza-2); color:var(--cinza-3); font-weight:400}
.chip--vazado:hover{border-color:var(--preto); color:var(--preto)}
/* chips pequenos, só leitura (atributos de um lugar) */
.chips--leitura .chip{font-weight:400; font-size:12px; padding:5px 10px; min-height:0; cursor:default}
.chips--leitura .chip:hover{background:var(--branco)}

/* perto de mim */
.perto{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  min-height:var(--toque); padding:16px 0; margin-top:8px;
  border-top:1px solid var(--cinza-2); border-bottom:1px solid var(--cinza-2);
}
.perto-icone{font-size:18px}
.perto-txt{flex:1; font-size:15px}
.perto-txt small{display:block; color:var(--cinza-3); font-size:13px}

/* ───────────────────────────────────────────── resultado da recomendação */

.cartoes{display:flex; flex-direction:column; margin-top:20px}
.cartao{border-top:1px solid var(--cinza-2); padding-top:24px; margin-top:24px}
.cartao:first-child{border-top:0; padding-top:0; margin-top:0}
.cartao-foto{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--cinza-1)}
@media(min-width:640px){.cartao-foto{aspect-ratio:16/9; max-height:420px}}
.cartao-corpo{padding-top:18px}
.cartao-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.cartao-nome{display:flex; align-items:center; gap:9px; font-size:26px; line-height:1.05; margin:0}
.cartao-preco{
  font:400 14px var(--f); color:var(--cinza-3); flex:0 0 auto; padding-top:4px;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.cartao-preco i{color:var(--cinza-2); font-style:normal}
.cartao-local{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3); margin-top:10px}
.cartao-cozinha{font:500 20px/1.3 var(--f); margin-top:10px}

/* o "por que para VOCÊ" — coração da 2.0. Abre com as duas linhas do Túlio. */
.porque{position:relative; padding-left:18px; margin-top:18px}
.porque::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; width:5px;
  border-left:1.5px solid var(--lacre); border-right:1.5px solid var(--lacre);
}
.porque-titulo{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3); margin-bottom:7px}
.porque-txt{font-size:15px; line-height:1.6}

/* placeholder quando o lugar ainda não tem foto publicada */
.sem-foto{
  width:100%; aspect-ratio:4/3; background:var(--cinza-1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px; text-align:center;
}
@media(min-width:640px){.sem-foto{aspect-ratio:16/9}}
.sem-foto-nome{font-weight:800; font-stretch:112%; letter-spacing:-.02em; font-size:26px; line-height:1.1}
.sem-foto-nota{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3)}

.acoes-resultado{display:flex; gap:8px; margin-top:20px}
.acoes-resultado .btn{font-size:12.5px; padding:0 12px; white-space:nowrap}

/* ───────────────────────────────────────────── ficha do estabelecimento */

.ficha-capa{position:relative; margin:-24px -20px 0; background:var(--cinza-1)}
.ficha-capa img{width:100%; aspect-ratio:3/2; object-fit:cover}
@media(min-width:640px){.ficha-capa img{aspect-ratio:2/1}}
.ficha-galeria{display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.ficha-galeria::-webkit-scrollbar{display:none}
.ficha-galeria img{flex:0 0 100%; scroll-snap-align:start}
.ficha-contador{
  position:absolute; right:0; bottom:0; background:var(--preto); color:var(--branco);
  font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; padding:8px 12px;
}
.ficha-cabeca{padding:26px 0 0}
/* o compartilhar mora na linha do bairro: o lugar dele na fileira de ações é do ✕ */
.ficha-cabeca-topo{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-8px 0 4px}
.ficha-cabeca-topo .olho{margin-bottom:0}
.ficha-compartilhar{white-space:nowrap; font-size:13px; flex:none}
.ficha-cabeca h1{display:flex; align-items:center; gap:11px; font-size:34px; margin-bottom:0}
.ficha-cozinha{font:500 20px/1.3 var(--f); margin-top:12px}
.ficha-cozinha .preco{color:var(--cinza-3); font-variant-numeric:tabular-nums}
.ficha-cozinha .preco i{color:var(--cinza-2); font-style:normal}

/* a voz da curadoria — filete em cima e embaixo, sem bloco colorido */
.nota-luli{border-top:1px solid var(--preto); border-bottom:1px solid var(--cinza-2); padding:20px 0; margin:26px 0}
.nota-luli-topo{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3); margin-bottom:12px}
.credenciais{font:600 14px/1.7 var(--f); margin-bottom:12px}
.nota-luli-txt{font-size:16px; line-height:1.62; color:var(--cinza-3)}
.nota-luli-txt strong{color:var(--preto); font-weight:600}

.bloco{margin:30px 0}
.bloco-titulo{
  font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3);
  margin-bottom:6px; padding-bottom:10px; border-bottom:1px solid var(--preto);
}
.dado{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--cinza-2); font-size:15px}
.dado:last-child{border-bottom:none}
.dado-rotulo{flex:0 0 88px; font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3); padding-top:4px}
.dado-valor{flex:1; line-height:1.55}
.dado-valor a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--lacre)}

.acoes-sec{display:flex; gap:8px; margin:22px 0}
.acao-sec{
  flex:1; min-height:var(--toque); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:var(--branco); border:1px solid var(--preto);
  font:600 12px var(--f); transition:background .16s, color .16s; padding:8px 4px;
}
.acao-sec:hover{background:var(--cinza-1)}
.acao-sec[aria-pressed="true"]{background:var(--preto); color:var(--branco)}
.acao-sec-icone{font-size:16px}

/* barra fixa com a ação principal */
.barra-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--branco); border-top:1px solid var(--preto);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
}
.barra-fixa .btn{max-width:720px; margin:0 auto}
.tela--com-barra{padding-bottom:104px}

/* ───────────────────────────── mapa "perto de mim"
   Basemap cinza (sem as cores do Google), pinos no traço do Túlio em lacre, "você" em
   ponto preto. A tela é fixa: o mapa ocupa tudo entre o header e o menu. */

.mapa-tela{
  position:fixed; left:0; right:0;
  top:calc(var(--topo) + env(safe-area-inset-top,0px)); bottom:0;
  display:flex; flex-direction:column; background:var(--cinza-1);
}
body.com-menu .mapa-tela{bottom:calc(var(--menu) + env(safe-area-inset-bottom,0px))}
.mapa-barra{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 20px; background:var(--branco); border-bottom:1px solid var(--preto);
}
#mapa{flex:1; min-height:0; background:var(--cinza-1)}
.mapa-aviso{
  flex:0 0 auto; padding:10px 20px; background:var(--branco);
  border-top:1px solid var(--cinza-2); font:400 12.5px/1.45 var(--f); color:var(--cinza-3);
}

/* pino: o círculo à mão do Túlio. A cor diz a categoria, como o anel ao lado do nome. */
.pino{color:var(--lacre); cursor:pointer}
.pino--hotel{color:var(--azulejo)}
.pino--vinho{color:var(--azeite)}
.pino--mercado{color:var(--acafrao)}
/* Tamanho fixo, de propósito: tentei escalar o pino pelo zoom e o resultado ficava correndo
   atrás da animação do mapa. 30px lê bem no zoom em que a tela abre (o seu quarteirão) e
   continua reconhecível de longe. A caixa do ícone é maior que o desenho para dar alvo de toque. */
.pino{display:flex; align-items:center; justify-content:center}
.pino svg{width:30px; height:30px; display:block; transition:transform .14s}
.pino:hover svg{transform:scale(1.15)}
.pino:hover{z-index:600 !important}
/* você está aqui: ponto preto com miolo branco */
.voce i{
  display:block; width:16px; height:16px; border-radius:50%;
  background:var(--preto); border:3px solid var(--branco);
}

/* o mapa vem colorido do OpenStreetMap; aqui ele é dessaturado para virar o basemap cinza
   do manual — e só a camada de tiles, para os pinos em lacre continuarem coloridos */
.leaflet-tile-pane{filter:grayscale(1) contrast(.86) brightness(1.08)}
@media(prefers-color-scheme:dark){
  .leaflet-tile-pane{filter:grayscale(1) invert(1) contrast(.8) brightness(.92)}
}
/* o Leaflet vem com cantos arredondados e sombras — aqui não */
.leaflet-container{font-family:var(--f); background:var(--cinza-1)}
.leaflet-control-zoom a{
  border-radius:0 !important; border-color:var(--cinza-2) !important;
  color:var(--preto) !important; background:var(--branco) !important;
}
.leaflet-control-attribution{
  font:400 10px var(--f) !important; background:rgba(255,255,255,.82) !important;
  border-radius:0; color:var(--cinza-3);
}
.leaflet-control-attribution a{color:var(--cinza-3)}

/* foto no topo da folha do lugar */
.folha-foto{width:calc(100% + 40px); margin:-10px -20px 18px; aspect-ratio:2/1; object-fit:cover; background:var(--cinza-1)}

/* ───────────────────────────────────────────── folha que sobe */

.folha-fundo{
  position:fixed; inset:0; z-index:200; background:rgba(17,17,17,.5);
  display:flex; align-items:flex-end; justify-content:center;
  animation:apaga .2s ease both;
}
@keyframes apaga{from{opacity:0} to{opacity:1}}
.folha{
  background:var(--branco); width:100%; max-width:560px;
  border:1px solid var(--preto); border-bottom:0; border-radius:0;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:92vh; overflow-y:auto; animation:sobe .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sobe{from{transform:translateY(100%)} to{transform:none}}
.folha-puxador{width:36px; height:2px; background:var(--preto); margin:8px auto 20px}
.folha h2{margin-bottom:6px}
.folha-campos{display:flex; flex-direction:column; gap:18px; margin:22px 0}
.folha-dupla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.rotulo{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3); margin-bottom:8px; display:block}

.confirmado{text-align:center; padding:26px 0 6px}
.confirmado-selo{
  width:56px; height:56px; margin:0 auto 20px;
  border:1.5px solid var(--preto); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}

/* ───────────────────────────────────────────── avisos e estados */

/* recado de contexto (como um dado foi decidido, o que é privado): filete tracejado, sem cor de status */
.simulado{
  display:flex; gap:9px; align-items:flex-start;
  font:400 13px/1.55 var(--f); color:var(--cinza-3);
  border:1px dashed var(--cinza-2); padding:12px 14px; margin-top:22px;
}
.simulado b{color:var(--preto); font-weight:600}

.vazio{text-align:center; padding:56px 20px; color:var(--cinza-3)}
.vazio h2{margin-bottom:10px; color:var(--preto)}
.vazio .hand{font-size:26px; color:var(--preto); margin-bottom:18px}

/* carregando: os degraus da escada acendendo, não um círculo girando */
.carregando{display:flex; flex-direction:column; align-items:center; gap:18px; padding:70px 20px}
.girando{display:flex; flex-direction:column-reverse; gap:4px; width:28px}
.girando i{height:4px; background:var(--cinza-2); animation:degrau 1.2s ease-in-out infinite}
.girando i:nth-child(2){animation-delay:.15s}
.girando i:nth-child(3){animation-delay:.3s}
.girando i:nth-child(4){animation-delay:.45s}
@keyframes degrau{0%,70%,100%{background:var(--cinza-2)} 25%,45%{background:var(--preto)}}
.carregando p{font:700 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-3)}
@media(prefers-reduced-motion:reduce){.girando i{animation:none}}

/* ───────────────────────────────────────────── desktop */

@media(min-width:760px){
  h1{font-size:46px}
  .home-pergunta{font-size:42px}
  .tela{padding:40px 32px 96px}
  .ficha-capa{margin:-40px -32px 0}
  .trilho{margin:16px -32px 0; padding:0 32px 6px; scroll-padding-left:32px}
  .opcoes--grade{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════════ ficha 2.0 — avaliação, abas e resumo
   Ver pagina-do-lugar-2.0.md. Regras do manual que valem aqui: lista com filete e nunca
   cartão, um botão preto por tela (o "pedir mesa" da barra fixa — tudo mais é vazado),
   sem sombra, sem canto arredondado, toque de 44px. */

/* chips de atributo: o container é .chips--leitura, mas os que são link continuam com
   resposta ao toque — só os de leitura ficam inertes */
.chips--leitura a.chip:hover{background:var(--cinza-1)}

/* linhas de fato sob a descrição: data da visita e a sua própria passagem pela casa */
.ficha-datas{margin-top:14px}
.ficha-datas--voce{color:var(--preto); font-weight:500}

/* abas dos relacionados */
.abas{display:flex; gap:18px; margin:-2px 0 4px; flex-wrap:wrap}
.aba{
  background:none; border:0; padding:10px 0; min-height:var(--toque);
  font:600 13px var(--f); color:var(--cinza-3);
  border-bottom:2px solid transparent; cursor:pointer;
}
.aba.on{color:var(--preto); border-bottom-color:var(--preto)}
.aba:hover{color:var(--preto)}

/* resumo da sua avaliação — pares rótulo/valor, filete entre linhas */
.resumo-linha{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--cinza-2); font-size:14px;
}
.resumo-linha:last-child{border-bottom:0}
.resumo-linha > span{color:var(--cinza-3)}
.resumo-linha > b{font-weight:600; text-align:right}
.resumo-linha > b i{font-weight:400; color:var(--cinza-3)}
.resumo-acoes{align-items:center}

/* folha da avaliação: escala de três, sem estrelas. Os três botões viraram régua em
   18/09/2026 — ver `.medidor` no fim do arquivo. */
.pergunta + .pergunta{border-top:1px solid var(--cinza-2); padding-top:16px}
.pergunta-titulo{font:600 15px var(--f); margin-bottom:10px}

/* interruptor do "entra na média, sem meu nome" */
.privado{
  display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%;
  background:none; border:0; padding:6px 0; min-height:var(--toque);
  font:400 14px var(--f); color:var(--preto); text-align:left; cursor:pointer;
}
.interruptor{
  position:relative; flex:0 0 auto; width:42px; height:24px;
  border:1px solid var(--preto); background:var(--branco);
}
.interruptor::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:var(--cinza-2); transition:left .16s, background .16s;
}
.privado[aria-pressed="true"] .interruptor::after{left:22px; background:var(--preto)}

/* a barra fixa pode levar a regra de reserva sob o rótulo do botão */
.barra-fixa .btn{flex-direction:column; gap:2px; line-height:1.25}
.barra-fixa .btn small{font:400 12px var(--f); opacity:.75}

/* números e barras do bloco "o que os membros acharam" (ficha 2.0, bloco 6).
   Sem cartão, sem cor: número grande no peso do display, barra em cinza-2 com
   preenchimento preto. A cor de apoio não entra aqui — é dado, não categoria. */
.numeros{display:flex; gap:26px; flex-wrap:wrap; margin:14px 0 20px}
.numero{
  font-weight:800; font-stretch:112%; letter-spacing:-.02em;
  font-size:38px; line-height:1; font-variant-numeric:tabular-nums;
}
.numeros small{
  display:block; margin-top:5px; max-width:130px;
  font:400 13px/1.3 var(--f); color:var(--cinza-3);
}
.barra{padding:9px 0}
.barra-topo{display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:7px}
.barra-topo span:last-child{color:var(--cinza-3); font-size:13px}
.barra-trilho{height:6px; background:var(--cinza-2); position:relative}
.barra-trilho i{position:absolute; inset:0 auto 0 0; background:var(--preto)}

/* ═══════════════════════════════ busca tradicional (campo + autocomplete)
   A segunda porta do guia, ao lado da pergunta aberta. Vocabulário do manual: filete e
   nunca cartão, sem sombra, sem canto arredondado, toque de 44px, preto e branco — a cor
   que aparece aqui é só o anel de categoria de 9px ao lado do nome, como em qualquer lista.
   O campo é mais discreto que o da pergunta aberta (filete cinza contra filete preto de
   1,5px): na home a pergunta continua sendo a principal. */

.busca{position:relative; margin-top:4px}

/* o campo principal da home: o peso que a pergunta aberta tinha antes de virar o segundo
   caminho — filete preto de 1,5px e letra de 17px */
.busca--principal{margin-top:18px}
.busca--principal .busca-campo{border-bottom:1.5px solid var(--preto)}
.busca--principal .busca-campo svg{stroke:var(--preto)}
.busca--principal .busca-campo input{font-size:17px; padding:15px 0}

/* a gaveta da pergunta aberta, que o chip "Deixe o Luli escolher" abre */
.pergunta-aberta{margin-top:18px}
.pergunta-aberta .sub{margin-bottom:14px}
.busca-campo{
  display:flex; align-items:center; gap:11px;
  border-bottom:1px solid var(--cinza-2); min-height:var(--toque);
}
.busca-campo:focus-within{border-bottom-color:var(--preto)}
.busca-campo svg{
  width:18px; height:18px; flex:0 0 18px; fill:none; stroke:var(--cinza-3);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.busca-campo:focus-within svg{stroke:var(--preto)}
.busca-campo input{
  flex:1; min-width:0; border:0; background:none; border-radius:0;
  padding:12px 0; font:400 16px/1.4 var(--f); color:var(--preto);
}
.busca-campo input:focus{outline:none}
.busca-campo input::placeholder{color:var(--cinza-3)}
.busca-limpar{
  flex:0 0 auto; width:32px; height:32px; border:0; background:none;
  color:var(--cinza-3); font-size:19px; line-height:1; cursor:pointer;
}
.busca-limpar:hover{color:var(--preto)}

/* a lista de sugestões: caixa de filete preto, colada no campo */
.sugestoes{
  position:absolute; top:100%; left:0; right:0; z-index:40;
  background:var(--branco); border:1px solid var(--preto);
  max-height:min(62vh,440px); overflow-y:auto; overscroll-behavior:contain;
}
.sugestao-grupo{
  font:700 11px/1 var(--f); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cinza-3); padding:14px 15px 7px; border-top:1px solid var(--cinza-2);
}
.sugestao-grupo:first-child{border-top:0}
.sugestao{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  min-height:var(--toque); padding:9px 15px; border:0; background:none; cursor:pointer;
}
.sugestao:hover,.sugestao.on{background:var(--cinza-1)}
.sugestao-txt{flex:1; min-width:0}
/* bloco, e não flex: o nome vem partido em três pedaços (antes, o que casou, depois) e
   o gap de um flex abriria buraco no meio da palavra */
.sugestao-nome{
  display:block; font:500 15px/1.3 var(--f); color:var(--preto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sugestao-nome .cat{margin-right:8px; vertical-align:baseline}
/* o pedaço que casou com o que foi digitado */
.sugestao-nome b{font-weight:800}
.sugestao-sub{
  display:block; margin-top:3px; font:400 12.5px var(--f); color:var(--cinza-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sugestao-dir{
  flex:0 0 auto; font:400 12px var(--f); color:var(--cinza-3);
  font-variant-numeric:tabular-nums;
}
.sugestao-vazio{padding:16px 15px; font:400 14px/1.5 var(--f); color:var(--cinza-3)}

/* ═══════════════════════════════ régua de avaliação e a SUA nota
   Três botões viraram uma régua de três paradas: responder virou um gesto, não um formulário.
   É `input[type=range]` nativo — o toque, o teclado e o leitor de tela vêm de graça, e arrasto
   feito à mão erra no celular. Preto e branco, filete e o furo do selo como botão: a diversão
   aqui é o movimento e o número que se forma, nunca cor. */

/* O título, a régua e as três paradas são UM bloco. Sem os recuos negativos, a altura de
   toque de 44px do controle abre um vão entre o título e o trilho, e os rótulos acabam mais
   perto da pergunta seguinte do que da sua — a tela inteira fica ilegível. */
/* Ritmo do bloco, medido no navegador: 14px entre o título e o trilho, 22px entre os
   rótulos e a pergunta seguinte. A altura de toque de 44px do controle nativo empurra o
   trilho para longe do título e cola os rótulos na pergunta de baixo — sem estes dois
   ajustes os rótulos de uma pergunta parecem ser da outra (medido: -4px de distância). */
.medidor{margin-top:-20px; padding-bottom:30px}
/* entre duas réguas o separador de pergunta vira ruído: o trilho JÁ é um filete, e os dois
   juntos deixavam a linha cinza cortando os rótulos ao meio */
.pergunta--medidor + .pergunta--medidor{border-top:0; padding-top:6px}
.medidor input[type=range]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:var(--toque); margin:0;
  background:none; cursor:pointer; border-radius:0;
}
.medidor input[type=range]:focus{outline:none}
.medidor input[type=range]:focus-visible{outline:2px solid var(--preto); outline-offset:2px}

/* O trilho é DESENHADO AQUI, e não pelo navegador: um filete de 2px atrás do controle.
   A pseudo-classe nativa (`::-webkit-slider-runnable-track`) aceitava `height:2px` e mesmo
   assim pintava uma barra cinza da altura inteira do controle no Chrome 153 — em vez de
   caçar a versão, a linha fica sob o nosso controle e o trilho nativo fica transparente.
   O topo é a metade da altura de toque menos a metade do filete. */
.medidor{position:relative}
.medidor::before{
  content:""; position:absolute; left:0; right:0; top:calc(var(--toque) / 2 - 1px);
  height:2px; background:var(--cinza-2);
}
.medidor input[type=range]{position:relative}
.medidor input[type=range]::-webkit-slider-runnable-track{height:2px; background:transparent}
.medidor input[type=range]::-moz-range-track{height:2px; background:transparent}
/* As pseudo-classes NOVAS do Chrome (153 em diante), em regras separadas de propósito: um
   seletor que o navegador não conhece invalida a regra inteira, e juntar as duas famílias
   derrubaria o estilo do trilho nos navegadores antigos. Sem estas duas linhas o trilho
   voltava a ser uma barra cinza da altura do controle, por cima do título da pergunta. */
.medidor input[type=range]::slider-track{height:2px; background:transparent; border:0}
.medidor input[type=range]::slider-fill{background:transparent; border:0}

/* o botão é o furo do selo. Vazado e cinza enquanto ninguém respondeu — a régua NÃO nasce
   respondida, senão quem pula a pergunta vira "como esperado" sem ter dito nada. */
.medidor input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-10px; border-radius:50%;
  background:var(--branco); border:2px solid var(--cinza-3);
  transition:background .12s, border-color .12s, transform .12s;
}
.medidor input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--branco); border:2px solid var(--cinza-3);
}
.medidor[data-respondido="true"] input[type=range]::-webkit-slider-thumb{
  background:var(--preto); border-color:var(--preto);
}
.medidor[data-respondido="true"] input[type=range]::-moz-range-thumb{
  background:var(--preto); border-color:var(--preto);
}
.medidor input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .medidor input[type=range]::-webkit-slider-thumb{transition:none}
  .medidor input[type=range]:active::-webkit-slider-thumb{transform:none}
}

/* as três paradas, com a escolhida em preto */
.medidor-marcas{display:flex; justify-content:space-between; gap:8px; margin-top:-9px}
.medidor-marcas span{
  flex:1; padding:4px 0; font:400 12.5px/1.3 var(--f); color:var(--cinza-3);
  text-align:center; cursor:pointer;
}
.medidor-marcas span:first-child{text-align:left}
.medidor-marcas span:last-child{text-align:right}
.medidor-marcas span.on{color:var(--preto); font-weight:600}

/* a nota se formando enquanto se responde, e o resumo dela na ficha */
.nota-viva{
  display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--preto); margin-top:4px; padding-top:16px;
}
.nota-viva .numero{font-size:40px}
.nota-viva-txt{font:400 14px/1.35 var(--f); color:var(--cinza-3)}
.nota-viva-txt small{display:block; font-size:12.5px; margin-top:3px}
.nota-linha{font-weight:800; font-stretch:112%; font-size:16px; color:var(--preto)}

/* o fecho da avaliação: o número grande, contado na frente da pessoa */
.nota-festa{text-align:center; padding:10px 0 4px}
.nota-festa .olho{margin-bottom:10px}
.nota-festa-numero{font-size:76px; line-height:1; display:block; margin-bottom:10px}
.nota-festa .sublinhado{font:500 20px/1.3 var(--f)}