/* ==========================================================================
   Simpla — estilos do site
   --------------------------------------------------------------------------
   Para mudar cores, letras ou espaços, muda só as variáveis em :root.
   Valores tirados do design system "Simpla".

   Índice
     1. Letras (alojadas no próprio site)
     2. Variáveis (cores, letras, espaços)
     3. Base e utilitários
     4. Tipografia
     5. Botões
     6. Topo e menu
     7. Hero (topo da página inicial)
     8. Cartões, estatística e destaques
     9. Passos ("Como trabalhamos")
    10. Compromissos
    11. Perguntas frequentes
    12. Questionário
    13. Página de preços
    14. Página de texto (privacidade, 404)
    15. Rodapé
    16. Botão fixo no telemóvel
    17. Animações ao fazer scroll

   Nota de segurança: o site tem uma Content-Security-Policy (ficheiro _headers)
   que proíbe estilos escritos dentro do HTML (style="…"). Se precisares de um
   estilo novo, cria uma classe aqui em vez de o escrever no HTML.
   ========================================================================== */

/* ---------- 1. Letras ----------
   Ficheiros em /assets/fonts/ (licença SIL OFL, ver OFL-*.txt na mesma pasta).
   Estão no próprio site para não enviar o IP dos visitantes à Google (RGPD)
   e para o site não depender de serviços externos.
   São fontes "variáveis": um só ficheiro serve todos os pesos (400 a 800). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---------- 2. Variáveis ---------- */
:root {
  /* Cores */
  --surface: #f3efe6;         /* linho: fundo da página */
  --surface-raised: #fbf9f4;  /* cartões e formulários */
  --surface-sunken: #e7e1d3;  /* faixas alternadas e rodapé */
  --ink: #1f2326;             /* texto principal (granito) */
  --ink-muted: #565c63;       /* texto secundário */
  --line: #d3ccbb;            /* divisórias */
  --brand: #1f5c46;           /* verde Minho: botões e ligações */
  --brand-strong: #174836;    /* hover do verde */
  --on-brand: #f3efe6;        /* texto sobre verde */
  --accent: #c8e05a;          /* lima: só como preenchimento */
  --on-accent: #1f2326;       /* texto sobre lima */
  --signal: #b5492a;          /* erros de formulário */

  /* Secção escura (granito) */
  --dark: #1f2326;
  --dark-raised: #2a2f33;
  --dark-ink: #f1ede4;
  --dark-muted: #a7adb3;
  --dark-line: #4a535a;
  --dark-brand: #7cc4a0;

  /* Letras */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Formas e espaço */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);       /* margem lateral */
  --section-y: clamp(64px, 10vw, 128px);  /* espaço vertical de cada secção */
  --max: 1200px;                          /* largura máxima do conteúdo */
  --header-h: 88px;                       /* altura do topo fixo + folga, para as âncoras (#servicos…) não ficarem tapadas */
}
@media (max-width: 760px) {
  :root { --header-h: 124px; } /* no telemóvel o menu ocupa uma segunda linha */
}

/* ---------- 3. Base e utilitários ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dark :focus-visible { outline-color: var(--dark-brand); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[id] { scroll-margin-top: var(--header-h); }

/* Texto só para leitores de ecrã (invisível no ecrã) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "Saltar para o conteúdo": só aparece quando se navega com o teclado (Tab) */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 12px 18px; border-radius: var(--radius-pill);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-brand); }

.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sunken { background: var(--surface-sunken); }
.dark { background: var(--dark); color: var(--dark-ink); }
.stack { display: flex; flex-direction: column; }
.stack--tight { gap: 10px; }

/* ---------- 4. Tipografia ---------- */
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--brand); }
.dark .eyebrow { color: var(--dark-brand); }
.display-xl {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.035em;
}
.display-l {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em;
}
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.h3--lg { font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.serif--brand { color: var(--brand); }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--ink-muted); }
.dark .lead { color: var(--dark-muted); }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.text-14 { font-size: 14px; }
.price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.03em;
}
.price small { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }

/* Cabeçalho de cada secção: sobretítulo, título e texto de introdução */
.section-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }

/* ---------- 5. Botões ----------
   .btn--primary (verde), .btn--secondary (contorno escuro), .btn--light (contorno claro, para fundos escuros) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 24px; border-radius: var(--radius-pill);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg { min-height: 52px; padding: 16px 28px; font-size: 16px; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--surface-sunken); color: var(--ink); }
.btn--light { background: transparent; color: var(--dark-ink); border-color: var(--dark-ink); }
.btn--light:hover { background: var(--dark-raised); color: var(--dark-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--loose { gap: 12px 20px; }

/* ---------- 6. Topo e menu ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-header .btn { min-height: 44px; padding: 12px 22px; font-size: 14px; white-space: nowrap; }
/* No telemóvel o menu passa para uma segunda linha, por baixo do logótipo e do botão */
@media (max-width: 760px) {
  .site-header__inner { gap: 4px 12px; padding-block: 10px 4px; }
  .nav { order: 3; width: 100%; gap: 24px; font-size: 14px; }
  .nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .site-header .btn { padding: 10px 16px; font-size: 13px; }
}
/* Ecrãs muito estreitos (ex.: 320px): o botão do topo não cabe ao lado do logótipo.
   Esconde-se, porque o hero e o botão fixo do fundo já levam ao questionário. */
@media (max-width: 380px) {
  .site-header .btn { display: none; }
}

/* ---------- 7. Hero ---------- */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 6vw, 80px); padding-block: clamp(48px, 8vw, 112px) clamp(56px, 8vw, 104px); }
.hero__text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__sub { display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
.hero__sign { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; font-weight: 600; }
.hero__visual { flex: 1 1 300px; max-width: 460px; min-width: 0; width: 100%; margin-inline: auto; }
.hero__art {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--brand);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__art svg { width: 62%; height: auto; }
@media (max-width: 760px) {
  .hero__visual { max-width: none; }
  .hero__art { aspect-ratio: 16 / 10; }
  .hero__art svg { width: 34%; margin-bottom: 40px; }
}
.hero__tags { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font-size: 13px; font-weight: 600; }
.tag--accent { background: var(--accent); color: var(--on-accent); }
.chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
}
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); flex: none; }

/* Faixa com os três "vistos" por baixo do hero */
.proof-strip { border-block: 1px solid var(--line); }
.proof-strip ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 32px; padding-block: 24px; font-size: 15px; font-weight: 600; }
.proof-strip li { display: flex; align-items: center; gap: 12px; }
.proof-strip svg { width: 20px; height: 20px; flex: none; color: var(--brand); }

/* Topo das páginas interiores (ex.: Preços) */
.page-hero { padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.page-hero > .stack { gap: 28px; }
.page-hero h1 { font-size: clamp(44px, 6.6vw, 92px); max-width: 900px; }
.page-hero .lead { max-width: 640px; }

/* ---------- 8. Cartões, estatística e destaques ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.card { background: var(--surface-raised); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.card--brand { background: var(--brand); color: var(--on-brand); }
.card--brand .muted, .card--brand .price small { color: var(--on-brand); opacity: .85; }
.card__label { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.card__grow { flex-grow: 1; } /* empurra o rodapé do cartão para baixo, para os cartões ficarem alinhados */
.card__foot { padding-top: 16px; border-top: 1px solid var(--line); }
.card--brand .card__foot { border-top-color: rgba(243, 239, 230, .3); }
.icon-badge { width: 48px; height: 48px; border-radius: 999px; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-badge svg { width: 24px; height: 24px; color: var(--ink); }
.icon-badge--accent { background: var(--accent); }

.stat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 16px;
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--dark); color: var(--dark-ink);
}
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 7vw, 88px); line-height: .9; letter-spacing: -0.04em; }
.stat__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; }
.stat__text .small { color: var(--dark-muted); }
.stat__text a { color: var(--dark-muted); }

.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 16px; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.callout--raised { background: var(--surface-raised); border-color: transparent; }
.callout__text { flex: 1 1 420px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; }
.callout__text--lg { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; }
.callout__title { font-size: 14px; font-weight: 600; }
.callout .serif { font-size: 1.3em; }

