/* ============================================================
   CORPO COLETIVO — a folha do TEMA
   ------------------------------------------------------------
   O site.css veio do protótipo sem uma linha mudada: é lá que estão
   as cores, os tempos, as curvas, o véu em máscara, o hover do menu
   e o hambúrguer que vira X. Este ficheiro é o que o protótipo não
   podia ter: o desenho em fluxo normal.

   No protótipo cada página era uma tela de 1920px com tudo em
   coordenadas fixas — 2134 regras de position:absolute — e era por
   isso que um texto mais comprido do que o previsto saía da caixa ou
   ia por cima do vizinho. Aqui não há coordenadas. As secções são
   grelhas e caixas flexíveis, e crescem com o que lá se puser.

   É esta a diferença que faz os campos editáveis serem seguros.
   ============================================================ */

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   A UNIDADE DO DESENHO
   ------------------------------------------------------------
   O protótipo é uma tela de 1920px que o JavaScript encolhe com um
   transform: a 1440 de janela tudo fica a 75%, a 1280 a 66%. Foi por
   isso que o cabeçalho batia certo a 1920 e estava 33% maior a 1440 —
   eu tinha posto medidas fixas.

   O --u é um pixel do desenho. Uma medida do Figma escreve-se
   calc(138 * var(--u)) e passa a encolher na mesma proporção, sem
   ser preciso um transform nem uma tela.

   Só vale acima do corte para telemóvel: abaixo disso o desenho é
   outro e as medidas voltam a ser reais.
   ------------------------------------------------------------ */

:root { --u: calc(100vw / 1920); }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cc-texto, rgb(42, 42, 42));
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  margin: 0;
}

a { color: inherit; }

/* Largura útil, igual à do Figma: 1564 de conteúdo numa tela de 1920. */
.cc-largura {
  width: min(1564px, calc(100% - 80px));
  margin-inline: auto;
}

.cc-saltar {
  position: absolute;
  left: -9999px;
}
.cc-saltar:focus {
  left: 16px; top: 16px; z-index: 999;
  background: #fff; padding: 10px 16px; border-radius: 8px;
}

/* ------------------------------------------------------------
   OS DOIS TEXTOS: desktop e telemóvel
   ------------------------------------------------------------
   Só aparecem os dois no HTML quando a Ana preencheu o campo da
   versão de telemóvel. Quando não preencheu, sai um elemento só e
   estas regras não chegam a ser usadas.
   ------------------------------------------------------------ */

.cc-so-mobile  { display: none; }
.cc-so-desktop { display: revert; }

@media (max-width: 860px) {
  .cc-so-desktop { display: none; }
  .cc-so-mobile  { display: revert; }
}

/* ------------------------------------------------------------
   CABEÇALHO — o menu da página
   ------------------------------------------------------------
   Medido no protótipo, em pixeis do desenho (tela de 1920):

     barra          1920 x 192, sem fundo, por cima do hero
     itens          22px coolvetica, cor rgb(19,19,19), topo a 62
     entre itens    72px
     entre o ultimo item e o logo   ~98px
     logo           138 x 82, centrado, topo a 41
     margem esquerda  305       margem direita  344

   Nunca teve fundo branco: é transparente e assenta sobre a
   fotografia do hero. À primeira fiz uma barra branca e opaca, que
   não era isto.
   ------------------------------------------------------------ */

.cc-cab {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: calc(192 * var(--u));
  background: transparent;
  pointer-events: none;          /* o hero por baixo continua a receber o rato */
}
.cc-cab a,
.cc-cab button,
.cc-cab .cc-nav-drop { pointer-events: auto; }

/* A caixa util nao esta centrada por acaso: no prototipo a margem
   esquerda e 305 e a direita 344. A diferenca de 39px vai em
   padding-right, e assim o primeiro item cai nos 305 e o ultimo
   acaba nos 1576, como la. */
.cc-cab-nav {
  width: calc(1310 * var(--u));
  margin-inline: auto;
  padding-right: calc(39 * var(--u));
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: calc(98 * var(--u));
}

/* Os itens comecam aos 62 do topo e o logo aos 41 — nao estao na
   mesma linha central, e centrar os dois foi o que os deixou 23px
   baixos a primeira tentativa. */
.cc-cab-lado {
  display: flex;
  align-items: flex-start;
  gap: calc(72 * var(--u));
  flex: 1 1 0;
  padding-top: calc(62 * var(--u));
}
.cc-cab-lado:last-of-type { justify-content: flex-end; }

/* O logo e centrado na PAGINA e nao na caixa util, porque a caixa
   esta deslocada 19px para a esquerda. Fora de fluxo, para as duas
   metades do menu poderem crescer sem o empurrarem. */
