/* ═══════════════════════════════════════════════════════════════════
   COMPRENDE — centro de conocimiento de DEMIN CONSCIENTE

   Desde el 2026-09-19 (pedido de Diego: "igual a respirando conciencia,
   más dinámico, en movimiento, mismo fondo") COMPRENDE se carga SOBRE
   css/style-respirando-con-ciencia.css — la misma hoja, no una copia:
   paleta carbón #15130F / marfil #F5F0E6 / cobre #C8A882, orbe que
   respira, hero con texto línea por línea, escenas sticky frase a frase,
   amanecer (oscuro → claro), cierre que exhala, botón que respira, navbar
   con desenfoque. El motor está en js/comprende/movimiento.js (copia del
   de respirando; ver su regla de sincronía).

   Esta capa, escopada a body.comprende, agrega solo lo propio del centro
   de conocimiento: búsqueda, descubrimiento, lectura en marfil, paneles
   de evidencia, glosario.

   CONTRASTE (medido): cobre sobre carbón 8.3:1 · --muted-dark 6.4:1 ·
   --cobre-profundo sobre marfil 5.1:1 · --muted-light 5.0:1. El cobre
   claro sobre marfil da 1.97:1: ahí solo es línea o glifo, nunca texto.
   ═══════════════════════════════════════════════════════════════════ */

.comprende {
  --cp-ancho: 68rem;
  --cp-lectura: 44rem;
  --cp-gutter: 1.5rem;
  --cp-rule-light: rgba(21, 19, 15, 0.14);
}
@media (min-width: 768px) { .comprende { --cp-gutter: 2.5rem; } }

/* La navbar fija no tapa el destino de un ancla. */
.comprende [id] { scroll-margin-top: calc(var(--navbar-h, 52px) + 1rem); }
.comprende .scene, .comprende .hero { scroll-margin-top: 0; }
.comprende a { text-underline-offset: 3px; }
.comprende :focus-visible { outline: 2px solid var(--cobre-organico); outline-offset: 3px; }
.comprende [data-claro] :focus-visible { outline-color: var(--cobre-profundo); }
.cp-quieto { color: var(--muted-dark); font-weight: 400; }
[data-claro] .cp-quieto { color: var(--muted-light); }
.cp-icono { flex-shrink: 0; }
.cp-flecha { flex-shrink: 0; transition: translate 300ms var(--ease-out); }

/* ─── Navbar: marca (enlace al hub) + SIENTE · COMPRENDE · INTEGRA ─── */
.cp-navbar { gap: 1rem; padding-block: 0.25rem; }
.cp-navbar .navbar__brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: inherit; }
.cp-eco ul { display: flex; gap: 0 1.1rem; }
.cp-eco a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: inherit; opacity: 0.7; text-decoration: none;
  transition: opacity 240ms, color 240ms;
}
.cp-eco a[aria-current="page"] { opacity: 1; color: var(--cobre-organico); }
.nav-on-light .cp-eco a[aria-current="page"] { color: var(--cobre-profundo); }
@media (hover: hover) and (pointer: fine) { .cp-eco a:hover { opacity: 1; } }
/* En móvil cabe todo a 11px (mínimo de texto funcional) con menos tracking. */
@media (max-width: 420px) {
  .cp-navbar { padding-inline: 1rem; }
  .cp-navbar .navbar__brand { letter-spacing: 0.1em; }
  .cp-eco ul { gap: 0 0.7rem; }
  .cp-eco a { letter-spacing: 0.1em; }
}

/* ─── Hero (el de respirando) ─── */
/* La columna del grid no puede crecer con su contenido: la subnavegación
   (white-space: nowrap) la ensanchaba a 529px en un móvil de 390 y el
   overflow:hidden del hero recortaba título y resumen (medido). */
.comprende .hero { grid-template-columns: minmax(0, 1fr); }
.comprende .hero__content { min-width: 0; max-width: 100%; }
.comprende .cp-sub { width: 100%; }
.cp-hero__apoyo {
  max-width: 36ch; margin-top: 1.5rem;
  font-size: 1rem; line-height: 1.6; color: var(--muted-dark);
}
.cp-hero__pregunta-linea { margin-top: 1.25rem; }
.cp-hero__pregunta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; color: var(--marfil);
  text-decoration: underline; text-decoration-color: rgba(200, 168, 130, 0.55);
}
@media (hover: hover) and (pointer: fine) { .cp-hero__pregunta:hover { color: var(--cobre-organico); } }

/* Lectura: título largo, resumen, metadatos, aviso, subnavegación */
.cp-hero--lectura .hero__title,
.cp-hero__titulo--lectura {
  font-size: clamp(2.2rem, 7.2vw, 4.25rem);
  line-height: 1.12;
  max-width: 16ch;
  margin-bottom: 1.5rem;
}
.cp-hero__resumen {
  max-width: 40ch;
  font-size: clamp(1.0625rem, 2.9vw, 1.25rem);
  line-height: 1.5;
}
.cp-hero__meta { max-width: 44rem; margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted-dark); }
.cp-hero__meta p { max-width: none; }
.cp-hero__meta p + p { margin-top: 0.25rem; }
.cp-hero__cats { color: var(--cobre-organico); }
.cp-hero__meta span + span::before { content: '·'; margin: 0 0.625rem; color: var(--cobre-organico); }
.cp-hero--corto { min-height: 88svh; }
/* Las frases del amanecer son más largas que las de respirando (una idea
   clave, no dos palabras): interlineado de encabezado multilínea. */
.comprende .scene__step { line-height: 1.34; }
.comprende .scene__steps { max-width: 18em; }

/* Estado de evidencia editorial del artículo, sobre el fondo oscuro. */
.cp-hero__evidencia { margin-top: 1.25rem; }
.cp-hero__evidencia .cp-madurez { background: rgba(245, 240, 230, 0.06); border-color: var(--rule-dark); color: var(--marfil); }
.cp-hero__evidencia .cp-madurez span { color: var(--cobre-organico); }
.cp-migas ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.cp-migas li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.6; }
.cp-migas a { display: inline-flex; min-height: 44px; align-items: center; color: inherit; text-decoration: none; }
.cp-migas li { display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .cp-migas a:hover { text-decoration: underline; } }
.cp-estado {
  display: flex; gap: 0.625rem; align-items: flex-start;
  margin-bottom: 2rem; padding: 0.875rem 1rem;
  border: 1px solid rgba(126, 96, 64, 0.4); border-radius: 10px;
  font-size: 0.9375rem; line-height: 1.5; color: var(--carbon);
}
.cp-papel .cp-estado span { max-width: none; }
.cp-estado .cp-icono { margin-top: 0.2rem; color: var(--cobre-profundo); }
.cp-estado strong { font-weight: 500; }
.cp-sub { margin-top: 2rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cp-sub::-webkit-scrollbar { display: none; }
.cp-sub ul { display: flex; justify-content: center; gap: 1.25rem; white-space: nowrap; padding-inline: 0.25rem; }
.cp-sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; color: var(--muted-dark); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cp-sub a:hover { color: var(--marfil); } }
@media (max-width: 600px) { .cp-sub ul { justify-content: flex-start; } }

