/* ==========================================================================
   NIGHT DO CAMARÃO
   Editorial gastronômico noturno. Foto tratada com a luz quente da casa,
   fio de 1px como estrutura, tipografia serifada, textura de filme sobre tudo.

   Tudo nesta folha sai de três escalas: espaço, tipo e proporção de coluna.
   Nenhum valor solto. É isso que faz as seções parecerem a mesma página.
   ========================================================================== */

/* ── 1. Sistema ────────────────────────────────────────────────────────── */
:root {
  /* cor ---------------------------------------------------------------- */
  --ink:        #0A0908;
  --ink-2:      #100E0C;
  --cream:      #F5EBE0;
  --cream-2:    rgba(245, 235, 224, .66);
  --cream-3:    rgba(245, 235, 224, .52);
  --orange:     #E65100;
  --orange-lit: #FF7A2E;
  --gold:       #D4AF37;

  --rule:       rgba(245, 235, 224, .16);
  --rule-soft:  rgba(245, 235, 224, .08);

  /* espaço: razão ~1.45, fluido entre 360px e 1440px de viewport -------- */
  --s1: clamp(4px,   .28vw + 3px,   6px);
  --s2: clamp(8px,   .55vw + 6px,   12px);
  --s3: clamp(12px,  .83vw + 9px,   18px);
  --s4: clamp(18px, 1.20vw + 13px,  26px);
  --s5: clamp(26px, 1.85vw + 19px,  38px);
  --s6: clamp(38px, 2.60vw + 28px,  56px);
  --s7: clamp(54px, 3.70vw + 40px,  80px);
  --s8: clamp(72px, 5.20vw + 53px,  116px);
  --s9: clamp(88px, 7.40vw + 61px,  152px);

  /* tipo: um degrau por papel, nunca dois papéis no mesmo degrau -------- */
  --t-micro: .73rem;                              /* rótulo versalete      */
  --t-small: clamp(.86rem, .14vw + .82rem, .92rem);/* nav, nota, rodapé    */
  --t-body:  clamp(.95rem, .21vw + .90rem, 1.02rem);
  --t-lead:  clamp(1.04rem, .35vw + .96rem, 1.16rem);
  --t-dish:  clamp(1.08rem, .30vw + 1.01rem, 1.2rem);
  --t-h3:    clamp(1.16rem, .55vw + 1.03rem, 1.42rem);
  --t-h2:    clamp(1.85rem, 2.45vw + 1.28rem, 3.05rem);
  --t-h1:    clamp(2.2rem,  3.10vw + 1.48rem, 3.7rem);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* medida: uma largura de coluna de texto, usada em toda a página ------ */
  --measure: 46ch;
  --measure-tight: 34ch;

  /* estrutura ----------------------------------------------------------- */
  --gutter: clamp(20px, 4.6vw + 4px, 56px);
  --shell: 1240px;
  --nav-h: 78px;
  --nav-h-min: 62px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.25, .8, .3, 1);

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
}

/* Duas quebras, e só duas: 600 (do celular para o tablet) e 900 (as colunas
   entram e o menu de celular sai). Acima disso o container trava em --shell e
   o resto é ar. Antes eram sete, e seções irmãs mudavam de forma em larguras
   diferentes, o que dava o salto ao redimensionar. */

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-min) + var(--s4));
  scrollbar-color: #2C2723 var(--ink);
  scrollbar-width: thin;
  caret-color: var(--orange-lit);
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textura fosca sobre a página inteira */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .07;
  mix-blend-mode: overlay;
}

img, iframe { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--orange); color: var(--ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2C2723; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

:focus-visible { outline: 2px solid var(--orange-lit); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--orange); color: var(--ink);
  font-weight: 600; font-size: var(--t-small);
  transform: translateY(-200%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

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

/* Ritmo vertical: toda seção respira igual. Um valor, um lugar. */
.casa, .menu, .pedir, .comemorar, .visit { padding-block: var(--s9); }

/* Transição entre seções: fio só onde dois blocos de texto se encontram.
   Depois de foto sangrada não entra fio, porque a própria foto já separa. */
.menu, .pedir, .visit { border-top: 1px solid var(--rule-soft); }

/* ── 3. Fotos: um tratamento só, para a casa inteira ───────────────────── */
.ph { position: relative; overflow: hidden; background: var(--ink-2); isolation: isolate; }
.ph > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.07) brightness(.86);
}
/* luz quente por cima de toda imagem: é o que junta fotos de origens
   diferentes numa casa só */
