/* Landing del conector MCP de BuscadorLaboral (/conectar/), 27-sep-2026.
   Pedido del founder: «el /conectar tiene mucha jerga técnica y es poco amistoso; inspírate en la landing de connect de
   bt en su formato». Estructura de connect.buscadortributario.cl en el mundo de marca de BL: la banda granate de la home
   (.lab-marca, --oc-bg-marca) envuelve cabecera, barra y portada; abajo, papel claro con filetes de 1 px. Domine en
   titulares, Manrope en texto, JetBrains Mono solo para la dirección y el comando. Pesos 400-700, sin itálicas, radios
   6/12/18/999, ningún filete de color sobre 1 px, sin rótulos sobre los títulos. Carril y escala de la home. */

[hidden] { display: none !important; }
body.cx { margin: 0; background: var(--oc-bg); color: var(--oc-body); font-family: var(--oc-font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.cx main, .cx main *, .cn-hero, .cn-hero * { box-sizing: border-box; }
.cx h1, .cx h2, .cx h3 { font-family: var(--oc-font-serif); text-wrap: balance; }
.cx p, .cx li { text-wrap: pretty; }
.cx main a { color: var(--oc-navy); text-decoration: none; border-bottom: 1px solid var(--oc-accent); transition: color var(--oc-dur) var(--oc-ease), border-color var(--oc-dur) var(--oc-ease); }
.cx main a:hover { color: var(--oc-navy-500); border-bottom-color: var(--oc-navy-500); }
.cx main a:focus-visible, .cx main button:focus-visible, .cx main summary:focus-visible, .cn-panel:focus-visible { outline: 0; box-shadow: var(--oc-focus-ring); border-radius: var(--oc-r-sm); }
.cx main b, .cx main strong { font-weight: 600; color: var(--oc-ink); }
.cn-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cn-salto { position: absolute; top: -52px; left: 8px; z-index: 10000; padding: 10px 16px; border-radius: 0 0 var(--oc-r-sm) var(--oc-r-sm); background: #fff; color: var(--oc-navy-900); font-weight: 600; font-size: 14px; text-decoration: none; transition: top var(--oc-dur-fast) var(--oc-ease-out); }
.cn-salto:focus, .cn-salto:focus-visible { top: 0; outline: 3px solid var(--oc-focus-on-dark); outline-offset: 2px; }

.cn-carril { width: min(calc(100% - 64px), 1264px); margin: 0 auto; }
.cn-beta { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--oc-navy-300); border-radius: var(--oc-r-pill); background: var(--oc-navy-100); color: var(--oc-navy-900); font-family: var(--oc-font-sans); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; vertical-align: 2px; }

/* ── Botones ── */
.cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--oc-r); font-family: var(--oc-font-sans); font-size: 15.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--oc-dur) var(--oc-ease), color var(--oc-dur) var(--oc-ease), border-color var(--oc-dur) var(--oc-ease), filter var(--oc-dur) var(--oc-ease); }
.cx .cn-btn { border-bottom: 0; }
.cn-btn--claro { border: 0; background: #fff; color: var(--oc-navy-900); box-shadow: 0 10px 24px -12px rgba(20, 2, 7, .7); }
.cn-btn--claro:hover { background: var(--oc-navy-100); color: var(--oc-navy-900); }
.cn-btn--borde { border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; }
.cn-btn--borde:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.cx main .cn-btn--marca { border: 0; background: var(--oc-bg-marca, var(--oc-navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); color: #fff; }
.cx main .cn-btn--marca:hover { color: #fff; filter: brightness(1.14); }
.cn-btn:focus-visible { outline: 3px solid var(--oc-focus-on-dark); outline-offset: 2px; }
.cx main .cn-btn--marca:focus-visible { outline: 0; box-shadow: var(--oc-focus-ring); }

/* ── El mundo de marca: cabecera, barra y portada sobre UNA banda (la receta de la home) ── */
.cn-mundo { position: relative; overflow: hidden; color: var(--oc-on-navy); }
.cn-hero { position: relative; padding: 64px 0 72px; outline: 0; }
.cn-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cn-hero h1 { max-width: 23ch; margin: 0 0 20px; color: var(--oc-on-navy); font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.cn-acento { color: var(--oc-accent); }
.cn-bajada { max-width: 64ch; margin: 0 0 30px; color: var(--oc-on-navy-soft); font-size: 18px; line-height: 1.6; }
.cn-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 22px; }
.cn-confianza { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--oc-on-navy-soft); }
.cn-confianza li { position: relative; }
.cn-confianza li + li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: var(--oc-r-circle); background: var(--oc-accent); }
.cn-confianza b { color: #fff; font-weight: 600; }

/* ── Fuentes: una fila con filetes, no tarjetas ── */
.cn-fuentes { border-bottom: 1px solid var(--oc-line); background: var(--oc-surface); }
.cn-fuentes-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.cn-fuentes-lista li { padding: 22px 22px 24px; border-left: 1px solid var(--oc-line); font-size: 14.5px; line-height: 1.45; color: var(--oc-body-soft); }
.cn-fuentes-lista li:first-child { padding-left: 0; border-left: 0; }
.cx .cn-fuentes-lista b { display: block; margin-bottom: 4px; font-family: var(--oc-font-serif); font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--oc-navy-900); font-variant-numeric: tabular-nums; }

/* ── Secciones en papel ── */
.cn-sec { padding: 80px 0; }
.cn-sec--alt { background: var(--oc-bg-alt); border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line); }
.cn-cab { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.cn-cab h2 { margin: 0 0 12px; font-size: clamp(27px, 2.4vw, 34px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: var(--oc-navy-900); }
.cn-cab p { max-width: 64ch; margin: 0 auto; font-size: 16.5px; line-height: 1.6; color: var(--oc-body-soft); }

/* La misma pregunta, con y sin */
.cn-pregunta { max-width: 820px; margin: 0 auto 22px; padding: 18px 22px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-lg); background: var(--oc-surface); box-shadow: var(--oc-shadow-sm); }
.cn-pregunta p { margin: 0; font-family: var(--oc-font-serif); font-size: 18px; line-height: 1.55; color: var(--oc-ink); }
.cx .cn-pregunta b { margin-right: 6px; font-family: var(--oc-font-sans); font-size: 15px; font-weight: 700; color: var(--oc-mute); }
.cn-comparar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.cn-lado { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 20px; border: 1px solid var(--oc-line); border-radius: var(--oc-r-lg); background: var(--oc-surface); }
.cn-lado--con { border-color: var(--oc-navy-300); box-shadow: 0 18px 40px -26px rgba(76, 12, 24, .45); }
.cn-lado h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--oc-navy-900); }
.cn-lado--sin h3 { color: var(--oc-body); }
.cn-lado p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--oc-body); }
.cn-rol-falso { font-weight: 700; color: var(--oc-mute); text-decoration: line-through; text-decoration-color: rgba(110, 20, 35, .55); }
.cn-respuesta--sin { color: var(--oc-body-soft); }
.cn-resultados { margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--oc-line); }
.cn-resultados li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--oc-line); font-size: 14px; line-height: 1.45; color: var(--oc-body-soft); font-variant-numeric: tabular-nums slashed-zero; }
.cx .cn-resultados a { justify-self: start; font-weight: 700; white-space: nowrap; }
.cn-caso-r a, .cn-rol-falso { white-space: nowrap; }
.cn-fecha { white-space: nowrap; }
.cn-respuesta { font-family: var(--oc-font-serif); color: var(--oc-ink); }
.cn-veredicto { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--oc-line); font-size: 14px; font-weight: 700; line-height: 1.4; }
.cn-lado p.cn-veredicto { margin: auto 0 0; }
.cn-veredicto svg { width: 18px; height: 18px; flex: none; }
.cn-veredicto--sin { color: var(--oc-body-soft); }
.cn-veredicto--con { color: var(--oc-ok-deep); }
.cn-nota { max-width: 72ch; margin: 18px auto 0; font-size: 13.5px; line-height: 1.55; text-align: center; color: var(--oc-mute); }

