/* ═══════════════════════════════════════════════════
   LUME by Lexy — Atelier Olfativo
   Identidade preservada. Layout reconstruído.
   ═══════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────── */
:root {
  /* Paleta da marca — inalterada */
  --linho:      #F9F6F0;
  --espresso:   #2A2421;
  --ouro:       #B8996E;
  --ouro-forte: #A3835A;
  --borda:      #E5E0D8;
  --areia:      #EBE7E0;
  --noite:      #221F1C;

  /* Dourado escurecido, exclusivo para TEXTO sobre fundo claro.
     O #B8996E da marca dá 2,49:1 sobre o linho — reprova em AA até como
     texto grande. Este tom é o mesmo matiz, medido a 5,45:1 sobre o linho
     e 4,77:1 sobre o areia (o fundo mais exigente da página).
     O dourado da marca segue intacto em filetes, bordas, marcadores e
     em texto sobre fundo escuro, onde mede 5,70:1. */
  --ouro-texto: #7E5F34;

  /* único vermelho da página, só para erro de formulário.
     Mede 5,3:1 sobre o linho. */
  /* As mesmas cores em canais, para as versoes com opacidade.
     Sem isto, mudar um hex acima deixaria para tras as dezenas de
     rgba() escritas a mao, que continuariam na cor antiga. */
  --espresso-rgb: 42 36 33;
  --linho-rgb: 249 246 240;
  --noite-rgb: 34 31 28;
  --ouro-rgb: 184 153 110;
  --areia-rgb: 235 231 224;

  --erro: #8C3A2A;

  /* Tipografia: ver o bloco Tipografia logo abaixo deste */

  /* Escala de espaço */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4.5rem;
  --e9: 7rem;    --e10: 10rem;

  /* Medida de linha. Cuidado com a unidade: ch é a largura do "0",
     que na Lora tem .62em, enquanto o caractere médio em português
     tem .48em. Por isso 54ch rende ~70 caracteres por linha, e não
     54. O alvo de leitura é 60 a 75 caracteres.                   */
  --medida: 54ch;
  --medida-curta: 46ch;

  --margem: clamp(1.25rem, 5vw, 5rem);
  --largura: 82rem;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-cortina: cubic-bezier(.65, 0, .35, 1);
  --altura-cabecalho: 4.75rem;
}


/* ══ Tipografia ═══════════════════════════════════════
   Sistema 3 — Minimalismo Nórdico. Tenor Sans no display e na
   interface, Lora no corpo e nos itálicos.

   Uma restrição a saber antes de mexer aqui: Tenor Sans existe
   só em peso 400 e não tem itálico. Então a hierarquia da
   interface não pode se apoiar em peso — ela vem de tamanho,
   espessura de filete, cor e opacidade. E todo itálico da
   página é da Lora, que tem itálico desenhado; pedir itálico à
   Tenor Sans faria o navegador inclinar o desenho na marra.

   Tenor Sans também é ~27% mais larga que a Cormorant no mesmo
   corpo, e é daí que sai a caixa de display menor abaixo.     */
:root {
  --f-display: "Tenor Sans", Optima, Candara, sans-serif;
  --w-h1: 400;  --w-h2: 400;  --i-h2: normal;
  --f-h3: "Lora", Georgia, serif;
  --w-h3: 400;  --i-h3: italic;
  --f-rotulo: "Tenor Sans", Optima, Candara, sans-serif;  --w-rotulo: 400;
  --f-corpo:  "Lora", Georgia, serif;                     --w-corpo: 400;
  --f-ui:     "Tenor Sans", Optima, Candara, sans-serif;  --w-ui: 400;
  /* A Tenor Sans tem um arquivo so, entao pedir font-weight maior nela
     nao muda nada: media igual em 400, 500, 600 e 700, e o botao saia
     com o mesmo traco do link ao lado. O peso do rotulo de acao vem de
     um contorno na propria letra, que engrossa o traco de verdade e em
     fracao de pixel, sem o borrao do negrito sintetico. */
  --traco-acao: .32px;

  /* calibrado pela largura medida da Tenor Sans para o título
     fechar em duas linhas no desktop e em 375px */
  --h1-min: 2.15rem;  --h1-vw: 5vw;  --h1-max: 4.25rem;

  /* apelidos: as regras antigas da página apontam para estes */
  --serif: var(--f-display);
  --sans:  var(--f-corpo);
}

/* ── Reset ─────────────────────────────────────────── */
html { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* No toque o navegador espera 300ms para saber se vem um duplo toque,
   e desenha um retangulo cinza no elemento tocado. Nenhum dos dois
   serve aqui: a pagina nao tem zoom por duplo toque, e o retorno ja
   vem do proprio estado do controle. */
a, button, label, summary, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(var(--ouro-rgb) / .18);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
  -webkit-text-size-adjust: 100%;
  /* Sem overflow-x aqui, e sem no body. Já tentei os dois e os dois
     travam a rolagem vertical da página: 'clip' num eixo com o outro
     implícito computa para 'clip visible', e o Chrome deixa a raiz sem
     rolagem nenhuma. O transbordo lateral que existia vinha da pista
     dos aromas, e está contido lá, com position: relative. Quem cortar
     aqui de novo vai travar a página inteira. */
}

/* text-wrap: pretty tira a palavra órfã na última linha do parágrafo.
   Nos títulos usamos balance, que equilibra as linhas entre si.     */
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

body {
  background: var(--linho);
  color: var(--espresso);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* o corte lateral fica so no html. Repetir aqui faz o body virar
     caixa de corte por cima da raiz e a pagina para de rolar. */
}

/* Precisa vir com !important: as classes abaixo declaram display: flex,
   que tem especificidade maior que o [hidden] { display: none } do
   navegador — sem isto, o atributo hidden é simplesmente ignorado. */
[hidden] { display: none !important; }

img, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* ── Superfícies do navegador ──────────────────────── */
::selection { background: var(--ouro); color: var(--noite); }

:root { scrollbar-color: var(--ouro) var(--areia); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--areia); }
::-webkit-scrollbar-thumb { background: var(--ouro); border: 3px solid var(--areia); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ouro-forte); }

:focus-visible {
  outline: 2px solid var(--ouro-forte);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Alvo de âncora recebe foco por programação; não deve piscar anel. */
[tabindex="-1"]:focus { outline: none; }

input { caret-color: var(--ouro-forte); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: fixed; top: var(--e3); left: var(--e3); z-index: 200;
  background: var(--espresso); color: var(--linho);
  padding: var(--e3) var(--e5); border-radius: 999px;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-150%); transition: transform .3s var(--curva);
}
.pular:focus-visible { transform: translateY(0); }

/* ── Tipografia ────────────────────────────────────── */
h1, h2 { font-family: var(--f-display); line-height: 1.08; }
h3 { line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); letter-spacing: -.02em; }
/* O h2 batia em 4.25rem, o mesmo teto do h1 depois que a caixa de
   display encolheu para a Tenor Sans. Dois níveis no mesmo tamanho
   não são dois níveis. Passo de 1,42x abaixo do h1.              */
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.01em; }
p  { max-width: 68ch; }

/* ── Botões ────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  /* A caixa de fonte da Tenor Sans reserva altura para descidas de
     letra, e caixa alta nao tem nenhuma: centrar a caixa de linha
     deixa as letras 2px acima do meio da pilula. O ajuste desce o
     texto por metade desse vao, sem mudar a altura do botao. */
  --ajuste-optico: .0975em;
  padding: calc(.95rem + var(--ajuste-optico)) 1.9rem calc(.95rem - var(--ajuste-optico));
  border-radius: 999px;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  /* O espacamento entre letras tambem entra depois da ultima letra,
     e esse rabo conta na hora de centralizar: o texto acaba parando
     um espaco a esquerda do meio. O recuo de primeira linha, do mesmo
     tamanho, devolve o texto ao centro optico. */
  text-indent: .22em;
  text-decoration: none; white-space: nowrap;
  transition: background .45s var(--curva), color .45s var(--curva),
              border-color .45s var(--curva), transform .2s var(--curva);
}
.botao:active { transform: translateY(1px); }

.botao--ouro { background: var(--ouro); color: var(--noite); }
.botao--ouro:hover { background: var(--espresso); color: var(--linho); }

.botao--envio {
  width: 100%; background: var(--espresso); color: var(--linho);
  padding: calc(1.15rem + var(--ajuste-optico)) 2rem calc(1.15rem - var(--ajuste-optico));
  letter-spacing: .2em; text-indent: .2em;
}
.botao--envio:hover { background: var(--ouro); color: var(--noite); }

/* ── Cabeçalho ─────────────────────────────────────── */
.cabecalho {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--altura-cabecalho);
  display: flex; align-items: center; gap: var(--e6);
  padding: 0 var(--margem);
  background: transparent;
  transition: background .5s var(--curva), border-color .5s var(--curva);
  border-bottom: 1px solid transparent;
}
.cabecalho.is-fixo {
  background: rgb(var(--linho-rgb) / .92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--borda);
}
.cabecalho.is-escuro { color: var(--linho); }
.cabecalho.is-escuro.is-fixo {
  background: rgb(var(--noite-rgb) / .88); border-bottom-color: rgb(var(--linho-rgb) / .12);
}

/* Desktop: LUME e "by Lexy" na mesma linha, alinhados pela base.
   Abaixo de 62rem volta a empilhar (bloco de adaptação).
   padding-block no lugar de min-height: cresce o alvo de clique
   simetricamente, então o texto fica centrado na altura do cabeçalho. */
.logo { display: flex; align-items: baseline; gap: .4rem; text-decoration: none; margin-right: auto; padding-block: .6rem; }
.logo__lume { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .3em; line-height: 1; }
.logo__lexy {
  font-size: .6875rem; font-weight: 500; letter-spacing: .4em;
  text-transform: uppercase; color: var(--ouro-texto); padding-left: .15em;
}
.cabecalho.is-escuro .logo__lexy { color: var(--ouro); }

.cabecalho__nav { display: flex; gap: var(--e5); }
.cabecalho__nav a {
  font-size: .6875rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; padding: .8rem 0;
  position: relative; opacity: .78; transition: opacity .3s;
}
.cabecalho__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .6rem;
  height: 1px; background: var(--ouro); transition: right .4s var(--curva);
}
.cabecalho__nav a:hover { opacity: 1; }
.cabecalho__nav a:hover::after { right: 0; }
/* Seção atual: reaproveita o mesmo filete do hover, então não entra
   vocabulário novo só para marcar posição. */
.cabecalho__nav a[aria-current="true"] { opacity: 1; }
.cabecalho__nav a[aria-current="true"]::after { right: 0; background: var(--ouro); }

