/* =====================================================================
   Netifica · V6 - Website as a Service
   Landing de subscrição (WaaS) · estúdio digital sério e contemporâneo.
   Display: Archivo · Corpo: Hanken Grotesk · Identidade do ecossistema
   Sistema baseado em tokens: redefinir :root re-veste todo o site.
   ===================================================================== */

@import url('/fonts/fonts.css');

:root {
    color-scheme: light;

    /* ---- Cores principais ----
       Marinho frio sobre papel quente. A tensão entre os dois é a
       identidade; por isso as hairlines também são quentes, para não
       lutarem com o fundo. */
    --c-primary:        #14324F;
    --c-primary-dark:   #0E2439;
    --c-primary-light:  #2C5F8F;
    --c-primary-soft:   #E9EDF2;
    --c-primary-tint:   #F3F1ED;

    /* ---- Acento único ----
       Teal escurecido face ao anterior (#00897b) para passar AA
       sobre o papel: 4,7:1 em texto normal. */
    --c-accent:         #0B7F73;
    --c-accent-dark:    #096A60;
    --c-accent-soft:    #E4F1EF;
    --c-success:        #0B7F73;   /* alinhado ao acento: um só verde no site */
    --c-success-dark:   #096A60;
    --c-success-soft:   #E4F1EF;
    --c-error:          #B42318;

    /* ---- Neutros (família quente) ---- */
    --c-bg:             #FBFAF8;
    --c-surface:        #FFFFFF;
    --c-surface-2:      #F5F3EF;
    --c-surface-3:      #EDEAE4;
    --c-ink:            #101828;
    --c-ink-soft:       #4A5567;
    /* Escurecido face a #77808F: nesse valor os rótulos pequenos em
       maiúsculas ficavam a 3,8:1 sobre o papel, abaixo do mínimo. */
    --c-ink-muted:      #616A78;
    --c-border:         #E7E3DC;
    --c-border-strong:  #D5CFC5;

    /* Superfície escura (rodapé e faixa de CTA) */
    --c-deep:           #14324F;
    --c-deep-2:         #0E2439;
    /* Tinta própria da superfície escura. Existe porque --c-ink inverteria
       com o tema e o fundo escuro é fixo: era essa a origem do rodapé
       ilegível. Nunca usar --c-ink sobre --c-deep. */
    --c-on-deep:        #F4F6F9;
    --c-on-deep-soft:   #BDC7D4;
    --c-on-deep-line:   rgba(244,246,249,.16);

    /* ---- Sombras ----
       Praticamente ausentes: a separação faz-se por hairline e por espaço.
       Só o que flutua mesmo (menu móvel, banner) recebe sombra visível. */
    --shadow-xs:        0 1px 2px rgba(16,24,40,.04);
    --shadow-sm:        0 1px 3px rgba(16,24,40,.06);
    --shadow-md:        0 4px 16px rgba(16,24,40,.07);
    --shadow-lg:        0 12px 32px rgba(16,24,40,.10);
    --shadow-primary:   0 1px 2px rgba(16,24,40,.10);
    --shadow-accent:    0 1px 2px rgba(16,24,40,.10);

    /* ---- Tipografia ---- */
    --font-display:     'Archivo', system-ui, -apple-system, sans-serif;
    --font-body:        'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* Escala fluida: sem saltos entre telemóvel e desktop. */
    --fs-xs:   .8125rem;
    --fs-sm:   .9375rem;
    --fs-base: 1.0625rem;
    --fs-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
    --fs-xl:   clamp(1.375rem, 1.20rem + .70vw, 1.625rem);
    --fs-2xl:  clamp(1.75rem,  1.45rem + 1.20vw, 2.25rem);
    --fs-3xl:  clamp(2.125rem, 1.60rem + 2.20vw, 3rem);
    --fs-4xl:  clamp(2.60rem,  1.70rem + 3.60vw, 4.25rem);

    /* Presença vem do aperto, não do tamanho. */
    --track-display: -.035em;
    --track-tight:   -.02em;
    --track-label:    .14em;
    --lh-display:    1.02;
    --lh-body:       1.65;

    /* ---- Espaçamento ---- */
    --sp-2xs:  .375rem;
    --sp-xs:   .625rem;
    --sp-sm:   .875rem;
    --sp-md:   1.25rem;
    --sp-lg:   2rem;
    --sp-xl:   3rem;
    --sp-2xl:  clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --sp-3xl:  clamp(5rem,   3.5rem + 6vw, 8.5rem);

    /* ---- Raios: precisos, não bolhosos ---- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-pill: 999px;

    --header-h: 72px;
    --max-w: var(--w-page);
    /* --- ESCALA DE MEDIDAS · 11 de agosto de 2026 --------------------
       O site tinha vinte larguras de layout diferentes (1140, 992, 832,
       820, 760, 736, 720, 672, 640, 620, 600, 560, 544, 540, 480, 440,
       391, 360...). Não era uma escala, era uma coleção: cada bloco
       escolheu a sua, e o resultado eram quase-acertos de 16 e 24px que
       se leem como desleixo sem se conseguir apontar onde.

       Cinco degraus, cada um com um papel. Ao acrescentar um bloco novo,
       escolhe-se um destes e não se inventa um número:

         --w-page   1140   o contentor da página
         --w-wide    992   cartões largos dentro do contentor
         --w-block   736   blocos centrados: hero, acordeão, painéis
         --w-read    640   medida de leitura: subtítulos, parágrafos soltos
         --w-col     544   texto dentro de uma coluna da grelha

       As larguras de ícone (16 a 52px) são outra coisa e ficam de fora.
       O 22ch do título de artigo também: é medida de display, não de
       layout. ---------------------------------------------------------- */
    --w-page:  1140px;
    --w-wide:  62rem;
    --w-block: 46rem;
    --w-read:  40rem;
    --w-col:   34rem;

    /* Os dois nomes antigos passam a apontar para a escala. Ficam porque
       são usados em dezenas de sítios; o que muda é deixarem de ser
       números próprios. */
    --max-w-narrow: var(--w-block);

    /* --- OS TOKENS DOS ARTIGOS · 11 de agosto de 2026 -----------------
       Os 17 artigos com CSS embutido referem `var(--text)`,
       `var(--text-muted)`, `var(--text-soft)` e `var(--brand)`
       **361 vezes**, e nenhum dos quatro estava definido em lado nenhum:
       nem aqui, nem no shared.css, nem no v7.css, nem dentro do <style>
       dos próprios artigos.

       Uma `color: var(--indefinido)` é uma declaração inválida, por isso
       o elemento herda do pai. Consequência medida: num artigo, o H1 de
       64px, os H2, o corpo, os números das estatísticas e a categoria dos
       artigos relacionados rendiam TODOS rgb(74,85,103), o cinzento do
       body. A hierarquia de cor de 17 das 32 páginas do site tinha
       colapsado numa cor só, e o acento teal nunca aparecia.

       Quatro linhas resolvem, e ligam os artigos à paleta da casa em vez
       de lhes dar uma segunda. Verificado que mais nenhum ficheiro do
       site usa estes quatro nomes: só os artigos mudam. */
    --text:       var(--c-ink);
    --text-muted: var(--c-ink-soft);
    --text-soft:  var(--c-ink-muted);
    --brand:      var(--c-accent);
    --measure: 62ch;
    --t-fast: .16s ease;
    --t-base: .26s cubic-bezier(.2,.7,.3,1);
}

/* =========================== DARK THEME ===========================
   Tokens-only override. Because the whole site references var(--c-*),
   redefining these here re-skins every page in dark mode. */
/* No-JS fallback: follow the OS preference unless the user forced light. */

/* =========================== RESET =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
    background: var(--c-bg);
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--c-ink-soft);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--c-ink);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 800;
}

/* Gramática partilhada do ecossistema: seleção na cor da marca */
::selection { background: var(--c-accent); color: #ffffff; }

/* =========================== LAYOUT =========================== */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md); }

.section { padding: var(--sp-2xl) 0; }
.section--tight { padding: var(--sp-xl) 0; }
.section--light { background: var(--c-surface); }
.section--bg { background: var(--c-bg); }
.section--tint { background: var(--c-primary-tint); }
.section--deep {
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(0,137,123,.30), transparent 60%),
        linear-gradient(165deg, var(--c-deep) 0%, var(--c-deep-2) 100%);
    color: #fff;
}

.section-header { text-align: center; max-width: var(--max-w-narrow); margin: 0 auto var(--sp-xl); }
.eyebrow {
    display: inline-block;
    font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-primary-light);
    margin-bottom: var(--sp-xs);
}
.section--deep .eyebrow { color: #7fd4cb; }

.section-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-sm); }
.section-title--white { color: #fff; }
.section-text { font-size: var(--fs-lg); color: var(--c-ink-soft); }
.section-header .section-text { font-size: var(--fs-base); }
.section-text--soft { color: var(--c-on-deep); }

@media (min-width: 768px) {
    :root { --fs-3xl: 3rem; }
    .section { padding: var(--sp-3xl) 0; }
    .section-title { font-size: var(--fs-3xl); }
}

/* =========================== BUTTONS =========================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: var(--radius-pill); border: 1.5px solid transparent;
    font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
    line-height: 1; cursor: pointer; white-space: nowrap;
    padding: .95rem 1.6rem;
    transition: transform var(--t-base), box-shadow var(--t-base),
                background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn--primary {
    background: var(--c-primary);
    color: #fff; box-shadow: var(--shadow-primary);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--c-primary-dark); box-shadow: var(--shadow-md); }
.btn--accent {
    background: var(--c-accent); color: #fff; box-shadow: var(--shadow-accent);
}
.btn--accent:hover { transform: translateY(-2px); background: var(--c-accent-dark); }
.btn--outline {
    background: var(--c-surface); color: var(--c-primary); border-color: var(--c-border-strong);
    box-shadow: var(--shadow-xs);
}
.btn--outline:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }
.btn--ghost { background: transparent; color: var(--c-ink-soft); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
.btn--full { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--fs-base); }

/* =========================== HEADER / NAV =========================== */
.header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
    z-index: 100;
    transition: box-shadow var(--t-base), height var(--t-base), background var(--t-base);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); height: calc(var(--header-h) - 8px); }
.header-inner {
    height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md);
    display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--c-primary); letter-spacing: -.04em; }
.logo-sub { font-size: .68rem; color: var(--c-ink-muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }

.nav {
    position: absolute; inset: var(--header-h) 0 auto 0;
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-115%); opacity: 0; pointer-events: none;
    transition: transform var(--t-base), opacity var(--t-base);
}
.nav--open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-list { padding: var(--sp-md); display: flex; flex-direction: column; gap: 2px; }
.nav-list a {
    display: block; padding: .7rem .75rem; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-soft);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-list a:hover { color: var(--c-primary); background: var(--c-primary-tint); }

.nav-cta {
    margin-top: var(--sp-xs);
    background: var(--c-primary); color: #fff !important;
    text-align: center; font-weight: 600;
    box-shadow: var(--shadow-primary);
}
.nav-cta:hover { background: var(--c-primary-dark) !important; }

.nav-toggle { display: flex; flex-direction: column; gap: 4px; border: none; background: none; cursor: pointer; padding: var(--sp-2xs); }
.nav-toggle span { width: 22px; height: 2px; border-radius: 999px; background: var(--c-ink); transition: transform var(--t-base), opacity var(--t-base); }
.nav-toggle--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle--open span:nth-child(2) { opacity: 0; }
.nav-toggle--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 960px) {
    .nav { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; border: none; box-shadow: none; }
    .nav-list { flex-direction: row; align-items: center; gap: var(--sp-2xs); padding: 0; }
    .nav-list a { padding: .5rem .85rem; }
    .nav-cta { margin-top: 0; padding: .55rem 1.2rem; border-radius: var(--radius-pill); }
    .nav-toggle { display: none; }
}

