/* ===================================
   POST PAGE
   It! Wheel - Página Matéria / Post
   =================================== */

/* Override old project body background */
body {
    background-color: #EEF7F8 !important;
}

/* Ensure gradient wrapper stacks above post-body-section
   so the astronaut is not covered */
.blog-gradient-wrapper {
    z-index: 2;
}


/* =============================================
   GRADIENT BACKGROUND WRAPPER
   (Reuses blog-gradient-wrapper, blog-nuvens,
    blog-banner, blog-ingresso from blog.css)
   ============================================= */


/* =============================================
   POST CONTENT — Category + Title + Hero
   ============================================= */
.post-content-top {
    position: relative;
    z-index: 4;
    padding: 120px 0 0;
}

@media only screen and (min-width: 1025px) {
    .post-content-top .wrap.wide {
        width: 1280px !important;
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Category + Title block */
.post-header {
    max-width: 800px;
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-right: 580px;
}

.post-header-cat {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #EC6608;
}

.post-header-title {
    font-family: 'Exo', sans-serif !important;
    font-weight: 500;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: 0;
    color: #279BB1;
    margin: 0;
    text-transform: none;
}


/* =============================================
   POST HERO — Astronaut + Image + Categories Box
   ============================================= */
.post-hero {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

/* Astronaut — reuses blog astronaut positioning */
.post-astronauta {
    position: absolute;
    top: -40px;
    left: -220px;
    width: 350px;
    z-index: 10;
    pointer-events: none;
}

/* Keep hero image below astronaut */
.post-hero > a[data-fancybox] {
    position: relative;
    z-index: 1;
}
.post-astronauta-img {
    width: 100%;
    height: auto;
    display: block;
    animation: astronaut-bob 3s ease-in-out infinite;
}

/* Main image */
.post-hero-figure {
    flex: 0 0 800px;
    width: 800px;
    height: 430px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
}
.post-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Categories box */
.post-categorias-box {
    flex: 0 0 416px;
    width: 416px;
    position: relative;
    padding: 40px 35px 45px;
    background-image: url('../img/blog/box.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 430px;
    display: flex;
    flex-direction: column;
}

.post-categorias-titulo {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 46px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6FDAEF;
    margin: 0 0 5px;
}

.post-categorias-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-categorias-list a {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 57px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.post-categorias-list a:hover {
    color: #6FDAEF;
}


/* =============================================
   POST BODY — Article content
   ============================================= */
.post-body-section {
    position: relative;
    z-index: 1;
    padding: 60px 0 80px;
    background: #EEF7F8;
}

.post-body-wrap {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

/* Date, reading time, category row */
.post-meta {
    max-width: 800px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.post-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Exo', sans-serif;
    font-size: 14px;
    color: #858585;
}
.post-meta-item img,
.post-meta-item svg {
    width: 18px;
    height: 18px;
}
.post-meta-cat {
    margin-left: auto;
}
.post-meta-cat .box-categoria {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    display: inline-block;
}

/* Article content */
.post-conteudo {
    max-width: 700px;
    line-height: 1.8;
    color: #858585;
    margin-bottom: 60px;
    position: relative;
    margin-left: 50px;
}

/* Astronauta direita — positioned absolutely so it doesn't affect text flow */
.post-astronauta-direita {
    position: absolute;
    right: -300px;
    bottom: -100px;
    width: 180px;
    pointer-events: none;
}
.post-astronauta-direita img {
    width: 100%;
    height: auto;
    display: block;
    animation: astronaut-bob 3s ease-in-out infinite;
}
.post-conteudo p,
.post-conteudo ul {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0;
}
.post-conteudo img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}
.post-conteudo ul {
    list-style: disc;
    padding-left: 35px;
}
.post-conteudo a {
    color: #279BB1;
    font-weight: bold;
}
.post-conteudo h2 {
    font-size: 2.8em;
    color: #279BB1;
    margin-bottom: 20px;
}
.post-conteudo h3 {
    color: #858585;
    margin-bottom: 20px;
}
.post-conteudo iframe {
    height: 446px;
    width: 100%;
}


/* =============================================
   SHARE + GALLERY
   ============================================= */
.post-share-row {
    max-width: 800px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
    margin-left: 50px;
}
.post-share-label {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: #EC6608;
    text-transform: uppercase;
}

.post-share-row .share-post {
    display: flex;
    align-items: center;
    gap: 18px;
}
.post-share-row .share-post a {
    color: #EC6608;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
.post-share-row .share-post a:hover {
    opacity: 0.7;
}
.post-share-row .share-post a i {
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
}
.post-share-row .share-post a svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.post-share-row .share-post a svg path {
    fill: #EC6608;
    transition: opacity 0.4s ease;
}

/* Gallery Carousel */
.post-galeria-carousel {
    max-width: 812px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 30px -10px;
    position: relative;
}

.post-galeria-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    
}
.post-galeria-arrow img {
    width: 100%;
    height: auto;
}
.post-galeria-arrow:hover {
    opacity: 0.7;
}

.post-galeria-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    max-width: 700px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.post-galeria-track::-webkit-scrollbar {
    display: none;
}

.post-galeria-item {
    flex: 0 0 163px;
    min-width: 163px;
    width: 163px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: block;
}
.post-galeria-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(305.41deg, #3D3A3A 0%, rgba(255, 255, 255, 0) 29.57%);
    pointer-events: none;
}
.post-galeria-item img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply;
    border-radius: 10px;
    transition: filter 0.4s ease;
}
.post-galeria-item:hover img:first-child {
    filter: brightness(0.85);
}

.post-galeria-zoom {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.post-galeria-zoom img {
    width: 14px;
    height: 14px;
    display: block;
}


/* =============================================
   OUTRAS NOTÍCIAS
   ============================================= */
.post-outras-noticias {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #EC6608;
    margin:  -30px -60px 60px;
    margin-left: 155px;
}


/* =============================================
   RELATED POSTS
   ============================================= */
.post-relacionados {
    padding: 30px 0 0px;
    background: #EEF7F8;
}

.post-relacionados-title {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #279BB1;
    text-align: center;
    margin: 0 0 50px;
}
.post-relacionados-title strong {
    font-weight: 700;
}

.post-relacionados-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
    max-width: 1280px;
    margin: 0 auto;
}

/* Mobile-only elements — hidden on desktop */
.post-astronauta-direita-mobile {
    display: none;
}
.post-categorias-box--mobile {
    display: none;
}


/* =============================================
   RESPONSIVE — NOTEBOOK (≤1440px)
   Escala 0.75 (1440 / 1920)
   ============================================= */
@media only screen and (max-width: 1440px) {

    /* --- Post Content Top --- */
    .post-content-top {
        padding: 90px 0 0;
    }
    .post-content-top .wrap.wide {
        width: 960px !important;
        max-width: 960px;
        margin: 0 auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* --- Post Header (categoria + título) --- */
    .post-header {
        max-width: 600px;
        margin-right: 435px;
        margin-bottom: 45px;
        gap: 9px;
    }
    .post-header-cat {
        font-size: 18px;
    }
    .post-header-title {
        font-size: 26px;
    }

    /* --- Post Hero (astronauta + imagem + categorias box) --- */
    .post-hero {
        gap: 38px;
        max-width: 960px;
    }
    .post-astronauta {
        width: 263px;
        top: -30px;
        left: -165px;
    }
    .post-hero-figure {
        flex: 0 0 600px;
        width: 600px;
        height: 323px;
        border-radius: 15px;
    }
    .post-categorias-box {
        flex: 0 0 312px;
        width: 312px;
        padding: 30px 26px 34px;
        min-height: 323px;
    }
    .post-categorias-titulo {
        font-size: 14px;
        line-height: 35px;
    }
    .post-categorias-list a {
        font-size: 14px;
        line-height: 43px;
    }

    /* --- Post Body --- */
    .post-body-section {
        padding: 45px 0 60px;
    }
    .post-body-wrap {
        max-width: 960px;
    }

    /* --- Post Meta --- */
    .post-meta {
        max-width: 600px;
        gap: 19px;
        margin-bottom: 23px;
    }
    .post-meta-item {
        font-size: 12px;
        gap: 6px;
    }
    .post-meta-item img,
    .post-meta-item svg {
        width: 14px;
        height: 14px;
    }

    /* --- Post Conteúdo --- */
    .post-conteudo {
        max-width: 525px;
        margin-bottom: 45px;
        margin-left: 38px;
    }
    .post-conteudo p,
    .post-conteudo ul {
        font-size: 14px;
        line-height: 23px;
    }
    .post-conteudo h2 {
        font-size: 2.1em;
        margin-bottom: 15px;
    }
    .post-conteudo h3 {
        margin-bottom: 15px;
    }
    .post-conteudo img {
        border-radius: 6px;
    }
    .post-conteudo iframe {
        height: 335px;
    }
    .post-conteudo ul {
        padding-left: 26px;
    }

    /* --- Astronauta Direita --- */
    .post-astronauta-direita {
        width: 135px;
        right: -225px;
        bottom: -75px;
    }

    /* --- Compartilhar --- */
    .post-share-row {
        max-width: 600px;
        gap: 15px;
        padding: 23px 0;
        margin-left: 38px;
    }
    .post-share-label {
        font-size: 14px;
    }
    .post-share-row .share-post {
        gap: 14px;
    }
    .post-share-row .share-post a {
        font-size: 17px;
    }
    .post-share-row .share-post a i {
        font-size: 17px;
    }
    .post-share-row .share-post a svg {
        width: 15px;
        height: 15px;
    }

    /* --- Galeria Carousel --- */
    .post-galeria-carousel {
        max-width: 610px;
        gap: 12px;
        margin: 0 0 23px -8px;
    }
    .post-galeria-arrow {
        width: 30px;
        height: 30px;
    }
    .post-galeria-track {
        gap: 12px;
        max-width: 525px;
    }
    .post-galeria-item {
        flex: 0 0 122px;
        min-width: 122px;
        width: 122px;
        height: 66px;
        border-radius: 8px;
    }
    .post-galeria-item::after {
        border-radius: 8px;
    }
    .post-galeria-item img:first-child {
        border-radius: 8px;
    }
    .post-galeria-zoom {
        bottom: 6px;
        right: 6px;
        width: 11px;
        height: 11px;
    }
    .post-galeria-zoom img {
        width: 11px;
        height: 11px;
    }

    /* --- Outras Notícias --- */
    .post-outras-noticias {
        font-size: 30px;
        margin: -23px -45px 45px;
        margin-left: 166px;
    }

    /* --- Relacionados --- */
    .post-relacionados {
        padding: 23px 0 0;
    }
    .post-relacionados-title {
        font-size: 21px;
        margin: 0 0 38px;
    }
    .post-relacionados-grid {
        gap: 12px;
        max-width: 910px;
    }
}


    /* =====================================================================
       RESPONSIVIDADE FLUIDA · 1280 → 1920 (topo do post)
       ---------------------------------------------------------------------
       Interpola o wrapper, header e hero juntos para manter categoria,
       título e imagem usando a mesma referência visual no intervalo.
       ===================================================================== */
    @media only screen and (min-width: 1281px) and (max-width: 1920px) {

        .post-content-top {
            padding-top: clamp(90px, calc(90px + (100vw - 1280px) * 0.046875), 120px);
        }
        .post-content-top .wrap.wide {
            width: clamp(960px, calc(960px + (100vw - 1280px) * 0.5), 1280px) !important;
            max-width: clamp(960px, calc(960px + (100vw - 1280px) * 0.5), 1280px);
            margin: 0 auto;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .post-header {
            margin-right: clamp(435px, calc(435px + (100vw - 1280px) * 0.226563), 580px);
            margin-bottom: clamp(45px, calc(45px + (100vw - 1280px) * 0.023438), 60px);
            gap: clamp(9px, calc(9px + (100vw - 1280px) * 0.004688), 12px);
        }

        .post-header-cat {
            font-size: clamp(18px, calc(18px + (100vw - 1280px) * 0.009375), 24px);
        }

        .post-header-title {
            font-size: clamp(26px, calc(26px + (100vw - 1280px) * 0.014063), 35px);
        }

        .post-hero {
            gap: clamp(38px, calc(38px + (100vw - 1280px) * 0.01875), 50px);
            max-width: clamp(960px, calc(960px + (100vw - 1280px) * 0.5), 1280px);
        }

        .post-astronauta {
            width: clamp(263px, calc(263px + (100vw - 1280px) * 0.135938), 350px);
            top: clamp(-40px, calc(-30px - (100vw - 1280px) * 0.015625), -30px);
            left: clamp(-220px, calc(-165px - (100vw - 1280px) * 0.085938), -165px);
        }

        .post-hero-figure {
            flex-basis: clamp(600px, calc(600px + (100vw - 1280px) * 0.3125), 800px);
            width: clamp(600px, calc(600px + (100vw - 1280px) * 0.3125), 800px);
            height: clamp(323px, calc(323px + (100vw - 1280px) * 0.167188), 430px);
            border-radius: clamp(15px, calc(15px + (100vw - 1280px) * 0.007813), 20px);
        }

        .post-categorias-box {
            flex-basis: clamp(312px, calc(312px + (100vw - 1280px) * 0.1625), 416px);
            width: clamp(312px, calc(312px + (100vw - 1280px) * 0.1625), 416px);
            padding: clamp(30px, calc(30px + (100vw - 1280px) * 0.015625), 40px)
                clamp(26px, calc(26px + (100vw - 1280px) * 0.014063), 35px)
                clamp(34px, calc(34px + (100vw - 1280px) * 0.017188), 45px);
            min-height: clamp(323px, calc(323px + (100vw - 1280px) * 0.167188), 430px);
        }

        .post-categorias-titulo {
            font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.00625), 18px);
            line-height: clamp(35px, calc(35px + (100vw - 1280px) * 0.017188), 46px);
        }

        .post-categorias-list a {
            font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.00625), 18px);
            line-height: clamp(43px, calc(43px + (100vw - 1280px) * 0.021875), 57px);
        }
    }


/* =============================================
   RESPONSIVE — TABLET (≤1024px)
   Escala: 1024/1440 ≈ 0.711 (do notebook)
   ============================================= */
@media only screen and (max-width: 1024px) {
    /* Override old project body background */
    body {
        background-color: #EEF7F8 !important;
    }
 
    .blog-gradient-wrapper {
        z-index: 2;
    }
 
 
    /* =============================================
       POST CONTENT — Category + Title + Hero
       ============================================= */
    .post-content-top {
        position: relative;
        z-index: 4;
        padding: 64px 0 0; /* 120px × 0.533 */
    }
 
    /* Category + Title block */
    .post-header {
        max-width: 426px;   /* 800px × 0.533 */
        margin: 0 auto 32px; /* 60px × 0.533 */
        display: flex;
        flex-direction: column;
        gap: 6px;           /* 12px × 0.533 */
        margin-right: 379px; /* 580px × 0.533 */
    }
 
    .post-header-cat {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        font-size: 13px;   /* 24px × 0.533 */
        line-height: 120%;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #EC6608;
        margin-bottom: 5px;
    }
 
    .post-header-title {
        font-family: 'Exo', sans-serif !important;
        font-weight: 500;
        font-size: 19px;   /* 35px × 0.533 */
        line-height: 120%;
        letter-spacing: 0;
        color: #279BB1;
        margin: 0;
        text-transform: none;
    }
 
 
    /* =============================================
       POST HERO — Astronaut + Image + Categories Box
       ============================================= */
    .post-hero {
        display: flex;
        align-items: flex-start;
        gap: 27px;          /* 50px × 0.533 */
        max-width: 682px;   /* 1280px × 0.533 */
        margin: 0 auto;
        position: relative;
    }
 
    /* Astronaut */
    .post-astronauta {
        position: absolute;
        top: -21px;   /* -40px × 0.533 */
        left: -117px; /* -220px × 0.533 */
        width: 187px; /* 350px × 0.533 */
        z-index: 10;
        pointer-events: none;
    }
 
    .post-hero > a[data-fancybox] {
        position: relative;
        z-index: 1;
    }
    .post-astronauta-img {
        width: 100%;
        height: auto;
        display: block;
        animation: astronaut-bob 3s ease-in-out infinite;
    }
 
    /* Main image */
    .post-hero-figure {
        flex: 0 0 426px; /* 800px × 0.533 */
        width: 426px;
        height: 229px;   /* 430px × 0.533 */
        border-radius: 11px; /* 20px × 0.533 */
        overflow: hidden;
        margin: 0;
        margin-right: 20px;
    }
    .post-hero-figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
 
    /* Categories box */
    .post-categorias-box {
        flex: 0 0 222px;   /* 416px × 0.533 */
        width: 222px;
        position: relative;
        padding: 21px 19px 24px; /* 40px 35px 45px × 0.533 */
        background-image: url('../img/blog/box.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        min-height: 229px; /* 430px × 0.533 */
        display: flex;
        flex-direction: column;
    }
 
    .post-categorias-titulo {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 700;
        font-size: 10px;   /* 18px × 0.533 */
        line-height: 25px; /* 46px × 0.533 */
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #6FDAEF;
        margin: 0 0 3px;   /* 5px × 0.533 */
    }
 
    .post-categorias-list {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }
 
    .post-categorias-list a {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        font-size: 10px;   /* 18px × 0.533 */
        line-height: 30px; /* 57px × 0.533 */
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .post-categorias-list a:hover {
        color: #6FDAEF;
    }
 
 
    /* =============================================
       POST BODY — Article content
       ============================================= */
    .post-body-section {
        position: relative;
        z-index: 1;
        padding: 32px 0 43px; /* 60px 0 80px × 0.533 */
        background: #EEF7F8;
    }
 
    .post-body-wrap {
        max-width: 682px; /* 1280px × 0.533 */
        margin: 0 auto;
        position: relative;
    }
 
    /* Date, reading time, category row */
    .post-meta {
        max-width: 426px;  /* 800px × 0.533 */
        display: flex;
        align-items: center;
        gap: 13px;         /* 25px × 0.533 */
        margin-bottom: 16px; /* 30px × 0.533 */
        flex-wrap: wrap;
    }
    .post-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;          /* 8px × 0.533 */
        font-family: 'Exo', sans-serif;
        font-size: 7px;    /* 14px × 0.533 */
        color: #858585;
    }
    .post-meta-item img,
    .post-meta-item svg {
        width: 10px;       /* 18px × 0.533 */
        height: 10px;
    }
    .post-meta-cat {
        margin-left: auto;
    }
    .post-meta-cat .box-categoria {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        display: inline-block;
    }
 
    /* Article content */
    .post-conteudo {
        max-width: 373px;  /* 700px × 0.533 */
        line-height: 1.8;
        color: #858585;
        margin-bottom: 32px; /* 60px × 0.533 */
        position: relative;
        margin-left: 27px;   /* 50px × 0.533 */
    }
 
    /* Astronauta direita */
    .post-astronauta-direita {
        position: absolute;
        right: -160px;   /* -300px × 0.533 */
        bottom: -53px;   /* -100px × 0.533 */
        width: 96px;     /* 180px × 0.533 */
        pointer-events: none;
    }
    .post-astronauta-direita img {
        width: 100%;
        height: auto;
        display: block;
        animation: astronaut-bob 3s ease-in-out infinite;
    }
 
    .post-conteudo p,
    .post-conteudo ul {
        font-family: 'Exo', sans-serif;
        font-weight: 400;
        font-size: 11px;    /* 16px × 0.533 */
        line-height: 16px; /* 30px × 0.533 */
        letter-spacing: 0;
    }
    .post-conteudo img {
        border-radius: 4px; /* 8px × 0.533 */
        max-width: 100%;
        height: auto;
    }
    .post-conteudo ul {
        list-style: disc;
        padding-left: 19px; /* 35px × 0.533 */
    }
    .post-conteudo a {
        color: #279BB1;
        font-weight: bold;
    }
    .post-conteudo h2 {
        font-size: 2.8em;
        color: #279BB1;
        margin-bottom: 11px; /* 20px × 0.533 */
    }
    .post-conteudo h3 {
        color: #858585;
        margin-bottom: 11px;
    }
    .post-conteudo iframe {
        height: 238px;     /* 446px × 0.533 */
        width: 100%;
    }
 
 
    /* =============================================
       SHARE + GALLERY
       ============================================= */
    .post-share-row {
        max-width: 426px;  /* 800px × 0.533 */
        display: flex;
        align-items: center;
        gap: 11px;         /* 20px × 0.533 */
        padding: 16px 0;   /* 30px × 0.533 */
        margin-left: 27px; /* 50px × 0.533 */
    }
    .post-share-label {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        font-size: 10px;   /* 18px × 0.533 */
        line-height: 100%;
        letter-spacing: 0.05em;
        vertical-align: middle;
        color: #EC6608;
        text-transform: uppercase;
    }
 
    .post-share-row .share-post {
        display: flex;
        align-items: center;
        gap: 10px;         /* 18px × 0.533 */
    }
    .post-share-row .share-post a {
        color: #EC6608;
        font-size: 12px;   /* 22px × 0.533 */
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
    }
    .post-share-row .share-post a:hover {
        opacity: 0.7;
    }
    .post-share-row .share-post a i {
        font-size: 12px;
        line-height: 1;
        vertical-align: middle;
    }
    .post-share-row .share-post a svg {
        width: 11px;       /* 20px × 0.533 */
        height: 11px;
        vertical-align: middle;
    }
    .post-share-row .share-post a svg path {
        fill: #EC6608;
        transition: opacity 0.4s ease;
    }
 
    /* Gallery Carousel */
    .post-galeria-carousel {
        max-width: 433px;  /* 812px × 0.533 */
        display: flex;
        align-items: center;
        gap: 9px;          /* 16px × 0.533 */
        margin: 0 0 16px -5px; /* 0 0 30px -10px × 0.533 */
        position: relative;
    }
 
    .post-galeria-arrow {
        flex-shrink: 0;
        width: 21px;       /* 40px × 0.533 */
        height: 21px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
       
    }
    .post-galeria-arrow img {
        width: 100%;
        height: auto;
        
    }
    .post-galeria-arrow:hover {
        opacity: 0.7;
    }
 
    .post-galeria-track {
        display: flex;
        gap: 9px;          /* 16px × 0.533 */
        overflow-x: auto;
        overflow-y: hidden;
        flex: 1;
        max-width: 373px;  /* 700px × 0.533 */
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .post-galeria-track::-webkit-scrollbar {
        display: none;
    }
 
    .post-galeria-item {
        flex: 0 0 87px;    /* 163px × 0.533 */
        min-width: 87px;
        width: 87px;
        height: 47px;      /* 88px × 0.533 */
        border-radius: 5px; /* 10px × 0.533 */
        overflow: hidden;
        position: relative;
        display: block;
        margin-right: 4px !important;
        margin-left: 3px;
    }
    .post-galeria-item::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 5px;
        background: linear-gradient(305.41deg, #3D3A3A 0%, rgba(255, 255, 255, 0) 29.57%);
        pointer-events: none;
    }
    .post-galeria-item img:first-child {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        mix-blend-mode: multiply;
        border-radius: 5px;
        transition: filter 0.4s ease;
    }
    .post-galeria-item:hover img:first-child {
        filter: brightness(0.85);
    }
 
    .post-galeria-zoom {
        position: absolute;
        bottom: 4px;       /* 8px × 0.533 */
        right: 4px;
        width: 7px;        /* 14px × 0.533 */
        height: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 2;
    }
    .post-galeria-zoom img {
        width: 7px;
        height: 7px;
        display: block;
    }
 
 
    /* =============================================
       OUTRAS NOTÍCIAS
       ============================================= */
    .post-outras-noticias {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        font-size: 21px;    /* 40px × 0.533 */
        line-height: 100%;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #EC6608;
        margin: -16px -32px 32px; /* -30px -60px 60px × 0.533 */
        margin-left: 83px;        /* 155px × 0.533 */
    }
 
 
    /* =============================================
       RELATED POSTS
       ============================================= */
    .post-relacionados {
        padding: 16px 0 0; /* 30px × 0.533 */
        background: #EEF7F8;
    }
 
    .post-relacionados-title {
        font-family: 'Exo', sans-serif;
        font-weight: 400;
        font-size: 15px;   /* 28px × 0.533 */
        color: #279BB1;
        text-align: center;
        margin: 0 0 27px;  /* 50px × 0.533 */
    }
    .post-relacionados-title strong {
        font-weight: 700;
    }
 
    .post-relacionados-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;          /* 16px × 0.533 */
        justify-content: flex-start;
        max-width: 682px;  /* 1280px × 0.533 */
        margin: 0 auto;
    }
  
}


/* =============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================= */
@media only screen and (max-width: 768px) {
    body:not(.is-home) {
        --post-mobile-text-box-inset: clamp(22px, 5.641vw, 26px);
        --post-mobile-text-box-width: calc(var(--home-mobile-content-width) - (var(--post-mobile-text-box-inset) * 2));
        --post-mobile-card-gap: clamp(12px, 2.963vw, 16px);
        --post-mobile-blog-card-width: clamp(300.444px, 77.037vw, 416px);
        --post-mobile-blog-body-width: calc(var(--post-mobile-blog-card-width) - clamp(24px, 6.1111vw, 34px));
        --post-mobile-blog-btn-width: clamp(132.889px, 34.0741vw, 184px);
        --post-mobile-blog-btn-height: clamp(33.944px, 8.7037vw, 47px);
        --post-mobile-blog-cat-size: clamp(14.444px, 3.7037vw, 20px);
        --post-mobile-blog-title-size: clamp(15.889px, 4.0741vw, 22px);
        --post-mobile-blog-btn-font-size: clamp(11.556px, 2.963vw, 16px);
    }

    /* Override blog.css 710px banner — post page uses 430px */
    .blog-banner {
        min-height: 430px;
    }
    .blog-banner-img {
        height: 430px;
        object-position: center top;
    }

    /* Match the blog cloud layout after shortening the post banner by 280px. */
    .blog-nuvens .nuvem1 {
        top: 340px;
    }
    .blog-nuvens .nuvem2 {
        top: 370px;
    }
    .blog-nuvens .nuvem3 {
        top: 270px;
    }

    .post-content-top .wrap,
    .post-body-section .wrap,
    .post-relacionados .wrap {
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
        padding-left: var(--home-mobile-side-gap) !important;
        padding-right: var(--home-mobile-side-gap) !important;
        box-sizing: border-box;
    }


    /* =============================================
       POST CONTENT TOP
       ============================================= */
    .post-content-top {
        padding: 150px 0 32px;
    }

    /* Category + Title block */
    .post-header {
        position: relative;
        width: 100%;
        max-width: var(--home-mobile-content-width);
        padding: 0;
        margin: 0 auto 20px;
        margin-right: 0;
        gap: 8px;
        z-index: 2;
    }

    .post-header-cat {
        font-size: 18px;
        display: block;
        width: var(--post-mobile-text-box-width);
        max-width: var(--post-mobile-text-box-width);
        padding-right: 144px; /* room for astronaut */
        margin-left: var(--post-mobile-text-box-inset);
    }

    /* Title hidden on mobile — only cat + image visible */
    .post-header-title {
        display: none;
    }

    /* Astronauta-direita mobile — shown beside category */
    .post-astronauta-direita-mobile {
        display: block;
        position: absolute;
        top: -58px;
        right: 24px;
        width: 100px;
        margin-right: 0;
        height: 128px;
        pointer-events: none;
        z-index: 12;
    }
    .post-astronauta-direita-mobile img {
        width: 120px;
        height: 148px;
        object-fit: contain;
        display: block;
        animation: astronaut-bob 3s ease-in-out infinite;
        
    }


    /* =============================================
       POST HERO
       ============================================= */
    .post-hero {
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: var(--home-mobile-content-width);
        padding: 0;
        margin: 0 auto;
    }

    /* Hide desktop floating astronaut */
    .post-astronauta {
        display: none;
    }

    /* Hero image — full width */
    .post-hero > a[data-fancybox] {
        display: block;
        width: 100%;
    }
    .post-hero-figure {
        flex: none;
        width: 100%;
        max-width: var(--home-mobile-content-width);
        height: auto;
        aspect-ratio: 740 / 430;
        border-radius: 20px;
        margin: 0;
    }

    /* Hide categories box in hero — shown below share instead */
    .post-hero .post-categorias-box {
        display: none;
    }


    /* =============================================
       POST BODY
       ============================================= */
    .post-body-section {
        padding: 12px 0 60px;
    }

    .post-body-wrap {
        width: 100%;
        max-width: var(--home-mobile-content-width);
        margin: 0 auto;
    }

    .post-meta {
        width: 100%;
        max-width: var(--post-mobile-text-box-width);
        margin: 0 auto 24px;
        gap: 16px;
        padding: 0;
        box-sizing: border-box;
    }

    /* Article content — narrower reading column, same text box pattern as Itapema */
    .post-conteudo {
        width: 100%;
        max-width: var(--post-mobile-text-box-width);
        margin: 0 auto 32px;
        padding: 0;
    }

    .post-conteudo p,
    .post-conteudo ul {
        font-size: 18px;
        line-height: 1.7;
    }

    .post-conteudo iframe {
        height: 220px;
    }

    /* Hide right astronaut inside text — mobile astronaut is in header */
    .post-astronauta-direita {
        display: none;
    }


    /* =============================================
       GALLERY — touch scroll + arrows centered below
       ============================================= */
    .post-galeria-carousel {
        flex-wrap: wrap;
        width: calc(100% - var(--post-mobile-text-box-inset) + var(--home-mobile-side-gap));
        max-width: calc(100% - var(--post-mobile-text-box-inset) + var(--home-mobile-side-gap));
        padding-left: 0;
        padding-right: 0;
        gap: 0;
        margin: 0 0 28px var(--post-mobile-text-box-inset);
        align-items: center;
        box-sizing: border-box;
        margin-top: 50px !important;
        overflow: hidden;
    }

    .post-galeria-track {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        gap: 10px;
        scroll-snap-type: x mandatory;
        margin-bottom: 12px;
        margin-right: 0;
        padding-right: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        box-sizing: border-box;
    }

    /* Arrows centered below the track via responsive calc */
    .post-galeria-arrow {
        display: flex;
        order: 2;
        width: 32px;
        height: 32px;
        margin-top: 20px;
    }
    .post-galeria-prev {
        margin-left: calc(50% - 68px); /* center: (width - 80px) / 2 */
        margin-right: 0;
    }
    .post-galeria-next {
        margin-left: 50px;
        margin-right: 0;
    }

    .post-galeria-item {
        flex: 0 0 205.6px;
        min-width: 205.6px;
        width: 205.6px;
        height: 111px;
        border-radius: 10px;
        margin: 0 !important; /* override 1024px block's margin-right: 4px !important */
        scroll-snap-align: start;
    }
    .post-galeria-item:last-child {
        margin-right: var(--home-mobile-side-gap) !important;
    }
    .post-galeria-item::after {
        border-radius: 10px;
    }
    .post-galeria-item img:first-child {
        border-radius: 10px;
    }
    .post-galeria-zoom {
        bottom: 6px;
        right: 6px;
        width: 12px;
        height: 12px;
    }
    .post-galeria-zoom img {
        width: 12px;
        height: 12px;
    }


    /* =============================================
       SHARE ROW — inline, centered
       ============================================= */
    .post-share-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
        max-width: var(--home-mobile-content-width);
        margin: 0 auto 50px;
        padding: 28px 0;
        box-sizing: border-box;
        margin-bottom: 50px;
    }

    .post-share-label {
        font-size: 18px;
        margin-top: 4px;
    }

    .post-share-row .share-post {
        gap: 20px;
    }

    .post-share-row .share-post a {
        font-size: 22px;
    }

    .post-share-row .share-post a i {
        font-size: 22px;
    }

    .post-share-row .share-post a svg {
        width: 20px;
        height: 20px;
    }


    /* =============================================
       CATEGORIES BOX — mobile version below share
       ============================================= */
    .post-categorias-box--mobile {
        display: flex;
        width: var(--post-mobile-text-box-width);
        max-width: var(--post-mobile-text-box-width);
        margin: 0 auto 36px;
        min-height: auto;
        padding: 28px 24px 32px;
        flex: none;
        box-sizing: border-box;
        margin-top: -25px !important;
    }

    .post-categorias-box--mobile .post-categorias-titulo {
        font-size: 16px;
        line-height: 40px;
        margin-top: -10px;
    }

    .post-categorias-box--mobile .post-categorias-list a {
        font-size: 16px;
        line-height: 48px;
    }


    /* =============================================
       OUTRAS NOTÍCIAS — orange heading
       ============================================= */
    .post-outras-noticias {
        font-size: 27px;
        width: 100%;
        max-width: var(--home-mobile-content-width);
        text-align: left;
        margin: 0 auto 24px;
        padding: 0 var(--post-mobile-text-box-inset);
        box-sizing: border-box;
        margin-left: 28px;
    }


    /* =============================================
       RELATED POSTS — horizontal scroll
       ============================================= */
    .post-relacionados {
        padding: 4px 0 50px;
        overflow: visible;
    }

    .post-relacionados .wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .post-relacionados-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        width: calc(100% - var(--home-mobile-side-gap));
        max-width: none;
        padding: 8px 0 24px;
        gap: var(--post-mobile-card-gap);
        margin: 0 0 0 var(--home-mobile-side-gap) !important;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .post-relacionados-grid::-webkit-scrollbar {
        display: none;
    }

    .post-relacionados .blog-grid-card {
        flex: 0 0 var(--post-mobile-blog-card-width);
        width: var(--post-mobile-blog-card-width);
        max-width: var(--post-mobile-blog-card-width);
        margin: 0 !important;
        scroll-snap-align: start;
        border-radius: 20px;
        overflow: visible;
    }
    .post-relacionados .blog-grid-card:first-child {
        margin-left: 0;
    }
    .post-relacionados .blog-grid-card:last-child {
        margin-right: var(--home-mobile-side-gap) !important;
    }

    .post-relacionados .blog-grid-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: auto;
        margin-right: 0 !important;
    }

    .post-relacionados .blog-grid-cat--mobile { 
        display: none;
        margin: 0;
        padding: 0;
    }
    .post-relacionados .blog-grid-figure {
        width: 100%;
        aspect-ratio: 416 / 301;
        border-radius: 20px;
        overflow: hidden;
    }
    .post-relacionados .blog-grid-figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
    }
    .post-relacionados .blog-grid-body {
        width: 100%;
        max-width: var(--post-mobile-blog-body-width);
        margin: 16px 0 0 20px !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
    }
    .post-relacionados .blog-grid-body .blog-grid-cat {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500 !important;
        font-size: var(--post-mobile-blog-cat-size) !important;
        line-height: 100% !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        color: #EC6608;
         margin-top: 10px !important;
    }
    .post-relacionados .blog-grid-title {
        margin: 0 !important;
        width: 100% !important;
        max-width: 85%;
        font-family: 'Exo', sans-serif !important;
        font-weight: 500 !important;
        font-size: var(--post-mobile-blog-title-size) !important;
        line-height: 1.2 !important;
        min-height: 0;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        -webkit-box-orient: initial;
       
    }

    .post-relacionados .blog-grid-btn {
        margin-left: 0;
        width: var(--post-mobile-blog-btn-width);
        height: var(--post-mobile-blog-btn-height);
        margin-top: 2px;
    }
    .post-relacionados .blog-grid-btn::before {
        width: 100%;
        height: 100%;
        margin-top: 0;
    }
    .post-relacionados .blog-grid-btn span,
    .post-relacionados .blog-grid-btn::before {
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500 !important;
        font-size: var(--post-mobile-blog-btn-font-size) !important;
        line-height: 100% !important;
        letter-spacing: 0.1em !important;
        text-align: center;
        text-transform: uppercase;
    }
    .post-relacionados .blog-grid-btn span {
        height: var(--post-mobile-blog-btn-height);
        line-height: var(--post-mobile-blog-btn-height);
        margin-top: 0;
    }
}