/* ============================================================================
   RESTAURANTE TAMARIZ · Areias de São João, Albufeira
   ----------------------------------------------------------------------------
   O site nasce do logótipo: um sol desenhado a 20 raios sobre marfim, com o
   nome em caligráfico. Tudo o resto vem daí.

   PALETA (medida no logótipo — #f7b23b)
   --ambar        #f7b23b   o sol, tal e qual como está no logótipo
   --ambar-forte  #e09a1e   o amarelo do sol a arder (filetes, sublinhados)
   --ambar-fundo  #8a5a06   o ambar escurecido para texto pequeno (5,36:1)
   --marfim       #fffdf7   o branco levemente quente do fundo do logótipo
   --areia        #faf3e4   a toalha de papel das fotografias de mesa
   --papel        #fffcf3   o cartão da ementa
   --tinta        #1f2328   a tinta preta da ementa impressa (15,4:1)
   --tinta-suave  #4a4f55   a tinta dos preços e das notas (8,06:1)
   --azul         #12232e   o azul profundo das noites de verão
   --verde-mar    #1d4d4f   o verde-água do Algarve, usado como contraponto
   --coral        #c0492b   o vermelho do carvão aceso (4,88:1 sobre marfim)

   TIPOGRAFIA
   --caligrafia   Yellowtail  — a mesma família de traço do nome no logótipo.
                  Usada só na voz da casa: marca, títulos de secção, preços
                  grandes. Nunca em texto corrido (a 16 px não se lê).
   --sans         Montserrat  — a geométrica dos letreiros de praia; alturas
                  de texto, botões, dados e a palavra «restaurante» espaçada.

   ARTE PRÓPRIA DO SITE (o que nenhum outro cliente tem)
   1. O «mostrador de sol»: os títulos de secção levam um arco de raios
      desenhado em SVG, do mesmo ângulo do sol do logótipo. É a assinatura.
   2. A «toalha de quadrados»: o fundo das secções de mar usa um padrão de
      quadrados finos (o xadrez das toalhas de mesa), feito com
      repeating-linear-gradient — nunca uma imagem.
   3. O «dístico do sol» — a etiqueta circular do canto do cartão, com a hora
      a que se come cada coisa (12h às grelhas, 19h ao pôr do sol).
   ========================================================================== */

@font-face {
  font-family: 'Yellowtail';
  src: url('/assets/fonts/yellowtail-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ambar: #f7b23b;
  --ambar-forte: #e09a1e;
  --ambar-fundo: #8a5a06;
  --marfim: #fffdf7;
  --areia: #faf3e4;
  --papel: #fffcf3;
  --tinta: #1f2328;
  --tinta-suave: #4a4f55;
  --azul: #12232e;
  --verde-mar: #1d4d4f;
  --coral: #c0492b;
  --caligrafia: 'Yellowtail', 'Segoe Script', cursive;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --sombra: 0 1px 2px rgba(31, 35, 40, .06), 0 8px 24px rgba(31, 35, 40, .07);
  --sombra-alta: 0 2px 4px rgba(31, 35, 40, .08), 0 18px 48px rgba(31, 35, 40, .13);
  --raio: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-bottom: 3.2rem; /* a tarja de pré-visualização, do tamanho dele */
  background: var(--marfim);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--verde-mar); }

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.12; }

p { margin: 0 0 1em; }

.salto {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--marfim);
  padding: .7rem 1.2rem; z-index: 100;
}
.salto:focus { left: .5rem; top: .5rem; }

/* ---------- CABEÇALHO ---------------------------------------------------
   Papel de embalagem: uma faixa marfim, o sol à esquerda no seu círculo,
   o nome em caligráfico e o menu a seguir. Fica colado ao topo ao rolar. */

.cabeca {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 253, 247, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid rgba(31, 35, 40, .10);
}
.cabeca::after {           /* o filete de sol por baixo de tudo */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--ambar) 0%, var(--ambar-forte) 42%, var(--verde-mar) 100%);
  opacity: .85;
}
.cabeca-caixa {
  max-width: 1180px; margin: 0 auto; padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: 1.1rem;
}

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.marca-emblema {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--marfim);
  border: 2px solid var(--ambar);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px var(--marfim), inset 0 0 0 4px rgba(224, 154, 30, .45);
  flex: 0 0 auto;
}
.marca-emblema svg { width: 34px; height: 34px; display: block; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nome {
  font-family: var(--caligrafia); font-size: 1.62rem; color: var(--tinta);
  letter-spacing: .01em;
}
.marca-sub {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ambar-fundo); font-weight: 600; margin-top: .28rem;
}

