/* ==========================================================================
   Papo Seco — Padaria & Pastelaria · paposeco.com
   Variante C — «Fita dourada»

   Índice
    1. Variáveis (cores, espaços, tipos de letra)
    2. Base
    3. Utilitários (contentor, só para leitores de ecrã, saltar)
    4. Fita (ribbon) e sobretítulo
    5. Botões e ligações
    6. Cabeçalho
    7. Abertura (hero) + faixa das localidades
    8. Secções e recortes ondulados
    9. As nossas casas (cartões)
   10. Mapa (secção chocolate + painel claro)
   11. Rodapé
   12. Movimento reduzido e impressão
   ========================================================================== */


/* 1. VARIÁVEIS
   ========================================================================== */
:root {
  /* Marca Papo Seco */
  --dourado: #FEB000;
  --dourado-claro: #FFC53D;     /* riscas do toldo, hover dos botões */
  --dourado-escuro: #DB9400;    /* pontas da fita, «degrau» dos botões */
  --dourado-dobra: #9A6200;     /* dobra da fita */
  --chocolate: #3A1C14;
  --chocolate-claro: #54301F;
  --chocolate-fundo: #2A130D;
  --creme: #FFF8EA;
  --creme-forte: #FBEBC8;
  --branco: #FFFFFF;

  /* Texto (todos com contraste AA ou superior sobre o respectivo fundo) */
  --texto: var(--chocolate);
  --texto-suave: #6B4A3D;       /* sobre creme/branco: 7:1 */
  --creme-suave: #EAD9C2;       /* sobre chocolate: 10:1 */

  /* Acentos das outras casas (só junto de cada uma) */
  --azeitona: #777A52;
  --bege: #E8C9A6;
  --rosa: #EABCAD;
  --castanho: #84683F;
  --neutro: #CBB8A0;
  --neutro-escuro: #8A7263;

  /* Tipos de letra — só fontes de sistema */
  --fonte-titulos: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala de espaços */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-seccao: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* Medidas gerais */
  --largura: 72rem;                        /* largura máxima do conteúdo */
  --margem: clamp(1rem, 4vw, 2.5rem);      /* margem lateral da página */
  --raio: 1.25rem;
  --raio-pequeno: 0.75rem;
  --recorte: 0.875rem;                     /* raio das ondas (recortes) */
  --risca: calc(var(--recorte) * 4);       /* par de riscas do toldo */
  --prato: clamp(14.5rem, 6rem + 28vw, 26rem);

  /* Sombras e transições */
  --sombra-1: 0 1px 2px rgba(58, 28, 20, 0.06), 0 8px 18px -10px rgba(58, 28, 20, 0.22);
  --sombra-2: 0 2px 4px rgba(58, 28, 20, 0.08), 0 20px 34px -16px rgba(58, 28, 20, 0.38);
  --transicao: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Cor do anel de foco; muda nas zonas escuras */
  --cor-foco: var(--chocolate);
}


/* 2. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;             /* altura do cabeçalho fixo */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

picture {
  display: block;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

main:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

::selection {
  background: var(--dourado);
  color: var(--chocolate);
}


/* 3. UTILITÁRIOS
   ========================================================================== */
.contentor {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin-inline: auto;
}

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

/* Palavras que não se devem separar ao mudar de linha (ex.: «Encontre-nos») */
.sem-quebra {
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-3);
  z-index: 100;
  padding: var(--esp-3) var(--esp-5);
  border-radius: 999px;
  background: var(--chocolate);
  color: var(--creme);
  font-family: var(--fonte-titulos);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--transicao);
}

.saltar:focus {
  transform: none;
  outline: 3px solid var(--dourado);
  outline-offset: 2px;
}


/* 4. FITA (RIBBON) E SOBRETÍTULO
   A fita é feita só com CSS e lembra a fita do logótipo:
   .fita            → invólucro (guarda as duas pontas em cauda de andorinha)
   .fita__texto     → a faixa dourada com o texto (guarda as duas dobras)
   ========================================================================== */
.fita {
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin-inline: 1.1em;                    /* espaço para as pontas */
  margin-bottom: 0.5em;                    /* espaço para as dobras */
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  filter: drop-shadow(0 0.2em 0.3em rgba(58, 28, 20, 0.18));
}

.fita__texto {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.62em 1.15em 0.58em;
  background: var(--dourado);
  text-align: center;                      /* se faltar largura, o texto parte em duas linhas */
}

/* Dobras: pequenos triângulos escuros por baixo das extremidades da faixa */
.fita__texto::before,
.fita__texto::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0.8em;
  height: 0.5em;
  background: var(--dourado-dobra);
}

