/* ─────────────────────────────────────────────────────────────────────────────
   fuso_seo.css: as secções «As classes» e «Perguntas frequentes» do Canter e do eCanter
   ─────────────────────────────────────────────────────────────────────────────
   Uma superfície clara no fim da página (o fundo dela é escuro) para a tabela das
   classes e o acordeão `.site-faq` (components/faq.css), que lê os tokens do site.

   PORQUÊ UMA FOLHA PRÓPRIA. A folha do kit dos ligeiros (`modelo_seccoes.css`) daria
   o `.model-spec-sheet`, mas dá também as variáveis do `.model-intro-section`, e o
   degradé das secções destas páginas mudava de cor (medido a 390 e a 1440 px). Aqui
   fica só o que as duas secções precisam, ao nível do `.fuso-seo`, sem tocar no resto.

   Mobile first: o que não leva `@media` é o telemóvel. Espaços a subir cerca de φ
   (21, 34, 55, 89) e a tabela de duas colunas, sem rolar de lado.
   ─────────────────────────────────────────────────────────────────────────── */
.fuso-seo {
    background: var(--site-paper);
    color: var(--site-ink);
    padding: 55px 21px;
}
.fuso-seo + .fuso-seo { padding-top: 0; }
.fuso-seo__inner { max-width: 1100px; margin: 0 auto; }
/* As notas do fim (`.model-notes`, styles.css) começam no eixo das perguntas, e não ao centro. */
.fuso-seo + .model-notes-section .model-notes { max-width: calc(1100px + 2 * 21px); margin: 0 auto; }
.fuso-seo__title {
    margin: 0 0 21px;
    color: var(--site-ink);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}
.fuso-seo small { color: var(--site-ink-2); font-size: 14px; line-height: 1.5; }
.fuso-seo__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fuso-seo__more { margin-top: 34px; }

.fuso-seo__table { width: 100%; border: 0; border-collapse: collapse; }
/* O site dá às tabelas um aspeto de cartão empilhado no telemóvel, em maiúsculas
   espaçadas, e acima dos 600 px uma moldura de 1 px a que o texto encostava; aqui
   a tabela fica tabela, com duas colunas, em qualquer largura, e só com as linhas
   da anatomia: a de tinta sob o cabeçalho e a fina entre linhas. */
.fuso-seo__table tr { display: table-row; padding: 0; background: none; border: 0; }
.fuso-seo__table th,
.fuso-seo__table td { display: table-cell; font-size: 16px; text-transform: none; letter-spacing: 0; }
.fuso-seo__table small { text-transform: none; letter-spacing: 0; }
.fuso-seo__table th,
.fuso-seo__table td { padding: 16px 0; border-bottom: 1px solid var(--site-line); text-align: left; vertical-align: top; }
.fuso-seo__table thead th { padding-top: 0; color: var(--site-ink-2); font-size: 13px; font-weight: 400; border-bottom-color: var(--site-ink); }
.fuso-seo__table tbody th { font-weight: 400; }
.fuso-seo__table tbody th strong { font-weight: 500; text-transform: none; letter-spacing: 0; }
.fuso-seo__table tbody th a { color: var(--site-ink); text-decoration: underline; }
.fuso-seo__table td,
.fuso-seo__table thead th:last-child { text-align: right; white-space: nowrap; }
.fuso-seo__table td { font-weight: 500; }
.fuso-seo__table + p { margin-top: 21px; }

@media (min-width: 769px) {
    .fuso-seo { padding: 89px 34px; }
    .fuso-seo + .model-notes-section .model-notes { max-width: calc(1100px + 2 * 34px); }
    .fuso-seo__title { margin-bottom: 34px; font-size: 42px; }
    .fuso-seo__table th,
    .fuso-seo__table td { padding: 21px 0; }
}