/* Por qué: prosa */
.cn-prosa { max-width: 760px; }
.cn-prosa h2 { margin: 0 0 22px; font-size: clamp(27px, 2.4vw, 34px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; text-align: center; color: var(--oc-navy-900); }
.cn-prosa p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--oc-body); }
.cn-prosa p:last-child { margin-bottom: 0; }

/* Comparación: tabla */
.cn-tabla-marco { max-width: 1000px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--oc-line); border-radius: var(--oc-r-lg); background: var(--oc-surface); box-shadow: var(--oc-shadow-sm); }
.cn-tabla { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cn-tabla th, .cn-tabla td { padding: 15px 20px; border-bottom: 1px solid var(--oc-line); text-align: left; vertical-align: top; }
.cn-tabla tbody tr:last-child > * { border-bottom: 0; }
.cn-tabla thead th { font-family: var(--oc-font-sans); font-size: 13px; font-weight: 700; color: var(--oc-mute); }
.cn-tabla thead th.cn-col-con { color: var(--oc-navy); }
.cn-tabla tbody th { width: 30%; font-family: var(--oc-font-sans); font-weight: 600; color: var(--oc-ink); }
.cn-tabla td { color: var(--oc-body-soft); }
.cn-tabla td.cn-col-con { background: rgba(110, 20, 35, .035); color: var(--oc-ink); font-weight: 500; }
.cn-tabla td.cn-nada { color: var(--oc-mute); }

/* Cómo funciona: tres pasos en columnas con filete, no tarjetas */
.cn-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.cn-pasos li { padding: 4px 32px 0; border-left: 1px solid var(--oc-line-2); }
.cn-pasos li:first-child { padding-left: 0; border-left: 0; }
.cn-paso-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: var(--oc-r-circle); background: var(--oc-bg-marca, var(--oc-navy)); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.cn-pasos h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--oc-navy-900); }
.cn-pasos p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--oc-body); }

