/* Blog de constelação familiar de Frederico Ciongoli. Complementa /consultoria-sistemica/styles/style.css
   (marfim, tinta, lápis-lazúli, noite e ouro; Fraunces e Inter). */

/* Cabeçalho: o da página, fixo no estado claro (.rolou), marca sempre visível */
.pg-blog .topo .marca{opacity:1;visibility:visible;flex:none}
.menu a,.topo .botao--mini{white-space:nowrap}
@media (min-width:900px) and (max-width:1120px){.menu ul{gap:var(--e-2)}}
.menu a[aria-current="page"]{color:var(--tinta);box-shadow:inset 0 -1px 0 var(--lapis-9)}
.moldura--estreita{width:min(100% - 40px,780px)}

/* Migalha */
.migalha{font-size:var(--fs--1);color:var(--tinta-2);margin-bottom:6px}
.migalha ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.migalha li{display:flex;align-items:center}
.migalha li+li::before{content:"/";margin-right:10px;color:var(--ouro)}
.migalha a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-2);text-decoration:none}
.migalha a:hover{color:var(--lapis-9)}
.migalha [aria-current]{color:var(--tinta);padding-block:12px}

/* Artigo */
.post{padding-top:calc(72px + clamp(24px,4vw,48px));padding-bottom:clamp(72px,8vw,112px)}
.post__categoria{font-size:.74rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ouro-texto);margin:0 0 16px}
.post h1{font-family:var(--f-titulo);font-weight:340;font-size:var(--fs-4);line-height:1.08;letter-spacing:-.015em;margin-bottom:20px;text-wrap:balance}
.post__lede{font-family:var(--f-titulo);font-weight:340;font-size:var(--fs-1);line-height:1.5;color:var(--tinta-2);margin:0 0 28px}
.post__meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:var(--fs--1);line-height:1.6;color:var(--tinta-2);padding:16px 0;border-block:1px solid var(--areia-linha);margin:0 0 40px}
.post__meta strong{color:var(--tinta);font-weight:600}

.article-body h2{font-family:var(--f-titulo);font-weight:360;font-size:var(--fs-2);line-height:1.22;margin:clamp(44px,5vw,60px) 0 16px;color:var(--tinta);text-wrap:balance}
.article-body h3{font-family:var(--f-titulo);font-weight:400;font-size:var(--fs-1);margin:32px 0 12px}
.article-body p,.article-body li{color:var(--tinta-2);line-height:1.78}
.article-body p{margin:0 0 1.15em}
.article-body ul,.article-body ol{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:12px}
.article-body li{position:relative;padding-left:26px}
.article-body li::before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--lapis-9)}
.article-body strong{color:var(--tinta);font-weight:600}
.article-body blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:2px solid var(--ouro);font-family:var(--f-titulo);font-style:italic;font-weight:300;font-size:var(--fs-1);line-height:1.45;color:var(--tinta)}
.article-body a,.post__autor a,.aviso a{color:var(--lapis-9);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{color:var(--lapis-12)}

/* Vídeo do canal */
.video{margin:36px 0}
.video__quadro{position:relative;aspect-ratio:16/9;border-radius:var(--raio);overflow:hidden;background:var(--noite);box-shadow:var(--sombra)}
.video__quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:12px;font-size:var(--fs--1);line-height:1.55;color:var(--tinta-2)}
.video figcaption a{white-space:nowrap}

/* Chamada para agendar */
.post__cta{margin-top:56px;padding:clamp(28px,1.4rem + 2vw,48px);border-radius:calc(var(--raio) + 8px);background:var(--noite);color:var(--noite-texto-2)}
.post__cta h2{font-family:var(--f-titulo);font-weight:340;color:var(--noite-texto);font-size:var(--fs-3);line-height:1.15;margin-bottom:14px}
.post__cta p{color:var(--noite-texto-2);line-height:1.72;max-width:58ch;margin:0 0 24px}
.post__cta .botao{margin-bottom:16px;white-space:normal;text-align:center}
.post__cta .post__cta-nota{font-size:var(--fs--1);margin:0}
.post__cta-locais{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid rgba(250,247,240,.16);display:grid;gap:14px;font-size:var(--fs--1);line-height:1.62}
.post__cta-locais strong{display:block;color:var(--noite-texto);font-weight:600}
.post__cta-locais a{display:flex;width:max-content;align-items:center;min-height:44px;color:var(--noite-texto);text-decoration:underline;text-underline-offset:3px}
@media (min-width:700px){.post__cta-locais{grid-template-columns:1fr 1fr;gap:24px}}