.ph::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(205deg, rgba(230, 81, 0, .34), rgba(230, 81, 0, 0) 54%, rgba(10, 9, 8, .46));
  mix-blend-mode: overlay;
}
/* vinheta: fecha a borda e puxa o olho para o centro */
.ph::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(46px, 9vw, 140px) rgba(10, 9, 8, .66);
}
.ph[data-photo="empty"] {
  background:
    radial-gradient(72% 70% at 38% 28%, rgba(230, 81, 0, .24), transparent 70%),
    var(--ink-2);
}

/* Foto de seção não termina em corte: a borda se dissolve no fundo da página
   e os cantos somem. A máscara vai no quadro inteiro, e não só na imagem,
   senão o véu quente continuaria desenhando o retângulo. */
.casa-photo,
.aside-photo,
.course-photo,
.comemorar-foto {
  -webkit-mask-image: radial-gradient(70% 76% at 50% 47%, #000 52%, rgba(0, 0, 0, .6) 78%, transparent 104%);
          mask-image: radial-gradient(70% 76% at 50% 47%, #000 52%, rgba(0, 0, 0, .6) 78%, transparent 104%);
}
/* a máscara já faz o papel da vinheta; as duas juntas embaçam */
.casa-photo::before,
.aside-photo::before,
.course-photo::before,
.comemorar-foto::before { box-shadow: none; }

/* ── 4. Tipografia ─────────────────────────────────────────────────────── */
h1, h2, h3, .display, .say, .mark span, .foot-mark span, .dish, .street, .band-line {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.018em;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -.028em;
  padding-bottom: .06em;
  max-width: 12.5em;
  text-wrap: balance;
}
h1 i { font-style: italic; color: var(--gold); }

.display {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.024em;
  max-width: 14em;
  text-wrap: balance;
}
.say {
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 17em;
  text-wrap: pretty;
}

/* rótulo versalete: um único tratamento, usado no rodapé e na seção Visite */
.label {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cream-3);
}

/* ── 5. Botões ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .18s var(--ease);
}
.btn i { font-size: 1.3em; line-height: 0; }

/* tinta escura sobre o laranja: 5.2:1. O creme dava 3.2:1 e reprovava em AA. */
.btn-solid { background: var(--orange); color: var(--ink); }
.btn-solid:hover { background: #FF6413; }
.btn-solid:active { transform: translateY(1px); }

/* subordinado por construção: sem preenchimento, texto um degrau abaixo */
.btn-line {
  border-color: var(--rule);
  color: var(--cream-2);
  background: rgba(10, 9, 8, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-line:hover { border-color: var(--cream-2); color: var(--cream); background: rgba(245, 235, 224, .05); }
.btn-line:active { transform: translateY(1px); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ── 6. Header ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: rgba(10, 9, 8, .26);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.nav-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.mark { display: inline-flex; align-items: center; flex: none; }
.mark img { height: 42px; width: auto; transition: height .35s var(--ease); }
.mark span { display: none; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; }
.mark[data-photo="empty"] span { display: inline; }

.nav-links { display: none; gap: var(--s6); }
.nav-links a {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--cream-2);
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav-links a:hover { color: var(--cream); border-bottom-color: var(--orange); }

.nav-cta { display: none; min-height: 42px; padding-inline: var(--s4); }

/* ── Navegação do celular ──────────────────────────────────────────────── */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-right: calc(var(--s2) * -1);
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 1.5rem;
  cursor: pointer;
}
.nav-toggle i { line-height: 0; }
.nav-toggle .ph-x { display: none; }
.nav-toggle[aria-expanded="true"] .ph-list { display: none; }
.nav-toggle[aria-expanded="true"] .ph-x { display: block; }

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 79;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s7);
  padding: calc(var(--nav-h) + var(--s7)) var(--gutter) var(--s7);
  background: var(--ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility é propriedade discreta: com duração, o navegador troca na
     metade do tempo, e até lá o painel não recebe foco. Ao abrir ela vira
     na hora; ao fechar espera o fade terminar. */
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s .32s;
}
.nav-panel[data-aberto] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s 0s;
}

.nav-panel-links a {
  display: block;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--cream);
}
.nav-panel-links li:first-child a { border-top: 1px solid var(--rule-soft); }
.nav-panel-acoes { display: grid; gap: var(--s3); }
.nav-panel-acoes .btn { width: 100%; }

@media (min-width: 900px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .nav-toggle, .nav-panel { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: rgba(10, 9, 8, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* O header encolhe e ganha fundo conforme a página desce. Conduzido pelo
   próprio scroll do navegador, sem listener. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav { animation: nav-pousa linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
    .mark img { animation: mark-pousa linear both; animation-timeline: scroll(root block); animation-range: 0 180px; }
  }
}
@keyframes nav-pousa {
  from { height: var(--nav-h);     background-color: rgba(10, 9, 8, .26); border-bottom-color: transparent; }
  to   { height: var(--nav-h-min); background-color: rgba(10, 9, 8, .88); border-bottom-color: var(--rule-soft); }
}
@keyframes mark-pousa { from { height: 42px; } to { height: 34px; } }

body[data-menu-aberto] { overflow: hidden; }

/* ── 7. Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + var(--s7)) var(--s7);
  isolation: isolate;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media > img { filter: saturate(1.02) contrast(1.05) brightness(.98); }
/* a foto do topo já é quente; o véu laranja das outras aqui viraria cast */
.hero-media::after { opacity: .45; }

/* máscara: a comida respira em cima, o texto ganha chão embaixo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(10, 9, 8, .58) 0%,
      rgba(10, 9, 8, .10) 22%,
      rgba(10, 9, 8, .36) 46%,
      rgba(10, 9, 8, .76) 64%,
      rgba(10, 9, 8, .95) 84%,
      var(--ink) 100%),
    linear-gradient(to right, rgba(10, 9, 8, .62) 0%, rgba(10, 9, 8, .04) 56%, rgba(10, 9, 8, .34) 100%);
}
.hero[data-photo="empty"]::before {
  background:
    radial-gradient(56% 44% at 14% 74%, rgba(230, 81, 0, .42), transparent 64%),
    radial-gradient(64% 50% at 78% 12%, rgba(230, 81, 0, .20), transparent 66%),
    linear-gradient(to bottom, #1C150F 0%, #150F0B 34%, #0E0B09 72%, var(--ink) 100%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero h1 { text-shadow: 0 2px 34px rgba(10, 9, 8, .6); }
.hero .actions { margin-top: var(--s6); }

/* Aberto ou fechado agora, na hora de Fortaleza. Não é enfeite: é a única
   pergunta de quem chega do Instagram às 22h. */
.agora {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-left: var(--s3);
  border-left: 1px solid var(--rule);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .012em;
  color: var(--cream-2);
  text-shadow: 0 1px 14px rgba(10, 9, 8, .9);
}
/* brasa quadrada, do mesmo mundo dos fios de 1px */
.agora-luz { width: 6px; height: 6px; flex: none; background: var(--cream-3); }
.agora[data-estado="aberto"] .agora-luz,
.agora[data-estado="ultimos"] .agora-luz {
  background: var(--orange-lit);
  box-shadow: 0 0 9px 1px rgba(255, 122, 46, .55);
}
.agora[data-estado="aberto"] { color: var(--cream); }

@media (prefers-reduced-motion: no-preference) {
  .agora[data-estado="aberto"] .agora-luz { animation: brasa 2.8s ease-in-out infinite; }
}
@keyframes brasa { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }

/* ── 8. A casa ─────────────────────────────────────────────────────────── */
.casa-grid { display: grid; gap: var(--s6); }
.casa-photo { aspect-ratio: 4 / 5; }
.casa-text { display: flex; align-items: center; }

.ledger { border-top: 1px solid var(--rule); }
.ledger li { padding-block: var(--s5); border-bottom: 1px solid var(--rule-soft); }
.ledger h3 { font-size: var(--t-h3); line-height: 1.22; margin-bottom: var(--s2); }
.ledger p { color: var(--cream-2); font-size: var(--t-body); max-width: var(--measure-tight); }

@media (min-width: 900px) {
  .casa-grid {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--s8);
    align-items: stretch;
  }
  .casa-photo { aspect-ratio: auto; min-height: 30rem; }
  .ledger {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--s7);
    border-bottom: 1px solid var(--rule-soft);
  }
  .ledger li { border-bottom: 0; padding: var(--s6) var(--s6) var(--s6) 0; }
  .ledger li + li { border-left: 1px solid var(--rule-soft); padding-left: var(--s6); }
  .ledger p { max-width: none; }
}

/* ── 9. Cardápio ───────────────────────────────────────────────────────── */
.menu {
  background:
    radial-gradient(44% 32% at 88% 6%, rgba(230, 81, 0, .12), transparent 70%),
    var(--ink);
}
.menu-grid { display: grid; gap: var(--s7); }

.aside-photo { aspect-ratio: 3 / 2; margin-bottom: var(--s5); }
.menu-aside p {
  margin-top: var(--s4);
  color: var(--cream-2);
  font-size: var(--t-body);
  max-width: var(--measure-tight);
}
.aside-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.course-photo { aspect-ratio: 14 / 9; margin-block: var(--s7); }

/* Cabeçalho de grupo: o único lugar com ouro, e o único itálico serifado.
   É o que separa "categoria" de "prato" sem precisar de caixa. */
.course h3 {
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--gold);
  padding-bottom: var(--s3);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
}
.course + .course { margin-top: var(--s7); }

