/* Página "Anuncie" (anunciar/planos.php) — topo, benefícios, dúvidas e ajuda. 20/10/2026. Prefixo an2- */
.an2-hero { position: relative; color: #fff; background: #0e1726 center / cover no-repeat; overflow: hidden; }
.an2-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,26,.88) 0%, rgba(8,14,26,.62) 55%, rgba(8,14,26,.35) 100%); }
.an2-hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: center; padding-top: 46px; padding-bottom: 46px; }
.an2-hero h1 { color: #fff; font-size: 44px; font-weight: 800; line-height: 1.12; margin: 0 0 16px; letter-spacing: -.01em; }
.an2-hero p.an2-sub { font-size: 16.5px; line-height: 1.6; color: #e6ebf3; margin: 0 0 26px; max-width: 58ch; }
.an2-bens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; max-width: 560px; }
.an2-bens div { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #fff; }
.an2-bens .fa { font-size: 28px; flex: none; width: 34px; text-align: center; }
.an2-bens .fa-whatsapp { color: #25d366; }
.an2-bens .fa-star { color: #f5b301; }

.an2-vitrine { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); border-radius: 18px; padding: 18px; }
.an2-vitrine-tit { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 14px; }
.an2-vitrine-tit .fa { color: #f5b301; font-size: 30px; }
.an2-vitrine-corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 10px; }
.an2-card { display: block; background: #fff; color: #16213a !important; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); text-decoration: none !important; transition: transform .2s; }
.an2-card:hover { transform: translateY(-3px); }
.an2-card-img { position: relative; aspect-ratio: 16 / 9; background: #ddd center / cover no-repeat; }
.an2-card-img span { position: absolute; left: 10px; top: 10px; background: #f5b301; color: #3a2a00; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.an2-card-txt { padding: 10px 12px 12px; font-size: 12px; color: #5b6880; line-height: 1.5; }
.an2-card-txt b { display: block; color: #16213a; font-size: 14px; }
.an2-card-txt .an2-est { color: #f5b301; }
.an2-card-txt .an2-acoes { display: flex; gap: 14px; margin-top: 6px; font-weight: 600; color: #16213a; }
.an2-card-txt .an2-acoes .fa-whatsapp { color: #25d366; }
.an2-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.an2-mosaico span { border-radius: 10px; background: #333 center / cover no-repeat; min-height: 70px; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.an2-mosaico span:first-child { grid-row: span 2; }

.an2-pagina { padding-top: 34px; }
.an2-pagina .pl { margin-bottom: 26px; }

/* faixa de benefícios */
.an2-faixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #eef4fd; border-radius: 16px; padding: 22px 10px; margin: 6px 0 34px; }
.an2-faixa div { display: flex; gap: 14px; padding: 0 18px; border-left: 1px solid #d5e0f0; }
.an2-faixa div:first-child { border-left: 0; }
.an2-faixa .fa { font-size: 34px; color: #1663d6; flex: none; width: 38px; text-align: center; }
.an2-faixa b { display: block; color: #16213a; font-size: 14.5px; margin-bottom: 2px; }
.an2-faixa p { margin: 0; font-size: 13px; color: #5b6880; line-height: 1.45; }

/* dúvidas + ajuda */
.an2-duvidas { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-bottom: 40px; }
.an2-duvidas h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: #16213a; margin: 0 0 16px; }
.an2-duvidas h2::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: #d9102d; }
.an2-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; }
.an2-faq details { background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; }
.an2-faq summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 14px; color: #16213a; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.an2-faq summary::-webkit-details-marker { display: none; }
.an2-faq summary::after { content: "\f107"; font-family: FontAwesome; color: #74809a; transition: transform .2s; }
.an2-faq details[open] summary::after { transform: rotate(180deg); }
.an2-faq details[open] { border-color: #b9cdf0; box-shadow: 0 4px 14px rgba(22,99,214,.08); }
.an2-faq details p { margin: 0; padding: 0 16px 14px; font-size: 13.5px; color: #4a5770; line-height: 1.55; }
.an2-ajuda { background: #fff4f5; border: 1px solid #f6cdd2; border-radius: 16px; padding: 20px; }
.an2-ajuda-tit { display: flex; gap: 12px; margin-bottom: 14px; }
.an2-ajuda-tit .fa { font-size: 30px; color: #d9102d; }
.an2-ajuda-tit b { display: block; color: #d9102d; font-size: 17px; }
.an2-ajuda-tit p { margin: 2px 0 0; font-size: 13px; color: #4a5770; }
.an2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 14px; text-decoration: none !important; margin-top: 10px; }
.an2-btn-wa { background: #17a34a; color: #fff !important; }
.an2-btn-wa:hover { background: #128a3e; }
.an2-btn-mail { background: #fff; color: #16213a !important; border: 1.5px solid #cdd5e1; }
.an2-btn-mail:hover { border-color: #16213a; }

.an2-outros h2.an2-secao { font-size: 22px; font-weight: 800; color: #16213a; margin: 10px 0 6px; }

@media (max-width: 991px) {
	.an2-hero .container { grid-template-columns: minmax(0, 1fr); }
	.an2-bens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.an2-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
	.an2-faixa div:nth-child(3) { border-left: 0; }
	.an2-duvidas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.an2-hero h1 { font-size: 30px; }
	.an2-faq, .an2-faixa { grid-template-columns: minmax(0, 1fr); }
	.an2-faixa div { border-left: 0; }
	.an2-vitrine-corpo { grid-template-columns: minmax(0, 1fr); }
	.an2-mosaico { display: none; }
}

/* Topo: o tema pinta .container de branco e o clearfix do Bootstrap entraria na grade */
.an2-hero .container { background: transparent !important; box-shadow: none !important; }
.an2-hero .container::before, .an2-hero .container::after { content: none !important; display: none !important; }
/* O logo desta página é branco (feito para fundo escuro): faixa escura no menu, emendando com a imagem do topo */
/* Fundo do topo atrás do menu e da chamada (foto inteira até o alto da página, mostrando a rua) */
.an2-topo-bg { position: absolute; left: 0; right: 0; top: 0; height: 700px; z-index: 0; background: #0e1726 url(../images/bg_como-funciona.jpg) center 82% / cover no-repeat; }
.an2-topo-bg::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,14,26,.55) 0%, rgba(8,14,26,0) 32%), linear-gradient(90deg, rgba(8,14,26,.85) 0%, rgba(8,14,26,.55) 55%, rgba(8,14,26,.25) 100%); }
nav.navbar.header-style-a { background: transparent; margin-bottom: 0; position: relative; z-index: 2; }
nav.navbar.header-style-a > .container { background: transparent !important; }
#page-wrapper { position: relative; z-index: 1; background: transparent; }
.an2-hero { background: transparent !important; }
.an2-hero::before { display: none; }

/* O tema sobe o 1º container do #page-wrapper 300px (feito para a imagem antiga do topo); aqui ele vem depois da chamada */
#page-wrapper > .container.single-container { margin-top: 0 !important; padding-top: 34px !important; }