/* ═══════════════════════════════════════════════════════════════════════
   page-ferramentas.css — componentes só da /ferramentas.

   O mundo visual (hero cénico, tipografia, botões, ícones, rodapé) vem de
   dadiva-inner.css; aqui ficam apenas o índice dos grupos, a grelha de
   ferramentas com as três linhas práticas, o painel do Obsidian com as
   quatro figuras, o painel das GPUs e o fecho.

   ORDEM NO <head> (não trocar): este ficheiro entra NO LUGAR DO <style> da
   página, ou seja ANTES de dadiva.css / dadiva-nav.css / dadiva-inner.css.
   É essa ordem que deixa a base ganhar sem !important; onde é preciso
   ganhar uma regra da base usa-se .inner-page.page-ferramentas (duas
   classes). Nada aqui usa !important, salvo as três linhas de
   prefers-reduced-motion, que têm de desfazer um estado inicial.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* A rede de segurança contra deslizes na horizontal fica no <html>: é de
   lá que o browser a leva para a janela. No <body> é que NÃO pode estar —
   um overflow no body faz dele o contentor que rola, e uma barra
   position:sticky lá dentro (a dos grupos) deixa de colar ao topo. */
html { background: #fffdf5; overflow-x: hidden; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* A cena já se desfaz em marfim; sem isto sobrava uma faixa vazia grande
   entre o fim da nuvem e a primeira linha de conteúdo. */
.inner-page.page-ferramentas .scenic-hero { margin-bottom: var(--s4); }

/* ── Índice dos grupos ─────────────────────────────────────────────── */
/* Sem migalhas: nenhuma das quatro páginas interiores tem breadcrumb.
   O regresso à jornada vive na marca da barra e no botão do fecho.

   É a MESMA barra da /videos (.sec-nav / .sec-nav__rail / .sec-chip), com
   o mesmo desenho de pílula: marfim, contorno claro, letra navy, ícone
   verde — e azul só na pílula do grupo em que estamos.
   dadiva-nav.css já faz esta barra descer o que a barra do site ocupa
   (body.inner-page .sec-nav { top: var(--stuck-nav-h) }).

   --secnav-h é o que as duas barras coladas ao topo ocupam: é o que as
   âncoras dos grupos descontam. Este valor é só o ponto de partida até o
   script medir a barra a sério — ver medirSecNav(). */
.page-ferramentas { --secnav-h: 150px; }
.page-ferramentas .sec-nav {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(-1 * var(--main-pad)) var(--s5);
  background: rgba(255, 253, 245, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 #10294f14;
}
.page-ferramentas .sec-nav__rail {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 11px max(var(--main-pad), calc((100% - 1120px) / 2));
  /* Carril (ecrãs estreitos): a pílula que não cabe desaparece por baixo de
     um esfumado — é o degradé que diz "há mais para o lado".

     O esfumado é ACESO LADO A LADO pelo script (data-mais="esq dir", ver
     marcarPontasDoCarril na página): um degradé fixo nas duas pontas
     apagava a primeira pílula com o carril ainda no princípio e a última
     com ele já no fim, quando não há nada para lá delas. Assim só esbate a
     ponta por onde há mesmo mais — e, quando tudo cabe, não esbate nada.
     Sem JS fica o carril limpo e a rolar, que é o comportamento base. */
  --fade-esq: 0px;
  --fade-dir: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  /* Para o teclado: ao saltar de pílula em pílula, o browser traz a próxima
     para dentro do carril — com esta folga ela pára DEPOIS do esfumado, em
     vez de ficar meia apagada com o anel de foco por baixo do degradé. */
  scroll-padding-inline: 44px;
}
.page-ferramentas .sec-nav__rail[data-mais~="esq"] { --fade-esq: 40px; }
.page-ferramentas .sec-nav__rail[data-mais~="dir"] { --fade-dir: 40px; }
/* Com o teclado o esfumado sai da frente por inteiro: uma pílula que já
   esteja toda dentro do carril não é rolada por ninguém, e sem isto o anel
   de foco da penúltima ficava meio apagado por baixo do degradé. O
   esfumado é enfeite; o foco não é. Browsers sem :has() ignoram a regra e
   ficam como estavam. */
.page-ferramentas .sec-nav__rail:has(.sec-chip:focus-visible) {
  --fade-esq: 0px;
  --fade-dir: 0px;
}
/* Abaixo dos 1024 o carril continua a rolar, mas se os grupos couberem
   ficam ao meio, como no PC. As margens automáticas fazem isso sem o
   defeito clássico do justify-content:center num contentor que rola:
   quando não há espaço livre valem zero, e a primeira pílula continua a
   chegar-se à berma esquerda em vez de ficar inalcançável. */
@media (max-width: 1023px) {
  .page-ferramentas .sec-chip:first-child { margin-left: auto; }
  .page-ferramentas .sec-chip:last-child { margin-right: auto; }
}
@media (min-width: 1024px) {
  .page-ferramentas .sec-nav__rail {
    flex-wrap: wrap; justify-content: center;
    gap: 8px 8px; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
}
.page-ferramentas .sec-nav__rail::-webkit-scrollbar { display: none; }
.page-ferramentas .sec-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--ivory); color: var(--navy);
  font: 700 14px/1 var(--sans); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.page-ferramentas .sec-chip:hover { background: #f2f8ff; border-color: #9fc0e6; }
.page-ferramentas .sec-chip[aria-current="true"] {
  background: #eef4fd; border-color: var(--blue); color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.inner-page.page-ferramentas .sec-chip .ico { width: 1.15em; height: 1.15em; }

/* ── Grupos ─────────────────────────────────────────────────────────── */
.page-ferramentas .groups {
  display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px);
}
.page-ferramentas .group {
  max-width: 1120px; width: 100%; margin: 0 auto;
  /* Para o título do grupo parar POR BAIXO das duas barras coladas ao
     topo (a do site + a dos grupos), não atrás delas. */
  scroll-margin-top: calc(var(--secnav-h) + 14px);
}
.page-ferramentas .group-head { margin-bottom: var(--s4); max-width: 60ch; }
.page-ferramentas .group-n {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); opacity: .85;
}
.inner-page.page-ferramentas .group-head h2 { margin: 0 0 12px; }
.page-ferramentas .group-sub {
  margin: 0; max-width: 58ch; text-wrap: balance;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--muted);
}

/* ── Grelha de ferramentas: 1 / 2 / 3 colunas ───────────────────────── */
.page-ferramentas .tool-grid {
  list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--s3);
}
/* 701px é o mesmo degrau do acordeão das alternativas (ver ao fundo): até
   aos 700 a grelha é de uma coluna e as restantes ferramentas estão dentro
   de uma <details>; a partir daí estão à vista e a grelha divide-se. Ter os
   dois degraus no mesmo sítio evita o caso híbrido em que o resumo "ver
   mais" ficava sozinho na segunda coluna, ao lado do cartão. */
