/* ==========================================================================
   Lu Chocolates · Institucional

   Este é o site raiz da marca e o padrão visual para qualquer página web dela.
   Os tokens, a stack tipográfica e as classes compartilhadas (.env, .display,
   .rotulo, header.topo, footer) vêm de "Site Bolos/assets/style.css" —
   que é o mais evoluído dos dois catálogos. Não reinventar aqui: se algo
   precisar mudar no padrão, muda lá e vem para cá.

   O que NÃO é herdado do Site Bolos: a cor do texto do hero. Lá o fundo é foto
   de estúdio cinza-claro e o texto é cacau. Aqui o hero é a FACHADA da loja,
   fotografada em luz de fim de tarde — muita informação e muito claro. Por isso
   o texto é marfim sobre um véu que sobe do rodapé: funciona com a fachada de
   hoje e com qualquer foto de ambiente que venha a substituí-la.

   Regras da marca (mazyos/identidade/design-guide.md), sem exceção:
   - border-radius: zero. Canto reto em tudo.
   - box-shadow: nenhum. Profundidade se faz com contraste de fundo.
   - Sem preto puro e sem branco puro. O escuro é marrom, o claro é marfim.
   - Dourado é cor sólida, nunca gradiente.
   ========================================================================== */

/* ------------------------------------------------------------- fontes ---- */
/* Servidas do próprio site — nada de CDN.
   A LeagueSpartan.ttf desta pasta é, apesar do nome do arquivo, o corte
   SemiBold. É ela que carrega título, rótulo e botão. */
@font-face{
  font-family:'Arapey'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fontes/Arapey-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Arapey'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fontes/Arapey-Italic.ttf') format('truetype');
}
@font-face{
  font-family:'League Spartan'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fontes/LeagueSpartan.ttf') format('truetype');
}

:root{
  --serifa:'Arapey','Iowan Old Style',Palatino,Georgia,serif;
  --forte:'League Spartan','Avenir Next',system-ui,sans-serif;
  --corpo:'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;

  --papel:#FBF7F0;      /* marfim claro — o fundo de tudo */
  --papel-2:#F2EADE;    /* faixa alternada, quase imperceptível */
  --papel-3:#E9DECD;
  --cacau:#2A1A12;
  --cacau-2:#3A2417;    /* moldura de foto dentro das faixas cacau */
  --tinta:#241710;
  --tinta-2:#5E4938;
  --linha:#DFD0BC;
  --ouro:#B98240;
  --ouro-forte:#8A5A28;
  --alerta:#8A4B2A;

  /* o texto que vive sobre fundo cacau — hero, faixa "visite", rodapé */
  --sobre-cacau:#FBF7F0;
  --sobre-cacau-2:#CDB9A2;
  /* O dourado da paleta (#B98240) é escuro demais para texto miúdo sobre foto:
     no hero ele some no fundo. Este é o mesmo dourado clareado até passar em
     contraste, e só existe para isso. */
  --ouro-claro:#E6C48E;

  --moldura-retrato:3/4;   /* toda foto em pé ocupa exatamente isto */
  --moldura-paisagem:3/2;  /* e toda foto deitada, isto */
}
/* Claro é o padrão para todo mundo, inclusive em sistema no modo escuro —
   mesma decisão do Site Bolos, para que os três sites abram iguais. O tema
   escuro é completo, mas só entra pelo botão. */
:root[data-theme="light"]{
  --papel:#FBF7F0; --papel-2:#F2EADE; --papel-3:#E9DECD; --cacau-2:#3A2417;
  --tinta:#241710; --tinta-2:#5E4938; --linha:#DFD0BC;
  --ouro:#B98240; --ouro-forte:#8A5A28; --alerta:#8A4B2A;
}
:root[data-theme="dark"]{
  --papel:#17100B; --papel-2:#1F1610; --papel-3:#2A1E15; --cacau-2:#241610;
  --tinta:#F2E8DA; --tinta-2:#B9A18A; --linha:#3A2A1D;
  --ouro:#D4A45E; --ouro-forte:#E0B776; --alerta:#D69A6E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--corpo); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance}

.display{
  font-family:var(--forte); font-weight:600; line-height:.98;
  letter-spacing:-.02em; text-transform:none;
}
.rotulo{
  font-family:var(--forte); font-weight:600;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro-forte); margin:0;
}
.env{max-width:1320px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.75rem)}

