/* =====================================================================
   Nobile: página de produto no padrão da landing "Whey 3 em 1".
   Paleta e tipografia extraídas da referência (styles/tokens-referencia.css).
   Fontes: Oswald 500/700 e Manrope 400 a 700 (static/css/nobile-fontes.css).
   Escopo: tudo dentro de .nbr (snipplets/product/nb-pdp.tpl).
   ===================================================================== */

.nbr, .nbr-sticky {
  --nb-bg: #070707;
  --nb-s1: #0E0E0E;
  --nb-s2: #141414;
  --nb-gold: #D9B660;
  --nb-gold-h: #E8CB7A;
  --nb-text: #F5F2EC;
  --nb-muted: #CFC9BD;
  --nb-dim: #A7A39B;
  --nb-faint: #8D887E;
  --nb-light: #F6F3EE;
  --nb-cream: #EFE4CF;
  --nb-sand: #E9DCC0;
  --nb-ink: #151311;
  --nb-ink2: #5C5548;
  --nb-bronze: #7A6A3D;
  --nb-rule: #D8D2C6;
  --nb-oswald: 'Oswald', 'Arial Narrow', sans-serif;
  --nb-manrope: 'Manrope', sans-serif;
}
.nbr {
  position: relative;
  margin-top: 8px;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-family: var(--nb-manrope);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.nbr *, .nbr *::before, .nbr *::after { box-sizing: border-box; }
.nbr :where(img) { max-width: 100%; }
.nbr :where(a) { color: var(--nb-gold); text-decoration: none; }
.nbr :where(a:hover) { color: var(--nb-gold-h); }
.nbr :where(h2, h3, p, ul, ol, dl, figure, blockquote) { margin: 0; }
.nbr :where(ul, ol) { padding: 0; list-style: none; }
.nbr :focus-visible { outline: 2px solid var(--nb-gold); outline-offset: 3px; }
.nbr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estrutura e tipografia ---------- */
.nbr-wrap { width: calc(100% - 12vw); max-width: 1280px; margin-inline: auto; position: relative; }
.nbr-narrow { max-width: 900px; }
.nbr-sec { position: relative; padding: clamp(72px, 12vh, 150px) 0; }
.nbr-lines { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 26px); }
.nbr-light { background: var(--nb-light); color: var(--nb-ink); }
.nbr-h2 {
  font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, 5.4vw, 76px); line-height: .95; letter-spacing: 0;
  margin: 0 0 clamp(36px, 6vh, 80px); color: inherit;
}
.nbr-h3 { font-family: var(--nb-oswald); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; margin: 0 0 12px; }
.nbr-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--nb-gold); margin: 0 0 16px; }
.nbr-gold { color: var(--nb-gold); }
.nbr-lead { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; max-width: 60ch; color: var(--nb-muted); margin-bottom: 28px; }
.nbr-light .nbr-lead { color: var(--nb-ink2); }
.nbr-small { font-size: 12px; line-height: 1.6; color: var(--nb-faint); }
.nbr-light .nbr-small, .nbr-g .nbr-small, .nbr-n .nbr-small { color: var(--nb-ink2); }
.nbr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.nbr-chips span { border: 1px solid rgba(217,182,96,.5); padding: 10px 16px; font-family: var(--nb-oswald); letter-spacing: .14em; font-size: 14px; text-transform: uppercase; line-height: 1; }
.nbr-badge { display: inline-block; background: var(--nb-gold); color: #0a0a0a; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .24em; font-size: 11px; padding: 8px 14px; text-transform: uppercase; margin-bottom: 22px; }
.nbr-tag { display: inline-block; border: 1px solid rgba(217,182,96,.5); color: var(--nb-gold); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; margin-bottom: 16px; }
.nbr-pending { margin-top: 32px; padding: 16px 20px; border: 1px dashed rgba(217,182,96,.6); color: var(--nb-muted); font-size: 13px; }
.nbr-pending.is-light { color: var(--nb-ink2); border-color: var(--nb-bronze); }

/* Imagens de produto: recorte do kit com sombra; fotos do cadastro em palco claro */
.nbr-cutout { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.nbr-stage { background: var(--nb-light); border-radius: 6px; padding: 6%; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.nbr-stage.is-cream { background: #F3EBDA; box-shadow: 0 30px 50px rgba(60,40,10,.18); }
.nbr-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }

/* Botões retangulares, cantos pouco arredondados */
.nbr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 28px; border: 1px solid var(--nb-gold); border-radius: 3px !important;
  background: var(--nb-gold); color: #0a0a0a !important; cursor: pointer;
  font-family: var(--nb-oswald); font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nbr-btn:hover { background: var(--nb-gold-h); border-color: var(--nb-gold-h); }
.nbr-btn:disabled { opacity: .45; cursor: not-allowed; }
.nbr-btn-outline { background: transparent; color: inherit !important; }
.nbr-btn-outline:hover { background: var(--nb-gold); color: #0a0a0a !important; }
.nbr-btn-dark { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-text) !important; }
.nbr-btn-dark:hover { background: #2a2622; border-color: #2a2622; }
.nbr-btn-big { min-height: 56px; padding: 18px 38px; font-size: 15px; box-shadow: 0 18px 50px rgba(217,182,96,.25); }
.nbr-btn-block { display: flex; width: 100%; }
.nbr-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(217,182,96,.6); background: transparent; color: var(--nb-gold); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nbr-round:hover { background: var(--nb-gold); color: #0a0a0a; }

/* =====================================================================
   A + B. Hero com compra
   ===================================================================== */
.nbr-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vh, 72px) 0; background: radial-gradient(ellipse at 50% 120%, #1a1712 0%, #070707 60%); }
.nbr-hero-bg { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px); opacity: .6; }
.nbr-hero-bg::before { content: ''; position: absolute; right: -16vw; top: -16vh; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(196,160,84,.12), transparent 70%); filter: blur(80px); }
.nbr-hero-bg::after { content: ''; position: absolute; left: -16vw; bottom: -14vh; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(110,100,84,.22), transparent 70%); filter: blur(90px); }


.nbr-hero-stage { position: relative; z-index: 1; height: clamp(560px, 80vh, 760px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.nbr-hero-bottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.nbr-hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nbr-hero-price { font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: var(--nb-text); text-shadow: 0 6px 30px rgba(0,0,0,.9); }
.nbr-hero-hint { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--nb-faint) !important; border-left: 1px solid var(--nb-gold); padding-left: 10px; }
.nbr-hero-pack { position: absolute; z-index: 1; right: 26%; top: 50%; transform: translateY(-50%); height: min(94%, 760px); aspect-ratio: 478 / 817; }
.nbr-hero-pack::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -3%; height: 7%; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(26px); z-index: -1; }
.nbr-hero-pack .nbr-cutout { width: 100%; height: 100%; filter: drop-shadow(0 50px 70px rgba(0,0,0,.8)); }
.nbr-hero-pack.is-photo { aspect-ratio: auto; height: auto; width: min(46%, 440px); }
.nbr-hero-pack.is-photo::after { display: none; }
.nbr-hero-pack .nbr-stage { width: 100%; }
.nbr-hero-copy { position: relative; z-index: 2; max-width: 30rem; }
.nbr-hero-title { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; text-shadow: 0 10px 50px rgba(0,0,0,.85); }
.nbr-hero-kicker { display: block; font-size: clamp(20px, 2.6vw, 36px); font-weight: 500; color: var(--nb-muted); letter-spacing: .32em; }
.nbr-hero-big { display: block; font-size: clamp(76px, 12vw, 190px); color: var(--nb-gold); margin: .02em 0 .04em; white-space: nowrap; filter: drop-shadow(0 0 30px rgba(217,182,96,.35)); }
.nbr-hero-big.is-long { font-size: clamp(54px, 7vw, 112px); white-space: normal; }
.nbr-hero-tail { display: block; font-size: clamp(20px, 2.6vw, 36px); font-weight: 500; letter-spacing: .22em; color: var(--nb-text); }
.nbr-hero-sub { margin-top: 22px; max-width: 34ch; font-size: clamp(14px, 1.15vw, 18px); color: var(--nb-muted); line-height: 1.6; text-shadow: 0 4px 20px rgba(0,0,0,.9); }
.nbr-hero-nums { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: clamp(22px, 3.4vw, 56px); }
.nbr-hero-nums strong { display: block; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; color: var(--nb-text); text-transform: uppercase; text-shadow: 0 6px 30px rgba(0,0,0,.9); }
.nbr-hero-nums span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .24em; color: var(--nb-gold); text-transform: uppercase; }


/* =====================================================================
   C. O que faz dele um 3 em 1 + vídeos
   ===================================================================== */
.nbr-c { background-color: var(--nb-s1); }
.nbr-c-title { font-size: clamp(38px, 6vw, 84px); max-width: 14ch; }
.nbr-c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: rgba(217,182,96,.18); border: 1px solid rgba(217,182,96,.18); }
.nbr-c-card { background: var(--nb-s1); padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); min-height: 340px; display: flex; flex-direction: column; }
.nbr-c-card h3 { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; }
.nbr-c-num { font-family: var(--nb-oswald); font-weight: 500; font-size: clamp(46px, 5vw, 72px); line-height: 1; color: var(--nb-gold); margin-top: 24px !important; }
.nbr-c-num small { font-size: .36em; color: var(--nb-faint); letter-spacing: .1em; text-transform: uppercase; }
.nbr-c-text { color: var(--nb-dim); line-height: 1.6; margin: 20px 0 auto !important; max-width: 40ch; }
.nbr-c-card .nbr-chips { margin-top: 26px; }
.nbr-c-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(36px, 5vh, 56px) !important; }
.nbr-c-diffs li { border-top: 1px solid var(--nb-gold); padding-top: 16px; color: var(--nb-dim); font-size: 14px; line-height: 1.55; }
.nbr-c-diffs strong { display: block; color: var(--nb-text); font-weight: 600; margin-bottom: 4px; }

