/* ==========================================================================
   SEÇÕES — layout específico de cada bloco da página.
   Mobile-first: o padrão é 1 coluna, as media queries só somam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO

   Celular: cartaz sangrado. A arte ocupa a tela inteira — sem moldura, sem
   corte reto — com o kicker e a logo por cima.
   Desktop: a arte vira papel de parede; a logo fica na coluna da esquerda e o
   card do convite — o mesmo da seção Noite de Halloween — na direita.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--c-night-3);
  isolation: isolate;
  overflow: clip;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "cena";
}

/* Os dois invólucros se dissolvem: quem posiciona é a grade da seção. */
.hero__inner,
.hero__texto { display: contents; }

/* --- a cena: cartaz retrato, largura cheia, proporcao natural --- */
.hero__cena,
.hero__cena img { display: block; width: 100%; height: auto; }

.hero__cena {
  grid-area: cena;
  position: relative;
  margin: 0;
}

/* Emenda a base da arte com o fundo da secao. Sem isso a foto termina num
   corte reto e a mudanca de cor salta aos olhos. */
.hero__cena::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 15%;
  background: linear-gradient(to bottom, rgba(32, 21, 75, 0), var(--c-night-3) 94%);
  pointer-events: none;
}

/* Kicker e logo ficam POR CIMA da arte, no topo, como no cartaz original */
.kicker--hero {
  position: absolute;
  inset-block-start: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  inset-inline: 0;
  z-index: 3;
  padding-inline: var(--gutter);
  font-family: var(--f-kicker);
  font-size: clamp(0.7rem, 0.6rem + 0.5vw, 0.95rem);
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-align: center;
  color: var(--c-ink);
  text-shadow: 0 1px 12px rgba(12, 6, 43, .9);
}

.hero__title {
  position: absolute;
  inset-block-start: calc(var(--sp-6) + env(safe-area-inset-top, 0px));
  inset-inline: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  margin: 0;
  padding-inline: var(--gutter);
  line-height: 0;
}

.hero__logo img {
  width: min(58vw, 16rem);
  height: auto;
  filter: drop-shadow(0 0.5rem 2rem rgba(12, 6, 43, .85));
}

/* O card de preço não entra no herói do celular, e agora isso é por escolha.
   A regra nasceu no tempo da barra fixa de conversão, que mostrava o valor o
   tempo todo; quando a barra saiu, em 10/09/2026, sobrou a pergunta de o card
   voltar ou não. A Morgana decidiu que **a primeira tela fica sem preço**:
   quem procura o valor o encontra na Noite de Halloween e no motor de
   reservas. Não devolver o card sem ela pedir. */
.hero .convite--hero { display: none; }

/* No celular o vilão já vem dentro da imagem da cena */
.hero__vilao { display: none; }