/* Qué le puedes pedir: grupos con filete */
.cn-capacidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; max-width: 1040px; margin: 0 auto; }
.cn-cap { padding: 22px 0 18px; border-top: 1px solid var(--oc-line-2); }
.cn-cap h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--oc-navy); }
.cn-cap ul { margin: 0; padding: 0; list-style: none; }
.cn-cap li { position: relative; margin: 0 0 8px; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--oc-body); }
.cn-cap li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: var(--oc-r-circle); background: var(--oc-accent); }

/* Preguntas reales */
.cn-casos { max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--oc-line-2); }
.cn-caso { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 40px; padding: 24px 0; border-bottom: 1px solid var(--oc-line); }
.cn-caso-fuente { grid-row: 1 / 3; margin: 3px 0 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--oc-navy); }
.cn-caso-q { max-width: 64ch; margin: 0; font-family: var(--oc-font-serif); font-size: 18.5px; line-height: 1.5; color: var(--oc-ink); }
.cn-caso-r { max-width: 72ch; margin: 4px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--oc-body); font-variant-numeric: tabular-nums slashed-zero; }

/* Para quién */
.cn-aud { text-align: center; }
.cn-aud-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cn-aud-lista li { padding: 9px 18px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-pill); background: var(--oc-surface); font-size: 15px; font-weight: 600; color: var(--oc-navy-900); }

/* Cómo conectarlo */
.cn-conectar .cn-cab { margin-bottom: 30px; }
.cn-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto 16px; }
.cn-tab { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px 18px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-lg); background: var(--oc-surface); color: var(--oc-ink); font-family: var(--oc-font-sans); text-align: left; cursor: pointer; transition: border-color var(--oc-dur) var(--oc-ease), box-shadow var(--oc-dur) var(--oc-ease); }
.cn-tab:hover { border-color: var(--oc-navy-300); }
.cn-tab[aria-selected="true"] { border-color: var(--oc-navy); background: var(--oc-navy-100); box-shadow: none; }
.cn-tab:focus-visible { outline: 0; box-shadow: var(--oc-focus-ring); }
.cn-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px; }
.cn-logo svg { width: 22px; height: 22px; }
.cn-logo--claude { background: #d97757; }
.cn-logo--chatgpt { background: #0f0f0f; }
.cn-tab-txt { display: flex; flex-direction: column; min-width: 0; }
.cx .cn-tab-txt b { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--oc-ink); }
.cn-tab-txt small { font-size: 13px; line-height: 1.35; color: var(--oc-mute); }
.cn-panel { max-width: 760px; margin: 0 auto; padding: 26px 28px; border: 1px solid var(--oc-line); border-radius: var(--oc-r-lg); background: var(--oc-surface); }
.cn-req { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--oc-line); font-size: 14.5px; line-height: 1.55; color: var(--oc-body-soft); }
.cn-lista-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.cn-lista-pasos > li { position: relative; margin: 0 0 16px; padding-left: 42px; font-size: 15.5px; line-height: 1.6; color: var(--oc-body); counter-increment: paso; }
.cn-lista-pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: var(--oc-r-circle); background: var(--oc-bg-marca, var(--oc-navy)); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; }
.cn-aviso { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--oc-line); font-size: 14.5px; line-height: 1.55; color: var(--oc-body); }

