/* ============================================================
   CORPO COLETIVO ARTÍSTICO — folha de estilo partilhada
   ------------------------------------------------------------
   Ficheiro único para os valores que se repetem em todo o site.
   Alterar aqui muda TODAS as páginas de uma vez.

   NOTA: as posições e tamanhos (left/top/width/height) NÃO estão
   aqui — vêm do Figma, a pixel, dentro de cada página. Só cores,
   tipos de letra e tempos de animação é que são partilhados.
   ============================================================ */

:root {

  /* ---------- CORES DA MARCA ----------
     Mudar um destes valores muda a cor em todo o site. */

  --cc-laranja:         rgb(194,87,15);   /* cor principal — títulos, links, destaques */
  --cc-laranja-escuro:  rgb(93,38,2);     /* hover dos links, gradientes escuros */
  --cc-ambar:           rgb(253,170,53);  /* botões da Escola de Dança */
  --cc-verde:           rgb(122,128,77);  /* botões das Criações */
  --cc-verde-escuro:    rgb(107,113,93);
  --cc-castanho:        rgb(59,41,31);
  --cc-creme:           rgb(255,246,240); /* fundo do pop-up geral */

  /* ---------- TONS DE TEXTO ----------
     Do mais escuro para o mais claro. */

  --cc-texto-escuro:    rgb(16,16,16);
  --cc-texto-forte:     rgb(29,29,29);
  --cc-cinza-medio:     rgb(45,45,45);
  --cc-texto:           rgb(42,42,42);    /* texto corrente */
  --cc-cinza:           rgb(112,112,112); /* texto secundário, legendas */

  /* ---------- TEMPOS DE ANIMAÇÃO ----------
     Aumentar = mais lento e suave. Diminuir = mais seco e rápido. */

  --cc-rapido:          .22s;   /* dropdown do menu */
  --cc-medio:           .25s;   /* hover dos links do menu */
  --cc-botao:           .28s;   /* botões a subir no hover */
  --cc-lento:           .35s;   /* letter-spacing do menu da home */

  /* ---------- HOVER DO MENU ----------
     A designer comparou o menu do topo com a barra flutuante e disse
     que o comportamento certo e o da barra. Estavam diferentes: o do
     topo abria em .7s com uma curva de arranque lento, a barra em
     .45s com a curva das revelacoes. Aqui ficam iguais.

     A curva aponta para --cc-suave-curva em vez de repetir o valor,
     porque e essa mesma que o .cc-mf-item usa: assim os dois menus
     ficam amarrados um ao outro e nunca mais divergem sozinhos. */
  /* O espaco entre letras no hover, igual nos DOIS menus e igual nas
     seis palavras. A Ana preferiu um numero unico a poder afinar, em
     vez dos seis valores por palavra que vinham do Figma. E este o
     unico sitio a mexer para as letras se afastarem mais ou menos. */
  --cc-menu-abertura:   1.7px;
  --cc-menu-duracao:    .45s;
  --cc-menu-curva:      var(--cc-suave-curva);
  --cc-muito-lento:     .5s;    /* carrosséis, trocas de imagem */

  /* Curva de aceleração usada em quase todo o site. */
  --cc-curva:           cubic-bezier(.22,.61,.36,1);

  /* ---------- TRANSIÇÃO ENTRE PÁGINAS ---------- */
  --cc-pagina-sai:      .22s;
  --cc-pagina-entra:    .34s;

  /* ---------- APARECIMENTO SUAVE AO ROLAR ----------
     É AQUI que se afina a "suavidade" pedida pela designer.
     Só isto — não é preciso tocar no JavaScript.

     Estes valores foram tirados do site-modelo que ela indicou
     (fixaplan.com, feito em Framer): lá as revelações de conteúdo
     usam duração 0.6s–1.0s, curva [0.12, 0.23, 0.5, 1] e uma
     distância de 35px. */

  --cc-suave-duracao:   .9s;    /* mais alto = mais lento e suave */
  --cc-suave-subida:    35px;   /* de quanto sobe ao aparecer; 0 = só fade */

  /* Curva própria da revelação: arranca depressa e assenta devagar.
     É daqui que vem a sensação de "suave" do modelo.
     Propositadamente separada de --cc-curva, que controla os
     hovers dos botões e não deve mudar. */
  --cc-suave-curva:     cubic-bezier(.12, .23, .5, 1);

  /* ---------- ENTRADA DOS POP-UPS ----------
     É aqui que se afina a "graça" com que o modal aparece.
     Usa a mesma curva das revelações, para o site todo falar
     a mesma língua. */

  --cc-modal-entrada:   .58s;   /* a abrir: mais alto = mais suave */
  --cc-modal-saida:     .3s;    /* a fechar: de propósito mais seco */
  --cc-modal-subida:    22px;   /* de quanto sobe ao entrar */
  --cc-modal-escala:    .955;   /* de que tamanho parte; 1 = sem zoom */
  --cc-modal-desfoque:  10px;   /* desfoque da página por trás; 0 = nenhum */
  --cc-modal-fundo:     rgba(24, 16, 10, .72);

  /* ---------- VÉU SOBRE O VÍDEO DO HERO ----------
     O degradê da marca fica por cima do vídeo hero-home.mp4.
     Esta é a única coisa a mexer para decidir quanto do vídeo
     se vê:  1 = degradê cheio, vídeo invisível (como era antes)
             0 = só o vídeo, sem cor da marca nem legibilidade */
  --cc-hero-veu:        .6;
}

/* ============================================================
   TRANSIÇÕES ENTRE PÁGINAS
   ------------------------------------------------------------
   Faz o site navegar com um fade suave em vez do "salto" branco
   habitual. Em browsers que ainda não suportam, a navegação
   acontece normalmente, sem nada partido.

   IMPORTANTE: só funciona com o site servido por http(s).
   Se abrires os ficheiros com duplo-clique (file://), a
   navegação funciona mas sem o fade.
   ============================================================ */

@view-transition {
  navigation: auto;
}

@keyframes ccPaginaSai {
  to { opacity: 0; }
}

@keyframes ccPaginaEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

::view-transition-old(root) {
  animation: ccPaginaSai var(--cc-pagina-sai) ease both;
}

::view-transition-new(root) {
  animation: ccPaginaEntra var(--cc-pagina-entra) var(--cc-curva) both;
}

/* Quem tem "reduzir movimento" ligado no sistema não leva animação. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms;
  }
}

/* ============================================================
   APARECIMENTO SUAVE AO ROLAR
   ------------------------------------------------------------
   Títulos de secção, cards e texto sobem um pouco e aparecem
   quando entram no ecrã. Controlado por js/suave.js.

   A classe .cc-suave é posta no <html> pelo JavaScript. Se o JS
   não correr, a classe nunca aparece e o conteúdo fica visível
   normalmente — nada se perde.

   O !important é preciso porque o runtime do Claude Design
   escreve opacity/transform em style inline nestes elementos.

   ATENÇÃO: só usar data-reveal em elementos que NÃO tenham um
   transform próprio, senão este é sobreposto. Na home os 17
   elementos marcados foram todos verificados.
   ============================================================ */

