/* ===========================================================================
   am.css — AtivaMoney public site, design system v3 (WI #1528)
   ---------------------------------------------------------------------------
   Source of truth: .temp/design_handoff_site_publico (Claude Design handoff).
   This file REPLACES assets/css/style.css for every page that has been
   migrated to the v3 design. Both files coexist while the migration runs; a
   page loads one or the other, never both.

   Two deliberate departures from the handoff, both forced by this site's own
   constraints — do not "fix" them back:

   1. FONTS ARE SELF-HOSTED. The handoff loads Space Grotesk and Archivo from
      Google Fonts. Our CSP (nginx.conf) is `font-src 'self'` and
      `style-src 'self' 'unsafe-inline'` — a Google Fonts <link> is refused by
      the browser IN SILENCE and the page falls back to system-ui. The two
      families were already self-hosted in assets/fonts/ for the old design,
      at exactly the weights v3 asks for, so the @font-face blocks below are
      the whole of it. Adding a Google Fonts link would also send every
      visitor's IP to Google, which this site does not do before consent.

   2. RESPONSIVE VALUES ARE @media QUERIES, not JS-injected custom properties.
      The prototype computes --heroCols/--planCols etc. in JavaScript. The
      handoff explicitly says to use real media queries in production. The
      breakpoints are 760px (estreito) and 1040px (medio), plus 1120px and
      1280px for the header nav only.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Fontes
   Space Grotesk is a variable font (300..700) in one file; Archivo ships as
   four static weights. `swap` so text paints immediately on the ~50KB budget.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations'),
       url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
}
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------------------
   2. Tokens
   Every value here comes from the handoff's token table. The contrast ratios
   in the comments are the measured ones — `--am-txt-3` (#666C6A) is 4,6:1 on
   osso and FAILS on grafite, which is why there is a separate `--am-txt-3-esc`
   for dark sections. Never swap one for the other.
   --------------------------------------------------------------------------- */
:root {
  /* Cor */
  --am-lima:        #C8F000;   /* primária: botões, acentos, sublinhados */
  --am-tinta-oliva: #4A5A00;   /* único texto válido sobre lima; cor de links */
  --am-grafite:     #1F2326;   /* texto principal, fundos escuros */
  --am-osso:        #F3F1EC;   /* fundo da página */
  --am-branco:      #FFFFFF;   /* cartões sobre o osso */
  --am-sup:         #EDEAE2;   /* superfície subtil */
  --am-linha:       #E4E1D9;   /* bordas */
  --am-linha-media: #CFCBBE;   /* bordas de campos */
  --am-linha-media2:#D4D0C4;   /* bordas de botões secundários */
  --am-txt-2:       #4B5255;   /* 7,1:1 sobre osso */
  --am-txt-3:       #666C6A;   /* 4,6:1 sobre osso — NUNCA sobre grafite */
  --am-txt-3-esc:   #9AA09C;   /* 5,9:1 sobre grafite */
  --am-txt-claro:   #C6CAC7;   /* corpo em secções escuras */
  --am-esmeralda:   hsl(162 80% 26%);
  --am-grafite-2:   #2A2F33;   /* superfície dentro de blocos grafite */
  --am-grafite-3:   #3E4449;   /* linha dentro de blocos grafite */
  --am-cinza-linha: #63696C;

  /* Espaço */
  --am-max: 1280px;
  --am-gut: clamp(16px, 4vw, 40px);
  --am-ritmo: clamp(56px, 9vw, 128px);

  /* Cantos */
  --am-r-etiqueta: 2px;
  --am-r-botao: 4px;
  --am-r-cartao: 6px;

  /* Sombras */
  --am-sombra-cartao: 0 1px 2px rgba(31,35,38,.05), 0 20px 44px -30px rgba(31,35,38,.45);

  /* Tipo */
  --am-titulo: 'Space Grotesk', system-ui, sans-serif;
  --am-corpo: 'Archivo', system-ui, sans-serif;

  /* Cabeçalho — a altura entra em scroll-margin-top de tudo o que é destino
     de âncora, senão o cabeçalho fixo tapa o alvo. */
  --am-cab: 70px;

  /* Três nomes herdados do style.css antigo. NÃO são tokens do desenho v3 —
     estão aqui porque o main.js constrói os ícones dos limites dos planos com
     `stroke="var(--good)"`, `var(--primary-light)` e `var(--ink-400)` escritos
     à mão dentro do SVG. Numa folha que não os declare, o stroke fica inválido
     e os vistos desenham-se invisíveis: a lista aparece sem um único ícone e
     nada falha em lado nenhum. Mapeados para os equivalentes do v3. */
  --good: var(--am-esmeralda);
  --primary-light: var(--am-lima);
  --ink-400: var(--am-txt-3);
}

/* ---------------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Os fragmentos da explosão do hero voam de propósito para fora do palco — é
   isso que os faz atravessar o ecrã inteiro em vez de ficarem presos à caixa.
   O preço é que o conteúdo passa a ser mais largo do que a janela.

   `overflow-x: hidden` aqui, no body e só no body, é o que o protótipo do
   handoff faz: o valor propaga-se para a viewport, que passa a cortar.
   Verifiquei que a página não rola mesmo para o lado — depois de um
   `scrollTo(2000, y)`, o `window.scrollX` fica em 0. O
   `documentElement.scrollWidth` continua a reportar a largura por cortar, mas
   isso é só um número: não há barra nem rolagem. */
body {
  margin: 0;
  background: var(--am-osso);
  color: var(--am-grafite);
  font-family: var(--am-corpo);
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* O `hidden` do HTML tem de ganhar sempre. A folha do browser dá-lhe
   `display: none`, mas qualquer regra nossa que ponha `display: flex` ou
   `grid` numa classe do mesmo elemento vence — as regras do autor ganham às do
   browser. O resultado é um elemento marcado como escondido que se vê na
   mesma, e foi assim que o selector Mensal/Anual apareceu antes de haver
   preços e que o cartão do plano Empresas, que nasce `hidden`, se mostrava.
   O `!important` é a forma certa de fechar isto de uma vez, para toda a folha. */
[hidden] { display: none !important; }

/* A altura de uma imagem é SEMPRE derivada, salvo quando uma regra a fixa.

   Porquê uma regra global: um `<img>` com width e height no HTML recebe-os
   como pistas de apresentação. Basta uma regra nossa dar-lhe `width` para a
   altura continuar a vir do atributo — e a imagem distorce, sem nada falhar.
   Aconteceu três vezes só neste ficheiro: nas ilustrações do infográfico
   (esticadas ao alto no telemóvel), no painel do agente Ativ.IA (o mesmo) e
   nas capas dos artigos do blog (que ignoravam o aspect-ratio de 16/9).
   Os atributos ficam no HTML — são eles que reservam o espaço e evitam o
   salto de layout — mas quem manda na altura passa a ser a proporção.
   Quem precisar de altura fixa declara-a numa classe, que ganha a esta. */
img { height: auto; }

h1, h2, h3, h4 { font-family: var(--am-titulo); margin: 0; font-weight: 700; }
p { margin: 0; }
button { font: inherit; }
img, video { max-width: 100%; }

a {
  color: var(--am-tinta-oliva);
  text-decoration-color: rgba(74,90,0,.35);
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover { color: var(--am-grafite); text-decoration-color: var(--am-grafite); }

/* Todo o destino de âncora tem de limpar o cabeçalho fixo. */
:target, [id] { scroll-margin-top: calc(var(--am-cab) + 20px); }

/* Foco visível em tudo o que é operável. Sem isto a navegação por teclado
   desaparece no fundo osso. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--am-tinta-oliva);
  outline-offset: 2px;
  border-radius: 2px;
}

.am-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto para o conteúdo — primeiro tab da página. */
.am-salto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--am-grafite); color: var(--am-osso);
  padding: 12px 18px; border-radius: 0 0 var(--am-r-botao) 0;
  font-family: var(--am-titulo); font-weight: 700; text-decoration: none;
}
.am-salto:focus { left: 0; color: var(--am-osso); }

/* ---------------------------------------------------------------------------
   4. Movimento
   As oito @keyframes do handoff, verbatim. `amLogo` lê --lx/--ly/--ls, que um
   script inline no <head> escreve (e reescreve no resize); sem JavaScript os
   valores por omissão definidos por breakpoint mais abaixo degradam bem.
   --------------------------------------------------------------------------- */
