/* =====================================================================
   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);
}