.menu { display: flex; align-items: center; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.menu a {
  text-decoration: none; color: var(--tinta); font-size: .8rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .5rem .62rem; border-radius: var(--raio);
  position: relative;
}
.menu a::after {
  content: ''; position: absolute; left: .62rem; right: .62rem; bottom: .28rem;
  height: 2px; background: var(--ambar-forte); transform: scaleX(0);
  transform-origin: left; transition: transform .22s ease;
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }

.cabeca-acoes { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.btn-mesa {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--verde-mar); color: var(--marfim); text-decoration: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .62rem 1rem; border-radius: 999px; white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.btn-mesa:hover { background: var(--azul); transform: translateY(-1px); }
.btn-mesa svg { width: 15px; height: 15px; }
.idioma {
  text-decoration: none; color: var(--tinta); font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; border: 1px solid rgba(31, 35, 40, .22);
  padding: .5rem .6rem; border-radius: 999px; text-transform: uppercase;
}
.idioma:hover { border-color: var(--ambar-forte); color: var(--ambar-fundo); }

/* ---------- ABERTURA -----------------------------------------------------
   Sem fotografia de fundo e sem carrossel: um painel de ementa. À esquerda o
   que a casa é, em três linhas; à direita, a fotografia da fachada com o
   dístico do sol sobreposto, como um selo de garantia. */

.abertura {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 460px at 88% -12%, rgba(247, 178, 59, .20), transparent 62%),
    linear-gradient(180deg, var(--marfim) 0%, var(--areia) 100%);
  border-bottom: 1px solid rgba(31, 35, 40, .08);
}
.abertura-caixa {
  max-width: 1180px; margin: 0 auto; padding: 3.4rem 1.25rem 3.6rem;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: center;
}
.abertura-rotulo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 600; color: var(--verde-mar); margin-bottom: 1.3rem;
}
.abertura-rotulo span { display: inline-block; width: 34px; height: 1px; background: var(--verde-mar); }

.abertura h1 {
  font-family: var(--caligrafia); font-size: clamp(2.15rem, 4.15vw, 3.15rem);
  color: var(--tinta); letter-spacing: .005em; line-height: 1.02;
  margin-bottom: 1.15rem;
}
.abertura h1 em {
  display: block; font-style: normal; color: var(--verde-mar);
}
.abertura-lead { font-size: 1.06rem; color: var(--tinta-suave); max-width: 34ch; }

.abertura-linha {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin: 1.7rem 0 1.9rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(31, 35, 40, .13);
}
.abertura-linha strong {
  font-family: var(--caligrafia); font-size: 1.55rem; font-weight: 400; color: var(--tinta);
}
.abertura-linha span {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ambar-fundo); font-weight: 600;
}