/* Perguntas frequentes (o publicador escreve <details> sem classe) */
.article-faq{margin-top:72px}
.article-faq>h2{font-family:var(--f-titulo);font-weight:340;font-size:var(--fs-3);margin-bottom:18px}
.article-faq details{border-bottom:1px solid var(--areia-linha)}
.article-faq details:first-of-type{border-top:1px solid var(--areia-linha)}
.article-faq summary{display:flex;align-items:flex-start;gap:18px;cursor:pointer;list-style:none;padding:22px 0;min-height:44px;font-family:var(--f-titulo);font-size:var(--fs-1);font-weight:360;color:var(--tinta);line-height:1.34;transition:color .25s var(--ease)}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"";flex:none;margin-left:auto;margin-top:.4em;width:10px;height:10px;border-right:1.5px solid var(--lapis-9);border-bottom:1.5px solid var(--lapis-9);transform:rotate(45deg);transition:transform .35s var(--ease)}
.article-faq details[open] summary::after{transform:rotate(-135deg)}
.article-faq summary:hover{color:var(--lapis-9)}
.article-faq details p{color:var(--tinta-2);line-height:1.76;max-width:68ch;margin:0;padding:0 40px 24px 0}

/* Autor e aviso */
.post__autor{display:flex;gap:20px;align-items:flex-start;margin-top:64px;padding:24px;border-radius:calc(var(--raio) + 6px);background:var(--linho);border:1px solid var(--areia)}
.post__autor img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.post__autor p{margin:0 0 8px;color:var(--tinta-2);font-size:var(--fs--1);line-height:1.62}
.post__autor .post__autor-nome{font-family:var(--f-titulo);font-size:var(--fs-1);line-height:1.25;color:var(--tinta);margin-bottom:6px}
.post__autor a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:var(--fs--1)}
.aviso{margin-top:32px;font-size:var(--fs--1);color:var(--tinta-2);border-left:2px solid var(--ouro);padding:4px 0 4px 16px}
.aviso p{margin:0;line-height:1.68}

/* Leia também e cards */
.leia-tambem{margin-top:72px;padding-top:40px;border-top:1px solid var(--areia-linha)}
.leia-tambem>h2{font-family:var(--f-titulo);font-weight:340;font-size:var(--fs-3);margin-bottom:24px}
.blog-cards{display:grid;gap:16px}
.post-card{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:calc(var(--raio) + 4px);background:#FDFCFA;border:1px solid var(--areia);box-shadow:var(--sombra);color:var(--tinta);text-decoration:none;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.post-card:hover{transform:translateY(-3px);border-color:var(--lapis-6)}
.post-card__cat{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-texto)}
.post-card h2,.post-card h3{font-family:var(--f-titulo);font-size:var(--fs-1);font-weight:360;line-height:1.26;color:var(--tinta);margin:0}
.post-card p{color:var(--tinta-2);font-size:var(--fs--1);line-height:1.62;margin:0}
.post-card time{font-size:.82rem;color:var(--tinta-2);margin-top:auto;padding-top:6px}

/* Índice */
.blog{padding-top:calc(72px + clamp(24px,4vw,48px));padding-bottom:clamp(72px,8vw,112px)}
.blog__hdr{max-width:800px}
.blog h1{font-family:var(--f-titulo);font-weight:320;font-size:var(--fs-4);line-height:1.06;letter-spacing:-.02em;margin-bottom:20px;text-wrap:balance}
.blog h1 em{font-style:italic;font-weight:300;color:var(--lapis-9)}
.blog__lede{font-family:var(--f-titulo);font-weight:340;font-size:var(--fs-1);line-height:1.5;color:var(--tinta-2);margin:0;max-width:62ch}
.blog__grid{margin-top:48px}
.blog__cta{margin-top:24px}

/* Rodapé: link de volta, sem o rodapé herdar o padding da barra do celular duas vezes */
.pg-blog .rodape__outro a{color:var(--noite-texto)}

@media (min-width:700px){
  .blog-cards--3{grid-template-columns:repeat(3,1fr)}
  .blog__grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (min-width:1000px){
  .blog__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .post__autor{flex-direction:column;gap:14px}
  .article-faq details p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .post-card{transition:none}
  .post-card:hover{transform:none}
}