/* ==========================================================================
   BASE · Think Tank Geração Agora
   Reset, tipografia, layout, navegação, rodapé, botões e utilitários.
   Todas as decisões visuais vêm de tokens.css. Aqui não há valores soltos.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* para as âncoras não ficarem debaixo da nav */
  /* Impedir arrasto lateral em telemóvel. Tem de estar no html e não só no
     body: com a regra apenas no body, o html continua a poder deslizar. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--superficie-0);
  color: var(--texto-2);
  font-family: var(--fonte-texto);
  font-size: var(--fs-base);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* IMPORTANTE: usar 'clip' e NUNCA 'hidden'. Com 'hidden' o body torna-se um
     contentor de scroll e isso desliga o position:sticky de tudo o que está
     dentro (a coluna fixa do índice deixava de fixar). 'clip' impede o arrasto
     lateral na mesma, sem quebrar o sticky. O html já usa clip; ver secção 10. */
  overflow-x: clip;
}

/* TROCA DE TEMA
   Ao mudar de tema mudam dezenas de variáveis de cor ao mesmo tempo. Se os
   elementos tiverem transições activas nesse instante, o navegador pode ficar
   preso a meio e deixar superfícies com a cor do tema anterior. A solução é
   desligar todas as transições durante a troca, que assim é instantânea, e
   voltar a ligá-las logo a seguir. As animações de hover ficam intactas. */
.sem-transicao,
.sem-transicao *,
.sem-transicao *::before,
.sem-transicao *::after {
  transition: none !important;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--ligacao); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ligacao-hover); }

::selection { background: var(--seleccao-fundo); color: var(--seleccao-texto); }

:focus-visible {
  outline: var(--foco-espessura) solid var(--foco);
  outline-offset: var(--foco-desvio);
  border-radius: var(--raio-xs);
}

/* Saltar para o conteúdo: primeiro elemento focável da página, para quem
   navega por teclado não ter de passar pelo menu em todas as páginas. */
.saltar {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  transform: translateY(-200%);
  background: var(--verde-marca); color: var(--preto-marca);
  padding: var(--sp-3) var(--sp-5); font-weight: var(--peso-forte);
  z-index: var(--z-aviso); transition: transform var(--dur-2) var(--ease-saida);
}
.saltar:focus { transform: translateY(0); }


/* --- Tipografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  color: var(--texto-1);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-d1); font-weight: var(--peso-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-d2); font-weight: var(--peso-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h3 { font-size: var(--fs-d3); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
h4 { font-size: var(--fs-d4); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }

p { text-wrap: pretty; }

/* Etiqueta por cima dos títulos. Em NOHEMI BOLD, em minúsculas normais (só a
   1.ª letra maiúscula), a verde — a mesma voz das frases verdes das atividades
   e da frase marcante do leitor. Substituiu as maiúsculas pequenas e espaçadas
   (Manrope 12px, 0,14em), que liam como "template". O losango da marca fica. */
.chapeu {
  font-family: var(--fonte-display);
  font-size: clamp(1rem, 1.2vw, 1.125rem);      /* 16 -> 18px */
  font-weight: var(--peso-display);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--acento);
  /* Texto corrido (não flex): assim um termo em itálico no meio ("Sprint em
     curso") não se separa do resto. O losango fica pendurado à esquerda. */
  display: block; position: relative; padding-left: calc(8px + var(--sp-3));
}
.chapeu::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px;
  background: var(--acento); clip-path: var(--losango);
}

.lead { font-size: var(--fs-lead); color: var(--texto-2); max-width: var(--medida-texto); }
.nota { font-size: var(--fs-sm); color: var(--texto-3); }
.medida { max-width: var(--medida-texto); }

/* Termos ingleses (ex.: sprint, policy paper) em itálico — regra do brandbook.
   Nohemi/Manrope não têm face itálica própria: é oblíqua sintética, aceitável
   para termos soltos. lang="en" ajuda a pronúncia em leitores de ecrã. */
i[lang="en"] { font-style: italic; }


/* --- Layout -------------------------------------------------------------- */

.env {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--goteira);
}
.env--estreito { max-width: calc(var(--largura-estreita) + var(--goteira) * 2); }

.seccao { padding-block: var(--sp-seccao); }
.seccao--larga { padding-block: var(--sp-seccao-larga); }
.seccao--alt { background: var(--superficie-1); }

.seccao__topo { margin-bottom: var(--sp-8); display: grid; gap: var(--sp-4); }
.seccao__topo .lead { margin-top: var(--sp-2); }

.linha-topo { border-top: 1px solid var(--linha-forte); }

