/* =========================================================
   GUIA GAMER BR — ESPECIAL HALLOWEEN 2026
   ========================================================= */

.halloween-page {
    --hw-bg: #09040d;
    --hw-bg-soft: #15081d;
    --hw-purple: #6d22a8;
    --hw-purple-bright: #a855f7;
    --hw-purple-glow: #c084fc;
    --hw-orange: #ff7a18;
    --hw-orange-soft: #ffad42;
    --hw-text: #f7efff;
    --hw-muted: #c8b6d3;

    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(105, 35, 145, .20), transparent 35rem),
        var(--hw-bg);
    color: var(--hw-text);
}

.halloween-page *,
.halloween-page *::before,
.halloween-page *::after {
    box-sizing: border-box;
}

.halloween-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 20px 120px;
    background:
        radial-gradient(circle at 50% 28%, rgba(143, 63, 199, .24), transparent 16rem),
        linear-gradient(180deg, #12051d 0%, #09040d 72%, #050307 100%);
}

.halloween-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .24;
    background-image:
        radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 14%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 34%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 10%, #fff 0 1px, transparent 1.5px);
    background-size: 210px 210px, 270px 270px, 330px 330px, 390px 390px;
}

.halloween-hero-content {
    position: relative;
    z-index: 5;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.halloween-kicker,
.halloween-eyebrow,
.halloween-section-header > span {
    display: inline-block;
    color: var(--hw-orange-soft);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.halloween-pumpkin {
    margin: 20px auto 2px;
    font-size: clamp(3.5rem, 8vw, 6.8rem);
    filter: drop-shadow(0 0 25px rgba(255, 111, 0, .45));
    animation: pumpkinPulse 3.5s ease-in-out infinite;
}

.halloween-hero h1 {
    margin: 0;
    line-height: .82;
    text-transform: uppercase;
}

.halloween-hero h1 span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.4rem, 10vw, 8.4rem);
    letter-spacing: -.055em;
    color: #f5e9ff;
    text-shadow:
        0 3px 0 #3d155a,
        0 0 18px rgba(185, 94, 255, .55),
        0 0 45px rgba(122, 31, 181, .35);
}

.halloween-hero h1 strong {
    display: block;
    margin-top: 18px;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    letter-spacing: .32em;
    color: var(--hw-orange);
    text-shadow: 0 0 24px rgba(255, 105, 0, .45);
}

