/* ==========================================================================
   Guia Sul Fluminense — o que muda em relação ao Portal Regional
   Cores do logo: grafite (fundo), vermelho (GUIA) e verde (Sul Fluminense).
   Botões de ação em verde-água, como no guia antigo.
   ========================================================================== */

:root {
	--grafite: #2a2f35;
	--grafite-escuro: #1f2328;
	--vermelho-gsf: #c62828;
	--vermelho-gsf-escuro: #9e1f1f;
	--verde-logo: #8cc63e;
	--verde-agua: #13a37e;
	--verde-agua-escuro: #0e8466;
	--cinza-barra: #eceef1;

	/* Variáveis do tema pai */
	--marinho: var(--vermelho-gsf);
	--marinho-escuro: var(--grafite-escuro);
	--marinho-claro: #e05252;
	--celeste: var(--verde-logo);
	--cabecalho: var(--grafite);
	--titulo: "Montserrat", var(--fonte);
}

h1, h2, h3,
.card__titulo, .secao__titulo, .lista__titulo, .materia__titulo,
.menu__lista a, .botao, .gsf-anuncie__botao { font-family: var(--titulo); }
.card__titulo { font-weight: 700; letter-spacing: -.005em; }

/* ---------- Topo: grafite com logo + banner ---------- */
.cabecalho { background: var(--grafite); }
.cabecalho__in { padding-top: 14px; padding-bottom: 14px; }
.marca img { max-height: 84px; width: auto; }
.cabecalho .anuncio--topo .anuncio__rotulo { color: #b0b8c1; }
/* Banner do topo centralizado no espaço que sobra ao lado do logo (como no guia antigo) */
.cabecalho .anuncio--topo { flex: 1; display: flex; flex-direction: column; align-items: center; margin: 0; }
.banner-seolucoes img { width: auto; max-height: 96px; border-radius: 4px; }

/* Menu em faixa clara, texto escuro, ativo em vermelho (como o guia antigo) */
.navegacao { background: var(--cinza-barra); border-bottom: 1px solid #dde1e6; }
.menu__lista { justify-content: flex-start; }
.menu__lista a { color: #2b3138; font-weight: 600; font-size: 15px; padding: 14px 13px; border-bottom-width: 3px; }
.menu__lista a:hover, .menu__lista .current-menu-item > a, .menu__lista .current-cat > a,
.menu__lista .current-menu-ancestor > a { color: var(--vermelho-gsf); border-bottom-color: var(--vermelho-gsf); }
/* "Guia Comercial" e "Anuncie" não são editorias: destaque em vermelho */
.menu__lista .menu-guia > a { color: var(--vermelho-gsf); font-weight: 800; }
/* Busca de notícias em vermelho: o leitor precisa ver que pode procurar a notícia que quiser */
.busca { background: #fff; border: 1.5px solid var(--vermelho-gsf); }
.busca input { color: var(--vermelho-gsf); font-weight: 600; }
.busca input::placeholder { color: var(--vermelho-gsf); opacity: .85; font-weight: 600; }
.busca button { color: var(--vermelho-gsf); }

/* Barra de busca de empresas */
.guia-barra { background: #f7f8fa; border-bottom: 1px solid var(--linha); }
.guia-barra__in { display: flex; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.guia-barra__rotulo { font-family: var(--titulo); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--vermelho-gsf); white-space: nowrap; }
.guia-barra input, .guia-barra select { font: inherit; font-size: 15px; border: 1px solid #d5dae0; border-radius: var(--raio); background: #fff; padding: 9px 12px; color: var(--texto); min-width: 0; }
.guia-barra input { flex: 1; }
.guia-barra select { flex: 0 1 240px; }
.guia-barra button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--raio); background: var(--verde-agua-escuro); color: #fff; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 18px; cursor: pointer; white-space: nowrap; }
.guia-barra button:hover { background: #0b6b53; }
.guia-barra button .icone { width: 16px; height: 16px; }

/* ---------- Home ---------- */
.gsf-topo { text-align: center; margin: 4px auto 26px; max-width: 860px; }
.gsf-topo__titulo { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; color: var(--grafite); letter-spacing: -.02em; line-height: 1.15; }
.gsf-topo__texto { margin: 8px 0 0; color: var(--texto-2); font-size: 16px; }
.gsf-topo::after { content: ""; display: block; width: 72px; height: 4px; margin: 14px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--vermelho-gsf) 50%, var(--verde-logo) 50%); }

.gsf-destaque { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gsf-destaque__lista { display: flex; flex-direction: column; gap: 16px; }
.gsf-destaque__lista .card { padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.gsf-destaque__lista .card:last-child { border-bottom: 0; padding-bottom: 0; }
.gsf-destaque__lista .card--lista .card__midia { flex-basis: 132px; }
.gsf-destaque__lista .card__titulo { font-size: 16px; }

/* Cabeçalho dos blocos: título centralizado em duas cores, como no guia antigo */
.gsf-bloco-cab { text-align: center; margin: 52px 0 26px; }
.gsf-bloco-cab__titulo { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--grafite); letter-spacing: -.02em; }
.gsf-bloco-cab__titulo span { color: var(--vermelho-gsf); }
.gsf-bloco-cab__sub { margin: 6px 0 0; color: var(--texto-2); font-size: 15px; }


/* Cores por editoria: tons do guia em vez do azul/roxo dos portais */
.cor-cidade { --cor: var(--vermelho-gsf); }
.cor-regiao { --cor: #2e7d32; }
.cor-policial { --cor: #37474f; }
.cor-estado { --cor: #6a4c93; }
.cor-esporte { --cor: #c43e00; } /* #e65100 dava 3,8:1 no branco (mínimo 4,5:1) */


.botao { background: var(--verde-agua-escuro); } /* texto branco: o verde claro não passa no contraste (3,2:1) */
.botao:hover { background: #0b6b53; }

/* Chamada "Anuncie" */
.gsf-anuncie { margin-top: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 12px; color: #e9ecef; background: var(--grafite) linear-gradient(120deg, rgba(198, 40, 40, .35), transparent 60%); }
.gsf-anuncie__titulo { color: #fff; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; }
.gsf-anuncie p { margin: 6px 0 0; }
.gsf-anuncie__botao { flex: none; background: var(--vermelho-gsf); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 999px; }
.gsf-anuncie__botao:hover { background: #fff; color: var(--vermelho-gsf); }

/* ---------- Home: seções no modelo do portal de Barra Mansa ---------- */
.gsf-colunas { margin-top: 8px; }
.gsf-colunas .secao:first-child { margin-top: 20px; }
/* Seção com 3 notícias com foto à direita (Polícia, Estado do Rio): fotos menores, mesma altura da grande */
.secao--tres .secao__lista { gap: 14px; }
.secao--tres .secao__lista .card { flex-direction: row; gap: 12px; align-items: flex-start; }
.secao--tres .secao__lista .card__midia { flex: 0 0 150px; }
.secao--tres .secao__lista .card__titulo { font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.secao--tres .secao__lista .card__data { font-size: 12px; }
.anuncio--lateral_meio.anuncio--vazio { width: 300px; height: 250px; margin: 0; }

/* A lateral ocupa a altura das seções: o banner alto (lateral__fixo) acompanha a rolagem até o fim */
.gsf-colunas .lateral { align-self: stretch; margin-top: 20px; }

/* Estado do Rio: o nome de cada região em destaque (fonte diferente das cidades) */
.bloco--estado .bloco__cat { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--cor); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.bloco--estado .bloco__cat a { color: #fff; }

/* Brasil e variedades compacto */
.bloco--compacto .bloco__col ul { gap: 8px; margin-top: 10px; }
.bloco--compacto .bloco__col .card__titulo { font-size: 14px; }

/* ---------- Vantagens de anunciar no guia ---------- */
.gsf-vantagens { scroll-margin-top: 16px; }
.gsf-vantagens__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: start; }
.gsf-vantagens__exemplo { margin: 0; padding: 24px; border-radius: 12px; background: var(--fundo-2); border: 1px dashed #c9cfd6; }
.gsf-vantagens__exemplo .guia-vit { max-width: 320px; margin: 0 auto; }
.gsf-vantagens__exemplo figcaption { font-size: 13px; line-height: 1.5; color: var(--texto-2); margin-top: 14px; text-align: center; }
.gsf-vantagens__botoes { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.gsf-vantagens__botoes .botao { min-width: 260px; text-align: center; padding: 12px 22px; }
.botao--contorno { background: transparent; color: var(--verde-agua-escuro); box-shadow: inset 0 0 0 2px var(--verde-agua); }
.botao--contorno:hover { background: var(--verde-agua); color: #fff; }
.gsf-vantagens__lead { font-size: 18px; line-height: 1.55; margin: 0 0 20px; color: var(--grafite); }
.gsf-vantagens__lista { margin: 0 0 28px; padding-left: 1.2em; display: grid; gap: 12px; line-height: 1.5; }
.gsf-vantagens__lista li::marker { color: var(--verde-agua); }

/* Bloco do guia na home: selo, título (H2) e texto com respiro */
.guia-home__selo { margin-bottom: 14px; }
.guia-home__titulo { margin: 0 0 14px; }
.guia-home__texto { max-width: 720px; margin-left: auto; margin-right: auto; }
.guia-home__grade { margin-top: 30px; }

/* Títulos dentro dos acordeões (H2/H3 para os buscadores) com a aparência do resumo */
.gsf-vantagens__mais-titulo, .gsf-faq__pergunta { font: inherit; color: inherit; margin: 0; letter-spacing: 0; }

/* Acordeão "Entenda todas as vantagens": cartão que abre o artigo */
.gsf-vantagens__mais { border: 1px solid var(--linha); border-left: 4px solid var(--vermelho-gsf); border-radius: 10px; background: #fff; }
.gsf-vantagens__mais > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--titulo); font-weight: 800; font-size: 17px; color: var(--grafite); }
.gsf-vantagens__mais > summary::-webkit-details-marker { display: none; }
.gsf-vantagens__mais > summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--vermelho-gsf); color: #fff; font-size: 20px; line-height: 1; }
.gsf-vantagens__mais[open] > summary::after { content: "−"; }
.gsf-vantagens__mais[open] > summary { border-bottom: 1px solid var(--linha); }

/* Artigo dentro do acordeão: leitura confortável, com respiro */
.gsf-artigo { padding: 8px 26px 26px; font-size: 16px; line-height: 1.75; color: #2b3138; }
.gsf-artigo p { margin: 0 0 1.1em; }
.gsf-artigo h3 { font-size: 19px; font-weight: 800; color: var(--grafite); margin: 1.8em 0 .6em; padding-left: 12px; border-left: 3px solid var(--verde-logo); }
.gsf-artigo ul { margin: 0 0 1.1em; padding-left: 1.2em; display: grid; gap: 8px; }
.gsf-artigo > :last-child { margin-bottom: 0; }

/* Dúvidas frequentes: separadas por uma linha bem afastada dos botões */
.gsf-faq { margin-top: 64px; padding-top: 32px; border-top: 3px solid var(--grafite); }
.gsf-faq__titulo { font-size: 22px; font-weight: 800; color: var(--grafite); margin: 0 0 18px; }
.gsf-faq__lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.gsf-faq__item { border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.gsf-faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.gsf-faq__item summary::-webkit-details-marker { display: none; }
.gsf-faq__item summary::after { content: "+"; flex: none; color: var(--vermelho-gsf); font-size: 22px; line-height: 1; }
.gsf-faq__item[open] summary::after { content: "−"; }
.gsf-faq__item[open] { border-color: var(--vermelho-gsf); }
.gsf-faq__item p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.65; color: #3a414a; }

/* ---------- Matéria e listas ---------- */
.materia__titulo { font-weight: 800; color: var(--grafite); }
.materia__corpo blockquote { border-left-color: var(--vermelho-gsf); }
.lista__titulo { font-weight: 800; }

/* ---------- Rodapé grafite, logo nas cores originais ---------- */
.rodape { background: var(--grafite-escuro); border-top: 4px solid var(--vermelho-gsf); }
.rodape__marca img { filter: none; max-height: 72px; }
.rodape__mais { color: var(--verde-logo) !important; }
.rodape__contato .icone { color: var(--verde-logo); }

/* ---------- Telas menores ---------- */
@media (max-width: 760px) {
	.secao--tres .secao__lista { grid-template-columns: minmax(0, 1fr); }
	.secao--tres .secao__lista .card__midia { flex-basis: 120px; }
			.marca img { max-height: 60px; }
	.menu__lista a { padding: 11px 11px; font-size: 14px; }
	.guia-barra__in { flex-wrap: wrap; }
	.guia-barra__rotulo { flex: 0 0 100%; }
	.guia-barra__in { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
	.guia-barra input { flex: 1 1 0; }
	.guia-barra select, .guia-barra label[for="guia-barra-seg"] { display: none; } /* celular: sem "Todos os segmentos" (ocupava uma linha inteira) */
	.guia-barra button { padding: 10px 14px; }
	.gsf-destaque { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.gsf-destaque__lista .card--lista .card__midia { flex-basis: 104px; }
	.gsf-bloco-cab { margin: 40px 0 20px; }
	.gsf-anuncie { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
	.gsf-vantagens__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.gsf-vantagens__botoes .botao { min-width: 0; width: 100%; }
	.gsf-artigo { padding: 4px 16px 18px; }
	.gsf-vantagens__mais > summary { padding: 16px; font-size: 16px; }
	.gsf-faq { margin-top: 44px; }
	.gsf-faq__lista { grid-template-columns: minmax(0, 1fr); }
}

/* Acessibilidade (PageSpeed): rótulo "Publicidade" legível no fundo branco e etiqueta
   da cidade com área de toque de pelo menos 24 px (fica colada no título da notícia). */
.anuncio__rotulo { color: #6b7280; }
.card__cat { display: inline-block; padding: 3px 0; min-height: 24px; margin-bottom: 4px; }

/* Botão ☰ das páginas do guia (só no celular): o menu de notícias e a busca de
   notícias ficam escondidos atrás dele e a busca de empresas sobe para o topo. */
.gsf-sanduiche { display: none; }
@media (max-width: 760px) {
	.cabecalho--guia .cabecalho__in { justify-content: space-between; }
	.cabecalho--guia .marca img { max-height: 52px; }
	.gsf-sanduiche { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .08); cursor: pointer; }
	.gsf-sanduiche span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
	.gsf-sanduiche[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.gsf-sanduiche[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.gsf-sanduiche[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.cabecalho--guia .navegacao { display: none; }
	.cabecalho--guia .navegacao.is-aberta { display: block; }
	.cabecalho--guia .navegacao.is-aberta .menu__lista { flex-direction: column; overflow: visible; }
	.cabecalho--guia .navegacao.is-aberta .menu__lista a { padding: 13px 16px; border-bottom: 1px solid #dde1e6; font-size: 15px; }
	.cabecalho--guia .navegacao.is-aberta .busca { margin: 12px 16px; }
}