/* ════════════════════════════════════════════════════════════════════════════
   AIM ÆGIS · escaparate.css — la portada y /plataforma (rediseño del 26/09/2026)

   Idea: una web que VENDE ENSEÑANDO. El producto se entiende en una imagen —una
   respuesta con su artículo y la comprobación de cada cita contra el texto
   oficial— y cada sección responde a una sola pregunta del visitante: ¿qué es?,
   ¿cómo funciona?, ¿es para mí?, ¿por qué fiarme?, ¿cuánto cuesta?, ¿y ahora?

   Sin @layer a propósito: las hojas comunes no van en capas y ganarían siempre.
   Técnica (mejora progresiva: sin soporte, se ve igual de bien y sin animar):
   · color-mix() en OKLab, @property (borde que gira), container queries,
     :has(), text-wrap: balance/pretty, animaciones ligadas al scroll
     (animation-timeline: view()), acordeón exclusivo con <details name> y
     apertura animada (interpolate-size + ::details-content).
   · Cero JavaScript para el movimiento de la cabecera: la demostración es CSS.
   · prefers-reduced-motion: todo queda en su estado final, sin movimiento.
   · Sin terceros, sin imágenes nuevas: todo es HTML, CSS y las tres fuentes propias.
   ════════════════════════════════════════════════════════════════════════════ */

.mkt {
  --x-ink: var(--m-fg);
  --x-dim: var(--m-fg-dim);
  --x-line: var(--m-border);
  --x-gold: var(--m-gold);
  --x-gold-soft: color-mix(in oklab, var(--m-gold) 14%, transparent);
  --x-night: #0B1014;
  --x-night-2: #121A21;
  --x-night-line: #243039;
  --x-night-fg: #E4EAEE;
  --x-night-dim: #9AA7B2;
  --x-night-gold: #E8A33D;
  --x-ok: #3FB67F;
  --x-radius: 22px;
  --x-shadow: 0 1px 2px rgba(19,26,31,.05), 0 20px 50px -24px rgba(19,26,31,.28);
}

