/* Mucanda — site de apresentação. Tokens do manual de identidade (outubro 2026): navy, verde-azulado, Maven Pro para a marca e Inter para o trabalho. */
:root {
  --navy-900: #0b2545;
  --navy-700: #1b3d6d;
  --navy-500: #2f5d9a;
  --teal-500: #14a38b;
  --teal-700: #0b7a68;
  --teal-300: #5fd3bc;
  --ink: #0b2545;
  --texto: #33475f;
  --suave: #5a6e86;
  --linha: #dfe7f0;
  --fundo: #ffffff;
  --fundo-2: #f4f7fb;
  --verde-bg: #ddf5ef;
  --laranja: #c2410c;
  --laranja-bg: #ffedd5;
  --ambar: #92400e;
  --ambar-bg: #fef3c7;
  --rascunho: #4a5d78;
  --rascunho-bg: #eaf0f6;
  --raio-s: 6px;
  --raio-m: 10px;
  --raio-l: 16px;
  --f-marca: 'Maven Pro', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; font-family: var(--f-texto); font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--teal-700); }
h1, h2, h3 { font-family: var(--f-marca); color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.contentor { width: min(1160px, 100% - 40px); margin-inline: auto; }
.salto { position: absolute; left: -999px; top: 8px; background: var(--navy-900); color: #fff; padding: 10px 14px; border-radius: var(--raio-s); z-index: 100; }
.salto:focus { left: 8px; }

/* Cabeçalho */
.cabeca { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.cabeca .contentor { display: flex; align-items: center; gap: 24px; height: 78px; }
.logo { display: flex; flex: none; }
.logo img { height: 54px; width: auto; display: block; }
.menu { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.menu a { color: var(--texto); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--teal-700); }
.menu a.btn { color: #fff; }
.menu a.btn:hover { color: #fff; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--raio-m); font: 600 16px var(--f-texto); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn-pri { background: var(--navy-900); color: #fff; }
.btn-pri:hover { background: var(--navy-700); }
.btn-sec { background: #fff; color: var(--navy-900); border-color: var(--linha); }
.btn-sec:hover { border-color: var(--navy-500); }
.btn-claro { background: #fff; color: var(--navy-900); }
.btn-claro:hover { background: var(--verde-bg); }
.btn-contorno { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.btn-contorno:hover { border-color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-pequeno { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* Herói */
.heroi { background: linear-gradient(160deg, var(--navy-900) 0%, #0e2f58 100%); color: #cfdcec; position: relative; overflow: hidden; }
.heroi::after { content: ''; position: absolute; right: 0; top: 0; width: 120px; height: 120px; background: var(--teal-500); clip-path: polygon(0 0, 100% 100%, 100% 0); opacity: 0.95; }
.heroi .contentor { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 84px 0 92px; }
.etiqueta { display: inline-block; font: 600 13px var(--f-texto); letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 18px; }
.heroi h1 { color: #fff; font-size: clamp(38px, 5.4vw, 60px); font-weight: 800; }
.heroi h1 em { font-style: normal; color: var(--teal-300); }
.heroi .sub { font-size: 20px; margin-top: 22px; max-width: 34em; color: #cfdcec; }
.heroi .accoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.heroi .nota { margin-top: 22px; font-size: 14px; color: #9db3cd; }

/* Painel de exemplo (ilustrativo) */
.painel { background: #fff; border-radius: var(--raio-l); padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); color: var(--texto); }
.painel-cab { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--suave); }
.painel .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.kpi { border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 14px 16px; }
.kpi small { color: var(--suave); font-size: 12.5px; display: block; }
.kpi b { display: block; font-size: 21px; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi b i { font-style: normal; font-weight: 500; color: var(--suave); font-size: 14px; }
.kpi .var { font-size: 13px; font-weight: 600; margin-top: 2px; display: block; }
.var.bom { color: var(--teal-700); }
.var.mau { color: var(--laranja); }
.barras { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin-top: 18px; }
.barras span { flex: 1; background: var(--teal-500); border-radius: 4px 4px 0 0; opacity: 0.9; }
.barras span.mes { background: var(--navy-900); opacity: 1; }
.estados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.estado { font: 600 12.5px var(--f-texto); padding: 4px 10px; border-radius: 999px; }
.e-ok { background: var(--verde-bg); color: var(--teal-700); }
.e-aviso { background: var(--ambar-bg); color: var(--ambar); }
.e-erro { background: var(--laranja-bg); color: var(--laranja); }
.e-info { background: var(--rascunho-bg); color: var(--rascunho); }
.legenda { margin-top: 14px; font-size: 12.5px; color: var(--suave); }

/* Secções */
.seccao { padding: 88px 0; }
.seccao.cinza { background: var(--fundo-2); }
.cabecalho-seccao { max-width: 46rem; margin-bottom: 44px; }
.cabecalho-seccao .etiqueta { color: var(--teal-700); }
.cabecalho-seccao h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.cabecalho-seccao p { margin-top: 14px; font-size: 18px; }

/* Passos: do documento ao crescimento */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: passo; }
.passo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-l); padding: 28px; position: relative; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; top: 24px; right: 26px; font: 800 44px var(--f-marca); color: var(--verde-bg); line-height: 1; }
.passo h3 { font-size: 21px; font-weight: 700; padding-right: 48px; }
.passo p { margin-top: 10px; }

/* Funcionalidades */
.grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-l); padding: 26px; }
.cartao .ico { width: 46px; height: 46px; border-radius: var(--raio-m); background: var(--verde-bg); color: var(--teal-700); display: grid; place-items: center; margin-bottom: 16px; }
.cartao .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cartao h3 { font-size: 20px; font-weight: 700; }
.cartao p { margin-top: 8px; font-size: 16px; }

/* Destaque do ponto de venda */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; }
.lista li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--verde-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lista b { color: var(--ink); }
.balcao { background: var(--navy-900); border-radius: var(--raio-l); padding: 26px; color: #cfdcec; }
.balcao h4 { margin: 0 0 14px; font: 700 15px var(--f-marca); color: var(--teal-300); letter-spacing: 0.04em; text-transform: uppercase; }
.linha-venda { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 15px; }
.linha-venda b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; }
.total-venda { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.total-venda span { font-size: 14px; }
.total-venda b { font: 800 30px var(--f-marca); color: #fff; font-variant-numeric: tabular-nums; }
.balcao .btn { width: 100%; margin-top: 18px; background: var(--teal-300); color: var(--navy-900); }
.balcao .estados { margin-top: 16px; }

/* Conformidade */
.conformidade { background: var(--navy-900); color: #cfdcec; }
.conformidade .cabecalho-seccao h2 { color: #fff; }
.conformidade .cabecalho-seccao .etiqueta { color: var(--teal-300); }
.conformidade .cabecalho-seccao p { color: #cfdcec; }
.provas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prova { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--raio-l); padding: 24px; background: rgba(255, 255, 255, 0.04); }
.prova h3 { color: #fff; font-size: 18px; font-weight: 700; }
.prova p { margin-top: 8px; font-size: 15.5px; color: #cfdcec; }
.aviso-cert { margin-top: 34px; border-left: 4px solid var(--teal-500); background: rgba(255, 255, 255, 0.06); border-radius: 0 var(--raio-m) var(--raio-m) 0; padding: 18px 22px; font-size: 16px; color: #e6eef8; }

/* Preços */
.preco { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: stretch; }
.preco .cartao { padding: 34px; }
.preco .cartao.destaque { background: var(--fundo-2); }
.preco h3 { font-size: 26px; }
.preco .accoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Perguntas */
.perguntas { display: grid; gap: 12px; max-width: 50rem; }
details { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 0 22px; }
summary { cursor: pointer; font: 700 18px var(--f-marca); color: var(--ink); padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--teal-700); }
details[open] summary::after { content: '–'; }
details p { padding: 0 0 20px; }

/* Contacto */
.contacto { background: linear-gradient(160deg, var(--navy-900), #0e2f58); color: #cfdcec; text-align: center; padding: 84px 0; }
.contacto h2 { color: #fff; font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.contacto p { margin: 16px auto 0; max-width: 38rem; font-size: 18px; }
.contacto .accoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.contacto .dados { margin-top: 26px; font-size: 16px; }
.contacto .dados a { color: #fff; }

/* Rodapé */

@media (max-width: 960px) {
  .heroi .contentor, .duas, .preco { grid-template-columns: 1fr; gap: 40px; }
  .grelha, .passos { grid-template-columns: 1fr 1fr; }
  .provas { grid-template-columns: 1fr 1fr; }
  .menu > a:not(.btn) { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .heroi .contentor { padding: 56px 0 64px; }
  .seccao { padding: 60px 0; }
  .grelha, .passos, .provas, .painel .kpis { grid-template-columns: 1fr; }
  .cabeca .contentor { height: 66px; }
  .logo img { height: 42px; }
  .heroi::after { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ============ Páginas de detalhe das funcionalidades ============ */
.pag-heroi .contentor { display: block; padding: 40px 0 76px; }
.pag-migalhas { font-size: 14px; color: #9db3cd; margin-bottom: 30px; }
.pag-migalhas a { color: #cfdcec; text-decoration: none; }
.pag-migalhas a:hover { color: #fff; text-decoration: underline; }
.pag-heroi-grelha { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.pag-icone { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: var(--raio-m); background: rgba(95, 211, 188, 0.16); color: var(--teal-300); margin-bottom: 18px; }
.pag-icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pag-heroi h1 { font-size: clamp(34px, 4.6vw, 52px); }

/* A captura de ecrã real, dentro de uma moldura de janela */
.moldura { margin: 0; border-radius: var(--raio-m); overflow: hidden; background: #fff; border: 1px solid rgba(11, 37, 69, 0.14); box-shadow: 0 22px 54px rgba(11, 37, 69, 0.22); }
.heroi .moldura { box-shadow: 0 26px 64px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.2); }
.moldura-barra { display: flex; gap: 6px; padding: 10px 14px; background: #e9eef5; }
.moldura-barra i { width: 10px; height: 10px; border-radius: 50%; background: #c2cddb; }
.moldura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.moldura figcaption { padding: 10px 16px 12px; font-size: 13.5px; color: var(--suave); background: #f7f9fc; border-top: 1px solid var(--linha); }

.pag-destaques { padding-top: 64px; padding-bottom: 24px; }
.pag-grelha-destaques { grid-template-columns: repeat(3, 1fr); }
.pag-duas { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.pag-duas.texto-dir { grid-template-columns: 1.15fr 0.85fr; }
.pag-texto .etiqueta { color: var(--teal-700); margin-bottom: 10px; }
.pag-texto h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; margin-bottom: 14px; }
.pag-texto p { margin-top: 12px; font-size: 17.5px; }
.pag-texto .lista { margin-top: 18px; }
.pag-nota { border-left: 4px solid var(--teal-500); background: var(--fundo-2); border-radius: 0 var(--raio-m) var(--raio-m) 0; padding: 12px 16px; font-size: 15.5px !important; }
.pag-so-texto { max-width: 52rem; }
.pag-limites { max-width: 52rem; background: var(--ambar-bg); border: 1px solid #f3dd9a; border-radius: var(--raio-l); padding: 28px 32px; }
.pag-limites h2 { font-size: 24px; margin-bottom: 4px; color: var(--ambar); }
.pag-limites .lista li::before { background-color: #fff; }
.pag-navegar { border-top: 1px solid var(--linha); background: var(--fundo-2); }
.pag-navegar .contentor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 0; }
.pag-navegar a { text-decoration: none; display: block; padding: 18px 22px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m); color: var(--ink); }
.pag-navegar a:last-child { text-align: right; }
.pag-navegar a:hover { border-color: var(--teal-500); }
.pag-navegar small { display: block; color: var(--suave); font-size: 13px; }
.pag-navegar b { font-family: var(--f-marca); font-size: 19px; }

@media (max-width: 960px) {
  .pag-heroi-grelha, .pag-duas, .pag-duas.texto-dir { grid-template-columns: 1fr; gap: 32px; }
  .pag-duas.texto-dir .pag-imagem { order: 2; }
  .pag-grelha-destaques { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pag-grelha-destaques, .pag-navegar .contentor { grid-template-columns: 1fr; }
  .pag-limites { padding: 22px 20px; }
}

/* bloco de código dentro da moldura (página de integrações) */
.moldura-codigo pre { margin: 0; padding: 20px 22px; background: #0b2545; color: #dbe7f5; font: 500 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; }
.moldura-codigo figcaption { background: #fff; }

/* cartões das funcionalidades que abrem a página de detalhe */
a.cartao-ligacao { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.cartao-ligacao:hover, a.cartao-ligacao:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 37, 69, 0.12); border-color: var(--teal-700); }
a.cartao-ligacao:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.cartao .ver-mais { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 15px; color: var(--teal-700); }
.cartao .ver-mais i { font-style: normal; display: inline-block; transition: transform .15s ease; }
a.cartao-ligacao:hover .ver-mais i { transform: translateX(4px); }

/* índice das secções e capturas extra das páginas de detalhe */
/* A barra «Nesta página» fica fixa por baixo do cabeçalho (78 px; 66 px em ecrãs estreitos), igual à dos desenhos do dono (.f-indice). */
.pag-indice { position: sticky; top: 78px; z-index: 30; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--linha); backdrop-filter: blur(8px); }
.pag-indice .contentor { display: flex; align-items: center; gap: 6px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.pag-indice span { flex: none; font: 700 12px var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-right: 8px; white-space: nowrap; }
.pag-indice ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pag-indice a { display: block; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.pag-indice a:hover, .pag-indice a.on { border-color: var(--linha); background: #fff; color: var(--teal-700); }
@media (max-width: 620px) { .pag-indice { top: 66px; } }
.seccao[id] { scroll-margin-top: 64px; }
.pag-extras { display: grid; gap: 28px; margin-top: 44px; }
.pag-extras.n2 { grid-template-columns: repeat(2, 1fr); }
.pag-extras.n3 { grid-template-columns: repeat(3, 1fr); }
.pag-extras .moldura { box-shadow: 0 14px 34px rgba(11, 37, 69, 0.14); }
.pag-extras figcaption { font-size: 14px; }
@media (max-width: 900px) { .pag-extras.n2, .pag-extras.n3 { grid-template-columns: 1fr; } }

/* caminho de uma informação entre módulos */
.pag-fluxo { margin-top: 36px; }
.pag-fluxo ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; counter-reset: pf; }
.pag-fluxo li { display: flex; gap: 16px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-l); padding: 20px 22px; }
.pag-fluxo .pf-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.pag-fluxo h3 { font-size: 18px; font-weight: 700; margin: 2px 0 6px; }
.pag-fluxo p { font-size: 15.5px; margin: 0; }
.pf-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-mods i { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--verde-bg); color: var(--teal-700); }
@media (max-width: 900px) { .pag-fluxo ol { grid-template-columns: 1fr; } }

/* secção Funcionalidades da página inicial, por grupos */
.grupo-func { margin-top: 56px; }
.grupo-cab { margin-bottom: 20px; }
.grupo-cab h3 { font-size: 26px; font-weight: 800; }
.grupo-cab p { margin-top: 4px; color: var(--suave); }
.cartao .mini { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
.cartao .mini li { position: relative; padding-left: 22px; }
.cartao .mini li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--teal-500); border-bottom: 2px solid var(--teal-500); transform: rotate(-45deg); }
.faixa-ligado { display: grid; gap: 6px; margin-top: 36px; padding: 28px 32px; border-radius: var(--raio-l); background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.faixa-ligado:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 37, 69, 0.25); }
.faixa-ligado .etiqueta { color: var(--teal-300); }
.faixa-ligado b { font-family: "Maven Pro", sans-serif; font-size: clamp(22px, 3vw, 30px); }
.faixa-ligado span:last-child { color: #d3dff0; font-size: 17px; }
.faixa-ligado i { font-style: normal; margin-left: 6px; }

/* galeria de ecrãs da página inicial */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.galeria a { color: inherit; text-decoration: none; }
.galeria .moldura { transition: transform .15s ease; }
.galeria a:hover .moldura { transform: translateY(-4px); }
.galeria figcaption { font-size: 14.5px; }
@media (max-width: 1000px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .galeria { grid-template-columns: 1fr; } }

/* ---------- «Tudo ligado» e «Como tudo se liga» (desenho tudo-ligado-seccoes.html) ---------- */
.mc-sec{--navy:#0B2545;--navy7:#1B3D6D;--teal:#14A38B;--teal7:#0B7A68;--teal3:#5FD3BC;--teal1:#DDF5EF;--ink:#0B2545;--muted:#4A5D78;--line:#D9E1EA;--surface:#F4F7FA;--sunken:#EAF0F6;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);box-sizing:border-box}
.mc-sec *,.mc-sec *::before,.mc-sec *::after{box-sizing:border-box}
.mc-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mc-h{font-family:"Maven Pro",Inter,sans-serif;font-weight:800;letter-spacing:-.005em;margin:0}
.mc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal7)}
.mc-sec[id]{scroll-margin-top:90px}

.mc-toc{padding:40px 0;--line:var(--linha);--sunken:var(--fundo-2);--navy:var(--navy-900);--muted:var(--suave);--teal:var(--teal-500);--teal7:var(--teal-700)}
.mc-toc__head h2{font:800 20px/1.2 "Maven Pro",Inter,sans-serif;color:var(--navy-900);margin:0}
.mc-toc__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.mc-toc__head .mc-h{font-size:20px}
.mc-toc__head span{font-size:14px;color:var(--muted)}
.mc-toc__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mc-toc__item a{height:100%;box-sizing:border-box;display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.mc-toc__item a:hover,.mc-toc__item a:focus-visible{border-color:var(--teal);box-shadow:0 6px 18px rgba(11,37,69,.08);transform:translateY(-1px);outline:none}
.mc-toc__item a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mc-toc__n{flex:none;width:36px;height:36px;border-radius:10px;background:var(--sunken);color:var(--navy);display:flex;align-items:center;justify-content:center;font:800 14px/1 "Maven Pro",Inter,sans-serif}
.mc-toc__item.is-current .mc-toc__n{background:var(--navy);color:#fff}
.mc-toc__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mc-toc__txt b{font:700 16px/1.25 "Maven Pro",Inter,sans-serif}
.mc-toc__txt small{font-size:13px;color:var(--muted)}
.mc-toc__arrow{flex:none;color:#8494A9;transition:color .15s,transform .15s}
.mc-toc__item a:hover .mc-toc__arrow{color:var(--teal7);transform:translateY(2px)}

.mc-sale{padding:72px 0;background:var(--surface)}
.mc-sale--branca{background:#fff}
.mc-sale__intro{max-width:720px;margin-bottom:40px}
.mc-sale__intro .mc-h{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:10px 0 12px}
.mc-sale__intro p{margin:0 0 10px;font-size:17px;line-height:1.6;color:var(--muted)}
.mc-sale__grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start}
.mc-receipt{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(11,37,69,.08);overflow:hidden}
.mc-receipt__top{background:var(--navy);color:#fff;padding:20px 22px;position:relative}
.mc-receipt__top::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 36px 36px 0;border-color:transparent var(--teal) transparent transparent}
.mc-receipt__top small{display:block;font-size:12px;color:#A9C4E6;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.mc-receipt__top b{display:block;font:800 22px/1.2 "Maven Pro",Inter,sans-serif;margin-top:4px}
.mc-receipt__body{padding:18px 22px 22px}
.mc-receipt__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-bottom:1px dashed var(--line)}
.mc-receipt__row span:last-child{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.mc-receipt__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-weight:700}
.mc-receipt__total span:last-child{font:800 22px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.mc-receipt__paid{margin-top:16px;display:flex;align-items:center;gap:8px;background:var(--teal1);color:var(--teal7);font-size:13px;font-weight:600;padding:9px 12px;border-radius:8px}
.mc-receipt__note{margin:14px 0 0;font-size:12px;color:#8494A9}
.mc-steps{list-style:none;margin:0;padding:0;position:relative}
.mc-steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--teal),var(--teal3))}
.mc-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding-bottom:28px}
.mc-step:last-child{padding-bottom:0}
.mc-step__node{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;background:#fff;border:2px solid var(--teal);color:var(--teal7);display:flex;align-items:center;justify-content:center}
.mc-step__card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.mc-step__k{font:800 12px/1 "Maven Pro",Inter,sans-serif;color:var(--teal7);letter-spacing:.08em}
.mc-step__card h3{font:800 19px/1.25 "Maven Pro",Inter,sans-serif;margin:6px 0 6px}
.mc-step__card p{margin:0;font-size:15px;line-height:1.6;color:#33475F}
.mc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:0;list-style:none}
.mc-tags li{font-size:12px;font-weight:600;color:var(--navy7);background:var(--sunken);border-radius:999px;padding:4px 10px}
.mc-tags a{color:inherit;text-decoration:none}
.mc-tags li:has(a):hover{background:var(--teal1);color:var(--teal7)}

.mc-link{padding:0 0 8px;margin-top:28px}
.mc-link__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center;background:var(--navy);color:#fff;border-radius:20px;padding:44px 48px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.mc-link__card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(11,37,69,.25)}
.mc-link__card:focus-visible{outline:3px solid var(--teal3);outline-offset:3px}
.mc-link__card::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 64px 64px 0;border-color:transparent var(--teal) transparent transparent}
.mc-link__card .mc-eyebrow{color:var(--teal3)}
.mc-link__card .mc-h{color:#fff;font-size:clamp(26px,3vw,36px);line-height:1.12;margin:12px 0 12px}
.mc-link__card p{margin:0 0 24px;font-size:17px;line-height:1.6;color:#A9C4E6;max-width:520px}
.mc-btn{display:inline-flex;align-items:center;gap:10px;background:var(--teal3);color:var(--navy);font-weight:700;font-size:15px;padding:13px 20px;border-radius:10px}
.mc-link__card:hover .mc-btn svg{transform:translateX(3px)}
.mc-btn svg{transition:transform .15s}
.mc-hub{width:100%;height:auto;max-width:380px;justify-self:center}
.mc-cat{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:48px 0 16px;border-bottom:1px solid var(--line);margin-bottom:24px}
.mc-cat .mc-h{font-size:28px;line-height:1.15}
.mc-cat p{margin:6px 0 0;font-size:16px;color:var(--muted)}
.mc-cat__count{flex:none;font-size:13px;font-weight:600;color:var(--muted);background:var(--sunken);border-radius:999px;padding:6px 12px}
.mc-pag-extras{margin-top:44px}

@media (max-width:900px){
  .mc-toc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-sale__grid{grid-template-columns:1fr;gap:32px}
  .mc-receipt{position:static;max-width:420px}
  .mc-link__card{grid-template-columns:1fr;padding:32px 28px}
  .mc-hub{max-width:300px;justify-self:start}
}
@media (max-width:560px){
  .mc-toc__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .mc-toc__item{flex:0 0 78%;scroll-snap-align:start}
  .mc-cat{flex-direction:column;align-items:flex-start}
  .mc-step{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .mc-step__node{width:40px;height:40px;border-radius:12px}
  .mc-steps::before{left:19px}
  .mc-step__card{padding:16px}
}
/* «O teu negócio» da página inicial usa a grelha do índice «Nesta página»: a seta aponta para a direita e, no telemóvel, os cartões empilham-se em vez de rolar */
.escolha{--line:var(--linha);--sunken:var(--fundo-2);--navy:var(--navy-900);--muted:var(--suave);--teal:var(--teal-500);--teal7:var(--teal-700)}
.escolha .mc-toc__grid{margin-top:8px}
.escolha .mc-toc__item a:hover .mc-toc__arrow{transform:translateX(3px)}
@media (max-width:560px){
  .escolha .mc-toc__grid{display:grid;grid-template-columns:1fr;overflow:visible;padding-bottom:0}
  .escolha .mc-toc__item{flex:none}
}
@media (prefers-reduced-motion:reduce){.mc-sec *{transition:none!important}}

/* ---------- listas em cartões, métricas e limites (secções que eram texto corrido) ---------- */
.pag-blocos{margin-top:36px}
.mc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mc-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mc-card{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s,box-shadow .15s}
.mc-card:hover{border-color:var(--teal);box-shadow:0 8px 22px rgba(11,37,69,.08)}
.mc-card__ico,.mc-card__n{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--teal1);color:var(--teal7)}
.mc-card__n{background:var(--sunken);color:var(--navy);font:800 13px/1 "Maven Pro",Inter,sans-serif}
.mc-card h3{font:800 17px/1.25 "Maven Pro",Inter,sans-serif;margin:0 0 4px}
.mc-card p{margin:0;font-size:15px;line-height:1.6;color:#33475F}
.mc-card p b{color:var(--ink)}

.mc-metricas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mc-metrica{background:var(--navy);color:#fff;border-radius:16px;padding:22px 22px 20px;position:relative;overflow:hidden}
.mc-metrica::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 26px 26px 0;border-color:transparent var(--teal) transparent transparent}
.mc-metrica b{display:block;font:800 clamp(28px,3vw,38px)/1 "Maven Pro",Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--teal3)}
.mc-metrica__u{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#A9C4E6}
.mc-metrica p{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:#D3DFF0}

.mc-limites{padding:64px 0;background:var(--surface)}
.mc-limites__cab{max-width:720px;margin-bottom:28px}
.mc-limites__cab .mc-h{font-size:clamp(26px,3vw,34px);margin:10px 0 10px}
.mc-limites__cab p{margin:0;color:var(--muted);font-size:16.5px}
.mc-limites__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mc-limite{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid #E0A526;border-radius:12px;padding:16px 18px}
.mc-limite__ico{flex:none;color:#B97A0A;margin-top:1px}
.mc-limite p{margin:0;font-size:15px;line-height:1.6;color:#33475F}

@media (max-width:1000px){.mc-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.mc-cards,.mc-cards--3,.mc-limites__grid,.mc-metricas{grid-template-columns:1fr}}

/* ---------- rodapé (rodape.mjs) ---------- */
.rodape { background: #071a33; color: #9db3cd; font-size: 15px; padding: 0; }
.rodape a { color: #cfdcec; text-decoration: none; transition: color .15s; }
.rodape a:hover { color: #fff; }
.rodape a:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; border-radius: 4px; }
.rodape .contentor { display: block; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rd-topo { display: grid; grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); gap: 40px 36px; padding: 64px 0 44px; }
.rd-marca img { display: block; height: 40px; width: auto; margin: 0 0 18px; }
.rd-marca p { margin: 0 0 18px; max-width: 34ch; line-height: 1.6; }
.rd-contactos { display: grid; gap: 10px; }
.rd-contactos li { display: flex; align-items: center; gap: 10px; }
.rd-contactos svg { flex: none; color: var(--teal-300); }
.rd-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rd-col h3 { font-family: var(--f-texto); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 4px 0 16px; }
.rd-col ul { display: grid; gap: 11px; }
.rd-col a { line-height: 1.35; }
.rd-legal { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.rd-legal__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(95, 211, 188, .14); color: var(--teal-300); }
.rd-legal b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.rd-legal .certificacao { margin: 0; max-width: 62rem; line-height: 1.6; }
.rd-fundo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 26px 0 30px; font-size: 14px; }
.rd-fundo p { margin: 0; }
.rd-ligacoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.rd-topo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-300) !important; font-weight: 600; }
@media (max-width: 1100px) { .rd-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-marca { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .rd-topo { grid-template-columns: 1fr; padding-top: 48px; }
  .rd-legal { padding: 18px; }
  .rd-fundo { flex-direction: column; align-items: flex-start; }
}
.rodape .btn-claro { color: var(--navy-900); }
.rodape .btn-claro:hover { color: var(--navy-900); background: #e9f3ff; }
.rodape .btn-contorno { color: #fff; }

/* etiquetas das páginas Módulos e Áreas de actuação */
.area-quem { font-size: 14.5px; color: var(--suave); }
.cartao.area .mc-tags { margin-top: 16px; }
.accoes-centro { display: flex; justify-content: center; margin-top: 36px; }
.menu { gap: 22px; }
@media (max-width: 1260px) {
  .menu { gap: 14px; }
  .menu a { font-size: 14px; }
  .cabeca .contentor { gap: 14px; }
  .logo img { width: 190px; height: auto; }
}

/* menu agrupado: «Produto» e «Recursos» abrem ao passar o rato ou ao focar (sem JavaScript) */
.menu-grupo { position: relative; }
.menu-grupo-botao { font: inherit; font-size: 15px; font-weight: 500; color: var(--texto); background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.menu-grupo-botao::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.menu-grupo-botao:hover, .menu-grupo:focus-within .menu-grupo-botao { color: var(--teal-700); }
.menu-sub { display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; padding: 8px; margin-top: 6px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m); box-shadow: 0 12px 28px rgba(11, 37, 69, 0.14); }
.menu-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.menu-grupo:hover .menu-sub, .menu-grupo:focus-within .menu-sub { display: block; }
.menu-sub a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.menu-sub a:hover { background: var(--fundo-2); }
.menu [aria-current="page"] { color: var(--teal-700); font-weight: 600; }
@media (max-width: 960px) { .menu-grupo { display: none; } }

/* menu móvel (até 960px): três riscas que abrem um painel por baixo do cabeçalho; em ecrã largo nem existe.
   O mesmo CSS, com as cores à letra, está em tools/site/indice-fixo.mjs (CSS_MENU_AGRUPADO) para as páginas com folha própria: mexer num é mexer nos dois. */
.menu-movel { display: none; background: none; border: 0; border-radius: 0; padding: 0; }
.menu-movel > summary { list-style: none; }
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel-botao { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; margin-right: -12px; padding: 0; border-radius: 10px; color: #0b2545; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-movel-botao::after, .menu-movel[open] > .menu-movel-botao::after { content: none; }
.menu-movel-titulo { padding: 0; }
.menu-movel-botao:hover { background: #f4f7fb; }
.menu-movel-botao:focus-visible { outline: 2px solid #0b7a68; outline-offset: 2px; }
.menu-movel-icone, .menu-movel-icone::before, .menu-movel-icone::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
.menu-movel-icone { position: relative; }
.menu-movel-icone::before, .menu-movel-icone::after { content: ""; position: absolute; left: 0; }
.menu-movel-icone::before { top: -6px; }
.menu-movel-icone::after { top: 6px; }
.menu-movel[open] .menu-movel-icone { background-color: transparent; }
.menu-movel[open] .menu-movel-icone::before { transform: translateY(6px) rotate(45deg); }
.menu-movel[open] .menu-movel-icone::after { transform: translateY(-6px) rotate(-45deg); }
.menu-movel-painel { position: absolute; left: 0; right: 0; top: 100%; box-sizing: border-box; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 24px; background: #fff; border-bottom: 1px solid #dfe7f0; box-shadow: 0 22px 32px -16px rgba(11, 37, 69, .28); }
.menu-movel-titulo { margin: 18px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0b7a68; }
.menu .menu-movel-painel a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 2px; font-size: 17px; font-weight: 500; color: #0b2545; border-bottom: 1px solid #eef2f7; }
.menu .menu-movel-painel a:not(.btn):active { background: #f4f7fb; }
.menu .menu-movel-painel a[aria-current="page"] { color: #0b7a68; font-weight: 700; }
.menu-movel-painel .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 50px; margin-top: 20px; }
@media (max-width: 960px) { .menu { gap: 10px; } .menu-movel { display: block; } }
@media (max-width: 460px) { .menu > a.btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu-movel-icone, .menu-movel-icone::before, .menu-movel-icone::after { transition: none; } }

/* páginas dos módulos de sector e das áreas: «o que usas» (imagem + texto) e a lista de tudo o que o módulo cobre */
.usos { display: grid; gap: 44px; }
.uso { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.uso.uso-inverso .uso-img { order: 2; }
.uso.uso-sem-imagem { grid-template-columns: 1fr; }
.uso-img { margin: 0; }
.uso-img img { display: block; width: 100%; height: auto; }
.uso-texto h3 { font-size: 24px; margin-bottom: 8px; }
.uso-texto .mini { margin: 14px 0 0; }
.uso-texto .ver-mais { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--teal-700); text-decoration: none; }
.uso-texto .ver-mais i { font-style: normal; display: inline-block; transition: transform .15s ease; }
.uso-texto .ver-mais:hover i { transform: translateX(4px); }
.ver-modulo .ver-mais { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--teal-700); text-decoration: none; }
.ver-modulo .ver-mais i { font-style: normal; display: inline-block; transition: transform .15s ease; }
.ver-modulo .ver-mais:hover { text-decoration: underline; text-underline-offset: 3px; }
.ver-modulo .ver-mais:hover i { transform: translateX(4px); }
.mc-tags--grande { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0; }
.mc-tags--grande li { font-size: 14px; padding: 7px 14px; }
@media (max-width: 860px) { .uso { grid-template-columns: 1fr; gap: 20px; } .uso.uso-inverso .uso-img { order: 0; } }

/* página inicial: «qual é o teu negócio?», as quatro razões e a escada de níveis */
.escolhas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.escolhas a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.escolhas a:hover, .escolhas a:focus-visible { border-color: var(--teal-700); transform: translateY(-2px); color: var(--teal-700); }
.escolhas i { font-style: normal; color: var(--teal-700); }
.grelha.razoes { grid-template-columns: repeat(4, 1fr); }
.escada { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cartao.nivel { display: flex; flex-direction: column; padding: 22px; position: relative; }
.nivel-n { position: absolute; top: 18px; right: 20px; font: 800 13px var(--f-marca); color: var(--teal-700); background: var(--verde-bg); border-radius: 8px; padding: 3px 9px; }
.cartao.nivel h3 { font-size: 22px; }
.nivel-para { font-size: 14.5px; color: var(--suave); min-height: 3em; }
.nivel-preco { font: 700 16px var(--f-marca); color: var(--navy-900); margin-top: 12px; }
.nivel-inclui { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 14px; }
.cartao.nivel .mini { flex: 1; align-content: start; margin-bottom: 18px; }
.cartao.nivel .btn { width: 100%; justify-content: center; }
.cartao.extras { margin-top: 20px; }
.cartao.extras .mini { grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.nota-preco { font-size: 14.5px; color: var(--suave); margin-top: 16px; }
@media (max-width: 1180px) { .escada { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grelha.razoes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .escada, .grelha.razoes, .cartao.extras .mini { grid-template-columns: 1fr; } }

/* secções dos módulos (texto, pontos em cartões e ecrãs com números) */
.bloco-texto { max-width: 46rem; margin-top: 4px; }
.bloco-texto p { font-size: 18px; margin-top: 12px; }
.bloco-ecras { margin-top: 36px; display: grid; gap: 40px; }
.bloco-ecra h3 { font-size: 20px; margin-bottom: 14px; }
.bloco-ecra .rica-intro { margin-bottom: 14px; }

/* nas páginas dos módulos o ecrã ocupa a largura toda e as zonas ficam por baixo, em duas colunas: lê-se sem ampliar */
.bloco-ecra .rica-mapa { grid-template-columns: 1fr; gap: 22px; }
.bloco-ecra .rica-zonas { grid-template-columns: 1fr 1fr; align-items: start; }
.bloco-ecra .rica-zonas li.on p { display: block; }
@media (max-width: 760px) { .bloco-ecra .rica-zonas { grid-template-columns: 1fr; } }

/* «Para quem» nas páginas das áreas: o texto à esquerda e, à direita, um cartão com os perfis (em vez de meia largura em branco). */
.area-quem-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.area-quem-texto p { margin: 0 0 16px; font-size: 18px; max-width: 46rem; }
.area-quem-texto p:first-child { font-size: 20px; color: var(--ink); }
.area-perfis h3 { margin: 0 0 14px; font-family: var(--f-texto); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
/* cada perfil é um cartão como os do índice «Nesta página» (quadrado arredondado + texto), mas sem ligação nem seta */
.area-perfis__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.area-perfis__lista li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; box-sizing: border-box; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.area-perfis__lista b { font: 700 16px/1.3 "Maven Pro", Inter, sans-serif; color: var(--navy-900); }
.area-perfis__n { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #ddf5ef; color: #0b7a68; display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .area-quem-grade { grid-template-columns: 1fr; gap: 28px; } }

/* As etiquetas «Onde este módulo serve» ficam fora de .mc-sec: levam as próprias cores e um tamanho legível. */
.seccao > .contentor > .mc-tags { --navy7: #1b3d6d; --sunken: #eaf0f6; --teal1: #ddf5ef; --teal7: #0b7a68; gap: 8px 10px; margin-top: 0; }
.seccao > .contentor > .mc-tags li { font-size: 15px; padding: 8px 16px; }

/* ============ Página de preços (site/precos.mjs) ============ */
.pr-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-chip { display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 1.3; padding: 3px 9px; border-radius: 7px; background: var(--verde-bg); color: var(--teal-700); white-space: nowrap; }
.pr-chip--extra { background: #fff2dc; color: #8a5a00; }
.pr-chip--prep { background: #eaf0f6; color: #1b3d6d; font-size: 11.5px; vertical-align: middle; margin-left: 6px; }
.pr-lig { color: var(--teal-700); font-weight: 600; }
.nw { white-space: nowrap; }

/* herói: «Em todos os níveis» */
.pr-heroi-painel { padding: 26px 28px; border-radius: var(--raio-l); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #dce6f3; }
.pr-heroi-painel h2 { margin: 0 0 14px; font: 700 13px var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }
.pr-heroi-painel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-heroi-painel li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.45; }
.pr-heroi-painel li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--teal-300); border-bottom: 2.5px solid var(--teal-300); transform: rotate(-45deg); }
@media (max-width: 960px) { .pag-heroi-grelha:has(.pr-heroi-painel) { grid-template-columns: 1fr; gap: 32px; } }

/* o selector do ritmo de pagamento (mensal, trimestral, semestral, anual) e o que ele muda nos cartões */
.pr-periodo { display: inline-grid; grid-template-columns: repeat(4, auto); gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 8px 20px -16px rgba(11, 37, 69, .5); max-width: 100%; }
.pr-opcao { position: relative; display: block; }
.pr-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pr-opcao span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 22px; border-radius: 9px; font: 700 16px/1.2 var(--f-marca); color: var(--navy-900); transition: background .15s, color .15s; }
.pr-opcao small { margin-top: 2px; font: 500 12px var(--f-texto); color: var(--suave); }
.pr-opcao:hover span { background: var(--fundo-2); }
.pr-opcao input:checked + span { background: var(--navy-900); color: #fff; }
.pr-opcao input:checked + span small { color: #b9c7da; }
.pr-opcao input:focus-visible + span { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.pr-notas { margin-top: 14px; min-height: 3.4em; }
.pr-nota { margin: 0; max-width: 46rem; font-size: 16px; color: var(--ink); }
.pr-nota b { color: var(--navy-900); }
.pr-planos [data-p] { display: none; }
.pr-planos:has(input[name="periodo"][value="mensal"]:checked) [data-p="mensal"],
.pr-planos:has(input[name="periodo"][value="trimestral"]:checked) [data-p="trimestral"],
.pr-planos:has(input[name="periodo"][value="semestral"]:checked) [data-p="semestral"],
.pr-planos:has(input[name="periodo"][value="anual"]:checked) [data-p="anual"] { display: block; }
@supports not selector(:has(a)) { .pr-planos [data-p="mensal"] { display: block; } }
@media (max-width: 560px) {
  .pr-periodo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
  .pr-opcao span { padding: 6px 2px; font-size: 13.5px; min-height: 50px; }
}

/* os cartões dos níveis */
.pr-grelha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 30px; }
.cartao.pr-plano { display: flex; flex-direction: column; padding: 22px; scroll-margin-top: 96px; transition: box-shadow .2s, border-color .2s; }
.pr-plano h3 { margin: 0; font-size: 22px; }
.pr-para { margin: 4px 0 0; min-height: 3.1em; font-size: 14.5px; color: var(--suave); }
.pr-preco { margin-top: 14px; padding: 14px 0; min-height: 96px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.pr-valor { display: block; font: 800 24px/1.15 var(--f-marca); color: var(--navy-900); }
.pr-valor small { font: 600 14px var(--f-texto); color: var(--suave); }
.pr-valor--proposta { font-size: 20px; }
.pr-preco span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--suave); }
.pr-poupa { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 7px; background: var(--verde-bg); font: 700 12.5px var(--f-texto); font-style: normal; color: var(--teal-700); }
.pr-limites { list-style: none; margin: 16px 0 0; padding: 0; display: grid; align-content: start; gap: 4px; font-size: 14.5px; color: var(--ink); }
.pr-limites b { font: 800 15px var(--f-marca); color: var(--navy-900); }
.pr-mais { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.pr-plano .mini { margin: 16px 0 18px; flex: 1; align-content: start; }
.pr-plano .btn { width: 100%; }
/* os cartões partilham as linhas da grelha: o preço, os limites e a lista ficam à mesma altura em todos, tenha a descrição uma, duas ou três linhas (o Enterprise não tem «Precisas de mais?», por isso a lista e o botão têm linha própria) */
@supports (grid-template-rows: subgrid) {
  .cartao.pr-plano { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
  .pr-plano > .mini { grid-row: 6; }
  .pr-plano > .btn { grid-row: 7; align-self: end; }
}
.pr-plano--sugerido { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20, 163, 139, .22), 0 14px 30px -18px rgba(11, 37, 69, .4); }
@media (max-width: 1180px) { .pr-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pr-grelha { grid-template-columns: 1fr; } .pr-para, .pr-preco { min-height: 0; } }

/* «Em todos os níveis» */
.pr-todos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-todos-item h3 { margin: 0 0 4px; font-size: 19px; }
@media (max-width: 860px) { .pr-todos { grid-template-columns: 1fr; } }

/* «Qual é o teu nível?» */
.pr-qual { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pr-qual[hidden] { display: none; }
.pr-qual__form { display: grid; gap: 22px; padding: 26px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-l); }
.pr-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-campo { display: grid; gap: 6px; align-content: start; }
.pr-campo[hidden] { display: none; }
.pr-campo--postos { margin-top: 12px; max-width: 14rem; }
.pr-campo label { font: 700 15px var(--f-marca); color: var(--navy-900); }
/* Os controlos são os da aplicação, nunca os do navegador: o campo de 44px, o interruptor (.auth-checkbox, web/src/styles/auth.css) e a combobox (.cbe-*, packages/ui/src/styles/base.css). Mexer num é mexer nos outros. */
.pr-qual { --switch-off: #b8c1cc; --switch-on: #0e7f74; --campo-borda: #c9d5e3; --teal-claro: #e6f5f2; }
.pr-campo input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid var(--campo-borda); border-radius: 8px; background: #fff; font: 500 15px var(--f-texto); color: var(--ink); }
.pr-campo input:focus { outline: 2px solid var(--teal-500); outline-offset: -1px; border-color: var(--teal-500); }
.pr-combo { position: relative; }
.pr-combo__gatilho { width: 100%; height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--campo-borda); border-radius: 8px; background: #fff; font: 500 15px var(--f-texto); color: var(--ink); text-align: left; cursor: pointer; }
.pr-combo__gatilho:focus { outline: 2px solid var(--teal-500); outline-offset: -1px; border-color: var(--teal-500); }
.pr-combo__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-combo__seta { flex: none; color: var(--suave); transition: transform .15s; }
.pr-combo__gatilho[aria-expanded="true"] .pr-combo__seta { transform: rotate(180deg); }
.pr-combo__lista { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .24); }
.pr-combo__lista[hidden] { display: none; }
.pr-combo__lista li { padding: 10px 12px; border-radius: 6px; font-size: 15px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.pr-combo__lista li.pr-combo__activa { background: var(--teal-claro); }
.pr-combo__lista li[aria-selected="true"] { font-weight: 700; }
.pr-campo small { font-size: 12.5px; line-height: 1.35; color: var(--suave); }
.pr-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pr-fs legend { padding: 0; margin-bottom: 10px; font: 700 15px var(--f-marca); color: var(--navy-900); }
.pr-marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-marca { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 14.5px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.pr-marca:hover { border-color: var(--teal-500); }
.pr-marca:has(input:checked) { border-color: var(--switch-on); background: #f0faf7; }
.pr-marca input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pr-chk { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--switch-off); transition: background-color .15s; }
.pr-chk::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.pr-marca input:checked ~ .pr-chk { background: var(--switch-on); }
.pr-marca input:checked ~ .pr-chk::before { transform: translateX(18px); }
.pr-marca input:focus-visible ~ .pr-chk { outline: 2px solid var(--teal-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pr-chk, .pr-chk::before, .pr-combo__seta { transition: none; } }
.pr-qual__res { position: sticky; top: 100px; padding: 26px; border-radius: var(--raio-l); background: var(--navy-900); color: #dce6f3; }
.pr-qual__k { margin: 0; font: 700 12px var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); }
.pr-qual__nivel { margin: 6px 0 12px; font: 800 34px/1.1 var(--f-marca); color: #fff; }
.pr-qual__porque { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.pr-qual__porque li { position: relative; padding-left: 22px; }
.pr-qual__porque li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--teal-300); border-bottom: 2px solid var(--teal-300); transform: rotate(-45deg); }
.pr-qual__notas p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #b9c7da; }
.pr-qual__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pr-qual__acoes .btn-sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.pr-qual__acoes .btn-sec:hover { border-color: #fff; }
.pr-qual__mini { display: none; }
@media (max-width: 960px) {
  .pr-qual { grid-template-columns: 1fr; }
  .pr-qual__res { position: static; scroll-margin-top: 90px; }
  /* o nível calculado fica à vista, colado ao fundo do ecrã, enquanto se marcam as caixas */
  .pr-qual__mini { position: sticky; bottom: 12px; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: 12px; background: var(--navy-900); color: #fff; text-decoration: none; box-shadow: 0 14px 28px -12px rgba(11, 37, 69, .55); font-size: 15px; }
  .pr-qual__mini b { font: 800 17px var(--f-marca); }
  .pr-qual__mini-lig { font-weight: 600; font-size: 14px; color: var(--teal-300); }
}
@media (max-width: 560px) {
  .pr-campos, .pr-marcas { grid-template-columns: 1fr; }
  .pr-qual__form, .pr-qual__res { padding: 20px; }
}

/* a comparação: cabeçalho fixo em ecrã largo; no telemóvel escolhes um nível e vês só a sua coluna */
.pr-comparar { margin-top: 8px; }
.pr-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; padding: 0; font-size: 14px; color: var(--suave); }
.pr-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.pr-legenda__novo { width: 18px; height: 18px; border-radius: 5px; background: #e9f8f4; border: 1px solid #b7e6dc; }
.pr-quadro { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-l); overflow: clip; }
.pr-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-tabela th, .pr-tabela td { padding: 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid #eef2f7; }
.pr-tabela thead th { position: sticky; top: 79px; z-index: 5; padding: 16px 10px; background: #fff; border-bottom: 1px solid var(--linha); box-shadow: 0 6px 10px -10px rgba(11, 37, 69, .35); font: 800 16px var(--f-marca); color: var(--navy-900); }
.pr-tabela th[scope="row"] { width: 31%; text-align: left; font-weight: 600; color: var(--ink); }
.pr-tabela th[scope="row"] small { display: block; margin-top: 2px; font: 400 13px/1.35 var(--f-texto); color: var(--suave); }
.pr-tabela .pr-grupo th { padding: 12px 14px; text-align: left; background: var(--fundo-2); font: 700 12px var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.pr-tabela .pr-grupo th small { display: block; margin-top: 2px; font: 400 13px/1.35 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--suave); }
.pr-tabela td.pr-novo { background: #e9f8f4; }
.pr-sim { display: inline-flex; color: var(--teal-700); }
.pr-nao { font-size: 18px; color: #b4c0cf; }
.pr-txt { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pr-tabela tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.pr-obs { margin-top: 24px; }
.pr-obs h3 { margin: 0 0 8px; font-size: 17px; }
.pr-obs ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--suave); }
.pr-ver { display: none; }
.pr-chip-opcao { position: relative; flex: none; }
.pr-chip-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.pr-chip-opcao span { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font: 700 15px var(--f-marca); color: var(--navy-900); cursor: pointer; }
.pr-chip-opcao input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pr-chip-opcao input:focus-visible + span { outline: 2px solid var(--teal-500); outline-offset: 2px; }
@media (max-width: 860px) {
  .pr-tabela thead th { position: static; box-shadow: none; }
  .pr-rolagem { overflow-x: auto; }
  .pr-tabela { min-width: 700px; }
}
@supports selector(:has(a)) {
  @media (max-width: 860px) {
    .pr-ver { display: flex; gap: 8px; overflow-x: auto; position: sticky; top: 67px; z-index: 6; padding: 8px 2px 12px; background: var(--fundo); scrollbar-width: none; }
    .pr-rolagem { overflow: visible; }
    .pr-tabela { min-width: 0; }
    .pr-tabela [data-col] { display: none; }
    .pr-comparar:has(input[name="ver-nivel"][value="gratuito"]:checked) [data-col="gratuito"],
    .pr-comparar:has(input[name="ver-nivel"][value="essencial"]:checked) [data-col="essencial"],
    .pr-comparar:has(input[name="ver-nivel"][value="comercial"]:checked) [data-col="comercial"],
    .pr-comparar:has(input[name="ver-nivel"][value="profissional"]:checked) [data-col="profissional"],
    .pr-comparar:has(input[name="ver-nivel"][value="enterprise"]:checked) [data-col="enterprise"] { display: table-cell; }
    .pr-tabela th[scope="row"] { width: 58%; }
  }
}

/* o Gratuito, como se paga, onde corre, extras e perguntas */
.pr-gratuito { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pr-gr-item h3 { margin: 0 0 6px; font-size: 19px; }
.pr-gr-item p { margin: 0; font-size: 15.5px; }
.pr-ritmos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cartao.pr-ritmo { padding: 22px; }
.pr-ritmo__n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--navy-900); color: #fff; font: 800 20px var(--f-marca); }
.pr-ritmo h3 { margin: 0; font-size: 20px; }
.pr-ritmo__ciclo { margin: 2px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--teal-700); }
.pr-ritmo p:last-child { margin: 0; font-size: 15px; color: var(--ink); }
.pr-regras { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; font-size: 15.5px; color: var(--ink); }
.pr-regras li { position: relative; padding-left: 26px; }
.pr-regras li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 11px; height: 6px; border-left: 2px solid var(--teal-500); border-bottom: 2px solid var(--teal-500); transform: rotate(-45deg); }
.pr-edicoes, .pr-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-edicao h3, .pr-extra h3 { margin: 0 0 6px; font-size: 19px; }
.pr-edicao p, .pr-extra p { margin: 0; font-size: 15.5px; }
.pr-faq { display: grid; gap: 12px; max-width: 60rem; }
.pr-faq details p { margin: 0; padding: 0 0 20px; font-size: 16px; color: var(--ink); }
@media (max-width: 960px) {
  .pr-ritmos, .pr-edicoes, .pr-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pr-gratuito, .pr-ritmos, .pr-regras, .pr-edicoes, .pr-extras { grid-template-columns: 1fr; }
  .pr-tabela thead th { top: 67px; }
}