/* Rodapé: "Pode apagar a luz." (protótipo "Hero que volta A", aprovado 24/09), com o Beta numa bolha no
   alto (beta.css; pedido do dono, 25/09) e o abajur de apertar (pedido do dono, 25/09).
   No fim da página o rodapé vira a janela para a cena do topo: o hero fica
   preso (sticky) atrás da página inteira (estilo.css) e o rodapé, com a mesma
   altura dele e transparente, mostra-o por baixo. Enquanto o rodapé sobe até
   cobrir a tela, a mesma sala anoitece, presa à rolagem: a luz vira noite, as
   folhas e pedras pousam no tapete, a lua se desenha onde estava o sol, a hora do
   aparelho de quem visita e "Pode apagar a luz." sobem no lugar do "Mais leve." e,
   no fim do caminho, o abajur acende e fica esperando: um botão em cima dele e um
   balãozinho de papel ao lado apagam e acendem (clique seco, cordinha). O quanto
   de noite há em cada ponto (opacidades, deslocamentos, o traço) é escrito pelo
   rodape.js, quadro a quadro; aqui, o rodapé, o ponto de partida (dia) e as caixas.

   Estados do hero (rodape.js):
     .cena sem data-hora      dia, e as camadas da noite fora da página;
     .cena[data-hora]         o rodapé está na tela: as camadas existem e o rodape.js
                              pinta o ponto do caminho ("dia" até a metade, "noite" daí em diante);
     .cena[data-luz]          o abajur: "acesa" ou "apagada".
   A volta ao dia é de uma vez, sem transição, e só com o rodapé fora da tela. */

/* ---------- O rodapé ---------- */
/* Sem JS (ou sem rodape.js): o rodapé de sempre, escuro. */
.rodape {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding: 28px 40px; background: var(--tinta); color: rgba(255,255,255,.8); font-size: 14px;
}
.rodape-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.rodape nav { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.rodape nav a { padding: 3px 0; } /* 24 px de altura para o dedo e o mouse */
.rodape a:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; border-radius: 2px; }
.rodape-sr, .rodape-selo, .rodape-lua { display: none; }

/* Com JS: a altura do hero (100vh, no mínimo 680 px; 620 no celular) e
   transparente. Com as duas alturas iguais, no fim da rolagem a janela casa
   com o hero mesmo quando ele é mais alto que a tela. Só o pé escurece, para
   os links ficarem legíveis sobre a cena. */
