/* ===========================================================================
   revisia — marketing skin «Midnight Depth» (dirección 2, designs/premium).
   MARKETING-ONLY: passthrough-copied to dist/site.css and linked by base.njk
   AFTER /styles.css. The React app never loads this file, so the app keeps
   the light skin untouched (decisión Jose 07-23: Midnight solo marketing).

   Language: near-black navy ground (#0b1524) with a soft radial accent glow,
   alternating crisp light bands, floating product shots with thin borders,
   pill eyebrows, ONE accent = revisia light-blue (#7aa3d1 / #9cc0e6). No teal.
   Ref artboards: designs/premium/direction-2-home.html / direction-2-blog.html.

   Structure:
     1. Tokens
     2. Chrome (header/nav + footer, shared by every marketing page)
     3. Home (body.mk-home + .mk-* landing system)
     4. Waitlist form on dark
     5. Blog chrome (masthead + pillar bar)
     6. Responsive
   ======================================================================== */

:root {
  /* dark surfaces */
  --mk-dark: #0b1524;
  --mk-panel: #16263a;
  --mk-panel-2: #0f1d2e;
  --mk-text: #f3f7fb;
  --mk-muted: #9fb2c4;
  --mk-muted-soft: #c3d1de;
  --mk-line-dark: rgba(255, 255, 255, 0.10);
  --mk-line-dark-strong: rgba(255, 255, 255, 0.16);
  /* accent family (revisia light-blue; NO teal) */
  --mk-accent: #7aa3d1;
  --mk-accent-bright: #9cc0e6;
  --mk-deep: #345c88;
  --mk-brand-deep: #16283c;
  /* status, lifted for dark legibility */
  --mk-ok: #4bbf7f;
  --mk-bad: #f08a83;
  /* shape */
  --mk-radius: 14px;
  --mk-radius-sm: 10px;
  --mk-shadow-float: 0 2px 8px rgba(4, 10, 20, 0.35), 0 26px 60px -24px rgba(4, 10, 20, 0.6);
  --mk-shadow-card: 0 1px 2px rgba(22, 40, 60, 0.05), 0 12px 34px -22px rgba(22, 40, 60, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 2. Chrome: dark sticky header ────────────────────────────────────── */

.app-header {
  background: var(--mk-dark);
  border-bottom: 1px solid var(--mk-line-dark);
  padding: 0 1.4rem;
  min-height: 70px;
  z-index: 20;
}
/* Translucent over the hero glow on the home only (solid elsewhere so the
   light content pages don't bleed through). */
body.mk-home .app-header {
  background: rgba(11, 21, 36, 0.72);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.app-header .brand-name { color: var(--mk-text); }
.app-header .brand-ia { color: var(--mk-accent-bright); }
.app-header .brand-beta {
  color: var(--mk-muted);
  background: transparent;
  border-color: var(--mk-line-dark-strong);
  letter-spacing: 0.12em;
}
.app-header .brand-tagline { display: none; }

.mk-nav { display: none; gap: 1.9rem; margin-left: 1.2rem; font-size: 0.94rem; }
.mk-nav a { color: var(--mk-muted); text-decoration: none; }
.mk-nav a:hover { color: var(--mk-text); }

/* Header buttons: ghost «Entrar» (≥960px) + accent primary «Pedir acceso». */
.mk-btn-ghost {
  display: none;
  background: transparent;
  color: var(--mk-text);
  border: 1px solid var(--mk-line-dark-strong);
}
.mk-btn-ghost:hover {
  border-color: var(--mk-accent);
  background: rgba(122, 163, 209, 0.10);
  color: var(--mk-text);
}
.app-header .btn-primary,
.mk-btn-accent {
  background: var(--mk-accent);
  color: #0b1524;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(4, 10, 20, 0.4), 0 0 0 1px rgba(156, 192, 230, 0.25) inset;
}
.app-header .btn-primary:hover,
.mk-btn-accent:hover {
  background: var(--mk-accent-bright);
  color: #0b1524;
  transform: translateY(-1px);
}
.app-header :focus-visible { outline: 3px solid var(--mk-accent-bright); outline-offset: 3px; }

/* ── 2b. Chrome: dark footer ──────────────────────────────────────────── */

.app-footer {
  background: var(--mk-dark);
  border-top: 1px solid var(--mk-line-dark);
  color: var(--mk-muted);
  padding-top: 2.4rem;
  padding-bottom: calc(2.6rem + env(safe-area-inset-bottom));
  font-size: 0.88rem;
  margin-top: 0;
}
.app-footer > span:first-child { color: var(--mk-text); font-weight: 600; }
.app-footer .brand-ia { color: var(--mk-accent-bright); }
.app-footer a { color: var(--mk-muted); text-decoration: none; }
.app-footer a:hover { color: var(--mk-text); }
.footer-social-link { color: var(--mk-muted); }
.footer-social-link:hover { color: var(--mk-text); background-color: rgba(122, 163, 209, 0.14); }
.mk-foot-tagline { color: var(--mk-muted); }

/* Light content pages (metodología, guía, legal, precios, blog bodies) keep
   their paper ground from styles.css; only the chrome above goes dark. The
   footer sits directly on the dark band, so give the light pages breathing
   room before it. */
body:not(.mk-home) .app-footer { margin-top: 2.5rem; }

/* ── 3. Home: Midnight landing ────────────────────────────────────────── */

body.mk-home {
  background: var(--mk-dark);
  color: var(--mk-text);
}

.mk-landing { font-size: 17px; line-height: 1.6; }
.mk-landing h1,
.mk-landing h2,
.mk-landing h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Los h2 de sección pesan menos que el h1 del hero: aire, no grito. */
.mk-landing h2,
.mk-landing h3 { font-weight: 700; }
.mk-landing p { margin: 0; }
.mk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.mk-landing :focus-visible { outline: 3px solid var(--mk-accent-bright); outline-offset: 3px; border-radius: 6px; }

/* hero — dark with radial glow */
.mk-hero { position: relative; padding: clamp(72px, 9vw, 100px) 0 64px; overflow: hidden; }
.mk-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -120px;
  width: min(1100px, 140%);
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(48% 60% at 50% 30%, rgba(122, 163, 209, 0.22), rgba(122, 163, 209, 0.06) 45%, transparent 72%);
  pointer-events: none;
}
.mk-hero-grid { position: relative; display: grid; gap: 52px; align-items: center; }
.mk-hero h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); color: var(--mk-text); }
.mk-accentword { color: var(--mk-accent-bright); text-shadow: 0 0 32px rgba(156, 192, 230, 0.45); }
.mk-landing .mk-sub { margin: 1.5rem 0 1.9rem; font-size: 1.12rem; color: var(--mk-muted-soft); max-width: 46ch; }
.mk-hero-login {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.98rem;
  color: var(--mk-accent-bright);
  font-weight: 600;
  text-decoration: none;
}
.mk-hero-login:hover { text-decoration: underline; }
.mk-hero-shot { position: relative; }
.mk-hero-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-line-dark-strong);
  box-shadow: var(--mk-shadow-float);
  background: var(--mk-panel-2);
}
/* thumbnail clicable con ▶ centrado: abre el modal del vídeo resumen */
.mk-hero-play { position: relative; display: block; border-radius: var(--mk-radius); }
.mk-hero-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mk-radius);
  background: rgba(11, 21, 36, 0.18);
  transition: background 0.15s;
}
.mk-hero-play:hover::after { background: rgba(11, 21, 36, 0.30); }
.mk-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--mk-accent);
  color: #0b1524;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(4, 10, 20, 0.5), 0 0 0 10px rgba(122, 163, 209, 0.25);
  transition: transform 0.15s, background 0.15s;
}
.mk-play svg { width: 32px; height: 32px; margin-left: 3px; }
.mk-hero-play:hover .mk-play { background: var(--mk-accent-bright); transform: translate(-50%, -50%) scale(1.06); }
.mk-play-hint {
  position: absolute;
  left: 50%;
  top: calc(50% + 58px);
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  background: rgba(18, 30, 48, 0.92);
  border: 1px solid var(--mk-line-dark-strong);
  border-radius: 100px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mk-muted-soft);
}