/* ── Tipografía de la página ─────────────────────────────────────────────── */
.mkt .x-hero h1, .mkt .x-sec h2, .mkt .x-sec h3, .mkt .m-cinema h2 { text-wrap: balance; }
.mkt .x-hero p, .mkt .x-sec p { text-wrap: pretty; }
.mkt .x-h1 {
  font-size: clamp(2.35rem, 5.1vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.038em; margin: 1.1rem 0 1.25rem; max-width: 15ch;
}
.mkt .x-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0.9rem 0 0; max-width: 28ch; }
.mkt .x-accent { font-family: var(--m-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--m-gold); }
.mkt .x-lede { font-size: clamp(1.06rem, 1.45vw, 1.25rem); line-height: 1.6; color: var(--x-dim); max-width: 56ch; margin: 0; }
.mkt .x-kicker {
  font-family: var(--m-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--m-gold-ink, #7F652C); display: inline-flex; align-items: center; gap: 0.65em;
}
.mkt .x-kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.mkt .x-sec { position: relative; padding: clamp(2.8rem, 7vh, 5.2rem) 0; }
.mkt .x-sec--alt { background: var(--m-bg-2); }
.mkt .x-head { display: grid; gap: 0.2rem; margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.mkt .x-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 1rem 3rem; }
@media (max-width: 900px) { .mkt .x-head--split { grid-template-columns: 1fr; } }

/* ── Botones de la portada: el primario con un brillo que recorre el borde ── */
@property --x-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.mkt .x-btn-main { position: relative; isolation: isolate; }
.mkt .x-btn-main::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--x-ang), transparent 0 70%, rgba(255,236,190,.95) 80%, transparent 90%);
  animation: x-giro 4.5s linear infinite; opacity: .9;
}
@keyframes x-giro { to { --x-ang: 360deg; } }
.mkt .x-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1.8rem; }
.mkt .x-cta .m-btn-lg { padding: 0.95em 1.55em; font-size: 1.02rem; }
.mkt .x-micro {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 1rem 0 0; padding: 0; list-style: none;
  font-family: var(--m-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--x-dim);
}
.mkt .x-micro li { display: inline-flex; align-items: center; gap: 0.45em; }
.mkt .x-micro li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--m-green) 18%, transparent); }
.mkt .x-link { color: var(--x-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--m-gold) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mkt .x-link:hover { text-decoration-color: var(--m-gold); }

/* ════════ 1 · CABECERA ════════ */
.mkt .x-hero { position: relative; padding: calc(72px + clamp(1.6rem, 5vh, 3.4rem)) 0 clamp(2rem, 5vh, 3.2rem); overflow: clip; }
/* papel pautado que se desvanece: el cuaderno de un jurista, sin imagen */
.mkt .x-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 58% at 84% 22%, color-mix(in oklab, var(--m-gold) 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 6% 96%, color-mix(in oklab, var(--m-green) 7%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in oklab, var(--m-fg) 3.2%, transparent) 31px 32px);
  -webkit-mask-image: radial-gradient(90% 75% at 70% 35%, #000 20%, transparent 85%);
          mask-image: radial-gradient(90% 75% at 70% 35%, #000 20%, transparent 85%);
}
.mkt .x-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
@media (max-width: 980px) { .mkt .x-hero-grid { grid-template-columns: 1fr; } }
.mkt .x-aside-link { display: inline-block; margin-top: 1.1rem; font-size: 0.92rem; color: var(--x-dim); }

/* ── El escenario: una respuesta de Atlas, con cada cita comprobada ── */
.mkt .x-stage {
  position: relative; margin: 0; border-radius: var(--x-radius); color: var(--x-night-fg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232,163,61,.10), transparent 55%),
    linear-gradient(180deg, var(--x-night-2), var(--x-night));
  border: 1px solid var(--x-night-line);
  box-shadow: 0 40px 80px -30px rgba(11,16,20,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  font-size: 0.93rem; line-height: 1.55; isolation: isolate;
}
.mkt .x-stage::after {       /* filo dorado que recorre el marco */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; padding: 1px;
  background: conic-gradient(from var(--x-ang), transparent 0 62%, rgba(232,163,61,.75) 72%, transparent 82%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: x-giro 7s linear 2;      /* dos vueltas y se queda quieto: sin repintar para siempre */
}
.mkt .x-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-night-dim); }
.mkt .x-stage-top b { color: var(--x-night-gold); font-weight: 600; }
.mkt .x-tag { white-space: nowrap; border: 1px solid var(--x-night-line); border-radius: 999px; padding: 0.2rem 0.6rem; letter-spacing: 0.06em; text-transform: none; font-size: 0.66rem; }
.mkt .x-q {
  margin: 1rem 0 0.9rem auto; max-width: 88%; width: fit-content; background: #1C2731; border: 1px solid var(--x-night-line);
  border-radius: 16px 16px 4px 16px; padding: 0.65rem 0.9rem; color: #F4F7F9;
}
.mkt .x-phases { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-family: var(--m-mono); font-size: 0.7rem; color: var(--x-night-dim); }
.mkt .x-phases li { display: inline-flex; gap: 0.4em; align-items: center; }
.mkt .x-phases li::before { content: "✓"; color: var(--x-ok); font-weight: 700; }
.mkt .x-answer { margin: 0 0 0.9rem; color: var(--x-night-fg); }
.mkt .x-answer strong { color: #fff; }
.mkt .x-cites { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mkt .x-cite {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; align-items: center;
  border: 1px solid rgba(63,182,127,.35); background: rgba(63,182,127,.06); border-radius: 12px; padding: 0.55rem 0.8rem;
}
.mkt .x-cite-ok { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(63,182,127,.16); color: #7BE0AE; font-weight: 800; font-size: 0.85rem; }
.mkt .x-cite-t { font-weight: 700; color: #fff; font-size: 0.88rem; }
.mkt .x-cite-s { font-family: var(--m-mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--x-night-dim); }
.mkt .x-cite::after {        /* la «lectura» del texto oficial: una banda que barre la cita */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(232,163,61,.22) 50%, transparent 80%);
  transform: translateX(-110%);
}
.mkt .x-meter { margin-top: 0.95rem; display: grid; gap: 0.45rem; }
.mkt .x-meter-l { display: flex; justify-content: space-between; font-family: var(--m-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-night-dim); }
.mkt .x-meter-l b { color: #7BE0AE; font-weight: 700; letter-spacing: 0.04em; }
.mkt .x-meter-bar { height: 6px; border-radius: 99px; background: #1C2731; overflow: hidden; }
.mkt .x-meter-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #2E8F62, #7BE0AE); transform-origin: left; }
.mkt .x-stage-cap { margin-top: 0.75rem; font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--x-dim); text-align: center; }

/* Coreografía (solo con movimiento permitido): pregunta → lectura → respuesta → citas → índice */
@media (prefers-reduced-motion: no-preference) {
  .mkt .x-stage .x-q        { animation: x-entra .6s var(--m-ease) .15s both; }
  .mkt .x-stage .x-phases li { animation: x-entra .45s var(--m-ease) both; }
  .mkt .x-stage .x-phases li:nth-child(1) { animation-delay: .7s; }
  .mkt .x-stage .x-phases li:nth-child(2) { animation-delay: 1.05s; }
  .mkt .x-stage .x-phases li:nth-child(3) { animation-delay: 1.4s; }
  .mkt .x-stage .x-answer   { animation: x-entra .7s var(--m-ease) 1.8s both; }
  .mkt .x-stage .x-cite     { animation: x-entra .6s var(--m-ease) both; }
  .mkt .x-stage .x-cite:nth-child(1) { animation-delay: 2.4s; }
  .mkt .x-stage .x-cite:nth-child(2) { animation-delay: 2.85s; }
  .mkt .x-stage .x-cite::after { animation: x-barre 1.1s ease-out both; }
  .mkt .x-stage .x-cite:nth-child(1)::after { animation-delay: 2.6s; }
  .mkt .x-stage .x-cite:nth-child(2)::after { animation-delay: 3.05s; }
  .mkt .x-stage .x-cite-ok  { animation: x-sello .5s cubic-bezier(.2,1.6,.4,1) both; }
  .mkt .x-stage .x-cite:nth-child(1) .x-cite-ok { animation-delay: 3.1s; }
  .mkt .x-stage .x-cite:nth-child(2) .x-cite-ok { animation-delay: 3.55s; }
  .mkt .x-stage .x-meter-bar i { animation: x-llena 1.1s var(--m-ease) 3.7s both; }
  .mkt .x-stage .x-meter-l b { animation: x-entra .4s ease 4.3s both; }
}
@keyframes x-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes x-barre { to { transform: translateX(110%); } }
@keyframes x-sello { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes x-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Franja de pruebas ── */
.mkt .x-proof {
  position: relative; z-index: 1; margin-top: clamp(2rem, 5vh, 3.2rem); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
}
.mkt .x-proof > div { padding: 1.05rem 1.2rem 1rem; }
.mkt .x-proof > div + div { border-left: 1px solid var(--x-line); }
.mkt .x-proof-n { font-family: var(--m-mono); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -0.03em; color: var(--x-ink); line-height: 1; }
.mkt .x-proof-l { margin-top: 0.45rem; font-size: 0.8rem; line-height: 1.4; color: var(--x-dim); }
.mkt .x-proof-l a { color: inherit; }
@media (max-width: 860px) {
  .mkt .x-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt .x-proof > div:nth-child(3) { border-left: 0; }
  .mkt .x-proof > div:nth-child(n+3) { border-top: 1px solid var(--x-line); }
}

/* ════════ 2 · CÓMO FUNCIONA ════════ */
.mkt .x-why { font-size: 0.95rem; color: var(--x-dim); max-width: 46ch; margin: 0; justify-self: end; border-left: 2px solid var(--m-gold); padding-left: 1rem; }
.mkt .x-why b { font-family: var(--m-mono); color: var(--x-ink); }
@media (max-width: 900px) { .mkt .x-why { justify-self: start; } }
.mkt .x-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; counter-reset: paso; position: relative; }
@media (max-width: 900px) { .mkt .x-steps { grid-template-columns: 1fr; } }
.mkt .x-step {
  position: relative; background: var(--m-surface); border: 1px solid var(--x-line); border-radius: 20px; padding: 1.3rem 1.3rem 1.2rem;
  box-shadow: var(--x-shadow); display: flex; flex-direction: column; gap: 0.6rem; counter-increment: paso;
}
.mkt .x-step-n { font-family: var(--m-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--m-gold); }
.mkt .x-step-n::before { content: "0" counter(paso) " · "; }
.mkt .x-step h3 { font-size: 1.14rem; letter-spacing: -0.02em; line-height: 1.2; }
.mkt .x-step p { font-size: 0.93rem; color: var(--x-dim); line-height: 1.6; margin: 0; }
.mkt .x-mini { margin-top: auto; padding-top: 0.6rem; }
.mkt .x-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mkt .x-chip { font-size: 0.76rem; border: 1px solid var(--x-line); border-radius: 999px; padding: 0.28rem 0.65rem; background: var(--m-surface-2); color: var(--x-ink); }
.mkt .x-chip b { font-family: var(--m-mono); color: var(--m-gold); }
.mkt .x-ob { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.8rem; }
.mkt .x-ob li { display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px dashed var(--x-line); padding: 0.28rem 0; }
.mkt .x-ob li span:last-child { font-family: var(--m-mono); font-size: 0.72rem; color: var(--m-gold); white-space: nowrap; }
.mkt .x-ob li.no { color: var(--m-fg-faint); }
.mkt .x-ob li.no span:first-child { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--m-fg) 35%, transparent); }
.mkt .x-ob li.no span:last-child { color: var(--m-fg-faint); }
.mkt .x-doc { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; align-items: center; border: 1px solid var(--x-line); border-radius: 12px; padding: 0.6rem 0.75rem; background: var(--m-surface-2); font-size: 0.8rem; }
.mkt .x-doc svg { grid-row: span 2; color: var(--m-gold); }
.mkt .x-doc small { font-family: var(--m-mono); font-size: 0.66rem; color: var(--m-fg-faint); }
.mkt .x-date { margin-top: 0.45rem; display: inline-flex; gap: 0.45rem; align-items: center; font-family: var(--m-mono); font-size: 0.7rem; color: var(--m-amber); border: 1px solid color-mix(in oklab, var(--m-amber) 35%, transparent); background: color-mix(in oklab, var(--m-amber) 7%, transparent); border-radius: 999px; padding: 0.22rem 0.6rem; }
/* la línea que une los tres pasos se dibuja al bajar (donde el navegador lo sabe hacer) */
@media (min-width: 901px) {
  .mkt .x-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: -14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--m-gold), color-mix(in oklab, var(--m-gold) 25%, transparent)); transform-origin: left; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .mkt .x-steps::before { animation: x-llena linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
      .mkt .x-step { animation: x-sube linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    }
  }
}
@keyframes x-sube { from { opacity: .35; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mkt .x-cover { margin-top: clamp(1.6rem, 4vh, 2.4rem); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem 2.4rem; align-items: center; }
@media (max-width: 900px) { .mkt .x-cover { grid-template-columns: 1fr; } }
.mkt .x-cover p { margin: 0; color: var(--x-dim); font-size: 0.98rem; line-height: 1.6; }
.mkt .x-areas { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mkt .x-area { display: inline-flex; gap: 0.5rem; align-items: baseline; border: 1px solid var(--x-line); background: var(--m-surface); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.84rem; text-decoration: none; color: var(--x-ink); transition: border-color .25s, transform .25s; }
.mkt .x-area:hover { border-color: var(--m-gold); transform: translateY(-1px); }
.mkt .x-area b { font-family: var(--m-mono); font-size: 0.74rem; color: var(--m-gold); }

/* ════════ 3 · PARA QUIÉN ════════ */
.mkt .x-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .mkt .x-paths { grid-template-columns: 1fr; } }
.mkt .x-path {
  container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; color: inherit;
  background: var(--m-surface); border: 1px solid var(--x-line); border-radius: 20px; padding: 1.35rem 1.35rem 1.2rem; box-shadow: var(--x-shadow);
  transition: transform .45s var(--m-ease), border-color .3s, box-shadow .45s;
}
.mkt .x-path:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--m-gold) 55%, var(--x-line)); box-shadow: 0 30px 60px -30px rgba(19,26,31,.35); }
.mkt .x-path-k { font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-gold); }
.mkt .x-path h3 { font-size: 1.28rem; letter-spacing: -0.02em; }
.mkt .x-path p { margin: 0; font-size: 0.93rem; color: var(--x-dim); line-height: 1.6; }
.mkt .x-price { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--x-line); display: grid; gap: 0.15rem; }
.mkt .x-price-n { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.mkt .x-price-s { font-size: 0.8rem; color: var(--x-dim); }
.mkt .x-price-go { margin-top: 0.6rem; font-family: var(--m-mono); font-size: 0.78rem; color: var(--m-gold); }
.mkt .x-path:hover .x-price-go { text-decoration: underline; text-underline-offset: 3px; }
@container (min-width: 380px) { .mkt .x-path h3 { font-size: 1.4rem; } }
.mkt .x-paths-foot { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--x-dim); }

/* ════════ 4 · LA DIFERENCIA: anatomía de una respuesta ════════ */
.mkt .x-anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
@media (max-width: 980px) { .mkt .x-anat { grid-template-columns: 1fr; } }
.mkt .x-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; counter-reset: nota; }
.mkt .x-notes li { counter-increment: nota; display: grid; grid-template-columns: 2rem 1fr; gap: 0.7rem; align-items: start; }
.mkt .x-notes li::before { content: counter(nota); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--m-mono); font-weight: 700; font-size: 0.85rem; color: #fff; background: var(--m-gold); }
.mkt .x-notes b { display: block; font-size: 1rem; }
.mkt .x-notes span { font-size: 0.92rem; color: var(--x-dim); line-height: 1.55; }
.mkt .x-watch { margin-top: 0; border: 1px solid var(--x-line); border-left: 3px solid var(--m-gold); border-radius: 12px; padding: 0.85rem 1rem; background: var(--m-surface); font-size: 0.9rem; color: var(--x-dim); line-height: 1.55; }
.mkt .x-watch b { color: var(--x-ink); }
.mkt .x-stage--static .x-cite-ok, .mkt .x-stage--static .x-cite, .mkt .x-stage--static .x-answer { animation: none !important; }
.mkt .x-card-answer { position: relative; margin: 0 0 1rem; background: var(--m-surface); border: 1px solid var(--x-line); border-radius: 18px; padding: 1.1rem 1.2rem 1.1rem 1.6rem; box-shadow: var(--x-shadow); font-size: 0.92rem; }
.mkt .x-ca-top { display: flex; justify-content: space-between; font-family: var(--m-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-fg-faint); }
.mkt .x-ca-q { margin: 0.7rem 0 0.5rem; font-weight: 600; }
.mkt .x-ca-a { margin: 0 0 0.8rem; color: var(--x-dim); line-height: 1.55; }
.mkt .x-pinned { position: relative; }
.mkt .x-pinned > .x-pin { left: -2.05rem; top: 50%; transform: translateY(-50%); }
.mkt .x-ca-cite { display: inline-block; border: 1px solid color-mix(in oklab, var(--m-green) 40%, transparent); background: color-mix(in oklab, var(--m-green) 7%, transparent); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.84rem; }
.mkt .x-ca-src { margin: 0.55rem 0 0; font-family: var(--m-mono); font-size: 0.7rem; color: var(--m-green); }
.mkt .x-ca-meter { margin-top: 0.7rem; display: flex; justify-content: space-between; font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-fg-faint); border-top: 1px solid var(--x-line); padding-top: 0.6rem; }
.mkt .x-ca-meter b { color: var(--m-green); }
.mkt .x-pin { position: absolute; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--m-mono); font-weight: 700; font-size: 0.72rem; color: #fff; background: var(--m-gold); box-shadow: 0 0 0 4px rgba(135,88,18,.25); z-index: 2; }

