/* =============================================================
   Propuesta comercial privada — Odysea
   -------------------------------------------------------------
   Todo lo que aparece aquí se apoya en los tokens reales del sitio
   (css/odysea-tech-ceb6c5.webflow.css :root) y en las mismas escalas
   de espaciado, radio y tipografía que usa el resto del proyecto.

   Reglas que gobiernan esta hoja
   ------------------------------
   · Un solo acento: --_colors---orange. Ningún morado. #811bee (residual) no aplica; usar solo naranja del sistema viene
     marcado como <deleted> en el export de Webflow, y #41175e (neutral-04),
     aunque es la tinta del sitio, se lee violeta sobre fondo blanco.
     La tinta sale de jet-dark, un gris que el proyecto ya usa;
     el acento sigue siendo el naranja y no hay ningún tercer color.
   · Todo espaciado sale de la escala --p-s-* (8/12/16/20/24/32/40/48/60/72).
     No hay 14, 22, 28, 44 ni 56 sueltos.
   · Un solo tamaño para cada rol tipográfico: display, h2, h3, lead,
     body, sm, xs. Los títulos de tarjeta comparten un único tamaño.
   · Una sola primitiva de tarjeta, un solo tamaño de numeral, un solo
     botón. Las diferencias entre bloques son de color, nunca de metricas.
   · Los offsets del layout salen de variables, no de numeros escritos a
     mano, para que no se desincronicen con .page-nav-header.
   ============================================================= */

/* =============================================================
   Sistema de diseño — Propuestas Odysea
   -------------------------------------------------------------
   Base: una sola sans (Google Sans Flex), tinta neutra, acento naranja.
   Escalas: espacios 8/10/12/16/20/24/32/40/48/60/72 vía --p-s-*
   Tipos: display 44, h2 22, h3 18, h4 15, lead 17, body 15, sm 14, label 11
   Superficies: canvas #f6f6f6, card #fff, borde #ececec, fila #f5f5f5
   Acento: #fc6148 / ink #b04432. Sin sombras en tarjetas. Mono eliminado.
   ============================================================= */
/* =============================================================
   1. Capa de tokens
   ============================================================= */

/* Elevacion: los tres valores de sombra que el sitio ya usa. Se declaran en
   :root y no en #prop-app porque las reglas que corrigen la navbar viven
   fuera de #prop-app, y ahi una variable de #prop-app no resuelve.
   Las tarjetas no llevan sombra —borde y radio bastan—; la sombra se
   reserva para lo que de verdad flota: la topbar, el boton del menu movil
   y el panel del sidebar. */
:root {
  /* ── Variables canónicas del rediseño Linear ─────────────────────
     Una sola fuente de verdad para color, letra y ritmo. Los tokens
     --p-* de #prop-app se re-aliasan contra estas, de modo que el resto
     de la hoja hereda el cambio entero. Solo queda un acento
     (--lin-accent); el verde de "mejora" desaparece. */
  --lin-bg: #ffffff;
  --lin-canvas: #f6f6f6;
  --lin-card: #ffffff;
  --lin-row: #f5f5f5;
  --lin-border: #ececec;
  --lin-text: #3c4043;
  --lin-text-strong: #1f2328;
  --lin-text-muted: #5f6368;
  --lin-accent: #fc6148;
  --lin-accent-ink: #b04432;

  --lin-font-heading: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lin-font-body: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lin-font-mono: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lin-ease: 150ms ease;

  /* Elevacion: en Linear las tarjetas no tienen sombra —borde y radio
     bastan—; la sombra se reserva para lo que de verdad flota: la topbar
     con scroll, el boton del menu movil y el panel lateral. */
  --p-shadow-hair: 0 1px 2px #00000014;
  --p-shadow-card: none;
  --p-shadow-float: 0 2px 8px #0000001f;

  /* Platinum del sitio. Sin esta linea el separador de la barra superior
     y el borde del modulo al pasar el cursor quedaban sin declaracion. */
  --p-platinum: var(--_colors---platinum, #ececec);
}

#prop-app {
  /* ── Color ──────────────────────────────────────────────────────────
     Una sola tinta y ningun morado. El sitio usa #41175e (neutral-04) en
     body y h1-h5, pero esta propuesta va sobre papel calido y esa tinta
     se lee violeta: aqui la escala sale de jet-dark #2b2a2a, un gris que
     el propio proyecto ya usa (css/odysea-tech-ceb6c5.webflow.css:224).
     Los alfas son los mismos que usaba neutral-04, para conservar el
     contraste del sitio sin cambiar su estructura. */
  --p-ink: var(--lin-text);
  --p-ink-strong: var(--lin-text-strong);
  --p-ink-soft: var(--lin-text);
  --p-ink-mute: var(--lin-text-muted);
  --p-ink-faint: #5f6368cc;

  --p-accent: var(--lin-accent);
  --p-accent-soft: rgba(252, 97, 72, .16);
  --p-accent-wash: rgba(252, 97, 72, .08);

/* El naranja del sistema da 2.69:1 sobre el fondo blanco, asi que no puede
      ir como color de texto pequeno. Esta variante del mismo tono llega a
      5.03:1 y es la que usan las etiquetas; el naranja puro se queda en bordes,
      superficies y elementos grandes. */
    --p-accent-ink: var(--lin-accent-ink);

    /* ── Un solo acento ─────────────────────────────────────────────
       El verde de "mejora" desaparece: la paleta del rediseño es la escala
       de grises de Linear + el naranja del sitio. Los bloques que antes
       usaban verde se componen como notas neutras. */
    --p-gain: transparent;
    --p-gain-wash: transparent;
    --p-gain-line: transparent;

    /* Pagina y superficie: documento sobre un lienzo gris sutil, tarjetas y
       barras en blanco. El gris del fondo es lo que separa la columna de
       contenido de la topbar y del rail laterales. */
    --p-page-a: var(--lin-canvas);
    --p-page-b: var(--lin-canvas);
    --p-page: var(--p-page-a);
    --p-surface: var(--lin-card);
    --p-surface-alt: var(--lin-row);
    --p-surface-sunken: var(--lin-row);

  /* Bordes neutros, en gris, sin alfa. */
  --p-line: var(--lin-border);
  --p-line-soft: #efefef;

  --p-scrim: #2b2a2a80;
  --p-on-accent: var(--_colors---white, #fff);
  --p-glass: var(--lin-card);

  /* ── Tipografia ────────────────────────────────────────────────────
     Una sola sans (Google Sans Flex) para todo; las etiquetas
     (numerales, cifras y rotulos del indice) comparten familia y se
     distinguen solo por tamano, mayusculas y tracking. Escalas del rediseño:

       display  44px  h1 de portada
       h2       22px  titulo de seccion
       h3       18px  subseccion, encabezado de modulo/fase
       h4       15px  titulo de tarjeta
       lead     17px  entradilla y subtitulo de portada
       body     15px  prosa: toda frase
       sm       14px  dato enumerado: celda, vineta, rotulo
       label     11px etiqueta en mayusculas (eyebrow, tabla, indice)

     La jerarquia la dan el peso (600 en h1/h2, 400 en la prosa) y la
     tinta: ningun parrafo pesa mas de 400. */
  --p-font-heading: var(--lin-font-heading);
  --p-font-body: var(--lin-font-body);
  --p-font-mono: var(--lin-font-mono);

  --p-fs-display: 44px;
  --p-fs-h2: 22px;
  --p-fs-h3: 18px;
  --p-fs-h4: 15px;
  --p-fs-lead: 17px;
  --p-fs-body: 15px;
  --p-fs-sm: 14px;
  --p-fs-label: 11px;

  --p-lh-display: 1.1;
  --p-lh-heading: 1.25;
  --p-lh-title: 1.4;
  --p-lh-lead: 1.5;
  --p-lh-body: 1.6;
  --p-lh-sm: 1.6;

  --p-ls-display: -.02em;
  --p-ls-heading: -.02em;
  --p-ls-m: -.01em;
  /* Etiquetas en mayusculas: tracking positivo, el mismo de Linear. */
  --p-ls-label: .08em;

  /* ── Espaciado ─────────────────────────────────────────────────────
     La escala de gaps del sitio (gap-01 a gap-13). Se referencian sus
     variables, no sus numeros: asi no puede haber dos escalas. */
  --p-s-1: var(--_sizes---gaps--gap-01, 8px);
  --p-s-2: var(--_sizes---gaps--gap-02, 10px);
  --p-s-3: var(--_sizes---gaps--gap-03, 12px);
  --p-s-4: var(--_sizes---gaps--gap-04, 16px);
  --p-s-5: var(--_sizes---gaps--gap-06, 20px);
  --p-s-6: var(--_sizes---gaps--gap-07, 24px);
  --p-s-7: var(--_sizes---gaps--gap-08, 32px);
  --p-s-8: var(--_sizes---gaps--gap-09, 40px);
  --p-s-9: var(--_sizes---gaps--gap-10, 48px);
  --p-s-10: var(--_sizes---gaps--gap-11, 60px);
  --p-s-11: var(--_sizes---gaps--gap-13, 72px);

  /* ── Radios ────────────────────────────────────────────────────────
     Solo 10 y 6: 10 para tarjetas y contenedores, 6 para elementos
     pequenos (numerales, chips, celdas del indice, botones). */
  --p-radius: 10px;
  --p-radius-sm: 6px;
  --p-radius-btn: 6px;
  --p-radius-pill: var(--_sizes---radius--radius-08, 100px);

/* Pesos: el sitio usa normal 400, medium 500 y semibold 600. Ninguna pieza de
   contenido usa semibold: se bajo todo a medium en la revision de densidad,
   porque con la serif de titular a 20px y las etiquetas en mono de
   mayusculas el 600 cerraba parches de oscuro que se leian como texto
   cargado. El escalon real del documento es normal -> medium, y la jerarquia
   la dan la familia tipografica y el color de la tinta. */
  --p-weight-normal: 400;
  --p-weight-medium: 500;
  --p-weight-semibold: 600;

  /* ── Layout ────────────────────────────────────────────────────────
     Los offsets salen de variables para que no se desincronicen con
     .page-nav-header, que el sitio declara a 70px y 50px. */
  --p-nav-h: 70px;
  --p-topbar-h: 56px;
  --p-rail: 260px;
  --p-gutter: 40px;

  /* El documento ocupa el 85% de la columna libre del rail, con techo de
     1080px para que no se haga interminable en pantallas grandes.
     --p-measure acota solo la prosa larga; tarjetas, tablas y rejillas
     aprovechan todo el ancho. */
  --p-content-w: 85%;
  --p-content-max: 1080px;
  --p-measure: 62ch;
  --p-indent: 44px;

  /* Ritmo vertical: 72px entre secciones y 24px entre el encabezado de
     una seccion y su propio contenido. */
  --p-sec-y: 72px;
  --p-sec-gap: var(--p-s-4);

  /* Movimiento */
  --p-ease: 150ms ease;
  --p-ease-sheet: cubic-bezier(.25, .46, .45, .94);
  --p-dur-sheet: 280ms;
}

/* =============================================================
   2. Base
   ============================================================= */

#prop-app {
  background: var(--p-page);
  background-color: var(--p-page);
  background-attachment: scroll;
  color: var(--p-ink);
  font-family: var(--p-font-body);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

#prop-app[hidden] { display: none !important; }

#prop-app ::selection { background: var(--p-accent); color: var(--p-on-accent); }

#prop-app *:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
  border-radius: var(--p-radius-sm);
}

/* =============================================================
   3. Primitiva de tarjeta
   Solo lo que es realmente comun: fondo, borde, radio y padding de
   24px. Cada componente declara su propio padding cuando necesita
   otro, en su seccion. Asi ninguna propiedad tiene dos dueños.
   ============================================================= */

.prop-benefit,
.prop-role,
.prop-xcol,
.prop-incl,
.prop-evogrp,
.prop-sub,
.prop-layer {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: var(--p-s-6);
}

/* Filas de una linea: van en la primitiva de superficie pero con el
   padding de fila, no el de bloque. */
.prop-step {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
}

/* Rejillas de tarjetas: un único gap.

   El gap va en --p-s-6 (24px) y no en --p-s-4 (16px) por una razón concreta:
   estas tarjetas toman la primitiva de superficie, cuyo padding es de 24px.
   Con un hueco de 16 entre ellas, el espacio de fuera quedaba MENOR que el de
   dentro, y el ojo leía el borde como parte del interior: dos tarjetas
   contiguas se confundían en un solo bloque. Para que una tarjeta se lea como
   una tarjeta, el hueco tiene que medir al menos lo que mide el margen
   interno. */
.prop-roles,
.prop-xcols,
.prop-incls,
.prop-evogrps,
.prop-layers,
.prop-steps,
.prop-forwho {
  display: grid;
  gap: var(--p-s-6);
  margin: var(--p-s-6) 0 0;
}

