/* =============================================================================================
   Brisée: versão de Natal e Réveillon (/natal)
   Vem DEPOIS do brisee.css e guarda só o que muda. Cores, letras, botões, topo, faixa, rodapé e o
   botão que acompanha a rolagem são os da página principal: mexer lá mexe aqui.
   Ideia desta versão: a noite da ceia. A foto da abertura foi feita numa mesa de Natal; a página
   principal esconde a árvore, esta mostra. As luzes fora de foco da foto continuam pelo verde.
   A frase da abertura é o gancho da campanha e vai grande, como num cartaz.
   ============================================================================================= */

/* ── Luzes: os pontos dourados da árvore, fora de foco ────────────────────────────────────── */
/* Cada <i> é uma luz: --x e --y dão o lugar, --t o tamanho, --o o brilho, --d e --a o ritmo. */
.luzes { position: absolute; inset: 0; pointer-events: none; }
.luzes i {
  position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); border-radius: 50%; opacity: var(--o);
  /* disco quase chapado com a borda um pouco mais clara, como a luz desfocada da foto */
  background: radial-gradient(circle, rgba(255, 190, 70, .86) 0%, rgba(255, 186, 64, .82) 54%, rgba(255, 212, 116, 1) 64%, rgba(255, 190, 70, 0) 72%);
  filter: blur(1.6px);
  animation: piscar var(--d) ease-in-out var(--a) infinite;
}
@keyframes piscar { 0%, 100% { opacity: calc(var(--o) * .42); } 46%, 58% { opacity: var(--o); } }
@keyframes pulsar { from { transform: scale(.45); opacity: .95; } to { transform: scale(1.4); opacity: 0; } }

/* ── Abertura ─────────────────────────────────────────────────────────────────────────────── */
/* Cartaz: a frase em três linhas curtas, do maior tamanho que cabe. A altura da tela também
   limita a letra, para o botão não sair da primeira tela em celular baixo.
   O tamanho depende da linha mais comprida da frase ("vai roubar a cena" mede 6,24 vezes a altura
   da letra): trocou a frase, rode /root/backups-claude/brisee-lp/natal/larguras.js e acerte os
   números (13.9vw aqui; 6.4vw e 5.8rem no computador). */
.luzes--abertura { display: none; }
.hero--natal .hero__titulo {
  font-size: clamp(2.5rem, min(13.9vw, 7.7vh), 5.8rem); font-size: clamp(2.5rem, min(13.9vw, 7.7svh), 5.8rem);
  line-height: .9; letter-spacing: -.022em; margin-top: .26em;
}
.hero--natal .hero__titulo span { display: block; white-space: nowrap; }
.hero--natal .hero__titulo em { margin-top: .05em; }
.hero--natal .hero__cima > :nth-child(3) { animation-delay: .36s; }

/* aviso de encomendas abertas, com o ponto pulsando. É uma etiqueta com fundo próprio: em celular baixo
   ela cai em cima da torta e das luzes, e sem o fundo a letra pequena ficava em 3,4:1 (medido). */
.aberto {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 16px; padding: 7px 13px 7px 12px;
  border: 1px solid rgba(214, 189, 134, .42); border-radius: 3px; background: rgba(17, 43, 36, .86);
  font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.4;
  color: var(--creme);
}
.aberto i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F0CB74; box-shadow: 0 0 10px 1px rgba(240, 203, 116, .75); }
.aberto i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #F0CB74; animation: pulsar 2.2s ease-out infinite; }

/* No celular e no tablet a foto sobe por trás da frase: as luzes da árvore ficam acesas atrás do
   título (por isso a faixa da foto pode ser mais baixa que na página principal sem a torta sumir).
   Fica dentro do limite de largura para não desmanchar a abertura em duas colunas do computador. */
@media (max-width: 999px) {
  .hero--natal { grid-template-rows: auto minmax(120px, 1fr) auto; }
  .hero--natal .hero__foto { margin-top: -190px; margin-bottom: -40px; }
  .hero--natal .hero__foto img { --perto: 1; object-position: 60% 100%; transform-origin: 50% 78%; }
  /* a foto só se desfaz no verde bem em cima e embaixo; quem garante a leitura da frase é o véu do bloco de texto */
  .hero--natal .hero__foto::after {
    background: linear-gradient(180deg, var(--verde) 0%, rgba(24, 58, 49, .7) 12%, rgba(24, 58, 49, 0) 34%, rgba(17, 43, 36, 0) 80%, rgba(17, 43, 36, .88) 95%, var(--verde-fundo) 100%);
  }
  /* véu verde atrás da frase: acompanha a altura do texto em qualquer celular. As luzes aparecem fracas
     atrás das últimas linhas e acesas logo abaixo. */
  .hero--natal .hero__cima::before {
    content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--margem)) -64px; pointer-events: none;
    background: linear-gradient(180deg, var(--verde) 0%, rgba(24, 58, 49, .95) 40%, rgba(24, 58, 49, .88) 62%, rgba(24, 58, 49, .66) 80%, rgba(24, 58, 49, 0) 100%);
  }
}

