/* ==========================================================================
   Mister Frango — base
   Paleta lida pixel a pixel dos ficheiros do logo. Ver LEIA-ME.md
   ========================================================================== */

:root{
  /* --- medido no logo --------------------------------------------------- */
  --tinta:        #231F20;   /* cartola e corpo do galo */
  --vermelho:     #D81125;   /* crista e barbela */
  --creme:        #F9F1E7;   /* fundo da versao clara */

  /* --- medido na foto da churrasqueira ---------------------------------- */
  --brasa:        #E4652D;   /* media de 16.331 pixeis de brasa */

  /* --- derivados: escurecimentos da tinta ------------------------------- */
  --tinta-fundo:  #171415;
  --carvao:       #2E2829;
  --carvao-alto:  #3A3334;

  --creme-70:     rgba(249,241,231,.70);
  --creme-45:     rgba(249,241,231,.45);
  --linha:        rgba(249,241,231,.14);
  --linha-forte:  rgba(249,241,231,.26);
  --vermelho-esc: #A80D1C;

  /* --- tipografia ------------------------------------------------------- */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "Courier New", monospace;
  /* so para o titulo da hero (index.html) — imitando a referencia Hemlock.
     Unica voz serifada do site, de proposito; tudo o resto fica em Archivo. */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --fs-micro:   .8125rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.3125rem;
  --fs-h3:      1.625rem;
  --fs-h2:      clamp(2.125rem, 4vw, 3.25rem);
  --fs-display: clamp(2.5rem, 6.4vw, 5.25rem);
  --fs-preco:   1.4375rem;

  /* --- medidas ---------------------------------------------------------- */
  --container: 75rem;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --radio:     10px;
  --nav-h:     4.75rem;
  --gaveta-h:  13rem;
}
@media (max-width:36rem){
  :root{--gaveta-h:10rem}
}

*,*::before,*::after{box-sizing:border-box}

/* scroll-behavior:smooth NAO fica aqui no html — e' global de mais: anima
   tambem a restauracao nativa da posicao de scroll do browser ao dar
   refresh ou voltar atras (o scroll "desce" visivelmente do topo em vez
   de aparecer logo no sitio certo). O scroll suave dos links de ancora
   (indice do menu, "saltar para o conteudo") e' feito a proposito só por
   JS, em main.js, que nao mexe na restauracao do browser. */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--tinta);
  color:var(--creme);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  margin:0;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
h1{font-size:var(--fs-display);line-height:1}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0}

a{color:inherit}

::selection{background:var(--vermelho);color:var(--creme)}

:focus-visible{
  outline:3px solid var(--brasa);
  outline-offset:3px;
  border-radius:2px;
}

.salta-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--creme);color:var(--tinta);
  padding:.75rem 1.25rem;font-weight:700;
}
.salta-para-conteudo:focus{left:.75rem;top:.75rem}

/* --- utilitarios --------------------------------------------------------- */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.etiqueta{
  font-family:var(--mono);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--creme-45);
}

.so-leitor{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- botoes -------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.9375rem 1.5rem;
  border-radius:var(--radio);
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}

.btn--brasa{
  background:var(--vermelho);
  color:var(--creme);          /* 4,67:1 sobre o vermelho — passa AA */
  border-color:var(--vermelho);
}
.btn--brasa:hover{background:var(--vermelho-esc);border-color:var(--vermelho-esc)}

.btn--linha{
  background:transparent;
  color:var(--creme);
  border-color:var(--linha-forte);
}
.btn--linha:hover{border-color:var(--creme);background:rgba(249,241,231,.06)}