.nbr-vids { margin-top: clamp(48px, 7vh, 88px); }
.nbr-vids-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.nbr-vids-head .nbr-eyebrow { margin: 0; }
.nbr-vids-nav { display: flex; gap: 10px; }
.nbr-vids-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(217,182,96,.4) transparent; }
.nbr-vid { flex: 0 0 clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.nbr-vid-card { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; cursor: pointer; background: #141414 radial-gradient(circle at 50% 40%, #241f17, #0a0a0a 70%); border: 1px solid rgba(217,182,96,.25); }
.nbr-vid-card iframe, .nbr-vid-card video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.nbr-vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nbr-vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--nb-gold); color: #0a0a0a; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .2s ease; }
.nbr-vid-card:hover .nbr-vid-play { transform: translate(-50%, -50%) scale(1.06); }
.nbr-vid-type { position: absolute; left: 10px; top: 10px; background: rgba(7,7,7,.8); color: var(--nb-gold); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 5px 8px; }
.nbr-vid-cap { margin-top: 12px !important; font-size: 13px; line-height: 1.45; color: var(--nb-dim); }
.nbr-vid-cap strong { display: block; color: var(--nb-text); font-weight: 600; }
.nbr-vid-card.is-playing .nbr-vid-play, .nbr-vid-card.is-playing .nbr-vid-poster, .nbr-vid-card.is-playing .nbr-vid-type { display: none; }

/* =====================================================================
   D. Apresentação dos componentes (sem rolagem longa)
   ===================================================================== */
.nbr-d { position: relative; overflow: hidden; min-height: min(88vh, 760px); display: flex; align-items: center; justify-content: center; padding: clamp(64px, 10vh, 120px) 0; background: radial-gradient(ellipse at 50% 50%, #17150f 0%, #070707 65%); text-align: center; }
.nbr-d-glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217,182,96,.18), transparent 70%); filter: blur(30px); }
.nbr-d-pack { position: absolute; left: 50%; top: 50%; width: min(52vw, 340px); transform: translate(-50%, -50%) scale(1.06); opacity: .3; z-index: 1; }
.nbr-d-parts { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; }
.nbr-d-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--nb-gold); box-shadow: 0 0 18px var(--nb-gold); opacity: .7; }
.nbr-d-dot:nth-child(3n+2) { background: var(--nb-text); box-shadow: 0 0 14px var(--nb-text); width: 4px; height: 4px; }
.nbr-d-dot:nth-child(3n) { background: var(--nb-sand); box-shadow: 0 0 14px var(--nb-sand); width: 5px; height: 5px; }
.nbr-d-dot1 { transform: translate(-36vmin, -14vmin); } .nbr-d-dot2 { transform: translate(-30vmin, 18vmin); }
.nbr-d-dot3 { transform: translate(-22vmin, -30vmin); } .nbr-d-dot4 { transform: translate(-40vmin, 4vmin); }
.nbr-d-dot5 { transform: translate(-16vmin, 32vmin); } .nbr-d-dot6 { transform: translate(-6vmin, -38vmin); }
.nbr-d-dot7 { transform: translate(8vmin, 36vmin); } .nbr-d-dot8 { transform: translate(18vmin, -32vmin); }
.nbr-d-dot9 { transform: translate(30vmin, -16vmin); } .nbr-d-dot10 { transform: translate(38vmin, 6vmin); }
.nbr-d-dot11 { transform: translate(28vmin, 24vmin); } .nbr-d-dot12 { transform: translate(-44vmin, -26vmin); }
.nbr-d-dot13 { transform: translate(44vmin, -30vmin); } .nbr-d-dot14 { transform: translate(20vmin, 40vmin); }
.nbr-d-copy { position: relative; z-index: 2; }
.nbr-d-title { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 8vw, 128px); line-height: .95; text-shadow: 0 10px 50px rgba(0,0,0,.8); margin-bottom: clamp(28px, 5vh, 56px) !important; }
.nbr-d-title .nbr-gold { display: block; }
.nbr-d-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 6vw, 90px); }
.nbr-d-nums strong { display: block; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(44px, 6.4vw, 104px); line-height: 1; text-transform: uppercase; text-shadow: 0 10px 50px rgba(0,0,0,.9); }
.nbr-d-nums span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .3em; color: var(--nb-gold); text-transform: uppercase; }
.nbr-d-tail { margin-top: clamp(28px, 5vh, 56px) !important; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .2em; font-size: clamp(16px, 2.2vw, 30px); color: var(--nb-muted); text-transform: uppercase; }