@media (min-width: 701px) { .page-ferramentas .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .page-ferramentas .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.page-ferramentas .tool-grid.is-single { grid-template-columns: 1fr; }

/* Tablet (2 colunas): quando o grupo tem um número PAR de ferramentas
   secundárias (2 ou 4), o cartão de entrada — o que tem a pílula "começa
   aqui" — ocupa a linha toda e as outras emparelham por baixo, sem buracos.
   Com um número ímpar não se faz nada: o cartão de entrada emparelha com a
   primeira secundária e a linha fecha na mesma. */
@media (min-width: 701px) and (max-width: 999px) {
  .page-ferramentas .tool-grid[data-alts="2"] > li:first-child,
  .page-ferramentas .tool-grid[data-alts="4"] > li:first-child { grid-column: 1 / -1; }
}

.page-ferramentas .tool {
  display: flex; flex-direction: column; gap: 13px; height: 100%;
  padding: var(--s3); border: 1px solid var(--line); border-radius: 18px;
  background: var(--ivory); color: var(--navy); text-decoration: none;
  box-shadow: 0 1px 0 rgba(16, 41, 79, .04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.page-ferramentas a.tool:hover,
.page-ferramentas a.tool:focus-visible {
  transform: translateY(-3px); border-color: #9fc0e6; background: #fbfdff;
  box-shadow: 0 10px 24px rgba(16, 41, 79, .09);
}
.page-ferramentas .tool-head { display: flex; align-items: center; gap: 14px; }
.page-ferramentas .tool-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: var(--wash, #e7f1ea);
}
.inner-page.page-ferramentas .tool-badge .ico { width: 26px; height: 26px; vertical-align: 0; color: var(--green); }
.page-ferramentas .tool-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-ferramentas .tool-nm {
  font-family: var(--sans); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; color: var(--green); line-height: 1.2;
}
.page-ferramentas .tool-role {
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted);
}
.page-ferramentas .tool-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 24px; font-size: 14px; font-weight: 800; color: var(--blue);
}
.inner-page.page-ferramentas .tool-go .ico { width: 16px; height: 16px; color: currentColor; vertical-align: 0; }
.page-ferramentas a.tool:hover .tool-go { text-decoration: underline; text-underline-offset: 4px; }

/* ── As três linhas práticas ────────────────────────────────────────────
   para quê · como começar em UM passo · custo honesto. É isto que faz a
   diferença entre uma lista de links e uma página que se usa. O rótulo é
   uma coluna fixa de 66px: a mais estreita onde "para quê" cabe numa linha
   em PT e em EN. Abaixo dos 520px o rótulo passa a ficar POR CIMA do
   texto, para os comandos terem a largura toda e não partirem a meio. */
.page-ferramentas .tool-facts { display: flex; flex-direction: column; gap: 9px; }
.page-ferramentas .fact {
  display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: start;
}
.page-ferramentas .fact-k {
  font-family: var(--sans); font-size: 10px; font-weight: 800; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); opacity: .78; padding-top: 3px;
}
.page-ferramentas .fact-v { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.page-ferramentas .fact-v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; line-height: 1.4;
  /* Sem moldura de propósito: um comando longo parte-se em duas linhas
     dentro de um cartão estreito e duas caixas com contorno liam-se como
     dois comandos. Só o fundo esverdeado e a monoespaçada, que chegam. */
  background: #eaf2e7; border-radius: 5px;
  padding: 1.5px 5px; color: var(--green); overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 520px) {
  .page-ferramentas .tool-facts { gap: 12px; }
  .page-ferramentas .fact { grid-template-columns: 1fr; gap: 2px; }
  .page-ferramentas .fact-k { padding-top: 0; }
}

