/* Sidebar do blog: composição 431 × 275, com conteúdo em HTML. */
@font-face {
    font-family: "KoHo Sidebar";
    src: url("../fonts/KoHo-Pilot-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "KoHo Sidebar";
    src: url("../fonts/KoHo-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Rubik Sidebar";
    src: url("../../fonts/Rubik-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

.news-home__promotion.news-sidebar-banner,
.news-sidebar-banner.news-sidebar-banner--campaign {
    position: relative;
    display: block;
    align-self: start;
    container-type: inline-size;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    aspect-ratio: 431 / 275;
    overflow: hidden;
    border-radius: 0;
    background: #081c37;
    color: #fff;
    font-family: "KoHo Sidebar", sans-serif;
    scroll-margin-top: 24px;
}

.news-sidebar-banner.news-sidebar-banner--campaign {
    height: 100%;
}

.news-sidebar-banner,
.news-sidebar-banner * {
    box-sizing: border-box;
}

.news-sidebar-banner__picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.news-sidebar-banner .news-sidebar-banner__background,
.news-promotion .news-sidebar-banner .news-sidebar-banner__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    object-fit: cover;
    pointer-events: none;
}

.news-sidebar-banner p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    text-transform: none;
}

.news-sidebar-banner [data-banner-entry] {
    position: absolute;
    left: 5.1044%;
}

.news-sidebar-banner .news-sidebar-banner__badge {
    top: 11.6364%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23.6991%;
    height: 6%;
    border-radius: .8701cqw;
    background: #fff000;
    color: #071b36;
    font-size: max(8px, 2.8297cqw);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.news-sidebar-banner .news-sidebar-banner__title {
    top: 19.6364%;
    font-size: max(16px, 6.1819cqw);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.news-sidebar-banner__title span,
.news-sidebar-banner__title strong,
.news-sidebar-banner__offer-frame span,
.news-sidebar-banner__offer-frame strong {
    display: block;
    font-weight: 700;
}

.news-sidebar-banner__title strong {
    color: #fff000;
    font-size: max(20px, 7.5392cqw);
}

.news-sidebar-banner__offer {
    top: 52.3636%;
    width: 46.6357%;
    height: 17.0909%;
}

.news-sidebar-banner .news-sidebar-banner__offer-frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 1.8561cqw;
    border: 1px solid #fff000;
    border-radius: 1.8561cqw;
    font-size: max(10px, 3.5095cqw);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform-origin: left center;
}

.news-sidebar-banner__offer-frame strong {
    color: #fff000;
    letter-spacing: .2106cqw;
}

.news-sidebar-banner .news-sidebar-banner__note {
    top: 81.1527%;
    width: 29%;
    font-size: max(8px, 2.5072cqw);
    font-weight: 400;
    line-height: 1.1;
}

.news-sidebar-banner .news-sidebar-banner__cta {
    top: 80.7273%;
    left: 38.7471%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.1566cqw;
    min-width: 70px;
    width: max-content;
    height: max(24px, 6.5102cqw);
    padding: 0 2.8914cqw;
    border-radius: 999px;
    background: #fff000;
    color: #081737;
    font-family: "Rubik Sidebar", sans-serif;
    font-size: max(8px, 2.1538cqw);
    font-weight: 600;
    line-height: 1.13;
    text-decoration: none;
    white-space: nowrap;
}

.news-sidebar-banner__cta svg {
    flex: 0 0 auto;
    width: max(8px, 1.9661cqw);
    height: max(8px, 1.9661cqw);
}

/* O link da campanha tem 100% de altura; o CTA HTML continua sendo uma pílula. */
.news-promotion .news-sidebar-banner .news-sidebar-banner__cta {
    display: inline-flex;
    width: max-content;
    height: max(24px, 6.5102cqw);
}

.news-sidebar-banner .news-sidebar-banner__cta:hover {
    background: #ffe604;
    color: #081737;
    text-decoration: none;
}

.news-sidebar-banner__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Sem JavaScript, ou com movimento reduzido, tudo já fica visível. */
.news-sidebar-banner[data-banner-state="pending"] [data-banner-entry] {
    opacity: 0;
}

.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry] {
    animation: news-sidebar-enter-left .5s both;
}

.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry="title"],
.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry="offer"] {
    animation-delay: .45s;
    animation-duration: .55s;
}

.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry="note"],
.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry="cta"] {
    animation-delay: 1s;
    animation-duration: .55s;
}

.news-sidebar-banner[data-banner-state="playing"] [data-banner-entry="cta"] {
    animation-name: news-sidebar-enter-right;
}

.news-sidebar-banner[data-banner-state="playing"] .news-sidebar-banner__background {
    animation: news-sidebar-background-zoom-out 5s linear both;
}

.news-sidebar-banner[data-banner-state="playing"] .news-sidebar-banner__offer-frame {
    animation: news-sidebar-offer-pulse .65s 1.65s ease-in-out both;
}

@keyframes news-sidebar-enter-left {
    from { opacity: 0; transform: translateX(-35%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes news-sidebar-enter-right {
    from { opacity: 0; transform: translateX(35%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes news-sidebar-background-zoom-out {
    from { transform: scale(1.04); }
    to { transform: scale(1); }
}

@keyframes news-sidebar-offer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    .news-sidebar-banner [data-banner-entry],
    .news-sidebar-banner .news-sidebar-banner__background,
    .news-sidebar-banner .news-sidebar-banner__offer-frame {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}