/* modal del vídeo resumen */
.mk-video-modal {
  width: min(1080px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--mk-line-dark-strong);
  border-radius: var(--mk-radius);
  background: var(--mk-dark);
  box-shadow: var(--mk-shadow-float);
  overflow: visible;
}
.mk-video-modal::backdrop { background: rgba(4, 10, 20, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mk-video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--mk-radius); background: #000; }
.mk-vm-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mk-line-dark-strong);
  background: var(--mk-panel);
  color: var(--mk-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mk-shadow-float);
}
.mk-vm-close:hover { background: var(--mk-accent); color: #0b1524; border-color: transparent; }
.mk-float {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: rgba(18, 30, 48, 0.92);
  border: 1px solid var(--mk-line-dark-strong);
  border-radius: 100px;
  box-shadow: var(--mk-shadow-float);
  padding: 0.55rem 0.95rem;
  font-size: 0.82rem;
  color: var(--mk-muted-soft);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 240px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mk-accent-bright);
  flex: none;
  box-shadow: 0 0 0 4px rgba(156, 192, 230, 0.22);
}

/* numbers — white band */
.mk-numbers { background: #fff; color: var(--ink-900); padding: 64px 0 44px; margin-top: 26px; }
/* blanco sobre blanco: el padding de la banda de métricas y el de «Cómo
   funciona» se suman sin costura visible — recorta la de abajo. */
.mk-numbers + .mk-band { padding-top: 48px; }
.mk-num-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
.mk-num { text-align: center; }
.mk-num strong {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--mk-brand-deep);
  display: block;
  line-height: 1;
  letter-spacing: -0.03em;
}
.mk-num span { display: block; margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-700); }
.mk-landing .mk-numbers-note { margin-top: 52px; font-size: 0.85rem; color: var(--ink-500); line-height: 1.6; max-width: 68ch; margin-inline: auto; text-align: center; }
.mk-numbers-note a { color: var(--mk-deep); font-weight: 600; }

