/* ==========================================================================
   Landings de servicio (/servicios/{slug}) — diseño «Web XUL».
   Base de la web: papel, granate, rojo y naranja; tipografías y CTA comunes.
   ========================================================================== */

.svc { --svc-pad: clamp(64px, calc(64px + (100vw - 424px) * 0.0394), 104px); }

/* ---------------- Cabecera: texto + foto vertical 4:5 ---------------- */
.svc-hero { padding-block: clamp(40px, calc(40px + (100vw - 424px) * 0.0315), 72px) var(--svc-pad); --naranja-texto: #9a2c12; }
.svc-hero__grid { display: grid; gap: 40px; align-items: center; }
.svc-hero__text { display: grid; justify-items: start; gap: 20px; }
.svc-hero__text > * { margin: 0; }
.svc-hero .breadcrumbs ol { justify-content: flex-start; }
.svc-hero__title {
	max-width: 15ch;
	font-size: calc(clamp(min(40px, 10vw), calc(40px + (100vw - 424px) * 0.0276), 68px) * var(--a11y-fs, 1));
	line-height: 1.06;
	overflow-wrap: break-word;
	hyphens: manual;
}
.svc-hero__lema { max-width: 24ch; color: var(--rojo); }
.svc-hero__intro { max-width: 60ch; font-size: calc(1.125rem * var(--a11y-fs, 1)); line-height: 1.6; }
.svc-hero__text .cta { margin-top: 8px; }
.svc-hero__media { position: relative; }
.svc-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
/* Cuadrado naranja del diseño, en la esquina de la foto. */
.svc-hero__media::after { content: ""; position: absolute; top: 0; right: 0; width: 56px; height: 56px; background: var(--naranja); border-radius: 0 16px 0 0; }

@media (min-width: 64rem) {
	.svc-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); }
	.svc-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
	.svc-hero__media { max-width: 480px; justify-self: end; width: 100%; }
	.svc-hero__img { aspect-ratio: 4 / 5; }
}

/* ---------------- Qué incluye ---------------- */
.svc-includes { padding-block: var(--svc-pad); background: var(--niebla); }
.svc-includes .container > p:first-child { margin: 0 0 16px; }
.svc-includes h2 { margin: 0 0 clamp(32px, 4vw, 48px); }
.svc-includes__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .svc-includes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.svc-card {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 32px 24px 28px;
	background: var(--blanco);
	border-radius: 4px;
}
.svc-card::before { content: ""; position: absolute; top: 0; left: 24px; width: 40px; height: 4px; background: var(--naranja); }
.svc-card > * { margin: 0; }
.svc-card__num { color: var(--naranja-texto); }
.svc-card__text { max-width: 52ch; }
@media (min-width: 48rem) { .svc-card { padding: 40px 32px 36px; } .svc-card::before { left: 32px; } }

/* Certificaciones (Comunicación digital). */
.svc-certs {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	padding: 32px 24px;
	background: var(--blanco);
	border-radius: 4px;
}
.svc-certs > div > * { margin: 0; }
.svc-certs > div > * + * { margin-top: 8px; }
.svc-certs__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.svc-certs__logo { width: auto; height: 72px; }
.svc-certs__lead { font-weight: 700; }
@media (min-width: 48rem) {
	.svc-certs { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px 32px; }
}

/* ---------------- En la práctica (rojo) ---------------- */
.svc-cases { --naranja-texto: var(--naranja-claro); padding-block: var(--svc-pad); background: var(--rojo); color: var(--blanco); }
.svc-cases .container > p:first-child { margin: 0 0 16px; }
.svc-cases h2 { margin: 0 0 clamp(32px, 4vw, 48px); color: var(--blanco); }
.svc-cases__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.85); }
.svc-case { display: grid; gap: 8px; padding-block: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.svc-case > * { margin: 0; }
.svc-case__title { color: var(--blanco); }
.svc-case__text { max-width: 70ch; }
@media (min-width: 64rem) {
	.svc-case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: baseline; padding-block: 32px; }
}
.svc-cases__more { margin: clamp(32px, 4vw, 48px) 0 0; }

/* ---------------- Llamada a la acción + otros servicios ---------------- */
.svc-cta { padding-block: var(--svc-pad); }
.svc-cta__title { max-width: 22ch; margin: 0 0 28px; }
.svc-cta .container > p { margin: 0; }
.svc-others { margin-top: clamp(40px, 5vw, 64px); }
.svc-others__title { margin: 0 0 16px; color: var(--granate); font-size: calc(var(--fs-etiqueta) * var(--a11y-fs, 1)); line-height: calc(var(--lh-etiqueta) * var(--a11y-fs, 1)); }
.svc-others__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.svc-others__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1.5px solid var(--granate);
	border-radius: var(--radius-pill);
	color: var(--granate);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.svc-others__link:hover, .svc-others__link:focus-visible { background: var(--granate); color: var(--blanco); }

/* Alto contraste (botón de accesibilidad). */
html.a11y-contrast .svc-cases { background: #5a0f0b; }