@media (min-width: 64em) {
  .hero {
    min-height: min(92svh, 48rem);
    padding-block: var(--sp-7) var(--sp-9);
    /* o .container foi dissolvido pelo display:contents, então a margem
       lateral e o limite de largura voltam aqui */
    padding-inline: max(var(--gutter), calc((100% - var(--w-container)) / 2));

    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "convite";
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: var(--sp-6);
  }

  /* Camada 1 — o fundo (castelo, abóboras, casario) preenche a seção
     inteira. `object-position: 100%` encosta a arte pela direita, o que
     empurra o castelo para a metade esquerda, longe do card. */
  .hero__cena {
    position: absolute;
    inset: 0;
    inline-size: auto;
    z-index: var(--z-bg);
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .hero__cena img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
  }

  .hero__cena::after { display: none; }   /* aqui a arte não termina em corte */

  /* Camada 2 — Fome Noturna, ao lado do castelo, com os pés na base da
     seção. Como é uma peça independente, posição e tamanho são estes dois
     valores: `inset-inline-start` e `inline-size`. */
  .hero__vilao {
    display: block;
    position: absolute;
    inset-block: auto 2%;
    inset-inline: 15% auto;
    inline-size: 52%;
    z-index: 2;
    pointer-events: none;
  }

  .hero__vilao img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* o invólucro volta a existir: kicker + logo centralizados no topo */
  .hero__texto {
    display: grid;
    grid-area: texto;
    gap: var(--sp-4);
    justify-items: center;
    position: relative;
    z-index: 2;
  }

  /* kicker e logo voltam ao fluxo */
  .kicker--hero,
  .hero__title {
    position: relative;
    inset: auto;
    z-index: auto;
    padding-inline: 0;
    text-align: center;
  }

  .kicker--hero {
    font-size: clamp(0.7rem, 0.62rem + 0.22vw, 0.78rem);   /* 11px no Wix */
  }

  .hero__title { display: block; }

  .hero__logo img { width: min(24vw, 23rem); }

  /* O card fica encostado na direita, com a MESMA largura que tem na seção
     Noite de Halloween (431px). Além de manter os dois idênticos, é o que
     deixa o castelo inteiro à vista, fora da área do card. */
  .hero .convite--hero {
    display: grid;
    grid-area: convite;
    justify-self: end;
    width: min(100%, 27rem);
  }

  /* Véu discreto: um respiro escuro no topo, atrás da logo, e a costura da
     base com a seção seguinte. O meio fica limpo, com a arte aparecendo. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(12, 6, 43, .5) 0%,
      rgba(12, 6, 43, 0) 24%,
      rgba(12, 6, 43, 0) 92%,
      var(--c-night-3) 100%);
  }
}

/* O card precisa ficar acima do véu. */
.hero .convite--hero { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   2. RENDA-SE

   Faixa centralizada nos dois formatos, com o olhar em vídeo ao fundo. É ela
   que fecha o bloco de abertura, então carrega a costura rasgada.
   -------------------------------------------------------------------------- */
.renda {
  position: relative;
  padding-block: var(--sp-6) var(--sp-9);
  background-color: var(--c-night-3);
  isolation: isolate;
  overflow: clip;

  display: grid;
  grid-template-columns: 1fr;
  /* A linha do meio é vazia de propósito: ela reserva o espaço em que os
     olhos aparecem, para o texto entrar logo abaixo deles em vez de por
     cima. O vídeo continua sendo fundo do bloco inteiro. */
  grid-template-areas:
    "lead"
    "olhos"
    "copy";
  grid-template-rows: auto clamp(9rem, 26vw, 14rem) auto;
  row-gap: var(--sp-5);
}

/* --- o olhar: fundo da faixa inteira, com zoom ---
   Fora do fluxo de propósito: como item de grade ele levava a proporção
   16:9 para o cálculo das linhas e inflava a seção nas telas largas.
   Absoluto com `inset: 0`, ele preenche exatamente a mesma área sem
   participar do dimensionamento. */
.renda__olhar {
  position: absolute;
  grid-column: 1;
  grid-row: 1 / -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  scale: 1.25;                 /* mais perto do olho, como pedido */
  opacity: .62;
  z-index: var(--z-deco);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  pointer-events: none;
}

.renda__lead {
  grid-area: lead;
  justify-self: center;
  padding-inline: var(--gutter);
  font-size: var(--fs-titulo);
  letter-spacing: var(--ls-wide);
  text-align: center;
  color: var(--c-green);
  text-shadow: 0 0 2.5rem rgba(77, 221, 55, .35), 0 0.15em 0.8em rgba(12, 6, 43, .95);
}

.renda__copy {
  grid-area: copy;
  display: grid;
  gap: var(--sp-5);
  max-width: 58ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: var(--fs-corpo);
  letter-spacing: var(--ls-corpo);
  line-height: var(--lh-corpo);
  text-align: center;
  color: var(--c-ink);
  text-shadow: 0 2px 14px rgba(12, 6, 43, .95);
}

/* Texto acima do olhar */
.renda__lead,
.renda__copy { position: relative; z-index: 2; }

@media (min-width: 64em) {
  .renda { padding-block: var(--sp-8) var(--sp-10); }
  .renda__copy {
    max-width: 62ch;
    gap: var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   3. FOME NOTURNA — a história
   -------------------------------------------------------------------------- */
.story {
  --sep-forma: url('../svg/separador-teia.svg');
  --sep-cor: var(--c-night);
  background-color: var(--c-night-3);
  overflow: clip;
}

/* Textura de grades: repete na horizontal para as barras manterem a proporção.
   A máscara dissolve o topo e a base — sem ela a textura entrava num corte
   reto e marcava uma linha na emenda com a seção anterior. */
.story__texture {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
  /* 145% em vez de 100%: a largura do arquivo é amarrada à altura desenhada
     (proporção 0,486), então ampliar a escala é o que engrossa as listras.
     O excesso vertical fica de fora — o padrão é uniforme na altura. */
  background: url('../img/textura-grades.webp') center top / auto 145% repeat-x;
  opacity: .09;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}

.story__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-7);
  justify-items: center;
  align-items: center;
}

.story__retrato { margin: 0; width: min(76vw, 22rem); }
.story__retrato img { width: 100%; height: auto; }

.story__copy {
  display: grid;
  gap: var(--sp-4);
  max-width: 56ch;
  text-align: center;
  font-family: var(--f-hand);
  /* É deste texto que sai o token do corpo: mexer aqui move a página toda. */
  font-size: var(--fs-corpo);
  letter-spacing: var(--ls-corpo);
  line-height: var(--lh-corpo);
  color: var(--c-ink);
}

.story__titulo {
  /* 33px no Wix — a pincelada e larga, nao alta. É deste tamanho que sai o
     token, então mexer aqui move o padrão do site inteiro. */
  font-size: var(--fs-titulo);
  letter-spacing: var(--ls-wide);
  color: var(--c-green);
  text-shadow: 0 0 2rem rgba(77, 221, 55, .3);
}

@media (min-width: 64em) {
  .story__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--sp-9);
    justify-items: stretch;
  }
  .story__retrato { width: min(100%, 26rem); justify-self: center; }
  .story__copy { text-align: start; }   /* em duas colunas o alinhamento volta à esquerda */

  /* No desktop a seção é mais baixa que no celular, e como a largura das
     listras deriva da altura desenhada, elas saíam mais finas aqui. 190%
     iguala e passa um pouco. */
  .story__texture { background-size: auto 190%; }
}

