/* ============================================================================
   ADICIONAIS — porte do nó `282:21`

   Cada número aqui saiu do arquivo, e o nó que o originou está no comentário
   ao lado. Onde algo mudou, o motivo está escrito.

   A GRADE É A ÚNICA COISA QUE NÃO É LITERAL. No Figma são três colunas fixas
   de 360 num quadro de 1440. Catálogo é a peça de um site que existe para ser
   percorrida em qualquer tela, e congelar três colunas deixaria o cartão em
   78px num celular. As MEDIDAS do cartão são as do arquivo; quantas colunas
   cabem é que passa a depender da largura.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

.pagina-adicionais{
  /* as três da logo, lidas dos nós 287:2 a 287:4 e das etiquetas */
  --amarelo:#FFFF44;
  --turquesa:#64D8C4;
  --rosa:#E14AE1;
  --azul:#0D4EE8;
  --verde:#4AD70A;
  /* A PALETA É A DO ARQUIVO. A página é branca, como o nó 282:21 desenha; o
     preto do Norvin é o CHÃO em volta, e ele mora no `body`. */
  --chapa:#F6F6F6;          /* cartão do produto, nó 282:40 */
  --tinta:#000000;
  --tinta-2:rgba(0,0,0,.56);
  --fio:rgba(0,0,0,.14);

  margin:0;
  background:var(--base);
  color:var(--tinta);
  font-family:"Inter","Inter Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.ad{padding:clamp(30px, 4.6vh, 56px) 0 clamp(34px, 5vh, 60px);padding:clamp(30px, 4.6svh, 56px) 0 clamp(34px, 5svh, 60px)}
/* ============================================================================
   O CARTÃO SOBRE O PRETO

   O molde é o `.hero` da home: `body` no preto do Norvin e o conteúdo num
   cartão claro, recuado 20u dos lados, com 24u de raio e `overflow:hidden` —
   são os entalhes. A navbar flutua sobre o preto e por isso funciona aqui sem
   nenhuma regra de exceção, que é o ponto de a barra ser uma peça só.

   O topo reserva 112u: 92 da barra mais os mesmos 20 de respiro que o hero
   usa dos lados. Assim a página interna abre com o mesmo ar da home.
   ========================================================================== */
.ad{
  margin:calc(112 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  border-radius:calc(24 * var(--u));
  overflow:hidden;
  background:#FFFFFF;
  isolation:isolate;
}
@media (max-width: 860px){
  /* no celular o recuo lateral encolhe: 20u de cada lado num 390 comeria 9%
     da largura util, e aí o cartão aperta o próprio conteúdo */
  .ad{
    margin:calc(104 * var(--u)) clamp(8px, 2.4vw, 14px) clamp(10px, 2.6vw, 16px);
    border-radius:clamp(14px, 3.4vw, 22px);
  }
}

/* quem rola até uma peça precisa limpar a barra fixa: sem isto, âncora e
   rolagem programática param com o alvo debaixo da navbar */
:is(.ad-ficha, .ad-grade, .ad-titulo, .ad-regua, .ad-pe){
  scroll-margin-top:calc(112 * var(--u) + 16px);
}
.ad-dentro{
  /* 52 de margem em 1440: a caixa útil do arquivo é 1336 */
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(18px, 3.6vw, 52px);
}

/* A BARRA DO TOPO SAIU DAQUI. Ela era própria desta página e virou a navbar
   do site, montada por `js/pagina.js` — o pedido foi deixar o topo igual ao
   da home. O que muda por página é só o botão, e ele vem do `data-cta` no
   `<body>`. As regras `.ad-barra`, `.ad-marca` e `.ad-nav` foram embora com
   ela; o CSS da navbar mora no `hero.css`. */

/* ---- as três cores (287:2 a 287:4) ----
   86 de largura, 8 de altura, passo de 96 — ou seja 10 de vão. Em vez de três
   posições absolutas, um flex com o mesmo vão: a régua sobrevive à tela
   estreita, onde as barras encolhem juntas em vez de saírem do quadro. */
.ad-cores{
  display:flex;gap:10px;
  margin:clamp(18px,3.4vw,32px) 0 0;
}
.ad-cores span{
  width:clamp(48px,6vw,86px);height:8px;display:block;
}
.ad-cores span:nth-child(1){background:var(--amarelo)}
.ad-cores span:nth-child(2){background:var(--turquesa)}
.ad-cores span:nth-child(3){background:var(--rosa)}

/* ---- o título (282:28) ----
   180px num quadro de 1440, ou seja 12,5% da largura. O `clamp` guarda os dois
   extremos e o meio acompanha a tela, que é o que mantém a palavra ocupando a
   mesma fração do quadro em qualquer largura. O `0.82` de entrelinha e o
   tracking apertado são do arquivo. */
.ad-titulo{
  margin:clamp(14px,2.2vw,21px) 0 0;
  font-family:"Inter Display","Inter",sans-serif;
  /* mesma conta da /festas: 12,5vw sai da proporção do quadro do Figma e
     vira 22% da altura da janela num notebook. As duas páginas usam a mesma
     escala, senão uma parece de outro site. */
  font-size:clamp(42px, 8.6vw, 126px);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.035em;
  color:var(--tinta);
  text-align:center;
}

/* ---- a régua de filtro (282:29 / 282:30 / 282:31) ---- */
/* mesma razão da `.ft-regua-vazia`: "FILTER +" e "SORT BY: PDF 2026 +" eram
   controles que não existem, e o fio é o que separa o título do catálogo */
.ad-regua-vazia{padding-bottom:0;min-height:0}

.ad-regua{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-top:clamp(20px,3.4vw,33px);
  padding-bottom:clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--fio);   /* 282:31 */
}
.ad-filtro,.ad-sort{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(14px,1.4vw,18px);font-weight:800;line-height:1.12;
}

