/* Rodapé das páginas da loja.

   O rodapé vive no fim das páginas do tema, que continua carregando as folhas
   dele para o conteúdo, e o tema pode ser qualquer um. Por isso cada
   propriedade que importa está dita aqui, e todo seletor que alcança a peça
   passa pelo id da raiz: o id vence qualquer regra do tema escrita só com
   classes, tipos e estados, que é como os temas escrevem as do link, do botão e
   do título, também no hover e no foco. O que o desenho não diz volta ao padrão
   do navegador (bloco logo depois das cores), e não ao do tema. Só o contorno
   do foco vai com !important: há tema que tira ou impõe com !important o
   contorno de todo elemento, e o id não vence !important.

   O que mora dentro de um bloco de código fica de fora da volta ao padrão e dos
   ajustes de link, botão, imagem e ícone: é código de outro site (anúncio,
   selo de reputação), que traz o próprio estilo e conta com o da página.

   As cores chegam prontas da paleta que o módulo monta com as três cores da
   página Rodapé, medida contra o fundo em que cada cor aparece. O valor depois
   da vírgula é o que vale se a paleta não chegar: preto sobre branco, legível
   em qualquer loja, ou uma cor já medida contra o mesmo fundo. As cores fixas
   são as de sucesso, que têm o mesmo significado em qualquer loja. */