/* =========================== HERO =========================== */
/* O hero abre com uma só coisa: a afirmação. Um fundo praticamente liso
   (uma lavagem quente muito ténue) para que nada compita com o tipo. */
.hero {
    position: relative; overflow: hidden;
    padding-top: calc(var(--header-h) + var(--sp-2xl));
    padding-bottom: var(--sp-2xl);
    background:
        radial-gradient(900px 460px at 82% -10%, rgba(11,127,115,.05), transparent 62%),
        var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}
.hero-inner {
    position: relative; z-index: 1;
    max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md);
    display: grid; gap: var(--sp-xl); align-items: center;
}
/* Composição centrada. Foi tentado alinhar tudo à esquerda, mas sem uma
   coluna à direita que sirva de contrapeso (imagem, cartão, maquete) o
   conteúdo encosta-se a metade do ecrã e o resto fica vazio: em ecrãs
   largos lê-se como página partida, não como escolha. */
.hero-content { max-width: var(--w-block); margin-inline: auto; text-align: center; }
/* Etiqueta, não pill. A pill com fundo é o gesto genérico; um rótulo
   com tracking largo e uma marca de acento faz o mesmo trabalho com
   menos peso. */
.hero-kicker {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-muted);
    letter-spacing: var(--track-label); text-transform: uppercase;
    margin-bottom: var(--sp-md);
}
.hero-kicker::before {
    content: ""; width: 1.5rem; height: 2px; flex: 0 0 auto;
    background: var(--c-accent);
}
.hero-offer-bar {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .7rem;
    max-width: var(--w-read); margin: 0 auto var(--sp-md);
    padding: .6rem 1rem; text-align: center;
    background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm); line-height: 1.4; color: var(--c-ink);
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.hero-offer-bar:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hero-offer-bar i { width: 1.15em; height: 1.15em; flex-shrink: 0; color: var(--c-accent-dark); }
.hero-offer-bar strong { color: var(--c-accent-dark); }
.hero-offer-bar__cta { font-weight: 700; color: var(--c-accent-dark); white-space: nowrap; }
.hero--center .hero-offer-bar { margin-left: auto; margin-right: auto; }
.hero-title {
    font-size: var(--fs-4xl);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    margin-bottom: var(--sp-lg);
    text-wrap: balance;
}
/* Ênfase por cor e por um traço fino por baixo, não por uma caixa de
   marcador. A caixa lia-se como texto selecionado por engano. */
.hero-title em {
    font-style: normal;
    color: var(--c-accent);
    box-shadow: inset 0 -.09em 0 color-mix(in srgb, var(--c-accent) 32%, transparent);
}
.hero-subtitle {
    font-size: var(--fs-lg); color: var(--c-ink-soft);
    line-height: var(--lh-body);
    margin: 0 auto var(--sp-lg); max-width: var(--w-col);
}
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.hero-trust__pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink-soft);
    background: var(--c-surface); padding: .4rem .85rem;
    border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}

/* MORTA (nenhum HTML usa .hero-devices) */
.hero-devices { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 5 / 6; }
.device { position: absolute; filter: drop-shadow(0 22px 42px rgba(15,23,42,.18)); }
.device--desktop { top: 0; left: 0; width: 100%; }
.device--tablet { bottom: 0; left: -8%; width: 52%; z-index: 1; }
.device--mobile { bottom: 2%; right: -6%; width: 30%; z-index: 2; }

@media (min-width: 860px) {
    /* Duas colunas só quando existe mesmo uma segunda coluna (a maquete
       de dispositivos). Sem ela, a coluna vazia comprimia o hero. */
    .hero-inner:has(.hero-devices) { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--sp-2xl); }
    /* O `justify-content` entra aqui a 12 de agosto de 2026, e faltava desde
       que esta regra existe. Em coluna, o `align-items: center` da regra base
       centra os botões, porque aí o eixo transversal é o horizontal. Ao virar
       para linha, o eixo transversal passa a ser o vertical e o `align-items`
       deixa de os centrar: sem `justify-content`, a linha encosta ao início.

       O efeito media-se: a caixa dos botões ocupava 272..1008 como todo o
       resto do hero, mas os botões viviam em 272..652, ou seja centrados em
       462 quando o título, o cartão, o subtítulo e as garantias centram em
       640. Eram 178px de desvio à esquerda, na única linha da página que
       tem de ser carregada.

       O centrado existia, mas só sob `.hero--center`, e a homepage não usa
       esse modificador. O comentário dessa regra diz que ali "só se reforça
       o que a base já faz", e agora é verdade. */
    .hero-ctas { flex-direction: row; align-items: center; justify-content: center; }
    .hero-trust { justify-content: center; }
}

/* =========================== CARD (componente base reutilizável) =========================== */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-border-strong); }

.icon-chip {
    width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-md);
}
.icon-chip--primary { background: var(--c-primary-soft); }
.icon-chip--accent  { background: var(--c-accent-soft); }
.icon-chip--success { background: var(--c-success-soft); }

/* =========================== SOBRE =========================== */
.about-grid { display: grid; gap: var(--sp-lg); }
.about-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm); display: grid; gap: var(--sp-md); align-content: start; }
.about-card .section-title { font-size: var(--fs-xl); }
.about-card .section-text { font-size: var(--fs-base); }
.about-card .section-text + .section-text { margin-top: var(--sp-sm); }
.about-checks__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-md); }

.check-list { display: grid; gap: var(--sp-sm); }
.check-list li { display: flex; align-items: flex-start; gap: var(--sp-xs); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.check-list svg { flex-shrink: 0; margin-top: 2px; }

@media (min-width: 860px) {
    .about-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: start; }
    .about-card { grid-template-columns: 1fr; }
}

/* =========================== SERVIÇOS (cards leves) =========================== */
.services-grid { display: grid; gap: var(--sp-md); }
.service-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-border-strong); }
.service-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-xs); }
.service-card__text { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-md); }
.service-card__list { display: grid; gap: .35rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.service-card__list li { position: relative; padding-left: 1.25rem; }
.service-card__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--c-primary-light); }

@media (min-width: 600px) { .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .services-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* =========================== COMO FUNCIONA =========================== */
.how-grid { display: grid; gap: var(--sp-xl); }
.how-steps { margin-top: var(--sp-lg); display: grid; gap: var(--sp-md); }
.how-step { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--sp-md); align-items: flex-start; }
.how-step__num {
    width: 42px; height: 42px; border-radius: var(--radius-pill);
    background: var(--c-primary-soft); color: var(--c-primary);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.how-step__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: 2px; }
.how-step__text { font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* MORTA (nenhum HTML usa .how-illustration) */
.how-illustration { width: 100%; max-width: 360px; margin: 0 auto; filter: drop-shadow(0 24px 50px rgba(15,23,42,.14)); }
.how-illustration svg { width: 100%; height: auto; }

@media (min-width: 860px) { .how-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: center; } }

/* =========================== PROJETOS =========================== */
.projects-list { display: grid; gap: var(--sp-md); }
.project-card {
    border-radius: var(--radius-lg); overflow: hidden;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.project-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(0,0,0,.38); border-color: rgba(255,255,255,.22); }
.project-card__link, .project-card__link--static { display: block; height: 100%; color: inherit; }
.project-card__thumb--image { overflow: hidden; background: #1a2a66; aspect-ratio: 16 / 10; }
.project-card__thumb--image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-card__link:hover .project-card__thumb img,
.project-card__link:focus-visible .project-card__thumb img { transform: scale(1.04); }
.project-card__body { padding: var(--sp-lg); }
.project-card__tag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: #8fa6ff; margin-bottom: var(--sp-2xs); }
.project-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: #fff; margin-bottom: var(--sp-xs); transition: color var(--t-fast); }
.project-card__link:hover .project-card__title { color: var(--c-accent); }
.project-card__text { font-size: var(--fs-sm); color: var(--c-on-deep-soft); }

@media (min-width: 640px) { .projects-list { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* =========================== SIMULADOR (teaser) =========================== */
.simulator-grid { display: grid; gap: var(--sp-lg); align-items: center; }
.simulator-text { max-width: var(--w-col); }
.simulator-text .section-title { font-size: var(--fs-xl); }
.simulator-text .check-list { margin-top: var(--sp-md); }
.simulator-cta-box {
    background: var(--c-primary-tint); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg); text-align: center;
}
.simulator-note { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-top: var(--sp-sm); }

@media (min-width: 860px) { .simulator-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); } }

/* =========================== FAQ =========================== */
.faq-grid { display: grid; gap: var(--sp-md); }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-lg); box-shadow: var(--shadow-xs); }
.faq-q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-xs); }
.faq-a { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.faq-a a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 640px) { .faq-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* =========================== CONTACTO =========================== */
.contact-grid { display: grid; gap: var(--sp-xl); }
/* MORTA (nenhum HTML usa .contact-intro) */
.contact-intro { max-width: 480px; }
.contact-email-block { display: flex; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-md); }
.contact-email-link { color: var(--c-primary); font-weight: 600; font-size: var(--fs-lg); }
.contact-email-link:hover { text-decoration: underline; }
.contact-form-wrapper { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-md); box-shadow: var(--shadow-md); }

@media (min-width: 860px) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); align-items: start; } }

/* =========================== FOOTER =========================== */
.footer {
    background: var(--c-deep);
    color: var(--c-on-deep-soft); padding: var(--sp-2xl) 0 var(--sp-xl);
}
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-lg); }
.footer-main { display: flex; flex-direction: column; gap: var(--sp-sm); max-width: var(--w-read); }
.footer-brand { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--c-on-deep); letter-spacing: -.03em; text-transform: uppercase; }
.footer-text { font-size: var(--fs-sm); line-height: 1.7; color: var(--c-on-deep-soft); }
.footer-meta { font-size: var(--fs-xs); line-height: 1.8; color: var(--c-on-deep-soft); }
.footer-meta a { color: inherit; }
.footer-meta a:hover { color: var(--c-on-deep); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer-links a { color: var(--c-on-deep-soft); font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--c-on-deep); }

@media (min-width: 860px) {
    .footer-inner { flex-direction: row; justify-content: space-between; gap: var(--sp-2xl); }
    .footer-links { align-items: flex-end; }
}

/* =====================================================================
   SIMULADOR EMBUTIDO (sim-home) - alinhado aos tokens acima
   ===================================================================== */
.sim-home { width: 100%; }
.sim-home-progress { margin-bottom: var(--sp-md); }
.sim-home-progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-muted); margin-bottom: var(--sp-2xs); }
.sim-home-progress-track { height: 6px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.sim-home-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light)); transition: width var(--t-base); }

.sim-home-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-md); }