.menu-alterna { display: none; width: 2.75rem; height: 2.75rem; position: relative; margin-right: -.5rem; }
.menu-alterna__risco,
.menu-alterna__risco::before,
.menu-alterna__risco::after {
  position: absolute; left: 50%; width: 1.35rem; height: 1px;
  background: currentColor; transform: translateX(-50%); transition: transform .35s var(--curva), opacity .2s;
}
.menu-alterna__risco { top: 50%; margin-top: -.5px; }
.menu-alterna__risco::before { content: ""; top: -.4rem; }
.menu-alterna__risco::after  { content: ""; top:  .4rem; }
.menu-alterna[aria-expanded="true"] .menu-alterna__risco { background: transparent; }
.menu-alterna[aria-expanded="true"] .menu-alterna__risco::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.menu-alterna[aria-expanded="true"] .menu-alterna__risco::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

.menu-movel {
  position: fixed; inset: var(--altura-cabecalho) 0 auto; z-index: 99;
  background: var(--linho); border-bottom: 1px solid var(--borda);
  padding: var(--e4) var(--margem) var(--e5);
  display: flex; flex-direction: column; gap: var(--e4);
}
/* Era um painel de 1.75rem com filete debaixo de cada item, ocupando
   quase toda a tela: cinco secoes viravam cinco titulos. Menu nao e
   conteudo, e atalho. Sem filete e em corpo de interface ele cabe
   inteiro no alto e devolve a pagina atras dele.                  */
.menu-movel nav { display: flex; flex-direction: column; }
.menu-movel nav a {
  font-size: 1rem; letter-spacing: .04em; text-decoration: none;
  padding: .6875rem 0;
}
.menu-movel .botao { align-self: flex-start; }

/* ── Abertura ──────────────────────────────────────── */
.abertura {
  position: relative;
  min-height: 100svh; background: var(--noite); color: var(--linho);
  display: grid; place-content: center; text-align: center;
  padding: var(--e8) var(--margem) var(--e9);
}
.abertura__marca {
  --saida: 0;
  display: flex; flex-direction: column; align-items: center;
  /* Sobe, encolhe e apaga conforme a abertura sai, como se fosse
     assentar no lugar do logotipo do cabecalho. A origem no topo faz
     o encolhimento puxar para cima em vez de para o centro. */
  transform-origin: 50% 0;
  transform: translateY(calc(var(--saida) * -20vh))
             scale(calc(1 - var(--saida) * .58));
  opacity: calc(1 - var(--saida) * 1.25);
  will-change: transform, opacity;
}

/* O logotipo do cabecalho entra quando a marca do meio ja saiu. */
.cabecalho .logo {
  transition: opacity .55s var(--curva), transform .55s var(--curva);
}
.cabecalho.is-abertura .logo {
  opacity: 0; transform: translateY(-.5rem); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .abertura__marca { transform: none; opacity: 1; }
  .cabecalho .logo { transition: none; }
  .cabecalho.is-abertura .logo { opacity: 1; transform: none; pointer-events: auto; }
}
.abertura__lume {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 17vw, 11rem); line-height: .9;
  letter-spacing: .3em; padding-left: .3em;
  animation: revelar 1.6s var(--curva) both;
}
.abertura__lexy {
  /* piso de 11px: abaixo disso o rotulo nao e mais legivel em tela pequena */
  font-size: clamp(.6875rem, 2.1vw, 1.35rem);
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  letter-spacing: .6em; text-transform: uppercase; color: var(--ouro);
  margin-top: clamp(1rem, 2.4vw, 2rem); padding-left: .6em;
  animation: revelar 1.6s var(--curva) .45s both;
}
.deslize {
  position: absolute; left: 50%; bottom: clamp(2rem, 6vh, 3.5rem);
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  animation: revelar 1.4s var(--curva) 1.2s both;
}
.deslize__texto {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgb(var(--linho-rgb) / .5);
  white-space: nowrap;
}
.deslize__fio {
  width: 1px; height: 2.5rem;
  background: linear-gradient(to bottom, rgb(var(--ouro-rgb) / .6), transparent);
}

@keyframes revelar {
  from { opacity: 0; filter: blur(14px); transform: translateY(1.25rem); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

/* ── Palco ─────────────────────────────────────────
   Divisão assimétrica 7/5 dentro da mesma caixa do resto da página.
   A direção de leitura vem da proporção desigual entre as colunas,
   não de sangrar o vídeo na borda: com a margem esquerda crescendo
   junto com a tela, sangrar só a direita deixava a seção torta em
   monitor largo. Margem igual dos dois lados, assimetria mantida.

   O texto vive no linho ao lado do filme, nunca por cima dele:
   escurecer footage para caber texto e o atalho que deixa as duas
   coisas mediocres ao mesmo tempo.                                */
.palco {
  min-height: 100svh;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  padding: calc(var(--altura-cabecalho) + var(--e7)) var(--margem) var(--e7);
  max-width: var(--largura); margin-inline: auto;
}

/* ── Título ────────────────────────────────────────
   Caixa mista, não versal. Tenor Sans já tem maiúsculas altas e
   generosas; versalizar o título inteiro com tracking positivo em
   cima disso vira letreiro, e gasta o único momento de display da
   página no arranjo mais tímido possível.

   Tracking negativo porque a métrica da fonte foi desenhada para
   tamanho de leitura e fica frouxa nesta escala. Entrelinha 1,
   porque display grande com entrelinha de corpo boia solto.       */
.palco__titulo {
  font-family: var(--serif);
  font-size: clamp(var(--h1-min), var(--h1-vw), var(--h1-max));
  line-height: 1; letter-spacing: -.02em;
}
/* Tenor Sans não tem itálico: a palavra de destaque se separa pela
   cor, não pela inclinação. Inclinar aqui seria oblíquo sintético. */
.palco__titulo em { font-style: normal; color: var(--ouro-texto); }

/* A máscara corta a linha para ela subir de trás do nada. O padding
   com margem negativa devolve espaço para as descendentes do "p" e
   os acentos, que a máscara cortaria rente.                        */
.linha_mascara {
  display: block; overflow: hidden;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.linha_mascara > span { display: block; }

.palco__linha {
  margin-top: var(--e5); max-width: 42ch;
  font-size: clamp(1rem, 1.3vw, 1.125rem); color: rgb(var(--espresso-rgb) / .72);
}

/* ── Elos: o CTA é um link sublinhado, não uma pílula ──
   Os dois têm exatamente o mesmo corpo e o mesmo filete. Filete
   grosso num e fino no outro fazia o par ler como aba selecionada,
   com o primeiro parecendo já escolhido — que é leitura de estado,
   não de hierarquia.

   Como Tenor Sans só tem um peso, a diferença vem de três coisas
   que não sugerem estado: a seta, que só o primário tem e que só
   ação carrega; a opacidade do secundário; e a cor do filete que
   varre no hover, dourada no primário e espresso no secundário. */
.palco__acoes { display: flex; flex-wrap: wrap; gap: var(--e6); margin-top: var(--e6); }

.elo {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  /* O link tinha 26px de altura, abaixo do mínimo de 44px para toque.
     O padding cresce a caixa clicável para cima e a margem negativa
     desfaz o deslocamento, então o texto e o filete não saem do lugar:
     o alvo fica maior sem que nada se mexa na tela. */
  padding-top: 18px; margin-top: -18px;
  padding-bottom: .5rem;
  font-size: .6875rem; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; color: var(--espresso);
}
.elo::before, .elo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
}
.elo::before { background: var(--borda); }
.elo::after {
  background: var(--espresso);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--curva);
}
.elo:hover::after, .elo:focus-visible::after { transform: scaleX(1); }

.elo__seta { flex: none; width: .8em; height: .8em; }
.elo__seta svg { width: 100%; height: 100%; display: block; }

.elo--forte::before { background: var(--espresso); }
.elo--forte::after  { background: var(--ouro); }
.elo--forte .elo__seta { transition: transform .4s var(--curva); }
.elo--forte:hover .elo__seta,
.elo--forte:focus-visible .elo__seta { transform: translateX(.3rem); }

/* .62 reprovava em AA num texto de 11px; .68 mede 5,18:1 sobre o linho */
.elo:not(.elo--forte) { opacity: .68; transition: opacity .4s var(--curva); }
.elo:not(.elo--forte):hover, .elo:not(.elo--forte):focus-visible { opacity: 1; }

/* ── Fatos: o preço aparece no primeiro viewport ─────
   Filetes de meio pixel entre os itens no lugar de espaço solto — é
   o que transforma três dados avulsos numa faixa de metadados.     */
.palco__fatos {
  display: flex; flex-wrap: wrap; max-width: 36rem;
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}
.palco__fatos > div { padding-right: var(--e6); }
.palco__fatos > div + div {
  padding-left: var(--e6); border-left: 1px solid var(--borda);
}
.palco__fatos dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro-texto);
}
.palco__fatos dd { font-family: var(--serif); font-size: 1.75rem; margin-top: .2rem; }

/* ── O filme ────────────────────────────────────────
   Sem moldura. A altura é limitada pelo viewport para o bloco não
   estourar a tela em monitor largo, e o object-fit cobre o resto.  */
.palco__filme { position: relative; margin: 0; }
.palco__cortina {
  overflow: hidden;
  height: min(calc(100svh - var(--altura-cabecalho) - var(--e9)), 40rem);
  background: var(--noite);
}
.palco__video { width: 100%; height: 100%; object-fit: cover; }
.palco__filme figcaption {
  margin-top: var(--e3);
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgb(var(--espresso-rgb) / .5);
}

/* ── Entrada do palco ──────────────────────────────
   entrada-hero + reveal-linha-manual + imagem-cortina, da biblioteca
   de animações, escritas no idioma que a página já usa
   (IntersectionObserver + transição CSS) em vez de GSAP — a página
   não carrega GSAP, e dois sistemas de movimento em paralelo é
   exatamente o que faz a biblioteca perder o valor.

   As duas classes entram por JS. Sem JS, com prefers-reduced-motion
   ou sem IntersectionObserver, nada disso é aplicado e a seção nasce
   inteira e visível — movimento é acabamento, não estrutura.       */
.palco--anima .palco__linha,
.palco--anima .palco__acoes,
.palco--anima .palco__fatos,
.palco--anima .palco__filme figcaption { opacity: 0; transform: translateY(1.5rem); }
.palco--anima .linha_mascara > span { transform: translateY(105%); }
.palco--anima .palco__cortina { clip-path: inset(100% 0 0 0); }
/* a mídia caminha ao contrário da cortina: sem isso vira persiana,
   com isso vira profundidade */
.palco--anima .palco__video { transform: translateY(18%); }