/* Foco visível em tudo que recebe teclado. Contorno dourado sólido, sem raio —
   o mesmo dourado do resto da página. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ouro); outline-offset:3px;
}

/* Atalho de teclado: fica escondido até receber foco. */
.pular{
  position:absolute; left:-9999px; z-index:100;
  background:var(--cacau); color:var(--sobre-cacau);
  padding:.8rem 1.2rem; text-decoration:none;
  font-family:var(--forte); font-weight:600; font-size:.85rem;
}
.pular:focus{left:0; top:0}

/* ---------------------------------------------------------------- topo ---- */
header.topo{
  position:sticky; top:0; z-index:60;
  background:var(--papel); border-bottom:1px solid var(--linha);
}
.topo-in{display:flex; align-items:center; gap:.7rem; padding-top:.85rem; padding-bottom:.85rem}
/* `flex:none` + `nowrap`: sem os dois, o nome da marca encolhe até quebrar em
   "Lu / Chocolates" e a segunda linha some por baixo do primeiro catálogo. */
.marca{font-family:var(--forte); font-weight:600; font-size:1.15rem;
  letter-spacing:-.01em; text-decoration:none;
  display:flex; align-items:center; gap:.55rem;
  flex:none; white-space:nowrap}
/* O monograma dourado tem degradê — é a única peça da marca onde ele é
   permitido (design-guide: "o logo tem gradiente; a interface, não").
   Altura fixa e `width:auto` para a barra NÃO crescer: ele cabe na altura que
   o texto já ocupava. O PNG é transparente, então serve aos dois temas sem
   segunda versão. */
.marca-logo{height:2.1rem; width:auto; flex:none; display:block}
.marca-sub{font-family:var(--forte); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ouro-forte)}
.topo-nav{margin-left:auto; display:flex; align-items:center; gap:clamp(.7rem,1.8vw,1.4rem)}
.topo-nav a{
  font-family:var(--forte); font-weight:600; font-size:.78rem;
  text-decoration:none; color:var(--tinta-2); white-space:nowrap;
  border-bottom:2px solid transparent; padding-bottom:.15rem;
}
.topo-nav a:hover{color:var(--tinta)}
.topo-nav a[aria-current="true"]{color:var(--tinta); border-bottom-color:var(--tinta)}
/* Os catálogos são o motivo de a página existir, então no cabeçalho eles não
   são "mais um link": ganham contorno e ficam antes de tudo. O separador logo
   depois deixa claro onde termina o que é catálogo e começa o que é seção. */