@keyframes amSobe    { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes amEntra   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes amProduto { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes amMola    { from { opacity: 0; transform: translateY(34px) scale(.94); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes amCarrossel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes amLevita  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes amPisca   { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes amLogo {
  0%   { opacity: 0; transform: translate(var(--lx, 0), var(--ly, 0)) scale(calc(var(--ls, 1) * .5)); filter: blur(22px); }
  16%  { opacity: 1; filter: blur(0px); }
  26%  { transform: translate(var(--lx, 0), var(--ly, 0)) scale(calc(var(--ls, 1) * 1.07)); }
  34%  { transform: translate(var(--lx, 0), var(--ly, 0)) scale(var(--ls, 1)); }
  62%  { opacity: 1; transform: translate(var(--lx, 0), var(--ly, 0)) scale(var(--ls, 1)); filter: blur(0px); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0px); }
}

/* ---------------------------------------------------------------------------
   5. Contentores e cabeçalhos de secção
   --------------------------------------------------------------------------- */
.am-env { max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut); }
.am-sec { padding-top: var(--am-ritmo); }

.am-etiqueta {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--am-txt-3); margin: 0 0 14px;
}
.am-etiqueta--lima {
  color: var(--am-lima); font-family: var(--am-titulo); font-weight: 700;
  letter-spacing: .12em; display: flex; align-items: center; gap: 10px;
}
.am-etiqueta--lima::before {
  content: ''; width: 26px; height: 2px; background: var(--am-lima); flex: 0 0 auto;
}

.am-h2 {
  font-size: clamp(26px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 14px;
}
.am-sub {
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--am-txt-2);
  max-width: 56ch;
}

/* Sublinhado lima que acompanha as quebras de linha. */
.am-realce {
  border-bottom: .1em solid var(--am-lima);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
   6. Botões
   --------------------------------------------------------------------------- */
.am-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--am-titulo); font-weight: 700; font-size: 15px;
  border-radius: var(--am-r-botao); text-decoration: none; cursor: pointer;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.am-btn--lima { background: var(--am-lima); color: var(--am-tinta-oliva); border-color: var(--am-lima); }
.am-btn--lima:hover { background: #b7da00; color: var(--am-tinta-oliva); }
.am-btn--contorno { background: transparent; color: var(--am-grafite); border-color: var(--am-linha-media2); }
.am-btn--contorno:hover { background: var(--am-branco); border-color: var(--am-grafite); color: var(--am-grafite); }
.am-btn--grafite { background: var(--am-grafite); color: var(--am-osso); border-color: var(--am-grafite); }
.am-btn--grafite:hover { background: #33393d; color: var(--am-osso); }
.am-btn--g { min-height: 52px; font-size: 16px; padding: 0 24px; }
.am-btn--xg { min-height: 58px; font-size: 17px; padding: 0 28px; }
.am-btn--p { min-height: 40px; font-size: 14px; padding: 0 14px; }

/* Apelo secundário do hero: texto com sublinhado lima grosso. */
.am-link-forte {
  font-family: var(--am-titulo); font-weight: 700; font-size: 16px;
  color: var(--am-grafite); text-decoration: underline;
  text-decoration-color: var(--am-lima); text-decoration-thickness: 4px;
  text-underline-offset: 7px; white-space: nowrap;
}
.am-link-forte:hover { color: var(--am-grafite); text-decoration-color: var(--am-tinta-oliva); }

/* ---------------------------------------------------------------------------
   7. Cabeçalho
   A SEQUÊNCIA DE ABERTURA É SÓ DA LANDING, e é por isso que vive atrás de
   `.am-cab--abertura` em vez de estar nas classes base. O logótipo demora
   2,15s a assentar e a nav, o «Entrar» e o botão só entram aos 3,15s. Numa
   landing isso é a encenação; numa página de preços, numa 404 ou num artigo é
   um cabeçalho que fica três segundos sem navegação e sem apelo nenhum, à
   frente de alguém que chegou ali para fazer uma coisa concreta.
   A classe está em /pt/ e /en/ e em mais lado nenhum.
   O fundo muda a partir de 25% do documento (am.js). A borda inferior é um
   <div> absoluto, não um border — entra com fade aos 3,15s junto com a nav.
   --------------------------------------------------------------------------- */
.am-cab {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243,241,236,.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 260ms ease;
}
.am-cab[data-denso="1"] { background: rgb(233 227 211 / 93%); }

.am-cab__int {
  max-width: var(--am-max); margin: 0 auto; min-height: var(--am-cab);
  padding-inline: var(--am-gut);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  position: relative;
}
.am-cab__borda {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--am-linha);
}
.am-cab--abertura .am-cab__borda { opacity: 0; animation: amEntra .7s cubic-bezier(.2,.8,.2,1) 3.15s both; }

/* O logótipo é o primeiro a encolher; o bloco de acções nunca encolhe. */
.am-cab__logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.am-cab__logo img {
  height: 36px; width: auto; max-width: 100%; display: block;
  transform-origin: left center;
}
.am-cab--abertura .am-cab__logo img { animation: amLogo 2.15s cubic-bezier(.72,0,.16,1) both; }

.am-cab__nav {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
}
.am-cab--abertura .am-cab__nav { animation: amEntra .7s cubic-bezier(.2,.8,.2,1) 3.15s both; }
.am-cab__nav a {
  font-size: 15px; color: var(--am-txt-2); text-decoration: none; white-space: nowrap;
}
.am-cab__nav a:hover { color: var(--am-grafite); }

.am-cab__acoes {
  flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.am-cab--abertura .am-cab__acoes { animation: amEntra .7s cubic-bezier(.2,.8,.2,1) 3.15s both; }
.am-cab__entrar { font-size: 15px; color: var(--am-txt-2); text-decoration: none; white-space: nowrap; }
.am-cab__entrar:hover { color: var(--am-grafite); }
.am-cab__cta { min-height: 44px; font-size: 15px; padding: 0 18px; }

/* Cabeçalho adaptativo — a tabela do handoff, ponto por ponto. O botão mantém
   sempre 44px de altura, que é o alvo de toque mínimo. */
@media (max-width: 1120px) { .am-cab__nav { display: none; } }
@media (max-width: 1280px) and (min-width: 1121px) {
  .am-cab__nav { gap: 16px; }
  .am-cab__nav a { font-size: 14px; }
}
@media (max-width: 520px) {
  .am-cab__int { gap: 10px; }
  .am-cab__logo img { height: 32px; }
  .am-cab__entrar { font-size: 15px; }
  .am-cab__cta { font-size: 14px; padding: 0 14px; }
}
@media (max-width: 420px) {
  .am-cab__int { padding-inline: 12px; }
  .am-cab__logo img { height: 28px; }
  .am-cab__entrar { font-size: 13.5px; }
  .am-cab__cta { font-size: 14px; padding: 0 14px; }
}
@media (max-width: 360px) {
  .am-cab__logo img { height: 24px; }
  .am-cab__entrar { font-size: 13.5px; }
  .am-cab__cta { font-size: 13px; padding: 0 11px; }
}

/* Valores iniciais da abertura do logótipo por breakpoint. am.js sobrepõe-nos
   com o cálculo exacto; estes são o degradar sem JavaScript. */
:root { --ls: 3.9; --ly: 30vh; --lx: 0px; }
@media (max-width: 1040px) { :root { --ls: 3.0; --ly: 30vh; } }
@media (max-width: 760px)  { :root { --ls: 2.1; --ly: 26vh; } }

/* ---------------------------------------------------------------------------
   8. Voltar ao topo
   --------------------------------------------------------------------------- */
.am-topo {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 45; width: 48px; height: 48px; border-radius: 50%;
  background: var(--am-lima); border: 1px solid var(--am-grafite);
  box-shadow: 0 10px 24px -12px rgba(31,35,38,.5);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.am-topo[data-visivel="1"] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.am-topo svg { width: 22px; height: 22px; stroke: var(--am-grafite); stroke-width: 2.5; fill: none; }

/* ---------------------------------------------------------------------------
   9. Rodapé
   --------------------------------------------------------------------------- */
.am-rodape { background: var(--am-grafite); color: var(--am-txt-claro); margin-top: var(--am-ritmo); }
.am-rodape__int {
  max-width: var(--am-max); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--am-gut) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 48px);
}
.am-rodape__logo img { height: 34px; width: auto; display: block; }
.am-rodape__assinatura { font-size: 15px; color: var(--am-txt-3-esc); margin: 16px 0 22px; max-width: 30ch; }
.am-rodape__social { display: flex; gap: 10px; margin-bottom: 20px; }
.am-rodape__social a {
  width: 40px; height: 40px; border: 1px solid var(--am-grafite-3); border-radius: var(--am-r-botao);
  display: grid; place-items: center; color: var(--am-txt-claro);
  transition: border-color 120ms ease, color 120ms ease;
}
.am-rodape__social a:hover { border-color: var(--am-lima); color: var(--am-lima); }
.am-rodape__social svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.am-rodape__portugal { font-size: 13.5px; color: var(--am-txt-3-esc); display: flex; align-items: center; gap: 7px; }
.am-rodape__portugal svg { width: 14px; height: 14px; fill: #E8695E; stroke: none; }

.am-rodape h3 {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--am-lima); font-weight: 700; margin: 0 0 14px;
}
.am-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.am-rodape ul a { font-size: 14.5px; color: var(--am-txt-claro); text-decoration: none; }
.am-rodape ul a:hover { color: var(--am-lima); }

.am-rodape__fim {
  max-width: var(--am-max); margin: 0 auto;
  padding: 20px var(--am-gut) 28px; border-top: 1px solid var(--am-grafite-3);
  font-size: 13px; color: var(--am-txt-3-esc);
}

@media (max-width: 1040px) { .am-rodape__int { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .am-rodape__int { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   10. Modais (vídeo, lista de espera, playground)
   Fecham com Escape e com clique no fundo; o foco fica preso dentro enquanto
   estiverem abertos e volta ao elemento que os abriu (am.js).
   --------------------------------------------------------------------------- */
.am-modal {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: clamp(12px, 3vw, 28px);
  background: rgba(31,35,38,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.am-modal[data-aberto="1"] { display: flex; }
.am-modal__caixa {
  background: var(--am-branco); border-radius: 10px; width: 100%;
  max-height: calc(100vh - 32px); overflow: auto; position: relative;
}
.am-modal__caixa--video { background: #14181A; max-width: 1100px; padding: 0; overflow: hidden; }
.am-modal__caixa--lista { max-width: 470px; padding: clamp(22px, 3vw, 32px); }
.am-modal__caixa--playground { max-width: 1180px; padding: 0; overflow: hidden; background: var(--am-grafite-2); }
.am-modal__fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--am-branco); border: 1px solid var(--am-linha);
  display: grid; place-items: center; color: var(--am-grafite);
}
.am-modal__caixa--video .am-modal__fechar,
.am-modal__caixa--playground .am-modal__fechar { background: var(--am-grafite); border-color: var(--am-grafite-3); color: var(--am-osso); }
.am-modal__fechar svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.am-modal video { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   11. Campos de formulário
   --------------------------------------------------------------------------- */
.am-campo { display: block; margin-bottom: 14px; }
.am-campo > span {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--am-txt-2); margin-bottom: 6px;
}
.am-campo input, .am-campo textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--am-grafite);
  background: var(--am-branco); border: 1px solid var(--am-linha-media);
  border-radius: var(--am-r-botao); padding: 13px 14px; min-height: 48px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.am-campo textarea { resize: vertical; min-height: 130px; }
.am-campo input:focus, .am-campo textarea:focus {
  outline: none; border-color: var(--am-tinta-oliva);
  box-shadow: 0 0 0 3px rgba(200,240,0,.45);
}
.am-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--am-txt-2); margin: 14px 0 18px; }
.am-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--am-tinta-oliva); }

/* Mensagens de estado dos formulários. */
.am-nota { font-size: 13.5px; border-radius: var(--am-r-botao); padding: 10px 12px; margin-top: 12px; display: none; }
.am-nota[data-estado="ok"]  { display: block; background: #E8F7F0; color: #114C37; border: 1px solid #A8DCC8; }
.am-nota[data-estado="erro"]{ display: block; background: #FDECE4; color: #7A3310; border: 1px solid #F0C3AA; }

/* ---------------------------------------------------------------------------
   12. prefers-reduced-motion
   Desliga tudo. O `!important` é intencional: as animações estão declaradas
   em atributos e em regras mais específicas, e esta é a rede de segurança.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ===========================================================================
   PARTE 2 — as onze seccoes da landing
   Carregado em todas as paginas (a folha e' uma so, como a casa manda), mas
   so /pt/ e /en/ usam estas classes.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   L1. Hero
   --------------------------------------------------------------------------- */
.am-hero {
  max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut);
  display: grid; grid-template-columns: 1fr 1.18fr; align-items: center;
  gap: clamp(26px, 3.5vw, 56px); min-height: calc(100vh - var(--am-cab));
}

.am-hero h1 {
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.04em;
  max-width: 15ch;
  /* Reserva três linhas. Sem isto a máquina de escrever faz o resto da coluna
     saltar a cada frase que muda de altura. */
  min-height: 3.24em;
  animation: amEntra .7s cubic-bezier(.2,.8,.2,1) 2.35s both;
}
.am-hero__escrito {
  border-bottom: .12em solid var(--am-lima);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.am-hero__cursor {
  display: inline-block; width: .07em; height: .86em; background: var(--am-lima);
  vertical-align: baseline; margin-left: .04em;
  animation: amPisca 1.06s steps(1, end) infinite;
}

.am-hero__sub {
  font-size: clamp(16.5px, 1.7vw, 21px); line-height: 1.55; color: var(--am-txt-2);
  max-width: 50ch; margin-top: 22px;
  animation: amEntra .8s cubic-bezier(.2,.8,.2,1) 2.95s both;
}
.am-hero__botoes {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px;
  animation: amEntra .8s cubic-bezier(.2,.8,.2,1) 3.07s both;
}
.am-hero__nota {
  font-size: 13px; color: var(--am-txt-3); margin-top: 20px; max-width: 46ch;
  animation: amEntra .8s cubic-bezier(.2,.8,.2,1) 3.25s both;
}

/* Palco dos dispositivos — overflow visible em TODOS os tamanhos. É isso que
   deixa os fragmentos da explosão atravessarem o ecrã inteiro em vez de
   ficarem presos ao invólucro. Não voltar a pôr hidden em telemóvel. */
.am-palco { overflow: visible; }
.am-disp {
  display: flex; align-items: flex-end; gap: 10px; overflow: visible;
}
.am-disp__chassis { position: relative; overflow: visible; }
.am-disp__chassis--mon  { flex: 1 1 auto; animation: amMola .9s cubic-bezier(.2,.9,.25,1.05) 2.45s both, amLevita 7s ease-in-out infinite; }
.am-disp__chassis--fone { flex: 0 0 23%; margin-left: -4%; z-index: 2; animation: amMola .9s cubic-bezier(.2,.9,.25,1.05) 2.62s both, amLevita 7s ease-in-out .9s infinite; }

/* drop-shadow, não box-shadow: a sombra tem de seguir a silhueta recortada do
   PNG. Com box-shadow ficava um rectângulo à volta da caixa. */
.am-disp__chassis--mon  img { filter: drop-shadow(0 28px 36px rgba(31,35,38,.24)); }
.am-disp__chassis--fone img { filter: drop-shadow(0 28px 36px rgba(31,35,38,.3)); }
.am-disp__chassis img { display: block; width: 100%; height: auto; }

/* Camada dos fragmentos: sobrepõe-se à imagem inteira e está a zero até a
   explosão começar. */
.am-disp__pecas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Sem `will-change` aqui de propósito — é posto e retirado pelo JS enquanto a
   explosão está a meio. São 62 fragmentos; deixá-los promovidos a camada
   própria durante toda a vida da página é pedir ao compositor 62 texturas
   permanentes numa página de 14 000px de altura, que é exactamente o abuso que
   a propriedade avisa para não se fazer. */
.am-disp__peca { position: absolute; background-repeat: no-repeat; backface-visibility: hidden; }

.am-lojas {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 20px; flex-wrap: wrap;
  animation: amEntra .8s cubic-bezier(.2,.8,.2,1) 2.95s both;
}
.am-lojas img { display: block; width: auto; }
.am-lojas__apple { height: 44px; opacity: .5; cursor: not-allowed; }
.am-lojas__google { height: 50px; }
.am-lojas__legendas {
  font-size: 12.5px; color: #63696C; text-align: right; margin-top: 10px; line-height: 1.5;
}

@media (max-width: 1040px) {
  /* `overflow-x: clip` NO HERO, E SO EM ECRA ESTREITO — e' isto que tira o
     salto que o dono via a descer a pagina no telemovel.

     Os fragmentos da explosao voam para fora do palco de proposito, e o
     documento passa a ser mais largo do que o ecra. O `overflow-x: hidden` que
     esta no `body` impede que se role para o lado, mas nao muda a LARGURA de
     que o documento precisa: num telemovel o browser responde a isso a
     afastar-se, alargando a viewport para caber o que la esta. Medido no
     emulador, a descer pelo hero: `innerWidth` a ir de 390 para 421, 490,
     565, 599 e 631.

     E a viewport a mudar mexe em tudo o que depende dela. A seccao «Como se
     comeca» re-mede-se (a medicao abre os quatro passos um de cada vez), a
     altura dela passava de 1976px para 3022 e voltava a 2133, e o documento
     inteiro mudava de comprimento debaixo dos pes de quem estava a ler. Era o
     «o ecra salta novamente para cima» — e o dono acertou ao dizer que cheirava
     a efeito secundario da explosao.

     `clip` e nao `hidden`: `hidden` faria do hero um contentor de rolagem, e
     um contentor de rolagem quebra o `position: sticky` de tudo o que esteja
     la dentro. `clip` corta e mais nada. `overflow-y` fica `visible`, que so
     e' valido em par com `clip` — e e' preciso, porque as sombras e a animacao
     de levitacao dos dispositivos saem por cima e por baixo.

     So abaixo de 1040px: em ecra largo o hero tem 1280px no meio de uma janela
     maior, e cortar ali ceifava fragmentos que hoje atravessam as margens sem
     incomodar ninguem. */
  .am-hero { overflow-x: clip; overflow-y: visible; }
  .am-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 24px; gap: 30px; }
  .am-disp { gap: 0; }
  .am-disp__chassis--fone { flex: 0 0 19%; margin-left: -5%; }
  .am-lojas { justify-content: center; }
  .am-lojas__legendas { text-align: center; }
}

/* EM TELEMOVEL O HERO TEM DE CABER NUM ECRA — COM OS DISPOSITIVOS DENTRO.

   Em coluna unica o texto passa a ocupar a largura toda e cresce: o titulo
   reserva tres linhas, a entrada leva seis e a nota mais tres. Somado ao
   cabecalho, empurrava os dispositivos para 550px e as lojas para 795px — fora
   do ecra de qualquer telefone real, onde a barra do browser ainda come uns
   100px dos 844 que o emulador mostra.

   Nao se corta texto nenhum: aperta-se o espacamento e o corpo da letra. Os
   numeros abaixo foram escolhidos a medir, nao a estimar — cada um vale entre
   8 e 21px, e juntos chegam para trazer os dispositivos ao primeiro ecra. */
@media (max-width: 640px) {
  .am-hero { padding-top: 14px; gap: 18px; }
  .am-hero h1 { font-size: 35px; }
  .am-hero__sub { font-size: 15.5px; line-height: 1.45; margin-top: 14px; }
  .am-hero__botoes { margin-top: 20px; gap: 16px; }
  .am-hero__nota { font-size: 12px; margin-top: 12px; line-height: 1.45; }
  .am-lojas { margin-top: 14px; }
  .am-lojas__apple { height: 38px; }
  .am-lojas__google { height: 43px; }
  .am-lojas__legendas { font-size: 11.5px; margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   2. Cinco funcionalidades
   Os lados NÃO alternam — o ritmo vem do número e do espaço.
   --------------------------------------------------------------------------- */
.am-func { display: flex; flex-direction: column; gap: clamp(52px, 7vw, 110px); margin-top: 48px; }
.am-func__item { display: flex; align-items: center; gap: clamp(26px, 4vw, 64px); flex-wrap: wrap; }
.am-func__txt { flex: 1 1 290px; }
.am-func__num { font-size: 13px; letter-spacing: .1em; color: var(--am-txt-3); font-family: var(--am-titulo); font-weight: 500; }
.am-func__txt h2 {
  font-size: clamp(25px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.025em; margin: 10px 0 14px;
}
.am-func__txt p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--am-txt-2); max-width: 46ch; }
.am-func__txt .am-btn { margin-top: 22px; }

.am-func__media { flex: 1.3 1 400px; min-width: 0; }
.am-func__abas { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.am-func__aba {
  font-family: var(--am-titulo); font-weight: 700; font-size: 13px; cursor: pointer;
  min-height: 34px; padding: 0 14px; border-radius: var(--am-r-botao);
  background: transparent; border: 1px solid var(--am-linha-media2); color: var(--am-txt-2);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.am-func__aba[aria-pressed="true"] { background: var(--am-grafite); border-color: var(--am-grafite); color: var(--am-osso); }

/* Moldura de browser */
.am-browser { border: 1px solid #DAD6CC; border-radius: 10px; overflow: hidden; background: var(--am-branco); box-shadow: var(--am-sombra-cartao); }
.am-browser__barra {
  height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--am-sup); border-bottom: 1px solid var(--am-linha);
}
.am-browser__luz { width: 10px; height: 10px; border-radius: 50%; }
.am-browser__pilula {
  margin-left: 10px; background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: 999px; font-size: 11.5px; color: var(--am-txt-3); padding: 3px 12px;
}
.am-browser__ecra { aspect-ratio: 1.4667; background: #14181A; }
.am-browser__ecra video, .am-browser__ecra img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* dashboard_e_cashflow.mp4 está gravado em modo escuro a partir dos 6s. Numa
   página de fundo osso isso lê-se como erro; a moldura grafite faz com que
   pareça intencional enquanto o vídeo não for regravado no tema claro. */
.am-func__item--escuro .am-browser { background: var(--am-grafite); border-color: var(--am-grafite-3); }
.am-func__item--escuro .am-browser__barra { background: var(--am-grafite-2); border-bottom-color: var(--am-grafite-3); }
.am-func__item--escuro .am-browser__pilula { background: var(--am-grafite); border-color: var(--am-grafite-3); color: var(--am-txt-3-esc); }

/* Aro de iPhone */
.am-fone {
  width: 286px; max-width: 100%; margin: 0 auto; padding: 11px; border-radius: 46px;
  background: linear-gradient(145deg, #D8D5CE 0%, #9A9791 28%, #EDEBE6 52%, #8E8B85 76%, #CFCCC5 100%);
  position: relative; box-shadow: 0 24px 40px -26px rgba(31,35,38,.55);
}
.am-fone__ecra { position: relative; aspect-ratio: .462; border-radius: 36px; overflow: hidden; background: #14181A; }
.am-fone__ecra video, .am-fone__ecra img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lente: círculo de 12px, não uma ilha alongada. */
.am-fone__lente {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #14181A; z-index: 2;
}
.am-fone__bt { position: absolute; background: #8E8B85; border-radius: 2px; }
.am-fone__bt--v { left: -2px; width: 3px; }
.am-fone__bt--d { right: -2px; width: 3px; }

@media (max-width: 760px) { .am-func__abas { justify-content: center; } }

/* ---------------------------------------------------------------------------
   3. Experimenta a demo — o playground do #1525 vive aqui
   --------------------------------------------------------------------------- */
.am-demo { background: var(--am-grafite); color: var(--am-osso); margin-top: var(--am-ritmo); padding-block: clamp(48px, 8vw, 104px); }
.am-demo__int { max-width: 1000px; margin: 0 auto; padding-inline: var(--am-gut); text-align: center; }
.am-demo .am-etiqueta--lima { justify-content: center; }
.am-demo h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.03em; color: var(--am-osso); margin-bottom: 16px; }
.am-demo h2 em { font-style: normal; color: var(--am-lima); }
.am-demo__sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--am-txt-claro); max-width: 56ch; margin: 0 auto 32px; }

.am-demo__moldura {
  display: block; width: 100%; padding: 6px; cursor: pointer;
  background: var(--am-grafite-2); border: 2px solid var(--am-lima); border-radius: 14px;
  box-shadow: 0 0 44px -6px rgba(200,240,0,.34);
  transition: box-shadow 200ms ease;
}
.am-demo__moldura:hover { box-shadow: 0 0 60px -4px rgba(200,240,0,.5); }
.am-demo__interior {
  position: relative; aspect-ratio: 1000/645; border-radius: 9px; overflow: hidden; background: #14181A;
  display: grid; place-items: center;
}
.am-demo__cartaz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
/* É um <button> a sério (é ele que main.js liga ao playground), por isso tem de
   perder o fundo e a borda que o browser lhe dá de origem. Sem este reset o
   ButtonFace cinzento fica por trás e o título, que é osso quase branco,
   desaparece sobre ele. */
.am-demo__sobre {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px;
  padding: 16px; background: transparent; border: 0; color: inherit; cursor: pointer;
  font: inherit; text-align: center; width: 100%;
}
.am-demo__play {
  width: clamp(58px, 6vw, 74px); height: clamp(58px, 6vw, 74px); border-radius: 50%;
  background: var(--am-lima); display: grid; place-items: center;
  box-shadow: 0 0 34px -4px rgba(200,240,0,.7);
}
.am-demo__play svg { width: 40%; height: 40%; fill: var(--am-grafite); margin-left: 8%; }
.am-demo__titulo { font-family: var(--am-titulo); font-weight: 700; font-size: clamp(19px, 2.2vw, 27px); color: var(--am-osso); }
.am-demo__pe { font-size: 14.5px; color: var(--am-txt-claro); }

.am-demo__garantias {
  display: flex; justify-content: center; gap: clamp(16px, 3vw, 38px); flex-wrap: wrap; margin-top: 26px;
  list-style: none; padding: 0;
}
.am-demo__garantias li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--am-txt-claro); }
.am-demo__garantias svg { width: 17px; height: 17px; stroke: var(--am-lima); stroke-width: 3; fill: none; flex: 0 0 auto; }

/* O iframe do playground só é montado ao clique (bloco PLAYGROUND do main.js).
   Cresce para encher a moldura em vez de ter medida própria. */
[data-playground] > iframe {
  width: 100%; aspect-ratio: 1000/645; border: 0; display: block;
  background: var(--am-grafite-2); border-radius: 9px;
}

/* EM TELEMÓVEL, ECRÃ INTEIRO. Numa moldura de 390px de largura a aplicação
   real fica ilegível: é uma app desenhada para um ecrã, espremida dentro de um
   cartão dentro de uma página. «Experimentar a app» tem de dar a app. */
/* Com o iframe montado, a caixa do cartaz não tem mais nada para mostrar e
   tem de sair do caminho — senão fica por cima da app como uma faixa escura. */
.am-pg--activo .am-demo__interior { display: none; }
.am-pg--activo { padding: 6px; }

/* COM A APP ABERTA, A MOLDURA SAI DA COLUNA DE TEXTO.

   O título e o parágrafo desta secção vivem numa coluna de 1000px — é a
   largura certa para se ler um parágrafo. Para a app é apertada: é uma
   aplicação inteira, com menu lateral, cabeçalho e tabelas, espremida em 920px
   com tipos de 11px. Ao clique, a moldura passa a valer a mesma largura que o
   resto do conteúdo da página (--am-max) e ganha altura de ecrã.

   O `left: 50%` + `translateX(-50%)` é o que a faz sair de uma coluna estreita
   sem lhe mexer: continua centrada, agora em relação à janela.

   Só acima de 1040px. Abaixo disso é o ecrã inteiro que ela ocupa
   (.am-pg--cheio), e essa é `position: fixed` — um `transform` num elemento
   fixo destrói-lhe o `inset: 0`, por isso as duas regras não se cruzam. */
@media (min-width: 1041px) {
  .am-pg--activo {
    width: min(var(--am-max), calc(100vw - var(--am-gut) * 2));
    max-width: none;
    position: relative; left: 50%; transform: translateX(-50%);
  }
  .am-pg--activo > iframe {
    aspect-ratio: auto;
    height: min(calc(100vh - 104px), 920px);
    min-height: 620px;
  }
}

.am-pg--cheio {
  position: fixed; inset: 0; z-index: 80; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: var(--am-grafite);
}
.am-pg--cheio .am-demo__interior { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.am-pg--cheio > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0;
}
.am-pg__fechar {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(31,35,38,.82); border: 1px solid var(--am-grafite-3); color: var(--am-osso);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.am-pg__fechar svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* ---------------------------------------------------------------------------
   4. Como se começa — scrollytelling com pinning
   --------------------------------------------------------------------------- */
.am-comecar { position: relative; height: 300vh; margin-top: var(--am-ritmo); }
.am-comecar__fixo { position: sticky; top: var(--am-cab); max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut); }
/* Fallback obrigatório: quando o conteúdo fixo não cabe no ecrã (portáteis
   baixos), am-landing.js põe data-fixo="0" e desliga o pinning. Sem isto o
   fecho fica cortado. */
.am-comecar[data-fixo="0"] { height: auto; }
.am-comecar[data-fixo="0"] .am-comecar__fixo { position: static; }

.am-comecar__passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; margin-top: 30px; }
.am-passo {
  background: var(--am-branco); border: 2px solid var(--am-linha); border-radius: var(--am-r-cartao);
  padding: 18px; display: flex; align-items: center; gap: 14px; min-height: 86px;
  transition: background .45s, color .45s, border-color .45s;
}
.am-passo[data-estado="passado"] { border-color: var(--am-cinza-linha); }
.am-passo[data-estado="activo"]  { background: var(--am-grafite); color: var(--am-osso); border-color: var(--am-grafite); }
.am-passo__n {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--am-lima); color: var(--am-tinta-oliva);
  font-family: var(--am-titulo); font-weight: 700; font-size: 17px; border-radius: var(--am-r-etiqueta);
}
.am-passo__t { font-family: var(--am-titulo); font-weight: 700; font-size: 16px; line-height: 1.25; }

.am-comecar__liga {
  position: absolute; top: 50%; height: 2px; width: 20px; background: var(--am-cinza-linha);
  opacity: 0; transition: opacity .45s; pointer-events: none;
}

.am-comecar__palco { position: relative; margin-top: 26px; min-height: clamp(290px, 46vh, 460px); }
.am-dialogo {
  position: absolute; top: 0; width: calc(75% - 5px); height: clamp(290px, 46vh, 460px);
  background: var(--am-branco); border: 2px solid #A9A497;
  /* Raio assimétrico — dá o aspecto de caixa desenhada à mão. */
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 0 22px 44px -22px rgba(31,35,38,.38);
  padding: 22px; left: 0; transition: left .6s cubic-bezier(.2,.8,.2,1);
}
/* FLEX e não grid, e a razão é específica: num item de grelha o `max-height:
   100%` da imagem resolve contra a ÁREA da grelha, e essa área dimensiona-se
   para caber o conteúdo. Fica circular — a linha cresceu para os 487px da
   imagem dentro de um contentor de 412px, e a ilustração transbordava a caixa
   por baixo. Num contentor flex com altura definida a percentagem resolve
   contra essa altura, e a imagem encolhe como se espera. */
.am-dialogo__fig { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.am-dialogo__fig > div { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.am-dialogo__fig img, .am-dialogo__fig video, .am-dialogo__fig svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Marcador enquanto as ilustrações não chegam. */
.am-dialogo__vazio {
  width: 100%; height: 100%; border: 2px dashed var(--am-linha-media); border-radius: 12px;
  display: grid; place-items: center; color: var(--am-txt-3); font-size: 14px; text-align: center; padding: 20px;
}
.am-ponteiro {
  position: absolute; top: -15px; width: 30px; height: 30px;
  background: var(--am-branco); border: 2px solid #A9A497;
  transform: rotate(45deg) skew(-6deg, -6deg);
  transition: left .6s cubic-bezier(.2,.8,.2,1);
}
.am-comecar__lado {
  position: absolute; top: 0; width: calc(25% - 15px); padding-top: 8px;
  transition: left .6s cubic-bezier(.2,.8,.2,1), right .6s cubic-bezier(.2,.8,.2,1);
}
.am-comecar__lado h3 { font-size: 21px; line-height: 1.2; margin-bottom: 12px; }
.am-comecar__lado p { font-size: 15.5px; line-height: 1.6; color: var(--am-txt-2); }

/* Cobre a área presa INTEIRA, não só o palco do desktop. Estava dentro do
   bloco que só existe em desktop, e por isso no telemóvel o fecho nunca
   aparecia — a secção acabava no quarto passo, sem remate nenhum.

   NÃO acrescentar `position: relative` ao `.am-comecar__fixo` para isto: ele é
   `sticky`, que já é uma posição e já serve de referência a filhos absolutos.
   Escrever `relative` a seguir desfaz o sticky e mata o pinning inteiro —
   tentei, e a secção deixou de se prender sem nada se queixar. */
.am-pronto {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center;
  background: rgba(243,241,236,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .6s; padding: 20px;
}
.am-pronto[data-visivel="1"] { opacity: 1; }
.am-pronto__visto {
  width: 72px; height: 72px; border-radius: 50%; background: var(--am-esmeralda);
  display: grid; place-items: center; margin: 0 auto 20px;
}
.am-pronto__visto i {
  display: block; width: 26px; height: 14px;
  border-left: 4px solid var(--am-branco); border-bottom: 4px solid var(--am-branco);
  transform: rotate(-45deg); margin-bottom: 6px;
}
.am-pronto p { font-family: var(--am-titulo); font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; max-width: 22ch; }

/* Telemóvel e intermédio: lista vertical, sem pinning. */
.am-comecar__mob { display: none; }
@media (max-width: 1040px) {
  /* O molde do telemóvel também é conduzido pelo scroll — a secção fica presa
     e os passos avançam. Quem decide se dá para prender é o am.js, que mede se
     o conteúdo cabe no ecrã e escreve data-fixo; aqui só se obedece.
     320vh é o que o handoff pede para telemóvel. */
  .am-comecar[data-fixo="1"] { height: 320vh; }
  /* O conteúdo preso é mais curto do que o ecrã, e encostado ao topo deixava
     200 a 350px de vazio por baixo — um buraco a meio da página, sem
     explicação. Centrado, o espaço que sobra reparte-se e lê-se como margem.
     (A altura real da secção é calculada pelo am.js; os 320vh acima são o que
     fica para quem não tem JavaScript.) */
  /* `svh`, NAO `vh` — e e' isto que fazia o scrollytelling nao funcionar no
     telefone do dono.

     Num telemovel `100vh` e' o ecra SEM a barra de endereco do browser: e'
     maior do que o que se ve enquanto a barra esta la. O conteudo preso ficava
     dimensionado a 774px enquanto o ecra visivel tinha 740, e um elemento
     `sticky` mais ALTO do que o sitio onde rola nao prende — passa a rolar
     como qualquer outro. Nada acontecia.

     Quando nao rebentava assim, rebentava do outro lado: o am.js julga se cabe
     contra o `innerHeight` real, media 774 > 740-70 e desligava o pinning,
     deixando os quatro passos enfileirados — que foi o que o dono descreveu na
     revisao anterior. Os dois sintomas sao a mesma causa: o conteudo media-se
     no ecra grande e julgava-se no ecra pequeno.

     `svh` e' o ecra COM a barra visivel, ou seja o pior caso, e por isso cabe
     sempre. A linha `vh` fica por baixo como recurso para quem nao conhece
     `svh` (browsers anteriores a 2022), onde o comportamento e' o de antes. */
  .am-comecar[data-fixo="1"] .am-comecar__fixo {
    min-height: calc(100vh - var(--am-cab));
    min-height: calc(100svh - var(--am-cab));
    display: flex; flex-direction: column; justify-content: center;
  }
  .am-comecar[data-fixo="0"] { height: auto; }
  .am-comecar[data-fixo="0"] .am-comecar__fixo { position: static; }
  .am-comecar__desk { display: none; }
  .am-comecar__mob { display: block; margin-top: 26px; }
  .am-passo-m { display: grid; grid-template-columns: 38px 1fr; gap: 14px; position: relative; padding-bottom: 14px; }
  .am-passo-m__conector { position: absolute; left: 18px; top: 42px; bottom: -14px; width: 0; border-left: 1px dashed var(--am-linha-media); }
  .am-passo-m[data-estado="passado"] .am-passo-m__conector,
  .am-passo-m[data-estado="activo"] .am-passo-m__conector { border-left: 3px solid var(--am-cinza-linha); }
  .am-passo-m__cabeca {
    min-height: 58px; padding: 12px 16px; background: var(--am-branco);
    border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
    display: flex; align-items: center; font-family: var(--am-titulo); font-weight: 700; font-size: 16px;
    transition: background .45s, color .45s, border-color .45s;
  }
  /* O passo em que se está fica em grafite, como no desktop; os já vistos
     ganham contorno; os que faltam ficam em repouso. */
  .am-passo-m[data-estado="activo"] .am-passo-m__cabeca {
    background: var(--am-grafite); border-color: var(--am-grafite); color: var(--am-osso);
  }
  .am-passo-m[data-estado="passado"] .am-passo-m__cabeca { border-color: var(--am-cinza-linha); }
  .am-passo-m__painel { max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.2,.8,.2,1); }
  /* Folga a serio no tecto. A animacao precisa de um valor fixo, mas um tecto
     apertado corta o fim do texto em silencio — e o texto do passo 4 chegava a
     encostar-lhe exactamente. Mais vale a transicao ser um pouco mais rapida
     no fim do que faltar uma linha a alguem. */
  .am-passo-m[data-estado="activo"] .am-passo-m__painel { max-height: 900px; }
  /* O espaço do painel que se fechou colapsa, não fica reservado. */
  .am-passo-m[data-estado="passado"] .am-passo-m__painel,
  .am-passo-m[data-estado="futuro"] .am-passo-m__painel { max-height: 0; }
  .am-passo-m__corpo { padding: 14px 2px 0; font-size: 15.5px; line-height: 1.6; color: var(--am-txt-2); }
  .am-passo-m__fig { margin-top: 14px; }
  /* `height: auto` NAO e' redundante. As ilustracoes trazem width="800"
     height="460" no HTML, e esses atributos sao pistas de apresentacao: com o
     CSS a impor `width: 100%` e a altura a vir do atributo, a imagem ficava
     290x460 — esticada ao alto. Com `height: auto` a proporcao volta a mandar. */
  .am-passo-m__fig img, .am-passo-m__fig video { width: 100%; height: auto; border-radius: var(--am-r-cartao); }

  /* Com a secção presa há um orçamento de altura fixo: cabeçalho, quatro
     cartões e UM painel aberto têm de caber na janela. A ilustração é a peça
     elástica, por isso é ela que cede — sem este tecto o conteúdo passava dos
     700px num telemóvel de 780 e o `medirCabe` desistia de prender, caindo no
     recurso de mostrar tudo aberto. Sem a secção presa não há orçamento
     nenhum e a ilustração fica ao tamanho natural. */
  .am-comecar[data-fixo="1"] .am-comecar__mob { margin-top: 16px; }
  .am-comecar[data-fixo="1"] .am-passo-m__fig { margin-top: 8px; }
  .am-comecar[data-fixo="1"] .am-passo-m__fig img { max-height: 19vh; max-height: 19svh; width: auto; margin: 0 auto; display: block; }
  .am-comecar[data-fixo="1"] .am-passo-m__corpo { padding-top: 8px; font-size: 14.5px; line-height: 1.5; }
  .am-comecar[data-fixo="1"] .am-passo-m { padding-bottom: 8px; }
  .am-comecar[data-fixo="1"] .am-passo-m__cabeca { min-height: 46px; padding: 8px 14px; font-size: 15px; }
  /* Sem a secção presa não há momento de revelação: o fecho fica simplesmente
     no fim da lista. Com ela presa comporta-se como no desktop, e é o
     data-visivel que manda. */
  .am-comecar[data-fixo="0"] .am-pronto {
    position: static; opacity: 1; pointer-events: auto; margin-top: 26px;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (max-width: 760px) { .am-comecar { height: auto; } }

/* ---------------------------------------------------------------------------
   5. Os bancos
   --------------------------------------------------------------------------- */
.am-bancos__topo { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.am-bancos__n {
  font-family: var(--am-titulo); font-weight: 700; font-size: clamp(110px, 15vw, 190px);
  line-height: .82; letter-spacing: -.05em; flex: 0 0 auto;
}
.am-bancos__txt { flex: 1 1 320px; }
.am-bancos__txt h2 { font-size: clamp(26px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
.am-bancos__txt p { font-size: 17px; color: var(--am-txt-2); margin-top: 10px; }

.am-carrossel {
  position: relative; margin-top: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.am-carrossel__trilho { display: flex; gap: 14px; width: max-content; animation: amCarrossel 28s linear infinite; }
.am-carrossel:hover .am-carrossel__trilho { animation-play-state: paused; }
/* FLEX, não grid — a mesma armadilha da caixa do infográfico: num item de
   grelha o `max-height: 100%` do logótipo resolve contra a área da grelha, que
   se dimensiona para caber o conteúdo. Com grid, logótipos de 138px ficavam
   dentro de um cartão de 92px e transbordavam-no. */
.am-banco {
  width: 168px; height: 92px; flex: 0 0 auto; background: var(--am-branco);
  border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; overflow: hidden;
}
/* O cartão é a medida que o desenho pede; o logótipo é que tem de o encher.
   Com um tecto de 52px de altura os logótipos ficavam a nadar numa caixa de
   92px — cartão grande, marca pequena. 100% da altura útil, e a proporção
   manda: os largos limitam-se pela largura, os altos pela altura. */
/* `width/height: 100%` com `object-fit: contain`, e não `width: auto` com
   tectos. Com `auto` o logótipo nunca passa do seu tamanho natural: os
   ficheiros pequenos — o do BiG tem 89px de largura — ficavam a nadar num
   cartão de 168px por mais tecto que se lhes desse. Assim escalam para encher
   o cartão e o `contain` guarda a proporção. */
.am-banco img { width: 100%; height: 100%; object-fit: contain; }
.am-banco span { font-family: var(--am-titulo); font-weight: 700; font-size: 14px; text-align: center; color: var(--am-grafite); }

@media (max-width: 760px) { .am-bancos__n { font-size: clamp(70px, 24vw, 110px); } }

/* ---------------------------------------------------------------------------
   6. Agente Ativ.IA
   --------------------------------------------------------------------------- */
.am-ativia {
  background: var(--am-grafite); border-radius: 8px; padding: clamp(26px, 4vw, 56px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: center;
}
.am-ativia h2 { font-size: clamp(26px, 3.8vw, 44px); line-height: 1.07; letter-spacing: -.03em; color: var(--am-osso); margin-bottom: 18px; }
.am-ativia p { font-size: 16.5px; line-height: 1.65; color: var(--am-txt-claro); }
.am-ativia p + p { margin-top: 14px; color: #A9AEAB; }
.am-ativia__fig { justify-self: center; }
/* `height: auto` outra vez, e pela mesma razão do infográfico: a imagem traz
   width="480" height="1055" no HTML, que são pistas de apresentação. Com o CSS
   a impor `width: 100%` e a altura a vir do atributo, o painel do agente saía
   esticado ao alto. */
.am-ativia__fig img {
  max-width: 300px; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--am-grafite-3);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); display: block;
}
@media (max-width: 1040px) { .am-ativia { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   7. Segurança — grelha em desktop, carrossel em ≤1040px
   --------------------------------------------------------------------------- */
.am-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.am-cartao {
  background: var(--am-branco); border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--am-sombra-cartao);
}
.am-cartao h3 { font-size: 21px; margin-bottom: 20px; }
.am-cartao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.am-cartao li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--am-txt-2); }
.am-cartao li svg { width: 22px; height: 22px; flex: 0 0 auto; opacity: .85; stroke: var(--am-grafite); stroke-width: 2; fill: none; margin-top: 1px; }

/* ---------------------------------------------------------------------------
   8. Planos
   --------------------------------------------------------------------------- */
.am-plano {
  background: var(--am-branco); border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; position: relative;
  box-shadow: var(--am-sombra-cartao);
}
.am-plano--destaque { border: 2px solid var(--am-grafite); }
.am-plano__fita {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--am-lima); color: var(--am-tinta-oliva);
  font-family: var(--am-titulo); font-weight: 700; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--am-r-etiqueta); white-space: nowrap;
}
.am-plano h3 { font-size: 22px; margin-bottom: 8px; }
.am-plano__desc { font-size: 14.5px; line-height: 1.5; color: var(--am-txt-2); min-height: 46px; }
.am-plano .am-btn { margin-top: auto; width: 100%; }

/* Botões de plano dentro do modal da lista de espera. */
.am-planos-modal { display: flex; gap: 8px; margin: 14px 0; }
.am-planos-modal button {
  flex: 1; min-height: 44px; cursor: pointer; border-radius: var(--am-r-botao);
  background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  font-family: var(--am-titulo); font-weight: 700; font-size: 14px; color: var(--am-grafite);
  transition: border-color 120ms ease, background 120ms ease;
}
.am-planos-modal button[aria-pressed="true"] { border: 2px solid var(--am-lima); background: #FBFFE8; }

/* ---------------------------------------------------------------------------
   9. Perguntas frequentes
   --------------------------------------------------------------------------- */
.am-faq { max-width: 900px; margin: 0 auto; padding-inline: var(--am-gut); }
.am-faq__lista { margin-top: 36px; }
.am-faq details { border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao); background: var(--am-branco); margin-bottom: 10px; }
.am-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; font-family: var(--am-titulo); font-weight: 700; font-size: 16.5px; min-height: 44px;
}
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq .am-mais {
  font-size: 22px; line-height: 1; color: var(--am-txt-3); flex: 0 0 auto;
  transition: transform 200ms ease, color 200ms ease;
}
.am-faq details[open] > summary .am-mais { transform: rotate(45deg); color: var(--am-grafite); }
.am-faq__r { padding: 0 20px 20px; font-size: 16px; line-height: 1.65; color: var(--am-txt-2); }

/* ---------------------------------------------------------------------------
   10. Blog — carrossel com scroll-snap
   --------------------------------------------------------------------------- */
.am-blog__trilho {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; margin-top: 36px; padding-bottom: 6px;
}
.am-blog__trilho::-webkit-scrollbar { display: none; }
.am-artigo {
  flex: 0 0 min(340px, 82%); scroll-snap-align: start; background: var(--am-branco);
  border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao); overflow: hidden;
  text-decoration: none; color: var(--am-grafite); display: flex; flex-direction: column;
  transition: border-color 120ms ease;
}
.am-artigo:hover { border-color: var(--am-grafite); color: var(--am-grafite); }
.am-artigo__capa { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; background: var(--am-sup); }
.am-artigo__corpo { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.am-artigo__cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--am-tinta-oliva); font-weight: 600; }
.am-artigo__t { font-family: var(--am-titulo); font-weight: 700; font-size: 18px; line-height: 1.3; }
.am-artigo__r { font-size: 14.5px; line-height: 1.55; color: var(--am-txt-2); }
.am-artigo__meta { font-size: 13px; color: var(--am-txt-3); margin-top: auto; padding-top: 10px; }

/* ---------------------------------------------------------------------------
   11. Contacto
   --------------------------------------------------------------------------- */
.am-contacto { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.am-contacto__form {
  background: var(--am-branco); border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  padding: clamp(20px, 2.6vw, 30px); box-shadow: var(--am-sombra-cartao);
}
.am-contacto__form .am-btn { width: 100%; }
.am-turnstile { margin: 6px 0 14px; min-height: 65px; }
@media (max-width: 1040px) { .am-contacto { grid-template-columns: 1fr; } }

/* Blocos de duas colunas genéricos (usados pela secção 6 e pela 11). */
@media (max-width: 1040px) {
  .am-duplo { grid-template-columns: 1fr !important; }
}


/* ===========================================================================
   PARTE 3 — o que o main.js CRIA em runtime
   ---------------------------------------------------------------------------
   Nada nesta secção aparece no HTML das páginas. São classes que o
   assets/js/main.js injecta: os cartões de preço preenchidos a partir de
   /api/public/plans, a barra de campanha, o modal da lista de espera, os
   avisos dos formulários e o banner de cookies.

   É por isso que estas regras são fáceis de perder numa mudança de desenho —
   uma folha nova que não as traga deixa metade do site sem estilo e ninguém
   dá por isso até alguém carregar no botão. A lista veio de ler o main.js de
   ponta a ponta; se lá acrescentares uma classe, acrescenta-a aqui também.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   R1. Ciclo de faturação e grelha de planos
   O contentor nasce `hidden` no HTML e só é revelado quando há dados reais —
   nunca deve ser um controlo vivo por cima de preços de marcador.
   --------------------------------------------------------------------------- */
.pricing-cycle { display: flex; justify-content: center; margin: 0 0 32px; }
.cycle-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--am-sup); border: 1px solid var(--am-linha); border-radius: var(--am-r-botao);
}
.cycle-option {
  min-height: 40px; padding: 0 20px; cursor: pointer; border: 0; background: transparent;
  font-family: var(--am-titulo); font-weight: 700; font-size: 14.5px; color: var(--am-txt-2);
  border-radius: 3px; transition: background 120ms ease, color 120ms ease;
}
.cycle-option.is-active { background: var(--am-grafite); color: var(--am-osso); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
/* O JS escreve a contagem de cartões visíveis: um plano escondido fecha a
   coluna dele em vez de deixar um buraco. */
.pricing-grid[data-visible-plans="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pricing-grid[data-visible-plans="2"] { grid-template-columns: repeat(2, 1fr); }
.pricing-grid[data-visible-plans="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .pricing-grid, .pricing-grid[data-visible-plans] { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   R2. Cartão de preço
   --------------------------------------------------------------------------- */
.price-amount {
  font-family: var(--am-titulo); font-weight: 700; font-size: 40px;
  letter-spacing: -.03em; line-height: 1.1; margin: 14px 0 2px;
}
.price-amount small {
  font-family: var(--am-corpo); font-weight: 400; font-size: 14px;
  color: var(--am-txt-3); letter-spacing: 0;
}
/* Reserva a linha do preço riscado mesmo quando não há desconto (o JS escreve
   um espaço duro), para as cifras grandes alinharem de cartão para cartão. */
.price-was {
  display: block; font-family: var(--am-corpo); font-weight: 400;
  font-size: 13.5px; color: var(--am-txt-3); letter-spacing: 0; min-height: 1.4em;
}
.price-was s { text-decoration-thickness: 1px; }

.price-annual { display: grid; gap: 6px; margin-bottom: 4px; min-height: 1.2em; }
.price-cycle-total { font-size: 13.5px; color: var(--am-txt-3); }
.price-discount-badge {
  justify-self: start; font-family: var(--am-titulo); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; background: var(--am-lima); color: var(--am-tinta-oliva);
  padding: 4px 9px; border-radius: var(--am-r-etiqueta);
}
.price-trial { font-size: 13.5px; color: var(--am-txt-3); min-height: 1px; }

.price-features { list-style: none; margin: 18px 0 22px; padding: 18px 0 0; display: grid; gap: 11px; border-top: 1px solid var(--am-linha); }
.price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--am-txt-2); }
.price-features li svg { flex: 0 0 auto; margin-top: 2px; }
.price-features li.is-off { color: var(--am-txt-3); }
/* O módulo de layout de preços esconde as últimas linhas até cada cartão caber
   em 90vh. Sem esta regra o limite não faz nada e ninguém repara. */
.feat-hidden { display: none !important; }

/* O texto deste botão não é um rótulo, é uma frase — e quando há campanha
   chega a «Garanta já 52% de desconto · 15 dias grátis». Com o `nowrap` que os
   botões têm por omissão, a largura mínima do botão passava a 379px e o cartão
   deixava de poder encolher: num telemóvel de 390px a secção dos planos
   empurrava a página inteira para 439px de largura.

   Isto NÃO aparecia sem a API ligada. Sem dados, o cartão mostra o texto curto
   que está no HTML e cabe à vontade; só com os planos reais é que o botão
   cresce. Foi o slot de DEV, com o BFF a responder, que o revelou. */
.price-cta { margin-top: auto; width: 100%; white-space: normal; line-height: 1.3; padding-block: 10px; }
/* E o cartão tem de poder encolher abaixo do seu conteúdo. Um item de grelha
   tem `min-width: auto`, que é a largura mínima do conteúdo — sem isto a regra
   acima não chega, porque a grelha continua a reservar o espaço do botão. */
.pricing-grid > * { min-width: 0; }
/* O destino de todas as ligacoes de planos da landing. Precisa de mais folga
   do que a regra geral dos `[id]`: a fita «MAIS ESCOLHIDO» sai para fora do
   cartao, por cima da borda de cima, e com os 20px do costume ficava meia
   escondida debaixo do cabecalho. */
#plano-recomendado { scroll-margin-top: calc(var(--am-cab) + 48px); }

/* Fita «Mais escolhido» — criada pelo JS quando o plano traz badge. */
.price-ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--am-lima); color: var(--am-tinta-oliva);
  font-family: var(--am-titulo); font-weight: 700; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--am-r-etiqueta);
}
.price-ribbon svg { fill: currentColor; }

.price-campaign-note {
  background: #FBFFE8; border: 1px solid var(--am-lima); border-radius: var(--am-r-botao);
  padding: 9px 11px; font-size: 13.5px; line-height: 1.45; color: var(--am-tinta-oliva); margin-bottom: 10px;
}

/* Detalhe do desconto. O `.faq-icon` e a regra [open] abaixo são copiados do
   acordeão das perguntas de propósito: o JS gera exactamente o mesmo markup, e
   é isto que faz o mais virar cruz. */
.price-discount-details { margin: 6px 0 2px; }
.price-discount-details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--am-txt-2); min-height: 34px;
}
.price-discount-details > summary::-webkit-details-marker { display: none; }
.faq-icon { display: inline-flex; color: var(--am-txt-3); transition: transform 200ms ease, color 200ms ease; }
details[open] > summary .faq-icon { transform: rotate(45deg); color: var(--am-grafite); }
.price-discount-list { margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.price-discount-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--am-txt-2); }
.price-discount-row dt, .price-discount-row dd { margin: 0; }
.price-discount-row.is-total { font-weight: 700; color: var(--am-grafite); border-top: 1px solid var(--am-linha); padding-top: 6px; }