/* ─── Secciones del home (oscuro) ─── */
.cp-bloque {
  max-width: calc(var(--cp-ancho) + 2 * var(--cp-gutter));
  margin-inline: auto;
  padding: clamp(4.5rem, 12vw, 8rem) var(--cp-gutter) 0;
}
.cp-bloque > .eyebrow { margin-bottom: 1rem; }
.cp-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1.75rem;
}
.cp-h2:focus { outline: none; }
.cp-bloque__lead {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.125rem, 3.4vw, 1.375rem);
  color: var(--cobre-organico);
  margin: -0.75rem 0 1.75rem;
}

/* ¿Qué quieres comprender? — filas editoriales con línea fina, sin cajas */
.cp-entradas { display: grid; gap: 0 3rem; }
@media (min-width: 768px) { .cp-entradas { grid-template-columns: 1fr 1fr; } }
.cp-entrada {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  grid-template-areas: "n titulo flecha" "n frase flecha";
  align-items: center; column-gap: 0.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule-dark);
  color: var(--marfil); text-decoration: none;
}
.cp-entrada__n { grid-area: n; align-self: start; padding-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--cobre-organico); }
.cp-entrada__titulo { grid-area: titulo; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; transition: color 300ms var(--ease-out); }
.cp-entrada__frase { grid-area: frase; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--muted-dark); line-height: 1.45; }
.cp-entrada .cp-flecha { grid-area: flecha; color: var(--muted-dark); }
@media (hover: hover) and (pointer: fine) {
  .cp-entrada:hover .cp-entrada__titulo { color: var(--cobre-organico); }
  .cp-entrada:hover .cp-flecha { color: var(--cobre-organico); translate: 4px 0; }
}

/* Búsqueda */
.cp-busqueda { position: relative; max-width: 44rem; }
.cp-busqueda__campo {
  width: 100%; min-height: 58px;
  padding: 0 3.75rem 0 1.375rem;
  border: 1px solid rgba(200, 168, 130, 0.5); border-radius: var(--radius);
  background: rgba(245, 240, 230, 0.04);
  color: var(--marfil); font: inherit; font-size: 1rem;
  transition: border-color 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.cp-busqueda__campo::placeholder { color: var(--muted-dark); }
.cp-busqueda__campo:focus { outline: 2px solid var(--cobre-organico); outline-offset: 2px; background: rgba(245, 240, 230, 0.07); }
.cp-busqueda__campo::-webkit-search-cancel-button { filter: invert(0.85); }
.cp-busqueda__boton {
  position: absolute; top: 5px; right: 5px;
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--radius);
  color: var(--carbon); background: var(--cobre-organico);
  transition: transform 240ms var(--ease-out);
}
.cp-busqueda__boton:active { transform: scale(0.96); }

/* Un <fieldset> tiene min-width: min-content por defecto: sin esto su
   overflow-x nunca actúa y en móvil estiraba la página a ~800px (medido). */
.cp-tipos { min-width: 0; display: flex; gap: 0.5rem; margin: 1rem 0 0; padding: 0.25rem 0 0.5rem; border: 0; overflow-x: auto; scrollbar-width: thin; }
.cp-tipo { position: relative; flex-shrink: 0; }
.cp-tipo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cp-tipo span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  font-size: 0.875rem; color: var(--marfil);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.cp-tipo input:checked + span { background: var(--cobre-organico); border-color: var(--cobre-organico); color: var(--carbon); }
.cp-tipo input:focus-visible + span { outline: 2px solid var(--cobre-organico); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cp-tipo:hover span { border-color: rgba(200, 168, 130, 0.6); } }

.cp-filtro-activo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1rem; font-size: 0.9375rem; color: var(--muted-dark); }
.cp-filtro-activo[hidden] { display: none; }
.cp-filtro-activo strong { color: var(--marfil); font-weight: 500; }
.cp-filtro-activo button {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 44px; padding: 0 0.875rem;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  color: var(--marfil); font-size: 0.875rem;
}
.cp-estado-busqueda { min-height: 1.5em; margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-dark); }

.cp-resultados { margin-top: 0.5rem; max-width: 52rem; }
.cp-grupo { font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre-organico); margin: 2rem 0 0.5rem; }
.cp-lista-docs { border-top: 1px solid var(--rule-dark); }
.cp-lista-docs > li + li .cp-doc { border-top: 1px solid var(--rule-dark); }
.cp-doc { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem 0; color: var(--marfil); text-decoration: none; }
.cp-doc__tipo { font-size: 0.8125rem; color: var(--muted-dark); }
.cp-doc__titulo { font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.3; transition: color 300ms var(--ease-out); }
.cp-doc__resumen { font-size: 0.9375rem; line-height: 1.55; color: var(--muted-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-doc__seccion { font-size: 0.875rem; color: var(--cobre-organico); }
.cp-doc__estado { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted-dark); }
.cp-doc--prep .cp-doc__titulo { color: var(--muted-dark); }
@media (hover: hover) and (pointer: fine) { a.cp-doc:hover .cp-doc__titulo { color: var(--cobre-organico); } }
.cp-prep { margin-top: 1.25rem; }
.cp-prep summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; color: var(--muted-dark); font-size: 0.9375rem; }
.cp-vacio { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--marfil); margin-top: 1.5rem; max-width: 40ch; }
.cp-vacio + p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted-dark); }
.cp-vacio + p a { color: var(--cobre-organico); }