.fita__texto::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.fita__texto::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Pontas: ficam por trás da faixa, meio tom abaixo, com corte em «V» */
.fita::before,
.fita::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.5em;
  bottom: -0.5em;
  width: 1.9em;
  background: var(--dourado-escuro);
}

.fita::before {
  left: -1.1em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.7em 50%);
}

.fita::after {
  right: -1.1em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%);
}

.fita--pequena {
  font-size: 0.72rem;
}

/* Sobretítulo das secções: texto pequeno entre duas barrinhas douradas */
.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin: 0;
  color: var(--texto-suave);
  font-family: var(--fonte-titulos);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sobretitulo::before,
.sobretitulo::after {
  content: "";
  width: 1.75rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--dourado);
}


/* 5. BOTÕES E LIGAÇÕES
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;                     /* alvo de toque ≥ 44 px */
  padding: 0.5rem 1.2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--fonte-titulos);
  font-size: 0.975rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--transicao),
    box-shadow var(--transicao),
    background-color var(--transicao),
    border-color var(--transicao),
    color var(--transicao);
}

/* Dourado com texto castanho (branco sobre dourado não tem contraste) */
.botao--dourado {
  background: var(--dourado);
  color: var(--chocolate);
  box-shadow: 0 0.2rem 0 var(--dourado-escuro);
}

.botao--dourado:hover {
  background: var(--dourado-claro);
  transform: translateY(-1px);
  box-shadow: 0 calc(0.2rem + 1px) 0 var(--dourado-escuro);
}

.botao--dourado:active {
  transform: translateY(0.15rem);
  box-shadow: 0 0.05rem 0 var(--dourado-escuro);
}

.botao--contorno {
  border-color: var(--chocolate);
  background: transparent;
  color: var(--chocolate);
}

.botao--contorno:hover,
.botao--contorno[aria-pressed="true"] {
  background: var(--chocolate);
  color: var(--creme);
}

.botao--contorno:active {
  transform: translateY(0.1rem);
}

/* Visto dourado quando o botão «Ver no mapa» está activo (não depende só da cor).
   A margem interior encolhe o mesmo que o visto ocupa: o botão não muda de largura. */
.botao--contorno[aria-pressed="true"] {
  padding-inline: calc(1.2rem - 0.55em);
}

.botao--contorno[aria-pressed="true"]::before {
  content: "";
  width: 0.38em;
  height: 0.72em;
  margin-top: -0.2em;
  border: solid var(--dourado);
  border-width: 0 0.17em 0.17em 0;
  transform: rotate(45deg);
}

.botao--grande {
  min-height: 3.25rem;
  padding-inline: 1.6rem;
  font-size: 1.0625rem;
}

/* Ligação de texto com setinha (abre noutro separador) */
.ligacao-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  color: var(--chocolate);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--dourado-escuro);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--transicao);
}

.ligacao-seta::after {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border: solid currentColor;
  border-width: 0.15em 0.15em 0 0;
  /* a diagonal da seta (↗), desenhada com um gradiente */
  background: linear-gradient(to bottom right, transparent calc(50% - 0.08em), currentColor calc(50% - 0.08em), currentColor calc(50% + 0.08em), transparent calc(50% + 0.08em));
  transition: transform var(--transicao);
}

.ligacao-seta:hover {
  text-decoration-color: var(--chocolate);
}

.ligacao-seta:hover::after {
  transform: translate(0.12em, -0.12em);
}


/* 6. CABEÇALHO
   ========================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 0.375rem solid var(--dourado);
  background: var(--creme);
  box-shadow: 0 1px 0 rgba(58, 28, 20, 0.12), 0 10px 24px -20px rgba(58, 28, 20, 0.55);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 4rem;
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-radius: var(--raio-pequeno);
  transition: transform var(--transicao);
}

.topo__marca img {
  width: auto;
  height: 3rem;
}

.topo__marca:hover {
  transform: rotate(-3deg) scale(1.04);
}

.topo__nav ul {
  display: flex;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topo__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--esp-3);
  border-radius: 999px;
  /* sublinhado dourado que cresce a partir do centro */
  background: linear-gradient(var(--dourado), var(--dourado)) no-repeat 50% calc(100% - 0.4rem) / 0 0.22rem;
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-size var(--transicao);
}

.topo__nav a:hover,
.topo__nav a:focus-visible {
  background-size: calc(100% - 1.5rem) 0.22rem;
}

.topo__nav a:active {
  background-size: calc(100% - 1.5rem) 0.3rem;
}