/* La dirección para copiar: un solo control (código + botón con el brillo de la marca) */
.cn-url { display: flex; align-items: stretch; min-width: 0; max-width: 560px; margin: 10px 0 4px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r); background: var(--oc-bg-alt); overflow: hidden; }
.cn-url code { flex: 1 1 auto; min-width: 0; padding: 12px 14px; font-family: var(--oc-font-mono); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--oc-ink); white-space: nowrap; overflow-x: auto; scrollbar-width: none; user-select: all; }
.cn-url code::-webkit-scrollbar { display: none; }
.cn-url--cmd { max-width: none; }
.cn-url--cmd code { font-size: 13.5px; white-space: normal; overflow-wrap: anywhere; }
.cn-copiar { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 108px; min-height: 46px; padding: 0 18px; border: 0; background: var(--oc-bg-marca, var(--oc-navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); color: #fff; font-family: var(--oc-font-sans); font-size: 14.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: filter var(--oc-dur) var(--oc-ease); }
.cn-copiar:hover { filter: brightness(1.14); }
.cn-copiar:active { filter: brightness(.96); }
.cn-copiar:focus-visible { outline: 3px solid var(--oc-focus); outline-offset: -3px; }
.cn-copiar svg { width: 15px; height: 15px; flex: none; }
.cn-copiar.is-copiado { background: var(--oc-ok-strong); filter: none; }

/* Claude Code, plegado: es para quien trabaja en la terminal */
.cn-code { margin: 18px 0 0; border-top: 1px solid var(--oc-line); }
.cn-code summary { position: relative; display: block; padding: 14px 32px 4px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--oc-navy); }
.cn-code summary::-webkit-details-marker { display: none; }
.cn-code summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--oc-navy); border-bottom: 2px solid var(--oc-navy); transform: rotate(45deg); transition: transform var(--oc-dur) var(--oc-ease); }
.cn-code[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.cn-code p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--oc-body); }

.cn-probar { max-width: 760px; margin: 34px auto 0; }
.cn-probar h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--oc-navy-900); }
.cn-probar > p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--oc-body-soft); }
.cn-probar ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--oc-line); }
.cn-probar li { padding: 11px 0; border-top: 1px solid var(--oc-line); font-family: var(--oc-font-serif); font-size: 16px; line-height: 1.55; color: var(--oc-ink); }

/* La prueba: sobre la banda de marca, como el «Acceso» de BT Connect, sin precios */
.cn-prueba { padding: 76px 0; background: var(--oc-bg-marca, var(--oc-navy)); color: var(--oc-on-navy); }
.cn-prueba-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.cn-prueba h2 { margin: 0 0 14px; font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: #fff; }
.cn-prueba-cab p { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--oc-on-navy-soft); }
.cn-prueba-puntos { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .18); }
.cn-prueba-puntos li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 15.5px; line-height: 1.6; color: var(--oc-on-navy-soft); }
.cx .cn-prueba-puntos b { color: #fff; font-weight: 700; }

/* Datos: tres hechos con filete arriba, sin tarjetas */
.cn-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; max-width: 1040px; margin: 0 auto; }
.cn-datos > div { padding: 18px 0 0; border-top: 1px solid var(--oc-line-2); }
.cn-datos h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--oc-navy-900); }
.cn-datos p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--oc-body); }

/* Preguntas frecuentes */
.cn-faq-in { max-width: 880px; }
.cn-faq { border-top: 1px solid var(--oc-line-2); }
.cn-faq details { border-bottom: 1px solid var(--oc-line); }
.cn-faq summary { position: relative; display: block; padding: 17px 44px 17px 0; list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--oc-ink); transition: color var(--oc-dur) var(--oc-ease); }
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--oc-navy); border-bottom: 2px solid var(--oc-navy); transform: rotate(45deg); transition: transform var(--oc-dur) var(--oc-ease); }
.cn-faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.cn-faq summary:hover { color: var(--oc-navy); }
.cn-faq details p { margin: 0 0 18px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; color: var(--oc-body); }
.cn-ayuda { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--oc-line-2); }
.cn-ayuda p { margin: 0; font-family: var(--oc-font-serif); font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--oc-navy-900); text-wrap: balance; }
.cn-ayuda .cn-btn { flex: none; }