.palco--entra .palco__linha,
.palco--entra .palco__acoes,
.palco--entra .palco__fatos,
.palco--entra .palco__filme figcaption {
  opacity: 1; transform: none;
  transition: opacity .8s var(--curva), transform .9s var(--curva);
}
.palco--entra .linha_mascara > span {
  transform: none; transition: transform 1s var(--curva);
}
.palco--entra .palco__cortina,
.palco--entra .palco__video {
  transition: clip-path 1.3s var(--curva-cortina), transform 1.3s var(--curva-cortina);
}
.palco--entra .palco__cortina { clip-path: inset(0 0 0 0); }
.palco--entra .palco__video { transform: none; }

/* Coreografia. A mídia abre primeiro, o título sobe por cima dela e
   o apoio entra por último — entrada sempre mais lenta que saída.  */
.palco--entra .linha_mascara:nth-child(1) > span  { transition-delay: .18s; }
.palco--entra .linha_mascara:nth-child(2) > span  { transition-delay: .28s; }
.palco--entra .palco__linha                       { transition-delay: .46s; }
.palco--entra .palco__acoes                       { transition-delay: .56s; }
.palco--entra .palco__fatos                       { transition-delay: .66s; }
.palco--entra .palco__filme figcaption            { transition-delay: .80s; }

/* ── Blocos de seção ───────────────────────────────── */
.essencia, .atelier, .rituais, .duvidas {
  padding: clamp(5rem, 12vw, 10rem) var(--margem);
}
.aromas { background: var(--areia); }
.rituais { background: var(--espresso); color: var(--linho); }

/* ── A essência ────────────────────────────────────
   O que estava solto aqui eram três coisas: a foto com canto em
   arco (a página inteira não tem raio em lugar nenhum), um círculo
   dourado decorativo flutuando com z-index negativo, e os três
   atributos como grade de três colunas sem relação com o resto.

   Agora a foto é reta, o círculo saiu, e os atributos usam o mesmo
   vocabulário de filete vertical da faixa de fatos do palco — é a
   repetição que faz parecer sistema em vez de peça avulsa.       */
.essencia {
  display: grid; gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  max-width: var(--largura); margin-inline: auto;
}
.essencia__figura { grid-column: 1; margin: 0; }
.essencia__figura img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  background: var(--areia);
}
.essencia__texto { grid-column: 2; }
.essencia__texto h2 { margin-bottom: var(--e6); }
/* Era um bloco grande em italico com filete dourado a esquerda, ou
   seja, uma citacao destacada. Citacao destacada mais titulo mais
   paragrafo e a receita de post de blog, e nao e o que esta secao e:
   o conteudo dela e a ficha do material. A abertura vira uma linha de
   apoio do titulo, e quem carrega a secao passa a ser a lista. */
.essencia__abre {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6; color: rgb(var(--espresso-rgb) / .78);
  max-width: 42ch; margin-bottom: var(--e7);
}
.essencia__texto p + p { margin-top: var(--e4); color: rgb(var(--espresso-rgb) / .78); max-width: 56ch; }

/* Era flex-wrap com filete no irmao seguinte. Quando a coluna
   apertava, o terceiro atributo caia para a linha de baixo mas
   continuava sendo "irmao seguinte", entao herdava o filete e o
   recuo e aparecia deslocado para dentro, como se fosse filho do
   primeiro. Grade de tres colunas fixas nunca quebra linha, e o
   filete passa a depender da posicao na grade, nao da ordem. */
/* Tres colunas ao lado de uma foto 4:5 deixavam a coluna de texto
   curta e a foto sobrando embaixo. Em linhas, a ficha acompanha a
   altura da foto e repete o vocabulario da faixa de fatos do palco,
   termo a esquerda e valor a direita separados por filete: e a
   repeticao que faz parecer sistema em vez de peca avulsa. */
.atributos { display: grid; }
.atributo {
  display: grid; grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--e5); align-items: baseline;
  padding-block: var(--e5);
  border-top: 1px solid var(--borda);
}
.atributo:last-child { border-bottom: 1px solid var(--borda); }
/* "A queima" pedia 146px a 2rem e a coluna mais estreita da secao
   tem 138px: acima de 1600px a margem lateral cresce com a vw e a
   coluna encolhe, entao era justamente na tela grande que o termo
   quebrava em duas linhas. Teto de 1.75rem resolve na origem, com
   folga em vez de encaixe no limite. */
.atributo dt {
  font-family: var(--serif); font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.1; color: var(--espresso);
}
/* Sao frases agora, nao rotulos: 12px em 18ch quebrava em quatro
   linhas numa coluna de 129px. Corpo maior, medida maior e sem o
   letter-spacing de rotulo, que atrapalha leitura corrida. */
.atributo dd {
  font-size: .9375rem; line-height: 1.6;
  color: rgb(var(--espresso-rgb) / .72); max-width: 34ch;
}

/* ── Aromas: panorama horizontal ────────────────────
   A rolagem vertical vira deslocamento horizontal enquanto a seção
   fica grudada na tela. É o único momento da página em que o scroll
   muda de eixo, e existe por um motivo: dez aromas numa grade viram
   uma parede que se lê de uma vez só e não se lembra de nenhum. Em
   fila, cada um chega sozinho e ocupa o seu instante.

   Feito com `animation-timeline` nativo, sem biblioteca e sem uma
   linha de JS. Isso não é purismo: ouvir `scroll` no JS roda a cada
   quadro e engasga no celular, e a linha do tempo nativa corre fora
   da thread principal.

   Onde o navegador não suporta — e no celular, e com movimento
   reduzido — a mesma pista vira um carrossel que se arrasta com o
   dedo. A degradação é o idioma nativo do toque, não uma versão
   pior.                                                            */

.aromas { background: var(--areia); padding: 0; }

/* Altura extra = distância de rolagem que alimenta a corrida lateral.
   Ela controla o ritmo, não o alcance: a animação sempre termina no
   fim do trecho grudado, qualquer que seja a altura. */
.aromas__palco {
  min-height: 100svh;
  display: grid; align-content: center; gap: var(--e7);
  padding-block: clamp(4rem, 10vw, 7rem);
  overflow: clip;
}

.aromas__cabeca {
  max-width: var(--largura); width: 100%;
  margin: 0 auto; padding-inline: var(--margem);
}
.aromas__cabeca p {
  margin-top: var(--e4); font-size: 1.1rem;
  color: rgb(var(--espresso-rgb) / .72); max-width: var(--medida);
}

/* A medida de percurso é o mesmo filete do resto da página, aqui
   fazendo trabalho: diz quanto da fila já passou. */
/* Só aparece quando existe percurso para medir. No carrossel de
   toque ela ficaria congelada em scaleX(0), um filete morto. */
.aromas__medida { display: none; }
.aromas__corrida {
  display: block; height: 100%; background: var(--ouro);
  transform: scaleX(0); transform-origin: left;
}

/* O trilho começa alinhado com a margem da página e corre para fora
   da direita. O corte à direita é a própria promessa de que há mais. */
.aromas__trilho {
  padding-left: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  /* proximity, nao mandatory: com mandatory um arrasto curto que nao
     cruza o limiar volta para o mesmo cartao, e o carrossel parece
     travado. proximity so encaixa quando o dedo ja parou perto. */
  scroll-snap-type: x proximity;
  /* pan-y entrega o gesto horizontal para o JS e devolve o vertical
     para a pagina: arrastar de lado move a fila, arrastar para baixo
     rola a pagina */
  touch-action: pan-y;
  cursor: grab;
  /* sem isto o snap cola o primeiro cartão na borda da tela, fora do
     alinhamento com a margem do resto da página */
  scroll-padding-inline: var(--margem);
  -webkit-overflow-scrolling: touch;
}
.aromas__trilho::-webkit-scrollbar { display: none; }

.aromas__pista {
  /* relative so para o transbordo da fila nao ser contado no
     scrollWidth da raiz. Nao rola de fato - o clip acima segura -
     mas o numero inflado disparava falso positivo em auditoria. */
  position: relative;
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
  padding-right: var(--margem);
}
.aroma { display: flex; width: clamp(14rem, 22vw, 19rem); scroll-snap-align: start; }

/* ── Onde o navegador tem linha do tempo de scroll ───
   O trilho deixa de rolar sozinho e passa a ser puxado pela
   rolagem da página. `-100%` é a largura da própria pista e
   `100cqw` a do trilho, então o destino é exatamente o que sobra
   para fora: a fila para no último cartão, nunca antes nem depois. */
@supports (animation-timeline: view()) {
  @media (min-width: 62.0625rem) and (prefers-reduced-motion: no-preference) {
    .aromas {
      /* O percurso encolhe conforme a tela alarga, entao a altura tem de
         encolher junto, senao o passo fica lento em monitor grande. A
         pista mede ~263rem; o que sobra para fora e (263rem - largura da
         tela), e multiplicamos por 1,25 para dar um passo confortavel.
         O min() poe um teto para telas estreitas, onde o cartao encolhe
         e a formula linear exageraria. */
      height: min(calc(100svh + 263rem - 125vw), calc(100svh + 160rem));
      view-timeline-name: --percurso-aromas;
      view-timeline-axis: block;
    }
    .aromas__palco { position: sticky; top: 0; height: 100svh; min-height: 0; }

    /* clip, nao hidden: hidden ainda é rolável por programa, e o navegador
       rola o contêiner ao focar um cartão fora da tela, desalinhando a
       corrida. clip trava isso; quem move a fila é só a linha do tempo. */
    .aromas__trilho { overflow: clip; scroll-snap-type: none; container-type: inline-size; }

    .aromas__pista {
      animation: correr-aromas linear both;
      animation-timeline: --percurso-aromas;
      animation-range: entry 100% exit 0%;
      will-change: transform;
    }
    .aromas__medida { display: block; margin-top: var(--e6); max-width: 12rem; height: 1px; background: var(--borda); }
    .aromas__corrida {
      animation: medir-aromas linear both;
      animation-timeline: --percurso-aromas;
      animation-range: entry 100% exit 0%;
    }
  }
}

@keyframes correr-aromas {
  to { transform: translateX(calc(-100% + 100cqw)); }
}
@keyframes medir-aromas {
  to { transform: scaleX(1); }
}

.aroma__botao {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: var(--e2);
  padding: 0; background: none; cursor: pointer;
}

.aroma__foto {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--areia); margin-bottom: var(--e4);
}
.aroma__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.68) sepia(.16) contrast(1.05) brightness(1.02);
  transition: transform .9s var(--curva), filter .6s var(--curva);
}
/* o véu que unifica o conjunto */
.aroma__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ouro); mix-blend-mode: soft-light; opacity: .28;
  transition: opacity .6s var(--curva);
}
/* física de hover: a foto cresce dentro da moldura, que não se mexe */
.aroma__botao:hover .aroma__foto img,
.aroma__botao:focus-visible .aroma__foto img {
  transform: scale(1.06); filter: saturate(.85) sepia(.06) contrast(1.05) brightness(1.02);
}
.aroma__botao:hover .aroma__foto::after,
.aroma__botao:focus-visible .aroma__foto::after { opacity: .12; }
.aroma__botao:focus-visible { outline: 2px solid var(--ouro-forte); outline-offset: 4px; }

