/* =====================================================================
   Formação Afiliada, estilo
   Direção: ambiente de estudo calmo e confiável. Verde (crescimento) e
   dourado (valor conquistado com honestidade). Nada de estética de hype.
   Fontes: Fraunces (títulos, serifada e calorosa) + Inter (texto e interface).
   ===================================================================== */

:root {
    --papel:        #F3F4EF;
    --papel-fundo:  #ECEEE7;
    --tinta:        #16231D;
    --tinta-suave:  #4A5750;
    --verde:        #1E4D3A;
    --verde-escuro: #15362A;
    --verde-tenue:  #E4EDE6;
    --ambar:        #C2871B;
    --ambar-claro:  #F4E7C9;
    --alerta:       #9E3B2B;
    --alerta-tenue: #F6E4DF;
    --linha:        #D7D8CE;
    --branco:       #FBFBF8;
    --raio:         10px;
    --sombra:       0 1px 2px rgba(22, 35, 29, .06);
    --largura-leitura: 40rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    line-height: 1.2;
    color: var(--verde-escuro);
    font-weight: 600;
}

a { color: var(--verde); }

.sobrinho {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--ambar);
    font-weight: 600;
    margin: 0 0 .5rem;
}

/* ---------------- Botões ---------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--verde);
    background: var(--verde);
    color: var(--branco);
    padding: .7rem 1.2rem;
    border-radius: var(--raio);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.botao:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.botao--cheio { width: 100%; }
.botao--pequeno { padding: .5rem .95rem; font-size: .92rem; }
.botao--fantasma {
    background: transparent;
    color: var(--verde);
}
.botao--fantasma:hover { background: var(--verde-tenue); color: var(--verde-escuro); }
.botao:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---------------- Marca ---------------- */
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.marca__nome { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--verde-escuro); }
.marca__folha {
    width: 18px; height: 18px;
    background: var(--verde);
    border-radius: 0 60% 0 60%;
    transform: rotate(-12deg);
    display: inline-block;
}
.marca__folha--grande { width: 34px; height: 34px; margin: 0 auto .8rem; }

/* ---------------- Topo ---------------- */
.topo {
    position: sticky; top: 0; z-index: 10;
    background: rgba(243, 244, 239, .92);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--linha);
}
.topo__interno {
    max-width: 62rem; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.3rem;
}
.topo__nav { display: flex; align-items: center; gap: 1rem; }
.topo__ola { color: var(--tinta-suave); font-size: .95rem; }

.conteudo { max-width: 62rem; margin: 0 auto; padding: 2.4rem 1.3rem 4rem; }

/* ---------------- Rodapé ---------------- */
.rodape {
    border-top: 1px solid var(--linha);
    color: var(--tinta-suave);
    font-size: .85rem;
    text-align: center;
    padding: 1.6rem 1.3rem;
    max-width: 62rem; margin: 0 auto;
}

/* ---------------- Login ---------------- */
.pagina-login {
    min-height: 100vh;
    display: grid; place-items: center;
    background:
        radial-gradient(120% 90% at 50% -10%, var(--verde-tenue), transparent 60%),
        var(--papel);
    padding: 1.5rem;
}
.login {
    width: 100%; max-width: 24rem;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 16px;
    padding: 2.2rem 1.8rem;
    box-shadow: 0 10px 40px rgba(22, 35, 29, .08);
    text-align: center;
}
.login__marca { margin-bottom: 1.4rem; }
.login__titulo { font-size: 1.7rem; margin: 0; }
.login__sub { color: var(--tinta-suave); font-size: .95rem; margin: .4rem 0 0; }
.login__form { text-align: left; display: grid; gap: 1rem; margin-top: .5rem; }
.login__nota { color: var(--tinta-suave); font-size: .82rem; margin-top: 1.2rem; }

.campo { display: grid; gap: .35rem; }
.campo__rotulo { font-size: .88rem; font-weight: 600; color: var(--tinta-suave); }
.campo__entrada {
    font: inherit;
    padding: .7rem .8rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel);
    color: var(--tinta);
}
.campo__entrada:focus-visible { outline: 3px solid var(--ambar); outline-offset: 1px; border-color: var(--ambar); }

