/*
 * Front page (prototype: index.html). Exact replica: every value is the prototype's, with the
 * prototype class each rule replicates named in its comment.
 *
 * Decorative images (service and sector icons, monograms, patterns, the watermark) are drawn
 * with pseudo-elements. index.html has its own variant of some shared components (eyebrow and
 * buttons below 640px, the closing .cta layout): those overrides are scoped to .pitalua-inicio,
 * the class of this page's <main>.
 */

/* ================================================================ Hero */

/* .hero */
.pitalua-inicio-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 620px, 82vh, 760px );
	overflow: hidden;
}

/* .hero-pattern */
.pitalua-inicio-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp( 420px, 50vw, 720px );
	height: 100%;
	background: url( "../../img/decor/patron-claro.webp" ) center right / 300px repeat;
	opacity: 0.09;
	-webkit-mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0.9 ) 15%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	mask-image: linear-gradient( to left, rgba( 0, 0, 0, 0.9 ) 15%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	pointer-events: none;
}

/* .hero-monogram */
.pitalua-inicio-hero::after {
	content: "";
	position: absolute;
	right: -20px;
	bottom: -180px;
	width: min( 44vw, 560px );
	aspect-ratio: 1085 / 1200;
	background: url( "../../img/decor/monograma-claro.webp" ) center / contain no-repeat;
	opacity: 0.05;
	pointer-events: none;
}

/* .hero-inner */
.pitalua-inicio-hero__rejilla {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.24fr 0.76fr;
	gap: clamp( 36px, 5vw, 68px );
	align-items: center;
	padding: clamp( 120px, 14vh, 150px ) 0 clamp( 56px, 7vh, 76px );
}

/* .hero h1 */
.pitalua-inicio-hero h1 {
	max-width: 760px;
	margin: 0 0 24px;
	font-size: clamp( 2.35rem, 3.8vw, 3.65rem );
}

/* .hero h1 span */
.pitalua-inicio-hero h1 em {
	display: inline-block;
	white-space: nowrap;
}

/* .hero p */
.pitalua-inicio-hero__texto > p:not( .pitalua-eyebrow ) {
	max-width: 620px;
	margin: 0 0 34px;
	color: #ede3dc;
	font-size: clamp( 1.02rem, 1.15vw, 1.14rem );
	font-weight: 300;
	line-height: 1.78;
}

/* .hero-actions */
.pitalua-inicio-hero__acciones {
	gap: 16px;
	margin-top: 0;
}

/* .hero-side */
.pitalua-inicio-hero__lateral {
	padding-left: clamp( 26px, 2.8vw, 34px );
	border-left: 2px solid var( --gold );
}

/* .hero-side .side-title (a div in the prototype, so .hero p does not reach it) */
.pitalua-inicio-hero__lema {
	margin: 0 0 14px;
	color: #f4e8df;
	font-family: var( --serif );
	font-size: clamp( 1.12rem, 1.25vw, 1.25rem );
	font-weight: 500;
	line-height: 1.4;
}

/* .hero-side p (it also takes .hero p's weight and max-width) */
.pitalua-inicio-hero__lateral > p:not( .pitalua-inicio-hero__lema ) {
	max-width: 620px;
	margin: 0 0 24px;
	color: #d9c9d2;
	font-size: 0.88rem;
	font-weight: 300;
	line-height: 1.7;
}

/* .hero-tags */
.pitalua-inicio-hero__claves {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .hero-tags span */
.pitalua-inicio-hero__claves li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #d9c7d2;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* .hero-tags i */
.pitalua-inicio-hero__claves li::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var( --gold );
}

/* .btn: on index.html the label never wraps and is centred. */
.pitalua-inicio .wp-block-button:not( .is-style-enlace ) .wp-block-button__link {
	text-align: center;
	white-space: nowrap;
}

/* ============================================================== Intro */

/* .intro */
.pitalua-inicio-enfoque {
	position: relative;
	overflow: hidden;
	padding: clamp( 80px, 8vw, 108px ) 0;
	background: var( --ivory );
}

