/* ------------------------------------------------------------------
daponto — site público (montra). Folha da MAQUETA.
Nasce aqui, é aprovada aqui, e só depois passa a WEBSITE/showcase/.
Nada disto tem relação com o office.css.
Decisões de desenho anotadas ao longo do ficheiro.
------------------------------------------------------------------ */
:root{
/* Cor -------------------------------------------------------------
#4DBDE6 é a cor da marca e mantém-se como cor de superfície
(botões, realces, ícones). Em TEXTO sobre branco tem contraste
~1.9:1, muito abaixo do mínimo legível, por isso existe a
--brand-ink, que é a mesma cor escurecida só para texto e links. */
--brand: #4DBDE6;
--brand-soft: #E8F6FC;
--brand-ink: #14748F;
--ink: #0F1B24; /* títulos */
--body: #33474F; /* corpo */
--muted: #6E838E; /* meta, legendas */
--line: #E6EDF1;
--surface: #FFFFFF;
--soft: #F5F9FB;
--dark: #0E1A22; /* rodapé */
--star: #F5A623;
/* Forma */
/* Escala descida um degrau (2026-08-29). Continua arredondada, mas
menos gorda. As PASTILHAS ficam como estavam: o contraste entre
rectangulos pouco redondos e botoes redondos por inteiro e
deliberado, e e o que as duas referencias fazem. */
--r-lg: 12px; /* paineis grandes: caixas laterais, faixas */
--r-card: 10px; /* cartoes */
--r-box: 8px; /* campos, pequenas caixas */
--r-media: 8px; /* IMAGEM DO COMERCIANTE — ver nota abaixo */
--r-pill: 999px; /* botoes e fichas — inalterado */
/* --r-media existe a parte de proposito. Nas NOSSAS superficies o
canto e decoracao; na imagem DELES o canto CORTA — o banner e o
retrato da campanha sao ferramentas de mensagem do comerciante, e
o que ele desenha nos cantos e o que a rodagem come primeiro.
Sao duas decisoes diferentes e passam a ter dois nomes. */
--sh-1: 0 1px 2px rgba(15,27,36,.04);
--sh-2: 0 1px 2px rgba(15,27,36,.04), 0 10px 28px rgba(15,27,36,.07);
/* Tipo ------------------------------------------------------------
O pacote de fontes auto-alojado do site só tem PESO 400 (Anton,
Quicksand, Poppins). Um desenho limpo faz-se muito bem sem
negritos: a hierarquia vem do TAMANHO, da COR e do ESPAÇO, que é
aliás o que as duas referências fazem nos títulos. Onde é mesmo
preciso peso, entra o Anton, que é uma display pesada e já lá está.
Se quisermos Poppins 600/700 a sério, regenera-se o pacote. */
--f-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
--f-disp: 'Anton', 'Poppins', system-ui, sans-serif;
/* 🚨 OS NUMEROS GRANDES (saldos, contagens) NAO USAM O ANTON.
(regra do Peter, 2026-08-30, e ele tem razao.)
O Anton entrou por ser a unica maneira de ter PESO num pacote que
so tem o 400. Mas ele e uma display condensada e pesada: em
titulos passa, em ALGARISMOS grita, e um saldo nao e um cartaz.
Os numeros ficam em Poppins 400, GRANDES, com `letter-spacing`
ligeiramente negativo e `font-variant-numeric: tabular-nums` (os
algarismos de largura fixa impedem o numero de saltar quando o
valor muda). E exactamente a doutrina escrita aqui em cima: a
hierarquia vem do TAMANHO, da COR e do ESPACO, nao do peso.
⚠️ Consequencia a decidir: com isto, NADA no site usa o Anton
(a classe .display tambem nunca chegou a ser usada). Ou seja
estamos a servir uma familia de letra que ninguem le. Ou lhe
arranjamos um lugar - um titulo de campanha, um numero de heroi -
ou sai do pacote auto-alojado e poupam-se os bytes. */
--wrap: 1240px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
font-family:var(--f-body);
font-size:15px;
line-height:1.6;
color:var(--body);
background:var(--surface);
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
/* 🚨 REGRA DE OURO DESTE FICHEIRO
Qualquer regra que caia num elemento que TAMBEM tem .wrap
(class="wrap alguma-coisa") usa padding-block / padding-inline, e
NUNCA o atalho "padding: Npx 0". O atalho escreve os QUATRO lados e
poe o lateral a ZERO, e a margem do .wrap desaparece sem dar erro.
So se ve abaixo dos 1240px, porque acima disso o "margin: 0 auto" ja
afasta o conteudo das bordas e o defeito fica escondido.
Ja mordeu tres vezes: .head-in, .cat-in e depois .mtop / .hero /
.strip / .split — estas ultimas partiam a homepage inteira no
telemovel e ninguem tinha reparado.
Elementos afectados hoje: head-in, cat-in, mtop, zone-in, hero,
strip, split. E, no account.css (zona do utilizador): auth-in, me-in,
vd-in, set-in. Esta lista mantem-se: e o unico sitio onde se ve, de
uma vez, tudo o que a regra apanha. */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }
h1,h2,h3,h4{ font-family:var(--f-head); color:var(--ink); font-weight:400; line-height:1.15; letter-spacing:-.02em }
/* Palavra de destaque nos títulos: a referência «Meher» carrega o peso,
nós carregamos a COR e a família display. Mesmo efeito, sem peso 700. */
/* 🚨 `.text-site` NAO e um nome escolhido por mim: vem de DENTRO das labels. O
`common.brand` e literalmente `daponto`, e o `faq.lead` e o
`points_ex_result` tambem o usam. Renomea-lo obrigava a editar sete idiomas E partia a
folha do institucional, que continua a usa-lo. Fica como segundo nome do `.accent`. */
.accent, .text-site{ color:var(--brand-ink) }
/* ⚠️ Pela mesma razao: o `faq.q_notfound_content` traz `` dentro do
valor da label, e o mesmo nome aparece nos legais. Sem esta regra, o unico link do FAQ
ficava com o azul e o sublinhado do browser. */
.link-info{ color:var(--brand-ink); text-decoration:underline }
.display{ font-family:var(--f-disp); letter-spacing:.005em }
.eyebrow{
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); font-family:var(--f-head);
}
/* ==================================================================
CABEÇALHO
================================================================== */
.site-head{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.92);
backdrop-filter:saturate(1.4) blur(10px);
border-bottom:1px solid var(--line);
}
.head-in{ display:flex; align-items:center; gap:20px; height:72px }
/* O logótipo JÁ TEM o nome lá dentro (é um lockup «da/ponto» + disco),
logo escrever «daponto» ao lado era dizer a marca duas vezes. Saiu o
texto e a marca cresceu, que é o que a torna legível.
Usa-se o ficheiro 1,4:1 e não o 350x350, que é o mesmo desenho
enfiado num quadrado com espaço morto à volta.
O nome continua a existir para quem não vê e para o motor de busca:
está no atributo `alt` da imagem. */
.brand{ display:flex; align-items:center; flex:0 0 auto }
/* Quem esta dentro, e a saida. Empurrado para a direita com `margin-left:auto`,
que e o que mantem o `.brand` a esquerda sem mexer no `gap` do `.head-in`.
🚨 A porta entrou no ar sem isto e quem entrava ficava PRESO - nao havia
caminho nenhum de volta, nem pelo botao «voltar». Uma superficie que cria
estado tem de trazer a forma de o desfazer no mesmo passo. */
.head-me{ margin-left:auto; display:flex; align-items:center; gap:12px }
.head-nm{ font-weight:600; font-size:14px; color:var(--ink) }
/* Um botao que se le como accao discreta e nao como o CTA da pagina. */
.head-out{
background:none; border:1px solid var(--line); border-radius:999px;
padding:7px 14px; font:inherit; font-size:13px; color:var(--muted);
cursor:pointer; white-space:nowrap;
}
.head-out:hover{ color:var(--ink); border-color:var(--muted) }
/* A mesma pilula tambem serve de LINK (a entrada para os vouchers), e um `a` e inline: sem isto
o padding vertical nao empurra a caixa e a pilula sai achatada.
⚠️ Esta regra chegou a ser removida a 2026-09-04, por o unico utilizador dela ter morrido com o
portao duro. Voltou com utilizador a serio no mesmo dia. */
a.head-out{ display:inline-block; text-decoration:none }
/* O SALDO no cabeçalho, no lugar que era do botão dos vouchers (decisão do
Peter, 2026-09-08 - esteve umas horas dentro do menu, por leitura minha
errada da frase dele).
🚨 É um MOSTRADOR e não um link, e é isso - e só isso - que dissolve a
objecção com que a F52 recusou a pílula («dois links vizinhos para o mesmo
sítio lêem-se como um engano»): passa a ser um valor ao lado de um
controlo. Por isso NÃO leva `cursor`, NÃO leva `:hover` e NÃO é um `a`.
🚨 E POR ISSO TAMBÉM NÃO LEVA MOLDURA (2.ª passagem do Peter, no mesmo
dia): a pílula com contorno é a forma de um BOTÃO neste site - é a do
`.head-out` e a do `.btn` - e usá-la aqui prometia um clique que este
bloco não faz. *A forma tem de dizer a mesma coisa que o comportamento.*
⚠️ Duas linhas, o número em cima e o rótulo por baixo mais pequeno: o
número é o valor, o rótulo é a LEGENDA dele. É o mesmo par que o rodapé
do cartão desenha, ao contrário (lá a legenda vem em cima).
⚠️ Alinhado à DIREITA e não ao centro: o vizinho da direita é a bolha da
conta, e um bloco centrado deixava o número curto a flutuar no meio de um
rótulo mais largo. Assim as duas linhas fecham contra a mesma aresta.
⚠️ `tabular-nums` porque este número MUDA: sem ele, ganhar pontos fazia a
linha inteira dançar de largura. É o mesmo que o cartão já faz.
⚠️ E o rótulo NÃO vai em maiúsculas, ao contrário da legenda do cartão: a
marca escreve-se «daponto» em minúscula, e «PONTOS DAPONTO» contradizia-a.
⚠️ O `.head-out`, a pílula que aqui esteve, ficou SEM LEITOR e não se
apagou: já morreu e ressuscitou uma vez no mesmo dia (2026-09-04), e uma
folha de estilos não é o sítio para se decidir isso.
🚨 AZUL E NEGRITO desde 2026-09-08 (pedido do Peter), e o azul é o --brand.
⚠️ ESTEVE no --brand-ink umas horas, com o argumento (correcto) de que este
ficheiro diz, dez linhas acima, que o #4DBDE6 em texto sobre branco está
«muito abaixo do mínimo legível» - 2,16:1 contra 5,35:1. O Peter preferiu o
claro depois de ver os dois, e a decisão é dele e está tomada com o número à
frente: isto é um SALDO num cabeçalho, não texto corrido, e a legenda por
baixo diz em --body (9,74:1) o que ele é.
🚨 E É O TOKEN, nunca um hex à mão. Ele chegou aqui como `#51c5f0`, que está
a ΔE 0,39 do `#51c6f1` - a cor escrita à mão que o CLAUDE.md JÁ tinha
rejeitado no círculo do herói, com as palavras «uma segunda cor de marca
codificada é uma cor que um dia diverge». Ou seja a divergência que a regra
previu aconteceu, num segundo ficheiro, a um dígito de distância. Do --brand
está a ΔE 3,03, que lado a lado não se distingue.
⏳ Se um dia se quiser legível sem perder o ar leve, o mais claro deste mesmo
matiz e saturação que chega aos 3:1 (o mínimo para texto grande, e 22px
bold conta como grande) é o #129FD3. Fica dito, não fica feito - seria um
TERCEIRO azul de marca, e é precisamente o que este parágrafo condena.
⚠️ O NEGRITO É SINTETIZADO pelo browser, e fica dito: das três famílias
auto-alojadas só o peso 400 está no pacote (`plugins/google-fonts/5.3.0/`),
e a Poppins não tem 600. Aqui presta - verificado numa captura a 19px, e é
o que todo o `` deste site já faz -, mas quem quiser o peso a sério
acrescenta a face ao pacote (o README daquela pasta diz como).
⚠️ A legenda passa de --muted a --body (3,96:1 -> 9,74:1). É um TOKEN que
já existe e não um cinzento novo a meio caminho: um sétimo cinzento para
uma legenda é o género de coisa que diverge depois. */
.head-pts{
display:flex; flex-direction:column; align-items:flex-end;
line-height:1.15; white-space:nowrap;
/* 6px PARA BAIXO, para o numero cair na linha optica da bolha em vez de o
bloco inteiro ficar centrado. ⚠️ `position:relative` e nao a
`margin-bottom:-12px` com que isto foi encontrado: as duas dao o MESMO
resultado (medido - altura do cabecalho igual, 65px no telemovel e 73 no
computador, zero overflow a 360/390/700/1280), e a margem negativa so e
inofensiva porque este bloco NAO e o item mais alto da barra. No dia em
que fosse - mais uma linha, letra maior - ela passava a encolher o
cabecalho, e isso apareceria longe daqui. O deslocamento e optico, e o
instrumento tem de dizer isso. */
position:relative; top:6px;
}
.head-pts b{
font-family:var(--f-head); font-weight:600; color:var(--brand);
font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
/* A legenda leva negrito: a 11px o peso e o que a torna legivel, e o numero
continua a mandar pelo tamanho e pela cor. (Sintetizado, como o de cima.) */
.head-pts span{ font-size:11px; font-weight:600; color:var(--body) }
/* A CONTA no cabecalho: o nome deixou de ser texto morto e passou a ser a porta do
cartao (2026-09-07). Ate aqui o cabecalho dizia quem estava dentro e nao dava
caminho nenhum para a conta nem para o QR que identifica a pessoa ao balcao.
⚠️ Esteve umas horas a ser um LINK simples (`.head-acc`), com o argumento de que um
menu de duas entradas nao e um menu. O Peter pediu o menu no mesmo dia, e tinha
razao: e o sitio das Definicoes e dos Favoritos quando existirem, e sobretudo e onde
o AVISO de pontos em risco tem de viver. O `.head-acc` saiu; quem manda e o `.me`,
aqui em baixo.
⚠️ UM controlo e nao dois: uma pilula de pontos ao lado apontaria ao MESMO destino, e
dois links vizinhos para o mesmo sitio leem-se como um engano. Os pontos vivem no
cartao, que e onde servem para alguma coisa. */
/* 🚨 A BOLHA DE INICIAIS VIVE AQUI E NAO NO `account.css`, e a razao ja custou uma vez
(o `.plus.mch i`, que desceu do `merchant.css` pela mesma razao): o cabecalho e
desenhado em TODAS as paginas - a homepage, o `/spots`, a pagina de comerciante - e
nenhuma dessas carrega o `account.css`. Um componente que se torna partilhado leva os
estilos consigo, senao sai sem forma na maioria dos sitios onde aparece.
Iniciais e nao fotografia: a plataforma nunca pede uma. */
.av{
width:34px; height:34px; border-radius:50%; flex:0 0 auto;
display:grid; place-items:center; background:var(--brand); color:#fff;
font-family:var(--f-head); font-size:13px; letter-spacing:.02em;
}
.av-lg{ width:56px; height:56px; font-size:19px }
/* Variante calma: sobre fundo branco a bolha cheia de cor da marca era a mancha mais
forte de uma pagina que se quer sossegada. Contorno e tinta escura dizem de quem e a
conta sem competir com o QR, que e o que ali interessa. */
.av.quiet{ background:#fff; border:1.5px solid var(--line); color:var(--ink) }
/* ==================================================================
O MENU DO UTILIZADOR (2026-09-07, pedido do Peter)
🚨 Vive AQUI e nao no `account.css`, pela mesma razao do `.av`: e desenhado
no cabecalho de TODAS as paginas e nenhuma da montra carrega aquela folha.
🚨 E UM `` E NAO UM MENU EM JAVASCRIPT, que e o padrao que o site ja
usa no horario do comerciante e no painel de filtros do `/spots`: abre e fecha
sozinho, sem uma linha de codigo. A montra de um visitante anonimo continua
sem carregar JavaScript nenhum, e quem tem o JS desligado tem menu na mesma.
⚠️ Custo aceite e dito: um `` NAO fecha ao tocar fora dele. E o mesmo
comportamento do painel do `/spots`, que ja esta no ar assim. Fecha-se com
doze linhas de JavaScript no dia em que incomodar.
================================================================== */
.me{ position:relative }
/* O triangulo nativo do `summary` sai pelas duas vias: os browsers antigos usam
o `::-webkit-details-marker` e os novos o `list-style`. Sem as duas, um deles
desenha-o. */
.me > summary{ list-style:none; cursor:pointer }
.me > summary::-webkit-details-marker{ display:none }
.me > summary::marker{ content:'' }
.me-btn{ display:flex; align-items:center; gap:9px; height:40px; padding:0 10px 0 3px; border-radius:var(--r-pill) }
.me-btn:hover{ background:var(--soft) }
.me-btn > i{ font-size:10px; color:var(--muted); transition:transform .15s }
.me[open] .me-btn > i{ transform:rotate(180deg) }
.me-menu{
position:absolute; right:0; top:48px; min-width:216px; z-index:60;
background:#fff; border:1px solid var(--line); border-radius:var(--r-box);
box-shadow:var(--sh-2); padding:6px;
}
.me-menu a,
.me-menu button{
display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px;
border:0; background:none; border-radius:var(--r-box);
font:inherit; font-size:14px; color:var(--ink); text-align:left; cursor:pointer;
}
.me-menu a:hover,
.me-menu button:hover{ background:var(--soft) }
.me-menu a i,
.me-menu button i{ width:16px; color:var(--muted); font-size:13px }
.me-menu .sep{ height:1px; background:var(--line); margin:6px 10px }
.me-menu .out{ color:#C0392B }
.me-menu .out i{ color:#C0392B }
/* O AVISO de pontos em risco, dentro do menu.
⚠️ Ambar e nao vermelho, e a distincao e deliberada: o vermelho deste menu ja
e o «Terminar sessao», que e destrutivo. Este e o mesmo ambar da `.pp-warn`,
que e a cor que o site ja usa para este aviso exacto na pagina da conta. */
.me-menu .warn{ color:#8A6218 }
.me-menu .warn i{ color:#8A6218 }
/* O PONTO VERMELHO na bolha, que e o que se ve com o menu FECHADO.
Irmao do `.tab-dot` da APP (10px, vermelho, aro da cor do fundo), e existe
pela mesma razao: quem so usa o site nunca e avisado de que vai perder pontos
- os avisos da plataforma sao o banner da APP e o push.
⚠️ O aro branco nao e enfeite: sem ele o ponto encosta a bolha da marca e
deixa de se ler como um marcador.
🚨 ANCORADO A BOLHA E NAO AO BOTAO, e a primeira versao estava ancorada ao
botao: como abaixo dos 520px o nome desaparece, o `right` do botao passava a
ser o do CHEVRON e o ponto ia parar a um canto solto, longe da bolha. Medido
numa captura a 390px. Um marcador tem de estar colado aquilo que marca, e a
unica forma de isso nao depender do que ha ao lado e viver DENTRO dele. */
.me-av{ position:relative; display:flex; flex:0 0 auto }
.me-dot{
position:absolute; top:-2px; right:-2px; width:10px; height:10px;
background:#C0392B; border:1.5px solid #fff; border-radius:50%;
}
@media (max-width:520px){ .head-nm{ display:none } }
.brand img{ height:42px; width:auto }
.search{
flex:1 1 auto; max-width:520px;
display:flex; align-items:center; gap:10px;
background:var(--soft); border:1px solid var(--line);
border-radius:var(--r-pill); padding:0 18px; height:44px;
color:var(--muted);
}
.search input{ border:0; background:none; outline:none; font:inherit; color:var(--body); width:100%; }
.search input::placeholder{ color:var(--muted) }
.head-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.lang-pick{
display:flex; align-items:center; gap:7px; height:40px; padding:0 12px;
border-radius:var(--r-box); color:var(--body); font-size:14px;
}
.lang-pick:hover{ background:var(--soft) }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:44px; padding:0 22px; border-radius:var(--r-pill);
font-family:var(--f-head); font-size:14px; letter-spacing:-.01em;
transition:background .15s, color .15s, border-color .15s;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:#3AAFDC }
.btn-dark{ background:var(--ink); color:#fff }
.btn-dark:hover{ background:#1D2E3A }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:#fff }
.btn-ghost:hover{ border-color:#CFDCE4 }
.btn-sm{ height:38px; padding:0 16px; font-size:13px }
/* A confirmação de apagar a conta. ⚠️ Vive AQUI, ao lado das outras variantes, e não no
`account.css`: um `.btn-*` é um componente partilhado, e um componente partilhado leva os
estilos consigo - foi o que o `.av` e o `.plus.mch i` já pagaram. Hoje tem um leitor só.
⚠️ E o vermelho é o `#C0392B` que o site já usa para o destrutivo (o «Terminar sessão» do
menu, o link de apagar): uma segunda cor de aviso é uma cor que um dia diverge. */
.btn-danger{ background:#C0392B; color:#fff }
.btn-danger:hover{ background:#A93226 }
/* 🚨 O BOTAO TRAVADO TEM DE SE VER TRAVADO. O `js/forms.js` desactiva os botoes enquanto o
pedido corre, e ate aqui isso nao mudava NADA no ecra: o botao ficava igual, so parava de
responder. Numa escrita que emite um voucher e gasta pontos, um botao mudo convida
exactamente ao segundo clique que o `disabled` existe para travar - e o servidor nao trava o
duplo resgate, so o stock. Serve as quatro paginas de escrita do site de uma vez. */
.btn:disabled{ opacity:.55; cursor:default; pointer-events:none }
/* ==================================================================
BARRA DE CATEGORIAS
Áreas-pai `tag='spot'` como separadores + Experiências (`discover`)
destacada à direita do grupo, porque é outra família e não mais uma
categoria. O selector de local vive na ponta, como na referência.
================================================================== */
.cat-bar{ border-bottom:1px solid var(--line); background:#fff }
/* O selector de local está FORA da zona que rola. Estava dentro, com
margin-left:auto, e num contentor com overflow isso empurra-o para
além da margem: o botão saía do sítio. O `min-width:0` no .cats é o
que deixa um filho flexível encolher em vez de esticar o pai. */
.cat-in{ display:flex; align-items:center; height:66px }
.cats{
display:flex; align-items:center; gap:4px; height:66px;
flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;
}
.cats::-webkit-scrollbar{ display:none }
.cat-all{
display:inline-flex; align-items:center; gap:10px; flex:0 0 auto;
height:44px; padding:0 18px; margin-right:10px;
background:var(--ink); color:#fff; border-radius:var(--r-pill);
font-family:var(--f-head); font-size:14px;
}
.cat{
display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
height:66px; padding:0 16px; color:var(--body); font-size:14px;
border-bottom:2px solid transparent; white-space:nowrap;
}
.cat i{ font-size:15px; color:var(--muted) }
.cat:hover{ color:var(--ink) }
.cat.on{ color:var(--brand-ink); border-bottom-color:var(--brand) }
.cat.on i{ color:var(--brand) }
.cat-sep{ flex:0 0 auto; width:1px; height:26px; background:var(--line); margin:0 12px }
/* Experiências vive FORA da zona que rola: é uma família e não mais uma
categoria, e estava a ser cortada por trás do selector de local
justamente por estar lá dentro. O que se corta é a cauda das áreas,
que continua toda em «Todas as categorias». */
.cat-fixed{ display:flex; align-items:center; flex:0 0 auto }
.cat-disc{ color:var(--brand-ink) }
.cat-disc i{ color:var(--brand) }
.loc-pick{
flex:0 0 auto; margin-left:18px;
display:flex; align-items:center; gap:11px; padding:8px 14px 8px 8px;
border:1px solid var(--line); border-radius:var(--r-pill); background:#fff;
}
.loc-dot{
width:34px; height:34px; border-radius:50%; flex:0 0 auto;
background:var(--brand-soft); color:var(--brand-ink);
display:grid; place-items:center; font-size:14px;
}
.loc-pick b{ display:block; font-family:var(--f-head); font-weight:400; font-size:14px; color:var(--ink); line-height:1.2 }
.loc-pick small{ display:block; font-size:12px; color:var(--muted) }
/* ==================================================================
BARRA DA ZONA
Convite, nunca porteiro. Um bloqueio de ecrã inteiro à entrada é
penalizado pelo Google no telemóvel (intersticial intrusivo) e é
exactamente onde o visitante que vem da pesquisa aterra.
================================================================== */
.zone-bar{ background:var(--brand-soft); border-bottom:1px solid #D3EAF6 }
.zone-in{ display:flex; align-items:center; gap:14px; padding-block:13px; font-size:14px; color:var(--brand-ink) }
.zone-in i.pin{ font-size:15px }
.zone-in p{ margin-right:auto }
.zone-in .x{ color:var(--brand-ink); opacity:.6; padding:4px 8px }
.zone-in .x:hover{ opacity:1 }
/* ==================================================================
HERO
================================================================== */
.hero{ padding-block:64px 20px }
.hero h1{ font-size:clamp(34px, 4.6vw, 58px); max-width:15ch }
.hero p{ margin-top:18px; font-size:17px; color:var(--body); max-width:52ch }
.hero-top{ display:flex; align-items:flex-end; gap:40px; flex-wrap:wrap }
.trust{ margin-left:auto; display:flex; align-items:center; gap:14px }
.trust-faces{ display:flex }
.trust-faces img{
width:40px; height:40px; border-radius:50%; object-fit:cover;
border:2px solid #fff; margin-left:-12px;
}
.trust-faces img:first-child{ margin-left:0 }
.trust b{ display:block; font-family:var(--f-head); font-weight:400; color:var(--ink); font-size:16px }
.trust small{ color:var(--muted); font-size:12.5px }
/* Destaques: mapeiam as campanhas `is_to_promote`, que já existem e já
são curadas por master/admin. Não inventar um segundo mecanismo. */
.hero-feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px }
.feat{
position:relative; border-radius:var(--r-lg); overflow:hidden;
aspect-ratio:4/3; box-shadow:var(--sh-1);
}
.feat .ph{ position:absolute; inset:0 }
.feat-tag{
position:absolute; left:16px; bottom:16px; right:16px;
background:rgba(255,255,255,.94); border-radius:var(--r-box);
padding:12px 14px; box-shadow:var(--sh-1);
}
.feat-tag b{ display:block; font-family:var(--f-head); font-weight:400; font-size:14.5px; color:var(--ink); line-height:1.25 }
.feat-tag small{ color:var(--muted); font-size:12.5px }
.feat-cta{
position:absolute; right:16px; top:16px;
background:#fff; border-radius:var(--r-pill); padding:7px 15px;
font-family:var(--f-head); font-size:12.5px; color:var(--ink); box-shadow:var(--sh-1);
}
.feat-fav{
position:absolute; left:16px; top:16px; width:34px; height:34px;
background:rgba(255,255,255,.94); border-radius:50%;
display:grid; place-items:center; color:var(--ink); font-size:13px; box-shadow:var(--sh-1);
}
/* ==================================================================
FAIXAS POR ÁREA
================================================================== */
.strip{ padding-block:56px 8px }
.strip-head{ display:flex; align-items:flex-end; gap:32px; margin-bottom:26px; flex-wrap:wrap }
.strip-head h2{ font-size:clamp(24px,2.6vw,32px) }
.strip-head p{ color:var(--muted); font-size:14px; max-width:44ch; margin-top:6px }
.strip-head .btn{ margin-left:auto }
.sort-note{
display:inline-flex; align-items:center; gap:7px;
font-size:12.5px; color:var(--muted); margin-top:8px;
}
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
/* ==================================================================
CARTÃO DE CAMPANHA (o componente central de todo o site)
O rótulo do cartão é a ÁREA, nunca o tipo da campanha: «Global» e
«Store» são nomes de marca que só fazem sentido ao comerciante no
Office. Ao visitante, «Restauração» diz tudo e «Global» não diz nada.
================================================================== */
.card{
background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
overflow:hidden; display:flex; flex-direction:column;
transition:box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover{ box-shadow:var(--sh-2); border-color:transparent; transform:translateY(-2px) }
/* O cartao e um LINK. Sem isto herdava o azul e o sublinhado do browser, e o titulo da
oferta deixava de se ler como titulo. */
a.card{ color:inherit; text-decoration:none }
.card-img{ position:relative; aspect-ratio:16/10 }
.card-img .ph{ position:absolute; inset:0 }
.fav{
position:absolute; right:12px; top:12px; width:32px; height:32px;
background:rgba(255,255,255,.94); border-radius:50%;
display:grid; place-items:center; font-size:13px; color:var(--ink); box-shadow:var(--sh-1);
}
/* Etiquetas na imagem: só a percentagem e o «Novo». O resto da
informação de preço vive no corpo, para a fotografia respirar. */
.img-tags{ position:absolute; left:12px; top:12px; display:flex; gap:6px }
.tag{
border-radius:var(--r-pill); padding:4px 11px;
font-family:var(--f-head); font-size:11.5px; letter-spacing:.02em;
}
.tag-off{ background:var(--ink); color:#fff }
.tag-new{ background:var(--brand); color:#fff }
.card-body{ padding:15px 16px 16px; display:flex; flex-direction:column; flex:1 }
.card-body h3{
font-size:15.5px; line-height:1.35; margin:8px 0 7px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* A avaliação é do COMERCIANTE (`merchant.rating_avg`), não da oferta.
Fica ao lado do nome dele e não junto ao preço, onde daria a
entender que é a campanha que está avaliada. */
.card-meta{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted) }
.card-meta .who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rate{ margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:5px; color:var(--ink) }
.stars{ color:var(--star); font-size:11px; letter-spacing:.5px }
.stars .off{ color:#DDE5EA }
.rate-none .stars{ color:#DDE5EA }
.rate-none span{ color:var(--muted) }
/* ------------------------------------------------------------------
PREÇO
🚨 `camp.points` é o CUSTO do resgate, não uma recompensa: o resgate
faz `points = points - :pts` e recusa com `insufficient_points`.
O preço verdadeiro é DINHEIRO + PONTOS, e é assim que se escreve.
Nunca «+120 pontos» com o sentido de ganhar.
------------------------------------------------------------------ */
.card-foot{
margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.price{ display:flex; align-items:baseline; gap:8px }
.price s{ color:var(--muted); font-size:13px }
.price b{ font-family:var(--f-head); font-weight:400; font-size:20px; color:var(--ink) }
.price .from{ font-size:12px; color:var(--muted) }
.plus{ font-size:13px; color:var(--body) }
.plus i{ color:var(--brand); font-size:11px; margin-right:3px }
/* 🚨 A CARTEIRA DE ONDE SAEM OS PONTOS MUDA O ICONE E A COR: `mch` sao
pontos da loja (cinzento, `fa-store`), tudo o resto sao pontos daponto
(azul, `fa-coins`). Vive aqui e nao no merchant.css desde que o cartao
passou a ser partilhado: a homepage nao carrega aquela folha, e um
cartao `mch` saia la com o azul da carteira errada. */
.plus.mch i{ color:#8FA6B2 }
/* Marcadores de fotografia da maqueta. Em produção entra a imagem real
da campanha (`picture_src`), sempre 16:9 e desenhada em `cover`. */
.ph{ background:linear-gradient(135deg, var(--a,#DDEAF2), var(--b,#BFD9E6)) }
.ph::after{
content:''; position:absolute; inset:0;
background:radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.55), transparent 60%);
}
/* ==================================================================
COMO FUNCIONA (absorvido do site institucional)
================================================================== */
.how{ background:var(--soft); margin-top:70px; padding:70px 0 }
.how h2{ font-size:clamp(24px,2.6vw,34px); text-align:center }
.how > .wrap > p{ text-align:center; color:var(--muted); margin-top:10px }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px }
.step{ background:#fff; border-radius:var(--r-card); padding:30px 26px; border:1px solid var(--line) }
.step-n{
width:44px; height:44px; border-radius:var(--r-box); background:var(--brand-soft);
color:var(--brand-ink); display:grid; place-items:center; font-size:17px; margin-bottom:18px;
}
.step h3{ font-size:17px; margin-bottom:8px }
.step p{ font-size:14px; color:var(--muted) }
/* ==================================================================
MAPA · COMERCIANTES · RODAPÉ
================================================================== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:80px }
.split h2{ font-size:clamp(26px,3vw,38px) }
.split p{ margin-top:16px; color:var(--body) }
.split .btn{ margin-top:26px }
.split-media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; position:relative; box-shadow:var(--sh-2) }
.site-foot{ background:var(--dark); color:#9FB3BE; margin-top:20px; padding:70px 0 34px }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
.foot-brand img{ height:44px; width:auto } /* versão branca, que já existe */
.foot-brand p{ font-size:13.5px; margin-top:14px; max-width:34ch }
.site-foot h4{ color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:0 }
.site-foot li{ list-style:none; margin-bottom:10px; font-size:13.5px }
.site-foot a:hover{ color:#fff }
.foot-end{
margin-top:54px; padding-top:24px; border-top:1px solid rgba(255,255,255,.09);
display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13px;
}
.foot-langs{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap }
.foot-langs a{ padding:5px 10px; border-radius:var(--r-pill) }
.foot-langs a:hover{ background:rgba(255,255,255,.08) }
.foot-langs .on{ background:rgba(255,255,255,.12); color:#fff }
/* ==================================================================
LISTAGEM
================================================================== */
.list-head{ padding:34px 0 26px; display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap }
.list-head h1{ font-size:clamp(24px,3vw,34px) }
.list-head .count{ color:var(--muted); font-size:14px; margin-top:6px }
.list-tools{ margin-left:auto; display:flex; align-items:center; gap:10px }
.view-tog{ display:flex; border:1px solid var(--line); border-radius:var(--r-box); overflow:hidden }
.view-tog button{ width:42px; height:42px; display:grid; place-items:center; color:var(--muted) }
.view-tog button.on{ background:var(--soft); color:var(--ink) }
.chips{ display:flex; gap:9px; flex-wrap:wrap; padding-bottom:26px }
.chip{
display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
border:1px solid var(--line); border-radius:var(--r-pill); font-size:13.5px; color:var(--body);
}
.chip:hover{ border-color:#CFDCE4 }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff }
.chip.clear{ color:var(--brand-ink); border-color:transparent }
.list-body{ display:grid; grid-template-columns:262px 1fr; gap:34px; padding-bottom:70px; align-items:start }
.filters{ border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 20px 14px; position:sticky; top:96px }
.fgroup{ border-bottom:1px solid var(--line); padding:18px 0 }
.fgroup:last-child{ border-bottom:0 }
.fgroup h4{ font-size:14px; margin-bottom:13px; display:flex; align-items:center }
.fgroup h4 i{ margin-left:auto; color:var(--muted); font-size:12px }
.fopt{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13.5px; cursor:pointer }
.fopt input{ width:17px; height:17px; accent-color:var(--brand); flex:0 0 auto }
.fopt .n{ margin-left:auto; color:var(--muted); font-size:12px }
.pager{ display:flex; justify-content:center; align-items:center; gap:7px; padding-top:40px }
.pager a{ min-width:40px; height:40px; padding:0 12px; display:grid; place-items:center; border-radius:var(--r-box); color:var(--body); font-size:14px }
.pager a:hover{ background:var(--soft) }
.pager .on{ background:var(--ink); color:#fff }
/* ==================================================================
RESPONSIVO
O site é responsivo por obrigação e não por cortesia: a montra vive
de quem chega da pesquisa, e essa gente chega maioritariamente de
telemóvel. Ao contrário da APP, aqui o telemóvel não é um caso à
parte, é o caso principal.
Isto é a primeira passagem, feita a partir do desenho grande. Quando
o desenho for aprovado, o telemóvel merece uma maqueta própria, em
especial a listagem, onde os filtros têm de deixar de ser coluna e
passar a folha que sobe de baixo.
================================================================== */
@media (max-width:1100px){
.grid-4{ grid-template-columns:repeat(3,1fr) }
.list-body{ grid-template-columns:1fr }
.filters{ position:static }
.split{ grid-template-columns:1fr; gap:34px; padding-block:56px }
.foot-grid{ grid-template-columns:1fr 1fr; gap:32px }
}
@media (max-width:860px){
.wrap{ padding:0 18px }
.grid-4,.grid-3,.hero-feat,.how-grid{ grid-template-columns:repeat(2,1fr) }
/* O cabeçalho passa a duas alturas: identidade e acções em cima,
pesquisa em baixo. Esconder a pesquisa no telemóvel seria tirar
a principal ferramenta a quem mais precisa dela. */
/* 🚨 padding-block, NUNCA o atalho `padding:12px 0`: este elemento É o
.wrap (class="wrap head-in"), e o atalho põe o padding lateral a
ZERO, colando o cabeçalho às margens enquanto o conteúdo lá
abaixo fica com os 18px. Foi o que aconteceu. */
.head-in{ height:auto; flex-wrap:wrap; padding-block:12px; gap:12px }
.brand img{ height:36px }
.search{ order:3; max-width:none; flex:1 1 100% }
.head-right{ gap:4px }
.head-right .btn-ghost{ display:none } /* «Aderir» vive no rodapé */
.loc-pick small{ display:none }
.hero{ padding-block:36px 6px }
.hero-top{ gap:24px }
.trust{ margin-left:0 }
.strip-head .btn{ margin-left:0 }
.list-head{ gap:14px }
.list-tools{ margin-left:0; width:100%; flex-wrap:wrap }
}
@media (max-width:560px){
.grid-3,.hero-feat,.how-grid,.foot-grid{ grid-template-columns:1fr }
/* Dois por linha no telemóvel, e não um: com um cartão por linha
o polegar percorre metade da montra e desiste. */
.grid-4{ grid-template-columns:repeat(2,1fr); gap:12px }
.card-body{ padding:12px 12px 13px }
.card-body h3{ font-size:14px }
.card-meta{ font-size:12px; flex-wrap:wrap }
.rate{ margin-left:0 }
.price b{ font-size:17px }
.cat-in{ flex-wrap:wrap; height:auto; padding-block:12px; gap:10px } /* idem: é o .wrap */
.cats{ order:2; flex:1 1 100%; height:auto; padding-bottom:2px }
.cat-fixed{ order:3 }
.cat-fixed .cat-sep{ display:none }
.loc-pick{ margin-left:0; flex:1 1 100%; order:1 }
.cat{ height:38px; border-bottom:0; border-radius:var(--r-pill); background:var(--soft) }
.cat.on{ background:var(--brand-soft) }
.cat-disc{ background:var(--brand-soft) }
.foot-end{ flex-direction:column; align-items:flex-start; gap:14px }
.foot-langs{ margin-left:0 }
}
/* ===== Seguir =====
🚨 Vive AQUI, ao pe do telefone, e nao dentro do cartao dos pontos.
Dentro de um cartao cujo assunto e o saldo, um coracao aceso le-se
como consequencia do saldo. Ao pe do telefone le-se pelo que e: uma
accao sobre o comerciante, ao lado das outras accoes sobre ele.
⚠️ E leva TEXTO. Um coracao sozinho e ambiguo em toda a internet
(gosto? guardar? seguir?), e aqui a resposta certa e «seguir», que
nenhum coracao diz por si. */
.follow{
display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 16px;
border:1px solid var(--line); border-radius:var(--r-pill); background:#fff;
font-family:var(--f-head); font-size:14px; color:var(--body);
}
.follow:hover{ border-color:#CFDCE4 }
.follow i{ font-size:14px; color:#C3D5DE }
.follow.on{ background:#FDECEC; border-color:#F6D7D7; color:#B3392A }
.follow.on i{ color:#E05B5B }
/* ==================================================================
DIALOGO
Componente partilhado. Nasce aqui, no site.css, porque a zona do
utilizador vai precisar dele em quatro sitios (seguir, bloquear,
denunciar, apagar a conta) e um deles ja e a maqueta do comerciante.
O `.zov`/`.zbox` do map.css e a mesma ideia mas e do selector de
zona, com mapa la dentro; nao se estica um para servir o outro.
================================================================== */
.dlg-back{ position:fixed; inset:0; z-index:900; background:rgba(15,27,36,.5); display:grid; place-items:center; padding:24px }
.dlg{
width:100%; max-width:420px; background:#fff;
border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:28px 28px 24px;
}
.dlg h3{ font-size:19px }
.dlg > p{ color:var(--body); font-size:14.5px; line-height:1.6; margin-top:12px }
.dlg .pts{ display:flex; gap:11px; margin-top:16px; font-size:14px; color:var(--body); line-height:1.5 }
.dlg .pts i{ margin-top:3px; font-size:12px; color:var(--brand-ink); flex:0 0 auto }
.dlg-act{ display:flex; gap:10px; margin-top:24px }
.dlg-act .btn{ flex:1 1 0 }
/* ==================================================================
SO NA MAQUETA
Etiqueta dos estados desenhados lado a lado (o padrao do camp.html,
agora usado tambem pela zona do utilizador). Vive aqui, na folha que
TODAS as paginas carregam, para nao existir em duas.
Nao vai para producao.
================================================================== */
.state-tag{ font-family:var(--f-head); font-size:13px; color:var(--brand-ink); margin-bottom:12px; display:block }
/* A faixa que embrulha os estados. `.mock` NAO e o .wrap (o .wrap vive
la dentro), logo o atalho do padding e seguro aqui. */
.mock{ background:var(--soft); border-top:1px solid var(--line); padding:60px 0 70px }
.mock-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:26px; align-items:start }
.mock-grid.three{ grid-template-columns:repeat(3,1fr) }
.mock-note{ color:var(--muted); margin-top:8px; max-width:66ch }
@media (max-width:1100px){
.mock-grid, .mock-grid.three{ grid-template-columns:1fr }
}
/* ==================================================================
A HOMEPAGE, com o conteudo que o dominio ja mostra hoje
(2026-09-06, decisao do Peter: «/pt/showcase/ deve seguir o que esta
hoje em daponto.com»)
O institucional desenha isto com Bootstrap, o `default.css` e o
`welcome.css`. A casca da montra nao carrega nenhum dos tres, e nao
e para carregar: e essa a razao de ela existir. Entao o que segue
sao as pecas que faltavam para dizer o MESMO com o `site.css`.
================================================================== */
/* O heroi do institucional e a sua identidade: titulo grande, a cor da
marca, em duas linhas. Nao se converteu ao titulo escuro do resto da
casca de proposito - isso fa-lo-ia parecer outro site. */
/* ⚠️ A coluna do texto e MAIS LARGA do que a do `.split` normal, e o tecto do titulo e
mais baixo: com 1.05fr e 60px, «O Unico Cartao de Cliente» partia-se em tres linhas e
deixava «Cliente» sozinho. O original quebra em duas linhas, e sao essas duas que
fazem a frase. */
/* 🚨 O PADDING DE BAIXO E ZERO, e a fotografia ASSENTA na fronteira (decisao do Peter,
2026-09-06). No institucional isto nao se notava porque tudo la e branco; aqui a seccao
seguinte tem fundo `--soft`, logo qualquer folga por baixo da rapariga desenha uma tira
branca solta entre ela e o cinzento. Com `align-items:end` ela toca no cinzento, e o
circulo - que esta ancorado ao `bottom:0` - acaba exactamente na fronteira. */
.hero-about{ padding-block:56px 0; align-items:end; grid-template-columns:1.25fr .75fr }
/* ⚠️ O padding de baixo passa para a COLUNA DO TEXTO e nao para a seccao: e o texto que
precisa de respirar, e a imagem que precisa de nao respirar. */
.hero-about > div:first-child{ padding-bottom:56px }
/* 🚨 E a regra movel vem LOGO A SEGUIR, pela mesma razao do `.grid-2`: sem ela, esta linha
desfazia a coluna unica que o `@media (max-width:1100px)` da folha ja dava ao `.split`,
por vir depois no ficheiro. Media-se no telemovel com a fotografia encolhida ao lado do
texto. Vale para QUALQUER regra deste bloco que toque em `grid-template-columns`. */
/* ⚠️ E em coluna unica o padding do texto sai: o `gap` do `.split` (34px) ja separa o texto
da fotografia, e somados davam 90px de vazio a meio do heroi. */
@media (max-width:1100px){
.hero-about{ grid-template-columns:1fr }
.hero-about > div:first-child{ padding-bottom:0 }
}
/* 🚨 E o que MESMO desenhava a tira branca era isto, nao a imagem: o `.how` traz um
`margin-top:70px` proprio, logo o cinzento comecava 70px abaixo do fim da fotografia e o
`padding-block` a zero nao se via. Medido na maqueta.
⚠️ Escrito como IRMAO IMEDIATO de proposito: no dia em que houver oferta, as FAIXAS entram
entre os dois, o seletor deixa de casar sozinho e o `.how` recupera a sua margem - que e
exactamente o que se quer, porque ai ja nao ha fotografia nenhuma a assentar. */
.hero-about + .how{ margin-top:0 }
/* Os dois destinos do heroi, lado a lado, a quebrar quando nao cabem. */
/* ⚠️ `align-items:start` e nao `center`: o lado da APP tem o botao MAIS a nota por baixo, e
centrado ele empurrava o botao das lojas para o meio dessa altura toda. */
.hero-cta{ display:flex; align-items:start; gap:16px; flex-wrap:wrap; margin-top:26px }
/* ⚠️ O `.btn-store` traz `margin-top` proprio (e usado sozinho noutros sitios); dentro da
linha ele sai, senao os dois botoes ficavam desalinhados na vertical. */
.hero-cta .btn-store{ margin-top:0 }
/* 🚨 A NOTA DE QUE A APP AINDA NAO E A DEFINITIVA (pedido do Peter, 2026-09-06). Vive
AGARRADA ao botao da APP e nao solta por baixo da linha: solta, lia-se como se se
aplicasse tambem ao botao das lojas, que nao tem nada de temporario. */
.cta-app{ display:flex; flex-direction:column; align-items:center; gap:7px }
.cta-note{ font-size:11px; line-height:1.35; color:var(--muted); text-align:center }
/* ⚠️ O botao do heroi e mais alto do que o `.btn` das lojas, entao o `.btn` desce um pouco
para as duas linhas de base ficarem a mesma altura. */
.hero-cta > .btn{ margin-top:9px }
.hero-about h1{
color:var(--brand-ink); font-weight:700; line-height:1.04;
font-size:clamp(30px,4vw,50px); letter-spacing:-.03em;
}
.hero-about h1 sup{ font-size:.35em; top:-.9em }
.hero-about .sub{ font-size:14px; color:var(--muted); margin-top:14px }
.hero-about .note{ font-size:12.5px; color:var(--muted); margin-top:12px; font-style:italic }
/* O botao de ir para a APP: icone e duas linhas, como no institucional.
Nao e um `.btn` porque tem duas alturas de texto. */
.btn-store{
display:inline-flex; align-items:center; gap:14px; margin-top:26px;
border:1px solid var(--line); border-radius:var(--r-box);
padding:12px 20px 12px 16px; background:#fff; box-shadow:var(--sh-1);
}
.btn-store:hover{ border-color:#CFDCE4 }
.btn-store i{ font-size:30px; color:var(--brand) }
.btn-store small{ display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.btn-store b{ font-family:var(--f-head); font-weight:400; font-size:16px; color:var(--ink) }
/* A imagem do institucional e um recorte com fundo transparente (ou um
telemovel). Nao pode ir para dentro do `.split-media`, que corta em
4:3 e leva sombra: ficaria uma fotografia cortada dentro de um cartao
que ali nao existe. */
.split-media.free{
aspect-ratio:auto; box-shadow:none; border-radius:0; overflow:visible;
display:grid; place-items:center;
}
.split-media.free img{ width:100%; height:auto; max-width:400px }
/* O CIRCULO por tras da fotografia, que o institucional ja tinha e que faltava aqui.
⚠️ `aspect-ratio` e nao o `padding-top:100%` do original: a percentagem do padding
refere-se a largura do PAI, logo com a fotografia limitada a 400px dentro de uma coluna
mais larga o circulo saia oval. Com `aspect-ratio` a altura deriva da largura propria.
⚠️ A cor e o `--brand` do projecto e nao o `#51c6f1` escrito a mao no `welcome.css`: e a
mesma cor, e uma segunda cor de marca codificada e uma cor que um dia diverge. */
/* 🚨 O DISCO E MAIS LARGO DO QUE A FOTOGRAFIA, e isso nao e detalhe: e o que faz o azul
transbordar para os lados da figura em vez de lhe ficar encostado. MEDIDO no institucional
a 2026-09-06: fotografia desenhada 420px dentro de um disco de 460px, ou seja o disco vale
**1,095x** a largura dela. A primeira versao daqui punha os dois iguais (400/400) e o
resultado lia-se como um disco pequeno de mais - foi o que o Peter apanhou.
⚠️ Replica-se a MECANICA do original em vez de escrever dois tamanhos: o disco e o
WRAPPER, e a fotografia leva `padding` lateral por dentro dele. Assim ha um numero so, e
a proporcao aguenta-se sozinha em qualquer largura de ecra.
⚠️ O padding vai em PERCENTAGEM e nao nos 20px do original: em percentagem ele encolhe com
o wrapper, logo a 390px de ecra a proporcao e a mesma que a 1280. 4.35% de cada lado deixa
a fotografia com 91,3% do disco, que e o 420/460 medido.
🚨 E ESTE BLOCO TEM DE VIR DEPOIS DO `.split-media.free`, que e a sua base: as duas regras
da imagem tem a MESMA especificidade, logo quem vier depois ganha. Escrito acima dele, o
`max-width:400px` do `.free` vencia o `max-width:none` daqui, a fotografia parava nos 400,
o padding deixava de a encolher, e o disco crescia sem ela crescer - medido, 1,174 em vez
de 1,095. E a terceira vez que esta folha paga a mesma licao.
⚠️ A largura vem da COLUNA (~426px hoje) e nao deste tecto: o `max-width` e o valor do
institucional e serve so de travao para o dia em que a grelha der mais espaco a imagem. */
.split-media.circle{ position:relative; width:100%; max-width:460px; margin-inline:auto }
.split-media.circle::before{
content:''; position:absolute; bottom:0; left:0;
width:100%; aspect-ratio:1; border-radius:50%; background:var(--brand);
}
/* ⚠️ `display:block` no `img`: uma imagem em linha assenta na linha de base e deixa uns
pixeis de folga por baixo - que e exactamente a tira branca que este bloco veio tirar.
⚠️ E o `max-width:none` desfaz o tecto de 400px que o `.free` poe a TODAS as imagens: aqui
quem manda na largura e o wrapper, e sem isto a fotografia parava nos 400 e o padding
deixava de a encolher - o disco crescia sem ela crescer. */
.split-media.circle img{
position:relative; z-index:1; display:block;
width:100%; max-width:none; padding-inline:4.35%;
}
/* A caixa do exemplo dos pontos: o unico sitio do site onde a conta se
faz a vista. Fica numa caixa para se ler como exemplo e nao como
afirmacao sobre a conta de quem esta a ler. */
.ex{
background:var(--soft); border:1px solid var(--line); border-radius:var(--r-box);
padding:16px 18px; margin-top:20px; font-size:13.5px; color:var(--body);
}
.ex .ex-i{ color:var(--muted); margin-bottom:10px }
.ex hr{ border:0; border-top:1px solid var(--line); margin:10px 0 }
/* 🚨 A regra movel vive AQUI, colada a base, e nao no bloco `@media` la de cima. Esteve
la, e nao fazia nada: este bloco e acrescentado no FIM da folha, logo a regra de duas
colunas vinha depois e ganhava por ordem, com a mesma especificidade. Media-se em
duas colunas a 390px, e era a unica fonte de overflow da pagina. */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr } }
/* Testemunhos. ⚠️ Ver a nota no fim desta folha: os quatro sao INVENTADOS. */
/* ⚠️ O `min-width:0` no filho do texto NAO e enfeite: um item de flex tem
`min-width:auto` por omissao, ou seja recusa-se a encolher abaixo do seu conteudo, e no
telemovel isso empurrava o cartao 9px para fora do ecra (medido a 390px). E a unica
fonte de overflow horizontal que esta pagina tinha. */
.quote{ display:flex; align-items:center; gap:18px }
.quote > div{ min-width:0 }
.quote img{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto }
.quote b{ display:block; font-family:var(--f-head); font-weight:400; font-size:13.5px; color:var(--ink) }
.quote p{ font-size:14px; color:var(--body); margin-top:5px }
/* FAQ. 🚨 `` e nao o `collapse` do Bootstrap com jQuery, que e
como o institucional o faz: a casca da montra nao carrega nenhum dos
dois, e um acordeao que so abre com JavaScript deixaria as doze
respostas inalcancaveis a quem o tem desligado. Mesmo padrao do
horario na pagina do comerciante. */
.faq{ border-top:1px solid var(--line); margin-top:26px }
.faq details{ border-bottom:1px solid var(--line) }
/* 🚨 O `gap` do flex aplica-se a CADA filho, e o texto de uma pergunta nao e um filho
so: o `common.brand` mete um `daponto` no meio da frase, e ele passava a item
de flex com 16px de cada lado - «O que e a ␣daponto␣ ?». Por isso a pergunta vai
dentro de um `` proprio, e o flex fica com dois filhos: a frase e o galao. */
.faq summary{
display:flex; align-items:center; gap:16px; padding:16px 2px; cursor:pointer;
list-style:none; font-family:var(--f-head); font-size:15.5px; color:var(--ink);
}
.faq summary > span{ flex:1 1 auto }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
font-size:11px; margin-left:auto; color:var(--muted);
}
.faq details[open] summary{ color:var(--brand-ink) }
.faq details[open] summary::after{ content:'\f077' }
.faq .a{ font-size:14px; color:var(--body); padding:0 2px 20px; max-width:76ch }
.faq .a a{ color:var(--brand-ink); text-decoration:underline }
/* ==================================================================
O AVISO DE COOKIES - uma barra em baixo, uma frase, um link, um OK
==================================================================
🚨 E um AVISO e nao um pedido de consentimento, e a diferenca esta no
que NAO esta aqui: nao ha botao de rejeitar. «O site usa cookies» +
«OK» e verdade e apenas nao obtem consentimento - insuficiente, mas
nao enganador. Um par «Aceitar / Rejeitar» em que o Rejeitar nao
rejeita nada seria uma afirmacao FALSA por escrito, e e essa a versao
que e sancionada. Decisao do Peter: PLAN_user_account.md §3.8d.
🚨 NASCE ESCONDIDO E E O JAVASCRIPT QUE O MOSTRA, e isso nao e um
detalhe de implementacao: quem tem o JS desligado nao recebe o GA nem
o Tawk, porque os dois SAO JavaScript - logo nao ha nada de que o
avisar. **O aviso e a coisa que ele anuncia tem exactamente a mesma
precondicao**, e e isso que torna aceitavel ele nunca aparecer sem JS.
⚠️ O `[hidden]` PRECISA de regra propria: o atributo vale
`display:none` pela folha do browser, mas o `display:flex` daqui de
cima tem mais especificidade e ganhava - a barra ficava sempre a
vista. E a armadilha classica de esconder um flex.
⚠️ z-index 800: ACIMA do cabecalho fixo (50) e do menu (60), e ABAIXO
do `.dlg-back` (900), para o dia em que existir um modal ele tapar
isto e nao ao contrario. */
.ck-note{
position:fixed; left:0; right:0; bottom:0; z-index:800;
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:12px 20px;
background:var(--surface); border-top:1px solid var(--line);
box-shadow:0 -2px 12px rgba(15,27,36,.06);
}
.ck-note[hidden]{ display:none }
.ck-note p{ margin:0; flex:1 1 260px; font-size:13px; line-height:1.45; color:var(--body) }
.ck-note a{ color:var(--brand-ink); text-decoration:underline }
/* A regra estreita vive COLADA a base, e nao no bloco @media la de
cima: o bloco novo vem no fim do ficheiro, logo ganha por ordem com a
mesma especificidade. Esta folha ja pagou essa licao tres vezes. */
@media (max-width:560px){
.ck-note{ padding:12px 16px; gap:10px }
.ck-note .btn{ width:100% }
}