.halloween-subtitle {
    margin: 32px 0 0;
    color: var(--hw-purple-glow);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.halloween-intro {
    max-width: 760px;
    margin: 22px auto 0;
    color: var(--hw-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.halloween-countdown {
    width: min(580px, 100%);
    margin: 34px auto 30px;
    padding: 22px;
    border: 1px solid rgba(190, 120, 255, .32);
    border-radius: 22px;
    background: rgba(22, 8, 31, .70);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .38),
        inset 0 0 35px rgba(111, 37, 156, .12);
    backdrop-filter: blur(12px);
}

.countdown-label,
.countdown-date {
    display: block;
    color: var(--hw-muted);
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.countdown-numbers {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin: 14px 0;
}

.countdown-numbers div {
    min-width: 70px;
}

.countdown-numbers strong {
    display: block;
    color: #fff;
    font-size: 2.3rem;
    line-height: 1;
}

.countdown-numbers span {
    display: block;
    margin-top: 6px;
    color: var(--hw-purple-glow);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.halloween-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 13px 24px;
    border: 1px solid rgba(255, 135, 34, .75);
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(135deg, #7b238f, #42105d);
    box-shadow:
        0 0 0 3px rgba(142, 50, 176, .12),
        0 10px 35px rgba(107, 28, 139, .32);
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.halloween-enter:hover {
    transform: translateY(-3px);
    border-color: var(--hw-orange);
    box-shadow:
        0 0 28px rgba(177, 76, 255, .38),
        0 12px 38px rgba(0, 0, 0, .45);
}

.halloween-moon {
    position: absolute;
    top: 100px;
    left: 50%;
    z-index: -2;
    width: 310px;
    height: 310px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 35%, #d9bdf0, #9a70b8 52%, #654379 76%);
    opacity: .15;
    box-shadow: 0 0 100px rgba(176, 91, 235, .32);
}

.halloween-ghost {
    position: absolute;
    z-index: 2;
    font-size: 3rem;
    opacity: .25;
    filter: grayscale(1) brightness(1.8);
    animation: ghostFloat 7s ease-in-out infinite;
}

.ghost-one {
    left: 8%;
    top: 34%;
}

.ghost-two {
    right: 9%;
    top: 22%;
    animation-delay: -3s;
}

.halloween-bats span {
    position: absolute;
    z-index: 2;
    color: #1b0b23;
    font-size: 3rem;
    font-weight: 900;
    transform: rotate(25deg);
    opacity: .9;
}

.halloween-bats span:nth-child(1) {
    top: 16%;
    left: 17%;
}

.halloween-bats span:nth-child(2) {
    top: 25%;
    left: 24%;
    font-size: 2rem;
}

.halloween-bats span:nth-child(3) {
    top: 17%;
    right: 19%;
    transform: rotate(-20deg);
}

.halloween-bats span:nth-child(4) {
    top: 29%;
    right: 27%;
    font-size: 1.7rem;
}

.halloween-fog {
    position: absolute;
    z-index: 1;
    width: 150%;
    height: 180px;
    left: -25%;
    border-radius: 50%;
    background: rgba(184, 130, 207, .08);
    filter: blur(35px);
    pointer-events: none;
    animation: fogMove 18s ease-in-out infinite alternate;
}

.halloween-fog-1 {
    bottom: 60px;
}

.halloween-fog-2 {
    bottom: 190px;
    opacity: .55;
    animation-duration: 25s;
    animation-direction: alternate-reverse;
}

.halloween-ground {
    position: absolute;
    z-index: 2;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 120px;
    background:
        radial-gradient(ellipse at center, #190b20 0%, #08040a 68%);
    clip-path: polygon(
        0 50%, 8% 42%, 15% 52%, 23% 35%, 31% 48%,
        39% 30%, 48% 45%, 57% 32%, 66% 49%, 74% 31%,
        83% 47%, 91% 37%, 100% 50%, 100% 100%, 0 100%
    );
}

.grave {
    position: absolute;
    bottom: 42px;
    color: #2a1531;
    font-size: 2.2rem;
}

.grave-1 { left: 18%; }
.grave-2 { left: 74%; }
.grave-3 { left: 86%; }

.halloween-section {
    position: relative;
    padding: 88px 20px;
}

.halloween-section-header {
    max-width: 750px;
    margin: 0 auto 45px;
    text-align: center;
}

.halloween-section-header h2,
.halloween-feature h2,
.halloween-shop h2,
.halloween-final h2 {
    margin: 10px 0 12px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
}

.halloween-section-header p,
.halloween-feature p,
.halloween-shop p,
.halloween-final p {
    color: var(--hw-muted);
    line-height: 1.7;
}

.halloween-explore {
    background:
        radial-gradient(circle at 50% 0%, rgba(111, 36, 151, .17), transparent 34rem),
        #0b050f;
}

.halloween-portals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.halloween-portal {
    position: relative;
    min-height: 245px;
    padding: 28px 22px;
    border: 1px solid rgba(166, 92, 205, .18);
    border-radius: 20px;
    overflow: hidden;
    color: inherit;
    background:
        linear-gradient(180deg, rgba(43, 14, 56, .72), rgba(18, 7, 25, .9));
    text-align: center;
    text-decoration: none;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.halloween-portal::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -50px;
    right: -50px;
    border-radius: 50%;
    background: rgba(168, 85, 247, .14);
    filter: blur(12px);
}

.halloween-portal:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 133, 255, .55);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

.portal-icon {
    display: block;
    margin-bottom: 17px;
    font-size: 2.8rem;
    filter: drop-shadow(0 0 13px rgba(168, 85, 247, .4));
}

.halloween-portal h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1.25rem;
}

.halloween-portal p {
    margin: 0;
    color: var(--hw-muted);
    font-size: .92rem;
    line-height: 1.6;
}

.halloween-feature {
    background:
        linear-gradient(180deg, #09040d, #110619);
}

.halloween-feature-box,
.halloween-shop-box {
    max-width: 1000px;
    margin: auto;
    padding: 45px;
    border: 1px solid rgba(161, 82, 207, .27);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0 50%, rgba(135, 43, 170, .19), transparent 25rem),
        rgba(22, 8, 30, .8);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}

.halloween-feature-box {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 35px;
}

.feature-symbol {
    display: grid;
    place-items: center;
    width: 105px;
    height: 105px;
    border: 1px solid rgba(191, 125, 231, .32);
    border-radius: 50%;
    color: var(--hw-purple-glow);
    background: #100616;
    font-size: 4rem;
    box-shadow: 0 0 35px rgba(141, 54, 184, .22);
}

.halloween-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.halloween-post-card {
    overflow: hidden;
    border: 1px solid rgba(153, 81, 190, .2);
    border-radius: 20px;
    background: #13091a;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.halloween-post-card:hover {
    transform: translateY(-5px);
    border-color: rgba(181, 104, 224, .52);
}

.halloween-post-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.halloween-post-content {
    padding: 22px;
}

.halloween-category {
    color: var(--hw-orange-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.halloween-post-content h3 {
    margin: 10px 0;
    line-height: 1.3;
}

.halloween-post-content h3 a {
    color: #fff;
    text-decoration: none;
}

.halloween-post-content p {
    color: var(--hw-muted);
    line-height: 1.6;
}

.halloween-read {
    color: var(--hw-purple-glow);
    font-weight: 800;
    text-decoration: none;
}

.halloween-empty {
    max-width: 650px;
    margin: auto;
    padding: 50px 30px;
    border: 1px dashed rgba(168, 85, 247, .32);
    border-radius: 24px;
    text-align: center;
}

.halloween-empty > span {
    font-size: 4rem;
}

.halloween-shop {
    background:
        radial-gradient(circle at 50% 50%, rgba(100, 25, 132, .15), transparent 30rem);
}

.halloween-shop-box {
    text-align: center;
}

.halloween-shop-box p {
    max-width: 720px;
    margin: 0 auto 28px;
}

.halloween-final {
    position: relative;
    padding: 110px 20px 130px;
    text-align: center;
    background:
        linear-gradient(180deg, #0a040d, #030204);
}

.final-pumpkin {
    display: block;
    font-size: 4.5rem;
    filter: drop-shadow(0 0 22px rgba(255, 107, 0, .35));
}

.halloween-final p {
    margin-bottom: 30px;
}

@keyframes ghostFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
    }
    50% {
        transform: translate3d(15px, -30px, 0) rotate(4deg);
    }
}

@keyframes fogMove {
    from {
        transform: translateX(-5%);
    }
    to {
        transform: translateX(5%);
    }
}

@keyframes pumpkinPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 111, 0, .35));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 34px rgba(255, 111, 0, .55));
    }
}

