/* ===========================================================================
   Cardapio Anual — estilo
   Escrito para celular primeiro. Tudo que anima usa apenas transform e
   opacity, que sao as duas propriedades que o navegador desenha na placa de
   video sem recalcular a pagina.
   =========================================================================== */

/* cqw mede o container, nao a janela.

   Os tamanhos abaixo crescem com a largura DA MOLDURA da pagina. Na web
   publicada nao ha moldura, e cqw cai para a janela — o mesmo que vw fazia.
   Dentro do editor, escolhendo "telefone", a moldura encolhe e a letra
   encolhe junto: e o unico jeito de ver a versao de celular sem precisar
   estreitar a janela inteira do navegador. */
:root{
  /* preenchidas pelo conteudo.js em tempo de execucao */
  --fundo:#48586f;
  --texto:#ffffc0;
  --destaque:#ffffc0;
  --quente:#d62e2e;
  --suave:#d6c496;

  --papel:#283d3e;
  --borda:#48586f;
  --borda-forte:#d6c496;

  /* Curvas de mola geradas pela ferramenta do Motion.
     Sao molas de verdade rodando em CSS puro, sem carregar biblioteca. */
  --mola:linear(0, 0.0877, 0.2741, 0.4798, 0.6628, 0.8057, 0.9066, 0.971, 1.0072, 1.0239, 1.0284, 1.0261, 1.0209, 1.0151, 1.0098, 1.0057, 1.0028, 1.0009, 0.9998, 1);
  --mola-rapida:linear(0, 0.2459, 0.6526, 0.9468, 1.0764, 1.0915, 1.0585, 1.0219, 0.9993, 0.9914, 0.9921, 0.9957, 0.9988, 1.0004, 1);
  /* Cronometre pelo tempo PEDIDO, nao pelo da curva: a sobra e a mola parando */
  --t-mola:600ms;
  --t-mola-rapida:450ms;

  --lim:1180px;
  --gut:clamp(18px, 5cqw, 40px);
}

*,*::before,*::after{box-sizing:border-box}

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

/* O corte precisa estar aqui TAMBEM, nao so no body.

   Quem manda na rolagem da janela e o <html>. Cortando so no body, o desenho
   de fundo — que sai de proposito para os lados, para ter folga de movimento —
   virava rolagem horizontal de verdade: 59 px de arrasto lateral num telefone
   de 393 px de largura.

   "clip" e nao "hidden" pelo mesmo motivo explicado no body: hidden criaria um
   contentor de rolagem e brigaria com a janela. */
html{ overflow-x:hidden; overflow-x:clip; }

/* O contentor da pagina vira referencia de medida.

   As regras de desenho abaixo perguntam "quanto mede a PAGINA", nao "quanto
   mede a janela". No site publicado da na mesma — ele ocupa a janela inteira.
   Dentro do editor, escolhendo um tamanho de tela, a moldura encolhe e o
   desenho encolhe junto: e o unico jeito de ver a versao de celular sem
   estreitar a janela do navegador.

   Os elementos presos a janela — desenho de fundo, botao fixo do rodape —
   ficam FORA deste contentor de proposito, e continuam medindo a janela. */
#rolagem-externa{ container-type:inline-size; container-name:pagina; }

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font:400 17px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* "hidden" no eixo horizontal obriga o navegador a tornar o vertical rolavel
     tambem, e o corpo vira um segundo contentor de rolagem brigando com a
     janela — a pagina trava depois de alguns pixels. "clip" corta o que vaza
     sem criar contentor nenhum. A primeira linha e reserva para navegador
     antigo que nao conhece "clip". */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ---------------------------------------------- telefone alto e estreito --
   Aparelho de 19,5:9 a 20:9 — o 1080x2400 e os parentes. A tela e comprida:
   sobra altura e falta largura.

   A proporcao entra na conta junto com a largura. So perguntar pela largura
   pegaria tablet em pe tambem, que tem espaco de sobra e nao precisa disto. */
/* So a largura, sem a proporcao.

   A proporcao existia para separar telefone alto de tablet em pe. Ela nao
   serve aqui: quem responde agora e a MOLDURA da pagina, que tem 393px de
   largura por sete mil de altura — proporcao nenhuma parecida com a de uma
   tela. E a largura ja resolve: 430px ou menos e telefone; tablet em pe
   comeca em 768. */
@container pagina (max-width:430px){
  /* O topo cabe numa tela so: titulo, frase e os dois botoes sem rolar.
     Numa tela comprida, deixar o botao abaixo da dobra e desperdicar o unico
     momento em que a atencao esta inteira. */
  .topo{ padding-block:clamp(24px,5cqw,44px) clamp(28px,6cqw,52px); min-height:auto; }
  #tituloTopo{ font-size:clamp(30px,8.6cqw,36px); line-height:1.08; }
  .topo__sub{ margin-top:18px; margin-bottom:20px; padding:15px 16px; font-size:15.5px; }

  /* Dois botoes lado a lado nao cabem em 393px sem apertar a palavra.
     Empilhados, cada um fica com a largura inteira e o alvo do dedo cresce. */
  .topo__acoes{ flex-direction:column; gap:10px; }
  .topo__acoes .btn{ width:100%; }

  /* Respiro entre secoes: numa tela comprida, o exagero vertical faz a pessoa
     rolar por nada. */
  section{ padding-block:clamp(30px,6cqw,54px); }

}

h1,h2,h3{
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0;
  font-weight:680;
  text-wrap:balance;
}
h1{font-size:clamp(38px,10.5cqw,86px)}
h2{font-size:clamp(28px,6.6cqw,52px)}
h3{font-size:clamp(19px,3.4cqw,25px);letter-spacing:-.016em}
p{margin:0 0 1em;text-wrap:pretty}
em{color:var(--destaque);font-style:italic}

.env{width:100%;max-width:var(--lim);margin-inline:auto;padding-inline:var(--gut)}