:root {
    --solex-conecta-rodape-fundo: var(--solex-conecta-rodape-marca-fundo, #f2f2f2);
    --solex-conecta-rodape-superficie: var(--solex-conecta-rodape-marca-superficie, #ffffff);
    --solex-conecta-rodape-texto: var(--solex-conecta-rodape-marca-texto, #000000);
    /* As letras do título e do texto da faixa Fale com a gente, medidas contra o
       painel, que é o fundo dela: a do texto é medida só contra a superfície. */
    --solex-conecta-rodape-texto-painel: var(--solex-conecta-rodape-marca-texto-painel, var(--solex-conecta-rodape-texto));
    --solex-conecta-rodape-texto-suave: var(--solex-conecta-rodape-marca-texto-suave, #4a4a4a);
    --solex-conecta-rodape-texto-suave-painel: var(--solex-conecta-rodape-marca-texto-suave-painel, var(--solex-conecta-rodape-texto-suave));
    --solex-conecta-rodape-borda: var(--solex-conecta-rodape-marca-borda, #d4d4d4);
    --solex-conecta-rodape-borda-forte: var(--solex-conecta-rodape-marca-borda-forte, #8c8c8c);
    --solex-conecta-rodape-acao: var(--solex-conecta-rodape-marca-acao, #000000);
    --solex-conecta-rodape-acao-texto: var(--solex-conecta-rodape-marca-acao-texto, #ffffff);
    /* A cor de ação na barra final, que tem o texto como fundo: o módulo a mede
       contra o texto e, quando ela não se destaca dele, manda a cor da letra da
       barra. */
    --solex-conecta-rodape-acao-na-base: var(--solex-conecta-rodape-marca-acao-na-base, var(--solex-conecta-rodape-superficie));
    /* As letras dos dados da empresa e da assinatura, mais apagadas que a da
       barra e medidas contra ela. Sem elas na paleta, ficam na letra da barra. */
    --solex-conecta-rodape-texto-empresa: var(--solex-conecta-rodape-marca-texto-empresa, var(--solex-conecta-rodape-superficie));
    --solex-conecta-rodape-texto-assinatura: var(--solex-conecta-rodape-marca-texto-assinatura, var(--solex-conecta-rodape-superficie));
    /* O contorno do foco usa esta cor pura: é ela que o módulo mede contra a
       superfície e contra o painel da faixa Fale com a gente, e misturada com
       transparente perderia o contraste medido. */
    --solex-conecta-rodape-foco: var(--solex-conecta-rodape-marca-foco, #000000);
    /* O desenho é o das páginas do checkout: os tons saem da paleta pela mesma
       mistura de lá. A linha é a borda a 60% sobre a superfície. O painel é o
       tom claro (o fundo a 40%), que o módulo pinta pronto para medir as letras
       da faixa contra ele; sem ele na paleta, vale a mesma mistura feita pelo
       navegador. */
    --solex-conecta-rodape-linha: color-mix(in srgb, var(--solex-conecta-rodape-borda) 60%, var(--solex-conecta-rodape-superficie));
    --solex-conecta-rodape-painel: var(--solex-conecta-rodape-marca-painel, color-mix(in srgb, var(--solex-conecta-rodape-fundo) 40%, var(--solex-conecta-rodape-superficie)));
    /* O verde de sucesso parte do da paleta, que o ajusta à superfície como no
       checkout, e o módulo o leva a se ler nos dois fundos verdes do botão do
       WhatsApp, que ele pinta prontos. Sem eles na paleta, o botão fica na
       superfície. */
    --solex-conecta-rodape-ok: var(--solex-conecta-rodape-marca-ok-texto, #047857);
    --solex-conecta-rodape-ok-fundo: var(--solex-conecta-rodape-marca-ok-fundo, var(--solex-conecta-rodape-superficie));
    --solex-conecta-rodape-ok-fundo-mouse: var(--solex-conecta-rodape-marca-ok-fundo-mouse, var(--solex-conecta-rodape-ok-fundo));
    --solex-conecta-rodape-ok-borda: rgba(5, 150, 105, 0.28);
    /* A Inter do produto, a mesma das páginas do checkout e sem fonte de reserva,
       como lá (css/solex-conecta-inter.css). */
    --solex-conecta-rodape-fonte: 'Inter';
    --solex-conecta-rodape-largura: 1180px;
}

/* Dentro da peça, toda propriedade volta ao padrão do navegador, que é o mesmo
   em qualquer loja. O padrão fica acima de qualquer regra do tema sem id e
   abaixo de qualquer regra daqui: as que vêm depois no arquivo têm a mesma força
   dele, como a da raiz, ou uma classe a mais depois do id. A raiz declara o que
   passa de pai para filho (a cor e o texto), porque sem isso viria do corpo da
   página do tema. Pelo mesmo motivo ficam fixos a visibilidade, o cursor, o
   ajuste de letra do celular, o realce do toque e o esquema claro dos controles
   do navegador, cujo "only" também impede o escurecimento automático, que
   trocaria as cores medidas da paleta. A imagem fica de fora: o revert
   descartaria também a largura e a altura que o HTML dela declara, e com elas a
   proporção reservada antes de a imagem chegar. O :where() tira o conteúdo dos
   blocos de código sem dar força a mais ao seletor. */
#solex-conecta-rodape {
    all: revert;
    box-sizing: border-box;
    color: var(--solex-conecta-rodape-texto);
    font-family: var(--solex-conecta-rodape-fonte);
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-kerning: auto;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
    text-indent: 0;
    text-transform: none;
    text-shadow: none;
    text-rendering: auto;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    visibility: visible;
    cursor: auto;
    color-scheme: light only;
    background: var(--solex-conecta-rodape-superficie);
    border-top: 1px solid var(--solex-conecta-rodape-linha);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

#solex-conecta-rodape :not(img, svg, svg *):not(:where(.solex-conecta-rodape-bloco *)),
#solex-conecta-rodape::before,
#solex-conecta-rodape::after,
#solex-conecta-rodape *:not(:where(.solex-conecta-rodape-bloco *))::before,
#solex-conecta-rodape *:not(:where(.solex-conecta-rodape-bloco *))::after {
    all: revert;
    box-sizing: border-box;
}

/* O que o padrão do navegador mudaria no desenho fica dito aqui: o link não
   ganha o sublinhado nem a cor de link do navegador; o botão usa a letra do
   texto em volta, e não a do sistema, mostra a mão, se alinha ao meio da linha,
   não passa da largura de quem o contém, nunca fica mais estreito que o alvo
   mínimo de toque (24px) e liga na letra dele o crenado e as ligaduras
   (optimizeLegibility); o toque não espera o duplo toque de aproximar. */
#solex-conecta-rodape a:not(:where(.solex-conecta-rodape-bloco *)) {
    color: inherit;
    text-decoration: none;
    touch-action: manipulation;
}

#solex-conecta-rodape button:not(:where(.solex-conecta-rodape-bloco *)) {
    position: relative;
    min-width: 24px;
    max-width: 100%;
    overflow: visible;
    font: inherit;
    text-rendering: optimizeLegibility;
    vertical-align: middle;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

/* A imagem, que fica fora do padrão do navegador, perde aqui o que os temas
   costumam pôr nela: margem, moldura, sombra, filtro, ampliação e a escala
   serrilhada. */
#solex-conecta-rodape img:not(:where(.solex-conecta-rodape-bloco *)) {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    image-rendering: auto;
    transform: none;
    vertical-align: middle;
}

/* Os ícones do Font Awesome dentro da peça. O padrão do navegador desfaz o que
   a folha da biblioteca põe no ícone, e a família vai pelo nome: o tema que traz
   outra versão do Font Awesome dá a ela as mesmas classes, e a letra do ícone
   seria a dele. O nome é o da versão em bibliotecas/fontawesome, e muda junto
   com ela. A posição e o alinhamento são os daqui: o tema dá a todo ícone
   dentro de botão um deslocamento próprio, que entortaria os botões. */
#solex-conecta-rodape i.fas:not(:where(.solex-conecta-rodape-bloco *)),
#solex-conecta-rodape i.fa-brands:not(:where(.solex-conecta-rodape-bloco *)) {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--fa-width, 1.25em);
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    font-feature-settings: normal;
    font-synthesis: none;
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#solex-conecta-rodape i.fa-brands:not(:where(.solex-conecta-rodape-bloco *)) {
    font-family: "Font Awesome 7 Brands";
    font-weight: 400;
}

#solex-conecta-rodape i.fas:not(:where(.solex-conecta-rodape-bloco *))::before,
#solex-conecta-rodape i.fa-brands:not(:where(.solex-conecta-rodape-bloco *))::before {
    content: var(--fa) / "";
}

/* O texto alternativo vazio diz ao leitor de tela que o desenho não é texto; o
   navegador que não o entende descartaria a declaração inteira. */
@supports not (content: "" / "") {
    #solex-conecta-rodape i.fas:not(:where(.solex-conecta-rodape-bloco *))::before,
    #solex-conecta-rodape i.fa-brands:not(:where(.solex-conecta-rodape-bloco *))::before {
        content: var(--fa);
    }
}

/* Texto só para leitor de tela. */
#solex-conecta-rodape .solex-conecta-rodape-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-rodape .solex-conecta-rodape-container {
    width: 100%;
    max-width: var(--solex-conecta-rodape-largura);
    margin: 0 auto;
    padding: 0 20px;
}

#solex-conecta-rodape .solex-conecta-rodape-corpo {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 40px;
    padding-bottom: 36px;
}

/* Aqui e em todo o arquivo, o contorno do foco vai com !important: há tema que
   tira ou impõe com !important o contorno de todo elemento, e o id não vence
   !important. */
#solex-conecta-rodape .solex-conecta-rodape-botao:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-marca-link:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-link:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-rede:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-app:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-selo-link:focus-visible,
#solex-conecta-rodape .solex-conecta-rodape-coluna-abrir:focus-visible {
    outline: 3px solid var(--solex-conecta-rodape-foco) !important;
    outline-offset: 2px;
}

/* ===================== Fale com a gente ===================== */

#solex-conecta-rodape .solex-conecta-rodape-contato {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 20px 24px;
    background: var(--solex-conecta-rodape-painel);
    border: 1px solid var(--solex-conecta-rodape-linha);
    border-radius: 18px;
}

