/* ============================================================================
   O MOLDE DE PÁGINA INTERNA — porte do nó `302:2` (Festas)

   A folha do catálogo (`adicionais.css`) vem antes desta e traz a variante
   clara da navbar, que é a mesma em todas as páginas internas. Aqui fica só o
   que é do molde: a capa, a fila de quatro e os blocos abertos embaixo.

   ELA SERVE TRÊS PÁGINAS desde 08/09/2026: /festas, /recreacao e /oficinas.
   Quando as duas últimas nasceram, a escolha era copiar este arquivo duas vezes
   ou abrir a classe do `body` — e três cópias da mesma folha viram três páginas
   internas diferentes na primeira alteração. `.pagina-servico` é o mesmo molde
   com outro conteúdo, e é por isso que ele entra aqui e não num arquivo novo.

   Como no catálogo, cada número saiu do nó e o nó está no comentário ao lado.
   ========================================================================== */

.pagina-festas,
.pagina-servico{
  --amarelo:#FFFF44;
  --turquesa:#64D8C4;
  --rosa:#E14AE1;
  /* A PALETA É A DO ARQUIVO, como no catálogo: página branca, preto do Norvin
     como chão em volta. */
  --chapa:#F6F6F6;        /* 322:20 */
  --fio:#DBDBDB;          /* 322:26 */
  --tinta:#000000;
  --tinta-2:#575757;      /* 322:23 */

  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;
}

/* o conteúdo começa abaixo da navbar fixa */
.ft{padding:clamp(26px, 4vh, 46px) 0 clamp(20px, 3vh, 40px);padding:clamp(26px, 4svh, 46px) 0 clamp(20px, 3svh, 40px)}
/* ============================================================================
   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.
   ========================================================================== */
.ft{
  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 */
  .ft{
    margin:calc(104 * var(--u)) clamp(8px, 2.4vw, 14px) clamp(10px, 2.6vw, 16px);
    border-radius:clamp(14px, 3.4vw, 22px);
  }
}

/* quem rola ate uma peca precisa limpar a barra fixa: sem isto, ancora e
   rolagem programatica param com o alvo debaixo da navbar */
.ft-bloco,.ft-card,.ft-restante-tit,.ft-capa{
  scroll-margin-top:calc(112 * var(--u) + 16px);
}
.ft > *{max-width:1440px;margin-inline:auto}

/* ---- o topo (322:15 / 322:14 / 322:16 / 336:9) ---- */
.ft-topo{padding:0 clamp(18px, 3.6vw, 52px)}
.ft-cores{display:flex;gap:10px;margin:0}
.ft-cores span{width:clamp(48px,6vw,86px);height:8px;display:block}
.ft-cores span:nth-child(1){background:var(--amarelo)}
.ft-cores span:nth-child(2){background:var(--turquesa)}
.ft-cores span:nth-child(3){background:var(--rosa)}

.ft-titulo{                                  /* 322:15 — 180px, entrelinha .82 */
  margin:clamp(14px,2.2vw,21px) 0 0;
  font-family:"Inter Display","Inter",sans-serif;
  /* 180px NO ARQUIVO, e' 12,5% de um quadro de 1440. O quadro do Figma se
     olha de longe; a tela nao. Num 1366 os mesmos 12,5vw davam 170px — 22% da
     altura da janela para uma palavra so', e era metade da sensacao de zoom.
     8,6vw mantem a palavra monumental e devolve a tela ao conteudo. */
  font-size:clamp(42px, 8.6vw, 126px);
  font-weight:800;line-height:.86;letter-spacing:-.035em;
  text-align:center;
}
/* A RÉGUA VAZIA É SÓ O FIO. As palavras saíram (09/09/2026, pedido do
   cliente): "SORT BY: EXPERIÊNCIA +" e "FORMATOS +" eram controles do template
   de e-commerce que não filtram nem ordenam nada, e metade em inglês. O fio
   fica porque é ele que separa o título da capa. */
.ft-regua-vazia{margin-top:clamp(14px,2.2vw,22px);padding-bottom:0;min-height:0}

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

/* ---- a capa (322:12 / 322:13 / 322:17-19) ----
   1440x590 no arquivo, ou seja 2,44:1. A razão fica; a largura sangra a tela,
   que é o que o `x=0 w=1440` do nó descreve. */