section{
  position:relative;
  /* enxugado: era clamp(66px,13cqw,140px). Dez secoes com o dobro de respiro
     esticavam a pagina sem acrescentar nada para quem le no celular. */
  padding-block:clamp(34px,6.5cqw,76px);
}
/* NAO usar content-visibility:auto aqui.
   Ele faz a secao fora da tela assumir uma altura estimada e so voltar ao
   tamanho real quando entra na tela. Media das secoes desta pagina contra a
   estimativa de 760px que estava declarada:

     erro medio      275 px
     erro maximo   1 031 px  (secao "umdia" tem 1 791 px reais)
     soma dos erros 2 754 px  =  26% da altura total do documento

   Com esse descasamento a altura total muda enquanto a pessoa rola, a pagina
   salta debaixo do dedo e o ScrollTrigger calcula as marcas em cima de uma
   altura falsa. Numa pagina de dez secoes o desenho poupado nao paga isso.
   Se um dia valer a pena, tem de vir com contain-intrinsic-size medido secao
   por secao, nao com um numero unico chutado. */

.olho{
  font:600 13px/1.4 ui-monospace,"SF Mono",Consolas,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--destaque);
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:13px;
}
.olho::before{content:"";width:22px;height:1px;background:var(--destaque);opacity:.65;flex:0 0 auto}

.sub{color:var(--suave);font-size:clamp(16.5px,4.3cqw,19.5px);max-width:60ch}

/* --------------------------------------------------------------- botoes -- */
.btn{
  /* Laranja-fogo, nao o âmbar. Sao papeis diferentes: o âmbar desperta
     apetite e marca o que e importante; o laranja-fogo e a cor de AGIR e
     aparece pouco na pagina, so onde se clica para comprar. Cor de acao que
     se repete em tudo deixa de chamar atencao. */
  --cor:var(--quente);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;
  min-height:54px;                 /* alvo de toque confortavel no dedo */
  border:0;border-radius:999px;
  background:var(--cor);
  /* Texto ESCURO sobre o laranja, nao branco.
     Medido pela regra de contraste (WCAG): branco sobre #ff5722 da 3,16 — abaixo
     do minimo de 4,5 para texto legivel. O mesmo laranja com texto quase-preto
     passa de 5. Mantém a vibracao da cor de acao e fica legivel para quem
     enxerga menos, que e boa parte de quem compra este tipo de produto. */
  color:#280b00;
  font:800 16.5px/1 inherit;
  letter-spacing:-.008em;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  will-change:transform;
  transition:transform var(--t-mola-rapida) var(--mola-rapida),
             box-shadow 260ms ease;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 34px -10px var(--cor);
  touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px) scale(1.022)}
.btn:active{transform:translateY(0) scale(.975)}
.btn:focus-visible{outline:3px solid var(--texto);outline-offset:3px}
.btn--vazio{
  background:transparent;color:var(--texto);
  border:1px solid var(--borda-forte);
  box-shadow:none;
}
.btn--vazio:hover{border-color:var(--destaque);color:var(--destaque)}
.btn--grande{padding:21px 42px;min-height:62px;font-size:18.5px;width:100%}
@container pagina (min-width:600px){.btn--grande{width:auto}}

/* brilho que cruza o botao — puro transform */
.btn__brilho{
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-110%);
  pointer-events:none;
}

/* ----------------------------------------------------------------- topo -- */
#topo{
  min-height:92svh;
  display:flex;align-items:center;
  padding-block:clamp(66px,12cqw,100px) clamp(38px,7cqw,70px);
  overflow:hidden;
}
#topo .env{position:relative;z-index:2}

.topo__selo{
  display:inline-block;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--borda-forte);
  background:rgba(255,176,32,.08);
  color:var(--destaque);
  font:600 13px/1.35 ui-monospace,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;
}
#tituloTopo{margin-bottom:18px;max-width:16ch}

/* Cursor da digitacao. Fica no fim do texto enquanto ele e escrito e some
   quando termina. Anima so a opacidade, que o navegador desenha na placa de
   video — cursor piscando a 2 vezes por segundo durante dois segundos nao
   pode custar quadro nenhum. */
/* Enquanto digita, o balanceamento de linhas fica DESLIGADO.

   "text-wrap: balance" reequilibra a quebra do bloco inteiro toda vez que o
   texto muda. Durante a digitacao isso acontece a cada letra: a linha de cima
   se reorganiza sozinha enquanto voce escreve a de baixo, e da a impressao de
   que o titulo esta mudando de tamanho. O balanceamento volta quando a
   digitacao termina e a classe sai. */
#tituloTopo.digitando{
  text-wrap:normal;
}
/* Uma caixa por linha, cada uma ocupando a largura toda e centrando o proprio
   texto. Como sao blocos irmaos, o que acontece dentro de um nao mexe no
   outro — e o que impede a linha de cima de escorregar quando a de baixo
   comeca a ser escrita. */
#tituloTopo .linhaDigitada{
  display:block;
  width:100%;
  min-height:1em;
  white-space:pre;
}
/* o cursor vive na linha que esta sendo escrita, nao no fim do bloco */
#tituloTopo.digitando::after{ content:none; }
#tituloTopo .linhaDigitada.comCursor::after{
  content:"";
  display:inline-block;
  width:.06em;
  height:.82em;
  margin-left:.06em;
  vertical-align:-.06em;
  background:var(--destaque);
  animation:piscaCursor .42s steps(1) infinite;
}
@keyframes piscaCursor{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  #tituloTopo .linhaDigitada.comCursor::after{ animation:none; opacity:1 }
}
/* SplitText quebra o titulo em pedacos; cada pedaco anima sozinho */
#tituloTopo .linha{overflow:hidden;display:block}
#tituloTopo .palavra{display:inline-block;will-change:transform}
/* ---------------------------------------------------- vidro do subtitulo -- */
/* Efeito de vidro: a camada desfoca e satura o que passa por tras dela, com
   uma borda clara em cima e uma sombra por baixo. O desenho do fundo continua
   se movendo atras — e o movimento visto atraves do vidro que vende o efeito.
   Dose leve de proposito: e um subtitulo, nao um cartao. */
