/* ============================================================
   BEMAVI — Post do Blog (Figma "Quaxx - Bemavi", node 414-2)
   Segue o padrão de tokens/estética da home (bemavi-home.css)
   e o chrome das páginas internas (bemavi-empreendimento.css).
   Relacionados + newsletter reutilizam componentes da home.
   ============================================================ */

body.bemavi-emp-page {
    --bemavi-bg: #d0c9bd;
    --bemavi-sand: #c1b4a2;
    --bemavi-taupe: #b1a086;
    --bemavi-text: #50423f;
    --bemavi-muted: #6f5f47;
    --bemavi-soft: #75615c;
    --bemavi-dark: #413532;
    --bemavi-deep: #231b1a;
    --bemavi-cream: #ebe7e4;
    --post-container: min(1280px, calc(100vw - 80px));
    background: #d0c9bd;
    color: #50423f;
}

body.bemavi-emp-page .smooth-scroll-content {
    padding-top: 0;
    padding-bottom: 0;
}

body.bemavi-emp-page .smooth-scroll-container {
    background: #d0c9bd;
}

body.bemavi-emp-page .bt-whatsbox:not(.bt-whatsbox-bemavi) {
    display: none !important;
}

@media only screen and (min-width: 1025px) {
    html:has(body.bemavi-emp-page),
    body.bemavi-emp-page {
        margin-top: 0 !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    body.page-blog.bemavi-emp-page {
        --post-container: min(1120px, calc(100vw - 8vw));
    }
}

/* ── Header (transparente sobre o hero, com logo + menu) ───────────── */
body.bemavi-emp-page .site-header.bemavi-site-header,
body.bemavi-emp-page .site-header.bemavi-site-header.is-compact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 120px;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.bemavi-emp-page .site-header.bemavi-site-header.is-hide,
body.bemavi-emp-page.header-lock-visible .site-header.bemavi-site-header {
    transform: translateY(0) !important;
}

.bemavi-header-brand {
    position: absolute;
    top: 67px;
    left: 70px;
    z-index: 12;
    display: block;
    pointer-events: auto;
}

.bemavi-header-brand img {
    display: block;
    width: 145px;
    height: 16px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

/* A logo do post/capa do blog fica no próprio hero (rola junto com a página) */
body.page-post .bemavi-header-brand,
body.page-blog .bemavi-header-brand {
    display: none;
}

/* ── Estrutura base ────────────────────────────────────────────────── */
.bemavi-post {
    position: relative;
    overflow: hidden;
    background: var(--bemavi-bg);
    color: var(--bemavi-text);
    font-family: var(--font-base);
    font-weight: 300;
}

.bemavi-post img {
    display: block;
    max-width: 100%;
}

.post-container {
    width: var(--post-container);
    margin: 0 auto;
}

/* ============================================================
   1) HERO
   ============================================================ */
.post-hero {
    position: relative;
    z-index: 2;
    min-height: 840px;
    isolation: isolate;
    overflow: visible;
    background: var(--bemavi-deep);
    color: var(--bemavi-cream);
}

.post-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.post-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(39, 31, 29, 0.90) 0%, rgba(39, 31, 29, 0.50) 100%);
}

.post-hero-logo {
    position: absolute;
    top: 60px;
    left: 70px;
    z-index: 5;
    width: 145px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.96;
    pointer-events: none;
}

/* Capa do post — encosta na borda direita e avança sobre o conteúdo.
   Ancorada por baixo: quando a imagem encolhe (notebook), o avanço sobre
   o conteúdo (e o gap até a linha das categorias) permanece constante. */
.post-hero-figure {
    position: absolute;
    top: auto;
    bottom: -226px;
    right: 0;
    z-index: 2;
    width: min(843px, 44vw);
    aspect-ratio: 843 / 668;
    margin: 0;
    overflow: hidden;
    background: var(--bemavi-dark);
}

.post-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(39, 31, 29, 0.6) 0%, rgba(39, 31, 29, 0) 55%);
}

.post-hero-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 265px 0 80px 108px;
}

.post-hero-line {
    position: absolute;
    top: 63px;
    left: 2px;
    width: 2px;
    height: 251px;
    background: var(--bemavi-taupe);
    pointer-events: none;
}

.post-hero-kicker {
    margin: 0 0 142px;
    color: #d1cec9;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 60px;
    letter-spacing: 12px;
    font-weight: 300;
}

.post-hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    width: min(416px, 100%);
    margin: 0 0 42px;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 2.7px;
    font-weight: 300;
}

.post-hero-title {
    margin: 0;
    max-width: 416px;
    color: #d1cec9;
    font-size: 38px;
    line-height: 48px;
    font-weight: 300;
}

/* ============================================================
   INTRO DO BANNER (sequência, como na institucional:
   logo → linha → "blog bemavi" letra a letra → categoria/data
   → título → imagem da capa)
   ============================================================ */
