/* ==========================================================================
   PAGE · SERVICIO (page-templates/page-servicio.php) · v3.0
   Enqueued conditionally on is_page_template('page-templates/page-servicio.php')
   ========================================================================== */


/* ---------- Service hero ----------
   v3.1: align-items:start para que eyebrow y foto arranquen ambos arriba —
   eliminamos el ~400px de espacio vacío que causaba `center` al centrar
   verticalmente contenido corto contra una foto 4/5 alta.
   Heroes internos NO replican la altura del Hero home (manifiesto §11.7). */
.service-hero {
	padding: var(--space-8) 0 var(--space-16);
}
.service-hero__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-12);
	align-items: start;
}
.service-hero--no-image .service-hero__inner {
	grid-template-columns: 1fr;
	max-width: var(--container-narrow);
	margin: 0 auto;
	text-align: center;
}
.service-hero__content { max-width: 720px; }
.service-hero--no-image .service-hero__content { max-width: none; margin: 0 auto; }
.service-hero__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin: 0 0 var(--space-4);
}
.service-hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-6);
	max-width: 18ch;
	text-wrap: balance;
}
.service-hero--no-image .service-hero__title { margin-left: auto; margin-right: auto; }
.service-hero__lead {
	font-size: var(--fs-md);
	line-height: 1.5;
	color: var(--text-secondary);
	max-width: 60ch;
	margin: 0 0 var(--space-6);
}
.service-hero--no-image .service-hero__lead { margin-left: auto; margin-right: auto; }
.service-hero__quote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-2xl);
	line-height: 1.2;
	border-left: 3px solid var(--color-primary);
	padding-left: var(--space-6);
	margin: var(--space-6) 0 var(--space-8);
	color: var(--text-primary);
	max-width: 50ch;
}
.service-hero--no-image .service-hero__quote {
	border-left: 0;
	padding-left: 0;
	font-size: var(--fs-editorial);
	color: var(--color-primary);
	margin: var(--space-8) auto;
	max-width: 24ch;
}
.service-hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.service-hero__visual img {
	border-radius: var(--radius-lg);
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	box-shadow: var(--shadow-lg);
}

@media (max-width: 1024px) {
	.service-hero { padding: var(--space-6) 0 var(--space-12); }
	.service-hero__inner { grid-template-columns: 1fr; }
	.service-hero__visual { order: -1; max-width: 480px; margin: 0 auto; }
}


/* ---------- Service content (Gutenberg the_content) ---------- */
.service-content { padding-top: 0; padding-bottom: var(--space-16); }
.service-content > .container--narrow > *:not(:last-child) { margin-bottom: var(--space-4); }
.service-content h2 {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}
.service-content h3 {
	font-size: var(--fs-lg);
	font-weight: 500;
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}
.service-content ul, .service-content ol { padding-left: var(--space-6); margin-bottom: var(--space-6); }
.service-content li { margin-bottom: 8px; }
.service-content ul li::marker { color: var(--color-primary-light); }
.service-content blockquote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-lg);
	border-left: 3px solid var(--color-primary);
	padding-left: var(--space-6);
	margin: var(--space-8) 0;
	color: var(--text-primary);
}


/* ---------- Caso clínico anónimo ---------- */
.case-clinical {
	padding: var(--space-16) 0;
	background: var(--bg-blush);
}
.case-clinical__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0 0 var(--space-4);
	text-align: center;
}
.case-clinical__quote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--text-primary);
	max-width: 60ch;
	margin: 0 auto;
	padding: 0;
	border: 0;
	text-align: left;
}
.case-clinical__quote p:first-child::before { content: "« "; color: var(--color-primary); }
.case-clinical__quote p:last-child::after  { content: " »"; color: var(--color-primary); }
.case-clinical--short .case-clinical__quote {
	text-align: center;
	font-size: var(--fs-xl);
	max-width: 40ch;
}
.case-clinical--long .case-clinical__quote {
	font-size: var(--fs-md);
}


/* ---------- Service FAQ ---------- */
.service-faq { padding: var(--space-16) 0; }
.service-faq__title {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-8);
	text-align: center;
	letter-spacing: 0;
}
.service-faq--two-col .faq-accordion {
	grid-template-columns: 1fr 1fr;
	gap: 10px var(--space-6);
}
@media (max-width: 1024px) {
	.service-faq--two-col .faq-accordion { grid-template-columns: 1fr; }
}