/*
 * La Firma page (prototype: la-firma.html). Exact replica: values are the prototype's.
 *
 * Order: page hero and closing CTA (base.css, with this page's own variants below) - history -
 * pillars - values - model - founder. Every page stylesheet is also loaded in the editor, so the
 * variants of shared components are scoped to classes only this page uses.
 */

/* --- .page-hero: this page's measures (840/700 elsewhere) --------------- */

/* .page-hero h1 */
.pitalua-firma-hero h1 {
	max-width: 820px;
}

/* .page-hero p */
.pitalua-firma-hero p:not( .pitalua-eyebrow ) {
	max-width: 680px;
}

/* --- .firma-history ----------------------------------------------------- */

.pitalua-firma-historia {
	padding: clamp( 80px, 8vw, 112px ) 0;
	background: var( --ivory );
}

/* .history-grid */
.pitalua-firma-historia__rejilla {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp( 44px, 5.5vw, 80px );
	align-items: start;
}

/* .history-title */
.pitalua-firma-historia__titulo {
	color: var( --plum );
	font-size: clamp( 1.95rem, 2.8vw, 2.75rem );
	line-height: 1.2;
}

/* .history-title .history-num */
.pitalua-firma-historia__titulo .pitalua-firma-historia__num {
	color: var( --gold );
	font-variant-numeric: lining-nums;
	font-weight: 600;
}

/* .history-quote (the wrapper) */
.pitalua-firma-historia__cita {
	margin: 34px 0 0;
	padding: 8px 0 8px 24px;
	border: 0;
	border-left: 2px solid var( --gold );
}

/* .history-quote blockquote */
.pitalua-firma-historia__cita p {
	margin: 0;
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.05rem, 1.2vw, 1.18rem );
	font-style: normal;
	font-weight: 500;
	line-height: 1.62;
}

/* .history-copy p */
.pitalua-firma-historia__texto p {
	margin: 0 0 22px;
	color: #5f535d;
	font-size: clamp( 0.98rem, 1.08vw, 1.06rem );
	line-height: 1.86;
}

.pitalua-firma-historia__texto p:last-child {
	margin-bottom: 0;
}

/* .history-copy p strong */
.pitalua-firma-historia__texto p strong {
	color: var( --plum );
	font-weight: 600;
}

/* --- .firma-pillars ----------------------------------------------------- */

.pitalua-firma-pilares {
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	border-top: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
	background: #fffaf5;
}

/* The header div's inline style: max-width:760px; margin-bottom:52px */
.pitalua-firma-pilares__cabecera {
	max-width: 760px;
	margin-bottom: 52px;
}

/* The h2's inline style (line-height stays .display's 1.14) */
.pitalua-firma-pilares__cabecera h2 {
	margin: 0 0 16px;
	font-size: clamp( 1.95rem, 2.8vw, 2.75rem );
}

/* .lead keeps the browser's paragraph margin. */
.pitalua-firma-pilares__cabecera .pitalua-lead,
.pitalua-firma-valores__cabecera .pitalua-lead {
	margin: 1em 0;
}

/* .pillars-grid */
.pitalua-firma-pilares__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

/* .pillar-card */
.pitalua-firma-pilar {
	display: flex;
	flex-direction: column;
	padding: 38px 32px;
	border: 1px solid var( --line );
	border-top: 2px solid var( --gold );
	background: rgba( 249, 241, 233, 0.55 );
	transition: 0.3s var( --ease );
}

.pitalua-firma-pilar:hover {
	background: #fff;
	box-shadow: 0 12px 30px rgba( 82, 40, 74, 0.06 );
	transform: translateY( -3px );
}

/* .pillar-num */
.pitalua-firma-pilar__num {
	margin: 0 0 18px;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* .pillar-card h3 */
.pitalua-firma-pilar h3 {
	margin: 0 0 16px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.25;
}

/* .pillar-card p */
.pitalua-firma-pilar p:not( .pitalua-firma-pilar__num ) {
	margin: 0;
	color: var( --muted );
	font-size: 0.9rem;
	line-height: 1.76;
}

/* --- .firma-values ------------------------------------------------------ */

.pitalua-firma-valores {
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	background: var( --ivory );
}

/* .values-head */
.pitalua-firma-valores__cabecera {
	max-width: 780px;
	margin-bottom: 52px;
}

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

/* .values-grid */
.pitalua-firma-valores__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

/* .value-item */
.pitalua-firma-valor {
	padding: 32px 28px;
	border: 1px solid var( --line );
	border-top: 2px solid var( --gold );
	background: #fffaf5;
	transition: 0.3s var( --ease );
}

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

/* .value-tag */
.pitalua-firma-valor__etiqueta {
	display: block;
	margin: 0 0 12px;
	color: var( --gold );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* .value-item h3 (line-height inherits the body's 1.6) */
.pitalua-firma-valor h3 {
	margin: 0 0 14px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

/* .value-item p */
.pitalua-firma-valor p:not( .pitalua-firma-valor__etiqueta ) {
	margin: 0;
	color: var( --muted );
	font-size: 0.86rem;
	line-height: 1.72;
}

/* --- .firma-model ------------------------------------------------------- */

.pitalua-firma-modelo {
	position: relative;
	overflow: hidden;
	padding: clamp( 84px, 8.5vw, 114px ) 0;
	border-top: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
	background: #fffaf5;
}

.pitalua-firma-modelo::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	background: url( "../../img/decor/patron-claro.webp" ) center / 280px repeat;
	opacity: 0.35;
	-webkit-mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 20%, transparent 95% );
	mask-image: linear-gradient( to right, rgba( 0, 0, 0, 1 ) 20%, transparent 95% );
	pointer-events: none;
}

/* .model-grid */
.pitalua-firma-modelo__rejilla {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp( 44px, 5.5vw, 80px );
	align-items: center;
}

/* .model-copy h2 */
.pitalua-firma-modelo__texto h2 {
	margin: 0 0 20px;
	font-size: clamp( 1.95rem, 2.8vw, 2.75rem );
	line-height: 1.2;
}

/* .model-copy p (the last one keeps its margin too). Its <strong> keeps the browser's bold. */
.pitalua-firma-modelo__texto p:not( .pitalua-eyebrow ) {
	margin: 0 0 20px;
	color: #5f535d;
	font-size: clamp( 0.96rem, 1.06vw, 1.04rem );
	line-height: 1.84;
}

/*
 * .model-copy strong has no rule in the prototype, so it gets the browser's bold (700). The
 * prototype loads Montserrat only up to 600, so that 700 is drawn with the 600 face. The theme's
 * variable font does have 700: the axis is pinned at 600 to draw the same glyphs.
 */
.pitalua-firma-modelo__texto strong {
	font-variation-settings: "wght" 600;
}

/* .model-table */
.pitalua-firma-modelo__tabla {
	padding: 34px 30px;
	border: 1px solid var( --line );
	background: var( --ivory );
	box-shadow: 0 12px 32px rgba( 82, 40, 74, 0.05 );
}

/* .model-table-title */
.pitalua-firma-modelo__titulo {
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --line );
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.15rem;
	font-weight: 600;
}

/* .model-comparison */
.pitalua-firma-modelo__comparacion {
	display: grid;
	gap: 18px;
}

/* .comp-row */
.pitalua-firma-modelo__fila {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba( 82, 40, 74, 0.08 );
}

.pitalua-firma-modelo__fila:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* .comp-left */
.pitalua-firma-modelo__criterio {
	margin: 0;
	color: var( --muted );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* .comp-right */
.pitalua-firma-modelo__valor {
	margin: 0;
	color: var( --plum );
	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.6;
}

/* --- .karla ------------------------------------------------------------- */

.pitalua-firma-karla {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	min-height: 620px;
	overflow: hidden;
	background: var( --ivory );
}

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

/* .karla-pattern */
.pitalua-firma-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: the block wraps it in a <picture>, which takes the image's box. */
.pitalua-firma-karla__visual .pitalua-imagen {
	position: relative;
	z-index: 2;
	width: min( 440px, 88% );
}

.pitalua-firma-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-firma-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-firma-karla__texto h2 {
	margin: 18px 0 12px;
	font-size: clamp( 2rem, 2.8vw, 2.75rem );
	line-height: 1.18;
}

/* .role */
.pitalua-firma-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-firma-karla__texto > p:not( .pitalua-eyebrow, .pitalua-firma-karla__cargo ) {
	max-width: 580px;
	margin: 0 0 24px;
	color: var( --muted );
	font-size: clamp( 0.92rem, 1.04vw, 1rem );
	line-height: 1.82;
}

/* .karla-credentials */
.pitalua-firma-karla__credenciales {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.pitalua-firma-karla__credenciales li {
	position: relative;
	padding-left: 18px;
	color: var( --plum );
	font-size: 0.85rem;
	line-height: 1.6;
}

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

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

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

/* --- Responsive --------------------------------------------------------- */

@media ( max-width: 980px ) {

	.pitalua-firma-historia__rejilla,
	.pitalua-firma-pilares__rejilla,
	.pitalua-firma-valores__rejilla,
	.pitalua-firma-modelo__rejilla,
	.pitalua-firma-karla {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.pitalua-firma-karla__visual {
		min-height: auto;
		padding: 48px 20px;
	}

	.pitalua-firma-karla__texto {
		padding: 44px 20px;
	}

	/* .cta-inner: gap:32px here (fluid on the other pages). */
	.pitalua-firma-cta > .pitalua-contenedor::after {
		margin-top: 32px;
	}
}