/* /styles.css */
/* ===================================================================
   BMDigital Services — Landing de captação
   Guia prático de autoavaliação de negócio e estrutura

   Site estático puro. Sem framework, sem build step.
   Ordem do ficheiro:
     1. Tokens
     2. Reset e base
     3. Tipografia
     4. Layout e secções
     5. Componentes (botões, cartões, formulário)
     6. Fundo decorativo (SVG inline + alternativa PNG)
     7. Blocos da página
     8. Responsivo e preferências do utilizador
   =================================================================== */

/* ===================================================================
   1. TOKENS
   Tudo o que se repete vive aqui: cor, tipo, espaço, raio, sombra,
   movimento e layout. Nenhum valor bruto deve aparecer nas regras
   abaixo — se precisar de um valor novo, crie o token primeiro.
   =================================================================== */

:root {
  /* ---- Cor: paleta da marca (validada, não alterar) ---- */
  --bmd-navy: #0b2545;
  --bmd-navy-soft: #3d5a80;
  --bmd-blue-muted: #8da3bc;
  --bmd-green: #12a150;
  --bmd-grey-text: #5a6b7f;
  --bmd-surface: #f5f7fa;
  --bmd-border: #dbe2ea;
  --bmd-white: #ffffff;

  /* ---- Cor: variantes derivadas ----
     O verde da marca (#12A150) tem 3.36:1 sobre branco. Chega para
     elementos gráficos (mínimo AA de 3:1) mas NÃO para texto pequeno
     nem para texto branco por cima. Estas duas variantes mais escuras
     existem só para esses casos e mantêm-se na mesma família. */
  --bmd-green-deep: #0e7a3d; /* 5.43:1 sobre branco — texto e botões */
  --bmd-green-darker: #0a5f2f; /* estado :hover / :active */

  /* ---- Cor: papéis semânticos ----
     Use SEMPRE estes nas regras, nunca os tokens de marca em cima.
     Trocar um papel muda a página inteira de forma coerente. */
  --color-bg: var(--bmd-white);
  --color-bg-alt: var(--bmd-surface);
  --color-bg-invert: var(--bmd-navy);
  --color-text: var(--bmd-navy);
  --color-text-muted: var(--bmd-grey-text);
  --color-text-invert: var(--bmd-white);
  --color-text-invert-muted: var(--bmd-blue-muted);
  --color-border: var(--bmd-border);
  --color-border-strong: var(--bmd-blue-muted);
  --color-accent: var(--bmd-green);
  --color-accent-text: var(--bmd-green-deep);
  --color-focus: var(--bmd-green-deep);

  /* ---- Tipografia: famílias ----
     Stack de sistema por opção deliberada: zero pedidos externos,
     zero dependência de CDN, sem implicações de RGPD (o Google Fonts
     expõe o IP do visitante a um terceiro) e primeira pintura imediata.
     Para trocar por uma webfont, aloje o ficheiro em assets/ e
     substitua apenas este token. Ver README. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Tipografia: escala fluida ----
     Rácio ~1.25 em telemóvel, a abrir para ~1.33 em desktop.
     Os clamp() interpolam entre 375px e 1280px de viewport. */
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.24rem + 0.58vw, 1.6875rem);
  --text-2xl: clamp(1.625rem, 1.42rem + 0.87vw, 2.125rem);
  --text-3xl: clamp(1.9375rem, 1.62rem + 1.35vw, 2.75rem);
  --text-4xl: clamp(2.0625rem, 1.6rem + 1.97vw, 3.4375rem);

  /* ---- Tipografia: peso, entrelinha, tracking ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---- Espaçamento: escala base 4px ---- */
  --space-3xs: 0.25rem; /*  4px */
  --space-2xs: 0.5rem; /*  8px */
  --space-xs: 0.75rem; /* 12px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4rem; /* 64px */
  --space-3xl: 6rem; /* 96px */
  --space-4xl: 8rem; /* 128px */

  /* Ritmo vertical das secções: encolhe em telemóvel sem media query. */
  --space-section: clamp(var(--space-2xl), 8vw, var(--space-4xl));

  /* ---- Raio ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Sombra ----
     Tingidas de navy em vez de preto puro: assenta melhor na paleta
     e evita o cinzento sujo das sombras neutras. */
  --shadow-xs: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 37, 69, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(11, 37, 69, 0.12),
    0 2px 6px -2px rgba(11, 37, 69, 0.07);
  --shadow-lg: 0 20px 40px -12px rgba(11, 37, 69, 0.16),
    0 6px 14px -6px rgba(11, 37, 69, 0.08);
  --shadow-focus: 0 0 0 4px rgba(14, 122, 61, 0.18);

  /* ---- Layout ---- */
  --container-max: 70rem; /* 1120px — grelhas e secções largas */
  --container-narrow: 44rem; /* 704px — blocos de texto corrido    */
  --container-pad: clamp(var(--space-sm), 5vw, var(--space-xl));
  --measure: 62ch; /* comprimento de linha confortável   */

  /* ---- Movimento ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1);

  /* ---- Fundo decorativo ---- */
  --deco-line: var(--bmd-blue-muted);
  --deco-line-opacity: 0.42;
  --deco-line-opacity-soft: 0.24;
  --deco-node: var(--bmd-green);
  --deco-accent: var(--bmd-navy);
}

/* ===================================================================
   2. RESET E BASE
   =================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* O foco visível é requisito de acessibilidade, não decoração.
   Nunca remover — só substituir por algo igualmente visível. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Salta a decoração e vai direto ao conteúdo (leitores de ecrã / teclado). */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Visível só para tecnologias de apoio. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   3. TIPOGRAFIA
   =================================================================== */

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

p {
  margin: 0;
  max-width: var(--measure);
}

/* Rótulo curto acima de um título. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Sobre fundo navy o verde-escuro perde-se: usa o verde da marca,
   que sobre navy dá 4.57:1 (medido). */
.eyebrow--invert {
  color: var(--bmd-green);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

/* Parágrafo de entrada, um degrau acima do corpo. */
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

/* ===================================================================
   4. LAYOUT E SECÇÕES
   =================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-section);
}

/* Fundo alternativo em cinza-superfície, para separar secções sem
   linhas nem sombras. */
.section--alt {
  background-color: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

/* Cabeçalho de secção: eyebrow + h2 + lead, centrado e com medida curta. */
.section__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.section__head p {
  margin-inline: auto;
  margin-top: var(--space-sm);
}

/* Parágrafo de fecho de secção, centrado por baixo de uma grelha. */
.section__closing {
  max-width: var(--container-narrow);
  margin: var(--space-xl) auto 0;
  text-align: center;
}

.section__closing p {
  margin-inline: auto;
}

/* Nota curta, centrada, no fim de uma secção. */
.note-center {
  margin: var(--space-lg) auto 0;
  text-align: center;
}

/* ===================================================================
   5. COMPONENTES
   =================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  min-height: 3rem; /* alvo de toque confortável */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--bmd-green-deep);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--bmd-green-darker);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* O anel de foco global é verde-escuro — a mesma cor do botão, o que o
   tornaria invisível aqui. Navy com offset: o anel cai fora do botão,
   sobre o fundo claro, com 15:1 de contraste. */