.topo__sub{
  max-width:min(366px,100%);
  margin-top:26px;            /* desceu: era colado no titulo */
  margin-bottom:26px;
  position:relative;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 46%,rgba(255,176,32,.06));
  border:1px solid rgba(255,255,255,.13);
  /* Desfoque forte: o desenho do fundo passa por tras e vira mancha de cor,
     nao linha reconhecivel. E o que separa "vidro" de "camada transparente".
     A saturacao mais alta compensa o que o desfoque tira de vivacidade. */
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),       /* fio de luz na borda de cima */
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 22px 50px -28px rgba(0,0,0,.9);
  color:#cfc6bb;
}
/* Cada linha do subtitulo ganha uma caixa com recorte, para o texto surgir
   de DENTRO dela em vez de aparecer flutuando. E o recorte que faz a subida
   parecer que a linha esta emergindo, nao so deslizando. */
/* Cor própria da frase do topo. O "--fraseTopo" é escrito pelo conteudo.js;
   sem ele, a frase volta à cor comum dos textos de apoio. */
/* O parágrafo do topo é branco. Só o trecho marcado com <b> no conteudo.js
   sai na cor própria — hoje o vermelho.

   "font-weight:inherit" porque a marcação aqui serve para COR, não para
   negrito: sem isso o <b> engrossaria a letra junto e o trecho ficaria com
   dois destaques onde se pediu um. */
.topo__sub{ color:var(--texto); }
.topo__sub b{ color:var(--fraseTopo, var(--texto)); font-weight:inherit; }

/* O texto do vidro ja nasce no tamanho escolhido. Antes esse tamanho vinha
   do arquivo de posicoes depois que a pagina comecava, e dava a impressao
   de as palavras encolherem no fim da entrada. */
#subTopo{font-size:14.5px;}
@media (max-width:520px){
  #subTopo{font-size:14.5px;}
}

.topo__sub .linhaSub{ overflow:hidden; display:block; }

/* reflexo diagonal, bem fraco, que da a impressao de superficie curva */
.topo__sub::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.07) 47%,transparent 60%);
  pointer-events:none;
}
/* navegador sem suporte a desfoque: escurece um pouco para o texto nao sumir */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo__sub{background:rgba(20,23,15,.72)}
}
.topo__acoes{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}
#topo .topo__acoes{display:none}
#previadodia{padding-inline:var(--gut)}
#topoPrevia{width:min(100%,680px);margin:0 auto;text-align:left}
#topoPrevia .dia{margin-top:0}
#topoPrevia .dia__nota{
  /* Fecha o quadro da receita. A nota não vira outra caixa solta: ela é o
     rodapé do mesmo vidro, e os cantos arredondados ficam no contorno externo. */
  box-sizing:border-box;width:100%;max-width:none;
  margin:var(--inicio-nota-movida,14px) auto var(--fim-nota-movida,0px);
  padding:16px clamp(14px,3.6cqw,20px) 18px;
  font-size:clamp(13px,3.6cqw,14.5px);line-height:1.4;text-align:center;
  color:var(--texto);border:0;border-top:1px solid rgba(255,255,192,.28);border-radius:0;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
/* No computador os botoes tem largura natural, mas a caixa deles continuava
   esticada ate a borda da pagina — sobrava um vazio grande a direita, que
   aparecia como contorno solto no modo de edicao. fit-content encolhe a caixa
   ate o tamanho do que esta dentro.
   So a partir de 600px: abaixo disso os botoes ocupam 100% de proposito. */
@container pagina (min-width:600px){
  .topo__acoes{width:fit-content;max-width:100%}
}
.topo__rodape{
  font:500 14.5px/1.6 ui-monospace,Consolas,monospace;
  color:var(--suave);letter-spacing:.01em;
}

/* prato desenhado em SVG — o traco e animado pelo DrawSVG */
.topo__arte{
  position:absolute;
  right:-16%;top:50%;translate:0 -50%;
  width:min(660px,74cqw);
  opacity:.5;
  z-index:1;
  pointer-events:none;
}
.topo__arte path,.topo__arte circle,.topo__arte ellipse{
  fill:none;stroke:var(--destaque);stroke-width:1.15;
  vector-effect:non-scaling-stroke;
}
@container pagina (max-width:820px){
  .topo__arte{right:-32%;top:auto;bottom:-6%;translate:0 0;opacity:.24;width:118cqw}
}

/* particulas do topo (anime.js) */
#poeira{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#poeira i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--destaque);opacity:.32;
  will-change:transform;
}

/* -------------------------------------------------------------- numeros -- */
.numeros{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--borda);
  border-block:1px solid var(--borda);
}
@container pagina (min-width:760px){.numeros{grid-template-columns:repeat(6,1fr)}}
.num{
  background:var(--fundo);
  padding:20px 14px;
  text-align:center;
}
.num__v{
  display:block;
  font:700 clamp(30px,7cqw,44px)/1 ui-monospace,Consolas,monospace;
  color:var(--destaque);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.num__r{
  display:block;margin-top:8px;
  font-size:14px;line-height:1.4;color:var(--suave);
  letter-spacing:.02em;
}

/* ------------------------------------------------------------- problema -- */
/* gap de 10px, e nao 2: vidro precisa de folga.

   O efeito vem da borda de cima pegando luz e da sombra caindo por baixo.
   Encostadas uma na outra, as tres caixas escondem justamente essas duas
   bordas, e o vidro vira um retangulo fosco. */
.problema__lista{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:10px}

/* Vidro, mesma receita do subtitulo do topo em dose menor.

   O desfoque e de 16px, nao 26: sao tres caixas empilhadas, e o borrao que
   fica bem numa caixa sozinha vira peso repetido tres vezes. */
/* Vidro do paragrafo de abertura, acima dos baloes.

   Mesma dose deles: os dois ficam um em cima do outro, e desfoques diferentes
   pareceriam materiais diferentes. Sem a barra laranja da esquerda — ela marca
   item de lista, e aqui e texto corrido. */
#problemaTexto{
  position:relative;
  padding:18px 20px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.022) 46%,rgba(255,176,32,.05));
  border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.05);
  backdrop-filter:blur(16px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 16px 36px -24px rgba(0,0,0,.85);
}
/* Sem o recurso de desfoque, fundo solido: o texto continua legivel. */
@supports not (backdrop-filter: blur(1px)){
  #problemaTexto{ background:var(--papel); }
}