.ft-capa{
  position:relative;max-width:none;
  margin-top:clamp(20px,3vw,40px);
  /* A LARGURA PARA NA DA PROPRIA FOTO. A fonte tem 1040 de largura; sangrando
     a tela ela era esticada em 1,27x e mostrava 25% da altura — faixa fina de
     rosto ampliado. Com o teto na largura natural nao ha ampliacao nenhuma, e
     a razao mais alta (16:9 em vez de 2,44:1) mostra 52% da foto em vez de
     25%. Ela continua sendo faixa, mas uma que cabe no que existe. */
  /* A LARGURA MANDA NO TAMANHO DO ROSTO, e nao a ampliacao. Mesmo em 1,00x,
     uma foto de grupo fechada exibida com 1040 de largura poe cada rosto perto
     do tamanho real. O teto passa a ser tambem uma fracao da janela: a faixa
     encolhe junto com a tela em vez de dominar. */
  width:100%;
  max-width:1040px;          /* a largura da propria fonte: nunca amplia */
  margin-inline:auto;
  aspect-ratio:12 / 5;
  /* A FAIXA TEM TETO DE TELA, e nao so' de razao.

     No arquivo ela tem 590 num quadro de 3730: e' 16% da pagina, e le como
     faixa. Na tela de um notebook de 768 os mesmos 590 viram 73% da altura, e
     ai ela deixa de ser faixa e vira parede — foi o "muito zoom".

     Portar razao fixa sem medir na tela real e' o erro, e ele so' aparece
     abaixo de 1440: por isso o teto sai da ALTURA da janela. 46svh mantem a
     proporcao onde ha espaco e cede onde nao ha. */
  max-height:min(430px, 40vh);
  max-height:min(430px, 40svh);
  overflow:hidden;
}
@media (min-width: 861px){
  /* O TETO POR FRACAO DE TELA E' REGRA DE TELA LARGA. Num monitor a capa em
     1040 poe cada rosto perto do tamanho real, e 64% da janela devolve a faixa
     ao lugar de faixa. No celular a mesma conta dava 205px num 320 — a foto
     sumia no meio do cartao. */
  .ft-capa{max-width:min(1040px, 64vw)}
}
.ft-capa img{width:100%;height:100%;object-fit:cover;display:block}
/* 322:13, o véu: sem ele as três cores no pé somem sobre a foto clara */
.ft-veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 100%);
}
/* 322:17 a 322:19: 56x3 com passo de 70, centradas, a 198 do pé dos 590 */
.ft-capa-cores{
  position:absolute;left:50%;bottom:33.4%;
  transform:translateX(-50%);
  display:flex;gap:14px;margin:0;
}
.ft-capa-cores span{
  width:clamp(34px,3.9vw,56px);height:3px;border-radius:2px;display:block;opacity:.95;
}
.ft-capa-cores span:nth-child(1){background:var(--amarelo)}
.ft-capa-cores span:nth-child(2){background:var(--turquesa)}
.ft-capa-cores span:nth-child(3){background:var(--rosa)}

/* ---- a fila de quatro (322:20 a 322:42) ----
   Quatro cartões de 360x530 sangrando a tela, separados por um fio de 1px.
   O fio é `gap` mais o fundo da fila: assim ele existe entre os cartões e não
   nas pontas, sem um elemento por divisor. */
/* A FILA E' FLEX, E NAO GRADE, POR CAUSA DA ULTIMA FILEIRA (12/09/2026).

   Com `grid-template-columns:repeat(4,1fr)` a fileira incompleta deixava
   celulas vazias, e como o fio desta faixa e' o FUNDO do contentor aparecendo
   pelo `gap`, celula vazia virava um retangulo cinza de verdade: com 18
   oficinas, medido, 10,4% da faixa era buraco pintado.

   Isso nao era problema enquanto a pagina tinha quatro cartoes escritos a mao.
   Passou a ser quando a lista virou conteudo do painel e a cliente pode
   adicionar a decima nona oficina numa terca-feira.

   Em flex com `flex-grow:1`, a ultima fileira estica os cartoes que existem e
   preenche a largura — em qualquer quantidade e em qualquer largura de tela,
   sem a build precisar saber quantas colunas cabem. O conteudo nao distorce
   junto porque ja' tem teto proprio: a foto para em 300px e o texto em 256px,
   os dois centralizados. O cartao estica, o miolo nao. */