.topo-nav a.cat-link{
  color:var(--tinta); border:1.5px solid var(--linha); border-bottom-width:1.5px;
  font-size:.92rem; padding:.55rem 1.05rem;
  transition:border-color .16s, background .16s, color .16s;
}
.topo-nav a.cat-link:hover{background:var(--cacau); color:#FBF7F0; border-color:var(--cacau)}
:root[data-theme="dark"] .topo-nav a.cat-link:hover{background:var(--ouro); color:#17100B; border-color:var(--ouro)}
.topo-nav .sep{width:1px; height:18px; background:var(--linha); flex:none}
/* Os catálogos cresceram (pedido do Lucas em 13/08/2026) e a barra ficou
   apertada na faixa do meio, onde AINDA cabe tudo numa linha só: monograma +
   marca + "desde 2004" + 4 catálogos + separador + 3 âncoras + time + tema.
   A ordem de corte é sacrificar o acessório, nunca encolher os catálogos de
   volta — eles são o motivo do pedido. Primeiro sai o "desde 2004" (o logo já
   diz isso), depois aperta o respiro entre os links. */
@media (max-width:1180px){
  .marca-sub{display:none}
  .topo-nav{gap:clamp(.55rem,1.2vw,.9rem)}
}
/* ---- contato do comercial ---- */
/* Um botão que abre a lista de quem atende. É `hidden` no HTML e o JS controla,
   então quem estiver sem JavaScript não vê um menu morto — vê o telefone do
   <noscript>. */
.time{position:relative; flex:none}
.time-botao{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--forte); font-weight:600; font-size:.78rem;
  background:var(--cacau); color:#FBF7F0; border:1.5px solid var(--cacau);
  padding:.42rem .8rem; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s;
}
.time-botao:hover{background:var(--ouro-forte); border-color:var(--ouro-forte)}
:root[data-theme="dark"] .time-botao{background:var(--ouro); color:#17100B; border-color:var(--ouro)}
.time-botao::after{
  content:''; width:0; height:0; margin-left:.1rem;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .18s;
}
.time-botao[aria-expanded="true"]::after{transform:rotate(180deg)}
.time-lista{
  position:absolute; right:0; top:calc(100% + .55rem); z-index:70;
  min-width:250px; background:var(--papel);
  border:1px solid var(--linha); padding:.3rem;
}
.time-lista .cab{
  font-family:var(--forte); font-weight:600; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-forte);
  padding:.7rem .8rem .5rem;
}
.time-lista a{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.7rem .8rem; border-top:1px solid var(--linha);
}
.time-lista a:hover{background:var(--papel-2)}
.time-lista svg{width:16px; height:16px; fill:var(--ouro-forte); flex:none}
.time-lista .nome{font-family:var(--forte); font-weight:600; font-size:.92rem; display:block}
.time-lista .papel{display:block; font-size:.78rem; color:var(--tinta-2); margin-top:.1rem}

.tema{
  background:transparent; color:var(--tinta-2);
  border:1px solid var(--linha); width:34px; height:34px; cursor:pointer;
  font-size:.9rem; flex:none;
}
/* No celular a barra quebra em duas linhas: em cima marca, contato do time e
   tema; embaixo os catálogos, numa faixa que rola de lado.

   As âncoras de seção saem — quem rola chega nelas de qualquer jeito. Os
   catálogos e o contato do time FICAM: são as duas coisas que o cabeçalho
   existe para oferecer, e é no celular que mais se usa as duas.

   ⚠️ A quebra era em 860px e subiu para 1060px quando os catálogos cresceram
   (13/08/2026). Medido: entre 860 e ~1060 a linha única não segura mais
   monograma + marca + 4 catálogos maiores + 3 âncoras + time + tema, e o
   sintoma não é um estouro visível — é o nome da marca passando POR BAIXO do
   primeiro catálogo. Antes de baixar este número de novo, medir. */
@media (max-width:1060px){
  .topo-in{flex-wrap:wrap; row-gap:.65rem}
  .marca{order:1}
  .marca-sub{display:none}
  .time{order:2; margin-left:auto}
  .tema{order:3}
  .topo-nav{
    order:4; flex-basis:100%; margin-left:0; gap:.4rem;
    overflow-x:auto; scrollbar-width:none;
  }
  .topo-nav::-webkit-scrollbar{display:none}
  .topo-nav a:not(.cat-link), .topo-nav .sep{display:none}
  /* Aqui eles têm uma linha inteira só para si, então crescem também — só não
     tanto quanto no desktop, senão cabem menos de quatro na tela e o quarto
     fica escondido no rolamento. */
  .topo-nav a.cat-link{padding:.46rem .82rem; font-size:.82rem}
}
@media (max-width:400px){
  .marca{font-size:1rem}
  .time-botao{font-size:.72rem; padding:.4rem .6rem}
  .time-lista{min-width:min(250px,78vw)}
}

/* ---------------------------------------------------------------- hero ---- */
.hero{
  position:relative;
  min-height:min(92svh,860px);
  display:flex; align-items:flex-end;
  background:var(--papel-3);
  overflow:hidden;
}
.hero-quadro{position:absolute; inset:0; overflow:hidden}
.hero-quadro img{width:100%; height:100%; object-fit:cover; object-position:60% 58%}

/* A foto se aproxima da PORTA, não do centro do quadro. O `transform-origin`
   em 74%/60% é a posição da entrada aberta dentro da foto — foi medido na
   imagem, não estimado: trocar a foto da fachada exige medir de novo, senão o
   zoom passa a puxar para um pedaço de parede.

   Começa já dentro do passo (1.06) e vai a 1.26 em vinte segundos: é caminhada
   em direção à porta, não um respiro de foto. `forwards` porque a animação
   termina e fica — ir e voltar em laço vira aquário e chama atenção para si
   mesma o tempo todo. A curva desacelera no fim, como quem chega. */
@keyframes aproximar-da-porta{
  from{ transform:scale(1.06) }
  to  { transform:scale(1.26) }
}
.hero-quadro img{
  transform-origin:74% 60%;
  animation:aproximar-da-porta 20s cubic-bezier(.25,.6,.3,1) forwards;
  will-change:transform;
}
/* No celular a tela é alta e estreita: o corte come as laterais e a porta, que
   fica a 72% da largura, sai de quadro — justamente o ponto para onde o zoom
   caminha. Aqui o enquadramento anda para a direita para mantê-la visível. */
@media (max-width:760px){
  .hero-quadro img{object-position:68% 56%}
}

/* Quem pediu menos movimento não recebe nenhum: a foto fica parada e enquadrada
   como está. A página não perde nada — o zoom é atmosfera, não informação. */
@media (prefers-reduced-motion:reduce){
  .hero-quadro img{animation:none; transform:none}
}

/* O véu faz duas coisas. A primeira é leitura: garante contraste para o texto
   claro em qualquer foto que entre aqui, inclusive uma fachada em pleno sol.
   A segunda é a costura com a página — a faixa de papel no topo dissolve a
   linha reta entre a foto e o cabeçalho marfim. */
.hero-veu{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--papel) 0%, rgba(251,247,240,0) 9%),
    linear-gradient(0deg, rgba(24,14,9,.90) 0%, rgba(24,14,9,.66) 30%,
                          rgba(24,14,9,.28) 55%, rgba(24,14,9,0) 78%);
}
:root[data-theme="dark"] .hero-veu{
  background:
    linear-gradient(180deg, var(--papel) 0%, rgba(23,16,11,0) 9%),
    linear-gradient(0deg, rgba(12,7,4,.93) 0%, rgba(12,7,4,.72) 30%,
                          rgba(12,7,4,.34) 55%, rgba(12,7,4,0) 78%);
}