/* ¿Sentiste esto? */
.cp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cp-chip {
  min-height: 44px; padding: 0 1.125rem;
  border: 1px solid var(--rule-dark); border-radius: var(--radius);
  font-size: 0.9375rem; color: var(--marfil);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 240ms var(--ease-out);
}
.cp-chip[aria-pressed="true"] { background: var(--cobre-organico); border-color: var(--cobre-organico); color: var(--carbon); }
.cp-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cp-chip:hover { border-color: rgba(200, 168, 130, 0.6); } }
.cp-sentir__paneles { margin-top: 1.75rem; max-width: 52rem; }
.cp-sentir__panel { padding: clamp(1.25rem, 4vw, 2.25rem) 0; border-top: 1px solid var(--rule-dark); }
.cp-sentir__panel + .cp-sentir__panel { margin-top: 1rem; }
.cp-sentir__panel[hidden] { display: none; }
.cp-sentir__panel:focus { outline: none; }
.cp-sentir__panel h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; margin-bottom: 0.75rem; }
.cp-sentir__lead { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--cobre-organico); line-height: 1.5; max-width: 50ch; }
.cp-factores { margin-top: 1.25rem; }
.cp-factores li { padding: 1rem 0; border-top: 1px solid var(--rule-dark); }
.cp-factores__lente { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre-organico); margin-bottom: 0.375rem; }
.cp-factores p { line-height: 1.6; }
.cp-factores a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: var(--cobre-organico); }
.cp-factores__en { display: block; margin-top: -0.5rem; font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--muted-dark); }
.cp-sentir__vacio { margin-top: 1rem; line-height: 1.6; }
.cp-sentir__prep { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 1rem; font-size: 0.875rem; color: var(--muted-dark); line-height: 1.5; }
.cp-sentir__prep .cp-icono { margin-top: 0.2rem; }
.cp-nota--seguridad { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.55; }
.cp-nota--seguridad a { color: var(--cobre-organico); }
.has-motion .cp-sentir__panel.is-entrando { animation: cpSettle 900ms var(--ease-out) both; }
@keyframes cpSettle { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Áreas: rejilla con líneas de 1px dibujadas por la celda */
.cp-areas { display: grid; padding-bottom: clamp(4rem, 10vw, 7rem); }
@media (min-width: 640px) { .cp-areas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cp-areas { grid-template-columns: repeat(3, 1fr); } }
.cp-areas li { box-shadow: 0 0 0 0.5px var(--rule-dark); }
.cp-area { display: flex; flex-direction: column; gap: 0.375rem; height: 100%; padding: 1.75rem 1.5rem; color: var(--marfil); text-decoration: none; transition: background-color 400ms var(--ease-out); }
.cp-area__titulo { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; }
.cp-area__frase { font-family: var(--font-display); font-style: italic; color: var(--muted-dark); line-height: 1.45; }
.cp-area__conteo { margin-top: auto; padding-top: 0.875rem; font-size: 0.8125rem; color: var(--cobre-organico); }
@media (hover: hover) and (pointer: fine) { .cp-area:hover { background: rgba(200, 168, 130, 0.06); } }

/* ─── Zona clara después del amanecer (home) ─── */
.cp-claro { background-color: var(--marfil); color: var(--carbon); padding-bottom: clamp(5rem, 12vw, 9rem); }
.cp-claro .cp-bloque { padding-top: clamp(4rem, 10vw, 7rem); }
.cp-filosofia {
  max-width: calc(var(--cp-ancho) + 2 * var(--cp-gutter));
  margin-inline: auto;
  padding: clamp(5rem, 12vw, 8rem) var(--cp-gutter) 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.cp-filosofia__titulo {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.15; letter-spacing: -0.015em;
  text-wrap: balance; max-width: 20ch;
}
.cp-filosofia__texto { max-width: 52ch; margin-top: 1.5rem; color: var(--muted-light); line-height: 1.65; }
.cp-lentes { display: grid; width: 100%; margin-top: 2.75rem; max-width: 60rem; text-align: left; }
@media (min-width: 900px) { .cp-lentes { grid-template-columns: repeat(5, 1fr); text-align: center; } }
.cp-lentes li { padding: 1.1rem 0.75rem; box-shadow: 0 0 0 0.5px var(--cp-rule-light); display: flex; flex-direction: column; gap: 0.25rem; }
.cp-lentes__nombre { font-family: var(--font-display); font-size: 1.25rem; }
.cp-lentes__forma { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--muted-light); }
.cp-secundario { margin-top: 2.5rem; min-height: 48px; color: var(--carbon); }
.cp-claro .cp-h2 { color: var(--carbon); }

.cp-destacado { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .cp-destacado { grid-template-columns: 1.35fr 1fr; align-items: start; } }
/* La pieza insignia: una puerta oscura sobre el marfil, con su propio orbe. */
.cp-destacado__principal {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: 12px;
  background: var(--carbon); color: var(--marfil);
  text-decoration: none;
  transition: transform 400ms var(--ease-out);
}
.cp-destacado__principal::before {
  content: ''; position: absolute; z-index: -1; right: -30%; top: -40%;
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 168, 130, 0.28) 0%, rgba(200, 168, 130, 0.08) 40%, transparent 68%);
}
.has-motion .cp-destacado__principal::before { animation: breath var(--breath) var(--ease-breath) infinite; }
.cp-destacado__principal .cp-doc__tipo { color: var(--muted-dark); }
.cp-destacado__titulo { font-family: var(--font-display); font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
.cp-destacado__resumen { color: var(--muted-dark); line-height: 1.6; }
.cp-destacado__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-weight: 500; color: var(--cobre-organico); }
@media (hover: hover) and (pointer: fine) {
  .cp-destacado__principal:hover { transform: translateY(-2px); }
  .cp-destacado__principal:hover .cp-flecha { translate: 4px 0; }
}
[data-claro] .cp-lista-docs,
[data-claro] .cp-lista-docs > li + li .cp-doc { border-color: var(--cp-rule-light); }
[data-claro] .cp-doc { color: var(--carbon); }
[data-claro] .cp-doc__tipo,
[data-claro] .cp-doc__resumen,
[data-claro] .cp-doc__estado,
[data-claro] .cp-doc--prep .cp-doc__titulo { color: var(--muted-light); }
@media (hover: hover) and (pointer: fine) { [data-claro] a.cp-doc:hover .cp-doc__titulo { color: var(--cobre-profundo); } }

/* ─── Cierre que exhala ─── */
.cp-finale .finale__content { width: 100%; max-width: 64rem; }
.cp-finale__ciclo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.2em 0.45em;
  font-size: clamp(1.75rem, 6vw, 3.25rem) !important;
  line-height: 1.25 !important;
}
.cp-finale__ciclo span:last-child { font-style: italic; color: var(--cobre-organico); }
.cp-ciclo__sep { color: var(--cobre-organico); font-style: normal; opacity: 0.8; }
/* El "ciclo" dentro de la lectura (secuencias del tipo señal → respuesta). */
.cp-papel .cp-ciclo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
  margin-top: 1.25rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.125rem, 2.8vw, 1.375rem); line-height: 1.5;
  max-width: none;
}
.cp-papel .cp-ciclo .cp-ciclo__sep { color: var(--cobre-profundo); }
.finale__line.cp-finale__puente { width: 100%; margin-top: 3.5rem; font-size: 1rem; line-height: 1.5; letter-spacing: 0; text-align: left; }
.cp-puente { display: grid; }
@media (min-width: 900px) { .cp-puente { grid-template-columns: repeat(3, 1fr); gap: 0 2rem; } }
.cp-puente__item { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--rule-dark); color: var(--marfil); text-decoration: none; }
.cp-puente__marca { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre-organico); }
.cp-puente__verbo { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; }
.cp-puente__destino { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted-dark); }
@media (hover: hover) and (pointer: fine) {
  .cp-puente__item:hover .cp-puente__verbo { color: var(--cobre-organico); }
  .cp-puente__item:hover .cp-flecha { translate: 4px 0; color: var(--cobre-organico); }
}

/* Pie (el de respirando) con más enlaces */
.cp-pie { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.cp-pie a { display: inline-flex; align-items: center; min-height: 44px; opacity: 0.75; }

/* ═══ LECTURA en marfil ═══════════════════════════════════════════ */
.cp-lectura { background-color: var(--marfil); color: var(--carbon); padding: clamp(4rem, 10vw, 7rem) var(--cp-gutter) clamp(5rem, 12vw, 8rem); }
.cp-papel { max-width: var(--cp-lectura); margin: 0 auto; }
.cp-papel a { color: var(--cobre-profundo); }
.cp-toc { margin-bottom: 3rem; border-block: 1px solid var(--cp-rule-light); }
.cp-toc summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre-profundo); }
.cp-toc ol { counter-reset: toc; padding-bottom: 0.75rem; }
.cp-toc li { counter-increment: toc; }
.cp-toc a { display: flex; gap: 0.75rem; align-items: center; min-height: 40px; color: var(--muted-light); text-decoration: none; font-size: 0.9375rem; }
.cp-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; color: var(--cobre-profundo); }
@media (hover: hover) and (pointer: fine) { .cp-toc a:hover { color: var(--carbon); } }