@media (min-width: 48rem) {
  .topo__linha {
    min-height: 4.5rem;
  }

  .topo__marca img {
    height: 3.5rem;
  }

  .topo__nav ul {
    gap: var(--esp-3);
  }

  .topo__nav a {
    font-size: 1rem;
  }
}


/* 7. ABERTURA (HERO)
   No telemóvel: «toldo» dourado às riscas em cima, texto por baixo.
   No computador: texto à esquerda, toldo à direita até à margem do ecrã.
   ========================================================================== */
.hero {
  position: relative;
  background: var(--creme);
}

.hero__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* O toldo: riscas douradas largas + ondas penduradas em baixo */
.hero__montra {
  position: relative;
  z-index: 1;
  order: -1;                               /* no telemóvel aparece antes do texto */
  display: grid;
  place-items: center;
  padding: var(--esp-6) var(--margem);
  background: linear-gradient(90deg, var(--dourado) 50%, var(--dourado-claro) 50%) left top / var(--risca) 100% repeat-x;
}

.hero__montra::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: var(--recorte);
  background:
    radial-gradient(circle at 25% 0, var(--dourado) 0, var(--dourado) calc(var(--recorte) - 0.6px), transparent var(--recorte)),
    radial-gradient(circle at 75% 0, var(--dourado-claro) 0, var(--dourado-claro) calc(var(--recorte) - 0.6px), transparent var(--recorte));
  background-position: left top;
  background-size: var(--risca) var(--recorte);
  background-repeat: repeat-x;
  filter: drop-shadow(0 3px 2px rgba(58, 28, 20, 0.18));
  pointer-events: none;
}

/* Prato branco: o logótipo fica SEMPRE sobre fundo claro */
.hero__prato {
  position: relative;
  display: grid;
  place-items: center;
  width: min(var(--prato), 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--branco);
  box-shadow:
    0 0 0 0.5rem rgba(255, 255, 255, 0.45),
    0 1.75rem 2.5rem -1.5rem rgba(58, 28, 20, 0.6);
}

.hero__prato::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 2px dashed rgba(58, 28, 20, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.hero__prato picture {
  width: 76%;
}

.hero__prato img {
  width: 100%;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  padding: calc(var(--esp-6) + var(--recorte)) var(--margem) var(--esp-7);
  text-align: center;
}

.hero__titulo {
  margin: 0;
  font-size: clamp(0.92rem, 4.3vw, 1.55rem);  /* tamanho da fita grande */
}

.hero__frase {
  max-width: 16ch;
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* «Marcador» dourado por baixo de palavras */
.sublinhado {
  padding-inline: 0.06em;
  background: linear-gradient(transparent 62%, var(--dourado) 62%, var(--dourado) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__apoio {
  margin: 0;
  color: var(--texto-suave);
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem);
}

.hero__accoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
  margin: var(--esp-3) 0 0;
}

@media (min-width: 56rem) {
  .hero__grelha {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }

  .hero__montra {
    order: 0;
    padding-block: clamp(3rem, 6vw, 5rem);
  }

  .hero__frase {
    max-width: 17ch;
    font-size: clamp(2.4rem, 0.6rem + 3vw, 3.6rem);
  }

  .hero__texto {
    align-items: flex-start;
    justify-content: center;
    padding-block: clamp(3rem, 6vw, 5rem);
    /* Alinha o texto com o resto da página: a coluna ocupa 11/20 do ecrã,
       logo (ecrã − largura) / 2 = 90,909% da coluna − largura / 2. */
    padding-inline: max(var(--margem), calc(90.909% - var(--largura) / 2)) var(--esp-7);
    text-align: left;
  }

  .hero__accoes {
    justify-content: flex-start;
  }
}

/* Faixa chocolate com as localidades (lembra o círculo do logótipo) */
.faixa-locais {
  background: var(--chocolate);
  color: var(--dourado);
}

.faixa-locais__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2) var(--esp-5);
  margin-block: 0;
  padding: var(--esp-5) 0;
  list-style: none;
  font-family: var(--fonte-titulos);
  font-size: clamp(0.78rem, 0.7rem + 0.4vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.faixa-locais__lista li {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}

.faixa-locais__lista li::before {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  border-radius: 1px;
  background: var(--creme);
  transform: rotate(45deg);
}


/* 8. SECÇÕES E RECORTES ONDULADOS
   Cada secção «pendura» no topo uma fila de ondas com a cor da secção anterior,
   como a orla de um toldo ou de um naperon.
   ========================================================================== */
.seccao {
  position: relative;
  padding-block: calc(var(--esp-seccao) + var(--recorte)) var(--esp-seccao);
}

.casas::before,
.mapa::before,
.rodape::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: var(--recorte);
  background:
    radial-gradient(circle at 50% 0, var(--cor-recorte) 0, var(--cor-recorte) calc(var(--recorte) - 0.6px), transparent var(--recorte))
    center top / calc(var(--recorte) * 2) var(--recorte) repeat-x;
  pointer-events: none;
}

.seccao__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: clamp(2rem, 1rem + 4vw, 3.5rem);
  text-align: center;
}

