/* ============================================================================
   Reglamento Estudiantil — estilos propios del documento.

   Todo valor sale de un token --cccn-sys-*. Regla 1 del sistema: un hex escrito
   a mano dentro de un componente es un error de sistema.
   ============================================================================ */

/* Altura libre bajo la cabecera pegajosa. El valor de reserva cubre la
   cabecera (logo de 160 px de ancho = 63 px de alto + relleno + borde = 96 px); js/reglamento.js
   la mide de verdad y lo sobrescribe, para que no se descuadre si el logo o el
   relleno cambian en el Design System. */
/* El hueco que deja un salto de ancla lo define scroll-padding-top del Design
   System (6rem fijos). Se sustituye por la altura medida de la cabecera: 6rem
   son 96 px contra una cabecera de 89, y basta con que crezca el logo para que
   el destino quede tapado. */
html { scroll-padding-top: var(--reg-cabecera); }

:root {
  /* Solo tema claro. "only light" además impide que el navegador oscurezca la
     página por su cuenta (modo oscuro forzado de Chrome y Samsung Internet). */
  color-scheme: only light;
  --reg-cabecera: 6rem;
  /* Tono del destello de llegada. Se deriva del rojo institucional en vez de
     escribirse a mano. */
  --reg-destaque: color-mix(in srgb, var(--cccn-sys-color-primary) 42%, transparent);
}

/* Si el navegador no soporta color-mix, el destello queda en el gris del
   sistema: menos vistoso, pero perceptible. El filete rojo no depende de esto. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root { --reg-destaque: var(--cccn-sys-color-surface-tint); }
}

/* ------------------------------------------------------------- Portada --- */
/* La cabecera queda por encima del índice pegajoso al desplazarse. */
.reg-cabecera { z-index: var(--cccn-sys-z-sticky); }
/* El manual de marca fija 150 px de ancho como mínimo en pantalla (pág. 29).
   La altura fija del Design System (56 px, 44 px en móvil) lo deja en 141 y
   111 px; acá manda el ancho. */
.reg-cabecera .cccn-header__logo img { width: 160px; height: auto; }

.reg-portada { padding-block-start: var(--cccn-sys-space-10); }

.reg-antetitulo {
  letter-spacing: normal;
  text-transform: none;
  color: var(--cccn-sys-color-primary-text);
}

.reg-titulo {
  margin-block: var(--cccn-sys-space-3) var(--cccn-sys-space-4);
}
.reg-titulo strong {
  color: var(--cccn-sys-color-primary-text);
  font-weight: var(--cccn-sys-font-weight-bold);
}
.reg-lede {
  max-width: var(--cccn-sys-type-measure);
}
.reg-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cccn-sys-space-3);
  margin-block-start: var(--cccn-sys-space-5);
}
/* a:hover y a:visited del sistema pesan más que .cccn-btn y teñían el texto
   del botón con el color de enlace. Blanco en todos los estados. */
.reg-pdf .cccn-btn--primary,
.reg-pdf .cccn-btn--primary:hover,
.reg-pdf .cccn-btn--primary:visited,
.reg-pdf .cccn-btn--primary:focus-visible { color: var(--cccn-sys-color-on-primary); }

.reg-pieficha { background: var(--cccn-sys-color-surface-subtle); }
.reg-pieficha__titulo { margin-block: 0 var(--cccn-sys-space-4); }

.reg-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--cccn-sys-space-5);
  margin: 0;
}
.reg-ficha__dato { min-width: 0; }
/* Sin versalitas ni tracking expandido: el espaciado de estas etiquetas es el
   mismo del texto corrido, como el resto de la página. */
.reg-ficha dt {
  font-size: var(--cccn-sys-type-body-sm-size);
  font-weight: var(--cccn-sys-font-weight-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--cccn-sys-color-on-surface-muted);
  margin-block-end: var(--cccn-sys-space-1);
}
.reg-ficha dd {
  margin: 0;
  font-size: var(--cccn-sys-type-body-md-size);
  line-height: var(--cccn-sys-type-body-md-line);
  color: var(--cccn-sys-color-on-surface-strong);
}
/* ------------------------------------------ Disposición índice + texto --- */
/* Del botón «Ver PDF» al índice y al texto, el mismo aire que de la entrada
   al botón (space-5), en todos los anchos. Se sube la especificidad para
   ganarle a la regla de .cccn-section de pantallas angostas. */
