/* ── tokens.css ── */
/* =====================================================================
   MESSA — DESIGN TOKENS
   Fonte única de espaçamento, cor, tipografia, raio, sombra e movimento.
   Carregar SEMPRE primeiro, antes de components.css e do CSS de cada página.

   Regra: nenhum valor literal novo em CSS de página. Se falta um valor,
   acrescenta-se um token aqui. Ver docs/DESIGN-SYSTEM.md.

   Os tokens --messa-* e --legal-* são nomes legados mantidos como alias
   para não quebrar o CSS já em produção; código novo usa os nomes atuais.
===================================================================== */
:root {

  /* ── ESPAÇAMENTO ────────────────────────────────────────────────────
     Escala: 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80                      */

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Margem horizontal do conteúdo (alinhamento entre secções) */
  --page-gutter: clamp(var(--space-24), 5vw, var(--space-80));

  /* Ritmo vertical entre blocos grandes */
  --section-pad-y-xl: var(--space-80);
  --section-pad-y-lg: var(--space-64);
  --section-pad-y-md: var(--space-48);

  /* Pilhas: título ↔ subtítulo ↔ corpo ↔ CTA */
  --stack-xs: var(--space-8);
  --stack-sm: var(--space-12);
  --stack-md: var(--space-16);
  --stack-lg: var(--space-24);
  --stack-xl: var(--space-32);
  --stack-2xl: var(--space-48);

  /* Corpo expandido serviços: coluna número (52px) + gap padrão */
  --srv-body-pad-left: calc(52px + var(--space-24));


  /* ── COR: superfícies ───────────────────────────────────────────────
     Escuros nomeados por função, não por tom. Há 11 quase-pretos no CSS
     legado; estes três são os canónicos para superfícies novas.
     Os stops do gradiente do hero (messa.css) ficam de fora de propósito:
     são uma composição, não uma superfície reutilizável.               */

  --surface-deep: #080808;        /* rodapé e secções escuras (10 usos na home) */
  --surface-dark: #0c0c0d;        /* cabeçalho institucional                    */
  --surface-dark-soft: #141414;   /* rodapé institucional legado                */
  --canvas: #F1F1EF;              /* fundo claro padrão                         */
  --surface: #ffffff;             /* cartões sobre canvas                       */

  /* ── COR: tinta e acento ─────────────────────────────────────────── */

  --ink: #111111;                 /* texto principal e botão escuro */
  --accent: #E51725;              /* vermelho da marca (51 usos)    */
  /* O vermelho de marca não passa AA como texto pequeno em nenhum dos dois
     extremos: 4,14:1 sobre o canvas e 4,27:1 sobre o quase-preto. Estas duas
     variantes existem só para texto; fundo de botão continua no --accent,
     onde o que importa é o branco por cima.                              */
  --accent-on-light: #D01421;     /* 5,52:1 branco · 4,88:1 canvas  */
  --accent-on-deep:  #F03A46;     /* 5,15:1 no pior escuro          */

  /* ── ACENTOS DOS CARDS DE SERVIÇO ─────────────────────────────────
     Um gradiente por serviço, na ordem em que aparecem na home. Viviam
     só no messa.css, que as páginas internas não carregam — os cards de
     serviço fora da home ficavam iguais aos de artigo. Como tokens, a
     home e o bundle das internas leem a mesma fonte e não divergem.   */

  --srv-accent-1: linear-gradient(135deg, #E51725 0%, #FF7A1D 55%, #EE686A 100%);
  --srv-accent-2: linear-gradient(135deg, #886DA1 0%, #4BC5F4 100%);
  --srv-accent-3: linear-gradient(135deg, #FF7A1D 0%, #E51725 90%);
  --srv-accent-4: linear-gradient(145deg, #4BC5F4 0%, #886DA1 100%);
  --srv-accent-5: linear-gradient(125deg, #111 0%, #3d3d3d 40%, #E51725 100%);
  --srv-accent-6: linear-gradient(145deg, #1a1a1a 0%, #886DA1 40%, #4BC5F4 100%);
  --srv-accent-7: linear-gradient(135deg, #E51725 0%, #886DA1 100%);
  --srv-accent-8: linear-gradient(135deg, #4BC5F4 0%, #111 95%);
  --srv-accent-9: linear-gradient(135deg, #1a1a2e 0%, #886DA1 45%, #E51725 100%);
  --srv-accent-10: linear-gradient(140deg, #FF7A1D 0%, #886DA1 100%);
  --srv-accent-11: linear-gradient(135deg, #4BC5F4 0%, #E51725 100%);

  /* ── CARD DE SERVIÇO: a linguagem partilhada ──────────────────────────
     A home e as páginas internas desenham o mesmo card, mas o messa.css não
     é carregado fora da home. Estes valores viviam só lá, em literais, e o
     card das internas ficou parecido em vez de igual. Como tokens, os dois
     lados leem a mesma fonte.                                            */

  --srv-card-radius: 20px;
  --srv-card-bg: rgba(255, 255, 255, 0.78);
  --srv-card-line: rgba(17, 17, 17, 0.055);
  --srv-card-visual-h: 140px;
  --srv-card-num-size: 42px;
  --srv-card-cta-line: #ecece8;
  --srv-pill-bg: rgba(241, 241, 239, 0.9);
  --srv-pill-line: #e8e8e4;
  --fs-pill: 9px;
  --ls-pill: 0.1em;
  --ls-srv-tag: 0.14em;
  --lh-srv-desc: 1.75;

  /* ── COR: texto sobre claro ──────────────────────────────────────── */

  --text-strong: var(--ink);
  --text-body: #5a5a5a;
  /* #777777 dava 4,48:1 no branco e 3,96:1 no canvas — reprovava nos dois.
     #6b6b6b é o menor escurecimento com folga: 5,33:1 e 4,71:1.        */
  --text-soft: #6b6b6b;

  /* ── COR: texto sobre escuro ─────────────────────────────────────── */

  --text-on-dark: rgba(236, 236, 234, 0.92);
  --text-on-dark-soft: rgba(236, 236, 234, 0.52);
  --text-on-deep: #ffffff;                    /* títulos no rodapé      */
  /* Sobre --surface-deep (#080808) o piso para passar WCAG AA é alfa 0.4512;
     branco a 0.45 dava 4,48:1 e reprovava por um fio. Todo o texto do rodapé
     é 10px ou 13px, tamanhos sem a isenção de texto grande, por isso o piso
     vale para todos. A hierarquia inteira passou a viver entre 0.50 e 1.0 —
     faixa estreita, mas é a única em que ela cabe sem apagar o texto. */
  --text-on-deep-strong: rgba(255, 255, 255, 0.72);   /* 10,30:1 */
  --text-on-deep-body: rgba(255, 255, 255, 0.7);      /*  9,76:1  links do rodapé   */
  --text-on-deep-soft: rgba(255, 255, 255, 0.62);     /*  7,76:1  tagline           */
  --text-on-deep-label: rgba(255, 255, 255, 0.56);    /*  6,46:1  títulos de coluna */
  --text-on-deep-faint: rgba(255, 255, 255, 0.5);     /*  5,32:1  copyright, legais */
  --text-on-deep-hover: rgba(255, 255, 255, 0.92);    /* 16,84:1  hover de link     */

  /* ── COR: linhas ─────────────────────────────────────────────────── */

  --line: rgba(17, 17, 17, 0.065);
  --line-strong: rgba(17, 17, 17, 0.1);
  --line-on-dark: rgba(255, 255, 255, 0.06);
  --line-on-deep: rgba(255, 255, 255, 0.07);


  /* ── TIPOGRAFIA: famílias ────────────────────────────────────────── */

  --font-display: 'Playfair Display', serif;   /* títulos editoriais */
  --font-ui: 'Josefin Sans', sans-serif;       /* rótulos, botões, eyebrows */
  --font-body: 'Inter', sans-serif;            /* corpo de texto */

  /* ── TIPOGRAFIA: escala ──────────────────────────────────────────────
     Derivada do uso real. Os 18 tamanhos soltos do CSS legado colapsam
     nestes nove degraus; código novo não usa px diretamente.            */

  --fs-micro: 10px;      /* eyebrows, copyright, links legais (36 usos)   */
  --fs-label: 11px;      /* botões, tags, rótulos (25 usos)               */
  --fs-caption: 13px;    /* navegação, tagline, descrições curtas (17)    */
  --fs-body-sm: 14px;
  --fs-body: 15px;       /* corpo padrão de texto longo                   */
  --fs-subtitle: 16px;   /* subtítulos dentro do corpo (h3)               */
  --fs-body-lg: 17px;    /* lede                                          */
  --fs-title-sm: 20px;
  --fs-title: clamp(24px, 2.6vw, 30px);        /* h2 editorial            */
  --fs-display: clamp(32px, 4vw, 48px);        /* h1 de página            */
  --fs-display-cta: clamp(22px, 3vw, 36px);    /* faixa de conversão      */

  /* ── TIPOGRAFIA: entrelinha ──────────────────────────────────────── */

  --lh-tight: 1.2;       /* faixa de conversão            */
  --lh-heading: 1.22;    /* h2 editorial                  */
  --lh-title: 1.26;      /* títulos de cartão             */
  --lh-quote: 1.62;      /* citações                      */
  --lh-body: 1.8;        /* listas, descrições, lede      */
  --lh-prose: 1.92;      /* parágrafos de texto longo     */

  /* ── TIPOGRAFIA: espaçamento entre letras ─────────────────────────── */

  --ls-eyebrow: 0.38em;   /* eyebrow institucional  */
  --ls-title: 0.32em;     /* títulos de coluna      */
  --ls-tag: 0.28em;       /* tags e metadados       */
  --ls-label: 0.22em;     /* botões                 */
  --ls-compact: 0.18em;
  --ls-legal: 0.12em;     /* copyright, links legais */
  --ls-display: -0.02em;  /* títulos grandes (negativo) */


  /* ── RAIO ────────────────────────────────────────────────────────── */

  --radius-sm: 8px;
  --radius-md: 16px;      /* cartões (14/18/20 do legado convergem aqui) */
  --radius-pill: 999px;
  --radius-round: 50%;


  /* ── SOMBRA ──────────────────────────────────────────────────────── */

  --shadow-card: 0 12px 40px rgba(17, 17, 17, 0.045);


  /* ── MOVIMENTO ───────────────────────────────────────────────────── */

  --dur-fast: 0.2s;
  --dur: 0.25s;
  --dur-slow: 0.45s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);


  /* ── ALIAS LEGADOS ───────────────────────────────────────────────────
     Mantidos porque messa.css, politicaprivacidade.css, onboarding.css e
     success-shared.css já os referenciam. Não remover sem migrar esses
     ficheiros; os valores são exatamente os de antes.                   */

  --messa-canvas: var(--canvas);
  --messa-surface: var(--surface);
  --messa-line: var(--line);
  --messa-line-strong: var(--line-strong);
  --messa-text-body: var(--text-body);
  --messa-text-soft: var(--text-soft);
}

/* ── institutional-shell.css ── */
/*
 * Shell institucional Messa — carregar depois de tokens.css e antes de CSS específico.
 * Top bar escura, rodapé e CTA primário alinhados a Política/Termos.
 */

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

:root {
  --legal-header-bg: #0c0c0d;
  --legal-line-on-dark: rgba(255, 255, 255, 0.06);
  --legal-text-on-dark: rgba(236, 236, 234, 0.92);
  --legal-text-on-dark-soft: rgba(236, 236, 234, 0.52);
}

html { overflow-x: hidden; }
body {
  font-family: 'Inter', sans-serif;
  color: #111;
  background: var(--messa-canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.top-bar {
  padding: var(--stack-xl) var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  background: var(--legal-header-bg);
  border-bottom: 1px solid var(--legal-line-on-dark);
}

.top-bar > a:first-of-type {
  flex-shrink: 0;
}

.top-bar img { height: 28px; width: auto; display: block; }

.top-bar-back {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--legal-text-on-dark-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.top-bar-back:hover { color: var(--legal-text-on-dark); }

/* CTA primário — partilhado (obrigado, erro, fluxos) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-md);
  padding: var(--stack-md) var(--space-48);
  background: #111;
  color: #fff;
  border: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: #E51725;
  transform: translateY(-1px);
  color: #fff;
}

footer {
  background: #141414;
  padding: var(--stack-xl) var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--stack-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-copy {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-on-deep-faint);
}
.footer-legal { display: flex; gap: var(--stack-lg); flex-wrap: wrap; }
.footer-legal a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-on-deep-faint);
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--text-on-deep-hover); }

@media (max-width: 760px) {
  .top-bar { padding: var(--space-24); }
  /* Logo e link são flex-shrink:0; com o wordmark a 28px o par não cabe em ecrãs
     estreitos e o texto era cortado por html{overflow-x:hidden}. Reduzir logo e
     letter-spacing dá folga sem quebrar o par numa segunda linha. */
  .top-bar img { height: 20px; }
  .top-bar-back {
    font-size: 9px;
    letter-spacing: 0.18em;
    min-height: 44px;
    padding: var(--space-8) 0;
    align-items: center;
  }
  footer {
    padding: var(--space-24);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-sm);
  }
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-8) 0;
  }
}

/* Ecrãs muito estreitos (≤360px): a barra ainda precisa de folga para o
   rótulo mais longo ("← Todos os serviços"). Acima disto o tier de 760px
   já chega, e o padding de 24px é preservado. */
@media (max-width: 360px) {
  .top-bar { padding: var(--space-16); }
  .top-bar img { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { transform: none; }
}

/* ── shared.css ── */
/* Política / Termos — conteúdo editorial (carregar institutional-shell.css antes) */

/*
 * Cabeçalho editorial: fundo sólido, título + texto introdutório.
 */
.legal-header {
  background: var(--legal-header-bg);
  padding: var(--section-pad-y-xl) var(--page-gutter) var(--section-pad-y-lg);
  border-bottom: 1px solid var(--legal-line-on-dark);
}

.legal-eyebrow {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--legal-text-on-dark-soft);
  margin-bottom: var(--stack-lg);
}

.legal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--legal-text-on-dark);
  max-width: 16ch;
  margin-bottom: var(--stack-xl);
}

.legal-prose {
  max-width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
}

.legal-prose .legal-lede {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--legal-text-on-dark);
}

.legal-prose p:not(.legal-lede) {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.92;
  font-weight: 400;
  color: rgba(236, 236, 234, 0.68);
}

/* Obrigado / onboarding: faixa escura mais compacta */
.legal-header--thankyou {
  padding-bottom: var(--section-pad-y-md);
}
.legal-header--thankyou .legal-title {
  margin-bottom: var(--stack-lg);
  max-width: 18ch;
}
.legal-prose--thankyou {
  gap: 0;
}
.legal-prose--thankyou .legal-lede {
  margin: 0;
}

/* Notas finais — canvas */
.footer-notes {
  padding: var(--section-pad-y-lg) var(--page-gutter) var(--section-pad-y-xl);
  background: var(--messa-canvas);
  border-top: 1px solid var(--messa-line);
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
}
.footer-notes p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: var(--messa-text-body);
  max-width: min(42rem, 100%);
  font-weight: 400;
}
.footer-notes .final {
  font-size: 13px;
  line-height: 1.82;
  color: var(--messa-text-soft);
}

.footer-notes-link {
  color: var(--messa-text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.footer-notes-link:hover {
  color: #E51725;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .legal-header {
    padding: var(--section-pad-y-lg) var(--space-32) var(--section-pad-y-md);
  }
  .footer-notes {
    padding: var(--space-48) var(--space-32) var(--section-pad-y-lg);
  }
}

@media (max-width: 760px) {
  .legal-header {
    padding: var(--section-pad-y-lg) var(--space-24) var(--section-pad-y-md);
  }
  .legal-title {
    margin-bottom: var(--stack-lg);
  }
  .footer-notes { padding: var(--stack-xl) var(--space-24) var(--section-pad-y-md); }
}

/* ── components.css ── */
/* =====================================================================
   MESSA — COMPONENTES CANÓNICOS
   Carregar depois de tokens.css e antes do CSS específico de cada página.

   Cada componente aqui é a versão única de um padrão que hoje está
   duplicado no CSS legado. Ao tocar num ficheiro antigo, migrar as
   classes locais para estas em vez de copiar mais uma variante.

   Botão — substitui, à medida que os ficheiros forem migrados:
     .btn-primary (institutional-shell)  .error-btn (error-pages)
     .btn-back (onboarding, messa)       .hero-btn / .hero-btn-primary /
     .hero-btn-secondary / .footer-cta-btn / .btn-arrow (messa)
===================================================================== */


/* ── BOTÃO ────────────────────────────────────────────────────────────
   Base sem cor: a variante define fundo e texto.                      */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-md);
  padding: var(--stack-md) var(--space-48);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}

/* Sobre superfície escura (--surface-deep): botão claro. */
.ui-btn--light {
  background: var(--text-on-deep);
  color: var(--surface-deep);
}
.ui-btn--light:hover {
  background: var(--accent);
  color: var(--text-on-deep);
  transform: translateY(-1px);
}

/* Sobre canvas claro: botão escuro. */
.ui-btn--dark {
  background: var(--ink);
  color: var(--text-on-deep);
}
.ui-btn--dark:hover {
  background: var(--accent);
  color: var(--text-on-deep);
  transform: translateY(-1px);
}


/* ── CARTÃO ───────────────────────────────────────────────────────────
   Superfície sobre canvas. O layout interno fica com quem usa.        */

.ui-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    transform var(--dur) ease;
}
.ui-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}


/* ── EYEBROW ──────────────────────────────────────────────────────────
   Rótulo curto em maiúsculas acima de um título.                      */

.ui-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}


@media (prefers-reduced-motion: reduce) {
  .ui-btn:hover,
  .ui-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CTA de conversão dentro do conteúdo
   As páginas internas tinham a conversão toda no rodapé, entre 76% e 89% da
   página, e nos artigos ainda depois da faixa «Continuar lendo» — ou seja, o
   leitor que acabava de ler 1.700 palavras era convidado a ler mais 1.700
   antes de lhe ser pedido qualquer coisa. Este bloco fecha o conteúdo antes
   das faixas de navegação, que é onde a intenção está no máximo.
   ───────────────────────────────────────────────────────────────────────── */

.cta-conversao {
  padding: var(--section-pad-y-md) var(--page-gutter);
}

.cta-conversao-inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-deep);
  border-radius: var(--radius-md);
  padding: var(--space-48) var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-md);
  text-align: center;
}