.course li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s3);
  padding-block: var(--s3);
}
.course li + li { border-top: 1px solid var(--rule-soft); }
.course li::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s4) * -1);
  background: linear-gradient(90deg, rgba(230, 81, 0, .12), rgba(230, 81, 0, 0) 72%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.course li:hover::before { opacity: 1; }

/* hierarquia da lista: o nome do prato tem presença, a descrição recua */
.dish {
  position: relative;
  font-size: var(--t-dish);
  line-height: 1.3;
  transition: color .3s var(--ease);
}
.lead {
  position: relative;
  flex: 1 1 var(--s5);
  min-width: var(--s5);
  align-self: center;
  border-bottom: 1px dotted var(--rule-soft);
  transition: border-color .3s var(--ease);
}
.note {
  position: relative;
  flex: 1 1 100%;
  margin-top: var(--s1);
  font-size: var(--t-small);
  color: var(--cream-3);
  transition: color .3s var(--ease);
}
.course li:hover .dish { color: var(--orange-lit); }
.course li:hover .lead { border-bottom-color: var(--orange); }
.course li:hover .note { color: var(--cream-2); }

.menu-order { margin-top: var(--s7); }

@media (min-width: 600px) {
  .note { flex: 0 1 auto; margin-top: 0; text-align: right; max-width: 22ch; }
}
@media (min-width: 900px) {
  .menu-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s8); align-items: start; }
  .menu-aside { position: sticky; top: calc(var(--nav-h-min) + var(--s5)); }
}

