/* tiraracarta.pt — css/pagina.css
   Caminho: public_html/css/pagina.css

   Aspeto do site: capa escura, faixa das línguas, cartão das perguntas,
   recursos numerados, rodapé e páginas de texto.

   Nota sobre o contraste: a página é escura, mas o CARTÃO DA PERGUNTA é
   claro de propósito. São 19 línguas, e as escritas finas — devanágari,
   bengali, tailandês — perdem-se em texto claro sobre fundo escuro. */

:root{
  /* O fundo é azul-petróleo muito escuro, não preto: com o azul
     fluorescente por cima, o preto puro dava um contraste duro e
     cansava em leituras longas. */
  --breu:#1D2C39;           /* fundo da página */
  --breu-claro:#273746;     /* blocos a destacar do fundo */
  --papel:#FFFCF5;          /* texto sobre o breu, e fundo do cartão */
  --tinta:#1A1614;          /* texto dentro do cartão */
  --tinta-fraca:#6B635C;
  --cinza:#8795A1;          /* texto secundário sobre o breu */
  --linha:#364B5C;          /* filetes sobre o breu */
  --linha-clara:#E2DACD;    /* filetes dentro do cartão */
  --marca:#3DE1FF;          /* azul fluorescente de marcador */
  --marca-forte:#00B8DE;
  --marca-escura:#06414F;   /* texto sobre o azul */
  --marca-fundo:#E2F9FF;
  --verde:#12A150;
  --verde-fundo:#E4F7EC;
  --vermelho:#E5342B;
  --vermelho-fundo:#FDECEA;
  --titulo:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --corpo:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
/* O atributo hidden tem de ganhar a qualquer display definido aqui,
   senão elementos escondidos pelo JS continuam à vista. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{background:var(--breu);color:var(--papel);font-family:var(--corpo);
     font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;}

.envelope{max-width:1100px;margin:0 auto;padding:0 22px;}

/* ---------- Topo ---------- */
.topo{display:flex;justify-content:space-between;align-items:center;
      padding:20px 0 0;gap:14px;}
.marca{font-family:var(--titulo);font-weight:800;font-size:21px;
       letter-spacing:-0.03em;color:var(--papel);text-decoration:none;}
.marca mark{color:var(--marca);}
.marca mark::before{display:none;}   /* sobre o breu, o traço não se vê */

/* O canto da direita: selector de língua e botão de entrar. */
.canto{display:flex;align-items:center;gap:10px;}

.lingua{background:none;border:1px solid var(--linha);border-radius:999px;
        font:inherit;font-size:16px;color:var(--cinza);cursor:pointer;
        padding:8px 16px;text-decoration:none;display:inline-block;
        white-space:nowrap;transition:border-color .15s,color .15s;}
.lingua:hover{border-color:var(--marca);color:var(--marca);}
.lingua::after{content:" \25BE";}

/* O nome da língua por extenso no ecrã grande, a sigla no telemóvel:
   "Português" ocupa o lugar que o botão de sair precisa. */
.lingua-sigla{display:none;}

/* Entrar: o único azul maciço do topo. Sair é discreto — quem já entrou
   não precisa de ser chamado a lado nenhum. */
.botao-topo{display:inline-block;text-decoration:none;
            background:var(--marca);color:var(--marca-escura);
            border:1px solid var(--marca);border-radius:999px;
            font-family:var(--titulo);font-weight:800;font-size:16px;
            letter-spacing:.02em;padding:8px 20px;white-space:nowrap;
            transition:background .15s,color .15s;}
.botao-topo:hover{background:var(--papel);border-color:var(--papel);color:var(--breu);}
.botao-topo-linha{background:none;border-color:var(--linha);color:var(--cinza);
                  font-weight:600;}
.botao-topo-linha:hover{background:none;border-color:var(--marca);color:var(--marca);}

/* ---------- Selector de línguas ---------- */
.seletor{position:relative;}
.linguas{position:absolute;top:calc(100% + 8px);right:0;z-index:10;
         list-style:none;margin:0;padding:6px;min-width:190px;
         max-height:60vh;overflow-y:auto;
         background:var(--breu-claro);border:1px solid var(--linha);
         box-shadow:0 14px 34px rgba(0,0,0,.5);}
.linguas li{margin:0;}
.linguas a{display:block;padding:9px 13px;color:var(--papel);
           text-decoration:none;font-size:15px;}
.linguas a:hover{background:var(--marca);color:var(--marca-escura);}
.linguas a.actual{color:var(--marca);}
.linguas a.actual:hover{color:var(--marca-escura);}

/* ---------- Capa ---------- */
.capa{padding:46px 0 0;}
.titulo{font-family:var(--titulo);font-weight:800;
        font-size:clamp(46px,12vw,150px);line-height:.86;
        letter-spacing:-0.065em;margin:0;text-transform:uppercase;
        color:var(--papel);}
.titulo span{display:block;color:var(--marca);}

/* A chamada, com a risca encostada. */
.subtitulo{display:flex;gap:20px;align-items:stretch;
           margin:32px 0 0;max-width:620px;font-size:21px;
           line-height:1.45;color:var(--papel);}
.subtitulo::before{content:"";width:4px;flex-shrink:0;background:var(--marca);}
.so-computador{display:none;}   /* no telemóvel o subtítulo vai mais curto */
.so-telemovel{display:inline;}

/* ---------- Faixa das línguas ---------- */
/* Sai da caixa do envelope de propósito: atravessa o ecrã todo. */
.faixa{margin:46px 0 0;background:var(--marca);color:var(--marca-escura);
       overflow:hidden;white-space:nowrap;padding:11px 0;
       transform:rotate(-3.2deg);
       font-family:var(--titulo);font-weight:800;font-size:26px;
       letter-spacing:-0.01em;}
.corre{display:inline-flex;animation:correr 46s linear infinite;}
.corre span{padding:0 20px;}
.corre i{font-style:normal;opacity:.4;}
@keyframes correr{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Painéis ---------- */
.painel{display:none;}
.painel.visivel{display:block;}
.palco{padding:74px 0 0;}

/* ---------- Cartão da pergunta ---------- */
/* O cartão não tem moldura própria: tem uma moldura solta por cima,
   grossa e fora de sítio. Sobe e vai para a esquerda, de modo que no
   canto de cima sai para fora do cartão e no canto de baixo entra por
   cima da fotografia e do texto. Mais a inclinação, que é o que a
   impede de parecer uma moldura mal programada.

   Dois números para afinar: a ESPESSURA (border-width) e o
   DESENCONTRO (os quatro valores de posição — negativos saem para
   fora, positivos entram para dentro). */
.zona-cartao{position:relative;}
.zona-cartao::after{content:"";position:absolute;z-index:2;
     top:-12px;left:-22px;right:16px;bottom:6px;
     border:14px solid var(--marca);
     transform:rotate(-0.9deg);
     pointer-events:none;}

.cartao{position:relative;z-index:1;
        background:var(--papel);color:var(--tinta);
        border:0;border-radius:0;overflow:hidden;}

/* As fotografias do exame são horizontais: a faixa acompanha-as. */
.figura{background:#DFD9CC;aspect-ratio:16/9;position:relative;
        display:flex;align-items:center;justify-content:center;
        overflow:hidden;color:#A99E8C;font-size:13px;}
/* Varrimento lento da esquerda para a direita e de volta, para se ver
   a fotografia toda sem a encolher. É CSS: não precisa de biblioteca. */
.figura img{width:100%;height:100%;object-fit:cover;display:block;
            object-position:0% 50%;
            animation:varrer 16s ease-in-out infinite alternate;}
@keyframes varrer{from{object-position:0% 50%;} to{object-position:100% 50%;}}
/* Pergunta sem fotografia: a faixa desaparece e o texto sobe. */
.figura.sem-foto{display:none;}

.miolo{padding:26px 22px 28px;}

/* Altura reservada de origem: sem isto, uma pergunta de uma linha
   seguida de outra de duas faz saltar a muleta e as respostas a cada
   troca. Reserva-se o espaço do caso normal e o bloco fica quieto.
   É min-height e não height: uma pergunta mais comprida cresce em vez
   de ficar cortada — há 19 línguas, e algumas ocupam mais espaço. */
.enunciado{font-family:var(--titulo);font-weight:800;font-size:25px;
           line-height:1.14;letter-spacing:-0.035em;margin:0 0 18px;
           min-height:calc(1.14em * 3);}

/* A muleta. O JS reescreve o textContent, por isso o ícone é ::before. */
.muleta{display:inline-flex;align-items:center;gap:8px;background:none;
        border:1px solid #CFC7BA;border-radius:0;
        font:inherit;font-size:13px;font-weight:500;letter-spacing:.04em;
        color:#5A524A;cursor:pointer;padding:7px 14px;margin-bottom:20px;
        text-transform:uppercase;
        transition:background .14s,color .14s,border-color .14s;}
.muleta::before{content:"\25D0";font-size:14px;}
.muleta.activa::before{content:"\25D1";}
.muleta:hover{background:var(--tinta);border-color:var(--tinta);color:var(--marca);}

/* As respostas. O JS escreve textContent nos botões, por isso a letra
   NÃO pode ser um elemento dentro — vem de um contador do CSS. */
.respostas{display:flex;flex-direction:column;counter-reset:resposta;}
.resposta{width:100%;text-align:left;font-family:var(--corpo);font-size:16.5px;
          font-weight:400;background:none;color:var(--tinta);
          border:0;border-top:1px solid var(--linha-clara);
          padding:15px 2px 15px 0;cursor:pointer;
          display:flex;gap:14px;align-items:baseline;
          transition:padding-left .16s,color .16s,background .16s;}
.resposta:last-child{border-bottom:1px solid var(--linha-clara);}
.resposta::before{counter-increment:resposta;
                  content:counter(resposta,upper-alpha);
                  font-family:var(--titulo);font-weight:800;font-size:13px;
                  color:#A99E8C;min-width:16px;flex-shrink:0;}
.resposta:hover:not(:disabled){padding-left:12px;}
.resposta:focus-visible{outline:3px solid var(--marca);outline-offset:-3px;}
/* O que foi escolhido, antes de se saber se está certo. */
.resposta.escolhida{background:#EDF0F2;font-weight:500;}
.resposta.escolhida::before{color:var(--tinta);}

.resposta.certa{color:#0A7A96;font-weight:500;}
.resposta.certa::before{color:var(--marca-forte);}
.resposta.errada{color:#A81E17;}
.resposta.errada::before{color:var(--vermelho);}
.resposta:disabled{cursor:default;}

.explicacao{display:none;font-size:15px;line-height:1.55;
            color:var(--tinta-fraca);margin:18px 0 0;}
.explicacao.aberta{display:block;}

/* ---------- Progresso ---------- */
.progresso{display:flex;gap:6px;margin-top:26px;}
.ponto{height:4px;flex:1;background:var(--linha);transition:background .2s;}
.ponto.feito{background:var(--marca);}

/* Numa prova os pontos são navegação: carrega-se para voltar a uma
   pergunta. Ficam mais altos para se acertar neles com o dedo. */
button.ponto{height:14px;border:0;padding:0;cursor:pointer;
             background:var(--linha);}
button.ponto:hover{background:#4A6478;}
button.ponto.feito{background:var(--marca);}
button.ponto.aqui{background:var(--papel);}
button.ponto:focus-visible{outline:2px solid var(--marca);outline-offset:2px;}

/* Nota sobre a língua do exame. Discreta: é informação importante,
   mas não pode competir com a pergunta. */
.nota-exame{font-size:14px;line-height:1.6;color:var(--cinza);
            border-left:3px solid var(--marca);padding:2px 0 2px 14px;
            margin:30px 0 0;max-width:620px;}

/* ---------- Resultado ---------- */
.cartucho{margin:0 0 20px;}
.marca-agua{font-family:var(--titulo);font-weight:800;
            font-size:clamp(56px,11vw,110px);line-height:.95;
            letter-spacing:-0.055em;margin:0 0 16px;}
.marca-agua mark{color:var(--marca);background:none;}
.marca-agua mark::before{display:none;}
.marca-agua small{font-family:var(--titulo);font-size:.38em;font-weight:600;
                  color:var(--cinza);}
.aferir{font-size:18px;color:var(--papel);margin:0;max-width:520px;}
.contador{font-size:15px;color:var(--cinza);margin:10px 0 30px;}

.accoes{display:flex;flex-direction:column;gap:12px;max-width:560px;}
.botao{display:block;text-decoration:none;border:1px solid var(--linha);
       background:none;color:var(--papel);
       font-family:var(--titulo);font-weight:800;font-size:17px;
       letter-spacing:.02em;text-transform:uppercase;
       padding:17px 20px;border-radius:0;cursor:pointer;text-align:center;
       transition:background .14s,color .14s,border-color .14s;}
.botao-linha:hover{border-color:var(--marca);color:var(--marca);}
.botao-cheio{background:var(--marca);border-color:var(--marca);
             color:var(--marca-escura);}
.botao-cheio:hover{background:var(--papel);border-color:var(--papel);
                   color:var(--breu);}
.botao:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}
.botao:disabled{opacity:.5;cursor:default;}

/* ---------- Recursos ---------- */
.recursos{margin-top:96px;counter-reset:recurso;}
.recursos h2{font-family:var(--titulo);font-weight:800;
             font-size:clamp(32px,6vw,58px);letter-spacing:-0.05em;
             line-height:.96;text-transform:uppercase;margin:0 0 10px;}
.intro-recursos{font-size:16px;line-height:1.6;color:var(--cinza);
                margin:0 0 26px;max-width:560px;}
.lista-recursos{display:block;}

/* Cada recurso é uma linha, não uma caixa. O número vem de contador. */
.recurso{display:flex;align-items:center;gap:22px;padding:22px 0;
         border-top:1px solid var(--linha);text-decoration:none;color:inherit;
         transition:padding-left .18s,color .18s;}
.recurso:last-child{border-bottom:1px solid var(--linha);}
.recurso::before{counter-increment:recurso;
                 content:"0" counter(recurso);
                 font-family:var(--titulo);font-weight:800;font-size:13px;
                 letter-spacing:.06em;color:var(--marca);
                 min-width:30px;flex-shrink:0;}
.recurso:hover{padding-left:14px;color:var(--marca);}
.recurso:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}
.recurso h3{font-family:var(--titulo);font-weight:800;
            font-size:clamp(19px,3vw,28px);letter-spacing:-0.035em;
            text-transform:uppercase;margin:0;flex:1;line-height:1.05;
            min-width:0;}
.recurso p{margin:0;font-size:16px;line-height:1.4;color:var(--cinza);
           text-align:right;flex-shrink:0;}
.recurso:hover p{color:var(--cinza);}

.recursos-curto{margin-top:70px;}
.recursos-curto h2{font-size:clamp(26px,4vw,38px);}
.recursos-curto .intro-recursos{display:none;}

/* ---------- Rodapé ---------- */
.rodape{margin-top:100px;padding-top:34px;border-top:1px solid var(--linha);
        padding-bottom:60px;}

/* O aviso de que isto não é uma escola de condução. Em todas as páginas.
   É obrigatório e tem de ser visível, mas não pode competir com o
   produto. Uma linha à esquerda chega. */
/* A folga de baixo fecha o aviso. Era a linha do Zé que fazia este
   trabalho; saiu, e o espaço passou para aqui. */
.aviso-escola{border-left:3px solid var(--marca);padding:2px 0 2px 16px;
              margin:0 0 40px;font-size:14px;line-height:1.65;
              color:var(--cinza);max-width:680px;}
.aviso-escola strong{font-weight:600;color:var(--papel);}

/* Navegação: o bloco com mais peso dos três. */
.rodape ul{list-style:none;margin:0 0 8px;padding:0;
           display:flex;flex-wrap:wrap;gap:8px 24px;line-height:1.3;}
.rodape a{color:var(--cinza);text-decoration:none;font-size:15px;}
.rodape a:hover{color:var(--marca);}

/* Legais: mesma família, meio tom abaixo, e afastados da navegação. */
.rodape ul + ul{margin-top:0;margin-bottom:30px;}
.rodape ul + ul a{font-size:14px;}

/* Este cinzento subiu com o fundo: a #5A6B78 que aqui estava dava
   2,6:1 sobre o breu novo, e isto é a identificação legal — texto
   pequeno que tem mesmo de se ler. A #8290A0 passa os 4,5:1. */
.identificacao{font-size:13px;color:#8290A0;line-height:1.7;
               margin:0 0 14px;max-width:680px;}
.identificacao a{color:var(--cinza);text-decoration:underline;}
.identificacao a:hover{color:var(--marca);}

.nota{margin-top:32px;font-size:13px;color:#8290A0;}

/* ---------- Páginas de conta (registar, entrar, código) ---------- */
/* Coluna estreita: um formulário largo num ecrã grande é mais difícil
   de ler, não mais fácil. */
.conta{max-width:460px;padding:56px 0 20px;}
.conta-titulo{font-family:var(--titulo);font-weight:800;
              font-size:clamp(30px,5vw,44px);letter-spacing:-0.05em;
              line-height:1;text-transform:uppercase;margin:0 0 14px;}
.conta-intro{font-size:16px;line-height:1.6;color:var(--cinza);margin:0 0 28px;}

.conta-erro{border-left:3px solid var(--vermelho);background:var(--breu-claro);
            padding:12px 16px;margin:0 0 22px;font-size:15px;line-height:1.5;
            color:#FFB4AE;}
.conta-aviso{border-left:3px solid var(--marca);background:var(--breu-claro);
             padding:12px 16px;margin:0 0 22px;font-size:15px;line-height:1.5;
             color:var(--papel);}

.conta-form{display:flex;flex-direction:column;gap:20px;margin:0 0 24px;}

/* Etiqueta por cima do campo, não ao lado: aqui as etiquetas são longas
   em várias línguas e, em escrita da direita para a esquerda, a coluna
   estreita obrigaria a duas regras diferentes para o mesmo ecrã. */
.campo{display:flex;flex-direction:column;gap:7px;}
.campo label{font-size:14px;color:var(--cinza);}
.campo input{width:100%;font-family:var(--corpo);font-size:17px;
             background:var(--breu-claro);color:var(--papel);
             border:1px solid var(--linha);border-radius:0;
             padding:14px 15px;
             transition:border-color .14s,background .14s;}
.campo input::placeholder{color:#8290A0;}
.campo input:hover{border-color:#3F526A;}
.campo input:focus{outline:none;border-color:var(--marca);background:#1A2935;}

/* Campo obrigatório: risca fixa na margem, marca permanente e não
   estado de validação. */
.campo.obrigatorio input{border-left:3px solid var(--vermelho);}
[dir="rtl"] .campo.obrigatorio input{border-left:1px solid var(--linha);
                                     border-right:3px solid var(--vermelho);}

/* O código escreve-se grande e espaçado: são seis algarismos copiados
   de um email, muitas vezes num telemóvel. */
.campo-codigo{font-family:var(--titulo);font-weight:800;font-size:30px;
              letter-spacing:.32em;text-align:center;}

/* O olho dos campos de senha. O js/olho.js embrulha o campo nesta
   caixa sozinho — não há nada a fazer no HTML. */
.com-olho{position:relative;display:block;}
.com-olho input{padding-right:50px;}
[dir="rtl"] .com-olho input{padding-right:15px;padding-left:50px;}
.olho{position:absolute;top:50%;right:6px;transform:translateY(-50%);
      background:none;border:0;padding:8px;cursor:pointer;
      color:var(--cinza);line-height:0;}
[dir="rtl"] .olho{right:auto;left:6px;}
.olho:hover{color:var(--marca);}

.conta-aceito{display:flex;align-items:flex-start;gap:11px;
              font-size:14px;line-height:1.5;color:var(--cinza);cursor:pointer;}
.conta-aceito input{width:18px;height:18px;flex-shrink:0;margin:1px 0 0;
                    accent-color:var(--marca);}

.conta-nota{font-size:15px;color:var(--cinza);margin:0;}
.conta-nota a{color:var(--papel);text-decoration:underline;
              text-decoration-color:var(--marca);text-decoration-thickness:2px;
              text-underline-offset:3px;}
.conta-nota a:hover{color:var(--marca);}

/* A área de treino precisa de mais largura que um formulário. */
.conta-larga{max-width:900px;}

/* ---------- Menu de quem já entrou ---------- */
.menu{display:flex;gap:26px;margin:26px 0 0;
      border-bottom:1px solid var(--linha);}
.menu a{font-family:var(--titulo);font-weight:800;font-size:15px;
        letter-spacing:.03em;text-transform:uppercase;
        color:var(--cinza);text-decoration:none;padding:0 0 12px;
        border-bottom:2px solid transparent;margin-bottom:-1px;
        transition:color .14s,border-color .14s;}
.menu a:hover{color:var(--papel);}
.menu a.aqui{color:var(--marca);border-bottom-color:var(--marca);}

/* Entradas que só existem dentro do menu do telemóvel: no ecrã grande
   as mesmas acções estão no topo, como botões. */
.so-no-painel{display:none;}

/* ---------- O botão do menu (só telemóvel) ---------- */
.hamburguer{display:none;flex-direction:column;align-items:center;gap:4px;
            background:none;border:1px solid var(--linha);border-radius:999px;
            padding:11px 12px;cursor:pointer;transition:border-color .15s;}
.hamburguer span{display:block;width:17px;height:2px;background:var(--cinza);
                 transition:background .15s,transform .2s,opacity .15s;}
.hamburguer:hover{border-color:var(--marca);}
.hamburguer:hover span{background:var(--marca);}

/* Aberto, os três traços fecham-se em cruz: o mesmo botão fecha. */
.hamburguer[aria-expanded="true"]{border-color:var(--marca);}
.hamburguer[aria-expanded="true"] span{background:var(--marca);}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Fichas da conta ---------- */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:10px;margin:0 0 10px;}
.ficha{border:1px solid var(--linha);padding:18px 20px 20px;}
.ficha-titulo{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
              color:var(--cinza);font-weight:600;margin:0 0 8px;}
.ficha-valor{font-family:var(--titulo);font-weight:800;font-size:19px;
             letter-spacing:-0.02em;line-height:1.25;margin:0;word-break:break-word;}
.ficha-valor.fraca{color:var(--cinza);font-size:16px;}
.ficha-nota{font-size:13px;margin:10px 0 0;}
.ficha-nota a{color:var(--marca);text-decoration:underline;
              text-underline-offset:3px;}

/* LINKS DENTRO DE TABELAS. Sem isto ficam com o azul por omissão do
   browser, que sobre o breu não se lê — mordeu a 02/11/2026 no
   «continuar o pagamento» da lista de compras. Vale para a tabela
   toda, para o próximo link que lá entrar já nascer legível. */
.tabela-admin a{color:var(--marca);text-decoration:underline;
                text-underline-offset:3px;}
.tabela-admin a:hover{color:var(--papel);}

/* Um valor que está lá mas não conta — uma compra que expirou, um
   acesso que não existe. Cinzento, nunca escondido. */
.fraca{color:var(--cinza);}

.conta-form.estreita{max-width:420px;}

/* ---------- Escrever artigos ----------
   As caixas de texto partilham o aspecto dos campos normais; a altura é
   o js/artigos.js que a acerta ao conteúdo. */
.campo textarea{width:100%;font-family:var(--corpo);font-size:17px;
                line-height:1.6;background:#17242F;color:var(--papel);
                border:1px solid var(--linha);padding:13px 15px;
                resize:vertical;min-height:70px;}
.campo textarea::placeholder{color:#8290A0;}
.campo textarea:hover{border-color:#3F526A;}
.campo textarea:focus{outline:none;border-color:var(--marca);background:#1A2935;}
.campo input[type="checkbox"]{width:20px;height:20px;accent-color:var(--marca);}

/* O corpo do artigo escreve-se em monoespaçado: é HTML, e as etiquetas
   lêem-se melhor assim. */
.artigo-form #corpo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                    font-size:14px;line-height:1.65;}
.artigo-accoes{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 0;}
.artigo-accoes .botao{padding:13px 26px;font-size:16px;}

/* O que não tem volta vai a vermelho, e só a vermelho — sem caixas
   nem avisos aos gritos. */
.seccao.perigo{color:#FF6B61;margin-top:56px;}
.botao-perigo{background:none;border:1px solid var(--vermelho);
              color:#FF6B61;}
.botao-perigo:hover{background:var(--vermelho);border-color:var(--vermelho);
                    color:#fff;}
.ligacao-perigo{background:none;border:0;padding:0;cursor:pointer;
                font:inherit;font-size:13px;color:var(--cinza);
                text-decoration:underline;text-underline-offset:3px;}
.ligacao-perigo:hover{color:#FF6B61;}

/* ---------- Escolha da língua do exame ---------- */
/* Dezanove línguas em coluna única dava uma página interminável.
   Com colunas estreitas, num monitor grande cabem cinco. */
.escolha-linguas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
                 gap:8px;margin-bottom:8px;}

/* Os MÉTODOS DE PAGAMENTO são três botões curtos e não uma grelha de
   dezanove línguas. Com a grelha das línguas ficavam todos com a mesma
   largura mínima de 150px: cabiam dois por linha e o terceiro caía para
   baixo com meia página livre ao lado. Aqui cada um fica do tamanho do
   seu próprio texto e só muda de linha quando não couber mesmo. */
.escolha-metodos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.escolha-metodos .escolha{flex:0 1 auto;}
.escolha{display:flex;align-items:center;gap:9px;cursor:pointer;
         border:1px solid var(--linha);padding:11px 13px;
         transition:border-color .14s,background .14s;}
.escolha:hover{border-color:#3F526A;background:var(--breu-claro);}
.escolha input{width:17px;height:17px;flex-shrink:0;accent-color:var(--marca);}
.escolha span{font-size:16px;}
.escolha small{font-size:10px;color:var(--marca);letter-spacing:.05em;
               text-transform:uppercase;margin-left:auto;white-space:nowrap;}
[dir="rtl"] .escolha small{margin-left:0;margin-right:auto;}
.escolha.sugerida{border-color:var(--marca);}

/* A língua do exame, à mão de quem quiser mudá-la. Discreta: decide-se
   uma vez e raramente se mexe. */
.lingua-actual{font-size:14px;margin:-16px 0 24px;}
.lingua-actual a{color:var(--cinza);text-decoration:underline;
                 text-decoration-color:var(--linha);text-underline-offset:3px;}
.lingua-actual a:hover{color:var(--marca);text-decoration-color:var(--marca);}

/* ---------- Lista dos modos ---------- */
.lista-modos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
             gap:10px;margin:0 0 30px;}
.modo{display:block;text-decoration:none;color:inherit;
      border:1px solid var(--linha);padding:20px 22px 22px;
      transition:border-color .15s,background .15s,transform .12s;}
a.modo:hover{border-color:var(--marca);background:var(--breu-claro);transform:translateY(-2px);}
a.modo:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}
.modo-nome{font-family:var(--titulo);font-weight:800;font-size:20px;
           letter-spacing:-0.03em;line-height:1.1;margin:0 0 8px;}
.modo-texto{font-size:14.5px;line-height:1.5;color:var(--cinza);margin:0 0 14px;}
.modo-regras{font-family:var(--titulo);font-weight:600;font-size:12px;
             letter-spacing:.04em;color:var(--marca);margin:0;}
.modo-retomar{font-size:13px;color:var(--papel);margin:10px 0 0;}

/* Modo fechado: continua à vista, para se perceber o que há a ganhar. */
.modo.fechado{opacity:.55;}
.modo-fechado{font-size:13px;color:var(--cinza);margin:12px 0 0;
              border-top:1px solid var(--linha);padding-top:10px;}

/* ---------- Ecrã do teste ---------- */
.teste-barra{display:flex;justify-content:space-between;align-items:baseline;
             margin:0 0 12px;}
.teste-conta{font-family:var(--titulo);font-weight:800;font-size:15px;
             letter-spacing:.04em;color:var(--cinza);}
.teste-relogio{font-family:var(--titulo);font-weight:800;font-size:26px;
               letter-spacing:-0.02em;color:var(--marca);
               font-variant-numeric:tabular-nums;}
.teste-relogio.pouco{color:#FF6B61;}

/* No non-stop são milhares de perguntas: uma barra, não pontos. */
.progresso .barra{height:4px;flex:1;background:var(--linha);}
.progresso .barra span{display:block;height:100%;background:var(--marca);
                       transition:width .3s;}

.teste .zona-cartao{margin:22px 0 0;}
.teste-accoes{display:flex;gap:10px;margin:26px 0 0;}
.teste-accoes .botao{flex:1;}

.teste-fim{padding:40px 0 20px;max-width:560px;}
.teste-fim .marca-agua{font-size:clamp(50px,9vw,90px);margin-bottom:6px;}

/* Passou ou não passou — a primeira coisa que se procura, e a que o
   número sozinho não diz: 8 em 10 chumba numa categoria e passa
   noutra. Vermelho ou azul, em letra grande, logo a seguir. */
.veredicto{font-family:var(--titulo);font-weight:800;
           font-size:clamp(23px,4vw,32px);letter-spacing:-0.03em;
           text-transform:uppercase;line-height:1;
           color:#FF6B61;margin:0 0 14px;}
.veredicto.passou{color:var(--marca);}
.teste-fim .aferir{margin:0 0 8px;}
.teste-fim .conselho{color:var(--cinza);font-size:16px;}

/* ---------- O que correu mal ----------
   Na simulação não se corrige nada enquanto se responde: é aqui que a
   pessoa descobre o que falhou. Sem isto, sabe que errou duas e não
   sabe quais — que é a parte que ensina. */
.falhadas{margin:44px 0 0;}
.falhada{border:1px solid var(--linha);background:var(--breu-claro);
         padding:16px 18px;margin:0 0 12px;}
.falhada-foto{display:block;width:100%;max-width:300px;height:auto;
              margin:0 0 12px;border:1px solid var(--linha);}
.falhada-enunciado{font-size:16px;line-height:1.45;margin:0 0 12px;
                   color:var(--papel);}
.falhada-linha{font-size:15px;line-height:1.4;margin:0 0 4px;
               padding-left:16px;position:relative;}
/* O símbolo antes de cada uma: a cor sozinha não chega a quem não a
   distingue, e estas duas linhas dizem coisas opostas. */
.falhada-linha::before{position:absolute;left:0;top:0;font-weight:700;}
.falhada-linha.errada{color:#FF6B61;}
.falhada-linha.errada::before{content:"\00D7";}
.falhada-linha.certa{color:var(--marca);}
.falhada-linha.certa::before{content:"\2713";}
.falhada-porque{font-size:14px;line-height:1.55;color:var(--cinza);
                margin:12px 0 0;padding-top:12px;
                border-top:1px solid var(--linha);}
[dir="rtl"] .falhada-linha{padding-left:0;padding-right:16px;}
[dir="rtl"] .falhada-linha::before{left:auto;right:0;}

@media (max-width:819px){
  .teste-accoes{flex-direction:column;}
}

/* ---------- Preços e pagamento ---------- */
.preco{border:1px solid var(--linha);padding:26px 28px;margin:0 0 10px;
       max-width:520px;}
.preco-valor{font-family:var(--titulo);font-weight:800;
             font-size:clamp(44px,8vw,68px);letter-spacing:-0.05em;
             line-height:1;color:var(--marca);margin:0 0 10px;}
.preco-texto{font-size:17px;margin:0 0 10px;color:var(--papel);}
.preco-inclui{font-size:14.5px;line-height:1.6;color:var(--cinza);margin:0;}

/* ---- Desconto a correr ----
   O preço antigo riscado e a percentagem num selo, sem uma palavra
   escrita: um número riscado e um «−50%» leem-se nas dezanove línguas
   sem precisarem de tradução. A moldura passa à cor da marca, para a
   campanha se notar sem ser preciso dizê-lo. */
.preco.com-desconto{border-color:var(--marca);}
.preco-antes{font-size:.42em;font-weight:600;color:var(--cinza);
             text-decoration:line-through;text-decoration-thickness:2px;
             margin-right:.3em;vertical-align:middle;}
.preco-selo{display:inline-block;vertical-align:middle;
            font-size:16px;font-weight:800;letter-spacing:.02em;
            color:var(--breu);background:var(--marca);
            padding:4px 10px;margin-left:12px;
            font-variant-numeric:tabular-nums;}

.pagar{border:1px solid var(--marca);background:var(--breu-claro);
       padding:26px 28px;margin:0 0 16px;max-width:520px;}
.pagar-texto{font-size:17px;line-height:1.5;margin:0 0 18px;}
.pagar-valor{font-family:var(--titulo);font-weight:800;
             font-size:clamp(34px,6vw,48px);letter-spacing:-0.04em;
             line-height:1;color:var(--marca);margin:0 0 16px;}

/* Os dados do Multibanco copiam-se à mão para a caixa, por isso são
   grandes e com espaço entre os algarismos. */
.pagar-dados{display:flex;flex-direction:column;gap:14px;}
.pagar-dados div{display:flex;flex-direction:column;gap:3px;}
.pagar-dados span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
                  color:var(--cinza);}
.pagar-dados b{font-family:var(--titulo);font-weight:800;font-size:26px;
               letter-spacing:.06em;color:var(--papel);
               font-variant-numeric:tabular-nums;}
.pagar-nota{font-size:13px;color:var(--cinza);margin:18px 0 0;}

/* O relógio dos quatro minutos do MB WAY. Em algarismos de largura fixa,
   senão o número salta de um lado para o outro a cada segundo. Fica
   vazio até o JS o pintar, para não aparecer um 0:00 falso a quem tenha
   o JavaScript desligado. */
.pagar-relogio{font-family:var(--titulo);font-weight:800;font-size:40px;
               letter-spacing:.02em;line-height:1;color:var(--papel);
               font-variant-numeric:tabular-nums;margin:0;}

/* O que se diz quando a espera acaba: recebido, recusado ou expirado. */
.pagar-estado{margin:18px 0 0;padding-top:18px;
              border-top:1px solid var(--linha);}
.pagar-estado p{font-size:16px;line-height:1.5;margin:0 0 14px;}

/* ---------- Convite ---------- */
/* ---------- As peças da área de estudo ----------
   As que ainda não têm matéria aparecem na mesma, apagadas: quem entra
   fica a ver o que o produto vai ter, em vez de uma lista curta que
   parece ser tudo o que há. */
/* auto-FILL e não auto-fit: com auto-fit, uma família com uma única
   categoria dava um cartão esticado pela largura toda do ecrã. Assim as
   colunas vazias ficam reservadas e o cartão mantém a largura dos
   outros. Com as oito peças do /aprender dá exactamente no mesmo. */
.pecas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
       gap:12px;margin:0 0 34px;}
.peca{display:block;position:relative;padding:20px 22px 22px;
      border:1px solid var(--linha);background:var(--breu-claro);
      text-decoration:none;transition:border-color .15s,background .15s;}
.peca h3{font-family:var(--titulo);font-weight:800;font-size:18px;
         letter-spacing:-0.02em;color:var(--papel);margin:0 0 7px;}
.peca p{font-size:14.5px;line-height:1.5;color:var(--cinza);margin:0;}
a.peca:hover{border-color:var(--marca);background:#2B3E4F;}
a.peca:hover h3{color:var(--marca);}

/* Por fazer: fica à vista, mas não promete nada. */
.peca.por-fazer{opacity:.45;}
.peca.fechada{cursor:default;}

.selo{display:inline-block;margin:12px 0 0;padding:3px 9px;
      font-size:11px;letter-spacing:.07em;text-transform:uppercase;
      color:var(--cinza);border:1px solid var(--linha);}
.selo-pronto{color:var(--marca);border-color:var(--marca);}

/* ---------- Sinais de trânsito ----------
   O índice reaproveita as .pecas de cima: uma categoria é um cartão
   como as outras da área de estudo, e não havia razão para ter dois
   aspectos na mesma secção.

   A grelha dos sinais é que é própria, e tem um cuidado a mais: os
   desenhos são SVG a preto sobre fundo transparente. Sobre o breu não
   se veriam. A caixa da imagem é clara pela mesma razão que o cartão
   da pergunta é claro. */

.familia{font-family:var(--titulo);font-weight:800;font-size:20px;
         letter-spacing:-0.03em;margin:34px 0 12px;padding-bottom:9px;
         border-bottom:1px solid var(--linha);color:var(--papel);}
.familia:first-of-type{margin-top:22px;}

/* A letra oficial, no lugar do texto descritivo das outras peças. */
.cat-letra{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
           font-size:13px;letter-spacing:.08em;}

.sinais{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
        gap:10px;margin:0 0 34px;}

.sinal{margin:0;border:1px solid var(--linha);background:var(--breu-claro);
       display:flex;flex-direction:column;
       transition:border-color .14s,transform .12s;}

/* Na grelha cada sinal abre o estudo nesse mesmo sinal — procura-se na
   lista, estuda-se o que se encontrou. O ponteiro e o realce só
   existem aí: no estudo, carregar no cartão não faz nada. */
.sinais:not(.um-a-um) .sinal{cursor:pointer;}
.sinais:not(.um-a-um) .sinal:hover{border-color:var(--marca);
                                   transform:translateY(-2px);}
.sinal:focus-visible{outline:3px solid var(--marca);outline-offset:2px;}

/* SEM fundo: os SVG trazem o deles desenhado — o branco das placas, o
   azul das de obrigação, o vermelho das de proibição. Um painel claro
   por trás estava a enquadrar o sinal numa coisa que ele já tem, e
   dava-lhe ar de recorte colado. O padding é só folga. */
.sinal img{width:100%;height:104px;object-fit:contain;display:block;
           padding:12px 12px 0;}

.sinal figcaption{display:flex;flex-direction:column;flex:1;
                  padding:14px 16px 16px;}
.sinal h3{font-family:var(--titulo);font-weight:800;font-size:16px;
          letter-spacing:-0.02em;line-height:1.2;margin:0 0 7px;
          color:var(--papel);}
.sinal p{font-size:14px;line-height:1.5;color:var(--cinza);margin:0 0 12px;}

/* O código encosta ao fundo: os cartões têm alturas diferentes e sem
   isto ficava cada um a seu nível. */
.sinal-ref{margin-top:auto;align-self:flex-start;
           font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
           font-size:11px;letter-spacing:.07em;color:var(--cinza);
           border:1px solid var(--linha);padding:2px 8px;}

.sinais-total{font-size:14px;color:var(--cinza);margin:26px 0 0;}

/* ---------- Duas vistas: todos, ou um de cada vez ----------
   Trocar de vista é trocar a classe do contentor. O html é o mesmo nas
   duas, por isso não há nada a recarregar nem desenhos a piscar.

   Sem JavaScript os botões não aparecem: fica a grelha, que funciona
   sozinha. É a mesma ideia do html.js do resto do site. */

.vistas{display:none;}
html.js .vistas{display:flex;gap:0;margin:0 0 16px;align-items:center;}

/* O contador acompanha os botões e encosta à direita. Na vista em
   grelha não quer dizer nada, por isso não aparece. */
.vistas .nav-conta{display:none;}
body.vista-um .vistas .nav-conta{display:inline;margin-left:auto;}

/* Saltar para outra categoria, ao lado dos botões das vistas. Com
   JavaScript o botão Ir sai: escolher no combo já salta. Sem ele, o
   botão é a única maneira, e por isso não se esconde com display:none
   no CSS geral — é o JS que o faz, e só quando existe. */
.saltar{display:flex;gap:8px;align-items:center;margin-left:18px;}
.saltar select{font-family:var(--corpo);font-size:14px;
               background:var(--breu-claro);color:var(--papel);
               border:1px solid var(--linha);border-radius:0;
               padding:9px 11px;max-width:min(300px,42vw);
               cursor:pointer;transition:border-color .14s;}
.saltar select:hover{border-color:#3F526A;}
.saltar select:focus{outline:none;border-color:var(--marca);}
.saltar .botao{padding:9px 16px;font-size:14px;}
.saltar.com-js .botao{display:none;}

.vista-botao{font-family:var(--titulo);font-weight:800;font-size:13px;
             letter-spacing:.04em;text-transform:uppercase;
             background:none;color:var(--cinza);cursor:pointer;
             border:1px solid var(--linha);padding:9px 18px;
             transition:color .14s,border-color .14s,background .14s;}
.vista-botao + .vista-botao{border-left:0;}
.vista-botao:hover{color:var(--papel);}
.vista-botao.activa{color:var(--marca-escura);background:var(--marca);
                    border-color:var(--marca);}
.vista-botao:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}

/* ---------- Um de cada vez ----------
   Aqui NÃO há cartão. Um cartão serve uma grelha, onde é preciso
   separar um sinal do seguinte; com um só no ecrã, a moldura não
   separa nada — aperta. Fica o desenho num painel claro (que é
   obrigatório, os SVG são pretos) e o texto solto sobre o fundo da
   página, com uma goteira larga entre os dois.

   Nesta vista a coluna perde o tecto dos 900px: um sinal a estudar
   merece o ecrã que houver. */
body.vista-um .conta{max-width:none;}

.sinais.um-a-um{grid-template-columns:1fr;margin-bottom:20px;}
.sinais.um-a-um .sinal{display:none;}

.sinais.um-a-um .sinal.visivel{display:grid;
                               grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                               gap:clamp(28px,4vw,56px);
                               align-items:center;
                               background:none;border:0;}

/* Altura FIXA, não 100%: com 100% a imagem crescia para encher a coluna
   e a coluna crescia com a imagem — um sinal alto e estreito, como as
   setas, esticava-se a mais de 900px. O object-fit:contain deixa os
   sinais largos com folga em cima e em baixo, que é o que se quer. */
.sinais.um-a-um .sinal img{height:min(52vh,460px);padding:0;margin-bottom:0;}

.sinais.um-a-um figcaption{justify-content:center;padding:0;}
.sinais.um-a-um h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1;
                   letter-spacing:-0.03em;margin:0 0 16px;}

/* Duas alturas de texto: a curta é o resumo e lê-se de relance; a
   extensa é a de instrutor, com o exemplo e o erro típico, e vai
   abaixo em letra mais pequena para não competir com ela. */
.sinais.um-a-um p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;
                  margin:0 0 16px;color:var(--papel);}
.sinais.um-a-um .sinal-extensa{font-size:clamp(14.5px,1.2vw,16px);
                               line-height:1.7;margin:0 0 22px;
                               color:#9FB0BD;max-width:60ch;}
.sinais.um-a-um .sinal-ref{margin-top:0;font-size:12px;padding:4px 11px;}

/* Na grelha não aparece: não cabe, e o cartão passava a ter alturas
   muito diferentes conforme o sinal tivesse texto ou não. */
.sinal-extensa{display:none;}
.sinais.um-a-um .sinal-extensa{display:block;}

/* A categoria, por cima do nome e só no um-a-um. Em maiúsculas pequenas
   e na cor da marca: distingue-se pela forma e pela cor sem competir
   com o título, que é o que a pessoa veio ler. Na grelha fica fora pela
   mesma razão da extensa — o cabeçalho da página já a diz. */
.sinal-categoria{display:none;}
.sinais.um-a-um .sinal-categoria{display:block;
                                 font-size:clamp(12px,1vw,13px);
                                 font-weight:600;letter-spacing:.1em;
                                 text-transform:uppercase;
                                 color:var(--marca);margin:0 0 10px;}

/* As setas ficam DE CADA LADO do que se está a ver, não penduradas por
   baixo: a mão vai ao sítio onde está a olhar. Na vista em grelha o
   .estudo é um bloco normal e elas não aparecem. */
.estudo{display:block;}
body.vista-um .estudo{display:grid;align-items:center;gap:4px;
                      grid-template-columns:auto minmax(0,1fr) auto;
                      grid-template-areas:"ant conteudo seg";}
body.vista-um .estudo > .nav-botao[data-ir="-1"]{grid-area:ant;}
body.vista-um .estudo > .sinais{grid-area:conteudo;}
body.vista-um .estudo > .nav-botao[data-ir="1"]{grid-area:seg;}

.nav-botao{display:none;background:none;border:0;cursor:pointer;
           color:var(--cinza);padding:12px 10px;line-height:0;
           transition:color .14s,transform .14s;}
body.vista-um .nav-botao{display:block;}
.nav-botao svg{width:26px;height:26px;fill:none;stroke:currentColor;
               stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.nav-botao:hover{color:var(--marca);}
.nav-botao[data-ir="-1"]:hover{transform:translateX(-3px);}
.nav-botao[data-ir="1"]:hover{transform:translateX(3px);}
.nav-botao:focus-visible{outline:3px solid var(--marca);outline-offset:2px;}

.nav-conta{font-size:14px;color:var(--cinza);white-space:nowrap;
           font-variant-numeric:tabular-nums;}
.nav-conta b{font-family:var(--titulo);font-weight:800;font-size:18px;
             color:var(--papel);}

/* ---------- Gráfico da evolução ----------
   SVG feito no PHP, sem biblioteca nem JS. Desenhado em 600x180 e
   esticado para a largura que houver, de proporção mantida — por isso
   os pontos ficam redondos e a linha com espessura constante. */
.grafico{display:block;width:100%;height:auto;margin:0 0 10px;
         overflow:visible;}
.g-linha{fill:none;stroke:var(--marca);stroke-width:2.5;
         stroke-linejoin:round;stroke-linecap:round;}
.g-area{fill:var(--marca);opacity:.08;stroke:none;}
.g-ponto{fill:var(--linha);stroke:none;}
.g-ponto.passou{fill:var(--cinza);}
/* O mínimo para passar: discreto, mas é a referência de tudo. */
.g-corte{stroke:var(--cinza);stroke-width:1;stroke-dasharray:5 5;opacity:.5;}
.grafico-legenda{font-size:13px;line-height:1.5;color:var(--cinza);
                 margin:0 0 30px;}

.convite{display:flex;gap:8px;margin:0 0 26px;max-width:620px;}
.convite input{flex:1;min-width:0;font-family:var(--corpo);font-size:15px;
               background:var(--breu-claro);color:var(--papel);
               border:1px solid var(--linha);padding:13px 15px;}
.convite input:focus{outline:none;border-color:var(--marca);}
.convite .botao{padding:13px 22px;font-size:15px;white-space:nowrap;}

@media (max-width:819px){
  .convite{flex-direction:column;}
}

/* ---------- Progresso ---------- */
.numeros-aluno{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
               gap:1px;background:var(--linha);border:1px solid var(--linha);
               margin:0 0 30px;}
.numero-aluno{background:var(--breu);padding:18px 20px;}
.numero-aluno b{display:block;font-family:var(--titulo);font-weight:800;
                font-size:clamp(30px,5vw,42px);letter-spacing:-0.04em;
                line-height:1;color:var(--marca);}
.numero-aluno span{display:block;font-size:12px;color:var(--cinza);
                   letter-spacing:.06em;text-transform:uppercase;margin-top:8px;}

.pronto{border:1px solid var(--linha);padding:24px 26px;margin:0 0 10px;}
.pronto.sim{border-color:var(--marca);background:var(--breu-claro);}
.pronto-titulo{font-family:var(--titulo);font-weight:800;
               font-size:clamp(22px,4vw,30px);letter-spacing:-0.04em;
               line-height:1.1;margin:0 0 10px;}
.pronto-resposta{font-size:17px;margin:0;color:var(--papel);}
.pronto.sim .pronto-resposta{color:var(--marca);font-weight:500;}
.criterios{list-style:none;margin:16px 0 0;padding:0;}
.criterios li{font-size:15px;line-height:1.5;color:var(--cinza);
              padding:9px 0 9px 20px;border-top:1px solid var(--linha);
              position:relative;}
.criterios li::before{content:"";position:absolute;left:0;top:17px;
                      width:7px;height:7px;background:var(--cinza);}
[dir="rtl"] .criterios li{padding:9px 20px 9px 0;}
[dir="rtl"] .criterios li::before{left:auto;right:0;}

.tema-erro{font-family:var(--titulo);font-weight:800;font-size:16px;
           color:#FF6B61;flex-shrink:0;}

/* ---------- Temas ---------- */
.lista-temas{display:block;margin:0 0 26px;}
.tema{display:flex;align-items:center;gap:16px;padding:15px 2px;
      border-top:1px solid var(--linha);text-decoration:none;color:inherit;
      transition:padding-left .16s,color .16s;}
.tema:last-child{border-bottom:1px solid var(--linha);}
.tema:hover{padding-left:12px;color:var(--marca);}
.tema-nome{flex:1;font-size:17px;line-height:1.3;}
.tema-conta{font-family:var(--titulo);font-weight:800;font-size:14px;
            color:var(--cinza);flex-shrink:0;}
[dir="rtl"] .tema:hover{padding-left:0;padding-right:12px;}

@media (max-width:819px){
  .conta{padding-top:38px;}
  .lista-modos{grid-template-columns:1fr;}
  .escolha-linguas{grid-template-columns:1fr 1fr;}
}

/* ---------- Página de parâmetros ---------- */
.seccao{font-family:var(--titulo);font-weight:800;font-size:22px;
        letter-spacing:-0.03em;margin:40px 0 14px;}

.ajuda{border-left:3px solid var(--marca);background:var(--breu-claro);
       padding:14px 18px;margin:0 0 10px;font-size:14px;line-height:1.6;
       color:var(--cinza);max-width:760px;}
.ajuda p{margin:0 0 8px;}
.ajuda p:last-child{margin:0;}
.ajuda code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
            font-size:13px;color:var(--marca);}
[dir="rtl"] .ajuda{border-left:0;border-right:3px solid var(--marca);}

.tabela-rolar{overflow-x:auto;}
.tabela-admin{width:100%;border-collapse:collapse;font-size:14px;}
.tabela-admin th{background:var(--breu-claro);text-align:left;font-weight:600;
                 font-size:12px;letter-spacing:.06em;text-transform:uppercase;
                 color:var(--cinza);padding:10px 12px;white-space:nowrap;}
.tabela-admin td{padding:10px 12px;border-bottom:1px solid var(--linha);
                 vertical-align:middle;}
.tabela-admin tbody tr:nth-child(odd){background:rgba(255,255,255,.02);}
.tabela-admin small{color:var(--cinza);font-size:12px;}
.tabela-admin code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                   font-size:13px;color:var(--papel);}
.tabela-admin input[type="text"],
.tabela-admin input[type="number"]{font-family:var(--corpo);font-size:15px;
       background:var(--breu-claro);color:var(--papel);
       border:1px solid var(--linha);padding:8px 10px;width:100%;min-width:60px;}
.tabela-admin input[type="number"]{width:72px;}
.tabela-admin input:focus{outline:none;border-color:var(--marca);}
.tabela-admin input.recusado{border-color:var(--vermelho);}
.tabela-admin input[type="checkbox"]{width:18px;height:18px;accent-color:var(--marca);}

/* O aviso de gravado. Discreto: não interrompe o trabalho. */
.gravado{position:fixed;right:20px;bottom:20px;z-index:50;
         background:var(--verde);color:#042;font-family:var(--titulo);
         font-weight:800;font-size:14px;letter-spacing:.04em;padding:10px 18px;}
.gravado.mau{background:var(--vermelho);color:#fff;}
[dir="rtl"] .gravado{right:auto;left:20px;}

.engrenagem{font-size:17px;line-height:1;padding:9px 13px;}

/* ---------- Gestão ---------- */
/* O min-width:0 é o que impede o campo de empurrar o botão para fora:
   um input[type=search] tem largura mínima própria e, sem isto, não
   encolhe — por muito estreito que seja o ecrã. */
.procura{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;max-width:460px;}
.procura input{flex:1;min-width:0;font-family:var(--corpo);font-size:16px;
               background:var(--breu-claro);color:var(--papel);
               border:1px solid var(--linha);padding:11px 14px;}
.procura input:focus{outline:none;border-color:var(--marca);}
.procura .botao{padding:11px 18px;font-size:15px;}

/* As acções de cada linha ficam em coluna: lado a lado, numa tabela
   com sete colunas, não cabiam em ecrã nenhum. */
.accoes-linha{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
/* Um campo escondido continua a ser submetido, mas deixa de ocupar
   lugar quando isto vira grelha no telemóvel. */
.accoes-linha input[type="hidden"]{display:none;}
.ligacao-admin{background:none;border:0;padding:0;cursor:pointer;
               font:inherit;font-size:13px;color:var(--cinza);
               text-decoration:underline;text-underline-offset:3px;
               white-space:nowrap;}
.ligacao-admin:hover{color:var(--marca);}

/* ---------- Páginas de texto (termos, privacidade, cookies) ---------- */
.legal{max-width:720px;padding:34px 0 20px;}
.titulo-legal{font-family:var(--titulo);font-weight:800;
              font-size:clamp(32px,6vw,52px);letter-spacing:-0.05em;
              line-height:.98;text-transform:uppercase;margin:0 0 8px;}
.data-legal{font-size:14px;color:var(--cinza);margin:0 0 36px;}
.legal h2{font-family:var(--titulo);font-weight:800;font-size:23px;
          letter-spacing:-0.03em;margin:40px 0 12px;}
.legal h3{font-size:17px;font-weight:600;margin:26px 0 6px;}
.legal p{margin:0 0 15px;line-height:1.7;color:#C3CED7;}
.legal ul{margin:0 0 18px;padding-left:20px;}
.legal li{margin-bottom:7px;line-height:1.65;color:#C3CED7;}
.legal a{color:var(--papel);text-decoration:underline;
         text-decoration-color:var(--marca);text-decoration-thickness:2px;
         text-underline-offset:3px;}
.legal a:hover{color:var(--marca);}

/* Parágrafo que não pode passar despercebido. */
.destaque{border-left:3px solid var(--marca);background:var(--breu-claro);
          padding:16px 18px;margin:0 0 18px;}

/* ---------- O guia ----------
   Herda a moldura das páginas legais (.legal), por isso aqui só está o
   que é próprio dos artigos. */
.migalhas{font-size:14px;margin:-24px 0 24px;}

/* A margem negativa de cima está calculada para o .titulo-legal do guia.
   Nas páginas de conta o título é o .conta-titulo, que é maior e tem
   outra margem em baixo — com os -24px, as migalhas subiam por cima
   dele. Aqui encostam-se à folga que o título já deixa. */
.conta .migalhas{margin:2px 0 22px;}

.migalhas a{color:var(--cinza);text-decoration:none;}
.migalhas a::before{content:"\2190  ";}
.migalhas a:hover{color:var(--marca);}

/* O resumo abre o artigo em letra maior: diz em duas linhas se é esta a
   página que a pessoa procurava. */
.resumo-artigo{font-size:18px;line-height:1.65;color:var(--papel);
               margin:0 0 28px;}

/* A chamada do guia na capa. Fica a seguir ao cartão das perguntas:
   a pessoa acaba de experimentar o produto e a pergunta seguinte que lhe
   ocorre é se pode sequer tirar a carta cá. */
.chamada-guia{margin:70px 0 0;padding:28px 0 0;
              border-top:1px solid var(--linha);max-width:720px;}
.chamada-guia h2{font-family:var(--titulo);font-weight:800;
                 font-size:clamp(24px,3.4vw,32px);letter-spacing:-0.035em;
                 line-height:1.08;margin:0 0 10px;color:var(--papel);}
.chamada-guia > p{font-size:17px;line-height:1.6;color:var(--cinza);
                  margin:0 0 20px;}
.chamada-guia .lista-guia{margin-bottom:22px;}

.lista-guia{list-style:none;margin:0 0 34px;padding:0;}
.lista-guia li{margin:0;border-bottom:1px solid var(--linha);}
.lista-guia li:last-child{border-bottom:none;}
.lista-guia a{display:block;padding:14px 0 4px;font-family:var(--titulo);
              font-weight:800;font-size:17px;color:var(--papel);
              text-decoration:none;}
.lista-guia a:hover{color:var(--marca);}
.lista-guia span{display:block;padding:0 0 14px;font-size:15px;
                 line-height:1.5;color:var(--cinza);}
[dir="rtl"] .migalhas a::before{content:"\2192  ";}

.tabela-legal{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;}
.tabela-legal th{text-align:left;font-weight:600;padding:10px 12px;
                 border-bottom:1px solid var(--marca);vertical-align:top;}
.tabela-legal td{padding:10px 12px;border-bottom:1px solid var(--linha);
                 vertical-align:top;line-height:1.55;color:#C3CED7;}

/* ---------- O marcador ----------
   Sobrou das páginas onde o fundo é claro. Não é um rectângulo — é um
   traço de feltro, com as pontas irregulares e a altura a variar ao
   longo do risco. A forma é uma máscara SVG, o que permite trocar a
   cor por variável. Três formas alternadas para não parecer carimbo. */
mark{background:none;color:inherit;position:relative;z-index:0;padding:.04em .1em;}
mark::before{content:"";position:absolute;inset:-.1em 0 -.04em;
     background:var(--marca);z-index:-1;
     transform:scaleX(0);transform-origin:left center;
     animation:pintar .55s cubic-bezier(.2,.7,.3,1) forwards;
     -webkit-mask-size:100% 100%;mask-size:100% 100%;
     -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
     -webkit-mask-image:var(--traco);mask-image:var(--traco);}

mark{--traco:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 46" preserveAspectRatio="none"><path d="M4 13c58-7 120-4 180-6 40-1 82 1 112 4 3 5 2 14 0 21-46 6-104 2-158 5-42 2-90 1-130-3-6-6-6-15-4-21z"/></svg>');}
mark.t2{--traco:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 46" preserveAspectRatio="none"><path d="M2 16c70-9 138-2 206-8 32-3 68 0 90 5 4 8 1 16-2 22-64 4-130 6-196 4-34-1-72-3-96-7-3-5-2-12-2-16z"/></svg>');}
mark.t3{--traco:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 46" preserveAspectRatio="none"><path d="M6 10c46 6 100 2 150 3 44 1 96-4 140 1 5 7 3 18-1 25-52 3-108-2-162 1-40 2-84 3-124-2-5-8-5-20-3-28z"/></svg>');}

/* Variante sublinhado: o traço passa por baixo das letras. */
mark.sublinha{padding:0;}
mark.sublinha::before{inset:auto -.14em -.1em -.14em;height:.3em;}

@keyframes pintar{to{transform:scaleX(1);}}

/* Marcadores que só entram quando o visitante desce até eles.
   A espera só existe se houver JavaScript (classe .js no <html>) —
   sem ele, o traço aparece pintado de origem em vez de sumir. */
html.js mark.espera::before{animation:none;transform:scaleX(0);}
html.js mark.espera.pinta::before{animation:pintar .55s cubic-bezier(.2,.7,.3,1) forwards;}

/* ---------- Entrada ---------- */
/* Os blocos sobem quando entram no ecrã. Sem JavaScript ficam à vista:
   a classe .js é escrita pelo próprio index.php. */
html.js .sobe{opacity:0;transform:translateY(26px);
     transition:opacity .75s cubic-bezier(.2,.7,.3,1),
                transform .75s cubic-bezier(.2,.7,.3,1);}
html.js .sobe.ca{opacity:1;transform:none;}

/* ---------- Direita para a esquerda: árabe, persa, urdu ---------- */
[dir="rtl"] .titulo,
[dir="rtl"] .enunciado,
[dir="rtl"] .resposta,
[dir="rtl"] .explicacao,
[dir="rtl"] .aferir,
[dir="rtl"] .contador,
[dir="rtl"] .intro-recursos,
[dir="rtl"] .aviso-escola,
[dir="rtl"] .identificacao,
[dir="rtl"] .legal{text-align:right;}

/* A risca da chamada e do aviso trocam de lado. */
[dir="rtl"] .aviso-escola,
[dir="rtl"] .nota-exame,
[dir="rtl"] .destaque{border-left:0;border-right:3px solid var(--marca);
                      padding-left:0;padding-right:16px;}
[dir="rtl"] .subtitulo{text-align:right;}

/* O ícone da muleta muda de lado com o texto. */
[dir="rtl"] .muleta{flex-direction:row-reverse;}

/* As perguntas podem estar noutra língua que a da interface — em árabe
   a interface, em inglês o exame. Sem isto o browser aplica a direcção
   árabe ao inglês e a pontuação salta para o lado errado:
   "In this situation:" fica ":In this situation". */
[dir="rtl"] .enunciado,
[dir="rtl"] .resposta,
[dir="rtl"] .explicacao{direction:ltr;text-align:left;}

/* Quando a pergunta JÁ está na língua da interface, volta ao normal. */
[dir="rtl"] .cartao.mesma-lingua .enunciado,
[dir="rtl"] .cartao.mesma-lingua .resposta,
[dir="rtl"] .cartao.mesma-lingua .explicacao{direction:rtl;text-align:right;}

/* As listas e a faixa acompanham. */
[dir="rtl"] .linguas{right:auto;left:0;}
[dir="rtl"] .faixa{transform:rotate(3.2deg);}
[dir="rtl"] .recurso p{text-align:left;}
[dir="rtl"] .recurso:hover{padding-left:0;padding-right:14px;}
[dir="rtl"] .resposta:hover:not(:disabled){padding-left:0;padding-right:12px;}
[dir="rtl"] .legal ul,
[dir="rtl"] .legal ol{padding-left:0;padding-right:20px;}
[dir="rtl"] .tabela-legal th,
[dir="rtl"] .tabela-legal td{text-align:right;}

/* ---------- Computador ---------- */
@media (min-width:820px){
  .capa{padding-top:60px;}
  .so-computador{display:inline;}
  .so-telemovel{display:none;}
  .palco{padding-top:90px;}
  .cartao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
  .figura{aspect-ratio:auto;height:100%;min-height:360px;}
  /* Sem fotografia, o cartão deixa de ter duas colunas. */
  .cartao:has(.figura.sem-foto){grid-template-columns:1fr;}
  .miolo{padding:34px 36px 36px;}
  .enunciado{font-size:30px;min-height:calc(1.14em * 2);}
  .subtitulo{font-size:24px;}
  .faixa{font-size:30px;}
  .accoes{flex-direction:row;}
  .accoes .botao{flex:1;}
}

/* No computador, em escrita da direita para a esquerda, o browser já
   inverte a ordem das colunas da grelha. NÃO se mexe no order nem nas
   larguras — inverter à mão em cima da inversão automática devolvia a
   fotografia ao lado esquerdo. */

/* ---------- Telemóvel ---------- */
@media (max-width:819px){
  .envelope{padding:0 18px;}
  .titulo{letter-spacing:-0.05em;}
  .faixa{font-size:21px;margin-top:38px;}
  .subtitulo{font-size:19px;}
  .recurso{gap:16px;}
  .recurso p{display:none;}        /* a linha fica a uma só altura */
  /* O topo nunca empurra nada para fora do ecrã: se os botões não
     couberem ao lado da marca, descem para a linha de baixo, à
     direita. Vale para qualquer largura e qualquer número deles. */
  .topo{flex-wrap:wrap;}
  .marca{font-size:18px;}
  .canto{gap:8px;margin-left:auto;}
  .lingua{padding:8px 14px;}
  .lingua-nome{display:none;}
  .lingua-sigla{display:inline;letter-spacing:.04em;}
  .botao-topo{padding:8px 16px;}
  .engrenagem{padding:9px 11px;}

  /* Dois botões no topo e mais nada: a língua e o menu. Sair, Gestão e
     Parâmetros mudam-se para dentro da lista que o hamburguer abre, e
     a barra horizontal do menu passa a ser essa lista.

     Os botões só se escondem ONDE HÁ hamburguer para os substituir.
     Sem esta condição, o botão de entrar da homepage desaparecia sem
     nada no lugar e ninguém conseguia entrar pelo telemóvel. */
  .canto:has(.hamburguer) .botao-topo{display:none;}
  .hamburguer{display:flex;}
  .so-no-painel{display:block;}

  .menu{display:none;flex-direction:column;gap:0;margin:16px 0 0;
        border:1px solid var(--linha);background:var(--breu-claro);}
  .menu.aberto{display:flex;}
  .menu a{padding:14px 16px;margin-bottom:0;font-size:16px;
          border-bottom:1px solid var(--linha);}
  .menu a:last-child{border-bottom:none;}
  .menu a.aqui{border-bottom-color:var(--linha);
               box-shadow:inset 3px 0 0 var(--marca);}
  .menu a:last-child.aqui{border-bottom-color:transparent;}

  /* ---------- Tabelas da gestão viram fichas ----------
     Sete colunas não cabem num telemóvel, e rolar na horizontal para
     ler um email é trabalho a mais. Cada linha passa a uma ficha com
     duas colunas de campos, e o rótulo de cada valor — que no ecrã
     grande está no cabeçalho — vem do data-rotulo. */
  .tabela-fichas{display:block;font-size:15px;}
  .tabela-fichas thead{display:none;}
  .tabela-fichas tbody{display:block;}
  .tabela-fichas tr{display:grid;grid-template-columns:1fr 1fr;
                    gap:10px 14px;margin:0 0 10px;padding:12px 14px;
                    border:1px solid var(--linha);background:var(--breu-claro);}
  .tabela-fichas tbody tr:nth-child(odd){background:var(--breu-claro);}
  .tabela-fichas td{display:block;padding:0;border:none;min-width:0;
                    overflow-wrap:anywhere;}
  .tabela-fichas td.larga{grid-column:1 / -1;}

  /* O rótulo por cima do valor, em letra pequena. */
  .tabela-fichas td[data-rotulo]::before{content:attr(data-rotulo);
       display:block;font-size:11px;letter-spacing:.06em;
       text-transform:uppercase;color:var(--cinza);margin:0 0 2px;}

  /* O id faz de título da ficha. */
  .tabela-fichas td.ficha-id{font-family:var(--titulo);font-weight:800;
       font-size:16px;color:var(--marca);border-bottom:1px solid var(--linha);
       padding-bottom:8px;}
  .tabela-fichas td.ficha-id::before{content:"#";display:inline;
       font-size:inherit;color:inherit;letter-spacing:0;margin:0;}

  /* Os botões de cada conta em duas colunas, para não fazerem uma
     escada de seis linhas dentro da ficha. */
  .accoes-linha{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
  .ligacao-admin,.ligacao-perigo{text-align:left;}

  .procura .botao{padding:11px 14px;}

  /* Sinais: dois por linha. Com o mínimo de 190px do ecrã grande
     ficava só um por linha e a lista não acabava mais. */
  .sinais{grid-template-columns:1fr 1fr;gap:8px;}
  .sinal img{height:88px;padding:11px;}
  .sinal figcaption{padding:11px 13px 13px;}
  .sinal h3{font-size:14.5px;}
  .sinal p{font-size:13px;line-height:1.45;}
  .familia{font-size:18px;margin-top:28px;}

  /* No um-a-um volta a empilhar: duas colunas num telemóvel dava um
     desenho do tamanho de um selo. */
  .sinais.um-a-um .sinal.visivel{grid-template-columns:1fr;gap:22px;}
  .sinais.um-a-um .sinal img{height:38vh;min-height:190px;max-height:300px;
                             padding:24px;}
  .sinais.um-a-um h3{font-size:21px;margin:0 0 12px;}
  .sinais.um-a-um p{font-size:16px;line-height:1.6;margin:0 0 18px;}

  /* As setas descem para baixo do sinal: de cada lado, num telemóvel,
     roubavam 80px de largura ao desenho, que é a parte que interessa.
     Ficam com área generosa, porque é com o polegar que se anda por
     elas e não têm moldura a dizer onde acaba o botão. */
  body.vista-um .estudo{grid-template-columns:1fr 1fr;gap:10px;
                        grid-template-areas:"conteudo conteudo"
                                            "ant      seg";}
  .nav-botao{padding:16px 0;}
  .nav-botao svg{width:30px;height:30px;}
  .nav-botao[data-ir="-1"]{text-align:left;}
  .nav-botao[data-ir="1"]{text-align:right;}
  .vista-botao{padding:11px 16px;}

  /* Os botões, o combo e o contador não cabem numa linha de telemóvel:
     o combo desce e ocupa a largura toda. */
  html.js .vistas{flex-wrap:wrap;gap:10px 0;}
  .saltar{margin-left:0;order:3;width:100%;}
  .saltar select{max-width:none;flex:1;}
  body.vista-um .vistas .nav-conta{order:2;}

  /* Títulos que só valem no ecrã grande — o nome do modo durante o
     teste, por exemplo. Escondido o título, a folga que lhe estava
     reservada por cima também sai. */
  .conta-titulo.so-grande{display:none;}
  .conta-sem-titulo{padding-top:18px;}
  .recursos{margin-top:70px;}
  .rodape{margin-top:74px;}
  .zona-cartao::after{top:-6px;left:-12px;right:9px;bottom:3px;
                      border-width:9px;}
  .marca-agua{letter-spacing:-0.045em;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
  mark::before{animation:none !important;transform:scaleX(1) !important;}
  .corre{animation:none !important;}
  .figura img{animation:none !important;object-position:50% 50% !important;}
  html.js .sobe{opacity:1 !important;transform:none !important;}
}