/* =====================================================================
   Insights: hub editorial (template 11.2). Prefix: ins-
   Ported from the inline <style> block of the delivered insights.html
   lines 23-225 (T6, reviewed-pages-batch-3). Faithful port: nothing is
   retyped, and only colour is tokenized -
     #fff -> var(--ms-on-dark) (9x; the token's value is #ffffff).
   No literal stays: every hex in this block was #ffffff.
   Zero selector deviations: every selector is the delivery's own.
   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 ins-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.
   ===================================================================== */
/* =====================================================================
   Insights: hub editorial (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 { --pg-focus: 50% 55%; --pg-focus-m: 50% 50%; }
.pg-logo--house svg { filter: none; }

/* ---------- Hero: long H1, scaled so it sits on two blocks ---------- */
.ins-hero .pg-hero__content { width: min(64rem, 76vw); }
.ins-hero .pg-hero__display { font-size: clamp(2.3rem, 1rem + 3.3vw, 4.1rem); }
.ins-hero .pg-hero__lede { max-width: 38rem; }
/* 2026-10-02: the bright tower sat behind "Colombia:"; the plate is dimmed and the left scrim reaches further */
.ins-hero .pg-hero__media img { filter: grayscale(1) contrast(1.04) brightness(calc(0.78 - var(--pg-p) * 0.3)); }
.ins-hero .pg-hero__scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(var(--pg-shade) / 0.55) 0%, rgb(var(--pg-shade) / 0.42) 48%, rgb(var(--pg-shade) / 0.12) 70%, transparent 82%); }
@media (max-width: 64rem) { .ins-hero .pg-hero__content { width: auto; } }

/* ---------- S.01 Tres formatos: bento of two cards and a book feature row (round 3, 2026-10-02) ---------- */
.ins-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ms-grid-gap); row-gap: clamp(4.5rem, 7vw, 6rem); align-items: stretch; }
.ins-card { position: relative; display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--ms-radius-lg); overflow: hidden; isolation: isolate; }
.ins-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ins-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border-radius: 999px; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ms-brand); background: color-mix(in srgb, var(--ms-brand) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-brand) 20%, transparent); }
.ins-f__n { margin: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ms-brand); font-variant-numeric: tabular-nums; }
.ins-f__t { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3.2rem); line-height: 0.95; letter-spacing: -0.015em; color: var(--ms-ink); text-wrap: balance; }
.ins-f__p { margin: 0; max-width: 44ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.ins-card .ms-cta, .ins-book__txt .ms-cta { justify-self: start; padding-block-start: 0.5rem; }
.ins-card .ms-cta { align-self: end; }
.ins-card--blog, .ins-card--talks { grid-template-rows: auto auto auto auto 1fr; }

/* Blog: light glass with a stack of article sheets fanning out at the top right */
.ins-card--blog { grid-column: 1 / span 6; }
.ins-card__art { position: relative; width: clamp(11rem, 16vw, 13.5rem); height: 5.5rem; margin: 0.6rem 0 0.4rem 1.6rem; }
.ins-sheet { position: absolute; inset: 0; display: grid; align-content: start; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 0.9rem; background: var(--ms-on-dark);
	box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(51 51 51 / 0.28), inset 0 0 0 1px rgb(51 51 51 / 0.06); transform-origin: 20% 100%; transition: transform 0.8s var(--ms-ease); }
.ins-sheet:nth-child(1) { transform: rotate(-9deg) translate(-1.25rem, 0.5rem); opacity: 0.75; }
.ins-sheet:nth-child(2) { transform: rotate(-4deg) translate(-0.5rem, 0.2rem); opacity: 0.9; }
.ins-sheet i { display: block; width: 34%; height: 0.32rem; border-radius: 999px; background: var(--ms-brand); }
.ins-sheet b { display: block; height: 0.42rem; border-radius: 999px; background: rgb(51 51 51 / 0.14); }
.ins-sheet b.s { width: 62%; }
.ins-card--blog:is(:hover, :focus-within) .ins-sheet:nth-child(1) { transform: rotate(-13deg) translate(-2rem, 0.7rem); }
.ins-card--blog:is(:hover, :focus-within) .ins-sheet:nth-child(2) { transform: rotate(-6deg) translate(-1rem, 0.35rem); }

/* Marble Talks: dark vino card, large waveform with a play mark */
.ins-card--talks { grid-column: 7 / span 6; color: var(--ms-on-dark);
	background: radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--mb-vino-05) 70%, transparent), transparent 70%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--mb-vino-06) 55%, transparent), transparent 70%), var(--mb-vino-07);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 2rem 3.5rem -2rem rgb(63 21 28 / 0.55); }