/* ---------- 9. Passos ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px 24px; }
.step { display: flex; flex-direction: column; gap: 16px; }
.step .h3 { font-weight: 700; }
.step__head { display: flex; align-items: center; gap: 12px; }
.step__num {
  flex: none; width: 52px; height: 52px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.step__num--accent { background: var(--accent); color: var(--on-accent); }
.step__line { flex-grow: 1; height: 3px; border-radius: 3px; background: var(--brand); }
.step p { color: var(--ink-muted); }

/* ---------- 10. Compromissos ----------
   .commit-list: lista curta (página inicial). .commit-cards: cartões (página de preços). */
.commit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 48px; }
.commit-list li { display: flex; gap: 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--dark-line); font-size: 18px; }
.commit-list .num { flex: none; font-size: 13px; font-weight: 600; color: var(--dark-muted); }
.commit-more { margin-top: 32px; }
.commit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.commit-cards li { background: var(--dark-raised); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.commit-cards .num { font-size: 13px; font-weight: 600; color: var(--dark-muted); }
.commit-cards p { color: var(--dark-muted); }
/* Cartão final em lima ("Sempre teu."): só decorativo, escondido dos leitores de ecrã com aria-hidden */
.commit-cards .commit-end { background: var(--accent); color: var(--on-accent); justify-content: flex-end; gap: 6px; }
.commit-end .serif { font-size: 40px; line-height: 1; }
.commit-end__sub { font-size: 15px; font-weight: 600; }

/* ---------- 11. Perguntas frequentes ----------
   Usa <details>/<summary>: abre e fecha sem JavaScript. */
.faq-wrap { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); }
.faq-wrap > .section-head { flex: 1 1 300px; margin-bottom: 0; }
.faq { flex: 999 1 560px; min-width: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px;
  min-height: 64px; padding: 22px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__num { flex: none; width: 24px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.faq__q { flex-grow: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2vw, 22px); line-height: 1.25; }
.faq__icon { flex: none; width: 22px; height: 22px; color: var(--brand); transition: transform .2s; }
.faq details[open] .faq__icon { transform: rotate(45deg); } /* o "+" vira "×" quando a pergunta está aberta */
.faq__a { padding: 0 44px 24px; max-width: 640px; color: var(--ink-muted); }

/* ---------- 12. Questionário ---------- */
.form-wrap { display: flex; flex-wrap: wrap; gap: 16px; }
.form-intro {
  flex: 1 1 340px; position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--brand); color: var(--on-brand); padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 24px;
}
.form-intro .eyebrow { color: var(--on-brand); }
.form-intro .display-l { font-size: clamp(34px, 4.2vw, 56px); }
.form-intro p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; }
.form-intro ul { display: flex; flex-direction: column; gap: 12px; font-weight: 600; }
.form-intro li { display: flex; align-items: center; gap: 12px; }
.form-intro__art { position: absolute; right: -40px; bottom: -60px; width: 200px; height: auto; opacity: .18; pointer-events: none; }
.form-card { flex: 999 1 560px; min-width: 0; border-radius: var(--radius-lg); background: var(--surface-raised); padding: clamp(24px, 4vw, 48px); }
.form { display: flex; flex-direction: column; gap: 32px; }
/* Sem JavaScript o questionário não consegue enviar: esconde-se e aparece o aviso <noscript> */
html:not(.js) .form { display: none; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 14px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.form .contact-set { padding-top: 28px; border-top: 1px solid var(--line); }
.form .contact-set .hint { display: block; margin: -6px 0 14px; }
/* Respostas em "pílula": o botão de rádio verdadeiro fica invisível e o <span> faz de botão */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-muted); background: var(--surface-raised); color: var(--ink);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.pill span:hover { border-color: var(--brand); }
.pill input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pill input[aria-invalid="true"] + span { border-color: var(--signal); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input {
  min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-muted);
  background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 16px; width: 100%;
}
.field input:focus { border-color: var(--brand); }
.field input[aria-invalid="true"] { border-color: var(--signal); }
.hint { font-size: 13px; color: var(--ink-muted); }
.site-url { margin-top: 16px; max-width: 420px; }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.form-error { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--signal); }
.form-error svg { width: 18px; height: 18px; flex: none; }
.form-error[hidden] { display: none; }
/* Plano B: enviar as respostas pelo WhatsApp ou por email quando o envio automático não está disponível */
.form-fallback { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.form-fallback[hidden] { display: none; }
.form-fallback p { font-size: 15px; }
/* Armadilha para robôs: campo fora do ecrã que as pessoas não veem */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-thanks { min-height: 420px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.form-thanks[hidden] { display: none; }
.form-thanks__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.form-thanks__icon svg { width: 28px; height: 28px; color: var(--on-accent); }
.form-thanks h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.025em; }
.form-thanks p { font-size: 18px; color: var(--ink-muted); max-width: 480px; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- 13. Página de preços ---------- */
/* Atalhos para cada grupo de preços */
.jump-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.jump-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.jump-nav a:hover { background: var(--surface-sunken); color: var(--ink); }
.price-section { padding-bottom: var(--section-y); }
.price-group {
  background: var(--surface-raised); border-radius: var(--radius-md); padding: clamp(24px, 3.5vw, 40px);
  display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 64px);
}
.price-group + .price-group { margin-top: 16px; }
.price-group__head { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.price-group__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; letter-spacing: -0.02em; }
.price-group__head p { color: var(--ink-muted); }
.price-list { flex: 999 1 520px; min-width: 0; }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.price-row__info { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.price-row__name { font-size: 17px; font-weight: 600; }
.price-row__name small { font-size: inherit; font-weight: 400; color: var(--ink-muted); }
.price-row__desc { font-size: 15px; color: var(--ink-muted); }
.price-row__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.price-row__price--free { gap: 6px; }
.price-row__value { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.price-row__value--free { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 22px; line-height: 1.2; letter-spacing: 0; }
.price-row__time { font-size: 13px; color: var(--ink-muted); }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.notes p { padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid var(--line); font-size: 15px; }
.notes strong { font-weight: 600; }

/* Os três modelos de pagamento (Compra, Híbrido, Mensal) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--surface-raised); border-radius: var(--radius-md); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.plan--featured { background: var(--brand); color: var(--on-brand); }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.plan__badge { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4vw, 52px); line-height: 1; letter-spacing: -0.03em; }
.plan__price span { display: block; margin-top: 6px; font-size: .55em; }
.plan__terms { margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.plan--featured .plan__terms { color: var(--on-brand); opacity: .85; }
.plan ul { padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.plan--featured ul { border-top-color: rgba(243, 239, 230, .3); }
.plan li { display: flex; gap: 10px; }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--brand); }
.plan--featured li svg { color: var(--accent); }
.plans-note { margin-top: 32px; font-size: 15px; max-width: 760px; }

/* Chamada final ("Não sabes por onde começar?") */
.final-cta { align-items: flex-start; gap: 24px; }
.final-cta h2 { max-width: 820px; }
.final-cta .lead { max-width: 620px; }

/* ---------- 14. Página de texto (privacidade, 404) ---------- */
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin-top: 24px; }
.prose ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.notice { padding: 16px 20px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 15px; }

/* ---------- 15. Rodapé ---------- */
.site-footer { background: var(--surface-sunken); }
.site-footer__inner { padding-block: clamp(48px, 6vw, 72px) 32px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.site-footer__col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.site-footer__col--brand { flex-basis: 280px; gap: 16px; font-size: 16px; }
.site-footer__col--brand img { height: 34px; width: auto; align-self: flex-start; }
.site-footer__label { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.site-footer .btn { align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 10px 20px; font-size: 14px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.site-footer__bottom--solo { border-top: 0; padding-top: 0; } /* páginas com rodapé curto, sem colunas */
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__bottom a { color: var(--ink-muted); }

/* ---------- 16. Botão fixo no telemóvel ----------
   Só existe em ecrãs pequenos. O site.js mostra-o depois do topo da página
   e esconde-o quando o questionário está à vista. */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; transform: translateY(140%); visibility: hidden;
  transition: transform .25s, visibility 0s linear .25s;
}
.mobile-cta .btn { width: 100%; box-shadow: 0 0 0 4px var(--surface); }
.mobile-cta.is-visible { transform: translateY(0); visibility: visible; transition: transform .25s, visibility 0s; }
@media (max-width: 760px) {
  .mobile-cta { display: block; }
  /* Espaço extra no fim do rodapé para o botão fixo não tapar os links */
  body:has(.mobile-cta) .site-footer__inner { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* ---------- 17. Animações subtis ao fazer scroll ----------
   Só se aplicam com JavaScript ativo (classe .js no <html>); sem JS o conteúdo aparece logo. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }