/* ═══════════════════════════════════════════════════════════════════════
   lp-brada.css — O SISTEMA VISUAL DAS LANDING PAGES DA BRADA
   ───────────────────────────────────────────────────────────────────────
   Nasceu na `assinatura-empresas.html` (17/09/2026) e foi extraído para cá
   no mesmo dia, DEPOIS de a página ser aprovada e auditada. Ou seja: este
   arquivo não é uma proposta — é o CSS que renderiza uma página que passou
   por polish pass com zero achado ALTO em 360, 375, 390, 768 e 1440px.

   POR QUE ELE EXISTE
   O `design-system-brada` (a skill) já descrevia a marca em prosa e em
   tokens, e mesmo assim eu repeti o MESMO erro de `aspect-ratio` três vezes
   nesta página. Documento não garante consistência; código compartilhado
   garante. Toda LP nova começa daqui em vez de copiar CSS à mão.

   COMO USAR NUMA LP NOVA
     <link rel="stylesheet" href="assets/style.css">      <- tokens e fontes do site
     <link rel="stylesheet" href="assets/lp-brada.css">   <- este arquivo
   e o `<main>` recebe `class="emp"`. O prefixo `emp-` é histórico (veio de
   "empresas") e hoje significa apenas "componente de LP" — renomear seria
   churn sem ganho. Ver `referencia/PADRAO-LP-BRADA.md`.

   ⚠️ AS QUATRO ARMADILHAS MEDIDAS NESTA PÁGINA. Cada uma custou um bug real,
   e cada uma está comentada no ponto onde importa, mais abaixo:
     1. `aspect-ratio` SEM `width:100%` faz a caixa crescer em LARGURA a
        partir da altura. Deu 597px num viewport de 375. Aconteceu 3 vezes.
     2. `ch` NÃO é a largura média do caractere — é a do glifo "0", que na
        Jost vale ~0,68em. `max-width:64ch` entregou 87 caracteres.
     3. `minmax(20rem,1fr)` cria um piso de 320px que estoura coluna de
        335px. Use `minmax(min(20rem,100%),1fr)`.
     4. Nome de imagem é VERSIONADO porque `/assets/img/` é `immutable` por
        um ano no `vercel.json`. Trocar o conteúdo mantendo o nome não chega
        a quem já abriu a página.

   A paleta B2B (chocolate) divergindo do verde do site é decisão ABERTA da
   Gabi — item B1 do Radar. Ver `biblioteca/references/design-assinatura-empresas.md`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   LP · Assinatura Brada para Empresas
   ───────────────────────────────────────────────────────────────────────
   DESENHADA A PARTIR DAS COMPS DA GABRIELLA (16/09/2026) e REVISADA com
   o áudio de feedback dela (17/09/2026, 11h57–12h08). A extração da
   linguagem visual está em
   `biblioteca/references/design-assinatura-empresas.md`; a §7 da skill
   `design-system-brada` registra as divergências com o sistema.

   Por que esta página não usa a paleta do resto do site: as comps da linha
   B2B trocam o campo VERDE-MATA por CACAU/CHOCOLATE. O verde aparece nelas
   só no uniforme da chef, como elemento de foto. Divergência aberta 🟡 —
   a Gabi decide se o chocolate substitui o verde nesta linha.

   ⚠️ A REGRA DE TOM QUE MANDA AQUI (Gabi, 17/09): esta página NÃO vende
   conveniência. "Uma decisão no ano, não doze" foi cortado por ser frio —
   nas palavras dela, "isso é 'compre o kit festa e não se preocupa', e não
   é isso que a gente vende, senão a gente vai competir por preço". O que
   se vende é O IMPACTO NA EQUIPE. Praticidade entra DEPOIS, como reforço,
   nunca como argumento principal. Ao mexer no texto, releia isto.

   ⚠️ E O CLIENTE NUNCA "ESCOLHE O TAMANHO DO BOLO". Ele conta quantas
   pessoas tem no time e a Brada, como especialista, monta a composição.
   Era o erro mais repetido da versão anterior, em três lugares.

   ⚠️ NOME DE IMAGEM É VERSIONADO AQUI, E ISSO NÃO É CAPRICHO. O vercel.json
   manda `Cache-Control: max-age=31536000, immutable` em /assets/img/ — o
   navegador guarda por um ANO e NUNCA revalida. Trocar o conteúdo de um
   arquivo mantendo o nome não chega a quem já abriu a página. Ao substituir
   uma imagem, SUBA O SUFIXO e troque a referência.

   ⚠️ NÃO USE O PREFIXO `foto-NN.jpg`: já é a galeria do site (88 fotos,
   foto-01 a foto-91). As fotos desta LP são `emp-foto-NN-*`.

   Página de VENDA: sem menu, um destino (o formulário), e o formulário
   abre o WhatsApp no mesmo gesto do clique (regra 9 do CLAUDE.md).

   MODO REVISÃO: abra com `?revisao=1` para ver o número de cada seção e
   de cada foto — é o que a Gabi pediu para poder dizer "a foto 2 é essa".
   ═══════════════════════════════════════════════════════════════════════ */

