/* =====================================================================
   Headhunting: practice page (template 11.2, docs/design-system.md).
   House territory (wine). Prefix: hh-
   Ported from the inline <style> block of the delivered headhunting.html
   lines 23-230 (T6, reviewed-pages-batch-2). Faithful port: only colour is
   tokenized (#fff -> --ms-on-dark for a text/icon colour, #3f151c ->
   --mb-vino-07, whose value it is; the unreachable fallback of
   var(--mb-vino-07, #3f151c) is dropped because --mb-vino-07 is defined at
   :root in tokens.css). Two literals stay, each declared at its own rule
   with a token-exempt comment: the #000 mask stops of the desktop hero
   portrait, and the #f5f5f5 fallback of the undefined --ms-paper.
   Loads on this page only, AFTER components.css and page.css - the exact set
   the delivered file links. It links neither marble-polish.css nor
   marble-templates.css, so neither loads here; the page key keeps it out of
   both. The hero focus override is written .pg-hero.hh-hero so it outranks a
   bare .pg-hero rule by specificity rather than by stylesheet order, as
   blog.css, carrera.css and contacto.css do.
   The .pg-exl / .pg-explora block at the end carries the pg- prefix but
   exists nowhere else in the delivery (0 occurrences in its CSS and in its
   other 58 files), so it is this page's own vocabulary and belongs here.
   ===================================================================== */
/* =====================================================================
   Headhunting: practice page (template 11.2, docs/design-system.md)
   House territory (vinotinto). Page chrome comes from marble-page.css;
   only the sections below are specific to this page.
   ===================================================================== */
.pg-hero.hh-hero { --pg-focus: 62% 30%; --pg-focus-m: 64% 22%; }
.pg-logo--house svg { filter: none; }
/* Hero portrait: slide right and drop below the nav so her face clears the copy (2026-10-02) */
@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. */
	.hh-hero .pg-hero__media { inset-inline-start: 26%; inset-block-start: 4.75rem;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
		mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 9%);
		-webkit-mask-composite: source-in; mask-composite: intersect; }
	.hh-hero .pg-hero__media img { object-position: 60% 18%; }
}

/* ---------- Hero: slow reframing drift (Home hero language) ---------- */
.pg-hero__media img { transform-origin: 50% 50%; animation: hh-reframe 32s ease-in-out 2.4s infinite alternate both; }
@keyframes hh-reframe {
	0%   { transform: scale(1.04) translate(0, 0); }
	35%  { transform: scale(1.09) translate(-1.6%, 1.2%); }
	70%  { transform: scale(1.06) translate(1.4%, -0.8%); }
	100% { transform: scale(1.08) translate(-0.6%, -1.4%); }
}

/* Hero: title in two lines (light / bold), no side panel; facts live in the aside */
.hh-hero .pg-hero__content { width: min(62rem, 74vw); }
.hh-hero .pg-hero__lede { max-width: 34rem; }
.hh-hero .pg-hero__aside { gap: 0.7rem; }
@media (max-width: 64rem) { .hh-hero .pg-hero__content { width: auto; padding-block-end: 13rem; } }

/* ---------- S.00 statement band ---------- */
.hh-statement { padding-block: clamp(3rem, 5vw, 4.5rem); }
.hh-statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); }
.hh-statement__main { grid-column: 1 / span 9; margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.15rem); line-height: 1.22; color: var(--ms-ink); text-wrap: balance; }
.hh-statement__main strong { font-weight: 600; }
.hh-statement__sub { grid-column: 1 / span 8; margin: 1.1rem 0 0; font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-subtle); }
@media (max-width: 64rem) {
	.hh-statement__main, .hh-statement__sub { grid-column: 1 / -1; }
}

