/* assets/fm-doc.css — molde das páginas de conhecimento (T251, 20/09/2026)
   /metodologia/**, /sobre/**. Carregado DEPOIS de /blog/blog.css (tokens,
   header, botão, FAQ) e só age nas classes .doc*. Regra: margem de leitura
   fixa (760px, 20/32px laterais), nada estoura na horizontal, escala
   tipográfica única. Não altera tipografia nem paleta aprovadas. */

/* --- moldura ------------------------------------------------------------ */
.doc{max-width:760px;margin:0 auto;padding:28px 20px 56px}
@media(min-width:860px){.doc{padding:40px 32px 72px}}
.doc *{min-width:0}
.doc img,.doc video,.doc svg{max-width:100%;height:auto}
.doc p,.doc li,.doc h1,.doc h2,.doc h3,.doc dd,.doc dt,.doc td,.doc th,.doc blockquote{overflow-wrap:anywhere}
.doc .tabela{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 22px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--borda);overflow-wrap:normal;min-width:110px}
.doc td:first-child,.doc th:first-child{white-space:nowrap;min-width:0}
.doc th{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--teal-suave);background:rgba(14,79,79,.04)}
.doc pre{white-space:pre-wrap}
.doc dfn{font-style:normal}

/* --- escala tipográfica única ------------------------------------------- */
.doc h1{font-size:clamp(30px,6vw,44px);line-height:1.12;letter-spacing:-.01em;margin:6px 0 14px}
.doc h2{font-size:clamp(22px,4vw,28px);line-height:1.2;margin:44px 0 12px}
.doc h3{font-size:clamp(18px,3vw,21px);line-height:1.3;margin:28px 0 8px}
.doc p{font-size:17px;line-height:1.68;margin:0 0 16px;color:rgba(14,79,79,.86)}
.doc ul,.doc ol{margin:0 0 18px 22px;font-size:17px;line-height:1.62;color:rgba(14,79,79,.86)}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--coral)}
.doc strong{color:var(--teal)}
.doc a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(232,106,74,.55)}
.doc a:hover{color:var(--coral-escuro)}
.doc blockquote{margin:18px 0 22px;padding:14px 20px;border-left:4px solid var(--teal);background:rgba(14,79,79,.05);border-radius:0 14px 14px 0;font-size:17.5px;line-height:1.6}
.doc blockquote p{margin:0}
.doc blockquote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;font-weight:800;color:var(--teal-leve)}

/* --- cabeça da página ---------------------------------------------------- */
.doc-migalha{font-size:13px;font-weight:800;color:var(--teal-leve);margin-bottom:14px}
.doc-migalha ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.doc-migalha li+li::before{content:"›";margin-right:8px;color:var(--teal-leve)}
.doc-migalha a{text-decoration:none;color:var(--teal-suave)}
.doc-migalha a:hover{color:var(--coral-escuro)}
.doc-papel{font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--coral-escuro);margin:0 0 6px}
.definicao{background:rgba(14,79,79,.06);border-left:4px solid var(--teal);border-radius:0 16px 16px 0;padding:16px 20px;margin:0 0 18px;font-size:18px;line-height:1.6;font-weight:700;color:var(--teal)}
.definicao p{margin:0;font-size:18px;color:var(--teal)}
.definicao small{display:block;margin-top:6px;font-size:12.5px;font-weight:800;color:var(--teal-leve)}
.autoria{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;font-weight:700;color:var(--teal-suave);margin:0 0 30px;padding-bottom:16px;border-bottom:1px solid var(--borda)}
.autoria a{text-decoration:none;color:var(--teal)}
.autoria a:hover{text-decoration:underline}
.autoria .sep{color:var(--teal-leve)}