html.cc-suave [data-reveal] {
  opacity: 0 !important;
  transform: translateY(var(--cc-suave-subida)) !important;
  transition: opacity var(--cc-suave-duracao) var(--cc-suave-curva),
              transform var(--cc-suave-duracao) var(--cc-suave-curva);
  will-change: opacity, transform;
}

html.cc-suave [data-reveal].cc-visivel {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* Rolagem suave ao saltar para uma secção pelo menu.

   O :not(.lenis) é essencial: quando o Lenis está a correr, ele
   põe a classe .lenis no <html> e passa a controlar o scroll.
   Ter scroll-behavior:smooth ao mesmo tempo faz os dois lutarem
   e o scroll fica aos solavancos. Isto é só o caso de reserva
   para quando o Lenis não arranca (ex.: "reduzir movimento"). */
html:not(.lenis) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html, html:not(.lenis) { scroll-behavior: auto; }
  /* Quem pediu menos movimento não leva vídeo a correr: fica o
     poster, que é o mesmo degradê de sempre. O JavaScript em
     js/hero-video.js trata de o pausar. */
  #ccHeroVideo { opacity: 1; }
  html.cc-suave [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ============================================================
   MENU — O HOVER ABRE AS LETRAS A PARTIR DO CENTRO
   ------------------------------------------------------------
   Ao passar o rato, as letras de cada item afastam-se. Os itens
   estão em posição absoluta, por isso o texto crescia todo para a
   direita e ia encostar ao item seguinte — e no "Comunidade"
   passava por cima do chevron.

   A margem negativa devolve metade do que o espaçamento acrescenta
   (espaçamento × nº de letras ÷ 2), deslocando o item meia largura
   para a esquerda. Resultado: cresce meia para cada lado, a partir
   do centro, e nada à volta é tocado.

   Cada item traz --espaco e --letras no seu próprio style, porque
   os valores foram afinados um a um no Figma e são diferentes.
   ============================================================ */

/* O !important nao e capricho: cada item traz no seu style inline
   um "transition: letter-spacing ..." escrito pelo gerador, e estilo
   inline ganha de folha externa. Sem isto, as letras abriam com
   transicao mas o transform que centra a palavra saltava de uma vez
   — era isso que parecia partido. */
nav [data-menu-item] {
  transition: letter-spacing var(--cc-menu-duracao) var(--cc-menu-curva),
              transform      var(--cc-menu-duracao) var(--cc-menu-curva) !important;
}

/* Porque (letras - 1) e nao (letras):
   o letter-spacing acrescenta espaco DEPOIS de cada letra, incluindo
   a ultima. Esse ultimo espaco fica no fim da palavra e nao se ve.
   O que cresce a olho e o espaco entre letras, que sao (n-1). Contar
   n deslocava a palavra meia unidade a mais para a esquerda, e o
   centro fugia em vez de ficar quieto. */
nav [data-menu-item]:hover {
  /* O !important e preciso: cada item traz do gerador um
     style-hover="letter-spacing:0.NNem" que vira estilo inline, e
     inline ganha a folha externa. Sem isto o valor unico nao pegava. */
  letter-spacing: var(--cc-menu-abertura) !important;
  transform: translateX(calc(-1 * var(--cc-menu-abertura) * (var(--letras) - 1) / 2));
}

/* O chevron acompanha o "Comunidade" a abrir-se: como este cresce
   a partir do centro, só transborda para a direita metade do que
   cresce — 0.14em × 10 letras ÷ 2 = 0.7em, que a 22px dá ~15px. */
nav a[aria-haspopup] + svg,
nav a[aria-haspopup] ~ svg {
  transition: transform var(--cc-menu-duracao) var(--cc-menu-curva);
}

nav a[aria-haspopup]:hover + svg,
nav a[aria-haspopup]:hover ~ svg {
  /* O 5 e "Comunidade" x meia palavra: 10 letras a dividir por 2. Fica
     em calc para a seta acompanhar sozinha se a abertura mudar. O
     --letras nao serve aqui porque a seta e irma do link, e as
     variaveis so descem para os filhos.

     O rotate(180deg) e o mesmo da barra flutuante (.cc-mf-seta): a
     seta vira para cima enquanto o submenu esta aberto. Aqui so
     deslizava, e ficavam dois gestos diferentes para a mesma coisa no
     mesmo site. */
  transform: translateX(calc(var(--cc-menu-abertura) * 5)) rotate(180deg);
}

nav a[aria-haspopup]:hover + svg {
  transform: translateX(31px) rotate(180deg);
}

/* E A SETA RODA COM O INVOLUCRO, NAO SO COM O LINK
   O submenu abre ao passar o rato no invólucro inteiro — 198x189 — e o
   link "Comunidade" ocupa 110x22 disso. Com as regras acima, em quase
   toda essa área o painel abria e a seta ficava quieta. A barra
   flutuante nunca teve esse problema porque lá o hover é do invólucro
   (.cc-mf-drop). Aqui fica igual. */
div:has(> a[aria-haspopup]):hover > svg {
  transform: translateX(31px) rotate(180deg);
}

/* ============================================================
   SANFONA ("Ler mais")
   ------------------------------------------------------------
   Controlada por js/sanfona.js, que só liga e desliga a classe.

   PORQUE É UMA GRELHA E NÃO UM max-height
   O truque habitual — animar max-height de 0 até um valor grande —
   obriga a adivinhar a altura máxima. O texto que passar disso fica
   cortado, e a animação chega ao fim antes do conteúdo, porque anda
   até um valor que ninguém atinge.

   Uma grelha de uma linha resolve os dois problemas: 0fr até 1fr é
   animável, e 1fr é exactamente a altura do conteúdo, seja ela qual
   for. Abre suave do princípio ao fim e nunca corta nada.

   O sanfona.js envolve sozinho o conteúdo de cada bloco num
   .cc-sanfona-interior — é esse overflow:hidden que permite à grelha
   encolher. Não é preciso escrevê-lo no HTML de cada página.

   Se um bloco não puder ser grelha (por exemplo, um contentor de
   coisas em posição absoluta), marca-se com data-sanfona-simples.

   NOTA DE UM ERRO MEU, PARA NÃO SE REPETIR
   Durante muito tempo estava aqui escrito que o runtime do Claude
   Design cancelava as transições e que por isso a sanfona tinha de
   abrir de repente. Era falso. O que acontecia é que eu media com
   o Chrome em --virtual-time-budget, que congela as transições:
   numa página nua, sem runtime nenhum, dava o mesmo resultado. As
   transições sempre funcionaram. Medir com tempo a sério (ver
   scratchpad/medir.js, pelo protocolo DevTools) mostra-as a correr.

   O !important é preciso para vencer o max-height:0 que o Claude
   Design escreveu no style inline de alguns destes blocos.
   ============================================================ */

[data-sanfona-alvo]:not([data-sanfona-simples]) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cc-suave-duracao) var(--cc-suave-curva);
  max-height: none !important;
  overflow: hidden;
}

[data-sanfona-alvo]:not([data-sanfona-simples]).cc-sanfona-aberta {
  grid-template-rows: 1fr;
  max-height: none !important;
}

/* A camada que corta. Não pode levar padding nem margem: são a caixa
   e não o conteúdo, e não encolhem com a linha da grelha — media-se o
   bloco fechado a ficar mais alto do que devia. Espaçamentos vão para
   dentro, no conteúdo. */
