/* =====================================================================
   Jucoski Blog 1.1.0 — camada "new6" (skill high-end-visual-design), a mesma linguagem do protótipo
   new6 do site (new6/css/premium.css), adaptada às peças do blog. Carregada logo depois do blog.css.
   Fora daqui só há ajustes pequenos marcados com "new6": functions.php (enfileira este arquivo e o
   js/motion.js; o <head> também define data-motion), js/nav.js (saída animada do menu) e js/motion.js
   (entradas ao rolar).
   Mantidos: textos, cores da marca (#0D74B4 ação, #1A9FEB só decorativo, #132B3A tinta, #10232F escuro),
   Manrope, templates e respiros verticais (nenhuma seção ficou mais alta).
   Não adotados de propósito (como no site): selos/eyebrows acima dos títulos, fundo preto com brilho
   roxo e cartões girados.
   ===================================================================== */

:root {
  --ease-spring: cubic-bezier(.32, .72, 0, 1);

  /* cantos mais generosos */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;

  /* "Doppelrand": núcleo (o próprio elemento) + bandeja externa desenhada com sombras sólidas,
     que acompanham o raio do elemento (cantos concêntricos sem mudar o HTML) */
  --shell: 6px;
  --shell-bg: rgba(19, 43, 58, .035);
  --shell-ring: rgba(19, 43, 58, .07);
  --core-ring: rgba(19, 43, 58, .07);
  --ambient: 0 40px 80px -48px rgba(19, 43, 58, .30), 0 12px 24px -18px rgba(19, 43, 58, .12);
  --bezel: 0 0 0 1px var(--core-ring), 0 0 0 var(--shell) var(--shell-bg), 0 0 0 calc(var(--shell) + 1px) var(--shell-ring), var(--ambient);
  /* a mesma bandeja em tom da marca (passar o mouse) */
  --bezel-hover: 0 0 0 1px rgba(13, 116, 180, .24), 0 0 0 var(--shell) rgba(13, 116, 180, .045), 0 0 0 calc(var(--shell) + 1px) rgba(13, 116, 180, .12),
                 0 44px 84px -46px rgba(19, 43, 58, .38), 0 14px 28px -18px rgba(19, 43, 58, .14);
  /* cartão comum (sem bandeja): a bandeja fica só nos pontos focais — cartão em destaque e capa do artigo
     (mesma decisão do site new6, 26/09) */
  --card: 0 0 0 1px rgba(19, 43, 58, .08), 0 24px 48px -32px rgba(19, 43, 58, .28);

  /* verde do WhatsApp com contraste AA para texto branco (#1EA952 dava 3,1:1; este dá 4,6:1) */
  --wa: #16873F;
  --wa-hover: #157A3B;
}
@media (max-width: 599px) {
  :root { --shell: 5px; }
}

/* ---------- Ícones: traço fino e preciso ---------- */
.icon { stroke-width: 1.5; }

/* ---------- Entradas: subida longa, com desfoque que assenta (js/motion.js marca os blocos) ---------- */
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* "backwards": ao terminar, o bloco volta ao estilo normal (o hover dos cartões continua funcionando) */
html[data-motion="on"] [data-reveal].is-revealing { animation: reveal-rise 950ms var(--ease-spring) backwards; }

/* =====================================================================
   Botões em cápsula com "botão dentro do botão"
   ===================================================================== */
.btn {
  min-height: 52px; padding: 0 24px; gap: 12px;
  border-radius: 999px;
  transition: background-color 300ms var(--ease-spring), border-color 300ms var(--ease-spring),
              color 300ms var(--ease-spring), box-shadow 500ms var(--ease-spring), transform 500ms var(--ease-spring);
}
.btn--lg { min-height: 58px; padding: 0 28px; }
.btn--sm { border-radius: 999px; }
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(13, 116, 180, .25), 0 12px 26px -12px rgba(13, 116, 180, .6);
}
.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(13, 116, 180, .22), 0 20px 38px -16px rgba(13, 116, 180, .65);
}
.btn--ghost { border-color: rgba(19, 43, 58, .14); background: rgba(255, 255, 255, .92); }
.btn:active { transform: scale(.98); transition-duration: 120ms; }