/* --------------------------------------------------------------------------
   4. A NOITE SE APROXIMA — contagem regressiva
   -------------------------------------------------------------------------- */
.contagem {
  background-color: var(--c-night);
  text-align: center;
  /* O respiro padrão de seção (até 120px) somava 184px com o topo das
     lápides e abria um vão morto entre o contador e as pedras. As duas
     coisas se leem como um par — o convite e o que espera por você —,
     então ficam perto. O respiro de cima continua o normal. */
  padding-block-end: clamp(1.5rem, 0.5rem + 2vw, 2.5rem);
}

.contagem__titulo {
  font-size: var(--fs-titulo);
  letter-spacing: 0.2em;
  color: var(--c-green);
  text-shadow: 0 0 2.5rem rgba(77, 221, 55, .35);
  margin-block-end: var(--sp-6);
}

/* Os três pontos herdam o espaçamento largo do título e ficariam espalhados.
   Aqui eles voltam a se ler como reticências. */
.contagem__titulo .reticencias { letter-spacing: 0.02em; }

.contagem__fim {
  font-size: var(--fs-titulo);
  color: var(--c-green);
  margin-block-end: var(--sp-6);
}

/* O tamanho agora vem do token, igual aos outros títulos em brush. O que
   sobra aqui é o espaçamento entre letras: com os 0,2em do desenho o título
   pede 484px numa tela de 333px e quebra em duas linhas — e a Lethal Craze
   não suporta quebra, os traços de uma linha invadem a outra. */
@media (max-width: 47.99em) {
  .contagem__titulo { letter-spacing: 0.02em; }
}

/* --------------------------------------------------------------------------
   5. A INVASÃO — as lápides
   -------------------------------------------------------------------------- */
/* O chão vem dentro da própria ilustração das lápides: cada peça carrega a
   névoa do seu pé, e no desktop as quatro se encostam formando uma faixa
   contínua de ponta a ponta. Por isso a seção não precisa mais de uma imagem
   de chão por baixo — precisa é escurecer até o preto, para a névoa roxa ter
   sobre o que brilhar. O preto fica na costura entre as duas seções: aqui a
   cor cai até ele, e a `.noite` volta dele para a cor de novo. */