/* ---------- S.01 Seis niveles: editorial index (sticky sidebar + numbered rows) ---------- */
.hh-idx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.hh-idx-side { grid-column: 1 / span 4; position: sticky; top: 7rem; display: grid; gap: 1.5rem; }
.hh-idx-side .ms-title, .hh-idx-side .ms-lede { margin: 0; }
.hh-idx { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.hh-idx li { border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.hh-idx__row {
	position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;
	padding-block: clamp(1.35rem, 2.2vw, 1.85rem); color: var(--ms-ink); text-decoration: none; isolation: isolate;
}
.hh-idx__row::before { content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--ms-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 80%); opacity: 0; transition: opacity 0.5s var(--ms-ease); }
.hh-idx__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ms-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ms-ease); }
.hh-idx__n { align-self: start; padding-block-start: 0.55rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-ink-subtle); font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.hh-idx__body { display: grid; gap: 0.35rem; transition: translate 0.6s var(--ms-ease); }
.hh-idx__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.6rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.hh-idx__d { font-size: var(--ms-body-sm); line-height: 1.5; color: var(--ms-ink-soft); }
.hh-idx__row:is(:hover, :focus-visible)::before { opacity: 1; }
.hh-idx__row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.hh-idx__row:is(:hover, :focus-visible) .hh-idx__n { color: var(--ms-brand); }
.hh-idx__row:is(:hover, :focus-visible) .hh-idx__body { translate: 0.5rem 0; }
.hh-idx__row:is(:hover, :focus-visible) .hh-idx__t { font-weight: 500; }
.hh-idx__row:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.hh-idx__row:is(:hover, :focus-visible) .ms-cta__circle svg { transform: translateX(3px); }
.hh-idx__row:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }

.hh-note { position: relative; margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.hh-note::before { content: ""; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 2px; background: var(--ms-brand); }
.hh-note p { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.1rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.35; color: var(--ms-ink); text-wrap: pretty; }
.hh-note p strong { font-weight: 600; }
@media (max-width: 64rem) {
	.hh-idx-side { grid-column: 1 / -1; position: static; margin-block-end: 2.5rem; }
	.hh-idx { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
	.hh-idx__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.85rem; }
	.hh-idx__row::before { inset-inline: -0.5rem; }
}

/* ---------- S.02 discreción: dark, sticky portrait + restriction list ---------- */
.hh-discretion { background: var(--ms-dark); }
.hh-disc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.hh-disc-media { grid-column: 1 / span 5; position: sticky; top: 7rem; }
.hh-disc-media .ms-frame { aspect-ratio: 2 / 3; }
.hh-disc-media .ms-frame img { object-position: 40% 40%; }
.hh-disc-body { grid-column: 7 / span 6; display: grid; gap: 1.75rem; }
.hh-disc-lead { margin: 0; font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + 0.8vw, 1.65rem); line-height: 1.25; color: var(--ms-on-dark); text-wrap: balance; }
.hh-disc-body p.hh-disc-text { margin: 0; font-size: var(--ms-body); line-height: 1.75; color: var(--ms-on-dark-soft); }
.hh-disc-body p.hh-disc-text strong { font-weight: 600; color: var(--ms-on-dark); }
.hh-disc-body p.hh-disc-cue { margin: 0; font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.4; color: var(--ms-on-dark); text-wrap: pretty; }
.hh-restrict { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: hh-r; }
.hh-restrict li { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem; padding-block: 1.25rem; border-block-end: 1px solid rgb(255 255 255 / 0.14); }
.hh-restrict li:first-child { border-block-start: 1px solid rgb(255 255 255 / 0.14); }
.hh-restrict__n { counter-increment: hh-r; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-brand-line); font-variant-numeric: tabular-nums; }
.hh-restrict__n::before { content: counter(hh-r, decimal-leading-zero); }
.hh-restrict__body { display: grid; gap: 0.4rem; }
.hh-restrict__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--ms-on-dark); }
.hh-restrict__d { margin: 0; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-on-dark-soft); }
.hh-disc-close { margin: 0; padding-block-start: 0.5rem; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.8rem); line-height: 1.25; color: var(--ms-on-dark); text-wrap: balance; }
.hh-disc-close strong { font-weight: 600; }
@media (max-width: 64rem) {
	.hh-disc-media { grid-column: 1 / -1; position: static; margin-block-end: 2rem; }
	.hh-disc-media .ms-frame { aspect-ratio: 4 / 3; max-width: 26rem; }
	.hh-disc-body { grid-column: 1 / -1; }
}

