/* CARPA · Identidade aprovada P4k
 * Editar aqui para alterar as páginas P4k em conjunto.
 * As paletas de comparação mantêm as suas próprias definições.
 * O logótipo é uma imagem: as suas cores não são alteradas pelo CSS.
 */
:root {
  /* Fundos largos: navegação e hero; o conteúdo mantém a grelha de 1344 px. */
  --carpa-wide-width: 1728px;
  /* Paleta base — valores partilhados com as variáveis P4k do Sketch. */
  --carpa-color-brand: #243e89;
  --carpa-color-navy: #1b2a5c;
  --carpa-color-text: #1e2433;
  --carpa-color-muted: #5b6475;
  --carpa-color-ivory: #f7f4ee;
  --carpa-color-sand: #ece6dc;
  --carpa-color-white: #ffffff;
  --carpa-color-copper: #b5652a;

  /* Funções — mudar uma função sem alterar todos os usos de uma cor. */
  --carpa-background: var(--carpa-color-ivory);
  --carpa-surface: var(--carpa-color-white);
  --carpa-surface-alternate: var(--carpa-color-sand);
  --carpa-heading: var(--carpa-color-brand);
  --carpa-text: var(--carpa-color-text);
  --carpa-muted: var(--carpa-color-muted);
  --carpa-link: var(--carpa-color-brand);
  --carpa-band: var(--carpa-color-navy);
  --carpa-accent: var(--carpa-color-copper);
  --carpa-border: var(--carpa-color-sand);
  --carpa-button: var(--carpa-color-navy);
  --carpa-button-text: var(--carpa-color-white);
  --carpa-button-hover: var(--carpa-color-brand);

  /* Tipografia — os ficheiros @font-face estão em hero-immersive.css. */
  --carpa-font-family: THICCCBOI, sans-serif;
  --carpa-font-weight-regular: 400;
  --carpa-font-weight-medium: 500;
  --carpa-font-weight-bold: 700;
  --carpa-type-hero: clamp(36px, 3.62vw, 52px);
  --carpa-type-editorial: clamp(62px, 5.6vw, 80px);
  --carpa-type-section: clamp(30px, 3vw, 44px);
  /* Escala de referência para novos componentes; cada componente escolhe o nível. */
  --carpa-type-body: 18px;
  --carpa-type-small: 14px;
  --carpa-type-button: 16px;

  /* Formas — os valores móveis podem ser afinados separadamente. */
  --carpa-radius-navigation: 52px;
  --carpa-radius-navigation-open: 32px;
  --carpa-radius-hero: 28px;
  --carpa-radius-hero-mobile: 24px;
  --carpa-radius-form: 32px;
  --carpa-radius-card: 26px;
  --carpa-radius-panel: 28px;
  --carpa-radius-image: 24px;
  --carpa-radius-field: 12px;
  --carpa-radius-button: 999px;
  /* Altura única dos botões de ação (igual ao botão do formulário do hero). */
  --carpa-button-height: 48px;
  --carpa-content-width: 1344px;
  --carpa-grid-gap: 24px;
  --carpa-grid-columns: 12;
  --carpa-page-gutter: 48px;
  --carpa-panel-inset: 24px;
  /* Current previews: compact cards, standard panels and large editorial panels. */
  --carpa-space-compact: 24px;
  --carpa-space-panel: 32px;
  --carpa-space-panel-large: 48px;
  --carpa-space-image-inset: 16px;
  /* Visible distance between image and copy in unframed editorial sections. */
  --carpa-space-editorial-gap: 64px;
  /* Distância entre a barra de navegação e o primeiro bloco da página. */
  --carpa-space-below-nav: 24px;
}
@media (max-width: 1100px) {
  :root { --carpa-page-gutter: 24px; --carpa-space-panel: 28px; --carpa-space-panel-large: 32px; --carpa-space-editorial-gap: 32px; }
}
@media (max-width: 700px) {
  :root { --carpa-space-below-nav: 16px; --carpa-page-gutter: 16px; --carpa-space-panel: 24px; --carpa-space-panel-large: 24px; --carpa-space-editorial-gap: 24px; }
}