/* ===========================================================================
   Pre-footer Lanternas Importadas — carregado no site inteiro (exceto
   carrinho, checkout, minha conta e 404).
   Escopo proprio (.vd-pre): nao herda as variaveis da home, que so existem
   nos templates li-*.
   ========================================================================= */

.vd-pre {
	--ink:    #0E0F12;
	--line:   #E3E5EA;
	--txt:    #14161A;
	--txt2:   #4A4F59;
	--txt3:   #767C88;
	--tint:   #F6F7F9;
	--yellow: #FFC81B;
	--green:  #1FA855;

	background: var(--tint);
	border-top: 1px solid var(--line);
	color: var(--txt);
	font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.55;
	padding: clamp(34px, 4.4vw, 54px) 0;
}
.vd-pre-wrap { width: min(1240px, 92vw); margin-inline: auto; }
.vd-pre :where(p, ul, li) { margin: 0; padding: 0; }
.vd-pre :where(ul) { list-style: none; }
.vd-pre :where(a) { text-decoration: none; color: inherit; }

/* ── Faixa de reforço ────────────────────────────────────────────────── */
.vd-pre-tr {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
	padding-bottom: 30px; margin-bottom: 30px;
	border-bottom: 1px solid var(--line);
}
.vd-tr-i { position: relative; padding-left: 20px; }
.vd-tr-i::before {
	content: ""; position: absolute; left: 0; top: .46em;
	width: 10px; height: 10px; border-radius: 3px; background: var(--yellow);
}
.vd-tr-i b { display: block; font-size: .93rem; font-weight: 800; }
.vd-tr-i i { display: block; font-style: normal; font-size: .81rem;
             color: var(--txt2); margin-top: 2px; line-height: 1.45; }

/* ── Colunas ─────────────────────────────────────────────────────────── */
.vd-pre-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.vd-pre-t {
	font-size: .76rem; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--txt3); margin-bottom: 14px !important;
}

