/* Página inicial do Conecta. A página é toda do Conecta: abre sem o tema, então
   este arquivo cuida também da base do documento, pela classe do body, que só
   ela imprime. Cada seção é um bloco da configuração da home (o banner, as
   categorias, as vitrines, as avaliações e os parceiros), na ordem que a loja
   escolhe; o cartão de produto, a grade e os botões são os da vitrine, e as
   cores, as da marca do cabeçalho. O celular troca só os tokens, salvo o que
   muda de arranjo. */
:root {
    --solex-conecta-inicio-fundo: var(--solex-conecta-cabecalho-marca-fundo, #f2f2f2);
    --solex-conecta-inicio-superficie: var(--solex-conecta-cabecalho-marca-superficie, #ffffff);
    --solex-conecta-inicio-texto: var(--solex-conecta-cabecalho-marca-texto, #000000);
    --solex-conecta-inicio-texto-suave: var(--solex-conecta-cabecalho-marca-texto-suave, #4a4a4a);
    --solex-conecta-inicio-borda: var(--solex-conecta-cabecalho-marca-borda, #d4d4d4);
    --solex-conecta-inicio-borda-forte: var(--solex-conecta-cabecalho-marca-borda-forte, #8c8c8c);
    --solex-conecta-inicio-sombra: var(--solex-conecta-cabecalho-marca-sombra, rgba(0, 0, 0, 0.08));
    --solex-conecta-inicio-acao: var(--solex-conecta-cabecalho-marca-acao, #000000);
    --solex-conecta-inicio-foco: var(--solex-conecta-cabecalho-marca-foco, #000000);
    --solex-conecta-inicio-destaque: var(--solex-conecta-cabecalho-marca-destaque, #f2f2f2);
    --solex-conecta-inicio-texto-destaque: var(--solex-conecta-cabecalho-marca-texto-destaque, #000000);
    --solex-conecta-inicio-ok: var(--solex-conecta-cabecalho-marca-ok-texto, #047857);
    /* Os tons das páginas do checkout: o fundo da página a 40% sobre a
       superfície e a linha a 60%. */
    --solex-conecta-inicio-pagina: color-mix(in srgb, var(--solex-conecta-inicio-fundo) 40%, var(--solex-conecta-inicio-superficie));
    --solex-conecta-inicio-linha: color-mix(in srgb, var(--solex-conecta-inicio-borda) 60%, var(--solex-conecta-inicio-superficie));
    --solex-conecta-inicio-sombra-bloco: 0 1px 2px var(--solex-conecta-inicio-sombra);
    /* A estrela é a cor de ação da marca, como a nota do cartão da vitrine. */
    --solex-conecta-inicio-estrela: var(--solex-conecta-inicio-acao);

    --solex-conecta-inicio-fonte: 'Inter';
    --solex-conecta-inicio-largura: 1180px;
    --solex-conecta-inicio-margem-lateral: 20px;
    --solex-conecta-inicio-respiro-pagina: 24px 0 48px;
    --solex-conecta-inicio-vao-secoes: 40px;
    --solex-conecta-inicio-vao-secao: 16px;
    --solex-conecta-inicio-vao-cabeca: 12px 16px;
    --solex-conecta-inicio-vao-titulo: 12px;
    --solex-conecta-inicio-raio: 16px;
    --solex-conecta-inicio-raio-parceiro: 14px;
    --solex-conecta-inicio-raio-miniatura: 10px;
    --solex-conecta-inicio-raio-circulo: 999px;
    --solex-conecta-inicio-borda-largura: 1px;
    --solex-conecta-inicio-borda-largura-forte: 1.5px;
    --solex-conecta-inicio-foco-largura: 3px;
    --solex-conecta-inicio-foco-recuo: 2px;
    --solex-conecta-inicio-titulo-icone: 36px;
    --solex-conecta-inicio-seta: 44px;

    --solex-conecta-inicio-categorias-colunas: 6;
    --solex-conecta-inicio-categorias-vao: 16px;
    --solex-conecta-inicio-categoria-altura: 132px;
    --solex-conecta-inicio-categoria-respiro: 18px 10px;
    --solex-conecta-inicio-categoria-vao: 10px;
    --solex-conecta-inicio-categoria-icone: 64px;

    /* Quatro avaliações por vez no computador, as colunas da grade da vitrine;
       no celular, uma e o começo da seguinte, para mostrar que a faixa corre. */
    --solex-conecta-inicio-avaliacoes-por-vez: 4;
    --solex-conecta-inicio-avaliacao-largura-celular: 84%;
    --solex-conecta-inicio-avaliacoes-vao: 16px;
    --solex-conecta-inicio-avaliacao-respiro: 18px;
    --solex-conecta-inicio-avaliacao-vao: 12px;
    --solex-conecta-inicio-avaliacao-topo-vao: 6px;
    --solex-conecta-inicio-avaliacao-miniatura: 48px;
    --solex-conecta-inicio-avaliacao-produto-vao: 10px;
    --solex-conecta-inicio-avaliacao-produto-respiro: 12px 0 0;
    --solex-conecta-inicio-nota-vao: 8px;
    --solex-conecta-inicio-nota-respiro: 6px 12px;
    --solex-conecta-inicio-estrelas-vao: 2px;

    --solex-conecta-inicio-parceiros-colunas: 8;
    --solex-conecta-inicio-parceiros-vao: 12px;
    --solex-conecta-inicio-parceiro-altura: 96px;
    --solex-conecta-inicio-parceiro-respiro: 12px;
    --solex-conecta-inicio-parceiro-logo: 72px;

    --solex-conecta-inicio-mais-respiro: 4px 0 0;

    --solex-conecta-inicio-peso-forte: 700;
    --solex-conecta-inicio-peso-medio: 600;
    --solex-conecta-inicio-peso-leve: 500;
    --solex-conecta-inicio-aperto: -0.02em;
    --solex-conecta-inicio-base-tamanho: 15px;
    --solex-conecta-inicio-base-linha: 1.45;
    --solex-conecta-inicio-titulo-tamanho: 22px;
    --solex-conecta-inicio-titulo-linha: 1.2;
    --solex-conecta-inicio-titulo-icone-tamanho: 16px;
    --solex-conecta-inicio-categoria-tamanho: 14.5px;
    --solex-conecta-inicio-categoria-linha: 1.3;
    --solex-conecta-inicio-nota-tamanho: 14px;
    --solex-conecta-inicio-nota-numero-tamanho: 16px;
    --solex-conecta-inicio-estrela-tamanho: 13px;
    --solex-conecta-inicio-avaliacao-tamanho: 15px;
    --solex-conecta-inicio-avaliacao-linha: 1.5;
    --solex-conecta-inicio-avaliacao-linhas: 4;
    --solex-conecta-inicio-verificado-tamanho: 12.5px;
    --solex-conecta-inicio-autor-tamanho: 13px;
    --solex-conecta-inicio-produto-tamanho: 13px;
    --solex-conecta-inicio-produto-linha: 1.35;
    --solex-conecta-inicio-produto-linhas: 2;
    --solex-conecta-inicio-seta-icone: 14px;

    --solex-conecta-inicio-transicao: 0.15s ease;
}

body.solex-conecta-inicio-pagina {
    margin: 0;
    color: var(--solex-conecta-inicio-texto);
    font-family: var(--solex-conecta-inicio-fonte);
    background: var(--solex-conecta-inicio-pagina);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.solex-conecta-inicio {
    display: block;
    box-sizing: border-box;
    padding: var(--solex-conecta-inicio-respiro-pagina);
    color: var(--solex-conecta-inicio-texto);
    font-family: var(--solex-conecta-inicio-fonte);
    font-size: var(--solex-conecta-inicio-base-tamanho);
    line-height: var(--solex-conecta-inicio-base-linha);
    background: var(--solex-conecta-inicio-pagina);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.solex-conecta-inicio *,
.solex-conecta-inicio *::before,
.solex-conecta-inicio *::after {
    box-sizing: border-box;
}

.solex-conecta-inicio-container {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-inicio-vao-secoes);
    width: 100%;
    max-width: var(--solex-conecta-inicio-largura);
    margin: 0 auto;
    padding: 0 var(--solex-conecta-inicio-margem-lateral);
}

/* O texto só para o leitor de tela: o título da página, que a home não mostra. */
.solex-conecta-inicio-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.solex-conecta-inicio-banner-link:focus-visible,
.solex-conecta-inicio-categoria:focus-visible,
.solex-conecta-inicio-seta:focus-visible,
.solex-conecta-inicio-avaliacao-produto:focus-visible,
.solex-conecta-inicio-parceiro:focus-visible {
    outline: var(--solex-conecta-inicio-foco-largura) solid var(--solex-conecta-inicio-foco);
    outline-offset: var(--solex-conecta-inicio-foco-recuo);
}

/* ---------- Seção ---------- */

.solex-conecta-inicio-secao {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-inicio-vao-secao);
    min-width: 0;
}

.solex-conecta-inicio-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--solex-conecta-inicio-vao-cabeca);
    min-width: 0;
}

.solex-conecta-inicio-titulo {
    display: flex;
    align-items: center;
    gap: var(--solex-conecta-inicio-vao-titulo);
    min-width: 0;
    margin: 0;
    font-size: var(--solex-conecta-inicio-titulo-tamanho);
    font-weight: var(--solex-conecta-inicio-peso-forte);
    line-height: var(--solex-conecta-inicio-titulo-linha);
    letter-spacing: var(--solex-conecta-inicio-aperto);
}

/* O ícone de cada título fica num círculo na cor de destaque da marca, com o
   texto do destaque: a cor de ação pura, sobre o fundo claro da página, não
   teria contraste. */
.solex-conecta-inicio-titulo-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-inicio-titulo-icone);
    height: var(--solex-conecta-inicio-titulo-icone);
    color: var(--solex-conecta-inicio-texto-destaque);
    font-size: var(--solex-conecta-inicio-titulo-icone-tamanho);
    background: var(--solex-conecta-inicio-destaque);
    border-radius: var(--solex-conecta-inicio-raio-circulo);
}

.solex-conecta-inicio-mais {
    display: flex;
    justify-content: center;
    padding: var(--solex-conecta-inicio-mais-respiro);
}

/* ---------- Banner ---------- */

.solex-conecta-inicio-banner-link {
    display: block;
    overflow: hidden;
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-linha);
    border-radius: var(--solex-conecta-inicio-raio);
    box-shadow: var(--solex-conecta-inicio-sombra-bloco);
}

/* A proporção vem da largura e da altura da imagem escolhida, que o HTML
   declara; a do celular, quando a loja escolhe uma, traz as dela. */
.solex-conecta-inicio-banner-imagem {
    display: block;
    width: 100%;
    height: auto;
}

/* Com a imagem do celular, o banner vem num <picture>, que fica em linha e
   deixaria o vão da linha embaixo da imagem. */
.solex-conecta-inicio-banner-link picture {
    display: block;
}

/* ---------- Categorias ---------- */

.solex-conecta-inicio-categorias {
    display: grid;
    grid-template-columns: repeat(var(--solex-conecta-inicio-categorias-colunas), minmax(0, 1fr));
    gap: var(--solex-conecta-inicio-categorias-vao);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-inicio-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--solex-conecta-inicio-categoria-vao);
    height: 100%;
    min-height: var(--solex-conecta-inicio-categoria-altura);
    padding: var(--solex-conecta-inicio-categoria-respiro);
    color: var(--solex-conecta-inicio-texto);
    text-align: center;
    text-decoration: none;
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-borda);
    border-radius: var(--solex-conecta-inicio-raio);
    box-shadow: var(--solex-conecta-inicio-sombra-bloco);
    transition: border-color var(--solex-conecta-inicio-transicao);
}

/* No mouse, só a borda escurece, como no cartão da vitrine. */
.solex-conecta-inicio-categoria:hover {
    border-color: var(--solex-conecta-inicio-texto);
}

.solex-conecta-inicio-categoria-icone {
    display: block;
    width: var(--solex-conecta-inicio-categoria-icone);
    height: var(--solex-conecta-inicio-categoria-icone);
    object-fit: contain;
}

.solex-conecta-inicio-categoria-nome {
    font-size: var(--solex-conecta-inicio-categoria-tamanho);
    font-weight: var(--solex-conecta-inicio-peso-medio);
    line-height: var(--solex-conecta-inicio-categoria-linha);
    overflow-wrap: anywhere;
}

/* ---------- Avaliações ---------- */

/* A pílula tem o tamanho do texto, e não a largura da seção. */
.solex-conecta-inicio-nota-loja {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    gap: var(--solex-conecta-inicio-nota-vao);
    margin: 0;
    padding: var(--solex-conecta-inicio-nota-respiro);
    color: var(--solex-conecta-inicio-texto-suave);
    font-size: var(--solex-conecta-inicio-nota-tamanho);
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-linha);
    border-radius: var(--solex-conecta-inicio-raio-circulo);
}

.solex-conecta-inicio-nota-loja strong {
    color: var(--solex-conecta-inicio-texto);
    font-size: var(--solex-conecta-inicio-nota-numero-tamanho);
    font-weight: var(--solex-conecta-inicio-peso-forte);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-inicio-estrelas {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-inicio-estrelas-vao);
    color: var(--solex-conecta-inicio-estrela);
    font-size: var(--solex-conecta-inicio-estrela-tamanho);
}

.solex-conecta-inicio-controles {
    display: flex;
    gap: var(--solex-conecta-inicio-vao-titulo);
}

.solex-conecta-inicio-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-inicio-seta);
    height: var(--solex-conecta-inicio-seta);
    margin: 0;
    padding: 0;
    color: var(--solex-conecta-inicio-texto);
    font-size: var(--solex-conecta-inicio-seta-icone);
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura-forte) solid var(--solex-conecta-inicio-borda-forte);
    border-radius: var(--solex-conecta-inicio-raio-circulo);
    cursor: pointer;
    transition: border-color var(--solex-conecta-inicio-transicao);
}