.duas-col {
  display: grid; gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grelha-3 {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}


/* --- Botões -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--fonte-texto);
  font-size: var(--fs-sm); font-weight: var(--peso-forte);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent; border-radius: var(--raio-0);
  cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-saida),
              color var(--dur-2) var(--ease-saida),
              border-color var(--dur-2) var(--ease-saida);
}
.btn__seta { transition: transform var(--dur-2) var(--ease-saida); flex: none; }
.btn:hover .btn__seta { transform: translateX(4px); }

.btn--primario   { background: var(--verde-marca); color: var(--preto-marca); }
.btn--primario:hover { background: var(--verde-200); color: var(--preto-marca); }

.btn--secundario { background: transparent; color: var(--texto-1); border-color: var(--linha-forte); }
.btn--secundario:hover { background: var(--superficie-2); color: var(--texto-1); border-color: var(--texto-4); }

.btn--azul { background: var(--azul-gradiente); color: #FFFFFF; }
.btn--azul:hover { background: var(--azul-600); color: #FFFFFF; }

.btn--grande { font-size: var(--fs-base); padding: var(--sp-4) var(--sp-6); }

.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Link com seta, usado dentro de cartões */
.link-seta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--peso-forte); font-size: var(--fs-sm);
  color: var(--acento); text-decoration: none;
}
.link-seta svg { transition: transform var(--dur-2) var(--ease-saida); }
.link-seta:hover { color: var(--acento); }
.link-seta:hover svg { transform: translateX(4px); }


/* --- Etiquetas ----------------------------------------------------------- */

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-rotulo); font-weight: var(--peso-forte);
  text-transform: uppercase; letter-spacing: var(--ls-rotulo);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--linha-forte); color: var(--texto-3);
}
.etiqueta--verde   { color: var(--verde-marca); border-color: #3CDB9759; }
.etiqueta--azul    { color: var(--azul-300);    border-color: #6FACFF59; }
.etiqueta--lavanda { color: var(--lavanda);     border-color: #D5E3FF59; }
.etiqueta--neutro  { color: var(--texto-3); }


/* --- Navegação ----------------------------------------------------------- */

.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-fixo);
  transition: background-color var(--dur-3) var(--ease-saida),
              border-color var(--dur-3) var(--ease-saida),
              backdrop-filter var(--dur-3) var(--ease-saida);
  border-bottom: 1px solid transparent;
}
.nav--solida {
  background: color-mix(in srgb, var(--superficie-0) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linha);
}
.nav__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-4);
}
.nav__logo { display: block; flex: none; }
.nav__logo img { width: 148px; }
.nav__logo img.logo--claro { display: none; }
[data-tema="claro"] .nav__logo img.logo--escuro { display: none; }
[data-tema="claro"] .nav__logo img.logo--claro  { display: block; }

/* Na página inicial o hero é SEMPRE escuro e a nav abre transparente por cima
   dele. Enquanto está transparente (topo, antes de .nav--solida) força o aspeto
   claro-sobre-escuro mesmo em tema claro — senão o logótipo e os controlos
   escuros do tema claro ficam ilegíveis sobre o hero. Ao rolar 24px a nav fica
   .nav--solida (barra) e volta ao aspeto do tema. Só afeta a index (body.home);
   as outras páginas não têm hero escuro. */
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__logo img.logo--claro  { display: none; }
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__logo img.logo--escuro { display: block; }
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__links a { color: #C6C7BE; }
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__links a:hover,
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__links a[aria-current="page"] { color: #F2F1EA; }
[data-tema="claro"] body.home .nav:not(.nav--solida) .tema-btn,
[data-tema="claro"] body.home .nav:not(.nav--solida) .nav__menu { color: #C6C7BE; border-color: #FFFFFF2E; }

.nav__links { display: flex; align-items: center; gap: var(--sp-5); list-style: none; padding: 0; }
.nav__links a {
  color: var(--texto-2); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--peso-medio);
  position: relative; padding-block: var(--sp-2);
  transition: color var(--dur-2) var(--ease-saida);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--acento); transition: width var(--dur-2) var(--ease-saida);
}
.nav__links a:hover { color: var(--texto-1); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--texto-1); }

.nav__acoes { display: flex; align-items: center; gap: var(--sp-3); }

/* Botão de tema */
.tema-btn {
  background: transparent; border: 1px solid var(--linha-forte);
  width: 38px; height: 38px; display: grid; place-items: center;
  cursor: pointer; color: var(--texto-2); flex: none;
  transition: background-color var(--dur-2) var(--ease-saida), color var(--dur-2) var(--ease-saida);
}
.tema-btn:hover { background: var(--superficie-2); color: var(--texto-1); }
.tema-btn .icone-claro { display: none; }
[data-tema="claro"] .tema-btn .icone-escuro { display: none; }
[data-tema="claro"] .tema-btn .icone-claro  { display: block; }