.balao{
  position:relative;
  padding:16px 18px 16px 46px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.022) 46%,rgba(255,176,32,.05));
  border:1px solid rgba(255,255,255,.11);
  border-left:2px solid var(--quente);
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.05);
  backdrop-filter:blur(16px) saturate(170%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),      /* fio de luz na borda de cima */
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 16px 36px -24px rgba(0,0,0,.85);
  font-size:16.5px;
  will-change:transform;
}

/* Sem vidro, o fundo escuro solido volta.

   backdrop-filter e caro: em aparelho fraco ele derruba a rolagem. Onde o
   navegador nao tem o recurso, ou onde a pessoa pediu menos movimento, as
   caixas ficam opacas — o desenho continua de pe, so nao tem o desfoque. */
@supports not (backdrop-filter: blur(1px)){
  .balao{ background:var(--papel); }
}
.balao::before{
  content:"";
  position:absolute;left:20px;top:25px;   /* 2px abaixo: o padding cresceu */
  width:9px;height:2px;background:var(--quente);
}

/* ------------------------------------------------------------ refeicoes -- */
.grade{display:grid;gap:12px;margin-top:30px}
@container pagina (min-width:700px){.grade{grid-template-columns:repeat(2,1fr)}}
@container pagina (min-width:1020px){.grade{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;
  padding:22px 20px 20px;
  background:var(--papel);
  border:1px solid var(--borda);
  border-radius:16px;
  overflow:hidden;
  will-change:transform;
  transition:border-color 300ms ease, transform var(--t-mola) var(--mola);
}
.card:hover{border-color:var(--borda-forte)}
.card__hora{
  font:600 13.5px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--destaque);
}
.card__nome{margin:13px 0 9px;font-size:clamp(20px,5.2cqw,22px);font-weight:660;letter-spacing:-.018em}
.card__ex{color:var(--suave);font-size:16px;margin:0 0 16px}
.card__kcal{
  display:inline-block;
  padding:7px 13px;border-radius:8px;
  background:rgba(255,176,32,.11);
  color:var(--destaque);
  font:600 14.5px/1.2 ui-monospace,Consolas,monospace;
}
/* numero grande de fundo, decorativo */
.card__n{
  position:absolute;right:14px;bottom:-16px;
  font:800 74px/1 ui-monospace,Consolas,monospace;
  color:var(--texto);opacity:.032;
  pointer-events:none;
}

/* --------------------------------------------------------- substituicao -- */
.troca{
  margin-top:28px;
  background:var(--papel);
  border:1px solid var(--borda);
  border-radius:16px;
  padding:clamp(22px,4.4cqw,34px);
  font-family:ui-monospace,Consolas,monospace;
  font-size:15.5px;
  line-height:1.55;
}
.troca__ing{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:14px}
.troca__ing b{font-weight:600}
.troca__kcal{color:var(--destaque);white-space:nowrap}
.troca__linha{
  padding:13px 0 13px 24px;
  border-top:1px dashed var(--borda-forte);
  position:relative;
  color:#93b7e8;
  font-size:15px;
  line-height:1.55;
  font-style:italic;
  /* palavra longa (leite de amendoas, eritritol) nao pode estourar a caixa
     numa tela de 375px */
  overflow-wrap:anywhere;
}
.troca__linha::before{content:"\21B3 ";position:absolute;left:2px;font-style:normal;opacity:.6}
.troca__tipo{color:var(--suave);font-style:normal}
.troca__nota{margin-top:26px;font-size:16px;color:var(--suave);font-family:inherit}

/* -------------------------------------------------------------- um dia -- */
.dia{
  margin-top:30px;
  border:1px solid var(--borda);
  border-radius:18px;
  overflow:hidden;
  background:var(--papel);
}
.dia__topo{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;
  padding:20px clamp(18px,3.4cqw,28px);
  border-bottom:1px solid var(--borda);
  background:rgba(255,176,32,.05);
}
.dia__et{
  font:700 14px/1.2 ui-monospace,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--destaque);
}
.dia__tot{font:700 clamp(16px,4.3cqw,18px)/1.2 ui-monospace,Consolas,monospace;color:var(--texto)}
.dia__corpo{display:grid}
@container pagina (min-width:860px){.dia__corpo{grid-template-columns:repeat(2,1fr)}}

.bloco{padding:clamp(17px,3cqw,24px);border-bottom:1px solid var(--borda)}
.dia__nota{
  margin:18px 0 0;
  font-size:15.5px;line-height:1.55;
  color:var(--suave);
  max-width:62ch;
}
@container pagina (min-width:860px){.bloco:nth-child(odd){border-right:1px solid var(--borda)}}
.bloco__cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
/* propriedades separadas: "inherit" nao vale na forma abreviada de font */
.bloco__nome{font-family:inherit;font-size:16.5px;font-weight:650;line-height:1.3;letter-spacing:.01em}
.bloco__kcal{font:600 14.5px/1.2 ui-monospace,Consolas,monospace;color:var(--destaque);white-space:nowrap}
.bloco__prato{font-size:clamp(18px,4.8cqw,19.5px);font-weight:620;margin-bottom:12px;letter-spacing:-.012em;line-height:1.28}
.bloco__itens{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.bloco__itens li{
  font:400 15px/1.5 ui-monospace,Consolas,monospace;
  color:var(--suave);
  overflow-wrap:anywhere;
  /* recuo pendente: quando o ingrediente quebra em duas linhas, a continuacao
     entra um pouco, e fica claro que nao e um item novo */
  padding-left:15px;
  text-indent:-15px;
}
.bloco__extra{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--borda-forte);
  font-size:14px;line-height:1.4;color:var(--suave);
  /* no celular a pilula quebra em duas linhas em vez de furar a tela */
  white-space:normal;
}
@container pagina (min-width:520px){.pill{white-space:nowrap}}
.pill b{color:var(--texto);font-weight:600}

