/* ==========================================================================
   PAGINAS.CSS
   Estilos partilhados das páginas novas (Contactos, Habilidades, Projetos):
   cabeçalho de página, divisor decorativo, cartões e factos de contactos,
   formulário de mensagem, diagramas orbitais de habilidades, carrossel
   paginado de projetos e faixas finais.
   NOTA para mim: nunca editar este ficheiro com cortes por índice —
   já perdi o fim dele uma vez. Secções completas, sempre.
   ========================================================================== */

main {
    padding: 6.5rem 4rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 899px) {
    main { padding: 5.5rem 1.4rem 2rem; }
}

/* ==========================================================================
   1. CABEÇALHO DE PÁGINA (etiqueta + título + descrição)
   ========================================================================== */
.pagina-secao {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0 3rem;
}

.pagina-etiqueta {
    color: var(--roxo-claro);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 0.6rem;
}

.pagina-titulo {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--texto);
    margin-bottom: 1rem;
}

.pagina-titulo .destaque { color: var(--roxo); }

.pagina-descricao {
    color: var(--texto-2);
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: 2rem;
}

/* ==========================================================================
   2. DIVISOR DECORATIVO (linha com brilho e ponto central a cintilar)
   ========================================================================== */
.divisor-brilho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 480px;
    margin: 0.5rem 0 2.2rem;
}

.divisor-linha {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--roxo) 50%, transparent);
    opacity: 0.6;
}

.divisor-ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--roxo);
    flex-shrink: 0;
    animation: brilharDivisor 2.4s ease-in-out infinite;
}

@keyframes brilharDivisor {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35); transform: scale(1); }
    50%      { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.75); transform: scale(1.08); }
}

/* ==========================================================================
   3. CONTACTOS — factos rápidos e grelha de cartões
   ========================================================================== */



.contactos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    width: 100%;
    max-width: 900px;
}

@media (max-width: 899px) {
    .contactos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   4. CONTACTOS — formulário de mensagem + painel de resposta rápida
   ========================================================================== */
.mensagem-secao {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.4rem;
    width: 100%;
    max-width: 900px;
    margin-top: 2.4rem;
    text-align: left;
}

@media (max-width: 899px) { .mensagem-secao { grid-template-columns: 1fr; } }

.mensagem-form {
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    border-radius: 0.9rem;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.mensagem-form h2 { font-size: 1.15rem; font-weight: 700; color: var(--texto); }
.mensagem-form-sub { font-size: 0.82rem; color: var(--texto-2); margin-top: -0.6rem; }

.campo-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--texto-2);
    font-weight: 600;
}

.input-com-icone {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--fundo);
    border: 1px solid var(--borda-suave);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    transition: border-color 0.25s ease;
}

.input-com-icone:focus-within { border-color: var(--roxo); }

.input-com-icone-textarea { align-items: flex-start; }

.input-com-icone img {
    width: 1rem; height: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
}

.input-com-icone input,
.input-com-icone textarea {
    background: transparent;
    border: none;
    outline: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 0.88rem;
    width: 100%;
    resize: vertical;
}

.input-com-icone input::placeholder,
.input-com-icone textarea::placeholder { color: var(--texto-apagado); }

.btn-enviar-mensagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--roxo);
    color: #fff;
    border: none;
    border-radius: 0.6rem;
    padding: 0.85rem 1.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.4);
    transition: all 0.3s ease;
}

.btn-enviar-mensagem:hover {
    background: var(--roxo-claro);
    box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.65);
    transform: translateY(-2px);
}

.btn-enviar-mensagem img {
    width: 1rem; height: 1rem;
    filter: brightness(0) invert(1);
}

.resposta-rapida-card {
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    border-radius: 0.9rem;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resposta-rapida-envelope {
    width: 100%;
    max-width: 160px;
    height: auto;
    margin: 0 auto 0.6rem;
    display: block;
}

.resposta-rapida-card h3 { font-size: 1rem; font-weight: 700; color: var(--roxo-claro); }
.resposta-rapida-card > p { font-size: 0.82rem; color: var(--texto-2); line-height: 1.55; margin-bottom: 0.6rem; }

.resposta-rapida-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--borda-suave);
    font-size: 0.8rem;
}

