/* Direção B · Rótulo Aberto (Figma Weave, 5-nov-2026). Por cima de estilo.css: fundo papel, grade precisa, filetes,
   Inter Tight + IBM Plex Mono, uma cor de acento tirada da embalagem (--fundo) usada com parcimônia. A lei em primeiro
   plano: a composição é uma ficha técnica numerada, na ordem do rótulo. */
:root{--papel:#FAF7F2;--filete:#16181D;--cinza:#6E7381;--raio:6px}
body.v-b{background:var(--papel);font-family:'Inter Tight',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:#16181D}
.v-b h1,.v-b h2,.v-b h3,.v-b .kicker,.v-b .selo{font-family:'Inter Tight',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.v-b .eyebrow,.v-b .legal-codigo,.v-b .num,.v-b .rotulo-info strong,.v-b .etapa::before,.v-b .tag,.v-b .fonte,.v-b .av small,.v-b .aviso,.v-b .aviso-av{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-weight:500;letter-spacing:.02em}
.v-b .eyebrow{font-size:12px;color:var(--cinza);text-transform:none;letter-spacing:.04em;border-top:1px solid var(--filete);padding-top:10px}
.v-b h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em}
.v-b .secao{padding:56px 0;border-top:1px solid var(--filete)}
.v-b .topo{background:rgba(250,247,242,.96);border-bottom:1px solid var(--filete)}
.v-b .marca-linha{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px}
.v-b .menu .principal{background:var(--filete)}

/* ficha técnica: a composição */
.v-b .legal{background:var(--papel);border-bottom:1px solid var(--filete)}
.v-b .legal-codigo{font-size:12px;color:var(--cinza);border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);padding:6px 0;margin-bottom:12px}
.v-b .legal-cab{align-items:flex-start}.v-b .legal-cab img{border-radius:50%;background:color-mix(in srgb,var(--fundo) 30%,#fff)}
.v-b .legal h1{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.025em;line-height:1.08}
.v-b .frase-legal{font-family:'Inter Tight',sans-serif;font-size:clamp(19px,2.2vw,24px);border-bottom:1px solid var(--filete)}
.v-b .lista-num{counter-reset:ing;font-size:18px;line-height:1.75;max-width:92ch}
.v-b .lista-num li{display:inline;counter-increment:ing}
.v-b .lista-num li::before{content:counter(ing) ".\00a0";font:500 13px 'IBM Plex Mono',ui-monospace,monospace;color:var(--cinza)}
.v-b .lista-num li:not(:last-child)::after{content:", "}
.v-b .lista-num mark{background:color-mix(in srgb,var(--fundo) 45%,#fff);color:inherit;border-radius:2px}
.v-b .legal .busca{background:#fff;border:1px solid var(--filete);border-radius:999px;padding:6px 6px 6px 18px}
.v-b .legal .busca label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.v-b .legal .busca-linha{border:0;padding:0}.v-b .legal .busca p{font-family:'IBM Plex Mono',monospace;font-size:12px;padding:4px 0 6px}
.v-b .ler{border:1px solid var(--filete);border-radius:var(--raio)}

/* abertura do produto */
.v-b .heroi{background:var(--papel);color:var(--filete);border-top:1px solid var(--filete)}
.v-b .heroi .grande{font-size:clamp(46px,6.4vw,92px);letter-spacing:-.04em;line-height:.95}
.v-b .heroi .grande em{display:inline;margin-left:0;color:var(--cinza)}
.v-b .chamada{font-weight:500}
.v-b .selo{background:#fff;border:1px solid var(--filete);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px}
.v-b .packshot{border-radius:50%;background:color-mix(in srgb,var(--fundo) 35%,#fff);animation:none}
.v-b .packshot figcaption{transform:none;background:#fff;color:var(--filete);border:1px solid var(--filete);border-radius:0;font-weight:500}
.v-b .faixa{background:transparent;color:var(--filete);border-top:1px solid var(--filete);border-radius:0;margin:0}
.v-b .botao{background:var(--filete);border-radius:999px}.v-b .botao:hover{background:#000}

/* sobre / ativos */
.v-b .sobre{background:#fff}.v-b .chips li{border:1px solid var(--filete);font-weight:500}
.v-b .ativo{border:1px solid var(--filete);border-radius:var(--raio);box-shadow:none}.v-b .ativo:nth-child(2n){box-shadow:none}
.v-b .ativo .num{color:var(--cinza);font-size:20px}

/* como usar: linha do tempo */
.v-b .uso{background:var(--papel);color:var(--filete);border-radius:0}
.v-b .passos{grid-template-columns:1fr;gap:0;max-width:760px}
.v-b .passos li{background:none;border:0;border-left:2px solid var(--fundo);border-radius:0;padding:4px 0 22px 22px;position:relative}
.v-b .passos li::before{font:600 13px 'IBM Plex Mono',monospace;color:var(--cinza);margin-bottom:4px}

/* dicas, vídeos, avaliações */
.v-b .dica{border:1px solid var(--filete);border-radius:var(--raio);transform:none!important}.v-b .dica .tag{background:transparent;color:var(--cinza);padding:0}
.v-b .videos{background:var(--papel);color:var(--filete)}.v-b .videos h2{color:var(--filete)}
.v-b .trilho{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));overflow:visible}
.v-b .trilho.largos{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.v-b .video{color:var(--filete)}.v-b .video .tela{border-radius:var(--raio)}.v-b .video .play{background:#fff}.v-b .video .play::after{border-left-color:var(--filete)}
.v-b .avaliacoes{background:#fff;color:var(--filete)}.v-b .av{border:1px solid var(--filete);border-radius:var(--raio)}
.v-b .nota-media strong{font-family:'Inter Tight',sans-serif;font-weight:700}
.v-b .estrelas{color:var(--filete)}

/* rotina, galeria, dúvidas, final */
.v-b .etapa{background:#fff;border:1px solid var(--filete);border-radius:var(--raio)}.v-b .etapa:hover{box-shadow:none}
.v-b .etapa img{background:color-mix(in srgb,var(--fundo) 25%,#fff)}.v-b .etapa.atual{background:color-mix(in srgb,var(--fundo) 30%,#fff);color:var(--filete)}
.v-b .foto{transform:none!important;margin-top:0!important;border:1px solid var(--filete);border-radius:var(--raio);box-shadow:none}
.v-b .duvidas{background:var(--papel)}.v-b .duvida{border:1px solid var(--filete);border-radius:var(--raio)}
.v-b .final{background:var(--filete);color:#fff;border-radius:0}.v-b .final .botao{background:#fff;color:var(--filete)}
.v-b .capitulo{border-top:1px solid var(--filete)}.v-b .capitulo .num{color:var(--cinza);font-size:16px}
.v-b .frase-final{font-family:'Inter Tight',sans-serif;font-weight:700}
.v-b .artigo{border-top:1px solid var(--filete)}
@media(max-width:860px){.v-b .lista-num{font-size:16.5px;line-height:1.7}.v-b .heroi .grande{font-size:clamp(42px,12vw,72px)}}
