/* ------------------------------------------------------------------
   daponto — páginas de detalhe (campanha, comerciante).
   Continuação do site.css, carregada só onde é precisa.
   ------------------------------------------------------------------ */

/* ===== Migalhas =====
   Navegação a sério e não uma linha de texto: é o que dá ao motor de
   busca a árvore área-pai › área › oferta, e ao visitante a saída. */
.crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:22px 0 18px; font-size:13px; color:var(--muted) }
.crumb a:hover{ color:var(--brand-ink) }
.crumb i{ font-size:9px; opacity:.5 }
.crumb .here{ color:var(--body) }

/* ===== Estrutura ===== */
.detail{ display:grid; grid-template-columns:1fr 372px; gap:48px; align-items:start; padding-bottom:70px }

.shot{ position:relative; border-radius:var(--r-media); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--sh-1) }
.shot .ph{ position:absolute; inset:0 }
.shot-off{
    position:absolute; right:16px; top:16px;
    background:rgba(15,27,36,.72); color:#fff; backdrop-filter:blur(6px);
    border-radius:var(--r-pill); padding:7px 15px; font-family:var(--f-head); font-size:14px;
}

.detail h1{ font-size:clamp(26px,3.2vw,40px); margin:26px 0 12px }
.detail .lead{ font-size:17px; color:var(--body) }

/* Cabeçalho do comerciante, ao alto. Espelha o topo do ecrã da APP
   (logo, marca, selo de spot, telefone), que já está resolvido. */
.mrch-line{
    display:flex; align-items:center; gap:13px; flex-wrap:wrap;
    margin:22px 0 6px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* Logótipo QUADRADO (cantos suaves), nunca redondo. É a forma em que o
   comerciante o carrega (ImageField logo = 512x512, 1:1) e a forma da
   caixa da APP. Um círculo corta os cantos de um logo que foi feito
   para um quadrado. */
.mrch-logo{
    width:52px; height:52px; border-radius:var(--r-box); flex:0 0 auto; overflow:hidden;
    display:grid; place-items:center; font-family:var(--f-head); color:#fff; font-size:17px;
    background:#fff; border:1px solid var(--line);
}
/* `contain` e não `cover`: a maioria dos logótipos reais é uma marca
   sobre branco, e cortá-la come o nome. A APP usa `cover` por ter
   caixas de 28 a 54px onde não cabe mais; aqui há espaço, e um logo
   inteiro vale mais do que um logo cheio. A moldura é o que lhe dá
   contorno, senão a marca branca flutua no cartão branco. */
.mrch-logo img{ width:100%; height:100%; object-fit:contain; padding:5px }
.mrch-logo.ini{ border-color:transparent }

.mrch-line b{ font-family:var(--f-head); font-weight:400; font-size:16px; color:var(--ink); display:block; line-height:1.2 }
.mrch-line small{ color:var(--muted); font-size:13px }
/* A marca leva a pagina do comerciante (2026-09-03), e por isso e um `a`: sem esta regra
   herdava o azul do browser, e a marca do comerciante deixava de se ler como marca.
   ⚠️ So aparece como link quando essa pagina existe - uma campanha pode ser visivel sem o
   comerciante o ser. */
.mrch-line a{ text-decoration:none }
.mrch-line a b{ color:var(--ink) }
.mrch-line a:hover b{ color:var(--brand-ink) }
.ic-round{
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    border:1px solid var(--line); color:var(--body); font-size:13px; flex:0 0 auto;
}

/* Selo de SPOT = o disco daponto, não uma marca de visto.
   O visto lê-se «verificado», que é outra coisa e é universal de mais.
   O disco é nosso, e «Spot» é palavra da casa que não se traduz.

   O disco É o botão: sem moldura, sem fundo e sem folga. Estava dentro
   de um círculo azul-claro com padding, e ficava mais pequeno do que os
   irmãos ao lado sem nenhuma razão para isso. A marca vale por si e não
   precisa de caixa. */
.ic-spot{ border:0; background:none }
.ic-spot svg{ width:100%; height:100%; display:block }

/* ===== Blocos de conteúdo ===== */
.block{ padding:34px 0; border-bottom:1px solid var(--line) }
.block:last-child{ border-bottom:0 }
.block h2{ font-size:20px; margin-bottom:16px }

/* Rich text: SÓ as etiquetas que o SANITIZE_RICHTEXT_MODULE deixa
   passar (p br strong em u ol ul li a img). Desenhar mais do que isso
   seria desenhar para HTML que nunca chega ao ecrã. */
.rich{ font-size:15.5px; line-height:1.75; color:var(--body) }
.rich p{ margin-bottom:14px }
.rich p:last-child{ margin-bottom:0 }
.rich strong{ color:var(--ink) }
.rich ul, .rich ol{ margin:0 0 14px 20px }
.rich li{ margin-bottom:7px }
.rich a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px }
.rich img{ width:100%; height:auto; border-radius:var(--r-media); margin:16px 0 }