/* ════════ 5 · COMPROBABLE ════════ */
.mkt .x-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .mkt .x-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mkt .x-trust { grid-template-columns: 1fr; } }
.mkt .x-tile { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; background: var(--m-surface); border: 1px solid var(--x-line); border-radius: 18px; padding: 1.15rem 1.2rem; transition: border-color .3s, transform .45s var(--m-ease); }
a.x-tile:hover { border-color: var(--m-gold); transform: translateY(-3px); }
.mkt .x-tile-n { font-family: var(--m-mono); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; color: var(--x-ink); }
.mkt .x-tile h3 { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.25; }
.mkt .x-tile p { margin: 0; font-size: 0.86rem; color: var(--x-dim); line-height: 1.55; }
.mkt .x-tile-go { margin-top: auto; font-family: var(--m-mono); font-size: 0.74rem; color: var(--m-gold); }
.mkt .x-who { margin: 1.3rem 0 0; font-size: 0.9rem; color: var(--x-dim); max-width: 92ch; line-height: 1.6; }

/* ════════ 6 · PREGÚNTALE ════════ */
.mkt .x-ask { max-width: 760px; margin: 0 auto; text-align: center; }
.mkt .x-ask .x-h2 { margin-left: auto; margin-right: auto; }
.mkt .x-ask .x-lede { margin: 1rem auto 0; }
.mkt .x-ask-box { margin-top: 1.6rem; text-align: left; }
.mkt .x-ask-row { display: flex; gap: 0.5rem; flex-wrap: wrap; background: var(--m-surface); border: 1px solid var(--m-border-2); border-radius: 999px; padding: 0.35rem; box-shadow: var(--x-shadow); transition: border-color .25s, box-shadow .25s; }
.mkt .x-ask-row:focus-within { border-color: var(--m-gold); box-shadow: 0 0 0 4px var(--x-gold-soft), var(--x-shadow); }
.mkt .x-ask-row input { flex: 1; min-width: 220px; border: 0; background: transparent; padding: 0.75rem 1rem; font-size: 1rem; color: var(--x-ink); outline: none; font-family: inherit; }
.mkt .x-sugg { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; margin-top: 0.9rem; }
.mkt .x-sugg button { font: inherit; font-size: 0.8rem; cursor: pointer; border: 1px dashed var(--m-border-2); background: transparent; color: var(--x-dim); border-radius: 999px; padding: 0.35rem 0.75rem; transition: border-color .2s, color .2s; }
.mkt .x-sugg button:hover { border-color: var(--m-gold); color: var(--x-ink); border-style: solid; }
.mkt .x-ask-note { font-family: var(--m-mono); font-size: 0.7rem; color: var(--m-fg-faint); margin: 0.8rem 0 0; text-align: center; }
@media (max-width: 560px) {
  .mkt .x-ask-row { border-radius: 18px; }
  .mkt .x-ask-row .m-btn { width: 100%; justify-content: center; }
}