/* .intro::before: the watermark, painted plum through its alpha as a mask. */
.pitalua-inicio-enfoque::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: clamp( 240px, 26vw, 340px );
	background-color: var( --plum );
	-webkit-mask: url( "../../img/decor/marca-agua.webp" ) left bottom / contain no-repeat;
	mask: url( "../../img/decor/marca-agua.webp" ) left bottom / contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
}

/* .intro-grid */
.pitalua-inicio-enfoque__rejilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp( 44px, 5.5vw, 76px );
	align-items: start;
}

/* .intro-word (a div in the prototype: no .display tracking) */
.pitalua-inicio-enfoque__titulo {
	margin: 0;
	color: var( --plum );
	font-size: clamp( 2.1rem, 3.2vw, 3rem );
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.18;
}

/* .intro-copy */
.pitalua-inicio-enfoque__texto {
	margin: 0;
	color: #5f535d;
	font-size: clamp( 1rem, 1.12vw, 1.08rem );
	line-height: 1.88;
}

/* .quote */
.pitalua-inicio-enfoque__cita {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 18px;
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var( --line );
}

/* .quote .mark */
.pitalua-inicio-enfoque__marca {
	margin: 0;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 3.2rem;
	line-height: 0.8;
}

/* .quote blockquote */
.pitalua-inicio-enfoque__frase {
	margin: 0;
	padding: 0;
	border: 0;
}

.pitalua-inicio-enfoque__frase p {
	margin: 0;
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.12rem, 1.3vw, 1.26rem );
	line-height: 1.6;
}

/* =========================================================== Services */

/* .services */
.pitalua-inicio-servicios {
	padding: clamp( 80px, 8vw, 108px ) 0;
	border-top: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
	background: #fffaf5;
}

/* .services-head */
.pitalua-inicio-servicios__cabecera {
	max-width: 780px;
	margin-bottom: 52px;
}

/* .services-head h2 */
.pitalua-inicio-servicios__cabecera h2 {
	margin: 0 0 18px;
	font-size: clamp( 1.95rem, 2.8vw, 2.75rem );
	line-height: 1.2;
}

/* .services-head .lead */
.pitalua-inicio-servicios__cabecera .pitalua-lead {
	max-width: 660px;
	margin: 0;
	font-size: clamp( 1rem, 1.12vw, 1.1rem );
	line-height: 1.78;
}

/* .grid-services */
.pitalua-inicio-servicios__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	border-top: 1px solid var( --line );
	border-left: 1px solid var( --line );
}

/* .service */
.pitalua-inicio-servicio {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	padding: 38px 32px;
	overflow: hidden;
	border-right: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
}

/* .service::before */
.pitalua-inicio-servicio::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0;
	background: var( --plum );
	transition: height 0.6s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* .service>* */
.pitalua-inicio-servicio > * {
	position: relative;
	z-index: 1;
}

/* .service:hover::before */
.pitalua-inicio-servicio:hover::before {
	height: 100%;
}

/* .service-header */
.pitalua-inicio-servicio__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
}

/* .service-icon */
.pitalua-inicio-servicio__cabecera::before {
	content: "";
	width: 70px;
	height: 70px;
	background: center / contain no-repeat;
	transition: filter 0.45s ease, transform 0.6s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.pitalua-inicio-servicio--01 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-01.webp" );
}

.pitalua-inicio-servicio--02 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-02.webp" );
}

.pitalua-inicio-servicio--03 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-03.webp" );
}

.pitalua-inicio-servicio--04 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-04.webp" );
}

.pitalua-inicio-servicio--05 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-05.webp" );
}

.pitalua-inicio-servicio--06 .pitalua-inicio-servicio__cabecera::before {
	background-image: url( "../../img/decor/servicio-06.webp" );
}

/* .service:hover .service-icon */
.pitalua-inicio-servicio:hover .pitalua-inicio-servicio__cabecera::before {
	filter: brightness( 0 ) invert( 1 );
	transform: scale( 1.025 );
}

