/* ==== Tokens (Identidade Muvwa Magazine) ==== */
:root {
    --cor-papel: #E6E8EB;
    --cor-tinta: #0D1B2A;
    --cor-tinta-suave: #33363A;
    --cor-acento: #C79A3B;
    --cor-acento-2: #0D1B2A;
    --cor-masthead-bg: #0D1B2A;
    --cor-masthead-texto: #E6E8EB;
    --cor-linha: #D5D9DE;
    --cor-superficie: #FFFFFF;
    --cor-fundo: #EDEFF1;
    --cor-erro: #C0392B;
    --cor-sucesso: #1E7A4C;

    --fonte-display: 'Playfair Display', serif;
    --fonte-corpo: 'Montserrat', system-ui, sans-serif;
    --fonte-dados: 'Montserrat', system-ui, sans-serif;

    color-scheme: light;
}

/* ==== Modo escuro — ativado via [data-tema="escuro"] no <html>, definido pelo script
   inline no <head> (ver _Layout.cshtml/_AdminLayout.cshtml) antes de qualquer CSS ser
   aplicado, pra não piscar o tema errado por uma fração de segundo. O cabeçalho/rodapé
   do site (--cor-masthead-*) e o sidebar do admin já são escuros por padrão, então não
   precisam de ajuste aqui — só a área de conteúdo (clara) ganha uma versão escura. ==== */
[data-tema="escuro"] {
    --cor-papel: #10151C;
    --cor-tinta: #E7EAEE;
    --cor-tinta-suave: #9BA3AD;
    --cor-linha: #2B3542;
    --cor-superficie: #1B222C;
    --cor-fundo: #161C24;
    --cor-erro: #E2725F;
    --cor-sucesso: #4FBE87;

    color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@keyframes fade-sobe {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-simples {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulsar-acento {
    0%, 100% { box-shadow: 0 0 0 0 rgba(199,154,59,0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(199,154,59,0); }
}
@keyframes girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cor-papel);
    color: var(--cor-tinta);
    font-family: var(--fonte-corpo);
    font-size: 18px;
    line-height: 1.65;
    min-height: 100%;
}

/* ==== Fonte padrão do SITE PÚBLICO: Arial, 18px ==============================
   Redefine as variáveis --fonte-corpo/--fonte-dados só dentro de <body> sem a classe
   "admin-body" (ver Views/Shared/_Layout.cshtml, que não tem essa classe, vs.
   Areas/Admin/Views/Shared/_AdminLayout.cshtml, que tem <body class="admin-body">) —
   assim a área de gestão (/Admin) continua com a Montserrat carregada do Google Fonts,
   e só o site público passa a usar Arial como fonte padrão do texto corrido. Os
   títulos (h1-h6) continuam em --fonte-display (Playfair Display) — é a fonte de
   identidade visual da marca nos títulos, separada da fonte "padrão" do texto normal.
   O tamanho de 18px já era o padrão do site (ver regra "html, body" acima); resta aqui
   só de forma explícita, documentando o pedido "Arial 18 como default". */
body:not(.admin-body) {
    --fonte-corpo: Arial, Helvetica, sans-serif;
    --fonte-dados: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

/* Layout em coluna flex: o rodapé fica sempre no fim da tela,
   mesmo em páginas com pouco conteúdo (empurrado pelo main que cresce) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--cor-acento);
    outline-offset: 2px;
}

h1, h2, h3 {
    font-family: var(--fonte-display);
    font-weight: 600;
    margin: 0 0 0.4em;
    letter-spacing: -0.01em;
}

.eyebrow {
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-acento);
}

/* ==== Masthead ==== */
.masthead {
    background: var(--cor-masthead-bg);
    color: var(--cor-masthead-texto);
    border-bottom: 1px solid #000;
    box-shadow: 0 6px 16px rgba(13,27,42,0.18);
}
.masthead__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.masthead__logo {
    font-family: var(--fonte-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cor-masthead-texto);
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-chip {
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.logo-chip img { height: 34px; width: auto; display: block; }
.masthead__logo-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.masthead__logo-sub {
    font-family: var(--fonte-corpo);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-acento);
}
.masthead__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 0.92rem;
}
.botao-menu-site {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
}
.botao-menu-site span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cor-masthead-texto);
    border-radius: 2px;
}
.masthead__nav a {
    color: #C9CDD3;
    position: relative;
    padding-bottom: 3px;
}
.masthead__nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background: var(--cor-acento);
    transition: width 0.25s ease;
}
.masthead__nav a:hover::after { width: 100%; }
.masthead__nav a:hover { color: var(--cor-masthead-texto); }
.masthead__nav a.ativo { color: var(--cor-acento); font-weight: 600; }
.masthead__nav a.ativo::after { width: 100%; }
.btn-nav.ativo { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.masthead__idiomas { display: flex; gap: 6px; align-items: center; margin-left: 4px; }
.masthead__idiomas a {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.45;
    filter: grayscale(60%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.masthead__idiomas a::after { display: none; }
.masthead__idiomas a:hover, .masthead__idiomas a.ativo { opacity: 1; filter: grayscale(0%); }

/* ==== Alternador de tema (claro/escuro/sistema) — usado no cabeçalho público e no
   topbar do admin; a cor base é neutra e cada contexto ajusta por cima. ==== */
.alternador-tema { position: relative; }
.alternador-tema__gatilho {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cor-tinta-suave);
    font-size: 1.3rem;
    padding: 0;
    transition: color 0.2s ease;
}
.alternador-tema__gatilho:hover { color: var(--cor-acento); }
.masthead__nav .alternador-tema__gatilho { color: #C9CDD3; font-size: 1.05rem; margin-left: 4px; }
.masthead__nav .alternador-tema__gatilho:hover { color: var(--cor-masthead-texto); }
.alternador-tema__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--cor-papel);
    border: 1px solid var(--cor-linha);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
    padding: 6px;
    min-width: 180px;
    display: none;
    flex-direction: column;
    z-index: 200;
}
.alternador-tema.aberto .alternador-tema__menu { display: flex; }
.alternador-tema__menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 6px;
    background: none;
    border: none;
    color: var(--cor-tinta);
    font-size: 0.88rem;
    cursor: pointer;
}
.alternador-tema__menu button i { width: 16px; text-align: center; color: var(--cor-tinta-suave); }
.alternador-tema__menu button:hover { background: var(--cor-fundo); }
.alternador-tema__menu button.ativo { color: var(--cor-acento); font-weight: 600; }
.alternador-tema__menu button.ativo i { color: var(--cor-acento); }
.alternador-tema__menu-titulo {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-tinta-suave);
    font-weight: 600;
    padding: 6px 12px 2px;
}
.alternador-tema__separador { height: 1px; background: var(--cor-linha); margin: 6px 4px; }
.alternador-tema__menu button.ativo-economia { color: var(--cor-acento); font-weight: 600; }
.alternador-tema__menu button.ativo-economia i { color: var(--cor-acento); }

/* ==== Seletor de idioma compartilhado (admin e telas de login) — agora é um <select>
   nativo (combobox), não mais ícones de bandeira soltos; o cabeçalho público usa esta
   mesma classe ==== */