.cta-conversao-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-cta);
  line-height: var(--lh-heading);
  color: var(--text-on-deep);
  text-wrap: balance;
}

.cta-conversao-text {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-deep-strong);
}

.cta-conversao .ui-btn {
  margin-top: var(--stack-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   Barra do topo fixa, com botão
   Era logotipo + link de voltar, e rolava para fora do ecrã. Numa página
   longa isso deixava o leitor sem nenhuma porta de conversão visível até ao
   rodapé. Fixa, o botão acompanha a leitura inteira.
   ───────────────────────────────────────────────────────────────────────── */

.top-bar--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.top-bar-cta {
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-label);
  white-space: nowrap;
}

/* Âncora que caísse por baixo da barra fixa ficaria escondida. A barra mede
   93px no desktop e 77px no telemóvel; 96px cobre as duas com folga. */
html {
  scroll-padding-top: 96px;
}

/* No telemóvel o link de voltar e o botão não cabem lado a lado com o
   logotipo: fica o botão, que é o que serve à conversão. */
@media (max-width: 560px) {
  .top-bar-actions .top-bar-back {
    display: none;
  }
  .cta-conversao-inner {
    padding: var(--space-32) var(--space-24);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Card de serviço fora da home
   Serviço e artigo usavam o mesmo card, e numa página com as duas faixas
   seguidas — «Serviços relacionados» e «Leia também» — nada distinguia um do
   outro senão o texto do link.
   Este variante reproduz o card da home: bloco de acento com o número, as
   pastilhas de entregas, o título em Josefin e o filete acima do CTA. Os
   valores saem dos tokens --srv-*, que o messa.css também consome, para os
   dois não voltarem a divergir. O gradiente entra por `style` a apontar para
   o token, em vez de onze regras repetidas nos dois ficheiros.
   ───────────────────────────────────────────────────────────────────────── */

/* Especificidade de duas classes de propósito: o .link-card genérico vive no
   editorial.css, que no bundle vem DEPOIS deste ficheiro. Com uma classe só,
   o padding dele ganhava por ordem de origem e o bloco de acento aparecia
   encaixado, com margem branca, em vez de sangrar até à borda como na home. */
.link-card.link-card--servico {
  padding: 0;
  overflow: hidden;
  border-radius: var(--srv-card-radius);
  background: var(--srv-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--srv-card-line);
}

.link-card--servico .link-card-visual {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: var(--srv-card-visual-h);
  flex-shrink: 0;
  padding: var(--stack-lg);
}

.link-card--servico .link-card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--srv-card-num-size);
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.link-card--servico .link-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--stack-md);
  padding: var(--stack-xl) var(--space-24) var(--space-32);
}