.cc-sanfona-interior {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  [data-sanfona-alvo] { transition-duration: .01ms !important; }
}

/* A seta a apontar para cima quando o bloco está aberto.

   Vai por CSS, a partir do aria-expanded que o sanfona.js escreve no
   botão, e não por style inline: o runtime do Claude Design mexe nos
   atributos style e a rotação não chegava a aparecer.

   A duração e a curva vêm daqui e não do style inline que o Claude
   Design escreveu (.3s ease), para a seta rodar ao mesmo ritmo a que
   o bloco abre. */
[data-sanfona] [data-sanfona-seta] {
  transition: transform var(--cc-suave-duracao) var(--cc-suave-curva) !important;
}

[data-sanfona][aria-expanded="true"] [data-sanfona-seta] {
  transform: rotate(180deg) !important;
}

/* ============================================================
   POP-UPS (BIO / GERAL / TIMELINE)
   ------------------------------------------------------------
   O conteúdo dos pop-ups está em partes/popups.html e é
   controlado por js/popups.js.
   ============================================================ */

.cc-popup-fundo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  /* SEM align-items de propósito. Com o valor por omissão (stretch)
     e margin:auto no painel, o pop-up fica centrado quando cabe e
     encostado ao topo — sem cortar nada — quando é mais alto que o
     ecrã. Pôr align-items:flex-start anulava o margin:auto e o
     pop-up ficava sempre colado ao cimo; align-items:center corta
     o topo dos pop-ups altos. */
  justify-content: center;
  padding: 48px 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* O fundo e o painel animam SEPARADAMENTE, de propósito.
     Antes fazia-se um simples fade de opacidade no conjunto todo,
     e ficava sem graça: o modal só "aparecia". Assim o escuro e o
     desfoque entram primeiro, e o painel sobe logo a seguir. */
  background: rgba(24, 16, 10, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background var(--cc-modal-saida) ease,
              -webkit-backdrop-filter var(--cc-modal-saida) ease,
              backdrop-filter var(--cc-modal-saida) ease;
}

@media (max-width: 700px) {
  .cc-popup-fundo { padding: 16px 0; }
}

/* Sem isto o display:flex venceria o atributo hidden. */
.cc-popup-fundo[hidden] { display: none; }

.cc-popup-fundo.cc-aberto {
  background: var(--cc-modal-fundo);
  -webkit-backdrop-filter: blur(var(--cc-modal-desfoque));
  backdrop-filter: blur(var(--cc-modal-desfoque));
  transition-duration: var(--cc-modal-entrada);
}

.cc-popup-painel {
  position: relative;
  /* margin auto nos quatro lados: centra vertical e horizontalmente
     quando há espaço, sem cortar nada quando não há. */
  margin: auto;
  /* O mesmo tipo de letra e cor que o contentor das páginas.
     Sem isto os pop-ups herdavam a fonte do <body> e saíam serifados,
     porque passam a viver fora do contentor <x-dc> da página. */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--cc-texto-escuro, rgb(16,16,16));

  /* Estado de partida: um pouco abaixo, um pouco menor, invisível.
     O transform vive AQUI e não no pop-up: o pop-up já usa o seu
     próprio transform para a escala que o faz caber no ecrã, e os
     dois não podem partilhar a mesma propriedade. */
  opacity: 0;
  transform: translateY(var(--cc-modal-subida)) scale(var(--cc-modal-escala));
  transition: opacity var(--cc-modal-saida) var(--cc-suave-curva),
              transform var(--cc-modal-saida) var(--cc-suave-curva);
  will-change: opacity, transform;
}

.cc-popup-fundo.cc-aberto .cc-popup-painel {
  opacity: 1;
  transform: none;
  transition-duration: var(--cc-modal-entrada);
  /* Ligeiro atraso para o escuro entrar primeiro e o painel seguir. */
  transition-delay: .06s;
}

/* O transform destes é gerido pelo JS (escala para caber no ecrã),
   por isso não leva transition — senão a abertura ficava a saltar. */
.cc-popup-painel > [data-cc-popup] {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .cc-popup-fundo,
  .cc-popup-painel { transition-duration: .01ms; }
  .cc-popup-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cc-popup-painel { transform: none; }
}

/* ============================================================
   MENU FIXO (barra flutuante que aparece ao rolar)
   ------------------------------------------------------------
   Construído por js/menu-fixo.js, em document.body — fora da
   tela de 1920px que o JavaScript encolhe. Por isso as medidas
   aqui são em pixeis de ecrã, não da tela do Figma.

   É AQUI que se afina o aspecto da barra.
   ============================================================ */

:root {
  --cc-mf-largura:  1200px;  /* largura máxima da barra */
  --cc-mf-topo:     18px;    /* distância ao topo do ecrã */
  --cc-mf-raio:     26px;    /* arredondamento dos cantos */
  --cc-mf-altura:   84px;

  /* Estes quatro estavam escritos à mão dentro das regras. Subiram para
     aqui a pedido da designer, que queria a barra a respirar mais por
     dentro e as categorias mais afastadas, com o logo mais pequeno e
     sem tanto vão vazio ao lado dele.

     Como a barra tem largura fixa, o que cresce no respiro e nos
     intervalos sai justamente do vão ao lado do logo — que era o que
     ela queria ver diminuir. Em números, na barra de 1200px o vão de
     cada lado passa de 127px para ~90px. */
  --cc-mf-respiro:  56px;    /* era 42 — folga entre a borda e as palavras */
  --cc-mf-gap:      54px;    /* era 38 — espaço entre categorias */
  --cc-mf-logo-l:  100px;    /* era 118 */
  --cc-mf-logo-a:   59px;    /* era 70  */

}

/* Abaixo dos 1150px a barra deixa de ter 1200px e passa a 100vw-48px.
   Medido antes de mexer: a 1024px o vão ao lado do logo já era de
   apenas 24px. Com o respiro e o intervalo generosos ia a negativo, e
   as palavras encostavam ao logo. Aqui voltam aos valores antigos.

   O logo mais pequeno fica em todas as larguras — só liberta espaço.
   Por causa dele, a 1024px o vão passa a ~33px, melhor do que era. */
@media (max-width: 1150px) {
  :root {
    --cc-mf-respiro: 42px;
    --cc-mf-gap:     38px;
  }
}

.cc-mf {
  position: fixed;
  top: var(--cc-mf-topo);
  left: 50%;
  z-index: 900;             /* abaixo dos pop-ups (9999) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--cc-mf-largura), calc(100vw - 48px));
  height: var(--cc-mf-altura);
  padding: 0 var(--cc-mf-respiro);
  box-sizing: border-box;
  border-radius: var(--cc-mf-raio);
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .05);

  /* estado escondido: fora do ecrã, por cima */
  transform: translate(-50%, calc(-100% - var(--cc-mf-topo)));
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--cc-suave-curva),
              opacity .35s var(--cc-suave-curva);
}