/* nesta versão cada título tem duas frases curtas: a segunda (em itálico) sempre começa na linha de baixo */
.natal .corte .titulo em, .natal .mesa .titulo em, .natal .cardapio .titulo em, .natal .feitura .titulo em, .natal .pedir .titulo em { display: block; }

/* ── O cardápio (verde, com a carta em creme) ─────────────────────────────────────────────── */
.cardapio { isolation: isolate; padding: var(--respiro) 0; background: radial-gradient(120% 70% at 12% 0%, var(--verde-luz) 0%, var(--verde) 42%, var(--verde-fundo) 100%); }
.cardapio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grao); opacity: .2; mix-blend-mode: soft-light; pointer-events: none; }

/* a carta: um cardápio impresso sobre a mesa escura */
.carta {
  position: relative; max-width: 640px; margin: 44px 12px 0; padding: 40px 20px 30px;
  background: var(--creme); color: var(--carvao); border-radius: 4px; box-shadow: 0 44px 70px -36px rgba(0, 0, 0, .9);
}
.carta::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ouro-fundo); opacity: .7; border-radius: 2px; pointer-events: none; }
.carta :focus-visible { outline-color: var(--verde); }
.carta__topo { display: grid; justify-items: center; gap: 10px; padding-bottom: 26px; text-align: center; }
.carta__simbolo { width: 54px; height: 54px; color: var(--ouro-fundo); }
.carta__nome { font-family: var(--titulo); font-style: italic; font-weight: 500; font-size: 2.2rem; line-height: 1; color: var(--verde); }
.carta__sub { font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #7A5F2C; }

.prato { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(154, 122, 62, .5); }
.prato__foto { display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px; overflow: hidden; background: var(--creme-fundo); box-shadow: 0 0 0 1px var(--ouro-fundo), 0 16px 26px -16px rgba(31, 36, 33, .7); }
.prato__foto img { width: 100%; height: 100%; object-fit: cover; }
/* nas duas fotos seguradas na mão a comida chega mais perto: a luva sai pela base da miniatura */
.prato__foto--perto img { transform: scale(1.24); transform-origin: 50% 16%; }
.prato__nome { font-family: var(--titulo); font-weight: 600; font-size: 1.42rem; line-height: 1.08; text-wrap: balance; }
.prato__texto p { margin-top: 6px; font-size: .95rem; line-height: 1.45; color: rgba(31, 36, 33, .86); }
.prato .elo { margin-top: 2px; font-size: .72rem; }

.carta__pe { display: grid; justify-items: center; gap: 20px; padding-top: 26px; border-top: 1px solid rgba(154, 122, 62, .5); text-align: center; }
.carta__pe p { max-width: 26em; font-size: .98rem; line-height: 1.5; color: rgba(31, 36, 33, .86); }
.carta__pe .botao { width: 100%; }

/* ── Como encomendar: o aviso da agenda ───────────────────────────────────────────────────── */
.aviso {
  max-width: 560px; margin: 30px auto 0; padding: 16px 18px 16px 20px;
  border-left: 2px solid var(--ouro-fundo); background: rgba(154, 122, 62, .12);
  font-size: 1rem; line-height: 1.5; color: rgba(31, 36, 33, .9);
}

/* ── Chamada final: as duas datas ─────────────────────────────────────────────────────────── */
.luzes--final { z-index: 0; }
.datas { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 7vw, 54px); margin-bottom: 34px; }
.datas li { display: grid; justify-items: center; }
.datas__dia { font-family: var(--titulo); font-style: italic; font-weight: 500; font-size: clamp(5rem, 24vw, 8.6rem); line-height: .82; font-variant-numeric: lining-nums; color: var(--ouro-claro); }
.datas__mes { margin-top: 12px; font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(245, 235, 221, .86); }
.datas__nome { margin-top: 4px; font-family: var(--titulo); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.1; color: var(--creme); }
.datas .datas__losango { width: 11px; height: 11px; background: var(--ouro); transform: rotate(45deg); flex: none; }

.rodape__casa { color: var(--ouro-claro); text-underline-offset: 4px; }

/* luzes da chamada final (valem no celular e no computador): nas bordas, longe do texto. As pequenas
   são as acesas; as duas grandes e fracas dão fundo, como as luzes distantes da foto. */