.cp-seccion + .cp-seccion { margin-top: clamp(3rem, 7vw, 4.5rem); }
.cp-seccion h2 {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15; letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.cp-seccion__n { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--cobre-profundo); }
.cp-panel__glifo { flex-shrink: 0; color: var(--cobre-profundo); font-size: 1.125rem; }
.cp-papel p { font-size: 1.0625rem; line-height: 1.75; max-width: 58ch; }
.cp-papel p + p, .cp-papel p + ul, .cp-papel ul + p, .cp-papel dl + p, .cp-papel p + dl, .cp-papel div + p, .cp-papel p + div, .cp-papel ol + p { margin-top: 1rem; }
.cp-term { text-decoration: underline dotted; text-decoration-color: rgba(126, 96, 64, 0.7); text-underline-offset: 4px; }
.cp-cita { font-size: 0.7em; line-height: 0; margin-left: 0.1em; }
.cp-cita a { padding: 0 0.15em; font-family: var(--font-body); font-weight: 500; text-decoration: none; }
.cp-cita a + a { padding-left: 0; }
.cp-cita a + a::before { content: ','; color: var(--muted-light); margin-right: 0.15em; }
.cp-declaracion { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 4.4vw, 2rem); line-height: 1.35; margin-top: 1.5rem; color: var(--cobre-profundo); }
.cp-lista li { position: relative; padding-left: 1.5rem; font-size: 1.0625rem; line-height: 1.65; }
.cp-lista li + li { margin-top: 0.5rem; }
.cp-lista li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 0.875rem; height: 1px; background: var(--cobre-organico); }
.cp-variables { margin-top: 1rem; border-top: 1px solid var(--cp-rule-light); }
.cp-variables > div { padding: 0.8rem 0; border-bottom: 1px solid var(--cp-rule-light); }
@media (min-width: 640px) { .cp-variables > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; } }
.cp-variables dt { font-weight: 500; }
.cp-variables dd { color: var(--muted-light); line-height: 1.6; }

/* Cinco capas: experiencia ≠ interpretación ≠ fisiología ≠ metodología ≠ evidencia */
.cp-capas { margin-top: 1.25rem; border-top: 1px solid var(--cp-rule-light); }
.cp-capas__fila { padding: 1.1rem 0; border-bottom: 1px solid var(--cp-rule-light); }
@media (min-width: 640px) { .cp-capas__fila { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; } }
.cp-capas dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cobre-profundo); margin-bottom: 0.25rem; }
.cp-capas dd { font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; line-height: 1.5; }
.cp-capas--def dd { font-family: var(--font-body); font-style: normal; font-size: 1rem; color: var(--muted-light); }
.cp-capas--def dd em { font-family: var(--font-display); color: var(--carbon); margin-right: 0.25rem; }

/* Paneles de evidencia: cada uno con nombre y glifo, nunca mezclados */
.cp-panel { padding: clamp(1.25rem, 4vw, 2rem); border-radius: 12px; border: 1px solid var(--cp-rule-light); }
.cp-panel--sabemos { background: rgba(200, 168, 130, 0.14); border-color: rgba(126, 96, 64, 0.25); }
.cp-panel--no-sabemos { border-style: dashed; border-color: rgba(21, 19, 15, 0.3); }
.cp-panel--metodologia { background: rgba(21, 19, 15, 0.04); }
.cp-panel h2 { font-size: clamp(1.5rem, 4.4vw, 2rem); }
.cp-afirmaciones li { padding: 0.9rem 0; border-top: 1px solid var(--cp-rule-light); }
.cp-afirmaciones li:first-child { border-top: 0; padding-top: 0; }
.cp-afirmaciones p { margin-bottom: 0.5rem; }
.cp-madurez {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--cp-rule-light); border-radius: 999px;
  font-size: 0.75rem; font-weight: 500;
  color: var(--muted-light); background: rgba(245, 240, 230, 0.75);
}
.cp-madurez span { color: var(--cobre-profundo); }
.cp-escala { margin-top: 1rem; }
.cp-escala > div { display: grid; gap: 0.375rem; padding: 0.875rem 0; border-top: 1px solid var(--cp-rule-light); }
@media (min-width: 640px) { .cp-escala > div { grid-template-columns: 13rem 1fr; align-items: center; } }
.cp-escala dd { color: var(--muted-light); line-height: 1.55; }

/* Seguridad: parte del conocimiento, legible sin color */
.cp-reglas { margin-top: 1.25rem; border-top: 1px solid var(--cp-rule-light); }
.cp-reglas li { padding: 1rem 0; border-bottom: 1px solid var(--cp-rule-light); font-size: 1.0625rem; line-height: 1.65; }
.cp-reglas strong { font-weight: 500; }
.cp-senales { margin-top: 1.5rem; padding: 1.25rem clamp(1.25rem, 4vw, 1.75rem); border-radius: 12px; border: 1px solid rgba(21, 19, 15, 0.3); background: rgba(21, 19, 15, 0.04); }
.cp-senales__titulo { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 500; }
.cp-senales__titulo .cp-icono { margin-top: 0.3rem; color: var(--cobre-profundo); }
.cp-senales ul { margin-top: 0.75rem; }
.cp-senales li { position: relative; padding-left: 1.5rem; line-height: 1.6; }
.cp-senales li + li { margin-top: 0.375rem; }
.cp-senales li::before { content: ''; position: absolute; left: 0.25rem; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--carbon); }
.cp-senales__cierre { font-family: var(--font-display); font-style: italic; margin-top: 0.75rem; }
.cp-nota { margin-top: 1.25rem; }
.cp-papel .cp-nota--firma { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; line-height: 1.5; color: var(--cobre-profundo); }
.cp-papel .cp-nota--aviso { font-size: 0.9375rem; color: var(--muted-light); padding-top: 1rem; border-top: 1px solid var(--cp-rule-light); }

/* Fuentes */
.cp-seccion--fuentes { padding-top: 2.5rem; border-top: 1px solid var(--cp-rule-light); }
.cp-seccion--fuentes h3 { font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobre-profundo); margin: 1.75rem 0 0.5rem; }
.cp-papel .cp-fuentes__nota { font-size: 0.9375rem; color: var(--muted-light); }
.cp-fuentes li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; padding: 0.625rem 0.5rem; margin-inline: -0.5rem; border-radius: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted-light); transition: background-color 600ms var(--ease-out); }
.cp-fuentes li:target { background: rgba(200, 168, 130, 0.22); }
.cp-fuentes__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--cobre-profundo); }
.cp-fuentes__tipo { display: inline-block; margin-left: 0.25rem; font-size: 0.8125rem; color: var(--muted-light); }
.cp-fuentes a { overflow-wrap: anywhere; }

.cp-numerada li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 0.9rem 0; border-top: 1px solid var(--cp-rule-light); font-size: 1.0625rem; line-height: 1.6; }
.cp-numerada__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cobre-profundo); padding-top: 0.35rem; }
.cp-numerada strong { font-weight: 500; }

.cp-relacionados { padding-top: 2.5rem; border-top: 1px solid var(--cp-rule-light); }

/* Glosario */
.cp-letras ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 2rem; }
.cp-letras a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-dark); border-radius: 50%; font-family: var(--font-mono); font-size: 0.875rem; color: var(--marfil); text-decoration: none; transition: border-color 240ms, color 240ms; }
@media (hover: hover) and (pointer: fine) { .cp-letras a:hover { border-color: var(--cobre-organico); color: var(--cobre-organico); } }
.cp-letra + .cp-letra { margin-top: 3rem; }
.cp-letra > h2 { font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; color: var(--cobre-profundo); line-height: 1.1; }
.cp-termino { padding: 1.5rem 0; border-top: 1px solid var(--cp-rule-light); border-radius: 2px; transition: background-color 600ms var(--ease-out); }
.cp-termino:target { background: rgba(200, 168, 130, 0.18); box-shadow: 0 0 0 0.75rem rgba(200, 168, 130, 0.18); }
.cp-termino h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.2; }
.cp-papel .cp-termino__frase { font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; color: var(--cobre-profundo); margin: 0.25rem 0 0.75rem; }
.cp-papel .cp-termino p + p { margin-top: 0.625rem; }
.cp-papel .cp-termino__meta { font-size: 0.9375rem; color: var(--muted-light); }
.cp-termino__meta > span:first-child { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 0.125rem; }
.cp-termino--prep h3 { color: var(--muted-light); }
.cp-termino--prep .cp-doc__estado { color: var(--muted-light); }