.accoes { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-weight: 600; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .92rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-sol { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }
.btn-sol:hover { background: var(--ambar-forte); border-color: var(--ambar-forte); transform: translateY(-2px); }
.btn-contorno { background: transparent; color: var(--verde-mar); border-color: var(--verde-mar); }
.btn-contorno:hover { background: var(--verde-mar); color: var(--marfim); transform: translateY(-2px); }

.abertura-selo {
  position: relative;
}
.abertura-selo figure { margin: 0; position: relative; }
.abertura-selo img {
  width: 100%; border-radius: 2px;
  box-shadow: var(--sombra-alta);
}

/* O mosaico da abertura: a fachada manda, a mesa acompanha. Três fotografias
   num só bloco — a casa e o que dela sai — para quem chega ver as duas coisas
   antes de ler uma linha. */
.mosaico {
  display: grid; gap: .7rem;
  grid-template-columns: 1.9fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
}
.mosaico figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: var(--tinta); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.mosaico .fachada { grid-row: span 2; }
.mosaico .fachada img { aspect-ratio: 3 / 4; }
.mosaico .prato img { aspect-ratio: 1 / 1; }
.mosaico figure::after {   /* um véu de sol muito fino, para as fotografias assentarem no papel */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(31, 35, 40, .10);
}

/* A prova no primeiro ecrã: duas notas reais, ditas em voz alta. */
.abertura-prova {
  display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap;
  margin: 1.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(31, 35, 40, .13);
}
.abertura-prova .prova {
  display: flex; align-items: baseline; gap: .45rem;
  text-decoration: none; color: var(--tinta);
}
.abertura-prova b {
  font-family: var(--caligrafia); font-weight: 400; font-size: 1.75rem;
  color: var(--verde-mar); line-height: 1;
}
.abertura-prova small {
  font-size: .78rem; color: var(--tinta-suave); letter-spacing: .02em;
}
.abertura-prova .estrelas { color: var(--ambar-forte); letter-spacing: .06em; font-size: .82rem; }
.abertura-selo::before {     /* moldura dupla, como uma fotografia emoldurada */
  content: ''; position: absolute; inset: -14px -14px 14px 14px;
  border: 1px solid rgba(224, 154, 30, .55); border-radius: 2px; pointer-events: none;
}
.distico {
  position: absolute; right: 14px; bottom: 14px;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--verde-mar); color: var(--marfim);
  display: grid; place-items: center; text-align: center;
  box-shadow: 0 10px 30px rgba(18, 35, 46, .3);
  border: 3px solid var(--marfim); outline: 1px dashed rgba(247, 178, 59, .8); outline-offset: -9px;
}
.distico b { display: block; font-family: var(--caligrafia); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.distico span { display: block; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .3rem; opacity: .9; }

/* ---------- MOSTRADOR DO SOL (assinatura) --------------------------------
   O arco de raios que acompanha cada título de secção. O mesmo desenho do
   sol do logótipo, sempre virado para cima. */

.titulo-seccao { position: relative; padding-top: 2.4rem; margin-bottom: 1.6rem; }
.titulo-seccao .raios {
  position: absolute; top: 0; left: 0;
  width: 92px; height: 33px; color: var(--ambar-forte);
}
.titulo-seccao .migalha {
  display: block; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 600; color: var(--verde-mar); margin-bottom: .5rem;
}
.titulo-seccao h2 {
  font-family: var(--caligrafia); font-size: clamp(1.95rem, 3.5vw, 2.8rem);
  color: var(--tinta); line-height: 1.06;
}
.titulo-seccao h2 em { font-style: normal; color: var(--verde-mar); }
.titulo-seccao p { margin-top: .85rem; color: var(--tinta-suave); max-width: 58ch; }

.seccao { padding: 4.2rem 1.25rem; }
.seccao-caixa { max-width: 1180px; margin: 0 auto; }
.seccao-areia { background: var(--areia); border-block: 1px solid rgba(31, 35, 40, .08); }
.seccao-azul { background: var(--azul); color: var(--marfim); }
.seccao-azul .titulo-seccao h2 { color: var(--marfim); }
.seccao-azul .titulo-seccao h2 em { color: var(--ambar); }
.seccao-azul .titulo-seccao .migalha { color: var(--ambar); }
.seccao-azul .titulo-seccao .raios { color: var(--ambar); }
.seccao-azul .titulo-seccao p { color: rgba(255, 253, 247, .78); }

/* ---------- A MESA (fotografias) ----------------------------------------
   Uma fotografia, um lugar. A grelha é irregular de propósito: duas verticais
   e uma horizontal, como uma mesa posta a que se chega por lados diferentes. */

.mesa {
  display: grid; gap: 1rem;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto auto;
}
.mesa figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: var(--tinta); }
.mesa img { width: 100%; height: 100%; object-fit: cover; }
.mesa .grande { grid-row: span 2; }
.mesa .grande img { aspect-ratio: 4 / 5; }
.mesa .pequena img { aspect-ratio: 16 / 11; }

/* ---------- EMENTA (cartão) ----------------------------------------------
   O papel da ementa: fundo marfim, um filete de sol no topo, duas colunas de
   pratos. Sem preços inventados — a casa não os publica online. */

.cartao-ementa {
  background: var(--papel); border: 1px solid rgba(31, 35, 40, .12);
  border-radius: 4px; box-shadow: var(--sombra); overflow: hidden;
}
.cartao-ementa-topo {
  padding: 1.15rem 1.5rem; border-bottom: 1px solid rgba(31, 35, 40, .1);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(90deg, rgba(247, 178, 59, .14), transparent 70%);
}
.cartao-ementa-topo b {
  font-family: var(--caligrafia); font-size: 1.5rem; font-weight: 400; color: var(--tinta);
}
.cartao-ementa-topo span {
  font-size: .63rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--verde-mar);
}
.pratos { list-style: none; margin: 0; padding: .35rem 1.5rem 1.4rem; columns: 2; column-gap: 2.4rem; }
.pratos li {
  break-inside: avoid; padding: .95rem 0 .9rem .1rem;
  border-bottom: 1px dotted rgba(31, 35, 40, .2);
}
.pratos b { display: block; font-weight: 600; font-size: .99rem; color: var(--tinta); }
.pratos small { display: block; color: var(--tinta-suave); font-size: .86rem; line-height: 1.5; margin-top: .15rem; }
.pratos i {
  display: inline-block; font-style: normal; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--ambar-fundo); margin-top: .32rem;
}