@media (max-width: 1050px) {
    .halloween-portals {
        grid-template-columns: repeat(3, 1fr);
    }

    .halloween-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .halloween-hero {
        min-height: 720px;
        padding-top: 70px;
    }

    .halloween-hero h1 span {
        font-size: clamp(3rem, 17vw, 5.5rem);
    }

    .halloween-hero h1 strong {
        letter-spacing: .2em;
    }

    .halloween-subtitle {
        font-size: .76rem;
        line-height: 1.8;
    }

    .countdown-numbers {
        gap: 15px;
    }

    .countdown-numbers strong {
        font-size: 1.8rem;
    }

    .halloween-portals,
    .halloween-post-grid {
        grid-template-columns: 1fr;
    }

    .halloween-portal {
        min-height: 0;
    }

    .halloween-feature-box {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .feature-symbol {
        margin: auto;
    }

    .halloween-feature-box,
    .halloween-shop-box {
        padding: 32px 22px;
    }

    .ghost-one {
        left: 1%;
    }

    .ghost-two {
        right: 1%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-page *,
    .halloween-page *::before,
    .halloween-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   HALLOWEEN V2 — ELEMENTOS VISUAIS SEM DEPENDÊNCIA DE EMOJI
   ========================================================= */

.halloween-pumpkin-css {
    position: relative;
    display: block;
    width: 88px;
    height: 68px;
    margin: 24px auto 14px;
    border-radius: 45% 45% 48% 48%;
    background:
        radial-gradient(ellipse at 50% 50%,
            #ff9b24 0 18%,
            #ff7417 19% 42%,
            #d94a0b 43% 68%,
            #8e2607 69%);
    box-shadow:
        inset 14px 0 18px rgba(255,180,55,.16),
        inset -14px 0 18px rgba(72,5,0,.22),
        0 0 32px rgba(255,102,0,.32);
}

.halloween-pumpkin-css::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 20px;
    left: 38px;
    top: -14px;
    border-radius: 5px 5px 1px 1px;
    background: #456522;
    transform: rotate(7deg);
}

.halloween-pumpkin-css::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 25px;
    width: 50px;
    height: 28px;
    background:
        linear-gradient(135deg, transparent 48%, #26060a 49%) 0 0/17px 13px,
        linear-gradient(225deg, transparent 48%, #26060a 49%) 33px 0/17px 13px,
        linear-gradient(45deg, transparent 45%, #26060a 46%) 7px 17px/37px 12px;
    background-repeat: no-repeat;
}

.halloween-ghost {
    width: 50px;
    height: 64px;
    border-radius: 50% 50% 35% 35%;
    background: rgba(225,205,241,.82);
    box-shadow: 0 0 30px rgba(194,133,255,.35);
}

.halloween-ghost::before,
.halloween-ghost::after {
    content: "";
    position: absolute;
    top: 22px;
    width: 7px;
    height: 10px;
    border-radius: 50%;
    background: #351342;
}

.halloween-ghost::before {
    left: 14px;
}

.halloween-ghost::after {
    right: 14px;
}

.halloween-ghost span::before,
.halloween-ghost span::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 25px;
    height: 18px;
    border-radius: 50%;
    background: inherit;
}

.halloween-ghost span::before {
    left: 0;
}

.halloween-ghost span::after {
    right: 0;
}

.portal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border: 1px solid rgba(205,144,255,.35);
    border-radius: 50%;
    color: #e4b7ff;
    background:
        radial-gradient(circle, rgba(138,49,183,.3), rgba(25,8,33,.75));
    box-shadow:
        0 0 22px rgba(152,63,205,.18),
        inset 0 0 16px rgba(176,90,225,.12);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.portal-game::before {
    content: "◆";
    margin-right: 3px;
}

.portal-film::before {
    content: "▶";
    margin-right: 4px;
}

.portal-series::before {
    content: "▣";
    margin-right: 4px;
}

.portal-geek::before {
    content: "✦";
    margin-right: 4px;
}

.portal-shop::before {
    content: "◇";
    margin-right: 4px;
}

.final-pumpkin.halloween-pumpkin-css {
    width: 70px;
    height: 55px;
    margin-bottom: 24px;
}

.final-pumpkin.halloween-pumpkin-css::before {
    left: 29px;
}

.final-pumpkin.halloween-pumpkin-css::after {
    transform: scale(.8);
    transform-origin: center;
    left: 10px;
    top: 18px;
}

.countdown-halloween-now {
    margin: 15px 0;
    color: var(--hw-orange-soft);
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 900;
    letter-spacing: .05em;
}


/* =========================================================
   HALLOWEEN V2 — ATMOSFERA CINEMATOGRÁFICA
   ========================================================= */

/* Hero com maior profundidade */
.halloween-hero {
    min-height: 820px;
    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(156, 74, 205, .27) 0,
            rgba(77, 24, 105, .16) 19rem,
            transparent 34rem
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(89, 23, 110, .20),
            transparent 44rem
        ),
        linear-gradient(
            180deg,
            #120519 0%,
            #09030d 60%,
            #050207 100%
        );
}

/* Lua mais perceptível */
.halloween-moon {
    top: 72px;
    width: 360px;
    height: 360px;
    opacity: .28;

    background:
        radial-gradient(circle at 35% 31%,
            rgba(255,255,255,.28) 0 5%,
            transparent 6%),
        radial-gradient(circle at 62% 58%,
            rgba(64,31,74,.23) 0 8%,
            transparent 9%),
        radial-gradient(circle at 45% 70%,
            rgba(55,24,67,.18) 0 5%,
            transparent 6%),
        radial-gradient(circle at 50% 50%,
            #dfc5ef 0%,
            #b188c9 47%,
            #725080 72%,
            #43294e 100%);

    box-shadow:
        0 0 50px rgba(201, 139, 243, .22),
        0 0 130px rgba(138, 57, 185, .25);
}

/* Halo atrás do título */
.halloween-hero-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 760px;
    height: 330px;
    max-width: 95vw;
    left: 50%;
    top: 90px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(145, 62, 192, .17),
            transparent 68%
        );
    filter: blur(18px);
    pointer-events: none;
}

/* Título mais dramático */
.halloween-hero h1 span {
    position: relative;
    text-shadow:
        0 3px 0 #42175d,
        0 0 12px rgba(225, 190, 255, .30),
        0 0 30px rgba(182, 91, 241, .48),
        0 0 70px rgba(106, 31, 147, .40);
}

.halloween-hero h1 strong {
    text-shadow:
        0 0 12px rgba(255, 112, 20, .48),
        0 0 35px rgba(255, 91, 0, .28);
}


/* ---------------------------------------------------------
   MORCEGOS EM CSS
   --------------------------------------------------------- */

.halloween-bats span {
    width: 34px;
    height: 15px;
    color: transparent;
    font-size: 0;
    background: transparent;
    opacity: .72;
    animation: batFloat 6s ease-in-out infinite;
}

.halloween-bats span::before,
.halloween-bats span::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 19px;
    height: 12px;
    background: #08040a;
}

.halloween-bats span::before {
    right: 50%;
    border-radius: 90% 10% 80% 10%;
    transform: rotate(18deg);
    transform-origin: right center;
}

.halloween-bats span::after {
    left: 50%;
    border-radius: 10% 90% 10% 80%;
    transform: rotate(-18deg);
    transform-origin: left center;
}

.halloween-bats span:nth-child(2) {
    animation-delay: -2s;
}

.halloween-bats span:nth-child(3) {
    animation-delay: -4s;
}

.halloween-bats span:nth-child(4) {
    animation-delay: -1s;
}


/* ---------------------------------------------------------
   NÉVOA
   --------------------------------------------------------- */

.halloween-fog {
    height: 210px;
    background:
        radial-gradient(
            ellipse at center,
            rgba(208, 174, 224, .13),
            rgba(123, 76, 143, .07) 45%,
            transparent 72%
        );
    filter: blur(28px);
}

.halloween-fog-1 {
    bottom: 35px;
    opacity: .9;
}

.halloween-fog-2 {
    bottom: 150px;
    opacity: .45;
}


/* ---------------------------------------------------------
   CEMITÉRIO
   --------------------------------------------------------- */

.halloween-ground {
    height: 145px;
    bottom: -38px;
    background:
        linear-gradient(
            180deg,
            #15081b 0%,
            #080309 70%
        );

    filter:
        drop-shadow(0 -10px 20px rgba(81, 28, 103, .18));
}

.grave {
    color: #30133a;
    text-shadow: 0 0 12px rgba(126, 47, 155, .20);
}


/* ---------------------------------------------------------
   PORTAIS
   --------------------------------------------------------- */

.halloween-portals {
    perspective: 900px;
}

.halloween-portal {
    min-height: 265px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(129, 45, 166, .22),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(45, 14, 58, .82),
            rgba(15, 6, 21, .95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 20px 45px rgba(0,0,0,.15);
}

.halloween-portal:hover {
    transform:
        translateY(-9px)
        scale(1.015);

    box-shadow:
        0 20px 50px rgba(0,0,0,.42),
        0 0 30px rgba(142,54,189,.16);
}


/* ---------------------------------------------------------
   CARDS DAS MATÉRIAS
   --------------------------------------------------------- */

.halloween-post-card {
    background:
        linear-gradient(
            180deg,
            #17091e,
            #100615
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
}

.halloween-post-card img {
    transition:
        transform .45s ease,
        filter .45s ease;
}

.halloween-post-card:hover img {
    transform: scale(1.035);
    filter: brightness(1.06);
}


/* ---------------------------------------------------------
   SEÇÕES
   --------------------------------------------------------- */

.halloween-section {
    isolation: isolate;
}

.halloween-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background:
        rgba(105, 35, 135, .035);
    filter: blur(70px);
    pointer-events: none;
}

.halloween-section:nth-of-type(even)::before {
    left: -250px;
    top: 10%;
}

.halloween-section:nth-of-type(odd)::before {
    right: -250px;
    top: 15%;
}


/* ---------------------------------------------------------
   FALLBACK
   --------------------------------------------------------- */

.empty-pumpkin.halloween-pumpkin-css {
    width: 72px;
    height: 56px;
    margin-bottom: 25px;
}


/* ---------------------------------------------------------
   ANIMAÇÕES
   --------------------------------------------------------- */

@keyframes batFloat {
    0%, 100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-4deg);
    }

    50% {
        transform:
            translate3d(12px, -12px, 0)
            rotate(5deg);
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .halloween-hero {
        min-height: 760px;
    }

    .halloween-moon {
        width: 270px;
        height: 270px;
        top: 85px;
    }

    .halloween-hero-content::before {
        width: 95vw;
    }

    .halloween-ghost {
        opacity: .17;
    }
}


/* =========================================================
   HALLOWEEN V3 — HERO CINEMATOGRÁFICO
   ========================================================= */

.halloween-hero {
    min-height: 820px;

    background-image:
        linear-gradient(
            180deg,
            rgba(8, 2, 13, .30) 0%,
            rgba(10, 3, 16, .38) 35%,
            rgba(7, 2, 10, .72) 76%,
            #050307 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(26, 5, 37, .05) 0%,
            rgba(7, 2, 11, .32) 75%
        ),
        url("../img/halloween/halloween-2026-hero.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* A nova arte já possui lua própria. */
.halloween-hero > .halloween-moon {
    display: none;
}

/* Mantém partículas/estrelas, mas de forma discreta. */
.halloween-hero::before {
    opacity: .14;
}

/* Halo central para garantir leitura do título sobre a fotografia. */
.halloween-hero-content::before {
    width: 820px;
    height: 500px;
    top: 40px;

    background:
        radial-gradient(
            ellipse,
            rgba(10, 2, 16, .58) 0%,
            rgba(20, 5, 28, .38) 42%,
            transparent 72%
        );
}

/* Fantasmas continuam animados, mas não competem com a arte. */
.halloween-hero > .halloween-ghost {
    opacity: .15;
    filter:
        grayscale(1)
        brightness(1.65)
        drop-shadow(0 0 16px rgba(194,133,255,.25));
}

/* Morcegos permanecem como detalhe animado. */
.halloween-hero .halloween-bats {
    opacity: .55;
}

/* O texto ganha contraste sem virar uma caixa opaca. */
.halloween-hero-content {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

/* A imagem já fornece o elemento visual acima do título. */
.halloween-kicker {
    margin-bottom: 22px;
}


/* ---------- RESPONSIVIDADE DO NOVO HERO ---------- */

@media (max-width: 900px) {
    .halloween-hero {
        min-height: 760px;

        /*
         * Mantém o centro narrativo da arte visível.
         * A composição continua sendo cover sem deformar a imagem.
         */
        background-position: center center;
    }

    .halloween-hero-content::before {
        width: 94vw;
        height: 520px;
        top: 20px;
    }

    .halloween-hero > .halloween-ghost {
        opacity: .11;
    }
}

@media (max-width: 600px) {
    .halloween-hero {
        min-height: 720px;
        padding-top: 72px;
        padding-bottom: 100px;

        /*
         * No formato vertical, priorizamos a região central
         * da cena em vez de tentar exibir toda a imagem 16:9.
         */
        background-position: 50% center;
    }

    .halloween-hero::before {
        opacity: .10;
    }

    .halloween-hero > .halloween-ghost {
        opacity: .09;
    }

    .halloween-hero .halloween-bats {
        opacity: .42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-hero > .halloween-ghost,
    .halloween-hero .halloween-bats span {
        animation: none !important;
    }
}


/* =========================================================
   HALLOWEEN V3.1 — POLIMENTO FINAL DO HERO
   ========================================================= */

@media (min-width: 901px) {
    .halloween-hero h1 span {
        font-size: clamp(3.4rem, 8.2vw, 7.3rem);
        letter-spacing: -.045em;
    }
}

.halloween-hero h1 span {
    text-shadow:
        0 4px 0 rgba(48, 13, 65, .88),
        0 0 14px rgba(225, 190, 255, .32),
        0 0 34px rgba(182, 91, 241, .48),
        0 8px 40px rgba(0, 0, 0, .65);
}

/* Transição cinematográfica entre hero e conteúdo */
.halloween-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(5, 3, 7, .42) 45%,
            #08030b 100%
        );
}

.halloween-hero-content {
    position: relative;
    z-index: 5;
}


/* ==========================================================================
   HALLOWEEN V4 — ESCOLHA SEU PESADELO
   ========================================================================== */

.halloween-nightmares {
    position: relative;
    overflow: hidden;
}

.halloween-nightmares::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(128, 30, 10, 0.12),
            transparent 42%
        );
}

.halloween-nightmares .container {
    position: relative;
    z-index: 1;
}


/* GRID */

.halloween-nightmare-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}