.resposta-rapida-item img {
    width: 1rem; height: 1rem;
    flex-shrink: 0;
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
}

.resposta-rapida-item div { display: flex; flex-direction: column; }
.resposta-rapida-item strong { color: var(--texto); font-size: 0.78rem; }
.resposta-rapida-item span { color: var(--texto-2); font-size: 0.76rem; }

/* ==========================================================================
   5. HABILIDADES — diagramas orbitais
   Só o anel circular (sem linhas radiais), dots em cima do anel na
   posição de cada skill, ícones maiores e sem borda.
   ========================================================================== */
.orbital-grelha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    padding-bottom: 2.5rem;
}

@media (max-width: 999px) { .orbital-grelha { grid-template-columns: 1fr; } }

.orbital-card {
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    border-radius: 0.9rem;
    padding: 1.4rem 1.4rem 1.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orbital-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin-bottom: 0.6rem;
}

.orbital-card-icone {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    background: rgba(var(--accent-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orbital-card-icone img {
    width: 1.15rem; height: 1.15rem;
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
}

.orbital-card-header h2 { font-size: 1rem; font-weight: 700; color: var(--texto); }
.orbital-card-header p { font-size: 0.74rem; color: var(--texto-2); margin-top: 0.1rem; }

.orbital-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 300px;
    margin: 1.4rem auto 0;
}

.orbital-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* O anel, com brilho neon */
.orbital-anel-guia {
    fill: none;
    stroke: var(--roxo);
    stroke-width: 1.5;
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.9)) drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.5));
}

/* O dot em cima do anel, na posição de cada skill */
.orbital-ponto {
    fill: var(--roxo-claro);
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 1));
}

.orbital-centro {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, var(--caixa) 72%);
    border: 1.5px solid var(--roxo);
    box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.55), inset 0 0 16px rgba(var(--accent-rgb), 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
}

.orbital-centro img {
    width: 1.5rem; height: 1.5rem;
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
}

.orbital-centro span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--texto);
    line-height: 1.1;
}

/* Rótulo de skill: ícone (sem borda, maior) + nome por baixo */
.orbital-rotulo {
    position: absolute;
    transform: translate(calc(-50% + var(--dx) * 3.1rem), calc(-50% + var(--dy) * 3rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 5.6rem;
    text-align: center;
    pointer-events: none;
}

.orbital-rotulo img {
    width: 1.45rem;
    height: 1.45rem;
    object-fit: contain;
}

/* Ícones monocromáticos (human skills): passam a branco */
.orbital-rotulo.icone-mono img {
    filter: brightness(0) invert(1);
}

.orbital-rotulo span {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--texto);
    line-height: 1.15;
}

/* "a estudar": a branco */
.orbital-rotulo em {
    font-style: italic;
    font-size: 0.58rem;
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.2);
    padding: 0.08rem 0.4rem;
    border-radius: 1rem;
}

.orbital-rotulo-estudo span { color: var(--texto-2); }

@media (max-width: 599px) {
    .orbital-rotulo { width: 3.8rem; }
    .orbital-rotulo img { width: 1.2rem; height: 1.2rem; }
    .orbital-rotulo span { font-size: 0.58rem; }
}

/* ==========================================================================
   6. PROJETOS — CTA, filtros, carrossel paginado com setas e dots
   ========================================================================== */
.btn-principal-projetos {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--roxo);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.6rem;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
    transition: all 0.3s ease;
    margin-top: 0.4rem;
}

.btn-principal-projetos:hover {
    background: var(--roxo-claro);
    box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.65);
    transform: translateY(-2px);
}

.btn-principal-projetos img { width: 1rem; height: 1rem; }

.filtros-projetos {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
}