/* Estado de falha da grelha: o JS substitui a grelha inteira por isto quando
   não conseguiu carregar os planos e não havia cache. É deliberado que não
   fiquem preços de marcador no ecrã a fazer-se passar por actuais. */
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  background: var(--am-sup); border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  font-size: 15.5px; color: var(--am-txt-2);
}

/* ---------------------------------------------------------------------------
   R3. Barra de campanha
   Inserida imediatamente antes de `nav.nav-sticky` e fixa no topo. O JS publica
   --promo-bar-h (o que empurra o cabeçalho) e --promo-bar-space (o que empurra
   o conteúdo); os valores por omissão aqui garantem que a página é correcta
   quando não há campanha nenhuma.
   --------------------------------------------------------------------------- */
:root { --promo-bar-h: 0px; --promo-bar-space: 0px; }
.am-cab { top: var(--promo-bar-h); }
body.has-promo-bar { padding-top: var(--promo-bar-space); }

.promo-banner-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--am-grafite); color: var(--am-osso);
  transition: transform 300ms cubic-bezier(.2,.8,.2,1);
}
.promo-banner-bar.is-offstage { display: none; }
.promo-banner-bar.is-hidden { transform: translateY(-100%); }
/* A BARRA É A MOLDURA; O CONTEÚDO DA CAMPANHA ENCHE-A DE LADO A LADO.

   O HTML da campanha traz o seu próprio fundo em gradiente e já centra o texto
   a 1320px. Dar-lhe aqui uma `max-width` e um `padding` punha esse gradiente
   numa caixa mais estreita e mais baixa do que a barra, e sobrava o grafite da
   barra à volta — duas manchas escuras nos lados e uma faixa por cima e por
   baixo. A moldura passa a ser só a barra; o gradiente enche-a.

   O botão de fechar sai do fluxo e sobrepõe-se à direita, senão roubava
   largura ao gradiente e a mancha voltava. */