.aroma__nome {
  position: relative; font-family: var(--serif);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.32; text-wrap: balance;
}
.aroma__nome::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -.15em;
  height: 1px; background: var(--ouro); transition: right .5s var(--curva);
}
.aroma__botao:hover .aroma__nome::after,
.aroma__botao:focus-visible .aroma__nome::after { right: 0; }
.aroma__carater {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ouro-texto);
}
.aroma__desc { font-size: .8125rem; line-height: 1.55; color: rgb(var(--espresso-rgb) / .72); }

/* ── Atelier ───────────────────────────────────────── */
.atelier { max-width: var(--largura); margin-inline: auto; }
.atelier__cabeca { margin-bottom: var(--e8); max-width: 44rem; }
.atelier__cabeca p { margin-top: var(--e4); font-size: 1.1rem; color: rgb(var(--espresso-rgb) / .72); max-width: var(--medida); }

.atelier__grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}

/* Prévia */
.previa {
  position: sticky; top: calc(var(--altura-cabecalho) + 2rem);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--e8) var(--e5) var(--e6);
  background: var(--areia); border: 1px solid var(--borda);
}
/* ── As duas fotos do produto ───────────────────────
   Aqui morava um vaso desenhado em CSS, com a nota de que era um
   substituto honesto ate as fotos reais chegarem. Chegaram.

   As duas ficam empilhadas no mesmo quadro e so a do formato
   escolhido aparece: trocar o src causaria um piscar branco a cada
   troca, e as duas juntas pesam 38 KB. O recorte ja foi feito no
   mesmo enquadramento, mesma largura de objeto e mesma linha de
   base, entao a troca le como o mesmo objeto mudando de forma. A
   diferenca de altura entre elas e a diferenca real entre 90 g e
   140 g, que e o que a legenda da secao afirma.                 */
.previa__vaso {
  position: relative; width: 100%; max-width: 15rem;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--areia);
  box-shadow: 0 1.75rem 3.5rem -1.25rem rgb(var(--espresso-rgb) / .4);
}
.previa__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--curva);
}

/* ── A foto cede o lugar conforme o pedido cresce ───
   No desktop o cartao e grudado. Passando da altura da tela ele
   trava no topo e o rodape dele fica inalcancavel: o total some
   justo na hora de conferir, que e quando o erro acontece.

   Com a foto inteira o cartao ja estoura em quatro velas. Ela e a
   unica parte dispensavel ali: quem esta conferindo dez linhas ja
   escolheu o recipiente e nao precisa mais ver o retrato dele. Os
   limiares saem da conta de altura, nao de gosto: 52px por linha,
   153px de titulo e totais, 104px de recuo do cartao.            */
@media (min-width: 62.0625rem) {
  .previa:has(.item:nth-child(4)) .previa__vaso { max-width: 8rem; }
  .previa:has(.item:nth-child(7)) .previa__vaso { display: none; }
  .previa:has(.item:nth-child(7)) { padding-top: var(--e6); }
  .previa:has(.item:nth-child(7)) .pedido { margin-top: 0; }
}
/* Ultimo recurso, medido em JS: nem sem a foto o cartao cabe (tela
   baixa, pedido muito longo). Solto, ele rola com a pagina, e o que
   esta embaixo volta a ser alcancavel. */
.previa.is-solta { position: static; }
.previa__vaso[data-formato="latinha"] .previa__foto[data-de="latinha"],
.previa__vaso[data-formato="pote"]    .previa__foto[data-de="pote"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .previa__foto { transition: none; }
}

/* Controles */
/* Fieldset tem uma regra propria: a legenda e desenhada na faixa
   da borda de cima, e o padding-top do fieldset cai depois dela, nao
   antes. Entao o padding-top: 3rem que servia para separar os passos
   estava indo parar entre "3 Quantas" e o contador, somando 72px
   onde o passo 1, sem vizinho acima, tinha 24px. O respiro entre
   passos passa a ser margem no fieldset, e o respiro abaixo do filete
   vira padding da propria legenda, que obedece normalmente. */
/* 48 embaixo mais 32 de margem mais 32 acima da legenda davam 112px
   de vao entre um passo e o titulo do seguinte, quase a altura de um
   controle inteiro. Sao quatro passos de um mesmo formulario, nao
   quatro secoes: 72px ja separa sem soltar. */
.passo { padding-bottom: 1rem; }
.passo + .passo {
  border-top: 1px solid var(--borda);
  margin-top: 1rem; padding-top: 0;
}
.passo + .passo > legend { padding-top: 1rem; }
.passo legend {
  display: flex; align-items: center; gap: var(--e3);
  font-size: .6875rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; margin-bottom: var(--e5);
}
.passo__num {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--ouro); border-radius: 50%;
  font-family: var(--serif); font-size: .9rem; letter-spacing: 0;
  color: var(--ouro-texto);
}
.opcoes { display: grid; gap: var(--e3); }

.opcao {
  position: relative; display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5); cursor: pointer;
  border: 1px solid var(--borda); background: var(--linho);
  transition: border-color .35s var(--curva), background .35s var(--curva);
}
.opcao:hover { border-color: rgb(var(--ouro-rgb) / .6); }
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao:has(input:checked) { border-color: var(--ouro); background: var(--areia); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--ouro-forte); outline-offset: 3px; }

.opcao__marca {
  flex: none; width: .95rem; height: .95rem; border-radius: 50%;
  border: 1px solid var(--ouro); position: relative;
}
.opcao:has(input:checked) .opcao__marca::after {
  content: ""; position: absolute; inset: .2rem;
  background: var(--ouro); border-radius: 50%;
}
.opcao__corpo { flex: 1; display: flex; flex-direction: column; }
.opcao__nome { font-family: var(--serif); font-size: 1.25rem; line-height: 1.32; }
.opcao__det { font-size: .75rem; color: rgb(var(--espresso-rgb) / .65); margin-top: .15rem; }
.opcao__preco { font-family: var(--serif); font-size: 1.35rem; color: var(--ouro-texto); }

/* ── Escolha do aroma: ícone e nome lado a lado ─────
   Sem caixa. Dez retângulos com borda empilhados viravam uma
   parede de quadrados. O que marca a seleção agora é o ícone
   cheio e um filete dourado à esquerda: custa menos pixel, lê
   mais rápido, e o ícone reaparece aqui em vez de morrer junto
   com a grade antiga lá de cima.

   Duas colunas com row-gap curto e column-gap largo: aperta a
   vertical, que é onde sobrava espaço morto, sem encostar as
   duas colunas uma na outra.                                   */
.opcoes--aroma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e6); }

.opcao--aroma {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: var(--e4); row-gap: 0; align-items: center;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  border: 0; border-left: 2px solid transparent; background: none;
  transition: border-color .35s var(--curva), background .35s var(--curva);
}
.opcao--aroma:hover { border-left-color: rgb(var(--ouro-rgb) / .45); background: rgb(var(--areia-rgb) / .55); }
.opcao--aroma:has(input:checked) { border-left-color: var(--ouro); background: var(--areia); }

.opcao__icone {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  color: var(--ouro-texto); opacity: .55;
  transition: opacity .35s var(--curva), transform .5s var(--curva);
}
.opcao__icone svg { width: 100%; height: 100%; }
.opcao--aroma:hover .opcao__icone { opacity: .85; }
.opcao--aroma:has(input:checked) .opcao__icone { opacity: 1; transform: scale(1.06); }

.opcao--aroma .opcao__nome { grid-column: 2; font-size: 1.05rem; }
.opcao--aroma .opcao__det { grid-column: 2; margin-top: 0; }
.opcao--aroma:has(input:checked) .opcao__nome { color: var(--ouro-texto); }


.entrada {
  width: 100%; padding: var(--e4) var(--e5);
  background: var(--linho); border: 1px solid var(--borda);
  font-weight: 300; transition: border-color .3s;
}
.entrada::placeholder { color: rgb(var(--espresso-rgb) / .45); }
.entrada:hover { border-color: rgb(var(--ouro-rgb) / .6); }
.entrada:focus { border-color: var(--ouro); outline: none; }
.entrada:focus-visible { outline: 2px solid var(--ouro-forte); outline-offset: 3px; }


.controles__envio { padding-top: var(--e5); border-top: 1px solid var(--borda); }
.controles__aviso {
  margin-top: var(--e3); font-size: .8125rem; color: var(--ouro-texto);
  min-height: 1.2em;
}
.controles__aviso:empty { margin-top: 0; min-height: 0; }
.controles__nota { margin-top: var(--e4); font-size: .75rem; color: rgb(var(--espresso-rgb) / .6); max-width: var(--medida); }

/* ── Rituais ───────────────────────────────────────── */
.rituais__cabeca { max-width: var(--largura); margin: 0 auto var(--e8); }
.rituais__cabeca p { margin-top: var(--e4); font-size: 1.1rem; color: rgb(var(--linho-rgb) / .65); max-width: var(--medida); }

.rituais__linha {
  max-width: var(--largura); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid rgb(var(--linho-rgb) / .18);
}

/* ── Dúvidas ───────────────────────────────────────── */
.duvidas { max-width: 58rem; margin-inline: auto; }
.duvidas > h2 { margin-bottom: var(--e8); }
.duvidas__lista { border-top: 1px solid var(--borda); }
.duvida { border-bottom: 1px solid var(--borda); }
.duvida__corpo p { max-width: var(--medida); }
.duvida h3 { font-size: inherit; font-family: inherit; font-weight: inherit; }
.duvida__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); padding: var(--e5) 0; text-align: left;
  font-family: var(--f-display); font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: var(--w-h1); line-height: 1.3; transition: color .3s;
}
.duvida__botao:hover { color: var(--ouro-texto); }
.duvida__sinal {
  flex: none; position: relative; width: .85rem; height: .85rem;
}
.duvida__sinal::before, .duvida__sinal::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px;
  background: var(--ouro-texto); transition: transform .4s var(--curva), opacity .3s;
}
.duvida__sinal::after { transform: rotate(90deg); }
.duvida__botao[aria-expanded="true"] .duvida__sinal::after { transform: rotate(0); opacity: 0; }

.duvida__corpo p { font-size: .9375rem; color: rgb(var(--espresso-rgb) / .78); }

/* ── Barra grudada ─────────────────────────────────── */
.barra {
  position: fixed; inset: auto 0 0; z-index: 90;
  /* A faixa do indicador de tela do iPhone come a base de qualquer
     elemento preso no rodape. O env() devolve zero onde nao existe. */
  padding-bottom: env(safe-area-inset-bottom);
  background: rgb(var(--noite-rgb) / .94); backdrop-filter: blur(14px);
  border-top: 1px solid rgb(var(--ouro-rgb) / .35); color: var(--linho);
  transform: translateY(110%); transition: transform .5s var(--curva);
}
.barra.is-visivel { transform: none; }