.ft-fila{
  max-width:none;
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--fio);
  border-bottom:1px solid var(--fio);
}
.ft-card{
  flex:1 1 calc(25% - 1px);
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto 1fr;
  justify-items:center;
  gap:0;
  padding:50px clamp(14px,2.2vw,32px) 54px;
  background:var(--chapa);
  color:var(--tinta);text-decoration:none;
  transition:background-color .22s ease;
}
.ft-card:hover{background:#F0F0F0}
.ft-card:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.ft-card-num{                                /* 322:21 — 13px Extra Bold */
  font-family:"Inter Display","Inter",sans-serif;
  font-size:13px;font-weight:800;line-height:1.12;
  font-feature-settings:"tnum" 1;
}
.ft-card-tit{                                /* 322:22 — 17px Extra Bold */
  margin-top:24px;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:17px;font-weight:800;line-height:1.12;text-align:center;
}
.ft-card-txt{                                /* 322:23 — 12px, #575757 */
  margin-top:14px;
  max-width:256px;
  font-size:12px;line-height:1.45;color:var(--tinta-2);text-align:center;
  text-wrap:pretty;
}
.ft-card-foto{                               /* 322:24 — 320x220 */
  align-self:end;margin-top:24px;
  /* mesmo motivo da cena: a largura para na da fonte mais estreita (324) para
     o cartao nao esticar o que nao tem */
  width:100%;max-width:300px;
  aspect-ratio:4 / 3;overflow:hidden;background:#E8E8E8;display:block;
}
.ft-card-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- o restante (322:43 a 322:47) ---- */
.ft-restante{padding:0 clamp(18px, 3.6vw, 52px)}
.ft-restante-tit{                            /* 322:46 — 54px Extra Bold */
  margin:clamp(48px,7vw,112px) auto 0;
  max-width:840px;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:clamp(28px,3.8vw,54px);
  font-weight:800;line-height:1.05;letter-spacing:-.028em;
  text-align:center;text-wrap:balance;
}
.ft-restante-sub{                            /* 322:47 — 12px, #575757 */
  margin:clamp(14px,1.6vw,22px) auto 0;
  max-width:660px;
  font-size:clamp(12px,1vw,14px);line-height:1.5;
  color:var(--tinta-2);text-align:center;text-wrap:pretty;
}

/* ---- o bloco de festa (322:48 a 322:60) ----
   Lado de 320 e cena de 974, com 42 entre eles — os números do nó. O filete de
   acento tem 6 e é a cor que identifica a festa. */
.ft-bloco{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:42px;
  margin-top:clamp(34px,4.6vw,70px);
  padding-bottom:clamp(28px,3.4vw,40px);
  border-bottom:1px solid var(--fio);
}
.ft-bloco[data-cor="amarelo"] {--cor:var(--amarelo)}
.ft-bloco[data-cor="turquesa"]{--cor:var(--turquesa)}
.ft-bloco[data-cor="rosa"]    {--cor:var(--rosa)}

.ft-lado{
  position:relative;
  display:flex;flex-direction:column;
  padding:34px 34px 34px 40px;
  background:var(--chapa);
}
.ft-lado::before{                            /* 322:49 — filete de 6 */
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--cor, var(--amarelo));opacity:.95;
}
.ft-num{                                     /* 322:50 — 13px */
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:13px;font-weight:800;line-height:1.12;
  font-feature-settings:"tnum" 1;
}
.ft-tit{                                     /* 322:51 — 18px */
  margin:24px 0 0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:18px;font-weight:800;line-height:1.12;
}
.ft-tag{                                     /* 322:52 — 10px Bold */
  margin:14px 0 0;
  font-size:10px;font-weight:700;line-height:1.12;letter-spacing:.08em;
}
.ft-desc{                                    /* 322:53 — 12px, #575757 */
  margin:22px 0 0;
  font-size:12px;line-height:1.5;color:var(--tinta-2);text-wrap:pretty;
}
/* NO LUGAR DO "EDITAVEL ADMIN". O nó `322:54` é branco sobre branco: anotação
   de que o bloco sai do painel, não peça de interface. Aqui entra o pedido de
   verdade, que é o que a página precisa naquele ponto. */