.solex-conecta-inicio-seta:hover {
    border-color: var(--solex-conecta-inicio-texto);
}

/* No começo e no fim da faixa a seta daquele lado não leva a lugar nenhum. Ela
   fica desligada pelo aria-disabled, e não pelo disabled, que tiraria o foco de
   quem a acionou pelo teclado. */
.solex-conecta-inicio-seta[aria-disabled="true"] {
    color: var(--solex-conecta-inicio-borda-forte);
    border-color: var(--solex-conecta-inicio-linha);
    cursor: default;
}

/* No computador a faixa não rola pela mão: as setas levam de quatro em quatro.
   No celular ela corre com o dedo, avaliação por avaliação. Nas duas larguras ela
   para no começo de um cartão: no computador, o foco do teclado que traz um
   cartão à vista e a largura que muda sem o evento da tela também deixariam um
   cartão cortado na borda. */
.solex-conecta-inicio-avaliacoes-janela {
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.solex-conecta-inicio-avaliacoes {
    display: grid;
    grid-auto-columns: calc((100% - (var(--solex-conecta-inicio-avaliacoes-por-vez) - 1) * var(--solex-conecta-inicio-avaliacoes-vao)) / var(--solex-conecta-inicio-avaliacoes-por-vez));
    grid-auto-flow: column;
    gap: var(--solex-conecta-inicio-avaliacoes-vao);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-inicio-avaliacao {
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

.solex-conecta-inicio-avaliacao-cartao {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-inicio-avaliacao-vao);
    width: 100%;
    min-width: 0;
    padding: var(--solex-conecta-inicio-avaliacao-respiro);
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-borda);
    border-radius: var(--solex-conecta-inicio-raio);
    box-shadow: var(--solex-conecta-inicio-sombra-bloco);
}

/* A nota em cima e a compra verificada embaixo: lado a lado, os dois não cabem no
   cartão de quatro colunas em 950px. */
.solex-conecta-inicio-avaliacao-topo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--solex-conecta-inicio-avaliacao-topo-vao);
}