/* ---------- S.03 criterio: editorial spread ---------- */
.hh-crit-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: end; }
.hh-crit-head__main { grid-column: 1 / span 5; }
.hh-crit-head__main .ms-title { margin: 0; }
.hh-crit-quote { grid-column: 7 / span 6; margin: 0; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--ms-brand); font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.22; color: var(--ms-ink); text-wrap: pretty; }
.hh-crit-quote strong { font-weight: 600; }

.hh-crit-lead { margin: clamp(3.5rem, 6vw, 5rem) 0 1.5rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-soft); }
.hh-crit-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); margin: 0; padding: 0; list-style: none; }
.hh-crit-col { display: grid; align-content: start; gap: 0.9rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--ms-ink); }
.hh-crit-col__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(--ms-brand); font-variant-numeric: tabular-nums; }
.hh-crit-col__t { margin: 0; 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; }
.hh-crit-col__d { margin: 0; max-width: 30ch; font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); }

.hh-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: center; margin-block-start: clamp(4.5rem, 8vw, 7rem); }
.hh-spread__media { grid-column: 1 / span 5; position: relative; padding-block-end: 4rem; }
.hh-spread__main { aspect-ratio: 4 / 5; width: 82%; }
/* token-exempt: --ms-paper is not defined anywhere in this design system (0 occurrences in tokens/, marble-child/ and the delivery's own CSS), so the fallback #f5f5f5 is the value that actually renders: the 6px mat the inset photograph sits on. No token carries #f5f5f5 - the nearest, --mb-bone (--ms-ground), is #f6f6f6, one step off on all three channels - so substituting it would change the rendered outline, and inventing an --ms-paper token is a token-layer decision (Sebastian and Mari), not a port decision. The delivered declaration is kept byte for byte and the gap is reported in odd/tasks/reviewed-pages-batch-2.md. */
.hh-spread__inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; outline: 6px solid var(--ms-paper, #f5f5f5); }
.hh-spread__media picture { display: block; height: 100%; }
.hh-spread__media img { width: 100%; height: 100%; object-fit: cover; }
.hh-spread__text { grid-column: 7 / span 6; display: grid; }
.hh-feature { display: grid; justify-items: start; gap: 1rem; padding-block: 2rem; border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.hh-feature:first-child { padding-block-start: 0; }
.hh-feature:last-child { border-block-end: 0; padding-block-end: 0; }
.hh-feature__k { 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); }
.hh-feature__p { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.2rem, 1rem + 0.55vw, 1.5rem); line-height: 1.3; color: var(--ms-ink); text-wrap: pretty; }
@media (max-width: 64rem) {
	.hh-crit-head__main, .hh-crit-quote { grid-column: 1 / -1; }
	.hh-crit-quote { margin-block-start: 2rem; }
	.hh-crit-cols { grid-template-columns: 1fr; row-gap: 2rem; }
	.hh-spread__media { grid-column: 1 / -1; width: 100%; max-width: 28rem; margin-block-end: 3rem; }
	.hh-spread__text { grid-column: 1 / -1; }
}

/* ---------- Closing: longer heading than the reference, scale it down ---------- */
#contacto-cierre .pg-close__h { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.75rem); margin-block-end: 1.75rem; }
#contacto-cierre .pg-close__h strong { font-size: 1.12em; }

/* ---------- Footer in vinotinto 07 (Home V3, Marketing 2026-09-28); closing photo fades into it ---------- */
.pg-foot, .pg-close__frame, .pg-close::after { background: var(--mb-vino-07); }
.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(--mb-vino-07) 0%, rgb(63 21 28 / 0.72) 22%, rgb(63 21 28 / 0) 42%),
		radial-gradient(50% 45% at 20% 38%, color-mix(in srgb, var(--ms-brand) 40%, transparent), transparent 70%);
}
@media (max-width: 64rem) {
	.pg-close__scrim { background: linear-gradient(0deg, var(--mb-vino-07) 0%, rgb(63 21 28 / 0.85) 30%, rgb(var(--pg-shade) / 0.7) 60%, rgb(var(--pg-shade) / 0.58) 100%); }
}