.rodape-js .rodape {
  min-height: max(100vh, 680px); padding: 0 40px 22px;
  background: linear-gradient(180deg, rgba(31,42,32,0) calc(100% - 118px), rgba(31,42,32,.6) calc(100% - 58px), var(--tinta) 100%);
}
.rodape-js .rodape-sr {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* O selo, no canto de baixo, do lado dos links: longe do abajur. Aparece com a noite. */
.rodape-js .rodape-selo {
  display: inline-flex; align-items: center; align-self: flex-end; min-height: 26px; margin: 0; padding: 0 11px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(31,42,32,.42);
  color: rgba(255,255,255,.86); font-size: 12.5px; white-space: nowrap;
  opacity: 0; transition: opacity 300ms var(--saida);
}
.rodape[data-noite] .rodape-selo { opacity: 1; transition-delay: 700ms; }

/* A borda de baixo da última seção (Preços, creme) termina numa aguada (duas camadas, a de trás mais
   clara e deslocada), pendurada por cima da janela. Antes era a do Beta, verde; o Beta agora mora no rodapé. */
.rodape-js .precos::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: clamp(28px, 3.4vw, 56px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V52C1372 60 1316 44 1240 50C1150 57 1090 72 990 64C900 57 846 44 752 52C650 61 590 76 488 68C396 61 340 47 250 55C170 62 96 74 0 64Z' fill='%23ece7dc' opacity='.5'/%3E%3Cpath d='M0 0H1440V36C1380 44 1318 30 1236 36C1160 42 1080 54 996 48C904 41 850 30 760 38C662 46 600 58 500 51C412 45 350 33 262 40C180 47 100 56 0 47Z' fill='%23ece7dc'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}

/* ---------- O hero à noite ---------- */
/* O hero é o quadro de medida da noite (cqw/cqh). --wi = largura da foto do
   fundo (cover, 2560×1429): a lua e a mancha que apaga o sol moram nela.
   padding 0: o hero é uma <section> e herdava 96px 40px, que não mexiam em nada
   (tudo nele é absoluto e mede a caixa inteira), mas os cq medem o conteúdo. */
.cena { padding: 0; container-type: size; --wi: max(100cqw, calc(100cqh * 1.7915)); }
.noite, .palco .noite-abajur { display: none; }
.cena[data-hora] .noite, .cena[data-hora] .palco .noite-abajur { display: block; }

/* O véu: um degradê em multiplicar por cima de tudo. Nada de filter nas fotos grandes. */
.noite-veu, .noite-escuro, .noite-sol { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: multiply; opacity: 0; }
.noite-veu, .noite-escuro { inset: 0; }
.noite-veu { background: linear-gradient(180deg, #5a6a86 0%, #66758e 34%, #75838a 64%, #7d8a7a 100%); }
/* Apaga o brilho do sol da foto: a mesma caixa da foto (cover, presa embaixo), uma mancha que só escurece onde ele está. */
.noite-sol {
  left: 50%; bottom: 0; width: var(--wi); aspect-ratio: 2560 / 1429; transform: translateX(-50%);
  background: radial-gradient(ellipse 30% 48% at 77.8% 20%, rgb(150,168,166) 0%, rgb(160,177,175) 18%, rgb(188,200,198) 42%, rgb(222,229,227) 70%, #fff 100%);
}
/* Uma segunda demão de noite: inteira com o abajur apagado (mais funda onde a luz dele caía), meia com ele aceso. */
.noite-escuro { background: radial-gradient(ellipse 55% 75% at 24% 64%, #a2a9ba 0%, #b3b9c7 55%, #c3c8d2 100%); }

/* Caixas no mesmo quadro 16:9 do .palco (estilo.css): a luz do abajur e a cúpula acesa, por cima do véu. */
.noite-geo {
  position: absolute; left: 50%; top: 50%; height: 108%; aspect-ratio: 16 / 9; width: auto;
  transform: translate(-50%, -50%); pointer-events: none;
}
@media (max-aspect-ratio: 16/10) {
  .noite-geo { height: auto; width: 128%; top: auto; bottom: -4%; transform: translateX(-50%); }
}
.noite-geo svg, .palco .noite-abajur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* O abajur aceso: a luz quente clareia (tela) a mesinha e o braço da poltrona. */
.noite-luz { z-index: 4; mix-blend-mode: screen; opacity: 0; }
.noite-acima { z-index: 5; opacity: 0; }

/* A opacidade de cada camada (o véu, a mancha do sol, a segunda demão, a luz e a cúpula acesa) é do
   rodape.js, no ponto do caminho e com o abajur como estiver; sem transição no CSS. */

/* O céu da noite: a lua no lugar do sol (na caixa da foto), as estrelas e o brilho frio.
   A lua nunca fica atrás da barra (até 84 px): a borda de cima dela fica a pelo
   menos 100 px do topo da tela (o raio dela é --wi × 0,0168), contando o que o
   hero sobe no fim da rolagem quando é mais alto que a tela (100cqh − 100vh). */
.noite-lua {
  position: absolute; z-index: 5; pointer-events: none; overflow: visible;
  width: calc(var(--wi) * .36); aspect-ratio: 2 / 1;
  left: min(calc(50% + var(--wi) * .2781), 88%);
  top: max(10cqh, calc(100cqh - 100vh + 100px + var(--wi) * .0168), calc(100cqh - var(--wi) * .452));
  translate: -50% -50%;
}
.noite-estrela, .noite-brilho-frio { opacity: 0; } /* acendem uma a uma (rodape.js) */

/* O topo do dia sai com a rolagem: as linhas do título descem pela máscara (a mesma da entrada) e
   legendas e cartões apagam (rodape.js escreve o translate e a opacidade). */
.cena[data-hora] .titulo .linha { overflow: clip; }

/* A hora e "Pode / apagar / a luz." sobem no lugar exato do "Mais leve.": mesmo corpo, mesma máscara,
   uma linha depois da outra, no fim do caminho (rodape.js). Três linhas (em duas, "Pode apagar" teria 5,9 em e cobriria a poltrona;
   no celular, a lua): o alto fica onde estava o de "Outra noite." (a bolha do Beta conta com ele, beta.css)
   e a terceira linha desce 0,86 em, ainda longe dos links e do selo.
   Com "apagar" o título ficou 0,64 em mais largo para a esquerda, e em tela baixa a bolha desce até a altura
   dele e para de lado contando com a largura de "Outra" (beta.css). Quando os dois se encostariam, o
   rodape.js mede e resolve com duas variáveis na cena: --titulo-desce (desce o título até 14 px abaixo da
   bolha, se ainda couber acima dos links e do selo; 1280×720) ou, se não couber, --titulo-k (o corpo
   encolhe até o título caber à direita da bolha, com 24 px de vão; 1280×600, 1024×600). Sem encosto, as
   duas ficam de fora e vale o de sempre. */
.noite-titulo {
  --corpo: clamp(64px, 8.5vw, 130px);
  position: absolute; inset: auto 6% calc(24% - .86 * var(--corpo) - var(--titulo-desce, 0px)) auto; z-index: 6; margin: 0;
  display: flex; flex-direction: column; color: var(--branco); font-weight: 600; line-height: .86; letter-spacing: -.02em;
  font-size: calc(var(--corpo) * var(--titulo-k, 1)); text-shadow: 0 8px 30px rgba(0,0,0,.18); pointer-events: none;
}
.noite-linha { display: block; padding: .12em .3em .2em; margin: -.12em -.3em -.2em; overflow: clip; }
.noite-txt { display: block; translate: 0 130%; }
.noite-titulo .noite-hora-linha { font-size: 15px; margin: -.12em -.3em 12px; }
.noite-hora { line-height: 1; letter-spacing: .08em; color: rgba(255,255,255,.86); font-variant-numeric: tabular-nums; }
/* A hora com um relógio no traço do site e "HORÁRIO LOCAL" miúdo embaixo (variação A do mockup, 26/09). */
.noite-hora-linha { color: rgba(255,255,255,.86); }
.noite-hora-l { display: flex; align-items: center; gap: .4em; line-height: 1; }
.noite-relogio { width: .95em; height: .95em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.noite-hora-rot { display: block; margin-top: .45em; font-size: .64em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .72; line-height: 1; }

/* Folhas e pedras param de boiar e descem até o tapete com a rolagem (rodape.js move o <img>: translate,
   rotate, scale; cada uma na própria camada, pequena, para andar sem repintar o palco). */
.cena[data-hora] .flutuantes img { will-change: transform; }

/* Traço do site: 3 variantes de ruído por linha; o JS diz qual aparece (data-t) a 10 quadros por segundo. */
.cena svg:not([data-t="1"]) .noite-v1, .cena svg:not([data-t="2"]) .noite-v2,
.cena svg[data-t="1"] .noite-v0, .cena svg[data-t="2"] .noite-v0,
.rodape-balao svg:not([data-t="1"]) .noite-v1, .rodape-balao svg:not([data-t="2"]) .noite-v2,
.rodape-balao svg[data-t="1"] .noite-v0, .rodape-balao svg[data-t="2"] .noite-v0 { display: none; }

/* ---------- O abajur de apertar e o balãozinho (rodape.js) ----------
   O hero não pega clique (o rodapé está na frente), então os dois moram numa camada do rodapé, do tamanho
   dele: z-index −1, em cima do fundo escuro do pé e embaixo da bolha do Beta e dos links; recorta o que
   passar da borda (rolando, o abajur fica atrás da seção de Preços). .rodape-abajur-cena é o hero: o JS
   a põe onde ele está e mede o botão e o balão pelo palco. */
.rodape-abajur { display: none; }
.rodape-js .rodape-abajur { display: block; position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.rodape-abajur-cena { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* O botão: transparente, em cima da cúpula e da cordinha (no mínimo 44 × 44). Foco: anel branco com um halo
   escuro dos dois lados, que aparece no céu da noite e em cima da cúpula acesa. */
.rodape-abajur-botao {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 18px; background: transparent; color: inherit; font: inherit;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rodape-abajur-botao[hidden] { display: none; }
.rodape-abajur-botao:focus { outline: none; }
.rodape-abajur-botao:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(22,28,33,.62); }
.rodape-abajur-nome { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* O balãozinho: recorte de papel creme, aguada e contorno de tinta (o SVG, desenhado e tremido pelo JS);
   a letra é a do site, pequena. Entra leve (sobe 5 px e cresce a partir do rabinho) meio segundo depois
   de o abajur acender, no fim do caminho, e sai esmaecendo se a pessoa voltar a subir; o texto troca com o abajur: "Apague o abajur" / "Acenda o abajur". Aperta o abajur também
   (aria-hidden: quem tem o nome é o botão). */
.rodape-balao {
  --kb: 1;
  position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; translate: 0 5px; scale: .92;
  transition: opacity 180ms linear, translate 180ms ease, scale 180ms ease, visibility 0s linear 180ms; /* sai esmaecendo (a pessoa subiu) */
  color: var(--tinta); font-size: calc(13px * var(--kb)); font-weight: 500; line-height: 1.25; letter-spacing: .005em;
  white-space: nowrap; text-align: center; cursor: pointer; pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rodape-balao.rodape-balao-aparece {
  visibility: visible; opacity: 1; translate: 0 0; scale: 1; pointer-events: auto;
  transition: opacity 200ms linear, translate 420ms var(--saida), scale 420ms var(--saida);
}
.rodape-balao[data-sem-lugar] { display: none; }
.rodape-balao-svg { position: absolute; overflow: visible; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(6,10,8,.32)); }
.rodape-balao-txt { position: relative; display: block; padding: calc(6px * var(--kb)) calc(11px * var(--kb)) calc(7px * var(--kb)); }
@media (min-width: 1600px) and (min-height: 1000px) { .rodape-balao { --kb: 1.15; } }
@media (min-width: 2200px) and (min-height: 1300px) { .rodape-balao { --kb: 1.3; } }
/* Parado (pausa global; o prefers-reduced-motion já chega aqui como "pausado"): aparece pronto, no lugar. */
:root[data-movimento="pausado"] .rodape-balao { translate: 0 0; scale: 1; transition: none; }

/* Troca instantânea (voltar para o dia sem ninguém ver; chegar pela âncora #beta; pausar no meio). */
.noite-sem-trans, .noite-sem-trans * { transition: none !important; }

/* ---------- Telas menores ---------- */
@media (max-width: 900px) {
  .rodape, .rodape-js .rodape { padding-left: 20px; padding-right: 20px; }
}
/* Celular: a bolha do Beta fica em cima, na largura útil (beta.css). O título da
   noite desce para debaixo dela, à direita (como no computador); a lua fica à
   esquerda do título, acima do abajur; a câmera chega perto (palco a 173% da
   largura, puxado para a esquerda) e desce o bastante para o encosto da poltrona
   ficar logo abaixo do título. --bolha-pe = o pé da bolha, em px do alto da cena
   (rodape.js mede; 470 px sem medida). A câmera anda com a rolagem: --kc vai de 0
   (a sala do dia) a 1 (perto), escrito pelo rodape.js no palco e na luz do abajur. */
@media (max-width: 760px) {
  .rodape-js .rodape {
    min-height: max(100vh, 620px);
    background: linear-gradient(180deg, rgba(31,42,32,0) calc(100% - 136px), rgba(31,42,32,.6) calc(100% - 76px), var(--tinta) 100%);
  }
  .rodape-pe { flex-direction: column; align-items: flex-start; }
  .rodape-js .rodape-selo { align-self: flex-start; }
  /* O pé aperta para sobrar sala: o selo vai para a direita, na linha do "Caderninho · Beta 2026"
     (22 px de margem + 24 px dos links + 10 px de vão, menos 3 px para centrar os 26 px dele). */
  .rodape-js .rodape-selo { position: absolute; right: 20px; bottom: 53px; }
  /* O título: 14 px abaixo da bolha, com 6% de margem à direita. Altura: a hora (15 px + 12, e 14 do "HORÁRIO LOCAL") e três
     linhas de 0,86 em. A bolha já desce com o hero quando ele é mais alto que a tela (beta.css). */
  .noite-titulo { inset: calc(var(--bolha-pe, 470px) + 14px) 6% auto auto; font-size: clamp(40px, 11vw, 56px); }
  /* A lua à esquerda do título, 34 px abaixo da bolha (raio: 28/600 × 72cqw). Duas estrelas mudam de
     lugar: onde estavam, uma caía na cúpula do abajur e a outra atrás do título. */
  .noite-lua { width: 72cqw; left: 30cqw; top: calc(var(--bolha-pe, 470px) + 34px); }
  .noite-estrela:nth-of-type(2) { transform: translate(84px, -154px); }  /* de (−128, 112) para (−44, −42) */
  /* Se a bolha crescer (um recado de erro em duas linhas), título e lua descem junto, deslizando. */
  .noite-titulo, .noite-lua { transition: top 300ms var(--saida); }
  :root[data-movimento="pausado"] .noite-titulo, :root[data-movimento="pausado"] .noite-lua { transition: none; }
  .noite-estrela:nth-of-type(4) { transform: translate(-56px, -20px); }  /* de (242, 78) para (186, 58) */
  /* A sala: escala 1,35 e o abajur a 3% da borda esquerda (o que era 20,4cqw com 1,5625). O alto do
     encosto (44,4% do palco) fica 8 px abaixo do título: bolha-pe + 14 + 41 + 2,58 × corpo + 8. */
  .cena .palco, .noite-geo { transform-origin: 0 0; }
  .cena[data-hora] .palco,
  .cena[data-hora] .noite-geo {
    translate: calc(11.2cqw * var(--kc, 0)) calc((var(--bolha-pe, 470px) + 63px + 2.58 * clamp(40px, 11vw, 56px) - 104cqh + 28.8cqw) * var(--kc, 0));
    scale: calc(1 + .35 * var(--kc, 0));
  }
  .cena[data-hora] .palco { will-change: transform; }
}
/* Celular bem baixo (até 639 px, como o iPhone SE com as barras do Safari, 375×553): a cena tem 620 px e
   a tela mostra só o pé dela, então entre a bolha e os links sobram uns 55 px, e o título de duas linhas
   passava por baixo dos links e do selo. Aqui ele vira duas linhas, "Pode apagar" e, embaixo, "a luz." com
   a hora ao lado, pequena (a hora em cima pediria uma terceira linha, que não cabe), 10 px abaixo da bolha
   (que também aperta, beta.css). A lua fica à esquerda, no meio do título, e a sala sobe junto: o encosto
   8 px abaixo do título (bolha-pe + 10 + 1,72 × corpo + 8). */
@media (max-width: 760px) and (max-height: 639px) {
  .noite-titulo {
    display: grid; grid-template-columns: auto auto; column-gap: .24em;
    inset: calc(var(--bolha-pe, 440px) + 10px) 6% auto auto; font-size: clamp(28px, 9vw, 34px);
  }
  .noite-titulo .noite-linha:nth-child(2) { grid-area: 1 / 1; }
  .noite-titulo .noite-linha:nth-child(3) { grid-area: 1 / 2; }
  .noite-titulo .noite-linha:nth-child(4) { grid-area: 2 / 1; }
  .noite-titulo .noite-hora-linha { grid-area: 2 / 2; align-self: end; margin: -.12em -.3em calc(.1em - 1px); }
  .noite-hora-rot { display: none; } /* não cabe ao lado de "a luz.": fica só o relógio com a hora */
  .noite-lua { top: calc(var(--bolha-pe, 440px) + 45px); }
  .noite-estrela:nth-of-type(3) { transform: translate(-53px, 44px); }  /* de (148, −24), na ponta do "O", para (95, 20), entre a lua e o título */
  .cena[data-hora] .palco,
  .cena[data-hora] .noite-geo {
    translate: calc(11.2cqw * var(--kc, 0)) calc((var(--bolha-pe, 440px) + 18px + 1.72 * clamp(28px, 9vw, 34px) - 104cqh + 28.8cqw) * var(--kc, 0));
  }
}
/* Janela baixa (celular deitado, 844×390): o hero é mais alto que a tela e a
   janela mostraria só um pedaço dele. Aqui o rodapé é o de sempre, escuro, só
   com a lua desenhada, parada. Sem noite (rodape.js confere o mesmo corte). */
@media (max-height: 500px) {
  .rodape-js .rodape { min-height: 0; padding-top: 26px; padding-bottom: 26px; background: var(--tinta); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rodape-js .rodape-selo, .rodape-js .rodape-sr, .rodape-js .rodape-abajur { display: none; }
  .rodape-js .rodape-lua { display: block; width: 46px; height: 46px; flex: none; }
  .rodape-js .rodape-pe { flex: 1; }
}