/* ---------------- Avisos ---------------- */
.aviso { border-radius: var(--raio); padding: .7rem .9rem; font-size: .92rem; margin: 0; }
.aviso--erro { background: var(--alerta-tenue); color: var(--alerta); border: 1px solid #E6C3BB; }
.aviso--ok   { background: var(--verde-tenue); color: var(--verde-escuro); border: 1px solid #C4DBCB; }

/* ---------------- Painel ---------------- */
.painel-topo { margin-bottom: 2.6rem; max-width: 46rem; }
.painel-topo__titulo { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 .7rem; }
.painel-topo__texto { color: var(--tinta-suave); margin: 0 0 1.6rem; }

.progresso { max-width: 30rem; }
.progresso__barra {
    height: 12px; background: var(--papel-fundo);
    border-radius: 999px; overflow: hidden;
    border: 1px solid var(--linha);
}
.progresso__preenchido {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ambar), #DCA635);
    border-radius: 999px;
    transition: width .5s ease;
}
.progresso__texto { font-size: .9rem; color: var(--tinta-suave); margin: .5rem 0 0; }

/* ---------------- Trilha ---------------- */
.nivel { margin-bottom: 2.6rem; }
.nivel__titulo {
    font-size: 1.05rem; text-transform: none;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--linha);
    padding-bottom: .5rem; margin: 0 0 .4rem;
    font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .02em;
}
.trilha { list-style: none; margin: 0; padding: 0; }
.trilha__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem .3rem;
    border-bottom: 1px solid var(--linha);
}
.trilha__numero {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--verde-tenue);
    color: var(--verde);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.trilha__item--feito .trilha__numero { background: var(--verde); color: var(--branco); }
.trilha__titulo { font-size: 1.1rem; margin: 0 0 .15rem; }
.trilha__resumo { margin: 0; color: var(--tinta-suave); font-size: .93rem; }
.trilha__item--bloqueado { opacity: .6; }
.trilha__item--bloqueado .trilha__numero { background: var(--papel-fundo); color: var(--tinta-suave); }
.selo-breve {
    font-size: .82rem; color: var(--tinta-suave);
    border: 1px dashed var(--linha); border-radius: 999px;
    padding: .3rem .7rem; white-space: nowrap;
}

/* ---------------- Artigo (módulo) ---------------- */
.artigo { max-width: var(--largura-leitura); margin: 0 auto; }
.voltar { font-size: .9rem; display: inline-block; margin-bottom: 1.4rem; }
.artigo__cabecalho { margin-bottom: 1.8rem; }
.artigo__titulo { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0; }

.artigo h2 { font-size: 1.5rem; margin: 2.4rem 0 .8rem; }
.artigo h3 { font-size: 1.12rem; margin: 0 0 .3rem; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--verde-escuro); }
.artigo p { margin: 0 0 1rem; }
.guia {
    font-size: 1.12rem;
    color: var(--tinta-suave);
    border-left: 3px solid var(--ambar);
    padding-left: 1rem;
}