/* ----------------------------------------------------------- dia livre -- */
#livre{background:linear-gradient(180deg,transparent,rgba(255,87,34,.06),transparent)}
/* Esta regra existe para ser animada pelo CSSRulePlugin. Ele mexe na REGRA,
   nao no elemento — e o unico jeito de animar um ::before, que nao existe
   no documento e por isso nao pode ser selecionado por JavaScript. */
#livre::before{
  content:"";
  position:absolute;left:50%;top:0;
  width:130%;height:100%;
  translate:-50% 0;
  background:radial-gradient(ellipse 50% 40% at 50% 40%, rgba(255,87,34,.15), transparent 70%);
  opacity:0;
  pointer-events:none;
}
#livre .olho{color:var(--quente)}
#livre .olho::before{background:var(--quente)}
.livre__itens{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.livre__item{
  padding:12px 19px;border-radius:999px;
  border:1px solid rgba(255,87,34,.32);
  background:rgba(255,87,34,.08);
  color:#ffcdb8;font-size:16px;line-height:1.4;
  will-change:transform;
}
.moderado{
  margin-top:28px;
  border:1px solid rgba(255,87,34,.36);
  border-radius:16px;
  padding:clamp(22px,4.4cqw,32px);
  background:rgba(255,87,34,.07);
  position:relative;
  overflow:hidden;
}
.moderado__t{
  font:700 13.5px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.18em;color:var(--quente);margin-bottom:14px;
}
.moderado p{margin:0;font-size:clamp(16.5px,4.4cqw,17.5px);line-height:1.6}

/* --------------------------------------------------------------- rigor -- */
.fontes{display:grid;gap:14px;margin-top:26px}
@container pagina (min-width:720px){.fontes{grid-template-columns:repeat(2,1fr)}}
.fonte{
  padding:24px;border:1px solid var(--borda);border-radius:14px;
  background:var(--papel);
}
.fonte__n{font-weight:660;font-size:19px;margin-bottom:8px;letter-spacing:-.012em}
.fonte__d{color:var(--suave);font-size:16px;line-height:1.55}

/* Os dois cartoes de fonte ganham a faixa do titulo com o fio embaixo, igual
   ao topo do cartao da receita (`.dia__topo`) — pedido do Arthur em
   2026-09-01. Sao os mesmos valores de la: fio de 1px na cor da borda e um
   fundo levissimo por tras do nome.

   O recuo sai do cartao e passa para as duas partes. E o que faz o fio
   atravessar de ponta a ponta, e mantem o respiro entre o nome e o texto —
   20px embaixo do nome, 20px em cima da descricao, os mesmos 24px de antes
   divididos entre as duas.

   O `flex:1` na descricao e o que iguala a altura dos dois cartoes: sobrando
   espaco, ele fica com a parte de baixo, e o texto centraliza dentro dela em
   vez de subir e deixar um vazio embaixo do cartao mais curto. */
.fonte{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* O fio fica perto do nome, e nao no meio de uma faixa larga: 20px em cima,
   11px embaixo. A folga que sobrava embaixo fazia os dois cartoes parecerem
   soltos. O espaco entre o fio e a descricao continua sendo os 20px que a
   `.fonte__d` da — a leitura nao apertou, so o fio subiu. */
.fonte__n{
  margin:0;
  padding:20px clamp(18px,3.4cqw,24px) 11px;
  border-bottom:1px solid var(--borda);
  background:rgba(255,176,32,.05);
}
.fonte__d{
  margin:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px clamp(18px,3.4cqw,24px);
}

/* O titulo e o paragrafo do rigor viram cartao, igual aos dois de baixo —
   pedido do Arthur em 2026-08-31. Aqui fica so a caixa; o vidro (fundo,
   borda, desfoque e sombra) vem da mesma linha que veste .card, .fonte e .ent
   no laboratorio.css, para os quatro nunca sairem diferentes.
   Sem desfoque no navegador, o fundo solido entra logo abaixo. */
#rigorTitulo,
#rigorTexto{
  padding:24px;
  border:1px solid var(--borda);
  border-radius:14px;
}
#rigorTexto{ margin-top:14px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #rigorTitulo,#rigorTexto{ background:var(--papel); }
}

/* ------------------------------------------------------------- entrega -- */
.entrega{display:grid;gap:2px;margin-top:30px;background:var(--borda);border:1px solid var(--borda);border-radius:16px;overflow:hidden}
@container pagina (min-width:700px){.entrega{grid-template-columns:repeat(2,1fr)}}
@container pagina (min-width:1020px){.entrega{grid-template-columns:repeat(3,1fr)}}
.ent{background:var(--papel);padding:22px 20px;will-change:transform}
/* estado de partida do Flip: todos os blocos empilhados numa celula so.
   O Flip mede aqui, a classe sai, e ele anima ate a posicao final da grade. */
.entrega--pilha{grid-template-columns:1fr}
.entrega--pilha .ent{grid-area:1/1}
.ent__t{font-weight:660;font-size:18.5px;margin-bottom:8px;letter-spacing:-.012em}
.ent__x{color:var(--suave);font-size:16px;line-height:1.55;margin:0}
.ent__i{
  width:36px;height:36px;margin-bottom:16px;
  border-radius:9px;
  background:rgba(255,176,32,.12);
  display:grid;place-items:center;
  color:var(--destaque);
  font:700 15.5px/1 ui-monospace,Consolas,monospace;
}