/* Categorias: link interno em toda página do site. */
.vd-pre-cat ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.vd-pre-cat a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	font-size: .92rem; font-weight: 600; padding: 5px 0;
	border-bottom: 1px solid transparent; transition: color .16s, border-color .16s;
}
.vd-pre-cat a:hover { color: #0F7A3D; border-bottom-color: var(--yellow); }
.vd-pre-cat a span {
	font-size: .72rem; font-weight: 800; color: var(--txt3); flex: none;
}

/* ── Cartões de contato ──────────────────────────────────────────────── */
.vd-pre-ct { display: grid; gap: 12px; align-content: start; }
.vd-pre-card {
	display: block; border-radius: 14px; padding: 18px 20px;
	border: 1px solid var(--line); background: #fff;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}
.vd-pre-card:hover { transform: translateY(-2px); border-color: var(--yellow);
                     box-shadow: 0 10px 24px rgba(14,15,18,.08); }
.vd-pre-card b { display: block; font-size: 1rem; font-weight: 800; }
.vd-pre-card i { display: block; font-style: normal; font-size: .86rem;
                 color: var(--txt2); margin-top: 4px; line-height: 1.5; }
.vd-pre-card span {
	display: inline-block; margin-top: 12px; font-size: .8rem; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase;
}
.vd-pre-wa span { color: var(--green); }
.vd-pre-pj      { background: var(--ink); border-color: var(--ink); color: #fff; }
.vd-pre-pj b    { color: #fff; }
.vd-pre-pj i    { color: rgba(255,255,255,.72); }
.vd-pre-pj span { color: var(--yellow); }
.vd-pre-link {
	font-size: .84rem; font-weight: 700; color: var(--txt2);
	text-decoration: underline; text-underline-offset: 3px;
}
.vd-pre-link:hover { color: var(--txt); }

@media (prefers-reduced-motion: reduce) {
	.vd-pre-card:hover { transform: none; }
}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.vd-pre-tr   { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
	.vd-pre-cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
	.vd-pre-tr      { grid-template-columns: 1fr; }
	.vd-pre-cat ul  { grid-template-columns: 1fr; }
}

/* ═══ RODAPÉ ════════════════════════════════════════════════════════════
   Reconstruído por código (shortcode [vd_footer]) em 29/08/2026.
   Mantém tudo que existia no bloco Elementor 52: os dois menus, posts
   recentes, Reclame Aqui, formas de pagamento + Site Blindado, logo, selo
   CusRev, redes, razão social e os selos Norton / Google Safe Browsing.
   ═══════════════════════════════════════════════════════════════════════ */

/* O tema envolve o rodapé em `.container` (largura presa + padding lateral) e
   ainda passa o conteúdo do bloco por wpautop. Aqui a largura é solta para o
   rodapé usar a MESMA medida do pré-footer e da home — sem isso ele fica
   espremido e visualmente descolado do resto da loja. */
.wd-footer .container.main-footer,
.wd-footer .main-footer.wd-entry-content {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}
.wd-footer .main-footer > p:empty,
.vd-ft-host > p:empty { display: none; }
.vd-ft-host { margin: 0; }

.vd-ft {
	--ink:    #0E0F12;
	--ink2:   #17191F;
	--line:   rgba(255,255,255,.12);
	--yellow: #FFC81B;
	--green:  #25D366;

	background: var(--ink);
	color: rgba(255,255,255,.72);
	font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.55;
	padding: clamp(44px, 5.2vw, 66px) 0 0;
}
.vd-ft-wrap { width: min(1240px, 92vw); margin-inline: auto; }
.vd-ft :where(p, ul, li, address) { margin: 0; padding: 0; font-style: normal; }
.vd-ft :where(ul) { list-style: none; }
.vd-ft :where(a) { text-decoration: none; color: inherit; }
.vd-ft :where(img) { max-width: 100%; height: auto; display: block; }

/* ── Marca no topo ───────────────────────────────────────────────────── */
.vd-ft-marca-topo {
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	padding-bottom: 30px; margin-bottom: 34px;
	border-bottom: 1px solid var(--line);
}
.vd-ft-logo { flex: none; }
.vd-ft-logo img {
	width: 86px; height: auto;
	background: #fff; border-radius: 16px; padding: 8px;
}
.vd-ft-nome {
	font-family: "Urbanist", "Albert Sans", sans-serif;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800;
	letter-spacing: -.02em; color: #fff; line-height: 1.1;
}
.vd-ft-slogan {
	margin-top: 7px !important; font-size: .92rem; max-width: 620px;
	color: rgba(255,255,255,.62); line-height: 1.55;
}
.vd-ft-slogan strong { color: var(--yellow); font-weight: 700; }

/* ── Colunas ─────────────────────────────────────────────────────────── */
.vd-ft-cols {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px; align-items: start;
}
.vd-ft-t {
	font-size: .74rem; font-weight: 800; letter-spacing: .13em;
	text-transform: uppercase; color: var(--yellow);
	margin-bottom: 16px !important;
}
.vd-ft-t-lock { display: flex; align-items: center; gap: 8px; }
.vd-ft-t-lock::before {
	content: ""; width: 13px; height: 15px; flex: none; background: currentColor;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E");
	        mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E");
}
.vd-ft-col ul { display: grid; gap: 11px; }
.vd-ft-col li a {
	font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.66);
	line-height: 1.5; transition: color .16s;
}
.vd-ft-col li a:hover { color: var(--yellow); }
.vd-ft-posts { list-style: none !important; padding-left: 0 !important; gap: 13px !important; }
.vd-ft-posts li a { position: relative; padding-left: 15px; display: block; }
.vd-ft-posts li a::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); opacity: .7;
}

/* Imagem de pagamento é fundo claro: vai numa pastilha branca. */
.vd-ft-pag {
	background: #fff; border-radius: 10px; padding: 9px 11px;
	max-width: 300px; margin-bottom: 12px;
}
.vd-ft-obs { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.5; }

/* ── Base ────────────────────────────────────────────────────────────── */
.vd-ft-base {
	margin-top: clamp(34px, 4vw, 50px);
	background: var(--ink2);
	padding: clamp(24px, 3vw, 34px) 0 clamp(22px, 2.6vw, 30px);
}
.vd-ft-base .vd-ft-wrap { display: grid; gap: 22px; }

/* Os dois blocos da linha de cima ficam do MESMO tamanho: duas colunas iguais,
   mesma altura mínima, conteúdo centralizado dentro de cada uma. */
.vd-ft-topo {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px; align-items: stretch;
	padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
/* Altura FIXA e igual nos dois — o selo do CusRev é imagem de tamanho natural
   e o bloco branco cresce com o conteúdo; sem travar, nunca batem. */
.vd-ft-marca,
.vd-ft-selos {
	height: 108px; width: 100%; margin: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 12px; overflow: hidden;
}
/* A caixa acompanha a cor do selo (#373737), então lê como um bloco só. */
.vd-ft-marca { background: #373737; padding: 10px 16px; }
.vd-ft-cusrev { width: 100%; max-width: none; display: flex;
                align-items: center; justify-content: center; }
.vd-ft-cusrev img,
.vd-ft-cusrev iframe,
.vd-ft-cusrev > div { max-width: 100%; max-height: 88px; height: auto; width: auto; }

.vd-ft-redes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.vd-ft-rede {
	width: 38px; height: 38px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08); color: #fff;
	transition: transform .16s, background .16s;
}
.vd-ft-rede:hover { transform: translateY(-3px); }
.vd-ft-youtube:hover   { background: #FF0000; }
.vd-ft-tiktok:hover    { background: #69C9D0; color: #0E0F12; }
.vd-ft-instagram:hover { background: #C13584; }
.vd-ft-facebook:hover  { background: #1877F2; }
.vd-ft-blog:hover      { background: #21759B; }
.vd-ft-telegram:hover  { background: #29A9EB; }
/* WhatsApp sempre verde, nao so no hover — e o canal de atendimento. */
.vd-ft-whatsapp        { background: var(--green); color: #fff; }
.vd-ft-whatsapp:hover  { background: #1EBE5A; color: #fff; }
.vd-ft-canal:hover     { background: var(--yellow); color: #0E0F12; }

.vd-ft-fim {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.vd-ft-legal {
	font-size: .77rem; color: rgba(255,255,255,.45); line-height: 1.65; max-width: 600px;
}
/* Selos de confiança: UM bloco branco só, com separadores entre eles.
   Como pastilhas soltas ficavam picotadas sobre o escuro. */
.vd-ft-selos {
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
	align-items: stretch !important; flex-wrap: wrap;
}
.vd-ft-selos > li {
	flex: 1 1 0; min-width: 130px;
	display: flex; align-items: center; justify-content: center;
	padding: 12px 18px; position: relative;
}
.vd-ft-selos > li + li::before {
	content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
	width: 1px; background: #E3E5EA;
}
/* Dentro do bloco os itens perdem a pastilha individual. */
.vd-ft-selos a, .vd-ft-ra {
	display: block; background: none; padding: 0; border-radius: 0;
	line-height: 0; transition: opacity .16s;
}
.vd-ft-selos a:hover { opacity: .75; }
.vd-ft-selos img, .vd-ft-ra img, .vd-ft-ra > div { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
	.vd-pre-card:hover { transform: none; }
}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.vd-pre-tr   { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
	.vd-pre-cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
	.vd-pre-tr      { grid-template-columns: 1fr; }
	.vd-pre-cat ul  { grid-template-columns: 1fr; }
}

/* ═══ RODAPÉ ════════════════════════════════════════════════════════════
   Reconstruído por código (shortcode [vd_footer]) em 29/08/2026.
   Mantém tudo que existia no bloco Elementor 52: os dois menus, posts
   recentes, Reclame Aqui, formas de pagamento + Site Blindado, logo, selo
   CusRev, redes, razão social e os selos Norton / Google Safe Browsing.
   ═══════════════════════════════════════════════════════════════════════ */


@media (prefers-reduced-motion: reduce) {
	.vd-ft-rede:hover { transform: none; }
}

@media (max-width: 1080px) {
	.vd-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 620px) {
	.vd-ft-cols       { grid-template-columns: 1fr; gap: 26px; }
	.vd-ft-marca-topo { gap: 16px; }
	.vd-ft-logo img   { width: 64px; }
	.vd-ft-topo, .vd-ft-fim { flex-direction: column; align-items: flex-start; }
	.vd-ft-rede       { width: 36px; height: 36px; }
}