.sim-home-step { display: none; }
.sim-home-step.is-active { display: block; animation: simFade .3s ease; }
@keyframes simFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sim-home-question { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.sim-home-hint { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-bottom: var(--sp-md); }

.sim-home-options { display: grid; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.sim-home-options--2col { grid-template-columns: 1fr; }
@media (min-width: 560px) { .sim-home-options--2col { grid-template-columns: repeat(2, 1fr); } }

.sim-home-opt {
    position: relative; text-align: left; cursor: pointer;
    background: var(--c-surface); border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-md);
    display: grid; gap: .3rem;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.sim-home-opt:hover { border-color: var(--c-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-xs); }
.sim-home-opt--selected { border-color: var(--c-primary); background: var(--c-primary-tint); box-shadow: 0 0 0 3px rgba(24,0,173,.10); }
.sim-home-opt__check {
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--c-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; opacity: 0; transform: scale(.6); transition: all var(--t-fast);
}
.sim-home-opt--selected .sim-home-opt__check { opacity: 1; transform: scale(1); }
.sim-home-opt__top { display: flex; align-items: center; gap: .55rem; }
.sim-home-opt__icon { font-size: 1.25rem; }
.sim-home-opt__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
.sim-home-opt__desc { font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.5; }

.sim-home-select-error { font-size: var(--fs-xs); color: var(--c-accent-dark); margin-bottom: var(--sp-sm); display: none; }
.sim-home-select-error.is-visible { display: block; }

.sim-home-nav { display: flex; gap: var(--sp-sm); }
.sim-home-nav .btn { flex: 1; }
.sim-home-nav--split { justify-content: space-between; }

.sim-home-field { display: grid; gap: var(--sp-2xs); margin-bottom: var(--sp-sm); }
.sim-home-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.sim-home-field input, .sim-home-field textarea {
    font-family: var(--font-body); font-size: var(--fs-sm);
    padding: .7rem .85rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sim-home-field input::placeholder, .sim-home-field textarea::placeholder { color: var(--c-ink-muted); }
.sim-home-field input:focus-visible, .sim-home-field textarea:focus-visible {
    outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(24,0,173,.12);
}
.sim-home-field textarea { resize: vertical; }

.sim-home-price-card {
    background: linear-gradient(150deg, var(--c-primary), var(--c-primary-dark));
    color: #fff; border-radius: var(--radius-md); padding: var(--sp-lg);
    text-align: center; margin-bottom: var(--sp-md);
}
.sim-home-price-card__label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.sim-home-price-card__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); margin: .35rem 0; }
.sim-home-price-blur__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); margin: .35rem 0; filter: blur(8px); user-select: none; }
.sim-home-price-card__note { font-size: var(--fs-xs); opacity: .82; line-height: 1.5; }

.sim-home-loading {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(255,255,255,.94); border-radius: var(--radius-lg);
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-xs);
    text-align: center; padding: var(--sp-lg);
}
.sim-home-loading.is-visible { display: flex; }
.sim-home-loading p { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.sim-home-loading small { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.sim-home-spinner { width: 38px; height: 38px; border-radius: 999px; border: 3px solid var(--c-primary-soft); border-top-color: var(--c-primary); animation: simSpin .8s linear infinite; }
@keyframes simSpin { to { transform: rotate(360deg); } }

.sim-home-result { display: none; }
.sim-home-result.is-active { display: block; animation: simFade .3s ease; }
.sim-home-result-ok {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-xs); font-weight: 600; color: var(--c-success-dark);
    background: var(--c-success-soft); padding: .4rem .85rem; border-radius: var(--radius-pill);
    margin-bottom: var(--sp-md);
}
.sim-home-breakdown { background: var(--c-surface-2); border-radius: var(--radius-md); padding: var(--sp-md); margin-bottom: var(--sp-md); }
.sim-home-breakdown__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: var(--sp-xs); }
.sim-home-breakdown-row { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: var(--fs-xs); padding: .3rem 0; border-bottom: 1px solid var(--c-border); }
.sim-home-breakdown-row:last-child { border-bottom: none; }
.sim-home-breakdown-row span:first-child { color: var(--c-ink-muted); }
.sim-home-breakdown-row span:last-child { color: var(--c-ink); font-weight: 600; text-align: right; }
.sim-home-result-ctas { display: grid; gap: var(--sp-sm); }
.sim-home-audit-confirm { font-size: var(--fs-xs); color: var(--c-ink-soft); text-align: center; }
.sim-home-result-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); text-align: center; margin-top: var(--sp-sm); }
.sim-home-restart { display: block; margin: var(--sp-sm) auto 0; background: none; border: none; color: var(--c-primary); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-decoration: underline; }

.sim-home-guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-sm); margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--c-border); }
.sim-home-guarantee { font-size: var(--fs-xs); color: var(--c-ink-muted); }

/* =========================== INTRO LOGO (curto) =========================== */
.intro-logo {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 12% 12%, var(--c-primary) 0%, var(--c-deep-2) 72%);
    display: flex; align-items: center; justify-content: center;
    z-index: 999; color: #fff; pointer-events: none;
    opacity: 1; transition: opacity .5s ease;
}
.intro-logo--hide { opacity: 0; }
.intro-logo__inner { text-align: center; }
.intro-logo__brand { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: -.04em; }
.intro-logo__tagline { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--c-on-deep); margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .intro-logo { display: none; }
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================== PRIVACIDADE (preservado) =========================== */
.privacy-page { background: linear-gradient(180deg, var(--c-primary-tint) 0%, var(--c-surface) 220px); }
.privacy-hero { padding: 130px 0 48px; }
/* O `calc` é deliberado e não é um número inventado. Nas páginas legais este
   elemento acumula os dois papéis: leva a classe `.container`, que traz 20px de
   padding, e leva o estreitamento a `--w-block`. Como o `box-sizing` é
   `border-box`, os 736px passam a incluir o padding e o conteúdo fica com 696,
   o que punha o título das páginas legais em x=292 quando o do hero principal
   está em 272. No hero principal são elementos diferentes: o `.hero-inner`
   almofada, o `.hero-content` estreita, e por isso lá o conteúdo dá 736 certos.

   Somar o padding devolve os 736 ao conteúdo e mantém a proteção nas margens
   em ecrãs estreitos, que é o que o padding lá faz. Corrigido a 12 de agosto
   de 2026. */
.privacy-hero__inner { max-width: calc(var(--w-block) + var(--sp-md) * 2); }
.privacy-kicker { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: .82rem; font-weight: 600; }

/* =====================================================================
   PÁGINAS INTERNAS - cabeçalho de página / breadcrumb / banner
   (usado em simulador.html e outras páginas secundárias)
   ===================================================================== */
.header-back { font-size: var(--fs-sm); color: var(--c-primary); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.header-back:hover { text-decoration: underline; }

.page-banner {
    padding: calc(var(--header-h) + var(--sp-xl)) 0 var(--sp-xl);
    background:
        radial-gradient(700px 320px at 88% -10%, rgba(58,91,255,.30), transparent 60%),
        linear-gradient(165deg, var(--c-deep) 0%, var(--c-deep-2) 100%);
    color: #fff;
}
.page-banner-inner { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--sp-md); text-align: center; }
.page-crumb { display: flex; gap: .4rem; justify-content: center; font-size: var(--fs-xs); color: var(--c-on-deep-soft); margin-bottom: var(--sp-md); }
.page-crumb a { color: var(--c-on-deep); }
.page-crumb a:hover { text-decoration: underline; }
.page-banner__badge {
    display: inline-block; font-size: var(--fs-xs); font-weight: 600;
    color: #cdd8ff; background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    padding: .4rem .9rem; border-radius: var(--radius-pill); margin-bottom: var(--sp-md);
}
.page-banner__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: #fff; line-height: 1.12; margin-bottom: var(--sp-sm); }
.page-banner__sub { font-size: var(--fs-lg); color: var(--c-on-deep); max-width: var(--w-read); margin: 0 auto var(--sp-sm); }
.page-banner__note { font-size: var(--fs-sm); color: var(--c-on-deep-soft); max-width: var(--w-col); margin: 0 auto; }

@media (min-width: 768px) { .page-banner__title { font-size: var(--fs-3xl); } }

/* =====================================================================
   SIMULADOR - página dedicada (.sim-*) - alinhado aos tokens V5
   ===================================================================== */
.sim-page { padding: var(--sp-xl) 0 var(--sp-2xl); background: var(--c-bg); }
.sim-page .container { max-width: var(--w-block); }

.sim-progress-wrap { margin-bottom: var(--sp-md); }
.sim-progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-muted); margin-bottom: var(--sp-2xs); }
.sim-progress-track { height: 6px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.sim-progress-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light)); transition: width var(--t-base); }

.sim-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-md); }

.sim-step { display: none; }
.sim-step.is-active { display: block; animation: simFade .3s ease; }

.sim-question { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.sim-hint { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-bottom: var(--sp-md); }

.sim-options { display: grid; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.sim-options--2col { grid-template-columns: 1fr; }
@media (min-width: 560px) { .sim-options--2col { grid-template-columns: repeat(2, 1fr); } }

.sim-opt {
    position: relative; text-align: left; cursor: pointer;
    background: var(--c-surface); border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-md);
    display: grid; gap: .3rem;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.sim-opt:hover { border-color: var(--c-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-xs); }
.sim-opt--selected { border-color: var(--c-primary); background: var(--c-primary-tint); box-shadow: 0 0 0 3px rgba(24,0,173,.10); }
.sim-opt__check {
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--c-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; opacity: 0; transform: scale(.6); transition: all var(--t-fast);
}
.sim-opt--selected .sim-opt__check { opacity: 1; transform: scale(1); }
.sim-opt__top { display: flex; align-items: center; gap: .55rem; }
.sim-opt__icon { font-size: 1.3rem; }
.sim-opt__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
.sim-opt__desc { font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.5; }

.sim-select-error { font-size: var(--fs-xs); color: var(--c-accent-dark); margin-bottom: var(--sp-sm); display: none; }
.sim-select-error.is-visible { display: block; }

.sim-nav { display: flex; gap: var(--sp-sm); }
.sim-nav .btn { flex: 1; }
.sim-nav--split { justify-content: space-between; }

.sim-field { display: grid; gap: var(--sp-2xs); margin-bottom: var(--sp-sm); }
.sim-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.sim-field input, .sim-field textarea {
    font-family: var(--font-body); font-size: var(--fs-sm);
    padding: .7rem .85rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sim-field input::placeholder, .sim-field textarea::placeholder { color: var(--c-ink-muted); }
.sim-field input:focus-visible, .sim-field textarea:focus-visible {
    outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(24,0,173,.12);
}
.sim-field textarea { resize: vertical; }

.sim-price-card {
    background: linear-gradient(150deg, var(--c-primary), var(--c-primary-dark));
    color: #fff; border-radius: var(--radius-md); padding: var(--sp-lg);
    text-align: center; margin-bottom: var(--sp-md);
}
.sim-price-card__label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.sim-price-card__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); margin: .35rem 0; }
.sim-price-blur__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); margin: .35rem 0; filter: blur(8px); user-select: none; }
.sim-price-card__note { font-size: var(--fs-xs); opacity: .82; line-height: 1.5; }

.sim-loading {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(255,255,255,.94); border-radius: var(--radius-lg);
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-xs);
    text-align: center; padding: var(--sp-lg);
}
.sim-loading.is-visible { display: flex; }
.sim-loading p { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.sim-loading small { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.sim-spinner { width: 38px; height: 38px; border-radius: 999px; border: 3px solid var(--c-primary-soft); border-top-color: var(--c-primary); animation: simSpin .8s linear infinite; }

.sim-result { display: none; }
.sim-result.is-active { display: block; animation: simFade .3s ease; }
.sim-result-ok {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-xs); font-weight: 600; color: var(--c-success-dark);
    background: var(--c-success-soft); padding: .4rem .85rem; border-radius: var(--radius-pill);
    margin-bottom: var(--sp-md);
}
.sim-breakdown { background: var(--c-surface-2); border-radius: var(--radius-md); padding: var(--sp-md); margin-bottom: var(--sp-md); }
.sim-breakdown__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: var(--sp-xs); }
.sim-breakdown-row { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: var(--fs-xs); padding: .35rem 0; border-bottom: 1px solid var(--c-border); }
.sim-breakdown-row:last-child { border-bottom: none; }
.sim-breakdown-row span:first-child { color: var(--c-ink-muted); }
.sim-breakdown-row span:last-child { color: var(--c-ink); font-weight: 600; text-align: right; }
.sim-result-ctas { display: grid; gap: var(--sp-sm); }
.sim-audit-confirm { font-size: var(--fs-xs); color: var(--c-ink-soft); text-align: center; }
.sim-result-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); text-align: center; margin-top: var(--sp-sm); }
.sim-restart { display: block; margin: var(--sp-sm) auto 0; background: none; border: none; color: var(--c-primary); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-decoration: underline; }