.cc-cab-logo {
  position: absolute;
  left: 50%;
  top: calc(41 * var(--u));
  transform: translateX(-50%);
  width: calc(138 * var(--u));
  height: calc(82 * var(--u));
  background: url(../img/comum/logo-preto.png) center / contain no-repeat;
}

/* Os itens do menu da página: 22px, e a cor que estava lá. */
.cc-nav-item {
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  /* 400 e nao 500: medido no prototipo, os itens do menu ficaram em
     400, e o 500 engrossava as palavras o suficiente para as
     empurrar ate 10px do sitio. A regra do 500 vale para os titulos,
     nao aqui. */
  font-weight: 400;
  font-size: calc(22 * var(--u));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: rgb(19, 19, 19);
  letter-spacing: 0;
  /* A margem TEM de estar aqui. Se so as letras abrirem devagar e a
     margem saltar de uma vez, a compensacao chega antes do
     crescimento e o vizinho da um salto de 8px a meio da animacao,
     voltando ao lugar no fim. Com as duas no mesmo tempo e na mesma
     curva, cancelam-se em todos os frames. */
  transition: letter-spacing var(--cc-menu-duracao, .45s) var(--cc-menu-curva, ease),
              margin-right   var(--cc-menu-duracao, .45s) var(--cc-menu-curva, ease),
              transform      var(--cc-menu-duracao, .45s) var(--cc-menu-curva, ease),
              color          .25s var(--cc-menu-curva, ease);
}

/* O hover é o do protótipo: as letras abrem a partir do centro e o
   transform devolve metade, para as vizinhas não se mexerem. Aqui os
   itens estão em flex, por isso o que compensa são as margens — o
   transform não tira espaço à linha. */
/* O espaco entre letras tambem encolhe com a tela. No prototipo isso
   acontecia sozinho, porque o transform encolhia tudo; aqui tem de
   ser dito. Sem isto a palavra crescia 32px onde devia crescer 27. */
/* 1,7 pixeis do DESENHO. Dividir por 1px para tirar a unidade nao e
   CSS valido — o calc ficava invalido e o valor caia para 1,7 reais. */
.cc-nav-item { --abertura: calc(1.7 * var(--u)); }

/* Duas coisas separadas, e e por isso que sao dois valores:

   O margin-right absorve TODO o crescimento, para o vizinho nao se
   mexer. Antes eu punha metade de cada lado, e o resultado era o
   item a saltar 31px em vez de 13 e o vizinho a oscilar a meio da
   animacao — era isso que se via mal.

   O transform e que faz a palavra abrir a partir do centro, e usa
   (letras - 1) porque o espaco depois da ultima letra fica no fim da
   palavra e nao se ve. E o mesmo calculo do prototipo. Como o
   transform nao ocupa espaco, o vizinho nunca da por ele. */
.cc-nav-item:hover {
  letter-spacing: var(--abertura);
  margin-right: calc(-1 * var(--abertura) * var(--letras));
  transform: translateX(calc(-1 * var(--abertura) * (var(--letras) - 1) / 2));
}

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

/* ---------- o submenu da Comunidade, no menu da página ---------- */

/* 3px e nao 8: no prototipo o texto acaba em 1239 e a seta comeca
   em 1242. Os 5px a mais empurravam a Comunidade toda. */
.cc-nav-drop { position: relative; display: flex; align-items: baseline; gap: calc(3 * var(--u)); }

.cc-nav-seta {
  width: calc(16 * var(--u)); height: calc(10 * var(--u)); flex-shrink: 0;
  transition: transform var(--cc-menu-duracao, .45s) var(--cc-menu-curva, ease);
}
.cc-nav-drop:hover .cc-nav-seta {
  transform: translateX(calc(1.7 * var(--u) * 5));
}

