/* ─────────────────────────────────────────────────────────────────────────
   Área de Autor · v2 — a casca partilhada
   Cabeçalho, barra de separadores (mobile), tipografia e peças base.

   Fala a língua do site v2 (site/v2/css/base.css): os mesmos tokens e as
   mesmas peças (sobrancelha, botões, post-it, polaroide), com prefixo aa-
   para conviver com o Bootstrap e o prototipo.css enquanto as outras
   páginas não migram. Quando a área de autor entrar na página Conta do
   site, é só trocar o cabeçalho pelo do site: o resto já é da mesma casa.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --aa-paper:#FAF7F2;
  --aa-paper-2:#F1EAE0;
  --aa-paper-3:#E7DCCE;
  --aa-ink:#16120F;
  --aa-ink-soft:#4A423C;
  --aa-muted:#7C716A;
  --aa-red:#B0191F;
  --aa-red-bright:#E30613;
  --aa-red-deep:#7C0F14;
  --aa-red-soft:rgba(176,25,31,.08);
  --aa-line:rgba(22,18,15,.10);
  --aa-line-strong:rgba(22,18,15,.18);
  --aa-card:#FFFFFF;
  --aa-verde:#2F7A4A;
  --aa-postit:#FFF3B0;

  --aa-radius-xs:10px;
  --aa-radius-sm:14px;
  --aa-radius:22px;
  --aa-radius-lg:34px;

  --aa-shadow-xs:0 1px 2px rgba(22,18,15,.06);
  --aa-shadow-sm:0 2px 4px rgba(22,18,15,.04), 0 12px 28px -18px rgba(22,18,15,.35);
  --aa-shadow-md:0 30px 70px -34px rgba(22,18,15,.45), 0 4px 12px -6px rgba(22,18,15,.12);
  --aa-shadow-book:0 18px 34px -18px rgba(22,18,15,.55), 0 2px 6px rgba(22,18,15,.12);

  --aa-maxw:1240px;
  --aa-gutter:clamp(20px,4.4vw,48px);
  --aa-ease:cubic-bezier(.16,1,.3,1);

  --aa-display:'Fraunces','DM Serif Display',Georgia,'Times New Roman',serif;
  --aa-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --aa-hand:'Caveat','Segoe Script',cursive;
  --aa-nav:'Fira Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --aa-topbar-h:36px;
  --aa-nav-h:72px;
  --aa-tabbar-h:0px;
  --aa-safe-top:env(safe-area-inset-top,0px);
}

/* ─────────────────────────── Base ─────────────────────────── */
/* :where() mantém a especificidade baixa: ganha ao Bootstrap por vir depois,
   e perde para qualquer classe nossa sem precisar de !important */
body.aa{
  margin:0;
  padding-top:calc(var(--aa-safe-top) + var(--aa-topbar-h) + var(--aa-nav-h));
  padding-bottom:var(--aa-tabbar-h);
  background:var(--aa-paper);
  color:var(--aa-ink);
  font-family:var(--aa-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:where(body.aa) a{color:inherit;text-decoration:none}
:where(body.aa) a:hover{color:inherit}
:where(body.aa) h1,:where(body.aa) h2,:where(body.aa) h3{
  margin:0;font-family:var(--aa-display);font-weight:600;letter-spacing:-.015em;line-height:1.08;color:inherit;
}
:where(body.aa) p,:where(body.aa) figure,:where(body.aa) blockquote,:where(body.aa) dl,:where(body.aa) dd{margin:0}
body.aa ::selection{background:var(--aa-red);color:#fff}
body.aa :focus-visible{outline:2px solid var(--aa-red);outline-offset:3px;border-radius:6px}

.aa-wrap{width:100%;max-width:var(--aa-maxw);margin-inline:auto;padding-inline:var(--aa-gutter)}

/* visibilidade por cenário (novo / ativo / misto), decidido pelo JS com base nas obras */
[data-cenario="novo"]  [data-show]:not([data-show~="novo"])  { display:none !important; }
[data-cenario="ativo"] [data-show]:not([data-show~="ativo"]) { display:none !important; }
[data-cenario="misto"] [data-show]:not([data-show~="misto"]) { display:none !important; }

/* ─────────────────────────── Cabeçalho ─────────────────────────── */
/* Fixo por cima da página, como no site: o fundo é uma camada com blur que se
   desvanece para baixo — sem bordo, sem sombra, sem aresta visível.
   Ao rolar, a faixa vermelha sobe e só o menu fica colado. */
.aa-cabecalho{
  position:fixed;top:0;left:0;right:0;z-index:1030;
  padding-top:var(--aa-safe-top);
  transition:transform .45s var(--aa-ease);
}
.aa-cabecalho::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-36px;z-index:0;pointer-events:none;
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  background:linear-gradient(180deg,rgba(250,247,242,.9) 0%,rgba(250,247,242,.72) 62%,rgba(250,247,242,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  transition:background .5s ease;
}
.aa-cabecalho.is-stuck{transform:translateY(calc(-1 * var(--aa-topbar-h)))}
.aa-cabecalho.is-stuck::before{bottom:0;-webkit-mask-image:none;mask-image:none;background:rgba(250,247,242,.94)}
.aa-cabecalho.is-stuck .aa-nav{border-bottom-color:rgba(176,25,31,.16)}

.aa-topbar{
  position:relative;z-index:1;height:var(--aa-topbar-h);
  background:linear-gradient(90deg,var(--aa-red-deep),var(--aa-red) 46%,var(--aa-red-deep));
  color:rgba(255,255,255,.9);font-family:var(--aa-nav);font-size:.78rem;
}
.aa-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%}
.aa-topbar strong{font-weight:600;color:#fff;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
.aa-topbar nav{display:flex;align-items:center;gap:24px}
.aa-topbar nav a,.aa-topbar nav button{
  padding:0;border:0;background:none;font:inherit;color:rgba(255,255,255,.88);cursor:pointer;
  transition:color .25s ease;
}
.aa-topbar nav a:hover,.aa-topbar nav button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

.aa-nav{position:relative;z-index:1;border-bottom:1px solid transparent;transition:border-color .4s ease}
.aa-nav-inner{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);height:var(--aa-nav-h)}
.aa-marca{flex:0 0 auto;display:flex;align-items:center}
.aa-marca img{height:clamp(36px,3vw,44px);width:auto}

.aa-menu{display:flex;align-items:stretch;gap:clamp(12px,1.9vw,30px);margin-left:auto;height:100%}
.aa-menu a{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--aa-nav);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--aa-ink-soft);white-space:nowrap;transition:color .3s ease;
}
.aa-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - 1.1em);height:2px;background:var(--aa-red);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--aa-ease);
}
.aa-menu a:hover,.aa-menu a.is-on{color:var(--aa-red)}
.aa-menu a:hover::after,.aa-menu a.is-on::after{transform:scaleX(1)}

