/*
 * Viciados Promos — layout arena do Portal Viciados.
 * Mesmos tokens, capa azul-marinho com a faixa vermelha inclinada, Oswald em caixa alta e linhas retas
 * (plugin Viciados Arena - Paginas, base.css 1.3.0). Claro por omissão; escuro com [data-theme="dark"].
 * Regras de design (ver AI_MANUAL.md): cantos retos; caixa com barra de destaque não leva contorno fino;
 * sem animações que mexam o layout (só cor e zoom de 3% nas imagens).
 */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../fonts/oswald-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--sp-navy: #000933;
	--sp-navy-2: #0d1b5e;
	--sp-red: #ff184e;
	--sp-red-escuro: #b3002b;
	--sp-bg: #f3f4f8;
	--sp-card: #fff;
	--sp-linha: rgba(0, 9, 51, .12);
	--sp-txt: #0a0a0a;
	--sp-dim: #3c4257;
	--sp-fraco: #6b7185;
	--sp-sombra: 0 18px 40px -22px rgba(0, 9, 51, .45);
	--sp-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--vp-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--vp-largura: 1240px;
	color-scheme: light;
}

[data-theme="dark"] {
	--sp-bg: #0a0a0a;
	--sp-card: #12131b;
	--sp-linha: rgba(255, 255, 255, .11);
	--sp-txt: #f5f5f7;
	--sp-dim: #c5c8d6;
	--sp-fraco: #8d91a3;
	--sp-sombra: 0 18px 40px -22px rgba(0, 0, 0, .9);
	color-scheme: dark;
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0; min-width: 320px;
	background: var(--sp-bg); color: var(--sp-txt);
	font-family: var(--vp-texto); font-size: 16px; line-height: 1.55;
	overflow-x: hidden;
}

img, svg { max-width: 100%; }

img { height: auto; }

a { color: var(--sp-red); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }

code { padding: 1px 6px; background: var(--sp-linha); font-size: .92em; }

.vp-caixa { width: 100%; max-width: var(--vp-largura); margin: 0 auto; padding: 0 24px; }

.vp-oculto-leitor, .vp-saltar:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vp-saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--sp-red); color: #fff; }

.vp-ic { flex: 0 0 auto; }

/* ── cabeçalho ── */
.vp-topo {
	position: sticky; top: 0; z-index: 50;
	background: var(--sp-navy); color: #fff;
	border-bottom: 3px solid var(--sp-red);
}

.vp-topo-linha { display: flex; align-items: center; gap: 24px; min-height: 64px; }

.vp-marca { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }

.vp-marca img { display: block; width: 138px; height: auto; }

.vp-marca-tag {
	display: inline-block; padding: 3px 10px;
	background: var(--sp-red); color: #fff;
	font-family: var(--sp-display); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

/* menu: altura fixa, texto numa linha, a página atual ganha uma barra vermelha por baixo (não mexe na altura) */
.vp-menu { display: flex; align-items: center; align-self: stretch; gap: 2px; }

.vp-menu a {
	position: relative; display: flex; align-items: center; height: 100%; min-height: 64px; padding: 0 11px;
	font-family: var(--sp-display); font-size: .96rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	color: rgba(255, 255, 255, .78); text-decoration: none;
	transition: color .15s;
}

.vp-menu a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -3px; height: 3px; background: transparent; transition: background .15s; }

