/* =====================================================================
   Marble Speakers: practice page, plum territory. Prefix: spk-
   Ported from the inline <style> block of the delivered speakers.html
   lines 23-277 (T6, reviewed-pages-batch-3). Faithful port: nothing is
   retyped, and only colour is tokenized -
     #fff -> var(--ms-on-dark) (12x; the token's value is #ffffff).
   2 literal-carrying rule(s) stay, each declared at its own rule with
   a token-exempt comment stating why no token equals the value.
   One declared selector deviation: body[data-practice="speakers"] is
   written html[data-practice="speakers"], because inc/chrome.php marks
   <html> (not <body>) through the language_attributes filter. Custom
   properties inherit from there, and the element-qualified form keeps the
   same specificity relation to tokens.css's unqualified
   [data-practice="speakers"] that the delivery relies on.
   Loads on this page only, AFTER components.css, page.css, polish.css - the exact set the
   delivered file links. It links no marble-templates.css, and it cannot get
   templates.css here either: marble_enqueue_styles() returns after the
   template branch, so the template sheet and an own sheet are mutually
   exclusive. The page key comes from spk-hero on its hero section.
   The .pg-* vocabulary in this block (the .pg-hero focus pair, .pg-explora /
   .pg-exl, the .pg-close overrides) is written per page by the delivery and
   is kept per sheet rather than hoisted: page.css is a declaration-for-
   declaration port of the delivered marble-page.css, and hoisting authored
   rules into it would break that comparison and ship dead rules to the 113
   pages that have none of this markup.
   ===================================================================== */
/* =====================================================================
   Marble Speakers: practice page. Plum territory ([data-practice="speakers"]).
   --ms-brand resolves to plum here, so every accent below is practice colour.
   ===================================================================== */
.ms-title, .ms-card__title { color: var(--ms-brand); }
.ms-on-dark .ms-title { color: var(--ms-on-dark); }
.pg-hero__grain, .pg-close__grain { opacity: 0.34; }
.mb-lockup__endorse { opacity: 0.72; }
.pg-hero { --pg-focus: 55% 55%; --pg-focus-m: 60% 55%; }
.pg-close { --pg-focus: 60% 70%; }
/* The routes panel is glass: keep it on solid plum, never over the people in the plate. */
.pg-close__scrim {
	background:
		linear-gradient(90deg, rgb(var(--pg-shade) / 0.86) 0%, rgb(var(--pg-shade) / 0.66) 36%, rgb(var(--pg-shade) / 0.1) 62%),
		linear-gradient(0deg, var(--ms-dark) 0%, var(--ms-dark) 24%, color-mix(in srgb, var(--ms-dark) 55%, transparent) 36%, transparent 52%),
		radial-gradient(50% 45% at 20% 38%, color-mix(in srgb, var(--ms-brand) 40%, transparent), transparent 70%);
}
.pg-logo svg { color: var(--ms-on-dark); }