.ins-card--talks .ins-f__t { color: var(--ms-on-dark); }
/* Marble Talks logo (vector reconstruction, tools/build-marble-talks-logo.py) in place of the text title */
.ins-f__t--logo { line-height: 0; }
.ins-talks-logo { display: block; width: auto; height: clamp(3.4rem, 2.6rem + 2vw, 4.4rem); color: var(--ms-on-dark); }
.ins-card--talks .ins-f__n { color: var(--mb-vino-04); }
.ins-card--talks .ins-f__p { color: rgb(255 255 255 / 0.78); }
.ins-card--talks .ins-chip { color: var(--ms-on-dark); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.ins-player { display: flex; align-items: center; gap: 1.1rem; margin-block: 0.35rem 0.25rem; }
.ins-play { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--mb-vino-04); box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(192 74 86 / 0.6); }
.ins-play svg { width: 1.2rem; height: 1.2rem; fill: var(--ms-on-dark); translate: 1px 0; }
.ins-wave { display: block; flex: 1; width: 100%; max-width: 24rem; height: auto; }
.ins-wave rect { fill: var(--ms-on-dark); opacity: 0.28; }
.ins-wave rect.on { fill: var(--mb-vino-04); opacity: 1; }

/* El futuro de Colombia: the book floats in real colour and breaks out of a soft vino panel; depth only via drop-shadow */
.ins-f--book { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: center;
	padding-block: clamp(2.5rem, 4vw, 3.5rem); border-radius: var(--ms-radius-lg);
	background: radial-gradient(55% 120% at 20% 50%, color-mix(in srgb, var(--ms-brand) 12%, transparent), transparent 70%), color-mix(in srgb, var(--mb-vino-01) 80%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-brand) 8%, transparent); }
.ins-book__cover { grid-column: 2 / span 4; display: flex; justify-content: center; margin-block: clamp(-6.5rem, -7vw, -4rem) clamp(-1rem, -1.5vw, -0.5rem); }
.ins-book__cover picture { display: block; }
.ins-book__cover img { display: block; width: clamp(11rem, 7rem + 9vw, 16rem); height: auto; transform: rotate(-4deg); transition: transform 0.8s var(--ms-ease);
	filter: drop-shadow(0 2.25rem 2.25rem rgb(20 17 18 / 0.32)) drop-shadow(0 0.35rem 0.6rem rgb(20 17 18 / 0.16)); }
.ins-f--book:is(:hover, :focus-within) .ins-book__cover img { transform: rotate(-1.5deg) translateY(-8px); }
.ins-book__txt { grid-column: 7 / span 5; display: grid; gap: 1.1rem; align-content: start; }
.ins-book__txt .ins-card__top { justify-content: flex-start; gap: 1.25rem; }
.ins-stats { display: flex; gap: clamp(2rem, 4vw, 3.5rem); margin: 0.5rem 0 0; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.ins-stats div { display: grid; gap: 0.35rem; }
.ins-stats dt { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ins-stats dd { margin: 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-ink-subtle); }
@media (max-width: 64rem) {
	.ins-card--blog, .ins-card--talks { grid-column: 1 / -1; }
	.ins-book__cover { grid-column: 1 / span 5; }
	.ins-book__txt { grid-column: 6 / span 7; padding-inline-end: 1.5rem; }
}
@media (max-width: 40rem) {
	.ins-f--book { grid-template-columns: 1fr; row-gap: 2rem; padding-inline: 1.25rem; }
	.ins-book__cover, .ins-book__txt { grid-column: 1 / -1; padding-inline-end: 0; }
	.ins-card__top { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ins-sheet { transition: none; } }

/* ---------- S.02 Blog por tema: sticky header + index rows ---------- */
.ins-idx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.ins-idx-side { grid-column: 1 / span 5; position: sticky; top: 7rem; display: grid; gap: 1.75rem; }
.ins-idx-side .ms-title { margin: 0; }
.ins-idx-side p, .ins-idx-main > p { margin: 0; max-width: 46ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.ins-idx-side .ms-kicker { color: var(--ms-ink); }
.ins-idx-main { grid-column: 7 / span 6; display: grid; gap: 2rem; }
.ins-idx { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.ins-idx li { border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.ins-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.25rem, 2vw, 1.65rem); color: var(--ms-ink); text-decoration: none; isolation: isolate;
}
.ins-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); }
.ins-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); }
.ins-idx__n { 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; }
.ins-idx__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; transition: translate 0.6s var(--ms-ease); }
.ins-idx__row:is(:hover, :focus-visible)::before { opacity: 1; }
.ins-idx__row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.ins-idx__row:is(:hover, :focus-visible) .ins-idx__n { color: var(--ms-brand); }
.ins-idx__row:is(:hover, :focus-visible) .ins-idx__t { translate: 0.5rem 0; font-weight: 500; }
.ins-idx__row:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.ins-idx__row:is(:hover, :focus-visible) .ms-cta__circle svg { transform: translateX(3px); }
.ins-idx__row:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
@media (max-width: 64rem) {
	.ins-idx-side { grid-column: 1 / -1; position: static; margin-block-end: 2.5rem; }
	.ins-idx-main { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
	.ins-idx__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.85rem; }
	.ins-idx__row::before { inset-inline: -0.5rem; }
}