/* band shell */
.mk-band { padding: clamp(84px, 10vw, 112px) 0; }
.mk-landing .mk-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-deep);
  background: var(--brand-50);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
  margin: 0 0 1rem;
}
/* La marca va SIEMPRE en minúscula (brand guide): exímela del uppercase del eyebrow. */
.mk-tt-none { text-transform: none; }
.mk-band h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); max-width: 26ch; color: var(--ink-900); }
.mk-eyebrow + h2 { margin-top: 0.2rem; }
.mk-landing .mk-lede { margin-top: 1.1rem; font-size: 1.06rem; color: var(--ink-700); max-width: 56ch; }

.mk-band.mk-light { background: #fff; color: var(--ink-900); }
.mk-band.mk-light-2 { background: var(--paper); color: var(--ink-900); }

.mk-band.mk-dark { background: var(--mk-dark); color: var(--mk-text); position: relative; overflow: hidden; }
.mk-band.mk-dark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  width: min(1000px, 130%);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 40%, rgba(122, 163, 209, 0.14), transparent 70%);
  pointer-events: none;
}
.mk-band.mk-dark > .mk-wrap { position: relative; }
.mk-band.mk-dark .mk-eyebrow {
  color: var(--mk-accent-bright);
  background: rgba(122, 163, 209, 0.12);
  border-color: var(--mk-line-dark-strong);
}
.mk-band.mk-dark h2 { color: var(--mk-text); }
.mk-band.mk-dark .mk-lede { color: var(--mk-muted-soft); }

/* cómo funciona: filas alternadas texto ↔ captura (paso 2 va sin captura) */
.mk-how { margin-top: 56px; display: grid; gap: clamp(48px, 6vw, 72px); }
.mk-howrow { display: grid; gap: 32px; align-items: center; }
.mk-howcopy { max-width: 52ch; }
.mk-howcopy p { color: var(--ink-700); font-size: 1rem; }
.mk-howshot {
  border-radius: var(--mk-radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--mk-shadow-card);
  background: #fff;
}
.mk-howshot img { display: block; width: 100%; height: auto; }
/* la tabla de evidencia es vertical: enseña la cabecera y los primeros
   estudios en vez de aplastar la fila entera */
