/* =========================================================================
   RODAPÉ 2027

   Medidas retiradas do Figma (faixa de 1440x540):
     - fundo ......... #326ea0  (C_01)
     - logo .......... 295x149, a 100 da esquerda e 108 do topo
     - redes ......... 24/24/28px, 16px entre elas, centradas em 327 do topo
     - colunas ....... 500, 710, 920 e 1130 — passo de 210px, daí a grade
     - textos ........ Khand 22px em #e6e7e9 (C_19)

   Arquivo separado como o header-2027.css: o style.css é compilado por SCSS e
   este tema não tem build disponível.
   ========================================================================= */

.footer2027 {
    padding: 108px 0 0;
    min-height: 540px;
    background-color: #326ea0;
}

/* Cinco colunas: a marca e os quatro blocos de 210px do desenho (500, 710,
   920 e 1130). A marca fica flexível para absorver a variação de largura. */
.footer2027__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 210px);
    width: 100%;
    max-width: calc(1240px + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.footer2027__logo {
    display: block;
    width: 295px;
    max-width: 100%;
}

.footer2027__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* 56px abaixo da base do logo deixa a fileira centrada em 327 do topo. */
.footer2027__sociais {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

/* Cada rede tem a caixa do seu tamanho no Figma, com o desenho no recorte. */
.footer2027__social {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s ease;
}

.footer2027__social:hover { opacity: 0.75; }

.footer2027__social img {
    position: absolute;
    display: block;
}

.footer2027__social--facebook img {
    top: 8.33%;
    left: 8.33%;
    width: 20px;
    height: 19.95px;
}

.footer2027__social--instagram img {
    top: 8.33%;
    left: 8.33%;
    width: 20px;
    height: 20px;
}

.footer2027__social--youtube {
    width: 28px;
    height: 28px;
}

.footer2027__social--youtube img {
    top: 16.67%;
    left: 7.14%;
    width: 23.33px;
    height: 18.67px;
}

/* Títulos de coluna e logo começam na mesma altura no desenho. */
.footer2027__coluna,
.footer2027__imper {
    margin-top: 0;
}

.footer2027__titulo {
    margin: 0;
    font-family: 'Khand', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    color: #e6e7e9;
}

.footer2027__lista {
    /* 22px até a primeira linha e 14px entre elas dão os 44px e 36px do Figma. */
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

/* display:block no link para a altura da linha ser exatamente 22px: como
   inline, o strut herdado do <li> esticava a caixa e o espaçamento saía maior
   que o do desenho. */
.footer2027__lista a {
    display: block;
    font-family: 'Khand', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    color: #e6e7e9;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer2027__lista a:hover,
.footer2027__lista a:focus {
    color: #e6e7e9;
    opacity: 0.75;
    text-decoration: none;
}

/* Coluna inteira em negrito, como a de Produtos no Figma. Vem da classe CSS
   marcada no item de menu — não é a posição da coluna.
   Lá as linhas também respiram mais: 44px entre elas em vez de 36. */
.footer2027__coluna--negrito .footer2027__lista a { font-weight: 600; }
.footer2027__coluna--negrito .footer2027__lista { gap: 22px; }

/* -------------------------------------------------------------------------
   Ciello Imper — quinta coluna
   ------------------------------------------------------------------------- */

.footer2027__imper-logo {
    display: block;
    width: 190px;
    margin-top: 15px;
}

.footer2027__imper-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer2027__imper-texto {
    margin: 22px 0 0;
    font-family: 'Khand', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    color: #e6e7e9;
}

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

@media (max-width: 1199px) {
    .footer2027 { padding-top: 64px; }

    /* A grade do desenho não cabe: a marca passa a ocupar a linha toda. */
    .footer2027__interno {
        grid-template-columns: repeat(4, 1fr);
        gap: 48px 24px;
    }

    .footer2027__marca { grid-column: 1 / -1; }

    .footer2027__sociais { margin-top: 32px; }

    .footer2027__imper-logo { width: 100%; max-width: 190px; }
}

/* Mobile — frame de 360px do Figma: um bloco por linha, com os itens de cada
   menu em duas colunas por baixo do título. */
@media (max-width: 767px) {
    .footer2027 { min-height: 0; padding: 57px 0 48px; }

    .footer2027__interno {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-inline: 22px;
    }

    .footer2027__marca { grid-column: auto; }

    .footer2027__logo { width: 150px; }

    .footer2027__sociais { gap: 10px; margin-top: 21px; }

    .footer2027__social { width: 18px; height: 18px; }
    .footer2027__social--facebook img,
    .footer2027__social--instagram img { width: 15px; height: 15px; }
    .footer2027__social--youtube { width: 22px; height: 22px; }
    .footer2027__social--youtube img { width: 18.33px; height: 14.67px; }

    .footer2027__titulo { font-size: 16px; }

    .footer2027__lista {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 0;
        margin-top: 9px;
    }

    /* A coluna de Produtos fica em uma coluna só no mobile, com as linhas a
       32px — as outras duas é que se dividem em duas. */
    .footer2027__coluna--negrito .footer2027__lista {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }

    .footer2027__lista a { font-size: 15px; line-height: 22px; }

    .footer2027__imper-logo { width: 150px; margin-top: 12px; }
    .footer2027__imper-texto { margin-top: 12px; font-size: 16px; line-height: 20px; }
}