/* A barra inteira e o alvo: no polegar, mirar so na pilula dourada e
   trabalho. O gatilho carrega o recuo que era da barra. */
.barra__gatilho {
  width: 100%; display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--margem); text-align: left; color: inherit;
}
.barra__resumo {
  flex: 1; min-width: 0; font-size: .8125rem; color: rgb(var(--linho-rgb) / .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra__preco { font-family: var(--serif); font-size: 1.25rem; color: var(--ouro); }
.barra__acao {
  flex: none; display: inline-flex; align-items: center; min-height: 2.75rem;
  background: var(--ouro); color: var(--noite);
  padding: calc(.5rem + .0975em) 1.4rem calc(.5rem - .0975em);
  border-radius: 999px; text-decoration: none;
  font-family: var(--f-ui); font-weight: var(--w-ui);
  font-size: .6875rem; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  transition: background .35s var(--curva);
}
.barra__gatilho:hover .barra__acao { background: var(--linho); }

/* Em 320px "Monte o seu pedido" perdia 10px para a pilula e saia
   reticenciado. O rotulo da acao cede o que a frase precisa: a
   frase e o que diz o que fazer, a pilula so repete. */
@media (max-width: 22.5rem) {
  .barra__gatilho { gap: var(--e3); padding-inline: var(--e4); }
  .barra__acao { padding-inline: .875rem; letter-spacing: .12em; text-indent: .12em; }
}

/* ── Resumo curto dentro da barra ───────────────────
   Mesma mecanica de altura das perguntas: 0fr para 1fr anima sem
   medir nada em JS. Aqui ele cresce para cima porque a barra esta
   presa na base da tela.                                        */
/* Recuo e filete moram no painel e entram junto com a altura. No
   filho eles ficariam fora da linha de grade que anima e o titulo
   do resumo aparecia com o painel fechado. */
.barra__painel {
  display: grid; grid-template-rows: 0fr;
  padding: 0 var(--margem);
  border-bottom: 1px solid transparent;
  transition: grid-template-rows .4s var(--curva),
              padding-block .4s var(--curva),
              border-color .4s var(--curva);
}
.barra__painel > * { overflow: hidden; min-height: 0; }
.barra.is-aberta .barra__painel {
  grid-template-rows: 1fr;
  padding-block: var(--e5) var(--e4);
  border-bottom-color: rgb(var(--linho-rgb) / .12);
}
.barra__caixa-titulo {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro);
}
.barra__lista {
  list-style: none; padding: 0; margin: var(--e3) 0 0;
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
}
.barra__lista li {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: .3125rem 0; font-size: .875rem; color: rgb(var(--linho-rgb) / .82);
}
.barra__lista li span:first-child {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.barra__lista li span + span { flex: none; color: rgb(var(--linho-rgb) / .58); }
.barra__ver {
  margin-top: var(--e3); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgb(var(--linho-rgb) / .7);
  border-bottom: 1px solid rgb(var(--ouro-rgb) / .5);
  padding-bottom: .2rem; transition: color .3s var(--curva);
}
.barra__ver:hover, .barra__ver:focus-visible { color: var(--ouro); }


/* ── O pedido: carrinho abaixo da prévia ────────────
   Sem caixa e sem sombra. As linhas se separam por filete, que é o
   vocabulário do resto da página, e a coluna já está visualmente
   contida pela prévia acima dela.                                 */
.pedido { width: 100%; margin-top: var(--e7); }

.pedido__titulo {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; line-height: 1.4; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro-texto);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--borda);
}

.pedido__vazio {
  margin-top: var(--e4); font-size: .875rem;
  color: rgb(var(--espresso-rgb) / .62); max-width: 30ch;
}

.pedido__lista { list-style: none; padding: 0; margin: 0; }

/* ── A linha do pedido ──────────────────────────────
   Um pedido de dez velas precisa caber na tela inteira: e ali que a
   pessoa confere antes de mandar, e o que ela nao ve ela nao
   corrige. A linha custava 98px com quatro colunas (e o nome
   quebrava letra a letra quando a coluna apertava) ou 134px
   empilhada. Dez velas davam 1340px.

   Agora sao tres colunas e duas linhas de texto: o nome manda na
   primeira, formato e valor dividem a segunda, e os controles ficam
   a direita, centrados nas duas.                                 */
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--e3);
  padding: .5rem 0;
  border-bottom: 1px solid var(--borda);
}
.item__corpo { display: flex; flex-direction: column; min-width: 0; }
.item__nome { font-size: .9375rem; line-height: 1.25; }
.item__meta {
  display: flex; align-items: baseline; gap: .45rem;
  margin-top: .15rem; min-width: 0; line-height: 1.35;
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--espresso-rgb) / .55);
}
.item__det { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O ponto separador e desenhado, nao escrito: um caractere de texto
   no meio entraria na leitura em voz alta entre formato e preco. */
.item__valor::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2px; height: 2px; border-radius: 50%; margin-right: .45rem;
  background: rgb(var(--espresso-rgb) / .4);
}
.item__valor { flex: none; color: rgb(var(--espresso-rgb) / .82); }

.item__tirar {
  display: grid; place-items: center;
  width: 2.125rem; height: 2.125rem; margin-right: -.55rem;
  color: rgb(var(--espresso-rgb) / .45); cursor: pointer;
  transition: color .3s var(--curva);
}
.item__tirar svg { width: .85rem; height: .85rem; }
.item__tirar:hover, .item__tirar:focus-visible { color: var(--espresso); }

/* ── Contador de quantidade ─────────────────────────
   Alvo de 44px nos dois botões sem inflar a linha: o quadrado é
   grande para o dedo e o desenho dentro dele é pequeno.          */
/* Era um retangulo reto com filete entre cada parte, tres caixas
   coladas ocupando quase metade da linha para mostrar o numero 1.
   Vira uma pilula unica, na mesma linguagem do botao ao lado: os
   filetes internos saem, o numero fica no meio e o controle encolhe
   para o tamanho do que ele de fato guarda. */
.quantia {
  display: inline-flex; align-items: center;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--linho); padding: 0 .25rem;
}
.quantia__botao {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.75rem; flex: none;
  border-radius: 50%;
  color: var(--espresso); cursor: pointer;
  transition: background .3s var(--curva), color .3s var(--curva);
}
.quantia__botao svg { width: .85rem; height: .85rem; }
.quantia__botao:hover, .quantia__botao:focus-visible { background: var(--areia); }

.quantia__campo {
  width: 2rem; height: 2.75rem; text-align: center;
  border: 0;
  background: transparent; color: var(--espresso);
  font-family: var(--f-display); font-size: 1.05rem;
  -moz-appearance: textfield;
}
.quantia__campo::-webkit-outer-spin-button,
.quantia__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.quantia--item { border: 0; border-radius: 0; padding: 0; background: none; }
/* 34px, nao 44. O contador e o x sao ajuste secundario dentro de uma
   lista que precisa caber inteira na tela, e 44px em cada custava
   quase o dobro de altura por linha. O alvo segue bem acima dos 24px
   de piso, e os controles do formulario, que sao os que a pessoa
   aperta para montar a vela, continuam em 44. */
.quantia--item .quantia__botao { width: 2.125rem; height: 2.125rem; }
.quantia--item .quantia__botao svg { width: .75rem; height: .75rem; }
.item .quantia--item { margin-left: -.5rem; }
.quantia__conta {
  min-width: 1.5rem; text-align: center;
  font-family: var(--f-display); font-size: 1rem;
}

.pedido__total {
  display: grid; gap: var(--e2);
  margin-top: var(--e4); padding-top: var(--e3);
}
.pedido__total > div { display: flex; align-items: baseline; justify-content: space-between; }
.pedido__total dt {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro-texto);
}
.pedido__total dd { font-family: var(--f-display); font-size: 1.05rem; }
.pedido__soma { padding-top: var(--e3); border-top: 1px solid var(--borda); }
.pedido__soma dd { font-size: 1.75rem; color: var(--ouro-texto); }

/* ── Passo de somar ─────────────────────────────── */
.passo__somar { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e4); }

/* ── Pedido de empresa ──────────────────────────── */
.controles__empresa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e4);
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 1px solid var(--borda);
  font-size: .875rem; color: rgb(var(--espresso-rgb) / .72);
}

/* ── Confirmação ────────────────────────────────────
   dialog nativo: o navegador já entrega camada de topo, foco preso
   dentro e Esc para sair. Reimplementar isso à mão é como se perde
   acessibilidade em modal.                                       */
.confirma {
  width: min(34rem, calc(100vw - 2 * var(--margem)));
  /* O dialog modal e centrado pelo navegador com margin: auto sobre
     inset: 0. O reset de margem no topo do arquivo zerava isso e o
     pop-up ia parar no canto superior esquerdo. Repor aqui e o unico
     jeito: e a margem que centra, nao o inset. */
  margin: auto;
  padding: 0; border: 0; background: transparent;
  color: var(--espresso);
}
/* Com muitos itens no carrinho a caixa passa da altura da tela. O
   dialog ja tem max-height do navegador; quem precisa rolar por
   dentro e o conteudo, senao o botao de confirmar fica inalcancavel. */
.confirma__caixa {
  max-height: calc(100vh - 2 * var(--margem));
  overflow-y: auto;
  /* Sem isto, chegar ao fim da caixa passa a rolagem para a pagina
     atras do pop-up, que anda sozinha com o modal aberto. */
  overscroll-behavior: contain;
}
.confirma::backdrop { background: rgb(var(--noite-rgb) / .55); backdrop-filter: blur(2px); }

.confirma__caixa {
  position: relative;
  background: var(--linho);
  border: 1px solid var(--borda);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  box-shadow: 0 1.75rem 3.5rem -1.25rem rgb(var(--espresso-rgb) / .5);
}

/* Fecha o pop-up mesmo depois que as acoes originais somem: o de
   confirmacao esconde "Enviar" e "Voltar e ajustar" assim que o
   pedido sai, e sem este X quem chegou aqui so tinha Esc para sair. */
.confirma__fechar {
  position: absolute; top: .75rem; right: .75rem;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: rgb(var(--espresso-rgb) / .45); cursor: pointer;
  transition: color .3s var(--curva);
}
.confirma__fechar svg { width: .9375rem; height: .9375rem; }
.confirma__fechar:hover, .confirma__fechar:focus-visible { color: var(--espresso); }
/* margem direita para o titulo nunca correr sob o X: "Pedido para
   empresa ou evento" quebra linha em telas estreitas, e sem isto a
   primeira linha passava por baixo do botao. */
.confirma__titulo { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.1; padding-right: 2.75rem; }