.mk-howshot--tall img { max-height: 520px; object-fit: cover; object-position: top; }
.mk-step-n {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--mk-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--brand-50);
  margin-bottom: 1rem;
}
.mk-howcopy h3 { font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--ink-900); }

/* card grids (por qué / para quién / límites) */
.mk-grid3 { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 48px; }
.mk-grid3 .card { border-radius: var(--mk-radius); padding: 30px; }
.mk-ic {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.mk-ic .ic { width: 22px; height: 22px; }
.mk-grid3 .card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.mk-grid3 .card p { font-size: 0.96rem; margin: 0; }
/* «Aprende a usarlo»: two link-cards, centered */
.mk-grid-2max { max-width: 820px; margin-inline: auto; }

/* …on dark bands */
.mk-band.mk-dark .card {
  background: var(--mk-panel);
  border: 1px solid var(--mk-line-dark);
  box-shadow: 0 20px 46px -30px rgba(4, 10, 20, 0.7);
}
.mk-band.mk-dark .card h3 { color: var(--mk-text); }
.mk-band.mk-dark .card p { color: var(--mk-muted-soft); }
.mk-band.mk-dark .mk-ic {
  background: rgba(122, 163, 209, 0.15);
  border: 1px solid var(--mk-line-dark-strong);
  color: #fff;
}

/* …on light bands */
.mk-band.mk-light .card,
.mk-band.mk-light-2 .card { background: #fff; border: 1px solid var(--line); box-shadow: var(--mk-shadow-card); }
.mk-band.mk-light .card h3,
.mk-band.mk-light-2 .card h3 { color: var(--ink-900); }
.mk-band.mk-light .card p,
.mk-band.mk-light-2 .card p { color: var(--ink-700); }
.mk-band.mk-light .mk-ic,
.mk-band.mk-light-2 .mk-ic { background: var(--mk-brand-deep); border: 1px solid var(--mk-brand-deep); color: #fff; }

.mk-landing .mk-also { margin-top: 34px; font-size: 0.9rem; color: var(--ink-500); max-width: 70ch; }
.mk-band.mk-dark .mk-also { color: var(--mk-muted); }

/* learn cards (link cards on light) */
.mk-learn-card { display: flex; flex-direction: column; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; }
.mk-learn-card:hover { border-color: var(--mk-accent); transform: translateY(-2px); }
.mk-learn-go { margin-top: auto; color: var(--mk-deep); font-weight: 600; font-size: 0.92rem; }

/* FAQ — on dark */
.mk-faq { margin-top: 44px; border-top: 1px solid var(--mk-line-dark); }
.mk-faq details { border-bottom: 1px solid var(--mk-line-dark); }
.mk-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.08rem;
  color: var(--mk-text);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; color: var(--mk-accent-bright); font-size: 1.4rem; transition: transform 0.2s; flex: none; }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq details p { padding: 0 0 1.35rem; color: var(--mk-muted-soft); font-size: 1rem; max-width: 72ch; margin: 0; }
.mk-faq details a { color: var(--mk-accent-bright); }

/* CTA band — deep navy card with accent glow */
.mk-cta {
  background: linear-gradient(180deg, #0e1b2d, #0b1524);
  color: #eaf1f8;
  border-radius: 24px;
  margin: 84px 0;
  padding: 76px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mk-line-dark);
}
.mk-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(122, 163, 209, 0.30), transparent 70%);
}
.mk-cta > * { position: relative; }
.mk-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.mk-cta > p { color: var(--mk-muted-soft); margin: 1.1rem auto 2rem; max-width: 52ch; font-size: 1.06rem; }
.mk-cta .wl-form { max-width: 34rem; margin: 0 auto; }
.mk-cta .wl-form .wl-fields { justify-content: center; }
.mk-cta .wl-turnstile { display: flex; justify-content: center; }