.seccao__titulo {
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.seccao__intro {
  max-width: 38rem;
  margin: 0;
  color: var(--texto-suave);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
}


/* 9. AS NOSSAS CASAS
   ========================================================================== */
.casas {
  --cor-recorte: var(--chocolate);
  background: var(--creme);
}

.casas__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cor de acento de cada casa (barra do cartão e ponto do botão no mapa).
   As casas sem classe .acento--… ficam com os tons neutros. */
.acento--papo-seco {
  --acento: var(--dourado);
  --acento-2: var(--chocolate);
}

.acento--central {
  --acento: var(--azeitona);
  --acento-2: var(--bege);
}

.acento--cardeal {
  --acento: var(--rosa);
  --acento-2: var(--castanho);
}

.acento--dpepita {
  --acento: #35302d;
  --acento-2: #d8a63f;
}

.acento--leitaria-do-carmo {
  --acento: #b01f2e;
  --acento-2: #7d1420;
}

/* Cartão — no telemóvel é compacto: selo à esquerda, texto à direita, botões por baixo */
.casa {
  --folga: var(--esp-4);
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  grid-template-areas:
    "barra  barra"
    "selo   texto"
    "accoes accoes";
  gap: var(--esp-4);
  padding: 0 var(--folga) var(--folga);
  overflow: hidden;
  border: 1px solid rgba(58, 28, 20, 0.08);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

/* Barra de acento a duas cores, de ponta a ponta */
.casa::before {
  content: "";
  grid-area: barra;
  height: 0.625rem;
  margin-inline: calc(-1 * var(--folga));
  background: linear-gradient(90deg, var(--acento, var(--neutro)) 72%, var(--acento-2, var(--neutro-escuro)) 72%);
}

.casa__selo {
  grid-area: selo;
  align-self: start;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0.375rem;
  border-radius: var(--raio-pequeno);
  background: var(--creme);
  background: color-mix(in srgb, var(--acento, var(--neutro)) 9%, var(--creme));
}

.casa__selo picture,
.casa__selo img {
  width: 100%;
}

.casa__texto {
  grid-area: texto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.casa__destaque {
  margin: 0;
}

.casa__nome {
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.casa__morada {
  color: var(--texto-suave);
  line-height: 1.5;
}

/* Linha preparada para telefone/horário (ver comentários TODO no HTML) */
.casa__extra {
  margin: 0;
  font-weight: 700;
}

/* Telefone: alvo de toque confortável; por baixo, a indicação do custo da chamada (DL 59/2021) */
.casa__extra,
.painel__telefone {
  margin: var(--esp-2, 0.5rem) 0 0;
  font-weight: 700;
}

.telefone {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--chocolate);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.telefone:hover {
  text-decoration-color: currentColor;
}

.telefone__custo {
  display: block;
  color: var(--texto-suave);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
}

/* «Seleccionada no mapa»: no telemóvel só ocupa espaço na casa escolhida;
   na grelha (tablet/computador) o espaço fica sempre reservado para os cartões não saltarem */
.casa__estado {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.casa__estado-ponto {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 0 0 2px var(--chocolate);
}

.casa--seleccionada .casa__estado {
  display: inline-flex;
}

.casa__accoes {
  grid-area: accoes;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-2);
  padding-bottom: 0.2rem;                  /* «degrau» do botão dourado */
}

.casa__accoes .botao {
  flex: 1 1 8.25rem;
}

@media (hover: hover) {
  .casa:hover {
    transform: translateY(-0.2rem);
    box-shadow: var(--sombra-2);
  }
}

.casa:focus-within {
  box-shadow: var(--sombra-2);
}

.casa.casa--seleccionada {
  box-shadow: 0 0 0 3px var(--chocolate), var(--sombra-2);
}

/* Casa principal — sempre com o logótipo em grande */
.casa--principal {
  --folga: var(--esp-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "barra"
    "selo"
    "texto"
    "accoes";
  text-align: center;
}

.casa--principal::before {
  height: 0.875rem;
}

.casa--principal .casa__selo {
  aspect-ratio: auto;
  padding: var(--esp-5);
}

.casa--principal .casa__selo picture {
  width: min(12rem, 62%);
}

.casa--principal .casa__texto {
  align-items: center;
}

.casa--principal .casa__nome {
  font-size: clamp(1.55rem, 1.25rem + 1.5vw, 2.15rem);
}

.casa--principal .casa__morada {
  font-size: 1.0625rem;
}

/* Selo tipográfico sóbrio para as casas sem logótipo */
.selo-tipo {
  --d: 4.5rem;                             /* diâmetro do selo */
  display: grid;
  place-content: center;
  gap: calc(var(--d) * 0.035);
  width: var(--d);
  height: var(--d);
  margin: 0;
  border: 2px solid var(--chocolate);
  border-radius: 50%;
  background: var(--branco);
  box-shadow:
    inset 0 0 0 calc(var(--d) * 0.04) var(--branco),
    inset 0 0 0 calc(var(--d) * 0.04 + 1px) rgba(58, 28, 20, 0.5);
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  text-align: center;
}

.selo-tipo__cima {
  display: none;                           /* só cabe no selo grande */
  font-size: calc(var(--d) * 0.082);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.selo-tipo__nome {
  font-size: calc(var(--d) * 0.15);
  font-weight: 900;
  line-height: 1.06;
}

/* A partir de tablet: grelha de cartões verticais; a casa principal ocupa duas colunas */
@media (min-width: 42rem) {
  .casas__grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-5);
  }

  .casa {
    --folga: var(--esp-5);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "barra"
      "selo"
      "texto"
      "accoes";
  }

  .casa__selo {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 13rem;                     /* igual em todos, para os nomes alinharem */
    padding: var(--esp-5);
  }

  .casa__selo picture {
    width: min(9rem, 64%);
  }

  .casa__selo--largo picture {
    width: min(14rem, 90%);              /* logótipos deitados: mais largos do que os selos quadrados */
  }

  .casa__texto {
    align-self: start;
  }

  .casa__estado {
    display: inline-flex;
    visibility: hidden;
  }

  .casa--seleccionada .casa__estado {
    visibility: visible;
  }

  .selo-tipo {
    --d: 8.5rem;
  }

  .selo-tipo__cima {
    display: block;
  }

  .casa--principal {
    grid-column: span 2;
    grid-template-columns: minmax(12rem, 9fr) minmax(0, 11fr);
    grid-template-rows: auto 1fr auto auto 1fr;   /* as linhas «.» centram texto + botões */
    grid-template-areas:
      "barra barra"
      "selo  ."
      "selo  texto"
      "selo  accoes"
      "selo  .";
    column-gap: var(--esp-6);
    text-align: left;
  }

  .casa--principal .casa__selo picture {
    width: min(17rem, 82%);
  }

  .casa--principal .casa__texto {
    align-items: flex-start;
  }

  .casa--principal .casa__accoes .botao {
    flex: 0 1 auto;
    min-width: 9.5rem;
  }
}

/* Três colunas só quando os dois botões de cada cartão cabem lado a lado */
@media (min-width: 72rem) {
  .casas__grelha {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* 10. MAPA — secção chocolate com o painel claro ao centro
   ========================================================================== */
.mapa {
  --cor-recorte: var(--creme);
  --cor-foco: var(--dourado);
  background: radial-gradient(120% 80% at 50% 0%, var(--chocolate-claro) 0%, var(--chocolate) 55%, var(--chocolate-fundo) 100%);
  color: var(--creme);
}

.mapa .sobretitulo {
  color: var(--dourado);
}

.mapa .seccao__intro {
  color: var(--creme-suave);
}

.painel {
  --cor-foco: var(--chocolate);
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: calc(var(--raio) * 1.2);
  background: var(--creme);
  color: var(--chocolate);
  box-shadow: 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 248, 234, 0.1);
  scroll-margin-top: var(--esp-4);          /* soma-se ao scroll-padding-top do html */
}

/* Orla do painel com as riscas do toldo */
.painel::before {
  content: "";
  display: block;
  height: 0.75rem;
  background: linear-gradient(90deg, var(--dourado) 50%, var(--dourado-claro) 50%) left top / var(--risca) 100% repeat-x;
}

/* Botões para escolher a casa (criados pelo script.js) */
.escolha {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  border-bottom: 1px solid rgba(58, 28, 20, 0.1);
  background: var(--creme-forte);
}

.escolha__rotulo,
.painel__rotulo {
  margin: 0;
  color: var(--texto-suave);
  font-family: var(--fonte-titulos);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.escolha__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.escolha__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border: 2px solid var(--neutro-escuro);  /* contorno com contraste ≥ 3:1 sobre o fundo */
  border-radius: 999px;
  background: var(--branco);
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--transicao),
    background-color var(--transicao),
    border-color var(--transicao),
    color var(--transicao);
}

.escolha__botao:hover {
  border-color: var(--chocolate);
  transform: translateY(-1px);
}

.escolha__botao:active {
  transform: translateY(1px);
}

.escolha__marca {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--acento, var(--neutro));
  box-shadow: 0 0 0 1px rgba(58, 28, 20, 0.35);
}

.escolha__botao[aria-pressed="true"] {
  border-color: var(--chocolate);
  background: var(--chocolate);
  color: var(--creme);
}

/* Na casa escolhida o ponto passa a «visto» (não depende só da cor) */
.escolha__botao[aria-pressed="true"] .escolha__marca {
  width: 0.42rem;
  height: 0.8rem;
  margin: -0.15rem 0.19rem 0;
  border: solid var(--dourado);
  border-width: 0 0.18rem 0.18rem 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: rotate(45deg);
}

.painel__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.painel__info {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
}

.painel__nome {
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.painel__nome:focus-visible {
  outline-offset: 6px;
  border-radius: 0.25rem;
}

.painel__morada {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.painel__accoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  margin-top: var(--esp-3);
}

/* Palco: onde aparece o convite «Mostrar mapa» ou o mapa do Google */
.painel__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 21rem;
  padding: var(--esp-5) var(--esp-4);
  border-top: 1px solid rgba(58, 28, 20, 0.1);
  /* desenho abstracto de «ruas» só com gradientes — não representa nenhum local */
  background:
    linear-gradient(118deg, transparent calc(50% - 0.55rem), rgba(255, 255, 255, 0.85) calc(50% - 0.55rem), rgba(255, 255, 255, 0.85) calc(50% + 0.55rem), transparent calc(50% + 0.55rem)),
    linear-gradient(28deg, transparent calc(64% - 0.4rem), rgba(255, 255, 255, 0.7) calc(64% - 0.4rem), rgba(255, 255, 255, 0.7) calc(64% + 0.4rem), transparent calc(64% + 0.4rem)),
    repeating-linear-gradient(0deg, rgba(58, 28, 20, 0.06) 0, rgba(58, 28, 20, 0.06) 1px, transparent 1px, transparent 3rem),
    repeating-linear-gradient(90deg, rgba(58, 28, 20, 0.06) 0, rgba(58, 28, 20, 0.06) 1px, transparent 1px, transparent 3rem),
    var(--creme-forte);
}

.painel__palco--com-mapa {
  min-height: clamp(22rem, 60vh, 30rem);
  padding: 0;
}

.painel__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--creme-forte);
}

.convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  width: min(100%, 24rem);
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-2);
  text-align: center;
}

