/* Brand palette extracted from the approved Prohumanos identity. */
:root {
	--ph-ink: #231f20;
	--ph-sea: #627fc3;
	--ph-paper: #ffffff;
	--ph-mint: #eef3fb;
	--ph-lime: #fbc400;
	--ph-line: #d7d7d7;
	--ph-white: #ffffff;
	--ph-red: #c6212c;
	--ph-green: #388d55;
	--ph-grey: #777477;
	--ph-blue: #627fc3;
}

body {
	background: var(--ph-paper);
}

/* Responsive safety net: asegura que imagenes y bloques nunca desborden
   el ancho del dispositivo, y que el sitio siempre use el ancho completo
   del navegador sin bandas laterales artificiales.
   Se usa "overflow-x: clip" en lugar de "hidden": "hidden" convierte a
   html/body en un contenedor de scroll propio, lo que en Chrome desactiva
   el salto automático a los enlaces con ancla (#recursos, #diagnostico).
   "clip" recorta el desbordamiento horizontal igual, sin ese efecto
   secundario, y sin afectar el scroll vertical normal de la página. */
html, body {
	max-width: 100%;
	overflow-x: clip;
}

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}


.ph-topline {
	background: var(--ph-ink);
	color: #ffffff;
}

.ph-brand {
	color: var(--ph-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: 800;
	letter-spacing: -.07em;
	text-transform: uppercase;
}

.ph-brand span {
	color: var(--ph-ink);
}

.ph-brand i {
	background: var(--ph-red);
}

/* Use the approved horizontal logo rather than a recreated wordmark. */
.ph-brand {
	background: url("logo-horizontal.png") left center / contain no-repeat;
	display: block;
	font-size: 0;
	height: 3.25rem;
	overflow: hidden;
	width: min(20rem, 45vw);
}

.ph-brand > * {
	display: none;
}

@media (max-width: 800px) {
	.ph-brand {
		height: 2.6rem;
		width: min(15rem, 62vw);
	}
}

.ph-hero-art {
	overflow: hidden;
}

/* Header fijo: siempre visible al hacer scroll (pedido agosto 2026). */
.ph-header {
	background: #ffffff;
	min-height: 5.6rem;
	position: sticky;
	top: 0;
	z-index: 30;
}

/* Numbered labels guide the reading order; they should not compete with headings. */
.ph-number,
.ph-eyebrow,
.ph-card .ph-card-index {
	font-size: .62rem;
	letter-spacing: .14em;
}

.ph-section-title,
.ph-services-head h2 {
	font-size: clamp(2.15rem, 3.3vw, 3.55rem);
	line-height: 1;
}

.ph-intro {
	gap: 3.25rem;
}

.ph-coverage-head {
	align-items: baseline;
	gap: 3rem;
}

/* Proof points become a distinct brand band instead of a pale utility row. */
.ph-trust {
	background: var(--ph-ink);
	border-bottom: .35rem solid var(--ph-lime);
	box-sizing: border-box;
	gap: 2.4rem;
	justify-content: flex-start;
	min-height: 8.25rem;
	padding: 1.8rem 10vw;
}

.ph-trust small {
	background: var(--ph-lime);
	color: var(--ph-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	padding: .65rem .8rem;
}

.ph-trust span {
	align-items: center;
	color: #ffffff;
	display: inline-flex;
	font-family: Georgia, serif;
	font-size: clamp(1.15rem, 1.5vw, 1.65rem);
	gap: .65rem;
}

.ph-trust span:before {
	background: var(--ph-blue);
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: .48rem;
	width: .48rem;
}

.ph-trust span:nth-of-type(2):before { background: var(--ph-green); }
.ph-trust span:nth-of-type(3):before { background: var(--ph-lime); }
.ph-trust span:nth-of-type(4):before { background: var(--ph-red); }
.ph-trust span:nth-of-type(5):before { background: var(--ph-blue); }

/* A chapter marker creates visual rhythm before the services section. */
.ph-intro {
	align-items: center;
	background: #eef3fb;
	gap: 5rem;
	grid-template-columns: minmax(14rem, .7fr) 2fr;
	min-height: 29rem;
	padding-bottom: 5.5rem;
	padding-top: 5.5rem;
	position: relative;
}

.ph-intro:after {
	border: 1px solid rgba(98, 127, 195, .45);
	border-radius: 50%;
	content: '';
	height: 23rem;
	left: -8rem;
	position: absolute;
	top: -12rem;
	width: 23rem;
}

.ph-chapter {
	border-left: .45rem solid var(--ph-red);
	padding: .7rem 0 .7rem 1.25rem;
	position: relative;
	z-index: 1;
}

.ph-chapter span {
	color: var(--ph-blue);
	display: block;
	font-family: Georgia, serif;
	font-size: clamp(6rem, 10vw, 10rem);
	font-weight: 700;
	letter-spacing: -.1em;
	line-height: .72;
}

.ph-chapter p {
	color: var(--ph-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	margin: 1.65rem 0 0;
	text-transform: uppercase;
}

.ph-services-chapter {
	align-items: baseline;
	display: flex;
	gap: 1.15rem;
	margin-bottom: 1.65rem;
}

.ph-services-chapter span {
	color: var(--ph-red);
	font-family: Georgia, serif;
	font-size: clamp(4.5rem, 7vw, 7.5rem);
	font-weight: 700;
	letter-spacing: -.1em;
	line-height: .65;
}

.ph-services-chapter p {
	color: var(--ph-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	margin: 0;
	text-transform: uppercase;
}

/* Alternating service stories make different photo compositions feel intentional. */
.ph-service-rows {
	display: grid;
	gap: 1.25rem;
}

/* Shared chapter marker for 01, 02 and 03. */
.ph-section-marker {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin: 0 0 2.25rem;
}

.ph-section-marker span {
	color: var(--ph-blue);
	font-family: Georgia, serif;
	font-size: clamp(5.5rem, 8vw, 8.5rem);
	font-weight: 700;
	letter-spacing: -.1em;
	line-height: .65;
}

.ph-section-marker p {
	color: var(--ph-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	margin: 0;
	text-transform: uppercase;
}

.ph-intro .ph-section-marker {
	margin: 0;
}

.ph-coverage-head .ph-section-marker {
	flex: 0 0 17rem;
	margin: 0;
}

/* The approach chapter is brighter and now uses the actual team photograph. */
.ph-process {
	background: #eef3fb;
	color: var(--ph-ink);
}

.ph-process-art {
	background: linear-gradient(180deg, rgba(98, 127, 195, .08), rgba(35, 31, 32, .12)), url("images/acompanamiento-especialista-ruta-decision-prohumanos.webp") center 44% / cover no-repeat;
}

.ph-process-art:before {
	display: none;
}

.ph-process-copy {
	background: #ffffff;
	padding-left: 12%;
	padding-right: 12%;
}

.ph-process-copy .ph-section-marker {
	margin-bottom: 2.2rem;
}

.ph-process-copy h2 {
	color: var(--ph-ink);
}

.ph-process-copy h2 em {
	color: var(--ph-blue);
}

.ph-process-copy > p,
.ph-steps span {
	color: #4d686e;
}

.ph-steps li {
	border-top-color: #cbd8df;
}

.ph-steps li:before {
	color: var(--ph-red);
}

.ph-service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 29rem;
}

.ph-service-image {
	background: center / cover no-repeat;
	min-height: 29rem;
}

.ph-service-content {
	align-items: flex-start;
	background: #eef3fb;
	border-left: .45rem solid var(--ph-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.4rem, 5vw, 5.5rem);
}

.ph-service-content > span {
	color: var(--ph-blue);
	font-family: Arial, Helvetica, sans-serif;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .13em;
}

.ph-service-content h3 {
	color: var(--ph-ink);
	font-family: Georgia, serif;
	font-size: clamp(2.15rem, 3.5vw, 4rem);
	letter-spacing: -.065em;
	line-height: .96;
	margin: 1.55rem 0 1rem;
}

.ph-service-content p {
	color: #4d686e;
	font-size: 1rem;
	line-height: 1.5;
	max-width: 25rem;
	margin: 0 0 2rem;
}

.ph-service-content a {
	border-bottom: 1px solid currentColor;
	color: var(--ph-ink);
	font-size: .82rem;
	font-weight: 800;
	padding-bottom: .2rem;
	text-decoration: none;
}

.ph-service-row.reverse .ph-service-image { order: 2; }
.ph-service-row.reverse .ph-service-content { border-left: 0; border-right: .45rem solid var(--ph-green); order: 1; }
.service-polygraph .ph-service-content { background: #edf5ef; }
.service-selection .ph-service-content { background: #fff8df; border-left-color: var(--ph-lime); }
.service-investigation .ph-service-content { background: #f9ecee; border-right-color: var(--ph-red); }

.service-confidence .ph-service-image { background-image: url("images/estudios-confiabilidad-validacion-personal-prohumanos.webp"); }
.service-polygraph .ph-service-image { background-image: url("images/prueba-poligrafo-profesional-confidencial-prohumanos.webp"); }
.service-selection .ph-service-image { background-image: url("images/seleccion-evaluacion-talento-empresarial-prohumanos.webp"); }
.service-investigation .ph-service-image { background-image: url("images/investigacion-corporativa-validacion-proveedores-prohumanos.webp"); }

.ph-intro > div:last-child {
	position: relative;
	z-index: 1;
}

/* Give the real hero photo the visual weight it needs. */
.ph-hero {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3.5vw;
}

.ph-hero-art {
	height: 32rem;
}

.ph-portrait {
	height: 28rem;
	margin-top: 1rem;
	width: 100%;
}

/* The red numbered badge was decorative noise, not useful information. */
.ph-art-tag {
	display: none;
}

.ph-art-card {
	bottom: -.7rem;
	box-shadow: 0 1.1rem 2.4rem rgba(35, 31, 32, .2);
	font-size: 1.3rem;
	letter-spacing: -.045em;
	line-height: 1.04;
	padding: 1.35rem;
	width: 16.5rem;
}

.ph-proof {
	align-items: center;
	gap: 1.2rem;
	max-width: 31rem;
}

.ph-proof strong {
	color: var(--ph-ink);
	font-size: clamp(2.9rem, 4.2vw, 4.5rem);
	line-height: .85;
	white-space: nowrap;
}

.ph-proof span {
	font-size: .92rem;
	max-width: 12.5rem;
}

@media (max-width: 800px) {
	.ph-trust {
		align-items: center;
		gap: 1.25rem;
		padding: 1.3rem 7vw;
	}

	.ph-trust span {
		font-size: 1rem;
	}

	.ph-intro {
		gap: 2.5rem;
		min-height: 0;
	}

	.ph-chapter span {
		font-size: 7rem;
	}

	.ph-hero-art {
		height: 28rem;
	}

	.ph-portrait {
		height: 25rem;
	}
}

/* Keep the proof band dark after the shared map/trust background rule. */
.ph-trust {
	background: var(--ph-ink);
}

/* Final process chapter treatment overrides the previous dark placeholder. */
.ph-process {
	background: #eef3fb;
	color: var(--ph-ink);
}

.ph-process-art {
	background: linear-gradient(180deg, rgba(98, 127, 195, .08), rgba(35, 31, 32, .12)), url("images/acompanamiento-especialista-ruta-decision-prohumanos.webp") center 44% / cover no-repeat;
}

@media (max-width: 800px) {
	.ph-service-row {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ph-service-image {
		min-height: 22rem;
	}

	.ph-service-row.reverse .ph-service-image,
	.ph-service-row.reverse .ph-service-content {
		order: initial;
	}

	.ph-service-row.reverse .ph-service-content {
		border-left: .45rem solid var(--ph-green);
		border-right: 0;
	}

	.service-investigation .ph-service-content {
		border-left-color: var(--ph-red);
	}
}

.ph-portrait {
	background: linear-gradient(180deg, rgba(35, 31, 32, 0) 55%, rgba(35, 31, 32, .16) 100%), url("images/liderazgo-femenino-decisiones-confiables-prohumanos.webp") center 34% / cover no-repeat;
	box-shadow: 1rem 1rem 0 rgba(98, 127, 195, .16);
	width: 88%;
}

.ph-portrait:before,
.ph-portrait:after,
.ph-art-lines {
	display: none;
}

.ph-art-card {
	background: var(--ph-yellow, #fbc400);
	box-shadow: .8rem .8rem 0 rgba(35, 31, 32, .15);
}

.ph-art-tag {
	background: var(--ph-red);
}

.ph-art-tag small,
.ph-card.dark .ph-card-index,
.ph-card.feature .ph-card-index,
.ph-process-copy h2 em,
.ph-steps li:before,
.ph-contact h2 em {
	color: var(--ph-lime);
}

.ph-card.feature {
	background: var(--ph-sea);
}

.ph-card.dark,
.ph-process,
.ph-contact {
	background: var(--ph-ink);
}

.ph-process-art {
	background: radial-gradient(circle at 45% 30%, #ffffff 0 2%, transparent 2.4%), radial-gradient(circle at 69% 44%, var(--ph-lime) 0 1.4%, transparent 1.8%), linear-gradient(135deg, var(--ph-blue, #627fc3), var(--ph-ink));
}

.ph-trust,
.ph-map {
	background: #eef3fb;
}

.ph-map:before {
	background: var(--ph-green);
}

.ph-quote {
	background: var(--ph-lime);
}

/* Keep the proof band dark after the shared map/trust background rule. */
.ph-trust {
	background: var(--ph-ink);
}


/* Fix: el header sticky (.ph-header) no se quedaba fijo al hacer scroll.
   Causa: WordPress envuelve el header en un <header class="wp-block-template-part">
   que mide justo lo mismo que su contenido (topline + header), así que el hijo
   sticky se queda sin "espacio" dentro de su contenedor casi de inmediato.
   Solución: el contenedor también se vuelve sticky, así su punto de referencia
   pasa a ser el alto completo de la página, dando espacio real para pegarse. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 29;
}