.hero-in{
  position:relative; z-index:2; width:100%;
  padding-top:clamp(3rem,10vh,6rem);
  padding-bottom:clamp(2rem,5vh,3.6rem);
}
.hero .rotulo{color:var(--ouro-claro); font-size:.72rem}
/* Caixa alta com letter-spacing positivo: sem ele as maiúsculas colam. */
.hero h1{
  font-size:clamp(2rem,5.2vw,4.2rem); margin:.5rem 0 0; max-width:17ch;
  color:var(--sobre-cacau); line-height:1.02;
  text-transform:uppercase; letter-spacing:.005em;
}
.hero .lede{
  margin:1.1rem 0 0; max-width:42ch; font-size:clamp(1rem,1.35vw,1.18rem);
  color:var(--sobre-cacau-2);
}
.hero-acao{margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
.link-seco{
  font-family:var(--forte); font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sobre-cacau); text-decoration:none;
  border-bottom:1px solid rgba(251,247,240,.4); padding-bottom:.2rem;
}
.link-seco:hover{border-bottom-color:var(--sobre-cacau)}

/* Tela baixa e larga (notebook de 13") não tem altura sobrando. */
@media (min-width:900px) and (max-height:820px){
  .hero{min-height:min(94svh,760px)}
  .hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
  .hero-acao{margin-top:1.2rem}
}

/* ---------------------------------------------------------------- botões --- */
/* Um sistema só: `.botao` é o cheio, `.botao.vazado` é o de contorno. O ícone do
   WhatsApp é só um filho — quem decide se ele aparece é o destino do link, no
   app.js. Sem raio e sem sombra, como o resto da marca. */