.vp-menu a:hover { color: #fff; }

.vp-menu a[aria-current="page"] { color: #fff; }

.vp-menu a[aria-current="page"]::after { background: #fff; }

.vp-topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* busca: um campo só, com a lupa dentro e o atalho "/" */
.vp-busca {
	display: flex; align-items: center; width: 260px; height: 38px;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
	transition: background .2s, border-color .2s;
}

.vp-busca:hover { border-color: rgba(255, 255, 255, .3); }

.vp-busca:focus-within { background: rgba(255, 255, 255, .12); border-color: var(--sp-red); }

.vp-busca button {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 38px; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer;
	color: rgba(255, 255, 255, .55); transition: color .2s;
}

.vp-busca button .vp-ic { width: 18px; height: 18px; }

.vp-busca:focus-within button, .vp-busca button:hover { color: #fff; }

.vp-busca input {
	flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px 0 0;
	border: 0; background: transparent; color: #fff; outline: none;
	font: inherit; font-size: .9rem;
}

.vp-busca input::placeholder { color: rgba(255, 255, 255, .5); }

.vp-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }

.vp-busca-atalho {
	flex: 0 0 auto; margin-right: 9px; padding: 0 7px;
	border: 1px solid rgba(255, 255, 255, .22); background: transparent;
	font: 600 .72rem/1.6 var(--vp-texto); color: rgba(255, 255, 255, .5);
	transition: opacity .2s;
}

.vp-busca:focus-within .vp-busca-atalho { opacity: 0; }

/* botões de ícone (tema e abrir busca no telemóvel): sem contorno */
.vp-tema, .vp-busca-abrir {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; border: 0; overflow: hidden;
	background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer;
	transition: background .2s, color .2s;
}

.vp-tema:hover, .vp-busca-abrir:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.vp-busca-abrir[aria-expanded="true"] { background: var(--sp-red); color: #fff; }

.vp-topo .vp-busca-abrir { display: none; }

/* troca de tema: a lua e o sol ficam no mesmo sítio e trocam com fade + rotação (não mexe no layout) */
.vp-tema span {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.vp-tema-sol { opacity: 0; transform: rotate(-90deg) scale(.5); }

[data-theme="dark"] .vp-tema-sol { opacity: 1; transform: none; }

[data-theme="dark"] .vp-tema-lua { opacity: 0; transform: rotate(90deg) scale(.5); }

/* a página inteira troca de cor com um fade curto (View Transitions; nos outros navegadores, transição de cor) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; }

.vp-trocando, .vp-trocando * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important; }

.vp-topo-grupos {
	padding: 9px 14px; background: var(--sp-red); color: #fff !important; text-decoration: none;
	font-family: var(--sp-display); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	transition: filter .15s;
}

.vp-topo-grupos:hover { filter: brightness(1.08); }

/* pesquisa ao vivo */
.vp-busca { position: relative; }

.vp-sugestoes {
	position: absolute; top: calc(100% + 6px); right: -1px; z-index: 60;
	width: max(calc(100% + 2px), 440px);
	background: var(--sp-card); color: var(--sp-txt);
	border-top: 3px solid var(--sp-red);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
	animation: vp-aparecer .15s ease;
}

@keyframes vp-aparecer { from { opacity: 0; } to { opacity: 1; } }

.vp-sug-lista { margin: 0; padding: 6px 0; list-style: none; }

.vp-sug {
	display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 8px 14px; color: inherit; text-decoration: none;
	transition: background .15s, box-shadow .15s;
}

.vp-sug:hover, [aria-selected="true"] > .vp-sug { background: rgba(255, 24, 78, .08); box-shadow: inset 3px 0 0 var(--sp-red); }

.vp-sug img, .vp-sug-sem { display: block; width: 48px; height: 48px; object-fit: cover; background: var(--sp-navy); }

.vp-sug-txt { min-width: 0; }

.vp-sug-txt b { display: block; font-family: var(--sp-display); font-size: 1rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; }

.vp-sug-txt mark { background: none; color: var(--sp-red); }

.vp-sug-txt small { display: block; overflow: hidden; margin-top: 2px; font-size: .78rem; color: var(--sp-fraco); white-space: nowrap; text-overflow: ellipsis; }

.vp-sug-preco { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--sp-display); white-space: nowrap; }

.vp-sug-preco b { font-size: 1.05rem; font-weight: 700; }

.vp-sug-preco em { font-size: .74rem; font-style: normal; font-weight: 700; color: var(--sp-red); }

.vp-sug-preco i { font-size: .72rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-sug-vazio { margin: 0; padding: 16px 16px 12px; font-size: .9rem; line-height: 1.5; color: var(--sp-dim); }

.vp-sug-todos {
	display: block; padding: 12px 14px; border-top: 1px solid var(--sp-linha);
	font-family: var(--sp-display); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sp-red); text-decoration: none; transition: background .15s;
}

.vp-sug-todos::after { content: ' \2192'; }

.vp-sug-todos:hover { background: rgba(255, 24, 78, .08); }

/* ── capa (igual ao arena) ── */
.sp-capa {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 36px 0 150px;
	background: var(--sp-navy); color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

.sp-capa::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px);
}

.sp-capa::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
	background: var(--sp-red);
	clip-path: polygon(0 calc(100% - 7px), 100% 0, 100% 7px, 0 100%);
}

.sp-capa-curta { padding-bottom: 110px; }

.sp-capa-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: center; }

.sp-kicker {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0;
	font-family: var(--sp-display); font-size: .9rem; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.sp-kicker span {
	display: inline-block; padding: 4px 12px;
	background: var(--sp-red); color: #fff; font-weight: 700;
	clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.sp-titulo {
	margin: 12px 0 16px;
	font-family: var(--sp-display); font-size: clamp(3.2rem, 8.5vw, 6.6rem); font-weight: 700;
	line-height: .92; text-transform: uppercase; color: #fff;
}

.sp-titulo small {
	display: block; margin-top: 14px;
	font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 500; letter-spacing: .32em;
	color: rgba(255, 255, 255, .7);
}

.vp-titulo-pagina { font-size: clamp(2.5rem, 6vw, 4.6rem); }

.sp-intro { max-width: 62ch; margin: 0 0 24px; font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }

.sp-intro p { margin: 0 0 .7em; }

.sp-intro p:last-child { margin-bottom: 0; }

.sp-intro strong { color: #fff; }

.sp-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.sp-botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 12px 24px; border: 0; cursor: pointer;
	background: var(--sp-red); color: #fff !important; text-decoration: none;
	box-shadow: 0 4px 0 var(--sp-red-escuro);
	font-family: var(--sp-display); font-size: .98rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	transition: filter .15s;
}

.sp-botao::after { content: '\2192'; }

.sp-botao:hover { filter: brightness(1.08); }

.sp-botao-fantasma { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }

.sp-botao-fantasma:hover { box-shadow: inset 0 0 0 2px #fff; filter: none; }

.sp-canal-numeros { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 26px 0 0; padding: 0; list-style: none; }

.sp-canal-numeros li { font-family: var(--sp-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }

.sp-canal-numeros b { margin-right: 4px; font-size: 1.45rem; font-weight: 700; letter-spacing: 0; color: #fff; }

.sp-canal-numeros li:first-child b { color: var(--sp-red); }

.sp-rot, .sp-meta { font-family: var(--sp-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-red); }

.sp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }

.sp-meta span { color: var(--sp-fraco); }

/* trilho */
.vp-trilho { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

.vp-trilho a { color: rgba(255, 255, 255, .7); text-decoration: none; }

.vp-trilho a:hover { color: #fff; }

.vp-trilho span { color: rgba(255, 255, 255, .4); }

.vp-trilho span[aria-current] { color: rgba(255, 255, 255, .85); }

/* destaque da capa */
.vp-destaque {
	display: flex; flex-direction: column; overflow: hidden;
	background: rgba(255, 255, 255, .06); border-top: 5px solid var(--sp-red);
	color: #fff; text-decoration: none;
	transition: background .15s;
}

.vp-destaque:hover { background: rgba(255, 255, 255, .1); }

.vp-destaque-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sp-navy-2); }

.vp-destaque-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }

.vp-destaque:hover .vp-destaque-img img { transform: scale(1.03); }

.vp-destaque-corpo { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 20px; }

.vp-destaque-corpo b { font-family: var(--sp-display); font-size: 1.6rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; }

.vp-destaque-preco { font-family: var(--sp-display); font-size: 1.35rem; font-weight: 700; color: #fff; }

.vp-destaque-preco small { font-size: .85rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.vp-destaque-data { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }

/* ── blocos ── */
.sp-bloco { margin-top: 64px; }

.vp-primeiro { margin-top: 44px; }

.vp-h2-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0 0 22px; }

.vp-h2 {
	display: flex; align-items: center; gap: 14px; margin: 0;
	font-family: var(--sp-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; text-transform: uppercase;
	color: var(--sp-txt);
}

.vp-h2::before { content: ''; flex: 0 0 auto; width: 14px; height: 30px; background: var(--sp-red); transform: skewX(-14deg); }

.vp-h2 em { font-style: normal; color: var(--sp-red); }

.vp-h2-link, .vp-link-seta {
	font-family: var(--sp-display); font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sp-red); text-decoration: none;
}

.vp-h2-link::after, .vp-link-seta::after { content: ' \2192'; }

.vp-h2-link:hover, .vp-link-seta:hover { color: var(--sp-txt); }

.sp-mais { margin: 28px 0 0; text-align: center; }

.vp-nota { margin: 14px 0 0; font-size: .88rem; color: var(--sp-fraco); }

/* atalhos das seções */
.vp-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }

.vp-atalho { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--sp-navy); text-decoration: none; }

.vp-atalho img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }

.vp-atalho:hover img { transform: scale(1.03); }

.vp-atalho::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 9, 51, .05) 10%, rgba(0, 9, 51, .94) 100%); }