/* =====================================================================
   E. Três fontes de proteína
   ===================================================================== */
.nbr-e { background: var(--nb-s2); }
.nbr-e-title { max-width: 18ch; }
.nbr-e-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.nbr-e-item { border-top: 1px solid var(--nb-gold); padding-top: 28px; }
.nbr-e-code { font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(60px, 8vw, 120px); line-height: 1; letter-spacing: .02em; }
.nbr-e-name { margin-top: 14px !important; color: var(--nb-muted); font-weight: 600; }
.nbr-e-note { margin-top: clamp(36px, 6vh, 60px) !important; color: var(--nb-faint); max-width: 62ch; line-height: 1.6; }

/* =====================================================================
   F. O que tem em cada porção
   ===================================================================== */
.nbr-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--nb-rule); border: 1px solid var(--nb-rule); }
.nbr-macros li { background: var(--nb-light); padding: clamp(22px, 3vw, 36px) clamp(16px, 2vw, 26px); }
.nbr-macros p { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nbr-macros strong { font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(44px, 5.2vw, 80px); line-height: 1; color: var(--nb-ink); font-variant-numeric: tabular-nums; }
.nbr-macros span { font-family: var(--nb-oswald); font-weight: 500; font-size: clamp(16px, 1.8vw, 26px); line-height: 1; color: var(--nb-bronze); }
.nbr-macros small { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .26em; color: var(--nb-bronze); text-transform: uppercase; }
.nbr-macros.is-short { margin-bottom: 28px; }
.nbr-carb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(28px, 5vh, 56px); padding: clamp(22px, 3vw, 36px); background: var(--nb-ink); color: var(--nb-text); }
.nbr-carb p strong { display: block; font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; }
.nbr-carb p span { display: block; margin-top: 6px; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .14em; font-size: clamp(13px, 1.4vw, 20px); text-transform: uppercase; }
.nbr-carb .nbr-btn-outline { color: var(--nb-text) !important; }
.nbr-f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 6vh, 72px); }
.nbr-f-portion { font-size: 13px; color: var(--nb-ink2); margin-bottom: 12px !important; }
.nbr-table-wrap { overflow-x: auto; }
.nbr-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--nb-ink); }
.nbr-table thead tr { border-bottom: 2px solid var(--nb-ink); }
.nbr-table th, .nbr-table td { padding: 9px 6px 9px 0; text-align: left; font-weight: 400; }
.nbr-table thead th { font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .1em; font-size: 12px; text-transform: uppercase; }
.nbr-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbr-table thead th:not(:first-child) { text-align: right; }
.nbr-table tbody tr { border-bottom: 1px solid var(--nb-rule); }
.nbr-table tbody td:last-child { color: var(--nb-ink2); }
.nbr-table tr.is-sub th { padding-left: 16px; }
.nbr-ing li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--nb-rule); font-size: 14px; }
.nbr-ing strong { font-weight: 600; }
.nbr-ing span { color: var(--nb-ink2); }
.nbr-allergens { margin-top: 18px !important; font-size: 13px; line-height: 1.6; }
.nbr-allergens + .nbr-small { margin-top: 8px; }
.nbr-details { margin-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--nb-rule); border-bottom: 1px solid var(--nb-rule); }
.nbr-details summary { cursor: pointer; padding: 18px 0; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.nbr-details summary::-webkit-details-marker { display: none; }
.nbr-details summary::after { content: '+'; color: var(--nb-bronze); font-size: 22px; line-height: 1; }
.nbr-details[open] summary::after { content: '\2212'; }
.nbr-details-body { padding: 0 0 24px; font-size: 14px; color: var(--nb-ink); overflow-wrap: anywhere; }
.nbr-details-body img { height: auto; }
.nbr-compare { margin-top: clamp(32px, 5vh, 56px); }

/* =====================================================================
   G. Sabor
   ===================================================================== */
.nbr-g { position: relative; overflow: hidden; background: linear-gradient(180deg, #F6F3EE 0%, #EFE4CF 30%, #E9DCC0 100%); color: var(--nb-ink); padding: clamp(72px, 12vh, 150px) 0; }
.nbr-g-glow { position: absolute; right: -10vw; top: -10vh; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(217,182,96,.45), transparent 70%); filter: blur(30px); pointer-events: none; }
.nbr-g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.nbr-g-title { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 9vw, 150px); line-height: .9; letter-spacing: -.01em; }
.nbr-g-sub { margin-top: 20px !important; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .14em; font-size: clamp(14px, 1.5vw, 22px); color: var(--nb-ink2); text-transform: uppercase; }
.nbr-g-nums { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 5vh, 56px) !important; border-top: 1px solid rgba(21,19,17,.2); padding-top: 26px !important; }
.nbr-g-nums strong { display: block; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(40px, 4.6vw, 66px); line-height: 1; text-transform: uppercase; }
.nbr-g-nums span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .24em; color: var(--nb-bronze); text-transform: uppercase; }
.nbr-g-flavors { margin-top: clamp(28px, 5vh, 48px); }
.nbr-g-flabel { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--nb-bronze); margin-bottom: 12px !important; font-weight: 600; }
.nbr-g-flist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px !important; max-width: 520px; }
.nbr-g-fopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border: 1px solid rgba(21,19,17,.18); border-radius: 6px; background: rgba(246,243,238,.6); color: var(--nb-ink) !important; text-align: center; height: 100%; transition: border-color .2s ease, background .2s ease; }
a.nbr-g-fopt:hover { border-color: var(--nb-ink); background: var(--nb-light); }
.nbr-g-fopt.is-current { border: 2px solid var(--nb-ink); background: var(--nb-light); }
.nbr-g-fopt.is-soldout { opacity: .55; }
.nbr-g-fthumb { width: 64px; height: 64px; display: block; }
.nbr-g-fthumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.nbr-g-fname { font-family: var(--nb-oswald); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; line-height: 1.1; }
.nbr-g-fprice { font-size: 12px; color: var(--nb-ink2); font-variant-numeric: tabular-nums; }
.nbr-g-media { display: flex; justify-content: center; }
.nbr-g-pack { width: min(100%, 355px); filter: drop-shadow(0 40px 50px rgba(60,40,10,.35)); }
.nbr-g-media .nbr-stage { width: min(100%, 460px); }