/* Los reveals de lectura, más cortos que los del home (se lee, no se mira). */
.has-motion .comprende--lectura .reveal { transition-duration: 800ms; }

/* ─── Microinteracciones (V1.1) ────────────────────────────────────────────
   Viven dentro del papel de lectura. El texto completo está siempre en el
   HTML: lo que cambia es qué está plegado. Cada control mide 44px de alto
   como mínimo, y ningún estado depende solo del color. */
.comprende .cp-inter {
  margin: 2rem 0;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--cp-rule-light);
  border-radius: var(--radius);
  background: rgba(200, 168, 130, 0.07);
}
.comprende .cp-papel .cp-inter__pregunta {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.3;
  margin: 0;
}
.comprende .cp-papel .cp-inter__intro { margin-top: 0.5rem; color: var(--muted-light); }
.comprende .cp-inter__ops { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.comprende .cp-inter__ops > li + li { margin-top: 0.5rem; }

.comprende .cp-inter__op { border: 1px solid var(--cp-rule-light); border-radius: var(--radius); background: rgba(245, 240, 230, 0.6); }
.comprende .cp-inter__op > summary {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 44px; padding: 0.625rem 1rem;
  cursor: pointer; list-style: none;
  font-weight: 500; line-height: 1.4;
}
.comprende .cp-inter__op > summary::-webkit-details-marker { display: none; }
/* El signo de "hay algo debajo" no es el color: es un + que se vuelve −. */
.comprende .cp-inter__op > summary::after {
  content: '+'; margin-left: auto;
  font-family: var(--font-mono); font-size: 1.125rem; color: var(--cobre-profundo);
  transition: transform 240ms var(--ease-out);
}
.comprende .cp-inter__op[open] > summary::after { content: '–'; }
.comprende .cp-inter__op[open] { border-color: var(--cobre-profundo); }
.comprende .cp-inter__r { padding: 0 1rem 1rem; }
.comprende .cp-papel .cp-inter__r p { margin: 0; font-size: 1rem; line-height: 1.65; }
.comprende .cp-inter__sello {
  display: block; margin-bottom: 0.375rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cobre-profundo);
}
.comprende .cp-inter--mito .cp-inter__et { font-style: italic; }
.comprende .cp-inter__mito { color: var(--cobre-profundo); }
.comprende .cp-inter__pista {
  margin: 0.875rem 0 0;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-light);
}
.comprende .cp-papel .cp-inter__cierre {
  margin: 0.875rem 0 0; padding-top: 0.875rem;
  border-top: 1px solid var(--cp-rule-light);
  font-family: var(--font-display); font-style: italic;
  font-size: 1.0625rem; color: var(--cobre-profundo);
}

/* Esquema: la parte abierta se ilumina. Es un eco del texto, no la fuente. */
.comprende .cp-inter__figura { margin: 1.25rem auto 0; max-width: 11rem; }
.comprende .cp-fig { width: 100%; height: auto; color: var(--muted-light); }
.comprende .cp-fig__contorno { opacity: 0.4; }
.comprende .cp-fig [data-parte] { transition: color 300ms var(--ease-out), opacity 300ms var(--ease-out); opacity: 0.55; }
.comprende .cp-fig [data-parte].is-activo { color: var(--cobre-profundo); opacity: 1; stroke-width: 2.4; }

/* COMPARA: dos columnas que se apilan en móvil. No necesita JS. */
.comprende .cp-comparar { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 620px) { .comprende .cp-comparar { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.comprende .cp-comparar > article { padding: 1rem; border: 1px solid var(--cp-rule-light); border-radius: var(--radius); background: rgba(245, 240, 230, 0.6); }
.comprende .cp-papel .cp-comparar__t { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.75rem; }
.comprende .cp-comparar dl { margin: 0; }
.comprende .cp-comparar dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); }
.comprende .cp-papel .cp-comparar dd { margin: 0.125rem 0 0; font-size: 1rem; line-height: 1.55; }
.comprende .cp-comparar dl > div + div { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--cp-rule-light); }

/* DESLIZA: sin JS se ve la lista completa; con JS, un paso a la vez. */
.comprende .cp-pasos { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.comprende .cp-pasos__p { padding: 0.75rem 0; border-top: 1px solid var(--cp-rule-light); }
.comprende .cp-pasos__n { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--cobre-profundo); }
.comprende .cp-pasos__t { display: block; margin-top: 0.25rem; font-size: 1rem; line-height: 1.6; }
.comprende [data-js] .cp-pasos__p { display: none; border-top: 0; }
.comprende [data-js] .cp-pasos__p.is-activo { display: block; }
.comprende [data-js] .cp-pasos { min-height: 5.5rem; }
.comprende .cp-desliza { margin-top: 1.25rem; }
.comprende .cp-desliza__et { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 0.5rem; }
.comprende .cp-desliza__r { width: 100%; min-height: 44px; accent-color: var(--cobre-profundo); cursor: pointer; }
/* La medida de lectura (58ch) no aplica a las marcas: tienen que medir lo
   mismo que el control o dejan de señalar lo que señalan. */
.comprende .cp-papel .cp-desliza__marcas { max-width: none; }
.comprende .cp-desliza__marcas { display: flex; justify-content: space-between; gap: 0.25rem; margin: 0; font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted-light); }
/* La regla es decorativa (el paso activo se lee completo abajo): con
   etiquetas largas —"Reactivación", "Estabilización"— se recorta antes que
   desbordar la página. Desborde real detectado por motion-check el
   2026-09-22 en el artículo de reconsolidación a 375px. */
.comprende .cp-desliza__marcas { overflow: hidden; }
.comprende .cp-desliza__marcas span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comprende .cp-desliza__marcas span:first-child { text-align: left; }
.comprende .cp-desliza__marcas span:last-child { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .comprende .cp-inter__op > summary::after,
  .comprende .cp-fig [data-parte] { transition: none; }
}

/* ═══ Transición entre páginas (View Transitions, 2026-10-04) ═══════
   Del hub a sus tres caminos (Laboratorio, COMPRENDE, Registro) y de
   vuelta, el navegador funde una página en la otra en lugar de pintar
   en blanco y recargar. Las dos páginas tienen que pedirlo: por eso esta
   misma regla vive en style-registro.css (hub y familia de registro),
   style-laboratorio.css y style-comprende.css. Donde no hay soporte
   (Firefox hoy) se navega como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ═══ Candado: piezas que se abren con el plan (2026-10-09) ══════════ */
.cp-candado { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--cp-rule-light); }
.cp-candado__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cp-candado__acciones .btn { min-height: 52px; }
.cp-papel .cp-candado__acciones .btn--primary { color: var(--carbon); }
.cp-papel .cp-candado__acciones .btn--ghost { color: var(--carbon); }
.cp-candado__nota { margin-top: 1.5rem; font-size: 0.9375rem !important; color: var(--muted-light); }
.cp-candado__suelto { margin-top: 1rem; font-size: 1rem !important; }
.cp-candado__suelto a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .cp-candado__acciones .btn { width: 100%; } }