/* WhatsApp: o ícone vai para o círculo da direita, rente à borda (cantos concêntricos) */
.btn--wa {
  padding-right: 7px;
  background: var(--wa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(22, 135, 63, .3), 0 12px 26px -12px rgba(22, 135, 63, .6);
}
.btn--wa:hover {
  background: var(--wa-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 4px rgba(22, 135, 63, .25), 0 20px 38px -16px rgba(22, 135, 63, .6);
}
.btn--wa > .icon {
  order: 2; width: 38px; height: 38px; padding: 9px; margin-left: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform 600ms var(--ease-spring), background-color 300ms var(--ease-spring);
}
.btn--lg.btn--wa > .icon { width: 44px; height: 44px; padding: 11px; }
.btn--wa:hover > .icon { transform: translate(3px, -1px) scale(1.05); background: rgba(255, 255, 255, .26); }

/* contorno claro sobre o escuro ("Conhecer a empresa"): seta num círculo desenhado no ::after (sem mudar o HTML) */
.btn--ghost-dark {
  padding-right: 7px;
  border-color: transparent; /* borda some, mas continua existindo no modo de alto contraste */
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.btn--ghost-dark::after {
  content: ""; flex: none; width: 38px; height: 38px; margin-left: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform 600ms var(--ease-spring), background-color 300ms var(--ease-spring);
}
.btn--lg.btn--ghost-dark::after { width: 44px; height: 44px; background-size: 18px; }
.btn--ghost-dark:hover { border-color: transparent; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.btn--ghost-dark:hover::after { transform: translate(3px, -1px) scale(1.05); background-color: rgba(255, 255, 255, .2); }
@media (forced-colors: active) {
  .btn--ghost-dark::after { display: none; }
}

/* foco visível mais claro sobre as áreas escuras (como no rodapé) */
.blog-cta :focus-visible, .post-cta :focus-visible { outline-color: #7CC6F4; }

/* =====================================================================
   Cabeçalho: ilha flutuante (nunca vira barra colada no topo)
   Com JS o cabeçalho sai do fluxo (fixo, transparente) e a 1ª faixa da página sobe por trás dele;
   ao rolar, aparece a cápsula de vidro. Sem JS continua o cabeçalho sólido do tema.
   ===================================================================== */
.site-header {
  /* recuos da cápsula dentro do .site-header__inner (também usados pela barra de leitura) */
  --pill-y: 6px;
  --pill-l: max(0px, calc(var(--gutter) - 18px)); /* respiro para a logo */
  --pill-r: calc(var(--gutter) - 4px);            /* ~10 px além do "Vamos conversar" (cantos concêntricos) */
}
@media (max-width: 959px) {
  /* celular: a cápsula fica a 8 px das bordas da tela, com o botão do menu dentro dela */
  .site-header { --pill-y: 4px; --pill-l: 8px; --pill-r: 8px; }
}

/* só na tela: impresso, um cabeçalho fixo se repetiria em todas as páginas */
@media screen {
  html.js .site-header {
    position: fixed; inset: 0 0 auto;
    background: transparent; border-bottom-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* a 1ª faixa de cada modelo começa atrás do cabeçalho: o conteúdo fica na mesma altura de antes */
  html.js .blog-intro { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px)); }
  html.js .post-hero { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)); }
  html.js .notfound { padding-top: calc(var(--header-h) + clamp(64px, 10vw, 128px)); }
  /* painel do WordPress (só logado): o cabeçalho desce junto com a barra do admin */
  html.js .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
}
@media screen and (max-width: 600px) {
  html.js .admin-bar .site-header { top: 0; }
}

.site-header__inner { position: relative; isolation: isolate; }
/* a cápsula de vidro que aparece ao rolar (só opacidade e transform animam) */
.site-header__inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--pill-y) var(--pill-r) var(--pill-y) var(--pill-l);
  border-radius: 999px;
  /* um pouco mais opaca que no site (.88): as capas do blog são escuras e mancham o vidro */
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .07), inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -22px rgba(19, 43, 58, .45);
  opacity: 0; transform: translateY(-8px) scale(.985);
  transition: opacity 450ms var(--ease-spring), transform 700ms var(--ease-spring);
  pointer-events: none;
}
html.js .site-header.is-scrolled .site-header__inner::before { opacity: 1; transform: none; }
html.js .site-header:has(.menu-toggle[aria-expanded="true"]) .site-header__inner::before { opacity: 0; }