.emp{
  /* Paleta da linha B2B. Hex por leitura das comps — amostrar do arquivo
     editável da Gabi antes de virar token oficial do sistema. */
  --choc:#3B2416;          /* campo escuro — no lugar do verde */
  --choc-fundo:#2B1A0F;    /* tarja de pilares, o mais escuro */
  --cr:#F2ECE0;            /* creme que PREDOMINA */
  --cr2:#E8E0CE;           /* segundo creme — mais ESCURO que o creme */
  --bronze:#A8823C;        /* logotipo e filete. Ornamento. */
  --tin:#2B1C12;           /* tinta — 12,7:1 no creme */
  --sec:#5C3D28;           /* texto secundário — 7,9:1 no creme */

  /* Fontes: as sancionadas. O display faz o papel que nas comps é da
     serifada. Se a Gabi liberar uma serifada, é só trocar aqui. */
  --disp:var(--titulo);

  --gut:clamp(1.2rem,5vw,4.5rem);
  background:var(--cr);color:var(--tin);
  font-family:var(--texto);font-weight:400
}
.emp *{box-sizing:border-box}
.emp section{position:relative}
.emp p{margin:0}

/* ── o logotipo ───────────────────────────────────────────────────────
   Nas comps o wordmark é bronze sobre creme (2,87:1). Isso é permitido:
   a WCAG isenta logotipo e nome de marca do limiar de contraste. NENHUM
   outro texto da página usa bronze sobre claro. */
.emp-marca{display:block;line-height:1}
.emp-marca b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:.2em;color:var(--bronze);
  text-transform:uppercase;text-indent:.2em}
.emp-marca i{display:block;font-family:var(--script);font-style:normal;
  font-size:clamp(1.1rem,2.4vw,1.75rem);color:var(--bronze);
  margin-top:-.1em;padding-left:.9em;letter-spacing:.02em}

/* ── o rótulo empilhado: a assinatura da linha ────────────────────────
   3 a 5 linhas de 1 a 3 palavras, caixa alta, tracking largo, peso leve,
   com filete dourado curto. Não é texto corrido em maiúsculas. */
.emp-rot{font-weight:500;font-size:max(.75rem,clamp(.72rem,1.05vw,.86rem));
  letter-spacing:.22em;text-transform:uppercase;line-height:2;color:var(--sec)}
.emp-rot--claro{color:#E4D9C4}
.emp-fil{display:block;width:2.6rem;height:2px;background:var(--bronze);border:0;
  margin:1.1rem 0}
.emp-fil--centro{margin-inline:auto}

/* ── títulos ─────────────────────────────────────────────────────────── */
.emp-t{font-family:var(--disp);font-weight:400;color:var(--tin);line-height:1.08;
  font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:.01em}
.emp-t--g{font-size:clamp(2.2rem,5.2vw,3.7rem)}
.emp-sub{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;color:var(--sec);
  max-width:31em}
.emp-sub b{font-weight:500;color:var(--tin)}
.emp-corpo{font-size:1.02rem;line-height:1.66;color:var(--sec)}
.emp-corpo b{font-weight:500;color:var(--tin)}

/* ═══ HERO ═══════════════════════════════════════════════════════════════
   REESTRUTURADO em 17/09. Antes a foto era fundo de toda a seção e os dois
   painéis creme ficavam POR CIMA dela — o que escondia os rostos da equipe
   (os painéis ocupavam ~54% da altura e os rostos vivem no terço superior
   da foto). A Gabi pediu a foto da equipe como primeiro impacto; o Bender
   tinha rejeitado justamente porque não se via ninguém.

   A solução é estrutural, não de enquadramento: os painéis viram a PRIMEIRA
   linha do grid e a foto a SEGUNDA. Ninguém cobre ninguém, e a foto ganha
   altura própria. As ações ficam sobre a base da foto, onde o véu protege. */
.emp-hero{display:grid;grid-template-rows:auto 1fr;background:var(--cr)}
.emp-hero__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  align-items:start;gap:clamp(1rem,3vw,2.6rem)}
.emp-hero__painel{padding:clamp(1.8rem,3.4vw,3rem) clamp(1.4rem,3vw,3rem)
  clamp(1.4rem,2.6vw,2rem) var(--gut)}