.filtro-pill {
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    color: var(--texto-2);
    padding: 0.5rem 1.3rem;
    border-radius: 2rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filtro-pill:hover { border-color: var(--roxo); color: var(--texto); }

.filtro-pill.ativo {
    background: var(--roxo);
    border-color: var(--roxo);
    color: #fff;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}

.carrossel-projetos-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-seta-carrossel {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--caixa);
    border: 1px solid var(--borda);
    color: var(--texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-seta-carrossel svg { width: 1.1rem; height: 1.1rem; }

.btn-seta-carrossel:hover:not(:disabled) {
    border-color: var(--roxo);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
    color: var(--roxo-claro);
}

.btn-seta-carrossel:disabled {
    opacity: 0.3;
    cursor: default;
}

.projetos-pagina-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

@media (max-width: 1199px) { .projetos-pagina-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px)  { .projetos-pagina-grid { grid-template-columns: 1fr; } }

/* Na página o card ocupa a coluna da grelha (na Home tem largura fixa de carrossel) */
.projeto-card-pagina { flex: initial; width: 100%; min-width: 0; }

.carrossel-paginacao {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin: 1.6rem 0 3rem;
}

.dot-paginacao {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--borda);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.dot-paginacao:hover { background: var(--roxo-claro); }

.dot-paginacao.ativo {
    background: var(--roxo);
    width: 24px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

/* ==========================================================================
   7. FAIXAS FINAIS (Habilidades, Projetos e Contactos)
   ========================================================================== */
.banner-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    flex-wrap: wrap;
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    border-radius: 0.9rem;
    padding: 1.4rem 1.8rem;
    margin-bottom: 3rem;
    width: 100%;
}

.banner-final-texto { display: flex; align-items: center; gap: 1rem; }

.banner-final-icone {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--roxo);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
    flex-shrink: 0;
}

.banner-final-icone img {
    width: 1.3rem; height: 1.3rem;
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
}

.banner-final-texto h2 { font-size: 0.95rem; font-weight: 700; color: var(--texto); }
.banner-final-texto p { font-size: 0.8rem; color: var(--texto-2); margin-top: 0.15rem; }

.btn-banner-final {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--roxo);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.7rem 1.3rem;
    border-radius: 0.6rem;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
    transition: all 0.3s ease;
}

.btn-banner-final:hover {
    background: var(--roxo-claro);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.6);
    transform: translateY(-2px);
}

.btn-banner-final img { width: 0.95rem; height: 0.95rem; filter: brightness(0) invert(1); }

/* Item 5: alinhar a faixa final com a grelha do carrossel (excluindo as
   setas), para começar e acabar exatamente na mesma linha vertical */
body.pagina-projetos .banner-final {
    width: auto;
    margin-left: calc(2.6rem + 1rem);
    margin-right: calc(2.6rem + 1rem);
}

@media (max-width: 699px) {
    body.pagina-projetos .banner-final { margin-left: 0; margin-right: 0; }
}

/* Linha de estado do formulário: sucesso ou erro após tentar enviar */
.mensagem-form-estado {
    font-size: 0.82rem;
    font-weight: 600;
    min-height: 1.2em;
}

.mensagem-form-estado-sucesso { color: #4ade80; }
.mensagem-form-estado-erro { color: #ff5d6c; }

/* Skeleton nas grelhas de página (Projetos) precisa de altura própria,
   já que não tem conteúdo real dentro para lhe dar forma */
.projeto-card-pagina.projeto-card-skeleton { min-height: 320px; }

/* Item 4: alinhar a faixa final de Contactos com a largura do formulário/cartões acima */
body.pagina-contactos .banner-final {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* No modo claro, os ícones "Human Skills" (brancos no modo escuro)
   passam a azul em vez de branco puro — branco em fundo claro ficaria
   invisível. */
body.light-mode .orbital-rotulo.icone-mono img {
    filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(190deg) brightness(105%);
}

/* ==========================================================================
   PÁGINA PÚBLICA DE DOCUMENTAÇÃO — cartões de tecnologia + texto corrido
   ========================================================================== */
.doc-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
}

@media (max-width: 1099px) { .doc-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px)  { .doc-card-grid { grid-template-columns: repeat(2, 1fr); } }

.doc-card {
    background: var(--caixa);
    border: 1px solid var(--borda-suave);
    border-radius: 0.9rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.doc-card:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.3);
    transform: translateY(-3px);
}

.doc-card-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.9rem;
    border-radius: 0.7rem;
    background: rgba(var(--accent-rgb), 0.1);
}