.solex-conecta-inicio-verificado {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-inicio-estrelas-vao);
    color: var(--solex-conecta-inicio-ok);
    font-size: var(--solex-conecta-inicio-verificado-tamanho);
    font-weight: var(--solex-conecta-inicio-peso-medio);
}

.solex-conecta-inicio-avaliacao-texto {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--solex-conecta-inicio-avaliacao-tamanho);
    line-height: var(--solex-conecta-inicio-avaliacao-linha);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--solex-conecta-inicio-avaliacao-linhas);
    line-clamp: var(--solex-conecta-inicio-avaliacao-linhas);
}

.solex-conecta-inicio-avaliacao-autor {
    margin: 0;
    color: var(--solex-conecta-inicio-texto-suave);
    font-size: var(--solex-conecta-inicio-autor-tamanho);
}

.solex-conecta-inicio-avaliacao-autor strong {
    color: var(--solex-conecta-inicio-texto);
    font-weight: var(--solex-conecta-inicio-peso-medio);
}

/* O produto fecha o cartão, na mesma altura em todos da fileira. */
.solex-conecta-inicio-avaliacao-produto {
    display: flex;
    align-items: center;
    gap: var(--solex-conecta-inicio-avaliacao-produto-vao);
    margin-top: auto;
    padding: var(--solex-conecta-inicio-avaliacao-produto-respiro);
    color: var(--solex-conecta-inicio-texto);
    text-decoration: none;
    border-top: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-linha);
}

