/* =====================================================
   MDLab. Página inicial
   Source Serif 4 (títulos), Inter (texto), IBM Plex Mono (dados).
   Herói em tinta azul-noite; assinatura: a lombada dos 22 capítulos.
   ===================================================== */

:root {
    --papel: #F3F5FA;
    --superficie: #FFFFFF;
    --campo: #FFFFFF;
    --texto: #111527;
    --texto-2: #474E66;
    --texto-3: #5F6680;
    --linha: #E2E6EF;
    --linha-forte: #C5CBDA;
    --indigo: #2A5BD7;
    --indigo-hover: #1E47B5;
    --indigo-suave: #E6ECFC;
    --sobre-indigo: #FFFFFF;
    --anel: rgba(42, 91, 215, 0.24);
    --sinal: #0E9F7A;
    --sinal-texto: #0A7A5E;
    --sinal-botao: #0A7A5E;
    --erro: #B8372B;

    --tinta: #0E1531;
    --sobre-tinta: #F2F4FA;
    --sobre-tinta-2: #B7C0DB;
    --sobre-tinta-3: #8C95B4;
    --tinta-linha: rgba(255, 255, 255, 0.14);
    --indigo-claro: #A8BBF6;
    --seg-a: #2A5BD7;
    --seg-b: #4674E6;

    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --raio: 8px;
    --raio-cartao: 16px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --secao: clamp(4rem, 2.8rem + 4vw, 7rem);
}

[data-theme="dark"] {
    --papel: #090C18;
    --superficie: #10152A;
    --campo: #0B1022;
    --texto: #ECEFF7;
    --texto-2: #B0B7CC;
    --texto-3: #858CA4;
    --linha: #20263D;
    --linha-forte: #353D5A;
    --indigo: #86A0F2;
    --indigo-hover: #A3B7F6;
    --indigo-suave: #1A2345;
    --sobre-indigo: #0B1022;
    --anel: rgba(134, 160, 242, 0.32);
    --sinal: #34C79E;
    --sinal-texto: #4FD3AE;
    --sinal-botao: #34C79E;
    --erro: #F08476;

    --tinta: #0D1330;
    --seg-a: #3D66D8;
    --seg-b: #5A80E6;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    position: relative;
    background: var(--papel);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { display: block; }
ol { list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

.contentor {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}
@media (min-width: 720px) { .contentor { padding-inline: 32px; } }

.saltar {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10;
    padding: 10px 16px;
    background: var(--indigo);
    color: var(--sobre-indigo);
    border-radius: var(--raio);
    font-weight: 600;
    text-decoration: none;
}
.saltar:focus { top: 12px; }

.sobrescrito {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo);
}

/* ---------- Topo ---------- */
.topo { position: absolute; top: 0; inset-inline: 0; z-index: 2; color: var(--sobre-tinta); }
.topo-corpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.marca-simbolo { width: 30px; height: 30px; color: var(--indigo-claro); }
.marca-nome {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.marca-nome b { font-weight: 500; color: var(--indigo-claro); }

.topo-acoes { display: flex; align-items: center; gap: 8px; }
.tema {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sobre-tinta-2);
    transition: color 0.2s, background-color 0.2s;
}
.tema:hover { color: var(--sobre-tinta); background: var(--tinta-linha); }
.tema svg { width: 18px; height: 18px; }
.icone-sol, [data-theme="dark"] .icone-lua { display: none; }
[data-theme="dark"] .icone-sol { display: block; }

.topo-entrar {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--raio);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s;
}
.topo-entrar:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }

/* ---------- Herói ---------- */
.heroi {
    background:
        radial-gradient(52rem 34rem at 88% 0%, rgba(42, 91, 215, 0.34), transparent 62%),
        var(--tinta);
    color: var(--sobre-tinta);
    padding-top: 72px;
}
.heroi-corpo {
    display: grid;
    gap: 44px;
    padding-block: 36px 64px;
}
@media (min-width: 960px) {
    .heroi-corpo {
        grid-template-columns: minmax(0, 1fr) 400px;
        align-items: center;
        gap: 72px;
        padding-block: 56px 112px;
    }
}
.heroi .sobrescrito { color: var(--indigo-claro); }
.heroi h1 {
    margin: 18px 0 22px;
    max-width: 20ch;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.25rem);
    font-weight: 500;
    font-variation-settings: 'opsz' 60;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.heroi h1 em { font-style: italic; color: var(--indigo-claro); }
.lede {
    max-width: 52ch;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    color: var(--sobre-tinta-2);
}
.factos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--tinta-linha);
    font-size: 14px;
}
.factos div { display: flex; flex-direction: row-reverse; gap: 7px; align-items: baseline; }
.factos dd { font-family: var(--mono); font-weight: 500; color: var(--sobre-tinta); }
.factos dt { color: var(--sobre-tinta-3); }

/* ---------- Cartão de acesso ---------- */
.acesso {
    background: var(--superficie);
    color: var(--texto);
    border-radius: var(--raio-cartao);
    padding: 24px 20px;
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    scroll-margin-top: 20px;
}
@media (min-width: 480px) { .acesso { padding: 32px; } }
.acesso:focus { outline: none; }
.acesso-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sinal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sinal) 18%, transparent);
}
.acesso h2 {
    margin: 8px 0 24px;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    font-variation-settings: 'opsz' 36;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.campo { margin-bottom: 16px; }
.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-2);
}
.campo input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--campo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:hover { border-color: var(--texto-3); }
.campo input:focus-visible {
    outline: 2px solid transparent; /* visível em modo de alto contraste */
    border-color: var(--indigo);
    box-shadow: 0 0 0 4px var(--anel);
}
.campo input[aria-invalid="true"] { border-color: var(--erro); }

.senha { position: relative; }
.senha input { padding-right: 92px; }
.ver-senha {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo);
    transition: background-color 0.2s;
}
.ver-senha:hover { background: var(--indigo-suave); }
.ver-senha:focus-visible { outline-offset: 0; }

.mensagem {
    min-height: 22px;
    margin: 2px 0 14px;
    font-size: 14px;
    line-height: 1.45;
}
.mensagem[data-tipo="erro"] { color: var(--erro); }
.mensagem[data-tipo="ok"] { color: var(--sinal-texto); }

.botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    background: var(--indigo);
    color: var(--sobre-indigo);
    border-radius: var(--raio);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s var(--ease);
}
.botao svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.botao:hover { background: var(--indigo-hover); }
.botao:hover svg { transform: translateX(3px); }
.botao:active { transform: translateY(1px); }
.botao:disabled { cursor: progress; opacity: 0.75; }
.form-login.is-sucesso .botao { background: var(--sinal-botao); opacity: 1; }

.acesso-nota {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
    color: var(--texto-3);
}
.sessao-ativa p { margin-bottom: 18px; color: var(--texto-2); }
.terminar {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
    color: var(--texto-2);
    text-underline-offset: 3px;
}
.terminar:hover { color: var(--texto); }

/* ---------- Cabeçalho de secção ---------- */
.seccao-cabeca {
    display: grid;
    gap: 14px;
    margin-bottom: 40px;
}
@media (min-width: 860px) {
    .seccao-cabeca { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 48px; }
}
.seccao-cabeca h2 {
    margin-top: 10px;
    font-family: var(--serif);
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
    font-weight: 500;
    font-variation-settings: 'opsz' 48;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.seccao-cabeca > p { color: var(--texto-2); }

/* ---------- Índice e lombada ---------- */
.indice { padding-block: var(--secao); }

.lombada-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-height: 26px;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--texto-2);
}
.lombada-legenda b { font-weight: 500; color: var(--indigo); }
.lombada-legenda .legenda-nome { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--texto); }