.btn--claro{
  background:var(--creme);
  color:var(--tinta);
  border-color:var(--creme);
}
.btn--claro:hover{background:#fff;border-color:#fff}

/* --- botao "Encomendar": abre Glovo + MotoFast em vez de ir direto a uma
   plataforma. O bloco [data-encomendar] fica "achatado" no layout (nao
   conta como caixa propria) para se comportar como se os botoes lá dentro
   estivessem soltos no flex do sitio onde for usado (hero, nav, cta final,
   barra fixa do mobile, etc). Sem JS as duas opcoes ficam sempre visiveis e
   funcionais — o botao "Encomendar" so aparece com JS a mandar nele. */
[data-encomendar]{display:contents}
[data-encomendar-abrir]{display:none}
.js [data-encomendar].is-fechado [data-encomendar-abrir]{display:inline-flex}
.js [data-encomendar].is-fechado [data-encomendar-opcao]{display:none}

/* mesmo mecanismo do "Encomendar", para o botao "Ligar agora" dar a
   escolha entre o fixo e o telemovel (contactos.html) — sem largura
   igualada por JS porque aqui nao ha aperto de espaco como no encomendar. */
[data-ligar]{display:contents}
[data-ligar-abrir]{display:none}
.js [data-ligar].is-fechado [data-ligar-abrir]{display:inline-flex}
.js [data-ligar].is-fechado [data-ligar-opcao]{display:none}

/* mesmo mecanismo outra vez, para o botao pequeno de "Encomendar" do
   rodape novo (so icone) — atributo à parte porque o [data-encomendar]
   normal tem JS a igualar a largura das opcoes à largura do botao "Encomendar
   já" (texto), o que ficaria minusculo a mais aqui, que e' so um icone. */
[data-encomendar-mini]{display:contents}
[data-encomendar-mini-abrir]{display:none}
.js [data-encomendar-mini].is-fechado [data-encomendar-mini-abrir]{display:inline-flex}
.js [data-encomendar-mini].is-fechado [data-encomendar-mini-opcao]{display:none}

/* contorno branco a serio e fundo transparente — .btn--linha por defeito
   usa --linha-forte (creme a 26%), demasiado ténue para estes dois.
   A largura de cada um vem de JS (main.js, igualarLargura) — os dois
   juntos tem de ocupar exatamente o espaco do botao "Encomendar ja" que
   substituem, por isso sem min-width fixo aqui (entraria em conflito com
   a largura calculada). */
.btn--plataforma{border-width:1.5px;border-color:var(--creme);padding-inline:.75rem;flex-shrink:0}
.btn--plataforma:hover{border-color:var(--creme);background:rgba(249,241,231,.1)}
/* o logo enche a largura do botao (que vem do JS) ate um teto de 4.5rem —
   object-fit:contain encaixa Glovo e MotoFast sem distorcer, apesar das
   proporcoes bem diferentes, e encolhe sem cortar se o botao ficar apertado */
.btn--plataforma img{display:block;width:100%;max-width:4.5rem;height:1.5rem;object-fit:contain}
.btn--plataforma img[alt="Glovo"]{transform:translateY(-2px)}

/* --- navegacao ----------------------------------------------------------- */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:2px solid transparent;
  transition:background-color .25s ease, border-color .25s ease;
}
.nav.is-fixa{
  background:rgba(23,20,21,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--vermelho);
}

/* sem max-width central: a barra usa o ecra real, tal como o hero, em vez
   de ficar presa numa coluna de 75rem a flutuar no meio de um monitor largo.
   Grelha de 3 colunas para poder centrar o logo — os links ficam a esquerda,
   o logo ao centro, telefone+encomendar a direita (pedido do Micael a partir
   da referencia Hemlock). .nav__painel e [data-encomendar] usam
   display:contents (ver mais abaixo), por isso os SEUS filhos e' que
   precisam de grid-column, nao os wrappers. grid-row:1 explicito em todos —
   sem isto o auto-placement mete os links numa segunda linha (a coluna 1
   fica "atras" da coluna 2 do logo pela ordem do HTML), o que esticava o
   nav__inner para 101px e desalinhava o logo na vertical. */
