/* ==========================================================================
   Página "Experiencia" (diseño 03_Areas_de_practica.pdf)
   Medidas a 1440 px, escaladas con clamp() (valor/14.4 = vw).
   Reutiliza de ppo-firma.css: .ppo-lead, textura de fondo, disolución de <p>.
   ========================================================================== */

.ppo-area-grid > p:empty,
.ppo-sol__grid > p:empty,
.et_pb_text .ppo-area-grid > p:empty,
.et_pb_text .ppo-sol__grid > p:empty {
	display: none !important;
}
.ppo-sol__grid > p:not([class]),
.ppo-count-head > p:not([class]),
.et_pb_text .ppo-sol__grid > p:not([class]) {
	display: contents;
}

/* ---------- Título con número: "12 Áreas de práctica", "09 Sectores" ---------- */

.ppo-count-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: clamp(16px, 3.2vw, 46px);
	margin: 0;
	font-family: 'Barlow', sans-serif;
	font-weight: 300;
	color: #FFF5E9;
	line-height: 1;
}
.ppo-count-head__num {
	position: relative;
	font-size: clamp(96px, 13.26vw, 191px);
	line-height: .9;
	padding-bottom: clamp(14px, 1.4vw, 20px);
}
/* Subrayado bajo el número, igual que los títulos de sección */
.ppo-count-head__num::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(120px, 17vw, 245px);
	height: clamp(4px, .42vw, 6px);
	background: #00A7E2;
}
.ppo-count-head__label {
	font-size: clamp(44px, 7.6vw, 110px);
}
.ppo-count-head--light .ppo-count-head__num::after {
	background: #FFF5E9;
}

/* ---------- 1 · Hero ---------- */

.ppo-hero--exp .ppo-hero__overlay {
	background: linear-gradient(90deg, rgba(0, 167, 226, .12) 0%, rgba(0, 167, 226, 0) 70%);
}
.ppo-hero--exp .ppo-hero__title {
	position: relative;
	font-weight: 300;
	padding-bottom: 18px;
}
.ppo-hero--exp .ppo-hero__title::after {
	content: "";
	position: absolute;
	left: -.06em;
	bottom: 0;
	width: clamp(120px, 17vw, 245px);
	height: clamp(4px, .42vw, 6px);
	background: #FFF5E9;
}
@media (min-width: 768px) {
	.ppo-hero--exp .ppo-hero__slide {
		min-height: clamp(640px, 71.7vw, 1033px);
	}
	.ppo-hero--exp .ppo-hero__content {
		padding-top: clamp(150px, 22vw, 316px);
	}
	.ppo-hero--exp .ppo-hero__title {
		font-size: clamp(72px, 9.2vw, 132px);
		line-height: 1;
		padding-bottom: clamp(18px, 2.2vw, 32px);
	}
	.ppo-hero--exp .ppo-hero__subtitle {
		font-size: clamp(17px, 1.8vw, 26px);
		line-height: 1.54;
		max-width: 34em;
		margin-top: clamp(32px, 4vw, 58px);
	}
}

/* ---------- 2 · Áreas de práctica ---------- */

.et_pb_section.ppo-areas {
	padding: 72px 0 72px !important;
	background-color: #003360 !important;
}
.ppo-areas .ppo-lead {
	max-width: 19.5em;
}
.ppo-area-grid {
	list-style: none !important;
	margin: 48px 0 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 12px;
}
.ppo-area-card {
	padding: 0 !important;
}
.ppo-area-card a {
	display: block;
	color: #FFF5E9 !important;
	text-decoration: none;
}
.ppo-area-card__media {
	display: block;
	aspect-ratio: 398 / 445;
	overflow: hidden;
	background: #003360;
}
.ppo-area-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: transform .4s ease;
}
.ppo-area-card a:hover .ppo-area-card__media img {
	transform: scale(1.04);
}
.ppo-area-card__name {
	display: block;
	margin-top: 16px;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
	font-size: clamp(17px, 2.08vw, 30px);
	line-height: 1.15;
	max-width: 12em;
}
.ppo-area-card a:hover .ppo-area-card__name {
	color: #00A7E2;
}

@media (min-width: 768px) {
	.et_pb_section.ppo-areas {
		padding: clamp(96px, 11.4vw, 164px) 0 clamp(96px, 10vw, 144px) !important;
	}
	.ppo-area-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: clamp(64px, 11vw, 158px);
		margin-top: clamp(80px, 16.6vw, 239px) !important;
	}
	.ppo-area-card__name {
		margin-top: clamp(14px, 1.5vw, 22px);
	}
}

/* ---------- 3 · Sectores ---------- */