.link-card--servico .link-card-tag {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-srv-tag);
  /* --accent puro a 0.85 dá 4,08:1 sobre o card branco. A variante de texto
     recupera para 4,64:1 sem mudar a leitura da cor.                      */
  color: var(--accent-on-light);
  opacity: 0.85;
}

.link-card--servico .link-card-title {
  font-family: var(--font-ui);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: var(--lh-tight);
}

.link-card--servico .link-card-desc {
  font-size: var(--fs-caption);
  line-height: var(--lh-srv-desc);
  /* Quatro linhas, como na home: as descrições têm comprimentos diferentes e
     sem o corte os cards da grelha desalinhavam o CTA. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Entregas em pastilhas — é o que mais distingue o card de serviço de longe. */
.link-card--servico .link-card-entregas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.link-card--servico .link-card-entregas span {
  font-family: var(--font-ui);
  font-size: var(--fs-pill);
  font-weight: 500;
  letter-spacing: var(--ls-pill);
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--srv-pill-line);
  background: var(--srv-pill-bg);
}

.link-card--servico .link-card-more {
  margin-top: auto;
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--srv-card-cta-line);
}

/* ── editorial.css ── */
/*
 * Editorial Messa — páginas de serviço, hubs e artigos do blog.
 * Ordem de carregamento: tokens.css → institutional-shell.css → components.css → este.
 * Substitui politicaprivacidade.css nestas páginas (cartões próprios, sem contador "01.").
 *
 * Sem literais: cor, tipografia, raio, sombra e duração vêm de tokens.css;
 * botão e superfície de cartão vêm de components.css (.ui-btn, .ui-card).
 */