/* Grupo com uma só ferramenta: cartão largo, deitado — variação de
   propósito, para não deixar um cartão órfão numa grelha de três. Hoje
   nenhum grupo está nesse caso; fica porque o buildGroups() continua a
   saber fazê-lo se algum dia voltar a haver um. */
@media (min-width: 1000px) {
  .page-ferramentas .tool--wide { flex-direction: row; align-items: flex-start; gap: var(--s4); }
  .page-ferramentas .tool--wide .tool-head { flex: 0 0 auto; width: 270px; }
  .page-ferramentas .tool--wide .tool-facts { flex: 1 1 auto; }
  .page-ferramentas .tool--wide .tool-go { margin-top: 0; flex: 0 0 auto; align-self: center; }
  .page-ferramentas .tool--wide .tool-start { flex: 0 0 auto; align-self: center; }
}

/* ── Painel do Obsidian: as quatro figuras ──────────────────────────────
   Uma ideia por figura, desenhada em SVG (o mesmo traço do site, texto a
   sério, nunca lettering dentro de uma imagem). As mesmas quatro existem
   também em assets/obsidian/ como WebP e PNG de 1600px, para partilhar. */
.page-ferramentas .obs-panel {
  margin-top: var(--s4); padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid #dbe7dd; border-radius: 22px;
  background: linear-gradient(180deg, #f7fbf6 0%, var(--ivory) 62%);
}
.page-ferramentas .obs-top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); }
.page-ferramentas .obs-badge {
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green);
}
.inner-page.page-ferramentas .obs-top .ico { color: var(--green); }
.page-ferramentas .obs-h {
  margin: 0 0 12px; max-width: 26ch;
  font-family: var(--serif); font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 400; line-height: 1.18; letter-spacing: -.02em; color: var(--green);
}
.page-ferramentas .obs-p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--navy); }
.page-ferramentas .obs-p + .obs-p { margin-top: 12px; }

.page-ferramentas .obs-figs {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 28px);
  margin: var(--s4) 0 0;
}
/* Duas colunas só a partir dos 900: abaixo disso cada figura encolhia
   tanto que os rótulos dentro do SVG (que escalam com a caixa) ficavam
   mais pequenos do que o texto da legenda. */
@media (min-width: 900px) { .page-ferramentas .obs-figs { grid-template-columns: 1fr 1fr; } }
/* O script move as figuras para dentro do slot dentro de um embrulho só
   (assim mantém UMA referência viva enquanto o #groups é reescrito). O
   embrulho dissolve-se para as quatro figuras serem filhas da grelha. */
