/* Spartane Magazine Theme (global overrides)
   - Designed to be appended/linked after existing inline styles
   - Minimal coupling: targets shared patterns: body, headings, common cards, tables
   - Adds reusable blocks: .sp-mag-quote, .sp-mag-product, .sp-mag-shot
*/

:root{
  --sp-ink:#0b1220;
  --sp-muted:#5b6674;
  --sp-navy:#0a1628;
  --sp-blue:#2563eb;
  --sp-teal:#0d9488;
  --sp-bg:#ffffff;
  --sp-bg-soft:#f4f6f9;
  --sp-line:#e5e7eb;
  --sp-shadow:0 22px 60px rgba(2, 6, 23, 0.08);
  --sp-radius:24px;
  --sp-max:1240px;
}

html{scroll-behavior:smooth}
body{
  font-family:"DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color:var(--sp-ink) !important;
  background:var(--sp-bg) !important;
  line-height:1.5 !important;
  font-size:17px;
  overflow-x:hidden;
}

/* Guardrails: prevent mobile horizontal scroll */
*, *::before, *::after{ max-width:100%; }
img, svg, video, canvas{ max-width:100%; height:auto; }

/* Common layout wrappers */
.wrap, .w{
  width:min(calc(100% - 40px), var(--sp-max)) !important;
  margin:0 auto !important;
}

/* Headers / nav (works for both .topbar/.nav and Website-claude nav) */
.topbar{
  background:rgba(255,255,255,.9) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom:1px solid var(--sp-line) !important;
}
.nav, .bar{
  min-height:72px !important;
}
.nav-links a, .nv a{ color:var(--sp-muted) !important; font-weight:600 !important; }
.nav-links a:hover, .nv a:hover{ color:var(--sp-navy) !important; }

/* Brand logo */
.brand-mark{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:10px !important;
  overflow:hidden;
  width:auto !important;
  height:40px !important;
}
.brand-mark img{
  display:block;
  width:auto !important;
  height:40px !important;
  object-fit:contain;
}

/* Footer logo */
.sp-footer-logo{
  height:22px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
}
.foot > div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Premium background images (override SVG/data patterns)
   Unique photos per page. McKinsey enterprise feel.
   Updated: page-specific via body[data-page] selectors. */