.prop-roles { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.prop-xcols, .prop-incls { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* "Evolución futura": seis grupos en una sola columna ocupaban seis pantallas
   de scroll para seis listas de cuatro palabras. En tres columnas son dos
   filas, y el bloque entero se lee de un vistazo.
   Columnas fijas y no auto-fit: con seis elementos auto-fit puede caer en
   3+2+1 según el ancho, y una fila de una sola tarjeta al final se lee como
   un resto, no como una rejilla. */
.prop-layers, .prop-steps { grid-template-columns: 1fr; }
.prop-evogrps { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .prop-evogrps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .prop-evogrps { grid-template-columns: repeat(3, 1fr); }
}

.prop-forwho { grid-template-columns: 1fr; }

.prop-benefit:hover,
.prop-role:hover,
.prop-xcol:hover,
.prop-incl:hover,
.prop-evogrp:hover,
.prop-layer:hover {
  border-color: var(--p-accent-soft);
  box-shadow: var(--p-shadow-card);
}

/* =============================================================
   4. Primitiva de numeral
   40px en todo el contenido. El TOC usa 32px porque es navegación,
   no contenido, y su ritmo es más apretado.
   ============================================================= */

.prop-benefit-n,
.prop-phase-n,
.prop-step-n,
.prop-tree-marker {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  color: var(--p-accent-ink);
  background: var(--p-accent-wash);
  border: 1px solid var(--p-accent-soft);
  border-radius: var(--p-radius-sm);
}

.prop-layer-n {
  width: 48px;
  height: 48px;
  font-size: var(--p-fs-body);
}

/* =============================================================
   5. Titulos
   -------------------------------------------------------------
   Tres grados y ni uno mas:
     · h3  24px — subseccion, encabezado de modulo y de fase
     · h4  20px — titulo de tarjeta (los doce sitios que cumplen ese rol)
   Antes los h3 salian a 24px o a 20px segun el bloque y los h4 a 20px, de
   modo que h3 y h4 eran el mismo tamano y el documento no tenia jerarquia.
   ============================================================= */

.prop-h3,
.prop-mod-name,
.prop-phase-name {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h3);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0 0 var(--p-s-3);
}

/* Un unico tamano para los doce titulos de tarjeta. Todos son h4 en el
   documento, asi que el grade visual y el grade semantico coinciden.
   Van en medium, no en semibold: a 20px el salto de peso se leia como un
   blok de texto oscuro —sobre todo en las mono deMayusculas, que a 14px en
   600 son casi ilegibles— y el documento pesaba mas de lo que necesitaba.
   La jerarquia la sostienen la familia y el color, que ya son una diferencia
   mayor: el titulo va en la serif del sitio y en tinta llena, el cuerpo en la
   sans y en tinta suave. Cambiar el peso no cuesta nada de esa escalera. */
.prop-benefit-title,
.prop-role-name,
.prop-xcol-role,
.prop-incl-title,
.prop-evogrp-title,
.prop-step-title,
.prop-layer-name,
.prop-modgroup-title,
.prop-compare-title,
.prop-sign-name {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0 0 var(--p-s-3);
}

/* Antes cada familia de titulo anadia su propio margen inferior —--p-s-1,
   --p-s-2, --p-s-3 o --p-s-4— segun el bloque, de modo que dos tarjetas con
   el mismo tipo de contenido respiraban distinto. Un solo valor para todos:
   el espacio entre un titulo y su cuerpo es una decision de sistema, no de
   cada componente. */

/* =============================================================
   6. Párrafos
   ============================================================= */

.prop-p {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0 0 var(--p-s-3);
  max-width: var(--p-measure);
}

.prop-lead-p {
  font-size: var(--p-fs-lead);
  line-height: var(--p-lh-lead);
  color: var(--p-ink-soft);
  margin: 0 0 var(--p-s-4);
  max-width: var(--p-measure);
}

/* El margen del parrafo lo pone el contenedor, no el ultimo parrafo: asi una
   lista o una tabla que sigue no queda pegada al texto que la precede. */
.prop-p:last-child,
.prop-lead-p:last-child { margin-bottom: 0; }

.prop-lead { margin-bottom: var(--p-s-7); }


.prop-cover-sub {
  font-size: var(--p-fs-lead);
  line-height: var(--p-lh-lead);
  color: var(--p-ink-soft);
  margin: 0 0 var(--p-s-5);
  max-width: var(--p-measure);
}

.prop-role-body,
.prop-forwho-role,
.prop-incl-lead {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0;
}

.prop-incl-lead { margin-bottom: var(--p-s-4); }

/* El cierre nombra a los tres perfiles del Campus —"Administración",
   "Docentes", "Estudiantes"— y antes los pintaba dentro de la primitiva de
   numeral, que es una caja cuadrada de 40px pensada para "01". El texto
   necesita 75, 51 y 63px, así que salía de la caja por los tres lados.
   Aquí es lo que es: un rótulo de rol, en la tipografía de titular, con su
   ancho medido. */
.prop-forwho-n {
  flex-shrink: 0;
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
}

.prop-mod-intro {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0 0 var(--p-s-6);
  max-width: var(--p-measure);
}

/* El caso de uso abre el panel del módulo. Va sobre un fondo de acento y con
   un filete a la izquierda: es la única frase del panel que el cliente tiene
   que leer con atención, y el tratamiento la distingue del inventario de
   funcionalidades que viene debajo sin necesita una caja más —el panel ya es
   una superficie plana, y añadirle otra caja devuelva el anidamiento a tres
   niveles. */
.prop-usecase {
  margin: 0 0 var(--p-s-6);
  padding: var(--p-s-4) var(--p-s-5);
  background: var(--p-accent-wash);
  border-left: 2px solid var(--p-accent);
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0;
}

.prop-usecase-label {
  margin: 0 0 var(--p-s-2);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-accent-ink);
}

.prop-usecase-text {
  margin: 0;
  max-width: var(--p-measure);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-strong);
}

/* =============================================================
   7. Etiquetas
   ============================================================= */

.prop-eyebrow,
.prop-benefit-label,
.prop-modresult-label,
.prop-money-label,
.prop-cover-contact-label,
.prop-cover-meta-dt,
.prop-kv-k,
.prop-topbar__badge {
  display: block;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
  margin: 0;
}

/* El eyebrow es la unica etiqueta que separa de lo que sigue; las demas
   van pegadas a su valor. */
.prop-eyebrow {
  color: var(--p-accent-ink);
  margin-bottom: var(--p-s-3);
}

.prop-eyebrow--cover { color: var(--p-ink-mute); max-width: var(--p-measure); }
.prop-eyebrow--sm { color: var(--p-ink-mute); font-size: var(--p-fs-sm); }

/* =============================================================
   8. Encabezados de sección
   ============================================================= */

/* Sin max-width: el ancho lo da el contenedor, que ocupa el 85% de la
   columna libre del menu lateral. Los topes de 18/26/34 ch que tenia antes
   eran lo que hacia que el documento se leyera angosto. */
.prop-h1 {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-display);
  line-height: var(--p-lh-display);
  letter-spacing: var(--p-ls-display);
  font-weight: var(--p-weight-medium);
  color: var(--p-ink-strong);
  margin: 0 0 var(--p-s-5);
}

.prop-h2 {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h2);
  line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-heading);
  font-weight: var(--p-weight-medium);
  color: var(--p-ink-strong);
  margin: 0;
}

/* .prop-h3 ya recibe su metricas del bloque de titulos de arriba; aqui solo
   se le ajusta el margen, que en un sub-bloque es menor que en una seccion. */
.prop-h3 { margin-bottom: var(--p-s-4); }

.prop-sec-head { margin-bottom: var(--p-sec-gap); }

.prop-sec {
  padding: calc(var(--p-sec-y)*.75) 0;
  border-top: 1px solid var(--p-line-soft);
  /* Los enlaces del sidebar saltan a #id-de-seccion. Sin este margen, el
     encabezado queda debajo de la barra flotante y el salto parece no haber
     hecho nada. */
  scroll-margin-top: calc(var(--p-topbar-h) + var(--p-s-5));
}

.prop-sec:first-child { border-top: none; }
.prop-sec--cover { padding-top: 0; }

/* =============================================================
   9. Layout: rail + contenido
   ============================================================= */

.prop-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .prop-layout { grid-template-columns: var(--p-rail) minmax(0, 1fr); }

  /* El rail ocupa toda la altura de la ventana: la topbar empieza sobre él,
     así que no hay doble compensacion que mantener sincronizada. */
  .prop-sidebar {
    position: sticky;
    top: var(--p-nav-h);
    align-self: start;
    height: calc(100vh - var(--p-nav-h));
    background: var(--p-surface);
    border-right: 1px solid var(--p-line-soft);
    display: flex;
    flex-direction: column;
    z-index: 20;
  }

  .prop-sidebar__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--p-s-4);
    padding: var(--p-s-7) var(--p-gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .prop-sidebar__backdrop { display: none; }
}

/* El documento ocupa el 85% de la columna que deja libre el menu lateral,
   con --p-content-max como techo para pantallas muy anchas. El centrado se
   hace con margen automatico y sin padding lateral: el 15% sobrante ES el
   margen. La prosa larga si queda acotada a --p-measure para que la linea
   no se elongate, pero tarjetas, tablas y rejillas usan todo el ancho.
   La topbar mide lo mismo, asi ambos bordes quedan alineados. */
.prop-main,
.prop-topbar__inner {
  width: var(--p-content-w);
  max-width: var(--p-content-max);
  margin-inline: auto;
}

.prop-main {
  padding: calc(var(--p-nav-h) + var(--p-topbar-h) + var(--p-s-6)) 0 var(--p-s-11);
  /* Sin esto el elemento se comporta como un grid item con tamano minimo
     automatico: la tabla comparativa, con sus encabezados en una sola linea,
     inflaba la columna del grid hasta 711px y la pagina acquires scroll
     horizontal en cualquier viewport por debajo de 767px. Con min-width:0 el
     ancho lo manda el contenedor y la tabla se desborda dentro de su propio
     contenedor con scroll, que es lo que debe pasar. */
  min-width: 0;
}

@media (max-width: 767px) {
  #prop-app {
    --p-nav-h: 50px;
    --p-topbar-h: 56px;
    --p-indent: 32px;
  }

  .prop-main { padding-bottom: var(--p-s-10); }
}

/* =============================================================
   10. Sidebar / TOC
   ============================================================= */

.prop-sidebar__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--p-s-3);
  padding-bottom: var(--p-s-4);
  border-bottom: 1px solid var(--p-line-soft);
}

.prop-sidebar__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-s-3);
}

.prop-sidebar__logo {
  width: 120px;
  height: auto;
  display: block;
}

.prop-sidebar__title {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-normal);
  color: var(--p-ink-strong);
  margin: 0;
}

.prop-sidebar__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--p-ink-mute);
  border-radius: var(--p-radius-sm);
  transition: color var(--p-ease), background var(--p-ease);
}

.prop-sidebar__close:hover { color: var(--p-ink-strong); background: var(--p-surface-alt); }

.prop-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-1);
}

/* Rótulo de parte. Es lo que convierte la lista en un índice: sin él, trece
   entradas del mismo peso son un menú, y un menú no dice en qué orden ni con
   qué criterio se lee el documento. La parte se marca con una etiqueta en
   mayúsculas y un filete, la misma pieza que separa las secciones del
   cuerpo. */
/* Los grupos de PARTE se eliminaron con `part`: agrupar seis entradas en
   cuatro partes devolvía el índice a dos niveles sin ganar nada.
   Lo que vuelve es un encabezado de OFERTA —.prop-toc__group—, que responde a
   otra pregunta: cuál es la propuesta central y cuáles son servicios que se
   contratan aparte. Un índice donde las ocho entradas pesan igual no dice eso,
   y el lector no lo descubre hasta llegar a la cuarta sección. El encabezado
   solo aparece si el documento declara grupos; sin ellos no se emite nada y
   el índice queda igual que antes. */
.prop-toc__group {
  margin-top: var(--p-s-5);
  padding: 0 var(--p-s-3);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  line-height: var(--p-lh-body);
  color: var(--p-ink-faint);
  border-bottom: 1px solid var(--p-line-soft);
  padding-bottom: var(--p-s-2);
}

/* El primer encabezado no necesita el margen: si no, empuja el índice hacia
   abajo y el primer enlace queda solo. */
.prop-toc__list > .prop-toc__group:first-child {
  margin-top: 0;
}

/* ── Piezas de vista alternativa ─────────────────────────────
   Una sección `standalone` no es un capítulo del documento: al pulsarla se
   sustituye todo el contenido por ese bloque. En el índice, una flecha a la
   derecha y la entrada en acento lo dicen — es un cambio de documento, no un
   scroll dentro del mismo. Sin esa pista el lector hace clic, no pasa nada
   visible y lo toma por un enlace roto. */
/* Las entradas de vista son <button>, no <a>: son una acción —cambiar el
   documento que se está viendo— y no una navegación a un fragmento, que es
   lo que serían en el documento principal, donde su contenido no está en el
   scroll.

   Aquí se anulan SOLO los valores propios del botón —fondo, borde y
   apariencia—. La tipografía no hay que tocarla: `.prop-toc__link` ya declara
   font-size y line-height, y un botón los recibe igual que un enlace.

   No debe escribirse aquí `font: inherit`. `inherit` no quiere decir "lo que
   dice esta clase", sino "lo que tiene el padre": el <li> del índice, que va
   a 17.6px. El botón se saltaba entonces los 14px de la entrada y medía un
   26% más grande que el resto —que es justo lo que rompía el diseño—. */
button.prop-toc__link {
  width: 100%;
  text-align: left;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
  appearance: none;
}

/* El enlace de vuelta dentro del contenido. Es el camino de salida de la
   vista alternativa, y tiene que existir dentro del propio bloque: en el
   impreso es la única línea que dice que esto no es el documento completo, y
   en móvil el índice está cerrado. */
.prop-viewback { margin: 0 0 var(--p-s-6); }

.prop-viewback__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--p-s-3);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--p-ease);
}

.prop-viewback__link:hover { border-bottom-color: var(--p-accent); }
.prop-viewback__link:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.prop-viewback__mark { font-size: var(--p-fs-body); line-height: 1; }

.prop-toc__link {
  display: flex;
  align-items: center;
  gap: var(--p-s-3);
  padding: var(--p-s-2) var(--p-s-3);
  border-left: 2px solid transparent;
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0;
  color: var(--p-ink-soft);
  text-decoration: none;
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  transition: color var(--p-ease), background var(--p-ease), border-color var(--p-ease);
}

.prop-toc__link:hover { color: var(--p-ink-strong); background: var(--p-surface-alt); }

.prop-toc__link.is-active {
  color: var(--p-ink-strong);
  font-weight: var(--p-weight-medium);
  border-left-color: var(--p-accent);
  background: var(--p-accent-wash);
}

/* ── Entradas de vista ─────────────────────────────────────────
   Estas reglas van DESPUÉS de `.prop-toc__link` y de su estado activo, y no
   por casualidad: ambas clases tienen la misma especificidad, así que la que
   llega última gana. Puestas antes, `padding` de la clase base se las
   pisaba y la flecha —que es absoluta— se montaba encima del texto. */
.prop-toc__link--view { position: relative; padding-right: var(--p-s-6); }

.prop-toc__link--view::after {
  content: "→";
  position: absolute;
  right: var(--p-s-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  line-height: 1;
  color: var(--p-ink-faint);
  transition: color var(--p-ease);
}

.prop-toc__link--view:hover::after { color: var(--p-accent); }
.prop-toc__link--view.is-active::after { color: var(--p-accent); }

/* La entrada de vuelta: mismo sitio que las demás, con la flecha al otro
   lado. */
.prop-toc__link--back { color: var(--p-ink-soft); }
.prop-toc__backmark { font-family: var(--p-font-mono); color: var(--p-accent-ink); }
.prop-toc__item--back { margin-bottom: var(--p-s-2); }

.prop-toc__number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-faint);
  border-radius: var(--p-radius-sm);
  transition: color var(--p-ease);
}

.prop-toc__link.is-active .prop-toc__number { color: var(--p-accent-ink); }
.prop-toc__link:hover .prop-toc__number { color: var(--p-ink-mute); }

.prop-toc__label { flex: 1; min-width: 0; }

/* Breakpoint de layout: 992px, el mismo punto en que el sitio pasa a movil
   (max-width 991px, ocho bloques en css/odysea-tech-ceb6c5.webflow.css).
   El rail necesita 280px + 960px de documento para trabajar comodo; por debajo
   de 992px el sidebar pasa a bottom sheet y el documento usa todo el ancho. */

/* =============================================================
   11. Topbar
   ============================================================= */

/* Aquí ya no se toca .page-nav-header.
 *
 * Antes se le ponía fondo blanco y position:fixed con un motivo escrito:
 * "el logo del sitio es oscuro, así que blanco es el fondo que corresponde".
 * Ese motivo era falso y la corrección era peor que el problema. El logo del
 * nav es naranja (#FC6148), no oscuro: sobre la barra blanca daba 3.02:1 y el
 * botón "Acceso cliente" se quedaba en 1.16:1 — ilegible. Sobre el fondo
 * oscuro real de la pantalla de acceso (#2b2a2a) el logo da 4.73:1 y el botón
 * 12.34:1. La barra blanca no era un detalle: era lo que tapaba la lectura.
 *
 * El otro motivo —que en un documento con scroll largo el contenido se lee por
 * detrás de la barra— tampoco aplica: html.prop-ready oculta el nav en
 * cuanto se abre el documento, así que esta regla solo llegaba a pintar la
 * pantalla de acceso, que es justo donde sobraba. Con ella fuera, el nav
 * vuelve a los valores del sitio: transparente y position:absolute, sobre la
 * sección oscura y sin costura visible.
 */