/* ════════ 7 · PREGUNTAS ════════ */
.mkt .x-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.1rem; align-items: start; }
.mkt .x-faq-col { display: grid; gap: 0.7rem; }
@media (max-width: 900px) { .mkt .x-faq { grid-template-columns: 1fr; } }
.mkt .x-faq details { background: var(--m-surface); border: 1px solid var(--x-line); border-radius: 16px; padding: 0 1.1rem; transition: border-color .25s, box-shadow .25s; interpolate-size: allow-keywords; }
.mkt .x-faq details:hover { border-color: var(--m-border-2); }
.mkt .x-faq details[open] { border-color: color-mix(in oklab, var(--m-gold) 50%, var(--x-line)); box-shadow: var(--x-shadow); }
.mkt .x-faq summary { list-style: none; cursor: pointer; padding: 1rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.mkt .x-faq summary::-webkit-details-marker { display: none; }
.mkt .x-faq summary::after { content: "+"; font-family: var(--m-mono); font-weight: 400; font-size: 1.2rem; color: var(--m-gold); transition: transform .3s var(--m-ease); flex-shrink: 0; }
.mkt .x-faq details[open] summary::after { transform: rotate(45deg); }
.mkt .x-faq details p { margin: 0 0 1rem; color: var(--x-dim); font-size: 0.94rem; line-height: 1.6; }
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .mkt .x-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--m-ease), content-visibility .4s allow-discrete; }
    .mkt .x-faq details[open]::details-content { block-size: auto; }
  }
}