.invasao {
  background-color: var(--c-night);
  background-image: linear-gradient(to bottom,
    var(--c-night) 0%,
    color-mix(in srgb, var(--c-night) 45%, #000) 55%,
    #000 100%);
  /* topo curto: a contagem já termina encostada (ver `.contagem`) */
  padding-block: clamp(1rem, 0.5rem + 1.4vw, 1.75rem) 0;
  overflow: clip;
}

@media (min-width: 64em) {
  /* No desktop as lápides ocupam a largura inteira, como no Wix: o container
     de 1200px deixaria cada pedra estreita demais e desmontaria a cena. */
  .invasao > .container { max-width: 100%; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   6. NOITE DE HALLOWEEN — convite + datas + balão

   Medidas do Wix (referência 1425px): card 431px, informações 506px, 126px
   entre os dois. O balão não ocupa coluna nenhuma — ele flutua por cima, com a
   ponta passando da margem. Foi assim que sobrou área para as informações.
   -------------------------------------------------------------------------- */
/* A outra metade da costura: sai do preto onde a `.invasao` terminou e sobe
   de volta para a cor da seção. Em `rem` para o degradê ter sempre a mesma
   altura, seja a seção curta ou longa. */
.noite {
  background-color: var(--c-night);
  background-image: linear-gradient(to bottom, #000 0, var(--c-night) 14rem);
  background-repeat: no-repeat;
  overflow: clip;
}

.noite .section-title { margin-block-end: var(--sp-8); }

.noite__grid {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

/* O balão é decorativo e respira: sobe e desce devagar, como no Wix
   (7,6 s, curso de 25px — aqui em % da própria altura, para escalar junto). */
.noite__balao {
  position: absolute;
  z-index: var(--z-deco);
  inset-block-start: -1.5rem;
  inset-inline-end: -1rem;
  width: clamp(5.5rem, 22vw, 8rem);
  pointer-events: none;
  --balao-curso: 4.5%;
  animation: balao-flutua 7.6s linear infinite;
}

.noite__balao img { width: 100%; height: auto; }

/* O curso virou variável para poder ser maior no celular, onde o balão é
   pequeno e o movimento de 4,5% quase não se notava (uns 5px). */
@keyframes balao-flutua {
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  25%  { translate: 0 var(--balao-curso); animation-timing-function: cubic-bezier(.445, .05, .55, .95); }
  75%  { translate: 0 calc(var(--balao-curso) * -1); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  100% { translate: 0 0; }
}

@media (max-width: 47.99em) {
  /* Quase o triplo do curso: de ±10px para ±26px. A posição de repouso fica
     onde estava — conferi que, no ponto mais alto do movimento, o balão ainda
     sobra 126px dentro da seção, então subir mais não corta nada. */
  .noite__balao { --balao-curso: 12%; }
}

@media (min-width: 64em) {
  /* 1063px por dentro é a largura do bloco no Wix (431 + 126 + 506);
     o max-width soma as margens laterais do container */
  .noite > .container { max-width: calc(min(66.5rem, 90vw) + 2 * var(--gutter)); }

  .noite__grid {
    grid-template-columns: minmax(0, 431fr) minmax(0, 506fr);
    column-gap: 11.85%;
    row-gap: 0;
  }

  .noite__balao {
    inset-block-start: -2rem;
    inset-inline-end: -8.75%;   /* passa da margem, como no original */
    width: 21.36%;
  }
}

/* No celular a ordem inverte: primeiro datas/horário/local, depois o convite */
@media (max-width: 63.99em) {
  .noite__grid { grid-template-areas: "infos" "convite"; }
  .infos    { grid-area: infos; }
  .convite  { grid-area: convite; }
}

/* --------------------------------------------------------------------------
   7. BANQUETE ASSOMBRADO

   A foto é o assunto: no Wix não há véu nenhum por cima dela. As pizzas, a
   poção e a máscara ocupam a esquerda e a base; o texto vai para o vazio de
   seda roxa à direita, começando em 52% da largura.
   -------------------------------------------------------------------------- */
.banquete {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: var(--sp-section);
  background-color: var(--c-night-3);
  isolation: isolate;
  overflow: clip;
}

/* As duas emendas. A regra é sempre a mesma: a faixa recortada é pintada com
   a cor de quem está do OUTRO lado dela — em cima, a seção anterior; embaixo,
   a seguinte. Assim a cor de fora parece invadir a foto com a borda rasgada,
   e não sobra corte reto.

   Isto estava errado no topo: a faixa usava --c-night-3, a cor do próprio
   banquete, enquanto a Noite de Halloween acima é --c-night. Resultado: uma
   tira de tom errado, com borda reta, exatamente a emenda marcada.

   É a mesma técnica do site original: 56px de altura e a cor da seção
   vizinha. */
/* A forma vem do components.css: aqui só a cor. As duas faixas são pintadas
   com --c-night, que é a cor da Noite de Halloween acima e da Adquira seu
   convite abaixo — a regra de sempre: a faixa usa a cor de quem está do
   outro lado dela. */
.banquete::before,
.banquete::after { --sep-cor: var(--c-night); }

.banquete__bg,
.banquete__bg img {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  width: 100%;
  height: 100%;
}

.banquete__bg img { object-fit: cover; object-position: 50% 50%; }

/* O texto é posicionado, não centrado no fluxo: ele precisa cair no vazio da
   seda, e esse vazio está em lugar diferente em cada uma das duas artes. As
   coordenadas saíram da leitura das fotos — varri cada uma em células medindo
   a variação de brilho, para separar a seda lisa dos objetos (pizzas, faca,
   máscara, velas) — e não do olho.

   Na arte em pé (a nova, de 09/09) os objetos ficam no terço de cima e a
   metade de baixo é seda limpa: livre de x 3% a 92%, de y 58% a 86%. É uma
   área folgada, então o texto voltou ao tamanho normal, centrado, sem a fonte
   reduzida nem a sombra que a arte anterior obrigava. */
.banquete__inner {
  position: absolute;
  z-index: 2;
  inset-inline-start: 6%;
  inset-block-start: 72%;
  translate: 0 -50%;
  width: 88%;
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
}

.banquete .section-title { margin-block-end: 0; }

/* No celular o bloco é ancorado pelo TOPO, logo abaixo da faca da arte.

   O valor é 51%, e não os 60% em que a faca "termina": aqueles 60% são o
   CABO, que fica na borda esquerda da arte. Na faixa central, onde o título
   de fato passa, a lâmina acaba perto de 49% — foi essa diferença que deixou
   um vão de uns 90px entre a faca e o título, o que ela apontou numa
   captura de tela.

   Como a arte é `cover` numa caixa sempre mais estreita que ela, a escala é
   pela altura, então a porcentagem vale igual em qualquer celular.

   O preço disso é conhecido e foi a escolha dela em 09/09/2026: o bloco mede
   ~290px e sobram ~230px até o separador de tinta, então o botão termina por
   baixo da transição. Foram oferecidas as três saídas (seção mais alta, texto
   menor só aqui, ou o botão sob a transição) e ela escolheu esta.

   O limite de 30ch do parágrafo saiu: ele custava uma sexta linha, e aqui o
   espaço vertical vale mais que a medida ideal de leitura. */
@media (max-width: 47.99em) {
  .banquete__inner {
    inset-block-start: 51%;
    inset-block-end: auto;
    translate: none;
  }

  /* O parágrafo usa a caixa inteira: ela marcou isso numa captura, com setas
     para fora — o texto tem de ir até as margens. Não há regra aqui porque o
     teto de 30ch saiu da regra base; deixá-lo lá e sobrescrever aqui não
     funcionava, este bloco vem ANTES dela no arquivo e a especificidade é a
     mesma. Alargar ajuda duas vezes: linha mais larga é menos linha, e cada
     linha que sai é altura que o título ganha para subir até a faca. */

  /* Vãos apertados: cada 8px economizados aqui é 8px que o título pode
     descer em direção à faca. */
  .banquete__inner { gap: var(--sp-2); }

  /* Sombra de volta, só no celular. A faixa de seda limpa da arte tem 28% da
     altura (~186px num aparelho de 667px) e o bloco pede 288px: num celular
     baixo o título encosta nas pizzas, não tem como não encostar. A sombra
     não é enfeite, é o que segura a leitura quando isso acontece — em tela
     alta ela nem se nota, porque ali o texto cai na seda. */
  .banquete__inner .section-title,
  .banquete__inner p {
    text-shadow: 0 2px 10px rgba(12, 6, 43, .95), 0 0 2.5rem rgba(12, 6, 43, .8);
  }
}

.banquete__inner p {
  font-size: var(--fs-corpo);
  letter-spacing: var(--ls-corpo);
  line-height: var(--lh-corpo);
  color: var(--c-ink);
}

@media (min-width: 64em) {
  .banquete { min-height: 100svh; }
}

/* A foto deitada entra a partir de 48em (ver o <picture>), então o texto tem
   de se mudar para o vazio DELA no mesmo ponto — senão, entre 768 e 1023px,
   o bloco ficaria posicionado para a arte em pé sobre a arte deitada.

   Na arte deitada o vazio é a seda do meio para a direita, entre as pizzas de
   cima e a faca de baixo: x 46%..89%, y 40%..63% da foto. O bloco fica dentro
   dessa janela, centrado na altura da seção. */
@media (min-width: 48em) {
  .banquete__inner {
    padding-inline: 0;
    inset-inline-start: 47%;
    inset-block-start: 50%;
    width: 40%;
    max-width: 34rem;
    gap: var(--sp-5);
    /* na foto deitada o bloco encosta à esquerda da coluna; no celular ele é
       centrado, então o alinhamento volta aqui */
    justify-items: start;
    text-align: start;
  }

  .banquete__inner p { text-align: start; max-width: none; }
}

/* --------------------------------------------------------------------------
   8. ADQUIRA SEU CONVITE — motor de reservas
   -------------------------------------------------------------------------- */
/* Sem separador entre Adquirir e o FAQ: a onda que ficava aqui foi retirada
   em 09/09/2026 a pedido dela. As duas seções agora se encontram na cor. */
.adquirir {
  position: relative;
  background-color: var(--c-night);
  text-align: center;
  /* a mão sangra até a borda da janela; sem isto ela criaria rolagem lateral */
  overflow: clip;
}

.adquirir__titulo {
  font-size: var(--fs-titulo);
  letter-spacing: 0.25em;
  color: var(--c-green);
  text-shadow: 0 0 2.5rem rgba(77, 221, 55, .35);
  margin-block-end: var(--sp-7);
}

/* A mão do Fome Noturna. Fica num bloco com `background-image` e não num
   `<img>` de propósito: escondida no celular, a imagem nem chega a ser
   baixada. O arquivo já sai com as bordas dissolvidas — o fundo da foto
   (#0B0132) é quase o da seção (#120636), então ela deixa de ser um retângulo
   colado e passa a fazer parte do fundo.

   Sem `aspect-ratio` de propósito: com ela, a altura esticada da linha
   mandava na largura e a mão estourava a coluna. Aqui quem manda é a coluna,
   e a mão se acomoda dentro, apoiada na base. */
.adquirir__mao { display: none; }

@media (min-width: 64em) {
  /* Duas colunas: o motor de reservas na esquerda e a mão na direita.
     A coluna da mão é limitada em rem porque o widget da Planne desenha
     calendário, tarifas e adicionais — é ele que precisa da largura. */
  .adquirir__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 30%, 26rem);
    gap: var(--sp-7);
    align-items: stretch;
  }

  /* dentro da coluna ela ocupa a largura toda, em vez de ficar centrada */
  .adquirir .reservas {
    max-width: none;
    margin-inline: 0;
  }

  /* O endereço da imagem fica AQUI DENTRO, e não na regra de fora: um `url()`
     numa media query que não vale nunca é buscado. Escondendo só com
     `display: none`, o navegador baixava a imagem no celular à toa.

     A mão sangra da coluna até a borda direita da janela. O recuo negativo é
     exatamente a distância entre a borda do container e a da tela: ou a
     margem lateral, ou a sobra de cada lado quando a janela passa dos 1200px
     do container — o que for maior. Com `bottom right`, ela se apoia nessa
     borda e sobe da base. */
  .adquirir__mao {
    display: block;
    /* Duas distâncias somadas, e as duas importam: o respiro interno do
       container (--gutter) e, quando a janela passa dos 1200px do container,
       a sobra de cada lado. Só com a segunda a mão parava a 56px da borda. */
    margin-inline-end: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--w-container)) / 2)));
    background: url('../img/mao-v5.webp') bottom right / contain no-repeat;
  }
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
/* Era a única emenda da página sem transição alguma: o FAQ trocava de cor
   para o rodapé num degrau seco. O degradê no fim resolve. */
.faq {
  background-color: var(--c-night-2);
  /* Sem o separador de onda, a emenda com o Adquirir virava uma linha de cor
     seca. O degradê de cima nasce na cor DAQUELA seção e se dissolve na desta
     em 14rem — o mesmo recurso que a Noite de Halloween usa. O de baixo, que
     já existia, fecha na cor do rodapé. */
  background-image: linear-gradient(to bottom,
    var(--c-night) 0,
    transparent 14rem,
    transparent 86%,
    var(--c-night) 100%);
}

/* A revoada de morcegos já é o fecho visual do FAQ: os 58px de respiro que
   vinham depois dela só afastavam a logo do rodapé. No celular eles saem, e
   a logo encosta nos morcegos. No desktop o rodapé tem três colunas e o
   respiro continua fazendo falta. */
@media (max-width: 47.99em) {
  .faq { padding-block-end: 0; }
}

/* "Perguntas frequentes" é um título de SEÇÃO, como "Noite de Halloween" e
   "Banquete Assombrado" — e não uma pincelada verde como "Renda-se" ou
   "Fome noturna". Por isso ele usa `.section-title` e não define tamanho,
   cor nem tracking: sai tudo de lá. O que sobra aqui é só o respiro. */
.faq__titulo { margin-block-end: var(--sp-6); }


/* --------------------------------------------------------------------------
   10. RODAPÉ
   -------------------------------------------------------------------------- */
/* Sem borda no topo: a revoada de morcegos termina o FAQ e a linha de 1px
   aparecia como uma divisória solta logo abaixo dela. A cor do rodapé é a
   mesma em que o FAQ fecha, então não há nada para demarcar. E o respiro de
   cima caiu de 3rem para 1rem, para a logo vir logo abaixo dos morcegos. */
.site-footer {
  padding-block: var(--sp-4) var(--sp-6);
  background-color: var(--c-night);
  font-size: var(--fs-sm);
  color: var(--c-body-soft);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-7);
  padding-block-end: var(--sp-7);
}