/* ── Material real del producto (27-sep): videos y capturas de claude.ai ──
   El marco oscuro es el de la propia app (la grabación es en modo oscuro); sobre el papel, un filete de 1 px y una
   sombra con caída granate, la misma familia que .cn-lado--con. Nada tapa la captura: los subtítulos van quemados en
   una banda granate ARRIBA de la imagen, dentro del video (abajo la tapaban los controles del reproductor). */
.cn-demo .cn-cab { margin-bottom: 32px; }
.cn-video { max-width: 1000px; margin: 0 auto; }
.cn-video-marco { overflow: hidden; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-lg); background: #1a1a1a; box-shadow: 0 34px 64px -38px rgba(76, 12, 24, .6), 0 2px 6px -2px rgba(20, 2, 7, .12); }
.cn-video video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 680; background: #1a1a1a; }
.cn-video--pasos video { aspect-ratio: 960 / 610; }
.cn-video > figcaption { max-width: 72ch; margin: 20px auto 0; text-align: center; }
.cn-video-q { display: block; font-family: var(--oc-font-serif); font-size: 17px; line-height: 1.55; color: var(--oc-ink); }
.cn-video-r { display: block; margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--oc-body); font-variant-numeric: tabular-nums slashed-zero; }
.cn-video-r a { white-space: nowrap; }

.cn-video--pasos { max-width: none; margin: 0 0 26px; }
.cn-video--pasos .cn-video-marco { border-radius: var(--oc-r); box-shadow: 0 18px 36px -26px rgba(76, 12, 24, .55); }
.cn-video--pasos > figcaption { max-width: none; margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; text-align: left; color: var(--oc-mute); }
.cn-en { color: var(--oc-body); font-weight: 600; }
.cn-panel h3.cn-pasos-t { margin: 0 0 14px; font-family: var(--oc-font-sans); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--oc-navy-900); }

.cn-captura { max-width: 560px; margin: 14px 0 6px; }
.cn-captura--angosta { max-width: 460px; }
.cx main .cn-captura > a { display: block; border-bottom: 0; border-radius: var(--oc-r); }
.cn-captura img { display: block; width: 100%; height: auto; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r); background: #1a1a1a; box-shadow: 0 12px 26px -20px rgba(76, 12, 24, .55); transition: box-shadow var(--oc-dur) var(--oc-ease), border-color var(--oc-dur) var(--oc-ease); }
.cx main .cn-captura > a:hover img { border-color: var(--oc-navy-300); box-shadow: 0 18px 34px -20px rgba(76, 12, 24, .6); }
.cn-captura > figcaption { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--oc-mute); }

.cn-capturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; max-width: 1040px; margin: 0 auto 44px; }
.cn-captura--caso { max-width: none; margin: 0; }
.cn-captura--caso > figcaption { margin-top: 16px; }
.cn-captura-fuente { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--oc-navy); }
.cn-captura--caso .cn-video-q { font-size: 16.5px; }
.cn-captura--caso .cn-video-r { font-size: 15px; }