/* ════════════════════════════════════════════════════════════════════════
   FICHAS (piloto 2026-10-10, «¿Por qué siento hormigueo?»)
   La versión corta de una pieza: fichas 4:5 que se deslizan, negro y crema
   alternados, letra grande. El tamaño de todo va en cqw (unidades del
   contenedor) para que la misma ficha se lea igual en un teléfono y
   exportada a 1080×1350 para Instagram (html.is-export, ver
   tools/comprende/exportar-fichas.cjs).
   ════════════════════════════════════════════════════════════════════════ */
.cp-corta { padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 0 1.5rem; background: var(--carbon); }
.cp-corta__cabeza { width: min(100% - 2.5rem, 34rem); margin: 0 auto 1.25rem; }
.cp-corta__titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em;
  margin: 0.5rem 0 0.75rem; text-wrap: balance;
}
.cp-corta__evidencia { margin: 0; }
.cp-corta__evidencia .cp-madurez { background: none; border: 0; padding: 0; color: rgba(245, 240, 230, 0.72); font-size: 0.875rem; }

.cp-fichas { --ancho: min(86vw, 26rem); }
.cp-fichas__pista {
  list-style: none; margin: 0; padding: 0 calc((100% - var(--ancho)) / 2);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--ancho); gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - var(--ancho)) / 2);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.cp-fichas__pista::-webkit-scrollbar { display: none; }
.cp-fichas__pista:focus-visible { outline: 2px solid var(--cobre-organico); outline-offset: 4px; }
.cp-ficha { container-type: inline-size; scroll-snap-align: center; scroll-snap-stop: always; }
.cp-ficha__lienzo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 1.25rem;
  overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 11cqw 9cqw 14cqw;
}
.cp-ficha--oscura .cp-ficha__lienzo { background: #1F1C17; color: var(--marfil); box-shadow: inset 0 0 0 1px rgba(200, 168, 130, 0.28); }
.cp-ficha--clara .cp-ficha__lienzo { background: var(--marfil); color: var(--carbon); }
.cp-ficha--cobre .cp-ficha__lienzo { background: var(--cobre-organico); color: var(--carbon); }

.cp-ficha__n, .cp-ficha__marca, .cp-ficha__desliza {
  position: absolute; font-family: var(--font-mono); font-size: 3.1cqw; letter-spacing: 0.14em; text-transform: uppercase;
}
.cp-ficha__n { top: 7cqw; left: 9cqw; color: var(--cobre-organico); }
.cp-ficha__marca { bottom: 7cqw; left: 9cqw; opacity: 0.7; }
.cp-ficha__desliza { bottom: 7cqw; right: 9cqw; opacity: 0.7; letter-spacing: 0.08em; }
.cp-ficha--clara .cp-ficha__n { color: #7A5C0B; }
.cp-ficha--cobre .cp-ficha__n { color: var(--carbon); }

.cp-ficha__cuerpo { display: grid; gap: 4cqw; }
.cp-ficha__portada { font-family: var(--font-display); font-size: 11cqw; line-height: 1.04; margin: 0; letter-spacing: -0.01em; }
.cp-ficha__texto { font-family: var(--font-body); font-size: 6.6cqw; line-height: 1.28; margin: 0; }
.cp-ficha__titulo { font-family: var(--font-mono); font-size: 3.6cqw; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; color: var(--cobre-organico); }
.cp-ficha--clara .cp-ficha__titulo { color: #7A5C0B; }
.cp-ficha__fuerte { font-family: var(--font-display); font-weight: 400; font-size: 1.45em; line-height: 1.05; display: inline-block; }
.cp-ficha__acento { font-family: var(--font-display); font-style: italic; color: var(--cobre-organico); }
.cp-ficha--clara .cp-ficha__acento { color: #7A5C0B; }
.cp-ficha--cobre .cp-ficha__acento { color: var(--carbon); }
.cp-ficha__fuente { font-family: var(--font-mono); font-size: 3.1cqw; letter-spacing: 0.06em; opacity: 0.7; margin: 2cqw 0 0; }
.cp-ficha__cuerpo mark { background: var(--cobre-organico); color: var(--carbon); padding: 0 0.15em; }
.cp-ficha__cita { font-family: var(--font-display); font-style: italic; font-size: 8.6cqw; line-height: 1.14; margin: 0; }
.cp-ficha__cita .cp-ficha__acento { font-style: normal; }
.cp-ficha__frase { font-family: var(--font-display); font-size: 9cqw; line-height: 1.08; margin: 0; }

.cp-ficha__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.2cqw; counter-reset: paso; }
.cp-ficha__lista li { font-size: 6.6cqw; line-height: 1.18; padding-left: 9cqw; position: relative; counter-increment: paso; }
.cp-ficha__lista li::before { content: counter(paso); position: absolute; left: 0; font-family: var(--font-display); color: var(--cobre-organico); }
.cp-ficha--clara .cp-ficha__lista li::before { color: #7A5C0B; }
.cp-ficha__lista--cadena { gap: 0; }
.cp-ficha__lista--cadena li { padding-bottom: 3.4cqw; }
.cp-ficha__lista--cadena li:last-child { padding-bottom: 0; }
.cp-ficha__lista--cadena li:not(:last-child)::after {
  content: ''; position: absolute; left: 1.6cqw; top: 8.6cqw; bottom: 0.8cqw; width: 1px; background: currentColor; opacity: 0.3;
}

.cp-ficha__cta {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.6em;
  margin-top: 3cqw; padding: 3.4cqw 6cqw; border-radius: 999px; background: var(--carbon); color: var(--marfil);
  font-family: var(--font-body); font-weight: 500; font-size: 4.8cqw; text-decoration: none;
}
.cp-ficha__cta span { font-family: var(--font-mono); font-size: 0.62em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.cp-ficha__cta--ig { display: none; }
a.cp-ficha__cta:hover { background: #2A2621; }
a.cp-ficha__cta:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }

.cp-fichas__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.cp-fichas__flecha {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245, 240, 230, 0.3);
  background: transparent; color: var(--marfil); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cp-fichas__flecha:disabled { opacity: 0.3; cursor: default; }
.cp-fichas__flecha:not(:disabled):hover { border-color: var(--cobre-organico); color: var(--cobre-organico); }
.cp-fichas__puntos { list-style: none; display: flex; gap: 0.45rem; margin: 0; padding: 0; }
.cp-fichas__puntos li { width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 240, 230, 0.28); transition: transform 0.3s, background-color 0.3s; }
.cp-fichas__puntos li.is-on { background: var(--cobre-organico); transform: scale(1.3); }

/* La explicación completa, plegada. */
.cp-completo { background: var(--carbon); }
.cp-completo__abrir {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem;
  width: min(100% - 2.5rem, 34rem); margin: 0 auto; padding: 1.25rem 0 2.25rem;
  border-top: 1px solid rgba(245, 240, 230, 0.18); color: var(--marfil);
  font-family: var(--font-display); font-size: 1.375rem;
}
.cp-completo__abrir::-webkit-details-marker { display: none; }
.cp-completo__abrir span::after { content: ' +'; color: var(--cobre-organico); }
.cp-completo[open] .cp-completo__abrir span::after { content: ' −'; }
.cp-completo__abrir small { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.cp-completo__abrir:focus-visible { outline: 2px solid var(--cobre-organico); outline-offset: 4px; }

/* Exportar a Instagram: cada ficha a 1080 px, con el CTA de Instagram. */
html.is-export .cp-fichas__pista { display: block; overflow: visible; padding: 0; }
html.is-export .cp-ficha { width: 1080px; margin: 0 0 40px; }
html.is-export .cp-ficha__lienzo { border-radius: 0; box-shadow: none; }
html.is-export .cp-ficha__cta--web { display: none; }
html.is-export .cp-ficha__cta--ig { display: inline-flex; }
html.is-export .cp-ficha__web, .cp-ficha__ig { display: none; }
html.is-export .cp-ficha__ig { display: inline; }
html.is-export .navbar, html.is-export .ambient, html.is-export .skip-link, html.is-export .cp-corta__cabeza, html.is-export .cp-fichas__nav { display: none !important; }
html.is-export .cp-corta { padding: 0; }

@media (prefers-reduced-motion: reduce) { .cp-fichas__puntos li { transition: none; } }

/* ════════════════════════════════════════════════════════════════════════
   HOME CORTO (2026-10-13). La búsqueda en el primer pantallazo; la lista
   plegada por tipo; las entradas en una fila que se desliza. Sin escenas.
   ════════════════════════════════════════════════════════════════════════ */
.comprende--corto .cp-inicio { padding-bottom: 0.5rem; }
.cp-inicio__lema { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.625rem); line-height: 1.3; margin: 0; color: var(--marfil); }
.cp-inicio__lema em { color: var(--cobre-organico); }
.cp-inicio__cuerpo, .cp-inicio__bloque { width: min(100% - 2.5rem, 40rem); margin-inline: auto; }
.cp-inicio__bloque { padding-top: 2.5rem; }
.cp-inicio__h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; margin: 0 0 1rem; }
.cp-inicio .cp-busqueda { max-width: none; }
.cp-inicio .cp-tipos { margin-top: 0.75rem; scrollbar-width: none; }
.cp-inicio .cp-tipos::-webkit-scrollbar { display: none; }
.cp-inicio .cp-estado-busqueda:empty { min-height: 0; margin: 0; }
.cp-inicio .cp-resultados { margin-top: 0.75rem; }
.cp-inicio .cp-grupo:first-child { margin-top: 0.75rem; }

.cp-plegado { border-top: 1px solid var(--rule-dark); }
.cp-plegado:last-child { border-bottom: 1px solid var(--rule-dark); }
.cp-plegado summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--marfil);
}
.cp-plegado summary::-webkit-details-marker { display: none; }
.cp-plegado summary::after { content: "+"; font-family: var(--font-mono); color: var(--cobre-organico); transition: transform 240ms var(--ease-out); }
.cp-plegado[open] summary::after { transform: rotate(45deg); }
.cp-plegado summary:focus-visible { outline: 2px solid var(--cobre-organico); outline-offset: 2px; }
.cp-plegado__n { margin-left: auto; font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-dark); }
.cp-plegado--prep summary { color: var(--muted-dark); }
.cp-plegado .cp-lista-docs { border-top: 0; padding-bottom: 0.5rem; }
.cp-plegado .cp-doc { padding: 0.85rem 0; }
.cp-plegado .cp-doc__resumen { display: none; }