.vp-atalho-txt { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: #fff; }

.vp-atalho-txt b { font-family: var(--sp-display); font-size: 1.9rem; font-weight: 700; line-height: 1; text-transform: uppercase; }

.vp-atalho-txt b::after { content: ' \2192'; color: var(--sp-red); }

.vp-atalho-txt small { font-size: .88rem; color: rgba(255, 255, 255, .8); }

/* ── cartões de produto ── */
.vp-grelha { display: grid; gap: 20px; }

.vp-grelha-16x9, .vp-grelha-misto { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vp-grelha-3x4 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }

.vp-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--sp-card); border: 1px solid var(--sp-linha);
	transition: box-shadow .2s;
}

.vp-card:hover { box-shadow: var(--sp-sombra); }

.vp-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sp-navy); }

.vp-card-3x4 .vp-card-img { aspect-ratio: 3 / 4; }

.vp-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }

.vp-card:hover .vp-card-img img { transform: scale(1.03); }

/* na grelha mista as capas de jogo ficam inteiras dentro do 16:9 */
.vp-grelha-misto .vp-card-3x4 .vp-card-img { aspect-ratio: 16 / 9; }

.vp-grelha-misto .vp-card-3x4 .vp-card-img img { object-fit: contain; }

.vp-sem-img { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px), var(--sp-navy); }

.vp-selo {
	position: absolute; top: 10px; left: 10px; z-index: 1;
	padding: 4px 12px 4px 10px;
	background: var(--sp-red); color: #fff;
	font-family: var(--sp-display); font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.vp-selo-pre { background: var(--sp-navy); box-shadow: inset 4px 0 0 var(--sp-red); font-size: .78rem; letter-spacing: .12em; padding-left: 12px; }

.vp-selo-linha { position: static; display: inline-block; vertical-align: middle; font-size: .9rem; }

.vp-card-corpo { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }

.vp-card-rot { margin: 0; font-family: var(--sp-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-red); }

.vp-card-titulo { margin: 0; font-family: var(--sp-display); font-size: 1.12rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; }

.vp-card-titulo a { color: var(--sp-txt); text-decoration: none; }

.vp-card-titulo a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

.vp-card:hover .vp-card-titulo a { color: var(--sp-red); }

.vp-card-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: auto 0 0; padding-top: 6px; }

.vp-card-preco s { width: 100%; font-size: .8rem; color: var(--sp-fraco); }

.vp-card-preco b { font-family: var(--sp-display); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--sp-txt); }

.vp-card-preco span { font-size: .8rem; color: var(--sp-fraco); }

.vp-card-preco-vazio { font-family: var(--sp-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-card-3x4 .vp-card-corpo { padding: 12px 12px 14px; }

.vp-card-3x4 .vp-card-titulo { font-size: 1rem; }

.vp-card-3x4 .vp-card-preco b { font-size: 1.22rem; }

/* ── como funciona ── */
.vp-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }

.vp-passos li {
	display: flex; flex-direction: column; gap: 8px; padding: 24px;
	background: var(--sp-card); border-top: 4px solid var(--sp-red);
}

.vp-passos .vp-ic { width: 28px; height: 28px; color: var(--sp-red); }

.vp-passos b { font-family: var(--sp-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; }

.vp-passos span { font-size: .95rem; line-height: 1.6; color: var(--sp-dim); }

/* lojas de um produto (popup e guias) */
.vp-lojas { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.vp-loja {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px;
	padding: 16px 20px; background: var(--sp-card); border: 1px solid var(--sp-linha);
}

.vp-loja-melhor { border: 0; border-left: 5px solid var(--sp-red); box-shadow: var(--sp-sombra); }

.vp-loja-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.vp-loja-nome b { font-family: var(--sp-display); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }

.vp-loja-nome span { font-size: .88rem; color: var(--sp-fraco); }

.vp-cupom code { color: var(--sp-txt); }

.vp-loja-preco { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 10px; text-align: right; }

.vp-loja-preco s { font-size: .85rem; color: var(--sp-fraco); }

.vp-loja-preco b { font-family: var(--sp-display); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

.vp-loja-preco small { width: 100%; font-size: .78rem; color: var(--sp-fraco); }

.vp-loja-botao { padding: 10px 18px; font-size: .88rem; white-space: nowrap; }

/* texto (guia de compra, páginas) */
.vp-texto { max-width: 78ch; font-size: 1.04rem; line-height: 1.75; color: var(--sp-dim); }

.vp-texto > :first-child { margin-top: 0; }

.vp-texto h2, .vp-texto h3 { margin: 1.6em 0 .5em; font-family: var(--sp-display); font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--sp-txt); }

.vp-texto h2 { font-size: 1.55rem; }

.vp-texto h3 { font-size: 1.22rem; }

.vp-texto strong { color: var(--sp-txt); }

.vp-texto ul, .vp-texto ol { padding-left: 1.2em; }

.vp-texto li { margin-bottom: .4em; }

.vp-texto li::marker { color: var(--sp-red); }

.vp-texto-pagina { padding: 32px 36px; background: var(--sp-card); max-width: 860px; }

/* notícias (cartões do arena) */
.sp-artigos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.sp-artigo { display: flex; flex-direction: column; overflow: hidden; background: var(--sp-card); border: 1px solid var(--sp-linha); transition: box-shadow .2s; }

.sp-artigo:hover { box-shadow: var(--sp-sombra); }

.sp-artigo-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sp-navy); }

.sp-artigo-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }

.sp-artigo:hover .sp-artigo-img img { transform: scale(1.03); }

.sp-artigo-corpo { padding: 14px 16px 18px; }

.sp-artigo h3 { margin: 6px 0 0; font-family: var(--sp-display); font-size: 1.02rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }

.sp-artigo h3 a { color: var(--sp-txt); text-decoration: none; }

.sp-artigo h3 a:hover { color: var(--sp-red); }

/* ── filtros e vazio (iguais ao arena) ── */
.va-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 22px; }

.va-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.va-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--sp-linha); background: var(--sp-card); cursor: pointer;
	font-family: var(--sp-display); font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-txt);
	transition: border-color .15s, color .15s, background .15s;
}

.va-chip small { font-size: .74rem; font-weight: 500; color: var(--sp-fraco); }

.va-chip:hover { border-color: var(--sp-red); color: var(--sp-red); }

.va-chip[aria-pressed="true"] { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }

.va-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }

.va-ordem { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sp-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-fraco); }

.va-ordem select { padding: 8px 12px; border: 2px solid var(--sp-linha); background: var(--sp-card); color: var(--sp-txt); font: inherit; letter-spacing: .06em; }

.va-vazio { padding: 28px; border: 2px dashed var(--sp-linha); text-align: center; color: var(--sp-dim); }

.va-vazio p { margin: 0 0 .6em; }

.vp-vazio-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 14px !important; }

.va-oculto { display: none !important; }

.sp-parc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.sp-parc-links a {
	display: inline-block; padding: 7px 14px; border: 2px solid var(--sp-linha); background: var(--sp-card);
	font-family: var(--sp-display); font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-txt); text-decoration: none;
	transition: border-color .15s, color .15s;
}

.sp-parc-links a:hover { border-color: var(--sp-red); color: var(--sp-red); }

/* paginação */
.vp-paginas { margin-top: 32px; }

.vp-paginas .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.vp-paginas .page-numbers {
	min-width: 42px; padding: 8px 14px; border: 2px solid var(--sp-linha); background: var(--sp-card); text-align: center;
	font-family: var(--sp-display); font-weight: 700; color: var(--sp-txt); text-decoration: none;
}

.vp-paginas .page-numbers.current, .vp-paginas a.page-numbers:hover { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }

/* ── rodapé ── */
.sp-fecho {
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: 88px; padding: 70px 0 64px;
	background: var(--sp-navy); color: #fff; text-align: center;
	clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}

.sp-fecho::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px);
}

.sp-fecho-logo { display: block; width: min(70%, 260px); height: auto; margin: 0 auto 14px; }

.sp-fecho-titulo {
	margin: 0 0 12px;
	font-family: var(--sp-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700;
	line-height: 1.05; text-transform: uppercase;
}

.sp-fecho-titulo em { font-style: normal; color: var(--sp-red); }

.vp-fecho-txt { max-width: 56ch; margin: 0 auto 24px; color: rgba(255, 255, 255, .78); }

.sp-fecho .sp-botoes { justify-content: center; }

.vp-rodape { background: var(--sp-navy); }

.vp-rodape-base { padding-top: 8px; padding-bottom: 36px; color: rgba(255, 255, 255, .7); }

.vp-aviso { display: flex; gap: 12px; margin: 0 0 22px; padding: 16px 20px; background: rgba(255, 255, 255, .05); border-left: 4px solid var(--sp-red); font-size: .88rem; line-height: 1.6; }

.vp-aviso .vp-ic { color: var(--sp-red); margin-top: 2px; }

.vp-aviso strong { color: #fff; }

.vp-rodape-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; }

.vp-rodape-links a { font-family: var(--sp-display); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-decoration: none; }

.vp-rodape-links a:hover { color: #fff; }

.vp-copy { margin: 0; font-size: .82rem; color: rgba(255, 255, 255, .5); }

.vp-copy a { color: rgba(255, 255, 255, .75); }

/* ── menu: Black Friday em destaque ── */
/* Black Friday: etiqueta vermelha inclinada, como as do arena */
.vp-menu a.vp-menu-bf { margin-left: 6px; padding: 0; color: #fff; }

.vp-menu a.vp-menu-bf span {
	display: inline-block; padding: 5px 14px;
	background: var(--sp-red); font-weight: 700; letter-spacing: .1em;
	clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
	transition: filter .15s;
}

.vp-menu a.vp-menu-bf:hover span { filter: brightness(1.12); }

.vp-menu a.vp-menu-bf::after { left: 6px; right: 6px; }

/* ── páginas-guia ── */
.vp-capa-guia { padding-bottom: 130px; }

.vp-guia-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }

.vp-guia-sem-lado { grid-template-columns: minmax(0, 1fr); }

.vp-guia-img { margin: 0; }

.vp-guia-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }

.vp-guia-atualizado { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .62); }

.vp-guia-atualizado .vp-ic { width: 16px; height: 16px; }

.vp-guia { padding-top: 12px; }

.vp-guia > p, .vp-guia > ul, .vp-guia > ol:not(.vp-calendario):not(.vp-passos-lista), .vp-guia > h3, .vp-guia > details, .vp-guia > .vp-texto { max-width: 80ch; }

