/* ==========================================================================
   bpw.css, sistema visual unico do BestPDFInTheWorld
   --------------------------------------------------------------------------
   Este ficheiro e a UNICA folha de estilo do site. Substitui os antigos
   neobrutalism.css e neobrutalism-tilt.css, e substitui tambem o bloco
   <style> gigante que vivia dentro do app.html (que era um tema escuro
   repintado a golpes de !important).

   Regra que nao se quebra: nenhuma pagina volta a ter <style> proprio nem
   atributos style= decorativos. Se um elemento precisa de aspeto novo, cria-se
   aqui uma classe. E assim que as paginas se mantem iguais umas as outras.

   Ordem das seccoes (usa o indice para saltar):
     01. Tokens e reset
     02. Tipografia base
     03. Layout, wrap e seccoes
     04. Botoes
     05. Cabecalho, navegacao e menu de telemovel
     06. Hero
     07. Cartao ilustrativo do hero
     08. Marquee
     09. Cartoes (landing e grelha da app partilham o mesmo cartao)
     10. Grelha de ferramentas da app
     11. Passos numerados
     12. Tabela de precos
     13. Bloco de chamada final
     14. Texto corrido (privacidade, vender, paginas legais)
     15. Painel da ferramenta (drop, ficheiros, opcoes, resultado)
     16. Ferramenta de assinatura
     17. Rodape
     18. Faixas fixas (instalar PWA, licenca)
     19. Utilitarios
     20. Movimento reduzido e impressao

   Sobre as inclinacoes: o dono pediu caixas ligeiramente inclinadas. O angulo
   vem sempre de var(--rk), um multiplicador global. Em telemovel o --rk desce
   para as caixas empilhadas nao roubarem largura ao ecra, e em
   prefers-reduced-motion vai a zero. Nunca escrever um rotate() com valor fixo:
   usa-se sempre calc(Xdeg * var(--rk)), senao perde-se este controlo.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS E RESET
   ========================================================================== */

:root{
  /* Paleta. Vinculativa pelo CLAUDE.md do projeto: nao se introduzem cores
     novas fora destes tokens. */
  --yellow:#FDC800;   /* primario, superficie de destaque */
  --ink:#1C293C;      /* texto e todos os contornos */
  --blue:#432DD7;     /* acento, CTA secundario */
  --indigo:#432DD7;   /* alias de --blue, mantido porque a app ja o usava */
  --pink:#FF6B9D;     /* acento quente */
  --green:#16A34A;    /* sucesso, so' marcas sem texto, ver regra abaixo */
  --coral:#EF4D2E;    /* erro, perigo, so' marcas e texto sobre creme */

  /* ------------------------------------------------------------------------
     REGRA DE CONTRASTE, medida e nao estimada (WCAG AA, minimo 4.5:1 para
     texto normal). Os pares desta paleta dao isto:

       ink sobre creme    14.2   ink sobre branco   14.7
       ink sobre amarelo   9.4   ink sobre rosa      5.5
       branco sobre azul   8.1   amarelo sobre ink   9.4
       ink sobre verde     4.5 (falha por 0.05)      branco sobre verde  3.3
       branco sobre rosa   2.7 (ilegivel)            ink sobre coral     4.0

     Daqui saem duas leis:

     1. Superficie ROSA leva SEMPRE texto ink, nunca branco. Branco sobre rosa
        da 2.7:1, que e' ilegivel a serio, nao "quase".
     2. VERDE e CORAL nao carregam texto. Servem para barras, quadrados de
        lista, tracos de icone e contornos. Onde era preciso um selo verde com
        texto, usa-se fundo ink (que contrasta com tudo) e reserva-se o verde
        para a marca ao lado.

     Se acrescentares uma superficie nova, mede o par antes de a usar. Foi por
     nao medir que 12 blocos de texto passaram no olho e falharam no medidor.
     ------------------------------------------------------------------------ */
  --bg:#FBFBF9;       /* superficie creme, nunca branco puro no fundo */
  --white:#fff;       /* so para superficies de cartao sobre o creme */

  /* Sombras duras. Nunca usar sombra difusa: e a assinatura do estilo. */
  --sh:6px 6px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);

  /* Geometria */
  --bd:3px;           /* espessura padrao do contorno */
  --r:14px;           /* raio padrao */
  --r-sm:8px;
  --maxw:1140px;

  /* Multiplicador global das inclinacoes, ver nota no topo do ficheiro. */
  --rk:1;

  /* Forca o esquema claro. Sem isto o modo escuro do sistema torna ilegiveis
     os controlos nativos (select, option, input date) sobre o fundo creme. */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

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

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
  /* overflow-x travado porque as caixas inclinadas podem transbordar alguns
     pixeis nas laterais em ecras estreitos. */
  overflow-x:hidden;
  /* Rodape sempre no fim mesmo em paginas curtas, sem recorrer a position:fixed
     (que em telemovel roubava 90px de altura util). */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Grelha de pontos, a textura de fundo do site inteiro.
   Vive numa camada propria por baixo do conteudo, e nao no background-image do
   body, por uma razao concreta: com o gradiente aplicado ao body, os
   verificadores de contraste (e alguns leitores) resolvem o fundo do texto
   como sendo a cor dos pontos (ink sobre ink, 1:1) e dao por ilegivel um texto
   que na realidade assenta sobre creme. Fixed em vez de rolar com a pagina,
   para o padrao nao "nadar" durante o scroll. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--bg);
  background-image:radial-gradient(var(--ink) .9px,transparent .9px);
  background-size:26px 26px;
  background-position:-3px -3px;
  opacity:.5;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