.cc-mf-visivel {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.cc-mf-lado {
  display: flex;
  align-items: center;
  gap: var(--cc-mf-gap);
}

.cc-mf-item {
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  color: var(--cc-texto-escuro, rgb(16, 16, 16));
  text-decoration: none;
  letter-spacing: 0;
  /* o mesmo tempo e a mesma curva do menu da página */
  transition: letter-spacing .45s var(--cc-suave-curva),
              margin        .45s var(--cc-suave-curva);
}

/* ATENCAO, comentario corrigido: dizia aqui que nao havia mudanca de
   cor. Ha. A propria pagina traz no seu <style> uma regra generica
   "a:hover { color: var(--cc-laranja-escuro) }", e ela apanha estes
   itens, que sao <a>. No menu do topo isso nao acontece porque cada
   item leva a cor no style inline, e inline ganha. Resultado: a barra
   escurece para laranja ao passar o rato e o menu do topo nao. Fica
   por decidir com a designer qual dos dois e o certo.

   No menu da página os itens estão em posição absoluta, por isso podem
   crescer à vontade. Aqui a barra é flex: se um item cresce, empurra os
   seguintes e o menu inteiro salta. As margens negativas devolvem
   exactamente a largura que o espaçamento acrescentou
   (espaçamento × nº de letras), metade de cada lado, para que as letras
   se abram a partir do centro e nada à volta se mexa. */
/* AQUI a barra deixa de usar o --espaco de cada palavra e passa a um
   espacamento unico, a pedido da Ana, que queria um numero so para
   controlar o quanto as letras se afastam.

   O que se perde, e foi uma escolha informada: no Figma cada palavra
   tinha o seu valor para que TODAS abrissem mais ou menos o mesmo
   tanto. Com um valor unico, o "Escola Danca Leiria" (19 letras) abre
   quase o dobro do "Criacoes" (8), porque o espacamento conta por
   letra. O menu do topo da pagina continua com os valores do Figma.

   As margens negativas usam o mesmo valor, senao a compensacao deixa
   de bater certo e a barra salta ao passar o rato. */
.cc-mf-item:hover {
  letter-spacing: var(--cc-menu-abertura);
  margin-left:  calc(-1 * var(--cc-menu-abertura) * var(--letras) / 2);
  margin-right: calc(-1 * var(--cc-menu-abertura) * var(--letras) / 2);
}

.cc-mf-logo {
  flex: 0 0 auto;
  width: var(--cc-mf-logo-l);
  height: var(--cc-mf-logo-a);
  background: url(../img/comum/logo-preto.png) center / contain no-repeat;
}

/* ---------- submenu da Comunidade ---------- */

.cc-mf-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-mf-seta {
  display: flex;
  color: var(--cc-texto-escuro, rgb(16, 16, 16));
  transition: transform .45s var(--cc-suave-curva);
}

.cc-mf-seta svg { width: 14px; height: 9px; display: block; }

/* O chevron acompanha as letras a afastarem-se. Como "Comunidade" se abre
   a partir do centro (ver as margens acima), só transborda para a direita
   metade do que cresce: 0.14em × 10 letras ÷ 2 = 0.7em ≈ 14px. */
.cc-mf-drop:hover .cc-mf-seta { transform: translateX(calc(var(--cc-menu-abertura) * 5)) rotate(180deg); }

.cc-mf-painel {
  position: absolute;
  top: calc(100% + 18px);
  left: -14px;
  width: 169px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cc-rapido) ease,
              transform var(--cc-rapido) ease,
              visibility var(--cc-rapido);
}

.cc-mf-drop:hover .cc-mf-painel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cc-mf-painel a {
  display: block;
  padding: 12px 0;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: var(--cc-texto, rgb(42, 42, 42));
  transition: background .25s ease, color .25s ease;
}

.cc-mf-painel a + a { border-top: .5px solid var(--cc-texto, rgb(42, 42, 42)); }

.cc-mf-painel a:hover {
  background: var(--cc-laranja, rgb(194, 87, 15));
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cc-mf, .cc-mf-item, .cc-mf-seta, .cc-mf-painel { transition-duration: .01ms; }
}

/* ============================================================
   ESCOLA DE DANÇA — CARTÕES DAS MODALIDADES (sanfona)
   ------------------------------------------------------------
   Os cartões estão em fluxo normal dentro de #dlCartoes, ao
   contrário do resto da página, que é toda em coordenadas
   absolutas. É isso que faz os cartões seguintes descerem
   quando um abre. O que vem depois na página é empurrado por
   js/escola-sanfona.js.

   Fechado, o cartão mede exactamente os mesmos 231px do Figma.
   ============================================================ */

/* Um cartao fechado mede exactamente os 231px do Figma. */
.cc-dl-cartao {
  position: relative;
  width: 1560px;
  min-height: 231px;
  margin-bottom: 5px;
  border-radius: 15px;
  background: rgb(255, 247, 237);
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.09);
  /* garante que nada transborda do cartão, aberto ou fechado */
  overflow: hidden;
}

/* O BOTÃO "LER MAIS" VAI ANCORADO AO FUNDO, NÃO AO TOPO

   Assim desce sozinho à medida que o cartão cresce, e o texto abre
   POR CIMA dele — como no cartão da Iniciação à Dança, que a
   designer desenhou com o botão em baixo.

   Os 30px não são escolha minha, saem do Figma: o cartão fechado
   mede 231px e o botão está a top:153 com 48 de altura, ou seja, a
   231 − 153 − 48 = 30px do fundo. Na Iniciação dá 1091 − 1012 − 48
   = 31px. Ancorado ao fundo, o cartão fechado fica exactamente onde
   estava e o aberto fica como a designer o desenhou.

   O !important é preciso: o top:153px vem no style inline. */
.cc-dl-cartao > [data-sanfona] {
  top: auto !important;
  bottom: 30px;
}

/* O texto que abre nos sete cartoes.
   A grelha que o anima vem da regra partilhada [data-sanfona-alvo].
   Aqui fica so a caixa. O padding de cima reserva o espaco do titulo
   e do publico, e sao os mesmos 183.869px a que o texto comeca no
   cartao da Iniciacao (292.981 − 109.112). */
.cc-dl-texto {
  box-sizing: content-box;
  width: 1160px;
  margin: 0 200px;
  padding: 183.869px 0 0;
}

/* Duas colunas, como no exemplo da designer em "Iniciação à Dança".

   O espaço em baixo vive aqui, e não na camada que corta, senão o
   cartão fechado ficaria mais alto do que os 231px do Figma.

   Sem padding em baixo: quem reserva agora o lugar do botão é a
   margem inferior da fotografia, que vem a seguir. */
.cc-dl-texto-colunas {
  column-count: 2;
  column-gap: 20px;
  padding-bottom: 0;
  font-size: 22px;
  line-height: 1.32;
  color: var(--cc-texto, rgb(42, 42, 42));
  text-wrap: pretty;
}

/* Sem break-inside:avoid-column de propósito. Havia, e os textos que
   são um único parágrafo (Contemporânea, Jazz, Pilates) ficavam todos
   espremidos na coluna da esquerda com a da direita vazia. Assim o
   texto corre de uma coluna para a outra, como num jornal. */