.btn--primary:focus-visible {
  outline: 3px solid var(--bmd-navy);
  outline-offset: 3px;
}

.btn--block {
  width: 100%;
}

/* ---- Cartões ---- */

.card {
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: var(--space-2xs);
}

.card p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Grelhas de cartões. Mobile-first: uma coluna, depois auto-fit. */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 55em) {
  .grid--areas {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 40em) and (max-width: 54.999em) {
  .grid--areas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================================================
   FORMULÁRIO — classes .bmd-* (formulário do guia e botões)
   =================================================================== */

.bmd-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 30rem;
}

.bmd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  text-align: left;
}

.bmd-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-snug);
}

.bmd-input {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  min-height: 3rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.3;
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* O azul-cinzento pálido daria só 2.6:1 sobre branco. O cinza de texto
   fica em 5.46:1 e continua claramente mais leve do que um valor
   preenchido, que é navy. */
.bmd-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1; /* Firefox aplica opacity 0.54 por defeito */
}

.bmd-input:hover {
  border-color: var(--bmd-navy-soft);
}

.bmd-input:focus,
.bmd-input:focus-visible {
  outline: none;
  border-color: var(--bmd-green-deep);
  box-shadow: var(--shadow-focus);
}

.bmd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-xs) var(--space-md);
  min-height: 3rem;
  background-color: var(--bmd-green-deep);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-invert);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.bmd-button:hover {
  background-color: var(--bmd-green-darker);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.bmd-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* Anel navy, fora do botão, como no .btn--primary. */
.bmd-button:focus-visible {
  outline: 3px solid var(--bmd-navy);
  outline-offset: 3px;
}

/* Nota de consentimento / RGPD por baixo do formulário. */
.bmd-form__note {
  margin: 0;
  max-width: 30rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-align: left;
}

/* Bloco branco elevado que envolve o formulário no hero. */
.form-card {
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ===================================================================
   6. FUNDO DECORATIVO
   -------------------------------------------------------------------
   Rede de ligações desenhada como SVG inline, só nos cantos superior-
   direito e inferior-esquerdo. Os ~80% centrais ficam brancos.

   Porquê SVG e não os PNG originais:
     · escala sem perder nitidez em qualquer densidade de ecrã
     · pesa ~3 KB dentro do HTML, sem pedido extra
     · herda as cores dos tokens (muda a paleta, muda o fundo)
     · um único ficheiro serve telemóvel e desktop

   PARA VOLTAR AOS PNG ORIGINAIS:
     1. Copie site-fundo-hero-bmd.png e site-fundo-mobile-bmd.png
        para marketing-site/assets/
     2. No index.html, acrescente a classe hero--png:
          <section class="hero hero--png" id="topo">
     Os SVG passam a ocultos e entram os PNG, sem mosaico e sem
     esticar (background-size: contain + no-repeat).
   =================================================================== */

.hero__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Larguras deliberadamente contidas: a regra do Bruno é que os ~80%
   centrais fiquem brancos. Aumentar estes valores quebra-a. */
.hero__deco--tr {
  top: 0;
  right: 0;
  width: min(34vw, 25rem);
}

.hero__deco--bl {
  bottom: 0;
  left: 0;
  width: min(28vw, 20rem);
}

.hero__deco .deco-line {
  fill: none;
  stroke: var(--deco-line);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-opacity: var(--deco-line-opacity);
}

/* Traços mais interiores: mais discretos, para o centro ficar limpo. */
.hero__deco .deco-line--soft {
  stroke-width: 1;
  stroke-opacity: var(--deco-line-opacity-soft);
}

.hero__deco .deco-node {
  fill: var(--deco-node);
}

.hero__deco .deco-node--accent {
  fill: var(--deco-accent);
}

.hero__deco .deco-node--pale {
  fill: var(--deco-line);
  fill-opacity: 0.5;
}

/* ---- Alternativa PNG (inativa por defeito) ---- */
.hero--png .hero__deco {
  display: none;
}

.hero--png {
  background-image: url("assets/site-fundo-hero-bmd.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}

@media (max-width: 48em) {
  .hero--png {
    background-image: url("assets/site-fundo-mobile-bmd.png");
    background-position: top center;
  }
}

/* ===================================================================
   7. BLOCOS DA PÁGINA
   =================================================================== */

/* ---- Barra de topo ---- */

.site-header {
  position: relative;
  z-index: 2;
  padding-block: var(--space-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-header__logo img {
  width: auto;
  height: 2rem;
}

/* ---- Hero ---- */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  padding-bottom: var(--space-section);
}

.hero__inner {
  position: relative;
  z-index: 1; /* acima da decoração */
  display: grid;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
}

.hero__title {
  margin-bottom: var(--space-md);
}

.hero__lead {
  margin-bottom: var(--space-lg);
}

/* Provas curtas por baixo do lead. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.hero__facts li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

@media (min-width: 62em) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
  }
}

/* ---- Sintomas do problema ---- */

.symptom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
}

.symptom strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.symptom span {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* ---- As 6 áreas ---- */

.area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Número da área, em navy suave. */
.area__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2xs);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--bmd-navy-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.card:hover .area__num {
  background-color: var(--bmd-green-deep);
  border-color: var(--bmd-green-deep);
  color: var(--color-text-invert);
}

/* ---- Como funciona ---- */

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.step__badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Números grandes do "10 minutos / 6 áreas / 60 pontos". */
.stats {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.stat__value {
  display: block;
  color: var(--color-text);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ---- Captura final ---- */

.cta {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
}

.cta h2 {
  color: var(--color-text-invert);
}

.cta .lead {
  margin-top: var(--space-md);
  color: var(--color-text-invert-muted);
}

.cta__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 55em) {
  .cta__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* O formulário mantém-se em cartão branco sobre o navy: o contraste
   do input e do botão já está validado sobre fundo claro. */
.cta .form-card {
  color: var(--color-text);
}

.cta .form-card .bmd-form__note {
  color: var(--color-text-muted);
}

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

/* Fundo em navy exato (não mais escuro) de propósito: o logótipo
   bmd-D-horizontal-dark.png traz fundo navy sólido, não transparente.
   Qualquer outro tom faz aparecer um retângulo à volta do logótipo.
   O traço superior é o que separa o rodapé do bloco de captura. */
.site-footer {
  background-color: var(--bmd-navy);
  border-top: 1px solid rgba(141, 163, 188, 0.2);
  color: var(--color-text-invert-muted);
  padding-block: var(--space-2xl) var(--space-xl);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--space-2xl);
  }
}

.site-footer__logo img {
  width: auto;
  height: 2.25rem;
  margin-bottom: var(--space-sm);
}

.site-footer p {
  color: var(--color-text-invert-muted);
  line-height: var(--leading-normal);
  max-width: 34rem;
}

.site-footer a {
  color: var(--color-text-invert);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}

.site-footer a:hover {
  color: var(--bmd-green);
}

.site-footer__legal {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(141, 163, 188, 0.22);
  font-size: var(--text-xs);
}

/* Aviso do formulário de exemplo. Removido quando o embed real entra. */
.placeholder-flag {
  display: block;
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ===================================================================
   8. PREFERÊNCIAS DO UTILIZADOR
   =================================================================== */

/* Respeita quem pediu menos movimento no sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .btn--primary:hover,
  .bmd-button:hover {
    transform: none;
  }
}

/* Em ecrãs pequenos a decoração recua para não competir com o texto. */
@media (max-width: 40em) {
  .hero__deco--tr {
    width: 62vw;
  }

  .hero__deco--bl {
    width: 56vw;
    opacity: 0.75;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: left;
  }
}

/* Alto contraste: reforça limites que dependem de cor suave. */
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--bmd-navy-soft);
    --color-text-muted: #3d4d61;
  }
}

@media print {
  .hero__deco,
  .skip-link {
    display: none;
  }
}

/* /experience.css */
/* A ligação entre etapas é o elemento de movimento. O texto mantém-se acessível. */
.intro-note, .step-position, .hero-caption, .journey-caption { color: var(--color-text-muted); font-size: var(--text-sm); }
.intro-note { margin-bottom: 1.5rem; }
.header-link { font-weight: 600; }
.header-link, .day-note a, .legal-document a, .bmd-form__note a { color: var(--color-accent-text); text-underline-offset: 3px; }
.site-header__logo img { height: auto; width: clamp(150px, 23vw, 225px); }
.hero__inner { align-items: center; }
.hero__title { font-size: clamp(2.6rem, 4.8vw, 4.3rem); max-width: 15ch; letter-spacing: -.045em; }
.hero-caption { margin-top: 1rem; }
.hero-connections { position: absolute; width: 58%; right: -10%; bottom: -15%; opacity: .5; pointer-events: none; }
.hero-connections path { stroke: var(--bmd-blue-muted); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 1.8s cubic-bezier(.3, .6, .2, 1) .2s forwards; }
.hero-connections path:nth-of-type(2) { animation-delay: .45s; }
.hero-connections path:nth-of-type(3) { animation-delay: .7s; }
.hero-connections circle { fill: var(--bmd-green); transform-box: fill-box; transform-origin: center; animation: surgir .5s ease-out both; }
.hero-connections circle:nth-of-type(1) { animation-delay: 1.2s; }
.hero-connections circle:nth-of-type(2) { animation-delay: 1.4s; }
.hero-connections circle:nth-of-type(3) { animation-delay: 1.6s; }
.link-button { display: inline-flex; text-decoration: none; justify-content: center; text-align: center; }
.day-note { position: relative; padding: 2.5rem 2rem; border: 1px solid var(--color-border); background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); transform: rotate(2deg); }
.day-note__title { font-weight: 650; font-size: var(--text-lg); }
.day-note ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.day-note li { display: grid; grid-template-columns: 3.6rem 1fr; gap: .5rem; border-top: 1px solid var(--color-border); padding: 1rem 0; font-size: var(--text-sm); }
.day-note li span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.day-note > p:last-of-type { font-size: var(--text-sm); margin-bottom: .4rem; }
.journey { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.journey-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.journey-map { position: sticky; top: 3rem; }
.journey-map h2 { max-width: 18ch; }
.journey-map > p { margin-top: 1.5rem; }
.route { position: relative; display: grid; gap: 0; margin-top: 2rem; }
.route::before, .route::after { content: ''; position: absolute; left: 18px; top: 20px; width: 2px; height: calc(100% - 52px); background: var(--color-border); }
.route::after { background: var(--color-accent-text); transform-origin: top; transform: scaleY(var(--route-progress, 0)); transition: transform 400ms ease; }
.route a { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 64px; text-decoration: none; color: var(--color-text-muted); }
.route-dot { display: grid; place-items: center; position: relative; z-index: 1; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: #fff; font-size: .85rem; }
.route a[aria-current="step"] { color: var(--color-text); font-weight: 700; }
.route a[data-reached="true"] .route-dot { background: var(--color-accent-text); color: #fff; border-color: var(--color-accent-text); }
.journey-step { padding: 3rem 0 5rem; scroll-margin-top: 2rem; border-bottom: 1px solid var(--color-border); }
.journey-step:first-child { padding-top: 0; }
.journey-step + .journey-step { margin-top: 4rem; }
.journey-step h3 { font-size: var(--text-2xl); margin: .75rem 0 1.25rem; }
.journey-step > p { color: var(--color-text-muted); }
.solution { border-left: 3px solid var(--color-accent-text); padding: 1.5rem; background: var(--color-bg-alt); margin-top: 2rem; }
.solution-label { color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; }
.solution h4 { font-size: var(--text-lg); margin: .6rem 0; }
.connection { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; }
.area-explorer { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
.area-explorer details { border-bottom: 1px solid var(--color-border-strong); padding: 1rem 0; }
.area-explorer summary { padding: .5rem 1rem .5rem 0; min-height: 48px; font-weight: 650; cursor: pointer; }
.area-explorer details p { margin: 1rem 0; }
.area-explorer details[open] summary { color: var(--color-accent-text); }
.guide-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.guide-cover { padding: 2.7rem 2rem; min-height: 450px; border: 1px solid var(--color-border); border-left: 7px solid var(--color-text); box-shadow: var(--shadow-lg); background: #fff; }
.guide-cover img { width: 180px; margin-bottom: 3rem; }
.guide-cover > p { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.guide-cover > span { display: block; margin-top: 1rem; color: var(--color-accent-text); }
.guide-cover > div { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.guide-steps { padding-left: 1.4rem; margin: 2rem 0; }
.guide-steps li { padding-left: .5rem; margin: 1rem 0; }
.guide-steps strong { display: block; }
.guide-section .lead { margin-top: 1.5rem; }
.guide-section .link-button { margin-top: 1.5rem; }
/* Base digital: páginas, domínio e email, com um exemplo real. */
.craft-section { border-top: 1px solid var(--color-border); }
.craft-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.craft-head .lead { margin-top: var(--space-md); }
.craft__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-sm); border-radius: var(--radius-pill); background: rgba(18, 161, 80, .1); color: var(--color-accent-text); }
.craft__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.craft h3 { font-size: var(--text-lg); }
.stack { margin: var(--space-xl) 0 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg); background: var(--bmd-navy); color: #fff; }
.stack__caption { margin-bottom: var(--space-lg); color: var(--bmd-green); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.stack__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.stack__flow > li { position: relative; }
.stack__node { padding: 1rem 1.25rem; border: 1px solid rgba(141, 163, 188, .35); border-radius: var(--radius-md); background: rgba(255, 255, 255, .04); }
.stack__node--hub { border-color: rgba(18, 161, 80, .7); }
.stack__node span, .stack__out span { display: block; color: #bdccdc; font-size: var(--text-sm); }
.stack__node strong { display: block; font-size: var(--text-md); overflow-wrap: anywhere; }
.stack__out { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid rgba(141, 163, 188, .35); display: grid; gap: .9rem; transition: border-color .4s ease .7s; }
.stack__out li { position: relative; }
.stack__out li::before { content: ""; position: absolute; left: -1.25rem; top: .8em; width: .8rem; height: 2px; background: rgba(141, 163, 188, .35); transition: background-color .3s ease; }
.stack__out strong { display: block; }
/* Ligações entre os blocos: acendem da esquerda para a direita quando o fio toca no diagrama. */
.stack__flow > li + li::before { content: ""; position: absolute; left: 1.5rem; bottom: 100%; width: 2px; height: var(--space-lg); background: linear-gradient(var(--bmd-green), var(--bmd-green)) top / 100% 0 no-repeat, rgba(141, 163, 188, .35); transition: background-size .45s ease .15s; }
.stack__flow > li + li + li::before { transition-delay: .45s; }
.stack__note { max-width: 46rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(141, 163, 188, .25); color: #bdccdc; font-size: var(--text-sm); }
.stack__note strong { color: #fff; }
.stack.is-touched .stack__flow > li + li::before { background-size: 100% 100%; }
.stack.is-touched .stack__out { border-left-color: var(--bmd-green); }
.stack.is-touched .stack__out li::before { background-color: var(--bmd-green); transition-delay: .9s; }
.stack.is-touched .stack__out li:nth-child(2)::before { transition-delay: 1s; }
.stack.is-touched .stack__out li:nth-child(3)::before { transition-delay: 1.1s; }
@media (min-width: 64em) {
  .stack__flow { grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
  .stack__flow > li + li::before { left: auto; right: 100%; bottom: auto; top: 50%; width: var(--space-xl); height: 2px; background-position: left; background-size: 0 100%; }
}
.craft-cta { margin-top: var(--space-lg); }
.craft-cta a { color: var(--color-accent-text); font-weight: 600; text-underline-offset: 3px; }
/* Sobre mim: a cara e o nome de quem está por trás do trabalho, antes do pedido do guia. */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 48em) { .about { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.about__photo { position: relative; margin: 0; max-width: 14rem; }
@media (min-width: 48em) { .about__photo { max-width: none; } }
.about__photo img { display: block; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: var(--color-bg-alt); }
/* Um ponto verde como os das pontas dos fios. */
.about__photo::after { content: ""; position: absolute; right: -.5rem; bottom: 1.5rem; width: 1.1rem; height: 1.1rem; border-radius: var(--radius-pill); background: var(--bmd-green); box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 8px rgba(18, 161, 80, .15); }
.about__text .lead { margin-top: var(--space-md); }
.about__text .lead ~ p { margin-top: var(--space-sm); color: var(--color-text-muted); }
.about__text h3 { margin-top: var(--space-lg); }
.about__points { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.about__points li { position: relative; max-width: var(--measure); padding-left: 1.75rem; color: var(--color-text-muted); }
.about__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: var(--radius-pill); background: var(--bmd-green); box-shadow: 0 0 0 4px rgba(18, 161, 80, .15); }
.about__points strong { color: var(--color-text); }

/* Fios que acompanham o scroll (connections.js). Por baixo do conteúdo, os
   fios e os ramos; por cima, as ligações e os salpicos. */
.has-strands main { position: relative; }
.has-strands main .container { position: relative; z-index: 2; }
.strands { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.strands--over { z-index: 3; }
.strands path { fill: none; stroke-linecap: round; }
.strand--1 { opacity: .78; }
.strand--2 { opacity: .56; }
.strand.is-off { display: none; }
.strand__track { stroke: rgba(61, 90, 128, .13); stroke-width: 1.25; }
.strand__line { stroke: var(--bmd-green); stroke-width: 1.75; }
.strand__root, .strand__tip { fill: var(--bmd-green); opacity: 0; transition: opacity .25s ease; }
.strand__halo { fill: var(--bmd-green); opacity: 0; transition: opacity .25s ease; }
.strand__root.is-live, .strand__tip.is-live { opacity: 1; }
.strand__halo.is-live { opacity: .2; }
.strand__branch { stroke: var(--bmd-green); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .52s cubic-bezier(.3, .6, .2, 1); }
.strand__branch.is-reached { stroke-dashoffset: 0; }
.strand__port { fill: var(--bmd-green); stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.strand__port.is-reached { transform: scale(1); }
.strand__port--end { stroke: var(--bmd-navy); stroke-width: 2; }
.strands.is-instant * { transition: none !important; }
.splash__glow { fill: url(#strand-glow); transform-box: fill-box; transform-origin: center; animation: salpico-brilho .75s ease-out both; }
.splash__ring { fill: none; stroke: var(--bmd-green); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: salpico-anel .65s cubic-bezier(.2, .7, .3, 1) both; }
.splash__drop { fill: var(--bmd-green); transform-box: fill-box; transform-origin: center; animation: salpico-gota .6s cubic-bezier(.2, .7, .3, 1) both; }
.splash--big .splash__ring { stroke-width: 2.5; }
/* A caixa sente o toque: um anel que se afasta e um pequeno recuo. */
.has-strands [data-strand], .has-strands [data-strand-end] { --strand-base: 0 0 0 transparent; }
.has-strands .card[data-strand] { --strand-base: var(--shadow-xs); transition: border-color .4s ease, box-shadow .4s ease, transform var(--dur-base) var(--ease-out); }
.has-strands .solution { transition: box-shadow .4s ease; }
.has-strands [data-strand].is-touched { box-shadow: var(--strand-base), inset -3px 0 0 var(--bmd-green); }
.has-strands .card[data-strand].is-touched { border-color: rgba(14, 122, 61, .35); }
.has-strands .card[data-strand].is-touched:hover { box-shadow: var(--shadow-md), inset -3px 0 0 var(--bmd-green); }
.is-splashing { animation: caixa-toque .75s cubic-bezier(.2, .7, .3, 1); }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes salpico-anel { from { opacity: .9; transform: scale(.15); } to { opacity: 0; transform: scale(1); } }
@keyframes salpico-brilho { from { opacity: .8; transform: scale(.3); } to { opacity: 0; transform: scale(1); } }
@keyframes salpico-gota { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
@keyframes caixa-toque {
  0% { outline: 2px solid rgba(18, 161, 80, .55); outline-offset: 0; translate: 0 0; }
  18% { translate: -3px 0; }
  100% { outline: 2px solid rgba(18, 161, 80, 0); outline-offset: 12px; translate: 0 0; }
}

.cta .form-card p { color: var(--color-text-muted); margin: 1rem 0; }
.cta .form-card .link-button { color: #fff; }
.cta .lead, .site-footer p { color: #bdccdc; }
.footer-brand { width: 220px; margin-bottom: 1.5rem; }
.legal-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.5rem 0; }
.site-footer a { overflow-wrap: anywhere; }
.legal-document { max-width: 48rem; margin: auto; padding: 3rem 1.5rem 6rem; }
.legal-document h1 { font-size: var(--text-3xl); }
.legal-document h2 { font-size: var(--text-xl); margin: 2rem 0 1rem; }
.legal-document p, .legal-document ul { margin: 1rem 0; }
.legal-document a { overflow-wrap: anywhere; }
.legal-draft { padding: 1rem; border: 2px solid #915b00; background: #fff8e8; color: #694400; }
@media (max-width: 61.99em) { .hero__inner { gap: 3rem; } .day-note { transform: none; max-width: 40rem; } }
@media (max-width: 47.99em) {
  .journey-layout, .guide-layout, .area-explorer { grid-template-columns: 1fr; }
  .journey-map { position: static; }
  .route { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .route::before, .route::after { display: none; }
  .route a { font-size: .82rem; gap: .45rem; }
  .journey-step { padding-bottom: 2.5rem; }
  .journey-step + .journey-step { margin-top: 2rem; }
  .guide-cover { min-height: auto; max-width: 26rem; }
  .day-note { padding: 1.5rem; }
  .header-link { font-size: .82rem; text-align: right; }
  .hero-connections { width: 110%; opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .route::after { transition: none; }
  .hero-connections path, .hero-connections circle { animation: none; }
  .hero-connections path { stroke-dashoffset: 0; }
}
@media print { .strands { display: none; } .has-strands [data-strand].is-touched { box-shadow: none; } }

/* /site.css */
/* Site da empresa: navegação comum e blocos das páginas interiores.
   Usa só os tokens de styles.css; nada de cores ou tamanhos novos soltos. */

/* ---- Cabeçalho com navegação ---- */
.site-header__inner { --language-width: 5.25rem; flex-wrap: wrap; row-gap: var(--space-xs); column-gap: var(--space-sm); }
.site-header__inner:has(.lang-switch > :nth-child(3)) { --language-width: 7.5rem; }
.site-nav { display: flex; gap: 1.25rem; margin-left: auto; }
/* Com o Blog são seis páginas: no computador o espaço entre elas encolhe um pouco para
   logótipo, páginas, língua e botão continuarem a caber numa só linha. */
@media (min-width: 70em) {
  .site-nav { gap: 1rem; }
  .site-header__inner:has(.lang-switch > :nth-child(3)) .site-nav { gap: .5rem; }
}
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { border-bottom-color: var(--color-border-strong); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--bmd-green); }
.header-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-accent-text); border-radius: var(--radius-pill); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.header-cta:hover { background: var(--color-accent-text); color: var(--color-text-invert); }
/* Línguas: DE | PT, com EN nas páginas equivalentes. O link leva à página
   equivalente na outra língua; a atual não é link. */
.lang-switch { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: .8rem; font-weight: var(--weight-semibold); line-height: 1; }
.lang-switch > * { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2rem; padding: 0 .4rem; border-radius: var(--radius-pill); }
.lang-switch__current { background: var(--color-text); color: var(--color-text-invert); }
.lang-switch a { color: var(--color-text); text-decoration: none; }
.lang-switch a:hover { background: var(--color-bg-alt); }
/* No telemóvel, o seletor fica ao fim da linha das páginas: a navegação ocupa o resto. */
@media (max-width: 47.99em) {
  .lang-switch { order: 4; flex-basis: var(--language-width); justify-content: center; }
  .site-nav { order: 3; flex: 1 1 calc(100% - var(--language-width) - var(--space-sm)); min-width: 0; margin-left: 0; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--color-border); padding-right: var(--space-lg); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
  .site-nav a { font-size: .82rem; }
  .site-nav::-webkit-scrollbar { display: none; }
}
/* No tablet e em ecrãs médios, logótipo e botão ficam em cima; as páginas e a língua numa linha por baixo.
   A partir de 70em cabe tudo numa linha. Recolhido, fica só a linha das páginas e da língua. */
@media (min-width: 48em) and (max-width: 69.99em) {
  .site-nav { order: 3; flex: 1 1 calc(100% - var(--language-width) - var(--space-sm)); min-width: 0; margin-left: 0; }
  .lang-switch { order: 4; flex-basis: var(--language-width); justify-content: center; }
}

/* ---- Cabeçalho que recolhe ao descer (header.js) ----
   Sem JavaScript fica como estava, no topo da página. Com ele, fica fixo e o corpo
   guarda-lhe o espaço. Ao descer, logótipo e «Fazer diagnóstico» saem e ficam as
   páginas e a língua (DE | PT), sem nada mudar de lugar:
   - páginas numa segunda linha (telemóvel, tablet, até 70em; .is-stacked): o cabeçalho
     desliza para cima --header-hide px e fica à vista só a linha das páginas e da
     língua; não muda de tamanho, é só um transform;
   - tudo numa linha (computador): há espaço para tudo e o cabeçalho não recolhe.
   Sem desfoque por trás: num telemóvel pesa a cada frame do scroll. */
html.has-smart-header { scroll-padding-top: 5.5rem; }
html.has-smart-header body { padding-top: var(--header-space, 0px); }
html.has-smart-header .site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--color-bg); transition: transform 240ms var(--ease-out), padding 240ms var(--ease-out), box-shadow var(--dur-base) var(--ease-out); will-change: transform; }
html.has-smart-header .site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm); }
html.has-smart-header .site-header__logo,
html.has-smart-header .header-cta { transition: opacity 180ms var(--ease-out), visibility 180ms; }
@media (max-width: 69.99em) { html.has-smart-header .site-header { padding-bottom: var(--space-2xs); } }
.site-header.is-compact.is-stacked { transform: translateY(calc(-1 * var(--header-hide, 0px))); }
.site-header.is-compact.is-stacked .site-header__logo,
.site-header.is-compact.is-stacked .header-cta { opacity: 0; visibility: hidden; }
@media (max-width: 47.99em) { .site-header.is-compact .site-nav { border-top-color: transparent; } }
/* O mapa do percurso (página inicial) fica sempre por baixo do cabeçalho aberto. */
html.has-smart-header .journey-map { top: 6.5rem; }

/* ---- Rodapé ---- */
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; }

/* ---- Redes sociais (rodapé e cartão de contacto) ----
   Cores oficiais: azul do LinkedIn e degradê do Instagram, com o símbolo a branco. */
.footer-social { margin-top: var(--space-md); }
.social-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.site-footer .social-link, .social-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: inherit; text-decoration: none; }
.social-link__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: #fff; box-shadow: 0 1px 2px rgba(10, 20, 40, .18); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.social-link__icon svg { width: 22px; height: 22px; }
.social-link--linkedin .social-link__icon { background: #0a66c2; }
.social-link--instagram .social-link__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-link--facebook .social-link__icon { background: #1877f2; }
.social-link:hover .social-link__icon, .social-link:focus-visible .social-link__icon { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10, 20, 40, .28); }
.social-link:focus-visible { outline: none; }
.social-link:focus-visible .social-link__icon { outline: 2px solid var(--bmd-green); outline-offset: 3px; }
.social-links--labelled .social-link { font-weight: var(--weight-semibold); color: var(--color-text); }
.social-links--labelled .social-link:hover { color: var(--color-accent-text); }
.contact-card__social-lead { margin-top: var(--space-lg); margin-bottom: var(--space-xs); color: var(--color-text-muted); font-size: var(--text-sm); }
.social-links--labelled { gap: .75rem 1.5rem; margin-bottom: var(--space-lg); }
@media (prefers-reduced-motion: reduce) { .social-link__icon { transition: none; } .social-link:hover .social-link__icon { transform: none; } }

/* ---- Botões lado a lado ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
@media (min-width: 40em) { .actions .bmd-button { width: auto; padding-inline: var(--space-lg); } }
.text-link { color: var(--color-accent-text); font-weight: var(--weight-semibold); text-underline-offset: 3px; }

/* ---- Topo das páginas interiores ---- */
.page-hero { padding-bottom: clamp(var(--space-xl), 6vw, var(--space-3xl)); }
.page-hero .hero__inner { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { max-width: 20ch; font-size: var(--text-4xl); letter-spacing: -.035em; }
.page-hero .lead { max-width: 44rem; margin-top: var(--space-md); }
.page-hero .actions { margin-top: var(--space-lg); }
/* Só a partir do tablet: no telemóvel valem as curvas da landing (experience.css), senão ficavam
   fora da vista e os fios não tinham onde nascer. */
@media (min-width: 48em) { .page-hero .hero-connections { width: 44%; bottom: -30%; } }
/* No telemóvel, os pontos de onde nascem os fios caem nos últimos ~50 px do topo: espaço livre
   por baixo do texto, para não ficarem em cima dele. */
@media (max-width: 47.99em) { .page-hero { padding-bottom: var(--space-3xl); } }

/* ---- Pilares da página inicial ---- */
.pillars .card { display: flex; flex-direction: column; }
.pillars .card p { flex: 1; }
.pillars .text-link { margin-top: var(--space-sm); }

/* ---- Serviços ---- */
.service-family { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--color-border); scroll-margin-top: var(--space-md); }
.service-family:first-of-type { border-top: 0; padding-top: 0; }
.service-family__head p { margin-top: var(--space-sm); color: var(--color-text-muted); max-width: var(--measure); }
.service-family .card h3 { font-size: var(--text-lg); }
.service-family .card--editor { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-sm); }
.card--editor .check-list { margin-top: 0; }
@media (min-width: 62em) { .service-family { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; } }
.check-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.check-list li { position: relative; padding-left: 1.5rem; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.check-list li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .55rem; height: .55rem; border-radius: var(--radius-pill); background: var(--bmd-green); box-shadow: 0 0 0 3px rgba(18, 161, 80, .15); }

/* ---- Ofertas: os dois pontos de entrada comerciais ----
   Cartões-destaque: mais espaço interior, traço superior na cor da marca
   e ritmo vertical por gap (em vez de margens soltas que colavam os
   parágrafos "Limites" e o link final ao resto do texto). */
.card--offer { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-top: 3px solid var(--bmd-green); }
.card--offer .check-list { margin-top: 0; flex: 1 0 auto; }
.offer-limits { padding: var(--space-xs) var(--space-sm); background: var(--color-bg-alt); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); }
.offer-limits strong { color: var(--color-text); }
.offer-cta { text-align: center; }
@media (min-width: 40em) { .offer-cta { width: auto; padding-inline: var(--space-lg); align-self: flex-start; } }

/* ---- Processo em etapas ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); counter-reset: etapa; }
@media (min-width: 55em) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 55em) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.steps > li { position: relative; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); counter-increment: etapa; }
.steps > li::before { content: counter(etapa); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-text); color: var(--color-text-invert); font-weight: var(--weight-bold); }
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ---- Perguntas frequentes ---- */
.faq { max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--color-border-strong); padding: var(--space-xs) 0; }
.faq summary { min-height: 44px; padding: var(--space-2xs) 0; font-weight: 650; cursor: pointer; }
.faq details[open] summary { color: var(--color-accent-text); }
.faq details p { margin: var(--space-2xs) 0 var(--space-sm); color: var(--color-text-muted); max-width: var(--measure); }

/* ---- Etiquetas de ferramentas ---- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-md) 0 0; padding: 0; }
.tags li { padding: .3rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* ---- Contacto ---- */
.contact-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 55em) { .contact-layout { grid-template-columns: 1.1fr .9fr; } }
.contact-card { padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-md); }
.contact-card .bmd-button { margin-top: var(--space-md); }
.contact-card__email { display: block; margin-top: var(--space-sm); font-size: clamp(1rem, 4.2vw, 1.375rem); font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; text-underline-offset: 4px; }
.prompt-list { margin: var(--space-md) 0 0; padding-left: 1.3rem; display: grid; gap: var(--space-xs); }
.prompt-list li { padding-left: .3rem; }
.prompt-list li strong { display: block; }
.prompt-list li span { color: var(--color-text-muted); }

/* ---- Faixa de chamada à ação simples (sem formulário) ---- */
.cta--simple .cta__inner { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.cta--simple .actions { margin-top: var(--space-lg); }
.cta--simple .text-link { color: var(--color-text-invert); }
.text-link[data-strand-end] { padding-right: .6rem; }
/* Num link de texto, o ponto de chegada chega; a barra interior da caixa ficava colada ao texto. */
.has-strands .text-link.is-touched { box-shadow: none; }

/* ---- Faixa do autodiagnóstico na página inicial ---- */
.dx-band { padding-block: var(--space-xl); }
.dx-band__inner { display: grid; gap: var(--space-md); align-items: center; padding: clamp(var(--space-md), 4vw, var(--space-xl)); border: 1px solid rgba(14, 122, 61, .35); border-radius: var(--radius-lg); background: rgba(18, 161, 80, .05); }
.dx-band__inner .lead { margin-top: var(--space-2xs); max-width: 40rem; }
@media (min-width: 55em) { .dx-band__inner { grid-template-columns: 1fr auto; } .dx-band__inner .bmd-button { width: auto; padding-inline: var(--space-lg); } }

/* ---- Acompanhamento do projeto (página do cliente, em exemplo) ---- */
.tracking-layout { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 62em) { .tracking-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.tracking-layout .lead { margin-top: var(--space-sm); max-width: 40rem; }
.tracking-layout .check-list { margin-top: var(--space-md); }
.tracking-layout .check-list li { font-size: var(--text-base); }
.tracking-layout .check-list strong { color: var(--color-text); }
.tracking-preview { margin: 0; }
.tracking-preview__frame { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-md); }
.tracking-preview__bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.tracking-preview__bar span { width: .6rem; height: .6rem; border-radius: var(--radius-pill); background: var(--color-border-strong); opacity: .6; }
.tracking-preview__bar p { flex: 1; min-width: 0; margin: 0 0 0 .5rem; padding: .2rem .7rem; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracking-preview__body { display: grid; gap: var(--space-md); padding: clamp(var(--space-md), 3vw, var(--space-lg)); }
.tracking-preview__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); }
.tracking-preview__head strong { font-size: var(--text-lg); }
.tracking-phase { padding: .25rem .75rem; border-radius: var(--radius-pill); background: rgba(18, 161, 80, .12); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tracking-boxes { display: grid; gap: var(--space-sm); }
@media (min-width: 30em) { .tracking-boxes { grid-template-columns: 1fr 1fr; } }
.tracking-box { padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.tracking-box--you { border-color: rgba(14, 122, 61, .35); background: rgba(18, 161, 80, .05); }
.tracking-box h4, .tracking-sessions h4 { margin: 0 0 .25rem; color: var(--color-text-muted); font-size: .75rem; font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
.tracking-box p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.tracking-sessions ol { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.tracking-sessions li { position: relative; padding-left: 1.4rem; }
.tracking-sessions li::before { content: ""; position: absolute; left: .15rem; top: .4em; width: .6rem; height: .6rem; border-radius: var(--radius-pill); background: var(--bmd-green); box-shadow: 0 0 0 3px rgba(18, 161, 80, .15); }
.tracking-sessions li + li::after { content: ""; position: absolute; left: .43rem; top: calc(-1 * var(--space-sm) + .2rem); height: calc(var(--space-sm) + .1rem); border-left: 2px solid var(--color-border); }
.tracking-sessions li:not(:first-child)::before { background: var(--color-border-strong); box-shadow: none; }
.tracking-sessions time { display: block; color: var(--color-text-muted); font-size: .75rem; }
.tracking-sessions strong { display: block; font-size: var(--text-sm); }
.tracking-sessions p { margin: .15rem 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.tracking-preview figcaption { margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

/* /blog.css */
/* Blog: índice, cartões de artigo e corpo dos artigos.
   Só tokens de styles.css; nada de cores nem tamanhos novos soltos.
   Os blocos comuns (.container, .section, .card, .grid, .check-list, .actions,
   .bmd-button) vêm de styles.css e site.css — aqui vive só o que é do blog. */

/* ---- Migalhas de pão: Início / Blog / Categoria ----
   Os links levam min-height de 44px para serem alvos de toque aceitáveis
   sem alargar a linha; o separador é decorativo e não é lido. */
.breadcrumb { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "/"; color: var(--color-border-strong); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-accent-text); font-weight: var(--weight-semibold); text-underline-offset: 3px; }
/* O último nível é a categoria do artigo. Não é link porque, enquanto houver
   poucos artigos, não existe página de categoria para onde levar. */
.breadcrumb li:last-child { font-weight: var(--weight-medium); }

/* ---- Etiqueta de categoria ----
   Mesma forma das etiquetas do portefólio, para o site continuar o mesmo. */
.blog-tag { display: inline-block; padding: .15rem .65rem; border: 1px solid var(--color-accent-text); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-accent-text); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .02em; }

/* ---- Índice: os três temas ----
   Cartões, não links: enquanto houver poucos artigos não há páginas de
   categoria e um cartão clicável prometia uma página que não existe. */
.blog-topic { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg); border-top: 3px solid var(--bmd-green); }
.blog-topic__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-2xs); border-radius: var(--radius-pill); background: rgba(18, 161, 80, .12); color: var(--color-accent-text); }
.blog-topic__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.blog-topic h3 { font-size: var(--text-lg); }
.blog-topic p { flex: 1; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.blog-topic__state { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ---- Índice: pesquisa, temas e «Mostrar mais» (blog.js) ----
   Sem JavaScript a barra fica escondida e aparecem todos os artigos. No telemóvel os temas
   ficam numa linha que desliza, para a lista começar logo abaixo da pesquisa. */
.blog-articles { scroll-margin-top: 4rem; }
.blog-tools { display: grid; gap: var(--space-sm); max-width: 52rem; margin: 0 auto var(--space-lg); }
.blog-tools[hidden], .post-card[hidden], .blog-more__button[hidden] { display: none; }
.blog-search { display: grid; gap: var(--space-3xs); }
.blog-search label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.blog-search input { width: 100%; min-height: 3rem; padding: 0 var(--space-sm) 0 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg) url("/assets/icon-search.svg") no-repeat 1rem center / 1.15rem; color: var(--color-text); font: inherit; font-size: 1rem; box-shadow: 0 1px 2px rgba(11, 37, 69, .05); }
.blog-search input:focus-visible { outline: 3px solid rgba(18, 161, 80, .35); outline-offset: 1px; border-color: var(--color-accent-text); }
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.blog-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; }
.blog-chip:hover { border-color: var(--color-accent-text); }
.blog-chip[aria-pressed="true"] { border-color: var(--color-accent-text); background: var(--color-accent-text); color: var(--color-text-invert); }
.blog-chip__count { font-weight: var(--weight-medium); opacity: .75; }
.blog-status { color: var(--color-text-muted); font-size: var(--text-sm); }
.blog-empty { max-width: 52rem; margin: 0 auto; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-bg); text-align: center; }
.blog-more { display: flex; justify-content: center; margin-top: var(--space-lg); }
.blog-more__button { min-height: 3rem; padding: 0 var(--space-lg); border: 1px solid var(--color-accent-text); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-accent-text); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.blog-more__button:hover { background: var(--color-accent-text); color: var(--color-text-invert); }
@media (max-width: 47.99em) {
  .blog-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); scrollbar-width: none; }
  .blog-filters::-webkit-scrollbar { display: none; }
  .post-card { padding: var(--space-md); }
  .post-card h3 { font-size: var(--text-lg); }
  .post-card__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---- Índice: lista de artigos ---- */
.post-list { display: grid; gap: var(--space-md); }
@media (min-width: 48em) { .post-list { grid-template-columns: repeat(2, 1fr); } }
.post-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding: var(--space-lg); }
/* Sombra suave em duas camadas: destaca o cartão do fundo sem o pesar (a de .card quase não se vê). */
.post-card { box-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 6px 18px -8px rgba(11, 37, 69, .16); }
.post-card:hover { box-shadow: 0 2px 4px rgba(11, 37, 69, .06), 0 14px 30px -10px rgba(11, 37, 69, .22); }
.post-card h3 { font-size: var(--text-xl); }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-card__summary { flex: 1; }

/* ---- Autoria e data: iguais no índice e no topo do artigo ---- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-sm); }
.post-meta a { color: var(--color-accent-text); font-weight: var(--weight-semibold); text-underline-offset: 3px; }
.post-meta__sep { color: var(--color-border-strong); }

/* ---- Topo do artigo ---- */
.post-hero h1 { max-width: 26ch; }
.post-hero .blog-tag { margin-bottom: var(--space-xs); }
.post-hero .lead { max-width: 42rem; }
.post-meta--hero { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--text-base); }
/* O artigo continua logo a seguir ao topo: sem o padding de início de secção,
   senão somava-se ao fundo do hero e abria um vazio antes da resposta curta. */
.post-hero { padding-bottom: var(--space-xl); }
.post-hero + .section { padding-top: 0; }

/* ---- Corpo do artigo ----
   Uma coluna estreita: texto corrido lê-se pela medida, não pela largura do ecrã. */
.post-body { display: grid; gap: var(--space-md); max-width: var(--container-narrow); }
.post-body h2 { margin-top: var(--space-lg); font-size: var(--text-2xl); }
/* Nos títulos do texto, balance partia linhas curtas a meio da coluna; pretty só evita a palavra solta. */
.post-body h2, .post-body h3 { text-wrap: pretty; }
.post-body > h2:first-child { margin-top: 0; }
.post-body h3 { font-size: var(--text-lg); }
/* Texto corrido na cor principal: o cinzento, bom para frases curtas, cansa ao fim de muitos parágrafos.
   O cinzento fica para o subtítulo, a autoria e as notas. */
.post-body p { color: var(--color-text); }
.post-body strong { color: var(--color-text); }
.post-body .check-list li { color: var(--color-text); font-size: var(--text-base); }

/* Resposta curta à pergunta do título, antes da explicação. */
.post-answer { padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--bmd-green); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-bg-alt); }
.post-answer h2 { margin-top: 0; margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
.post-answer p { color: var(--color-text); font-size: var(--text-md); line-height: var(--leading-relaxed); }

/* Passos concretos, numerados pelo CSS (o número é decoração da ordem da lista). */
.post-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); counter-reset: passo; }
.post-steps > li { position: relative; min-height: 2.4rem; padding-left: 3.25rem; counter-increment: passo; }
.post-steps > li::before { content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill); background: var(--color-accent-text); color: var(--color-text-invert); font-weight: var(--weight-bold); }
.post-steps h3 { margin-bottom: var(--space-3xs); }
.post-steps p { color: var(--color-text); }
.post-steps p + p { margin-top: var(--space-2xs); }

/* Listas simples dentro do texto (o que pedir, o que deixar de fora). */
.post-plain-list { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--space-2xs); color: var(--color-text); }
.post-plain-list li { padding-left: .3rem; }
.post-plain-list strong { color: var(--color-text); }

/* Nota de limite ou de exemplo fictício, no mesmo tom dos limites das ofertas. */
.post-note { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg-alt); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.post-note strong { color: var(--color-text); }

/* Fontes no fim do texto: discretas, mas legíveis e clicáveis. */
.post-sources { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.post-sources h2 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
.post-sources ol { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.post-sources a { color: var(--color-accent-text); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---- Próximo passo: uma ligação para a página relacionada e um CTA discreto ---- */
.post-next { display: grid; gap: var(--space-sm); max-width: 52rem; padding: clamp(var(--space-md), 4vw, var(--space-xl)); border: 1px solid rgba(14, 122, 61, .35); border-radius: var(--radius-lg); background: rgba(18, 161, 80, .05); }
.post-next h2 { font-size: var(--text-2xl); }
.post-next p { color: var(--color-text-muted); }
.post-next .actions { margin-top: var(--space-2xs); }

/* ---- Artigos relacionados: só quando existem e são do mesmo problema ---- */
.post-related { max-width: var(--container-narrow); }
.post-related h2 { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.post-related__card { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-xs); color: inherit; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.post-related__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-related__card strong { font-size: var(--text-lg); }
.post-related__card span { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* Os dois artigos iniciais partilham a estrutura semântica do site. */
.blog-article-container { max-width: 52rem; }
.blog-article__header { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); }
.blog-article__header h1 { max-width: 26ch; }
.blog-article__content { display: grid; gap: var(--space-md); max-width: var(--container-narrow); padding-top: var(--space-xl); }
.blog-article__content h2 { margin-top: var(--space-lg); font-size: var(--text-2xl); }
.blog-article__content p { color: var(--color-text-muted); }
/* Endereços e nomes escritos entre crases no Markdown (`ola@oteunegocio.ch`). */
.post-answer code, .post-body code { padding: 0 .3em; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-bg-alt); color: var(--color-text); font-family: inherit; font-size: .95em; overflow-wrap: anywhere; }
.blog-note { padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--bmd-green); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-bg-alt); }
.blog-note h2 { margin-top: 0; margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
.blog-note p { color: var(--color-text); }
.blog-article__footer { display: grid; gap: var(--space-sm); max-width: 52rem; margin-top: var(--space-2xl); padding: clamp(var(--space-md), 4vw, var(--space-xl)); border: 1px solid rgba(14, 122, 61, .35); border-radius: var(--radius-lg); background: rgba(18, 161, 80, .05); }
.blog-article__footer p { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); }

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

/* /consent.css */
.bmd-consent{position:fixed;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));left:1rem;right:1rem;z-index:10000;box-sizing:border-box;max-width:30rem;max-height:calc(100dvh - 2rem - env(safe-area-inset-bottom,0px));overflow:auto;padding:1rem;border:1px solid #9ca3af;border-radius:12px;background:#fff;color:#17212b;box-shadow:0 8px 30px #0003;font:15px/1.5 system-ui,sans-serif}
.bmd-consent[hidden],.bmd-consent-settings[hidden]{display:none}
.bmd-consent h2{margin:0 0 .5rem;font-size:1.05rem;color:inherit}
.bmd-consent p{margin:0 0 .75rem;color:inherit}
.bmd-consent div{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.bmd-consent button,.bmd-consent-settings{box-sizing:border-box;min-height:44px;padding:.5rem .75rem;border:1px solid #17212b;border-radius:6px;background:#fff;color:#17212b;font:600 14px/1.4 system-ui,sans-serif;cursor:pointer}
.bmd-consent a{display:inline-flex;align-items:center;min-height:44px;color:#164b82;text-decoration:underline}
.bmd-consent-settings{position:fixed;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));right:calc(.75rem + env(safe-area-inset-right,0px));z-index:9999;box-shadow:0 2px 8px #0002}
.bmd-consent button:focus-visible,.bmd-consent a:focus-visible,.bmd-consent-settings:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(max-width:480px){.bmd-consent{left:.75rem;right:.75rem}.bmd-consent button{flex:1}.bmd-consent a{flex-basis:100%;justify-content:center}}