#solex-conecta-rodape .solex-conecta-rodape-contato-icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--solex-conecta-rodape-acao-texto);
    font-size: 22px;
    background: var(--solex-conecta-rodape-acao);
    border-radius: 14px;
}

#solex-conecta-rodape .solex-conecta-rodape-contato-corpo {
    min-width: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-contato-titulo {
    margin: 0;
    color: var(--solex-conecta-rodape-texto-painel);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

#solex-conecta-rodape .solex-conecta-rodape-contato-texto {
    margin: 4px 0 0;
    color: var(--solex-conecta-rodape-texto-suave-painel);
    font-size: 14px;
    line-height: 1.45;
}

#solex-conecta-rodape .solex-conecta-rodape-contato-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#solex-conecta-rodape .solex-conecta-rodape-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px;
    color: var(--solex-conecta-rodape-texto);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    background: var(--solex-conecta-rodape-superficie);
    border: 1.5px solid var(--solex-conecta-rodape-borda-forte);
    border-radius: 14px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#solex-conecta-rodape .solex-conecta-rodape-botao:hover {
    color: var(--solex-conecta-rodape-texto);
    border-color: var(--solex-conecta-rodape-texto);
}

#solex-conecta-rodape .solex-conecta-rodape-botao.is-whatsapp {
    color: var(--solex-conecta-rodape-ok);
    background: var(--solex-conecta-rodape-ok-fundo);
    border-color: var(--solex-conecta-rodape-ok-borda);
}