.site-footer__brand { display: grid; gap: var(--sp-4); justify-items: start; }
.site-footer__brand img { width: 9.5rem; height: auto; }
.site-footer__brand address { line-height: 1.7; }

.site-footer__nav ul,
.site-footer__social ul { display: grid; gap: var(--sp-2); }

.site-footer__nav a,
.site-footer__social a {
  display: inline-block;
  padding-block: var(--sp-2);   /* alvo de toque, não só a altura da linha */
  color: var(--c-body-soft);
  text-decoration: none;
}
.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--c-green); }

.site-footer__socialTitle {
  margin-block-end: var(--sp-2);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--c-ink);
}

.site-footer__legal {
  padding-block-start: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-body-dim);
  text-align: center;
}

/* Respiro no pé do rodapé para o carrinho flutuante da Planne não cobrir a
   frase legal. Eram 6rem quando a barra fixa de conversão existia. */
@media (max-width: 63.99em) {
  .site-footer { padding-block-end: var(--sp-9); }
}

/* No celular sobra só a logo e a frase legal. Os links do rodapé repetem o
   menu do topo e o endereço já está inteiro, com link do Maps, na Noite de
   Halloween — no fim de uma página longa e vertical eles só somavam rolagem.
   A logo passa a ser centrada para acompanhar a frase legal, que já é. */
@media (max-width: 47.99em) {
  .site-footer__brand address,
  .site-footer__nav,
  .site-footer__social { display: none; }

  .site-footer__brand { justify-items: center; }
  .site-footer__inner { padding-block-end: var(--sp-5); }
}

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-6);
  }
  .site-footer__legal { text-align: start; }
}