/* Foco visivel e consistente. Requisito de acessibilidade: quem navega por
   teclado tem de ver sempre onde esta. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

/* Alvos de toque com 44px minimos em telemovel, recomendacao WCAG 2.5.5. */
@media(pointer:coarse){
  a,button,label,summary,[role=button]{min-height:44px}
  .navlinks a,.btn,.card,.tool{min-height:44px}
}


/* ==========================================================================
   02. TIPOGRAFIA BASE
   ========================================================================== */

h1,h2,h3,h4,.disp{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.05;
}

h1{font-size:clamp(38px,6.2vw,72px);font-weight:800}
h2{font-size:clamp(28px,4.6vw,48px)}
h3{font-size:clamp(19px,2.2vw,22px)}
h4{font-size:18px}

p{font-size:clamp(15px,1.4vw,17px)}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* Etiqueta pequena em maiusculas, o rotulo que abre cada seccao. */
.kicker{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--yellow);
  padding:6px 12px;
  border-radius:var(--r-sm);
  transform:rotate(calc(-1.5deg * var(--rk)));
}
.kicker.k-green{background:var(--white);color:var(--ink);border:2px solid var(--green)}
.kicker.k-yellow{background:var(--yellow);color:var(--ink);border:2px solid var(--ink)}
.kicker.k-blue{background:var(--blue);color:var(--white)}

/* Realce em caixa amarela inclinada. E a marca visual do produto: o "PDF" do
   logotipo, os numeros de preco, as palavras que interessam. */
.hl{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  padding:0 10px;
  /* Folga lateral: a caixa esta inclinada, e sem isto os cantos encostavam a
     palavra seguinte quando o realce aparece no meio de uma frase. */
  margin:0 3px;
  border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sh);
  transform:rotate(calc(-2deg * var(--rk)));
}
.hl.big{font-size:1.16em;padding:0 16px;transform:rotate(calc(-2.5deg * var(--rk)))}
.hl.pink{background:var(--pink);color:var(--ink)}
.hl.blue{background:var(--blue);color:var(--white)}


/* ==========================================================================
   03. LAYOUT, WRAP E SECCOES
   ========================================================================== */

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* O main cresce para empurrar o rodape para baixo em paginas curtas. */
main{flex:1 0 auto;width:100%}

section{padding:clamp(44px,7vw,74px) 0}
section.tight{padding:clamp(28px,4vw,44px) 0}

/* Cabecalho de seccao: kicker, titulo, uma linha de apoio. */
.sec-head{margin-bottom:clamp(28px,4vw,42px);max-width:640px}
.sec-head h2{margin-top:14px}
.sec-head p{font-weight:500;margin-top:12px;opacity:.8}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}


/* ==========================================================================
   04. BOTOES
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  padding:14px 24px;
  border:var(--bd) solid var(--ink);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--sh);
  text-align:center;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
/* O botao "sobe" ao passar o rato e "afunda" ao carregar. E o feedback fisico
   que o estilo pede: a sombra dura muda de tamanho em vez de desfocar. */
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--sh)}

.btn-y{background:var(--yellow);color:var(--ink)}
.btn-b{background:var(--blue);color:var(--white)}
.btn-w{background:var(--white);color:var(--ink)}
.btn-g{background:var(--ink);color:var(--white);box-shadow:var(--sh),inset 0 0 0 3px var(--green)}
.btn-ink{background:var(--ink);color:var(--yellow)}

.btn-sm{padding:9px 16px;font-size:13px;box-shadow:var(--sh-sm)}
.btn-sm:hover{box-shadow:5px 5px 0 var(--ink)}

/* Botao em bloco: ocupa a linha toda. Usa-se em telemovel para o CTA principal
   nao ficar um alvo pequeno ao lado de outro. */
.btn-block{width:100%}


/* ==========================================================================
   05. CABECALHO, NAVEGACAO E MENU DE TELEMOVEL
   ========================================================================== */

.bar{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--bg);
  border-bottom:var(--bd) solid var(--ink);
}
.bar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:68px;
}

/* Marca: icone em caixa amarela inclinada + nome. */
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:-.03em;
  flex-shrink:0;
}
.brand .logo{
  width:38px;height:38px;flex:none;
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  background:var(--yellow);
  display:grid;place-items:center;
  box-shadow:var(--sh-sm);
  transform:rotate(calc(-3deg * var(--rk)));
}
.brand .logo svg{width:20px;height:20px}

/* O nome por extenso ocupa cerca de 175px. Somado ao botao de conta, ao
   selector de idioma e ao botao de menu, a barra deixava de caber num
   telemovel e a pagina inteira ganhava rolamento horizontal. Reduz-se por
   patamares e, em ecras muito estreitos, fica so o quadrado amarelo, que
   continua a ser uma ligacao para a pagina inicial. */
@media(max-width:900px){
  .brand{font-size:17px;gap:9px}
  .navwrap{gap:8px}
}
@media(max-width:520px){
  /* font-size:0 esconde o texto sem o tirar do documento: os leitores de ecra
     continuam a anunciar "BestPDFInTheWorld". */
  .brand{font-size:0;gap:0}
  .brand .logo{width:40px;height:40px}
  .nav-conta{font-size:12px;padding:7px 10px;max-width:120px}
  .nav-lang{padding:7px 9px}
}

.navwrap{display:flex;align-items:center;gap:14px}

.navlinks{display:flex;align-items:center;gap:6px}
.navlinks a{
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border:2px solid transparent;
  border-radius:var(--r-sm);
  white-space:nowrap;
  transition:background .12s ease,border-color .12s ease;
}
.navlinks a:hover{background:var(--yellow);border-color:var(--ink)}
/* Pagina actual: o utilizador tem de saber sempre onde esta. */
.navlinks a[aria-current=page]{background:var(--yellow);border-color:var(--ink)}