.sim-guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-sm); margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--c-border); }
.sim-guarantee { font-size: var(--fs-xs); color: var(--c-ink-muted); }

/* =====================================================================
   ARTIGOS (blog) - .blog-* - alinhado aos tokens V5
   ===================================================================== */
.blog-hero {
    padding: calc(var(--header-h) + var(--sp-xl)) 0 var(--sp-xl);
    background:
        radial-gradient(700px 360px at 85% 0%, rgba(58,91,255,.10), transparent 60%),
        var(--c-bg);
}
.blog-hero__inner { max-width: var(--max-w-narrow); margin: 0 auto; text-align: center; }
.blog-hero__kicker {
    display: inline-block; font-size: var(--fs-xs); font-weight: 600;
    color: var(--c-primary); background: var(--c-primary-soft);
    padding: .4rem .9rem; border-radius: var(--radius-pill); margin-bottom: var(--sp-md);
}
.blog-hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--c-ink); line-height: 1.12; margin-bottom: var(--sp-md); }
.blog-hero__title span { color: var(--c-primary); }
.blog-hero__subtitle { font-size: var(--fs-lg); color: var(--c-ink-soft); max-width: var(--w-read); margin: 0 auto var(--sp-lg); }
.blog-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-lg); }
.blog-hero__stat { display: flex; flex-direction: column; }
.blog-hero__stat-val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-primary); }
.blog-hero__stat-label { font-size: var(--fs-xs); color: var(--c-ink-muted); }

@media (min-width: 768px) { .blog-hero__title { font-size: var(--fs-3xl); } }

/* Filtros */
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-xl); }
.filter-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
    color: var(--c-ink-soft); background: var(--c-surface);
    border: 1.5px solid var(--c-border); border-radius: var(--radius-pill);
    padding: .5rem 1rem; cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.filter-btn:hover { border-color: var(--c-primary-light); color: var(--c-primary); }
.filter-btn.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.filter-btn__count { font-size: var(--fs-xs); opacity: .7; }
.filter-btn.is-active .filter-btn__count { opacity: .85; }

/* Artigo em destaque */
.blog-featured {
    display: flex; align-items: center; gap: var(--sp-lg);
    background: linear-gradient(150deg, var(--c-primary), var(--c-primary-dark));
    color: #fff; border-radius: var(--radius-lg); padding: var(--sp-xl);
    margin-bottom: var(--sp-xl); box-shadow: var(--shadow-primary);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(24,0,173,.4); }
.blog-featured__kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; color: #cdd8ff; margin-bottom: var(--sp-sm); }
.blog-featured__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: #fff; line-height: 1.2; margin-bottom: var(--sp-sm); }
.blog-featured__excerpt { font-size: var(--fs-sm); color: var(--c-on-deep); margin-bottom: var(--sp-md); }
.blog-featured__meta { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.blog-featured__tag { font-size: var(--fs-xs); font-weight: 600; background: rgba(255,255,255,.14); padding: .3rem .75rem; border-radius: var(--radius-pill); }
.blog-featured__meta-item { font-size: var(--fs-xs); color: var(--c-on-deep-soft); }
.blog-featured__arrow { font-family: var(--font-display); font-size: 2rem; color: #fff; opacity: .6; flex-shrink: 0; transition: transform var(--t-base), opacity var(--t-base); }
.blog-featured:hover .blog-featured__arrow { transform: translateX(6px); opacity: 1; }

@media (max-width: 720px) { .blog-featured { flex-direction: column; align-items: flex-start; padding: var(--sp-lg); } .blog-featured__arrow { display: none; } }

/* Cabeçalho da grelha */
.blog-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.blog-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-ink); }
.blog-section-count { font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* Grelha de artigos */
.blog-grid { display: grid; gap: var(--sp-md); }
@media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .blog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.blog-card-v2 {
    display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm); color: inherit;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.blog-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-border-strong); }
.blog-card-v2__color-bar { height: 5px; background: var(--c-primary); }
.blog-card-v2--blue   .blog-card-v2__color-bar { background: var(--c-primary); }
.blog-card-v2--indigo .blog-card-v2__color-bar { background: var(--c-primary-light); }
.blog-card-v2--green  .blog-card-v2__color-bar { background: var(--c-success); }
.blog-card-v2--amber  .blog-card-v2__color-bar { background: var(--c-accent); }
.blog-card-v2--pink   .blog-card-v2__color-bar { background: #e85d9e; }
.blog-card-v2__body { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; }
.blog-card-v2__cat { font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); margin-bottom: var(--sp-xs); }
.blog-card-v2__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); line-height: 1.25; margin-bottom: var(--sp-xs); }
.blog-card-v2__excerpt { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-md); flex: 1; }
.blog-card-v2__footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-sm); border-top: 1px solid var(--c-border); }
.blog-card-v2__meta { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.blog-card-v2__read { font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); transition: transform var(--t-fast); }
.blog-card-v2:hover .blog-card-v2__read { transform: translateX(4px); }

/* Empty state */
.blog-empty { display: none; text-align: center; padding: var(--sp-2xl) var(--sp-md); }
.blog-empty.is-visible { display: block; }
.blog-empty__icon { font-size: 2.5rem; margin-bottom: var(--sp-sm); }
.blog-empty__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.blog-empty__desc { font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* Tópicos populares */
.blog-topics { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-xl); }
.blog-topics > span { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-muted); margin-right: var(--sp-2xs); }
.blog-topic { font-size: var(--fs-sm); color: var(--c-ink-soft); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: .4rem .85rem; transition: border-color var(--t-fast), color var(--t-fast); }
.blog-topic:hover { border-color: var(--c-primary-light); color: var(--c-primary); }

/* Newsletter */
.blog-newsletter {
    display: grid; gap: var(--sp-md); align-items: center;
    background: var(--c-primary-tint); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-xl); margin-top: var(--sp-xl);
}
.blog-newsletter__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.blog-newsletter__desc { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.blog-newsletter__action { display: grid; gap: var(--sp-sm); }
.blog-newsletter__input {
    font-family: var(--font-body); font-size: var(--fs-sm);
    padding: .8rem 1rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
}
.blog-newsletter__input:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(24,0,173,.12); }
.blog-newsletter__note { font-size: var(--fs-xs); color: var(--c-ink-muted); }

@media (min-width: 768px) {
    .blog-newsletter { grid-template-columns: 1.3fr 1fr; }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* =====================================================================
   V6 - WaaS LANDING COMPONENTS
   ===================================================================== */

/* --- Skip link (a11y) --- */
.skip-link {
    position: absolute; left: var(--sp-md); top: -100px; z-index: 200;
    background: var(--c-primary); color: #fff;
    padding: .7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600;
    transition: top var(--t-base);
}
.skip-link:focus { top: var(--sp-xs); }

/* --- Lucide icon defaults --- */
[data-lucide] { width: 22px; height: 22px; stroke-width: 2; vertical-align: middle; }

.header-actions { display: flex; align-items: center; gap: var(--sp-sm); }

/* --- Hero: variante "centered" ---
   As 13 páginas de serviço usam esta classe e o sistema é centrado, por
   isso aqui só se reforça o que a base já faz. */
.hero--center { text-align: center; }
.hero--center .hero-inner { display: block; max-width: var(--max-w); }
.hero--center .hero-content { max-width: var(--w-block); margin-inline: auto; }
.hero--center .hero-subtitle { margin-left: auto; margin-right: auto; }
.hero--center .hero-ctas { justify-content: center; }
.hero--center .hero-trust { justify-content: center; }
.hero-price-em { color: var(--c-accent); font-style: normal; }

/* --- Assinatura: a pergunta ---
   A promessa do produto demonstrada em vez de explicada. Não imita a
   interface de nenhum motor: é a tipografia da própria Netifica.
   Centrada como o resto do hero: com o bloco ao centro, uma barra só do
   lado esquerdo ficava desequilibrada, por isso a moldura é simétrica. */
.ask {
    margin: 0 auto var(--sp-lg);
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    max-width: var(--w-read);
    text-align: center;
}
.ask__label {
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-muted);
    letter-spacing: var(--track-label); text-transform: uppercase;
    margin-bottom: var(--sp-xs);
    display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.ask__label::before, .ask__label::after {
    content: ""; width: 1rem; height: 2px; flex: 0 0 auto;
    background: var(--c-accent);
}
/* Em ecrã estreito o rótulo parte em duas linhas e os traços ficam a
   meio da altura, o que se lê como desalinhamento. Saem. */
@media (max-width: 520px) {
    .ask__label::before, .ask__label::after { display: none; }
}
.ask__line {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--fs-xl); line-height: 1.25;
    letter-spacing: var(--track-tight); color: var(--c-ink);
    margin: 0; text-wrap: balance;
}
.ask__slot {
    color: var(--c-accent); font-weight: 800;
    transition: opacity .2s ease;
}
/* Ver a nota em css/v7.css sobre .answer__slot: os slots não vão a zero,
   senão a frase fica com buracos enquanto a palavra troca. */
.ask__slot.is-out { opacity: .18; }

@media (prefers-reduced-motion: reduce) {
    .ask__slot { transition: none; }
    .ask__slot.is-out { opacity: 1; }
}

/* --- Barra de garantias ---
   Sem ícones de visto: três factos separados por hairline pesam menos
   e leem-se mais depressa do que três linhas com símbolos. */
.proof-bar {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--sp-xs) var(--sp-md);
    font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.proof-bar__item { display: inline-flex; align-items: center; gap: var(--sp-md); }
.proof-bar__item + .proof-bar__item::before {
    content: ""; width: 1px; height: 1em; background: var(--c-border-strong);
}
.proof-bar__item [data-lucide] { width: 16px; height: 16px; color: var(--c-accent); }

/* --- Problem / Solution two columns --- */
.ps-grid { display: grid; gap: var(--sp-lg); }
@media (min-width: 820px) { .ps-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } }
.ps-col {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm);
}
.ps-col--new { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ps-col__head { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-md); }
.ps-col__head [data-lucide] { width: 26px; height: 26px; }
.ps-col--old .ps-col__head [data-lucide] { color: var(--c-error); }
.ps-col--new .ps-col__head [data-lucide] { color: #fff; }
.ps-col__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.ps-col--new .ps-col__title { color: #fff; }
.ps-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.ps-list li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; }
.ps-list li [data-lucide] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.ps-col--old .ps-list li [data-lucide] { color: var(--c-ink-muted); }
.ps-col--new .ps-list li { color: rgba(255,255,255,.92); }
.ps-col--new .ps-list li [data-lucide] { color: #7fe3da; }

/* --- How it works (3 steps) --- */
.steps-row { display: grid; gap: var(--sp-lg); counter-reset: step; }
@media (min-width: 820px) { .steps-row { grid-template-columns: repeat(3, 1fr); } }
.step-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm);
}
.step-card__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    background: var(--c-primary-soft); color: var(--c-primary);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
    margin-bottom: var(--sp-md);
}
.step-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.step-card__text { color: var(--c-ink-soft); }

/* --- Plans / Pricing --- */
.plans { display: grid; gap: var(--sp-lg); align-items: start; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); } }
.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured {
    border: 2px solid var(--c-accent);
    box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .plan--featured { transform: scale(1.03); } .plan--featured:hover { transform: scale(1.03) translateY(-4px); } }