.et_pb_section.ppo-sectors {
	position: relative;
	z-index: 1;
	padding: 0 0 72px !important;
	/* En el diseño, el fondo de Sectores son las líneas diagonales de la escalera */
	background-color: #FFFFFF !important;
	background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url('/wp-content/uploads/2026/09/reconocimiento-fondo.jpg') !important;
	background-size: cover, cover !important;
	background-position: center, right top !important;
	background-repeat: no-repeat, no-repeat !important;
}
.ppo-sectors__box {
	background: #00A7E2;
	padding: 56px 24px 56px;
}
.ppo-sectors__box .ppo-lead {
	max-width: 19.5em;
}
.ppo-sectors .ppo-link-list {
	margin-top: 48px;
}

@media (min-width: 768px) {
	.et_pb_section.ppo-sectors {
		padding-bottom: clamp(96px, 11.4vw, 164px) !important;
	}
	/* Caja cian: desde el borde izquierdo de la pantalla hasta la columna 8,
	   montada 91 px sobre la sección navy de arriba */
	.ppo-sectors__box {
		width: calc(max(24px, (100% - 1280px) / 2 + 24px) + (min(100%, 1280px) - 24px) * 8 / 12 - 24px);
		margin-top: clamp(-91px, -6.3vw, -40px);
		padding: clamp(96px, 17.5vw, 252px) 40px clamp(80px, 10.5vw, 151px) max(24px, (100% - 1280px) / 2 + 24px);
		box-sizing: border-box;
	}
	.ppo-sectors .ppo-link-list {
		margin-top: clamp(64px, 9.3vw, 134px);
	}
}

/* ---------- Lista de enlaces con chevron (Sectores, Soluciones) ---------- */

.ppo-link-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.ppo-link-list ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ppo-link-list li {
	padding: 0 !important;
	border-bottom: 1px solid #003360;
}
.ppo-link-list li:last-child {
	border-bottom-width: 2px;
}
.ppo-link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(14px, 2vw, 29px) 4px clamp(14px, 2vw, 29px) 4px;
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: clamp(18px, 2.08vw, 30px);
	line-height: 1;
	color: #003360 !important;
	text-decoration: none;
}
.ppo-link-list a::after {
	content: "";
	flex: 0 0 auto;
	width: clamp(10px, .95vw, 14px);
	height: clamp(10px, .95vw, 14px);
	margin-right: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.ppo-link-list a:hover {
	color: #00A7E2 !important;
}
.ppo-link-list--cols-2 ul + ul li:first-child {
	border-top: 0;
}

@media (min-width: 768px) {
	.ppo-link-list--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(40px, 6.6vw, 95px);
		align-items: start;
	}
}

/* ---------- 4 · Soluciones ---------- */

/* Arena arriba; los últimos 600 px (a 1440) en crema, para que la foto
   "salga" de la sección como en el diseño */
.et_pb_section.ppo-sol {
	padding: 72px 0 72px !important;
	background: #D2B48C !important;
}
.ppo-sol .ppo-section-title {
	color: #003360 !important;
}
.ppo-sol .ppo-section-title::after {
	background: #003360 !important;
}
.ppo-sol__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}
.ppo-sol__photo {
	display: block;
	width: 100%;
	aspect-ratio: 602 / 822;
	object-fit: cover;
}

@media (min-width: 768px) {
	.et_pb_section.ppo-sol {
		padding: clamp(110px, 16.5vw, 238px) 0 clamp(80px, 10.5vw, 151px) !important;
		background: linear-gradient(to bottom, #D2B48C calc(100% - clamp(300px, 41.6vw, 600px)), #FFF5E9 calc(100% - clamp(300px, 41.6vw, 600px))) !important;
	}
	.ppo-sol .ppo-section-title,
	.et_pb_text .ppo-sol .ppo-section-title {
		font-size: clamp(64px, 6.9vw, 100px) !important;
	}
	.ppo-sol__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 0;
		align-items: start;
		margin-top: clamp(24px, 3.8vw, 55px);
	}
	.ppo-sol__grid .ppo-lead {
		grid-column: 1 / 7;
		grid-row: 1;
		margin: 0 !important;
		max-width: 12.6em;
	}
	.ppo-sol__photo {
		grid-column: 1 / 7;
		grid-row: 2;
		margin-top: clamp(64px, 10.9vw, 157px);
		width: 97.5%;
	}
	.ppo-sol__grid .ppo-link-list {
		grid-column: 8 / 13;
		grid-row: 1 / 3;
		margin-top: -26px;
	}
}

/* ---------- 5 · Hablemos ---------- */

.et_pb_section.ppo-talk {
	padding: 72px 0 80px !important;
	background-color: #00A7E2 !important;
}
.ppo-talk .ppo-section-title::after {
	background: #FFF5E9 !important;
}
.ppo-talk .ppo-meet__link {
	font-size: clamp(34px, 5.8vw, 84px);
}
@media (min-width: 768px) {
	.et_pb_section.ppo-talk {
		padding: clamp(96px, 11.8vw, 170px) 0 clamp(80px, 9.7vw, 140px) !important;
	}
	.ppo-talk .ppo-section-title,
	.et_pb_text .ppo-talk .ppo-section-title {
		font-size: clamp(72px, 9.2vw, 132px) !important;
	}
}