/* =============================================================================
   Blog — estilos compartilhados pela listagem (/blog) e pela página do artigo.

   Segunda folha externa do site (a primeira é design-system.css): a listagem e
   o post usam exatamente o mesmo desenho de cartão, então duplicar o CSS nos
   dois `<helmet>` seria fonte garantida de divergência. Carregada DEPOIS do
   design-system, mantendo a ordem de cascata do contrato (D018).

   Tokens reaproveitados do site: creme #F4EDDD, cartão #FBF6EC, borda #E9DECA,
   texto #2E2822, apoio #6E6355, verde #24615a, dourado #C9A055, rosa #661C49.
   ========================================================================== */

/* =============================================================================
   LAYOUT EDITORIAL DA LISTAGEM
   Estrutura vinda do Claude Design (Blog.dc.html), com a tipografia do site:
   Playfair Display no lugar de Forum e Montserrat no lugar de Jost.

   As cores aqui são as da versão creme. A listagem roda sobre fundo verde e
   repinta o que precisa com `.bl-dark` no <helmet> de blog/index.html — este
   arquivo não pode assumir o verde, porque blog/post.html também o carrega e
   o artigo continua creme.
   ========================================================================== */

.bl-wrap{max-width:1280px;margin:0 auto}

/* --- kicker e "ler artigo", compartilhados por todos os blocos -------------- */
.bl-kicker{display:flex;align-items:center;gap:13px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#24615a}
.bl-kicker i{display:block;width:14px;height:1px;background:#C9A055;flex:0 0 auto}
.bl-more{display:inline-flex;align-items:center;gap:9px;margin-top:4px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#661C49;transition:color .3s}
.bl-more i{display:block;width:20px;height:1px;background:currentColor;transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1)}
.bl-mc:hover .bl-more i{width:30px;transform:translateX(4px)}

/* --- moldura de imagem com paralaxe ---------------------------------------- */
.bl-media{position:relative;overflow:hidden;border-radius:20px;background:#EFE6D4;border:1px solid #E9DECA;box-shadow:0 22px 50px rgba(60,44,20,.12)}
.bl-media img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s cubic-bezier(.16,1,.3,1);will-change:transform}
.bl-mc:hover .bl-media img{transform:scale(1.06)}
.bl-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,40,34,0) 52%,rgba(46,40,34,.28));opacity:0;transition:opacity .7s ease}
.bl-mc:hover .bl-media::after{opacity:1}

