/* ==========================================================================
   BP Integrações — cards de produto e posts do Atleta Pro
   Visual do protótipo do portal (caixa .pbox do artigo, faixa .product-band da home).
   Tudo prefixado com .bpi / bpi-; cores e fontes vêm das variáveis do tema com fallback.
   ========================================================================== */

.bpi {
	--bpi-lima: var(--bp-lima, #93B452);
	--bpi-preto: var(--bp-preto, #0B0B0B);
	--bpi-verde: var(--bp-verde-escuro, #1F3B24);
	--bpi-noite: var(--bp-noite, #171717);
	--bpi-display: var(--bp-font-display, 'Archivo', sans-serif);
	--bpi-body: var(--bp-font-body, 'Inter', sans-serif);
	--bpi-mono: var(--bp-font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
	--bpi-texto: #3A3A3A;
	--bpi-mudo: #6B6B66;
	--bpi-linha: #E5E5E5;
	--bpi-papel-2: #F5F5F2;
	--bpi-dourado: #C9A24A;

	font-family: var(--bpi-body);
	color: var(--bpi-preto);
	line-height: 1.5;
	box-sizing: border-box;
}
.bpi *, .bpi *::before, .bpi *::after { box-sizing: inherit; }
.bpi img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; box-shadow: none; }
.bpi a { text-decoration: none; box-shadow: none; }
.bpi ul { list-style: none; margin: 0; padding: 0; }
.bpi li { margin: 0; padding: 0; }
.bpi li::before, .bpi li::marker { content: none; }
.bpi h2, .bpi h3, .bpi p { margin: 0; padding: 0; }
.bpi .bpi-ico { width: 16px; height: 16px; flex: none; }

/* ---------- kicker (rótulo com quadradinho lima) ---------- */
.bpi .bpi-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--bpi-body); font-size: 11.5px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--bpi-preto);
}
.bpi .bpi-kicker::before { content: ""; width: 8px; height: 8px; background: var(--bpi-lima); flex: none; }
.bpi .bpi-kicker--escuro { color: var(--bpi-lima); }

/* ---------- botões ---------- */
.bpi .bpi-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 20px;
	font-family: var(--bpi-body); font-weight: 700; font-size: 14px; letter-spacing: .01em; line-height: 1;
	border-radius: 2px; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s;
}
.bpi .bpi-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.bpi .bpi-btn--ink { background: var(--bpi-preto); color: #fff; }
.bpi .bpi-btn--ink:hover, .bpi .bpi-btn--ink:focus-visible { background: #2B2B2B; color: #fff; }
.bpi .bpi-btn--lima { background: var(--bpi-lima); color: var(--bpi-preto); }
.bpi .bpi-btn--lima:hover, .bpi .bpi-btn--lima:focus-visible { background: #A3C263; color: var(--bpi-preto); }
.bpi .bpi-btn--fantasma { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.bpi .bpi-btn--fantasma:hover, .bpi .bpi-btn--fantasma:focus-visible { border-color: #fff; color: #fff; }
.bpi .bpi-btn:focus-visible { outline: 2px solid var(--bpi-lima); outline-offset: 2px; }

/* ---------- sabores (chips) ---------- */
.bpi .bpi-sabores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.bpi .bpi-sabores li {
	font-size: 12px; font-weight: 600; line-height: 1.4; padding: 3px 9px; border-radius: 999px;
	background: var(--bpi-papel-2); border: 1px solid var(--bpi-linha); color: #2B2B2B;
}
.bpi .bpi-preco { font-family: var(--bpi-mono); font-size: 14px; font-weight: 600; margin: -4px 0 14px; color: var(--bpi-preto); }

/* ==========================================================================
   Layout "caixa-artigo" (protótipo .pbox)
   ========================================================================== */
.bpi.bpi-caixa {
	margin: 2.2em 0; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0;
	border: 1px solid var(--bpi-preto); background: #fff; font-size: 16px; line-height: 1.55;
}
.bpi .bpi-caixa__img { background: #fff; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--bpi-linha); padding: 10px; }
.bpi .bpi-caixa__img img { width: 100%; }
.bpi .bpi-caixa__corpo { padding: 22px 24px; }
.bpi .bpi-caixa__corpo .bpi-kicker { margin-bottom: 8px; }
.bpi .bpi-caixa__titulo {
	font-family: var(--bpi-display); font-weight: 800; font-stretch: 84%; font-size: 26px;
	letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 6px; color: var(--bpi-preto); text-wrap: balance;
}
.bpi .bpi-caixa__nome { font-family: var(--bpi-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--bpi-mudo); margin: 0 0 10px; }
.bpi .bpi-caixa__texto { color: var(--bpi-texto); margin: 0 0 14px; }

.bpi.bpi-caixa--escuro { background: var(--bpi-noite); border-color: var(--bpi-noite); color: #EDEDEA; grid-template-columns: minmax(0, 1fr) 200px; }
.bpi-caixa--escuro .bpi-caixa__img { border-right: 0; order: 2; margin: 16px; border-radius: 2px; }
.bpi-caixa--escuro .bpi-caixa__titulo { color: #fff; }
.bpi-caixa--escuro .bpi-caixa__nome { color: #A5A5A0; }
.bpi-caixa--escuro .bpi-caixa__texto { color: #C9C9C4; }
.bpi-caixa--escuro .bpi-preco { color: #fff; }

/* ==========================================================================
   Layout "card" (grade)
   ========================================================================== */
.bpi.bpi-produtos--card { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 2em 0; }
.bpi .bpi-card { display: flex; flex-direction: column; border: 1px solid var(--bpi-linha); background: #fff; transition: border-color .2s; }
.bpi .bpi-card:hover { border-color: var(--bpi-preto); }
.bpi .bpi-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 16px; border-bottom: 1px solid var(--bpi-linha); background: #fff; }
.bpi .bpi-card__img img { width: 88%; }
.bpi .bpi-card__corpo { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 18px 18px 20px; }
.bpi .bpi-card__corpo .bpi-kicker { margin-bottom: 8px; }
.bpi .bpi-card__nome { font-family: var(--bpi-display); font-weight: 800; font-stretch: 84%; font-size: 21px; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 8px; }
.bpi .bpi-card__nome a { color: var(--bpi-preto); background-image: linear-gradient(var(--bpi-lima), var(--bpi-lima)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s; }
.bpi .bpi-card:hover .bpi-card__nome a, .bpi .bpi-card__nome a:focus-visible { background-size: 100% 2px; }
.bpi .bpi-card__desc { font-size: 14.5px; color: var(--bpi-texto); margin: 0 0 12px; }
.bpi .bpi-card .bpi-btn { margin-top: auto; }

/* ==========================================================================
   Layout "lista" (linhas com miniatura)
   ========================================================================== */
.bpi.bpi-produtos--lista { margin: 2em 0; border-top: 1px solid var(--bpi-preto); }
.bpi .bpi-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bpi-linha); }
.bpi .bpi-item__img { display: block; width: 72px; height: 72px; border: 1px solid var(--bpi-linha); background: #fff; padding: 4px; }
.bpi .bpi-item__corpo { display: flex; flex-direction: column; gap: 2px; }
.bpi .bpi-item__nome { font-family: var(--bpi-display); font-weight: 800; font-stretch: 88%; font-size: 18px; line-height: 1.15; color: var(--bpi-preto); }
.bpi .bpi-item__nome:hover { text-decoration: underline; text-decoration-color: var(--bpi-lima); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bpi .bpi-item__sabores { font-size: 13px; color: var(--bpi-mudo); }
.bpi .bpi-item .bpi-preco { margin: 2px 0 0; font-size: 13px; }
.bpi .bpi-item__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bpi-preto); white-space: nowrap; border-bottom: 2px solid var(--bpi-lima); padding-bottom: 2px; }

/* ==========================================================================
   Layout "faixa" (protótipo .product-band)
   ========================================================================== */
.bpi.bpi-faixa { position: relative; background: var(--bpi-noite); color: #EDEDEA; overflow: hidden; margin: 24px 0; container: bpi-faixa / inline-size; }
.bpi .bpi-faixa__topo { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.bpi .bpi-faixa__topo svg { width: 100%; height: 100%; display: block; }
.bpi .bpi-faixa__wrap {
	position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center;
	max-width: 1280px; margin: 0 auto; padding: 88px 32px;
}
.bpi .bpi-faixa__titulo {
	font-family: var(--bpi-display); font-weight: 800; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1.04;
	font-size: clamp(38px, 4.6vw, 68px); color: #fff; margin: 18px 0 22px; text-wrap: balance;
}
.bpi .bpi-faixa__titulo em { font-style: normal; color: var(--bpi-lima); }
.bpi .bpi-faixa__desc { font-size: 17.5px; line-height: 1.6; color: #C9C9C4; max-width: 52ch; }
.bpi .bpi-faixa .bpi-preco { color: #fff; margin: 20px 0 0; }
.bpi .bpi-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 36px; border-top: 1px solid rgba(255,255,255,.14); max-width: 560px; }
.bpi .bpi-spec { padding: 16px 16px 0 0; }
.bpi .bpi-spec + .bpi-spec { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.14); }
.bpi .bpi-spec svg { width: 22px; height: 22px; color: var(--bpi-lima); margin-bottom: 10px; display: block; }
.bpi .bpi-spec b { display: block; color: #fff; font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.bpi .bpi-spec span { font-size: 13px; color: #A5A5A0; }
.bpi .bpi-faixa__desc + .bpi-faixa__ctas { margin-top: 32px; }
.bpi .bpi-faixa__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bpi .bpi-faixa__ctas .bpi-btn { height: 44px; padding: 0 20px; font-size: 14px; }
.bpi .bpi-faixa__mais { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px; }
.bpi .bpi-faixa__mais > span { font-family: var(--bpi-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A5A5A0; }
.bpi .bpi-faixa__mais ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bpi .bpi-faixa__mais a { color: #fff; border-bottom: 1px solid rgba(147,180,82,.6); }
.bpi .bpi-faixa__mais a:hover { border-bottom-color: var(--bpi-lima); }
.bpi .bpi-faixa__pack {
	position: relative; background: #fff; border-radius: 2px; aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center; max-width: 520px; justify-self: end; width: 100%;
}
.bpi .bpi-faixa__pack img { width: 86%; }
.bpi .bpi-selo {
	position: absolute; top: 20px; left: 20px; z-index: 1;
	font-family: var(--bpi-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: #5E4A17; background: #F3EAD3; border: 1px solid var(--bpi-dourado); padding: 6px 10px; border-radius: 2px;
}
.bpi .bpi-sabores--pack { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; }
.bpi .bpi-sabores--pack li { font-size: 11.5px; padding: 4px 9px; }

/* ==========================================================================
   Atleta Pro
   ========================================================================== */
.bpi.bpi-ap { margin: 2.5em 0; }
.bpi .bpi-ap__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 3px solid var(--bpi-preto); padding-top: 12px; margin-bottom: 20px; }
.bpi .bpi-ap__titulo { font-family: var(--bpi-display); font-weight: 800; font-stretch: 84%; font-size: 28px; letter-spacing: -0.02em; line-height: 1.05; color: var(--bpi-preto); display: inline-flex; align-items: center; gap: 10px; }
.bpi .bpi-ap__titulo::before { content: ""; width: 10px; height: 10px; background: var(--bpi-lima); flex: none; }
.bpi .bpi-ap__portal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bpi-preto); border-bottom: 2px solid var(--bpi-lima); padding-bottom: 2px; white-space: nowrap; }
.bpi .bpi-ap__itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.bpi .bpi-ap__item a { display: flex; flex-direction: column; gap: 10px; color: var(--bpi-preto); }
.bpi .bpi-ap__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bpi-papel-2); }
.bpi .bpi-ap__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bpi .bpi-ap__item a:hover .bpi-ap__img img { transform: scale(1.03); }
.bpi .bpi-ap__meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--bpi-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bpi-mudo); }
.bpi .bpi-ap__cat { color: var(--bpi-preto); font-weight: 600; }
.bpi .bpi-ap__nome { font-family: var(--bpi-display); font-weight: 800; font-stretch: 88%; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.bpi .bpi-ap__item a:hover .bpi-ap__nome { text-decoration: underline; text-decoration-color: var(--bpi-lima); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.bpi.bpi-ap--lista .bpi-ap__itens { grid-template-columns: 1fr; gap: 0; }
.bpi.bpi-ap--lista .bpi-ap__item a { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--bpi-linha); }
.bpi.bpi-ap--lista .bpi-ap__img { grid-row: span 2; }
.bpi.bpi-ap--lista .bpi-ap__nome { font-size: 17px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
/* A faixa responde à largura do próprio container (home larga ou coluna estreita). */
@container bpi-faixa (max-width: 980px) {
	.bpi .bpi-faixa__wrap { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px; }
	.bpi .bpi-faixa__pack { justify-self: start; max-width: 460px; }
}
@container bpi-faixa (max-width: 600px) {
	.bpi .bpi-faixa__wrap { padding: 52px 16px; }
	.bpi .bpi-faixa__titulo { font-size: 38px; }
	.bpi .bpi-faixa__desc { font-size: 16px; }
	.bpi .bpi-specs { grid-template-columns: 1fr; border-top: 0; margin: 24px 0 28px; }
	.bpi .bpi-spec, .bpi .bpi-spec + .bpi-spec { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; }
	.bpi .bpi-spec svg { margin: 0; grid-row: span 2; }
	.bpi .bpi-faixa__ctas .bpi-btn { flex: 1 1 100%; }
	.bpi .bpi-faixa__pack { max-width: none; }
}
@media (max-width: 640px) {
	.bpi.bpi-caixa, .bpi.bpi-caixa--escuro { grid-template-columns: 1fr; }
	.bpi .bpi-caixa__img { border-right: 0; border-bottom: 1px solid var(--bpi-linha); padding: 16px; }
	.bpi .bpi-caixa__img img { max-width: 200px; }
	.bpi-caixa--escuro .bpi-caixa__img { order: 0; margin: 16px 16px 0; border-bottom: 0; }
	.bpi .bpi-caixa__corpo { padding: 20px; }


	.bpi .bpi-item { grid-template-columns: 56px minmax(0, 1fr); }
	.bpi .bpi-item__img { width: 56px; height: 56px; }
	.bpi .bpi-item__cta { grid-column: 2; justify-self: start; }

	.bpi.bpi-produtos--card { grid-template-columns: 1fr 1fr; gap: 12px; }
	.bpi .bpi-card__corpo { padding: 14px; }
	.bpi .bpi-card__nome { font-size: 18px; }
	.bpi .bpi-card__desc { display: none; }
	.bpi .bpi-card .bpi-btn { width: 100%; }

	.bpi .bpi-ap__cabeca { flex-wrap: wrap; }
	.bpi .bpi-ap__itens { grid-template-columns: 1fr; gap: 0; }
	.bpi .bpi-ap__item a { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--bpi-linha); }
	.bpi .bpi-ap__img { grid-row: span 2; }
	.bpi .bpi-ap__nome { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.bpi *, .bpi *::before, .bpi *::after { transition: none !important; }
}