.nav__inner{
  width:100%;
  padding-inline:clamp(1.25rem, 5vw, 6rem);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-rows:1fr;
  align-items:center;
  column-gap:1.5rem;
}

.marca{
  grid-column:2;grid-row:1;justify-self:center;
  display:flex;align-items:center;
  text-decoration:none;flex-shrink:0;
}
/* logo so com a cabeca do galo, recortado bem junto ao desenho (ficheiro
   proprio para o nav — o do rodape tem mais margem transparente a volta,
   que aqui so fazia o icone parecer pequeno) — centrado, nao faria sentido
   um letreiro largo com o nome espremido ao meio */
.marca img{height:3.5rem;width:auto;object-fit:contain}

.nav__toggle{grid-column:3;grid-row:1;justify-self:end}

.nav__links{
  grid-column:1;grid-row:1;justify-self:start;
  display:flex;align-items:center;gap:1.75rem;
  list-style:none;padding:0;margin-block:0;
}

.nav__direita{
  grid-column:3;grid-row:1;justify-self:end;
  display:flex;align-items:center;gap:1.5rem;
}
.nav__links a{
  text-decoration:none;
  font-size:.9375rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--creme-70);
  padding-block:.25rem;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{
  color:var(--creme);border-bottom-color:var(--vermelho);
}

.nav__tel{
  font-family:var(--mono);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--creme);
  white-space:nowrap;
}
.nav__tel:hover{color:var(--vermelho)}

.nav .btn{padding:.6875rem 1.125rem;font-size:.875rem}

/* --- menu mobile --------------------------------------------------------- */

.nav__toggle{
  display:none;
  width:2.75rem;height:2.75rem;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--linha-forte);
  border-radius:var(--radio);color:var(--creme);cursor:pointer;
}
.nav__toggle svg{width:1.25rem;height:1.25rem}
.nav__toggle .icone-fechar{display:none}
.nav__toggle[aria-expanded="true"] .icone-abrir{display:none}
.nav__toggle[aria-expanded="true"] .icone-fechar{display:block}

@media (max-width:60rem){
  :root{--nav-h:4rem}
  .marca img{height:2.5rem}
  .nav__toggle{display:flex}
  .nav__painel{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    background:var(--tinta-fundo);
    border-bottom:1px solid var(--linha);
    padding:1.5rem var(--gutter) 2rem;
    display:none;
  }
  .nav__painel.is-aberto{display:block}
  .nav__links{
    flex-direction:column;align-items:flex-start;gap:0;
    margin-left:0;width:100%;
  }
  .nav__links li{width:100%;border-bottom:1px solid var(--linha)}
  .nav__links a{display:block;padding:.9375rem 0;font-size:1.125rem;border-bottom:none}
  .nav__direita{
    flex-direction:column;align-items:flex-start;gap:1rem;
    margin-top:1.25rem;width:100%;
  }
  .nav__tel{font-size:1.0625rem}
  .nav__painel .btn{display:flex;width:100%;margin-top:1rem}
}
@media (min-width:60.0625rem){
  .nav__painel{display:contents}
}

/* --- barra fixa de accao (mobile) ---------------------------------------- */

.barra-accao{
  position:fixed;inset:auto 0 0 0;z-index:90;
  display:none;gap:.625rem;
  padding:.625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
  background:rgba(23,20,21,.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--linha);
}
.barra-accao .btn{flex:1;padding:.875rem 1rem;font-size:.875rem}
@media (max-width:47.9375rem){
  .barra-accao{display:flex}
  body{padding-bottom:4.75rem}
}

/* --- rodape (partilhado por todas as paginas) ----------------------------- */