/* ----------------------------------------------------------- perguntas -- */
.faq{margin-top:28px;border-top:1px solid var(--borda)}
.faq__i{border-bottom:1px solid var(--borda)}
.faq__b{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;
  background:none;border:0;
  color:var(--texto);
  /* Escrito propriedade por propriedade de proposito. Na forma abreviada
     (font: 620 18px/1.35 inherit) o "inherit" nao vale como familia e o
     navegador joga a linha inteira fora — a pergunta caia para 13,3px. */
  font-family:inherit;
  font-size:clamp(17px,4.4cqw,19px);
  font-weight:620;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  letter-spacing:-.014em;
  padding-block:18px;
}
.faq__b:focus-visible{outline:2px solid var(--destaque);outline-offset:4px}
.faq__mais{
  flex:0 0 auto;width:22px;height:22px;position:relative;
}
.faq__mais::before,.faq__mais::after{
  content:"";position:absolute;left:50%;top:50%;
  width:13px;height:1.6px;background:var(--destaque);
  translate:-50% -50%;
}
.faq__mais::after{rotate:90deg;transition:rotate 320ms var(--mola)}
.faq__i[aberto] .faq__mais::after{rotate:0deg}
.faq__r{overflow:hidden;height:0}
.faq__r p{padding-bottom:24px;margin:0;color:var(--suave);font-size:16.8px;line-height:1.6;max-width:70ch}

/* ---------------------------------------------------------------- ofer -- */
#oferta{text-align:center}
/* A fonte do preco mora na caixa, e nao em cada numero: assim o 97 e o 47
   sao sempre a MESMA letra, que foi o que o Arthur pediu em 2026-09-03. A
   animacao de particulas le a fonte por getComputedStyle de cada elemento,
   entao ela acompanha esta regra sozinha.
   Rozha One escolhida pelo Arthur: mais baixa e mais larga que a Instrument
   Serif — medido, 19% menos alta e 31% mais larga no mesmo tamanho de letra. */
.preco{margin:34px 0 8px;display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;font-family:"Rozha One",Georgia,serif}
/* O 97 usa a fonte mais odiada que existe, e o 47 a fonte boa — pedido do
   Arthur em 2026-09-03. A troca de letra passa a fazer parte da mensagem: o
   preco velho e escrito com a letra que ninguem leva a serio, e o que sobra da
   poeira e o preco novo, em Rozha One.

   A Comic Sans MS e da Microsoft e nao existe em celular Android; a Comic Neue,
   do Google Fonts, entra como reserva para o efeito valer no telefone tambem.

   As particulas acompanham sozinhas: elas leem a fonte de CADA elemento por
   getComputedStyle, entao saem desenhadas em Comic Sans e chegam em Rozha. */
.preco__de{color:var(--suave);text-decoration:line-through;font-size:21px;font-family:"Comic Sans MS","Comic Neue",cursive}
.preco__por{
  /* Mesma tipografia do 97 — pedido do Arthur em 2026-09-03. Antes era
     `font:700 ... ui-monospace` com `letter-spacing:-.035em`: o 47 saía com
     desenho mais fino e espaçamento apertado, diferente do 97, que herda a
     Manrope do corpo em peso 400. Só o tamanho continua maior — família,
     peso, estilo e espaçamento vêm do mesmo texto-base.
     Isto vale para as partículas também: o canvas que desenha a poeira lê a
     fonte por `getComputedStyle`, então acompanha esta regra sozinho. */
  font-family:inherit;
  font-size:clamp(46px,13cqw,80px);
  font-weight:400;
  font-style:normal;
  line-height:1;
  color:var(--destaque);
  letter-spacing:normal;
  text-shadow:0 0 60px rgba(255,176,32,.28);
}
/* A frase da parcela com a mesma letra do 47 — pedido do Arthur em 2026-09-04.
   Ela nao herda a Rozha da caixa .preco: o #ofPar e irmao dessa caixa, nao filho,
   entao a familia precisa estar escrita aqui. */
.preco__par{color:var(--suave);font-size:17px;margin-bottom:32px;font-family:"Rozha One",Georgia,serif;font-weight:400}
.garantia{
  margin:30px auto 0;max-width:52ch;color:var(--suave);
  font-size:16.5px;line-height:1.6;
}
.selos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.selo{
  flex:1 1 0;min-width:0;max-width:none;text-align:center;
  padding:11px 17px;border-radius:999px;border:1px solid var(--borda-forte);
  font:600 14px/1.3 ui-monospace,Consolas,monospace;
  letter-spacing:.04em;color:var(--suave);
}
/* "Acesso imediato e vitalicio" e bem mais comprido que os outros dois — sem
   isso os 3 saiam com larguras bem diferentes. Abaixo de 480px de pagina eles
   empilham em coluna cheia em vez de espremer o texto mais comprido. */
@container pagina (max-width:480px){
  .selos{flex-direction:column;align-items:stretch}
  .selo{flex:none}
}

/* -------------------------------------------------------------- rodape -- */
footer{border-top:1px solid var(--borda);padding-block:46px;color:var(--suave);font-size:16px}
footer .aviso{font-size:14.8px;line-height:1.6;max-width:74ch;margin-top:14px;opacity:.85}

/* --------------------------------------------------------- barra topo --- */
/* ----------------------------------------------------------- fundo ------ */
/* Ocupa a tela inteira e fica atras de tudo. E mais alto que a tela de
   proposito: a sobra e o percurso que ele tem para andar durante a rolagem. */