.cp-sentir .cp-sentir__paneles { margin-top: 1rem; }
.cp-sentir .cp-sentir__paneles:not(:has(.cp-sentir__panel:not([hidden]))) { margin-top: 0; }

.cp-entradas--fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 16rem); gap: 0.75rem;
  grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 0.25rem;
}
.cp-entradas--fila::-webkit-scrollbar { display: none; }
.cp-entradas--fila > li { scroll-snap-align: start; }
.cp-entradas--fila .cp-entrada {
  display: flex; flex-direction: column; gap: 0.375rem; height: 100%;
  padding: 1rem 1.125rem; border: 1px solid var(--rule-dark); border-radius: var(--radius);
}
.cp-entradas--fila .cp-entrada__titulo { font-size: 1.25rem; }
.cp-entradas--fila .cp-entrada__frase { font-size: 0.9375rem; }

.cp-inicio__mas { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.cp-inicio__mas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marfil); text-decoration: underline; text-decoration-color: var(--cobre-organico); text-underline-offset: 4px; }
.comprende--corto #puente { padding-bottom: 2.5rem; }
.comprende--corto .cp-puente__item { padding: 0.9rem 0 1rem; }
.comprende--corto .cp-puente__verbo { font-size: 1.25rem; }

/* Glosario corto (2026-10-13): término + frase a la vista, lo demás al tocar. */
.cp-termino--plegado { padding: 0; scroll-margin-top: 4.5rem; }
.cp-termino--plegado > summary { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 2rem 1rem 0; cursor: pointer; list-style: none; position: relative; min-height: 56px; }
.cp-termino--plegado > summary::-webkit-details-marker { display: none; }
.cp-termino--plegado > summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1.1rem; font-family: var(--font-mono); font-size: 1.25rem; color: var(--cobre-organico); transition: transform 240ms var(--ease-out); }
.cp-termino--plegado[open] > summary::after { transform: rotate(45deg); }
.cp-termino--plegado > summary:focus-visible { outline: 2px solid var(--cobre-organico); outline-offset: 2px; }
.cp-termino--plegado h3 { font-size: 1.5rem; margin: 0; }
.cp-termino--plegado .cp-termino__frase { margin: 0; }
.cp-termino__cuerpo { padding-bottom: 1.25rem; }
.cp-termino__cuerpo > * + * { margin-top: 0.75rem; }

/* ════════════════════════════════════════════════════════════════════════
   LECTURA RÁPIDA (2026-10-13, Diego: «que se lea súper fácil y rápido…
   la ciencia con un botón, como respaldo… más visuales»).
   Respuesta en dos tiempos arriba, dibujos en las fichas, la cadena como
   pasos unidos y el fundamento científico detrás de un botón visible.
   ════════════════════════════════════════════════════════════════════════ */
.cp-corta__respuesta { margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.cp-corta__respuesta p { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: rgba(245, 240, 230, 0.82); }
.cp-corta__respuesta .cp-corta__primera {
  font-family: var(--font-display); font-style: italic; color: var(--marfil);
  font-size: clamp(1.375rem, 5.6vw, 1.75rem); line-height: 1.2; margin-bottom: 0.25rem; text-wrap: balance;
}
.cp-corta__respuesta .cp-ficha__acento { color: var(--cobre-organico); }

/* El botón del fundamento: que se vea como botón, no como pie de página. */
.cp-completo__abrir { align-items: center; text-align: center; gap: 0.6rem; border-top: 0; padding-top: 0.5rem; }
.cp-completo__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 52px;
  padding: 0.75rem 1.5rem; border-radius: 999px; border: 1px solid rgba(200, 168, 130, 0.55);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--marfil);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.cp-completo__abrir span.cp-completo__boton::after { content: '+'; font-size: 1.25em; line-height: 1; color: var(--cobre-organico); transition: transform 0.3s; }