.cccn-section.reg-portada { padding-block-end: 0; }
.cccn-section.reg-cuerpo { padding-block-start: var(--cccn-sys-space-5); }

/* ---- Teléfono y tableta en vertical ---------------------------------------
   Un documento de 121 artículos necesita un ritmo más apretado que una página
   de mercadeo: con el interlineado y los espacios de sección por omisión, en
   un teléfono se recorre el triple de pantalla para leer lo mismo. */
@media (max-width: 47.99rem) {
  .cccn-section { padding-block: var(--cccn-sys-space-8); }
  .reg-portada { padding-block-start: var(--cccn-sys-space-6); }

  .reg-articulado p,
  .reg-inciso__cuerpo { line-height: 1.5; }

  .reg-seccion { margin-block-end: var(--cccn-sys-space-10); }
  .reg-articulo { margin-block-end: var(--cccn-sys-space-6); }
  .reg-inciso,
  .reg-subinciso { margin-block-end: var(--cccn-sys-space-2); }
  .reg-articulado p { margin-block-end: var(--cccn-sys-space-2); }
  .reg-subseccion { margin-block: var(--cccn-sys-space-6) var(--cccn-sys-space-3); }
}

.reg-disposicion {
  display: grid;
  gap: var(--cccn-sys-space-10);
  align-items: start;
}
/* Un hijo de rejilla no baja de su ancho mínimo de contenido salvo que se le
   diga. Sin esto, una palabra larga o un inciso sangrado ensancha la columna
   y empuja la página entera más allá de la pantalla del teléfono. */
.reg-disposicion > * { min-inline-size: 0; }
@media (min-width: 60rem) {
  .reg-disposicion {
    /* El articulado se queda con lo que haya hasta 76ch. El bloque va al
       borde izquierdo del contenedor, alineado con la portada y el botón
       «Ver PDF»; centrado se corría a la derecha de ese borde. */
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 76ch);
    justify-content: start;
    gap: var(--cccn-sys-space-10);
  }
}
@media (min-width: 90rem) {
  .reg-disposicion { gap: var(--cccn-sys-space-12); }
}

/* ---------------------------------------------------------------- Índice --- */
.reg-indice__caja {
  background: var(--cccn-sys-color-surface-cream);
  border: 1px solid var(--cccn-sys-color-outline-variant);
  border-radius: var(--cccn-sys-shape-lg);
  padding: var(--cccn-sys-space-4);
}
@media (min-width: 30rem) {
  .reg-indice__caja { padding: var(--cccn-sys-space-5); }
}
/* Sin esto el índice completo —28 capítulos y 121 artículos— queda delante del
   articulado en una sola columna, y hay que recorrerlo entero para llegar al
   primer artículo. Acotado en alto se comporta como un panel de navegación y
   el texto empieza de inmediato. El contenido sigue siendo texto real: Ctrl+F
   lo encuentra y el navegador desplaza hasta él. */
@media (max-width: 59.99rem) {
  .reg-indice__scroll {
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--cccn-sys-space-4);
    border-block-start: 1px solid var(--cccn-sys-color-outline-variant);
    padding-block-start: var(--cccn-sys-space-3);
  }
}

@media (min-width: 60rem) {
  .reg-indice {
    position: sticky;
    /* deja aire bajo la cabecera pegajosa */
    top: var(--reg-cabecera);
    max-height: calc(100vh - var(--reg-cabecera) - var(--cccn-sys-space-4));
    display: flex;
  }
  .reg-indice__caja {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .reg-indice__scroll {
    overflow-y: auto;
    min-height: 0;
    /* el foco del teclado no debe quedar pegado al borde al desplazarse */
    scroll-padding-block: var(--cccn-sys-space-4);
  }
}

.reg-buscador { margin-block: var(--cccn-sys-space-4); }
.reg-buscador__ayuda,
.reg-buscador__estado {
  margin-block: var(--cccn-sys-space-2) 0;
  color: var(--cccn-sys-color-on-surface-variant);
}
.reg-buscador__estado:empty { display: none; }

.reg-indice__lista,
.reg-indice__arts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reg-indice__cap { margin-block-end: var(--cccn-sys-space-4); }
.reg-indice__cap > a {
  display: block;
  font-size: var(--cccn-sys-type-label-md-size);
  font-weight: var(--cccn-sys-font-weight-semibold);
  line-height: var(--cccn-sys-type-label-md-line);
  color: var(--cccn-sys-color-on-surface-strong);
  text-decoration: none;
  padding-block: var(--cccn-sys-space-1);
}
.reg-indice__cap > a:hover,
.reg-indice__cap > a:focus-visible { text-decoration: underline; }

.reg-indice__arts {
  margin-block-start: var(--cccn-sys-space-1);
  padding-inline-start: var(--cccn-sys-space-3);
  border-inline-start: 2px solid var(--cccn-sys-color-outline-variant);
}
.reg-indice__arts a {
  display: block;
  padding-block: var(--cccn-sys-space-1);
  font-size: var(--cccn-sys-type-body-sm-size);
  line-height: var(--cccn-sys-type-body-sm-line);
  color: var(--cccn-sys-color-on-surface-variant);
  text-decoration: none;
}
.reg-indice__arts a:hover,
.reg-indice__arts a:focus-visible {
  color: var(--cccn-sys-color-primary-text);
  text-decoration: underline;
}
/* Artículo al que apunta el enlace actual */
.reg-indice a[aria-current="true"] {
  color: var(--cccn-sys-color-primary-text);
  font-weight: var(--cccn-sys-font-weight-semibold);
}

/* ------------------------------------------------------------ Articulado --- */
/* 66ch dejaba 190 px de la columna sin usar en pantalla de escritorio. 76ch
   sigue dentro del rango cómodo de lectura y aprovecha casi todo el ancho. */
.reg-articulado { max-width: 76ch; }
/* cccn-prose le da margen superior a todo h2; en el primero sobra: el texto
   arranca a la misma altura que el índice. */
.reg-articulado > .reg-seccion:first-child > .reg-seccion__titulo { margin-block-start: 0; }

.reg-seccion {
  margin-block-end: var(--cccn-sys-space-16);
}
.reg-seccion__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cccn-sys-space-2);
  margin-block: 0 var(--cccn-sys-space-6);
  padding-block-end: var(--cccn-sys-space-3);
  border-block-end: 2px solid var(--cccn-sys-color-primary);
  font-size: var(--cccn-sys-type-headline-sm-size);
  line-height: var(--cccn-sys-type-headline-sm-line);
  font-weight: var(--cccn-sys-font-weight-light);
}
.reg-seccion__numero {
  font-size: var(--cccn-sys-type-body-sm-size);
  font-weight: var(--cccn-sys-font-weight-bold);
  letter-spacing: normal;
  color: var(--cccn-sys-color-primary-text);
  flex-basis: 100%;
}
.reg-seccion__nombre {
  font-weight: var(--cccn-sys-font-weight-semibold);
  color: var(--cccn-sys-color-on-surface-strong);
}

.reg-subseccion {
  margin-block: var(--cccn-sys-space-8) var(--cccn-sys-space-4);
  font-size: var(--cccn-sys-type-title-md-size);
  font-weight: var(--cccn-sys-font-weight-semibold);
  color: var(--cccn-sys-color-on-surface-strong);
}

.reg-articulo {
  margin-block-end: var(--cccn-sys-space-8);
}
.reg-articulo__titulo {
  margin-block: 0 var(--cccn-sys-space-3);
  font-size: var(--cccn-sys-type-title-md-size);
  line-height: var(--cccn-sys-type-title-md-line);
  font-weight: var(--cccn-sys-font-weight-regular);
}
.reg-articulo__numero {
  font-weight: var(--cccn-sys-font-weight-bold);
  color: var(--cccn-sys-color-primary-text);
}
/* El punto entre número y nombre: no debe heredar el rojo del número. */
.reg-articulo__sep { color: var(--cccn-sys-color-on-surface-variant); }
.reg-articulo__nombre {
  font-weight: var(--cccn-sys-font-weight-semibold);
  color: var(--cccn-sys-color-on-surface-strong);
}
.reg-articulado p { margin-block: 0 var(--cccn-sys-space-3); }