.page-nav-header {
  background-color: transparent;
  position: absolute;
}

/* El <body> del sitio es blanco y la sección de acceso es oscura, pero no
   llega a llenar la pantalla: con min-height:100vh y 120px de padding
   inferior sobraban 154px de blanco debajo en escritorio. Se ve al desplazar
   y rompe la página. `:has()` —que ya se usa en contact-form.css— acota el
   fondo a esta pantalla sin tocar el body de las demás páginas. */
body:has(.login-section) {
  background-color: var(--_colors---jet-dark, #2b2a2a);
}

.prop-topbar {
  position: fixed;
  top: var(--p-nav-h);
  left: 0;
  right: 0;
  height: var(--p-topbar-h);
  z-index: 30;
  display: flex;
  background: var(--p-glass);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--p-line-soft);
  transition: box-shadow var(--p-ease);
}

@media (min-width: 900px) {
  .prop-topbar { left: var(--p-rail); }
}

.prop-topbar.scrolled { box-shadow: var(--p-shadow-float); }

.prop-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-s-4);
}

.prop-topbar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--p-s-3);
  min-width: 0;
}

.prop-topbar__client {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-normal);
  color: var(--p-ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prop-topbar__sep {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--p-platinum);
}

.prop-topbar__provider {
  flex-shrink: 0;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-accent-ink);
}

.prop-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--p-s-3);
  flex-shrink: 0;
}

.prop-topbar__badge {
  margin: 0;
  padding: var(--p-s-1) var(--p-s-3);
  color: var(--p-ink-mute);
  background: var(--p-surface-sunken);
  border-radius: var(--p-radius-pill);
}

@media (max-width: 767px) {
  .prop-topbar__badge { display: none; }
}

/* =============================================================
   12. Botón
   Mismo lenguaje que .client-access-btn del sitio: radio 10px, borde
   translúcido, Inconsolata en mayusculas.
   ============================================================= */

.prop-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--p-s-3);
  padding: var(--p-s-2) var(--p-s-4);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  line-height: var(--p-lh-display);
  color: var(--p-ink-strong);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--p-ease), color var(--p-ease), background var(--p-ease);
}

.prop-btn:hover { border-color: var(--p-accent); color: var(--p-accent-ink); }
.prop-btn:active { transform: translateY(1px); }
.prop-btn:disabled { opacity: .5; cursor: not-allowed; }

/* =============================================================
   13. Portada
   ============================================================= */

.prop-cover-meta {
  display: grid;
  gap: var(--p-s-4);
  max-width: 520px;
  margin: var(--p-s-8) 0 0;
  padding-top: var(--p-s-7);
  border-top: 1px solid var(--p-line-soft);
}

.prop-cover-meta-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--p-s-4);
  align-items: baseline;
}

.prop-cover-meta-dt { margin: 0; }

.prop-cover-meta-dd {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  line-height: var(--p-lh-lead);
  color: var(--p-ink-strong);
  margin: 0;
}

@media (max-width: 479px) {
  .prop-cover-meta-row { grid-template-columns: 1fr; gap: var(--p-s-1); }
}

/* ── Contacto en la portada ────────────────────────────────────
   Los correos van debajo de la ficha de cliente, proveedor, fecha y
   estado, que es donde el cliente ya busca a quién responderle. En la
   barra superior quedaban a un clic de cerrarla y a 1280px se cortaban.

   Misma retícula que la ficha: etiqueta a la izquierda, valor a la
   derecha. El papel de cada correo va en cuerpo chico bajo la dirección,
   porque "mauricio.lezama@odysea.tech" no dice si es para la parte técnica
   o para la comercial. */

.prop-cover-contact {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--p-s-4) var(--p-s-4);
  align-items: baseline;
  max-width: 520px;
  margin-top: var(--p-s-5);
  padding-top: var(--p-s-6);
  border-top: 1px solid var(--p-line-soft);
}

.prop-cover-contact-label {
  grid-row: 1 / span 2;
  margin: 0;
}

/* La dirección en la tipografía de titular, como los valores de la ficha
   de arriba: es el mismo tipo de dato —un valor que hay que copiar— y
   tiene el mismo peso visual. */
.prop-cover-contact-mail {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  line-height: var(--p-lh-lead);
  color: var(--p-ink-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--p-ease);
}

.prop-cover-contact-mail:hover {
  color: var(--p-accent-ink);
}

.prop-cover-contact-role {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
  margin-top: calc(var(--p-s-1) * -1);
}

@media (max-width: 479px) {
  .prop-cover-contact { grid-template-columns: 1fr; gap: var(--p-s-1); }
  .prop-cover-contact-label { grid-row: auto; }
  .prop-cover-contact-role { margin-top: 0; }
}

.prop-cover-scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--p-s-3);
  margin-top: var(--p-s-5);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-ink-faint);
  animation: prop-bounce 2.4s ease-in-out infinite;
}

@keyframes prop-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* =============================================================
   14. Cadena de contexto / resumen
   -------------------------------------------------------------
   Los ocho componentes del contexto se pintan como .prop-pillars
   (tarjetas en rejilla), no con las clases .prop-chain-*: esas tres
   quedaron en display:none cuando la cadena paso a ser una fila de
   etapas, y el renderer habia cambiado de nombre sin que la hoja lo
   acompañara — de ahi que salieran pegados, "01Institución". */
   ============================================================= */

/* Los ocho pilares del Campus. Cuatro columnas fijas —no auto-fit: con ocho
   elementos auto-fit puede resolver en 3+3+2, y una fila de dos al final se
   lee como un resto, no como una rejilla— y con ellas el documento da dos
   filas de cuatro, que es la presentación pedida.

   El corte a 4 columnas no coincide con el del rail (992px) sino que sube a
   1280px, y es deliberado: entre 992 y 1280 el documento ya tiene el rail de
   280px y el ancho util es 0.85 de lo que queda, de modo que a 1200px de
   pantalla la rejilla mediría 183px por tarjeta y las descripciones se
   partian en cinco lineas. A 1280px la tarjeta mide 200px de texto, que es lo
   minimo para que "La estructura académica sobre la que se construye todo"
   quepa en tres lineas. */
.prop-pillars {
  display: grid;
  grid-template-columns: 1fr;
  /* 24px, igual que el padding de la tarjeta (20px). Con 16 de hueco las
     ocho quedaban pegadas: el hueco de fuera era menor que el de dentro y el
     borde se leia como parte de la tarjeta vecina. Misma razon y mismo valor
     que las demas rejillas del documento — la separacion va en un solo `gap`
     porque en horizontal y en vertical es la misma decision. */
  gap: var(--p-s-6);
  margin: var(--p-s-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .prop-pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .prop-pillars { grid-template-columns: repeat(4, 1fr); }
}

/* La tarjeta usa la primitiva de superficie del documento —fondo, borde y
   radio— y no una propia: si los pilares tienen un aspecto distinto de los
   beneficios o los modulos, el lector deja de ver una familia y empieza a ver
   cinco. Lo unico que los distingue es el numero. */
.prop-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
  min-width: 0;
  padding: var(--p-s-4);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
}

.prop-pillar:hover {
  border-color: var(--p-accent-soft);
  box-shadow: var(--p-shadow-card);
}

/* El numeral va en la misma primitiva de 40px que los beneficios y las fases,
   pero como texto suelto y no en una caja: dentro de una tarjeta pequena una
   caja de 40px se comia el ancho del rotulo y obligaba a las descripciones a
   partirse. */
.prop-pillar-n {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  color: var(--p-accent-ink);
}

.prop-pillar-label {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
}

/* La descripcion va al tamano del dato —14px— porque su papel es el mismo que
   el de una celda: accompanies al rotulo, no se lee como prosa. Es lo que
   permite que las ocho tarjetas tengan la misma altura sin que el texto se
   corte a mitad de palabra. */
.prop-pillar-desc {
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
}

/* Cierre de la cadena. Era otra caja —fondo hundido y radio— y quedava justo
   debajo de ocho tarjetas: nueve superficies followed en el mismo bloque, y la
   que resumia quedaba invisible entre las que solo enumeran. Ahora es prosa
   atenuada, con el ancho de lectura y el aire de un parrafo. */
.prop-chain-note {
  margin: var(--p-s-6) 0 0;
  max-width: var(--p-measure);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
}

/* =============================================================
   14b. Piezas del detalle de módulo
   -------------------------------------------------------------
   Los módulos declaran su contenido con piezas distintas según el módulo: un
   alcance en lista, un sub-bloque con título, verbos, papeles por rol, vistas,
   grupos con lista y grupos con párrafo. Estas reglas les dan a todas la
   misma forma de rejilla y la misma escala, de modo que abrir dos módulos
   seguidos no cambia la densidad de la página.

   El panel del módulo es una superficie plana con una filete arriba: las
   piezas de dentro no llevan borde propio. Con borde, un módulo con seis
   grupos producía seis cajas anidadas dentro de la caja del módulo, y el
   anidamiento iba a tres niveles en el punto del documento con más
   densidad.
   ============================================================= */

/* Entrada de una lista: "Los docentes podrán publicar:". */
.prop-cap {
  margin: 0 0 var(--p-s-3);
  font-family: var(--p-font-body);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  max-width: var(--p-measure);
}

/* Bloque con rótulo dentro del panel. El rótulo es una etiqueta en
   mayúsculas, la misma pieza que las de "Detalle por módulo" o "Indicadores",
   para que el panel se lea con el mismo diccionario que el resto. */
.prop-detail + .prop-detail,
.prop-detail + .prop-modgroups,
.prop-modgroups + .prop-detail,
.prop-detail + .prop-mod-result {
  margin-top: var(--p-s-5);
  padding-top: var(--p-s-6);
  border-top: 1px solid var(--p-line-soft);
}

.prop-detail--sub > .prop-h4,
.prop-detail-title {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0 0 var(--p-s-3);
}

/* Rejilla de tarjetas cortas. Sin borde: el rótulo del bloque ya separa. */
.prop-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--p-s-5);
}

.prop-tiles--two { grid-template-columns: repeat(2, 1fr); }
.prop-tiles--three { grid-template-columns: repeat(3, 1fr); }

.prop-tile {
  min-width: 0;
  padding: var(--p-s-4);
  background: var(--p-surface-alt);
  border-radius: var(--p-radius-sm);
}

.prop-tile-title {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0 0 var(--p-s-2);
}

@media (max-width: 899px) {
  .prop-tiles--three { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .prop-tiles--two,
  .prop-tiles--three { grid-template-columns: 1fr; }
}

/* Lista de notas al pie de un bloque. Se distingue del cuerpo por el
   marcador, no por un salto de escala: es la misma clase de dato que el
   resto del documento y bajar a 13px la haría ilegible en la impresión. */
.prop-notelist {
  margin: var(--p-s-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--p-s-3);
}

.prop-notelist-item {
  position: relative;
  padding-left: var(--p-s-5);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-sm);
  color: var(--p-ink-mute);
}

/* Antes este marcador pintaba con --p-line-strong, que no existe en la capa de
   tokens: la declaracion caia a transparent y el guion de las notas —"El
   estudiante podra consultar su propia informacion de asistencia"— salia sin
   indicador, indistinguible de un parrafo mas. Se usa el color de tinta
   atenuado, que es lo que el guion pretendia. */
.prop-notelist-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 1px;
  background: var(--p-ink-faint);
}

/* Comparativa incluido / ampliación del bloque de alcance. Dos filas
   apiladas: en vertical se leen como un par, que es lo que el cliente
   necesita decidir, y no como dos párrafos sueltos. */
.prop-vs {
  margin-top: var(--p-s-5);
  padding: var(--p-s-5);
  background: var(--p-surface-sunken);
  border-radius: var(--p-radius-sm);
}

.prop-vs-caption {
  margin: 0 0 var(--p-s-4);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-sm);
  color: var(--p-ink-mute);
}

.prop-vs-rows { display: grid; gap: var(--p-s-4); }

.prop-vs-row {
  display: grid;
  gap: var(--p-s-3);
  padding-left: var(--p-s-4);
  border-left: 2px solid var(--p-line);
}

.prop-vs-row--in { border-left-color: var(--p-accent); }

.prop-vs-tag {
  margin: 0;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-ink-mute);
}

.prop-vs-row--in .prop-vs-tag { color: var(--p-accent-ink); }

.prop-vs-text {
  margin: 0;
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  max-width: var(--p-measure);
}

/* La sección 15 —la lista en línea de los doce dominios del "reto", con
   .prop-domains y .prop-sysnode— se retiró al unificar el contexto:
   enumeraba lo mismo que los ocho pilares y con menos detalle. Sus reglas se
   van con ella, para que nadie las reutilice creyendo que todavía pintan
   algo. La comparativa es ahora la sección 15. */

/* =============================================================
   15. Comparativa
   ============================================================= */

.prop-compare { margin-top: var(--p-s-7); }

.prop-compare-head { margin-bottom: var(--p-s-5); }
.prop-compare-caption {
  margin: var(--p-s-2) 0 0;
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-sm);
  color: var(--p-ink-mute);
}

/* =============================================================
   17. Tablas
   -------------------------------------------------------------
   Cada columna declara su papel con un modificador de columna, no por su
   posicion. Antes `table()` marcaba toda columna distinta de la primera como
   `--num` —alineada a la derecha, con ancho minimo y en monoespaciada—, y eso
   aplicaba mal a tres de las cinco tablas: en la de alcance dejaba un numero
   de dos digitos ocupando 769px y el nombre del modulo 215px; en la de ficha
   componia "ICME — Instituto de Ciencias Medicas" en mono y a la derecha; en
   la de indicadores daba tratamiento numerico a dos columnas de texto.

   Los papeles disponibles:
     --col      primera columna: la etiqueta o el sujeto de la fila
     --col-text columna de texto corriente
     --col-num  columna de cifra: cifra corta, se ajusta a su contenido
     --col-mod  columna de referencia cruzada a otra seccion (modulos, fases)
   ============================================================= */

.prop-tablewrap {
  margin: var(--p-s-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
}

.prop-tablewrap--tight { margin: 0; }

/* El rotulo de la tabla es un <caption>, no un parrafo suelto: queda unido a
   lo que describe y se lee antes que el encabezado. Se compone como entradilla
   —la misma pieza que .prop-lead-p— para que la tabla tenga la misma entrada
   que el resto del documento. */
.prop-table-caption {
  caption-side: top;
  padding: var(--p-s-5) var(--p-s-5) var(--p-s-4);
  font-family: var(--p-font-body);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  text-align: left;
  max-width: var(--p-measure);
}

.prop-table {
  width: 100%;
  border-collapse: collapse;
  /* Las celdas de este documento casi nunca llevan cifras: llevan frases
     ("Un solo entorno comun y organizado", "Autoconsulta disponible en su
     Campus"). A 14px esas frases se leian como notas al pie de una hoja de
     calculo. La tabla sube al tamano del cuerpo y deja 14px para lo que si es
     dato: el encabezado y las columnas de cifra. */
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-sm);
}