/* ── Cabeçalho: reaproveita .legal-header/.legal-title de shared.css ───────── */

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-md);
  margin-top: var(--stack-lg);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}
.legal-meta span + span::before {
  content: '·';
  margin-right: var(--stack-md);
}

/* ── Corpo editorial ──────────────────────────────────────────────────────── */

.editorial {
  padding: var(--section-pad-y-xl) var(--page-gutter);
  background: var(--canvas);
}

.editorial-inner {
  max-width: 44rem;
  margin-inline: auto;
}

.editorial h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin-top: var(--section-pad-y-md);
  margin-bottom: var(--stack-lg);
}
.editorial > .editorial-inner > h2:first-child,
.editorial-inner > *:first-child { margin-top: 0; }

.editorial h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--stack-xl);
  margin-bottom: var(--stack-sm);
}

.editorial p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text-body);
  margin-bottom: var(--stack-lg);
}

.editorial p.lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
}

.editorial strong { color: var(--ink); font-weight: 600; }

.editorial ul,
.editorial ol {
  margin: 0 0 var(--stack-lg) 0;
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}
.editorial li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.editorial li::marker { color: rgba(17, 17, 17, 0.3); }

.editorial a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(17, 17, 17, 0.25);
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.editorial a:hover { color: var(--accent-on-light); text-decoration-color: var(--accent-on-light); }