.cp-completo[open] .cp-completo__abrir span.cp-completo__boton::after { content: '+'; transform: rotate(45deg); }
.cp-completo__abrir:active .cp-completo__boton { transform: scale(0.98); }
@media (hover: hover) { .cp-completo__abrir:hover .cp-completo__boton { background: rgba(200, 168, 130, 0.12); border-color: var(--cobre-organico); } }
.cp-completo__abrir small { text-transform: none; letter-spacing: 0.04em; font-size: 0.75rem; }

/* La cadena dentro de la lectura: pasos unidos por una línea. */
.cp-flujo { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; max-width: 30rem; }
.cp-flujo__paso { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.875rem; align-items: center; padding-bottom: 1.1rem; }
.cp-flujo__paso:last-child { padding-bottom: 0; }
.cp-flujo__paso:not(:last-child)::after {
  content: ''; position: absolute; left: calc(1.125rem - 0.5px); top: 2.25rem; bottom: 0; width: 1px; background: var(--cobre-organico); opacity: 0.55;
}
.cp-flujo__n {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cobre-organico); color: var(--cobre-profundo); font-family: var(--font-display); font-size: 1rem;
}
.cp-flujo__t { font-size: 1.0625rem; line-height: 1.35; }
.cp-flujo__t::first-letter { text-transform: uppercase; }
.cp-flujo__paso:last-child .cp-flujo__n { background: var(--cobre-organico); color: var(--carbon); }
.cp-flujo__paso:last-child .cp-flujo__t { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--cobre-profundo); }

/* Dibujos dentro de las fichas. */
.cp-vis { width: 100%; display: flex; justify-content: flex-start; color: currentColor; }
.cp-vis svg { height: 30cqw; width: auto; max-width: 100%; overflow: visible; }
.cp-vis--puntos svg { height: auto; width: 100%; }
.cp-vis .vis-linea, .cp-vis .vis-linea path, .cp-vis .vis-linea circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-vis .vis-tenue { opacity: 0.25; }
.cp-vis .vis-vacio { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.4; }
.cp-vis .vis-anillo {
  fill: none; stroke: var(--cobre-organico); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: var(--hasta); transform: rotate(-90deg); transform-origin: 60px 60px;
}
.cp-ficha--clara .cp-vis .vis-punto, .cp-ficha--clara .cp-vis .vis-lleno { fill: #9A7413; }
.cp-ficha--clara .cp-vis .vis-anillo { stroke: #9A7413; }

/* La cadena de las fichas: nodos con número. */
.cp-ficha__lista--cadena li::before {
  width: 6.4cqw; height: 6.4cqw; left: -1.6cqw; top: -0.2cqw; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; font-size: 0.6em; line-height: 1;
}
.cp-ficha__lista--cadena li:not(:last-child)::after { opacity: 0.45; }
.cp-ficha__lista--cadena li:last-child::before { background: var(--cobre-organico); color: var(--carbon); border-color: var(--cobre-organico); }
.cp-ficha--clara .cp-ficha__lista--cadena li:last-child::before { background: #7A5C0B; border-color: #7A5C0B; color: var(--marfil); }

/* Movimiento (2026-10-20, Diego): en las fichas solo se mueve el ojo de la
   marca de agua. Listas, cadenas y dibujos se ven quietos. */

/* Escenas de luz (js/comprende/escenas.js). El degradado es el respaldo
   quieto: se ve sin WebGL y se apaga cuando el shader pinta (.is-gl). */
.cp-luz { pointer-events: none; transition: background-color 0.6s; }
.cp-luz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1); }
.cp-luz.is-gl canvas { opacity: 1; }
.cp-luz.is-gl { background-image: none !important; }
.cp-luz--fondo { position: absolute; inset: 0; z-index: 0; }
.cp-ficha__cuerpo > :not(.cp-luz--fondo), .cp-ficha__n, .cp-ficha__marca, .cp-ficha__desliza { position: relative; z-index: 1; }
.cp-ficha__n, .cp-ficha__marca, .cp-ficha__desliza { position: absolute; }
.cp-luz--caja { position: relative; width: 44cqw; aspect-ratio: 1; margin: -4cqw 0 -2cqw -6cqw; }
.cp-luz--chispas { background-image: radial-gradient(circle at 70% 22%, rgba(200, 168, 130, 0.22), transparent 38%); }
.cp-luz--marea { background-image: linear-gradient(to bottom, transparent 22%, rgba(227, 201, 136, 0.55) 30%, rgba(200, 168, 130, 0.18) 31%, transparent 60%); }
.cp-luz--burbujas { background-image: linear-gradient(to bottom, rgba(200, 168, 130, 0.3), transparent 22%); }
.cp-luz--respira { background-image: radial-gradient(circle, rgba(200, 168, 130, 0.35) 0 38%, transparent 62%); }

/* ─── Marca de agua: el ojo DC (2026-10-20) ─────────────────────────────────
   El ojo del logo, grande y tenue detrás de cada ficha. Quieto en todas
   (dc-ojo-quieto.webp); en la ficha a la vista, js/comprende/ojo.js pone el
   único <video> (assets/video/dc-ojo-idle.webm o .mp4): mira a un lado, arriba,
   abajo, parpadea y, de vez en cuando, se vuelve llave. El video es dorado
   sobre negro: en fichas oscuras se suma con `screen` (el negro desaparece);
   en las claras se invierte y se multiplica, así el trazo queda oscuro. */
.cp-ficha__lienzo { isolation: isolate; }
.cp-ficha__cuerpo { position: relative; z-index: 1; }
.cp-ficha__ojo {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 88%; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none;
  background: url(/assets/visual/web/dc/dc-ojo-quieto.webp) center / contain no-repeat;
  mix-blend-mode: screen; opacity: 0.16;
}
.cp-ficha__ojo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: contrast(1.3); } /* el negro del video queda en negro puro: sin esto se nota un cuadro */
.cp-ficha--clara .cp-ficha__ojo, .cp-ficha--cobre .cp-ficha__ojo { filter: grayscale(1) invert(1); mix-blend-mode: multiply; opacity: 0.12; }

/* ─── Jerarquía tipográfica de las fichas (2026-10-20) ──────────────────────
   Como en las presentaciones: el cuerpo en DM Sans y las palabras clave en
   Playfair, más grandes. [acento] = itálica dorada; *fuerte* = negrita grande;
   la entrada («Lo raro:») en itálica dorada; el último párrafo, el remate,
   en letra de títulos. Lo arma textoFicha() en tools/comprende/render.mjs. */
.cp-ficha__texto { display: grid; gap: 4.4cqw; }
.cp-ficha__parrafo { display: block; }
.cp-ficha__entrada { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.12em; color: var(--cobre-organico); margin-bottom: -2.2cqw; }
.cp-ficha--clara .cp-ficha__entrada { color: #7A5C0B; }
.cp-ficha--cobre .cp-ficha__entrada { color: var(--carbon); }
.cp-ficha__remate { font-family: var(--font-display); font-size: 1.16em; line-height: 1.12; letter-spacing: -0.01em; }
.cp-ficha__acento { font-size: 1.22em; line-height: 1; letter-spacing: -0.01em; }
.cp-ficha__fuerte { font-weight: 700; font-size: 1.3em; }
.cp-ficha__remate .cp-ficha__fuerte, .cp-ficha__remate .cp-ficha__acento { font-size: 1.12em; }
.cp-ficha__lista .cp-ficha__acento, .cp-ficha__lista .cp-ficha__fuerte { font-size: 1.12em; }
.cp-ficha__cita .cp-ficha__acento { font-size: 1.1em; }