.prop-table th,
.prop-table td {
  padding: var(--p-s-5) var(--p-s-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--p-line-soft);
}

/* Con el cuerpo a 17.6px las filas ya miden lo suficiente para que la guia sea
   unnecessary en cada linea: el separador pasa a la escala completa y la fila
   par se apoya en un fondo levissimo. Ese par es lo que sostiene la lectura en
   horizontal —en la tabla de alcance hay once filas y sin el, el ojo pierde la
   fila al pasar de "Duracion" a "Etapa"—. */
.prop-table tbody tr:nth-child(even) { background: var(--p-surface-alt); }

.prop-table tbody th,
.prop-table tbody td { border-bottom: 1px solid var(--p-line); }

/* El encabezado se puede partir en varias lineas. Con `nowrap` el rotulo
   "Con ICME — Instituto de Ciencias Medicas" media 363px y empujaba la
   tabla a 767px: por debajo de 1024px habia que arrastrar en horizontal para
   leerla. Que el rotulo envuelva es lo que permite que la tabla sea legible
   sin scroll en un portatil estrecho.
   Se queda en el tamano del dato —14px— aunque las celdas hayan subido al
   cuerpo: es la unica fila que no es contenido, y su funcion es indexar las
   columnas, no leerse. */
.prop-table thead th {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-ink-mute);
  background: var(--p-surface-sunken);
  white-space: normal;
  vertical-align: bottom;
}

.prop-table tbody th { font-weight: var(--p-weight-medium); color: var(--p-ink-strong); }
.prop-table tbody td { color: var(--p-ink-soft); }
.prop-table tbody tr:last-child th,
.prop-table tbody tr:last-child td { border-bottom: none; }

/* El hover ya no compite con la zebra: usa el tono de acento, que si distingue
   la fila activa de las de fondo. */
.prop-table tbody tr:hover th,
.prop-table tbody tr:hover td { background: var(--p-accent-wash); }

/* La columna que nombra la fila recibe un ancho minimo. Sin esto el navegador
   reparte el sobrante a partes iguales y en la tabla de comparacion la
   columna "Ubicacion de la informacion" se estrecha lo justo para partirse en
   tres lineas mientras la del modulo queda con medio ancho vacio. */
.prop-td--label,
.prop-th--label { min-width: 22ch; }

/* Celda base: los modificadores solo cambian alineacion, color o emphasis. */
.prop-th, .prop-td { color: var(--p-ink-soft); }

/* Columna de cifra: se ajusta a su contenido y no se parte. Es la unica
   columna con ancho minimo, para que un "[X semanas]" no imponga el ancho.
   Sigue en el tamano del dato porque un numero no crece con el cuerpo. */
.prop-th--num, .prop-td--num {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
}

/* Columna de referencia cruzada: el numero va en mono con su propio color,
   pero alineado a la izquierda y con el ancho del contenido. Es lo que
   arregla la tabla de alcance, donde el numero es el identificador de la
   fila y no una cifra. */
.prop-th--mod, .prop-td--mod {
  width: 1%;
  white-space: nowrap;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  color: var(--p-accent-ink);
}

/* La celda pendiente necesita mas cuerpo que una cifra para leerse al mismo
   peso, asi que anula las tres cosas que heredaba del papel de columna. */
.prop-td--num.prop-td--tbd,
.prop-td--mod.prop-td--tbd {
  text-align: left;
  white-space: normal;
  width: auto;
  font-family: var(--p-font-body);
  font-weight: var(--p-weight-medium);
}

.prop-th--before { color: var(--p-ink-mute); font-weight: var(--p-weight-normal); }
.prop-th--after { color: var(--p-ink-strong); font-weight: var(--p-weight-medium); }

.prop-td--row { font-weight: var(--p-weight-medium); color: var(--p-ink-strong); }
.prop-td--before { color: var(--p-ink-mute); }
.prop-td--after { color: var(--p-ink-strong); font-weight: var(--p-weight-medium); }

/* Celda pendiente. El texto va en --p-accent-ink y no en el naranja puro: el
   naranja del sistema sobre su propio wash da 2.9:1, por debajo del 4.5:1 que
   exige AA para texto normal. Este documento se imprime y se lee en PDF, donde
   no hay forma de suplir un texto que no se distingue del fondo. */
.prop-td--tbd {
  color: var(--p-accent-ink);
  font-weight: var(--p-weight-medium);
  background: var(--p-accent-wash);
}

/* No hay variantes de padding: las dos que existian fijaban --p-s-4 y/anulo el
   aumento del ritmo de fila, y ademas eran identicas entre si, de modo que la
   tabla de comparacion y la de indicadores se Highland-ban sin motivo. Todas
   las tablas respiran con el mismo padding del bloque base. */

/* Marcador pendiente. Va al tamano del dato que sustituye (14px), no a un
   .95em del contexto: ese em generaba cuatro tamanos fuera de la escala del
   proyecto —13.3, 19, 22.8 y 39.9px— segun dentro de que celda cayera. */
.prop-tbd {
  display: inline-block;
  padding: 0 var(--p-s-1);
  color: var(--p-accent-ink);
  background: var(--p-accent-wash);
  border: 1px solid var(--p-accent-soft);
  border-radius: var(--p-radius-sm);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  white-space: nowrap;
}

/* =============================================================
   18. Beneficios — el modulo con protagonismo
   -------------------------------------------------------------
   Es la seccion que el cliente busca primero, asi que se lee distinto al
   resto: cuatro tarjetas en rejilla de dos columnas sobre una banda clara,
   con el eje de negocio (ahorro, presencia, organizacion, crecimiento) en
   acento y por encima del titular. El resto del documento baja a una
   columna y el bloque "que aporta" va al pie, que es donde se mira despues.
   ============================================================= */

/* Es la unica seccion que se lee de otra manera: en lugar de una tarjeta mas,
   es una BANDA a sangre con reglas arriba y abajo. Antes era una tarjeta y las
   tarjetas de beneficios y de indicadores vivian dentro de ella, de modo que
   el documento acumulaba tres niveles de borde anidado y la jerarquia se
   perdia justo en la seccion mas importante. Una banda plana deja que las
   tarjetas de dentro sean el unico nivel de borde. */
.prop-sec--hero {
  padding: var(--p-s-10) 0;
  background: var(--p-surface);
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
}

.prop-sec--hero .prop-lead-p {
  font-size: var(--p-fs-lead);
  color: var(--p-ink-strong);
}

.prop-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--p-s-5);
  margin: 0;
  /* La numeración de cada beneficio va en su propia pastilla
     (.prop-benefit-n), no en el marcador de la lista: con las dos, cada
     beneficio sale "1. 01 Control". */
  list-style: none;
  padding: 0;
}

@media (min-width: 767px) {
  .prop-sec--hero .prop-benefits { grid-template-columns: 1fr 1fr; }
}

.prop-sec--hero .prop-benefit {
  display: flex;
  flex-direction: column;
  padding: var(--p-s-7);
  border-color: var(--p-line);
}

.prop-benefit-head {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-4);
  margin-bottom: var(--p-s-5);
}

.prop-benefit-headtext { min-width: 0; }

/* El eje es la etiqueta que el lector busca: va en acento y en el mono del
   proyecto, como las demas etiquetas, pero un grado por encima. */
.prop-benefit-axis {
  display: block;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  line-height: var(--p-lh-body);
  color: var(--p-accent-ink);
  margin: 0 0 var(--p-s-2);
}

.prop-benefit-head .prop-benefit-title { margin: 0; }

.prop-benefit-body {
  display: grid;
  gap: var(--p-s-3);
  flex: 1;
}

.prop-benefit-block {
  padding: var(--p-s-4);
  background: var(--p-surface-alt);
  border: 1px solid var(--p-line-soft);
  border-radius: var(--p-radius-sm);
}

/* El bloque de la ganancia va en verde y el del punto de partida se queda en
   neutro. Es el mismo criterio con el que el acento marca lo pendiente —el
   [POR DEFINIR] de una celda— y el neutro marca lo informativo: el color
   dice qué clase de frase es, sin depender del rótulo. */
.prop-benefit-block--effect {
  background: var(--p-surface-sunken);
  border-color: var(--p-gain-line);
}

.prop-benefit-label { margin-bottom: var(--p-s-2); }

/* El resultado esperado y el entregable son el cierre del bloque: su
   etiqueta va en acento para que se lea como resumen. La del beneficio que
   va en verde porque comparte bloque con la ganancia. */
.prop-benefit-block--effect .prop-benefit-label,
.prop-mod-result .prop-modresult-label,
.prop-phase-deliver .prop-modresult-label { color: var(--p-accent-ink); }

.prop-benefit-block--effect .prop-benefit-label { color: var(--p-ink-mute); margin-bottom: var(--p-s-2); }

.prop-benefit-block--effect .prop-benefit-text { margin-bottom: var(--p-s-3); }
.prop-benefit-text {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0;
}

/* Como se lee la tarjeta: el efecto en acento suave arriba, el como debajo en
   tono neutro, y los dos pies —limite y modulos— en el mismo mono pequeno
   para que no compitan con el texto de arriba. */
.prop-benefit-block--effect {
  order: -1;
}

.prop-benefit-indicator {
  margin: var(--p-s-6) 0 0;
  padding-top: var(--p-s-5);
  border-top: 1px solid var(--p-line-soft);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
}

.prop-benefit-indicator-k {
  display: block;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  line-height: var(--p-lh-body);
  color: var(--p-ink-faint);
  margin-bottom: var(--p-s-2);
}

.prop-benefit-boundary {
  margin: var(--p-s-6) 0 0;
  padding: var(--p-s-3) var(--p-s-5);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
  background: var(--p-surface-sunken);
  border-left: 2px solid var(--p-line);
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0;
}

.prop-benefit-mods {
  margin: var(--p-s-6) 0 0;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-faint);
}

/* =============================================================
   19. Árbol de estructura académica
   Una columna de niveles con rail vertical; los hijos se sangran
   dentro del nivel padre. Todo con las mismas metricas de tarjeta.
   ============================================================= */

.prop-tree {
  list-style: none;
  padding: 0;
  margin: var(--p-s-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
}

.prop-tree-node { position: relative; }

/* El rail: una sola linea continua por los niveles hermanos. */
.prop-tree-node::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: calc(var(--p-s-3) * -1);
  width: 1px;
  background: var(--p-line);
}

.prop-tree-node:last-child::before { display: none; }

.prop-tree-row {
  display: flex;
  align-items: center;
  gap: var(--p-s-4);
  padding: var(--p-s-3) var(--p-s-5);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
}

/* El nivel vive dentro de un sub-bloque con su propio h3, asi que aqui
   corresponde un h4: el arbol cuelga de ese titulo, no es hermano suyo. */
.prop-tree-label {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-normal);
  line-height: var(--p-lh-title);
  color: var(--p-ink-strong);
  margin: 0;
  min-width: 0;
}

.prop-tree-children {
  list-style: none;
  padding: 0 0 0 var(--p-indent);
  margin: var(--p-s-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
}

.prop-tree-child {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--p-s-3) var(--p-s-5);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-sm);
  color: var(--p-ink-soft);
  background: var(--p-surface-alt);
  border: 1px solid var(--p-line-soft);
  border-radius: var(--p-radius-sm);
}

.prop-tree-child::before {
  content: '';
  position: absolute;
  left: calc(var(--p-indent) * -1 + 8px);
  top: 50%;
  width: calc(var(--p-indent) - 16px);
  height: 1px;
  background: var(--p-line);
  transform: translateY(-50%);
}

/* =============================================================
   20. Módulos (acordeón)
   ============================================================= */

.prop-modshead { margin: var(--p-s-8) 0 var(--p-s-5); }
.prop-modshead-hint {
  margin: var(--p-s-2) 0 0;
  font-size: var(--p-fs-sm);
  color: var(--p-ink-mute);
}

.prop-mods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
}

.prop-mod {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
  transition: border-color var(--p-ease), box-shadow var(--p-ease);
}

.prop-mod:hover { border-color: var(--p-platinum); }
.prop-mod.is-open { border-color: var(--p-accent-soft); box-shadow: var(--p-shadow-hair); }

.prop-mod-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--p-s-4);
  padding: var(--p-s-5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background var(--p-ease);
}

.prop-mod-trigger:hover { background: var(--p-surface-alt); }
.prop-mod-trigger[aria-expanded="true"] { background: var(--p-surface-alt); }
.prop-mod-trigger:focus-visible { outline-offset: -2px; }

/* Mismas metricas que la primitiva de numeral; el estado cerrado es
   neutro y solo al abrir pasa a acento. */
.prop-mod-n {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  border-radius: var(--p-radius-sm);
  background: transparent;
  border: 1px solid var(--p-line);
  color: var(--p-ink-mute);
  transition: background var(--p-ease), border-color var(--p-ease), color var(--p-ease);
}

.prop-mod-trigger[aria-expanded="true"] .prop-mod-n {
  background: var(--p-accent);
  border-color: var(--p-accent);
  color: var(--p-on-accent);
}

.prop-mod-titles { flex: 1; min-width: 0; }
.prop-mod-name { display: block; margin: 0 0 var(--p-s-1); }

.prop-mod-strap {
  display: block;
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-sm);
  color: var(--p-ink-mute);
}

.prop-mod-cue {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-ink-faint);
  transition: transform var(--p-ease);
}

.prop-mod-cue::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.prop-mod-trigger[aria-expanded="true"] .prop-mod-cue {
  color: var(--p-accent);
  transform: rotate(180deg);
}

.prop-mod-panelwrap {
  padding: var(--p-s-6) var(--p-s-5) var(--p-s-5);
  border-top: 1px solid var(--p-line-soft);
  animation: prop-panel-open 200ms ease-out;
}

@keyframes prop-panel-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Grupos de un módulo. Rejilla de dos columnas para que abrir un módulo con
   seis grupos no produzca una columna de seis cajas, y cada grupo se apoya en
   un fondo tenue en vez de un borde: el módulo ya es una superficie con
   filete, así que un borde por grupo metía el anidamiento a tres niveles. */
.prop-modgroups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--p-s-5);
}

@media (max-width: 767px) {
  .prop-modgroups { grid-template-columns: 1fr; }
}

.prop-modgroup {
  min-width: 0;
  padding: var(--p-s-5);
  background: var(--p-surface-alt);
  border-radius: var(--p-radius-sm);
}

.prop-modgroup-title { margin-bottom: var(--p-s-3); }

.prop-mod-result {
  margin-top: var(--p-s-5);
  padding: var(--p-s-5);
  background: var(--p-accent-wash);
  border: 1px solid var(--p-accent-soft);
  border-radius: var(--p-radius-sm);
}

.prop-modresult-label { margin-bottom: var(--p-s-2); }

.prop-modresult-text {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink);
  margin: 0;
  max-width: 68ch;
}

/* =============================================================
   21. Listas
   Un unico ritmo para check, minus y planas: mismo sangrado, mismo
   interlineado, mismo marcador. Solo cambia el glifo.
   ============================================================= */

.prop-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* El ritmo sale de un solo sitio. Antes cada <li> llevaba --p-s-1 de padding
     vertical *y* la lista --p-s-2 de gap: los items quedaban a 18px, un valor
     que no esta en ninguna escala y que hacia que dos listas del mismo
     documento no alinearan entre si. */
  gap: 0;
}

.prop-list--tight { gap: 0; }

.prop-list-item,
.prop-list--check li,
.prop-list--minus li {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-3);
  padding: calc(var(--p-s-1)*.5) 0;
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  max-width: var(--p-measure);
}

.prop-list-item { color: var(--p-ink-soft); }
.prop-list--wide .prop-list-item { max-width: none; }

/* Marcador sin caja. Antes cada item —y hay listas de once— llevaba un cuadro
   de 24px con borde y fondo: once cuadros seguidos se leian como once
   botones, y el peso visual pasaba a estar en la lista en vez de estar en lo
   que la lista enumera. Ahora el marcador es un glifo sobre una columna de
   ancho fijo: el sangrado sigue siendo el mismo —y por eso las lineas siguen
   alineadas— pero la lista deja de gritar. */
.prop-list--check li::before,
.prop-list--minus li::before {
  flex-shrink: 0;
  width: var(--p-s-6);
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--p-font-mono);
  line-height: var(--p-lh-body);
}

.prop-list--check li::before {
  content: '✓';
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  color: var(--p-accent-ink);
}

.prop-list--minus li::before {
  content: '–';
  font-size: var(--p-fs-body);
  color: var(--p-ink-faint);
}

/* =============================================================
   22. Experiencia por usuario
   ============================================================= */

.prop-xcol { padding: var(--p-s-6); }
.prop-xcol-role { margin-bottom: var(--p-s-4); }

/* =============================================================
   23. Arquitectura (capas)
   ============================================================= */

.prop-layer {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-5);
  padding: var(--p-s-6);
}

.prop-layer-body { flex: 1; min-width: 0; }
.prop-layer-name { margin-bottom: var(--p-s-2); }

.prop-layer-text {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0;
}

/* =============================================================
   24. Metodología (fases)
   ============================================================= */

.prop-phases {
  list-style: none;
  padding: 0;
  margin: var(--p-s-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
}

.prop-phase {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-5);
  padding: var(--p-s-5);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
}

.prop-phase-body { flex: 1; min-width: 0; }
.prop-phase-name { margin-bottom: var(--p-s-2); }

/* La pastilla de la fase mide 40×40 porque su contenido siempre ha sido un
   numeral de dos caracteres ("01", "02"). "Etapa 1" no cabe: se partía en dos
   renglones y el segundo salía por debajo del borde, con el número descolgado
   de la caja.
   Esta variante deja que la pastilla mida lo que necesita su contenido en vez
   de recortar la etiqueta, conservando la misma altura y el mismo lenguaje
   visual. `min-width` mantiene el ancho de la pastilla-numeral, así que un
   "01" se ve exactamente igual que antes y solo crece cuando el texto lo pide. */
.prop-phase-n--tag {
  width: auto;
  min-width: 40px;
  padding: 0 var(--p-s-3);
  white-space: nowrap;
}

/* En vertical la pastilla se alinea con el borde superior del título y no
   debe dejar un hueco de 40px a su izquierda cuando es más ancha. */
@media (max-width: 767px) {
  .prop-phase-n--tag { align-self: flex-start; }
}

.prop-phase-obj {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0;
  max-width: 68ch;
}

.prop-phase-more {
  margin-top: var(--p-s-4);
  padding-top: var(--p-s-5);
  border-top: 1px solid var(--p-line-soft);
}

.prop-phase-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-s-3);
  width: 100%;
  padding: var(--p-s-1) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-accent-ink);
  text-align: left;
  list-style: none;
  transition: color var(--p-ease);
}

.prop-phase-summary::-webkit-details-marker { display: none; }
.prop-phase-summary:hover { color: var(--p-ink-strong); }
.prop-phase-summary:focus-visible { outline-offset: 4px; }

.prop-phase-summary::after {
  content: '';
  flex-shrink: 0;
  margin-left: var(--p-s-3);
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--p-ease);
}

.prop-phase-more[open] .prop-phase-summary::after { transform: rotate(180deg); }

.prop-phase-more .prop-list,
.prop-phase-more .prop-phase-deliver { margin-top: var(--p-s-4); }

.prop-phase-deliver {
  padding: var(--p-s-4) var(--p-s-5);
  background: var(--p-accent-wash);
  border: 1px solid var(--p-accent-soft);
  border-radius: var(--p-radius-sm);
}

.prop-phase-deliver .prop-modresult-text { margin: 0; }

/* Precio y plazo de cada fase.
 *
 * Van juntos y encima del objetivo porque son las dos únicas cosas de una
 * fase que permiten decidir sin seguir leyendo. El precio va en el cuerpo de
 * la cifra y el plazo en el cuerpo del texto: uno es dinero y el otro es
 * calendario, y en un documento comercial no se leen igual. */
.prop-phase-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--p-s-2) var(--p-s-4);
  margin: 0 0 var(--p-s-3);
}

.prop-phase-term {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  letter-spacing: var(--p-ls-label);
  color: var(--p-accent-ink);
}

/* El total de la plataforma, al cierre de la línea de fases. No va en una
 * caja grande: es una suma, y la forma correcta de mostrar una suma es una
 * línea con la cifra alineada, como en el resto del documento. */
.prop-phase-total {
  margin-top: var(--p-s-5);
  padding-top: var(--p-s-5);
  border-top: 1px solid var(--p-line);
}

.prop-phase-total-value {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h3);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0;
}

@media (max-width: 767px) {
  .prop-phase { flex-direction: column; gap: var(--p-s-4); }
}

/* =============================================================
   25. Cronograma / pares clave-valor
   ============================================================= */

.prop-kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--p-s-3) var(--p-s-6);
  margin: 0 0 var(--p-s-6);
}

.prop-kv-row { display: contents; }
.prop-kv-k { margin: 0; }

.prop-kv-v {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  color: var(--p-ink-strong);
  margin: 0;
}

@media (max-width: 479px) {
  .prop-kv { grid-template-columns: 1fr; gap: var(--p-s-1) 0; }
  .prop-kv-row { display: block; padding: var(--p-s-3) 0; border-bottom: 1px solid var(--p-line-soft); }
  .prop-kv-k { margin-bottom: var(--p-s-1); }
}

/* =============================================================
   26. Sub-bloques
   ============================================================= */

.prop-sub { padding: var(--p-s-7); }

/* Separación entre sub-bloques de una misma sección. Antes cada uno de los
   trece bloques era una sección y el aire lo ponía el padding de sección; al
   agruparlos bajo "Producto" quedan ocho tarjetas consecutivas, y sin este
   margen se leen como una sola pila. 48px es el salto justo para que cada
   encabezado se separe del bloque anterior sin perder el sentido de que todos
   pertenecen a la misma sección. */
.prop-sub--divider { margin-top: var(--p-s-7); }
.prop-sub--compact { padding: var(--p-s-6); }
.prop-sub--last { border-bottom: none; }

.prop-sub-strap {
  margin: 0 0 var(--p-s-4);
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-lead);
  line-height: var(--p-lh-title);
  color: var(--p-ink);
}

/* =============================================================
   27. Inversión
   =============================================================

   El apartado financiero es texto alineado a la izquierda: una fila de
   etiqueta y cifra, y otra fila por concepto de pago. Sin bloques, sin
   rejilla, sin centrar.

   Lo que había antes —el total en una caja con la cifra a 42px centrada y
   los pagos en tres tarjetas— era el diseño de una landing, no el de una
   propuesta. En un documento comercial el dinero se lee en la línea y la
   jerarquía la dan las palabras, no el cuerpo de la cifra. Y el total es un
   marcador pendiente ("S/ [MONTO]"): en 42px y centrado se leía como un
   error de plantilla en lugar de como un monto por confirmar. */

.prop-money {
  margin: var(--p-s-6) 0 0;
}

.prop-money-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p-s-5);
  padding: var(--p-s-3) 0;
  border-bottom: 1px solid var(--p-line-soft);
}

.prop-money-row:last-child {
  border-bottom: 0;
}

/* La etiqueta lleva el peso; la cifra se alinea a la derecha para que las
   de los distintos apartados formen una columna y se comparen de un
   vistazo, que es de lo que se trata en un cuadro de pagos. */
.prop-money-label {
  color: var(--p-ink-soft);
}

.prop-money-value {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h4);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-ink-strong);
  margin: 0;
  white-space: nowrap;
  text-align: right;
}

/* Una cifra por confirmar no se compone como una cifra. La fila se baja al
   cuerpo y a la tipografía del proyecto, con tinta tenue: el total deja de
   gritar y a la vez se ve que está por definirse. El chip de .prop-tbd que
   envuelve al placeholder hace el resto del trabajo. */
.prop-money-row.is-pending .prop-money-value {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-normal);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-mute);
}

.prop-money-row.is-pending .prop-money-label {
  color: var(--p-ink-mute);
}

/* Un bloque por producto dentro del apartado de inversión.
 *
 * Plataforma, web y publicidad se cotizan por separado y se compran por
 * separado, así que no pueden leerse como las filas de una misma lista: cada
 * uno es una decisión de compra y necesita su rótulo y su tabla. La separación
 * es horizontal (una regla entre bloques), no cajas: son apartados del mismo
 * apartado, no tarjetas distintas. */
.prop-inversion-block {
  margin-top: var(--p-s-5);
  padding-top: var(--p-s-5);
  border-top: 1px solid var(--p-line-soft);
}

.prop-inversion-block > .prop-modgroup-title {
  margin-bottom: var(--p-s-3);
}

/* =============================================================
   28. Evolución / reglas
   ============================================================= */

/* La tarjeta de evolución baja a 20px de padding. Con seis en paralelo, los
   24px de la primitiva arrastraban espacio en las tres dimensiones —el
   bloque creció en las dos filas— sin aportar nada: el título y sus cuatro
   los items caben igual y con el mismo aire alrededor. */
.prop-evogrp { padding: var(--p-s-5); }

/* El título de la tarjeta y su lista van más pegados que en las otras
   tarjetas. Aquí el título es el nombre de una capacidad —"Biblioteca"— y la
   lista son sus cuatro piezas, no dos bloques de texto independientes: el
   espacio de 12px los separaba como si lo fueran. */
.prop-evogrp-title { margin-bottom: var(--p-s-2); }

/* ─── Servicios adicionales ──────────────────────────────────
   Tarjetas de la carencia → servicio. La diferencia con las demás
   rejillas del documento está en el orden de las tres piezas: primero lo que
   falta, después el nombre del servicio, después el cuerpo. En el resto de
   las tarjetas el título abre; aquí abre la carencia, porque es lo que el
   cliente reconoce como suyo y lo que hace que siga leyendo. */

/* ── Servicios adicionales: prosa, no catálogo ─────────────────
   Eran tarjetas en rejilla de dos columnas. Con dos servicios —sitio web y
   correo institucional— la rejilla solo servía para dipingir dos textos
   cortos en cajas, y labgcolor los hacía parecer un módulo del Campus
   cuando justamente no lo son: se cotizan aparte.

   Ahora es una lista de apartados separados por una regla: el nombre del
   servicio es el titular, con el tamaño de un subtítulo de sección, y el
   hueco que cubre va debajo como línea de apoyo. El titular manda porque
   es lo que el cliente tiene que leer para decidir si le sirve. */

.prop-addons {
  margin-top: var(--p-s-5);
}

.prop-addon + .prop-addon {
  margin-top: var(--p-s-5);
  padding-top: var(--p-s-6);
  border-top: 1px solid var(--p-line-soft);
}

.prop-addon-title {
  margin: 0 0 var(--p-s-2);
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-h3);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-title);
  letter-spacing: var(--p-ls-m);
  color: var(--p-accent-ink);
}

.prop-addon-gap {
  margin: 0 0 var(--p-s-3);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  color: var(--p-ink-mute);
}

/* El cuerpo va al tamaño de la prosa, no en cuerpo chico como estaba en la
   tarjeta: en una caja de 300px el cuerpo chico era legible; a lo ancho de
   la columna, el mismo texto en 14px se leía como letra de nota al pie. */
.prop-addon-body {
  margin: 0;
  max-width: var(--p-measure);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
}

.prop-rules {
  list-style: none;
  padding: 0;
  margin: var(--p-s-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--p-s-3);
}

.prop-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-3);
  padding: var(--p-s-4) var(--p-s-5);
  background: var(--p-surface-alt);
  border: 1px solid var(--p-line-soft);
  border-radius: var(--p-radius-sm);
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
}

.prop-rule::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--p-accent);
}

/* =============================================================
   29. Cierre / próximos pasos / firma
   ============================================================= */

.prop-forwho { gap: var(--p-s-3); }
.prop-forwho li { display: flex; align-items: center; gap: var(--p-s-4); }

.prop-step {
  display: flex;
  align-items: flex-start;
  gap: var(--p-s-4);
  padding: var(--p-s-5);
}

.prop-step-body { flex: 1; min-width: 0; }
.prop-step-title { margin-bottom: var(--p-s-1); }

.prop-step-text {
  font-size: var(--p-fs-body);
  line-height: var(--p-lh-body);
  color: var(--p-ink-soft);
  margin: 0;
}

.prop-closing {
  padding: var(--p-s-9) var(--p-s-7);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  margin-top: var(--p-s-8);
  text-align: center;
}

.prop-closing-title {
  margin: 0 auto var(--p-s-5);
  max-width: 30ch;
}

.prop-closing-p {
  font-size: var(--p-fs-lead);
  line-height: var(--p-lh-lead);
  color: var(--p-ink-soft);
  max-width: 56ch;
  margin: 0 auto var(--p-s-4);
}

.prop-sign {
  margin-top: var(--p-s-8);
  padding-top: var(--p-s-5);
  border-top: 1px solid var(--p-line-soft);
  max-width: 320px;
  margin-inline: auto;
  text-align: left;
}

.prop-sign-line {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-mute);
  margin: 0;
}

/* =============================================================
   30. Notas
   ============================================================= */

.prop-note {
  margin: var(--p-s-6) 0 0;
  padding: var(--p-s-4) var(--p-s-5);
  background: var(--p-surface-sunken);
  border-radius: var(--p-radius-sm);
  font-size: var(--p-fs-sm);
  line-height: var(--p-lh-body);
  color: var(--p-ink-mute);
}

.prop-note--tight { margin-top: var(--p-s-4); font-size: var(--p-fs-sm); }

.prop-ficha { margin-top: var(--p-s-5); }

/* =============================================================
   31. Sidebar movil (bottom sheet)
   ============================================================= */

.prop-sidebar-toggle { display: none; }

@media (max-width: 899px) {
  /* El documento usa 85% de ancho, pero la hoja lateral y el toggle siguen
     midiendo con el gutter: en movil vuelve a 20px. */
  #prop-app { --p-gutter: 20px; }

  .prop-sidebar {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--p-ease), visibility var(--p-ease);
  }

  .prop-sidebar.is-open { opacity: 1; visibility: visible; }

  .prop-sidebar__backdrop {
    position: absolute;
    inset: 0;
    background: var(--p-scrim);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--p-ease);
  }

  .prop-sidebar.is-open .prop-sidebar__backdrop { opacity: 1; }

  .prop-sidebar__panel {
    position: relative;
    /* Por encima del backdrop, que va despues en el DOM y, como los dos estan
       posicionados, de otro modo tapaba el panel entero: el menu se abria y no
       dejaba pulsar ni un enlace ni el cerrar. El backdrop sigue siendo
       pulsable en la franja de arriba, que es justo donde esta el panel. */
    z-index: 1;
    margin-top: auto;
    max-height: 78vh;
    background: var(--p-surface);
    border-radius: var(--p-radius) var(--p-radius) 0 0;
    box-shadow: var(--p-shadow-float);
    padding: var(--p-s-5) var(--p-gutter) var(--p-s-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform var(--p-dur-sheet) var(--p-ease-sheet);
  }

  .prop-sidebar.is-open .prop-sidebar__panel { transform: translateY(0); }
  .prop-sidebar__close { display: flex; }

  .prop-sidebar-toggle {
    position: fixed;
    bottom: var(--p-s-6);
    left: var(--p-gutter);
    width: auto;
    height: 48px;
    padding: 0 var(--p-s-5);
    display: inline-flex;
    align-items: center;
    gap: var(--p-s-3);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    border-radius: var(--p-radius-pill);
    box-shadow: var(--p-shadow-float);
    cursor: pointer;
    z-index: 40;
    transition: transform var(--p-ease), border-color var(--p-ease);
  }

  .prop-sidebar-toggle:hover { border-color: var(--p-accent); }

  .prop-sidebar-toggle-label {
    font-family: var(--p-font-mono);
    font-size: var(--p-fs-sm);
    font-weight: var(--p-weight-medium);
    letter-spacing: var(--p-ls-label);
    text-transform: uppercase;
    color: var(--p-ink-strong);
  }

  .prop-sidebar-toggle[aria-expanded="true"] { transform: scale(.96); }

  .prop-main { padding-bottom: calc(var(--p-s-10) + 72px); }
}

/* =============================================================
   32. Estados
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  #prop-app *,
  #prop-app *::before,
  #prop-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================
   33. Impresión — el documento, no la página
   -------------------------------------------------------------
   El papel no es el sitio. La hoja anterior intentaba reproducir el diseño
   web: conservaba las rejillas de tres columnas, las tarjetas con su borde y
   su radio, la banda del bloque de beneficios, el fondo del encabezado de
   tabla y la marca de "Confidential" en la barra. El resultado era un PDF que
   se leía como una captura de pantalla partida en hojas, no como un
   documento: el contenidoRhueco depended de que el lector entendiera la
   interfaz, y el que no la conhece leía cajas sin jerarquía.

   Aquí el documento se imprime en un solo flujo de texto. Se apaga toda la
   superficie —bordes, fondos, radios, sombras, estados hover— porque en papel
   solo delimitan, no explican. Y todas las rejillas vuelven a flujo, porque
   una tarjeta al lado de otra es una relación visual que el papel no puede
   sostener: leída en vertical, no dice nada.

   Sobreviven tres cosas: la jerarquía tipográfica, el orden del DOM —que ya
   es el orden de lectura— y las tablas, que son datos tabulares y en un
   documento se leen como tablas.
   ============================================================= */

/* =============================================================
   Vista de propuesta: fuera la barra del sitio
   =============================================================

   Dentro del documento no hay barra de navegación del sitio: la
   navegación es el índice lateral, y una barra que ofrece "Inicio",
   "Synapse" o "Solicita una propuesta" saca al cliente de la propuesta
   sin querer. El botón de "Acceso cliente" además ya no tiene sentido
   —el acceso ya se validó— y lo sustituye "Cerrar sesión".

   El aviso va en <html> y no se quita el nodo del DOM: así el espacio
   que ocupaba la barra se recupera en la misma pasada, sin parpadeo, y
   cerrar sesión devuelve la pantalla de acceso sin recargar. Antes
   login.js vaciaba .nav-content, lo que dejaba .nav-menu-2 y
   .nav-background puestos: el overlay gris sin menú. */

html.prop-ready .page-nav-header,
html.prop-ready .menu-blur,
html.prop-ready .z-index-dv {
  display: none;
}

/* Específicamente sobre #prop-app: --p-nav-h vive ahí (ID, especificidad
   100) y una regla sobre html no llegaría a pisarlo. Al quedar en 0, la
   barra de la propuesta sube a top:0 y el contenido recupera los 70px. */
html.prop-ready #prop-app {
  --p-nav-h: 0px;
}

/* ── Flujo ────────────────────────────────────────────────────
   Una cadena de pasos relacionados en una sola línea: "Alumno →
   Matrícula → Pago → Caja → Reporte". La flecha es la relación, así que la
   cadena no lleva numeración: un 01 delante de "Alumno" sugería que el alumno
   es el primer paso de algo, cuando lo que dice es que el pago alimenta a la
   caja. Numerar y poner flecha además repetía dos veces la misma idea.
   ───────────────────────────────────────────────────────────── */

.prop-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-s-2) var(--p-s-3);
  /* Margen abajo además del de arriba: los tres flujos van seguidos y sin él
     el rótulo del siguiente se pegaba a la cadena anterior. */
  margin: var(--p-s-4) 0 var(--p-s-6);
  padding: 0;
  list-style: none;
}

.prop-flow-step {
  font-family: var(--p-font-heading);
  font-size: var(--p-fs-body);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-lh-body);
  color: var(--p-ink-strong);
  /* El paso es la unidad: no debe partirse a mitad de palabra ni dejar la
     flecha colgando al final de una línea. */
  white-space: nowrap;
}

/* La flecha vive como pseudo-elemento del paso, no como un <li> propio: así no
   ocupa hueco en el flujo cuando la cadena se parte, y no hay que decidir en
   el render si el paso es el último. */
.prop-flow-step + .prop-flow-step::before {
  content: "→";
  margin-right: var(--p-s-3);
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-normal);
  color: var(--p-accent);
}

/* En vertical la flecha tiene que pasar a apuntar hacia abajo: es la misma
   cadena leída en otro eje, no una lista nueva. */
@media (max-width: 767px) {
  .prop-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--p-s-3);
    margin-bottom: var(--p-s-5);
  }

  .prop-flow-step {
    display: flex;
    align-items: baseline;
    gap: var(--p-s-3);
  }

  .prop-flow-step + .prop-flow-step::before {
    content: "↓";
    margin-right: 0;
  }
}

/* ── Cerrar sesión ──────────────────────────────────────────── */

.prop-btn--logout {
  color: var(--p-ink-mute);
}

.prop-btn--logout:hover {
  border-color: var(--p-accent);
  color: var(--p-accent-ink);
}

@media (max-width: 767px) {
  /* "Cerrar sesión" no cabe con el ícono en móvil: se queda solo el
     ícono, que sigue siendo una acción posible sin leer la etiqueta. */
  .prop-btn--logout span { display: none; }

  .prop-btn--logout { padding: var(--p-s-2); }
}

/* =============================================================
   34. Rediseño Linear — capa de composición
   -------------------------------------------------------------
   Esta capa no cambia ni una palabra del documento: ajusta cómo se ven
   los componentes que ya emiten los renderizadores. Viene al final de la
   hoja (y antes de la impresión, que sigue mandando con !important) para
   ganar las batallas de especificidad/orden sin tocar las 3.5k líneas de
   arriba. Reutiliza los tokens canónicos --lin-* declarados en :root; el
   modo oscuro vive al final de esta misma capa.
   ============================================================= */

/* ── 1. Tipografía documental ────────────────────────────────
   Jerarquía por peso e interlineado, no por familia: todo es Google Sans Flex.
   h1/h2 en 600; la prosa en 400; las etiquetas bajan a 11px. */
.prop-h1,
.prop-h2 { font-weight: var(--p-weight-semibold); }

.prop-h3,
.prop-mod-name,
.prop-phase-name {
  font-weight: var(--p-weight-semibold);
}

.prop-benefit-title,
.prop-role-name,
.prop-xcol-role,
.prop-incl-title,
.prop-evogrp-title,
.prop-step-title,
.prop-layer-name,
.prop-modgroup-title,
.prop-compare-title,
.prop-sign-name,
.prop-tree-label,
.prop-tile-title,
.prop-detail--sub > .prop-h4,
.prop-detail-title {
  font-weight: var(--p-weight-semibold);
}

.prop-cover-sub,
.prop-closing-p { color: var(--p-ink-mute); }

.prop-cover-meta-dd,
.prop-cover-contact-mail { font-weight: var(--p-weight-medium); }

/* Etiquetas en mayúsculas → 11px, sin excepciones. */
.prop-eyebrow,
.prop-eyebrow--sm,
.prop-eyebrow--cover,
.prop-benefit-label,
.prop-modresult-label,
.prop-cover-contact-label,
.prop-cover-meta-dt,
.prop-topbar__badge,
.prop-benefit-axis,
.prop-benefit-indicator-k,
.prop-vs-tag,
.prop-addon-gap,
.prop-sign-line,
.prop-cover-scroll,
.prop-viewback__link,
.prop-sidebar-toggle-label,
.prop-topbar__provider,
.prop-phase-term,
.prop-phase-summary,
.prop-cover-contact-role {
  font-size: var(--p-fs-label);
}

/* ── 2. Numerales: de caja de color a chip neutro ──────────── */
.prop-benefit-n,
.prop-phase-n,
.prop-step-n,
.prop-layer-n,
.prop-tree-marker {
  background: var(--p-surface-alt);
  border: 1px solid var(--p-line);
  color: var(--p-ink-mute);
  font-size: var(--p-fs-label);
  border-radius: var(--p-radius-sm);
}

.prop-pillar-n { font-size: var(--p-fs-label); }
.prop-forwho-n { font-family: var(--p-font-body); font-size: var(--p-fs-sm); font-weight: var(--p-weight-medium); }

.prop-mod-n { background: transparent; }

.prop-mod-trigger[aria-expanded="true"] .prop-mod-n {
  background: var(--p-accent-wash);
  border-color: var(--p-accent-soft);
  color: var(--p-accent-ink);
}

/* ── 3. Tarjetas de primer nivel ─────────────────────────────
   #fafafa, borde #ececec, radio 10, sin sombra. */
.prop-pillar,
.prop-phase,
.prop-mod,
.prop-benefit,
.prop-role,
.prop-xcol,
.prop-incl,
.prop-evogrp,
.prop-layer,
.prop-tree-row,
.prop-closing {
  background: var(--lin-card);
  border: 1px solid var(--lin-border);
  border-radius: var(--p-radius);
  box-shadow: none;
}

.prop-tile,
.prop-rule,
.prop-step {
  background: var(--lin-card);
  border: 1px solid var(--lin-border);
  border-radius: var(--p-radius-sm);
  box-shadow: none;
}

.prop-benefit:hover,
.prop-role:hover,
.prop-xcol:hover,
.prop-incl:hover,
.prop-evogrp:hover,
.prop-layer:hover,
.prop-pillar:hover,
.prop-mod:hover {
  border-color: var(--p-line);
  box-shadow: none;
}

.prop-mod.is-open { border-color: var(--p-line); box-shadow: none; }

/* ── 4. Aplanado de bloques anidados ─────────────────────────
   Nada dentro de una tarjeta vuelve a ser una caja: se aplana sobre
   el fondo de su tarjeta y solo queda un filete a la izquierda. */
.prop-sub {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.prop-sub--compact { padding: 0; }
.prop-sub--last { border-bottom: none; }
.prop-sub + .prop-sub:not(.prop-sub--divider) { margin-top: var(--p-s-8); }

.prop-sub--divider {
  margin-top: var(--p-s-7);
  padding-top: var(--p-s-9);
  border-top: 1px solid var(--p-line-soft);
}

.prop-benefit-block {
  padding: 0 0 0 var(--p-s-5);
  background: none;
  border: none;
  border-left: 2px solid var(--p-line);
  border-radius: 0;
}

.prop-benefit-block--effect { border-left-color: var(--p-accent-ink); }

/* El rótulo de la ganancia apuntaba al verde que ya no existe: cae en
   el acento del documento. */
.prop-benefit-block--effect .prop-benefit-label,
.prop-phase-deliver .prop-modresult-label,
.prop-mod-result .prop-modresult-label { color: var(--p-accent-ink); }

.prop-usecase {
  background: none;
  border-radius: 0;
}

.prop-mod-result,
.prop-phase-deliver {
  margin-top: 0;
  padding: var(--p-s-2) 0 var(--p-s-2) var(--p-s-5);
  background: none;
  border: none;
  border-left: 2px solid var(--p-accent);
  border-radius: 0;
}

.prop-modgroup {
  background: none;
  border: none;
  border-radius: 0;
}

.prop-tree-child {
  background: none;
  border: none;
  border-radius: 0;
}

.prop-vs {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--p-s-5) 0;
}

/* La banda de la sección de beneficios deja de ser una banda: una
   sección más, separada por su propia regla. */
.prop-sec--hero {
  background: transparent;
  border-top: 1px solid var(--p-line-soft);
  border-bottom: none;
}

/* ── 5. Tablas ───────────────────────────────────────────────
   Sin contenedor: solo líneas horizontales. Encabezado en mono 11
   transparente, filas de una línea que encierran, cifras tabular. */
.prop-tablewrap {
  background: none;
  border: none;
  border-radius: 0;
}

.prop-table-caption {
  padding: 0 0 var(--p-s-4);
  color: var(--p-ink-mute);
}

.prop-table thead th {
  font-size: var(--p-fs-label);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-mute);
  background: none;
  font-weight: var(--p-weight-medium);
  border-bottom: 1px solid var(--p-line);
}

.prop-table th,
.prop-table td {
  padding: var(--p-s-4) var(--p-s-5);
  border-bottom: 1px solid var(--p-line-soft);
}

.prop-table tbody tr:nth-child(even),
.prop-table tbody tr:hover th,
.prop-table tbody tr:hover td {
  background: var(--p-surface-alt);
}

.prop-th--num,
.prop-td--num {
  font-family: var(--p-font-body);
  font-size: var(--p-fs-sm);
  font-weight: var(--p-weight-normal);
  font-variant-numeric: tabular-nums;
  color: var(--p-ink);
}

.prop-th--mod,
.prop-td--mod { font-size: var(--p-fs-label); }

.prop-table .prop-td--tbd {
  background: none;
  color: var(--p-accent-ink);
}

.prop-tbd {
  font-size: var(--p-fs-label);
  background: none;
  border-color: var(--p-line);
  color: var(--p-accent-ink);
}

/* ── 6. Inversión ────────────────────────────────────────────
   El dinero se lee en la línea, sin cajas. */
.prop-money-row { border-bottom-color: var(--p-line-soft); }

.prop-money-label {
  font-family: var(--p-font-body);
  font-size: var(--p-fs-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--p-weight-normal);
  color: var(--p-ink);
}

.prop-money-value { font-variant-numeric: tabular-nums; }

.prop-money-row:first-child .prop-money-label,
.prop-money-row:first-child .prop-money-value {
  font-weight: var(--p-weight-semibold);
}

.prop-kv-k {
  font-family: var(--p-font-body);
  font-size: var(--p-fs-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--p-weight-medium);
  color: var(--p-ink-mute);
}

.prop-addon-title { color: var(--p-ink-strong); }

/* ── 7. Notas ────────────────────────────────────────────────
   Nota al pie discreta: texto gris con filete, sin banda. */
.prop-note {
  padding: 0 0 0 var(--p-s-4);
  background: none;
  border-radius: 0;
  border-left: 2px solid var(--p-line);
  font-size: 13px;
  color: var(--p-ink-mute);
}

.prop-note--tight { margin-top: var(--p-s-3); }

/* ── 8. Topbar ───────────────────────────────────────────────
   56px blancos, un borde inferior y solo sombra con scroll. */
.prop-topbar {
  background: var(--lin-card);
  backdrop-filter: none;
  border-bottom: 1px solid var(--p-line);
}

.prop-topbar.scrolled { box-shadow: var(--p-shadow-hair); }
.prop-topbar__client { font-weight: var(--p-weight-medium); }
.prop-topbar__provider { color: var(--p-ink-faint); }

.prop-topbar__badge {
  background: none;
  border: 1px solid var(--p-line-soft);
  color: var(--p-ink-mute);
}

/* ── 9. Sidebar / índice ─────────────────────────────────────
   260px blancos; el índice con estado activo gris y las entradas a
   14px con número mono de ancho fijo. */
.prop-sidebar__header { padding-bottom: var(--p-s-3); }

.prop-sidebar__title {
  font-family: var(--p-font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: var(--p-ls-label);
  text-transform: uppercase;
  font-weight: var(--p-weight-medium);
  color: var(--p-ink-faint);
}

.prop-toc__list { gap: 2px; }

.prop-toc__group {
  margin-top: var(--p-s-5);
  padding: 0 var(--p-s-3);
  border-bottom: none;
  font-size: var(--p-fs-label);
  color: var(--p-ink-faint);
}

.prop-toc__list > .prop-toc__group:first-child { margin-top: 0; }

.prop-toc__link {
  padding: var(--p-s-1) var(--p-s-3);
  border-left: none;
  border-radius: var(--p-radius-sm);
}

.prop-toc__link.is-active {
  color: var(--p-ink-strong);
  font-weight: var(--p-weight-medium);
  border-left: none;
  background: var(--p-surface-alt);
}

.prop-toc__number {
  width: 26px;
  height: auto;
  background: none;
  border: none;
  font-size: var(--p-fs-label);
  letter-spacing: var(--p-ls-label);
  color: var(--p-ink-faint);
}

.prop-toc__link.is-active .prop-toc__number { color: var(--p-ink-faint); }
.prop-toc__link--view::after { font-size: var(--p-fs-label); }

.prop-sidebar__panel { background: var(--lin-card); }

/* ── 10. Botones ───────────────────────────────────────────── */
.prop-btn {
  font-family: var(--p-font-body);
  font-size: 14px;
  font-weight: var(--p-weight-medium);
  text-transform: none;
  letter-spacing: -.01em;
}

/* ── 11. Tres niveles tipográficos ────────────────────────────
   El documento completo usa solo tres tipos:
     · Título de sección (h1/h2)        — 600, cada uno en su tamaño.
     · Subtítulos (h3/h4 y títulos de
       tarjeta, bloque y fase)          — 600, 16px.
     · Cuerpo (párrafos, listas, notas,
       celdas de datos)                 — 400, 15px.
   Los rótulos mono de 11px (eyebrows y etiquetas) quedan fuera: son
   micro-tipografía de navegación, no contenido. */
.prop-h3,
.prop-mod-name,
.prop-phase-name,
.prop-benefit-title,
.prop-role-name,
.prop-xcol-role,
.prop-incl-title,
.prop-evogrp-title,
.prop-step-title,
.prop-layer-name,
.prop-modgroup-title,
.prop-compare-title,
.prop-sign-name,
.prop-tree-label,
.prop-tile-title,
.prop-forwho-n,
.prop-closing-title,
.prop-detail-title,
.prop-detail--sub > .prop-h4,
.prop-phase-total-value {
  font-size: 16px;
  font-family: var(--p-font-heading);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-m);
  line-height: var(--p-lh-title);
}

.prop-p,
.prop-lead-p,
.prop-cap,
.prop-mod-intro,
.prop-modresult-text,
.prop-benefit-text,
.prop-layer-text,
.prop-phase-obj,
.prop-closing-p,
.prop-cover-sub,
.prop-note,
.prop-list-item,
.prop-list--check li,
.prop-list--minus li,
.prop-flow-step,
.prop-tree-body,
.prop-role-body,
.prop-forwho-role,
.prop-incl-lead,
.prop-usecase-text {
  font-size: var(--p-fs-body);
  font-family: var(--p-font-body);
  font-weight: var(--p-weight-normal);
  line-height: var(--p-lh-body);
}

/* Las tablas no son prosa: sus datos bajan al cuerpo (15px, 400) y la
   primera columna deja de pintarse como rótulo en negrita. Solo queda en
   mono el encabezado de 11px. */
.prop-table tbody td,
.prop-table tbody th,
.prop-td--row,
.prop-th--after,
.prop-td--after,
.prop-money-label {
  font-weight: var(--p-weight-normal);
  font-family: var(--p-font-body);
  color: var(--p-ink);
}

/* El chip de fase venía de una caja 40×40 pensada para numerales ("01") y
   "Etapa 1"/"Etapa 4" se cortaba dentro del cuadrado. La caja pasa a medir
   lo que necesita su etiqueta: misma altura, ancho variable, una línea. */
.prop-phase-n {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--p-s-3);
  white-space: nowrap;
}

/* =============================================================
   35. Modo oscuro
   -------------------------------------------------------------
   Las mismas variables canónicas en la paleta oscura de Linear. Como
   toda la capa anterior lee de --lin-*/--p-*, el cambio es una sola
   remapeada.
   ============================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --lin-bg: #0f1112;
    --lin-canvas: #0d0e10;
    --lin-card: #17191c;
    --lin-row: #202226;
    --lin-border: #26272b;
    --lin-text: #e8eaed;
    --lin-text-strong: #ffffff;
    --lin-text-muted: #9c9ea6;
    --lin-accent: #ff7a5c;
    --lin-accent-ink: #ff9d82;
    --p-platinum: #26272b;
  }

  #prop-app {
    --p-page-a: var(--lin-canvas);
    --p-page-b: var(--lin-canvas);
    --p-page: var(--p-page-a);
    --p-surface: var(--lin-card);
    --p-surface-alt: var(--lin-row);
    --p-surface-sunken: var(--lin-row);
    --p-line: var(--lin-border);
    --p-line-soft: #1f2024;
    --p-ink: var(--lin-text);
    --p-ink-strong: var(--lin-text-strong);
    --p-ink-soft: var(--lin-text);
    --p-ink-mute: var(--lin-text-muted);
    --p-ink-faint: #9c9ea6cc;
    --p-accent: var(--lin-accent);
    --p-accent-ink: var(--lin-accent-ink);
    --p-accent-soft: rgba(255, 122, 92, .22);
    --p-accent-wash: rgba(255, 122, 92, .1);
    --p-scrim: #00000080;
    --p-glass: var(--lin-card);
  }

  body:has(.login-section) { background-color: #0f1112; }
}