.editorial blockquote {
  margin: var(--section-pad-y-md) 0;
  padding-left: var(--space-24);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  font-style: italic;
  line-height: var(--lh-quote);
  color: var(--ink);
}

.editorial hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--section-pad-y-md) 0;
}

/* Caixa de destaque (avisos éticos, resumos) — superfície de .ui-card */
.callout {
  padding: var(--stack-xl) var(--space-24);
  margin-bottom: var(--stack-lg);
}
/* O callout usa a superfície de .ui-card mas não é interativo: neutralizar o hover. */
.callout:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--stack-sm);
}

/* ── Cartões de navegação (hubs, serviços relacionados, lista do blog) ──────
   A superfície (fundo, borda, raio, sombra no hover) vem de .ui-card;
   aqui fica só o layout e a tipografia.                                     */

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stack-lg);
  max-width: 1120px;
  margin-inline: auto;
}
.link-grid--two { grid-template-columns: repeat(2, 1fr); }

.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  padding: var(--stack-xl) var(--space-24);
  height: 100%;
}
.link-card:hover { transform: translateY(-2px); }
.link-card-tag {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-soft);
}
.link-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  font-weight: 400;
  line-height: var(--lh-title);
  color: var(--ink);
}
.link-card-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
  flex: 1;
}
.link-card-more {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-compact);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--stack-xs);
}
.link-card:hover .link-card-more { color: var(--accent-on-light); }