/* ── 10. Como pedir ────────────────────────────────────────────────────── */
/* Linha larga em três campos: a única família de layout da página em que a
   linha inteira é o item. */
.canais { margin-top: var(--s7); border-top: 1px solid var(--rule); }
.canais li {
  position: relative;
  display: grid;
  gap: var(--s2) 0;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule-soft);
}
.canais li::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s4) * -1);
  background: linear-gradient(90deg, rgba(230, 81, 0, .1), rgba(230, 81, 0, 0) 70%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.canais li:hover::before { opacity: 1; }
.canais h3 { position: relative; font-size: var(--t-h3); line-height: 1.2; }
.canais p {
  position: relative;
  color: var(--cream-2);
  font-size: var(--t-body);
  max-width: var(--measure);
}
.canal-acao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--orange-lit);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 122, 46, .32);
  transition: border-color .3s var(--ease);
}
.canal-acao:hover { border-bottom-color: var(--orange-lit); }
.canal-acao i { font-size: 1.05em; line-height: 0; }

@media (min-width: 900px) {
  .canais li {
    grid-template-columns: 4fr 5fr 3fr;
    align-items: baseline;
    column-gap: var(--s6);
  }
  .canal-acao { justify-self: end; }
}

/* ── 11. Comemorações ──────────────────────────────────────────────────── */
.comemorar-grid { display: grid; gap: var(--s6); align-items: center; }
.comemorar-texto p {
  margin-top: var(--s4);
  color: var(--cream-2);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: var(--measure-tight);
}
.comemorar-texto .btn { margin-top: var(--s6); }
.comemorar-foto { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .comemorar-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s8); }
  .comemorar-foto { aspect-ratio: auto; min-height: 27rem; height: 100%; }
}