.plan__badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--c-accent-dark); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .35rem .85rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-ink); }
.plan__tagline { color: var(--c-ink-muted); font-size: var(--fs-sm); margin-top: 2px; margin-bottom: var(--sp-md); }
.plan__offer {
    display: inline-flex; align-items: center; gap: .35rem; width: fit-content;
    margin-bottom: var(--sp-md); padding: .3rem .7rem;
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
    color: var(--c-accent-dark); border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.plan__offer i { width: 1em; height: 1em; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: var(--sp-2xs); }
.plan__amount { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--c-ink); line-height: 1; letter-spacing: -.03em; }
.plan__period { color: var(--c-ink-muted); font-size: var(--fs-sm); font-weight: 500; }
.plan__commit { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-bottom: var(--sp-md); }
.plan__divider { height: 1px; background: var(--c-border); margin: var(--sp-sm) 0 var(--sp-md); border: 0; }
.plan__intro { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); margin-bottom: var(--sp-sm); }
.plan__features { display: flex; flex-direction: column; gap: .6rem; margin-bottom: var(--sp-lg); flex: 1 1 auto; }
.plan__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.45; }
.plan__features li [data-lucide] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-accent); }
.plan .btn { width: 100%; }

/* --- Add-ons --- */
.addons {
    margin-top: var(--sp-xl);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg);
}
.offer-why {
    max-width: var(--w-block); margin: var(--sp-xl) auto 0; padding: var(--sp-lg);
    background: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, var(--c-border));
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.offer-why__title {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
    color: var(--c-ink); margin-bottom: var(--sp-sm);
}
.offer-why__title i { width: 1.2em; height: 1.2em; color: var(--c-accent-dark); }
.offer-why p { color: var(--c-ink-soft); line-height: 1.6; margin: 0; }
.addons__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--sp-md); }
.addons__grid { display: grid; gap: var(--sp-sm); }
@media (min-width: 680px) { .addons__grid { grid-template-columns: 1fr 1fr; } }
.addon {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md);
}
.addon__label { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.addon__label [data-lucide] { width: 18px; height: 18px; color: var(--c-primary-light); }
.addon__price { font-family: var(--font-display); font-weight: 700; color: var(--c-primary); white-space: nowrap; }

/* --- What's included (comparison table) --- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
.compare {
    width: 100%; min-width: 560px; border-collapse: collapse;
    background: var(--c-surface); font-size: var(--fs-sm);
}
.compare caption { text-align: left; padding: var(--sp-md); color: var(--c-ink-muted); font-size: var(--fs-xs); caption-side: bottom; }
.compare th, .compare td { padding: .85rem var(--sp-md); text-align: center; border-bottom: 1px solid var(--c-border); }
.compare thead th { background: var(--c-surface-2); font-family: var(--font-display); color: var(--c-ink); }
.compare thead th.is-featured { color: var(--c-accent-dark); }
.compare tbody th { text-align: left; font-weight: 500; color: var(--c-ink-soft); font-family: var(--font-body); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare .yes { color: var(--c-success); }
.compare .no { color: var(--c-ink-faint, var(--c-ink-muted)); opacity: .55; }
.compare .yes [data-lucide], .compare .no [data-lucide] { width: 19px; height: 19px; }
.compare .txt { color: var(--c-ink-soft); }
.compare col.is-featured, .compare td.is-featured { background: var(--c-accent-soft); }

/* --- Portfolio cards --- */
.portfolio-grid { display: grid; gap: var(--sp-lg); }
@media (min-width: 560px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); } }
.pf-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.pf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pf-card__visual {
    position: relative; aspect-ratio: 4 / 3; display: flex;
    align-items: center; justify-content: center; color: #fff;
}
.pf-card__visual [data-lucide] { width: 46px; height: 46px; opacity: .92; }
.pf-card__visual--health { background: linear-gradient(140deg, #1a3a5c, #00897b); }
.pf-card__visual--auto   { background: linear-gradient(140deg, #15304d, #2c6e8f); }
.pf-card__visual--legal  { background: linear-gradient(140deg, #1a3a5c, #3a6ea5); }
.pf-card__visual--food   { background: linear-gradient(140deg, #00756a, #1a3a5c); }
.pf-card__badge {
    position: absolute; top: var(--sp-sm); right: var(--sp-sm);
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
    padding: .25rem .6rem; border-radius: var(--radius-pill); backdrop-filter: blur(4px);
}
.pf-card__body { padding: var(--sp-md); display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.pf-card__sector { font-size: var(--fs-xs); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.pf-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-ink); }
.pf-card__link { margin-top: var(--sp-xs); font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-dark); display: inline-flex; align-items: center; gap: .3rem; }
.pf-card__link:hover { gap: .55rem; }
.pf-card__result { margin-top: var(--sp-xs); font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); display: flex; align-items: flex-start; gap: .4rem; line-height: 1.4; }
.pf-card__result i { width: 1em; height: 1em; flex-shrink: 0; margin-top: .15em; color: var(--c-accent-dark); }

/* --- Testimonials --- */
.tmls { display: grid; gap: var(--sp-lg); }
@media (min-width: 820px) { .tmls { grid-template-columns: repeat(3, 1fr); } }
.tml {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.tml__stars { display: flex; gap: 2px; color: #f5a623; margin-bottom: var(--sp-sm); }
.tml__stars [data-lucide] { width: 17px; height: 17px; fill: currentColor; }
.tml__quote { font-size: var(--fs-base); color: var(--c-ink-soft); line-height: 1.6; flex: 1; }
.tml__author { display: flex; align-items: center; gap: .7rem; margin-top: var(--sp-md); }
.tml__avatar {
    width: 42px; height: 42px; border-radius: var(--radius-pill); flex: 0 0 auto;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
}
.tml__name { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.tml__role { font-size: var(--fs-xs); color: var(--c-ink-muted); }

/* --- FAQ accordion (new) --- */
.acc { max-width: var(--max-w-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-sm); }
.acc__item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; }
.acc__q {
    width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-md); font-family: var(--font-display);
    font-weight: 600; font-size: var(--fs-base); color: var(--c-ink);
}
.acc__q [data-lucide] { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-primary); transition: transform var(--t-base); }
.acc__item.is-open .acc__q [data-lucide] { transform: rotate(180deg); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.acc__panel-inner { padding: 0 var(--sp-md) var(--sp-md); color: var(--c-ink-soft); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .acc__panel { transition: none; } }

/* --- Final CTA + lead form --- */
.cta-final .section-title--white { color: #fff; }
.lead-form {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: var(--sp-lg); box-shadow: var(--shadow-md);
    max-width: var(--w-col); margin: 0 auto;
}
.lead-field { margin-bottom: var(--sp-md); }
.lead-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); margin-bottom: .35rem; }
.lead-field input, .lead-field select, .lead-field textarea {
    width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--c-ink);
    background: var(--c-surface); border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm); padding: .8rem 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lead-field textarea { resize: vertical; min-height: 110px; }
.lead-field input:focus-visible, .lead-field select:focus-visible, .lead-field textarea:focus-visible {
    outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.lead-form .btn { width: 100%; margin-top: var(--sp-2xs); }
.lead-note { font-size: var(--fs-xs); color: var(--c-ink-muted); text-align: center; margin-top: var(--sp-sm); }
.lead-optional { font-weight: 400; color: var(--c-ink-muted); font-size: var(--fs-xs); }
.form-success {
    display: none; text-align: center; padding: var(--sp-xl) var(--sp-md);
}
.form-success.is-visible { display: block; }
.form-success [data-lucide] { width: 52px; height: 52px; color: var(--c-success); margin-bottom: var(--sp-md); }
.form-success__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.form-success__text { color: var(--c-ink-soft); }
.is-hidden { display: none; }

/* --- Footer (V6: 3-column layout reuse) --- */
.footer-cols { display: grid; gap: var(--sp-lg); }
@media (min-width: 760px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-xl); } }
.footer-social { display: flex; gap: var(--sp-sm); margin-top: var(--sp-md); }
.footer-social a {
    width: 38px; height: 38px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); color: var(--c-ink-soft); border: 1px solid var(--c-border);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { color: var(--c-primary); border-color: var(--c-primary); }
.footer-social [data-lucide] { width: 18px; height: 18px; }
/* O fundo do rodapé é escuro e fixo, por isso a tinta tem de vir de
   --c-on-deep e nunca de --c-ink/--c-ink-soft: essas invertiam com o tema
   e era daí que vinham os títulos a 1,27:1 e os links a 1,77:1. */
.footer-col__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-on-deep); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-md); }
.footer-col__links { display: flex; flex-direction: column; gap: .55rem; }
.footer-col__links a, .footer-contact a { color: var(--c-on-deep-soft); font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer-col__links a:hover, .footer-contact a:hover { color: var(--c-on-deep); }
.footer-contact { color: var(--c-on-deep-soft); font-size: var(--fs-sm); }
.footer-contact { display: flex; flex-direction: column; gap: .55rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.footer-contact div { display: flex; align-items: center; gap: .5rem; }
.footer-contact [data-lucide] { width: 17px; height: 17px; color: var(--c-primary-light); flex: 0 0 auto; }
.footer-bottom {
    margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--c-on-deep-line);
    display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); align-items: center; justify-content: space-between;
    font-size: var(--fs-xs); color: var(--c-on-deep-soft);
}
.footer-bottom nav { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.footer-bottom a { color: var(--c-on-deep-soft); }
.footer-bottom a:hover { color: var(--c-on-deep); }

/* --- Section intro left-aligned helper (avoid centering body copy) --- */
.section-header--left { text-align: left; margin-left: 0; }

/* --- Dark-mode button legibility ---
   In dark mode the token --c-primary (#4d8fc4) is tuned for text/links and is
   too light to carry white button text at AA. Use a deeper, accessible fill. */

/* ===== Bloco comparativo reutilizável (.vs-table) ===== */
.vs-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
.vs-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--c-surface, #fff); }
.vs-table caption { text-align: left; padding: var(--sp-md); color: var(--c-ink-muted); font-size: var(--fs-xs); caption-side: bottom; }
.vs-table th, .vs-table td { padding: .9rem var(--sp-md); text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.vs-table thead th { background: var(--c-surface-2); font-family: var(--font-display); color: var(--c-ink); font-weight: 600; }
.vs-table thead th.is-featured { color: var(--c-accent-dark); }
.vs-table tbody th { font-weight: 600; color: var(--c-ink); font-family: var(--font-body); white-space: nowrap; }
.vs-table tbody td { color: var(--c-ink-soft); }
.vs-table td.is-featured { background: var(--c-accent-soft); color: var(--c-ink); }
.vs-table tbody tr:last-child td, .vs-table tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 640px) {
    .vs-table tbody th { white-space: normal; }
}

/* ===== Resumo rápido (TL;DR) no topo dos artigos ===== */
.article-tldr {
    margin: 0 0 1.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: var(--c-accent-soft, #e0f2f0);
    border: 1px solid var(--c-border, #e2e8f0);
    border-left: 4px solid var(--c-accent, #00897b);
}
.article-tldr__label {
    display: inline-block;
    margin: 0 0 .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-accent-dark, #00756a);
}
.article-tldr p:not(.article-tldr__label) {
    margin: 0;
    line-height: 1.7;
    color: var(--c-ink, #0b1220);
    font-size: 1rem;
}

/* Banner de consentimento de cookies (RGPD / Google Consent Mode) */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
    max-width: var(--w-block); margin: 0 auto;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--c-deep-2, #0f2438); color: #ffffff;
    border-radius: 14px; padding: 18px 22px;
    box-shadow: var(--shadow-lg, 0 28px 60px rgba(15, 23, 42, 0.14));
    animation: cookieIn .3s ease;
}
@keyframes cookieIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-banner p { margin: 0; flex: 1 1 300px; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.cookie-banner a { color: #5ec7bb; font-weight: 700; text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner button { cursor: pointer; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 700; font-size: 0.9rem; border: 1.5px solid transparent; transition: filter .15s, border-color .15s; }
.cookie-banner .ck-accept { background: #00796b; color: #ffffff; }
.cookie-banner .ck-accept:hover { filter: brightness(1.1); }
.cookie-banner .ck-reject { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.cookie-banner .ck-reject:hover { border-color: #ffffff; }
@media (max-width: 560px) {
    .cookie-banner { flex-direction: column; align-items: stretch; }
    .cookie-banner p { flex: 0 1 auto; }
    .cookie-banner .cookie-actions button { flex: 1; }
}

/* =====================================================================
   V7 · Sistema minimalista
   Acrescentado na revisão de design. Vive no fim do ficheiro de propósito:
   estas regras são as últimas a ganhar em caso de empate de especificidade.
   ===================================================================== */

/* --- Entrada do hero -------------------------------------------------
   O único movimento orquestrado da página, além da linha da pergunta.
   Depende de <body class="fx">, que já existe nas páginas relevantes. */
.fx .hero-content > * { animation: nfRise .6s cubic-bezier(.2,.7,.3,1) backwards; }
.fx .hero-content > *:nth-child(1) { animation-delay: .04s; }
.fx .hero-content > *:nth-child(2) { animation-delay: .10s; }
.fx .hero-content > *:nth-child(3) { animation-delay: .16s; }
.fx .hero-content > *:nth-child(4) { animation-delay: .22s; }
.fx .hero-content > *:nth-child(5) { animation-delay: .28s; }
.fx .hero-content > *:nth-child(6) { animation-delay: .34s; }
@keyframes nfRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Faixa "incluído na subscrição" ----------------------------------
   Substitui o marquee infinito, que era aria-hidden e repetia as
   garantias que já estão no hero. A informação fica, o movimento sai. */
.included {
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
    padding: var(--sp-md) 0;
}
.included .container {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: var(--sp-xs) var(--sp-lg);
}
.included__label {
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-muted);
    letter-spacing: var(--track-label); text-transform: uppercase; margin: 0;
}
.included__list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp-xs) var(--sp-md);
    margin: 0; padding: 0; list-style: none;
    font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.included__list li { display: inline-flex; align-items: center; gap: var(--sp-md); }
.included__list li + li::before {
    content: ""; width: 1px; height: 1em; background: var(--c-border-strong);
}

/* --- Botões: um sólido, um discreto. Sem gradientes nem sombras pesadas. */
.btn--primary { box-shadow: none; }
.btn--primary:hover { background: var(--c-primary-dark); box-shadow: none; }
.btn--ghost {
    background: transparent; color: var(--c-ink);
    border-color: var(--c-border-strong);
}
.btn--ghost:hover { background: var(--c-surface-2); border-color: var(--c-ink-muted); }

/* --- Secções: separadas por espaço e hairline, não por bandas de cor.
   As bandas alternadas cortavam a página em faixas e faziam-na parecer
   mais longa e mais ruidosa do que é. */
.section--bg, .section--light { background: var(--c-bg); }
.section + .section { border-top: 1px solid var(--c-border); }

/* --- Foco visível e consistente em todo o site --- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .fx .hero-content > * { animation: none; }
}

/* --- Cabeçalhos de secção -------------------------------------------
   Centrados, como o hero. Todas as secções abrem da mesma maneira:
   traço de acento, rótulo, título. É a repetição que faz o sistema
   ler-se como sistema. */
.section-header {
    text-align: center;
    max-width: var(--max-w-narrow);
    margin: 0 auto var(--sp-xl);
}
.eyebrow {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-weight: 700; color: var(--c-ink-muted);
    letter-spacing: var(--track-label);
    margin-bottom: var(--sp-sm);
}
.eyebrow::before {
    content: ""; width: 1.5rem; height: 2px; flex: 0 0 auto;
    background: var(--c-accent);
}
/* Secções que continuam à esquerda por decisão própria (ex.: listas
   longas) mantêm o modificador e voltam ao rótulo sem centrar. */
.section-header--left { text-align: left; margin-left: 0; }
.section-header--left .eyebrow { justify-content: flex-start; }
.section--deep .eyebrow { color: var(--c-on-deep-soft); }
.section--deep .eyebrow::before { background: var(--c-on-deep); }

.section-title {
    letter-spacing: var(--track-display);
    line-height: 1.08;
    text-wrap: balance;
}
.section-header .section-text { max-width: var(--w-read); }

/* A escala de tipo já é fluida; esta sobreposição fixa anulava-a. */
@media (min-width: 768px) {
    :root { --fs-3xl: clamp(2.125rem, 1.60rem + 2.20vw, 3rem); }
}

/* --- Superfície escura: tinta correta em qualquer bloco escuro ------- */
.section--deep, .cta-band {
    background: var(--c-deep);
    color: var(--c-on-deep-soft);
}
.section--deep .section-title, .cta-band .section-title { color: var(--c-on-deep); }
.section-text--soft { color: var(--c-on-deep-soft); }

/* --- Correções de coerência apanhadas na revisão ---------------------- */

/* A barra de oferta ainda existe na página de web design. Centrada como
   o resto do hero, e sem o aspeto de caixa flutuante. */
.hero-offer-bar {
    margin-inline: auto;
    max-width: var(--w-read);
    background: var(--c-accent-soft);
    border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
    border-radius: var(--radius-md);
    box-shadow: none;
    text-align: center;
}
.hero-offer-bar:hover {
    transform: none; box-shadow: none;
    border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
}
.hero--center .hero-offer-bar { margin-inline: auto; }

/* Separadores só entre itens da mesma linha. Com flex-wrap, o seletor
   de irmão adjacente punha um traço órfão no início da linha seguinte;
   o espaçamento sozinho já separa que chegue. */
.proof-bar { gap: var(--sp-xs) var(--sp-lg); }
.proof-bar__item { gap: .45rem; }
.proof-bar__item + .proof-bar__item::before { content: none; }
.included__list { gap: var(--sp-xs) var(--sp-lg); }
.included__list li { gap: .45rem; }
.included__list li + li::before { content: none; }

/* --- Artigos ----------------------------------------------------------
   O CSS dos artigos vive inline no <head> de cada um dos 22 ficheiros.
   Em vez de os editar um a um, sobrepõe-se aqui com um seletor de maior
   especificidade (0,2,0 contra 0,1,0), que ganha independentemente da
   ordem. Se algum dia esse CSS for extraído para um ficheiro comum,
   este bloco pode desaparecer. */
.article-hero .article-title {
    max-width: 22ch;
    letter-spacing: var(--track-display);
}

/* O título da faixa de CTA no fim de cada artigo estava INVISÍVEL.
   A faixa tem fundo escuro (gradiente de #111827 para #0f172a) e o
   título apanhava #101828 da regra global de h2: contraste medido de
   **1,00:1**. Esteve assim no fim de 17 artigos.

   É o caso exato que o aviso do projeto descreve: nunca usar tinta de
   modo claro sobre superfície escura. A sobrelinha não se mexe, que já
   está em rgba(255,255,255,.72) e faz o degrau para o título. */
.article-cta .article-cta__title { color: var(--c-on-deep); }
.article-hero .article-kicker {
    background: transparent; padding: 0; border-radius: 0;
    display: flex; align-items: center; gap: .6rem;
    color: var(--c-ink-muted); font-weight: 700;
    letter-spacing: var(--track-label);
}
.article-hero .article-kicker::before {
    content: ""; width: 1.5rem; height: 2px; flex: 0 0 auto;
    background: var(--c-accent);
}
.article-hero .article-subtitle { max-width: var(--w-read); }

/* --- Botões e texto sobre superfícies escuras -------------------------
   Na faixa de CTA o fundo é o mesmo marinho do botão primário, o que o
   tornava invisível. Sobre escuro o botão inverte: papel com tinta
   escura, que é também o maior contraste possível ali. */
.cta-band .btn--primary,
.section--deep .btn--primary {
    background: var(--c-on-deep);
    color: var(--c-primary-dark);
}
.cta-band .btn--primary:hover,
.section--deep .btn--primary:hover {
    background: #fff;
    color: var(--c-primary-dark);
}
.cta-band .btn--ghost,
.section--deep .btn--ghost {
    background: transparent; color: var(--c-on-deep);
    border-color: var(--c-on-deep-line);
}
.cta-band .btn--ghost:hover,
.section--deep .btn--ghost:hover {
    background: rgba(244,246,249,.10); border-color: var(--c-on-deep-soft);
}
.cta-band .section-text,
.section--deep .section-text { color: var(--c-on-deep-soft); }

/* Texto simples dentro do bloco de contactos do rodapé (o que não é
   ligação) herdava a tinta do modo claro. */
.footer-contact, .footer-contact * { color: var(--c-on-deep-soft); }
.footer-contact a:hover { color: var(--c-on-deep); }

/* Foco visível também sobre escuro. */
.cta-band :focus-visible,
.section--deep :focus-visible,
.footer :focus-visible { outline-color: var(--c-on-deep); }

/* A linha da pergunta reserva a largura do maior exemplo em cada slot,
   para não saltar ao trocar. Precisa de espaço para caber numa linha em
   ecrã largo; em telemóvel parte, o que é aceitável. */
.ask { max-width: var(--w-read); }
@media (min-width: 860px) { .ask__line { white-space: nowrap; } }
.ask__line { max-width: 100%; }

/* Só para leitores de ecrã. Não existia no CSS e o diagnóstico usa-a em
   dois sítios: a etiqueta do campo de URL (que aparecia à vista) e o campo
   honeypot do formulário. Um honeypot visível é pior do que nenhum: o
   utilizador preenche-o e a submissão é descartada em silêncio. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* =====================================================================
   Diagnóstico (diagnostico.html)
   ===================================================================== */

/* --- Campo único --- */
.diag-form { margin: 0 auto var(--sp-md); max-width: var(--w-col); }
.diag-field {
    display: flex; gap: var(--sp-xs);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--sp-2xs);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.diag-field:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.diag-field input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; outline: none;
    font-family: var(--font-body); font-size: var(--fs-base);
    color: var(--c-ink); padding: .7rem .8rem;
}
.diag-field input::placeholder { color: var(--c-ink-muted); }
.diag-field .btn { flex: 0 0 auto; }
/* Em ecrã estreito o campo e o botão lado a lado não cabem: o conteúdo
   mínimo dos dois somado ultrapassava os 375px e empurrava o hero para
   fora do centro. Passam a empilhados. */
@media (max-width: 560px) {
    .diag-field { flex-direction: column; align-items: stretch; }
    .diag-field input { text-align: center; }
    .diag-field .btn { width: 100%; }
}
.diag-hint { font-size: var(--fs-sm); color: var(--c-ink-muted); margin: var(--sp-xs) 0 0; }

/* --- A analisar --- */
.diag-steps__label {
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-muted);
    letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: var(--sp-sm);
}
.diag-steps { max-width: var(--w-col); margin-inline: auto; }
.diag-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-xs); }
.diag-steps__list li {
    display: flex; align-items: center; gap: var(--sp-sm);
    color: var(--c-ink-muted); font-size: var(--fs-sm);
    opacity: .45; transition: opacity var(--t-base), color var(--t-base);
}
.diag-steps__list li::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-border-strong); flex: 0 0 auto;
    transition: background var(--t-base);
}
.diag-steps__list li.is-on { opacity: 1; color: var(--c-ink); }
.diag-steps__list li.is-on::before { background: var(--c-accent); }

/* --- Erro --- */
.diag-erro {
    border: 1px solid var(--c-border); border-left: 2px solid var(--c-error);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--c-surface); padding: var(--sp-lg); max-width: var(--w-read);
    margin-inline: auto; text-align: center;
}
.diag-erro__titulo { font-family: var(--font-display); font-weight: 800; color: var(--c-ink); margin-bottom: var(--sp-2xs); }
.diag-erro__texto { color: var(--c-ink-soft); margin-bottom: var(--sp-md); }

/* --- Pontuação --- */
.diag-score {
    display: grid; gap: var(--sp-xs); justify-items: center;
    text-align: center; margin-bottom: var(--sp-md);
}
.diag-score__num {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1;
    letter-spacing: var(--track-display); color: var(--c-ink);
}
.diag-score__max { font-size: .35em; color: var(--c-ink-muted); font-weight: 700; }
.diag-score__texto .section-title { margin-bottom: var(--sp-2xs); }
.diag-score__texto { text-align: center; }
.diag-score__texto .section-text { max-width: var(--w-col); margin-inline: auto; }

.diag-bar {
    max-width: var(--w-read); margin-inline: auto;
    height: 6px; border-radius: var(--radius-pill);
    background: var(--c-surface-3); overflow: hidden; margin-bottom: var(--sp-2xl);
}
.diag-bar__fill {
    height: 100%; width: 0; border-radius: inherit;
    background: var(--c-accent); transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.diag-bar__fill[data-nivel="medio"] { background: #B78103; }
.diag-bar__fill[data-nivel="mau"]   { background: var(--c-error); }
@media (prefers-reduced-motion: reduce) { .diag-bar__fill { transition: none; } }

.diag-h3 {
    text-align: center;
    font-family: var(--font-display); font-weight: 800;
    font-size: var(--fs-xl); letter-spacing: var(--track-tight);
    color: var(--c-ink); margin: 0 0 var(--sp-md);
}

/* --- Lista de conclusões --- */
.diag-lista {
    list-style: none; margin: 0 auto var(--sp-2xl); padding: 0;
    display: grid; gap: var(--sp-sm); max-width: var(--w-block); text-align: left;
}
.diag-item {
    border: 1px solid var(--c-border); border-left-width: 2px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--c-surface); padding: var(--sp-md);
}
.diag-item--falha { border-left-color: var(--c-error); }
.diag-item--aviso { border-left-color: #B78103; }
.diag-item--ok    { border-left-color: var(--c-accent); }
.diag-item__titulo { font-weight: 700; color: var(--c-ink); margin: 0; }
.diag-item__nota { color: var(--c-ink-soft); font-size: var(--fs-sm); margin: var(--sp-2xs) 0 0; line-height: 1.6; }

/* --- Bloqueio do relatório --- */
.diag-lock {
    border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    background: var(--c-surface-2); padding: var(--sp-lg);
    margin: 0 auto var(--sp-2xl); max-width: var(--w-block); text-align: left;
}
.diag-lock__preview { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-xs); margin-bottom: var(--sp-lg); }
.diag-chip {
    font-size: var(--fs-xs); font-weight: 600;
    padding: .3rem .7rem; border-radius: var(--radius-pill);
    background: var(--c-surface); border: 1px solid var(--c-border);
    color: var(--c-ink-muted);
}
.diag-chip--falha { border-color: color-mix(in srgb, var(--c-error) 40%, var(--c-border)); }
.diag-chip--aviso { border-color: color-mix(in srgb, #B78103 40%, var(--c-border)); }
.diag-lock__titulo {
    font-family: var(--font-display); font-weight: 800;
    font-size: var(--fs-lg); color: var(--c-ink); margin: 0 0 var(--sp-2xs);
}
.diag-lock__texto { color: var(--c-ink-soft); font-size: var(--fs-sm); max-width: var(--w-read); margin-bottom: var(--sp-md); }
.diag-lock__campos { display: grid; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
@media (min-width: 720px) { .diag-lock__campos { grid-template-columns: repeat(3, 1fr); } }
.diag-lock__campos label {
    display: block; font-size: var(--fs-xs); font-weight: 700;
    color: var(--c-ink-soft); margin-bottom: var(--sp-2xs);
}
.diag-lock__campos input {
    width: 100%; padding: .65rem .75rem;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
    background: var(--c-surface); font-family: var(--font-body);
    font-size: var(--fs-sm); color: var(--c-ink);
}
.diag-lock__campos input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.diag-lock__nota { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: var(--sp-sm) 0 0; }
.diag-lock__nota.is-erro { color: var(--c-error); font-weight: 600; }

/* --- Bloco do teste de IA --- */
.diag-ia {
    border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    background: var(--c-surface); padding: var(--sp-lg);
    margin: 0 auto var(--sp-lg); max-width: var(--w-block); text-align: center;
}
.diag-ia p { color: var(--c-ink-soft); max-width: var(--w-read); margin-inline: auto; }
.diag-ia__caixa {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-sm);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); padding: var(--sp-md); margin: var(--sp-md) 0 var(--sp-sm);
}
.diag-ia__caixa code {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
    color: var(--c-ink); flex: 1 1 16rem;
}
.diag-ia__nota { font-size: var(--fs-sm); color: var(--c-ink-muted); margin: 0; }
.btn--sm { padding: .45rem .9rem; font-size: var(--fs-sm); }

/* --- O que é verificado --- */
.diag-o-que {
    /* Era 52rem centrada (832px, arranque em x=224), numa página cujo
       cabeçalho e restante corpo estão alinhados à esquerda em x=90. Passa
       a ocupar a faixa toda em duas colunas com a goteira da grelha, o que
       põe as colunas em 90 e 656, os mesmos eixos do resto do site. */
    list-style: none; margin: 0; padding: 0; text-align: left;
    display: grid; gap: var(--sp-sm);
    column-gap: 32px;
}
@media (min-width: 760px) { .diag-o-que { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.diag-o-que li {
    color: var(--c-ink-soft); padding-left: var(--sp-md);
    border-left: 2px solid var(--c-border); line-height: 1.6;
}
.diag-o-que strong { color: var(--c-ink); }

/* --- Velocidade (medida à parte, num segundo pedido) --- */
.diag-vel {
    border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    background: var(--c-surface); padding: var(--sp-lg);
    margin: 0 auto var(--sp-2xl); max-width: var(--w-block); text-align: left;
}
.diag-vel__topo {
    display: flex; flex-wrap: wrap; gap: var(--sp-md);
    align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--sp-md);
}
.diag-vel__topo .diag-h3 { margin-bottom: var(--sp-2xs); }
.diag-vel__fonte {
    font-size: var(--fs-sm); color: var(--c-ink-muted);
    margin: 0; max-width: var(--w-col);
}
.diag-vel__nota-num {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1;
    letter-spacing: var(--track-display); color: var(--c-ink);
    flex: 0 0 auto;
}
.diag-lista--vel { margin-bottom: 0; }
.diag-vel__valor {
    float: right; font-family: var(--font-display); font-weight: 800;
    color: var(--c-ink-soft); font-variant-numeric: tabular-nums;
}
.diag-vel__erro {
    margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft);
    padding-left: var(--sp-md); border-left: 2px solid var(--c-border-strong);
}

/* --- Ecrãs muito estreitos (320px) -----------------------------------
   Os filhos de uma grelha têm min-width:auto, por isso não encolhem
   abaixo do seu conteúdo mínimo: o texto comprido de um botão dentro do
   cartão de plano alargava a coluna e empurrava a página para lá do
   ecrã. Deixá-los encolher e permitir a quebra resolve. */
.plans > *, .addons > *, .svc-grid > * { min-width: 0; }

/* Botões com texto comprido: a 320px o próprio rótulo era mais largo do
   que o ecrã. Deixam de forçar uma linha só e passam a poder quebrar,
   em vez de esticarem o que os contém. */
.btn { white-space: normal; max-width: 100%; }
.addon, .addons > * { min-width: 0; }
.article-cta .btn, .plan .btn, .addon .btn { width: 100%; justify-content: center; }
@media (min-width: 560px) {
    .article-cta .btn { width: auto; }
}

/* =====================================================================
   V8 · SUPERFÍCIES, COR E EIXO · 4 de agosto de 2026
   Corrige três defeitos medidos na revisão da homepage.

   1. AS SECÇÕES NÃO SE LIGAVAM. Havia dois eixos de alinhamento na
      mesma página: cabeçalhos centrados a 260px e conteúdo a 90px, com
      170px de oscilação de secção para secção. Passa a haver um eixo
      só, à esquerda, e no desktop o cabeçalho abre em duas colunas em
      vez de ser uma coluna estreita ao meio de uma faixa larga.

   2. O SITE ESTAVA PÁLIDO. .section--bg e .section--light tinham sido
      achatadas para a mesma cor, por isso a alternância existia no
      HTML e não no ecrã. A cor volta, mas com uma regra: só entra onde
      significa alguma coisa. Marinho = a linha do Site. Teal = a linha
      da Visibilidade. Papel e branco = o que não pertence a nenhuma.
      É por isso que os dois cartões de linha passam a ter fundo
      próprio em vez de uma borda de 3px, que era a única cor que o
      olho apanhava numa página inteira.

   3. A FAIXA DE CTA E O RODAPÉ ERAM O MESMO BLOCO. Ambos #14324F, sem
      separação: 1147px de marinho contínuo no desktop e 1737px no
      telemóvel, ou seja dois ecrãs cheios. A faixa passa a ser um
      cartão marinho pousado sobre papel, o que devolve a fronteira e
      dá profundidade à página sem inventar um elemento novo.
   ===================================================================== */

:root {
    /* Tintas de linha de negócio. Verificadas contra --c-ink-muted, que é
       o texto mais fraco que lhes assenta em cima: 4,91:1 na do site e
       4,83:1 na da visibilidade. Acima de AA, e é o piso a respeitar se
       alguém as clarear. */
    --c-surface-site: #EFF3F8;
    --c-surface-vis:  #E9F3F1;
    --c-line-site:    #D8E1EC;
    --c-line-vis:     #CFE5E1;
}

/* --- 1. Superfícies --------------------------------------------------
   Revoga o achatamento anterior. As quatro superfícies são distintas ao
   olho, e nenhuma secção fica encostada a outra da mesma cor. */
.section--bg    { background: var(--c-bg); }
.section--light { background: var(--c-surface); }
.section--site  { background: var(--c-surface-site); }
.section--vis   { background: var(--c-surface-vis); }

/* A hairline só faz falta onde as superfícies coincidem. Entre cores
   diferentes é ruído a marcar uma fronteira que já se vê. */
.section + .section { border-top: 0; }
.section--bg + .section--bg,
.section--light + .section--light,
.section--site + .section--site,
.section--vis + .section--vis { border-top: 1px solid var(--c-border); }

/* --- 2. Eixo único ---------------------------------------------------
   Esquerda por omissão, alinhado ao mesmo limite que o conteúdo por
   baixo. O centrado passa a ser a exceção declarada, não o contrário. */
.section-header {
    text-align: left;
    max-width: none;
    margin: 0 0 var(--sp-xl);
}
.section-header .eyebrow { justify-content: flex-start; }
.section-header .section-text { max-width: var(--w-read); }

/* No desktop o cabeçalho deixa de ser uma coluna estreita perdida numa
   faixa de 1140px: rótulo e título à esquerda, explicação à direita,
   assentes na mesma linha de base inferior. É o que dá à página uma
   margem esquerda a sério em vez de um empilhamento centrado.

   CORRIGIDO A 11 DE AGOSTO DE 2026, E É A CORREÇÃO DE ALINHAMENTO
   PRINCIPAL DO SITE. As colunas eram `1.05fr .95fr` com goteira de
   --sp-2xl, que a 1280px dá 529,6 + 91,2 + 479,2. A segunda coluna
   arrancava em x=711.

   Só que o site tem uma grelha, e não era esta. Dentro do contentor de
   1100px há 12 colunas de 62,33px com goteira de 32px, e três
   componentes assentam nela ao pixel:
       .duo e .fork__grid   6+6 colunas = 534px, arranques 90 e 656
       .svc-grid            4+4+4       = 345,3px, arranques 90, 467, 845
   O cabeçalho arrancava a segunda coluna 55px à direita do cartão que
   fica mesmo por baixo dele, cinco vezes por página, em todas as
   páginas. Era daí que vinha a sensação de desalinhado.

   Duas colunas iguais com 32px de goteira põem a explicação em x=656,
   exatamente por cima do que vem a seguir. A intenção do V8 mantém-se
   (rótulo e título à esquerda, explicação à direita, pela mesma linha
   de base); o que muda é a geometria.

   Os grupos fechados (.plans, .facts, .gate__cases, .plans--two) NÃO
   entram nesta grelha de propósito: têm goteira de 0 ou 1px porque são
   uma caixa só com divisórias por dentro, e não cartões soltos. Ver a
   nota em css/v7.css, .plan, onde os cartões perdem raio e borda
   esquerda acima de 860px para se fundirem numa tira contínua. */
@media (min-width: 960px) {
    .section-header:not(.section-header--center) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        align-items: end;
    }
    .section-header:not(.section-header--center) > .eyebrow {
        grid-column: 1; grid-row: 1;
    }
    .section-header:not(.section-header--center) > .section-title {
        grid-column: 1; grid-row: 2; margin-bottom: 0;
    }
    .section-header:not(.section-header--center) > .section-text {
        grid-column: 2; grid-row: 2; max-width: var(--w-col);
    }
    /* Qualquer filho fora dos três esperados ocupa a largura toda em vez
       de cair numa célula ao acaso. */
    .section-header:not(.section-header--center) > *:nth-child(n+4) {
        grid-column: 1 / -1;
    }
}

.section-header--center {
    text-align: center;
    max-width: var(--max-w-narrow);
    margin-inline: auto;
    display: block;
}
.section-header--center .eyebrow { justify-content: center; }

/* --- 3. A faixa de CTA como cartão -----------------------------------
   O container passa a ser o cartão. Sem elemento novo no HTML, por isso
   vale para as sete páginas que usam .cta-band de uma vez. */
.section--deep.cta-band {
    background: var(--c-bg);
    color: var(--c-ink);
    /* O cartão já traz o seu próprio recuo; manter o da secção somava
       208px de vazio à volta de dois parágrafos e um botão. */
    padding-block: var(--sp-xl);
}
.section--deep.cta-band > .container {
    /* Não é padding: o cartão tem de deixar papel à vista dos dois lados,
       senão encosta ao ecrã no telemóvel e volta a ler-se como faixa. */
    width: calc(100% - (var(--sp-md) * 2));
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
    border-radius: var(--radius-xl);
    color: var(--c-on-deep-soft);
    /* O halo teal existia no .section--deep original e tinha-se perdido
       no achatamento de 1 de agosto. Volta aqui, contido pelo cartão. */
    background:
        radial-gradient(620px 340px at 18% -25%, rgba(11,127,115,.42), transparent 65%),
        linear-gradient(165deg, var(--c-deep) 0%, var(--c-deep-2) 100%);
}
@media (min-width: 760px) {
    /* Horizontal generoso, vertical contido: com sp-2xl nos quatro lados
       sobrava uma faixa de marinho vazio por baixo da última linha. */
    .section--deep.cta-band > .container { padding: var(--sp-xl) var(--sp-2xl); }
}
.section--deep.cta-band .section-header {
    text-align: center;
    max-width: var(--w-col);
    margin: 0 auto var(--sp-lg);
    display: block;
}
.section--deep.cta-band .section-header .eyebrow { justify-content: center; }

/* O rodapé continua marinho, mas agora começa depois de papel. O traço
   teal assina a fronteira e é o mesmo acento do resto do site. */
.footer { border-top: 3px solid var(--c-accent); }

/* O slogan fica entre a marca e o descritor. Corpo maior que o descritor
   e cor de tinta cheia, senão lê-se como legenda em vez de assinatura. */
.footer-slogan {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    line-height: 1.25;
    color: var(--c-on-deep);
    margin: var(--sp-2xs) 0 var(--sp-sm);
    text-wrap: balance;
}

/* --- 4. Cor onde ela significa ---------------------------------------
   Os dois cartões de linha deixam de se distinguir por 3px de borda e
   passam a distinguir-se pelo fundo. É a única mudança que responde ao
   mesmo tempo a "falta cor" e a "não percebo que são duas coisas".

   O v7.css carrega depois deste ficheiro, por isso as regras de .lane e
   .fork daqui precisam de um seletor duplicado para ganhar. Sem isso
   perdem por ordem de origem e os cartões voltam a branco. */
.lane.lane--site {
    background: var(--c-surface-site);
    border-color: var(--c-line-site);
    border-top-color: var(--c-lane-site);
}
.lane.lane--vis {
    background: var(--c-surface-vis);
    border-color: var(--c-line-vis);
    border-top-color: var(--c-lane-vis);
}
.lane .lane__foot { border-top-color: color-mix(in srgb, var(--lane-c) 25%, transparent); }

/* A etiqueta da linha da visibilidade dava 4,22:1 em maiúsculas de 11px,
   que não conta como texto grande. O teal escuro põe-na em 5,59:1. A do
   site já ia em 11,17:1 e fica como está. */
.lane.lane--vis .lane__tag { color: var(--c-accent-dark); }

/* A haste da bifurcação ganha a cor do acento: é o ponto onde a página
   diz "a partir daqui há duas respostas" e estava a dizê-lo em cinzento.
   E ganha ombros redondos: a 550px de largo por 34px de alto, com cantos
   a esquadria, a forma lia-se como um retângulo solto pousado por cima
   dos cartões, e não como uma linha que se divide em duas. */
.fork .fork__stem {
    height: 52px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.fork .fork__stem::before { background: var(--c-accent); width: 2px; }

/* Cartões brancos sobre tinta: sem isto perdiam-se nas secções
   coloridas, que é o defeito clássico de introduzir superfícies novas. */
.section--site .fact,
.section--site .duo__side,
.section--vis .fact,
.section--vis .duo__side { border: 1px solid var(--c-border); }

/* --- Banner de cookies: tokens da marca e fora do caminho do CTA ------
   Duas correções de 11 de agosto de 2026.

   1. As cores estavam em bruto no ficheiro, e o verde do botão de aceitar
      era #00796b, o acento ANTIGO, que a revisão de 1 de agosto substituiu
      por #0B7F73 justamente porque não passava AA. O banner ficou a ser o
      único sítio do site com a paleta velha.

   2. Em desktop o banner é uma faixa de 720 px centrada no fundo do ecrã,
      que é exatamente onde estão os botões do hero: a 1280x720 tapava-os
      por inteiro na primeira visita, ou seja a todos os visitantes novos.
      Passa a cartão encostado ao canto, com o meio do ecrã livre. Em
      telemóvel continua a ocupar a largura toda, que aí é o correto. */
.cookie-banner { background: var(--c-deep-2); }
.cookie-banner a { color: #7FD3C8; }
.cookie-banner .ck-accept { background: var(--c-accent); color: #fff; }
.cookie-banner .ck-reject { border-color: var(--c-on-deep-soft); color: var(--c-on-deep); }
.cookie-banner .ck-reject:hover { border-color: var(--c-on-deep); }

@media (min-width: 768px) {
    .cookie-banner {
        /* À direita e não à esquerda: os botões do hero são centrados e
           começam por volta dos 272 px, por isso um cartão encostado à
           esquerda tapava 37% do botão principal. À direita, num ecrã de
           1280, o cartão vive entre os 920 e os 1256 e não toca em nada. */
        left: auto;
        right: 24px;
        bottom: 24px;
        max-width: 21rem;
        margin: 0;
        flex-wrap: wrap;
        padding: 13px 16px;
        gap: 10px;
    }
    .cookie-banner p { flex: 1 1 100%; font-size: .82rem; line-height: 1.45; }
    .cookie-banner .cookie-actions { margin-left: auto; }
    .cookie-banner button { padding: 7px 13px; font-size: .82rem; white-space: nowrap; }
}

/* =====================================================================
   PÁGINA DE PRIVACIDADE · 12 de agosto de 2026
   ---------------------------------------------------------------------
   Sete das classes que a privacidade.html usa nunca chegaram a existir no
   CSS: .privacy-layout, .privacy-aside, .privacy-card, .privacy-title,
   .privacy-content, .privacy-summary-card e .privacy-table-wrap. O corpo
   da página não tinha layout nenhum: a barra lateral e o artigo caíam um
   por cima do outro, ambos a 1100px, e o H1 ficava a 34px quando o das
   outras páginas está a 48.

   É o mesmo defeito dos tokens em falta nos artigos, e apareceu pela mesma
   razão: markup escrito a contar com CSS que ficou por escrever. Foi
   descoberto quando a termos.html ficou pronta ao lado dela e o contraste
   entre as duas se tornou impossível de ignorar.

   Ficam definidas sobre o sistema que já existe, sem inventar medidas: a
   grelha é a mesma dos .duo (duas colunas com goteira de 32px), a coluna de
   leitura é --w-read e o cartão repete o desenho dos .rub.
   ===================================================================== */
.privacy-title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    margin-bottom: var(--sp-sm);
}
.privacy-content { padding-block: var(--sp-2xl); }

/* Barra lateral à esquerda do texto. Abaixo de 960px empilha e o resumo
   passa a servir de entrada, que é onde ele é mais útil num telemóvel. */
.privacy-layout { display: grid; gap: var(--sp-xl); }
@media (min-width: 960px) {
    .privacy-layout {
        grid-template-columns: minmax(0, 345px) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
    }
    .privacy-aside { position: sticky; top: calc(var(--header-h) + var(--sp-md)); }
}

.privacy-summary-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
}
.privacy-summary-card h2 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-sm); }
.privacy-summary-card ul { margin: 0; padding-left: 1.1rem; }
.privacy-summary-card li {
    font-size: var(--fs-sm); color: var(--c-ink-soft);
    line-height: var(--lh-body); margin-bottom: var(--sp-xs);
}

.privacy-article { max-width: var(--w-read); }
.privacy-card + .privacy-card { margin-top: var(--sp-xl); }
.privacy-card h2 { font-size: var(--fs-xl); letter-spacing: -.01em; margin-bottom: var(--sp-sm); }
.privacy-card h3 { font-size: var(--fs-base); font-weight: 700; margin: var(--sp-md) 0 var(--sp-2xs); }
.privacy-card p, .privacy-card li { color: var(--c-ink-soft); }
.privacy-card ul { padding-left: 1.15rem; }
.privacy-card li { margin-bottom: var(--sp-2xs); }

/* As tabelas rolam dentro da própria caixa, para o documento nunca
   transbordar para o lado num telemóvel. */
.privacy-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin: var(--sp-md) 0;
}
.privacy-table-wrap table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.privacy-table-wrap th, .privacy-table-wrap td {
    text-align: left; padding: .6rem .8rem;
    border-bottom: 1px solid var(--c-border); vertical-align: top;
}
.privacy-table-wrap thead th { background: var(--c-surface-2); font-weight: 700; }
.privacy-table-wrap tbody tr:last-child td { border-bottom: 0; }

.privacy-contact-box {
    background: var(--c-surface-2);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-top: var(--sp-xl);
}
.privacy-contact-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }

/* A linha da identificação fiscal no rodapé. Mais pequena e mais discreta do
   que o contacto, porque é informação legal e não um convite: tem de estar
   visível, não tem de competir com o telefone. Acrescentada a 12 de agosto
   de 2026, quando o NIF e a morada deixaram de ser marcadores por preencher. */
.footer-contact .footer-nif {
    margin-top: var(--sp-xs);
    padding-top: var(--sp-xs);
    border-top: 1px solid var(--c-on-deep-line);
    font-size: var(--fs-xs);
    color: var(--c-on-deep-soft);
}