/* Bloque de texto al pie de las categorías y grupos del menú (01/10/2026).
   Lo carga solo views/search.ejs cuando hay bloque (página 1 de una categoría
   o grupo). Va debajo de la grilla y de la paginación.
   02/10/2026: formato de /about/faq (about.css) — título grande, texto,
   preguntas desplegables y los banners verticales a los costados desde 1280 px.
   Todo va bajo .Listing-Seo: about.css usa clases genéricas (.Banner, .Content)
   que no se pueden cargar en el listado. */
.Listing-Seo{
	display: flex;
	align-items: flex-start;
	gap: 80px;
	margin: 50px 0 10px;
	padding: 40px 0 0;
	border-top: 1px solid #e6e4dd;
	font-family: 'Poppins';
	color: #000000;
}
.Listing-Seo .Listing-Seo-Content{
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 21px;
}
.Listing-Seo .Listing-Seo-Title{
	font-family: 'Poppins';
	font-size: 40px;
	font-weight: 600;
	line-height: 110%;
	margin: 0;
	color: #230404;
}
.Listing-Seo .Listing-Seo-Text p{
	font-size: 14px;
	line-height: 150%;
	margin: 0 0 10px;
}
.Listing-Seo .Listing-Seo-Text > :last-child{
	margin-bottom: 0;
}
/* Separadores entre el texto, los links (Guía / Más en …) y las preguntas. */
.Listing-Seo .Listing-Seo-Sep{
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid #e6e4dd;
}
.Listing-Seo .Listing-Seo-Text .Listing-Seo-Sep{
	margin: 16px 0;
}
.Listing-Seo a{
	color: #230404;
	text-decoration: underline;
}
.Listing-Seo .Listing-Seo-Links{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 14px;
	line-height: 150%;
}
.Listing-Seo .Listing-Seo-Links-Label{
	font-weight: 600;
}

/* Preguntas frecuentes: <details> nativo con el aspecto de .Question-Container
   de about.css (se abre con teclado y lo leen los lectores de pantalla). */
.Listing-Seo .Listing-Seo-Faq{
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.Listing-Seo .Listing-Seo-Faq-Item{
	padding: 19px 24px;
	background: #FFFFFF;
	border: 1px solid #767676;
	border-radius: 20px;
}
.Listing-Seo .Listing-Seo-Faq-Item summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	cursor: pointer;
}
.Listing-Seo .Listing-Seo-Faq-Item summary::-webkit-details-marker{
	display: none;
}
.Listing-Seo .Listing-Seo-Faq-Question{
	margin: 0;
	font-family: 'Poppins';
	font-size: 20px;
	font-weight: 600;
	line-height: 110%;
	color: #000000;
}
.Listing-Seo .Listing-Seo-Faq-Item svg{
	flex: none;
	transition: transform 0.2s linear;
}
.Listing-Seo .Listing-Seo-Faq-Item[open] svg{
	transform: rotateZ(45deg);
}
.Listing-Seo .Listing-Seo-Faq-Answer{
	padding-top: 20px;
}
.Listing-Seo .Listing-Seo-Faq-Answer p{
	font-size: 14px;
	line-height: 150%;
	margin: 0 0 10px;
}
.Listing-Seo .Listing-Seo-Faq-Answer p:last-child{
	margin-bottom: 0;
}
/* Animación al abrir donde el navegador la soporta (Chrome/Edge); en el resto
   se abre de golpe. */
@supports (interpolate-size: allow-keywords){
	.Listing-Seo .Listing-Seo-Faq-Item{
		interpolate-size: allow-keywords;
	}
	.Listing-Seo .Listing-Seo-Faq-Item::details-content{
		height: 0;
		overflow: clip;
		transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
	}
	.Listing-Seo .Listing-Seo-Faq-Item[open]::details-content{
		height: auto;
	}
}

/* Banners verticales fijos, como en /about/faq: alto de pantalla (menos el menú),
   se quedan quietos y el contenido corre por el medio. La imagen se ajusta con
   cover. */
.Listing-Seo .Listing-Seo-Banner{
	flex: none;
	width: 360px;
	position: sticky;
	top: calc(var(--height-One-Bit-Nav) + 20px);
	height: calc(100vh - var(--height-One-Bit-Nav) - 40px);
	max-height: 940px;
}
.Listing-Seo .Listing-Seo-Banner a{
	display: block;
	height: 100%;
}
.Listing-Seo .Listing-Seo-Banner img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	background-color: grey;
}

@media (max-width: 1279px){
	.Listing-Seo .Listing-Seo-Banner{
		display: none;
	}
	.Listing-Seo .Listing-Seo-Title{
		font-size: 32px;
	}
	.Listing-Seo .Listing-Seo-Text p,
	.Listing-Seo .Listing-Seo-Faq-Answer p{
		font-size: 15px;
	}
}
@media (min-width: 1280px) and (max-width: 1439px){
	.Listing-Seo{
		gap: 40px;
	}
	.Listing-Seo .Listing-Seo-Banner{
		width: 260px;
	}
}
@media (min-width: 1440px) and (max-width: 1919px){
	.Listing-Seo{
		gap: 40px;
	}
	.Listing-Seo .Listing-Seo-Banner{
		width: 300px;
	}
}
@media (max-width: 767px){
	.Listing-Seo{
		margin-top: 28px;
		padding-top: 24px;
	}
	.Listing-Seo .Listing-Seo-Content{
		gap: 16px;
	}
	.Listing-Seo .Listing-Seo-Title{
		font-size: 26px;
	}
	.Listing-Seo .Listing-Seo-Faq-Item{
		padding: 14px 16px;
		border-radius: 16px;
	}
	.Listing-Seo .Listing-Seo-Faq-Question{
		font-size: 17px;
		line-height: 125%;
	}
	.Listing-Seo .Listing-Seo-Faq-Item svg{
		width: 34px;
		height: 34px;
	}
	.Listing-Seo .Listing-Seo-Faq-Answer{
		padding-top: 14px;
	}
}