@media print {
  @page {
    margin: 18mm 16mm;
  }

  /* ── 1. Fuera la interfaz ──────────────────────────────────
     La barra, el rail con el índice y el botón de navegación no existen en
     papel. El documento ya se recorre solo y el índice es lo único que
    _apagaría el espacio de la primera página. */
  .prop-sidebar,
  .prop-sidebar-toggle,
  .prop-topbar,
  .prop-cover-scroll,
  .prop-mod-cue,
  .prop-phase-summary::after,
  .prop-phase-summary::-webkit-details-marker {
    display: none !important;
  }

  /* ── 2. Los plegables, abiertos ───────────────────────────
     En un documento no hay nada que desplegar. El panel del módulo lo abre el
     atributo [hidden] del wrapper —el panel interior ya no lo lleva— y las
     actividades de cada fase viven en un <details> que, sin abrir, se
     perdía del PDF. Y el UA oculta lo que no es el resumen, así que hay que
     decirlo también para los hijos. */
  .prop-mod-panelwrap[hidden],
  .prop-phase-more[hidden] {
    display: block !important;
  }

  .prop-phase-more > *:not(summary) {
    display: block !important;
  }

  .prop-phase-summary {
    pointer-events: none;
    font-weight: var(--p-weight-normal);
    padding: 0;
    margin: 0 0 4pt;
  }

  /* ── 3. La superficie se apaga ────────────────────────────
     Cuarenta y pico selectores que en pantalla llevan borde, fondo o radio.
     En papel cada uno es una caja que hay que aprender a ignorar. */
  .prop-benefit,
  .prop-benefit-block,
  .prop-benefit-block--effect,
  .prop-benefit-boundary,
  .prop-benefit-n,
  .prop-closing,
  .prop-evogrp,
  .prop-incl,
  .prop-layer,
  .prop-inversion-block,
  .prop-mod,
  .prop-mod-n,
  .prop-mod-result,
  .prop-mod-trigger,
  .prop-modgroup,
  .prop-note,
  .prop-phase,
  .prop-phase-deliver,
  .prop-phase-n,
  .prop-phase-summary,
  .prop-phase-total,
  .prop-pillar,
  .prop-pillar-n,
  .prop-role,
  .prop-rule,
  .prop-step,
  .prop-step-n,
  .prop-sub,
  .prop-addon,
  .prop-addon-gap,
  .prop-tile,
  .prop-money-row,
  .prop-tree-child,
  .prop-tree-marker,
  .prop-usecase,
  .prop-usecase-label,
  .prop-vs,
  .prop-xcol,
  .prop-pillar-desc,
  .prop-addon-body {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* El triángulo del acordeón y los estados hover no existen en papel. */
  .prop-benefit:hover,
  .prop-evogrp:hover,
  .prop-incl:hover,
  .prop-layer:hover,
  .prop-pillar:hover,
  .prop-role:hover,
  .prop-mod:hover,
  .prop-mod.is-open,
  .prop-mod-trigger:hover,
  .prop-mod-trigger[aria-expanded="true"] {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* El fondo de la banda de beneficios y de la propia sección: en papel solo
     ensucian. Se conserva el filete del encabezado de sección, que sí separa. */
  #prop-app,
  .prop-sec--hero {
    background: #fff !important;
  }

  /* ── 4. El color deja de codificar ─────────────────────────
     El acento y el verde se usaban para distinguir "esto es una mejora" de
     "esto es el punto de partida". En un documento impreso en gris o en blanco
     y negro esa diferencia desaparece y solo queda como una palabra en un
     tono más claro. El texto se vuelve negro: lo que distingue es la
     estructura, no el tinte. */
  #prop-app,
  #prop-app .prop-eyebrow,
  #prop-app .prop-benefit-label,
  #prop-app .prop-benefit-boundary,
  #prop-app .prop-modresult-label,
  #prop-app .prop-money-label,
  #prop-app .prop-money-value,
  #prop-app .prop-kv-k,
  #prop-app .prop-kv-v,
  #prop-app .prop-money-value,
  #prop-app .prop-chain-note,
  #prop-app .prop-note,
  #prop-app .prop-usecase-label,
  #prop-app .prop-addon-gap,
  #prop-app .prop-vs-tag,
  #prop-app .prop-vs-text,
  #prop-app .prop-td,
  #prop-app .prop-th,
  #prop-app .prop-tbd,
  #prop-app .prop-phase-term,
  #prop-app .prop-table-caption {
    color: #000 !important;
  }

  /* ── 5. Las rejillas vuelven a flujo ───────────────────────
     En pantalla una rejilla de tres columnas pone tres piezas una al lado de
     otra, y eso las relaciona. Leídas en vertical una debajo de otra —que es
     como sale de una impresora— no hay relación visible: solo una lista. Se
     acepta la lista, que es lo que un documento puede sostener. */
  #prop-app .prop-roles,
  #prop-app .prop-xcols,
  #prop-app .prop-incls,
  #prop-app .prop-evogrps,
  #prop-app .prop-layers,
  #prop-app .prop-steps,
  #prop-app .prop-steps-row,
  #prop-app .prop-forwho,
  #prop-app .prop-pillars,
  #prop-app .prop-benefits,
  #prop-app .prop-modgroups,
  #prop-app .prop-tiles,
  #prop-app .prop-tree,
  #prop-app .prop-mods,
  #prop-app .prop-phases {
    display: block !important;
  }

  /* Los hijos de una rejilla que pasa a flujo necesitan aire entre ellos: el
     `gap` de la rejilla se pierde, y sin esto los títulos quedan pegados al
     texto de la tarjeta anterior. */
  #prop-app .prop-roles > *,
  #prop-app .prop-xcols > *,
  #prop-app .prop-incls > *,
  #prop-app .prop-evogrps > *,
  #prop-app .prop-layers > *,
  #prop-app .prop-steps > *,
  #prop-app .prop-steps-row > *,
  #prop-app .prop-forwho > *,
  #prop-app .prop-benefits > *,
  #prop-app .prop-modgroups > *,
  #prop-app .prop-tiles > * {
    margin-bottom: 10pt !important;
  }

  /* El padding de tarjeta se va: en flujo no hay caja que rellenar, y lo que
     queda es un bloque de texto con la misma sangría a los cuatro lados. */
  #prop-app .prop-benefit,
  #prop-app .prop-role,
  #prop-app .prop-xcol,
  #prop-app .prop-incl,
  #prop-app .prop-evogrp,
  #prop-app .prop-sub,
  #prop-app .prop-layer,
  #prop-app .prop-tile,
  #prop-app .prop-pillar,
  #prop-app .prop-step,
  #prop-app .prop-phase,
  #prop-app .prop-modgroup {
    padding: 0 !important;
  }

  /* ── 4. El color deja de codificar ─────────────────────────
     El acento y el verde se usaban para distinguir "esto es una mejora" de
     "esto es el punto de partida". En un documento impreso en gris o en blanco
     y negro esa diferencia desaparece y solo queda como una palabra en un
     tono más claro. El texto se vuelve negro: lo que distingue es la
     estructura, no el tinte. */
  #prop-app,
  #prop-app .prop-eyebrow,
  #prop-app .prop-benefit-label,
  #prop-app .prop-benefit-boundary,
  #prop-app .prop-modresult-label,
  #prop-app .prop-money-label,
  #prop-app .prop-money-value,
  #prop-app .prop-kv-k,
  #prop-app .prop-kv-v,
  #prop-app .prop-money-value,
  #prop-app .prop-chain-note,
  #prop-app .prop-note,
  #prop-app .prop-usecase-label,
  #prop-app .prop-addon-gap,
  #prop-app .prop-vs-tag,
  #prop-app .prop-vs-text,
  #prop-app .prop-td,
  #prop-app .prop-th,
  #prop-app .prop-tbd,
  #prop-app .prop-phase-term,
  #prop-app .prop-table-caption {
    color: #000 !important;
  }

  /* ── 5. Las rejillas vuelven a flujo ───────────────────────
     En pantalla una rejilla de tres columnas pone tres piezas una al lado de
     otra, y eso las relaciona. Leídas en vertical una debajo de otra —que es
     como sale de una impresora— no hay relación visible: solo una lista. Se
     acepta la lista, que es lo que un documento puede sostener. */
  #prop-app .prop-roles,
  #prop-app .prop-xcols,
  #prop-app .prop-incls,
  #prop-app .prop-evogrps,
  #prop-app .prop-layers,
  #prop-app .prop-steps,
  #prop-app .prop-steps-row,
  #prop-app .prop-forwho,
  #prop-app .prop-pillars,
  #prop-app .prop-benefits,
  #prop-app .prop-modgroups,
  #prop-app .prop-tiles,
  #prop-app .prop-tree,
  #prop-app .prop-mods,
  #prop-app .prop-phases {
    display: block !important;
  }

  /* Los hijos de una rejilla que pasa a flujo necesitan aire entre ellos: el
     `gap` de la rejilla se pierde, y sin esto los títulos quedan pegados al
     texto de la tarjeta anterior. */
  #prop-app .prop-roles > *,
  #prop-app .prop-xcols > *,
  #prop-app .prop-incls > *,
  #prop-app .prop-evogrps > *,
  #prop-app .prop-layers > *,
  #prop-app .prop-steps > *,
  #prop-app .prop-steps-row > *,
  #prop-app .prop-forwho > *,
  #prop-app .prop-benefits > *,
  #prop-app .prop-modgroups > *,
  #prop-app .prop-tiles > * {
    margin-bottom: 10pt !important;
  }

  /* El padding de tarjeta se va: en flujo no hay caja que rellenar, y lo que
     queda es un bloque de texto con la misma sangría a los cuatro lados. */
  #prop-app .prop-benefit,
  #prop-app .prop-role,
  #prop-app .prop-xcol,
  #prop-app .prop-incl,
  #prop-app .prop-evogrp,
  #prop-app .prop-sub,
  #prop-app .prop-layer,
  #prop-app .prop-tile,
  #prop-app .prop-pillar,
  #prop-app .prop-step,
  #prop-app .prop-phase,
  #prop-app .prop-modgroup {
    padding: 0 !important;
  }

  /* El sub-bloque deja de ser un panel y pasa a ser un capítulo: lo que antes
     lo separaba del anterior era un margen y ahora es un filete. */
  #prop-app .prop-sub--divider {
    margin-top: 18pt !important;
    padding-top: 8pt !important;
    border-top: 1px solid #999 !important;
  }

  #prop-app .prop-sec-head,
  #prop-app .prop-lead,
  #prop-app .prop-cap {
    margin-bottom: 6pt !important;
  }

  /* Los 72px de padding vertical por lado de cada bloque, que en pantalla
     separan secciones, en papel son casi media página en blanco entre cada
     título y su texto. */
  .prop-sec {
    padding: 0 !important;
    border-top: 0 !important;
  }

  .prop-main {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .prop-layout { grid-template-columns: 1fr !important; }

  /* ── 6. La jerarquía, en puntos ────────────────────────────
     La escala del sitio está pensada para píxeles de pantalla. En papel se
     traduce a puntos, que es la unidad con la que se mide un cuerpo de
     texto. El h1 de 80px serían casi seis centímetros de alto. */
  #prop-app {
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
    color: #000 !important;
  }

  .prop-h1 {
    font-size: 24pt !important;
    line-height: 1.15 !important;
    margin: 0 0 10pt !important;
  }

  .prop-h2 {
    font-size: 16pt !important;
    line-height: 1.2 !important;
    margin: 0 0 8pt !important;
  }

  .prop-h3 {
    font-size: 12.5pt !important;
    line-height: 1.3 !important;
    margin: 12pt 0 4pt !important;
  }

  /* Los títulos de tarjeta no necesitan ser más grandes que el cuerpo: se
     distinguen por el peso y por el espacio de arriba. En pantalla el tamaño
     era el que sostenía la jerarquía; en papel el peso la sostiene mejor. */
  .prop-benefit-title,
  .prop-role-name,
  .prop-xcol-role,
  .prop-incl-title,
  .prop-evogrp-title,
  .prop-step-title,
  .prop-layer-name,
  .prop-modgroup-title,
  .prop-compare-title,
  .prop-addon-title,
  .prop-sign-name {
    font-size: 10.5pt !important;
    font-weight: var(--p-weight-semibold) !important;
    margin: 10pt 0 2pt !important;
  }

  .prop-p,
  .prop-lead-p,
  .prop-benefit-text,
  .prop-role-body,
  .prop-forwho-role,
  .prop-incl-lead,
  .prop-mod-intro,
  .prop-layer-text,
  .prop-addon-body,
  .prop-pillar-desc,
  .prop-step-text,
  .prop-closing-p,
  .prop-chain-note,
  .prop-note,
  .prop-cap,
  .prop-table-caption {
    font-size: 10.5pt !important;
    max-width: none !important;
  }

  /* El cuerpo va a una sola columna de medida legible: en un papel A4 el ancho
     completo son unas 95 palabras por línea, y a partir de ahí el ojo pierde
     el retorno. */
  #prop-app p,
  #prop-app li,
  #prop-app dd,
  #prop-app .prop-usecase-text {
    max-width: 34em !important;
  }

  /* ── 7. Las listas ─────────────────────────────────────────
     Sin la caja de 24px alrededor del ✓. El sangrado se mantiene, porque es
     lo que dice que el texto es un elemento de una lista. */
  #prop-app .prop-list--check li::before,
  #prop-app .prop-list--minus li::before {
    background: none !important;
    border: 0 !important;
    width: 12pt !important;
  }

  #prop-app .prop-list-item,
  #prop-app .prop-list li {
    padding: 0 0 2pt !important;
  }

  /* Los ocho pilares salen como ocho líneas: "01 Institutional — The academic
     structure...". El número pasa a estar en línea, que es como se lee una
     enumeración en un documento. */
  #prop-app .prop-pillars,
  #prop-app .prop-pillars > li,
  #prop-app .prop-evogrps > li,
  #prop-app .prop-steps-row > li,
  #prop-app .prop-forwho > li,
  #prop-app .prop-layers > li {
    display: block !important;
    margin-bottom: 6pt !important;
  }

  #prop-app .prop-pillar-n,
  #prop-app .prop-benefit-n,
  #prop-app .prop-phase-n,
  #prop-app .prop-step-n,
  #prop-app .prop-steps-row-n,
  #prop-app .prop-tree-marker,
  #prop-app .prop-layer-n,
  #prop-app .prop-mod-n {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 16pt !important;
    padding: 0 !important;
    margin-right: 6pt !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 9pt !important;
  }

  #prop-app .prop-pillar-label {
    display: inline !important;
    margin: 0 !important;
    font-size: 10.5pt !important;
  }

  #prop-app .prop-pillar-desc {
    display: inline !important;
  }

  /* ── 8. El módulo en acordeón ──────────────────────────────
     El disparador se convierte en un subtítulo: sin caja, con su número en
     línea y la strapline debajo en versalitas. El panel es su contenido, y el
     filete de arriba del panel es lo que los separa en el papel. */
  .prop-mod-trigger {
    display: block !important;
    padding: 8pt 0 4pt !important;
    margin: 0 !important;
  }

  .prop-mod-titles { display: block !important; }

  .prop-mod-name {
    display: inline !important;
    margin: 0 6pt 0 0 !important;
    font-size: 12pt !important;
    font-weight: var(--p-weight-semibold) !important;
  }

  .prop-mod-strap {
    display: block !important;
    font-size: 9.5pt !important;
    font-style: italic !important;
    color: #444 !important;
  }

  .prop-mod-panelwrap {
    padding: 0 0 0 22pt !important;
    border-top: 0 !important;
    border-left: 1px solid #bbb !important;
  }

  #prop-app .prop-mod-intro {
    margin: 0 0 6pt !important;
  }

  #prop-app .prop-mod-result,
  #prop-app .prop-phase-deliver {
    margin: 6pt 0 !important;
    padding: 0 0 0 8pt !important;
    border-left: 1px solid #ccc !important;
  }

  #prop-app .prop-usecase {
    margin: 0 0 8pt !important;
    padding: 0 0 0 8pt !important;
    border-left: 1px solid #666 !important;
  }

  /* ── 9. Las tablas se quedan ───────────────────────────────
     Son datos tabulares y en un documento una tabla es una tabla. Se les quita
     el radio del contenedor y la zebra —que la mayoría de impresoras
     descarta— y se quedan solo los filetes horizontales: menos ruido, y las
     filas siguen separándose. */
  .prop-tablewrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 6pt 0 !important;
  }

  .prop-table {
    width: 100% !important;
    font-size: 9pt !important;
    line-height: 1.35 !important;
  }

  .prop-th,
  .prop-td {
    padding: 4pt 6pt !important;
    background: none !important;
    border-bottom: 0.5pt solid #999 !important;
  }

  .prop-table thead th {
    background: none !important;
    border-bottom: 1pt solid #000 !important;
    font-size: 8pt !important;
    color: #000 !important;
  }

  .prop-table tbody tr:nth-child(even) { background: none !important; }

  .prop-table tbody tr {
    break-inside: avoid !important;
  }

  .prop-table-caption {
    padding: 0 0 4pt !important;
    font-style: italic !important;
  }

  /* El encabezado se repite en cada página: en una tabla que se parte, es la
     única forma de saber qué columna se está leyendo. */
  .prop-table thead {
    display: table-header-group !important;
  }

  .prop-table tfoot {
    display: table-footer-group !important;
  }

  .prop-th--num, .prop-td--num,
  .prop-th--mod, .prop-td--mod {
    font-size: 8.5pt !important;
    color: #000 !important;
  }

  /* La celda pendiente conserva un fondo en papel. Es el dato que el cliente
     tiene que completar, y sin él se pierde la diferencia entre un valor y un
     hueco. */
  .prop-tbd,
  .prop-td--tbd {
    background: #eee !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── 10. Los saltos de página ──────────────────────────────
     Cada sección empieza en página nueva: son las siete partes del argumento
     y cada una se lee de principio a fin. Y un título nunca queda solo al pie
     de una hoja, que es el fallo clásico de un documento impreso. */
  .prop-sec {
    page-break-before: always;
    break-before: page;
  }

  /* La portada es la primera: no puede arrastrar un salto de página antes. */
  .prop-sec:first-of-type,
  .prop-sec--cover {
    page-break-before: avoid;
    break-before: avoid;
  }

  .prop-sec--cover {
    page-break-after: always;
    break-after: page;
  }

  #prop-app h1,
  #prop-app h2,
  #prop-app h3,
  #prop-app h4,
  #prop-app .prop-mod-name,
  #prop-app .prop-phase-name,
  #prop-app .prop-addon-title,
  #prop-app .prop-benefit-title {
    page-break-after: avoid;
    break-after: avoid-page;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Una tabla, un acordeón o una tarjeta pueden partirse: son bloques largos y
     forzarles una hoja entera deja páginas en blanco. Un encabezado de tabla
     y su primera fila van juntos. */
  .prop-mod,
  .prop-tile,
  .prop-role,
  .prop-xcol,
  .prop-incl,
  .prop-evogrp,
  .prop-layer,
  .prop-addon,
  .prop-pillar,
  .prop-step,
  .prop-tree-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .prop-phase {
    page-break-inside: auto;
    break-inside: auto;
  }

  .prop-phase-name {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* El árbol es lo único que se queda con una línea: los railes verticales
     son los que dicen que un nivel cuelga de otro, y sin ellos el árbol se
     convierte en una lista más. Se les da un gris que imprime, porque
     --p-line es un rgba al 14% que en papel no se ve. */
  .prop-tree-row {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 3pt 0 !important;
  }

  .prop-tree-node::before,
  .prop-tree-child::before {
    background: #bbb !important;
    width: 0.75pt !important;
  }

  /* Los pares clave/valor —"Inicio", "Duración total", "Vigencia"— son un grid
     de 180px y 1fr. En pantalla esa columna fija alinea los valores; en papel
     se convierte en dos columnas de texto sin relación y la definición deja
     de leerse como tal. Pasan a flujo: la clave en versalitas, el valor
     debajo. */
  #prop-app .prop-kv {
    display: block !important;
    margin: 0 0 8pt !important;
  }

  #prop-app .prop-kv-row {
    display: block !important;
    margin-bottom: 5pt !important;
  }

  #prop-app .prop-kv-v {
    margin: 0 !important;
  }

  /* La ficha de datos de la portada: un grid de una sola columna con filete
     arriba. En papel el filete se mantiene y la rejilla no hace falta. */
  #prop-app .prop-cover-meta {
    display: block !important;
    max-width: none !important;
    padding-top: 10pt !important;
    border-top: 0.5pt solid #999 !important;
  }

  #prop-app .prop-cover-meta-row {
    margin-bottom: 4pt !important;
  }

  #prop-app .prop-cover-meta-dd {
    margin: 0 0 0 14pt !important;
  }

  /* El par incluido / ampliación se lee con un filete a la izquierda que marca
     la diferencia. Con el color gone, el filete es lo único que queda, así que
     pasa de --p-line —invisible al 14%— a un gris que imprime. */
  #prop-app .prop-vs-row {
    border-left: 0.75pt solid #999 !important;
    padding-left: 8pt !important;
  }

  #prop-app .prop-vs-row--in {
    border-left: 2pt solid #666 !important;
  }

  /* Los estados hover no existen en un medium sin puntero, pero un motor de
     impresión puede dejarlos marcados si el cursor estaba encima al imprimir. */
  #prop-app .prop-table tbody tr:hover td,
  #prop-app .prop-table tbody tr:hover th,
  #prop-app .prop-xcol:hover,
  #prop-app .prop-mod-trigger[aria-expanded="true"] .prop-mod-n {
    background: none !important;
    border-color: transparent !important;
    color: inherit !important;
  }

  /* ── 11. Enlaces y color ──────────────────────────────────
     En papel no hay nada que hacer clic, así que una URL que aparece en el
     documento debe verse como lo que es. */
  #prop-app a {
    color: var(--p-ink-strong) !important;
    text-decoration: none !important;
  }

  #prop-app a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 8.5pt;
    color: var(--p-ink-mute);
    word-break: break-all;
  }

  /* ── 12. La portada ────────────────────────────────────────
     Sin la pantalla de scroll ni la flecha. La ficha de datos sí se imprime:
     es el resumen que el cliente guarda. */
  #prop-app .prop-h1 {
    page-break-before: avoid;
  }

  .prop-cover-scroll {
    display: none !important;
  }

  /* ── 13. Sin movimiento ni sombra ────────────────────────── */
  #prop-app *,
  #prop-app *::before,
  #prop-app *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}