.promo-banner-inner {
  width: 100%; margin: 0; padding: 0;
  display: block; position: relative;
}
/* `min-width: 0` — e é isto que resolve o alargamento da página inteira.

   Um item flex tem `min-width: auto`, que é a largura MÍNIMA do seu conteúdo:
   recusa-se a encolher abaixo dela. O HTML da campanha traz os seus próprios
   `width: 100%` e uma chamada à acção que não quebra, e o mínimo dele passava
   dos 430px. Num ecrã de 390 a barra crescia para 511 e levava o documento
   inteiro atrás — era isso que se via a abanar para o lado no telemóvel.

   Com `min-width: 0` o item pode encolher e o `flex-wrap` que o próprio
   conteúdo já traz faz o resto. */
.promo-banner-content {
  width: 100%; min-width: 0;
  font-size: 14.5px; line-height: 1.4; text-align: center;
}
/* O ESPAÇO PARA O BOTÃO DE FECHAR NÃO PODE SAIR DAQUI.

   Estava um `padding-right: 52px` nesta caixa. O gradiente da campanha é filho
   dela com `width: 100%`, por isso encolhia 52px e voltava a aparecer uma
   mancha de grafite encostada à direita — o mesmo defeito, mais estreito.

   O espaço tem de ser reservado na linha da campanha, que é a que tem o texto,
   e só onde ela chega mesmo à beira da barra: a linha centra-se a 1320px, por
   isso acima de ~1424px o botão já cai na margem vazia e não tapa nada.
   Reserva-se dos DOIS lados para o texto continuar ao centro.

   A linha traz o `padding` em linha no HTML que a API devolve — daí o
   `!important`, que é a única forma de lá chegar sem tocar nesse HTML. */