.cc-dl-texto-colunas p { margin: 0 0 18px; }
.cc-dl-texto-colunas p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   O CARTÃO DA INICIAÇÃO À DANÇA

   Este é o único que a designer desenhou já aberto, com as duas
   fotografias a sangrar para fora do painel bege. Por isso não
   foi convertido para fluxo normal como os outros sete: ficou
   exactamente nas coordenadas do Figma, e o que se anima é a
   altura do painel, a posição do botão e a opacidade do que
   desaparece. Aberto, é pixel a pixel o que a designer desenhou.

   Fechado, fica igual aos outros: painel de 231px, com o título,
   o público e o botão nas mesmas alturas relativas.
   ------------------------------------------------------------ */

/* O contentor faz de "painel" para o sanfona.js, mas não pode levar
   o max-height:0 da regra partilhada — quem encolhe aqui é o painel
   bege lá dentro. */
.cc-ini[data-sanfona-alvo] {
  display: block;
  max-height: none !important;
  overflow: visible;
}

.cc-ini-painel {
  transition: height var(--cc-suave-duracao) var(--cc-suave-curva);
}

/* O !important é indispensável: a altura de 1091px do painel vem no
   style inline, escrito pelo Claude Design, e o style inline ganha a
   qualquer regra normal. Aberto fica com a altura do Figma; fechado,
   com os mesmos 231px dos outros cartões. */
.cc-ini:not(.cc-sanfona-aberta) .cc-ini-painel {
  height: 231px !important;
}

/* O botão acompanha o fundo do painel ao subir.
   1121.112 = 109.112 (topo do painel) + 1012
    262.112 = 109.112 + 153, o mesmo 153 dos outros cartões. */
.cc-ini-botao {
  transition: top var(--cc-suave-duracao) var(--cc-suave-curva);
}

.cc-ini:not(.cc-sanfona-aberta) .cc-ini-botao {
  top: 262.112px !important;
}

/* Fotografias e texto desaparecem ao fechar. O visibility entra
   só no fim, para o texto não ficar seleccionável depois de sumir. */
.cc-ini-foto, .cc-ini-texto {
  transition: opacity var(--cc-suave-duracao) var(--cc-suave-curva),
              visibility 0s;
}

/* As duas últimas linhas não são repetição. As fotografias também
   estão marcadas com data-reveal, e a regra do aparecimento suave
   (html.cc-suave [data-reveal].cc-visivel) é mais específica do que
   um :not() sozinho — media-se: a fotografia ficava visível com o
   cartão fechado. Com html.cc-suave à frente, esta ganha. */
.cc-ini:not(.cc-sanfona-aberta) .cc-ini-foto,
.cc-ini:not(.cc-sanfona-aberta) .cc-ini-texto,
html.cc-suave .cc-ini:not(.cc-sanfona-aberta) .cc-ini-foto,
html.cc-suave .cc-ini:not(.cc-sanfona-aberta) .cc-ini-texto {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--cc-suave-duracao) var(--cc-suave-curva),
              visibility 0s var(--cc-suave-duracao);
}

/* ------------------------------------------------------------
   O EMPURRÃO DO RESTO DA PÁGINA

   --dl-ini    quanto o cartão da Iniciação encolheu (negativo)
   --dl-desce  quanto os outros sete cresceram

   Ambos são escritos no <html> por js/escola-sanfona.js, a cada
   frame enquanto uma sanfona se mexe. É por isso que não levam
   transição própria: seguem a altura real dos cartões, e assim a
   página desce exactamente ao ritmo a que o cartão cresce, sem ficar
   um passo atrás. Pôr aqui uma transição faria o contrário.
   ------------------------------------------------------------ */
/* --dl-empurra: o painel da Iniciação à Dança passou de 1091 para
   1155px de altura, para a imagem caber acima do botão em vez de ficar
   ao lado dele. Como a página é toda em coordenadas fixas, tudo o que
   vem a seguir tem de descer os mesmos 64px. Fica aqui, num sítio só,
   em vez de somado a cada secção. */
:root { --dl-empurra: 64px; }

#dlCartoes {
  transform: translateY(calc(var(--dl-empurra) + var(--dl-ini, 0px)));
}

#dlDesce1, #dlDesce2 {
  transform: translateY(calc(var(--dl-empurra) + var(--dl-ini, 0px) + var(--dl-desce, 0px)));
}

@media (prefers-reduced-motion: reduce) {
  .cc-dl-texto, .cc-ini-painel, .cc-ini-botao, .cc-ini-foto, .cc-ini-texto
    { transition-duration: .01ms !important; }
}

/* O que vem depois da cronologia de "A NOSSA HISTÓRIA", em O Coletivo.
   Desce quando uma data abre. O valor é posto no <html> por
   js/coletivo-sanfona.js, que segue a altura real a cada frame —
   por isso este invólucro não leva transição própria. */
#ocDesce,
#ocCta {
  transform: translateY(var(--oc-desce, 0px));
}

/* ------------------------------------------------------------
   ESCOLA — A FOTOGRAFIA DENTRO DE CADA MODALIDADE

   Mesma forma e mesmo tamanho da que está na Iniciação à Dança,
   para as oito ficarem iguais. A forma (#dlIni1) tem coordenadas
   fixas, por isso a caixa TEM de medir 788.546px — muda-la
   deformava o recorte.

   Dentro dessa caixa o desenho ocupa só 645x427, deixando 214px
   de vazio em cima e 150px em baixo. As margens negativas comem
   esse vazio, senão o cartão ficava com um buraco enorme.

   NOTA: a imagem é provisória, a mesma da Iniciação. Quando o
   cliente enviar as fotografias de cada modalidade, troca-se só
   o url aqui em baixo, ou uma a uma no HTML.
   ------------------------------------------------------------ */

.cc-dl-foto {
  position: relative;
  width: 788.546px;
  height: 788.546px;
  /* o desenho começa 214px abaixo do topo da caixa; -180 come esse
     vazio e deixa 34px de folga real entre o texto e a fotografia */
  margin-top: -180px;
  /* Por baixo do desenho sobram 150px de caixa vazia. -30 deixa 120px
     reais, que é onde entra o botão: 48 de altura + 30 até ao fundo do
     cartão + 42 de folga acima dele. */
  margin-bottom: -30px;
  margin-left: auto;      /* encostada à direita, como na Iniciação */
  /* o desenho está centrado na caixa, com 72px de vazio de cada lado;
     o -72 alinha a borda direita do desenho com a do texto */
  margin-right: -72px;
  filter: drop-shadow(-4px 4px 3px rgba(0, 0, 0, .25));
  pointer-events: none;
}