.emp-hero__painel .emp-rot{margin-top:1.6rem}
.emp-hero__painel .emp-t{margin-top:.2rem}
.emp-hero__lado{padding:clamp(1.8rem,3.4vw,3rem) var(--gut)
  clamp(1.4rem,2.6vw,2rem) clamp(1.4rem,3vw,2.6rem)}
.emp-hero__lado .emp-corpo{font-size:.98rem;max-width:18em}
/* `aspect-ratio` = a foto inteira, sem corte, no desktop. Era o "zoom out"
   que a Gabi pediu: o problema não era o enquadramento, era o `cover` num
   painel mais baixo que a proporção da foto cortando 26% da altura.
   No celular a proporção daria uma faixa de 200px — aí o min-height entra
   e o cover volta, porque tira mais foto ter altura do que ter tudo. */
.emp-hero__foto{position:relative;width:100%;aspect-ratio:1024/576;
  min-height:min(44svh,360px);overflow:hidden;background:var(--choc);
  display:flex;align-items:flex-end}
.emp-hero__foto > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%}
/* Véu só na base, onde ficam os botões: a foto da equipe é clara (L≈81
   medido) e escurecê-la inteira apagaria o que ela tem de melhor. */
.emp-hero__foto::after{content:"";position:absolute;inset:auto 0 0;height:58%;
  background:linear-gradient(to top,rgba(24,13,6,.88) 0%,rgba(24,13,6,.52) 40%,
    transparent 100%);pointer-events:none}
.emp-hero__acoes{position:relative;z-index:1;display:flex;flex-wrap:wrap;
  gap:.8rem 1.2rem;align-items:center;width:100%;
  padding:0 var(--gut) clamp(1.6rem,3vw,2.4rem)}
.emp-hero__acoes .emp-rot--claro{letter-spacing:.14em;line-height:1.5}
/* O `botao--vazado` do site tem borda e texto escuros: sobre a foto ele
   desaparecia por completo. Aqui ele vira claro. */