/* ------------------------------------------------- Destino de navegación --- */
/* Al llegar por un enlace del índice o por una remisión interna, el destino
   tiene que verse de inmediato. El tono anterior —surface-tint sobre blanco—
   era una diferencia de 1.03:1: aplicaba de verdad y en pantalla no se
   distinguía de nada. Ahora el bloque entero lleva fondo teñido, filete rojo y
   un destello al llegar.

   Ni el filete ni el halo desplazan nada: `outline` y `box-shadow` son tinta,
   no ocupan espacio en el diseño y no ensanchan la página. Con el canalón
   mínimo de 16 px, los 10 px que sobresale el filete caben de sobra.

   Las reglas :target son el comportamiento sin JavaScript; con JavaScript la
   clase .reg-destacado marca exactamente el mismo elemento, así que el aspecto
   es el mismo con script y sin él. */
.reg-destacado,
.reg-seccion:target .reg-seccion__titulo,
.reg-articulo:target,
.reg-inciso:target,
.reg-subinciso:target {
  /* En reposo solo queda el filete: el relleno se desvanece al llegar y deja
     el texto sobre el fondo de la página, sin teñir lo que se está leyendo. */
  background-color: transparent;
  box-shadow: 0 0 0 var(--cccn-sys-space-3) transparent;
  outline: 2px solid var(--cccn-sys-color-primary);
  outline-offset: var(--cccn-sys-space-2);
  border-radius: var(--cccn-sys-shape-sm);
}

/* Destello de llegada: un segundo de relleno que se apaga hacia el fondo. Se
   reinicia en cada clic, incluso si es el mismo enlace otra vez: sin eso,
   volver a pulsar un enlace ya visitado no da ninguna señal de que pasó algo.
   El halo lleva el mismo tono que el relleno para que se apaguen juntos. */
@keyframes reg-destello {
  from {
    background-color: var(--reg-destaque);
    box-shadow: 0 0 0 var(--cccn-sys-space-3) var(--reg-destaque);
  }
  to {
    background-color: transparent;
    box-shadow: 0 0 0 var(--cccn-sys-space-3) transparent;
  }
}
.reg-destacado { animation: reg-destello 1s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .reg-destacado { animation: none; }
}

/* ------------------------------------------------------- Incisos y listas --- */
.reg-lista {
  list-style: none;
  margin-block: 0 var(--cccn-sys-space-4);
  padding-inline-start: 0;
}
/* Sangría francesa, no rejilla. Una rejilla CSS se fragmenta mal al imprimir:
   Chrome colapsa la columna del cuerpo y saca el texto a una letra por línea.
   Esto es además menos CSS y se comporta igual en pantalla. */
/* La sangría se come ancho de lectura, y en 390 px eso se nota: 40 px son el
   12 % de la pantalla. Arranca en 1.75rem y crece a partir de tableta. */
.reg-inciso,
.reg-subinciso {
  padding-inline-start: 1.75rem;
  text-indent: -1.75rem;
  margin-block-end: var(--cccn-sys-space-3);
}
.reg-marca {
  display: inline-block;
  inline-size: 1.35rem;
  margin-inline-end: 0.4rem;
  text-indent: 0;
  text-align: end;
  font-weight: var(--cccn-sys-font-weight-semibold);
  color: var(--cccn-sys-color-primary-text);
  font-variant-numeric: tabular-nums;
}
.reg-inciso__cuerpo {
  text-indent: 0;
}

/* Viñetas: el original no les da marcador, se dibuja uno. */
.reg-lista--vineta .reg-inciso { padding-inline-start: 1.5rem; }
.reg-lista--vineta .reg-inciso::before {
  content: "‚2";
  display: inline-block;
  inline-size: 1rem;
  margin-inline-end: 0.5rem;
  text-indent: 0;
  text-align: end;
  color: var(--cccn-sys-color-primary);
}