/* CARD */

.halloween-nightmare-card {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid rgba(255, 118, 43, 0.18);
    border-radius: 18px;

    background: #08070a;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.halloween-nightmare-card:hover {
    transform: translateY(-7px);

    border-color: rgba(255, 118, 43, 0.55);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(210, 60, 15, 0.12);
}


/* LINK */

.halloween-nightmare-link {
    position: relative;
    display: block;

    min-height: 440px;

    overflow: hidden;

    color: #fff;
    text-decoration: none;
}

.halloween-nightmare-link:focus-visible {
    outline: 3px solid #ff7a2f;
    outline-offset: -3px;
}


/* IMAGEM */

.halloween-nightmare-link img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    filter:
        brightness(0.74)
        saturate(0.9);

    transition:
        transform 0.65s ease,
        filter 0.4s ease;
}

.halloween-nightmare-card:hover img {
    transform: scale(1.075);

    filter:
        brightness(0.88)
        saturate(1);
}


/* SOMBRA CINEMATOGRÁFICA */

.halloween-nightmare-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 10%,
            rgba(0, 0, 0, 0.22) 42%,
            rgba(4, 3, 6, 0.96) 100%
        );

    pointer-events: none;
}


/* CONTEÚDO */

.halloween-nightmare-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 26px 22px 24px;
}