.section-band {
  padding: var(--section-pad-y-lg) var(--page-gutter) var(--section-pad-y-xl);
  background: var(--canvas);
  border-top: 1px solid var(--line);
}
.section-band-title {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: var(--section-pad-y-md);
}

/* ── Rodapé completo ──────────────────────────────────────────────────────
 * Espelha o rodapé da home (messa.css): mesma composição e mesmo fundo —
 * CTA + marca + navegação + contacto + legal num só bloco.
 * Sobrepõe o rodapé mínimo de institutional-shell.css via classe .site-footer.
 * O botão é o componente .ui-btn--light; aqui só o seu comportamento no layout.
 * Ao alterar o rodapé da home, refletir aqui.
 * ------------------------------------------------------------------------ */

footer.site-footer {
  display: block;
  background: var(--surface-deep);
  padding: var(--stack-2xl) var(--page-gutter) calc(var(--stack-2xl) + env(safe-area-inset-bottom, 0px));
  border-top: none;
}

.site-footer .footer-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-xl);
  padding: 0 0 var(--section-pad-y-lg) 0;
  border-bottom: 1px solid var(--line-on-deep);
}
.site-footer .footer-cta-text {
  font-family: var(--font-display);
  font-size: var(--fs-display-cta);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--text-on-deep);
}
.site-footer .ui-btn { flex-shrink: 0; }

