/* Blog: "Seis mercados" no carrossel da home (landing/segments.css e
   segments.js). Variante do blog: um slide grande por vez, com o próximo
   aparecendo na borda; a foto ocupa o slide inteiro e respira devagar; o
   texto do artigo, mais longo que o da home, vai num painel de vidro escuro,
   opaco o bastante para ler sem depender da foto. */

.blog-markets
{
    margin-top: 88px;
    margin-bottom: 88px;
    padding: 96px 0 88px;
}

.blog-markets .lp-segs-head
{
    max-width: 840px;
    margin: 0 auto 40px;
}

.blog-prose .blog-markets h2
{
    margin: 0;
    font-size: 34px;
}

.blog-markets .lp-lead
{
    margin-top: 14px;
    font-size: 19px;
}

.blog-markets .lp-seg-track
{
    --seg-gap: 20px;
    --seg-w: 86%;
}

.blog-markets .lp-seg
{
    height: 580px;
    border-radius: var(--radius-lg);
}

.blog-markets .lp-seg:not(.lp-seg-you) > img
{
    animation: blog-seg-drift 18s ease-in-out infinite alternate;
}

.blog-markets .lp-seg:not(.lp-seg-you)::after
{
    background: linear-gradient(200deg, rgba(var(--brand-ink-rgb), 0) 45%, rgba(var(--brand-ink-rgb), .55) 100%);
}

/* Painel de vidro com o texto do mercado */
.blog-markets .lp-seg:not(.lp-seg-you) .lp-seg-text
{
    left: 28px;
    right: auto;
    bottom: 28px;
    max-width: 480px;
    padding: 26px 30px 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-lg);
    background: rgba(var(--brand-ink-rgb), .78);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

.blog-markets .blog-seg-count
{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sky-muted);
    font-variant-numeric: tabular-nums;
}

.blog-prose .blog-markets .lp-seg h3
{
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #FFFFFF;
}

.blog-markets .lp-seg p.blog-seg-text
{
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sky-soft);
}

.blog-markets .lp-seg-you .lp-seg-text
{
    padding: 0 32px 36px;
}

.blog-markets .lp-seg-you .lp-seg-you-orbi
{
    width: 200px;
    margin: 56px auto auto;
}

.blog-markets .lp-seg-bar
{
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes blog-seg-drift
{
    from
    {
        transform: scale(1);
    }

    to
    {
        transform: scale(1.08) translate(-1.5%, -1%);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .blog-markets .lp-seg:not(.lp-seg-you) > img
    {
        animation: none;
    }
}

@media (max-width: 900px)
{
    .blog-markets
    {
        margin-top: 64px;
        margin-bottom: 64px;
        padding: 64px 0;
    }

    .blog-prose .blog-markets h2
    {
        font-size: 26px;
    }

    .blog-markets .lp-lead
    {
        font-size: 17px;
    }

    .blog-markets .lp-seg-track
    {
        --seg-gap: 12px;
        --seg-w: 90%;
    }

    .blog-markets .lp-seg
    {
        height: 560px;
    }

    .blog-markets .lp-seg:not(.lp-seg-you) .lp-seg-text
    {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        padding: 18px 18px 20px;
    }

    .blog-prose .blog-markets .lp-seg h3
    {
        font-size: 23px;
    }

    .blog-markets .lp-seg p.blog-seg-text
    {
        font-size: 15px;
    }
}