@media (max-width: 1424px) {
  .promo-banner-content > * > * { padding-inline: 52px !important; }
}
@media (max-width: 640px) {
  .promo-banner-content > * > * { padding-inline: 38px !important; }
  .promo-banner-close { width: 28px; height: 28px; right: 6px; }
}
.promo-banner-content > * { max-width: 100%; }
.promo-banner-content a { color: var(--am-lima); font-weight: 600; }
.promo-banner-content a:hover { color: var(--am-lima); }
.promo-banner-content strong { color: var(--am-lima); }
.promo-banner-close {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(31,35,38,.55); border: 1px solid var(--am-grafite-3); color: var(--am-txt-claro);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.promo-banner-close:hover { border-color: var(--am-lima); color: var(--am-lima); }
.promo-banner-close svg { stroke: currentColor; stroke-width: 2; fill: none; }
@media (max-width: 640px) { .promo-banner-content { font-size: 13.5px; text-align: left; } }

/* ---------------------------------------------------------------------------
   R4. Avisos dos formulários (window.showAlert)
   Inserido como irmão IMEDIATAMENTE a seguir ao formulário — é assim que o JS
   o volta a encontrar. Não meter nada entre os dois.
   --------------------------------------------------------------------------- */
.am-alert {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
  padding: 13px 14px; border-radius: var(--am-r-botao); font-size: 14.5px; line-height: 1.5;
  border: 1px solid var(--am-linha); background: var(--am-branco); color: var(--am-txt-2);
}
.am-alert__icon { flex: 0 0 auto; margin-top: 1px; }
.am-alert__body { flex: 1; }
.am-alert__title { font-weight: 500; margin: 0; }
.am-alert__close {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 0; color: inherit; display: grid; place-items: center; opacity: .65;
}
.am-alert__close:hover { opacity: 1; }
.am-alert--success { background: #E8F7F0; border-color: #A8DCC8; color: #114C37; }
.am-alert--error   { background: #FDECE4; border-color: #F0C3AA; color: #7A3310; }
.am-alert--warning { background: #FDF6E3; border-color: #EBD9A6; color: #6B4E0F; }
.am-alert--info    { background: var(--am-sup); border-color: var(--am-linha); color: var(--am-txt-2); }

/* ---------------------------------------------------------------------------
   R5. Banner de cookies
   O JS só liga e desliga a classe `show` — tudo o resto é desta folha, e é por
   isso que o banner TEM de estar escondido por omissão.
   --------------------------------------------------------------------------- */
.am-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--am-grafite); color: var(--am-txt-claro);
  transform: translateY(110%); transition: transform 300ms cubic-bezier(.2,.8,.2,1);
  border-top: 1px solid var(--am-grafite-3);
}
.am-cookies.show { transform: translateY(0); }
.am-cookies__int {
  max-width: var(--am-max); margin: 0 auto; padding: 16px var(--am-gut);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.am-cookies p { font-size: 14.5px; line-height: 1.5; flex: 1 1 320px; margin: 0; }
.am-cookies__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am-cookies__acoes a { color: var(--am-lima); font-size: 14px; }
.am-cookies__acoes a:hover { color: var(--am-lima); }
/* O botão «Apenas essenciais» fica sobre grafite: o contorno claro do desenho
   desapareceria. */
.am-cookies .am-btn--contorno { color: var(--am-osso); border-color: var(--am-grafite-3); }
.am-cookies .am-btn--contorno:hover { background: var(--am-grafite-2); color: var(--am-osso); border-color: var(--am-lima); }

/* ---------------------------------------------------------------------------
   R6. Modal da lista de espera
   Construído inteiro pelo main.js quando o URL traz ?coming-soon=1. É o único
   ponto de conversão do site, e traz consigo o Turnstile invisível, a
   validação e os limites por IP e por email.
   --------------------------------------------------------------------------- */
.waitlist-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 28px); background: rgba(31,35,38,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 240ms ease;
}
.waitlist-overlay.is-open { opacity: 1; }
.waitlist-dialog {
  position: relative; background: var(--am-branco); border-radius: 10px;
  width: 100%; max-width: 470px; padding: clamp(22px, 3vw, 32px);
  max-height: calc(100vh - 32px); overflow: auto;
  box-shadow: 0 30px 70px -30px rgba(31,35,38,.7);
}
.waitlist-close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; background: var(--am-branco); border: 1px solid var(--am-linha);
  display: grid; place-items: center; color: var(--am-grafite); font-size: 20px; line-height: 1;
}
.waitlist-title { font-family: var(--am-titulo); font-weight: 700; font-size: 25px; line-height: 1.15; margin: 0 0 10px; padding-right: 40px; }
.waitlist-subtitle { font-size: 15px; line-height: 1.6; color: var(--am-txt-2); margin: 0 0 18px; }
.waitlist-field { display: block; margin-bottom: 14px; }
.waitlist-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--am-txt-2); margin-bottom: 6px; }
.waitlist-input {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--am-grafite);
  background: var(--am-branco); border: 1px solid var(--am-linha-media);
  border-radius: var(--am-r-botao); padding: 13px 14px; min-height: 48px;
}
.waitlist-input:focus { outline: none; border-color: var(--am-tinta-oliva); box-shadow: 0 0 0 3px rgba(200,240,0,.45); }
.waitlist-plans { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.waitlist-plan {
  position: relative;
  flex: 1 1 auto; min-width: 88px; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 10px; cursor: pointer; border-radius: var(--am-r-botao);
  background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  font-family: var(--am-titulo); font-weight: 700; font-size: 14px; color: var(--am-grafite);
  transition: border-color 120ms ease, background 120ms ease;
}
/* O input de rádio vive dentro do label; escondê-lo com display:none tirava-o
   da ordem de tabulação, por isso fica invisível mas focável. */
.waitlist-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.waitlist-plan:has(input:checked) { border: 2px solid var(--am-lima); background: #FBFFE8; }
.waitlist-plan:has(input:focus-visible) { outline: 3px solid var(--am-tinta-oliva); outline-offset: 2px; }
.waitlist-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--am-txt-2); margin: 4px 0 16px; }
.waitlist-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--am-tinta-oliva); }
.waitlist-error { font-size: 13.5px; color: #7A3310; margin: 0 0 12px; min-height: 1px; }
.waitlist-turnstile { width: 0; height: 0; overflow: hidden; }
.waitlist-submit {
  width: 100%; min-height: 52px; cursor: pointer; border-radius: var(--am-r-botao);
  background: var(--am-lima); border: 1px solid var(--am-lima); color: var(--am-tinta-oliva);
  font-family: var(--am-titulo); font-weight: 700; font-size: 16px;
}
.waitlist-submit:disabled { opacity: .6; cursor: default; }
.waitlist-status { font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.waitlist-status.is-success { color: #114C37; }
.waitlist-status.is-error { color: #7A3310; }


/* ===========================================================================
   PARTE 4 — casca comum das páginas internas (T1 a T7)
   ---------------------------------------------------------------------------
   Tudo o que está fora da landing cabe em sete moldes, e todos partilham a
   mesma casca: o cabeçalho e o rodapé da landing, o botão «voltar ao topo», e
   um cabeçalho de página com etiqueta, h1 e entrada.

   Largura máxima de 1280px em todos, EXCEPTO o artigo do blog, que usa 800px
   — é o único template mais estreito que o resto do site, porque a medida de
   leitura manda.
   =========================================================================== */

.am-pagina { padding-top: clamp(32px, 5vw, 56px); }

.am-pagina__cabeca {
  max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut);
  padding-bottom: clamp(24px, 4vw, 44px);
}
.am-pagina__cabeca h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -.03em;
  margin-bottom: 18px;
}
.am-pagina__entrada {
  font-size: clamp(16.5px, 1.7vw, 20px); line-height: 1.6; color: var(--am-txt-2);
  max-width: 56ch;
}

/* Regresso («← Quem escreve», «← Blog»), acima do cabeçalho. */
.am-voltar {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
  color: var(--am-txt-2); text-decoration: none; margin-bottom: 18px; min-height: 44px;
}
.am-voltar:hover { color: var(--am-grafite); }
.am-voltar svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Navegação estrutural (Início › Blog › Categoria). */
.am-migalhas { font-size: 13.5px; color: var(--am-txt-3); margin-bottom: 18px; }
.am-migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.am-migalhas a { color: var(--am-txt-2); text-decoration: none; }
.am-migalhas a:hover { color: var(--am-grafite); text-decoration: underline; }

/* Pílula de data («Actualizado a …»), com ícone Lucide calendar-check. */
.am-pilula {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
  padding: 0 12px; border: 1px solid var(--am-linha-media2); border-radius: 999px;
  font-size: 13px; color: var(--am-txt-2); background: var(--am-branco);
}
.am-pilula svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
/* O reset poe `p { margin: 0 }` e a pilula nao declara margem, por isso
   encostava ao paragrafo de entrada do cabecalho da pagina. */
.am-pagina__cabeca .am-pilula { margin-top: 20px; }

/* Etiqueta de papel: cinzenta por omissão, lima para o papel destacado. */
.am-papel {
  display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; padding: 4px 10px; border-radius: var(--am-r-etiqueta);
  background: var(--am-sup); color: var(--am-txt-2);
}
.am-papel--lima { background: var(--am-lima); color: var(--am-tinta-oliva); }

/* Etiquetas contornadas (tags de artigo). */
.am-tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border: 1px solid var(--am-linha-media2); border-radius: var(--am-r-etiqueta);
  font-size: 12.5px; color: var(--am-txt-2); text-decoration: none;
}
.am-tag:hover { border-color: var(--am-grafite); color: var(--am-grafite); }

/* ---------------------------------------------------------------------------
   T1 · Documento legal
   Grelha de índice lateral + corpo. Abaixo de 900px o índice passa para cima
   do texto, dentro de um <details> fechado.
   --------------------------------------------------------------------------- */
.am-legal {
  max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut);
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.am-legal__indice {
  position: sticky; top: calc(var(--am-cab) + 20px);
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 16px;
}
.am-legal__indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: sec; }
.am-legal__indice a {
  display: block; padding: 8px 12px; font-size: 14px; line-height: 1.4;
  color: var(--am-txt-2); text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.am-legal__indice a:hover { color: var(--am-grafite); }
.am-legal__indice a[aria-current="true"] {
  border-left-color: var(--am-lima); background: #FBFFE8;
  font-weight: 600; color: var(--am-grafite);
}

.am-legal__corpo { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: var(--am-txt-2); }
.am-legal__corpo h2 {
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: var(--am-grafite);
  margin: 44px 0 14px; scroll-margin-top: calc(var(--am-cab) + 20px);
}
.am-legal__corpo h2:first-child { margin-top: 0; }
.am-legal__corpo h3 { font-size: 19px; color: var(--am-grafite); margin: 26px 0 10px; }
.am-legal__corpo p { margin-bottom: 16px; }
.am-legal__corpo ul, .am-legal__corpo ol { margin: 0 0 16px; padding-left: 22px; }
.am-legal__corpo li { margin-bottom: 8px; }
.am-legal__corpo a { color: var(--am-tinta-oliva); }

/* Caixa de destaque e variante de aviso. */
.am-destaque {
  display: flex; gap: 12px; background: var(--am-branco);
  border: 1px solid var(--am-linha); border-left: 3px solid var(--am-lima);
  border-radius: 0 var(--am-r-cartao) var(--am-r-cartao) 0;
  padding: 16px 18px; margin: 20px 0; font-size: 15.5px; line-height: 1.6;
}
.am-destaque svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; stroke: var(--am-tinta-oliva); stroke-width: 2; fill: none; }
.am-destaque--aviso { border-left-color: hsl(22 90% 48%); }
.am-destaque--aviso svg { stroke: hsl(22 90% 48%); }

