/* ═══════════════════════════════════════════════════════════════════════════════
   AIM ÆGIS · v26-puente.css — las páginas públicas antiguas, en «Tinta y luz» (15/10/2026)

   Las ~56 páginas públicas se escribieron con las clases de marketing.css (m-*) y escaparate.css (x-*), que
   leen sus colores de variables (--m-*, --x-*). Este puente no toca su HTML: cambia esas variables a la
   paleta de la portada (tinta y oro) y ajusta las piezas que llevaban colores de papel claro fijos.
   Se carga DESPUÉS de la hoja de cada página (ver _shell.html). Sustituye a marketing-light.css en la web pública.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mkt {
  --m-bg: #060608; --m-bg-2: #0b0b0f; --m-bg-3: #111116;
  /* colores sólidos (blanco y crema ya mezclados sobre la tinta): así los mide probar_contraste.py */
  --m-surface: #101012; --m-surface-2: #161618;
  --m-border: rgba(255, 255, 255, 0.09); --m-border-2: rgba(255, 255, 255, 0.15);
  --m-fg: #f4efe4; --m-fg-dim: #b6b2ab; --m-fg-faint: #9a9790;
  --m-gold: #dcb35c; --m-gold-br: #f8e7b0; --m-gold-deep: #a97a27;
  --m-gold-ink: #dcb35c;            /* en oscuro, el dorado de texto es el claro (contraste AA) */
  --m-gold-glow: rgba(220, 179, 92, 0.22);
  --m-green:     #7fd1a3;
  --m-red: #ff8a7a; --m-amber: #e8b45c;
  --m-sans: "Jakarta", "Plus Jakarta Sans", system-ui, sans-serif;
  --m-serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --m-mono: "JetBrains", "JetBrains Mono", ui-monospace, monospace;
  --x-ink: var(--m-fg); --x-dim: var(--m-fg-dim); --x-line: var(--m-border);
  --x-night: #0b0b0f; --x-night-2: #15151b; --x-night-line: rgba(255, 255, 255, 0.12);
  --x-night-fg: #f4efe4; --x-night-dim: rgba(244, 239, 228, 0.62); --x-night-gold: #dcb35c;
  --x-ok: #7fd1a3;
  --x-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  /* las clases de la app que aparecen en páginas públicas (tarjetas, textos secundarios) */
  --fg-primary: #f4efe4; --fg-secondary: rgba(244, 239, 228, 0.74); --fg-tertiary: rgba(244, 239, 228, 0.62);
  --bg-card: #111116; --bg-elevated: #15151b; --bg-hover: #1b1b22; --border: rgba(255, 255, 255, 0.09);
  --border-bright: rgba(255, 255, 255, 0.16); --accent-ink: #dcb35c;
  background: var(--m-bg); color: var(--m-fg);
}
body.mkt { font-size: 17px; }