select.seletor-idioma {
    appearance: none;
    -webkit-appearance: none;
    background: var(--cor-superficie);
    color: var(--cor-tinta);
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 0.85rem;
    font-family: var(--fonte-dados);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2333363A' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
select.seletor-idioma:hover { border-color: var(--cor-acento); }
.masthead__nav select.seletor-idioma {
    background: rgba(255,255,255,0.06);
    color: #C9CDD3;
    border-color: rgba(255,255,255,0.15);
}
.masthead__nav select.seletor-idioma option { color: #0D1B2A; }

/* ==== Contagem regressiva (Oportunidades, Cursos, Sorteios, sessões ao vivo, etc.) ==== */
.contagem-regressiva {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}
.contagem-regressiva__titulo {
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    color: var(--cor-tinta-suave);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.contagem-regressiva__relogio { display: flex; gap: 8px; }
.contagem-regressiva__bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 46px;
}
.contagem-regressiva__bloco strong {
    font-family: var(--fonte-dados);
    font-size: 1.15rem;
    color: var(--cor-tinta);
    line-height: 1.1;
}
.contagem-regressiva__bloco small {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-tinta-suave);
}
.contagem-regressiva__encerrado {
    font-family: var(--fonte-dados);
    font-size: 0.85rem;
    color: var(--cor-erro);
    font-weight: 600;
}
@media (max-width: 480px) {
    .contagem-regressiva { flex-wrap: wrap; }
    .contagem-regressiva__bloco { min-width: 40px; padding: 5px 8px; }
}

/* ==== Menus suspensos do cabeçalho (agrupam itens institucionais/contacto) ==== */
.masthead__dropdown { position: relative; }
.masthead__dropdown-gatilho {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: #C9CDD3;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.masthead__dropdown-gatilho:hover, .masthead__dropdown-gatilho.ativo { color: var(--cor-masthead-texto); }
.masthead__dropdown-gatilho i { font-size: 0.65rem; transition: transform 0.2s ease; }
.masthead__dropdown.aberto .masthead__dropdown-gatilho i { transform: rotate(180deg); }
.masthead__dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-papel);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
    padding: 8px;
    min-width: 190px;
    display: none;
    flex-direction: column;
    z-index: 80;
}
.masthead__dropdown.aberto .masthead__dropdown-menu { display: flex; }
.masthead__dropdown-menu a {
    color: var(--cor-tinta) !important;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.masthead__dropdown-menu a::after { display: none; }
.masthead__dropdown-menu a:hover { background: var(--cor-superficie); color: var(--cor-acento) !important; }
.masthead__dropdown-menu a.ativo { color: var(--cor-acento) !important; font-weight: 600; }
@media (max-width: 760px) {
    .masthead__dropdown-menu { position: static; transform: none; box-shadow: none; background: rgba(255,255,255,0.03); margin-top: 4px; }
    .masthead__dropdown.aberto .masthead__dropdown-menu { display: flex; }
    .masthead__dropdown-menu a { color: #C9CDD3 !important; }
    .masthead__dropdown-menu a:hover, .masthead__dropdown-menu a.ativo { color: var(--cor-acento) !important; }
}

/* ==== Selo "Novo" (novidades no site) ==== */
.aviso-conta {
    background: rgba(199,154,59,0.08);
    border: 1px solid rgba(199,154,59,0.3);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 24px;
    font-size: 0.92rem;
}
.aviso-conta i { color: var(--cor-acento); margin-top: 3px; }
.aviso-conta a { color: var(--cor-acento); font-weight: 600; text-decoration: underline; }

.foto-perfil-leitor {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.foto-perfil-leitor img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(13,27,42,0.12);
}
.foto-perfil-leitor__generica {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--cor-tinta-suave);
}

/* ==== Carrossel de banners (home) ==== */
.carrossel-banners {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 48px;
}
.carrossel-banners__trilho {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.carrossel-banners__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.carrossel-banners__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(13,27,42,0.85) 0%, rgba(13,27,42,0.15) 60%, transparent 100%);
}
.carrossel-banners__conteudo {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 40px 48px;
    max-width: 600px;
}
.carrossel-banners__conteudo h2 { color: #fff; font-size: 2rem; margin-bottom: 6px; }
.carrossel-banners__conteudo p { color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.carrossel-banners__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.carrossel-banners__seta:hover { background: rgba(255,255,255,0.3); }
.carrossel-banners__seta--anterior { left: 16px; }
.carrossel-banners__seta--seguinte { right: 16px; }
.carrossel-banners__pontos {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.carrossel-banners__ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.carrossel-banners__ponto.ativo { background: var(--cor-acento); transform: scale(1.3); }
@media (max-width: 720px) {
    .carrossel-banners { height: 260px; }
    .carrossel-banners__conteudo { padding: 24px; }
    .carrossel-banners__conteudo h2 { font-size: 1.4rem; }
}

/* ==== Botão "Entrar com Google" ==== */
.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #3C4043;
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-google i { color: #4285F4; font-size: 1.05rem; }
.btn-google:hover { background: #F8F9FA; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.btn-microsoft {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #2F2F2F;
    color: #fff;
    border: 1px solid #2F2F2F;
    border-radius: 6px;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-microsoft i { color: #00A4EF; font-size: 1.05rem; }
.btn-microsoft:hover { background: #1F1F1F; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.separador-ou {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--cor-tinta-suave);
    font-size: 0.8rem;
    margin: 16px 0;
}
.separador-ou::before, .separador-ou::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--cor-linha);
}
.separador-ou span { padding: 0 12px; }

/* ==== Logotipo nas páginas públicas de login/registo ==== */
.conta-card__logo-img {
    display: block;
    max-width: 200px;
    width: 100%;
    height: auto;
    margin: 0 auto 24px;
}
.selo-novo {
    display: inline-block;
    background: var(--cor-acento);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
    animation: pulsar-novo 1.8s ease-in-out infinite;
}
@keyframes pulsar-novo {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(199,154,59,0.5); }
    50% { opacity: 0.75; box-shadow: 0 0 0 4px rgba(199,154,59,0); }
}

/* ==== Selos de estado (reaproveitado no público para Oportunidades) ==== */
.badge-estado {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
}
.badge-estado--publicado { background: #E7F5EC; color: #1E7A4C; }
.badge-estado--rascunho { background: #FFF3D6; color: #92650C; }
.badge-estado--arquivado { background: #E9E9EC; color: #55565C; }
.badge-estado--expirado { background: #FBE9E7; color: #A4321F; }

/* ==== Oportunidades ==== */
.oportunidade-caixa {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-left: 4px solid var(--cor-acento);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.oportunidade-caixa p { margin: 0; font-size: 1rem; }

/* ==== Depoimentos ==== */
.depoimentos-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 1.1rem;
}
.depoimentos-media__estrelas i { color: var(--cor-acento); font-size: 1rem; }

.grid-depoimentos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.depoimento-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.depoimento-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(13,27,42,0.08); }
.depoimento-card__estrelas i { color: var(--cor-acento); font-size: 0.85rem; }
.depoimento-card__texto { font-style: italic; color: var(--cor-tinta); flex: 1; margin: 0; line-height: 1.6; }
.depoimento-card__autor { display: flex; align-items: center; gap: 12px; flex-direction: row; border-top: 1px dashed var(--cor-linha); padding-top: 12px; }
.depoimento-card__autor > div { display: flex; flex-direction: column; }
.depoimento-card__autor span { color: var(--cor-tinta-suave); font-size: 0.85rem; }
.depoimento-card__foto {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.depoimento-card__foto--generica {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-papel);
    color: var(--cor-tinta-suave);
    font-size: 1.1rem;
}

/* Seletor de estrelas do formulário — só CSS, sem JS (radios em ordem invertida + row-reverse) */
.seletor-estrelas {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
    width: fit-content;
}
.seletor-estrelas input { position: absolute; opacity: 0; width: 0; height: 0; }
.seletor-estrelas label {
    font-size: 1.9rem;
    color: var(--cor-linha);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}
.seletor-estrelas input:checked ~ label,
.seletor-estrelas label:hover,
.seletor-estrelas label:hover ~ label {
    color: var(--cor-acento);
}
.seletor-estrelas label:hover { transform: scale(1.15); }
.seletor-estrelas input:focus-visible + label { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.btn-nav::after { display: none; }
.btn-nav {
    background: var(--cor-acento);
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 3px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.15s ease;
}
.btn-nav:hover { background: #a87c26; transform: translateY(-1px); }

/* ==== Ticker (signature element) ==== */
.ticker {
    background: var(--cor-acento-2);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #000;
}
.ticker__track {
    display: inline-flex;
    gap: 48px;
    padding: 6px 24px;
    font-family: var(--fonte-dados);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    animation: mover-ticker 22s linear infinite;
}
@keyframes mover-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

/* ==== Layout base ==== */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    width: 100%;
    flex: 1 0 auto;
}

/* ==== Animação de entrada (reveal on scroll) ==== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Atraso escalonado para grades de cartões (efeito cascata) */
.grid-artigos .reveal:nth-child(1) { transition-delay: 0s; }
.grid-artigos .reveal:nth-child(2) { transition-delay: 0.06s; }
.grid-artigos .reveal:nth-child(3) { transition-delay: 0.12s; }
.grid-artigos .reveal:nth-child(4) { transition-delay: 0.18s; }
.grid-artigos .reveal:nth-child(5) { transition-delay: 0.24s; }
.grid-artigos .reveal:nth-child(6) { transition-delay: 0.3s; }
.grid-artigos .reveal:nth-child(n+7) { transition-delay: 0.36s; }
.grid-valores .reveal:nth-child(1) { transition-delay: 0s; }
.grid-valores .reveal:nth-child(2) { transition-delay: 0.06s; }
.grid-valores .reveal:nth-child(3) { transition-delay: 0.12s; }
.grid-valores .reveal:nth-child(4) { transition-delay: 0.18s; }
.grid-valores .reveal:nth-child(5) { transition-delay: 0.24s; }
.grid-valores .reveal:nth-child(6) { transition-delay: 0.3s; }
.grid-valores .reveal:nth-child(7) { transition-delay: 0.36s; }
.grid-valores .reveal:nth-child(8) { transition-delay: 0.42s; }

/* ==== Alertas ==== */
.alerta {
    padding: 12px 16px;
    border-radius: 3px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    border-left: 4px solid;
}
.alerta--sucesso { background: #E7F5EC; border-color: var(--cor-sucesso); color: #145533; }
.alerta--erro { background: #FBE9E7; border-color: var(--cor-erro); color: #8C2E22; }

/* ==== Toast (notificações temporárias, canto da tela) ==== */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}
.toast {
    background: var(--cor-papel);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid var(--cor-tinta-suave);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.visivel { opacity: 1; transform: translateX(0); }
.toast.saindo { opacity: 0; transform: translateX(30px); }
.toast--sucesso { border-left-color: var(--cor-sucesso); }
.toast--sucesso .toast__icone { color: var(--cor-sucesso); }
.toast--erro { border-left-color: var(--cor-erro); }
.toast--erro .toast__icone { color: var(--cor-erro); }
.toast__icone { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.toast__texto { flex: 1; font-size: 0.88rem; line-height: 1.4; color: var(--cor-tinta); }
.toast__fechar {
    background: none;
    border: none;
    color: var(--cor-tinta-suave);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
    flex-shrink: 0;
}
.toast__fechar:hover { color: var(--cor-erro); }
@media (max-width: 500px) {
    .toast-container { left: 16px; right: 16px; top: 16px; max-width: none; }
}

/* ==== Hero (Home) ==== */
.hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--cor-linha);
    margin-bottom: 48px;
    align-items: center;
    animation: fade-sobe 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__img {
    width: 100%;
    border-radius: 4px;
    aspect-ratio: 16/10;
    object-fit: cover;
    overflow: hidden;
    animation: fade-simples 1.1s ease both;
}
.hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
.hero p { color: var(--cor-tinta-suave); font-size: 1.05rem; }
.hero .btn-primario { animation: pulsar-acento 2.4s ease-in-out 1.2s infinite; }

/* ==== Grid de artigos ==== */
.grid-artigos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
}
.card-artigo {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-artigo:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(13,27,42,0.14);
    border-color: var(--cor-acento);
}
.card-artigo__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--cor-linha);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-artigo:hover .card-artigo__img { transform: scale(1.07); }
.card-artigo__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-artigo__body h3 { font-size: 1.15rem; transition: color 0.2s ease; }
.card-artigo:hover .card-artigo__body h3 { color: var(--cor-acento); }
.card-artigo__body p { color: var(--cor-tinta-suave); font-size: 0.92rem; margin: 0; }
.badge-tendencia {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(13,27,42,0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    animation: pulsar-acento 2.2s ease-in-out infinite;
}
.card-artigo__meta {
    margin-top: auto;
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    color: var(--cor-tinta-suave);
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--cor-linha);
}

/* ==== Cards de curso (Muvwa Academy) ==== */
.card-curso {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-curso:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(13,27,42,0.14);
    border-color: var(--cor-acento);
}
.card-curso__capa-link { position: relative; display: block; overflow: hidden; }
.card-curso__capa-link .card-artigo__img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.card-curso:hover .card-curso__capa-link .card-artigo__img { transform: scale(1.06); }
.card-curso__selo-gratuito {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #27AE60;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 20px;
}
.card-curso .card-artigo__body { gap: 10px; }
.card-curso__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.card-curso__badges .tag { margin: 0; }
.tag--area { background: rgba(45,108,223,0.12); color: #2D6CDF; }
.tag--modalidade { background: rgba(199,154,59,0.15); color: var(--cor-acento); }
.card-curso h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.card-curso h3 a { color: inherit; }
.card-curso:hover h3 a { color: var(--cor-acento); }
.card-curso > .card-artigo__body > p { color: var(--cor-tinta-suave); font-size: 0.9rem; margin: 0; }
.card-curso__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.78rem;
    color: var(--cor-tinta-suave);
    font-family: var(--fonte-dados);
    padding-top: 8px;
    border-top: 1px dashed var(--cor-linha);
}
.card-curso__meta i { color: var(--cor-acento); margin-right: 3px; }
.card-curso__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.card-curso__preco { font-size: 1.2rem; font-weight: 700; color: var(--cor-acento); }
.card-curso__botao { width: 100%; text-align: center; justify-content: center; margin-top: 2px; }

/* ==== Tag de categoria ==== */
.tag {
    display: inline-block;
    background: rgba(13,27,42,0.08);
    color: var(--cor-acento-2);
    font-family: var(--fonte-dados);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    width: fit-content;
    transition: background 0.25s ease, color 0.25s ease;
}
.card-artigo:hover .tag { background: var(--cor-acento); color: #fff; }
a.tag { cursor: pointer; padding: 6px 14px; border-radius: 20px; }
a.tag:hover { background: var(--cor-acento); color: #fff; }
a.tag.tag--ativa { background: var(--cor-acento); color: #fff; }

/* ==== Vlogs: selo de play e player responsivo ==== */
.badge-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(13,27,42,0.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.25s ease, transform 0.25s ease;
}
.card-artigo:hover .badge-play { background: var(--cor-acento); transform: translate(-50%, -50%) scale(1.1); }
.player-vlog {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    margin: 20px 0;
}
.player-vlog iframe, .player-vlog video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==== Cabeçalho de seção / toolbar ==== */
.secao-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.busca-form { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==== Formulários ==== */
.form-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 4px;
    padding: 32px;
    width: 100%;
}
/* Logótipo opcional no topo de um .form-card (ecrãs de entrar/registar) */
.form-card__logo { display: flex; justify-content: center; margin-bottom: 18px; }
.form-card__logo img { max-width: 160px; max-height: 64px; object-fit: contain; }
/* Separador "ou" entre o formulário normal e o login social */
.form-card__separador {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--cor-tinta-suave, var(--cor-tinta));
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.form-card__separador::before, .form-card__separador::after {
    content: ""; flex: 1; height: 1px; background: var(--cor-linha);
}
.btn-google { width: 100%; justify-content: center; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 24px;
}
.form-grid .form-group--full { grid-column: 1 / -1; margin-bottom: 24px; }
@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
}
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.form-group label.opcao-radio, .form-group label.opcao-checkbox {
    display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 4px;
}
.form-group label.opcao-radio input, .form-group label.opcao-checkbox input { width: auto; }
.form-control, select.form-control, textarea.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-linha);
    border-radius: 3px;
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    background: var(--cor-superficie);
    color: var(--cor-tinta);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 3px rgba(199,154,59,0.18);
    outline: none;
}
textarea.form-control { min-height: 220px; resize: vertical; }
.text-danger { color: var(--cor-erro); font-size: 0.8rem; }
.form-actions { display: flex; gap: 12px; margin-top: 22px; }
/* Quando o botão de ação é o único dentro do cartão de formulário (sem um
   "Cancelar"/segunda ação ao lado), ocupa a largura toda em vez de ficar
   pequeno e solto à esquerda — ex.: newsletter, entrar, registar, etc. Não
   afeta os casos com 2+ botões lado a lado (só se aplica quando é filho
   único), nem os links "← Voltar" fora de um .form-card. */
.form-card .form-actions > .btn:only-child { width: 100%; justify-content: center; }

/* Pré-visualização de imagem nos formulários de upload */
.preview-imagem {
    margin-top: 10px;
    max-width: 100%;
    max-height: 220px;
    border-radius: 4px;
    border: 1px solid var(--cor-linha);
    display: none;
    object-fit: cover;
}
.preview-imagem.visivel { display: block; }

/* Wrapper automático (injetado por JS) em toda .preview-imagem — mostra um botão de
   "ver imagem completa" ao passar o cursor, sem precisar mexer em cada formulário. */
.preview-imagem-wrap { position: relative; display: inline-block; max-width: 100%; }
.preview-imagem-wrap .preview-imagem { margin-top: 0; }
.preview-imagem-wrap__botao {
    position: absolute;
    inset: 0;
    margin-top: 10px; /* alinha com a margem que .preview-imagem tinha */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,27,42,0.55);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.preview-imagem-wrap:hover .preview-imagem-wrap__botao { opacity: 1; }
.preview-imagem-wrap .preview-imagem:not(.visivel) + .preview-imagem-wrap__botao { display: none; }

/* Lightbox — reaproveita .modal-overlay/.modal-caixa, só com uma variante sem fundo/padding */
.modal-caixa--lightbox {
    background: transparent;
    box-shadow: none;
    width: auto;
    max-width: 92vw;
    max-height: 92vh;
    position: relative;
}
.modal-caixa--lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; display: block; }
.modal-caixa__fechar-lightbox {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--cor-tinta);
    border: none;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* ==== Botões ==== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primario { background: var(--cor-acento); color: #fff; }
.btn-primario:hover { background: #a87c26; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(199,154,59,0.35); }
.btn-secundario { background: transparent; color: var(--cor-tinta); border-color: var(--cor-linha); }
.btn-secundario:hover { background: var(--cor-superficie); border-color: var(--cor-acento); transform: translateY(-2px); }
.btn-perigo { background: var(--cor-erro); color: #fff; }
.btn-perigo:hover { background: #a4321f; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(192,57,43,0.3); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ==== Tabelas ==== */
table.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
}
table.tabela th, table.tabela td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-linha);
    font-size: 0.92rem;
}
table.tabela th {
    font-family: var(--fonte-dados);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-tinta-suave);
    background: var(--cor-fundo);
}
table.tabela tr:last-child td { border-bottom: none; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--cor-fundo); }
.acoes-tabela { display: flex; gap: 10px; }

/* ==== Detalhe do artigo ==== */
.artigo-detalhe__cabecalho { margin-bottom: 24px; animation: fade-sobe 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.artigo-detalhe__img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 24px;
    animation: fade-simples 0.9s ease 0.1s both;
}
.artigo-detalhe__conteudo { font-size: 1.18rem; line-height: 1.8; }
.artigo-detalhe__conteudo p,
.pagina-dinamica__conteudo p { margin: 0 0 1.2em; }
.artigo-detalhe__conteudo h2, .artigo-detalhe__conteudo h3,
.pagina-dinamica__conteudo h2, .pagina-dinamica__conteudo h3 { margin-top: 1.4em; }
.artigo-detalhe__conteudo ul, .artigo-detalhe__conteudo ol,
.pagina-dinamica__conteudo ul, .pagina-dinamica__conteudo ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.artigo-detalhe__conteudo li,
.pagina-dinamica__conteudo li { margin-bottom: 0.4em; }
.artigo-detalhe__conteudo a,
.pagina-dinamica__conteudo a { color: var(--cor-acento); text-decoration: underline; }
.artigo-detalhe__conteudo img,
.pagina-dinamica__conteudo img { max-width: 100%; border-radius: 4px; margin: 1em 0; }
.pagina-dinamica { max-width: 760px; margin: 0 auto; }
.pagina-dinamica__conteudo { font-size: 1.1rem; line-height: 1.8; margin-top: 20px; }

/* ==== Linha do tempo (Calendário Editorial) ==== */
.linha-tempo { position: relative; margin-top: 24px; padding-left: 24px; border-left: 2px solid var(--cor-linha); }
.linha-tempo__item { position: relative; padding-bottom: 28px; }
.linha-tempo__item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cor-acento);
    border: 2px solid var(--cor-papel);
}
.linha-tempo__data { font-size: 0.82rem; color: var(--cor-tinta-suave); font-weight: 600; margin-bottom: 4px; }
.linha-tempo__conteudo h3 { margin: 6px 0; }

/* ==== Hoje na História ==== */
.hoje-na-historia { margin: 48px 0; }
.hoje-na-historia__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.hoje-na-historia__item {
    display: flex;
    gap: 14px;
    background: var(--cor-superficie);
    border-radius: 8px;
    padding: 16px;
}
.hoje-na-historia__item img { width: 70px; height: 70px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.hoje-na-historia__ano { color: var(--cor-acento); margin-left: 8px; font-size: 0.9rem; }
.hoje-na-historia__item h4 { margin: 6px 0 4px; font-size: 1rem; }
.hoje-na-historia__item p { font-size: 0.88rem; color: var(--cor-tinta-suave); margin: 0; }

/* ==== Mural de Sugestões ==== */
.lista-sugestoes { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.sugestao-card {
    display: flex;
    gap: 18px;
    background: var(--cor-superficie);
    border-radius: 8px;
    padding: 18px 20px;
    align-items: flex-start;
}
.sugestao-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.sugestao-card p { margin: 0 0 6px; }
.sugestao-card__votos { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.sugestao-card__votos span { font-weight: 700; color: var(--cor-tinta); font-size: 1rem; }
.botao-votar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--cor-linha);
    background: var(--cor-superficie);
    color: var(--cor-tinta-suave);
    cursor: pointer;
    font-size: 1rem;
}
.botao-votar:hover:not(:disabled) { border-color: var(--cor-acento); color: var(--cor-acento); }
.botao-votar.votado { background: var(--cor-acento); color: #fff; border-color: var(--cor-acento); }
.botao-votar:disabled { cursor: not-allowed; opacity: 0.7; }

/* ==== Muvwa Academy — aulas ==== */
.aulas-curso { display: flex; flex-direction: column; gap: 28px; margin-top: 20px; }
.aulas-curso__item { border-bottom: 1px solid var(--cor-linha); padding-bottom: 24px; }
.aulas-curso__item h3 { margin-top: 0; }

/* Meu Processo Académico — trilho de progresso do aluno */
.processo-academico { display: flex; flex-direction: column; gap: 20px; }
.processo-academico__curso {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 10px;
    padding: 22px 24px;
}
.processo-academico__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.processo-academico__cabecalho h3 { margin: 0; }

.processo-academico__trilha {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 6px 0 14px;
}
.processo-academico__passo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    text-align: center;
    color: var(--cor-tinta-suave);
    flex-shrink: 0;
}
.processo-academico__passo i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-fundo);
    border: 2px solid var(--cor-linha);
    font-size: 0.95rem;
}
.processo-academico__passo span { font-size: 0.78rem; line-height: 1.3; }
.processo-academico__passo--feito { color: var(--cor-tinta); }
.processo-academico__passo--feito i { background: var(--cor-acento); border-color: var(--cor-acento); color: #fff; }
.processo-academico__passo--reprovado { color: var(--cor-tinta); }
.processo-academico__passo--reprovado i { background: #C0392B; border-color: #C0392B; color: #fff; }
.processo-academico__linha { flex: 1; min-width: 24px; height: 2px; background: var(--cor-linha); margin-bottom: 24px; }
.processo-academico__linha--feita { background: var(--cor-acento); }

.processo-academico__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.player-podcast { margin: 20px 0; }
.player-podcast__capa { width: 100%; max-width: 320px; border-radius: 12px; display: block; margin: 0 auto 16px; }

.sessao-ao-vivo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 8px;
    padding: 18px 20px;
    flex-wrap: wrap;
}
.sessao-ao-vivo-card i.fa-video { font-size: 1.6rem; color: var(--cor-acento); }
.sessao-ao-vivo-card > div { flex: 1; }
.sessao-ao-vivo-card p { margin: 2px 0 0; color: var(--cor-tinta-suave); }
.conteudo-aula-item { margin-bottom: 20px; }
.conteudo-aula-item__titulo { font-weight: 600; margin-bottom: 8px; }

/* ==== Modal genérica (centralizada — diferente do offcanvas, que deslize da direita).
   Fica aqui (não só no admin.css) porque o site público também usa modais (ex.: preview
   de PDF na Biblioteca Digital). ==== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,27,42,0.5);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.aberto { opacity: 1; visibility: visible; }
.modal-caixa {
    background: var(--cor-papel);
    border-radius: 10px;
    width: 420px;
    max-width: 100%;
    box-shadow: 0 20px 48px rgba(0,0,0,0.25);
    transform: scale(0.94) translateY(8px);
    transition: transform 0.2s ease;
}
.modal-overlay.aberto .modal-caixa { transform: scale(1) translateY(0); }
.modal-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cor-linha);
}
.modal-cabecalho h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.modal-cabecalho button {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--cor-tinta-suave);
    cursor: pointer;
    padding: 4px;
}
.modal-cabecalho button:hover { color: var(--cor-erro); }
.modal-corpo { padding: 20px 22px; }
.modal-rodape {
    padding: 16px 22px;
    border-top: 1px solid var(--cor-linha);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.modal-resultado {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: none;
}
.modal-resultado.sucesso { display: block; background: #E7F5EC; color: #1E7A4C; }
.modal-resultado.erro { display: block; background: #FBE9E7; color: #A4321F; }
.artigo-detalhe__conteudo blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--cor-acento);
    font-style: italic;
    color: var(--cor-tinta-suave);
}
.artigo-detalhe__meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--fonte-dados);
    font-size: 0.78rem;
    color: var(--cor-tinta-suave);
    margin: 10px 0 20px;
}

/* ==== Rodapé ==== */
.rodape {
    border-top: 1px solid var(--cor-linha);
    padding: 24px 0;
    background: var(--cor-superficie);
}
.rodape__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--cor-tinta-suave);
}
.rodape__redes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rodape__redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(13,27,42,0.06);
    color: var(--cor-acento-2);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.rodape__redes a:hover { background: var(--cor-acento); color: #fff; transform: translateY(-2px); }
.rodape__marca { display: flex; align-items: center; gap: 12px; }
.rodape__icone { height: 32px; width: auto; flex-shrink: 0; }
.rodape__links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.rodape__links a { color: var(--cor-tinta-suave); }
.rodape__links a:hover { color: var(--cor-acento); text-decoration: underline; }

/* ==== Painel de administração ==== */
.painel-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.painel-admin__card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.painel-admin__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(13,27,42,0.08);
    border-color: var(--cor-acento);
}
.painel-admin__card-icone {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(199,154,59,0.14);
    color: var(--cor-acento);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.painel-admin__card h3 {
    font-family: var(--fonte-dados);
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: normal;
    color: var(--cor-tinta);
    line-height: 1.15;
    margin: 0;
}
.painel-admin__card p { color: var(--cor-tinta-suave); font-size: 0.85rem; margin: 2px 0 0; }

/* ==== Seção "últimas funcionalidades" — cards clicáveis com cor por módulo ==== */
.painel-secao-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 4px;
}
.painel-secao-titulo__icone {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(199,154,59,0.14); color: var(--cor-acento);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.painel-secao-titulo h2 { margin: 0; font-size: 1.05rem; }
.painel-secao-titulo p { margin: 0; color: var(--cor-tinta-suave); font-size: 0.82rem; }

a.painel-admin__card { text-decoration: none; cursor: pointer; position: relative; }
a.painel-admin__card::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 16px; right: 16px; font-size: 0.75rem;
    color: var(--cor-tinta-suave); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
a.painel-admin__card:hover::after { opacity: 1; transform: translateX(3px); }

.painel-admin__card-icone--academy { background: rgba(45,108,223,0.14); color: #2D6CDF; }
.painel-admin__card-icone--orienta { background: rgba(155,89,182,0.14); color: #9B59B6; }
.painel-admin__card-icone--empreende { background: rgba(39,174,96,0.14); color: #27AE60; }
.painel-admin__card-icone--comunidade { background: rgba(230,126,34,0.14); color: #E67E22; }

/* ==== Cartões de atalho do dashboard (Admin) ==== */
.painel-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.cartao-atalho {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.cartao-atalho:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(13,27,42,0.10);
    border-color: var(--cor-acento);
}
.cartao-atalho__icone {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(199,154,59,0.14);
    color: var(--cor-acento);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 4px;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cartao-atalho:hover .cartao-atalho__icone {
    transform: rotate(-6deg) scale(1.08);
    background: var(--cor-acento);
    color: #fff;
}
.cartao-atalho h3 { font-size: 1.05rem; margin: 0; }
.cartao-atalho p { color: var(--cor-tinta-suave); font-size: 0.88rem; margin: 0; flex: 1; }
.cartao-atalho__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cartao-atalho__link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cor-acento-2);
    padding: 6px 13px;
    border-radius: 20px;
    background: rgba(13,27,42,0.06);
    transition: background 0.2s ease, color 0.2s ease;
}
.cartao-atalho__link:hover { background: var(--cor-acento); color: #fff; }

/* ==== Botões com ícone (substituem texto em ações repetidas) ==== */
.icone-btn { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.icone-btn--sm { font-size: 0.85rem; }

/* Tooltip customizado, mais bonito que o title nativo do navegador */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #14181C;
    color: #fff;
    font-family: var(--fonte-corpo);
    font-size: 0.74rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
}
[data-tip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #14181C;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 200;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before { opacity: 1; }

/* Botão "somente ícone" — funciona sobre .btn/.btn-primario/.btn-secundario/.btn-perigo já existentes,
   e sobre .btn-sm para o tamanho compacto das ações de tabela. Formato circular, mais amigável. */
.btn.btn--icone-apenas {
    padding: 0;
    width: 42px;
    height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.btn.btn-sm.btn--icone-apenas {
    width: 32px;
    height: 32px;
}
.btn.btn-sm.btn--icone-apenas .icone-btn { font-size: 0.85rem; }
.btn-secundario.btn--icone-apenas:hover { background: var(--cor-tinta); border-color: var(--cor-tinta); color: #fff; }
.acoes-tabela { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }

/* Botões primários (pílula) com ícone + texto curto, quando o texto ainda é necessário */
.btn-com-icone { display: inline-flex; align-items: center; gap: 8px; }

/* ==== Galeria de mídia do artigo ==== */
.galeria-midia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 24px 0; }
.galeria-midia__item {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.galeria-midia__item:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(13,27,42,0.12); }
.galeria-midia__item img, .galeria-midia__item iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; transition: transform 0.5s ease; }
.galeria-midia__item:hover img { transform: scale(1.05); }
.galeria-midia__item .preview-imagem-wrap { display: block; width: 100%; }
.galeria-midia__legenda { padding: 8px 12px; font-size: 0.8rem; color: var(--cor-tinta-suave); display: flex; justify-content: space-between; align-items: center; }

/* ==== Seção personalizada (HTML livre) ==== */
.secao-personalizada { padding: 24px; background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 4px; }

/* ==== CTA de assinatura de notificações ==== */
.cta-assinatura {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--cor-masthead-bg);
    color: var(--cor-masthead-texto);
    padding: 24px 28px;
    border-radius: 6px;
    margin: 40px 0;
}
.cta-assinatura h3 { color: var(--cor-masthead-texto); margin-bottom: 4px; }
.cta-assinatura p { color: var(--cor-masthead-texto); opacity: 0.75; margin: 0; font-size: 0.9rem; }

/* ==== Rolagem infinita ==== */
.indicador-carregando {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--cor-tinta-suave);
    font-size: 0.9rem;
}
.indicador-carregando.visivel { display: flex; }
.spinner-carregando {
    width: 18px;
    height: 18px;
    border: 2px solid var(--cor-linha);
    border-top-color: var(--cor-acento);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
/* ==== Vazio ==== */
.estado-vazio {
    text-align: center;
    padding: 60px 20px;
    color: var(--cor-tinta-suave);
}

/* ==== Barra de progresso de leitura ==== */
.barra-progresso {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--cor-acento);
    z-index: 999;
    transition: width 0.1s linear;
}

/* ==== Botão flutuante "voltar ao topo" ==== */
.botao-topo {
    position: fixed;
    right: 24px;
    bottom: 88px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cor-masthead-bg);
    color: var(--cor-masthead-texto);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(13,27,42,0.28);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    z-index: 150;
}
.botao-topo.visivel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.botao-topo:hover { background: var(--cor-acento); }

/* ==== Páginas institucionais (Visão / Valores) ==== */
.pagina-institucional {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding: 8px 0 24px;
}
.pagina-institucional__badge {
    position: absolute;
    top: -8px;
    right: 0;
    background: var(--cor-acento);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.3rem;
    width: 56px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 8px 8px;
}
.pagina-institucional__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pagina-institucional__eyebrow .linha { width: 40px; height: 2px; background: var(--cor-acento); display: inline-block; }
.pagina-institucional h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--cor-acento); margin-bottom: 20px; }
.pagina-institucional__texto p { font-size: 1.05rem; color: var(--cor-tinta); line-height: 1.7; }
.pagina-institucional__texto strong { color: var(--cor-tinta); }

.pagina-institucional__citacao {
    margin-top: 32px;
    padding: 20px 24px 20px 28px;
    border-left: 3px solid var(--cor-acento);
    position: relative;
}
.pagina-institucional__citacao .aspas {
    font-family: var(--fonte-display);
    font-size: 3rem;
    color: var(--cor-acento);
    line-height: 0;
    position: relative;
    top: 18px;
}
.pagina-institucional__citacao p {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--cor-tinta-suave);
    margin: 0;
}

.pagina-institucional__visual {
    background: var(--cor-masthead-bg);
    border-radius: 12px;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(199,154,59,0.18) 0, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(199,154,59,0.12) 0, transparent 40%);
}
.pagina-institucional__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(230,232,235,0.14) 1px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.6;
}
.pagina-institucional__visual svg {
    position: relative;
    z-index: 1;
    animation: girar 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .pagina-institucional__visual svg { animation: none; }
}