/* ── 12. Faixa ─────────────────────────────────────────────────────────── */
.band {
  position: relative;
  min-height: clamp(340px, 58vh, 540px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--s6);
}
.band > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.band .shell { position: relative; z-index: 3; width: 100%; }
/* A faixa sangra na largura toda e o texto mora dentro dela, então não dá
   para mascarar: o véu trabalha pelos dois lados, entrando em cheio no topo
   e no pé, para a foto nascer e morrer no fundo da página. */
.band::before {
  box-shadow: none;
  background: linear-gradient(to bottom,
    var(--ink) 0%,
    rgba(10, 9, 8, .58) 11%,
    rgba(10, 9, 8, .20) 40%,
    rgba(10, 9, 8, .70) 72%,
    rgba(10, 9, 8, .97) 93%,
    var(--ink) 100%);
}
.band-line {
  max-width: 20ch;
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -.022em;
  text-shadow: 0 2px 24px rgba(10, 9, 8, .85);
}

/* ── 13. Visite ────────────────────────────────────────────────────────── */
.visit-grid { display: grid; gap: var(--s7); align-items: stretch; }

.address { margin-top: var(--s6); }
.street { font-size: var(--t-h3); line-height: 1.25; }
.district { margin-top: var(--s1); color: var(--cream-2); font-size: var(--t-body); }

.hours { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.hours dt { display: flex; align-items: center; gap: var(--s2); }
.hours dt i { font-size: 1.1rem; color: var(--orange); line-height: 0; }
.hours dd { margin: var(--s2) 0 var(--s5); font-size: var(--t-body); }
.hours dd:last-child { margin-bottom: 0; }
.hours dd a { border-bottom: 1px solid var(--rule); transition: border-color .25s var(--ease); }
.hours dd a:hover { border-bottom-color: var(--orange); }

.visit .actions { margin-top: var(--s6); }

/* O mapa é um campo da composição, não um iframe largado: mesma moldura de
   1px das outras divisórias, mesma dessaturação das fotos. */
.map {
  position: relative;
  display: flex;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  min-height: 18rem;
}
.map iframe {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  min-height: 18rem;
  border: 0;
  filter: grayscale(.42) brightness(.76) contrast(1.06);
  transition: filter .4s var(--ease);
}
.map:hover iframe { filter: grayscale(.2) brightness(.9) contrast(1.04); }
.map-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--s2);
  color: var(--cream-3); font-size: var(--t-small);
}
.map-empty i { font-size: 1.8rem; color: var(--orange); }

@media (min-width: 900px) {
  .visit-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s8); }
  .map, .map iframe { min-height: 100%; }
}

/* ── 14. Rodapé ────────────────────────────────────────────────────────── */
/* Índice de fechamento, não sobra de página. */
.foot {
  padding-block: var(--s8) var(--s5);
  border-top: 1px solid var(--rule);
}
.foot-grid { display: grid; gap: var(--s6); }

.foot-mark { display: inline-block; }
.foot-mark img { height: clamp(52px, 5vw + 34px, 64px); width: auto; }
.foot-mark span {
  display: none;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cream-3);
}
.foot-mark[data-photo="empty"] span { display: inline; }

.foot-id p {
  margin-top: var(--s4);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--cream-2);
}
.foot-col h2 { margin-bottom: var(--s4); }
.foot-col li + li { margin-top: var(--s2); }
.foot-col a {
  font-size: var(--t-small);
  color: var(--cream-2);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.foot-col a:hover { color: var(--cream); border-bottom-color: var(--orange); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-micro);
  letter-spacing: .01em;
  color: var(--cream-3);
}
.foot-base a {
  color: var(--cream-2);
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease);
}
.foot-base a:hover { border-bottom-color: var(--orange); }