/* Tabela: grelha CSS com cabeçalho e linhas separadas, com rolagem própria em
   ecrãs estreitos. */
.am-tabela {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); overflow: auto; margin: 20px 0;
}
.am-tabela table { width: 100%; border-collapse: collapse; font-size: 15px; }
.am-tabela th, .am-tabela td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--am-linha); }
.am-tabela th { background: var(--am-sup); color: var(--am-grafite); font-weight: 600; white-space: nowrap; }
.am-tabela tr:last-child td { border-bottom: 0; }

/* Bloco de identificação da empresa. */
.am-identificacao {
  background: var(--am-sup); border-radius: var(--am-r-cartao);
  padding: 20px 22px; margin: 24px 0; font-size: 15px; line-height: 1.7;
}

/* Lista de passos numerados (eliminar conta), igual ao infográfico da landing. */
.am-passos-num { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 18px; counter-reset: passo; }
.am-passos-num li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.am-passos-num li::before {
  counter-increment: passo; content: counter(passo);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--am-lima); color: var(--am-tinta-oliva);
  font-family: var(--am-titulo); font-weight: 700; font-size: 14px;
  border-radius: var(--am-r-etiqueta);
}

/* Rodapé do documento. */
.am-doc-fim {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--am-linha);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 14px; color: var(--am-txt-3);
}
.am-doc-fim nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* Três arestas do molde T1 que só aparecem ao montar as páginas a sério.

   1. Os passos numerados dentro do corpo perdiam para a regra de listas do
      documento (`.am-legal__corpo ul, ol` é 0,1,1 contra os 0,1,0 da classe) e
      ficavam indentados 22px, desalinhados do texto. Afecta as páginas de
      eliminar conta, as únicas com a variante de passos numerados.
   2. O triângulo do <details> do índice só estava escondido abaixo dos 900px;
      acima disso reaparecia no cartão.
   3. A variante «sem índice» pede uma coluna de 72ch CENTRADA. O corpo tem a
      medida mas não centra, e sozinho num contentor de 1280px encostava à
      esquerda. */
.am-legal__corpo .am-passos-num { margin: 20px 0; padding-left: 0; }
.am-legal__indice > details > summary { list-style: none; }
.am-legal__indice > details > summary::-webkit-details-marker { display: none; }
.am-legal--solo { display: block; }
.am-legal--solo > .am-legal__corpo { margin-inline: auto; }

@media (max-width: 900px) {
  .am-legal { grid-template-columns: 1fr; }
  .am-legal__indice { position: static; padding: 0; border: 0; background: none; }
  .am-legal__indice > details {
    background: var(--am-branco); border: 1px solid var(--am-linha);
    border-radius: var(--am-r-cartao); padding: 12px 16px;
  }
  .am-legal__indice summary {
    list-style: none; cursor: pointer; font-family: var(--am-titulo); font-weight: 700;
    font-size: 15px; min-height: 44px; display: flex; align-items: center;
  }
  .am-legal__indice summary::-webkit-details-marker { display: none; }
}

/* ---------------------------------------------------------------------------
   T2 · Institucional
   Quatro blocos que se compõem por qualquer ordem.
   --------------------------------------------------------------------------- */
.am-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--am-linha); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); overflow: hidden; margin: 32px 0;
}
.am-numeros > div { background: var(--am-branco); padding: 24px 20px; }
.am-numeros strong {
  display: block; font-family: var(--am-titulo); font-weight: 700; font-size: 38px;
  letter-spacing: -.03em; line-height: 1.1; margin-bottom: 6px;
}
.am-numeros span { font-size: 14.5px; color: var(--am-txt-2); line-height: 1.5; }
@media (max-width: 1040px) { .am-numeros { grid-template-columns: repeat(2, 1fr); } }

/* Bloco alternado: texto e média lado a lado; a repetição seguinte inverte. */
.am-alternado {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 56px);
  align-items: center; margin: clamp(40px, 6vw, 72px) 0;
}
.am-alternado:nth-of-type(even) .am-alternado__media { order: -1; }
.am-alternado h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 14px; }
.am-alternado p { font-size: 16.5px; line-height: 1.65; color: var(--am-txt-2); }
.am-alternado p + p { margin-top: 12px; }
.am-alternado__media img { width: 100%; border-radius: var(--am-r-cartao); display: block; }
@media (max-width: 1040px) {
  .am-alternado { grid-template-columns: 1fr; }
  .am-alternado:nth-of-type(even) .am-alternado__media { order: 0; }
}

/* Bloco escuro de identificação. O rodapé de todas as páginas referencia a
   âncora #company-title, por isso ela NÃO pode mudar de nome. */
.am-empresa {
  background: var(--am-grafite); color: var(--am-txt-claro);
  border-radius: 8px; padding: clamp(24px, 4vw, 44px); margin: clamp(40px, 6vw, 72px) 0;
}
.am-empresa h2 { color: var(--am-osso); font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 14px; }
.am-empresa p { font-size: 15.5px; line-height: 1.7; }
.am-empresa a { color: var(--am-lima); }
.am-empresa a:hover { color: var(--am-lima); }

/* Bloco de fecho — repete-se no fim de todas as páginas internas. */
.am-fecho {
  max-width: var(--am-max); margin: clamp(48px, 7vw, 88px) auto 0;
  padding: clamp(32px, 5vw, 48px) var(--am-gut) 0;
  border-top: 1px solid var(--am-linha); text-align: center;
}
.am-fecho h2 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 12px; }
.am-fecho p { font-size: 16.5px; color: var(--am-txt-2); max-width: 48ch; margin: 0 auto 24px; }
.am-fecho__botoes { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   T3 · Listagem de pessoas · T4 · Perfil de autor
   --------------------------------------------------------------------------- */
.am-pessoas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) { .am-pessoas { grid-template-columns: 1fr; } }

.am-pessoa {
  display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start;
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 22px; text-decoration: none; color: inherit;
  transition: border-color 120ms ease;
}
.am-pessoa:hover { border-color: var(--am-grafite); color: inherit; }
.am-pessoa__foto {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--am-grafite); color: var(--am-lima);
  font-family: var(--am-titulo); font-weight: 700; font-size: 24px;
}
.am-pessoa h3 { font-size: 21px; margin-bottom: 8px; }
.am-pessoa__bio { font-size: 14.5px; line-height: 1.55; color: var(--am-txt-2); margin: 10px 0 12px; }
.am-pessoa__ir { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--am-tinta-oliva); font-weight: 600; }
.am-pessoa__ir svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

.am-autor__cabeca { display: grid; grid-template-columns: 120px 1fr; gap: 26px; align-items: start; }
.am-autor__foto {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--am-grafite); color: var(--am-lima);
  font-family: var(--am-titulo); font-weight: 700; font-size: 40px;
}
.am-autor__bio { font-size: 17px; line-height: 1.7; color: var(--am-txt-2); max-width: 60ch; margin: 14px 0 18px; }
.am-autor__ligacoes { display: flex; gap: 10px; flex-wrap: wrap; }
.am-autor__ligacoes a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--am-linha-media2); border-radius: var(--am-r-botao);
  font-size: 14px; color: var(--am-txt-2); text-decoration: none;
}
.am-autor__ligacoes a:hover { border-color: var(--am-grafite); color: var(--am-grafite); }
.am-autor__ligacoes svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
@media (max-width: 760px) { .am-autor__cabeca { grid-template-columns: 1fr; } }

/* Grelha de artigos assinados / relacionados. */
.am-grelha-artigos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1040px) { .am-grelha-artigos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .am-grelha-artigos { grid-template-columns: 1fr; } }

/* Esqueleto de carregamento, com a medida do cartão a sério para não saltar. */
.am-esqueleto {
  background: var(--am-branco); border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao); overflow: hidden;
}
.am-esqueleto__capa { aspect-ratio: 16/9; background: var(--am-sup); }
.am-esqueleto__linha { height: 12px; margin: 14px 18px; border-radius: 3px; background: var(--am-sup); }

/* ---------------------------------------------------------------------------
   T5 · Roadmap (só de leitura — submeter e votar acontecem dentro da app)
   --------------------------------------------------------------------------- */
.am-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .am-roadmap { grid-template-columns: 1fr; } }

.am-coluna__cabeca {
  display: flex; align-items: center; gap: 9px; padding-bottom: 10px;
  border-bottom: 2px solid var(--am-linha-media); margin-bottom: 16px;
}
.am-coluna__ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.am-coluna__rotulo {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--am-txt-2);
}
.am-coluna__conta { margin-left: auto; font-size: 13px; color: var(--am-txt-3); }
.am-coluna--dev  .am-coluna__cabeca { border-bottom-color: var(--am-lima); }
.am-coluna--dev  .am-coluna__ponto { background: var(--am-lima); }
.am-coluna--plan .am-coluna__cabeca { border-bottom-color: var(--am-cinza-linha); }
.am-coluna--plan .am-coluna__ponto { background: var(--am-cinza-linha); }
.am-coluna--feito .am-coluna__cabeca { border-bottom-color: var(--am-esmeralda); }
.am-coluna--feito .am-coluna__ponto { background: var(--am-esmeralda); }

.am-func-cartao {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 16px; margin-bottom: 12px;
}
.am-func-cartao h3 { font-size: 16px; line-height: 1.3; margin-bottom: 7px; }
.am-func-cartao p { font-size: 14px; line-height: 1.5; color: var(--am-txt-2); }
.am-func-cartao__data { font-size: 12.5px; color: var(--am-txt-3); margin-top: 8px; }

/* Bloco de remissão para a app. */
.am-remissao {
  background: var(--am-grafite); color: var(--am-txt-claro); border-radius: 8px;
  padding: clamp(24px, 4vw, 40px); margin: clamp(36px, 5vw, 56px) 0; text-align: center;
}
.am-remissao h2 { color: var(--am-osso); font-size: clamp(22px, 2.8vw, 32px); margin-bottom: 10px; }
.am-remissao p { font-size: 16px; color: var(--am-txt-claro); max-width: 46ch; margin: 0 auto 22px; }

/* Lista de ideias. A contagem de votos é um NÚMERO, não um controlo: votar
   acontece dentro da app. Não a transformar em botão. */
.am-ideia {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 16px; margin-bottom: 10px;
}
.am-ideia__votos {
  width: 56px; padding: 8px 0; text-align: center; background: var(--am-sup);
  border-radius: var(--am-r-botao); font-family: var(--am-titulo); font-weight: 700;
}
.am-ideia__votos span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--am-txt-3); }
.am-ideia p { font-size: 15px; line-height: 1.5; }
.am-ideia__meta { font-size: 12.5px; color: var(--am-txt-3); margin-top: 7px; }

/* Separador «Mais votadas / Recentes». */
.am-separador { display: flex; gap: 6px; margin-bottom: 16px; }
.am-separador a {
  min-height: 38px; padding: 0 16px; display: inline-flex; align-items: center;
  border: 1px solid var(--am-linha-media2); border-radius: var(--am-r-botao);
  font-size: 14px; font-weight: 600; color: var(--am-txt-2); text-decoration: none; background: var(--am-branco);
}
/* `.is-active` ao lado do `aria-current` porque quem move a marca e' o
   roadmapAndIdeas() do main.js, e esse alterna a classe, nunca o atributo.
   Sem as duas, clica-se em «Recentes», a lista reordena, e nada no ecra diz
   qual das abas esta escolhida. */
.am-separador a[aria-current="page"],
.am-separador a.is-active { background: var(--am-grafite); border-color: var(--am-grafite); color: var(--am-osso); }


/* ===========================================================================
   PARTE 5 — o blog (T6 índice, T7 artigo)
   ---------------------------------------------------------------------------
   Estas páginas NÃO são escritas à mão: o site-api gera-as em runtime a partir
   de api/Templates/, e os nomes de classe aqui NÃO são livres. São o contrato
   com quatro coisas ao mesmo tempo:

     · o C# que compõe o HTML (Content/ArticleRenderer.cs, BlogIndexRenderer.cs,
       Authors.cs, AdUnits.cs) e que escreve `blog-post-byline`,
       `blog-post-refs`, `blog-post-table`, `blog-card`, `ad-slot--in-article`…
     · o assets/js/main.js, que filtra o índice por `.blog-filter[data-filter]`
       contra `.blog-card[data-category]`, mede a leitura por `.blog-post-body`
       e gere o estado dos anúncios por `.ad-slot[data-ad-state]`;
     · os testes de AtivaMoney.SiteApi.Tests, que fazem Assert.Contains sobre
       estas strings literais;
     · o scripts/check-adsense-readiness.mjs, que exige `class="blog-post-byline"`
       em cada artigo gerado.

   Por isso o redesenho VESTE estas classes; não lhes troca o nome. Mudar um
   nome aqui parte o build do site-api, não esta folha.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   B1. T7 · Artigo — a medida é 800px, a única mais estreita do site
   --------------------------------------------------------------------------- */