.pagina-institucional__intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}
.pagina-institucional__intro h1 { color: var(--cor-acento); }
.pagina-institucional__intro p { font-size: 1.05rem; color: var(--cor-tinta-suave); }

/* ==== Cartões de valores ==== */
.grid-valores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
}
.valor-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 4px;
    border-bottom: 1px dashed var(--cor-linha);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.3s ease;
}
.valor-card:hover { transform: translateX(6px); padding-left: 10px; }
.valor-card__icone {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cor-masthead-bg);
    color: var(--cor-acento);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.valor-card:hover .valor-card__icone {
    background: var(--cor-acento);
    color: #fff;
    transform: rotate(-8deg) scale(1.08);
}
.valor-card__icone svg { width: 26px; height: 26px; }
.valor-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.valor-card p { margin: 0; font-size: 0.9rem; color: var(--cor-tinta-suave); }

@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; }

    .botao-menu-site { display: flex; }

    .masthead__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 500;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--cor-masthead-bg);
        padding: 12px 24px 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    }
    .masthead__nav.aberto { display: flex; }
    .masthead__nav a { padding: 10px 0; width: 100%; }
    .masthead { position: relative; z-index: 100; }

    /* O menu de opções (tema/idioma/instalar/economia de dados) e o combobox de idioma
       ficam dentro do menu mobile junto com os links — sem isto, ficavam estreitos e
       desalinhados à esquerda, e o dropdown interno (que usa "right:0" pensando no
       layout de telas largas) podia até ultrapassar a borda da tela. */
    .masthead__nav #menu-opcoes-site,
    .masthead__nav .alternador-tema {
        width: 100%;
        margin: 6px 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 10px;
    }
    .masthead__nav .alternador-tema__gatilho {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        font-size: 0.92rem;
    }
    .masthead__nav .alternador-tema__gatilho::after { content: "Mais opções"; font-size: 0.92rem; }
    .masthead__nav .alternador-tema__menu {
        position: static;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        margin-top: 8px;
        border-color: rgba(255,255,255,0.15);
    }
    .masthead__nav select.seletor-idioma { width: 100%; margin-top: 6px; }

    .pagina-institucional { grid-template-columns: 1fr; }
    .grid-valores { grid-template-columns: 1fr; }
}