.halloween-nightmare-content > span {
    display: inline-block;

    margin-bottom: 8px;

    color: #ff7a2f;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.halloween-nightmare-content strong {
    display: block;

    max-width: 250px;

    color: #fff;

    font-size: clamp(1.15rem, 1.55vw, 1.45rem);
    line-height: 1.16;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.9);
}

.halloween-nightmare-content small {
    display: inline-block;

    margin-top: 17px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 0.02em;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.halloween-nightmare-card:hover
.halloween-nightmare-content small {
    color: #ff9b61;
    transform: translateX(4px);
}


/* TABLET */

@media (max-width: 1050px) {

    .halloween-nightmare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .halloween-nightmare-link {
        min-height: 390px;
    }

}


/* MOBILE */

@media (max-width: 620px) {

    .halloween-nightmare-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 26px;
    }

    .halloween-nightmare-link {
        min-height: 330px;
    }

    .halloween-nightmare-content {
        padding: 22px 19px;
    }

    .halloween-nightmare-content strong {
        max-width: 290px;
        font-size: 1.3rem;
    }

}


/* ACESSIBILIDADE */

@media (prefers-reduced-motion: reduce) {

    .halloween-nightmare-card,
    .halloween-nightmare-link img,
    .halloween-nightmare-content small {
        transition: none;
    }

    .halloween-nightmare-card:hover {
        transform: none;
    }

    .halloween-nightmare-card:hover img {
        transform: none;
    }

}
/* ==========================================================================
   HALLOWEEN V4.1 — TERROR NAS TELAS
   ========================================================================== */

