/* Vitrusfer — home. Mobile-first. */

/* A home ocupa a largura toda (o container do WoodMart fica sem limite aqui) */
.vf.home .main-page-wrapper { padding-top: 0; background: var(--vf-bg); }
.vf.home .main-page-wrapper > .container,
.vf.home .main-page-wrapper > .container-fluid { max-width: none; padding: 0; }
.vf.home .content-layout-wrapper { margin: 0; }
.vf-home { padding: 0 !important; }
.vf.home .page-title { display: none; }

/* ---------- Slides ---------- */
/* Banner limpo: texto à esquerda, imagem sangrando à direita (desktop) ou no topo (celular).
   Controles discretos: pontos (o ativo vira pílula laranja com progresso), setas e pausa. */
.vf-hero { position: relative; background: var(--vf-navy); color: #fff; overflow: hidden; isolation: isolate; }
.vf-hero__viewport { position: relative; display: grid; }
.vf-slide {
	grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; visibility: hidden; transition: opacity .6s var(--vf-ease), visibility 0s linear .6s;
	background: linear-gradient(135deg, var(--vf-navy) 0%, #12306f 55%, var(--vf-blue) 100%);
}
.vf-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--vf-ease), visibility 0s; z-index: 1; }

/* Slide de foto de fundo */
.vf-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: 0; }
.vf-slide--foto { justify-content: flex-end; min-height: 460px; }
.vf-slide--foto::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(10, 31, 68, .35) 0%, rgba(10, 31, 68, .82) 50%, rgba(10, 31, 68, .97) 100%);
}