.solex-conecta-inicio-avaliacao-produto img {
    display: block;
    flex: 0 0 auto;
    width: var(--solex-conecta-inicio-avaliacao-miniatura);
    height: var(--solex-conecta-inicio-avaliacao-miniatura);
    object-fit: contain;
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-linha);
    border-radius: var(--solex-conecta-inicio-raio-miniatura);
}

.solex-conecta-inicio-avaliacao-produto span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    font-size: var(--solex-conecta-inicio-produto-tamanho);
    font-weight: var(--solex-conecta-inicio-peso-medio);
    line-height: var(--solex-conecta-inicio-produto-linha);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--solex-conecta-inicio-produto-linhas);
    line-clamp: var(--solex-conecta-inicio-produto-linhas);
}

.solex-conecta-inicio-avaliacao-produto:hover span {
    text-decoration: underline;
}

/* ---------- Parceiros ---------- */

.solex-conecta-inicio-parceiros {
    display: grid;
    grid-template-columns: repeat(var(--solex-conecta-inicio-parceiros-colunas), minmax(0, 1fr));
    gap: var(--solex-conecta-inicio-parceiros-vao);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-inicio-parceiro {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: var(--solex-conecta-inicio-parceiro-altura);
    padding: var(--solex-conecta-inicio-parceiro-respiro);
    background: var(--solex-conecta-inicio-superficie);
    border: var(--solex-conecta-inicio-borda-largura) solid var(--solex-conecta-inicio-borda);
    border-radius: var(--solex-conecta-inicio-raio-parceiro);
    box-shadow: var(--solex-conecta-inicio-sombra-bloco);
    transition: border-color var(--solex-conecta-inicio-transicao);
}

.solex-conecta-inicio-parceiro:hover {
    border-color: var(--solex-conecta-inicio-texto);
}

/* O logo é a imagem quadrada que a loja escolhe, com a margem dela: a largura e a
   altura do HTML dão a proporção, e o logo ocupa o lado do token. */
.solex-conecta-inicio-parceiro img {
    display: block;
    width: var(--solex-conecta-inicio-parceiro-logo);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .solex-conecta-inicio-categoria,
    .solex-conecta-inicio-seta,
    .solex-conecta-inicio-parceiro {
        transition: none;
    }

    .solex-conecta-inicio-avaliacoes-janela {
        scroll-behavior: auto;
    }
}

@media (max-width: 949px) {
    :root {
        --solex-conecta-inicio-margem-lateral: 12px;
        --solex-conecta-inicio-respiro-pagina: 12px 0 32px;
        --solex-conecta-inicio-vao-secoes: 28px;
        --solex-conecta-inicio-vao-secao: 12px;
        --solex-conecta-inicio-vao-titulo: 10px;
        --solex-conecta-inicio-raio: 14px;
        --solex-conecta-inicio-titulo-tamanho: 19px;
        --solex-conecta-inicio-titulo-icone: 32px;
        --solex-conecta-inicio-titulo-icone-tamanho: 14px;
        --solex-conecta-inicio-seta: 40px;

        --solex-conecta-inicio-categorias-colunas: 3;
        --solex-conecta-inicio-categorias-vao: 10px;
        --solex-conecta-inicio-categoria-altura: 104px;
        --solex-conecta-inicio-categoria-respiro: 12px 6px;
        --solex-conecta-inicio-categoria-vao: 8px;
        --solex-conecta-inicio-categoria-icone: 44px;
        --solex-conecta-inicio-categoria-tamanho: 13px;

        --solex-conecta-inicio-avaliacoes-vao: 10px;
        --solex-conecta-inicio-avaliacao-respiro: 14px;
        --solex-conecta-inicio-avaliacao-vao: 10px;
        --solex-conecta-inicio-avaliacao-tamanho: 14.5px;

        --solex-conecta-inicio-parceiros-colunas: 4;
        --solex-conecta-inicio-parceiros-vao: 10px;
        --solex-conecta-inicio-parceiro-altura: 72px;
        --solex-conecta-inicio-parceiro-respiro: 8px;
        --solex-conecta-inicio-parceiro-logo: 56px;
    }

    /* No celular a faixa corre com o dedo, e o começo do cartão seguinte mostra
       que há mais; as setas ficariam sozinhas numa linha embaixo do título. Pelo
       teclado, o foco no link do produto traz o cartão para a tela. */
    .solex-conecta-inicio-controles {
        display: none;
    }

    /* A faixa corre com o dedo dentro dela, e a página não rola para o lado. */
    .solex-conecta-inicio-avaliacoes-janela {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .solex-conecta-inicio-avaliacoes-janela::-webkit-scrollbar {
        display: none;
    }

    .solex-conecta-inicio-avaliacoes {
        grid-auto-columns: var(--solex-conecta-inicio-avaliacao-largura-celular);
    }

    .solex-conecta-inicio-mais .solex-conecta-vitrine-botao {
        width: 100%;
    }
}