.rodape{
  background:var(--tinta-fundo);
  border-top:1px solid var(--linha);
  padding-block:3rem 2rem;
  /* sombra a cair sobre a gaveta por baixo — o rodape (dentro do .pagina,
     que fica sempre por cima da gaveta fixa) projeta-a para baixo, para
     dar profundidade ao efeito de gaveta a abrir no fim da pagina. */
  box-shadow:0 20px 30px -12px rgba(0,0,0,.6);
}
/* Fila unica: logo a esquerda, atalhos (Site + Contactos) agrupados ao
   centro, botao "Encomendar" a direita — todos alinhados ao centro da
   altura da fila (align-items:center), a pedido do Micael para o
   "Encomendar" ficar sempre a direita, centrado na altura do rodape. */
.rodape__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  flex-wrap:wrap;
  padding-block:1.5rem;
}
/* logo + morada empilhados; por ficarem centrados como bloco na fila
   (align-items:center no .rodape__grid), o logo sobe acima do centro e a
   morada desce abaixo dele — o gap e' o que controla quanto: mais gap,
   mais o logo sobe e a morada desce, pedido do Micael. */
.rodape__marca-bloco{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
/* letreiro com o nome ja desenhado dentro da imagem (ficheiro "branco
   transparente" — tinta clara, sem fundo) — escala pela altura */
.rodape__marca{display:flex;align-items:center;text-decoration:none;color:inherit}
.rodape__marca img{height:3.25rem;width:auto;object-fit:contain}
.rodape__morada{
  font-size:.9375rem;
  color:var(--creme-70);
  text-decoration:none;
  transition:color .18s ease;
}
.rodape__morada:hover{color:var(--creme)}

/* "Site" a esquerda; "Contactos" e "Redes" empilhados a direita, como um
   bloco so' — align-items:center para "Site" ficar centrado contra a
   altura toda do bloco empilhado ao lado (voltou a este valor a pedido
   do Micael, depois de uma tentativa com flex-start). */
.rodape__meio{
  display:flex;
  align-items:center;
  gap:2.75rem;
}
.rodape__meio-empilhado{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.rodape__coluna{text-align:center}
.rodape__coluna .etiqueta{display:block;margin-bottom:1rem}
.rodape__coluna ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:.625rem;
}
.rodape__coluna a{color:var(--creme-70);text-decoration:none;transition:color .18s ease}
.rodape__coluna a:hover{color:var(--creme)}
.rodape__nota{
  margin:.5rem 0 0;
  font-size:.75rem;
  color:var(--creme-45);
}

/* icones das redes sociais — sem pontos nem texto a separar, so os
   proprios icones lado a lado. Coluna propria agora ("Redes"), por isso
   sem margin-top: o espaco ate' a etiqueta em cima ja vem do
   margin-bottom da propria etiqueta, igual as outras colunas. */
.rodape__redes{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
.rodape__redes a{display:flex;color:var(--creme-70);transition:color .18s ease}
.rodape__redes a:hover{color:var(--creme)}
.rodape__redes svg{width:1.25rem;height:1.25rem}

/* [data-encomendar-mini] vem com display:contents por defeito (regra
   generica la em cima) para se comportar como o [data-ligar] — misturado
   solto no flex do sitio onde entra. Aqui e' ao contrario: e' preciso que
   fique como UMA peca so, a 3a peca da fila (logo / meio / encomendar),
   por isso esta classe reverte para display:flex de proposito (mesma
   especificidade do seletor de atributo, ganha por vir depois no
   ficheiro). Largura reservada (19rem) = a maior das duas coisas que a
   capsula la' dentro pode mostrar (texto "Encomendar Já" ou os dois
   logos), para nenhum dos dois estados empurrar o resto do rodape. */
.rodape__encomendar{
  display:flex;align-items:center;justify-content:flex-end;
  flex:0 0 19rem;
}

/* Capsula unica e persistente do "Encomendar" do rodape — ANTES tinha
   duas pecas separadas (o botao com a sua propria borda/largura, e o
   [data-encomendar-mini] com OUTRA borda/largura so' quando aberto), e
   por serem duas caixas diferentes (medidas, bordas e box-sizing
   diferentes) a transicao entre elas ficava desalinhada e distorcida —
   exatamente o que o Micael reportou. Agora e' tudo a MESMA caixa: o
   icone (sempre visivel, e' o botao que abre) fica fixo a esquerda; o
   texto "Encomendar Já" aparece no hover (antes de clicar); depois de
   clicar, o texto da lugar as opcoes (Glovo | MotoFast) e a capsula
   fica presa aberta (":not(.is-fechado)"), sem depender do rato la'
   continuar em cima — e' literalmente "o botao a ficar preso no hover",
   so' que a proposito, com o texto trocado pelas opcoes.
   box-sizing:content-box so' aqui (o resto do site usa border-box): a
   borda de 2px nao pode roubar espaco ao icone de 2.75rem, senao ele
   fica maior do que a area visivel e sai cortado/descentrado.
   border-radius:999px em vez de 50%: com 50% a forma esticada dava uma
   elipse; um valor fixo (sempre > metade da altura) da sempre pontas
   semicirculares — capsula a serio — e no estado parado (largura =
   altura) continua a dar um circulo perfeito. */
.rodape__encomendar-capsula{
  box-sizing:content-box;
  display:flex;
  align-items:center;
  width:2.75rem;height:2.75rem;
  border:2px solid transparent;
  border-radius:999px;
  overflow:hidden;
  white-space:nowrap;
  transition:width .4s cubic-bezier(.4,0,.2,1), border-color .3s ease;
}
.rodape__encomendar-capsula:hover{
  width:14rem;
  border-color:var(--vermelho);
}
/* aberto (depois do clique) precisa de mais espaco do que o hover do
   texto, por causa dos dois logos — especificidade mais alta do que o
   :hover para ganhar sempre que o [data-encomendar-mini] ja' nao tiver
   .is-fechado, quer o rato esteja em cima quer nao. */
.rodape__encomendar:not(.is-fechado) .rodape__encomendar-capsula{
  width:18rem;
  border-color:var(--vermelho);
}
@media (prefers-reduced-motion:reduce){
  .rodape__encomendar-capsula{transition:none}
}

/* o botao (icone + texto) nao tem largura propria — cresce ao tamanho
   natural do seu conteudo (icone + texto), que ja' existe sempre por
   inteiro no layout (o texto so' fica com opacity:0 em repouso, nunca
   larghura 0). E' a CAPSULA a' volta que esta' pequena e com
   overflow:hidden a cortar o que nao caiba; o botao em si e' sempre "do
   tamanho todo". Por isso clicar em qualquer parte VISIVEL do botao — o
   circulo parado, ou o texto revelado no hover — conta como clicar nele:
   nao e' um truque a mais, e' o mesmo elemento em toda a area.
   Continua visivel (icone incluido) depois de aberto — a regra generica
   [data-encomendar-mini-abrir]{display:none} la' em cima escondia-o
   assim que .is-fechado saia; o seletor classe+atributo aqui tem mais
   especificidade do que so' o atributo sozinho, por isso sobrepoe-se. */
.rodape__encomendar-btn[data-encomendar-mini-abrir]{
  display:flex;align-items:center;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.rodape__encomendar-btn__icone{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 2.75rem;
  width:2.75rem;height:2.75rem;
  background:var(--vermelho);
  border-radius:50%;
  color:var(--creme);
}
.rodape__encomendar-btn__icone svg{width:1.375rem;height:1.375rem}

.rodape__encomendar-btn__texto{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--creme);
  padding-inline:1.125rem 1.625rem;
  opacity:0;
  transition:opacity .2s ease;
}
.rodape__encomendar-capsula:hover .rodape__encomendar-btn__texto{
  opacity:1;
  transition:opacity .3s ease .15s;
}
/* depois de aberto o texto da lugar as opcoes, para sempre */
.rodape__encomendar:not(.is-fechado) .rodape__encomendar-btn__texto{
  display:none;
}

.rodape__encomendar-opcoes{
  display:none;
  align-items:center;
  gap:.875rem;
  padding-inline:.75rem 1.125rem;
}
.rodape__encomendar:not(.is-fechado) .rodape__encomendar-opcoes{
  display:flex;
}
.rodape__encomendar-opcoes a{display:flex;align-items:center;opacity:.85;transition:opacity .18s ease}
.rodape__encomendar-opcoes a:hover{opacity:1}
.rodape__encomendar-opcoes img{height:1.1rem;width:auto;filter:brightness(0) invert(1)}
.rodape__separador{display:flex;align-items:center;color:var(--creme-45);font-size:.9375rem;line-height:1}

@media (max-width:56.25rem){
  .rodape__grid{flex-direction:column;text-align:center}
  .rodape__marca-bloco{align-items:center}
  .rodape__meio{flex-direction:column;align-items:center;gap:2rem}
  .rodape__redes{justify-content:center}
  /* em coluna, flex-basis passa a controlar altura, nao largura — o
     espaco reservado para o "Encomendar" so' faz sentido na fila
     horizontal do ecra largo */
  .rodape__encomendar{flex:0 0 auto;justify-content:center}
}

/* --- gaveta do rodape: ao chegar ao fim da pagina, revela o logo por
   baixo, como uma gaveta a abrir (tecnica da Too Good To Go). A gaveta
   (.rodape-gaveta) fica position:fixed colada ao fundo do ecra desde
   sempre; o que a esconde durante o resto da pagina e' o .pagina por
   cima (z-index mais alto, fundo opaco). O "margin-bottom" no .pagina
   (nao padding-bottom!) e' o que abre espaco a mais para dar scroll —
   margin nao pinta fundo, por isso e' so ai que a gaveta, ja fixa por
   baixo de tudo, finalmente aparece.
   Primeira tentativa usava padding-bottom + position:sticky e nao fazia
   nada: o padding fica pintado pelo fundo do proprio .pagina (esconde-se
   a si mesmo) e o sticky nunca chega a "prender" porque a gaveta ja
   nasce exatamente no fim do documento — corrigido para fixed + margin. */
.pagina{
  position:relative;
  z-index:1;
  background:var(--tinta);
  margin-bottom:var(--gaveta-h);
}
.rodape-gaveta{
  position:fixed;
  inset:auto 0 0 0;
  z-index:0;
  height:var(--gaveta-h);
  background:var(--tinta);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  overflow:hidden;
  text-align:center;
}
.rodape-gaveta img{
  height:4.5rem;
  width:auto;
}
.rodape-gaveta__legal{
  margin:0;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--creme-45);
}
.rodape-gaveta__legal a{
  color:var(--creme-45);
  text-decoration:none;
}
.rodape-gaveta__legal a:hover{color:var(--creme)}
.rodape-gaveta__legal a + a{margin-left:1.25rem}

@media (max-width:36rem){
  .rodape-gaveta img{height:3.25rem}
}

/* --- cta final (partilhado por todas as paginas) -------------------------- */

.cta-final{
  position:relative;
  padding-block:4.5rem;
  background:var(--tinta-fundo);
  overflow:hidden;
  text-align:left;
}
.cta-final::before{
  content:"";
  position:absolute;right:-6rem;top:50%;
  width:22rem;height:22rem;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(216,17,37,.28) 0%,rgba(216,17,37,0) 70%);
  z-index:0;
}
.cta-final__inner{position:relative;z-index:1;max-width:34rem}
.cta-final h2{max-width:11ch}
.cta-final p{margin-top:1.25rem;font-size:var(--fs-lead);color:var(--creme-70)}
.cta-final__accoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

@media (max-width:40rem){
  .cta-final__accoes .btn{flex:1 1 100%}
}