.convite__consentimento {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
}

.convite__nota {
  max-width: 34ch;
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Alfinete decorativo feito em CSS (não marca nenhuma coordenada) */
.pino {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: 50% 50% 50% 0;
  background: var(--dourado);
  transform: rotate(-45deg);
  filter: drop-shadow(-0.2rem 0.2rem 0.25rem rgba(58, 28, 20, 0.3));
}

.pino::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--chocolate);
}

.painel__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid rgba(58, 28, 20, 0.1);
  background: var(--creme-forte);
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.painel__pe p {
  margin: 0;
}

@media (min-width: 48rem) {
  .escolha {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-3) var(--esp-5);
    padding: var(--esp-5) var(--esp-6) var(--esp-4);
  }

  .painel__info {
    padding: var(--esp-6);
  }

  .painel__pe {
    padding-inline: var(--esp-6);
  }
}

@media (min-width: 56rem) {
  .painel__corpo {
    grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr);
  }

  .painel__info {
    justify-content: center;
  }

  .painel__palco {
    min-height: 27rem;
    border-top: 0;
    border-left: 1px solid rgba(58, 28, 20, 0.1);
  }
}


/* 11. RODAPÉ — a última faixa dourada
   ========================================================================== */
.rodape {
  --cor-recorte: var(--chocolate-fundo);
  position: relative;
  padding-block: calc(var(--esp-7) + var(--recorte)) var(--esp-6);
  border-bottom: 0.5rem solid var(--chocolate);
  background: var(--dourado);
  color: var(--chocolate);
  font-size: 0.95rem;
}