.cc-nav-painel {
  position: absolute;
  top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 169px;
  background: rgba(255, 255, 255, .85);
  box-shadow: -4px 4px 4px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-rapido, .22s) ease, transform var(--cc-rapido, .22s) ease;
}
.cc-nav-drop:hover .cc-nav-painel,
.cc-nav-drop:focus-within .cc-nav-painel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.cc-nav-painel a {
  display: block;
  padding: 12px 20px;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-size: 20px;
  text-decoration: none;
  color: var(--cc-texto, rgb(42, 42, 42));
  transition: background .2s ease, color .2s ease;
}
.cc-nav-painel a + a { border-top: .5px solid var(--cc-texto, rgb(42, 42, 42)); }
.cc-nav-painel a:hover { background: var(--cc-laranja, rgb(194, 87, 15)); color: #fff; }

/* ------------------------------------------------------------
   A BARRA FLUTUANTE
   ------------------------------------------------------------
   Não se escreve aqui: o aspecto todo — os 1200px centrados, os
   cantos de 26px, a sombra, o deslizar de cima — está no site.css,
   nas classes .cc-mf, que vieram do protótipo sem uma linha mudada.
   O que muda é só quem a mostra: no protótipo era o menu-fixo.js a
   contar o scroll; aqui é uma classe posta pelo menu-tema.js.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   O HAMBÚRGUER
   ------------------------------------------------------------
   O desenho do X está no site.css, nas classes .cc-hb e .cc-hb-x.
   Aqui é só o botão em si, que no protótipo não existia como botão:
   era uma div com um onClick do React.
   ------------------------------------------------------------ */

.cc-hamburguer {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 48px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.cc-hamburguer > span {
  display: block;
  width: 28px;
  height: 2.2px;
  margin-left: auto;
  background: var(--cc-texto-escuro, rgb(16, 16, 16));
  transform-origin: 50% 50%;
  transition: transform .42s var(--cc-suave-curva, ease),
              opacity .24s ease,
              background-color .3s ease;
}

/* o X: as barras juntam-se ao centro e as de fora rodam */
.cc-hamburguer.cc-hb-x > span { background: var(--cc-hb-cor, #ffffff); }
.cc-hamburguer.cc-hb-x > span:nth-child(1) { transform: translateY(9.2px) rotate(45deg); }
.cc-hamburguer.cc-hb-x > span:nth-child(2) { opacity: 0; transform: scaleX(.15); }
.cc-hamburguer.cc-hb-x > span:nth-child(3) { transform: translateY(-9.2px) rotate(-45deg); }

/* ------------------------------------------------------------
   O MENU DE TELEMÓVEL
   ------------------------------------------------------------
   O aspecto está no site.css (.cc-mm e companhia), igual ao do
   Figma. Aqui trata-se só de o abrir e fechar — que agora é uma
   classe, e não os 200 lines de JavaScript a lutar com o React que
   o protótipo precisava.
   ------------------------------------------------------------ */

.cc-mm {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.cc-mm[hidden] { display: block; }          /* o hidden é só para quem não tem CSS */

.cc-mm-aberto {
  visibility: visible;
  pointer-events: auto;
}

.cc-mm-fechar {
  position: absolute;
  right: 21px;
  top: 35px;
  display: flex;
  z-index: 4;
}

body.cc-menu-aberto { overflow: hidden; }

/* ------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------ */

.cc-rodape {
  padding: 64px 0 44px;
  background: #ffffff;
}
.cc-rodape-dentro {
  width: min(1564px, calc(100% - 80px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.cc-rodape-logo {
  width: 150px; height: 92px;
  background: url(../img/comum/logo-preto.png) center / contain no-repeat;
}
.cc-rodape-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-size: 19px;
}
.cc-rodape-menu a { text-decoration: none; transition: color .25s ease; }
.cc-rodape-menu a:hover { color: var(--cc-laranja, rgb(194, 87, 15)); }
.cc-rodape-nota { margin: 0; font-size: 15px; color: var(--cc-cinza, rgb(112, 112, 112)); }

/* ------------------------------------------------------------
   O CORTE PARA TELEMÓVEL
   ------------------------------------------------------------
   Um só ponto de corte para o cabeçalho. No protótipo isto era um
   ficheiro de JavaScript a mandar o telemóvel para outra pasta com
   catorze páginas próprias.
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .cc-cab-dentro {
    width: calc(100% - 32px);
    min-height: 78px;
    justify-content: space-between;
  }
  .cc-nav { display: none; }
  .cc-hamburguer { display: flex; }
  .cc-cab-logo { width: 104px; height: 62px; }
  .cc-largura { width: calc(100% - 32px); }
}

/* ============================================================
   AS SECÇÕES
   ------------------------------------------------------------
   Tudo em fluxo. Uma secção mede o que o conteúdo dela medir, e é
   por isso que um texto mais comprido deixa de partir a página.
   ============================================================ */

.cc-seccao { padding: 96px 0; }

/* ---------- hero ---------- */
.cc-hero {
  position: relative;
  min-height: min(931px, 88vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #c9c9c9;
}
.cc-hero-video,
.cc-hero-veu {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cc-hero-veu {
  background-size: cover;
  background-position: center;
  opacity: var(--cc-hero-veu, .6);
}
.cc-hero-texto { position: relative; z-index: 1; text-align: center; }
.cc-hero-titulo {
  font-size: clamp(34px, 5.2vw, 82px);
  line-height: 1.02;
  color: var(--cc-laranja, rgb(194, 87, 15));
}
.cc-hero-sub {
  margin: 18px 0 0;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 30px);
  color: var(--cc-texto-forte, rgb(29, 29, 29));
}

/* ---------- entrada ---------- */
.cc-intro-texto {
  margin: 0;
  text-align: center;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.24;
  letter-spacing: .02em;
  color: var(--cc-texto-forte, rgb(29, 29, 29));
  text-wrap: balance;
}

/* ---------- grelha de três ---------- */
.cc-grelha-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* ---------- cartões ---------- */
.cc-cartao {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%,
              rgba(185,184,184,.18) 0%, rgba(239,239,239,.36) 54%, rgba(255,255,255,.6) 100%);
  box-shadow: 0 4px 40px rgba(0, 0, 0, .09);
}
.cc-cartao-foto {
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
}
.cc-cartao-corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px 30px;
  flex: 1;
}
.cc-cartao-titulo {
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: .08em;
  color: var(--cc-texto-escuro, rgb(16, 16, 16));
}
.cc-cartao-texto { margin: 0; font-size: 17px; line-height: 1.42; text-wrap: pretty; }
.cc-cartao .cc-botao { margin-top: auto; }

/* ---------- botões ---------- */
.cc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 0 8px 0 26px;
  border-radius: 60px;
  text-decoration: none;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  background: linear-gradient(97.8deg,
              var(--cc-laranja-escuro, rgb(93,38,2)) 6%,
              rgb(230,107,27) 49%,
              var(--cc-laranja-escuro, rgb(93,38,2)) 94%);
  box-shadow: 10px 4px 4px rgba(0, 0, 0, .25);
  transition: transform var(--cc-botao, .28s) ease, box-shadow var(--cc-botao, .28s) ease;
}
.cc-botao:hover { transform: translateY(-3px); box-shadow: 10px 8px 12px rgba(0,0,0,.22); }

.cc-botao-seta {
  width: 47px; height: 47px; flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  position: relative;
}
.cc-botao-seta::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--cc-texto, rgb(42,42,42));
  border-bottom: 2px solid var(--cc-texto, rgb(42,42,42));
  transform: translate(-1px, -1px) rotate(-45deg);
}

.cc-botao-vazio {
  background: none;
  box-shadow: inset 0 0 0 2px var(--cc-texto-escuro, rgb(16,16,16));
  color: var(--cc-texto-escuro, rgb(16,16,16));
  padding: 0 26px;
}
.cc-botao-grande { min-height: 68px; font-size: 22px; }

/* ---------- manifesto e CTA, as duas com fotografia ---------- */
.cc-manifesto,
.cc-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 140px 0;
}
/* O veu por cima da fotografia. Nao e um valor unico: e o degrade
   que veio do prototipo, onde a designer o afinou para o texto se
   ler sem a foto desaparecer. Cada seccao pode trocar as suas
   paragens pelas variaveis. */
.cc-manifesto::before,
.cc-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      #ffffff 0%,
      rgba(255,255,255, var(--cc-lavado-a, .74)) 26%,
      rgba(255,255,255, var(--cc-lavado-b, .62)) 58%,
      rgba(255,255,255, var(--cc-lavado-c, .90)) 86%,
      #ffffff 100%);
}
.cc-manifesto-dentro,
.cc-cta-dentro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.cc-manifesto-titulo {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.08;
  color: var(--cc-texto-escuro, rgb(16,16,16));
}
.cc-manifesto-texto {
  margin: 0;
  max-width: 70ch;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.5;
  text-wrap: pretty;
}
.cc-manifesto-botoes { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.cc-cta-titulo {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.24;
  max-width: 24ch;
  color: var(--cc-texto, rgb(42,42,42));
}

/* ---------- números ---------- */
.cc-numero { text-align: center; }
.cc-numero-valor {
  display: block;
  font-family: 'coolvetica', 'Arial Narrow', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1;
  color: var(--cc-laranja, rgb(194, 87, 15));
}
.cc-numero-rotulo {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cc-texto, rgb(42,42,42));
}

/* ---------- telemóvel ---------- */
@media (max-width: 860px) {
  .cc-seccao { padding: 64px 0; }
  .cc-grelha-3 { grid-template-columns: 1fr; gap: 26px; }
  .cc-manifesto, .cc-cta { padding: 96px 0; }
  .cc-hero { min-height: 76vh; }
  .cc-botao { font-size: 18px; min-height: 56px; }
}