#solex-conecta-rodape .solex-conecta-rodape-botao.is-whatsapp:hover {
    color: var(--solex-conecta-rodape-ok);
    background: var(--solex-conecta-rodape-ok-fundo-mouse);
    border-color: var(--solex-conecta-rodape-ok);
}

#solex-conecta-rodape .solex-conecta-rodape-botao i {
    font-size: 16px;
}

/* ===================== Colunas ===================== */

/* As faixas vêm no HTML: uma para a marca e uma por coluna de links que a loja
   tem (Solex_Conecta_Rodape_Montagem::html_rodape()). */
#solex-conecta-rodape .solex-conecta-rodape-colunas {
    display: grid;
    grid-template-columns: var(--solex-conecta-rodape-faixas, minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)));
    gap: 32px;
}

#solex-conecta-rodape .solex-conecta-rodape-marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-marca-link {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
    border-radius: 6px;
}

/* Como o logo do painel da página de compra: 38px de altura, ou menos no logo
   largo, pela proporção que o template entrega. */
#solex-conecta-rodape .solex-conecta-rodape-logo {
    display: block;
    width: auto;
    max-width: none;
    height: min(38px, calc(240px / var(--solex-conecta-rodape-logo-proporcao, 1)));
    opacity: 1;
    transition: none;
}

#solex-conecta-rodape .solex-conecta-rodape-nome {
    color: var(--solex-conecta-rodape-texto);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

#solex-conecta-rodape .solex-conecta-rodape-descricao {
    max-width: 36ch;
    margin: 0;
    color: var(--solex-conecta-rodape-texto-suave);
    font-size: 14px;
    line-height: 1.45;
}

#solex-conecta-rodape .solex-conecta-rodape-redes,
#solex-conecta-rodape .solex-conecta-rodape-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#solex-conecta-rodape .solex-conecta-rodape-redes > li,
#solex-conecta-rodape .solex-conecta-rodape-apps > li,
#solex-conecta-rodape .solex-conecta-rodape-links > li,
#solex-conecta-rodape .solex-conecta-rodape-selos > li,
#solex-conecta-rodape .solex-conecta-rodape-pagamentos > li {
    margin: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--solex-conecta-rodape-texto);
    font-size: 17px;
    text-decoration: none;
    background: var(--solex-conecta-rodape-superficie);
    border: 1px solid var(--solex-conecta-rodape-linha);
    border-radius: 999px;
    transition: border-color 0.15s ease;
}

#solex-conecta-rodape .solex-conecta-rodape-rede:hover {
    color: var(--solex-conecta-rodape-texto);
    border-color: var(--solex-conecta-rodape-texto);
}

#solex-conecta-rodape .solex-conecta-rodape-app {
    display: inline-flex;
    line-height: 0;
    border-radius: 6px;
    transition: opacity 0.15s ease;
}

