/* Os guias. Páginas estáticas como a de venda, servidas pelo Caddy de
   `/srv/site`, com a mesma marca: as fontes, os tokens, o topo e o rodapé são
   copiados de `index.html`, que por sua vez os copia de
   `resources/css/tokens.css`. Se mudarem lá, mudam aqui.

   Um ficheiro para os guias todos, e não CSS embutido como na página de venda:
   são páginas de leitura e não vivem do primeiro ecrã, e assim um guia novo é
   só HTML. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --mt-canvas:#FAF8F5; --mt-surface:#FFFFFF; --mt-surface-2:#F5F2ED;
  --mt-line:#E4DFD7; --mt-line-strong:#CFC8BE;
  --mt-ink-900:#1B1815; --mt-ink-700:#48423A; --mt-ink-500:#6F6860; --mt-ink-400:#8E867C;
  --mt-accent:#0D5C6B; --mt-accent-hover:#0A4855; --mt-accent-tint:#E4EFF1; --mt-accent-line:#B4D3DA;
  --mt-warn:#9A5A14; --mt-warn-tint:#FAEFE0; --mt-warn-line:#E7CBA2;
  --mt-font-sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mt-font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mt-radius-sm:4px; --mt-radius:6px; --mt-radius-lg:10px;
  --mt-shadow-pop:0 8px 24px -8px rgba(27,24,21,.20),0 1px 2px rgba(27,24,21,.08);
  --mt-tap:44px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mt-canvas); color:var(--mt-ink-900);
  font-family:var(--mt-font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--mt-accent); text-decoration:underline; text-decoration-color:var(--mt-accent-line); text-underline-offset:3px}
a:hover{color:var(--mt-accent-hover); text-decoration-color:currentColor}
:where(a):focus-visible{outline:2px solid var(--mt-accent); outline-offset:3px; border-radius:var(--mt-radius-sm)}

.wrap{max-width:1120px; margin:0 auto; padding-inline:var(--gutter)}

/* ------------------------------------------------------------------ topo */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:22px; border-bottom:1px solid var(--mt-line);
}
.marca{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--mt-ink-900);
}
.marca:hover{color:var(--mt-ink-900)}
.marca svg{display:block}
.top nav{display:flex; align-items:center; gap:clamp(14px,3vw,30px); font-size:15px}
.top nav a{color:var(--mt-ink-700); text-decoration:none}
.top nav a.entrar{
  color:var(--mt-accent); font-weight:500;
  border:1px solid var(--mt-accent-line); background:var(--mt-accent-tint);
  padding:7px 14px; border-radius:var(--mt-radius);
}

/* ---------------------------------------------------------------- o guia */
/* A coluna é estreita de propósito: texto corrido lê-se mal ao largo. */
.guia{max-width:68ch; margin:0 auto; padding:clamp(40px,7vw,80px) var(--gutter) clamp(56px,9vw,96px)}
.micro{
  margin:0; font-family:var(--mt-font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mt-accent);
}
.guia h1{
  margin:18px 0 0; font-weight:600; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(30px,5vw,44px); text-wrap:balance;
}
.guia .entrada{margin:22px 0 0; font-size:clamp(18px,2vw,20px); color:var(--mt-ink-700)}
.guia .data{margin:18px 0 0; font-size:14px; color:var(--mt-ink-500)}
.guia h2{
  margin:52px 0 0; font-weight:600; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(22px,3vw,27px); text-wrap:balance;
}
.guia h3{margin:30px 0 0; font-size:18px; font-weight:600; letter-spacing:-.01em}
.guia p{margin:14px 0 0; color:var(--mt-ink-700)}
.guia ul,.guia ol{margin:14px 0 0; padding-left:1.3em; color:var(--mt-ink-700)}
.guia li{margin-top:8px}
.guia li::marker{color:var(--mt-accent)}
.guia strong{font-weight:600; color:var(--mt-ink-900)}

/* Um aviso que não se pode perder, como o de "confirma na tua câmara". */
.aviso{
  margin:28px 0 0; padding:18px 20px; border-radius:var(--mt-radius-lg);
  background:var(--mt-warn-tint); border:1px solid var(--mt-warn-line);
}
.guia .aviso p{margin:0; color:var(--mt-ink-900); font-size:16px}
.guia .aviso p + p{margin-top:10px}

/* As fontes, em letra pequena, no fim. */
.fontes{margin-top:52px; padding-top:22px; border-top:1px solid var(--mt-line)}
.guia .fontes h2{margin:0; font-size:17px; letter-spacing:-.01em}
.guia .fontes li,.guia .fontes p{font-size:15px}

/* A Coleira aparece uma vez, no fim, e diz o que é. */
.caixa{
  margin:52px 0 0; padding:26px 26px 28px; border-radius:var(--mt-radius-lg);
  background:var(--mt-surface); border:1px solid var(--mt-line-strong);
  box-shadow:var(--mt-shadow-pop);
}
.guia .caixa h2{margin:0; font-size:21px}
.guia .caixa p{margin-top:10px}
.botao{
  display:inline-flex; align-items:center; min-height:var(--mt-tap); margin-top:18px;
  padding:0 22px; border-radius:var(--mt-radius); text-decoration:none;
  background:var(--mt-accent); color:#fff; font-weight:500; font-size:16px;
}
.botao:hover{background:var(--mt-accent-hover); color:#fff}

.outros{margin-top:40px; font-size:16px; color:var(--mt-ink-500)}

footer{padding-bottom:34px; font-size:14.5px; color:var(--mt-ink-500)}
.rodape{
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center;
  justify-content:space-between; border-top:1px solid var(--mt-line); padding-top:34px;
}
.rodape a{color:var(--mt-ink-700); text-decoration:none}