/* ---------- S.03 Criterio propio: B&W plate + lead + numbered points ---------- */
.ins-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: start; }
.ins-plate { grid-column: 1 / span 5; margin: 0; }
.ins-plate picture { display: block; }
.ins-plate { position: relative; border-radius: var(--ms-radius-lg); overflow: hidden; isolation: isolate; box-shadow: 0 2rem 4rem -2rem rgb(0 0 0 / 0.6); }
.ins-plate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(0.96) brightness(0.98); }
.ins-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: linear-gradient(180deg, transparent 55%, rgb(var(--pg-shade) / 0.55) 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.ins-criterio { position: relative; isolation: isolate; overflow: clip; }
.ins-criterio::before { content: ""; position: absolute; z-index: -1; inset: 10% -10% auto auto; width: 55vw; aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ms-brand) 32%, transparent), transparent 72%); }
.ins-crit { grid-column: 7 / span 6; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); align-content: start; }
.ins-lead { margin: 0; max-width: 24em; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.18; color: var(--ms-ink); text-wrap: balance; }
.ins-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ins-point { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; padding: clamp(1.5rem, 2.4vw, 2rem);
	background: radial-gradient(15rem 11rem at var(--gx) var(--gy), rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 70%), var(--ms-glass-dark);
	box-shadow: var(--ms-glass-dark-inset), 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5); }
.ins-point .ins-point__p { color: rgb(255 255 255 / 0.82); }
.ins-point__n { 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; }
.ins-point__p { margin: 0; max-width: 46ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.ins-crit .ms-cta { justify-self: start; }
@media (max-width: 64rem) {
	.ins-plate { grid-column: 1 / -1; max-width: 22rem; margin-block-end: 2.5rem; }
	.ins-crit { grid-column: 1 / -1; }
}
@media (max-width: 40rem) { .ins-point { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.85rem; } }

/* ---------- Closing ---------- */
#contacto-cierre .pg-close__lead { max-width: 44rem; }
/* bright photo dimmed so the copy reads (2026-10-02, same treatment as .tp-close--dim) */
#contacto-cierre .pg-close__media img { filter: grayscale(1) contrast(1.04) brightness(0.68); }
#contacto-cierre .pg-close__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(var(--pg-shade) / 0.88) 0%, rgb(var(--pg-shade) / 0.7) 38%, rgb(var(--pg-shade) / 0.25) 62%, transparent 80%); }

/* ---------- Motion (transform and opacity only; hidden states only while armed) ---------- */
.ins-formatos.is-armed:not(.is-in) .ins-bento > * { opacity: 0; transform: translateY(1.5rem); }
.ins-formatos.is-in .ins-bento > * { transition: opacity 0.8s ease, transform 1s var(--ms-ease); }
.ins-formatos.is-in .ins-bento > :nth-child(2) { transition-delay: 0.12s; }
.ins-formatos.is-in .ins-bento > :nth-child(3) { transition-delay: 0.24s; }
.ins-por-tema.is-armed:not(.is-in) .ins-idx li { opacity: 0; transform: translateY(1rem); }
.ins-por-tema.is-in .ins-idx li { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.ins-por-tema.is-in .ins-idx li:nth-child(2) { transition-delay: 0.07s; }
.ins-por-tema.is-in .ins-idx li:nth-child(3) { transition-delay: 0.14s; }
.ins-por-tema.is-in .ins-idx li:nth-child(4) { transition-delay: 0.21s; }
.ins-criterio.is-armed:not(.is-in) .ins-point, .ins-criterio.is-armed:not(.is-in) .ins-plate { opacity: 0; transform: translateY(1rem); }
.ins-criterio.is-in .ins-point, .ins-criterio.is-in .ins-plate { transition: opacity 0.8s ease, transform 1s var(--ms-ease); }
.ins-criterio.is-in .ins-point:nth-child(2) { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
	.ins-bento > *, .ins-book__cover img, .ins-plate, .ins-point, .ins-idx li, .ins-idx__row, .ins-idx__row * { transition: none !important; }
	.ins-f--book:is(:hover, :focus-within) .ins-book__cover img { transform: rotate(-3deg); }
}

/* ---------- 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; }
}