/* ==========================================================================
   ChatISP: rodape

   Carregado depois de css/site.css. So classes .rodape*, so var().
   Os primitivos (.container, .sobretitulo, .cartao-icone) vem de site.css e
   NAO sao redefinidos aqui.

   Duas decisoes que valem a leitura:

   1) O rodape desenha a divisa do topo, e ela e a MESMA de todo o site: a
      sombra interna de --divisa-topo. O rodape esta fora de <main>, logo fora
      do alcance do `.em-papel + .secao` que deduz as outras 38 passagens
      (css/site.css, secao 05). Entao a regra e repetida a mao aqui, com os
      mesmos tokens, e nao substituida por outra coisa.

      Ate 21/09/2026 quem fazia essa passagem era um linear-gradient em
      css/sec-contato.css. Nao servia: degrade de transparente ate quase-preto
      sobre o verde claro do #contato escurece por oliva, e 110px de oliva no
      fim da home e exatamente o borrao que a regra geral proibe. Sombra preta
      sobre o preto do rodape nao tem esse problema porque nunca sai do
      escuro. Nota completa em css/sec-contato.css.

   2) Nao existe assinatura tipografica gigante. A "cara de empresa grande"
      vem da densidade organizada: bloco institucional com razao social, CNPJ
      e canais, quatro colunas de navegacao e uma faixa inferior com os
      documentos legais.

   Breakpoints: 1200 / 980 / 680 / 380.
   ========================================================================== */

.rodape {
    position: relative;
    isolation: isolate;
    background: var(--sup-0);
    color: var(--suave);
    font-size: var(--c3);
    /* A divisa do capitulo verde para o preto. Valores identicos aos de
       `.em-papel + .secao`: a sombra entra --divisa-altura para dentro, com
       raio de 82% dela e spread negativo de 72%, que e o que mantem o escuro
       preso ao topo em vez de vazar para os lados. */
    box-shadow: inset 0 var(--divisa-altura) calc(var(--divisa-altura) * .82)
        calc(var(--divisa-altura) * -.72) var(--divisa-cor);
    /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
       daqui para dentro passam a medir esta caixa, que nunca rola, e o
       movimento congela. Nota longa em css/sec-conexoes.css. */
    overflow: hidden;
    overflow: clip;
}

/* Unica camada de atmosfera: um claro muito baixo nascendo da base da pagina,
   com parallax de forca reduzida. Fica colado no rodape do rodape para nao
   encostar na juncao com #contato, que precisa continuar limpa. */
.rodape-atmosfera {
    --mov-forca: 2%;
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 66%;
    background: radial-gradient(58% 100% at 50% 100%, var(--verde-vidro), transparent 72%);
    pointer-events: none;
}

/* --- Grade: institucional + colunas ------------------------------------- */

.rodape-mapa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    gap: var(--esp-grid);
    padding-block: var(--esp-secao-curta) var(--esp-bloco);
}

/* --- Bloco institucional ------------------------------------------------ */

.rodape-institucional {
    display: grid;
    align-content: start;
    gap: var(--e5);
    max-width: 44ch;
}

.rodape-marca {
    display: inline-flex;
    width: fit-content;
}

.rodape-marca .marca-vetor {
    width: 162px;
    height: auto;
}

.rodape-descricao {
    margin: 0;
    font-size: var(--c3);
    line-height: 1.75;
    color: var(--suave);
}

/* --- Botoes de canal ---------------------------------------------------- */

.rodape-canais {
    display: grid;
    gap: var(--e2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape-canal {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2) var(--e4) var(--e2) var(--e2);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    background: var(--sup-1);
    transition:
        border-color var(--dur-2) var(--ease),
        background var(--dur-2) var(--ease);
}

.rodape-canal:hover {
    border-color: var(--verde-linha);
    background: var(--sup-2);
}

.rodape-canal-texto {
    display: grid;
    gap: var(--e1);
    min-width: 0;
}

.rodape-canal-texto strong {
    color: var(--texto);
    font-size: var(--c3);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.4;
}

.rodape-canal-texto small {
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rodape-canal .rodape-externo {
    margin-left: auto;
}

/* --- Dados institucionais ----------------------------------------------- */

.rodape-dados {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
    width: 100%;
    margin: 0;
    padding-top: var(--e4);
    border-top: 1px solid var(--borda);
    font-style: normal;
}

.rodape-dado {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--suave);
}

.rodape-dado strong {
    color: var(--texto);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
}

.rodape-dado .icone {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--verde);
}

/* --- Colunas de navegacao ----------------------------------------------- */

/* Seis grupos de links em tres colunas por duas linhas. E o que da ao rodape a
   densidade de empresa grande sem precisar de uma assinatura gigante: o mapa
   inteiro do site cabe aqui, e cada coluna respira. */
.rodape-colunas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-bloco) var(--e5);
    align-content: start;
}

.rodape-coluna {
    min-width: 0;
}

.rodape-coluna-titulo {
    /* Titulo de coluna sobe para --texto: e ele que da a hierarquia entre o
       cabecalho da coluna e os links, que ficam em --suave. */
    margin: 0 0 var(--e4);
    color: var(--texto);
}