#solex-conecta-rodape .solex-conecta-rodape-app:hover {
    opacity: 0.8;
}

#solex-conecta-rodape .solex-conecta-rodape-app img {
    display: block;
    width: auto;
    max-width: none;
    height: 40px;
    opacity: 1;
    transition: none;
}

#solex-conecta-rodape .solex-conecta-rodape-coluna {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-coluna-titulo {
    margin: 0;
    color: var(--solex-conecta-rodape-texto);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* No computador o título é só título; o botão que abre a coluna existe para o
   celular, onde as colunas viram sanfonas. */
#solex-conecta-rodape .solex-conecta-rodape-coluna-abrir {
    display: none;
}

#solex-conecta-rodape .solex-conecta-rodape-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#solex-conecta-rodape .solex-conecta-rodape-link {
    display: inline-flex;
    color: var(--solex-conecta-rodape-texto-suave);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

#solex-conecta-rodape .solex-conecta-rodape-link:hover {
    color: var(--solex-conecta-rodape-texto);
    text-decoration-line: underline;
}

/* ===================== Segurança e pagamento ===================== */

#solex-conecta-rodape .solex-conecta-rodape-confianca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px 40px;
    padding-top: 28px;
    border-top: 1px solid var(--solex-conecta-rodape-linha);
}

#solex-conecta-rodape .solex-conecta-rodape-confianca-bloco {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#solex-conecta-rodape .solex-conecta-rodape-selo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 6px 10px;
    line-height: 0;
    text-decoration: none;
    background: var(--solex-conecta-rodape-superficie);
    border: 1px solid var(--solex-conecta-rodape-linha);
    border-radius: 14px;
    transition: border-color 0.15s ease;
}

/* Só o selo com link muda sob o mouse: o sem link não é controle. */
#solex-conecta-rodape a.solex-conecta-rodape-selo-link:hover {
    border-color: var(--solex-conecta-rodape-texto);
}

#solex-conecta-rodape .solex-conecta-rodape-selo-link img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 44px;
    object-fit: contain;
    opacity: 1;
    transition: none;
}

#solex-conecta-rodape .solex-conecta-rodape-pagamentos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#solex-conecta-rodape .solex-conecta-rodape-pagamento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 56px;
    height: 38px;
    padding: 0 10px;
    color: var(--solex-conecta-rodape-texto);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    background: var(--solex-conecta-rodape-superficie);
    border: 1px solid var(--solex-conecta-rodape-linha);
    border-radius: 10px;
}

#solex-conecta-rodape .solex-conecta-rodape-pagamento i.fa-brands {
    font-size: 24px;
}

#solex-conecta-rodape .solex-conecta-rodape-pagamento i.fas {
    font-size: 15px;
}

#solex-conecta-rodape .solex-conecta-rodape-pagamento svg {
    display: block;
    width: 42px;
    height: 21px;
    fill: currentColor;
}

/* A imagem própria de uma forma de pagamento cabe na altura dos ícones. */
#solex-conecta-rodape .solex-conecta-rodape-pagamento img {
    display: block;
    width: auto;
    max-width: 64px;
    height: 24px;
    object-fit: contain;
    opacity: 1;
    transition: none;
}

/* ===================== Blocos de código ===================== */

/* O código de fora desenha o que quiser dentro do bloco; daqui só vêm a
   largura e o respiro entre um bloco e outro. */
#solex-conecta-rodape .solex-conecta-rodape-blocos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#solex-conecta-rodape .solex-conecta-rodape-blocos.is-selos {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Código de fora pode desenhar mais largo que a tela: o excedente fica
   escondido, para a página não ganhar rolagem lateral. */
#solex-conecta-rodape .solex-conecta-rodape-bloco {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* ===================== Barra final ===================== */

#solex-conecta-rodape .solex-conecta-rodape-base {
    color: var(--solex-conecta-rodape-superficie);
    background: var(--solex-conecta-rodape-texto);
}

