/* ============================================================================
   POOD — RODAPE
   Depende de pood-tokens.css. Cor e medida saem de var(--pood-*). */
/* Rodape da Direcao A — card "Componentes > Rodape" do design system.

   ONDE O CONTEUDO VIVE: em blocos CMS do Magento, que e como o Porto monta o
   rodape. Cada coluna e um Magento\Cms\Block\Block resolvido por identifier em
   porto_settings/footer/footer_middle_column_N_custom:

     col 1  porto_footer_logo_white        marca
     col 2  footer_middle_contact_info     contato
     col 3  footer_middle_customer_service 14 links institucionais
     col 4  footer_middle_newsletter       chamada do WhatsApp   (identifier
            historico; o conteudo nao e newsletter ha tempos)
     base   footer_bottom_block            horario + selos de pagamento

   O <address> da faixa de base NAO vem de bloco: e
   porto_settings/footer/footer_bottom_copyrights, impresso pelo template.

   Aqui so entra ESTILO. Texto, link e imagem se editam no admin, em
   Conteudo > Blocos, sem deploy. */

/* ---------------------------------------------------------------- faixas */
/* O var(--pood-tinta) tambem esta em porto_design/footer/*_bgcolor, que e o caminho do
   Porto e gera o design_default.css. Repetido aqui porque aquele arquivo e
   gerado e pode ser reescrito por qualquer save do painel do tema. */
.footer-middle,
.footer-bottom { background: var(--pood-tinta); }
.footer-middle { padding-top: 52px; }
.footer-bottom { border-top: 1px solid var(--pood-borda-esc); padding: 0; }

/* ------------------------------------------------------- grade das colunas
   130px para a marca e o resto em 1 / 1.25 / 1.15, como no card.
   O Porto entrega .row flex com .col-lg-2/3/3/4 e margem negativa; o grid
   substitui os dois, e o seletor de coluna zera o que o Bootstrap impoe.

   ATENCAO ao respiro lateral: o card pede padding 0 40px num container de
   1200. O container DESTE site e 1236 com 10px, e e o mesmo do cabecalho.
   Manter os 40px do card deixaria o rodape 60px mais estreito que tudo acima
   dele. Aqui vale o alinhamento: padding lateral 0, borda do rodape na mesma
   linha vertical da logo do topo. Para voltar ao card, troque por 0 40px. */
/* Os dois seletores abaixo levam ".footer" na frente de proposito (0,3,0).
   Com 0,2,0 o Porto vencia em duas propriedades, e as duas quebravam o card:
     - .footer-middle .container tem "padding: 65px 10px 14px", que somava aos
       52px do card e abria 117px de respiro no topo;
     - align-items do .row resolvia para "center", e a coluna da marca, que e a
       mais baixa, descia 122px — a logo aparecia na altura do meio da lista de
       links em vez de alinhada com os titulos. */
.footer .footer-middle .container { padding-top: 0; padding-bottom: 0; }
.footer .footer-middle .row {
  display: grid; grid-template-columns: 130px 1fr 1.25fr 1.15fr;
  gap: 40px; align-items: start; align-content: start;
  margin: 0; padding: 0 0 44px;
}
.footer-middle .row > [class*="col-lg-"] {
  width: auto; max-width: none; flex: none; padding: 0; margin: 0;
}
.footer-middle .widget { margin: 0; padding: 0; border: 0; }

/* --------------------------------------------------------------- titulos */
.footer-middle .widget-title,
.footer-middle h3 {
  margin: 0 0 16px; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #FFFFFF; line-height: 1.4;
}
.footer-middle .widget-title:after { display: none; }

/* ----------------------------------------------------------------- marca */
.pood-rd-marca img { height: 28px; width: auto; display: block; }

/* --------------------------------------------------------------- contato */
.footer-middle .pood-rd-contato {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--pood-sobre-esc);
}
.footer-middle .pood-rd-contato li { margin: 0; padding: 0; background: none; }
.footer-middle .pood-rd-contato strong { font-weight: 500; color: var(--pood-sobre-esc-2); }
.pood-rd-social { display: flex; gap: 16px; font-size: 12.5px; }

/* ------------------------------------------------- 14 links institucionais
   Duas colunas de texto, nunca uma lista de 14 linhas — e a regra do card.
   break-inside evita item partido entre as colunas. */