.halloween-screens {
    position: relative;
    overflow: hidden;
}

.halloween-screens::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(92, 31, 125, 0.10),
            transparent 58%
        );
}

.halloween-screens .container {
    position: relative;
    z-index: 1;
}

.halloween-screen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 34px;
}

.halloween-screen-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(157, 86, 191, 0.22);
    border-radius: 18px;
    background: rgba(12, 8, 18, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.halloween-screen-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 122, 47, 0.48);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(111, 49, 144, 0.12);
}

.halloween-screen-card > a {
    display: grid;
    grid-template-columns: minmax(190px, 42%) 1fr;
    min-height: 285px;
    color: inherit;
    text-decoration: none;
}

.halloween-screen-image {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    background: #08060b;
}

.halloween-screen-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.92);
    transform: scale(1.01);
    transition:
        transform 0.6s ease,
        filter 0.35s ease;
}

.halloween-screen-card:hover .halloween-screen-image img {
    transform: scale(1.06);
    filter: brightness(0.94) saturate(1);
}

.halloween-screen-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.02) 35%,
            rgba(9, 6, 13, 0.35) 100%
        );
    pointer-events: none;
}

.halloween-screen-type {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(7, 5, 10, 0.76);
    backdrop-filter: blur(7px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.halloween-screen-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 27px 26px;
}

.halloween-screen-body > span {
    margin-bottom: 9px;
    color: #ff7a2f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.halloween-screen-body h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.08rem, 1.45vw, 1.38rem);
    line-height: 1.24;
}

.halloween-screen-body p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.9rem;
    line-height: 1.65;
}