#solex-conecta-rodape .solex-conecta-rodape-base-conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
    padding-top: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

#solex-conecta-rodape .solex-conecta-rodape-legal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 760px;
}

#solex-conecta-rodape .solex-conecta-rodape-copia {
    margin: 0;
    color: var(--solex-conecta-rodape-superficie);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

#solex-conecta-rodape .solex-conecta-rodape-empresa {
    margin: 0;
    color: var(--solex-conecta-rodape-texto-empresa);
    font-size: 12px;
    line-height: 1.55;
}

/* Assinatura do desenvolvedor: parte fixa do produto, de propósito. */
#solex-conecta-rodape .solex-conecta-rodape-assinatura {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: var(--solex-conecta-rodape-texto-assinatura);
    font-size: 12.5px;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease;
}

#solex-conecta-rodape .solex-conecta-rodape-assinatura strong {
    color: var(--solex-conecta-rodape-superficie);
    font-weight: 700;
}

/* O sublinhado é desenho, e não texto: fica mais apagado que a letra. */
#solex-conecta-rodape .solex-conecta-rodape-assinatura-acao {
    font-size: 12px;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--solex-conecta-rodape-superficie) 35%, transparent);
    text-underline-offset: 3px;
}

#solex-conecta-rodape .solex-conecta-rodape-assinatura:hover {
    color: var(--solex-conecta-rodape-superficie);
}

#solex-conecta-rodape .solex-conecta-rodape-assinatura:focus-visible {
    outline: 3px solid var(--solex-conecta-rodape-acao-na-base) !important;
    outline-offset: 3px;
}

/* ===================== Celular ===================== */

@media (max-width: 949px) {
    #solex-conecta-rodape .solex-conecta-rodape-container {
        padding: 0 14px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-corpo {
        gap: 24px;
        padding-top: 24px;
        padding-bottom: 28px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-contato {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-contato-icone {
        width: 44px;
        height: 44px;
        font-size: 19px;
        border-radius: 12px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-contato-titulo {
        font-size: 18px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-contato-texto {
        font-size: 13.5px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-contato-acoes {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #solex-conecta-rodape .solex-conecta-rodape-botao.is-whatsapp {
        grid-column: 1 / -1;
    }

    #solex-conecta-rodape .solex-conecta-rodape-colunas {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    #solex-conecta-rodape .solex-conecta-rodape-marca {
        gap: 14px;
        padding-bottom: 22px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-logo {
        height: min(34px, calc(200px / var(--solex-conecta-rodape-logo-proporcao, 1)));
    }

    #solex-conecta-rodape .solex-conecta-rodape-rede {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna {
        gap: 0;
        border-top: 1px solid var(--solex-conecta-rodape-linha);
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna-texto {
        display: none;
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna-abrir {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 0 4px;
        color: var(--solex-conecta-rodape-texto);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.01em;
        text-align: left;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna-abrir i.fas {
        color: var(--solex-conecta-rodape-texto-suave);
        font-size: 13px;
        transition: transform 0.2s ease;
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna.is-aberta .solex-conecta-rodape-coluna-abrir i.fas {
        transform: rotate(180deg);
    }

    #solex-conecta-rodape .solex-conecta-rodape-coluna:not(.is-aberta) .solex-conecta-rodape-links {
        display: none;
    }

    #solex-conecta-rodape .solex-conecta-rodape-links {
        gap: 0;
        padding: 0 4px 14px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 15px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-confianca {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding-top: 22px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-selos > li {
        flex: 1 1 calc(50% - 5px);
    }

    #solex-conecta-rodape .solex-conecta-rodape-selo-link {
        width: 100%;
        min-width: 0;
    }

    #solex-conecta-rodape .solex-conecta-rodape-selo-link img {
        max-width: 100%;
    }

    #solex-conecta-rodape .solex-conecta-rodape-base-conteudo {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-top: 18px;
    }

    #solex-conecta-rodape .solex-conecta-rodape-assinatura {
        align-items: flex-start;
        text-align: left;
    }
}