/* ---------- AS HORAS DA CASA (linha do dia) ------------------------------
   Não é uma faixa a passar: é o dia parado numa régua, com a hora marcada em
   cada momento. Quem lê sabe a que horas se come o quê. */

.dia {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 2px solid var(--tinta); border-bottom: 1px solid rgba(31, 35, 40, .18);
  margin-top: 1.4rem;
}
.dia-momento { padding: 1.5rem 1.2rem 1.4rem; position: relative; }
.dia-momento + .dia-momento { border-left: 1px solid rgba(31, 35, 40, .14); }
.dia-hora {
  font-family: var(--caligrafia); font-size: 1.75rem; color: var(--verde-mar);
  display: block; line-height: 1;
}
.dia-momento::before {   /* o pino na régua */
  content: ''; position: absolute; top: -2px; left: 1.2rem; width: 2px; height: 16px;
  background: var(--ambar-forte);
}
.dia-momento b { display: block; margin: .55rem 0 .25rem; font-size: .95rem; font-weight: 600; }
.dia-momento small { color: var(--tinta-suave); font-size: .86rem; line-height: 1.5; }

/* ---------- A CASA (texto + retrato) ------------------------------------ */

.casa { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.casa-texto p { color: var(--tinta-suave); }
.casa-numeros { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.casa-numeros li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; align-items: baseline; }
.casa-numeros b {
  font-family: var(--caligrafia); font-size: 1.9rem; font-weight: 400; color: var(--ambar-forte);
  line-height: 1;
}
.casa-numeros span { color: var(--tinta-suave); font-size: .95rem; }
.casa-numeros strong { display: block; color: var(--tinta); font-size: .95rem; }

.casa-figura { margin: 0; }
.casa-figura img { border-radius: 2px; box-shadow: var(--sombra-alta); }
.casa-figura figcaption { display: none; }

/* ---------- OPINIÕES -----------------------------------------------------
   Duas notas e três vozes. As notas levam a fonte, não o número solto. */

.notas { display: flex; gap: 3.2rem; flex-wrap: wrap; margin: .5rem 0 2.6rem; }
.nota { display: flex; align-items: baseline; gap: .7rem; }
.nota b {
  font-family: var(--caligrafia); font-size: 3rem; font-weight: 400; color: var(--ambar);
  line-height: 1;
}
.nota span { color: rgba(255, 253, 247, .72); font-size: .84rem; line-height: 1.45; display: block; max-width: 22ch; }
.nota a { color: var(--marfim); text-decoration-color: rgba(247, 178, 59, .7); text-underline-offset: 3px; }

.vozes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.voz {
  background: rgba(255, 253, 247, .055); border: 1px solid rgba(255, 253, 247, .16);
  border-radius: 3px; padding: 1.5rem 1.4rem 1.3rem; position: relative;
}
.voz::before {
  content: '“'; position: absolute; top: .1rem; left: 1rem;
  font-family: var(--caligrafia); font-size: 3.4rem; color: var(--ambar); opacity: .8; line-height: 1;
}
.voz p { color: rgba(255, 253, 247, .94); font-size: .96rem; margin: 1.1rem 0 .8rem; }
.voz cite { font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); font-weight: 600; }

/* ---------- VISITA ------------------------------------------------------- */

.visita { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: start; }
.visita-dados { list-style: none; margin: 0; padding: 0; }
.visita-dados li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(31, 35, 40, .12);
  align-items: baseline;
}
.visita-dados dt, .visita-dados .rotulo {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--verde-mar);
}
.visita-dados .valor { font-size: 1rem; color: var(--tinta); }
.visita-dados .valor a { color: var(--tinta); text-decoration-color: var(--ambar-forte); text-underline-offset: 3px; }
.visita-dados .nota-pe { display: block; font-size: .86rem; color: var(--tinta-suave); margin-top: .2rem; }

.visita-accoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }

.mapa { margin: 0; border: 1px solid rgba(31, 35, 40, .14); border-radius: 3px; overflow: hidden; box-shadow: var(--sombra); background: var(--areia); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; }
.mapa figcaption { display: none; }