.doc-card-icone img { width: 1.8rem; height: 1.8rem; }

.doc-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.doc-card p { font-size: 0.78rem; color: var(--texto-2); line-height: 1.55; }

.doc-seccao-texto {
    max-width: 760px;
    margin: 0 auto 3rem;
}

.doc-seccao-lighthouse {
    text-align: center;
}

.doc-lighthouse-badge {
    display: block;
    height: 3.2rem;
    width: auto;
    margin: 1.4rem auto 0;
}

.doc-seccao-texto h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 0.8rem;
}

.doc-seccao-texto > p {
    color: var(--texto-2);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.doc-lista-simples {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.doc-lista-simples li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--texto-2);
    font-size: 0.9rem;
    line-height: 1.6;
}

.doc-lista-simples li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--roxo);
    box-shadow: 0 0 6px var(--roxo);
}

.doc-lista-simples li strong { color: var(--texto); }

/* ==========================================================================
   PÁGINA PERCURSO — Quem sou + Jornada + Formação + Autodidata
   ========================================================================== */

/* Subtítulo por baixo do título grande da página */
.pagina-subtitulo {
    color: var(--texto-2);
    font-size: 1rem;
    margin-bottom: 2.5rem;
}

/* Título das secções internas (Jornada, Formação, Autodidata) */
.percurso-seccao-titulo {
    color: var(--texto);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.percurso-seccao-titulo .destaque { color: var(--roxo); }

/* ====== 1. QUEM SOU — texto à esquerda, foto à direita ======
   Grid de 2 colunas: o texto ocupa o espaço que sobra (1fr) e a foto tem
   uma largura fixa maior, à direita. No mobile passa a uma coluna só. */
.quem-sou-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3.5rem;
    align-items: start;
}

.quem-sou-foto img {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--borda);
    /* O brilho roxo à volta da foto, igual ao resto do site */
    box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.25);
    display: block;
}

/* Texto uniforme: todos os parágrafos com o mesmo peso e tamanho.
   Sem destaques nem negritos — a história fala por si. */
.quem-sou-texto p {
    color: var(--texto-2);
    font-size: 0.95rem;
    line-height: 1.9;
    margin-bottom: 1.3rem;
}

.quem-sou-texto p:last-child { margin-bottom: 0; }

.quem-sou-skeleton {
    color: var(--texto-3);
    font-style: italic;
}

/* ====== 2. JORNADA VERTICAL ======
   Cada item é uma linha: marcador à esquerda, conteúdo à direita.
   A linha vertical que os liga é feita com um ::before no marcador. */
.jornada-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.jornada-v-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    position: relative;
}

/* A linha vertical que liga os marcadores.
   Uso um pseudo-elemento ::before posicionado por baixo do marcador.
   O :last-child não a desenha (senão sobrava uma linha a apontar ao nada). */
.jornada-v-item::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--roxo) 0%, var(--borda-suave) 100%);
}
.jornada-v-item:last-child::before { display: none; }
.jornada-v-item:last-child { padding-bottom: 0; }

.jornada-v-marcador {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--caixa);
    border: 1px solid var(--borda);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
    flex-shrink: 0;
    z-index: 1; /* fica por cima da linha vertical */
}

.jornada-v-marcador img {
    width: 1.2rem;
    height: 1.2rem;
    filter: brightness(0) invert(1);
}
body.light-mode .jornada-v-marcador img { filter: brightness(0); }