/* Pie común BT/BL: la banda la pone esta hoja; el contenido lo arma js/cruce-bt.js (S5-BL) con assets/cruce-bt.css */
.cn-pie-comun { padding: 28px 0 32px; background: var(--oc-bg-marca, var(--oc-navy)); color: var(--oc-on-navy-soft); }
.cn-pie-comun .footer-texts { width: min(calc(100% - 64px), 1264px); margin: 0 auto; font-family: var(--oc-font-sans); font-size: 13.5px; line-height: 1.6; text-align: center; }
.cn-pie-comun .footer-texts > p { margin: 0; }
.cn-pie-comun .footer-texts > p a { color: #fff; }

@media (max-width: 1100px) {
  .cn-fuentes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-fuentes-lista li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cn-fuentes-lista li:nth-child(n+3) { border-top: 1px solid var(--oc-line); }
}
@media (max-width: 960px) {
  .cn-comparar { grid-template-columns: minmax(0, 1fr); }
  .cn-pasos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cn-pasos li, .cn-pasos li:first-child { padding: 0 0 0 52px; border-left: 0; position: relative; }
  .cn-paso-n { position: absolute; left: 0; top: 0; }
  .cn-capacidades { grid-template-columns: minmax(0, 1fr); }
  .cn-caso { grid-template-columns: minmax(0, 1fr); }
  .cn-caso-fuente { grid-row: 3; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--oc-mute); }
  .cn-caso-fuente::before { content: "Fuente: "; font-weight: 400; }
  .cn-prueba-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cn-datos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cn-capturas { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 640px; }
}
@media (max-width: 720px) {
  .cn-carril { width: calc(100% - 32px); }
  .cn-hero { padding: 40px 0 48px; }
  .cn-hero h1 { font-size: clamp(30px, 8vw, 38px); }
  .cn-bajada { font-size: 16.5px; }
  .cn-cta { flex-direction: column; align-self: stretch; }
  .cn-cta .cn-btn { width: 100%; }
  .cn-confianza { flex-direction: column; gap: 4px; }
  .cn-confianza li + li::before { display: none; }
  .cn-fuentes-lista { grid-template-columns: minmax(0, 1fr); }
  .cn-fuentes-lista li, .cn-fuentes-lista li:first-child, .cn-fuentes-lista li:nth-child(3) { padding: 14px 0; border-left: 0; border-top: 1px solid var(--oc-line); }
  .cn-fuentes-lista li:first-child { border-top: 0; }
  .cx .cn-fuentes-lista b { font-size: 22px; }
  .cn-sec, .cn-prueba { padding: 54px 0; }
  .cn-cab { margin-bottom: 26px; }
  .cn-pregunta { padding: 16px; }
  .cn-pregunta p { font-size: 16.5px; }
  .cn-lado { padding: 20px 16px 16px; }
  .cn-resultados li { grid-template-columns: minmax(0, 1fr) auto; }
  .cn-resultados li span:not(.cn-fecha) { grid-column: 1 / -1; order: 3; margin-top: -4px; }
  .cn-prosa p { font-size: 16px; }
  .cn-caso-q { font-size: 17px; }
  .cn-picker { grid-template-columns: minmax(0, 1fr); }
  .cn-panel { padding: 20px 16px; }
  .cn-lista-pasos > li { padding-left: 38px; font-size: 15px; }
  .cn-url { flex-direction: column; }
  /* La dirección se parte solo en el <wbr> tras «https://»: nunca queda cortado «/mcp». */
  .cn-url code { font-size: 14.5px; text-align: center; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .cn-url--cmd code { text-align: left; }
  .cn-lista-pasos .cn-url { margin-left: -38px; }
  .cn-url code { padding: 12px; font-size: 14px; }
  .cn-tabla { min-width: 0; }
  .cn-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cn-tabla tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--oc-line); }
  .cn-tabla tbody tr:last-child { border-bottom: 0; }
  .cn-tabla tbody th, .cn-tabla td { display: block; width: auto; padding: 0; border: 0; }
  .cn-tabla td.cn-col-con { margin-top: 6px; background: none; }
  .cn-tabla td + td { margin-top: 2px; }
  .cn-tabla td::before { content: attr(data-col) "\00a0"; font-weight: 700; }
  .cn-tabla td.cn-col-con::before { color: var(--oc-navy); }
  .cn-tabla td:not(.cn-col-con)::before { color: var(--oc-mute); }
  .cn-copiar { width: 100%; }
  /* En el teléfono las capturas y el video usan todo el ancho del panel, como la dirección. */
  .cn-video-marco { border-radius: var(--oc-r); }
  .cn-video > figcaption { margin-top: 16px; text-align: left; }
  .cn-video-q { font-size: 16px; }
  .cn-lista-pasos .cn-captura { max-width: none; margin-left: -38px; }
  .cn-ayuda { flex-direction: column; align-items: stretch; gap: 16px; }
  .cn-ayuda p { font-size: 19px; }
  .cn-pie-comun .footer-texts { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-btn, .cn-copiar, .cn-tab, .cn-faq summary::after, .cn-code summary::after, .cn-captura img { transition: none; }
}