.blog-post { padding-top: clamp(28px, 4vw, 48px); }
.blog-post-page {
  max-width: 800px; margin: 0 auto; padding-inline: var(--am-gut);
}
.blog-post-main { min-width: 0; }

.breadcrumb { font-size: 13.5px; color: var(--am-txt-3); margin-bottom: 18px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--am-txt-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--am-grafite); text-decoration: underline; }
.breadcrumb-sep { color: var(--am-linha-media); }

.blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13.5px; color: var(--am-txt-3); margin-bottom: 16px; }
.blog-post-category {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  background: var(--am-lima); color: var(--am-tinta-oliva);
  padding: 4px 10px; border-radius: var(--am-r-etiqueta);
}
.blog-post-meta-sep { color: var(--am-linha-media); }

.blog-post-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px;
}
/* A entrada é a mesma frase da meta-descrição e do Open Graph. */
.blog-post-subtitle {
  font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--am-txt-2);
  border-left: 3px solid var(--am-lima); padding: 2px 0 2px 18px; margin-bottom: 24px;
}

/* Autoria dupla — é o que a política editorial promete. O markup vem de
   Content/Authors.cs, não do template. */
.blog-post-byline {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--am-linha); border-bottom: 1px solid var(--am-linha);
  padding: 14px 0; margin: 0 0 20px; font-size: 14.5px; color: var(--am-txt-2);
}
.blog-post-byline-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.blog-post-byline-text { display: grid; gap: 2px; }
.blog-post-byline-author { font-weight: 600; color: var(--am-grafite); }
.blog-post-byline-author a, .blog-post-byline-reviewer a { color: inherit; }
.blog-post-byline-reviewer { font-size: 13.5px; color: var(--am-txt-3); }

.blog-post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; padding: 0; }
.blog-post-tags li {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border: 1px solid var(--am-linha-media2); border-radius: var(--am-r-etiqueta);
  font-size: 12.5px; color: var(--am-txt-2);
}

.blog-post-cover {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  border: 1px solid var(--am-linha); border-radius: var(--am-r-cartao);
  display: block; margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------------------------------------------------------------------------
   B2. Corpo do artigo
   O corpo vem da Markdig e os elementos chegam SEM classe nenhuma: é por
   descendência de `.blog-post-body` que se estilizam. A lista do que pode
   aparecer está em Content/BodyRenderer.cs.
   --------------------------------------------------------------------------- */
.blog-post-body { font-size: 17.5px; line-height: 1.75; color: var(--am-txt-2); }
.blog-post-body > p { margin-bottom: 20px; }
.blog-post-body h2 {
  font-size: clamp(23px, 2.5vw, 30px); line-height: 1.2; color: var(--am-grafite);
  margin: 40px 0 14px; scroll-margin-top: calc(var(--am-cab) + 20px);
}
.blog-post-body h3 { font-size: 20px; line-height: 1.3; color: var(--am-grafite); margin: 28px 0 10px; }
.blog-post-body h4 { font-size: 17.5px; color: var(--am-grafite); margin: 22px 0 8px; }
.blog-post-body a { color: var(--am-tinta-oliva); }
.blog-post-body strong { color: var(--am-grafite); font-weight: 600; }
.blog-post-body em { font-style: italic; }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 20px; padding-left: 24px; line-height: 1.8; }
.blog-post-body li { margin-bottom: 10px; }
.blog-post-body li > strong:first-child { color: var(--am-grafite); }
.blog-post-body hr { border: 0; border-top: 1px solid var(--am-linha); margin: 36px 0; }

/* Citação. Não tinha UMA regra na folha antiga — ficava com o estilo do
   browser, indentada e sem qualquer marca. */
.blog-post-body blockquote {
  margin: 28px 0; padding: 18px 22px; background: var(--am-branco);
  border-left: 3px solid var(--am-grafite); border-radius: 0 var(--am-r-cartao) var(--am-r-cartao) 0;
  font-size: 18px; font-style: italic; line-height: 1.6; color: var(--am-grafite);
}
.blog-post-body blockquote p { margin: 0; }
.blog-post-body blockquote p + p { margin-top: 10px; }
.blog-post-body blockquote cite { display: block; margin-top: 10px; font-size: 13.5px; font-style: normal; color: var(--am-txt-3); }

/* Código. */
.blog-post-body code {
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--am-sup); border: 1px solid var(--am-linha);
  border-radius: 3px; padding: 1px 5px;
}
.blog-post-body pre {
  background: var(--am-grafite); color: var(--am-osso); border-radius: var(--am-r-cartao);
  padding: 18px 20px; overflow-x: auto; margin: 24px 0; font-size: 14.5px; line-height: 1.6;
}
.blog-post-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Figura. O renderer já lhe põe estilos em linha; estas regras acompanham-nos
   sem lhes fugir, e tratam a legenda, que ele não estiliza. */
.blog-post-figure { margin: 2.4rem 0; }
.blog-post-figure img { border-radius: var(--am-r-cartao); border: 1px solid var(--am-linha); }
.blog-post-figure figcaption { font-size: 13.5px; color: #63696C; margin-top: 10px; line-height: 1.5; }

/* Tabela com rolagem própria — o <div> vem do ScrollableTableRenderer. */
.blog-post-table {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); overflow-x: auto; margin: 26px 0;
}
.blog-post-table:focus-visible { outline: 3px solid var(--am-tinta-oliva); outline-offset: 2px; }
.blog-post-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.blog-post-table th, .blog-post-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--am-linha); }
.blog-post-table th { background: var(--am-sup); color: var(--am-grafite); font-weight: 600; white-space: nowrap; }
.blog-post-table tr:last-child td { border-bottom: 0; }
.blog-post-table td[align="center"], .blog-post-table th[align="center"] { text-align: center; }
.blog-post-table td[align="right"], .blog-post-table th[align="right"] { text-align: right; }

/* Perguntas frequentes do artigo (pares h3/p sem classe). */
.blog-post-faq {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 4px 22px 22px; margin: 24px 0;
}
.blog-post-faq h3 { font-size: 17px; color: var(--am-grafite); margin: 22px 0 8px; }
.blog-post-faq p { margin: 0; font-size: 16px; }

/* Referências. As citações no corpo ([1]) ligam para cá, e o
   scroll-margin-top impede o cabeçalho fixo de tapar o destino. */
.blog-post-refs { margin: 20px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.6; }
.blog-post-refs li { margin-bottom: 10px; scroll-margin-top: calc(var(--am-cab) + 20px); }
.blog-post-refs li:target { background: #FBFFE8; border-radius: 3px; }
.blog-post-refs q { font-style: italic; color: var(--am-txt-3); }

.blog-post-translation-note {
  background: var(--am-sup); border-radius: var(--am-r-cartao);
  padding: 14px 18px; margin: 24px 0; font-size: 14.5px; color: var(--am-txt-2);
}

/* Artigos relacionados. */
.blog-post-related { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--am-linha); }
.blog-post-related h3 { font-size: 20px; margin-bottom: 18px; }
.blog-post-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blog-post-related a {
  display: grid; gap: 6px; background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color 120ms ease;
}
.blog-post-related a:hover { border-color: var(--am-grafite); color: inherit; }
.blog-post-related-cat { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--am-tinta-oliva); }
.blog-post-related-title { font-family: var(--am-titulo); font-weight: 700; font-size: 16.5px; line-height: 1.3; }

/* A barra lateral só existe para o anúncio; no v3 o artigo é uma coluna só, e
   ela passa para baixo do corpo. */
.blog-post-sidebar { margin-top: 32px; }

/* ---------------------------------------------------------------------------
   B3. Anúncios
   Só o blog os tem. A altura é reservada em todos para não haver salto de
   layout; o main.js escreve data-ad-state e é isso que dá a medida.
   --------------------------------------------------------------------------- */
.ad-slot { margin: 32px 0; display: grid; place-items: center; }
.ad-slot::before {
  content: 'Publicidade'; display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--am-txt-3); margin-bottom: 6px;
}
.ad-slot ins { display: block; width: 100%; }
.ad-slot--in-article, .ad-slot--post-article { min-height: 280px; }
.ad-slot--sidebar { min-height: 250px; }
.ad-slot--top-banner { min-height: 90px; }
/* Enquanto não se sabe se o anúncio enche, a caixa fica marcada em vez de
   ficar um buraco branco sem explicação. */
.ad-slot[data-ad-state="requested"] { background: var(--am-sup); border-radius: var(--am-r-cartao); }
.ad-slot[data-ad-state="filled"] { background: none; }

/* ---------------------------------------------------------------------------
   B4. T6 · Índice do blog
   Os filtros são LINKS reais para as páginas de categoria (é conteúdo
   indexável), mas o main.js também os usa para filtrar do lado do cliente.
   --------------------------------------------------------------------------- */
.page-hero { max-width: var(--am-max); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--am-gut) 0; }
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 18px; }
.page-hero .eyebrow {
  display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--am-txt-3); margin-bottom: 14px;
}
.page-hero .lead { font-size: clamp(16.5px, 1.7vw, 20px); line-height: 1.6; color: var(--am-txt-2); max-width: 56ch; }

.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.blog-filter {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  border-radius: var(--am-r-botao); font-family: var(--am-titulo); font-weight: 700;
  font-size: 13.5px; color: var(--am-txt-2); text-decoration: none; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.blog-filter:hover { border-color: var(--am-grafite); color: var(--am-grafite); }
.blog-filter.active, .blog-filter[aria-current="page"] {
  background: var(--am-grafite); border-color: var(--am-grafite); color: var(--am-osso);
}

.blog-listing { padding-top: clamp(28px, 4vw, 44px); }
.blog-grid {
  max-width: var(--am-max); margin: 0 auto; padding-inline: var(--am-gut);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 1040px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); overflow: hidden;
  display: flex; flex-direction: column; transition: border-color 120ms ease;
}
.blog-card:hover { border-color: var(--am-grafite); }
.blog-card-img-link { display: block; }
/* A capa é uma background-image em linha posta pelo BlogIndexRenderer, não uma
   <img> — daí o aspect-ratio ser declarado aqui, que é o que evita o salto. */
.blog-card-img { position: relative; aspect-ratio: 16/9; background-color: var(--am-sup); }
.blog-card-category {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  background: var(--am-lima); color: var(--am-tinta-oliva);
  padding: 4px 10px; border-radius: var(--am-r-etiqueta);
}
.blog-card-body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.blog-card-title { font-size: 18px; line-height: 1.3; margin: 0; }
.blog-card-title a { color: var(--am-grafite); text-decoration: none; }
.blog-card-title a:hover { text-decoration: underline; text-decoration-color: var(--am-lima); text-decoration-thickness: 2px; }
.blog-card-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--am-txt-2); }
.blog-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13px; color: var(--am-txt-3);
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--am-linha);
}
.blog-card-meta-sep { color: var(--am-linha-media); }

/* Bloco de apelo no fim do índice. */
.page-cta {
  max-width: var(--am-max); margin: clamp(48px, 7vw, 88px) auto 0;
  padding: clamp(32px, 5vw, 48px) var(--am-gut) 0;
  border-top: 1px solid var(--am-linha); text-align: center;
}
.page-cta h2 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 12px; }
.page-cta p { font-size: 16.5px; color: var(--am-txt-2); max-width: 48ch; margin: 0 auto 24px; }

/* A <ul class="nav-links"> do cabeçalho dos templates do blog. Sem esta regra
   herdava o `padding-left: 40px` e o `margin: 16px 0` da folha do browser,
   dentro de um cabeçalho em flex — e a alternativa era um `style=` repetido
   nos quatro templates.

   O selector de idioma vive lá dentro. O renderer só emite a própria língua,
   nunca oferece a outra. */
.nav-links { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.lang-switcher { list-style: none; }
.lang-link { font-size: 13.5px; color: var(--am-txt-3); text-decoration: none; }
.lang-link.lang-active { color: var(--am-grafite); font-weight: 600; }


/* ===========================================================================
   precos-erros.css — fragmento para am.css (WI #1528)
   ---------------------------------------------------------------------------
   NÃO é servido. É o que falta em assets/css/am.css para as páginas de erro
   (pt/404.html, pt/500.html, en/404.html, en/500.html) do desenho v3.

   As páginas de preços e de contacto NÃO precisam de nada daqui: saíram
   inteiramente com classes que já existem em am.css.

   POR QUE É QUE ISTO NÃO É OPCIONAL
   ---------------------------------
   O módulo «Error pages» de assets/js/main.js revela e esconde o formulário de
   reporte por CLASSES (`.open` no formulário, `.show` no sucesso, no erro e no
   aviso global, `.copied` no botão de copiar o Trace). Sem regras que ponham
   esses elementos em `display:none` no estado de repouso, a 500.html abre com
   o formulário de reporte, a mensagem de sucesso, a mensagem de erro e o aviso
   «Ticket recebido» TODOS visíveis ao mesmo tempo — e nada falha em lado
   nenhum. Não dá para resolver com o atributo `hidden` (o JS nunca o tira) nem
   com `style="display:none"` (o JS só acrescenta classes).

   Todos os selectores começam por `.am-pe-` por causa da regra da tarefa. Ao
   colar isto em am.css, sugiro entrar como «T8 · Páginas de erro», a seguir ao
   bloco do roadmap.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Casca centrada
   --------------------------------------------------------------------------- */
.am-pe-erro {
  max-width: 660px; margin: 0 auto; text-align: center;
  padding-top: clamp(8px, 2vw, 28px);
}
.am-pe-erro .am-pagina__entrada { margin-inline: auto; }
.am-pe-erro h1 { margin-bottom: 14px; }

.am-pe-tiva {
  display: block; width: clamp(140px, 26vw, 220px); height: auto;
  margin: 0 auto clamp(16px, 3vw, 28px);
}

/* ---------------------------------------------------------------------------
   Código do erro + identificador de rastreio
   --------------------------------------------------------------------------- */
.am-pe-meta {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 22px 0 28px;
}
.am-pe-codigo {
  font-family: var(--am-titulo); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; padding: 6px 12px; border-radius: var(--am-r-etiqueta);
  background: var(--am-grafite); color: var(--am-osso);
}
.am-pe-trace {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  border-radius: 999px; padding: 3px 5px 3px 14px;
  font-size: 13px; color: var(--am-txt-3);
}
.am-pe-trace .err-trace-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--am-grafite); letter-spacing: .02em;
}
.am-pe-copiar {
  position: relative; width: 34px; height: 34px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--am-txt-2);
  transition: background 120ms ease, color 120ms ease;
}
.am-pe-copiar:hover { background: var(--am-sup); color: var(--am-grafite); }
/* «Copiado» só aparece quando o main.js põe .copied (1,4 s). */
.am-pe-copiar .err-trace-toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--am-grafite); color: var(--am-osso);
  font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: var(--am-r-etiqueta);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 140ms ease;
}
.am-pe-copiar.copied .err-trace-toast { opacity: 1; }

