/* bl2.css — camada de apresentação GOLDEN V1 (soberana), standalone.
Extraída do design aprovado (~/beerlab-commerce-olist01/design/golden-v1/common.mjs):
tokens, componentes e composição idênticos ao Golden; classes substituem os estilos
inline do gerador. Nenhuma dependência de styles.css. */
:root{
--paper:#faf6ef; --card:#ffffff; --ink:#211a13; --sub:#6f6151; --line:#e8dfd0;
--product-image-bg:#fff;
--brand:#8a5e10; --brand-deep:#5e3f09; --tint:#fdf7ea; --gold:#c98f2b; --gold-soft:#e9d6ae;
--pos:#0f6b38; --att:#8a5200; --neg:#9c2018;
--dark:#171008; --dark2:#241a0e; --dark-line:#3a2c19; --dark-text:#f3ead9; --dark-sub:#b9a785;
--r:12px; --shadow:0 1px 2px rgba(33,26,19,.05),0 8px 28px rgba(33,26,19,.07);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-deep)}
img{max-width:100%}
button{font-family:inherit}
h1,h2,h3,.display{font-family:Marcellus,Georgia,serif;font-weight:400;margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
/* ── componentes Golden ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:filter .15s,transform .12s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{filter:brightness(1.08);color:#fff}
.btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{color:#fff;filter:brightness(1.15)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)} .btn-ghost:hover{color:var(--ink);background:rgba(33,26,19,.04)}
.btn-ghost-light{background:transparent;border-color:var(--gold-soft);color:var(--dark-text)} .btn-ghost-light:hover{color:var(--dark-text);background:rgba(233,214,174,.08)}
.btn-gold{background:var(--gold);color:var(--dark)} .btn-gold:hover{filter:brightness(1.06);color:var(--dark)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px;border-radius:9px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--tint);color:var(--brand-deep);border:1px solid var(--gold-soft);opacity:.8;cursor:default;filter:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--sub);cursor:default}
button.chip{cursor:pointer}
.chip.on,.chip-pf{background:var(--tint);border-color:var(--gold-soft);color:var(--brand-deep)}
.chip-pj{background:var(--ink);border-color:var(--ink);color:#fff}
.badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-caixa{background:var(--ink);color:#fff}
.badge-mult{background:var(--tint);color:var(--brand-deep);border:1px solid var(--gold-soft)}
.badge-unid{background:#f1ece1;color:var(--sub)}
.badge-novo{background:var(--brand);color:#fff}
/* M1.3 classe F — o selo base ainda estava em `--neg` (vermelho de alerta) enquanto o selo do
CARD já tinha sido movido para o neutro escuro numa rodada anterior, com a semântica
registada em evidence/final_acceptance/CONVERSION_PATTERN_DECISIONS.md: verde = ganho
econômico (preço promocional, economia, BeerCash), dourado = condição premium (Clube),
neutro escuro = marcador de promoção, vermelho = erro e alerta de verdade.
Havia DUAS regras e duas cores para o mesmo selo. Fica uma, no neutro escuro — o quanto do
ganho já está em verde, no preço, e o marcador não precisa carregar a saliência sozinho. */
.badge-promo{background:var(--ink);color:#fff}
.price{font-weight:700;font-size:22px;letter-spacing:-.01em}
.stock-ok{color:var(--pos);font-weight:600;font-size:12.5px}
.stock-low{color:var(--att);font-weight:600;font-size:12.5px}
.stock-out{color:var(--neg);font-weight:600;font-size:12.5px}
.bc{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(120deg,#fdf7ea,#f6e8c8);border:1px solid var(--gold-soft);color:var(--brand-deep);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.tile{position:relative;border-radius:10px;background:var(--product-image-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile::after{content:none}
.input{display:flex;flex-direction:column;gap:6px}
.input label{font-size:12.5px;font-weight:600;color:var(--sub);letter-spacing:.02em}
.input input{height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;color:var(--ink);font-size:15px;font-family:inherit;width:100%}
.input input::placeholder{color:#a59885}
.input input:disabled{background:var(--paper);color:#a59885}
.hr{height:1px;background:var(--line);border:0;margin:0}
.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.kicker-light{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sec-title{font-size:28px;letter-spacing:-.01em}
.note{font-size:12px;color:var(--sub)}
/* `.note` (0,1,0) vence `a` (0,0,1): todo link com classe `note` era pintado com a cor de texto
secundário e sem sublinhado — LINK COM CARA DE PROSA. Havia links assim no checkout e na conta,
e o do Clube só escapava porque uma classe extra o sublinhava à parte. Um link que não parece
link não é clicado; e a cura é da classe, não de cada ocorrência. */
a.note[href]{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px}
a.note[href]:hover{color:var(--ink)}
.dark{background:var(--dark);color:var(--dark-text)}
.dark .hr{background:var(--dark-line)}
.prog{height:8px;border-radius:99px;background:#efe7d7;overflow:hidden}
.prog>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--brand))}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-sm{width:16px;height:16px}
/* ── header desktop (Golden headerD) ─────────────────────────────── */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr-top{display:flex;align-items:center;gap:28px;height:76px}
.hdr-logo{font-family:Marcellus,Georgia,serif;font-size:24px;letter-spacing:.18em;color:var(--ink);white-space:nowrap}
.hdr-logo b{color:var(--brand);font-weight:400}
.hdr-search{flex:1;max-width:560px;height:48px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--paper)}
.hdr-search input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:14.5px;color:var(--ink);min-width:0}
.hdr-search input::placeholder{color:#a59885}
.hdr-search:focus-within{border-color:var(--gold)}
.hdr-spacer{flex:1}
.hdr-acts{display:flex;align-items:center;gap:20px;color:var(--ink)}
.hdr-act{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;text-decoration:none}
.hdr-act:hover{color:var(--brand)}
.hdr-cart{position:relative;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;display:flex}
.hdr-cart em{position:absolute;top:-7px;right:-9px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 6px;font-style:normal}
.hdr-nav{display:flex;gap:34px;height:48px;align-items:center}
.hdr-nav a{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink);border-bottom:2px solid transparent;padding:14px 0}
.hdr-nav a:hover,.hdr-nav a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
/* M1.7 §3 — A FAIXA DE FRETE É A ÚNICA MENSAGEM DE CONVERSÃO DA PRIMEIRA DOBRA, e estava
tratada como nota de rodapé: texto em --dark-sub (o tom apagado), 12,5px, sem separar o
benefício dos valores. Nada de banner novo — sobe o contraste do texto para o tom de leitura,
dá ar ao bloco, marca "Frete grátis" como benefício e deixa os VALORES em peso próprio, sem
quebrar no meio. Regra, valores e fonte governada intactos. */
.announce{background:var(--dark);color:var(--dark-text);text-align:center;font-size:13.5px;line-height:1.5;padding:11px 16px;border-bottom:1px solid var(--dark-line)}
.announce b{color:var(--gold);font-weight:700;letter-spacing:.02em}
.announce a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
/* A PRIMEIRA TENTATIVA PARTIU A FRASE GOVERNADA. Eu tinha embrulhado "R$ 300" e "R$ 500" em
spans para lhes dar peso — e com isso (a) a guarda de política, que exige os dois números
CONTÍGUOS na fonte (`Capital a partir de R$ 300`), deixou de os encontrar, e (b) os separadores
perderam os espaços e a faixa ficou MENOS legível do que antes, o contrário do pedido. A frase
volta intacta: a hierarquia faz-se só com tipografia — texto no tom de leitura em vez do tom
apagado, corpo maior, mais ar e o benefício em ouro.
E o separador órfão: a limpeza de convites apaga o link "Crie sua conta" para quem já tem
sessão e deixava o " · " solto no fim da faixa. Sem link, o invólucro não aparece. */
.announce .an-conta:not(:has(a)){display:none}
/* ── hero (Golden) ────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(70% 90% at 78% 20%,rgba(201,143,43,.28),transparent 60%),radial-gradient(50% 70% at 15% 90%,rgba(138,94,16,.22),transparent 65%)}
@keyframes heroLuz{0%,100%{opacity:.85}50%{opacity:1}}
.hero-bg{animation:heroLuz 10s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none}}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;padding:88px 40px 92px;align-items:center}
.hero h1{font-size:56px;line-height:1.08;margin:18px 0 22px;color:var(--dark-text)}
.hero p{color:var(--dark-sub);font-size:17px;max-width:520px;margin:0 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-ctas .btn{height:54px;padding:0 30px;font-size:16px}
.hero-art{display:flex;justify-content:center;gap:26px;align-items:flex-end;opacity:.95}
/* ── seções ───────────────────────────────────────────────────────── */
.sec{padding:48px 40px 16px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.sec-head h2{margin-top:6px}
.sec-link{font-weight:600;font-size:13.5px;color:var(--brand);display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:0}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.row6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cat-tile{padding:22px;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s;border:1px solid var(--line);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);font-family:inherit}
.cat-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.cat-tile .ct-i{color:var(--brand)}
.cat-tile .ct-t{font-weight:700;font-size:15px;color:var(--ink)}
.marca-tile{padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .15s,transform .15s;font-family:inherit}
.marca-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.marca-ini{width:64px;height:64px;border-radius:99px;background:var(--tint);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:Marcellus,Georgia,serif;font-size:22px;color:var(--brand)}
.marca-tile .mt-n{font-weight:700;font-size:12.5px;letter-spacing:.06em;text-align:center;color:var(--ink)}
/* ── card de produto (Golden cardProd, sem preço anônimo) ─────────── */
.pcard{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s;position:relative}
.pcard:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(33,26,19,.06),0 14px 36px rgba(33,26,19,.12)}
.pcard .tile{height:210px;border-radius:0}
.pcard .image-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard .image-wrapper img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s}
.pcard .image-wrapper img{mix-blend-mode:normal}
.pcard-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:1px;min-height:0}
.pcard-badges:empty{display:none}
.pcard-badges .badge{white-space:nowrap}
/* fora da foto (não há canto livre no packshot) E fora do fluxo do texto (no carrossel estreito
roubava metade da largura do nome). Canto do CORPO do card, com espaço reservado nos selos. */
.pcard-body{position:relative}
/* NÃO reservar espaço aqui: a reserva JÁ EXISTE mais abaixo, desenhada para este mesmo canto
(`.pcard-badges{max-width:calc(100% - 52px)}` no estreito, com os selos em coluna). Somar um
`padding-right` a essa reserva deixava 34 px úteis para um selo de 90 e empurrava os selos para
debaixo do coração — eu reservei duas vezes e chamei ao resultado um defeito novo. */
/* LINHA PRÓPRIA. Três tentativas provaram que este botão não cabe ao lado de mais nada num card
de 132 px: sobre a foto tapava o lettering do packshot (tinta debaixo dos quatro cantos, 14,6% a
35,3%); na linha do nome deixava 48 px de 90 para o texto; no canto do corpo passava por cima
dos selos (80 px de reserva para um selo de 93). Deixa de disputar espaço: fica numa linha só
dele, alinhado à direita, acima dos selos. Custa ~38 px de altura por card e não colide com
coisa nenhuma em largura nenhuma. */
.pcard-fav{position:static;margin:0 0 6px auto;width:32px;height:32px;border-radius:99px;border:1px solid var(--gold-soft);background:var(--tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;padding:0}
.pcard-fav.ativo{background:var(--neg);border-color:var(--neg);color:#fff}
.pcard-fav.ativo svg{fill:currentColor}
.pcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-meta{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--sub);text-transform:uppercase}
.pcard-nome{font-weight:600;font-size:14px;line-height:1.35;min-height:38px;color:var(--ink)}
.pcard-gate{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--brand-deep)}
/* M1.8 §2 — o aviso de venda sob aprovação é IRMÃO do portão: linha própria, texto que quebra
normalmente, sem disputar a fila de flex com a moeda e o gate. */
.qa-aprova{color:var(--brand-deep);font-weight:700;line-height:1.35;margin-top:4px;white-space:normal;overflow-wrap:break-word}
.pcard .btn{margin-top:auto}
/* ── faixa oportunidade / beercash ────────────────────────────────── */
.band-tint{background:linear-gradient(120deg,var(--tint),#f6ecd6);border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);margin-top:44px}
.band-tint .in{display:flex;align-items:center;gap:40px;padding:36px 40px}
/* ── merchandising stage ─────────────────────────────────────────── */
.merch{padding:28px 40px 0}
.merch-stage{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--dark)}
.merch-track{display:flex;transition:transform .45s ease}
@media(prefers-reduced-motion:reduce){.merch-track{transition:none}}
.merch-slide{flex:0 0 100%;position:relative}
.merch-slide img,.merch-slide video{width:100%;display:block;aspect-ratio:1200/420;object-fit:cover}
.merch-cta{position:absolute;left:28px;bottom:24px}
.merch-arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:99px;border:0;background:rgba(23,16,8,.55);color:var(--dark-text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3}
.merch-arr:hover{background:rgba(23,16,8,.8)}
.merch-arr.prev{left:14px}.merch-arr.next{right:14px}
.merch-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px;z-index:3}
.merch-dots button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(243,234,217,.45);cursor:pointer;padding:0}
.merch-dots button.on{background:var(--gold);width:20px}
/* ── banda B2B escura (Golden) ────────────────────────────────────── */
.b2b{margin-top:52px}
.b2b .in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding:64px 40px;align-items:center}
.b2b h2{font-size:36px;color:var(--dark-text);margin:12px 0 16px}
.b2b p{color:var(--dark-sub);max-width:480px;margin:0 0 28px}
.b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.b2b-mini{border:1px solid var(--dark-line);border-radius:12px;padding:18px;background:var(--dark2)}
.b2b-mini .i{color:var(--gold)}
.b2b-mini .t{font-weight:700;margin-top:10px;color:var(--dark-text)}
.b2b-mini .s{color:var(--dark-sub);font-size:12.5px;margin-top:4px}
/* M2.21 — fotografia da operação real da Beer Lab. A imagem sustenta a história;
a informação continua em HTML, legível e governada. */
#negocio{position:relative;isolation:isolate;overflow:hidden;background:#171008}
#negocio::before{content:"";position:absolute;inset:0;z-index:-2;background:url('assets/banners-generated/m221-publico-misto-teto-livre-v5.webp') center/cover no-repeat}
#negocio::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,11,6,.96) 0%,rgba(16,11,6,.88) 42%,rgba(16,11,6,.60) 66%,rgba(16,11,6,.34) 100%)}
#negocio .b2b-copy{padding:24px;border-radius:18px;background:rgba(15,10,5,.36);backdrop-filter:blur(2px)}
#negocio .b2b-mini{background:rgba(28,19,10,.82);backdrop-filter:blur(5px)}
/* ── beer intelligence ────────────────────────────────────────────── */
.intel-fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.intel-fam{padding:20px;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .15s,transform .15s;font-family:inherit}
.intel-fam:hover{border-color:var(--gold);transform:translateY(-2px)}
.intel-fam .t{font-family:Marcellus,Georgia,serif;font-size:19px;color:var(--ink)}
.intel-fam .nv{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--brand);text-transform:uppercase}
.intel-fam .d{font-size:13px;color:var(--sub)}
.intel-fam .cta{font-size:12.5px;font-weight:700;color:var(--brand);margin-top:4px}
.intel-eixos{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;box-shadow:var(--shadow)}
.intel-eixos label{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--sub)}
.intel-eixos input[type=range]{width:160px;accent-color:var(--gold)}
.intel-ocas{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}
/* ── trust + footer (Golden) ─────────────────────────────────────── */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:52px}
.trust .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:26px 40px}
.trust-it{display:flex;align-items:center;gap:12px}
.trust-it .i{color:var(--brand)}
.trust-it .t{font-weight:700;font-size:13.5px}
.ftr .in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:48px 40px 36px}
.ftr-logo{font-family:Marcellus,Georgia,serif;font-size:22px;letter-spacing:.18em;color:var(--dark-text)}
.ftr-logo b{color:var(--gold);font-weight:400}
.ftr p{color:var(--dark-sub);font-size:13px;max-width:280px;margin:14px 0 0}
.ftr-18{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--gold);font-weight:700;font-size:13px}
.ftr-18 span{border:1.5px solid var(--gold);border-radius:8px;padding:4px 9px}
.ftr-col .t{font-weight:700;font-size:13px;letter-spacing:.08em;margin-bottom:14px;color:var(--dark-text)}
.ftr-col a{display:block;color:var(--dark-sub);font-size:13px;margin-bottom:9px}
.ftr-col a:hover{color:var(--gold)}
.ftr-base{border-top:1px solid var(--dark-line)}
.ftr-base .in2{display:flex;justify-content:space-between;gap:16px;padding:18px 40px;color:var(--dark-sub);font-size:12px;flex-wrap:wrap}
/* ── PLP (Golden G03) ─────────────────────────────────────────────── */
.plp-head{padding:28px 40px 12px}
.plp-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.plp-title h2{font-size:30px}
.plp-title h2 b{color:var(--brand);font-weight:400}
.plp-tools{display:flex;align-items:center;gap:14px}
.plp-sort{height:36px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--sub);font-size:12.5px;font-weight:600;padding:0 14px;font-family:inherit}
.plp-grid-wrap{display:grid;grid-template-columns:250px 1fr;gap:36px;padding:20px 40px 64px;align-items:start}
.flt{padding:6px 20px 14px;position:static;max-height:none;overflow:visible}
.flt-g{border-bottom:1px solid var(--line);padding:14px 0}
.flt-g:last-child{border-bottom:0}
.flt-gt{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px;cursor:pointer;background:none;border:0;width:100%;padding:0;color:var(--ink);font-family:inherit}
.flt-gt em{color:var(--sub);font-style:normal}
.flt-ops{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.flt-op{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--sub);cursor:pointer}
/* P1-D (rodada 9): `display:none` tira o campo da árvore de foco — 41 facetas ficavam
inoperáveis por teclado (WCAG 2.1.1 nível A) na ÚNICA ferramenta de navegação do catálogo, e a
regra `:focus-visible+.bx` logo abaixo era código morto. O campo continua invisível, mas
permanece focável e operável: some da pintura, não da máquina. */
.flt-op{position:relative}
/* O campo invisível cobre o RÓTULO INTEIRO: assim ele é focável por teclado (o que o
`display:none` impedia) E é um alvo de toque do tamanho da linha — a primeira versão deste
reparo deixou um alvo de 17×17px, trocando um defeito de acessibilidade por outro. */
.flt-op input{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;margin:0;cursor:pointer}
.flt-op .bx{width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;background:#fff;flex:none;display:inline-flex;align-items:center;justify-content:center}
.flt-op input:checked+.bx{background:var(--brand);border-color:var(--brand)}
.flt-op input:checked+.bx::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.flt-op input:checked~span{color:var(--ink);font-weight:600}
.plp-applied{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.plp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plp-more{display:flex;justify-content:center;margin-top:34px}
.plp-vazio{padding:60px 20px;text-align:center;color:var(--sub)}
/* skeleton */
.skel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.skel div{height:360px;border-radius:12px;background:linear-gradient(100deg,#f1eadb 40%,#faf6ef 50%,#f1eadb 60%);background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel div{animation:none}}
/* ── PDP (Golden G05) ─────────────────────────────────────────────── */
.pdp-bc{padding:26px 40px 8px}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:18px 40px 40px;align-items:start}
.pdp-gal .tile{height:520px;border-radius:16px}
.pdp-gal .image-wrapper{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center}
.pdp-gal .image-wrapper img{max-width:100%;max-height:100%;object-fit:contain;transform:none !important}
.pdp-gal img.fundo-branco{mix-blend-mode:multiply}
.pdp-thumbs{display:flex;gap:12px;margin-top:14px}
.pdp-thumb{width:86px;height:86px;border:1px solid var(--line);cursor:pointer;padding:6px;background:var(--product-image-bg);border-radius:10px;position:relative;overflow:hidden}
.pdp-thumb.on{border:2px solid var(--brand)}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.pdp-info{display:flex;flex-direction:column;gap:18px}
.pdp-marca{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--brand);text-transform:uppercase}
.pdp-info h1{font-size:32px;line-height:1.15;margin-top:8px}
.pdp-chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pdp-gate{display:flex;flex-direction:column;gap:8px}
.pdp-gate .g{font-family:Marcellus,Georgia,serif;font-size:24px;color:var(--brand-deep)}
.pdp-caixa{padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--tint);border:1px solid var(--gold-soft);border-radius:var(--r)}
.pdp-caixa .t{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px}
.pdp-qtd{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:#fff;width:max-content}
.pdp-qtd button{width:44px;height:46px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:var(--sub);background:none;border:0}
.pdp-qtd span{width:56px;text-align:center;font-weight:700;font-size:16px}
.pdp-ctas{display:flex;gap:12px}
.pdp-ctas .btn-primary{flex:1;height:54px;font-size:16px}
.pdp-ctas .fav{width:54px;height:54px;padding:0;border:1px solid var(--ink);border-radius:10px;background:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.pdp-ctas .fav.ativo{background:var(--neg);border-color:var(--neg);color:#fff}
.pdp-frete{padding:14px 16px;display:flex;align-items:center;gap:12px}
.pdp-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line)}
.pdp-tab{padding:12px 2px;font-weight:600;color:var(--sub);border-bottom:2px solid transparent;font-size:14.5px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.pdp-tab.on{font-weight:700;color:var(--brand);border-bottom-color:var(--brand)}
.pdp-body{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding:24px 0}
.pdp-ficha{padding:6px 20px}
.pdp-ficha .ln{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pdp-ficha .ln:last-child{border-bottom:0}
.pdp-ficha .k{color:var(--sub)} .pdp-ficha .v{font-weight:600}
.pdp-bjcp{background:var(--tint);border:1px solid var(--gold-soft);border-radius:var(--r);padding:18px 20px;margin-top:16px}
.pdp-bjcp .t{font-weight:700;font-size:13.5px;display:flex;gap:8px;align-items:center}
/* ── sacola drawer ────────────────────────────────────────────────── */
.saco-back{position:fixed;inset:0;background:rgba(23,16,8,.45);z-index:98;opacity:0;pointer-events:none;transition:opacity .25s}
.saco-back.on{opacity:1;pointer-events:auto}
.saco{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:94%;background:var(--card);z-index:99;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(23,16,8,.2)}
.saco.on{transform:none}
.saco-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.saco-head h2{font-size:22px;flex:1}
.saco-x{background:var(--tint);border:1px solid var(--line);font-size:22px;line-height:1;color:var(--sub);cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:99px}
.saco-corpo{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px}
/* pista de que HÁ MAIS ABAIXO: sem ela, a última linha cortada pela borda do scroller lê-se como
defeito de renderização em vez de convite a rolar (foi assim que o revisor a descreveu). */
.saco-corpo{scrollbar-gutter:stable}
.saco-corpo::after{content:'';position:sticky;bottom:-22px;display:block;height:24px;margin-top:-24px;
flex:0 0 auto;background:linear-gradient(to top,var(--card),transparent);pointer-events:none}
.saco-vazio{text-align:center;color:var(--sub);padding:30px 10px;display:flex;flex-direction:column;gap:12px;align-items:center}
.saco-foot{border-top:1px solid var(--line);padding:18px 22px;display:flex;flex-direction:column;gap:12px}
/* ── camila (painel Golden) ───────────────────────────────────────── */
#camilaPainel{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:94%;background:var(--card);border-left:1px solid var(--line);z-index:101;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(23,16,8,.2)}
#camilaPainel.on{transform:none}
.cam-head{background:var(--dark);color:var(--dark-text);padding:18px 22px;display:flex;align-items:center;gap:12px}
.cam-head .av{width:40px;height:40px;border-radius:99px;background:var(--dark2);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:Marcellus,Georgia,serif;font-size:17px}
.cam-head strong{font-family:Marcellus,Georgia,serif;font-size:18px;letter-spacing:.03em;display:block}
.cam-head span{font-size:11px;color:var(--dark-sub)}
/* fechar com CORPO de botão aparente ≥44px (painel full-screen: única saída visível) */
.cam-x{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:24px;line-height:1;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:99px}
.cam-x:hover{background:rgba(255,255,255,.16)}
.cam-corpo{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.cam-corpo > *{flex-shrink:0} /* itens nunca são esmagados — o scroll é do corpo */
.cam-msg{background:var(--tint);border:1px solid var(--gold-soft);border-radius:12px 12px 12px 4px;padding:13px 15px;font-size:13.5px;color:var(--ink);max-width:94%}
.cam-msg .t{font-family:Marcellus,Georgia,serif;font-size:16px;color:var(--brand-deep);display:block;margin-bottom:4px}
.cam-eu{align-self:flex-end;background:var(--ink);color:#fff;border-radius:12px 12px 4px 12px;padding:10px 14px;font-size:13px;font-weight:600;max-width:85%}
.cam-rotulo{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-top:8px}
.cam-chip{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:11px 14px;text-align:left;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .15s}
.cam-chip:hover{border-color:var(--gold)}
.cam-prods{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.cam-prod{flex:0 0 132px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;text-align:center;color:var(--ink)}
.cam-prod .th{height:96px;background:linear-gradient(165deg,#f6efe2,#ece1cc);display:flex;align-items:center;justify-content:center;padding:8px}
.cam-prod .th img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cam-prod .n{font-size:10.5px;font-weight:600;padding:8px;line-height:1.3}
.cam-humano{margin:12px 0 4px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold-soft);background:var(--tint);color:var(--brand-deep);border-radius:11px;padding:12px;font-size:13px;font-weight:700;text-decoration:none}
#camilaFab{position:fixed;right:22px;bottom:22px;z-index:80;background:var(--dark);color:var(--gold);border:1px solid var(--dark-line);border-radius:99px;height:52px;padding:0 20px 0 16px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 10px 30px rgba(23,16,8,.3)}
/* ── conta (Golden G09) ───────────────────────────────────────────── */
.login{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:64px 40px 88px;align-items:center;max-width:1080px;margin:0 auto}
.login h1{font-size:38px;margin:12px 0 16px}
.login-perks{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.login-perk{display:flex;gap:12px;align-items:center;color:var(--sub)}
.login-perk .i{color:var(--brand)}
.login-perk b{font-weight:600;color:var(--ink)}
.login-card{padding:34px;display:flex;flex-direction:column;gap:18px}
.login-div{display:flex;align-items:center;gap:12px}
.login-div .note{white-space:nowrap}
/* ── checkout (Golden G08 · 6 etapas) ────────────────────────────── */
.chk-steps-bar{background:#fff;border-bottom:1px solid var(--line)}
.chk-steps{display:flex;gap:24px;padding:18px 40px;align-items:center}
.chk-step{display:flex;align-items:center;gap:10px}
.chk-step .n{width:30px;height:30px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:1.5px solid var(--line);color:var(--sub)}
.chk-step.cur .n{background:var(--ink);color:#fff;border-color:var(--ink)}
/* P2 do ciclo 2: a trilha do pedido — que é justamente o que tranquiliza quem compra pela
primeira vez — era a parte MENOS legível da tela, em cinza claro sobre fundo claro. As etapas
futuras continuam secundárias (não são o passo atual), mas passam a ser legíveis. */
.chk-step .t{font-weight:600;font-size:13.5px;color:#5c4f41}
.chk-step.cur .t{font-weight:700;color:var(--ink)}
.chk-line{flex:1;height:1px;background:var(--line)}
.chk{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:32px 40px 64px;align-items:start}
.chk-col{display:flex;flex-direction:column;gap:22px}
.chk-card{padding:24px;display:flex;flex-direction:column;gap:16px}
.chk-card h2{font-size:19px}
.chk-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--sub);line-height:1.5}
.chk-passos b{color:var(--ink)}
.chk-off{opacity:.55;pointer-events:none;filter:saturate(.65)}
.chk-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chk-opt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;background:#fff}
.chk-opt .rd{width:19px;height:19px;border-radius:99px;border:2px solid var(--line);flex:none}
.chk-opt .t{font-weight:700;font-size:14px}
.chk-opt .v{margin-left:auto;font-weight:700;font-size:14px;color:var(--sub)}
.chk-pags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chk-pag{border:1.5px solid var(--line);border-radius:11px;padding:16px;text-align:center;font-weight:700;font-size:14px;background:#fff}
.chk-pag .s{display:block;font-size:10.5px;color:var(--sub);font-weight:600;margin-top:4px}
.chk-resumo{padding:24px;display:flex;flex-direction:column;gap:14px;position:sticky;top:100px}
.chk-ln{display:flex;justify-content:space-between;font-size:13.5px}
.chk-ln .k{color:var(--sub)}
.chk-total{display:flex;justify-content:space-between;align-items:baseline}
.chk-selo{display:flex;align-items:center;gap:8px;justify-content:center}
/* ── mobile shell (Golden headerM + tabbarM) ─────────────────────── */
.mhdr,.mtab{display:none}
#voltarTopo{position:fixed;right:20px;bottom:24px;z-index:70;width:46px;height:46px;border-radius:99px;border:1px solid var(--gold-soft);background:var(--dark);color:var(--gold);font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(23,16,8,.3)}
#voltarTopo.on{display:flex}
/* ── engajamento (popup governado) ────────────────────────────────── */
.pop-back{position:fixed;inset:0;background:rgba(23,16,8,.5);z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.pop{max-width:420px;width:100%;padding:30px;display:flex;flex-direction:column;gap:14px;text-align:center;position:relative}
.pop .x{position:absolute;top:12px;right:16px;background:none;border:0;font-size:20px;color:var(--sub);cursor:pointer}
/* ── reveal motion ────────────────────────────────────────────────── */
/* REVELAÇÃO É ENFEITE, NÃO CONDIÇÃO DE EXISTIR (P0 do lote 17).
O card nascia `opacity:0` e só aparecia se o IntersectionObserver disparasse. Quando ele não
dispara — e não disparou: 24 de 24 cards ficaram invisíveis, com o contador dizendo "259
produtos · 173 disponíveis agora" ao lado de uma área em branco — o cliente não via a loja.
Agora o conteúdo é visível por padrão e a animação só entra quando o JS CONFIRMA que vai
animar (`html.js-rv`). Sem JS, sem observador, ou com o observador falhando: a loja aparece. */
/* A entrada é uma ANIMAÇÃO que toca, não um estado escondido esperando alguém acordá-lo.
Não existe mais combinação de eventos que deixe conteúdo permanentemente invisível: se a
animação não rodar, o elemento já está em seu estado final. */
.rv{opacity:1;transform:none;animation:rvIn .45s ease-out}
@keyframes rvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv{animation:none}}
/* ══ 1024 ═════════════════════════════════════════════════════════ */
@media(max-width:1120px){
.wrap{padding:0 24px}
.sec,.plp-head{padding-left:24px;padding-right:24px}
.plp-grid-wrap{grid-template-columns:220px 1fr;gap:24px;padding:20px 24px 56px}
.hero-in{gap:36px;padding:64px 24px 68px}
.hero h1{font-size:44px}
.row6{grid-template-columns:repeat(3,minmax(0,1fr))}
.row4,.plp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.b2b .in{gap:32px;padding:52px 24px}
.pdp{gap:32px;padding:18px 24px 32px}
.pdp-gal .tile{height:440px}
.merch{padding:24px 24px 0}
.chk{padding:28px 24px 56px;gap:24px}
.trust .in{padding:24px}
.ftr .in{padding:40px 24px 30px}
.hdr-nav{gap:24px}
/* Tablet é superfície de toque: o link da faixa não pode conservar os 16 px da linha de texto. */
.announce a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
}
@media(min-width:821px) and (max-width:1120px){
.announce{display:flex;align-items:center;justify-content:center;min-height:44px;padding-top:0;padding-bottom:0}
}
/* ══ 390 · shell mobile de verdade ════════════════════════════════ */
@media(max-width:820px){
/* C-6 · a reserva do rodapé era 64 px e a barra de abas mede 65: faltava 1 px para que o
ÚLTIMO elemento da página pudesse ser rolado acima dela. Numa página curta (conta.html) isso
é a diferença entre o foco ficar 82% coberto e ficar livre — a desobstrução de foco só
funciona se a página TIVER para onde rolar. 65 da barra + 16 de folga + a área segura. */
/* a reserva existe POR CAUSA da barra: em checkout, institucional, políticas, cadastro,
cadastro-pj e 404 não há `.mtab` nenhuma, e mediu-se 81px de vazio morto no fim de cada
uma delas no telemóvel. Reservar espaço para uma barra que não existe é o espelho do
defeito já corrigido neste lote (barra de 65 com reserva de 64): ali faltava, aqui sobra. */
body:has(.mtab){padding-bottom:calc(81px + env(safe-area-inset-bottom,0px))}
.hdr{display:none}
/* P1 (A-2, rodada 11): a faixa de frete grátis era escondida junto com o header desktop — o
mobile, que é a maioria do tráfego, nunca via a régua de R$ 300/R$ 500 que a loja usa para
fechar carrinho. Ela não é header: é informação comercial. Fica, mais compacta, e NÃO é
sticky (a advertência legal não pode disputar espaço fixo). */
.announce{font-size:12px;line-height:1.4;padding:9px 12px}
.announce .an-conta{display:none}
.mhdr{display:flex;flex-direction:column;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:14px 16px 12px;position:sticky;top:0;z-index:60}
.mhdr-top{display:flex;align-items:center;justify-content:space-between}
.mhdr-logo{font-family:Marcellus,Georgia,serif;font-size:19px;letter-spacing:.16em;color:var(--ink)}
.mhdr-logo b{color:var(--brand);font-weight:400}
.mhdr-acts{display:flex;align-items:center;gap:16px;color:var(--ink)}
.mhdr-acts button,.mhdr-acts a{background:none;border:0;padding:0;color:var(--ink);cursor:pointer;display:flex;position:relative}
.mhdr-acts em{position:absolute;top:-6px;right:-8px;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 5px;font-style:normal}
.mhdr-search{height:44px;border:1.5px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 13px;background:var(--paper)}
.mhdr-search input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:14px;min-width:0}
.mtab{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:9px 6px calc(9px + env(safe-area-inset-bottom));z-index:90}
.mtab a,.mtab button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:var(--sub);background:none;border:0;cursor:pointer;font-family:inherit}
.mtab .on{color:var(--brand)}
#camilaFab{display:none}
.hero-in{grid-template-columns:1fr;gap:24px;padding:36px 20px 40px}
.hero h1{font-size:30px;line-height:1.12;margin:12px 0}
.hero p{font-size:14px;margin-bottom:20px}
.hero-ctas{flex-direction:column}
.hero-ctas .btn{width:100%;height:50px}
.hero-art{display:none}
.sec{padding:26px 16px 8px}
.sec-head h2{font-size:20px}
.sec-title{font-size:20px}
.row6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat-tile{padding:14px 10px;align-items:center;text-align:center;gap:8px}
.cat-tile .ct-t{font-size:11.5px}
.cat-tile .note{display:none}
.row6.marcas{display:flex;overflow-x:auto;padding-bottom:4px}
.marca-tile{flex:none;width:104px;padding:14px 8px}
.marca-ini{width:44px;height:44px;font-size:17px}
.marca-tile .mt-n{font-size:10px}
.row4{grid-template-columns:1fr 1fr;gap:12px}
.pcard .tile{height:150px}
.pcard-body{padding:10px 12px 12px}
.pcard-nome{font-size:12.5px;min-height:33px}
.pcard-meta{font-size:10.5px}
.pcard .btn{height:36px;font-size:12.5px;padding:0 10px}
.band-tint .in{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 16px}
.merch{padding:16px 16px 0}
.merch-slide img,.merch-slide video{aspect-ratio:1200/560}
.merch-arr{display:none}
.b2b .in{grid-template-columns:1fr;gap:20px;padding:30px 20px}
.b2b h2{font-size:22px}
.b2b-grid{grid-template-columns:1fr 1fr;gap:10px}
.intel-fams{grid-template-columns:1fr 1fr;gap:10px}
.intel-eixos{flex-direction:column;align-items:stretch;padding:16px}
.intel-eixos input[type=range]{flex:1;width:auto}
.trust .in{grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px}
.ftr .in{grid-template-columns:1fr;gap:24px;padding:30px 20px 24px}
.ftr-base .in2{padding:14px 20px;flex-direction:column;gap:6px}
.plp-head{padding:18px 16px 8px}
.plp-title h2{font-size:20px}
.plp-grid-wrap{grid-template-columns:1fr;padding:8px 16px 40px;gap:0}
.flt{display:none;position:fixed;inset:auto 0 0 0;max-height:78vh;z-index:110;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(23,16,8,.25);padding:16px 20px 24px;top:auto}
.flt.on{display:block}
.flt-close{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.plp-grid{grid-template-columns:1fr 1fr;gap:12px}
.skel{grid-template-columns:1fr 1fr;gap:12px}
.skel div{height:280px}
.pdp{grid-template-columns:1fr;gap:18px;padding:0 0 24px}
.pdp-bc{padding:14px 16px 4px}
.pdp-gal .tile{height:300px;border-radius:0}
.pdp-thumbs{padding:0 16px}
.pdp-info{padding:0 16px}
.pdp-info h1{font-size:20px}
.pdp-body{grid-template-columns:1fr;gap:20px}
.pdp-tabs{gap:20px}
.pdp-wrap-body{padding:0 16px 24px}
.pdp-sticky{position:fixed;left:0;right:0;bottom:64px;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;align-items:center;z-index:80}
.pdp-sticky .btn{flex:1;height:48px}
/* P0-B6: mobiliário fixo do rodapé (barra de navegação 64px + barra de compra ~69px) precisa de
reserva no fim do documento. Sem ela, no fim REAL da rolagem a barra branca opaca cobria a linha
"Beba com moderação. Se for dirigir, não beba." — advertência legal escondida pelo próprio site. */
body.pg-pdp .ftr-base{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
.login{grid-template-columns:1fr;gap:24px;padding:28px 20px 40px}
.login h1{font-size:26px}
.login-card{padding:22px}
.chk-steps{gap:8px;padding:12px 16px;overflow-x:auto}
/* P1-D1: rótulo de CTA que cresce + `white-space:nowrap` estourava o checkout 35,5px além da tela,
e o excesso era INALCANÇÁVEL (`scrollTo(500,0)` deixava `scrollX=0`): resumo cortado e nome do
produto sobreposto ao preço. O botão passa a caber na coluna em vez de empurrá-la. */
.chk .btn, .chk-foot .btn{white-space:normal;padding:0 16px;height:auto;min-height:48px;line-height:1.25;text-align:center;max-width:100%}
.chk, .chk-card, .chk-resumo{min-width:0}
.chk-step .t{font-size:10px;white-space:nowrap}
.chk-step .n{width:24px;height:24px;font-size:11px}
.chk-line{min-width:8px}
.chk{grid-template-columns:1fr;padding:16px 16px 40px;gap:16px}
.chk-resumo{position:static}
.chk-2col{grid-template-columns:1fr 1fr;gap:10px}
.chk-pags{gap:8px}
.saco{width:100%;max-width:100%}
#camilaPainel{width:100%;max-width:100%}
.pop{padding:22px}
}
@media(max-width:820px){#fltMobile{display:inline-flex !important}.plp-tools{flex-wrap:wrap;gap:8px}}
/* ── porta 18+ (idade.js congelado — tokens Golden mapeados) ─────── */
.g-idade{position:fixed;inset:0;z-index:10001;background:rgba(23,16,8,.98);display:flex;align-items:center;justify-content:center;padding:20px}
.g-idade[hidden]{display:none}
.g-idade-card{background:var(--dark2);border:1px solid var(--dark-line);border-radius:16px;max-width:420px;width:100%;padding:34px 28px;text-align:center;color:var(--dark-text)}
.g-idade-logo{height:96px;width:auto;display:block;margin:0 auto 14px}
.g-idade-selo{display:inline-block;border:1.5px solid var(--gold);color:var(--gold);border-radius:10px;padding:4px 12px;font-weight:700;font-size:14px;letter-spacing:.05em;margin-bottom:14px}
.g-idade-pergunta{font-family:Marcellus,Georgia,serif;font-size:24px;line-height:1.25;margin:0 0 6px}
.g-idade-nota{color:var(--dark-sub);font-size:12.5px;margin:0 0 22px}
.g-idade-acoes{display:flex;flex-direction:column;gap:10px}
.g-idade-sim{background:var(--gold);color:var(--dark);border:0;border-radius:10px;height:52px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.g-idade-sim:hover{background:#d79f3f}
.g-idade-nao{background:transparent;border:1px solid var(--dark-line);color:var(--dark-sub);border-radius:10px;height:46px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.g-idade-sim:focus-visible,.g-idade-nao:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.g-idade-legal{color:var(--dark-sub);font-size:11px;margin:16px 0 0}
/* acessibilidade: foco visível consistente */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.cam-prod{height:150px;display:flex;flex-direction:column}
.cam-prod .th{flex:none}
.cam-prod .n{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ═══ ACEITE VISUAL FINAL · ritmo editorial ═══ */
/* banda EXPERIÊNCIA (Golden explorarTeaser) */
.exp-band{position:relative;overflow:hidden;margin-top:52px}
.exp-bg{position:absolute;inset:0;background:radial-gradient(55% 80% at 50% 110%,rgba(201,143,43,.30),transparent 60%)}
.exp-in{position:relative;text-align:center;padding:64px 40px 56px}
.exp-in h2{font-size:38px;color:var(--dark-text);margin:14px auto;max-width:640px}
.exp-in p{color:var(--dark-sub);max-width:520px;margin:0 auto 26px}
.exp-shelf{display:flex;gap:34px;justify-content:center;align-items:flex-end;max-width:520px;margin:0 auto}
.exp-madeira{height:10px;background:linear-gradient(90deg,#3a2c19,#57401f,#3a2c19);border-radius:3px 3px 0 0;max-width:560px;margin:2px auto 28px}
@keyframes expFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.exp-shelf svg{animation:expFloat 7s ease-in-out infinite}
.exp-shelf svg:nth-child(2){animation-delay:1.2s}.exp-shelf svg:nth-child(3){animation-delay:2.4s}.exp-shelf svg:nth-child(4){animation-delay:3.4s}
.hero-art svg{animation:expFloat 8s ease-in-out infinite}
.hero-art svg:nth-child(2){animation-delay:1.6s}.hero-art svg:nth-child(3){animation-delay:3.1s}
@media(prefers-reduced-motion:reduce){.exp-shelf svg,.hero-art svg{animation:none}}
/* banda CAMILA (concierge) */
.cam-band{padding:52px 40px 8px}
.cam-band-in{display:flex;align-items:center;gap:28px;padding:30px 34px;flex-wrap:wrap}
.cam-band-av{width:64px;height:64px;border-radius:99px;background:var(--dark);border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:Marcellus,Georgia,serif;font-size:26px;flex:none}
.cam-band-chips{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:230px}
.cam-band-chips .chip{justify-content:center;height:36px;cursor:pointer;transition:border-color .15s}
.cam-band-chips .chip:hover{border-color:var(--gold)}
/* B2B segmentos */
.b2b-segs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.b2b-segs .chip{background:transparent;border-color:var(--dark-line);color:var(--dark-sub)}
/* merch: gradiente inferior para legibilidade do CTA */
.merch-slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(23,16,8,.45));pointer-events:none}
.merch-cta{z-index:2}
/* PDP: perfil sensorial (dados reais IBU/ABV) */
.pdp-sens{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pdp-sens .ln{display:flex;align-items:center;gap:12px;font-size:12.5px}
.pdp-sens .k{width:86px;font-weight:700;color:var(--sub)}
.pdp-sens .prog{flex:1}
.pdp-sens .v{width:64px;text-align:right;color:var(--sub);font-weight:600}
/* microzoom no hover da imagem do card */
/* microzoom via WRAPPER (o img tem transform inline do img-fit soberano — nunca competir com ele) */
@media(hover:hover){
.pcard .image-wrapper{transition:transform .25s}
.pcard:hover .image-wrapper{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.pcard:hover .image-wrapper{transform:none}}
@media(max-width:1120px){.exp-in{padding:48px 24px 44px}.cam-band{padding:40px 24px 8px}}
@media(max-width:820px){
.exp-in{padding:34px 20px 30px}.exp-in h2{font-size:24px}
.exp-shelf{gap:20px}.exp-shelf svg{height:100px !important}
.cam-band{padding:26px 16px 6px}
.cam-band-in{padding:20px;gap:16px}
.cam-band-av{width:48px;height:48px;font-size:20px}
.cam-band-chips{width:100%}
}
/* Camila digitando (transição de concierge) */
.cam-digitando{display:inline-flex;gap:5px;padding:12px 16px;width:max-content}
.cam-digitando span{width:7px;height:7px;border-radius:99px;background:var(--gold);opacity:.4;animation:camDots 1.1s ease-in-out infinite}
.cam-digitando span:nth-child(2){animation-delay:.18s}.cam-digitando span:nth-child(3){animation-delay:.36s}
@keyframes camDots{0%,100%{opacity:.35;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cam-digitando span{animation:none;opacity:.8}}
/* ═══ FOUNDER BATCH 01 ═══ */
/* P0-03: emblema oficial */
.hdr-emblema{height:40px;width:auto;margin-right:10px;vertical-align:middle}
.hdr-logo{display:inline-flex;align-items:center}
.mhdr-logo{display:inline-flex;align-items:center}
.mhdr-logo .hdr-emblema{height:30px;margin-right:7px}
.ftr-emblema{height:54px;width:auto;display:block;margin-bottom:10px}
/* P0-04: cutout claro => contêiner BRANCO (composto segue preenchendo o tile âmbar) */
.tile.tile-branco{background:linear-gradient(165deg,#f6efe2,#ece1cc)}
.tile.tile-branco::after{background:none}
/* P0-07: logos de cervejarias */
.marca-logo{width:72px;height:72px;border-radius:99px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9px}
.marca-logo img{max-width:100%;max-height:100%;object-fit:contain}
/* P0-08: cards de categoria mais fortes */
.cat-tile .ct-i{width:46px;height:46px;border-radius:99px;background:var(--tint);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center}
/* P0-10: fallback de mídia governado */
.tile-fallback{display:none;font-family:Marcellus,Georgia,serif;font-size:15px;color:var(--sub);letter-spacing:.08em}
.tile.tile-sem-midia .image-wrapper{display:none}
.tile.tile-sem-midia .tile-fallback{display:block}
/* P0-15: barra de cookies (não invasiva, mobile-safe) */
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:130;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(23,16,8,.22);padding:14px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--sub);max-width:720px;margin:0 auto}
.ck-acts{display:flex;gap:8px;margin-left:auto}
@media(max-width:820px){.ck-bar{bottom:72px;flex-direction:column;align-items:stretch;text-align:center}.ck-acts{margin:0;justify-content:center}}
/* P0-B (rodada 12, revisor F) — o banner de consentimento cobria a ADVERTÊNCIA LEGAL em 26 de 28
medições da PRIMEIRA VISITA (100% da área do texto a 360 e 390px). Ele é fixo no rodapé e a
advertência é o último conteúdo do documento: um sempre cai sobre o outro.
A regra soberana é que a advertência NUNCA pode ser obscurecida por UI fixa — então quem cede é
o banner. Enquanto ele está na tela o documento RESERVA a altura dele (medida em tempo real, não
chutada), e a faixa legal rola acima. `--ck-h` é escrita pelo JS que monta o banner. */
body.ck-aberto{padding-bottom:var(--ck-h,180px)}
body.ck-aberto.pg-curta{padding-bottom:var(--ck-h,180px)}
@media(max-width:820px){body.ck-aberto{padding-bottom:calc(var(--ck-h,200px) + env(safe-area-inset-bottom,0px))}
body.ck-aberto:has(.mtab){padding-bottom:calc(81px + env(safe-area-inset-bottom,0px) + var(--ck-h,200px))}}
/* P0-17: interrupção editorial na grade */
.plp-editorial{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:20px 24px;background:linear-gradient(120deg,var(--tint),#f6ecd6);border-color:var(--gold-soft);flex-wrap:wrap}
.plp-editorial .pe-av{width:46px;height:46px;border-radius:99px;background:var(--dark);border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:Marcellus,Georgia,serif;font-size:19px;flex:none}
.plp-editorial .pe-t{font-family:Marcellus,Georgia,serif;font-size:19px}
.plp-editorial .btn{margin-left:auto}
@media(max-width:820px){.plp-editorial .btn{margin-left:0}}
/* merch no meio da página: respiro */
#merch{padding-top:10px}
/* P0-11: prévia de avaliação (localhost only) */
.qa-faixa{position:fixed;left:0;right:0;top:0;z-index:200;background:var(--neg);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-align:center;padding:4px 8px}
.qa-preco{display:flex;align-items:baseline;gap:8px}
/* ═══ POLISH FINAL ═══ */
/* P0-04: lockup oficial único */
.hdr-lockup{height:52px;width:auto;display:block}
.hdr-lockup.m{height:38px}
.ftr-lockup{height:72px;width:auto;display:block;filter:none}
/* P0-03: hero −12% de ocupação vertical */
.hero-in{padding:64px 40px 68px}
@media(max-width:1120px){
.hero-in{padding:28px 24px 30px}
.hero h1{font-size:42px;margin:12px 0 16px}
.hero p{font-size:15px;margin-bottom:22px}
.hero-ctas{gap:8px}
.hero-ctas .btn{height:44px;padding:0 18px;font-size:13px}
}
@media(max-width:820px){.hero-in{padding:28px 20px 32px}}
/* P0-05: header mobile mais denso (alvos ≥44px preservados) */
@media(max-width:820px){
.mhdr{padding:8px 14px 8px;gap:8px}
.mhdr-search{height:40px}
.mhdr-acts{gap:12px}
.mhdr-acts button,.mhdr-acts a{padding:8px}
}
/* P0-02: hierarquia do card — produto e preço dominam, metadado recua */
.pcard-nome{font-size:15px;font-weight:600;min-height:41px}
.pcard-meta{font-size:10.5px;color:#9a8c78;letter-spacing:.06em}
.pcard-gate{font-size:11.5px;font-weight:600;color:#9a8c78}
.pcard-gate .icon-sm{width:13px;height:13px}
.pcard-body{gap:5px}
.stock-ok,.stock-low{font-size:11.5px}
.qa-preco .price{font-size:21px}
/* P0-07: strip de cervejarias curado e mais baixo (−18%) */
.marca-tile{padding:16px 12px 14px;gap:9px}
.marca-logo{width:70px;height:56px;border-radius:12px;padding:6px 10px;background:#fff}
.marca-ini{width:56px;height:56px;font-size:20px}
.marca-tile .mt-n{font-size:11.5px}
.marca-tile .note{font-size:10.5px}
/* P0-10: campanha mobile sem cortar texto (arte ancorada à esquerda) */
@media(max-width:820px){.merch-slide img{object-position:left center}}
/* P0-11: facetas premium */
.flt{border:0;box-shadow:none;background:transparent;padding:0 4px}
.flt-g{border-bottom:1px solid var(--line);padding:15px 4px}
.flt-gt{font-size:13px;letter-spacing:.02em}
.flt-gt:hover{color:var(--brand)}
.flt-vermais{background:none;border:0;color:var(--brand);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0;text-align:left;font-family:inherit}
/* P0-12: selo QA discreto de canto */
/* INSTRUMENTAÇÃO VIVE NO FLUXO — TODA ELA, não só a do RC.
Em M1.3 provei que uma pastilha flutuante não tem canto seguro e pus a do Release Candidate no
fluxo. Deixei de fora a pastilha da PRÉVIA (`previa.mjs` injecta `.qa-pill` sem `.rc-pill`), e
ela continuou fixa: a 320 px media a direita em 339 e criava rolagem horizontal numa página que
o cliente nunca veria assim. Terceira vez neste projecto que reparo a ocorrência e deixo a
classe de pé. A regra passa a ser da CLASSE: qualquer marcador de harness é uma faixa em fluxo,
e por construção não tapa nem empurra nada. Nenhum destes elementos existe no artefato publicado. */
.qa-pill{position:static;display:block;width:100%;z-index:200;background:var(--neg);color:#fff;
font-size:11px;font-weight:800;letter-spacing:.08em;border-radius:0;text-align:center;
padding:5px 12px;box-shadow:none}
.qa-faixa{display:none}
/* P0-14: FAB da Camila −15% + rótulo progressivo */
#camilaFab{height:44px;padding:0 16px 0 13px;font-size:13px;gap:8px}
#camilaFab .fab-full{display:none;white-space:nowrap}
#camilaFab:hover .fab-full{display:inline}
#camilaFab:hover .fab-min{display:none}
/* P0-15: popup mobile como folha inferior, não bloqueio de tela cheia */
@media(max-width:820px){
.pop-back{align-items:flex-end;padding:0}
.pop{border-radius:16px 16px 0 0;max-width:none}
}
/* P0-16: hierarquia do footer */
.ftr-col .t{color:var(--gold);font-size:12px}
.ftr p{line-height:1.55}
.flt-op[hidden]{display:none}
/* ═══ FEEDBACK DO FUNDADOR (03/09) ═══ */
/* hero-carrossel do topo */
.hero-car{position:relative;overflow:hidden}
/* a altura do carrossel passa a seguir o slide à vista (ver bl2-home.js): sem transição, o
avanço automático a cada 7 s faria o conteúdo abaixo pular 444 px de uma vez. A duração é a
mesma do deslize lateral, para os dois movimentos lerem como um só. */
.hero-car{transition:height .5s ease}
@media(prefers-reduced-motion:reduce){.hero-car{transition:none}}
.hero-car .hc-track{display:flex;align-items:flex-start;transition:transform .5s ease}
@media(prefers-reduced-motion:reduce){.hero-car .hc-track{transition:none}}
.hc-slide{flex:0 0 100%;position:relative;min-width:100%}
.hc-img{display:flex;align-items:center;justify-content:center;background:var(--dark)}
.hc-img img{width:100%;height:100%;object-fit:contain;display:block;aspect-ratio:1920/700;max-height:none}
.hc-img .merch-cta{position:absolute;left:44px;bottom:36px;height:48px}
.hero-car .merch-arr{width:46px;height:46px}
.hero-car .merch-dots{bottom:14px}
.hc-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,transparent,rgba(23,16,8,.5));pointer-events:none}
/* rails-carrossel de produtos (10 itens, setas) */
.rail-wrap{position:relative}
.rail-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.rail-track::-webkit-scrollbar{display:none}
/* M1.6 §3 — O TRILHO PASSOU A SERVIR DOIS CONTENTORES DE LARGURAS DIFERENTES.
`25%` é fração do trilho, e o trilho da ficha de produto é bem mais estreito que o da home:
medido a 1024 o item ficava com 154px (contra ~340 na home) e a 900 com 123px, com o
"Adicionar à sacola" a transbordar o card em 10px. Uma fração fixa não serve dois contentores.
O item passa a ter PISO de largura legível: onde couberem quatro, mostram-se quatro; onde não
couberem, o trilho rola — que é para isso que um carrossel existe. */
.rail-item{flex:0 0 calc(25% - 15px);scroll-snap-align:start;min-width:200px}
.rail-item .pcard{height:100%}
.rail-arr{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.rail-arr:hover{border-color:var(--gold)}
.rail-arr.prev{left:-14px}.rail-arr.next{right:-14px}
/* cervejarias: 1–2 linhas CENTRADAS, logos grandes preenchendo */
.marcas-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.marcas-grid .marca-tile{width:186px;padding:0 0 12px;overflow:hidden}
.marcas-grid .marca-logo{width:100%;height:110px;border-radius:12px 12px 0 0;border:0;border-bottom:1px solid var(--line);padding:10px;background:#fff}
.marcas-grid .marca-logo img{width:100%;height:100%;object-fit:contain}
.marcas-grid .marca-ini{width:100%;height:110px;border-radius:12px 12px 0 0;font-size:34px;background:var(--tint)}
.marcas-grid .mt-n{font-size:12px;margin-top:8px}
/* intel com foto real de fundo */
.intel-fam{position:relative;overflow:hidden;min-height:200px;justify-content:flex-end;border:0}
/* no-repeat + fundo branco: com zoom por altura ("auto N%") a foto de estúdio fica mais
estreita que o quadro e REPETIA (lia como "trio de garrafas" — não era a foto) */
.if-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;background-repeat:no-repeat;background-color:#241a10;filter:saturate(1.05)}
.if-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,16,8,.18) 0%,rgba(23,16,8,.42) 34%,rgba(23,16,8,.86) 62%,rgba(23,16,8,.95) 100%)}
.intel-fam .t{position:relative;color:#fff;font-size:21px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.intel-fam .nv{position:relative;color:var(--gold)}
.intel-fam .d{position:relative;color:#eadfce}
.intel-fam .cta{position:relative;color:var(--gold)}
.intel-fam:hover .if-bg{transform:scale(1.04);transition:transform .3s}
@media(prefers-reduced-motion:reduce){.intel-fam:hover .if-bg{transform:none}}
/* Camila: entrada livre */
.cam-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.cam-input input{flex:1;height:44px;border:1.5px solid var(--line);border-radius:11px;padding:0 14px;font:inherit;font-size:14px;min-width:0}
.cam-input input:focus{outline:0;border-color:var(--gold)}
.cam-input button{width:44px;height:44px;border-radius:11px;border:0;background:var(--brand);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media(max-width:820px){
.rail-item{flex:0 0 calc(50% - 10px)}
.rail-arr{display:none}
.marcas-grid{gap:10px}
.marcas-grid .marca-tile{width:calc(33.33% - 7px)}
.marcas-grid .marca-logo,.marcas-grid .marca-ini{height:78px}
/* HERO NO MOBILE (gate B): a arte é 1920x700 (2,74:1) e o slide era esticado a 0,5:1 pelo flex
— `height:100%` anulava o `aspect-ratio` e o `cover` descartava 63–72% da composição, ancorado
à esquerda (as garrafas ficavam fora). Agora a imagem manda na própria altura e nada é
recortado; o fundo da marca preenche o resto do slide. Vale de 320 a 767, não só em 390. */
/* Com a altura do carrossel seguindo o slide à vista, CENTRAR a fila esconde a arte: a fila
continua com a altura do slide mais alto (586 px), o recorte mostra os primeiros 142 px dela
e a imagem, centrada, fica em y≈222 — fora do quadro. A fila alinha pelo TOPO, que é onde o
recorte começa. (O `center` tinha sido posto quando a altura era fixa; virou dívida no
instante em que a altura passou a ser variável.) */
.hero-car .hc-track{align-items:flex-start}
/* `align-self:center` vencia o `flex-start` da fila e empurrava o slide de campanha para
y = (586 − 142) / 2 = 222 px — FORA do recorte de 142 px, o que pintava uma faixa escura sem
arte nenhuma. Medido: host 159..301, slide em 381. O alinhamento é do TOPO, que é onde o
recorte começa; centrar só fazia sentido enquanto a altura era fixa. */
.hc-img{height:auto;align-self:flex-start}
.hc-img img{height:auto;max-height:none;aspect-ratio:1920/700;object-fit:contain;object-position:center}
.hc-img .merch-cta{left:16px;bottom:16px;height:42px}
.intel-fam{min-height:170px}
}
/* institucional */
.inst-hero{position:relative;overflow:hidden}
/* recorte da CENA fotográfica do asset (texto/selos do banner ficam fora do quadro) */
.inst-bg{position:absolute;inset:0;background-image:url('assets/banners-generated/m221-quem-somos-operacao-jumpy-v4.webp');background-size:cover;background-position:center 45%;opacity:1}
.inst-veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,8,.94) 0%,rgba(18,13,8,.83) 34%,rgba(18,13,8,.42) 62%,rgba(18,13,8,.14))}
.inst-in{position:relative;padding:72px 40px 76px;max-width:1280px}
.inst-in h1{font-size:44px;color:var(--dark-text);margin:14px 0 16px;line-height:1.12}
.inst-in p{color:var(--dark-sub);max-width:560px;font-size:16px}
.inst-nums{display:flex;gap:16px;flex-wrap:wrap}
.inst-num{flex:1;min-width:160px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;text-align:center}
.inst-num b{display:block;font-family:Marcellus,Georgia,serif;font-size:30px;font-weight:400;color:var(--brand)}
.inst-num span{font-size:12px;color:var(--sub)}
@media(max-width:820px){.inst-in{padding:36px 20px}.inst-in h1{font-size:28px}.inst-nums{gap:10px}.inst-num{min-width:44%;padding:16px}}
/* ═══ FOUNDER BATCH 03/04 ═══ */
/* P0: slide institucional COMPOSTO — foto real full-height à direita, fundida no escuro */
.hc-slide.hero{position:relative}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:46%;overflow:hidden}
.hero-foto{width:52%}
.hf-img{position:absolute;inset:0;background-image:url('assets/banners-generated/m221-hero-cervejas-chope-v2.png');background-size:cover;background-position:center 55%;filter:saturate(1.04)}
.hf-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0,rgba(23,16,8,.82) 18%,rgba(23,16,8,.3) 46%,rgba(23,16,8,0) 66%),linear-gradient(0deg,rgba(23,16,8,.5),transparent 34%)}
.hf-selo{position:absolute;left:34px;bottom:22px;background:rgba(23,16,8,.82);border:1px solid var(--dark-line);border-radius:12px;padding:10px 18px;color:var(--dark-text);z-index:2}
.hf-selo b{display:block;font-family:Marcellus,Georgia,serif;font-weight:400;font-size:21px;color:var(--gold)}
.hf-selo span{font-size:11.5px;color:var(--dark-sub)}
.hero-in{grid-template-columns:1fr;padding-right:47%}
.hero-copy{max-width:620px}
@media(max-width:1120px){.hero-foto{width:42%}.hero-in{padding-right:42%}}
@media(max-width:820px){
/* mobile: mesma linguagem premium — banda fotográfica logo abaixo dos CTAs */
.hero-foto{position:relative;width:auto;height:190px;margin:0 20px 26px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.hf-img{background-position:50% 46%}
.hf-fade{background:linear-gradient(0deg,rgba(23,16,8,.5),transparent 40%)}
.hf-selo{left:12px;bottom:12px;padding:7px 12px}
/* P1 do revisor final: o selo do herói cobria o ponto ATIVO do carrossel — medido com o herói EM
REPOUSO e no slide que tem o selo: 3 pontos cobertos a 320, 2 a 360, 1 a 390 e 1 a 430; a 768
nenhum. (A primeira medição foi feita sem esperar o repouso e com o selo fora do quadro, em
`left:-358` — devolvia sobreposição fantasma. Um elemento que não está na tela não sobrepõe nada,
e validar um reparo contra medida instável foi como eu quebrei a paginação a 768.)
Quem sobe é o SELO, que é decorativo; os pontos ficam onde a convenção os põe e continuam
ABSOLUTOS — torná-los estáticos metia-os no trilho horizontal e faziam-se arrastar com os slides,
levando 2 de 5 para fora do quadro e escondendo o ativo. */
@media(max-width:480px){ .hf-selo{bottom:66px} }
.hf-selo b{font-size:16px}
.hero-in{padding-right:20px}
}
/* P1: autoridade da marca no header */
.hdr-top{height:84px}
.hdr-lockup{height:60px}
.hdr-lockup.m{height:42px}
/* P1: ritmo — bandas brancas alternando com o papel */
.band-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-white .sec{padding-bottom:44px}
/* P1: fallback editorial de cervejaria (nunca finge ser logo oficial) */
.marca-tipo{width:100%;height:110px;border-radius:12px 12px 0 0;border-bottom:1px solid var(--line);background:linear-gradient(165deg,#fdf9f0,#f1e7d3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--brand-deep)}
.marca-tipo::before,.marca-tipo::after{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.marca-tipo .nm{font-family:Marcellus,Georgia,serif;font-size:16px;letter-spacing:.13em;text-transform:uppercase;text-align:center;padding:0 10px;line-height:1.25}
.marca-tipo.todas{background:var(--dark);color:var(--gold)}
.marca-tipo.todas .nm{font-size:14px}
@media(max-width:820px){.marcas-grid .marca-tipo{height:78px}.marca-tipo .nm{font-size:12px}}
/* P1: múltiplo comercial = metadado secundário (não grito em todo card) */
.pcard-mult{font-size:10.5px;color:#9a8c78;font-weight:600;white-space:nowrap}
/* P2: affordance de carrossel — setas discretas, evidentes no hover/foco */
.merch-arr{opacity:.55;transition:opacity .15s,background .15s}
.merch-stage:hover .merch-arr,.hero-car:hover .merch-arr,.merch-arr:focus-visible{opacity:1}
.rail-arr{opacity:.6;transition:opacity .15s,border-color .15s}
.rail-wrap:hover .rail-arr,.rail-arr:focus-visible{opacity:1}
/* P2: voltarTopo nunca colide com o FAB da Camila (desktop) nem com a tabbar (mobile) */
#voltarTopo{bottom:84px}
@media(max-width:820px){#voltarTopo{bottom:132px;right:16px}}
/* ═══ FOUNDER BATCH 04 ═══ */
/* checkout progressivo: próximas etapas como lista leve, nunca formulários gigantes apagados */
.chk-next{display:flex;align-items:center;gap:12px;font-weight:600;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.chk-next:last-child{border-bottom:0}
.chk-next .n{width:26px;height:26px;border-radius:99px;border:1.5px solid var(--line);color:var(--sub);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.chk-next .note{margin-left:auto;text-align:right}
/* PDP: múltiplo como linha compacta — nunca competindo com o CTA */
.pdp-caixa-slim{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);background:var(--tint);border:1px solid var(--gold-soft);border-radius:10px;padding:10px 14px}
/* M1.8 §2/§3 — AVISOS DE CONDIÇÃO DE VENDA TÊM DE TER CLASSE PRÓPRIA.
`.pdp-caixa-slim` é propriedade do motor de preço, que escreve dentro dela e em certos estados
a ESCONDE (`slimX.hidden = true`). Reutilizá-la fez o preço entrar no meio do aviso e teria
feito o aviso desaparecer — regra de venda que some em silêncio é pior que aviso nenhum. */
.pdp-nota-slim{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);background:var(--tint);border:1px solid var(--gold-soft);border-radius:10px;padding:10px 14px}
.pdp-nota-slim.qa-aprova-pdp{border-color:var(--gold);background:var(--tint)}
.pdp-caixa-slim .icon-sm{color:var(--brand)}
/* A regra de recorte quadrado que existia aqui vinha DEPOIS e vencia a do bloco mobile: era ela
que descartava 63–72% da arte e ancorava à esquerda (as garrafas ficavam fora do quadro).
Duas regras para o mesmo elemento, em blocos distintos, com a última mandando calada.
A decisão do hero no mobile mora num lugar só, no bloco de 820px acima. */
/* Camila: cards de resultado reconhecíveis */
.cam-prods{gap:12px}
.cam-prod{flex:0 0 158px;height:auto}
.cam-prod .th{height:112px}
.cam-prod .n{font-size:11.5px;padding:8px 8px 2px;-webkit-line-clamp:2}
.cam-prod .m{display:block;font-size:10px;color:var(--sub);padding:0 8px}
.cam-prod .vp{display:block;font-size:11px;font-weight:700;color:var(--brand);padding:6px 8px 9px}
/* cervejarias: escala óptica normalizada por logo + tile "todas" navegacional */
.marca-logo img{transform:scale(var(--ls,1))}
.marca-tipo.todas .nm{display:flex;align-items:center;gap:6px}
/* rails: setas integradas dentro do palco */
.rail-arr.prev{left:8px}.rail-arr.next{right:8px}
@media(max-width:820px){.rail-item{flex:0 0 46%}}
/* categorias mobile: última linha centrada (7 itens) */
@media(max-width:820px){
#cats.row6{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#cats .cat-tile{width:calc(33.33% - 7px)}
}
/* BeerCash: como funciona (details discreto) */
.bc-como{margin-top:10px}
.bc-como summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--brand);list-style:none;display:inline-flex;align-items:center;gap:6px}
.bc-como summary::-webkit-details-marker{display:none}
.bc-como[open] summary em{transform:rotate(90deg)}
.bc-como em{font-style:normal;transition:transform .15s}
.bc-como ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--sub);max-width:520px}
.bc-como li{margin-bottom:5px}
/* header: autoridade da marca (sem crescer a barra materialmente) */
.hdr-lockup{height:64px}
.hdr-top{height:88px}
.hdr-lockup.m{height:46px}
/* institucional: strip de logos parceiras */
/* A escala óptica estava no PRÓPRIO ladrilho (`transform` sobre o ![]()
que também era o
cartão branco): cada marca crescia num fator diferente — 1,32 na Roleta Russa, 0,96 na
Barbarella — e os onze cartões ficavam de tamanhos distintos. Com `flex-wrap` e
`align-items:center`, davam onze alturas e ONZE posições verticais diferentes.
Agora o LADRILHO é a caixa de layout, igual para todos, e a escala age só na TINTA
lá dentro, recortada pelo ladrilho — a mesma anatomia que a vitrine já usava. */
/* auto-fit: a grade acomoda a décima segunda cervejaria sem tocar no CSS e sem deixar buraco
quando o número de logos não fecha a linha. Não fixar layout a exatamente 11 marcas. */
/* P2 do revisor: a grade media 471 px dentro de uma seção de 1200. A largura foi curada na
CASCA (`body.pg-curta > *{width:100%}`). Sobra o SEGUNDO defeito, que é de fileira: em grade
de trilhos a fileira incompleta encosta à esquerda e o vão sobra à direita, e foi isso que o
revisor leu como "buraco ao lado do Praia". Com 11 marcas dava 5+5+1 a 1024 px. Fileira
centrada resolve para QUALQUER contagem — a décima segunda cervejaria entra sem tocar no CSS
e nenhuma fileira parcial volta a parecer defeito. Ladrilho de base fixa, sem crescer: a
última fileira mantém o mesmo tamanho das de cima, só fica centrada. */
.inst-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%}
.inst-tile{flex:0 1 140px;display:flex;align-items:center;justify-content:center;height:78px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;overflow:hidden}
.inst-logos img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;background:none;border:0;border-radius:0;padding:0}
@media(max-width:820px){.inst-tile{flex-basis:104px;height:64px}}
/* ═══ FINAL MERCHANDISING CLOSEOUT ═══ */
/* FM-03: PLP retail — imagem domina, metadado quieto, respiro */
.pcard .tile{height:224px}
.pcard-body{padding:15px 16px 16px;gap:7px}
.pcard-meta{color:#a3947f;font-weight:600;letter-spacing:.07em}
.plp-grid{gap:22px}
@media(max-width:820px){.pcard .tile{height:156px}}
/* FM-06: cadastro 1440 composto (proporção + centro vertical + selo real) */
.login-cad{align-items:center;grid-template-columns:.92fr 1.08fr;max-width:1120px;min-height:calc(100vh - 250px)}
@media(max-width:820px){.login-cad{min-height:0;grid-template-columns:1fr}}
/* FM-07: institucional — números como faixa editorial, não dashboard */
/* A faixa media 702px dentro de um contentor de 782px e abria vazio dos dois lados; e os
números vinham em DUAS tipografias — 34px nos curtos, 22px em "SP + Grande SP", porque o
texto longo era reduzido por conta própria. Faixa ocupa a largura toda e a tipografia é UMA. */
.inst-nums{gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 10px;width:100%}
.inst-num b{font-size:30px;line-height:1.1;white-space:nowrap}
@media(max-width:1120px){.inst-num b{font-size:26px}}
@media(max-width:820px){.inst-num b{font-size:22px}}
.inst-num{background:none;border:0;box-shadow:none;border-radius:0;padding:6px 22px;border-right:1px solid var(--line)}
.inst-num:last-child{border-right:0}
/* UMA tipografia para os quatro números. Antes: 34px nos curtos e 22px em "SP + Grande SP",
que o navegador encolhia sozinho — dava a impressão de faixa mal montada. */
/* M1.3 classe E — `white-space:nowrap` num rótulo de TEXTO transborda a própria caixa: medido
em 1440, "SP + Grande SP" ocupa 200 px numa caixa de 184. O nowrap existia para o NÚMERO não
quebrar ao meio; rótulo de texto pode quebrar, e quebrar é melhor do que vazar. */
.inst-num{min-width:0}
.inst-num b{font-size:30px;line-height:1.12;white-space:nowrap;max-width:100%}
.inst-num b.num-longo{white-space:normal;overflow-wrap:break-word}
/* "SP + Grande SP" tinha `font-size:22px` ESCRITO À MÃO no HTML para caber — daí a faixa
aparecer com duas tipografias. O texto mais longo recebe um degrau único e declarado,
não um remendo inline por elemento. */
.inst-num b.num-longo{font-size:23px}
@media(max-width:1120px){.inst-num b{font-size:25px}.inst-num b.num-longo{font-size:21px}}
@media(max-width:820px){.inst-num b{font-size:21px}.inst-num b.num-longo{font-size:18px}}
@media(max-width:820px){.inst-nums{flex-wrap:wrap;padding:14px 6px}.inst-num{border-right:0;min-width:44%;padding:10px 8px}}
.inst-cards{gap:18px}
.inst-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.inst-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){
.inst-cards-3,.inst-cards-2{grid-template-columns:1fr}
}
/* FM-08: equilíbrio marca × busca */
.hdr-lockup{height:66px}
.hdr-search{max-width:500px}
/* FM-09: categorias mobile = rail horizontal com snap (composição deliberada, 7 verdadeiras) */
@media(max-width:820px){
#cats.row6{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding-bottom:6px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
#cats.row6::-webkit-scrollbar{display:none}
#cats .cat-tile{width:auto;flex:0 0 108px;scroll-snap-align:start}
}
/* FM-10: sugestões da Camila colapsam quando a conversa começa */
#camSugestoes.recolhido{display:none}
.cam-sugestoes-toggle{background:none;border:0;color:var(--brand);font-size:12px;font-weight:700;cursor:pointer;padding:4px 0;text-align:left;font-family:inherit}
/* FM-01: véu da Intelligence com mais luz na foto (texto segue legível na base) */
.if-veu{background:linear-gradient(180deg,rgba(23,16,8,.22) 0,rgba(23,16,8,.42) 38%,rgba(23,16,8,.82) 76%)}
/* FM-12: mobile 2-col mostra mais da vertical da foto (lettering entra) — véu protege o texto */
@media(max-width:820px){
.if-veu{background:linear-gradient(180deg,rgba(23,16,8,.3) 0,rgba(23,16,8,.5) 34%,rgba(23,16,8,.86) 74%)}
}
/* GAUNTLET: alvos da tabbar >=44px reais */
@media(max-width:820px){.mtab a,.mtab button{min-width:56px;min-height:46px;justify-content:center}}
/* G-01 (P0): bottom-sheet de filtros mobile precisa de fundo próprio — a regra desktop
.flt{background:transparent} (facetas sobre papel) vazava para a folha */
@media(max-width:820px){
.flt{background:var(--card);border-radius:16px 16px 0 0;padding:16px 20px 24px}
}
/* ═══ PERMANENT CONVERGENCE ═══ */
/* C2 (classe: âncora sob header sticky): margem de rolagem = altura real do header */
section[id],div[id="merch"]{scroll-margin-top:150px}
@media(max-width:820px){section[id],div[id="merch"]{scroll-margin-top:118px}}
/* o título do resultado é o que o cliente lê depois de filtrar: a folga do cabeçalho fixo
declara-se aqui, e não em píxeis calculados por JS antes de a grelha assentar */
#plpTitulo{scroll-margin-top:150px}
@media(max-width:820px){#plpTitulo{scroll-margin-top:129px}}
/* C4 (classe: rail cortado em drawer): recomendações da Camila em LISTA vertical — zero corte */
.cam-prods{flex-direction:column;overflow-x:visible;gap:10px}
.cam-prod{flex:none;width:100%;height:auto;display:flex;flex-direction:row;align-items:center;text-align:left;gap:2px}
.cam-prod .th{flex:0 0 84px;height:84px;padding:6px;border-radius:10px 0 0 10px}
.cam-prod .n{padding:0 10px;font-size:12.5px}
.cam-prod .m{padding:2px 10px 0}
.cam-prod .vp{padding:4px 10px 0;margin-left:auto;white-space:nowrap;align-self:center;flex:none}
.cam-prod>.n,.cam-prod>.m{display:block}
.cam-prod .corpo{flex:1;display:flex;flex-direction:column;padding:8px 0}
/* ── ciclo adversarial 1 ── */
/* P1: dots do palco de campanhas saem de cima da arte (colidiam com texto embutido) */
.merch .merch-dots{position:static;margin:12px 0 2px;justify-content:center}
.merch .merch-dots button{background:rgba(23,16,8,.25)}
.merch .merch-dots button.on{background:var(--gold)}
/* clip do carrossel fica NO STAGE (janela). NUNCA overflow:hidden no track:
o track tem a largura de 1 slide e os demais transbordam — clipar o track apaga
todo slide após o primeiro (P0 'carrossel vazio' flagrado pelo revisor adversarial). */
/* P2: setas do hero mais perceptíveis */
.hero-car .merch-arr{background:rgba(23,16,8,.75);border:1px solid rgba(233,214,174,.35)}
/* P2: CTA sticky mobile = mesmo primário dos demais */
.pdp-sticky .btn{background:var(--brand);color:#fff;border-color:transparent}
/* P2: kicker do card em 1 linha — nunca desalinhar os vizinhos */
.pcard-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* P2: categorias desktop em 7 colunas — sem órfã */
/* A grade estava fixa em 7 colunas e o PJ tem 8 ladrilhos (Ofertas + 7): a oitava caía para
uma segunda linha e deixava um rasgo de vazio. Agora a contagem manda — 7 ou 8 numa linha. */
#cats.row6{grid-template-columns:repeat(7,minmax(0,1fr))}
/* MODIFICADOR ADITIVO. A primeira tentativa TROCOU row6 por row7 e o PJ perdeu a grade
inteira — `display:grid`, o carrossel mobile e a regra de 4 colunas do tablet estão TODOS
pendurados em `.row6`. Resultado: 8 ladrilhos em 8 LINHAS. A classe que carrega o sistema
fica; só a contagem de colunas muda. */
#cats.row6.cats8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1120px){#cats.row6,#cats.row6.cats8{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* P2: sacola vazia — miolo centrado, CTAs na primeira leitura */
.saco-corpo{justify-content:flex-start}
.saco-corpo:has(> .saco-vazio){justify-content:center} /* R86: centralizar só a sacola VAZIA — no scroller com itens o excedente subia para fora do topo */
/* ── ciclo adversarial 2 ── */
/* P1: páginas curtas ancoram o footer na base da janela (classe inteira, não só checkout) */
body.pg-curta{display:flex;flex-direction:column;min-height:100vh}
body.pg-curta main{flex:1}
/* R11/H31 — `min-width:auto` de item flex resolve para MIN-CONTENT, e `align-items:stretch` NÃO
protege disso: um bl_favoritos_v1 (token sem espaço) dentro de um com recuo
de 40px empurrou a página inteira 8px além dos 320 — overflow que a coluna do rodapé ancorado
criou, não o conteúdo. A cura é da CASCA, não da página: todo item da coluna pode encolher, e
token longo quebra. */
body.pg-curta > *{min-width:0}
/* P2 (ciclo 2) — CAUSA DA GRADE ÓRFÃ: `.wrap` tem `margin:0 auto`, e margem automática no eixo
transversal de um flex column CANCELA o esticamento: a seção passa a medir fit-content. Na
institucional a faixa de cervejarias media 551px dentro de 1440 e a grade caía para 2 colunas
com a última fileira órfã. Não é defeito da grade — é da CASCA de toda página `pg-curta`:
valia para as 5 páginas e para qualquer seção futura. A largura volta a ser a do desenho
(`max-width:1280px`) e as margens automáticas seguem centralizando. */
/* CORRIGIDO no mesmo ciclo: `> *` também esticou o que NÃO está no fluxo. A pastilha do
Release Candidate é `position:fixed` e filha direta de `body`, e virou uma TARJA vermelha de
ponta a ponta por cima da barra da Camila — eu criei o defeito que a classe P1-2 combate.
A casca estica os marcos de FLUXO e mais nada; sobreposição fixa nunca. A direção do erro
também importa: esquecer um marco deixa uma seção estreita (visível e medível); esticar uma
sobreposição fixa tapa conteúdo. */
body.pg-curta > header, body.pg-curta > main, body.pg-curta > footer,
body.pg-curta > section, body.pg-curta > .wrap, body.pg-curta > .sec{width:100%}
body.pg-curta main{overflow-wrap:anywhere}
body.pg-curta code{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:390px){body.pg-curta ul,body.pg-curta ol{padding-inline-start:22px}}
/* o botão do texto legal era o verdadeiro piso de min-content: `.btn` com `white-space:nowrap`
mais o recuo horizontal dava 289px, e nenhuma quebra de palavra resolve isso. Em tela estreita
o botão de prosa quebra em linhas e mantém o alvo de 44px. */
@media(max-width:390px){body.pg-curta main .btn{white-space:normal;height:auto;min-height:44px;padding:10px 14px;line-height:1.25}}
/* P2: meta do card reserva 2 linhas SEMPRE — sem truncar ABV e sem desalinhar vizinhos */
.pcard-meta{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:31px;text-overflow:clip}
/* P2: voltar-ao-topo mobile à esquerda — nunca sobre o texto dos cards da Intelligence */
@media(max-width:820px){#voltarTopo{left:16px;right:auto;bottom:76px}}
/* P2: thumbs da Camila com fundo uniforme branco */
.cam-prod .th{background:#fff;border-right:1px solid var(--line)}
/* P2: sacola mobile como bottom-sheet — sem bolsões de vazio vertical */
@media(max-width:820px){
.saco{top:auto;bottom:0;height:auto;max-height:86vh;border-radius:16px 16px 0 0}
.saco-corpo{padding:18px 22px}
}
/* ── ciclo adversarial 3 ── */
/* voltar-ao-topo NÃO existe no mobile (colidia com cards em qualquer lado; tabbar cobre a navegação) */
@media(max-width:820px){#voltarTopo{display:none !important}}
/* micro-labels da Intelligence legíveis sobre qualquer foto */
.intel-fam .nv{text-shadow:0 1px 6px rgba(23,16,8,.85)}
/* ── ciclo adversarial 4 ── */
/* palco de campanhas no aspect NATIVO das artes (1920/700): cover sem NENHUM corte em nenhum slide */
.merch-slide img,.merch-slide video{aspect-ratio:1920/700}
/* CTA real do slide BeerCash cobre exatamente o botão pintado da arte (percentuais da arte inteira) */
.merch-cta.cta-beercash{left:auto;right:3.1%;bottom:2.4%;height:13.4%;min-height:44px;min-width:25.2%;font-size:13.5px;letter-spacing:.04em}
/* R7: peça de campanha usada como foto de produto (6948) — exibe ÍNTEGRA, nunca cortada */
.pcard img.midia-contain{transform:none !important;height:100% !important;max-height:100% !important;object-fit:contain}
/* R8: CTA de slide com faixa de texto no rodapé da arte — sobe para o vão acima da faixa */
.merch-cta.cta-acima-faixa{bottom:17%}
/* R8: corredor reservado para os flutuantes em tablet — conteúdo interativo nunca entra sob FAB/voltar-topo */
@media(max-width:1120px) and (min-width:821px){
.intel-eixos{padding-right:96px}
.intel-ocas{padding-right:118px}
.plp-grid-wrap{padding-right:110px}
}
/* R8 P2: stepper do checkout mobile — fade de rolagem em vez de corte seco */
@media(max-width:820px){
.chk-steps{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}
}
/* ═══ PARIDADE COMERCIAL (jornal/master) — só estado QA autenticado ═══ */
.qa-de{color:var(--sub);text-decoration:line-through;font-size:13.5px;font-weight:600}
.qa-por{color:var(--pos)}
.qa-eco{font-size:11.5px;font-weight:700;color:var(--pos);margin-top:1px}
.badge-clube{background:var(--gold);color:var(--dark)}
/* ═══ R10: paridade comercial — polimento por classe ═══ */
/* P1-1/P1-2 mobile: badges em coluna (nunca sob o fav) e De→Por íntegro */
.qa-de,.qa-por,.qa-preco .price{white-space:nowrap}
/* o mesmo vale para o dinheiro que viaja DENTRO de uma frase ("Ganhe R$ 3,06 em BeerCash"):
a frase quebra onde quiser, o valor nunca se parte. Medido a 320px: 32 valores partidos
entre o "R$" e os dígitos depois de curar os preços da vitrine. */
.qa-val{white-space:nowrap}
/* ═══ M1.6 §4 — CARD COMERCIAL COMPACTO ═══
O card PJ media 630px porque o RITMO VERTICAL era o de uma ficha, não o de uma vitrine: nove
blocos empilhados com 6px de gap entre cada um, cada um com a sua própria altura mínima.
Encurtar texto sozinho deu 17px — a altura estava no espaçamento, não nas palavras.
Aqui reduz-se o RITMO sem tirar informação comercial: preço, preço anterior, economia,
BeerCash e Clube continuam todos no card. Economia e BeerCash mantêm a cor de GANHO. */
.pcard-body{gap:3px;padding:9px 14px 12px}
.pcard-nome{min-height:34px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-badges{gap:4px;margin-bottom:0}
.qa-preco{gap:6px}
.qa-eco{margin-top:0;line-height:1.25}
.qa-price-matrix{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:baseline;font-size:11px;line-height:1.25}
.qa-price-matrix>span:nth-child(odd){color:var(--sub)}
.qa-price-matrix b{font-size:15px;color:var(--ink);white-space:nowrap}
.qa-price-matrix-promo b.qa-por{font-size:17px;color:var(--pos)}
.qa-price-matrix-promo b.qa-box-promo{font-size:15px;color:var(--ink);font-weight:700}
.qa-price-matrix .qa-de{font-size:11px;text-align:right}
.qa-price-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
/* a ficha do BeerCash/Clube era a peça mais alta do corpo: dois níveis de padding e linha solta */
.pcard-gate{font-size:12px;line-height:1.25}
.pcard-gate.qa-bc{padding:3px 8px;gap:5px;min-height:28px}
/* o múltiplo ("Caixa 6") é referência secundária: não precisa de linha própria com folga */
.pcard-mult{margin:0}
@media(max-width:820px){
.pcard-body{gap:2px;padding:8px 12px 10px}
.pcard-nome{min-height:32px}
}
.login.login-auth{display:block;max-width:720px;padding-top:36px}
.login.login-auth>div:first-child{max-width:620px;margin:0 auto}
.login.login-auth .login-perks{margin-top:16px;gap:10px}
.account-panel{padding:16px;margin:10px 0 16px}
.account-panel .note{margin:0 0 10px}
.account-panel .note b{color:var(--ink)}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.account-actions .btn{height:44px;width:100%}
@media(max-width:560px){.account-actions{grid-template-columns:1fr}}
/* aviso de pedido mínimo (decisão 02): comercial e discreto, nunca confundível com o frete */
.qa-minimo-aviso{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:8px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fbf8f1}
.qa-minimo-aviso .icon{flex:none;color:var(--brand)}
/* P1 do revisor final: `.qa-preco` é flex COM QUEBRA e o par VALOR+UNIDADE podia partir-se —
"R$ 19,90" numa linha e "por litro" na seguinte, em três dos quatro cards a 390px (o quarto não
partia, o que deixava a vitrine incoerente consigo mesma). Num produto ancorado por litro isso
faz ler R$ 19,90 como o preço do BARRIL, que custa R$ 597,00 — trinta vezes de diferença.
O par passa a ser UM item de flex: quebra junto, ou não quebra. */
.qa-par{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.qa-preco{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
@media(max-width:820px){
.pcard-badges{flex-direction:column;align-items:flex-start;gap:4px;max-width:calc(100% - 52px)}
.pcard-badges .badge{font-size:9px;padding:2px 6px}
.qa-preco .price{font-size:17px}
.qa-de{font-size:11px}
.qa-eco{font-size:10px}
}
/* P1-3: chope/growler com título de estúdio no TOPO da foto oficial — na PDP o quadro
desloca o wrapper para fora do título (crop visual; o asset governado permanece intacto) */
/* ═══ PACKSHOT DE CHOPE/BARRIL — CONTÉM, NUNCA CORTA (M1.3, classe A) ═══
O contrato anterior era CROP DETERMINÍSTICO: `object-fit:cover` com
`object-view-box:inset(36% 0 0 0)` no card e `translateY(-9%) scale(1.18)` na PDP. Nasceu de
um problema real — o título da foto de estúdio ficava meio-decapitado — e resolveu-o cortando
a faixa inteira. Medido agora no 6734 (Dama Chopp IPA, 800×800): o fundo da foto é BRANCO
PURO e a arte ocupa de 8% a 98% da altura. Os 36% recortados no topo são arte, não margem:
é o lettering comercial que o Fundador viu mutilado.
O contrato passa a ser o mesmo de todo o resto da loja: CONTAIN, com o produto ampliado pelo
normalizador óptico (`img-fit.js`) até ~94% do quadro e travado geometricamente contra corte.
Grande o suficiente para vender, inteiro por construção. */
.pdp-gal.gal-chope{overflow:hidden}
.tile.tile-chope{overflow:hidden;isolation:isolate;contain:paint}
.tile.tile-chope .image-wrapper{contain:paint;background:transparent}
.tile.tile-chope .image-wrapper img{max-width:100%;max-height:100%;object-fit:contain}
/* selo QA nunca oculta a tabbar mobile; favoritos com alvo de toque digno */
/* P1 do revisor: a pastilha do harness (RC/QA) cobria as primeiras letras de "CATEGORIAS" a
390 px. Ela não existe no artefato publicado, mas atrapalha justamente quem avalia. Vai para
o canto direito, acima da barra de abas, onde não há texto de conteúdo. */
@media(max-width:820px){
.pcard-fav{width:40px;height:40px}
}
/* P2: MIDIA_INTEGRA sem letterbox bege — contain sempre sobre branco */
.tile.tile-branco .image-wrapper{background:transparent}
.pcard .tile,.pdp-gal .tile{background:var(--product-image-bg)}
/* ═══ BLOCO BEERCASH NA HOME (M1.3, classe F) ═══ */
.bc-bloco-in{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--gold-soft);border-radius:16px;padding:26px 28px}
.bc-bloco-copy .sec-title{margin:6px 0 10px}
.bc-bloco-copy .kicker{font-size:clamp(18px,1.35vw,24px);letter-spacing:.12em}
.bc-bloco-copy .sec-title{font-size:clamp(34px,3vw,48px);line-height:1.08}
.bc-bloco-copy .note{font-size:14px;max-width:56ch}
.bc-bloco-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.bc-passos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bc-passos li{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:baseline;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bc-passos .bcp-n{grid-row:1/3;width:28px;height:28px;border-radius:99px;background:var(--pos);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.bc-passos b{font-size:14px;color:var(--ink)}
.bc-passos span:not(.bcp-n){font-size:12.5px;color:var(--sub);line-height:1.4}
.bc-bloco-nota{margin-top:12px;max-width:80ch}
@media(max-width:900px){.bc-bloco-in{grid-template-columns:1fr;padding:20px}}
/* ═══ SLIDE DO CLUBE NO HERÓI (M1.3, classe G) ═══
Peça construída, não arte: os percentuais vêm do contrato governado. Mesmo peso visual do
herói institucional, para o programa existir na PRIMEIRA tela da loja. */
/* o slide era `display:flex` e o `.wrap` virava item flex: encolhia até o conteúdo e era
centrado, começando a um terço da tela em vez de na mesma margem do resto do site.
Herói e Clube têm de partir da MESMA coluna — o cliente lê os dois como a mesma loja. */
.hc-clube{position:relative;isolation:isolate;overflow:hidden;background:#171008;display:grid;align-content:center;min-height:420px}
.hc-clube::before{content:"";position:absolute;inset:0;z-index:-2;background:url('assets/banners-generated/m221-clube-chope-real-v3.webp') center/cover no-repeat}
.hc-clube::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,10,6,.96) 0%,rgba(14,10,6,.91) 38%,rgba(14,10,6,.62) 62%,rgba(14,10,6,.18) 100%)}
/* só o padding VERTICAL: o horizontal é do `.wrap`, e duplicá-lo desalinhava o slide em
20 px em relação a "CATEGORIAS" logo abaixo. */
.hcl-in{padding-top:34px;padding-bottom:34px;width:100%}
.hc-clube h2{font-family:Marcellus,Georgia,serif;font-size:clamp(24px,3.4vw,42px);line-height:1.12;color:#fff;margin:6px 0 18px;font-weight:400}
/* P1 do ciclo 3: a 1440 px a metade direita do slide do Clube era um vazio castanho e o revisor
leu "imagem que não carregou" — no primeiro contacto isso já sugere site quebrado. O teto de
660 px prendia a escada das faixas a metade da largura útil. A escada passa a ocupar a faixa
toda; a prosa mantém medida de leitura. */
.hcl-faixas{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr));gap:10px;max-width:760px}
.hcl-in > p, .hcl-nota{max-width:62ch}
.hcl-faixa{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--gold-soft);border-radius:12px;background:rgba(0,0,0,.28)}
/* P1 do revisor visual: os nomes das faixas estavam em dourado escuro sobre marrom — contraste
MEDIDO de 2,47:1, num texto de 15 px que exigiria 4,5:1. O mecanismo comercial central da loja
era o texto menos legível da primeira tela. Dourado claro sobre o mesmo fundo resolve sem
perder a família cromática do Clube. */
.hcl-faixa b{font-family:Marcellus,Georgia,serif;font-size:15px;color:#f0c674;font-weight:400;letter-spacing:.02em}
.hcl-faixa span{font-size:11.5px;color:rgba(255,255,255,.88)}
.hcl-faixa em{font-style:normal;font-size:19px;font-weight:800;color:#fff;margin-top:2px}
.hcl-nota{font-size:12.5px;color:rgba(255,255,255,.86);margin:14px 0 16px;max-width:60ch}
@media(max-width:820px){
.hc-clube{min-height:0}
.hcl-in{padding-top:22px;padding-bottom:70px}
.hcl-faixas{grid-template-columns:repeat(2,minmax(0,1fr))}
.hcl-faixa em{font-size:17px}
}
@media(max-width:820px){
.hc-clube::before{background-position:64% center}
.hc-clube::after{background:linear-gradient(180deg,rgba(14,10,6,.91),rgba(14,10,6,.72))}
#negocio::before{background-position:64% center}
#negocio::after{background:rgba(14,10,6,.76)}
#negocio .b2b-copy{padding:18px}
.inst-bg{background-position:63% center}
.inst-veu{background:linear-gradient(90deg,rgba(18,13,8,.92),rgba(18,13,8,.55))}
}
@media(max-width:360px){.hcl-faixas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hcl-faixa{padding:8px 10px}}
/* ═══ RETAIL CONVERSION (missão 2026-09-06) ═══ */
/* selo de best-seller REAL (fonte curada a curadoria comercial) */
.badge-top{background:#8a5a12;color:#fff}
/* §10 sidebar: mais evidente, ainda premium */
.flt-gt{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.01em;padding:2px 0;transition:color .15s}
.flt-gt em{color:var(--gold);font-weight:700}
.flt-g{padding:16px 4px}
.flt-op{display:flex;align-items:center;gap:10px;padding:7px 2px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.flt-op:hover{background:var(--tint)}
.flt-op .bx{width:18px;height:18px;border-radius:5px;border:1.6px solid var(--gold-soft);flex:none;position:relative;transition:all .15s;background:#fff}
.flt-op input:checked+.bx{background:var(--brand);border-color:var(--brand)}
.flt-op input:checked+.bx::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.flt-op input:focus-visible+.bx{outline:3px solid var(--brand);outline-offset:2px}
.flt-op input:focus+.bx{outline:3px solid var(--brand);outline-offset:2px}
/* o foco de entrada da Camila caía no ÚNICO elemento da loja com outline:0 — o contrato de
diálogo escolhia o pior alvo possível (P1-D3 da rodada 9). */
.cam-input input:focus, .cam-input input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.flt-op input:checked~span{font-weight:700;color:var(--brand-deep)}
.flt-n{color:var(--sub);font-size:11.5px;margin-left:auto}
/* sticky cart bar mobile (estado de prévia com itens) */
#qaSticky{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:95;background:var(--dark);color:#fff;border-radius:14px;padding:10px 14px;display:none;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(23,16,8,.35);font-size:13px}
#qaSticky b{font-size:14px}
#qaSticky .btn{margin-left:auto;height:38px;padding:0 14px}
@media(max-width:820px){#qaSticky.on{display:flex}}
/* ═══ RETAIL — lote 2 (painel de 7): alvos de toque, corredor, toolbar, mobile ═══ */
@media(max-width:820px){
.pcard .btn-sm{height:44px}
#qaSticky .btn{height:44px}
.qa-eco{font-size:11.5px}
/* toolbar: contagem em linha própria; ordenar + filtrar lado a lado (430 quebrava feio) */
.plp-tools{flex-wrap:wrap}
.plp-tools #plpCount{flex-basis:100%}
/* cross-sell da PDP em trilho horizontal (grid 2-col deixava card órfão) */
#pdpXsell .row4{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
#pdpXsell .row4 .pcard{flex:0 0 72%;scroll-snap-align:start}
}
/* corredor do FAB em tablet: coração da 3ª coluna passava sob a Camila */
@media(max-width:1120px) and (min-width:821px){
.plp-grid-wrap{padding-right:150px}
}
/* RETAIL lote 3 — quantidade na PDP; BeerCash inelegível em tom neutro (não é benefício) */
.qa-qty{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;height:48px}
.qa-qty button{width:44px;border:0;background:transparent;font-size:20px;color:var(--ink);cursor:pointer}
.qa-qty button:hover{background:var(--paper-2,#f6f1e6)}
.qa-qty input{width:52px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;font-size:15px;color:var(--ink);-moz-appearance:textfield}
.qa-qty input::-webkit-outer-spin-button,.qa-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bc.bc-neg{background:transparent;border:1px dashed var(--line);color:var(--sub);font-weight:500}
/* RETAIL lote 4 — linha de compra cabe em 390 (stepper + CTA + favorito); um sticky por vez */
.pdp-ctas{flex-wrap:wrap}
@media(max-width:480px){.pdp-ctas .btn-primary{flex:1 1 150px;height:48px}.pdp-ctas .fav{width:48px;height:48px}.qa-qty{height:48px}.qa-qty input{width:44px}}
body:has(#pdpSticky:not([hidden])) #qaSticky{display:none!important}
body:has(#chkResumoItens) #qaSticky{display:none!important}
/* RETAIL lote 5 — toque em qualquer superfície touch (≤1120 cobre tablet 1024); contraste do kicker; 390 sem favorito órfão; corredor do FAB nos rails da PDP */
@media(max-width:1120px){
.pcard .btn-sm{height:44px}
.pcard-fav{width:44px;height:44px}
#plpSort,#fltMobile,.plp-tools .chip{height:44px}
.flt-op{min-height:44px}
.mhdr-acts button,.mhdr-acts a{min-width:44px;min-height:44px;align-items:center;justify-content:center}
#chkVoltar,.chk-voltar,.hdr-acts .btn-sm{min-height:44px}
}
@media(min-width:821px) and (max-width:1120px){.pdp .row4,#pdpXsell .row4{padding-right:150px}}
@media(max-width:480px){.pdp-ctas .qa-qty{flex:1 1 auto}.pdp-ctas .qa-qty input{flex:1;width:auto}.pdp-ctas .btn-primary{order:3;flex:1 1 100%}}
.pcard-meta{color:#75664f}
@media(max-width:480px){.pcard-badges .badge{font-size:10px}}
/* RETAIL lote 6 — CTA de checkout travado pelo pedido mínimo (honesto, não morto: mostra o porquê) */
/* A LINHA QUE EXPLICA POR QUE A COMPRA ESTÁ BLOQUEADA ERA A MAIS APAGADA DO ECRÃ.
`opacity:.55` sobre rgb(94,63,9) em rgb(253,247,234) dá 2,80:1 num texto de 15px/600 — o
mínimo AA é 4,5:1. Apagar um botão é convenção para "não clicável"; apagar a ÚNICA frase que
diz o que falta para poder comprar é esconder a saída. O estado desabilitado passa a ser dito
pelo cursor, pela dessaturação e pelo aria-disabled — não por tirar contraste do texto. */
.btn.btn-off{cursor:not-allowed;filter:grayscale(.45);opacity:1;color:#4a3207;background:#f6efe0;border-color:#d9c79a}
/* RETAIL lote 7 — alvos ≥44 em ≤1120 (header desktop no tablet, campanhas, dots, acordeões, stepper, links do drawer/PDP); corredor do FAB nos rails; título em 3 linhas; pílula QA centralizada no header mobile */
@media(max-width:1120px){
.hdr-act,.hdr-cart{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.merch .btn,.merch-cta .btn,.merch-slide .btn{min-height:44px}
.merch-dots button{width:14px;height:14px;position:relative}
.merch-dots button.on{width:26px}
.merch-dots button::after{content:'';position:absolute;inset:-15px}
.sec-link{min-height:44px}
#pdpCamila{min-height:44px}
.pdp-marca a{display:inline-block;padding:12px 0;margin:-12px 0}
.flt-gt,.flt-vermais{min-height:44px}
#sacola .qa-sq{width:44px!important;height:44px!important}
#sacola .saco-corpo a[href*="produto.html"]{min-height:44px}
}
@media(min-width:821px) and (max-width:1120px){#pdpSim,.rail-track,.pdp .row4{padding-right:150px}}
.pcard-nome{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* a pílula de prévia (só localhost) estava centrada no topo e cobria a régua de frete recém
devolvida ao mobile — ferramenta de revisão não pode tapar o que se vai revisar. Volta para o
canto inferior, onde já vive no desktop. */
/* P1-2 do revisor: no canto inferior ESQUERDO a pastilha cobria as primeiras letras de
"CATEGORIAS" a 390 px. Foi para a direita, acima da barra de abas e da área segura.
UMA REGRA SÓ: a correção anterior ficou mais acima no arquivo e esta, por vir depois, devolvia
`left:10px` e desfazia-a em silêncio — mesma classe do selo que teve duas cores. */
/* ALVO DE TOQUE EM LINK DENTRO DE NOTA — e o eixo é o PONTEIRO, não a largura.
A regra de 44px que já existia só alcança o link que É `.note`; o link INLINE dentro de um
parágrafo `.note` ficava de fora, e é o padrão mais comum: "Regras completas", "Criar minha
conta", "Aviso de Privacidade", "Fale com a Beer Lab" — quatro páginas, 98×15 px a 320, um
terço do alvo mínimo. `mobile-teclado` só visitava a home e apanhou um dos quatro; `mobile-touch`
apanhou o mesmo a 1024, um TABLET — onde uma regra presa a `max-width:820px` nunca chegaria.
Medido: `pointer:coarse` é verdadeiro exactamente onde as suítes exigem 44px (390, 430, 1024) e
falso a 1440, então o dedo — e não a largura — é o critério certo, e o desktop não paga nada. */
@media (pointer:coarse){
.note a[href]{display:inline-flex;align-items:center;min-height:44px}
}
/* (a regra de canto para a pastilha saiu: em fluxo não há canto a escolher) */
/* A pastilha do Release Candidate é INSTRUMENTAÇÃO, e instrumentação não pode tapar conteúdo em
largura nenhuma. Enquanto flutuou, cada correção de canto só mudou QUEM ela cobria: saiu de
cima de "CATEGORIAS" a 390 e foi parar sobre a razão social nas políticas e sobre quatro
textos a 320. Perseguir cantos é corrigir o caso; a classe é "não sobrepor". Ela passa a
entrar NO FLUXO, no topo do corpo — e o que está no fluxo não sobrepõe nada, por construção.
Só existe nas portas do RC: o artefato publicado não tem este elemento. */
/* `.rc-pill` não precisa de regra própria: herda a faixa em fluxo de `.qa-pill`. */
/* RETAIL lote 8 — dots sem sobreposição e abaixo do CTA; CTA do hero 44; chips/ranges/summary/links ≥44; nowrap de preço; contraste .pcard-mult */
@media(max-width:1120px){
.merch-dots{gap:18px}
.merch-dots button::after{inset:-4px -9px -26px} /* área de toque 44 px para BAIXO: nunca sobe sobre o CTA do slide */
.hero-car .merch-dots{z-index:3}
.hc-img .merch-cta{height:44px;z-index:4}
#plpAplicados .chip,#intelOcas .chip,.cam-band-chips .chip,#camilaPainel .cam-chip,.plp-applied .chip{height:44px;min-height:44px}
#eixoVer,.cam-band .btn-sm,.plp-editorial button,.btn-sm{min-height:44px}
.intel-eixos input[type=range]{height:44px;margin:0}
.bc-como summary{min-height:44px;display:inline-flex;align-items:center}
.bc-como a,.ftr-col a{display:inline-block}
.rail-arr,.merch-arr{width:44px;height:44px}
.pcard-nome{min-height:44px}
.pdp-marca a{display:inline-block;min-height:44px;line-height:44px}
.mhdr-search input,#buscaM{height:100%;min-height:40px}
.mhdr-search{min-height:44px}
}
@media(max-width:820px){.hc-img .merch-cta{bottom:34px}}
/* P1 do revisor: a linha do item quebrava como "R$ 607,50 R$" / "597,00 / barril" — o símbolo
órfão no fim da linha e o valor sozinho na seguinte, colado ao preço riscado. O par
PREÇO+UNIDADE passa a ser indivisível; a quebra, quando precisar, acontece ENTRE os pares. */
.qa-si b,.qa-si .qa-de,.chk-preco b,.chk-preco .qa-de,.qa-preco .price,.qa-preco .qa-de{white-space:nowrap}
/* o CONTENTOR volta a poder quebrar; quem não pode partir são os ÁTOMOS (regra abaixo) — ver a
explicação em bl2-comercial.js: nowrap no contentor impedia a quebra E o encolhimento. */
.pr-emb,.pr-total{overflow-wrap:normal}
.pr-emb>*,.pr-total>*{white-space:nowrap}
.qa-eco{word-spacing:normal}
.pcard-mult{color:#75664f}
#qaSticky.pausa{display:none!important}
/* RETAIL lote 9 — logos do institucional com a MESMA normalização óptica da home; dots com área própria; busca preenche o box */
/* M1.3 classe C: a escala óptica vem INLINE de `marcas.js`, a mesma que a vitrine usa. As onze
regras `[alt="..."]{--ls:...}` que moravam aqui eram uma SEGUNDA cópia da tabela de escalas —
mudar `ESCALA` no JS e esquecer o CSS deixava a mesma marca com dois pesos ópticos. */
.inst-logos img{transform:scale(var(--ls,1))}
@media(max-width:1120px){
/* Os dots deixam de ser uma FAIXA de largura total: com 44 px de alvo e left:0/right:0 eles
cobriam o rodapé inteiro do hero e matavam o CTA (o z-index do CTA não sobe porque ele vive
dentro do contexto de empilhamento do .hc-track). Agora o contêiner tem a largura do conteúdo. */
.merch-dots{left:50%;right:auto;transform:translateX(-50%);width:max-content}
/* DOT = ALVO INVISÍVEL DE 44 px + ponto pintado por pseudo-elemento.
`background-clip:content-box` não resolve: as regras de cor usam a shorthand `background:`,
que reseta o clip para border-box e transformava a área de toque em bola opaca sobre o hero. */
.merch-dots{padding:12px 0;gap:0}
.merch-dots button{width:44px;height:44px;padding:0;border-radius:0;background:none!important;position:relative}
.merch-dots button::after{content:none}
.merch-dots button::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:99px;background:rgba(243,234,217,.45)}
.merch-dots button.on{width:44px}
.merch-dots button.on::before{width:22px;background:var(--gold)}
.merch .merch-dots button::before{background:rgba(23,16,8,.25)}
.merch .merch-dots button.on::before{background:var(--gold)}
.hdr-search input,#busca{height:100%;min-height:44px}
}
/* RETAIL lote 9 (F) — alvo de toque por ALTURA REAL, nunca por margem negativa (roubo de alvo/zona morta);
busca do header preenche o box em tablet; contraste do gate; card mostra o formato da unidade */
@media(max-width:1120px){
.ftr-col{gap:4px}
.ftr-col a,.bc-como a{min-height:44px;line-height:44px;display:block}
.hdr-search{display:flex;align-items:stretch;min-height:44px}
.hdr-search input,#busca,#buscaPdp{align-self:stretch;height:auto;min-height:44px}
.mhdr-search input,#buscaM{align-self:stretch;height:auto;min-height:44px}
}
.pcard-gate{color:#75664f}
.pcard-nome{-webkit-line-clamp:4}
/* RETAIL lote 9 — corredor do FAB da Camila em QUALQUER largura ≥821 (o coração do último card
ficava sob o botão flutuante em 1440; antes o corredor parava em 1120) */
@media(min-width:821px){
.plp-grid-wrap,#pdpSim,.rail-track,.pdp .row4,#pdpXsell .row4{padding-right:150px}
}
/* lote 12 — o CTA do hero fica ACIMA dos dots sem MUDAR seu posicionamento:
ele já é position:absolute (bl2.css:657); trocar para relative o arrancava do canto do slide. */
.hc-img .merch-cta{z-index:5}
.hero-in .btn{position:relative;z-index:5}
/* lote 12 — em tela estreita o CTA do hero ocupa a esquerda do rodapé; os dots vão para a DIREITA.
Empilhamento não resolve: o CTA vive dentro do contexto criado pelo transform do .hc-track,
então o z-index dele não sobe acima dos dots (irmãos fora desse contexto). Separação geográfica. */
@media(max-width:480px){
.hero-car .merch-dots{left:auto;right:10px;transform:none;justify-content:flex-end}
}
/* lote 13 — Beer Intelligence: o texto tem contraste GARANTIDO, independentemente da foto.
O véu em gradiente não bastava sobre rótulo claro (medido 1,08:1 no título). O bloco de texto
ganha scrim próprio; a foto passa a COBRIR o quadro (o zoom por altura deixava ~76% de fundo). */
.intel-fam .t,.intel-fam .nv,.intel-fam .d,.intel-fam .cta{position:relative;z-index:2}
.intel-fam .nv{color:#f3d99a;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.intel-fam .d{color:#f0e9de;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.intel-fam .cta{color:#f3d99a;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.intel-fam .t{text-shadow:0 1px 10px rgba(0,0,0,.95)}
/* lote 13 (P2) — o número que o cliente PAGA nunca é menor nem mais apagado que o "De" riscado */
.qa-de{font-size:.92em;font-weight:500;opacity:.75}
/* ═══ UM NÚMERO NÃO QUEBRA; UMA FRASE QUEBRA ═══
Esta regra nasceu para a FRASE "Preço em confirmação" não transbordar a coluna do card em tela
estreita. Só que `.qa-preco .price` também veste os PREÇOS, e vem depois de
`.qa-de,.qa-por,.qa-preco .price{white-space:nowrap}` com a mesma especificidade — ganhava.
Com `overflow-wrap:anywhere` o navegador ficou autorizado a partir "R$ 16,99" em QUALQUER
ponto. Medido a 320px: 69 dos 106 preços da vitrine em duas ou três linhas, com "R$" / "16," /
"99" empilhados numa caixa de 28px; a 360px, 45 de 106. O cliente lê "R$ 16,9" e não sabe se
são 16,90, 16,99 ou 169 — e é o número em que ele tem de confiar para decidir.
Trocar transbordo por preço ilegível é trocar um problema estético por um comercial. A folga
passa a valer só para a FRASE, que é texto e deve mesmo quebrar. */
.qa-preco .price{white-space:nowrap}
.qa-preco .price-frase{white-space:normal;overflow-wrap:break-word}
@media(max-width:480px){.qa-preco .price,.qa-preco .price-frase{font-size:15px;line-height:1.2}}
/* ═══ A 320px NÃO CABE, E AS DUAS SAÍDAS ÓBVIAS SÃO ERRADAS ═══
O par VALOR+UNIDADE é um átomo (senão lê-se "R$ 19,90" como preço do barril, que custa 30×
mais). Mas a 320 o par mede 130px numa coluna de 134 com padding: com `nowrap` transborda o
card em 13px, e deixar quebrar parte o preço. Nenhuma das duas serve: uma esconde dígitos, a
outra mente sobre o que o número significa.
A terceira saída é a que não perde informação nenhuma: o par continua inteiro e ENCOLHE até
caber. Medido a 320px, card de 134px. */
@media(max-width:360px){
.qa-preco .price,.qa-preco .price-frase{font-size:13px}
.qa-par .note{font-size:10.5px}
.qa-par{gap:4px}
}
/* P2 H10 — o último alvo por margem negativa sai de cena (altura real já garante os 44 px) */
@media(max-width:1120px){.pdp-marca a{margin:0}}
/* ═══ MATRIZ DE BREAKPOINTS (lote 16 §8) — corte medido por documentElement.clientWidth ═══
A rodada 9 provou a classe: corrigi o overflow a 390px, a sonda continuou aferindo
`scrollWidth === innerWidth`, e a 320px o checkout passava com 28px cortados sem rolagem
possível. Aqui os culpados medidos (régua de etapas, abas da PDP, seções do institucional)
deixam de empurrar a página em vez de a página aprender a rolar. */
.chk-li{align-items:flex-start}
.chk-li .chk-nome{overflow-wrap:anywhere}
.chk-steps{flex-wrap:wrap;row-gap:8px}
.chk-step{flex:0 1 auto;min-width:0}
.chk-step .t{overflow-wrap:anywhere}
.pdp-tabs{flex-wrap:wrap;row-gap:8px}
.pdp-tab{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.sec, .sec-head{min-width:0;overflow-wrap:anywhere}
.sec img, .sec-head img{max-width:100%;height:auto}
@media(max-width:420px){
.chk-steps{gap:6px;padding:12px 12px}
.chk-line{display:none} /* o traço entre etapas é decorativo e era ele que estourava */
.chk-step .t{font-size:11.5px}
}
/* culpados remanescentes medidos por elemento (não por página): a largura MÍNIMA de conteúdo
de títulos e da grade da PDP empurrava o documento além da viewport a 320px, e a tira de
logos estourava 4px a 768. `overflow-wrap` sozinho não muda min-content em grid/flex — o
item precisa poder encolher (`min-width:0`). */
.pdp-body, .pdp-body > *{min-width:0}
.pdp-sens, .pdp-ficha, .pdp-tabs, .pdp-wrap-body{min-width:0;overflow-wrap:anywhere}
.sec-title, .kicker, .sec-head, .sec-head > *{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.inst-logos{min-width:0}
.inst-logos img{max-width:100%;min-width:0;flex:0 1 auto}
@media(max-width:420px){
/* O respiro lateral e a margem negativa dos roladores de borda a borda (#cats, trilhos) TÊM de
ser o mesmo número. Ao baixar o respiro para 14px eu deixei a margem negativa em 16px e criei
2px de estouro em quatro breakpoints — o defeito veio do meu próprio reparo. Uma variável,
dois usos: não dá mais para divergirem. */
:root{--wrap-pad:14px}
.wrap{padding:0 var(--wrap-pad)}
.sec{padding:32px var(--wrap-pad) 12px}
#cats.row6{margin:0 calc(-1 * var(--wrap-pad));padding-left:var(--wrap-pad);padding-right:var(--wrap-pad);scroll-padding-left:var(--wrap-pad)}
#pdpCamila, #pdpStickyAdd{max-width:100%;min-width:0}
#pdpCamila{margin-left:0;margin-right:0}
}
/* foco visível também nos campos de busca, que zeravam o outline na regra base */
.hdr-search input:focus, .mhdr-search input:focus,
.hdr-search input:focus-visible, .mhdr-search input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* REDE DE SEGURANÇA DE IMAGEM (classe, não caso): imagens com largura intrínseca maior que a
viewport empurravam o documento — a `min-content` de um elemento substituído é o tamanho
natural do arquivo, e nenhuma regra local cobria todas as ocorrências. Medido em institucional
a 320 (min-content 327–374) e a 768 (810–814). Uma regra, todas as imagens. */
img, svg, video, canvas{max-width:100%}
/* NÃO mexer em height dos logos: eles têm largura/altura definidas e `height:auto` fazia a
proporção intrínseca reescrever a largura, estourando a tira em 768. O que faltava era o item
poder encolher dentro do flex. */
.inst-logos, .inst-logos img{min-width:0}
.inst-logos img{flex:0 1 auto;max-width:100%}
/* Os logos são ROTACIONADOS: a caixa de layout tem 228px e a caixa girada chega a 301px. Quem
empurrava o documento (4px a 768, 22px a 320) era a rotação, não o conteúdo — por isso nenhuma
regra de largura resolvia. O efeito fica; o transbordo é contido no próprio bloco, que ganha
respiro para a rotação caber. `clip` não cria rolador, então nada vira barra de rolagem. */
.inst-logos{overflow:clip;padding:18px 6px;overflow-clip-margin:18px}
/* o cartão do institucional era quem tinha min-content de 314px a 320 de viewport */
.card, .card > *{min-width:0}
.card{overflow-wrap:anywhere}
/* CONTENT_MIN_READABLE_WIDTH_GATE (lote 16 §8): o nome do produto na última tela antes de pagar
não pode ser espremido — A mediu 0–57px de área efetiva. Eu tinha posto o piso na marcação da
CAMADA e esqueci a base anônima da própria página: mesma linha, dois donos, um só corrigido.
A regra mora no CSS, então vale para quem quer que pinte a linha. */
.chk-li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.chk-li > span:first-child{flex:1 1 auto;min-width:min(130px, 45%)}
.chk-li .chk-preco{flex:0 1 auto;max-width:58%;text-align:right}
/* `body` é um flex column: um filho mais largo que a viewport não encolhe por `min-width:0` — no
eixo transversal quem limita é `max-width`. Era isso que deixava `.sec` com 342px numa viewport
de 320 e empurrava o documento inteiro. Regra de contenção no nível certo. */
body > *{max-width:100%}
/* `.wrap{max-width:1280px}` vence `body > *` por especificidade (0,2,0 contra 0,0,1) — foi por
isso que a contenção anterior não pegou. O limite passa a ser o MENOR entre a régua do layout
e a largura disponível, então nenhuma viewport estreita fica de fora. */
.wrap, .sec.wrap{max-width:min(1280px, 100%)}
/* traço constante sob escala óptica (gate A) — normalizar tamanho não pode engordar a linha */
.icon *{vector-effect:non-scaling-stroke}
/* ═══ A ADVERTÊNCIA LEGAL TEM FAIXA PRÓPRIA (P1 do revisor D, rodada 11) ═══
O botão flutuante da Camila (`position:fixed`, fundo opaco, z-index 80) cobria 33% da linha
"Venda proibida para menores de 18 anos · Beba com moderação. Se for dirigir, não beba." em
1024 e 1280 — lia-se "…para menore" e "Se for dirig". Já reservei espaço sob a advertência na
PDP mobile no lote 15 e não segui a classe até o rodapé no desktop: MOBILIÁRIO FIXO NENHUM pode
ocupar a faixa da advertência. A reserva vale para toda página que tenha o rodapé legal. */
.ftr-base{position:relative;z-index:81}
.ftr-base .wrap.in2{padding-bottom:64px}
@media(min-width:821px){
/* a faixa da advertência empurra o FAB para cima quando os dois se encontram */
.ftr-base .wrap.in2{padding-right:210px}
}
/* ── §3.C / B-1 — a janela do cartão de família tem de CONTER o trio ──────────────────────
As seis cenas governadas têm 1400×760 (1,842:1) e as três cervejarias ocupam de 0,206 a
0,791 da largura — medido coluna a coluna no pixel, não estimado
(evidence/retail_conversion/INTEL_FAMILIA_EXTENSAO.json).
Com `background-size: cover`, a fração horizontal visível é (larg ÷ alt do cartão) ÷ 1,842.
Em duas colunas o cartão fica quase quadrado e a conta desaba: a 320 px sobravam 33% do
quadro (janela 0,333–0,667) e a 360 px, 43% — as garrafas das pontas saíam nas SEIS
famílias, e o quadro passava a mostrar uma cervejaria onde a regra manda mostrar a família.
Não adianta empurrar o `background-position`: o problema é a LARGURA da janela, não onde ela
está. Abaixo de 560 px o cartão passa a ocupar a linha inteira e a moldura assume a proporção
do próprio quadro — aí o `cover` não tem o que cortar na horizontal, por construção, e a
garantia não depende de eu ter acertado a conta em cada largura.
A altura deixa de ser `min-height` fixo: com `aspect-ratio` ela é derivada, o que também
acaba com os cartões de alturas diferentes (177/187/203/216/229) segundo o tamanho do texto. */
@media(max-width:560px){
.intel-fams{grid-template-columns:1fr}
.intel-fam{aspect-ratio:1400/760;min-height:0}
}
/* ── §3.D — mobile e teclado: quatro classes da rodada 12 ───────────────────────────────── */
/* C-3 · `left:50%` + `translateX(-50%)` é um PAR de centragem, e só funciona em elemento
POSICIONADO. Dentro de `.merch` a faixa de pontos é `position:static`: o `left` é inerte, a
translação sobra, e os pontos andam 110 px para a esquerda — medido: caixa [-96, 124] a 390 px,
2 de 5 botões inteiramente fora da tela, o ponto ATIVO entre eles, e o TAB levando o foco para
fora da viewport. A regra de centragem passa a valer só onde há posicionamento; a faixa estática
já se centra sozinha pelo `justify-content:center` que ela sempre teve. */
@media(max-width:1120px){
.merch .merch-dots{left:auto;right:auto;transform:none;width:auto}
}
/* C-1/C-2 · `.btn` nasce com `white-space:nowrap`, e a 320 px o rótulo "Entrar para ver preço"
pede 111 px numa caixa de 100 — pintando texto FORA do próprio botão em 43 cartões da home.
É a terceira vez que o mesmo `nowrap` do `.btn` aparece como defeito (antes em `politicas.html`
e no passo do checkout): num cartão que encolhe, rótulo que não quebra é rótulo que vaza.
O alvo de 44 px é preservado por `min-height`, não por `height` fixa. */
@media(max-width:390px){
.pcard .btn,.pcard-body .btn,.g-cta-entrar{white-space:normal;height:auto;min-height:44px;line-height:1.2;padding:8px 12px;text-align:center}
}
/* C-6/C-7 · WCAG 2.4.11 — foco não obscurecido. A barra de abas é fixa com 65 px; "Esqueci minha
senha" recebia foco por teclado 100% COBERTA por ela, sem o navegador rolar nada. A reserva vai
no scrollport: o navegador passa a considerar a faixa da barra ao trazer o foco para a tela. */
@media(max-width:820px){
html{scroll-padding-bottom:calc(81px + env(safe-area-inset-bottom,0px));scroll-padding-top:70px}
}
/* C-4 · alvo autônomo menor que 44 px. Não é "aumentar a fonte": é a área tocável do elemento
interativo, com o texto onde estava. */
@media(max-width:820px){
.login-div .note[href],a.note[href]{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#pjEnviar,#chkContinuar,.chk-acoes .btn{min-height:44px;height:auto}
}
/* F-2 · etapa que NÃO acontece no site não recebe o disco numerado — o número é o que promete
"o site te leva de 1 a 6". Ela continua na trilha, porque é verdadeira do pedido. */
.chk-step-eq .t{color:var(--sub)}
.chk-steps-nota{padding:0 40px 14px;margin:0;max-width:760px}
@media(max-width:820px){.chk-steps-nota{padding:0 16px 12px;font-size:11.5px}}
/* ── §7.1 · PRESENÇA ÓPTICA EQUIVALENTE DAS CERVEJARIAS ─────────────────────────────────
`object-fit:contain` ajusta o ARQUIVO, não o desenho. E os onze arquivos têm margens internas
muito diferentes: `campinas` e `leopoldina` têm tinta em 100%×100%, `dama-bier` em 82%×35%.
Resultado medido no pixel: a área de tinta renderizada variava 5,55× entre a menor (Dama Bier,
3.955 px²) e a maior (Leopoldina, 21.970 px²) — o logo mais apagado da parede era o de quem tem
mais margem no arquivo, não o de quem tem marca menor.
A escala por arquivo iguala a ÁREA DE TINTA na mediana (9.827 px²); dispersão cai para 1,01×.
Números e método em evidence/final_acceptance/BREWERY_OPTICAL_NORMALIZATION.json.
Nenhum arquivo foi reeditado: a identidade de cada marca é a do asset oficial. */
.marcas-grid .marca-logo img[src*="alcapone"]{transform:scale(1.292)}
.marcas-grid .marca-logo img[src*="barbarella"]{transform:scale(0.809)}
.marcas-grid .marca-logo img[src*="campinas"]{transform:scale(0.77)}
.marcas-grid .marca-logo img[src*="dama-bier"]{transform:scale(1.254)}
.marcas-grid .marca-logo img[src*="imigracao"]{transform:scale(1.021)}
.marcas-grid .marca-logo img[src*="krug-bier"]{transform:scale(1.0)}
.marcas-grid .marca-logo img[src*="leopoldina"]{transform:scale(0.77)}
.marcas-grid .marca-logo img[src*="praya"]{transform:scale(0.93)}
.marcas-grid .marca-logo img[src*="roleta-russa"]{transform:scale(1.343)}
.marcas-grid .marca-logo img[src*="schornstein"]{transform:scale(0.822)}
.marcas-grid .marca-logo img[src*="way-beer"]{transform:scale(1.045)}
/* a moldura vazia do PNG pode transbordar sem aparecer; o DESENHO é que fica dentro (a suíte
`marcas-optica` mede a contenção da tinta, não a do arquivo) */
.marcas-grid .marca-logo{overflow:hidden}
/* ── §7.3 · HIERARQUIA DOS SELOS ────────────────────────────────────────────────────────────
O Fundador corrigiu o enquadramento: o problema nunca foi a importância do Clube do Chope —
é a ORGANIZAÇÃO da faixa. A ordem visual é imposta por `order`, não pela ordem de inserção,
porque dois caminhos diferentes escrevem aqui (o card base e a camada comercial, que insere
com `afterbegin`). Sem isto a hierarquia dependeria de quem pintou primeiro. */
.pcard-badges .badge-clube{order:1;font-size:11px;padding:4px 11px;letter-spacing:.05em;
background:linear-gradient(180deg,var(--gold),#c89a3c);color:var(--dark);
border:1px solid rgba(120,88,20,.45);box-shadow:0 1px 3px rgba(120,88,20,.28);font-weight:800}
.pcard-badges .badge-promo{order:2;font-size:10px;padding:2px 8px;font-weight:700}
.pcard-badges .badge-top{order:3;font-size:9.5px;padding:2px 7px;font-weight:700;
background:#f1ece1;color:#6b5a3e;letter-spacing:.05em}
.pcard-badges .badge-novo{order:4;font-size:9.5px;padding:2px 7px}
.pcard-badges .badge-caixa,.pcard-badges .badge-mult{order:5;font-size:9.5px;padding:2px 7px}
@media(max-width:430px){
.pcard-badges{gap:4px}
.pcard-badges .badge-clube{font-size:10px;padding:3px 9px}
.pcard-badges .badge-promo,.pcard-badges .badge-top,.pcard-badges .badge-novo{font-size:9px;padding:2px 6px}
}
/* ── SISTEMA SEMÂNTICO DE COR COMERCIAL (§2.3/§4E) ──────────────────────────────────────────
Decisão registrada em evidence/final_acceptance/CONVERSION_PATTERN_DECISIONS.md.
VERDE = ganho econômico: preço promocional, economia e BeerCash.
DOURADO = premium e condição comercial especial: Clube do Chope.
NEUTRO ESCURO = marcador de promoção (o QUANTO do ganho já está em verde, no preço).
VERMELHO = erro e alerta de verdade. Só isso.
O vermelho saiu do selo de "Promoção" porque ele comunicava BENEFÍCIO com a cor de PERDA —
e porque, com preço e economia já em verde, o selo não precisa carregar a saliência sozinho. */
/* a regra do card virou redundante quando a base deixou de ser vermelha: uma cor, uma regra */
/* ═══ BEERCASH MAIS VENDÁVEL (M1.3, classe F) ═══
O crédito era uma linha verde com o mesmo peso da linha de economia: duas frases verdes e
negritas competindo, e o programa comercial desaparecia dentro da própria cor. Vira uma FICHA
com a moeda — continua verde (é ganho), continua abaixo do preço (não compete com a âncora),
mas passa a ter forma própria e a ser reconhecível de relance. */
.bc-ganho,.qa-bc{color:var(--pos)!important}
.pcard-gate.qa-bc,.qa-bc.pcard-gate{display:inline-flex;align-items:center;gap:6px;background:rgba(15,107,56,.08);border:1px solid rgba(15,107,56,.22);border-radius:8px;padding:5px 9px;font-weight:700;line-height:1.25}
.pcard-gate.qa-bc .bc-moeda{flex:none;width:14px;height:14px}
.qa-bc-clube{color:var(--sub)}
.bc-ganho b{color:var(--pos)}
/* ── §4H · RECOLHER FILTROS (desktop) e APLICAR (drawer mobile) ─────────────────────────── */
.chip-flt{display:none}
@media(min-width:821px){
.chip-flt{display:inline-flex}
/* O cabeçalho desktop mede 136px (88 + 48). O painel acompanha a rolagem abaixo
dele e, quando for maior que a janela, rola por dentro sem desaparecer. */
#filtros{position:sticky;top:148px;max-height:calc(100vh - 164px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;align-self:start}
body.flt-oculto .plp-grid-wrap{grid-template-columns:1fr}
body.flt-oculto #filtros{display:none}
}
.flt-foot{display:none}
@media(max-width:820px){
.flt-foot{display:block;position:sticky;bottom:0;background:var(--card);padding:12px 0 2px;margin-top:8px;border-top:1px solid var(--line)}
.flt-foot .btn{width:100%;height:48px}
}
/* §4G · Camila é IA, WhatsApp é WhatsApp — e a tela diz qual é qual */
.cam-ia{font-size:9.5px;font-weight:800;letter-spacing:.1em;vertical-align:2px;margin-left:5px;
padding:1px 5px;border-radius:5px;background:var(--tint);color:var(--brand-deep);border:1px solid var(--gold-soft)}
.cam-wa svg{color:#25d366}
/* ═══ §14-FAVORITOS — a porta de volta ═══
Medido no build REAL (IP da rede, sem painel de QA): 43 corações na vitrine e a rota
`favoritos=1` em lugar nenhum do HTML servido. A sacola ao lado já acertava — conta
escondida no zero, frase honesta quando vazia. O coração agora tem a MESMA anatomia:
nasce em `ligarChrome`, conta só quando há o que contar. */
.hdr-fav{position:relative;background:none;border:0;cursor:pointer;color:var(--ink);padding:0;display:flex}
.hdr-fav em{position:absolute;top:-7px;right:-9px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 6px;font-style:normal}
.hdr-acts .hdr-fav{margin-right:2px}
.mhdr-acts .hdr-fav{background:none;border:0;padding:0;color:var(--ink);cursor:pointer;display:flex;position:relative}
@media(max-width:820px){.mhdr-acts .hdr-fav{padding:8px}}
@media(max-width:390px){.mhdr-acts .hdr-fav{min-width:44px;min-height:44px;align-items:center;justify-content:center}}
/* ═══ CLUBE DO CHOPE — progresso na sacola ═══
O Clube era só um selo dourado. A mecânica (faixas por volume de barril e "faltam X para a
próxima") é o que move o pedido: o cliente que tem 2 barris vê que falta 1 para Bronze. */
.qa-clube{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--gold-soft);border-radius:12px;background:linear-gradient(180deg,#fffdf7,var(--tint))}
.qa-clube>b:first-child{display:block;font-size:13px;color:var(--brand-deep);letter-spacing:.02em}
/* a regra acima era `.qa-clube b` e transformava TODA ênfase interna em bloco: "faltam
2 chopes para Ouro" quebrava em três linhas. Ênfase dentro de nota é inline. */
.qa-clube .note b{display:inline}
.qa-clube .note{display:block;font-size:12px;margin-top:2px}
.qa-clube-barra{height:6px;border-radius:99px;background:#efe4cd;margin:8px 0 6px;overflow:hidden}
.qa-clube-barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#c89a3c)}
.qa-clube-link{color:var(--brand);text-decoration:underline;margin-top:6px}
/* o CTA do Clube é a ação da caixa: alvo de toque digno, sem competir com o CTA do pedido */
.qa-clube-cta{margin-top:8px;height:40px;border-color:var(--gold-soft);color:var(--brand-deep);font-weight:700}
/* ═══ CUPOM (M1.3, classe J) ═══ */
.qa-cupom{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.qa-cupom label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px}
.qa-cupom-linha{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.input-cupom{flex:1 1 140px;min-width:0;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.qa-cupom-linha .btn{flex:0 0 auto;height:40px}
.qa-cupom-msg{display:block;margin-top:6px}
.qa-cupom-msg.err{color:var(--brand-deep);font-weight:600}
.qa-cupom-ok{border-color:var(--pos);background:rgba(15,107,56,.06)}
.qa-cupom-ok b{display:block;color:var(--pos)}
.qa-cupom-ok .note{display:block;margin-top:2px}
.qa-cupom-ok .btn{margin-top:8px}
/* indisponibilidade HONESTA: o bloco continua a existir e a explicar-se, sem ouro e sem
promessa — sumir em silêncio seria esconder que existe um benefício por confirmar. */
.qa-clube-fora{background:var(--tint);border-color:var(--line)}
.qa-clube-fora b{color:var(--sub)}
.pdp-clube{display:block;margin-top:6px}
.pdp-clube .badge-clube{background:linear-gradient(180deg,var(--gold),#c89a3c);color:var(--dark);
border:1px solid rgba(120,88,20,.45);font-weight:800;letter-spacing:.05em;margin-right:4px;vertical-align:1px}
/* ═══ M1.6 §6 — CLUBE DO CHOPE: BENEFÍCIO PROGRESSIVO, NÃO MAIS UMA SEÇÃO CLARA ═══
Decisão do Fundador: "Para seu negócio" e "Clube do Chope" estavam parecidos demais. O B2B é
institucional (bloco escuro, ouro discreto, foco em operação); o Clube é PROMOCIONAL e tem de
ler-se como escada — quanto mais chope no mesmo pedido, maior o desconto.
O ouro continua a ser o elemento central e nenhuma cor sai do sistema Beer Lab: cada degrau usa
o seu metal, o percentual é o maior número do cartão e a posição na escada é explícita. */
/* M1.7 §4 — AUTORIDADE DO CLUBE, SEM REDESENHO E SEM PALETA NOVA.
Dois revisores independentes, por caminhos diferentes, leram o bloco B2B escuro como mais
premium que o Clube logo acima dele — e o Clube é a vantagem comercial, não uma nota. O painel
era um degradê que se dissolvia em transparente a 70%, com filete de 1px: dissolvia-se na
página. Sobe a presença com o que já existe no sistema — creme cheio, filete de ouro em cima,
moldura dourada e sombra —, sem tinta nova e sem um pixel de ciano. Mecânica, faixas e
percentuais continuam a vir do contrato governado. */
/* M1.8 §1 — O CLUBE TEM DE FALAR A LÍNGUA DO SITE.
Em M1.7 dei-lhe autoridade pela via errada: moldura dourada, filete de 4px e caixa própria.
Ganhou peso e perdeu pertença — o Fundador leu-o como "componente separado do resto", e tinha
razão: nenhuma outra seção do site é uma caixa emoldurada. A gramática da casa é kicker +
título serifado + CARTÕES brancos com borda fina e sombra (é o que fazem `.cat-tile`, os
packshots e os blocos de serviço).
A autoridade volta para onde ela é do cliente: a ESCADA. O painel passa a ser uma faixa de
creme suave, sem moldura, como as outras seções; os quatro degraus é que são premium, com os
seus metais e o percentual dominante. Nenhuma tinta fora do sistema, zero ciano. */
#clube{background:linear-gradient(180deg,var(--tint),rgba(253,247,234,0) 88%);border-radius:var(--r);padding:28px 24px 30px;border:0;border-top:1px solid var(--gold-soft)}
#clube .kicker{color:var(--brand);font-weight:800;letter-spacing:.14em}
#clube .sec-title,#clube h2{color:var(--brand-deep)}
.clube-faixas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.clube-faixa{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;box-shadow:var(--shadow);border-top:3px solid var(--gold);display:flex;flex-direction:column;gap:2px;transition:border-color .15s,transform .15s}
.clube-faixa:hover{transform:translateY(-2px)}
.clube-faixa b{display:block;font-family:Marcellus,Georgia,serif;font-size:18px;color:var(--brand);font-weight:400}
/* o número que o cliente GANHA é o maior elemento do cartão */
.clube-faixa .cf-pct{display:block;font-size:30px;line-height:1.05;font-weight:800;color:var(--brand-deep);margin:2px 0 1px}
.clube-faixa .cf-q{display:block;font-size:13px;color:var(--ink);font-weight:700;margin:0}
/* a escada: cada degrau tem o seu metal, do bronze ao diamante */
.clube-faixa.cf-bronze{border-top-color:#a9703f}
.clube-faixa.cf-prata{border-top-color:#9aa3ab}
.clube-faixa.cf-ouro{border-top-color:var(--gold)}
/* §6: NENHUMA COR FORA DO SISTEMA BEER LAB, e o OURO no centro.
O diamante estava em azul-ciano (#6fb4c9), com halo ciano — a única cor de toda a peça fora
de creme/marrom/ouro/metal, medida por amostragem de pixel por um revisor independente. E o
realce dourado do percentual estava no ÚLTIMO degrau, não no Ouro: Bronze, Prata e Ouro saíam
em marrom e só o 15% do Diamante vinha em ouro, o que lia a escada ao contrário.
O diamante passa a platina clara (neutro do sistema) e o ouro volta ao degrau que lhe dá nome;
o Diamante mantém a proeminência pelo halo e pela borda mais clara, não por cor estranha. */
.clube-faixa.cf-diamante{border-top-color:#cfd6db;box-shadow:0 6px 22px rgba(201,143,43,.16)}
.clube-faixa.cf-ouro{border-top-color:var(--gold);box-shadow:0 6px 22px rgba(201,143,43,.20)}
.clube-faixa.cf-ouro .cf-pct{color:var(--brand)}
@media(max-width:1120px){.clube-faixas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.clube-faixas{grid-template-columns:1fr}}
/* ═══ COMPRE PELO SEU SEGMENTO ═══ motor de perfis portado do catálogo anterior */
.seg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.seg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;text-align:left;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.seg-tile:hover{border-color:var(--gold);transform:translateY(-1px)}
.seg-tile .st-i{width:34px;height:34px;border-radius:99px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.seg-tile .st-t{font-weight:700;font-size:13.5px;color:var(--ink)}
.seg-tile.on{border-color:var(--brand);background:var(--tint)}
@media(max-width:1120px){.seg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.seg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}