/* ---------- Motion (transform and opacity only; hidden states only while armed) ---------- */
.hh-levels-sec.is-armed:not(.is-in) .hh-idx li { opacity: 0; transform: translateY(1rem); }
.hh-levels-sec.is-in .hh-idx li { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.hh-levels-sec.is-in .hh-idx li:nth-child(2) { transition-delay: 0.05s; }
.hh-levels-sec.is-in .hh-idx li:nth-child(3) { transition-delay: 0.1s; }
.hh-levels-sec.is-in .hh-idx li:nth-child(4) { transition-delay: 0.15s; }
.hh-levels-sec.is-in .hh-idx li:nth-child(5) { transition-delay: 0.2s; }
.hh-levels-sec.is-in .hh-idx li:nth-child(6) { transition-delay: 0.25s; }

.hh-discretion.is-armed:not(.is-in) .hh-restrict li { opacity: 0; transform: translateY(1rem); }
.hh-discretion.is-in .hh-restrict li { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.hh-discretion.is-in .hh-restrict li:nth-child(2) { transition-delay: 0.08s; }
.hh-discretion.is-in .hh-restrict li:nth-child(3) { transition-delay: 0.16s; }

.hh-criterio.is-armed:not(.is-in) .hh-crit-col { opacity: 0; transform: translateY(1.5rem); }
.hh-criterio.is-in .hh-crit-col { transition: opacity 0.8s ease, transform 1s var(--ms-ease); }
.hh-criterio.is-in .hh-crit-cols > :nth-child(2) { transition-delay: 0.1s; }
.hh-criterio.is-in .hh-crit-cols > :nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
	.hh-idx li, .hh-idx__row, .hh-idx__row *, .hh-crit-col, .hh-restrict li { transition: none !important; }
	.pg-hero__media img { animation: none; }
}

/* ---------- Siga explorando: soft vino-01 band + index rows ---------- */
.pg-explora { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--mb-vino-01) 85%, transparent) 9%, color-mix(in srgb, var(--mb-vino-01) 85%, transparent) 91%, transparent 100%); }
.pg-exl { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.pg-exl li { border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.pg-exl__row {
	position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;
	padding-block: clamp(1.35rem, 2.2vw, 1.85rem); color: var(--ms-ink); text-decoration: none; isolation: isolate;
}
.pg-exl__row::before { content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--ms-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 80%); opacity: 0; transition: opacity 0.5s var(--ms-ease); }
.pg-exl__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ms-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ms-ease); }
.pg-exl__n { align-self: start; padding-block-start: 0.55rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-ink-subtle); font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.pg-exl__body { display: grid; gap: 0.35rem; transition: translate 0.6s var(--ms-ease); }
.pg-exl__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.pg-exl__d { max-width: 52ch; font-size: var(--ms-body-sm); line-height: 1.5; color: var(--ms-ink-soft); }
.pg-exl__row:is(:hover, :focus-visible)::before { opacity: 1; }
.pg-exl__row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.pg-exl__row:is(:hover, :focus-visible) .pg-exl__n { color: var(--ms-brand); }
.pg-exl__row:is(:hover, :focus-visible) .pg-exl__body { translate: 0.5rem 0; }
.pg-exl__row:is(:hover, :focus-visible) .pg-exl__t { font-weight: 500; }
.pg-exl__row:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.pg-exl__row:is(:hover, :focus-visible) .ms-cta__circle svg { transform: translateX(3px); }
.pg-exl__row:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
@media (max-width: 40rem) {
	.pg-exl__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.85rem; }
	.pg-exl__row::before { inset-inline: -0.5rem; }
}