.vp-guia > p, .vp-guia > ul, .vp-guia > ol { font-size: 1.04rem; line-height: 1.75; color: var(--sp-dim); }

.vp-guia strong { color: var(--sp-txt); }

.vp-guia > ul li, .vp-guia > ol li { margin-bottom: .45em; }

.vp-guia > ul li::marker, .vp-guia > ol li::marker { color: var(--sp-red); font-weight: 700; }

.vp-guia h2 {
	display: flex; align-items: center; gap: 14px; margin: 64px 0 20px;
	font-family: var(--sp-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--sp-txt);
}

.vp-guia h2::before { content: ''; flex: 0 0 auto; width: 14px; height: 30px; background: var(--sp-red); transform: skewX(-14deg); }

.vp-guia h3 { margin: 32px 0 10px; font-family: var(--sp-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--sp-txt); }

.vp-guia > p a, .vp-guia li a, .vp-dica a { color: var(--sp-red); font-weight: 600; }

.vp-bloco-guia { margin: 8px 0 12px; }

/* contagem decrescente (na capa) */
.vp-contagem { padding: 22px 24px 20px; background: rgba(255, 255, 255, .06); border-top: 5px solid var(--sp-red); color: #fff; }

.vp-contagem p { margin: 0; }

.vp-contagem-rot { font-family: var(--sp-display); font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

.vp-contagem-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }

.vp-contagem-num span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; background: rgba(0, 0, 0, .25); }