#fundo{
  position:fixed;
  /* A folga em volta precisa ser MAIOR que o percurso das camadas, senao o
     desenho sai da area e aparece corte na borda.
     Medido: a camada da frente viajava 470px (yPercent -32) com apenas 275px
     de folga (-30vh). Agora sao -55vh de folga vertical, mais folga lateral
     para o deslocamento horizontal da camada da frente. */
  inset:-55vh -14cqw;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.42;
}
#fundo svg{width:100%;height:100%;display:block}
#fundo g{will-change:transform}
#fundo path,#fundo circle,#fundo ellipse{
  fill:none;
  stroke:var(--destaque);
  stroke-width:1.1;
  vector-effect:non-scaling-stroke;
}
#fundoCamadaPerto path,#fundoCamadaPerto circle{stroke:var(--quente);opacity:.5}
/* tudo que e conteudo fica na frente do fundo */
#rolagem-externa{position:relative;z-index:1}
section,.numeros,footer{position:relative}
@media (max-width:859px){#fundo{opacity:.3}}

#barraProgresso{
  position:fixed;left:0;top:0;height:2px;width:100%;
  background:var(--destaque);
  transform:scaleX(0);transform-origin:0 50%;
  z-index:60;
  will-change:transform;
}

/* botao flutuante de compra no celular */
#compraFixa{
  position:fixed;left:14px;right:14px;bottom:14px;
  z-index:55;
  transform:translateY(150%);
  will-change:transform;
}
#compraFixa .btn{width:100%;box-shadow:0 14px 40px -10px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.22) inset}
@media (min-width:860px){#compraFixa{display:none}}
/* ERAM 99px DE RECUO, E VIRARAM 36 EM 2026-09-08. O Arthur mandou a foto do fim
   da pagina com um risco em cima do vazio: *"dei uma rabiscada ai embaixo porque
   ficou um buraco, da uma ajustada para que esse buraco nao apareca"*.

   Os 99px reservavam espaco para a barra de compra nao tapar o aviso legal. So
   que **naquele ponto da pagina a barra ja saiu**: ela entra em `#rigorTitulo` e
   sai em `.preco`, muito antes do rodape. Medido no fim da rolagem, a 391x844:
   o topo da barra fica em y=890, 46px ABAIXO da tela, e os 99px viravam faixa
   vazia de fundo. Os 36px que ficaram sao respiro de rodape, nao reserva. */
@media (max-width:859px){
  footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
  #compraFixa{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* ------------------------------------------------------ estado inicial -- */
/* Elementos que serao animados comecam escondidos, mas SO se o JavaScript
   estiver vivo. Sem essa trava, quem tem JS bloqueado veria pagina vazia. */
.js [data-anima]{opacity:0}
.js [data-anima="sobe"]{transform:translate3d(0,26px,0)}
/* Com a pagina centralizada, entrada pela lateral fica errada: o elemento
   comeca 24px fora do centro e so assenta quando a animacao acaba — e se ela
   nao rodar, ele fica torto para sempre. Centralizado, a entrada certa e por
   baixo, que respeita o eixo. */
.js [data-anima="lado"]{transform:translate3d(0,18px,0)}
.js [data-anima="escala"]{transform:scale(.94)}

/* ===========================================================================
   ESCALA DE CELULAR

   Vale até 520 px de largura de pagina — que e o que aparelhos de tela
   1080x2400 reportam (eles empilham 2,75 a 3 pontos fisicos por ponto de
   pagina, entao 1080 fisicos viram 360 a 393 de pagina).

   Aqui tudo o que e texto ganha um degrau. Na tela grande a leitura acontece
   a 50-60 cm de distancia; no celular, a 30 cm e com a mao balançando, e o
   mesmo tamanho cansa. Os numeros abaixo foram medidos em 320 px, a largura
   mais apertada que ainda existe em aparelho de verdade.
   =========================================================================== */
@container pagina (max-width:520px){
  body{font-size:17.5px;line-height:1.66}

  /* corpo e apoio */
  .sub{font-size:17.5px;line-height:1.6}
  .balao{font-size:17px;line-height:1.55}
  .card__ex{font-size:16.5px}
  .ent__x{font-size:16.5px}
  .fonte__d{font-size:16.5px}
  .faq__r p{font-size:17px}
  .garantia{font-size:17px}
  .moderado p{font-size:17px}
  .troca__nota{font-size:16.5px}
  .dia__nota{font-size:16.5px}
  footer{font-size:16.5px}
  footer .aviso{font-size:15.5px;line-height:1.65}

  /* titulos: um pouco menores para nao estourar, mas ainda dominantes */
  h1{font-size:clamp(36px,9.6cqw,46px);line-height:1.1}
  h2{font-size:clamp(27px,7.4cqw,34px);line-height:1.14}

  /* etiquetas em maiuscula: sobem meio degrau e ganham respiro entre letras */
  .olho{font-size:13.5px;letter-spacing:.14em}
  .topo__selo{font-size:13.5px;letter-spacing:.08em}
  .card__hora{font-size:14px;letter-spacing:.13em}
  .moderado__t{font-size:14px;letter-spacing:.14em}
  .dia__et{font-size:14.5px}

  /* numeros e blocos do cardapio */
  .num__v{font-size:clamp(32px,9cqw,42px)}
  .num__r{font-size:14.5px;line-height:1.4}
  .bloco__nome{font-size:17px}
  .bloco__kcal{font-size:15px}
  .bloco__prato{font-size:18.5px;line-height:1.3}
  .pill{font-size:14.5px;padding:9px 15px}
  .livre__item{font-size:16.5px;padding:13px 20px}
  .selo{font-size:14.5px;padding:12px 18px}
  .troca{font-size:16px}
  .troca__linha{font-size:15.5px;line-height:1.6}
  .topo__rodape{font-size:15px;line-height:1.65}

  /* alvos de toque com folga de sobra para o dedo */
  .btn{min-height:56px;font-size:17px}
  .btn--grande{min-height:60px;font-size:18.5px;padding:20px 32px}
  .faq__b{font-size:17.5px;padding-block:20px}
}

/* Telas muito estreitas: o titulo desce mais um degrau para nao quebrar feio */
@container pagina (max-width:360px){
  h1{font-size:clamp(32px,9cqw,38px)}
  h2{font-size:clamp(25px,7cqw,30px)}
  .preco__por{font-size:clamp(42px,12.5cqw,56px)}
}



/* ===========================================================================
   TUDO CENTRALIZADO

   Nao basta text-align:center. Cada caixa tambem precisa ir para o meio, senao
   o texto centraliza dentro de um bloco que continua colado na esquerda.
   Por isso, junto do alinhamento, vem margin-inline:auto nos blocos com
   largura maxima e justify-content:center no que e flex.
   =========================================================================== */

section,
.numeros,
footer{ text-align:center; }

/* blocos com largura maxima param no meio, nao na esquerda */
.sub,
.troca__nota,
.dia__nota,
.garantia,
footer p,
footer .aviso{ margin-inline:auto; }

/* Rotulo de secao: tinha um tracinho so a ESQUERDA do texto. Alinhado a
   esquerda isso funciona como marca de inicio; centralizado, empurra o texto
   e o conjunto parece torto mesmo estando matematicamente no meio.
   Solucao: tracinho dos dois lados. Simetria resolve o que o calculo nao. */
/* De inline-flex para flex de largura total: como elemento em linha ele
   dependia da heranca de text-align e ficava 24px fora do centro. Como bloco,
   o proprio flex resolve o alinhamento e o resultado nao depende de heranca. */
.olho{ display:flex; justify-content:center; width:100%; }
.olho::after{
  content:""; width:22px; height:1px; flex:0 0 auto;
  background:var(--destaque); opacity:.65;
}

/* item de lista: vira bloco comum, sem marcador que desloque o conteudo */
.balao{ display:block; list-style:none; width:100%; }

/* topo */
.topo__acoes{ justify-content:center; }
@container pagina (min-width:600px){ .topo__acoes{ margin-inline:auto; } }
#tituloTopo{ margin-inline:auto; }
.topo__sub{ margin-inline:auto; text-align:center; }

/* lista do problema: o tracinho sai da esquerda e vira separador em cima.

   A borda solida de cima saiu junto com a chegada do vidro. Ela existia para
   separar caixas encostadas; agora ha 10px de folga entre elas, e uma linha
   opaca atravessando um vidro so denuncia que ele e falso. O raio e repetido
   aqui porque esta regra vem depois e ganharia da outra. */
.balao{
  padding:16px 18px;
  border-left:2px solid var(--quente);
  border-top:0;
  border-radius:14px;
}
.balao::before{
  position:static; display:block; margin:0 auto 9px; width:16px; height:2px;
}

/* cartoes de refeicao */
.card__nome,.card__ex{ margin-inline:auto; }
.card__n{ left:0; right:0; }

/* caixa de substituicao: o ingrediente e as calorias empilham centralizados */
.troca__ing{ justify-content:center; text-align:center; }
.troca__linha{ padding-left:0; padding-right:0; text-align:center; }
.troca__linha::before{ position:static; margin-right:6px; }

/* quadro do dia */
.dia__topo{ justify-content:center; gap:10px 22px; }
.bloco__cab{ justify-content:center; gap:14px; }
.bloco__extra{ justify-content:center; }
.bloco__itens li{ padding-left:0; text-indent:0; }

/* dia livre */
.livre__itens{ justify-content:center; }

/* fontes e entrega */
.ent__i{ margin-inline:auto; }

/* perguntas: o titulo centraliza, o sinal de mais fica ao lado */
.faq__b{ justify-content:center; gap:12px; text-align:center; }
.faq__r p{ margin-inline:auto; }

/* rodape */
footer{ display:block; }

/* -------------------------------------------------- quem pediu silencio -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-anima]{opacity:1 !important;transform:none !important}
  #poeira,.topo__arte{display:none}
}


/* ------------------------------------------------ vidro no telefone alto --
   Desfoque menor nesses aparelhos: ele custa caro na rolagem e, a essa
   largura, quase nao se ve.

   Esta regra mora no fim do arquivo de proposito. Ela precisa vir DEPOIS da
   que define o vidro cheio — em CSS, entre regras de mesmo peso, ganha a
   ultima. Escrita junto das outras regras de telefone, la em cima, ela perdia
   calada. */
/* So a largura, sem a proporcao.

   A proporcao existia para separar telefone alto de tablet em pe. Ela nao
   serve aqui: quem responde agora e a MOLDURA da pagina, que tem 393px de
   largura por sete mil de altura — proporcao nenhuma parecida com a de uma
   tela. E a largura ja resolve: 430px ou menos e telefone; tablet em pe
   comeca em 768. */
@container pagina (max-width:430px){
  /* O paragrafo de abertura entra junto com os baloes.
     Eles ficam um em cima do outro na mesma secao: se so um aliviasse o
     desfoque no telefone, os dois passariam a parecer materiais diferentes. */
  .balao,
  #problemaTexto{
    -webkit-backdrop-filter:blur(9px) saturate(150%);
    backdrop-filter:blur(9px) saturate(150%);
  }
}

/* -------------------------------------------------------- leitura no sol --
   Fundo claro e caixas quase opacas seguram o contraste quando a tela recebe
   reflexo direto. Os traços decorativos continuam, mas bem mais discretos. */
#fundo{opacity:.12}
.topo__arte{opacity:.14}
#poeira{display:none}
.topo__sub,
#problemaTexto,
.balao{
  background:rgba(255,253,248,.94);
  border-color:var(--borda-forte);
  color:var(--texto);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 10px 24px -18px rgba(48,35,22,.38);
}
.topo__sub::before{opacity:.22}
.btn{color:#fff;text-shadow:none}
.btn--vazio{color:var(--texto)}
#livre .moderado{background:#fff1e9;color:#4c1a08;border-color:#cf9a7c}