/*
 * Individual practice-area pages (prototype: servicio-<slug>.html, gate G1 2026-09-22).
 * Shared by the six child pages of Servicios (spec servicios-individuales, D6). Values are
 * the prototype's; class names map one to one (svc-* -> pitalua-area-*).
 *
 * theme.json sets blockGap to 0, so every margin the prototype leaves to the browser is
 * written out. The page hero, breadcrumbs and closing CTA come from base.css.
 */

/* --- Hero: area number + eyebrow ----------------------------------------- */

/* .hero-area */
.pitalua-area-hero__marca {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}

/* .hero-area-num (beats base.css .pitalua-page-hero p:not(.pitalua-eyebrow)) */
.pitalua-page-hero p.pitalua-area-hero__numero {
	max-width: none;
	margin: 0;
	color: var( --gold );
	font-family: var( --serif );
	font-size: clamp( 2.4rem, 3.6vw, 3.25rem );
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* base.css aligns the eyebrow to flex-start; the prototype centres it with the number */
.pitalua-area-hero__marca .pitalua-eyebrow {
	align-self: center;
	margin: 0;
}

/* .page-hero h1 of the service template: 900px, not base.css's 840px */
.pitalua-area-hero h1 {
	max-width: 900px;
}

/* --- Shared section frame ----------------------------------------------- */

/* .svc-section and its three backgrounds */
.pitalua-area-seccion {
	position: relative;
	padding: clamp( 84px, 8.5vw, 114px ) 0;
}

.pitalua-area-seccion--marfil {
	background: var( --ivory );
}

.pitalua-area-seccion--hundido {
	background: var( --ivory-deep );
}

.pitalua-area-seccion--papel {
	background: #fffaf5;
}

/* .svc-split */
.pitalua-area-dividida {
	display: grid;
	grid-template-columns: 4fr 7fr;
	gap: clamp( 40px, 6vw, 96px );
	align-items: start;
}

/* .svc-head */
.pitalua-area-cabecera {
	max-width: 760px;
	margin-bottom: 48px;
}

/* .svc-split-head */
.pitalua-area-dividida > .pitalua-area-cabecera {
	position: sticky;
	top: 112px;
	max-width: none;
	margin-bottom: 0;
}

/* .svc-h2 (not .display: no negative tracking, unlike base.css h2) */
.pitalua-area-seccion h2 {
	margin: 0;
	color: var( --plum );
	font-size: clamp( 1.8rem, 2.6vw, 2.5rem );
	letter-spacing: normal;
	line-height: 1.2;
}

.pitalua-area-seccion h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin-top: 24px;
	background: var( --gold );
}

/* .svc-intro */
.pitalua-area-intro {
	margin-top: 24px;
}

.pitalua-area-intro p {
	max-width: min( 60ch, 36em );
	margin: 0 0 12px;
	color: #5a4f58;
	font-size: 1rem;
	line-height: 1.8;
}

/* --- ¿Qué comprende esta área? ------------------------------------------ */

/* .svc-lead */
.pitalua-area-entradilla {
	max-width: min( 60ch, 36em );
	margin: 0 0 28px;
	color: var( --plum );
	font-size: clamp( 1.08rem, 1.3vw, 1.24rem );
	font-weight: 500;
	line-height: 1.75;
}

/* .svc-prose p. WordPress adds .wp-block-paragraph when rendering, so plain paragraphs are
   told apart from the lead paragraphs by exclusion, not by having no class. */
.pitalua-area-dividida__cuerpo > p:not( [class*="entradilla"] ) {
	max-width: min( 60ch, 36em );
	margin: 0 0 20px;
	color: #4a3f48;
	font-size: 1rem;
	line-height: 1.85;
}

/* .svc-statement */
.pitalua-area-declaracion {
	margin: 40px 0 0;
	padding: 6px 0 6px 28px;
	border: 0;
	border-left: 2px solid var( --gold );
}