/* =====================================================================
   H. Simples de preparar
   ===================================================================== */
.nbr-h .nbr-h2 { font-size: clamp(34px, 4.8vw, 68px); }
.nbr-h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.nbr-h-step { border-top: 1px solid var(--nb-ink); padding-top: 24px; }
.nbr-h-step h3 { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); margin-top: 10px; line-height: 1; }
.nbr-h-step p:last-child { margin-top: 10px; color: var(--nb-ink2); }
.nbr-h-n { font-size: 11px; letter-spacing: .3em; color: var(--nb-bronze); text-transform: uppercase; font-weight: 600; }
.nbr-h-photo { position: relative; min-height: 240px; overflow: hidden; border-radius: 6px; }
.nbr-h-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nbr-h-ico { height: 120px; position: relative; margin-bottom: 20px; }
.nbr-h-ico i { position: absolute; display: block; font-style: normal; }
.nbr-h-ico1 .a { left: 24px; top: 14px; width: 64px; height: 40px; border-radius: 0 0 32px 32px; background: var(--nb-gold); transform-origin: right top; animation: nbr-pour 3s ease-in-out infinite; }
.nbr-h-ico1 .b { left: 86px; top: 6px; width: 8px; height: 44px; background: #b9913a; border-radius: 4px; transform-origin: top left; animation: nbr-pour 3s ease-in-out infinite; }
.nbr-h-ico1 .g { width: 5px; height: 5px; border-radius: 50%; background: var(--nb-sand); animation: nbr-grain 1.5s linear infinite; }
.nbr-h-ico1 .g1 { left: 36px; top: 56px; } .nbr-h-ico1 .g2 { left: 46px; top: 58px; animation-delay: .5s; } .nbr-h-ico1 .g3 { left: 30px; top: 60px; animation-delay: 1s; }
.nbr-h-ico2 .cup { left: 30px; top: 8px; width: 60px; height: 104px; border: 2px solid var(--nb-ink); border-radius: 8px 8px 14px 14px; overflow: hidden; }
.nbr-h-ico2 .fill { left: 0; right: 0; bottom: 0; height: 12%; background: var(--nb-sand); animation: nbr-fill 3.5s ease-in-out infinite; }
.nbr-h-ico2 .lid { left: 36px; top: 0; width: 48px; height: 12px; background: var(--nb-ink); border-radius: 4px 4px 0 0; }
.nbr-h-ico3 .shk { left: 30px; top: 8px; width: 60px; height: 104px; transform-origin: bottom center; animation: nbr-shake 1.6s ease-in-out infinite; }
.nbr-h-ico3 .shk .lid { left: 6px; top: 0; width: 48px; height: 12px; background: var(--nb-ink); border-radius: 4px 4px 0 0; }
.nbr-h-ico3 .shk .body { left: 0; top: 10px; width: 60px; height: 94px; border: 2px solid var(--nb-ink); border-radius: 8px 8px 14px 14px; background: linear-gradient(180deg, transparent 30%, var(--nb-sand) 30%); }
@keyframes nbr-pour { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-38deg); } }
@keyframes nbr-grain { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-14px, 54px); opacity: 0; } }
@keyframes nbr-fill { 0%, 15% { height: 12%; } 70%, 100% { height: 66%; } }
@keyframes nbr-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg) translateY(-3px); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg) translateY(-2px); } 80% { transform: rotate(5deg); } }