/* Menu de telemóvel */
.nav__menu {
  display: none; background: transparent; border: 1px solid var(--linha-forte);
  width: 38px; height: 38px; place-items: center; cursor: pointer;
  color: var(--texto-1); flex: none;
}
.gaveta {
  position: fixed; inset: 0; z-index: var(--z-gaveta);
  background: var(--superficie-0);
  display: grid; align-content: center; gap: var(--sp-5);
  padding: var(--goteira);
  transform: translateY(-100%);
  transition: transform var(--dur-4) var(--ease-ambos);
  visibility: hidden;
}
.gaveta[data-aberta="true"] { transform: translateY(0); visibility: visible; }
.gaveta a {
  color: var(--texto-1); text-decoration: none;
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--ls-display);
}
.gaveta a:hover { color: var(--acento); }
.gaveta__fechar {
  position: absolute; top: var(--goteira); right: var(--goteira);
  background: transparent; border: 1px solid var(--linha-forte);
  width: 44px; height: 44px; display: grid; place-items: center;
  cursor: pointer; color: var(--texto-1);
}

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
}


/* --- Rodapé -------------------------------------------------------------- */

.rodape { border-top: 1px solid var(--linha-forte); padding-block: var(--sp-8) var(--sp-6); }
.rodape__topo {
  display: grid; gap: var(--sp-7);
  /* Em telemóvel empilha. A partir de 900px passa a quatro colunas, com a
     coluna da marca mais larga. A versão anterior somava larguras mínimas
     maiores do que o ecrã e transbordava. */
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  margin-bottom: var(--sp-8);
}
@media (min-width: 900px) {
  .rodape__topo { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.rodape__marca img { width: 168px; margin-bottom: var(--sp-4); }
/* Mostrar só o logótipo do tema atual (o rodapé tinha as duas versões
   sobrepostas, o que parecia um logótipo duplicado). Espelha a regra da nav. */
.rodape__marca img.logo--claro { display: none; }
[data-tema="claro"] .rodape__marca img.logo--escuro { display: none; }
[data-tema="claro"] .rodape__marca img.logo--claro  { display: block; }
.rodape h4 {
  font-size: var(--fs-rotulo); letter-spacing: var(--ls-rotulo);
  color: var(--texto-4); margin-bottom: var(--sp-4); font-weight: var(--peso-forte);
  font-family: var(--fonte-texto);
}
.rodape ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.rodape ul a { color: var(--texto-2); text-decoration: none; font-size: var(--fs-sm); }
.rodape ul a:hover { color: var(--acento); }
.rodape__fundo {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  padding-top: var(--sp-5); border-top: 1px solid var(--linha);
  font-size: var(--fs-xs); color: var(--texto-4);
}
.rodape__fundo a { color: var(--texto-4); }


/* --- Cursor personalizado -----------------------------------------------
   Um losango pequeno que segue o rato, e um anel que o persegue com atraso.
   Só aparece em ecrãs com rato de verdade: em telemóvel e tablet fica
   desligado, e desliga-se também com movimento reduzido activo.           */

.cursor, .cursor-anel { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor, .cursor-anel {
    display: block; position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: var(--z-aviso);
    will-change: transform;
  }
  .cursor {
    width: 7px; height: 7px; background: var(--acento);
    clip-path: var(--losango);
    margin: -3.5px 0 0 -3.5px;
  }
  .cursor-anel {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid var(--texto-4);
    clip-path: var(--losango);
    transition: width var(--dur-3) var(--ease-saida),
                height var(--dur-3) var(--ease-saida),
                margin var(--dur-3) var(--ease-saida),
                border-color var(--dur-3) var(--ease-saida),
                opacity var(--dur-3) var(--ease-saida);
  }
  .cursor-anel[data-activo="true"] {
    width: 58px; height: 58px; margin: -29px 0 0 -29px;
    border-color: var(--acento);
  }
}


/* --- Aparecer ao rolar ---------------------------------------------------
   Elementos com .rev entram suavemente quando chegam ao ecrã.
   [data-escada] faz os filhos entrarem em sequência.                       */

/* REGRA DE SEGURANÇA
   O estado escondido está preso à classe .js, que só é acrescentada pelo
   próprio JavaScript no <head>. Consequência: se o JavaScript falhar, for
   bloqueado, ou o navegador for invulgar, a página aparece inteira e
   legível, apenas sem animação. Nunca se corre o risco de o site ficar em
   branco por causa de um efeito decorativo. */
.js .rev {
  opacity: 0;
  transform: translateY(var(--desloc-entrada));
  transition: opacity var(--dur-4) var(--ease-saida),
              transform var(--dur-4) var(--ease-saida);
}
.js .rev[data-visivel="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}


/* --- Utilitários --------------------------------------------------------- */

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gradiente-texto {
  background: var(--gradiente-brilho);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.losango-marca { background: var(--gradiente-marca); clip-path: var(--losango); }