.vp-contagem-num b { font-family: var(--sp-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.vp-contagem-num small { margin-top: 4px; font-family: var(--sp-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.vp-contagem-data { font-size: .86rem; color: rgba(255, 255, 255, .7); }

.vp-contagem-fim .vp-contagem-num { display: none; }

.vp-contagem-fim .vp-contagem-rot { font-size: 1.2rem; font-weight: 700; color: #fff; }

/* calendário */
.vp-calendario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.vp-calendario li { display: flex; gap: 14px; padding: 18px; background: var(--sp-card); border-top: 4px solid var(--sp-red); }

.vp-calendario time { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; background: var(--sp-navy); color: rgba(255, 255, 255, .8); font-family: var(--sp-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.vp-calendario time b { font-size: 1.7rem; line-height: 1; color: #fff; }

.vp-calendario strong { display: block; font-family: var(--sp-display); font-size: 1.1rem; text-transform: uppercase; }

.vp-calendario span { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--sp-dim); }

/* caixa de dica */
.vp-dica { display: flex; gap: 14px; max-width: 80ch; margin: 22px 0; padding: 18px 22px; background: var(--sp-card); border-left: 5px solid var(--sp-red); }

.vp-dica .vp-ic { width: 24px; height: 24px; margin-top: 2px; color: var(--sp-red); }

.vp-dica b { display: block; margin-bottom: 4px; font-family: var(--sp-display); font-size: 1.1rem; text-transform: uppercase; color: var(--sp-txt); }

.vp-dica p, .vp-dica li { margin: 0 0 .5em; font-size: .98rem; line-height: 1.65; color: var(--sp-dim); }

.vp-dica p:last-child { margin-bottom: 0; }

.vp-dica ul { margin: 0; padding-left: 1.1em; }

.vp-dica-alerta { border-left-color: var(--sp-navy-2); }

[data-theme="dark"] .vp-dica-alerta { border-left-color: #f5b400; }

.vp-dica-alerta .vp-ic { color: var(--sp-navy-2); }

[data-theme="dark"] .vp-dica-alerta .vp-ic { color: #f5b400; }

/* sem ofertas num guia */
.vp-sem-ofertas { max-width: 80ch; padding: 20px 22px; background: var(--sp-card); border-left: 5px solid var(--sp-red); }

.vp-sem-ofertas p { margin: 0 0 14px; color: var(--sp-dim); }

.vp-sem-ofertas .sp-botoes { align-items: center; gap: 18px; margin: 0; }

.vp-botao-claro { color: var(--sp-txt) !important; box-shadow: inset 0 0 0 2px var(--sp-linha); }

.vp-botao-claro:hover { box-shadow: inset 0 0 0 2px var(--sp-red); }

/* tabela comparativa */
.vp-comparar-caixa { margin: 8px 0 12px; overflow-x: auto; background: var(--sp-card); }

.vp-comparar { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }

.vp-comparar th, .vp-comparar td { padding: 12px 16px; border-bottom: 1px solid var(--sp-linha); text-align: left; vertical-align: top; }

.vp-comparar tbody th { width: 190px; font-family: var(--sp-display); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-comparar thead th { padding-top: 16px; border-bottom: 3px solid var(--sp-red); }

.vp-comparar thead a { display: flex; flex-direction: column; gap: 8px; color: var(--sp-txt); text-decoration: none; }

.vp-comparar thead img { display: block; width: 100%; max-width: 220px; aspect-ratio: 16 / 9; object-fit: cover; }

.vp-comparar thead span { font-family: var(--sp-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; }

.vp-comparar thead a:hover span { color: var(--sp-red); }

.vp-comparar-preco b { display: block; font-family: var(--sp-display); font-size: 1.35rem; }

.vp-comparar-preco small { color: var(--sp-fraco); }

.vp-comparar-acao td, .vp-comparar-acao th { border-bottom: 0; }

/* perguntas frequentes (details) */
.vp-guia details { margin: 0 0 10px; background: var(--sp-card); }

.vp-guia summary { position: relative; padding: 16px 48px 16px 20px; cursor: pointer; list-style: none; font-family: var(--sp-display); font-size: 1.08rem; font-weight: 700; text-transform: uppercase; color: var(--sp-txt); }

.vp-guia summary::-webkit-details-marker { display: none; }

.vp-guia summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--sp-red); }

.vp-guia details[open] summary::after { content: '\2212'; }

.vp-guia details[open] { border-top: 4px solid var(--sp-red); }

.vp-guia details > div { padding: 0 20px 18px; font-size: 1rem; line-height: 1.7; color: var(--sp-dim); }

.vp-guia details > div p { margin: 0 0 .6em; }

/* lista de passos numerados (cupons) */
.vp-passos-lista { counter-reset: passo; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.vp-passos-lista li { counter-increment: passo; padding: 20px; background: var(--sp-card); border-top: 4px solid var(--sp-red); font-size: .95rem; line-height: 1.6; color: var(--sp-dim); }

.vp-passos-lista li::before { content: counter(passo); display: block; margin-bottom: 6px; font-family: var(--sp-display); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--sp-red); }

.vp-passos-lista b { color: var(--sp-txt); }

/* cupons */
.vp-cupons { display: grid; gap: 12px; }

.vp-cupom-card { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px 16px 0; background: var(--sp-card); }

.vp-cupom-selo { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; margin: -16px 0; padding: 16px 8px; background: var(--sp-navy); color: #fff; text-align: center; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }

.vp-cupom-selo b { font-family: var(--sp-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; }

.vp-cupom-selo small { margin-top: 6px; font-family: var(--sp-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.vp-cupom-corpo h3 { margin: 0 0 4px; font-family: var(--sp-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--sp-txt); }

.vp-cupom-corpo p { margin: 0 0 4px; font-size: .9rem; line-height: 1.5; color: var(--sp-dim); }

.vp-cupom-meta { font-size: .8rem !important; color: var(--sp-fraco) !important; }

.vp-cupom-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }

.vp-cupom-codigo { display: inline-flex; align-items: stretch; padding: 0; border: 2px dashed var(--sp-red); background: transparent; cursor: pointer; font: inherit; }

.vp-cupom-codigo code { padding: 9px 12px; background: transparent; font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: var(--sp-txt); }

.vp-cupom-codigo span { display: flex; align-items: center; padding: 0 12px; background: var(--sp-red); color: #fff; font-family: var(--sp-display); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.vp-cupom-codigo.vp-copiado span { background: var(--sp-navy); }

.vp-cupom-ir { padding: 10px 18px; font-size: .86rem; }

.vp-cupom-expirado { opacity: .6; }

.vp-cupom-expirado .vp-cupom-selo { background: var(--sp-fraco); }

.vp-cupom-fim { font-family: var(--sp-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-lojas-cupons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

.vp-lojas-cupons a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--sp-card); border-top: 4px solid var(--sp-red); color: var(--sp-txt); text-decoration: none; transition: box-shadow .2s; }

.vp-lojas-cupons a:hover { box-shadow: var(--sp-sombra); }

.vp-lojas-cupons b { font-family: var(--sp-display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }

.vp-lojas-cupons b::after { content: ' \2192'; color: var(--sp-red); }

.vp-lojas-cupons span { font-size: .85rem; color: var(--sp-fraco); }

/* cartões de guias (capa) */
.vp-guias { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }

.vp-guia-card { display: flex; flex-direction: column; overflow: hidden; background: var(--sp-card); color: var(--sp-txt); text-decoration: none; transition: box-shadow .2s; }

.vp-guia-card:hover { box-shadow: var(--sp-sombra); }

.vp-guia-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px), var(--sp-navy); }

.vp-guia-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }

.vp-guia-card:hover .vp-guia-card-img img { transform: scale(1.03); }

.vp-guia-card-txt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; border-top: 4px solid var(--sp-red); }

.vp-guia-card-txt small { font-family: var(--sp-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-red); }

.vp-guia-card-txt b { font-family: var(--sp-display); font-size: 1.08rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }

.vp-guia-card:hover b { color: var(--sp-red); }

/* ── responsivo ── */
@media (max-width: 1599px) {
	.vp-topo-grupos { display: none; }
}

@media (max-width: 1360px) {
	.vp-topo-linha { gap: 18px; }
	.vp-busca { width: 200px; }
	.vp-menu a { padding: 0 8px; }
	.vp-menu a::after { left: 8px; right: 8px; }
}

/* abaixo disto o menu passa para uma segunda linha, com scroll lateral próprio */
@media (max-width: 1180px) {
	.vp-topo-linha { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; }
	.vp-topo-acoes { gap: 6px; }
	.vp-busca { width: 260px; }
	.vp-menu { order: 3; width: calc(100% + 48px); margin: 8px -24px 0; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
	.vp-menu::-webkit-scrollbar { display: none; }
	.vp-menu { align-self: auto; }
	.vp-menu a { height: auto; min-height: 44px; padding: 0 12px; }
	.vp-menu a::after { bottom: 0; }
	.vp-menu a.vp-menu-bf { margin-right: 12px; }
}

@media (max-width: 1024px) {
	.sp-capa-grelha { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
	.vp-grelha-16x9, .vp-grelha-misto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-grelha-3x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sp-artigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-calendario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-guia-grelha { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
}

@media (max-width: 900px) {
	.vp-guia-grelha { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.vp-guia-grelha .vp-contagem, .vp-guia-img { max-width: 520px; }
	.vp-lojas-cupons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.vp-caixa { padding: 0 16px; }
	.vp-menu { width: calc(100% + 32px); margin: 8px -16px 0; padding: 0 16px; }
	.vp-guia h2 { margin-top: 48px; font-size: 1.55rem; }
	.vp-calendario, .vp-passos-lista { grid-template-columns: minmax(0, 1fr); }
	.vp-capa-guia { padding-bottom: 96px; }
	.vp-contagem { padding: 18px 16px 16px; }
	.vp-cupom-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding-right: 14px; }
	.vp-cupom-selo b { font-size: 1.25rem; }
	.vp-cupom-acao { grid-column: 1 / -1; justify-content: flex-start; padding-left: 14px; }
	.vp-lojas-cupons { grid-template-columns: minmax(0, 1fr); }
	.vp-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vp-guia-card-txt b { font-size: .95rem; }
	.vp-marca img { width: 112px; }
	.vp-marca-tag { font-size: .72rem; padding: 2px 8px; }
	.vp-topo .vp-busca-abrir { display: inline-flex; }
	.vp-busca { display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; height: 54px; padding: 0 8px; background: var(--sp-navy); border: 0; border-bottom: 3px solid var(--sp-red); }
	.vp-busca:focus-within { background: var(--sp-navy); }
	.vp-busca.vp-aberta { display: flex; }
	.vp-busca input { font-size: 1rem; }
	.vp-busca-atalho { display: none; }
	.vp-sugestoes { top: 100%; left: 0; right: 0; width: auto; max-height: calc(100vh - 170px); overflow-y: auto; }

	.sp-capa { padding: 24px 0 110px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%); }
	.sp-capa::after { height: 30px; }
	.sp-capa-curta { padding-bottom: 80px; }
	.sp-capa-grelha { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.sp-kicker { font-size: .76rem; letter-spacing: .12em; gap: 8px 10px; }
	.sp-intro { font-size: .98rem; }
	.vp-trilho { margin-bottom: 18px; }

	.sp-bloco { margin-top: 48px; }
	.vp-h2 { font-size: 1.55rem; }
	.vp-atalhos { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
	.vp-atalho { aspect-ratio: 16 / 7; }
	.vp-atalho-txt small { display: none; }
	.vp-atalho-txt b { font-size: 1.6rem; }
	.vp-grelha { gap: 12px; }
	.vp-grelha-16x9, .vp-grelha-misto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-grelha-3x4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.vp-card-corpo { padding: 10px 12px 12px; }
	.vp-card-titulo { font-size: .98rem; }
	.vp-card-preco b { font-size: 1.2rem; }
	.vp-card-3x4 .vp-card-corpo { padding: 8px 8px 10px; }
	.vp-card-3x4 .vp-card-titulo { font-size: .86rem; }
	.vp-card-3x4 .vp-card-rot { display: none; }
	.vp-selo { top: 6px; left: 6px; font-size: .82rem; }
	.vp-passos { grid-template-columns: minmax(0, 1fr); }
	.vp-loja { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
	.vp-loja-preco { justify-content: flex-start; text-align: left; }
	.sp-artigos { grid-template-columns: minmax(0, 1fr); }
	.vp-texto-pagina { padding: 22px 18px; }
	.sp-fecho { margin-top: 64px; padding: 56px 0 48px; clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 420px) {
	.vp-grelha-3x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.vp-sugestoes { animation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── linhas retas ──
   Todo o layout tem cantos retos. A faixa vermelha inclinada da capa e as etiquetas inclinadas
   (clip-path) não são cantos e ficam como estão. */
.sp, .sp * { border-radius: 0 !important; }

/* ── popup do produto (<dialog>): só fade de opacidade, sem movimento ── */
.vp-modal {
	width: min(820px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
	margin: auto; padding: 0; overflow: hidden;
	background: var(--sp-card); color: var(--sp-txt);
	border: 0; border-top: 5px solid var(--sp-red); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75);
}

.vp-modal[open] { display: flex; flex-direction: column; animation: vp-aparecer .18s ease-out; }

.vp-modal::backdrop { background: rgba(0, 9, 51, .74); animation: vp-aparecer .18s ease-out; }

@keyframes vp-aparecer { from { opacity: 0; } }

html:has(.vp-modal[open]) { overflow: hidden; }

.vp-modal-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

.vp-modal-fechar {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
	background: var(--sp-navy); color: #fff; border: 0; cursor: pointer; transition: background-color .2s;
}

.vp-modal-fechar:hover, .vp-modal-fechar:focus-visible { background: var(--sp-red); }

.vp-modal-fechar:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

.vp-pop-img { position: relative; margin: 0; overflow: hidden; background: var(--sp-navy); }

.vp-pop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* faixa baixa: as lojas têm de aparecer sem rolar */
.vp-pop-16x9 .vp-pop-img { height: clamp(170px, 28vh, 250px); }

.vp-pop-3x4 { display: grid; grid-template-columns: 250px minmax(0, 1fr); }

.vp-pop-3x4 .vp-pop-img { aspect-ratio: 3 / 4; align-self: start; }

.vp-pop-corpo { padding: 24px 28px 26px; }

.vp-pop-rot { margin: 0 0 8px; padding-right: 48px; color: var(--sp-fraco); }

.vp-pop-titulo { margin: 0; padding-right: 48px; font-family: var(--sp-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; }

.vp-pop-16x9 .vp-pop-rot, .vp-pop-16x9 .vp-pop-titulo { padding-right: 0; }

.vp-pop-resumo { margin: 10px 0 0; font-size: .98rem; line-height: 1.6; color: var(--sp-dim); }

.vp-pop-h { margin: 22px 0 10px; font-family: var(--sp-display); font-size: .82rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-pop .vp-loja { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; padding: 14px 16px; }

.vp-pop .vp-loja-botao { grid-column: 1 / -1; justify-content: center; text-align: center; }

.vp-pop .vp-lojas + .vp-nota { margin: 10px 0 0; font-size: .82rem; }

.vp-pop-verificado { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--sp-fraco); }

.vp-pop-verificado .vp-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

.vp-pop-sem { margin-top: 20px; padding: 18px 20px; background: var(--sp-bg); border-left: 5px solid var(--sp-red); }

.vp-pop-sem p { margin: 0 0 14px; color: var(--sp-dim); line-height: 1.6; }

.vp-pop-sem b { color: var(--sp-txt); }

.vp-pop-sem .sp-botoes { margin: 0; }

.vp-pop-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--sp-linha); }

.vp-pop-partilhar {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
	background: transparent; color: var(--sp-txt); border: 1px solid var(--sp-linha); cursor: pointer;
	font-family: var(--sp-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
	transition: border-color .2s, color .2s;
}

.vp-pop-partilhar:hover, .vp-pop-partilhar.vp-copiado { border-color: var(--sp-red); color: var(--sp-red); }

.vp-pop-partilhar .vp-ic { width: 16px; height: 16px; }

.vp-pop-rodape .vp-link-seta { font-size: .9rem; }

@media (max-width: 720px) {
	.vp-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
	.vp-pop-3x4 { display: block; }
	.vp-pop-16x9 .vp-pop-img { height: auto; aspect-ratio: 16 / 8; max-height: 190px; width: 100%; }
	.vp-pop-3x4 .vp-pop-img { aspect-ratio: 16 / 9; max-height: 210px; width: 100%; }
	.vp-pop-3x4 .vp-pop-img img { object-fit: contain; }
	.vp-pop-corpo { padding: 20px 18px 22px; }
	.vp-pop-rot, .vp-pop-titulo { padding-right: 0; }
	.vp-pop .vp-loja { grid-template-columns: minmax(0, 1fr) auto; }
	.vp-pop .vp-loja-preco { justify-content: flex-end; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.vp-modal[open], .vp-modal::backdrop { animation: none; }
}

/* ── 1.4.0: ofertas só com link, imagens de loja (fundo branco) e partilha ── */
.vp-card .vp-card-preco-link b { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--sp-red); }

.vp-card-3x4 .vp-card-preco-link b, .vp-grelha-misto .vp-card .vp-card-preco-link b { font-size: .9rem; letter-spacing: .04em; }

.vp-card-preco-link b::after { content: ' \2192'; }

.vp-loja-sem-preco { font-family: var(--sp-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-fraco); }

/* foto de loja: produto inteiro sobre branco (nos dois temas: é a cor da própria foto) */
.vp-img-branca { background: #fff !important; }

.vp-img-branca img { object-fit: contain !important; padding: 6%; }

.vp-card-3x4 .vp-img-branca img { padding: 4%; }

.vp-destaque-branca .vp-destaque-img { background: #fff; }

.vp-destaque-branca .vp-destaque-img img { object-fit: contain; padding: 5%; }

.vp-pop-partilhas { display: flex; flex-wrap: wrap; gap: 8px; }

.vp-pop-whats { text-decoration: none; }

.vp-pop-whats:hover { border-color: #25d366; color: #1da851; }

[data-theme="dark"] .vp-pop-whats:hover { color: #25d366; }


/* ── 1.5.0: Achados Shopee (cartões quadrados, foto da loja sobre branco) ── */
.vp-grelha-achados { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.vp-achado { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--sp-card); border: 1px solid var(--sp-linha); transition: box-shadow .2s; }

.vp-achado:hover { box-shadow: var(--sp-sombra); }

.vp-achado-img { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; }

.vp-achado-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease-out; }

.vp-achado:hover .vp-achado-img img { transform: scale(1.03); }

.vp-achado .vp-selo { top: 8px; left: 8px; padding: 3px 9px 3px 8px; font-size: .82rem; }

.vp-achado-corpo { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; padding: 12px 13px 14px; }

.vp-achado-rot { margin: 0; font-family: var(--sp-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-fraco); }

.vp-achado-oficial { color: var(--sp-red); font-weight: 700; }

.vp-achado-nome { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.vp-achado-nome a { color: var(--sp-txt); text-decoration: none; }

.vp-achado-nome a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

.vp-achado:hover .vp-achado-nome a { color: var(--sp-red); }

.vp-achado-meta { margin: 0; font-size: .78rem; color: var(--sp-fraco); }

.vp-achado-nota { color: #b86b00; font-weight: 700; }

[data-theme="dark"] .vp-achado-nota { color: #f5b942; }

.vp-achado-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: auto 0 0; padding-top: 4px; }

.vp-achado-preco s { width: 100%; font-size: .76rem; color: var(--sp-fraco); }

.vp-achado-preco b { font-family: var(--sp-display); font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--sp-txt); }

.vp-achado-cta { margin-top: 6px; font-family: var(--sp-display); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-red); }

.vp-achado-cta::after { content: ' \2192'; }

.vp-achados-sub { max-width: 70ch; margin: -10px 0 20px; font-size: .95rem; color: var(--sp-dim); }

.vp-achados-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; }

.vp-achados-nota .vp-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

@media (max-width: 1180px) { .vp-grelha-achados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 900px) { .vp-grelha-achados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 720px) {
	.vp-grelha-achados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vp-achado-corpo { padding: 10px 10px 12px; }
	.vp-achado-nome { font-size: .82rem; }
	.vp-achado-preco b { font-size: 1.1rem; }
}

/* nos guias (página /achados-shopee/) os h3/p do texto não se aplicam aos cartões */
.vp-guia .vp-achado-nome { margin: 0; font-family: inherit; font-size: .88rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.vp-guia .vp-achado p { margin: 0; }
.vp-guia .vp-achado-preco { margin-top: auto; }
@media (max-width: 720px) { .vp-guia .vp-achado-nome { font-size: .82rem; } }


/* ── 1.6.0: achados — WhatsApp no cartão, fixados, páginas por categoria, datas duplas ── */
.vp-achado-zap {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	display: grid; place-items: center; width: 34px; height: 34px;
	background: #fff; color: #1da851; box-shadow: 0 2px 8px rgba(0, 9, 51, .18);
	opacity: .92; transition: opacity .2s, background-color .2s, color .2s;
}

.vp-achado-zap:hover, .vp-achado-zap:focus-visible { opacity: 1; background: #25d366; color: #fff; }

.vp-achado-zap .vp-ic { width: 18px; height: 18px; }

.vp-achado-fixado { border-top: 4px solid var(--sp-red); }

.vp-achado-fixado .vp-achado-rot { color: var(--sp-red); font-weight: 700; }

/* menu de categorias dos achados: os chips são links (.va-chip em <a>) */
a.va-chip { text-decoration: none; }

.va-chip[aria-current="page"] { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }

.va-chip[aria-current="page"] small { color: rgba(255, 255, 255, .8); }

/* dia de data dupla da Shopee: contagem numa caixa azul-marinho por cima dos achados */
.vp-achados-contagem { max-width: 560px; margin: -6px 0 22px; background: var(--sp-navy); }

@media (max-width: 720px) {
	.vp-achado-zap { width: 30px; height: 30px; top: 6px; right: 6px; }
}