/* Sublistas con marcador literal del original (a.1., c.2.). */
.reg-sublista {
  margin-inline-start: var(--cccn-sys-space-3);
  margin-block-start: var(--cccn-sys-space-3);
}
.reg-subinciso { padding-inline-start: 2.25rem; text-indent: -2.25rem; }
.reg-subinciso .reg-marca { inline-size: 1.85rem; }

@media (min-width: 40rem) {
  .reg-inciso,
  .reg-subinciso { padding-inline-start: 2.5rem; text-indent: -2.5rem; }
  .reg-marca { inline-size: 2rem; margin-inline-end: 0.5rem; }
  .reg-subinciso { padding-inline-start: 3rem; text-indent: -3rem; }
  .reg-subinciso .reg-marca { inline-size: 2.5rem; }
}

/* Listas anidadas: un escalón por nivel. El nivel 0 no se sangra: ya lo hace
   la rejilla del inciso. */
.reg-lista--n0 { margin-inline-start: 0; }
.reg-lista--n1 { margin-inline-start: var(--cccn-sys-space-3); }
.reg-lista--n2 { margin-inline-start: var(--cccn-sys-space-5); }
.reg-lista--n3 { margin-inline-start: var(--cccn-sys-space-6); }
@media (min-width: 40rem) {
  .reg-lista--n1 { margin-inline-start: var(--cccn-sys-space-6); }
  .reg-lista--n2 { margin-inline-start: var(--cccn-sys-space-8); }
  .reg-lista--n3 { margin-inline-start: var(--cccn-sys-space-10); }
}

/* ---------------------------------------------------------- Visor del PDF --- */
/* Panel grande centrado en escritorio; pantalla completa en teléfonos. Las
   hojas se apilan en una columna que se desplaza sola, con la barra fija. */
.reg-visor {
  inline-size: min(64rem, calc(100vw - 2 * var(--cccn-sys-space-6)));
  block-size: calc(100dvh - 2 * var(--cccn-sys-space-6));
  max-inline-size: none;
  max-block-size: none;
  margin: auto;                  /* el reset del sistema quita el centrado nativo */
  border-radius: var(--cccn-sys-shape-lg);
  overflow: hidden;
  z-index: var(--cccn-sys-z-modal);
}
.reg-visor[open] { display: flex; flex-direction: column; }
html:has(.reg-visor[open]) { overflow: hidden; }   /* la página no se mueve detrás */