/* Seletor de idioma e botao de conta, sempre visiveis (nao entram no menu). */
.nav-lang,
.nav-conta{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  padding:7px 11px;
  border:2px solid var(--ink);
  border-radius:var(--r-sm);
  background:var(--yellow);
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transform:rotate(calc(2deg * var(--rk)));
  transition:transform .12s ease;
}
.nav-lang:hover,.nav-conta:hover{transform:rotate(0deg) translate(-1px,-1px)}
.nav-conta{background:var(--white);text-transform:none;font-size:13px}
/* Com sessao iniciada o botao mostra o email, que pode ser longo. */
.nav-conta.on{background:var(--ink);color:var(--white);max-width:190px;overflow:hidden;text-overflow:ellipsis}

/* Botao de tres barras. Escondido em ecra largo, e o unico acesso ao menu em
   telemovel. Antes disto o menu simplesmente desaparecia abaixo de 900px. */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  padding:0;
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-sm);
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:20px;height:3px;
  margin:0 auto;
  background:var(--ink);
  border-radius:2px;
  transition:transform .18s ease,opacity .18s ease;
}
/* Tres barras viram um X quando o menu esta aberto. */
.hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:900px){
  .hamburger{display:flex}
  /* O menu passa a gaveta que desce por baixo da barra. */
  .navlinks{
    display:none;
    position:absolute;
    top:68px;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    background:var(--bg);
    border-bottom:var(--bd) solid var(--ink);
    padding:16px 22px 20px;
    box-shadow:0 10px 0 rgba(28,41,60,.08);
  }
  .navlinks.on{display:flex}
  .navlinks a{
    padding:13px 14px;
    border:2px solid var(--ink);
    background:var(--white);
    box-shadow:var(--sh-sm);
    font-size:16px;
  }
}


/* ==========================================================================
   06. HERO
   ========================================================================== */

.hero{
  position:relative;
  padding:clamp(40px,6vw,74px) 0 clamp(36px,5vw,60px);
  border-bottom:var(--bd) solid var(--ink);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,50px);
  align-items:center;
}
/* Variante de coluna unica, para as paginas interiores que nao tem ilustracao. */
.hero.solo .wrap{grid-template-columns:1fr;max-width:820px;text-align:center;justify-items:center}

.hero h1{margin-top:20px}
/* O h1 da landing e o logotipo empilhado: BEST / PDF / INTHEWORLD.
   Chama-se "wordmark" e nao "stack" de proposito: existe um utilitario .stack
   (display:grid) na seccao 19, e quando as duas classes tinham o mesmo nome o
   h1 virava grelha e a caixa amarela do PDF esticava a toda a largura da
   coluna. Nao renomear isto de volta. */
.hero h1.wordmark{line-height:.92;font-size:clamp(42px,8vw,86px)}

.hero .sub{
  font-size:clamp(16px,1.7vw,19px);
  font-weight:500;
  margin:24px 0 30px;
  max-width:520px;
  opacity:.85;
}
.hero.solo .sub{margin-left:auto;margin-right:auto}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero.solo .hero-cta{justify-content:center}

/* Selo de privacidade, o argumento central do produto. */
.priv{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  font-size:13px;
  font-weight:700;
  background:var(--yellow);
  color:var(--ink);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);
  padding:9px 15px;
  box-shadow:var(--sh-sm);
  transform:rotate(calc(-1.2deg * var(--rk)));
}
.priv svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;text-align:left}
  /* Os dois botoes repartem a linha e crescem ate encher. */
  .hero-cta .btn{flex:1 1 190px}
}
@media(max-width:520px){
  .hero-cta{flex-direction:column}
  /* Com a coluna na vertical, o eixo principal passa a ser a altura: manter o
     flex-basis de 190px daria botoes de 190px de ALTO. Repor o basis. */
  .hero-cta .btn{flex:0 0 auto;width:100%}
}


/* ==========================================================================
   07. CARTAO ILUSTRATIVO DO HERO
   ========================================================================== */

.hero-art{
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh-lg);
  padding:20px;
  transform:rotate(calc(1.6deg * var(--rk)));
}
.hero-art .row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  margin-bottom:12px;
  font-weight:700;
  font-size:15px;
}
.hero-art .row:last-child{margin-bottom:0}
.hero-art .chip{
  width:34px;height:34px;flex:none;
  border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}
.hero-art .meter{
  flex:1;
  min-width:0;
  height:12px;
  border:2px solid var(--ink);
  border-radius:999px;
  overflow:hidden;
  background:var(--white);
}
.hero-art .meter i{display:block;height:100%}

/* Cores dos chips e das barras, por posicao. Ciclo fixo para o cartao ter
   sempre o mesmo aspeto sem precisar de style= no HTML. */
/* As letras dos chips seguem a regra de contraste: ink em tudo menos no azul.
   O verde e o rosa continuam presentes, nas barras, onde nao carregam texto. */
.hero-art .row:nth-child(1) .chip{background:var(--yellow)}
.hero-art .row:nth-child(1) .meter i{background:var(--green);width:95%}
.hero-art .row:nth-child(2) .chip{background:var(--pink)}
.hero-art .row:nth-child(2) .meter i{background:var(--blue);width:82%}
.hero-art .row:nth-child(3) .chip{background:var(--blue);color:var(--white)}
.hero-art .row:nth-child(3) .meter i{background:var(--yellow);width:90%}
.hero-art .row:nth-child(4) .chip{background:var(--white)}
.hero-art .row:nth-child(4) .meter i{background:var(--pink);width:77%}