.luzes--final { overflow: hidden; }
.luzes--final i:nth-child(1) { --x: 9%;  --y: 9%;  --t: 34px;  --o: .62; --d: 5.2s; --a: -1s; }
.luzes--final i:nth-child(2) { --x: 91%; --y: 7%;  --t: 46px;  --o: .58; --d: 6.4s; --a: -3s; }
.luzes--final i:nth-child(3) { --x: 97%; --y: 30%; --t: 26px;  --o: .6;  --d: 4.6s; --a: -2s; }
.luzes--final i:nth-child(4) { --x: 2%;  --y: 40%; --t: 96px;  --o: .2;  --d: 7s;   --a: -4s; }
.luzes--final i:nth-child(5) { --x: 8%;  --y: 90%; --t: 30px;  --o: .56; --d: 5.6s; --a: -.5s; }
.luzes--final i:nth-child(6) { --x: 93%; --y: 86%; --t: 110px; --o: .18; --d: 6.8s; --a: -2.5s; }
.luzes--final i:nth-child(7) { --x: 76%; --y: 3%;  --t: 20px;  --o: .5;  --d: 4.2s; --a: -3.5s; }
.luzes--final i:nth-child(8) { --x: 22%; --y: 97%; --t: 22px;  --o: .5;  --d: 5s;   --a: -1.5s; }

/* ── Telas um pouco maiores (celular grande deitado, tablet) ──────────────────────────────── */
@media (min-width: 620px) {
  .carta { margin-inline: auto; padding: 48px 40px 38px; }
  .carta::before { inset: 12px; }
  .prato { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; }
  .carta__pe .botao { width: auto; }
  .aviso { text-align: left; }
}

/* ── Computador ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  /* as luzes ficam presas à foto: saem pelos ombros do arco e pela lateral, em qualquer largura de tela */
  .luzes--abertura { display: block; z-index: 1; }
  .luzes--abertura i:nth-child(1) { --x: -10%; --y: 21%; --t: 46px; --o: .66; --d: 5.4s; --a: -1s; }
  .luzes--abertura i:nth-child(2) { --x: -3%;  --y: 8%;  --t: 24px; --o: .56; --d: 4.4s; --a: -3s; }
  .luzes--abertura i:nth-child(3) { --x: 7%;   --y: -4%; --t: 30px; --o: .5;  --d: 6.2s; --a: -2s; }
  .luzes--abertura i:nth-child(4) { --x: 96%;  --y: -3%; --t: 36px; --o: .6;  --d: 5s;   --a: -4s; }
  .luzes--abertura i:nth-child(5) { --x: 108%; --y: 13%; --t: 58px; --o: .58; --d: 6.6s; --a: -.5s; }
  .luzes--abertura i:nth-child(6) { --x: 105%; --y: 36%; --t: 28px; --o: .62; --d: 5.8s; --a: -2.5s; }
  .luzes--abertura i:nth-child(7) { --x: 110%; --y: 62%; --t: 44px; --o: .36; --d: 5s;   --a: -3.5s; }

  .hero--natal .hero__titulo { font-size: clamp(3.8rem, min(6.4vw, 13.5vh), 5.8rem); font-size: clamp(3.8rem, min(6.4vw, 13.5svh), 5.8rem); }
  .aberto { margin-top: 24px; font-size: .74rem; background: rgba(17, 43, 36, .5); }
  /* dentro do arco, com menos aproximação que na página principal: a árvore aparece inteira atrás da torta */
  .hero--natal .hero__foto img { --perto: 1.02; object-position: 50% 50%; transform-origin: 50% 62%; }
  /* o botão desta versão tem o rótulo mais comprido: nunca quebra em duas linhas */
  .hero--natal .hero__acoes .botao { flex: none; white-space: nowrap; }
  /* idem os atalhos do topo: cabem numa linha só */
  .natal .topo__nav { gap: clamp(18px, 2.2vw, 34px); }
  .natal .topo__nav a, .natal .topo__pedir { white-space: nowrap; }

  .carta { max-width: 1000px; margin-top: 64px; padding: 56px 64px 44px; }
  .carta::before { inset: 14px; }
  .carta__nome { font-size: 2.8rem; }
  .carta__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .prato { grid-template-columns: 128px minmax(0, 1fr); gap: 26px; padding: 28px 0; }
  .prato__nome { font-size: 1.62rem; }
  .prato__texto p { font-size: 1rem; }
  .carta__pe { padding-top: 34px; }

  .aviso { max-width: 720px; margin-top: 44px; padding: 20px 26px; font-size: 1.06rem; }
  .datas { margin-bottom: 44px; }
  .datas__nome { font-size: 1.8rem; }
}

/* notebook pequeno: o botão do topo fica só com "Encomendar", para os quatro atalhos caberem */
@media (min-width: 1000px) and (max-width: 1199px) {
  .natal .topo__pedir-longo { display: none; }
}