/* .service-no */
.pitalua-inicio-servicio__numero {
	margin: 4px 0 0;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.35rem;
	line-height: 1;
}

/* .service h3 */
.pitalua-inicio-servicio h3 {
	margin: 0 0 12px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.38;
	transition: color 0.45s ease;
}

/* .service p */
.pitalua-inicio-servicio > p {
	margin: 0 0 22px;
	color: var( --muted );
	font-size: 0.85rem;
	line-height: 1.68;
	transition: color 0.45s ease;
}

/* .service .text-link: a flex item of the column, so it spans the card. */
.pitalua-inicio-servicio > .wp-block-buttons {
	margin-top: auto;
}

.pitalua-inicio-servicio .wp-block-button {
	width: 100%;
}

.pitalua-inicio-servicio .is-style-enlace .wp-block-button__link {
	display: flex;
	color: var( --plum );
	transition: color 0.45s ease, border-color 0.45s ease;
}

/* .service:hover h3, .service:hover p */
.pitalua-inicio-servicio:hover h3,
.pitalua-inicio-servicio:hover > p {
	color: var( --ivory );
}

/* .service:hover .text-link */
.pitalua-inicio-servicio:hover .is-style-enlace .wp-block-button__link {
	border-bottom-color: var( --gold );
	color: var( --gold );
}

/* .text-link: line-height is the body's 1.6, not the .btn's 1, and nothing centres its label. */
.pitalua-inicio .is-style-enlace .wp-block-button__link {
	justify-content: flex-start;
	line-height: 1.6;
	white-space: normal;
}

/* ============================================================ Approach */

/* .approach */
.pitalua-inicio-firma {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	min-height: 580px;
}

/* .approach-copy */
.pitalua-inicio-firma__texto {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 72px, 7.5vw, 100px ) max( 5vw, 48px );
	overflow: hidden;
}

/* .approach-copy::after */
.pitalua-inicio-firma__texto::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -180px;
	width: 440px;
	height: 520px;
	background: url( "../../img/decor/monograma-claro.webp" ) center / contain no-repeat;
	opacity: 0.04;
	pointer-events: none;
}

/* .approach-copy>* */
.pitalua-inicio-firma__texto > * {
	position: relative;
	z-index: 1;
}

/* .approach-copy h2 (the accent span has no colour of its own here) */
.pitalua-inicio-firma h2 {
	margin: 18px 0 24px;
	font-size: clamp( 1.85rem, 2.6vw, 2.55rem );
	line-height: 1.22;
}

.pitalua-inicio-firma h2 em {
	color: inherit;
}

/* .approach-copy p */
.pitalua-inicio-firma__texto p:not( .pitalua-eyebrow ) {
	max-width: 620px;
	margin: 0 0 18px;
	color: #ede3dc;
	font-size: clamp( 0.9rem, 1.04vw, 0.98rem );
	line-height: 1.8;
}

/* .approach-copy p:last-child */
.pitalua-inicio-firma__texto p:not( .pitalua-eyebrow ):last-child {
	margin-bottom: 0;
}

/* .approach-purpose */
.pitalua-inicio-firma__proposito {
	margin-top: 14px;
	padding: 8px 0 8px 22px;
	border-left: 2px solid var( --gold );
	color: #f4e8df;
	font-size: clamp( 0.9rem, 1.04vw, 0.98rem );
	line-height: 1.75;
}

/* .approach-action */
.pitalua-inicio-firma__accion {
	margin-top: 30px;
}

/* .approach-photo */
.pitalua-inicio-firma__foto {
	position: relative;
	overflow: hidden;
}

/* .approach-photo img */
.pitalua-inicio-firma__foto .pitalua-imagen,
.pitalua-inicio-firma__foto img {
	width: 100%;
	height: 100%;
}

.pitalua-inicio-firma__foto img {
	object-fit: cover;
	object-position: center;
}

/* .approach-photo::after */
.pitalua-inicio-firma__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 82, 40, 74, 0.32 ) 0%, rgba( 82, 40, 74, 0 ) 24% ), rgba( 82, 40, 74, 0.06 );
	pointer-events: none;
}

/* ============================================================== Diffs */

/* .diffs */
.pitalua-inicio-diferenciales {
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	border-bottom: 1px solid var( --line );
	background: var( --ivory );
}

/* .diffs-top */
.pitalua-inicio-diferenciales__cabecera {
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: clamp( 36px, 5vw, 60px );
	align-items: end;
	margin-bottom: 56px;
}

/* .diffs-top h2 */
.pitalua-inicio-diferenciales__cabecera h2 {
	font-size: clamp( 1.85rem, 2.7vw, 2.65rem );
}

/* .diffs-top .lead */
.pitalua-inicio-diferenciales__cabecera .pitalua-lead {
	justify-self: end;
	max-width: 540px;
	margin: 0;
}

/* .diffs-grid */
.pitalua-inicio-diferenciales__rejilla {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

/*
 * .diff-card. Its transform and transition lose to .reveal's, in the prototype as here
 * (.pitalua-aparicion): on hover only the shadow and the top border change.
 */
.pitalua-inicio-diferencial {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 36px 28px;
	border: 1px solid var( --line );
	border-top: 2px solid var( --gold );
	background: #fffaf5;
	transition: 0.3s var( --ease );
}

/* .diff-card:hover */
.pitalua-inicio-diferencial:hover {
	border-top-color: var( --plum );
	box-shadow: 0 14px 32px rgba( 82, 40, 74, 0.07 );
	transform: translateY( -4px );
}

/* .diff-num */
.pitalua-inicio-diferencial__numero {
	margin: 0 0 22px;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
}

/* .diff-card h3 */
.pitalua-inicio-diferencial h3 {
	margin: 0 0 16px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.4;
}

/* .diff-card p */
.pitalua-inicio-diferencial > p:not( .pitalua-inicio-diferencial__numero ) {
	margin: 0;
	color: var( --muted );
	font-size: 0.84rem;
	line-height: 1.7;
}

/* ============================================================== Karla */

/* .karla */
.pitalua-inicio-karla {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	min-height: 620px;
	overflow: hidden;
	background: #fffaf5;
}

/* .karla-visual */
.pitalua-inicio-karla__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 44px, 5.5vw, 76px );
	overflow: hidden;
}

/* .karla-pattern */
.pitalua-inicio-karla__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url( "../../img/decor/patron-claro.webp" ) center / 280px repeat;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 50%, rgba( 0, 0, 0, 0 ) 95% );
	mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 50%, rgba( 0, 0, 0, 0 ) 95% );
	pointer-events: none;
}

/* .karla-visual img */
.pitalua-inicio-karla__visual .pitalua-imagen {
	position: relative;
	z-index: 2;
	width: min( 440px, 88% );
}

.pitalua-inicio-karla__visual img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	filter: drop-shadow( 0 20px 42px rgba( 82, 40, 74, 0.15 ) );
	transition: 0.3s var( --ease );
}

/* .karla-copy */
.pitalua-inicio-karla__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp( 68px, 7.5vw, 100px ) clamp( 38px, 5.8vw, 88px );
}

/* .karla-copy h2 */
.pitalua-inicio-karla h2 {
	margin: 18px 0 12px;
	font-size: clamp( 2rem, 2.8vw, 2.75rem );
	line-height: 1.18;
}

/* .role */
.pitalua-inicio-karla__cargo {
	margin: 0 0 26px;
	color: var( --gold );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* .karla-copy p */
.pitalua-inicio-karla__texto > p:not( .pitalua-eyebrow, .pitalua-inicio-karla__cargo ) {
	max-width: 580px;
	margin: 0 0 30px;
	color: var( --muted );
	font-size: clamp( 0.92rem, 1.04vw, 1rem );
	line-height: 1.82;
}

/* .karla-quote */
.pitalua-inicio-karla__cita {
	max-width: 560px;
	margin: 0 0 32px;
	padding: 6px 0 6px 20px;
	border: 0;
	border-left: 2px solid var( --gold );
}

.pitalua-inicio-karla__cita p {
	margin: 0;
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.12rem, 1.3vw, 1.26rem );
	line-height: 1.6;
}

/* .karla-copy .btn */
.pitalua-inicio-karla__accion {
	margin-top: 6px;
}

/* ========================================================= Experience */

/* .experience */
.pitalua-inicio-experiencia {
	position: relative;
	overflow: hidden;
	padding: clamp( 84px, 8.5vw, 114px ) 0;
}

/* .experience::after */
.pitalua-inicio-experiencia::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -80px;
	width: 520px;
	height: 480px;
	background: url( "../../img/decor/patron-ciruela.webp" ) center / 330px repeat;
	opacity: 0.09;
}

/* .experience .head */
.pitalua-inicio-experiencia__cabecera {
	position: relative;
	z-index: 1;
	margin-bottom: 52px;
}

/* .experience .head h2 */
.pitalua-inicio-experiencia__cabecera h2 {
	margin-top: 18px;
	font-size: clamp( 1.85rem, 2.7vw, 2.65rem );
}

/* .exp-layout */
.pitalua-inicio-experiencia__rejilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.78fr 1.22fr;
	gap: clamp( 36px, 5vw, 60px );
}

/* .big-stat */
.pitalua-inicio-cifra {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px;
	padding: clamp( 36px, 4vw, 44px );
	overflow: hidden;
	border: 1px solid rgba( 195, 155, 76, 0.55 );
}

/* .big-stat::before */
.pitalua-inicio-cifra::before {
	content: "";
	position: absolute;
	top: 26px;
	right: 28px;
	width: min( 150px, 36vw );
	height: min( 165px, 40vw );
	background: url( "../../img/decor/monograma-claro.webp" ) center / contain no-repeat;
	opacity: 0.18;
	pointer-events: none;
}

/* .big-stat strong */
.pitalua-inicio-cifra__numero {
	margin: 0 0 16px;
	color: var( --gold );
	font-family: var( --serif );
	font-size: clamp( 3.4rem, 5.2vw, 4.75rem );
	font-weight: 500;
	line-height: 0.95;
}

/* .big-stat p */
.pitalua-inicio-cifra > p:not( .pitalua-inicio-cifra__numero ) {
	position: relative;
	max-width: 340px;
	margin: 0;
	color: #d8cad3;
	font-size: 0.88rem;
	line-height: 1.7;
}

/* .exp-cards */
.pitalua-inicio-experiencia__casos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var( --light-line );
	border-left: 1px solid var( --light-line );
}

/* .exp-card (its transition loses to .reveal's, as in the prototype) */
.pitalua-inicio-caso {
	min-height: 175px;
	padding: 30px 26px;
	border-right: 1px solid var( --light-line );
	border-bottom: 1px solid var( --light-line );
	transition: 0.3s var( --ease );
}

/* .exp-card:hover */
.pitalua-inicio-caso:hover {
	background: rgba( 249, 241, 233, 0.03 );
}

/* .exp-card h3 */
.pitalua-inicio-caso h3 {
	margin: 0 0 12px;
	color: var( --ivory );
	font-family: var( --serif );
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.38;
}

/* .exp-card p */
.pitalua-inicio-caso p {
	margin: 0;
	color: #cdbdc7;
	font-size: 0.83rem;
	line-height: 1.68;
}

/* .exp-footer */
.pitalua-inicio-experiencia__pie {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	margin-top: 44px;
}

/* ============================================================ Sectors */

/* .sectors */
.pitalua-inicio-sectores {
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	background: #fffaf5;
}

/* .sectors-head */
.pitalua-inicio-sectores__cabecera {
	max-width: 780px;
	margin-bottom: 52px;
}

/* .sectors-head h2 */
.pitalua-inicio-sectores__cabecera h2 {
	margin: 0 0 18px;
	font-size: clamp( 1.95rem, 2.8vw, 2.75rem );
	line-height: 1.2;
}

/* .sectors-head .lead */
.pitalua-inicio-sectores__cabecera .pitalua-lead {
	max-width: 680px;
	margin: 0;
	color: var( --muted );
	font-size: clamp( 1rem, 1.12vw, 1.1rem );
	line-height: 1.78;
}