/* Passos numerados */
.passos { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 1.1rem; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.passo__n {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: var(--verde-escuro); color: var(--branco);
    border-radius: 50%; font-family: 'Fraunces', serif; font-weight: 600;
}
.passo p { margin: 0; color: var(--tinta-suave); }

/* Callouts */
.callout { border-radius: var(--raio); padding: 1.1rem 1.2rem; margin: 1.8rem 0; }
.callout__titulo { font-weight: 700; margin: 0 0 .5rem; font-family: 'Inter', sans-serif; }
.callout p { margin: 0 0 .6rem; }
.callout p:last-child { margin-bottom: 0; }
.callout__nota { font-size: .82rem; opacity: .8; }
.callout--verdade { background: var(--verde-tenue); border-left: 4px solid var(--verde); }
.callout--verdade .callout__titulo { color: var(--verde-escuro); }
.callout--cuidado { background: var(--alerta-tenue); border-left: 4px solid var(--alerta); }
.callout--cuidado .callout__titulo { color: var(--alerta); }

/* Conceitos (acordeão nativo) */
.conceitos { display: grid; gap: .5rem; margin: 1rem 0 1.6rem; }
.conceito {
    border: 1px solid var(--linha); border-radius: var(--raio);
    background: var(--branco); overflow: hidden;
}
.conceito > summary {
    cursor: pointer; padding: .8rem 1rem; font-weight: 600; color: var(--verde-escuro);
    list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.conceito > summary::-webkit-details-marker { display: none; }
.conceito > summary::after { content: '+'; color: var(--ambar); font-size: 1.3rem; line-height: 1; }
.conceito[open] > summary::after { content: '–'; }
.conceito > p { margin: 0; padding: 0 1rem 1rem; color: var(--tinta-suave); }

/* Checklist */
.checklist { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.checklist label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.checklist input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--verde); flex: none; }
.checklist input:checked + * , .checklist label:has(input:checked) { color: var(--tinta-suave); }

/* Quiz */
.quiz { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.3rem; margin: 1rem 0 2rem; }
.quiz__pergunta { margin-bottom: 1.3rem; }
.quiz__enunciado { font-weight: 600; margin: 0 0 .5rem; }
.quiz__pergunta label { display: flex; gap: .55rem; align-items: center; padding: .25rem 0; cursor: pointer; }
.quiz__pergunta input { accent-color: var(--verde); }
.quiz__retorno { font-size: .9rem; margin: .4rem 0 0; min-height: 0; }
.quiz__retorno.certo { color: var(--verde); }
.quiz__retorno.errado { color: var(--alerta); }
.quiz__placar { font-weight: 600; margin: .8rem 0 0; }

/* Lista de informações por plataforma */
.lista-info { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lista-info li {
    padding-left: 1rem;
    border-left: 2px solid var(--linha);
    color: var(--tinta-suave);
}
.lista-info strong { color: var(--tinta); }

/* Linha de veredito ao fim de cada plataforma */
.veredito {
    background: var(--ambar-claro);
    border-radius: var(--raio);
    padding: .7rem 1rem;
    margin: .8rem 0 2rem;
}
.veredito strong { color: var(--verde-escuro); }

/* Tabela comparativa (rola na horizontal no celular) */
.tabela-rolavel { overflow-x: auto; margin: 1rem 0 1.6rem; border-radius: var(--raio); }
.tabela {
    width: 100%; border-collapse: collapse;
    font-size: .92rem; background: var(--branco);
    min-width: 34rem;
}
.tabela th, .tabela td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--linha); }
.tabela thead th { background: var(--verde); color: var(--branco); font-family: 'Inter', sans-serif; font-weight: 600; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:nth-child(even) td { background: var(--papel); }

.proximo {
    border-top: 1px solid var(--linha);
    margin-top: 2rem; padding-top: 1.2rem;
    color: var(--tinta-suave);
}

.artigo__rodape { display: grid; gap: .7rem; margin-top: 2.4rem; }

/* ---------------- Administração de usuários ---------------- */
.admin { max-width: 52rem; margin: 0 auto; }
.admin__titulo { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: .4rem 0 .4rem; }
.admin__texto { color: var(--tinta-suave); margin: 0 0 1.8rem; }
.admin__sub { font-size: 1.3rem; margin: 2rem 0 .9rem; }

.form-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.3rem;
}
.campo--botao { grid-column: 1 / -1; align-self: end; }

.acoes { white-space: nowrap; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.acao-inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.acao-senha > summary {
    cursor: pointer; color: var(--verde); font-size: .9rem; font-weight: 600;
    list-style: none;
}
.acao-senha > summary::-webkit-details-marker { display: none; }
.acao-senha[open] { margin-top: .5rem; }

.mini-progresso { display: flex; align-items: center; gap: .5rem; min-width: 110px; }
.mini-progresso__barra {
    flex: 1; height: 8px;
    background: var(--papel-fundo);
    border: 1px solid var(--linha);
    border-radius: 999px; overflow: hidden;
}
.mini-progresso__preench {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ambar), #DCA635);
}
.mini-progresso__txt {
    font-size: .82rem; color: var(--tinta-suave);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 620px) {
    body { font-size: 16px; }
    .trilha__item { grid-template-columns: auto 1fr; }
    .trilha__acao { grid-column: 1 / -1; justify-self: start; padding-left: 56px; }
    .topo__ola { display: none; }
    .form-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}