/* Beer Expert — rodapé v7. Desenho do Tiago, adaptado para produção.
   As container queries do protótipo viraram media queries: em produção o
   rodapé é sempre full-width, não há contentor intermédio para as ancorar. */

.be-footer{--dark:#362D29;--dark2:#241E1A;--amber:#EFB634;--amber-d:#c9931f;
  --foam:#F2F1E8;--cream:#FDFAF3;--line:#E3D9C6;--muted:#8A7C66;--ink:#2B2118;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);line-height:1.6;font-size:15px}
.be-footer *{box-sizing:border-box;margin:0}

/* neutralizar o que o Elementor/Edubin possa impor ao widget que o embrulha */
/* O contentor do Elementor que embrulha o rodapé trazia padding-top:10px,
   gap:20px e display:inline, o que abria uma folga branca de 28px entre o fim
   da página e o rodapé. Visamos os IDs, que somos nós que os definimos. */
.be-footer-slot,.be-footer-slot>.elementor-widget-container,
.elementor-element-befootw1,.elementor-element-befootw2,
.elementor-element-befootw2>.elementor-widget-container{padding:0!important;margin:0!important;gap:0!important}
.elementor-element-befootw1{display:block!important;width:100%!important;max-width:none!important}

.be-footer { --cols: 1.5fr 1fr 1.25fr; --gap: 40px; --pad: 34px;
  /* o conteúdo pára nos 1100px; para além disso o padding cresce e centra.
     Os fundos continuam a sangrar de ponta a ponta. */
  --side: max(var(--pad), calc((100% - 1100px) / 2)); }
  .be-footer .warm { background: var(--cream); padding: 40px var(--side) 32px; }
  .be-footer .grid { display: grid; grid-template-columns: var(--cols); gap: var(--gap); align-items: stretch; }
  .be-footer .cell { display: flex; flex-direction: column; }

  .be-footer .h5 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--muted); height: 30px; display: flex; align-items: center; margin: 0; }
  .be-mark { display: flex; align-items: center; gap: 10px; height: 30px; }
  .be-mark > svg { width: 30px; height: auto; flex-shrink: 0; }
  .be-mark .w { line-height: 1.06; }
  .be-mark .w .t { font-size: 8px; letter-spacing: .12em; font-weight: 800; color: var(--amber-d); }
  .be-mark .w .n { font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
  .be-mark .w .d { font-size: 7.5px; letter-spacing: .16em; font-weight: 800; color: var(--amber-d); }

  .be-footer .body { margin-top: 14px; }
  .be-footer .tag { font-size: 12.5px; color: var(--muted); max-width: 240px; }
  .be-footer .col a { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 5px 0; }
  .be-footer .col a:first-child { padding-top: 0; }
  .be-footer .col a:hover { color: var(--amber-d); }
  .be-footer .nlnote { font-size: 12.5px; color: var(--muted); margin-bottom: 11px; }

  .be-footer .nl { display: flex; max-width: 330px; }
  .be-footer .nl input, .be-footer .nl button { font: inherit; font-size: 13px; line-height: 1.4; padding: 10px 14px; border: 1px solid var(--line); margin: 0; }
  .be-footer .nl input { flex: 1; min-width: 0; border-right: none; border-radius: 9px 0 0 9px; background: #fff; }
  .be-footer .nl button { border-color: var(--amber); border-radius: 0 9px 9px 0; background: var(--amber); color: var(--dark); font-weight: 800; cursor: pointer; white-space: nowrap; }

  /* caixas com a mesma linguagem dos métodos de pagamento: mesma borda,
     mesmo raio, fundo branco — e o ícone maior lá dentro */
  .be-footer .soc { display: flex; gap: 8px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
  .be-footer .soc a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--muted); transition: color .18s, transform .18s, border-color .18s; }
  .be-footer .soc svg { width: 20px; height: 20px; display: block; fill: currentColor; }
  .be-footer .soc a:hover { transform: translateY(-1px); }
  .be-footer .soc a.ig:hover { color: #E4405F; }
  .be-footer .soc a.yt:hover { color: #FF0000; }
  .be-footer .soc a.fb:hover { color: #0866FF; }
  .be-footer .soc a.tt:hover { color: #000; }

  .be-footer .pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 20px; }
  .be-footer .pay span:not(.paylabel) { width: 54px; height: 36px; border: 1px solid var(--line); border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 5px 7px; }
  .be-footer .pay svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
  /* Os SVG foram gravados sem width/height, por isso não têm tamanho intrínseco
     e width:auto colapsava para 0. Preenchem a caixa e o object-fit trata do
     rácio — resolve também o Multibanco, que é mais alto que largo. */
  .be-footer .pay img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .be-footer .legal {
    background: var(--dark2); color: rgba(242,241,232,.5); font-size: 11px;
    padding: 6px var(--side);
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 24px; align-items: center;
  }
  .be-footer .legal .copy { justify-self: start; line-height: 1.45; }
  .be-footer .legal .copy b { display: block; color: rgba(242,241,232,.72); font-weight: 700; }
  .be-footer .legal .links { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin: 0 -8px; }
  .be-footer .legal .right { justify-self: end; text-align: right; white-space: nowrap; }
  .be-footer .legal a { color: rgba(242,241,232,.66); text-decoration: none; padding: 10px 8px; display: inline-block; border-radius: 6px; white-space: nowrap; }
  .be-footer .legal a:hover { color: var(--amber); background: rgba(242,241,232,.06); }

  /* sticky — base primeiro, sempre */
  .be-footer .sticky {
    display: none;
    position: sticky; bottom: 0; z-index: 20;
    background: var(--amber); padding: 12px 16px; align-items: center; gap: 12px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.14);
  }
  .be-footer .sticky .t { font-size: 12.5px; font-weight: 800; color: var(--dark); line-height: 1.25; flex: 1; text-align: left; }
  .be-footer .sticky .t span { display: block; font-weight: 600; opacity: .68; font-size: 11px; }
  .be-footer .sticky .go { background: var(--dark); color: var(--amber); font-size: 12.5px; font-weight: 800; padding: 11px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

  /* ---------- ≤ 900px ---------- */
  @media (max-width: 900px) {
    .be-footer { --cols: 1fr 1fr; --gap: 24px; --pad: 24px; }
    .be-footer .warm { padding: 32px var(--side) 26px; }
    .be-footer .grid { gap: 30px 24px; }
    .be-footer .brandcol { grid-column: 1 / -1; }
    .be-footer .pay { margin-top: 16px; padding-top: 0; }
    .be-footer .tag { max-width: none; }
    .be-footer .legal { gap: 8px 16px; }
  }

  /* =========================================================
     ≤ 560px — footer curto, tudo centrado
     ========================================================= */
  @media (max-width: 560px) {
    .be-footer { --pad: 20px; }
    .be-footer .warm { padding: 24px var(--side) 20px; text-align: center; }
    .be-footer .grid { grid-template-columns: 1fr; gap: 0; }

    .be-footer .tag,
    .be-footer .pay,
    .be-footer .soc,
    .be-footer .nlnote,
    .be-footer .navcol .h5,
    .be-footer .nlcol .h5 { display: none; }

    .be-footer .brandcol { order: 0; }
    .be-footer .navcol   { order: 1; }
    .be-footer .nlcol    { order: 2; }
    .be-footer .body { margin-top: 0; }

    /* centrar tudo */
    .be-footer .be-mark { justify-content: center; }
    .be-footer .navcol .body.col {
      display: flex; flex-wrap: wrap;
      justify-content: center;
      align-items: center;                    /* ← itens com a mesma linha de base */
      gap: 10px 16px; margin-top: 18px;
    }
    /* o :first-child do desktop deixava o 1º item 4px mais curto */
    .be-footer .col a,
    .be-footer .col a:first-child { display: block; padding: 4px 0; font-size: 13px; line-height: 1.3; }

    .be-footer .nl { max-width: 300px; margin: 18px auto 0; }

    .be-footer .legal {
      grid-template-columns: 1fr;
      justify-items: center; text-align: center;
      gap: 0; padding: 10px 12px 14px; line-height: 1.55;
    }
    .be-footer .legal .links { grid-row: 1; justify-self: center; justify-content: center; margin: 0 -8px; }
    .be-footer .legal .copy  { grid-row: 2; justify-self: center; }
    .be-footer .legal .copy b { display: inline; }
    .be-footer .legal .copy .proj { display: none; }
    .be-footer .legal .right { grid-row: 3; justify-self: center; white-space: normal; text-align: center; }

    .be-footer .sticky { display: flex; }
  }

/* ---- acrescentos de produção ---- */
/* nota de privacidade por baixo da newsletter (art. 13.º RGPD) */
.be-footer .nlprivacy{font-size:10px;line-height:1.45;color:var(--muted);margin-top:7px;max-width:330px}
.be-footer .nlprivacy a{color:inherit;text-decoration:underline}
/* honeypot da Mailchimp */
.be-footer .nlhp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
/* o reabrir dos cookies é um <a>, para funcionar sem JS */
.be-footer .legal a.becookies{cursor:pointer}
@media (max-width:560px){.be-footer .nlprivacy{display:none}}

/* rótulo dos pagamentos — flex-basis 100% põe-no numa linha própria */
/* texto simples — a regra da caixa visava 'span' e apanhava-o também */
.be-footer .paylabel{flex:0 0 100%;display:block;width:auto;height:auto;border:none;background:none;padding:0;margin:0 0 8px;font-size:11.5px;line-height:1.4;color:var(--muted);text-align:left}

/* marca com mais presença — a coluna da esquerda tinha espaço a mais */
.be-footer .brandcol .h5{height:auto;align-items:flex-start}
.be-footer .be-mark{height:auto;gap:13px}
.be-footer .be-mark>svg{width:44px}
.be-footer .be-mark .w .t{font-size:10px;letter-spacing:.13em}
.be-footer .be-mark .w .n{font-size:22px;letter-spacing:-.025em}
.be-footer .be-mark .w .d{font-size:9.5px;letter-spacing:.17em}
.be-footer .tag{font-size:14.5px;line-height:1.55;max-width:300px}
.be-footer .brandcol .body{margin-top:18px}
@media (max-width:560px){.be-footer .be-mark>svg{width:38px}.be-footer .be-mark .w .n{font-size:19px}}