/* tiraracarta.pt — css/pagina.css
   Aspeto do site: marcador, cartao das perguntas, bicho, recursos. */

:root{
    --papel:#FFFCF5;
    --tinta:#1A1614;
    --tinta-fraca:#6B635C;
    --linha:#EDE6DA;
    --marca:#3DE1FF;          /* azul fluorescente de marcador */
    --marca-forte:#00B8DE;    /* a mesma, quando precisa de contraste */
    --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;}
  body{background:var(--papel);color:var(--tinta);font-family:var(--corpo);
       font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;}
  .envelope{max-width:540px;margin:0 auto;padding:16px 18px 50px;}

  /* ---------- Topo ---------- */
  .topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
  .marca{font-family:var(--titulo);font-weight:800;font-size:20px;
         color:var(--tinta);letter-spacing:-0.03em;}
  
  .lingua{background:#fff;border:2px solid var(--linha);border-radius:999px;
          font:inherit;font-size:14px;font-weight:500;color:var(--tinta);
          cursor:pointer;padding:7px 15px;text-decoration:none;display:inline-block;}
  .lingua:hover{border-color:var(--marca-forte);}

  /* ---------- Selector de línguas ---------- */
  .seletor{position:relative;}
  .linguas{position:absolute;top:calc(100% + 6px);right:0;z-index:10;
           list-style:none;margin:0;padding:6px;min-width:180px;
           max-height:60vh;overflow-y:auto;
           background:#fff;border:2px solid var(--linha);border-radius:14px;
           box-shadow:0 8px 24px rgba(0,0,0,.08);}
  .linguas li{margin:0;}
  .linguas a{display:block;padding:8px 12px;border-radius:9px;
             color:var(--tinta);text-decoration:none;font-size:15px;}
  .linguas a:hover{background:var(--marca-fundo);}
  .linguas a.actual{font-weight:600;background:var(--marca-fundo);}

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

  /* A linha do aviso troca de lado. */
  [dir="rtl"] .aviso-escola{border-left:0;border-right:3px solid var(--marca);
                            padding:2px 14px 2px 0;}

  /* 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;}

  /* O Zé e as listas acompanham. */
  [dir="rtl"] .bicho{right:auto;left:20px;}
  [dir="rtl"] .ze-rodape{right:auto;left:0;transform:scaleX(-1);}
  [dir="rtl"] .linguas{right:auto;left:0;}
  [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;}

  /* No computador a fotografia passa sozinha para o outro lado: em
     direction:rtl 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.
     Só os cantos arredondados é que têm de trocar de lado. */
  @media (min-width:800px){
    [dir="rtl"] .figura{border-radius:0 20px 20px 0;}
    [dir="rtl"] .bicho{left:34px;right:auto;}
  }

  /* ---------- Título ---------- */
  .titulo{font-family:var(--titulo);font-weight:800;font-size:38px;line-height:1.12;
          letter-spacing:-0.045em;margin:0 0 10px;}
  .titulo span{display:block;}

  /* O marcador: a cor passa por trás das palavras, como quem sublinha
     à mão. Não é fundo do bloco — é fundo do texto, e só das palavras
     que interessam. */
  /* O marcador: 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 repetido. */
  mark{background:none;color:var(--tinta);position:relative;z-index:0;
       padding:.04em .1em;}
  /* O traço cobre só a palavra: sem transbordo lateral, senão apanha
     o espaço da palavra anterior e a pontuação seguinte. */
  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 em vez
     de por trás delas. Serve para nomes e palavras curtas. */
  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;}
  .subtitulo{font-size:17px;color:var(--tinta-fraca);margin:0 0 24px;}
  .so-computador{display:none;}   /* no telemóvel o subtítulo vai mais curto */
  .so-telemovel{display:inline;}

  /* ---------- Cartão da pergunta ---------- */
  .painel{display:none;}
  .painel.visivel{display:block;}

  .zona-cartao{position:relative;}
  .cartao{background:#fff;border-radius:22px;border:2px solid var(--linha);}
  /* As fotografias do exame são horizontais: a faixa acompanha-as. */
  .figura{background:#F0EDE5;aspect-ratio:16/9;border-radius:20px 20px 0 0;
          display:flex;align-items:center;justify-content:center;
          overflow:hidden;color:#B0A492;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;}

  /* O bicho espreita por cima da aresta de topo: o corpo fica acima do
     cartão e só as mãos é que entram lá dentro. */
  /* Ancorado pelo FUNDO: bottom:100% encosta a base da imagem à aresta
     de topo do cartão, e a margem negativa é a profundidade a que as
     mãos entram. Assim funciona com qualquer altura de imagem. */
  .bicho{position:absolute;bottom:100%;margin-bottom:-19px;right:20px;
         width:130px;height:auto;
         z-index:2;pointer-events:none;user-select:none;
         animation:espreitar 1.6s ease-out .35s both;}
  @keyframes espreitar{from{opacity:0;} to{opacity:1;}}
  .miolo{padding:20px 18px 22px;}

  .enunciado{font-size:21px;font-weight:600;line-height:1.32;margin:0 0 10px;}

  /* A muleta */
  .muleta{display:inline-flex;align-items:center;gap:7px;
          background:var(--marca-fundo);border:0;border-radius:999px;
          font:inherit;font-size:14px;font-weight:600;color:#04607A;
          cursor:pointer;padding:7px 14px;margin-bottom:18px;}
  .muleta::before{content:"◐";font-size:15px;}
  .muleta.activa::before{content:"◑";}
  .muleta:hover{background:#C7F2FC;}

  .respostas{display:flex;flex-direction:column;gap:11px;}
  .resposta{width:100%;text-align:left;font-family:var(--corpo);font-size:17px;
            font-weight:500;background:#fff;color:var(--tinta);
            border:2px solid var(--linha);border-bottom-width:4px;
            border-radius:15px;padding:15px 17px;cursor:pointer;
            transition:border-color .12s,background .12s,transform .06s;}
  .resposta:hover:not(:disabled){border-color:var(--marca-forte);background:#F8FDFF;}
  .resposta:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px;}
  .resposta:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}
  .resposta.certa{background:var(--verde-fundo);border-color:var(--verde);
                  color:#0B6E36;font-weight:600;}
  .resposta.errada{background:var(--vermelho-fundo);border-color:var(--vermelho);
                   color:#A81E17;}
  .resposta:disabled{cursor:default;}

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

  .progresso{display:flex;gap:5px;margin-top:20px;}
  .ponto{height:9px;flex:1;background:var(--linha);transition:background .2s;
         -webkit-mask-size:100% 100%;mask-size:100% 100%;
         -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
         -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 12" preserveAspectRatio="none"><path d="M1 4c22-3 52-2 76-2 12 0 20 1 22 3 1 3 0 5-2 6-26 2-60 1-84 1-8 0-12-1-13-3-1-2 0-4 1-5z"/></svg>');
         mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 12" preserveAspectRatio="none"><path d="M1 4c22-3 52-2 76-2 12 0 20 1 22 3 1 3 0 5-2 6-26 2-60 1-84 1-8 0-12-1-13-3-1-2 0-4 1-5z"/></svg>');}
  .ponto.feito{background:var(--marca);}

  /* 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(--tinta-fraca);
              border-left:3px solid var(--marca);padding:2px 0 2px 14px;
              margin:22px 0 0;max-width:620px;}
  [dir="rtl"] .nota-exame{border-left:0;border-right:3px solid var(--marca);
                          padding:2px 14px 2px 0;text-align:right;}

  /* ---------- Resultado ---------- */
  .cartucho{margin-bottom:20px;}
  .marca-agua{font-family:var(--titulo);font-weight:800;font-size:68px;
              line-height:1.15;letter-spacing:-0.03em;margin:0 0 10px;}
  .marca-agua small{font-family:var(--titulo);font-size:26px;font-weight:500;}
  .aferir{font-size:17px;color:var(--tinta-fraca);margin:0;}
  .contador{font-size:15px;color:var(--tinta-fraca);margin:0 0 22px;}

  .accoes{display:flex;flex-direction:column;gap:11px;}
  .botao{display:block;text-decoration:none;border:0;
         font-family:var(--titulo);font-weight:600;font-size:18px;letter-spacing:-0.02em;padding:15px;
         border-radius:15px;cursor:pointer;text-align:center;
         transition:transform .06s,background .12s;}
  .botao:active{transform:translateY(2px);}
  .botao-linha{background:#fff;border:2px solid var(--linha);border-bottom-width:4px;
               color:var(--tinta);}
  .botao-linha:hover{border-color:var(--marca);}
  .botao-cheio{background:var(--marca);border:2px solid var(--marca);
               border-bottom:4px solid var(--marca-forte);color:var(--tinta);}
  .botao-cheio:hover{background:var(--marca-forte);}
  .botao:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}

  /* ---------- Recursos ---------- */
  .recursos{margin-top:44px;}
  .recursos h2{font-family:var(--titulo);font-weight:800;font-size:24px;letter-spacing:-0.03em;
               margin:0 0 16px;}
  /* Introdução do índice: leve, para não competir com o título. */
  .intro-recursos{font-weight:300;font-size:16px;line-height:1.6;
                  color:var(--tinta-fraca);margin:-6px 0 20px;}
  .lista-recursos{display:grid;grid-template-columns:1fr;gap:9px;}
  .recurso{display:block;text-decoration:none;color:inherit;background:#fff;
           border-radius:15px;padding:13px 16px;border:2px solid var(--linha);
           transition:border-color .12s,transform .1s;}
  .recurso:hover{transform:translateY(-2px);border-color:var(--marca-forte);}
  .recurso:focus-visible{outline:3px solid var(--marca);outline-offset:3px;}
  .recurso h3{font-family:var(--titulo);font-weight:600;font-size:17px;
              letter-spacing:-0.02em;margin:0 0 1px;line-height:1.25;}
  .recurso p{margin:0;font-size:14.5px;line-height:1.4;}
  .recurso p{color:var(--tinta-fraca);opacity:1;}

  .recursos-curto{margin-top:32px;}
  .recursos-curto h2{font-size:19px;}
  .recursos-curto .intro-recursos{display:none;}

  /* ---------- Páginas de texto (termos, privacidade, cookies) ---------- */
  .legal{max-width:660px;padding-bottom:20px;}
  .titulo-legal{font-family:var(--titulo);font-weight:800;font-size:34px;
                letter-spacing:-0.03em;line-height:1.1;margin:14px 0 6px;}
  .data-legal{font-size:14px;color:var(--tinta-fraca);margin:0 0 32px;}
  .legal h2{font-family:var(--titulo);font-weight:600;font-size:21px;
            letter-spacing:-0.02em;margin:34px 0 10px;}
  .legal h3{font-size:17px;font-weight:600;margin:24px 0 6px;}
  .legal p{margin:0 0 14px;line-height:1.65;}
  .legal ul{margin:0 0 16px;padding-left:20px;}
  .legal li{margin-bottom:6px;line-height:1.6;}
  .legal a{color:var(--tinta);text-decoration:underline;
           text-decoration-color:var(--marca-forte);text-decoration-thickness:2px;
           text-underline-offset:2px;}
  .legal a:hover{background:var(--marca-fundo);}

  /* Parágrafo que não pode passar despercebido. */
  .destaque{background:var(--marca-fundo);border-radius:var(--raio);
            padding:14px 16px;margin:0 0 16px;}

  .tabela-legal{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
  .tabela-legal th{text-align:left;font-weight:600;padding:9px 10px;
                   border-bottom:2px solid var(--linha);vertical-align:top;}
  .tabela-legal td{padding:9px 10px;border-bottom:1px solid var(--linha);
                   vertical-align:top;line-height:1.5;}

  /* ---------- Rodapé ---------- */
  .rodape{margin-top:56px;padding-top:26px;
          border-top:2px solid var(--linha);}

  /* O Zé deitado sobre a linha que fecha o aviso da escola.
     Ancorado pelo fundo, assenta na linha seja qual for a altura. */
  .linha-ze{position:relative;height:1px;background:var(--linha);
            margin:0 0 26px;}
  .ze-rodape{position:absolute;bottom:0;right:0;
             width:115px;height:auto;
             pointer-events:none;user-select:none;}

  /* Navegação: o bloco com mais peso dos três. */
  /* As duas listas são o mesmo bloco de navegação, não duas secções:
     ficam juntas, com pouco espaço entre linhas. */
  .rodape ul{list-style:none;margin:0 0 7px;padding:0;
             display:flex;flex-wrap:wrap;gap:6px 20px;line-height:1.3;}
  .rodape a{color:var(--tinta-fraca);text-decoration:none;font-size:15px;}
  .rodape a:hover{color:var(--tinta);text-decoration:underline;
                  text-decoration-color:var(--marca-forte);text-decoration-thickness:3px;}

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

  /* O aviso de que isto não é uma escola de condução. Em todas as páginas.
     Sem caixa de cor: é obrigatório e tem de ser visível, mas não pode
     competir com o produto. Uma linha fina à esquerda chega. */
  .aviso-escola{border-left:3px solid var(--marca);padding:2px 0 2px 14px;
                margin:0 0 23px;font-size:14px;line-height:1.6;
                color:var(--tinta-fraca);max-width:660px;}
  .aviso-escola strong{font-weight:600;color:var(--tinta);}

  .identificacao{font-size:13px;color:#9A928A;line-height:1.7;
                 margin:0 0 14px;max-width:660px;}
  .identificacao a{color:var(--tinta-fraca);text-decoration:underline;}
  .identificacao a:hover{color:var(--tinta);}

  /* A marca do topo passou a ligação nas páginas de texto. */
  a.marca{text-decoration:none;}

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

  /* ---------- Computador ---------- */
  @media (min-width:800px){
    .envelope{max-width:900px;padding-top:38px;}
    .titulo{font-size:56px;}
    .so-computador{display:inline;}
    .so-telemovel{display:none;}
    .cartao{display:grid;grid-template-columns:340px minmax(0,1fr);}
    .figura{aspect-ratio:auto;height:100%;min-height:320px;border-radius:20px 0 0 20px;}
    /* Sem fotografia, o cartão deixa de ter duas colunas. */
    .cartao:has(.figura.sem-foto){grid-template-columns:1fr;}
    .bicho{width:165px;margin-bottom:-25px;right:34px;}
    .miolo{padding:28px 30px 30px;}
    .lista-recursos{grid-template-columns:1fr 1fr;gap:10px;}
    .ze-rodape{width:140px;}
    .cartucho,.contador,.accoes,.recursos-curto{max-width:540px;}
    .accoes{flex-direction:row;}
    .accoes .botao{flex:1;}
  }

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