/* ==== Banner de consentimento de cookies ==== */
.cookie-consent {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    max-width: 720px;
    margin: 0 auto;
    background: var(--cor-tinta);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(13,27,42,0.35);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: cookie-consent-entrar 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-consent--escondido {
    animation: cookie-consent-sair 0.3s ease forwards;
    pointer-events: none;
}
@keyframes cookie-consent-entrar {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes cookie-consent-sair {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(30px); opacity: 0; }
}
.cookie-consent__texto {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 240px;
}
.cookie-consent__texto i {
    color: var(--cor-acento);
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.cookie-consent__texto p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.88);
}
.cookie-consent__acoes {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-consent__acoes .btn-secundario {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.cookie-consent__acoes .btn-secundario:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
    .cookie-consent { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
    .cookie-consent__acoes { width: 100%; justify-content: flex-end; }
}

/* ==== Accordion de Perguntas Frequentes (FAQ) ==== */
.faq-item { border: 1px solid var(--cor-linha); border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: var(--cor-superficie); }
.faq-item__pergunta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: none;
    padding: 16px 18px;
    text-align: left;
    font-family: var(--fonte-dados);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cor-tinta);
    cursor: pointer;
}
.faq-item__pergunta i { color: var(--cor-acento); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item.aberto .faq-item__pergunta i { transform: rotate(180deg); }
.faq-item__resposta { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.aberto .faq-item__resposta { max-height: 600px; }
.faq-item__resposta p { padding: 0 18px 18px; margin: 0; color: var(--cor-tinta-suave); white-space: pre-wrap; }

/* ==== Narrador de artigo (Web Speech API) ==== */
.narrador-artigo { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.narrador-artigo .btn.ativo { background: var(--cor-acento); color: #fff; border-color: var(--cor-acento); }

.imagem-economia-wrap { position: relative; display: block; }
.imagem-economia-wrap__botao {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(233,233,236,0.75);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cor-tinta);
}
.imagem-economia-wrap__botao:hover { background: rgba(233,233,236,0.9); }

/* ==== Progresso visual do curso ==== */
.progresso-curso { margin: 16px 0 28px; }
.progresso-curso__topo { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--cor-tinta-suave); margin-bottom: 6px; font-weight: 600; }
.progresso-curso__barra { height: 10px; background: var(--cor-linha); border-radius: 6px; overflow: hidden; }
.progresso-curso__preenchimento { height: 100%; background: var(--cor-acento); border-radius: 6px; transition: width 0.3s ease; }
.checkbox-aula-concluida { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--cor-tinta-suave); white-space: nowrap; cursor: pointer; }
.checkbox-aula-concluida input { cursor: pointer; }

/* ==== Avaliações de curso ==== */
.lista-avaliacoes { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.avaliacao-item { border: 1px solid var(--cor-linha); border-radius: 8px; padding: 14px 16px; background: var(--cor-superficie); }

/* ==== Comentários em artigos ==== */
.lista-comentarios { display: flex; flex-direction: column; gap: 12px; }
.comentario-item { border-left: 3px solid var(--cor-acento); padding: 10px 16px; background: var(--cor-superficie); border-radius: 0 6px 6px 0; }

/* ==== Perfil público do leitor ==== */
.perfil-publico__cabecalho { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.perfil-publico__foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.perfil-publico__foto--generica { display: flex; align-items: center; justify-content: center; background: var(--cor-fundo); color: var(--cor-tinta-suave); font-size: 2rem; }
.perfil-publico__estatisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.perfil-publico__stat { text-align: center; background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 8px; padding: 16px 8px; }
.perfil-publico__stat strong { display: block; font-size: 1.6rem; font-family: var(--fonte-dados); color: var(--cor-acento); }
.perfil-publico__stat span { font-size: 0.78rem; color: var(--cor-tinta-suave); }
.perfil-publico__selos { display: flex; flex-wrap: wrap; gap: 12px; }
.selo-item { display: flex; align-items: center; gap: 8px; background: var(--cor-superficie); border: 1px solid var(--cor-acento); border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; color: var(--cor-tinta); }
.selo-item i { color: var(--cor-acento); }
@media (max-width: 600px) {
    .perfil-publico__estatisticas { grid-template-columns: repeat(2, 1fr); }
}

/* ==== Resumo automático (IA) na página do artigo ==== */
.resumo-ia-caixa { background: var(--cor-superficie); border-left: 3px solid var(--cor-acento); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 16px 0 24px; color: var(--cor-tinta); }
.resumo-ia-caixa__titulo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-tinta-suave); margin: 0 0 6px; font-weight: 600; }

/* ==== Fórum de curso ==== */
.lista-topicos-forum { display: flex; flex-direction: column; gap: 10px; }
.topico-forum-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--cor-linha); border-radius: 8px; padding: 14px 16px; background: var(--cor-superficie); text-decoration: none; color: var(--cor-tinta); }
.topico-forum-item:hover { border-color: var(--cor-acento); }
.topico-forum-item__contagem { color: var(--cor-tinta-suave); font-size: 0.85rem; white-space: nowrap; }