/* ════════ 8 · CIERRE DE CINE ════════ */
.mkt .m-cinema{position:relative;min-height:min(64vh,580px);display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--m-border);}
.mkt .m-cinema-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;}
.mkt .m-cinema-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;opacity:0;transition:opacity 1.2s ease;}
.mkt .m-cinema-video.is-on{opacity:1;}
@media (max-width: 980px), (prefers-reduced-motion: reduce){ .mkt .m-cinema-video{display:none;} }
.mkt .m-cinema-veil{position:absolute;inset:0;background:linear-gradient(90deg, rgba(8,9,15,0.92) 0%, rgba(8,9,15,0.72) 34%, rgba(8,9,15,0.18) 62%, rgba(8,9,15,0.05) 100%), linear-gradient(0deg, rgba(8,9,15,0.55) 0%, transparent 24%);}
.mkt .m-cinema-content{position:relative;z-index:2;padding-top:clamp(3.5rem,9vh,6rem);padding-bottom:clamp(3.5rem,9vh,6rem);}
.mkt .m-cinema .x-h2 { color: #fff; max-width: 16ch; font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.mkt .m-cinema .x-lede { color: #C9D2D9; max-width: 44ch; margin-top: 1rem; }
.mkt .m-cinema .x-kicker { color: var(--x-night-gold); }
.mkt .m-cinema .x-accent { color: var(--x-night-gold); }
.mkt .m-cinema .m-btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.mkt .m-cinema .m-btn-ghost:hover { border-color: var(--x-night-gold); color: #fff; }
@media (max-width: 720px){
  .mkt .m-cinema{min-height:70vh;}
  .mkt .m-cinema-bg{object-position:66% center;}
  .mkt .m-cinema-veil{background:linear-gradient(0deg, rgba(8,9,15,0.9) 0%, rgba(8,9,15,0.62) 55%, rgba(8,9,15,0.35) 100%);}
}

/* ── Móvil: la acción, dentro de la primera pantalla ── */
@media (max-width: 640px) {
  .mkt .x-hero { padding-top: calc(64px + 1.2rem); }
  .mkt .x-h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); margin: 0.8rem 0 0.9rem; }
  .mkt .x-lede { font-size: 1rem; line-height: 1.5; }
  .mkt .x-cta { margin-top: 1.3rem; }
  .mkt .x-cta .m-btn-lg { width: 100%; justify-content: center; }
  .mkt .x-kicker { font-size: 0.66rem; letter-spacing: 0.16em; }
  .mkt .x-stage-top { font-size: 0.62rem; letter-spacing: 0.1em; }
  .mkt .x-stage { font-size: 0.9rem; }
}

/* ── Menos movimiento: nada se mueve, todo está en su sitio ── */
@media (prefers-reduced-motion: reduce) {
  .mkt .x-btn-main::before, .mkt .x-stage::after { animation: none; }
  .mkt .x-path, .mkt .x-tile, .mkt .x-area { transition: none; }
}
@media (forced-colors: active) {
  .mkt .x-btn-main::before, .mkt .x-stage::after, .mkt .x-cite::after { display: none; }
  .mkt .x-stage { border: 1px solid CanvasText; }
}