.post-hero-logo {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.15s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-hero-line {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-hero-kicker {
    opacity: 0;
}

.post-hero-kicker .hero-char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.post-hero-meta {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-hero-title {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-hero-figure {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-post.is-hero-revealed .post-hero-logo {
    opacity: 0.96;
    transform: none;
    transition-delay: 0.15s;
}

.bemavi-post.is-hero-revealed .post-hero-line {
    transform: scaleY(1);
    transition-delay: 0.85s;
}

.bemavi-post.is-hero-revealed .post-hero-kicker {
    opacity: 1;
}

.bemavi-post.is-hero-revealed .post-hero-kicker .hero-char {
    opacity: 1;
    transition-delay: var(--d, 0s);
}

.bemavi-post.is-hero-revealed .post-hero-meta {
    opacity: 1;
    transform: none;
    transition-delay: var(--meta-delay, 2.5s);
}

.bemavi-post.is-hero-revealed .post-hero-title {
    opacity: 1;
    transform: none;
    transition-delay: var(--title-delay, 2.9s);
}

.bemavi-post.is-hero-revealed .post-hero-figure {
    opacity: 1;
    transform: none;
    transition-delay: var(--figure-delay, 3.5s);
}

@media (prefers-reduced-motion: reduce) {
    .post-hero-logo,
    .post-hero-line,
    .post-hero-kicker,
    .post-hero-kicker .hero-char,
    .post-hero-meta,
    .post-hero-title,
    .post-hero-figure {
        transition: none !important;
    }
}

/* ============================================================
   2) CONTEÚDO DO POST
   ============================================================ */
.post-article {
    position: relative;
    padding: 86px 0 120px;
}

/* Transição de cor abaixo do hero (gradiente do Figma) */
.post-article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 900px;
    z-index: 0;
    background: linear-gradient(180deg, rgba(163, 143, 129, 0.5) 0%, rgba(163, 143, 129, 0) 460px);
    pointer-events: none;
}

.post-article-inner {
    position: relative;
    z-index: 1;
    padding-left: 108px;
    box-sizing: border-box;
}

.post-lead {
    margin: 0 0 100px;
    max-width: 432px;
    color: var(--bemavi-text);
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
}

.post-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.post-prose {
    width: min(602px, 100%);
    color: var(--bemavi-soft);
    font-size: 16px;
    line-height: 23px;
    font-weight: 300;
}

.post-prose p {
    margin: 0 0 25px;
}

.post-prose p:last-child {
    margin-bottom: 0;
}

.post-prose h2,
.post-prose h3 {
    margin: 40px 0 20px;
    color: var(--bemavi-text);
    font-weight: 300;
    font-size: 22px;
    line-height: 30px;
}

.post-prose img {
    margin: 25px 0;
}

.post-prose a {
    color: var(--bemavi-muted);
    text-decoration: underline;
}

.post-prose ul,
.post-prose ol {
    margin: 0 0 25px;
    padding-left: 22px;
}

/* Lista de categorias à direita — linha separa a capa (acima) das categorias.
   A linha tem a mesma largura da capa do hero (vaza o container até a borda direita). */
.post-cats {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: 64px;
    padding-top: 44px;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 2.7px;
    font-weight: 300;
}

.post-cats::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc((var(--post-container) - 100vw) / 2);
    width: min(843px, 44vw);
    height: 2px;
    background: var(--bemavi-taupe);
    /* cresce quando o waypoint do aside é revelado */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.post-cats.animated::before {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .post-cats::before {
        transform: scaleX(1);
        transition: none;
    }
}

.post-cats a {
    color: var(--bemavi-muted);
    line-height: 50px;
    transition: color 0.4s ease;
}

.post-cats a:hover,
.post-cats a:focus-visible,
.post-cats a.is-active {
    color: var(--bemavi-text);
}

/* ============================================================
   3) GALERIA (miniaturas circulares + setas)
   ============================================================ */
.post-gallery {
    display: flex;
    align-items: center;
    margin-top: 96px;
    /* puxa a seta esquerda para a margem, alinhando as miniaturas ao texto */
    margin-left: -78px;
}

.post-gallery-arrow {
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.post-gallery-arrow img {
    width: 100%;
    height: 100%;
}

.post-gallery-prev {
    margin-right: 45px;
}

.post-gallery-prev img {
    transform: rotate(180deg);
}

.post-gallery-next {
    margin-left: 46px;
}

.post-gallery-arrow:hover:not(:disabled) {
    transform: scale(1.08);
}

.post-gallery-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.post-gallery-track {
    display: flex;
    gap: 24px;
    max-width: 632px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.post-gallery-track::-webkit-scrollbar {
    display: none;
}

.post-gallery-item {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bemavi-sand);
}

.post-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-gallery-item:hover img,
.post-gallery-item:focus-visible img {
    transform: scale(1.08);
}

/* Anula estilos antigos de galeria do subpages.css (raio quadrado + overlay escuro) */
.bemavi-post .post-gallery-item {
    border-radius: 50%;
    aspect-ratio: auto;
    isolation: auto;
}

.bemavi-post .post-gallery-item::before,
.bemavi-post .post-gallery-item::after {
    content: none;
}

/* Película marrom (cor do projeto) sobre as miniaturas da galeria */
.bemavi-post .post-gallery-item {
    position: relative;
}

.bemavi-post .post-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    transform: none;
    background: rgba(50, 35, 25, 0.45);
    background-image: none;
    pointer-events: none;
    transition: background 0.4s ease;
}

.bemavi-post .post-gallery-item:hover::after,
.bemavi-post .post-gallery-item:focus-visible::after {
    background: rgba(50, 35, 25, 0.3);
}

/* ============================================================
   4) VOLTAR + COMPARTILHE
   ============================================================ */
.post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 38px;
    margin-top: 84px;
}

.post-back {
    display: inline-flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.6px;
    font-weight: 500;
}

.post-back img {
    width: 6px;
    height: 11px;
    margin-top: 7px;
    transform: rotate(180deg);
}

.post-back span {
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bemavi-text);
    transition: opacity 0.4s ease;
}

.post-back:hover span,
.post-back:focus-visible span {
    opacity: 0.65;
}

.post-share {
    display: flex;
    align-items: center;
    gap: 22px;
    /* reset das regras antigas de .post-share em subpages.css (linha/topo cinza) */
    margin: 0;
    padding: 0;
    border: 0;
}

.post-share-label {
    margin-right: 14px;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.6px;
    font-weight: 500;
}

.post-share a {
    display: block;
    width: 19px;
    height: 19px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.post-share a:hover,
.post-share a:focus-visible {
    opacity: 0.65;
    transform: translateY(-2px);
}

.post-share a img {
    width: 100%;
    height: 100%;
}

/* ============================================================
   5) RELACIONADOS + NEWSLETTER (overrides do componente da home)
   A linha divisória fica no topo da seção (sem o cabeçalho da home).
   ============================================================ */
.post-related {
    padding-top: 72px;
}

.post-related::before {
    top: 0;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Notebook — hero proporcional (mesmo padrão da institucional) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .post-hero {
        min-height: 720px;
    }

    /* logo alinhada à esquerda do "blog bemavi" */
    .post-hero-logo {
        top: 54px;
        left: calc((100vw - var(--post-container)) / 2 + 108px);
        width: 130px;
    }

    .post-hero-inner {
        padding: 210px 0 70px 108px;
    }

    .post-hero-line {
        top: 50px;
        height: 208px;
    }

    .post-hero-kicker {
        margin-bottom: 104px;
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 9px;
    }

    .post-hero-meta {
        margin-bottom: 34px;
    }

    .post-hero-title {
        font-size: 32px;
        line-height: 42px;
    }

    /* Texto do post mais estreito no note para não encostar na imagem */
    .post-prose {
        width: min(calc(100vw - 650px), 480px);
    }

    /* Categorias afastadas do canto direito no note */
    .post-cats {
        margin-right: 80px;
    }

    /* Linha acima das categorias continua encostando na borda direita */
    .post-cats::before {
        right: calc((var(--post-container) - 100vw) / 2 - 80px);
    }
}

@media only screen and (max-width: 1366px) {
    .post-hero-figure {
        width: 46vw;
    }

    .post-cats::before {
        width: 46vw;
    }
}

@media only screen and (max-width: 1024px) {
    body.bemavi-emp-page {
        --post-container: calc(100vw - 48px);
    }

    .post-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .post-hero-inner {
        order: 1;
        padding: 190px 0 0 40px;
    }

    .post-hero-figure {
        order: 2;
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        z-index: 2;
        width: var(--post-container);
        aspect-ratio: 4 / 3;
        margin: 56px auto -120px;
    }

    .post-hero-kicker {
        margin-bottom: 80px;
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 7px;
    }

    .post-hero-meta {
        width: 100%;
        max-width: 520px;
    }

    .post-hero-title {
        max-width: 640px;
        font-size: 32px;
        line-height: 42px;
    }

    .post-article {
        padding-top: 180px;
    }

    .post-article::before {
        height: 640px;
        background: linear-gradient(180deg, rgba(163, 143, 129, 0.5) 0%, rgba(163, 143, 129, 0) 380px);
    }

    .post-article-inner {
        padding-left: 0;
    }

    .post-lead {
        max-width: 640px;
        margin-bottom: 70px;
    }

    .post-columns {
        flex-direction: column;
        gap: 56px;
    }

    .post-cats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 34px;
        margin-top: 0;
        font-size: 15px;
        letter-spacing: 2.2px;
    }

    .post-cats::before {
        right: auto;
        left: 0;
        width: 100%;
    }

    .post-cats a {
        line-height: 40px;
    }

    .post-gallery {
        margin-top: 70px;
        margin-left: 0;
    }

    .post-gallery-prev {
        margin-right: 24px;
    }

    .post-gallery-next {
        margin-left: 24px;
    }

    .post-gallery-track {
        max-width: none;
        flex: 1;
    }
}

@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-emp-page {
        --post-container: calc(100vw - var(--bemavi-mobile-gutter, 6vw) * 2);
    }

    .post-hero-logo {
        top: 44px;
        left: 24px;
        width: 120px;
    }

    .post-hero-line {
        display: none;
    }

    .post-hero-inner {
        padding: 150px 0 0;
    }

    .post-hero-kicker {
        margin-bottom: 56px;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 5px;
    }

    .post-hero-meta {
        margin-bottom: 28px;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 2px;
    }

    .post-hero-title {
        font-size: 26px;
        line-height: 36px;
    }

    .post-hero-figure {
        margin: 40px auto -90px;
    }

    .post-article {
        padding: 140px 0 90px;
    }

    .post-lead {
        margin-bottom: 56px;
        font-size: 18px;
        line-height: 26px;
    }

    .post-gallery-item {
        flex-basis: 104px;
        width: 104px;
        height: 104px;
    }

    .post-gallery-track {
        gap: 16px;
    }

    .post-actions {
        margin-top: 64px;
    }

    .post-share {
        flex-wrap: wrap;
        gap: 18px;
    }
}

/* ============================================================
   CAPA DO BLOG (Figma "Quaxx - Bemavi", node 466-2)
   Hero com categorias + último post em destaque + grid de
   posts (cards/newsletter reutilizam os componentes da home).
   ============================================================ */
.bemavi-blogcapa {
    position: relative;
    overflow: hidden;
    background: var(--bemavi-bg);
    color: var(--bemavi-text);
    font-family: var(--font-base);
    font-weight: 300;
}

.bemavi-blogcapa img {
    display: block;
    max-width: 100%;
}

/* ── 1) Hero ───────────────────────────────────────────────── */
.blogcapa-hero {
    position: relative;
    z-index: 1;
    min-height: 840px;
    isolation: isolate;
    background: var(--bemavi-deep);
    color: var(--bemavi-cream);
}

.blogcapa-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.blogcapa-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogcapa-hero-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

.blogcapa-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(39, 31, 29, 0.92) 0%, rgba(39, 31, 29, 0.58) 48%, rgba(39, 31, 29, 0.88) 100%),
        linear-gradient(90deg, rgba(39, 31, 29, 0.22) 0%, rgba(39, 31, 29, 0) 42%);
}