.page-ferramentas .obs-figs-in { display: contents; }
.page-ferramentas .obs-fig {
  margin: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--ivory); overflow: hidden;
}
.page-ferramentas .obs-fig .obs-svg { display: block; width: 100%; height: auto; }
.page-ferramentas .obs-cap {
  padding: 14px 18px 16px; border-top: 1px solid #e8efe6;
  font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.page-ferramentas .obs-cap b { color: var(--green); font-weight: 800; }
/* Texto dentro do SVG. Tem de ser grande em unidades do viewBox: a caixa
   encolhe com o ecrã e leva o texto com ela. Estes valores são os que
   deixam os rótulos legíveis desde os 320px até ao PC. */
.page-ferramentas .obs-lab { font: 700 26px/1 var(--sans); letter-spacing: -.01em; }
.page-ferramentas .obs-hub { font: 800 33px/1 var(--sans); letter-spacing: -.02em; }
.page-ferramentas .obs-mono { font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Primeiros passos, em três linhas numeradas */
.page-ferramentas .obs-steps {
  display: grid; gap: 12px; margin: var(--s4) 0 0; padding: 0; list-style: none;
  counter-reset: passo;
}
@media (min-width: 760px) { .page-ferramentas .obs-steps { grid-template-columns: repeat(3, 1fr); } }
/* O texto do passo vem dentro de um <span>: numa caixa flex, um <code> solto
   no meio da frase virava um item da fila e saltava para o fim da linha,
   deixando o ponto final sozinho. Dois itens só — número e frase. */
.page-ferramentas .obs-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--ivory); font-size: 15px; line-height: 1.5; color: var(--muted);
}
.page-ferramentas .obs-steps li > span { min-width: 0; }
.page-ferramentas .obs-steps li::before {
  counter-increment: passo; content: counter(passo);
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #eaf3ea; color: var(--green);
  font: 800 13px/1 var(--sans);
}
.page-ferramentas .obs-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: #eaf2e7;
  border-radius: 5px; padding: 1.5px 5px; color: var(--green);
  /* [[ ]] tem um espaço lá dentro e partia-se em duas linhas, com o "[["
     numa e o "]]" noutra: parecia um erro de escrita. */
  white-space: nowrap;
}

/* ── Animação das figuras ───────────────────────────────────────────────
   As classes só ganham efeito depois de o script acrescentar .anim: sem
   JS (ou se o observador não disparar) as figuras ficam no estado final,
   nunca invisíveis. */
.page-ferramentas .obs-fig.anim .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.page-ferramentas .obs-fig.anim .pop { opacity: 0; }
.page-ferramentas .obs-fig.anim.is-vis .draw {
  animation: obsDraw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: var(--d, 0s);
}
.page-ferramentas .obs-fig.anim.is-vis .pop {
  animation: obsPop .55s ease forwards; animation-delay: var(--d, 0s);
}
.page-ferramentas .obs-fig.anim.is-vis .breathe {
  transform-box: fill-box; transform-origin: center;
  animation: obsBreathe 5.5s ease-in-out 1.2s infinite;
}
.page-ferramentas .obs-fig.anim.is-vis .spin {
  transform-box: fill-box; transform-origin: center;
  animation: obsSpin 26s linear infinite;
}
@keyframes obsDraw { to { stroke-dashoffset: 0; } }
@keyframes obsPop { to { opacity: 1; } }
@keyframes obsBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes obsSpin { to { transform: rotate(360deg); } }