@media(max-width:900px){
  /* Em telemovel a ilustracao passa a ser secundaria: menos inclinacao e menos
     peso visual, para nao competir com o CTA. */
  .hero-art{transform:rotate(calc(.8deg * var(--rk)));padding:16px}
  .hero-art .row{font-size:14px}
}


/* ==========================================================================
   08. MARQUEE
   ========================================================================== */

.marquee{
  border-top:var(--bd) solid var(--ink);
  border-bottom:var(--bd) solid var(--ink);
  background:var(--ink);
  color:var(--yellow);
  overflow:hidden;
  white-space:nowrap;
}
.marquee div{
  display:inline-block;
  padding:13px 0;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  animation:bpw-scroll 26s linear infinite;
}
.marquee span{padding:0 26px}
@keyframes bpw-scroll{to{transform:translateX(-50%)}}


/* ==========================================================================
   09. CARTOES
   --------------------------------------------------------------------------
   .card e .tool sao o MESMO cartao. A landing escreve .card no HTML e o
   JavaScript da app gera .tool: em vez de manter dois desenhos, os dois
   seletores partilham as regras todas. Nao separar outra vez.
   ========================================================================== */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:20px;
}

.card,
.tool{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  background:var(--white);
  color:var(--ink);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:22px 20px;
  cursor:pointer;
  /* min-width:0 impede o conteudo longo de esticar a celula da grelha e criar
     scroll horizontal. Ver regra da casa sobre responsivo. */
  min-width:0;
  font:inherit;
  transition:transform .14s ease,box-shadow .14s ease;
}
.card:hover,
.tool:hover{transform:rotate(0deg) translate(-3px,-3px);box-shadow:var(--sh-lg)}
.card:active,
.tool:active{transform:rotate(0deg) translate(2px,2px);box-shadow:var(--sh-sm)}

/* Inclinacao alternada. O ciclo de 4 evita que duas caixas vizinhas fiquem
   inclinadas para o mesmo lado, que era o que dava ar de erro. */
.card:nth-child(4n+1),.tool:nth-child(4n+1){transform:rotate(calc(-1.1deg * var(--rk)))}
.card:nth-child(4n+2),.tool:nth-child(4n+2){transform:rotate(calc(1.4deg * var(--rk)))}
.card:nth-child(4n+3),.tool:nth-child(4n+3){transform:rotate(calc(-1.6deg * var(--rk)))}
.card:nth-child(4n+4),.tool:nth-child(4n+4){transform:rotate(calc(.9deg * var(--rk)))}

/* Ciclo de cor de fundo. Sem isto os cartoes ficavam todos brancos e o
   catalogo lia-se como uma lista de sistema, nao como um produto.
   O verde saiu do ciclo de proposito: um cartao carrega titulo de 18px e
   descricao de 14px, e nenhuma cor de texto desta paleta chega a 4.5:1 sobre
   verde (ink da 4.45, branco da 3.30). O creme mantem cinco superficies
   distintas sem partir a legibilidade. Ver a regra de contraste no topo. */
.cards .card:nth-child(5n+1),.grid .tool:nth-child(5n+1){background:var(--yellow)}
.cards .card:nth-child(5n+2),.grid .tool:nth-child(5n+2){background:var(--pink)}
.cards .card:nth-child(5n+3),.grid .tool:nth-child(5n+3){background:var(--blue);color:var(--white)}
.cards .card:nth-child(5n+4),.grid .tool:nth-child(5n+4){background:var(--bg)}
.cards .card:nth-child(5n+5),.grid .tool:nth-child(5n+5){background:var(--white)}

/* Icone do cartao, sempre em caixa branca contornada para funcionar sobre
   qualquer uma das cinco cores de fundo. */
.card .ico,
.tool .ico{
  width:46px;height:46px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:var(--white);
  display:grid;place-items:center;
  margin-bottom:14px;
  box-shadow:var(--sh-sm);
  pointer-events:none;
}
.card .ico svg,
.tool .ico svg{
  width:22px;height:22px;
  stroke:var(--ink);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

.card h3,
.tool h3{font-size:18px;margin-bottom:5px;pointer-events:none}
.card p,
.tool p{font-size:14px;font-weight:500;opacity:.8;line-height:1.45;pointer-events:none}

/* Etiqueta de categoria, dentro do fluxo do cartao. */
.card .tag,
.tool .tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.04em;
  background:var(--white);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:3px 8px;
  margin-bottom:10px;
  pointer-events:none;
}

/* Selo de plano, no canto superior direito e inclinado ao contrario do cartao
   para se destacar. */
.card .plan,
.tool .plan{
  position:absolute;
  top:12px;right:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 8px;
  border:2px solid var(--ink);
  border-radius:6px;
  background:var(--pink);
  color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  transform:rotate(calc(3deg * var(--rk)));
  pointer-events:none;
}
/* Selo do gratuito: fundo ink, que contrasta com as cinco superficies do ciclo
   e com o rosa do selo Premium ao lado. Nao leva fundo verde porque o texto e'
   de 10px e nenhuma cor chega a 4.5:1 sobre verde. */
.card .plan.free,
.tool .plan.free{background:var(--ink);color:var(--white);transform:rotate(calc(-3deg * var(--rk)))}

/* Estados especiais da grelha da app. */
.tool.soon,.card.soon{opacity:.55;cursor:default}
.tool.soon:hover,.card.soon:hover{transform:none;box-shadow:var(--sh)}
.tool.locked{cursor:pointer}

/* Cartao de destaque: ocupa duas colunas em ecra largo. */
@media(min-width:721px){
  .card.big{grid-column:span 2}
}


/* ==========================================================================
   10. GRELHA DE FERRAMENTAS DA APP
   ========================================================================== */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
  gap:18px;
}