/* Mídia (foto ou produtos) */
.vf-slide__media { position: relative; z-index: 1; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.vf-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-slide--royal .vf-slide__media img { object-position: center 62%; }
.vf-slide__media--produtos { display: grid; place-items: center; padding: 18px var(--vf-gutter); background: linear-gradient(180deg, #f4f6fb 0%, #e6ebf5 100%); }
.vf .vf-slide__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 520px; height: 100%; margin: 0; padding: 0; list-style: none; }
.vf .vf-slide__products li { display: grid; place-items: center; border-radius: var(--vf-r-md); background: #fff; box-shadow: 0 6px 18px rgba(10, 31, 68, .1); overflow: hidden; }
.vf .vf-slide__products img { width: 82%; height: 82%; object-fit: contain; }
.vf .vf-slide__products--fotos li { position: relative; }
.vf .vf-slide__products--fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-slide--royal .vf-slide__media--produtos { background: linear-gradient(180deg, #3a2a1d 0%, #2a1d14 100%); }

/* Texto */
.vf-slide__inner { position: relative; z-index: 2; padding-block: 22px 64px; }
.vf-slide__copy { max-width: 560px; }
.vf-slide .vf-eyebrow { color: #ffb37a; font-size: 12px; }
.vf-slide__title { margin: 8px 0 8px; color: #fff; font: 700 clamp(1.75rem, 1.25rem + 2.4vw, 3rem)/1.06 var(--vf-font); letter-spacing: -.035em; text-wrap: balance; }
.vf-slide__text { margin: 0 0 18px; color: #d6deee; font-size: clamp(.95rem, .9rem + .3vw, 1.125rem); line-height: 1.5; max-width: 500px; }
.vf-slide__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-slide__ctas .vf-btn { flex: 1 1 auto; }
@media (max-width: 1023px) { .vf-slide__ctas .vf-btn--lg { min-height: 48px; padding: 12px 18px; font-size: 15px; } }
.vf-slide.is-active .vf-slide__copy > * { animation: vf-rise .7s var(--vf-ease) both; }
.vf-slide.is-active .vf-slide__copy > :nth-child(2) { animation-delay: .05s; }
.vf-slide.is-active .vf-slide__copy > :nth-child(3) { animation-delay: .1s; }
.vf-slide.is-active .vf-slide__copy > :nth-child(4) { animation-delay: .15s; }
@keyframes vf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Controles */
.vf-hero__controls { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--vf-r-pill); background: rgba(10, 31, 68, .55); backdrop-filter: blur(6px); }
.vf-hero__dots { display: flex; align-items: center; gap: 6px; }
.vf .vf-hero__dot { position: relative; width: 8px; height: 8px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .45); cursor: pointer; overflow: hidden; transition: width .3s var(--vf-ease), background-color .3s; }
.vf .vf-hero__dot::after { content: ""; position: absolute; inset: -18px -4px; } /* alvo de toque maior */
.vf .vf-hero__dot.is-active { width: 28px; background: rgba(255, 255, 255, .35); }
.vf-hero__dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--vf-orange); border-radius: inherit; }
.vf-hero__dot.is-active i { animation: vf-progress var(--vf-hero-dur, 7s) linear forwards; }
.vf-hero.is-paused .vf-hero__dot.is-active i { animation-play-state: paused; }
@keyframes vf-progress { from { width: 0; } to { width: 100%; } }
.vf .vf-hero__pause { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }
.vf-hero__pause .vf-ico { width: 14px; height: 14px; }
.vf-hero__ico-play, .vf-hero.is-paused .vf-hero__ico-pause { display: none; }
.vf-hero.is-paused .vf-hero__ico-play { display: inline; }
.vf .vf-hero__arrow { display: none; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; min-height: 0; padding: 0; margin-top: -22px; place-items: center; border-radius: 50%; border: 1px solid var(--vf-line-2); background: #fff; color: var(--vf-blue); cursor: pointer; box-shadow: var(--vf-shadow); transition: background-color .2s, color .2s; }
.vf .vf-hero__arrow:hover { background: var(--vf-blue); color: #fff; border-color: var(--vf-blue); }
.vf-hero__arrow--prev { left: 16px; }
.vf-hero__arrow--next { right: 16px; }

@media (min-width: 600px) {
	.vf-slide__ctas .vf-btn { flex: 0 0 auto; }
	.vf-slide__media { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
	.vf-slide, .vf-slide--foto { min-height: 460px; justify-content: center; }
	.vf-slide__inner { padding-block: 56px 72px; }
	.vf-slide__copy { width: 46%; max-width: 560px; }
	.vf-slide--foto::before { background: linear-gradient(90deg, rgba(10, 31, 68, .97) 0%, rgba(10, 31, 68, .85) 40%, rgba(10, 31, 68, .15) 78%); }
	/* Imagem ocupa a metade direita inteira e se funde ao fundo pela esquerda */
	.vf-slide__media { position: absolute; inset: 0 0 0 auto; width: 52%; aspect-ratio: auto;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
	.vf-slide__media--produtos { -webkit-mask-image: none; mask-image: none; padding: 48px 72px 48px 56px; border-radius: 40px 0 0 40px; }
	.vf .vf-slide__products { max-width: 600px; height: auto; gap: 20px; }
	.vf .vf-slide__products li { aspect-ratio: 4 / 5; }
	.vf .vf-hero__arrow { display: grid; }
	.vf-hero__controls { bottom: 22px; }
}
@media (min-width: 1600px) {
	.vf-slide, .vf-slide--foto { min-height: 520px; }
}

/* Faixa de categorias logo abaixo dos slides */
.vf-home__lift { position: relative; z-index: 2; }

/* ---------- Categorias (stories) ---------- */
.vf-stories { background: #fff; }
.vf .vf-stories__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 12px; margin: 0 calc(var(--vf-gutter) * -1); padding: 4px var(--vf-gutter) 8px;
	list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
 scroll-padding-inline: var(--vf-gutter);}
.vf .vf-stories__list::-webkit-scrollbar { display: none; }
.vf-story { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; scroll-snap-align: start; }
.vf-story__img {
	width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
	background: #fff; border: 2px solid var(--vf-line); box-shadow: inset 0 0 0 3px #fff; transition: border-color .2s, transform .25s var(--vf-ease);
}
.vf-story__img img { width: 100%; height: 100%; object-fit: cover; }
.vf-story__img .vf-ico { width: 32px; height: 32px; }
.vf-story__img--wa { background: #1fa855; color: #fff; border-color: #1fa855; }
.vf-story__img--svc { background: var(--vf-orange-soft); color: var(--vf-orange-ink); border-color: #ffd2b5; }
.vf-story:hover .vf-story__img { border-color: var(--vf-orange); transform: translateY(-2px); }
.vf-story__name { font: 600 12px/1.25 var(--vf-font); color: var(--vf-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) {
	.vf .vf-stories__list { grid-auto-columns: 104px; gap: 16px; margin: 0; padding-inline: 0; }
	.vf-story__img { width: 92px; height: 92px; }
	.vf-story__name { font-size: 13px; }
}

/* ---------- Cartões de seleção ---------- */
.vf-sel { padding-top: 8px; }
.vf .vf-sel__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; margin: 0 calc(var(--vf-gutter) * -1); padding: 4px var(--vf-gutter) 8px;
	list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
 scroll-padding-inline: var(--vf-gutter);}
.vf .vf-sel__list::-webkit-scrollbar { display: none; }
.vf-sel__card { height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vf-line); border-radius: var(--vf-r-lg); overflow: hidden; }
.vf-sel__title { margin: 0; padding: 12px 16px; background: var(--vf-blue); color: #fff; font: 600 16px var(--vf-font); }
.vf .vf-sel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 14px; list-style: none; }
.vf .vf-sel__grid a { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--vf-line); border-radius: var(--vf-r-md); overflow: hidden; background: #fff; }
.vf .vf-sel__grid img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .3s var(--vf-ease); }
.vf .vf-sel__grid a:hover img { transform: scale(1.05); }
.vf-sel__price .amount { color: inherit !important; }
.vf-sel__price { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--vf-ink); font: 700 12px var(--vf-font); box-shadow: 0 1px 4px rgba(10, 31, 68, .15); }
.vf-sel__more { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin: auto 14px 14px; border-radius: var(--vf-r-sm); background: var(--vf-orange-soft); color: var(--vf-orange-ink); font: 700 14px var(--vf-font); text-decoration: none; }
.vf-sel__more .vf-ico { width: 18px; height: 18px; }
.vf .vf-sel__more:is(:hover, :focus) { background: var(--vf-orange-btn); color: #fff; }
@media (min-width: 768px) { .vf .vf-sel__list { grid-auto-columns: calc((100% - 24px) / 2.3); } }
@media (min-width: 1024px) {
	.vf .vf-sel__list { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; }
}

/* ---------- Faixa destaque ---------- */
.vf-band { background: linear-gradient(180deg, var(--vf-navy) 0%, var(--vf-navy-2) 100%); margin-block: 16px; }
.vf-band .vf-sec__title { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.vf-band .vf-sec__title .vf-ico { width: 26px; height: 26px; color: var(--vf-orange); fill: var(--vf-orange); }
.vf-band .vf-sec__line { background: rgba(255, 255, 255, .18); }
.vf-band .vf-sec__more { color: #ffb37a; }
.vf-band .vf-sec__more:hover { color: #fff; }
.vf-band .vf-card { border-color: transparent; }

/* ---------- Vitrines ---------- */
.vf-vitrine { background: #fff; }
.vf-vitrine + .vf-vitrine { padding-top: 8px; }

/* ---------- Linhas e marcas ---------- */
.vf-linhas { background: #fff; }
.vf .vf-linhas__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vf-linha {
	position: relative; display: flex; align-items: stretch; min-height: 168px; border-radius: var(--vf-r-lg); overflow: hidden;
	text-decoration: none; isolation: isolate; transition: transform .3s var(--vf-ease), box-shadow .3s;
}
.vf-linha:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(10, 31, 68, .18); }
.vf-linha__copy { position: relative; z-index: 1; flex: 1 1 58%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; }
.vf-linha__title { font: 700 20px/1.15 var(--vf-font); letter-spacing: -.02em; }
.vf-linha__text { font-size: 13px; line-height: 1.45; opacity: .9; }
.vf-linha__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font: 700 13px var(--vf-font); }
.vf-linha__cta .vf-ico { width: 16px; height: 16px; transition: transform .2s; }
.vf-linha:hover .vf-linha__cta .vf-ico { transform: translateX(3px); }
.vf-linha__media { position: relative; flex: 0 0 42%; overflow: hidden; }
/* Foto real do produto: cobre a área sem esticar o card (cards da grade com a mesma altura) */
.vf-linha__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .4s var(--vf-ease); }
.vf-linha:hover .vf-linha__media img { transform: scale(1.04); }
/* Produto solto em fundo branco: cartão branco com a foto inteira */
.vf-linha__media--produto { background: #fff; margin: 12px 12px 12px 0; border-radius: var(--vf-r-md); }
.vf-linha__media--produto img { object-fit: contain; padding: 8px; }
/* Logo da marca no topo do texto */
.vf-linha__logo { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 8px rgba(10, 31, 68, .18); }
.vf-linha--tec, .vf a.vf-linha--tec:is(:hover, :focus) { background: var(--vf-blue); color: #fff; }
.vf-linha--tec .vf-linha__cta { color: #ffb37a; }
.vf-linha--royal, .vf a.vf-linha--royal:is(:hover, :focus) { background: #2a1d14; color: #fff; }
.vf-linha--royal .vf-linha__title { color: #f1cf98; }
.vf-linha--royal .vf-linha__cta { color: #f1cf98; }
.vf-linha--royal .vf-linha__logo { border-radius: 8px; }
.vf-linha--ideia, .vf a.vf-linha--ideia:is(:hover, :focus) { background: #fff5d6; color: #2b2b2b; }
.vf-linha--ideia .vf-linha__cta { color: var(--vf-orange-ink); }
.vf-linha--landy, .vf a.vf-linha--landy:is(:hover, :focus) { background: var(--vf-blue-soft); color: var(--vf-ink); }
.vf-linha--landy .vf-linha__logo { object-fit: contain; padding: 4px; }
.vf-linha--landy .vf-linha__cta { color: var(--vf-blue); }
@media (min-width: 768px) {
	.vf .vf-linhas__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.vf-linha { min-height: 210px; }
	.vf-linha__copy { padding: 28px; }
	.vf-linha__title { font-size: 24px; }
	.vf-linha__text { font-size: 14px; }
	.vf-linha__logo { width: 56px; height: 56px; }
}

/* ---------- Atendimento ---------- */
.vf-atend { background: var(--vf-bg); }
.vf-atend__grid { display: grid; gap: 20px; }
.vf-atend__title { margin: 8px 0 8px; font: 700 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.1 var(--vf-font); letter-spacing: -.03em; color: var(--vf-ink); }
.vf-atend__sales > p { margin: 0 0 16px; color: var(--vf-mut); line-height: 1.55; max-width: 560px; }
.vf .vf-sellers--home { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vf .vf-sellers--home a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; text-decoration: none; color: var(--vf-mut); min-height: 0; }
.vf .vf-sellers--home span { font-size: 12px; }
.vf .vf-sellers--home b { font-size: 15px; }
.vf .vf-sellers--home small { color: var(--vf-ink); font-weight: 600; font-size: 13px; margin-top: 2px; }
.vf-atend__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-store { height: 100%; padding: 24px; border-radius: var(--vf-r-lg); background: var(--vf-navy); color: #c9d3e6; position: relative; overflow: hidden; }
.vf-store::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(242, 106, 27, .25); }
.vf-store__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--vf-r-pill); background: rgba(255, 255, 255, .1); color: #ffb37a; font: 700 12px var(--vf-font); }
.vf-store__badge .vf-ico { width: 16px; height: 16px; }
.vf-store h3 { margin: 14px 0 6px; color: #fff; font: 700 22px var(--vf-font); }
.vf-store p { margin: 0 0 14px; }
.vf .vf-store__list { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.vf .vf-store__list li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.vf .vf-store__list .vf-ico { width: 18px; height: 18px; color: #4ee08a; }
.vf-store__ctas { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.vf-store .vf-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.vf-store .vf-btn--ghost:hover { background: #fff; color: var(--vf-navy); }
@media (min-width: 1024px) {
	.vf-atend__grid { grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: stretch; }
	.vf .vf-sellers--home { grid-template-columns: repeat(4, 1fr); }
	.vf-store { padding: 32px; }
}

/* ---------- Por que comprar ---------- */
.vf-why { background: #fff; }
.vf-why__title { margin: 0 0 20px; text-align: center; font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.875rem)/1.2 var(--vf-font); letter-spacing: -.02em; color: var(--vf-ink); }
.vf-why__title span { color: var(--vf-blue); }
.vf .vf-why__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin: 0 calc(var(--vf-gutter) * -1); padding: 4px var(--vf-gutter) 8px;
	list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
 scroll-padding-inline: var(--vf-gutter);}
.vf .vf-why__list::-webkit-scrollbar { display: none; }
.vf-why__card { scroll-snap-align: start; padding: 22px; border: 1px solid var(--vf-line); border-radius: var(--vf-r-lg); background: #fff; }
.vf-why__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--vf-r-md); background: var(--vf-blue-soft); color: var(--vf-blue); }
.vf-why__card h3 { margin: 14px 0 6px; font: 700 18px var(--vf-font); color: var(--vf-ink); }
.vf-why__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--vf-mut); }
.vf-why__card strong { color: var(--vf-ink); }
@media (min-width: 1024px) {
	.vf .vf-why__list { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; }
}

/* ---------- SEO ---------- */
.vf-seo { background: #fff; padding-top: 0; }
.vf-seo__box { border-top: 1px solid var(--vf-line); padding-top: 20px; }
.vf-seo__box summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; min-height: 44px; }
.vf-seo__box summary::-webkit-details-marker { display: none; }
.vf-seo__box h2 { margin: 0; font: 700 16px/1.3 var(--vf-font); color: var(--vf-ink); }
.vf-seo__toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--vf-orange-ink); font: 700 14px var(--vf-font); white-space: nowrap; }
.vf-seo__toggle .vf-ico { width: 18px; height: 18px; transition: transform .2s; }
.vf-seo__less, .vf-seo__box[open] .vf-seo__more { display: none; }
.vf-seo__box[open] .vf-seo__less { display: inline; }
.vf-seo__box[open] .vf-seo__toggle .vf-ico { transform: rotate(180deg); }
.vf-seo__text { color: var(--vf-mut); font-size: 14px; line-height: 1.7; max-width: 960px; }
.vf-seo__text a { color: var(--vf-blue); text-decoration: underline; text-underline-offset: 2px; }
.vf.home .vf-footer { margin-top: 0; }

/* ---------- Banners promocionais (carrossel) ----------
   Quadrados em HTML/CSS: fundo vibrante com raios e anel, título display (Onest 900 inclinado, contorno e sombra
   "3D"), selos, ilustração/foto e letra miúda. Tamanhos em cqi (relativos à largura do banner): o mesmo desenho
   escala do celular ao 4K. Cores por tema (--c1 topo, --c2 base escura onde fica a letra miúda) com contraste AA. */
.vf-promos { background: var(--vf-bg); padding-top: 8px; }
.vf-promos .vf-sec__head { margin-bottom: 14px; }

.vf .vf-promos__track {
	grid-auto-columns: calc((100% - 12px) / 1.2); gap: 12px; padding-block: 4px 18px;
}
.vf-promos__item { display: flex; }
.vf .vf-promos__nav {
	display: none; position: absolute; top: calc(50% - 7px); z-index: 4; width: 48px; height: 48px; min-height: 0; padding: 0; margin-top: -24px;
	place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--vf-navy); cursor: pointer;
	box-shadow: 0 2px 6px rgba(10, 31, 68, .18), 0 10px 24px rgba(10, 31, 68, .16); transition: transform .2s var(--vf-ease), opacity .2s, color .2s;
}
.vf .vf-promos__nav:is(:hover, :focus) { background: #fff; color: var(--vf-blue); transform: scale(1.06); }
.vf .vf-promos__nav[disabled] { opacity: 0; visibility: hidden; transform: scale(.8); }
.vf-promos__nav--prev { left: -16px; }
.vf-promos__nav--next { right: -16px; }

/* Banner */
.vf .vf-promo {
	--c1: #1f47c4; --c2: #15308c; --ink: #fff; --hl: #ffd23f; --hl-bg: transparent; --sh: #0a1f44;
	--kick-bg: #fff; --kick-ink: #15308c; --chip-bg: #15308c; --chip-ink: #fff;
	--cta-bg: #ffd23f; --cta-ink: #0a1f44; --fine: #e6ecff; --ray: rgba(255, 255, 255, .08); --ring: rgba(255, 255, 255, .07); --glow: rgba(120, 160, 255, .4);
	--t: 14.5cqi;
	position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; isolation: isolate; container-type: inline-size;
	border-radius: 14px; color: var(--ink); text-decoration: none;
	background:
		radial-gradient(circle at 82% 52%, var(--glow) 0, transparent 46%),
		linear-gradient(170deg, var(--c1) 0%, var(--c1) 38%, var(--c2) 100%);
	box-shadow: 0 1px 2px rgba(10, 31, 68, .1), 0 10px 24px -8px rgba(10, 31, 68, .28);
	transition: transform .35s var(--vf-ease), box-shadow .35s var(--vf-ease);
}
.vf .vf-promo:is(:hover, :focus) { color: var(--ink); }
/* Raios de "oferta" saindo do canto da ilustração e anel grande */
.vf-promo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: repeating-conic-gradient(from 4deg at 80% 68%, var(--ray) 0 6deg, transparent 6deg 16deg);
	-webkit-mask-image: radial-gradient(circle at 80% 68%, #000 0, #000 22%, transparent 72%);
	mask-image: radial-gradient(circle at 80% 68%, #000 0, #000 22%, transparent 72%);
}
.vf-promo::after {
	content: ""; position: absolute; z-index: -1; right: -20cqi; top: -26cqi; width: 62cqi; aspect-ratio: 1; border-radius: 50%;
	border: 8cqi solid var(--ring);
}
.vf .vf-promo:focus-visible { outline: 3px solid #fff; outline-offset: -7px; box-shadow: inset 0 0 0 10px var(--vf-navy); }
@media (hover: hover) {
	.vf .vf-promo:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(10, 31, 68, .12), 0 18px 34px -10px rgba(10, 31, 68, .4); }
	.vf-promo:hover .vf-promo__art, .vf-promo:hover .vf-promo__fotos { transform: translateY(-2cqi) rotate(-1.5deg) scale(1.03); }
	.vf-promo:hover .vf-promo__cta .vf-ico { transform: translateX(3px); }
}

/* Imagem de fundo opcional (ex.: cena gerada por IA) com véu na cor do tema para o texto continuar legível */
.vf-promo__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vf-promo.has-bg::before {
	-webkit-mask-image: none; mask-image: none;
	background: linear-gradient(180deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 80%, transparent) 30%, transparent 55%, color-mix(in srgb, var(--c2) 75%, transparent) 78%, var(--c2) 100%);
}
.vf-promo.has-bg::after { display: none; }

/* Texto */
.vf-promo__copy { position: absolute; z-index: 3; inset: 6cqi 6.5cqi auto; display: flex; flex-direction: column; align-items: flex-start; }
.vf-promo__kicker {
	display: inline-block; max-width: 100%; padding: .42em .85em; border-radius: var(--vf-r-pill); background: var(--kick-bg); color: var(--kick-ink);
	font: 800 max(11px, 3.1cqi)/1.15 var(--vf-font); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
}
.vf-promo__title {
	display: flex; flex-direction: column; align-items: flex-start; margin-top: 3.2cqi; transform: skewX(-9deg); transform-origin: left center;
	font: 900 var(--t)/.88 var(--vf-font); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink);
	-webkit-text-stroke: .012em var(--sh); paint-order: stroke fill;
	text-shadow: .02em .025em 0 var(--sh), .04em .05em 0 var(--sh), .06em .075em 0 var(--sh), .08em .14em .16em rgba(0, 0, 0, .28);
}
.vf-promo__line { display: block; white-space: nowrap; }
.vf-promo__line.is-hl { color: var(--hl); }
.vf-promo__sub {
	display: block; max-width: 60cqi; margin-top: 2.6cqi; transform: skewX(-9deg); transform-origin: left;
	font: 800 5.4cqi/1.08 var(--vf-font); letter-spacing: -.02em; color: var(--ink); text-shadow: 0 .06em 0 rgba(0, 0, 0, .22);
}
.vf-promo__pills { display: flex; flex-wrap: wrap; gap: 1.4cqi; max-width: 62cqi; margin-top: 3cqi; }
.vf-promo__pill {
	padding: .38em .75em; border-radius: var(--vf-r-pill); background: var(--chip-bg); color: var(--chip-ink);
	font: 700 max(11px, 3cqi)/1.15 var(--vf-font); white-space: nowrap;
}
.vf-promo__steps { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqi; margin-top: 3cqi; }
.vf-promo__step {
	display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.3cqi 2.6cqi 1.3cqi 1.6cqi; border-radius: var(--vf-r-pill);
	background: #fff; color: var(--vf-navy); font: 800 max(11px, 3.1cqi)/1.1 var(--vf-font); white-space: nowrap; box-shadow: 0 .7cqi 0 rgba(0, 0, 0, .16);
}
.vf-promo__step .vf-ico { width: max(15px, 4.6cqi); height: max(15px, 4.6cqi); color: var(--vf-orange-ink); stroke-width: 2.4; }
.vf-promo__arrow { display: none; }

/* Rodapé do banner: chamada para comprar + letra miúda */
.vf-promo__foot { position: absolute; z-index: 3; inset: auto 6.5cqi 5cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqi; }
.vf-promo__cta {
	display: inline-flex; align-items: center; gap: 1.4cqi; padding: 2.1cqi 3.6cqi; border-radius: var(--vf-r-pill); background: var(--cta-bg); color: var(--cta-ink);
	font: 800 max(12px, 3.9cqi)/1.1 var(--vf-font); box-shadow: 0 .9cqi 0 rgba(0, 0, 0, .22);
}
.vf-promo__cta .vf-ico { width: 1.15em; height: 1.15em; stroke-width: 2.6; transition: transform .2s; }
.vf-promo__fine { display: block; font: 500 max(11px, 2.8cqi)/1.3 var(--vf-font); color: var(--fine); }

/* Ilustração e fotos (ficam à direita, entre o texto e a letra miúda) */
.vf-promo__art, .vf-promo__fotos { position: absolute; z-index: 2; transition: transform .45s var(--vf-ease); }
.vf-promo__art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.4cqi 1.6cqi rgba(0, 0, 0, .22)); }
.vf-promo__art--truck { right: -2cqi; bottom: 21cqi; width: 56cqi; transform: rotate(-4deg); }
.vf-promo__art--store { right: 4cqi; bottom: 21cqi; width: 36cqi; }
.vf-promo__art--medal { right: 6cqi; bottom: 19cqi; width: 30cqi; transform: rotate(8deg); }
.vf-promo__art--headset { right: 4cqi; bottom: 20cqi; width: 37cqi; }
.vf-promo__fotos { right: 5cqi; bottom: 19cqi; width: 38cqi; height: 35cqi; }
.vf-promo__foto {
	position: absolute; inset: 0; display: block; padding: 2cqi; border-radius: 3cqi; background: #fff; transform: rotate(5deg);
	box-shadow: 0 1.2cqi 0 rgba(0, 0, 0, .14), 0 3cqi 5cqi rgba(0, 0, 0, .28);
}
.vf-promo__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vf-promo__fotos.is-cena .vf-promo__foto { padding: 1.4cqi; }
.vf-promo__fotos.is-cena .vf-promo__foto img { object-fit: cover; border-radius: 1.8cqi; }
.vf-promo__fotos--2 { bottom: 19cqi; height: 32cqi; }
.vf-promo__fotos--2 .vf-promo__foto { width: 64%; }
.vf-promo__fotos--2 .vf-promo__foto:first-child { inset: 0 auto 0 0; transform: rotate(-8deg); }
.vf-promo__fotos--2 .vf-promo__foto:last-child { inset: 6% 0 -6% auto; transform: rotate(9deg); }

/* Temas */
.vf .vf-promo--orange {
	--c1: #e25a0c; --c2: #8f3400; --hl: #fff; --hl-bg: var(--vf-navy); --sh: #6e2900;
	--kick-bg: #fff; --kick-ink: #b34200; --chip-bg: #7a2d00; --chip-ink: #fff;
	--cta-bg: var(--vf-navy); --cta-ink: #fff; --fine: #fff; --ray: rgba(255, 220, 160, .1); --ring: rgba(90, 25, 0, .14); --glow: rgba(255, 190, 90, .32);
}
.vf .vf-promo--navy {
	--c1: #12306f; --c2: #071733; --hl: #ff9a52; --sh: #000a1e;
	--kick-bg: var(--vf-orange-btn); --kick-ink: #fff; --chip-bg: var(--vf-blue); --chip-ink: #fff;
	--cta-bg: #ff9a52; --cta-ink: var(--vf-navy); --fine: #c9d3e6; --ray: rgba(255, 255, 255, .06); --ring: rgba(255, 154, 82, .16); --glow: rgba(42, 85, 217, .55);
}
.vf .vf-promo--royal {
	--c1: #2e2016; --c2: #120b06; --ink: #fff; --hl: #f1cf98; --sh: #000;
	--kick-bg: #f1cf98; --kick-ink: #2a1d14; --chip-bg: #4a3526; --chip-ink: #f1cf98;
	--cta-bg: #f1cf98; --cta-ink: #2a1d14; --fine: #e8dccb; --ray: rgba(241, 207, 152, .1); --ring: rgba(241, 207, 152, .16); --glow: rgba(241, 207, 152, .3);
}
.vf .vf-promo--yellow {
	--c1: #ffd23f; --c2: #ffbf00; --ink: var(--vf-navy); --hl: #fff; --hl-bg: var(--vf-blue); --sh: #fff3c4;
	--kick-bg: var(--vf-navy); --kick-ink: #fff; --chip-bg: #fff; --chip-ink: var(--vf-navy);
	--cta-bg: var(--vf-blue); --cta-ink: #fff; --fine: var(--vf-navy); --ray: rgba(255, 255, 255, .28); --ring: rgba(255, 255, 255, .3); --glow: rgba(255, 255, 255, .55);
}
/* Linha destacada em tarja (laranja e amarelo): fundo sólido com texto branco */
.vf-promo--orange .vf-promo__line.is-hl, .vf-promo--yellow .vf-promo__line.is-hl {
	margin-top: .08em; padding: .06em .14em .02em; background: var(--hl-bg); color: var(--hl);
	-webkit-text-stroke: 0; text-shadow: none; box-shadow: .06em .08em 0 rgba(0, 0, 0, .22);
}
.vf-promo--yellow .vf-promo__title { text-shadow: .03em .04em 0 #fff, .06em .08em 0 rgba(10, 31, 68, .18); -webkit-text-stroke: 0; }
.vf-promo--yellow .vf-promo__sub { text-shadow: none; }
/* Frase de apoio é texto normal (< 18,66px): no laranja vai numa tarja marinho (branco direto no laranja dá ~3,5:1) */
.vf .vf-promo--orange .vf-promo__sub { padding: .22em .5em .18em; background: var(--vf-navy); color: #fff; text-shadow: none; box-shadow: .12em .14em 0 rgba(0, 0, 0, .2); }

/* Celular: banner 4:5 (a letra miúda tem mínimo de 11px e precisa de mais altura em cartões estreitos) */
@media (max-width: 479px) {
	.vf .vf-promo { aspect-ratio: 4 / 5; }
}
/* Larguras do carrossel: 1,2 banner por tela no celular, 2,3 no tablet, 4 no desktop */
@media (min-width: 768px) {
	.vf .vf-promos__track { grid-auto-columns: calc((100% - 28px) / 2.3); gap: 14px; }
	.vf .vf-promos__nav { display: grid; }
}
@media (min-width: 1024px) {
	.vf-promos { padding-top: 16px; }
	.vf .vf-promos__track { grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
	.vf-promos__nav--prev { left: -22px; }
	.vf-promos__nav--next { right: -22px; }
}
@media (min-width: 1360px) {
	.vf-promos__nav--prev { left: -26px; }
	.vf-promos__nav--next { right: -26px; }
}
@media (prefers-reduced-motion: reduce) {
	.vf .vf-promo, .vf-promo__art, .vf-promo__fotos { transition: none; }
}

/* ---------- Slides com fotos geradas (Gemini): fotos vivas, véu só onde há texto ---------- */
.vf-slide--foto picture { position: absolute; inset: 0; z-index: 0; }
.vf-slide--foto .vf-slide__bg { object-position: center; }
.vf-slide--foto { min-height: 560px; }
.vf-slide--foto::before {
	background: linear-gradient(180deg, rgba(10, 31, 68, 0) 22%, rgba(10, 31, 68, .62) 52%, rgba(10, 31, 68, .94) 100%);
}
.vf-slide--foto .vf-slide__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.vf-slide--foto .vf-slide__text { color: #eef2fb; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
@media (min-width: 600px) {
	.vf-slide--foto .vf-slide__bg { object-position: var(--vf-pos, 65% center); }
	.vf-slide--foto::before { background: linear-gradient(90deg, rgba(10, 31, 68, .9) 0%, rgba(10, 31, 68, .7) 34%, rgba(10, 31, 68, .15) 62%, rgba(10, 31, 68, 0) 75%); }
}
@media (min-width: 1024px) {
	.vf-slide--foto, .vf-slide { min-height: 500px; }
}
@media (min-width: 1600px) {
	.vf-slide--foto, .vf-slide { min-height: 580px; }
}