/* .sector-columns */
.pitalua-inicio-sectores__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 22px;
}

/* .sector (its transform and transition lose to .reveal's, as in the prototype) */
.pitalua-inicio-sector {
	padding: 34px 28px;
	border-top: 2px solid var( --gold );
	background: rgba( 249, 241, 233, 0.62 );
	transition: 0.3s var( --ease );
}

/* .sector:hover */
.pitalua-inicio-sector:hover {
	box-shadow: 0 12px 28px rgba( 82, 40, 74, 0.06 );
	transform: translateY( -3px );
}

/* .sector-icon */
.pitalua-inicio-sector::before {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	margin-bottom: 24px;
	background: center / contain no-repeat;
}

.pitalua-inicio-sector--industrias::before {
	background-image: url( "../../img/decor/sector-industrias.webp" );
}

.pitalua-inicio-sector--organizaciones::before {
	background-image: url( "../../img/decor/sector-organizaciones.webp" );
}

.pitalua-inicio-sector--entornos::before {
	background-image: url( "../../img/decor/sector-entornos.webp" );
}

/* .sector h3 */
.pitalua-inicio-sector h3 {
	margin: 0 0 18px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.6;
}

/* .sector ul */
.pitalua-inicio-sector ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .sector li */
.pitalua-inicio-sector li {
	position: relative;
	padding-left: 18px;
	color: var( --muted );
	font-size: 0.84rem;
	line-height: 1.6;
}

/* .sector li::before */
.pitalua-inicio-sector li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --gold );
}

/* ======================================================= Perspectives */

/* .perspectives */
.pitalua-inicio-perspectivas {
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	background: var( --ivory );
}

/* .persp-top */
.pitalua-inicio-perspectivas__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 52px;
}

/* .persp-top h2 */
.pitalua-inicio-perspectivas__cabecera h2 {
	font-size: clamp( 1.85rem, 2.7vw, 2.65rem );
}

/*
 * .persp-top .btn: the prototype's button is the flex item itself and, with overflow:hidden,
 * may shrink below its label. Here the item is the core/buttons wrapper, so the chain has to
 * be allowed to shrink the same way.
 */
.pitalua-inicio-perspectivas__cabecera .wp-block-buttons,
.pitalua-inicio-perspectivas__cabecera .wp-block-button {
	min-width: 0;
}

.pitalua-inicio-perspectivas__cabecera .wp-block-button__link {
	max-width: 100%;
}

/* .articles */
.pitalua-inicio-perspectivas__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

/* .article */
.pitalua-inicio-articulo {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --line );
	background: #fffaf5;
	transition: 0.3s var( --ease );
}

/* .article-visual */
.pitalua-inicio-articulo__visual {
	position: relative;
	height: 185px;
	overflow: hidden;
	background: var( --plum-deep );
}

/* .article-visual img */
.pitalua-inicio-articulo__visual .pitalua-imagen,
.pitalua-inicio-articulo__visual img {
	width: 100%;
	height: 100%;
}

.pitalua-inicio-articulo__visual img {
	display: block;
	object-fit: cover;
	transition: transform 0.45s var( --ease );
}

/* .article:hover .article-visual img */
.pitalua-inicio-articulo:hover .pitalua-inicio-articulo__visual img {
	transform: scale( 1.04 );
}

/* .article-body */
.pitalua-inicio-articulo__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 24px 28px;
}

/* .article-meta */
.pitalua-inicio-articulo__categoria {
	display: block;
	margin: 0 0 12px;
	color: var( --gold );
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* .article h3 */
.pitalua-inicio-articulo h3 {
	margin: 0 0 20px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.45;
}

/* .art-card-meta */
.pitalua-inicio-articulo__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba( 82, 40, 74, 0.08 );
	color: #857582;
	font-size: 0.76rem;
}

.pitalua-inicio-articulo__meta p {
	margin: 0;
}