/* shared thin-numeral vocabulary */
.spk-n { margin: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(2.5rem, 1.8rem + 2vw, 3.75rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.spk-p { margin: 0; max-width: 46ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.spk-p strong { display: block; margin-block-end: 0.5rem; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.1; color: var(--ms-ink); text-wrap: balance; }
.spk-label { margin: 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.spk-state__big { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: pretty; }
.spk-state__p { margin: 0; max-width: 46ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }

/* ---------- S.01 Que es: one large statement, one quiet paragraph ---------- */
.spk-quees .ms-header__side .ms-lede { max-width: 46ch; }
.spk-state { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; padding-block-start: clamp(1.75rem, 3vw, 2.5rem); border-block-start: 1px solid var(--ms-brand); }
.spk-quees .spk-state__big { grid-column: 1 / span 7; }
.spk-quees .spk-state__p { grid-column: 9 / span 4; padding-block-start: 0.35rem; }
@media (max-width: 64rem) {
	.spk-quees .spk-state__big, .spk-quees .spk-state__p { grid-column: 1 / -1; }
	.spk-quees .spk-state__p { margin-block-start: 1.75rem; }
}

/* ---------- S.02 Que hace: sticky heading, numbered ruled list, quiet formats row ---------- */
.spk-points { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ms-brand); }
.spk-point { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: clamp(1.4rem, 2.4vw, 2rem); border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.spk-hace .ms-header__side { max-width: 40ch; }
.spk-formats { margin: 0; padding-block: clamp(1.4rem, 2.4vw, 2rem); display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.3; color: var(--ms-ink); text-wrap: pretty; }
.spk-formats .spk-label { grid-column: 1 / -1; margin-block-end: 0.6rem; }
@media (min-width: 64.01rem) {
	.spk-formats { grid-template-columns: 1fr; padding-inline-start: 5.75rem; }
	.spk-formats .spk-label { grid-column: auto; }
}
@media (max-width: 64rem) { .spk-hace .spk-points { margin-block-start: 2.5rem; } }
@media (max-width: 40rem) {
	.spk-point { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.85rem; }
	.spk-formats { grid-template-columns: 1fr; }
}

/* ---------- S.03 Para el conferencista (dark): framed plate + two paragraphs ---------- */
.spk-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: center; }
.spk-plate { grid-column: 1 / span 5; margin: 0; }
.spk-plate__in { aspect-ratio: 4 / 5; }
.spk-plate picture { display: block; height: 100%; }
.spk-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.spk-after { grid-column: 7 / span 6; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.spk-despues .spk-state__p { max-width: 50ch; }
.spk-ask { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.15rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: pretty; max-width: 34ch; padding-block-start: clamp(1.5rem, 2.6vw, 2.1rem); border-block-start: 1px solid var(--ms-brand); }
@media (max-width: 64rem) {
	.spk-plate { grid-column: 1 / -1; max-width: 26rem; margin-block-end: 3rem; }
	.spk-after { grid-column: 1 / -1; }
}

/* ---------- S.04 Como contratar: sticky header + ruled step rows ---------- */
.spk-idx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.spk-idx-side { grid-column: 1 / span 4; position: sticky; top: 7rem; display: grid; gap: 1.5rem; }
.spk-idx-side .ms-title { margin: 0; }
.spk-idx-side .ms-lede { max-width: 36ch; }
.spk-steps { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ms-brand); }
.spk-step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: clamp(1.25rem, 2.2vw, 1.75rem); border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.spk-step .spk-n { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); padding-block-start: 0.2rem; }
.spk-step__t { margin: 0 0 0.35rem; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ms-ink); }
.spk-step__d { margin: 0; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); max-width: 50ch; }
@media (max-width: 64rem) {
	.spk-idx-side { grid-column: 1 / -1; position: static; margin-block-end: 2.5rem; }
	.spk-steps { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
	.spk-step { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.85rem; }
}

/* ---------- S.05 Por que elegir: number, label, text on one ruled row ---------- */
.spk-why .ms-header__side { max-width: 46ch; }
.spk-why__list { position: relative; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ms-brand); }
.spk-why__row { display: grid; grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--ms-grid-gap); align-items: baseline; padding-block: clamp(1.4rem, 2.4vw, 2rem); border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.spk-why__row .spk-n { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); }
.spk-why__t { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.spk-why__d { margin: 0; max-width: 52ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
@media (max-width: 64rem) {
	.spk-why__row { grid-template-columns: 3.5rem minmax(0, 1fr); row-gap: 0.6rem; }
	.spk-why__d { grid-column: 2; }
}

/* ---------- S.06 Siga explorando: editorial index rows ---------- */
.spk-ix .ms-header { margin-block-end: clamp(2rem, 4vw, 3rem); }
.spk-ix__list { position: relative; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ms-brand); }
.spk-ix__list li { display: grid; grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--ms-grid-gap); align-items: baseline; padding-block: clamp(1.4rem, 2.4vw, 2rem); border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.spk-ix__a { font-family: var(--ms-font-display); font-weight: 200; font-size: 2rem; line-height: 1; color: var(--ms-brand); transition: transform 0.3s var(--ms-ease, ease); }
.spk-ix__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ms-ink); text-decoration: none; transition: color 0.2s ease; }
.spk-ix__t:hover, .spk-ix__t:focus-visible { color: var(--ms-brand); }
.spk-ix__list li:hover .spk-ix__a { transform: translateX(0.35rem); }
.spk-ix__d { max-width: 52ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.spk-ix__d a { color: var(--ms-brand); text-underline-offset: 0.22em; }
@media (max-width: 64rem) {
	.spk-ix__list li { grid-template-columns: 3.5rem minmax(0, 1fr); row-gap: 0.6rem; }
	.spk-ix__d { grid-column: 2; }
}

/* ---------- FAQ aside CTA ---------- */
.spk-faq-cta { margin-block-start: 2rem; }

/* ---------- refinements ---------- */
.spk-hace .ms-lede { font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.6; color: var(--ms-ink); }
.spk-plate__in { aspect-ratio: 1 / 1; }
.spk-plate img { object-position: 28% 45%; }
.spk-despues .spk-state__p { font-size: clamp(1.02rem, 0.95rem + 0.25vw, 1.15rem); }
@media (max-width: 64rem) {
	.pg-close__scrim {
		background:
			linear-gradient(rgb(var(--pg-shade) / 0.58), rgb(var(--pg-shade) / 0.58)),
			linear-gradient(0deg, var(--ms-dark) 0%, var(--ms-dark) 24%, color-mix(in srgb, var(--ms-dark) 55%, transparent) 36%, transparent 52%);
	}
}

/* Hero: the display carries the whole H1, so it runs one step smaller and balanced */
.pg-hero__display { font-size: clamp(2.3rem, 1rem + 3.1vw, 3.9rem); }
.pg-hero__display .pg-line { max-width: 100%; text-wrap: balance; }
.pg-hero__display .pg-line > span { max-width: 100%; }

/* =====================================================================
   2026-10-03  Elegant plum pass (Speakers annex, ch. 05 and 06): 60 neutral / 30 plum / 10 accent.
   The dark territory sinks toward a near-black plum with grain; plum-04 only for kickers and links on dark;
   light sections sit on bone, never on a lavender wash. A saturated purple piece reads cheaper, not more on-brand.
   ===================================================================== */
/* token-exempt: two literals, neither with a token behind it. #0c070d is the operand the delivery mixes 30% of into --ms-dark to deepen the plum ground of this practice (the 2026-10-03 plum pass); #f6f4f2 is --spk-bone, the warm off-white of the timeline dots and the bento plates. No token in tokens.css equals either: --mb-ink-deep is #141112 and --mb-bone is #f6f6f6, both a different value, so substituting them would change the practice ground and the bone. Kept byte for byte; whether these earn tokens is a token-layer decision (Sebastian and Mari), reported in odd/tasks/reviewed-pages-batch-3.md. */
html[data-practice="speakers"] { --ms-dark: color-mix(in srgb, var(--mb-plum-07) 70%, #0c070d); --spk-bone: #f6f4f2; }
.spk-quees, .spk-hace, .spk-why, .spk-ix { background: var(--spk-bone); }
.spk-despues { background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--mb-plum-05) 38%, transparent), transparent 65%), radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--mb-plum-06) 30%, transparent), transparent 70%), var(--ms-dark) !important; }
.ms-on-dark .ms-kicker, .ms-on-dark .ms-kicker__idx { color: var(--mb-plum-04); }