/* Titulo de categoria em fita, o separador entre grupos de ferramentas. */
.cat-h{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--yellow);
  border-radius:var(--r-sm);
  padding:6px 13px;
  margin:0 0 18px 2px;
  transform:rotate(calc(-1.5deg * var(--rk)));
}
/* Espaco antes de cada categoria a partir da segunda. */
.cat-h+.grid{margin-bottom:0}
.cat-h.spaced{margin-top:44px}


/* ==========================================================================
   11. PASSOS NUMERADOS
   ========================================================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:22px;
}
.step{
  position:relative;
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:26px 22px 22px;
  min-width:0;
}
.step:nth-child(odd){transform:rotate(calc(-.9deg * var(--rk)))}
.step:nth-child(even){transform:rotate(calc(1.1deg * var(--rk)))}
.step .num{
  position:absolute;
  top:-17px;left:18px;
  width:38px;height:38px;
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:17px;
  box-shadow:var(--sh-sm);
  transform:rotate(calc(-4deg * var(--rk)));
}
.step:nth-child(1) .num{background:var(--yellow)}
.step:nth-child(2) .num{background:var(--pink)}
.step:nth-child(3) .num{background:var(--blue);color:var(--white)}
.step:nth-child(4) .num{background:var(--white);color:var(--ink);box-shadow:var(--sh-sm),inset 0 -5px 0 var(--green)}
.step h4{margin:14px 0 6px}
.step p{font-size:14.5px;font-weight:500;opacity:.8}


/* ==========================================================================
   12. TABELA DE PRECOS
   ========================================================================== */

.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:24px;
  max-width:760px;
}
.plans.center{margin-left:auto;margin-right:auto}

.plan-card{
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:28px 24px;
  min-width:0;
  transform:rotate(calc(-.8deg * var(--rk)));
}
/* O plano recomendado destaca-se por cor e por sombra maior, nao por tamanho:
   assim as duas colunas continuam alinhadas. */
.plan-card.featured{
  background:var(--yellow);
  box-shadow:var(--sh-lg);
  transform:rotate(calc(1.2deg * var(--rk)));
}
.plan-card .price{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  font-size:38px;
  letter-spacing:-.03em;
  margin:16px 0 2px;
}
.plan-card .per{font-size:14px;font-weight:600;opacity:.7;margin-bottom:18px}
.plan-card ul{list-style:none;display:grid;gap:10px;margin-bottom:24px}
.plan-card li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;font-weight:500;
}
.plan-card li::before{
  content:"";
  flex:none;
  width:16px;height:16px;
  margin-top:3px;
  border:2px solid var(--ink);
  border-radius:5px;
  background:var(--green);
}
.plan-card li.off{opacity:.45}
.plan-card li.off::before{background:transparent}

/* Linha dos meios de pagamento. */
.payline{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;font-size:13px;font-weight:600;opacity:.75;
}
.payline .mono{font-weight:700}


/* ==========================================================================
   13. BLOCO DE CHAMADA FINAL
   ========================================================================== */

.cta{
  background:var(--blue);
  color:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:24px;
  box-shadow:var(--sh-lg);
  padding:clamp(36px,6vw,60px) clamp(22px,4vw,34px);
  text-align:center;
  transform:rotate(calc(-.6deg * var(--rk)));
}
.cta h2{margin-bottom:16px}
.cta p{font-weight:600;font-size:clamp(15px,1.6vw,18px);margin:0 auto 28px;max-width:480px;opacity:.92}


/* ==========================================================================
   14. TEXTO CORRIDO
   --------------------------------------------------------------------------
   Usado nas paginas legais e de venda. Ate aqui essas paginas resolviam a
   formatacao com style= no HTML, o que era a razao de nao ficarem iguais.
   ========================================================================== */

.prose{
  max-width:760px;
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:clamp(24px,4vw,40px);
}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(22px,3vw,30px);margin-top:34px}
.prose h3{font-size:19px;margin-top:26px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:15.5px;font-weight:500;line-height:1.7}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{background:var(--yellow)}
.prose strong{font-weight:800}
.prose code{
  font-family:'JetBrains Mono',monospace;font-size:13.5px;
  background:var(--bg);border:2px solid var(--ink);border-radius:6px;padding:1px 6px;
}
/* Tabelas dentro de texto corrido: rolam sozinhas em vez de esticarem a pagina. */
.prose .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;min-width:420px}
.prose th,.prose td{
  border:2px solid var(--ink);padding:10px 12px;
  font-size:14px;text-align:left;font-weight:500;
}
.prose th{background:var(--yellow);font-weight:800}

/* Caixa de destaque dentro do texto. */
.note{
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  background:var(--yellow);
  box-shadow:var(--sh-sm);
  padding:18px 20px;
  font-weight:600;
  font-size:14.5px;
  transform:rotate(calc(-.7deg * var(--rk)));
}
.note.blue{background:var(--blue);color:var(--white)}
.note.green{background:var(--white);color:var(--ink);border-color:var(--green)}