.rodape-lista {
    display: grid;
    gap: var(--e3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape-lista a {
    display: inline-flex;
    align-items: baseline;
    gap: var(--e1);
    font-size: var(--c3);
    line-height: 1.5;
    color: var(--suave);
    /* `anywhere` partiria os enderecos no meio; `break-word` so quebra quando
       a palavra nao cabe sozinha na linha. */
    overflow-wrap: break-word;
    transition: color var(--dur-1) var(--ease);
}

.rodape-lista a:hover {
    color: var(--verde);
}

/* Pagina aberta: o link fica aceso e ganha um fio a esquerda, entao o visitante
   sabe onde esta sem precisar ler o titulo da coluna. */
.rodape-lista a[aria-current="page"] {
    color: var(--texto);
    font-weight: var(--p-forte);
}

.rodape-lista a[aria-current="page"] > span::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    margin-right: var(--e2);
    vertical-align: middle;
    background: var(--verde);
}

.rodape-externo {
    flex: none;
    font-style: normal;
    font-size: var(--c5);
    color: var(--verde);
    opacity: .7;
    transition: opacity var(--dur-1) var(--ease);
}

.rodape-canal:hover .rodape-externo,
.rodape-lista a:hover .rodape-externo {
    opacity: 1;
}

.rodape-nota {
    margin: var(--e5) 0 0;
    padding-top: var(--e3);
    border-top: 1px solid var(--borda);
    font-size: var(--c4);
    line-height: 1.7;
    color: var(--suave);
}

/* --- Faixa inferior ----------------------------------------------------- */

.rodape-faixa {
    border-top: 1px solid var(--borda);
    background: var(--sup-1);
}

.rodape-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3) var(--e5);
    padding-block: var(--e5);
    font-size: var(--c4);
    color: var(--suave);
}

.rodape-copyright {
    letter-spacing: var(--tk3);
}

.rodape-copyright strong {
    color: var(--texto);
    font-weight: var(--p-forte);
}

.rodape-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3) var(--e5);
}

.rodape-legal a {
    color: var(--suave);
    font-size: var(--c4);
    transition: color var(--dur-1) var(--ease);
}

.rodape-legal a:hover {
    color: var(--verde);
}

/* --- Acoes da faixa inferior -------------------------------------------- */

.rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3);
}

/* Segundo controle de movimento do site: aqui ele alcanca todas as paginas
   internas, que nao tem o hero da home. Os dois compartilham o mesmo estado. */
.rodape-movimento {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: none;
    font-family: inherit;
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    color: var(--suave);
    cursor: pointer;
    transition:
        border-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease);
}

.rodape-movimento:hover {
    border-color: var(--borda-forte);
    color: var(--texto);
}

.rodape-movimento-glifo {
    font-size: var(--c4);
    line-height: 1;
    color: var(--verde);
}

.rodape-movimento[aria-pressed="true"] .rodape-movimento-glifo {
    /* Pausado: o glifo vira um "play" e o botao passa a oferecer o retorno. */
    font-size: var(--c5);
}

.rodape-movimento:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

.rodape-topo {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-full);
    font-size: var(--c4);
    font-weight: var(--p-forte);
    color: var(--texto);
    transition:
        border-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease);
}

.rodape-topo:hover {
    border-color: var(--verde);
    color: var(--verde);
}

.rodape-topo-icone {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
    transition: transform var(--dur-2) var(--ease);
}

.rodape-topo:hover .rodape-topo-icone {
    transform: rotate(-90deg) translateX(3px);
}

/* --- Foco visivel ------------------------------------------------------- */

.rodape a:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 1200px) {
    .rodape-mapa {
        grid-template-columns: minmax(0, 1fr);
    }

    .rodape-institucional {
        max-width: none;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--esp-grid);
    }

    /* A marca e o texto ocupam a coluna da esquerda; os canais e os dados
       sobem para a direita, e o bloco deixa de ser uma tira alta. */
    .rodape-marca,
    .rodape-descricao {
        grid-column: 1;
    }

    .rodape-canais {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-content: start;
    }

    .rodape-dados {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--e2) var(--e5);
    }
}

@media (max-width: 980px) {
    .rodape-colunas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--esp-bloco) var(--e6);
    }

    /* Area de toque: no tablet e no celular cada link do rodape vale 44px. */
    .rodape-lista {
        gap: 0;
    }

    .rodape-lista a {
        min-height: 44px;
        align-items: center;
        padding-block: var(--e2);
    }

    .rodape-legal a,
    .rodape-topo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 680px) {
    .rodape-institucional {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e5);
    }

    .rodape-marca,
    .rodape-descricao,
    .rodape-canais {
        grid-column: 1;
    }

    .rodape-canais {
        grid-row: auto;
    }

    .rodape-marca .marca-vetor {
        width: 136px;
    }

    .rodape-colunas {
        gap: var(--e7) var(--e5);
    }

    .rodape-base {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e4);
    }
}

@media (max-width: 380px) {
    .rodape-colunas {
        grid-template-columns: minmax(0, 1fr);
    }

    .rodape-canal {
        padding-right: var(--e3);
    }
}