.disclaimer{ margin-top:18px; font-size:12.5px; color:var(--muted); line-height:1.6 }

details.terms{ border:1px solid var(--line); border-radius:var(--r-box); padding:0 18px }
details.terms summary{
    cursor:pointer; padding:16px 0; font-family:var(--f-head); font-size:14.5px; color:var(--ink);
    display:flex; align-items:center; list-style:none;
}
details.terms summary::-webkit-details-marker{ display:none }
details.terms summary::after{ content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; margin-left:auto; color:var(--muted) }
details.terms[open] summary::after{ content:'\f077' }
details.terms .rich{ font-size:14px; padding-bottom:18px }

/* ===== Moradas ===== */
.addr{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line) }
.addr:last-child{ border-bottom:0 }
.addr .pin{ width:38px; height:38px; border-radius:var(--r-box); background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; flex:0 0 auto }
.addr b{ font-family:var(--f-head); font-weight:400; font-size:15px; color:var(--ink) }
.addr p{ font-size:14px; color:var(--muted); margin-top:2px }
.addr .links{ margin-top:8px; display:flex; gap:14px; font-size:13px }
.addr .links a{ color:var(--brand-ink) }
.hours{ margin-top:10px; font-size:13px; color:var(--muted) }
.hours .row{ display:flex; gap:14px; padding:3px 0 }
.hours .row span:first-child{ width:52px; color:var(--body) }
.hours .now{ color:#1E8E5A }

/* ==================================================================
   CAIXA DE OBTENÇÃO  (a peça que decide a página)

   Divergência DELIBERADA da APP: aqui o custo em pontos aparece
   DESDE JÁ. Na APP ele só surge no modal de confirmação, o que ali
   funciona porque quem lá está já tem conta e já tem saldo. Numa
   página pública o visitante está a decidir se CRIA conta, e esconder
   metade do preço para o revelar depois do registo é uma armadilha.
   ================================================================== */

.buy{ position:sticky; top:98px; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden }
.buy-in{ padding:22px }

.buy-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.buy-price s{ color:var(--muted); font-size:18px }
.buy-price b{ font-family:var(--f-head); font-weight:400; font-size:30px; color:var(--ink); line-height:1 }
.buy-price .pct{ background:var(--brand-soft); color:var(--brand-ink); border-radius:var(--r-pill); padding:3px 10px; font-size:12.5px; font-family:var(--f-head) }

/* O CUSTO EM PONTOS, por baixo do preco e centrado.
   Le-se como uma SOMA: «8,00 EUR **mais** 256 pontos daponto» - sao mesmo as duas coisas
   (o voucher debita os pontos, e o valor paga-se ao comerciante ao balcao). O `+` nao e
   decorativo: e a unica peca que diz que as duas parcelas se acumulam.

   ⚠️ Risco conhecido e aceite: em programas de fidelizacao «+256 pontos» costuma querer
   dizer que se GANHAM 256. Aqui gastam-se. O que desfaz a duvida e o contexto (a caixa e
   de obtencao, o botao diz «Obter voucher», e a nota por baixo explica o pagamento ao
   comerciante). Se vier a confundir alguem, a saida NAO e tirar o `+`, e nomear a
   parcela.

   🚨 O SINAL DAS DUAS CARTEIRAS e agora a PALAVRA em corpo grande, e nao um icone.
   «daponto» a 20px em azul de marca contra o nome generico em tinta escura ve-se de
   relance - um glifo de 16px nao se via, e era esse o pedido. A WCAG 1.4.1 (nivel A)
   fica satisfeita porque o que distingue e a PALAVRA (texto), nao a cor: um utilizador
   com deficiencia de visao de cor le «daponto» contra «internos» na mesma.

   ⚠️ Nao se pintou o BOTAO: a accao e a mesma nos dois casos («Obter voucher»), e pintar
   um controlo para sinalizar uma propriedade da moeda troca as coisas de sitio. */
.buy-cost{ padding-top:15px; display:flex; align-items:center; justify-content:center }
/* ⚠️ PESO 400 EXPLICITO, e nao e esquecimento. O pacote de fontes auto-alojado tem seis
   `@font-face` e **todos de peso 400**: qualquer `font-weight` acima disso e o browser a
   engordar os glifos de 400 (bold sintetico), e a 28px e onde isso mais se ve. O Peter
   apanhou-o a olho na primeira versao: «o negrito ficou muito forte».
   A hierarquia fica por TAMANHO e COR, que e o que o resto do site ja faz (os `h1..h4` do
   site.css sao explicitamente 400). Se um dia se quiser peso a serio, regenera-se o pacote
   com Poppins 600/700 - ha README em `plugins/google-fonts/` - e isso e a decisao 7. */
.buy-cost .n{ font-family:var(--f-head); font-size:28px; font-weight:400; padding-right:15px; color:var(--ink) }
.buy-cost .w{ font-family:var(--f-head); font-size:16px; font-weight:400; line-height:1; color:var(--ink) }
.buy-cost .cur{ font-size:20px; color:var(--brand) }
/* Comerciante: sem o azul, que e da marca daponto e nao se empresta. Com o peso fora de
   jogo, o que distingue as duas carteiras e a COR mais a PALAVRA - e a palavra e que
   satisfaz a WCAG 1.4.1, porque a cor sozinha nunca pode ser o unico sinal. */
.buy-cost.is-mch .cur{ color:var(--ink) }

.buy .btn{ width:100%; margin-top:16px }

/* A porta é uma só: o SIGNIN_MODULE cria a conta no mesmo fluxo do PIN,
   logo não há «registar» separado de «entrar». O botão nomeia o que a
   pessoa quer (o voucher) e esta linha explica o caminho. */
.buy-door{ margin-top:11px; font-size:13px; color:var(--muted); line-height:1.55; text-align:center }
.buy-door b{ color:var(--brand-ink); font-weight:400; font-family:var(--f-head) }

.buy-alt{ display:block; text-align:center; margin-top:12px; font-size:13.5px; color:var(--brand-ink) }

/* O aviso de que NADA se paga aqui. Na APP é letra pequena; neste site
   sobe a peça visível, porque a página parece uma loja e não é: o
   pagamento é ao comerciante, ao balcão. */
.buy-note{
    margin-top:16px; padding-top:15px; border-top:1px solid var(--line);
    display:flex; gap:10px; font-size:13px; color:var(--muted); line-height:1.55;
}
.buy-note i{ color:var(--brand); margin-top:3px }

/* O AVISO QUE FALHOU, na mesma caixa e por baixo do botao. E a forma que a maqueta ja tinha
   escolhido para os avisos desta caixa (`template/website/camp.html`, estado 3): o mesmo
   `buy-note`, a vermelho - e nao uma caixa de erro nova, que seria uma segunda gramatica de
   erro no mesmo site (a porta ja tem a `.auth-err`).
   ⚠️ A cor vive AQUI e nao num `style=` inline como na maqueta: uma maqueta escreve inline
   para se ler de uma vez, uma folha de estilo nao. */
.buy-note.err{ color:#C0392B }
.buy-note.err i{ color:#C0392B }

.buy-rules{ background:var(--soft); border-top:1px solid var(--line); padding:16px 22px }
.buy-rules .r{ display:flex; align-items:center; gap:12px; padding:6px 0; font-size:13.5px }
.buy-rules .r span:first-child{ color:var(--muted) }
.buy-rules .r b{ margin-left:auto; font-family:var(--f-head); font-weight:400; color:var(--ink) }
.buy-rules .r.warn b{ color:#C0392B }
.buy-rules .flag{ display:flex; align-items:center; gap:9px; padding:8px 0 2px; font-size:13px; color:var(--brand-ink) }

.used{ display:flex; align-items:center; gap:9px; margin-top:18px; font-size:13.5px; color:var(--muted); justify-content:center }
.used b{ color:var(--ink); font-family:var(--f-head); font-weight:400 }

/* ===== Estados da caixa (SÓ NA MAQUETA) ===== */
.states{ background:var(--soft); padding:60px 0; border-top:1px solid var(--line) }
.states-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:26px; align-items:start }
.states .buy{ position:static }
/* .state-tag subiu para o site.css: passou a ser usada tambem pelas
   paginas da zona do utilizador, e uma segunda copia aqui era o inicio
   da divergencia do costume. */

@media (max-width:1100px){
    .detail{ grid-template-columns:1fr; gap:32px }
    .buy{ position:static }
    .states-grid{ grid-template-columns:1fr }
}
@media (max-width:560px){
    .detail h1{ margin-top:20px }
    /* ⚠️ Este corte existia para descer o preco de 34px; com a base a 30px passou a
       26px, para a reducao continuar a valer alguma coisa. E o bloco do custo desce
       na mesma proporcao, senao o «+ 256» ficava maior do que o proprio preco. */
    .buy-price b{ font-size:26px }
    .buy-price s{ font-size:16px }
    .buy-cost .n{ font-size:24px; padding-right:12px }
    .buy-cost .cur{ font-size:18px }
}