/* Pergunta e resposta, para as seccoes de duvidas frequentes. */
.faq{display:grid;gap:14px;max-width:760px}
.faq details{
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:16px 20px;
}
.faq summary{
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:16px;
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{margin-bottom:10px}
.faq p{font-size:15px;font-weight:500;opacity:.85}


/* ==========================================================================
   15. PAINEL DA FERRAMENTA
   ========================================================================== */

/* Estado "a trabalhar": ha uma ferramenta aberta.
   O hero da aplicacao e util para quem chega ao catalogo, mas assim que se
   escolhe uma ferramenta passa a ser so altura desperdicada entre a barra e a
   zona de largar ficheiros. Em telemovel chegava a empurrar essa zona para
   fora do ecra, obrigando a rolar antes de poder fazer o que se veio fazer. */
body.a-trabalhar .hero{
  padding:0;
  border-bottom:0;
}
body.a-trabalhar .hero .wrap{display:none}

.panel{display:none}
.panel.on{display:block;animation:bpw-up .28s ease both}
@keyframes bpw-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Botao de voltar ao catalogo. */
.back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:13px;
  background:var(--white);
  color:var(--ink);
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-sm);
  padding:9px 15px;
  margin-bottom:22px;
  cursor:pointer;
  transform:rotate(calc(-1.4deg * var(--rk)));
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.back:hover{transform:rotate(0deg) translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
.back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}

.panel h2{margin:0}
.panel .pdesc{margin:10px 0 26px;max-width:620px;font-weight:500;opacity:.8}

/* Zona de largar ficheiros. */
.drop{
  display:block;
  border:var(--bd) dashed var(--ink);
  border-radius:var(--r);
  background:var(--yellow);
  box-shadow:var(--sh);
  padding:clamp(28px,5vw,40px) 22px;
  text-align:center;
  cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.drop:hover,.drop.over{background:var(--pink);box-shadow:var(--sh-lg);transform:translate(-2px,-2px)}
.drop .dico{width:46px;height:46px;margin:0 auto 12px;stroke:var(--ink);fill:none;stroke-width:2}
.drop b{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:17px}
.drop span{display:block;font-size:13.5px;font-weight:500;opacity:.75;margin-top:5px}
.drop input{display:none}

/* Lista de ficheiros escolhidos. */
.files{display:grid;gap:10px;margin-top:18px}
.file{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-sm);
  padding:11px 14px;
  font-size:14px;font-weight:600;
  min-width:0;
}
.file .nm{display:flex;align-items:center;gap:9px;min-width:0}
.file .nm svg{width:17px;height:17px;flex:none;stroke:var(--ink);fill:none;stroke-width:2}
.file .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .sz{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.7;flex:none}

/* Campos de opcao da ferramenta. */
.opts{display:grid;gap:18px;margin-top:24px}
.opt label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.opt input,.opt select,.opt textarea{
  width:100%;
  background:var(--white);
  color:var(--ink);
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  padding:12px 14px;
  font-family:'Inter',sans-serif;
  /* 16px evita o zoom automatico do iOS ao focar um campo. */
  font-size:16px;
  box-shadow:var(--sh-sm);
}
.opt input:focus,.opt select:focus,.opt textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:var(--sh-sm),0 0 0 3px rgba(67,45,215,.18);
}
.opt .hint{font-size:13px;font-weight:500;opacity:.7;margin-top:6px}

/* Botao que executa a ferramenta. */
.run{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);color:var(--white);
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:16px;
  border:var(--bd) solid var(--ink);
  border-radius:12px;
  box-shadow:var(--sh);
  padding:15px 28px;
  margin-top:26px;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.run:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.run:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.run:disabled{opacity:.45;cursor:not-allowed}
.run svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4}
/* Em telemovel o botao principal ocupa a linha toda: e o alvo mais importante. */
@media(max-width:640px){.run{width:100%}}

/* Linha de estado. */
.status{margin-top:20px;font-size:14.5px;font-weight:600;min-height:22px}
/* A linha de estado pode trazer um convite a assinar. O estilo vive aqui e nao
   num style= dentro do JavaScript, para acompanhar os tokens como tudo o resto. */
.status a{color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.status a:hover{background:var(--yellow);color:var(--ink)}
.status.err{color:var(--coral);font-weight:800}
.status.ok{color:var(--green);font-weight:800}

/* Resultado, ligacoes de descarga. */
.out{display:grid;gap:12px;margin-top:20px}
.dl{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--white);color:var(--ink);
  border:var(--bd) solid var(--green);
  border-radius:12px;
  box-shadow:var(--sh);
  padding:14px 17px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  min-width:0;
}
/* O texto tem de virar branco junto com o fundo: ink sobre azul da 1.81:1. */
.dl:hover{background:var(--blue);color:var(--white);border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.dl .l{display:flex;align-items:center;gap:11px;font-weight:800;font-size:14.5px;min-width:0}
.dl .l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .l svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}
.dl .a{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;text-decoration:underline;flex:none}

.spin{animation:bpw-spin 1s linear infinite}
@keyframes bpw-spin{to{transform:rotate(360deg)}}


/* ==========================================================================
   16. FERRAMENTA DE ASSINATURA
   ========================================================================== */

#mp-custom{display:none}

.sign-wrap{display:grid;gap:20px;margin-top:10px}
@media(min-width:900px){.sign-wrap{grid-template-columns:1.45fr 1fr;align-items:start}}

.sign-stage{
  position:relative;
  border:var(--bd) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--sh);
  overflow:hidden;
  background:var(--white);
  line-height:0;
}
.sign-stage canvas.pg{display:block;width:100%;height:auto;touch-action:none}

.sign-mark{
  position:absolute;
  cursor:grab;
  border:2px dashed var(--ink);
  border-radius:4px;
  touch-action:none;
  line-height:0;
}
.sign-mark.drag{cursor:grabbing;border-style:solid}
.sign-mark img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Puxador de redimensionar. 18px para continuar agarravel com o dedo. */
.sign-mark .hd{
  position:absolute;right:-10px;bottom:-10px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--yellow);
  border:2px solid var(--ink);
  cursor:nwse-resize;
  touch-action:none;
}

