/* Mercado de atuação: somente a seção da Home. */
.markets-section {
    --market-tile-width:216px;
    --markets-background:color-mix(in srgb,var(--color-background) 25%,#090b0e);
    margin-block:20px 24px;
    background:var(--markets-background);
    color:#f2f4f5;
}
.markets-inner {
    max-width:1180px;
    display:grid;
    grid-template-columns:minmax(0,.26fr) minmax(0,.74fr);
    align-items:center;
    gap:28px;
    padding-block:18px;
}
.markets-intro,.markets-carousel,.markets-viewport,.market-item {
    min-width:0;
}
.markets-intro {
    padding-bottom:32px;
}
.markets-intro h2 {
    max-width:330px;
    color:var(--markets-title-color,#f2f4f5);
    font-size:clamp(2.4rem,3.75vw,3.2rem);
    line-height:1.12;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
}
.markets-intro .text-link {
    max-width:100%;
    overflow-wrap:anywhere;
    margin-top:12px;
    padding:4px 8px 7px 0;
    gap:12px;
    font-size:1.05rem;
    font-weight:600;
    color:#c8cdd1;
    border-bottom:1px solid color-mix(in srgb,var(--color-primary) 70%,transparent);
    transition:color .2s,border-color .2s;
}
.markets-intro .text-link:hover {
    color:#fff;
    border-color:var(--color-primary);
}
.markets-intro .text-link .icon {
    flex-shrink:0;
    width:18px;
    height:18px;
    color:var(--color-primary);
    transition:transform .2s;
}
.markets-intro .text-link:hover .icon {
    transform:translateX(3px);
}
.markets-carousel {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    justify-self:center;
    width:100%;
    max-width:var(--market-tile-width);
    gap:6px;
}
.markets-carousel.has-controls {
    grid-template-columns:44px minmax(0,1fr) 44px;
    max-width:calc(2 * var(--market-tile-width) + 116px);
}
.markets-carousel:has(.market-item:nth-child(3)) {
    max-width:calc(3 * var(--market-tile-width) + 132px);
}
.markets-viewport {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,var(--market-tile-width)));
    justify-content:center;
    gap:16px;
}
.markets-viewport:has(>.market-item:nth-child(3)) {
    grid-template-columns:repeat(3,minmax(0,var(--market-tile-width)));
}
.markets-viewport.is-single {
    grid-template-columns:minmax(0,var(--market-tile-width));
}
.market-item {
    text-align:center;
}
.market-visual {
    position:relative;
    width:90%;
    aspect-ratio:1 / 1;
    margin-inline:auto;
    margin-bottom:10px;
    overflow:hidden;
    border-radius:2px;
    background:linear-gradient(125deg,#1c2228,#10151a);
}
.market-visual:has(img) {
    background:var(--markets-background);
}
/* Um acabamento neutro e discreto para mercados sem fotografia. */
.market-visual::before {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid #ffffff0a;
    background:linear-gradient(125deg,transparent 38%,#ffffff06 38% 52%,transparent 52%),
        linear-gradient(125deg,transparent 55%,#ffffff12 55% 55.3%,transparent 55.3%);
}
.market-visual::after {
    content:"";
    position:absolute;
    left:16px;
    bottom:16px;
    width:28px;
    height:2px;
    background:var(--color-primary);
    opacity:.65;
}
.market-visual:has(img)::before,.market-visual:has(img)::after {
    display:none;
}
.market-visual .market-icon {
    display:none;
}
.market-visual img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease,filter .3s ease;
}
.market-item h3 {
    padding-inline:4px;
    font-size:.95rem;
    font-weight:600;
    line-height:1.45;
    letter-spacing:-.01em;
    color:#e5e8eb;
    overflow-wrap:anywhere;
    transition:color .2s;
}
.market-item-link {
    display:block;
    border-radius:2px;
}
.market-item-link:focus-visible h3 {
    color:color-mix(in srgb,var(--color-primary) 50%,#fff);
}
.markets-control {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    align-self:center;
    translate:0 -16px;
    padding:0;
    border:1px solid #ffffff26;
    border-radius:50%;
    background:#ffffff04;
    color:#d1d6da;
    transition:color .2s,background .2s,border-color .2s;
}
.markets-control:hover {
    color:var(--color-primary);
    border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);
    background:color-mix(in srgb,var(--color-primary) 8%,transparent);
}
.markets-control[hidden] {
    display:none;
}
.markets-control .icon {
    width:18px;
    height:18px;
}
.markets-prev .icon {
    transform:rotate(180deg);
}
.markets-section :is(a,button):focus-visible {
    outline:2px solid var(--color-primary);
    outline-offset:5px;
}
.markets-status {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}
@media(hover:hover) {
    .market-item:hover .market-visual img {
        transform:scale(1.03);
        filter:brightness(.95);
    }
    .market-item-link:hover h3 {
        color:color-mix(in srgb,var(--color-primary) 50%,#fff);
    }
}
@media(max-width:1000px) {
    .markets-inner {
        gap:24px;
    }
    .markets-intro h2 {
        font-size:2.35rem;
    }
    .markets-carousel.has-controls {
        grid-template-columns:44px minmax(0,1fr) 44px;
        gap:4px;
    }
    .markets-viewport {
        gap:14px;
    }
}
@media(max-width:700px) {
    .markets-inner {
        grid-template-columns:minmax(0,1fr);
        gap:18px;
        padding-block:18px;
    }
    .markets-intro h2 {
        max-width:360px;
        font-size:clamp(2rem,8.5vw,2.3rem);
    }
    .markets-intro {
        padding-bottom:0;
    }
    .markets-intro .text-link {
        margin-top:6px;
    }
}
@media(max-width:580px) {
    .markets-section {
        margin-block:16px 20px;
    }
    .markets-carousel {
        max-width:none;
    }
    .markets-carousel.has-controls {
        grid-template-columns:minmax(0,1fr) 44px 44px minmax(0,1fr);
        gap:10px 12px;
        max-width:none;
    }
    .markets-viewport,.markets-viewport.is-single {
        grid-template-columns:minmax(0,1fr);
        grid-column:1 / -1;
        grid-row:1;
        gap:0;
    }
    .markets-prev {
        grid-column:2;
        grid-row:2;
    }
    .markets-next {
        grid-column:3;
        grid-row:2;
    }
    .markets-control {
        translate:none;
    }
    .market-item h3 {
        font-size:1rem;
    }
}
@media(prefers-reduced-motion:reduce) {
    .markets-section :is(a,h3,img,.icon,button) {
        transition:none;
    }
    .market-item:hover .market-visual img,
    .markets-intro .text-link:hover .icon {
        transform:none;
    }
}