.confirma__lista {
  list-style: none; padding: 0;
  margin: var(--e5) 0 0;
  border-top: 1px solid var(--borda);
}
.confirma__lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--e2) var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--borda);
}
.confirma__det {
  grid-column: 1; font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--espresso-rgb) / .55);
}
.confirma__lista .tabular { grid-column: 2; grid-row: 1 / 3; font-family: var(--f-display); font-size: 1.05rem; }

.confirma__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--e5);
}
.confirma__total dt {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro-texto);
}
.confirma__total dd { font-family: var(--f-display); font-size: 1.75rem; color: var(--ouro-texto); }

.confirma__nota {
  margin-top: var(--e5); font-size: .875rem;
  line-height: 1.6; color: rgb(var(--espresso-rgb) / .72);
}
.confirma__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5);
  margin-top: var(--e6);
}

/* Depois de enviado a lista some: o que importa passa a ser o
   retorno, não reler o pedido. */
.confirma--feito .confirma__lista,
.confirma--feito .confirma__total { display: none; }

/* ── Rodapé ────────────────────────────────────────── */
.rodape {
  background: var(--noite); color: rgb(var(--linho-rgb) / .62);
  padding: var(--e8) var(--margem) var(--e7);
  display: grid; gap: var(--e6); align-items: center;
  grid-template-columns: auto 1fr auto;
  border-top: 1px solid rgb(var(--linho-rgb) / .1);
}
.rodape__lume { display: block; font-family: var(--serif); font-size: 1.6rem; letter-spacing: .3em; color: var(--linho); padding-left: .3em; }
.rodape__lexy {
  display: block; margin-top: .4rem; font-size: .6875rem;
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  letter-spacing: .38em; text-transform: uppercase; color: var(--ouro);
}
.rodape__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e5); }
.rodape__nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; transition: color .3s;
}
.rodape__nav a:hover { color: var(--ouro); }
.rodape__legal { font-size: .6875rem; letter-spacing: .04em; text-align: right; line-height: 2; }

/* ── Instagram e WhatsApp ───────────────────────────
   Contorno de 1.3px, mesma espessura dos icones do atelier: as duas
   marcas entram no desenho da pagina em vez de colar dois logotipos
   coloridos de terceiros no fim dela.                            */
/* Colocacao explicita. Os icones vem antes do aviso legal na
   marcacao, para que no celular eles fiquem acima da letra miuda,
   mas ocupam a linha inteira: por posicionamento automatico isso
   empurrava o aviso para uma terceira linha e a coluna da direita
   fechava em zero. */
.rodape__marca  { grid-column: 1; grid-row: 1; }
.rodape__nav    { grid-column: 2; grid-row: 1; }
.rodape__legal  { grid-column: 3; grid-row: 1; }
.rodape__social {
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  display: flex; gap: var(--e5); list-style: none; padding: 0; margin: 0;
}
.social {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  color: rgb(var(--linho-rgb) / .85); transition: color .3s var(--curva);
}
.social svg { width: 1.375rem; height: 1.375rem; }
.social:hover, .social:focus-visible { color: var(--ouro); }
.social--sem-destino { color: rgb(var(--linho-rgb) / .22); pointer-events: none; }

/* ── Revelação no scroll ───────────────────────────── */
.revela { opacity: 0; transform: translateY(1.75rem); }
.revela.is-visivel {
  opacity: 1; transform: none;
  transition: opacity .9s var(--curva), transform 1.1s var(--curva);
}

/* ── Adaptação ─────────────────────────────────────── */
@media (max-width: 62rem) {
  .cabecalho__nav, .cabecalho > .botao { display: none; }
  .menu-alterna { display: block; }

  .logo { flex-direction: column; align-items: flex-start; justify-content: center;
          gap: 0; padding-block: 0; min-height: 2.75rem; }
  .logo__lexy { margin-top: .3rem; }

  /* Empilhado, o filme vira faixa sangrando dos dois lados: a seção
     devolve o recuo da direita para o texto e o filme o anula com
     margem negativa. A legenda recupera o recuo por conta própria. */
  /* o respiro de baixo tem de ser maior que o vao entre os blocos de
     dentro, senao a secao fecha mais apertada do que respira */
  .palco { grid-template-columns: 1fr; gap: var(--e7); min-height: 0;
           padding-top: calc(var(--altura-cabecalho) + var(--e6));
           padding-bottom: var(--e8); }
  .palco__filme { order: -1; }
  .palco__cortina { height: auto; aspect-ratio: 4/3; }
  /* Ritmo: o vao maior fica entre grupos e o menor dentro deles.
     Antes eram 48px acima do titulo e 43px abaixo, quase iguais, e o
     titulo nao agrupava com o proprio texto de apoio. */
  .palco__titulo { margin-top: var(--e4); }
  .palco__linha  { margin-top: var(--e3); }
  .palco__acoes  { margin-top: var(--e5); }
  .palco__fatos  { margin-top: var(--e7); }
  .palco__fatos { margin-top: var(--e6); }

  .essencia { grid-template-columns: 1fr; }
  .essencia__figura { grid-column: 1; max-width: 26rem; }
  .essencia__texto { grid-column: 1; }

  /* No toque o panorama vira carrossel arrastavel, que e o idioma nativo.
     Sem margem negativa: um container de rolagem puxado para fora do pai
     por margem negativa vaza para a rolagem da raiz mesmo com overflow
     clip acima dele, e a pagina passa a arrastar na horizontal. Aqui o
     palco nao tem recuo lateral, quem recua e o cabecalho e o proprio
     trilho por padding. O carrossel fica full-bleed sem truque. */
  .aromas__palco { padding-inline: 0; gap: var(--e6); }
  .aromas__cabeca { padding-inline: var(--margem); }
  .aromas__trilho { margin-inline: 0; padding-inline: var(--margem); }
  .aromas__pista { padding-right: 0; }

  .atelier__grade { grid-template-columns: 1fr; }
  /* Empilhada, a previa nao precisa de recuo lateral proprio: ela ja
     esta dentro da margem da pagina, e cada pixel dele sai da largura
     da lista do pedido, que e o que precisa caber. */
  .previa { position: static; padding-inline: var(--e4); }


  .rituais__linha { grid-template-columns: 1fr; gap: 0; }
  .ritual { padding-bottom: var(--e6); }
  .ritual + .ritual { border-top: 1px solid rgb(var(--linho-rgb) / .18); }

  .rodape { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .rodape__marca, .rodape__nav, .rodape__social, .rodape__legal {
    grid-column: 1; grid-row: auto;
  }
  .rodape__legal { text-align: center; }

  /* Aqui morava um padding-bottom de 4.5rem no body, reserva para a
     barra fixa nao cobrir o fim da pagina. A barra sai de cena assim
     que o rodape entra na tela, entao a reserva nunca protegia nada:
     so deixava 72px do fundo claro do body aparecendo embaixo do
     rodape escuro, como uma faixa branca solta. */
}

/* Abaixo de 23rem o rotulo do botao de envio, com tracking de .22em,
   tem min-content de 301px e estoura a coluna de 280px: a pagina inteira
   passa a arrastar 1px na horizontal. Aperta o tracking e o recuo em vez
   de deixar quebrar, que manteria a pilula com duas linhas. */
@media (max-width: 23rem) {
  .botao--envio { letter-spacing: .1em; text-indent: .1em; padding-inline: 1rem; }
}

@media (max-width: 40rem) {
  /* no toque não existe hover, então a foto entra já no estado final */
  .aroma__foto img { transform: none; filter: saturate(.78) sepia(.1) contrast(1.05); }
  .aroma__foto::after { opacity: .16; }

  .palco__acoes { flex-direction: column; gap: var(--e4); align-items: flex-start; }
  /* Três fatos lado a lado não cabem em 360px: cada um fica com ~106px,
     '90 g e 140 g' quebra em duas linhas e o terceiro sobra sozinho numa
     linha inteira. Empilhados como rótulo à esquerda e valor à direita,
     cada fato ocupa uma linha limpa e o filete volta a separar de fato. */
  .palco__fatos {
    display: grid; grid-template-columns: 1fr; gap: 0;
    max-width: none; margin-top: var(--e6);
    padding-top: 0; border-top: 0;
  }
  .palco__fatos > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--e4); padding: var(--e3) 0;
    border-top: 1px solid var(--borda);
  }
  /* Precisa repetir o seletor do desktop: '.palco__fatos > div + div' tem
     especificidade maior que '.palco__fatos > div', entao o filete vertical
     e o recuo de 32px sobreviviam no empilhado e desalinhavam as duas
     ultimas linhas em relacao a primeira. */
  .palco__fatos > div + div { border-left: 0; padding-left: 0; padding-right: 0; }
  /* fecha o grupo: filete so no topo de cada linha deixa a lista
     terminando no ar, sem limite inferior */
  .palco__fatos > div:last-child { border-bottom: 1px solid var(--borda); }
  .palco__fatos dd { font-size: 1.375rem; margin-top: 0; }

  /* No celular a lista de dez em coluna unica vira uma parede de
     linhas iguais: rola muito e nao se lembra de nenhuma. Em duas
     colunas com o icone acima do nome, a altura cai pela metade e
     cada aroma vira um bloco com forma propria, nao mais um item
     de lista. Icone, nome e frase continuam todos visiveis.

     O filete de selecao muda de lugar junto: à esquerda ele
     funcionava porque a linha era larga; em celula estreita e
     empilhada, o topo e que le como marcacao. */
  .opcoes--aroma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e3); }

  .palco { align-items: end; }
}

/* ── Movimento reduzido ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revela { opacity: 1; transform: none; }
}

/* ══ Aplicação dos papéis tipográficos ═════════════════
   Fica no fim de propósito: as regras de cada elemento, acima,
   declaram peso próprio e ganhariam no cascade se isto viesse
   antes. Só família e peso — o letter-spacing de cada rótulo é
   calibrado pela posição dele e continua onde está.          */
body { font-family: var(--f-corpo); font-weight: var(--w-corpo); }

h1, .palco__titulo, .abertura__lume { font-family: var(--f-display); font-weight: var(--w-h1); }
h2 { font-family: var(--f-display); font-weight: var(--w-h2); font-style: var(--i-h2); }
h3 { font-family: var(--f-h3); font-weight: var(--w-h3); font-style: var(--i-h3); }
/* a pergunta do FAQ herda do botão de propósito: não é um h3 visual */
.duvida h3 { font-family: inherit; font-weight: inherit; font-style: inherit; }

/* Rótulos e badges */
.logo__lexy, .palco__fatos dt, .palco__filme figcaption,
.aroma__carater,
.deslize__texto, .rodape__lexy, .abertura__lexy {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
}

/* Interface */
.cabecalho__nav a, .passo legend, .entrada,
.rodape__nav a, .menu-movel nav a {
  font-family: var(--f-ui); font-weight: var(--w-ui);
}