.rodape__grelha {
  display: grid;
  gap: var(--esp-5);
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

/* Pratinho branco: o logótipo nunca fica directamente sobre o dourado */
.rodape__prato {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.45);
}

.rodape__prato picture {
  width: 3.6rem;
}

.rodape__nome {
  margin: 0;
  font-family: var(--fonte-titulos);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
}

.rodape__nome small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rodape__nome small span {
  display: block;
}

@media (min-width: 36rem) {
  .rodape__nome small span {
    display: inline;
  }

  .rodape__nome small span + span::before {
    content: "·";
    margin-inline: 0.6em;
  }
}

.rodape__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__nav a,
.rodape__botao {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--chocolate);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(58, 28, 20, 0.4);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--transicao);
}

.rodape__nav a {
  font-family: var(--fonte-titulos);
}

.rodape__nav a:hover,
.rodape__botao:hover {
  text-decoration-color: var(--chocolate);
}

.rodape__botao {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}

.rodape__notas {
  display: grid;
  gap: var(--esp-2);
  padding-top: var(--esp-4);
  border-top: 2px solid rgba(58, 28, 20, 0.18);
}

.rodape__notas p {
  max-width: 62rem;
  margin: 0;
}

.rodape__direitos {
  font-family: var(--fonte-titulos);
  font-weight: 800;
}