.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--stack-2xl) var(--section-pad-y-xl);
  padding-top: var(--stack-xl);
  padding-bottom: var(--section-pad-y-lg);
  border-bottom: 1px solid var(--line-on-deep);
}
.site-footer .footer-logo { display: block; margin-bottom: var(--stack-xl); }
.site-footer .footer-logo img { height: 28px; width: auto; opacity: 0.85; }
.site-footer .footer-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-on-deep-soft);
  max-width: 300px;
}
.site-footer .footer-nav {
  display: flex;
  gap: var(--section-pad-y-lg);
  align-items: flex-start;
  flex-wrap: wrap;
}
.site-footer .footer-col-title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--text-on-deep-label);
  margin-bottom: var(--stack-lg);
}
.site-footer .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}
.site-footer .footer-col ul a {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-on-deep-body);
  transition: color var(--dur-fast) ease;
}
.site-footer .footer-col ul a:hover { color: var(--text-on-deep-hover); }

.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--section-pad-y-md);
  gap: var(--stack-xl);
  flex-wrap: wrap;
}
.site-footer .footer-copy {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-legal);
  color: var(--text-on-deep-faint);
}
.site-footer .footer-legal { display: flex; gap: var(--stack-xl); flex-wrap: wrap; align-items: center; }
.site-footer .footer-legal a {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-legal);
  color: var(--text-on-deep-faint);
  transition: color var(--dur-fast) ease;
}
.site-footer .footer-legal a:hover { color: var(--text-on-deep-hover); }

/* ── Responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .link-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Breakpoints do rodapé espelham os da home (messa.css): 860px e 520px. */
@media (max-width: 860px) {
  footer.site-footer {
    padding: var(--section-pad-y-lg) var(--page-gutter) calc(var(--stack-2xl) + env(safe-area-inset-bottom, 0px));
  }
  .site-footer .footer-cta-strip {
    padding-bottom: var(--section-pad-y-md);
    gap: var(--stack-lg);
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer .ui-btn { width: 100%; max-width: 320px; }
  .site-footer .footer-top {
    grid-template-columns: 1fr;
    gap: var(--section-pad-y-md);
    padding-top: var(--stack-md);
  }
  .site-footer .footer-nav { gap: var(--section-pad-y-md); }
}

@media (max-width: 760px) {
  .editorial { padding: var(--section-pad-y-md) var(--space-24); }
  .link-grid,
  .link-grid--two { grid-template-columns: 1fr; }
  .section-band { padding: var(--section-pad-y-md) var(--space-24); }
}

@media (max-width: 520px) {
  footer.site-footer {
    padding: var(--section-pad-y-md) var(--space-24) calc(var(--stack-2xl) + env(safe-area-inset-bottom, 0px));
  }
  .site-footer .footer-cta-strip { padding-bottom: var(--stack-xl); }
  .site-footer .footer-top { padding-top: var(--stack-sm); padding-bottom: var(--section-pad-y-md); }
  .site-footer .footer-nav { flex-direction: column; gap: var(--stack-xl); }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-md);
    padding-top: var(--stack-xl);
  }
  .site-footer .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-8) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-card:hover { transform: none; }
}

/* Miniatura do autor na assinatura. O texto ao lado é --fs-micro (10px), por
   isso 24px é o limite antes de a foto passar a dominar a linha. O anel claro
   separa o retrato do fundo escuro do cabeçalho sem desenhar uma borda dura.
   Deliberadamente sem flex no span: .legal-meta separa os spans com um "·" em
   ::before, e num container flex esse "·" vira item e ganha o gap, afastando-se
   da foto. Inline + vertical-align mantém o separador colado onde deve estar. */
.autor-foto {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: var(--stack-sm);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}