.botao{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--cacau); color:#FBF7F0; text-decoration:none;
  font-family:var(--forte); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; padding:.85rem 1.4rem; cursor:pointer;
  border:1.5px solid var(--cacau);
  transition:background .18s, color .18s, border-color .18s;
}
.botao:hover{background:var(--ouro-forte); border-color:var(--ouro-forte)}
.botao svg{width:17px; height:17px; fill:currentColor; flex:none}
.botao.vazado{background:transparent; color:var(--tinta); border-color:var(--linha)}
.botao.vazado:hover{background:var(--cacau); color:#FBF7F0; border-color:var(--cacau)}
:root[data-theme="dark"] .botao{background:var(--ouro); color:#17100B; border-color:var(--ouro)}
:root[data-theme="dark"] .botao:hover{background:var(--ouro-forte); border-color:var(--ouro-forte)}
:root[data-theme="dark"] .botao.vazado{background:transparent; color:var(--tinta); border-color:var(--linha)}
:root[data-theme="dark"] .botao.vazado:hover{background:var(--ouro); color:#17100B; border-color:var(--ouro)}

/* Sobre fundo escuro — hero, catálogos, visite — o cacau some no fundo: ali o
   cheio é dourado e o vazado é marfim. */
.hero .botao, .vitrine .botao, .visite .botao{
  background:var(--ouro); color:#17100B; border-color:var(--ouro);
}
.hero .botao:hover, .vitrine .botao:hover, .visite .botao:hover{
  background:var(--sobre-cacau); color:var(--cacau); border-color:var(--sobre-cacau);
}
.hero .botao.vazado, .vitrine .botao.vazado, .visite .botao.vazado{
  background:transparent; color:var(--sobre-cacau); border-color:rgba(251,247,240,.45);
}
.hero .botao.vazado:hover, .vitrine .botao.vazado:hover, .visite .botao.vazado:hover{
  background:var(--sobre-cacau); color:var(--cacau); border-color:var(--sobre-cacau);
}

/* --------------------------------------------------------------- números --- */
/* A prova antes do argumento: quem chega vê o tamanho da operação em seis
   números, sem precisar ler um parágrafo. Sem card, sem ícone, sem caixa — o
   que separa um número do outro é o fio de 1px e o espaço. */
.numeros{padding:clamp(2.6rem,6vw,4.2rem) 0; border-bottom:1px solid var(--linha)}
/* Três colunas, não `auto-fit`: são seis números, e `auto-fit` cabia cinco na
   primeira fileira e deixava o sexto sozinho na segunda. 3×2 fecha sempre. */
.numeros-grade{
  margin:clamp(1.4rem,3vw,2rem) 0 0; display:grid; gap:0 clamp(2rem,9vw,8rem);
  grid-template-columns:repeat(2,1fr);
}
.numeros-grade dt{font-size:clamp(2.4rem,5.4vw,3.8rem)}
@media (max-width:520px){ .numeros-grade{grid-template-columns:1fr} }

/* ---- os setores atendidos ---- */
/* Aqui o argumento contra "isso é pequeno" não é um número, é a lista: quem lê
   descobre que a mesma casa monta um chá revelação e uma festa de 100 anos.
   Duas colunas de <dt>/<dd> separadas por fio, sem ícone e sem caixa. */
.setores{margin-top:clamp(2.4rem,5vw,3.6rem)}
.setores h2{font-size:clamp(1.7rem,3.8vw,2.6rem); max-width:22ch}
.setores-lista{
  margin:clamp(1.4rem,3vw,2rem) 0 0; display:grid; gap:0 clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:repeat(2,1fr);
}
.setores-lista .item{
  display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(.6rem,1.6vw,1.4rem);
  padding:.95rem 0; border-top:1px solid var(--linha);
}
.setores-lista dt{
  font-family:var(--forte); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--tinta);
}
.setores-lista dd{margin:0; color:var(--tinta-2); font-size:.95rem}
/* Setor sem descrição não deixa buraco: o nome toma a linha inteira. */
.setores-lista .item.so-nome{grid-template-columns:1fr}
@media (max-width:820px){
  .setores-lista{grid-template-columns:1fr}
}
@media (max-width:460px){
  .setores-lista .item{grid-template-columns:1fr; gap:.25rem}
}
.numeros-grade .item{padding:1.2rem 0; border-top:1px solid var(--linha)}
.numeros-grade dt{
  font-family:var(--forte); font-weight:600; line-height:1;
  font-size:clamp(2.1rem,4.4vw,3rem); letter-spacing:-.03em; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.numeros-grade dd{margin:.55rem 0 0}
.numeros-grade .quem{
  display:block; font-family:var(--forte); font-weight:600; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ouro-forte);
}
.numeros-grade .nota{display:block; margin-top:.3rem; color:var(--tinta-2); font-size:.9rem}

/* ------------------------------------------------------------- catálogos --- */
/* A seção de maior peso da página. Fundo cacau para separar do resto e dois
   blocos grandes lado a lado — é o destino que a página inteira serve. */
.vitrine{background:var(--cacau); color:var(--sobre-cacau-2);
  padding:clamp(3.4rem,8vw,6rem) 0}
.vitrine-cab{max-width:44ch}
.vitrine .rotulo{color:var(--ouro)}
.vitrine h2{font-size:clamp(2rem,5vw,3.6rem); margin:.6rem 0 0; color:var(--sobre-cacau)}
.vitrine .lede{margin:1.1rem 0 0; font-size:1.05rem}
/* Quatro colunas explícitas: com `auto-fit` os quatro cartões viravam três
   mais um órfão na linha de baixo. */
.vitrine-grade{
  margin-top:clamp(2.2rem,5vw,3.4rem);
  display:grid; gap:clamp(1.8rem,3.4vw,2.6rem);
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1080px){ .vitrine-grade{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .vitrine-grade{grid-template-columns:1fr} }
.vitrine-item figure{margin:0}
.vitrine-item .quadro{
  display:block; width:100%; aspect-ratio:var(--moldura-paisagem);
  overflow:hidden; background:var(--cacau-2);
}
.vitrine-item .quadro img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* A foto não é link — o botão é. Envolver a imagem num <a> criaria uma segunda
   parada de teclado para o mesmo destino, e escondê-la do leitor de tela com
   `aria-hidden` jogaria fora a descrição do `alt`. O zoom responde ao bloco
   inteiro, então passar o mouse na foto continua reagindo. */
.vitrine-item:hover .quadro img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .vitrine-item .quadro img{transition:none}
  .vitrine-item:hover .quadro img{transform:none}
}
.vitrine-item h3{font-size:clamp(1.6rem,2.6vw,2rem); margin:1.3rem 0 0; color:var(--sobre-cacau)}
.vitrine-item p{margin:.85rem 0 0; max-width:46ch; font-size:.95rem}
.vitrine-item .detalhe{
  margin:1.1rem 0 0; padding-top:.9rem;
  border-top:1px solid rgba(205,185,162,.28);
  font-family:var(--forte); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro);
}
.vitrine-item .acao{margin-top:1.5rem}

/* ------------------------------------------------------------ história ---- */
.historia{padding:clamp(3.4rem,8vw,6.5rem) 0; border-bottom:1px solid var(--linha)}
.historia-cab{margin-bottom:clamp(2rem,4vw,3rem)}
/* `max-width` em ch para o título fechar em DUAS linhas ("Começou numa" /
   "cozinha de casa"). Sem ele o título herdava a largura da coluna e quebrava
   em quatro. */
.historia-cab h2{font-size:clamp(2rem,4.4vw,3.2rem); margin:.6rem 0 0; max-width:15ch}
.historia-corpo{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

/* A linha do tempo é uma <ol> com um fio vertical à esquerda. O ano é o
   elemento gráfico — League Spartan grande, dourado — e não um marcador
   desenhado. Sem ícone, sem bolinha, sem card. */
.historia-linha ol{list-style:none; margin:0; padding:0}
.historia-linha li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(.9rem,2.4vw,1.8rem);
  padding:1.15rem 0; border-top:1px solid var(--linha);
}
.historia-linha li:first-child{border-top:0; padding-top:0}
.historia-linha .ano{
  font-family:var(--forte); font-weight:600; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--ouro-forte); line-height:1.35;
}
.historia-linha .texto{margin:0; color:var(--tinta-2); font-size:1rem}