.aa-accoes{display:flex;align-items:center;gap:6px;margin-left:clamp(4px,1vw,12px)}
.aa-conta-btn{
  display:flex;align-items:center;gap:10px;padding:4px 4px 4px 14px;
  border-radius:999px;border:1px solid var(--aa-line);background:rgba(255,255,255,.66);
  color:var(--aa-ink);cursor:pointer;transition:border-color .3s ease,background .3s ease;
}
.aa-conta-btn:hover,.aa-conta-btn[aria-expanded="true"]{border-color:rgba(176,25,31,.32);background:#fff}
.aa-conta-nome{font-size:.84rem;font-weight:600;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-avatar{
  width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;background:var(--aa-red);color:#fff;
  font-family:var(--aa-nav);font-size:.74rem;font-weight:700;letter-spacing:.04em;
}
.aa-avatar img{width:100%;height:100%;object-fit:cover}

.aa-conta-menu.dropdown-menu{
  min-width:250px;margin-top:10px !important;padding:8px;
  border:0;border-radius:18px;box-shadow:var(--aa-shadow-md);
  font-size:.9rem;background:#fff;
}
.aa-conta-topo{display:grid;gap:1px;padding:8px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--aa-line)}
.aa-conta-topo b{font-family:var(--aa-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.aa-conta-topo small{color:var(--aa-muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.aa-conta-menu .dropdown-item{display:flex;align-items:center;gap:10px;padding:.6rem .75rem;border-radius:10px;color:var(--aa-ink)}
.aa-conta-menu .dropdown-item i{color:var(--aa-muted);font-size:1rem}
.aa-conta-menu .dropdown-item:hover,.aa-conta-menu .dropdown-item:focus{background:var(--aa-red-soft);color:var(--aa-red)}
.aa-conta-menu .dropdown-item:hover i{color:var(--aa-red)}
.aa-conta-menu .dropdown-divider{margin:6px 4px;border-color:var(--aa-line)}

/* ═══════════════════════════ O CABEÇALHO, EM VERMELHO ═══════════════════════════

   A área de autor não é o site, e no computador diz-se isso pela cor: o
   cabeçalho inteiro é a folha vermelha da entrada — o mesmo gradiente, a
   mesma trama de pontos —, em vez do papel com desfoque que o site também
   tem. Quem chega sabe logo onde está, sem ler nada.

   (Houve uma tentativa de barra lateral. Distinguia, mas era muita mudança
   para o que resolvia; a cor faz o mesmo trabalho e deixa o menu onde toda a
   gente já sabe que ele está.)

   No telemóvel nada disto vale: lá o cabeçalho encolhe, a navegação desce
   para o polegar e o topo vermelho é o da própria página (aa-hero-escuro). */

@media (min-width:992px){
  .aa-cabecalho{
    color:#fff;
    border-radius:0 0 clamp(18px,1.4vw,26px) clamp(18px,1.4vw,26px);
    background:
      radial-gradient(circle at 1px 1px,rgba(255,255,255,.12) 1px,transparent 0) 0 0/22px 22px,
      linear-gradient(118deg,var(--aa-red-deep) 0%,var(--aa-red) 56%,#C92026 100%);
    box-shadow:0 18px 44px -30px rgba(124,15,20,.85);
  }
  /* o véu de papel não tem nada que fazer sobre vermelho */
  .aa-cabecalho::before{display:none}

  /* a fita já não precisa de fundo próprio: o cabeçalho todo é a fita */
  .aa-topbar{background:none}
  .aa-topbar-inner{border-bottom:1px solid rgba(255,255,255,.16)}

  .aa-nav{border-bottom:0}
  .aa-cabecalho.is-stuck .aa-nav{border-bottom-color:transparent}

  .aa-marca img{
    /* o ficheiro é o vermelho; pinta-se de branco aqui, em vez de se carregar
       outro logótipo só por causa do fundo */
    filter:brightness(0) invert(1);
  }

  .aa-menu a{color:rgba(255,255,255,.78)}
  .aa-menu a::after{background:#fff}
  .aa-menu a:hover,.aa-menu a.is-on{color:#fff}

  /* o sino e o seu selo são tratados mais abaixo, a seguir ao sítio onde o
     centro de avisos se desenha — aqui as regras não lhe chegavam */

  .aa-conta-btn{
    border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;
  }
  .aa-conta-btn:hover,.aa-conta-btn[aria-expanded="true"]{
    border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.2);
  }
  .aa-avatar{background:#fff;color:var(--aa-red)}
}

/* ─────────────────────────── Separadores dentro de uma página ─────────────────────────── */
/* no computador, pílulas; no telemóvel, um comando segmentado (como na página da obra) */
.aa-abas{
  display:flex;gap:4px;margin:0 0 clamp(20px,2.4vw,30px);padding:0 0 4px;list-style:none;
  overflow-x:auto;scrollbar-width:none;border:0;
}
.aa-abas::-webkit-scrollbar{display:none}
.aa-abas .nav-item{flex:0 0 auto;display:flex}
.aa-abas .nav-link{
  display:inline-flex;align-items:center;gap:.5em;padding:.55em .95em;border:0;border-radius:10px;background:transparent;
  font-family:var(--aa-nav);font-size:.84rem;font-weight:600;color:var(--aa-muted);white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.aa-abas .nav-link:hover{background:var(--aa-red-soft);color:var(--aa-red)}
.aa-abas .nav-link.active{background:var(--aa-red);color:#fff}
@media (max-width:991.98px){
  .aa-abas{
    gap:2px;padding:4px;margin-bottom:16px;border-radius:14px;
    background:rgba(22,18,15,.06);overflow:visible;
  }
  .aa-abas .nav-item{flex:1 1 0;min-width:0}
  .aa-abas .nav-link{
    width:100%;justify-content:center;height:38px;padding:0 6px;border-radius:11px;
    font-size:.82rem;color:var(--aa-ink-soft);
  }
  .aa-abas .nav-link.active{background:#fff;color:var(--aa-ink);box-shadow:0 2px 6px -2px rgba(22,18,15,.25)}
  .aa-abas .nav-link:hover{background:transparent;color:var(--aa-ink)}
  .aa-abas .nav-link.active:hover{background:#fff}
}

/* ─────────────────────────── Barra de separadores (app) ─────────────────────────── */
.aa-tabbar{display:none}

@media (max-width:991.98px){
  :root{
    --aa-topbar-h:0px;
    --aa-nav-h:60px;
    --aa-tabbar-h:calc(86px + env(safe-area-inset-bottom,0px));
  }

  /* no telemóvel o rodapé sai: o menu já leva ao site e à editora */
  .aa-rodape{display:none}
  body.aa{padding-bottom:calc(var(--aa-tabbar-h) + 22px)}
  .aa-topbar,.aa-menu,.aa-conta-nome{display:none}

  /* páginas com hero escuro: o cabeçalho flutua por cima dele, sem fundo e com
     o logótipo em branco. Assim que se rola, volta ao papel. */
  body.aa-hero-escuro{padding-top:var(--aa-safe-top)}
  body.aa-hero-escuro .aa-cabecalho::before{opacity:0;transition:opacity .35s ease}
  body.aa-hero-escuro .aa-cabecalho.is-stuck::before{opacity:1}
  body.aa-hero-escuro .aa-marca img{
    filter:brightness(0) invert(1);opacity:.92;
    transition:filter .3s ease,opacity .3s ease;
  }
  body.aa-hero-escuro .aa-cabecalho.is-stuck .aa-marca img{filter:none;opacity:1}
  body.aa-hero-escuro .aa-conta-btn img{box-shadow:0 0 0 1.5px rgba(255,255,255,.45)}
  body.aa-hero-escuro .aa-cabecalho.is-stuck .aa-conta-btn img{box-shadow:none}
  /* sobre a folha, o sino é branco; ao rolar volta à cor do papel */
  body.aa-hero-escuro .aa-avisos-btn,
  body.aa-hero-escuro .aa-avisos-btn.tem-novos{color:#fff}
  body.aa-hero-escuro .aa-avisos-btn:hover{background:rgba(255,255,255,.16);color:#fff}
  body.aa-hero-escuro .aa-avisos-selo{
    background:#fff;color:var(--aa-red);box-shadow:0 0 0 2px rgba(255,255,255,.28);
  }
  body.aa-hero-escuro .aa-cabecalho.is-stuck .aa-avisos-btn{color:var(--aa-ink-soft)}
  body.aa-hero-escuro .aa-cabecalho.is-stuck .aa-avisos-btn.tem-novos{color:var(--aa-red)}
  body.aa-hero-escuro .aa-cabecalho.is-stuck .aa-avisos-selo{
    background:var(--aa-red);color:#fff;box-shadow:0 0 0 2px var(--aa-paper);
  }

  /* ── o topo de uma página interior é uma folha, não um título de página ──
     nome do ecrã pequeno, o número que interessa em grande, os outros em
     pastilhas de vidro e a acção principal em baixo, a toda a largura. */
  body.aa-hero-escuro .aa-topo--pagina{
    position:relative;color:#fff;border-bottom:0;border-radius:0 0 30px 30px;overflow:hidden;
    padding:calc(var(--aa-nav-h) + 14px) 0 34px;
    background:
      radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 0) 0 0/22px 22px,
      linear-gradient(150deg,var(--aa-red-deep) 0%,var(--aa-red) 58%,#C92026 100%);
    box-shadow:0 24px 44px -34px rgba(124,15,20,.9);
  }
  body.aa-hero-escuro .aa-topo--pagina:has(.aa-btn--red){padding-bottom:82px}
  /* numa app não há migalhas, sobretítulo nem parágrafo de abertura */
  body.aa-hero-escuro .aa-topo--pagina .aa-migalhas,
  body.aa-hero-escuro .aa-topo--pagina .aa-eyebrow,
  body.aa-hero-escuro .aa-topo--pagina .aa-lead{display:none}
  body.aa-hero-escuro .aa-pagina-cabeca{display:block;margin-top:0}
  body.aa-hero-escuro .aa-pagina-texto{gap:2px;max-width:none}
  body.aa-hero-escuro .aa-pagina-titulo{color:#fff;font-size:1.3rem;letter-spacing:-.02em}

  /* Os números perdem o cartão **quando vivem dentro da folha vermelha** — aí
     a folha já é o fundo deles. No Início não é o caso: lá a folha é o cartão
     da estante e os números ficam por baixo, em papel. Sem esta precisão, o
     que acontecia era o pior dos dois mundos: perdiam a faixa vermelha e
     ficavam brancos sobre papel, ou seja, invisíveis. */
  body.aa-hero-escuro .aa-topo--pagina .aa-numeros{
    margin-top:20px;background:none;box-shadow:none;border-radius:0;overflow:visible;
  }
  body.aa-hero-escuro .aa-numeros-grelha,
  body.aa-hero-escuro .aa-conta-numeros{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:20px 0 0;overflow:visible;
  }
  body.aa-hero-escuro .aa-numeros-grelha > div,
  body.aa-hero-escuro .aa-conta-numeros > div{padding:0;border:0;min-width:0}
  /* sobre a folha, os números são brancos (algumas páginas pintavam-nos de vermelho) */
  body.aa-hero-escuro .aa-topo--pagina dd,
  body.aa-hero-escuro .aa-topo--pagina dt{color:#fff}
  /* o número principal da página */
  body.aa-hero-escuro [data-principal]{order:-1;flex:0 0 100%}
  body.aa-hero-escuro [data-principal] dd{font-size:2.9rem;line-height:1}
  body.aa-hero-escuro .aa-topo--pagina [data-principal] dt{margin-top:4px;font-size:.78rem;color:rgba(255,255,255,.72)}
  /* os restantes, em pastilhas de vidro */
  body.aa-hero-escuro .aa-numeros-grelha > div:not([data-principal]),
  body.aa-hero-escuro .aa-conta-numeros > div:not([data-principal]){
    display:flex;align-items:baseline;gap:8px;padding:9px 14px;border-radius:14px;
    background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  body.aa-hero-escuro .aa-numeros-grelha > div:not([data-principal]) dd,
  body.aa-hero-escuro .aa-conta-numeros > div:not([data-principal]) dd{font-size:1.1rem}
  body.aa-hero-escuro .aa-topo--pagina .aa-numeros-grelha > div:not([data-principal]) dt,
  body.aa-hero-escuro .aa-topo--pagina .aa-conta-numeros > div:not([data-principal]) dt{
    margin-top:0;font-size:.78rem;color:rgba(255,255,255,.8);
  }

  /* a acção principal: pílula branca colada ao fundo da folha */
  body.aa-hero-escuro .aa-pagina-cabeca > .aa-btn--red{
    position:absolute;left:var(--aa-gutter);right:var(--aa-gutter);bottom:20px;z-index:1;
    width:auto;height:44px;margin:0;justify-content:center;border:0;border-radius:999px;
    background:#fff;color:var(--aa-red);font-size:.94rem;
  }
  body.aa-hero-escuro .aa-pagina-cabeca > .aa-btn--red:hover{background:#fff;color:var(--aa-red-deep)}
  .aa-accoes{margin-left:0}
  .aa-nav-inner > .aa-accoes:first-of-type{margin-left:auto}
  .aa-nav-inner > .aa-accoes + .aa-accoes{margin-left:2px}
  .aa-conta-btn{padding:2px;border:0;background:none}
  .aa-conta-btn:hover,.aa-conta-btn[aria-expanded="true"]{background:none}
  .aa-marca img{height:32px}

  /* os modais já sobem como folhas (prototipo.css): aqui só se tira a barra
     de separadores da frente enquanto a folha está aberta */
  body.aa.modal-open .aa-tabbar{opacity:0;pointer-events:none}

  /* Liquid Glass (iOS 26/27): a barra flutua sobre a página, vidro com reflexo
     na aresta de cima, e o separador activo é uma cápsula de vidro mais clara */
  /* o separador das obras sai: a estante vive no carrossel do Início */
  .aa-tabbar a[data-page="obras"]{display:none}
  .aa-tabbar{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    position:fixed;z-index:1030;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:5px;border-radius:30px;isolation:isolate;
    background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.26) 100%);
    backdrop-filter:blur(20px) saturate(190%) brightness(1.03);-webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.03);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.95),
      inset 0 -1px 1px rgba(255,255,255,.35),
      inset 0 0 0 .5px rgba(255,255,255,.6),
      0 0 0 .5px rgba(22,18,15,.1),
      0 14px 34px -14px rgba(22,18,15,.4),
      0 2px 8px -3px rgba(22,18,15,.14);
  }
  .aa-tabbar::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:
      radial-gradient(90% 120% at 18% -40%,rgba(255,255,255,.7),transparent 55%),
      radial-gradient(80% 100% at 85% 140%,rgba(255,255,255,.4),transparent 55%);
  }
  .aa-tabbar a{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px 6px;border-radius:25px;
    font-family:var(--aa-nav);font-size:.64rem;font-weight:600;letter-spacing:.01em;
    color:rgba(22,18,15,.62);
    transition:color .25s ease,background .35s ease,box-shadow .35s ease,transform .3s var(--aa-ease);
    -webkit-tap-highlight-color:transparent;
  }
  .aa-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aa-tabbar i{font-size:1.3rem;line-height:1}
  .aa-tabbar a.is-on{
    color:var(--aa-red);
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
    box-shadow:inset 0 1px 1px #fff,inset 0 0 0 .5px rgba(22,18,15,.06),0 4px 12px -6px rgba(22,18,15,.3);
  }
  .aa-tabbar a:active{transform:scale(.94)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .aa-tabbar{background:rgba(250,247,242,.96)}
  }
}

/* ─────────────────────────── Átomos ─────────────────────────── */
.aa-eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--aa-sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aa-red);
}
.aa-eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.55;flex:0 0 auto}
.aa-eyebrow--plain::before{display:none}

.aa-lead{color:var(--aa-ink-soft);font-size:clamp(1.02rem,.4vw + .95rem,1.18rem);line-height:1.6;max-width:56ch}

.aa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78em 1.35em;border-radius:999px;border:1px solid transparent;
  background:var(--aa-ink);color:#fff;
  font-family:var(--aa-sans);font-size:.9rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;
  cursor:pointer;box-shadow:var(--aa-shadow-xs);
  transition:transform .45s var(--aa-ease),box-shadow .45s var(--aa-ease),background .3s ease,color .3s ease;
}
.aa-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(22,18,15,.6);color:#fff}
.aa-btn--red{background:var(--aa-red)}
.aa-btn--red:hover{background:var(--aa-red-bright)}
.aa-btn--ghost{background:transparent;color:var(--aa-ink);border-color:var(--aa-line-strong);box-shadow:none}
.aa-btn--ghost:hover{background:rgba(22,18,15,.04);color:var(--aa-ink)}

.aa-link-seta{display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.9rem;color:var(--aa-red)}
.aa-link-seta:hover{color:var(--aa-red-deep)}
.aa-link-seta > [aria-hidden="true"]{transition:transform .4s var(--aa-ease)}
.aa-link-seta:hover > [aria-hidden="true"],
a:hover > .aa-link-seta > [aria-hidden="true"],
[role="link"]:hover .aa-link-seta > [aria-hidden="true"]{transform:translateX(4px)}

/* toques de papel: nota à mão, post-it e polaroide (os mesmos do site) */
.aa-nota-mao{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--aa-hand);font-size:1.42rem;font-weight:600;line-height:1.1;color:var(--aa-red);
  transform:rotate(-1.6deg);transform-origin:left center;
}
.aa-postit{
  position:relative;padding:18px 18px 20px;border-radius:2px;
  background:var(--aa-postit);color:var(--aa-ink);
  box-shadow:2px 5px 16px rgba(22,18,15,.18);transform:rotate(-1.2deg);
}
.aa-postit::before{
  content:"";position:absolute;left:50%;top:-10px;width:58px;height:18px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,255,255,.62);box-shadow:0 1px 4px rgba(22,18,15,.12);
}
.aa-polaroid{
  position:relative;margin:0;padding:10px 10px 46px;border-radius:2px;background:#fff;
  box-shadow:0 22px 40px -22px rgba(22,18,15,.5),0 2px 6px rgba(22,18,15,.08);
  transform:rotate(3deg);transition:transform .6s var(--aa-ease),box-shadow .6s var(--aa-ease);
}
.aa-polaroid:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--aa-shadow-md)}
.aa-polaroid::before{
  content:"";position:absolute;z-index:2;left:50%;top:-12px;width:76px;height:22px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,246,191,.82);box-shadow:0 1px 4px rgba(22,18,15,.14);
}

/* cabeçalho de secção */
.aa-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,32px)}
.aa-head h2{margin-top:10px;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.025em;text-wrap:balance}
.aa-head-accoes{display:flex;align-items:center;gap:18px}

.aa-sec{padding-block:clamp(34px,4.4vw,64px)}
.aa-card{background:var(--aa-card);border-radius:var(--aa-radius);box-shadow:var(--aa-shadow-sm)}

.aa-band-papel{background:linear-gradient(180deg,#FCF2EF,#F8E7E1)}
.aa-band-escura{position:relative;overflow:hidden;isolation:isolate;background:var(--aa-ink);color:#F5F0EA}
.aa-band-escura::before{
  content:"";position:absolute;z-index:-1;width:70vw;height:70vw;right:-22vw;top:-30vw;pointer-events:none;
  background:radial-gradient(circle,rgba(176,25,31,.42),transparent 62%);filter:blur(50px);
}
.aa-band-escura .aa-eyebrow{color:#E8A9A2}

/* esqueleto de carregamento: papel a respirar, em vez do cinzento de sistema */
.aa-esqueleto{
  background:linear-gradient(90deg,var(--aa-paper-2) 0%,var(--aa-paper-3) 50%,var(--aa-paper-2) 100%) !important;
  background-size:220% 100% !important;
  animation:aaRespira 1.5s ease-in-out infinite;
  border-radius:var(--aa-radius-sm);box-shadow:none !important;color:transparent !important;
}
.aa-esq-linha{display:block;height:12px;border-radius:6px}
@keyframes aaRespira{from{background-position:120% 0}to{background-position:-120% 0}}

.aa-vazio{
  display:grid;justify-items:center;gap:10px;padding:clamp(28px,4vw,48px);text-align:center;
  border-radius:var(--aa-radius);background:var(--aa-paper-2);color:var(--aa-muted);
}
.aa-vazio i{font-size:2rem;color:var(--aa-red);opacity:.6}

/* ─────────────────────────── Peças de livros e números (Início, As Minhas Obras…) ─────────────────────────── */
/* números: a fita vermelha da casa */
.aa-numeros{
  margin-top:clamp(22px,3vw,40px);border-radius:var(--aa-radius);overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(135deg,var(--aa-red-deep) 0%,var(--aa-red) 58%,#C92026 100%);
  box-shadow:0 28px 50px -30px rgba(124,15,20,.85);
}
.aa-numeros-grelha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -1px -1px 0}
.aa-numeros-grelha > div{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(16px,2vw,24px) clamp(16px,2.2vw,28px);
  border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
}
.aa-numeros dd{
  order:1;margin:0;font-family:var(--aa-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1;font-variant-numeric:lining-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aa-numeros dd.aa-numero-texto{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.1}
.aa-numeros dt{order:2;margin-top:6px;font-size:.8rem;font-weight:500;line-height:1.3;color:rgba(255,255,255,.8)}

/* ── no computador, a fita deixa de ser fita ──
   O cabeçalho passou a vermelho, e uma fita vermelha logo por baixo dele era
   vermelho sobre vermelho — duas folhas coladas, e a segunda a gritar tanto
   como a primeira.

   Os números passam a ser como os das Encomendas (`.aa-conta-numeros`, em
   encomendas-v2.css): sem caixa, sem linhas, sem fundo — só o número em
   vermelho e o rótulo por baixo, com ar entre eles. Não é um desenho novo; é
   o que aquela página já fazia bem, aplicado às outras.

   No telemóvel nada disto vale, e de propósito: lá os números ou vivem dentro
   da folha vermelha (páginas interiores) ou são a linha discreta em papel do
   Início — e nenhum dos dois casos passa por aqui. */
@media (min-width:992px){
  .aa-numeros{
    margin-top:clamp(18px,2.2vw,28px);
    background:none;box-shadow:none;border-radius:0;overflow:visible;
    color:var(--aa-ink);
  }
  .aa-numeros-grelha{
    display:flex;flex-wrap:wrap;
    gap:clamp(20px,3vw,40px);margin:0;
  }
  .aa-numeros-grelha > div{padding:0;border:0;min-width:0}
  .aa-numeros dd{font-size:clamp(1.4rem,2vw,1.8rem);color:var(--aa-red)}
  .aa-numeros dd.aa-numero-texto{font-size:clamp(1.15rem,1.5vw,1.4rem)}
  .aa-numeros dt{margin-top:4px;font-size:.76rem;color:var(--aa-muted)}
}

@media (max-width:991.98px){
  /* no telemóvel os números são uma fita fina que desliza, não um quadro */
  .aa-numeros-grelha{
    display:flex;margin:0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .aa-numeros-grelha::-webkit-scrollbar{display:none}
  .aa-numeros-grelha > div{
    flex:0 0 auto;min-width:min(46vw,150px);padding:13px 16px 14px;
    border-bottom:0;scroll-snap-align:start;
  }
  .aa-numeros-grelha > div:last-child{border-right:0}
  .aa-numeros dd{font-size:1.55rem}
  .aa-numeros dd.aa-numero-texto{font-size:1.1rem}
  .aa-numeros dt{margin-top:3px;font-size:.73rem}
}

/* capa na proporção real do livro: largura fixa, altura a que a capa pedir */
.aa-capa{position:relative;flex:0 0 auto;width:clamp(84px,9vw,112px);border-radius:3px 8px 8px 3px;box-shadow:var(--aa-shadow-book)}
.aa-capa img{display:block;width:100%;height:auto;border-radius:inherit}
.aa-capa::after,.aa-livro-capa::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,18,15,.2) 0,rgba(255,255,255,.22) 3px,rgba(255,255,255,0) 9px),
    linear-gradient(100deg,rgba(255,255,255,.3),rgba(255,255,255,0) 34%);
}
.aa-capa--vazia{aspect-ratio:2/3;background:var(--aa-paper-2)}

.aa-progresso{width:100%;margin-top:6px}
.aa-progresso-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.8rem;color:var(--aa-muted);margin-bottom:6px}
.aa-progresso-linha b{font-family:var(--aa-display);font-size:1.25rem;font-weight:600;color:var(--aa-red);letter-spacing:-.01em}
.aa-barra{height:4px;border-radius:4px;background:var(--aa-paper-2);overflow:hidden}
.aa-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--aa-red-deep),var(--aa-red-bright))}


/* ═══════════════ ESTANTE ═══════════════ */
.aa-setas{display:flex;gap:6px}
.aa-setas button{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--aa-line-strong);background:transparent;color:var(--aa-ink-soft);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s var(--aa-ease);
}
.aa-setas button:hover{background:var(--aa-red);border-color:var(--aa-red);color:#fff;transform:translateY(-2px)}

.aa-estante{
  --aa-capa-h:clamp(196px,19vw,236px);
  display:flex;align-items:flex-start;gap:clamp(20px,2.4vw,34px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:14px 0 10px;
}
.aa-estante::-webkit-scrollbar{display:none}
.aa-livro{flex:0 0 auto;display:grid;gap:12px;width:min-content;scroll-snap-align:start;color:var(--aa-ink)}
.aa-livro:hover{color:var(--aa-ink)}
/* altura fixa na própria imagem e largura a que a capa pedir: assim a largura
   do livro é a da capa (uma altura em % no img deixava a moldura mais estreita
   do que a capa, e cortava-a) */
.aa-livro-capa{
  position:relative;display:block;width:max-content;
  border-radius:3px 8px 8px 3px;overflow:hidden;background:var(--aa-paper-2);box-shadow:var(--aa-shadow-book);
  transition:transform .55s var(--aa-ease),box-shadow .55s var(--aa-ease);
}
.aa-livro-capa img{display:block;height:var(--aa-capa-h);width:auto;max-width:none}
.aa-livro-capa--vazia,.aa-livro-capa.aa-esqueleto{width:150px;height:var(--aa-capa-h)}
.aa-livro:hover .aa-livro-capa{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 30px 46px -22px rgba(22,18,15,.55)}
.aa-livro-meta{display:grid;gap:3px}
.aa-livro-titulo{
  font-family:var(--aa-display);font-size:1rem;font-weight:600;line-height:1.24;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.aa-livro-estado{display:inline-flex;align-items:baseline;gap:6px;font-size:.78rem;font-weight:600;line-height:1.3;color:var(--aa-ink-soft)}
.aa-livro-estado::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor;translate:0 -1px}
.aa-livro.is-publicada .aa-livro-estado{color:var(--aa-verde)}
.aa-livro.is-edicao .aa-livro-estado{color:var(--aa-red)}
.aa-livro.is-pausa .aa-livro-estado{color:#A8661A}
.aa-livro.is-inativa .aa-livro-estado{color:var(--aa-muted)}
.aa-livro.is-inativa .aa-livro-capa img,.aa-livro.is-pausa .aa-livro-capa img{filter:grayscale(.85);opacity:.72}
.aa-livro.is-inativa .aa-livro-titulo{color:var(--aa-ink-soft)}

/* ─────────────────────────── Páginas interiores (As Minhas Obras, Contabilidade…) ─────────────────────────── */
.aa-topo--pagina{
  padding-block:clamp(20px,3vw,40px) clamp(26px,3vw,44px);
  background:
    radial-gradient(80% 90% at 88% 0%,rgba(176,25,31,.07),transparent 60%),
    linear-gradient(180deg,var(--aa-paper) 0%,var(--aa-paper-2) 100%);
  border-bottom:1px solid var(--aa-line);
}
.aa-migalhas{display:flex;align-items:center;gap:.6em;font-size:.84rem;color:var(--aa-muted)}
.aa-migalhas a{font-weight:600;color:var(--aa-red)}
.aa-migalhas a:hover{color:var(--aa-red-deep);text-decoration:underline;text-underline-offset:3px}
.aa-pagina-cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;margin-top:clamp(14px,1.8vw,22px)}
.aa-pagina-texto{display:grid;justify-items:start;gap:12px;max-width:62ch}
.aa-pagina-titulo{font-size:clamp(2.2rem,4.8vw,3.7rem);line-height:1.02;letter-spacing:-.035em;font-variation-settings:'opsz' 144}
.aa-numeros-grelha--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .aa-numeros-grelha.aa-numeros-grelha--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .aa-pagina-cabeca .aa-btn{width:100%}
  .aa-numeros-grelha--3 > div{padding:14px 12px}
  .aa-numeros-grelha--3 dd{font-size:1.7rem}
  .aa-numeros-grelha--3 dt{font-size:.72rem}
}
.aa-capa--vazia > span{
  display:grid;place-items:center;height:100%;padding:8px;text-align:center;
  font-family:var(--aa-display);font-size:.8rem;line-height:1.2;color:var(--aa-muted);
}
.aa-btn--light{background:#fff;color:var(--aa-ink)}
.aa-btn--light:hover{background:#fff;color:var(--aa-red)}
/* avisos: faixa vermelha suave com ícone e acção */
.aa-sec--aviso{padding-block:clamp(18px,2.4vw,28px) 0}
.aa-aviso{
  display:flex;align-items:center;gap:16px;padding:16px 18px 16px 20px;border-radius:var(--aa-radius-sm);
  background:linear-gradient(90deg,rgba(176,25,31,.1),rgba(176,25,31,.035));
  box-shadow:inset 3px 0 0 var(--aa-red);
}
.aa-aviso-icone{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--aa-red);color:#fff;font-size:1.2rem}
.aa-aviso-corpo{flex:1;min-width:0;display:grid;gap:2px}
.aa-aviso-corpo b{font-weight:600;color:var(--aa-ink)}
.aa-aviso-corpo small{font-size:.86rem;color:var(--aa-ink-soft)}
@media (max-width:560px){
  .aa-aviso{flex-wrap:wrap}
  .aa-aviso .aa-btn{width:100%}
}
/* ícone no topo dos modais */
.aa-modal-icone{
  display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:12px;border-radius:18px;
  background:var(--aa-red-soft);color:var(--aa-red);font-size:1.5rem;
}

/* ─────────────────────────── Rodapé ─────────────────────────── */
.aa-rodape{border-top:1px solid var(--aa-line);padding-block:30px 38px;color:var(--aa-muted);font-size:.86rem}
.aa-rodape-inner{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
.aa-rodape p{font-family:var(--aa-display);font-style:italic;font-size:1rem;color:var(--aa-ink-soft);max-width:48ch}
.aa-rodape nav{display:flex;gap:20px;flex-wrap:wrap}
.aa-rodape nav a:hover{color:var(--aa-red)}

/* ─────────────────────────── Modais partilhados ─────────────────────────── */
body.aa .modal-clean .titulo{font-family:var(--aa-display);font-weight:600;letter-spacing:-.02em}
body.aa .modal-acc-icon{background:var(--aa-red-soft);color:var(--aa-red)}
body.aa .welcome-apple-headline{font-family:var(--aa-display);font-weight:600;letter-spacing:-.02em}
body.aa .welcome-apple-welcome-word{
  font-family:var(--aa-display);font-style:italic;font-weight:600;letter-spacing:-.03em;
  background:linear-gradient(118deg,var(--aa-red-deep) 0%,var(--aa-red) 50%,var(--aa-red-bright) 100%);
  -webkit-background-clip:text;background-clip:text;
}
body.aa .welcome-apple-btn-primary{background:var(--aa-red)}
body.aa .welcome-apple-btn-primary:hover{background:var(--aa-red-deep)}
body.aa .welcome-dot.is-active{background:var(--aa-red)}

@media (prefers-reduced-motion:reduce){
  body.aa *,body.aa *::before,body.aa *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ─────────────────────────── Centro de avisos ─────────────────────────── */
.aa-accoes{position:relative}
.aa-avisos-btn{
  position:relative;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;
  background:transparent;color:var(--aa-ink-soft);font-size:1.12rem;
  transition:background .25s ease,color .25s ease;
}
.aa-avisos-btn:hover{background:var(--aa-red-soft);color:var(--aa-red)}
.aa-avisos-btn.tem-novos{color:var(--aa-red)}
.aa-avisos-selo{
  position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;
  border-radius:999px;background:var(--aa-red);color:#fff;
  font-family:var(--aa-nav);font-size:.62rem;font-weight:700;box-shadow:0 0 0 2px var(--aa-paper);
}

/* No computador o cabeçalho é vermelho (ver «O CABEÇALHO, EM VERMELHO»), e um
   sino cor de vinho sobre vermelho não se lê. Estas regras vivem aqui, e não
   lá em cima com as outras do cabeçalho, porque o componente é definido nesta
   altura do ficheiro: escritas antes, perdiam para as de cima por uma questão
   de ordem, e ficava um sino invisível sem se perceber porquê. */
@media (min-width:992px){
  .aa-avisos-btn{color:rgba(255,255,255,.82)}
  .aa-avisos-btn:hover{background:rgba(255,255,255,.16);color:#fff}
  /* com avisos por ler fica a branco cheio — o que chama a atenção é o selo */
  .aa-avisos-btn.tem-novos{color:#fff}
  /* o anel do selo era da cor do papel; sobre vermelho, é do vermelho */
  .aa-avisos-selo{background:#fff;color:var(--aa-red);box-shadow:0 0 0 2px rgba(124,15,20,.55)}

  /* colado ao rolar continua vermelho: nada muda para o sino */
}

.aa-avisos-painel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1040;width:min(380px,calc(100vw - 32px));
  border-radius:20px;background:var(--aa-card);box-shadow:var(--aa-shadow-md),0 0 0 1px rgba(22,18,15,.06);
  overflow:hidden;opacity:0;translate:0 -6px;transition:opacity .2s ease,translate .2s var(--aa-ease);
}
.aa-avisos-painel.is-aberto{opacity:1;translate:0 0}
.aa-avisos-cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;
}
.aa-avisos-cabeca b{font-family:var(--aa-display);font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
.aa-avisos-fechar{
  width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--aa-muted);
  display:grid;place-items:center;font-size:.8rem;
}
.aa-avisos-fechar:hover{background:var(--aa-paper-2);color:var(--aa-ink)}
.aa-avisos-lista{max-height:min(60vh,420px);overflow-y:auto;padding:0 8px 4px}
.aa-notif{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:11px 12px;margin-bottom:6px;border-radius:14px;color:var(--aa-ink);
  background:var(--aa-paper);transition:background .25s ease;
}
.aa-notif:hover{background:var(--aa-paper-2);color:var(--aa-ink)}
/* o que está por resolver leva uma marca vermelha à esquerda */
.aa-notif.is-urgente{box-shadow:inset 3px 0 0 var(--aa-red)}
.aa-notif-icone{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:var(--aa-paper-2);color:var(--aa-ink-soft);font-size:.95rem;
}
.aa-notif.is-novo .aa-notif-icone{background:var(--aa-red-soft);color:var(--aa-red)}
.aa-notif.is-urgente .aa-notif-icone{background:var(--aa-red);color:#fff}
.aa-notif-corpo{display:grid;gap:2px;min-width:0}
.aa-notif.is-novo .aa-notif-corpo{padding-right:14px}
.aa-notif-corpo b{font-size:.92rem;font-weight:600;line-height:1.3}
.aa-notif-corpo small{font-size:.8rem;color:var(--aa-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-notif-corpo time{font-size:.74rem;color:var(--aa-muted)}
.aa-notif.is-novo::after{
  content:"";position:absolute;right:10px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--aa-red);
}
.aa-avisos-vazio{padding:26px 14px 30px;text-align:center;font-size:.9rem;color:var(--aa-muted)}
.aa-avisos-fundo{padding:8px;border-top:1px solid var(--aa-line);background:rgba(241,234,224,.35)}
.aa-avisos-fundo button{
  width:100%;height:38px;border:0;border-radius:12px;background:transparent;
  font-family:var(--aa-nav);font-size:.84rem;font-weight:600;color:var(--aa-ink-soft);
}
.aa-avisos-fundo button:hover{background:#fff;color:var(--aa-red)}

@media (max-width:991.98px){
  /* no telemóvel os avisos sobem como folha, à altura do polegar */
  .aa-avisos-painel{
    position:fixed;inset:auto 0 0 0;width:auto;max-height:82vh;border-radius:26px 26px 0 0;
    translate:0 14px;padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .aa-avisos-painel.is-aberto{translate:0 0}
  .aa-avisos-lista{max-height:min(62vh,520px)}
  body.aa-avisos-abertos{overflow:hidden}
  body.aa-avisos-abertos .aa-tabbar{opacity:0;pointer-events:none}
  body.aa-avisos-abertos::after{
    content:"";position:fixed;inset:0;z-index:1035;background:rgba(22,18,15,.45);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  body.aa-avisos-abertos .aa-cabecalho{z-index:1050}
  body.aa-avisos-abertos .aa-cabecalho::before{opacity:0}
  .aa-avisos-btn{width:38px;height:38px}
}

/* ============================================================
   EMBUTIDA — a mesma página dentro de outra: do painel do Início,
   ou da conta do site. Tira-se a casca (cabeçalho, barra do menu) e
   fica o conteúdo, que é o que a página de fora não tem.
   Serve qualquer página da área: é por isso que vive aqui e não
   numa folha de uma página só.
   ============================================================ */
body.aa.aa-embebida{
  background:transparent;
  /* o padding de cima é o lugar do cabeçalho fixo, que aqui não existe */
  padding:0;
  min-height:0;
  /* flow-root impede que as margens dos filhos escapem: a altura medida
     seria menor do que o conteúdo e quem embebe cortava o fim */
  display:flow-root;
  overflow-x:hidden;
}
/* O topo sai inteiro: quem embebe já tem o seu, e dois seguidos era o mesmo
   dito duas vezes. Os números não se perdem — sobem por mensagem para a faixa
   de quem embebe (ver embebido.js). */
body.aa-embebida #menu-autor,
body.aa-embebida .aa-tabbar,
body.aa-embebida .aa-rodape,
body.aa-embebida .aa-migalhas,
body.aa-embebida .aa-topo{display:none !important}
body.aa-embebida #main{padding:0;margin:0;display:flow-root;padding-bottom:26px}
body.aa-embebida .aa-wrap{padding-inline:var(--aa-gutter);max-width:none;width:auto}

/* O topo vermelho é a capa de uma página inteira. Dentro de outra página
   já há um topo — o título do separador, a faixa de números — e dois seguidos
   é dizer duas vezes a mesma coisa. Sai o que é repetição: as migalhas (acima),
   o título com a sua frase, os números (que sobem por mensagem para a faixa de
   quem embebe, ver embebido.js) e o cartão de quem é o autor.
   Fica o botão de acção, que não existe em mais lado nenhum: sem ele não se
   pedia um evento nem se chegava ao arquivo de faturas. */
/* O detalhe de uma encomenda fica de fora: chega-se a ele de dentro do resumo
   e é o título dele que diz qual é a encomenda — quem embebe só sabe dizer
   «Resumo». Tudo o que se segue vale para as outras páginas. */
body.aa-embebida:not(.aa-enc-detalhe) .aa-topo--pagina .aa-pagina-texto,
body.aa-embebida .aa-topo--pagina .aa-numeros,
body.aa-embebida .aa-topo--pagina .aa-perfil-cartao{display:none !important}

/* E quando não sobra nada — é o caso do perfil — o topo sai inteiro, para não
   deixar um vão branco antes do conteúdo. A obra tem aqui a capa e o título,
   que são o conteúdo e não a moldura: essa fica. */
body.aa-embebida:not(.aa-enc-detalhe) .aa-topo--pagina:not(:has(.aa-pagina-cabeca > .aa-btn)):not(:has(.aa-obra-cabeca)){
  display:none !important;
}

body.aa-embebida .aa-topo--pagina{
  background:none;color:var(--aa-ink);padding-block:0 4px;margin:0;
}
body.aa-embebida .aa-topo--pagina::before,
body.aa-embebida .aa-topo--pagina::after{display:none}
body.aa-embebida .aa-pagina-titulo{font-size:clamp(1.5rem,3vw,2rem);color:var(--aa-ink)}
body.aa-embebida .aa-pagina-texto .aa-lead{display:none}
body.aa-embebida .aa-eyebrow{color:var(--aa-red)}

/* O topo vermelho não se desfaz aqui a regra a regra: quem embebe tira a
   classe `aa-hero-escuro` do body (ver embebido.js) e a página cai no topo
   claro que já tem. Ficam só os acertos de quem está dentro de outra. */
body.aa-embebida .aa-pagina-cabeca{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
}
/* Sem o título ao lado, o botão fica sozinho na linha: encosta-se ao fim, que
   é onde quem o procura olha. */
body.aa-embebida:not(.aa-enc-detalhe) .aa-pagina-cabeca{justify-content:flex-end;padding-top:4px}
/* Algumas páginas colam o botão do topo ao fundo da folha vermelha, em vidro
   (é o caso das contas). Sem folha, esse botão ficava branco sobre papel e a
   flutuar. Aqui volta a ser um botão, no seu lugar. Nomeiam-se classes que
   cheguem para ganhar às regras de cada página, que carregam depois desta. */
body.aa-embebida .aa-topo--pagina .aa-pagina-cabeca > .aa-btn{
  position:static;inset:auto;width:auto;height:auto;margin:0;
  padding:10px 18px;border-radius:999px;font-size:.88rem;
  border:1px solid var(--aa-line-strong);background:transparent;color:var(--aa-ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.aa-embebida .aa-topo--pagina .aa-pagina-cabeca > .aa-btn:hover{
  background:rgba(22,18,15,.04);color:var(--aa-ink);
}