/* .article .text-link: a flex item of .art-card-meta, so no line box around it. */
.pitalua-inicio-articulo__meta .wp-block-buttons {
	margin-top: auto;
}

.pitalua-inicio-articulo__meta .wp-block-button__link {
	display: flex;
}

/* ================================================================ CTA */

/* .cta: index.html has its own padding. */
.pitalua-inicio .pitalua-cta {
	padding: clamp( 84px, 9vw, 118px ) 0;
}

/*
 * .cta-inner: a real two-column grid here, not base.css's column with a drawn monogram.
 * The rules that name a front-page-only class also match under .is-root-container, so the
 * block editor (which has no .pitalua-inicio) lays the section out the same; same weight.
 */
:is( .pitalua-inicio, .is-root-container ) .pitalua-cta > .pitalua-inicio-cta__rejilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.24fr 0.76fr;
	gap: clamp( 36px, 5.5vw, 64px );
	align-items: center;
	min-height: 0;
}

:is( .pitalua-inicio, .is-root-container ) .pitalua-cta > .pitalua-inicio-cta__rejilla > * {
	max-width: none;
}

:is( .pitalua-inicio, .is-root-container ) .pitalua-cta > .pitalua-inicio-cta__rejilla::after {
	content: none;
}

/* The eyebrow sits on its line box inside the .cta-content block, as in the prototype. */
.pitalua-inicio .pitalua-cta .pitalua-eyebrow {
	margin-top: 0;
}