.historia-lado figure{margin:0}
.historia-lado .quadro{
  display:block; width:100%; aspect-ratio:var(--moldura-retrato);
  overflow:hidden; background:var(--papel-3);
}
.historia-lado .quadro img{width:100%; height:100%; object-fit:cover}
.historia-lado figcaption{margin-top:1.3rem}
/* A citação é o único lugar do site em Arapey grande. É a voz da Luciana, em
   primeira pessoa — a serifa existe para marcar que ali quem fala é gente. */
.historia-lado blockquote{
  margin:0; font-family:var(--serifa);
  font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.35; color:var(--tinta);
}
.historia-lado blockquote::before{content:'\201C'}
.historia-lado blockquote::after{content:'\201D'}
.historia-lado cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-family:var(--forte); font-weight:600; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-2);
}

@media (max-width:900px){
  .historia-corpo{grid-template-columns:1fr; gap:2.4rem}
  .historia-cab h2{max-width:none}
  .historia-linha li{grid-template-columns:4.2rem 1fr}
}

/* -------------------------------------------------------------- operação --- */
.operacao{padding:clamp(3.4rem,8vw,6rem) 0 clamp(2rem,4vw,3rem); background:var(--papel-2)}
.operacao-cab{max-width:46ch}
.operacao-cab h2{font-size:clamp(2rem,4.8vw,3.4rem); margin:.6rem 0 0}
.operacao-cab .lede{margin:1.1rem 0 0; color:var(--tinta-2); font-size:1.05rem}