/* Ação: o que a pessoa aperta */
.botao, .elo, .barra__acao {
  font-family: var(--f-ui); font-weight: var(--w-ui);
  -webkit-text-stroke: var(--traco-acao) currentColor;
  paint-order: stroke fill;
}


/* ── Página de erro ─────────────────────────────────
   Mesma abertura escura da home, sem cabeçalho e sem barra: quem
   caiu aqui não veio navegando, veio de um link torto. A única
   coisa que a tela precisa fazer é dizer o que houve e oferecer
   três saídas reais — nenhuma delas um beco.                    */
.corpo-erro { background: var(--noite); color: var(--linho); }

.erro {
  min-height: 100svh;
  display: grid; align-content: center; justify-items: start;
  gap: var(--e5);
  padding: var(--e8) var(--margem);
  max-width: 46rem; margin-inline: auto;
}
.erro__marca { display: flex; align-items: baseline; gap: .4rem; text-decoration: none; color: inherit; }
.erro__lume { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .3em; line-height: 1; }
.erro__lexy {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .4em;
  text-transform: uppercase; color: var(--ouro); padding-left: .15em;
}
.erro__titulo {
  margin-top: var(--e6);
  font-size: clamp(var(--h1-min), var(--h1-vw), var(--h1-max));
  line-height: 1; letter-spacing: -.02em;
}
.erro__linha { max-width: var(--medida); color: rgb(var(--linho-rgb) / .72); }
.erro__saidas { display: flex; flex-wrap: wrap; gap: var(--e6); margin-top: var(--e5); }

/* sobre o escuro, o filete de repouso e o texto invertem */
.erro .elo, .legal .elo { color: var(--linho); }
.erro .elo::before, .legal .elo::before { background: rgb(var(--linho-rgb) / .22); }
.erro .elo::after, .legal .elo::after { background: var(--ouro); }
.erro .elo--forte::before, .legal .elo--forte::before { background: var(--linho); }

/* ── Privacidade e termos ───────────────────────────
   Herdam o fundo escuro do 404 pela mesma classe no <body>. A
   diferenca e o alinhamento: a pagina de erro centraliza na vertical
   porque tem tres linhas, e um documento longo precisa comecar no
   topo e rolar. */
.legal {
  display: grid; justify-items: start; gap: var(--e5);
  padding: var(--e8) var(--margem);
  max-width: 46rem; margin-inline: auto;
}
.legal__titulo {
  margin-top: var(--e6);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.05; letter-spacing: -.02em;
}
/* Sem versal aqui. O resto da pagina usa caixa alta para rotulo
   categorico e curto (VELAS, TOTAL, FLORAL E DELICADO); isto e uma
   frase de trinta e seis caracteres, e frase em versal se le pior:
   some o perfil de ascendente e descendente que identifica a palavra. */
.legal__data {
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .75rem; letter-spacing: .04em;
  color: rgb(var(--linho-rgb) / .5);
}
.legal__bloco { display: grid; gap: var(--e3); max-width: var(--medida); }
.legal__bloco + .legal__bloco { margin-top: var(--e4); }
.legal__bloco h2 {
  font-family: var(--f-display); font-style: normal; font-weight: 400;
  font-size: 1.0625rem; line-height: 1.3; color: var(--linho);
}
.legal__bloco p {
  font-size: .9375rem; line-height: 1.75;
  color: rgb(var(--linho-rgb) / .72);
}
/* O link dentro do corpo do texto nao pode roubar a linha: o filete
   do .elo tem altura propria e empurraria a entrelinha do paragrafo. */
.legal__bloco .elo { display: inline; }

/* ══ Ajustes de celular ═══════════════════════════════
   Bloco único no fim do arquivo: tudo que é só do toque mora
   aqui, para não caçar override espalhado em cinco lugares.  */

/* ── Legibilidade: Lora 400 em tela pequena lê fina ──
   Não é impressão: o mesmo peso que funciona a 40cm de um
   monitor perde traço num painel a 30cm com o dedo por cima.
   Subir para 500 e alargar a entrelinha resolve sem trocar a
   família nem inchar a página.                              */
@media (max-width: 62rem) {
  body { font-size: 1.0625rem; font-weight: 500; line-height: 1.7; }

  /* texto secundário estava em 72% de opacidade, que somado ao
     peso fino sumia na tela do celular */
  .palco__linha,
  .aromas__cabeca p,
  .atelier__cabeca p,
  .essencia__texto p { color: rgb(var(--espresso-rgb) / .86); }
  .rituais__cabeca p { color: rgb(var(--linho-rgb) / .82); }
  .pedido__vazio, .controles__nota, .confirma__nota { color: rgb(var(--espresso-rgb) / .78); }
}

/* ── Seção 1: título antes do vídeo ─────────────────
   O vídeo abria a seção e empurrava a promessa para baixo da
   dobra. Quem chega precisa ler o que é antes de ver.
   O recorte 3/4 deixava a vela pequena no meio de muito fundo;
   4/5 com a mídia ampliada põe a vela no tamanho da tela.    */
@media (max-width: 62rem) {
  /* A ordem no celular e outra: promessa, vídeo, ação, ficha.
     display: contents dissolve a caixa do texto e devolve os quatro
     blocos como itens diretos do grid, que e o unico jeito de
     intercalar o video no meio deles sem duplicar markup. */
  .palco { gap: 0; }
  .palco__texto { display: contents; }
  .palco__titulo { order: 1; margin-top: 0; }
  .palco__linha  { order: 2; margin-top: var(--e5); }
  .palco__filme  { order: 3; margin-top: var(--e7); }
  .palco__fatos  { order: 4; margin-top: var(--e4); }
  .palco__acoes  { order: 5; margin-top: var(--e7); }
  .palco__cortina { aspect-ratio: 4/5; height: auto; }
  .palco__video { transform: scale(1.04); transform-origin: 50% 45%; }
  .palco--anima .palco__video { transform: scale(1.04); }
  .palco--entra .palco__video { transform: scale(1.04); }
}

/* ── Seção 2: menos cara de artigo ──────────────────
   Coluna longa de parágrafos corridos lê como post de blog.
   A abertura vira a fala principal e os três tempos ficam
   colados nela, sem parágrafo de ligação no meio.           */
@media (max-width: 62rem) {
  .essencia { gap: var(--e6); }
  /* O recuo sobrou do filete dourado que a abertura tinha antes.
     Sem o filete ele so desalinha a frase em relacao ao h2. */
  .essencia__abre {
    font-size: 1.25rem; line-height: 1.45;
    margin-bottom: var(--e5);
  }
  .essencia__texto h2 { margin-bottom: var(--e4); }
  .atributos { margin-top: var(--e5); }
}

/* ── Seção 3: aromas ────────────────────────────────
   O vão entre a 2 e a 3 vinha da soma de dois respiros de
   seção cheios. No celular um só basta.                     */
@media (max-width: 62rem) {
  .essencia { padding-bottom: var(--e6); }
  /* Sem o panorama grudado nao ha o que segurar uma tela inteira de
     altura: com min-height o palco sobrava e o align-content: center
     devolvia a sobra como respiro embaixo das bolinhas, que e o vao
     que ninguem pediu. Sem ele o recuo abaixo volta a ser o recuo. */
  .aromas__palco { min-height: 0; align-content: start; padding-block: var(--e7) var(--e5); }

  /* a medida de percurso volta no toque: sem ela não há sinal
     de que a fila continua para o lado */
  .aromas__medida {
    display: block; margin-top: var(--e5);
    max-width: 8rem; height: 2px; background: var(--borda);
  }
  .aromas__corrida { background: var(--ouro); transform-origin: left; }
}

/* Bolinhas: uma por aroma, a atual preenchida. */
/* Janela de bolinhas: sao dez aromas, mas so dois cabem na tela por
   vez, e dez pontos em fila viram uma regua sem leitura. A janela
   mostra cinco, a fila desliza para manter o atual no centro, e uma
   mascara apaga as pontas em vez de cortar reto.

   --passo e a largura de um ponto; o JS so muda --i, e o CSS faz o
   resto. Assim nao ha numero magico repetido nos dois lados.       */
.aromas__bussola {
  --passo: 1.5rem;
  --janela: 5;
  --centro: calc((var(--janela) - 1) / 2);
  display: none; margin: var(--e4) auto 0;
  width: calc(var(--passo) * var(--janela));
  overflow: hidden;
  /* a mascara mora aqui junto do overflow: sozinha ela nao esconde
     nada, porque fora da caixa do elemento o padrao e repetir o
     gradiente em vez de cortar */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.aromas__pontos {
  --i: 0;
  display: flex; list-style: none; padding: 0; margin: 0;
  width: max-content;
  transform: translateX(calc((var(--centro) - var(--i)) * var(--passo)));
  transition: transform .45s var(--curva);
}
.aromas__pontos li { display: flex; flex: none; }
.aromas__ponto {
  display: grid; place-items: center;
  width: var(--passo); height: 2.75rem; flex: none; cursor: pointer;
}
.aromas__ponto::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  /* --borda sobre --areia da 1.06:1: o ponto sumia. O espresso a 32%
     aparece sem virar chumbinho preto ao lado do ouro do atual. */
  background: rgb(var(--espresso-rgb) / .32);
  transition: background .35s var(--curva), transform .35s var(--curva), opacity .35s var(--curva);
}
/* quanto mais longe do atual, menor: a fila some nas pontas em vez
   de terminar de supetao */
.aromas__ponto[data-dist="1"]::before { transform: scale(.85); }
.aromas__ponto[data-dist="2"]::before { transform: scale(.6); opacity: .7; }
.aromas__ponto[aria-current="true"]::before { background: var(--ouro); transform: scale(1.6); }

@media (prefers-reduced-motion: reduce) {
  .aromas__pontos { transition: none; }
}
@media (max-width: 62rem) {
  /* A caixa do ponto tem 2.75rem de altura porque e alvo de toque, e
     metade dela ja e vao. Somada ao gap do palco o respiro dobrava.
     O recuo negativo desconta o que a caixa invisivel ja entrega. */
  .aromas__bussola { display: block; margin-top: calc(var(--e4) * -1); }
  .aroma__botao { cursor: pointer; }
}

/* ── Seção 4: atelier ───────────────────────────────
   Ícone à esquerda do texto também no celular. A grade de duas
   colunas empilhadas foi o erro anterior: o ícone acima do nome
   custa altura e some do olho.                              */