.jornada-v-ano {
    color: var(--roxo);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.jornada-v-conteudo h3 {
    color: var(--texto);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.3rem 0 0.5rem;
}

.jornada-v-conteudo p {
    color: var(--texto-2);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ====== 3. FORMAÇÃO ====== */
.formacao-lista {
    display: grid;
    /* auto-fit + minmax: os cartões ajustam-se sozinhos ao espaço, sem eu
       ter de definir quantas colunas há em cada tamanho de ecrã. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.formacao-card {
    background: var(--caixa);
    border: 1px solid var(--borda);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.formacao-card:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25);
    transform: translateY(-3px);
}

.formacao-card-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.formacao-icone {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--borda);
    flex-shrink: 0;
}

.formacao-icone img {
    width: 1.3rem;
    height: 1.3rem;
    filter: brightness(0) invert(1);
}
body.light-mode .formacao-icone img { filter: brightness(0); }

.formacao-card-info h3 {
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* O nome da instituição (CodeMaster · 7 meses · Certificado...).
   É um <span>, que por defeito seria inline — o display:block encosta-o à
   esquerda, alinhado com o título. O line-height dá-lhe espaço para quebrar
   em duas linhas quando o texto é longo, em vez de ser cortado. */
.formacao-instituicao {
    display: block;
    text-align: left;
    color: var(--roxo);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ====== Módulos do curso — carrossel de etiquetas coloridas ======
   A máscara esconde o que sai fora dos limites do cartão; a fila lá dentro
   desliza continuamente para a esquerda. Mesmo princípio do marquee de
   tecnologias da Home. */
.formacao-modulos-mask {
    width: 100%;
    overflow: hidden;
    margin-top: 1.2rem;
    /* Esbate as pontas, para as etiquetas "aparecerem" e "desaparecerem"
       suavemente em vez de serem cortadas a direito. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.formacao-modulos {
    display: flex;
    gap: 0.5rem;
    /* width: max-content faz a fila ser tão larga quanto o conteúdo, para os
       módulos ficarem todos numa linha (e não a partir para baixo). */
    width: max-content;
    /* A animação desloca a fila -50%: como o JS duplicou as etiquetas, no
       instante em que recomeça a segunda cópia está exatamente onde a
       primeira estava — o salto é invisível. */
    animation: deslizarModulos var(--modulos-dur, 20s) linear infinite;
    will-change: transform;
}

@keyframes deslizarModulos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Pausa ao passar o rato (ou ao tocar), para se conseguir ler com calma */
.formacao-modulos-mask:hover .formacao-modulos {
    animation-play-state: paused;
}

/* Cada etiqueta ganha a cor da sua tecnologia, vinda do JS na variável
   --modulo-cor. As que não são tecnologias caem no roxo do tema. */
.formacao-modulo {
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--modulo-cor, var(--roxo));
    border-radius: 0.4rem;
    background: var(--caixa);
    white-space: nowrap;   /* nunca parte o nome a meio */
    flex-shrink: 0;        /* nunca encolhe para caber */
}

/* O certificado só existe no HTML se houver imagem — por isso não preciso
   de o esconder por CSS quando não há. */
.formacao-certificado {
    display: block;
    margin-top: 1.2rem;
    border-radius: 0.6rem;
    overflow: hidden;
    border: 1px solid var(--borda);
    transition: all 0.3s ease;
}

.formacao-certificado:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3);
}

.formacao-certificado img {
    width: 100%;
    display: block;
}

/* ====== 4. AUTODIDATA ====== */
.autodidata-bloco {
    max-width: 900px;
}

.autodidata-intro {
    color: var(--texto-2);
    font-size: 0.98rem;
    line-height: 1.9;
    margin-bottom: 1rem;
}

.autodidata-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin: 2rem 0;
}

.autodidata-card {
    background: var(--caixa);
    border: 1px solid var(--borda);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.autodidata-card:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25);
    transform: translateY(-3px);
}

.autodidata-icone {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.8rem;
    filter: brightness(0) invert(1);
}
body.light-mode .autodidata-icone { filter: brightness(0); }

.autodidata-card h3 {
    color: var(--texto);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.autodidata-card p {
    color: var(--texto-2);
    font-size: 0.87rem;
    line-height: 1.7;
}

/* A frase de remate — é a que quero que fique na cabeça de quem lê.
   Sem caixa, sem borda, sem fundo: só o texto a respirar no espaço. */
.autodidata-remate {
    color: var(--texto);
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    margin-top: 2.5rem;
}