/* A faixa larga entre o título e os blocos. Sangra de ponta a ponta (fora do
   `.env`) e é bem baixa — serve de respiro e de textura, não de ilustração de
   nada. Proporção 3:1, que é o que a foto foi cortada para ser. */
.operacao-faixa{margin:clamp(2rem,4.5vw,3.2rem) 0 0; position:relative}
.operacao-faixa img{
  width:100%; height:clamp(260px,30vw,380px); object-fit:cover; object-position:center 62%;
  display:block;
}
/* O véu escurece SÓ o topo e some antes do meio. Medi a foto antes de escrever
   isto: a região de cima tem luminância média 0,53 e desvio 0,29 — ou seja, não
   é fundo liso, é tão agitada quanto o resto. Texto claro cru daria 1,7:1 de
   contraste, muito abaixo dos 4,5:1. O degradê resolve sem chapar a imagem
   inteira: onde está o texto ele pesa, onde estão os doces ele não existe. */
.operacao-faixa .faixa-fala{
  position:absolute; inset:0 0 auto 0;
  padding:clamp(1.4rem,3.4vw,2.4rem) 0 clamp(2.6rem,7vw,4.5rem);
  background:linear-gradient(to bottom,
    rgba(24,15,10,.92) 0%, rgba(24,15,10,.78) 42%, rgba(24,15,10,0) 100%);
  color:var(--sobre-cacau);
  pointer-events:none;
}
/* O mesmo dourado claro do hero: o `--ouro` da marca (#B98240) é escuro demais
   para viver sobre foto. Ver a nota em :root. */
.operacao-faixa .rotulo{color:var(--ouro-claro)}
.operacao-faixa .display{
  font-size:clamp(1.5rem,3.4vw,2.4rem); margin:.5rem 0 0;
  color:var(--sobre-cacau); max-width:20ch;
}
.operacao-faixa .faixa-linha{
  margin:.7rem 0 0; max-width:46ch; font-size:clamp(.9rem,1.5vw,1rem);
  color:rgba(251,247,240,.86);
}
/* No celular a faixa 3:1 teria uns 130px de altura e o texto não caberia por
   cima de jeito nenhum. Ela cresce, e a foto é cortada pelas laterais — o que
   ela mostra é uma fileira que se repete, então perder as pontas não custa
   nada. */
@media (max-width:640px){
  .operacao-faixa img{height:300px; object-position:center 70%}
  .operacao-faixa .faixa-fala{
    background:linear-gradient(to bottom,
      rgba(24,15,10,.94) 0%, rgba(24,15,10,.82) 52%, rgba(24,15,10,0) 100%);
  }
}

/* Faixa editorial: foto grande de um lado, texto do outro, alternando. Nada de
   grade de cards — ver a nota no topo deste arquivo e PLANO.md §12.3. */