/* barra de progresso de leitura: um fio dentro da base da cápsula, não uma faixa de tela inteira */
html.js .reading-progress {
  --edge: max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2); /* margem do .container */
  left: calc(var(--edge) + var(--pill-l) + 28px);
  right: calc(var(--edge) + var(--pill-r) + 28px);
  bottom: calc(var(--pill-y) + 3px);
  height: 2px; border-radius: 2px;
  transition: opacity 300ms var(--ease-spring);
}
html.js .site-header:not(.is-scrolled) .reading-progress,
html.js .site-header:has(.menu-toggle[aria-expanded="true"]) .reading-progress { opacity: 0; }

/* links e "Vamos conversar" em cápsula */
.site-nav__list a { border-radius: 999px; }
.site-nav__cta-item { border-left-color: rgba(19, 43, 58, .1); }
/* menu sem outros links antes do botão (caso atual do blog): sem o filete separador solto */
.site-nav__cta-item:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.site-nav__list a.site-nav__cta {
  gap: 10px; padding: 5px 5px 5px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(13, 116, 180, .25), 0 10px 22px -10px rgba(13, 116, 180, .55);
  transition: background-color 300ms var(--ease-spring), box-shadow 500ms var(--ease-spring);
}
/* o ícone do WhatsApp vai para o círculo da direita */
.site-nav__cta .icon {
  order: 2; width: 30px; height: 30px; padding: 7px;
  border-radius: 50%; background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform 600ms var(--ease-spring);
}
.site-nav__cta:hover .icon { transform: translate(2px, -1px) scale(1.05); }
@media (min-width: 960px) {
  .site-nav__list {
    padding: 5px; border: 1px solid transparent; border-radius: 999px;
    transition: background-color 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring);
  }
  /* no topo, o menu é uma bandeja de vidro própria; ao rolar, ela se dissolve na cápsula do cabeçalho */
  html.js .site-header:not(.is-scrolled) .site-nav__list {
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(19, 43, 58, .06), 0 16px 36px -18px rgba(19, 43, 58, .45);
  }
}

@media (max-width: 959px) {
  /* a marca centralizada mede o próprio conteúdo: antes ficava presa a 50% da tela e o "Blog"
     passava por baixo do botão do menu em telas de 320–340 px */
  .brand-wrap { width: max-content; }
}
@media (max-width: 359px) {
  .brand-wrap { left: calc(50% - 6px); }
  .brand__logo { height: 25px; }
  .blog-mark { margin-left: 8px; padding-left: 8px; }
}