.halloween-screen-body strong {
    display: inline-block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.halloween-screen-card:hover .halloween-screen-body strong {
    color: #ff9b61;
    transform: translateX(4px);
}

@media (max-width: 1050px) {
    .halloween-screen-card > a {
        grid-template-columns: 1fr;
    }

    .halloween-screen-image {
        min-height: 245px;
    }
}

@media (max-width: 720px) {
    .halloween-screen-grid {
        grid-template-columns: 1fr;
        gap: 17px;
        margin-top: 26px;
    }

    .halloween-screen-card > a {
        min-height: 0;
    }

    .halloween-screen-image {
        min-height: 230px;
    }

    .halloween-screen-body {
        padding: 22px 20px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-screen-card,
    .halloween-screen-image img,
    .halloween-screen-body strong {
        transition: none;
    }

    .halloween-screen-card:hover {
        transform: none;
    }

    .halloween-screen-card:hover .halloween-screen-image img {
        transform: none;
    }
}


/* ==========================================================================
   HALLOWEEN V4.2 — VITRINE DE OFERTAS
   ========================================================================== */

.halloween-shop {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(120, 42, 154, 0.16),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            rgba(10, 4, 14, 0.98),
            rgba(16, 6, 21, 0.98)
        );
}

.halloween-shop::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    bottom: -390px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(151, 63, 190, 0.08);
    filter: blur(70px);
    pointer-events: none;
}