/* hero: the speaker stands right, clear of the copy; a deep plum shade on the copy side */
.spk-hero .pg-hero__media img { object-position: 50% 32%; }
@media (min-width: 64.01rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
	.spk-hero .pg-hero__media { inset-inline-start: 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
}
.spk-hero .pg-hero__scrim { background: linear-gradient(90deg, var(--ms-dark) 0%, color-mix(in srgb, var(--ms-dark) 80%, transparent) 38%, transparent 70%), radial-gradient(45% 60% at 18% 40%, color-mix(in srgb, var(--mb-plum-05) 30%, transparent), transparent 70%); }
.spk-hero .pg-hero__credential { color: var(--mb-plum-04); }

/* S.02 formats as quiet chips */
.spk-fmt { display: grid; gap: 1rem; padding-block: clamp(1.75rem, 3vw, 2.5rem) 0; }
.spk-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.spk-chips li { padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--mb-plum-03); background: var(--ms-on-dark); font-family: var(--ms-font-display); font-size: 1rem; color: var(--mb-plum-06); transition: background-color 0.3s ease, color 0.3s ease; }
.spk-chips li:hover { background: var(--mb-plum-06); color: var(--ms-on-dark); }
.spk-fmt__note { margin: 0.25rem 0 0; max-width: 60ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
@media (min-width: 64.01rem) { .spk-fmt { padding-inline-start: 5.75rem; } }

/* S.03 rounded framed plate and the talent promise */
.spk-plate__in { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 2rem 3.5rem -2rem rgb(0 0 0 / 0.7); }
.spk-promise { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--ms-on-dark); text-wrap: balance; padding-inline-start: 1.25rem; border-inline-start: 2px solid var(--mb-plum-04); }
.spk-despues .spk-ask { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); font-family: var(--ms-font-body, inherit); line-height: 1.6; color: rgb(255 255 255 / 0.76); border-block-start-color: rgb(255 255 255 / 0.14); max-width: 52ch; }