.emp-hero__acoes .botao--vazado{border-color:#E4D9C4;color:var(--cr);background:transparent}
.emp-hero__acoes .botao--vazado:hover{background:rgba(242,236,224,.14);border-color:var(--cr)}

/* ═══ TARJA DE PILARES ══════════════════════════════════════════════════ */
.emp-pilares{background:var(--choc-fundo);padding:1.4rem var(--gut);overflow:hidden}
.emp-pilares__in{max-width:74rem;margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem 2rem}
.emp-pilares__lista{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  font-size:max(.75rem,clamp(.7rem,1vw,.82rem));letter-spacing:.22em;text-transform:uppercase;
  color:#E4D9C4}
.emp-pilares__lista i{width:1px;height:1.1em;background:var(--bronze);font-style:normal}
.emp-pilares__ass{font-size:max(.74rem,clamp(.68rem,.95vw,.78rem));letter-spacing:.2em;
  text-transform:uppercase;color:#C9B894;line-height:1.9;text-align:right}

/* ═══ FAIXA LARGA: foto sangrada + texto em duas colunas ═══════════════ */
.emp-faixa{background:var(--cr)}
.emp-faixa__foto{overflow:hidden;max-height:76svh}
.emp-faixa__foto img{width:100%;height:100%;object-fit:cover;display:block}
.emp-faixa__txt{max-width:74rem;margin-inline:auto;
  padding:clamp(2.6rem,5.5vw,4.4rem) var(--gut);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  gap:1.4rem 3.4rem;align-items:start}
.emp-faixa__txt .emp-corpo + .emp-corpo{margin-top:.9rem}

/* ═══ blocos simples ════════════════════════════════════════════════════ */
.emp-bl{padding:clamp(3.2rem,7vw,6rem) var(--gut)}
.emp-bl--cr2{background:var(--cr2)}
.emp-bl--choc{background:var(--choc)}
.emp-bl--choc .emp-t{color:var(--cr)}
.emp-bl--choc .emp-sub,.emp-bl--choc .emp-corpo{color:#E4D9C4}
.emp-bl--choc .emp-sub b,.emp-bl--choc .emp-corpo b{color:#FFF}
.emp-bl__in{max-width:74rem;margin-inline:auto}
.emp-bl__in--estreito{max-width:50rem}
.emp-centro{text-align:center}
.emp-centro .emp-sub{margin-inline:auto;max-width:34em}

/* ═══ mosaico: foto de um lado, texto do outro ═════════════════════════ */
.emp-mosaico{display:grid;grid-template-columns:.92fr 1.08fr}
.emp-mosaico--inv{grid-template-columns:1.08fr .92fr}
.emp-mosaico__foto{position:relative;min-height:28rem;background:var(--choc);
  overflow:hidden}
.emp-mosaico__foto img{width:100%;height:100%;object-fit:cover;display:block}
.emp-mosaico__txt{background:var(--cr);padding:clamp(2.6rem,6vw,5.4rem) clamp(1.4rem,5vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center}
.emp-mosaico__txt--cr2{background:var(--cr2)}
.emp-mosaico__txt .emp-corpo{max-width:26em;margin-top:1.2rem}

/* ═══ passos numerados ════════════════════════════════════════════════ */
.emp-passos{display:grid;gap:1.8rem;margin-top:2.6rem;max-width:36rem}
.emp-passo{display:grid;grid-template-columns:2.6rem 1fr;gap:1.1rem;align-items:start}
.emp-passo b{font-family:var(--disp);font-weight:400;font-size:2rem;line-height:.9;
  color:var(--bronze)}
.emp-passo p{font-size:1rem;line-height:1.5;color:var(--sec)}
.emp-passo p strong{font-weight:500;color:var(--tin)}
/* duas colunas quando o bloco ocupa a largura toda (sem foto ao lado) */
.emp-passos--duas{max-width:none;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:1.8rem 3.4rem}

/* ═══ AS COMPOSIÇÕES ════════════════════════════════════════════════════
   Quatro colunas com o conteúdo inteiro de cada categoria (copy oficial do
   Bender, 17/09). São <details open>: no desktop leem-se como colunas
   abertas; no celular, onde quatro cartões longos viram uma rolagem
   enorme, a pessoa pode fechar as que não interessam. A Gabi tinha pedido
   "clica e abre" e o Bender pediu "colunas com o conteúdo" — `open`
   atende os dois sem JavaScript. */
.emp-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.1rem;margin-top:2.8rem;align-items:start}
.emp-comp__c{background:var(--cr);border-top:3px solid var(--bronze);
  display:flex;flex-direction:column}
.emp-comp__c--alto{border-top-width:5px}
.emp-comp summary{list-style:none;cursor:pointer;padding:1.7rem 1.3rem 1.2rem;
  text-align:center;display:block}
.emp-comp summary::-webkit-details-marker{display:none}
.emp-comp__cm{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(2.1rem,3.6vw,2.7rem);line-height:1;color:var(--tin)}
.emp-comp__cm small{font-size:.4em;letter-spacing:.04em}
.emp-comp__nome{display:block;font-size:max(.75rem,.7rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cacau,#774425);margin-top:.8rem;line-height:1.7}
.emp-comp__eq{display:block;font-size:1rem;font-weight:500;color:var(--tin);
  margin-top:.8rem}
.emp-comp__fat{display:block;font-size:.82rem;font-style:italic;color:var(--sec);
  margin-top:.3rem;line-height:1.4}
.emp-comp__det{padding:0 1.3rem 1.4rem;text-align:left;
  display:flex;flex-direction:column;flex:1}
.emp-comp__para{font-size:.9rem;line-height:1.5;color:var(--sec);
  padding-top:1.1rem;border-top:1px solid var(--cr2)}
.emp-comp__rot{font-size:max(.74rem,.66rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sec);margin-top:1.2rem}
.emp-comp__det ul{list-style:none;margin:.8rem 0 0;padding:0}
.emp-comp__det li{font-size:.88rem;line-height:1.5;color:var(--sec);
  padding-left:1.1rem;position:relative;margin-bottom:.7rem}
/* filete fino = condição; marcador cheio = presente. É a distinção que os
   emojis 🎁 / ✨ da copy original faziam, sem emoji. */
.emp-comp__det li::before{content:"";position:absolute;left:0;top:.62em;
  width:.55rem;height:2px;background:var(--bronze)}
.emp-comp__i--dom::before{width:.4rem!important;height:.4rem!important;
  border-radius:50%;top:.5em!important}
.emp-comp__det li b{font-weight:500;color:var(--tin)}
.emp-comp__det .botao{margin-top:auto;align-self:stretch;text-align:center;
  background:var(--choc);border-color:var(--choc);color:var(--cr);font-size:.84rem}
.emp-comp__det .botao:hover{background:var(--tin);border-color:var(--tin)}
.emp-nota-pe{font-size:.88rem;line-height:1.6;color:var(--sec);margin-top:1.8rem;
  max-width:38em}
.emp-nota-pe b{font-weight:500;color:var(--tin)}

/* ═══ VALOR POR PÚBLICO ═════════════════════════════════════════════════ */
.emp-valor{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:2.4rem;margin-top:2.8rem}
.emp-valor__col > h3{font-family:var(--texto);font-weight:400;font-size:max(.76rem,.74rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--sec);
  padding-bottom:.8rem;border-bottom:1px solid var(--bronze);margin:0 0 1.3rem}
.emp-valor__i{font-size:.97rem;line-height:1.5;color:var(--sec);margin-bottom:1rem;
  padding-left:1.2rem;position:relative}
.emp-valor__i:last-child{margin-bottom:0}
.emp-valor__i::before{content:"";position:absolute;left:0;top:.66em;width:.6rem;height:2px;
  background:var(--bronze)}
.emp-valor__i b{font-weight:500;color:var(--tin)}

/* ═══ MOMENTOS DE RECONHECIMENTO ════════════════════════════════════════ */
.emp-mot{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.2rem;margin-top:2.6rem}
.emp-mot__i{background:var(--cr);padding:1.4rem 1.2rem}
.emp-mot__i h3{font-family:var(--disp);font-weight:400;font-size:1.15rem;color:var(--tin);
  margin:0 0 .4rem}
.emp-mot__i p{font-size:.92rem;line-height:1.5;color:var(--sec)}

/* ═══ OS SABORES ════════════════════════════════════════════════════════
   Seção nova, pedida pela Gabi: galeria arrastável para a empresa ver os
   sabores que pode variar ao longo do ano. `scroll-snap` no eixo X, sem
   JavaScript — arrasta no dedo e no trackpad. */
.emp-sabores{background:var(--cr2);padding:clamp(3.2rem,7vw,5.4rem) 0}
.emp-sabores__topo{max-width:74rem;margin:0 auto;padding:0 var(--gut)}
.emp-sabores__tira{display:flex;gap:1rem;margin-top:2.4rem;padding:0 var(--gut) .6rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--bronze) transparent}
.emp-sabores__tira::-webkit-scrollbar{height:6px}
.emp-sabores__tira::-webkit-scrollbar-thumb{background:var(--bronze)}
.emp-sabores__i{flex:0 0 clamp(11rem,26vw,15rem);scroll-snap-align:start}
.emp-sabores__i{margin:0}
/* `height:auto` NAO E REDUNDANTE -- e o conserto de um defeito real.
   Os atributos `width`/`height` do <img> sao DICAS DE APRESENTACAO: viram
   `height:800px` de verdade, e com largura e altura ambas definidas o
   `aspect-ratio` e IGNORADO. Resultado medido: a miniatura saia 160x800
   no celular e 240x800 no desktop -- com `object-fit:cover` a foto nao
   distorce, ela e CORTADA numa fatia vertical do bolo. Foi o que a Gabi
   viu e pediu "mais quadradinha". Sempre que houver `aspect-ratio` num
   <img> com os atributos preenchidos (e eles sao obrigatorios, por CLS),
   uma das duas dimensoes tem que ser `auto`. */
.emp-sabores__i img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.emp-sabores__i figcaption{font-weight:500;font-size:.92rem;color:var(--tin);
  margin-top:.7rem}
.emp-sabores__dica{max-width:74rem;margin:1.4rem auto 0;padding:0 var(--gut);
  font-size:.86rem;color:var(--sec)}

/* ═══ DEPOIMENTO ════════════════════════════════════════════════════════
   Uma voz só, grande. Duas ou três citações lado a lado diluiriam — e a
   casa tem UMA empresa assinante para mostrar, então fingir volume seria
   mentir. A frase principal em corpo grande, não no display: depoimento
   é fala, e o display da marca é voz institucional. */
.emp-dep{margin:2.6rem auto 0;max-width:34rem}
.emp-dep__q{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.35;color:var(--tin);
  font-weight:400;margin:0;padding:0;border:0;quotes:none}
.emp-dep__q::before{content:"“";color:var(--bronze)}
.emp-dep__q::after{content:"”";color:var(--bronze)}
.emp-dep__mais{font-size:1rem;line-height:1.6;color:var(--sec);margin-top:1.1rem}
.emp-dep__quem{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tin);font-weight:500}
.emp-dep__quem span{display:block;font-weight:400;letter-spacing:.16em;
  color:var(--sec);margin-top:.35rem}

/* ═══ CTA repetido no corpo ═════════════════════════════════════════════
   A Gabi pediu o botão em mais pontos: "depois da foto três já pode botar
   outro botão, e depois de como funciona também". */
.emp-cta{margin-top:1.8rem}
.emp-cta .botao{background:var(--choc);border-color:var(--choc);color:var(--cr)}
.emp-cta .botao:hover{background:var(--tin);border-color:var(--tin)}

/* ═══ ALÉM DO ANIVERSÁRIO: foto de um lado, texto do outro ═════════════
   Duas reescritas, e vale guardar as duas lições.

   1ª: a foto era faixa sangrada com `max-height:620px` e `cover`. Isso
   recortava uma imagem de proporção 0,758 numa faixa de 2,04 — sobrava a
   linha dos rostos e a Sacola Mimo, que é o ASSUNTO, ficava fora do quadro.
   Conserto: a caixa recebeu a proporção EXATA do arquivo, recorte zero.

   2ª: mesmo sem recorte, empilhada com o texto ela obrigava a escolher —
   "ou eu vejo o texto ou eu vejo a foto". Um retrato de 0,758 é alto: ao
   lado do texto, os dois cabem na mesma tela; um sobre o outro, nunca.
   Daí as duas colunas, com `align-items:center` para os blocos se
   equilibrarem, e a largura da foto limitada a 24rem para a coluna de
   texto ficar com a maior parte — o texto é que tem 4 cartões. */
.emp-rec{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.emp-rec__foto{position:relative;margin:0;max-width:24rem;justify-self:center;
  aspect-ratio:1092/1440;overflow:hidden;width:100%}
.emp-rec__foto img{width:100%;height:100%;object-fit:cover;display:block}
.emp-rec__txt .emp-sub{max-width:31em}
.emp-rec__txt .emp-mot{margin-top:2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){
  /* Empilhado não tem jeito: num celular o retrato e quatro cartões não
     cabem juntos. A foto vem PRIMEIRO, porque é ela que dá o assunto, e
     com altura limitada para não empurrar o texto para fora da primeira
     rolagem. */
  .emp-rec{grid-template-columns:1fr}
  .emp-rec__foto{max-width:20rem;max-height:56svh;aspect-ratio:auto}
  .emp-rec__txt .emp-mot{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
}

/* ═══ ESPAÇO DE FOTO (slot) ═════════════════════════════════════════════
   Onde a foto definitiva ainda não existe. NÃO é decoração: é um lugar
   marcado, com o número que a Gabi usa para dizer "a foto 2 é essa", e
   some sozinho quando o <img> entrar no lugar. Tem que estar VAZIO ZERO
   antes de trocar o domínio — ver LEIA-ME. */
.emp-slot{background:var(--cr2);border:1px dashed var(--bronze);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:2.4rem 1.6rem;text-align:center;min-height:16rem}
.emp-slot--largo{min-height:min(46svh,380px)}
.emp-slot__n{font-family:var(--disp);font-weight:400;font-size:2.4rem;line-height:1;
  color:var(--bronze)}
.emp-slot__q{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sec)}
.emp-slot__d{font-size:.95rem;line-height:1.5;color:var(--tin);max-width:23em}
.emp-slot--escuro{background:var(--choc-fundo);border-color:var(--bronze)}
.emp-slot--escuro .emp-slot__q{color:#C9B894}
.emp-slot--escuro .emp-slot__d{color:#E4D9C4}

/* ═══ FAQ ═══════════════════════════════════════════════════════════════ */
.emp-faq{margin-top:2.4rem;border-top:1px solid var(--bronze)}
.emp-faq details{border-bottom:1px solid #CFC2A8}
.emp-faq summary{cursor:pointer;list-style:none;position:relative;
  padding:1.1rem 2.4rem 1.1rem 0;font-size:1.02rem;font-weight:500;color:var(--tin)}
.emp-faq summary::-webkit-details-marker{display:none}
.emp-faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;
  transform:translateY(-50%);font-family:var(--disp);font-size:1.6rem;color:var(--bronze)}
.emp-faq details[open] summary::after{content:"–"}
.emp-faq p{padding:0 2.4rem 1.2rem 0;font-size:.97rem;line-height:1.6;color:var(--sec);
  max-width:33em}   /* ~66 caracteres. Sem isto medi 103 — a vista perde a
                       linha na volta. NÃO usar `ch`: na Jost o glifo "0"
                       vale ~0,68em e a conta sai 35% maior. */

/* ═══ FORMULÁRIO — o campo escuro da página ════════════════════════════ */
.emp-form{background:var(--choc);padding:clamp(3.2rem,7vw,5.6rem) var(--gut)}
.emp-form .emp-t{color:var(--cr)}
.emp-form .emp-sub{color:#E4D9C4;max-width:32em}
.emp-form .emp-sub b{color:#FFF}
.emp-form__cartao{max-width:54rem;margin:2.6rem auto 0;background:var(--cr);
  padding:clamp(1.6rem,3.4vw,2.6rem)}
.emp-form__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
  gap:1.05rem}
.emp-form__campos .campo--largo{grid-column:1/-1}
.emp-form .campo > span{color:var(--sec)}
/* O `.campo > span` do site rende 10,9px, medido — pequeno demais para um
   rótulo de formulário no celular. Corrijo SÓ dentro desta LP: mexer no
   style.css afetaria as outras 15 páginas. */
.emp-form .campo > span{font-size:max(.8rem,1em)}
.emp-form__acoes{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.emp-form__acoes .botao{background:var(--choc-fundo);border-color:var(--choc-fundo);
  color:var(--cr)}
.emp-form__acoes .botao:hover{background:var(--tin);border-color:var(--tin)}
.emp-form__estado{font-size:.9rem;color:var(--tin);margin:0}
/* A caixa de marcar nativa mede 13-17px -- metade do alvo de 44px da WCAG 2.5.8, e e
   o ultimo clique antes do lead. Aumenta a caixa E da 44px de altura ao label, que e
   o alvo que o dedo de fato acerta. */
.emp .consentimento{display:flex;gap:.7rem;align-items:flex-start;
  min-height:44px;padding:.5rem 0;cursor:pointer}
.emp .consentimento input[type=checkbox]{width:1.35rem;height:1.35rem;flex:0 0 auto;
  margin-top:.15rem;accent-color:var(--bronze);cursor:pointer}
.emp-form__lgpd{font-size:.8rem;line-height:1.5;color:var(--sec);margin-top:1rem;
  max-width:35em}
.emp-form__ou{text-align:center;margin-top:1.8rem;font-size:.95rem;color:#C9B894}
.emp-form__ou a{color:#E9C85A;text-decoration:underline;text-underline-offset:3px}

/* ═══ FECHO ═════════════════════════════════════════════════════════════ */
.emp-fecho{background:var(--cr2);padding:clamp(2.8rem,5vw,4rem) var(--gut);text-align:center}
.emp-fecho__ass{font-family:var(--script);font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--sec);display:block}

/* ═══ RODAPÉ ════════════════════════════════════════════════════════════ */
.emp-rodape{background:var(--choc-fundo);padding:2.4rem var(--gut)}
.emp-rodape__in{max-width:74rem;margin-inline:auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:1.6rem 2rem;align-items:flex-end}
.emp-rodape .emp-marca b{font-size:1.9rem}
.emp-rodape .emp-marca i{font-size:1.3rem;line-height:1.5}
.emp-rodape .emp-marca + .emp-rodape__nota{margin-top:1rem}
.emp-rodape__in > div:last-child{text-align:right}
.emp-rodape__links{display:flex;flex-wrap:wrap;gap:0 1.1rem;font-size:.9rem}
/* 44px de altura é o mínimo de alvo de toque (WCAG 2.5.8 / iOS HIG). Medido
   24px aqui, e são quatro links colados num celular — errar o dedo era
   garantido. O padding faz a área, não a fonte. */
.emp-rodape__links a{color:#E4D9C4;display:inline-flex;align-items:center;
  min-height:44px;padding:0 .1rem}
.emp-rodape__links a:hover{color:#E9C85A}
.emp-rodape__nota{font-size:max(.78rem,.78rem);letter-spacing:.12em;text-transform:uppercase;
  color:#A89272;margin-top:.7rem}

/* ═══ barra fixa no celular ═════════════════════════════════════════════ */
.emp-barra{position:fixed;inset:auto 0 0;z-index:60;display:none;gap:.7rem;
  align-items:center;background:var(--choc-fundo);padding:.7rem .9rem;
  box-shadow:0 -6px 22px rgba(20,10,4,.36)}
.emp-barra span{flex:0 1 auto;font-size:.8rem;line-height:1.25;color:#C9B894}
.emp-barra .botao{padding:.75rem 1.1rem;font-size:.84rem;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;
  background:var(--bronze);border-color:var(--bronze);color:var(--tin)}

/* ═══ MODO REVISÃO ══════════════════════════════════════════════════════
   `?revisao=1` numera as seções e as fotos. Some na URL normal, então o
   link que a Gabi recebe pode ser numerado sem sujar a página real. */
.emp-num{display:none}
.emp--revisao .emp-num{display:block;position:absolute;z-index:40;top:0;left:0;
  background:var(--vinho,#891B28);color:#fff;font-family:var(--texto);
  font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .7rem;pointer-events:none}
.emp--revisao .emp-slot .emp-num,.emp--revisao .emp-mosaico__foto .emp-num,
.emp--revisao .emp-faixa__foto .emp-num,.emp--revisao .emp-hero__foto .emp-num{
  background:#1F5627}
.emp--revisao .emp-faixa__foto,.emp--revisao .emp-hero__foto,
.emp--revisao .emp-mosaico__foto{position:relative}

@media (max-width:980px){
  /* ── O HERO NO CELULAR ────────────────────────────────────────────
     Pedido da Gabi em 18/09, com print anotado. O defeito estava MEDIDO:
     a foto comecava em 570px numa tela de 812 -- abaixo da dobra. Nas
     palavras dela, "isso faz perder o impacto inicial". A causa era o
     empilhamento puro: painel, lista de palavras, paragrafo, e so entao
     a foto, somando 570px de texto antes da primeira imagem.

     O conserto que ela desenhou: a FOTO sobe para o lugar da lista, e a
     LISTA sobe para o alto a direita, ao lado do titulo.

     `display:contents` dissolve os dois conteineres para que os filhos
     virem itens da MESMA grade do hero e possam ser reordenados sem
     duplicar HTML -- o desktop nao muda uma linha. */
  .emp-hero{grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto auto;align-items:start}
  .emp-hero__grade,.emp-hero__lado{display:contents}
  .emp-hero__painel{grid-column:1;grid-row:1;
    padding:clamp(1.8rem,3.4vw,3rem) var(--gut) 1rem}
  /* a lista alinha pela BASE do titulo: ela e a legenda do que se celebra,
     nao um bloco solto no topo */
  .emp-hero__lado > .emp-rot{grid-column:2;grid-row:1;align-self:end;
    padding:0 var(--gut) .45rem 0;text-align:right}
  /* o filete separava lista de paragrafo; com os dois em lugares
     diferentes ele fica orfao -- um risco no meio do nada */
  .emp-hero__lado > .emp-fil{display:none}
  .emp-hero__foto{grid-column:1/-1;grid-row:2}
  .emp-hero__lado > .emp-corpo{grid-column:1/-1;grid-row:3;max-width:34em;
    padding:clamp(1.3rem,3vw,1.9rem) var(--gut) clamp(1.6rem,3vw,2.2rem)}
  /* o titulo cede largura para a lista, e a conta e medida, nao chutada:
     "NOVOS CICLOS" ocupa 112px e "faz acontecer." ocupava 206px num
     viewport de 375 -- 206+112+gutters nao cabia em 375. */
  .emp-hero__painel .emp-t--g{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .emp-mosaico,.emp-mosaico--inv{grid-template-columns:1fr}
  /* ⚠️ `width:100%` NÃO É DECORAÇÃO. Um item de grid com `aspect-ratio` e
     altura definida (aqui, `max-height`) dimensiona a LARGURA a partir da
     altura — e estoura o contêiner. Medido: 597px de largura num viewport
     de 375, o que dava rolagem horizontal na página inteira e arrastava a
     barra fixa junto. Terceira vez que este erro aparece nesta página:
     sempre que houver `aspect-ratio`, trave a largura. */
  .emp-mosaico__foto{width:100%;min-height:0;aspect-ratio:4/3;max-height:64svh}
  .emp-mosaico--inv .emp-mosaico__foto{order:-1}
}
@media (max-width:640px){
  /* Tracking largo em corpo pequeno atrapalha: as letras soltas quebram a
     palavra. No celular o rótulo perde um pouco de espacejamento e ganha
     legibilidade — a medida em px não muda. */
  .emp-rot{letter-spacing:.16em}
  .emp-comp__rot,.emp-pilares__lista,.emp-pilares__ass{letter-spacing:.14em}
  .emp-faixa__foto{max-height:58svh}
  .emp-hero__foto{min-height:min(48svh,420px)}
  /* ── A GALERIA VIRA GRADE ──────────────────────────────────────────
     Pedido da Gabi em 18/09: "a visualizacao dos bolos esta bem ruim na
     versao pra celular... se desse para ajustar a galeria para ficar mais
     quadradinha". O recorte das fotos esta certo (todas 800x800, quadradas
     e centradas) -- o problema e a TIRA: em 375px ela mostrava dois bolos
     e cortava o terceiro no meio, e ninguem descobre que existem sete sem
     adivinhar que dava para arrastar.

     Em grade de dois, os sete aparecem inteiros, quadrados, sem gesto
     nenhum. O aviso "arraste para o lado" sai junto: nao ha mais o que
     arrastar, e instrucao para um gesto que nao existe atrapalha. */
  .emp-sabores__tira{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.8rem;overflow:visible;scroll-snap-type:none}
  .emp-sabores__i{flex:none}
  .emp-sabores__dica{display:none}
  .emp-pilares__in{justify-content:flex-start}
  .emp-pilares__ass{text-align:left}
  .emp-rodape__in > div:last-child{text-align:left}
  .emp-barra{display:flex}
  body{padding-bottom:4.4rem}
}