/* --- etiquetas de evidência (as 5 do Handbook §5.2 + obrigatoriedade) ---- */
.etiqueta{display:inline-block;font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:3px 10px;border-radius:99px;border:1.5px solid var(--teal);color:var(--teal);background:transparent;vertical-align:middle;margin:0 6px 4px 0;white-space:nowrap}
.etiqueta.absoluta{background:var(--teal);color:#FFF6E8}
.etiqueta.canonico{border-color:var(--coral);color:var(--coral-escuro)}
.etiqueta.validada{border-color:rgba(14,79,79,.35);color:var(--teal-suave)}
.etiqueta.hipotese{border-style:dashed;color:var(--teal-suave)}
.etiqueta.alinhamento{border-color:rgba(14,79,79,.35);color:var(--teal)}
.doc aside.nota{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:16px;padding:14px 18px;margin:14px 0 22px;font-size:15px;line-height:1.55;color:rgba(14,79,79,.86);box-shadow:var(--sombra)}
.doc aside.nota p{margin:0;font-size:15px}
.doc aside.nota p+p{margin-top:8px}

/* --- resposta direta (herda do blog; reforça o recorte) ----------------- */
.doc .resposta-direta{font-size:17px;line-height:1.6}
.doc .resposta-direta p{margin:0;font-weight:700;color:var(--teal)}

/* --- exemplo aluno / tutora ------------------------------------------------ */
.exemplo{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:18px;padding:14px 18px;margin:12px 0 22px;box-shadow:var(--sombra)}
.exemplo dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15.5px;line-height:1.5}
.exemplo dt{font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--coral-escuro);padding-top:3px;white-space:nowrap}
.exemplo dd{margin:0;color:var(--teal)}
.exemplo dd em{color:var(--teal-suave)}
.exemplo .leg{margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--teal-suave)}
@media(max-width:480px){.exemplo dl{grid-template-columns:1fr;gap:2px 0}.exemplo dd{margin-bottom:8px}}

/* --- antes / depois ---------------------------------------------------------- */
.antes-depois{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 24px}
@media(min-width:640px){.antes-depois{grid-template-columns:1fr 1fr}}
.antes-depois>div{border-radius:16px;padding:14px 16px;font-size:15.5px;line-height:1.55;border:1.5px solid var(--borda);background:var(--creme-card)}
.antes-depois>div>b{display:block;font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
.antes-depois .ruim{border-color:rgba(232,106,74,.35)}
.antes-depois .ruim>b{color:var(--coral-escuro)}
.antes-depois .bom{border-color:rgba(14,79,79,.3)}
.antes-depois .bom>b{color:var(--teal)}
.antes-depois p{margin:0;font-size:15.5px}

/* --- como isso aparece na Mandra --------------------------------------------- */
.mandra-como{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:rgba(232,106,74,.07);border:1.5px solid rgba(232,106,74,.28);border-radius:20px;padding:18px 20px;margin:16px 0 26px}
.mandra-como img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.mandra-como h3{margin:0 0 6px;font-size:18px}
.mandra-como p{margin:0 0 8px;font-size:15.5px}
.mandra-como ul{margin:0 0 0 18px;font-size:15.5px}
.mandra-como li{margin-bottom:5px}
@media(max-width:480px){.mandra-como{grid-template-columns:1fr}.mandra-como img{width:44px;height:44px}}

/* --- pilares / grade de cards (hub, sobre, validação) ----------------------- */
.grade{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 26px;list-style:none;padding:0}
@media(min-width:620px){.grade{grid-template-columns:1fr 1fr}}
.grade>li{margin:0}
.grade a.card,.grade div.card{display:block;height:100%;background:var(--creme-card);border:1.5px solid var(--borda);border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--teal);box-shadow:var(--sombra);transition:transform .2s,border-color .2s}
.grade a.card:hover{transform:translateY(-3px);border-color:rgba(232,106,74,.55)}
.grade .card b{display:block;font-family:'Baloo 2','Nunito',sans-serif;font-size:18px;line-height:1.2;margin-bottom:6px}
.grade .card span{display:block;font-size:14.5px;line-height:1.5;color:var(--teal-suave)}
.grade .card .num{display:inline-block;font-family:'Baloo 2',sans-serif;font-size:13px;font-weight:800;color:var(--coral-escuro);margin-bottom:4px}