/* ---- a grade ----
   O cartão do arquivo tem 360 de largura; a coluna nasce dele e o resto é
   consequência. `auto-fit` mais `minmax` faz a contagem de colunas sair da
   largura disponível, sem uma media query por faixa. */
.ad-grade{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 288px), 1fr));
  gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(24px,3.4vw,38px);
  /* A LARGURA VEM DO ARQUIVO E TRAVA EM TRES COLUNAS.
     No no' os cartoes comecam em 146, 540 e 934, com 360 de largura: o vao e'
     34 e a fila mede 3x360 + 2x34 = 1148, centrada nos 1336 uteis. Com esse
     teto a conta do `auto-fit` so' fecha em tres — a quarta pediria 1254 — e
     cada coluna cai em (1148-68)/3 = 360, que e' exatamente a medida do
     arquivo. Sem ele o desktop abria quatro colunas. */
  max-width:1148px;
  margin-inline:auto;
}

/* ---- o cartão (282:40) ----
   360x302 com chapa #F6F6F6. A altura é fixa no arquivo; aqui ela nasce do
   conteúdo com piso, senão nome de duas linhas ("BRINQUEDOS INFLÁVEIS" quebra
   em coluna estreita) empurraria o preço para fora do corte. */
.ad-ficha{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  min-height:302px;
  /* os recuos saem dos offsets do no': a etiqueta comeca em 16,16 e o nome em
     x=22; o preco termina em 276 num cartao de 302, o que da 26 embaixo */
  padding:16px 22px 26px;
  background:var(--chapa);
  color:var(--tinta);
  text-decoration:none;
  overflow:hidden;
  transition:background-color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.ad-ficha:hover{background:#F0F0F0;transform:translateY(-2px)}
.ad-ficha:active{transform:translateY(0)}
.ad-ficha:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}

/* etiqueta (282:41): 22 de altura, chapa da cor a 18% e contorno na cor cheia */
.ad-etiqueta{
  justify-self:start;
  /* no arquivo a etiqueta comeca em x=16 e o nome em x=22: ela recua 6 alem do
     recuo do cartao, e esse degrau se ve contra a borda */
  margin-left:-6px;
  height:22px;
  display:inline-flex;align-items:center;
  padding:0 10px;
  font-size:9px;font-weight:700;line-height:1.12;letter-spacing:.02em;
  border:1px solid var(--cor, var(--amarelo));
  background:color-mix(in srgb, var(--cor, var(--amarelo)) 18%, transparent);
}
.ad-etiqueta[data-cor="amarelo"] {--cor:var(--amarelo)}
.ad-etiqueta[data-cor="turquesa"]{--cor:var(--turquesa)}
.ad-etiqueta[data-cor="rosa"]    {--cor:var(--rosa)}
.ad-etiqueta[data-cor="azul"]    {--cor:var(--azul)}
.ad-etiqueta[data-cor="verde"]   {--cor:var(--verde)}

/* o coração (282:43) fica no canto, fora do fluxo da grade */
/* o coracao (282:43) e' uma caixa de 24 centrada em x=328; o glifo em si tem
   9 de largura, entao o recuo pela direita e' 360 - 328 - 4,5 */
.ad-favorito{
  position:absolute;right:27px;top:15px;
  font-size:13px;line-height:1.12;
  color:var(--tinta);
}

/* a foto (282:44): 236x154 dentro de um cartão de 360, ou seja 65,5% da
   largura, centrada. `object-fit:cover` porque os nove originais têm razões
   diferentes (de 640x360 a 386x834) e a caixa do arquivo é uma só. */
/* a foto (282:44): 236x154, medida do CARTAO e nao da caixa interna. Com
   porcentagem ela virava 207 — 65,5% dos 316 que sobram depois do recuo, e nao
   dos 360 do cartao. Em pixel ela bate o arquivo, e `max-width` a segura
   quando a coluna encolhe.
   O recuo de cima e' 20: a etiqueta termina em 38 (16 + 22) e a foto comeca
   em 58. */
.ad-foto{
  align-self:center;
  width:236px;max-width:100%;
  aspect-ratio:236 / 154;
  margin:17px auto 0;
  display:block;overflow:hidden;
  background:#E8E8E8;
}
.ad-foto img{width:100%;height:100%;object-fit:cover;display:block}

.ad-nome{                                      /* 282:45 — 17px, Extra Bold */
  margin-top:16px;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:17px;font-weight:800;line-height:1.12;
  text-wrap:balance;
}
.ad-preco{                                     /* 282:46 — 13px, Bold */
  margin-top:8px;
  font-size:13px;font-weight:700;line-height:1.12;
}

/* ---- o pé (282:32 / 282:33) ---- */
.ad-pe{
  margin-top:clamp(28px,4vw,54px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--fio);          /* 282:32 */
}
.ad-pe p{
  margin:0;
  font-size:13px;font-weight:700;line-height:1.12;
  color:var(--tinta-2);
}
.ad-pe a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ad-pe a:hover{opacity:.66}

/* ---- celular ----
   Em duas colunas até onde o cartão couber, e nunca uma pilha: catálogo
   empilhado vira rolagem infinita e some a comparação, que é a razão de um
   catálogo existir. O piso de 288 na grade já entrega duas colunas em 620,
   e abaixo disso a conta abaixo assume. */
@media (max-width: 620px){
  .ad-grade{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }
  .ad-ficha{min-height:0;padding:12px 13px 15px}
  .ad-foto{width:100%;margin-top:10px}
  .ad-nome{font-size:clamp(13px,3.7vw,15px);margin-top:11px}
  .ad-preco{font-size:clamp(11px,3.1vw,12px);margin-top:5px}
  .ad-etiqueta{height:19px;padding:0 7px;font-size:8px}
  .ad-favorito{right:11px;top:11px}
  /* A NAVEGACAO DESCE INTEIRA. Deixando ela quebrar junto com a marca, o
     "WHATSAPP" caia sozinho numa segunda linha, indentado embaixo do meio da
     barra — orfao. Numa linha propria os cinco itens se distribuem pela
     largura e a barra fecha em duas linhas limpas. */
  .ad-pe p{font-size:11px}

  /* O NOME RESERVA DUAS LINHAS. As colunas estreitas quebram "BRINQUEDOS
     INFLAVEIS" e "CABINE FOTOGRAFICA" em duas, e como a foto mora numa faixa
     `1fr` ela absorvia a diferenca: as fotos da mesma fileira terminavam em
     alturas diferentes. Com a caixa reservada, todas alinham; quem tem uma
     linha so' ganha respiro embaixo, que e' onde respiro se explica. */
  .ad-nome{min-height:2.24em}
}
/* o alvo de toque do cartão já passa dos 44 pela própria altura; quem precisa
   é a barra do topo, que é linha de texto */
/* ALVOS DE TOQUE, medidos e nao arredondados.
   A caixa de linha de cada peca sai do proprio corpo: 13px x 1,12 da 14,6 e
   18px x 1,12 da 20,2. O piso e' 44, entao o recuo e' (44 - caixa) / 2 com
   sobra de um pixel. Cresce a area, nao o desenho — a barra continua com a
   mesma altura visual. A guarda e' `hover: none`: quem nao tem estado de toque
   e' quem nao tem ponteiro, e isso independe da largura da tela. */
@media (hover: none){
  .ad-pe a{display:inline-block;padding-block:17px}    /* 14,6 + 34 = 48,6 */
}

@media (prefers-reduced-motion: reduce){
  .ad-ficha{transition:none}
  .ad-ficha:hover{transform:none}
}

/* ============================================================================
   OS BLOCOS DE DETALHE DESTA PAGINA (12/09/2026)

   A grade de nove fichas era a pagina inteira, e cada ficha ia direto para o
   WhatsApp. Quem clicava em "Saiba mais" num servico da home caia aqui e
   encontrava um quadrinho escrito CONSULTAR: o botao prometia informacao e
   entregava um pedido de orcamento. A ficha agora leva ao bloco de detalhe, e
   o bloco e' o `.ft-bloco` de css/festas.css, que esta pagina passou a
   carregar — o mesmo desenho de Oficinas, Festas e Recreacao.

   Aqui ficam so' as duas cores que o festas.css nao tem. A grade do Figma usa
   cinco, e nao as tres da marca.
   ========================================================================== */
.ft-bloco[data-cor="azul"] {--cor:var(--azul)}
.ft-bloco[data-cor="verde"]{--cor:var(--verde)}

/* a secao de blocos respira do mesmo jeito que o resto do cartao claro */
.ad .ft-restante{padding:0}
.ad .ft-restante-tit{margin-top:clamp(40px,6vw,88px)}