/* S.04 process as a horizontal six-step line */
.spk-proc { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.spk-proc .spk-idx-side { position: static; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: end; }
.spk-proc .spk-idx-side > div:first-child { grid-column: 1 / span 7; }
.spk-proc .spk-idx-side > .ms-lede { grid-column: 9 / span 4; }
.spk-proc .spk-idx-side > div:last-child { grid-column: 9 / span 4; }
.spk-tl { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(1rem, 1.6vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.spk-tl::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0.55rem; height: 1px; background: linear-gradient(90deg, var(--mb-plum-06), color-mix(in srgb, var(--mb-plum-06) 15%, transparent)); }
.spk-tl__i { position: relative; display: grid; align-content: start; gap: 0.55rem; padding-block-start: 2.25rem; }
.spk-tl__dot { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--spk-bone, var(--ms-on-dark)); border: 2px solid var(--mb-plum-06); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mb-plum-06) 10%, transparent); }
.spk-tl__i:last-child .spk-tl__dot { background: var(--mb-plum-06); }
.spk-tl__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--mb-plum-05); }
.spk-tl__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.1rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.15; color: var(--ms-ink); text-wrap: balance; }
.spk-tl__p { margin: 0; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
@media (min-width: 52.01rem) and (max-width: 72rem) { .spk-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; } .spk-tl::before { display: none; } }
@media (max-width: 64rem) { .spk-proc .spk-idx-side > * { grid-column: 1 / -1 !important; } .spk-proc .spk-idx-side { row-gap: 1.25rem; } }
@media (max-width: 52rem) {
	.spk-tl { grid-template-columns: 1fr; row-gap: 1.75rem; padding-inline-start: 2rem; }
	.spk-tl::before { inset-block: 0.55rem 0; inset-inline-start: 0.5rem; inset-inline-end: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--mb-plum-06), color-mix(in srgb, var(--mb-plum-06) 15%, transparent)); }
	.spk-tl__i { padding-block-start: 0; }
	.spk-tl__dot { inset-inline-start: -2rem; }
}