.cc-dl-foto-img {
  position: absolute;
  inset: 0;
  clip-path: url(#dlIni1);
  background: url(../img/escola/dl-ini-1-web.jpg) center 30% / cover no-repeat;
}

/* ============================================================
   ESCOLA — CARTÕES DAS MODALIDADES NA VERSÃO MOBILE
   ------------------------------------------------------------
   O equivalente dos cartões de 1560px da desktop, na tela de
   390px. Mesma ideia: os cartões estão em fluxo normal dentro
   de #dlmCartoes, por isso descem-se uns aos outros quando um
   abre. O que vem depois na página é empurrado pelo
   js/escola-sanfona-mobile.js.

   O padding do cartão reserva o espaço do título (que está em
   posição absoluta, no topo) e do botão (ancorado ao fundo).
   Fechado, o min-height mantém-no nos 186px do Figma.

   NOTA PARA A MIGRAÇÃO
   No WordPress isto e a versão desktop tornam-se a mesma regra,
   com uma media query a mudar só as medidas.
   ============================================================ */

.cc-dlm-painel {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  color: var(--cc-texto, rgb(42,42,42));
}

.cc-dlm-painel p { margin: 0 0 10px; }
.cc-dlm-painel p:last-child { margin-bottom: 0; }

/* Sem isto o painel fechado continua a ocupar o espaço do
   padding do cartão e o cartão nunca volta aos 186px. */
.cc-dlm-cartao > [data-sanfona] { z-index: 1; }

/* O empurrão do resto da página, na versão mobile. O valor vem do
   js/escola-sanfona-mobile.js. */
#dlmDesce { transform: translateY(var(--dlm-desce, 0px)); }

/* ============================================================
   A ORLA ESCURA NO FIM DAS FAIXAS DE FOTOGRAFIA
   ------------------------------------------------------------
   As faixas têm altura fixa do Figma (973, 1018, ...) e a página
   inteira é escalada por JavaScript. A altura em pixeis do ecrã
   fica quase sempre fraccionária, e o navegador desenha a última
   linha do elemento com uma orla mais escura. Sobre um véu branco
   isso lê-se como um risco a atravessar a página.

   MEDIDO (quanto a linha destoa das vizinhas, em 255):
     como estava, com overflow:hidden      12 a 17
     sem o overflow:hidden                  3 a 8
     com esta tira branca por cima          0

   Não é o conteúdo: pôr fundo branco no contentor, ou mudar o
   ponto final do gradiente, não muda nada. É a fronteira do
   próprio elemento.

   A tira nasce 6px acima do fim e desce 8px abaixo. As bordas
   dela caem sobre branco dos dois lados, por isso são invisíveis.

   NOTA PARA A MIGRAÇÃO
   No WordPress isto desaparece: sem tela escalada, as alturas
   são inteiras e a orla não existe.
   ============================================================ */

.cc-faixa-limpa { position: absolute; }

/* A orla existe nas DUAS bordas. O ::after tapa o fundo e o ::before
   o topo — foi o topo que ficou por tapar da primeira vez, e via-se
   como um risco claro onde a fotografia comeca. */
.cc-faixa-limpa::before,
.cc-faixa-limpa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* Só 2px por dentro: o suficiente para tapar a última linha do
     elemento (que a 0,76 de escala é ~1,3px) sem comer fotografia
     nas faixas que acabam com a imagem à vista. */
  height: 10px;
  background: #ffffff;
  pointer-events: none;
  /* Sem o z-index o ::before e pintado ANTES dos filhos, e a
     fotografia tapava-o — so o ::after e que funcionava. */
  z-index: 2;
}

.cc-faixa-limpa::before { top: -8px; }
.cc-faixa-limpa::after  { bottom: -8px; }

/* ============================================================
   BOTÃO "ENVIAR" DOS FORMULÁRIOS — HOVER
   ------------------------------------------------------------
   Em repouso é o negativo do botão preto do site: fundo
   transparente, contorno e letras escuras, bolinha escura com a
   seta branca. Ao passar o rato inverte-se — fundo preto, letras
   brancas, bolinha branca e a seta escura.

   Os seis botões (contactos, criações, escola, move-60, projetos
   e soma) têm todos a mesma estrutura:
     button > span (texto) > span (bolinha) > svg (seta)

   O !important é preciso porque as cores vêm no style inline de
   cada elemento, escrito pelo gerador.
   ============================================================ */

.cc-btn-enviar,
.cc-btn-enviar span,
.cc-btn-enviar svg {
  transition: background var(--cc-botao, .28s) ease,
              color      var(--cc-botao, .28s) ease,
              box-shadow var(--cc-botao, .28s) ease;
}

.cc-btn-enviar:hover {
  background: var(--cc-texto-escuro, rgb(16,16,16)) !important;
}

/* o texto */
.cc-btn-enviar:hover span:nth-of-type(1) {
  color: #ffffff !important;
}

/* a bolinha */
.cc-btn-enviar:hover span:nth-of-type(2) {
  background: #ffffff !important;
}

/* a seta, que estava branca sobre a bolinha escura */
.cc-btn-enviar:hover svg {
  color: var(--cc-texto-escuro, rgb(16,16,16)) !important;
}

/* ============================================================
   CRIAÇÕES — CARTÕES DOS PROJETOS (sanfona)
   ------------------------------------------------------------
   O mesmo desenho dos cartões da Escola, noutra medida. Os oito
   cartões estão em fluxo normal dentro de #crCartoes, por isso
   descem-se uns aos outros quando um abre. O que vem depois na
   página é empurrado pelo js/criacoes-sanfona.js.

   O padding do cartão reserva o espaço do título e subtítulo
   (que estão em posição absoluta, no topo) e do botão (ancorado
   ao fundo). Fechado, o min-height mantém-no nos 231px do Figma.

   As margens do interior do painel dão o respiro que o desenho
   tem entre o subtítulo, as fotografias e o botão.
   ============================================================ */

/* O flex vai no interior, não no painel: o painel é o elemento que a
   sanfona colapsa (display:grid com 0fr).

   E o respiro vai nas MARGENS das fotografias, não no padding do
   interior. Com o cartão fechado o interior fica com altura zero e
   overflow:hidden — o que está dentro é cortado, mas um padding no
   próprio interior continuaria a ocupar espaço e o cartão nunca
   voltava aos 231px do Figma. Medido: com padding dava 367. */
.cc-cr-painel > .cc-sanfona-interior {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
}

.cc-cr-painel > .cc-sanfona-interior > * {
  margin: 50px 0 89px;
}

.cc-cr-cartao > [data-sanfona] { z-index: 1; }

/* O empurrão do resto da página. O valor vem do
   js/criacoes-sanfona.js. */
#crDesce { transform: translateY(var(--cr-desce, 0px)); }

/* O texto que abre nos itens de AO QUE DAMOS CORPO. A margem vai nos
   filhos e não no interior: com o item fechado o interior tem altura
   zero e overflow:hidden, e um padding nele continuaria a ocupar
   espaço. */
/* O !important e preciso: o <p> do painel traz margin:0 no seu style
   inline, e inline ganha da folha de estilo. Sem isto o texto que
   abre ficava colado a descricao. */