/* ── tipografía: la de la portada ── */
.mkt .x-h1, .mkt .m-h1, .mkt main h1 { font-weight: 720; letter-spacing: -0.05em; line-height: 0.98; color: #fbf6ea; }
.mkt .x-h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); max-width: 14ch; }
.mkt .x-h2, .mkt main h2 { letter-spacing: -0.04em; font-weight: 700; }
.mkt .x-h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.03; }
.mkt .x-accent, .mkt .m-accent {
  font-family: var(--m-serif); font-style: italic; font-weight: 500; font-size: 1.07em; letter-spacing: -0.02em;
  background: linear-gradient(100deg, #f8e7b0 0%, #e2bd69 38%, #b8862f 70%, #f1d993 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mkt .x-kicker { font-family: var(--m-mono); color: var(--m-gold); }
.mkt .x-kicker::before { background: linear-gradient(90deg, transparent, var(--m-gold)); }
.mkt .x-hero { padding-top: calc(96px + clamp(1.6rem, 6vh, 4rem)); }
.mkt .x-hero::before {      /* el papel pautado pasa a luz dorada sobre tinta */
  background:
    radial-gradient(52% 58% at 84% 22%, rgba(220, 179, 92, 0.14), transparent 70%),
    radial-gradient(40% 50% at 6% 96%, rgba(127, 209, 163, 0.05), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(244, 239, 228, 0.025) 31px 32px);
}

/* ── botones ── */
.mkt .m-btn { border-radius: 999px; font-weight: 650; letter-spacing: -0.01em; }
.mkt .m-btn-primary {
  color: #1a1205 !important; border: 0;
  background: linear-gradient(180deg, #f7e2a3 0%, #e1b65f 48%, #c38f35 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(90, 60, 10, 0.35), 0 10px 34px -12px rgba(220, 179, 92, 0.75), 0 0 0 1px rgba(255, 220, 140, 0.35);
}
.mkt .m-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.mkt .m-btn-ghost, .mkt .m-btn-secondary {
  color: var(--m-fg); background: rgba(255, 255, 255, 0.055); border: 1px solid var(--m-border-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mkt .m-btn-ghost:hover, .mkt .m-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(220, 179, 92, 0.5); }
.mkt .x-btn-main::before { opacity: 0.55; }

/* ── superficies ── */
.mkt .x-sec--alt { background: linear-gradient(180deg, var(--m-bg-2), var(--m-bg)); }
.mkt .x-step, .mkt .x-path, .mkt .x-tile, .mkt .x-card-answer, .mkt .x-faq details, .mkt .x-watch, .mkt .x-doc, .mkt .x-area {
  background: linear-gradient(180deg, #111116, #0b0b0f); border-color: var(--m-border);
}
.mkt .x-path:hover, .mkt a.x-tile:hover { border-color: rgba(220, 179, 92, 0.5); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95); }
.mkt .x-notes li::before, .mkt .x-pin { color: #1a1205; background: linear-gradient(180deg, #f7e2a3, #c99a3c); box-shadow: none; }
.mkt .x-stage { background: linear-gradient(180deg, rgba(24, 24, 30, 0.9), rgba(10, 10, 13, 0.96)); border-color: rgba(255, 255, 255, 0.12); }
.mkt .x-q { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--m-fg); }
.mkt .x-meter-bar { background: rgba(255, 255, 255, 0.07); }
.mkt .x-meter-bar i { background: linear-gradient(90deg, #a97a27, #f8e7b0, #7fd1a3); }
.mkt .x-proof-n { font-family: var(--m-sans); font-weight: 720; letter-spacing: -0.05em;
  background: linear-gradient(100deg, #f8e7b0, #e2bd69 40%, #b8862f 75%, #f1d993); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── formularios (alta, contacto, autodiagnóstico, calculadoras) ── */
.mkt input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .mkt select, .mkt textarea {
  background-color: rgba(255, 255, 255, 0.05); color: var(--m-fg); border: 1px solid var(--m-border-2); border-radius: 12px;
}
.mkt input::placeholder, .mkt textarea::placeholder { color: rgba(244, 239, 228, 0.45); }
.mkt input:focus, .mkt select:focus, .mkt textarea:focus { outline: none; border-color: var(--m-gold); box-shadow: 0 0 0 4px rgba(220, 179, 92, 0.14); }
.mkt select option { background: #111116; color: var(--m-fg); }
.mkt label { color: var(--m-fg-dim); }

/* ── piezas de páginas antiguas con fondo claro fijo en línea: se reconvierten ── */
.mkt [style*="background:#fff"], .mkt [style*="background: #fff"], .mkt [style*="background:#FFFFFF"], .mkt [style*="background: #FFFFFF"],
.mkt [style*="background:#F7F8F6"], .mkt [style*="background: #F7F8F6"], .mkt [style*="background:#E6EAE5"], .mkt [style*="background: #E6EAE5"],
.mkt [style*="background: #E3F0EA"], .mkt [style*="background: #F6ECDA"] {
  background: #111116 !important; color: var(--m-fg) !important;
}
.mkt [style*="color: #131A1F"], .mkt [style*="color:#131A1F"] { color: var(--m-fg) !important; }

/* ── tablas (precios, comparativa, seguridad) ── */
.mkt table { color: var(--m-fg); }
.mkt th { color: var(--m-fg); }
.mkt td, .mkt th { border-color: var(--m-border) !important; }


/* ── la barra fija de las páginas antiguas, como la nueva: cápsula de cristal oscuro ── */
@media (max-width: 767.98px) {
  .mkt .m-sticky {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 0.45rem 0.45rem 0.45rem 1rem;
    border-radius: 999px; background: rgba(12, 12, 16, 0.82); border: 1px solid var(--m-border-2);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .mkt .m-sticky .m-sticky-main { order: 2; flex: 0 0 auto; min-height: 42px; padding: 0 1.1rem; }
  .mkt .m-sticky .m-sticky-alt { order: 1; margin-right: auto; color: var(--m-fg-dim); min-height: 42px; }
}

/* ── foto de cabecera propia (Higgsfield) en las páginas principales: atmósfera detrás del texto y la demostración ── */
.mkt .x-hero-foto { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mkt .x-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: 0.62; }
.mkt .x-hero-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 6, 8, 0.94) 0%, rgba(6, 6, 8, 0.78) 36%, rgba(6, 6, 8, 0.25) 70%, rgba(6, 6, 8, 0.45) 100%),
              linear-gradient(180deg, rgba(6, 6, 8, 0.4) 0%, transparent 25%, transparent 60%, var(--m-bg) 100%); }
.mkt .x-hero:has(.x-hero-foto)::before { display: none; }
@media (max-width: 980px) {
  .mkt .x-hero-foto img { object-position: 75% 20%; opacity: 0.5; }
  .mkt .x-hero-foto::after { background: linear-gradient(180deg, rgba(6, 6, 8, 0.35) 0%, rgba(6, 6, 8, 0.85) 45%, var(--m-bg) 100%); }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   AFINADO «A» · 17/10/2026 (Miguel: «haz A»). Arreglos objetivos de la revisión estética, sin cambiar la identidad:
   1. El titular pisaba la entradilla: los trazos que bajan de la cursiva dorada (p, y) se metían en el párrafo.
   2. Titulares tan apretados (-0,05 em a 80 px) que se comían el espacio entre palabras («Fichaje,turnos»).
   3. Etiquetas en mayúsculas de máquina de escribir con letras separadas → minúscula de frase en la letra del texto.
      La letra de máquina queda solo para las citas de ley («art. 34.9 ET»), donde significa «referencia».
   4. Notas legales en máquina de escribir a todo el ancho → letra de lectura y ancho de lectura.
   5. Un solo dorado sobre oscuro (había #C9A961, #DCB35C y #E8A33D a la vez).
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.mkt { --x-night-gold: var(--gold-2, #dcb35c); --m-gold: var(--gold-2, #dcb35c); }

/* 1 · aire entre titular y entradilla */
.mkt .k-h1-b { padding-bottom: 0.14em; }
.mkt .k-h1 + .k-lede, .mkt .g-h1 + .k-lede, .mkt .g-h1 + p, .mkt .x-h1 + .x-lede { margin-top: clamp(1.4rem, 2.2vw, 2rem); }
.mkt .g-h1 em { display: inline-block; padding-bottom: 0.1em; }

/* 2 · titulares que respiran */
.mkt .k-h1 { letter-spacing: -0.035em; word-spacing: 0.04em; }
.mkt .x-h1, .mkt .m-h1, .mkt main h1 { letter-spacing: -0.032em; word-spacing: 0.04em; }
.mkt .g-h1 { letter-spacing: -0.03em; word-spacing: 0.04em; }
.mkt .k-h2, .mkt .x-h2, .mkt main h2 { letter-spacing: -0.026em; }
.mkt .g-h2 { letter-spacing: -0.022em; margin-bottom: 1.4rem; }
.mkt .k-stat b, .mkt .x-proof-n { letter-spacing: -0.03em; }

/* 3 · etiquetas en minúscula de frase */
.mkt .k-kicker, .mkt .x-kicker {
  font-family: var(--sans, var(--m-sans)); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  line-height: 1.3; gap: 0;
}
.mkt .k-kicker::before, .mkt .x-kicker::before { display: none; }
.mkt .g-campos label {
  font-family: var(--sans, var(--m-sans)); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--fg-2, var(--m-fg-dim));
}

/* 4 · notas legales legibles */
.mkt .g-fuente { font-family: var(--sans, var(--m-sans)); font-size: 0.9rem; letter-spacing: 0; max-width: 72ch; line-height: 1.6; }
.mkt .xd-vigencia { font-family: var(--sans, var(--m-sans)); font-size: 0.86rem; letter-spacing: 0; border-radius: 14px; max-width: 72ch; }

/* ═══════════ DIRECCIÓN B (17/10/2026, D-AEGIS-41) ═══════════
   Los dos productos suben juntos sobre la tinta (RRHH de hoy y la ley anotada) y, en papel, igualdad y transparencia
   salarial. Papel cálido de la casa (--paper); un solo dorado; la cita en la cursiva de la casa. */
.k-hojas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(20px, 3vw, 36px);
  align-items: start; margin-top: clamp(48px, 8vh, 88px); position: relative; z-index: 3; }
.k-hoja { margin: 0; background: #fbf8f1; color: var(--ink-on-paper); border-radius: 8px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04); animation: k-hoja-sube 1.1s var(--ease) .35s both; }
.k-hoja-a { transform: rotate(.9deg); --rot: .9deg; }
.k-hoja-b { transform: rotate(-1deg); --rot: -1deg; animation-delay: .5s; }
@keyframes k-hoja-sube { from { opacity: 0; transform: translateY(48px) rotate(calc(var(--rot) * 2.2)); } to { opacity: 1; transform: rotate(var(--rot)); } }
.k-hoja-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.k-hoja-h .k-hoja-t { margin: 0; font: 700 1.3rem/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink-on-paper); }
.k-hoja-h span { font: 500 .8rem/1.4 var(--mono); color: var(--ink-on-paper-2); }
.k-hoja-h span.oro { color: #8a5d12; }
.k-hoja-fich { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink-on-paper); }
.k-hoja-fich li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e3ddd0; font-size: 1rem; }
.k-hoja-fich i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #ebe5d8; display: grid; place-items: center;
  font: 700 .78rem/1 var(--sans); font-style: normal; color: var(--ink-on-paper-2); }
.k-hoja-fich b { font-weight: 650; }
.k-hoja-fich span { flex: 1 1 auto; color: var(--ink-on-paper-2); }
.k-hoja-fich code { font: 500 .9rem/1 var(--mono); color: #2f6b57; }
.k-hoja-fich code.vac { color: #8a5d12; }
.k-hoja-pie { margin: 16px 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-on-paper-2); }
.k-hoja-pie b { color: var(--ink-on-paper); } .k-hoja-pie em { font-style: normal; font-weight: 600; color: #2f6b57; }
.k-hoja blockquote { margin: 18px 0 0; font: italic 400 1.55rem/1.42 var(--serif); color: var(--ink-on-paper); }
.k-sub { color: inherit; background: linear-gradient(transparent 58%, rgba(220, 179, 92, .55) 58%, rgba(220, 179, 92, .55) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%; animation: k-subraya 1s cubic-bezier(.6, .1, .2, 1) forwards; animation-delay: calc(1.3s + var(--s) * .9s); }
@keyframes k-subraya { to { background-size: 100% 100%; } }
.k-hoja-glosas { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #e3ddd0; display: grid; gap: 12px; }
.k-hoja-glosas li { display: flex; gap: 12px; font-size: 1rem; line-height: 1.45; }
.k-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2f6b57 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.8 11.3l2.9 2.9 5.6-5.8' fill='none' stroke='%23fbf8f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat; }
.k-glosa { opacity: 0; animation: k-glosa .6s ease forwards; animation-delay: calc(1.6s + var(--g) * .45s); }
@keyframes k-glosa { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .k-hoja-a, .k-hoja-b { --rot: 0deg; } .k-hoja blockquote { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) {
  .k-hoja, .k-glosa { animation: none; opacity: 1; } .k-hoja { transform: rotate(var(--rot)); }
  .k-sub { animation: none; background-size: 100% 100%; } }
#producto .k-app { margin: 0 0 clamp(40px, 6vw, 72px); }

/* igualdad y transparencia salarial, en papel */
.k-igu { margin-top: clamp(56px, 8vw, 104px); }
.k-igu-grid { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 80px); }
.k-igu-cifra { flex: 1 1 300px; }
.k-igu-n { margin: 0; font: 800 clamp(6rem, 13vw, 10.5rem)/.82 var(--sans); letter-spacing: -.05em; color: #8a5d12; }
.k-igu-cifra p:not(.k-igu-n) { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-on-paper-2); max-width: 36ch; }
.k-igu code, .k-igu-lista code { font: 500 .8rem/1.6 var(--mono); color: #8a5d12; }
.k-igu-txt { flex: 999 1 540px; min-width: 0; }
.k-igu-lede { margin: 26px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink-on-paper-2); max-width: 58ch; }
.k-igu-lista { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--ink-on-paper); }
.k-igu-lista li { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 16px 0; border-bottom: 1px solid #ddd5c5; }
.k-igu-lista li > div { flex: 999 1 320px; min-width: 0; }
.k-igu-lista h3 { margin: 0; font: 600 1.08rem/1.4 var(--sans); color: var(--ink-on-paper); }
.k-igu-lista p { margin: 4px 0 0; font-size: .95rem; color: var(--ink-on-paper-2); }
.k-igu-lista li > code { flex: 1 1 180px; align-self: center; padding-left: 14px; border-left: 1px solid #cfc6b4; }
.k-igu-est { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 999px; font: 600 .74rem/1.5 var(--sans);
  vertical-align: 2px; background: #f1e4c6; color: #6e4c14; white-space: nowrap; }
.k-igu-est.hoy { background: #dcebe3; color: #24584a; }
.k-igu-nos { margin: 22px 0 0; font-size: 1.04rem; line-height: 1.6; color: var(--ink-on-paper); max-width: 62ch; }
.k-igu .k-cta { justify-content: flex-start; margin-top: 24px; }
.k-btn-ink { color: var(--paper); background: var(--ink-on-paper); }
.k-btn-ink:hover { background: #2a261e; }
.k-btn-line { color: var(--ink-on-paper); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-on-paper); }
.k-btn-line:hover { background: rgba(21, 19, 15, .06); }
.k-igu-mini { margin: 16px 0 0; font-size: .95rem; }
.k-igu-mini a { color: #6e4c14; }
.k-hoja-fich b { white-space: nowrap; }
@media (max-width: 520px) { .k-hoja-fich span { font-size: 0; } .k-hoja-fich b { flex: 1 1 auto; } }

/* ── Selector de periodo de /precios (anual / mensual) · 30/10/2026 ──
   Estas reglas vivían solo en marketing-light.css, retirado de la web pública (_shell.html): sin ellas los botones
   medían 23-24 px y el activo no se distinguía (sonda 114). Todo el estilo va aquí, nada inline (el inline gana a .is-on). */
.mkt .m-per {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 0.55rem 1.15rem; border-radius: 99px;
  color: var(--m-fg-dim); transition: background .18s ease, color .18s ease;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px;
}
.mkt .m-per:hover { color: var(--m-fg); }
.mkt .m-per.is-on { background: var(--m-fg); color: var(--m-bg); }
.mkt .m-per .m-mono { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--m-green); }
.mkt .m-per.is-on .m-mono { color: #7a5200; }
.mkt .m-per:focus-visible { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.mkt .m-precio { font-variant-numeric: tabular-nums; }
/* solo para lectores de pantalla (también vivía solo en marketing-light.css; /precios enseñaba el caption y el thead) */
.mkt .m-solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mkt main h3.k-h2 { letter-spacing: -0.026em; }   /* #t-comprobable pasó de h2 a h3 (una idea por sección, sonda 40) */