/* ==========================================================================
   RODAPÉ — cena de fechamento e rodapé são uma seção só, como na referência:
   a foto ocupa o topo e o degradê a dissolve na cor sólida do rodapé.
   ========================================================================== */

.rodape {
    background: var(--ink);
    color: rgba(245, 241, 236, 0.72);
    /* a onda é mais larga que a tela para o arco não fechar nas pontas */
    overflow-x: clip;
    overflow-y: visible;
}

/* ---------- cena: banda de imagem com a frase de fechamento ---------- */
.rodape__cena {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: end;
    justify-items: center;
    /* alta o bastante para a cena caber sem parecer recortada */
    min-height: clamp(430px, 48vw, 780px);
    padding: clamp(90px, 12vw, 170px) var(--gutter) clamp(44px, 5vw, 76px);
    text-align: center;
}

.rodape__cena::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url('../images/banners/sub-footer-1.webp') center 42% / cover no-repeat;
}

/* Véu em duas camadas. Embaixo, um banho de --sage-dark que tinge a foto do
   verde da marca; em cima, o escurecimento vertical que fecha exatamente em
   --ink — é o que faz a imagem virar rodapé sem linha de corte. Separar cor de
   profundidade permite regular uma sem mexer na outra. */
.rodape__cena::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(46, 50, 39, 0.00) 0%,
            rgba(46, 50, 39, 0.30) 44%,
            rgba(46, 50, 39, 0.72) 74%,
            rgba(46, 50, 39, 0.94) 92%,
            var(--ink) 100%),
        linear-gradient(rgba(106, 114, 89, 0.52), rgba(106, 114, 89, 0.52));
}

/* A emenda com a seção de cima é feita pela onda, não por raio fixo. A cor
   acompanha a seção ACIMA — hoje depoimentos, em --offwhite. */
.rodape .onda {
    z-index: 2;
    color: var(--offwhite);
}

.rodape__frase {
    max-width: 20ch;
    margin: 0 auto;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4.2vw, 62px);
    line-height: 1.1;
    color: var(--offwhite);
    text-wrap: balance;
}

.rodape__apoio {
    max-width: 42ch;
    margin: clamp(14px, 1.8vw, 22px) auto 0;
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: 600;
    line-height: 1.5;
    color: rgba(245, 241, 236, 0.82);
}

/* ---------- risco que separa cena e rodapé ---------- */
.rodape__risco {
    width: min(1180px, 100% - var(--gutter) * 2);
    margin: 0 auto;
    border: 0;
    border-top: 1px solid rgba(245, 241, 236, 0.16);
}

.rodape__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(52px, 6vw, 84px) var(--gutter) clamp(34px, 4vw, 52px);
}

.rodape__grid {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 1fr 1fr;
    gap: clamp(34px, 5vw, 74px);
    align-items: start;
}

/* ---------- marca ---------- */
.rodape__marca img {
    width: clamp(96px, 8vw, 124px);
    height: auto;
    margin-bottom: clamp(18px, 2vw, 28px);
}

.rodape__marca p {
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 600;
    line-height: 1.7;
}

.rodape__marca p + p {
    margin-top: 12px;
}

/* ---------- colunas de link ---------- */
.rodape__titulo {
    margin-bottom: clamp(16px, 1.8vw, 24px);
    color: var(--terra-claro);
    font-size: clamp(11px, 0.85vw, 12.5px);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rodape__links {
    display: grid;
    gap: clamp(10px, 1.2vw, 15px);
}

.rodape__links a {
    color: var(--offwhite);
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 700;
    transition: color 200ms ease, transform 200ms ease;
}

.rodape__links a:hover {
    color: var(--terra-claro);
    transform: translateX(3px);
}

/* ---------- redes e pagamento ---------- */
.rodape__redes {
    display: flex;
    gap: 14px;
}

.rodape__redes a {
    display: grid;
    place-items: center;
    width: clamp(48px, 3.6vw, 54px);
    height: clamp(48px, 3.6vw, 54px);
    border: 1px solid rgba(245, 241, 236, 0.22);
    border-radius: 50%;
    color: var(--offwhite);
    transition: background 220ms ease, border-color 220ms ease;
}

.rodape__redes a:hover {
    background: rgba(245, 241, 236, 0.1);
    border-color: rgba(245, 241, 236, 0.4);
}

.rodape__redes svg {
    width: clamp(23px, 1.7vw, 26px);
    height: clamp(23px, 1.7vw, 26px);
}

/* ---------- barra legal ---------- */
.rodape__legal {
    margin-top: clamp(38px, 4.5vw, 62px);
    padding-top: clamp(22px, 2.6vw, 32px);
    border-top: 1px solid rgba(245, 241, 236, 0.12);
}

.rodape__legal p {
    font-size: clamp(11.5px, 0.85vw, 13px);
    font-weight: 500;
    line-height: 1.65;
    color: rgba(245, 241, 236, 0.5);
}

.rodape__legal p + p {
    margin-top: 12px;
}