@media (min-width: 600px) {
  .foot-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
  .foot-id { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 5fr 3fr 3fr 3fr; column-gap: var(--s6); }
  .foot-id { grid-column: auto; }
}

/* ── 15. Barra fixa de conversão (celular) ─────────────────────────────── */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-soft);
  background: rgba(10, 9, 8, .78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.dock .btn { flex: 1; }
.dock-alt {
  display: grid;
  place-items: center;
  width: 50px;
  flex: none;
  border: 1px solid var(--rule);
  color: var(--cream-2);
  font-size: 1.3rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.dock-alt:hover { color: var(--cream); border-color: var(--cream-2); }

/* A barra sobe só depois que o hero sai de cena, para não duplicar o botão
   que já está à vista. Onde não há suporte, ela fica sempre visível. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .dock {
      animation: dock-up linear both;
      animation-timeline: scroll(root block);
      animation-range: 52vh 76vh;
    }
  }
}
@keyframes dock-up { from { transform: translateY(112%); } to { transform: none; } }

@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) {
  body { padding-bottom: 80px; }
  .hero { padding-bottom: calc(var(--s7) + 44px); }
  .ledger p { max-width: none; }

  /* Alvo de toque: no dedo, link de texto precisa de 44px de altura. No
     desktop eles continuam compactos, porque lá o ponteiro é preciso. */
  .mark { min-height: 44px; }
  .foot-col a,
  .foot-base a,
  .hours dd a,
  .canal-acao {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot-col li + li { margin-top: 0; }
  .hours dd { margin-block: 0 var(--s3); }
}
@media (prefers-reduced-transparency: reduce) {
  .dock { background: rgba(10, 9, 8, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── 16. Abertura: a casa acendendo ────────────────────────────────────── */
/* Nada aqui bloqueia a página: o conteúdo está montado e clicável desde o
   primeiro quadro, e a sequência só resolve a cena por cima dele. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media > img { animation: ignite 1.5s var(--ease) both; }
  body::after       { animation: grain-in 1.8s linear .4s both; }

  .hero h1        { animation: type-set 1.15s var(--ease) .28s both; }
  .hero .actions  { animation: lift .9s var(--ease) .5s both; }
  .hero .agora    { animation: lift .9s var(--ease) .66s both; }
  .nav-inner      { animation: frame-in .8s var(--ease) .72s both; }
}

@keyframes lift     { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: none; } }
@keyframes frame-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes grain-in { from { opacity: 0; }                               to { opacity: .07; } }
@keyframes ignite {
  from { transform: scale(1.08); filter: saturate(.22) contrast(1.05) brightness(.18) blur(11px); }
  to   { transform: scale(1);    filter: saturate(1.02) contrast(1.05) brightness(.98) blur(0); }
}
/* o título não aparece: ele é impresso, de cima para baixo */
@keyframes type-set {
  from { clip-path: inset(-20% -20% 104% -20%); }
  to   { clip-path: inset(-20% -20% -20% -20%); }
}

/* Tudo que reage à rolagem é conduzido pelo navegador, sem listener e sem JS.
   Onde não há suporte, o conteúdo simplesmente já aparece visível. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    /* a foto sobe como cortina e a imagem assenta do zoom */
    .ph-reveal       { animation: curtain linear both; animation-timeline: view(); animation-range: entry 2% cover 30%; }
    .ph-reveal > img { animation: settle linear both;  animation-timeline: view(); animation-range: entry 2% cover 52%; }
    .band > img      { animation: band-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes curtain  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle   { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes band-pan { from { transform: scale(1.2) translateY(-3.5%); } to { transform: scale(1.2) translateY(3.5%); } }

/* Vai na moldura, e não na imagem: a imagem já tem a animação de abertura,
   e duas animações disputando o mesmo transform se anulam. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media {
      animation: hero-pan linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}
@keyframes hero-pan { from { transform: scale(1.04); } to { transform: scale(1.18) translateY(3.5vh); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .nav-panel { transition: none; }
}