/**
 * Página: Servicios de Administración
 * Apegado al diseño de referencia: barra de título azul, contenido en blanco con texto negro, acentos verde lima en imágenes.
 */
.page-administracion,
.page-corretaje {
	padding-top: 80px;
	padding-bottom: 3rem;
}

.adm-wrapper {
	width: calc(100% - 40px);
	max-width: var(--max-width, 1055px);
	margin: 0 auto;
}

/* ---- Sección 1: barra de título azul (ancho del contenedor) ---- */
.adm-title-bar {
	background: #12183b;
	color: #fff;
	padding: 1rem 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	box-sizing: border-box;
	margin: 1.5rem 0;
}

.adm-title {
	font: 700 26px/1.25 var(--font-main);
	color: #fff;
	margin: 0;
	letter-spacing: -0.02em;
	flex: 1;
	min-width: 0;
}

.adm-title-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	filter: brightness(0) invert(1);
}

/* Cuerpo de sección en blanco (debajo de la barra azul) */
/* Fondos por artículo: 1 #FFF, 2 #effbff, 3 #eee, 4 #effbff — solo ancho del contenedor */
.adm-section-body-white {
	padding: 0;
}

.adm-section-body-white .adm-wrapper {
	background: #fff;
	padding: 2.5rem 20px;
	box-sizing: border-box;
}

.adm-section-all-white {
	padding: 2.5rem 0;
}

/* Fondo en el wrapper (mismo ancho que el contenido), no al 100% */
.page-administracion .adm-section:nth-of-type(2),
.page-administracion .adm-section:nth-of-type(3),
.page-administracion .adm-section:nth-of-type(4) {
	padding: 0;
	margin-top: 4rem;
}

.page-administracion .adm-section:nth-of-type(2) .adm-wrapper {
	background: #effbff;
	padding: 2.5rem 20px;
	box-sizing: border-box;
}

.page-administracion .adm-section:nth-of-type(3) .adm-wrapper {
	background: #eee;
	padding: 2.5rem 20px;
	box-sizing: border-box;
}

.page-administracion .adm-section:nth-of-type(4) .adm-wrapper {
	background: #effbff;
	padding: 2.5rem 20px;
	box-sizing: border-box;
}

.adm-section-body-white .adm-list li,
.adm-section-all-white .adm-list li {
	color: #444;
}

.adm-section-inner {
	padding: 0;
}

/* ---- Artículo: grid texto + imagen ---- */
.adm-article {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.adm-article-text-left .adm-content {
	order: 1;
}

.adm-article-text-left .adm-media {
	order: 2;
}

.adm-article-image-left .adm-media {
	order: 1;
}

.adm-article-image-left .adm-content {
	order: 2;
}

.adm-article-sello .adm-content {
	order: 1;
}

.adm-article-sello .adm-media {
	order: 2;
}

/* Listas: texto negro sobre blanco */
.adm-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.adm-list li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 0.6rem;
	font-size: 15px;
	line-height: 1.45;
	color: #444;
}

.adm-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent, #c3ef0f);
}

/* Sección 4: etiqueta + lista en línea de roles */
.adm-list-label {
	font: 600 15px var(--font-main);
	color: #444;
	margin: 0 0 0.5rem;
}

.adm-list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-bottom: 1rem;
}

.adm-list-inline li {
	margin-bottom: 0;
}

/* Botón CTA: verde lima, texto blanco (como en referencia) */
.adm-btn {
	display: inline-block;
	padding: 12px 28px;
	font: 600 15px var(--font-main);
	text-decoration: none;
	background: var(--color-accent, #c3ef0f);
	color: #0a193a;
	border: none;
	border-radius: 6px;
	transition: background 0.2s;
}

.adm-btn:hover {
	background: #b5e00d;
	text-decoration: none;
	color: #0a193a;
}

/* Imágenes con acentos rectangulares verde lima (superpuestos a los lados) */
.adm-media {
	position: relative;
}

.adm-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.adm-media-bars {
	position: relative;
	padding: 0 18px;
}

.adm-media-bars::before,
.adm-media-bars::after {
	content: "";
	position: absolute;
	top: 8%;
	bottom: 8%;
	width: 14px;
	background: var(--color-accent, #c3ef0f);
	border-radius: 4px;
	z-index: 1;
}

.adm-media-bars::before {
	left: 0;
}

.adm-media-bars::after {
	right: 0;
}

/* Bloque Sello Verde OK: imagen administracion-3.webp con barras lima */
.adm-sello-block {
	padding: 20px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.adm-sello-block img {
	width: 100%;
	height: auto;
	max-width: 300px;
	display: block;
}

/* Responsive */
@media (max-width: 900px) {
	.adm-article {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.adm-article-text-left .adm-content,
	.adm-article-text-left .adm-media,
	.adm-article-image-left .adm-media,
	.adm-article-image-left .adm-content,
	.adm-article-sello .adm-content,
	.adm-article-sello .adm-media {
		order: 0;
	}

	.adm-media {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	.adm-sello-block {
		order: 2;
	}

	.adm-list-inline {
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.adm-title-bar {
		padding: 1.2rem;
	}

	.adm-section-body-white,
	.adm-section-all-white {
		padding: 1.75rem 0;
	}

	.adm-title-bar {
		flex-wrap: wrap;
	}

	.adm-title {
		font-size: 22px;
	}

	.adm-title-icon {
		width: 48px;
		height: 48px;
	}

	.adm-list li {
		font-size: 14px;
	}

	.adm-media-bars::before,
	.adm-media-bars::after {
		width: 10px;
		top: 5%;
		bottom: 5%;
	}
}