/* ═══ Blog — redesenho (16/09/2026) ═══
   Antes: 5 cards idênticos numa grade plana, sem hierarquia nem separação do
   formulário. Agora: matéria em destaque, filtro por tema, grade secundária e
   uma faixa de transição que separa o conteúdo editorial do comercial. */

/* ── barra de temas ──────────────────────────────────────────────────────── */
html body .acblog-temas{width:100%;background:#f5f2eb;padding:0 48px 30px}
html body .acblog-temas-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:24px;border-bottom:1px solid rgba(207,160,72,.26)}
html body .acblog-temas-lbl{font-family:'Outfit',Arial,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,67,35,.5);margin-right:6px}
html body .acblog-tema{appearance:none;border:1px solid rgba(10,67,35,.16);background:transparent;border-radius:999px;padding:8px 18px;cursor:pointer;font-family:'Outfit',Arial,sans-serif;font-size:13.5px;font-weight:500;color:rgba(10,67,35,.72);transition:background .3s cubic-bezier(.25,.46,.45,.94),color .3s,border-color .3s,transform .25s}
html body .acblog-tema:hover,html body .acblog-tema:focus{background:rgba(207,160,72,.10);border-color:rgba(207,160,72,.6);color:#0a4323;transform:translateY(-1px)}
html body .acblog-tema:focus-visible{outline:2px solid rgba(207,160,72,.7);outline-offset:2px}
html body .acblog-tema.is-on,html body .acblog-tema.is-on:hover,html body .acblog-tema.is-on:focus{background:#0a4323;border-color:#0a4323;color:#f5f2eb}
html body .acblog-vazio{width:100%;padding:34px 0 6px;text-align:center;font-family:'Crimson Pro',Georgia,serif;font-size:18px;color:rgba(10,67,35,.55)}

/* ── grade ───────────────────────────────────────────────────────────────── */
html body .elementor-posts-container{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px !important;max-width:1180px;margin:0 auto !important;padding:0 !important}
html body .elementor-post{margin:0 !important;transition:opacity .4s ease,transform .4s ease}
html body .elementor-post.esta-fora{display:none !important}
html body .elementor-post__card{height:100%;display:flex;flex-direction:column;background:#fff !important;border:1px solid rgba(207,160,72,.2) !important;border-radius:16px !important;overflow:hidden !important;box-shadow:0 2px 14px rgba(18,52,24,.05) !important;transition:transform .38s cubic-bezier(.25,.46,.45,.94),box-shadow .38s,border-color .38s}
html body .elementor-post:hover .elementor-post__card{transform:translateY(-4px);box-shadow:0 12px 34px rgba(18,52,24,.12) !important;border-color:rgba(207,160,72,.5) !important}
html body .elementor-post__thumbnail{position:relative;aspect-ratio:16/10;overflow:hidden}
html body .elementor-post__thumbnail img{width:100% !important;height:100% !important;object-fit:cover !important;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
html body .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.04)}
html body .elementor-post__text{padding:24px 26px 26px !important;display:flex;flex-direction:column;flex:1}
html body .elementor-post__title{margin:0 0 10px !important;font-family:'Crimson Pro',Georgia,serif !important;font-size:19px !important;font-weight:700 !important;line-height:1.28 !important}
html body .elementor-post__title a{color:#0a4323 !important;-webkit-text-fill-color:#0a4323 !important;text-decoration:none;transition:color .3s}
html body .elementor-post:hover .elementor-post__title a{color:#7D6626 !important;-webkit-text-fill-color:#7D6626 !important}
html body .elementor-post__excerpt p{margin:0 !important;font-family:'Outfit',Arial,sans-serif !important;font-size:14.5px !important;line-height:1.6 !important;color:rgba(10,67,35,.66) !important}
html body .elementor-post__read-more-wrapper{margin-top:auto;padding-top:16px}
html body .elementor-post__read-more{font-family:'Outfit',Arial,sans-serif !important;font-size:12.5px !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:#A48334 !important;-webkit-text-fill-color:#A48334 !important;text-decoration:none !important;transition:gap .3s,color .3s;display:inline-flex;align-items:center;gap:7px}
/* o texto do link já traz "»" — nada de somar outra seta */
html body .elementor-post__read-more{transition:color .3s,transform .3s cubic-bezier(.25,.46,.45,.94) !important}
html body .elementor-post:hover .elementor-post__read-more{transform:translateX(3px);color:#7D6626 !important;-webkit-text-fill-color:#7D6626 !important}

/* etiqueta de tema sobre a capa */
html body .elementor-post__thumbnail::after{content:attr(data-rotulo);position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:999px;line-height:1;background:rgba(9,37,25,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(207,160,72,.4);font-family:'Outfit',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#F0E6C8;pointer-events:none}

/* ── primeira matéria em destaque ────────────────────────────────────────── */
@media (min-width:901px){
  html body .elementor-post:first-child{grid-column:span 3}
  /* o blog-posts.css fixa flex-direction:column !important em todo card —
     por isso o destaque precisa da mesma força para virar horizontal */
  html body .elementor-post:first-child .elementor-post__card{flex-direction:row !important;align-items:stretch !important}
  html body .elementor-post:first-child .elementor-post__thumbnail__link{flex:0 0 52% !important;max-width:52% !important;display:block !important;margin:0 !important}
  html body .elementor-post:first-child .elementor-post__thumbnail{height:100% !important;aspect-ratio:auto !important;min-height:332px !important}
  html body .elementor-post:first-child .elementor-post__text{padding:40px 44px !important;justify-content:center}
  html body .elementor-post:first-child .elementor-post__title{font-size:clamp(24px,2.3vw,32px) !important;line-height:1.16 !important;margin-bottom:14px !important}
  html body .elementor-post:first-child .elementor-post__excerpt p{font-size:16px !important;line-height:1.68 !important}
    /* mesma proteção do botão: o Elementor anula background-image nesta região,
     então o dourado do selo precisa vir também como cor sólida */
  html body .elementor-post:first-child .elementor-post__thumbnail::before{content:'Em destaque';position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:999px;line-height:1;background-color:#cfa048 !important;background-image:none !important;border:1px solid rgba(207,160,72,.4);font-family:'Outfit',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#14361f;z-index:2}
}

/* ── faixa que separa matérias do formulário ─────────────────────────────── */
html body .acblog-ponte{position:relative;width:100%;background-color:#0a4323 !important;background-image:linear-gradient(rgba(7,20,12,.10),rgba(7,20,12,.10)),url('/artchik-assets/img/fundo-textura-verde.svg') !important;background-size:cover !important;background-position:center !important;padding:64px 48px;border-top:1.5px solid rgba(207,160,72,.35);border-bottom:1.5px solid rgba(207,160,72,.35);margin-top:80px}
html body .acblog-ponte-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
html body .acblog-ponte-txt{flex:1 1 380px;min-width:0}
html body .acblog-ponte-tag{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:'Crimson Pro',Georgia,serif;font-size:13px;font-style:italic;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#e7c785}
html body .acblog-ponte-tag::before{content:'';width:44px;height:2px;flex:none;background:linear-gradient(90deg,#e7c785,rgba(207,160,72,.2))}
html body .acblog-ponte-tit{font-family:'Crimson Pro',Georgia,serif;font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.16;color:#F0DFB9;margin:0 0 8px}
html body .acblog-ponte-tit em{font-style:italic;color:#e7c785}
html body .acblog-ponte-sub{margin:0;font-family:'Outfit',Arial,sans-serif;font-size:15px;line-height:1.6;color:rgba(245,242,235,.76)}
/* o Elementor anula background-image nesta região até o lazy-load concluir;
   por isso o dourado vem também como cor sólida, que ele não zera */
html body .acblog-ponte-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 34px;border-radius:999px;background-color:#dcb264 !important;background-image:linear-gradient(180deg,#e7c885,#cfa04a) !important;color:#1a4a28 !important;-webkit-text-fill-color:#1a4a28 !important;font-family:'Crimson Pro',Georgia,serif;font-size:18px;font-weight:600;letter-spacing:.4px;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .28s cubic-bezier(.34,1,.64,1)}
html body .acblog-ponte-btn:hover{transform:scale(.96);background-color:#e7c885 !important}

/* ── telas menores ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .elementor-posts-container{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html body .elementor-post:first-child{grid-column:span 2}
}
@media (max-width:900px){
  html body .acblog-temas{padding:0 32px 24px}
  html body .elementor-post:first-child .elementor-post__card{flex-direction:column !important}
}
@media (max-width:640px){
  html body .elementor-posts-container{grid-template-columns:1fr !important;gap:22px !important}
  html body .elementor-post:first-child{grid-column:span 1}
  html body .acblog-temas{padding:0 22px 20px}
  html body .acblog-temas-inner{gap:8px}
  html body .acblog-tema{font-size:12.5px;padding:7px 15px}
  html body .acblog-ponte{padding:48px 22px;margin-top:56px}
  html body .acblog-ponte-inner{flex-direction:column;align-items:flex-start;gap:26px}
}

/* ═══ Abertura do blog: uma grade só ═══════════════════════════════════════
   A página vinha com quatro alinhamentos diferentes empilhados — título em
   80px, filtro em 130px, cards em 150px e faixa verde em 270px. A grade que
   manda é a do contêiner nativo do Elementor que embrulha os cards (1140px
   a partir de 150px em tela de 1440). Tudo passa a seguir essa medida. */
html body .acblog-sec-inner,
html body .acblog-temas-inner,
html body .acblog-ponte-inner,
html body .elementor-posts-container{max-width:1140px !important;margin-left:auto !important;margin-right:auto !important}

/* abertura mais curta: o texto longo virou uma linha e o respiro caiu */
html body .acblog-sec{padding:clamp(40px,5.5vh,60px) 48px 0 !important}
html body .acblog-sec-title{margin-bottom:10px !important}
html body .acblog-sec-inner .acblog-intro-text{margin:0 !important;max-width:58ch !important;font-size:16.5px !important;line-height:1.6 !important}
html body .acblog-temas{padding:26px 48px 30px !important}
html body .acblog-temas-inner{padding-bottom:22px !important}

/* a faixa verde acompanha a mesma medida, com o texto respirando melhor */
html body .acblog-ponte-inner{gap:48px}
html body .acblog-ponte-txt{flex:1 1 520px}

/* o cartão em destaque tinha muito vazio vertical entre resumo e "leia mais" */
@media (min-width:901px){
  html body .elementor-post:first-child .elementor-post__text{padding:36px 44px !important;justify-content:center !important}
  html body .elementor-post:first-child .elementor-post__read-more-wrapper{margin-top:20px !important;padding-top:0 !important}
}
@media (max-width:900px){
  html body .acblog-sec{padding-left:32px !important;padding-right:32px !important}
  html body .acblog-temas{padding:22px 32px 24px !important}
}
@media (max-width:640px){
  html body .acblog-sec{padding-left:22px !important;padding-right:22px !important}
  html body .acblog-temas{padding:18px 22px 20px !important}
  html body .acblog-sec-inner .acblog-intro-text{font-size:15.5px !important}
}

/* ── acertos de tela pequena ─────────────────────────────────────────────────
   1. a grade herdava 10px de padding do contêiner nativo do Elementor e ficava
      3px fora do alinhamento das demais faixas (19px contra 22px);
   2. o selo "Em destaque" vivia só dentro do media de 901px — no celular o card
      não tinha marcação nenhuma. */
@media (max-width:900px){
  /* o .e-con-inner do Elementor traz max-width:95% + margin-left:9.75px próprios;
     somados ao padding davam 32px, contra 22px das demais faixas. Zeramos os dois
     e deixamos só o padding, para a grade nascer na mesma margem das outras. */
  html body .elementor-element-580ea335{padding-left:0 !important;padding-right:0 !important}
  html body .elementor-element-580ea335 .e-con-inner{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;padding-left:22px !important;padding-right:22px !important}
  html body .elementor-posts-container{max-width:none !important}
  html body .elementor-post:first-child .elementor-post__thumbnail::before{content:'Em destaque';position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;height:23px;padding:0 12px;border-radius:999px;line-height:1;background-color:#cfa048 !important;background-image:none !important;border:1px solid rgba(207,160,72,.4);font-family:'Outfit',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#14361f;z-index:2}
}
@media (max-width:640px){
  html body .elementor-element-580ea335 .e-con-inner{max-width:100% !important;margin-left:0 !important;margin-right:0 !important;padding-left:22px !important;padding-right:22px !important}
}

/* ── grade secundária em duas colunas ────────────────────────────────────────
   Com o destaque ocupando a faixa inteira, três colunas deixavam a última
   matéria órfã (linha de 3 + 1 sozinha, com dois vãos vazios ao lado).
   Em duas colunas os quatro secundários fecham 2×2, os cards ficam maiores
   e a leitura melhora. */
@media (min-width:901px){
  html body .elementor-posts-container{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:30px !important}
  html body .elementor-post:first-child{grid-column:span 2 !important}
  html body .elementor-post__thumbnail{aspect-ratio:16/9}
  html body .elementor-post__text{padding:26px 30px 28px !important}
  html body .elementor-post__title{font-size:21px !important}
  html body .elementor-post__excerpt p{font-size:15px !important}
}

/* ── faixa de tablet (641–900px) ─────────────────────────────────────────────
   Nessa largura sobravam três recuos: 32px nas seções, 22px na grade (padding
   que eu havia dado ao .e-con-inner) e 48px na faixa verde, que nunca recebeu
   regra aqui. Tudo passa a 32px. */
@media (min-width:641px) and (max-width:900px){
  html body .acblog-ponte{padding-left:32px !important;padding-right:32px !important}
  html body .elementor-element-580ea335 .e-con-inner{padding-left:32px !important;padding-right:32px !important}
}

/* mobile: as duas etiquetas descem um degrau juntas, mantendo a mesma capsula */
@media (max-width:640px){
  html body .elementor-post__thumbnail::after{left:12px;top:12px;height:23px;padding:0 12px;font-size:10px}
}