/* ==== Widget do chatbot ==== */
#chatbot-widget { position: fixed; bottom: 20px; right: 20px; z-index: 200; }
#chatbot-botao-abrir {
    width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--cor-acento);
    color: #fff; font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center;
}
#chatbot-painel {
    position: absolute; bottom: 68px; right: 0; width: 320px; max-height: 440px;
    background: var(--cor-papel); border: 1px solid var(--cor-linha); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2); flex-direction: column; overflow: hidden;
}
.chatbot-painel__cabecalho {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
    background: var(--cor-tinta); color: #fff; font-weight: 600; font-size: 0.9rem;
}
.chatbot-painel__cabecalho button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; }
.chatbot-painel__mensagens { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; }
.chatbot-mensagem { padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; line-height: 1.4; max-width: 85%; }
.chatbot-mensagem--bot { background: var(--cor-fundo); color: var(--cor-tinta); align-self: flex-start; }
.chatbot-mensagem--utilizador { background: var(--cor-acento); color: #fff; align-self: flex-end; }
.chatbot-mensagem a { color: var(--cor-acento); font-weight: 600; text-decoration: underline; }
.chatbot-mensagem--utilizador a { color: #fff; }
.chatbot-painel__form { display: flex; border-top: 1px solid var(--cor-linha); }
.chatbot-painel__form input { flex: 1; border: none; padding: 10px 12px; background: transparent; color: var(--cor-tinta); font-family: inherit; font-size: 0.85rem; }
.chatbot-painel__form input:focus { outline: none; }
.chatbot-painel__form button { border: none; background: var(--cor-acento); color: #fff; width: 42px; cursor: pointer; }
@media (max-width: 480px) {
    #chatbot-painel { width: calc(100vw - 40px); }
}

/* ==== Linha do tempo do processo de mentoria ==== */
.linha-tempo-mentoria { position: relative; padding-left: 28px; }
.linha-tempo-mentoria::before {
    content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
    background: var(--cor-linha);
}
.etapa-mentoria { position: relative; margin-bottom: 20px; }
.etapa-mentoria__marcador {
    position: absolute; left: -28px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--cor-superficie); border: 3px solid var(--cor-acento);
}
.etapa-mentoria--concluida .etapa-mentoria__marcador { background: #1E7A4C; border-color: #1E7A4C; }
.etapa-mentoria__corpo { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 8px; padding: 14px 16px; }
.etapa-mentoria__cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.etapa-mentoria__data { color: var(--cor-tinta-suave); font-size: 0.78rem; white-space: nowrap; }
.etapa-mentoria__info { margin: 8px 0 0; color: var(--cor-tinta-suave); white-space: pre-wrap; }
.etapa-mentoria__registado-por { margin: 6px 0 0; font-size: 0.76rem; color: var(--cor-tinta-suave); font-style: italic; }
.etapa-mentoria__concluida-em { margin: 6px 0 0; font-size: 0.8rem; color: #1E7A4C; font-weight: 600; }
.etapa-mentoria__acoes { display: flex; gap: 8px; margin-top: 10px; }

/* ==== Autenticação de dois fatores — cartões de método ==== */
.grid-metodos-2fa { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.cartao-metodo-2fa-form { display: contents; }
.cartao-metodo-2fa {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 10px;
    padding: 20px; text-align: left; cursor: pointer; text-decoration: none; color: inherit;
    font-family: inherit; width: 100%; transition: border-color 0.2s ease, transform 0.2s ease;
}
.cartao-metodo-2fa:hover { border-color: var(--cor-acento); transform: translateY(-2px); }
.cartao-metodo-2fa i { font-size: 1.6rem; color: var(--cor-acento); }
.cartao-metodo-2fa strong { color: var(--cor-tinta); font-size: 1rem; }
.cartao-metodo-2fa span { color: var(--cor-tinta-suave); font-size: 0.84rem; }

/* ==== Chat de colaboração da mentoria ==== */
.lista-mensagens-chat {
    display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto;
    padding: 12px; background: var(--cor-fundo); border-radius: 8px; border: 1px solid var(--cor-linha);
}
.mensagem-chat { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 8px; padding: 8px 12px; max-width: 85%; align-self: flex-start; }
.mensagem-chat--minha { background: var(--cor-acento); color: #fff; align-self: flex-end; border-color: var(--cor-acento); }
.mensagem-chat strong { font-size: 0.78rem; display: block; margin-bottom: 2px; }
.mensagem-chat p { margin: 0 0 4px; }
.mensagem-chat span { font-size: 0.7rem; opacity: 0.75; }
.mensagem-chat--minha strong, .mensagem-chat--minha span { color: #fff; opacity: 0.9; }

.cartao-solicitacao-documento {
    background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: 8px;
    padding: 12px; margin-bottom: 10px;
}
.cartao-solicitacao-documento p { margin: 4px 0 0; font-size: 0.85rem; color: var(--cor-tinta-suave); }
.cartao-solicitacao-documento__atendida { color: #1E7A4C; font-weight: 600; }
.cartao-solicitacao-documento__pendente { color: #B8860B; font-weight: 600; }

/* ==== Módulo de Avaliações — seletor de estrelas ==== */
.estrelas-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 14px;
    font-size: 2.6rem;
    margin: 12px 0;
}
.estrelas-input input { display: none; }
/* font-size e display precisam de ser declarados AQUI, diretamente no <label>
   (não só herdados do "font-size" do .estrelas-input acima) — porque
   ".form-group label" (mais acima neste ficheiro) já define font-size: 0.85rem
   e display: block diretamente nestes mesmos <label> (os critérios de avaliação
   ficam dentro de um .form-group). Uma declaração direta na própria label sempre
   vence uma herdada do elemento pai, por isso sem este override as estrelas
   ficavam do tamanho do texto normal (minúsculas) em vez do tamanho pretendido. */
.estrelas-input label {
    display: inline-block;
    font-size: 2.6rem;
    color: #D5D9DE;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
    line-height: 1;
}
.estrelas-input input:checked ~ label,
.estrelas-input label:hover,
.estrelas-input label:hover ~ label {
    color: #C79A3B;
}
.estrelas-input label:hover {
    transform: scale(1.12);
}
@media (max-width: 480px) {
    .estrelas-input { gap: 8px; font-size: 2rem; }
    .estrelas-input label { font-size: 2rem; }
}

/* ==== Mapas Leaflet (leitura e edição) — tela inteira ==== */
/* Sem isto, o navegador coloca o <div> do mapa em tela inteira mas ele mantém a
   altura fixa definida inline na view — ficando uma faixa pequena no meio da tela
   preta em vez de ocupar tudo. Classe partilhada por todos os mapas do site: o de
   leitura (Views/Avaliar/Elemento.cshtml, #mapa-elemento-avaliar) e os de edição de
   geolocalização (wwwroot/js/mapa-geolocalizacao.js — #mapa-elemento, #mapa-instituicao). */
.mapa-leaflet:fullscreen,
.mapa-leaflet:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* ==== Seção de mapa em largura total (formulários com mapa de geolocalização) ==== */
/* Rompe com o max-width centrado do <main class="container"> (ver site.css →
   "Layout base") só para esta seção, para o mapa aproveitar toda a largura da
   tela — o resto do formulário continua num cartão centrado e legível. */
.mapa-secao-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0 24px;
    margin-bottom: 20px;
}
.mapa-secao-full-width .mapa-leaflet {
    width: 100%;
}
@media (max-width: 600px) {
    .mapa-secao-full-width { padding: 0 12px; }
}

/* ==== Caixa de pesquisa de endereço no mapa (Nominatim/OpenStreetMap) ==== */
/* Ver wwwroot/js/mapa-geolocalizacao.js → ControlePesquisa. Sem "position:absolute"
   aqui, a lista de resultados apareceria encaixada ao lado do campo de texto (o
   contentor é um flex row) em vez de flutuar por cima do mapa como um dropdown. */
.mapa-pesquisa-endereco {
    position: relative;
}
.mapa-pesquisa-endereco__resultados {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    max-height: 220px;
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 1000;
}