/* ── Painel da ideia grátis (GPUs) ──────────────────────────────────── */
.page-ferramentas .gpu-panel {
  margin-top: var(--s4); padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid #efe2ab; border-radius: 18px;
  background: linear-gradient(180deg, #fffaea 0%, #fffdf5 68%);
}
.page-ferramentas .gpu-top { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s2); }
.page-ferramentas .gpu-badge {
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #6b5310;
}
.inner-page.page-ferramentas .gpu-top .ico { color: #6b5310; }
.page-ferramentas .gpu-h {
  margin: 0 0 12px; max-width: 24ch;
  font-family: var(--serif); font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 400; line-height: 1.18; letter-spacing: -.02em; color: var(--green);
}
.page-ferramentas .gpu-p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--navy); }
.page-ferramentas .gpu-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); }
.page-ferramentas .gpu-links .chip { text-decoration: none; }
.page-ferramentas .gpu-links .chip:hover { background: #e6f0ff; }
.inner-page.page-ferramentas .gpu-links .chip .ico { width: 15px; height: 15px; color: currentColor; vertical-align: 0; }
/* No PC o painel tem a largura da secção (1120px) e o texto acabava aos
   ~60%: sobravam 447px de âmbar vazio à direita, com a borda a denunciá-lo.
   A partir dos 1024px passa a duas colunas — o texto à esquerda, as duas
   pílulas empilhadas numa calha à direita, centradas ao alto do bloco. */
@media (min-width: 1024px) {
  .page-ferramentas .gpu-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    column-gap: var(--s5);
    align-items: center;
  }
  .page-ferramentas .gpu-top,
  .page-ferramentas .gpu-h,
  .page-ferramentas .gpu-p { grid-column: 1; }
  .page-ferramentas .gpu-p { max-width: 70ch; }
  .page-ferramentas .gpu-links {
    grid-column: 2;
    /* São três os irmãos da coluna 1 (rótulo, título, texto) e as linhas
       aqui são todas implícitas: `1 / -1` resolvia para a primeira linha
       explícita (nenhuma) e a calha encostava-se ao topo. */
    grid-row: 1 / span 3;
    align-self: center;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .page-ferramentas .gpu-links .chip { justify-content: center; width: 100%; }
}

/* ── Fecho ──────────────────────────────────────────────────────────── */
.page-ferramentas .closing { max-width: 1120px; margin: clamp(64px, 9vw, 104px) auto 0; }
.page-ferramentas .honest {
  margin: 0 0 var(--s4); text-align: center;
  font-size: clamp(16px, 1.5vw, 19px); font-style: italic; color: var(--muted);
}
.page-ferramentas .closing-panel {
  padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line);
  border-radius: 22px; background: var(--ivory); text-align: center;
  box-shadow: 0 1px 0 rgba(16, 41, 79, .04);
}
.inner-page.page-ferramentas .closing-panel h2 { margin: 0 auto 14px; max-width: 20ch; }
.page-ferramentas .closing-panel p {
  margin: 0 auto; max-width: 52ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--muted);
}
.page-ferramentas .closing-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--s4);
}
.inner-page.page-ferramentas .closing-actions .ico { width: 18px; height: 18px; color: currentColor; vertical-align: 0; }

/* ── Telemóvel ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* devolve à hero a margem que a base lhe dá no telemóvel */
  .inner-page.page-ferramentas .scenic-hero { margin-bottom: var(--s3); }
  /* A nuvem quente que garante o contraste é mais larga nesta página: a
     cena da oficina tem a moldura escura da porta de um lado e a mesa com
     os livros do outro, e eram as PONTAS das linhas (o fim do sobretítulo
     a 320, a segunda linha do subtítulo a 360/390) que caíam fora do
     núcleo opaco e desciam o contraste abaixo de AA. Medido em pixéis. */
  .inner-page.page-ferramentas .scenic-hero__inner::before { inset: -32% -30%; }
  .page-ferramentas { --secnav-h: 118px; }
  .page-ferramentas .sec-nav { margin-bottom: var(--s4); }
  .page-ferramentas .sec-nav__rail { padding: 8px var(--main-pad); }
  .page-ferramentas .group-head { margin-bottom: var(--s3); }
  .page-ferramentas .tool { padding: 20px; border-radius: 16px; }
  .page-ferramentas .tool-badge { width: 46px; height: 46px; border-radius: 14px; }
  .inner-page.page-ferramentas .tool-badge .ico { width: 23px; height: 23px; }
  .page-ferramentas .tool-nm { font-size: 18px; }
  .page-ferramentas .closing-actions .button,
  .page-ferramentas .closing-actions .cta { width: 100%; }

  /* As figuras do Obsidian passam a sangrar de berma a berma. Não é
     estilo: a 390px uma figura dentro do painel ficava com 302px de largo
     e os rótulos dentro do SVG desciam abaixo dos 11px. A sangria devolve
     ~90px de largura a cada figura e põe os rótulos outra vez legíveis. */
  .page-ferramentas .obs-panel {
    margin-inline: calc(-1 * var(--main-pad));
    padding-inline: 0; border-radius: 0; border-left: 0; border-right: 0;
  }
  .page-ferramentas .obs-panel > :not(.obs-figs) { padding-inline: var(--main-pad); }
  .page-ferramentas .obs-figs { margin-top: var(--s3); gap: 0; }
  .page-ferramentas .obs-fig {
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  }
  .page-ferramentas .obs-fig:first-child { border-top: 1px solid var(--line); }
  .page-ferramentas .obs-cap { padding-inline: var(--main-pad); }
  .page-ferramentas .obs-steps { padding-inline: var(--main-pad); }
}
@media (max-width: 380px) {
  .page-ferramentas .tool { padding: 18px; }
  .page-ferramentas .sec-chip { font-size: 13.5px; padding: 0 13px; }
  /* Num ecrã destes o sobretítulo ia de berma a berma e as pontas saíam
     do núcleo opaco da nuvem (p5 de 1,45:1 a 320px). Encurtar a linha
     resolve sem apagar a pintura: p5 passa a 7,85:1 e a cena fica com a
     força toda — era isso ou uma nuvem gigante que comia a oficina. */
  .inner-page.page-ferramentas .scenic-hero .eyebrow { font-size: 12px; letter-spacing: .07em; }
}