.sign-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:13px;font-weight:600}
.sign-nav button{
  width:40px;height:36px;
  background:var(--white);color:var(--ink);
  border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);
  font-size:17px;line-height:1;cursor:pointer;
}
.sign-nav button:disabled{opacity:.4;cursor:not-allowed}

.sign-side{display:grid;gap:16px}

/* Selector de tres modos: desenhar, escrever, carregar. */
.seg{display:flex;border:var(--bd) solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:var(--sh-sm)}
.seg button{
  flex:1;
  background:var(--white);color:var(--ink);
  border:none;border-right:var(--bd) solid var(--ink);
  padding:12px 8px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:background .12s ease;
}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--yellow)}

.padbox{
  position:relative;
  border:var(--bd) solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-sm);
  background:var(--white);
  overflow:hidden;line-height:0;
}
.padbox canvas{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair}
.padbox .clr{
  position:absolute;top:8px;right:8px;
  background:var(--white);border:2px solid var(--ink);border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  padding:5px 10px;cursor:pointer;
}
.padbox .ph{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:13px;font-weight:600;opacity:.35;
  pointer-events:none;font-family:'Space Grotesk',sans-serif;
}

.sign-ink{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700}
.sign-ink button{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0}
.sign-ink button.on{box-shadow:0 0 0 3px var(--yellow);transform:scale(1.1)}

.sign-type{
  width:100%;
  background:var(--white);color:var(--ink);
  border:var(--bd) solid var(--ink);border-radius:10px;
  box-shadow:var(--sh-sm);
  padding:16px;
  font-size:30px;line-height:1.2;
  font-family:'Segoe Script','Brush Script MT',cursive;
}
.sign-type:focus{outline:none;border-color:var(--blue)}

.sign-up{
  display:block;
  border:var(--bd) dashed var(--ink);border-radius:10px;
  background:var(--white);
  padding:22px;text-align:center;cursor:pointer;
  font-size:14px;font-weight:600;
}
.sign-up:hover{background:var(--yellow)}
.sign-up input{display:none}

.sign-hint{font-size:13px;font-weight:500;opacity:.75;line-height:1.55}


/* ==========================================================================
   17. RODAPE
   ========================================================================== */

footer{
  flex-shrink:0;
  border-top:var(--bd) solid var(--ink);
  background:var(--yellow);
  padding:30px 0;
  margin-top:20px;
}
footer .foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  font-size:13.5px;font-weight:700;
}
footer .foot .brand{font-size:16px}
footer .footlinks{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
footer a{text-decoration:underline;text-underline-offset:3px}
footer a:hover{background:var(--ink);color:var(--yellow)}
footer .adm{font-size:11px;opacity:.5;text-decoration:underline}

@media(max-width:640px){
  footer .foot{flex-direction:column;align-items:flex-start;gap:14px}
}


/* ==========================================================================
   18. FAIXAS FIXAS
   ========================================================================== */

/* Convite a instalar a aplicacao. So aparece quando o browser o permite. */
.pwa-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:var(--bg);
  border-top:var(--bd) solid var(--ink);
  padding:14px 22px;
}
.pwa-banner.on{display:flex}
.pwa-banner .msg{font-weight:700;font-size:15px}
.pwa-banner .pwa-close{
  background:none;border:none;cursor:pointer;
  font-size:24px;font-weight:700;line-height:1;padding:4px 10px;color:var(--ink);
}

/* O paywall injeta o proprio CSS a partir de _licenca/bpw-licenca.js. Aqui so
   se garante que fica por cima do conteudo e por baixo do menu aberto. */
.bpwlic-pill{z-index:55}

/* --------------------------------------------------------------------------
   AVISO DE ARMAZENAMENTO LOCAL (primeira visita)
   --------------------------------------------------------------------------
   Desenho deliberado: os dois botoes tem o MESMO peso visual, o mesmo tamanho,
   o mesmo contorno e a mesma area de toque. Nao ha um botao grande e colorido
   a dizer que sim e uma ligacao cinzenta e pequena a dizer que nao.

   Isto nao e' preferencia estetica, e' requisito. As autoridades de protecao
   de dados europeias tratam como padrao escuro (e como consentimento invalido)
   qualquer desenho que torne recusar mais dificil do que aceitar. Se um dia
   este aviso passar a pedir consentimento a serio, o desenho ja esta correcto
   e nao ha a tentacao de "so' desta vez" destacar o aceitar.

   Fica no fundo do ecra e nao bloqueia a pagina: nao e' um muro. Quem quiser
   ignorar consegue usar o site na mesma, porque nada do que o site guarda
   depende de resposta a este aviso. */
.aviso-dados{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:75;
  display:none;
  background:var(--bg);
  border-top:var(--bd) solid var(--ink);
  padding:18px 22px;
  box-shadow:0 -6px 0 rgba(28,41,60,.06);
}
.aviso-dados.on{display:block}