/* ---------- PERGUNTAS ---------------------------------------------------- */

.perguntas { max-width: 780px; margin: 0 auto; }
.pergunta {
  border-bottom: 1px solid rgba(31, 35, 40, .14);
}
.pergunta summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.6rem 1.15rem 0;
  font-weight: 600; font-size: 1.02rem; position: relative; color: var(--tinta);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ''; position: absolute; right: .45rem; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-right: 2px solid var(--ambar-forte); border-bottom: 2px solid var(--ambar-forte);
  transform: rotate(45deg); transition: transform .2s ease;
}
.pergunta[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pergunta p { color: var(--tinta-suave); padding-right: 2rem; margin: 0 0 1.15rem; }

/* ---------- RODAPÉ ------------------------------------------------------- */

.rodape {
  background: var(--azul); color: rgba(255, 253, 247, .8);
  padding: 3.2rem 1.25rem 1.6rem; border-top: 3px solid var(--ambar);
}
.rodape-caixa { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.4rem; }
.rodape-marca { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.rodape-marca .marca-emblema { width: 66px; height: 66px; background: rgba(255, 253, 247, .06); border-color: var(--ambar); }
.rodape-marca .marca-emblema svg { width: 40px; height: 40px; }
.rodape-marca .marca-nome { color: var(--marfim); font-size: 1.75rem; }
.rodape-marca .marca-sub { color: var(--ambar); }
.rodape p { font-size: .9rem; margin: 0 0 .7rem; }
.rodape h3 {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ambar); font-weight: 600; margin: 0 0 .9rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .5rem; font-size: .9rem; }
.rodape a { color: rgba(255, 253, 247, .9); text-decoration: none; }
.rodape a:hover { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }
.rodape-base {
  max-width: 1180px; margin: 2.4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 253, 247, .16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255, 253, 247, .62);
}
.rodape-base a { color: rgba(255, 253, 247, .82); }
.rodape-base .munditopia { letter-spacing: .02em; }

/* ---------- RESPONSIVO --------------------------------------------------- */

@media (max-width: 1000px) {
  .abertura-caixa { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 2.6rem; }
  .abertura-selo { max-width: 560px; }
  .casa, .visita { grid-template-columns: 1fr; gap: 2.2rem; }
  .vozes { grid-template-columns: 1fr; }
  .rodape-caixa { grid-template-columns: 1fr 1fr; }
  .menu { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .seccao { padding: 3rem 1.1rem; }
  .abertura-caixa { padding: 2rem 1.1rem 2.6rem; }
  .abertura h1 { font-size: clamp(2.15rem, 9vw, 2.9rem); }
  .marca-emblema { width: 46px; height: 46px; }
  .marca-emblema svg { width: 27px; height: 27px; }
  .marca-nome { font-size: 1.32rem; }
  .marca-sub { font-size: .5rem; letter-spacing: .26em; }
  .cabeca-acoes .btn-mesa { padding: .55rem .8rem; font-size: .7rem; }
  .cabeca-acoes .btn-mesa span { display: none; }

  .mesa { grid-template-columns: 1fr; }
  .mesa .grande { grid-row: auto; }
  .mesa .grande img, .mesa .pequena img { aspect-ratio: 16 / 11; }

  .pratos { columns: 1; padding: .25rem 1.1rem 1rem; }
  .cartao-ementa-topo { flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem 1.1rem; }

  .dia { grid-template-columns: 1fr 1fr; }
  .dia-momento:nth-child(3) { border-left: 0; }
  .dia-momento:nth-child(n+3) { border-top: 1px solid rgba(31, 35, 40, .14); }

  .mosaico { grid-template-columns: 1.35fr 1fr; gap: .5rem; }
  .mosaico .fachada img { aspect-ratio: 1 / 1; }
  .abertura-prova { gap: 1rem; }
  .distico { width: 92px; height: 92px; right: 10px; bottom: 10px; }
  .distico b { font-size: 1.25rem; }
  .distico span { font-size: .46rem; }

  .visita-dados li { grid-template-columns: 1fr; gap: .2rem; }
  .mapa iframe { height: 260px; }
  .rodape-caixa { grid-template-columns: 1fr; gap: 1.8rem; }
  .notas { gap: 1.6rem; }
  .nota b { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- IMPRESSÃO ---------------------------------------------------- */

@media print {
  .cabeca, .rodape, .distico, .accoes { display: none; }
  body { background: #fff; color: #000; padding: 0; }
}