.footer-middle .pood-rd-links {
  list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px;
}
.footer-middle .pood-rd-links li {
  margin: 0 0 9px; padding: 0; background: none; break-inside: avoid;
}

/* ------------------------------------------------------------- tipografia */
.footer-middle p { margin: 0 0 14px; font-size: 13px; color: var(--pood-sobre-esc); line-height: 1.55; }
.footer-middle a,
.footer-middle .pood-rd-contato a { font-size: 12.5px; color: var(--pood-sobre-esc); text-decoration: none; }
.footer-middle a:hover { color: #FFFFFF; text-decoration: none; }

/* ------------------------------------------------------- chamada WhatsApp */
/* PRECISA de .footer-middle na frente: a regra generica de titulo acima e
   ".footer-middle .widget-title" (0,2,0) e vencia ".pood-rd-cta h3" (0,1,1) —
   o titulo da chamada saia em 11px caixa alta, como os das outras colunas. */
.footer-middle .pood-rd-cta h3,
.footer-middle .pood-rd-cta .widget-title {
  font-size: 17px; font-weight: 500; letter-spacing: -.015em;
  text-transform: none; line-height: 1.25; margin-bottom: 10px;
}
.pood-rd-zap { margin: 0 0 18px; }
.pood-rd-zap span {
  display: block; font-size: 11px; font-weight: 500; color: var(--pood-sobre-esc); margin-bottom: 2px;
}
.pood-rd-zap b { font-size: 18px; font-weight: 600; color: #FFFFFF; letter-spacing: -.01em; }
/* botao vazado; inverte para branco no hover */
.footer-middle a.pood-rd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--pood-borda-esc-2); background: transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: #FFFFFF;
}
.footer-middle a.pood-rd-btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--pood-tinta); }

/* ----------------------------------------------------------- faixa de base
   display:contents no wrapper que o Porto cria em volta do bloco: assim
   horario, selos e o <address> viram irmaos na mesma linha flex, sem precisar
   de um segundo nivel de alinhamento. */
.footer-bottom .container {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px;
}
.footer-bottom .custom-block { display: contents; float: none; }
/* .footer-bottom na frente pelo mesmo motivo do titulo da chamada: sem ele,
   uma regra de paragrafo do Porto vence e o horario sai em 13px. */
.footer-bottom .pood-rd-hora { margin: 0; font-size: 12px; color: var(--pood-sobre-esc); line-height: 1.5; }
.footer-bottom .pood-rd-hora b { color: var(--pood-sobre-esc-2); font-weight: 500; }
.pood-rd-pagamentos { display: flex; gap: 6px; flex-wrap: wrap; }
.pood-rd-pg {
  width: 46px; height: 30px; border-radius: 7px; background: var(--pood-escuro-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: #B6B6BE; transition: background .15s, color .15s;
}
.pood-rd-pg:hover { background: #2F2F38; color: #FFFFFF; }
.pood-rd-pg b {
  font-size: 12px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.footer-bottom address {
  margin: 0 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--pood-sobre-esc);
  line-height: 1.6; text-align: right;
}

/* ------------------------------------------------- versao curta, checkout
   Sem links e sem colunas: no checkout nada deve competir com o botao que
   fecha a compra. Entra por layout XML no handle checkout_index_index, que
   remove o footer_block do Porto e poe o bloco CMS pood_rodape_checkout. */
.pood-rd-curto {
  max-width: 1236px; margin: 0 auto; display: flex; align-items: center;
  gap: 20px; padding: 26px 10px; flex-wrap: wrap;
}
.page-footer .pood-rd-curto-fundo,
.pood-rd-curto-fundo { background: var(--pood-tinta); }
.pood-rd-curto img { height: 22px; width: auto; }
.pood-rd-curto p { margin: 0; font-size: 12px; color: var(--pood-sobre-esc); }

/* --------------------------------------------------------------- respostas
   1000px: quatro colunas nao cabem, viram duas, e o endereco perde o
   alinhamento a direita porque ja nao ha coluna a direita dele.
   640px: coluna unica, e os 14 links deixam de ser duas colunas de texto. */
@media (max-width: 1000px) {
  .footer .footer-middle .row { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom address { margin-left: 0; text-align: left; }
}
@media (max-width: 640px) {
  .footer .footer-middle .row { grid-template-columns: 1fr; padding: 0 12px 34px; }
  .footer-middle .pood-rd-links { columns: 1; }
  .pood-rd-curto { padding: 22px 12px; }
}