.aviso-dados .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.aviso-dados .texto{
  flex:1 1 420px;
  min-width:0;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
}
.aviso-dados .texto b{font-weight:800}
.aviso-dados .texto a{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.aviso-dados .texto a:hover{background:var(--yellow)}

/* Os botoes partilham a mesma classe base de propósito: qualquer futura
   alteracao de estilo apanha os dois ao mesmo tempo e nao pode desequilibrar
   um em relacao ao outro. */
.aviso-dados .accoes{
  display:flex;
  gap:12px;
  flex:0 0 auto;
}
.aviso-dados .accoes .btn{
  flex:1 1 auto;
  min-width:132px;
  font-size:14px;
  padding:12px 20px;
}

@media(max-width:640px){
  .aviso-dados{padding:16px}
  .aviso-dados .wrap{flex-direction:column;align-items:stretch;gap:14px}
  .aviso-dados .accoes .btn{flex:1 1 0}
}

/* Quem tem movimento reduzido nao leva a entrada animada. */
@media(prefers-reduced-motion:no-preference){
  .aviso-dados.on{animation:bpw-subir .3s ease both}
}
@keyframes bpw-subir{from{transform:translateY(100%)}to{transform:none}}

/* Janela modal, usada quando se atinge o limite diario de compressoes.
   Antes era construida a golpes de style= dentro do JavaScript, o que a fazia
   divergir do resto do site sempre que os tokens mudavam. */
.modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:rgba(28,41,60,.55);
}
.modal .box{
  width:100%;max-width:440px;
  background:var(--white);
  border:var(--bd) solid var(--ink);
  border-radius:18px;
  box-shadow:var(--sh-lg);
  padding:clamp(26px,5vw,34px) clamp(20px,4vw,30px);
  text-align:center;
  transform:rotate(calc(-.8deg * var(--rk)));
  /* Nunca mais alto que o ecra: em telemovel deitado o botao ficava fora. */
  max-height:calc(100vh - 44px);
  overflow-y:auto;
}
.modal .box .ico{margin:0 auto 16px}
.modal .box h2{font-size:23px;margin-bottom:10px}
.modal .box p{font-size:14.5px;font-weight:500;opacity:.8;margin-bottom:10px}
.modal .box p.small{font-size:13.5px;opacity:.7;margin-bottom:22px}
.modal .box .btn{margin-bottom:10px}
/* Recusa discreta, para nao ficar tao pesada como a accao principal. */
.modal .box .decline{
  background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--ink);opacity:.7;
  text-decoration:underline;text-underline-offset:3px;
  padding:8px 12px;
}
.modal .box .decline:hover{opacity:1}


/* ==========================================================================
   19. UTILITARIOS
   ========================================================================== */

.center{text-align:center}
.muted{opacity:.65}
.nowrap{white-space:nowrap}
.stack-sm{display:grid;gap:12px}
.stack{display:grid;gap:20px}
.row-gap{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.mt-lg{margin-top:34px}

/* Aparecimento ao rolar.
   O estado inicial so' e' aplicado quando o JavaScript marca o documento com
   .js-reveal. Sem isto, quem tenha o JavaScript desligado ficava com a pagina
   inteira invisivel, que e' a forma classica de partir um site com uma
   animacao. A classe .visivel e' posta pelo observador no bpw.js. */
/* ATENCAO ao uso de "translate" e nao de "transform" aqui dentro.
   Nao e' estilo, e' correccao de um defeito grave.

   A entrada usava transform:translateY(18px) e, ao ficar visivel,
   transform:none. Como ".js-reveal .reveal.visivel" tem especificidade maior
   (0,0,3,0) do que as regras de inclinacao como ".card:nth-child(4n+1)"
   (0,0,2,0), o transform:none ganhava e ENDIREITAVA a caixa. Resultado medido
   na auditoria de 2026-07-30: assim que um bloco entrava no ecra, perdia a
   inclinacao para sempre. Na pratica, quase todas as caixas do site ficavam
   direitas, e a inclinacao, que e' a primeira coisa que o dono pediu, so'
   sobrevivia na grelha de ferramentas da aplicacao, que nao usa reveal.

   "translate" e' uma propriedade independente, nao a funcao translate() dentro
   de transform. O browser aplica primeiro translate, rotate e scale
   individuais, e so' depois o transform. Por isso esta animacao COMPOE com a
   inclinacao em vez de a substituir, e as duas coexistem.

   Nunca voltar a por transform nestas duas regras. */
.js-reveal .reveal{
  opacity:0;
  translate:0 18px;
  transition:opacity .5s ease,translate .5s ease;
}
.js-reveal .reveal.visivel{opacity:1;translate:0 0}

/* Escalonamento dentro de uma grelha, para os cartoes nao entrarem todos ao
   mesmo tempo (o que le como um salto, nao como uma entrada). */
.js-reveal .reveal:nth-child(2){transition-delay:.06s}
.js-reveal .reveal:nth-child(3){transition-delay:.12s}
.js-reveal .reveal:nth-child(4){transition-delay:.18s}
.js-reveal .reveal:nth-child(5){transition-delay:.24s}

/* Visivel apenas para leitores de ecra. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Ligacao de salto, primeiro elemento focavel de cada pagina.
   Esconde-se com translate e nao com left:-9999px: a posicao negativa contava
   para a largura de rolamento do documento em alguns browsers e provocava
   rolamento horizontal fantasma. */
.skip{
  position:absolute;left:0;top:0;z-index:100;
  transform:translateY(-200%);
  background:var(--ink);color:var(--yellow);
  padding:12px 18px;font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{transform:translateY(0)}

.hide{display:none !important}


/* ==========================================================================
   20. MOVIMENTO REDUZIDO E IMPRESSAO
   ========================================================================== */

@media(prefers-reduced-motion:reduce){
  /* Inclinacoes a zero e animacoes praticamente instantaneas. Sem isto o
     marquee e as caixas tortas sao desconfortaveis para quem tem sensibilidade
     a movimento. */
  :root{--rk:0}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee div{animation:none;transform:none}
}

/* Em telemovel a inclinacao desce: caixas empilhadas e muito tortas roubam
   largura util e parecem defeito, nao estilo. */
@media(max-width:720px){
  :root{--rk:.55}
}
@media(max-width:420px){
  :root{--rk:.35}
  .wrap{padding:0 16px}
}

@media print{
  .bar,.marquee,.pwa-banner,.hamburger,footer{display:none !important}
  body{background:var(--white);background-image:none}
  .card,.tool,.prose,.step,.plan-card{box-shadow:none;transform:none}
}