/* S.05 bento: one deep plum lead card, five bone glass cards */
.spk-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.spk-bento > li { position: relative; display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.6rem, 2.6vw, 2.2rem); border-radius: 1.5rem; background: color-mix(in srgb, var(--ms-on-dark) 78%, transparent); border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 1.5rem 3rem -2rem rgb(52 24 58 / 0.35); transition: transform 0.5s var(--ms-ease), box-shadow 0.5s var(--ms-ease); }
.spk-bento > li:hover { transform: translateY(-4px); box-shadow: 0 2rem 3.5rem -2rem rgb(52 24 58 / 0.45); }
.spk-bento > li.spk-bento__c--lead { grid-row: span 2; align-content: end; min-height: 22rem; color: var(--ms-on-dark); border-color: rgb(255 255 255 / 0.06); background: radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--mb-plum-05) 55%, transparent), transparent 60%), var(--ms-dark); }
.spk-bento__n { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); line-height: 0.85; color: var(--mb-plum-06); }
.spk-bento__c--lead .spk-bento__n { position: absolute; inset-block-start: 1.75rem; inset-inline-start: 2rem; font-size: clamp(5rem, 3rem + 5vw, 8rem); color: rgb(255 255 255 / 0.12); }
.spk-bento__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.2rem, 1.02rem + 0.5vw, 1.45rem); line-height: 1.15; color: var(--ms-ink); text-wrap: balance; }
.spk-bento__c--lead .spk-bento__t { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 300; color: var(--ms-on-dark); }
.spk-bento__p { margin: 0; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.spk-bento__c--lead .spk-bento__p { font-size: var(--ms-body); color: rgb(255 255 255 / 0.76); }
@media (max-width: 64rem) { .spk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spk-bento > li.spk-bento__c--lead { grid-column: 1 / -1; grid-row: auto; min-height: 16rem; } }
@media (max-width: 40rem) { .spk-bento { grid-template-columns: 1fr; } }

/* S.06 two destination cards */
.spk-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.spk-go__c { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; column-gap: 1.5rem; align-items: center; padding: clamp(1.75rem, 3vw, 2.4rem); border-radius: 1.5rem; text-decoration: none; color: var(--ms-ink); background: var(--ms-on-dark); border: 1px solid var(--mb-plum-02); transition: border-color 0.3s ease, transform 0.5s var(--ms-ease); }
.spk-go__c:hover, .spk-go__c:focus-visible { border-color: var(--mb-plum-06); transform: translateY(-3px); }
.spk-go__c:focus-visible { outline: 2px solid var(--mb-plum-06); outline-offset: 4px; }
.spk-go__k, .spk-go__t, .spk-go__d { grid-column: 1; }
.spk-go__c .ms-cta__circle { grid-column: 2; grid-row: 1 / span 3; }
.spk-go__k { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--mb-plum-05); }
.spk-go__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.1; color: var(--mb-plum-06); }
.spk-go__d { font-size: var(--ms-body-sm); line-height: 1.5; color: var(--ms-ink-soft); }
@media (max-width: 52rem) { .spk-go { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .spk-bento > li, .spk-go__c, .spk-chips li { transition: none; } }

/* closing: two-line titular sized to the wider lead so the routes panel keeps its place */
#contacto-cierre .pg-close__lead { max-width: 46rem; }
#spk-close-title { font-size: clamp(2.2rem, 1rem + 3vw, 3.9rem); }
/* bento: the sixth card closes the grid as a full-width strip */
.spk-bento > li:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr); align-items: center; column-gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 64rem) { .spk-bento > li:last-child { grid-template-columns: 1fr; } }

/* ---------- 2026-10-03 round 2 ---------- */
/* S.01: statement, step flow, closing line; the 10-year stat replaces the side paragraph */
.spk-stat { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
.spk-stat__n { font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--mb-plum-06); }
.spk-stat__t { max-width: 30ch; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.spk-hard { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); padding-block-start: clamp(2rem, 3.5vw, 3rem); border-block-start: 1px solid var(--mb-plum-03); }
.spk-hard__lead { margin: 0; max-width: 28ch; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.spk-hard__lead span { color: var(--mb-plum-06); font-weight: 600; }
.spk-flow { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.spk-flow li { position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.1rem 1.1rem 1.25rem; border-radius: 1rem; background: var(--ms-on-dark); border: 1px solid var(--mb-plum-02); font-family: var(--ms-font-display); font-size: 1.05rem; line-height: 1.25; color: var(--ms-ink); }
.spk-flow li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -0.62rem; width: 0.5rem; height: 0.5rem; border-block-start: 1.5px solid var(--mb-plum-04); border-inline-end: 1.5px solid var(--mb-plum-04); transform: translateY(-50%) rotate(45deg); }
.spk-flow__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); color: var(--mb-plum-05); }
.spk-hard__end { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.1; color: var(--mb-plum-06); }
@media (max-width: 72rem) { .spk-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spk-flow li:nth-child(3)::after { display: none; } }
@media (max-width: 40rem) { .spk-flow { grid-template-columns: 1fr; } .spk-flow li::after { display: none; } }

/* S.02: lede one step quieter */
.spk-hace .ms-lede { font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); max-width: 36ch; }

/* S.03: intro, promise, four service tiles, one closing line */
.spk-after { gap: clamp(1.5rem, 2.6vw, 2rem); }
.spk-after__intro { margin: 0; max-width: 44ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: rgb(255 255 255 / 0.72); }
.spk-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.spk-svc li { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: 1rem; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); }
.spk-svc__t { font-family: var(--ms-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; color: var(--ms-on-dark); }
.spk-svc__d { font-size: var(--ms-body-sm); line-height: 1.45; color: rgb(255 255 255 / 0.68); }
.spk-after__end { margin: 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--mb-plum-04); }
@media (max-width: 40rem) { .spk-svc { grid-template-columns: 1fr; } }

/* S.06: both destination cards share one height */
.spk-go > li { display: flex; }
.spk-go__c { flex: 1; min-height: 10rem; }