.rodape__feito {
  display: inline-block;
  font-weight: 700;
}

@media (min-width: 48rem) {
  .rodape__grelha {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

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


/* 12. MOVIMENTO E IMPRESSÃO
   ========================================================================== */
/* Entrada discreta do logótipo — só para quem não pediu menos movimento.
   Usa apenas «transform»: mesmo que a animação não corra, nada fica invisível. */
@media (prefers-reduced-motion: no-preference) {
  .hero__prato {
    animation: pousar 700ms cubic-bezier(0.2, 0.8, 0.3, 1.15) backwards;
  }
}

@keyframes pousar {
  from {
    transform: scale(0.94) rotate(-5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .casa:hover,
  .botao:hover,
  .topo__marca:hover,
  .escolha__botao:hover {
    transform: none;
  }
}

@media print {
  .topo__nav,
  .saltar,
  .hero__accoes,
  .painel__palco,
  .painel__pe,
  .escolha,
  .rodape__nav,
  .casa [data-ver-no-mapa] {
    display: none !important;
  }

  .topo {
    position: static;
  }

  .mapa,
  .rodape,
  .faixa-locais {
    background: none;
    color: #000;
  }

  .casa {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* ==========================================================================
   Mapa geral (imagem estática do OpenStreetMap, alojada no site) + pinos
   ========================================================================== */
.painel__palco {
  padding: 0;                              /* o mapa geral ocupa o palco todo */
  background: var(--creme-forte);
}

.painel__palco:not(.painel__palco--com-mapa) {
  min-height: 0;                           /* sem o mapa do Google, o palco tem a altura do mapa geral */
}

.mapa-geral {
  width: 100%;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.mapa-geral[hidden] {
  display: none;
}

.mapa-geral__tela {
  position: relative;
  flex: 0 0 auto;                          /* a tela tem EXACTAMENTE a altura da imagem: os % dos pinos medem-se sobre o mapa */
  min-height: 0;
  overflow: hidden;
}

.mapa-geral__tela picture,
.mapa-geral__tela img {
  display: block;
  width: 100%;
  height: auto;
}

.mapa-geral__pinos {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Posições calculadas a partir das coordenadas (docs/pinos-mapa.json); aproximadas, à escala da região */
.pino-mapa--papo-seco { left: 12.75%; top: 66.86%; }
.pino-mapa--central { left: 26.12%; top: 76.35%; }
.pino-mapa--cardeal { left: 89.32%; top: 19.69%; }
.pino-mapa--dpepita { left: 60.05%; top: 59.2%; }
.pino-mapa--leitaria-do-carmo { left: 18.16%; top: 66.53%; }

.pino-mapa {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;         /* centra o pino no ponto */
  border: 2px solid var(--chocolate);
  border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 2px 6px rgba(58, 28, 20, 0.45);
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s ease;
  z-index: 2;
}

.pino-mapa::after {                          /* alvo de toque de 44px sem aumentar o pino */
  content: "";
  position: absolute;
  inset: -0.5rem;
}

.pino-mapa:hover,
.pino-mapa:focus-visible {
  z-index: 3;
  transform: scale(1.15);
}

.pino-mapa[aria-current="true"] {
  z-index: 1;                              /* o pino escolhido é maior: fica por baixo para não tapar os vizinhos */
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border-color: var(--dourado);
  background: var(--chocolate);
  color: var(--branco);
  font-size: 1rem;
}

.pino-mapa[aria-current="true"]::after {
  inset: 0;                                /* já está escolhido: não precisa de alvo alargado */
}

/* Papo Seco (1) e Leitaria do Carmo (5) são vizinhos em Viana: o alvo alargado de um não invade o outro */
.pino-mapa--papo-seco::after {
  right: 0;
}

.pino-mapa--leitaria-do-carmo::after {
  left: 0;
}

.mapa-geral__legenda {
  flex: 1 0 auto;                          /* ocupa o que sobrar quando a coluna do texto é mais alta */
  padding: var(--esp-2, 0.5rem) var(--esp-4, 1rem);
  border-top: 1px solid rgba(58, 28, 20, 0.1);
  background: var(--creme);
  color: var(--texto-suave);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.mapa-geral__legenda a {
  color: var(--chocolate);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .pino-mapa {
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
  }
}

/* Telemóvel: os três pinos de Viana/Darque ficam muito juntos — afastar um pouco o 1 e o 5 (o mapa é aproximado)
   e tirar-lhes o alvo alargado, para o toque acertar sempre na casa certa. */
@media (max-width: 35.99rem) {
  .pino-mapa--papo-seco { left: 11.75%; }
  .pino-mapa--leitaria-do-carmo { left: 19.75%; }

  .pino-mapa--papo-seco::after,
  .pino-mapa--central::after,
  .pino-mapa--leitaria-do-carmo::after {
    content: none;
  }
}

/* Pedido do mapa interactivo do Google (informação completa antes do clique) */
.google {
  padding: var(--esp-4, 1rem) var(--esp-5, 1.5rem);
  border-top: 1px solid rgba(58, 28, 20, 0.1);
  background: var(--branco);
  color: var(--chocolate);
}

.google[hidden] {
  display: none;
}

.google__pedido {
  display: grid;
  gap: var(--esp-4, 1rem);
}

.google__pedido[hidden] {
  display: none;
}

.google__titulo {
  margin: 0 0 0.375rem;
  font-family: var(--fonte-titulos);
  font-size: 1.0625rem;
  line-height: 1.25;
}

.google__texto p,
.google__nota {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.5;
}

.google__texto a {
  color: var(--chocolate);
  font-weight: 700;
}

.google__accoes {
  display: grid;
  gap: var(--esp-3, 0.75rem);
  justify-items: start;
}

.google__lembrar {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  min-height: 2.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

.google__lembrar input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--chocolate);
}

@media (min-width: 60rem) {
  .google__pedido {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
    gap: var(--esp-6, 2rem);
  }
}

@media print {
  .google,
  .mapa-geral__pinos {
    display: none;
  }
}
/* ==========================================================================
   Rodapé: informação ao consumidor e informação legal · Página legal
   ========================================================================== */
.rodape__consumidor,
.rodape__legal {
  grid-column: 1 / -1;
  padding-top: var(--esp-4, 1rem);
  border-top: 1px solid rgba(58, 28, 20, 0.22);
  font-size: 0.875rem;
  line-height: 1.5;
}

.rodape__consumidor {
  display: grid;
  gap: var(--esp-3, 0.75rem);
  justify-items: start;
}

.rodape__consumidor p,
.rodape__legal p {
  margin: 0;
  max-width: 70ch;
}

.rodape__consumidor a,
.rodape__legal a,
.rodape__notas a {
  color: inherit;
  font-weight: 700;
}

/* «local visível e de forma destacada»: botão próprio, não um link perdido no texto */
.rodape__livro {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 2px solid var(--chocolate);
  border-radius: 999px;
  background: var(--branco);
  color: var(--chocolate);
  font-family: var(--fonte-titulos);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.rodape__livro:hover {
  background: var(--chocolate);
  color: var(--branco);
}

/* Dados que só o dono sabe: bem à vista para ninguém publicar o site sem os preencher */
.por-preencher {
  padding: 0.05em 0.3em;
  border-radius: 0.25em;
  background: #ffe34d;
  color: #3a1c14;
  font-weight: 700;
  outline: 2px dashed #b00020;
  outline-offset: 1px;
}

.legal {
  max-width: 48rem;
  padding-block: clamp(2rem, 6vw, 4rem);
  color: var(--chocolate);
  line-height: 1.65;
}

.legal h1 {
  margin: 0 0 0.25rem;
  font-family: var(--fonte-titulos);
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);
  line-height: 1.1;
}

.legal h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: var(--fonte-titulos);
  font-size: 1.375rem;
  line-height: 1.2;
}

.legal h3 {
  margin: 1.25rem 0 0.25rem;
  font-family: var(--fonte-titulos);
  font-size: 1.0625rem;
}

.legal p {
  margin: 0 0 0.75rem;
}

.legal a {
  color: var(--chocolate);
  font-weight: 700;
  text-decoration-color: var(--dourado);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.legal code {
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  background: var(--creme-forte);
  font-size: 0.9em;
}

.legal__voltar {
  margin-bottom: 1.5rem;
}

.legal__data {
  color: var(--texto-suave);
  font-size: 0.9375rem;
}