/* ============================================================
   FAIXAS DE FOTOGRAFIA — VÉU QUE DESVANECE A IMAGEM
   ------------------------------------------------------------
   O PROBLEMA
   O véu destas faixas era um rectângulo branco por cima da
   fotografia. Branco opaco no topo, a abrir para 12% de branco a
   meio. Só que um rectângulo branco não tapa apenas a fotografia:
   tapa tudo o que esteja por baixo dele na página. Nas faixas da
   página SOMA isso cortava as formas beges a direito, de ponta a
   ponta dos 1920px — o bege acabava num pixel e no seguinte já era
   branco. Lia-se como um risco, e como a fotografia aparecia de
   repente a seguir ao branco, parecia que véu não havia nenhum.

   A SOLUÇÃO
   O desvanecer passa para uma máscara na própria faixa. Assim não
   é branco que se pinta por cima: é a fotografia que perde opacidade
   e deixa ver o que está por baixo. As formas beges continuam
   inteiras e a imagem entra sem linha nenhuma.

   A nuvem branca de 12% que dá o ar lavado à fotografia continua lá,
   agora como uma camada de valor constante dentro da faixa — também
   ela desvanece com a máscara, o que é o que se quer.

   Os pontos de paragem vêm em variáveis porque cada faixa tem a sua
   proporção:
     --veu-a   onde a fotografia chega a cheio (fim do véu de cima)
     --veu-b   onde começa a sair (início do véu de baixo)
     --veu-c   onde desaparece por completo
   Uma faixa que acabe a direito — porque a secção seguinte a corta
   com fundo próprio — deixa --veu-b e --veu-c nos 100%.

   NOTA PARA A MIGRAÇÃO
   mask-image é CSS normal e passa tal e qual para o WordPress. O
   prefixo -webkit- fica por causa do Safari, que ainda o pede.
   ============================================================ */

.cc-veu-suave {
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent var(--veu-0, 0%),
      #000 var(--veu-a, 26%),
      #000 var(--veu-b, 100%),
      transparent var(--veu-c, 100%));
          mask-image: linear-gradient(180deg,
      transparent 0%,
      transparent var(--veu-0, 0%),
      #000 var(--veu-a, 26%),
      #000 var(--veu-b, 100%),
      transparent var(--veu-c, 100%));
}

/* ============================================================
   HAMBÚRGUER QUE SE TRANSFORMA EM X  (mobile)
   ------------------------------------------------------------
   A designer pediu o gesto daquela animação do LottieFiles: as três
   barras juntam-se ao centro e as de fora rodam até formarem o X.

   Feito em CSS e não em Lottie de propósito. O Lottie obrigava a
   carregar uma biblioteca só para isto, e o gesto são duas rotações
   e uma translação — o browser faz isso sozinho, sem peso nenhum e
   sem mais um ficheiro para subir por FTP.

   Quem liga e desliga a classe é o js/menu-hamburguer.js, que fica
   a ver quando o painel do menu aparece.

   As duas medidas que mudam de página para página vêm em variáveis
   postas por esse script:
     --cc-hb-d    distância da barra de cima ao meio, medida no ecrã
     --cc-hb-cor  a cor que o X tem de ter para se ver contra o
                  fundo do menu aberto (uns são cinzentos, outros
                  quase pretos)

   NOTA PARA A MIGRAÇÃO: isto passa tal e qual para o WordPress. É
   CSS mais um ficheiro de 60 linhas sem dependências.
   ============================================================ */

/* Os dois seletores, e nao so o .cc-hb: o React limpa o className do
   botao quando remonta, e sem isto o X aparecia de repente, sem
   transicao nenhuma. */
.cc-hb > div,
.cc-hb-x > div {
  transform-origin: 50% 50%;
  transition: transform .42s var(--cc-suave-curva),
              opacity   .24s ease,
              background-color .3s ease;
}

/* O !important existe porque cada barra traz a cor no style inline,
   escrita pelo gerador, e inline ganha a folha externa. */
.cc-hb-x > div {
  background: var(--cc-hb-cor, #ffffff) !important;
}

.cc-hb-x > div:nth-child(1) {
  transform: translateY(var(--cc-hb-d, 9px)) rotate(45deg);
}

/* A do meio não desaparece de repente: encolhe para o centro ao
   mesmo tempo que se apaga, que é o que faz o gesto parecer um só. */
.cc-hb-x > div:nth-child(2) {
  opacity: 0;
  transform: scaleX(.15);
}

.cc-hb-x > div:nth-child(3) {
  transform: translateY(calc(-1 * var(--cc-hb-d, 9px))) rotate(-45deg);
}

/* Com o menu aberto o hambúrguer tem de ficar por cima do painel
   (que está em z-index 200) para continuar a ver-se e a receber o
   clique que fecha. */
.cc-hb-x {
  z-index: 260;
}

@media (prefers-reduced-motion: reduce) {
  .cc-hb > div { transition-duration: .01ms; }
}

/* ============================================================
   MENU MOBILE — o desenho do Figma
   ------------------------------------------------------------
   O que o Claude Design tinha deixado nao era isto: fundo cinzento,
   lista plana com a Comunidade DEPOIS dos filhos dela, e duas
   paginas (index e o-coletivo) com um menu preto completamente
   diferente. Agora as onze paginas partilham este.

   Do desenho da designer:
     fundo branco, as duas formas laranja (uma no canto de cima a
     direita, outra em baixo a esquerda), itens centrados, a
     Comunidade com o seu chevron e os tres projetos agrupados por
     baixo dela em corpo mais pequeno, e o logo no fim.

   A entrada e pela direita, como ela pediu no comentario do Figma
   (a referencia do Dribbble). Quem trata do abrir e fechar e o
   js/menu-hamburguer.js, que ja estava a seguir o painel.

   O laranja e o estado de destaque: e o que ela marcou com "hover"
   no Figma, no "O Coletivo" e no "SOMA".
   ============================================================ */

.cc-mm {
  /* o contentor nao pinta nada: quem desliza e o painel la dentro */
  background: transparent;
  overflow: hidden;
}

.cc-mm-painel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 104px 20px 26px;

  /* fechado: fora do ecra, do lado direito */
  transform: translateX(100%);
  transition: transform .46s var(--cc-suave-curva);
  will-change: transform;
}

.cc-mm-aberto .cc-mm-painel {
  transform: translateX(0);
}

.cc-mm-lista {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.cc-mm-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: .02em;
  color: rgb(19, 19, 19);
  text-decoration: none;
  transition: color .25s var(--cc-suave-curva);
}

/* O laranja marca o item em destaque, como no Figma. Nao ha :hover
   a serio no telemovel — fica pelo toque, que e o :active. */
.cc-mm-item:hover,
.cc-mm-item:active,
.cc-mm-item[aria-current="page"] {
  color: var(--cc-laranja, rgb(194, 87, 15));
}

/* A Comunidade e um titulo, nao um link: no desktop tambem nao leva
   a lado nenhum, so abre o submenu. */
.cc-mm-titulo {
  cursor: default;
}

.cc-mm-chevron {
  width: 15px;
  height: 10px;
  flex-shrink: 0;
}

/* Os tres projetos: agrupados debaixo da Comunidade, mais pequenos e
   mais juntos, para se lerem como filhos dela e nao como irmaos. */
.cc-mm-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
}

.cc-mm-filho {
  font-size: 17px;
  line-height: 1.14;
  letter-spacing: .06em;
  color: rgb(19, 19, 19);
  text-decoration: none;
  transition: color .25s var(--cc-suave-curva);
}

.cc-mm-filho:hover,
.cc-mm-filho:active,
.cc-mm-filho[aria-current="page"] {
  color: var(--cc-laranja, rgb(194, 87, 15));
}

.cc-mm-logo {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 34px;
  width: 113px;
  height: 111px;
  flex-shrink: 0;
  background: url(../img/comum/logo-blk.png) center / contain no-repeat;
}

/* O X do canto e refeito em tres barras pelo menu-hamburguer.js, que
   o poe por cima do sitio onde o hamburguer esta. Aqui so se garante
   que fica acima das formas. */