/* ── 4. Waitlist form on dark surfaces ────────────────────────────────── */

.mk-landing .wl-form input[type="email"] {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--mk-line-dark-strong);
  color: var(--mk-text);
  border-radius: var(--mk-radius-sm);
  min-height: 44px;
}
.mk-landing .wl-form input[type="email"]::placeholder { color: var(--mk-muted); }
.mk-landing .wl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px rgba(156, 192, 230, 0.25);
}
.mk-landing .wl-form .btn-primary {
  background: var(--mk-accent);
  color: #0b1524;
  border-color: transparent;
  font-weight: 700;
  min-height: 44px;
}
.mk-landing .wl-form .btn-primary:hover { background: var(--mk-accent-bright); }
.mk-landing .wl-form .muted { color: var(--mk-muted); }
.mk-landing .wl-success { color: var(--mk-ok); }
.mk-landing .wl-error { color: var(--mk-bad); }

/* ── 4b. Interior pages: shared dark mini-hero (mk-page-hero) ─────────────
   Rendered by legal.njk / guia.njk (front matter: heroEyebrow / heroTitle /
   heroLede) and inline on precios. Dark band + glow + eyebrow + sans h1;
   the body below stays light, like the blog artboard. */

.mk-page-hero {
  background: var(--mk-dark);
  color: var(--mk-text);
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 64px) 0 clamp(40px, 5vw, 56px);
}
.mk-page-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  width: min(900px, 140%);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 40%, rgba(122, 163, 209, 0.18), transparent 70%);
  pointer-events: none;
}
.mk-page-hero-in { position: relative; max-width: 792px; margin: 0 auto; padding: 0 1rem; }
.mk-page-hero-in--wide { max-width: 1080px; padding: 0 1.2rem; }
.mk-page-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mk-muted);
  text-decoration: none;
  border: 1px solid var(--mk-line-dark-strong);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
}
.mk-page-back:hover { color: var(--mk-text); border-color: var(--mk-accent); background: rgba(122, 163, 209, 0.10); }
.mk-page-hero .mk-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent-bright);
  background: rgba(122, 163, 209, 0.12);
  border: 1px solid var(--mk-line-dark-strong);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
  margin: 0 0 1rem;
}
.mk-page-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(1.85rem, 4.5vw, 2.5rem);
  margin: 0;
  color: var(--mk-text);
}
.mk-page-hero .mk-lede { margin: 1.1rem 0 0; font-size: 1.04rem; line-height: 1.6; color: var(--mk-muted-soft); max-width: 62ch; }
.mk-page-hero .mk-hero-note { font-size: 0.88rem; color: var(--mk-muted); }

/* Portable navy CTA card (home + precios + 404): self-contained typography so
   it works outside .mk-landing (where headings default to serif). */
.mk-cta h1,
.mk-cta h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.mk-cta h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: 0; }

/* ── 4c. Precios: tier cards on mk tokens (light content, Midnight accents) */