@media (max-width: 40rem) {
  .opcoes--aroma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); }
  .opcao--aroma {
    grid-template-columns: auto 1fr;
    column-gap: var(--e3); row-gap: 0; align-items: center;
    padding: var(--e3) var(--e2);
    border-left: 2px solid transparent; border-top: 0;
  }
  .opcao--aroma:hover { border-top-color: transparent; border-left-color: rgb(var(--ouro-rgb) / .45); }
  .opcao--aroma:has(input:checked) { border-top-color: transparent; border-left-color: var(--ouro); }
  .opcao__icone { grid-row: 1 / 3; margin-bottom: 0; width: 1.75rem; height: 1.75rem; }
  .opcao--aroma .opcao__nome { grid-column: 2; font-size: .9375rem; }
  .opcao--aroma .opcao__det { grid-column: 2; font-size: .6875rem; }
}

/* Notas do formato: o que era a seção de formatos, agora dentro
   da própria opção. Só aparece na opção escolhida, senão o passo
   1 vira parede de texto. */
.opcao__notas {
  display: none; grid-column: 2;
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  font-size: .8125rem; line-height: 1.5; color: rgb(var(--espresso-rgb) / .78);
}
.opcao--formato:has(input:checked) .opcao__notas { display: block; }

/* Quantidade: contador e botão dividem a linha, com o número
   junto do que ele conta. */
@media (max-width: 40rem) {
  /* Contador e botao lado a lado nao cabem: o rotulo do botao pede
     mais largura do que sobra e empurra a coluna para fora da tela.
     Empilhado, o contador fica colado no que ele conta e o botao
     ganha a linha inteira, que e o alvo de toque que importa. */
  /* Contador e acao dividem a linha: o contador leva so a largura
     que precisa e o botao fica com o resto. Empilhados, o contador
     sozinho numa linha inteira parecia um campo vazio esperando algo. */
  .passo__somar {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e3); align-items: stretch; justify-items: stretch;
  }
  .passo__somar .quantia { justify-self: start; }
  .passo__somar .botao { width: 100%; letter-spacing: .12em; text-indent: .12em; padding-inline: var(--e4); }
}

/* ── Resumo grudado: ver o que escolheu sem rolar ───
   Marketplace resolve isso há anos com um resumo fixo no rodapé
   da tela enquanto se escolhe. Aqui ele mostra o item corrente e
   o total, e some quando o pedido já está à vista.           */
.resumo-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--margem);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  background: rgb(var(--noite-rgb) / .96);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--linho);
  transform: translateY(100%);
  transition: transform .45s var(--curva);
}
.resumo-fixo.is-visivel { transform: none; }
.resumo-fixo__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resumo-fixo__linha {
  font-family: var(--f-rotulo); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ouro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resumo-fixo__total { font-family: var(--f-display); font-size: 1.05rem; }
.resumo-fixo .botao { flex: none; }

@media (max-width: 62rem) { .resumo-fixo { display: flex; } }

/* ── Seção 6: rituais interativos ───────────────────
   Eram três blocos de texto corrido num fundo escuro, e ninguém
   lê três parágrafos ali. Viraram acordeão com um aberto por vez:
   o título entrega o gesto, o corpo só aparece se interessar.  */
/* ── Seção 7 e rituais: abrir e fechar com altura animada ──
   grid-template-rows de 0fr para 1fr é o jeito de animar altura
   automática sem medir nada em JS e sem animar height, que força
   recálculo de layout a cada quadro.                          */
/* O recuo de baixo entra junto com a altura. Fixo no corpo ele
   sobrava em toda pergunta fechada, porque padding fica fora da
   linha de grade que anima: 32px de nada entre um titulo e o
   seguinte, dez vezes na lista. Passa-lo para o <p> nao resolve,
   o overflow do item corta o conteudo dele e nao o proprio recuo. */
.duvida__corpo {
  display: grid; grid-template-rows: 0fr; padding-bottom: 0;
  transition: grid-template-rows .45s var(--curva), padding-bottom .45s var(--curva);
}
.duvida__corpo > * { overflow: hidden; min-height: 0; }
.duvida__corpo.is-aberto { grid-template-rows: 1fr; padding-bottom: var(--e6); }

@media (prefers-reduced-motion: reduce) {
  .duvida__corpo { transition: none; }
}

/* ── Campos do formulário de empresa ────────────────── */
.campo { display: block; margin-bottom: var(--e4); }
.campo__rotulo {
  display: block; margin-bottom: var(--e2);
  font-family: var(--f-rotulo); font-weight: var(--w-rotulo);
  font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ouro-texto);
}
.entrada--area { resize: vertical; min-height: 6rem; font-family: var(--f-corpo); }
.campo__erro {
  min-height: 1.25rem; font-size: .8125rem; line-height: 1.5; color: var(--erro);
}
.empresa__form .confirma__acoes { margin-top: var(--e4); }

/* Filhos de grid nascem com min-width: auto e nao encolhem abaixo do
   min-content do conteudo. Num nome longo de aroma isso empurra a
   coluna inteira para fora da tela. */
.atelier__grade > *, .opcoes > *, .opcao--aroma, .opcao__corpo { min-width: 0; }
.opcao--aroma .opcao__nome, .opcao--aroma .opcao__det { min-width: 0; overflow-wrap: break-word; }

/* enquanto o dedo puxa, sem snap brigando e sem selecao de texto */
.aromas__trilho.is-arrastando {
  scroll-snap-type: none; cursor: grabbing;
  user-select: none; -webkit-user-select: none;
}
.aromas__trilho.is-arrastando img { pointer-events: none; }

/* Chegar ao fim do trilho passava a rolagem horizontal adiante, que no
   celular vira gesto de voltar no navegador. */
.aromas__trilho { overscroll-behavior-x: contain; }

/* ── CTAs do hero no celular ────────────────────────
   Como link sublinhado eles ficavam colados na ficha de cima e liam
   como mais uma linha de texto. Em pilula viram botao: forma
   diferente do resto da secao, alvo cheio de largura, e a hierarquia
   entre primario e secundario passa a ser preenchido versus
   contornado, que nao depende de peso de fonte.                   */
@media (max-width: 62rem) {
  .palco__acoes { flex-direction: column; align-items: stretch; gap: var(--e4); }

  .palco__acoes .elo {
    justify-content: center; gap: .5rem;
    /* A pilula ja tem 52px de altura propria, entao o truque de
       padding-top com margem negativa que aumentava o alvo do link
       sublinhado nao serve aqui: a margem de -18px comia o gap e os
       dois botoes encostavam. Zerado. */
    min-height: 3.25rem; padding: 0 var(--e5); margin: 0;
    border-radius: 999px;
    font-size: .75rem; letter-spacing: .16em; text-indent: .16em;
    opacity: 1;
  }
  .palco__acoes .elo::before, .palco__acoes .elo::after { content: none; }

  .palco__acoes .elo--forte {
    background: var(--espresso); color: var(--linho);
  }
  .palco__acoes .elo--forte:active { transform: translateY(1px); }

  .palco__acoes .elo:not(.elo--forte) {
    border: 1px solid var(--borda); color: var(--espresso);
  }
  .palco__acoes .elo:not(.elo--forte):hover { opacity: 1; background: var(--areia); }
}

/* ── A essencia em telas medias ─────────────────────
   A quebra em coluna unica so acontecia em 62rem. Entre 62 e 76rem
   (MacBook Air com a janela normal, iPad deitado) a foto continuava
   levando 5/12 e sobrava pouco para o texto: o paragrafo de abertura
   ficava com sete palavras por linha e os tres atributos apertavam a
   ponto de quebrar a diagramacao. A partir daqui a secao empilha.  */
@media (max-width: 76rem) and (min-width: 62.0625rem) {
  .essencia { grid-template-columns: 1fr; gap: var(--e7); }
  .essencia__figura { grid-column: 1; max-width: 30rem; }
  .essencia__texto { grid-column: 1; }
}

/* Empilhados so a partir de 48rem: em tres colunas cada frase ficava
   com menos de 11rem e quebrava em quatro linhas. */
@media (max-width: 48rem) {
  /* Lado a lado, o termo comeria 7rem de uma coluna de 20rem e a
     frase quebraria em quatro linhas. Empilhados, cada um usa a
     largura inteira. */
  .atributo { grid-template-columns: 1fr; gap: .35rem; padding-block: var(--e4); }
  .atributo dd { max-width: none; font-size: .875rem; }
}

/* Abaixo de 23rem nao ha largura para os dois lado a lado sem o
   rotulo do botao quebrar em duas linhas dentro da pilula. Ai o
   contador sobe, centralizado, e o botao fica com a linha inteira. */
@media (max-width: 23rem) {
  .passo__somar { grid-template-columns: 1fr; gap: var(--e4); }
  .passo__somar .quantia { justify-self: center; }
}

/* ── Rituais: a medida na frente ────────────────────
   Eram tres titulos fechados num acordeao sobre fundo escuro. Quem
   chega ali nao clica em nada: fica um bloco preto e mudo, e a regra
   de cada ritual, que e um numero, estava enterrada no fim de um
   paragrafo atras de um clique.

   Agora a medida vem primeiro, no corpo de display, porque ela e a
   regra inteira. O texto ja nasce aberto: nao se pede um gesto para
   ler tres linhas. O movimento entra na chegada, um cartao apos o
   outro, e no ponteiro, que acende a medida em dourado.          */
.ritual {
  position: relative;
  padding-top: var(--e6);
  border-top: 1px solid rgb(var(--linho-rgb) / .18);
}

.ritual__titulo {
  font-family: var(--f-display);
  /* O papel de h3 na pagina e Lora em italico. Este titulo e da fonte
     de display, que nao tem italico desenhado: sem zerar aqui, o
     navegador inclina na marra e sai um traco borrado. */
  font-style: normal; font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3;
  color: var(--linho);
}
.ritual__corpo {
  margin-top: var(--e3);
  font-size: .9375rem; line-height: 1.65;
  color: rgb(var(--linho-rgb) / .68);
  max-width: 34ch;
}

/* o filete dourado corre sob o cartao apontado */
.ritual::after {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px;
  background: var(--ouro); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--curva);
}
.ritual:hover::after, .ritual:focus-within::after { transform: scaleX(1); }

/* ── Chegada: um cartao apos o outro ────────────────
   O atraso vem do indice escrito no HTML, entao a ordem e a mesma que
   se le, e nao depende de o observador disparar na ordem certa. */
.rituais__linha .ritual {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay: calc(var(--ordem, 0) * .12s);
}
.rituais__linha.is-visivel .ritual { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rituais__linha .ritual { opacity: 1; transform: none; transition: none; }
  .ritual::after { transition: none; }
}

@media (max-width: 62rem) {
  .ritual { padding-top: var(--e5); }
  .ritual__corpo { max-width: none; }
}

/* ── Perguntas: vao entre titulos ───────────────────
   Com o recuo morto resolvido sobravam 49px entre uma pergunta e a
   seguinte. No celular a lista inteira precisa caber no polegar. */
@media (max-width: 62rem) {
  .duvida__botao { padding: .8125rem 0; gap: var(--e4); }
}