.ft-pedir{
  margin-top:auto;align-self:start;
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 18px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#FFFFFF;background:var(--tinta);text-decoration:none;
  transition:transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease;
}
.ft-pedir:hover{background:#242424;transform:translateY(-1px)}
.ft-pedir:active{transform:translateY(1px)}
.ft-pedir:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

/* a cena (322:56) com a legenda pousada nela (322:57 a 322:59)

   A FOTO SE AFASTA DA BORDA. No arquivo ela e' uma faixa de 974x390 colada no
   bloco; com fontes de 324 a 704 de largura isso dava 2,4x a 2,6x de
   ampliacao. Agora ela mora numa chapa, com respiro em volta, e a largura para
   em 460: o pior caso cai para 1,42x e a foto passa a mostrar 56% da altura em
   vez de 30%. Menos pixel pedido para a mesma fonte e' mais densidade.

   A razao tambem sobe de 2,5:1 para 4:3, que e' o que essas fotos SAO — todas
   em pe' ou quadradas. Enfiar retrato em faixa panoramica e' o que obrigava o
   corte de 70% da imagem. */
.ft-cena{
  margin:0;
  display:grid;place-items:center;
  padding:clamp(20px, 2.4vw, 34px);
  background:var(--chapa);
}
.ft-cena-quadro{
  position:relative;
  /* UM TAMANHO SO' PARA AS QUATRO. Cheguei a fazer cada uma parar na largura
     do proprio arquivo, e o resultado foram quatro quadros de tamanhos
     diferentes na mesma fila — pior que a ampliacao que eu queria evitar.
     400 e' o maior quadro que a menor fonte do projeto (Pokemon, 324 quadrada)
     ainda preenche sem estufar: 1,23x. Guerra Nerf, 1,12x. As outras duas
     encolhem. Contra os 2,64x do arquivo original, isso e' pixel de sobra. */
  width:100%;max-width:400px;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#E8E8E8;
}
.ft-cena img{width:100%;height:100%;object-fit:cover;display:block}
.ft-cena-quadro figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px clamp(18px,2.6vw,40px);
  background:rgba(255,255,255,.84);   /* 322:57 */
  backdrop-filter:blur(3px);
}
.ft-cena-quadro figcaption b{
  display:block;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:17px;font-weight:800;line-height:1.12;
}
.ft-cena-quadro figcaption span{
  display:block;margin-top:8px;
  font-size:12px;line-height:1.12;color:var(--tinta-2);
}

/* ============================================================================
   CELULAR

   A fila de quatro vira duas colunas e o bloco de festa empilha — mas a cena
   fica EM CIMA do texto, e não embaixo: é a fotografia que diz do que a festa
   se trata, e num celular ela precisa chegar antes da descrição.
   ========================================================================== */
@media (max-width: 900px){
  .ft-card{flex-basis:calc(50% - 1px)}
  .ft-card{padding:26px 16px 28px}
  .ft-card-tit{margin-top:16px;font-size:clamp(14px,4vw,17px)}
  .ft-card-txt{margin-top:10px;font-size:clamp(11px,3.2vw,12px)}
  .ft-card-foto{margin-top:18px}

  .ft-bloco{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .ft-cena{order:-1}
  .ft-lado{padding:22px 22px 22px 26px}
  .ft-lado::before{width:5px}
  .ft-tit{margin-top:16px;font-size:clamp(16px,4.6vw,18px)}
  .ft-desc{margin-top:14px;font-size:clamp(12px,3.4vw,13px)}
  .ft-pedir{margin-top:20px}
  .ft-cena-quadro figcaption{padding:12px 14px}
  .ft-cena-quadro figcaption b{font-size:clamp(14px,4vw,17px)}
  .ft-cena-quadro figcaption span{font-size:clamp(10.5px,3vw,12px)}
}
@media (max-width: 560px){
  /* uma coluna só quando duas passariam a quebrar o nome da festa */
  .ft-card-txt{display:none}
  .ft-card{padding:20px 12px 22px}
}

@media (prefers-reduced-motion: reduce){
  .ft-card,.ft-pedir{transition:none}
  .ft-pedir:hover{transform:none}
}