/* --- hero em duas colunas: título à esquerda, slide de fotos à direita ------ */
.bl-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,84px);align-items:end}
.bl-hero-rule{margin-top:clamp(34px,4vw,52px);height:1px;background:linear-gradient(90deg,#C9A055,rgba(201,160,85,.25) 62%,transparent)}

/* --- mosaico de 12 colunas -------------------------------------------------- */
.bl-mosaic{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,3.4vw,56px) clamp(24px,2.6vw,40px)}
.bl-mc{display:flex;flex-direction:column;gap:20px}
.bl-mc-body{display:flex;flex-direction:column;gap:11px}
.bl-mc-title{font-family:'Playfair Display',serif;font-weight:400;line-height:1.18;color:#2E2822;margin:0;transition:color .4s}
.bl-mc:hover .bl-mc-title{color:#24615a}
.bl-mc-excerpt{font-size:15px;line-height:1.7;color:#6E6355;margin:0}
.bl-mc--lg .bl-mc-title{font-size:clamp(24px,2.5vw,34px)}
.bl-mc--md .bl-mc-title{font-size:clamp(22px,2.1vw,29px)}
.bl-mc--sm .bl-mc-title{font-size:clamp(20px,1.8vw,25px)}

/* --- faixa escura "Mais lidos" --------------------------------------------- */
.bl-band{background:linear-gradient(180deg,#1B4A44,#23423D);color:#EDE4D3;padding:70px 6vw;position:relative;z-index:1}
.bl-band-head{max-width:1080px;margin:0 auto clamp(24px,3vw,40px);display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bl-band-head h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.12;color:#F5EFE3;margin:0}
.bl-band-head span{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#E7CF9E}
.bl-band-list{max-width:1080px;margin:0 auto}

.bl-rank{display:grid;grid-template-columns:56px 108px minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,34px);padding:22px 4px;border-top:1px solid rgba(231,207,158,.24);transition:background .5s ease}
.bl-rank:last-child{border-bottom:1px solid rgba(231,207,158,.24)}
.bl-rank:hover{background:rgba(245,239,227,.06)}
.bl-rank-n{font-family:'Playfair Display',serif;font-size:clamp(22px,2.4vw,32px);color:rgba(231,207,158,.72)}
.bl-rank-thumb{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:#17423C}
.bl-rank-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.bl-rank:hover .bl-rank-thumb img{transform:scale(1.07)}
.bl-rank-body{display:flex;flex-direction:column;gap:8px}
.bl-rank .bl-kicker{color:#E7CF9E}
.bl-rank .bl-kicker i{background:rgba(231,207,158,.45)}
.bl-rank-title{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(18px,1.8vw,24px);line-height:1.24;color:#F5EFE3;margin:0;transition:color .4s}
.bl-rank:hover .bl-rank-title{color:#E7CF9E}

/* --- índice "Últimos artigos" ---------------------------------------------- */
.bl-index{max-width:1080px;margin:0 auto}
.bl-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px)}
.bl-index-head h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.12;color:#2E2822;margin:0}
.bl-index-head span{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#24615a}
.bl-ix{display:grid;grid-template-columns:150px minmax(0,1fr) 96px;align-items:baseline;gap:clamp(14px,2vw,30px);padding:24px 4px;border-top:1px solid #E4D8C0;transition:padding-left .5s cubic-bezier(.16,1,.3,1),background .5s ease}
.bl-ix:last-child{border-bottom:1px solid #E4D8C0}
.bl-ix:hover{padding-left:16px;background:rgba(251,246,236,.7)}
.bl-ix-date{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#24615a}
.bl-ix-title{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(18px,1.7vw,23px);line-height:1.26;color:#2E2822;margin:0}
.bl-ix-time{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9A8E7C;text-align:right}

/* --- selos de confiança ----------------------------------------------------- */
.bl-trust{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,3vw,44px);padding-top:clamp(34px,4vw,52px);border-top:1px solid #E4D8C0}
.bl-trust div{display:flex;flex-direction:column;gap:12px}
.bl-trust p{font-size:14.5px;line-height:1.7;color:#6E6355;margin:0}

/* --- CTA do e-book ---------------------------------------------------------- */
.bl-ebook{max-width:1180px;margin:0 auto;background:#FBF6EC;border:1px solid #E9DECA;border-radius:28px;box-shadow:0 26px 60px rgba(60,44,20,.12);padding:clamp(38px,5vw,70px) clamp(28px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,72px);align-items:center;overflow:hidden}
.bl-ebook-stage{perspective:1300px;display:flex;justify-content:center}
.bl-ebook-img{max-width:min(84vw,380px);object-fit:contain;filter:drop-shadow(0 30px 56px rgba(60,44,20,.3));will-change:transform;transform-style:preserve-3d}
.bl-ebook-copy{display:flex;flex-direction:column}
.bl-ebook-copy h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.12;color:#2E2822;margin:16px 0 18px}
.bl-ebook-copy h2 em{font-style:italic;color:#24615a}
.bl-ebook-copy p{font-size:16.5px;line-height:1.7;color:#6E6355;margin:0 0 32px;max-width:480px}
.bl-ebook-copy .ds-btn{align-self:flex-start}
@media (prefers-reduced-motion:reduce){.bl-ebook-img{transform:none !important}}

/* --- responsivo do layout editorial ---------------------------------------- */
@media (max-width:1080px){
  .bl-hero{grid-template-columns:1fr;align-items:start;gap:clamp(34px,5vw,54px)}
}
@media (max-width:1000px) and (min-width:701px){
  .bl-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-mc{grid-column:span 1 !important}
  .bl-mc--lg{grid-column:span 2 !important}
  .bl-mc--lg .bl-media{aspect-ratio:16/9 !important}
}
@media (max-width:1000px){
  .bl-ix{grid-template-columns:minmax(0,1fr);gap:8px}
  .bl-ix-time{text-align:left}
  .bl-rank{grid-template-columns:40px 92px minmax(0,1fr)}
}
@media (max-width:900px){
  .bl-ebook{grid-template-columns:1fr;gap:36px;text-align:center}
  .bl-ebook-copy{align-items:center}
  .bl-ebook-copy .ds-btn{align-self:center}
}
@media (max-width:860px){
  .bl-more,.bl-kicker,.bl-ix-date{font-weight:600}
}
@media (max-width:700px){
  .bl-mosaic{grid-template-columns:1fr}
  .bl-mc{grid-column:span 1 !important;max-width:400px;margin-left:auto;margin-right:auto;width:100%}
  .bl-media{aspect-ratio:16/11 !important;border-radius:16px}
  .bl-rank{grid-template-columns:26px 68px minmax(0,1fr);gap:13px;padding:16px 0}
  .bl-rank-thumb{border-radius:10px}
  .bl-ix{padding:18px 0}
  .bl-ix:hover{padding-left:0}
  .bl-ebook-img{max-width:74vw}
}
@media (prefers-reduced-motion:reduce){
  .bl-media img{transition:none}
}

/* ------------------------------------------------------------ barra de filtros */
.bl-tools{max-width:1280px;margin:0 auto clamp(34px,4vw,52px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.bl-cats{display:flex;flex-wrap:wrap;gap:10px}
.bl-chip{border:1px solid #E9DECA;background:#FBF6EC;color:#6E6355;border-radius:40px;padding:9px 18px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.bl-chip:hover{color:#24615a;border-color:#C9A055}
.bl-chip[aria-pressed="true"]{background:#23423D;border-color:#23423D;color:#F5EFE3}

.bl-search{position:relative;flex:0 1 320px;min-width:220px}
.bl-search input{width:100%;box-sizing:border-box;background:#FBF6EC;border:1px solid #E9DECA;border-radius:40px;padding:13px 44px 13px 20px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:300;color:#2E2822;transition:border-color .3s,box-shadow .3s}
.bl-search input:focus{outline:none;border-color:#C9A055;box-shadow:0 0 0 3px rgba(201,160,85,.18)}
.bl-search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5}

/* ---------------------------------------------------------------- grade e card */
.bl-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bl-card{background:#FBF6EC;border:1px solid #E9DECA;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(60,44,20,.1);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.bl-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(60,44,20,.16)}
.bl-card-link{display:flex;flex-direction:column;height:100%}
.bl-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#EFE6D4}
.bl-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.bl-card:hover .bl-thumb img{transform:scale(1.06)}
.bl-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-cat{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#24615a}
.bl-title{font-family:'Playfair Display',serif;font-weight:400;font-size:22px;line-height:1.28;color:#2E2822;margin:0}
.bl-excerpt{font-size:14.5px;line-height:1.7;color:#6E6355;margin:0}
.bl-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;letter-spacing:.06em;color:#9A8E7C;margin-top:2px}
.bl-cta{margin-top:auto;padding-top:14px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#661C49;transition:color .3s}
.bl-card:hover .bl-cta{color:#4E1537}

/* ------------------------------------------------------------------ paginação */
.bl-pager{max-width:1280px;margin:clamp(44px,5vw,64px) auto 0;display:flex;gap:10px;align-items:center;justify-content:center}
.bl-page{min-width:44px;height:44px;padding:0 14px;border:1px solid #E9DECA;background:#FBF6EC;border-radius:40px;font-family:'Montserrat',sans-serif;font-size:13px;color:#6E6355;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.bl-page:hover:not(:disabled){color:#24615a;border-color:#C9A055}
.bl-page[aria-current="page"]{background:#23423D;border-color:#23423D;color:#F5EFE3}
.bl-page:disabled{opacity:.35;cursor:default}

/* --------------------------------------------------------- skeleton / vazio */
.bl-shimmer{position:relative;overflow:hidden;background:#EFE6D4}
.bl-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:blShimmer 1.4s infinite}
@keyframes blShimmer{100%{transform:translateX(100%)}}
.bl-skel{pointer-events:none}
.bl-sk-line{display:block;height:13px;border-radius:7px;width:100%}
.bl-skel-article{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
@media (prefers-reduced-motion:reduce){.bl-shimmer::after{animation:none}}

.bl-empty{grid-column:1/-1;text-align:center;padding:clamp(50px,7vw,80px) 20px;color:#6E6355}
.bl-empty h3{font-family:'Playfair Display',serif;font-weight:400;font-size:26px;color:#2E2822;margin:0 0 10px}
.bl-empty p{font-size:15px;line-height:1.7;margin:0 0 22px}

/* ------------------------------------------------------------ artigo (post) */
.bl-article{max-width:760px;margin:0 auto}
.bl-crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9A8E7C;margin-bottom:18px}
.bl-crumbs a{color:#24615a}
.bl-crumbs a:hover{color:#661C49}

.bl-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;border:1px solid #E9DECA;box-shadow:0 26px 60px rgba(60,44,20,.16);display:block;margin:0 0 clamp(34px,4vw,52px)}

.bl-content{font-size:17px;line-height:1.85;color:#3B342C}
.bl-content h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.2;color:#2E2822;margin:clamp(40px,4vw,54px) 0 16px}
.bl-content h3{font-family:'Playfair Display',serif;font-weight:400;font-size:23px;color:#2E2822;margin:34px 0 12px}
.bl-content p{margin:0 0 22px}
.bl-content a{color:#661C49;text-decoration:underline;text-underline-offset:3px}
.bl-content a:hover{color:#4E1537}
.bl-content ul,.bl-content ol{margin:0 0 22px;padding-left:22px}
.bl-content li{margin:0 0 10px}
.bl-content img{max-width:100%;height:auto;border-radius:16px;display:block;margin:30px auto}
.bl-content figcaption{font-size:13px;color:#9A8E7C;text-align:center;margin-top:-18px}
.bl-content blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:2px solid #C9A055;font-family:'Playfair Display',serif;font-style:italic;font-size:21px;line-height:1.5;color:#24615a}
.bl-content iframe{max-width:100%;border-radius:16px}

.bl-tags{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(40px,4vw,54px) 0 0}
.bl-tag{border:1px solid #E9DECA;border-radius:40px;padding:8px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6E6355}

/* --- compartilhar --- */
.bl-share{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:clamp(40px,4vw,54px) 0 0;padding-top:clamp(28px,3vw,38px);border-top:1px solid #E4D8C0}
.bl-share-label{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#9A8E7C}
.bl-share-list{display:flex;gap:10px}
.bl-share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#FBF6EC;border:1px solid #E9DECA;color:#24615a;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.bl-share-btn:hover{color:#F5EFE3;background:#23423D;border-color:#23423D}
.bl-share-btn--copied{color:#F5EFE3;background:#24615a;border-color:#24615a}

/* --- CTA do Clube --- */
.bl-club{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:clamp(34px,4vw,48px) 0 0;padding:clamp(28px,3.4vw,40px);background:linear-gradient(180deg,#1B4A44,#23423D);border-radius:20px;color:#EDE4D3}
.bl-club-eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#E7CF9E}
.bl-club-p{font-size:15.5px;line-height:1.7;color:#EDE4D3;margin:0;max-width:520px}

/* --- credenciais da Dra. Glauce --- */
.bl-cred{display:flex;gap:20px;align-items:flex-start;margin:clamp(28px,3vw,38px) 0 0;padding:26px;background:#FBF6EC;border:1px solid #E9DECA;border-radius:20px}
.bl-cred img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.bl-cred-name{font-family:'Playfair Display',serif;font-size:21px;color:#2E2822;margin:0 0 4px}
.bl-cred-role{font-size:13.5px;font-weight:500;color:#661C49;margin:0 0 12px}
.bl-cred-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.6;color:#6E6355}

/* --- dica de segurança --- */
.bl-safety{margin:clamp(28px,3vw,38px) 0 0;padding:24px 26px;background:rgba(201,160,85,.08);border:1px solid rgba(201,160,85,.35);border-left:3px solid #C9A055;border-radius:14px}
.bl-safety-title{font-family:'Playfair Display',serif;font-size:17px;color:#2E2822;margin:0 0 10px}
.bl-safety p{font-size:14px;line-height:1.75;color:#6E6355;margin:0 0 10px}
.bl-safety p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ responsivo */
@media (max-width:1024px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .bl-chip,.bl-cta{font-weight:600}
  .bl-tools{flex-direction:column;align-items:stretch}
  .bl-search{flex:1 1 auto}
}
@media (max-width:600px){
  .bl-grid{grid-template-columns:1fr}
  .bl-body{padding:22px 22px 24px}
  .bl-title{font-size:20px}
  .bl-content{font-size:16px}
  .bl-cred{flex-direction:column;text-align:center}
  .bl-cred-list{align-items:center}
}