.pricing-main .tier { border-radius: var(--mk-radius); border: 1px solid var(--line); box-shadow: var(--mk-shadow-card); }
.pricing-main .tier--featured { border-color: var(--mk-accent); box-shadow: 0 0 0 1px var(--mk-accent), var(--mk-shadow-card); }
.pricing-main .tier-badge { background: var(--mk-accent); color: #0b1524; font-weight: 700; }

/* Botones de las tier cards a la MISMA altura: las tarjetas comparten los
   tracks de fila del grid padre (subgrid); cada zona va a su fila fija
   (Free no tiene .tier-monthly → fila 4 vacía). Fallback: flex de siempre. */
@supports (grid-template-rows: subgrid) {
  .pricing-main .tier { display: grid; grid-template-rows: subgrid; grid-row: span 7; align-content: start; }
  .pricing-main .tier-name { grid-row: 1; }
  .pricing-main .tier-desc { grid-row: 2; }
  .pricing-main .tier-price { grid-row: 3; }
  .pricing-main .tier-monthly { grid-row: 4; }
  .pricing-main .tier-cap { grid-row: 5; align-self: end; }
  .pricing-main .tier > .btn { grid-row: 6; align-self: start; }
  .pricing-main .tier-features { grid-row: 7; }
}

/* ── 4c′. Precios EN Midnight completo (encargo Jose 07-24): la página entera
   pasa a oscuro — tarjetas, Custom, pilares, tabla y FAQ dejan de ser isla
   clara entre el chrome oscuro. Scoped a body.mk-pricing: el resto de
   interiores conserva el cuerpo claro por diseño (ver 4b). */

body.mk-pricing .app-header {
  background: var(--mk-dark);
  border-bottom-color: var(--mk-line-dark);
}
body.mk-pricing .brand-name { color: #fff; }
body.mk-pricing .brand-ia { color: var(--mk-accent-bright); }
body.mk-pricing .brand-beta {
  color: var(--mk-accent-bright);
  background: rgba(122, 163, 209, 0.12);
  border-color: var(--mk-line-dark-strong);
}
body.mk-pricing .app-footer {
  background: var(--mk-dark);
  border-top-color: var(--mk-line-dark);
  color: var(--mk-muted);
}
body.mk-pricing .app-footer a { color: var(--mk-muted); }
body.mk-pricing .app-footer a:hover { color: var(--mk-text); }

/* botones genéricos sobre oscuro (tarjetas, Custom y header «Pedir acceso») */
body.mk-pricing .btn-primary {
  background: var(--mk-accent);
  border-color: transparent;
  color: #0b1524;
  font-weight: 700;
}
body.mk-pricing .btn-primary:hover { background: var(--mk-accent-bright); color: #0b1524; }
body.mk-pricing .btn-secondary {
  background: transparent;
  border: 1px solid var(--mk-line-dark-strong);
  color: var(--mk-text);
}
body.mk-pricing .btn-secondary:hover { border-color: var(--mk-accent); background: rgba(122, 163, 209, 0.10); }

body.mk-pricing .pricing-main h2 { color: var(--mk-text); }

/* tarjetas de plan como paneles Midnight */
body.mk-pricing .tier {
  background: var(--mk-panel);
  border-color: var(--mk-line-dark);
  box-shadow: 0 20px 46px -30px rgba(4, 10, 20, 0.7);
}
body.mk-pricing .tier--featured {
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 1px var(--mk-accent), 0 22px 50px -26px rgba(122, 163, 209, 0.35);
}
body.mk-pricing .tier-name { color: var(--mk-text); }
body.mk-pricing .tier-desc { color: var(--mk-muted); }
body.mk-pricing .tier-price .amount { color: #fff; }
body.mk-pricing .tier-price .unit,
body.mk-pricing .tier-monthly { color: var(--mk-muted); }
body.mk-pricing .tier-cap { color: var(--mk-accent-bright); }
body.mk-pricing .tier-features li { color: var(--mk-muted-soft); }
body.mk-pricing .tier-features li.tier-feat-head { color: var(--mk-text); }
body.mk-pricing .tier-features .ic { color: var(--mk-ok); }

body.mk-pricing .pricing-legal { color: var(--mk-muted); }

/* banda Custom */
body.mk-pricing .pricing-enterprise {
  background: var(--mk-panel-2);
  border-color: var(--mk-line-dark);
}
body.mk-pricing .pricing-enterprise h2 { color: var(--mk-text); }
body.mk-pricing .pricing-enterprise p { color: var(--mk-muted-soft); }

/* pilares «incluido en todos los planes» (mismo recetario que las cards de
   banda oscura del home) */
body.mk-pricing .card {
  background: var(--mk-panel);
  border-color: var(--mk-line-dark);
  box-shadow: 0 20px 46px -30px rgba(4, 10, 20, 0.7);
}
body.mk-pricing .land-pillar h3 { color: var(--mk-text); }
body.mk-pricing .land-pillar p { color: var(--mk-muted-soft); }
body.mk-pricing .land-pillar-icon { color: var(--mk-accent-bright); }

/* tabla comparativa */
body.mk-pricing .pricing-table th,
body.mk-pricing .pricing-table td { border-bottom-color: var(--mk-line-dark); }
body.mk-pricing .pricing-table thead th { color: var(--mk-text); }
body.mk-pricing .pricing-table thead th.is-featured { color: var(--mk-accent-bright); }
body.mk-pricing .pricing-table td { color: var(--mk-muted-soft); }
body.mk-pricing .pricing-table td:first-child,
body.mk-pricing .pricing-table th:first-child { color: var(--mk-muted-soft); }
body.mk-pricing .pricing-table tbody tr:hover { background: rgba(122, 163, 209, 0.07); }
body.mk-pricing .pricing-table .feat-yes .ic { color: var(--mk-ok); }
body.mk-pricing .pricing-table .feat-no .ic { color: var(--mk-bad); }
body.mk-pricing .pricing-table .th-price { color: var(--mk-muted); }

/* FAQ: espejo tonal de .mk-faq del home sobre el patrón .land-faq */
body.mk-pricing .land-faq details { border-bottom-color: var(--mk-line-dark); }
body.mk-pricing .land-faq summary { color: var(--mk-text); }
body.mk-pricing .land-faq p { color: var(--mk-muted-soft); }
body.mk-pricing .land-faq a { color: var(--mk-accent-bright); }

/* ── 4d. 404 on dark ─────────────────────────────────────────────────── */

body.mk-dark { background: var(--mk-dark); color: var(--mk-text); }
.mk-404 { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 24px; }
.mk-404 .mk-cta { margin: 0; }
.mk-404 .mk-cta p { color: var(--mk-muted-soft); margin: 1rem auto 0; max-width: 52ch; }
.mk-404 .mk-cta p:last-child { margin-top: 1.8rem; display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
/* ghost visible fuera del header (el del header se oculta <960px) */
.mk-btn-ghost--inline { display: inline-flex; }

/* ── 5. Blog chrome: deepen masthead + pillar bar to Midnight ─────────── */

.blog-mast { background: var(--mk-dark); position: relative; overflow: hidden; }
.blog-mast::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  width: min(900px, 140%);
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 40%, rgba(122, 163, 209, 0.18), transparent 70%);
  pointer-events: none;
}
.blog-mast-in { position: relative; }
.blog-mast .brand-ia { color: var(--mk-accent-bright); }
.blog-mast-tag { color: var(--mk-muted-soft); }
.blog-mast-cta { background: var(--mk-accent); color: #0b1524; }
.blog-mast-cta:hover { background: var(--mk-accent-bright); color: #0b1524; }
.blog-pillbar { background: var(--mk-dark); border-top: 1px solid var(--mk-line-dark-strong); }

/* ── 6. Responsive ────────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .mk-num-grid { grid-template-columns: repeat(4, 1fr); }
  .mk-grid3 { grid-template-columns: repeat(2, 1fr); }
  .mk-howrow { grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 64px); }
  .mk-howrow--flip .mk-howcopy { order: 2; }
  .mk-howrow--flip .mk-howshot { order: 1; }
  .mk-howrow--solo { grid-template-columns: 1fr; }
  .mk-howrow--solo .mk-howcopy { max-width: 62ch; }
}

@media (min-width: 960px) {
  .mk-nav { display: flex; }
  .mk-btn-ghost { display: inline-flex; }
  .mk-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .mk-sub { font-size: 1.2rem; }
  .mk-grid3 { grid-template-columns: repeat(3, 1fr); }
  .mk-grid-2max { grid-template-columns: repeat(2, 1fr); }
  /* 4 tarjetas → 2×2 (evita la fila coja 3+1 de «Lo que revisia NO hace») */
  .mk-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .mk-float { position: static; margin-top: 0.8rem; max-width: none; justify-content: center; }
  .mk-cta { padding: 48px 20px; }
  .mk-play { width: 58px; height: 58px; }
  .mk-play svg { width: 24px; height: 24px; }
  .mk-play-hint { top: calc(50% + 46px); }
  .mk-vm-close { top: 8px; right: 8px; }
}