/* --- pessoas ------------------------------------------------------------------ */
.pessoa{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;background:var(--creme-card);border:1.5px solid var(--borda);border-radius:20px;padding:18px 20px;margin:0 0 14px;box-shadow:var(--sombra)}
.pessoa img,.pessoa .foto{width:96px;height:96px;border-radius:50%;object-fit:cover;background:rgba(14,79,79,.08);display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:30px;font-weight:800;color:var(--teal)}
.pessoa h3,.pessoa h2{margin:0 0 2px;font-size:20px}
.pessoa .papel{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--coral-escuro);margin:0 0 8px}
.pessoa p{margin:0 0 8px;font-size:15.5px}
.pessoa a.mais{font-weight:800;text-decoration:none}
@media(max-width:480px){.pessoa{grid-template-columns:1fr}.pessoa img,.pessoa .foto{width:72px;height:72px;font-size:24px}}
.dados{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.dados li{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:14px;padding:10px 14px;font-size:15px;line-height:1.5}
.dados li b{color:var(--teal)}

/* --- glossário ----------------------------------------------------------------- */
.glossario dl{margin:0 0 26px}
.glossario dt.letra{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;color:var(--teal-leve);margin:30px 0 0;padding-bottom:4px;border-bottom:1px solid var(--borda)}
.glossario dt{font-family:'Baloo 2','Nunito',sans-serif;font-size:19px;font-weight:800;margin:22px 0 4px;scroll-margin-top:80px}
.glossario dd{margin:0 0 6px;font-size:16.5px;line-height:1.6;color:rgba(14,79,79,.86)}
.glossario dd small{display:block;font-size:13px;font-weight:800;color:var(--teal-leve);margin-top:3px}
.indice-az{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 22px}
.indice-az a{display:inline-block;padding:4px 10px;border:1.5px solid var(--borda);border-radius:99px;font-size:13px;font-weight:800;text-decoration:none;color:var(--teal);background:var(--creme-card)}
.indice-az a:hover{border-color:var(--coral)}

/* --- termos relacionados, fontes, CTA --------------------------------------- */
.termos{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 26px;padding:0;list-style:none}
.termos a{display:inline-block;padding:6px 12px;border:1.5px solid var(--borda);border-radius:99px;font-size:13.5px;font-weight:800;text-decoration:none;color:var(--teal);background:var(--creme-card)}
.termos a:hover{border-color:var(--coral);color:var(--coral-escuro)}
.fonte{font-size:14px;line-height:1.6;color:var(--teal-suave);border-top:1px solid var(--borda);padding-top:16px;margin-top:30px}
.fonte h2,.fonte h3{font-size:15px;margin:0 0 8px;color:var(--teal)}
.fonte ul{margin:0 0 0 18px;font-size:14px}
.fonte li{margin-bottom:6px}
.doc .cta-artigo p{font-size:17px}
.doc .cta-artigo .sub{display:block;font-size:13.5px;font-weight:700;color:var(--teal-suave);margin-top:10px}

/* --- rodapé v2 (igual às 55 páginas; aqui sem <style> inline) ---------------- */
.sf-v2{position:relative;z-index:1;text-align:left;padding:52px 24px 24px;margin-top:40px;border-top:1px solid rgba(255,246,232,.12);background:#0E4F4F;color:rgba(255,246,232,.78);font-size:14px;font-weight:600;font-family:'Nunito',sans-serif}
.sf-v2 .sf-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;text-align:left}
@media(min-width:760px){.sf-v2 .sf-grid{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:28px}}
.sf-v2 .sf-brand{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;color:#FFF6E8;margin-bottom:10px}
.sf-v2 .sf-tag{font-size:13.5px;line-height:1.6;color:rgba(255,246,232,.68);max-width:280px;margin-bottom:14px}
.sf-v2 .sf-col h4{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,246,232,.65);margin-bottom:12px}
.sf-v2 .sf-col a{display:block;color:rgba(255,246,232,.82);text-decoration:none;font-size:14px;padding:4px 0;cursor:pointer}
.sf-v2 .sf-col a:hover{color:#FFCBA8;text-decoration:underline;text-underline-offset:3px}
.sf-v2 a{color:rgba(255,246,232,.82)}
.sf-v2 a:hover{color:#FFCBA8}
.sf-v2 .sf-base{max-width:1040px;margin:36px auto 0;padding-top:18px;border-top:1px solid rgba(255,246,232,.12);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;font-size:12.5px;color:rgba(255,246,232,.6)}
.sf-mapa{max-width:1040px;margin:34px auto 0;border-top:1px solid rgba(255,246,232,.12);padding-top:6px}
.sf-mapa summary{cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,246,232,.55);padding:12px 0;list-style:none}
.sf-mapa summary::-webkit-details-marker{display:none}
.sf-mapa summary::after{content:" +";float:right}
.sf-mapa[open] summary::after{content:" –"}
.sf-mapa summary:hover{color:#FFCBA8}
.sf-mapa-grid{display:grid;grid-template-columns:1fr;gap:8px 28px;padding-bottom:10px}
@media(min-width:760px){.sf-mapa-grid{grid-template-columns:1fr 1.4fr 1.4fr}}
.sf-mapa h5{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,246,232,.5);margin:8px 0 6px}
.sf-mapa nav a{display:inline-block;color:rgba(255,246,232,.72);font-size:12.5px;text-decoration:none;margin:0 14px 6px 0}
.sf-mapa nav a:hover{color:#FFCBA8;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.grade a.card,.doc .btn{transition:none}}

/* --- cabeçalho nas páginas de conhecimento (celular estreito) ---------------- */
.site-header .btn{white-space:nowrap}
@media(max-width:430px){.site-header .hdr-chip{display:none}}