.halloween-shop .container {
    position: relative;
    z-index: 1;
}

.halloween-shop-header {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.halloween-shop-header h2 {
    margin: 10px 0 13px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
}

.halloween-shop-header p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--hw-muted);
    line-height: 1.7;
}

.halloween-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1120px;
    margin: 0 auto;
}

.halloween-product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(166, 92, 205, 0.24);
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(24, 10, 31, 0.96),
            rgba(12, 7, 17, 0.98)
        );
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.025);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.halloween-product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 126, 47, 0.52);
    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.46),
        0 0 32px rgba(116, 44, 151, 0.14);
}

.halloween-product-image {
    position: relative;
    display: flex;
    height: 310px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(104, 46, 128, 0.23),
            transparent 58%
        ),
        #08060b;
    text-decoration: none;
}

.halloween-product-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.015),
            transparent 30%,
            rgba(0, 0, 0, 0.20)
        );
    pointer-events: none;
}

.halloween-product-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        brightness(0.90)
        saturate(0.94)
        drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
    transition:
        transform 0.45s ease,
        filter 0.35s ease;
}

.halloween-product-card:hover .halloween-product-image img {
    transform: scale(1.035);
    filter:
        brightness(1)
        saturate(1)
        drop-shadow(0 20px 24px rgba(0, 0, 0, 0.48));
}

.halloween-product-shade {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 38%;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7, 4, 10, 0.64)
        );
    pointer-events: none;
}

.halloween-product-platform {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 15px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(6, 4, 9, 0.78);
    backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.halloween-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px 23px 25px;
}

.halloween-product-store {
    margin-bottom: 9px;
    color: #ff8b45;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.halloween-product-body h3 {
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.32;
}

.halloween-product-body p {
    margin: 13px 0 21px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.87rem;
    line-height: 1.65;
}

.halloween-product-cta {
    display: flex;
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 127, 48, 0.34);
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            rgba(117, 39, 147, 0.62),
            rgba(68, 21, 86, 0.78)
        );
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.halloween-product-cta:hover {
    border-color: rgba(255, 145, 77, 0.72);
    background:
        linear-gradient(
            135deg,
            rgba(143, 48, 177, 0.78),
            rgba(84, 25, 104, 0.92)
        );
}

.halloween-product-cta span {
    font-size: 1.05rem;
    transition: transform 0.25s ease;
}

.halloween-product-cta:hover span {
    transform: translateX(4px);
}

.halloween-shop-footer {
    display: flex;
    max-width: 760px;
    margin: 36px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    text-align: center;
}

.halloween-shop-footer small {
    max-width: 610px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    line-height: 1.55;
}

@media (max-width: 960px) {
    .halloween-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .halloween-product-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, calc(50% - 11px));
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .halloween-shop-header {
        margin-bottom: 28px;
    }

    .halloween-product-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .halloween-product-card:last-child {
        grid-column: auto;
        width: 100%;
    }

    .halloween-product-image {
        height: 285px;
        padding: 16px;
    }

    .halloween-product-body {
        padding: 21px 19px 22px;
    }

    .halloween-shop-footer {
        margin-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-product-card,
    .halloween-product-image img,
    .halloween-product-cta,
    .halloween-product-cta span {
        transition: none;
    }

    .halloween-product-card:hover,
    .halloween-product-card:hover .halloween-product-image img,
    .halloween-product-cta:hover span {
        transform: none;
    }
}


/* =========================================================
   HALLOWEEN V4.3.1 — CONTEÚDOS COMPLEMENTARES
   Quatro cards em uma linha no desktop.
   ========================================================= */

@media (min-width: 1051px) {
    #conteudos .halloween-post-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    #conteudos .halloween-post-content {
        padding: 20px;
    }
}

/* Tablet: mantém uma composição equilibrada 2 x 2. */
@media (min-width: 721px) and (max-width: 1050px) {
    #conteudos .halloween-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Celular: leitura vertical. */
@media (max-width: 720px) {
    #conteudos .halloween-post-grid {
        grid-template-columns: 1fr;
    }
}