/* =====================================================================
   I. Laudo
   ===================================================================== */
.nbr-i { overflow: hidden; background: var(--nb-bg) repeating-linear-gradient(135deg, rgba(217,182,96,.05) 0 1px, transparent 1px 30px); }
.nbr-i-pack { position: absolute; right: -8vw; top: 50%; width: min(48vw, 520px); transform: translateY(-50%) rotate(8deg); opacity: .9; pointer-events: none; }
.nbr-i-pack img { width: 100%; display: block; filter: drop-shadow(0 60px 80px rgba(0,0,0,.8)); }
.nbr-i-fade { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, #070707 0%, rgba(7,7,7,.6) 40%, transparent 100%); pointer-events: none; }
.nbr-i-body { position: relative; z-index: 1; }
.nbr-i-title { font-size: clamp(38px, 6vw, 86px); max-width: 14ch; margin-bottom: 20px; }
.nbr-i-lead { max-width: 52ch; color: var(--nb-muted); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; }
.nbr-i-fields { margin-top: clamp(32px, 5vh, 52px) !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: rgba(217,182,96,.25); border: 1px solid rgba(217,182,96,.25); max-width: 820px; }
.nbr-i-fields div { background: #0a0a0a; padding: 18px 22px; }
.nbr-i-fields dt { font-size: 10px; letter-spacing: .26em; color: var(--nb-faint); text-transform: uppercase; font-weight: 600; }
.nbr-i-fields dd { margin: 8px 0 0; font-size: 13px; color: var(--nb-gold); font-variant-numeric: tabular-nums; }
.nbr-i-table { margin-top: 24px; max-width: 820px; border: 1px solid rgba(217,182,96,.25); background: #0a0a0a; }
.nbr-i-thead { padding: 14px 22px; font-size: 10px; letter-spacing: .26em; color: var(--nb-faint); border-bottom: 1px solid rgba(217,182,96,.25); text-transform: uppercase; font-weight: 600; }
.nbr-i-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nbr-i-table th, .nbr-i-table td { padding: 11px 22px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 400; }
.nbr-i-table tbody th { color: var(--nb-text); }
.nbr-i-table td { color: var(--nb-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.nbr-i-table td:last-child { color: var(--nb-gold); }
.nbr-i-scope { margin-top: 24px; max-width: 820px; border-left: 2px solid var(--nb-gold); padding: 4px 0 4px 18px; color: var(--nb-muted); font-size: 14px; line-height: 1.6; }
.nbr-i-scope p + p { margin-top: 8px; }
.nbr-i-scope strong { color: var(--nb-text); font-weight: 600; }
.nbr-i-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.nbr-i-actions .nbr-small { max-width: 44ch; }

/* =====================================================================
   J. Embalagem: frente, laterais e verso
   ===================================================================== */
.nbr-j { background: radial-gradient(ellipse at 35% 50%, #191712 0%, #0e0e0e 60%); }
.nbr-j-title { margin-bottom: 24px; }
.nbr-j-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vh, 40px); }
.nbr-j-tab { min-height: 44px; padding: 10px 18px; border: 1px solid rgba(217,182,96,.45); border-radius: 3px !important; background: transparent; color: var(--nb-text); font-family: var(--nb-oswald); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.nbr-j-tab:hover { border-color: var(--nb-gold); color: var(--nb-gold); }
.nbr-j-tab[aria-selected="true"] { background: var(--nb-gold); border-color: var(--nb-gold); color: #0a0a0a; }
.nbr-j-faces { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.nbr-j-faces::-webkit-scrollbar { display: none; }
.nbr-j-face { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nbr-j-img { display: flex; justify-content: center; }
.nbr-j-img .nbr-cutout { width: auto; max-width: 100%; height: min(64vh, 560px); }
.nbr-j-img.nbr-stage { width: min(100%, 520px); margin-inline: auto; }
.nbr-j-face.is-photo { grid-template-columns: 1fr; }
.nbr-j-capt { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(36px, 5vw, 76px); line-height: .95; margin: 12px 0 16px !important; }
.nbr-j-cap p:not(.nbr-eyebrow):not(.nbr-j-capt) { color: var(--nb-dim); line-height: 1.6; max-width: 42ch; }
.nbr-j-cap .nbr-btn { margin-top: 22px; }

/* =====================================================================
   K. Menos produtos. Mais praticidade.
   ===================================================================== */
.nbr-k { background: var(--nb-s2); }
.nbr-k-title { font-size: clamp(40px, 6.4vw, 92px); line-height: .92; margin-bottom: 24px; }
.nbr-k-lead { margin-bottom: clamp(40px, 6vh, 72px); }
.nbr-k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 3vw, 40px); }
.nbr-k-grid li { border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; }
.nbr-k-grid li.is-gold { border-top-color: var(--nb-gold); }
.nbr-k-grid strong { display: block; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(52px, 7vw, 110px); line-height: 1; }
.nbr-k-grid li.is-gold strong { color: var(--nb-gold); }
.nbr-k-grid span { display: block; margin-top: 10px; letter-spacing: .2em; font-size: 12px; color: var(--nb-gold); text-transform: uppercase; }

/* =====================================================================
   L. Rotina (foto 450 x 450 enquadrada, sem ampliar) + vídeo com comentário
   ===================================================================== */
.nbr-l { position: relative; background: var(--nb-bg); padding: clamp(72px, 12vh, 140px) 0; overflow: hidden; }
.nbr-l-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 450px); align-items: center; gap: 0; max-width: 1000px; }
.nbr-l-copy { position: relative; z-index: 2; margin-right: -180px; }
.nbr-l-title { font-size: clamp(36px, 5.6vw, 84px); max-width: 16ch; margin-bottom: 20px; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.nbr-l-text { max-width: 40ch; color: var(--nb-muted); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; }
.nbr-l-photo { position: relative; width: 100%; max-width: 450px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
.nbr-l-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nbr-l-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.9) 0%, rgba(7,7,7,.55) 45%, rgba(7,7,7,.1) 100%); }
.nbr-vc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid rgba(255,255,255,.12); }
.nbr-vc-media .nbr-vid-card { max-width: 300px; }
.nbr-vc-quote { font-family: var(--nb-oswald); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; color: var(--nb-text); }
.nbr-vc-quote::before { content: '\201C'; color: var(--nb-gold); margin-right: 4px; }
.nbr-vc-quote::after { content: '\201D'; color: var(--nb-gold); margin-left: 2px; }
.nbr-vc-author { margin-top: 14px !important; color: var(--nb-gold); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.nbr-vc-card { margin-top: 28px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: var(--nb-s1); border: 1px solid rgba(217,182,96,.3); border-radius: 6px; max-width: 560px; }
.nbr-vc-thumb { width: 64px; height: 80px; display: flex; align-items: center; justify-content: center; background: var(--nb-light); border-radius: 4px; overflow: hidden; }
.nbr-vc-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.nbr-vc-thumb .nbr-cutout { filter: none; height: 72px; width: auto; }
.nbr-vc-name { font-size: 13px; line-height: 1.35; color: var(--nb-text); }
.nbr-vc-price { margin-top: 4px !important; font-family: var(--nb-oswald); font-weight: 700; font-size: 22px; color: var(--nb-text); }

/* =====================================================================
   M. Sachês
   ===================================================================== */
.nbr-m { overflow: hidden; background-color: var(--nb-s1); }
.nbr-m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.nbr-m-title { font-size: clamp(40px, 6vw, 88px); line-height: .92; margin-bottom: 18px; }
.nbr-m-nums { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin: 0 0 22px !important; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px !important; }
.nbr-m-nums strong { display: block; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1; text-transform: uppercase; }
.nbr-m-nums span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .24em; color: var(--nb-gold); text-transform: uppercase; }
.nbr-m-note { margin: 22px 0 30px !important; max-width: 52ch; }
.nbr-m-media { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; }
.nbr-m-glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; max-width: 600px; max-height: 600px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217,182,96,.4), transparent 70%); filter: blur(36px); }
.nbr-m-media .nbr-cutout { position: relative; width: min(100%, 600px); filter: drop-shadow(0 40px 60px rgba(0,0,0,.8)); }
.nbr-m-media figcaption { position: relative; margin-top: 8px; text-align: center; }