.pitalua-area-declaracion p {
	max-width: 34em;
	margin: 0;
	color: var( --plum );
	font-family: var( --serif );
	font-size: clamp( 1.1rem, 1.5vw, 1.35rem );
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* --- Lists -------------------------------------------------------------- */

/* .svc-list */
.pitalua-area-lista {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pitalua-area-lista li {
	position: relative;
	padding-left: 22px;
	color: var( --ink );
	font-size: 0.94rem;
	line-height: 1.7;
}

.pitalua-area-lista li::before {
	content: "";
	position: absolute;
	top: 0.66em;
	left: 0;
	width: 6px;
	height: 6px;
	background: var( --gold );
}

/* .svc-list--cols, and the lists inside an open service group */
.pitalua-area-lista--columnas,
.pitalua-area-grupo > .pitalua-area-lista {
	display: block;
	column-gap: clamp( 32px, 4vw, 64px );
	columns: 2;
}

.pitalua-area-lista--columnas li,
.pitalua-area-grupo > .pitalua-area-lista > li {
	margin-bottom: 16px;
	break-inside: avoid;
}

/* .svc-list--ruled */
.pitalua-area-lista--filetes {
	gap: 0;
}

.pitalua-area-lista--filetes li {
	padding: 16px 0 16px 22px;
	border-bottom: 1px solid var( --line );
}

.pitalua-area-lista--filetes li:first-child {
	border-top: 1px solid var( --line );
}

.pitalua-area-lista--filetes li::before {
	top: calc( 16px + 0.66em );
}

/* .svc-after. The prototype prints it even when empty, so its 32px margin is always there:
   a list that ends the block keeps that space when nothing follows it. */
.pitalua-area-cierre {
	margin-top: 32px;
}

.pitalua-area-seccion--hundido .pitalua-area-cuerpo > .pitalua-area-lista:last-child,
.pitalua-area-dividida__cuerpo > .pitalua-area-lista:last-child {
	margin-bottom: 32px;
}

.pitalua-area-cierre p,
.pitalua-area-cuerpo > p:not( .pitalua-area-nota ) {
	margin: 0 0 16px;
}

/* .svc-note */
.pitalua-area-nota {
	margin: 24px 0 0;
	padding: 16px 20px 16px 24px;
	border-left: 2px solid var( --gold );
	background: rgba( 195, 155, 76, 0.08 );
	color: #4a3f48;
	font-size: 0.92rem;
	font-style: italic;
	line-height: 1.75;
}

/* --- Servicios específicos: native accordions (core/details) ------------ */

.pitalua-area-grupos {
	border-top: 1px solid var( --line );
}

.pitalua-area-grupo {
	border-bottom: 1px solid var( --line );
}

/* .svc-group summary + its h3. core/details keeps the summary as inline text, so the title
   is styled here and the +/- icon is a pseudo-element instead of a span. */
.pitalua-area-grupo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 4px;
	color: var( --plum );
	font-family: var( --sans );
	font-size: clamp( 1.02rem, 1.3vw, 1.18rem );
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	transition: color 0.18s ease-out;
}

.pitalua-area-grupo summary::-webkit-details-marker {
	display: none;
}

.pitalua-area-grupo summary:hover {
	color: var( --plum-deep );
}

/* .svc-group-icon: a 36px box with a plus that turns into a minus */
.pitalua-area-grupo summary::after {
	content: "";
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid rgba( 82, 40, 74, 0.4 );
	background:
		linear-gradient( var( --plum ), var( --plum ) ) center / 12px 1.5px no-repeat,
		linear-gradient( var( --plum ), var( --plum ) ) center / 1.5px 12px no-repeat;
	transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.pitalua-area-grupo summary:hover::after {
	border-color: var( --plum );
}

.pitalua-area-grupo[open] summary::after {
	border-color: var( --plum );
	background:
		linear-gradient( var( --ivory ), var( --ivory ) ) center / 12px 1.5px no-repeat,
		var( --plum );
}

/* .svc-group-body: padding 4px 4px 36px */
.pitalua-area-grupo > :not( summary ) {
	margin-right: 4px;
	margin-left: 4px;
}

.pitalua-area-grupo > summary + * {
	margin-top: 4px;
}

.pitalua-area-grupo > :last-child:not( summary ) {
	margin-bottom: 36px;
}

.pitalua-area-grupo > p {
	max-width: min( 60ch, 36em );
	margin-bottom: 16px;
	color: #4a3f48;
	font-size: 0.96rem;
	line-height: 1.8;
}

.pitalua-area-grupo > h4 {
	margin-top: 36px;
	margin-bottom: 14px;
	color: var( --plum );
	font-family: var( --serif );
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* .svc-steps: process diagrams as numbered steps */
.pitalua-area-pasos {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	margin: 20px 0 24px;
	padding: 0;
	border-top: 2px solid var( --gold );
	counter-reset: paso;
	list-style: none;
}

.pitalua-area-pasos li {
	position: relative;
	padding: 16px 14px 0 0;
	color: var( --plum );
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.45;
	counter-increment: paso;
}

.pitalua-area-pasos li::before {
	content: counter( paso, decimal-leading-zero );
	display: block;
	margin-bottom: 6px;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* Steps nested in a bullet (area 05) */
.pitalua-area-lista .pitalua-area-pasos {
	margin: 16px 0 8px;
}

.pitalua-area-lista .pitalua-area-pasos li {
	padding-left: 0;
}

.pitalua-area-lista .pitalua-area-pasos li::before {
	position: static;
	width: auto;
	height: auto;
	background: none;
}

/* --- Beneficios para el cliente: plum block ----------------------------- */

.pitalua-area-beneficios {
	background: var( --plum );
	color: var( --ivory );
}

.pitalua-area-beneficios h2 {
	color: var( --ivory );
}

.pitalua-area-beneficios .pitalua-area-intro p {
	color: #ede3dc;
}

/* .svc-list--light */
.pitalua-area-beneficios .pitalua-area-lista li {
	color: #f4ebe4;
}

/* .benefits-quote */
.pitalua-area-beneficios__cita {
	max-width: 880px;
	margin: 56px 0 0;
	padding: 6px 0 6px 28px;
	border: 0;
	border-left: 2px solid var( --gold );
}

.pitalua-area-beneficios__cita p {
	margin: 0;
	color: var( --ivory );
	font-family: var( --serif );
	font-size: clamp( 1.12rem, 1.6vw, 1.4rem );
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.pitalua-area-beneficios :focus-visible {
	outline-color: var( --gold );
}

/* --- Situaciones frecuentes: the client's own questions ------------------ */

/* .svc-questions */
.pitalua-area-preguntas {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}

.pitalua-area-pregunta {
	position: relative;
	margin: 0;
	padding: 30px 28px 28px;
	border: 1px solid var( --line );
	border-top: 3px solid var( --gold );
	background: #fffaf5;
}

.pitalua-area-pregunta p {
	margin: 0;
	color: var( --plum );
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.75;
}

/* --- Experiencia relacionada -------------------------------------------- */

/* .svc-exp-lead */
.pitalua-area-experiencia__entradilla {
	max-width: min( 60ch, 36em );
	margin: 0 0 40px;
	color: var( --plum );
	font-size: clamp( 1.05rem, 1.25vw, 1.18rem );
	font-weight: 500;
	line-height: 1.8;
}

/* .svc-exp-grid */
.pitalua-area-experiencia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px clamp( 32px, 4vw, 56px );
}

.pitalua-area-experiencia p {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var( --line );
	color: #4a3f48;
	font-size: 0.94rem;
	line-height: 1.8;
}

/* --- Otras áreas (pitalua/otras-areas) ---------------------------------- */

.pitalua-otras-areas {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	border-top: 1px solid var( --line );
	border-left: 1px solid var( --line );
}

.pitalua-otra-area {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 24px 26px;
	border-right: 1px solid var( --line );
	border-bottom: 1px solid var( --line );
	background: var( --ivory );
	transition: background-color 0.18s ease-out;
}

.pitalua-otra-area:hover {
	background: #fff;
}

.pitalua-otra-area__numero {
	min-width: 2.4ch;
	color: var( --gold );
	font-family: var( --serif );
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	line-height: 1;
}

.pitalua-otra-area__titulo {
	flex-grow: 1;
	color: var( --plum );
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.45;
}

.pitalua-otra-area__flecha {
	color: var( --plum );
	transition: transform 0.18s ease-out;
}

.pitalua-otra-area:hover .pitalua-otra-area__flecha {
	transform: translateX( 5px );
}

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

@media ( max-width: 1100px ) {

	.pitalua-otras-areas {
		grid-template-columns: repeat( 3, 1fr );
	}

	.pitalua-area-preguntas {
		grid-template-columns: 1fr 1fr;
	}

	.pitalua-area-pasos {
		grid-template-columns: repeat( 3, 1fr );
		row-gap: 20px;
	}
}

@media ( max-width: 980px ) {

	.pitalua-area-dividida {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pitalua-area-dividida > .pitalua-area-cabecera {
		position: static;
	}
}

@media ( max-width: 760px ) {

	.pitalua-area-lista--columnas,
	.pitalua-area-grupo > .pitalua-area-lista {
		columns: 1;
	}

	.pitalua-area-experiencia,
	.pitalua-area-preguntas,
	.pitalua-otras-areas {
		grid-template-columns: 1fr;
	}

	.pitalua-otra-area {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 20px;
	}

	.pitalua-area-pasos {
		grid-template-columns: 1fr;
		row-gap: 0;
		border-top: 0;
		border-left: 2px solid var( --gold );
	}

	.pitalua-area-pasos li {
		display: flex;
		align-items: baseline;
		gap: 12px;
		padding: 0 0 14px 18px;
	}

	.pitalua-area-pasos li::before {
		min-width: 2.4ch;
		margin: 0;
	}
}

@media ( max-width: 640px ) {

	.pitalua-area-grupo summary {
		padding: 22px 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.pitalua-area-grupo summary,
	.pitalua-area-grupo summary::after,
	.pitalua-otra-area,
	.pitalua-otra-area__flecha {
		transition: none;
	}
}