.blogcapa-hero-logo {
    position: absolute;
    top: 60px;
    left: 70px;
    z-index: 5;
    width: 145px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.96;
    pointer-events: none;
}

.blogcapa-hero-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 265px 0 64px;
}

.blogcapa-hero-line {
    position: absolute;
    top: 63px;
    left: 2px;
    width: 2px;
    height: 251px;
    background: var(--bemavi-taupe);
    pointer-events: none;
}

.blogcapa-hero-kicker {
    margin: 0 0 90px 108px;
    color: #d1cec9;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 60px;
    letter-spacing: 12px;
    font-weight: 300;
}

.blogcapa-hero-sub {
    margin: 0 0 0 108px;
    width: min(308px, 100%);
    color: #d1cec9;
    font-size: 30px;
    line-height: 35px;
    font-weight: 300;
}

/* Categorias — da margem esquerda do container até perto da borda direita */
.blogcapa-cats {
    --blogcapa-cat-line-width: 112px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px clamp(28px, 3.2vw, 58px);
    margin-top: 110px;
    text-align: right;
    /* estende até ~80px da borda direita em telas largas, nunca encolhe o container */
    margin-right: calc((var(--post-container) - 100vw) / 2 + 80px);
}

.blogcapa-cats a {
    position: relative;
    display: inline-flex;
    color: var(--bemavi-muted);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 2.7px;
    font-weight: 300;
    transition: color 0.4s ease;
}