/* =====================================================================
   N. Opções reais de compra
   ===================================================================== */
.nbr-n { background: var(--nb-cream); color: var(--nb-ink); }
.nbr-n .nbr-h2 { font-size: clamp(40px, 6vw, 88px); line-height: .92; margin-bottom: 14px; }
.nbr-n .nbr-lead { color: var(--nb-ink2); margin-bottom: clamp(36px, 6vh, 64px); }
.nbr-n-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: stretch; }
.nbr-opt { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; background: var(--nb-light); color: var(--nb-ink); border: 1px solid var(--nb-rule); border-radius: 6px; }
.nbr-opt.is-current { background: var(--nb-ink); color: var(--nb-text); border-color: var(--nb-ink); box-shadow: 0 30px 60px rgba(21,19,17,.25); }
.nbr-opt-badge { position: absolute; top: -12px; left: 24px; background: var(--nb-gold); color: #0a0a0a; font-family: var(--nb-oswald); font-weight: 500; letter-spacing: .2em; font-size: 10px; padding: 6px 12px; text-transform: uppercase; }
.nbr-opt-badge-off { background: var(--nb-ink2); color: var(--nb-text); }
.nbr-opt-title { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; margin-top: 10px !important; }
.nbr[data-line="doce"] .nbr-opt-title { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; }
.nbr-opt-desc { margin-top: 8px !important; font-size: 13px; line-height: 1.5; color: var(--nb-bronze); }
.nbr-opt.is-current .nbr-opt-desc { color: var(--nb-dim); }
.nbr-opt-media { flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; margin: 18px 0; }
.nbr-opt-img { height: 160px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.nbr-opt-img.is-cutout { mix-blend-mode: normal; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.nbr-opt.is-current .nbr-opt-img:not(.is-cutout) { mix-blend-mode: normal; background: var(--nb-light); border-radius: 4px; padding: 6px; }
.nbr-opt-label { font-size: 11px; letter-spacing: .26em; color: var(--nb-bronze); text-transform: uppercase; }
.nbr-opt.is-current .nbr-opt-label { color: var(--nb-dim); }
.nbr-opt-price { font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1; margin-top: 6px !important; font-variant-numeric: tabular-nums; }
.nbr-opt-compare { font-size: 13px; text-decoration: line-through; opacity: .6; margin-top: 4px !important; }
.nbr-opt .nbr-btn { margin-top: 20px; }
.nbr-opt.is-soldout:not(.is-current) { opacity: .7; }

/* Avaliações: oculto enquanto o app não monta nada (o JS libera) */
.nbr-reviews { padding: clamp(64px, 10vh, 120px) 0; }
.nbr-reviews .nbr-h2 { font-size: clamp(34px, 4.8vw, 68px); }
.nbr-reviews.is-empty { display: none; }

/* =====================================================================
   O. Perguntas frequentes
   ===================================================================== */
.nbr-o { background: var(--nb-s2); }
.nbr-o .nbr-h2 { font-size: clamp(36px, 5vw, 72px); }
.nbr-faq { border-top: 1px solid rgba(255,255,255,.15); }
.nbr-faq-item { border-bottom: 1px solid rgba(255,255,255,.15); }
.nbr-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--nb-oswald); font-weight: 500; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .02em; color: var(--nb-text); }
.nbr-faq-item summary::-webkit-details-marker { display: none; }
.nbr-faq-item summary:hover { color: var(--nb-gold); }
.nbr-faq-item summary i { position: relative; flex: none; width: 18px; height: 18px; }
.nbr-faq-item summary i::before, .nbr-faq-item summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--nb-gold); transition: transform .2s ease; }
.nbr-faq-item summary i::after { transform: rotate(90deg); }
.nbr-faq-item[open] summary i::after { transform: rotate(0); }
.nbr-faq-item p { padding: 0 0 24px; color: var(--nb-dim); line-height: 1.7; max-width: 64ch; }