.frente{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4.5vw,4rem); align-items:center;
  padding:clamp(2.6rem,6vw,4.5rem) 0;
  border-top:1px solid var(--linha);
}
/* Cada bloco vem embrulhado no seu próprio `.env`, então `.frente` é sempre
   filho único — `:first-of-type` pegaria todos. O respiro depois do cabeçalho
   fica no contêiner. */
#blocos{margin-top:clamp(2.4rem,5vw,3.6rem)}
/* A alternância é o ritmo da seção: ímpares com a foto à esquerda, pares com a
   foto à direita. Quem marca é o JS (`.espelhada`) — ver a nota em app.js. É
   `order` e não `direction` porque `order` não mexe na ordem de leitura do
   leitor de tela. */
.frente.espelhada .frente-foto{order:2}
.frente-foto .quadro{
  display:block; width:100%; aspect-ratio:var(--moldura-paisagem);
  overflow:hidden; background:var(--papel-3);
}
.frente-foto img{width:100%; height:100%; object-fit:cover}
.frente-texto h3{font-size:clamp(1.7rem,3.6vw,2.6rem); margin:.6rem 0 0}
.frente-texto p{margin:1rem 0 0; max-width:52ch; color:var(--tinta-2); font-size:1.03rem}
.frente-texto .detalhe{
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--linha);
  font-family:var(--forte); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
  max-width:none;
}
.frente-texto .cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem;
  font-family:var(--forte); font-weight:600; font-size:.84rem;
  letter-spacing:.02em; text-decoration:none; color:var(--tinta);
  border:1.5px solid var(--linha); padding:.68rem 1.15rem;
  transition:border-color .16s, background .16s, color .16s;
}
.frente-texto .cta:hover{border-color:var(--cacau); background:var(--cacau); color:#FBF7F0}
:root[data-theme="dark"] .frente-texto .cta:hover{background:var(--ouro); color:#17100B; border-color:var(--ouro)}
.frente-texto .cta::after{content:'\2192'}

@media (max-width:860px){
  .frente{grid-template-columns:1fr; gap:1.4rem}
  .frente.espelhada .frente-foto{order:0}
}

/* --------------------------------------------------------------- visite ---- */
/* Única faixa escura fora do rodapé. Marca o fechamento da página. */
.visite{background:var(--cacau); color:var(--sobre-cacau-2);
  padding:clamp(3.4rem,8vw,6rem) 0}
.visite .rotulo{color:var(--ouro)}
.visite h2{font-size:clamp(2rem,5vw,3.6rem); margin:.6rem 0 0;
  color:var(--sobre-cacau); max-width:16ch}
.visite .lede{margin:1.2rem 0 0; max-width:52ch; font-size:1.05rem}
.visite-dados{
  margin:clamp(2.2rem,5vw,3.2rem) 0 0; display:grid; gap:0 clamp(1.4rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.visite-dados .item{padding:1.1rem 0; border-top:1px solid rgba(205,185,162,.28)}
.visite-dados dt{
  font-family:var(--forte); font-weight:600; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.visite-dados dd{margin:.45rem 0 0; color:var(--sobre-cacau); font-size:1rem}
.visite-dados dd small{display:block; color:var(--sobre-cacau-2); font-size:.85rem; margin-top:.15rem}
.visite-acao{margin-top:2.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem}
.visite .link-seco{color:var(--sobre-cacau)}

/* --------------------------------------------------------------- rodapé ---- */
footer{background:var(--cacau); color:var(--sobre-cacau-2); padding:clamp(2.6rem,5vw,3.8rem) 0;
  border-top:1px solid rgba(205,185,162,.22)}
footer h2{color:var(--sobre-cacau); font-family:var(--forte); font-weight:600; font-size:1.4rem}
.rodape{display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rodape > *{min-width:0}
.rodape p{margin:.5rem 0 0}
footer a{color:var(--sobre-cacau)}
footer .rotulo{color:var(--ouro)}
footer .creditos{margin:2.4rem 0 0; padding-top:1.3rem;
  border-top:1px solid rgba(205,185,162,.22); font-size:.8rem}

/* -------------------------------------------------------------- sem js ---- */
.sem-js{background:var(--papel-2); border-bottom:1px solid var(--linha);
  padding:1.4rem 0; font-size:.95rem}