/* .cta-visual */
.pitalua-inicio-cta__visual {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* .cta-monogram */
.pitalua-inicio-cta__visual::before {
	content: "";
	width: clamp( 280px, 28vw, 420px );
	max-height: 440px;
	aspect-ratio: 1085 / 1200;
	background: url( "../../img/decor/monograma-claro.webp" ) center / contain no-repeat;
	opacity: 0.18;
	pointer-events: none;
	transition: transform 0.4s var( --ease ), opacity 0.4s var( --ease );
}

/* .cta:hover .cta-monogram */
:is( .pitalua-inicio, .is-root-container ) .pitalua-cta:hover .pitalua-inicio-cta__visual::before {
	opacity: 0.24;
	transform: scale( 1.02 );
}

/* ========================================================= Responsive */

@media ( max-width: 980px ) {

	/* .hero */
	.pitalua-inicio-hero {
		min-height: auto;
	}

	/* .hero-inner */
	.pitalua-inicio-hero__rejilla {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 110px 0 54px;
	}

	/* .hero h1 */
	.pitalua-inicio-hero h1 {
		font-size: clamp( 2rem, 5vw, 2.85rem );
	}

	/* .hero-side */
	.pitalua-inicio-hero__lateral {
		max-width: 520px;
		padding-left: 22px;
	}

	/* .intro::before */
	.pitalua-inicio-enfoque::before {
		width: 190px;
		opacity: 0.04;
	}

	/* .intro-grid, .diffs-top, .exp-layout */
	.pitalua-inicio-enfoque__rejilla,
	.pitalua-inicio-diferenciales__cabecera,
	.pitalua-inicio-experiencia__rejilla {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* .diffs-top .lead */
	.pitalua-inicio-diferenciales__cabecera .pitalua-lead {
		justify-self: start;
	}

	/* .grid-services */
	.pitalua-inicio-servicios__rejilla {
		grid-template-columns: 1fr 1fr;
	}

	/* .approach */
	.pitalua-inicio-firma {
		grid-template-columns: 1fr;
	}

	/* .approach-photo */
	.pitalua-inicio-firma__foto {
		min-height: 400px;
	}

	/* .diffs-grid */
	.pitalua-inicio-diferenciales__rejilla {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}

	/* .karla */
	.pitalua-inicio-karla {
		grid-template-columns: 1fr;
	}

	/* .karla-visual */
	.pitalua-inicio-karla__visual {
		min-height: auto;
		padding: 48px 20px;
	}

	/* .karla-visual img */
	.pitalua-inicio-karla__visual .pitalua-imagen {
		width: min( 290px, 76vw );
	}

	/* .sector-columns, .articles */
	.pitalua-inicio-sectores__rejilla,
	.pitalua-inicio-perspectivas__rejilla {
		grid-template-columns: 1fr;
	}

	/* .cta-inner */
	:is( .pitalua-inicio, .is-root-container ) .pitalua-cta > .pitalua-inicio-cta__rejilla {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {

	/* .eyebrow (index.html only) */
	.pitalua-inicio .pitalua-eyebrow {
		margin-bottom: 14px;
		font-size: 0.64rem;
		letter-spacing: 0.16em;
	}

	.pitalua-inicio .pitalua-eyebrow::after {
		display: none;
	}

	/* .btn (index.html only): it also reaches .btn-outline-plum. */
	.pitalua-inicio .wp-block-button:not( .is-style-enlace ) .wp-block-button__link {
		padding: 0 18px;
		font-size: 0.7rem;
		letter-spacing: 0.08em;
	}

	/* .hero-inner */
	.pitalua-inicio-hero__rejilla {
		padding: 96px 0 46px;
	}

	/* .hero h1 */
	.pitalua-inicio-hero h1 {
		font-size: clamp( 1.8rem, 7.2vw, 2.4rem );
	}

	/* .hero-actions, .hero-actions .btn */
	.pitalua-inicio-hero__acciones {
		flex-direction: column;
	}

	/* .hero-actions .btn, .karla-copy .btn, .approach-action .btn, .exp-footer .btn, .persp-top .btn */
	.pitalua-inicio-hero__acciones .wp-block-button,
	.pitalua-inicio-firma__accion .wp-block-button,
	.pitalua-inicio-karla__accion .wp-block-button,
	.pitalua-inicio-experiencia__pie .wp-block-button,
	.pitalua-inicio-perspectivas__cabecera .wp-block-buttons,
	.pitalua-inicio-perspectivas__cabecera .wp-block-button,
	.pitalua-inicio-hero__acciones .wp-block-button__link,
	.pitalua-inicio-firma__accion .wp-block-button__link,
	.pitalua-inicio-karla__accion .wp-block-button__link,
	.pitalua-inicio-experiencia__pie .wp-block-button__link,
	.pitalua-inicio-perspectivas__cabecera .wp-block-button__link {
		width: 100%;
	}

	/* .intro, .services, .diffs, .experience, .sectors, .perspectives, .cta */
	.pitalua-inicio-enfoque,
	.pitalua-inicio-servicios,
	.pitalua-inicio-diferenciales,
	.pitalua-inicio-experiencia,
	.pitalua-inicio-sectores,
	.pitalua-inicio-perspectivas,
	.pitalua-inicio .pitalua-cta {
		padding: 64px 0;
	}

	/* .grid-services */
	.pitalua-inicio-servicios__rejilla {
		grid-template-columns: 1fr;
	}

	/* .service */
	.pitalua-inicio-servicio {
		min-height: auto;
	}

	/* .approach-copy */
	.pitalua-inicio-firma__texto {
		padding: 50px 18px;
	}

	/* .approach-photo */
	.pitalua-inicio-firma__foto {
		min-height: 300px;
	}

	/* .diffs-grid */
	.pitalua-inicio-diferenciales__rejilla {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* .karla-visual */
	.pitalua-inicio-karla__visual {
		padding: 36px 16px;
	}

	/* .karla-visual img */
	.pitalua-inicio-karla__visual .pitalua-imagen {
		width: min( 260px, 78vw );
	}

	/* .karla-copy */
	.pitalua-inicio-karla__texto {
		padding: 50px 18px;
	}

	/* .exp-cards */
	.pitalua-inicio-experiencia__casos {
		grid-template-columns: 1fr;
	}

	/* .persp-top */
	.pitalua-inicio-perspectivas__cabecera {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 390px ) {

	/* .btn (index.html only) */
	.pitalua-inicio .wp-block-button:not( .is-style-enlace ) .wp-block-button__link {
		padding: 0 12px;
		font-size: 0.65rem;
		letter-spacing: 0.05em;
	}
}