/* ==========================================================================
   Ofertas Lojas 2001 — ajustes das landings (por cima da base do blog).
   Usa as variaveis de marca do blog: --azul, --vermelho, --fonte-titulo, etc.
   ========================================================================== */

/* ---- Menu principal (header) ------------------------------------------- */
.header-nav { margin-left: auto; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.menu-principal li { margin: 0; }
.menu-principal a {
	display: inline-flex; align-items: center; padding: 9px 15px;
	font-family: var(--fonte-titulo); font-weight: 500; font-size: 15px;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--azul-escuro); text-decoration: none; border-radius: var(--raio-sm);
	transition: var(--transicao);
}
.menu-principal a:hover { background: var(--azul-100); color: var(--azul); text-decoration: none; }
.menu-principal .current_page_item > a,
.menu-principal .current-menu-item > a,
.menu-principal .current_page_ancestor > a { background: var(--azul); color: #fff; }

.abrir-menu { display: none; background: none; border: 0; color: var(--azul-escuro); cursor: pointer; padding: 6px; border-radius: var(--raio-sm); }
.abrir-menu:hover { background: var(--azul-100); }

/* ---- 1. Banner de video no topo (contido e centralizado) --------------- */
.banner-topo { width: 100%; min-height: 400px; margin: 34px 0 8px; border-radius: var(--raio); display: flex; align-items: center; text-align: center; overflow: hidden; box-shadow: var(--sombra); position: relative; }
/* O video preenche o banner por "cover" (regra da base do blog, 177%) — sem faixa preta em nenhuma tela. */
.banner-topo .banner-video-conteudo { width: 100%; max-width: 720px; margin: 0 auto; padding: 46px 28px; }
.banner-topo .banner-video-tag {
	display: inline-block; background: var(--vermelho); color: #fff;
	font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .04em;
	font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 100px;
}
.banner-topo .banner-video-conteudo h1 {
	font-family: var(--fonte-titulo); color: #fff; font-size: 40px; line-height: 1.06;
	margin: 14px auto 10px; text-transform: uppercase; font-weight: 600; max-width: 600px;
}
.banner-topo .banner-video-texto p { color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.5; max-width: 560px; margin: 0 auto; }

/* ---- 2. Banner principal (texto + CTA) --------------------------------- */
.oferta-hero { background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%); color: #fff; padding: 74px 0; }
.oferta-hero-conteudo { max-width: 780px; }
.oferta-hero-selo {
	display: inline-block; background: var(--vermelho); color: #fff;
	font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .04em;
	font-size: 13px; font-weight: 600; padding: 6px 15px; border-radius: 100px; margin-bottom: 18px;
}
.oferta-hero h2 { font-family: var(--fonte-titulo); font-size: 46px; line-height: 1.07; color: #fff; margin: 0 0 16px; font-weight: 600; }
.oferta-hero p { font-size: 19.5px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 30px; max-width: 640px; }
.oferta-hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.btn-grande { font-size: 17px; padding: 15px 30px; }
.oferta-hero .btn-contorno { color: #fff; border-color: rgba(255,255,255,.55); }
.oferta-hero .btn-contorno:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ---- Badges das lojas (App Store / Google Play) ------------------------ */
.app-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.app-badges-centro { justify-content: center; }
.app-badge {
	display: inline-flex; align-items: center; gap: 12px;
	background: #111; color: #fff; padding: 11px 22px; border-radius: 12px;
	text-decoration: none; transition: var(--transicao); border: 1px solid rgba(0,0,0,.08);
}
.app-badge:hover { background: #000; color: #fff; transform: translateY(-2px); text-decoration: none; }
.app-badge svg { width: 26px; height: 26px; flex: 0 0 auto; }
.app-badge .app-badge-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.app-badge small { font-size: 11px; opacity: .82; font-weight: 400; letter-spacing: .01em; }
.app-badge strong { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; }
/* No hero azul, badges claros para contraste */
.app-hero .app-badge { background: #fff; color: var(--azul-700); border-color: transparent; box-shadow: var(--sombra); }
.app-hero .app-badge:hover { background: #fff; color: #000; }

/* CTA/badges dentro do banner de video (contraste sobre o video escurecido) */
.banner-topo .banner-video-cta { margin-top: 22px; }
.banner-topo .app-badges { justify-content: center; gap: 12px; }
.banner-topo .app-badge { background: #fff; color: var(--azul-700); border-color: transparent; box-shadow: var(--sombra); }
.banner-topo .app-badge:hover { background: #fff; color: #000; }

/* ---- 3. Beneficios ------------------------------------------------------ */
.beneficios-secao { padding: 66px 0; }
.beneficios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 6px; }
.beneficio-card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio);
	padding: 30px 26px; box-shadow: var(--sombra); transition: var(--transicao);
}
.beneficio-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.beneficio-icone {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 14px; background: var(--azul-100); color: var(--azul); margin-bottom: 16px;
}
.beneficio-icone svg { width: 27px; height: 27px; }
.beneficio-card h3 { font-family: var(--fonte-titulo); font-size: 21px; margin: 0 0 8px; color: var(--azul-escuro); }
.beneficio-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* ---- 4. CTA final ------------------------------------------------------- */
.cta-final { background: var(--bg); border-top: 1px solid var(--border); padding: 66px 0; text-align: center; }
.cta-final h2 { font-family: var(--fonte-titulo); font-size: 36px; color: var(--azul-escuro); margin: 0 0 10px; }
.cta-final p { color: var(--muted); font-size: 18px; margin: 0 0 26px; }

/* ---- Rodape: menu automatico + base ------------------------------------ */
.rodape-menu ul, ul.rodape-menu { list-style: none; margin: 0; padding: 0; }
.rodape-menu li { margin: 0 0 8px; }
.rodape-menu a { color: rgba(255,255,255,.82); text-decoration: none; }
.rodape-menu a:hover { color: #fff; text-decoration: underline; }
.rodape-base { border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 20px; text-align: center; }
.rodape-base p { margin: 0; font-size: 14px; color: rgba(255,255,255,.72); }

/* ---- Responsivo --------------------------------------------------------- */
@media (max-width: 860px) {
	/* Header: hamburguer + logo; redes escondem; menu em gaveta */
	.abrir-menu { display: inline-flex; order: 0; }
	.header-social { display: none; }
	.header-nav { order: 5; flex: 1 1 100%; width: 100%; margin: 6px 0 0; display: none; }
	body.nav-aberto .header-nav { display: block; }
	.menu-principal ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.menu-principal a { padding: 13px 14px; font-size: 16px; }

	/* Banner segue a largura do conteudo (container); anula o full-bleed do blog */
	.banner-topo { min-height: 300px; margin: 20px 0 6px; width: 100%; border-radius: var(--raio); }
	.banner-topo .banner-video-conteudo { padding: 34px 20px; }
	.banner-topo .banner-video-conteudo h1 { font-size: 28px; }
	.banner-topo .banner-video-texto p { font-size: 16px; }

	.oferta-hero { padding: 52px 0; }
	.oferta-hero h2 { font-size: 30px; }
	.oferta-hero p { font-size: 17px; }

	.beneficios-secao { padding: 48px 0; }
	.beneficios-grid { grid-template-columns: 1fr; gap: 16px; }

	.cta-final { padding: 52px 0; }
	.cta-final h2 { font-size: 27px; }
}

@media (max-width: 560px) {
	.banner-topo .banner-video-conteudo h1 { font-size: 24px; }
	.oferta-hero h2 { font-size: 26px; }
	.oferta-hero-acoes { flex-direction: column; align-items: stretch; }
	.oferta-hero-acoes .btn { justify-content: center; }
	.app-badges { flex-direction: column; }
	.app-badge { justify-content: flex-start; }
	.app-badges-centro { align-items: center; }
	.app-badges-centro .app-badge { width: 100%; max-width: 300px; justify-content: center; }
}