.cc-mm-fechar { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .cc-mm-painel { transition-duration: .01ms; }
}

/* ============================================================
   PERGUNTAS FREQUENTES EM SANFONA (TELEMÓVEL)
   ------------------------------------------------------------
   No computador as perguntas estão todas abertas, em duas
   colunas. No telemóvel não há largura para isso: são oito na
   Escola, seis na SOMA e seis nos Projetos, e abertas dariam
   uma parede de texto. Aqui abre uma de cada vez.

   A ALTURA DA RESPOSTA É FIXA, e é de propósito. Cada página
   define --cc-faq-alt com a altura da sua resposta mais
   comprida. Como há sempre uma e só uma aberta, a secção tem
   sempre a mesma altura — e a faixa, a fotografia e o rodapé
   que vêm a seguir nunca se mexem. Numa tela de coordenadas
   absolutas isso é a diferença entre uma sanfona simples e uma
   que obriga a recalcular a página inteira em JavaScript.
   ============================================================ */

.cc-faq {
  /* a soma das perguntas mais a resposta mais comprida: seja qual for
     a que está aberta, o bloco mede sempre isto */
  height: var(--cc-faq-alt, 600px);
}

.cc-faq-item {
  border-bottom: 1px solid rgb(59, 41, 31);
}

.cc-faq-q {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* o espaço à direita é do sinal; o da esquerda alinha o texto
     com os 18px a que as perguntas estavam antes */
  padding: 38px 36px 40px 2px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: rgb(59, 41, 31);
}

/* O sinal: dois lados de um quadrado, rodados. Aponta para baixo
   quando está fechado e para cima quando está aberto. */
.cc-faq-q::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease, margin-top .3s ease;
}

.cc-faq-aberto > .cc-faq-q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

/* A ALTURA DA RESPOSTA É NATURAL, A DO BLOCO É QUE É FIXA
   Eu tinha começado por dar altura fixa a cada resposta, para a soma
   nunca mudar. Funcionava, mas abria um buraco por baixo das respostas
   curtas — a primeira da Escola tem duas linhas e a caixa tinha seis.

   Agora cada resposta ocupa o que precisa e é o BLOCO que tem altura
   fixa (a variável --cc-faq-alt, igual a soma das perguntas mais a
   resposta mais comprida). A folga passa a acumular-se no fim do
   bloco, onde se lê como o respiro que a faixa já tinha, e a página
   por baixo continua sem se mexer.

   O grid é o que permite animar até "auto": uma linha que vai de 0fr
   a 1fr. Com height:auto não havia transição nenhuma. */
.cc-faq-r {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}

/* O RECORTE VAI NUM INVÓLUCRO, NÃO NO PARÁGRAFO
   Eu tinha posto o overflow:hidden e o min-height:0 no próprio <p>.
   Não chegava: o padding faz parte da caixa do elemento e continua a
   contar para a altura mínima da linha do grid, mesmo com o conteúdo
   recortado. Cada resposta fechada deixava escapar exactamente os
   14px do seu padding-bottom — medi-os no browser.

   Agora quem recorta é um <div> sem padding nenhum, e o respiro está
   dentro dele, no parágrafo. Fechado, o invólucro colapsa a zero e
   leva o padding com ele. */
.cc-faq-r > div {
  overflow: hidden;
  min-height: 0;
}

.cc-faq-aberto > .cc-faq-r {
  grid-template-rows: 1fr;
}

.cc-faq-r p {
  margin: 0;
  /* 359 - 28 - 2 = 329px de texto, a mesma medida que as
     respostas tinham antes de virarem sanfona */
  padding: 0 28px 14px 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 1.32;
  text-wrap: pretty;
  color: rgb(59, 41, 31);
}

/* Quem pediu menos movimento abre e fecha na mesma, sem animação. */
@media (prefers-reduced-motion: reduce) {
  .cc-faq-r,
  .cc-faq-q::after { transition: none; }
}

/* ============================================================
   A TIRA DA HISTÓRIA (TELEMÓVEL)
   ------------------------------------------------------------
   Os quatro anos estavam em coordenadas absolutas — left 16,
   169, 322 — e os dois últimos ficavam fora dos 390px da tela,
   sem nada que lá chegasse. Agora são uma tira que rola, com
   16px de folga entre cartões e encaixe a cada um.

   A barra de rolagem esconde-se: no telemóvel não se vê de
   qualquer maneira, e no computador aparecia por baixo dos
   cartões a cortar a faixa laranja.
   ============================================================ */
.cc-tira-hist {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* O encaixe alinha-se pela caixa de padding, nao pelo conteudo: sem
     isto o primeiro cartao encostava ao rebordo e comia os 16px de
     margem que o desenho lhe dava. */
  scroll-padding-left: 16px;
}

.cc-tira-hist::-webkit-scrollbar { display: none; }

/* A tira da direcção, no telemóvel: um retrato de cada vez. */
.cc-tira-dir {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.cc-tira-dir::-webkit-scrollbar { display: none; }


/* A tira do calendario da Escola, no telemovel: um dia de cada vez.
   Mesma receita das outras — a barra de rolagem esconde-se, porque no
   telemovel nao se ve e no computador cortava a moldura ambar. */
.cc-tira-hor {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.cc-tira-hor::-webkit-scrollbar { display: none; }

/* O PARAGRAFO DE DESTAQUE DO POP-UP, QUANDO NAO HA NENHUM
   As treze biografias entraram sem frase destacada — a Ana vai
   escolher com o cliente qual e a de cada uma. Ate la o <p> fica
   vazio, e vazio ele nao deve ocupar espaco nem deixar a margem que
   o separa do corpo. O poeTexto() do popups.js escreve '' com o
   textContent, o que nao deixa filhos: o :empty apanha-o.
   Quando as frases chegarem, o espaco volta sozinho. */
[data-bio="intro"]:empty { display: none; }

/* A BARRA DE ROLAGEM DO POP-UP, DISCRETA
   O pop-up do computador e mais alto do que a janela e quem o rola e
   este overlay. A barra do sistema, cinzenta e larga, corta ao meio o
   desfoque do fundo. Fica fina e na cor castanha do site, com pouca
   opacidade — nota-se quando se precisa dela e desaparece no resto. */
.cc-popup-fundo {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 41, 31, 0.28) transparent;
}
.cc-popup-fundo::-webkit-scrollbar { width: 10px; }
.cc-popup-fundo::-webkit-scrollbar-track { background: transparent; }
.cc-popup-fundo::-webkit-scrollbar-thumb {
  background: rgba(59, 41, 31, 0.24);
  border-radius: 10px;
  /* a borda transparente encolhe o polegar sem encolher a area de
     agarrar: fica fino a vista e continua facil de apanhar com o rato */
  border: 3px solid transparent;
  background-clip: content-box;
}
.cc-popup-fundo::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 41, 31, 0.42);
  background-clip: content-box;
}

/* E a mesma barra dentro do cartao do telemovel e da caixa do texto,
   quando essa chega a precisar de rolar. */
[data-cc-rolar], .cc-popup-painel [style*="overflow-y:auto"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 41, 31, 0.24) transparent;
}