.blogcapa-cats a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -31px;
    width: var(--blogcapa-cat-line-width);
    height: 4px;
    border-radius: 2px;
    background: var(--bemavi-text);
    transform: translateX(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.blogcapa-cats a:hover,
.blogcapa-cats a:focus-visible,
.blogcapa-cats a.is-active {
    color: var(--bemavi-taupe);
}

.blogcapa-cats a:hover::after,
.blogcapa-cats a:focus-visible::after,
.blogcapa-cats a.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

.blogcapa-cat-select {
    display: none;
}

/* ── Intro do banner (mesma sequência do post:
   logo → linha → "blog bemavi" letra a letra → subtítulo
   → categorias → imagem do destaque) ───────────────────────── */
.blogcapa-hero-logo {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.15s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.blogcapa-hero-line {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.blogcapa-hero-kicker {
    opacity: 0;
}

.blogcapa-hero-kicker .hero-char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.75s ease;
}

.blogcapa-hero-sub {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.blogcapa-cats {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.blogcapa-featured-figure {
    /* entra na sequência do hero, logo depois das categorias (ver --figure-delay no page.blog.js) */
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-hero-logo {
    opacity: 0.96;
    transform: none;
    transition-delay: 0.15s;
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-hero-line {
    transform: scaleY(1);
    transition-delay: 0.85s;
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-hero-kicker {
    opacity: 1;
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-hero-kicker .hero-char {
    opacity: 1;
    transition-delay: var(--d, 0s);
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-hero-sub {
    opacity: 1;
    transform: none;
    transition-delay: var(--sub-delay, 2.5s);
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-cats {
    opacity: 1;
    transform: none;
    transition-delay: var(--cats-delay, 2.9s);
}

.bemavi-blogcapa.is-hero-revealed .blogcapa-featured-figure {
    opacity: 1;
    transform: none;
    transition-delay: var(--figure-delay, 3.5s);
}

@media (prefers-reduced-motion: reduce) {
    .blogcapa-hero-logo,
    .blogcapa-hero-line,
    .blogcapa-hero-kicker,
    .blogcapa-hero-kicker .hero-char,
    .blogcapa-hero-sub,
    .blogcapa-cats,
    .blogcapa-featured-figure {
        transition: none !important;
    }
}

/* ── 2) Post em destaque ───────────────────────────────────── */
.blogcapa-featured {
    position: relative;
    z-index: 2;
    min-height: 580px;
    box-sizing: border-box;
    padding: 77px 0 0;
    isolation: isolate;
    background: var(--bemavi-bg);
}

/* Transição de cor abaixo do hero (gradiente do Figma). */
.blogcapa-featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: 460px;
    background: linear-gradient(180deg, rgba(163, 143, 129, 0.82) 0%, rgba(208, 201, 189, 0.72) 38%, rgba(208, 201, 189, 0) 100%);
    pointer-events: none;
}

.blogcapa-featured-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
}

.blogcapa-featured-link:focus-visible {
    outline: 2px solid var(--bemavi-taupe);
    outline-offset: -10px;
}

/* Imagem do destaque — encosta na borda direita e avança sobre o hero */
.blogcapa-featured-figure {
    position: absolute;
    top: -167px; /* Avança sobre o hero sem encostar nas categorias. */
    right: 0;
    z-index: 2;
    width: min(859px, 44vw);
    aspect-ratio: 859 / 681;
    margin: 0;
    overflow: hidden;
    background: var(--bemavi-dark);
}

/* Link que torna a imagem do destaque clicável (preenche a figura). */
.blogcapa-featured-media {
    display: block;
    width: 100%;
    height: 100%;
}

.blogcapa-featured-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogcapa-featured-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Deixa o clique atravessar o gradiente até o link da imagem. */
    pointer-events: none;
    background: linear-gradient(180deg, rgba(39, 31, 29, 0.6) 0%, rgba(39, 31, 29, 0) 55%);
}

.blogcapa-featured-inner {
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.blogcapa-featured-cat {
    margin: 0;
    color: var(--bemavi-muted);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 50px;
    letter-spacing: 2.7px;
}

.blogcapa-featured-title {
    margin: 12px 0 0;
    width: min(524px, 100%);
    color: var(--bemavi-text);
    font-size: 33px;
    line-height: 45px;
    font-weight: 300;
}

.blogcapa-featured-resumo {
    margin: 36px 0 0;
    width: min(524px, 100%);
    color: var(--bemavi-text);
    font-size: 20px;
    line-height: 28px;
}

.blogcapa-featured .bemavi-read-more {
    margin: 44px 0 0;
}

.blogcapa-featured-inner:hover .bemavi-read-more::before,
.blogcapa-featured-inner:focus-within .bemavi-read-more::before {
    top: -16px;
    height: calc(100% + 16px);
}

/* ── 3) Grid de posts (overrides do componente da home) ────── */
.blogcapa-grid {
    padding-top: 155px;
}

.blogcapa-grid::before {
    content: none;
}

.blogcapa-grid .bemavi-blog-card.is-hidden {
    display: none;
}

/* Sem o botão "veja mais", a newsletter mantém o respiro do grid */
.blogcapa-grid .bemavi-blog-grid + .bemavi-newsletter {
    margin-top: 90px;
}

button.blogcapa-more {
    border: 0;
    border-bottom: 2px solid var(--bemavi-text);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.4s ease;
}

button.blogcapa-more:hover,
button.blogcapa-more:focus-visible {
    opacity: 0.65;
}

/* ── Responsivo ────────────────────────────────────────────── */

/* Notebook — hero proporcional (mesmo padrão do post) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .blogcapa-hero {
        min-height: 720px;
    }

    .blogcapa-hero-logo {
        top: 54px;
        left: calc((100vw - var(--post-container)) / 2 + 108px);
        width: 130px;
    }

    .blogcapa-hero-inner {
        padding-top: 210px;
    }

    .blogcapa-hero-line {
        top: 50px;
        height: 208px;
    }

    .blogcapa-hero-kicker {
        margin-bottom: 70px;
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 9px;
    }

    .blogcapa-hero-sub {
        font-size: 26px;
        line-height: 32px;
    }

    .blogcapa-cats {
        margin-top: 122px;
    }

    .blogcapa-cats a {
        font-size: 15px;
        letter-spacing: 2.2px;
    }

    .blogcapa-featured-title {
        width: min(470px, 100%);
        font-size: 29px;
        line-height: 40px;
    }

    .blogcapa-featured-resumo {
        width: min(470px, 100%);
    }

    .blogcapa-featured-figure {
        top: -90px;
    }
}

@media only screen and (max-width: 1366px) {
    .blogcapa-featured-figure {
        width: 46vw;
    }
}

@media only screen and (max-width: 1024px) {
    .blogcapa-hero {
        min-height: 0;
    }

    .blogcapa-hero-inner {
        padding: 190px 0 64px;
    }

    .blogcapa-hero-kicker {
        margin: 0 0 56px 40px;
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 7px;
    }

    .blogcapa-hero-sub {
        margin-left: 40px;
        font-size: 24px;
        line-height: 30px;
    }

    .blogcapa-cats {
        justify-content: flex-start;
        gap: 0 34px;
        margin-top: 72px;
        margin-right: 0;
        text-align: left;
    }

    .blogcapa-cats a {
        font-size: 15px;
        line-height: 40px;
        letter-spacing: 2.2px;
    }

    .blogcapa-cats a::after {
        bottom: 0;
    }

    /* Destaque empilhado: texto primeiro, imagem em largura total abaixo */
    .blogcapa-featured {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: 64px;
    }

    .blogcapa-featured-inner {
        order: 1;
    }

    .blogcapa-featured-figure {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        width: var(--post-container);
        aspect-ratio: 4 / 3;
        margin: 80px auto 0;
    }

    .blogcapa-grid {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    .blogcapa-hero-logo {
        top: 44px;
        left: 24px;
        width: 120px;
    }

    .blogcapa-hero-line {
        display: none;
    }

    .blogcapa-hero-inner {
        padding: 150px 0 56px;
    }

    .blogcapa-hero-kicker {
        margin: 0 0 40px;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 5px;
    }

    .blogcapa-hero-sub {
        margin-left: 0;
        font-size: 20px;
        line-height: 27px;
    }

    .blogcapa-cats {
        margin-top: 48px;
        column-gap: 24px;
    }

    .blogcapa-cats a {
        font-size: 13px;
        line-height: 34px;
        letter-spacing: 1.8px;
    }

    .blogcapa-cats a::after {
        bottom: 0;
        height: 3px;
    }

    .blogcapa-featured {
        padding-top: 48px;
    }

    .blogcapa-featured-cat {
        font-size: 14px;
        line-height: 40px;
        letter-spacing: 2px;
    }

    .blogcapa-featured-title {
        font-size: 26px;
        line-height: 35px;
    }

    .blogcapa-featured-resumo {
        margin-top: 24px;
        font-size: 18px;
        line-height: 26px;
    }

    .blogcapa-featured-figure {
        margin-top: 64px;
    }

    .blogcapa-grid {
        padding-top: 64px;
    }
}

/* ============================================================
   INTERMEDIÁRIOS (1441–1759px) — entre o notebook e o desktop
   o container avança sobre o canto esquerdo e a linha vertical
   cruzaria a logo fixada em 70px; a logo passa a alinhar com o
   título (mesmo arranjo do notebook). A partir de 1760px o canto
   volta a ter espaço e vale o posicionamento do Figma (70px).
   ============================================================ */
@media (min-width: 1441px) and (max-width: 1759px) {
    .post-hero-logo,
    .blogcapa-hero-logo {
        left: calc((100vw - var(--post-container)) / 2 + 108px);
    }
}

/* ============================================================
   MOBILE BLOG LISTAGEM (<=767px) — Figma node 691-397.
   Dropdown de categorias no hero, post destaque vazando do banner
   e cards empilhados com imagem + gradiente permanente.
   ============================================================ */
@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.page-blog.bemavi-emp-page {
        --blog-mobile-control: min(417px, 77.22vw);
        --blog-mobile-card: min(476px, 88.15vw);
        --blog-mobile-control-left: calc((100vw - var(--blog-mobile-control)) / 2);
        --blog-mobile-card-left: calc((100vw - var(--blog-mobile-card)) / 2);
        --post-container: var(--blog-mobile-control);
    }

    body.page-blog .bemavi-menu-trigger {
        top: 30px;
        right: var(--bemavi-mobile-gutter, 6vw);
        gap: 12px;
        font-size: 14px;
        letter-spacing: 0.28em;
    }

    .blogcapa-hero {
        min-height: min(960px, 177.78vw);
        overflow: visible;
    }

    .blogcapa-hero-bg img {
        object-position: center top;
    }

    .blogcapa-hero-shade {
        background: linear-gradient(180deg, rgba(39, 31, 29, 0.90) 0%, rgba(39, 31, 29, 0.50) 100%);
    }

    .blogcapa-hero-logo {
        top: min(148px, 27.41vw);
        left: calc(var(--blog-mobile-control-left) + min(93px, 17.22vw));
        width: min(145px, 26.85vw);
    }

    .blogcapa-hero-line {
        display: block;
        top: min(63px, 11.67vw);
        left: 0;
        height: min(196px, 36.3vw);
    }

    .blogcapa-hero-inner {
        width: var(--blog-mobile-control);
        padding: min(226px, 41.85vw) 0 0;
    }

    .blogcapa-hero-kicker {
        margin: 0 0 min(100px, 18.52vw) min(93px, 17.22vw);
        font-size: min(30px, 5.56vw);
        line-height: min(44px, 8.15vw);
        letter-spacing: min(9px, 1.67vw);
        white-space: nowrap;
    }

    .blogcapa-hero-sub {
        width: min(239px, 44.26vw);
        margin: 0 0 min(102px, 18.89vw) min(93px, 17.22vw);
        font-size: min(24px, 4.44vw);
        line-height: min(28px, 5.19vw);
    }

    .blogcapa-cats {
        display: none;
    }

    .blogcapa-cat-select {
        position: relative;
        z-index: 1400;
        display: block;
        width: 100%;
    }

    .blogcapa-cat-trigger {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: min(80px, 14.81vw);
        box-sizing: border-box;
        padding: 16px min(50px, 9.26vw) 16px min(30px, 5.56vw);
        border: 0;
        border-left: 2px solid #806e52;
        border-bottom: 2px solid #806e52;
        border-radius: 0;
        background: transparent;
        color: var(--bemavi-taupe);
        text-align: left;
        text-transform: uppercase;
        font-family: inherit;
        font-size: min(20px, 3.7vw);
        line-height: 1.2;
        font-weight: 300;
        cursor: pointer;
    }

    .blogcapa-cat-trigger::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 12px;
        height: 12px;
        border-right: 2px solid #50423f;
        border-bottom: 2px solid #50423f;
        transform: translateY(-65%) rotate(45deg);
        transition: transform 0.32s ease;
    }

    .blogcapa-cat-select.is-open .blogcapa-cat-trigger::after {
        transform: translateY(-35%) rotate(225deg);
    }

    .blogcapa-cat-trigger:focus-visible {
        border-left-color: var(--bemavi-taupe);
        border-bottom-color: var(--bemavi-taupe);
        outline: 0;
    }

    .blogcapa-cat-menu {
        position: fixed;
        z-index: 1400;
        box-sizing: border-box;
        padding: 18px 0 20px;
        background: #5a4743;
        box-shadow: 0 18px 34px rgba(35, 27, 26, 0.18);
        animation: blogcapaCatMenuIn 0.28s ease both;
    }

    .blogcapa-cat-menu[hidden] {
        display: none;
    }

    .blogcapa-cat-menu button {
        display: block;
        width: 100%;
        min-height: 30px;
        padding: 0 34px;
        border: 0;
        background: transparent;
        color: #c1b4a2;
        text-align: left;
        text-transform: uppercase;
        font-family: inherit;
        font-size: 11px;
        line-height: 40px;
        letter-spacing: 1px;
        font-weight: 300;
        cursor: pointer;
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .blogcapa-cat-menu button:hover,
    .blogcapa-cat-menu button:focus-visible,
    .blogcapa-cat-menu button[aria-selected="true"] {
        background: rgba(193, 180, 162, 0.12);
        color: #ebe7e4;
        outline: 0;
    }

    @keyframes blogcapaCatMenuIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .blogcapa-featured {
        display: block;
        min-height: 0;
        padding-top: min(177px, 32.78vw);
        padding-bottom: min(70px, 12.96vw);
    }

    .blogcapa-featured::before {
        height: min(460px, 85.19vw);
        background: linear-gradient(180deg, rgba(163, 143, 129, 0.55) 0%, rgba(208, 201, 189, 0.52) 42%, rgba(208, 201, 189, 0) 100%);
    }

    .blogcapa-featured-figure {
        position: absolute;
        top: max(-283px, -52.41vw);
        left: var(--blog-mobile-card-left);
        right: 0;
        width: calc(100vw - var(--blog-mobile-card-left));
        aspect-ratio: 508 / 410;
        margin: 0;
    }

    .blogcapa-featured-inner {
        width: var(--blog-mobile-control);
        margin: 0 auto;
    }

    .blogcapa-featured-cat {
        font-size: min(20px, 3.7vw);
        line-height: min(50px, 9.26vw);
        letter-spacing: min(3px, 0.56vw);
    }

    .blogcapa-featured-title {
        width: 100%;
        margin-top: min(12px, 2.22vw);
        font-size: min(27px, 5vw);
        line-height: min(36px, 6.67vw);
    }

    .blogcapa-featured-resumo {
        width: 100%;
        margin-top: min(34px, 6.3vw);
        font-size: min(19px, 3.52vw);
        line-height: min(28px, 5.19vw);
    }

    .blogcapa-featured .bemavi-read-more {
        margin-top: min(58px, 10.74vw);
        margin-left: min(20px, 3.7vw);
        font-size: min(20px, 3.7vw);
        line-height: min(51px, 9.44vw);
    }

    .blogcapa-featured .bemavi-read-more::before {
        top: 0;
        height: min(51px, 9.44vw);
    }

    .blogcapa-grid {
        padding: min(86px, 15.93vw) 0 0;
    }

    .blogcapa-grid .bemavi-container {
        width: var(--blog-mobile-card);
    }

    .blogcapa-grid .bemavi-blog-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: min(76px, 14.07vw);
    }

    .blogcapa-grid .bemavi-blog-card {
        position: relative;
        display: block;
        width: 100%;
    }

    .blogcapa-grid .bemavi-blog-media {
        position: relative;
        aspect-ratio: 476 / 378;
        overflow: hidden;
    }

    .blogcapa-grid .bemavi-blog-media::before {
        content: none;
    }

    .blogcapa-grid .bemavi-blog-media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(41, 38, 35, 0) 47%, rgba(41, 38, 35, 0.88) 100%);
        pointer-events: none;
    }

    .blogcapa-grid .bemavi-blog-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blogcapa-grid .bemavi-blog-card span {
        position: relative;
        display: block;
        z-index: 2;
        margin: max(-55px, -10.19vw) 0 0 min(30px, 5.56vw);
        color: var(--bemavi-muted);
        font-size: min(20px, 3.7vw);
        line-height: min(50px, 9.26vw);
        letter-spacing: min(3px, 0.56vw);
    }

    .blogcapa-grid .bemavi-blog-card h3 {
        width: min(341px, calc(100% - min(60px, 11.11vw)));
        min-height: 0;
        margin: min(45px, 8.33vw) 0 0 min(30px, 5.56vw);
        font-size: min(27px, 5vw);
        line-height: min(36px, 6.67vw);
        font-weight: 300;
    }

    .blogcapa-grid .bemavi-read-more {
        margin: min(27px, 5vw) 0 0 min(50px, 9.26vw);
        font-size: min(20px, 3.7vw);
        line-height: min(51px, 9.44vw);
    }

    .blogcapa-grid .bemavi-read-more::before {
        top: 0;
        height: min(51px, 9.44vw);
    }

    .blogcapa-grid .bemavi-blog-grid + .bemavi-newsletter,
    .blogcapa-grid .bemavi-newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-template-columns: none;
        width: 100%;
        min-height: min(470px, 87.04vw);
        box-sizing: border-box;
        margin-top: min(92px, 17.04vw);
        padding: min(55px, 10.19vw) min(32px, 5.93vw) min(72px, 13.33vw);
        text-align: center;
        gap: min(34px, 6.3vw);
        background: #c1b4a2;
    }

    .blogcapa-grid .bemavi-newsletter label {
        width: min(255px, 47.22vw);
        max-width: none;
        font-size: min(26px, 4.82vw);
        line-height: min(36px, 6.67vw);
    }

    .blogcapa-grid .bemavi-newsletter input {
        width: min(366px, 67.78vw);
        max-width: 100%;
        text-align: center;
        font-size: min(20px, 3.71vw);
        line-height: min(34px, 6.37vw);
        letter-spacing: min(2px, 0.37vw);
    }

    .blogcapa-grid .bemavi-newsletter button {
        width: min(290px, 53.7vw);
        min-height: min(70px, 12.96vw);
        margin-top: min(28px, 5.19vw);
        font-size: min(16px, 2.96vw);
        letter-spacing: min(1.6px, 0.3vw);
    }

    .blogcapa-more {
        margin: min(58px, 10.74vw) auto min(76px, 14.07vw);
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE POST DO BLOG (<=767px) — Figma node 695-731.
   Reusa o banner mobile da capa do blog e mantém conteúdo/admin dinâmico.
   ============================================================ */
@media only screen and (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.page-post.bemavi-emp-page {
        --post-mobile-text: min(368px, 68.15vw);
        --post-mobile-text-left: calc((100vw - var(--post-mobile-text)) / 2);
        --post-mobile-card: min(476px, 88.15vw);
        --post-mobile-card-left: calc((100vw - var(--post-mobile-card)) / 2);
        --post-mobile-edge: min(32px, 5.93vw);
        --post-container: var(--post-mobile-text);
    }

    body.page-post .bemavi-menu-trigger {
        top: 30px;
        right: var(--bemavi-mobile-gutter, 6vw);
        gap: 12px;
        font-size: 14px;
        letter-spacing: 0.28em;
    }

    body.page-post .post-hero {
        display: block;
        min-height: min(960px, 177.78vw);
        overflow: visible;
    }

    body.page-post .post-hero-bg,
    body.page-post .post-hero-bg picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    body.page-post .post-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    body.page-post .post-hero-shade {
        background: linear-gradient(180deg, rgba(39, 31, 29, 0.90) 0%, rgba(39, 31, 29, 0.50) 100%);
    }

    body.page-post .post-hero-logo {
        top: min(148px, 27.41vw);
        left: calc(50% - min(115px, 21.3vw));
        width: min(145px, 26.85vw);
        filter: brightness(0) invert(1);
    }

    body.page-post .post-hero-inner {
        position: relative;
        display: block;
        width: 100%;
        height: min(960px, 177.78vw);
        margin: 0;
        padding: 0;
    }

    body.page-post .post-hero-line {
        display: block;
        top: min(63px, 11.67vw);
        left: min(63px, 11.67vw);
        width: 2px;
        height: min(196px, 36.3vw);
    }

    body.page-post .post-hero-kicker {
        position: absolute;
        top: min(226px, 41.85vw);
        left: calc(50% - min(115px, 21.3vw));
        margin: 0;
        font-size: min(30px, 5.56vw);
        line-height: min(44px, 8.15vw);
        letter-spacing: min(9px, 1.67vw);
        white-space: nowrap;
    }

    body.page-post .post-hero-meta {
        position: absolute;
        top: min(416px, 77.04vw);
        left: min(62px, 11.48vw);
        width: calc(100vw - min(124px, 22.96vw));
        max-width: none;
        margin: 0;
        gap: 18px;
        font-size: min(20px, 3.7vw);
        line-height: min(50px, 9.26vw);
        letter-spacing: min(3px, 0.56vw);
    }

    body.page-post .post-hero-title {
        position: absolute;
        top: min(488px, 90.37vw);
        left: min(62px, 11.48vw);
        width: min(394px, 72.96vw);
        max-width: none;
        margin: 0;
        font-size: min(27px, 5vw);
        line-height: min(36px, 6.67vw);
    }

    body.page-post .post-hero-figure {
        position: absolute;
        top: min(677px, 125.37vw);
        left: var(--post-mobile-edge);
        right: auto;
        bottom: auto;
        width: calc(100vw - var(--post-mobile-edge));
        aspect-ratio: 508 / 410;
        margin: 0;
    }

    body.page-post .post-hero-figure img {
        object-fit: cover;
    }

    body.page-post .post-article {
        padding: min(217px, 40.19vw) 0 min(120px, 22.22vw);
    }

    body.page-post .post-article::before {
        top: max(-4px, -0.74vw);
        height: min(248px, 45.93vw);
        background: linear-gradient(180deg, #a38f81 0%, rgba(209, 206, 201, 0) 100%);
    }

    body.page-post .post-article-inner {
        width: var(--post-mobile-text);
        margin: 0 auto;
        padding: 0;
    }

    body.page-post .post-lead {
        width: 100%;
        max-width: none;
        margin: 0 0 min(92px, 17.04vw);
        color: var(--bemavi-text);
        font-size: min(22px, 4.07vw);
        line-height: min(32px, 5.93vw);
    }

    body.page-post .post-columns {
        display: block;
    }

    body.page-post .post-prose {
        width: 100%;
        color: var(--bemavi-text);
        font-size: min(19px, 3.52vw);
        line-height: min(28px, 5.19vw);
    }

    body.page-post .post-prose p {
        margin: 0 0 min(30px, 5.56vw);
    }

    body.page-post .post-prose h2,
    body.page-post .post-prose h3 {
        margin: min(44px, 8.15vw) 0 min(22px, 4.07vw);
        font-size: min(24px, 4.44vw);
        line-height: min(34px, 6.3vw);
    }

    body.page-post .post-cats {
        display: none;
    }

    body.page-post .post-gallery {
        width: var(--post-mobile-card);
        margin: min(100px, 18.52vw) auto 0;
        margin-left: calc((var(--post-mobile-card) - var(--post-mobile-text)) / -2);
        align-items: center;
    }

    body.page-post .post-gallery-arrow {
        width: min(29px, 5.37vw);
        height: min(29px, 5.37vw);
    }

    body.page-post .post-gallery-prev {
        margin-right: min(22px, 4.07vw);
    }

    body.page-post .post-gallery-next {
        margin-left: min(22px, 4.07vw);
    }

    body.page-post .post-gallery-track {
        flex: 0 0 min(374px, 69.26vw);
        gap: min(22px, 4.07vw);
        max-width: none;
    }

    body.page-post .post-gallery-item {
        flex: 0 0 min(110px, 20.37vw);
        width: min(110px, 20.37vw);
        height: min(110px, 20.37vw);
    }

    body.page-post .post-actions {
        flex-direction: column;
        align-items: center;
        gap: min(42px, 7.78vw);
        margin-top: min(50px, 9.26vw);
    }

    body.page-post .post-back {
        align-items: flex-start;
        gap: min(10px, 1.85vw);
        font-size: min(16px, 2.96vw);
        line-height: min(24px, 4.44vw);
        letter-spacing: min(1.6px, 0.3vw);
    }

    body.page-post .post-back img {
        margin-top: min(3px, 0.56vw);
    }

    body.page-post .post-back span {
        padding-bottom: min(18px, 3.33vw);
        border-bottom-width: 2px;
    }

    body.page-post .post-share {
        display: grid;
        grid-template-columns: repeat(4, min-content);
        justify-content: center;
        gap: min(26px, 4.81vw) min(36px, 6.67vw);
    }

    body.page-post .post-share-label {
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
        font-size: min(16px, 2.96vw);
        line-height: min(24px, 4.44vw);
        letter-spacing: min(1.6px, 0.3vw);
    }

    body.page-post .post-share a {
        width: min(30px, 5.56vw);
        height: min(30px, 5.56vw);
    }

    body.page-post .post-related {
        padding: min(63px, 11.67vw) 0 0;
    }

    body.page-post .post-related::before {
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: var(--bemavi-taupe);
        transform: none;
    }

    body.page-post .post-related .bemavi-container {
        width: var(--post-mobile-card);
    }

    body.page-post .post-related .bemavi-blog-grid {
        display: flex;
        gap: min(16px, 2.96vw);
        width: calc(100vw - var(--post-mobile-card-left));
        margin-right: calc(-1 * var(--post-mobile-card-left));
        padding-right: var(--post-mobile-card-left);
        box-sizing: border-box;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.page-post .post-related .bemavi-blog-grid::-webkit-scrollbar {
        display: none;
    }

    body.page-post .post-related .bemavi-blog-card {
        position: relative;
        display: block;
        flex: 0 0 min(440px, 81.48vw);
        scroll-snap-align: start;
    }

    body.page-post .post-related .bemavi-blog-media {
        position: relative;
        display: block;
        aspect-ratio: 440 / 350;
        overflow: hidden;
    }

    body.page-post .post-related .bemavi-blog-media::before {
        content: none;
    }

    body.page-post .post-related .bemavi-blog-media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(41, 38, 35, 0) 47%, rgba(41, 38, 35, 0.88) 100%);
        pointer-events: none;
    }

    body.page-post .post-related .bemavi-blog-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.page-post .post-related .bemavi-blog-card > span {
        position: relative;
        z-index: 2;
        display: block;
        margin: max(-50px, -9.26vw) 0 0 min(32px, 5.93vw);
        color: var(--bemavi-taupe);
        font-size: min(16px, 2.96vw);
        line-height: min(32px, 5.93vw);
        letter-spacing: min(2.4px, 0.44vw);
    }

    body.page-post .post-related .bemavi-blog-card h3 {
        width: min(341px, 63.15vw);
        min-height: 0;
        margin: min(46px, 8.52vw) 0 0 min(30px, 5.56vw);
        font-size: min(27px, 5vw);
        line-height: min(36px, 6.67vw);
        font-weight: 300;
    }

    body.page-post .post-related .bemavi-read-more {
        margin: min(27px, 5vw) 0 0 min(50px, 9.26vw);
        font-size: min(20px, 3.7vw);
        line-height: min(51px, 9.44vw);
    }

    body.page-post .post-related .bemavi-read-more::before {
        top: 0;
        height: min(51px, 9.44vw);
    }

    body.page-post .post-related .bemavi-all-posts {
        display: none;
    }

    body.page-post .post-related .bemavi-newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-template-columns: none;
        width: 100%;
        min-height: min(470px, 87.04vw);
        box-sizing: border-box;
        margin-top: min(92px, 17.04vw);
        padding: min(55px, 10.19vw) min(32px, 5.93vw) min(72px, 13.33vw);
        text-align: center;
        gap: min(34px, 6.3vw);
        background: #c1b4a2;
    }

    body.page-post .post-related .bemavi-newsletter label {
        width: min(255px, 47.22vw);
        max-width: none;
        font-size: min(26px, 4.82vw);
        line-height: min(36px, 6.67vw);
    }

    body.page-post .post-related .bemavi-newsletter input {
        width: min(366px, 67.78vw);
        max-width: 100%;
        text-align: center;
        font-size: min(20px, 3.71vw);
        line-height: min(34px, 6.37vw);
        letter-spacing: min(2px, 0.37vw);
    }

    body.page-post .post-related .bemavi-newsletter button {
        width: min(290px, 53.7vw);
        min-height: min(70px, 12.96vw);
        margin-top: min(28px, 5.19vw);
        font-size: min(16px, 2.96vw);
        letter-spacing: min(1.6px, 0.3vw);
    }
}

/* ==========================================================================
   TABLET EM PE (769-1024 retrato) — mantem a imagem do destaque ABSOLUTA (como
   era, sangrando da direita sobre o hero), so DIMINUI para o rodape dela nao
   alcancar o texto abaixo. (Ajustavel: menor = mais longe do texto.)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .blogcapa-featured-figure {
        left: auto;
        width: 540px;
    }

    /* No tablet em pé a imagem da capa do post herdava o tamanho do mobile
       (width: calc(100vw - 32px) ≈ 992px a 1024px), ficando enorme e vazando
       para baixo do hero por cima do título e do texto do post. Reduz para
       uma largura fixa proporcional ao tablet, mantendo o sangramento à
       direita sem alcançar o conteúdo do artigo. */
    body.page-post .post-hero-figure {
        width: min(476px, 60vw);
    }
}