/* ---------- Menu do celular: botão que vira X ---------- */
.menu-toggle {
  position: relative;
  width: 44px; height: 44px; border-color: transparent; border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .1), 0 8px 18px -12px rgba(19, 43, 58, .45);
}
.menu-toggle .icon,
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: none; }
.menu-toggle::before, .menu-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.75px; margin: -.875px 0 0 -9px; border-radius: 2px;
  background: var(--ink);
  transition: transform 550ms var(--ease-spring);
}
.menu-toggle::before { transform: translateY(-4px); }
.menu-toggle::after { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
@media (forced-colors: active) {
  .menu-toggle::before, .menu-toggle::after { background: ButtonText; }
}

/* botão do WhatsApp no menu: cápsula com o ícone no círculo da direita */
.mobile-menu__wa {
  justify-content: space-between; gap: 12px;
  min-height: 58px; padding: 7px 7px 7px 28px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(13, 116, 180, .25), 0 12px 26px -12px rgba(13, 116, 180, .6);
}
.mobile-menu__wa .icon {
  order: 2; width: 44px; height: 44px; padding: 12px;
  border-radius: 50%; background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- Menu do celular: tela cheia de vidro, itens subindo em sequência ----------
   Só com JS; sem JS o menu fica aberto e estático abaixo do cabeçalho (como no new6). */
@media (max-width: 959px) {
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .mobile-menu[hidden] { display: block; }

  html.js .mobile-menu {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column;
    padding-top: calc(var(--header-h) + 8px);
    border: 0; box-shadow: none;
    background: rgba(246, 250, 252, .93);
    -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
    overflow-y: auto; overscroll-behavior: contain;
  }
  html.js .mobile-menu[hidden] { display: none; }
  html.js .mobile-menu nav { display: flex; flex-direction: column; flex: 1; padding-block: 12px 28px; }
  html.js .mobile-menu__list li { overflow: hidden; }
  html.js .mobile-menu__list a {
    padding: 14px 2px;
    border-bottom: 1px solid rgba(19, 43, 58, .08);
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;
  }
  html.js .mobile-menu__wa { margin-top: auto; }
  /* página não rola por trás do menu aberto */
  html.js:has(.menu-toggle[aria-expanded="true"]) { overflow: hidden; }

  html.js[data-motion="on"] .mobile-menu:not([hidden]) { animation: menu-in 450ms var(--ease-spring) both; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) .mobile-menu__list a { animation: menu-link-in 800ms var(--ease-spring) both; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(1) a { animation-delay: 60ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(2) a { animation-delay: 110ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(3) a { animation-delay: 160ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(4) a { animation-delay: 210ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(5) a { animation-delay: 260ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) li:nth-child(n+6) a { animation-delay: 310ms; }
  html.js[data-motion="on"] .mobile-menu:not([hidden]) .mobile-menu__wa { animation: reveal-rise 800ms var(--ease-spring) 340ms both; }
  html.js[data-motion="on"] .mobile-menu.is-closing { animation: menu-out 260ms var(--ease-spring) both; }
}
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-out { to { opacity: 0; } }
@keyframes menu-link-in { from { transform: translateY(105%); } }

/* =====================================================================
   Página inicial do blog
   ===================================================================== */
.blog-intro__title { letter-spacing: -0.036em; line-height: 1.06; }

/* categorias: cápsulas com anel (sem borda dupla) e contador num círculo interno */
.chips { gap: 10px; }
.chip {
  min-height: 42px; padding: 0 18px; gap: 8px;
  border-color: transparent; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .13), 0 8px 18px -14px rgba(19, 43, 58, .35);
  transition: background-color 300ms var(--ease-spring), color 300ms var(--ease-spring), box-shadow 400ms var(--ease-spring);
}
.chip:hover { border-color: transparent; color: var(--action-hover); box-shadow: 0 0 0 1px rgba(13, 116, 180, .45), 0 12px 24px -16px rgba(13, 116, 180, .5); }
.chip[aria-current] {
  border-color: transparent; background: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 20px -14px rgba(19, 43, 58, .5);
}
.chip:has(.chip__count) { padding-right: 6px; }
.chip__count {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: rgba(19, 43, 58, .06);
  font-size: .8125rem; font-weight: 700; color: var(--ink-2); opacity: 1;
}
.chip[aria-current] .chip__count { background: rgba(255, 255, 255, .16); color: #fff; }

/* cartão em destaque: bandeja com a capa como núcleo (cantos concêntricos: 28 − 10 − 1 de borda = 17 px) */
.card-feature {
  gap: clamp(24px, 4vw, 56px);
  padding: 10px;
  border-color: transparent; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #FCFDFE);
  box-shadow: var(--bezel);
  transition: box-shadow 500ms var(--ease-spring);
}
.card-feature:hover { border-color: transparent; box-shadow: var(--bezel-hover); }
.card-feature__cover { position: relative; border-radius: calc(var(--radius-lg) - 11px); }
.card-feature__cover::after,
.card__cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(19, 43, 58, .07);
  pointer-events: none;
}
.card-feature__cover img { transition: transform 900ms var(--ease-spring); }
.card-feature__body { padding: 14px clamp(8px, 3vw, 44px) 14px 0; }
.card-feature__title { letter-spacing: -0.03em; line-height: 1.12; }

/* "Ler artigo": cápsula com a seta num círculo que acende quando o cartão recebe o mouse */
.read-more {
  gap: 12px; min-height: 44px; margin-top: 4px; padding: 5px 5px 5px 18px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .1), 0 10px 22px -16px rgba(19, 43, 58, .45);
  transition: box-shadow 500ms var(--ease-spring);
}
.read-more .icon {
  width: 34px; height: 34px; padding: 9px;
  border-radius: 50%; background: var(--action-soft); color: var(--action);
  box-shadow: inset 0 0 0 1px rgba(13, 116, 180, .12);
  stroke-width: 1.75;
  transition: transform 600ms var(--ease-spring), background-color 300ms var(--ease-spring), color 300ms var(--ease-spring);
}
.card-feature:hover .read-more { box-shadow: 0 0 0 1px rgba(13, 116, 180, .3), 0 12px 24px -16px rgba(13, 116, 180, .45); }
.card-feature:hover .read-more .icon, .card:hover .read-more .icon { transform: translate(3px, -1px) scale(1.05); background: var(--action); color: #fff; }

/* grade dos demais artigos (e "Continue lendo"): mesma ideia, bandeja fina de 6 px */
.card-grid { gap: clamp(20px, 2.4vw, 28px); }
.card-feature + .card-grid { margin-top: 32px; } /* a bandeja do destaque ocupa 7 px do vão */
.card {
  padding: 6px;
  border-color: transparent; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #FCFDFE);
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .08), 0 20px 40px -30px rgba(19, 43, 58, .35);
  transition: box-shadow 500ms var(--ease-spring), transform 600ms var(--ease-spring);
}
.card:hover { border-color: transparent; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(13, 116, 180, .3), 0 26px 48px -28px rgba(19, 43, 58, .42); }
.card__cover { position: relative; overflow: hidden; border-radius: calc(var(--radius-lg) - 7px); }
.card__cover img { transition: transform 900ms var(--ease-spring); }
.card:hover .card__cover img { transform: scale(1.03); }
.card__body { padding: 16px 14px 18px; }

.pagination .page-numbers {
  border-color: transparent; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .12);
  transition: box-shadow 300ms var(--ease-spring), color 300ms var(--ease-spring);
}
.pagination a.page-numbers:hover { color: var(--action-hover); box-shadow: 0 0 0 1px rgba(13, 116, 180, .45); }
.pagination .page-numbers.current { box-shadow: 0 10px 22px -12px rgba(19, 43, 58, .55); }

@media (max-width: 719px) {
  /* texto a 21 px da borda do cartão (bandeja de 10 + 1 de borda + 10), perto dos 17 px de antes */
  .card-feature__body { padding: 0 10px 8px; }
}

/* =====================================================================
   Post
   ===================================================================== */
.post-hero__title { letter-spacing: -0.034em; line-height: 1.07; }
.byline__avatar {
  border-color: transparent; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .08), 0 8px 18px -12px rgba(19, 43, 58, .4);
}
/* capa em bandeja (a moldura externa acompanha o raio: cantos concêntricos) */
.post-cover { border-radius: var(--radius-lg); box-shadow: var(--bezel); }

/* passos numerados: moeda em relevo leve */
.prose ol > li::before {
  background: linear-gradient(180deg, #F1F8FD, #E1EFF9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(13, 116, 180, .14), 0 6px 12px -8px rgba(13, 116, 180, .55);
}
/* marcadores com um halo discreto */
.prose ul > li::before { box-shadow: 0 0 0 3px rgba(26, 159, 235, .14); }
/* nomes de arquivo: anel interno em vez de borda; cada pedaço quebrado mantém os cantos */
.prose code {
  padding: .12em calc(.42em + 1px); border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #F6D9AE;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.prose img, .prose figure { border-radius: var(--radius); }

/* sumário lateral: cartão comum (coluna 28 px mais larga para o texto caber como antes) */
@media (min-width: 1024px) {
  .post-layout:not(.post-layout--page) { grid-template-columns: minmax(0, 1fr) 288px; }
}
.toc {
  padding: 20px 18px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #FCFDFE);
  box-shadow: var(--card);
}
.toc__list { border-left-color: rgba(19, 43, 58, .09); }
.toc__list a { transition: color 300ms var(--ease-spring), border-color 300ms var(--ease-spring); }

/* sumário no celular: fechado é uma cápsula; a seta mora num círculo concêntrico (9 px + 1 de borda até a beirada) */
.toc-mobile {
  margin-bottom: 32px;
  border-color: transparent; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, #FCFDFE);
  box-shadow: var(--card);
}
.toc-mobile summary { min-height: 56px; padding: 0 9px 0 20px; border-radius: 999px; }
.toc-mobile summary .icon {
  width: 38px; height: 38px; padding: 10px;
  border-radius: 50%; background: var(--action-soft); color: var(--action);
  box-shadow: inset 0 0 0 1px rgba(13, 116, 180, .12);
  stroke-width: 1.75;
  transition: transform 600ms var(--ease-spring);
}
.toc-mobile .toc__list { margin: 0 20px 18px; }

/* contato no fim do post: cartão escuro com luz da marca, em bandeja */
.post-cta {
  position: relative; isolation: isolate;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(26, 159, 235, .22), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(13, 116, 180, .18), transparent 70%),
    #0C1E29;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 var(--shell) var(--shell-bg), 0 0 0 calc(var(--shell) + 1px) var(--shell-ring), var(--ambient);
}

/* compartilhar: cápsulas com o ícone num círculo à esquerda (5 + 1 px de respiro, concêntrico) */
.share a, .share button {
  gap: 10px; min-height: 46px; padding: 0 18px 0 5px;
  border-color: transparent; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .12), 0 8px 18px -14px rgba(19, 43, 58, .4);
  transition: box-shadow 400ms var(--ease-spring), color 300ms var(--ease-spring), transform 500ms var(--ease-spring);
}
.share .icon {
  width: 34px; height: 34px; padding: 8px;
  border-radius: 50%; background: var(--action-soft); color: var(--action);
  transition: background-color 300ms var(--ease-spring), color 300ms var(--ease-spring);
}
.share a:hover, .share button:hover { border-color: transparent; color: var(--action-hover); box-shadow: 0 0 0 1px rgba(13, 116, 180, .4), 0 12px 24px -16px rgba(13, 116, 180, .5); }
.share a:hover .icon, .share button:hover .icon { background: var(--action); color: #fff; }
.share a:active, .share button:active { transform: scale(.98); transition-duration: 120ms; }

.related__title { letter-spacing: -0.03em; }

@media (min-width: 1024px) and (max-width: 1099px) {
  /* com o sumário ao lado, a coluna do post fica estreita: botão embaixo do texto */
  .post-cta { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  /* botões de largura total: texto à esquerda, círculo à direita */
  .post-cta .btn, .blog-cta__actions .btn { justify-content: space-between; padding-left: 28px; }
}
@media (max-width: 599px) {
  /* três botões iguais na mesma linha: sem o círculo (não cabe), ícone solto na cor da marca */
  .share a, .share button { gap: 6px; padding: 0 8px; font-size: .8125rem; }
  .share .icon { width: 16px; height: 16px; padding: 0; background: none; }
  .share a:hover .icon, .share button:hover .icon { background: none; color: var(--action-hover); }
}
@media (max-width: 359px) {
  /* telas muito estreitas: só o texto (o ícone é decorativo) */
  .share .icon { display: none; }
  .share a, .share button { padding: 0 5px; }
}

/* =====================================================================
   Faixa de contato (fim das listagens): azul profundo com luz da marca
   ===================================================================== */
.blog-cta {
  position: relative; isolation: isolate;
  background:
    radial-gradient(50% 75% at 92% 0%, rgba(26, 159, 235, .20), transparent 70%),
    radial-gradient(42% 70% at 0% 42%, rgba(13, 116, 180, .16), transparent 70%),
    var(--dark);
}
.blog-cta__title { letter-spacing: -0.03em; }
@media (max-width: 1099px) {
  /* com as cápsulas, a coluna do texto ficava estreita demais ao lado dos botões: botões embaixo */
  .blog-cta__inner { grid-template-columns: 1fr; }
}

/* ---------- 404 / busca ---------- */
.search-form input[type="search"] { min-height: 52px; padding: 0 20px; border-radius: 999px; }
/* o "Buscar" herdava o margin-top do botão da 404 e descia 24 px, esticando o campo ao lado */
.notfound .search-form .btn { margin-top: 0; }

/* ---------- Aviso de cookies: cartão flutuante, não uma barra colada na base ----------
   "html" na frente: o consent.css é carregado depois deste arquivo. */
html .cookie-bar {
  left: 12px; right: 12px; bottom: 12px;
  max-width: 900px; margin-inline: auto;
  border: 0; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(19, 43, 58, .08), 0 24px 48px -24px rgba(19, 43, 58, .45);
}
html .cookie-bar__inner { padding-inline: 20px 12px; }
html .cookie-bar__btn { border-radius: 999px; }
@media (max-width: 599px) {
  html .cookie-bar__inner { padding-inline: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  html .cookie-bar { animation-name: cookie-float-in; animation-timing-function: var(--ease-spring); animation-duration: 700ms; }
  html .cookie-bar.is-leaving { animation-name: cookie-float-out; }
}
@keyframes cookie-float-in { from { transform: translateY(calc(100% + 24px)); } }
@keyframes cookie-float-out { to { transform: translateY(calc(100% + 24px)); opacity: 0; } }

/* ---------- Movimento reduzido: mantém cor e sombra, tira deslocamentos ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn--wa:hover > .icon, .btn--ghost-dark:hover::after, .site-nav__cta:hover .icon,
  .card-feature:hover .read-more .icon, .card:hover .read-more .icon, .card:hover,
  .card-feature:hover .card-feature__cover img, .card:hover .card__cover img,
  .share a:active, .share button:active { transform: none; }
  .menu-toggle::before, .menu-toggle::after, .site-header__inner::before, .toc-mobile summary .icon { transition-duration: 1ms; }
  .site-header__inner::before { transform: none; }
}

/* ---------- Compartilhar: mesmas correções da 1.0.6 do tema ao vivo (26/09) ----------
   sem área de transferência no navegador, o botão de copiar some (antes ficava na tela sem função);
   no celular, "Link copiado" / "Não foi possível copiar" quebram dentro do botão em vez de vazar e rolar a página */
.share [hidden] { display: none; }
@media (max-width: 599px) {
  .share button { padding: 0 2px; }
  .share button span { white-space: normal; line-height: 1.25; }
}