.lombada {
    display: flex;
    gap: 1px;
    height: 64px;
}
@media (min-width: 720px) { .lombada { gap: 2px; height: 96px; } }
.lombada span {
    position: relative;
    flex: var(--n) 1 0;
    min-width: 0;
    background: var(--seg-a);
    cursor: pointer;
    container-type: inline-size;
    transform-origin: bottom;
    transition: opacity 0.2s, background-color 0.2s;
}
.lombada span:nth-child(even) { background: var(--seg-b); }
.lombada span:first-child { border-radius: 6px 0 0 6px; }
.lombada span:last-child { border-radius: 0 6px 6px 0; }
.lombada i {
    position: absolute;
    left: 6px;
    bottom: 5px;
    font-family: var(--mono);
    font-size: 11px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.82);
}
@container (max-width: 24px) { .lombada i { display: none; } }

.lombada.tem-ativo span { opacity: 0.3; }
.lombada.tem-ativo span.is-ativo { opacity: 1; background: var(--sinal); }

/* Entrada: as faixas crescem da base quando a lombada entra no ecrã */
.lombada.em-espera span { transform: scaleY(0); }
.lombada.animar span {
    transform: none;
    transition: transform 0.7s var(--ease) calc(var(--i) * 28ms), opacity 0.2s, background-color 0.2s;
}

.capitulos { margin-top: 36px; }
@media (min-width: 760px) { .capitulos { column-count: 2; column-gap: 56px; } }
.capitulos li { break-inside: avoid; }
.capitulos a {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--linha);
    text-decoration: none;
}
.cap-n { font-family: var(--mono); font-size: 13px; color: var(--texto-3); transition: color 0.2s; }
.cap-nome { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; transition: color 0.2s; }
.cap-nome::after {
    content: '';
    flex: 1 0 16px;
    border-bottom: 1px dotted var(--linha-forte);
    transform: translateY(-4px);
}
.cap-qtd {
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--texto-2);
}
.capitulos li.is-ativo .cap-n,
.capitulos a:hover .cap-n { color: var(--sinal-texto); }
.capitulos li.is-ativo .cap-nome,
.capitulos a:hover .cap-nome { color: var(--indigo); }
.capitulos a:focus-visible { outline-offset: 2px; border-radius: 4px; }

/* ---------- Ferramentas ---------- */
.ferramentas {
    padding-block: var(--secao);
    background: var(--superficie);
    border-block: 1px solid var(--linha);
}
.ferramentas-grelha { display: grid; gap: 36px; }
@media (min-width: 860px) { .ferramentas-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.ferramenta {
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    border-top: 2px solid var(--texto);
}
.ferramenta-saida {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.ferramenta h3 {
    margin: 10px 0 8px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.ferramenta p:not(.ferramenta-saida) { flex: 1; color: var(--texto-2); }
.ferramenta a {
    align-self: flex-start;
    margin-top: 18px;
    font-weight: 600;
    color: var(--indigo);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-underline-offset 0.2s, color 0.2s;
}
.ferramenta a:hover { color: var(--indigo-hover); text-underline-offset: 3px; }

/* ---------- Aviso e rodapé ---------- */
.aviso { padding-block: 56px; }
.aviso-corpo > * { max-width: 860px; }
.aviso-corpo p:first-child {
    padding-left: 18px;
    border-left: 3px solid var(--indigo);
    color: var(--texto-2);
}
.aviso-corpo strong { color: var(--texto); }
.fonte { margin-top: 14px; padding-left: 21px; font-size: 13.5px; color: var(--texto-3); }

.rodape { padding-block: 28px; border-top: 1px solid var(--linha); }
.rodape-corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    font-size: 13.5px;
    color: var(--texto-3);
}
.rodape .marca-nome { font-size: 17px; color: var(--texto); }
.rodape .marca-nome b { color: var(--indigo); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}