/* ---------------------------------------------------------------------------
   Botões e selector de idioma
   --------------------------------------------------------------------------- */
.am-pe-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.am-pe-idiomas { justify-content: center; margin-top: clamp(28px, 5vw, 44px); }
.am-pe-erro .am-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Formulário de reporte (só existe na 500)
   O repouso é `display:none`; o main.js acrescenta `.open` ao abrir e tira-a
   ao fechar ou ao cancelar. Ver o comentário no topo deste ficheiro.
   --------------------------------------------------------------------------- */
.am-pe-reporte { display: none; }
.am-pe-reporte.open {
  display: block; text-align: left; max-width: 520px;
  margin: clamp(22px, 4vw, 34px) auto 0;
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--am-sombra-cartao);
}
.am-pe-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-pe-cabeca h3 { font-size: 19px; }
.am-pe-fechar {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--am-r-botao);
  background: transparent; cursor: pointer; color: var(--am-txt-2);
  display: grid; place-items: center;
}
.am-pe-fechar:hover { background: var(--am-sup); color: var(--am-grafite); }

/* Os campos trazem também a classe .am-campo, por isso o input e o textarea já
   vêm vestidos de am.css. Falta a etiqueta, que aqui é um <label for> e não o
   <span> que o .am-campo espera. */
.am-pe-erro .err-field label {
  display: block; font-size: 13.5px; font-weight: 500;
  color: var(--am-txt-2); margin-bottom: 6px;
}
.am-pe-contador { font-size: 12px; color: var(--am-txt-3); text-align: right; margin-top: 5px; }

/* Sucesso e falha: ambos nascem escondidos e o main.js revela-os com `.show`. */
.am-pe-sucesso { display: none; }
.am-pe-sucesso.show {
  display: block; text-align: left;
  background: #E8F7F0; border: 1px solid #A8DCC8; color: #114C37;
  border-radius: var(--am-r-cartao); padding: 18px 20px;
}
.am-pe-sucesso h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #114C37; }
.am-pe-sucesso p { margin-top: 8px; font-size: 14.5px; }
.am-pe-visto {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  background: var(--am-esmeralda); color: #FFFFFF; display: grid; place-items: center;
}

.am-pe-falha { display: none; }
.am-pe-falha.show {
  display: flex; gap: 10px; align-items: flex-start;
  background: #FDECE4; border: 1px solid #F0C3AA; color: #7A3310;
  border-radius: var(--am-r-botao); padding: 11px 13px; font-size: 13.5px; line-height: 1.45;
}
.am-pe-falha svg { flex: 0 0 auto; margin-top: 2px; }

.am-pe-accoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.am-pe-accoes .am-btn { min-height: 44px; }

/* Roda de espera dentro do botão «Enviar». O main.js escreve
   style.display = 'inline-block' enquanto submete. */
.am-pe-roda {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: am-pe-roda 700ms linear infinite;
}
@keyframes am-pe-roda { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Aviso global «Ticket recebido» — fixo em baixo, revelado com `.show`
   durante 3,5 s pelo main.js.
   --------------------------------------------------------------------------- */
.am-pe-toast {
  position: fixed; z-index: 50;
  left: 50%; bottom: clamp(16px, 3vw, 28px); transform: translate(-50%, 18px);
  display: flex; align-items: center; gap: 10px;
  background: var(--am-grafite); color: var(--am-osso);
  border-radius: var(--am-r-botao); padding: 12px 18px; font-size: 14.5px;
  box-shadow: 0 14px 34px -18px rgba(31,35,38,.7);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.am-pe-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   Movimento reduzido
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .am-pe-roda { animation-duration: 2.4s; }
  .am-pe-toast { transition: none; }
}

/* ---------------------------------------------------------------------------
   Ecrãs estreitos
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .am-pe-ctas { flex-direction: column; align-items: stretch; }
  .am-pe-ctas .am-btn { width: 100%; }
  .am-pe-accoes { flex-direction: column-reverse; align-items: stretch; }
}


/* ---------------------------------------------------------------------------
   T5b · O conteúdo dinâmico do roadmap
   ---------------------------------------------------------------------------
   As funcionalidades e as ideias não estão no HTML: o `roadmapAndIdeas()` do
   main.js vai buscá-las à API e escreve `innerHTML` dentro de `#roadmap-table`
   e de `#ideas-list`. Esse código não foi tocado por este redesenho — o
   desenho mudou, os contratos de dados não — e continua a emitir o markup da
   versão anterior: `.roadmap-row`, `.roadmap-status`, `.idea-card`,
   `.vote-btn`.

   Vestir essas classes aqui é o que impede a página de aparecer com a casca
   nova e o conteúdo sem estilo nenhum. Não é a forma final: o molde T5 pede
   três colunas de estado e uma contagem de votos que é um NÚMERO e não um
   botão. Passar o main.js a emitir `.am-coluna` e `.am-ideia` é uma mudança de
   comportamento, não de pele, e fica para um trabalho próprio — está anotado
   no relatório do WI #1528.
   --------------------------------------------------------------------------- */
.roadmap-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 18px; margin-bottom: 12px;
}
.roadmap-row-title { font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.roadmap-row-desc { font-size: 14.5px; line-height: 1.55; color: var(--am-txt-2); }
.roadmap-row-aside { display: grid; justify-items: end; gap: 6px; }
.roadmap-row-eta { font-size: 12.5px; color: var(--am-txt-3); white-space: nowrap; }

.roadmap-status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 5px 11px; border-radius: var(--am-r-etiqueta);
  background: var(--am-sup); color: var(--am-txt-2);
}
.roadmap-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* As três cores de estado do molde: lima em desenvolvimento, cinza planeado,
   esmeralda entregue. Os sufixos são os que o main.js escreve. */
.roadmap-status--doing, .roadmap-status--inprogress, .roadmap-status--dev {
  background: var(--am-lima); color: var(--am-tinta-oliva);
}
.roadmap-status--planned, .roadmap-status--todo, .roadmap-status--new {
  background: var(--am-sup); color: var(--am-cinza-linha);
}
.roadmap-status--done, .roadmap-status--delivered, .roadmap-status--closed {
  background: #E8F7F0; color: #114C37;
}

#roadmap-table { display: block; }

#ideas-list { list-style: none; margin: 0; padding: 0; }
.idea-card {
  background: var(--am-branco); border: 1px solid var(--am-linha);
  border-radius: var(--am-r-cartao); padding: 18px; margin-bottom: 12px;
}
.idea-card h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 7px; }
.idea-card p { font-size: 14.5px; line-height: 1.55; color: var(--am-txt-2); }
.idea-card footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--am-linha);
  font-size: 13px; color: var(--am-txt-3);
}
.vote-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  border-radius: var(--am-r-botao); cursor: pointer; color: var(--am-txt-2);
  font-family: var(--am-titulo); font-weight: 700; font-size: 14px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.vote-btn:hover { border-color: var(--am-grafite); color: var(--am-grafite); }
.vote-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.vote-btn--voted { background: var(--am-lima); border-color: var(--am-lima); color: var(--am-tinta-oliva); }
.vote-count { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .roadmap-row { grid-template-columns: 1fr; }
  .roadmap-row-aside { justify-items: start; }
}


/* ===========================================================================
   PARTE 6 — carrossel de cartões em ≤1040px (segurança, planos, contacto)
   ---------------------------------------------------------------------------
   ESTA SECÇÃO VIVE NO FIM DA FOLHA DE PROPÓSITO, e os selectores são
   compostos de propósito. A primeira versão usava `[data-am-desliza]` sozinho
   e ficou mais acima: `.pricing-grid { display: grid }`, declarado mais
   abaixo, tem a MESMA especificidade e ganhava por vir depois. Resultado: a
   segurança virava carrossel e os planos não — ficavam empilhados, que foi
   exactamente o que se viu no telemóvel.

   Desliza-se com o dedo. A versão anterior movia um trilho por `transform` e
   só andava pelas setas: num telemóvel, a primeira coisa que se faz a uma
   fila de cartões é arrastá-la.

   E não há cópias. O carrossel anterior exigia duplicar os cartões no HTML —
   uma cópia para a grelha, outra para o carrossel — e as duas separaram-se: a
   do carrossel foi para produção sem os ícones de cada linha. A grelha e o
   carrossel são dois estados do MESMO elemento.
   =========================================================================== */
/* Os controlos: setas nas pontas, bolinhas ao centro. Escondidos por omissão;
   ver a nota de ordem mais abaixo. */
.am-desliza-ctl {
  display: none; align-items: center; justify-content: center;
  gap: 14px; margin-top: 18px;
}

@media (max-width: 1040px) {
  .am-cartoes[data-am-desliza],
  .pricing-grid[data-am-desliza] {
    display: flex; gap: 12px;
    grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
    /* O recuo deixa o primeiro e o último cartão chegarem ao centro; sem ele
       o `scroll-snap-align: center` não consegue centrá-los e a fila parece
       parar a meio. */
    padding-inline: 8%;
    /* `align-items: stretch` é o que mantém os cartões todos à mesma altura;
       sem isto cada um fica com a altura do seu próprio conteúdo. */
    align-items: stretch;
  }
  .am-cartoes[data-am-desliza]::-webkit-scrollbar,
  .pricing-grid[data-am-desliza]::-webkit-scrollbar { display: none; }

  .am-cartoes[data-am-desliza] > *,
  .pricing-grid[data-am-desliza] > * {
    flex: 0 0 84%; min-width: 0; scroll-snap-align: center;
  }

  /* OS CARTOES DE SEGURANCA SAO MAIS LARGOS DO QUE OS DOS PLANOS.

     84% de um ecra de 390 da 253px de largura, e como estes cartoes trazem
     quatro ou cinco linhas de texto corrido cada um, a coluna ficava com 177px
     uteis e o cartao com 921px de altura: uma tira estreita e comprida.

     Aqui a conta e' feita em pixeis e nao em percentagem, de proposito: o
     recuo do trilho e a largura do cartao TEM de somar a largura toda, senao o
     `scroll-snap-align: center` nao consegue centrar o primeiro nem o ultimo
     (a percentagem do `padding` e a do `flex-basis` nao resolvem contra a
     mesma caixa, e por isso nunca batem certo). Com `flex-basis: 100%` o cartao
     mede exactamente a caixa de conteudo do trilho, e o recuo de 20px de cada
     lado e' ao mesmo tempo o espaco que falta para o centrar e o espreitar do
     cartao seguinte. Qualquer outra combinacao deixa o primeiro cartao
     descentrado — com `calc(100% - 40px)` ficava 20px a esquerda do centro.

     Os planos ficam como estao: ali o cartao e' uma coluna de preco, nao um
     paragrafo, e 84% assenta-lhe bem. */
  .am-cartoes[data-am-desliza] { padding-inline: 20px; align-items: start; }
  .am-cartoes[data-am-desliza] > * { flex: 0 0 100%; }
  /* `align-items: start` so aqui. Esticar todos a altura do mais alto faz
     sentido numa grelha, onde se veem lado a lado; num carrossel ve-se um de
     cada vez, e o unico efeito era deixar 120px de branco no fundo dos
     cartoes mais curtos. */
  .am-cartao { padding: 18px; }

  /* O TEXTO CONTORNA O ICONE EM VEZ DE FICAR AO LADO DELE.

     Com `display: flex` o icone e o texto sao duas colunas: o texto perde 22px
     de icone mais 14 de intervalo em TODAS as linhas, incluindo as que ja
     passaram muito abaixo do icone. Com o icone em `float`, so as duas
     primeiras linhas lhe dao a volta e as restantes usam a largura toda — e o
     icone ate pode ser maior, que sai mais barato do que era antes.

     Cada `li` e' um item de grelha (a `ul` e' `display: grid`), e um item de
     grelha ja abre um contexto de formatacao proprio: o float fica contido
     sem precisar de limpeza nenhuma. */
  .am-cartao li { display: block; }
  .am-cartao li svg {
    float: left; width: 28px; height: 28px;
    margin: 1px 12px 2px 0; shape-outside: margin-box;
  }

  .am-desliza-ctl { display: flex; }
}

/* A ordem destas três regras é o que faz o carrossel aparecer onde deve, e é
   fácil de trocar sem dar por isso: a base esconde, a media query mostra em
   ecrãs estreitos, e o modificador mostra em todos. Se a base ficar DEPOIS da
   media query, ganha-lhe por ser a última com a mesma especificidade e os
   controlos desaparecem do telemóvel — que foi o que aconteceu à primeira. */
.am-desliza-ctl--sempre { display: flex; }
.am-desliza-ctl__pontos { display: flex; justify-content: center; gap: 8px; }
.am-desliza-ctl__ponto {
  width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: var(--am-linha-media);
  transition: background 120ms ease, transform 120ms ease;
}
.am-desliza-ctl__ponto[aria-current="true"] { background: var(--am-grafite); transform: scale(1.15); }
.am-desliza-ctl__seta {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--am-r-botao);
  cursor: pointer; background: var(--am-branco); border: 1px solid var(--am-linha-media2);
  display: grid; place-items: center; color: var(--am-grafite);
  transition: border-color 120ms ease, opacity 120ms ease;
}
.am-desliza-ctl__seta:hover:not(:disabled) { border-color: var(--am-grafite); }
.am-desliza-ctl__seta:disabled { opacity: .35; cursor: default; }
.am-desliza-ctl__seta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* ===========================================================================
   FIM DA FOLHA — regras que TEM de vir depois do carrossel
   ---------------------------------------------------------------------------
   O bloco do carrossel usa `.pricing-grid[data-am-desliza] > *`, que tem a
   mesma especificidade das regras abaixo. Com a mesma especificidade ganha a
   ultima, por isso estas tem de ficar aqui no fundo — postas ao pe da regra
   `.empty-state`, a meio da folha, a frase continuava com 253px de largura.
   =========================================================================== */
/* QUANDO OS PLANOS NAO CARREGAM.

   Se o pedido a /api/public/plans falha e nao ha nada em cache, o main.js
   substitui os cartoes todos por esta frase — de proposito, porque deixar na
   pagina os precos que vieram no HTML seria mostrar precos velhos como se
   fossem os de hoje.

   So que em telemovel a grelha e' um carrossel: a frase herdava o `flex` dos
   cartoes, ficava com 253px encostada a um lado, e ao lado dela sobravam tres
   bolinhas a apontar para cartoes que ja nao existem. Lia-se como uma seccao
   vazia e partida, que foi como o dono a descreveu.

   `grid-column` nao faz nada num contentor `flex` — daqui para baixo e' o que
   faz a frase ocupar a linha inteira e os controlos do carrossel sairem. */
.pricing-grid > .empty-state,
.am-cartoes > .empty-state { flex: 1 1 100%; width: 100%; margin: 0; scroll-snap-align: center; }
.pricing-grid:has(> .empty-state) + .am-desliza-ctl,
.am-cartoes:has(> .empty-state) + .am-desliza-ctl { display: none; }
.pricing-grid:has(> .empty-state) { padding-inline: 0; }