body[data-page="home"]{
  --pg-hero:url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="metodologia"]{
  --pg-hero:url("https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="agentes"]{
  --pg-hero:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1478760329108-5c3ed9d495a0?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="arquitectura"]{
  --pg-hero:url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1448932223592-d1fc686e76ea?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="documentos"]{
  --pg-hero:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="kpis"]{
  --pg-hero:url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="roles"]{
  --pg-hero:url("https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="trazabilidad"]{
  --pg-hero:url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1556155092-490a1ba16284?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-erp"]{
  --pg-hero:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1531973576160-7125cd663d86?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-consultoria"]{
  --pg-hero:url("https://images.unsplash.com/photo-1553028826-f4804a6dba3b?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1552581234-26160f608093?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-outsystems"]{
  --pg-hero:url("https://images.unsplash.com/photo-1560179707-f14e90ef3623?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-lowcode"]{
  --pg-hero:url("https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1462826303086-329426d1aef5?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-vibe"]{
  --pg-hero:url("https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1557426272-fc759fdf7a8d?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1568992688065-536aad8a12f6?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-rpa"]{
  --pg-hero:url("https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1464938050520-ef2571e3e553?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1462899006636-339e08d1844e?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-saas"]{
  --pg-hero:url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1444653614773-995cb1ef9efa?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="vs-bpo"]{
  --pg-hero:url("https://images.unsplash.com/photo-1533073526757-2c8ca1df9f1c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1579389083395-4507e298a3b8?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1560472354-b33ff0c44a43?auto=format&fit=crop&w=1800&q=80");
}
/* ── Generated & new pages ──────────────────────────────────────────────── */
body[data-page="motor-mecanico"]{
  --pg-hero:url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1558618666-fcd25c85f82e?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1504639725590-34d0984388bd?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="agentes-negocio"]{
  --pg-hero:url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="28-agentes"]{
  --pg-hero:url("https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1555255707-c07966088b7b?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="plataforma"]{
  --pg-hero:url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1497215842964-222b430dc094?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="seguridad"]{
  --pg-hero:url("https://images.unsplash.com/photo-1563986768609-322da13575f2?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1510511459019-5dda7724fd87?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="ciclo"]{
  --pg-hero:url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="caso-cto"]{
  --pg-hero:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="caso-cfo"]{
  --pg-hero:url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="caso-compliance"]{
  --pg-hero:url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="caso-partners"]{
  --pg-hero:url("https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="roi"]{
  --pg-hero:url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1543286386-713bdd548da4?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="stack"]{
  --pg-hero:url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="gestion-cambios"]{
  --pg-hero:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="ciclo-tradicional"]{
  --pg-hero:url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1800&q=80");
}

/* Hero backgrounds */
.hero-art,
.hero-visual,
.hero-top,
.orbit-art{
  background-image: var(--pg-hero) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Section header backgrounds */
.band-visual,
.band-head,
.subhero-head,
.phase-head,
.role-visual,
.section-head,
.section-top,
.map-head,
.stat-visual,
.area-visual,
.story-top,
.chapter-left,
.stack-head,
.contrast-head,
.category-head,
.kpi-visual,
.bucket-visual,
.role-head,
.flow-head,
.insight-visual,
.innovation-head,
.timeline-head{
  background-image: var(--pg-alt1) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Deeper section backgrounds */
.mode-top,
.agent-top,
.track-top,
.pillar-top,
.feature-top,
.matrix-head,
.impact-head,
.metric-top,
.insight-head,
.verdict-head,
.flow-top,
.panel-head{
  background-image: var(--pg-alt2) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Variation modifiers */
.subhero-head.bars,
.subhero-head.timeline,
.subhero-head.grid,
.phase-head.bars,
.phase-head.timeline,
.role-visual.bars,
.role-visual.timeline,
.stat-visual.bars,
.stat-visual.timeline,
.area-visual.bars,
.area-visual.timeline,
.category-head.bars,
.category-head.grid,
.kpi-visual.bars,
.kpi-visual.timeline,
.bucket-visual.bars,
.bucket-visual.timeline,
.role-head.bars,
.role-head.timeline,
.flow-head.bars,
.flow-head.timeline,
.insight-visual.bars,
.insight-visual.timeline,
.band-head.graph-a,
.band-head.graph-b,
.band-head.graph-c,
.story-top.alt,
.story-top.time,
.contrast-head.time,
.section-top.alt,
.stack-head.alt{
  background-image: var(--pg-alt2) !important;
}
.mode-top.alt,
.mode-top.mesh,
.agent-top.alt,
.agent-top.mesh,
.track-top.alt,
.track-top.hero,
.pillar-top.alt,
.pillar-top.track,
.feature-top.b,
.feature-top.c,
.metric-top.b,
.metric-top.c,
.insight-head.a,
.insight-head.b,
.impact-head.timeline,
.impact-head.grid,
.verdict-head.grid,
.verdict-head.bars,
.flow-top.alt,
.flow-top.time,
.panel-head.track{
  background-image: var(--pg-hero) !important;
}

/* Contrast: white text on photo backgrounds */
.agent-top,
.area-visual,
.band-head,
.band-visual,
.bucket-visual,
.category-head,
.chapter-left,
.contrast-head,
.feature-top,
.flow-head,
.flow-top,
.hero-art,
.hero-top,
.hero-visual,
.impact-head,
.innovation-head,
.insight-head,
.insight-visual,
.kpi-visual,
.map-head,
.matrix-head,
.metric-top,
.mode-top,
.orbit-art,
.panel-head,
.phase-head,
.pillar-top,
.role-head,
.role-visual,
.section-head,
.section-top,
.stack-head,
.stat-visual,
.story-top,
.subhero-head,
.timeline-head,
.track-top,
.verdict-head{
  color:#fff !important;
}

.agent-top h1,
.agent-top h2,
.agent-top h3,
.area-visual h1,
.area-visual h2,
.area-visual h3,
.band-head h1,
.band-head h2,
.band-head h3,
.band-visual h1,
.band-visual h2,
.band-visual h3,
.bucket-visual h1,
.bucket-visual h2,
.bucket-visual h3,
.category-head h1,
.category-head h2,
.category-head h3,
.chapter-left h1,
.chapter-left h2,
.chapter-left h3,
.contrast-head h1,
.contrast-head h2,
.contrast-head h3,
.feature-top h1,
.feature-top h2,
.feature-top h3,
.flow-head h1,
.flow-head h2,
.flow-head h3,
.flow-top h1,
.flow-top h2,
.flow-top h3,
.hero-art h1,
.hero-art h2,
.hero-art h3,
.hero-top h1,
.hero-top h2,
.hero-top h3,
.hero-visual h1,
.hero-visual h2,
.hero-visual h3,
.impact-head h1,
.impact-head h2,
.impact-head h3,
.innovation-head h1,
.innovation-head h2,
.innovation-head h3,
.insight-head h1,
.insight-head h2,
.insight-head h3,
.insight-visual h1,
.insight-visual h2,
.insight-visual h3,
.kpi-visual h1,
.kpi-visual h2,
.kpi-visual h3,
.map-head h1,
.map-head h2,
.map-head h3,
.matrix-head h1,
.matrix-head h2,
.matrix-head h3,
.metric-top h1,
.metric-top h2,
.metric-top h3,
.mode-top h1,
.mode-top h2,
.mode-top h3,
.orbit-art h1,
.orbit-art h2,
.orbit-art h3,
.panel-head h1,
.panel-head h2,
.panel-head h3,
.phase-head h1,
.phase-head h2,
.phase-head h3,
.pillar-top h1,
.pillar-top h2,
.pillar-top h3,
.role-head h1,
.role-head h2,
.role-head h3,
.role-visual h1,
.role-visual h2,
.role-visual h3,
.section-head h1,
.section-head h2,
.section-head h3,
.section-top h1,
.section-top h2,
.section-top h3,
.stack-head h1,
.stack-head h2,
.stack-head h3,
.stat-visual h1,
.stat-visual h2,
.stat-visual h3,
.story-top h1,
.story-top h2,
.story-top h3,
.subhero-head h1,
.subhero-head h2,
.subhero-head h3,
.timeline-head h1,
.timeline-head h2,
.timeline-head h3,
.track-top h1,
.track-top h2,
.track-top h3,
.verdict-head h1,
.verdict-head h2,
.verdict-head h3{
  color:#fff !important;
  text-shadow:0 3px 20px rgba(2,6,23,.55);
}

.agent-top p,
.agent-top span,
.agent-top small,
.area-visual p,
.area-visual span,
.area-visual small,
.band-head p,
.band-head span,
.band-head small,
.band-visual p,
.band-visual span,
.band-visual small,
.bucket-visual p,
.bucket-visual span,
.bucket-visual small,
.category-head p,
.category-head span,
.category-head small,
.chapter-left p,
.chapter-left span,
.chapter-left small,
.contrast-head p,
.contrast-head span,
.contrast-head small,
.feature-top p,
.feature-top span,
.feature-top small,
.flow-head p,
.flow-head span,
.flow-head small,
.flow-top p,
.flow-top span,
.flow-top small,
.hero-art p,
.hero-art span,
.hero-art small,
.hero-top p,
.hero-top span,
.hero-top small,
.hero-visual p,
.hero-visual span,
.hero-visual small,
.impact-head p,
.impact-head span,
.impact-head small,
.innovation-head p,
.innovation-head span,
.innovation-head small,
.insight-head p,
.insight-head span,
.insight-head small,
.insight-visual p,
.insight-visual span,
.insight-visual small,
.kpi-visual p,
.kpi-visual span,
.kpi-visual small,
.map-head p,
.map-head span,
.map-head small,
.matrix-head p,
.matrix-head span,
.matrix-head small,
.metric-top p,
.metric-top span,
.metric-top small,
.mode-top p,
.mode-top span,
.mode-top small,
.orbit-art p,
.orbit-art span,
.orbit-art small,
.panel-head p,
.panel-head span,
.panel-head small,
.phase-head p,
.phase-head span,
.phase-head small,
.pillar-top p,
.pillar-top span,
.pillar-top small,
.role-head p,
.role-head span,
.role-head small,
.role-visual p,
.role-visual span,
.role-visual small,
.section-head p,
.section-head span,
.section-head small,
.section-top p,
.section-top span,
.section-top small,
.stack-head p,
.stack-head span,
.stack-head small,
.stat-visual p,
.stat-visual span,
.stat-visual small,
.story-top p,
.story-top span,
.story-top small,
.subhero-head p,
.subhero-head span,
.subhero-head small,
.timeline-head p,
.timeline-head span,
.timeline-head small,
.track-top p,
.track-top span,
.track-top small,
.verdict-head p,
.verdict-head span,
.verdict-head small{
  color:rgba(255,255,255,.88) !important;
}

/* All bg-image sections need position:relative for ::after overlay */
.agent-top,
.area-visual,
.band-head,
.band-visual,
.bucket-visual,
.category-head,
.chapter-left,
.contrast-head,
.feature-top,
.flow-head,
.flow-top,
.hero-art,
.hero-top,
.hero-visual,
.impact-head,
.innovation-head,
.insight-head,
.insight-visual,
.kpi-visual,
.map-head,
.matrix-head,
.metric-top,
.mode-top,
.orbit-art,
.panel-head,
.phase-head,
.pillar-top,
.role-head,
.role-visual,
.section-head,
.section-top,
.stack-head,
.stat-visual,
.story-top,
.subhero-head,
.timeline-head,
.track-top,
.verdict-head{
  position:relative !important;
}

/* Children of bg-image sections need z-index above overlay */
.agent-top > *,
.area-visual > *,
.band-head > *,
.band-visual > *,
.bucket-visual > *,
.category-head > *,
.chapter-left > *,
.contrast-head > *,
.feature-top > *,
.flow-head > *,
.flow-top > *,
.hero-art > *,
.hero-top > *,
.hero-visual > *,
.impact-head > *,
.innovation-head > *,
.insight-head > *,
.insight-visual > *,
.kpi-visual > *,
.map-head > *,
.matrix-head > *,
.metric-top > *,
.mode-top > *,
.orbit-art > *,
.panel-head > *,
.phase-head > *,
.pillar-top > *,
.role-head > *,
.role-visual > *,
.section-head > *,
.section-top > *,
.stack-head > *,
.stat-visual > *,
.story-top > *,
.subhero-head > *,
.timeline-head > *,
.track-top > *,
.verdict-head > *{
  position:relative;
  z-index:1;
}

/* McKinsey-dark overlay for maximum readability — COMPLETE ::after */
.agent-top::after,
.area-visual::after,
.band-head::after,
.band-visual::after,
.bucket-visual::after,
.category-head::after,
.chapter-left::after,
.contrast-head::after,
.feature-top::after,
.flow-head::after,
.flow-top::after,
.hero-art::after,
.hero-top::after,
.hero-visual::after,
.impact-head::after,
.innovation-head::after,
.insight-head::after,
.insight-visual::after,
.kpi-visual::after,
.map-head::after,
.matrix-head::after,
.metric-top::after,
.mode-top::after,
.orbit-art::after,
.panel-head::after,
.phase-head::after,
.pillar-top::after,
.role-head::after,
.role-visual::after,
.section-head::after,
.section-top::after,
.stack-head::after,
.stat-visual::after,
.story-top::after,
.subhero-head::after,
.timeline-head::after,
.track-top::after,
.verdict-head::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(10,22,40,.62) 0%, rgba(10,22,40,.84) 100%) !important;
}

/* ── Fallback padding & margin for bg-image sections with text ───────────── */
/* Uses :where() for zero specificity so page-specific inline styles win.     */
:where(.agent-top),
:where(.area-visual),
:where(.band-head),
:where(.band-visual),
:where(.bucket-visual),
:where(.category-head),
:where(.chapter-left),
:where(.contrast-head),
:where(.feature-top),
:where(.flow-head),
:where(.flow-top),
:where(.hero-art),
:where(.hero-top),
:where(.hero-visual),
:where(.impact-head),
:where(.innovation-head),
:where(.insight-head),
:where(.insight-visual),
:where(.kpi-visual),
:where(.map-head),
:where(.matrix-head),
:where(.metric-top),
:where(.mode-top),
:where(.orbit-art),
:where(.panel-head),
:where(.phase-head),
:where(.pillar-top),
:where(.role-head),
:where(.role-visual),
:where(.section-head),
:where(.section-top),
:where(.stack-head),
:where(.stat-visual),
:where(.story-top),
:where(.subhero-head),
:where(.timeline-head),
:where(.track-top),
:where(.verdict-head){
  padding: 28px 30px;
  border-radius: 22px;
  overflow: hidden;
}

/* .quote and .quote-card: ensure white text survives global h1/h2/h3 override */
.quote h1,.quote h2,.quote h3,
.quote-card h1,.quote-card h2,.quote-card h3{
  color:#fff !important;
  text-shadow:none !important;
}
.quote p,.quote span,.quote small,
.quote-card p,.quote-card span,.quote-card small{
  color:rgba(255,255,255,.85) !important;
}

/* .hero-sub, .lede, .hero-desc must be white when inside dark-bg sections */
.agent-top .hero-sub,.agent-top .lede,.agent-top .hero-desc,
.band-head .hero-sub,.band-head .lede,.band-head .hero-desc,
.band-visual .hero-sub,.band-visual .lede,.band-visual .hero-desc,
.hero-art .hero-sub,.hero-art .lede,.hero-art .hero-desc,
.hero-top .hero-sub,.hero-top .lede,.hero-top .hero-desc,
.hero-visual .hero-sub,.hero-visual .lede,.hero-visual .hero-desc,
.section-head .hero-sub,.section-head .lede,.section-head .hero-desc,
.section-top .hero-sub,.section-top .lede,.section-top .hero-desc,
.subhero-head .hero-sub,.subhero-head .lede,.subhero-head .hero-desc,
.story-top .hero-sub,.story-top .lede,.story-top .hero-desc,
.stack-head .hero-sub,.stack-head .lede,.stack-head .hero-desc,
.chapter-left .hero-sub,.chapter-left .lede,.chapter-left .hero-desc,
.contrast-head .hero-sub,.contrast-head .lede,.contrast-head .hero-desc,
.verdict-head .hero-sub,.verdict-head .lede,.verdict-head .hero-desc,
.flow-top .hero-sub,.flow-top .lede,.flow-top .hero-desc,
.panel-head .hero-sub,.panel-head .lede,.panel-head .hero-desc{
  color:rgba(255,255,255,.82) !important;
}

/* .section-label must be light in dark-bg sections */
.agent-top .section-label,.agent-top .label,.agent-top .topic,
.area-visual .section-label,.area-visual .label,.area-visual .topic,
.band-head .section-label,.band-head .label,.band-head .topic,
.band-visual .section-label,.band-visual .label,.band-visual .topic,
.hero-art .section-label,.hero-art .label,.hero-art .topic,
.hero-top .section-label,.hero-top .label,.hero-top .topic,
.hero-visual .section-label,.hero-visual .label,.hero-visual .topic,
.section-head .section-label,.section-head .label,.section-head .topic,
.section-top .section-label,.section-top .label,.section-top .topic,
.subhero-head .section-label,.subhero-head .label,.subhero-head .topic,
.story-top .section-label,.story-top .label,.story-top .topic,
.stack-head .section-label,.stack-head .label,.stack-head .topic,
.chapter-left .section-label,.chapter-left .label,.chapter-left .topic,
.contrast-head .section-label,.contrast-head .label,.contrast-head .topic,
.verdict-head .section-label,.verdict-head .label,.verdict-head .topic,
.flow-top .section-label,.flow-top .label,.flow-top .topic,
.flow-head .section-label,.flow-head .label,.flow-head .topic,
.panel-head .section-label,.panel-head .label,.panel-head .topic,
.impact-head .section-label,.impact-head .label,.impact-head .topic,
.feature-top .section-label,.feature-top .label,.feature-top .topic,
.innovation-head .section-label,.innovation-head .label,.innovation-head .topic,
.insight-head .section-label,.insight-head .label,.insight-head .topic,
.category-head .section-label,.category-head .label,.category-head .topic,
.kpi-visual .section-label,.kpi-visual .label,.kpi-visual .topic,
.mode-top .section-label,.mode-top .label,.mode-top .topic,
.track-top .section-label,.track-top .label,.track-top .topic,
.pillar-top .section-label,.pillar-top .label,.pillar-top .topic,
.matrix-head .section-label,.matrix-head .label,.matrix-head .topic,
.metric-top .section-label,.metric-top .label,.metric-top .topic,
.bucket-visual .section-label,.bucket-visual .label,.bucket-visual .topic,
.role-head .section-label,.role-head .label,.role-head .topic,
.role-visual .section-label,.role-visual .label,.role-visual .topic,
.phase-head .section-label,.phase-head .label,.phase-head .topic,
.stat-visual .section-label,.stat-visual .label,.stat-visual .topic,
.insight-visual .section-label,.insight-visual .label,.insight-visual .topic,
.map-head .section-label,.map-head .label,.map-head .topic,
.timeline-head .section-label,.timeline-head .label,.timeline-head .topic,
.orbit-art .section-label,.orbit-art .label,.orbit-art .topic{
  color:#69dbe0 !important;
}

/* .eyebrow on light hero sections — readable navy with teal accent (default) */
.hero .eyebrow{
  color:var(--sp-navy, #0a1628) !important;
  background:rgba(30,199,200,.08) !important;
  border-color:rgba(30,199,200,.22) !important;
}
.hero .eyebrow .dot{
  background:var(--sp-teal, #0d9488) !important;
}
/* .eyebrow inside dark-bg sections (hero-top, hero-art have bg images) — MUST come after light default */
.hero-art .eyebrow,
.hero-top .eyebrow{
  color:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.2) !important;
  background:rgba(255,255,255,.1) !important;
}
.hero-art .eyebrow .dot,
.hero-top .eyebrow .dot{
  background:#0d9488 !important;
}

/* Restore dark text inside white glass-card overlays on photo backgrounds */
.hero-panel,
.hero-panel h1,.hero-panel h2,.hero-panel h3,
.overlay-card,
.overlay-card h1,.overlay-card h2,.overlay-card h3,
.mini-panel,
.mini-panel h1,.mini-panel h2,.mini-panel h3,
.orbit-note,
.orbit-note h1,.orbit-note h2,.orbit-note h3{
  color:var(--sp-navy,#0a1628) !important;
  text-shadow:none !important;
}
.hero-panel p,.hero-panel span,.hero-panel small,
.overlay-card p,.overlay-card span,.overlay-card small,
.mini-panel p,.mini-panel span,.mini-panel small,
.orbit-note p,.orbit-note span,.orbit-note small{
  color:rgba(10,22,40,.7) !important;
}

/* Typography */
h1,h2,h3{
  letter-spacing:-.045em !important;
  color:var(--sp-navy);
}
h1{
  font-size:clamp(2.75rem, 6vw, 4.25rem) !important;
  line-height:.98 !important;
  font-weight:800 !important;
}
h2{
  font-size:clamp(2.1rem, 4vw, 3.25rem) !important;
  line-height:1.02 !important;
  font-weight:800 !important;
}
.hero-sub,.lede,.hero-desc{
  font-size:1.15rem !important;
  line-height:1.55 !important;
  color:var(--sp-muted) !important;
}
.section-label,.label,.topic{
  font-size:12px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  color:var(--sp-blue) !important;
}

/* Buttons */
.btn, .btns .btn{
  border-radius:999px !important;
}
.btn-primary, .btn-cyan, .btn-white{
  background:var(--sp-navy) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.btn-secondary, .btn-outline{
  background:#fff !important;
  color:var(--sp-navy) !important;
  border:1px solid var(--sp-line) !important;
}

/* Cards & tables across existing pages */
.editorial-card,.table-card,.band-card,.case-card,.list-card,.quote-card,.card,.section-block,.mode-card,.testimonial-card,.cta-card,.subhero,.phase-card,.role-card{
  background:#fff !important;
  border:1px solid var(--sp-line) !important;
  border-radius:var(--sp-radius) !important;
  box-shadow:var(--sp-shadow) !important;
}
.quote-card{
  background:var(--sp-navy) !important;
  border-color:transparent !important;
  color:#fff !important;
}
.quote-card p{ color:rgba(255,255,255,.82) !important; }

table{ width:100% !important; border-collapse:collapse !important; }
/* Mobile-friendly tables: allow horizontal scroll */
.table-card, .table-shell, .matrix, .matrix-card{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}
.table-card table, .table-shell table, .matrix table, .matrix-card table{
  min-width: 860px;
}
th{
  background:#f8fafc !important;
  color:var(--sp-blue) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
  font-size:11px !important;
}
th,td{
  border-bottom:1px solid var(--sp-line) !important;
  padding:16px 18px !important;
}
td{ color:var(--sp-muted) !important; }
td:first-child{ color:var(--sp-navy) !important; font-weight:700 !important; }

.badge.good{ background:rgba(5,150,105,.12) !important; color:#059669 !important; }
.badge.mid{ background:rgba(37,99,235,.1) !important; color:var(--sp-blue) !important; }

/* Images: make them feel premium & consistent */
img{
  image-rendering:auto;
}
.sp-mag-image{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--sp-line);
  box-shadow:var(--sp-shadow);
}
.sp-mag-image img{ width:100%; height:260px; object-fit:cover; }

/* Enterprise quotes (non-competitor voices) */
.sp-mag-quote{
  margin:24px 0 0;
  padding:22px 22px 20px;
  border-radius:18px;
  background:var(--sp-navy);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}
.sp-mag-quote p{
  margin:0;
  font-size:1.08rem;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
}
.sp-mag-quote cite{
  display:block;
  margin-top:12px;
  font-style:normal;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.72);
}

/* Product screenshot placeholders */
.sp-mag-product{
  padding:84px 0;
  background:var(--sp-bg-soft);
  border-top:1px solid var(--sp-line);
  border-bottom:1px solid var(--sp-line);
}
.sp-mag-product .sp-mag-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:start;
}
.sp-mag-product .sp-mag-title{
  margin:0 0 14px;
}
.sp-mag-product .sp-mag-copy{
  margin:0 0 18px;
  color:var(--sp-muted);
  font-size:1.05rem;
  line-height:1.6;
}
.sp-mag-shots{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.sp-mag-shot{
  background:#fff;
  border:1px dashed rgba(37, 99, 235, .35);
  border-radius:20px;
  overflow:hidden;
}
.sp-mag-shot .sp-mag-shot-head{
  padding:12px 14px;
  border-bottom:1px solid var(--sp-line);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.sp-mag-shot .sp-mag-shot-head strong{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--sp-blue);
}
.sp-mag-shot .sp-mag-shot-head span{
  font-size:12px;
  color:var(--sp-muted);
  font-weight:700;
}
.sp-mag-shot .sp-mag-shot-body{
  aspect-ratio: 16 / 9;
  min-height:260px;
  display:grid;
  place-items:center;
  padding:22px;
  color:var(--sp-muted);
  background:
    linear-gradient(0deg, rgba(37,99,235,.03), rgba(37,99,235,.03)),
    repeating-linear-gradient(90deg, rgba(2,6,23,.06) 0, rgba(2,6,23,.06) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(0deg, rgba(2,6,23,.06) 0, rgba(2,6,23,.06) 1px, transparent 1px, transparent 22px);
}
.sp-mag-shot .sp-mag-shot-body em{
  font-style:normal;
  font-weight:800;
  color:var(--sp-navy);
}

@media (max-width: 1020px){
  .sp-mag-product .sp-mag-grid{ grid-template-columns:1fr; }
  .nav-links, .nv{ display:none !important; }
}

@media (max-width: 820px){
  body{ font-size:16px; }
  .wrap, .w{ width:min(calc(100% - 28px), var(--sp-max)) !important; }
  h1{ font-size: clamp(2.25rem, 7.2vw, 3.4rem) !important; line-height: 1.02 !important; }
  h2{ font-size: clamp(1.8rem, 5.4vw, 2.6rem) !important; line-height: 1.08 !important; }
  .hero-sub,.lede,.hero-desc{ font-size:1.05rem !important; }
  .btn{ min-height:46px !important; padding:0 18px !important; }
  .sp-mag-product{ padding:64px 0; }
  .sp-mag-image img{ height:220px; }
  .sp-mag-shot .sp-mag-shot-body{ min-height:220px; padding:18px; }
}

@media (max-width: 420px){
  .sp-mag-shot .sp-mag-shot-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .sp-mag-shot .sp-mag-shot-head span{
    font-size:12px;
    font-weight:600;
  }
  .sp-mag-quote{ padding:18px; }
}

/* ============================================
   SCROLL ANIMATIONS  (Intersection Observer)
   ============================================ */
@keyframes spFadeUp{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes spFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Elements start hidden, JS adds .sp-visible */
.sp-reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.sp-reveal.sp-visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger children inside a grid */
.sp-reveal-group > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.sp-reveal-group.sp-visible > *{ opacity:1; transform:translateY(0); }
.sp-reveal-group.sp-visible > *:nth-child(1){ transition-delay:.0s; }
.sp-reveal-group.sp-visible > *:nth-child(2){ transition-delay:.08s; }
.sp-reveal-group.sp-visible > *:nth-child(3){ transition-delay:.16s; }
.sp-reveal-group.sp-visible > *:nth-child(4){ transition-delay:.24s; }
.sp-reveal-group.sp-visible > *:nth-child(5){ transition-delay:.32s; }
.sp-reveal-group.sp-visible > *:nth-child(6){ transition-delay:.40s; }
.sp-reveal-group.sp-visible > *:nth-child(7){ transition-delay:.48s; }
.sp-reveal-group.sp-visible > *:nth-child(8){ transition-delay:.56s; }

/* ============================================
   PAGE ENTRANCE
   ============================================ */
main{
  animation: spFadeIn .5s ease-out;
}

/* ============================================
   TABLE ROW HOVER
   ============================================ */
tbody tr{
  transition:background .15s;
}
tbody tr:hover td{
  background:rgba(37,99,235,.03) !important;
}

/* ============================================
   CARD MICRO-INTERACTIONS
   ============================================ */
.editorial-card,
.case-card,
.stat-card,
.area-card,
.verdict-card,
.role-card,
.phase-card,
.mode-card,
.related-card,
.subhero{
  transition:box-shadow .25s ease, transform .2s ease, border-color .25s ease !important;
}
.editorial-card:hover,
.case-card:hover,
.stat-card:hover,
.area-card:hover,
.verdict-card:hover,
.role-card:hover,
.phase-card:hover,
.mode-card:hover,
.subhero:hover{
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 24px 64px rgba(2,6,23,.12), 0 0 0 3px rgba(37,99,235,.06) !important;
  transform:translateY(-3px);
}

/* ============================================
   BADGE SYSTEM EXTENSION
   ============================================ */
.badge.critical{ background:rgba(239,68,68,.1) !important; color:#ef4444 !important; }
.badge.info{ background:rgba(13,148,136,.1) !important; color:#0d9488 !important; }

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.sp-back-top{
  position:fixed; bottom:32px; right:32px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--sp-navy, #0a1628); color:#fff;
  border:none; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 8px 28px rgba(2,6,23,.22);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, visibility .3s, transform .3s, background .2s;
}
.sp-back-top.visible{
  opacity:1; visibility:visible; transform:translateY(0);
}
.sp-back-top:hover{
  background:var(--sp-blue, #2563eb);
}
.sp-back-top svg{
  width:20px; height:20px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce){
  .sp-reveal,
  .sp-reveal-group > *,
  main,
  .sp-hero-title,
  .mega-link,
  .related-card::after,
  .resource-card::after{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
  .sp-progress-fill{ transition:none !important; }
  .topbar{ transition:none !important; }
  details.faq .faq-body{ transition:none !important; }
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.sp-progress-bar{
  position:fixed; top:0; left:0; width:100%; height:3px;
  z-index:10000; background:transparent; pointer-events:none;
}
.sp-progress-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--sp-blue,#2563eb), var(--sp-teal,#0d9488));
  transition:width .1s linear;
  border-radius:0 2px 2px 0;
}

/* ============================================
   STICKY HEADER — scroll-aware
   ============================================ */
.topbar{
  transition:background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.topbar.scrolled{
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 4px 32px rgba(2,6,23,.10) !important;
}
.topbar.header-hidden{
  transform:translateY(-100%) !important;
}

/* ============================================
   FAQ SMOOTH ACCORDION
   ============================================ */
details.faq .faq-body{
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

/* ============================================
   HERO HEADLINE ANIMATION
   ============================================ */
@keyframes spHeroTitle{
  from{
    opacity:0;
    transform:translateY(28px);
    letter-spacing:.04em;
  }
  to{
    opacity:1;
    transform:translateY(0);
    letter-spacing:inherit;
  }
}
.sp-hero-title{
  animation:spHeroTitle .9s cubic-bezier(.16,1,.3,1) both;
}

/* ============================================
   EDITORIAL SECTION DIVIDERS
   ============================================ */
.sp-divider{
  text-align:center;
  padding:24px 0;
}
.sp-divider::before{
  content:"";
  display:inline-block;
  width:64px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--sp-line,#e5e7eb), var(--sp-blue,#2563eb), var(--sp-line,#e5e7eb), transparent);
  border-radius:2px;
  vertical-align:middle;
}
section + section{
  border-top:1px solid var(--sp-line,#e5e7eb);
}

/* ============================================
   MEGA-MENU STAGGERED CHILDREN
   ============================================ */
.nav-main > li > .mega-menu .mega-link{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background .15s ease;
}
.nav-main > li:hover > .mega-menu .mega-link{
  opacity:1;
  transform:translateY(0);
}
.nav-main > li:hover > .mega-menu .mega-link:nth-child(1){ transition-delay:.0s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(2){ transition-delay:.04s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(3){ transition-delay:.06s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(4){ transition-delay:.08s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(5){ transition-delay:.10s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(6){ transition-delay:.12s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(7){ transition-delay:.14s; }
.nav-main > li:hover > .mega-menu .mega-link:nth-child(8){ transition-delay:.16s; }

/* ============================================
   MISSING PAGE CSS VARIABLES
   ============================================ */
body[data-page="faq"]{
  --pg-hero:url("https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=1800&q=80");
}
body[data-page="recursos"]{
  --pg-hero:url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1800&q=80");
  --pg-alt1:url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1800&q=80");
  --pg-alt2:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
}

/* ============================================
   CARD SHINE ON HOVER (premium touch)
   ============================================ */
.related-card,
.resource-card{
  position:relative;
  overflow:hidden;
}
.related-card::after,
.resource-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s ease;
  pointer-events:none;
}
.related-card:hover::after,
.resource-card:hover::after{
  transform:translateX(100%);
}

/* ============================================
   ENHANCED LINK / BUTTON TRANSITIONS
   ============================================ */
.btn{
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease, opacity .2s ease !important;
}
.btn:active{
  transform:scale(.97);
}
.btn-primary:hover{
  box-shadow:0 8px 24px rgba(10,22,40,.22);
}
.btn-demo:hover,
.btn-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(2,6,23,.10);
}