/* =====================================================================
   P. Fechamento
   ===================================================================== */
.nbr-p { position: relative; overflow: hidden; padding: clamp(72px, 12vh, 140px) 0 clamp(48px, 8vh, 80px); background: radial-gradient(ellipse at 50% 60%, #1a1712 0%, #070707 60%); }
.nbr-p-glow { position: absolute; left: 30%; top: 50%; width: 80vmin; height: 80vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217,182,96,.45) 0%, rgba(217,182,96,.12) 40%, transparent 70%); filter: blur(30px); }
.nbr-p-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.nbr-p-media { display: flex; justify-content: center; }
.nbr-p-media .nbr-cutout { width: min(100%, 420px); filter: drop-shadow(0 50px 70px rgba(0,0,0,.8)); }
.nbr-p-media .nbr-stage { width: min(100%, 440px); }
.nbr-p-title { font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(52px, 8vw, 130px); line-height: .9; text-shadow: 0 10px 50px rgba(0,0,0,.8); }
.nbr-p-comp { margin-top: 22px !important; font-family: var(--nb-oswald); font-weight: 500; font-size: clamp(16px, 1.8vw, 24px); line-height: 1.5; color: var(--nb-muted); }
.nbr-p-buy { margin-top: clamp(28px, 4vh, 44px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); max-width: 520px; }
.nbr-p-name { font-size: 14px; color: var(--nb-muted); }
.nbr-p-price { margin: 6px 0 4px !important; font-family: var(--nb-oswald); font-weight: 700; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nbr-p-price s { font-size: .45em; color: var(--nb-faint); font-weight: 500; margin-left: 8px; }
.nbr-p-buy .nbr-btn-big { margin-top: 20px; }
.nbr-p-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px !important; font-size: 11px; letter-spacing: .22em; color: var(--nb-faint); text-transform: uppercase; }
.nbr-p-legal { margin-top: clamp(48px, 7vh, 80px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; line-height: 1.7; color: var(--nb-faint); }
.nbr-p-legal p { max-width: 90ch; }

/* =====================================================================
   Janelas (rótulo e laudo)
   ===================================================================== */
.nbr-modal { width: min(920px, calc(100% - 32px)); max-height: 92vh; padding: clamp(18px, 3vw, 30px); border: 1px solid rgba(217,182,96,.4); border-radius: 6px; background: var(--nb-s1); color: var(--nb-text); font-family: var(--nb-manrope); overflow: auto; }
.nbr-modal::backdrop { background: rgba(7,7,7,.86); }
.nbr-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.nbr-modal h3 { margin: 0; font-family: var(--nb-oswald); font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; color: var(--nb-text); }
.nbr-modal-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--nb-gold); background: transparent; color: var(--nb-gold); font-size: 22px; line-height: 1; cursor: pointer; }
.nbr-modal-x:hover { background: var(--nb-gold); color: #0a0a0a; }
.nbr-modal-img { margin: 16px 0; background: #fff; border-radius: 4px; overflow: hidden; }
.nbr-modal-img.is-dark { background: #0e0e0e; display: flex; justify-content: center; padding: 16px; }
.nbr-modal-img img { display: block; width: 100%; height: auto; }
.nbr-modal-img.is-dark img { width: auto; max-width: 100%; max-height: 80vh; }
.nbr-modal .nbr-small { color: var(--nb-dim); }
body.nbr-modal-open { overflow: hidden; }

/* =====================================================================
   Barra compacta de compra (celular)
   ===================================================================== */
.nbr-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(7,7,7,.96); border-top: 1px solid rgba(217,182,96,.4); color: var(--nb-text, #F5F2EC); font-family: 'Manrope', sans-serif; transform: translateY(110%); transition: transform .25s ease; }
.nbr-sticky.is-visible { transform: none; }
.nbr-sticky[hidden] { display: none; }
.nbr-sticky-info { min-width: 0; display: flex; flex-direction: column; }
.nbr-sticky-name { font-size: 12px; color: #CFC9BD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbr-sticky-price { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; }
.nbr-sticky .nbr-btn { min-height: 46px; padding: 10px 22px; }
@media (min-width: 992px) { .nbr-sticky { display: none !important; } }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1099px) {
  .nbr-hero-big { font-size: clamp(64px, 10vw, 120px); }
  .nbr-hero-pack { right: 8%; height: min(80%, 640px); }
}

@media (max-width: 767px) {
  .nbr-wrap { width: calc(100% - 32px); }
  .nbr-sec, .nbr-g, .nbr-l, .nbr-p { padding-top: 64px; padding-bottom: 64px; }
  .nbr-h2 { margin-bottom: 32px; }

  .nbr-hero { padding: 40px 0; }
  .nbr-hero-stage { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "copy pack" "bottom bottom"; gap: 20px 8px; align-items: center; }
  .nbr-hero-copy { grid-area: copy; }
  .nbr-hero-pack { grid-area: pack; position: relative; right: auto; top: auto; transform: none; height: auto; width: 100%; max-height: 300px; display: flex; justify-content: center; }
  .nbr-hero-pack .nbr-cutout { width: auto; max-width: 100%; height: auto; max-height: 280px; }
  .nbr-hero-pack.is-photo { width: 100%; }
  .nbr-hero-pack .nbr-stage { padding: 4%; }
  .nbr-hero-bottom { grid-area: bottom; flex-direction: column; align-items: stretch; gap: 22px; }
  .nbr-hero-nums { gap: 18px; }
  .nbr-hero-cta { align-items: stretch; }
  .nbr-hero-cta .nbr-btn { width: 100%; }
  .nbr-hero-hint { display: none; }
  .nbr-hero-kicker { font-size: 14px; letter-spacing: .28em; }
  .nbr-hero-big { font-size: clamp(50px, 16vw, 72px); white-space: nowrap; }
  .nbr-hero-big.is-long { font-size: clamp(36px, 11vw, 52px); }
  .nbr-hero-tail { font-size: 13px; letter-spacing: .18em; }
  .nbr-hero-sub { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .nbr-hero-nums strong { font-size: 26px; }
  .nbr-hero-nums span { font-size: 9px; letter-spacing: .18em; margin-top: 4px; }

  .nbr-c-card { min-height: 0; }
  .nbr-d { min-height: 0; }
  .nbr-d-pack { width: 60vw; opacity: .35; }
  .nbr-j-face { grid-template-columns: 1fr; gap: 16px; }
  .nbr-j-img .nbr-cutout { height: min(52vh, 420px); }
  .nbr-j-capt { font-size: 32px; }
  .nbr-l-grid { grid-template-columns: 1fr; }
  .nbr-l-copy { margin: 0 0 -96px; }
  .nbr-l-photo { margin-left: auto; width: min(100%, 450px); }
  .nbr-l-shade { background: linear-gradient(180deg, rgba(7,7,7,.92) 0%, rgba(7,7,7,.35) 45%, rgba(7,7,7,.1) 100%); }
  .nbr-vc { grid-template-columns: 1fr; }
  .nbr-vc-media .nbr-vid-card { max-width: 260px; margin-inline: auto; }
  .nbr-vc-card { grid-template-columns: 56px minmax(0, 1fr); }
  .nbr-vc-card .nbr-btn { grid-column: 1 / -1; width: 100%; }
  .nbr-m-media { min-height: 0; }
  .nbr-p-grid { grid-template-columns: 1fr; }
  .nbr-p-media .nbr-cutout { width: min(70%, 300px); }
  .nbr-p-title { font-size: clamp(44px, 14vw, 64px); }
  .nbr-i-pack { width: 70vw; right: -30vw; opacity: .35; }
  .nbr-i-table th, .nbr-i-table td { padding: 10px 12px; }
  .nbr-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nbr-macros li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nbr-g-flist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nbr-g-fthumb { width: 52px; height: 52px; }
  .nbr-g-fname { font-size: 12px; letter-spacing: .06em; }
  .nbr-d-nums { flex-wrap: nowrap; gap: 14px; justify-content: space-around; }
  .nbr-d-nums strong { font-size: clamp(30px, 10vw, 40px); }
  .nbr-d-nums span { font-size: 9px; letter-spacing: .16em; }
  .nbr-d-pack { opacity: .2; }
  .nbr-g-pack { width: min(62vw, 260px); }
  .nbr-g-media .nbr-stage { width: min(80vw, 320px); }
  .nbr-k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .nbr-k-grid strong { font-size: 48px; }
  .nbr-p-buy .nbr-btn-big { display: flex; width: 100%; }
  body:has(.js-nbr-sticky.is-visible) { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .nbr *, .nbr *::before, .nbr *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .nbr-vids-track, .nbr-j-faces { scroll-behavior: auto; }
}