.reg-visor__barra {
  display: flex;
  align-items: center;
  gap: var(--cccn-sys-space-2);
  padding: var(--cccn-sys-space-2) var(--cccn-sys-space-2) var(--cccn-sys-space-2) var(--cccn-sys-space-5);
  border-block-end: 1px solid var(--cccn-sys-color-outline-variant);
  background: var(--cccn-sys-color-surface);
}
.reg-visor__titulo {
  margin: 0;
  flex: 1;
  min-inline-size: 0;
  font-size: var(--cccn-sys-type-body-lg-size);
  font-weight: var(--cccn-sys-font-weight-semibold);
  color: var(--cccn-sys-color-on-surface-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-visor__pagina {
  margin: 0 var(--cccn-sys-space-2) 0 0;
  font-size: var(--cccn-sys-type-body-sm-size);
  color: var(--cccn-sys-color-on-surface-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reg-visor__hojas {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cccn-sys-space-4);
  padding: var(--cccn-sys-space-5);
  background: var(--cccn-sys-color-surface-subtle);
}
.reg-visor__hojas img {
  display: block;
  inline-size: 100%;
  max-inline-size: 52rem;
  block-size: auto;
  background: var(--cccn-sys-color-surface);
  box-shadow: var(--cccn-sys-elevation-1);
}
@media (max-width: 47.99rem) {
  .reg-visor {
    inline-size: 100vw;
    block-size: 100dvh;
    border-radius: 0;
  }
  .reg-visor__hojas { padding: var(--cccn-sys-space-3); gap: var(--cccn-sys-space-3); }
}

/* ------------------------------------------------ Ir al inicio / al final --- */
/* Sutil a propósito: translúcido hasta que se lo usa. El área táctil se queda
   en el tamaño cómodo del sistema aunque el ícono sea chico. En teléfonos con
   barra de gestos se aparta del borde inferior (safe-area). */
.reg-saltar {
  position: fixed;
  inset-block-end: max(var(--cccn-sys-space-5), env(safe-area-inset-bottom));
  inset-inline-end: max(var(--cccn-sys-space-5), env(safe-area-inset-right));
  display: grid;
  place-items: center;
  inline-size: var(--cccn-sys-target-comfortable);
  block-size: var(--cccn-sys-target-comfortable);
  padding: 0;
  border: 1px solid var(--cccn-sys-color-outline);
  border-radius: var(--cccn-sys-shape-full);
  background: var(--cccn-sys-color-surface);
  color: var(--cccn-sys-color-on-surface-strong);
  box-shadow: var(--cccn-sys-elevation-1);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: var(--cccn-sys-z-raised);
}
.reg-saltar[hidden] { display: none; }
.reg-saltar:hover,
.reg-saltar:focus-visible {
  opacity: 1;
  background: var(--cccn-sys-color-surface-subtle);
}
.reg-saltar svg { transition: transform 0.2s; }
.reg-saltar[data-dir="arriba"] svg { transform: rotate(180deg); }
/* Sin cursor no hay hover que lo revele. */
@media (hover: none) {
  .reg-saltar { opacity: 0.8; }
}

/* Cadenas largas sin espacios —el nombre del archivo fuente, los correos
   institucionales— desbordan la pantalla angosta si no se les permite partir. */
.reg-origen {
  font-style: italic;
  overflow-wrap: anywhere;
}
.reg-articulado,
.reg-indice,
.cccn-footer { overflow-wrap: break-word; }

/* ----------------------------------------------------------------- Pie --- */
/* Logotipo oficial a color sobre el navy del pie: va en su recuadro blanco,
   nunca recoloreado. 200 px de caja deja el logo por encima del mínimo de
   150 px de ancho que fija el manual. */
.cccn-footer__brand .reg-pie__logo {
  width: 200px;
  height: auto;
  padding: var(--cccn-sys-space-3);
  background: var(--cccn-sys-color-surface);
  border-radius: var(--cccn-sys-shape-xs);
}
.reg-articulado a[href^="mailto:"],
.reg-articulado a[href^="http"] { overflow-wrap: anywhere; }

/* ------------------------------------------------------------- Impresión --- */
@page {
  margin: 18mm 16mm;
}
@media print {
  .cccn-header,
  .cccn-flagstrip,
  .cccn-footer__grid,
  .reg-indice,
  .reg-saltar { display: none !important; }

  .reg-disposicion { display: block; }

  /* El destino de navegación es una ayuda de pantalla: en papel no significa
     nada y gasta tinta. */
  .reg-destacado,
  .reg-seccion:target .reg-seccion__titulo,
  .reg-articulo:target,
  .reg-inciso:target,
  .reg-subinciso:target {
    background: none;
    box-shadow: none;
    outline: 0;
    animation: none;
  }
  .reg-articulado { max-width: none; }

  /* En papel manda la economía de páginas: cuerpo de 10 pt, interlínea justa. */
  html { font-size: 10pt; }
  .reg-articulado p,
  .reg-inciso__cuerpo { line-height: 1.4; }
  .reg-seccion { margin-block-end: var(--cccn-sys-space-6); }
  .reg-articulo { margin-block-end: var(--cccn-sys-space-5); }

  /* Un capítulo empieza en página nueva. Los artículos NO se fuerzan enteros:
     hacerlo deja media página en blanco delante de cada artículo largo. */
  .reg-seccion { break-before: page; }
  .reg-seccion:first-of-type { break-before: auto; }
  .reg-seccion__titulo,
  .reg-subseccion,
  .reg-articulo__titulo { break-after: avoid; }
  .reg-inciso,
  .reg-subinciso { break-inside: avoid; }
  /* Nunca una línea suelta al pie ni al inicio de página. */
  p, li { orphans: 3; widows: 3; }


  /* La URL de destino se imprime junto al enlace: en papel no hay clic.
     Se omite en los correos, donde el texto visible ya es la dirección. */
  .reg-articulado a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}

/* ------------------------------------------------------- Menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reg-saltar,
  .reg-saltar svg { transition: none; }
}