@media (prefers-reduced-motion: reduce) {
  .page-ferramentas .tool { transition: none; }
  .page-ferramentas a.tool:hover { transform: none; }
  .page-ferramentas .sec-chip { transition: none; }
}

/* A pílula "começa aqui" nunca parte: são duas palavras curtas e em
   versalete partidas ficam com ar de erro (verificado em PT e EN). */
.page-ferramentas .tool-start {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff6c8;
  color: #6b5310;
  font: 800 11px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-ferramentas .alts-wrap { list-style: none; }
.page-ferramentas details.alts > ul { list-style: none; }
@media (min-width: 701px) {
  .page-ferramentas .alts-wrap,
  .page-ferramentas details.alts,
  .page-ferramentas details.alts > ul {
    display: contents;
  }
  /* O Chrome (e o Safari) passaram a embrulhar o conteúdo de uma <details>
     numa caixa própria, ::details-content. Sem a dissolver também, a
     cadeia de display:contents parava aí: as restantes ferramentas ficavam
     empilhadas dentro de uma coluna só, com bolinhas de lista à vista e
     uma terceira coluna vazia ao lado. Nos browsers que ainda não
     conhecem o pseudo-elemento esta regra é simplesmente ignorada — e lá
     a cadeia já funcionava. */
  .page-ferramentas details.alts::details-content { display: contents; }
  .page-ferramentas details.alts > summary { display: none; }
}
@media (max-width: 700px) {
  .page-ferramentas details.alts {
    display: block;
    margin-top: 4px;
  }
  /* No telemóvel esta é a ÚNICA porta para as restantes ferramentas do
     grupo, por isso tem de se ler como uma dobra — e não como um link
     perdido numa faixa de marfim, que era o que acontecia com uma linha
     azul sozinha entre dois grupos. É uma fila com contorno, com o número
     escrito e com um chevron que roda ao abrir: o mesmo gesto do "Montar
     o teu MYLO" da /mylo. O alvo é a fila inteira, bem acima dos 44px. */
  .page-ferramentas details.alts > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 8px 6px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ivory);
    color: var(--blue);
    font: 800 15px/1.3 var(--sans);
    cursor: pointer;
    list-style: none;
    transition: background .2s, border-color .2s;
  }
  .page-ferramentas details.alts > summary::-webkit-details-marker { display: none; }
  .page-ferramentas details.alts > summary::marker { content: ""; }
  .page-ferramentas details.alts > summary:hover,
  .page-ferramentas details.alts > summary:focus-visible {
    background: #f2f8ff; border-color: #9fc0e6;
  }
  .page-ferramentas .alts-mark {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #eef4fd; color: var(--blue);
  }
  .inner-page.page-ferramentas .alts-mark .ico {
    width: 20px; height: 20px; color: currentColor; vertical-align: 0;
    transition: transform .2s;
  }
  .page-ferramentas details.alts[open] > summary .alts-mark .ico {
    transform: rotate(180deg);
  }
  .page-ferramentas details.alts > ul {
    list-style: none;
    display: grid;
    gap: var(--s2);
    margin-top: var(--s2);
  }
}

/* Fica depois do bloco do telemóvel de propósito: as media queries não
   somam especificidade e, escrito antes, o transition lá de cima ganhava.
   As três linhas com !important desfazem um estado INICIAL (traço por
   desenhar, figura por aparecer): sem elas, quem pede menos movimento
   via a animação cancelada por dadiva.css e ficava com a figura vazia. */
@media (prefers-reduced-motion: reduce) {
  .page-ferramentas details.alts > summary,
  .inner-page.page-ferramentas .alts-mark .ico { transition: none; }
  .page-ferramentas .obs-fig.anim .draw { stroke-dashoffset: 0 !important; }
  .page-ferramentas .obs-fig.anim .pop { opacity: 1 !important; }
  .page-ferramentas .obs-fig.anim .breathe,
  .page-ferramentas .obs-fig.anim .spin { animation: none !important; }
}